:root {
    --main-color: #4FBD60;
    --main-color-active: #41A156;
    --second-color: #F0AD4E;
    --second-color-active: #EC971F;
    --text-color: #30333A;
    --text-color-hover: #23252A;
    --text-small-color: #A3B0B8;
    --swith-color: #6B808C;
    --yellow-color: #F4C500;
    --yellow-color-active: #DBB100;
    --red-color: #DC4F49;
    --red-color-active: #C64741;
    --blue-color: #50B6F2;
    --blue-color-active: #48A3D9;
    --border-thin-color: #E4E9EB;
    --border-big-color: #CED6DA;
    --background-footer: #F6F8F9;
    --background-third: #F1F3F4;
    --page-background: #fafbfb;
    --shift-icon-background: #CFEDD4;
    --shift-background: #EFF9F1;
    --dayoff-icon-background: #FAE3C2;
    --dayoff-background: #FDF6EB;
    --note-icon-background: #CFEBFB;
    --note-background: #EFF8FE;
    --error-background: #fcefee;
    --ready-background: #F4FBF5;
    --ready-hover-background: #E8F6EA;
    --issue-background: #FEFAF4;
    --issue-hover-background: #FEF7EE;
    --disable-background: #FDF4F3;
    --disable-hover-background: #FCEEED;
    --skip-background: #F5F7F8;
    --user-note-background: #EEF9F0;
    --scheduling-icon-hover: #556671;
}
.validation-error {
    border: var(--red-color) 1px solid !important;
    border-radius: 4px;
}
.validation-error input, .validation-error div, .validation-error span {
	border: none !important;
}
.touchscroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position:relative;
    height:100%;
}
.touchscroll body {
    height:100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    position:relative;
}
/*Button*/
.asb-main-btn {
    background-color: #D1D8DB;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    color: #F1F3F4;
    padding: 5px 12px;
    /*text-transform: uppercase;*/
    font-size: 13px;
    line-height: 20px;
    display: inline-block;
}
.asb-main-btn:hover {
    color: #fff;
    text-decoration: none;
}
.asb-main-btn.has-change {
    background: var(--main-color);
    color: #fff;
}
.asb-main-btn.has-change:hover {
    background: var(--main-color-active);
    color: #fff;
    text-decoration: none;
}
.asb-main-btn-small {
    padding: 2px 10px;
}
.asb-secondary-btn {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 4px;
    font-weight: 400;
    color: var(--swith-color);
    padding: 5px 12px;
    font-size: 13px;
    line-height: 18px;
    height: 30px;
}
.asb-secondary-btn i {
    color: var(--main-color);
}
.asb-secondary-btn:hover,
.asb-secondary-btn.has-change {
    text-decoration: none;
    background: var(--main-color);
    color: #fff;
}
.asb-secondary-btn:hover i,
.asb-secondary-btn.has-change i {
    color: #fff;
}
.asb-small-btn {
    background-color: var(--border-thin-color);
    border: none;
    border-radius: 4px;
    font-weight: 400;
    color: var(--swith-color);
    padding: 4px 10px 3px;
    font-size: 12px;
    line-height: 16px;
    height: 24px;
}
.asb-small-btn:hover {
    background-color: var(--border-big-color);
    color: var(--text-color);
    text-decoration: none;
}
.asb-lightbox-btn {
    display: inline-block;
    background-color: var(--main-color);
    border: none;
    border-radius: 4px;
    font-weight: 400;
    color: #FFFFFF;
    padding: 5px 16px;
    font-size: 13px;
    /*text-transform: uppercase;*/
    line-height: 20px;
    height: 30px;
}
.asb-lightbox-btn:hover {
    background-color: var(--main-color-active);
    text-decoration: none;
    color: #fff;
}
.asb-secondary-lightbox-btn {
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--border-thin-color);
    border-radius: 4px;
    font-weight: 400;
    color: var(--swith-color);
    padding: 5px 16px;
    font-size: 13px;
    line-height: 20px;
    height: 30px;
}
.asb-secondary-lightbox-btn:hover {
    text-decoration: none;
    color: var(--swith-color);
    background: var(--border-thin-color);
}
.asb-secondary-lightbox-btn i {
    padding-right: 5px;
}
.asb-cancel-lightbox-btn {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    color: var(--swith-color);
    padding: 5px 16px;
    font-size: 13px;
    line-height: 20px;
    height: 30px;
    margin: 0 10px;
}
.asb-cancel-lightbox-btn:hover {
    text-decoration: none;
    color: var(--swith-color);
    background: var(--border-thin-color);
}
.asb-another-btn {
    background-color: var(--background-third);
    border: none;
    border-radius: 4px;
    color: var(--border-big-color);
    padding: 6px 10px 3px;
    font-size: 12px;
    line-height: 12px;
    display: inline-block;
    height: 24px;
    font-weight: 500;
}
.asb-another-btn.has-change {
    background-color: var(--border-thin-color);
    color: var(--swith-color);
    text-decoration: none;
}
.asb-another-btn:hover {
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--border-big-color);
}
.asb-another-btn i {
    font-size: 11px;
}
.asb-btn-icon {
    font-size: 12px;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    color: var(--text-small-color);
    border-radius: 50%;
}
.asb-btn-icon i {
    font-size: 16px;
}
.asb-btn-sm-icon {
    font-size: 14px;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: var(--text-small-color);
    border-radius: 50%;
    display: inline-block;
}
.asb-btn-sm-icon i {
    font-size: 14px;
}
/* .asb-btn-sm-icon:hover, */
.asb-btn-icon:hover {
    color: var(--swith-color);
    background-color: var(--border-thin-color);
}
.asb-btn-sm-icon:hover {
    color: var(--swith-color);
}
.green-btn-icon {
    font-size: 18px;
    color: var(--main-color);
    display: inline-block;
    padding-right: 12px;
}

