/* ===========================================================
   Ultra-slim toggle switch (perfect for table-sm)
   No JS dependency
   =========================================================== */
.switch-xs {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}
.switch-xs input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-xs {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ced4da;
  transition: .2s;
  border-radius: 10px;
}
.slider-xs:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .2s;
  border-radius: 50%;
}
.switch-xs input:checked + .slider-xs {
  background-color: #28a745;
}
.switch-xs input:checked + .slider-xs:before {
  transform: translateX(16px);
}


/*==========Scoped Popup CSS (won't affect other pages ===============*/
/* ensure popup always above sidebar */
    #taskLoginPopup { z-index: 20000 !important; }
    .modal-backdrop.show { z-index: 999 !important; }

    /* width 70% and top aligned */
    #taskLoginPopup .modal-dialog {
      width: 70vw;
      max-width: 70vw;
      margin: 18px auto;
    }
    @media (max-width: 768px) {
      #taskLoginPopup .modal-dialog {
        width: 95vw;
        max-width: 95vw;
        margin: 10px auto;
      }
    }

    /* slick look */
    #taskLoginPopup .modal-content {
      border-radius: 14px;
      border: 0;
      overflow: hidden;
      box-shadow: 0 18px 60px rgba(0,0,0,.18);
    }
    #taskLoginPopup .modal-header {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    #taskLoginPopup .modal-title { font-weight: 700; }
    #taskLoginPopup .modal-body {
      padding: 10px 12px;
      background: #fafafa;
      max-height: 70vh;
      overflow: auto;
    }
    #taskLoginPopup .modal-footer {
      padding: 8px 12px;
      border-top: 1px solid rgba(0,0,0,.06);
      background: #fff;
    }

    /* slim table */
    #taskLoginPopup table.table { background:#fff; margin:0; }
    #taskLoginPopup table.table thead th {
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 700;
      position: sticky;
      top: 0;
      z-index: 2;
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #taskLoginPopup table.table tbody td {
      padding: 6px 8px;
      font-size: 12px;
      line-height: 1.25;
      vertical-align: middle;
      border-top: 1px solid rgba(0,0,0,.06);
    }
    #taskLoginPopup table.table tbody tr:hover { background: rgba(0,123,255,.04); }

    /* priority star */
    #taskLoginPopup .task-priority-star {
      color: #f0ad4e;
      font-size: 13px;
      margin-right: 4px;
      vertical-align: text-top;
    }

    /* slim badge */
    #taskLoginPopup .badge {
      padding: 3px 7px;
      font-size: 11px;
      border-radius: 999px;
      font-weight: 600;
      line-height: 1.2;
    }

    /* slim buttons */
    #taskLoginPopup .btn.btn-sm {
      padding: 3px 8px;
      font-size: 11px;
      border-radius: 999px;
      font-weight: 600;
    } 



    /*========22-04-2026=================*/
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

body,
html,
.wrapper,
.content-wrapper,
.main-header,
.main-footer,
.navbar,
a,
div,
span,
p,
li,
ul,
input,
select,
textarea,
button{
font-family:'Lato',sans-serif!important;
}

.main-sidebar,
.sidebar,
aside.main-sidebar,
.brand-link,
.user-panel{
display:none!important;
width:0!important;
}

.content-wrapper,
.main-footer,
.main-header{
margin-left:0!important;
}

body{
background:#f5f7fb!important;
}

.mk-topbar{
background:#0d0d0d!important;
height:76px!important;
padding:0 24px!important;
border:0!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
}

.mk-brand{
display:flex!important;
align-items:center!important;
gap:12px!important;
text-decoration:none!important;
margin-right:28px!important;
}

.mk-brand img{
width:44px!important;
height:44px!important;
border-radius:12px!important;
background:#fff!important;
padding:6px!important;
}

.mk-brand span{
color:#fff!important;
font-size:18px!important;
font-weight:900!important;
line-height:1.1!important;
max-width:170px!important;
}

.mk-nav-wrap{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
}

