/*content header*/
.cl-content-header {
    margin-bottom: 40px;
}

.cl-content-header>hr {
    margin-top: 5px;
    border-width: 2px;
}

.cl-header-text {
    color: #ACABAC;
}

.cl-subheader-text {
    color: #ACABAC;
}

.cl-subform-header-text {
    color: #274BA7;
}

.cl-filter-header-text {
    color: #274BA7;
    margin-bottom: 0px;
    margin-top: 10px;
}

.cl-filter-header-rule {
    margin-top: 0px;
}

@media only screen and (max-width: 800px) {

    .cl-header-text,
    .cl-subheader-text {
        margin-left: 10px;
    }
}

.cl-content {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 300;
    width: 95%;
    margin: auto;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #767676 !important;   
}

.bs-placeholder .filter-option-inner-inner {
    color: #767676 !important;
    font-weight: 300 !important;
}
/*subform area*/
.cl-vertical-subforms-container>.cl-subform {
    margin-top: 22px;
}

.cl-subform {}

.cl-subform-body>div.row {
    display: flex;
}

.cl-subform-header {
    margin: 20px 4px 0px 4px;
}

.cl-subform-header>hr {
    margin-top: 8px;
}

.cl-subform-header-text {
    margin-left: 10px !important;
    /* blue text color from GY UI Kit */
    color: #274BA7;
}

.permission-section-header-text {
    margin-left: 20px !important;
    color: #274BA7;
}

.cl-subform-body {}

.cl-subform-body-with-readonly-fields .cl-readonly-field {
    height: 34px;
    display: flex;
    align-items: center;
}

label.input-name-text-align-right,
label.input-name-text-align-right+label,
label.input-name-text-align-right-short,
label.input-name-text-align-right-short+label,
label.input-name-text-align-right-middle,
label.input-name-text-align-right-middle+label,
label.input-name-text-align-right-long,
label.input-name-text-align-right-long+label,
label.input-name-text-align-right-170,
label.input-name-text-align-right-170+label,
label.input-name-text-align-right-160,
label.input-name-text-align-right-160+label,
label.input-name-text-align-right-150,
label.input-name-text-align-right-150+label,
label.input-name-text-align-right-130,
label.input-name-text-align-right-130+label,
label.input-name-text-align-right-125,
label.input-name-text-align-right-125+label,
label.input-name-text-align-right-120,
label.input-name-text-align-right-120+label,
label.input-name-text-align-right-115,
label.input-name-text-align-right-115+label,
label.input-name-text-align-right-85,
label.input-name-text-align-right-85+label,
label.input-name-text-align-right-65,
label.input-name-text-align-right-65+label,
label.input-name-text-align-right-60,
label.input-name-text-align-right-60+label,
label.input-name-text-align-right-36,
label.input-name-text-align-right-36+label,
label.input-name-text-align-right-270,
label.input-name-text-align-right-270+label {
    margin-bottom: 0px;
}

.connecting-label {
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    margin-top: 8px;
}

