*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 #fff;
    -moz-scrollbar-width: 1px;
}
@font-face {
    font-family:'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf');
}
@font-face {
    font-family:'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf');
}
@font-face {
    font-family:'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf');
}
@font-face {
    font-family:'Roboto-Black';
    src: url('../fonts/Roboto-Black.ttf');
}
@font-face {
    font-family:'HelveticaNeueMedium';
    src: url('../fonts/HelveticaNeueMedium.otf');
}
@font-face {
    font-family:'HelveticaNeueBold';
    src: url('../fonts/HelveticaNeueBold.otf');
}
@font-face {
    font-family:'Inter-Bold';
    src: url('../fonts/Inter-Bold.ttf');
}
@font-face {
    font-family:'Inter-ExtraBold';
    src: url('../fonts/Inter-ExtraBold.ttf');
}
:root{
    --primary: #1170E4;
    --color-text: #141414;
    --color-light:#8B959A;
    --color-excolor:#979797;
    --border-color:#E2E6EA;
    --bg-white: #FFFFFF;
    --text-white:#FFFFFF;
    --bg-main: #f0f0f5;
    --roboto-regular: 'Roboto-Regular';
    --roboto-medium: 'Roboto-Medium';
    --roboto-bold: 'Roboto-Bold';
    --roboto-black: 'Roboto-Black';
    --helvetic-black: 'HelveticaNeueMedium';
    --helvetic-blod: 'HelveticaNeueBold';
}
html{
    scroll-behavior: smooth;
}
.cursor-pointer {
    cursor: pointer;
}