.asb-green-btn {
    background: #fff;
    text-decoration: none;
    color: var(--swith-color);
    border-radius: 4px;
    border: 1px solid #48B45F;
    font-size: 12px;
    padding: 2px 8px;
}
.asb-green-btn:hover, .asb-green-btn:hover .i-green {
    background: var(--main-color);
    text-decoration: none;
    color: #fff;
}
.i-green {
    color: var(--main-color);
}
.asb-btn-switch {
    font-size: 11px;
    color: var(--swith-color);
    background: #fff;
    border: 1px solid var(--swith-color);
    padding: 1px 5px;
}
.asb-btn-switch i {
    font-size: 8px;
}
.asb-btn-switch.active {
    background: var(--swith-color);
    color: #fff;
}
.asb-btn-switch:focus {
    outline: none;
    box-shadow: none;
}
.asb-btn-cancel {
    color: var(--text-small-color);
    display: inline-block;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    padding: 5px 10px;
    font-size: 13px;
    /*text-transform: uppercase;*/
    line-height: 20px;
    text-decoration: none;
}
.asb-btn-cancel:hover {
    text-decoration: none;
    color: var(--swith-color);
}
.asb-gray-btn {
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 12px;
    height: 24px;
    color: var(--swith-color);
    display: flex;
    align-items: center;
}
.asb-gray-btn:hover {
    background-color: var(--border-thin-color);
    color: var(--swith-color);
    text-decoration: none;
}
.asb-blue-btn {
    font-size: 12px;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: var(--swith-color);
    border-radius: 50%;
    display: inline-block;
    background: var(--border-thin-color);
    margin-left: 10px;
}
.asb-blue-btn:hover {
    background-color: var(--blue-color);
    color: #fff;
    text-decoration: none;
}
.disable-blue-btn.asb-blue-btn {
    cursor: default;
    color: var(--page-background);
    background: var(--background-third);
}
.disable-blue-btn.asb-blue-btn:hover {
    background: var(--background-third);
    color: var(--page-background)
}
.gray-btn {
    color: var(--text-small-color);
    border-radius: 4px;
    min-height: 30px !important;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 20px;
    border: none;
    display: inline-block;
}
.gray-btn:hover, .gray-btn:focus, .gray-btn:active {
    color: var(--swith-color);
    background-color: var(--border-thin-color);
    text-decoration: none;
}
.gray-btn i {
    font-size: 16px;
}
.asb-btn-size-16 {
    font-size: 16px;
}
.asb-btn-size-16 i {
    font-size: 16px;
}
.asb-red-btn {
    background: var(--red-color);
    color: #fff;
}
.asb-red-btn:hover {
    background: var(--red-color-active);
}
/*Label*/
.modal-detail-label {
    line-height: 1;
    color: var(--swith-color);
    font-weight: 600;
    width: 100%;
    font-size: 12px;
}

/*Input*/
.asb-input-label {
    font-size: 12px;
    line-height: 1;
    color: var(--swith-color);
    font-weight: 600;
    width: 100%;
}
.asb-input {
    height: 40px;
    font-size: 14px;
    border-radius: 4px;
    border-color: var(--border-thin-color);
    padding: 5px 11px;
}
.asb-input::placeholder,
.asb-textarea::placeholder {
    font-weight: 300;
    color: var(--text-small-color);
}
.asb-input:hover {
    border-color: var(--text-small-color);
}
.asb-input:read-only {
    background-color: var(--background-third);
    border: 1px solid var(--border-thin-color);
}
.asb-input:active,
.asb-input:focus,
.asb-textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--main-color-active);
    border-width: 2px;
    padding: 5px 11px;
}
.asb-min-input {
    height: 30px;
}
.modal .asb-modal-dialog .form-control::placeholder {
    color: var(--text-small-color);
}
.asb-textarea {
    font-size: 14px;
    border-radius: 4px;
    border-color: var(--border-thin-color);
    padding: 5px 11px;
}
/*Search input*/
.asb-search-input {
    height: 36px;
    font-size: 14px;
    border-radius: 4px;
    border-color: var(--border-thin-color);
    padding: 5px 11px;
    border-right: none;
}
.asb-search-input:hover {
    border-color: var(--border-thin-color);
}
.asb-search-input::placeholder {
    color: var(--text-small-color);
    font-size: 14px;
    font-weight: 300 !important;
}
.asb-search-input:focus {
    border: 2px solid var(--main-color);
    outline: none;
    box-shadow: none;
}
.input-group .asb-search-input:focus {
    /* border-right: 0; */
}
.asb-search-btn .button-search {
    height: 36px;
    border-top: 1px solid var(--border-thin-color);
    border-bottom: 1px solid var(--border-thin-color);
    border-right: 1px solid var(--border-thin-color);
    border-left: none;
    background: #fff;
    border-left: none;
    color: var(--text-small-color);
    border-radius: 0 4px 4px 0;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    padding: 0 .75rem;
    line-height: 36px;
}
.asb-search-btn .button-search:hover {
    border-color: var(--border-thin-color);
    background: #ffffff;
}
.asb-search-btn .button-search:focus {
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    border-color: var(--border-thin-color) !important;
    color: #ffffff;
}
.asb-search-btn i {
    color: var(--text-small-color);
    border-left: none;
    font-size: 14px;
}
.asb-search-input:focus + .asb-search-btn .button-search {
    outline: 0;
    box-shadow: none !important;
    border: 2px solid var(--main-color) !important;
    background: var(--main-color) !important;
    border-left: none;
}
.asb-search-input:focus + .asb-search-btn i {
    color: #fff;
}
.select-search-input .close-search {
    display: none;
}
/*Tab Panel*/
.wb-right-title {
    line-height: 29px;
    font-size: 16px;
    color: var(--text-color);
}
.nav-tabs {
    padding-top: 4px;
}

/*Tooltip*/
[tooltip]{
    position:relative !important;
    font-size: 12px !important;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.9) transparent transparent transparent;
    z-index: 99;
    opacity:0;
    font-size: 12px !important;
}
[tooltip-position='left']::before{
    left:0%;
    top:50%;
    margin-left:-12px;
    transform:translatey(-50%) rotate(-90deg)
}
[tooltip-position='top']::before{
    left:50%;
}
[tooltip-position='bottom']::before{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
    left:100%;
    top:50%;
    margin-left:1px;
    transform:translatey(-50%) rotate(90deg)
}
.intro-tooltip[tooltip]::after {
    width: 200px ;
    white-space: pre-wrap ;
    height: auto ;
}
[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: var(--text-color);
    text-align: center;
    color: var(--border-thin-color);
    font-size: 11px !important;
    font-weight: 400;
    width: auto;
    white-space: nowrap;
    min-width:60px;
    border-radius: 4px;
    pointer-events: none;
    padding: 1px 10px;
    z-index:99;
    opacity:0;
    height: 24px;
    line-height: 24px;
}
[tooltip-position='left']::after{
    left:0%;
    top:50%;
    margin-left:-8px;
    transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
    left:50%;
}
[tooltip-position='bottom']::after{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
    left:100%;
    top:50%;
    margin-left:8px;
    transform: translateX(0%)   translateY(-50%);
}
[tooltip]:hover::after,[tooltip]:hover::before {
    opacity:1
}

/*Modal*/
.modal-content .close {
    padding: 0;
    margin: 0;
    font-size: 26px;
}
.asb-modal-dialog {
    max-width: 600px;
}
.asb-modal-dialog.modal-sm {
    max-width: 500px;
}
.asb-modal-dialog.modal-xs {
    max-width: 370px;
}
.modal-header {
    height: 50px;
    padding: 12px 1rem;
}
.modal-footer {
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-footer);
    padding: 0 20px;
}

