:root{
    --dark_bg: #171623;
    --semidark_bg: #201F2D;
    --text-white: #FFF;
    --text_gray: rgba(255, 255, 255, 0.70);
    --primary_color: #03A4FF;
    --secondary_color: #1ACE2C;
    --light_gray_color: #4B4A5B;
    --border-color: #313143;
    --color_red: #EA5A47;
    --input_bg: #282838;
    --text-extra_light: #94949C;
    --hover_color: #2143a5;
    
    --_fs_xs:10px;
    --_fs_sm:12px;
    --_fs_md:14px;
    --_fs_lg:16px;
    --_fs_xl:18px;
    --_fs_xxl:20px;

    --_bdr_radius_lg: 20px;
    --_bdr_radius_md: 15px;
    --_bdr_radius_sm: 10px; 
}
body{
    font-family: 'Inter', sans-serif;
    background-color: var(--dark_bg) !important;
}
body a{text-decoration: none;}
body ul{padding: 0;margin: 0;list-style: none;}

body .btn.btn-primary{
    font-size: var(--_fs_lg);color: var(--text-white);border-radius: var(--_bdr_radius_sm);padding: 10px 35px;background-color: var(--primary_color);
    font-weight: 700;transition: 0.5s;
}
body .btn.btn-primary:hover{background-color: var(--hover_color);border: 1px solid var(--hover_color);}
body header{background-color: var(--semidark_bg) !important;padding: 9px 0;}
.main_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}
.brand-img {
    display: flex;
    align-items: center;
    column-gap: 40px;
}
.brand-img .logo {
    object-fit: contain;
    height: 62px;
    width: 100%;
    max-width: 250px;
}
.sidebar_btn img {min-width: 40px;max-width: 40px; cursor: pointer;}

.header_drops{display: flex; align-items: center;column-gap: 25px;}
.pp_img img{border: 5px solid var(--light_gray_color);border-radius: 50%;width: 100%;max-width: 50px;max-height: 50px;}
.profiledrop small{font-size: var(--_fs_lg);color: var(--text-white);}
.profiledrop .dropdown-toggle{background-color: transparent;border: 0;}
.profiledrop .dropdown-toggle:hover{background-color: transparent;border: 0;}
.profiledrop .dropdown-toggle:hover, .profiledrop .dropdown-toggle:focus-visible,
.profiledrop .dropdown-toggle.btn-check:checked+.profiledrop .dropdown-toggle.btn,
.profiledrop .dropdown-toggle.btn.active, .profiledrop .dropdown-toggle.btn.show, .profiledrop .dropdown-toggle.btn:first-child:active,
:not(.btn-check)+.profiledrop .dropdown-toggle.btn:active{background-color: transparent;border: 0;}
.profiledrop .dropdown-toggle {padding: 0 20px 0 0px;display: flex;align-items: center;column-gap: 10px;}
.profiledrop .dropdown-toggle::before {
    content: "";
    background-image: url(../images/drop_icon.svg);
    width: 15px;
    height: 12px;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    right: -5px;
    top: 20px;
}
.profiledrop ul{background-color: var(--semidark_bg);border: 0;}
.profiledrop .dropdown-item{font-size: var(--_fs_md);color: var(--text-white);}
.profiledrop  .dropdown-item:focus,.profiledrop  .dropdown-item:hover {color: var(--text-white);background-color: var(--primary_color);}

