/* -----------------------------------------------------------------------------------

    Template Name: JCustom
    Template URI: http://admin.pixelstrap.com/cuba/theme
    Description: This is Admin theme
    Author: Pixelstrap
    Author URI: https://themeforest.net/user/pixelstrap

  -----------------------------------------------------------------------------------
  */

  :root {
  --container:66%;
  }

  .custab-border tr:nth-of-type(2n+2){background:#F5F5F5}
.card-header .btx{padding:10px 1rem}
.card-header h4{margin:0;font-size:1.2rem}
.filter-form button{justify-content:center}
.filter-form{margin:0 0 2rem}

.card-alt{border-radius:1rem;padding:2rem;grid-gap:1rem;display:grid}
.card-alt .card-body{padding:0}
.card-alt .card-body table{border-radius:10px;}
.card-alt .card-header{padding:0}

#addPackageModal{max-width:50rem}
.form-group-inline{flex-direction:row;grid-gap:1rem;align-items:center}
.form-group-inline label{margin:0;width:50%}
.form-group-inline input,.form-group-inline textarea,.form-group-inline select,.form-group-inline .form-icon{font-family: var(--font-body);width:100%;border:1px solid #4c75cf99;background:#f0f5ff99}
.form-group-inline .form-icon input{border:0}
.form-group-inline input:disabled{background:#d1e0ff;color:#222}

#saveBtn{display:inline-flex;align-items:center;grid-gap:7px}
.loop-member{display:grid;grid-gap: 1rem;grid-template-columns:repeat(2,1fr);margin:1rem 0}
.date-list form button{padding:1rem 1.2rem!important}
.w-date{padding:10px 20px}
.date-list form .has-schedule{box-shadow:0 7px 0 0 var(--color-info) inset;}
.date-list-member form .has-schedule{box-shadow:0 7px 0 0 var(--color-main) inset}
.item-widget-member.package-box{background: #f4ffe1;}
    .schedule-list{padding:2rem 0}
.col-form-label small{font-size:12px;color:red}
    .header-single-class{padding:2rem;border-radius: 8px;}
.header-single-class h2{margin:0}
.header-single-class h3{margin:0;font-size:1.8rem;font-weight:700;color:#fff}
.flex-info-class{margin:1.5rem 0 0;display:flex;align-items:center;grid-gap:2rem}
.flex-info-class .item-info-class{color:#fff9;margin:;font-size:17px}
.card-plain{border:0;border-radius:10px;overflow:hidden;padding: 7px;}
.body-single-class{padding:1rem 2rem}
.body-single-class #member-list{margin:0}
.member-item{padding:15px 0;display:flex;justify-content:space-between;border-bottom:1px solid #01010126;align-items:center}
.foot-single-class{display:flex;align-items:center;grid-gap:1rem;padding:0 2rem 1.5rem}
#finish-class-btn{font-size:19px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
#finish-class-btn:hover{background:var(--color-main);color:#fff}
.btx-big{font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}

.links{display:flex;align-items:center;justify-content:center;grid-gap:1rem}
.btx-plain{padding:0;border:0}
.links a{border-right:1px solid #828282;border-radius:0;padding-right:1rem;color:#828282}
.links a:last-child{padding:0;border:0}
.form-group input:read-only{background:#0101010f}

  .menu-home{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem}
  .menu-home a{position: relative;overflow: hidden;background:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:1rem;padding:2rem;font-size:18px;color:#222;box-shadow:0 0 20px -5px #0101010a;transition:all .3s ease-in-out}
  .menu-home a svg{width:3.5rem;height:3.5rem;color:var(--color-main);z-index: 2;}
  .menu-home a:hover svg{color:#fff}
  .menu-home a:after{content:"";background:var(--color-main);height:0;transition:all .3s ease-in-out;position:absolute;bottom:0;left:0;width:100%;z-index:1}
  .menu-home a:hover:after{height:100%}
  .menu-home a span{z-index:2}
  .menu-home a:hover span{color:#fff}

  .menu-home a.last-child {position: relative;overflow: hidden;background: #ffe4de;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:1rem;padding:2rem;font-size:18px;color:#ff0000;box-shadow:0 0 20px -5px #0101010a;transition:all .3s ease-in-out}
  .menu-home a.last-child svg{width:3.5rem;height:3.5rem;color:var(--color-danger);z-index: 2;}
  .menu-home a.last-child:hover svg{color:#fff}
  .menu-home a.last-child:after {content:"";background:var(--color-danger);height:0;transition:all .3s ease-in-out;position:absolute;bottom:0;left:0;width:100%;z-index:1}
  .menu-home a.last-child:hover:after {height:100%}
  .menu-home a.last-child span{z-index:2}
  .menu-home a.last-child:hover span{color: #fff}

  .menu-home-admin a.last-child {position: relative;overflow: hidden;background: #ffe4de;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:1rem;padding:2rem;font-size:18px;color:#ff0000;box-shadow:0 0 20px -5px #0101010a;transition:all .3s ease-in-out}
  .menu-home-admin a.last-child svg{width:3.5rem;height:3.5rem;color:var(--color-danger);z-index: 2;}
  .menu-home-admin a.last-child:hover svg{color:#fff}
  .menu-home-admin a.last-child:after {content:"";background:var(--color-danger);height:0;transition:all .3s ease-in-out;position:absolute;bottom:0;left:0;width:100%;z-index:1}
  .menu-home-admin a.last-child:hover:after {height:100%}
  .menu-home-admin a.last-child span{z-index:2}
  .menu-home-admin a.last-child:hover span{color: #fff}

  .menu-home-admin{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem}
  .menu-home-admin a{position: relative;overflow: hidden;background:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:1rem;padding:2rem;font-size:18px;color:#222;box-shadow:0 0 20px -5px #0101010a;transition:all .3s ease-in-out}
  .menu-home-admin a svg{width:3.5rem;height:3.5rem;color:var(--color-info);z-index: 2;}
  .menu-home-admin a:hover svg{color:#fff}
  .menu-home-admin a:after{content:"";background:var(--color-info);height:0;transition:all .3s ease-in-out;position:absolute;bottom:0;left:0;width:100%;z-index:1}
  .menu-home-admin a:hover:after{height:100%}
  .menu-home-admin a span{z-index:2}
  .menu-home-admin a:hover span{color:#fff}
  .card-wrap{background:#fff;border-radius:10px;box-shadow:0 0 20px -5px #0101010a;overflow:hidden;padding:1.5rem}
  .greeting{display:flex;align-items:start;grid-gap:2rem;border-bottom: 1px solid rgba(1, 1, 1, 0.11);padding-bottom: 1rem;}
  .greeting-photo img{border-radius:1rem;width:85px;height: 85px;object-fit: cover;}
  .greeting-text h2{margin:0}
  .greeting-text p{width:70%;line-height:26px;margin:1rem 0 0}

  .live-clock{display:grid;justify-content:center;text-align:center;background:var(--color-main);border-radius:8px;padding:1rem}
  .live-clock h4{margin:0;color:#fff;font-size:2.5rem}
  .live-clock span{color:#ffffffdb;font-size:16px;margin:7px 0 0}
  .session-item{display:flex;justify-content:space-between}
  .session-list{display:grid;grid-gap:1rem;margin:2rem 0 0}
  .session-info{display:grid;grid-gap:7px;width:100%}
  .session-info b{font-size:14px;font-weight:600}
  .session-info span{display:flex;grid-gap: 9px;align-items: center;}
  
  .badge{color:#fff;padding:5px 10px;border-radius:100px;font-size:12px}
  .badge-private{background:#CF9412}
  .badge-semi { background: var(--color-info); }
  .badge-group { background: var(--color-main); }
  .badge-success { background: var(--color-success); }
  .badge-danger { background: var(--color-danger); }
  .badge-warning { background: var(--color-warning); }
  .badge-expired { background: var(--color-accent); }
  .badge-info { background: var(--color-info); }

  .btx-pending { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
  .btx-pending:hover { color: var(--color-secondary); background: transparent; }

  .app-header-admin { width: 100%; background: var(--color-info); padding: 2rem 0 5.5rem; }

  .bg-admin { background: var(--color-info); }
  .text-admin { color: var(--color-info); fill: var(--color-info); }
  .text-black { color: #222; }
  .bg-admin-hover:hover { background: var(--color-info); }
  .btx-admin { background: var(--color-info); border-color: #fff; color: #fff; }
  .btx-admin:hover { color: #fff; background: #818faf; }
  .btx-link-admin { padding: 0; border: 0; color: var(--color-info); }
  .btx-link-admin:hover { color: #4c659c; text-decoration: underline; }

  /* Auth Pages */
  .login-page {display: flex;height: 100vh;background-color: #f8faf8;}
  .login-left, .login-right {flex: 1;}
  .login-left {display: flex;flex-direction: column;justify-content: space-between;padding: 2rem 4rem;}
  .login-content {margin: auto;width: 60%;}
  .login-content-register {margin: auto;width: 80%;}
  .login-title {font-size: 2.4rem;font-weight: bold;margin-bottom: 0.5rem;}
  .login-subtitle {color: #444;font-size: 0.95rem;margin-bottom: 1.5rem;line-height: 1.4;}
  .login-footer {margin-inline: auto;width: 60%;font-size: 0.8rem;color: #777;}
  .login-footer a {color: inherit;text-decoration: none;}
  .login-right {display: flex;align-items: center;justify-content: center;margin: 20px;}
  .login-right img {width: 100%;height: 100%;object-fit: cover;border-radius: 20px; /* sesuai desain */}

  .d-flex{display: flex;} .flex-1{flex: 1;} .flex-col{flex-direction: column;} .flec {display: flex;align-items: center;justify-content: center;}
  .w-50{ width: 50%; margin: auto;}
  .w-100{width: 100%;}
  .w-97{width: 97% !important; margin: 0 auto;}

  /* margin padding gap */
  .g-05{gap: .30rem;}
  .g-1{gap: 1rem;}
  .g-2{gap: 2rem;}

  .m-0{margin: 0;}
  .mv-5{margin: .50rem 0;}
  .mt-5{margin-top: 2.5rem;}
  .mb-25{margin-bottom: .25rem;}
  .ml-auto{margin-left: auto;}
  .mt-auto{margin-top: auto;}
  .m-auto{margin: auto;}
  .mt-10{margin-top: 1.0rem;}
  .mt-10px{margin-top: 10px;}
  .my-5{margin: 1rem 0;}

  .p-5{padding: 2rem 1rem;}
  .p-2{padding: 0 1.2rem;}
  .p-25{padding: 1rem;}
  .pb-25{padding-bottom: 2.5rem;}
  .pt-0{padding-top: 0px;}
  .pb-0{padding-bottom: 0px;}
  .pv-5{padding-top: .5rem; padding-bottom: .5rem;}
  .pc-btx{padding: 8px 20px !important;}
  .py20{padding: 20px 0 !important;}
  .pt-5{padding-top: 1.3rem;}

  /* text style */
  .fs1{font-size: 1.2rem;}
  .fsmedium{font-size: 1.1rem;}
  .text-start{ text-align: start; align-items: start;}
  .fw-bold{font-weight:500;}
  .text-black{color: #222;}
  .text-white{color: #fff;}
  .text-muted{color: #777;}
  .text-main{color: var(--color-main);}
  .text-info{color: var(--color-info);}
  .text-success{color: var(--color-success);}
  .text-danger{color: var(--color-danger);}
  .text-warning{color: var(--color-warning);}
  .text-accent{color: var(--color-accent);}
  .text-secondary{color: var(--color-secondary);}
  .text-private{color: var(--color-private);}

  .ics-20{width: 20px;height: 15px;}
  
  /* background */
  .bg-white {background: #fff; border-radius: 10px;}

  /* card */
  .card-info {background: var(--color-info) !important; }
    
  /* border */
  .b0{border: 0px !important;}
  .bb0{border-bottom: 0px !important;}
  .b-top-5{border-radius: .50rem;}
  .border-white{border-color:#fff}
  
  /* align / justify */
  .j-center{justify-content: center;}
  .a-center{align-content: center;}
  .af-center{align-items: center;}
  .jf-center{align-content: center;}
  .j-sb{justify-content: space-between;}
  .a-fs{display:flex; align-items:flex-start !important;}
  .a-fe{display:flex; align-items:flex-end !important; justify-content: flex-end;}

  /* Bungkus tabel dengan radius */
  .table-border {border-radius: 10px;overflow: hidden;border: 1px solid #dee2e6;}
  .table-border table {border-collapse: collapse;width: 100%;}
  .table-border thead th {background: #f8f9fa;padding: 20px;border-bottom: 2px solid #dee2e6;}
  .table-border tbody td {padding: 8px 10px;border-top: 1px solid #dee2e6;}

  .custab-border {border-collapse: separate;border-spacing: 0;overflow: hidden;border: 1px solid var(--color-main); margin-bottom: 15px; border-radius: 10px;}
  .custab-border thead th {background: var(--color-main); color: #fff;}
  .radius-1{border-radius: 1rem !important;}

  /* Card Class */
  .item-class{max-width:20rem;margin:0 auto;box-shadow: 0 8px 27px -5px rgba(1, 1, 1, 0.09);width:100%;border:1px solid #01010124;border-radius:7px;display:flex;flex-direction:column;overflow:hidden}
.loop-class{display:grid;grid-gap:2rem;padding: 2rem 0;}
.head-class{display:grid;grid-gap:7px;padding:1rem 1.3rem}
.head-class h3{margin:0;color:#fff}
.bgcard-primary{background:#CF9412}
.bgcard-semi{background:var(--color-info)}
.bgcard-group{background:var(--color-main)}
.time-class{display:flex;align-items:center;grid-gap:7px;color:#ffffffd6}
.time-class svg{width:18px;height:18px}
.body-class{padding:1rem 1.5rem;display:grid;grid-gap:1rem}
.info-class{display:grid;grid-gap:10px}
.item-info-class{display:flex;align-items:center;grid-gap:10px;color:#01010196}
.item-info-class svg{width:18px;height:18px}
.action-class{display:flex;grid-gap: 5px;justify-content:center;margin:10px 0 0;color:#777;padding:10px;border-radius:7px;transition: all .2s ease-in-out;border: 1px solid rgba(1, 1, 1, 0.18);background: rgba(255, 255, 255, 0.04);}
.action-class:hover{color:#fff}
.action-class.semi-hover:hover{background:#cf9412}
.action-class.private-hover:hover{background:var(--color-info)}
.action-class.group-hover:hover{background:var(--color-main)}
.title-class-found{text-align:center;padding:0 1rem}
.title-class-found b{border-bottom:2px solid #4c75cf}
.date-pagination{margin:0 auto}
  .arow-rotate {display: inline-block;}
  .arrow-hov{transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);}
  .arrow-hov:hover {transform: rotate(45deg);}
  .cwhite{color: white;}
.form-public .form-icon input{width:100%!important}
.form-public .form-icon input:focus-within{border:0}

  .btn-cancel{border-radius: 50%; padding:.4rem .5rem;}
  button:disabled {background-color: #ccc;color: #666;cursor: not-allowed;pointer-events: none;border: unset;}

  .dot-pending {
  position: absolute;
  top: 10px;   
  right: 10px; 
  width: 15px;
  height: 15px;
  z-index: 999;
  opacity: 0.8;
  background-color: var(--color-danger);
  border: 1px solid rgba(255, 0, 0, 0.5); 
  border-radius: 50%;

  /* Efek glow/bias */
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.7),
              0 0 10px rgba(255, 0, 0, 0.5);

  /* Animasi pulse */
  animation: pulse 2s infinite;
}
  .btn-dot-pending {
  position: absolute;
  top: 4px;   
  right: 5px; 
  width: 10px;
  height: 10px;
  z-index: 999;
  background-color: var(--color-danger);
  opacity: 0.8;
  border: 1px solid rgba(255, 0, 0, 0.5); 
  border-radius: 50%;

  /* Efek glow/bias */
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.7),
              0 0 6px rgba(255, 0, 0, 0.5);

  /* Animasi pulse */
  animation: pulse 2s infinite;
}




@keyframes pulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.7),
                0 0 6px rgba(255, 0, 0, 0.5);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.9),
                0 0 8px rgba(255, 0, 0, 0.6);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.7),
                0 0 6px rgba(255, 0, 0, 0.5);
  }
}

  .member-checkboxes{max-height:200px;overflow-y:auto;border:1px solid #e9ecef;border-radius:5px;padding:15px;background-color:#f8f9fa}
  .member-checkboxes .form-check{margin-bottom:10px;padding:8px;border-radius:4px;background-color:#fff;border:1px solid #dee2e6}
  .member-checkboxes .form-check:hover{background-color:#e9ecef;border-color:#adb5bd}
  .member-checkboxes .form-check:last-child{margin-bottom:0}
  .form-check-input:checked + .form-check-label{font-weight:600;color:#007bff}

  .form-register .formgroup{margin:0 0 .7rem}
  .form-public .redalert{margin:0 0 1rem}
  .table tbody td{text-align: left;}
  .btx-actions{justify-content:end;grid-gap:7px}

@media (min-width:800px) and (max-width:1400px){
.container{max-width: 80%;}
}

  @media (max-width: 768px) {
    
.action-pending button{padding:1rem!important}
.data-member{display:flex;flex-direction:column}
.form-group-inline{display:flex;flex-direction:column;grid-gap:5px;align-items:start}
.action-pending{display:flex;flex-direction:column}
    .table{overflow-y:scroll;overflow-x:scroll;padding-bottom:7px;display:block}
    .login-right img{height:21rem}
.login-right{margin:0}
.login-left{padding:0}
    .login-page{padding:2rem;flex-direction:column-reverse;height:unset;grid-gap:2rem}
    .login-content{margin:0;width:100%}
.login-footer{width:unset;margin:0!important}
  .menu-home{grid-template-columns:repeat(2,1fr);grid-gap:1rem}
.menu-home a{text-align:center;padding:1.5rem !important;font-size:14px !important}
.menu-home a svg{width:3rem !important;height:3rem !important}
.greeting{flex-direction:column;grid-gap:1rem}
.greeting-text h2{font-size:18px;line-height:26px}
.greeting-text p{width:unset;font-size:14px}
.card-wrap{padding:1rem}
  }


  @media (max-width: 550px) {
  .widget-member{flex-direction:column;grid-gap:7px}  .header-single-class{padding:1.5rem}
.header-single-class h3{font-size:1.4rem}
.foot-single-class-member{flex-direction:column;grid-gap:1rem}
.flex-info-class{margin:1.2rem 0 0;flex-direction:column;align-items:start;grid-gap:1rem}
    .title-class-found{margin:2rem 0 0;font-size:16px;line-height:23px}
.filter-form {
  margin: 0;
}.date-pagination .flex button{padding:7px 1rem!important}
  .date-list form button{padding:1rem 16.5px !important}
.date-list{grid-gap:7px}
.date-pagination .m-0.flex{position:absolute;bottom:-2.5rem;right:51%}
.date-pagination{position:relative;max-width:unset;padding:1rem;width:100%}
.date-pagination .m-0.flex:last-child{right:34%}
    .card-header{flex-direction:column;align-items:start;grid-gap:7px}
.card-header small{font-size:12px;line-height:20px}
.loop-member{grid-template-columns:repeat(1,1fr)}
#member_list p{font-size:14px;line-height:20px}
.body-single-class,.foot-single-class{padding:1rem}
#cancel-class-btn{padding:.7rem 1rem}
#finish-class-btn{font-size:16px}
.foot-single-class{grid-gap:8px}
    .grid-widget{overflow-y:scroll;width:100%;white-space:nowrap;padding-bottom:1rem}
    .action-register{flex-direction:column;grid-gap:1rem;margin:2rem 0 0}
.action-register .btx{width:100%;justify-content:center}
      .login-content , .login-content-register{width: 100%;margin: 0;}
    .keep-split{display:flex;grid-gap:1rem}
    .modal-content .card-body{overflow-y:scroll;height:80vh}
#addPackageModalLabel{font-size:16px}
    .card-alt .card-body{overflow:scroll}
.card-alt{padding:1rem}
    .login-right{margin:0}
.login-right img{height:15rem;border-radius:1rem;object-fit:cover}
.login-title{font-size:2rem}
.login-subtitle{font-size:14px}

.login-content{width:unset}
.login-footer p{line-height:24px}.login-left{padding:0}
    .modal-help{padding:0 15px}
  .page-title{flex-direction:column;margin:2.5rem 0 0;grid-gap:1rem;align-items:center}
  .app-header-admin{padding:1rem 15px 5rem}
  .logo-header img{width:150px !important}
  .page-title h2{font-size:20px;text-align:center;justify-content:center}
  .page-title h2 svg{width:20px;height:20px}
  }

              /* Wrapper pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  list-style: none;
  margin: 20px 0;
}

/* Default li */
.pagination li {
  display: inline-block;
}

/* Link dan span (halaman, prev, next) */
.pagination li a,
.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #e5e7eb; /* abu2 terang */
  border-radius: 8px;
  background: #fff;
  color: #374151; /* abu2 gelap */
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Hover effect */
.pagination li a:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* Aktif (halaman sekarang) */
.pagination li.active span {
  background: var(--color-info);
  border-color: var(--color-info);
  color: #fff;
  cursor: default;
  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}

/* Disabled (prev/next di ujung) */
.pagination li.disabled span {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

/* Responsif untuk mobile */
@media (max-width: 480px) {
  .pagination li a,
  .pagination li span {
    min-width: 30px;
    height: 30px;
    font-size: 13px;
    padding: 0 8px;
  }
}

  li.pg-member.active span{
    background: var(--color-main) !important;
    border-color: var(--color-main) !important;
    box-shadow: 0 2px 6px rgba(37, 235, 93, 0.25);
  }


  .grid-widget {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 0;
    align-items: center;
    text-align: center;
  }
  
  .widget-item span {
    display: block;
    font-size: 14px;
    color: #555;
  }

  .widget-item h2 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-transform: uppercase;
  }

  .widget-member {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0 0;
  align-items: stretch;
}

.item-widget-member {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding: 16px 20px;
  border-radius: 8px;
  align-items: center;
}

.widget-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 7px;
}

.widget-item.text-right {
  align-items: flex-end;
}

.bt-flex{ width: 100%; display: flex; gap: 10px;}