/*Switch*/
.switch-group {
    margin-left: 5px;
}
.switch-item {
    font-size: 11px;
    padding: 0 5px;
    border-radius: 0;
    border: 1px solid var(--swith-color);
    color: var(--swith-color);
    background-color: #fff;
}
.switch-item:hover {
    color: var(--text-color);
    background-color: var(--border-thin-color);
}
.switch-item.active,
.switch-item.active:hover {
    color: #fff;
    background-color: var(--swith-color);
}
.switch-item:focus,
.switch-item:active {
    outline: none;
    box-shadow: none;
}
.switch-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.switch-item:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*Select 2*/
.select2-container {
    width: 100% !important;
}
.select2-container:focus {
    outline: none;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    height: 30px;
    border-color: var(--border-thin-color);
}
.select2-container--default .select2-selection--single.has-big,
.select2-container--default .select2-selection--multiple.has-big{
    height: 40px;
    border-color: var(--border-thin-color);
}
.select2-container--default .select2-selection--single.has-small,
.select2-container--default .select2-selection--multiple.has-small{
    height: 24px;
    border-color: var(--border-thin-color);
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover{
    border-color: var(--text-small-color);
}
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:active,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    outline: none;
    border-color: var(--main-color-active);
    border-width: 2px;
}
.select2-container--default.select2-container--disabled .select2-selection--single:active,
.select2-container--default.select2-container--disabled .select2-selection--single:focus {
    border-width: 1px;
    border-color: var(--border-thin-color);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--main-color);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] svg path,
.select2-container--default .select2-results__option--highlighted[aria-selected] svg circle {
    fill: #fff;
}
.select2-results__option {
    font-size: 14px;
}
.small-select2 .select2-results__option {
    padding: 1px 6px;
}
.select2-container--default .select2-selection--single.has-big .select2-selection__rendered {
    line-height: 40px;
}
.select2-container--default .select2-selection--single.has-big .select2-selection__arrow,
.select2-container--default .select2-selection--multiple.has-big .select2-selection__arrow {
    height: 38px;
}
.select2-container--default .select2-selection--single.has-small .select2-selection__rendered,
.select2-container--default .select2-selection--multiple.has-small .select2-selection__rendered {
    line-height: 22px;
}
.select2-container--default .select2-selection--single.has-small .select2-selection__arrow,
.select2-container--default .select2-selection--multiple.has-small .select2-selection__arrow {
    height: 22px;
}
.big-select2 .select2-results__option {
    font-size: 14px;
    min-height: 40px;
    line-height: 2;
}
.small-select2 .select2-results__option {
    min-height: 24px;
    font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-small-color);
    font-weight: 300;
}
.select2-container--default .select2-selection--single.has-small .select2-selection__rendered,
.select2-container--default .select2-selection--multiple.has-small .select2-selection__rendered {
    font-size: 12px;
}
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
}
.select2-container--default .select2-selection--multiple.has-big {
    min-height: 40px;
    height: auto;
    line-height: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    height: 20px;
    line-height: 20px;
    margin-top: 8px;
    font-size: 12px;
    background: var(--background-footer);
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 0 0 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    align-self: stretch;
    padding: 3px;
    margin-right: 0;
    margin-left: 3px;
    line-height: 14px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
    color: var(--swith-color);
    background: var(--border-big-color);
}
.select2-container--default .select2-selection--multiple.has-big .select2-selection__rendered {
    line-height: 38px;
}
/*Checkbox*/
.checkbox-item {
    position: relative;
}
.asb-check-input {
    position: absolute;
    top: 0;
    visibility: hidden;
}
.asb-check-label {
    color: var(--swith-color);
    font-size: 14px;
    font-weight: normal;
    padding-top: 0;
    cursor: pointer;
    margin-bottom: 0;
}
.asb-check-label:before {
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    font-size: 16px;
    color: #4FBC60;
}
.asb-check-input + .asb-check-label:before {
    content: "\f0c8";
}
.asb-check-input:checked + .asb-check-label:before {
    content: "\f14a";
    font-weight: 900;
}
.asb-check-input:disabled + .asb-check-label:before {
    color: var(--text-small-color);
}
.asb-check-input:disabled + .asb-check-label {
    cursor: auto;
}
.asb-radio-awe-label:before {
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    font-size: 16px;
    color: #4FBC60;
}
.asb-check-input + .asb-radio-awe-label:before {
    content: "\f111";
}
.asb-check-input:checked + .asb-radio-awe-label:before {
    content: "\f192";
    font-weight: 500;
}
.asb-radio-input + .asb-radio-awe-label:before {
    content: "\f111";
}
.asb-radio-input:checked + .asb-radio-awe-label:before {
    content: "\f192";
    font-weight: 500;
}

/*Radio*/
.radio-item {
    position: relative;
}
.asb-radio-input {
    position: absolute;
    top: 0;
    visibility: hidden;
}
.asb-radio-label {
    color: var(--swith-color);
    font-size: 14px;
    font-weight: normal;
    padding-top: 0;
    cursor: pointer;
    margin-bottom: 0;
}
.asb-radio-input + .asb-radio-label:before {
    font-family: "Font Awesome 5 Free";
    content: '\f111';
    font-size: 13px;
    background: transparent;
    border-radius: 100%;
    color: #4FBC60;
    display: inline-block;
    position: relative;
    top: 1px;
    margin-right: 4px;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
}
.asb-radio-input:checked + .asb-radio-label:before {
    content: '\f192';
    box-shadow: inset 0 0 0 4px #fff;
}
.asb-radio-input + .asb-radio-label.red-radio:before {
    color: var(--red-color);
}

/*Text*/
.transform-normal {
    text-transform: none !important;
}

.notifyjs-corner {
    left: 250px !important;
    z-index: 11000 !important;
    bottom: 0 !important;
    top: unset !important;
}
.notifyjs-corner i {
    padding-right: 14px;
}
.notifyjs-corner  .notifyjs-bootstrap-success {
    background-position-y: center;
}
.notifyjs-corner .notifyjs-bootstrap-base span {
    display: flex;
    align-items: baseline;
}
.notifyjs-corner .notifyjs-bootstrap-base span span {
    display: block;
}
.mobile-show {
    display: none !important;
}
.md-show{
    display: none;
}

/*Tabs*/
.asb-nav-tabs.nav-tabs {
    display: flex;
    justify-content: left;
    align-items: flex-end;
    background: var(--background-footer);
    border-bottom: 1px solid rgba(228, 233, 235, 1);
    padding: 0 15px;
}
.asb-nav-tabs.nav-tabs > li {
    position: relative;
    margin-bottom: 0;
}
.asb-nav-tabs.nav-tabs > li > .nav-link:hover {
    color: #48B45F;
}
.asb-nav-tabs.nav-tabs > li > .nav-link.active,
.asb-nav-tabs.nav-tabs > li > .nav-link.active:focus{
    color: var(--main-color) !important ;
    cursor: pointer;
    border-bottom: 3px solid #48B45F;
    font-weight: 500;
    background: #F6F8F9;
    margin-bottom: 0;
}
.asb-nav-tabs.nav-tabs > li > .nav-link,
.asb-nav-tabs.nav-tabs > li > .nav-link:active,
.asb-nav-tabs.nav-tabs > li > .nav-link:focus {
    border: none;
    border-bottom: 3px solid transparent;
    margin: 5px 16px 0 0;
    padding: 5px 12px;
    background: #F6F8F9;
}
.asb-nav-tabs.nav-tabs > li > a:hover {
    color: #555;
    border-top: none;
    border-left: none;
    border-right: none;
}

