:root {
    --pro4-font-size-xsm: 12px;
    --pro4-font-size-sm: 14px;
    --pro4-font-size-med: 16px;
    --pro4-border-color: #d2d2d2;
    --pro4-header-border-color: #d2d2d280;
    --pro4-font-family: 'Segoe UI', sans-serif; /**Need Fallback**/
    --pro4-header-font-color: #444;
    --pro4-input-font-color: #444;
    --pro4-label-color: #585960; /*#717273;feedback was it is too light*/
    --pro4-input-height: 37px;
    --pro4-semibold-font-weight: 600;
    --pro4-normal-font-weight: 400;
    --pro4-disabled-text-color: var(--pro4-border-color);
    --pro4-margin-under-boxes: 8px;
    --pro4-margin-top-boxes: 8px;
    --pro4-header-color: #F2F2F5;
    --pro4-subheader-color: #E0E0E0;
    --pro4-header-disabled-font-color: #757375;
    --pro4-background-color: white;
    --pro4-input-focus-border: 1px solid var(--secondary);
    --pro4-element-border-radius: 4px;
    --pro4-button-radius: 4px;
    --pro4-datatable-header-element-height: 32px;
    --pro4-datatable-input-padding: 6px 4px 6px 4px;
    --pro4-disabled-dark: #DBDBDB;
    --pro4-header-padding: 6px 0px 6px 0px;
    --pro4-header-margin: 6px 0px 6px 0px;
    --pro4-light-box-shadow: 0px 0px 1px 1px rgba(0,0,0,.05);
    --pro4-light-focus-box-shadow: 0px 0px 3px 0px var(--secondary);
    --pro4-medium-box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, .2);
    --pro4-datatable-hover: #F2F2F540;
    --checkbox-checked-background-color: var(--secondary);
    --checkbox-label-size: var(--pro4-font-size-xsm);
    --checkbox-label-font-weight: var(--pro4-normal-font-weight);
    --input-border: 1px solid var(--pro4-border-color);
    --input-border-radius: 3px !important;
    --input-font-size: var(--pro4-font-size-xsm);
    --input-font-family: var(--pro4-font-family);
    --input-font-color: var(--pro4-input-font-color);
    --input-padding: 10px 6px 8px 8px;
    --input-background-color: var(--pro4-background-color);
    --input-label-weight: var(--pro4-normal-font-weight);
    --input-font-weight: var(--pro4-normal-font-weight);
    --input-box-shadow: var(--pro4-light-box-shadow);
    --modal-border-radius: 5px;
    --datatable-header-notop-color: #FAFAFA;
    --pro4-blue: #0072c6;
    --pro4-lightgreen: #7BC97B;
    --pro4-deepgreen: #007302;
    --checkbox-label-color: var(--pro4-label-color);
    --pro4-panel-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 1px;
    --pro4-lightgreenopacity: #7BC97B25;
    --pro4-bigbuttonheight: 32px;
    --pro4-lightbluegrey: #F5F8FC;
    --pro4-alternate-panel-header-background: #F8F8F8;
    --checkbox-label-color: var(--pro4-label-color);
    --pro4-btn-hover-transition-speed: .25s;
    --pro4-lightgreen-selected: #51CB20;
    --pro4-dashboard-color-1: rgb(247,138,105); /*reddish*/
    --pro4-dashboard-color-2: rgb(241,193,81); /*yellow*/
    --pro4-dashboard-color-3: rgb(12,176,168); /*teal*/
    --pro4-dashboard-color-4: rgb(12,97,126); /*deep blue*/
    --pro4-dashboard-color-5: rgb(16,137,177); /*light blue*/
    --pro4-dashboard-color-6: rgb(130,212,130); /*lime green*/
    --pro4-dashboard-color-7: rgb(191, 123, 188) /*magenta*/
}
.pro4FillColor1 {
    background-color: var(--pro4-dashboard-color-1);
}
.pro4FillColor2 {
    background-color: var(--pro4-dashboard-color-2);
}
.pro4FillColor3 {
    background-color: var(--pro4-dashboard-color-3);
}
.pro4FillColor4 {
    background-color: var(--pro4-dashboard-color-4);
}
.pro4FillColor5 {
    background-color: var(--pro4-dashboard-color-5);
}
.pro4FillColor6 {
    background-color: var(--pro4-dashboard-color-6);
}
.pro4FillColor7 {
    background-color: var(--pro4-dashboard-color-7);
}
.side-menu .panel-body ul li a.favoriteactive {
    color: var(--secondary-text) !important;
    background: var(--secondary) !important;
    margin-right: -1px;
    font-weight: bold;
}
/*input select textarea*/
.pro4 .form-group input:not([type=radio]), .pro4 .form-group select, .pro4 .form-group textarea,
.pro4 table.matchDataTables input, .pro4 table.matchDataTables select, .pro4 table.matchDataTables textarea,
.pro4 input.form-control, .pro4 select.form-control, .pro4 textarea.form-control,
.pro4 .chosen-container-single .chosen-single,
.pro4 .chosen-container-single .chosen-search input[type=text],
.pro4 .pro4searchfield input {
    border: var(--input-border);
    border-radius: var(--input-border-radius) !important;
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    color: var(--input-font-color);
    padding: var(--input-padding);
    box-shadow: var(--input-box-shadow);
}
#app.pro4 input[type=checkbox][readonly] {
    border: var(--input-border) !important;
    box-shadow: var(--input-box-shadow) !important;
    background: #f0f0f0 !important;
}
    .pro4 .form-group input[type=text], .pro4 .form-group select, .pro4 .chosen-container-single .chosen-single, .pro4 .form-group input[type=time], .pro4 .pro4searchfield input {
        height: var(--pro4-input-height);
    }
.pro4 .input-group .form-control[disabled] {
    border-radius: var(--input-border-radius);
}
.pro4 .form-group input[type=text]:not(.chosen-search-input):focus, .pro4 .form-group select:focus, .pro4 .form-group textarea:focus,
.pro4 table.matchDataTables input:not(.chosen-search-input):focus, .pro4 table.matchDataTables select:focus, .pro4 table.matchDataTables textarea:focus,
.pro4 input.form-control:not(.chosen-search-input):focus, .pro4 select.form-control:focus, .pro4 textarea.form-control:focus, #app.pro4 .form-group input[type=checkbox][readonly]:focus {
    background-color: var(--pro4-background-color);
    border: var(--pro4-input-focus-border) !important;
    color: var(--input-font-color);
    box-shadow: var(--pro4-light-focus-box-shadow) !important;
}
.pro4 input.smallSize.form-control, .pro4 select.smallSize.form-control,
.pro4 .form-group input.form-control.smallSize, .pro4 .form-group select.form-control.smallSize {
    height: var(--pro4-datatable-header-element-height);
    padding: var(--pro4-datatable-input-padding);
}
.pro4 .formFieldHeight {
    height: var(--pro4-input-height) !important;
}
#app.pro4 textarea[readonly], div.modal-dialog textarea[readonly] {
    border: var(--input-border) !important;
    box-shadow: var(--input-box-shadow) !important;
}
.pro4 select.form-control.liketextbox[readonly], .pro4 select.form-control.liketextbox[disabled] {
    border: 0px !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
.pro4 .matchDataTables input.form-control, .pro4 .matchDataTables select.form-control {
    padding: var(--pro4-datatable-input-padding);
}
.pro4 .form-group i.pro4DPaddon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--pro4-header-border-color);
}
.pro4 .form-group i.pro4inputaddon, .pro4 .form-group div.pro4inputaddon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    padding: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: pointer;
}
.pro4 .cursor-pointer {
    cursor: pointer;
}
.pro4 .form-group:not(.plain) label:not(.form-check-label):not(.largelabel):not(.largelabelplain):not(.radio-inline) {
    position: absolute;
    line-height: 1.2;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: translate(20px, -5px) scale(0.75);
    padding-left: 2px;
    padding-right: 2px;
    background-color: var(--input-background-color);
    font-size: var(--pro4-font-size-sm);
    font-weight: var(--pro4-semibold-font-weight);
    color: var(--pro4-label-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    border-bottom-left-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}
.pro4 .form-group:not(.plain) label:not(.form-check-label):not(.radio-inline).largelabel, .pro4 .form-group:not(.plain) label:not(.form-check-label):not(.radio-inline).largelabelplain {
    font-size: var(--pro4-font-size-sm);
    font-weight: var(--pro4-semibold-font-weight);
}
.pro4 .form-group.row.checkboxes label, .pro4 .form-check-label {
    font-size: var(--checkbox-label-size) !important;
    color: var(--checkbox-label-color) !important;
    font-weight: var(--checkbox-label-font-weight) !important;
}
.pro4 .form-check-label {
    display: block !important;
    align-items: normal !important;
}
.pro4 span.likelabel {
    font-size: var(--pro4-font-size-xs);
    font-weight: var(--pro4-normal-font-weight);
    color: var(--checkbox-label-color);
}
.pro4 .form-group:not(.plain) label:not(.form-check-label):not(.radio-inline).largelabel {
    margin-left: -6px;
}
.pro4 div .panel-body label:not(.form-check-label):not(.control-label):not(.largelabel):not(.largelabelplain):not(.radio-inline) {
    background-color: var(--input-background-color) !important;
    font-size: var(--pro4-font-size-sm) !important;
    font-weight: var(--pro4-semibold-font-weight) !important;
    color: var(--pro4-label-color) !important;
}

.pro4 .form-control[disabled], .pro4 .form-control[readonly], .pro4 fieldset[disabled] .form-control {
    border: var(--input-border) !important;
}

/*checkboxes*/
.pro4 input[type=checkbox], #app.pro4 .form-group input[type=checkbox][readonly] {
    appearance: none;
    -webkit-appearance: none;
    /*display: flex;*/
    align-content: center;
    justify-content: center;
    padding: 0px !important;
    border: 1px solid var(--pro4-border-color);
    border-radius: var(--input-border-radius) !important;
    background-color: var(--pro4-background-color);
    line-height: 1.2 !important;
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    margin-right: 6px !important;
    margin-top: -1px !important;
    font-weight: var(--pro4-normal-font-weight);
    vertical-align: middle;
}
    .pro4 input[type=checkbox]:disabled, #app.pro4 .form-group input[type=checkbox][readonly] {
        background-color: #f0f0f0 !important;
    }

    .pro4 input[type=checkbox]:checked:disabled, #app.pro4 .form-group input[type=checkbox]:checked[readonly] {
        opacity: .5;
    }

    .pro4 input[type=checkbox]:checked, #app.pro4 .form-group input[type=checkbox]:checked[readonly] {
        border: 1px solid var(--checkbox-checked-background-color) !important;
        background-color: var(--checkbox-checked-background-color) !important;
        padding: 0px;
        font-weight: var(--pro4-normal-font-weight);
    }

        .pro4 input[type=checkbox]:checked:before, #app.pro4 .form-group input[type=checkbox][readonly]:checked:before {
            width: 16px;
            height: 16px;
            transform: scale(0);
            /*background-color: var(--checkbox-checked-background-color);*/
            content: "\f00c";
            font-family: "Font Awesome 5 Pro";
            font-size: var(--input-font-size);
            color: var(--secondary-text);
            border-collapse: collapse !important;
            padding-left: 2px !important;
            transform: scale(1);
            font-weight: var(--pro4-normal-font-weight);
        }

    .pro4 input[type=checkbox]:focus:not([readonly]):not(.mdc-text-field__input) {
        outline: none;
        outline-offset: 0px;
    }

