/*@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;550;700;900&display=swap");*/
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/Poppins/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 550;
    src: url('./fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/Poppins/Poppins-Black.ttf') format('truetype');
}



:root {
    --c0 : rgba(0,0,255,.02); /* Keeping the very subtle blue tint */
    --c01 : #fafaff; /* Soft white, no change */
    --c1 : #fdfefe; /* Very light, no major change */
    --c2 : #00e6a8; /* Brighter and more neon version of green */
    --c3 : #4b40ff; /* More electric version of the purple */
    --c4 : #00e3d7; /* More vibrant turquoise */
    --c5 : #ffd166; /* A richer, slightly warmer golden yellow */
    --c6 : #5aafda; /* More saturated blue-gray */
    --c7 : #222222; /* A stronger deep gray for contrast */
    --c8 : #000000; /* Keeping black unchanged */

    --grad01 :linear-gradient(135deg, #00000096 0%, #000 100%) !important;
    --btn-color:var(--c8)!important;
    --g-weight:550!important;
    --h4-6-bold:700!important;
}

body { display:grid; grid-template-columns:75px 1fr; background:var(--c0); }
.btn { background-color:var(--c3); font-weight:550!important; text-align:center; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

input, select, textarea, .input-field label { font-weight:500; }

.grad1 { background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)!important; }
.grad2 { background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)!important; }
.grad3 { background-color: #85FFBD; background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)!important; }
.grad4 { background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)!important; }
.grad5 { background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)!important; }


.loginpage,.login-background { background:url('../img/indexbg.png')!important; background-size:cover!important; background-attachment: fixed; background-blend-mode:color; min-height:100vh; }


.loginpage { display:grid; grid-template-columns: 1fr; align-content:center; justify-items:center; min-height:100vh;  background:url('../img/indexbg.png'); background-size:cover; background-attachment: fixed; background-blend-mode:color;}

.loginpage .loginpanel { min-height:40vh; display:grid; align-content:center; text-align:center; gap:1em; padding:1em 2em; }
.loginpage .loginpanel form { min-width:320px; }

.loginpage .brand img { font-weight:bold; font-size:2em; color:var(--c3); max-height: 150px; width: 100%; object-fit: contain; }


.loginpage .infopanel { border-radius: var(--radius); position:absolute; bottom:.5em; right:.5em; width:calc(100% - 1em); overflow:hidden; display:grid; gap:1em; }
.loginpage .infopanel .contentp { width:100%; height:0px; overflow:hidden; opacity:.01; }
.loginpage .infopanel:hover .contentp { height:unset; display:grid; opacity:1; justify-items:end; animation:slideInUp .3s; }


/* Glass UI */

/*.glassui {  
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}*/

.glassui {
    background: rgba(255, 255, 255, 0.79);
    border-radius: var(--radius);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}


/* Sidebar */
.sidebar-container { z-index:4; }
.sidebar .brand { padding: 1em .5em; }


.sidebar.is-visible { animation:slideInLeft .3s; position: relative; height:100vh; display:grid!important; transition:.3s all!important; width:75px!important; box-shadow:0 0 4px 0 rgba(0,0,0,.2); grid-template-rows: auto 1fr auto; gap:2em; align-content:start; }
.sidebar.is-visible a span { display:grid; }
.sidebar.is-visible a i::before { font-size:1.5em; }
.sidebar.is-visible .navlinks { display: grid; align-content: start; justify-content: stretch; gap: .1em; overflow-y: auto; }
.sidebar.is-visible .navlinks a i { padding:.5em!important; text-align:center; display:grid; grid-template-columns:auto 1fr; align-items: center; gap:.5em; }
.sidebar.is-visible .navlinks a:hover { background:rgba(0,0,0,.9); color:white; }
.sidebar.is-visible .navlinks a span { color:rgba(0,0,0,.9); font-style: normal;}
.sidebar.is-visible .navlinks a:hover span {  animation:fadeIn .3s; display:grid; font-style:normal; position:relative; text-align:center; left:unset;  display: grid; align-content: center; margin-top:0; background:transparent; color:white; height:auto; padding:unset; border-radius:unset; }
.sidebar.is-visible .smalllogo { display:none;  margin:0 auto; }
.sidebar.is-visible .biglogo { display:block; margin:0 auto; object-fit: contain; object-position: center; }
.sidebar.is-visible .sidebarbtn { display:block; }
.sidebar.is-visible .navlinks a:hover i::before { animation:zoomIn .7s; }