/*Toggle Checkbox*/
.toggle-item {
    display: flex;
    align-items: center;
}
.toggle-name {
    margin: 0;
    padding-right: 10px;
    color: var(--text-small-color);
}
.label-toggle {
    height: 20px;
    position: relative;
    width: 54px;
    cursor: pointer;
    display: block;
    margin: 0;
}
.checkbox-toggle {
    visibility: hidden;
}
.slider,
.slider-beta {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    width: 60px;
    height: 24px;
}
.slider-small {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    width: 40px;
    height: 17px;
}
.slider:before {
    border-radius: 50%;
    background-color: var(--swith-color);
    bottom: 2px;
    content: "";
    left: 3px;
    position: absolute;
    transition: .4s;
    height: 20px;
    width: 20px;
}
.slider-small:before {
    border-radius: 50%;
    background-color: #fff;
    bottom: 2px;
    content: "";
    left: 3px;
    position: absolute;
    transition: .4s;
    height: 13px;
    width: 13px;
}
/*.checkbox-toggle:checked + .slider {
    background: var(--main-color-active);
}
.checkbox-toggle:checked + .slider:before {
    transform: translateX(34px);
    background: #ffffff;
}*/
.toggle-checkbox:checked + .slider {
    background-color: #66bb6a;
}
.toggle-checkbox:checked + .slider:before {
    transform: translateX(34px);
    background-color: #fff;
}
.toggle-checkbox:checked + .slider-small {
    background-color: #66bb6a;
}
.toggle-checkbox:checked + .slider-small:before {
    transform: translateX(22px);
    background-color: #fff;
}

/*Navigation bar*/
.nav-menu-bar {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(48, 51, 58, 0.2);
    height: 50px;
    border-radius: 4px;
    padding: 5px 16px;
}

/*Calendar*/
.ui-datepicker .ui-datepicker-header {
    border: 0;
    background: #fff;
}
.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default,
.ui-datepicker-calendar .ui-widget-header .ui-state-default {
    border: 0 !important;
    background: none !important;
    text-align: center;
    border-radius: 4px;
}
.ui-datepicker-calendar .ui-state-highlight,
.ui-datepicker-calendar .ui-widget-content .ui-state-highlight,
.ui-datepicker-calendar .ui-widget-header .ui-state-highlight {
    border: 0 !important;
    background: var(--main-color-active) !important;
    color: #fff !important;
}
.ui-widget{
    font-family: 'Open Sans', sans-serif !important;
}
/*Header*/
.tasktracker-mobile-center-header,
.tasktracker-mobile-right-header {
    display: none;
}

/*Select Color Radio*/
.list-default-color,
.list-selected-color {
    display: flex;
    flex-wrap: wrap;
}
.color-radio-item {
    position: relative;
    margin: 0 6px;
}
.asb-color-input {
    display: none;
    position: absolute;
}
.asb-color-label {
    cursor: pointer;
    line-height: 10px;
    margin-bottom: 12px;
}
.asb-color-label:hover {
    box-shadow: 0 0 10px var(--text-small-color);
}
.asb-color-label:before {
    font-family: "Font Awesome 5 Free";
    content: '';
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 24px;
    font-size: 10px;
}
.asb-color-input:checked + .asb-color-label:before {
    content: '\f00c';
    font-weight: 900;
}
.asb-color-input:checked + .asb-color-label {
    box-shadow: 0 0 10px var(--text-small-color);
    border-radius: 2px;
}
.asb-color-label .color-render {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid var(--border-thin-color);
    transition: 0.2s;
}
.asb-color-input:checked + .asb-color-label .color-render {
    border-color: transparent;
}
.asb-color-label:hover {
    border-radius: 2px;
}
.asb-color-label:hover .color-render {
    border-color: transparent;
}
.add-more-color {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    border: 1px dashed var(--border-big-color);
    text-align: center;
    line-height: 24px;
    color: var(--border-big-color);
    margin: 0 6px 0.5rem;
}
.add-more-color:hover {
    border-color: var(--swith-color);
    color: var(--swith-color);
}
.blank-color-item {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid var(--border-thin-color);
    text-align: center;
    line-height: 24px;
    color: var(--border-big-color);
    margin: 0 6px 0.5rem;
}

/*Select Color Modal*/
#selectColorModal .modal-dialog {
    max-width: 350px;
    margin: 0 auto;
}
#selectColorModal .modal-title {
    font-size: 14px;
    font-weight: 600;
}
#selectColorModal .preview-color {
    text-transform: none;
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    margin-left: 10px;
}
#selectColorModal .modal-body {
    padding: 0;
}
#selectColorModal .nav-link {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
#selectColorModal .default-color-content {
    padding: 15px 30px;
    border-bottom: 1px solid var(--border-thin-color);
}
#selectColorModal .selected-color-content {
    padding: 15px 30px;
}
#selectColorModal .select-color-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
#selectColorModal .select-color-define {
    font-size: 10px;
    color: var(--text-small-color);
    font-weight: 400;
    text-transform: none;
    font-size: 10px;
}
#selectColorModal .custom-color-content {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#selectColorModal .custom-color-content .input-group {
    width: 40%;
}
#selectColorModal .custom-color-content .modal-label {
    font-size: 12px;
    width: 100%;
    color: var(--swith-color);
    font-weight: 600;
}
#selectColorModal .custom-color-content .custom-color-input {
    border-radius: 4px !important;
}
#selectColorModal .custom-color-content .custom-color-input:read-only {
    background: transparent;
}
#selectColorModal .custom-color-content .custom-color-preview {
    width: 40%;
}
#selectColorModal .custom-color-content .custom-preview-title {
    margin: 0;
    font-size: 10px;
    color: var(--text-small-color);
    text-transform: uppercase;
}
#selectColorModal .preview-render {
    padding: 3px 5px;
    margin-top: 2px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    width: 80%;
    line-height: 34px;
    height: 40px;
}
#selectColorModal .colorpicker {
    margin-top: 10px;
}
.colorpicker.colorpicker-2x {
    width: 272px;
    height: auto;
    background: #fff;
}

.colorpicker-2x .colorpicker-saturation {
    width: 236px;
    height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
    width: 30px;
    height: 200px;
}