.mk-menu{
display:flex!important;
align-items:center!important;
gap:8px!important;
padding:0!important;
margin:0!important;
list-style:none!important;
}

.mk-menu .nav-item{
position:relative!important;
}

.mk-menu .nav-link{
display:flex!important;
align-items:center!important;
gap:8px!important;
padding:12px 16px!important;
border-radius:10px!important;
color:#d9d9d9!important;
font-size:14px!important;
font-weight:800!important;
transition:.25s ease!important;
white-space: nowrap;
}

.mk-menu .nav-link:hover,
.mk-menu .nav-link.active{
background:#ffffff!important;
color:#000!important;
}

.mk-arrow{
font-size:12px!important;
margin-left:2px!important;
}

.mk-dropdown{
top:112%!important;
left:0!important;
border:0!important;
border-radius:14px!important;
padding:10px!important;
min-width:220px!important;
box-shadow:0 16px 35px rgba(0,0,0,.12)!important;
}

.mk-dropdown .dropdown-item{
padding:11px 14px!important;
border-radius:10px!important;
font-size:14px!important;
font-weight:700!important;
color:#111!important;
margin-bottom:4px!important;
}

.mk-dropdown .dropdown-item:hover,
.mk-dropdown .dropdown-item.active{
background:#111!important;
color:#fff!important;
}

.mk-right{
display:flex!important;
align-items:center!important;
gap:14px!important;
margin-left:20px!important;
}

.mk-user{
padding:10px 14px!important;
background:#171717!important;
border:1px solid rgba(255,255,255,.06)!important;
border-radius:12px!important;
color:#fff!important;
font-size:14px!important;
font-weight:800!important;
max-width:220px!important;
line-height:1.2!important;
}

.mk-datetime{
text-align:right!important;
line-height:1.1!important;
min-width:135px!important;
}

.mk-time{
color:#fff!important;
font-size:24px!important;
font-weight:900!important;
letter-spacing:.5px!important;
}

.mk-date{
color:#cfcfcf!important;
font-size:12px!important;
font-weight:700!important;
margin-top:3px!important;
}

