

/* for All mobile */
@media only screen and (max-width: 992px) { 
    
    .dv {
        display:none;
    }

    .overlay-div {
        top: 25px;  
    }    
    
    .profileBox,
    .offcanvas.sidebar {
         width: 100% !important;
    }
    
    .sidebar-container {
        width: 100%; 
        margin: 80px auto;
    }    
    
}

/* for all tops */
@media only screen and (min-width: 993px) { 
    
    .overlay-div {
        top: 5px;  
    }  
    
    .mv {
        display:none;
    }    

    .profileBox,
    .offcanvas.sidebar,
    .offcanvas {
         width: 33% !important;
    }   
    
    .sidebar-container {
        width: 100%;
        margin: 80px auto;
    }
}


.section .card {
    text-align: center;
}


.wide-block {
    max-width: 900px;
    margin: 0 auto;
}

.section {
    padding: 0 8px !important;
}

.sidebar-buttons {
    width:100%;
    z-index: 9999;
    background: white !important;
}

.sidebar-buttons .button {
    width: 33.3% !important;
}


.overlay-div {
  position: fixed;  
  left: 50%;  
  transform: translateX(-50%); 
  z-index: 9999; 
  padding: 10px;
  text-align: center; 
}


.form-control {
    height: 42px !important;
}


/* AI styles */

