.sidebar-header-btn{
    height: 30px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.sidebar-search-input{
    border: none;
    background: no-repeat;
    padding: 0 10px;
    height: 30px;
    box-sizing: border-box;
    flex: 1;
    font-size: 13px;
}

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

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

.btn-light-blue{
    background: var(--light-blue);
    color: #fff;
}

.btn-gray{
    background: #f1f5f8;
    color: #333;
}

.btn-with-icon{
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 12px;
}

.btn-with-icon i{
    font-size: 1.1em;
    margin-right: 0.7em;
}

.btn-inactive{
    background: #f1f5f8;
    color: #aaa;
    cursor: default;
}

/** Schedule -- Start **/

.schedule-map-container, .customer-map-container{
    flex: 1;
    background: #b9c7cd;
    margin-left: -10px;
}

.schedule-sidebar{
    z-index: 1;
    padding: 0;
}

.schedule-sidebar .schedule-sidebar-header .header-btn-container{
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schedule-sidebar .schedule-sidebar-header .header-cal-container{
    display: flex;
    width: 100%;
    height: 70px;
    background: #f1f5f8;
    align-items: center;
    border-bottom: 1px solid #dfe5e9;
}

.cal-strip-btn{
    height: 40px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    background: #fff;
}

.cal-next-btn{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.cal-back-btn{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.cal-strip-btn-inactive{
    color: #b9c7cd;
    cursor: default;
}

.schedule-cal-strip{
    flex: 1;
    display: flex;
    height: 58px;
    overflow: hidden;
}

#strip-calendar{
    display: flex;
}

.cal-strip-week{
    display: flex;
}

.cal-strip-date{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    color: #606771;
    transition: all 0.25s ease;
}

.strip-date-date{
    font-size: 13px;
    font-weight: 500;
    margin: 3px 0;
}

.strip-date-day{
    font-size: 8px;
}

.strip-date-month{
    font-size: 8px;
    color: #b9c7cd;
}

.cal-strip-date:hover{
    background: #fff;
}

.strip-date-selected{
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.08);
    cursor: default;
}

.strip-date-selecte, .strip-date-today{
    color: var(--light-blue);
}

.schedule-sidebar-body{
    height: calc(100% - 120px);
    box-sizing: border-box;
    overflow-x: hidden;
}

.schedule-list-start{
    background: #dfe5e9;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}

.schedule-list-item .drive-instruction{
    height: 36px;
    background: #f1f5f8;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #606771;
}

.schedule-list-item .schedule-item-body{
    display: flex;
    padding: 10px;
    padding-bottom: 15px;
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
}

.schedule-list-item .schedule-item-body:hover, .schedule-item-selected{
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.schedule-item-body .schedule-list-line{
    position: absolute;
    width: 3px;
    height: 100%;
    background: #f1f5f8;
    top: 0;
    left: 24px;
    z-index: -1;
    transition: all 0.25s ease;
}

.schedule-item-body .status-pill{
    font-size: 10px;
    position: absolute;
    right: 0;
}

.schedule-item-body .item-num{
    width: 30px;
    height: 30px;
    background: #f1f5f8;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    transition: all 0.25s ease;
}

.schedule-item-body .item-detail{
    flex: 1;
    padding: 0 10px;
}

.schedule-item-selected .item-num{
    background: var(--light-blue);
    color: #fff;
}

.schedule-item-selected .schedule-list-line{
    background: var(--light-blue);
}

.schedule-item-body .item-detail-header{
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.schedule-item-body .item-detail-header .item-time{
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.schedule-item-body .item-detail-header .item-duration{
    height: 20px;
    margin: 0 10px;
    background: #f1f5f8;
    padding: 0 9px 0 7px;
    font-size: 11px;
    display: flex;
    align-items: center;
    color: #333;
    border-radius: 10px;
}

.item-duration i{
    margin-right: 7px;
    font-size: 12px;
}

.schedule-list-item .item-company-name{
    font-size: 14px;
    color: #606771;
    font-weight: 500;
}

.schedule-list-item .item-address{
    font-size: 12px;
    margin-top: 3px;
    color: #606771;
}

.schedule-map-container{
    position: relative;
    overflow-x: hidden;
}

#new-schedule-map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.schedule-detail-container{
    position: absolute;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: #f1f5f8;
    padding: 10px 15px;
    padding-left: 25px;
    box-sizing: border-box;
    display: none;
}

.schedule-detail-header{
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid #b9c7cd;
}

.schedule-detail-topbar{
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.schedule-detail-topbar .topbar-left{
    flex: 1;
    display: flex;
}

.schedule-detail-topbar .topbar-avatar{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.schedule-detail-topbar .topbar-detail{
    flex: 1;
    margin-left: 15px;
}

.schedule-detail-topbar .topbar-detail .topbar-company-name{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 500;
}

#schedule-detail-map{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#close-schedule-detail{
    background: #fff;
    width: 34px;
    height: 34px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 4px rgba(0,0,0,0.15);
    color: #333;
    cursor: pointer;
}

.detail-load-container .load-header{
    display: flex;
}

.detail-load-container .load-header .load-avatar{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #dfe5e9;
}

.detail-load-container .load-header .load-detail{
    flex: 1;
    margin-left: 15px;
}

.detail-load-container .load-line{
    height: 12px;
    background: #dfe5e9;
    margin-top: 7px;
    width: 80%;
    border-radius: 3px;
}

.detail-load-container .line-short{
    margin-top: 3px;
    width: 40%;
    height: 14px;
}

.detail-load-container .load-map{
    height: 300px;
    border-radius: 8px;
    background: #dfe5e9;
    margin-top: 15px;
}

.abs-marker{
    position: absolute;
    z-index: 2;
    height: 40px;
    border-radius: 4px;
    background: var(--light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: -50px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.abs-marker::before{
    content: '';
    position: absolute;
    top: 40px;
    border-top: 10px solid var(--light-blue);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.topbar-schedule-time{
    font-size: 13px;
    color: #333;
    margin-top: 3px;
}

.schedule-detail-section{
    background: #fff;
    margin-top: 25px;
    padding: 15px;
    border-radius: 8px;
}

.schedule-detail-section .section-header{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.schedule-detail-section .section-header i{
    color: var(--orange);
    font-size: 24px;
    margin-right: 15px;
    width: 24px;
}

.schedule-detail-section .section-body{
    padding-left: 39px;
}

.schedule-detail-section .section-body .section-p-bold{
    margin-top: 15px;
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-bottom: 10px;
}

.schedule-detail-section .section-body .section-p{
    font-size: 13px;
    color: #606771;
}

.schedule-detail-section .section-body .empty-section{
    padding-top: 15px;
    color: #b9c7cd;
    font-size: 13px;
}

.schedule-detail-section .section-body .section-button{
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.schedule-oppo-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #b9c7c7;
}

.schedule-oppo-item:last-child{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.schedule-oppo-item .item-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 5px;
}

.schedule-oppo-item .item-header .item-title{
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 500;
}

.schedule-oppo-item .item-header .item-status{
    font-size: 13px;
    text-transform: capitalize;
    color: var(--primary-color);
    font-weight: 500;
}

.schedule-oppo-item .section-p{
    text-transform: capitalize;
    margin-bottom: 3px;
    font-size: 14px;
}

.schedule-oppo-item .section-p .p-bold{
    font-weight: 500;
    text-transform: none;
}

.schedule-oppo-item .section-p

/** Schedule -- End **/

/** Customer -- Start **/

.customer-sidebar{
    padding: 0;
    z-index: 1;
}

.customer-sidebar-header{
    padding: 10px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.customer-header-search-wrap{
    flex: 1;
    background: #f1f5f8;
    height: 30px;
    margin-right: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.customer-header-search-wrap i{
    font-size: 14px;
}

.customer-sidebar-body{
    padding: 0 5px;
    margin: 0;
}

.company-list-item{
    display: flex;
    padding: 12px 5px;
    border-bottom: 1px solid #f1f5f8;
    cursor: pointer;
}

.company-avatar{
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
}

.company-list-item .company-detail{
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 40px);
}

.company-list-item .company-detail .company-name{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-list-item .company-detail .company-address{
    font-size: 12px;
    color: #606771;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-list-item .company-detail .company-address span{
    font-weight: 500;
}

/** Customer -- End **/

.switch-select-holder{
    margin-bottom: 20px;
}

.switch-select-wrap{
    display: flex;
    background: #f1f5f8;
    height: 50px;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 25px;
    justify-content: space-between;
}

.switch-select-item{
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 49%;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.switch-select-item.switch-selected{
    background: var(--light-blue);
    cursor: default;
    color: #fff;
}

/** Unit -- Start **/

.unit-form-section{
    background: #fff;
    margin-top: 20px;
}

.unit-form-section:first-child{
    margin-top: 0;
}

.unit-form-section .section-header{
    display: flex;
    padding: 20px;
    padding-bottom: 15px;
    align-items: center;
    position: sticky;
    top: -20px;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid #eee;
}

.unit-form-section .section-header .section-title{
    font-size: 28px;
    color: var(--primary-color);
    flex: 1;
}

.unit-form-section .section-body{
    padding: 20px;
}

.form-counter-container{
    background: #f1f5f8;
    width: max-content;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.form-counter-button{
    width: 40px;
    background: #fff;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
}

.form-counter-display{
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--primary-color);
}

.counter-button-inactive{
    color: #aaa;
    cursor: default;
}

.unit-form-container .form-radio-container, .unit-delivery-body .form-radio-container, .unit-rental-body .form-radio-container{
    display: block;
    margin-bottom: 17px;
}

.unit-form-container .form-radio-item, .unit-delivery-body .form-radio-item, .unit-rental-body .form-radio-item{
    font-size: 14px;
    color: #aaa;
    padding: 8px 2px;
    width: max-content;
}

.unit-delivery-body .form-radio-item, .unit-rental-body .form-radio-item{
    padding: 8px 5px;
}

.unit-form-container .form-radio-item i, .unit-delivery-body .form-radio-item i, .unit-rental-body .form-radio-item i{
    font-size: 16px;
    margin-right: 10px;
}

.unit-form-container .form-radio-active, .unit-delivery-body .form-radio-active, .unit-rental-body .form-radio-active{
    color: var(--light-blue);
}

.form-hidden-container{
    display: none;
}

#unit-delivery-eta-container, #unit-delivery-date-container{
    display: none;
}

.unit-form-container .form-input-holder:last-child{
    margin-bottom: 0;
}

#unit-purchase-add-unit{
    height: 50px;
    background: var(--light-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#unit-purchase-add-unit i{
    font-size: 18px;
    margin-right: 15px;
}

.add-unit-header-detail{
    margin-left: 0;
}

.unit-order-header, .unit-rental-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 15px;
    border-radius: 4px;
}

.unit-order-header .header-search-wrap, .unit-rental-header .header-search-wrap{
    height: 40px;
    background: #f1f5f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-right: 12px;
}

.order-header-search{
    width: 200px;
    background: none;
    border: none;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    color: #414d55;
}

.order-header-search:focus{
    outline: none;
}

.unit-order-header .header-search-wrap i, .unit-rental-header .header-search-wrap i{
    color: var(--orange);
}

.unit-order-header .header-button{
    background: var(--primary-color);
    height: 40px;
    padding: 0 25px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.unit-order-section .section-title, .rental-form-section .section-title{
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

#add-unit-button, #add-unit-option-button{
    background: var(--light-blue);
    width: max-content;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 20px;
    cursor: pointer;
}

#add-unit-button i, #add-unit-option-button i{
    font-size: 18px;
    margin-right: 15px;
}

.unit-form-container .main-form-button, .item-container-body .main-form-button{
    border-radius: 4px;
}

.unit-form-container .button-inactive{
    background: #b9c7cd;
    box-shadow: none;
}

.add-unit-container{
    max-width: 1000px;
}

.add-unit-inner .step-form-header{
    display: flex;
    margin: 10px -10px;
    padding: 15px;
}

.unit-option-item{
    display: flex;
    height: 40px;
    margin-bottom: 10px;
    align-items: center;
    border: 1px solid var(--light-blue);
    border-radius: 4px;
    padding: 5px;
    padding-left: 12px;
    box-sizing: border-box;
}

.unit-option-item .option-name{
    font-size: 14px;
    color: var(--light-blue);
    flex: 1;
}

.unit-option-item .btn-remove-option{
    color: #f44336;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    background: #f1f5f8;
    border-radius: 4px;
}

.unit-step-forward{
    background: var(--light-blue);
    width: 180px;
    box-sizing: border-box;
    border-radius: 4px;
    justify-content: center;
    padding-left: 20px;
    padding-right: 18px;
    font-size: 14px;
}

.unit-step-forward i{
    margin-left: 20px;
}

.unit-step-backward{
    width: 180px;
    color: var(--light-blue);
    font-size: 14px;
    justify-content: center;
    padding-left: 18px;
    padding-right: 20px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--light-blue);
}

.unit-step-backward i{
    margin-right: 20px;
}

.add-unit-container .form-submit-holder{
    justify-content: space-between;
}

.add-unit-container .sfh-button-selected{
    background: var(--light-blue);
    border: 1px solid var(--light-blue);
}

.add-unit-container .sfh-button-selected .sfh-button-number{
    color: var(--light-blue);
}

.sfh-button-done{
    background: #4CAF50;
    border: 1px solid #4CAF50;
    color: #fff;
}

.sfh-button-done .sfh-button-number{
    background: #fff;
    color: #4CAF50;
}

.order-form-unit-item{
    display: flex;
    width: calc(50% - 15px);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: #f1f5f8;
}

.order-form-unit-item:last-child{
    margin-bottom: 25px;
}

.order-form-unit-item .item-number{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.order-form-unit-item .item-detail{
    flex: 1;
    padding: 0 15px;
}

.order-form-unit-item .item-title{
    font-size: 16px;
    color: #333;
}

.order-form-unit-item .item-info{
    font-size: 13px;
    color: #606771;
    margin-top: 3px;
}

.edit-order-unit-btn{
    width: 40px;
    height: 40px;
    background: #dfe5eb;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-blue);
    margin-right: 10px;
    cursor: pointer;
}

.remove-order-unit-btn{
    width: 40px;
    height: 40px;
    background: #dfe5eb;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f44336;
    cursor: pointer;
}

.unit-order-table, .unit-rental-table{
    background: #fff;
    margin-top: 20px;
}

.unit-order-table .table-header{
    background: #dfe5e9;
    padding-right: 75px;
}

.unit-rental-table .table-header{
    background: #dfe5ed;
    padding: 0 5px;
}

.unit-order-table .table-header-item, .unit-rental-table .table-header-item{
    color: #333;
}

.table-empty-body{
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-empty-title{
    text-align: center;
    font-size: 20px;
    color: #b9c7cd;
    font-weight: 600;
}

.table-sl-wrap{
    width: 40px;
    height: 40px;
    background: #f1f5f8;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
}

.order-status-pill{
    height: 30px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    font-size: 13px;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.order-status-placed{
    background: #f1f5f8;
    color: #788b93;
}

.order-status-shipped{
    background: #ffedd5;
    color: var(--orange);
}

.order-status-partly-shipped{
    border: 1px solid var(--orange);
    color: var(--orange);
}

.order-status-delivered, .order-status-complete{
    background: #77c126;
    color: #fff;
}

.order-status-partly-delivered{
    color: #77c126;
    border: 1px solid #77c126;
}

.table-num-wrap{
    height: 30px;
    background: #f1f5f8;
    border-radius: 3px;
    padding: 0 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #333;
}

.unit-order-table .dashboard-table-row{
    background: #fff;
    padding: 0;
    border-bottom: 1px solid #f1f5f8;
}

.unit-rental-table .dashboard-table-row{
    background: #fff;
    border-bottom: 1px solid #f1f5f8;
    padding: 0;
}

.table-click-row{
    cursor: pointer;
    display: flex;
    padding: 0 15px;
    flex: 1;
    transition: all 0.25s ease;
}

.unit-rental-item{
    padding: 0 5px;
}

.table-click-row:hover{
    background: #ced6dc;
}

.table-noclick-row{
    display: flex;
    flex: 1;
    padding: 0 15px;
}

.table-newtab-button{
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.25s ease;
    text-decoration: none;
    color: var(--light-blue);
    font-size: 16px;
}

.table-newtab-button:hover{
    background: var(--light-blue);
    color: #fff;
}

.order-over-fluid, .unit-over-fluid, .unit-status-fluid, .unit-rental-fluid{
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.unit-over-fluid{
    z-index: 100;
}

.unit-status-fluid, .unit-rental-fluid{
    z-index: 101;
}

.order-over-container, .unit-over-container, .unit-status-container, .unit-rental-container{
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    min-height: calc(100% - 100px);
    display: none;
}

.order-over-header, .unit-over-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #dfe5ed;
}

.order-over-title, .unit-over-title{
    font-size: 24px;
    color: #333;
}

.order-over-action, .unit-over-action{
    display: flex;
}

.header-edit-button{
    height: 40px;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    padding: 0 20px;
}

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

.header-newtab-button{
    height: 40px;
    margin: 0 15px;
    color: var(--light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 4px;
    padding: 0 20px;
    cursor: pointer;
    text-decoration: none;
}

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

.header-close-button{
    height: 40px;
    width: 40px;
    background: #f1f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}

.item-container-body{
    background: #fff;
    padding: 20px;
}

.order-id-status-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-id-wrap{
    background: #f1f5f8;
    height: 30px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #333;
    border-radius: 3px;
}

.order-detail-row{
    display: flex;
    margin-top: 25px;
    align-items: center;
    justify-content: space-between;
}

.order-detail-col{
    flex: 1;
    box-sizing: border-box;
    padding: 5px;
}

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

.detail-label{
    font-size: 13px;
    color: #879ca5;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.detail-value{
    color: var(--primary-color);
    font-size: 16px;
}

.detail-empty{
    color: #b9c7cd;
}

.order-section-separator{
    margin: 25px 5px 20px 5px;
    border-top: 1px dashed #b9c7cd;
}

.order-section-title{
    padding: 5px;
    font-size: 20px;
    color: #333;
}

.unit-model-manu{
    font-size: 15px;
    font-weight: 600;
    color: #606771;
}

.unit-model-manu span{
    font-weight: 400;
}

.unit-flex-container{
    display: flex;
    height: auto;
    justify-content: space-between;
}

.unit-photo-container, .unit-info-container{
    width: calc(50% - 15px);
}

.unit-photo-wrap{
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    border: 1px solid #f1f5f8;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unit-photo-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unit-photo-wrap .unit-placeholder-img{
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.unit-options-wrap{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.unit-options-item{
    height: 30px;
    background: #f1f5f8;
    display: flex;
    margin: 5px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 13px;
    color: #414d55;
    border-radius: 3px;
}

.unit-noinfo-wrap{
    margin: 15px 5px 25px 5px;
    color: #b9c7cd;
}

.unit-section-button{
    background: var(--light-blue);
    height: 40px;
    margin: 0 5px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.unit-delivery-body .order-id-status-wrap{
    padding: 0 0 15px 5px;
}

.unit-title-row{
    display: flex;
    align-items: center;
    margin: 5px;
    margin-bottom: 15px;
}

.unit-title-row .unit-name{
    font-size: 18px;
    color: var(--light-blue);
    font-weight: 500;
}

.unit-title-row .unit-name span{
    margin-left: 8px;
    font-weight: 400;
}

#unit-status-radio{
    margin-top: 5px;
}

.unit-alert-pill{
    font-size: 11px;
    height: 24px;
    margin-left: 10px;
    border: 1px solid #dfe5e9;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    padding-right: 12px;
    color: #606771;
}

.unit-alert-pill i{
    font-size: 12px;
    margin-right: 8px;
}

.unit-alert-pill.alert-high{
    border: 1px solid #df0000;
}

.unit-alert-pill.alert-high i{
    color: #df0000;
}

.unit-alert-pill.alert-medium{
    border: 1px solid var(--orange);
}

.unit-alert-pill.alert-medium i{
    color: var(--orange);
}

.item-warning-wrap{
    margin: -20px;
    margin-bottom: 25px;
    height: 50px;
    background: #f1f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #414d55;
    font-size: 16px;
}

.item-warning-wrap i{
    font-size: 18px;
    margin-right: 15px;
}

.item-warning-wrap.warning-high{
    background: #fbd6d4;
    color: #df0000;
}

.table-pill-warning{
    margin-left: 5px;
}

.table-pill-warning.warning-high{
    color: #df0000;
}

.item-container-body .form-input-holder{
    box-sizing: border-box;
    padding: 0 5px;
}

.add-warehouse-footer-over{
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: none;
    z-index: 102;
}

.add-warehouse-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;
}

.close-add-warehouse-footer{
    width: 30px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.delivery-info-container{
    margin: 10px 5px 25px;
}

.delivery-info-title{
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.delivery-info-time{
    font-size: 12px;
    color: #606771;
    margin-top: 3px;
}

.rental-rates-input-container{
    display: flex;
    justify-content: space-between;
    margin: 5px;
    margin-top: 20px;
}

.rental-rates-item{
    flex: 1;
    width: calc(25% - 10px);
    max-width: calc(25% - 10px);
}

.rental-rates-item .form-input{
    width: 100%;
}

.rates-checkbox-item{
    display: flex;
    margin-bottom: 5px;
    color: #b9c7cd;
    cursor: pointer;
}

.rates-checkbox-item i{
    font-size: 16px;
    margin-right: 10px;
}

.rates-checkbox-active{
    color: #333;
}

.rates-checkbox-active i{
    color: var(--light-blue);
}

.rental-section-button{
    background: var(--light-blue);
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.unit-rental-switch{
    display: flex;
    padding: 5px;
    background: #f1f5f8;
    border-radius: 4px;
    width: 270px;
    justify-content: space-between;
}

.rental-switch-item{
    display: flex;
    align-items: center;
    color: #333;
    font-size: 13px;
    padding: 5px;
    width: 120px;
    cursor: pointer;
    border-radius: 4px;
}

.rental-switch-icon{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: 16px;
}

.rental-switch-name{
    flex: 1;
    text-align: center;
}

.rental-switch-item:hover{
    background: #dfe5ed;
}

.switch-item-selected, .switch-item-selected:hover{
    background: var(--light-blue);
    color: #fff;
}

.switch-item-selected .rental-switch-icon{
    color: var(--light-blue);
}

.rental-form-section .section-subtitle{
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.header-button-wrap{
    display: flex;
}

.rental-header-button{
    height: 40px;
    background: var(--light-blue);
    padding: 0 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    margin-right: 10px;
    font-size: 14px;
}

.unit-rental-header .header-button{
    height: 40px;
    background: var(--primary-color);
    padding: 0 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.rental-filter-header{
    background: #fff;
    display: flex;
    padding: 15px;
    border-radius: 4px;
    align-items: flex-end;
    border: 1px solid #dedede;
}

.rental-filter-col{
    margin-top: 20px;
}

.filter-input-label{
    font-size: 13px;
    color: var(--primary-color);
    margin-bottom: 3px;
    display: block;
}

.filter-input-wrap{
    height: 40px;
    border-radius: 4px;
    background: #f1f5f8;
    padding: 5px 0 5px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.rental-filter-input{
    width: 100%;
    flex: 1;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    box-sizing: border-box;
}

.rental-filter-input:focus{
    outline: none;
}

.filter-submit-button{
    height: 40px;
    width: 120px;
    background: var(--light-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.rental-filter-icon{
    height: 30px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #dfe5ed;
}

.rental-filter-col .form-input-wrap{
    border-radius: 4px;
    min-height: 40px;
    padding: 0;
    padding-left: 10px;
}

.rental-filter-col .form-input-icon{
    border-left: 1px solid #ddd;
    height: 30px;
    width: 40px;
}

.rental-filter-col .form-input{
    font-size: 14px;
}

.rental-availability-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding-left: 5px;
}

.rental-availability-title{
    font-size: 20px;
    color: var(--primary-color);
}

.rental-cart-button{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    width: 180px;
    background: var(--primary-color);
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    text-transform: uppercase;
}

.rental-cart-button i{
    font-size: 16px;
    margin-left: 10px;
}

.rental-btn-counter{
    background: #f1f5f8;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    margin-left: 20px;
    color: var(--primary-color);
}

.table-empty-button{
    cursor: pointer;
    color: var(--light-blue);
    font-weight: 400;
}

.table-empty-button:hover{
    text-decoration: underline;
}

.table-empty-button:last-child{
    margin-left: 50px;
}

.rental-empty-or{
    display: flex;
    align-items: center;
    width: 50%;
    margin: 25px 0;
}

.rental-empty-or div{
    height: 1px;
    flex: 1;
    background: #ddd;
}

.rental-empty-or span{
    padding: 0 20px;
    color: #b9c7cd;
}

.unit-rental-table .table-empty-body{
    flex-direction: column;
    padding: 50px 30px;
}

.table-loading-item{
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-around;
}

.table-loading-line{
    height: 15px;
    width: 60%;
    background: #f1f5f8;
    border-radius: 4px;
}

.line-small{
    width: 30%;
}

.rental-table-footer{
    display: none;
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    margin-bottom: 30px;
}

.rental-table-row{
    display: flex;
}

.form-clear-button{
    cursor: pointer;
}

.rental-table-checkmark{
    background: #f1f5f8;
    height: 20px;
    width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.unit-rental-table .rental-row-selected{
    background: #d6dce0;
}

.rental-row-selected .rental-table-checkmark{
    background: var(--primary-color);
}

.selected-counter-wrap{
    display: flex;
    width: max-content;
    border-radius: 4px;
    box-sizing: border-box;
    align-items: center;
}

.selected-counter-input{
    width: 30px;
    background: none;
    border: none;
    height: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    color: #414d55;
}

.selected-counter-input:focus{
    outline: none;
}

.selected-counter-btn{
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    color: #414d55;
    font-size: 14px;
}

.counter-btn-disabled{
    color: #b9c7cd;
    cursor: default;
}

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

.rates-over-container{
    position: absolute;
    width: 100%;
    max-width: 800px;
    bottom: 0;
    background: #fff;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    left: 50%;
    margin-left: -400px;
}

.rates-over-header{
    display: flex;
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f8;
}

.rates-over-title{
    font-size: 20px;
    color: #333;
}

.rates-over-subtitle{
    font-size: 14px;
    color: #333;
    margin-top: 3px;
    font-weight: 500;
}

.close-rates-over{
    width: 30px;
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rates-over-body{
    padding: 20px;
}

.rental-row-disabled{
    cursor: default;
}

.rental-row-disabled .rental-table-checkmark{
    color: #aaa;
}

.table-no-rates{
    color: var(--orange);
    text-decoration: underline;
    cursor: pointer;
}

.table-rental-rates{
    display: flex;
    width: 100%;
    color: var(--light-blue);
    cursor: pointer;
}

.table-rate-item{
    flex: 1;
    margin-right: 2px;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.table-rate-item span{
    font-weight: 400;
    margin-right: 3px;
    color: #8a8a8a;
}

#add-rental-unit-error{
    text-align: center;
}

.rental-availability-container{
    display: flex;
    padding: 10px 0;
}

.rental-filter-container{
    width: 20%;
}

.rental-availability-table{
    width: 60%;
    box-sizing: border-box;
    padding: 0 20px;
}

.rental-selected-container{
    width: 20%;
}

.rental-dates-holder{
    width: 100%;
    background: #fff;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.rental-filter-container .form-datepicker-container{
    width: 100%;
    padding: 5px;
}

.rental-filter-container .form-datepicker-container::before{
    right: 8px;
}

.rental-filter-container .ui-datepicker-calendar td a, .rental-filter-container .ui-datepicker-calendar td span {
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 3px;
    width: 100%;
    display: block;
    text-decoration: none;
    background: transparent;
    font-size: 12px;
    color: #aaa;
}

.rental-filter-container .ui-datepicker-calendar td a {
    color: #414d55;
}

.rental-filter-container .ui-datepicker-calendar .ui-datepicker-current-day a, .rental-filter-container .ui-datepicker-calendar .ui-datepicker-current-day a:hover {
    background: var(--light-blue);
    color: #fff;
}

.rental-filter-container .ui-datepicker-calendar td a:hover {
    background: #dfe8ec;
}

.rental-filter-container .ui-datepicker-next, .rental-filter-container .ui-datepicker-prev {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
    background: #f1f5f8;
    border-radius: 4px;
}

.rental-filter-container .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: 13px;
    font-weight: 500;
}

.rental-filter-holder{
    margin-top: 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.rental-filter-button{
    width: 100%;
    height: 40px;
    background: var(--light-blue);
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.rental-filter-title{
    color: var(--primary-color);
    font-size: 18px;
}

.rental-header-action{
    display: flex;
}

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

.rental-availability-container .rental-header-button{
    height: 40px;
    background: #fff;
    padding: 0 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-blue);
    cursor: pointer;
    margin-right: 10px;
    font-size: 14px;
    border: 1px solid #dfe5ed;
    box-sizing: border-box;
}

.rental-availability-container .rental-header-button:last-child{
    margin-right: 5px;
}

.rental-selected-holder{
    background: #fff;
    box-sizing: border-box;
}

.rental-selected-header{
    font-size: 18px;
    color: var(--primary-color);
    padding: 10px;
    border-bottom: 1px solid #dfe5ed;
}

.rental-selected-body{
    padding: 10px;
}

.selected-body-empty{
    color: #b9c7cd;
    padding: 20px 0;
}

.more-filter-button{
    height: 30px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    cursor: pointer;
    padding: 0 10px;
    color: var(--primary-color);
    background: #f1f5f8;
    border-radius: 4px;
}

.more-filter-open{
    background: #dfe5ed;
}

.more-filter-open i{
    transform: rotate(180deg);
}

.more-filter-container{
    display: none;
}

.rental-select-btn{
    background: var(--light-blue);
    height: 30px;
    width: 100px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.rental-btn-selected{
    background: #f1f5f8;
    color: var(--light-blue);
    cursor: default;
}

.rental-selected-item{
    background: #f1f5f8;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
}

.remove-rental-selected{
    position: absolute;
    top: 3px;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.remove-rental-selected:hover{
    color: #f44336;
}

.selected-item-pill{
    background: #f44336;
    height: 20px;
    padding: 0 15px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.6px;
}

.rental-stock-item .selected-item-pill{
    background: #d7e3ed;
    color: var(--light-blue);
}

.rental-nonstock-item .selected-item-pill{
    background: #f5e5d0;
    color: var(--orange);
}

.rental-factory-item .selected-item-pill{
    background: #f3ceda;
    color: #E91E63;
}

.selected-model-name{
    margin-top: 10px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
}

.selected-counter-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 7px 0;
    margin-top: 10px;
}

.selected-counter-title{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
}

.selected-rate-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--primary-color);
    font-size: 13px;
}

.rental-selected-proceed{
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.rental-proceed-fluid, .rental-detail-fluid{
    position: fixed;
    width: calc(100% - 230px);
    height: calc(100% - 61px);
    top: 61px;
    left: 230px;
    background: #f1f5f8;
    z-index: 98;
    overflow-x: hidden;
    display: none;
}

.close-rental-proceed, .close-rental-detail{
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-color);
    cursor: pointer;
    width: max-content;
    margin-bottom: 10px;
}

.close-rental-proceed i, .close-rental-detail i{
    margin-right: 12px;
}

.rental-proceed-container, .rental-detail-container{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.proceed-switch-container{
    display: flex;
    background: #f1f5f8;
    padding: 5px 2.5px;
    box-sizing: border-box;
    border-radius: 4px;
    align-items: center;
    width: max-content;
}

.proceed-switch-item{
    height: 40px;
    display: flex;
    width: max-content;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-blue);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    padding: 0 20px;
    margin: 0 2.5px;
    min-width: 100px;
}

.proceed-switch-selected{
    background: var(--light-blue);
    color: #fff;
    cursor: default;
}

.proceed-unit-container{
    background: #fff;
    margin-top: 15px;
    padding: 15px 20px;
    box-sizing: border-box;
}

.proceed-unit-header{
    font-size: 24px;
    color: #333;
    font-weight: 700;
    margin-bottom: 20px;
}

.proceed-section-title{
    font-size: 16px;
    font-weight: 500;
    color: var(--orange);
    margin-top: 15px;
}

.rental-cycle-container, .rental-rule-container{
    margin: 10px 0; 
}

.rental-cycle-item, .rental-rule-item{
    display: flex;
    color: #999;
    padding: 5px 0;
    margin-bottom: 5px;
    align-items: center;
    cursor: pointer;
    width: max-content;
}

.rental-cycle-item i, .rental-rule-item i{
    font-size: 20px;
    margin-right: 15px;
}

.rental-cycle-item span, .rental-rule-item span{
    font-size: 12px;
    margin-left: 10px;
}

.rental-cycle-selected, .rental-rule-selected{
    color: #333;
}

.rental-cycle-selected i, .rental-rule-selected i{
    color: var(--orange);
}

.rental-large-label, .proceed-unit-container .site-radio-label{
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 500;
}

.rental-large-value{
    color: #414d55;
    margin-bottom: 20px;
}

.rental-proceed-info{
    color: var(--light-blue);
    font-size: 12px;
    margin-bottom: 15px;
}

.proceed-unit-item{
    border-bottom: 3px solid #b9c7cd;
    margin-top: 15px;
}

.proceed-unit-item:last-child{
    border-bottom: none;
}

.proceed-unit-name{
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.proceed-unit-name span{
    font-weight: 500;
    margin-right: 6px;
}

.proceed-item-row{
    color: #414d55;
}

.proceed-check-item{
    margin: 15px 0px;
    color: #606771;
    display: flex;
    align-items: center;
    width: max-content;
    cursor: pointer;
}

.proceed-check-item i{
    font-size: 20px;
    margin-right: 15px;
    color: #aaa;
}

.proceed-check-selected{
    color: #414d55;
}

.proceed-check-selected i{
    color: var(--light-blue);
}

.proceed-option-container{
    margin-top: 15px;
}

.proceed-option-label{
    font-size: 13px;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.separate-option-container{
    display: none;
}

.separate-option-wrap{
    margin: 15px 0;
    border-bottom: 1px solid #eee;
}

.separate-option-wrap:last-child{
    border-bottom: none;
}

.proceed-option-label{
    font-size: 13px;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.separate-option-title{
    color: var(--orange);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.proceed-unit-pill{
    height: 20px;
    font-size: 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 4px;
}

.stock-item-pill{
    background: #d7e3ed;
    color: var(--light-blue);
}

.nonstock-item-pill{
    background: #f5e5d0;
    color: var(--orange);
}

.factory-item-pill{
    background: #f3ceda;
    color: #E91E63;
}

.proceed-unit-num{
    width: 30px;
    height: 30px;
    background: #333;
    margin-right: 10px;
    color: #eee;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.proceed-unit-count{
    min-width: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    height: 20px;
    margin-left: 10px;
    background: #dfe5ed;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 11px;
    font-weight: 500;
}

.proceed-value-wrap{
    width: max-content;
    color: #414d55;
    padding: 0 20px;
    border-radius: 4px;
}

.proceed-table-header{
    display: flex;
    border-bottom: 2px solid #222;
}

.pti-header-row, .pti-item-row, .pti-option-row{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    height: 50px;
    transition: all 0.2s;
}

.proceed-table-expand{
    cursor: pointer;
    transition: all 0.2s;
}

.proceed-table-add, .proceed-option-remove{
    font-size: 18px;
    color: #444;
    cursor: pointer;
    display: none;
}

.pti-header-row:hover, .pti-item-row:hover, .pti-option-row:hover{
    background: #f1f5f8;
}

.pti-header-row:hover .proceed-table-add, .pti-item-row:hover .proceed-table-add, .pti-option-row:hover .proceed-option-remove{
    display: block;
}

.pti-header-row .table-item, .pti-item-row .table-item, .pti-option-row .table-item{
    font-size: 14px;
}

.pti-option-row .table-item{
    color: var(--primary-color);
}

.pti-expand-container{
    display: none;
}

.pti-expanded .pti-header-row{
    border-bottom: 1px solid #ccc;
}

.pti-expanded .proceed-table-expand{
    transform: rotate(90deg);
}

.pti-expanded .proceed-unit-count{
    background: #607D8B;
    color: #fff;
}

.proceed-total-container{
    margin: 10px 0 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.proceed-total{
    width: 20%;
    box-sizing: border-box;
    padding: 0 5px;
}

.pti-option-input-row{
    height: 50px;
    background: #f1f5f8;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    padding: 10px 5px;
    display: none;
}

.pti-option-input-wrap{
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #b9c7cd;
    border-radius: 4px;
    position: relative;
}

.pti-option-search-input{
    height: 100%;
    background: none;
    border: none;
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
    font-family: inherit;
    color: #414d55;
}

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

.pti-add-option-link{
    font-size: 12px;
    padding: 2px 10px;
    color: var(--light-blue);
    cursor: pointer;
    font-weight: 500;
    border-left: 1px solid #b9c7cd;
}

.pti-option-drop-container{
    position: absolute;
    top: calc(100% + 5px);
    width: 100%;
    background: #fff;
    border: 1px solid #b9c7cd;
    border-radius: 4px;
    padding: 5px 0;
}

.pti-option-drop-item{
    font-size: 13px;
    padding: 10px;
    cursor: pointer;
}

.pti-option-drop-item:hover{
    color: #222;
}

.pti-hide-option-input{
    position: absolute;
    right: -30px;
    font-size: 18px;
    color: #222;
    cursor: pointer;
}

.pti-rate-input{
    font-family: inherit;
    background: none;
    border: none;
    font-size: 14px;
    padding: 0;
}

.pti-option-row .pti-rate-input{
    color: #606771;
}

.pti-rate-input:focus{
    outline: none;
}

.pti-input-sym{
    margin-right: 3px;
}

.pti-option-name{
    font-size: 14px;
    display: flex;
    align-items: center;
}

.pti-option-title{
    font-size: 11px;
    font-weight: 500;
    color: var(--light-blue);
    padding: 10px 5px;
    display: none;
    border-bottom: 1px dashed #b9c7cd;
    text-transform: uppercase;
}

.pti-option-dot{
    width: 6px;
    height: 6px;
    background: #414d55;
    border-radius: 8px;
    margin-right: 10px;
}

.proceed-table-name{
    font-weight: 500;
    font-size: 15px;
    color: var(--primary-color);
}

.proceed-opportunity-wrap{
    cursor: pointer;
    color: #414d55;
    justify-content: space-between;
}

.proceed-opportunity-empty{
    color: #b9c7cd;
}

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

.proceed-oppo-container{
    background: #fff;
    width: 100%;
    max-width: 800px;
    margin: 50px auto 0;
    height: calc(100% - 50px);
    display: none;
}

.proceed-oppo-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    font-size: 20px;
    color: #222;
    height: 55px;
    box-sizing: border-box;
    border-bottom: 1px solid #aaa;
}

.close-proceed-oppo{
    cursor: pointer;
}

.proceed-oppo-inner{
    height: calc(100% - 55px);
    overflow-x: hidden;
}

.proceed-oppo-item{
    display: flex;
    align-items: center;
    margin: 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.proceed-oppo-item:hover{
    background: #f1f5f8;
}

.po-item-50{
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    padding: 5px;
    box-sizing: border-box;
}

.po-item-40{
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    padding: 5px;
    box-sizing: border-box;
}

.po-item-30{
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    padding: 5px;
    box-sizing: border-box;
}

.po-item-20{
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    padding: 5px;
    box-sizing: border-box;
}

.proceed-oppo-id{
    font-size: 12px;
    color: #606771;
}

.proceed-oppo-model, .proceed-oppo-site{
    font-size: 14px;
    color: var(--primary-color);
}

.proceed-oppo-status{
    font-size: 14px;
    text-transform: capitalize;
}

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

.proceed-breakup-wrap{
    background: #f1f5f8;
    padding: 15px 20px;
    width: calc(50% - 10px);
    box-sizing: border-box;
}

.proceed-breakup-title, .proceed-total-title{
    font-size: 20px;
    color: #222;
    margin-bottom: 20px;
}

.proceed-rate-header{
    margin-left: 4px;
}

.proceed-breakup-row, .proceed-total-row, .proceed-breakup-total{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.proceed-breakup-total{
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 15px;
}

.proceed-breakup-value{
    font-weight: 500;
}

.rental-small-label{
    color: #606771;
    font-size: 13px;
    margin-bottom: 8px;
    display: none;
}

.proceed-site-delivery, .proceed-contact-delivery{
    display: none;
}

.rental-breakup-wrap{
    display: flex;
    align-items: center;
    margin-top: 7px;
    margin-left: 2px;
    font-size: 12px;
    color: #333;
}

.rental-breakup-wrap i{
    font-size: 13px;
    margin-right: 6px;
}

.proceed-cust-btn-wrap{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.proceed-cust-btn, .proceed-oppo-btn{
    display: flex;
    align-items: center;
    background: var(--primary-color);
    cursor: pointer;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    border-radius: 4px;
}

.proceed-cust-btn i, .proceed-oppo-btn i{
    font-size: 14px;
    margin-left: 20px;
}

.proceed-cust-or{
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 10px;
    padding: 0 30px;
}

.proceed-cust-or:before{
    content: '';
    position: absolute;
    width: 25px;
    height: 1px;
    background: #ddd;
    left: 0;
}

.proceed-cust-or:after{
    content: '';
    position: absolute;
    width: 25px;
    height: 1px;
    background: #ddd;
    right: 0;
}

.proceed-site-item, .proceed-contact-item{
    display: flex;
    border-bottom: 1px solid #f1f5f8;
    padding-bottom: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.proceed-site-item:last-child, .proceed-contact-item:last-child{
    border-bottom: none;
}

.proceed-site-radio, .proceed-contact-radio{
    width: 14px;
    height: 14px;
    border: 2px solid #8a8a8a;
    border-radius: 20px;
    margin-right: 15px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-radio-small, .contact-radio-small{
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
}

.proceed-site-selected .proceed-site-radio, .proceed-contact-selected .proceed-contact-radio{
    border: 2px solid var(--primary-color);
}

.proceed-site-selected .site-radio-small, .proceed-contact-selected .contact-radio-small{
    background: var(--primary-color);
}

.proceed-site-info, .proceed-contact-info{
    flex: 1;
}

.proceed-site-city, .proceed-contact-name{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 500;
}

.proceed-site-address, .proceed-contact-position{
    margin-top: 5px;
    font-size: 13px;
    color: #606771;
}

.proceed-validity-info{
    font-size: 13px;
    color: #222;
}

.porceed-validity-info i{
    font-size: 14px;
    margin-right: 5px;
}

.proceed-valid-date{
    font-weight: 600;
}

.proceed-type{
    text-transform: capitalize;
}

.table-empty{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #b9c7cd;
}

.rental-btn-disabled{
    background: #b9c7cd;
    cursor: default;
}

.rental-detail-block{
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.rental-detail-block:last-child{
    margin-bottom: 0;
}

.rental-block-title{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.block-section-title{
    font-size: 18px;
    color: #222;
    margin-bottom: 5px;
    font-weight: 500;
}

.rental-detail-info{
    font-size: 16px;
    color: #222;
}

.block-info-wrap{
    margin-top: 20px;
}

.block-info-title{
    font-size: 14px;
    margin-bottom: 5px;
}

.block-info-value{
    color: #222;
}

.rental-block-section{
    margin-bottom: 20px;
}

.rental-block-section:last-child{
    margin-bottom: 0;
}

.block-info-container{
    margin-top: 20px;
    display: flex;
}

.block-info-container .block-info-wrap{
    width: 50%;
    box-sizing: border-box;
    max-width: 50%;
    margin-top: 0;
}

.rental-validity-info{
    color: var(--orange);
    margin-top: 10px;
    font-size: 13px;
}

.rental-validity-info i{
    font-size: 14px;
    margin-right: 5px;
}

.rental-validity-info span{
    font-weight: 500;
}

.rental-detail-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rental-detail-button{
    height: 50px;
    background: var(--primary-color);
    padding: 0 25px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 250px;
    box-sizing: border-box;
}

.rental-cancel-button{
    cursor: pointer;
    background: #f1f5f8;
    height: 50px;
    color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0 25px;
    border-radius: 4px;
    min-width: 200px;
    box-sizing: border-box;
}

.rental-detail-block .pti-header-row:hover, .rental-detail-block .pti-option-row{
    background: transparent;
}

.rental-detail-block .pti-option-title{
    display: block;
}

.rental-order-holder{
    display: flex;
    justify-content: space-between;
}

.rental-overview-col{
    width: 66%;
    max-width: 66%;
    min-width: 66%;
}

.rental-todo-col{
    width: calc(34% - 20px);
    max-width: calc(34% - 20px);
    min-width: calc(34% - 20px);
}

.rental-overview-footer{
    display: flex;
    justify-content: space-between;
}

.overview-footer-col{
    width: calc(50% - 10px);
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
}

.rental-todo-col .rental-block-title, .overview-footer-col .rental-block-title{
    font-size: 20px;
}

.rental-block-empty{
    color: #b9c7cd;
}

.assign-rental-unit-fluid{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 50px;
    display: none;
}

.assign-rental-unit-container{
    background: #fff;
    width: 100%;
    max-width: 800px;
    margin: auto;
    display: none;
}

.assign-rental-unit-header{
    display: flex;
    font-size: 24px;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.assign-rental-unit-title{
    flex: 1;
    color: var(--primary-color);
}

.close-assign-rental-unit{
    cursor: pointer;
    color: #222;
}

.assign-rental-unit-body{
    padding: 5px 15px 15px;
}

.assign-rental-unit-item{
    border-bottom: 1px dashed #b9c7cd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.assign-rental-unit-item:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.assign-item-title{
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 10px;
    margin-top: 10px;
}

.assign-select-item{
    display: flex;
    align-items: center;
    color: #606771;
    font-weight: 500;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
}

.assign-select-check{
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #b9c7cd;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 15px;
    transition: all 0.2s ease;
}

.assign-select-selected{
    color: var(--primary-color);
}

.assign-select-selected .assign-select-check{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.assign-rental-unit-footer{
    padding: 15px;
    display: flex;
    border-top: 1px solid #eee;
}

.table-order-detail {
    display: flex;
    max-width: 100%;
}

.table-part-detail {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-part-count {
    margin-left: 5px;
    font-weight: 600;
}

.popup-fluid{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    display: none;
}

.popup-container{
    width: 100%;
    max-width: 900px;
    background: #fff;
    margin: 50px auto;
    min-height: calc(100% - 100px);
    display: none;
}

.popup-header{
    display: flex;
    padding: 15px;
    font-size: 24px;
    border-bottom: 1px solid #ddd;
}

.popup-header-title{
    flex: 1;
}

.close-popup-fluid{
    cursor: pointer;
}

.popup-body{
    padding: 20px;
}

.detail-id-status{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.form-parts-table{
    display: none;
    margin-top: 15px;
    padding: 0;
}

.parts-table-header, .form-parts-item{
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    color: #414d55;
    border-bottom: 1px solid #f1f5f8;
}

.parts-error-wrap{
    text-align: center;
    color: #f44336;
    margin-bottom: 10px;
    display: none;
}

.form-parts-item{
    background: #fff;
}

.form-parts-item:nth-child(2n){
    background: #f1f5f8;
}

.parts-header-num, .form-parts-item .form-item-num{
    width: 20%;
}

.parts-header-desc, .form-parts-item .form-item-desc{
    width: 25%;
}

.parts-header-quantity, .form-parts-item .form-item-quantity{
    width: 15%;
}

.parts-header-price, .form-parts-item .form-item-price{
    width: 15%;
}

.parts-header-total, .form-parts-item .form-item-total{
    width: 10%;
}

.parts-header-check, .form-parts-item .form-item-check{
    width: 5%;
}

.parts-header-notes, .form-parts-item .form-item-notes{
    width: 25%;
    box-sizing: border-box;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parts-table-header{
    font-weight: 600;
    color: #333;
    height: 40px;
    box-sizing: border-box;
    background: #dfe5ed;
    font-size: 13px;
}

.popup-body .form-parts-table{
    display: block;
}

.detail-info-wrap{
    margin-bottom: 20px;
}

.detail-label{
    font-size: 15px;
    font-weight: 600;
}

.detail-value{
    font-size: 18px;
    margin-top: 5px;
}

.detail-address{
    font-size: 14px;
    color: #606771;
}

.detail-section-title{
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/** Unit -- End **/

.gs-fluid{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(241 245 248 / 50%);
    backdrop-filter: blur(3px);
    overflow-x: hidden;
    display: none;
}

.gs-container{
    background: #fff;
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
    min-height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: none;
}

.gs-input-holder{
    padding: 20px;
}

.gs-input-wrap{
    border: 2px solid #b9c7cd;
    border-radius: 8px;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
}

.gs-input-focus{
    border: 2px solid var(--light-blue);
}

.gs-input{
    flex: 1;
    font-size: 16px;
    color: #414d55;
    height: 100%;
    background: none;
    border: none;
    padding: 0 20px;
}

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

.gs-input-icon{
    font-size: 20px;
    color: var(--primary-color);
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gs-result-holder{
    border-top: 1px solid #f4f4f4;
}

.parts-invoice-btn{
    height: 40px;
    background: var(--light-blue);
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    cursor: pointer;
}

.detail-invoice-container{
    padding: 10px 0 15px;
}

.part-invoice-fluid{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #f1f5f8;
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.part-invoice-container{
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: none;
    min-height: 100%;
}

.part-invoice-header{
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.part-invoice-title{
    font-size: 24px;
    color: var(--primary-color);
    flex: 1;
}

.close-part-invoice{
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #222;
}

.part-invoice-inner{
    padding: 20px;
    border-top: 5px solid #f1f5f8;
}

.inventory-parts-row{
    cursor: pointer;
}

.inventory-part-fluid{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.inventory-part-container{
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    min-height: calc(100% - 100px);
    display: none;
}

.inventory-part-header{
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f4f4f4;
}

.inventory-part-title{
    font-size: 24px;
    color: var(--primary-color);
    flex: 1;
}

.close-inventory-part{
    cursor: pointer;
    font-size: 24px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
}

.inventory-part-body{
    padding: 20px;
}

.inventory-part-detail{
    padding: 15px 20px;
    background: #f1f5f8;
    border-radius: 8px;
}

.part-detail-top{
    display: flex;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
}

.part-detail-label{
    font-size: 13px;
    color: #606771;
    margin-top: 15px;
    margin-bottom: 3px;
}

.part-detail-value{
    font-size: 16px;
    color: #414d55;
}

.edit-part-btn{
    margin-top: 20px;
    background: #222;
    height: 40px;
    width: 200px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.part-machines-title{
    font-size: 20px;
    color: var(--light-blue);
    font-weight: 600;
    margin-top: 20px;
}

.machine-part-item{
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.machine-part-name{
    font-weight: 500;
    color: var(--primary-color);
}

.section-part-name{
    font-size: 13px;
    color: #333;
}

.section-part-name span{
    font-weight: 500;
}

.search-inventory-part-icon{
    width: 30px;
    display: flex;
    justify-content: center;
}

.clear-search-inventory-part{
    cursor: pointer;
    color: #f44336;
}

.add-supplier-fluid{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.add-supplier-container{
    background: #fff;
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    display: none;
}

.add-supplier-header{
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.add-supplier-title{
    font-size: 24px;
    color: var(--primary-color);
    font-weight: 500;
    flex: 1;
}

.close-add-supplier{
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.add-supplier-body{
    padding: 20px;
}

.inventory-supplier-row{
    cursor: pointer;
}

.company-detail-fluid{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    display: none;
}

.company-detail-container{
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    padding: 5px;
    display: none;
}

.supplier-detail-fluid{
    position: fixed;
    width: calc(100% - 230px);
    height: calc(100% - 61px);
    top: 61px;
    left: 230px;
    background: #f1f5f8;
    z-index: 98;
    overflow-x: hidden;
    display: none;
}

.supplier-detail-container{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.close-supplier-detail{
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-color);
    cursor: pointer;
    width: max-content;
    margin-bottom: 10px;
}

.close-supplier-detail i{
    margin-right: 12px;
}

.supplier-detail-block{
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

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

.supplier-detail-title{
    font-size: 24px;
    color: var(--primary-color);
    flex: 1;
}

.btn-edit-supplier{
    height: 30px;
    background: #333;
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.supplier-detail-value{
    color: #414d55;
    font-size: 15px;
}

.supplier-detail-label{
    font-size: 13px;
    color: #606771;
    margin-bottom: 3px;
}

.supplier-detail-holder{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.supplier-detail-wrap{
    width: calc(50% - 10px);
}

.secondary-button{
    background: var(--light-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    border-radius: 4px;
    cursor: pointer;
}

#upload-supplier-product-input, #upload-stock-input{
    display: none;
}

.close-upload-supplier-product, .close-upload-stock{
    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;
}

.form-block-title{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.popup-section-title{
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 15px;
}

.ff-source-item{
    background: #f1f5f8;
    padding: 15px;
    margin-bottom: 10px;
}

.source-part-title{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 600;
}

.ff-source-label{
    font-size: 13px;
    color: #414d55;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 5px;
}

.ff-source-value{
    color: #606771;
}

.ff-source-switch-holder{
    display: flex;
    height: 50px;
    background: #fff;
    width: max-content;
    border-radius: 4px;
    align-items: center;
    padding: 0 2.5px;
}

.ff-source-switch-item{
    height: 40px;
    margin: 0 2.5px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.ff-source-switch-item:hover{
    background: #ddd;
}

.ff-source-switch-selected, .ff-source-switch-selected:hover{
    background: #333;
    color: #fff;
}

.ff-source-search-holder{
    width: calc(50% - 15px);
    position: relative;
    margin-top: 20px;
    display: none;
}

.ff-source-search-header{
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: all 0.25s;
}

.ff-source-search-focus{
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.ff-warehouse-search-input, .ff-supplier-search-input{
    height: 40px;
    background: none;
    border: none;
    padding: 0 15px;
    flex: 1;
    font-family: inherit;
    font-size: 14px;
}

.ff-warehouse-search-input:focus, .ff-supplier-search-input:focus{
    outline: none;
}

.ff-source-search-icon{
    width: 40px;
    display: flex;
    justify-content: center;
}

.ff-source-search-dropdown{
    position: absolute;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 15px 10px;
    top: calc(100% + 5px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: none;
}

.ff-source-dropdown-item{
    padding: 10px;
    cursor: pointer;
    transition: all 0.25s;
}

.ff-source-dropdown-item:hover{
    background: #f1f5f8;
}

.ff-source-dropdown-name{
    color: var(--primary-color);
}

.ff-source-dropdown-quantity{
    font-size: 12px;
}

.ff-nosource-wrap{
    font-size: 13px;
    margin-top: 15px;
    color: var(--orange);
}

.source-part-price-input{
    background: #dfe5ed;
    border: none;
    height: 24px;
    font-size: 12px;
    font-family: inherit;
    padding: 0 5px;
    box-sizing: border-box;
    width: 100%;
}

.source-part-price-input:focus{
    outline: none;
}

.part-item-check{
    background: #ccc;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
}

.part-item-selected .part-item-check{
    background: #333;
    color: #fff;
}

.order-source-title{
    color: var(--light-blue);
    font-size: 18px;
}

.order-source-section{
    border-bottom: 2px solid #222;
    padding-bottom: 25px;
    margin-bottom: 20px;
}

.order-source-section:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.detail-shipment-item{
    background: #f1f5f8;
    margin-bottom: 10px;
    padding: 15px;
}

.detail-shipment-item:last-child{
    margin-bottom: 0;
}

.shipment-item-status{
    font-size: 13px;
    font-weight: 600;
    color: var(--light-blue);
    margin-bottom: 5px;
}

.shipment-item-id{
    color: var(--primary-color);
    margin-bottom: 10px;
}

.shipment-items-title{
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.shipment-ship-item{
    font-size: 14px;
    color: #414d55;
    margin-bottom: 5px;
}

.shipment-invoice-btn{
    height: 36px;
    width: 170px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.shipment-invoice-fluid{
    position: fixed;
    z-index: 99;
    background: #f1f5f8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: none;
}

.close-shipment-invoice{
    position: fixed;
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
    top: 10px;
    right: 10px;
    border-radius: 4px;
}

.shipment-invoice-container{
    width: 100%;
    max-width: 1000px;
    background: #fff;
    min-height: 100%;
    margin: auto;
}

.shipping-invoice-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    color: #222;
    border-bottom: 5px solid #222;
}

.shipping-invoice-inner{
    padding: 20px;
    color: #222;
}

.shipping-invoice-date{
    text-align: right;
    font-size: 16px;
    color: #222;
}

.shipping-address-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 10px;
}

.shipping-address-name{
    font-size: 16px;
}

.shipping-address{
    font-size: 14px;
    margin-bottom: 15px;
}

.shipment-total-item{
    display: flex;
    justify-content: flex-end;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.shipment-total-value{
    margin-left: 15px;
}

.shipping-cost-item{
    font-size: 16px;
    font-weight: 500;
}

.rental-wo-fluid{
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(242, 246, 249, 0.35);
    display: none;
}

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

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

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

.close-rental-wo{
    cursor: pointer;
    color: #f44336;
    font-size: 20px;
}

.rental-wo-body{
    padding: 15px;
    padding-top: 0;
}

#rental-wo-type, #rental-wo-unit{
    flex-direction: column;
    margin-bottom: 5px;
}

#rental-wo-type .form-radio-item, #rental-wo-unit .form-radio-item{
    margin-right: 0;
    margin-bottom: 20px;
}

.inventory-stock-detail{
    background: #f1f5f8;
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
}

.inventory-stock-item{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.inventory-stock-item span{
    font-weight: normal;
}

.manual-item-name{
    font-weight: 500;
}

.manual-item-info{
    font-size: 13px;
    margin-top: 3px;
}







/** Misc -- Start **/

.mb-20{
    margin-bottom: 20px;
}

.mb-15{
    margin-bottom: 15px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-30{
    margin-bottom: 30px;
}

.mt-10{
    margin-top: 10px;
}

.mt-20{
    margin-top: 20px;
}

.mt-30{
    margin-top: 30px;
}

.flex-row{
    display: flex;
}

.justify-evenly{
    justify-content: space-evenly;
}

.justify-space-between{
    justify-content: space-between;
}

.link-button{
    display: flex;
    align-items: center;
}

.link-button i{
    margin-left: 20px;
}

.flex-50{
    flex: 1;
    width: calc(50% - 10px);
}

.form-input::placeholder{
    color: #b9c7cd;
}

.button-disabled, .button-loading{
    background: #b9c7cd;
    cursor: default;
}

.form-input-info{
    margin-top: 5px;
    margin-left: 3px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #606771;
}

.form-input-info i{
    color: var(--orange);
    margin-right: 5px;
}

.form-input-hidden{
    display: none;
}

/** Misc -- End **/