.custom-dialog-container .mdc-dialog__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  pointer-events: auto;
  overflow-y: hidden; // Corrected to disable vertical scrolling
  background-color: red;
  outline: 0;
  transform: scale(0.8); // Custom transform
}
p-paginator {
  position: absolute;
  bottom: -4rem !important;
  width: 100%;
  right: 0rem;
  z-index: 1;
}
.image{
  border-radius: 23px;
}
:host ::ng-deep {
  #pn_id_3_list {
    padding-left: 0px !important;
  }
}

.styled-table th:nth-child(3),
.styled-table td:nth-child(3) {
  width: 400px; /* Adjust the width as needed */
}
.student-name-column {
  width: 280px; /* Set your desired width */
}
.col-4 {
  position: absolute;
  left: 0rem;
  top: 1rem;
  display: flex;
}

.col-4 {
  i:hover {
    color: #2fdf84;
    cursor: pointer;
  }
}
.col-4En {
  position: absolute;
  right: 18%;
  top: 1rem;
  display: flex;
  i:hover {
    color: #2fdf84;
    cursor: pointer;
  }
}
.table-container {
  margin-top: 3rem;
}
p-select {
  width: 22% !important;
  height: 3rem !important;
  margin-right: 1rem !important;
}
.inputText {
  width: 24%;
}
.example-full-width {
  width: 10%;
}
::-webkit-scrollbar form {
  position: absolute;
  right: 2rem;
  top: 3rem;
}
.modal-content {
  border-radius: 1.5%;
}
.container {
  border-radius: 23px;
}

.school {
  text-align: right;
  width: 11rem;
  z-index: 2;
}

.line {
  width: 100%;
  position: relative;
  top: 3rem;
  z-index: 1;
  border-bottom: 1px solid rgb(180 180 180);
}

.term {
  margin-right: -8px;
}

.class {
  margin-right: 8px;
}
.group3 {
  position: absolute;
  right: 0rem;
  top: 1rem;
}
.grade {
  margin-right: 0px;
}
.tablink {
  color: black;
  float: right;
  border: none;
  outline: none;
  background-color: white;
  width: 100%;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 9%;
}

.tablink span {
  z-index: 2;
}

.tablink:hover {
  color: black;
}

.tablink.active {
  border-bottom: 3px solid #2fdf84;
  z-index: 4;
}

.tabcontent {
  color: black;
  display: block;
  padding: 24px 20px;
  height: 100%;
  margin-right: -2rem;
}

.className {
  position: relative;
  top: -2.3rem;
  right: 5rem;
}

.gradeName {
  position: relative;
  top: -2rem;
  right: 2rem;
}

.termName {
  position: absolute;
  top: -0.5rem;
  right: 17%;
}
.group2 {
  margin-top: 3rem;
}
.group3 {
  margin-top: 3rem;
  display: flex;
}
.add {
  position: absolute;
  top: 1rem;
  width: 12%;
  border-radius: 32px;
  left: 1rem;
  padding: 8px 0;
  border: none;
}
.addEn {
  position: absolute;
  top: 1rem;
  width: 12%;
  border-radius: 32px;
  right: 1rem;
  padding: 8px 0;
  border: none;
}
.modal-container {
  background-color: white;
}
@media (max-width: 1600px) {
  .add {
    width: 19%;
  }
  .styled-table th:nth-child(3),
  .styled-table td:nth-child(3) {
    width: 400px; /* Adjust the width as needed */
  }
}
@media (max-width: 900px) {
  form {
    right: -1rem;
  }
  :host ::ng-deep {
    .chipsOne {
      display: none;
    }
  }
  .group3 {
    right: 0rem;
  }
  :host ::ng-deep {
    .chipsEn {
      display: none;
    }
  }
  p-paginator {
    display: none;
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 1px;
    border: 1px solid #dddddd;
  }
}

@media (max-width: 600px) {
  form {
    right: -1rem;
  }
}

@media (max-width: 400px) {
  // .tablink {
  //     color: rgb(35, 22, 213);
  // }
}