.pro4 .chkLabelTall label, .pro4 label.chkLabelTall {
    height: 25px;
}
/*jquery chosen*/
.pro4 .chosen-container-single .chosen-single span {
    margin-top: 0px;
}
.pro4 .chosen-container-active.chosen-with-drop .chosen-single {
    background-image: none;
    background: var(--input-background-color) !important;
    box-shadow: none !important;
}
.pro4 .chosen-container-active .chosen-single {
    background-image: none;
    background: var(--input-background-color) !important;
    box-shadow: none !important;
}
.pro4 .chosen-container-single .chosen-single {
    line-height: 1.2;
}
    .pro4 .chosen-container-single .chosen-single > div b {
        margin-top: 5px;
    }
.pro4 .chosen-container-single .chosen-search input[type=text] {
    background-position-y: -29px;
    background-size: 75px;
}
.pro4 .chosen-container.chosen-container-multi .chosen-choices {
    background: var(--input-background-color) !important;
}
.pro4 .chosen-container-multi .chosen-choices li.search-field input[type=text], .pro4 .chosen-container-single .chosen-choices li.search-field input[type=text] {
    padding: var(--input-padding);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    color: var(--input-font-color) !important;
}
    .pro4 .chosen-container-multi .chosen-choices li.search-field input[type=text]:not(:focus), .pro4 .chosen-container-single .chosen-choices li.search-field input[type=text]:not(:focus) {
        color: var(--pro4-disabled-text-color) !important;
    }

.pro4 .chosen-container-multi .chosen-choices li.search-field input[type=text], .pro4 .chosen-container-single .chosen-choices li.search-field input[type=text] {
    height: auto !important;
}

.pro4 .chosen-container-multi .chosen-choices li.search-choice, .pro4 .chosen-container-single .chosen-choices li.search-choice {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    color: var(--input-font-color) !important;
    margin-bottom: 5px;
    margin-top: 10px;
}

.pro4 .chosen-container .chosen-drop {
    border-left: 1px solid var(--pro4-border-color);
    border-right: 1px solid var(--pro4-border-color);
    border-bottom: 1px solid var(--pro4-border-color);
}

#app.pro4 .tab-h:not(.sub) .nav li {
    margin-bottom: 0px;
}
/*pro4searchfield*/
.pro4 .pro4searchfield label{
    z-index: 2 !important;
}
.pro4 .pro4searchfield .input-group {
    display: inline-block;
    width: 100%;
}
.pro4 .pro4searchfield .input-group .form-control[disabled] {
    border-radius: var(--input-border-radius) !important;
    box-shadow: var(--input-box-shadow) !important;
    border: var(--input-border);
}
    .pro4 .pro4searchfield .input-group .form-control[disabled] ~ .input-group-addon {
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 35px;
        padding: 10px !important;
        transform: translateY(-50%);
        font-size: 16px;
        cursor: pointer;
        z-index: 1;
        background: none !important;
    }
/*tabs*/
#app.pro4 .tab-h {
    margin: 0px -15px 0px -15px;
}

    #app.pro4 .tab-h:not(.sub) .nav li a {
        background-color: var(--pro4-header-color);
        color: var(--pro4-header-disabled-font-color);
        border-left: 1px solid var(--pro4-border-color);
        border-right: 1px solid var(--pro4-border-color);
        border-top: 1px solid var(--pro4-border-color);
        border-bottom: none;
        box-shadow: var(--pro4-light-box-shadow);
    }
#app.pro4 .progress-v li.completed a {
    color: var(--pro4-lightgreen-selected) !important;
}
    #app.pro4 .tab-h:not(.sub) .nav li.active a {
        color: var(--pro4-header-font-color);
        background-color: var(--pro4-background-color);
        border-bottom: none;
        /*box-shadow: -1px -1px 1px 1px rgba(0,0,0,.03);*/
        box-shadow: 1px 2px 0px 1px rgba(255,255,255,1);
    }

    #app.pro4 .tab-h:not(.sub) .nav li.active:first-child a {
        box-shadow: 0px 2px 0px -1px rgba(255,255,255,1), 0px 0px 1px 1px rgba(0,0,0,.05);
        /*2px 2px 0px 1px rgba(255,255,255,1)*/
    }

    #app.pro4 .tab-h:not(.sub) .nav {
        margin-left: -8px;
        margin-right: -5px;
        border-bottom: 1px solid var(--pro4-border-color);
    }

#app.pro4 .formForTab {
    border-left: 1px solid var(--pro4-border-color);
    border-right: 1px solid var(--pro4-border-color);
    border-bottom: 1px solid var(--pro4-border-color);
    border-top-right-radius: var(--pro4-element-border-radius);
    border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);
    padding-top: 10px;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 25px;
    margin-bottom: 25px;
    /*height: calc(100vh - 222px);
			overflow-y: auto;*/
    box-shadow: 0 -1px 3px 1px rgba(0,0,0,.05);
}

#app.pro4 .formForFullscreen {
    border-left: 1px solid var(--pro4-border-color);
    border-right: 1px solid var(--pro4-border-color);
    border-bottom: 1px solid var(--pro4-border-color);
    border-top-right-radius: var(--pro4-element-border-radius);
    border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);
    padding-top: 0px;
    margin-left: -8px;
    margin-right: -6px;
    margin-bottom: 25px;
    margin-bottom: 25px;
    /*height: calc(100vh - 222px);
			overflow-y: auto;*/
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,.05)
}

#app.pro4 .tab-h .nav {
    padding-left: 0px;
}
/*DataTables*/
#app.pro4 .dataTable, .pro4 .dataTable {
    color: var(--pro4-label-color);
}

    #app.pro4 .dataTable th, .pro4 .dataTable th {
        color: var(--pro4-header-font-color);
    }
.pro4 table.table-bordered.dataTable th {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 22px;
}
#app.pro4 .dt-buttons .btn, #app.pro4 .dataTables_paginate .paginate_button a,
.pro4 .dt-buttons .btn, .pro4 .dataTables_paginate .paginate_button a {
    border-radius: var(--pro4-button-radius);
    height: var(--pro4-datatable-header-element-height);
}
.pro4 .dtWithAutoHeader .dataTables_scrollBody {
    height: auto !important;
}
.pro4 .dtWithLargerHeader .dataTables_scrollBody {
    height: calc(100vh - 280px) !important;
}
.pro4 .dtWithXLargerHeader .dataTables_scrollBody {
    height: calc(100vh - 315px) !important;
}
.pro4 .dtWithXXLargerHeader .dataTables_scrollBody
 {
    height: calc(100vh - 350px) !important;
}
.pro4 .dtWithXXXLargerHeader .dataTables_scrollBody {
    height: calc(100vh - 385px) !important;
}
.pro4 .dtWithXXXXLargerHeader .dataTables_scrollBody {
    height: calc(100vh - 400px) !important;
}
#tableEmpSearcher_filter {
    box-shadow: none !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}
