* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background: #fff1eb;
 overflow-x: hidden;
}

a{
    color: #f26c22 ;
    text-decoration: none;
}
/* =========================
   Custom Thin Scrollbar
========================= */


/* Chrome, Edge, Safari */

::-webkit-scrollbar {

    width: 6px;
    height: 6px;

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    background: #ffaa7c;

    border-radius: 20px;

}



::-webkit-scrollbar-thumb:hover {

    background: #ff8e55;

}




/* Firefox */

* {

    scrollbar-width: thin;

    scrollbar-color: #ffba95 transparent;

}
/* SIDEBAR */

.sidebar {
 position: fixed;

 left: 5px;

 top: 5px;

 width: 238px;

 height: calc(100vh - 10px);

 background: #fff;

 border-radius: 8px;

 display: flex;

 flex-direction: column;

 transition: 0.35s ease;

 box-shadow: 0 10px 30px #00000015;

 overflow: hidden;

 z-index: 999;
}

.sidebar.close {
 width: 70px;
}

/* LOGO */

.logo {
 height: 75px;

 display: flex;

 align-items: center;

 justify-content: center;

 gap: 10px;

 border-bottom: 1px solid #eee;
}

.logo img {
 width: 45px;
}

.logo span {
 font-size: 21px;

 font-weight: 700;
}

.sidebar.close .logo span {
 display: none;
}

/* MENU */

.menu {
 flex: 1;

 padding: 15px 10px;

 overflow-y: auto;
}

.menu::-webkit-scrollbar {
 display: none;
}

.menu-item {
 margin-bottom: 8px;
}

.menu-link {
 height: 40px;

 display: flex;

 align-items: center;

 gap: 14px;

 padding: 0 15px;

 color: #212529;

 text-decoration: none;

 border-radius: 12px;

 cursor: pointer;

 transition: 0.3s;

 font-size: 14px;

 font-weight: 500;
}

.menu-link i:first-child {
    width: 14px;
    text-align: center;
    font-size: 15px;
}