.mk-logout{
display:flex!important;
align-items:center!important;
gap:8px!important;
padding:12px 18px!important;
border-radius:12px!important;
background:linear-gradient(135deg,#ff2d2d,#ff5e00)!important;
color:#fff!important;
font-size:14px!important;
font-weight:900!important;
text-decoration:none!important;
box-shadow:0 10px 22px rgba(255,60,0,.22)!important;
transition:.25s ease!important;
}

.mk-logout:hover{
background:linear-gradient(135deg,#d90000,#ff3300)!important;
color:#fff!important;
transform:translateY(-2px)!important;
box-shadow:0 14px 28px rgba(255,60,0,.30)!important;
}

.content-wrapper{
background:#f5f7fb!important;
padding:28px!important;
min-height:calc(100vh - 76px)!important;
}

.card{
border:0!important;
border-radius:18px!important;
box-shadow:0 10px 28px rgba(0,0,0,.05)!important;
overflow:hidden!important;
}

.form-control,
.custom-select,
input,
select,
textarea{
border:1px solid #dddddd!important;
border-radius:12px!important;
min-height:46px!important;
box-shadow:none!important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus{
border-color:#111!important;
}

.btn-primary,
.btn-success,
.btn-info{
border:0!important;
border-radius:12px!important;
font-weight:800!important;
padding:12px 20px!important;
}

@media(max-width:1400px){

.mk-user{
display:none!important;
}

.mk-brand span{
max-width:130px!important;
font-size:16px!important;
}

}

@media(max-width:1200px){

.mk-topbar{
height:auto!important;
padding:14px!important;
align-items:flex-start!important;
}

.mk-nav-wrap{
flex-direction:column!important;
align-items:flex-start!important;
gap:14px!important;
}

.mk-menu{
flex-wrap:wrap!important;
}

.mk-right{
width:100%!important;
justify-content:space-between!important;
margin-left:0!important;
}

.content-wrapper{
padding:16px!important;
}

}

@media(max-width:767px){

.mk-right{
flex-direction:column!important;
align-items:flex-start!important;
gap:10px!important;
}

.mk-datetime{
text-align:left!important;
}

.mk-logout{
width:100%!important;
justify-content:center!important;
}

}



.mk-footer{
margin-left:0!important;
margin-bottom:0!important;
padding:0!important;
border:0!important;
background:#0d0d0d!important;
box-shadow:0 -6px 18px rgba(0,0,0,.08)!important;
}

.mk-footer-inner{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
padding:18px 28px!important;
gap:15px!important;
}

.mk-footer-left{
color:#ffffff!important;
font-size:15px!important;
font-weight:900!important;
letter-spacing:.3px!important;
}

.mk-footer-right{
color:#cfcfcf!important;
font-size:14px!important;
font-weight:700!important;
text-align:right!important;
}

@media(max-width:767px){

.mk-footer-inner{
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
padding:16px!important;
}

.mk-footer-right{
text-align:center!important;
}

}


/* Inline fallback styling for jQuery UI datepicker because theme CSS file is not available in current codebase. */
.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
  z-index: 1055 !important;
  font-size: 13px;
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .4em 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: .25em;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  font-weight: 600;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 4px;
  width: 1.8em;
  height: 1.8em;
  cursor: pointer;
  text-align: center;
  border-radius: .2rem;
}
.ui-datepicker .ui-datepicker-prev { left: 4px; }
.ui-datepicker .ui-datepicker-next { right: 4px; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: #f1f3f5;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  line-height: 1.8em;
  font-size: 0;
}
.ui-datepicker .ui-datepicker-prev span:before {
  content: "\2039";
  font-size: 18px;
  color: #495057;
}
.ui-datepicker .ui-datepicker-next span:before {
  content: "\203A";
  font-size: 18px;
  color: #495057;
}
.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 .2em;
}
.ui-datepicker th {
  padding: .45em .2em;
  text-align: center;
  font-weight: 600;
  color: #6c757d;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .45em;
  text-align: center;
  text-decoration: none;
  color: #212529;
  border-radius: .2rem;
}
.ui-datepicker td a:hover {
  background: #f8f9fa;
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-datepicker-current-day a {
  background: #007bff;
  color: #fff !important;
}
.ui-datepicker .ui-state-highlight {
  background: #e9f2ff;
}
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-state-disabled {
  opacity: .45;
}


.mk-dashboard .content-wrapper{
background:linear-gradient(180deg,#f4f4f4 0%,#ececec 100%)!important;
padding:34px!important;
min-height:100vh!important;
}

.mk-dashboard .content-header{
margin-bottom:28px!important;
}

.mk-dashboard .content-header h4{
font-size:44px!important;
font-weight:900!important;
color:#000!important;
letter-spacing:-1.4px!important;
margin:0!important;
text-align:center!important;
line-height:1.2!important;
}

.mk-dashboard .content-header h4:after{
content:"";
display:block;
width:110px;
height:5px;
margin:18px auto 0;
border-radius:30px;
background:linear-gradient(90deg,#000,#4d4d4d,#000);
}

.mk-dashboard .container-fluid{
max-width:100%!important;
}

.mk-dashboard .card{
background:#ffffff!important;
border:1px solid #e6e6e6!important;
border-radius:26px!important;
box-shadow:0 18px 45px rgba(0,0,0,.06)!important;
overflow:hidden!important;
margin-bottom:26px!important;
}

.mk-dashboard .card-body{
padding:34px!important;
}

.mk-dashboard .card-header{
background:#fff!important;
border-bottom:1px solid #efefef!important;
padding:22px 28px!important;
}

.mk-dashboard .form-row{
row-gap:18px!important;
}

.mk-dashboard label{
font-size:13px!important;
font-weight:900!important;
color:#000!important;
letter-spacing:.8px!important;
margin-bottom:10px!important;
text-transform:uppercase!important;
}

.mk-dashboard .form-control,
.mk-dashboard .custom-select,
.mk-dashboard input,
.mk-dashboard select,
.mk-dashboard textarea{
height:58px!important;
border:1px solid #d7d7d7!important;
border-radius:16px!important;
padding:12px 18px!important;
font-size:16px!important;
font-weight:800!important;
color:#000!important;
background:#fff!important;
box-shadow:none!important;
transition:.25s ease!important;
}

.mk-dashboard .form-control:focus,
.mk-dashboard input:focus,
.mk-dashboard select:focus,
.mk-dashboard textarea:focus{
border-color:#000!important;
box-shadow:0 0 0 4px rgba(0,0,0,.05)!important;
}

.mk-dashboard select{
cursor:pointer!important;
}

.mk-dashboard .btn-primary{
height:58px!important;
border:0!important;
border-radius:16px!important;
background:linear-gradient(135deg,#000,#1e1e1e)!important;
color:#fff!important;
font-size:17px!important;
font-weight:900!important;
letter-spacing:.3px!important;
box-shadow:0 14px 30px rgba(0,0,0,.14)!important;
transition:.25s ease!important;
}

.mk-dashboard .btn-primary:hover{
transform:translateY(-2px)!important;
background:linear-gradient(135deg,#111,#000)!important;
box-shadow:0 18px 34px rgba(0,0,0,.20)!important;
}

.mk-dashboard .alert{
border:0!important;
border-radius:18px!important;
padding:20px 24px!important;
font-size:15px!important;
font-weight:800!important;
box-shadow:0 12px 28px rgba(0,0,0,.05)!important;
}

.mk-dashboard .alert-info{
background:#fff!important;
color:#000!important;
border:1px solid #e8e8e8!important;
}

.mk-dashboard h5{
font-size:24px!important;
font-weight:900!important;
color:#000!important;
margin:0!important;
}

.mk-dashboard small{
font-size:13px!important;
font-weight:700!important;
color:#666!important;
}

.mk-dashboard .badge{
padding:10px 15px!important;
border-radius:40px!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.4px!important;
}

.mk-dashboard .badge-primary{
background:#000!important;
color:#fff!important;
}

.mk-dashboard .badge-success{
background:#3a3a3a!important;
color:#fff!important;
}

.mk-dashboard .table-responsive{
border-radius:20px!important;
overflow:hidden!important;
border:1px solid #ededed!important;
}

.mk-dashboard .table{
margin:0!important;
background:#fff!important;
}

.mk-dashboard .table thead th{
background:#000!important;
color:#fff!important;
font-size:13px!important;
font-weight:900!important;
padding:18px!important;
border:0!important;
text-transform:uppercase!important;
letter-spacing:.5px!important;
}

.mk-dashboard .table tbody td{
padding:16px 18px!important;
font-size:14px!important;
font-weight:700!important;
color:#111!important;
border-color:#f0f0f0!important;
vertical-align:middle!important;
}

.mk-dashboard .table tbody tr:nth-child(even){
background:#fafafa!important;
}

.mk-dashboard .table tbody tr:hover{
background:#f3f3f3!important;
}

.mk-dashboard .text-right{
font-weight:900!important;
}

.mk-dashboard .fa-bar-chart{
color:#000!important;
margin-right:8px!important;
}

.mk-dashboard .card-header strong{
font-size:18px!important;
font-weight:900!important;
color:#000!important;
}

.mk-dashboard .mb-2{
margin-bottom:26px!important;
}

@media(max-width:1199px){

.mk-dashboard .content-header h4{
font-size:36px!important;
}

.mk-dashboard .card-body{
padding:24px!important;
}

}

@media(max-width:767px){

.mk-dashboard .content-wrapper{
padding:16px!important;
}

.mk-dashboard .content-header h4{
font-size:28px!important;
}

.mk-dashboard .card{
border-radius:20px!important;
}

.mk-dashboard .card-body{
padding:18px!important;
}

.mk-dashboard .btn-primary{
width:100%!important;
}

.mk-dashboard .table thead th,
.mk-dashboard .table tbody td{
padding:12px!important;
font-size:13px!important;
}

}