#disclaimer {
    border-radius: var(--modal-border-radius);
}
#tableClientPicker_filter > div, #tableClientPicker_filter {
    box-shadow: none !important;
}
#tableClientPicker_filter > div > .input-group {
    box-shadow: none !important;
    width: 100%;
    padding-right: 8px;
}
#tableClientPicker_wrapper .dataTables_scrollHeadInner .table > thead > tr > th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.pro4 .modal-body .dataTables_wrapper .dataTables_scrollBody, .pro4modal .modal-body .dataTables_wrapper .dataTables_scrollBody {
    max-height: 200px !important;
    height: auto !important;
}
.pro4 .modal-body.largedatatable .dataTables_wrapper .dataTables_scrollBody, .pro4modal .modal-body.largedatatable= .dataTables_wrapper .dataTables_scrollBody {
    min-height: 200px !important;
}
.pro4 .modal-body.xlLargeDT .dataTables_wrapper .dataTables_scrollBody, .pro4modal .modal-body.xlLargeDT .dataTables_wrapper .dataTables_scrollBody {
    max-height: 400px !important;
    height: auto !important;
}
.pro4 .dtfilterrow {
    margin-top: 0px !important;
    width: 100%;
    display: block !important;
    margin-left: -5px !important;
    margin-bottom: 0px !important;
}
#app.pro4 .dataTables_filter .dt-buttons .btn {
    color: var(--secondary-text) !important;
}
.pro4 .dataTables_filter .form-group input[type=text].form-control, .pro4 .dataTables_filter .form-group select.form-control,
#app.pro4 .dataTables_filter input[type=search].form-control,
#app.pro4 .dataTables_length select, #app.pro4 .dataTables_length input,
.pro4 .dataTables_filter input[type=search].form-control,
.pro4 .dataTables_length select, .pro4 .dataTables_length input {
    height: var(--pro4-datatable-header-element-height) !important;
    padding: var(--pro4-datatable-input-padding);
    /*box-shadow: none;*/
    border: var(--input-border);
    border-top-left-radius: var(--input-border-radius) !important;
    border-bottom-left-radius: var(--input-border-radius) !important;
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    color: var(--input-font-color);
}
.pro4 table.dataTable:not(.matchDataTables) tbody td input.form-control, .pro4 table.dataTable:not(.matchDataTables) tbody td select.form-control {
    height: var(--pro4-datatable-header-element-height);
    padding: var(--pro4-datatable-input-padding);
}
.pro4 .dataTables_length,
.pro4 .dataTables_paginate {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

    .pro4 .dataTables_paginate .pagination > li > a,
    .pro4 .dataTables_paginate .pagination > li > span,
    .pro4 .dataTables_paginate .pagination > li > a:focus,
    .pro4 .dataTables_paginate .pagination > li > span:focus {
        background-color: var(--pro4-background-color);
        color: var(--pro4-input-font-color);
        border: none !important;
    }

    .pro4 .dataTables_paginate .pagination > .active > a {
        font-weight: bold;
    }

    .pro4 .dataTables_paginate .pagination > li:first-child a,
    .pro4 .dataTables_paginate .pagination > li:last-child a {
        font-size: 0px;
        color: var(--pro4-background-color);
        /*appearance: none;
				-webkit-appearance: none;*/
    }

        .pro4 .dataTables_paginate .pagination > li:first-child a:before,
        .pro4 .dataTables_paginate .pagination > li:last-child a:before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            font-size: var(--pro4-font-size-sm);
            color: var(--input-font-color);
        }

        .pro4 .dataTables_paginate .pagination > li:first-child a:before {
            content: "\f053";
        }

        .pro4 .dataTables_paginate .pagination > li:last-child a:before {
            content: "\f054";
        }

#app.pro4 .dataTables_filter input[type=search].form-control, .pro4 .searchboxlookalike input, .pro4 .dataTables_filter input[type=search].form-control {
    padding-left: 12px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

    .pro4 .dataTables_filter .form-group input[type=text].form-control:focus, .pro4 .dataTables_filter .form-group select.form-control:focus,
    #app.pro4 .dataTables_filter input[type=search].form-control:focus, .pro4 .dataTables_filter input[type=search].form-control:focus {
        background-color: var(--pro4-background-color);
        border: var(--pro4-input-focus-border);
        color: var(--input-font-color);
    }

    #app.pro4 .dataTables_filter input[type=search].form-control + .search, .pro4 .searchboxlookalike .search,
    .pro4 .dataTables_filter input[type=search].form-control + .search, .pro4 .searchboxlookalike .search {
        border-top-right-radius: var(--input-border-radius) !important;
        border-bottom-right-radius: var(--input-border-radius) !important;
    }
#app.pro4 .searchboxlookalike .search {
    background: var(--secondary) !important;
    border-bottom: 0px !important;
}
    #app.pro4 .searchboxlookalike .search i {
        color: var(--secondary-text) !important;
    }
#app.pro4 .dtHeaderLookalike {
    padding: 8px 0px;
    background-color: var(--pro4-header-color);
    border-top: 1px solid var(--pro4-border-color);
    border-left: 1px solid var(--pro4-border-color);
    border-right: 1px solid var(--pro4-border-color);
    border-top-left-radius: var(--pro4-button-radius);
    border-top-right-radius: var(--pro4-button-radius);
}
#app.pro4 table.dataTable tbody td.select-checkbox:before,
#app.pro4 table.dataTable tbody td.select-checkbox:after,
#app.pro4 table.dataTable tbody th.select-checkbox:before,
#app.pro4 table.dataTable tbody th.select-checkbox:after,
.pro4 table.dataTable tbody td.select-checkbox:before,
.pro4 table.dataTable tbody td.select-checkbox:after,
.pro4 table.dataTable tbody th.select-checkbox:before,
.pro4 table.dataTable tbody th.select-checkbox:after {
    border: 1px solid var(--pro4-border-color) !important;
    border-radius: var(--input-border-radius) !important;
    background-color: var(--pro4-background-color) !important;
    width: 17px;
    height: 17px;
}
#app.pro4 table.dataTable tr.selected td.select-checkbox:after, #app.pro4 table.dataTable tr.selected th.select-checkbox:after,
.pro4 table.dataTable tr.selected td.select-checkbox:after, .pro4 table.dataTable tr.selected th.select-checkbox:after {
    background-color: var(--checkbox-checked-background-color) !important;
    content: "\f00c" !important;
    font-family: "Font Awesome 5 Pro" !important;
    color: var(--secondary-text) !important;
    text-shadow: none !important;
    margin-top: -6px !important;
    margin-left: -6px !important;
    text-shadow: none !important;
    padding-left: 1px;
    line-height: 1.2;
    border: 1px solid var(--checkbox-checked-background-color) !important;
}
.pro4 #tableGeneric_filter, .pro4 .dataTables_filter {
    border-top-right-radius: var(--pro4-button-radius) !important;
    border-top-left-radius: var(--pro4-button-radius) !important;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,.05); /*0 -1px 3px 1px rgba(0,0,0,.05);*/
}

#app .dataTables_filter .dt-buttons.btn-group, .dataTables_filter .dt-buttons.btn-group {
    padding-top: 1px;
}
.pro4 #tableGeneric_filter, .pro4 .dataTables_filter {
    border-left: 1px solid var(--light-dark);
    border-top: 1px solid var(--light-dark);
    border-right: 1px solid var(--light-dark);
    border-bottom: none;
}
#app.pro4 .dataTable > tbody > tr:hover, .pro4 .dataTable > tbody > tr:hover {
    background: var(--pro4-datatable-hover);
}
.pro4 div.DTS div.dataTables_scrollBody {
    background: var(--pro4-background-color);
}
.pro4 table.dataTable tbody > tr.selected, .pro4 table.dataTable tbody > tr > .selected, #app.pro4 table.dataTable tbody > tr.selected, .pro4 table.dataTable tbody > tr.selected {
    background: var(--secondary-light);
    color: var(--secondary-light-text);
}
#app.pro4 .dataTable:not(.pro4dontwrap) > tbody > tr > td, .pro4 .dataTable:not(.pro4dontwrap) > tbody > tr > td {
    /*overflow: hidden !important;
			max-width: 0 !important;
			text-overflow: ellipsis !important;*/
    white-space: normal !important;
}
/*#app.pro4 .dataTable > tbody > tr > td:hover{
			overflow: visible !important; 
			white-space: nowrap !important; 
			display: table-cell !important;
			min-width: 100% !important;
			width: 100% !important;
		}*/