.menu-link.active {
 background: linear-gradient(90deg, #ff9a6c, #f26c22);

 color: #fff;
}
.menu-link:hover {
    background: linear-gradient(90deg, #fffaf8, #fbd0b8);
    color: #212529;
}
.sidebar.close .menu-text {
 display: none;
}

.sidebar.close .arrow {
 display: none;
}

/* DROPDOWN */

.arrow {
 margin-left: auto;

 transition: 0.3s;
}

.menu-item.show .arrow {
 transform: rotate(180deg);
}

.submenu {
 max-height: 0;

 overflow: hidden;

 transition: max-height 0.35s ease;
}

.menu-item.show .submenu {
 max-height: 200px;
}

.submenu a {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    color: #565454;
    text-decoration: none;
    font-size: 12px;
    border-radius: 10px;
}

.submenu a:hover {
    background: linear-gradient(90deg, #fffaf8, #fbd0b8);
    color: #555555;
}

/* LOGOUT */

.sidebar-bottom {
 padding: 12px;

 border-top: 1px solid #eee;
}

.logout-btn {
 background: #ef4444;

 color: white !important;
}

.logout-btn:hover {
 background: #dc2626;
}

/* MAIN */

.main {
 margin-left: 247px;

 transition: 0.35s;
}

.main.expand {
 margin-left: 85px;
}
a.sevak-details {
    color: #f36f27;
}
.topbar{
    height: 55px;
    background: #fff;
    margin: 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-shadow: 0 10px 30px #00000010;
    position: sticky;
    top: 0;
    z-index: 1024;

}

.submenu a.active {
    background: linear-gradient(90deg, #ff9a6c, #f26c22);
    color: #fff;
}

.topbar-left{

display:flex;

align-items:center;

}




.toggle-btn{


width:42px;

height:42px;


border:0;

background:#fff;


border-radius:10px;


font-size:20px;


display:flex;

align-items:center;

justify-content:center;


cursor:pointer;

}




.topbar-right{

display:flex;

align-items:center;

gap:5px;

}





/* Notification */


.notify-box{


position:relative;


width:40px;

height:40px;


border:0;


background:#fff3ed;


color:#f2702c;


border-radius:10px;


display:flex;

align-items:center;

justify-content:center;


cursor:pointer;


}



.notify-box span{


position:absolute;


top:-5px;

right:-5px;


width:18px;

height:18px;


background:#ef4444;


color:#fff;


font-size:11px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


}





/* profile */


.profile-box{


display:flex;

align-items:center;

gap:10px;


cursor:pointer;


padding:5px 10px;


border-radius:12px;


transition:.3s;


}



.profile-box:hover{


background:#f8f8f8;


}




.profile-box img{


width:38px;

height:38px;


border-radius:50%;


object-fit:cover;


}



.profile-text h6 {
    margin: 0;
    font-size: 14px;
    line-height: 7px;
}



.profile-text small{


font-size:11px;

color:#888;


}





.profile-arrow{

font-size:12px;

color:#777;

}






/* dropdown */


.notification-dropdown,
.profile-dropdown{


border:0;

border-radius:14px;


padding:8px;


box-shadow:0 15px 35px rgba(0,0,0,.12);


}





.topbar .dropdown-item{


border-radius:10px;


padding:10px 12px;


font-size:14px;


}



.topbar .dropdown-item:hover{


background:#fff1eb;


}








@media(max-width:768px){



.topbar h5{

display:none;

}



.profile-text,
.profile-arrow{


display:none;


}



.topbar-right{


gap:8px;

}


}


@media(max-width:480px){


.notify-box{


width:35px;

height:35px;


}


.profile-box img{


width:32px;

height:32px;


}


}

.account-logout {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-name {
    display: flex;
    gap: 7px;
    align-items: center;
}
.user-det span {
    font-size: 11px;
    color: #767676;
}

.user-det p {
    margin: 0;
    font-size: 13px;
    line-height: 0px;
    font-weight: 500;
}
.user-det {
    margin-top: 14px;
}
.user-prof {
    background: #f9874e;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.user-prof i {
    color: #fff;
}
.profile-text {
    margin-top: 8px;
}
.topbar h5 {
    font-size: 15px;
}
.sidebar.close .user-name{
    display: none;
}
.dash-card {
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px #00000010;
}
.scroll-tble{
 max-height: 300px;
    overflow-y: scroll;
}
.content {
    padding: 8px;
}
table.table tr td {
    font-size: 13px;
    font-weight: 400;
    color: #413f3f;
}
table.table tr th {
    font-size: 14px;
    font-weight: 500;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: none !important;
    background: #f36f27 !important;
    color: #ffffff;
    border-radius: 5px !important;
    padding: 5px 15px;
}
.nav-tabs {
    gap: 10px;
    border: 0;
}
.nav-tabs .nav-link {
    font-size: 13px;
    font-weight: 500;
    background: #f1f1f1 !important;
    color: #f36f27;
    border-radius: 5px !important;
    padding: 5px 15px;
}

.card-header {
    padding: 10px 0;
    font-weight: 500;
    font-size: 17px;
}
.search-box.pay {
    width: 420px;
}
button.search-btn.pay {
    width: auto;
    height: auto;
    border-radius: 25px;
    padding: 5px 17px;
}
tr.heading th {
    background: #f9874e;
    color: #fff;
}
.dash-card-heading h5 {
    font-size: 18px;
}
button.btn.btn-tble {
    height: 38px;
    border-radius: 10px;
    background: #fff2eb;
    color: #f2702c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.fullscreen-card{
    transition:.3s ease;
}

button.btn.btn-tble span {
    font-size: 14px;
    margin-right: 7px;
    font-weight: 500;
}
.fullscreen-card.active-fullscreen{


    position:fixed !important;

    top:0;
    left:0;

    width:100% !important;
    height:100vh !important;


    margin:0 !important;

    border-radius:0 !important;


    z-index:999999;


    background:#fff;


    padding:20px;


}




.active-fullscreen .scroll-tble{

    max-height:calc(100vh - 120px);

    overflow-y:auto;

}



.full-screen{

    width:38px;

    height:38px;


    border-radius:10px;


    background:#fff2eb;

    color:#f2702c;


    display:flex;

    align-items:center;

    justify-content:center;


    cursor:pointer;


}


.full-screen:hover{

    background:#f2702c;

    color:#fff;

}

/* input  */

select#chartFilter {
    font-size: 14px;
}
.form-select:focus {
    border-color: #f26c22;
    outline: 0;
    box-shadow: none;
}
.form-control:focus {
    border-color: #f9874e;
    outline: 0;
    box-shadow: none;
}
label.form-label {
    font-size: 14px;
    margin-bottom: 5px;
}

input.form-control {
    font-size: 14px;
    height: 42px;
    border-radius: 10px;
}
textarea.form-control {
    font-size: 14px;
    border-radius: 10px;
}
select.form-select{
    font-size: 14px;
    border-radius: 10px;
    height: 42px;
}
span.input-group-text {
    font-size: 14px;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #dee2e6 !important;
    height: 42px !important;
    border-radius: 10px 0px 0px 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5c5b5b !important;
}
[type="search"] {
    appearance: textfield;
    outline-offset: 0;
    border-radius: 8px;
}
[type="search"]:focus {
    outline: 0;
    box-shadow: none;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgb(249 135 78) !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}


.select2-container .select2-selection--multiple{
    min-height:38px;
    border:1px solid #dee2e6;
    border-radius:6px;

}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: 12px !important;
}
span.select2-selection.select2-selection--multiple {
    border: 1px solid #dee2e6 !important;
    min-height: 42px !important;
    border-radius: 10px 0px 0px 10px !important;
     overflow:hidden !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 14px !important;
}
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 10px !important;
    margin-left: 12px !important;
    font-family: "Poppins", sans-serif !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff3ed !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-left: 2px !important;
    margin-top: 6px !important;
    padding-left: 19px !important;
}
li.select2-selection__choice.select-count {
    font-size: 14px !important;
}
.monthSelect + .select2-container{
    width:90%!important;
}


.select2-container .select2-selection--multiple{
    min-height:38px!important;
    width:100%!important;
}

.dash-card-heading h5 {
    font-size: 17px;
}
.select2-selection__rendered{
    width:90%!important;
    overflow:hidden;
    white-space:nowrap;
}
/* .select2-selection__choice__remove{
    display:none!important;
} */
/* upload  */


 /* main card */
    .upload-module {
      width: 100%;
      backdrop-filter: blur(0px);
      border: 1px solid rgba(255,255,255,0.6);
      overflow: hidden;
    }
  

    /* Drag & Drop zone — acts as both drop target and preview container */
    .drag-preview-box {
margin: 10px;
    background: #fff9f6;
    border-radius: 1.5rem;
    border: 2px dashed #faae88;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    }

    /* active drag state */
    .drag-preview-box.drag-over {
      background: #f0f7ff;
      border-color: #3b82f6;
      border-style: solid;
      transform: scale(0.99);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), inset 0 1px 4px rgba(0,0,0,0.02);
    }

    /* inner content when NO image */
    .upload-placeholder {
display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding: 14px;
    transition: opacity 0.2s;
    }

 .upload-icon {
    font-size: 36px;
    color: #f9874e;
}
.upload-placeholder h3 {
    font-weight: 600;
    font-size: 16px;
    color: #1e293b;
}

   
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fefefe;
    }

    .preview-img {
    max-height: 150px;
    object-fit: contain;
    display: block;
    border-radius: 1rem;
    transition: all 0.2s ease;
    background: #f8fafc;
    padding: 0.25rem;
    }

    label.file-btn {
    font-size: 12px;
    background: #f9874e;
    color: #ffffff;
    padding: 2px 22px;
    border-radius: 30px;
}
    /* remove button floating on image */
    .remove-single-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(6px);
      color: white;
      border: none;
      border-radius: 40px;
      width: 34px;
      height: 34px;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.18s;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      z-index: 10;
    }

    .remove-single-btn:hover {
      background: #ef4444;
      transform: scale(1.05);
    }

 

    .drag-preview-box:hover .replace-hint {
      opacity: 0.9;
    }

    /* hidden file input */
    #singleFileInput {
      display: none;
    }


    @media (max-width: 520px) {
      .drag-preview-box {
        margin: 1.2rem;
        min-height: 240px;
      }
    }

    /* subtle animation */
    @keyframes gentlePop {
      0% { transform: scale(0.98); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }
    .preview-img {
      animation: gentlePop 0.2s ease-out;
    }



/* ... */

.detail-row{
    display:grid;
    grid-template-columns: 28% 5% 67%;
    padding: 8px 0;
    border-bottom:1px solid #eee;
    font-size:14px;
}

.detail-label {
    color: #1c1c1c;
    font-weight: 500;
}


.detail-colon{
    color:#ff7a00;
    font-weight:600;
}
.detail-value {
    color: #3e3e3e;
}
tr.total td {
    background: #555;
    color: #fff !important;
}
button.btn.isk-primary {
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(90deg, #ff9a6c, #f26c22);
    color: #fff;
}
button.btn.isk-secondary {
    background: #ffe2d3;
    border-radius: 8px;
    border: 1px solid #f9874e;
    font-size: 15px;
    font-weight: 500;
}
.success-icon i{
    font-size:70px;
    color:#28a745;
}
.success-modal{
    border-radius:15px;
    border:0;
}
.success-modal p {
    font-size: 14px;
}
.success-modal h3 {
    font-size: 20px;
}
.success-modal h2 {
    font-size: 17px;
    background: #fff3ed;
    color: #313030;
    display: inline-block;
    padding: 5px 18px;
    border-radius: 8px;
    font-weight: 500;
}
.success-modal h2 span {
    color: #f9874e;
}

.search-box{
    position:relative;
    width:300px;
}


.search-box input{
height: 35px;
    padding-right: 45px;
    border-radius: 25px;
}


.search-btn{

    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #f26c22;
    color: #fff;
        font-size: 12px;
}

/* table  */
img.tble-image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}
td.total-amt, td.user-name {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.quick-action {
    display: flex;
    gap: 5px;
}
.btn.btn-tble-list {
display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 12px;
    color: #fff;
    padding: 8px 8px;
}
button.btn.btn-tble-list.edit {
    background: #f9874e;
}
button.btn.btn-tble-list.view {
    background: #239be7;
}
button.btn.btn-tble-list.delete {
    background: #ef4444;
}
button.btn.btn-tble-list.print {
    background: #02ba48;
}
.trash-icon i {
    font-size: 35px;
    color: #ef4444;
    margin-top: 12px;
}
button.btn.isk-delete {
    background: #ef4444;
    color: white !important;
}
b#mathQuestion {
    font-size: 20px;
    font-weight: 600;
}
@media(max-width:768px){

.detail-row{
    grid-template-columns:40% 5% 55%;
    font-size:13px;
}

}
/* MOBILE */

@media(max-width:768px){


.sidebar{

    left:-250px;
    width:240px;
}


.sidebar.open{

    left:5px;

}



.main{

    margin-left:0!important;

}



.main.expand{

    margin-left:0!important;

}



/* overlay */

.sidebar-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.35);

    display:none;

    z-index:998;

}



.sidebar-overlay.show{

    display:block;

}



}