@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
:root,
[data-bs-theme=light] {
--bs-primary: #FFDB00;
--bs-secondary: #0058A3;	
--bs-primary-rgb: 255, 219, 0;
--bs-secondary-rgb: 0, 88, 163;
--bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #15152F;
  --bs-body-bg-rgb: 21, 21, 47;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(0, 88, 163, 0.75);
  --bs-secondary-color-rgb: 0, 88, 163;
  --bs-secondary-bg: #0058A3;
  --bs-secondary-bg-rgb: 0, 88, 163;
  --bs-link-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #fff;
  --bs-link-hover-color-rgb: 255, 255, 255;	
  --bs-border-color: #383956;	
}

main{ padding-top: 30px;}
.bi {display: inline-block;width: 1rem;height: 1rem;}
.bg-body-tertiary{ background: #fff; color: #fff!important;}
.sidebar .nav-link {font-size: .875rem;font-weight: 500; color: #fff !important;}
.sidebar .nav-link.active {color: #fff;}
.sidebar-heading {font-size: .75rem;}
.sidebar{ padding-top: 30px !important;}
.support{ color: #686980;}
.card{ background: #1D1E3D!important;} .cardbg{ background-color: #1D1E3D!important;}
.electricity{ color: #FF6C01} .water{ color: #28CEE5} .btu{ color: #DF3E28}
.oman{ background: #F765A3} .dubai{ background: #A155B9;} .abudhabi{ background: #165BAA;}
.big{ font-size:60px;}
.small{font-size: 12px!important;}
.nav-dot{ display: inline-block; width: 10px; height: 10px;}
.small-profile{ width: 30px; height: 30px;}
.poweredby{ position:relative; z-index: 99; left: 15px; margin-bottom: 20px;}
.login{margin: 0; position: absolute;top: 50%; left: 50%; -ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 490px;}
.loginbg{background-image: url("../images/loginbg.png"); background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
.login-logo{max-width: 100px;}
.dataheightfix{height:180px;}
.graph-height{ height:450px;}
.graph-area{height:370px;}
.tab-trigger .active span{ border-bottom: 2px solid #383956 !important; padding-bottom: 10px;}
.band-height{height: 25px;}
.om-used-budget{ background: #FF1277; border-right: 1px solid #D54180 !important;} .dxb-used-budget{ background: #C225F4; border-right: 1px solid #8C3BA6 !important;} .auh-used-budget{ background: #1E7CE7; border-right: 1px solid #10529C !important;}
.table > :not(caption) > * > *{background-color: #1D1E3D!important;}
.dataTables_filter {position: absolute;top: 15px;right: 20px;font-size: 11px; color: #fff; }
.dataTables_filter input {font-size: 11px;margin-left: 10px;border-radius: 0.25rem;border: 1px solid #383956; background-color: #1D1E3D!important; color: #fff;}
.dataTables_length {position: relative;margin-left: 5px;font-size: 11px;color: #999;}
.dataTables_length select{background-color: #1D1E3D!important; color: #fff; border-radius: 0.25rem;border: 1px solid #383956; margin-left:5px; margin-right: 5px;}
.dataTables_paginate {font-size: 11px;margin-right: 5px;width: 50%;float: right;text-align: right;position: relative;top: -20px;}
.dataTables_paginate a {color: #fff;padding-left: 5px;padding-right: 5px;text-decoration: none;cursor: pointer;}
.dataTables_info {font-size: 11px;color: #fff;margin-left: 5px;width: 50%;float: left;}
/*
 * Sidebar
 */

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {position: -webkit-sticky;position: sticky;top: 48px;}
  .navbar-search { display: block;}
}
/*
 * Navbar
 */
.navbar-brand {padding-top: .75rem;padding-bottom: .75rem;}

@media(max-width:767px){
.bg-body-tertiary{ background:none!important;}
.offcanvas-header, .offcanvas-body{ background:#1D1E3D!important}
.login{margin: 0; position: absolute;top: 50%; left: 50%; -ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width:80%;}
}