.dataTables_scrollBody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
    background-color: #f5f5f5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 1px solid var(--pro4-border-color) !important;
    margin-top: -1px;
}
.dataTables_scrollBody::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: var(--pro4-disabled-dark);
    border-radius: 10px;
}
.pro4 div.dataTables_wrapper div.dataTables_processing {
    z-index: 3;
    background-color: var(--pro4-background-color);
}
.pro4 .dataTables_scrollHeadInner > table.table-striped.dataTable {
    border: none !important;
}
.pro4 button.btn.btn-info.matchdtbuttons {
    margin-right: 5px;
    background: var(--secondary) !important;
    border: none !important;
    padding: 6px 15px !important;
    margin-top: -1px;
    border-radius: var(--pro4-button-radius);
    height: var(--pro4-datatable-header-element-height);
    color: var(--secondary-text) !important;
}
    .pro4 button.btn.btn-info.matchdtbuttons i {
        color: var(--secondary-text) !important;
    }
    .pro4 .dataTables_scroll .dataTables_scrollHead {
        border-top: 1px solid var(--pro4-border-color) !important;
        border-left: 1px solid var(--pro4-border-color) !important;
        border-right: 1px solid var(--pro4-border-color) !important;
        box-shadow: 0px 1px 1px 0px rgba(0,0,0,.05); /*0 3px 2px -2px rgba(0,0,0,.05);*/
        z-index: 2;
    }
#app.pro4 .dataTable > tbody > tr > td:last-child, .pro4 .dataTable > tbody > tr > td:last-child {
    white-space: nowrap !important;
}
.pro4 .dataTables_scrollBody {
    height: calc(100vh - 245px) !important;
    /*height: 100% !important;*/
    min-height: 35px;
    /*border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);*/
}

.pro4 div.dataTables_scrollBody > table:not(.hasFooter) {
    border-bottom: 0px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,.05); /*0 2px 4px 0px rgba(100, 100, 100, 0.15);*/
    border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);
}
    .pro4 div.dataTables_scrollBody > table.hasFooter {
        border-bottom: 0px;
        box-shadow: 0 1px 2px 1px rgba(0,0,0,.05); /*0 2px 4px 0px rgba(100, 100, 100, 0.15);*/
    }

.pro4 div.dataTables_scrollFootInner > table {
    border-bottom: 0px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,.05); /*0 2px 4px 0px rgba(100, 100, 100, 0.15);*/
    border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);
}

#app.pro4 .dataTable:not(.hasFooter) > tbody > tr:last-child > td:first-child, .pro4 .dataTable > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--pro4-element-border-radius);
}

#app.pro4 .dataTable:not(.hasFooter) > tbody > tr:last-child > td:last-child, .pro4 .dataTable > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--pro4-element-border-radius);
}

#app.pro4 .dataTable > tfoot > tr:last-child > th:first-child, .pro4 .dataTable > tfoot > tr:last-child > th:first-child {
    border-bottom-left-radius: var(--pro4-element-border-radius);
}

#app.pro4 .dataTable > tfoot > tr:last-child > th:last-child, .pro4 .dataTable > tfoot > tr:last-child > th:last-child {
    border-bottom-right-radius: var(--pro4-element-border-radius);
}

.pro4 .dataTables_wrapper {
    border-bottom-left-radius: var(--pro4-element-border-radius);
    border-bottom-right-radius: var(--pro4-element-border-radius);
}

.pro4 .dataTables_filter input, .pro4 .dataTables_filter select {
    height: var(--pro4-datatable-header-element-height);
    padding: var(--pro4-datatable-input-padding);
    margin-top: 0px !important;
}
#app.pro4 .dataTables_wrapper .dataTables_info, .pro4 .dataTables_wrapper .dataTables_info {
    margin-top: 4px;
}
/*datatablesfullwidth*/
.pro4 .formForFullscreen #tableGeneric_filter, .pro4 .formForFullscreen .dataTables_filter, .pro4 .fullscreendt .dataTables_filter {
    border-left: none;
    border-right: none;
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: none;
    background-color: var(--pro4-background-color);
}

.pro4 .formForFullscreen .dataTables_scrollHeadInner table thead tr, .pro4 .fullscreendt .dataTables_scrollHeadInner table thead tr {
    background-color: var(--pro4-header-color);
}

.pro4 .formForFullscreen .dataTables_scroll .dataTables_scrollHead, .pro4 .fullscreendt .dataTables_scroll .dataTables_scrollHead {
    border-left: 0px !important;
    border-right: 0px !important;
}

.pro4 .formForFullscreen div.dataTables_scrollBody > table, .pro4 .fullscreendt div.dataTables_scrollBody > table {
    border-left: 0px;
}

.pro4 .formForFullscreen .dataTable:not(.dtNotFullHeight) .dataTables_scrollBody, .pro4 .fullscreendt .dataTable:not(.dtNotFullHeight) .dataTables_scrollBody {
    height: calc(100vh - 335px) !important;
}

.pro4 .formForFullscreen .dataTables_scroll, .pro4 .fullscreendt .dataTables_scroll {
    border-bottom: 1px solid var(--pro4-border-color);
}

#app.pro4 .formForFullscreen .dataTable > tbody > tr:last-child > td:last-child, .pro4 .formForFullscreen .dataTable > tbody > tr:last-child > td:last-child,
#app.pro4 .fullscreendt .dataTable > tbody > tr:last-child > td:last-child, .pro4 .fullscreendt .dataTable > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 0px;
}
.pro4 table.dataTable:not([aria-describedby]):not([role='grid']) {
    display: none !important;
    overflow: hidden;
    height: 0px !important;
    width: 100%;
}
.pro4 .dataTables_filter div.dt-buttons.btn-group {
    display: inline-block;
}
.pro4 div.dt-buttons.btn-group {
    display: none;
}

#app.pro4 .formForFullscreen .dataTable > tbody > tr:last-child > td:first-child, .pro4 .formForFullscreen .dataTable > tbody > tr:last-child > td:first-child,
#app.pro4 .fullscreendt .dataTable > tbody > tr:last-child > td:first-child, .pro4 .fullscreendt .dataTable > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 0px;
}

.pro4 .formForFullscreen .dataTables_scrollHead, .pro4 .fullscreendt .dataTables_scrollHead {
    background-color: var(--pro4-header-color);
}
#app.pro4 .datatableautoheight .dataTables_scrollBody {
    height: auto !important;
    min-height: 0px !important;
}
#app.pro4 .dataTables_scrollFoot, #app.pro4 .dataTables_scrollFootInner {
    width: 100% !important;    
}
#app.pro4 .datatableautoheight .dataTable > tbody > tr:last-child > td:last-child, .pro4 .dataTable > tbody > tr:last-child > td:last-child, #app.pro4 .datatableautoheight .dataTables_scrollBody {
    border-bottom-right-radius: 0px;
}
#app.pro4 .datatableautoheight .dataTable > tbody > tr:last-child > td:first-child, .pro4 .dataTable > tbody > tr:last-child > td:first-child, #app.pro4 .datatableautoheight .dataTables_scrollBody {
    border-bottom-left-radius: 0px;
}
#app.pro4 .padding8 {
    padding: 8px;
}
.pro4 .profilecard .form-group select.form-control:disabled, .pro4 .profilecard .form-group input[type=text][readonly].form-control {
    height: 24px !important;
}
#app.pro4 .profilecard input[type=checkbox] {
    margin-top: 3px !important;
}
/*$(document).on( 'init.dt', function ( e, settings ) {
    //var api = new $.fn.dataTable.Api( settings );
    
   $(e.target).closest('.dataTables_wrapper').find('.dataTables_filter').css("display", "block");
} );*/
/*header*/
#app.pro4 .form h2, #challenge.pro4 h2, #disclaimer.pro4 h2 {
    background: none;
    font-size: var(--pro4-font-size-sm);
    font-weight: var(--pro4-semibold-font-weight);
    border: none;
    padding: var(--pro4-header-padding);
    margin: var(--pro4-header-margin);
    display: inline-block;
    background-color: var(--pro4-background-color);
    padding-right: 8px;
    color: var(--pro4-input-font-color);
    margin-left: -6px !important;
}

    #app.pro4 .form h2::after {
        content: '';
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 50%;
        width: calc(100% - 30px);
        height: 1px;
        background-color: var(--pro4-header-border-color); /* Adjust color as needed */
        z-index: -1; /* Ensure the line is behind the text */
    }
#app.pro4 div.row:has(> h2) {
    position: relative;
    margin-left:0px;
}
/*panel*/
.pro4 .panel-default > .panel-heading {
    font-size: var(--pro4-font-size-med) !important;
    font-weight: var(--pro4-semibold-font-weight) !important;
    padding: var(--pro4-header-padding) !important;
    color: var(--pro4-input-font-color) !important;
    background: var(--pro4-alternate-panel-header-background);
    padding: 12px 15px !important;
}