.colorpicker-2x .colorpicker-alpha {
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
.colorpicker-2x .colorpicker-preview {
    display: none;
}

.colorpicker-2x .colorpicker-preview,
.colorpicker-2x .colorpicker-preview div {
    height: 30px;
    font-size: 16px;
    line-height: 160%;
}

.colorpicker-saturation .colorpicker-guide {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    margin: -5px 0 0 -5px;
}

.tasktracker-tab {
    color: var(--swith-color);
}
.tasktracker-tab i {
    padding-right: 5px;
}
.tasktracker-tab.equipment-fiq {
    display: flex;
    align-items: flex-end;
}
.tasktracker-tab.equipment-fiq i {
    transform: rotate(45deg);
    margin-right: 4px;
}
.tasktracker-tab.active {
    color: var(--main-color);
    padding: 16px;
    border-bottom: 3px solid var(--main-color);
}
.tasktracker-tab:hover {
    color: var(--main-color);
    text-decoration: none;
}
.WBheader .center-header.tasktracker-header {
    font-size: 16px;
    border: none;
    background: none;
    border-radius: 0px;
    max-width: none;
}
.WBheader .center-header.tasktracker-header.report-header {
    justify-content: center;
}
.WBheader .center-header.tasktracker-header.report-header .tasktracker-tab {
    margin-left: 30px;
}
.WBheader .center-header.tasktracker-header.report-header .tasktracker-tab:first-child {
    margin-left: 0;
}
.loading-row {
    padding: 40px 0;
    text-align: center;
    font-size: 50px;
}
.modal-content .modal-select-dpm {
    position: absolute;
    top: -10px;
    right: 67px;
    width: 40%;
}
.modal-content .dropdown-divider {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}
.modal-content .select-action {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid var(--border-thin-color);
}

.asb-nav-tabs .nav-link i {
    font-size: 4px;
    position: absolute;
    top: 7px;
    right: 20px;
    color: var(--main-color);
    display: none;
}

.tab-content.row {
    margin: 0;
}
.tab-content .left-tab-column {
    padding: 20px 0;
}
.tab-content .right-tab-column {
    padding: 20px;
}
.tab-content .left-tab-column {
    background: #fff;
    border-right: 1px solid var(--border-thin-color);
}
.tab-content .right-tab-column {
    background: var(--page-background);
}
.tab-content .tab-column-title {
    font-weight: 600;
    padding-left: 30px;
    margin-bottom: 10px;
}
.tab-content .right-tab-column .tab-column-title {
    padding-left: 0;
}

/*Nav show hide on mobile*/
.main-tabs-menu .more-menu {
    display: none;
}

.select-date-row input {
    height: 0;
    background: none;
    border: none;
    color: transparent;
    position: absolute;
    padding: 0;
}

.wo-status-row {
    position: relative;
}
.wo-status-row .status-selected {
    display: inline-flex;
    align-items: center;
}
.wo-status-row .status-selected .current-status {
    min-width: 90px;
    color: #fff;
    border-radius: 4px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 18px;
    display: flex;
    align-items: center;
    /* justify-content: flex-start; */
    justify-content: center;
    border: 1px solid;
    /* padding-left: 4px; */
}
.wo-status-row .status-selected i {
    font-size: 10px;
    width: 14px;
}
.wo-status-row .status-selected.status-not .current-status {
    color: var(--swith-color);
    background: var(--skip-background);
}
.wo-status-row .status-selected.status-not:hover .current-status {
    background: var(--background-footer);
}
.wo-status-row .status-selected.status-progress .current-status {
    color: var(--second-color);
    background: var(--issue-background);
}
.wo-status-row .status-selected.status-progress:hover .current-status {
    background: var(--issue-hover-background);
}
.wo-status-row .status-selected.status-complete .current-status {
    color: var(--main-color);
    background: var(--ready-background);
}
.wo-status-row .status-selected.status-complete:hover .current-status {
    background: var(--ready-hover-background);
}
.wo-status-row .status-selected.status-complete-to .current-status {
    color: var(--main-color);
    background: var(--ready-background);
}
.wo-status-row .status-selected.status-complete-to:hover .current-status {
    background: var(--ready-hover-background);
}
.wo-status-row .status-selected.status-skip .current-status {
    color: var(--swith-color);
    background: var(--skip-background);
}
.wo-status-row .status-selected.status-skip:hover .current-status {
    background: var(--background-footer);
}
.wo-status-row .status-selected.status-delete .current-status {
    color: var(--red-color);
    background: var(--disable-background);
}
.wo-status-row .status-selected.status-delete:hover .current-status {
    background: var(--disable-hover-background);
}
.wo-status-row .status-selected:hover {
    text-decoration: none;
}
.wo-status-row .status-box {
    position: absolute;
    top: 125%;
    left:0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 0px 5px rgba(48, 51, 58, 0.2);
    z-index: 10;
    display: none;
    overflow: hidden;
    max-width: 240px;
    min-width: 125px;
}
.wo-status-row .status-box .status-name {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
.wo-status-row .status-box .status-name i {
    font-size: 12px;
    min-width: 15px;
    margin-right: 4px;
}
.wo-status-row .status-box .status-name.status-not {
    color: var(--swith-color);
}
.wo-status-row .status-box .status-name.status-not:hover,
.wo-status-row .status-box .status-name.status-not.status-active {
    background: var(--background-third);
}
.wo-status-row .status-box .status-name.status-progress {
    color: var(--second-color);
}
.wo-status-row .status-box .status-name.status-progress:hover,
.wo-status-row .status-box .status-name.status-progress.status-active {
    background: var(--issue-background);
}
.wo-status-row .status-box .status-name.status-skip {
    color: var(--swith-color);
}
.wo-status-row .status-box .status-name.status-skip:hover,
.wo-status-row .status-box .status-name.status-skip.status-active {
    background: var(--background-third);
}
.wo-status-row .status-box .status-name.status-complete {
    color: var(--main-color);
}
.wo-status-row .status-box .status-name.status-complete:hover,
.wo-status-row .status-box .status-name.status-complete.status-active {
    background: var(--ready-background);
}
.wo-status-row .status-box .status-name.status-complete-to {
    color: var(--main-color);
}
.wo-status-row .status-box .status-name.status-complete-to:hover {
    background: var(--ready-hover-background);
}
.wo-status-row .status-box .status-name.status-delete {
    color: var(--red-color);
}
.wo-status-row .status-box .status-name.status-delete:hover {
    background: var(--disable-hover-background);
}
.wo-status-row .status-box .status-name:hover {
    text-decoration: none;
}
.green-highlight {
    color: var(--main-color) !important;
}
.red-highlight {
    color: var(--red-color) !important;
}
.sensor-manage {
    display: none;
}

/* priority */
.wo-priority-row {
    position: relative;
    margin-right: 15px;
}
.wo-priority-row .wo-priority-text {
    font-size: 12px;
    color: var(--text-small-color);
    margin-right: 5px;
}
.priority-selected {
    display: flex;
    align-items: center;
    color: #fff;
    border-radius: 4px;
}
.priority-selected .current-priority {
    min-width: 62px;
    color: #fff;
    border-radius: 4px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    padding: 0 10px;
}
.wo-priority-row .priority-selected i {
    font-size: 10px;
    width: 14px;
}
.priority-selected.priority-low .current-priority {
    background: #A3B0B8;
}
.priority-selected.priority-low:hover .current-priority {
    background: #6B808C;
}
.priority-selected.priority-high .current-priority {
    background: #EC971F;
}
.priority-selected.priority-high:hover .current-priority {
    background: #DD8809;
}
.priority-selected.priority-mid .current-priority {
    background: #F4C500;
}
.priority-selected.priority-mid:hover .current-priority {
    background: #EAB807;
}
.priority-selected.priority-urgent .current-priority {
    background: #DC4F49;
}
.priority-selected.priority-urgent:hover .current-priority {
    background: #C64741;
}
.priority-selected:hover {
    text-decoration: none;
}
.priority-box {
    position: absolute;
    top: 125%;
    left: 54px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 0px 5px rgba(48, 51, 58, 0.2);
    z-index: 10;
    display: none;
    overflow: hidden;
    width: 74px;
}
.priority-box .priority-name {
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: #fff;
}
.priority-box .priority-low {
    color: #A3B0B8;
}
.priority-box .priority-low:hover {
    background: #EC971F;
    color: #FFFFFF;
}
.priority-box .priority-high {
    color: #EC971F;
}
.priority-box .priority-high:hover {
    background: #EC971F;
    color: #FFFFFF;
}
.priority-box .priority-mid {
    color: #F4C500;
}
.priority-box .priority-mid:hover {
    background: #F4C500;
    color: #FFFFFF;
}
.priority-box .priority-urgent {
    color: #DC4F49;
}
.priority-box .priority-urgent:hover {
    background: #DC4F49;
    color: #FFFFFF;
}
.priority-box .priority-name.priority-not:hover,
.priority-box .priority-name.priority-not.priority-active {
    background: var(--background-third);
}
.priority-box .priority-name.priority-progress {
    color: var(--second-color);
}
.priority-box .priority-name.priority-progress:hover,
.priority-box .priority-name.priority-progress.priority-active {
    background: var(--issue-background);
}
.priority-box .priority-name.priority-skip {
    color: var(--swith-color);
}
.priority-box .priority-name.priority-skip:hover,
.priority-box .priority-name.priority-skip.priority-active {
    background: var(--background-third);
}
.priority-box .priority-name.priority-complete {
    color: var(--main-color);
}
.priority-box .priority-name.priority-complete:hover,
.priority-box .priority-name.priority-complete.priority-active {
    background: var(--ready-background);
}
.priority-box .priority-name.priority-complete-to {
    color: var(--main-color);
}
.priority-box .priority-name.priority-complete-to:hover {
    background: var(--ready-hover-background);
}
.priority-box .priority-name.priority-delete {
    color: var(--red-color);
}
.priority-box .priority-name.priority-delete:hover {
    background: var(--disable-hover-background);
}
.priority-box .priority-name:hover {
    text-decoration: none;
}

.switch-beta-row {
    padding: 15px;
    border-top: 1px solid var(--swith-color);
    margin-top: auto;
}
.help-center-row {
    padding: 15px;
    border-top: 1px solid var(--swith-color);
    cursor: pointer;
    margin-top: auto;
}
.help-center-row:hover,
.help-center-row:hover .help-center-icon {
    color: var(--main-color) !important;
}
.minimize-sidebar .help-center-row .help-center-text {
    display: none;
}
.minimize-sidebar .help-center-row {
    text-align: center;
}
.help-center-row .help-center-icon {
    font-size: 14px !important;
}
.minimize-sidebar .help-center-row .help-center-icon {
    font-size: 20px !important;
}
.switch-beta-row.mobile-only {
    display: none;
}
.switch-beta-row .switch-item-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    justify-content: center;
}
.switch-beta-row .switch-item-row:last-child {
    margin-bottom: 0;
}
.switch-beta-row .switch-item-row .switch-title {
    font-size: 10px;
    text-transform: uppercase;
    margin-right: auto;
}
.switch-beta-row .switch-item-row .switch-detail {
    font-size: 12px;
    text-decoration: underline;
}
.switch-beta-row .switch-item-row .switch-detail:hover {
    color: var(--main-color);
}
.switch-beta-row .switch-item-row .switch-text {
    margin-right: auto;
    margin-left: auto;
}
.switch-beta-row .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}
.switch-beta-row .switch input.checkbox-slide {
    display:none;
}
.switch-beta-row .slider-beta {
    width: 100%;
    cursor: pointer;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid var(--text-small-color);
    border-radius: 25px;
}
.switch-beta-row .slider-beta:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-small-color);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
.switch-beta-row input.checkbox-slide:checked + .slider-beta {
    background-color: transparent;
    border-color: var(--main-color);
}
.switch-beta-row input.checkbox-slide:checked + .slider-beta:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(20px);
    background-color: var(--main-color);
}

