.mts-navigation{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.btn-mts-nav{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#eff6ff;
    color:#2563eb;
    transition:.2s;
}

.btn-mts-nav:hover{
    background:#2563eb;
    color:white;
}

.nav-title{
    min-width:220px;
    text-align:center;
    background:white;
    padding:10px 18px;
    border-radius:14px;
    font-size:18px;
    font-weight:700;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.text-pink{
    color:#e83e8c;
}

.class-card{
    border-radius:18px;
}

.modal-content{
    border-radius:0;
}

.modal-header{
    padding:1.2rem 1.5rem;
}

.sticky-top{
    z-index:10;
}

.card{
    border-radius:14px;
}

.btn{
    border-radius:10px;
}

.input-group-text{
    border-radius:10px 0 0 10px;
}

.form-control{
    border-radius:0 10px 10px 0;
}

.page-title{
    font-weight:700;
    color:#1e293b;
}
.class-card{
    border-radius:18px;
    transition:all .2s ease;
}

.class-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,.12)!important;
}

.text-pink{
    color:#e83e8c;
}

.progress{
    border-radius:20px;
    overflow:hidden;
}

.card-header{
    border-top-left-radius:18px!important;
    border-top-right-radius:18px!important;
}

.dropdown-menu{
    border-radius:12px;
    border:none;
    box-shadow:0 5px 20px rgba(0,0,0,.1);
}



.offcanvas{
    position:fixed;
    top:0;
    right: -100%;

    height: 100%;
    height:100%;
    background:#fff;
    z-index:9999;
    transition:.3s;
    box-shadow:-5px 0 25px rgba(0,0,0,.1);
  
}
.offcanvasAbsensi{
    width:75%;
     overflow-y:hidden;
}
.offcanvasStudent{
    width:550px;
	  overflow-y:auto;
}
.offcanvas.show{
    right:0;
}
.offcanvas-close{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:none;
}

.offcanvas-close i{
    font-size:14px;
}
.offcanvas-header{
    padding:1rem 1.2rem;
    background:#fff;
    position:sticky;
    top:0;
    z-index:10;
}

.offcanvas-body{
    padding:1rem;
    background:#f8f9fa;
    min-height:100%;
}

/* TIMELINE */
.timeline{
    position:relative;
    padding-left:20px;
}

.timeline:before{
    content:'';
    position:absolute;
    left:15px;
    top:0;
    width:2px;
    height:100%;
    background:#dee2e6;
}

.timeline-item{
    position:relative;
    padding-left:40px;
    margin-bottom:25px;
}

.timeline-icon{
    position:absolute;
    left:-5px;
    top:0;
    width:40px;
    height:40px;
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

.timeline-content{
    background:#fff;
    padding:12px 15px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.table td{
    vertical-align:middle;
}

.card{
    border-radius:14px;
}

.btn{
    border-radius:10px;
}

.wizard-card {
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    .wizard-header {
      background: linear-gradient(135deg, #16a34a, #15803d);
      color: white;
      padding: 24px;
    }

    .wizard-step {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      flex: 1;
    }

    .wizard-step .circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #d1d5db;
      color: #6b7280;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      margin-bottom: 2px;
      transition: .3s;
    }

    .wizard-step.active .circle,
    .wizard-step.done .circle {
      background: #16a34a;
      color: white;
    }

    .wizard-step .label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-align: center;
    }

    .wizard-step.active .label,
    .wizard-step.done .label {
      color: #16a34a;
    }

    .wizard-line {
      height: 4px;
      background: #d1d5db;
      flex: 1;
      margin: 0 10px;
      margin-top: -28px;
    }

    .wizard-line.active {
      background: #16a34a;
    }
.step-content{
    width:100%;
}
    .step-content {
      display: none;
      animation: fadeIn .3s ease;
    }

    .step-content.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

  .preview-img{

    width:100%;
    height:220px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #ddd;

    cursor:pointer;

    transition:.2s;

}

.preview-img:hover{

    transform:scale(1.02);

}