.main-wrapper{
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: var(--bg-main);
    display: flex;
    flex-direction: column;
}
.flex-none{
    flex: none;
}
.inner-wrapper{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}
.login-powered-by {
    position: absolute;
    left: 15px;
    bottom: 50px;
    transform: rotate(-90deg);
    white-space: nowrap;
}
.bg-yellow-light{
    background-color: #FF881226;
}
.bg-red-light{
    background-color: #FF031926;
}
.bg-yellow{
    background-color: #FF8812;
}
.bg-red{
    background-color: #FF0319;
}
.bg-green{
    background-color: #079F53;
}
.bg-green-light{
    background-color: #079F5326;
}
.color-red {
    color:#FF0000;
}
.color-green {
    color:#079F53;
}
.color-blue {
    color:#061a69;
}
.progress-color01{
    background-color: #00B8E9;
}
.progress-color02{
    background-color: #5AE19F;
}
.progress-color03{
    background-color: #FEE140;
}
.progress-color04{
    background-color: #FF0319;
}
.bg-primary{
    background-color: var(--primary);
}
.font-small-div{
    font-size: 12px;
}
.breadcrumb-div {
    color: #748AA1;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* ***********************************************login*************************************** */
.login-left {
    width: 540px;
    padding: 50px 0;
    padding-left: 150px;
    min-height: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.login-inner-left{
    width: 100%;
    text-align: center;
}
.login-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: var(--bg-white);
}
.login-right{
    width: calc(100% - 540px);
    height: auto;
    min-height: 100%;
    background-image: url(../images/login-img.svg);
    background-position: center left;
    background-repeat: no-repeat;
}
.logo-img{
    margin-bottom: 1rem;
}
.login-head{
    font-family: var(--helvetic-blod);
    color: var(--color-text);
    font-size: 36px;
    line-height: 56px;
    margin-bottom: 0;
}
.login-para{
    color: var(--color-light);
    margin-bottom: 1rem;
}
input{
    border: 1px solid var(--border-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
input::placeholder{
    color: var(--color-excolor);
}
.login-wrapper input{
    margin-bottom: 1rem;
}
.common-text{
    color: #696969;
    text-decoration: none;
}
.common-btn{
    background-color: var(--primary);
    color: var(--text-white);
    border: 1px solid var(--border-color);
    padding: 10px 10px;
}
.hidden-checkbox {
    display: none;
  }
  
  .checkbox-style {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background-color: var(--bg-white);
    vertical-align: middle;
    transition: all 0.3s ease;
    cursor: pointer;
}
  .hidden-checkbox:checked + .checkbox-style {
    background-color: var(--bg-white);
    position: relative;
  }
  .hidden-checkbox:checked + .checkbox-style::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background-color: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.custom-checkbox label{
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.login-by{
    color: #B8C5D3;
}
.login-by-meti{
    color: #627080;
}
/* ***********************************************login*************************************** */
/* ***********************************************header*************************************** */
.top-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 15px;
    background-color: var(--bg-white);
}
.top-bar-right{
    margin-left: auto;
}
.top-nav {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.top-item-list{
    color: #627080;
}
.top-item-list{
    border-right: 1px solid #627080;
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-item-list:last-child{
    border-right: 0;
}
.top-nav-list{
    padding-left: 15px;
    padding-right: 15px;
}
.top-nav-list:first-child{
    padding-left: 0;
}
.top-nav-list:last-child{
    padding-right: 0;
}
.user-dropdown .dropdown-toggle::after{
    display: none;
}
.dropdown-menu{
    font-size: 12px;
    padding: 0;
}
.dropdown-menu .dropdown-item{
    padding: 6px 12px;
}
.overflow-text-ellipse{
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hamburger{
    cursor: pointer;
    transform: translateY(-2px);
}
.notification-red{
    background-color: #FF0000;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 1px;
    right: 1px;
}
/* ***********************************************header*************************************** */
/* ***********************************************sidebar*************************************** */
.sidebar-wrapper{
    background-color: var(--bg-white);
    width: 0px;
    margin-right: 0px;
    position: relative;
    padding-bottom: 100px;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}
.main-wrapper.active .sidebar-wrapper{
    width: 80px;
    visibility: visible;
    margin-right: 16px;
    opacity: 1;
}
.sidebar-wrapper ul{
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.sidebar-wrapper li a{
    display: flex;
    padding: 18px 10px;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transform: scaleX(1) translateX(0px);
    -webkit-transform: scaleX(1) translateX(0px);
    -moz-transform: scaleX(1) translateX(0px);
    -ms-transform: scaleX(1) translateX(0px);
    -o-transform: scaleX(1) translateX(0px);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}
.sidebar-wrapper li a.active{
    background: transparent linear-gradient(235deg, #6C5FFC 0%, #2896E9 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 15px #ACB2C1;
    border-radius: 0px 5px 5px 0px;
    transform: scaleX(1.1) translateX(3px);
}
.sidebar-wrapper .login-powered-by{
    left: 10px;
    bottom: 30px;
}
/* ***********************************************sidebar*************************************** */
/* ***********************************************content-wrapper*************************************** */
.content-wrapper {
    width: 100%;
    padding: 20px;
    padding-top: 20px;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    display: flex;
    flex-direction: column;
}
.main-wrapper.active .content-wrapper{
width: calc(100% - 96px);
}
.dash-box{
    background-color: var(--primary);
    color: var(--text-white);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.dash-box::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ffffff24;
    z-index: 1;
    border-radius: 50%;
    right: 69px;
    top: 5px;
}
.dash-box.dash-box01::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ffffff24;
    z-index: 1;
    border-radius: 50%;
    left: 70px;
    bottom: 30px;
}
.dash-box-head {
    font-size: 22px;
    font-family: Roboto-Bold;
}
.dash-box01{
    background-color: #6C5FFC;
}
.dash-box02{
    background-color: #8A54EF;
}
.dash-box03{
    background-color: #1170E4;
}
.dash-filter-div{
    background-color: var(--bg-white);
    padding: 8px 12px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 5px;
}
.dash-available-box{
    background-color: var(--bg-white);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.dash-available-box-head {
    display: flex;
    align-items: center;
    padding: 15px;
}

.dash-avaliable-dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.dash-sub-header {
    color: var(--text-white);
    padding: 8px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}
.dash-available-phone{
    font-family: var(--helvetic-blod);
    font-size: 16px;
    color: #121212;
    padding: 8px 15px;
    text-align: center;
}
.dash-available-box-body{
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 0;
}
.dash-available-rating {
    background: transparent linear-gradient(267deg, #D3D3D3 0%, #D3D3D3 23%, #FF8812 59%, #FF3117 82%, #FF0319 100%) 0% 0% no-repeat padding-box;
    padding: 8px 15px;
    color: var(--text-white);
    font-family: var(--helvetic-blod);
    text-align: center;
    font-size: 20px;
}
.dash-rating-range{
    background: transparent linear-gradient(270deg, #079F53 0%, #FEE140 23%, #FF8812 59%, #FF3117 82%, #FF0319 100%) 0% 0% no-repeat padding-box;
    padding: 8px 15px;
}
.dash-rating-values {
    display: flex;
    gap: 2px;
    justify-content: space-between;
    font-family: var(--helvetic-blod);
}
.dash-production-deviation {
    background: #FF881227;
    padding: 6px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.font-bold-helvetic{
    font-family: var(--helvetic-blod);
}
.dash-production-deviation-sub{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
}
.dash-progress{
    background-color: #D3E0EF;
    border-radius: 0;
    height: 14px;
    position: relative;
}
.gradient-dot-head{
    color: var(--color-text);
    border-top: 1px solid var(--border-color);
}
.dash-inner-sub-heading{
    display: flex;
    align-items: center;
    gap: 5px;
}
.dot-gradient {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: var(--color-text);
}
.dot-gradient01{
    background: transparent linear-gradient(180deg, #1529BC 0%, #ED71D7 62%, #EFD4FF 100%) 0% 0% no-repeat padding-box;
}
.dot-gradient02{
    background: transparent linear-gradient(180deg, #FF8F6F 0%, #FFC46D 48%, #FAEC45 100%) 0% 0% no-repeat padding-box;
}
.dot-gradient03{
    background: transparent linear-gradient(180deg, #6FFFE9 0%, #6DABFF 48%, #4592FA 100%) 0% 0% no-repeat padding-box;
}
.apexcharts-text.apexcharts-datalabel-value{
    fill: #FF8812;
    font-family: var(--helvetic-blod) !important;
    font-size: 18px;
    margin-top: 10px;
    transform: translateY(-9px);
}
.dash-progress-outer{
    position: relative;
}
.progress-timer{
    position: absolute;
    background-color: var(--bg-white);
    box-shadow: 0px 5px 10px #00000029;
    padding: 5px 10px;
    border-radius: 5px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    white-space: nowrap;
    display: none;
}
.progress-timer::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    box-shadow: 0px 5px 10px #00000029;
    background: #fff;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    top: -4px;
}
.dash-progress-outer:hover .progress-timer{
    display: block;
}
/* ***********************************************content-wrapper*************************************** */
.footer-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    display: none;
}
.box-div {
    background: #079F531A;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    font-size: 16px;
}
.box-div-right,.box-div-left{
    padding: 10px;
}
.boc-div-left {
    width: 56px;
    background: #FF8812;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    height: 100%;
}
.box-div-right {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 5px;
    font-family: var(--helvetic-blod);
    align-items: center;
}
.dash-available-box-production .dash-sub-header{
    color: var(--color-text);
    background-color: #1170E41A;
    text-transform: uppercase;
}
.dash-available-box-production .dash-available-box-body{
    padding-top: 12px;
}
.font-bold-size{
    font-family: var(--helvetic-blod);
}
.dash-available-box-production  .dash-rating-values{
    font-family: 'Roboto-Regular';
    color: #748AA1;
}
.dash-available-box-production  .dash-inner-sub-text ,.production-div .dash-inner-sub-text{
    color: #748AA1;
}
.production-inner-div {
    color: var(--color-text);
    text-transform: uppercase;
    width: 100%;
    display: flex
;
    flex-direction: column;
    padding: 10px;
}
.production-second{
    background-color: var(--bg-white);
}
.production-first{
    background-color: #1170E41A;
}
.production-div {
    padding: 2px;
    background-color: var(--bg-white);
    border-radius: 2px;
    height: 100%;
    display: flex
;
}
.production-div-outer{
    border: 1px solid var(--border-color);
    height: 100%;
}
.production-div .dash-inner-sub-text {
    margin-top: auto;
}
.card-outer{
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    padding: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding-bottom: 15px;
}
.card-outer .production-div-head{
    color: var(--color-text);
    text-transform: uppercase;
    font-family: var(--helvetic-blod);

}
.card-main-head {
    color: #FF0319;
    font-size: 22px;
    font-family: var(--helvetic-blod);
}
.card-left-head {
    font-family: var(--helvetic-blod);
    text-transform: uppercase;
}
.card-outer-top-head {
    display: flex;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
}
.custom-tooltip{
    background: var(--bg-white);
    padding: 2px 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.tooltip-value{
    font-family: var(--helvetic-blod) !important;
}
.tooltip-value span{
    font-family: var(--roboto-regular);
}
.apexcharts-datalabels{
    display: none;
}
.custom-tooltip-circle{
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    color: #000;
    padding: 2px 6px
}
.custom-tooltip-circle-div{
    width: 40px;
    height: 40px;
    background-color: var(--bg-white);
    color: var(--color-text);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto-Regular' !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
}
.apexcharts-tooltip.apexcharts-theme-dark{
    background-color: transparent !important;
}
.tools-div {
    background-color: var(--bg-white);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.tools-inner-div {
    font-family: var(--helvetic-blod);
    border: 1px solid #1170E4;
    background-color: #1170E41A;
    padding: 10px 15px;
    border-radius: 10px;
    text-transform: uppercase;
}
.tools-inner-div:first-child{
    border: 0;
    border-right: 1px solid #748AA1;
    background-color: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    padding: 25px 35px;
}
.node-tree{
    padding-left: 0;
    margin-bottom: 0;
    overflow: auto;
}
.node-tree li li{
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 10px;
    position: relative;
    margin-top: 10px;
    background: transparent linear-gradient(180deg, #6C5FFC 0%, #2896E9 100%) 0% 0% no-repeat padding-box;
box-shadow: 0px 5px 20px #FF8F6F26;
border-radius: 10px;
color: var(--text-white);
width: 100px;
height: 70px;
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
text-align: center;
flex: none;
}
li.none-parent-li{
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.node-tree ul{
    display: flex    ;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-left: 0;
    position: relative;
}

.node-parent li::before{
    content: '';
    position: absolute;
    border-right: 1px solid #2A42C3;
    width: 0px;
    height: 50px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.node-sub-parent li::before,.node-sub-parent li::after{
    content: '';
    position: absolute;
   background:  #2A42C3;
    width: 1px;
    height: 50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    left: 50%;
}
.node-sub-parent li::before {
    top: 100%;
}
.node-sub-parent li::after{
bottom: 100%;
}
.node-parent li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background:  #2A42C3;
    bottom: -50px;
    left: 50%;
}
.node-parent li:last-child::after{
    right: 50%;
    left: unset;
}
.node-sub-tree li::before{
    content: '';
    position: absolute;
   background:  #2A42C3;
    width: 1px;
    height: 14px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    left: 50%;
    bottom: 100%;
}
.node-sub-tree li::after{
    content: '';
    position: absolute;
   background:  #2A42C3;
    width: calc(100% + 18px);
    height: 1px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    top: -14px;
    right: -11px;
}
.node-sub-tree li:first-child::after{
    width: 0;
}
.node-head {
    font-size: 12px;
}
.node-sub-head {
    font-family: var(--roboto-bold);
}
.node-para {
    text-align: right;
    font-size: 12px;
}
ul.node-parent{
    gap: 100px;
}
ul.node-parent li{
    margin-bottom: 50px;
}
ul.node-sub-parent li{
    margin-top: 50px;
    margin-bottom: 50px;
}
.node-sub-tree{
    margin-top: 4px;
}
.node-sub-tree li:last-child::before{
    margin-left: 1px;
}
.node-parent-absolute{
    width: 18px;
    height: 18px;
    background-color: #020202;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: -9px;

}
.node-parent-absolute-text{
    width: 18px;
    height: 14px;
    background-color: #020202;
    position: absolute;
    bottom: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: var(--helvetic-blod);
    line-height: 0;
    cursor: pointer;
    z-index: 1;
}
.node-sub-tree.active{
    display: none;
}
.node-parent-absolute-text.active + li::before{
    height: 25px;
}
ul.node-parent li > div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-sub-page-head {
    font-family: var(--helvetic-blod);
    font-size: 22px;
    margin-top: 10px;
}
.btn-report-btn{
    background-color: #2A42C3;
    color: var(--text-white);
    font-size: 12px;
}
.download-btn-div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: end;
}
.btn-report-btn {
    background-color: #fff;
    color: var(--text-white);
    border: 0;
    outline: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-report-btn01{
    background-color: #2A42C3;
    color: var(--text-white);
}
.btn-report-btn02{
    background-color: #1170E4;
    color: var(--text-white);
}
.form_group_label {
    margin-bottom: 3px;
}
.form_group {
    margin-bottom: 15px;
}
.form_group input,.form_group select{
    font-size: 14px;
}
.form_group:last-child {
    margin-bottom: 0px;
}
.input-with-icon i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    color: var(--color-excolor);
}
.input-with-icon input{
    padding-left: 25px;
}
.form-group-btn{
    border: 1px solid  #1170E4;
    border-radius: 0;
    color: #1170E4;
    font-size: 12px;
    width: calc(50% - 5px);
    outline: 0 in !important;
    box-shadow: none !important;
}
.form_group_btn{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.form-group-btn-search{
    background-color: #1170E4;
    color: var(--text-white);
}

/* Optional: Custom styling */
.select2-container {
    min-width: 200px;
    width: 100% !important;
}
.select2-selection__choice {
    background-color: #1170E4 !important;
    border: 1px solid #1170E4 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    color: #fff;
    padding-right: 15px !important;
    margin-top: 2px;
    border-radius: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    right: 0;
    left: unset !important;
    background-color: unset !important;
    color: #fff !important;
}
#chart4,#chart5{
    width: 100%;
}
.bstreeview .list-group-item,.bstreeview .list-group{
    border: 0;
}
.bstreeview .list-group-item{
    border-top: 1px solid var(--border-color);
}
.bstreeview .list-group .list-group-item{
    border-top: 0;
}
.bstreeview .list-group-item{
    background-color: transparent;
    cursor: pointer;
}
.bstreeview{
    padding: 20px 0;
}
.dash-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    gap: 25px;
}
.dash-left-wrapper {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.dash-right-wrapper {
    width: calc(100% - 550px);
}
.dash-box-div {
    border: 1px solid #D7E3F7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px;
    box-shadow: 5px 10px 20px 0px #E2E9F4;
    background: #F2F5FA;
    border-radius: 10px;
}
.dash-box-container-img {
    flex: none;
}
.dash-box-container-head {
    color: #207EFA;
    font-family: 'Inter-Bold';
    font-size: 18px;
}
.dash-box-container-subhead {
    font-family: 'Inter-ExtraBold';
    font-size: 26px;
}
.dash-box-container-subhead span{
    font-size: 12px;
}
.dash-right-wrapper-top {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.dash-right-wrapper-top-inner {
    width:calc(25% - 12px);
    padding: 15px;
    background: #000;
    color: var(--text-white);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.top-green{
    background-color: #1BCF83;
    /* box-shadow: 15px 20px 34px 0px #1BC9CF40; */
}
.top-light-green{
    background-color: #BEAF37;
    /* box-shadow: 15px 20px 34px 0px rgba(154, 205, 50, 0.5); */
}
.top-red{
    background-color: #FA4E5E;
    /* box-shadow: 15px 20px 34px 0px #FA4E5E40; */
}
.top-yellow{
    background-color: #FFA633;
    /* box-shadow: 15px 20px 34px 0px #FFA63340; */

}
.dash-right-top-head {
    font-family: 'Inter-Bold';
    font-size: 18px;
}
.dash-right-top-subhead {
    font-size: 18px;
    font-family: 'Inter-Bold';
}
.dash-right-wrapper-top-inner img{
    margin-top: 15px;
    margin-left: auto;
    display: block;
}
.dash-right-wrapper-bottom {
    padding: 50px;
    background: #F2F5FA;
    border: 1px solid #C7D9F6;
    border-radius: 10px;
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 195px);
}
.page-wrapper{
    margin-top: 15px;
}
.input-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-bottom: 1px solid;
    border-right: 1px solid;
    margin-top: -2px;
    border-color: #627080;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    -o-transform: rotate(45deg) translateY(-50%);
    z-index: 1;
    cursor: pointer;
}
select{
    background-image: none !important;
}
.btn-filter {
    padding: 5px;
    background-color: var(--primary);
    color: var(--text-white);
    box-shadow: 0px 5px 20px #0000001C;
    border-radius: 5px;
    width: 100%;
    font-weight: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.position-relative input,.position-relative input::placeholder,.position-relative select{
    color: #121212;
}
.position-relative textarea::placeholder{
    color: #121212;
}
.input-dropdown {
    box-shadow: 0px 5px 6px #A2A2A257;
    border: 1px solid #CECECE;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    width: 100%;
    top: 100%;
    background: #fff;
    margin-top: 2px;
    max-height: 150px;
    overflow: auto;
    display: none;
}
.input-dropdown-list {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    padding: 2px 0;
}
.btn-group-div {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-group-div .btn-filter{
    width: fit-content;
    min-width: 120px;
}
.btn-filter-outer{
    border: 1px solid #707070;
    background-color: transparent;
    color: var(--color-text);
}
table th{
    background-color: transparent !important;
    vertical-align: middle;
    text-align: center;
    font-weight: unset;
    font-family:'Roboto-Medium';
    text-transform: uppercase;
}
table td{
    text-align: center;
    vertical-align: middle;
    background-color: var(--bg-white) !important;
}
.modal table th{
    background-color: #4211E41A !important;
}
.modal-title {
    font-size: 25px;
    font-family: 'HelveticaNeueBold';
}
.table-header {
    font-size: 20px;
    font-family: 'HelveticaNeueBold';
    display: flex
;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.table-header .btn-filter {
    width: fit-content;
    min-width: 120px;
    font-family: var(--roboto-regular);
}
.modal table td{
    border-right: 0;
    border-width: 0;
}




.tank-outer-div{
    /* overflow: auto; */
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: none;
    /* margin: 0 auto; */
    margin-top: 50px;
    padding-right: 0;
}
.tank-outer-top-div{
    display: flex;
}
.tank-img-div{
    flex: none;
    text-transform: uppercase;
    font-family: 'Roboto-Bold';
    font-size: 18px;
    position: relative;
}
.tank-drier {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    text-align: center;
    margin-top: -3px;
}
.tank-drier-text {
    margin-top: 5px;
}
.tank-drier-text:last-child{
    margin-top: 0;
}
.tank-img{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}
.tank-driver-div{
    border: 6px solid #11546A;
    border-radius: 10px;
    gap: 10px;
    padding: 2px 8px;
    background: #E0E0E0;
}
.tank-driver-outer-div {
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
    top: 100%;
}
.tank-driver-cap{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
}
.tank-drier-text-danger{
    color: #FF4032;
}
.tank-outer-next-div {
    display: flex;
    margin-top: -3px;
}
.tank-outer-next-left {
    margin-left: -4px;
}
.tank-outer-next-right{
    margin-left: auto;
    margin-right: 3px;
    margin-top: 4px;
}
.tank-img-condenser {
    margin-left: -10px;
}
.tank-img-condenser .tank-driver-outer-div{
    top: -20px;
}
.tank-img-position {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -3px;
    left: 0;
    padding-left: 8px;
}
.tank-condenser-top-curve img {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
}
.tank-condenser-top-curve-up{
    transform: translateY(8px);
}
.tank-condenser-top-curve-down img{
    transform: translateY(16px);
}
.tank-condenser-top img {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
}
.img-fan{
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
}
.flex-next{
    margin-top: 7px;
}
.tank-condenser-top-curve-bottom img{
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
}
.tank-condenser-top.transform-change{
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
}
.flex-nex-change{
    margin-top: 8px;
}
.flex-nex-change .tank-condenser-top img{
    transform: translateY(4px);
}
.flex-nex-change .tank-condenser-top-curve img{
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
}
.flex-next.flex-next-next{
    margin-top: 7px;
}
.tank-img-condenser .tank-driver-text-change{
    top: 50%;
    z-index: 1;
    right: -60px;
    left: unset;
    width: fit-content;
    transform: translateY(-50%);
}
.tank-outer-next-outer {
    margin-top: -6px;
    margin-left: -2px;
}
.tank-condenser-next-img{
    transform: translateY(9px);
    -webkit-transform: translateY(9px);
    -moz-transform: translateY(9px);
    -ms-transform: translateY(9px);
    -o-transform: translateY(9px);
}
.img-fluid-change{
    max-height: 100px;
    height: 79px;
    max-width: 100%;
}
.right-tank-pumb {
    transform: translateX(6px);
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -o-transform: translateX(6px);
}
.tank-bumb-valve{
    transform: translate(-22px, 2px);
    -webkit-transform: translate(-22px, 2px);
    -moz-transform: translate(-22px, 2px);
    -ms-transform: translate(-22px, 2px);
    -o-transform: translate(-22px, 2px);
}
.tank-drier-img{
    margin-top: -17px;
}
.change-tank-driver-outer-div {
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    top: -60px;
}
.left-tank-pumb{
    transform: translateX(-6px);
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
}
.right-tanl-custom {
    transform: translateX(-17px);
    margin-top: 1px;
    -webkit-transform: translateX(-17px);
    -moz-transform: translateX(-17px);
    -ms-transform: translateX(-17px);
    -o-transform: translateX(-17px);
}
.tank-outer-footer-div {
    display: flex;
    padding-bottom: 90px;
}
.tank-outer-footer-div .tank-img-edit {
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
}
.tank-compressor-next-img{
    transform: translateY(7px);
    -webkit-transform: translateY(7px);
    -moz-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px);
}
.temperature-div {
    position: absolute;
    text-align: center;
    top: -100%;
    margin-top: -20px;
    color: #267BEB;
}
.temperature-div-head {
    font-size: 15px;
    font-family: 'Roboto-Bold';
}
.temperature-div-sub-head {
    font-size: 18px;
    font-family: 'Roboto-Bold';
}
.tank-drier.compressor-tank-driver{
    left: -40px;
}
.level-indicator {
    position: absolute;
    right: -30px;
    top: -100%;
    transform: translateY(-30px);
}
.tank-level-indicator {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin: -34px -48px;
    width: 100px;
    text-align: center;
}
.level-indicator .temperature-div{
    top: 100%;
    width: 100%;
    margin-top: 10px;
}
.tank-outer-pumb{
    padding-left: 30px;
    position: absolute;
    top: -100%;
    margin-top: -60px;
}
.tank-outer-pumb-div{
    min-width: 169px;
    height: 100%;
}
.tank-inner-bottom{
    display: flex;
    align-items: center;
}
.tank-inner-content{
    color: #427CC8;
    text-align: center;
}
.pumb-div{
    margin-top: 20px;
    width: fit-content;
    margin-left: auto;
}
.pumb-div .tank-drier-text{
    font-size: 16px;
    margin-top: 5px;
}
.tank-switcher{
    background: #CDCDCD;
    padding: 20px;
    padding-top: 40px;
    border-radius: 0 0 50px 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;;
    height: fit-content;
    flex: none;
    transform: translateX(-30px);
}
.tank-inner-switcher {
    width: 50px;
        height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
}
.tank-yellow{
    background-color: #EDFF78;
}
.tank-primary{
    background-color: #325A73;
}
.tank-inner-switcher img{
    width: 30px;
    height: 30px;
    padding: 4px;
}
.content-wrapper-inner{
    display: flex;
    /* overflow: auto; */
    justify-content: center;
}
.gauge-outer-div {
    position: absolute;
    top: 15px;
    display: flex;
    flex-direction: column;
}
.tank-drier-text-success{
    color: #139511;
}
.highcharts-label.highcharts-data-label.highcharts-data-label-color-0 text{
    display: none;
}
.highcharts-credits{
    display: none;
}
#container > div,#container1 > div,.highcharts-root{
    width: 160px !important;
    height: 100px !important;
}
.highcharts-plot-background,.highcharts-background{
    display: none;
}
.highcharts-label.highcharts-tooltip.highcharts-color-0{
    display: none;
}
.container-text{
    position: absolute;
    top: 50%;
    text-transform: uppercase;
    font-family: 'Roboto-Bold';
}
.container-low{
    left: 0;
    transform: rotate(294deg) translateY(14px);
    color: #5E3B3B;
}
.container-high {
    right: 0;
    transform: rotate(61deg) translateY(14px);
}
.right-tank-pumb.left-tank-pumb .img-fluid-change,.right-tank-pumb.right-tanl-custom .img-fluid-change{
    height: 60px;
}
.pulb-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
    width: 16px;
    top: -12px;
}


.switch-accounts {
    box-shadow: 0px 5px 20px #BCBCBC29;
    border-radius: 5px;
    background: #fff;
    padding: 20px;
    color: #182C40;
}
.switch-accounts-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.switch-accounts-bottom {
    background: #1170E40D;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.switch-accounts-head {
    font-size: 16px;
    font-family: 'Roboto-Medium';
    margin-bottom: 2px;
}
.switch-accounts-sub-head {
    font-size: 16px;
}
.switch-accounts-bottom i{
    color: #1170E4;
}
.switch-accounts-bottom{
    font-family: 'Roboto-Medium';
    cursor: pointer;
}
.form-date-style[readonly]{
    background-color: #fff;
}
input[type='date']::-webkit-calendar-picker-indicator {background: 
    transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    }
    .btn-common{
        background-color: #1170E4;
        color: #fff;
        border: 1px solid #1170E4;
        min-width: 120px;
        font-size: 14px;
    }
    .btn-common-clear{
        background-color: #fff;
        color: #1170E4;
    }
    .button-group-div {
        display: flex    ;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .button-group-div .btn-common{
        background-color: #2A42C3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: calc(20% - 16px);
    }
    .down-time-entry .nav-tabs{
        border-bottom: 0;
        background: #F4F6FB;
    }
    .down-time-entry .nav-tabs li{
        width: 50%;
        background: #F4F6FB;
        border: 0;
    }
    .down-time-entry .nav-tabs li button{
        width: 100%;
        padding: 10px;
        border-color: transparent !important;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        font-size: 15px;
        font-family: 'Roboto-Bold';
        color: #5D7793;
    
    }
    .down-time-entry .nav-tabs li button.active{
        background: #5D7793;
        color: #fff;
 
}
.footer-btn-group{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.footer-btn-group button{
    width: calc(50% - 8px);
}
.table-down-time th,.table-down-time td{
    font-size: 12px;
    text-align: left;
}
.table-down-time th{
    background-color: #4211E41A !important;
    border-bottom-color: transparent !important;
    
}
.table-down-time select,.table-down-time input{
    font-size: 12px;
}
.table-down-time td{

}
.font-Medium-size{
    font-family: 'Roboto-Medium';
}
.batch-entry-div-head {
    background: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0px 5px 20px #8888881A;
    gap: 10px;
    border-radius: 5px;
    padding: 10px;
}
.batch-entry-div-head-right {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    justify-content: end;
    color: #627080;
    
}
.batch-entry-div-head-right i{
    cursor: pointer;
}
.batch-entry-div-head-left {
    width: 50%;
    font-family: 'Roboto-Bold';
    cursor: pointer;
}
.batch-inner-listing-head{
    font-family: 'Roboto-Bold';
}
.batch-inner-listing-sub-head {
    color: #627080;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}
.batch-listing-status {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
}
.batch-listing-success{
    background: #4ADB29;
}
.batch-listing-danger{
    background: #FF0000;
}
.batch-inner-listing {
    background: #fff;
    padding: 5px;
    box-shadow: 0px 5px 20px #8888881A;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    padding: 10px;
    flex: 1;
}
.batch-inner-listing-right {
    flex: none;
}
.batch-listing {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.batch-entry-div{
    /* height: calc(100% - 175px);
    overflow: hidden; */
    position: relative;
    height: calc(100% - 25px);
}
.batch-entry-div-body {
    height: 100%;
    overflow: auto;
    width: 100%;
}
.batch-main-div {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.batch-div-left {
    width: 300px;
    position: absolute;
    height: calc(100% - 188px);
}
.batch-div-right{
    width: calc(100% - 300px);
    margin-left: 300px;
    padding: 0 15px;
    padding-right: 0;
}
.batch-card-outer {
    border: 1px solid #2A42C3;
    border-radius: 5px;
    background: #2A42C31A;
    padding: 10px 10px 15px 10px;
}
.batch-inner-listing.active {
    background: #2A42C3;
    color: #fff;
}
.batch-inner-listing.active .batch-inner-listing-sub-head{
    color: #fff;
}
.btn-search{
    background-color: #5D7793;
    color: #fff;
    border-color: #fff;
}
.dash-header-search {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}
.dash-search-div {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.dash-search-div input{
    width: 200px;
}
.machine-table .dropdown .dropdown-toggle::after{
    display: none;
}
.machine-table .dropdown-menu{
    right: 0px !important;
    min-width: 100px;
    left: unset !important;
}
.machine-table table{
    margin-bottom: 50px;
}
.machine-table  th, .machine-table  td{
    padding: 10px 10px;
    text-align: left;
}
.machine-table  th{
    background-color: #4211E41A !important;
    min-width: 80px;
}
.machine-table .table>:not(caption)>*>*{
    border-bottom: 0;
}
.shift-data-tab{
    border: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    overflow-x: auto;
    justify-content: space-between;
    overflow-y: hidden;
    flex-wrap: nowrap;
}
.shift-data-tab .nav-item{
    flex: none;
}
.shift-data-tab .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 4px 0;
    color: #2C2C2C;
}
.shift-data-tab .nav-link.active {
    border: 0;
    border-bottom: 2px solid #1170E4;
    margin-bottom: 0;
    border-radius: 0;
    color: #1170E4;
}
.breadcrumb-iner-div {
    display: flex;
    align-items: center;
    gap: 6px;
}