@charset "UTF-8";
.sideNav {
  width: 19vw;
  height: 100vh;
  position: sticky;
  left: 0;
  top: 0;
  background: #5566FC;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}
.sideNav::-webkit-scrollbar {
  width: 6px;
}
.sideNav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}
.sideNav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
.sideNav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
.sideNav .logo {
  height: 75px;
  box-sizing: border-box;
  width: 100%;
  background: #1f62ce;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sideNav .logo .img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sideNav .logo .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: none;
}
.sideNav .logo p {
  color: white;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sideNav .list-ul {
  list-style: none;
  margin: 0;
  padding: 20px 10px;
  flex: 1;
}
.sideNav .list-ul .list-li {
  margin-bottom: 4px;
}
.sideNav .list-ul .list-li a,
.sideNav .list-ul .list-li .a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.sideNav .list-ul .list-li a i,
.sideNav .list-ul .list-li .a i {
  width: 20px;
  font-size: 16px;
  margin-right: 12px;
  text-align: center;
  flex-shrink: 0;
}
.sideNav .list-ul .list-li a .fa-caret-down,
.sideNav .list-ul .list-li .a .fa-caret-down {
  margin-left: auto;
  margin-right: 0;
  font-size: 14px;
  transition: transform 0.3s ease;
}
.sideNav .list-ul .list-li a:hover,
.sideNav .list-ul .list-li .a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.sideNav .list-ul .list-li.active > a,
.sideNav .list-ul .list-li.active > .a {
  background: #191D24;
  color: #5566FC;
}
.sideNav .list-ul .list-li.active > a i,
.sideNav .list-ul .list-li.active > .a i {
  color: #5566FC;
}
.sideNav .list-ul .list-li .sublist-t {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.sideNav .list-ul .list-li .sublist-t.show {
  max-height: 500px;
  padding: 4px 0;
}
.sideNav .list-ul .list-li .sublist-t .lis a {
  padding: 10px 15px 10px 48px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.sideNav .list-ul .list-li .sublist-t .lis a i {
  font-size: 14px;
}
.sideNav .list-ul .list-li .sublist-t .lis a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}
.sideNav .list-ul .list-li.open > .a .fa-caret-down {
  transform: rotate(180deg);
}
.sideNav .button {
  box-sizing: border-box;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sideNav .button a {
  width: 100%;
  text-decoration: none;
  display: block;
}
.sideNav .button a .button-st {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.sideNav .button a .button-st i {
  width: 20px;
  font-size: 16px;
  margin-right: 12px;
  text-align: center;
}
.sideNav .button a .button-st:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #ff6b6b;
}
.sideNav .button a .button-st:hover i {
  color: #ff6b6b;
}
.sideNav .mobile-toggle {
  display: none;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .sideNav {
    position: fixed;
    min-width: 27vw;
    transform: translateX(-100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }
  .sideNav.mobile-open {
    transform: translateX(0);
  }
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 640px) {
  .sideNav {
    min-width: 30vw;
    position: fixed;
    display: none;
  }
  .sidebar-overlay.active {
    opacity: 1;
    visibility: hidden;
  }
}
.Dashboard {
  gap: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #191D24;
  padding: 0px 20px 0px 20px;
  width: 80vw;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.Dashboard .DashboardStats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
.Dashboard .DashboardStats .card {
  background-color: #232935;
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-radius: 10px;
  color: #EFF7FF;
  flex: 1;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Dashboard .DashboardStats .card .value {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.Dashboard .DashboardStats .card .value p {
  margin: 0;
}
.Dashboard .DashboardStats .card .value .pvalue {
  font-size: 20px;
  font-weight: 600;
  margin: 3px 0;
  letter-spacing: 1.1px;
}
.Dashboard .DashboardStats .card .value .label {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1.1px;
}
.Dashboard .DashboardStats .card i {
  font-size: 30px;
  color: #5566FC;
  margin-left: 5px;
}
.Dashboard .pending {
  min-height: 30vh !important;
}
.Dashboard .Dashboard-stats-2 {
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex: 1;
}
.Dashboard .Dashboard-stats-2 .table1 {
  box-sizing: border-box;
  background-color: #232935;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  flex: 1;
  padding: 15px;
}
.Dashboard .Dashboard-stats-2 .table1 .label {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}
.Dashboard .Dashboard-stats-2 .table1 .label p {
  margin: 0 auto auto 0;
  padding: 0;
  font-size: 16px;
  color: #78A0F7;
  font-weight: 500;
  letter-spacing: 1.05px;
}
.Dashboard .Dashboard-stats-2 .table1 .label a {
  text-decoration: none;
  padding: 6px 20px;
  border-radius: 6px;
  color: white;
  background: linear-gradient(135deg, #00c6ff, #5566FC);
}
.Dashboard .Dashboard-stats-2 .table1 .label a:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(0, 114, 255, 0.6);
}
.Dashboard .Dashboard-stats-2 .table1 .label a i {
  padding-right: 6px;
}
.Dashboard .Dashboard-stats-2 .table1 .table {
  box-sizing: border-box;
  padding-top: 10px;
  display: flex;
  flex-flow: column nowrap;
}
.Dashboard .Dashboard-stats-2 .table1 .table .row {
  display: flex;
  border-bottom: 1px solid #191D24;
}
.Dashboard .Dashboard-stats-2 .table1 .table .row .cell {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 15px 0;
  color: #DADFE9;
  font-size: 14px;
}
.Dashboard .Dashboard-stats-2 .table1 .table .heading {
  display: flex;
  font-weight: bold;
  color: #EFF7FF;
  padding-bottom: 10px;
}
.Dashboard .Dashboard-stats-2 .table1 .table .heading .hcell {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 14px;
  color: #78A0F7;
}
.Dashboard .Dashboard-stats-2 .table2 {
  box-sizing: border-box;
  background-color: #232935;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 10px;
  width: 35%;
  display: flex;
  flex-direction: column;
  padding: 15px 0px 0px 0px;
}
.Dashboard .Dashboard-stats-2 .table2 P {
  margin: 0;
  padding: 0px 15px;
  font-size: 16px;
  color: #78A0F7;
  font-weight: 500;
  letter-spacing: 1.05px;
}
.Dashboard .Dashboard-stats-2 .table2 .trainer-stats .row .info {
  flex: 1 !important;
}
.Dashboard .Dashboard-stats-2 .table2 .trainer-stats .row .info p {
  margin-right: 5px !important;
}
.Dashboard .Dashboard-stats-2 .table2 .trainer-stats .row .status {
  font-weight: 600;
  color: #DADFE9;
}
.Dashboard .Dashboard-stats-2 .table2 .trainer-stats .row .status i {
  margin-left: 8px;
  color: #5566FC;
}
.Dashboard .Dashboard-stats-2 .table2 .table {
  box-sizing: border-box;
  display: flex;
  padding: 10px 15px 15px 15px;
  align-items: center;
  flex-direction: column;
}
.Dashboard .Dashboard-stats-2 .table2 .table .line {
  background-color: #191D24;
  height: 1px;
  width: 100%;
  border: none;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 10px 0;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin-right: 15px;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .img img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .info {
  display: flex;
  flex-direction: column;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .info p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .info .name {
  font-size: 14px;
  margin-bottom: 5px;
  color: #EFF7FF;
  flex: unset !important;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .info .location {
  color: #DADFE9;
  font-size: 11px;
  font-weight: 400;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .status {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #DADFE9;
  align-items: center;
  margin: 0 0 0 auto;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .status img {
  height: 17px;
  width: 30px;
  margin-bottom: 5px;
}
.Dashboard .Dashboard-stats-2 .table2 .table .row .member-count {
  font-size: 14px !important;
}

@media only screen and (max-width: 640px) {
  .Dashboard {
    padding: 0px 20px 84px 20px;
  }
  .Dashboard .DashboardStats {
    flex-direction: column;
  }
  .Dashboard .Dashboard-stats-2 {
    flex-direction: column;
  }
  .Dashboard .Dashboard-stats-2 .table1 .table .heading .order {
    display: none;
  }
  .Dashboard .Dashboard-stats-2 .table1 .table .row .order {
    display: none;
  }
  .Dashboard .Dashboard-stats-2 .table2 {
    width: unset;
  }
}
@media only screen and (max-width: 641px) {
  .Dashboard {
    padding: 0px 20px 74px 20px;
  }
  .Dashboard .DashboardStats .card {
    flex-direction: column;
  }
}
.container-top {
  background-color: #191D24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  padding: 5px 0 5px 0;
  height: 60px;
  z-index: 2;
}
.container-top .burger-menu {
  border: none;
  background-color: none;
  cursor: pointer;
  background: none;
}
.container-top .burger-menu i {
  font-size: 25px;
  color: #5566FC;
}
.container-top .burger-menu:hover {
  cursor: pointer;
}
.container-top .top-right .notification-bell {
  position: relative;
  margin-right: 30px;
  color: #5566FC;
  font-size: 23px;
  transition: color 0.2s ease;
}
.container-top .top-right .notification-bell:hover {
  color: rgb(34.8843930636, 56.8959537572, 251.1156069364);
}
.container-top .top-right .notification-bell .notification-count {
  position: absolute;
  top: -5px;
  right: -7px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-top .top-right {
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.container-top .top-right .username {
  margin: 0;
  padding: 0;
  color: #EFF7FF;
  font-weight: 500;
  padding-right: 10px;
  letter-spacing: 1.1px;
}
.container-top .top-right .imgg {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}
.container-top .top-right .imgg .img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  background-color: #232935;
}
.container-top .top-right a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.container-top .top-right a .fa-cart-shopping {
  color: #EFF7FF;
  font-size: 23px;
}
.container-top .top-right a .cart-num {
  top: -10px;
  right: 10px;
  position: relative;
  color: #EFF7FF;
  font-weight: 700;
  background-color: #198754;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 6px;
  /* margin: 0; */
  height: 8px;
  width: 8px;
}

@media only screen and (max-width: 640px) {
  .container-top {
    display: none;
  }
}
@media only screen and (min-width: 641px) {
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #5566FC;
    font-size: 25px;
    cursor: pointer;
  }
  .sideNav {
    display: flex;
  }
}
@media only screen and (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
  .mobile-menu-btn .sideNav {
    display: none;
  }
  .container-top {
    margin-left: auto;
    width: 100%;
    justify-content: end;
  }
  .container-top .burger-menu {
    display: none;
  }
  .sideNav {
    display: flex;
  }
}
.member-dashboard {
  background-color: #232935;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.member-dashboard .selected {
  background-color: #5566FC !important;
  cursor: pointer;
}
.member-dashboard .label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 15px;
}
.member-dashboard .label p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #78A0F7;
  font-weight: 500;
  letter-spacing: 1.05px;
}
.member-dashboard .label .btns {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.member-dashboard .label .btns .trash {
  background-color: #dc3545;
  border: none;
}
.member-dashboard .label .btns .trash:hover {
  background-color: #b02a37;
}
.member-dashboard .label .btns .pen {
  background-color: #5566FC;
  border: none;
}
.member-dashboard .label .btns .pen:hover {
  background-color: #0552c7;
}
.member-dashboard .label .btns .plus {
  background-color: #198754;
  border: none;
}
.member-dashboard .label .btns .plus:hover {
  background-color: #146c43;
}
.member-dashboard .label .btns .act {
  background-color: #198754;
  border: none;
}
.member-dashboard .label .btns .act:hover {
  background-color: #146c43;
}
.member-dashboard .label .btns a {
  height: 30px;
  width: 30px;
  text-decoration: none;
  padding: 2px;
  border-radius: 6px;
  color: #5566FC;
}
.member-dashboard .label .btns a i {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  color: white;
}
.member-dashboard .mobile-searchInput {
  display: flex;
  justify-content: center;
}
.member-dashboard .mobile-searchInput .createMembers-form, .member-dashboard .mobile-searchInput .createMembership-form, .member-dashboard .mobile-searchInput .createTrainer-form, .member-dashboard .mobile-searchInput .createStaff-form, .member-dashboard .mobile-searchInput .createActiveMembership, .member-dashboard .mobile-searchInput .paymentSearchForm {
  width: 50%;
}
.member-dashboard .mobile-searchInput .inputspan {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  padding-bottom: 10px;
}
.member-dashboard .mobile-searchInput .inputspan input {
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
  outline: none;
  border: none;
  font-family: Roboto;
  border-right: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  color: #6a6a6a;
}
.member-dashboard .mobile-searchInput .inputspan button {
  height: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  background-color: #5566FC;
  color: #EFF7FF;
  padding: 5px;
  font-family: Roboto;
  font-size: 16px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
}

table {
  padding-top: 15px;
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
}
table .rc {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin; /* For Firefox: makes the scrollbar thinner */
  scrollbar-color: #888 #e0e0e0; /* For Firefox: sets scrollbar color */
}
table .rc::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}
table .rc::-webkit-scrollbar-track {
  background: #e0e0e0; /* Background of the scrollbar track */
}
table .rc::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners of the scrollbar thumb */
  border: 2px solid #e0e0e0; /* Creates padding around the scrollbar thumb */
}
table .rc .sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
table .row {
  padding-left: 5px;
  gap: 5px;
  font-size: 14px;
  display: flex;
  border-bottom: 1px solid #191D24;
}
table .row .hide-a {
  flex: 0.7;
}
table .row .hide-e {
  flex: 1.8;
}
table .row .lastchild {
  margin-right: 11px;
}
table .row td {
  font-size: 14px;
}
table .row td:hover {
  cursor: pointer;
}
table .row th {
  color: #78A0F7 !important;
}
table .row td, table .row th {
  word-break: break-word;
  display: flex;
  flex: 1;
  align-items: center;
  padding: 12px 0px;
  color: #EFF7FF;
}
table .row td img, table .row th img {
  height: 19px;
}
table .heading {
  display: flex;
  font-weight: bold;
  color: #EFF7FF;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}
table .heading .hide-a {
  flex: 0.7;
}
table .heading .hide-e {
  flex: 1.8;
}
table .heading th {
  word-break: break-word;
  display: flex;
  flex: 1;
  align-items: center;
}

@media only screen and (max-width: 640px) {
  .member-dashboard .label p {
    font-size: 12px;
  }
  .member-dashboard .label .btns a {
    height: 20px;
    width: 20px;
  }
  .member-dashboard .label .btns a i {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form input {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form button {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .hide-a {
    display: none;
  }
  table .row .hide-e {
    display: none;
  }
  table .row .phone {
    flex: 1.2;
  }
  table .row td {
    font-size: 12px;
  }
  table .row .hide-a, table .row .hide-e {
    display: none;
  }
}
@media only screen and (min-width: 641px) and (max-width: 641px) {
  .member-dashboard .label p {
    font-size: 12px;
  }
  .member-dashboard .label .btns a {
    height: 20px;
    width: 20px;
  }
  .member-dashboard .label .btns a i {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form input {
    font-size: 12px;
    width: 50% !important;
  }
  .member-dashboard .mobile-searchInput .createMembers-form button {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .hide-a {
    display: flex;
  }
  table .row .hide-e {
    display: flex;
  }
  table .rc .row td {
    font-size: 12px;
  }
  table .rc .row .hide-a {
    display: flex;
  }
  table .rc .row .hide-e {
    display: flex;
  }
}
@media only screen and (min-width: 641px) {
  .member-dashboard .label p {
    font-size: 16px;
  }
  .member-dashboard .label .btns a {
    height: 22px;
    width: 22px;
  }
  .member-dashboard .label .btns a i {
    font-size: 16px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form input {
    font-size: 16px;
  }
  .member-dashboard .mobile-searchInput .createMembers-form button {
    font-size: 16px;
  }
}
.span {
  display: flex;
  gap: 20px;
}
.span .subspan {
  width: 100%;
}
.span .subspan label {
  margin-bottom: 4px;
}

form {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
  flex-direction: column;
}
form .inputs {
  display: flex;
  flex: 1;
  flex-direction: row;
  gap: 20px;
}
form .inputs .right {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
}
form .inputs .right .input-icon {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
form .inputs .right .input-icon .input-error {
  color: #dc3545 !important;
  box-shadow: 0 0 5px #dc3545 !important;
  padding-right: 10px !important; /* Adjust padding to make room for the error message */
}
form .inputs .right .input-icon .input-error::-moz-placeholder {
  color: #dc3545;
  opacity: 1;
}
form .inputs .right .input-icon .input-error::placeholder {
  color: #dc3545;
  opacity: 1;
}
form .inputs .right .input-icon .error-message {
  position: absolute;
  width: 150px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #dc3545;
  font-size: 10px;
  visibility: unset;
  text-align: end;
}
form .inputs .right .input-icon i {
  position: absolute;
  margin-left: 15px;
  color: #5566FC;
}
form .inputs .right .input-icon input, form .inputs .right .input-icon .textarea, form .inputs .right .input-icon select, form .inputs .right .input-icon #id_Country, form .inputs .right .input-icon .memberstyle, form .inputs .right .input-icon .other, form .inputs .right .input-icon input[type=file], form .inputs .right .input-icon .gymSettings {
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: inherit;
  padding: 0 10px;
  padding-left: 42px;
  align-items: center;
}
form .inputs .right .input-icon input:hover, form .inputs .right .input-icon .textarea:hover, form .inputs .right .input-icon select:hover, form .inputs .right .input-icon #id_Country:hover, form .inputs .right .input-icon .memberstyle:hover, form .inputs .right .input-icon .other:hover, form .inputs .right .input-icon input[type=file]:hover, form .inputs .right .input-icon .gymSettings:hover {
  box-shadow: rgba(31, 98, 206, 0.5) 0px 0px 0px 2px;
}
form .inputs .right .input-icon .textarea {
  box-sizing: border-box;
  padding: 5px;
}
form .inputs .right .input-icon .memberstyle {
  background-color: #191D24;
  color: #EFF7FF;
  display: flex;
}
form .inputs .right .input-icon .memberstyle:hover {
  box-shadow: unset;
}
form .inputs .right .input-icon .gym-label-background {
  background-color: #191D24;
  display: flex;
  align-items: center;
}
form .inputs .right .input-icon .gym-label-background:hover {
  box-shadow: unset;
}
form .inputs .left {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
}
form .inputs .left .input-icon {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
form .inputs .left .input-icon .input-error {
  box-shadow: 0 0 5px #dc3545;
  padding-right: 5px; /* Adjust padding to make room for the error message */
}
form .inputs .left .input-icon .input-error::-moz-placeholder {
  color: #dc3545;
  opacity: 1;
}
form .inputs .left .input-icon .input-error::placeholder {
  color: #dc3545;
  opacity: 1;
}
form .inputs .left .input-icon .error-message {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #dc3545;
  font-size: 12px;
  visibility: unset;
  right: 5%;
}
form .inputs .left .input-icon i {
  position: absolute;
  margin-left: 15px;
  color: #5566FC;
}
form .inputs .left .input-icon input, form .inputs .left .input-icon select, form .inputs .left .input-icon textarea {
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: inherit;
  padding: 0 10px;
  padding-left: 42px;
}
form .inputs .left .input-icon input:hover, form .inputs .left .input-icon select:hover, form .inputs .left .input-icon textarea:hover {
  box-shadow: rgba(31, 98, 206, 0.5) 0px 0px 0px 2px;
}
form .inputs .left .input-icon .memberstyle {
  color: #EFF7FF !important;
}
form .inputs .left .input-icon label {
  background-color: #191D24;
  display: flex;
  align-items: center;
}
form .btn, form .save, form .cancel {
  font-family: Roboto;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  padding: 15px 0px;
  border-radius: 6px;
  color: white;
  border: 0px solid;
  background-color: #5566FC;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: inherit;
}
form .btn:hover, form .save:hover, form .cancel:hover {
  cursor: pointer;
  background-color: #198754;
}
form .btn-cancel-save {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
form .cancel {
  background-color: #dc3545;
  text-decoration: none !important;
}
form .cancel:hover {
  background-color: #b02a37;
}
form .save {
  background-color: #198754;
}
form .save:hover {
  background-color: #146c43;
}

.aref {
  text-decoration: none;
  height: 100%;
}

@media only screen and (max-width: 640px) {
  .member-dashboard form .inputs {
    gap: unset;
    flex-direction: column;
  }
  .member-dashboard form .inputs .right .span {
    flex-direction: column;
    gap: unset;
  }
}
.createMembership .inputs .right .input-error {
  color: #dc3545;
  box-shadow: 0 0 5px #dc3545;
  padding-right: 10px; /* Adjust padding to make room for the error message */
}
.createMembership .inputs .right .input-error::-moz-placeholder {
  color: #dc3545;
  opacity: 1;
}
.createMembership .inputs .right .input-error::placeholder {
  color: #dc3545;
  opacity: 1;
}
.createMembership .inputs .right textarea {
  font-family: Roboto;
  height: 100%;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  padding: 8px 8px 8px 8px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: inherit;
  resize: none;
}
.createMembership .inputs .right textarea:hover {
  box-shadow: rgba(31, 98, 206, 0.5) 0px 0px 0px 2px;
}
.createMembership .inputs .right .textare {
  box-sizing: border-box;
  margin-bottom: 20px;
}

.exp {
  min-width: 50px;
  max-width: 200px;
}

.des {
  flex: 2.3 !important;
}

.day {
  justify-content: center;
}

.price {
  flex: 1.5 !important;
}

.name {
  flex: 1.2 !important;
}

.pic img {
  height: 40px !important;
  width: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (max-width: 640px) {
  .trainer .label p {
    font-size: 12px;
  }
  .trainer .label .btns a {
    height: 20px;
    width: 20px;
  }
  .trainer .label .btns a i {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createMembership-form input {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createMembership-form button {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createMembership-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row td {
    font-size: 12px;
  }
  table .row .des {
    text-align: justify;
  }
  table .row .ent {
    display: none;
  }
}
@media only screen and (min-width: 641px) and (max-width: 641px) {
  .trainer .label p {
    font-size: 12px;
  }
  .trainer .label .btns a {
    height: 20px;
    width: 20px;
  }
  .trainer .label .btns a i {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createMembership-form input {
    font-size: 12px;
    width: 50% !important;
  }
  .trainer .mobile-searchInput .createMembership-form button {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createMembership-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row td {
    font-size: 12px;
  }
}
@media only screen and (min-width: 641px) {
  .trainer .label p {
    font-size: 16px;
  }
  .trainer .label .btns a {
    height: 20px;
    width: 20px;
  }
  .trainer .label .btns a i {
    font-size: 16px;
  }
  .trainer .mobile-searchInput .createMembership-form input {
    font-size: 16px;
  }
  .trainer .mobile-searchInput .createMembership-form button {
    font-size: 16px;
  }
}
.delete {
  margin: auto !important;
}
.delete .lbl {
  flex-direction: column !important;
  font-family: Roboto;
  padding-bottom: 25px !important;
}
.delete .lbl p {
  padding: 0;
  margin: 0;
}
.delete .lbl .title {
  font-size: 16px;
  margin: 20px auto 40px auto !important;
  font-weight: 800;
  color: #EFF7FF;
}
.delete .lbl .title .fa-triangle-exclamation {
  color: #ffc107;
  font-size: 20px;
}
.delete .lbl .quest {
  font-size: 14px;
  text-align: center;
}
.delete .form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.delete .form .btn {
  font-family: Roboto;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  padding: 10px 0px;
  border-radius: 6px;
  color: white;
  border: none;
}
.delete .form a {
  text-decoration: none;
  background-color: #dc3545;
}
.delete .form a:hover {
  background-color: #b02a37;
}
.delete .form button {
  background-color: #198754;
}
.delete .form button:hover {
  background-color: #146c43;
}

.a-btn {
  display: flex;
  flex-direction: row;
  width: unset !important;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: unset !important;
  border: 1px solid !important;
  padding: 6px !important;
  border-radius: 6px !important;
  height: 25px !important;
}
.a-btn i {
  color: unset !important;
  padding-right: 6px !important;
}

#bt {
  font-size: 16px;
  font-family: Roboto;
  color: white !important;
  height: inherit !important;
  background-color: #198754 !important;
  border-color: #198754 !important;
  cursor: pointer;
}
#bt:hover {
  background-color: #146c43 !important;
  border-color: #146c43 !important;
}

.vt:hover {
  background-color: #5566FC !important;
  color: #EFF7FF !important;
  border-color: #5566FC !important;
}

.off {
  pointer-events: none;
  background-color: #e7e7e7 !important;
  color: #6a6a6a !important;
}
.off:hover {
  background-color: #e7e7e7;
}

.offf {
  color: #EFF7FF !important;
}

.search {
  border: 1px solid #5566FC;
  background-color: #191D24;
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  height: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 0px;
  width: 60PX;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}
.search i {
  position: unset !important;
  margin: unset !important;
  font-size: 20px;
}
.search:hover {
  background-color: #5566FC;
}
.search:hover i {
  color: #EFF7FF !important;
}

.modal {
  display: none;
  position: absolute !important;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal .modal-content {
  background-color: #232935;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}
.modal .modal-content .title {
  display: flex;
  justify-content: space-between;
}
.modal .modal-content .title p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #78A0F7;
  font-weight: 500;
  letter-spacing: 1.05px;
}
.modal .modal-content .searchInput {
  display: flex;
  justify-content: center;
  text-align: center;
}
.modal .modal-content .searchInput .form-modal {
  padding: 0px !important;
}
.modal .modal-content .searchInput form {
  width: 60%;
}
.modal .modal-content .searchInput form .inputspan {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
}
.modal .modal-content .searchInput form .inputspan input {
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
  outline: none;
  border: none;
  font-family: Roboto;
  border-right: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  color: #6a6a6a;
}
.modal .modal-content .searchInput form .inputspan button {
  background-color: #5566FC;
  color: #EFF7FF;
  height: 100%;
  box-sizing: border-box;
  border: none;
  padding: 5px;
  font-family: Roboto;
  font-size: 16px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
}
.modal .modal-content table {
  height: 80%;
}
.modal .modal-content table .rc {
  max-height: unset !important;
  height: 40vh;
}
.modal .modal-content table tbody .row td:hover {
  cursor: unset !important;
}
.modal .modal-content table tbody .row td button {
  border: none;
  padding: 6px 10px;
  color: white;
  font-size: 14px;
  border-radius: 6px;
  background-color: #5566FC;
  font-family: Roboto;
}
.modal .modal-content table tbody .row td button:hover {
  cursor: pointer;
  background-color: rgba(85, 102, 252, 0.5);
}
.modal .modal-content .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modal .modal-content .close:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modal .modal-content .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.container {
  background-color: #191D24;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100vh;
}
.container .holder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50vw;
  gap: 10px;
}
.container .holder a {
  text-decoration: none;
}
.container .holder a:hover {
  cursor: pointer;
}
.container .holder a img {
  width: 150px;
}
.container .holder p {
  padding: 0;
  margin: 0;
  font-family: Roboto;
  font-size: 16px;
  color: #6a6a6a;
}
.container .holder form {
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .holder form input {
  text-align: center;
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  padding: 5px 15px 5px 42px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: inherit;
  padding: 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.container .holder form button {
  width: 100%;
  font-family: Roboto;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  padding: 15px 0px;
  border-radius: 6px;
  color: white;
  border: 0px solid;
  background-color: #5566FC;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .holder form button:hover {
  cursor: pointer;
  background-color: #198754;
}

@media only screen and (max-width: 640px) {
  .container .holder {
    width: 90vw !important;
  }
}
.login-container, .reset-container {
  width: 100% !important;
  height: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
  font-size: 16px;
  color: #6a6a6a;
  margin-top: 25px;
  margin-bottom: 25px;
}
.login-container .left, .reset-container .left {
  margin-right: 30px;
}
.login-container .left svg, .reset-container .left svg {
  height: 65vh;
}
.login-container .right, .login-container .reset-subContainer, .reset-container .right, .reset-container .reset-subContainer {
  box-sizing: content-box;
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 15px 45px 15px 45px;
  border-radius: 5px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.login-container .right .circle, .login-container .reset-subContainer .circle, .reset-container .right .circle, .reset-container .reset-subContainer .circle {
  height: 60px;
  width: 60px;
  background-color: #5566FC;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.login-container .right .circle i, .login-container .reset-subContainer .circle i, .reset-container .right .circle i, .reset-container .reset-subContainer .circle i {
  color: white !important;
}
.login-container .right h2, .login-container .reset-subContainer h2, .reset-container .right h2, .reset-container .reset-subContainer h2 {
  margin: 20px;
}
.login-container .right .p-message, .login-container .reset-subContainer .p-message, .reset-container .right .p-message, .reset-container .reset-subContainer .p-message {
  margin: 5px 0 20px 0;
  width: auto;
  text-align: center;
}
.login-container .right .p-message span, .login-container .reset-subContainer .p-message span, .reset-container .right .p-message span, .reset-container .reset-subContainer .p-message span {
  color: #5566FC;
  font-weight: 600;
}
.login-container .right .e-message, .login-container .reset-subContainer .e-message, .reset-container .right .e-message, .reset-container .reset-subContainer .e-message {
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #198754;
  margin: 0 0 8px 0;
}
.login-container .right .form-reset, .login-container .reset-subContainer .form-reset, .reset-container .right .form-reset, .reset-container .reset-subContainer .form-reset {
  margin-bottom: 25px !important;
}
.login-container .right .form-login, .login-container .reset-subContainer .form-login, .reset-container .right .form-login, .reset-container .reset-subContainer .form-login {
  margin: 0px;
}
.login-container .right .form-login .email, .login-container .right .form-login .password, .login-container .reset-subContainer .form-login .email, .login-container .reset-subContainer .form-login .password, .reset-container .right .form-login .email, .reset-container .right .form-login .password, .reset-container .reset-subContainer .form-login .email, .reset-container .reset-subContainer .form-login .password {
  height: 4.5vh;
  width: 22vw;
  border-radius: 10px;
  padding: 10px;
  outline: none;
  color: #6a6a6a;
  font-size: 16px;
  font-family: Roboto;
  border: none;
  margin-bottom: 10px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
.login-container .right .form-login .email:focus, .login-container .right .form-login .password:focus, .login-container .reset-subContainer .form-login .email:focus, .login-container .reset-subContainer .form-login .password:focus, .reset-container .right .form-login .email:focus, .reset-container .right .form-login .password:focus, .reset-container .reset-subContainer .form-login .email:focus, .reset-container .reset-subContainer .form-login .password:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(0, 123, 255, 0.25);
}
.login-container .right .form-login .password, .login-container .reset-subContainer .form-login .password, .reset-container .right .form-login .password, .reset-container .reset-subContainer .form-login .password {
  margin-bottom: 7px !important;
}
.login-container .right .form-login .recover-password, .login-container .reset-subContainer .form-login .recover-password, .reset-container .right .form-login .recover-password, .reset-container .reset-subContainer .form-login .recover-password {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  width: 22vw;
}
.login-container .right .form-login .recover-password a, .login-container .reset-subContainer .form-login .recover-password a, .reset-container .right .form-login .recover-password a, .reset-container .reset-subContainer .form-login .recover-password a {
  text-decoration: none;
  color: #6a6a6a;
  font-size: 12px;
  font-family: Roboto;
}
.login-container .right .form-login .recover-password a:focus, .login-container .reset-subContainer .form-login .recover-password a:focus, .reset-container .right .form-login .recover-password a:focus, .reset-container .reset-subContainer .form-login .recover-password a:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(0, 123, 255, 0.25);
}
.login-container .right .form-login .login, .login-container .right .form-login .reset, .login-container .reset-subContainer .form-login .login, .login-container .reset-subContainer .form-login .reset, .reset-container .right .form-login .login, .reset-container .right .form-login .reset, .reset-container .reset-subContainer .form-login .login, .reset-container .reset-subContainer .form-login .reset {
  box-sizing: border-box;
  margin: 0 auto;
  text-decoration: none;
  font-family: Roboto;
  font-size: 16px;
  color: white;
  background-color: #5566FC;
  padding: 10px;
  width: 100%;
  border-radius: 25px;
  text-align: center;
  font-weight: 600;
  border: 0;
}
.login-container .right .form-login .login:focus, .login-container .right .form-login .reset:focus, .login-container .reset-subContainer .form-login .login:focus, .login-container .reset-subContainer .form-login .reset:focus, .reset-container .right .form-login .login:focus, .reset-container .right .form-login .reset:focus, .reset-container .reset-subContainer .form-login .login:focus, .reset-container .reset-subContainer .form-login .reset:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(0, 123, 255, 0.25);
}
.login-container .right .form-login .back, .login-container .reset-subContainer .form-login .back, .reset-container .right .form-login .back, .reset-container .reset-subContainer .form-login .back {
  background-color: #dc3545;
}
.login-container .right .form-login .back:hover, .login-container .reset-subContainer .form-login .back:hover, .reset-container .right .form-login .back:hover, .reset-container .reset-subContainer .form-login .back:hover {
  cursor: pointer;
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}
.login-container .right .form-login .continue:hover, .login-container .reset-subContainer .form-login .continue:hover, .reset-container .right .form-login .continue:hover, .reset-container .reset-subContainer .form-login .continue:hover {
  cursor: pointer;
  background-color: rgb(34.8843930636, 56.8959537572, 251.1156069364);
}
.login-container .right .register, .login-container .reset-subContainer .register, .reset-container .right .register, .reset-container .reset-subContainer .register {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important;
  width: 22vw;
  margin-top: 30px;
}
.login-container .right .register a, .login-container .reset-subContainer .register a, .reset-container .right .register a, .reset-container .reset-subContainer .register a {
  text-decoration: none;
  font-family: Roboto;
  color: #5566FC;
  font-size: 12px !important;
}
.login-container .right .register a:focus, .login-container .reset-subContainer .register a:focus, .reset-container .right .register a:focus, .reset-container .reset-subContainer .register a:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(0, 123, 255, 0.25);
}
.login-container .right .register p, .login-container .reset-subContainer .register p, .reset-container .right .register p, .reset-container .reset-subContainer .register p {
  margin: 0;
  width: auto;
  margin-right: 8px;
}
.login-container .right .sent-body, .login-container .reset-subContainer .sent-body, .reset-container .right .sent-body, .reset-container .reset-subContainer .sent-body {
  text-align: center;
}
.login-container .right .login-reset-btn, .login-container .reset-subContainer .login-reset-btn, .reset-container .right .login-reset-btn, .reset-container .reset-subContainer .login-reset-btn {
  text-decoration: none;
  font-family: Roboto;
  font-size: 16px;
  color: white;
  background-color: #5566FC;
  padding: 10px;
  width: 22vw;
  border-radius: 25px;
  text-align: center;
  font-weight: 600;
  margin-top: 20px;
  border: 0;
  margin-bottom: 20px;
}

@media only screen and (max-width: 640px) {
  body {
    height: 100vh;
  }
  body .login-container {
    justify-content: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto 0px !important;
    box-sizing: border-box;
    padding: 20px;
  }
  body .login-container .left {
    display: NONE;
    margin: 0;
  }
  body .login-container .left svg {
    height: unset;
  }
  body .login-container .right {
    box-sizing: border-box;
    width: inherit;
  }
  body .login-container .right form {
    width: 100%;
  }
  body .login-container .right form input, body .login-container .right form div {
    width: unset !important;
  }
  body .login-container .right form .login {
    width: 100% !important;
  }
  body .login-container .right .register {
    width: unset;
  }
}
@media only screen and (max-width: 641px) {
  .login-container {
    flex-direction: column;
    margin: 0px !important;
    box-sizing: border-box;
    padding: 20px;
    justify-content: center;
  }
  .login-container .left {
    display: none;
    width: inherit;
    margin: 0;
  }
  .login-container .left svg {
    height: 20vh;
  }
  .login-container .right {
    width: inherit;
    box-sizing: border-box;
  }
  .login-container .right form {
    width: 100%;
  }
  .login-container .right form input, .login-container .right form div {
    width: unset !important;
  }
  .login-container .right form .login {
    width: 100% !important;
  }
  .login-container .right .register {
    width: unset;
  }
}
@media only screen and (min-width: 1024px) {
  .login-container .left {
    display: flex;
  }
}
.register-container {
  width: 100% !important;
  height: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
  font-size: 16px;
  color: #6a6a6a;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}
.register-container .left {
  margin-right: 30px;
}
.register-container .left svg {
  height: 65vh;
}
.register-container .right {
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 25px 45px 7px 45px;
  border-radius: 5px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.register-container .right .circle {
  height: 60px;
  width: 60px;
  background-color: #191D24;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.register-container .right .circle i {
  color: #5566FC;
}
.register-container .right h2 {
  text-align: center;
  margin: 20px 0 0 0;
}
.register-container .right h2 .brandname {
  color: #5566FC;
}
.register-container .right .e-message {
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #198754;
  margin: 0 0 8px 0;
}
.register-container .right #id_plan {
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px !important;
}
.register-container .right #id_email, .register-container .right #id_password1, .register-container .right #id_password2, .register-container .right #id_username, .register-container .right #id_new_password1, .register-container .right #id_new_password2, .register-container .right #id_name, .register-container .right #id_subdomain, .register-container .right #id_phone, .register-container .right #id_plan {
  height: 41px;
  width: 22vw;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 0 10px;
  outline: none;
  color: #6a6a6a;
  font-size: 16px;
  font-family: Roboto;
  border: none;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
.register-container .right .password-1 {
  margin-bottom: 0px !important;
}
.register-container .right .register {
  text-decoration: none;
  font-family: Roboto;
  font-size: 16px;
  color: white;
  background-color: #5566FC;
  padding: 10px;
  border-radius: 25px;
  text-align: center;
  font-weight: 600;
  border: 0;
}
.register-container .right .register:hover {
  cursor: pointer;
}
.register-container .right .loginlink {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important;
  width: 100%;
}
.register-container .right .loginlink a {
  text-decoration: none;
  font-family: Roboto;
  color: #5566FC;
  font-size: 12px !important;
}
.register-container .right .loginlink p {
  margin: 0;
  width: auto;
  margin-right: 8px;
}
.register-container .right .error {
  font-size: 12px;
  text-align: center;
  color: #f54545;
}
.register-container .right .error p {
  padding: 0;
  margin: 0;
}
.register-container .right .login {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important;
  width: 22vw;
  margin-top: 10px;
}
.register-container .right .login a {
  text-decoration: none;
  font-family: Roboto;
  color: #5566FC;
  font-size: 12px !important;
}
.register-container .right .login p {
  margin: 0;
  width: auto;
  margin-right: 8px;
}

@media only screen and (max-width: 640px) {
  body .register-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto 0px !important;
    box-sizing: border-box;
    padding: 20px;
  }
  body .register-container .left {
    display: NONE;
    margin: 0;
  }
  body .register-container .left svg {
    height: unset;
  }
  body .register-container .right {
    box-sizing: border-box;
    width: inherit !important;
  }
  body .register-container .right .e-message {
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #198754;
    margin: 0 0 8px 0;
  }
  body .register-container .right form {
    width: 100%;
  }
  body .register-container .right form input, body .register-container .right form div {
    width: unset !important;
  }
  body .register-container .right form .login {
    width: 100% !important;
  }
  body .register-container .right .register {
    width: unset;
  }
}
@media only screen and (max-width: 641px) {
  .register-container {
    flex-direction: column;
    margin: 0px !important;
    box-sizing: border-box;
    padding: 20px;
    justify-content: center;
  }
  .register-container .left {
    display: none;
    width: inherit;
    margin: 0;
  }
  .register-container .left svg {
    height: 20vh;
  }
  .register-container .right {
    width: inherit;
    box-sizing: border-box;
  }
  .register-container .right form {
    width: 100%;
  }
  .register-container .right form input, .register-container .right form div {
    width: unset !important;
  }
  .register-container .right form .login {
    width: 100% !important;
  }
  .register-container .right .register {
    width: unset;
  }
}
@media only screen and (min-width: 1024px) {
  .register-container .left {
    display: flex;
  }
}
.choose-Trainer {
  box-shadow: unset !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.choose-Trainer .my-trainer-label a {
  text-decoration: none;
  border: 1px solid #5566FC;
  padding: 8px;
  border-radius: 6px;
  color: #1f62ce;
}
.choose-Trainer .my-trainer-label a:hover {
  background-color: #5566FC;
  color: #EFF7FF;
}
.choose-Trainer .card-holder {
  display: flex;
  padding-top: 20px;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.choose-Trainer .card-holder .msg {
  font-size: 16px;
  color: #EFF7FF;
  text-align: center;
}
.choose-Trainer .card-holder .card-trainer-home-page {
  width: 200px !important;
}
.choose-Trainer .card-holder .card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  width: 275px;
  height: auto;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin: 0;
  padding: 20px 0px;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.choose-Trainer .card-holder .card .profile-pic {
  height: 90px;
  width: 90px;
  margin: 0px 0 10px 0;
  background-color: #191D24;
  box-shadow: rgba(50, 50, 93, 0.5) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
  border-radius: 50%;
  padding: 5px;
}
.choose-Trainer .card-holder .card .profile-pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  background-color: #232935;
}
.choose-Trainer .card-holder .card .name {
  color: #EFF7FF;
  margin: 0px 0 20px 0;
  font-weight: 600;
}
.choose-Trainer .card-holder .card .bio {
  text-align: justify;
  margin-bottom: 20px;
  font-size: 14px;
  color: #DADFE9;
  box-sizing: border-box;
  inline-size: inherit;
  padding: 10px;
  overflow-wrap: break-word;
}
.choose-Trainer .card-holder .card form {
  margin: 0;
  padding: unset;
  gap: unset;
  display: unset;
  flex-direction: unset;
  width: 100%;
}
.choose-Trainer .card-holder .card form button {
  letter-spacing: 1.05px;
}
.choose-Trainer .card-holder .card form .select {
  background-color: #5566FC;
  border: none;
  padding: 7px;
  font-family: Roboto;
  font-size: 16px;
  border-radius: 6px;
  color: white;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding: 10px 0;
}
.choose-Trainer .card-holder .card form .select:hover {
  cursor: pointer;
  background-color: rgba(85, 102, 252, 0.5);
  color: #EFF7FF;
}

.messages {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  border-radius: 10px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.onb-msg {
  width: 22vw;
  box-shadow: none;
  font-size: 12px;
  text-align: center;
}

.alert {
  padding: 15px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
.alert i {
  font-size: 18px;
}
.alert.alert-success {
  background: white;
  color: rgb(45.1155378486, 103.8844621514, 47.4900398406);
}
.alert.alert-error {
  background: rgba(244, 67, 54, 0.1);
  color: rgb(185.8301886792, 22.1886792453, 10.1698113208);
}
.alert.alert-warning {
  background: rgba(255, 152, 0, 0.1);
  color: rgb(127.5, 76, 0);
}
.alert.alert-info {
  background: rgba(33, 150, 243, 0.1);
  color: rgb(8.9230769231, 95.9230769231, 165.0769230769);
}

.member-home-page-dashboard {
  width: unset;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  background-color: #232935;
}
.member-home-page-dashboard .note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto 0;
}
.member-home-page-dashboard .note .welcome {
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  font-size: 18px;
  color: #EFF7FF;
  text-align: center;
  letter-spacing: 1.1px;
}
.member-home-page-dashboard .note .msg {
  padding-bottom: 20px;
}
.member-home-page-dashboard .note a {
  text-decoration: none;
  border: 1px solid;
  padding: 6px 25px;
  border-radius: 6px;
  color: #5566FC;
}
.member-home-page-dashboard .note a:hover {
  background-color: #5566FC;
  color: #EFF7FF;
  border-color: #5566FC;
}
.member-home-page-dashboard .holder {
  flex-wrap: wrap;
  display: flex;
  gap: 30px;
  justify-content: center;
  padding: 15px 0;
  flex-direction: row;
  margin: 0 auto;
}
.member-home-page-dashboard .holder .member-dash-1 {
  border-radius: 10px;
  font-family: Roboto;
  margin: 0;
  box-sizing: border-box;
}
.member-home-page-dashboard .holder .member-dash-1 .card {
  width: 30vw;
  min-width: 250px;
  height: 290px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  position: relative;
}
.member-home-page-dashboard .holder .member-dash-1 .card .gym-name {
  color: white;
  font-size: 1em;
  margin-top: 10px;
  padding: 20px;
  letter-spacing: 1.2px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .membership-number {
  font-size: 20px !important;
  color: white;
  font-size: 1.5em;
  letter-spacing: 2px;
  padding: 0 20px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-holder {
  box-sizing: border-box;
  color: white;
  font-size: 1em;
  font-weight: bold;
  background: linear-gradient(to right, #FF6B6B, #7a329c);
  width: 100%;
  padding: 12px 20px;
  letter-spacing: 1.2px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry {
  display: flex;
  flex-direction: row;
  gap: 20px;
  color: white;
  font-size: 0.8em;
  text-align: left;
  padding: 20px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry .val p {
  margin: 0;
  padding: 0;
  padding-top: 3px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry .cls {
  text-align: center;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry .cls p {
  margin: 0;
  padding: 0;
  padding-top: 3px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry .cls a:hover {
  cursor: pointer;
}
.member-home-page-dashboard .holder .member-dash-1 .card .member-expiry .cls img {
  width: 24px;
  padding-top: 3px;
}
.member-home-page-dashboard .holder .member-dash-1 .card .card-logo-gym {
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  background-color: #232935;
}

@media only screen and (min-width: 641px) {
  .navbar {
    display: none !important;
  }
}
.choose-Trainer .card-holder .card a {
  text-decoration: none;
  background-color: #dc3545;
  border: none;
  padding: 7px;
  border-radius: 6px;
  color: #EFF7FF;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding: 10px 0;
  font-size: 16px;
}
.choose-Trainer .card-holder .card a i {
  margin-right: 5px;
}
.choose-Trainer .card-holder .card a:hover {
  color: #EFF7FF;
  background-color: rgba(220, 53, 69, 0.8);
}

.buy-class .card-holder {
  padding-top: 15px;
}
.buy-class .card-holder .card {
  padding: unset;
  padding-bottom: 20px !important;
  box-sizing: border-box;
}
.buy-class .card-holder .card .profile-pic {
  box-sizing: border-box;
  width: 100%;
  height: 23vh;
  border-radius: unset;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding: unset;
  box-shadow: 0 5px 10px -5px #5566FC;
}
.buy-class .card-holder .card .profile-pic img {
  width: 100%;
  -o-object-fit: inherit;
     object-fit: inherit;
  height: 100%;
  border-radius: unset;
}
.buy-class .card-holder .card .name {
  padding: 0px 20px;
  color: #EFF7FF;
  font-weight: 600;
  margin: 10px 0 10px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.buy-class .card-holder .card .bio {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 14px;
  color: #DADFE9;
}
.buy-class .card-holder .card .price {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
  color: #EFF7FF;
}
.buy-class .card-holder .card .btn-holder {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  width: 90%;
}
.buy-class .card-holder .card .btn-holder .cart_link {
  background-color: #198754;
}
.buy-class .card-holder .card .btn-holder .cart_link:hover {
  background-color: rgb(17.03125, 91.96875, 57.225);
}
.buy-class .card-holder .card .stats {
  display: flex;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  gap: unset;
}
.buy-class .card-holder .card .stats .exp {
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: 500 !important;
}
.buy-class .card-holder .card .stats .red {
  color: #DADFE9;
  width: 70%;
  text-align: end;
}
.buy-class .card-holder .card .stats .green {
  color: #DADFE9;
  text-align: start;
  width: 30%;
}
.buy-class .card-holder .card form {
  box-sizing: border-box;
}
.buy-class .card-holder .card form .buy {
  background-color: #198754;
}
.buy-class .card-holder .card form .buy:hover {
  background-color: rgba(25, 135, 84, 0.5);
}

.dropdown-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5566FC;
  z-index: 20;
  display: flex;
  flex-direction: column;
  display: none;
}
.dropdown-menu.active-d {
  display: flex;
}
.dropdown-menu__header {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px 0px 20px;
}
.dropdown-menu .close-btn {
  font-size: 1.5rem;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
}
.dropdown-menu .user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dropdown-menu .user-profile .profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #777;
  margin-bottom: 5px;
}
.dropdown-menu .user-profile .profile-pic .img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  background-color: #232935;
}
.dropdown-menu .user-profile .user-name-m {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0.25rem;
  margin: 0px !important;
  border: none !important;
  padding: 0px !important;
  color: #ebeff5;
}
.dropdown-menu .user-profile .user-handle-m {
  color: #02041c;
  font-size: 14px;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.dropdown-menu .nav-links {
  flex-grow: 1;
  margin-right: 20px;
}
.dropdown-menu .nav-links .mobile-ul {
  gap: 5px;
  list-style: none;
  font-weight: 300;
  margin: 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 50px;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li {
  border-radius: 25px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  height: auto;
  display: flex;
  align-items: center;
  flex: 1;
  letter-spacing: 1.1px;
  flex-direction: column;
  color: #5566FC;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .mobile-a, .dropdown-menu .nav-links .mobile-ul .mobile-li .a {
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  padding: 8px 0;
  height: inherit;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  width: 100%;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .mobile-a:hover, .dropdown-menu .nav-links .mobile-ul .mobile-li .a:hover {
  cursor: pointer;
  color: #5566FC;
  border-radius: 25px;
  background-color: #ebeff5;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .mobile-a:hover i, .dropdown-menu .nav-links .mobile-ul .mobile-li .a:hover i {
  color: #5566FC;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .mobile-a i, .dropdown-menu .nav-links .mobile-ul .mobile-li .a i {
  width: 40px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: white;
  height: inherit;
  display: flex;
  align-items: center;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .sublist-t {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 100%;
  letter-spacing: 1.1px;
  align-items: flex-start;
  box-sizing: border-box;
  padding-left: 30px;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .sublist-t .lis {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .sublist-t .lis a {
  padding: 8px 0 !important;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .sublist-t .lis a:hover i {
  color: #5566FC;
}
.dropdown-menu .nav-links .mobile-ul .mobile-li .sublist-t .lis i {
  width: 40px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: white;
  height: inherit;
  display: flex;
  align-items: center;
}
.dropdown-menu .logout-section {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  padding-bottom: 5px;
  padding-left: 10px;
  width: inherit;
  padding-right: 20px;
}
.dropdown-menu .logout-section a {
  text-decoration: none;
  color: white;
  width: 100%;
  cursor: pointer;
}
.dropdown-menu .logout-section a:hover {
  color: #5566FC;
}
.dropdown-menu .logout-section .logout-btn {
  display: flex;
  padding: 8px 0 8px 0;
  flex: 1;
  border-radius: 25px;
  align-items: center;
  cursor: pointer;
}
.dropdown-menu .logout-section .logout-btn:hover {
  background-color: #ebeff5;
}
.dropdown-menu .logout-section .logout-btn:hover i {
  color: #5566FC;
}
.dropdown-menu .logout-section .logout-btn i {
  width: 40px;
  display: flex;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.active-m {
  border-radius: 12px;
  background-color: #191D24;
}
.active-m .link {
  color: #5566FC !important;
}
.active-m .link i {
  color: #5566FC !important;
}

@media only screen and (min-width: 640px) {
  .navbar {
    display: none;
  }
}
form .inputs .left .input-icon .trainer-text-des {
  box-sizing: border-box;
  padding: 5px !important;
  min-width: unset;
}
form .inputs .right .input-icon .sdate {
  right: 28px !important;
}
form .inputs .right .input-icon .trainerDescrip {
  padding: 5px !important;
  box-sizing: border-box;
}

.register-container {
  margin-top: unset;
  margin-bottom: unset;
}
.register-container .right-reset {
  width: 300px !important;
  margin-left: unset !important;
  margin: auto auto !important;
}
.register-container .right-reset p {
  text-align: center !important;
}
.register-container .right-reset form .password-reset {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
}
.register-container .right-reset form .password-reset .reset {
  width: unset !important;
  margin-bottom: 10px !important;
}
.register-container .right-reset form .password-reset .sub {
  background-color: #198754;
}

.paginator {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
.paginator .page {
  display: flex;
  list-style: none;
  gap: 5px;
  padding: 0;
  margin: 0;
}
.paginator .page .current {
  background-color: #5566FC;
  color: #EFF7FF;
  display: flex;
  padding: 15px;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400px;
}
.paginator .page a {
  text-decoration: none;
  color: #EFF7FF;
}
.paginator .page a li {
  background-color: #191D24;
  color: #EFF7FF;
  display: flex;
  padding: 15px;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400px;
}
.paginator .page a li:hover {
  background-color: #198754;
}

form .inputs .right {
  gap: unset;
}
form .inputs .right .settinsLabel {
  display: block;
  font-size: 12px;
  color: white;
  margin-bottom: 4px;
}
form .inputs .right .input-icon input[type=file] {
  background-color: white;
  padding-left: unset;
}
form .inputs .right .input-icon input[type=file]::file-selector-button {
  height: inherit;
  margin-right: 20px;
  border: none;
  background: #4a6cf7;
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
form .inputs .right .input-icon {
  margin: 0 auto 20px auto;
}
form .inputs .right .input-icon .pass {
  color: #191D24;
}
form .inputs .right .input-icon a {
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  color: #EFF7FF;
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 16px;
}
form .inputs .right .input-icon .gymSettings {
  margin: 0;
  color: #DADFE9 !important;
}
form .inputs .right .input-icon .gymSettings::-moz-placeholder {
  color: #ffc107 !important;
}
form .inputs .right .input-icon .gymSettings::placeholder {
  color: #ffc107 !important;
}
form a {
  text-decoration: none;
}
form .saveGymSettings {
  text-decoration: none !important;
  background-color: #5566FC !important;
  width: 97%;
  margin: 0 auto;
}
form .saveGymSettings:hover {
  background: rgb(49.5793650794, 88.1666666667, 245.9206349206) !important;
}
@media only screen and (max-width: 640px) {
  .member-dashboard .inputs .right {
    padding: unset;
  }
  .member-dashboard form .gymother {
    display: none;
  }
}
@media only screen and (min-width: 641px) {
  .submenu-chips {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .submenu-chips {
    display: none;
  }
}
.shopping-cart {
  display: flex;
  padding-top: unset;
  flex-direction: column;
  width: 100%;
  margin: 20px auto 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.shopping-cart form {
  padding-top: unset;
  gap: unset;
  padding-bottom: unset;
}
.shopping-cart .column-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 50px;
  align-items: center;
  justify-content: center;
  padding: 15px 15px;
  color: #78A0F7;
  text-align: center;
  font-weight: bold;
  background: #191D24;
  border-radius: 8px 8px 0 0;
  gap: 10px;
}
.shopping-cart .table-holder {
  background: #DADFE9;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 15px;
}
.shopping-cart .table-holder .product {
  border-radius: 8px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 50px;
  align-items: center;
  justify-content: center;
  padding: 5px 0px;
  text-align: center;
  margin-bottom: 15px;
  gap: 10px;
}
.shopping-cart .table-holder .product-details p {
  margin: 8px 5px;
  padding: 0;
}
.shopping-cart .table-holder .product-image img {
  max-width: 70px;
  height: auto;
  border-radius: 8px;
}
.shopping-cart .table-holder .product-quantity input {
  outline: none;
  width: 50px;
  padding: 6px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: Roboto;
  font-size: 16px;
  color: #6a6a6a;
}
.shopping-cart .table-holder .product-actions {
  text-align: center;
}
.shopping-cart .table-holder .btn-delete-item {
  width: 30px;
  height: 30px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.shopping-cart .table-holder .btn-delete-item:hover:not(:disabled) {
  background: #d32f2f;
  transform: scale(1.1);
}
.shopping-cart .table-holder .btn-delete-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.shopping-cart .table-holder .btn-delete-item i {
  font-size: 14px;
}
.shopping-cart .table-holder .totals {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.shopping-cart .table-holder .totals .totals-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.shopping-cart .table-holder .totals .totals-item-total {
  font-weight: bold;
}
.shopping-cart .table-holder .checkout {
  padding: 15px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
}
.shopping-cart .table-holder .clear {
  background-color: #dc3545;
}
.shopping-cart .table-holder .clear:hover {
  background: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}
.shopping-cart .table-holder .chk {
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #198754;
}
.shopping-cart .table-holder .chk:hover {
  background: rgb(17.03125, 91.96875, 57.225);
}
.shopping-cart .table-holder .cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
.shopping-cart .table-holder .cart-btn form {
  padding-top: unset;
  display: unset;
  justify-content: unset;
  gap: unset;
  padding-bottom: unset;
  flex-direction: unset;
  width: 100%;
}

@media (max-width: 992px) {
  .shopping-cart .column-labels {
    padding: 15px 10px;
    font-size: 0.9em;
    gap: 8px;
  }
  .shopping-cart .table-holder {
    padding: 10px;
  }
  .shopping-cart .table-holder .product {
    grid-template-columns: 1fr 1fr 1fr 1fr 50px;
    font-size: 0.9em;
    gap: 8px;
  }
  .shopping-cart .table-holder .product-quantity input {
    width: 45px;
    padding: 5px;
  }
}
@media (max-width: 768px) {
  .shopping-cart {
    margin: 10px auto 0 auto;
    box-shadow: none;
  }
  .shopping-cart .column-labels {
    display: none;
  }
  .shopping-cart .table-holder {
    padding: 10px;
  }
  .shopping-cart .table-holder .product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    gap: 10px;
  }
  .shopping-cart .table-holder .product-image {
    display: none;
  }
  .shopping-cart .table-holder .product-details,
  .shopping-cart .table-holder .product-price,
  .shopping-cart .table-holder .product-quantity,
  .shopping-cart .table-holder .product-line-price {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .shopping-cart .table-holder .product-details:last-child,
  .shopping-cart .table-holder .product-price:last-child,
  .shopping-cart .table-holder .product-quantity:last-child,
  .shopping-cart .table-holder .product-line-price:last-child {
    border-bottom: none;
  }
  .shopping-cart .table-holder .product-details::before,
  .shopping-cart .table-holder .product-price::before,
  .shopping-cart .table-holder .product-quantity::before,
  .shopping-cart .table-holder .product-line-price::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    margin-right: 10px;
  }
  .shopping-cart .table-holder .product-details::before {
    content: "Product: ";
  }
  .shopping-cart .table-holder .product-price::before {
    content: "Price: ";
  }
  .shopping-cart .table-holder .product-quantity::before {
    content: "Quantity: ";
  }
  .shopping-cart .table-holder .product-quantity input {
    width: 60px;
    margin-left: auto;
  }
  .shopping-cart .table-holder .product-line-price::before {
    content: "Total: ";
  }
  .shopping-cart .table-holder .product-line-price {
    font-weight: bold;
    font-size: 1.1em;
  }
  .shopping-cart .table-holder .totals {
    margin-top: 15px;
    padding: 15px;
  }
  .shopping-cart .table-holder .cart-btn {
    flex-direction: column;
    gap: 10px;
  }
  .shopping-cart .table-holder .cart-btn form {
    width: 100%;
  }
  .shopping-cart .table-holder .checkout {
    font-size: 1em;
    padding: 12px;
  }
}
@media (max-width: 480px) {
  .shopping-cart .table-holder .product {
    padding: 12px;
    font-size: 0.9em;
  }
  .shopping-cart .table-holder .product-quantity input {
    width: 50px;
  }
  .shopping-cart .table-holder .totals {
    padding: 12px;
    font-size: 0.9em;
  }
}
.payment-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem;
}

.order-summary {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.payment-form {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-top: 0;
  margin-bottom: 15px !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid #eee;
  padding: 0;
  margin: 0;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.item h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.item-pricing {
  text-align: right;
}
.item-pricing p {
  padding: 0;
  margin: 6px 0;
}

.order-totals {
  margin-top: 20px;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tax {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.grand-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.checkout_form {
  gap: unset;
  padding-bottom: unset;
  padding-top: unset;
}
.checkout_form .submit-payment {
  text-align: center;
  text-decoration: none;
  background-color: #198754;
  color: white;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1rem;
  transition: background-color 0.3s;
}
.checkout_form .submit-payment:hover {
  background: rgb(17.03125, 91.96875, 57.225);
}
.checkout_form .danger {
  background-color: #dc3545;
}
.checkout_form .danger:hover {
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}

.confirmation {
  padding: 0px !important;
  background-color: unset;
  border: none;
  box-shadow: none;
}

.confirmation-container {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.confirmation-header {
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.confirmation-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: #333;
  border: none;
}

.success-icon {
  margin: 0 auto 20px;
  width: 50px;
  height: 50px;
  color: #4CAF50;
}

.confirmation-message {
  font-size: 16px;
  color: #666;
  margin-bottom: 1rem;
}

.order-number {
  color: #777;
  margin: 0px;
  font-size: 14px;
}

.order-date {
  color: #777;
  margin: 0px;
  font-size: 14px;
}

.confirmation-details {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.order-summary {
  flex: 1;
  min-width: unset;
}

.customer-info {
  flex: 1;
  min-width: 280px;
}

h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #444;
  font-size: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.item h3 {
  margin: 0 0 0.5rem 0;
  font-size: 16px;
  color: #333;
}
.item p {
  margin: 0px;
  padding: 0px;
}

.trainer {
  color: #666;
  margin: 0;
}

.item-pricing {
  text-align: right;
}

.quantity {
  margin: 0 !important;
  padding-bottom: 8px !important;
}

.price {
  margin: 0px !important;
}

.total {
  margin: 0.25rem 0;
}

.order-totals {
  margin-top: 0px;
  padding-top: 1rem;
  border-top: none;
}

.subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tax {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.tax .tax-discount {
  position: relative;
  display: inline-block;
  width: 33vw;
  text-align: end;
}
.tax .tax-discount .dollar-sign {
  z-index: 2;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
  font-size: 16px;
}
.tax .tax-discount .discount {
  box-sizing: border-box;
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: inherit;
  padding: 0px 0 0 23px;
}

.grand-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 16px;
  margin-top: 1rem;
  padding-top: 1rem;
  color: #333;
  border-top: 1px solid #eee;
}
.grand-total span {
  font-size: 16px;
}

.billing-info p {
  margin: 0.5rem 0;
  color: #555;
}

.next-steps {
  padding: 20px 20px;
}

.steps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.step {
  flex: 1;
  min-width: 200px;
  padding: 1.5rem;
  background: #f1f1f1;
  border-radius: 8px;
  text-align: center;
}
.step h3 {
  margin: 0 0 0.75rem 0;
  color: #333;
  font-size: 16px;
}
.step p {
  margin: 0;
  color: #666;
}

.step-icon {
  margin: 0 auto 10px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
  border-radius: 50%;
  color: #2196F3;
}

.action-buttons {
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.primary {
  font-family: Roboto;
  background-color: #4CAF50;
  color: white;
}
.primary:hover {
  background-color: #45a049;
}

.secondary {
  background-color: #f1f1f1;
  color: #333;
}
.secondary:hover {
  background-color: #e5e5e5;
}

@media (max-width: 768px) {
  .confirmation-container {
    padding: 1.5rem;
  }
  .steps-grid {
    flex-direction: column;
  }
}
.payment .holder {
  display: flex;
  gap: 20px;
  justify-content: center;
  overflow-y: hidden;
  flex-wrap: wrap;
  max-height: unset;
  /* z-index: 1; */
  scroll-behavior: unset;
  overflow-x: unset;
  scrollbar-width: unset;
  padding: unset;
  flex-direction: column;
  scroll-snap-type: unset;
  margin: unset;
}
.payment .holder .member-dash-1 {
  scroll-snap-align: unset;
}
.payment .holder table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  display: revert;
}
.payment .holder table tr {
  padding: 0.35em;
}
.payment .holder table th {
  padding: 0.625em;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #EFF7FF;
  background-color: #191D24;
}
.payment .holder table td {
  background-color: #f8f8f8;
  padding: 0.625em;
  text-align: center;
  font-size: 16px;
}
.payment .holder table td .status {
  border-radius: 6px;
  padding: 2px 6px;
  overflow: hidden;
}
.payment .holder table td .danger-color {
  background-color: #dc3545;
}
.payment .holder table td .success-color {
  background-color: #28a745;
}
.payment .holder table td .warning-color {
  background-color: #ffc107;
}
@media screen and (max-width: 641px) {
  .payment .holder table {
    border: 0;
  }
  .payment .holder table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .payment .holder table tr {
    display: block;
    margin-bottom: 0.625em;
  }
  .payment .holder table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 0.8em;
    text-align: right;
  }
  .payment .holder table td .status {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto 0px auto auto;
  }
  .payment .holder table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  .payment .holder table td:last-child {
    border-bottom: 0;
  }
}

.payment .payment-container .order-summary h2 {
  margin: 0 !important;
}
.payment .payment-container .order-summary form .update-order {
  margin-top: unset;
  border-top: unset;
  padding-top: unset;
  padding-top: 20px;
}
.payment .payment-container .order-summary form .update-order .tax .sbt .sp {
  background-color: #232935;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: 33vw;
  padding: 0 0 0 23px;
}
.payment .payment-container .order-summary form .update-order .tax .status select {
  font-family: Roboto;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  height: 45px;
  border-radius: 6px;
  color: #6a6a6a;
  font-size: 16px;
  width: 100%;
  padding: 0 10px;
}

form {
  padding-bottom: unset;
  gap: 10px;
}
form .inputs .right .getmember {
  margin: 0px !important;
}
form .inputs .right .input-icon .gymSettings {
  color: #DADFE9 !important;
  overflow: hidden;
}
form .get-member-btn {
  text-decoration: none !important;
  background-color: #5566FC !important;
}
form .get-member-btn:hover {
  background: rgb(49.5793650794, 88.1666666667, 245.9206349206) !important;
}

@media only screen and (max-width: 640px) {
  .trainer .label p {
    font-size: 12px;
  }
  .trainer .label .btns a {
    height: 20px;
    width: 20px;
  }
  .trainer .label .btns a i {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createTrainer-form input {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createTrainer-form button {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createTrainer-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .hide-a {
    display: none;
  }
  table .row .hide-e {
    display: none;
  }
  table .row td {
    font-size: 12px !important;
  }
  table .row .hide-a, table .row .hide-e {
    display: none;
  }
}
@media only screen and (min-width: 641px) and (max-width: 641px) {
  .trainer .label p {
    font-size: 12px;
  }
  .trainer .label .btns a {
    height: 20px;
    width: 20px;
  }
  .trainer .label .btns a i {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createTrainer input {
    font-size: 12px;
    width: 50% !important;
  }
  .trainer .mobile-searchInput .createTrainer button {
    font-size: 12px;
  }
  .trainer .mobile-searchInput .createTrainer {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .hide-a {
    display: flex;
  }
  table .row .hide-e {
    display: flex;
  }
  table .row td {
    font-size: 12px;
  }
  table .row .hide-a {
    display: flex;
  }
  table .row .hide-e {
    display: flex;
  }
}
@media only screen and (min-width: 641px) {
  .trainer .label p {
    font-size: 16px;
  }
  .trainer .label .btns a {
    height: 22px;
    width: 22px;
  }
  .trainer .label .btns a i {
    font-size: 16px;
  }
  .trainer .mobile-searchInput .createTrainer-form input {
    font-size: 16px;
  }
  .trainer .mobile-searchInput .createTrainer-form button {
    font-size: 16px;
  }
}
@media only screen and (max-width: 640px) {
  .member-dashboard .label .btns a {
    height: 20px;
    width: 20px;
  }
  .member-dashboard .label .btns a i {
    font-size: 12px;
  }
  .member-dashboard .mobile-searchInput .createStaff-form {
    width: 100% !important;
  }
  .member-dashboard .mobile-searchInput .createStaff-form input {
    font-size: 12px !important;
  }
  .member-dashboard .mobile-searchInput button {
    font-size: 12px !important;
  }
  .member-dashboard table .row .td {
    font-size: 12px !important;
  }
}
.activeMembership .label-act {
  height: 24px;
}

@media only screen and (max-width: 640px) {
  .activeMembership .mobile-searchInput .createAmembership-form input {
    font-size: 12px;
  }
  .activeMembership .mobile-searchInput .createAmembership-form button {
    font-size: 12px;
  }
  .activeMembership .mobile-searchInput .createAmembership-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .mem {
    flex: 1.4;
  }
  table .row td {
    font-size: 12px;
  }
  table .row .mem {
    flex: 1.4;
  }
}
.submenu-chips {
  position: sticky;
  top: 60px;
  left: auto;
  right: auto;
  display: flex;
  gap: 10px;
  padding: 7px 10px 7px 10px;
  background: rgba(25, 29, 36, 0.95);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 998;
  scrollbar-width: none;
}
.submenu-chips::-webkit-scrollbar {
  display: none;
}
.submenu-chips .chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.submenu-chips .chip i {
  font-size: 16px;
}
.submenu-chips .chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.submenu-chips .chip.active {
  border-color: #10b981;
  background: linear-gradient(180deg, #10b981, #0a714f);
  color: white;
  box-shadow: 0 1px 10px rgba(16, 185, 129, 0.25);
}
.submenu-chips .chip:active {
  transform: scale(0.95);
}

.payments .mobile-searchInput .createPayment-form {
  width: 50%;
}

@media only screen and (max-width: 640px) {
  .payments .mobile-searchInput .createPayment-form input {
    font-size: 12px;
  }
  .payments .mobile-searchInput .createPayment-form button {
    font-size: 12px;
  }
  .payments .mobile-searchInput .createPayment-form {
    width: 100% !important;
  }
  table .row {
    font-size: 12px;
  }
  table .row .order {
    flex: 0.7;
  }
  table .row .discount {
    flex: 1.1;
  }
  table .row td {
    font-size: 12px;
  }
  table .row .order {
    flex: 0.7;
  }
  table .row .discount {
    flex: 1.1;
  }
}
@media only screen and (min-width: 641px) {
  .submenu-chips {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .submenu-chips {
    display: none;
  }
}
.subscription-manage {
  background: #232935;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
.subscription-manage h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.subscription-manage .subscription-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.subscription-manage form, .subscription-manage a {
  padding: 0;
  text-decoration: none;
  display: flex;
  flex: 1;
}
.subscription-manage form .sub-btn, .subscription-manage a .sub-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  color: #fff;
}
.subscription-manage form .sub-btn.renew, .subscription-manage a .sub-btn.renew {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
}
.subscription-manage form .sub-btn.renew:hover, .subscription-manage a .sub-btn.renew:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(0, 114, 255, 0.6);
}
.subscription-manage form .sub-btn.upgrade, .subscription-manage a .sub-btn.upgrade {
  background: linear-gradient(135deg, #8e2de2, #4a00e0);
}
.subscription-manage form .sub-btn.upgrade:hover, .subscription-manage a .sub-btn.upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
}
.subscription-manage form .sub-btn.cancel, .subscription-manage a .sub-btn.cancel {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}
.subscription-manage form .sub-btn.cancel:hover, .subscription-manage a .sub-btn.cancel:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(255, 65, 108, 0.6);
}
.subscription-manage form .sub-btn.complete, .subscription-manage a .sub-btn.complete {
  background: linear-gradient(135deg, #10b981, #0a714f);
}
.subscription-manage form .sub-btn.complete:hover, .subscription-manage a .sub-btn.complete:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(10, 113, 79, 0.6);
}

.notification-dash, .sub-dash {
  box-shadow: unset !important;
  background-color: unset !important;
  padding: unset !important;
  padding-top: 10px !important;
}

.subscriptionNotification {
  height: -moz-fit-content;
  height: fit-content;
  padding: unset !important;
  margin-bottom: 20px;
}

.noti {
  flex: unset !important;
}

.dashboard-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  background: #232935;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.5s ease;
  color: #fff;
}
.dashboard-alert .alert-icon {
  font-size: 2rem;
  margin-right: 1rem;
  flex-shrink: 0;
  color: #ffcd3c;
}
.dashboard-alert .alert-content {
  flex: 1;
}
.dashboard-alert .alert-content .alert-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #ffd166;
}
.dashboard-alert .alert-content .alert-message {
  font-size: 0.95rem;
  color: #c0c0c0;
  margin-bottom: 0.7rem;
}
.dashboard-alert .alert-content .alert-action {
  background: linear-gradient(135deg, #00c6ff, #5566FC);
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  width: 170px;
  border: none;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  color: #fff;
}
.dashboard-alert .alert-content .alert-action.warning {
  background: #ff9a3c;
}
.dashboard-alert .alert-content .alert-action.warning:hover {
  background: #ffb75e;
}
.dashboard-alert .alert-content .alert-action.danger {
  background: #e63946;
}
.dashboard-alert .alert-content .alert-action.danger:hover {
  background: #ff5f6d;
}
.dashboard-alert .alert-content .alert-action.success {
  background: #38b000;
}
.dashboard-alert .alert-content .alert-action.success:hover {
  background: #70ff00;
}
.dashboard-alert .alert-close {
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  margin-left: 1rem;
  line-height: 1;
  transition: color 0.3s ease;
}
.dashboard-alert .alert-close:hover {
  color: #fff;
}
.dashboard-alert.warning {
  border-left: 6px solid #ff9a3c;
}
.dashboard-alert.danger {
  border-left: 6px solid #e63946;
}
.dashboard-alert.success {
  border-left: 6px solid #38b000;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .dashboard-alert {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-alert .alert-icon {
    margin-bottom: 0.5rem;
  }
  .dashboard-alert .alert-action {
    margin-top: 0.5rem;
  }
}
.upgrade {
  background-color: unset;
  padding: unset;
  padding-top: 20px;
}
.upgrade .label {
  padding: 0px 20px 15px 20px !important;
}

#upgrade-plans {
  color: #F0F0F0;
}
#upgrade-plans .container {
  background-color: None;
  height: unset;
  padding: 10px 0px;
}
#upgrade-plans .section-title {
  text-align: center;
  margin-bottom: 3rem;
  display: none;
}
#upgrade-plans .section-title h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #4F94FF;
}
#upgrade-plans .section-title p {
  font-size: 1.1rem;
  color: white;
}
#upgrade-plans .pricing-grid {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-items: center;
  flex-wrap: wrap;
}
#upgrade-plans .pricing-card {
  margin: 0 auto;
  background: #2A2F3A;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  width: 250px;
  position: relative;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#upgrade-plans .pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}
#upgrade-plans .pricing-card.featured {
  border: 2px solid #4F94FF;
}
#upgrade-plans .pricing-card.featured .popular-badge {
  display: block;
}
#upgrade-plans .pricing-card .popular-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #FF8C42;
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
  font-size: 0.8rem;
  text-transform: uppercase;
  display: none;
}
#upgrade-plans .pricing-card .plan-name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #4F94FF;
  text-align: center;
}
#upgrade-plans .pricing-card .price {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
#upgrade-plans .pricing-card .price-period {
  font-size: 1rem;
  color: white;
  margin-bottom: 1.5rem;
}
#upgrade-plans .pricing-card .feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  width: 100%;
}
#upgrade-plans .pricing-card .feature-list li {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#upgrade-plans .pricing-card .feature-list li:last-child {
  border-bottom: none;
}
#upgrade-plans .pricing-card .feature-list li::before {
  content: "✔";
  color: #4F94FF;
  margin-right: 0.8rem;
}
#upgrade-plans .pricing-card .upgrade-btn, #upgrade-plans .pricing-card .downgrade-btn {
  background: #4F94FF;
  color: #fff;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}
#upgrade-plans .pricing-card .upgrade-btn:hover, #upgrade-plans .pricing-card .downgrade-btn:hover {
  background: rgb(28, 116.9943181818, 255);
}

@media screen and (max-width: 770px) {
  .upgrade {
    background-color: unset;
    box-shadow: unset;
  }
  #upgrade-plans {
    background: unset;
  }
  #upgrade-plans .container {
    height: unset;
    background-color: None;
  }
  #upgrade-plans .pricing-grid {
    flex-direction: row !important;
    justify-content: center;
  }
  #upgrade-plans .section-title h2 {
    font-size: 2rem;
  }
  #upgrade-plans .pricing-card {
    padding: 1.5rem;
  }
  #upgrade-plans .pricing-card .price {
    font-size: 2rem;
  }
  #upgrade-plans .pricing-card .upgrade-btn, #upgrade-plans .pricing-card .downgrade-btn {
    padding: 0.7rem 1.5rem;
  }
}
@media screen and (max-width: 640px) {
  .upgrade {
    padding-top: unset;
  }
  .upgrade .label {
    display: none;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes activeIndicator {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.1);
  }
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #0c2c61;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 15px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  max-width: 80px;
  padding: 8px 0;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  cursor: pointer;
}
.bottom-nav .nav-item i {
  font-size: 22px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.bottom-nav .nav-item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.bottom-nav .nav-item:hover:not(.active) {
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}
.bottom-nav .nav-item:hover:not(.active) i {
  transform: scale(1.1);
}
.bottom-nav .nav-item.active {
  color: #ffffff;
  background-color: unset;
}
.bottom-nav .nav-item.active i {
  color: #10b981;
}
.bottom-nav .nav-item.active span {
  font-weight: 600;
}
.bottom-nav .nav-item:active {
  background-color: unset;
  transform: scale(0.95);
}
.bottom-nav .nav-item:active i {
  transform: scale(0.9);
}
.bottom-nav .nav-item::before {
  transition: all 0.3s ease;
}

@media (max-width: 640px) {
  .bottom-nav {
    height: 60px;
    padding: 5px 0px;
  }
  .bottom-nav .nav-item {
    max-width: 70px;
    gap: 3px;
  }
  .bottom-nav .nav-item i {
    font-size: 20px;
  }
  .bottom-nav .nav-item span {
    font-size: 10px;
  }
}
@media (min-width: 641px) {
  .bottom-nav {
    height: 60px;
    padding: 0 20px;
    display: none;
  }
  .bottom-nav .nav-item {
    max-width: 90px;
    gap: 5px;
  }
  .bottom-nav .nav-item i {
    font-size: 24px;
  }
  .bottom-nav .nav-item span {
    font-size: 12px;
  }
}
@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }
}
body {
  padding-bottom: 70px;
}
@media (max-width: 375px) {
  body {
    padding-bottom: 65px;
  }
}
@media (min-width: 768px) {
  body {
    padding-bottom: 75px;
  }
}
@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}

@keyframes slideIn {
  to {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #191d24;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  padding-top: constant(safe-area-inset-top, 10px);
  padding-top: env(safe-area-inset-top, 10px);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.top-nav.scrolled {
  height: 60px;
  background: rgba(12, 44, 97, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.logo {
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.logo:active img {
  transform: scale(0.95);
}
.logo span {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.nav-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-icons .cart {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-icons .cart .fa-cart-shopping {
  color: #EFF7FF;
  font-size: 23px;
}
.nav-icons .cart .cart-num {
  top: -10px;
  right: 10px;
  position: relative;
  color: #EFF7FF;
  font-weight: 700;
  background-color: #198754;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  padding: 6px;
  /* margin: 0; */
  height: 8px;
  width: 8px;
}

.icon-btn {
  text-decoration: none;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.icon-btn:hover i {
  color: #ffffff;
  transform: scale(1.1);
}
.icon-btn:active {
  transform: scale(0.95) translateY(0);
}
.icon-btn i {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}
.icon-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s ease;
}
.icon-btn:active::after {
  transform: scale(2);
  opacity: 1;
  transition: 0s;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.profile-btn {
  animation-delay: 0.4s;
  overflow: hidden;
}
.profile-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 641px) and (max-width: 641px) {
  .top-nav {
    padding: 0 16px;
  }
  .logo {
    gap: 10px;
  }
  .logo img {
    width: 34px;
    height: 34px;
  }
  .logo span {
    font-size: 16px;
  }
  .icon-btn {
    width: 35px;
    height: 35px;
  }
  .icon-btn i {
    font-size: 16px;
  }
}
@media (min-width: 641px) {
  .top-nav {
    padding: 0 40px;
    display: none;
  }
  .logo {
    gap: 14px;
  }
  .logo img {
    width: 40px;
    height: 40px;
  }
  .logo span {
    font-size: 20px;
  }
  .icon-btn {
    width: 30px;
    height: 30px;
  }
  .icon-btn i {
    font-size: 19px;
  }
}
@media (min-width: 1024px) {
  .top-nav {
    display: none;
  }
}
.attendance-history {
  box-shadow: unset !important;
  background-color: unset !important;
  padding: 0 !important;
}
.attendance-history .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: unset !important;
}
.attendance-history .label .attendance-count {
  font-size: 16px;
  color: #666;
  font-weight: 500;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #00c6ff, #5566FC);
}
.attendance-history .holder {
  margin-top: 2rem;
}
.attendance-history .attendance-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: unset !important;
}
.attendance-history .attendance-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.attendance-history .attendance-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.attendance-history .attendance-card .attendance-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232935;
  border-radius: 50%;
}
.attendance-history .attendance-card .attendance-icon svg {
  color: #4caf50;
}
.attendance-history .attendance-card .attendance-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.attendance-history .attendance-card .attendance-details .attendance-member h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #5566FC;
}
.attendance-history .attendance-card .attendance-details .attendance-member h3.deleted {
  color: #f44336;
}
.attendance-history .attendance-card .attendance-details .attendance-date {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}
.attendance-history .attendance-card .attendance-details .attendance-date .date-text {
  font-size: 14px;
  color: #6a6a6a;
}
.attendance-history .attendance-card .attendance-details .attendance-date .attendance-time {
  font-size: 14px;
  color: #6a6a6a;
}
.attendance-history .attendance-card .attendance-details .attendance-date .attendance-time:before {
  content: "• ";
  margin-right: 0.25rem;
}
.attendance-history .attendance-card .attendance-details .attendance-plan {
  display: flex;
  gap: 0.5rem;
  font-size: 14px;
}
.attendance-history .attendance-card .attendance-details .attendance-plan .plan-label {
  color: #6a6a6a;
  font-weight: 500;
}
.attendance-history .attendance-card .attendance-details .attendance-plan .plan-label.plan-deleted {
  color: #f44336;
}
.attendance-history .attendance-card .attendance-details .attendance-plan .plan-name {
  color: #333;
  font-weight: 600;
}
.attendance-history .attendance-card .attendance-day {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: #5566FC;
  border-radius: 8px;
}
.attendance-history .attendance-card .attendance-day span {
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}
.attendance-history .no-attendance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.attendance-history .no-attendance svg {
  color: #ccc;
  margin-bottom: 1.5rem;
}
.attendance-history .no-attendance p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}
.attendance-history .no-attendance span {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #999;
}

@media (max-width: 768px) {
  .attendance-history .label {
    flex-direction: row;
    align-items: flex-start;
  }
  .attendance-history .label p {
    font-size: 1.3rem;
  }
  .attendance-history .label .attendance-count {
    font-size: 0.85rem;
  }
  .attendance-history .attendance-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    gap: 1rem;
  }
  .attendance-history .attendance-card .attendance-icon {
    width: 40px;
    height: 40px;
  }
  .attendance-history .attendance-card .attendance-details {
    width: 100%;
  }
  .attendance-history .attendance-card .attendance-details .attendance-member h3 {
    font-size: 1rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date .date-text {
    font-size: 0.85rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date .attendance-time {
    font-size: 0.8rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date .attendance-time:before {
    display: none;
  }
  .attendance-history .attendance-card .attendance-details .attendance-plan {
    font-size: 0.85rem;
  }
  .attendance-history .attendance-card .attendance-day {
    align-self: flex-end;
  }
  .attendance-history .no-attendance {
    padding: 3rem 1.5rem;
  }
  .attendance-history .no-attendance svg {
    width: 40px;
    height: 40px;
  }
  .attendance-history .no-attendance p {
    font-size: 1.1rem;
  }
  .attendance-history .no-attendance span {
    font-size: 0.9rem;
  }
  .attendance-history .paginator .page {
    gap: 0.25rem;
  }
  .attendance-history .paginator .page li {
    min-width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}
@media (max-width: 480px) {
  .attendance-history .attendance-card {
    padding: 1rem;
  }
  .attendance-history .attendance-card .attendance-icon {
    width: 36px;
    height: 36px;
  }
  .attendance-history .attendance-card .attendance-icon svg {
    width: 20px;
    height: 20px;
  }
  .attendance-history .attendance-card .attendance-details .attendance-member h3 {
    font-size: 0.95rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date .date-text {
    font-size: 0.8rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-date .attendance-time {
    font-size: 0.75rem;
  }
  .attendance-history .attendance-card .attendance-details .attendance-plan {
    font-size: 0.8rem;
  }
  .attendance-history .attendance-card .attendance-day {
    padding: 0.4rem 0.8rem;
  }
  .attendance-history .attendance-card .attendance-day span {
    font-size: 0.75rem;
  }
  .attendance-history .paginator .page li {
    min-width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

.right-reset {
  background: #fff;
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  text-align: center;
}
.right-reset .circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #4F94FF 0%, #5566FC 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0px;
  box-shadow: 0 4px 15px rgba(79, 148, 255, 0.3);
}
.right-reset .circle i {
  color: #fff !important;
}
.right-reset h2 {
  color: #333;
  font-size: 28px;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
  font-weight: 700;
}
.right-reset .sent-body {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
  margin: 5px !important;
}
.right-reset .info-box {
  background: #e8f5e9;
  padding: 15px 20px;
  border-radius: 4px;
  text-align: left;
}
.right-reset .info-box h4 {
  margin: 0 0 10px 0;
  color: #2e7d32;
  font-size: 16px;
  font-weight: 600;
}
.right-reset .info-box ul {
  margin: 0;
  padding-left: 20px;
  color: rgb(89.25, 89.25, 89.25);
}
.right-reset .info-box ul li {
  margin: 8px 0;
  font-size: 14px;
}
.right-reset .action-buttons {
  margin-top: 15px;
  width: 285px;
  margin-right: auto;
  margin-left: auto;
}
.right-reset .action-buttons .btn-primary {
  display: inline-block;
  padding: 10px;
  background: linear-gradient(135deg, #4F94FF 0%, #5566FC 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  width: 100%;
  transition: transform 0.2s ease;
}
.right-reset .action-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 148, 255, 0.4);
}
.right-reset .action-buttons .btn-primary i {
  margin-right: 5px;
}
.right-reset .action-buttons .btn-secondary {
  display: inline-block;
  padding: 12px 30px;
  background: transparent;
  color: #4F94FF;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid #4F94FF;
  font-weight: 600;
  transition: all 0.2s ease;
  margin: 5px;
}
.right-reset .action-buttons .btn-secondary:hover {
  background: #4F94FF;
  color: #fff;
}
.right-reset .action-buttons .btn-secondary i {
  margin-right: 5px;
}
.right-reset .help-text {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
  color: #666;
}
.right-reset .help-text p {
  margin-bottom: 10px;
}
.right-reset .help-text p:last-child {
  margin-top: 15px;
}
.right-reset .help-text a {
  color: #4F94FF;
  text-decoration: none;
  font-weight: 600;
}
.right-reset .help-text a:hover {
  text-decoration: underline;
}
.right-reset .help-text strong {
  color: #333;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(79, 148, 255, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(79, 148, 255, 0.5);
  }
}
@media (max-width: 600px) {
  .right-reset {
    padding: 30px 20px;
  }
  .right-reset h2 {
    font-size: 24px;
  }
  .right-reset .action-buttons .btn-primary,
  .right-reset .action-buttons .btn-secondary {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}
.class-detail-page {
  padding: 20px;
}
.class-detail-page .header-actions {
  display: flex;
  gap: 10px;
}
.class-detail-page .header-actions .btn-primary {
  background-color: #4CAF50;
}
.class-detail-page .header-actions .btn-primary i {
  background: transparent;
}
.class-detail-page .header-actions .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateX(-3px);
}
.class-detail-page .header-actions .btn-secondary {
  background-color: #2196F3;
}
.class-detail-page .header-actions .btn-secondary i {
  background: transparent;
}
.class-detail-page .header-actions .btn-secondary:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
  transform: translateX(-3px);
}
.class-detail-page .header-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: white;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-detail-page .class-header {
  margin-bottom: 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.class-detail-page .class-header .class-header-image {
  position: relative;
  height: 170px;
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
}
.class-detail-page .class-header .class-header-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-detail-page .class-header .class-header-image .class-icon-large {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.class-detail-page .class-header .class-header-image .class-icon-large i {
  font-size: 120px;
  color: rgba(255, 255, 255, 0.3);
}
.class-detail-page .class-header .class-header-image .class-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
}
.class-detail-page .class-header .class-header-image .class-overlay h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 15px 0;
}
.class-detail-page .class-header .class-header-image .class-overlay .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}
.class-detail-page .class-header .class-header-image .class-overlay .status-badge.cancelled {
  background: rgba(244, 67, 54, 0.9);
}
.class-detail-page .class-header .class-header-image .class-overlay .status-badge.booked {
  background: rgba(76, 175, 80, 0.9);
}
.class-detail-page .class-header .class-header-image .class-overlay .status-badge.waitlisted {
  background: rgba(255, 152, 0, 0.9);
}
.class-detail-page .class-detail-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
}
.class-detail-page .class-detail-content .class-main-info .info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-card-header {
  margin-bottom: 25px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-card-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-card-header h2 i {
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid .info-item {
  display: flex;
  gap: 15px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid .info-item i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 10px;
  color: #4CAF50;
  font-size: 18px;
  flex-shrink: 0;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid .info-item .info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid .info-item .info-content .info-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.class-detail-page .class-detail-content .class-main-info .info-card .info-grid .info-item .info-content .info-value {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.class-detail-page .class-detail-content .class-main-info .info-card .class-description {
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}
.class-detail-page .class-detail-content .class-main-info .info-card .class-description h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .class-description p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}
.class-detail-page .class-detail-content .class-main-info .info-card .cancellation-notice {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: rgba(244, 67, 54, 0.1);
  border-left: 4px solid #f44336;
  border-radius: 8px;
  margin-top: 20px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .cancellation-notice i {
  color: #f44336;
  font-size: 20px;
  flex-shrink: 0;
}
.class-detail-page .class-detail-content .class-main-info .info-card .cancellation-notice strong {
  display: block;
  color: #f44336;
  margin-bottom: 5px;
}
.class-detail-page .class-detail-content .class-main-info .info-card .cancellation-notice p {
  margin: 0;
  color: #333;
  font-size: 14px;
}
.class-detail-page .class-detail-content .class-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.class-detail-page .class-detail-content .class-sidebar .sidebar-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-header {
  margin-bottom: 20px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-header h3 i {
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle {
  position: relative;
  margin-bottom: 25px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  max-height: 100px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .circular-chart .circle-bg {
  fill: none;
  stroke: #f8f9fa;
  stroke-width: 3.8;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .circular-chart .circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
  stroke: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .circular-chart .percentage {
  fill: #333;
  font-family: sans-serif;
  font-size: 0.5em;
  font-weight: 600;
  text-anchor: middle;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .capacity-label {
  text-align: center;
  margin-top: 10px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .capacity-label .capacity-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-circle .capacity-label .capacity-text {
  display: block;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details .capacity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details .capacity-item .label {
  font-size: 14px;
  color: #666;
  padding: 0px !important;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details .capacity-item .value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details .capacity-item .value.confirmed {
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .capacity-card .capacity-stats .capacity-details .capacity-item .value.waitlist {
  color: #ff9800;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 15px;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-icon.confirmed {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-icon.waitlisted {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-icon i {
  font-size: 24px;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-status .status-text p {
  font-size: 13px;
  color: #666;
  margin: 0;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-book,
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-waitlist,
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-cancel,
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-disabled {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-book {
  background: #4CAF50;
  color: white;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-book:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-waitlist {
  background: #ff9800;
  color: white;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-waitlist:hover {
  background: rgb(204, 121.6, 0);
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-cancel {
  font-family: Roboto;
  background: transparent;
  color: #f44336;
  border: 1px solid #f44336;
  padding: 10px 12px !important;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-cancel:hover {
  background: #f44336;
  color: white;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .btn-disabled {
  background: #f8f9fa;
  color: #666;
  cursor: not-allowed;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #666;
  text-align: center;
  justify-content: center;
}
.class-detail-page .class-detail-content .class-sidebar .booking-action-card .booking-note i {
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-header {
  margin-bottom: 15px;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-header h3 i {
  color: #4CAF50;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-info {
  display: flex;
  gap: 15px;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-info .trainer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-info .trainer-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-info .trainer-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}
.class-detail-page .class-detail-content .class-sidebar .trainer-card .trainer-info .trainer-details p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}
.class-detail-page .attendees-section {
  margin-top: 40px;
}
.class-detail-page .attendees-section .section-header {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.class-detail-page .attendees-section .section-header h2 {
  border: none;
  margin: 0px !important;
  padding: 0px !important;
  font-size: 16px;
  font-weight: 600;
  color: #78A0F7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.class-detail-page .attendees-section .section-header h2 i {
  color: #4CAF50;
}
.class-detail-page .attendees-section .section-header .count-badge {
  background: #4CAF50;
  color: white;
  font-size: 14px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.class-detail-page .attendees-section .attendees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 12px;
  align-items: center;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info {
  flex: 1;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info p {
  font-size: 12px;
  color: #666;
  margin: 0 0 6px 0;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info .status-badge.attended {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .attendee-info .status-badge.confirmed {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .btn-check-in {
  padding: 8px 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}
.class-detail-page .attendees-section .attendees-grid .attendee-card .btn-check-in:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.class-detail-page .attendees-section .waitlist-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.class-detail-page .attendees-section .waitlist-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-detail-page .attendees-section .waitlist-section h3 i {
  color: #ff9800;
}
.class-detail-page .attendees-section .waitlist-section .waitlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.class-detail-page .attendees-section .waitlist-section .waitlist li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.class-detail-page .attendees-section .waitlist-section .waitlist li .waitlist-position {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff9800;
  color: white;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
}
.class-detail-page .attendees-section .waitlist-section .waitlist li .waitlist-name {
  flex: 1;
  font-weight: 500;
  color: #333;
}
.class-detail-page .attendees-section .waitlist-section .waitlist li .waitlist-time {
  font-size: 12px;
  color: #666;
}

@media (max-width: 1024px) {
  .class-detail-page .class-detail-content {
    grid-template-columns: 1fr;
  }
  .class-detail-page .class-detail-content .class-sidebar {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .class-detail-page {
    padding: 15px;
  }
  .class-detail-page .label {
    flex-direction: column;
    gap: 15px;
  }
  .class-detail-page .class-header .class-header-image {
    height: 200px;
  }
  .class-detail-page .class-header .class-header-image .class-icon-large i {
    font-size: 80px;
  }
  .class-detail-page .class-header .class-header-image .class-overlay {
    padding: 20px;
  }
  .class-detail-page .class-header .class-header-image .class-overlay h1 {
    font-size: 24px;
  }
  .class-detail-page .class-main-info .info-card .info-grid {
    grid-template-columns: 1fr;
  }
  .class-detail-page .attendees-section .attendees-grid {
    grid-template-columns: 1fr;
  }
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.my-bookings-page {
  padding: 20px;
}
.my-bookings-page .my-bookings-label {
  display: flex;
  justify-content: space-between;
}
.my-bookings-page .my-bookings-label .header-actions {
  display: flex;
  gap: 10px;
}
.my-bookings-page .my-bookings-label .header-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.my-bookings-page .my-bookings-label .header-actions a:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
  transform: translateX(-3px);
}
.my-bookings-page .my-bookings-label .header-actions a:last-child {
  background: #4CAF50;
}
.my-bookings-page .my-bookings-label .header-actions a:last-child:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.my-bookings-page .bookings-section .section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0px;
  justify-content: space-between;
}
.my-bookings-page .bookings-section .section-header h2 {
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #78A0F7;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
}
.my-bookings-page .bookings-section .section-header h2 i {
  color: #4CAF50 !important;
}
.my-bookings-page .bookings-section .section-header .count-badge {
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-bookings-page .bookings-section .bookings-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}
.my-bookings-page .bookings-section .bookings-list .booking-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header {
  padding: 20px 20px 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .class-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .class-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .class-info .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  width: -moz-fit-content;
  width: fit-content;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .class-info .status-badge.confirmed {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .class-info .status-badge.waitlisted {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .booking-actions .btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .booking-actions .btn-icon:hover {
  background: #4CAF50;
  color: white;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-details {
  padding: 0 20px 15px 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-details .detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-details .detail-row .detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-details .detail-row .detail-item i {
  color: #4CAF50;
  width: 16px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-footer {
  padding: 15px 20px 15px 25px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-footer .cancel-form .btn-cancel {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: #f44336;
  border: 1px solid #f44336;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-footer .cancel-form .btn-cancel:hover {
  background: #f44336;
  color: white;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past {
  padding: 15px 20px 15px 25px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info .status-badge.attended {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info .status-badge.no_show {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info .status-badge.cancelled {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .past-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 13px;
  color: #666;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .past-details span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .past-details span i {
  color: #4CAF50;
  font-size: 12px;
}
.my-bookings-page .bookings-section .empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 12px;
}
.my-bookings-page .bookings-section .empty-state .upb {
  font-size: 32px !important;
}
.my-bookings-page .bookings-section .empty-state .fas {
  color: white !important;
}
.my-bookings-page .bookings-section .empty-state i {
  font-size: 20px;
  color: #666;
}
.my-bookings-page .bookings-section .empty-state h3 {
  font-size: 16px;
  color: #333;
  margin: 10px 0px;
}
.my-bookings-page .bookings-section .empty-state p {
  color: #666;
  margin: 5px 0px 15px 0px;
  font-size: 14px;
  font-weight: 400;
}
.my-bookings-page .bookings-section .empty-state .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.my-bookings-page .bookings-section .empty-state .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.my-bookings-page .bookings-section .empty-state.small {
  padding: 30px 20px;
}
.my-bookings-page .bookings-section .empty-state.small i {
  font-size: 32px;
  margin-bottom: 10px;
}
.my-bookings-page .bookings-section .empty-state.small p {
  margin: 0;
  font-size: 14px;
}
.my-bookings-page .past-section .section-header h2 i {
  color: #78A0F7;
}
.my-bookings-page .past-section .count-badge {
  background: #9e9e9e;
}

@media (max-width: 768px) {
  .my-bookings-page {
    padding: 15px;
  }
  .my-bookings-page .my-bookings-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .my-bookings-page .my-bookings-label .header-actions {
    width: 100%;
    flex-direction: column;
  }
  .my-bookings-page .my-bookings-label .header-actions a {
    justify-content: center;
  }
  .my-bookings-page .bookings-section {
    margin-bottom: 40px;
  }
  .my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header {
    flex-direction: column;
    gap: 15px;
  }
  .my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-header .booking-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .my-bookings-page .bookings-section .bookings-list .booking-card.upcoming .booking-details .detail-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .class-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .my-bookings-page .bookings-section .bookings-list .booking-card.past .booking-content .past-details {
    flex-direction: column;
    gap: 8px;
  }
}
.class-schedule-page {
  padding: 20px;
}
.class-schedule-page .my-class-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 15px;
}
.class-schedule-page .my-class-label a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-schedule-page .my-class-label a:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateX(-3px);
}
.class-schedule-page .my-class-label a i {
  font-size: 16px;
}
.class-schedule-page .access-info-card {
  background: linear-gradient(135deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  color: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.class-schedule-page .access-info-card .access-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.class-schedule-page .access-info-card .access-header i {
  font-size: 28px;
}
.class-schedule-page .access-info-card .access-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.class-schedule-page .access-info-card .access-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
.class-schedule-page .access-info-card .access-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.class-schedule-page .access-info-card .access-stats .stat-item .stat-label {
  font-size: 13px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.class-schedule-page .access-info-card .access-stats .stat-item .stat-value {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}
.class-schedule-page .access-info-card .access-stats .stat-item .stat-total {
  font-size: 16px;
  opacity: 0.8;
}
.class-schedule-page .access-info-card .access-warning {
  background: rgba(255, 255, 255, 0.2);
  padding: 12px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.class-schedule-page .access-info-card .access-warning i {
  font-size: 18px;
}
.class-schedule-page .no-access-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin-bottom: 30px;
}
.class-schedule-page .no-access-card i {
  font-size: 32px;
  color: #666;
}
.class-schedule-page .no-access-card h3 {
  margin: 10px 0px;
  font-size: 16px;
  color: #333;
}
.class-schedule-page .no-access-card p {
  color: #666;
  margin: 5px 0px 15px 0px;
  font-size: 14px;
  font-weight: 400;
}
.class-schedule-page .no-access-card .i_btn {
  font-size: 20px;
}
.class-schedule-page .no-access-card .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-schedule-page .no-access-card .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.class-schedule-page .class-schedule-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}
.class-schedule-page .class-schedule-holder .class-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.class-schedule-page .class-schedule-holder .class-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.class-schedule-page .class-schedule-holder .class-card.cancelled {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.class-schedule-page .class-schedule-holder .class-card.full .class-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}
.class-schedule-page .class-schedule-holder .class-card .class-image {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
}
.class-schedule-page .class-schedule-holder .class-card .class-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-schedule-page .class-schedule-holder .class-card .class-image .class-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.class-schedule-page .class-schedule-holder .class-card .class-image .class-icon i {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.8);
}
.class-schedule-page .class-schedule-holder .class-card .class-image .status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
}
.class-schedule-page .class-schedule-holder .class-card .class-image .status-badge.cancelled {
  background: rgba(244, 67, 54, 0.9);
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-image .status-badge.booked {
  background: rgba(76, 175, 80, 0.9);
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-image .status-badge.waitlisted {
  background: rgba(255, 152, 0, 0.9);
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-image .status-badge.full {
  background: rgba(51, 51, 51, 0.9);
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  flex: 1;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item i {
  width: 18px;
  color: #4CAF50;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item.capacity span {
  font-weight: 500;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item.capacity span.available {
  color: #4CAF50;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item.capacity span.limited {
  color: #ff9800;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item.capacity span.full {
  color: #f44336;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-details .detail-item.waitlist {
  color: #ff9800;
  font-size: 13px;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions {
  margin-top: auto;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-primary,
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-view,
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-disabled {
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-primary {
  background: #4CAF50;
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-view {
  background: #2196F3;
  color: white;
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-view:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
}
.class-schedule-page .class-schedule-holder .class-card .class-info .class-actions .btn-disabled {
  background: #f8f9fa;
  color: #666;
  cursor: not-allowed;
}
.class-schedule-page .no-classes-found {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 12px;
}
.class-schedule-page .no-classes-found i {
  font-size: 64px;
  color: #666;
  margin-bottom: 20px;
}
.class-schedule-page .no-classes-found h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}
.class-schedule-page .no-classes-found p {
  color: #666;
  margin-bottom: 25px;
}
.class-schedule-page .no-classes-found .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-schedule-page .no-classes-found .btn-secondary:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}

@media (max-width: 768px) {
  .class-schedule-page {
    padding: 15px;
  }
  .class-schedule-page .my-class-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .class-schedule-page .my-class-label a {
    width: 100%;
    justify-content: center;
  }
  .class-schedule-page .access-info-card .access-stats {
    grid-template-columns: 1fr;
  }
  .class-schedule-page .class-schedule-holder {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .class-schedule-page .class-card .class-image {
    height: 150px;
  }
  .class-schedule-page .class-card .class-image .class-icon i {
    font-size: 48px;
  }
}
.my-access-page {
  padding: 20px;
}
.my-access-page .my-access-label {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.my-access-page .my-access-label .header-actions {
  display: flex;
  gap: 10px;
}
.my-access-page .my-access-label .header-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.my-access-page .my-access-label .header-actions a:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
  transform: translateX(-3px);
}
.my-access-page .my-access-label .header-actions a:last-child {
  background: #4CAF50;
}
.my-access-page .my-access-label .header-actions a:last-child:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.my-access-page .active-access-section {
  margin-bottom: 40px;
}
.my-access-page .active-access-section .access-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.my-access-page .active-access-section .access-card .access-card-header {
  background: linear-gradient(135deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  color: white;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.my-access-page .active-access-section .access-card .access-card-header .header-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my-access-page .active-access-section .access-card .access-card-header .header-icon i {
  font-size: 28px;
}
.my-access-page .active-access-section .access-card .access-card-header .header-text {
  flex: 1;
}
.my-access-page .active-access-section .access-card .access-card-header .header-text h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.my-access-page .active-access-section .access-card .access-card-header .header-text p {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.my-access-page .active-access-section .access-card .access-card-header .header-text .packages-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
.my-access-page .active-access-section .access-card .usage-section {
  padding: 30px;
  border-bottom: 1px solid #e0e0e0;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header .usage-numbers {
  font-size: 24px;
  font-weight: 700;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header .usage-numbers .used {
  color: #4CAF50;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header .usage-numbers .separator {
  color: #666;
  margin: 0 5px;
}
.my-access-page .active-access-section .access-card .usage-section .usage-header .usage-numbers .total {
  color: #333;
}
.my-access-page .active-access-section .access-card .usage-section .progress-bar-container {
  margin-bottom: 25px;
}
.my-access-page .active-access-section .access-card .usage-section .progress-bar-container .progress-bar {
  height: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.my-access-page .active-access-section .access-card .usage-section .progress-bar-container .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  border-radius: 10px;
  transition: width 0.3s ease;
}
.my-access-page .active-access-section .access-card .usage-section .progress-bar-container .progress-label {
  font-size: 13px;
  color: #666;
}
.my-access-page .active-access-section .access-card .usage-section .remaining-info {
  display: flex;
  justify-content: center;
}
.my-access-page .active-access-section .access-card .usage-section .remaining-info .remaining-box {
  text-align: center;
  padding: 20px 40px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
  border-radius: 12px;
  border: 2px solid rgba(76, 175, 80, 0.2);
}
.my-access-page .active-access-section .access-card .usage-section .remaining-info .remaining-box .remaining-number {
  font-size: 48px;
  font-weight: 700;
  color: #4CAF50;
  line-height: 1;
  margin-bottom: 8px;
}
.my-access-page .active-access-section .access-card .usage-section .remaining-info .remaining-box .remaining-label {
  font-size: 14px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.my-access-page .active-access-section .access-card .validity-section {
  padding: 25px 30px;
  background: #f8f9fa;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item i {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4CAF50;
  font-size: 18px;
  flex-shrink: 0;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item .validity-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item .validity-content .validity-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item .validity-content .validity-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.my-access-page .active-access-section .access-card .validity-section .validity-item .validity-content .validity-value.expiring-soon {
  color: #ff9800;
  animation: pulse 2s infinite;
}
.my-access-page .active-access-section .access-card .access-status {
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.my-access-page .active-access-section .access-card .access-status.can-book {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.my-access-page .active-access-section .access-card .access-status.can-book i {
  font-size: 20px;
}
.my-access-page .active-access-section .access-card .access-status.no-access {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}
.my-access-page .active-access-section .access-card .access-status.no-access i {
  font-size: 20px;
}
.my-access-page .active-access-section .access-card .access-actions {
  padding: 25px 30px;
  display: flex;
  gap: 15px;
}
.my-access-page .active-access-section .access-card .access-actions .btn-primary,
.my-access-page .active-access-section .access-card .access-actions .btn-secondary {
  flex: 1;
  padding: 15px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}
.my-access-page .active-access-section .access-card .access-actions .btn-primary {
  background: #4CAF50;
  color: white;
}
.my-access-page .active-access-section .access-card .access-actions .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.my-access-page .active-access-section .access-card .access-actions .btn-secondary {
  background: white;
  color: #333;
  border: 2px solid #e0e0e0;
}
.my-access-page .active-access-section .access-card .access-actions .btn-secondary:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}
.my-access-page .no-access-section .no-access-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 60px 40px;
  text-align: center;
}
.my-access-page .no-access-section .no-access-card .no-access-icon {
  width: 75px;
  height: 75px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
}
.my-access-page .no-access-section .no-access-card .no-access-icon i {
  font-size: 32px;
  color: #4CAF50;
}
.my-access-page .no-access-section .no-access-card h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}
.my-access-page .no-access-section .no-access-card p {
  font-size: 16px;
  color: #666;
  max-width: 500px;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.my-access-page .no-access-section .no-access-card .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: #4CAF50;
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}
.my-access-page .no-access-section .no-access-card .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.my-access-page .history-section {
  margin-top: 40px;
}
.my-access-page .history-section .section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: space-between;
}
.my-access-page .history-section .section-header h2 {
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #78A0F7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
.my-access-page .history-section .section-header h2 i {
  color: #4CAF50;
}
.my-access-page .history-section .section-header .count-badge {
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  height: 25px;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-access-page .history-section .history-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  scrollbar-color: gray;
  scrollbar-width: thin;
}
.my-access-page .history-section .history-table table {
  width: 100%;
  border-collapse: collapse;
  display: inline-table !important;
}
.my-access-page .history-section .history-table table thead {
  background: #f8f9fa;
}
.my-access-page .history-section .history-table table thead tr th {
  padding: 15px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.my-access-page .history-section .history-table table tbody tr {
  background-color: unset;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.3s ease;
}
.my-access-page .history-section .history-table table tbody tr:hover {
  background: #f8f9fa;
}
.my-access-page .history-section .history-table table tbody tr.expired {
  background-color: none;
}
.my-access-page .history-section .history-table table tbody tr td {
  padding: 10px 20px;
  font-size: 14px;
}
.my-access-page .history-section .history-table table tbody tr td .plan-info .plan-name {
  font-weight: 500;
  color: #333;
}
.my-access-page .history-section .history-table table tbody tr td .classes-info .used {
  font-weight: 600;
  color: #4CAF50;
}
.my-access-page .history-section .history-table table tbody tr td .classes-info .total {
  font-weight: 600;
  color: #333;
}
.my-access-page .history-section .history-table table tbody tr td .classes-info .remaining {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}
.my-access-page .history-section .history-table table tbody tr td .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.my-access-page .history-section .history-table table tbody tr td .status-badge.active {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.my-access-page .history-section .history-table table tbody tr td .status-badge.expired {
  background: rgba(244, 67, 54, 0.9);
  color: white;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@media (max-width: 768px) {
  .my-access-page {
    padding: 15px;
  }
  .my-access-page .my-access-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .my-access-page .my-access-label .header-actions {
    width: 100%;
  }
  .my-access-page .my-access-label .header-actions a {
    width: 100%;
    justify-content: center;
  }
  .my-access-page .active-access-section .access-card .access-card-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .my-access-page .active-access-section .access-card .validity-section {
    grid-template-columns: 1fr;
  }
  .my-access-page .active-access-section .access-card .access-actions {
    flex-direction: column;
  }
  .my-access-page .history-section .history-table {
    overflow-x: auto;
  }
  .my-access-page .history-section .history-table table {
    min-width: 600px;
  }
}
.attendees-page {
  padding: 20px;
}
.attendees-page .header-actions {
  display: flex;
  gap: 10px;
}
.attendees-page .back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #4CAF50;
  padding: 10px 20px;
  color: white;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.attendees-page .back-nav a:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateX(-5px);
}
.attendees-page .class-header-info {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
  align-items: center;
}
.attendees-page .class-header-info .class-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attendees-page .class-header-info .class-icon i {
  font-size: 32px;
  color: white;
}
.attendees-page .class-header-info .class-details h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}
.attendees-page .class-header-info .class-details .class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: #666;
}
.attendees-page .class-header-info .class-details .class-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.attendees-page .class-header-info .class-details .class-meta span i {
  color: #4CAF50;
}
.attendees-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.attendees-page .stats-grid .stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  align-items: center;
  transition: all 0.3s ease;
}
.attendees-page .stats-grid .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.attendees-page .stats-grid .stat-card .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attendees-page .stats-grid .stat-card .stat-icon i {
  font-size: 24px;
}
.attendees-page .stats-grid .stat-card .stat-content .stat-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
}
.attendees-page .stats-grid .stat-card .stat-content .stat-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.attendees-page .stats-grid .stat-card.capacity .stat-icon {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}
.attendees-page .stats-grid .stat-card.capacity .stat-number {
  color: #2196F3;
}
.attendees-page .stats-grid .stat-card.confirmed .stat-icon {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.attendees-page .stats-grid .stat-card.confirmed .stat-number {
  color: #4CAF50;
}
.attendees-page .stats-grid .stat-card.available .stat-icon {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.attendees-page .stats-grid .stat-card.available .stat-number {
  color: #4CAF50;
}
.attendees-page .stats-grid .stat-card.waitlist .stat-icon {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}
.attendees-page .stats-grid .stat-card.waitlist .stat-number {
  color: #ff9800;
}
.attendees-page .attendees-section {
  margin-bottom: 40px;
}
.attendees-page .attendees-section .section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.attendees-page .attendees-section .section-header h2 {
  margin: 0px !important;
  padding: 0px !important;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #78A0F7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.attendees-page .attendees-section .section-header h2 i {
  color: #4CAF50;
}
.attendees-page .attendees-section .section-header .count-badge {
  background: #4CAF50;
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.attendees-page .attendees-section .section-header .count-badge.waitlist {
  background: #ff9800;
}
.attendees-page .attendees-section .attendees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card {
  background: white;
  border-radius: 12px;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  width: -moz-max-content;
  width: max-content;
  gap: 15px;
  position: relative;
  transition: all 0.3s ease;
}
.attendees-page .attendees-section .attendees-grid .attendee-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar {
  position: relative;
  flex-shrink: 0;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #f8f9fa;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar .status-indicator {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar .status-indicator.attended {
  background: #4CAF50;
  color: white;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar .status-indicator.attended i {
  font-size: 10px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar .status-indicator.confirmed {
  background: #2196F3;
  color: white;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-avatar .status-indicator.confirmed i {
  font-size: 8px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info {
  flex: 1;
  min-width: 0;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-details .detail-item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-details .detail-item i {
  width: 14px;
  color: #4CAF50;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-status .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-status .status-badge.attended {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-status .status-badge.attended .checked-time {
  margin-left: 4px;
  opacity: 0.8;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-info .attendee-status .status-badge.confirmed {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions form {
  width: 100%;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions .danger {
  background: #f44336 !important;
  font-size: 14px;
  font-weight: 500;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions .danger:hover {
  background: rgb(234.1839622642, 27.9622641509, 12.8160377358);
  transform: scale(1.05);
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions .btn-check-in {
  padding: 8px 10px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions .btn-check-in:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: scale(1.05);
}
.attendees-page .attendees-section .attendees-grid .attendee-card .attendee-actions .btn-check-in:active {
  transform: scale(0.98);
}
.attendees-page .attendees-section .empty-state {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}
.attendees-page .attendees-section .empty-state i {
  font-size: 48px;
  color: #666;
  margin-bottom: 15px;
}
.attendees-page .attendees-section .empty-state p {
  color: #666;
  margin: 0;
}
.attendees-page .waitlist-section .section-header {
  margin-bottom: 20px;
}
.attendees-page .waitlist-section .section-header h2 {
  margin: 0px !important;
  padding: 0px !important;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #78A0F7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.attendees-page .waitlist-section .section-header h2 i {
  color: #4CAF50;
}
.attendees-page .waitlist-section .waitlist-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.attendees-page .waitlist-section .waitlist-table table {
  padding-top: 0px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.attendees-page .waitlist-section .waitlist-table table thead {
  background: #ff9800;
  border-bottom: 1px solid rgba(255, 152, 0, 0.3);
}
.attendees-page .waitlist-section .waitlist-table table thead tr {
  display: flex;
  width: 100%;
  gap: 10px;
}
.attendees-page .waitlist-section .waitlist-table table thead tr th {
  padding: 14px 0px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attendees-page .waitlist-section .waitlist-table table thead tr th:nth-child(1) {
  width: 15%;
  text-align: center;
}
.attendees-page .waitlist-section .waitlist-table table thead tr th:nth-child(2) {
  width: 45%;
}
.attendees-page .waitlist-section .waitlist-table table thead tr th:nth-child(3) {
  width: 20%;
}
.attendees-page .waitlist-section .waitlist-table table thead tr th:nth-child(4) {
  width: 20%;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr {
  gap: 10px;
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.3s ease;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr:hover {
  background: #f8f9fa;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr:last-child {
  border-bottom: none;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td {
  display: flex;
  padding: 14px 0px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td:nth-child(1) {
  width: 15%;
  align-items: center;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td:nth-child(2) {
  width: 45%;
  align-items: center;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td:nth-child(3) {
  width: 20%;
  align-items: center;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td:nth-child(4) {
  width: 20%;
  align-items: center;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td .position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #ff9800;
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin: 0 auto;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td .member-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td .member-cell .member-avatar-small {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  background: #f8f9fa;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td .member-cell .member-avatar-small img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.attendees-page .waitlist-section .waitlist-table table tbody tr td .member-cell .member-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

@media (max-width: 768px) {
  .attendees-page {
    padding: 15px;
  }
  .attendees-page .class-header-info {
    flex-direction: column;
    text-align: center;
  }
  .attendees-page .class-header-info .class-details .class-meta {
    flex-direction: column;
    gap: 10px;
  }
  .attendees-page .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .attendees-page .attendees-grid {
    display: unset !important;
  }
  .attendees-page .attendees-grid .attendee-card {
    flex-direction: column;
    text-align: center;
  }
  .attendees-page .attendees-grid .attendee-card .attendee-avatar {
    margin: 0 auto;
  }
  .attendees-page .attendees-grid .attendee-card .attendee-info .attendee-details {
    align-items: center;
  }
  .attendees-page .attendees-grid .attendee-card .attendee-actions {
    width: 100%;
  }
  .attendees-page .attendees-grid .attendee-card .attendee-actions form {
    width: 100%;
  }
  .attendees-page .attendees-grid .attendee-card .attendee-actions .btn-check-in {
    width: 100%;
    justify-content: center;
  }
  .attendees-page .waitlist-section .waitlist-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .attendees-page .waitlist-section .waitlist-table table thead tr th,
  .attendees-page .waitlist-section .waitlist-table table tbody tr td {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 0px;
  }
  .attendees-page .waitlist-section .waitlist-table table thead {
    padding: 0px 10px;
  }
  .attendees-page .waitlist-section .waitlist-table table tbody {
    padding: 0px 10px;
  }
}
@media (max-width: 480px) {
  .attendees-page .stats-grid {
    grid-template-columns: 1fr;
  }
}
.class-types-page {
  padding: 20px;
}
.class-types-page .class-types-label {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.class-types-page .class-types-label p {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: flex;
  gap: 12px;
}
.class-types-page .class-types-label p i {
  color: #4CAF50;
  font-weight: 900;
  font-size: 16px;
}
.class-types-page .class-types-label .btn-add {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  gap: 8px;
  padding: 10px 12px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-types-page .class-types-label .btn-add:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.class-types-page .class-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}
.class-types-page .class-types-grid .class-type-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.class-types-page .class-types-grid .class-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.class-types-page .class-types-grid .class-type-card .class-type-image {
  height: 150px;
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
  overflow: hidden;
  position: relative;
}
.class-types-page .class-types-grid .class-type-card .class-type-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-types-page .class-types-grid .class-type-card .class-type-image .class-type-icon {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.class-types-page .class-types-grid .class-type-card .class-type-image .class-type-icon i {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.6);
}
.class-types-page .class-types-grid .class-type-card .class-type-info {
  padding: 20px;
}
.class-types-page .class-types-grid .class-type-card .class-type-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-meta .duration {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-meta .duration i {
  color: #4CAF50;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .description.no-description {
  font-style: italic;
  opacity: 0.7;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions {
  display: flex;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-edit,
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-delete {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-edit {
  background: #2196F3;
  color: white;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-edit:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-delete {
  background: #f44336;
  color: white;
}
.class-types-page .class-types-grid .class-type-card .class-type-info .class-type-actions .btn-delete:hover {
  background: rgb(234.1839622642, 27.9622641509, 12.8160377358);
}
.class-types-page .no-class-types {
  text-align: center;
  padding: 80px 20px;
  background: #f8f9fa;
  border-radius: 12px;
}
.class-types-page .no-class-types i {
  font-size: 14px;
  color: white;
}
.class-types-page .no-class-types .fass {
  font-size: 32px;
  color: #666;
}
.class-types-page .no-class-types h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}
.class-types-page .no-class-types p {
  color: #666;
  margin-bottom: 25px;
}
.class-types-page .no-class-types .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.class-types-page .no-class-types .btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}

.create-class-type-page {
  padding: 20px;
}
.create-class-type-page .back-nav {
  margin-bottom: 20px;
}
.create-class-type-page .back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #666;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.create-class-type-page .back-nav a:hover {
  color: #4CAF50;
  transform: translateX(-5px);
}
.create-class-type-page .form-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.create-class-type-page .form-card .form-header {
  background: linear-gradient(135deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  color: white;
  padding: 40px 30px;
  text-align: center;
}
.create-class-type-page .form-card .form-header .header-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.create-class-type-page .form-card .form-header .header-icon i {
  font-size: 32px;
}
.create-class-type-page .form-card .form-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.create-class-type-page .form-card .form-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}
.create-class-type-page .form-card .class-type-form {
  padding: 30px;
}
.create-class-type-page .form-card .class-type-form .form-group {
  margin-bottom: 20px;
}
.create-class-type-page .form-card .class-type-form .form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.create-class-type-page .form-card .class-type-form .form-group label i {
  color: #4CAF50;
}
.create-class-type-page .form-card .class-type-form .form-group label .required {
  color: #f44336;
}
.create-class-type-page .form-card .class-type-form .form-group .form-control {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s ease;
}
.create-class-type-page .form-card .class-type-form .form-group .form-control:focus {
  outline: none;
  border-color: #4CAF50;
}
.create-class-type-page .form-card .class-type-form .form-group textarea.form-control {
  resize: vertical;
  min-height: 100px;
}
.create-class-type-page .form-card .class-type-form .form-group .help-text {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper {
  position: relative;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: border-color 0.3s ease;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display:hover {
  border-color: #4CAF50;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display .file-input-icon {
  width: 50px;
  height: 50px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display .file-input-icon i {
  font-size: 24px;
  color: #4CAF50;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display .file-input-text {
  flex: 1;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display .file-input-text .file-input-label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}
.create-class-type-page .form-card .class-type-form .form-group .file-input-wrapper .file-input-display .file-input-text .file-input-help {
  font-size: 13px;
  color: #666;
}
.create-class-type-page .form-card .class-type-form .form-group .current-image {
  border-radius: 8px;
  overflow: hidden;
  max-width: 80px;
  margin: 0 auto;
  max-height: 80px;
}
.create-class-type-page .form-card .class-type-form .form-group .current-image img {
  width: 100%;
  height: auto;
  display: block;
}
.create-class-type-page .form-card .class-type-form .form-group .image-preview {
  display: none;
  border-radius: 8px;
  overflow: hidden;
  max-width: 50px;
  max-height: 50px;
}
.create-class-type-page .form-card .class-type-form .form-group .image-preview img {
  width: 100%;
  height: auto;
  display: block;
}
.create-class-type-page .form-card .class-type-form .form-actions {
  display: flex;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}
.create-class-type-page .form-card .class-type-form .form-actions .btn-submit,
.create-class-type-page .form-card .class-type-form .form-actions .btn-cancel {
  flex: 1;
  padding: 15px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.create-class-type-page .form-card .class-type-form .form-actions .btn-submit {
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
.create-class-type-page .form-card .class-type-form .form-actions .btn-submit:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.create-class-type-page .form-card .class-type-form .form-actions .btn-cancel {
  background: #f44336;
  color: white;
}
.create-class-type-page .form-card .class-type-form .form-actions .btn-cancel:hover {
  background: rgb(234.1839622642, 27.9622641509, 12.8160377358);
}

@media (max-width: 768px) {
  .class-types-page {
    padding: unset;
    background-color: unset;
    box-shadow: unset;
  }
  .class-types-page .class-types-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .class-types-page .class-types-label .btn-add {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .class-types-page .class-types-grid {
    grid-template-columns: 1fr;
  }
  .create-class-type-page {
    padding: 0px;
    box-shadow: unset;
    background-color: unset;
  }
  .create-class-type-page .form-card .class-type-form {
    padding: 20px;
  }
  .create-class-type-page .form-card .class-type-form .form-actions {
    flex-direction: column;
  }
}
.schedule-management-page {
  padding: 20px;
  border-radius: 10px;
  background-color: #232935;
}
.schedule-management-page .page-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: flex-start;
}
.schedule-management-page .page-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
  font-weight: 700;
  color: #78A0F7;
  display: flex;
  gap: 12px;
}
.schedule-management-page .page-header h1 i {
  color: #4CAF50;
}
.schedule-management-page .page-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}
.schedule-management-page .page-header .btn.btn-primary {
  box-sizing: border-box;
  background: #4CAF50;
  color: white;
}
.schedule-management-page .page-header .btn.btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateX(-3px);
}
.schedule-management-page .page-header .btn.btn-secondary {
  background: white;
  color: #333;
}
.schedule-management-page .page-header .btn.btn-secondary:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}
.schedule-management-page .info-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.schedule-management-page .info-card .info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f8f9fa;
}
.schedule-management-page .info-card .info-header i {
  font-size: 20px;
  color: #4CAF50;
}
.schedule-management-page .info-card .info-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  border: none;
}
.schedule-management-page .info-card .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.schedule-management-page .info-card .info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.schedule-management-page .info-card .info-grid .info-item .info-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  font-weight: 600;
}
.schedule-management-page .info-card .info-grid .info-item .info-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.schedule-management-page .info-card .info-warning {
  margin-top: 20px;
  padding: 12px 15px;
  background: rgba(255, 152, 0, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(127.5, 76, 0);
}
.schedule-management-page .info-card .info-warning i {
  font-size: 18px;
  color: #ff9800;
}
.schedule-management-page .edit_schdule_container {
  border-radius: 12px !important;
}
.schedule-management-page .form-container {
  background: white;
  border-radius: 0px 0px 12px 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.schedule-management-page .form-container .form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #4CAF50;
}
.schedule-management-page .form-container .form-header i {
  font-size: 20px;
  color: #4CAF50;
}
.schedule-management-page .form-container .form-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  border: none;
}
.schedule-management-page .form-container .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}
.schedule-management-page .form-container .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule-management-page .form-container .form-grid .form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.schedule-management-page .form-container .form-grid .form-group label i {
  color: #4CAF50;
  width: 16px;
}
.schedule-management-page .form-container .form-grid .form-group label .required {
  color: #f44336;
  margin-left: 2px;
}
.schedule-management-page .form-container .form-grid .form-group input,
.schedule-management-page .form-container .form-grid .form-group select,
.schedule-management-page .form-container .form-grid .form-group textarea {
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background: white;
  transition: border-color 0.3s ease;
}
.schedule-management-page .form-container .form-grid .form-group input:focus,
.schedule-management-page .form-container .form-grid .form-group select:focus,
.schedule-management-page .form-container .form-grid .form-group textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.schedule-management-page .form-container .form-grid .form-group input:disabled,
.schedule-management-page .form-container .form-grid .form-group select:disabled,
.schedule-management-page .form-container .form-grid .form-group textarea:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}
.schedule-management-page .form-container .form-grid .form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.schedule-management-page .form-container .form-grid .form-group .form-hint {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}
.schedule-management-page .form-container .form-grid .form-group .form-hint i {
  font-size: 11px;
}
.schedule-management-page .form-container .form-grid .form-group .form-error {
  font-size: 12px;
  color: #f44336;
  display: flex;
  align-items: center;
  gap: 5px;
}
.schedule-management-page .form-container .form-grid .form-group .form-error i {
  font-size: 11px;
}
.schedule-management-page .form-container .form-actions {
  display: flex;
  gap: 15px;
  padding-top: 25px;
  border-top: 1px solid #e0e0e0;
}
.schedule-management-page .form-container .form-actions button, .schedule-management-page .form-container .form-actions a,
.schedule-management-page .form-container .form-actions .btn {
  flex: 1;
  padding: 15px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: Roboto;
  transition: all 0.3s ease;
}
.schedule-management-page .form-container .form-actions button.btn-primary, .schedule-management-page .form-container .form-actions a.btn-primary,
.schedule-management-page .form-container .form-actions .btn.btn-primary {
  background: #4CAF50;
  color: white;
}
.schedule-management-page .form-container .form-actions button.btn-primary:hover, .schedule-management-page .form-container .form-actions a.btn-primary:hover,
.schedule-management-page .form-container .form-actions .btn.btn-primary:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.schedule-management-page .form-container .form-actions button.btn-secondary, .schedule-management-page .form-container .form-actions a.btn-secondary,
.schedule-management-page .form-container .form-actions .btn.btn-secondary {
  background: #2196F3;
  color: white;
}
.schedule-management-page .form-container .form-actions button.btn-secondary:hover, .schedule-management-page .form-container .form-actions a.btn-secondary:hover,
.schedule-management-page .form-container .form-actions .btn.btn-secondary:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.schedule-management-page .form-container .form-actions button.btn-danger, .schedule-management-page .form-container .form-actions a.btn-danger,
.schedule-management-page .form-container .form-actions .btn.btn-danger {
  background: #f44336;
  color: white;
}
.schedule-management-page .form-container .form-actions button.btn-danger:hover, .schedule-management-page .form-container .form-actions a.btn-danger:hover,
.schedule-management-page .form-container .form-actions .btn.btn-danger:hover {
  background: rgb(234.1839622642, 27.9622641509, 12.8160377358);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.schedule-management-page .form-container .form-actions button.btn-outline, .schedule-management-page .form-container .form-actions a.btn-outline,
.schedule-management-page .form-container .form-actions .btn.btn-outline {
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
}
.schedule-management-page .form-container .form-actions button.btn-outline:hover, .schedule-management-page .form-container .form-actions a.btn-outline:hover,
.schedule-management-page .form-container .form-actions .btn.btn-outline:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}
.schedule-management-page .form-container .form-actions button:disabled, .schedule-management-page .form-container .form-actions a:disabled,
.schedule-management-page .form-container .form-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.schedule-management-page .help-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 25px;
  text-align: center;
}
.schedule-management-page .help-card i {
  font-size: 32px;
  color: #666;
  margin-bottom: 10px;
}
.schedule-management-page .help-card h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.schedule-management-page .help-card p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.schedule-list-page .stats-overview {
  background: linear-gradient(135deg, #4CAF50, rgb(60.5577689243, 139.4422310757, 63.7450199203));
  color: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.schedule-list-page .stats-overview .stats-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.schedule-list-page .stats-overview .stats-header i {
  font-size: 16px;
}
.schedule-list-page .stats-overview .stats-header h2 {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 600;
  padding: 0 !important;
  border: none;
}
.schedule-list-page .stats-overview .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.schedule-list-page .stats-overview .stats-grid .stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.schedule-list-page .stats-overview .stats-grid .stat-item .stat-label {
  font-size: 13px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.schedule-list-page .stats-overview .stats-grid .stat-item .stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.schedule-list-page .stats-overview .stats-grid .stat-item .stat-subtitle {
  font-size: 14px;
  opacity: 0.8;
}
.schedule-list-page .filters-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.schedule-list-page .filters-card .filters-form {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
  align-items: end;
}
.schedule-list-page .filters-card .filters-form .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: -webkit-fill-available;
}
.schedule-list-page .filters-card .filters-form .filter-group label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-list-page .filters-card .filters-form .filter-group label i {
  color: #4CAF50;
  font-size: 12px;
}
.schedule-list-page .filters-card .filters-form .filter-group input,
.schedule-list-page .filters-card .filters-form .filter-group select {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.schedule-list-page .filters-card .filters-form .filter-group input:focus,
.schedule-list-page .filters-card .filters-form .filter-group select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.schedule-list-page .filters-card .filters-form .filter-actions {
  display: flex;
  gap: 10px;
}
.schedule-list-page .filters-card .filters-form .filter-actions button,
.schedule-list-page .filters-card .filters-form .filter-actions a {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}
.schedule-list-page .filters-card .filters-form .filter-actions button.btn-filter,
.schedule-list-page .filters-card .filters-form .filter-actions a.btn-filter {
  background: #4CAF50;
  color: white;
}
.schedule-list-page .filters-card .filters-form .filter-actions button.btn-filter:hover,
.schedule-list-page .filters-card .filters-form .filter-actions a.btn-filter:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.schedule-list-page .filters-card .filters-form .filter-actions button.btn-reset,
.schedule-list-page .filters-card .filters-form .filter-actions a.btn-reset {
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
}
.schedule-list-page .filters-card .filters-form .filter-actions button.btn-reset:hover,
.schedule-list-page .filters-card .filters-form .filter-actions a.btn-reset:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}
.schedule-list-page .schedules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}
.schedule-list-page .schedules-grid .schedule-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.schedule-list-page .schedules-grid .schedule-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.schedule-list-page .schedules-grid .schedule-card.cancelled {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.schedule-list-page .schedules-grid .schedule-card.past {
  opacity: 0.8;
}
.schedule-list-page .schedules-grid .schedule-card.past .schedule-header {
  background: linear-gradient(135deg, #757575, #616161);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header {
  position: relative;
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
  color: white;
  padding: 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .status-badge.active {
  background: rgba(76, 175, 80, 0.9);
  color: white !important;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .status-badge.full {
  background: rgba(51, 51, 51, 0.9);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .status-badge.almost-full {
  background: rgba(255, 152, 0, 0.9);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .status-badge.cancelled {
  background: rgba(244, 67, 54, 0.9);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .class-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .class-subtitle {
  font-size: 14px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-header .class-subtitle i {
  font-size: 12px;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  flex: 1;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row i {
  width: 18px;
  color: #4CAF50;
  font-size: 14px;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row strong {
  color: #333;
  font-weight: 600;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row.capacity .capacity-value {
  font-weight: 600;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row.capacity .capacity-value.available {
  color: #4CAF50;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row.capacity .capacity-value.limited {
  color: #ff9800;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row.capacity .capacity-value.full {
  color: #f44336;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details .detail-row.waitlist {
  color: #ff9800;
  font-size: 13px;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn {
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-edit {
  background: #2196F3;
  color: white;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-edit:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-delete {
  background: #f44336;
  color: white;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-delete:hover {
  background: rgb(234.1839622642, 27.9622641509, 12.8160377358);
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-view {
  grid-column: 1/-1;
  background: #f8f9fa;
  color: #333;
}
.schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-view:hover {
  background: rgb(233.125, 236.25, 239.375);
}
.schedule-list-page .empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 12px;
}
.schedule-list-page .empty-state i {
  font-size: 14px;
  color: white;
}
.schedule-list-page .empty-state .fass {
  font-size: 32px;
  color: #666;
}
.schedule-list-page .empty-state h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}
.schedule-list-page .empty-state p {
  color: #666;
  margin-bottom: 25px;
  font-size: 15px;
}
.schedule-list-page .empty-state .btn-create {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.schedule-list-page .empty-state .btn-create:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
  transform: translateY(-2px);
}

.delete-schedule-page .warning-banner {
  background: linear-gradient(135deg, #f44336, rgb(234.1839622642, 27.9622641509, 12.8160377358));
  color: white;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.delete-schedule-page .warning-banner .warning-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.delete-schedule-page .warning-banner .warning-header i {
  font-size: 28px;
}
.delete-schedule-page .warning-banner .warning-header h2 {
  margin: 0 !important;
  font-size: 22px;
  font-weight: 600;
}
.delete-schedule-page .warning-banner .warning-message {
  background: rgba(255, 255, 255, 0.2);
  padding: 12px 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.delete-schedule-page .warning-banner .warning-message i {
  font-size: 18px;
}
.delete-schedule-page .schedule-preview {
  margin: 0 auto 25px auto;
}
.delete-schedule-page .schedule-preview .schedule-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.delete-schedule-page .schedule-preview .schedule-card .card-header {
  position: relative;
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
  color: white;
  padding: 20px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-schedule-page .schedule-preview .schedule-card .card-header .delete-badge {
  z-index: 100;
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(244, 67, 54, 0.9);
  backdrop-filter: blur(10px);
}
.delete-schedule-page .schedule-preview .schedule-card .card-header img {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
}
.delete-schedule-page .schedule-preview .schedule-card .card-header h2 {
  margin: 0 !important;
  border: none;
  font-size: 26px;
  font-weight: 700;
}
.delete-schedule-page .schedule-preview .schedule-card .card-body {
  padding: 25px;
}
.delete-schedule-page .schedule-preview .schedule-card .card-body .details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.delete-schedule-page .schedule-preview .schedule-card .card-body .details-list .detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #333;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}
.delete-schedule-page .schedule-preview .schedule-card .card-body .details-list .detail-item i {
  width: 20px;
  color: #4CAF50;
  font-size: 16px;
}
.delete-schedule-page .cannot-delete-card {
  background: #f8f9fa;
  border: 2px solid #f44336;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 25px;
  gap: 0px;
  align-items: unset;
}
.delete-schedule-page .cannot-delete-card i {
  font-size: 15px;
  color: #f44336;
}
.delete-schedule-page .cannot-delete-card .fass {
  font-size: 32px !important;
}
.delete-schedule-page .cannot-delete-card h3 {
  color: #f44336;
  font-size: 22px;
  margin-bottom: 15px;
}
.delete-schedule-page .cannot-delete-card p {
  color: rgb(234.1839622642, 27.9622641509, 12.8160377358);
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0px;
}
.delete-schedule-page .cannot-delete-card p strong {
  font-weight: 600;
}
.delete-schedule-page .cannot-delete-card .action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.delete-schedule-page .cannot-delete-card .action-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.delete-schedule-page .cannot-delete-card .action-buttons .btn.btn-back {
  background: #4CAF50;
  color: white;
}
.delete-schedule-page .cannot-delete-card .action-buttons .btn.btn-back:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.delete-schedule-page .cannot-delete-card .action-buttons .btn.btn-cancel-class {
  background: #ff9800;
  color: white;
}
.delete-schedule-page .cannot-delete-card .action-buttons .btn.btn-cancel-class:hover {
  background: rgb(204, 121.6, 0);
}
.delete-schedule-page .confirmation-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  border: none;
  gap: none;
  align-items: unset;
  flex-direction: column;
}
.delete-schedule-page .confirmation-card .confirmation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f44336;
}
.delete-schedule-page .confirmation-card .confirmation-header i {
  font-size: 24px;
  color: #f44336;
}
.delete-schedule-page .confirmation-card .confirmation-header h2 {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.delete-schedule-page .confirmation-card .confirmation-content {
  margin-bottom: 25px;
}
.delete-schedule-page .confirmation-card .confirmation-content p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}
.delete-schedule-page .confirmation-card .confirmation-content ul {
  list-style: none;
  padding: 0;
  margin: 0 !important;
}
.delete-schedule-page .confirmation-card .confirmation-content ul li {
  padding: 10px 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 5px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}
.delete-schedule-page .confirmation-card .confirmation-content ul li::before {
  content: "•";
  color: #f44336;
  font-size: 20px;
  font-weight: bold;
}
.delete-schedule-page .confirmation-card .confirmation-content .success-note {
  margin-top: 20px;
  padding: 10px 15px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(45.1155378486, 103.8844621514, 47.4900398406);
}
.delete-schedule-page .confirmation-card .confirmation-content .success-note i {
  font-size: 18px;
  color: #4CAF50;
}
.delete-schedule-page .confirmation-card .form-container {
  background: unset !important;
  border-radius: unset !important;
  padding: 0 !important;
  box-shadow: unset !important;
}
.delete-schedule-page .confirmation-card .form-container .form-actions {
  border: none !important;
  padding: 0 !important;
}

@media (max-width: 992px) {
  .schedule-management-page .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .schedule-management-page .page-header .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .schedule-management-page .page-header .header-actions {
    width: 100%;
    justify-content: end;
  }
  .schedule-list-page .filters-card .filters-form {
    grid-template-columns: 1fr;
    flex-wrap: wrap;
  }
  .schedule-list-page .filters-card .filters-form .filter-actions {
    justify-content: stretch;
  }
  .schedule-list-page .filters-card .filters-form .filter-actions button,
  .schedule-list-page .filters-card .filters-form .filter-actions a {
    flex: 1;
  }
  .schedule-list-page .schedules-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .schedule-management-page {
    padding: 0;
    background-color: unset;
    box-shadow: unset;
  }
  .schedule-management-page .page-header .header-left h1 {
    font-size: 26px;
  }
  .schedule-management-page .form-container {
    padding: 20px;
  }
  .schedule-management-page .form-container .form-actions {
    flex-direction: column;
  }
  .schedule-management-page .form-container .form-actions button,
  .schedule-management-page .form-container .form-actions .btn {
    width: 100%;
  }
  .schedule-list-page .stats-overview .stats-grid {
    grid-template-columns: 1fr;
  }
  .schedule-list-page .schedules-grid {
    grid-template-columns: 1fr;
  }
  .schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions {
    grid-template-columns: 1fr;
  }
  .schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-actions .btn.btn-view {
    grid-column: 1;
  }
  .delete-schedule-page .cannot-delete-card .action-buttons {
    flex-direction: column;
  }
  .delete-schedule-page .cannot-delete-card .action-buttons .btn {
    width: 100%;
  }
  .delete-schedule-page .confirmation-card .form-actions {
    flex-direction: column;
  }
  .delete-schedule-page .confirmation-card .form-actions button,
  .delete-schedule-page .confirmation-card .form-actions .btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .schedule-management-page .page-header .header-left h1 {
    font-size: 22px;
  }
  .schedule-management-page .info-card .info-grid {
    grid-template-columns: 1fr;
  }
  .schedule-management-page .form-container {
    padding: 15px;
  }
  .schedule-management-page .form-container .form-header h2 {
    font-size: 18px;
  }
  .schedule-list-page .schedules-grid .schedule-card .schedule-header .class-name {
    font-size: 20px;
  }
  .schedule-list-page .schedules-grid .schedule-card .schedule-body .schedule-details {
    gap: 10px;
  }
}
@media print {
  .schedule-management-page .page-header .header-actions,
  .schedule-management-page .form-actions,
  .schedule-management-page .schedule-actions {
    display: none;
  }
  .schedule-management-page .form-container,
  .schedule-management-page .info-card,
  .schedule-management-page .schedule-card {
    box-shadow: none;
    border: 1px solid #e0e0e0;
  }
}
.schedule-tabs {
  display: flex;
  gap: 0;
  background: white;
  border-radius: 12px 12px 0px 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.schedule-tabs .tab-button {
  flex: 1;
  font-family: Roboto;
  padding: 15px 20px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.schedule-tabs .tab-button i {
  font-size: 18px;
}
.schedule-tabs .tab-button:hover {
  color: #4CAF50;
}
.schedule-tabs .tab-button.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
  font-weight: 600;
}
.schedule-tabs .tab-button.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
  background-color: unset;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.days-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.days-selector .day-checkbox {
  position: relative;
}
.days-selector .day-checkbox input[type=checkbox] {
  display: none;
}
.days-selector .day-checkbox label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  background: white;
  color: #333;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.days-selector .day-checkbox label:hover {
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.days-selector .day-checkbox input[type=checkbox]:checked + label {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.monthly-preview {
  background: rgba(76, 175, 80, 0.25);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
}
.monthly-preview h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.monthly-preview h4 i {
  color: #4CAF50;
}
.monthly-preview .preview-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.monthly-preview .preview-dates .preview-date {
  padding: 6px 12px;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.monthly-preview .preview-dates .preview-date.empty {
  color: #666;
  border-style: none;
  background: transparent;
  box-shadow: none;
}

.schedule-summary {
  background: rgba(76, 175, 80, 0.25);
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
}
.schedule-summary h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-summary h4 i {
  color: #4CAF50;
  font-weight: 900;
}
.schedule-summary ul {
  margin: 0;
  padding-left: 0px;
  color: #333;
  list-style: none;
}
.schedule-summary ul li {
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  font-weight: 500;
}
.schedule-summary ul li strong {
  color: #4CAF50 !important;
}

.pattern-select,
.date-input,
.number-input {
  max-width: 500px;
}

.number-input {
  max-width: 200px;
}

.date-input {
  max-width: 300px;
}

@media (max-width: 768px) {
  .schedule-tabs .tab-button {
    font-size: 13px;
    padding: 12px 10px;
    flex-direction: column;
    gap: 4px;
  }
  .schedule-tabs .tab-button i {
    font-size: 20px;
  }
  .days-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  .date-range {
    grid-template-columns: 1fr;
  }
  .pattern-select,
  .date-input,
  .number-input {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .schedule-tabs .tab-button {
    font-size: 11px;
    padding: 10px 5px;
  }
  .schedule-tabs .tab-button span {
    display: none;
  }
  .days-selector {
    grid-template-columns: 1fr;
  }
  .days-selector .day-checkbox label {
    padding: 10px;
  }
  .monthly-preview {
    padding: 15px;
  }
  .monthly-preview .preview-dates {
    gap: 6px;
  }
  .monthly-preview .preview-dates .preview-date {
    font-size: 12px;
    padding: 5px 10px;
  }
}
.calendar-schedule-page {
  padding: 20px;
}
.calendar-schedule-page .page-header {
  margin-bottom: 20px;
}
.calendar-schedule-page .page-header .header-content h1 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #78A0F7;
  display: flex;
  align-items: center;
  gap: 12px;
}
.calendar-schedule-page .page-header .header-content h1 i {
  color: #4CAF50;
}
.calendar-schedule-page .page-header .header-content p {
  margin: 0;
  color: #666;
  font-size: 15px;
}
.calendar-schedule-page .calendar-container {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.calendar-schedule-page .calendar-container .calendar-header {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 2px solid #dddddd;
}
.calendar-schedule-page .calendar-container .calendar-header h2 {
  margin: 0px !important;
  padding: 0px !important;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  border: none;
}
.calendar-schedule-page .calendar-container .calendar-header .nav-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #dddddd;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s ease;
}
.calendar-schedule-page .calendar-container .calendar-header .nav-btn:hover {
  background: #4CAF50;
  color: white;
  transform: scale(1.1);
}
.calendar-schedule-page .calendar-container .calendar-header .nav-btn i {
  font-size: 16px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-weekdays .weekday {
  height: 30px;
  width: 30px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  padding: 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day {
  margin: 0 auto;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  background: white;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .day-number {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .class-indicator {
  width: 6px;
  height: 6px;
  background: #4CAF50;
  border-radius: 50%;
  position: absolute;
  bottom: 8px;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.other-month .day-number {
  color: #ccc;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.other-month {
  cursor: default;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.today {
  border-color: #2196F3;
  background: rgba(33, 150, 243, 0.05);
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.today .day-number {
  color: #2196F3;
  font-weight: 700;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.has-classes:hover {
  background: rgba(76, 175, 80, 0.05);
  border-color: #4CAF50;
  transform: scale(1.05);
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.selected {
  background: #4CAF50;
  border-color: #4CAF50;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.selected .day-number {
  color: white;
  font-weight: 700;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day.selected .class-indicator {
  background: white;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day:not(.has-classes):not(.other-month) {
  cursor: default;
  opacity: 0.6;
}
.calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day:not(.has-classes):not(.other-month):hover {
  transform: none;
}
.calendar-schedule-page .calendar-container .calendar-legend {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  flex-wrap: wrap;
}
.calendar-schedule-page .calendar-container .calendar-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.calendar-schedule-page .calendar-container .calendar-legend .legend-item .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.calendar-schedule-page .calendar-container .calendar-legend .legend-item .legend-dot.available {
  background: #4CAF50;
}
.calendar-schedule-page .calendar-container .calendar-legend .legend-item .legend-dot.selected {
  background: #4CAF50;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #4CAF50;
}
.calendar-schedule-page .calendar-container .calendar-legend .legend-item .legend-dot.today {
  background: white;
  border: 2px solid #2196F3;
}
.calendar-schedule-page .classes-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.calendar-schedule-page .classes-section .classes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #dddddd;
  flex-wrap: wrap;
  gap: 15px;
}
.calendar-schedule-page .classes-section .classes-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}
.calendar-schedule-page .classes-section .classes-header h3 i {
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-header h3 #selected-date-display {
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-header .filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-schedule-page .classes-section .classes-header .filter-buttons .filter-btn {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}
.calendar-schedule-page .classes-section .classes-header .filter-buttons .filter-btn i {
  font-size: 14px;
}
.calendar-schedule-page .classes-section .classes-header .filter-buttons .filter-btn:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-header .filter-buttons .filter-btn.active {
  background: #4CAF50;
  border-color: #4CAF50;
  color: white;
}
.calendar-schedule-page .classes-section .classes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}
.calendar-schedule-page .classes-section .classes-list .class-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.calendar-schedule-page .classes-section .classes-list .class-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15px;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-info {
  flex: 1;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-info .class-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-info .class-type {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-info .class-type i {
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-status {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-status.available {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-status.limited {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-header .class-status.full {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-details .detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-details .detail-row i {
  width: 16px;
  color: #4CAF50;
  font-size: 13px;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-details .detail-row strong {
  color: #333;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer {
  display: flex;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-book {
  background: #4CAF50;
  color: white;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-book:hover {
  background: rgb(60.5577689243, 139.4422310757, 63.7450199203);
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-book:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-details {
  background: #2196F3;
  color: white;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-details:hover {
  background: rgb(11.5384615385, 124.0384615385, 213.4615384615);
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-waitlist {
  background: #ff9800;
  color: white;
}
.calendar-schedule-page .classes-section .classes-list .class-card .class-footer .btn.btn-waitlist:hover {
  background: rgb(204, 121.6, 0);
}
.calendar-schedule-page .classes-section .loading-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}
.calendar-schedule-page .classes-section .loading-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #4CAF50;
}
.calendar-schedule-page .classes-section .loading-state p {
  margin: 0;
  font-size: 16px;
}
.calendar-schedule-page .classes-section .no-classes {
  text-align: center;
  padding: 20px 20px;
  background: #dddddd;
  border-radius: 12px;
}
.calendar-schedule-page .classes-section .no-classes i {
  font-size: 32px;
  color: #666;
  margin-bottom: 20px;
  opacity: 0.5;
}
.calendar-schedule-page .classes-section .no-classes h3 {
  font-size: 16px;
  color: #333;
  margin: 0px;
}
.calendar-schedule-page .classes-section .no-classes p {
  color: #666;
  font-size: 15px;
}

@media (max-width: 768px) {
  .calendar-schedule-page {
    padding: 15px;
  }
  .calendar-schedule-page .calendar-container {
    padding: 20px;
  }
  .calendar-schedule-page .calendar-container .calendar-header h2 {
    font-size: 20px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-weekdays .weekday {
    font-size: 12px;
    padding: 8px 0;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days {
    gap: 5px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .day-number {
    font-size: 14px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .class-indicator {
    width: 5px;
    height: 5px;
    bottom: 5px;
  }
  .calendar-schedule-page .classes-section {
    padding: 20px;
  }
  .calendar-schedule-page .classes-section .classes-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .calendar-schedule-page .classes-section .classes-header .filter-buttons {
    width: 100%;
  }
  .calendar-schedule-page .classes-section .classes-header .filter-buttons .filter-btn {
    flex: 1;
  }
  .calendar-schedule-page .classes-section .classes-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .calendar-schedule-page .page-header .header-content h1 {
    font-size: 24px;
  }
  .calendar-schedule-page .calendar-container {
    padding: 15px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-weekdays .weekday {
    font-size: 10px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days {
    gap: 10px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day {
    padding: 5px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .day-number {
    font-size: 12px;
  }
  .calendar-schedule-page .calendar-container .calendar-grid .calendar-days .calendar-day .class-indicator {
    width: 4px;
    height: 4px;
    bottom: 3px;
  }
}
/* Page Layout */
.delete-class-type-page {
  padding: 20px;
  background-color: #232935;
}

/* Page Header */
.page-header {
  margin-bottom: 20px;
}
.page-header h1 {
  font-size: 16px;
  font-weight: 700;
  color: #78A0F7;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
}
.page-header h1 i {
  color: #f44336;
}
.page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.page-header .breadcrumb a {
  color: #4CAF50;
  text-decoration: none;
}
.page-header .breadcrumb a:hover {
  text-decoration: underline;
}
.page-header .breadcrumb i {
  font-size: 10px;
  color: #ccc;
}

/* Preview Card */
.preview-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 25px;
}
.preview-card .preview-header {
  background: #f8f9fa;
  padding: 15px 25px;
}
.preview-card .preview-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  border: none;
}
.preview-card .preview-body {
  padding: 25px;
  display: flex;
  gap: 25px;
}

/* Preview Image */
.preview-image {
  background: linear-gradient(135deg, #4CAF50, rgb(52.8366533865, 121.6633466135, 55.6175298805));
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}
.preview-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.preview-image .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-image .no-image i {
  font-size: 40px;
  color: #ccc;
}

/* Preview Info */
.preview-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-info .info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.preview-info .info-row.warning-row .info-label {
  color: #e65100;
}
.preview-info .info-row.warning-row .info-label i {
  color: #e65100;
}
.preview-info .info-row.warning-row .warning-value {
  color: #e65100 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.preview-info .info-label {
  min-width: 140px;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.preview-info .info-label i {
  color: #4CAF50;
  width: 14px;
}
.preview-info .info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* Status Badges */
.status-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.active {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}
.status-badge.inactive {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}

/* Cannot Delete Card */
.cannot-delete-card {
  background: white;
  border: 1px solid #ffcdd2;
  border-left: 4px solid #f44336;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cannot-delete-card .cannot-delete-icon {
  width: 50px;
  height: 50px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cannot-delete-card .cannot-delete-icon i {
  font-size: 24px;
  color: #f44336;
}
.cannot-delete-card .cannot-delete-content {
  flex: 1;
}
.cannot-delete-card .cannot-delete-content h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #c62828;
}
.cannot-delete-card .cannot-delete-content p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}
.cannot-delete-card .cannot-delete-content p strong {
  color: #333;
  font-weight: 600;
}
.cannot-delete-card .cannot-delete-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Confirmation Card */
.confirmation-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.confirmation-card .confirmation-content {
  flex: 1;
}
.confirmation-card .confirmation-content h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
  text-align: center;
}
.confirmation-card .confirmation-content p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.confirmation-card .confirmation-content p strong {
  color: #333;
  font-weight: 600;
}
.confirmation-card .confirmation-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: none;
  transition: all 0.3s ease;
}
.btn i {
  font-size: 13px;
}
.btn.btn-secondary {
  font-size: 15px;
  background: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
}
.btn.btn-secondary:hover {
  background: #e0e0e0;
}
.btn.btn-primary {
  font-size: 15px;
  background: #4CAF50;
  color: white;
}
.btn.btn-primary:hover {
  background: rgb(63.6462151394, 146.5537848606, 66.9960159363);
}
.btn.btn-danger {
  font-size: 15px;
  background: #f44336;
  color: white;
}
.btn.btn-danger:hover {
  background: rgb(242.6768867925, 44.3867924528, 29.8231132075);
  transform: scale(1.02);
}
.btn.btn-danger:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 768px) {
  .delete-class-type-page {
    padding: 15px;
  }
  .page-header h1 {
    font-size: 24px;
  }
  .preview-card .preview-body {
    flex-direction: column;
    padding: 20px;
  }
  .preview-card .preview-body .preview-image {
    width: 80px;
    height: 80px;
  }
  .cannot-delete-card,
  .confirmation-card {
    flex-direction: column;
    padding: 20px;
  }
  .cannot-delete-card .confirmation-content h3, .cannot-delete-card .confirmation-content p,
  .confirmation-card .confirmation-content h3,
  .confirmation-card .confirmation-content p {
    text-align: center;
  }
  .cannot-delete-card .cannot-delete-icon,
  .cannot-delete-card .confirmation-icon,
  .confirmation-card .cannot-delete-icon,
  .confirmation-card .confirmation-icon {
    width: 45px;
    height: 45px;
    display: none;
  }
  .cannot-delete-card .cannot-delete-icon i,
  .cannot-delete-card .confirmation-icon i,
  .confirmation-card .cannot-delete-icon i,
  .confirmation-card .confirmation-icon i {
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  .preview-info .info-row {
    flex-direction: column;
    gap: 4px;
  }
  .preview-info .info-row .info-label {
    min-width: unset;
  }
  .cannot-delete-actions,
  .confirmation-actions {
    flex-direction: column;
    width: 100%;
  }
  .cannot-delete-actions .btn,
  .confirmation-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto;
  display: flex;
  background-color: #191D24;
  min-height: 100vh;
}

.safe-area {
  padding-top: constant(safe-area-inset-top, 10px); /* Legacy iOS fallback */
  padding-top: env(safe-area-inset-top, 10px); /* Modern iOS + fallback */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media only screen and (max-width: 640px) {
  body {
    height: calc(var(--vh, 1vh) * 100) !important;
    flex-direction: column;
  }
  body .Dashboard {
    margin-top: 67px;
    width: 100%;
  }
}
html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}/*# sourceMappingURL=style.css.map */