#app.pro4 .panel, #app.pro4 .propanel {
    border: 1px solid var(--pro4-border-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 1px;
    border-radius: var(--pro4-element-border-radius);
    margin-bottom: 20px;
}
#app.pro4 .formForTab .panel:not(.nochangepanel):not(.note-editor) {
    border: 0px !important;
    box-shadow: none !important;
}
#app.pro4 .formForTab .panel-default:not(.nochangepanel) > .panel-heading:not(.note-toolbar) {
    background-color: var(--pro4-background-color);
    border-bottom: 0px !important;
    width: unset;
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 8px 15px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}
#app.pro4 .employeeCard div.panel-body .form-group.row div .form-control, #app.pro4 .cobraRecord div.panel-body .form-group.row div input {
    height: var(--pro4-input-height);
}
#app.pro4 .formForTab .panel:not(.nochangepanel):not(.note-editor):after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    top: 20px;
    width: calc(100% - 40px);
    height: 1px;
    background-color: var(--pro4-header-border-color);
    z-index: 0;
}
#app.pro4 .padding-left0 {
    padding-left: 0px !important;
}
.pro4 .employeeCard div.panel-body .form-group.row div:has(label), .pro4 .cobraRecord div.panel-body .form-group.row:has(label)
{
    display: flex;
}
.pro4 .profilecard .form-group:not(.plain) label:not(.form-check-label):not(.largelabel):not(.largelabelplain):not(.radio-inline) {
    position: relative;
    line-height: 15px;
    transform: translate(0px, 0px) scale(1) !important;
    white-space: inherit;
    font-size: var(--pro4-font-size-xsm) !important;
    color: var(--pro4-input-font-color) !important;
}
#app.pro4 .removeLabelStyles .form-group label {
    position: relative !important;
    transform: translate(0px, 0px) scale(1) !important;
    white-space: inherit !important;
    font-size: var(--pro4-font-size-xsm) !important;
    color: var(--pro4-input-font-color) !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
.pro4 .profilecard .form-group select.form-control:disabled, .pro4 .profilecard .form-group input[type=text][readonly].form-control {
    border: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height:18px;
}
#app.pro4 .profilecard .panel {
    margin-bottom: 0px !important;
}
.pro4 .profilecard .form-group select.form-control:not(:disabled), .pro4 .profilecard .form-group input[type=text]:not([readonly]).form-control {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
#app.pro4 .profilecard div.form-group.row > div {
    margin-bottom: 4px !important;
}
#app.pro4 #empEditSection1 .panel .panel-body.borderright, #app.pro4 #empEditSection2 .panel .panel-body.borderright, #app.pro4 .employeeCard .panel .panel-body.borderright {
    border-right: 1px solid var(--pro4-border-color) !important;
    border-bottom-right-radius: 0px !important;
}
#app.pro4 #empEditSection1 > div:not(:last-child), #app.pro4 #empEditSection2 > div:not(:last-child) {
    padding-right: 0px;
}
    #app.pro4 #empEditSection1 > div:not(:last-child) .panel-body, #app.pro4 #empEditSection2 > div:not(:last-child) .panel-body {
        padding-right: 15px;
    }
/*employee card*/
#app.pro4 .employeeCard .tab-h.sub {
    margin-top: -10px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 10px;
}
    #app.pro4 .submenuforempcard > div {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
#app.pro4 .tab-h .nav li.active a {
    box-shadow: none !important;
}
#app.pro4 .tab-h.sub .nav {
    background-image: none;
    background-color: var(--pro4-subheader-color);
}
    #app.pro4 .tab-h.sub .nav li a {
        background-image: none;
        background-color: var(--pro4-subheader-color);
    }
#app.pro4 .tab-h.sub .nav li.active a {
    background-color: #cbcbcb;
}
/*modal*/
.modal.in .modal-dialog {
    border-radius: var(--modal-border-radius) !important;
}

    .modal.in .modal-dialog .modal-content {
        border-radius: var(--modal-border-radius) !important;
    }

.modal-dialog .modal-header {
    padding: 8px 15px !important;
    border-bottom: 1px solid var(--pro4-border-color) !important;
}

.modal-dialog .modal-footer {
    border-top: 1px solid var(--pro4-border-color) !important;
    padding: 8px 15px !important;
}

.modal-dialog .modal-title, .modal-dialog .modal-title span {
    font-size: var(--pro4-font-size-med) !important;
    font-weight: var(--pro4-semibold-font-weight) !important;
    padding: var(--pro4-header-padding) !important;
    color: var(--pro4-input-font-color) !important;
}

.modal-header .close {
    margin-top: 5px !important;
    color: var(--pro4-input-font-color);
}
/*matchdatatables*/
.pro4 .matchDataTables thead tr:first-child th {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 22px;
}

.pro4 .matchDataTables thead tr {
    background: none !important;
    background-color: var(--datatable-header-notop-color) !important;
}

.pro4 .matchDataTables.table-bordered > thead > tr > td, .pro4 .matchDataTables.table-bordered > thead > tr > th {
    border-bottom-width: 1px;
}
.pro4 .matchDataTables.stickyHeader thead th, .child.form .matchDataTables.stickyHeader thead tr {
    position: sticky;
    top: 0;
}

.pro4 table.matchDataTables.stickyHeader {
    border-collapse: separate;
}

.pro4 table.matchDataTables.stickyHeader {
    border: 0px !important;
}
    /*.pro4 table.matchDataTables.stickyHeader thead > tr > th{
            border-top: 1px solid var(--pro4-border-color);
            border-bottom: 1px solid var(--pro4-border-color);
        }*/
    .pro4 table.matchDataTables.stickyHeader th {
        /* Apply both top and bottom borders to the <th> */
        border: 0px !important;
        border-top: 1px solid var(--pro4-border-color) !important;
        border-bottom: 1px solid var(--pro4-border-color) !important;
        border-right: 1px solid var(--pro4-border-color) !important;
    }

    .pro4 table.matchDataTables.stickyHeader td {
        /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
        border: 0px !important;
        border-bottom: 1px solid var(--pro4-border-color) !important;
        border-right: 1px solid var(--pro4-border-color) !important;
    }

        .pro4 table.matchDataTables.stickyHeader td:first-child {
            /* Apply a left border on the first <td> or <th> in a row */
            border: 0px !important;
            border-left: 1px solid var(--pro4-border-color) !important;
            border-bottom: 1px solid var(--pro4-border-color) !important;
            border-right: 1px solid var(--pro4-border-color) !important;
        }

    .pro4 table.matchDataTables.stickyHeader th:first-child {
        border: 1px solid var(--pro4-border-color) !important;
    }
.pro4 table.dataTable.pro4displayAsTable.matchDataTables:not(.hide) {
    display: table !important
}

/*htmleditor*/
.pro4 div:has(> .wysiwygeditordiv) > label:not(.form-check-label) {
    z-index: 501 !important;
}
/*to fix text disappear or text got hidden behind the toolbar when resize browser window*/
.note-toolbar-wrapper {
    height: unset !important;
}
/* stacy remove, because it added extra space to the top of text area
.pro4 .note-editor.note-frame .note-editing-area {
    margin-top: 25px;
}*/

/*benefits enrollment*/
.pro4 #DeductionWindow {
    
}
.pro4 .pro4whoisenrolling {

}
.pro4 .pro4chooseaplan {
    
}
#app.pro4 .pro4chooseaplan > .panel .panel-body {
    padding-bottom: 20px; 
    /*border: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;*/
}
/*#app.pro4 .pro4chooseaplan > .panel {
    border: none !important;
    box-shadow:none !important;
}
    #app.pro4 .pro4chooseaplan > .panel .panel-heading {
        display: none !important;
    }*/
#app.pro4 #DeductionWindow.panel {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0px !important;
}
#app.pro4 .benefitboxholder {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-bottom: 15px;
}

    #app.pro4 .benefitboxholder .deductionbox {
        min-width: 375px !important;
        max-width: 550px !important;
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 30px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        flex-basis: content;
        flex-basis: min-content;
        flex-shrink: 1;
        flex-grow: 1;
    }

        #app.pro4 .benefitboxholder .deductionbox .deductionboxinner {
            min-width: 0px !important;
        }    
#app.pro4 .deductionboxinner {
    border: 1px solid var(--pro4-border-color);
    box-shadow: var(--pro4-panel-box-shadow);
    border-radius: var(--pro4-element-border-radius);
}
    #app.pro4 .deductionboxinner .lastrow {
        border-top: none;
        background-color: transparent !important;
    }
#app.pro4 .panel-body {
    border-bottom-left-radius: var(--pro4-element-border-radius) !important;
    border-bottom-right-radius: var(--pro4-element-border-radius) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner {
    /*background: var(--pro4-lightgreenopacity) !important;*/
    background: var(--pro4-background-color) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 1px !important;
    border: 4px solid var(--pro4-deepgreen);
    /*    margin-top: -10px !important;
    padding-bottom: 4px !important;*/
}
    #app.pro4 .deductionbox.deductionselected .deductionboxinner .background-gray {
        background: transparent !important;
    }
#app.pro4 .deductionboxinner .lastrow {
    padding-bottom: 15px;
}
    #app.pro4 .deductionboxinner .lastrow > div {
        width: 100% !important;
        text-align: center !important;
        padding-bottom: 5px;
    }
    #app.pro4 .deductionboxinner .lastrow > div button.pull-right, #app.pro4 .deductionboxinner .lastrow > div .btn-group.pull-right {
        float: none !important;
    }