:root{--accent:#0ea5e9;}
*{box-sizing:border-box}

a.button,button{appearance:none;border-left:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
a.button.primary,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.container{padding:12px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.map{height:calc(100vh - 120px);}


.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-grid label{font-size:12px;color:#334155}
.form-grid input, .form-grid select, .form-grid textarea{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:10px}
.form-grid textarea{min-height:72px}
#thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.thumb, .upload-box{width:77px;height:77px;border:1px dashed #94a3b8;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#f1f5f9}
.upload-box{cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:2px;right:2px;border:none;background:#00000088;color:#fff;border-radius:8px;padding:2px 6px;font-size:12px;cursor:pointer}
.badge{font-size:12px;padding:3px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px}
.row .meta{display:flex;flex-direction:column}
.small{font-size:12px;color:#475569}
.leaflet-container{border-radius:16px;border:1px solid #e2e8f0}
.offline{color:#b91c1c}
.online{color:#15803d}



/* Shortcut CSS */

.h-0 {
	height: 0px;
	width: 100%;
	float: left;
}

.h-2 {
	height: 2px;
	width: 100%;
	float: left;
}

.h-3 {
	height: 3px;
	width: 100%;
	float: left;
}

.h-5 {
	height: 5px;
	width: 100%;
	float: left;
}

.h-10 {
	height: 10px !important;
}

.h-20 {
	height: 20px !important;
}

.h-30 {
	height: 30px !important;
}

.h-40 {
	height: 40px !important;
}

.h-42 {
    height:42px !important;
}

.h-50 {
	height: 50px !important;
}

.h-60 {
	height: 60px !important;
}

.h-70 {
	height: 70px !important;
}

.h-80 {
	height: 80px !important;
}

.h-90 {
	height: 90px !important;
}

.h-100 {
	height: 100px !important;
}

.h-110 {
	height: 110px !important;
}

.h-120 {
	height: 120px !important;
}

.h-130 {
	height: 130px !important;
}

.h-140 {
	height: 140px !important;
}

.h-150 {
	height: 150px !important;
}

.h-160 {
	height: 160px !important;
}

.h-100px {
	height: 100px !important;
}

.w-100pe {
    width: 100% !important;
}

.h-100pe {
    height:100%;
}

.bg-grey {
    background: #c1c1c1;
}

.bg-black {
    background: #000000;
}

.bg-cq-grey {
    background: #0e1a3b;
}

.bg-cq-blue {
    background: #364260;
}

.bg-none {
    background: none;
}

.bbc-none {
    border-color: none;
}

.bbc-grey {
    border-color: #c1c1c1;
}

.bbc-black {
    border-color: #000000;
}

.bbc-cq-grey {
    border-color: #0e1a3b;
}

.bbc-cq-blue {
    border-color: #364260;
}

.thin-border {
    border: thin solid #c1c1c1;
}

.br-10 {
    border-radius:10px;
}

.bw-tk {
    border-width: thick;
}

.bw-tn {
    border-width: thin;
}

.bw-0 {
    border-width: 0 !important;
}

.f-l {
    float: left !important;
}

.f-r {
    float: right;
}

.lst-none {
    list-style-type:none;
}

.d-il {
   display:inline; 
}

.normal {
    font-weight:normal !important;
}


.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.width-100 {
	width: 100%;
}

.f-10 {
    font-size:10px !important;
}

.f-12 {
    font-size:12px !important;
}

.f-14 {
    font-size:14px !important;
}

.f-16 {
    font-size:16px !important;
}

.f-18 {
    font-size:18px !important;
}

.f-20 {
    font-size:20px !important;
}

.f-22 {
    font-size:22px !important;
}

.f-24 {
    font-size:24px !important;
}

.f-26 {
    font-size:26px !important;
}

.f-28 {
    font-size:28px !important;
}

.f-30 {
    font-size:30px !important;
}

.f-32 {
    font-size:32px !important;
}

.f-34 {
    font-size:34px !important;
}

.f-36 {
    font-size:36px !important;
}

.f-40 {
    font-size:40px !important;
}

.f-50 {
    font-size:50px !important;
}

.f-60 {
    font-size:60px;
}

.f-70 {
    font-size:70px;
}

.f-80 {
    font-size:80px;
}

.f-90 {
    font-size:90px;
}

.f-100 {
    font-size:100px;
}

.lh-10 {
    line-height: 10px;
}

.lh-12 {
    line-height: 12px;
}

.lh-14 {
    line-height: 14px;
}

.lh-16 {
    line-height: 16px;
}

.lh-18 {
    line-height: 18px;
}

.lh-20 {
    line-height: 20px;
}

.t-capz {
    text-transform: capitalize;
}

.t-upz {
    text-transform: uppercase;
}

.t-loz {
    text-transform: lowercase;
}

.p-10 {
    padding:10px;
}

.br-10 {
    border-radius:10px;
}


.t-0 {
    top:0 !important;
}

.b-0 {
    bottom:0 !important;
}

.l-0 {
   left:0 !important; 
}

.r-0 {
   right:0 !important; 
}


.t-a {
    top:auto !important;
}

.b-a {
    bottom:auto !important;
}

.l-a {
   left:auto !important; 
}

.r-a {
   right:auto !important; 
}


/* margin bottom */
.mb-0 {
	margin-bottom: 0px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.mb-4 {
    margin-bottom: 40px !important;
}

.mb-6 {
    margin-bottom: 60px !important;
}

.mb-8 {
    margin-bottom: 80px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mb-120 {
    margin-bottom: 120px !important;
}

.mb-140 {
    margin-bottom: 140px !important;
}

.mb-160 {
    margin-bottom: 160px !important;
}

.mb-170 {
    margin-bottom: 170px !important;
}

.mb-08 {
	margin-bottom: 8px !important;
}

.mb-0 {
    margin-bottom:0 !important;
}


/* margin top */
.mt--2 {
    margin-top: -20px !important;
}

.mt--4 {
    margin-top: -40px !important;
} 

.mt-2 {
    margin-top: 20px !important;
}

.mt-4 {
    margin-top: 40px !important;
}   

.mt-6 {
    margin-top: 60px !important;
}   

.mt-8 {
    margin-top: 80px !important;
}   

.mt-10 {
    margin-top: 100px !important;
}

.mt-12 {
    margin-top: 120px !important;
}

.mt-14 {
    margin-top: 140px !important;
}

.mt-16 {
    margin-top: 160px !important;
}

.mt-17 {
    margin-top: 170px !important;
}


/* margin left */
.ml-05 {
    margin-left:5px !important;
}

.ml-1 {
    margin-left:10px !important;
}

.ml-2 {
    margin-left: 20px !important;
}

.ml-4 {
    margin-left: 40px !important;
}

.ml-6 {
    margin-left: 60px !important;
}

.ml-8 {
    margin-left: 80px !important;
}

.ml-10 {
    margin-left: 100px !important;
}

.ml-15 {
    margin-left: 150px !important;
}

.ml-20 {
    margin-left: 200px !important;
}

/* margin right */
.mr-2 {
    margin-right: 20px !important;
}

.mr-4 {
    margin-right: 40px !important;
}

.mr-6 {
    margin-right: 60px !important;
}

.mr-8 {
    margin-right: 80px !important;
}

.mr-10 {
    margin-right: 100px !important;
}

.m-0 {
	margin: 0;
}


/* padding bottom */
.pb-2 {
    padding-bottom: 20px !important;
}

.pb-4 {
    padding-bottom: 40px !important;
}

.pb-6 {
    padding-bottom: 60px !important;
}

.pb-8 {
    padding-bottom: 80px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.pb-120 {
    padding-bottom: 120px !important;
}

.pb-140 {
    padding-bottom: 140px !important;
}

.pb-160 {
    padding-bottom: 160px !important;
}

.pb-170 {
    padding-bottom: 170px !important;
}


/* padding top */

.pt-03 {
    padding-top: 3px !important;
}

.pt-05 {
    padding-top: 5px !important;
}

.pt-1 {
    padding-top: 10px !important;
}

.pt-2 {
    padding-top: 20px !important;
}

.pt-3 {
    padding-top: 30px !important;
}

.pt-4 {
    padding-top: 40px !important;
}   

.pt-6 {
    padding-top: 60px !important;
}   

.pt-8 {
    padding-top: 80px !important;
}   

.pt-10 {
    padding-top: 100px !important;
}

.pt-12 {
    padding-top: 120px !important;
}

.pt-14 {
    padding-top: 140px !important;
}

.pt-16 {
    padding-top: 160px !important;
}

.pt-17 {
    padding-top: 170px !important;
}


/* padding left */
.pl-16 {
    padding-left: 16px !important;
}

.pl-1 {
    padding-left: 16px !important;
}

.pl-2 {
    padding-left: 20px !important;
}

.pl-32 {
    padding-left: 32px !important;
}

.pl-22 {
    padding-left: 22px !important;
}

.pl-4 {
    padding-left: 40px !important;
}

.pl-6 {
    padding-left: 60px !important;
}

.pl-8 {
    padding-left: 80px !important;
}

.pl-10 {
    padding-left: 100px !important;
}



/* padding right */
.pr-16 {
    padding-right: 16px !important;
}

.pr-1 {
    padding-right: 16px !important;
}

.pr-2 {
    padding-right: 20px !important;
}

.pr-32 {
    padding-right: 32px !important;
}

.pr-4 {
    padding-right: 40px !important;
}

.pr-6 {
    padding-right: 60px !important;
}

.pr-8 {
    padding-right: 80px !important;
}

.pr-10 {
    padding-right: 100px !important;
}

.p-2 {
    padding: 20px;
}

.p-1 {
    padding: 10px;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.w-120 {
    width: 100% !important;
}