.sidebar:not(is-visible) {  animation:slideInLeft .3s; position: relative; height:100vh; display:grid!important; transition:.3s all; width:75px!important; box-shadow:0 0 4px 0 rgba(0,0,0,.2); grid-template-rows: auto 1fr auto; gap:2em; align-content:start; overflow:visible!important; }
.sidebar:not(is-visible) a span { display:none; }
.sidebar:not(is-visible) a i::before { font-size:1.5em; }
.sidebar:not(is-visible) .navlinks { display:grid; align-content:center; justify-content:stretch; gap:1em;  }
.sidebar:not(is-visible) .navlinks a { padding:.5em!important; text-align:center; }
.sidebar:not(is-visible) .navlinks a:hover { background:rgba(0,0,0,.9); color:white; border-radius:0px .2em .2em 0px;  }
.sidebar:not(is-visible) .navlinks a:hover span { animation:fadeInLeft .3s; display:block; font-style:normal; position:absolute; text-align:center; left:70px; display: grid; align-content: center; margin-top: -2.7em; background:rgba(0,0,0,.9); color:white; height:50px; padding:.7em 1em; border-radius:0px .2em .2em 0px; }
.sidebar:not(is-visible) .smalllogo { display:block; margin:0 auto; object-fit: cover; object-position: center; }
.sidebar:not(is-visible) .biglogo { display:none;  margin:0 auto; }
.sidebar:not(is-visible) .sidebarbtn { display:none; }


.topbar {  position: sticky; top:0; background:var(--c01);
    display:grid; grid-auto-flow:column;  grid-template-columns:auto 1fr auto; 
    border-bottom:1px solid rgba(0,0,0,.01); align-content:center; margin:var(--margin); 
    margin-right:1em; padding:.5em 0em;  z-index:2; 
}
.topbar ul { display:grid; padding:0px; margin:0px; list-style:none; display:grid; grid-auto-flow:column; justify-content: start; align-items:center; grid-gap:1.5em; }
.topbar ul a::before { font-size:1.5em; }
.topbar ul a { display:grid; grid-template-columns:auto 1fr; align-items:center;  }
.topbar .mdi-menu { margin-left:.3em; }

.btn-dropdown > .dropdown.is-visible { left:unset!important; right: 0px; min-width: max-content; z-index:4; }


.page { min-height:90vh; position: relative;  display:grid; background-color:var(--c1)!important;  padding:0em 1em; border-radius:var(--radius); margin:var(--margin); box-shadow:0px 0px 5px 0px rgba(0,0,0,.05); align-content:start; overflow:hidden; overflow-y: auto; margin-left:1em; margin-right:1em; z-index:1; } 
.page > .heading { color:var(--c6); font-size: 3rem; text-transform:capitalize; }