#app.pro4 .waivereason {
    line-height: 18px;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner input[type=checkbox]:checked {
    border: 1px solid var(--pro4-deepgreen) !important;
    background-color:var(--pro4-deepgreen) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner .lastrow i {
    color: var(--pro4-deepgreen) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner .lastrow button:hover i,
#app.pro4 .deductionbox.deductionselected .deductionboxinner .lastrow .btn-group:hover i {
    color: #fff !important;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner .lastrow button:hover, #app.pro4 .deductionbox.deductionselected .deductionboxinner .lastrow .btn-group:hover >.btn {
    background-color: var(--pro4-deepgreen) !important;
}
    #app.pro4 #DeductionWindow button.btn, #app.pro4 #DeductionWindow .btn-group a.btn {
        height: var(--pro4-bigbuttonheight);
    }
#app.pro4 .forcebodyborder {
    border-top: none !important;
    border-left: 1px solid var(--pro4-border-color);
    border-right: 1px solid var(--pro4-border-color);
    border-bottom: 1px solid var(--pro4-border-color);
    border-bottom-left-radius: var(--pro4-element-border-radius) !important;
    border-bottom-right-radius: var(--pro4-element-border-radius) !important;
    box-shadow: var(--pro4-panel-box-shadow) !important;
}
#app.pro4 .forceheaderborder {
    border: 1px solid var(--pro4-border-color);
    border-top-left-radius: var(--pro4-element-border-radius) !important;
    border-top-right-radius: var(--pro4-element-border-radius) !important;
    box-shadow: 0px 3px 5px -1px rgba(255,255,255,1), rgba(0, 0, 0, .1) 0px 0px 2px 1px !important;
}
#app.pro4 .pro4whoisenrolling > div{
    margin-top: 0px !important;
}

#app.pro4 .benefitsenrollment .panel-default > .panel-heading {
    background-color: var(--pro4-alternate-panel-header-background) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner .deductionselectrow {
    border-radius: 0px !important;
}
#app.pro4 .deductionboxinner .deductionselectrow {
    background-color: var(--pro4-alternate-panel-header-background);
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 37px;
    text-align: center;
    padding-top: 12px;
    width: 100%;
    border-bottom: 1px solid var(--pro4-border-color);
    border-top-left-radius: var(--pro4-element-border-radius);
    border-top-right-radius: var(--pro4-element-border-radius);
}
.pro4 .currentdeductionbox .form-group:not(.plain) label:not(.form-check-label):not(.largelabel):not(.largelabelplain):not(.radio-inline) {
    transform: translate(8px, -5px) scale(0.75) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionselectrow {
    background-color: var(--pro4-deepgreen);
}
#app.pro4 .deductionbox .deductionselectrow .form-check-label{    
    font-size: var(--pro4-font-size-sm) !important;
    font-weight: var(--pro4-semibold-font-weight) !important;
    display: block !important;
}
#app.pro4 .deductionbox .deductionselectrow .form-check-label {
    /*change check box border here*/
    color: var(--input-font-color) !important;
}
#app.pro4 .deductionbox.deductionselected .deductionselectrow .form-check-label {
    /*change check box border here*/
    color: var(--pro4-background-color) !important;
}
    #app.pro4 .deductionbox .deductionselectrow .form-check-label input[type=checkbox] {
        border: 2px solid var(--pro4-input-font-color) !important;
    }
    #app.pro4 .deductionbox.deductionselected .deductionselectrow .form-check-label input[type=checkbox]:checked {
        border: 2px solid var(--pro4-background-color) !important;
        line-height: 1 !important;
    }
    #app.pro4 .deductionbox.deductionselected .deductionselectrow .form-check-label input[type=checkbox]:checked:before {
        padding-left:0px !important;        
        margin-left: .5px;
    }
#app.pro4 .deductionboxinner {
    padding-top: 37px;  
    padding-bottom: 3px;
}
#app.pro4 .deductionbox.deductionselected .deductionboxinner {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 34px;
    padding-bottom: 0px;
}
    #app.pro4 .deductionbox.deductionselected .deductionboxinner .deductionselectrow {
        padding-top: 9px;
    }
#app.pro4 .benefitboxholder {
    width: 100% !important;
    margin-left: 15px !important;
    margin-right: -15px !important;
}
   
/* Small Devices, Tablets */
/*@media only screen and (min-width : 768px) {
    #app.pro4 .benefitboxholder .deductionbox .deductionboxinner {
        width: 100% !important;
    }
}*/

/* Medium Devices, Desktops */
/*@media only screen and (min-width : 992px) {
    #app.pro4 .benefitboxholder .deductionbox .deductionboxinner {
        width: 100% !important;
    }
}*/

/* Large Devices, Wide Screens */
/*@media only screen and (min-width : 1600px) {
    #app.pro4 .benefitboxholder .deductionbox .deductionboxinner {
        width: 50.00% !important;
    }
}*/

/* Large Devices, Wide Screens */
/*@media only screen and (min-width : 3600px) {
    #app.pro4 .benefitboxholder .deductionbox .deductionboxinner {
        width: 33.33333333% !important;
    }
}*/
/*ehire*/

/*benefitsenrollmentnewmene*/
#app.pro4 #progress-side {
    border: none !important;
}
#app.pro4 .rightsideactive {
    /*border-top: 1px solid var(--pro4-border-color);*/
}
#app.pro4 .enrollmentmenu.progress-v ul.nav.nav-tabs li, #app.pro4 .benefitsmenu.rightmenu > div.row {
    border-bottom: 1px solid var(--pro4-border-color);
}
#app.pro4 .enrollmentmenu.progress-v ul.nav.nav-tabs li.active, #app.pro4 .benefitsmenu.rightmenu div.row.rightsideactive {
    border-bottom: 0px !important;
}
#app.pro4 #progress-side-rightcol {
    width: 78px;
}
    #app.pro4 #progress-side-rightcol .amount {
        line-height: 26px;
        padding-left: 5px !important;
    }
#app.pro4 .enrollmentmenu .nav-tabs>li {
    margin-bottom: 0px !important;
}
#app.pro4 #progress-side-leftcol {
    width: calc(100% - 78px);    
}
#app.pro4 #benefits-content .dataTables_scrollBody {
    max-height: 350px !important;
}
#app.pro4 .dependentsbox div.dependentholder {
    width: 200px;
    float: left;
}
#app.pro4 #DeductionWindow {
    margin-bottom: 50px;
}
    #app.pro4 #DeductionWindow .benefitwaived .waivedwatermark {
        min-width: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 0px !important;
        background: repeating-linear-gradient(45deg, #fff, #fff 10px, #ebcccc 10px, #ebcccc 20px);
    }
        #app.pro4 #DeductionWindow .benefitwaived .waivedwatermark:before {
            content: "Waived";
            position: absolute;
            z-index: 2;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            bottom: 0;
            font-weight: bold;
            color: #d9534f;
            font-size: 40px;
            content: "Waived";
            height: 40px;
        }
#app.pro4 .ShowForHSA {
    margin-top: 10px;
}
#app.pro4 .dependentsbox div.dependentholder .spanName {
    display: inline-block;
    width: 177px;
    float: right;
    padding-bottom: 5px;
}
    @media screen and (max-width: 767px) {
        #app.pro4 #progress-side .toggle {
        margin-left: -2px !important;
        margin-top: 23px !important;
    }
    #app.pro4 #benefits-content {
        width: calc(90%);
    }
}
@media screen and (max-width: 992px) {
    #app.pro4 #progress-side.progress-side-closed #spanEmployeeName {
        display: none !important;
    }
    #app.pro4 #progress-side {
        position: fixed;
    }
}
#app.pro4 .progress-v .nav li a i {
    font-size: 20px;
    width: 30px;
    margin-right: 6px;
    vertical-align: bottom;
}
#app.pro4 .progress-v .nav li a {
    font-size: var(--pro4-font-size-xsm);
    color: var(--pro4-label-color);
    padding: 6px 5px 6px 10px;
    height: 35px;
    display: inline-block;
}

#app.pro4 .progress-v .nav li a span {
    text-align: center;
}
    #app.pro4 .progress-v .nav li {
        padding-left: 0px;
        padding-right: 0px;
    }
#app.pro4 .progress-v.enrollmentmenu .nav li, #app.pro4 .benefitsmenu.rightmenu > div.row {
    height: 33px !important;
}
        #app.pro4 .benefitsmenu.rightmenu div.row.eetotal, #app.pro4 .benefitsmenu.rightmenu div.row.ertotal {
            background-color: var(--pro4-background-color) !important;
        }
#app.pro4 .benefitsmenu.rightmenu div.row {
}
    #app.pro4 .progress-v .nav li.static, #app.pro4 .benefitsmenu.rightmenu div.row.eetotal, #app.pro4 .benefitsmenu.rightmenu div.row.ertotal {
        border-bottom: none !important;
    }
    #app.pro4 .progress-v .nav li.static a {
        border-bottom: none !important;
        padding: 8px 5px 0px 25px;
        height: 25px;
    }        
        #app.pro4 #progress-side-rightcol div.row.eetotal, #app.pro4 #progress-side-rightcol div.row.ertotal {
            height: 26px;
        }