@media screen and (max-width: 767px) {
    .touchscroll body {
        overflow: auto;
    }
    .asb-input {
        font-size: 14px;
    }
    [tooltip]::before,
    [tooltip]::after {
        content: none
    }
    .asb-main-btn {
        padding: 5px 10px;
        font-weight: 400;
    }
    .tasktracker-mobile-center-header .asb-main-btn {
        /*line-height: 14px;*/
    }
    
    .eqm-wo-btn {
        min-width: 190px;
        /* right: unset;
        top: 80px; */
        width: 190px;
    }

    .asb-secondary-btn {
        padding: 5px 10px;
    }
    .asb-btn-icon i,
    .asb-btn-sm-icon i {
        font-size: 12px;
    }
    .tasktracker-mobile-right-header .asb-btn-sm-icon i {
        font-size: 14px;
    }
    .tasktracker-mobile-right-header .asb-btn-sm-icon:last-child {
        margin-left: 8px;
        margin-right: 8px;
    }
    .asb-btn-icon:hover,
    .asb-btn-icon:focus,
    .asb-btn-icon:active,
    .asb-btn-sm-icon:hover,
    .asb-btn-sm-icon:focus,
    .asb-btn-sm-icon:active {
        background: none;
        border-radius: 0;
        text-decoration: none;
    }
    .switch-item {
        padding: 0;
    }
    .mobile-show {
        display: block !important;
    }
    .mobile-hide {
        display: none !important;
    }
    .md-show{
        display: block !important;
    }
    .md-hide{
        display: none !important;
    }
    .select2-container--default .select2-selection--single.has-big {
        /*height: 30px;*/
        font-size: 14px;
    }
    .select2-container--default .select2-selection--multiple.has-big {

    }
    .select2-container--default .select2-selection--single.has-big .select2-selection__rendered {
        /*line-height: 30px;*/
        font-size: 14px;
    }
    .select2-container--default .select2-selection--multiple.has-big .select2-selection__rendered {

    }
    .select2-container--default .select2-selection--single.has-big .select2-selection__arrow,
    .select2-container--default .select2-selection--multiple.has-big .select2-selection__arrow {
        height: 38px;
    }
    .big-select2 .select2-results__option {
        min-height: 40px;
        height: auto;
        font-size: 14px;
    }
    .notifyjs-corner {
        bottom: 55px !important;
        left: 3vw !important;
        margin: 0 !important;
        width: 94vw;
    }
    .notifyjs-corner div {
        margin: 0 !important;
        display: flex;
        align-items: center;
    }
    .notifyjs-corner span {
        word-break: break-word;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    div.ui-datepicker {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
    }
    
    .asb-lightbox-btn,
    .asb-secondary-lightbox-btn,
    .asb-cancel-lightbox-btn{
        font-size: 13px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .modal .modal-footer .asb-lightbox-btn,
    .modal .modal-footer .asb-secondary-lightbox-btn,
    .modal .modal-footer .asb-cancel-lightbox-btn{
        width: 157px;
    }
    .asb-cancel-lightbox-btn:focus {
        background-color: var(--border-thin-color);
        color: var(--swith-color);
    }

    /*Header*/
    .WBheader {
        align-items: center;
        z-index: 1000;
        height: 54px;
        position: relative;
        justify-content: space-between;
        width: 100%;
        padding: 0 0 0 16px;
        background: var(--page-background);
        box-shadow: 0px 1px 2px rgba(48, 51, 58, 0.2);
    }
    .WBheader .select-department-area {
        width: 23%;
    }
    .tasktracker-mobile-center-header {
        display: block;
        padding: 0 10px;
    }
    .tasktracker-mobile-right-header {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding-right: 8px;
    }
    .tasktracker-mobile-right-header .tasktracker-header-btn i {
        font-size: 16px;
    }
    .tasktracker-mobile-right-header .tasktracker-header-btn {
        font-size: 12px;
        color: var(--text-small-color);
        text-decoration: none;
    }
    .tasktracker-mobile-right-header .filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
    }
    .tasktracker-mobile-right-header .filter-btn .total-checked {
        margin: 0;
        padding-left: 5px;
    }

    /*Nav show hide on mobile*/
    .main-tabs-menu {
        position: relative;
    }
    .main-tabs-menu .nav-item-more {
        position: static !important;
        margin-left: auto;
    }
    .main-tabs-menu .more-menu {
        display: block;
        padding: 10px;
        color: var(--text-small-color);
    }
    .main-tabs-menu .tab-menu-more {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 1px);
        background: #fff;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
        list-style: none;
        padding: 0;
        z-index: 9999;
        width: 100%;
    }
    .main-tabs-menu .nav-item.out-of-view {
        display: none;
    }
    .main-tabs-menu .tab-menu-more .nav-item .nav-link {
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0 !important;
        padding: 5px 15px !important;
        border-bottom: 1px solid var(--border-thin-color);
    }

    .modal .modal-dialog-centered:before {
        content: none;
    }
    .modal .modal-header {
        padding-right: 16px !important;
        align-items: center;
        /*justify-content: flex-start;*/
    }
    #equipmentFileModal .modal-footer {
        justify-content: space-between;
    }
    .modal .modal-header .title-content .asb-secondary-lightbox-btn,
    .modal .modal-header .title-content .asb-btn-sm-icon {
        padding-left: 0;
        padding-right: 0;
        margin-left: 24px !important;
        margin-right: 0 !important;
        text-align: right;
        border: 0;
    }
    .modal .modal-header .title-content .asb-secondary-lightbox-btn i {
        padding: 0;
    }
    .modal-content .modal-select-dpm {
        min-width: 270px;
        right: 0;
    }

    .switch-beta-row {
        border-bottom: 1px solid var(--swith-color);
        padding: 0;
        display: flex !important;
    }
    .switch-beta-row.mobile-show.hide {
        display: none !important;
    }
    .switch-beta-row.mobile-only {
        display: block;
    }
    .switch-beta-row .switch-item-row {
        margin: 0;
        height: 58px;
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        align-content: center;
    }
    .switch-beta-row .switch-item-row:last-child {
        padding-left: 0;
    }
    .switch-beta-row .switch-item-row .switch-title {
        color: var(--text-small-color);
        width: 100%;
    }
    .switch-beta-row .switch-item-row .switch-detail {
        padding: 0;
        border: 0;
        color: var(--text-small-color)
    }
    .switch-beta-row .switch-item-row .switch-text {
        font-size: 14px;
        color: var(--text-small-color);
        margin-right: 8px;
    }
    .switch-beta-row .switch {
        width: 56px;
        height: 30px;
    }
    .switch-beta-row .slider-beta {
        height: 30px;
    }
    .switch-beta-row .slider-beta::before {
        height: 22px;
        width: 22px;
    }
    .switch-beta-row input.checkbox-slide:checked + .slider-beta::before {
        transform: translateX(26px);
    }

    .mobilesidebar .all-setting-menu {
        position: absolute;
        background-color: #fff;
        -moz-box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        -webkit-box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        z-index: 999;
        width: 100%;
        bottom: 100%;
        right: 0;
        display: none;
    }
    .mobilesidebar .all-setting-menu .all-setting-item {
        display: block;
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
        /* border-bottom: 1px solid var(--border-thin-color); */
        color: var(--swith-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item:hover,
    .mobilesidebar .all-setting-menu .all-setting-item:focus {
        color: var(--main-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item.active {
        text-decoration: none;
        color: var(--main-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item i,
    .mobilesidebar .all-setting-menu .all-setting-item img {
        text-align: center;
        display: inline-block;
        width: 25px;
        padding-right: 10px;
    }

    .wo-status-row .status-selected .current-status {
        max-width: inherit;
        width: inherit;
        padding-left: 5px;
        justify-content: center;
        margin-left: 10px;
        min-width: 50px;
    }
    .search-input-row {
        position: absolute;
        top: -47px;
        right: 0;
        width: 100vw;
        padding-right: 16px;
        background: #fff;
        z-index: 1000;
    }
    .search-input-row .close-search {
        font-size: 16px;
        z-index: 1000;
        height: 40px;
        line-height: 42px;
        padding: 0 16px;
        color: var(--main-color);
        display: block !important;
    }
    .search-input-row .search-form-filter {
        margin: 0;
        z-index: 1000;
        height: 40px;
        border-radius: 0;
        border: 1px solid var(--main-color);
        padding-left: 10px;
    }
    .search-input-row .search-filter-btn .button-search {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        height: 40px;
        z-index: 1000;
        background: var(--main-color);
        border-color: var(--main-color);
    }
    .search-input-row .search-filter-btn .button-search i {
        color: #fff;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {

    .eqm-wo-btn {
        min-width: 190px;
        /* right: unset;
        top: 93px; */
        width: 190px;
    }

    .green-btn-icon.mobile-show {
        display: block !important;
    }
    .cbp-spmenu-left, .cbp-spmenu-push-toleft {
        left: -100%;
    }

    .touchscroll body {
        overflow: auto;
    }
    .asb-input {
        font-size: 14px;
    }
    [tooltip]::before,
    [tooltip]::after {
        content: none
    }
    .asb-main-btn {
        padding: 5px 10px;
        font-weight: 400;
    }
    .tasktracker-mobile-center-header .asb-main-btn {
        /*line-height: 14px;*/
    }
    .asb-secondary-btn {
        padding: 5px 10px;
    }
    .asb-btn-icon i,
    .asb-btn-sm-icon i {
        font-size: 12px;
    }
    .tasktracker-mobile-right-header .asb-btn-sm-icon i {
        font-size: 16px;
    }
    .asb-btn-icon:hover,
    .asb-btn-icon:focus,
    .asb-btn-icon:active,
    .asb-btn-sm-icon:hover,
    .asb-btn-sm-icon:focus,
    .asb-btn-sm-icon:active {
        background: none;
        border-radius: 0;
        text-decoration: none;
    }
    .switch-item {
        padding: 0;
    }
    .mobile-show {
        display: block !important;
    }
    .mobile-hide {
        display: none;
    }

    .select2-container--default .select2-selection--single.has-big {
        /*height: 30px;*/
        font-size: 14px;
    }
    .select2-container--default .select2-selection--multiple.has-big {

    }
    .select2-container--default .select2-selection--single.has-big .select2-selection__rendered {
        /*line-height: 30px;*/
        font-size: 14px;
    }
    .select2-container--default .select2-selection--multiple.has-big .select2-selection__rendered {

    }
    .select2-container--default .select2-selection--single.has-big .select2-selection__arrow,
    .select2-container--default .select2-selection--multiple.has-big .select2-selection__arrow {
        height: 38px;
    }
    .big-select2 .select2-results__option {
        min-height: 40px;
        height: auto;
        font-size: 14px;
    }
    .notifyjs-corner {
        bottom: 55px !important;
        left: 3vw !important;
        margin: 0 !important;
        width: 94vw;
    }
    .notifyjs-corner div {
        margin: 0 !important;
        display: flex;
        align-items: center;
    }
    .notifyjs-corner span {
        word-break: break-word;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    /* div.ui-datepicker {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
    } */

    .modal a i {
        font-size: 16px;
    }

    .asb-lightbox-btn,
    .asb-secondary-lightbox-btn,
    .asb-cancel-lightbox-btn{
        font-size: 14px;
    }

    /*Header*/
    .WBheader {
        align-items: center;
        z-index: 1000;
        height: 54px;
        position: relative;
        justify-content: space-between;
        width: 100%;
        padding: 0 0 0 16px;
        background: var(--page-background);
        box-shadow: 0px 1px 2px rgba(48, 51, 58, 0.2);
    }
    .WBheader .select-department-area {
        width: 30%;
    }
    .tasktracker-mobile-center-header {
        display: block;
        padding: 0 10px;
    }
    .tasktracker-mobile-right-header {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding-right: 8px;
    }
    .tasktracker-mobile-right-header .tasktracker-header-btn i {
        font-size: 16px;
    }
    .tasktracker-mobile-right-header .tasktracker-header-btn {
        font-size: 12px;
        color: var(--text-small-color);
        text-decoration: none;
    }
    .tasktracker-mobile-right-header .filter-btn {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }
    .tasktracker-mobile-right-header .filter-btn .total-checked {
        margin: 0;
        padding-left: 5px;
    }

    /*Nav show hide on mobile*/
    .main-tabs-menu {
        position: relative;
    }
    .main-tabs-menu .nav-item-more {
        position: static !important;
        margin-left: auto;
    }
    .main-tabs-menu .more-menu {
        display: block;
        padding: 10px;
        color: var(--text-small-color);
    }
    .main-tabs-menu .tab-menu-more {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 1px);
        background: #fff;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
        list-style: none;
        padding: 0;
        z-index: 9999;
        width: 100%;
    }
    .main-tabs-menu .nav-item.out-of-view {
        display: none;
    }
    .main-tabs-menu .tab-menu-more .nav-item .nav-link {
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0 !important;
        padding: 5px 15px !important;
        border-bottom: 1px solid var(--border-thin-color);
    }

    .modal .modal-dialog-centered:before {
        content: none;
    }
    .modal .modal-header {
        padding-right: 16px !important;
        align-items: center;
        justify-content: flex-start;
    }
    #equipmentFileModal .modal-footer {
        justify-content: space-between;
    }
    .modal .modal-header .title-content .asb-secondary-lightbox-btn,
    .modal .modal-header .title-content .asb-btn-sm-icon {
        padding-left: 0;
        padding-right: 0;
        margin-left: 24px !important;
        margin-right: 0 !important;
        text-align: right;
        border: 0;
    }
    .modal .modal-header .title-content .asb-secondary-lightbox-btn i {
        padding: 0;
    }
    .modal-content .modal-select-dpm {
        min-width: 270px;
        right: 0;
    }

    .switch-beta-row {
        border-bottom: 1px solid var(--swith-color);
        padding: 0;
        display: flex !important;
    }
    .switch-beta-row.mobile-show.hide {
        display: none !important;
    }
    .switch-beta-row.mobile-only {
        display: block;
    }
    .switch-beta-row .switch-item-row {
        margin: 0;
        height: 58px;
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        align-content: center;
    }
    .switch-beta-row .switch-item-row:last-child {
        padding-left: 0;
    }
    .switch-beta-row .switch-item-row .switch-title {
        color: var(--text-small-color);
        width: 100%;
    }
    .switch-beta-row .switch-item-row .switch-detail {
        padding: 0;
        border: 0;
        color: var(--text-small-color)
    }
    .switch-beta-row .switch-item-row .switch-text {
        font-size: 14px;
        color: var(--text-small-color);
        margin-right: 8px;
    }
    .switch-beta-row .switch {
        width: 56px;
        height: 30px;
    }
    .switch-beta-row .slider-beta {
        height: 30px;
    }
    .switch-beta-row .slider-beta::before {
        height: 22px;
        width: 22px;
    }
    .switch-beta-row input.checkbox-slide:checked + .slider-beta::before {
        transform: translateX(26px);
    }

    .mobilesidebar .all-setting-menu {
        position: absolute;
        background-color: #fff;
        -moz-box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        -webkit-box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        box-shadow: 0px 2px 20px rgba(51, 51, 51, 0.298039215686275);
        z-index: 999;
        width: 100%;
        bottom: 100%;
        right: 0;
        display: none;
    }
    .mobilesidebar .all-setting-menu .all-setting-item {
        display: block;
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
        /* border-bottom: 1px solid var(--border-thin-color); */
        color: var(--swith-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item:hover,
    .mobilesidebar .all-setting-menu .all-setting-item:focus {
        color: var(--main-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item.active {
        text-decoration: none;
        color: var(--main-color);
    }
    .mobilesidebar .all-setting-menu .all-setting-item i,
    .mobilesidebar .all-setting-menu .all-setting-item img {
        text-align: center;
        display: inline-block;
        width: 25px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 374px) {
    .asb-nav-tabs.nav-tabs > li > .nav-link,
    .asb-nav-tabs.nav-tabs > li > .nav-link:active,
    .asb-nav-tabs.nav-tabs > li > .nav-link:focus {
        margin-right: 15px;
    }
}

.restricted-page {
	padding-top: 10%;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	color: var(--swith-color);
}
.restricted-page .restricted-page-permission {
	font-size: 18px;
	color: var(--text-color);
	font-weight: 600;
}
.restricted-page .restricted-page-message {
	font-size: 14px;
	color: var(--swith-color);
	font-weight: 400;
}
.restricted-page i {
	font-size: 36px;
	color: var(--red-color);
}
.restricted-page .asb-secondary-btn {
	margin-right: 0 !important;
}

.content-title {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    font-weight: 600;
}

.green-color {
    color: var(--main-color);
}
.blue-color {
    color: var(--blue-color);
}
.orange-color {
    color: var(--second-color);
}
.red-color {
    color: var(--red-color);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--text-color);
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--text-small-color);
}
#ui-datepicker-div {
    /* position: absolute !important;
    left: 16px !important;
    right: 0;
    margin: auto;
    width: 238px; */
}

/* Froala editor */
.no_underline {
    text-decoration: none !important;
}
.main_color {
    color: var(--main-color);
}