//this is for talbes
/* Resetting some default styles */

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

.styled-table th,
.styled-table td {
  padding: 12px 1rem;
  border: 1px solid #dddddd;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

//-----------------------------------------------//--------------------
.input-group {
  margin-bottom: 15px;
  position: relative;
}
.label1 {
  position: absolute;
  left: 94px;
  top: -37px;
  font-size: 11px;
  color: #141313;
  transition: 0.2s;
  pointer-events: none;
}
#clearIcon {
  position: absolute;
  left: 1.7rem;
  top: -25px;
  font-size: 12px !important;
  color: #777;
  transition: 0.2s;
}
#clearIcon1 {
  position: absolute;
  left: 11.7rem;
  top: 27px;
  font-size: 12px !important;
  color: #777;
  transition: 0.2s;
}
#clearIcon:hover,
#clearIcon1:hover {
  cursor: pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 20%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
li {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}
li:hover {
  background-color: #f0f0f0;
}

:host ::ng-deep .p-dropdown .p-dropdown-clear-icon {
  color: #6b7280;
  left: 3rem !important; /* Align to the left */
  direction: rtl;
}
:host
  ::ng-deep
  .mdc-text-field--outlined.mdc-text-field--focused
  .mdc-notched-outline__leading {
  border-color: #2fdf85 !important;
  // box-shadow: 0 0 5px 0 #2fdf85!important;
  border-width: 2px 2px 2px 0 !important;
  transition: border-color 0.2s;
}
:host
  ::ng-deep
  .mdc-text-field--outlined.mdc-text-field--focused
  .mdc-notched-outline__trailing {
  border-color: #2fdf85 !important;
  // box-shadow: 0 0 5px 0 #2fdf85!important;
  border-width: 2px 0 2px 2px !important;
  transition: border-color 0.2s;
}
:host
  ::ng-deep.mdc-text-field--outlined.mdc-text-field--focused
  .mdc-notched-outline__notch {
  border-color: #2fdf85 !important;
  // box-shadow: 2px 0 5px 0 #2fdf85!important;
  border-width: 2px 0 2px 0 !important;
  transition: border-color 0.2s;
}

/* Cancel icon styles */
.cancel {
  left: -8px;
  padding-left: 19px;
  position: absolute;
  top: 16px;
  color: #6f6d6d;
}
.cancel:hover {
  color: rgb(70, 70, 70);
  cursor: pointer;
}
.dropdown13 {
  left: -8px;
  color: white;
  padding-left: 19px;
  position: absolute;
  top: 16px;
}
// for card
.responsive-card {
  width: 100%;
  max-width: 250px;
  flex-grow: 1;
}
.group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 600px) {
  .group {
    grid-template-columns: 1fr; /* Stack cards vertically */
  }
}
p-card img {
  max-width: 40%;
  height: 5rem;
  top: 0.4rem;
  position: relative;
  left: 0rem;
  display: flex;
  justify-self: center;
  border-radius: 64px;
}
.modal-content {
  padding: 1rem;
}
:host ::ng-deep .custom-button {
  background-color: #ffffff !important;
  color: #4c4c4c !important;
  border: none !important;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
}
:host ::ng-deep .custom-button:hover {
  border: 1px solid rgb(248, 182, 170) !important;
}
:host ::ng-deep .custom-button {
  border: 1px solid rgb(177, 171, 171) !important;
  border-radius: 3px !important;
}
:host ::ng-deep .custom-button.guardain {
  margin-right: 1px;
  width: 100%;
}
:host ::ng-deep .p-button {
  padding: 0.75rem 0.88rem !important;
}
:host ::ng-deep {
  .chipsOne {
    position: absolute;
    margin-top: 0rem;
    left: 3%;
    width: 14rem;
    z-index: 1;
    .p-chips-multiple-container {
      height: 38px;
    }
  }
}
:host ::ng-deep {
  .chipsEn {
    position: absolute;
    margin-top: 0rem;
    right: 3%;
    width: 14rem;
    z-index: 1;
    .p-chips-multiple-container {
      height: 38px;
    }
  }
}