#app.pro4 #progress-side-rightcol div.row.eetotal .amount, #app.pro4 #progress-side-rightcol div.row.ertotal .amount {
    margin:0px;
    height:25px;
}
    #app.pro4 #progress-side-rightcol div.row.eetotal .amount span, #app.pro4 #progress-side-rightcol div.row.ertotal .amount span {
        line-height: 33px;
        height: 25px;
        display: block;
    }
#app.pro4 #progress-side > .panel > .panel-body{
    padding-bottom: 8px !important;
}
#app.pro4 .background-blue {
    background: var(--pro4-lightbluegrey);
}
#app.pro4.masterholder .inactive:not(.visited) a, #app.pro4 .inactive:not(.visited) span {
    opacity: .5 !important;
}
#app.pro4 #progress-side-rightcol div.row:not(.eetotal):not(.ertotal) .amount span {
    opacity: .65 !important;
}
#app.pro4 .enrollmentmenu.progress-v ul.nav.nav-tabs li.active, #app.pro4 .benefitsmenu.rightmenu div.row.rightsideactive {
    background: var(--pro4-blue) !important;
}
    #app.pro4 .benefitsmenu.rightmenu div.row.rightsideactive span, #app.pro4 .enrollmentmenu.progress-v ul.nav.nav-tabs li.active a {
        color: var(--pro4-background-color) !important;
    }
#app.pro4 #spanEmployeeName {
    font-size: var(--pro4-font-size-med);
}
#app.pro4 #progress-side > .panel > .panel-heading > div:last-child span {
    font-size: var(--pro4-font-size-xsm) !important;
    color: var(--pro4-label-color);
}
#app.pro4.pro4eHire #progress-side ul li a{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (min-width: 1300px) {
    #app.pro4:not(.pro4eHire) #progress-side {
        width: 300px !important;
    }

    #app.pro4 #benefits-content {
        width: calc(100% - 300px) !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1299px) {
    #app.pro4:not(.pro4eHire) #progress-side {
        width: 250px !important;
    }

    #app.pro4 #benefits-content {
        width: calc(100% - 250px) !important;
    }
}
/*general*/
#app.pro4 h1 {
    font-weight: var(--pro4-semibold-font-weight);
}

#app.pro4 div.form-group.row > div, .pro4 div.form-group.row > div {
    margin-bottom: var(--pro4-margin-under-boxes);
    margin-top: var(--pro4-margin-top-boxes);
}

.pro4 div, .pro4 dl, .pro4 dt, .pro4 dd, .pro4 ul, .pro4 btn ol, .pro4 li, .pro4 h1, .pro4 h2, .pro4 h3, .pro4 h4, .pro4 h5, .pro4 h6, .pro4 h2 pre, .pro4 form, .pro4 label, .pro4 fieldset, .pro4 input, .pro4 p, .pro4 blockquote, .pro4 th, .pro4 td {
    font-family: var(--pro4-font-family);
}
*, html, body, div, dl, dt, dd, ul, btn ol, li, h1, h2, h3, h4, h5, h6, h2 pre, form, label, fieldset, input, p, blockquote, th, td {
    font-family: var(--pro4-font-family);
}
#home-dashboard-grid *:not(i) {
    font-family: var(--pro4-font-family) !important;
}
.pro4 .csstooltip:hover::after {
    z-index: 2;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
    background-color: #f5f5f5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 1px solid var(--pro4-border-color) !important;
    margin-top: -1px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background-color: var(--pro4-disabled-dark);
    border-radius: 10px;
}
.pro4 .hideforpro4 {
    display: none !important;
}
.MainContentHolder {
    margin-top: 0px;
    padding-top: 50px;
}
.pro4blue-color {
    color: var(--pro4-blue);
}
.pro4blue-background {
    background: var(--pro4-blue);
}
body.NoMenu #app.container-fluid.pro4 {
    padding-top: 0px !important;
}
    body.NoMenu #app.container-fluid.pro4 .form-group:not(.plain) label:not(.form-check-label) {
        padding-top: 0px !important;
    }
    body.NoMenu #app.container-fluid.pro4 .form-group:not(.plain) label:not(.form-check-label) {
        padding-top: 0px !important;
    }
    body.NoMenu #app.container-fluid.pro4 input.form-control, body.NoMenu #app.container-fluid.pro4 select.form-control {
        font-size: var(--input-font-size) !important;
    }
.pro4 .margin-left-right15px {
    margin-left: 15px;
    margin-right: 15px;
}
.pro4 .padding-left-right15px {
    margin-left: 15px;
    margin-right: 15px;
}
.divWaitOverlay {
    z-index: 1051;
}
.pro4 .pro4nopadding {
    padding: 0px;
}
.pro4 .pro4nopaddingtop {
    padding-top: 0px !important;
}
.pro4 .pro4positionrelative {
    position: relative !important;
}
.pro4 .pro4margintop10px {
    margin-top: 10px !important;
}
.pro4 .employeeCard div.panel-body .form-group.row div label, .pro4 .cobraRecord div.panel-body .form-group.row label {
    min-height: 0px !important;
}
.pro4 .pro4-font-size-med {
    font-size: var(--pro4-font-size-med) !important;
}
.pro4 .employeeCard div.panel-body:not(.noshrinkinputs) .form-group.row div .form-control:not(textarea), .pro4 .cobraRecord div.panel-body .form-group.row div input {
    height: 24px !important;
}
.pro4 .pro4inputHeight {
    height: var(--pro4-input-height);
}
.pro4 .pro4padding-top-10 {
    padding-top: 10px;
}
.pro4 .pro4zindex1 {
    z-index: 1;
}
.pro4 .pro4lineheight30 {
    line-height: 30px;
}
.pro4 #eHireWindow {
    margin-bottom: 20px;
    margin-top: 5px !important;
}
#app.pro4.pro4eHire #progress-side > .panel > .panel-body {
    padding-bottom: 0px !important;
}
#app.pro4 .wotctable td label.form-check-label {
    color: var(--pro4-input-font-color) !important;
    font-size: var(--pro4-font-size-sm) !important;
}
@media screen and (max-width: 1199px) {
    #app.pro4.pro4eHire #ehire-content {
        width: 100% !important;
    }
    #app.pro4.pro4eHire #progress-side {
        width: 50% !important;        
    }
}
.pro4 #statewithholdingpartial .stateboxes {
    margin-left: -15px;
    margin-right: 0px;
}
.pro4 #statewithholdingpartial .stateboxes div:has(h2) {
    margin-left: 15px;
}
    .pro4 #statewithholdingpartial .stateboxes h2 div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pro4 #statewithholdingpartial .stateboxes h2 div {
        width: calc(100% - 145px) !important;
        text-align: right;
        padding-top: 0px;
        padding-left: 0px;
        padding-bottom: 4px;
        padding-right: 5px;
    }
    .pro4 #statewithholdingpartial .stateboxes h2 {
        width: 100%;
    }
    .pro4 #statewithholdingpartial .stateboxes div:has(select), .pro4 #statewithholdingpartial .stateboxes div:has(input) {
        width: 50% !important;
    }
.pro4.pro4eHire .panel-body .form-group.row div .form-control[readonly], .pro4.pro4eHire .panel-body .form-group.row div .form-control[readonly],
.pro4.pro4eHire #statewithholdingpartial .panel-body .form-group.row div .form-control[disabled], .pro4.pro4eHire .panel-body .form-group.row div .form-control[disabled] {
    background-color: var(--light) !important;
}
#side-menu #autoComplete {
    border-radius: var(--input-border-radius) !important;
    font-size: var(--input-font-size) !important;
    padding: 6px 4px 6px 36px !important;
}
#side-menu #autoComplete_clear {
    top: 18px;
    font-size: 16px;
}
#autoComplete_list_container {
    top: 89px !important;
}
.divWaitOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5) !important; /* Semi-transparent white background */
    z-index: 9999; /* Ensure it's above other content */
    /*pointer-events: none;*/ /* Prevent interaction with elements behind */
    /*background-image: none !important;*/
}

    .divWaitOverlay::after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(50% - 40px);
        transform: translate(-50%, -50%);
        border: 9px solid #f0f0f0; /* Light grey border */
        border-top: 9px solid var(--pro4-blue); /* Blue border for loading animation */
        border-right: 9px solid var(--pro4-blue); /* Blue border for loading animation */
        border-bottom: 9px solid var(--pro4-blue); /* Blue border for loading animation */
       /* border-style:dashed;*/
        border-radius: 50%;
        margin-top: -80px;
        width: 80px;
        height: 80px;
        animation: spin 1s cubic-bezier(0.43, 1, 0.52, .5) infinite;/*spin 1s cubic-bezier(0.23, 1, 0.32, .5) infinite;*/ /* Apply rotation animation */
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        /*border-right: 8px solid transparent;*/ /* Blue border for loading animation */
    }
    50% {
        /*border-bottom: 8px solid transparent;*/ /* Blue border for loading animation */
    }
    100% {
        transform: rotate(360deg);
    }
}