.badge-m,.badge-f,.badge-M,.badge-F { display: inline-grid; align-content: center; text-align: center; vertical-align: middle; justify-content: center; border-radius:var(--radius); width:20px; height:20px; }
.badge-M,.badge-m { background-color:#7070ff; }
.badge-F,.badge-f { background-color:#fe6781; }

.fuel-petrol { color:#1b47cb; }
.fuel-cng { color:green; }
.fuel-electricity { color:lightgreen; }
.fuel-diesel { color:yellow; }
.fuel-lpg { color:orangered; }


/* Modal */

.modal.bottom { align-items:end!important; padding:1em; }
.modal.top { align-items:start!important; padding:1em; }
.modal.left { justify-items:start!important; align-items:unset!important; padding:1em; }
.modal.right { justify-items:end!important;  align-items:unset!important; padding:1em; }
.modal.topleft { justify-items:start!important; align-items:start!important; padding:1em; }
.modal.topright { justify-items:end!important; align-items:start!important; padding:1em; }
.modal.bottomleft { justify-items:start!important; align-items:end!important; padding:1em; }
.modal.bottomright { justify-items:end!important; align-items:end!important; padding:1em; }

.modal.active .modal-container {  animation:zoomIn .5s ease-in-out; }
.modal.left.active .modal-container,.modal.right.active .modal-container ,
.modal.bottomleft.active .modal-container,.modal.bottomright.active .modal-container, 
.modal.topleft.active .modal-container,.modal.topright.active .modal-container 
{ margin:0px!important; width:fit-content; max-height:100%; height: fit-content;  }


.modal.active { 
    animation: fadeIn .2s ease-in-out;
    background: rgba(0, 0, 0, 0.2)!important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.modal.active .modal-container {  
    background: rgba(255, 255, 255, 0.8)!important;
    border-radius: var(--radius);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.modal.active.notificationbox .modal-container { padding:0px; }
.modal.active.notificationbox .modal-container .list-group li { padding:0.5em 1em; }
.modal.active.notificationbox .modal-container .modal-footer { padding-bottom:.5em; }
.modal.active.notificationbox .modal-container .modal-footer a { font-size:smaller; color:rgba(0,0,0,.5); }

/**/

.previewbox,
.previewbox1,
.previewbox2,
.previewbox3 {
    display: grid;
    grid-template-columns: auto auto;
    max-width: calc(400px + 3em);
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
    gap: 1em;
    padding: 1em;
}

.previewbox img,
.previewbox1 img,
.previewbox2 img,
.previewbox3 img {
    border-radius: 1em;
    width: 200px;
    height: 200px;
    object-fit: contain;
    object-position: top left;
    transition: 3s all;
}

.previewbox img:hover,
.previewbox1 img:hover,
.previewbox2 img:hover,
.previewbox3 img:hover {
    object-position: bottom right;
}


/* ---------------------------- MODALS in dashboard ---------------------------------*/
.modal.active .modalclosebtn {
    color: rgba(255, 0, 0, 1) !important;
    font-size: 30px !important;
    right: 0px !important;
    padding: 0 5px !important;
}

.modal.active .modal-container {
    padding: 0 !important;
    box-shadow: 1px 2px 16px 7px rgba(0, 0, 0, .1);
}

.modal-header {
    border-bottom: 2px solid var(--btn-color);
    padding: 0.7em;
}

.login-background {
    height: 100vh;
    background: linear-gradient(186deg,
            rgb(201, 197, 217) 38%,
            rgb(168, 243, 255) 76%,
            rgb(3, 72, 81) 100%);
    background:url("../img/indexbg.jpg");
    background-size: cover;
}


/* === */
.badgebox { display:grid; position:relative; justify-items:right; align-items:center; background:var(--c2); padding:1em; border-radius:var(--radius); overflow:hidden; transition:.3s all ease-in-out; cursor:pointer; }
.badgebox:hover { color:var(--c2); }
.badgebox:hover small,.badgebox:hover::before { color:rgba(255,255,255,.7); z-index:1; }
.badgebox::before { position:absolute; top:.7em; left:-.1em; font-size:3em!important; display:grid; height:100%; color:rgba(0,0,0,.5); transform:rotate(-22deg) scale(2); transition:.7s all ease-in-out; }
.badgebox:hover::before { left:.5em; transform:rotate(22deg) scale(2); }
.badgebox:hover * { z-index:1; }
.badgebox::after { content:""; display:grid; background:var(--grad01); width:100%; height:100%; position:absolute; top:0; left:-100%; z-index:0; transition:.5s all ease-in-out; border-radius:100%; }
.badgebox:hover::after { left:0;  border-radius:0px; }

.badgebox meter { width:100%; position:absolute; bottom:0px; border:none; background:rgba(0,0,0,.1); }

.badgebox meter::-webkit-meter-bar { background:var(--c5)!important; }

/* // */

.dasmn {
    font-size: 2em;
}

.dasmnl {
    font-size: 1em;
}

.dasmnl .da {
    font-size: 2em;
}

.adchart {
    display: block;
/*    width: 60vw;*/
}




/* ---------------------------- MODALS in dashboard ---------------------------------*/
.modal.active .modalclosebtn {
    color: rgba(255, 0, 0, 1) !important;
    font-size: 30px !important;
    right: 0px !important;
    padding: 0 5px !important;
}

.modal.active .modal-container {
    padding: 0 !important;
}

.modal-header {
    border-bottom: 2px solid var(--btn-color);
    padding: 0.7em;
}

.inimg {
    background: rgba(255, 255, 255, 1);
    position: relative;
    padding: 0em;
    border-radius: var(--radius);
    transition: 2s all;
    display: inline-grid;
    align-items: center;
    margin: var(--margin);
}


.newicon-percent::after { content:"%"; color:grey; }
.newicon-flat::after { content:"";  color:grey; }

.viewonhover { position: relative; background:rgba(0,0,0,.05); padding:.5em; display:inline-block; border-radius:var(--radius); }
.viewonhover::after { animation:fadeIn .2s; content:"****"; background:#ddd; position:absolute; display: grid; align-content:center; top:0px; bottom:0px; left:0px; right:0; height:100%; width:100%; box-sizing: border-box; padding: .5em; transition:.5s all; }
.viewonhover:hover::after { display:none;  }

.input-checkbox { background: transparent !important; }
.switchbox::before { font-size: 3.5em !important; content:"\F0522"!important; color:rgba(255, 0, 0, 0.64) !important; }
.switchbox:checked::before { content:"\F0521"!important; }

.adset  ul.tabs { 
    width: 100%!important;
    width:fit-content;
overflow: hidden;
  overflow-x: hidden;
overflow-x: auto; }

.adset  ul.tabs li a { white-space:nowrap; }

.modal-body { min-width: fit-content; }

.status.Active,.status.active,.status.green { background:green!important; color:white; }
.status.Inactive,.status.inactive,.status.red { background:red!important; color:white; }

.adchart { background:var(--c6); width:calc(100% - .5em);  max-width:70vw; }

.staffbox { min-width:20vw; padding: 0px; background:var(--c1); border:1px solid rgba(0,0,0,.1); }
.staffbox > div { padding: 1em; border-bottom: 1px solid rgba(0,0,0,.1); }

.staffbox .badge { background:rgba(0,0,0,.1); width:20px; height:20px; display:block; border-radius:50px; }
.staffbox .badge.active { background:var(--editable_status_active); }
.staffbox .badge.inactive { background:var(--x1); }


.boxcontain4 { padding:0px; }
.boxcontain4 > div { padding:.5em 1em; }
.boxcontain4 .gtext { padding: 1em 1em; border-top: 1px solid rgba(255,255,255,.1); }


.modal.active .modal-container { min-width:400px; max-width: 90vw; }
.modal.active .modal-container .modal-body { padding:1em; }
.modal.active.halfbottom { align-items: end!important; padding:1em; }
.modal.active.halfbottom .modal-container {  }
section.wrapper { min-height: 300px; }

ul { background:white; }
ul > li { cursor:pointer; }

.modal {
background: rgba(0, 0, 0, 0.5)!important;
border-radius: 0px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);    
}


.modal.tightmodal  .modalclosebtn {  

margin-top: -1.2em;
margin-right: -1.2em;
color: #e3e3e38c !important;

}

.modal .eli-searchable-select-tag-searchbox.default{
    width: 100%;
border: none!important;
border-bottom: 1px solid rgba(0,0,0,.1);
background: rgba(0,0,0,.05);
border-radius: var(--radius)!important;
}

.modal .eli-searchable-select-tag-searchbox::before { content:"Search"; position:absolute; top:0px; left:0px; color:red; }
.modal-container { max-height:90vh; overflow: hidden; overflow-y:auto; }

#notificationbox .modal-container { max-width:250px!important; }
#notificationbox .notification-box2 { width:100%!important; text-align:left; font-size:x-small; }
#notificationbox strong { display:inline; }
#notificationbox .notification-box2 li { text-align: left; display:grid; grid-template-columns:auto auto; gap:1em; }
#notificationbox .notification-box2 li p,#notificationbox .notification-box2 li span { text-align:left; font-size:.8em; }
#notificationbox .notification-box2 li.mdi::before { font-size:2em; }

td small { font-size: .8em; display: block; color: rgba(0,0,0,.5); }


.search-container {
position: relative;
  overflow:
inherit;
  z-index: 3;
}
.search-container ul {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.plist[template] { display:none; }

form  { grid-gap: 0em!important; }

.modtabs li { padding:0px!important; }
.modtabs li a { 
  padding: .5em 1em;
  display: grid;
  height: 100%;
  align-items: center;
  border-bottom:1px solid rgba(0,0,0,.1);
  transition: .3s all ease-in-out;
}

.modtabs li a:hover,.modtabs li.active a { background:rgba(0,0,0,.1); }

.viewonactive {  }

fieldset { border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius);
  padding: .25em; 
}
legend { padding: .2em .5em; text-transform:uppercase; }

/* = Loading =  */

body.loading::after { animation:loadingpage .7s; content:""; background-color:rgba(255,255,255,.99); 
  background-image:url('https://assets.codepen.io/5355660/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1605867857&width=80'); background-size:100px; background-repeat:no-repeat; background-position: center;  
  color:rgba(0,0,0,.7); position: fixed; top:0; left:0; right:0; bottom:0; z-index:99; }

@keyframes loadingpage {
  0%  { background-size:100px; opacity:1; }
  90% { background-size:200px; opacity:1; }
  100% { background-size:200px; opacity:0; }
}

/* ==  */


/* == */