.noti_drop .offcanvas{background-color: var(--semidark_bg);border-radius: var(--_bdr_radius_lg);}
.noti_drop .offcanvas-body{position: relative;}
.noti_drop .offcanvas-body:after{content: "";position: absolute;bottom: 0;border: 2px solid var(--color_red);width: 40%;left: 130px;right: 0;margin: 0;}
.noti_drop .offcanvas .offcanvas-title{color: var(--text-white);font-size: 30px;font-weight: 700;font-family: 'Montserrat', sans-serif;}
.noti_drop .offcanvas .btn-close{filter: invert(1);}
.canv_list{display: flex;align-items: start;column-gap: 15px;}
.canv_list_icon{border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #292939;width: 50px;height: 50px;min-width: 50px;min-height: 50px;}
.canv_list_icon img{width: 50%;}
.head_canv_list{display: flex;flex-direction: column;gap: 20px;}
.head_canv_list p{
    color: #DEDEDE;
    font-size: var(--_fs_lg);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.head_canv_list span{color: var(--color_red);font-size: var(--_fs_sm);font-weight: 600;}
/* //////////////// */
.main{display: flex;column-gap: 20px; margin: 20px;height: 100%;}
.main_menu {
    width: 260px;
    background-color: var(--semidark_bg);
    border-radius: var(--_bdr_radius_lg);
    height: 100%;
    display: block;
    transition: 0.8s;
    position: fixed;
    left: 20px;
    z-index: 4;
}
.sidebar.visible {left: -260px;transition: 0.8s;}
.mainmenu_list{padding: 10px;}
.mainmenu_list .menutext {border-radius: 10px;}
.mainmenu_list .menutext svg {margin: 0 15px 0 0;}
.mainmenu_list .menutext a {
    color: var(--text-white);
    font-weight: 400;
    font-size: var(--_fs_xl);
    line-height: 1.2;
    display: flex;
    align-items: center;
    padding: 18px 27px;
    width: 100%;
    position: relative;
    border-radius: var(--_bdr_radius_md);
    margin: 0 0 2px 0;
    transition: 0.5s;
}
.mainmenu_list .menutext{transition: 0.5s;}
.mainmenu_list .menutext.active a {
    background: var(--primary_color);
    color: var(--text-white);
}
.mainmenu_list .menutext:hover a{
    background: var(--primary_color);
    color: var(--text-white);
}
/* ////////////////////////////// */
.main_sec{
    width: calc(100% - 280px);
    min-height: calc(100vh - 120px);
    background-color: var(--semidark_bg);
    border-radius: var(--_bdr_radius_lg);
    margin-left: auto;
    transition: 0.8s;
}
.main_sec.main_sec_expand{width: 100%;}

.desh_head{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid var(--border-color);padding: 15px 21px 15px 21px;}
.desh_head h2{color: var(--text-white);font-size: 24px;margin: 0 0 0px 0;font-weight: 700;}
.desh_head .nav.nav-pills{display: flex;align-items: center;gap: 15px;}
.desh_head .nav-link{
    color: var(--text-white);
    opacity: 0.30000001192092896;
    font-size: var(--_fs_xl);
    font-weight: 700;
    padding: 0 15px 0px 15px;border-radius: 0;
}
.desh_head .nav-pills .nav-link.active,.desh_head .nav-pills .show>.nav-link {
    color: var(--text-white); opacity: 1;position: relative;
    background-color: transparent;border-radius: 0;
}
.desh_head .nav-pills .nav-link.active:after{
    position: absolute;
    content: "";border-bottom: 2px solid var(--primary_color);
    width: 100%;
    left: 0;
    bottom: -16px;
}
.desh_head .nav-pills .nav-link:hover{color: var(--primary_color);}

.inner_content{margin: 20px;}
.inner_content.front_cntnt{margin: 10px;}

.node_box{background-color: var(--input_bg);border: 1px solid var(--border-color);width: 100%;min-height: 102px;
    border-radius: var(--_bdr_radius_sm);position: relative;padding: 14px 16px;}
.node_box.sc_box{border: 1px solid var(--color_red);background: rgba(234, 90, 71, 0.09);}
.node_box_num{display: flex;align-items: center;flex-direction: column;max-width: max-content;gap: 5px;}
.node_box span{font-size: 40px;color: var(--text-white);line-height: 1;}
.node_box span.badge{font-size: var(--_fs_sm);color: var(--text-white);padding: 4px 19px 4px 19px;width: 100%;max-width: 70px;border-radius: var(--_bdr_radius_md);line-height: 1;
    display: flex;align-items: center;justify-content: center;font-family: 'Montserrat', sans-serif;}
.badge_green{background-color: #1ACE2C}
.badge_red{background-color: var(--color_red);}

.nb_prnt{display: flex;padding: 0 20px 0 0;gap: 15px;}

.node_box.sc_box .sc_text{display: block;}
.node_box .sc_text{border-radius: 10px 10px 0px 0px;background: var(--color_red);position: absolute;right: 0;left: 0;margin: 0 auto;padding: 4px 12px;
   width: fit-content;font-size: var(--_fs_xs);font-weight: 600;text-transform: capitalize;bottom: 0;display: none;}

.node_box_inner{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;gap: 2px;}
.nb_cntr{display: flex;flex-direction: column;gap: 5px;align-items: center;min-width: 45px;}
.usb_cntr{display: flex;flex-direction: column;gap: 15px;align-items: center;}

.node_box_inner small{color: rgba(255, 255, 255, 0.70);text-align: center;font-size: var(--_fs_xs);font-weight: 600;text-transform: capitalize;font-family: 'Montserrat', sans-serif;}

.usb_dot{max-width: 24px;min-width: 24px;max-height: 24px;min-height: 24px;border-radius: 50%;background-color: var(--border-color);}
.reserved_usb{background-image: url(../images/usb_icon.svg);background-size: contain;}

.vt_dot{position: absolute;top: 8px;right: 2px;}
.unlock_icon{position: absolute;bottom: 8px;right: 8px;background-image: url(../images/unlock_icon.svg);width: 25px;height: 25px;background-size: contain;}
.lock_icon{position: absolute;bottom: 8px;right: 8px;background-image: url(../images/lock_icon.svg);width: 25px;height: 25px;background-size: contain;}


body .dropdown-toggle{background-color: var(--input_bg);color: var(--text-extra_light);width: 100%;text-align: left;
    border: var(--_bdr_radius_sm);border: 1px solid var(--border-color);min-height: 50px;}
body .dropdown-toggle:hover,body .dropdown-toggle:focus-visible,
body .dropdown-toggle.btn-check:checked+body .dropdown-toggle.btn, body .dropdown-toggle.btn.active, body .dropdown-toggle.btn.show,
body .dropdown-toggle.btn:first-child:active, :not(.btn-check)+body .dropdown-toggle.btn:active{background-color: var(--input_bg);color: var(--text-extra_light);}
body .dropdown-toggle:active{border: var(--border-color);}
body .dropdown-toggle::after{content: none;}
body .dropdown-toggle::before{content: "";background-image: url(../images/dropdown_icon.svg);position: absolute;top: 14px;right: 15px;width: 20px;height: 20px;}
body .dropdown{width: 100%;font-size: var(--_fs_md);}
body .dropdown-menu{width: 100%;background-color: var(--input_bg);}
body .dropdown-item{color: var(--text-extra_light);border: var(--_bdr_radius_sm);border: 0;}
body .dropdown-item:focus,body .dropdown-item:hover{background-color: var(--primary_color);color: var(--text-white);}
body .dropdown-toggle:focus-visible{border: 1px solid var(--primary_color);}


body .form-select{background-color: var(--input_bg);color: var(--text-extra_light);width: 100%;text-align: left;
    border: var(--_bdr_radius_sm);border: 1px solid var(--border-color);min-height: 50px;background-image: url(../images/dropdown_icon.svg);background-size: 20px 20px;}
body .form-select:hover,body .dropdown-toggle:focus-visible,
body .form-select.btn-check:checked+body .dropdown-toggle.btn, body .form-select.btn.active, body .form-select.btn.show,
body .form-select.btn:first-child:active, :not(.btn-check)+body .form-select.btn:active{background-color: var(--input_bg);color: var(--text-extra_light);}
body .form-select:active{border: var(--border-color);}
body .form-select{width: 100%;font-size: var(--_fs_md);}
body .form-select{width: 100%;background-color: var(--input_bg);}
body .form-select option{color: var(--text-extra_light);font-size: var(--_fs_md);}
body .form-select option:focus,body .dropdown-item:hover{background-color: var(--primary_color);color: var(--text-white);}
body .form-select:focus-visible{border: 1px solid var(--primary_color);}


body .form-check-input{background-color: #8b9ba1;}
body .form-check-input:checked {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}
/* ///////////////////////business */
.business_top{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 20px;}
.business_top .dropdown{max-width: 300px;}
.business_top .form-select{max-width: 300px;}

.bt_top_list{display: flex;align-items: center;flex-wrap: wrap;gap: 40px;row-gap: 15px;}
.bt_top_list li{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 5px;}
.bt_top_list small{color: var(--text-white);font-size: var(--_fs_md);opacity: 0.5;}
.bt_top_list span{color: var(--text-white);font-size: var(--_fs_xxl);}

.bus_map{margin: 25px 0;}
.bus_map iframe{width: 100%;height: 100%;border-radius: var(--_bdr_radius_md);min-height: calc(100vh - 320px);}

/* ./////////////////////////setting// */
.form_heading{font-weight: 700;color: var(--text-white);font-size: var(--_fs_xl);margin: 0 0 0px 0;}

body .form-control{background-color: var(--input_bg);border: 1px solid var(--border-color);border-radius: var(--_bdr_radius_sm);
    min-height: 50px;color: var(--text-white);font-size: var(--_fs_md);}
body .form-control:focus{background-color: var(--input_bg);color: var(--text-extra_light);box-shadow: none;border: 1px solid var(--primary_color);}
body .form-control::placeholder{color: var(--text-extra_light);}

.inner_form{border: 1px solid var(--border-color);border-radius: var(--_bdr_radius_sm);padding: 20px}
.form_btn{margin: 30px 0 0 0;}

.inner_form{height: 100%;min-height: 410px;display: flex;flex-direction: column;justify-content: space-between;}
/* ///////////////////////////.invoice///// */
.invoice_top{display: flex;align-items: center;gap: 15px;margin: 0 0 20px 0;flex-wrap: wrap;}
.invoice_top .form-select{max-width: 300px;}

.invoice_content h4{color: var(--text-white);font-size: var(--_fs_xl);margin: 0 0 15px 0;}
.invoice_table table{width: 100%;border: 1px solid var(--border-color);padding: 10px;}
.invoice_table table thead tr th{color: rgba(255, 255, 255, 0.30);font-size: var(--_fs_lg);font-weight: 600;padding: 19px 20px 18px 20px;}
.invoice_table table thead{border-bottom: 1px solid var(--border-color);}

.invoice_table table tr td{color: var(--text-white);font-size: 13px;font-weight: 600;text-transform: capitalize;padding: 10px 20px;border: 0;font-family: 'Montserrat', sans-serif;}
.invoice_table table tr:nth-child(even){background-color: #1D2C42;}
.invoice_table table .tran_bg{background-color: transparent !important;}
.invoice_table table .tran_bg td{text-transform: uppercase;}
.invoice_table table tbody tr:last-child{background-color: var(--hover_color);}
/* //////////////////////////////////////.analytics// */
.analytics_top{display: flex;align-items: center;gap: 15px;margin: 0 0 20px 0;}
.analytics_top .sm_dropdown{max-width: 150px !important;min-width: 120px;}
.analytics_content h4{color: var(--text-white);font-size: var(--_fs_xl);margin: 0 0 15px 0;}
.analytics_top_list{justify-content: space-around;background-color: var(--input_bg);border-radius: var(--_bdr_radius_sm);
    border: 1px solid var(--border-color);padding: 24px 20px;gap: 20px;margin: 0 0 25px 0;}
.ana_graph{margin: 0 0 20px 0;}
.ana_graph h4{font-weight: 700;font-size: var(--_fs_xl);color: var(--text-white);margin: 0 0 15px 0;}
.graph canvas{border: 1px solid var(--border-color);}


.node_content{display: grid;grid-gap: 1rem;grid-template-columns: repeat(auto-fit,minmax(320px,1fr));}
.progess_bar svg {height: 40px;width: 40px;margin: auto;display: block;}
.progess_bar path {stroke-linecap: round;stroke-width: 10px;}
.progess_bar path.grey {stroke: var(--border-color);}
.progress_green path.green {stroke: #03DE8F;stroke-dasharray: 198;stroke-dashoffset: 198;animation: dash 3s ease-out forwards;}
.progress_ornge path.ornge {stroke: var(--color_red);stroke-dasharray: 198;stroke-dashoffset: 198;animation: dash 3s ease-out forwards;}
.progress_yellow path.yellow {stroke: #C7BD50;stroke-dasharray: 198;stroke-dashoffset: 198;animation: dash 3s ease-out forwards;}
.progress_text{fill: var(--text-white);font-size: 26px;font-family: 'Montserrat', sans-serif;}

/* //////////////////////////loginpage */
.login_col{height: 100vh;max-width: 500px;display: flex;flex-direction: column;margin: 0 auto;justify-content: center;}
.login_logo {display: block;max-width: 150px;}
.login_userheading{font-size: 24px;font-weight: 700;color: var(--text-white);}
.login_userheading h3 {font-size: 25px;font-weight: 600;color: var(--text-white);line-height: 1.3;}
.login_userheading h4 {font-size: var(--_fs_lg);font-weight: 400;color: var(--text-white);line-height: 1.3;}
.bordericon{width: 100%;max-width: 33px;max-height: 33px;min-width: 33px;min-height: 33px;border: 1px solid var(--border-color);border-radius: var(--_bdr_radius_sm) !important;}
.login_col .input-group{position: relative;}
.login_col .input-group img{position: absolute;right: 15px;top: 14px;z-index: 9;cursor: pointer;}
.login_col .form-control {border-radius: var(--_bdr_radius_sm) !important;width: 100% !important;color: var(--text-white);font-size: var(--_fs_lg);}
.login_col .form-control::placeholder{color: var(--text-white);}
.login_col label {width: 100%;color: var(--text-white);margin-bottom: 10px;font-size: var(--_fs_lg);font-weight: 500;}
.alreadyuser {display: flex;justify-content: space-between;align-items: center;gap: 10px;flex-wrap: wrap;}
.forgetpass {font-size: var(--_fs_lg);color: var(--primary_color);transition: 0.5s;position: relative;overflow: hidden;line-height: 2.2;}
.alreadyuser .form-switch {display: flex;align-items: center;gap: 5px;}
.login_col .form-check .form-check-input {float: left;margin-left: -1.5em;}
.alreadyuser .form-check-label {font-size: var(--_fs_lg);color: var(--primary_color);font-weight: 500;margin: 0;width: max-content;}
.form_login .btn.btn-primary{width: 100%;}
.donthave h4 {font-size: var(--_fs_lg);transition: 0.5s;position: relative;overflow: hidden;margin: 25px 0 0 0;color: var(--text-white);}
.donthave a {color: var(--primary_color);transition: 0.5s;line-height: 1.3;}


.meter{stroke-dasharray: 248; transition: all ease 0.5s;}
.btry {stroke: #03DE8F;}
.temp {stroke: var(--color_red);}
.humid {stroke: #C7BD50;}
.temp-0{stroke-dashoffset: 248; stroke: transparent; }
.temp-10{stroke-dashoffset: 240; animation:move10 1.5s ease;}
.temp-20{stroke-dashoffset: 200; animation:move20 1.5s ease;}
.temp-30{stroke-dashoffset: 180; animation:move30 1.5s ease;}
.temp-40{stroke-dashoffset: 160; animation:move40 1.5s ease;}
.temp-50{stroke-dashoffset: 120; animation:move50 1.5s ease;}
.temp-60{stroke-dashoffset: 100; animation:move60 1.5s ease;}
.temp-70{stroke-dashoffset: 80; animation:move70 1.5s ease;}
.temp-80{stroke-dashoffset: 40; animation:move80 1.5s ease;}
.temp-90{stroke-dashoffset: 20; animation:move90 1.5s ease;}
.temp-100{stroke-dashoffset: 0; animation:move100 1.5s ease;}

@keyframes move10 {
    0% {stroke-dashoffset: 248; }
  100% {stroke-dashoffset: 240;}
}
@keyframes move20 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 200;}
}
@keyframes move30 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 180;}
}
@keyframes move40 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 160;}
}
@keyframes move50 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 120;}
}
@keyframes move60 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 100;}
}
@keyframes move70 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 80;}
}
@keyframes move80 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 40;}
}
@keyframes move90 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 20;}
}
@keyframes move100 {
    0% {stroke-dashoffset: 220;}
  100% {stroke-dashoffset: 0;}
}