#side-menu .navbar-toggle-fullscreen i {
    margin-left: auto; 
    margin-right: auto;
    font-size: 17px !important;
}
.navbar-toggle-fullscreen > div{
    padding-right:0px !important;
}
#side-menu.side-menu-closed #autoComplete_wrapper {
    display: none !important;
}
#side-menu nav i {
    margin-right: 4px;
}
.side-menu .navbar-nav li a {
    padding: 10px 5px 10px 15px;
}
#side-menu nav i.fa-sort-down, #side-menu nav i.fa-sort-up {
    font-size: 18px;
    margin-top: -3px;
}
#side-menu.side-menu .dropdown .panel-body ul li a{
    padding: 5px 15px 5px 35px;
}
.side-menu .panel-body ul li.secondlevelli a {
    padding: 5px 15px 5px 35px !important;
}
#side-menu.side-menu .secondlevel + .panel-collapse .panel-body {
    margin-left: 0px !important;
}
.side-menu .panel-body ul li ul.nav li a {
    padding: 5px 15px 5px 55px !important;
}
#app.pro4 .form-group input[type=file] {
    padding: 8px 6px 4px 6px;
    height: var(--pro4-input-height);
}
#app.pro4 .form-group input[type=file]::file-selector-button {   
    color: #000;
    border: 0px;
    margin-right: 20px;
    transition: var(--pro4-btn-hover-transition-speed);
    padding-top: 3px;
    padding-bottom: 4px;
    border-radius: var(--pro4-element-border-radius);
    background-color: #eee;
    font-family: var(--pro4-font-family);
    color: var(--input-font-color);
}

    #app.pro4 .form-group input[type=file]::file-selector-button:hover {
        border: 0px;
        cursor: pointer;
        background-color: #ddd;
    }
#app.pro4 button.btn {
    transition: var(--pro4-btn-hover-transition-speed);
}
#app.pro4 .dtsb-searchBuilder input, #app.pro4 .dtsb-searchBuilder select {
    height: var(--pro4-input-height) !important;
}
/*dashboard*/
.pro4 .pro4eehomebox {
    padding: 10px;
}
.pro4 .pro4eehomeboxinner {
    height: 70px;
    padding: 15px 20px;
    border-radius: var(--pro4-element-border-radius);       
    color: white;
    cursor: pointer;
    display: table;
    width: 100%;
}
    .pro4 .pro4eehomeboxinner.pro4myprofilebox {
        padding: 5px 20px;
    }
        .pro4 .pro4eehomeboxinner.pro4myprofilebox i, .pro4 .pro4eehomeboxinner.pro4myprofilebox .pro4eehomeboxinnertext {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .pro4 .pro4eehomeboxinner i {
            font-size: 26px;
            margin-right: 8px;
            float: left;
            line-height: 40px;
            width: 34px;
            text-align: left;
        }
.pro4 .pro4eehomebox {
    width: 50% !important;
    float: left;
}
.goog-te-gadget-simple {
    border-radius: var(--input-border-radius) !important;

}
.goog-te-gadget {
    padding-right: 3px !important;
}
@media screen and (max-width: 767px) {
    #app.pro4 .form-control {
        font-size: 13px;
    }
}
@media screen and (max-width: 767px) {
    #app *, html, #app body, #app div, #app dl, #app dt, #app dd, #app ul, #app btn ol, #app li, #app h1, #app h2, #app h3, #app h4, #app h5, #app h6, #app h2 #app pre, #app form, #app label, #app fieldset, #app input, #app p, #app blockquote, #app th, #app td {
        font-size: 13px;
    }
}
.pro4 .newstext:before,
.pro4 #chart__news--customer tbody tr td:first-child div:before,
.pro4 #chart__news--client tbody tr td:first-child:before {
    content: "\f1ea";
    font-family: "Font Awesome 5 Pro";
    margin-right: 4px;
    color: #004BB0;
    display: table;
    float: left;
    margin-top: 6px;
}
.pro4 .newstext:before {
    margin-top: 3px !important;
}
    .pro4 #chart__news--customer .dashTable__headerRow, .pro4 #chart__news--client .dashTable__headerRow {
        display: none;
    }
.pro4 .dash-chart-link {
    color: #004BB0;
}
.pro4 #banner-container {
    height: 70px;
}
.pro4 #chart__news--customer td, .pro4 #chart__news--client td {
    border-bottom: 0px !important;
}
.pro4 #chart__news--customer .card__header-subtitle, .pro4 #chart__news--client .card__header-subtitle {
    padding: 2px 20px;
}
.pro4 #dash-item__chart__news--customer .card__body, .pro4 #dash-item__chart__news--client .card__body {
    padding-bottom: 0px !important;
}
.pro4 #home-dashboard-grid .overviewcard__info {
    font-size: 20px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    /* text-overflow: ellipsis; */
    margin-left: 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    line-height: 20px;
    margin-top: -1px;
}
.pro4 #home-dashboard-grid .overviewcard__right {
    font-size: 30px !important;
}
.pro4 #chart__news--customer, .pro4 #chart__news--client {
    margin-bottom: 0px;
}
.pro4 .dashTable__tableCell {
    border-bottom: none !important;
}
.pro4 .dashTable__headerRow, .pro4 .dashTable__tableRow, .pro4 .dashTable__oddTableRow {
    height: 28px;
}
    .pro4 #chart__news--customer .dashTable__headerRow thead tr th:first-child, .pro4 #chart__news--client .dashTable__headerRow thead tr th:first-child,
    .pro4 #chart__news--customer tbody tr td:first-child, .pro4 #chart__news--client tbody tr td:first-child {
        width: 75% !important;        
    }    
    .pro4 #chart__news--customer tbody tr td:first-child div, .pro4 #chart__news--client tbody tr td:first-child div {        
        color: #004BB0 !important;
        display: inline-block;
    }    
    .pro4 #chart__news--customer .dashTable__headerRow thead tr th:last-child, .pro4 #chart__news--client .dashTable__headerRow thead tr th:last-child,
    .pro4 #chart__news--customer tbody tr td:last-child, .pro4 #chart__news--client tbody tr td:last-child {
        width: 25% !important;
    }
.pro4 #dash-toolbar .dash-badge {
    width: 12px;
    margin-left: 22px;
    margin-top: -25px;
}
.pro4 #dash-toolbar .dash-toolbar-btn {
    height: 24px;
}
.pro4 #dash-toolbar i {
    font-size: 14px;
}
.pro4 #spanClientNewsName {
    font-family: var(--pro4-font-family);
}
.pro4 #dash-toolbar {
    width: 120px;
    vertical-align: top;
    padding-left: 5px;
}
.pro4 .newsitem {
    border-bottom: none !important;
}
.pro4 .dash-banner {
    border-radius: var(--pro4-element-border-radius);
}
.pro4 #banner-logo-container {
    padding: 5px 25px 5px 5px;
}
.pro4 .pro4eehomeboxinner .pro4eehomeboxinnertext {
    float: left;
    line-height: 40px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 62px);
    text-align: center;
    font-size: 22px;
}
    .pro4 .pro4eehomebox.btnReview .pro4eehomeboxinner {
        padding-bottom: 0px;
        display:inline-block;
    }
.pro4 .pro4eehomebox.btnReview .pro4eehomeboxinnertext {
    margin-top: -10px;
}
.pro4 .pro4eehomebox .pro4eehomeboxinner .pro4eehomeboxinnertextsmall {
    margin-top: -6px;
    float: left;
    text-align: center;
    width: calc(100% - 62px);
}
.pro4 #dash-calendar-filters .mdc-select .mdc-select__anchor {
    background-color: var(--pro4-background-color);
    border: 1px solid var(--pro4-border-color);
    border-radius: var(--pro4-element-border-radius);
    box-shadow: var(--pro4-light-box-shadow);
}
.pro4 a.anchorisbutton {
    border: 1px solid #c9c9c9 !important;
    color: #444444;
    padding: 4px 10px !important;
    border-radius: var(--pro4-button-radius);
    text-decoration: none !important;
}
    .pro4 a.anchorisbutton:hover {
        color: white !important;
        background-color: #0072c6 !important;
    }
        .pro4 a.anchorisbutton:hover i, .pro4 a.anchorisbutton:hover::before {
            color: white !important;
        }
#header .navbar ul li a:hover {
    max-height: 45px;
}
/*.divWaitOverlay,
.divWaitOverlay:before,
.divWaitOverlay:after {*/
    /*background: #ffffff;*/
    /*-webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}

.divWaitOverlay {*/
    /*color: #ffffff;*/
    /*text-indent: -9999em;
    margin: 88px auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

    .divWaitOverlay:before,
    .divWaitOverlay:after {
        position: absolute;
        top: 0;
        content: '';
    }

    .divWaitOverlay:before {
        left: -1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .divWaitOverlay:after {
        left: 1.5em;
    }

@-webkit-keyframes load1 {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes load1 {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}*/

@media screen and (max-width: 767px) {
    .pro4 .form-group:not(.plain) label:not(.form-check-label) {
        padding-top: 0px;
    }
}