@media only screen and (max-width: 540px) {
    .panel-body .flex-center {
        display: block;
    }

    .cl-subform .flex-align-center {
        display: block;
    }

    .cl-subform .flex-align-baseline {
        display: block;
    }

    .cl-subform .flex-align-start {
        display: block;
    }

    .cl-subform .input-name-text-align-right,
    .cl-subform .input-name-text-align-right-short,
    .cl-subform .input-name-text-align-right-middle,
    .cl-subform .input-name-text-align-right-long,
    .cl-subform .input-name-text-align-right-170,
    .cl-subform .input-name-text-align-right-160,
    .cl-subform .input-name-text-align-right-150,
    .cl-subform .input-name-text-align-right-130,
    .cl-subform .input-name-text-align-right-125,
    .cl-subform .input-name-text-align-right-120,
    .cl-subform .input-name-text-align-right-115,
    .cl-subform .input-name-text-align-right-85,
    .cl-subform .input-name-text-align-right-60,
    .cl-subform .input-name-text-align-right-65,
    .cl-subform .input-name-text-align-right-36,
    .cl-subform .input-name-text-align-right-270 {
        width: auto;
        text-align: left;
    }

    .cl-subform .cl-checkbox-container,
    .cl-subform .cl-checkbox-container-120 {
        margin-left: 18px;
    }

    .cl-subform .cl-validation-container,
    .cl-subform .cl-validation-container-short,
    .cl-subform .cl-validation-container-36,
    .cl-subform .cl-validation-container-60,
    .cl-subform .cl-validation-container-70,
    .cl-subform .cl-validation-container-85,
    .cl-subform .cl-validation-container-middle,
    .cl-subform .cl-validation-container-long,
    .cl-subform .cl-validation-container-115,
    .cl-subform .cl-validation-container-120,
    .cl-subform .cl-validation-container-130,
    .cl-subform .cl-validation-container-125,
    .cl-subform .cl-validation-container-140,
    .cl-subform .cl-validation-container-150,
    .cl-subform .cl-validation-container-160,
    .cl-subform .cl-validation-container-170,
    .cl-subform .cl-switch-container-160,
    .cl-subform .cl-switch-container-270 {
        margin-left: 0px !important;
    }

    .cl-subform .input-name-hidden {
        display: inline-block;
    }

    .cl-subform .cl-readonly-field {
        display: inline;
    }

    .switch {
        display: flex;
    }

    .connecting-label {
        margin-left: 0px;
        margin-right: 0px;
    }

    .modal-dialog .flex-wrap .connecting-label {
        margin-left: 7px;
        margin-right: 7px;
    }

    .cl-subform .cl-select2-container {
        width: 100% !important;
    }

    .cl-subform .cl-label {
        line-height: normal;
    }

    label.clear-btn-on {
        display: block !important;
        padding-right: 65% !important;
    }

    select.shift-top~span.select2 {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 1250px) and (min-width: 991px) {
    .panel-body .flex-center {
        display: inherit;
    }

    .cl-subform .flex-align-center {
        display: inherit;
    }

    .cl-subform .flex-align-baseline {
        display: inherit;
    }

    .cl-subform .flex-align-start {
        display: inherit;
    }

    .cl-subform .input-name-text-align-right,
    .cl-subform .input-name-text-align-right-short,
    .cl-subform .input-name-text-align-right-middle,
    .cl-subform .input-name-text-align-right-long,
    .cl-subform .input-name-text-align-right-170,
    .cl-subform .input-name-text-align-right-160,
    .cl-subform .input-name-text-align-right-150,
    .cl-subform .input-name-text-align-right-130,
    .cl-subform .input-name-text-align-right-125,
    .cl-subform .input-name-text-align-right-120,
    .cl-subform .input-name-text-align-right-115,
    .cl-subform .input-name-text-align-right-85,
    .cl-subform .input-name-text-align-right-60,
    .cl-subform .input-name-text-align-right-65,
    .cl-subform .input-name-text-align-right-36,
    .cl-subform .input-name-text-align-right-270 {
        width: auto;
    }

    .cl-subform .cl-checkbox-container,
    .cl-subform .cl-checkbox-container-120 {
        margin-left: 18px;
    }

    .cl-subform .cl-validation-container,
    .cl-subform .cl-validation-container-short,
    .cl-subform .cl-validation-container-36,
    .cl-subform .cl-validation-container-60,
    .cl-subform .cl-validation-container-70,
    .cl-subform .cl-validation-container-85,
    .cl-subform .cl-validation-container-middle,
    .cl-subform .cl-validation-container-long,
    .cl-subform .cl-validation-container-115,
    .cl-subform .cl-validation-container-120,
    .cl-subform .cl-validation-container-130,
    .cl-subform .cl-validation-container-125,
    .cl-subform .cl-validation-container-140,
    .cl-subform .cl-validation-container-150,
    .cl-subform .cl-validation-container-160,
    .cl-subform .cl-validation-container-170,
    .cl-subform .cl-validation-container-270 {
        margin-left: 0px;
    }

    .cl-subform .cl-readonly-field {
        display: inline;
    }

    .cl-subform .input-name-hidden {
        display: inline-block;
    }

    .switch {
        display: block;
    }

    .connecting-label {
        margin-left: 0px;
        margin-right: 0px;
    }

    .modal-dialog .flex-wrap label.connecting-label {
        margin-left: 7px;
        margin-right: 7px;
    }

    .modal-dialog label.connecting-label {
        margin-top: 7px !important;
    }

    .cl-subform .cl-select2-container {
        width: 100% !important;
    }

    .cl-subform .cl-label {
        height: 34px;
        margin-top: 20px;
    }

    label.clear-btn-on {
        display: block !important;
        padding-right: 10% !important;
    }

    select.shift-top~span.select2 {
        margin-top: 15px;
    }

    .display-block-medium label.input-name-text-align-right-short {
        width: auto !important;
    }
}

/*search panel*/
.shift-bottom {
    margin-bottom: 15px;
}

.th-auto {
    width: auto !important;
}

.min-th-360 {
    min-width: 360px;
}

.min-th-280 {
    min-width: 280px;
}

.min-th-260 {
    min-width: 260px;
}

.min-th-200 {
    min-width: 200px;
}

.min-th-140 {
    min-width: 140px;
}

.min-th-110 {
    min-width: 110px;
}

.min-lbl-342 {
    min-width: 342px !important;
}

.min-lbl-260 {
    min-width: 260px !important;
}

.min-lbl-200 {
    min-width: 200px !important;
}

.min-lbl-150 {
    min-width: 150px !important;
}

.min-lbl-110 {
    min-width: 110px !important;
}

.min-lbl-100 {
    min-width: 100px !important;
}

.min-col-500 {
    min-width: 500px !important;
}

.lbl-260 {
    width: 260px !important;
}

.one-control-per-line {
    max-width: 760px !important;
}

.two-controls-per-line {
    max-width: 380px !important;
}

.three-controls-per-line {
    max-width: 500px !important;
}

@media only screen and (max-width: 1500px) {
    .two-controls-per-line {
        width: 100% !important;
    }
}

.v-align-top {
    vertical-align: top;
}

.standart-font-weight {
    font-weight: 400;
}

.font-weight-bold {
    font-weight: bold;
}

.cl-readonly-field {
    font-weight: 400 !important;
    color: #222222 !important;
}

label.cl-readonly-field {
    margin-bottom: 0px;
}

.cl-align-readonly-field {
    margin-top: 6px;
}

.input-name-text-align-right {
    width: 110px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-top {
    align-self: flex-start;
    margin-top: 8px;
}

.input-name-text-align-right-middle {
    width: 142px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-short {
    text-align: right;
    margin-right: 8px;
}

@media screen and (max-width: 540px) {
    div.dataTables_wrapper div.dataTables_length {
        text-align: left !important;
        padding-left: 10px !important;
    }

    div.dataTables_wrapper div.dataTables_filter {
        text-align: left !important;
        padding-left: 10px !important;
    }
}

.input-name-text-align-right-long {
    width: 200px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-270 {
    width: 270px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-170 {
    width: 170px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-160 {
    width: 160px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-150 {
    width: 150px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-130 {
    width: 130px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-125 {
    width: 125px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-120 {
    width: 120px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-115 {
    width: 115px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-85 {
    width: 85px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-65 {
    width: 65px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-60 {
    width: 60px;
    text-align: right;
    margin-right: 8px;
}

.input-name-text-align-right-36 {
    width: 36px;
    text-align: right;
    margin-right: 8px;
}

label.input-name-text-align-right+div,
label.input-name-text-align-right+input,
label.input-name-text-align-right+textarea,
label.input-name-text-align-right-short+div,
label.input-name-text-align-right-short+input,
label.input-name-text-align-right-short+textarea,
label.input-name-text-align-right-middle+div,
label.input-name-text-align-right-middle+input,
label.input-name-text-align-right-middle+textarea,
label.input-name-text-align-right-long+div,
label.input-name-text-align-right-long+input,
label.input-name-text-align-right-long+textarea,
label.input-name-text-align-right-long+select,
label.input-name-text-align-right-270+div,
label.input-name-text-align-right-270+input,
label.input-name-text-align-right-270+textarea,
label.input-name-text-align-right-170+div,
label.input-name-text-align-right-170+input,
label.input-name-text-align-right-170+textarea,
label.input-name-text-align-right-160+div,
label.input-name-text-align-right-160+input,
label.input-name-text-align-right-160+textarea,
label.input-name-text-align-right-150+div,
label.input-name-text-align-right-150+input,
label.input-name-text-align-right-150+textarea,
label.input-name-text-align-right-130+div,
label.input-name-text-align-right-130+input,
label.input-name-text-align-right-130+textarea,
label.input-name-text-align-right-125+div,
label.input-name-text-align-right-125+input,
label.input-name-text-align-right-125+textarea,
label.input-name-text-align-right-120+div,
label.input-name-text-align-right-120+input,
label.input-name-text-align-right-120+textarea,
label.input-name-text-align-right-115+div,
label.input-name-text-align-right-115+input,
label.input-name-text-align-right-115+textarea,
label.input-name-text-align-right-85+div,
label.input-name-text-align-right-85+input,
label.input-name-text-align-right-85+textarea,
label.input-name-text-align-right-60+div,
label.input-name-text-align-right-60+input,
label.input-name-text-align-right-60+textarea,
label.input-name-text-align-right-65+div,
label.input-name-text-align-right-65+input,
label.input-name-text-align-right-65+textarea,
label.input-name-text-align-right-36+div,
label.input-name-text-align-right-36+input,
label.input-name-text-align-right-36+textarea,
label.cl-readonly-field {
    flex: 1;
}

.cl-checkbox-container {
    margin-left: 98px;
}

.cl-checkbox-container-120 {
    margin-left: 107px;
}

.inline {
    display: inline;
    float: left;
    margin-right: 40px;
}

/*<select> style fix*/
.dropdown-menu {
    padding-left: 0px !important;
    bottom: auto !important;
}

.bootstrap-select>.dropdown-toggle {
    height: 34px;
}

select[disabled='disabled']+.dropdown-toggle {
    background-color: #eee;
    opacity: inherit;
}

select[disabled='disabled']+.dropdown-toggle:hover {
    background-color: #eee;
    opacity: inherit;
}

/*hide overflow text in bootstrap selects*/
.dropdown-toggle .filter-option-inner-inner {
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    font-size: 14px;
}

/*cloud modal*/
.cl-modal-header {
    padding: 9px 15px !important;
    margin: 0 4px 0 4px;
    border-width: 2px;
    border-color: #eee;
}

.cl-modal-header-text {
    color: #274BA7;
    margin-top: 10px;
}

.cl-modal-body {
    margin: 0 4px 0 4px;
}

.cl-modal-col-next {
    padding-left: 0px !important;
}

.cl-modal-footer {
    padding: 19px 15px;
    margin: 0 4px 0 4px;
    text-align: right;
    border-top: 1px solid #ccc;
}

.flex-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

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

.flex-align-baseline {
    display: flex;
    align-items: baseline;
}

.flex-align-start {
    display: flex;
    align-items: flex-start;
}

.cl-validation-container {
    margin-left: 118px;
    display: block;
}

.cl-validation-container-short {
    margin-left: 48px;
    display: block;
}

.cl-validation-container-85 {
    margin-left: 93px;
    display: block;
}

.cl-validation-container-70 {
    margin-left: 73px;
    display: block;
}

.cl-validation-container-60 {
    margin-left: 68px;
    display: block;
}

.cl-validation-container-36 {
    margin-left: 44px;
    display: block;
}

.cl-validation-container-middle {
    margin-left: 148px;
    display: block;
}

.cl-switch-container-160 {
    margin-left: 160px;
}

.cl-validation-container-270 {
    margin-left: 278px;
    display: block;
}

.cl-validation-container-long {
    margin-left: 208px;
    display: block;
}

.cl-validation-container-200 {
    margin-left: 200px;
    display: block;
}

.cl-validation-container-180 {
    margin-left: 180px;
    display: block;
}

.cl-validation-container-170 {
    margin-left: 170px;
    display: block;
}

.cl-validation-container-160 {
    margin-left: 160px;
    display: block;
}

.cl-validation-container-150 {
    margin-left: 158px;
    display: block;
}

.cl-validation-container-140 {
    margin-left: 140px;
    display: block;
}

.cl-validation-container-125 {
    margin-left: 133px;
    display: block;
}

.cl-validation-container-120 {
    margin-left: 128px;
    display: block;
}

.cl-validation-container-130 {
    margin-left: 138px;
    display: block;
}

.cl-validation-container-115 {
    margin-left: 123px;
    display: block;
}

.cl-textarea {
    min-height: 50px;
    resize: none;
    width: 100%;
}

@media screen and (max-width: 540px) {
    .lbl-cl-textarea {
        display: flex;
        margin-top: 10px;
    }
}

@media screen and (min-width: 540px) {
    .lbl-cl-textarea {
        display: inline;
        margin-bottom: 50px !important;
    }
}

.no-arrow {
    -moz-appearance: textfield;
}

.no-arrow::-webkit-inner-spin-button {
    display: none;
}

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lbl-150 {
    width: 150px !important;
}

.lbl-110 {
    width: 110px !important;
}

.lbl-100 {
    width: 100px !important;
}

.lbl-80 {
    width: 80px !important;
}

.lbl-70 {
    width: 70px !important;
}

.lbl-60 {
    width: 60px !important;
}

@media screen and (max-width: 1200px) {
    .lbl-80 {
        width: 106px !important;
    }
}

.modal-dialog label {
    color: #222222;
    font-size: 14px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    font-family: 'Barlow',sans-serif;
    font-weight: 600;
}

.modal-dialog label.input-group-addon {
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 400;
}

.modal-dialog label.connecting-label {
    margin-top: 7px;
    margin-bottom: 7px;
}

.calendar-icon {
    width: 40px !important;
    height: 34px;
}

label.input-group-addon {
    margin-bottom: 0px;
}

/*cloud buttons*/
.cl-modal-button {
    font-family: 'Barlow',sans-serif !important;
    padding: 6px 40px 6px 40px !important;
    color: #222222;
    background-color: #fff;
    border-color: #ccc !important;
    font-weight: 400;
}

.cl-modal-button:focus {
    box-shadow: 0 6px 12px #7997e5d1 !important;
}

.cl-modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0;
}

.th-100 {
    width: 100px !important;
}

.th-110 {
    width: 110px !important;
}

.th-120 {
    width: 120px !important;
}

.th-130 {
    width: 130px !important;
}

.th-80 {
    width: 80px !important;
}

.th-60 {
    width: 60px !important;
}

/*overrides default min datatable width.
  desired width sets in *-button-area-data-table
*/
.th-datatable-buttons {
    width: 1px !important;
    padding-left: 0px;
    padding-right: 0px;
}

.form-control {
    color: #000 !important;
}

form label>.form-control {
    font-weight: 500;
}

.text-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-overflow-break-word {
    overflow-wrap: break-word;
    word-break: break-word;
    /*for ie 11;*/
    white-space: pre-wrap;
    word-break: break-all;
}

/*datatable styles*/
table>thead th {
    text-align: center !important;
}

table>thead th.sorting_disabled {
    padding-right: 5px !important;
}

.same-width-13-columns {
    width: 7.7% !important;
}

.same-width-15-columns {
    width: 6.66% !important;
}

.six-button-area-data-table {
    width: 180px;
    margin: auto;
    display: flex;
    justify-content: center;
    min-height: 30px;
}

@media only screen and (max-width: 1350px) {
    .six-button-area-data-table {
        width: 100px;
        display: inline-block;
        margin-top: 5px;
        min-height: 30px;
    }
}

.four-button-area-data-table {
    width: 128px;
    margin: auto;
    display: flex;
    justify-content: center;
    min-height: 30px;
}

@media only screen and (max-width: 991px) {
    .four-button-area-data-table {
        width: 60px;
        display: inline-block;
        margin-top: 5px;
        min-height: 30px;
    }
}

@media only screen and (max-width: 991px) and (min-width: 541px) {
    label.clear-btn-on {
        padding-right: 55% !important;
    }
}

.three-button-area-data-table {
    width: 92px;
    margin: auto;
    display: flex;
    justify-content: center;
    min-height: 30px;
}

.two-button-area-data-table {
    width: 60px;
    margin: auto;
    display: flex;
    justify-content: center;
    min-height: 30px;
}

.one-button-area-data-table {
    width: 42px;
    margin: auto;
    display: flex;
    justify-content: center;
    min-height: 30px;
}

.footer-datatable-button {
    margin-top: 10px;
    margin-bottom: 10px !important;
}

.empty-datatable-row {
    height: 25px;
}

.datatable-gray {
    background-color: #f9f9f9;
}

.empty-datatable-row>td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

td.colspan-full-datatable-row {
    border-right: 0px !important;
}

.th-210 {
    width: 210px !important;
}

.big-column {
    width: 210px !important;
}

@media only screen and (max-width: 1520px) {
    .big-column {
        width: 150px !important;
    }
}

/*datatable dropdown fix*/
.dataTables_wrapper .filter-option-inner {
    padding-right: 12px !important;
}

.dataTables_wrapper .filter-option {
    padding-right: inherit !important;
    padding-left: inherit !important;
    padding-top: inherit !important;
    padding-bottom: inherit !important;
}

.dataTables_length .show {
    display: inline-block !important;
}

.dataTables_length * {
    font-size: 14px !important;
}

.dataTables_filter * {
    font-size: 14px !important;
}

.dataTables_length button.dropdown-toggle {
    height: 34px;
}

/*datatable processing*/
.table-container:not(.no-animation) .dataTables_wrapper .dataTables_processing {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 6px 0;
    font-size: 1.2em;
    background-color: rgba(221, 221, 221, .5);
}

/*datatable processing dots animation*/
.table-container:not(.no-animation) .dataTables_processing:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }

    40% {
        color: black;
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }

    60% {
        text-shadow: .25em 0 0 black, .5em 0 0 rgba(0, 0, 0, 0);
    }

    80%,
    100% {
        text-shadow: .25em 0 0 black, .5em 0 0 black;
    }
}

.dropdown-open-show {
    float: left !important;
    display: inline-block;
    margin-left: 0;
}

/*drag and drop*/
.cl-drag-and-drop-header {
    display: flex;
    margin: 7px;
}

.cl-drag-and-drop-header-select-container {
    flex: 1;
    margin-right: 14px;
    overflow: hidden;
}

.cl-drag-and-drop-list {
    list-style: none;
    padding-left: 0px;
    margin-top: 14px;
    min-height: 376px;
}

.cl-drag-and-drop-list>li {
    min-height: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding-right: 14px;
}

/*Alignment drag and drop elements for IE11*/
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    .cl-drag-and-drop-list div,
    .cl-drag-and-drop-list i,
    .cl-drag-and-drop-list>li label {
        margin-top: 10px !important;
    }
}

.cl-drag-and-drop-list>li>.material-icons:first-of-type {
    color: #929292;
    margin-right: 20px;
}

.cl-drag-and-drop-list>li>.fa-grip-vertical:first-of-type {
    color: #707070;
    margin-right: 20px;
    margin-left: 7px;
    font-size: 18px;
    -webkit-text-stroke: 0.5px #fff;
}

.cl-panel-shadow {
    box-shadow: 0px 0px 6px 1px #CACACA;
    margin: 7px;
}

.cl-label {
    line-height: 34px;
}

.ml-auto {
    margin-left: auto;
}

.cl-icon-button {
    display: flex !important;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.cl-icon-tooltip {
    display: flex !important;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
    padding: 5px;
}

.cl-gy-button {
    padding: 7px 30px !important;
    line-height: 1.428571429 !important;
}

.glyphicon-search {
    color: #222222;
    font-size: 22px;
}

.cl-icon-tooltip .fa-user-clock,
.cl-icon-button .fa-trash-alt,
.cl-icon-button .fa-pencil-alt,
.cl-icon-button .fa-info,
.cl-icon-button .fa-copy,
.cl-icon-button .fa-eye,
.cl-icon-button .fa-plus,
.cl-icon-button .fa-print,
.cl-icon-button .fa-file-image,
.cl-icon-button .fa-file-alt,
.cl-icon-button .fa-lock,
.cl-icon-button .fa-unlock,
.cl-icon-button .fa-sync,
.cl-icon-button .fa-file-pdf,
.cl-icon-button .fa-map-marker-alt,
.cl-icon-button .fa-play {
    color: #222222;
}

.cl-icon-button-inverse .fa-inverse {
    color: #fff;
}

.cl-icon-button .fa-trash-alt:hover {
    color: #D5021B;
}

.cl-icon-button .fa-stop {
    color: #D5021B;
}

.cl-icon-tooltip .fa-user-clock:hover,
.cl-icon-button .fa-pencil-alt:hover,
.cl-icon-button .fa-info:hover,
.cl-icon-button .fa-copy:hover,
.cl-icon-button .fa-eye:hover,
.cl-icon-button .fa-plus:hover,
.cl-icon-button .fa-print:hover,
.cl-icon-button .fa-file-image:hover,
.cl-icon-button .fa-file-alt:hover,
.cl-icon-button .fa-lock:hover,
.cl-icon-button .fa-unlock:hover,
.cl-icon-button .fa-sync:hover,
.cl-icon-button .fa-file-pdf:hover,
.cl-icon-button .fa-map-marker-alt:hover,
.cl-icon-button .fa-play:hover {
    color: #0066dd;
}

.cl-icon-button-inverse .fa-inverse:hover {
    color: #fd0;
}

.cl-icon-button .badge {
    position: relative;
    color: #222222;
    background-color: #fff;
    padding: 3px 4px;
    font-size: 10px;
}

a.cl-icon-button:focus,
a.cl-icon-button:hover,
a.cl-icon-tooltip {
    text-decoration: none !important;
}

.draggable-item {
    cursor: grab;
}

.undraggable-item {
    background-color: lightgray;
    box-shadow: 0px 0px 0px 0px;
}

.undraggable-item>div {
    margin-left: 38px;
}


/*Color for selected row*/
.cl-table-row.selected {
    background-color: #ccd7eb !important;
}

.cl-table-tooltip-cell:hover {
    color: blue;
    cursor: pointer;
}

.btn.gy.gy-btn-secondary {
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

select.cl-select-form-control+button.dropdown-toggle {
    height: 34px;
    padding: 6px 12px 6px 12px;
}

.bootstrap-select.cl-select-form-control>.dropdown-menu {
    min-width: 250px !important;
    width: 100%;
}

/*Make caret for select1 the same as for select2*/
.bootstrap-select.cl-select-form-control .caret,
.bootstrap-select.cl-select-form-control.dropup .caret {
    border-top: 5px dashed !important;
    border-bottom: 0 !important;
    color: #767676 !important;
}

.bootstrap-select.cl-select-form-control.show .caret {
    border-bottom: 5px dashed !important;
    border-top: 0 !important;
    color: #767676 !important;
}

/*Add red borders for select and select2*/
select.input-validation-error~button.dropdown-toggle,
.input-validation-error+.select2 .select2-selection {
    border: 1px solid #b94a48;
}

input.field-validation-error {
    border: 1px solid #b94a48;
}

.cl-select2-container {
    flex: 1;
    font-size: 16px;
    width: 0 !important;
}

.cl-select2-container.select2-container--default .select2-dropdown {
    min-width: 250px;
}

.cl-select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 6px 12px 6px 12px;
    line-height: inherit;
}

.cl-select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0px 10px;
}

.cl-select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search__field::placeholder {
    color: #767676 !important;
}

/* Internet Explorer */
.cl-select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search__field:-ms-input-placeholder {
    color: #767676 !important;
}

.cl-select2-container.select2-container--default .select2-selection__rendered option {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

select.cl-select-form-control+span.cl-select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #222222;
    padding: 6px 28px 6px 12px;
    margin-right: 10px;
}

.cl-select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 0px;
    right: 7px;
    width: 20px;
}

.cl-select2-container .select2-search__field {
    width: 100% !important;
}

.cl-picker-margin-right {
    margin-right: 8px;
}

.cl-no-horizontal-gutters {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.cl-no-left-gutters {
    padding-left: 0px !important;
}

.cl-no-right-gutters {
    padding-right: 0px !important;
}

/*
    Return Uppercase for button texts.
    Used to overlap goodyear style "body .gy-btn-secondary"
    which set text-transform:none
*/
.gy-btn-secondary {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400;
    text-transform: uppercase !important;
}

/*
    Empty CSS class selector for fields with the decimal data type.
    Used as a marker for a quick search during form processing with JS.
*/
cl-decimal-data-type-flag {}

.select2-selection--multiple li {
    overflow-wrap: break-word;
    word-break: break-word;
    /*for ie 11*/
    white-space: pre-wrap;
    word-break: break-all;
}

.d-flex {
    display: flex;
}

.d-block {
    display: block !important;
}

/*
    Don't use "!important" not to break ".show()" and ".hide()" methods
*/
.d-none {
    display: none;
}

.cl-vertical-buttons-container>button {
    margin-top: 6px;
    display: block;
}

.cl-vertical-buttons-container>button:first-child {
    margin-top: 0px;
}

.btn-narrow {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.cl-btn {
    border: 1px solid #D2D2D2 !important;
    background-color: white;
}

.d-inline-block {
    display: inline-block;
}

.d-inline {
    display: inline;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.flex-fit {
    display: flex;
    flex: 1;
}

a.cl-link-chevron-left {
    text-transform: none;
    text-decoration: none !important;
    position: relative;
    margin-left: .8em !important;
    padding: 0 0 1px !important;
    line-height: 1;
}

a.cl-link-chevron-left:before {
    content: "\e622";
    display: inline-block;
    padding: 0 0 1px !important;
    margin: 0 !important;
    font-size: .8em;
    line-height: 1.25;
    position: absolute;
    left: -1em;
    width: 0;
    overflow: visible;
    text-decoration: none !important;
    font-family: icomoon;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a.cl-link-chevron-left:hover {
    padding-bottom: 0 !important;
    border-bottom: 1px solid;
}

a.cl-link-chevron-left:hover:before {
    text-decoration: none !important;
    border-bottom: none;
    padding: 0 !important;
}

/*Switcher style next to the search buttons*/
.cl-footer-input {
    margin-top: 0px;
    margin-left: 60px;
    display: inline-flex;
}

.cl-footer-input>label {
    margin-bottom: 0px;
}

@media (max-width: 800px) {
    .cl-footer-input {
        margin-top: 15px;
        margin-left: 0px;
        display: flex;
    }
}

/*Timer bar*/
.progressbar {
    width: 100%;
}

.progressbar .inner {
    margin-top: 15px;
    margin-bottom: -1px;
    height: 2px;
    animation: progressbar-countdown;
    /* Placeholder, this will be updated using javascript */
    animation-duration: 40s;
    /* We stop in the end */
    animation-iteration-count: 1;
    /* Stay on pause when the animation is finished finished */
    animation-fill-mode: forwards;
    /* We start paused, we start the animation using javascript */
    animation-play-state: paused;
    /* We want a linear animation, ease-out is standard */
    animation-timing-function: linear;
}

@keyframes progressbar-countdown {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

.alert-success .progressbar .inner {
    background: #155724;
}

.alert-info .progressbar .inner {
    background: #0c5460;
}

.alert-warning .progressbar .inner {
    background: #856404;
}

.alert-danger .progressbar .inner {
    background: #721c24;
}

.alert-container .alert {
    padding: 20px 35px 0px 0px;
    opacity: 0.9;
    z-index: 1;
}

.alert-container .alert strong,
.alert-container .alert p {
    padding-left: 15px;
}

.alert-container .alert strong {
    display: block;
}

.alert-container .alert .progressbar {
    margin-left: -1px;
}


/*Class to set Light Red background color*/
.redClass {
    background-color: #FF9694 !important;
}

.datepicker.datepicker-dropdown {
    position: absolute;
    z-index: 9999;
    left: 115px !important;
    top: 85px !important;
}

/*Add shadow to controls*/
.wrapper .form-control,
.wrapper button:not(.close, .dropdown-toggle),
.wrapper .select2-selection,
.wrapper .calendar-icon,
.wrapper .paginate_button>a {
    -webkit-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15) !important;
    -moz-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.15) !important;
}

/*
    YK
    US #46906
    Set font size for ALL inputs to 14px
*/
input,
input::placeholder,
textarea,
textarea::placeholder,
.select2-selection__rendered,
.select2-results,
.bootstrap-select .dropdown-menu li a span.text {
    font-size: 14px !important;    
}

/*
        YK
        US #46906
        Set min width for date inputs that allow to see the date
    */
input[placeholder="YYYY-MM-DD"],
input[placeholder="____-__-__"] {
    min-width: 115px !important;
}

/*
    IM
    Set thick outline with width = 3px
*/
.thickBorderClass {
    outline: thick solid;
    outline-width: 3px;
}

/*
    IM
    Set thin outline with width = 1px
*/
.thinBorderClass {
    outline: thin solid;
    outline-width: 1px;
}

/*
    YA
    02/20/2022
    Align buttons with modal (WO details page, RetSpec Header details page)
 */
.dropdown-menu>li>a {
    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
}

button[onclick*="GroupCreation"]~ul.dropdown-menu {
    top: 37px !important;
    transform: initial !important;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    button[onclick*="GroupCreation"]~ul.dropdown-menu {
        top: 0 !important;
        transform: translate3d(0px, 37px, 0px) !important;
    }

    label.clear-btn-on {
        overflow: hidden;
        padding-right: 0%;
        text-overflow: ellipsis;
        margin-right: 10%;
    }
}

/*Dashboard styles*/
.cl-dashboard {
    padding: 0px;
}

.cl-dashboard .row {
    display: flex;
    flex-wrap: wrap;
}

.cl-dashboard .chart-container {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-table-container:not(.no-gutters) {
    padding: 15px;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-table {
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
}

.dashboard-table-caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
}
    .dashboard-table-container .dashboard-table-caption,
    .dashboard-table caption {
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;
    }

/* Customize scroll for dashboard datatables */
.dashboard-table-container .dataTables_scrollBody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px silver;
    background-color: #F5F5F5;
    border-radius: 70px;
}

.dashboard-table-container .dataTables_scrollBody::-webkit-scrollbar {
    width: 3px;
    background-color: #F5F5F5;
}

.dashboard-table-container .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 3px;
}

label.table-caption {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: normal;
    padding: 8px 0px;
}

/* Limit progressbar-container container and background according to chart size */
.progressbar-container {
    max-height: 200px !important;
}

.progressbar-container .chart-container {
    height: 80px !important;
    display: block !important;
}

.table-caption.colored-caption,
.dashboard-table caption.colored-caption {
    background-color: #3656a5;
    color: #ffffff;
}

.dashboard-table th {
    font-weight: bold;
    text-align: left !important;
}

.dashboard-table .r-border {
    border-right: 1px solid gray !important;
}

.dashboard-table td,
.dashboard-table th {
    padding: 5px;
    border-bottom: none;
    height: 20px;
}

.dashboard-table thead tr:not(.no-border) th {
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.dashboard-table-footer {
    border-top: 1px solid gray;
}

.dashboard-table .highcharts-tooltip>span {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

/*YA #49147
04/01/2022*/
label.clear-btn-on {
    overflow: hidden;
    padding-right: 7%;
    text-overflow: ellipsis;
}

/*
    YA
    #49090
    04/19/2022
    Correct fields width for small screens at Add/Edit Retread Specification pages
 */
@media only screen and (max-width: 991px) {
    #retreadInformationBlock div.flex-align-center {
        display: block;
    }

    #retreadInformationBlock .cl-validation-container-long {
        margin-left: auto;
    }

    #retreadInformationBlock label {
        text-align: left;
    }
}

/*Correct fields width and align for small screens at Add/Edit Tire modals*/
@media only screen and (max-width: 541px) {
    label[for$=DotPlantCode]+div>div {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 991px) {
    label[for$=DotPlantCode]+div {
        display: block;
    }

    label[for$=DotPlantCode]+div>div {
        margin-right: auto !important;
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 1250px) and (min-width: 991px) {
    label[for$=DotPlantCode]+div>div {
        margin-right: auto !important;
        padding-bottom: 45px;
    }
}

/*Reports search filters in IE11*/
@media all and (-ms-high-contrast: none) and (max-width: 990px),
(-ms-high-contrast: active) and (max-width: 990px) {
    .display-block-narrow {
        display: block;
    }
}

/*Dealer settings partial*/
@media only screen and (max-width: 700px) {
    label.input-name-text-align-right-270+input {
        flex: auto;
    }

    .cl-validation-container-270 {
        margin-left: 140px;
    }
}

/*State/ZIP section*/
@media only screen and (max-width: 1700px) {
    .display-block-medium {
        display: block !important;
    }

    .display-block-medium label.input-name-text-align-right-short {
        width: 115px;
    }

    .display-block-medium div.cl-validation-container-short {
        margin-left: 118px;
    }
}

/*
    YK
    09/29/2022
    Adapt validation container for ZIP
*/
@media only screen and (max-width: 1250px) and (min-width: 991px) {
    .display-block-medium div.cl-validation-container-short {
        margin-left: 0px !important;
    }
}

/*
    YA
    #49464
    04/26/2022
    Hide overflow text in description columns at datatables
 */
.column-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .column-overflow-hidden {
        max-height: 1.33em;
    }
}

/*
    IM
    #53900
    Used only for tooltips on the Add/Edit User pages
*/
.tooltip-wrapper .tooltip-inner {
    min-width: 150px;
    white-space: pre-wrap;
    text-align: left;
}

.cl-bg-warning {
    background-color: #ffeeaa9e !important;
}

.cl-modal-alert {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.vl-gray-100 {
    border-left: 2px solid gray;
    height: 100px;
    margin: 5px;
}

/*
    YK
    #70334, #70335
    style for focused form controls
*/
.bootstrap-select.cl-select-form-control .dropdown-toggle:focus,
input:focus+span.slider.round,
.form-control:focus:not(#globalSearchInput),
.cl-modal-button:focus,
:focus-visible:not(.select2-search__field) {
    outline: 1px auto black !important;
    outline-offset: -1px !important;
    border: 0 !important;
}

/*
    YA
    #75291
    Put tire/wheel icon into select option
    #78122
    07/14/23
    Add cushion and tread icons
*/
select.select-option-icon .option-icon::before {
    font-family: icomoon;
    font-style: normal;
    font-weight: 400;
    padding: 5px;
    font-size: 20px;
}

select.select-option-icon .tire-option-icon::before {
    content: '\e6b4';
}

select.select-option-icon .wheel-option-icon::before {
    content: '\e6b9';
}

select.select-option-icon .tread-option-icon::before {
    content: '\e632';
}

select.select-option-icon .cushion-option-icon::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    content: '\f466';
}

.text-end {
    text-align: end;
}

@media only screen and (min-width: 1200px){
    .dashboard-table-shift {
        margin-top: -260px;
    }
}
.link-without-href {
    cursor: pointer;
}

/*
    IM
    FastReport Styles
*/

#reportHost .fr-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    overflow-y: visible;
    overflow-x: visible;
    white-space: nowrap;
}

#reportHost {
    overflow-x: auto;
    text-align: center;
}

    #reportHost .report-center {
        display: inline-block;
        text-align: left;
        max-width: 100%;
    }

    #reportHost iframe {
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }

    #reportHost .fr-toolbar .fr-custom-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        order: 0;
        margin-left: 0;
        flex: 0 0 auto;
    }

    #reportHost .fr-toolbar .fr-btn.fr-custom-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 30px;
        padding: 0 12px;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
        background: #f7f7f7;
        color: #333;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        flex: 0 0 auto;
    }

        #reportHost .fr-toolbar .fr-btn.fr-custom-btn:hover {
            background: #eee;
            border-color: #c8c8c8;
        }

        #reportHost .fr-toolbar .fr-btn.fr-custom-btn:active {
            background: #e6e6e6;
        }

        #reportHost .fr-toolbar .fr-btn.fr-custom-btn .fr-icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: inline-block;
        }

    #reportHost .fr-toolbar .fr-export-xlsx .fr-icon {
        color: #2e7d32;
    }

    #reportHost .fr-toolbar .fr-export-pdf .fr-icon {
        color: #c62828;
    }