html, body{
    background: #f1f5f8;
    margin: 0;
    height: 100%;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: #8a8a8a;
}

.bg-color-primary{
    background: var(--primary-color);
}

.bg-color-orange{
    background: var(--orange);
}

.alert-container{
    position: fixed;
    z-index: 9999;
    background: #fff;
    bottom: 40px;
    left: 50%;
    border-radius: 50px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 20%);
    display: none;
    width: 300px;
    margin-left: -150px;
}

.alert-inner{
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.alert-icon{
    font-size: 30px;
}

.alert-icon-success{
    color: #009688;
}

.alert-body{
    padding: 0 15px;
    color: #012f47;
    font-weight: 600;
}

.alert-body-alt{
    font-size: 12px;
    font-weight: 400;
    color: #7d949d;
}

/** Login Screen Start **/

/** Temp Logo Style Start **/

.login-logo-container{
    margin-top: -25px;
    margin-left: -25px;
    height: 139px;
}

/** Temp Logo Style End **/

.login-container{
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.login-box{
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(20,46,110,0.1);
}

.login-box-l{
    background: var(--primary-color);
    padding: 40px;
}

.lb-company-logo{
    font-weight: 800;
    color: var(--orange);
    font-size: 25px;
}

.lb-title{
    font-size: 39px;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f8;
    margin-top: 113px;
    margin-bottom: 50px;
}

.lb-photo{
    width: 278px;
}

.lb-photo img{
    width: 100%;
}

.login-form-container{
    padding: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.login-form-title{
    font-size: 33px;
    color: #000;
}

.login-form-holder{
    width: 100%;
}

.login-input-holder{
    margin-top: 35px;
    width: 100%;
}

.login-input-wrap{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.login-label{
    color: var(--orange);
    font-size: 16px;
    position: absolute;
    top: 17px;
    transition: all 0.3s;
}

.login-input{
    background: none;
    flex: 1;
    border: none;
    height: 50px;
    font-size: 16px;
    color: #2e384d;
}

.login-input:focus{
    outline: none;
}

.login-icon{
    font-size: 17px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-icon-btn{
    cursor: pointer;
}

.login-input-line{
    position: absolute;
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    bottom: 0;
    left: 0;
}

.login-focus-line{
    width: 0;
    height: 100%;
    background: var(--orange);
    transition: all 0.3s;
}

.login-input-focus .login-focus-line{
    width: 100%;
}

.login-input-focus .login-label{
    top: -10px;
    font-size: 14px;
}

.login-wrap-error .login-focus-line{
    background: red;
}

.login-wrap-error .login-label{
    color: red;
}

.login-input-error{
    background: red;
    font-size: 11px;
    color: #fff;
    padding: 3px 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    width: max-content;
    display: none;
}

.login-submit-holder{
    margin-top: 50px;
}

.login-submit-button{
    width: 250px;
    height: 60px;
    background: var(--secondary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1);
    font-size: 18px;
    margin: auto;
    transition: all 0.3s;
}

.login-fp-link{
    color: var(--secondary-color);
    padding: 10px;
    cursor: pointer;
}

.login-fp-link:hover{
    text-decoration: underline;
}

.login-copyright{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #8e8e8e;
    margin: 50px;
}

.copyright-logo{
    display: flex;
    align-items: center;
    color: var(--orange);
}

.copyright-logo img{
    width: 50px;
    margin: -10px;
    margin-top: -7px;
}

.login-submit-loading{
    background: #aaa;
    cursor: default;
}

.login-error-wrap{
    text-align: center;
    color: red;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
    display: none;
}

/** Loader Start **/

.ispinner {
    position: relative;
    width: 20px;
    height: 20px;
}
.ispinner .ispinner-blade {
    position: absolute;
    top: 6.5px;
    left: 8.5px;
    width: 2.5px;
    height: 6.5px;
    background-color: #333;
    border-radius: 1.25px;
    animation: iSpinnerBlade 1s linear infinite;
    will-change: opacity;
}
.ispinner .ispinner-blade:nth-child(1) {
    transform: rotate(45deg) translateY(-6.5px);
    animation-delay: -1.625s;
}
.ispinner .ispinner-blade:nth-child(2) {
    transform: rotate(90deg) translateY(-6.5px);
    animation-delay: -1.5s;
}
.ispinner .ispinner-blade:nth-child(3) {
    transform: rotate(135deg) translateY(-6.5px);
    animation-delay: -1.375s;
}
.ispinner .ispinner-blade:nth-child(4) {
    transform: rotate(180deg) translateY(-6.5px);
    animation-delay: -1.25s;
}
.ispinner .ispinner-blade:nth-child(5) {
    transform: rotate(225deg) translateY(-6.5px);
    animation-delay: -1.125s;
}
.ispinner .ispinner-blade:nth-child(6) {
    transform: rotate(270deg) translateY(-6.5px);
    animation-delay: -1s;
}
.ispinner .ispinner-blade:nth-child(7) {
    transform: rotate(315deg) translateY(-6.5px);
    animation-delay: -0.875s;
}
.ispinner .ispinner-blade:nth-child(8) {
    transform: rotate(360deg) translateY(-6.5px);
    animation-delay: -0.75s;
}
.ispinner.ispinner-large {
    width: 35px;
    height: 35px;
}
.ispinner.ispinner-large .ispinner-blade {
    top: 11.5px;
    left: 15px;
    width: 5px;
    height: 12px;
    border-radius: 2.5px;
}
.ispinner.ispinner-large .ispinner-blade:nth-child(1) {
    transform: rotate(45deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(2) {
    transform: rotate(90deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(3) {
    transform: rotate(135deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(4) {
    transform: rotate(180deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(5) {
    transform: rotate(225deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(6) {
    transform: rotate(270deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(7) {
    transform: rotate(315deg) translateY(-11.5px);
}
.ispinner.ispinner-large .ispinner-blade:nth-child(8) {
    transform: rotate(360deg) translateY(-11.5px);
}

@keyframes iSpinnerBlade {
  0% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
    }
}


/** Loader End **/

/** Login Screen End **/

/** Dashboard Start **/

.sidebar-container{
    position: fixed;
    z-index: 9;
    background: var(--primary-color);
    width: 230px;
    height: 100%;
    overflow: hidden;
}

.dashboard-fluid{
    width: calc(100% - 230px);
    margin-left: 230px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.topbar-fluid{
    width: 100%;
    background: #fff;
    height: 60px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.dashboard-container{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    padding: 80px 20px 0 20px;
    padding-top: 80px;
    box-sizing: border-box;
}

.dashboard-inner{
    padding: 15px 0;
}

/** Topbar Start **/

.topbar-container{
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.topbar-right{
    display: flex;
    align-items: center;
    height: 100%;
}

.topbar-user-wrap{
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 5px;
    height: 100%;
    padding: 0 10px;
    position: relative;
    transition: all 0.3s;
}

.topbar-user-avatar{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid;
    box-sizing: border-box;
}

.topbar-user-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.topbar-user-info{
    margin: 0 10px;
    color: var(--primary-color);
    min-width: 100px;
}

.topbar-user-role{
    font-size: 9px;
    text-transform: uppercase;
}

.topbar-user-arrow{
    transition: all 0.3s;
}

.tb-user-wrap-open{
    background: var(--primary-color);
    color: #fff;
}

.tb-user-wrap-open .topbar-user-info{
    color: #fff;
}

.tb-user-wrap-open .topbar-user-arrow{
    transform: rotate(-180deg);
}

.topbar-action-btn{
    margin: 0 5px;
    position: relative;
}

.tb-action-header{
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
}

.topbar-title{
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
}

.topbar-path{
    font-size: 11px;
    margin-top: 3px;
    color: var(--orange);
}

.topbar-path a{
    color: #8a8a8a;
    text-decoration: none;
}

.topbar-path a:hover, .topbar-path .topbar-path-active{
    color: var(--primary-color);
}

.topbar-path-active{
    font-weight: 500;
    cursor: default;
}

.tb-user-menu-container{
    position: absolute;
    top: 100%;
    width: 100%;
    background: #fff;
    left: 0;
    box-shadow: 0 5px 15px -5px rgb(0 0 0 / 20%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid var(--primary-color);
    border-top: none;
    box-sizing: border-box;
    display: none;
    overflow: hidden;
}

.tbu-menu-item{
    display: flex;
    font-size: 14px;
    padding: 15px;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.3s;
    border-bottom: 1px dashed #ccc;
}

.tbu-menu-item:last-child{
    border-bottom: none;
}

.tbu-menu-icon{
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

.tbu-menu-item:hover{
    color: var(--orange);
}

#topbar-logout:hover{
    color: red;
}

/** Topbar End **/

/** Sidebar Start **/

.sidebar-logo-container{
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.sidebar-company-logo{
    font-size: 24px;
    font-weight: 700;
    color: var(--orange);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-inner{
    height: calc(100% - 60px);
    overflow-x: hidden;
}

.sidebar-menu-container{
    padding: 10px 20px;
}

.sidebar-menu-item{
    position: relative;
    margin: 10px 0;
    text-decoration: none;
    display: block;
}

.sidebar-menu-header{
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.sidebar-menu-header:hover, .sidebar-menu-active .sidebar-menu-header, .sidebar-menu-open .sidebar-menu-header{
    color: var(--orange);
}

.sb-menu-header-icon{
    font-size: 18px;
    line-height: 1;
    width: 24px;
    text-align: center;
}

.sb-menu-header-title{
    padding: 0 15px;
}

.sb-menu-header-chevron{
    font-size: 12px;
    transition: all 0.3s;
}

.sidebar-menu-open .sidebar-menu-header .sb-menu-header-chevron{
    transform: rotate(-180deg);
}

.sidebar-submenu-container{
    padding-left: 35px;
    display: none;
}

.sidebar-submenu-item{
    cursor: pointer;
    text-decoration: none;
}

.sb-submenu-title{
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    transition: all 0.3s;
}

.sb-submenu-title span{
    margin-right: 10px;
}

.sidebar-submenu-item:hover .sb-submenu-title, .sidebar-submenu-active .sb-submenu-title{
    color: var(--orange);
}

.sidebar-submenu-expandable .sb-submenu-title{
    display: flex;
    align-items: center;
}

.sb-submenu-chevron{
    font-size: 12px;
    margin-left: 15px;
    transition: all 0.3s;
}

.submenu-expand-container{
    padding-left: 15px;
    display: none;
}

.submenu-expand-item{
    font-size: 14px;
    color: #fff;
    padding: 10px 0;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.submenu-expand-item span{
    margin-right: 10px;
}

.submenu-expand-item:hover{
    color: var(--orange);
}

.sidebar-submenu-open .sb-submenu-title{
    color: var(--orange);
}

.sidebar-submenu-open .sb-submenu-chevron{
    transform: rotate(-180deg);
}

.sidebar-menu-disabled{
    opacity: 0.5;
}

.sidebar-menu-disabled .sidebar-menu-header{
    cursor: default;
}

.sidebar-menu-disabled:hover .sidebar-menu-header{
    color: #fff;
}

/** Sidebar End **/

.dashboard-row{
    display: flex;
    margin: 0 -7.5px;
    margin-bottom: 35px;
}

.dashboard-col-3{
    width: 25%;
    max-width: 25%;
    flex: 0.25;
    margin: 0 7.5px;
}

.dashboard-top-block{
    background: var(--primary-color);
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(20, 46, 110, 0.4);
    position: relative;
}

.top-block-info{
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.top-block-value{
    font-size: 30px;
    font-weight: 700;
}

.top-block-icon{
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 60px;
    color: #fff;
    opacity: 0.2;
}

.dashboard-row-wrap{
    margin: 20px 0;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 3px;
    box-sizing: border-box;
}

.auto-col-4{
    width: calc(33.3% - 20px);
}

.dashboard-white-block{
    background: #fff;
    height: 220px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 8px rgba(20, 46, 110, 0.16);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.db-white-block-icon{
    width: 88px;
    height: 88px;
    background: var(--orange);
    border-radius: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
}

.db-white-block-title{
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin: 20px 0 10px 0;
}

.db-white-block-subtitle{
    font-size: 13px;
}

.dashboard-white-block:hover{
    background: var(--primary-color);
    color: #eee;
}

.dashboard-white-block:hover .db-white-block-title{
    color: #fff;
}

.dashboard-copyright{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #8e8e8e;
    margin: 10px;
}

.chart-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}

.chart-wrap{
    width: calc(50% - 10px);
    height: 350px;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0px 9px 8px rgb(20 46 110 / 10%);
}

.chart-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin-bottom: 20px;
}

.chart-title{
    font-size: 18px;
    font-weight: 700;
    color: var(--bold-black-var);
}

.chart-right{
    display: flex;
}

.chart-dropdown-container{
    position: relative;
}

.chart-dropdown-header{
    display: flex;
    border: 1px solid rgb(217 225 231 / 80%);
    border-radius: 2px;
    padding: 5px;
    color: #8a8a8a;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

.cd-header-title{
    color: var(--bold-black-var);
    font-size: 13px;
    font-weight: 500;
    margin-right: 10px;
}

.chart-legend{
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #8a8a8a;
    margin-right: 10px;
}

.chart-legend-color{
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 5px;
}

.chart-main{
    height: calc(100% - 60px);
    width: 100%;
}

.dashboard-stat-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.dashboard-stat-box{
    width: calc(25% - 10px);
    height: 135px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 0px 9px 8px #142e6e1a;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.dashboard-stat-title{
    font-size: 16px;
    color: #000;
    font-weight: 400;
}

.dashboard-stat-value{
    font-size: 28px;
    color: var(--orange);
}

.dashboard-stat-link{
    color: var(--primary-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.dashboard-stat-link i{
    font-size: 11px;
    margin-left: 4px;
    transition: all 0.3s;
}

.dashboard-stat-link:hover i{
    margin-left: 10px;
}

.table-container-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.table-header-left, .table-header-right{
    display: flex;
    align-items: center;
}

.search-wrap{
    background: #fff;
    height: 40px;
    width: 220px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0px 1px 8px rgb(20 46 110 / 10%);
}

.search-input{
    height: 40px;
    flex: 1;
    padding: 0 10px;
    border: none;
    background: none;
    color: #414d55;
}

.search-input::placeholder{
    color: #414d55;
}

.search-input:focus{
    outline: none;
}

.search-wrap .search-icon{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-wrap i{
    width: 40px;
    text-align: center;
    font-size: 15px;
    color: var(--orange);
}

.filter-button{
    height: 40px;
    background: #fff;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #000;
    border-radius: 8px;
    padding: 0 15px;
    box-shadow: 0px 1px 8px rgb(20 46 110 / 10%);
    cursor: pointer;
}

.filter-button i{
    font-size: 16px;
    margin-right: 10px;
    color: var(--orange);
}

.primary-button{
    background: var(--primary-color);
    border-radius: 3px;
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.white-button{
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--primary-color);
}

.button-regular{
    height: 40px;
    padding: 0 25px;
    font-size: 13px;
    width: max-content;
}

.button-regular i{
    margin-right: 10px;
    font-size: 18px;
}

.main-over-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(242, 246, 249, 0.35);
    z-index: 999;
    left: 0;
    top: 0;
    backdrop-filter: blur(3px);
    transition: all 0.4s;
    display: none;
}

.over-sidebar{
    position: absolute;
    width: 25%;
    min-width: 380px;
    height: 100%;
    background: #f1f5f8;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: -15px 1px 36px rgb(0 0 0 / 16%);
    display: none;
}

.close-over-sidebar{
    background: var(--primary-color);
    position: absolute;
    width: 40px;
    height: 40px;
    left: -40px;
    top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #fff;
}

.over-sidebar-inner{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 15px;
    padding-bottom: 0;
}

.over-sidebar-title{
    font-weight: 500;
    color: var(--secondary-color);
    font-size: 16px;
}

.over-sidebar-title span{
    text-transform: uppercase;
}

.over-sidebar-form{
    padding: 20px 15px;
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.over-input-container{
    margin-bottom: 25px;
}

.over-input-container:last-child{
    margin-bottom: 0;
}

.over-input-wrap, .form-input-wrap{
    display: flex;
    position: relative;
    align-items: center;
    background: #f1f6f8;
    border-radius: 8px;
    min-height: 50px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.over-input-label, .form-label{
    font-size: 13px;
    color: var(--orange);
    margin-bottom: 5px;
    display: block;
}

.over-input-label span, .form-label span{
    font-size: 15px;
    margin-left: 5px;
}

.over-input, .form-input{
    border: none;
    background: none;
    flex: 1;
    padding: 0;
    font-family: 'Rubik', sans-serif;
    color: #414d55;
    font-size: 15px;
    line-height: 25px;
}

.over-input:focus, .form-input:focus{
    outline: none;
}

.over-input:placeholder, .form-input:placeholder{
    color: #aaa;
}

.over-input-focus, .form-input-focus, .form-dropdown-open, .over-dropdown-open, .form-datepicker-open{
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40, 77, 98, 0.19);
}

.button-sidebar-form{
    height: 50px;
    width: 250px;
    justify-content: center;
    font-size: 16px;
    margin: auto;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 15%);
    transition: all 0.3s;
}

.cancel-sidebar-form, .cancel-alt-form{
    margin: 20px auto;
    text-align: center;
    font-size: 13px;
    color: #f44336;
    cursor: pointer;
    width: max-content;
    padding: 0 5px;
}

.over-radio-wrap{
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.over-radio-item{
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    margin-right: 20px;
}

.over-radio-button{
    width: 16px;
    height: 16px;
    background: #e5e9eb;
    border-radius: 4px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.over-radio-circle{
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: #e5e9eb;
}

.over-radio-title{
    color: inherit;
}

.over-radio-item:hover .over-radio-button{
    background: #999;
}

.over-radio-active .over-radio-button{
    background: var(--primary-color);
}

.over-radio-active .over-radio-title{
    color: #000;
}

.over-radio-active:hover .over-radio-button{
    background: var(--primary-color);
}

.sidebar-form-error{
    margin: 15px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #fd0000;
    display: none;
}

.dashboard-table-container{
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 8px;
    margin: 25px 0;
    overflow: hidden;
}

.table-header{
    display: flex;
    height: 50px;
    padding: 0 15px;
}

.table-header-item{
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #9a9a9a;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.dashboard-table-row{
    display: flex;
    height: 60px;
    background: #f8f8f8;
    padding: 0 15px;
}

.dashboard-table-row:nth-child(2n){
    background: #fff;
}

.table-item{
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #000;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.table-header-5, .table-item-5{
    width: 5%;
    max-width: 5%;
}

.table-header-10, .table-item-10{
    width: 10%;
    max-width: 10%;
}

.table-header-15, .table-item-15{
    width: 15%;
    max-width: 15%;
}

.table-header-50, .table-item-50{
    width: 50%;
    max-width: 50%;
}

.table-header-20, .table-item-20{
    width: 20%;
    max-width: 20%;
}

.table-header-25, .table-item-25{
    width: 25%;
    max-width: 25%;
}

.table-header-30, .table-item-30{
    width: 30%;
    max-width: 30%;
}

.table-header-40, .table-item-40{
    width: 40%;
    max-width: 40%;
}

.table-justify-center{
    justify-content: center;
}

.table-action{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    margin: 0 10px;
}

.table-action-edit{
    color: var(--orange);
}

.table-action-delete{
    color: #f44336;
}

.table-action-container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-empty-container{
    height: 60px;
    background: #fafafa;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #f44336;
    text-align: center;
}

.dashboard-form-container{
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin: 10px 0 30px 0;
}

.dashboard-form-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.form-section-70{
    width: calc(67% - 10px);
    max-width: calc(67% - 10px);
}

.form-section-30{
    width: calc(33% - 10px);
    max-width: calc(33% - 10px);
}

.form-section-full{
    width: 100%;
    max-width: 100%;
}

.form-input-holder{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.form-input-container{
    flex: 1;
}

.form-input-50{
    max-width: calc(50% - 15px);
}

.form-input-30{
    max-width: calc(33% - 10px);
}

.form-dropdown-wrap, .over-dropdown-wrap{
    position: relative;
}

.form-dropdown-header, .over-dropdown-header{
    display: flex;
    width: 100%;
    color: #000;
    align-items: center;
    cursor: pointer;
}

.form-dropdown-title, .over-dropdown-title{
    flex: 1;
    color: #414d55;
}

.form-dropdown-title span, .over-dropdown-title span{
    color: #aaa;
}

.form-dropdown-icon, .over-dropdown-icon span{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.form-dropdown-container, .over-dropdown-container, .form-search-container{
    position: absolute;
    top: calc(100% + 5px);
    background: #f1f6f8;
    width: 100%;
    left: 0;
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
    border-radius: 8px;
    display: none;
    z-index: 5;
}

.form-dropdown-inner, .over-dropdown-inner, .form-search-inner{
    padding: 10px;
    max-height: 300px;
    overflow-x: hidden;
}

.form-dropdown-item, .over-dropdown-item, .form-search-item{
    padding: 10px 5px;
    border-bottom: 1px dashed #a7c0cb;
    cursor: pointer;
    position: relative;
}

.form-dropdown-item:hover, .over-dropdown-item:hover, .form-search-item:hover{
    color: #000;
}

.form-dropdown-item:last-child, .over-dropdown-item:last-child, .form-search-item:last-child{
    border-bottom: none;
}

.form-dropdown-open .form-dropdown-icon, .over-dropdown-open .over-dropdown-icon{
    transform: rotate(180deg);
}

.form-file-holder{
    margin-top: 15px;
}

.file-input{
    display: none;
}

.form-file-container{
    border: 1px dashed var(--orange);
    background: #fff8eb;
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--orange);
    transition: all 0.3s;
}

.form-file-container:hover{
    box-shadow: 0 1px 8px rgb(0 0 0 / 10%);
}

.form-file-icon{
    font-size: 24px;
    margin-right: 15px;
}

.unit-photo-wrap .form-file-container{
    height: 200px;
}

.form-submit-holder{
    display: flex;
    align-items: center;
}

.main-form-button{
    width: 250px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    text-decoration: none;
}

.form-cancel-button{
    margin-left: 20px;
    padding: 15px;
    box-sizing: border-box;
    color: #f44336;
    cursor: pointer;
}

.form-error-wrap{
    margin-bottom: 15px;
    color: #df0000;
}

.customer-container, .unit-container, .wo-container, .schedule-container{
    background: #f1f1f1;
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    border-radius: 8px;
    overflow: hidden;
    height: calc(100% - 80px);
}

.unit-container, .schedule-container, .customer-container{
    height: calc(100% - 20px);
}

.no-customer-container, .no-unit-container, .no-wo-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.over-map{
    height: 200px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
    margin-bottom: 25px;
}

.over-map:hover, .over-map-active{
    border: 1px solid #b9c7cd;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
}

.form-loader-item{
    width: 100%;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(to right, #e5eaed, #dfe4e7);
    background-position: 0 100%;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.loader-item-short{
    width: 60%;
    margin-bottom: 30px;
}

.form-loader-item:before{
    content: '';
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #dfe4e7, #e5eaed);
    animation: overLoader 1.5s ease infinite;
    border-radius: 50px;
    filter: blur(5px);
}


@keyframes overLoader{
    0%      {width: 0;}
    100%    {width: 100%;}
}

.customer-flex-container, .unit-flex-container, .wo-flex-container, .schedule-flex-container{
    display: flex;
    height: 100%;
}

.customer-sidebar, .unit-sidebar, .wo-sidebar, .schedule-sidebar{
    width: 35%;
    max-width: 35%;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
}

.customer-sidebar-header, .unit-sidebar-header, .wo-sidebar-header{
    display: flex;
}

.customer-sidebar-search, .unit-sidebar-search, .wo-sidebar-search, .schedule-sidebar-search{
    background: #f1f5f8;
    height: 40px;
    display: flex;
    flex: 1;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
}

.customer-sidebar-search i, .unit-sidebar-search i, .wo-sidebar-search i, .schedule-sidbebar-search i{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cecece;
}

.customer-sidebar-search-input, .unit-sidebar-search-input, .wo-sidebar-search-input, .schedule-sidebar-search-input{
    height: 40px;
    flex: 1;
    border: none;
    background: none;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    color: #414d55;
}

.customer-sidebar-search-input:focus, .unit-sidebar-search-input:focus, .wo-sidebar-search-input:focus, .schedule-sidebar-search-input:focus{
    outline: none;
}

.customer-sidebar-search-input:placeholder, .unit-sidebar-search-input:placeholder, .wo-sidebar-search-input:placeholder, .schedule-sidebar-search-input:placeholder{
    color: #8a8a8a;
}

.customer-sidebar-header-button, .unit-sidebar-header-button, .wo-sidebar-header-button, .schedule-sidebar-header-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 400;
    margin-left: 5px;
    padding: 0 10px;
    cursor: pointer;
}

.customer-sidebar-header-button i, .unit-sidebar-header-button i, .wo-sidebar-header-button i, .schedule-sidebar-header-button i{
    font-size: 20px;
}

.customer-sidebar-body, .unit-sidebar-body, .wo-sidebar-body{
    height: calc(100% - 50px);
    margin: 10px 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.customer-sidebar-footer, .unit-sidebar-footer, .wo-sidebar-footer, .schedule-sidebar-footer{
    display: flex;
    justify-content: center;
}

.customer-detail, .unit-detail, .wo-detail, .schedule-calendar{
    width: 65%;
    padding: 15px 30px;
    box-sizing: border-box;
}

.wo-detail{
    overflow-x: hidden;
}

.customer-detail-container, .unit-detail-container, .wo-detail-container, .schedule-calendar-container{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
    box-sizing: border-box;
    padding: 15px;
    overflow-x: hidden;
}

.detail-load-header{
    display: flex;
    margin-bottom: 30px;
    align-items: center;
}

.detail-load-photo{
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(to right, #e5eaed, #dfe4e7);
    background-position: 0 100%;
    position: relative;
    margin-right: 20px;
}

.detail-load-header-info{
    flex: 1;
}

.detail-load-line{
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #e5eaed, #dfe4e7);
    background-position: 0 100%;
    border-radius: 3px;
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
}

.detail-load-line-short{
    width: 60%;
    margin-bottom: 16px;
}

.detail-load-line:before{
    content: '';
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #dfe4e7, #e5eaed);
    animation: overLoader 1.5s ease infinite;
    border-radius: 50px;
    filter: blur(5px);
}

.customer-detail-empty, .unit-detail-empty, .wo-detail-empty{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 300;
    color: #cecece;
    text-align: center;
}

.customer-empty-icon, .unit-empty-icon, .wo-empty-icon{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f8;
    font-size: 48px;
    margin-bottom: 20px;
}

.customer-sidebar-item, .unit-sidebar-item, .wo-sidebar-item{
    display: flex;
    padding: 15px 0;
    border-bottom: 1px dashed #a2c0d4;
    cursor: pointer;
    transition: all 0.3s;
}

.customer-sidebar-item:hover, .customer-sidebar-item-active, .unit-sidebar-item:hover, .unit-sidebar-item-active, .wo-sidebar-item:hover, .wo-sidebar-item-active{
    background: #fff8eb;
}

.customer-item-left{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.customer-item-avatar{
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    font-size: 24px;
    position: relative;
}

.lead-sidebar-item .customer-item-avatar{
    background: var(--light-blue);
}

.customer-avatar{
    width: 50px;
    min-width: 50px;
    height: 50px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    font-size: 24px;
    position: relative;
}

.lead-header .customer-avatar{
    background: var(--light-blue);
}

.customer-avatar-vip{
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--orange);
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -10px;
    right: -10px;
    box-sizing: border-box;
    border: 2px solid #fff;
}

.customer-last-visit-title{
    font-size: 10px;
    margin-top: 5px;
}

.customer-last-visit-value{
    color: var(--orange);
    font-size: 11px;
}

.customer-item-right{
    flex: 1;
    margin-left: 15px;
}

.customer-name{
    color: var(--primary-color);
    margin-bottom: 3px;
}

.lead-sidebar-item .customer-name, .lead-header .customer-name{
    color: var(--light-blue);
}

.customer-email{
    color: var(--orange);
    font-size: 12px;
    text-decoration: none;
}

.email-mailto:hover{
    text-decoration: underline;
}

.customer-phone{
    color: #414d55;
    font-size: 12px;
}

.customer-address{
    font-size: 12px;
    color: #606771;
}

.customer-header{
    display: flex;
    padding: 10px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #a2c0d4;
}

.customer-info{
    flex: 1;
    padding: 0 15px;
}

.customer-credit{
    color: #414d55;
    font-size: 13px;
    text-align: right;
    margin-bottom: 10px;
}

.customer-credit-title{
    font-size: 12px;
    color: var(--orange);
    font-weight: 500;
}

.customer-section{
    padding: 15px 10px;
    border-bottom: 1px dashed #a2c0d4;
}

.customer-section-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
}

.customer-section-title{
    font-size: 14px;
    font-weight: 600;
    color: var(--orange);
    display: flex;
    align-items: center;
}

.customer-section-title span{
    color: var(--primary-color);
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
}

.customer-section-action{
    display: flex;
}

.section-header-button{
    height: 30px;
    font-size: 13px;
    padding: 0 15px;
    margin-left: 15px;
    border-radius: 5px;
}

.section-header-button i{
    font-size: 16px;
    margin-right: 10px;
}

.customer-section-row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.customer-section-col{
    width: calc(50% - 15px);
    max-width: calc(50% - 15px);
    box-sizing: border-box;
    padding: 10px 0;
}

.customer-section-col .customer-name{
    margin-bottom: 7px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.customer-section-col .customer-name span{
    color: var(--orange);
    font-size: 12px;
    font-weight: 400;
    margin-left: 10px;
    text-decoration: none;
}

.section-empty-text{
    color: #aaa;
    font-size: 13px;
}

.customer-units-wrap{
    display: flex;
    margin-top: 10px;
    align-items: center;
}

.customer-empty-unit{
    font-size: 12px;
    color: #000;
    margin-right: 15px;
}

.section-col-button{
    font-size: 11px;
    height: 25px;
    padding: 0 10px;
    border-radius: 3px;
    margin-right: 15px;
}

.section-col-button i{
    font-size: 12px;
    margin-right: 5px;
}

.customer-units-icon{
    font-size: 20px;
    color: var(--orange);
    margin-right: 15px;
}

.dashboard-block-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.dashboard-action-block{
    width: calc(33% - 15px);
    height: 150px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-clock-block{
    background: #fff;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
}

.dashboard-clock{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #000;
}

.dashboard-clock-timer{
    font-size: 24px;
    color: var(--orange);
    font-weight: 500;
}

.dashboard-clock-button{
    height: 40px;
    background: var(--primary-color);
    width: 150px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

.dashboard-clock-text{
    font-weight: 500;
    color: #000;
    font-size: 16px;
}

.up-next-block{
    border: 1px solid var(--orange);
    background: #fff8eb;
    box-shadow: 0 1px 8px rgba(0,0,0,0.19);
}

.up-next-title{
    color: var(--orange);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
}

.up-next-body{
    display: flex;
}

.up-next-icon{
    width: 50px;
    height: 50px;
    background: var(--orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.up-next-info{
    flex: 1;
    padding: 0 15px;
}

.up-next-time{
    color: #000;
}

.up-next-name{
    color: var(--primary-color);
    margin: 5px 0;
    font-size: 15px;
}

.up-next-address{
    font-size: 12px;
}

.up-next-button{
    display: flex;
    flex-direction: column;
    font-size: 11px;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.up-next-button i{
    font-size: 24px;
    margin-bottom: 5px;
}

.next-direction-button{
    color: var(--orange);
    margin-bottom: 7px;
}

.next-arrived-button{
    color: var(--primary-color);
}

.next-arrived-button i{
    color: #d6d6d6;
}

.dashboard-progress-block{
    background: #fff;
    box-shadow: 0 1px 8px rgba(20,46,110,0.16);
    border-radius: 12px;
    padding: 12px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.dashboard-progress-title{
    font-size: 16px;
    font-weight: 500;
}

.dashboard-progress-button{
    width: 150px;
    display: flex;
    height: 30px;
    background: rgba(255,255,255,0.3);
    border-radius: 8px;
    overflow: hidden;
    justify-content: space-between;
    font-size: 14px;
}

.progress-button-item{
    flex: 1;
    max-width: 49%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.progress-button-selected{
    background: #fff;
    color: var(--primary-color);
}

.progress-bar-title{
    font-size: 13px;
}

.progress-bar{
    width: 100%;
    height: 7px;
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
    margin-top: 7px;
}

.progress-bar-progress{
    height: 100%;
    width: 50%;
    background: #fff;
    border-radius: 5px;
}

.topbar-add-container{
    position: absolute;
    background: #fff;
    width: 250px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    top: calc(100% + 5px);
    left: 50%;
    margin-left: -125px;
    box-shadow: 0 5px 15px -5px rgb(0 0 0 / 20%);
    display: none;
}

.topbar-add-item{
    padding: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: var(--primary-color);
    border-bottom: 1px dashed #ccc;
    cursor: pointer;
    transition: all 0.3s;
}

.topbar-add-item i{
    font-size: 17px;
    margin-right: 10px;
    width: 30px;
    display: flex;
    justify-content: center;
}

.topbar-add-item:hover{
    color: var(--orange);
}

.add-item-inactive, .add-item-inactive:hover{
    color: #aaa;
    cursor: default;
}

.topbar-add-item:last-child{
    border-bottom: none;
}

.topbar-add-container:before{
    content: '';
    border-bottom: 10px solid var(--primary-color);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 100%;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

.customer-search-error{
    font-size: 12px;
    color: #f44336;
    margin-top: 5px;
    display: none;
}

.over-result-container{
    position: absolute;
    top: calc(100% + 5px);
    background: #f1f6f8;
    width: 100%;
    left: 0;
    border-radius: 8px;
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
    z-index: 9;
    display: none;
}

.over-result-inner{
    padding: 10px;
    max-height: 300px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.search-result-loading{
    display: flex;
    align-items: center;
    color: #aaa;
    padding: 10px 0;
}

.search-dropdown-item{
    padding: 10px 5px;
    border-bottom: 1px dashed #a7c0cb;
    cursor: pointer;
    transition: all 0.3s;
}

.search-dropdown-item:hover{
    color: #414d55;
}

.search-dropdown-item:last-child{
    border-bottom: none;
}

.search-dropdown-subtitle{
    font-size: 12px;
}

.drop-site-name{
    font-weight: 500;
}

.drop-site-city{
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.drop-site-city span{
    font-size: 11px;
    color: var(--orange);
    font-weight: 400;
    margin-left: 10px;
}

.drop-site-address{
    margin-top: 5px;
    font-size: 11px;
}

.search-no-cust{
    font-size: 13px;
    padding: 10px 0;
}

.dashboard-section-title{
    font-size: 18px;
    font-weight: 600;
    margin-top: 30px;
    color: #000;
}

.table-capitalize{
    text-transform: capitalize;
}

.schedule-table-name{
    font-weight: 500;
    color: var(--primary-color);
}

.schedule-table-address{
    font-size: 12px;
    color: #666;
}

.schedule-type-icon{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--orange);
    color: #fff;
    font-size: 20px;
}

.step-form{
    display: none;
}

#customer-step-1{
    display: block;
}

.step-form-header{
    display: flex;
    margin: 0 -10px;
    margin-bottom: 30px;
}

.sfh-button{
    background: #f1f5f8;
    border: 1px dashed #afbbc6;
    padding: 10px;
    border-radius: 8px;
    flex: 1;
    margin: 0 10px;
    display: flex;
    align-items: center;
}

.sfh-button-number{
    width: 40px;
    height: 40px;
    background: rgb(1 47 71 / 29%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    border: 1px solid #eee;
    color: #fff;
}

.sfh-button-detail{
    flex: 1;
    padding: 0 10px;
}

.sfh-button-title{
    font-size: 16px;
    font-weight: 500;
}

.sfh-button-info{
    font-size: 12px;
}

.sfh-button-selected{
    background: var(--primary-color);
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    border: 1px solid var(--primary-color);
    color: #fff;
}

.sfh-button-selected .sfh-button-number{
    color: var(--primary-color);
    background: #fff;
    border: 1px solid #fff;
}

.step-form-title{
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.form-section-title{
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.form-section-title i{
    color: var(--orange);
    font-size: 18px;
    margin-right: 15px;
}

.form-radio-container{
    display: flex;
    margin-bottom: 25px;
}

.form-radio-item{
    display: flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
    font-size: 13px;
}

.form-radio-button{
    width: 16px;
    height: 16px;
    background: #e5e9eb;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-radio-circle{
    width: 6px;
    height: 6px;
    background: #e5e9eb;
    border-radius: 3px;
}

.form-radio-item:hover .form-radio-button{
    background: #999;
}

.form-radio-active .form-radio-title{
    color: #000;
}

.form-radio-active .form-radio-button{
    background: var(--primary-color);
}

.form-radio-active:hover .form-radio-button{
    background: var(--primary-color);
}

.form-map{
    height: 300px;
    border-radius: 8px;
    border: 1px solid #e5e9eb;
    transition: all 0.3s;
    margin-top: 25px;
    box-sizing: border-box;
}

.form-map:hover, .form-map-active{
    border: 1px solid #b9c7cd;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
}

.form-address-auto-container{
    border: 1px dashed #b9c7cd;
    border-radius: 8px;
    background: #f1f6f8;
    padding: 15px;
    box-sizing: border-box;
}

.form-address-auto-title{
    color: var(--primary-color);
    font-weight: 500;
}

.form-address-auto-subtitle{
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.form-address-auto-subtitle strong{
    font-weight: 500;
    color: #666;
}

#customer-map, #billing-map, #site-map{
    height: calc(100% - 95.5px);
}

.form-address-auto-container .form-input-wrap{
    border: 1px solid #b9c7cd;
}

.form-address-auto-container .form-input-holder:last-child{
    margin-bottom: 10px;
}

.form-address-auto-container .form-input-50{
    max-width: calc(50% - 10px);
}

.form-switch-item{
    display: none;
}

#switch-cust-address-map, #switch-billing-address-map, #switch-site-address-map{
    display: block;
}

.form-section-separator{
    width: 100%;
    height: 1px;
    border-top: 1px dashed #afbbc6;
    margin: 20px 0;
}

.form-label-big{
    font-weight: 500;
    color: var(--primary-color);
    font-size: 15px;
}

.alt-form-button{
    width: 250px;
    height: 50px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 1px 8px rgb(238 234 234);
    margin-right: 20px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.company-billing-address-container, .billing-contact-container{
    display: none;
}

.alt-over-fluid{
    position: fixed;
    background: rgb(241 245 248 / 50%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 997;
    backdrop-filter: blur(2px);
    display: none;
}

.over-container{
    position: absolute;
    width: 70%;
    height: 100%;
    background: #f1f5f8;
    right: 0;
    top: 0;
    box-shadow: -15px 1px 36px rgb(0 0 0 / 16%);
    display: none;
}

.over-container-inner{
    padding: 15px;
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
}

.over-container-title{
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.main-select-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    display: none;
}

.main-select-container{
    height: calc(100% - 100px);
    background: #fff;
    width: 100%;
    max-width: 500px;
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 30%);
    display: none;
}

.main-select-inner{
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.site-contact-button, .contact-site-button, .billing-contact-button{
    border: 1px solid #b9c7cd;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.site-contact-empty, .billing-contact-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: #f1f6f8;
    box-sizing: border-box;
    padding: 0 20px;
}

.site-contact-empty i, .billing-contact-empty i{
    font-size: 42px;
    color: #b9c7cd;
    margin-right: 20px;
}

.site-contact-button:hover, .contact-site-button:hover, .billing-contact-button:hover{
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
}

.site-manual-billing-wrap{
    display: none;
}

.main-select-header{
    display: flex;
    align-items: center;
    padding: 0 5px 10px 5px;
    border-bottom: 1px solid #aaa;
    justify-content: space-between;
}

.main-select-title{
    font-size: 24px;
    color: var(--primary-color);
    font-weight: 500;
}

.select-list-empty{
    padding: 25px;
    text-align: center;
}

.select-list-item{
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px dashed #a2c0d4;
    cursor: pointer;
}

.select-list-item:hover{
    background: #f1f5f8;
}

.select-item-icon{
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: #fff;
    background: var(--orange);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-item-details{
    flex: 1;
    margin-left: 15px;
}

.select-item-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.select-item-phone, .select-item-email{
    font-size: 12px;
}

.select-item-phone{
    margin-top: 5px;
}

.is-form-last{
    margin-bottom: 0;
}

.form-site-container, .form-contact-container{
    margin-top: 25px;
    width: 50%;
}

.list-site-item{
    border: 1px solid #b9c7cd;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.list-site-icon{
    width: 50px;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange);
    color: #fff;
    font-size: 24px;
}

.list-site-detail{
    flex: 1;
    margin-left: 15px;
}

.list-site-title{
    font-weight: 500;
    color: var(--primary-color);
}

.list-site-info{
    font-size: 13px;
    margin-top: 5px;
}

.site-contact-item, .contact-site-item, .billing-contact-item{
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.site-contact-icon, .billing-contact-icon{
    width: 60px;
    height: 60px;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 24px;
}

.site-contact-detail, .billing-contact-detail{
    flex: 1;
    margin-left: 15px;
}

.site-contact-title, .billing-contact-title{
    font-weight: 500;
    color: var(--primary-color);
}

.site-contact-info, .billing-contact-info{
    font-size: 13px;
    margin-top: 5px;
}

.customer-header-right{
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    align-items: flex-end;
}

.icon-button{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--orange);
}

.dashboard-view-switch-container{
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    overflow: hidden;
}

.view-switch-item{
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
    position: relative;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s;
}

.view-switch-item i{
    font-size: 14px;
    margin-right: 10px;
}

.view-switch-selected{
    color: #fff;
    cursor: default;
}

.selected-switch-bg{
    position: absolute;
    background: var(--primary-color);
    width: 50%;
    height: 100%;
    border-radius: 8px;
    left: 0;
}

.dashboard-container-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.customer-section-button{
    border: 1px solid var(--orange);
    height: 60px;
    box-sizing: border-box;
    border-radius: 8px;
    width: calc(50% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--orange);
    font-size: 16px;
    cursor: pointer;
    margin: 10px;
    font-weight: 400;
    padding: 0 15px;
    transition: all 0.3s;
}

.customer-section-button i{
    font-size: 20px;
    margin-right: 15px;
    transition: all 0.3s;
}

.customer-section-button:hover{
    background: #fff8eb;
}

.customer-section-button:hover i{
    margin-right: 0;
}

.customer-section-last{
    border-bottom: none;
}

.customer-section-billing:hover, .billing-more-open{
    background: #f3fbff;
}

.customer-row-title{
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 20px;
}

.customer-row-title span{
    font-weight: 400;
    color: #f44336;
}

.customer-detail-map-container{
    position: relative;
    padding: 0;
}

.customer-detail-map{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.customer-sidebar-body .form-loader-item{
    height: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.customer-sidebar-body .form-loader-item:nth-child(4n), .customer-sidebar-body .loader-item-short{
    width: 60%;
    margin-bottom: 20px;
    margin-top: 15px;
}

.map-site-container{
    position: absolute;
    background: #fff;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 20%);
    min-height: 50px;
    max-height: 50%;
    box-sizing: border-box;
    padding: 0 15px;
    border-radius: 8px;
    display: none;
}

.map-site-loading{
    display: flex;
    align-items: center;
    height: 50px;
    color: var(--primary-color);
    justify-content: space-between;
    width: 150px;
}

.map-site-empty{
    line-height: 50px;
    color: #f44336;
    font-weight: 500;
}

.customer-site-col{
    cursor: pointer;
}

.customer-site-col:hover .customer-name{
    text-decoration: underline;
}

.customer-site-col:hover span{
    text-decoration: none;
}

.primary-contact-title{
    margin-bottom: 10px;
}

.primary-contact-title span{
    color: #aaa;
}

.primary-contact-title .link-contact{
    font-style: normal;
    color: var(--primary-color);
}

.customer-site-title{
    font-weight: 600;
    cursor: pointer;
    margin-right: 5px;
}

.customer-site-title:hover{
    text-decoration: underline;
}

.form-switch-wrap{
    margin-bottom: 25px;
    display: flex;
    align-items: flex-end;
}

.form-switch-radio-container{
    display: flex;
    background: #fff;
    width: max-content;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 25px;
}

.switch-radio-item{
    height: 50px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.switch-radio-active{
    background: var(--primary-color);
    color: #fff;
    cursor: default;
}

#switch-input-unit-multiple{
    flex: 1;
}

#switch-input-unit-multiple .form-input-wrap{
    background: #fff;
}

#unit-purchase-step-1, #unit-step-1{
    display: block;
}

.form-input-icon{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-label-wrap{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-label-wrap .form-label{
    margin-bottom: 0;
    margin-right: 15px;
}

.form-small-switch-container{
    display: flex;
    align-items: center;
}

.form-small-switch-item{
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.form-small-switch-active{
    color: var(--primary-color);
    cursor: default;
}

.form-small-switch{
    background: #ddd;
    width: 40px;
    margin: 0 10px;
    height: 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 8px inset rgb(0 0 0 / 20%);
}

.form-small-switch-circle{
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(#f0f0f0, #fff);
    top: 2px;
    left: 2px;
}

.customer-view-more-container{
    display: none;
}

.customer-view-more-button{
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
}

.customer-info .customer-name{
    font-size: 18px;
    display: flex;
    align-items: center;
}

.customer-name .customer-name-vip{
    margin-left: 10px;
    background: rgb(1 47 71 / 57%);
    padding: 2px 10px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}

.customer-info .customer-address{
    margin-top: 0;
    font-size: 14px;
}

.customer-info-row{
    display: flex;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
}

.customer-info-row-title{
    color: var(--primary-color);
    flex: 1;
}

.customer-info-row-value{
    color: var(--primary-color);
    font-weight: 500;
    flex: 1;
}

.customer-info-row-empty{
    color: #aaa;
    flex: 1;
}

.customer-info-row:last-child{
    margin-bottom: 15px;
}

.view-more-open{
    color: var(--orange);
}

.customer-credit-alt{
    display: none;
    padding-top: 10px;
}

.customer-credit-status{
    background: #009688;
    margin-top: 10px;
    color: #fff;
    height: 22px;
    padding: 0 15px;
    line-height: 22px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    width: max-content;
    display: block;
    float: right;
}

.customer-billing-title .customer-billing-default, .customer-row-title .customer-billing-default{
    background: rgb(1 47 71 / 57%);
    height: 25px;
    color: #fff;
    font-size: 13px;
    line-height: 25px;
    padding: 0 15px;
    border-radius: 4px;
    margin-left: 10px;
}

.customer-section-billing .customer-section-header{
    margin-bottom: 0;
    align-items: center;
    cursor: pointer;
}

.site-section-billing .customer-section-header{
    margin-bottom: 0;
}

.billing-more-container{
    display: none;
    padding: 5px 0;
}

.button-open-billing{
    transition: all 0.3s;
}

.billing-more-open .button-open-billing{
    transform: rotate(180deg);
}

.edit-button{
    height: 30px;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}

.edit-button i{
    font-size: 15px;
    margin-right: 10px;
}

.customer-notes-container{
    color: #212121;
    margin-top: 10px;
}

.customer-section-buttons{
    display: flex;
    flex-wrap: wrap;
}

.site-primary-contact{
    margin-top: 0;
    margin-bottom: 0;
}

.site-primary-contact span{
    color: #aaa;
}

.site-primary-contact .link-contact{
    color: var(--primary-color);
    cursor: pointer;
}

.site-primary-contact .link-contact:hover{
    text-decoration: underline;
}

.cat-has-unit{
    color: #009688;
    font-weight: 600;
}

.cat-no-item{
    color: #aaa;
}

.input-currency-sym{
    margin-right: 5px;
}

.form-datepicker-wrap{
    position: relative;
    padding: 0;
    padding-left: 10px;
}

.form-datepicker-wrap .form-input-icon{
    height: 40px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ddd;
    font-size: 18px;
}

.form-datepicker-container{
    position: absolute;
    background: rgba(255,255,255,0.8);
    top: calc(100% + 12px);
    z-index: 9;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    width: 332px;
    right: 0;
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
    display: none;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

.form-datepicker-container:before{
    content: '';
    position: absolute;
    right: 15px;
    border-bottom: 10px solid #b9c7cd;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -10px;
}

.search-default-title{
    padding: 5px 0;
    font-size: 13px;
    color: #414d55;
    font-weight: 500;
    margin-bottom: 5px;
}

.form-dropdown-disabled, .form-dropdown-disabled .form-dropdown-header{
    cursor: default;
}

.form-dropdown-disabled .form-dropdown-title span{
    color: #ddd;
}

.form-dropdown-disabled .form-dropdown-icon{
    color: #ddd;
}

.form-dropdown-empty{
    padding: 10px 0;
    font-size: 13px;
}

.form-dropdown-empty span{
    color: #222;
    font-weight: 500;
}

.form-file-label{
    position: relative;
}

.form-file-preview{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.form-file-over{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.form-file-preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.unit-cost-wrap{
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 5px;
}

.contact-list-item{
    align-items: flex-start;
    cursor: default;
}

.contact-list-item .select-item-details, .contact-list-item .list-action-wrap{
    margin-top: 5px;
}

.contact-list-item:hover{
    background: none;
}

.list-action-wrap{
    display: flex;
}

.list-action-icon{
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--primary-color);
    transition: all 0.3s;
}

.edit-contact-icon{
    color: var(--orange);
    border: 1px solid;
    background: #fff;
    box-shadow: none;
}

.edit-contact-icon:hover{
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}

.contact-more-container{
    display: none;
    padding-top: 10px;
}

.contact-more-item{
    display: flex;
    padding: 10px 5px;
    font-size: 13px;
    color: var(--primary-color);
    align-items: center;
    min-height: 27px;
    background: #ecf2f6;
}

.contact-more-item:nth-child(2n+1){
    background: #f8fafb;
}

.contact-item-title{
    font-weight: 500;
}

.contact-item-value{
    flex: 1;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contact-item-action{
    display: flex;
}

.contact-action-icon{
    width: 25px;
    height: 25px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.contact-action-icon:hover{
    background: var(--primary-color);
    color: #fff;
}

.more-contact-separator{
    width: 100%;
    height: 1px;
    border-top: 1px dashed #afbbc6;
    margin-bottom: 10px;
}

.contact-list-selected, .contact-list-selected:hover{
    background: #f1f5f8;
}

.contact-list-selected .list-action-wrap .contact-expand-icon{
    transform: rotate(180deg);
}

.contact-more-notes{
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: #ecf2f6;
    border-radius: 8px;
    font-size: 12px;
    min-height: 50px;
    color: #222;
    border: 1px solid #c2c9cf;
}

.customer-billing-title{
    display: flex;
    align-items: center;
}

.wo-radio-title{
    font-size: 13px;
    margin-bottom: 10px;
}

.form-input-disabled .form-input-icon{
    color: #ddd;
}

.form-input-disabled .form-input::placeholder{
    color: #ddd;
}

.form-file{
    display: none;
}

.form-upload-wrap{
    display: flex;
    margin-left: -8px;
    flex-wrap: wrap;
}

.form-multi-upload{
    width: 60px;
    height: 60px;
    background: #f1f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #b9c7cd;
    border-radius: 4px;
    font-size: 22px;
    color: #41454d;
    margin: 8px;
}

.multi-file-item{
    width: 60px;
    height: 60px;
    border: 1px solid #b9c7cd;
    border-radius: 4px;
    margin: 8px;
    position: relative;
    cursor: pointer;
}

.multi-file-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    overflow: hidden;
}

.multi-item-remove{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    border: 2px solid #fff;
    box-sizing: border-box;
    transition: all 0.3s;
}

.multi-file-item:hover .multi-item-remove{
    transform: rotate(180deg);
}

.alt-radio-container{
    flex-direction: column;
}

.alt-radio-container .form-radio-item{
    border: 1px solid #b9c7cd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: max-content;
    min-width: 50%;
}

.alt-radio-container .form-radio-active{
    cursor: default;
}

#wo-priority-normal.form-radio-active{
    border: 1px solid #009688;
}

#wo-priority-normal.form-radio-active .form-radio-button{
    background: #009688;
}

#wo-priority-normal.form-radio-active .form-radio-title{
    color: #009688;
}

#wo-priority-high.form-radio-active{
    border: 1px solid var(--orange);
}

#wo-priority-high.form-radio-active .form-radio-button{
    background: var(--orange);
}

#wo-priority-high.form-radio-active .form-radio-title{
    color: var(--orange);
}

#wo-priority-urgent.form-radio-active{
    border: 1px solid #f44336;
}

#wo-priority-urgent.form-radio-active .form-radio-button{
    background: #f44336;
}

#wo-priority-urgent.form-radio-active .form-radio-title{
    color: #f44336;
}

.form-input-error{
    border: 1px solid #f44336;
}

.form-label-error{
    color: #f44336;
}

.wo-table-row{
    cursor: pointer;
    transition: all 0.3s;
}

.wo-table-row:hover{
    background: #fff8eb;
}

.table-item-action{
    background: rgba(0,0,0,0.03);
}

.wo-table-action{
    font-size: 15px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid var(--orange);
    margin: 0 10px;
    transition: all 0.3s;
}

.wo-delete-action{
    color: #f44336;
    border: 1px solid #f44336;
}

.wo-table-action:hover{
    background: var(--orange);
    color: #fff;
}

.wo-delete-action:hover{
    background: #f44336;
    color: #fff;
}

.unit-sidebar-item, .wo-sidebar-item{
    position: relative;
}

.unit-item-status{
    position: absolute;
    background: #88c931;
    height: 20px;
    right: 0;
    font-size: 11px;
    color: #fff;
    padding: 0 10px;
    line-height: 20px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.unit-item-left{
    padding: 0 5px;
    flex: 1;
}

.unit-item-model{
    font-weight: 600;
    color: var(--primary-color);
}

.unit-item-manu{
    font-size: 13px;
    margin: 5px 0;
    color: #000;
}

.unit-item-manu span{
    color: var(--orange);
    padding-left: 10px;
}

.unit-item-description{
    font-size: 12px;
}

.unit-item-cost{
    color: var(--primary-color);
}

.unit-item-condition{
    font-size: 12px;
    margin-top: 5px;
}

.unit-item-right{
    padding-top: 30px;
    padding-right: 5px;
    text-align: right;
}

.unit-gallery-container{
    display: flex;
    height: 300px;
}

.gallery-thumb-container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-thumb-button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    background: #fff;
    cursor: pointer;
}

.gallery-thumb-wrap{
    flex: 1;
    overflow: hidden;
}

.gallery-thumb-item{
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin: 10px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.gallery-thumb-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gallery-thumb-item:hover, .gallery-thumb-selected{
    border: 1px solid var(--orange);
    box-shadow: 0 1px 8px rgb(0 0 0 / 20%);
}

.gallery-thumb-selected{
    cursor: default;
}

.gallery-photo-container{
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.gallery-photo-container img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.unit-title-container{
    display: flex;
    padding-top: 20px;
    padding-bottom: 10px;
}

.unit-title-wrap{
    flex: 1;
}

.unit-title{
    font-size: 24px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.unit-manu{
    margin-bottom: 5px;
}

.unit-serial{
    color: var(--orange);
    margin-bottom: 5px;
}

.unit-status{
    color: #88c931;
}

.unit-price{
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 10px;
}

.unit-button-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.unit-button{
    background: #fff;
    height: 50px;
    border-radius: 4px;
    box-shadow: 0 1px 8px rgb(20 46 110 / 10%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    padding: 0 15px 0 20px;
    width: 48%;
    box-sizing: border-box;
    margin: 10px 0;
}

.btn-icon-trans{
    justify-content: space-between;
}

.btn-icon-trans .button-icon{
    font-size: 18px;
    transition: all 0.3s;
    margin-right: 15px;
}

.btn-icon-trans:hover .button-icon{
    margin-right: 0;
}

.unit-description{
    margin: 10px 5px;
    font-size: 14px;
}

.unit-footer-container{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.unit-footer-button{
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 5px 30px rgb(0 0 0 / 10%);
    padding: 0 15px;
    transition: all 0.3s;
}

.unit-btn-primary{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    width: 48%;
}

.unit-btn-primary:hover{
    color: var(--primary-color);
    background: #fff;
}

.unit-btn-secondary{
    width: 25%;
    background: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.unit-btn-secondary:hover{
    background: var(--primary-color);
    color: #fff;
}

.unit-btn-trans{
    width: 48%;
    color: var(--orange);
    border: 1px solid;
    justify-content: space-between;
}

.unit-btn-trans i{
    font-size: 20px;
    margin-right: 15px;
    transition: all 0.3s;
}

.unit-btn-trans:hover i{
    margin-right: 0;
}

.edit-unit-btn{
    display: flex;
    align-items: center;
    color: var(--orange);
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}

.edit-unit-btn span{
    font-size: 14px;
    margin-left: 10px;
    font-weight: 500;
}

.edit-unit-btn:hover span{
    text-decoration: underline;
}

.unit-photo-upload-wrap .form-multi-upload{
    width: 80px;
    height: 80px;
    border: 1px dashed var(--orange);
    background: #fff8eb;
    color: var(--orange);
    transition: all 0.3s;
}

.unit-photo-upload-wrap .form-multi-upload:hover{
    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.unit-photo-upload-wrap .multi-file-item{
    width: 80px;
    height: 80px;
    margin: 10px;
}

.unit-photo-upload-wrap .multi-item-remove{
    width: 25px;
    height: 25px;
    border-radius: 15px;
    top: -12px;
    right: -12px;
}

#unit-sale-btn-form{
    width: 40%;
}

.wo-item-status{
    position: absolute;
    height: 20px;
    background: #03a9f4;
    right: 0;
    font-size: 11px;
    padding: 0 10px;
    line-height: 20px;
    color: #fff;
    border-radius: 4px;
    text-transform: capitalize;
}

.wo-status-scheduled, .wo-status-rescheduled{
    background: var(--orange);
}

.wo-status-cancelled {
    background: #f44336;
}

.wo-item-left{
    flex: 1;
}

.wo-item-id{
    color: #000;
    font-weight: 500;
}

.wo-item-customer{
    color: var(--primary-color);
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 7px;
}

.wo-item-info{
    font-size: 13px;
    margin-bottom: 7px;
    color: #414d55;
}

.wo-item-info span{
    color: var(--orange);
    margin-right: 5px;
}

.wo-item-info .wo-item-priority{
    margin-right: 0;
    margin-left: 10px;
    font-weight: 500;
    text-transform: capitalize;
}

.wo-assigned-info{
    font-size: 13px;
    color: var(--orange);
}

.wo-assigned-info .has-assigned{
    color: var(--primary-color);
    font-weight: 500;
    margin-left: 5px;
}

.wo-assigned-info .not-assigned{
    color: #f44336;
    font-weight: 500;
    margin-left: 5px;
}

.wo-attachment-info{
    height: 50px;
    background: #f1f5f8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-top: 10px;
}

.wo-attach-title{
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-color);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
}

.wo-has-attachment{
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--primary-color);
}

.wo-has-attachment i{
    font-size: 14px;
    margin-right: 5px;
}

.wo-detail-container{
    background: none;
    box-shadow: none;
    padding: 5px;
    height: auto;
}

.wo-detail-header, .wo-detail-main{
    padding: 15px;
    background: #fff;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
    border-radius: 8px;
}

.wo-detail-header{
    border: 1px solid var(--orange);
}

.wo-detail-main{
    margin-top: 15px;
}

.wo-main-header{
    border-bottom: 1px dashed #A2C0D4;
}

.wo-main-header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wo-main-title{
    color: var(--primary-color);
}

.wo-header-internal{
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
    padding: 10px;
}

.wo-header-customer{
    display: flex;
}

.wo-customer-avatar{
    width: 60px;
    height: 60px;
    background: var(--orange);
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wo-customer-details{
    flex: 1;
    margin-left: 15px;
}

.wo-customer-name{
    color: var(--light-blue);
    font-size: 16px;
}

.wo-customer-phone{
    color: #222;
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
}

.wo-customer-address{
    font-size: 12px;
    margin-top: 5px;
    color: #606771;
}

.wo-detail-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px dashed #A2C0D4;
}

.wo-detail-id{
    color: #000;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.wo-detail-id span{
    margin-left: 10px;
    text-transform: capitalize;
    color: #f44336;
    font-size: 12px;
}

.wo-detail-id .item-priority-high{
    color: var(--orange);
}

.wo-detail-id .item-priority-normal{
    color: #009688;
}

.wo-detail-id .item-priority-urgent{
    color: #f44336;
}

.wo-due-date{
    color: #222;
}

.wo-detail-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 15px 0;
}

.wo-detail-item{
    margin: 10px 0;
    width: 30%;
}

.wo-detail-item-title{
    font-size: 13px;
    color: var(--orange);
}

.wo-detail-item-value{
    margin-top: 5px;
    color: #414d55;
}

.wo-description-container{
    display: flex;
}

.wo-description-wrap{
    flex: 1;
}

.wo-description-title{
    font-size: 13px;
    color: var(--orange);
    margin-top: 15px;
}

.wo-description-title:first-child{
    margin-top: 0;
}

.wo-description-value{
    font-size: 13px;
    margin-top: 5px;
    text-align: justify;
    color: #606771;
}

.wo-attachment-wrap{
    width: 50%;
    margin-left: 15px;
}

.wo-attachment-title{
    font-size: 13px;
    color: var(--orange);
    margin-bottom: 5px;
}

.wo-attachment-container{
    width: 100%;
}

.wo-attachment-photo{
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 30px rgb(0 0 0 / 20%);
}

.wo-attachment-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.attachment-thumb-container{
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

.attachment-thumb-item{
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid #aaa;
    cursor: pointer;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
}

.attachment-thumb-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wo-assigned-container{
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.wo-assign-detail{
    flex: 1;
}

.wo-unassigned-wrap{
    display: flex;
    align-items: center;
    color: #f44336;
    font-weight: 500;
    margin-top: 5px;
}

.wo-assign-button{
    margin-left: 20px;
    background: var(--primary-color);
    height: 25px;
    font-size: 12px;
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

.wo-assigned-name{
    margin-top: 5px;
    color: var(--primary-color);
}

.form-checkbox-holder{
    margin-bottom: 25px;
}

.form-checkbox-wrap{
    display: flex;
}

.form-checkbox-col{
    margin-right: 100px;
}

.form-checkbox-item{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 0;
    margin: 5px 0;
}

.form-checkbox-icon{
    font-size: 18px;
    margin-right: 10px;
    color: #aaa;
}

.form-checkbox-title{
    font-size: 14px;
    color: #414d55;
}

.form-checkbox-selected .form-checkbox-icon{
    color: var(--primary-color);
}

.staff-upload-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

#staff-profile-photo{
    display: none;
}

.staff-upload-button{
    width: 200px;
    height: 200px;
    background: #cceafb;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.staff-upload-pre{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: var(--primary-color);
}

.staff-upload-pre i{
    font-size: 64px;
    color: #fff;
    margin-bottom: 30px;
}

.staff-upload-pre img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.staff-upload-over{
    position: absolute;
    background: rgba(255,255,255,0.4);
    width: 100%;
    height: 100%;
    top: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-input-add{
    height: 40px;
    background: #fff;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 8px;
    margin-right: -5px;
    margin-left: 5px;
    transition: background 0.3s;
    cursor: pointer;
}

.with-input-tooltip{
    position: relative;
}

.form-input-add:hover{
    color: var(--orange);
}

.form-input-add i{
    transition: transform 0.3s;
}

.input-add-tooltip{
    position: absolute;
    background: var(--primary-color);
    padding: 5px 15px;
    box-sizing: border-box;
    width: max-content;
    font-size: 10px;
    color: #fff;
    border-radius: 4px;
    top: -28px;
    display: none;
}

.input-add-tooltip:before{
    content: '';
    background: transparent;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid var(--primary-color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 100%;
}

.form-input-add:hover i{
    transform: rotate(90deg);
}

.form-error-item{
    font-size: 12px;
    color: #414d55;
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-weight: normal;
}

.form-error-item i{
    font-size: 14px;
    margin-right: 10px;
}

#unit-weight:after{
    content: "KG";
}

.form-dropdown-disabled .form-input-add{
    display: none;
}

.form-tickbox-container{
    margin-bottom: 20px;
}

.form-tickbox-wrap{
    display: flex;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    width: max-content;
    font-size: 14px;
}

.form-tickbox-icon{
    color: #e5e9eb;
    font-size: 18px;
    margin-right: 10px;
}

.form-tickbox-wrap:hover .form-tickbox-icon{
    color: #999;
}

.form-tickbox-selected{
    color: var(--primary-color);
}

.form-tickbox-selected .form-tickbox-icon{
    color: var(--primary-color);
}

.form-tickbox-selected:hover .form-tickbox-icon{
    color: var(--primary-color);
}

.form-section-title span, .form-tickbox-title span{
    margin-left: 5px;
}

#unit-purchase-container{
    margin-top: 10px;
}

.form-youtube-holder{
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
    margin-bottom: 0;
}

.youtube-video-item{
    width: 300px;
    height: 200px;
    border: 2px solid var(--orange);
    border-radius: 8px;
    position: relative;
    margin: 15px;
}

.youtube-video-item iframe{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

.remove-youtube-item{
    position: absolute;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    top: -10px;
    right: -10px;
    border: 3px solid #fff;
    box-sizing: border-box;
    color: #fff;
    transition: all 0.3s;
}

.remove-youtube-item:hover{
    transform: rotate(90deg);
}

.table-avatar-item{
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.table-avatar-empty, .topbar-avatar-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: var(--primary-color);
}

.table-avatar-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wo-detail-footer{
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wo-detail-change{
    font-size: 13px;
}

.wo-change-title{
    font-weight: 500;
    color: #414d55;
}

.wo-change-time{
    font-size: 12px;
    margin: 5px 0;
}

.desc-footer-button{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    min-width: 200px;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    margin: 0 10px;
}

.desc-btn-primary{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    transition: all 0.3s;
}

.desc-btn-primary:hover{
    background: #fff;
    color: var(--primary-color);
}

.sidebar-delete-button{
    margin: 15px auto;
    width: 250px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    color: var(--orange);
    border-radius: 8px;
    cursor: pointer;
}

.view-wo-updates{
    font-weight: 500;
    color: var(--primary-color);
    font-size: 14px;
    padding: 5px 0;
    cursor: pointer;
}

.view-wo-updates:hover{
    text-decoration: underline;
}

.form-user-selected{
    height: 60px;
    display: flex;
    align-items: center;
    background: #f1f6f8;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 8px;
}

.user-selected-avatar{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid #ddd;
    overflow: hidden;
    margin-right: 10px;
}

.user-selected-avatar .selected-avatar-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    background: var(--primary-color);
}

.user-selected-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.user-selected-details{
    flex: 1;
}

.user-selected-name{
    color: var(--primary-color);
}

.user-selected-role{
    font-size: 12px;
}

.form-duration-wrap{
    display: flex;
    align-items: center;
}

.form-duration-wrap .form-dropdown-wrap{
    flex: 1;
}

.form-duration-wrap .form-dropdown-icon{
    margin-right: -5px;
}

.form-duration-name{
    font-size: 14px;
    color: #414d55;
    margin-left: 5px;
}

.sidebar-form-error .form-error-item{
    justify-content: center;
}

.schedule-body-title{
    color: var(--primary-color);
    font-weight: 500;
    margin: 10px 0;
}

.schedule-sidebar-item{
    display: flex;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.schedule-sidebar-item:before{
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    background: #ddd;
    top: 0;
    left: 24px;
}

.schedule-sidebar-item:last-child::before{
    display: none;
}

.schedule-sidebar-item:hover, .schedule-sidebar-item-active{
    background: #fff8eb;
}

.schedule-item-avatar{
    width: 40px;
    height: 40px;
    background: var(--orange);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    position: relative;
}

.schedule-item-db .schedule-item-avatar{
    color: var(--orange);
    background: #f1f5f8;
}

.schedule-item-sv .schedule-item-avatar, .schedule-item-ap .schedule-item-avatar{
    color: var(--primary-color);
}

.schedule-item-details{
    flex: 1;
    margin-left: 10px;
}

.schedule-item-time{
    font-size: 12px;
    color: var(--orange);
    display: flex;
    align-items: center;
}

.schedule-item-time span{
    color: #606771;
    margin-left: 5px;
    font-size: 11px;
}

.schedule-item-name{
    font-size: 12px;
    color: #606771;
}

.schedule-item-info{
    margin: 3px 0;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
}

.over-container-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.over-wo-status{
    color: #fff;
    font-size: 12px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 4px;
    text-transform: capitalize;
}

.over-section-header{
    display: flex;
    align-items: center;
    color: var(--orange);
    margin-bottom: 10px;
    font-weight: 500;
}

.over-section-icon{
    font-size: 20px;
    margin-right: 10px;
}

.over-wo-id{
    color: #414d55;
    font-weight: 500;
}

.over-wo-customer{
    color: var(--primary-color);
    margin: 5px 0;
}

.over-section-body{
    padding-left: 25px;
}

.over-wo-item{
    font-size: 14px;
    color: var(--orange);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.over-wo-item span{
    color: #414d55;
    margin-left: 10px;
}

.over-wo-item .over-wo-priority{
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
}

.wo-priority-normal{
    background: #009688;
    color: #fff;
}

.wo-priority-urgent{
    background: #f44336;
    color: #fff;
}

.wo-priority-high{
    background: var(--orange);
    color: #fff;
}

.wo-date-item{
    font-size: 18px;
    font-weight: 500;
    color: #414d55;
}

.wo-date-item span{
    font-size: 14px;
    color: #8a8a8a;
    font-weight: normal;
}

.shed-detail-holder:last-child{
    margin-bottom: 0;
}

.over-section-flex{
    display: flex;
    justify-content: space-between;
}

.over-section-flex .wo-attachment-wrap{
    max-width: 350px;
    margin-right: 15px;
}

.wo-footer-button-wrap{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.wo-footer-button{
    width: 25%;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 1px 10px rgb(0 0 0 / 10%);
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.wo-button-red{
    color: #f44336;
    border: 1px solid #f44336;
}

.wo-button-orange{
    color: var(--orange);
    border: 1px solid var(--orange);
}

.wo-button-primary{
    background: var(--primary-color);
    width: 35%;
}

.wo-footer-message{
    text-align: center;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 5px;
}

.shed-footer-container .view-wo-updates{
    text-align: center;
    margin-bottom: 25px;
}

.super-over-fluid, .map-over-fluid{
    position: fixed;
    z-index: 99999;
    background: rgba(241,245,248,0.95);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    display: none;
}

.super-over-container{
    width: 100%;
    max-width: 800px;
    height: calc(100% - 50px);
    margin: auto;
    margin-top: 50px;
    overflow-x: hidden;
    display: none;
}

.map-over-container{
    width: 100%;
    max-width: 800px;
    height: calc(100% - 50px);
    margin: auto;
    margin-top: 50px;
    overflow-x: hidden;
}

.super-over-header{
    padding: 20px 15px;
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.super-over-title{
    font-weight: 600;
    color: var(--primary-color);
}

.super-over-status{
    text-transform: capitalize;
    color: #009688;
}

.wo-change-item{
    padding: 5px 10px;
    border-bottom: 1px dashed #ddd;
}

.wo-change-item:last-child{
    border-bottom: none;
}

.wo-change-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wo-change-header .wo-change-time{
    font-weight: 500;
    color: #414d55;
    font-size: 13px;
}

.wo-change-name{
    font-size: 14px;
    color: var(--primary-color);
}

.wo-change-notes{
    margin-top: 5px;
    font-size: 14px;
    color: #414d55;
}

.close-super-over{
    text-align: center;
    color: #f44336;
    padding: 5px;
    cursor: pointer;
}

.task-flex-container{
    display: flex;
    position: relative;
    box-sizing: border-box;
    height: 100%;
}

.task-container{
    flex: 1;
    position: relative;
}

.task-detail-container{
    width: 385px;
    background: #fff;
    border: 1px solid #b9c7cd;
    box-sizing: border-box;
    border-radius: 8px;
    margin-left: 15px;
    display: none;
    position: fixed;
    height: calc(100% - 100px);
    right: 20px;
    top: 80px;
    box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
    overflow-x: hidden;
}

.task-input-wrap{
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.3s;
}

.task-input-focus{
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}

.task-input-error{
    border: 2px solid #f44336;
}

.task-input{
    height: 50px;
    padding: 0 15px;
    font-size: 15px;
    background: none;
    border: none;
    flex: 1;
}

.task-input:focus{
    outline: none;
}

.task-input-icon{
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--orange);
    background: #f1f5f8;
    margin-right: 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.task-input-icon:hover{
    background: var(--primary-color);
    color: #fff;
}

.form-task-title{
    font-weight: 600;
    color: #414d55;
}

.task-reminder-container, .task-duedate-container{
    display: none;
}

.task-table-container{
    margin-top: 20px;
    padding-bottom: 15px;
}

.table-task-item{
    display: flex;
    align-items: center;
    margin: 10px 0;
    border: 1px solid #dedede;
    border-radius: 8px;
    min-height: 50px;
    cursor: pointer;
}

.table-task-item:hover{
    border: 1px solid #b9c7cd;
}

.task-item-selected{
    background: #fff8eb;
    border: 1px solid var(--orange);
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.task-item-selected:hover{
    border: 1px solid var(--orange);
}

.task-item-selected .table-task-icon{
    color: #aaa;
}

.table-task-icon{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ddd;
}

.table-task-item:hover .table-task-icon{
    color: #aaa;
}

.task-icon-complete, .table-task-item:hover .task-icon-complete, .task-item-selected .task-icon-complete{
    color: #009688;
}



.table-task-details{
    flex: 1;
    padding: 5px 10px;
}

.table-task-title{
    color: #414d55;
    font-weight: 500;
}

.table-task-notes{
    font-size: 13px;
}

.close-task-detail{
    position: absolute;
    background: #f1f5f8;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #f44336;
    cursor: pointer;
    top: 5px;
    right: 5px;
    z-index: 1;
}

.task-detail-inner{
    padding: 15px;
    position: relative;
}

.table-task-attachement{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 5px;
    background: #fff;
    color: #414d55;
    font-size: 18px;
}

.task-detail-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    padding-right: 50px;
}

.task-detail-notes{
    font-size: 14px;
    margin-top: 10px;
    color: #414d55;
}

.task-detail-separator{
    width: 100%;
    height: 1px;
    border-top: 1px dashed #afbbc6;
    margin: 10px 0;
}

.task-status-wrap{
    font-size: 12px;
    color: #414d55;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.task-status-wrap span{
    padding: 3px 12px;
    text-transform: uppercase;
    font-size: 11px;
    color: #fff;
    border-radius: 4px;
    margin-right: 10px;
}

.task-status-open span{
    background: #50aba0;
}

.task-status-complete span{
    background: #8196a1;
}

.task-detail-reminder{
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 50px;
    background: #fff8eb;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

.task-reminder-icon{
    color: #414d55;
    font-size: 24px;
}

.task-reminder-info{
    flex: 1;
    padding: 0 10px;
}

.task-reminder-title{
    font-size: 12px;
    color: #414d55;
}

.task-reminder-detail{
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 4px;
}

.cancel-task-reminder{
    background: #fff;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    color: #f44336;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.cancel-task-reminder:hover{
    border: 1px solid #b9c7cd;
}

.task-attachment-wrap{
    margin: 25px 0;
}

.task-attachment-title{
    color: var(--orange);
    font-size: 13px;
    margin-bottom: 10px;
}

.task-attachment-photo{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

.task-attachment-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-detail-footer{
    width: 100%;
    padding: 20px 0;
}

.task-loading-item{
    padding: 10px;
    padding-left: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}

.task-loading-title{
    background: #ddd;
    height: 16px;
    border-radius: 3px;
    width: 30%;
    margin-bottom: 10px;
}

.task-loading-desc{
    width: 60%;
    height: 12px;
    background: #ededed;
    border-radius: 2px;
}

.button-remove-task{
    margin: 20px auto;
    width: max-content;
    font-size: 14px;
    color: #f44336;
    cursor: pointer;
}

.task-footer-status{
    color: #009688;
    text-align: center;
    font-weight: 500;
    margin-top: 25px;
}

.task-complete-time{
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}

.form-or-container{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #414d55;
    margin: 20px 0;
}

.form-or-line{
    border-top: 1px dashed #afbbc6;
    width: 30%;
}

.form-or-container span{
    margin: 0 10px;
}

.search-item-info{
    right: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--orange);
    position: absolute;
    font-style: italic;
}

.task-header-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-switch-container{
    display: flex;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    width: 360px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    position: relative;
    overflow: hidden;
}

.task-switch-item{
    flex: 1;
    width: 120px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s;
}

.task-switch-selected{
    color: #fff;
    cursor: default;
}

.task-switch-bg{
    width: 120px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 8px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
}

.table-item-bold{
    font-weight: 500;
}

.table-item-caps{
    text-transform: uppercase;
}

.table-item-capitalize{
    text-transform: capitalize;
}

.opportunity-row{
    cursor: pointer;
    transition: all 0.2s;
}

.opportunity-row:hover, .opportunity-row-selected{
    background: #ededed !important;
}

.oppo-detail-customer{
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.oppo-detail-site{
    color: #414d55;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.oppo-detail-unit{
    font-weight: 500;
    color: #414d55;
}

.oppo-detail-status{
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 10px;
    padding: 5px 20px;
    border: 1px solid #009688;
    background: #c0e0db;
    font-weight: 500;
    width: max-content;
    border-radius: 4px;
    color: #414d55;
}

.oppo-detail-notes{
    margin-top: 10px;
    font-size: 13px;
    font-style: italic;
    color: #414d55;
}

.oppo-history-section{
    margin-top: -10px;
}

.oppo-section-title{
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 10px;
}

.oppo-section-title i{
    color: var(--orange);
    margin-right: 10px;
    font-size: 16px;
}

.oppo-history-item{
    margin-top: 10px;
    padding: 15px 10px 10px 10px;
    background: #f1f6f8;
    border-radius: 8px;
}

.oppo-history-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.oppo-history-title{
    color: #414d55;
    font-weight: 500;
    font-size: 14px;
}

.oppo-history-time{
    font-size: 12px;
}

.oppo-history-description{
    font-size: 13px;
    color: #414d55;
}

.oppo-history-description span{
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--orange);
}

.oppo-history-notes{
    background: #ffff;
    padding: 8px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 12px;
}

.dashboard-switch-container{
    position: relative;
    background: #fff;
    display: flex;
    height: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    overflow: hidden;
}

.three-switch-container .selected-switch-bg{
    width: 33.33%;
}

.dashboard-switch-item{
    display: flex;
    box-sizing: border-box;
    width: 120px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.dashboard-switch-item i{
    margin-right: 10px;
}

.dashboard-switch-selected{
    cursor: default;
    color: #fff;
}

textarea{
    height: 100px;
}












.time-picker-wrap{
    position: relative;
    padding: 0;
    padding-left: 10px;
    cursor: pointer;
}

.time-picker-open{
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40, 77, 98, 0.19);
}

.time-picker-header{
    display: flex;
    align-items: center;
    width: 100%;
}

.time-picker-icon{
    height: 40px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ddd;
    font-size: 18px;
    color: var(--primary-color);
}

.time-picker-title{
    flex: 1;
    color: #414d55;
}

.time-picker-title span{
    color: #aaa;
}

.time-picker-container{
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    background: #f1f6f8;
    top: calc(100% + 12px);
    border-radius: 8px;
    right: 0;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    border: 1px solid #b9c7cd;
    display: none;
    z-index: 5;
}

.time-picker-container:before{
    content: '';
    position: absolute;
    right: 15px;
    border-bottom: 10px solid #b9c7cd;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -10px;
}

.time-picker-inner{
    display: flex;
}

.time-picker-column{
    display: flex;
    flex: 1;
    margin-right: 10px;
    background: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 4px;
}

.time-picker-column:last-child{
    margin-right: 0;
}

.time-picker-line{
    display: flex;
    flex-direction: column;
}

.time-picker-line:nth-child(2n){
    border-left: 1px solid #eee;
}

.time-picker-item{
    flex: 1;
    padding: 10px 15px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}

.time-picker-selected{
    border: 1px solid var(--primary-color);
    background: rgb(1 47 71 / 18%);
    color: var(--primary-color);
}

.time-picker-footer{
    margin: 10px 0;
}

.time-picker-time{
    text-align: center;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--orange);
}

.time-picker-button{
    background: #fff;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 500;
    border: 1px solid #b9c7cd;
    cursor: pointer;
}

.timepicker-inactive{
    color: #aaa;
    cursor: default;
    border: 1px solid transparent;
}

.over-dropdown-inactive{
    opacity: 0.5;
}

.form-icon-valid{
    color: green;
}

.form-icon-error{
    color: #f44336;
}

.customer-item-lead{
    color: var(--orange);
    font-size: 12px;
    vertical-align: text-top;
    font-weight: 500;
}

.parts-fluid, .store-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
}

.parts-container{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.close-parts-fluid, .close-store-fluid{
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 24px;
    color: #f44336;
    cursor: pointer;
    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);
    z-index: 2;
}

.close-parts-fluid i, .close-store-fluid i{
    transition: all 0.3s ease;
}

.close-parts-fluid:hover i, .close-store-fluid:hover i{
    transform: rotate(90deg);
}

.parts-header{
    width: calc(60% - 30px);
    margin: 15px auto 25px;
}

.parts-header-title{
    text-align: center;
    font-size: 32px;
    color: var(--primary-color);
    font-weight: 600;
}

.parts-switch-container{
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 25px;
    margin-top: 20px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 15%);
}

.parts-switch-item{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    color: var(--primary-color);
    cursor: pointer;
}

.parts-switch-active{
    background: var(--primary-color);
    color: #fff;
    cursor: default;
}

.parts-main{
    width: calc(60% - 30px);
    margin: auto;
}

.parts-main-item{
    display: none;
}

.have-parts-main{
    display: block;
}

.part-finder-body{
    display: none;
}

#part-finder-machine{
    display: block;
}

.part-machine-body, .part-section-body{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

.part-machine-item{
    width: calc(33% - 25px);
    margin: 15px 0;
    background: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.3s;
}

.part-machine-manu{
    font-size: 16px;
    margin-bottom: 5px;
}

.part-machine-model{
    font-size: 24px;
    font-weight: 700;
}

.part-machine-item:hover{
    background: var(--primary-color);
    color: #fff;
}

.machine-section-item, .section-loading-item{
    width: calc(50% - 15px);
    border: 1px solid #f1f5f8;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 15px 0;
}

.machine-section-item{
    cursor: pointer;
    transition: all 0.3s;
}

.machine-section-item:hover{
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40, 77, 98, 0.19);
}

.section-item-photo{
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    color: #f1f5f8;
}

.section-item-photo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section-item-photo span{
    font-size: 28px;
    margin-top: 15px;
}

.section-item-footer{
    height: 60px;
    background: #f1f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-item-name{
    color: var(--primary-color);
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.section-search-holder{
    margin: 15px;
}

.part-finder-header{
    position: relative;
    padding: 0 15px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s;
}

.part-section-goback{
    position: absolute;
    width: 50px;
    height: 50px;
    color: var(--orange);
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    display: none;
    left: 0;
    top: 0;
    cursor: pointer;
}

.ph-item-title{
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    transition: all 0.3s;
}

.ph-item-subtitle{
    font-size: 18px;
    color: var(--primary-color);
    display: none;
}

.part-section-header{
    padding-left: 50px;
}

.part-section-header .ph-item-title{
    font-size: 28px;
}

.parts-zoomer{
    background: #fff;
    position: fixed;
    box-sizing: border-box;
    z-index: 99;
}

.parts-zoomer img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.part-over-fluid{
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f1f5f8;
    display: none;
}

.part-sidebar-container{
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid #b9c7cd;
    background: #f1f5f8;
    box-sizing: border-box;
    padding: 10px;
    overflow-x: hidden;
    display: none;
}

.part-sidebar-container .over-sidebar-title{
    margin-bottom: 5px;
}

.cart-sidebar-container{
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #b9c7cd;
    background: #f1f5f8;
    box-sizing: border-box;
    padding: 10px;
    overflow-x: hidden;
    display: none;
    z-index: 99;
}

.cart-sidebar-container .cart-sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-cart-sidebar{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.close-cart-sidebar:hover{
    color: #f44336;
}

.part-photo-container{
    width: calc(60% - 30px);
    height: 100%;
    padding-top: 80px;
    box-sizing: border-box;
    background: #fff;
    margin: auto;
    position: relative;
    overflow: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part-photo-header{
    background: #f1f5f8;
    border: 1px solid #b9c7cd;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    height: 60px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}

.part-header{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.part-header-name{
    color: var(--primary-color);
    flex: 1;
}

.part-header-title{
    font-size: 18px;
    font-weight: 700;
}

.part-header-action{
    display: flex;
    flex: 1;
    border-left: 1px solid #ddd;
    align-items: center;
    justify-content: center;
}

.part-header-button{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #414d55;
    border-radius: 4px;
    margin: 0 10px;
    background: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.part-header-button:hover{
    color: var(--primary-color);
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.close-part-over{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f44336;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    box-sizing: border-box;
}

.close-part-over:hover{
    border: 1px solid #f44336;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.part-photo-inner{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.part-photo-inner img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.sidebar-part-item{
    padding: 10px 0;
    border-bottom: 1px dashed #b9c7cd;
}

.part-main-container{
    width: 100%;
    display: flex;
}

.part-sl-wrap{
    width: 24px;
    height: 24px;
    border: 2px solid #000;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 12px;
    background: #fff;
    overflow: hidden;
}

.part-info-wrap{
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    width: calc(100% - 24px);
    cursor: pointer;
}

.part-info-wrap .part-number{
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
}

.part-info-wrap .part-desc{
    font-size: 13px;
}

.part-info-wrap .part-price{
    font-size: 12px;
    color: var(--orange);
    font-weight: 600;
    margin-top: 5px;
}

.part-option-container{
    padding-left: 35px;
}

.part-option-divider{
    padding: 10px 0 0;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #414d55;
    text-transform: uppercase;
}

.part-option-divider-line{
    height: 1px;
    background: #b9c7cd;
    flex: 1;
    margin-left: 10px;
}

.part-option-container .part-info-wrap{
    border-bottom: 1px solid #b9c7cd;
    padding: 10px 0;
    width: 100%;
}

.part-option-container .part-info-wrap:last-child{
    border-bottom: none;
}

.part-checkbox{
    position: absolute;
    width: 20px;
    height: 20px;
    top: -5px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    transition: all 0.2s ease;
}

.part-option-container .part-info-wrap .part-checkbox{
    top: 5px;
}

.form-input-loading{
    height: 50px;
    background: #f1f5f8;
    width: 100%;
    border-radius: 8px;
}

.part-info-wrap:hover .part-checkbox{
    color: #414d55;
}

.part-in-cart .part-checkbox{
    color: #414d55;
}

.sidebar-cart-item{
    position: relative;
    padding: 10px;
    background: #fff;
    margin-top: 5px;
    border-radius: 5px;
}

.cart-item-num{
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.cart-item-desc{
    font-size: 13px;
}

.cart-item-price-wrap{
    display: flex;
    position: relative;
    align-items: center;
}

.item-price-title{
    position: absolute;
    font-size: 13px;
    font-weight: 600;
    color: var(--orange);
    left: 5px;
}

.cart-item-price{
    width: 100%;
    text-align: right;
    padding: 5px;
    padding-left: 70px;
    background: none;
    border: none;
    height: 30px;
    color: #414d55;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.cart-item-price:focus{
    outline: none;
    border-bottom: 1px solid #b9c7cd;
}

.cart-item-quantity-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.item-quantity-title{
    font-size: 13px;
    font-weight: 600;
    color: #414d55;
}

.item-quantity-counter{
    display: flex;
    width: 78px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.item-quantity-button{
    width: 24px;
    height: 24px;
    background: #f1f5f8;
    border-radius: 5px;
    color: #aaa;
    position: absolute;
    top: 3px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.item-quantity-down{
    left: 0;
}

.item-quantity-up{
    right: 0;
}

.item-quantity-button:hover{
    color: #414d55;
}

.item-quantity-value{
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    color: #414d55;
    font-weight: 500;
}

.cart-item-total-wrap{
    padding: 0 10px;
    background: #f1f5f8;
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    height: 40px;
    font-weight: 500;
}

.cart-item-total-wrap .item-total-title{
    color: #414d55;
}

.cart-item-total-wrap .item-total-value{
    color: var(--primary-color);
}

.delete-cart-item{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    cursor: pointer;
}

.delete-cart-item:hover{
    color: #f44336;
}

.cart-item-note{
    display: none;
}

.cart-item-loader{
    position: absolute;
    top: 5px;
    right: 40px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-cart-item.is-item-loading{
    opacity: 0.5;
}

.cart-sidebar-toggle{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 75px;
    right: 10px;
    text-align: center;
    line-height: 50px;
    background: #fff;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 18px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);
    cursor: pointer;
    display: none;
    z-index: 99;
}

.cart-sidebar-footer{
    margin-top: 15px;
    display: none;
}

.cart-total-wrap{
    display: flex;
    align-items: center;
    padding: 5px;
    position: relative;
    border-bottom: 1px solid #ccc;
}

.total-wrap-title{
    font-weight: 500;
    color: #414d55;
    position: absolute;
    font-size: 14px;
}

.cart-total-input{
    height: 30px;
    text-align: right;
    background: none;
    border: none;
    width: 100%;
    padding-left: 100px;
    color: #414d55;
    font-weight: 600;
}

.cart-total-input:focus{
    outline: none;
}

.cart-total-holder{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    color: var(--primary-color);
    font-size: 18px;
    margin-bottom: 25px;
}

.cart-total-value{
    font-size: 24px;
    font-weight: 700;
}

.no-order-table{
    padding: 15px;
    text-align: center;
    color: #414d55;
    background: #f1f5f8;
}

.form-parts-table{
    display: none;
    background: #f1f5f8;
    border-radius: 8px;
    padding: 0 15px;
    margin-bottom: 25px;
    padding-bottom: 10px;
}

.parts-table-header, .form-parts-item{
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    color: #414d55;
}

.form-parts-item{
    background: #fff;
}

.form-parts-item:nth-child(2n){
    background: #f1f5f8;
}

.parts-header-num, .form-parts-item .form-item-num{
    width: 15%;
}

.parts-header-desc, .form-parts-item .form-item-desc{
    width: 20%;
}

.parts-header-quantity, .form-parts-item .form-item-quantity{
    width: 10%;
}

.parts-header-price, .form-parts-item .form-item-price{
    width: 10%;
}

.parts-header-total, .form-parts-item .form-item-total{
    width: 10%;
}

.parts-header-notes, .form-parts-item .form-item-notes{
    width: 35%;
}

.parts-table-header{
    font-weight: bold;
    color: var(--orange);
}

.form-item-notes span{
    font-weight: 600;
}

.quantity-switch-wrap{
    display: flex;
    margin-right: -5px;
}

.quantity-switch-item{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 4px;
}

.quantity-switch-item:hover{
    color: var(--orange);
}

.form-search-nodefault{
    padding: 10px;
    font-size: 14px;
}

.form-note{
    font-size: 12px;
    color: #414d55;
    margin-bottom: 10px;
}

.form-note.note-highlight{
    font-size: 13px;
    color: var(--primary-color);
}

.warehouse-location-hidden{
    display: none;
}

.table-action-btn{
    width: 30px;
    height: 30px;
    position: relative;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #ddd;
    color: #8a8a8a;
    border-radius: 4px;
}

.table-action-btn .action-tooltip{
    position: absolute;
    background: var(--primary-color);
    padding: 5px 15px;
    box-sizing: border-box;
    width: max-content;
    font-size: 10px;
    color: #fff;
    border-radius: 4px;
    top: -28px;
    display: none;
}

.table-action-btn .action-tooltip:before{
    content: '';
    background: transparent;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid var(--primary-color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 100%;
}

.table-action-btn:hover{
    color: var(--primary-color);
}

.table-action-btn:hover .action-tooltip{
    display: block;
}

.edit-partno-container{
    display: none;
}

.dropdown-section-title{
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    padding: 3px;
}

.order-full-address{
    font-size: 12px;
    color: #414d55;
    margin-top: 5px;
    margin-left: 10px;
    font-weight: 400;
}

.parts-cost-container{
    display: none;
}

.parts-cost-wrap{
    background: #f1f5f8;
    padding: 10px;
    border-radius: 8px;
}

.parts-cost-item{
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #414d55;
    font-weight: 500;
}

.part-total-item{
    border-bottom: none;
    font-size: 18px;
}

.btn-search-parts{
    background: var(--primary-color);
    height: 40px;
    margin-right: -5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    width: 100px;
    font-weight: 500;
}

.part-result-section-title{
    color: var(--primary-color);
    font-size: 16px;
}

.part-result-stock-title{
    color: #009688;
}

.parts-result-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.parts-result-wrap .part-info-wrap{
    box-sizing: border-box;
    position: relative;
    width: 30%;
    cursor: pointer;
    background: #f1f5f8;
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
}

.parts-result-wrap .part-info-wrap .part-checkbox{
    top: 5px;
    right: 5px;
}

.order-row{
    cursor: pointer;
}

.table-order-total{
    font-weight: 500;
}

.table-order-status{
    color: #8a8a8a;
}

.schedule-calendar{
    position: relative;
}
/**
.schedule-map-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}
**/
#customer-csv-input, #lead-csv-input{
    display: none;
}

.main-popup-fluid{
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #f1f5f8;
    display: none;
}

.close-main-popup{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #f44336;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    border-radius: 8px;
    z-index: 3;
}

.main-popup-container{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
}

.sidebar-customer-container{
    width: 400px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

.main-popup-inner{
    background: #fff;
    width: 100%;
    max-width: 800px;
    min-height: calc(100% - 100px);
    margin: 50px auto;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 5px 15px;
    box-sizing: border-box;
}

.main-popup-header{
    padding: 15px 10px;
    border-bottom: 1px dashed #afbbc6;
}

.popup-header-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color);
}

.popup-header-subtitle{
    font-size: 16px;
    font-weight: 400;
    margin-top: 5px;
}

.main-popup-body{
    padding: 15px;
}

.bulk-map-holder{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.bulk-map-title{
    font-size: 14px;
    color: #414d55;
    width: calc(50% - 10px);
}

.bulk-dropdown-wrap{
    width: calc(50% - 10px);
    position: relative;
}

.bulk-dropdown-header{
    display: flex;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    height: 40px;
    background: #f1f5f8;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.bulk-dropdown-title{
    flex: 1;
    padding: 0 10px;
    color: #414d55;
}

.bulk-dropdown-title span{
    color: #aaa;
}

.bulk-dropdown-icon{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.bulk-dropdown-open .bulk-dropdown-header{
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
}

.bulk-dropdown-open .bulk-dropdown-header .bulk-dropdown-icon{
    transform: rotate(180deg);
}

.bulk-dropdown-container{
    position: absolute;
    background: #f1f5f8;
    width: 100%;
    border-radius: 8px;
    top: calc(100% + 5px);
    box-sizing: border-box;
    padding: 10px;
    max-height: 300px;
    overflow-x: hidden;
    display: none;
    z-index: 2;
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
}

.bulk-dropdown-item{
    font-size: 13px;
    padding: 10px 5px;
    border-bottom: 1px dashed #a7c0cb;
    cursor: pointer;
    color: #aaa;
}

.bulk-dropdown-item:last-child{
    border-bottom: none;
}

.bulk-dropdown-item:hover{
    color: #414d55;
}

.bulk-loading-title{
    height: 32px;
    width: 50%;
    background: #f1f5f8;
    border-radius: 4;
    margin-top: 15px;
}

.bulk-loading-subtitle{
    margin-top: 15px;
    width: 70%;
    height: 16px;
    background: #f1f5f8;
    border-radius: 3px;
    margin-bottom: 40px;
}

.bulk-loading-item{
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.bulk-loading-left{
    width: 30%;
    height: 14px;
    background: #f1f5f8;
    border-radius: 3px;
}

.bulk-loading-right{
    height: 40px;
    width: 50%;
    background: #f1f5f8;
    border-radius: 8px;
}

.bulk-multi-title{
    font-weight: 500;
    color: #414d55;
    margin-top: 20px;
}

.multi-name-item{
    font-size: 13px;
    color: #8a8a8a;
    margin-top: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.bulk-section-title{
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 15px;
}

.bulk-section-subtitle{
    font-size: 13px;
    margin-top: 5px;
    color: #414d55;
}

.multi-item-icon {
    margin-right: 10px;
}

.multi-icon-square{
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #f1f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multi-icon-circle{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #f1f5f8;
}

.mutli-item-address{
    flex: 1;
}

.multi-item-primary{
    font-size: 11px;
    color: var(--orange);
    margin-left: 10px;
    display: none;
}

.multi-name-item:hover, .multi-name-selected{
    color: #414d55;
}

.multi-name-selected .multi-item-icon .multi-icon-square{
    background: var(--primary-color);
}

.multi-name-selected .multi-item-primary{
    display: block;
}

.bulk-multi-item{
    padding: 10px;
}

.plan-schedule-button{
    margin: 15px 0;
    height: 40px;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    padding: 0 25px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    background: var(--orange);
    border-radius: 8px;
}

.popup-inner-map{
    position: relative;
    width: 100%;
    max-width: unset;
    height: 100%;
    margin: 0;
    border: none;
    padding: 0;
    background: #f1f5f8;
}

#schedule-map{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.schedule-map-test-container{
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -5px 5px -5px #8a8a8a;
}

.smd-item{
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    margin: 0 10px;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
}

.smd-all{
    height: 100%;
    border-right: 1px solid var(--primary-color);
    margin-left: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 24px;
    color: var(--primary-color);
    cursor: pointer;
    border-radius: 0;
}

.smd-item:hover{
    background: #f1f5f8;
}

.smd-item-active{
    background: var(--primary-color);
    color: #fff;
    cursor: default;
}

.smd-item-active:hover{
    background: var(--primary-color);
    color: #fff;
}

.schedule-map-date-slider{
    overflow: hidden;
    width: calc(100% - 200px);
}

.schedule-map-slider{
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}

.schedule-map-arrow-container{
    display: flex;
    height: 100%;
    background: #f1f5f8;
    width: 120px;
}

.schedule-map-arrow{
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #222;
    box-sizing: border-box;
}

.schedule-map-arrow.arrow-right{
    border-left: 1px solid #fff;
}

.schedule-map-arrow:hover{
    background: #dfe5e9;
}









/** Schedule Map Marker **/
.schedule-marker {
    background-color: #009688;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 13px;
    padding: 5px;
    position: relative;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    max-width: 150px;
    border: 2px solid #222;
}

.schedule-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #222;
}

.schedule-marker .marker-index{
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #fff;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.schedule-marker .marker-name{
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 5px;
}

.schedule-marker-blue{
    background: blue;
}

.schedule-marker-blue:after{
    border-top: 8px solid blue;
}

.schedule-marker-green{
    background: green;
}

.schedule-marker-green:after{
    border-top: 8px solid green;
}

.schedule-marker-yellow{
    background: yellow;
    color: black;
}

.schedule-marker-yellow:after{
    border-top: 8px solid yellow;
}

.schedule-marker-orange{
    background: orange;
}

.schedule-marker-orange:after{
    border-top: 8px solid orange;
}

.schedule-map-footer{
    position: absolute;
    width: calc(100% - 200px);
    background: #fff;
    bottom: 20px;
    left: 100px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.schedule-map-week-container{
    height: calc(100% - 10px);
    margin: 5px 0;
    position: relative;
}

.schedule-map-week-header{
    display: flex;
    align-items: center;
    width: 280px;
    border-radius: 5px;
    box-sizing: border-box;
    background: #f1f5f8;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
}

.schedule-map-week-title{
    flex: 1;
    font-size: 14px;
    color: var(--primary-color);
}

.schedule-map-week-chevron{
    color: var(--orange);
    transition: all 0.3s;
}

.schedule-map-week-open .schedule-map-week-chevron{
    transform: rotate(180deg);
}

.schedule-map-week-dropdown{
    position: absolute;
    display: none;
    bottom: calc(100% + 10px);
    background: #fff;
    width: 280px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 8px;
}

.schedule-map-week-item{
    padding: 15px 5px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px dashed #b9c7cd;
    transition: all 0.3s;
}

.schedule-map-week-selected, .schedule-map-week-item:hover{
    color: #414d55;
}

.schedule-map-week-item:last-child{
    border-bottom: none;
}

.schedule-map-date-container{
    flex: 1;
    display: flex;
    margin-left: 10px;
    border-left: 1px dashed #b9c7cd;
    padding-left: 5px;
}

.schedule-map-date-item{
    height: 40px;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin: 0 5px;
    border-radius: 4px;
    width: calc(20% - 20px);
}

.schedule-map-date-item i{
    font-size: 15px;
    margin-right: 10px;
}

.schedule-map-date-item:hover{
    color: #414d55;
    background: #f1f5f8;
}

.schedule-map-date-selected, .schedule-map-date-selected:hover{
    background: var(--primary-color);
    color: #fff;
}

.schedule-home-marker {
    background-color: var(--primary-color);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 10px 15px;
    position: relative;
    z-index: 2;
}

.schedule-home-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-color);
}

.schedule-overnight-marker {
    background-color: #222;
    border-radius: 8px;
    color: #fba047;
    font-size: 14px;
    padding: 10px 15px;
    position: relative;
    z-index: 2;
}

.schedule-overnight-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #222;
}

.company-marker {
    background-color: var(--primary-color);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 10px 15px;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}

.company-marker-title{
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.company-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

.lead-marker{
    background-color: var(--light-blue);
}

.work-hour-container{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    opacity: 0.5;
}

.work-hour-container:hover, .work-hour-on{
    opacity: 1;
}

.work-hour-day{
    width: 100px;
    color: #414d55;
}

.work-hour-check{
    width: 20px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.work-hour-on .work-hour-check{
    color: var(--primary-color);
}

.work-hour-time-container{
    display: flex;
}

.work-hour-time-wrap{
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.work-hour-time-picker{
    position: relative;
    width: 120px;
    cursor: pointer;
}

.whtp-container{
    position: absolute;
    z-index: 2;
    background: #f1f5f8;
    max-height: 200px;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    top: calc(100% + 5px);
    box-sizing: border-box;
    border: 1px solid #b9c7cd;
    display: none;
}

.whtp-title{
    padding: 10px;
    background: #f1f5f8;
    color: #414d55;
    font-size: 14px;
}

.whtp-title span{
    color: #aaa;
}

.whtp-item{
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
}

.whtp-item:hover{
    color: #414d55;
}

.whtp-separator{
    margin: 0 10px;
}

.hour-overnight-check{
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    color: #aaa;
}

.hour-overnight-check i{
    margin-right: 10px;
}

.hour-overnight-check:hover{
    color: #414d55;
}

.hour-overnight-active, .hour-overnight-active:hover{
    color: var(--orange);
}

.sv-report-button{
    background: #f1f5f8;
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #414d55;
    margin-bottom: 10px;
    cursor: pointer;
}

.sv-report-button i{
    font-size: 18px;
    color: var(--primary-color);
}

.vt-cust-container{
    display: flex;
}

.vt-cust-icon{
    width: 40px;
    height: 40px;
    background: var(--orange);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.vt-cust-details{
    flex: 1;
    margin-left: 10px;
}

.vt-schedule-date{
    font-size: 13px;
    color: #414d55;
    font-weight: 500;
}

.vt-cust-name{
    color: var(--primary-color);
}

.vt-cust-address{
    font-size: 12px;
    margin-top: 10px;
}






/** Dashboard End **/
/** Map Start **/
.pac-container{
    margin-top: 15px;
    min-width: 295.5px;
    margin-left: -10px;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    background: #f1f6f8;
    border: 1px solid #b9c7cd;
    box-shadow: 0 2px 6px rgb(40 77 98 / 19%);
}

.pac-item{
    padding: 10px 5px;
    border-bottom: 1px dashed #a7c0cb;
    border-top: none;
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    color: #8a8a8a;
    cursor: pointer;
}

.pac-item:last-child{
    margin-bottom: 10px;
}

.pac-item-query{
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #8a8a8a;
}

.pac-matched{
    font-weight: 500;
    color: #8a8a8a;
}

.pac-item:hover, .pac-item:hover .pac-item-query, .pac-item:hover .pac-matched{
    color: #000;
    background: transparent;
}

.map-info-wrap{
    font-family: 'Rubik', sans-serif;
    color: #8a8a8a;
}

.map-info-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.map-info-address{
    max-width: 300px;
    font-size: 13px;
}
/** Map End **/



/** Datepicker Start **/

.ui-datepicker-header{
    display: flex;
    height: 50px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
}

.ui-datepicker-title{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ui-datepicker-next, .ui-datepicker-prev{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
    background: #f1f5f8;
    border-radius: 4px;
}

.ui-datepicker-calendar{
    width: 100%;
    table-layout: fixed;
}

.ui-datepicker-calendar th{
    font-size: 13px;
    color: #b9c7cd;
    font-weight: 400;
    height: 30px;
}

.ui-datepicker-calendar td a, .ui-datepicker-calendar td span{
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    width: 100%;
    display: block;
    text-decoration: none;
    background: transparent;
    font-size: 14px;
    color: #aaa;
}

.ui-datepicker-unselectable{
    opacity: 0.6;
}

.ui-datepicker-calendar td a{
    color: #414d55;
}

.ui-datepicker-calendar td a:hover{
    background: #dfe8ec;
}

.ui-datepicker-calendar .ui-datepicker-current-day a, .ui-datepicker-calendar .ui-datepicker-current-day a:hover{
    background: var(--light-blue);
    color: #fff;
}

.val-na{
    color: #aaa;
}

/** Datepicker End **/

/** Schedule Datepicker Start **/

.schedule-date-picker{
    width: 100%;
    max-width: 550px;
    margin: auto;
}

.schedule-date-picker .ui-datepicker-calendar{
    border-spacing: 10px;
}

.schedule-date-picker .ui-datepicker-header{
    width: 100%;
    max-width: 300px;
    margin: auto;
    background: none;
}

.schedule-date-picker .ui-datepicker-calendar th{
    color: #414d55;
    height: 50px;
}

.schedule-date-picker .ui-datepicker-calendar td a, .schedule-date-picker .ui-datepicker-calendar td span{
    height: 50px;
    line-height: 50px;
}

/** Schedule Datepicker End **/

#customer-all-map{
    position: absolute;
    width: 100%;
    height: 100%;
}


/** New **/

.over-sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.over-sidebar-header .over-sidebar-title{
    display: flex;
    align-items: center;
}

.over-sidebar-header .over-sidebar-title i{
    font-size: 20px;
    margin-right: 10px;
    color: var(--orange);
}

.schedule-sidebar-status{
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 4px;
}

.vt-details-row{
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.vt-details-icon{
    font-size: 28px;
    color: var(--orange);
}

.vt-detail-wrap{
    flex: 1;
    margin: 0 20px;
    margin-top: 5px;
}

.vt-details-title{
    color: var(--orange);
    font-weight: 500;
}

.vt-details-name{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.vt-details-phone{
    font-size: 13px;
    font-weight: 500;
}

.vt-action-btn{
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vt-multi-row{
    display: flex;
    padding: 0 20px;
}

.vt-multi-row .vt-details-row{
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
    flex: 1;
}

.vt-details-row:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vt-details-name span{
    font-size: 13px;
    color: #8a8a8a;
    margin-left: 5px;
}

.vt-details-text{
    margin: 10px 0;
    font-size: 14px;
    margin-bottom: 25px;
}

.vt-details-btn{
    padding: 5px 15px;
    border: 1px solid var(--primary-color);
    width: max-content;
    border-radius: 4px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.vt-button-container{
    display: flex;
    margin-top: 25px;
}

.map-info-title{
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
}

.lead-info-container .map-info-title{
    color: var(--light-blue);
}

.map-info-container .map-info-address{
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 12px;
    color: #606771;
}

.schedule-info-container .map-info-address{
    margin-bottom: 0;
}

.map-info-btn{
    height: 30px;
    background: var(--primary-color);
    width: max-content;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
}

.lead-info-container .map-info-btn{
    background: var(--light-blue);
}

.sidebar-customer-header{
    display: flex;
    background: #f1f5f8;
    height: 50px;
    align-items: center;
    padding: 0 10px;
}

.sidebar-customer-header-title{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: var(--primary-color);
    font-size: 18px;
}

.sidebar-customer-header-title i{
    color: var(--orange);
    font-size: 20px;
    margin-right: 10px;
}

.close-sidebar-customer{
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-customer-inner{
    overflow-x: hidden;
    height: calc(100% - 50px);
}

.schedule-duration-item{
    background: #f1f5f8;
    font-size: 12px;
    padding: 5px;
    color: #414d55;
}

.schedule-duration-item span{
    font-style: italic;
}

.schedule-start-wrap{
    font-size: 14px;
    color: var(--primary-color);
    padding: 10px 5px;
    background: var(--orange);
}

.schedule-over-container{
    width: 50%;
}

.vt-rating-row{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.vt-rating-col{
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
}

.vt-rating-title{
    font-weight: 600;
    margin-right: 20px;
}

.vt-rating-item{
    display: flex;
}

.vt-rating-star{
    font-size: 20px;
    color: var(--orange);
    margin-right: 10px;
}

.vt-rating{
    font-size: 18px;
    font-weight: 500;
    color: #414d55;
}

.vt-rating span{
    font-size: 14px;
    color: #8a8a8a;
}

.vt-rating-caret{
    margin-left: 10px;
    font-size: 20px;
}

.vt-rating-caret.caret-green{
    color: #009688;
}

.vt-rating-caret.caret-red{
    color: #f44336;
}

.vt-form-row{
    display: flex;
    justify-content: space-between;
}

.vt-form-row .over-sidebar-form{
    width: calc(50% - 10px);
    box-sizing: border-box;
    margin-top: 0;
}

.dashboard-header-button{
    background: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 3px;
    box-shadow: 0 2px 20px rgb(208 209 210);
    color: var(--orange);
    cursor: pointer;
    margin-right: 10px;
    min-width: 100px;
    box-sizing: border-box;
}

.dhb-icon{
    font-size: 1.1em;
    margin-right: 10px;
}

.dhb-chevron{
    color: #222;
    margin-left: 15px;
}

.dhb-chevron i{
    margin: 0 5px;
}

.dashboard-header-input-wrap{
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 2px 20px rgb(208 209 210);
    padding-right: 15px;
    border-radius: 3px;
    color: var(--orange);
    margin-right: 10px;
}

.dashboard-header-input{
    height: 40px;
    padding: 0 10px;
    border: none;
    background: none;
}

.dashboard-header-input:focus{
    outline: none;
}

.dashboard-table-legend-container{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-table-legend-item{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #8a8a8a;
    margin-left: 15px;
}

.dashboard-legend-circle{
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-right: 10px;
}

.legend-circle-red{
    border: 3px solid #f44336;
}

.legend-circle-green{
    border: 3px solid #8bc34a;
}

.legend-circle-blue{
    border: 3px solid #2196f3;
}

.legend-circle-yellow{
    border: 3px solid #ffc107;
}

#appointment-container{
    background: #fff;
    height: auto;
    min-height: calc(100% - 120px);
}

.appointment-table-row{
    cursor: pointer;
    transition: all 0.3s;
}

.appointment-table-row.status-scheduled{
    border-left: 5px solid #ffc107;
}

.appointment-table-row.status-arrived{
    border-left: 5px solid #2196f3;
}

.appointment-table-row.status-complete{
    border-left: 5px solid #8bc34a;
}

.appointment-table-row.status-missed{
    border-left: 5px solid #f44336;
}

.appointment-table-row:hover{
    background: #eee;
}

.appointment-table-icon{
    width: 30px;
    height: 30px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 3px;
}

#button-update-task{
    margin: 25px 0 10px;
    height: 45px;
    background: var(--orange);
    color: var(--primary-color);
}

.task-update-title{
    display: flex;
    align-items: center;
}

.task-update-title span{
    font-size: 12px;
    color: #414d55;
    font-weight: 500;
}

.task-detail-inner .over-sidebar-form{
    background: #f1f6f8;
}

.task-detail-inner .form-input-wrap{
    border: 1px solid #b9c7cd;
}

.company-tab-container{
    display: flex;
    margin-top: 15px;
    padding: 5px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.company-tab-item{
    flex: 1;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
}

.company-tab-item:hover{
    background: #f1f5f8;
}

.company-tab-selected, .company-tab-selected:hover{
    background: var(--primary-color);
    color: #fff;
    cursor: default;
}

.sidebar-company-body{
    padding: 15px;
}

.sidebar-company-name{
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.sidebar-lead-body .sidebar-company-name{
    color: var(--light-blue);
}

.sidebar-company-address{
    font-size: 13px;
    color: #606771;
}

.sidebar-company-address span{
    font-weight: 500;
}

.sidebar-section-separator{
    margin: 15px 0;
    border-top: 1px dashed #b9c7cd;
}

.sidebar-section-title{
    color: var(--orange);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.sidebar-sites-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sidebar-site-item{
    width: 40%;
    margin-bottom: 20px;
}

.sidebar-site-name{
    font-size: 14px;
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 4px;
}

.sidebar-site-name span{
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 4px;
    margin-left: 5px;
}

.sidebar-lead-body .sidebar-site-name{
    color: var(--light-blue);
}

.sidebar-site-address{
    font-size: 12px;
    color: #606771;
}

.sidebar-event-item{
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.sidebar-event-item:last-child{
    border-bottom: none;
}

.sidebar-event-date{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.sidebar-lead-body .sidebar-event-date{
    color: var(--light-blue);
}

.sidebar-event-date span{
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
}

.sidebar-event-date .status-missed{
    color: #f44336;
}

.sidebar-event-date .status-complete{
    color: #009688;
}

.sidebar-event-info{
    font-size: 12px;
    color: #606771;
}

.sidebar-event-info span{
    font-weight: 500;
}

.sidebar-section-empty{
    font-size: 14px;
}

.sidebar-nearby-item{
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.sidebar-nearby-item:last-child{
    border-bottom: none;
}

.sidebar-nearby-details{
    flex: 1;
    padding-right: 10px;
}

.sidebar-nearby-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.sidebar-nearby-lead .sidebar-nearby-name{
    color: var(--light-blue);
}

.sidebar-nearby-address{
    font-size: 12px;
    color: #606771;
}

.sidebar-nearby-address span{
    font-weight: 500;
}

.sidebar-nearby-distance{
    font-size: 12px;
    font-weight: 500;
    color: #414d55;
}

.visit-duration-wrap{
    display: flex;
    background: #f1f5f8;
    height: 50px;
    width: 220px;
    border-radius: 4px;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}

.visit-duration-button{
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #414d55;
    cursor: pointer;
    transition: all 0.2s;
}

.visit-duration-button.button-inactive{
    color: #aaa;
    cursor: default;
}

.visit-duration-button:hover{
    background: #b9c7cd;
}

.visit-duration-button.button-inactive:hover{
    background: none;
}

.visit-duration-title{
    background: #fff;
    height: 44px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #414d55;
    font-weight: 500;
    margin: 0 5px;
}

.table-staff-intro{
    flex: 1;
    width: calc(100% - 55px);
}

.table-staff-name{
    color: #414d55;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.table-staff-email{
    color: #606771;
    font-size: 12px;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.staff-attendance-wrap{
    display: flex;
}

.staff-attendance-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4px;
    font-size: 11px;
    color: #606771;
}

.staff-attendance-item:first-child{
    margin-left: 0;
}

.attendance-item-date{
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: #f1f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #414d55;
    margin-top: 2px;
}

#staff-sr-table .dashboard-table-row{
    height: auto;
    min-height: 60px;
    padding: 5px 15px;
    align-items: center;
}

.attendance-item-present{
    background: #6ebd70;
    color: #fff;
}

.attendance-item-absent{
    background: #f77065;
    color: #fff;
}

.table-staff-companies, .table-staff-schedule{
    flex-direction: column;
    align-items: flex-start;
}

.staff-company-title, .staff-schedule-title{
    color: #414d55;
    font-weight: 500;
}

.staff-company-breakup, .staff-schedule-breakup{
    font-size: 11px;
    color: #606771;
    margin-top: 3px;
}

.staff-company-empty, .staff-schedule-empty{
    color: #aaa;
}

.table-pagination-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-page{
    width: 40px;
    height: 40px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.pagination-page-active, .pagination-page:hover{
    background: var(--primary-color);
    color: #fff;
}

.pagination-page-active{
    cursor: default;
}

.staff-company-multi-actions{
    display: flex;
    padding: 10px;
    border-top: 1px solid #b9c7cd;
    border-bottom: 1px solid #b9c7cd;
    margin-bottom: 20px;
    justify-content: center;
}

.staff-company-multi-button{
    height: 40px;
    border-radius: 4px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0 15px;
    cursor: pointer;
}

.staff-company-multi-button i{
    font-size: 16px;
    margin-right: 10px;
}

.staff-company-table{
    background: #fff;
    padding: 10px;
    margin: 20px 0;
}

.company-table-item{
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #f1f5f8;
}

.company-table-item:last-child{
    border-bottom: none;
}

.company-table-loading{
    height: 55px;
}

.staff-company-table .company-table-loading .company-avatar{
    width: 45px;
    height: 45px;
    background: #f1f5f8;
    border-radius: 4px;
    margin-left: 45px;
}

.company-col{
    flex: 1;
    margin: 0 15px;
}

.company-action{
    display: flex;
}

.company-table-loading .company-action{
    width: 50px;
    justify-content: center;
}

.company-table-loading .company-col, .company-table-loading .company-action{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.company-table-loading .company-col::after{
    content: '';
    position: absolute;
    width: 60%;
    height: 15px;
    background: #f1f5f8;
    border-radius: 15px;
}

.company-table-loading .company-action::after{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #f1f5f8;
    border-radius: 3px;
}

.company-action-btn{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.swap-company-button{
    color: var(--primary-color);
    background: rgba(1, 47, 71, 0.2);
}

.swap-company-button:hover{
    color: #fff;
    background: rgba(1, 47, 71, 1);
}

.unlink-company-button{
    color: var(--orange);
    background: rgba(251, 164, 7, 0.2);
}

.unlink-company-button:hover{
    color: #fff;
    background: rgba(251, 164, 7, 1);
}

.remove-company-button{
    color: #f44336;
    background: rgba(244, 67, 54, 0.2);
}

.remove-company-button:hover{
    color: #fff;
    background: rgba(244, 67, 54, 1);
}

.staff-company-table .company-check-container{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
}

.staff-company-table .company-checkbox{
    width: 20px;
    height: 20px;
    background: #f1f5f8;
    border: 1px solid #b9c7cd;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.staff-company-table .company-check-container:hover .company-checkbox{
    background: #b9c7cd;
}

.staff-company-table .company-avatar{
    width: 45px;
    height: 45px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    font-size: 24px;
}

.staff-company-table .lead-table-item .company-avatar{
    background: var(--light-blue);
}

.staff-company-table .company-name{
    color: #414d55;
    font-weight: 500;
}

.staff-company-table .company-address{
    font-size: 12px;
    color: #606771;
    margin-top: 4px;
}

.company-item-checked{
    background: #f1f5f8;
}

.company-item-checked .company-checkbox, .company-item-checked .company-check-container:hover .company-checkbox{
    background: #414d55;
    border: 1px solid #f1f5f8;
}

.staff-schedule-item{
    padding: 10px 5px;
    border-bottom: 1px solid #ddd;
}

.staff-options-button{
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
}

.staff-options-button:hover, .staff-dropdown-open{
    background: rgb(51 51 51 / 20%);
}

.staff-option-dropdown{
    position: absolute;
    top: calc(100% + 5px);
    background: #fff;
    z-index: 2;
    width: max-content;
    min-width: 200px;
    right: 0;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    display: none;
}

.staff-option-dropdown .dropdown-inner{
    padding: 10px;
}

.staff-dropdown-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    border-bottom: 1px solid #f1f5f8;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}

.staff-dropdown-item:last-child{
    border-bottom: none;
}

.staff-dropdown-item i{
    margin-right: 10px;
    transition: all 0.2s;
}

.staff-dropdown-item:hover{
    color: var(--light-blue);
}

.staff-dropdown-item:hover i{
    margin-right: 0;
}

.filter-assign-fluid{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    overflow-x: hidden;
}

.filter-assign-container{
    width: 100%;
    max-width: 800px;
    background: #f1f5f8;
    height: 1500px;
    margin: 50px auto;
    padding: 15px;
    box-sizing: border-box;
}

.filter-assign-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px 10px;
    border-bottom: 1px solid #b9c7cd;
}

.filter-assign-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

.close-filter-assign{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
}

.filter-assign-body{
    padding: 15px 0;
}

.filter-assign-section{
    border-radius: 8px;
    margin-top: 20px;
}

.assign-section-open{
    background: #fff;
}

.assign-section-header{
    display: flex;
    align-items: center;
    padding: 15px 10px;
    cursor: pointer;
}

.assign-section-header-radio{
    font-size: 18px;
}

.assign-section-open .assign-section-header-radio{
    color: var(--primary-color);
}

.assign-section-header-title{
    color: #414d55;
    font-weight: 500;
    margin: 0 10px;
    flex: 1;
}

.assign-section-header-chevron{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}

.assign-section-open .assign-section-header-chevron{
    transform: rotate(180deg);
}

.assign-section-body{
    display: none;
}

.contact-item-avatar{
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.contact-item-intro{
    margin-left: 10px;
    width: calc(100% - 50px);
}

.contact-item-name{
    font-size: 14px;
    color: #414d55;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.contact-item-name span{
    background: #414d55;
    display: block;
    font-size: 10px;
    padding: 3px 10px;
    color: #fff;
    border-radius: 20px;
    font-weight: 400;
    margin-left: 7px;
}

.contact-item-company{
    font-size: 12px;
    color: #606771;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contact-contact-item{
    display: flex;
}

.contact-card-item{
    align-items: center;
}

.contact-card-wrap{
    width: 70px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    background: #f1f5f8;
}

.contact-card-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-dropdown-button{
    position: relative;
    margin: 0 10px;
}

.contact-dropdown-button:first-child{
    margin-left: 0;
}

.contact-dropdown-button .contact-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 15px;
    transition: all 0.25s;
    cursor: pointer;
}

.contact-phone-btn .contact-icon{
    background: rgb(0 150 136 / 20%);
    color: #009688;
}

.contact-phone-btn .contact-icon:hover, .contact-phone-btn.contact-btn-active .contact-icon{
    background: rgb(0 150 136 / 100%);
    color: #fff;
}

.contact-email-btn .contact-icon{
    background: rgb(255 87 34 / 20%);
    color: #FF5722;
}

.contact-email-btn .contact-icon:hover, .contact-email-btn.contact-btn-active .contact-icon{
    background: rgb(255 87 34 / 100%);
    color: #fff;
}

.contact-fax-btn .contact-icon{
    background: rgb(0 150 136 / 20%);
    color: #009688;
}

.contact-fax-btn .contact-icon:hover, .contact-fax-btn.contact-btn-active .contact-icon{
    background: rgb(0 150 136 / 100%);
    color: #fff;
}

.contact-website-btn .contact-icon{
    background: rgb(255 87 34 / 20%);
    color: #FF5722;
}

.contact-website-btn .contact-icon:hover, .contact-website-btn.contact-btn-active .contact-icon{
    background: rgb(255 87 34 / 100%);
    color: #fff;
}

.contact-btn-inactive .contact-icon, .contact-btn-inactive .contact-icon:hover, .contact-btn-active.contact-btn-inactive .contact-icon{
    background: #aaa;
    color: #fff;
    cursor: default;
}

.contact-dropdown-container{
    position: absolute;
    display: none;
    width: max-content;
    min-width: 200px;
    background: #fff;
    z-index: 2;
    top: calc(100% + 5px);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
    left: 50%;
    transform: translateX(-50%);
}

.contact-dropdown-empty{
    padding: 10px;
    color: #606771;
}

.contact-dropdown-wrap{
    padding: 10px;
}

.contact-dropdown-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    margin-bottom: 10px;
}

.contact-dropdown-item:last-child{
    margin-bottom: 0;
}

.contact-dropdown-item-info{
    flex: 1;
    margin-right: 10px;
}

.contact-dropdown-item-label{
    font-size: 11px;
    color: #606771;
}

.contact-dropdown-item-detail{
    color: #414d55;
    margin-top: 3px;
    font-weight: 500;
}

.contact-dropdown-item-icon{
    width: 30px;
    height: 30px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.25s;
}

.contact-dropdown-item-icon:hover{
    background: #2196f3;
    color: #fff;
}

.contact-note-btn{
    display: flex;
    align-items: center;
    background: var(--light-blue);
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.contact-edit-btn{
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0 10px;
    background: var(--orange);
    color: #fff;
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
}

.contact-delete-btn{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #f44336;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-note-btn i, .contact-edit-btn i{
    font-size: 14px;
    margin-right: 10px;
}

.company-search-item{
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
}

.company-search-item.company-lead-item{
    color: var(--light-blue);
}

.site-radio-item{
    display: flex;
    cursor: pointer;
    margin-bottom: 10px;
    padding-left: 5px;
}

.site-radio-icon{
    color: #aaa;
    width: 30px;
}

.site-radio-details{
    flex: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f8;
}

.site-radio-item:last-child .site-radio-details{
    border-bottom: none;
}

.site-radio-city{
    font-size: 14px;
    color: #414d55;
    font-weight: 500;
    display: flex;
}

.site-radio-city span{
    color: var(--light-blue);
    font-size: 12px;
    font-weight: 400;
    margin-left: 5px;
}

.site-radio-address{
    font-size: 12px;
    color: #606771;
    margin-top: 3px;
}

.site-radio-selected{
    cursor: default;
}

.site-radio-selected .site-radio-icon{
    color: #414d55;
}

.site-radio-label{
    color: var(--orange);
    margin-bottom: 15px;
    font-size: 13px;
}

.selected-company-wrap{
    background: #f1f5f8;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
}

.selected-company-wrap .company-avatar{
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.selected-lead-wrap .company-avatar{
    background: var(--light-blue);
}

.company-name{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
}

.selected-lead-wrap .company-name{
    color: var(--light-blue);
}

.company-site{
    font-size: 13px;
    color: #606771;
    margin-top: 3px;
}

.company-site-radio-container{
    padding: 0 10px;
}

.company-site-radio-title{
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 13px;
}

.company-site-radio-title:hover, .company-site-radio-open .company-site-radio-title{
    color: var(--orange);
}

.company-site-radio-open .company-site-radio-title:hover{
    color: var(--primary-color);
}

.company-site-radio-title i{
    font-size: 14px;
    margin-right: 15px;
}

.company-site-radio-dropdown{
    display: none;
}

.company-site-radio-open .company-site-radio-dropdown{
    display: block;
}

.form-delete-button{
    background: rgb(244 67 54 / 20%);
    margin-top: 25px;
    border-radius: 8px;
    cursor: pointer;
    color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}

.notes-over-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    overflow-x: hidden;
    display: none;
}

.notes-over-container{
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    background: #fff;
    min-height: calc(100% - 100px);
    display: none;
}

.notes-loading-header{
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #f1f5f8;
    padding: 5px 15px;
}

.notes-loading-title{
    width: 50%;
    height: 24px;
    background: #f1f5f8;
    border-radius: 8px;
}

.notes-loading-body{
    padding: 15px;
}

.notes-loading-item{
    padding: 10px 0 15px;
    border-bottom: 1px solid #eee;
}

.notes-loading-item div:first-child{
    width: 40%;
    height: 10px;
    background: #f1f5f8;
    border-radius: 3px;
}

.notes-loading-item div:last-child{
    width: 60%;
    height: 13px;
    background: #f1f5f8;
    margin-top: 10px;
    border-radius: 3px;
}

.scan-over-fluid{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    overflow-x: hidden;
    display: none;
}

.scan-over-container{
    width: 100%;
    max-width: 800px;
    background: #fff;
    margin: 50px auto;
    min-height: calc(100% - 100px);
    display: none;
}

.scan-over-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px 10px;
    border-bottom: 1px solid #ddd;
}

.scan-over-title{
    display: flex;
    align-items: center;
    font-size: 24px;
    color: var(--primary-color);
}

.scan-over-title i{
    font-size: 32px;
    color: var(--orange);
    margin-right: 15px;
}

.close-scan-over{
    width: 40px;
    height: 40px;
    background: #f1f5f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
}

.scan-over-body{
    padding: 15px;
}

.scan-card-holder{
    background: #f1f5f8;
    width: 350px;
    height: 200px;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.scan-card-holder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#scan-card-input{
    display: none;
}

.scan-card-label{
    background: var(--primary-color);
    height: 50px;
    display: flex;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.scan-card-label i{
    font-size: 20px;
    margin-right: 15px;
}

.scan-card-label-img{
    height: 180px;
    background: #f1f5f8;
}

.scan-card-label-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.card-scanning-over{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(241 245 248 / 30%);
    backdrop-filter: blur(5px);
}

.scan-body-title{
    color: var(--primary-color);
    text-align: center;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
}

.scan-input-body{
    padding: 10px;
}

.card-select-item{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
}

.card-input-wrap{
    width: calc(50% - 10px);
    background: #f1f5f8;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.card-input-focus{
    border: 1px solid #b9c7cd;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.card-input{
    width: 100%;
    padding: 0 15px;
    border: none;
    height: 100%;
    background: transparent;
    color: #414d55;
    font-size: 15px;
}

.card-input:focus{
    outline: none;
}

.card-select-dropdown{
    width: calc(50% - 10px);
    position: relative;
}

.card-select-header{
    height: 50px;
    background: #f1f5f8;
    border-radius: 8px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.card-select-dropdown-open .card-select-header{
    border: 1px solid #b9c7cd;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.card-select-title{
    flex: 1;
    padding-left: 5px;
    color: var(--primary-color);
}

.card-select-title span{
    color: #8a8a8a;
}

.card-select-type{
    font-size: 12px;
    color: #606771;
}

.card-select-chevron{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.card-select-dropdown-open .card-select-chevron{
    transform: rotate(180deg);
}

.card-select-dropdown-container{
    position: absolute;
    display: none;
    width: 100%;
    z-index: 2;
    background: #f1f5f8;
    top: calc(100% + 5px);
    border-radius: 8px;
    border: 1px solid #b9c7cd;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
    padding: 10px;
    box-sizing: border-box;
    max-height: 300px;
    overflow-x: hidden;
}

.scan-select-item{
    display: flex;
    align-items: center;
    padding: 10px 5px;
    margin-bottom: 3px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.scan-select-item:hover, .scan-selected-item{
    background: #e3eaef;
}

.scan-select-radio{
    width: 30px;
}

.scan-selected-item .scan-select-radio{
    color: var(--primary-color);
}

.scan-select-detail{
    flex: 1;
}

.scan-select-type{
    font-size: 12px;
    color: #606771;
}

.scan-select-name{
    color: #414d55;
}

.scan-select-check{
    color: #009688;
    display: none;
}

.scan-over-footer{
    padding: 0 15px 30px;
    display: flex;
    justify-content: center;
}

.scan-next-btn{
    display: flex;
    align-items: center;
    height: 50px;
    background: var(--primary-color);
    width: 200px;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: space-between;
    color: #fff;
}

.notes-over-header{
    display: flex;
    padding: 15px 20px 10px;
    border-bottom: 1px solid #ddd;
}

.notes-header-icon{
    font-size: 32px;
    color: var(--orange);
}

.notes-header-info{
    flex: 1;
    margin: 0 15px;
}

.notes-header-title{
    font-size: 22px;
    color: var(--primary-color);
    font-weight: 500;
}

.notes-header-name{
    font-size: 13px;
    color: #606771;
}

.close-notes-over{
    width: 40px;
    height: 40px;
    background: #f1f5f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
}

.notes-over-footer{
    padding: 15px;
}

.notes-input-wrap{
    background: #f1f5f8;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.notes-input{
    font-size: 14px;
    font-family: inherit;
    padding: 10px;
    box-sizing: border-box;
    width: 814px;
    background: none;
    border: none;
    height: 95px;
    max-width: 100%;
    color: #414d55;
}

.notes-input:focus{
    outline: none;
}

.notes-input-focus{
    border: 1px solid #b9c7cd;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.add-note-btn{
    height: 40px;
    background: var(--primary-color);
    width: 150px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
}

.notes-over-body{
    padding: 15px;
    box-sizing: border-box;
    min-height: calc(100% - 242px);
    
}

.notes-item{
    padding: 10px;
    border-bottom: 1px solid #f1f5f8;
}

.notes-time-wrap{
    font-size: 12px;
    text-align: right;
}

.notes-item-note{
    color: #414d55;
    padding: 10px;
    background: transparent;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.notes-item-note-input{
    background: #f1f5f8;
    border: 1px solid #b9c7cd;
}

.notes-item-note:focus{
    outline: none;
}

.notes-item-note-saving{
    opacity: 0.5;
}

.notes-item-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
}

.notes-delete-btn{
    font-size: 13px;
    color: #f44336;
    font-weight: 500;
    cursor: pointer;
}

.notes-edit-btn{
    font-size: 13px;
    color: var(--orange);
    font-weight: 500;
    cursor: pointer;
}

.notes-save-btn{
    color: #009688;
}

.notes-btn-saving{
    color: #aaa;
}

.unit-section-title{
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.unit-action-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.unit-action-button{
    width: 25%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange);
    color: #222;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.unit-action-button:hover{
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.rent-unit-button, .sale-unit-button{
    width: 40%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.rent-unit-button{
    background: var(--light-blue);
}

.sale-unit-button{
    background: var(--primary-color);
    width: 100%;
}

.rent-unit-button:hover, .sale-unit-button:hover{
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.unit-section-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.unit-section-header .unit-section-title{
    margin-bottom: 0;
}

.unit-section-header-link{
    font-size: 14px;
    color: var(--orange);
    cursor: pointer;
}

.unit-section-header-link:hover{
    text-decoration: underline;
}

.main-form-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(242, 246, 249, 0.35);
    z-index: 999;
    backdrop-filter: blur(3px);
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.main-form-container{
    background: #f1f5f8;
    width: 100%;
    max-width: 800px;
    min-height: calc(100% - 100px);
    margin: 50px auto;
    box-shadow: 0 2px 18px rgba(0,0,0,0.15);
    display: none;
}

.main-form-header{
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

.main-form-title{
    font-size: 24px;
    font-weight: 600;
    flex: 1;
    color: var(--primary-color);
}

.close-main-form{
    width: 40px;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 4px;
    color: #f44336;
    cursor: pointer;
}

.main-form-body{
    padding: 15px;
}

.unit-quote-title{
    text-align: center;
    font-size: 24px;
    color: var(--primary-color);
    margin: 5px 0 20px;
}

.main-form{
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.site-radio-loading{
    padding-top: 15px;
}

.site-radio-loading .site-radio-icon{
    width: 20px;
    height: 20px;
    background: #f1f5f8;
    border-radius: 15px;
}

.site-radio-loading .site-radio-details{
    margin-left: 20px;
}

.site-radio-loading .site-radio-details div{
    background: #f1f5f8;
    border-radius: 3px;
}

.site-radio-loading .site-radio-details div:first-child{
    height: 12px;
    width: 30%;
}

.site-radio-loading .site-radio-details div:last-child{
    height: 10px;
    width: 60%;
    margin-top: 10px;
}

.diary-fluid{
    position: fixed;
    background: #f1f5f8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(3px);
    display: none;
    overflow-x: hidden;
}

.diary-fluid-title{
    margin: 15px auto;
    text-align: center;
    font-size: 32px;
    color: var(--primary-color);
}

.diary-container{
    width: 100%;
    max-width: 800px;
    background: #fff;
    margin: 20px auto;
}

.diary-header{
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.diary-title-wrap{
    flex: 1;
}

.diary-title{
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 500;
}

.diary-subtitle{
    font-size: 14px;
    color: #414d55;
}

.close-diary-button{
    width: 40px;
    height: 40px;
    background: #f1f5f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #f44336;
    font-size: 20px;
}

.diary-inner{
    padding: 25px 20px;
    box-sizing: border-box;
}

/** Diary Calendar **/
.dg-day-item{
    flex: 0 0 auto;
    width: calc(14.28% - 2px);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    background: #c2f5c2;
    margin: 1px;
    position: relative;
}

.dg-calendar-wrap{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.dg-calendar{
    width: 45%;
    flex: 0 0 auto;
    margin-bottom: 35px;
}

.dg-calendar-month{
    text-align: center;
    font-size: 16px;
    font-family: var(--font-poppins);
}

.dg-calendar-header, .dg-calendar-body{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.dg-calendar-header .dg-day-item{
    background: none;
    font-family: var(--font-poppins);
}

.past-day{
    color: #aaa;
    background: #f1f5f8;
}

.other-month{
    background: none;
    color: #aaa;
}

.diary-legend-block{
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 3px;
    background: #c2f5c2;
    border: 1px solid #b9c7cd;
}

.blocked-day{
    background: #ffcfcf;
}

.temp-day{
    background: #ffffb2;
}

/** DG Calendar End **/

.diary-legend-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.diary-legend-item{
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #414d55;
    margin-left: 50px;
}

.oppo-detail-item{
    display: flex;
}

.oppo-type-wrap{
    height: 40px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    background: rgb(42 123 166 / 15%);
    color: var(--light-blue);
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.oppo-detail-item .oppo-type-wrap{
    height: 30px;
    width: 90px;
    font-size: 15px;
}

.oppo-type-sale{
    color: #009688;
    background: rgb(0 150 136 / 15%);
}

.oppo-info-wrap{
    margin-left: 25px;
}

.oppo-id{
    font-size: 12px;
    color: #606771;
}

.oppo-model{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
}

.oppo-company-item{
    display: flex;
    width: 100%;
}

.oppo-company-avatar{
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.oppo-company-info{
    margin-left: 10px;
    width: calc(100% - 50px);
}

.oppo-company-name{
    font-size: 14px;
}

.oppo-company-site{
    font-size: 12px;
    color: #606771;
}

.oppo-status{
    font-size: 16px;
    text-transform: uppercase;
}

.oppo-status-time{
    font-size: 12px;
    margin-top: 3px;
    color: #606771;
}

.oppo-main-fluid{
    position: fixed;
    z-index: 99;
    background: #f1f5f8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.close-oppo-fluid{
    position: fixed;
    width: 40px;
    height: 40px;
    background: #fff;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.oppo-main-container{
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
}

.oppo-main-header{
    display: flex;
    align-items: center;
}

.oppo-header-info{
    flex: 1;
}

.oppo-header-id{
    font-size: 13px;
    background: #fff;
    width: max-content;
    padding: 2px 10px;
    border-radius: 3px;
    color: #414d55;
}

.oppo-header-title{
    font-size: 24px;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 3px;
}

.oppo-header-status{
    height: 40px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    background: #fff;
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 15px;
    padding: 0 15px;
}

.oppo-status-lost{
    color: #f44336;
}

.oppo-section-container{
    margin-top: 25px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.oppo-section-title{
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #606771;
    margin-bottom: 10px;
}

.oppo-details-item{
    margin-top: 15px;
}

.oppo-detail-label{
    color: #606771;
    font-size: 13px;
    margin-bottom: 5px;
}

.oppo-detail-value{
    color: #414d55;
}

.oppo-cust-address{
    color: #414d55;
    font-size: 12px;
    margin-bottom: 15px;
    margin-top: 3px;
}

.oppo-contact-wrap{
    display: flex;
    margin-bottom: 5px;
}

.oppo-contact-none{
    background: rgb(251 164 7 / 15%);
    color: var(--orange);
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
}

.oppo-contact-none i{
    font-size: 16px;
    margin-right: 10px;
}

.oppo-contact-btn{
    background: #f1f5f8;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--light-blue);
}

.oppo-stage-container{
    margin-top: 20px;
}

.oppo-stage-header{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}

.oppo-stage-done .oppo-stage-header{
    color: #009688;
}

.oppo-stage-missed .oppo-stage-header{
    color: #f44336;
}

.oppo-stage-active .oppo-stage-header{
    color: var(--light-blue);
}

.oppo-stage-avatar{
    width: 30px;
}

.oppo-stage-avatar i{
    font-size: 20px;
}

.stage-header-line{
    height: 1px;
    background: #b9c7cd;
    flex: 1;
    margin-left: 15px;
}

.oppo-stage-body{
    padding: 15px 10px;
}

.oppo-stage-info-item{
    background: rgb(0 150 136 / 15%);
    padding: 15px 10px;
    border-radius: 8px;
}

.oppo-stage-missed .oppo-stage-info-item{
    background: rgb(244 67 54 / 15%);
    padding: 10px;
}

.oppo-info-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oppo-info-header-title{
    display: flex;
    font-size: 14px;
    align-items: center;
    color: #414d55;
}

.oppo-info-header-title i{
    margin-right: 5px;
}

.oppo-info-header-time{
    font-size: 13px;
    color: #606771;
}

.oppo-stage-notes{
    margin-top: 15px;
    background: #f1f5f8;
    padding: 10px;
    border-radius: 8px;
}

.oppo-note-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #606771;
    margin-bottom: 10px;
}

.oppo-note-time{
    font-size: 12px;
}

.oppo-note-body{
    color: #414d55;
    font-style: italic;
}

.stage-redo-button{
    background: #fff;
    height: 30px;
    border-radius: 3px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

.rental-duration-container{
    display: flex;
    justify-content: space-between;
}

.rental-duration-item{
    width: 30%;
    display: flex;
    align-items: center;
}

.duration-input-wrap{
    background: #f1f5f8;
    display: flex;
    height: 50px;
    border-radius: 8px;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}

.duration-input{
    width: 60px;
    background: transparent;
    border: none;
    padding-left: 5px;
    height: 40px;
    font-size: 15px;
    color: #414d55;
}

.duration-input:focus{
    outline: none;
}

.duration-button-wrap{
    width: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.duration-button{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.duration-item-title{
    margin-left: 10px;
    color: #414d55;
    font-size: 14px;
}

.charge-header{
    display: flex;
    border-bottom: 1px solid #b9c7cd;
}

.charge-header-item{
    font-size: 14px;
    color: #414d55;
    font-weight: 500;
    padding: 5px;
    box-sizing: border-box;
}

.charge-header-item:first-child{
    padding-left: 0;
}

.charge-row{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f8;
}

.charge-row-item{
    font-size: 14px;
    color: #414d55;
    padding: 5px 0;
    box-sizing: border-box;
}

.charge-row-item:first-child{
    padding-left: 0;
}

.charge-header-40, .charge-item-40{
    width: 40%;
    max-width: 40%;
}

.charge-header-50, .charge-item-50{
    width: 50%;
    max-width: 50%;
}

.charge-header-20, .charge-item-20{
    width: 20%;
    max-width: 20%;
}

.charge-header-10, .charge-item-10{
    width: 10%;
    max-width: 10%;
}

.charge-header-15, .charge-item-15{
    width: 15%;
    max-width: 15%;
}

.charge-item-input{
    height: 30px;
    border: none;
    padding: 5px;
    font-size: 14px;
    color: #414d55;
    box-sizing: border-box;
    width: 80%;
}

.charge-item-input:focus{
    background: #f1f5f8;
    outline: none;
}

.charge-row-total{
    padding: 0 5px;
    font-weight: 500;
}

.charge-row-hidden{
    display: none;
}

.total-charge-wrap{
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px;
    font-weight: 500;
    color: #414d55;
    margin-top: 20px;
}

.total-charge-wrap span{
    margin-left: 5px;
}

.oppo-note-container{
    margin-top: 20px;
    background: #f1f5f8;
    border-radius: 8px;
    padding: 10px;
}

.oppo-notes{
    width: 100%;
    background: none;
    border: none;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
}

.oppo-notes:focus{
    outline: none;
}

.oppo-note-footer{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.submit-oppo-note{
    font-size: 14px;
    height: 30px;
    width: 100px;
    background: #222;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.oppo-stage-footer{
    padding: 10px;
}

.oppo-proceed-button{
    height: 40px;
    background: var(--light-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 0 25px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.calendar-today-btn{
    height: 45px;
    margin: 10px auto;
    width: 200px;
    background: var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-status-item{
    position: absolute;
    right: 0;
    font-size: 11px;
    background: var(--orange);
    color: #fff;
    padding: 2px 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.schedule-status-complete{
    background: #009688;
}

.schedule-status-arrived{
    background: var(--light-blue);
}

.schedule-status-missed{
    background: #f44336;
}

.sales-visit-setting-wrap{
    margin-top: 30px;
}

.sales-visit-setting-wrap:first-child{
    margin-top: 15px;
}

.company-sales-title{
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.sales-rep-holder{
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sales-rep-wrap{
    display: flex;
    align-items: center;
    flex: 1;
}

.sales-rep-avatar{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f1f5f8;
    overflow: hidden;
}

.sales-rep-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sales-rep-avatar-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    font-size: 20px;
    color: #fff;
}

.sales-rep-details{
    margin-left: 10px;
}

.sales-rep-name{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
}

.sales-rep-email{
    font-size: 12px;
    color: #606771;
}

.change-sales-rep-btn{
    margin-left: 20px;
    background: var(--light-blue);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 20px;
}

.visit-frequency-holder{
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.visit-frequency-container{
    position: relative;
}

.visit-frequency-wrap{
    display: flex;
    height: 40px;
    width: 100px;
    background: #f1f5f8;
    border-radius: 4px;
    align-items: center;
    padding-left: 10px;
    padding-right: 8px;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.visit-frequency-name{
    flex: 1;
    color: #414d55;
}

.visit-frequency-name span{
    color: #aaa;
}

.visit-frequency-chevron{
    color: #333;
    transition: all 0.3s;
}

.visit-frequency-dropdown{
    position: absolute;
    width: 100px;
    top: calc(100% + 5px);
    background: #f1f5f8;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #b9c7cd;
    padding: 0 10px;
    height: 200px;
    overflow-x: hidden;
    display: none;
}

.visit-frequency-item{
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    color: #414d55;
    font-size: 14px;
    cursor: pointer;
}

.visit-frequency-open .visit-frequency-wrap{
    border: 1px solid #b9c7cd;
}

.visit-frequency-open .visit-frequency-chevron{
    transform: rotate(180deg);
}

.visit-frequency-title{
    color: #414d55;
    margin-left: 10px;
}

.form-label-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add-cust-unit-btn{
    font-size: 13px;
    font-weight: 500;
    color: var(--light-blue);
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    display: none;
}

.form-search-item span{
    font-size: 12px;
    margin-left: 5px;
    color: var(--light-blue);
}

.kanban-container{
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 20px;
}

.kanban-column{
    width: 280px;
    min-width: 280px;
    height: calc(100% - 30px);
    overflow-x: hidden;
    background: #fff;
    border-radius: 8px;
    margin-left: 20px;
}

.kanban-column:first-child{
    margin-left: 0;
}

.kanban-header{
    padding: 15px;
    font-size: 18px;
    color: #333;
}

.kanban-body{
    padding: 10px;
}

.kanban-item{
    margin-bottom: 10px;
    background: #f1f5f8;
    padding: 10px;
    border-radius: 4px;
}

.kanban-item-title{
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.kanban-item-detail{
    margin-bottom: 3px;
    font-size: 14px;
    color: #414d55;
}

.kanban-item-small{
    font-size: 12px;
    color: #606771;
}

.kanban-item-capitalize{
    text-transform: capitalize;
    margin-top: 6px;
    font-weight: 500;
}

.add-unit-over-fluid{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
    left: 0;
    top: 0;
    overflow-x: hidden;
    display: none;
}

.close-add-unit, .close-super-map, .close-map-over{
    width: 40px;
    height: 40px;
    background: #fff;
    position: absolute;
    top: 15px;
    right: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
}

.close-map-over{
    z-index: 9;
}

.add-unit-container{
    width: 100%;
    max-width: 800px;
    background: #fff;
    min-height: calc(100% - 100px);
    margin: 50px auto;
}

.add-unit-header{
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.add-unit-avatar{
    width: 50px;
    height: 50px;
    background: var(--orange);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.add-unit-header-detail{
    margin-left: 15px;
}

.add-unit-header-title{
    font-size: 24px;
    color: #333;
}

.add-unit-header-company{
    font-size: 14px;
    color: var(--primary-color);
}

.add-unit-footer-over, .add-option-footer-over{
    position: fixed;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    display: none;
}

.add-unit-footer, .add-option-footer{
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    left: 50%;
    margin-left: -300px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: none;
}

.cust-unit-sl{
    font-size: 12px;
}

.cust-unit-name{
    font-size: 14px;
    margin-top: 2px;
}

.form-input-disabled .form-input-add{
    display: none;
}

.add-unit-footer-header{
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f8;
}

.add-unit-footer-title{
    font-size: 20px;
    color: #222;
    flex: 1;
}

.close-add-unit-footer, .close-add-option-footer{
    width: 30px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.add-unit-footer-body{
    padding: 20px;
}

.empty-search-defaults{
    font-size: 14px;
    padding: 10px 5px;
}

.manu-name{
    font-size: 14px;
}

.add-unit-body{
    padding-bottom: 30px;
}

.wo-book-btn{
    height: 40px;
    background: var(--orange);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.main-booking-fluid{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    overflow-x: hidden;
}

.close-booking-fluid{
    position: absolute;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    top: 15px;
    right: 15px;
}

.main-booking-container{
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    min-height: calc(100% - 100px);
    background: #fff;
}

.main-booking-header{
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.booking-header-avatar{
    width: 50px;
    height: 50px;
    background: var(--orange);
    border-radius: 4px;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-header-detail{
    margin-left: 15px;
}

.booking-header-title{
    font-size: 24px;
    color: #333;
}

.booking-header-wo{
    font-size: 14px;
    color: var(--primary-color);
    margin-top: 3px;
}

.primary-st-title{
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 5px;
}

.service-days-holder{
    display: none;
}

.wo-sv-container{
    padding: 15px;
    background: #fff;
    box-shadow: 0 1px 8px rgb(0 0 0 / 19%);
    border-radius: 8px;
    margin-top: 20px;
}

.wo-sv-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wo-sv-header-title{
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.wo-sv-header-button{
    background: var(--primary-color);
    height: 40px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
}

.wo-sv-table{
    border: 1px solid #b9c7cd;
    border-radius: 8px;
    overflow: hidden;
}

.wo-sv-table .table-header-item, .wo-sv-table .table-item{
    font-size: 12px;
}

.wo-main-header-col{
    display: flex;
}

.wo-main-header-item:nth-child(2){
    margin-left: 50px;
}

.wo-main-header-label{
    color: var(--orange);
    font-size: 13px;
    font-weight: 500;
}

.wo-detail-priority{
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

.item-priority-high{
    color: var(--orange);
}

.item-priority-normal{
    color: #009688;
}

.item-priority-urgent{
    color: #f44336;
}

.sv-status-item{
    color: var(--light-blue);
    text-transform: capitalize;
}

.sv-status-arrived{
    color: var(--orange);
}

.sv-status-complete{
    color: #009688;
}

.wo-sv-item-icon{
    color: var(--orange);
    font-size: 16px;
    cursor: pointer;
}

.report-fluid{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f1f5f8;
    overflow-x: hidden;
    display: none;
}

.close-report-fluid{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    color: #f44336;
}

.report-container{
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    min-height: calc(100% - 100px);
}

.report-inner{
    padding: 20px;
    color: #222;
}

.report-header{
    text-align: center;
    position: relative;
    font-size: 24px;
}

.report-header-title{
    font-weight: 600;
}

.print-report-button{
    position: absolute;
    top: 20px;
    right: 0;
    background: #333;
    color: #fff;
    height: 30px;
    padding: 0 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

.print-report-button i{
    margin-right: 10px;
}

.report-body{
    width: 100%;
    max-width: 700px;
    margin: auto;
    padding: 20px 0;
}

.report-section{
    margin-top: 20px;
}

.report-item{
    display: flex;
    margin: 5px 0;
}

.report-item-bold{
    font-size: 16px;
    font-weight: 600;
}

.report-label{
    width: 30%;
}

.report-value{
    width: 70%;
    box-sizing: border-box;
    padding-left: 10px;
}

.report-value-tuc{
    text-transform: capitalize;
}

.report-section-title{
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.report-table{
    border: 2px solid #222;
    font-size: 16px;
    margin-bottom: 35px;
}

.report-table-header{
    display: flex;
    height: 50px;
    background: #888;
    color: #fff;
    box-sizing: border-box;
    border-bottom: 2px solid #222;
}

.report-table-header-item{
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #222;
    padding: 0 10px;
    box-sizing: border-box;
}

.report-table-header-item:last-child{
    border-right: none;
}

.report-table-row{
    display: flex;
    box-sizing: border-box;
    border-bottom: 2px solid #222;
}

.report-table-row:last-child{
    border-bottom: none;
}

.report-table-item{
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #222;
    padding: 0 10px;
    box-sizing: border-box;
}

.report-table-item:last-child{
    border-right: none;
}

.report-table-notes{
    width: 100%;
}

.super-over-map{
    position: absolute;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(3px);
    display: none;
}

.super-map-inner{
    width: 100%;
    background: #fff;
    max-width: 700px;
    margin: 50px auto 0;
    border-radius: 8px;
    overflow: hidden;
}

.super-map-container{
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.super-map-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
}

.super-map-marker{
    z-index: 2;
    font-size: 12px;
    background: #222;
    padding: 5px 15px;
    border-radius: 15px;
    color: #fff;
    position: relative;
}

.super-map-marker:after{
    content: '';
    position: absolute;
    top: 100%;
    border-top: 10px solid #222;
    height: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 50%;
    transform: translateX(-50%);
}

.super-map-address{
    padding: 20px 15px;
}

.super-address-title{
    font-size: 16px;
    color: #414d55;
}

.super-address-value{
    font-size: 14px;
    color: #606771;
    margin-top: 5px;
}

.view-change-location{
    font-size: 13px;
    margin-top: 5px;
    color: var(--light-blue);
    cursor: pointer;
    text-decoration: underline;
    width: max-content;
}

.dashboard-col-2{
    width: 20%;
    max-width: 20%;
    margin: 0 7.5px;
    flex: 0.20;
}

.dashboard-col-2 .dashboard-block{
    background: var(--primary-color);
    width: 100%;
    height: 150px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 1px 8px rgba(20, 46, 110, 0.4);
    display: flex;
    flex-direction: column;
}

.dashboard-col-2 .dashboard-block .block-title{
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 300;
}

.block-title span{
    font-weight: 500;
}

.block-tab-row{
    display: flex;
}

.block-tab-item{
    margin-right: 10px;
    border-bottom: 1px solid transparent;
    color: #aaa;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 12px;
}

.block-tab-item:hover{
    color: #fff;
}

.block-tab-selected{
    border-bottom: 1px solid #fff;
    color: #fff;
    cursor: default;
}

.block-body{
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 5px;
}

.block-percent-item{
    margin-bottom: 10px;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.block-percent-item .percent-green{
    font-size: 16px;
    color: #8bc34a;
    margin-right: 5px;
}

.block-percent-item .percent-red{
    font-size: 16px;
    color: #f44336;
    margin-right: 5px;
}

.block-large-text{
    font-size: 36px;
    color: #fff;
    line-height: 42px;
}

.block-large-text span{
    font-size: 22px;
    margin-right: 4px;
}

.block-small-text{
    font-size: 20px;
    color: #fff;
    line-height: 36px;
}

.block-small-text span{
    font-size: 16px;
    margin-right: 3px;
}

.block-contracts-item{
    flex: 1;
    display: flex;
    align-items: flex-start;
    color: #fff;
    justify-content: space-between;
    max-width: 48%;
}

.block-contracts-type{
    font-size: 13px;
    margin-top: 5px;
}

.block-large-icon{
    font-size: 36px;
    color: #cf1b0e;
    margin-bottom: 5px;
}

.dashboard-col-3 .dashboard-block{
    background: #fff;
    width: 100%;
    height: 220px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 1px 8px rgba(20, 46, 110, 0.16);
    display: flex;
    flex-direction: column;
}

.dashboard-item-wrap{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-evenly;
}

.dashboard-col-3 .dashboard-block .block-title{
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 300;
}

.dashboard-item-separator{
    height: 1px;
    background: #bbb;
}

.item-pill{
    position: absolute;
    top: 3px;
    right: 0;
    background: #cf1b0e;
    color: #fff;
    font-size: 10px;
    height: 15px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 15px;
}

.dashboard-item-row{
    position: relative;
}

.dashboard-item-row:last-child{
    border-bottom: none;
}

.dashboard-item-line{
    font-size: 13px;
    color: #606771;
}

.item-pill-red{
    background: #cf1b0e;
}

.item-pill-green{
    background: #8bc34a;
}

.item-pill-blue{
    background: var(--light-blue);
}

.item-flex-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #333;
}

.dashboard-item-price{
    text-align: right;
    font-size: 12px;
    color: #333;
}

.dashboard-col-4{
    width: calc(33.3% - 15px);
    max-width: calc(33.3% - 15px);
    margin: 0 7.5px;
    flex: 0.33;
}

.dashboard-progress-header{
    display: flex;
    justify-content: space-between;
}

.dashboard-progress-name, .dashboard-chart-name{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 300;
}

.dashboard-progress-role{
    font-size: 12px;
}

.clockin-time-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clockin-title{
    font-size: 10px;
    color: #606771;
}

.clockin-time{
    font-size: 13px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.clockin-time span{
    font-size: 10px;
    color: #777;
    margin-left: 5px;
}

.progress-slider-container{
    margin: 15px 0;
}

.progress-slider-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.progress-slider-title{
    font-size: 14px;
    color: #333;
}

.progress-schedule-btn{
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    color: #333;
    cursor: pointer;
    background: none;
    transition: all 0.3s;
}

.progress-schedule-btn i{
    font-size: 10px;
    margin-left: 5px;
}

.progress-schedule-btn:hover{
    background: #333;
    color: #fff;
}

.progress-slider-bg{
    height: 12px;
    background: #ddd;
    border-radius: 12px;
    overflow: hidden;
}

.progress-slider-progress{
    height: 12px;
    background: #333;
    border-radius: 12px;
    width: 30%;
    transition: all 0.3s;
}

.progress-title{
    font-weight: 300;
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 10px;
}

.progress-schedule-container{
    display: flex;
}

.progress-schedule-wrap{
    flex: 1;
    padding-right: 10px;
    display: flex;
}

.icon-wrap{
    background: var(--orange);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 18px;
}

.progress-schedule{
    flex: 1;
    margin-left: 10px;
}

.progress-schedule-header{
    display: flex;
    font-size: 11px;
    color: #333;
    font-weight: 300;
    justify-content: space-between;
    align-items: center;
}

.progress-schedule-pill{
    background: #ddd;
    font-size: 9px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 400;
    color: #fff;
}

.pill-yellow{
    background: #feb50d;
}

.pill-blue{
    background: #3c95c3;
}

.pill-purple{
    background: #521b95;
}

.pill-red{
    background: #d40004;
}

.pill-green{
    background: #77c126;
}

.progress-location-wrap{
    width: 45%;
    color: #333;
    flex: 0.45;
    overflow: hidden;
}

.progress-location-title{
    font-size: 12px;
}

.view-staff-location{
    text-decoration: underline;
    cursor: pointer;
}

.progress-location-updated{
    font-size: 8px;
    font-weight: 300;
    line-height: 12px;
}

.progress-location-map{
    width: 100%;
    height: 100px;
    background: #f1f5f8;
    margin-top: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.progress-schedule-time{
    font-size: 12px;
    color: #333;
    margin-top: 3px;
}

.progress-schedule-company{
    font-size: 15px;
    color: var(--primary-color);
    margin-top: 3px;
    font-weight: 300;
}

.progress-schedule-site{
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 300;
}

.progress-schedule-address{
    font-size: 12px;
    color: #606771;
    margin-top: 4px;
}

.progress-wo-id{
    font-size: 11px;
    color: #333;
    margin-top: 3px;
    font-weight: 300;
}

.dashboard-more-wrap{
    display: none;
}

.more-toggle-button{
    margin: auto;
    margin-bottom: 25px;
    margin-top: -15px;
    text-align: center;
    cursor: pointer;
    color: #333;
    font-weight: 500;
    width: max-content;
    border-bottom: 1px solid transparent;
}

.more-toggle-show{
    color: var(--light-blue);
}

.more-toggle-button:hover{
    border-bottom: 1px solid;
}

.dashboard-chart-block{
    background: #fff;
    box-shadow: 0 1px 8px rgba(20,46,110,0.16);
    border-radius: 12px;
    padding: 12px;
    height: 300px;
}

.chart-tab-container{
    display: flex;
    margin: 8px 0 10px 0;
    align-items: center;
    height: 20px;
}

.chart-tab-wrap{
    display: flex;
    flex: 1;
}

.chart-tab-item{
    color: #888;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
    margin-right: 10px;
    font-size: 13px;
}

.chart-tab-selected{
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    cursor: default;
}

.chart-tab-item:hover{
    color: var(--primary-color);
}

.chart-tab-year{
    font-size: 12px;
    display: flex;
    border: 1px solid #333;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    color: #333;
    align-items: center;
}

.chart-tab-year i{
    font-size: 11px;
    margin-left: 5px;
}

.dashboard-chart-container{
    height: calc(100% - 57px);
    padding-top: 10px;
    box-sizing: border-box;
}

.dashboard-chart-container canvas{
    width: 100%;
    height: 100%;
    margin: auto;
}

.chart-tab-title{
    color: #888;
    font-size: 13px;
}

.dashboard-funnel-chart{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.funnel-chart-item{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 10px;
    box-sizing: border-box;
}

#funnel-won{
    border-bottom: 45.5px solid #77c126;
}

.funnel-item-name{
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    padding: 0 10px;
    height: 16px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    position: absolute;
    width: max-content;
}

.funnel-item-top{
    bottom: 14.75px;
}

.funnel-item-bottom{
    top: 14.75px;
}

#oppo-area-map{
    border-radius: 8px;
}

.no-schedule-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
}

.close-dashboard-sidebar{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
}

.sidebar-staff-container{
    background: #fff;
    margin: 15px 0;
    padding: 10px;
    display: flex;
    border-radius: 4px;
    align-items: center;
}

.sidebar-staff-container .staff-icon-wrap{
    width: 40px;
    height: 40px;
    background: #f1f5f8;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 20px;
    margin-right: 10px;
}

.sidebar-staff-container .staff-name{
    color: var(--primary-color);
    font-weight: 300;
}

.sidebar-staff-container .staff-role{
    font-size: 11px;
    color: #333;
    margin-top: 3px;
}

.sidebar-week-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sidebar-date-item{
    width: 14%;
    flex: 0.14;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.sidebar-date-item .date-date{
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.sidebar-date-item .date-day{
    font-size: 11px;
    color: #606771;
}

.sidebar-date-item:hover{
    background: #fff;
}

.sidebar-date-selected{
    background: #fff;
    cursor: default;
    box-shadow: 0 1px 8px rgba(0,0,0,0.1);
}

.dashboard-schedule-container .staff-schedule-item{
    display: flex;
    padding: 10px 0;
}

.staff-schedule-icon{
    color: var(--orange);
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-schedule-details{
    flex: 1;
    position: relative;
    padding-left: 10px;
}

.staff-schedule-time{
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.staff-schedule-company{
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 300;
    margin-top: 3px;
}

.staff-schedule-city{
    font-size: 13px;
    color: #333;
}

.staff-schedule-address{
    font-size: 12px;
    color: #606771;
    margin-top: 3px;
}

.staff-schedule-pill{
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 10px;
}

.rental-schedule-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.rental-datepicker-container{
    display: flex;
    align-items: flex-end;
}

.rental-datepicker-label{
    font-size: 13px;
    color: var(--primary-color);
    margin-left: 3px;
    margin-bottom: 3px;
}

.rental-datepicker-input{
    height: 40px;
    width: 120px;
    padding: 0 10px;
    background: #fff;
    border-radius: 4px;
    color: #414d55;
    line-height: 40px;
}

.rental-datepicker-separator{
    width: 10px;
    height: 3px;
    background: #414d55;
    margin: 10px;
    margin-bottom: 18px;
}

.rental-datepicker-button{
    height: 40px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--primary-color);
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    margin-left: 15px;
    border: 1px solid #dedede;
}

.rental-schedule-filter-btn{
    background: var(--orange);
    color: #fff;
    border: 1px solid transparent;
}

.rental-schedule-legends-wrap{
    display: flex;
    margin: 15px 0;
}

.rental-schedule-legend-item{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #414d55;
    margin-right: 15px;
}

.rental-schedule-legend-color{
    height: 20px;
    width: 40px;
    border-radius: 3px;
    margin-right: 10px;
}

.color-rental-green{
    background: #b9dc90;
}

.color-rental-blue{
    background: #86bfed;
}

.color-rental-red{
    background: #ffa099;
}

.color-rental-yellow{
    background: #f1eab1;
}

.rental-schedule-calendar{
    background: #fff;
    display: flex;
}

.rental-schedule-container{
    background: #fff;
    border: 1px solid #dedede;
    display: flex;
}

.rental-left-fixed{
    width: 200px;
    z-index: 3;
}

.rental-left-scroll{
    box-shadow: 8px 0 8px -8px rgba(0,0,0,0.16);
}

.rental-unit-item{
    width: 200px;
    height: 100px;
    border-top: 1px solid #f1f5f8;
    border-bottom: 1px solid #f1f5f8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #333;
    font-size: 14px;
    padding: 5px 10px;
    box-sizing: border-box;
}

.unit-id{
    font-weight: 600;
}

.unit-model{
    margin: 10px 0 5px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.unit-info{
    display: flex;
    font-size: 12px;
    align-items: center;
}

.unit-info div:first-child{
    padding-right: 7px;
    border-right: 1px solid #333;
    margin-right: 7px;
}

.rental-header-fixed{
    position: sticky;
    top: -20px;
    background: #fff;
    border-bottom: 2px solid #8a8a8a;
}

.rental-header-date-title{
    height: 55px;
    background: #dfe5e8;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rental-header-availability-title{
    height: 30px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rental-dates-container{
    width: calc(100% - 200px);
    display: flex;
    overflow-y: hidden;
}

.rental-date-item{
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.rental-date-header{
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    background: #fff;
    border-bottom: 2px solid #8a8a8a;
    color: #333;
}

.rental-header-date{
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #dfe5e8;
}

.rental-header-availability{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.rental-fixed-dates{
    position: fixed;
    top: 60px;
    width: calc(80% - 240px);
    left: calc(20% + 220px);
    overflow-y: hidden;
    z-index: 2;
    opacity: 0;
}

.rental-fixed-dates-container{
    display: flex;
}






.label-disabled{
    color: #ccc;
}

.button-inactive{
    background: #aaa;
    cursor: default;
}

.button-loading{
    background: #aaa;
    cursor: default;
}

@media print {
  body {
    visibility: hidden;
  }
  .report-inner {
    visibility: visible;
    height: 100%;
  }
  .report-table-header{
      print-color-adjust: exact;
  }
}