@import url('fontAwesome/css/font-awesome.min.css');

:root {
    --focus-ring-color: #92722b7d;
}

body {
    background: #d8d8d8 !important;
}

    body:before {
        background-image: linear-gradient(rgb(203, 163, 68), rgb(146, 114, 42));
        border-bottom-color: rgb(35, 37, 40);
        border-bottom-style: solid;
        border-bottom-width: 0px;
        border-left-color: rgb(35, 37, 40);
        border-left-style: solid;
        border-left-width: 0px;
        border-right-color: rgb(35, 37, 40);
        border-right-style: solid;
        border-right-width: 0px;
        border-top-color: rgb(35, 37, 40);
        border-top-style: solid;
        border-top-width: 0px;
        box-sizing: border-box;
        color: rgb(35, 37, 40);
        content: "";
        display: block;
        height: 8px;
        line-height: 24px;
        position: absolute;
        width: 100%
    }
/* #region [ Hassantuk Buildings ] */
input,
textarea,
button,
select,
a, * {
    -webkit-tap-highlight-color: transparent;
}
/* Used for links inside the info-message */
.info-msg a {
    font-size: larger;
    font-weight: bold;
    text-decoration: underline;
}

.theme-background-color {
    background-color: #C8122E;
}

.theme-text-color,
.theme-hover-text-color:hover {
    color: #C8122E;
}

.theme-border-color {
    border-color: #C8122E;
}

.theme-hover-background-color:hover,
.theme-before-background-color:before,
.theme-after-background-color:after,
.theme-hover-before-background-color:hover:before,
.theme-hover-after-background-color:hover:after {
    background-color: #C8122E;
}

.theme-hover-border-color:hover,
.theme-before-border-color:before,
.theme-after-border-color:after,
.theme-hover-before-border-color:hover:before,
.theme-hover-after-border-color:hover:after {
    border-color: #C8122E;
}

.border-dashed-bottom {
    border-bottom: 1px dashed #ccc;
}

.border-dashed-top {
    border-top: 1px dashed #ccc;
}

.lh16 {
    line-height: 1.6
}

.lh14 {
    line-height: 1.4
}

.word-break {
    word-break: break-word !important
}

.word-break {
    word-break: break-word !important
}

input[type=button].disabled, input[type=submit].disabled {
    background: #cccccc !important;
    pointer-events: none;
}

.serv-wrapper.device {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/fire-alarm.svg');
}

.serv-wrapper.maintenance {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/maintenance.svg');
}

.serv-wrapper.alarm {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/fire-alarm-sound.svg');
}


.service-box.edit {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/edit-app.svg');
}

.service-box.delete {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/edit-app.svg');
}

.service-box.propertydetail {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/propertydetail.svg');
    background-size: 50%;
}

.service-box.pay {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/pay.svg');
}

.service-box.invoices {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/view-invoices.svg');
}

.service-box.appointments {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/appointments.svg');
}

.service-box.assets {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/assets.svg');
}

.service-box.snags {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/viewsnags.svg');
}

.service-box.deactivate {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/deactivate.svg');
}

.service-box.changeowner {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/change-owner.svg');
}

.service-box.add {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/add-new-devices.svg');
}

.service-box.replace {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/replacedevice.svg');
}

.service-box.relocate {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/relocatesvg.svg');
}


.file-box.edit {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/edit-app.svg') no-repeat center 20px;
}

.file-box.delete {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/del-app.svg') no-repeat center 20px;
}


.file-box.schedule {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/comp-scheduled.svg') no-repeat center 20px;
}

.file-box.reschedule {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/re-apntmnt.svg') no-repeat center 20px;
}

.file-box.cancel {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/cancel-apntmnt.svg') no-repeat center 20px;
}

.file-box.maintenance {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/addmaintenance.svg') no-repeat center 20px;
}

.file-box.completed {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/maintcompleted.svg') no-repeat center 20px;
}

.file-box.partialy {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/partially-completed.svg') no-repeat center 20px;
}

.file-box.view {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/viewinvoice.svg') no-repeat center 20px;
}

.file-box.iwo {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/iwo.svg') no-repeat center 20px;
}

.file-box.pay {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/pay.svg') no-repeat center 20px;
}

.file-box.rectify {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/rectify.svg') no-repeat center 20px;
}

.file-box.certificate {
    background: url('https://portal.moi.gov.ae/eservices/Images/HassantukIcons/buildings/maintcompleted.svg') no-repeat center 20px;
}


/* ================= Margins Classes ============= */

.ml-5 {
    margin-left: 5px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

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

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

.mt-15 {
    margin-top: 15px !important;
}

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

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

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

.w100 {
    width: 100% !important;
}


/* -------------------------- */

.longLabels270 .CaptionLabel, .longLabels270 {
    min-width: 270px !important;
}

.emg-contacts {
    /*background-color: #f9f9f9;*/
    padding: 5px;
    box-sizing: border-box;
}

.autocomplete-suggestion {
    overflow: hidden;
    padding: 2px 3px;
    border-bottom: dotted 1px;
}

    .autocomplete-suggestion:last-child {
        border-bottom: none;
    }

.autocomplete-selected {
    background: #f0f0f0;
}

.file-name-required {
    color: #444 !important;
    padding: 0px !important;
    line-height: 12px;
}

.veh-plate {
    display: inline-flex;
    border: dashed 1px #c1c1c1;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
}

    .veh-plate input {
        cursor: pointer;
    }

.info-msg-popup {
    padding: 2px 15px !important;
    font-size: 16.0px !important;
    max-width: 408px !important;
    margin: 0px !important;
    border-bottom-width: 5px !important;
}

.longLabels125 .CaptionLabel {
    min-width: 125px;
}

.longLabels110 .CaptionLabel {
    min-width: 110px;
}

.popup-note {
    line-height: 17px;
    border: dashed 1px;
    border-radius: 5px;
    font-size: 16.0px;
}

.multiselect-dropdown {
    max-width: none;
    height: 190px !important;
    box-shadow: none !important;
    overflow: auto;
    background-color: #fff !important;
    border: none;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

    .multiselect-dropdown li {
        width: 47%;
        display: inline-block;
        margin: 5px 5px;
        vertical-align: middle;
    }

    .multiselect-dropdown input {
        display: none;
    }

    .multiselect-dropdown label {
        display: inline-block;
        width: 100%;
        padding: 5px 10px;
        border: solid 1px #a29d9d;
        border-radius: 5px;
        cursor: pointer;
        word-break: break-word;
        white-space: normal;
        line-height: 25px;
        box-sizing: border-box;
    }

    .multiselect-dropdown input:checked + label {
        background-color: #03b1ff;
        color: #fff;
    }

@media only screen and (max-width: 480px) {
    .multiselect-dropdown li {
        width: 90% !important;
        padding: 5px !important;
        margin: 0px !important;
    }
}

/**Clearance Certificate list page style - START*/

.clerance-certificate {
    border: 2px solid #c8122e;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 17px;
    margin-right: 17px;
    margin-bottom: 20px;
    background: #fbfbfb;
    width: calc(47% - 20px) !important;
    display: inline-flex;
    vertical-align: top;
    /*min-height: 230px;*/
    flex-direction: column;
}
.hrservice-trainingappotmentlist {
    border: 2px solid #ccc;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 17px;
    margin-right: 17px;
    margin-bottom: 20px;
    background: #fbfbfb;
    width: calc(31% - 20px) !important;
    display: inline-flex;
    vertical-align: top;
    /*min-height: 230px;*/
    flex-direction: column;
}

.clerance-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #c8122e;
    padding: 15px 15px 0px;
}

.clerance-body {
    padding: 0 15px;
    /*flex: 1;*/
}

.clerance-header span {
    font-size: 20px;
    padding: 0 12px;
    margin-left: 8px;
}

.clerance-certificate .left-area {
    width: 55%;
    clear: both;
    display: inline-block;
    padding-bottom: 10px;
    vertical-align: top;
}

.clerance-certificate .right-area {
    width: 39%;
    clear: both;
    display: inline-block;
    padding-bottom: 10px;
    vertical-align: top;
}

    .clerance-certificate .right-area span,
    .clerance-certificate .left-area span {
        padding: 0px;
    }

.clerance-certificate .btnSection a span {
    margin-left: 4px;
}

.clerance-footer {
    background: #c8122e;
    padding: 10px;
    min-height: 15px;
}

    .clerance-footer a {
        color: #ffffff;
        margin: 0 8px;
        cursor: pointer;
        min-height: 20px;
    }

        .clerance-footer a:hover {
            color: #fff;
        }

.clerance-certificate.compact .left-area,
.clerance-certificate.compact .left-area {
    padding-bottom: 5px;
}

.clerance-certificate .controlContainer .ValueLabel {
    word-break: break-all;
}

.clerance-certificate .controlContainer .right-area .ValueLabel,
.clerance-certificate .controlContainer .left-area .ValueLabel {
    padding-top: 0;
    line-height: 1.2;
}
/**Clearance Certificate list page style - END*/
/** New Styles by M.I */
.errorMsg {
    color: #e40000;
}

.trackingNm {
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    width: 470px;
    margin: 20px auto;
}

    .trackingNm .trackingTitle {
        font-size: 18.0px;
        float: left;
        padding-top: 14px;
        font-weight: bold;
    }

    .trackingNm .trackingValue {
        float: left;
        border: 2px dashed #969696;
        min-width: 100px;
        padding: 7px 8px;
        border-radius: 5px;
        font-size: 20px;
        background: #f7f7f7;
        margin: 0 20px;
        vertical-align: middle;
        font-weight: bold;
        line-height: 22px;
    }

    .trackingNm .copyToBoard {
        font-size: 16.0px;
        color: #808080;
        padding-top: 12px;
        float: left;
        cursor: pointer;
    }

        .trackingNm .copyToBoard i {
            padding-right: 4px;
            font-size: 18.0px;
        }

.sixCol .rowCloContainer {
    width: 32% !important;
    box-sizing: border-box;
}

.sixCol .rowCloContainer {
    clear: none;
    display: inline-block;
    /* float: right; */
    padding: 0px 10px 14px;
}

.controlContainer .column-left {
    color: #666;
    float: none;
    font-size: 16.0px;
    line-height: 1.6em;
    padding: 0px;
    font-weight: 400;
    position: relative;
}

.controlContainer .column-right {
    color: #333;
    float: none;
    font-size: 16.0px;
    line-height: 1.6em;
    min-width: 150px;
    padding: 0px 0px;
    font-weight: 700;
    position: relative;
}

.controlContainer .column-left .CaptionLabel {
    padding: 0 0 5px;
}

    .controlContainer .column-left .CaptionLabel.required-field {
        padding-right: 12px;
        background-position: right 2px;
        float: none;
        display: inline-block;
    }

.controlContainer .column-right select,
.controlContainer .column-right textarea,
.controlContainer .column-right input {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0;
    /*display: block;*/
    float: none !important;
    box-sizing: border-box;
    min-height: 32px;
}

.bb0 {
    border-bottom: 0 !important;
}

.bt0 {
    border-top: 0 !important;
}

.controlContainer.tableView {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    margin: 0px;
}

    .controlContainer.tableView .rowCloContainer {
        border-top: 1px dashed #ccc;
        margin: 0;
        padding: 5px 0;
        box-sizing: border-box;
    }

        .controlContainer.tableView .rowCloContainer:first-child, .controlContainer.tableView.fourCol .rowCloContainer:nth-child(2):not(.w100) {
            border-top: 0;
        }

.controlContainer.fourCol.tableView .rowCloContainer:nth-child(2n+1) {
    clear: both;
}

.controlContainer.tableView .colLeft {
    min-height: 30px;
    width: 40%;
}

    .controlContainer.tableView .colLeft span {
        display: inline-block;
    }

.controlContainer.tableView .colRight {
    width: 49%;
    min-height: 30px;
    word-break: break-all;
}

@media (min-width: 780px) {
    .controlContainer.tableView .l30 .colLeft {
        width: 30%;
    }

    .controlContainer.tableView .l30 .colRight {
        width: calc(70% - 35px);
    }

    .controlContainer.tableView .w100 .colLeft {
        width: 20%;
    }

    .controlContainer.tableView .w100 .colRight {
        width: calc(80% - 35px);
    }

    .controlContainer.tableView .w100.l30 .colLeft {
        width: 30%;
    }

    .controlContainer.tableView .w100.l30 .colRight {
        width: calc(70% - 35px);
    }
}


@media (min-width: 780px) {
    .mobileLbl{
        display:none;
    }
}

@media (max-width: 520px) {
    .controlContainer.tableView:not(.fourCol) .colRight {
        width: 100%;
    }

    .controlContainer.tableView:not(.fourCol) .colLeft {
        width: 100%;
    }

    .selectedtc .CaptionLabel {
        width: 100% !important;
    }

    .sideNavFineDetial {
        width: 44%;
    }
}
/** New Styles by M.I ends here */
.d-block {
    display: block !important;
}

.retired-salary-mob {
    display: none;
}


#AppointmentsAlert .popup_Appt label {
    font-weight: 600;
    color: #666;
}

#AppointmentsAlert .popup_Appt span {
    color: #666;
}

.wic-cert-detail {
    margin-top: 50px !important;
    box-sizing: border-box;
    border: solid 1px #f9f9f9;
    padding: 10px;
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/ticket-clearance-certificate.svg);
    background-repeat: no-repeat;
    background-size: 30%;
    filter: invert(7%);
    overflow: auto;
}

.card-header2 {
    overflow: auto;
    display: table;
}

    .card-header2 label {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        line-height: 16px;
    }

    .card-header2 i {
        text-align: center;
        font-size: 18.0px !important;
        border: solid 1px #bbb8b8;
        padding: 2px;
        border-radius: 5px;
        min-width: 42px;
        background-color: #fff;
        box-shadow: 0px 1px 1px #666;
    }

        .card-header2 i span {
            font-size: 10px;
            display: block;
            font-family: Arial;
        }

.button.button-telecom {
    background-repeat: no-repeat;
    background-size: 26px;
    background-color: #ffffff !important;
    color: #666;
    background-blend-mode: exclusion;
    height: 42px;
    box-shadow: 0px 2px 2px #666;
    border-color: #ccc;
}

.button.telecom-newSubscribe {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/issuenewNumber.svg');
}

.button.telecom-replaceDamage {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/damageReplace.svg');
}

.button.telecom-changePackage {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/changePackage.svg');
}

.button.telecom-cancelPackage {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/cancelPackage.svg');
}

.button.telecom-transferToPersonal {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/transfertopersonal.svg');
}

.button.telecom-transferToMOI {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/transfertoMOI.svg');
}

.button.telecom-issueNewNumber {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/issuenewNumber.svg');
}

.button.telecom-inquiry {
    background-image: url('https://portal.moi.gov.ae/eservices/Images/EmployeeServices/telecom/inquiry_tele.svg');
}

.inquiry-msg {
    border: dashed !important;
    border-width: 1px !important;
    background-color: lightyellow !important;
}

.required-attachment {
    float: none !important;
    display: table-cell !important;
    line-height: 16px;
    background-position-y: 10px !important;
}


.Violations-List .Violations {
    display: block;
    padding: 10px;
    border: 1px solid #c3c1c1;
    clear: both;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #333;
    cursor: pointer;
}

.Violations-List .leftVac .CaptionLabel {
    padding: 0px;
    margin: 0px;
    color: #fff;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: Arial;
    font-size: 15.0px;
    padding-top: 4px;
    display: block;
}

.Violations-List .typeVac {
    font-size: 19.0px;
    clear: both;
    display: block;
    width: 100%;
}

.Violations-List .dateVac {
    clear: both;
    display: block;
    width: 100%;
}

.Violations-List .select-violation * {
    cursor: pointer;
}
.CurrencySymbol {
    background-image: url(../PublicServices/PageNotFound.aspx.html) !important;
    /*content: "\e900";*/
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}
.group-logo1, .group-logo0 {
    background-image: url(../Images/uaelogo-abudhabi.png) !important;
    background-size: 46px auto !important;
}

.group-logo2 {
    background-image: url(../Images/uaelogo-dubai.png) !important;
}

.group-logo3 {
    background-image: url(../Images/uaelogo-sharja.png) !important;
    background-size: 56px auto !important;
}

.group-logo4 {
    background-image: url(../Images/uaelogo-ajman.png) !important;
}

.group-logo5 {
    background-image: url(../Images/uaelogo-uq.png) !important;
}

.group-logo6 {
    background-image: url(../Images/uaelogo-rak.png) !important;
    background-size: 36px auto !important;
}

.group-logo7 {
    background-image: url(../Images/uaelogo-fujairah.png) !important;
}

.emirate-bg-color0, .emirate-bg-color1 {
    background-color: #8A211B !important;
}

.emirate-bg-color2 {
    background-color: #019BDD !important;
}

.emirate-bg-color3 {
    background-color: #C56D2C !important;
}

.emirate-bg-color4 {
    background-color: #312783 !important;
}

.emirate-bg-color5 {
    background-color: #000000 !important;
}

.emirate-bg-color6 {
    background-color: #D79218 !important;
}

.emirate-bg-color7 {
    background-color: #1E6722 !important;
}

.emirate-border-color0, .emirate-border-color1 {
    border-color: #8A211B !important;
}

.emirate-border-color2 {
    border-color: #019BDD !important;
}

.emirate-border-color3 {
    border-color: #C56D2C !important;
}

.emirate-border-color4 {
    border-color: #312783 !important;
}

.emirate-border-color5 {
    border-color: #000000 !important;
}

.emirate-border-color6 {
    border-color: #D79218 !important;
}

.emirate-bg-color7 {
    border-color: #1E6722 !important;
}


.emirate-title {
    display: table-cell;
    min-width: 130px;
    height: 25px;
    border: solid 2px #6678b1;
    text-align: center;
    vertical-align: middle;
    font-size: 16.0px;
    font-weight: 600;
    background-color: #6678b1;
    color: #fff;
    padding: 5px 5px 0px 5px;
    box-sizing: border-box;
}

.emirate-title2 {
    width: 130px;
    height: 60px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
}

@media (max-width: 780px) {
    .group-table thead tr th:first-child {
        min-width: 116px;
    }

    .emirate-title {
        font-size: 16.0px !important;
        min-width: 113px !important;
    }

    .emirate-title2 {
        width: 113px !important;
        font-size: 17.0px !important;
    }

    /*.dec {
        width: 100% !important;
    }*/
}

.section-title span {
    display: inline-block !important;
    margin: 3px;
}

.remove-car {
    width: 38px;
    margin: 0px 5px;
    text-align: center;
    border: solid 1px #666;
    padding: 3px;
    background-color: #f1f1f1;
    box-shadow: 0px 2px 2px;
    font-size: 10px;
    max-height: 25px;
}

    .remove-car i {
        display: block;
        font-size: 16.0px;
    }

.special-need-card {
    background-color: #e8e2e2;
    border: solid 1px #888;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #666;
    margin-bottom: 10px;
}

    .special-need-card .rowCloContainer:first-child {
        background-color: #38acd5 !important;
    }

        .special-need-card .rowCloContainer:first-child * {
            color: #fff !important;
        }

    .special-need-card * {
        color: #404d79 !important;
    }

.special-need .card .emirate-title {
    display: block;
    border-radius: 15px 15px 0px 0px;
    padding: 3px;
    font-size: 15.0px;
}

.special-need .card {
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 15px 15px 0px 0px;
}

.highlight-required-element {
    box-shadow: 0px 3px 3px #a94442 !important;
    border: solid 1px #a94442 !important;
}


.personalize_bar {
    background: #fff;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    z-index: 199999;
    color: #000;
}

    .personalize_bar .goog-te-gadget,
    .personalize_bar .google_translate_note {
        margin-top: 15px;
    }

.bigIcons,
.eservices.Dashboard label .dashblock:hover {
    position: relative;
}

.personalize_bar ul li {
    list-style: none;
    position: relative;
}

.personalize_bar_menu {
    display: inline-block;
    width: 40px;
    height: 100%;
}

    .personalize_bar_menu > ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .personalize_bar_menu li {
        font-size: 24px;
        margin: 24px 0;
        width: 100%;
    }

        .personalize_bar_menu li i {
            cursor: pointer;
        }

        .personalize_bar_menu li a {
            font-size: 24px;
        }

            .personalize_bar_menu li a.active-bar {
                color: #92722b;
                text-decoration: none;
            }

.personalize_bar .personalize_data {
    text-align: center;
    padding: 20px 10px 20px 43px;
}

.personalize_data h3 {
    background: none !important;
    margin-bottom: 15px;
}

.personalize_bar .personalize_data .setting-options {
    margin-bottom: 30px;
}

.personalize_bar .personalize_data .text-left b {
    padding-bottom: 5px;
    display: block;
}

.personalize_bar .personalize_data .text-left b {
    padding-bottom: 5px;
    display: block;
}

.personalize_bar .personalize_data > div.disable {
    display: none;
    visibility: hidden;
}

.personalize_settings .setting-options ul {
}

    .personalize_settings .setting-options ul.fonts-settings li {
        display: inline-block;
        margin: 0 10px;
    }

        .personalize_settings .setting-options ul.fonts-settings li.font-sizer {
            font-size: 36px;
        }

        .personalize_settings .setting-options ul.fonts-settings li#enableBlackStyle i {
            color: #555;
            font-size: 36px;
        }

        .personalize_settings .setting-options ul.fonts-settings li.font-sizer a {
            color: #a00;
            font-weight: 700;
            font-size: 34px;
        }

.personalize_settings ul.theme-settings li {
    display: inline-block;
    margin: 0 5px;
    border: 2px solid transparent;
    border-radius: 50% !important;
    box-sizing: border-box;
    height: 41px;
    width: 41px;
}

    .personalize_settings ul.theme-settings li i {
        font-size: 40px;
        line-height: 40px !important;
    }

    .personalize_settings ul.theme-settings li.active-theme.red {
        border-color: #c8122e !important;
    }

    .personalize_settings ul.theme-settings li.red i {
        color: #c8122e;
    }


    .personalize_settings ul.theme-settings li.active-theme.blue {
        border-color: #165080 !important;
    }

    .personalize_settings ul.theme-settings li.blue i {
        color: #165080;
    }

    .personalize_settings ul.theme-settings li.active-theme.teal {
        border-color: #018a46 !important;
    }

    .personalize_settings ul.theme-settings li.teal i {
        color: #018a46;
    }

    .personalize_settings ul.theme-settings li.active-theme.gold {
        border-color: #92722b !important;
    }

    .personalize_settings ul.theme-settings li.gold i {
        color: #92722b;
        border: none !important;
    }

.personalize_data i,
.personalize_settings a {
    cursor: pointer;
}

.personalize_settings ul.theme-settings li.active-theme {
}

#personalize_settings_loader {
    position: absolute;
    left: 1px;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.8);
    z-index: 1;
    display: none;
}

    #personalize_settings_loader .ajax-loader {
        margin-top: 100px;
    }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /*.personalize_settings ul.theme-settings li {
        height: 40px;
        width: 40px;
    }*/
}

@media screen and (max-width: 780px) {
    .personalize_bar .personalize_data .text-left b {
        padding-bottom: 2px !important;
    }

    .personalize_bar_menu li {
        margin: 15px 0 !important;
    }

    #dvEmployeePageContainer .toolsups {
        display:flex;
        flex-wrap: wrap;
        border: none;
        margin: 0;
        padding: 0;
        gap: 10px;
        width: 100%;
    }

    #dvEmployeePageContainer a.action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-width: 28% !important;
        background-color: #efefef;
        padding: 10px;
        border-radius: 5px !important;
        flex-wrap: wrap;
        margin: 0;
    }

        #dvEmployeePageContainer a.action-button.active {
            color: #232528
        }

    #dvEmployeePageContainer .action-button.active img {
        filter: brightness(1) invert(1);
    }
    #dvEmployeePageContainer .tab-content .card {
        min-height: inherit !important;
        max-width: 44% !important;
    }
}

@media screen and (max-height: 480px) {
    .my_notofications ul.linkslist {
        overflow-y: scroll !important;
        height: 388px !important;
    }
    #dvEmployeePageContainer .tab-content .card{
        max-width:100% !important;
    }
}


.gridViewReadmore {
    white-space: nowrap;
}

    .gridViewReadmore a.labelledLink {
        background: transparent;
        border: none;
        height: auto;
        display: inline-block;
        font-size: 13px;
        text-transform: uppercase;
        width: auto !important;
        overflow: inherit;
        border-radius: 0 !important;
        padding: 0;
        text-align: center;
        vertical-align: top;
    }

        .gridViewReadmore a.labelledLink.aspNetDisabled {
            pointer-events: none;
        }

        .gridViewReadmore a.labelledLink:hover,
        .gridViewReadmore a.labelledLink:focus {
            font-size: 13px;
            background: transparent;
        }

        .gridViewReadmore a.labelledLink img.fileIcon {
            width: 32px;
            height: 32px;
            margin-bottom: 1px;
        }

        .gridViewReadmore a.labelledLink span {
            display: block;
            padding-top: 6px;
            color: #555555;
            text-align: center;
            line-height: 1.4;
        }

        .gridViewReadmore a.labelledLink.aspNetDisabled .roundicon {
            background: #999;
        }

        .gridViewReadmore a.labelledLink .roundicon {
            background: #749698;
            width: 23px;
            height: 23px;
            position: relative;
            padding: 4px;
            border-radius: 100%;
            border: 1px solid #749698;
            margin: 0 auto;
            line-height: 22px;
        }

.gridView.dataTable td {
    vertical-align: middle;
}


.btnsGroupList {
    padding: 6px 2px 4px;
    list-style: none;
    margin: 6px;
    background: #ededed;
    position: absolute;
    box-shadow: 0 0 5px #979494;
    border-radius: 5px;
    z-index: 100;
}

    .btnsGroupList li {
        display: inline-block;
        padding: 0 6px;
    }

@media screen and (max-width: 768px) {
    .btnsGroupList {
        position: relative;
        margin-top: 7px;
        zoom: 0.7;
    }

    body .container-tbl .header-img {
        height: 120px;
    }
}

.labeledRoundIcon {
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

    .labeledRoundIcon span.iconArea {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #92722b;
        padding: 4px;
        font-size: 20px;
        color: #fff;
        display: inline-block;
        position: relative;
    }

    .labeledRoundIcon i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .labeledRoundIcon span.txtArea {
        display: block;
        text-align: center;
        margin-top: 4px;
    }

/* simple icon with text*/

.sIconTxt {
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

    .sIconTxt .fileIcon {
        max-width: 30px;
    }

    .sIconTxt i {
        float: left !important;
        margin: 0 4px 0 0 !important;
        line-height: normal;
    }

    .sIconTxt span.txtArea {
        display: block;
        text-align: center;
        margin-top: 4px;
    }

    .sIconTxt.sIconInline {
        min-width: 114px;
        margin-left: 10px;
    }

.listview-button .fileIcon {
    width: 21px;
    height: auto;
    vertical-align: bottom;
    margin-bottom: -2px;
}

.listview-button .fileIcon {
    width: 21px;
    height: auto;
    vertical-align: bottom;
    margin-bottom: -2px;
}

input::placeholder {
    font-size: 13.0px;
}
/** Application Number Parts **/
.file-doc {
    font-size: 15.0px;
    color: #999;
    margin-top: 6px;
    min-width: 157px;
}

    .file-doc div {
        float: left;
        margin-right: 3px;
    }

        .file-doc div.separator1::after {
            content: "-";
        }

        .file-doc div.separator::after {
            content: "\\";
        }

        .file-doc div.separator1::after,
        .file-doc div.separator::after {
            font-size: 13.0px;
            font-weight: 700;
            position: relative;
            left: 2px;
        }

.highlight-part {
    color: #d60d0d;
    font-weight: 700;
}

.file-number * {
    direction: ltr;
}

.file-number .file-number-parts {
    display: inline-block;
    margin-right: 6px;
}

    .file-number .file-number-parts:last-child {
        margin-right: 0px;
    }

    .file-number .file-number-parts input[type=text] {
        width: 80px !important;
        min-width: unset !important;
        margin: 0px !important;
    }

    .file-number .file-number-parts:nth-child(3) input {
        width: 100px !important;
    }

    .file-number .file-number-parts.separator::after {
        content: "\\";
    }

    .file-number .file-number-parts.separator1::after {
        content: "-";
    }

    .file-number .file-number-parts.separator1::after,
    .file-number .file-number-parts.separator::after {
        font-size: 20px;
        font-weight: 700;
        position: relative;
        left: 4px;
    }
/** Application Number Parts **/

.rolContainer {
    background-color: #f7f7f7;
    border: solid 1px #eee;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #ddd;
    margin-bottom: 10px;
}

    .rolContainer .rowCloContainer:nth-child(2) {
        padding: 3px;
    }

    .rolContainer h6::before {
        /*content: '\f111';*/
        font-weight: normal;
    }

span.example-text {
    clear: both;
    display: block;
    font-size: 13.0px;
    font-weight: normal;
    margin-top: -8px;
    margin-bottom: 5px;
    color: #5F646D;
    border: none !important;
    line-height: 2;
}

.error-class {
    border: solid 1px red !important;
}

select.select2-hidden-accessible {
    min-width: 1px !important;
}

span.selection:focus, .select2-selection:focus {
    outline: none !important;
    border: solid 1px #a94442 !important;
}
/* select2 x button as it is throwin exception/not working */
.frame-left .select2-selection__clear {
    display: none;
}

textarea ~ span.example-text {
    padding: 0px;
}

textarea ~ label.example-text {
    padding: 0px;
}
.rating-pop span.example-text {
    text-align: center;
}
.rating-pop label.example-text {
    text-align: center; 
}

.mb-15 {
    margin-bottom: 1.5em !important;
}

.emailW {
    width: 70% !important;
}
/** Menu Setting only for IE **/
@media only screen and (min-width: 1024px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .cd-secondary-dropdown {
        column-count: 2;
        padding-top: 10px !important;
        column-gap: 0px;
    }

        .cd-secondary-dropdown li.masnory-col-span {
            margin: 0px 0 20px !important;
            padding: 0 10px !important;
            break-inside: avoid;
            page-break-inside: avoid;
            vertical-align: top;
        }

        .cd-dropdown-content li a img,
        .cd-secondary-dropdown li img {
            padding: 0px 4px;
            width: 34px;
            height: 28px;
        }

        .cd-dropdown-content li a img,
        .cd-secondary-dropdown li img,
        .sub-service-tabs li img,
        .vehicleSers.sub-service-contents li img {
            background-color: #666 !important;
        }

    .sub-service-tabs li img {
        padding: 2px !important;
        width: 42px !important;
    }

    .vehicleSers.sub-service-contents li img {
        padding: 2px !important;
        width: 38px !important;
        border-radius: 5px !important;
    }

    .iconsElecCert,
    .caricon {
        background-size: 38px !important;
    }
}
/** Menu Setting only for IE **/


.krajee-default .file-footer-caption .file-caption-info {
    white-space: pre-wrap !important;
    line-height: 15px;
}

.CaptionLabel.required-field {
    background-image: none !important;
    position: relative;
}

    .CaptionLabel.required-field::after {
        background-image: none !important;
        font-family: FontAwesome;
        content: '\f069';
        position: absolute;
        color: #d94636;
        font-size: 9px;
        text-align: center;
        bottom: 8px;
    }

.SubTitles.required-field {
    position: relative;
}


.download-med-certificate {
    margin-top: 5px;
    background-color: #ddd;
    padding: 7px;
    box-shadow: 0px 2px 2px #333;
}

.dataTables_empty {
    display: none !important;
}

select[data-searching=true] {
    padding: 10px !important;
}

.number-control {
    flex-wrap: wrap;
}

.clearfix-flex {
    flex-basis: 100% !important;
    height: 0 !important;
    border: none !important;
}

.number-control span.example-text {
    width: 100%;
    margin-top: -6px !important;
    padding: 0px;
}
.number-control label.example-text {
    width: 100%;
    margin-top: -6px !important;
    padding: 0px;
}

.action-button, .action-button * {
    cursor: pointer;
}


/****** Page Footer - Start *******/
.footer-wrapper {
    position: relative;
    background-color: rgba(247, 247, 247, 1);
    margin: 0 auto;
    clear: both;
    border-top: solid 0.5rem !important;
}

    .footer-wrapper .section-left,
    .footer-wrapper .section-right {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
    }

    .footer-wrapper .section {
        width: 100%;
        display: block;
        vertical-align: top;
    }

        .footer-wrapper .section a,
        .footer-wrapper .section a * {
            cursor: pointer;
            color: #3e4046;
        }

        .footer-wrapper .section a,
        .footer-wrapper .section span {
            font-weight: normal;
        }

    .link-hover a:hover,
    .link-hover a span:hover,
    .footer-wrapper .section1 a:hover,
    .footer-wrapper .section1 a span:hover {
        text-decoration: underline !important;
        color: #000 !important;
    }

    .footer-wrapper .section ul {
        clear: both;
        display: block;
        list-style: none;
    }

        .footer-wrapper .section ul h3 {
            margin-bottom: 15px;
            font-weight: 700;
        }

    .footer-wrapper .section3 ul h3 {
        margin-bottom: 7px;
        letter-spacing: 0.5px;
    }

    .footer-wrapper .section ul li {
        display: inline-block;
        list-style: none;
        vertical-align: middle;
    }

        .footer-wrapper .section ul li:first-child {
            display: block;
        }

    .footer-wrapper .section2 {
        vertical-align: bottom;
    }

        .footer-wrapper .section2 ul {
            display: block;
            margin-bottom: 20px;
        }

        .footer-wrapper .section2 a img {
            max-width: 34px;
            margin-top: 2px;
        }

        .footer-wrapper .section2 a i {
            font-size: 34px;
        }

    .footer-wrapper .section li {
        /*font-size: 16.0px;*/
        /*font-weight: 600;*/
    }

    .footer-wrapper .section1 li {
        display: inline-block !important;
        min-width: 150px;
        margin: 2px 0px;
    }

    .footer-wrapper .section3 li {
        display: block !important;
    }

    .footer-wrapper .section3 li {
        margin-bottom: 4px;
    }

    .footer-wrapper .section3 li {
        /*font-size: 18.0px;*/
        color: #000;
    }

        .footer-wrapper .section3 li * {
            display: inline-block;
            vertical-align: middle;
        }

        .footer-wrapper .section3 li:nth-child(2) * {
            vertical-align: top !important;
        }




    .footer-wrapper a {
        display: inline-block;
        vertical-align: middle;
    }

        .footer-wrapper a img {
            max-width: 138px;
            max-height: 65px;
        }

    .footer-wrapper .visitors li {
        font-weight: normal;
    }

.footer-note * {
    /*font-family: HelveticaNeueW23, Helvetica,Arial,sans-serif !important;*/
    vertical-align: top;
}

.footer-note {
    display: block;
    padding: 3rem 1.375rem;
    border-top: solid 1px #e1e3e5;
    color: #6f6f6f;
    font-size: .875rem;
    line-height: 1.25rem;
}

    .footer-note .total-count {
        margin-top: 5px;
        color: #000;
    }

    .footer-note > div:last-child {
        color: #666;
        /*font-size: 15.0px;*/
    }

li.min-width-200 {
    /*min-width: 300px !important;*/
}

@media screen and (max-width: 768px) {
    .footer-wrapper {
        text-align: center !important;
        border-top: solid 2px #ddd;
    }

        .footer-wrapper .section-left,
        .footer-wrapper .section-right {
            display: block !important;
            width: 100% !important;
            min-height: unset !important;
        }

        .footer-wrapper .section {
            width: 100% !important;
            display: block !important;
            min-height: unset !important;
        }

        .footer-wrapper .section2 {
            margin: 10px auto !important;
        }

            .footer-wrapper .section2 ul {
                display: block !important;
                padding: 0px !important;
                border: none !important;
            }


        .footer-wrapper .section a,
        .footer-wrapper .section span {
            /*font-size: 16.0px;*/
            font-weight: normal !important;
        }

        .footer-wrapper .section ul {
            display: block !important;
            width: 100% !important;
        }

        .footer-wrapper .section li {
            /*font-size: 13.0px !important;*/
        }

        .footer-wrapper .section ul h3 {
            /*font-size: 16.0px;*/
            margin-bottom: 10px !important;
        }

        .footer-wrapper .section1 li {
            display: inline-block !important;
            min-width: unset !important;
            margin: 5px 0px !important;
            vertical-align: middle;
            line-height: 5px;
            margin-bottom: 10px !important;
        }

            .footer-wrapper .section1 li:last-child {
                border: none !important;
            }

        .footer-wrapper .section3 li:first-child,
        .footer-wrapper .section3 li:nth-child(2) span {
            text-align: center !important;
        }

        .footer-wrapper .section3 li:nth-child(2) * {
            max-width: calc(100% - 20px) !important;
        }

        .footer-wrapper .tawasul-container a img {
            max-width: 120px !important;
            max-height: 55px !important;
        }

    .footer-note {
        display: flex;
        flex-flow: column-reverse;
    }

    .footer-note {
        text-align: center !important;
    }

        .footer-note div {
            float: none !important;
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            margin-bottom: 10px !important;
        }

            .footer-note div:first-child {
                margin-bottom: 0 !important;
            }
}

/****** Page Footer - End *******/
.payment-frame {
    height: 600px;
}

@media (max-width: 780px) {
    .payment-frame {
        height: 725px !important;
    }
}


/** Blockchain Services - Starts **/
.blockchain .request-detail {
    padding: 3px;
    box-sizing: border-box;
}

.blockchain .sixCol .rowCloContainer {
    width: 33%;
    padding: 0px;
    background-color: #fff;
}

    .blockchain .sixCol .rowCloContainer .colRight {
        min-width: 135px;
    }

.blockchain .reg-expired {
    color: red !important;
}

.blockchain .reg-active {
    color: green !important;
}

@media (max-width: 780px) {
    .blockchain .sixCol .rowCloContainer {
        width: 100% !important;
        margin-bottom: 1px;
    }

        .blockchain .sixCol .rowCloContainer .colRight {
            min-width: 133px !important;
        }
}
/** Blockchain Services - Ends **/

.icon-info::before {
    content: "\e08b" !important;
    font-size: 19.0px !important;
}

.icon-briefcase::before {
    content: "\e04b" !important;
    font-size: 16.0px !important;
}

@media all and (max-width:780px) {
    .icon-info::before {
        font: normal normal normal 16px/1 FontAwesome !important;
        content: "\f05a" !important;
    }

    .icon-briefcase::before {
        font: normal normal normal 16px/1 FontAwesome !important;
        content: "\f0b1" !important;
    }

    body .settings-tbl .ico-btntbl a,
    body .settings-tbl .ico-btntbl a .fa {
        font-size: 18.0px !important;
    }
}

.e-police-type,
.cd-vehicle-lic-type {
    background-repeat: no-repeat;
    background-size: 72px 72px;
    width: 72px;
    height: 72px;
    filter: invert(20%);
    position: absolute;
}

.e-crimes-type {
    height: 100px;
    background-position-y: 30px !important;
}

.e-police-type-0 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-others.svg);
}

.e-police-type-1 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-finance.svg);
}

.e-police-type-110 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-criminal.svg);
}

.e-police-type-120 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-missingPerson.svg);
}


.e-police-type-140 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-lostItems.svg);
}

.e-police-type-210 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/e-police-traffic.svg);
}

.e-police-type-2 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/eCrime_Incidents.svg);
}

.e-police-type-3 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/eCrimes_Information.svg);
}

.e-police-type-4 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/eCrimes_Consultation.svg);
}

.cd-vehicle-lic-type-8 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/transport-prevention.svg);
}

.cd-vehicle-lic-type-9 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/tanker-transport-prevention.svg);
}

.cd-vehicle-lic-type-10 {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/gas-transport-prevention.svg);
}

.mostUsedBox ul li a.iconALL {
    background-color: #868e96 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 62px 62px !important;
    box-shadow: 0px 2px 2px #333 !important;
}

    .mostUsedBox ul li a.iconALL:hover {
        background-color: #666 !important;
    }

@media screen and (max-width: 768px) {
    .mostUsedBox ul li {
        margin: 5px 0px !important;
    }

        .mostUsedBox ul li a.iconALL {
            background-size: 42px 42px !important;
            width: 52px !important;
            height: 52px !important;
        }

        .mostUsedBox ul li span.lblIcons {
            line-height: 13px !important;
        }

    a.onweb {
        display: none !important;
        visibility: hidden !important;
    }

    a.header-text, a.header-text * {
        font-family: HelveticaNeueW23, Helvetica,Arial,sans-serif !important;
    }

    a.icon-question::before {
        content: "\f059" !important;
        font-family: 'FontAwesome';
        color: #555 !important;
    }

    a.rss-feed::before {
        content: "\f09e" !important;
        font-family: 'FontAwesome';
    }

    .color-change-tbl {
        height: auto !important;
    }

    .settings-tbl {
        padding-top: 0px !important;
    }

        .settings-tbl .ico-btntbl dPlayer a.fa-info-circle:before {
            content: "\f05a" !important;
            font-family: 'FontAwesome';
        }

    body .settings-tbl .ico-btntbl .fa.fa-info-circle {
        font-size: 18.0px !important;
        margin-top: 5px !important;
    }

    body .settings-tbl .ico-btntbl a {
        height: 18px !important;
    }

        body .settings-tbl .ico-btntbl a::before {
            height: 16px !important;
        }

    .ed-master, .ed-visa {
        max-width: 56px;
        display: none !important;
        visibility: hidden !important;
    }
}

.terms-condition-text,
.terms-condition-text * {
    color: #333333 !important;
}

.user-notifications-container {
    clear: both;
}

.verify-email-alert {
    border-top: solid 1px #ccc;
    width: 100%;
    font-size: 16.0px;
    padding: 10px;
    font-weight: normal;
    position: relative;
    overflow: auto;
    box-sizing: border-box;
    /*color: rgb(214, 121, 9) !important;
    background-color: rgb(255, 251, 235) !important;*/
    letter-spacing: 0.25px;
    margin-bottom: 10px;
}

body div.verify-email-alert {
    background-color: rgb(254, 242, 242) !important;
    color: rgb(216, 55, 49) !important;
    border-bottom: solid 1px rgb(216, 55, 49) !important;
}


.user-notifications-container .verify-email-alert:last-child {
    border-bottom: solid 1px #ccc;
    box-shadow: 0px 2px 2px #333;
}

.verify-email-alert i {
    animation: blinkingText 0.8s infinite;
    color: rgb(216, 55, 49) !important;
    font-size: 14px;
}

.verify-email-alert span {
    font-weight: normal;
    font-size: 16px;
}

    .verify-email-alert span span:nth-child(2) {
        cursor: pointer;
    }

    .verify-email-alert span span:nth-child(1) {
        font-style: italic;
    }

@media only screen and (max-width: 480px) {
    .number-control {
        flex-wrap: unset !important;
    }

    .verify-email-alert span {
        font-size: 13px !important;
    }

    body .verify-email-alert {
        padding: 5px !important;
    }
}

#ContentPlaceHolder1_pnlRetirementSalaryCalc .example-text {
    margin-top: -5px;
}

.required-input-field {
    border: 1px solid #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    outline: none;
}

.popup_mp {
    font-size: 16.0px;
}

    .popup_mp.popup p {
        margin: 35px 5px 25px;
        width: 100%;
    }

    .popup_mp.popup a.button {
        padding: 0 30px;
        line-height: 32px;
        float: right;
        margin-top: 10px;
    }

        .popup_mp.popup a.button:hover {
            color: #fff;
        }

.personalize_bar_menu li a.active-bar {
    color: #c8122e;
}

.moi-award {
    float: left;
    width: 85px;
    height: 85px;
    top: 20px;
    position: relative;
}

    .moi-award a img {
        width: 73px;
        height: auto;
    }

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

    .moi-award img {
        width: 3.5rem !important;
        height: auto !important;
        max-width: unset !important;
    }

    ul.default-menu {
        display: none !important;
    }
}

@media screen and (max-width: 350px) {
    body .header-img .logo-txt {
        width: 120px !important;
    }

        body .header-img .logo-txt img {
            max-height: 3rem;
            max-width: 10rem !important;
            margin-top: 6px;
        }

    body .moi-award {
        width: auto !important;
        height: auto !important;
        float: left !important;
        left: .8rem !important;
        top: 10px !important;
    }

        body .moi-award a img {
            height: 2.2rem !important;
            width: auto !important;
        }
}

.vehicleSers {
    width: 100%;
    min-height: 90px;
    display: block;
    clear: both;
}

    .vehicleSers ul {
        padding: 0px;
        list-style: none;
        text-align: center;
    }

    .vehicleSers li:hover {
        background-color: #f5f5f5;
    }

    .vehicleSers li {
        display: inline-block;
        width: 23%;
        border: 1px solid rgba(0,0,0,.125);
        margin-bottom: 5px;
        box-shadow: 0px 2px 2px #777777;
        border-radius: 5px;
    }

        .vehicleSers li a {
            display: table;
            height: 100%;
            width: 100%;
            color: #333;
            clear: both;
            text-align: center;
        }

    .vehicleSers span.icons {
        display: table-cell;
        text-align: center;
        margin-bottom: 4px;
    }

    .vehicleSers li span {
        display: block;
        width: 15%;
        vertical-align: middle;
        clear: both;
    }

    .vehicleSers li img {
        width: 28px;
        height: 28px;
        clear: both;
        filter: invert(60%);
    }

    .vehicleSers h3 {
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        height: 42px;
        width: 90%;
        color: #444;
        margin-bottom: 0px;
        margin-top: 8px;
    }

    .vehicleSers li a::after {
        position: relative;
        font-family: FontAwesome;
        top: 16px;
        color: inherit;
        font-size: 10px;
        font-weight: normal;
    }

ul.default-menu {
    position: absolute !important;
    cursor: pointer;
    list-style: none;
    color: #fff !important;
    top: -277px;
    right: 1px !important;
}

    ul.default-menu li {
        margin-bottom: 8px;
    }

        ul.default-menu li a {
            display: block;
            border-radius: 100px 0px 0px 100px !important;
            padding: 8px 0px 8px 40px;
            text-align: left;
            line-height: 20px;
            background-color: #f5f5f5;
            width: 100%;
            box-sizing: border-box;
            border: solid 1px #ccc;
            box-shadow: 0px 2px 2px #555;
        }

        ul.default-menu li img {
            width: 28px;
            height: 28px;
            border-radius: 100px;
            padding: 4px;
            float: left;
            top: 1px;
            position: relative;
        }



.left-sticky-menu {
    cursor: pointer;
    line-height: 1.5;
    width: 90px;
    display: block;
    position: fixed;
    top: 200px;
    left: 5px;
    font-size: 19.0px;
    text-align: center;
    z-index: 100;
}

    .left-sticky-menu li {
        list-style: none;
        padding-top: 10px;
        display: block;
        padding: 5px 5px 0 5px;
        background-color: rgba(247,247,247,1);
        position: relative;
        transition: background-color 300ms;
        border-bottom: 1px solid #808588;
        border-style: dotted;
    }


        .left-sticky-menu li:after {
            width: 70%;
            content: ' ';
            /*background: #a7abad;*/
            position: absolute;
            left: 15%;
            height: 1px;
            top: 100%;
            display: block;
            z-index: 1;
            transition: background-color 300ms;
        }

        .left-sticky-menu li:before {
            z-index: 2;
            width: 100%;
            content: ' ';
            position: absolute;
            left: 0;
            height: 1px;
            top: -1px;
            display: block;
            z-index: 1;
            transition: background-color 300ms;
        }

        .left-sticky-menu li:last-child:after,
        .left-sticky-menu li:first-child:before {
            display: none !important;
        }

        .left-sticky-menu li.current {
            background: #ccc;
        }

            .left-sticky-menu li.current:after {
                width: 100%;
                background: #666;
                left: 0;
                z-index: 2;
            }

            .left-sticky-menu li.current:before {
                background: #666;
            }

        .left-sticky-menu li:hover {
            background: #C8122E;
        }

    /*.left-sticky-menu li:hover:after {
                background: #C8122E;
            }

            .left-sticky-menu li:hover:before {
                background: #C8122E;
            }*/


    .left-sticky-menu img {
        max-width: 28px;
        margin-bottom: 7px;
        filter: invert(0.75);
    }

    .left-sticky-menu a {
        display: block;
        max-width: 100%;
        /*color: #fff;*/
        font-size: 12px;
        line-height: 1.2;
        padding-bottom: 10px;
        border-radius: 0 !important;
    }

        .left-sticky-menu a:hover {
            color: #fff;
        }

            .left-sticky-menu a:hover img {
                filter: brightness(3) !important;
            }

        .left-sticky-menu a span {
            display: block;
        }

@media screen and (min-width:1023px) {
    .left-sticky-menu li:first-child {
        padding-top: 15px;
        border-radius: 50px 50px 0 0;
    }

    .left-sticky-menu li:last-child {
        padding-bottom: 15px;
        border-radius: 0 0 50px 50px;
    }
}

@media screen and (max-width:1023px) {
    /*body {
        padding-bottom: 60px !important;*/ /* To pull up the document to avoid overlapping with mobile bottom navigation*/
    /*}*/

    div.chatContainer .chatWindow {
        bottom: 150px;
    }

    #openMoiChat {
        bottom: 80px;
    }

    .left-sticky-menu {
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        display: table;
    }

        .left-sticky-menu li img {
            max-height: 25px;
            margin-top: 0;
            max-width: none;
            margin-bottom: 7px;
        }

        .left-sticky-menu li {
            position: relative;
            font-size: 9px;
            padding: 10px 5px 5px;
            vertical-align: middle;
            display: table-cell;
            width: 50%; /* for 2 icons*/
            border-bottom: 0;
            border-right: 1px solid #808588;
        }

    body.loggedin .left-sticky-menu li {
        width: 20%; /* for 5 icons */
    }

    body .left-sticky-menu {
        display: table;
    }

    .left-sticky-menu a {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .left-sticky-menu span {
        line-height: 1.2;
        font-size: 9px;
    }

    .left-sticky-menu li:after {
        width: 1px;
        content: ' ';
        background: #a7abad;
        position: absolute;
        left: 100%;
        height: 70%;
        top: 15%;
        display: block;
        z-index: 1;
    }

    .left-sticky-menu li:before {
        width: 1px;
        content: ' ';
        position: absolute;
        right: -1px;
        height: 100%;
        top: 0px;
        display: none;
        z-index: 1;
    }

    .left-sticky-menu li.current:after {
        width: 1px;
        right: -1px;
        left: 100%;
        z-index: 2;
        height: 100%;
        top: 0;
    }


    .left-sticky-menu li.current:before {
        display: block;
        left: -1px;
    }
}

@media screen and (min-width:1023px) and (max-height:800px) {
    .left-sticky-menu {
        transform: scale(0.85);
        transform-origin: 50% 0;
        top: 200px;
    }
}



.userProfile span#lblUserProfileName {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
}

.profile-image {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    border-radius: 100px;
}

body[dir=ltr] .profile-image {
    margin-right: 15px;
}

body[dir=rtl] .profile-image {
    margin-left: 15px;
}

.profile-flag {
    width: 28px;
    margin-top: 3px;
    display: inline-block;
    clear: both;
    vertical-align: top;
    border: solid 1px #f5f5f5;
    box-sizing: border-box;
    max-height: 15px;
}

body[dir=ltr] .profile-flag {
    margin-right: 15px;
}

body[dir=rtl] .profile-flag {
    float: left;
    margin-left: 15px;
    margin-top:0px;
}


.button.simple-button {
    background-color: #fff !important;
    color: #777;
    border: none;
    text-decoration: underline;
    font-size: 16.0px;
    padding: 3px;
}

.loaderImg {
    background-image: url('../Images/loader.gif');
    background-size: contain;
    width: 30px;
    height: 30px;
}

.CompanySelectorOverlayBg {
    background: rgba(255,255,255,0.85);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10001;
    display: none;
}

.userProfile {
    z-index: 10002;
}
/* Comapny Selector Section Styling */
.userCompanySection {
    display: flex;
    align-items: center;
}

.company-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

    .company-switch span,
    .profile-switch span {
        font-weight: bold;
        font-size: 11px;
        padding: 0 15px 0 5px;
    }

.profile-switch span {
    padding: 0 10px 0 5px;
}

.company-switch:after {
    content: '\f0d7';
    font-family: FontAwesome;
    line-height: 2.5em;
    position: absolute;
    right: 0px;
    color: #444;
    top: -4px;
}

.profile-switch {
    margin-right: 10px;
    border-radius: 0 !important;
    display: inline-block !important;
    position: relative;
}

    .profile-switch:after {
        content: '';
        width: 1px;
        height: 70%;
        background: #555;
        display: block;
        position: absolute;
        right: 0;
        bottom: 10%;
    }

.company-switcher a img {
    position: relative;
    top: 2px;
}
@media screen and (max-width:768px) {
    .select2-dropdown.ddlCompanies {
        background: #fff;
        border-radius: 0;
        border: none;
        box-shadow: 0 2px 20px rgb(0 0 0 / 14%);
        z-index: 10002;
        width: auto !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }
}

.select2-dropdown.ddlCompanies {
    background: #fff;
    border-radius: 0;
    border: none;
    box-shadow: 0 2px 20px rgb(0 0 0 / 14%);
    z-index: 10002;
    width: auto !important;
}

    .select2-dropdown.ddlCompanies .header {
        padding: 10px 15px;
        font-size: 16.0px;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
    }

        .select2-dropdown.ddlCompanies .header img {
            width: 18px;
            margin-right: 8px;
        }


        .select2-dropdown.ddlCompanies .header i {
            font-size: 10px;
            position: absolute;
            right: 7px;
            top: 7px;
            cursor: pointer;
            padding: 5px;
        }

    .select2-dropdown.ddlCompanies .select2-search {
        padding: 10px 15px;
    }

        .select2-dropdown.ddlCompanies .select2-search:after {
            content: '\f002';
            font-family: FontAwesome;
            line-height: 2.5em;
            position: absolute;
            left: 20px;
            color: #444;
            top: 40px;
            font-size: 16.0px;
        }

        .select2-dropdown.ddlCompanies .select2-search .select2-search__field {
            width: 100% !important;
            margin: 0;
        }

    .select2-dropdown.ddlCompanies .select2-results {
        background: #fff;
        padding: 0 15px;
    }

        .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option {
            padding: 6px 10px 4px;
            border-bottom: 1px solid #ccc;
            /*margin-bottom: 10px;*/
        }

            .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option:last-child {
                /*margin-bottom: 20px;*/
                border-bottom: none;
            }

            .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option div,
            .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option[aria-selected=true] div {
                font-size: 11px;
                font-weight: bold;
                color: #c8122e;
            }

                .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option div > span,
                .select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option[aria-selected=true] div > span {
                    font-size: 13.0px;
                    font-weight: bold;
                    color: #444;
                    display: block;
                    margin-top: 2px;
                }

.select2-container--default .select2-results > .select2-results__options {
    max-height: 350px;
    margin-bottom: 10px;
}

.select2-container--default .select2-dropdown.ddlCompanies .select2-results__option--highlighted {
    background: #afafaf;
}

.select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option--highlighted div,
.select2-dropdown.ddlCompanies .select2-results .select2-results__options .select2-results__option--highlighted div span {
    color: #fff !important;
}

.select2-container--default .select2-dropdown.ddlCompanies .select2-results__option[aria-selected=true] {
    background: #eee;
}

/* Comapny Selector Section Styling End  */

.UCCivilDefenseInstitution .card-header .ValueLabel {
    display: block;
    font-weight: normal !important;
    line-height: 2;
}


.select2-container--default .select2-selection--single .select2-selection__clear {
    padding: 0;
}

.gridview-cards {
    position: relative;
    clear: both;
}

    .gridview-cards .controlContainer thead {
        display: none !important;
    }

    .gridview-cards .controlContainer tbody tr {
        display: inline-block !important;
        width: calc(50% - 10px);
        margin: 5px;
        vertical-align: top;
    }

    .gridview-cards .card {
        min-height: unset !important;
        width: 98% !important;
        margin: 0px !important;
        word-break: break-all;
    }

    .gridview-cards .card-header > span {
        display: contents;
    }

    .gridview-cards .card .colRight span {
        padding: 0px !important;
    }

    .gridview-cards .controlContainer .rowCloContainer {
        padding: 2px;
    }

body .gridview-cards .gredview-button {
    min-width: unset !important;
    width: 100px !important;
    color: #fff !important;
    margin: 0px auto;
    background: #777 !important;
}

body .gridview-cards .server-paging,
body .gridview-cards .server-paging td table,
body .gridview-cards .server-paging table > tbody > tr {
    width: 100% !important;
    text-align: center !important;
    background-color: #fff !important;
}

    body .gridview-cards .server-paging table > tbody > tr {
        color: #333;
        float: left;
        line-height: 2em;
        font-weight: 700;
        margin-bottom: 10px;
    }

        body .gridview-cards .server-paging table > tbody > tr td {
            display: inline;
            margin: 0px 3px;
        }

            body .gridview-cards .server-paging table > tbody > tr td span {
                background: #92722b;
                color: #fff;
                display: inline-block;
                position: relative;
                line-height: 26px;
                width: 32px;
                height: 32px;
                font-size: 16.0px;
                border-radius: 100px !important;
                padding: 4px !important;
                font-weight: normal;
                box-sizing: border-box !important;
            }

            body .gridview-cards .server-paging table > tbody > tr td a {
                display: inline-block;
                width: 32px;
                height: 32px;
                text-decoration: none;
                font-size: 16.0px !important;
                padding: 1px 1px 0px;
                line-height: 26px;
                font-weight: normal;
            }

                body .gridview-cards .server-paging table > tbody > tr td a:hover {
                    color: #232528;
                    font-weight: bold;
                }


    body .gridview-cards .server-paging > td {
        width: 100%;
        display: block;
    }

body .gridview-cards .gredview-button {
    display: inline-block;
    vertical-align: middle;
}

body .gridview-cards .gridViewReadmore {
    margin: 0;
    text-align: center;
}

body .gridview-cards .card .tableView {
    margin-top: 0;
    border-top: 0;
    border: none;
}

body .gridview-cards div.dataTables_scrollBody,
body .gridview-cards table.dataTable.no-footer {
    border: none !important;
}

@media all and (max-width:780px) {
    .gridview-cards .controlContainer tbody tr {
        width: 100% !important;
    }

    body .responsive-tbl-holder .gridview-cards table {
        min-width: unset !important;
    }
}

.watermark-label-new {
    transform: rotate( -20deg ) scale(1.5);
    -webkit-transform: rotate( -20deg ) scale(1.5);
    -moz-transform: rotate(-20deg) scale(1.5);
    -ms-transform: rotate(-20deg) scale(1.5);
    pointer-events: none;
    user-select: none;
    z-index: 1;
    border: 2px solid #c8122e;
    border-radius: 12px;
    opacity: 0.1;
    font-size: 15.0px;
    color: #c8122e;
    font-weight: bold;
    text-align: center;
    top: 84px;
    bottom: 0;
    padding: 5px;
    min-width: 150px;
    max-width: 50%;
    height: 30px;
    width: 17%;
    position: relative;
}

.explosive-attach-container .file-input {
    width: calc(100% - 12px) !important;
}

@media (max-width: 780px) {
    body .explosive-attach-container {
        width: calc(100% - 25px) !important;
    }

        body .explosive-attach-container .krajee-default .file-footer-caption .file-caption-info {
            white-space: pre-wrap !important
        }
}

.explosive-attach-container .file-input {
    width: auto;
    float: none;
    display: block;
    margin-bottom: 10px;
}

.explosive-attach-container .file-preview {
    margin-bottom: 0;
}

.explosive-attach-container .krajee-default.file-preview-frame {
    display: flex;
    float: none;
}

.explosive-attach-container .krajee-default .file-preview-image {
    width: 100px;
    max-width: 100px !important;
    height: 100px !important;
    max-height: 100px !important;
}

.explosive-attach-container .krajee-default.file-preview-frame .file-thumbnail-footer {
    flex: 1;
    padding: 10px;
}

.explosive-attach-container .btn.button.btn-file {
    position: static !important;
}

.explosive-attach-container .krajee-default .file-footer-caption .file-caption-info {
    white-space: unset !important
}

.explosive-attach-container .krajee-default .file-upload-indicator {
    bottom: 0px !important;
}

.explosive-attach-container .krajee-default .file-footer-caption {
    width: 100% !important;
}

.explosive-attach-container .krajee-default .file-thumb-progress {
    bottom: 0px;
}

.explosive-attach-container .krajee-default.file-preview-frame .file-thumbnail-footer {
    max-height: unset;
}

.explosive-attach-container .krajee-default.file-preview-frame .kv-file-content,
.explosive-attach-container .exp-attachment-preview img {
    border: solid 1px #999;
}

.service-button-container {
    margin: 5px;
    display: inline-block;
}

.service-button {
    display: inline-block;
    cursor: pointer;
    background-color: #fff;
    min-width: unset;
    height: 30px;
    font-weight: 600;
    color: #777;
    font-size: 13px;
    border: solid 1px #ddd;
    line-height: 27px;
    border-radius: 5px !important;
    box-shadow: 0px 2px 2px #333;
    margin: 3px;
    padding: 0 10px;
}

.service-request::before {
    content: '\f055';
    top: 3px;
    font-size: 20px;
}

.service-edit-request::before {
    content: '\f040';
    top: 3px;
    font-size: 20px;
}

.reverse-payment {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/reversalMoneyDark.svg);
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-size: 22px 22px;
}

.service-list::before {
    font-size: 18.0px;
    content: '\f03a';
    top: 2px;
}

.service-edit-request::before,
.service-request::before,
.service-list::before {
    font-family: FontAwesome;
    position: relative;
    font-weight: normal;
}

.explosive-gv-selectable input[type="radio"],
.explosive-gv-selectable input[type="checkbox"] {
    margin: 0 !important;
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    padding: 10px;
    min-width: unset !important;
}

@media (max-width: 780px) {
    .custom-radio-button > div {
        width: 100% !important;
    }
}

.custom-radio-button {
    margin-bottom: 10px !important;
}

    .custom-radio-button > div {
        width: 35%;
    }

    .custom-radio-button .redPointer input {
        width: 100px;
    }

.simple-card {
    background: none !important;
    background-color: #fff !important;
}

.simple-card-v1 .card-header .ValueLabel {
    font-weight: normal !important;
}

.simple-card-v1 .card-header a {
    margin: 5px;
    font-size: 16.0px;
}

.simple-card-v1 .card-body .rowCloContainer {
    border-bottom: 1px dashed #ccc;
}

    .simple-card-v1 .card-body .rowCloContainer:last-child {
        border: 0;
    }

.wiz-content.readonly-inst {
    border: none !important;
    box-shadow: none !important;
    padding: 0px !important;
    margin: 0px !important;
    width: calc(100% - 2px) !important;
}

.readonly-inst.controlContainer::after,
.institution-card::after,
.uae-code-card::after {
    position: absolute;
    content: '\f0b1';
    font-family: FontAwesome;
    font-size: 150px;
    opacity: 0.2;
    top: 35%;
}

.readonly-inst.controlContainer {
    position: relative;
}

.uae-code-card::after {
    content: '\f02d';
}

.institution-card::after,
.uae-code-card::after {
    font-size: 60px;
}

.UCCivilDefenseInstitution .simple-card {
    width: 310px !important;
    margin: 5px !important;
}

.black-points-icon {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/blackpoints-icon.svg);
    background-repeat: no-repeat;
    background-size: 19px 19px;
    height: 24px;
    background-color: #444;
    cursor: pointer;
    position: absolute;
}

    .black-points-icon span {
        line-height: 28px;
        color: #fff;
        cursor: pointer;
    }

@media (max-width: 780px) {
    .black-points-icon {
        position: inherit !important;
        background-size: 22px 22px !important;
        height: 24px !important;
    }

        .black-points-icon span {
            line-height: 24px !important;
            font-size: 10px !important;
        }

    .checkbox-list-container .checkbox-list {
        width: 100% !important;
    }

    .input-search-filter {
        right: unset !important;
        left: unset !important;
    }

    .input-search-filter-icon::after {
        top: 38px !important;
    }
}



.bordered-block {
    padding: 10px 15px;
    border: 1px dotted #ccc;
    box-shadow: inset -2px -2px 4px 1px #efefef;
    border-radius: 3px;
}

.tabsContainer .tabButtonsContainer {
    margin-bottom: 0;
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.tabsContainer .tabButton {
    display: inline-block;
    margin-right: 0;
    background-color: white;
    padding: 5px;
    border-radius: 4px !important;
    font-size: 15px !important;
    text-align: center;
    border: 1px solid #ccc;
    margin: 0 4px;
    padding: 9px 10px;
    border-top: 3px solid #ccc;
    min-width: 80px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    border-radius: 3px 3px 0px 0px !important;
    margin-bottom: -1px;
    text-transform: capitalize;
    flex: 1;
    cursor: pointer;
}

    .tabsContainer .tabButton.aspNetDisabled {
        color: #aaa;
    }

    .tabsContainer .tabButton img,
    .tabsContainer .tabButton svg {
        margin-bottom: 7px;
        max-height: 30px;
    }

    .tabsContainer .tabButton span {
        display: block;
    }

    .tabsContainer .tabButton.selected {
        border-bottom: 1px solid #f1f1f1 !important;
        background: #808588 !important;
        border-color: #808588 !important;
        color: #fff;
    }

    .tabsContainer .tabButton:hover {
        color: #fff;
    }

        .tabsContainer .tabButton.selected img,
        .tabsContainer .tabButton:hover img {
            filter: brightness(5) invert(0);
            -ms-filter: brightness(5) invert(0);
        }

        .tabsContainer .tabButton.selected svg,
        .tabsContainer .tabButton:hover svg {
            fill: #fff;
        }


.tabsContainer .tabContent {
    min-height: 100px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 20px 5px;
    border-bottom: 1px solid #ccc;
    display: none;
    min-height: 250px;
    position: relative;
}

    .tabsContainer .tabContent.show {
        display: block;
    }

    .tabsContainer .tabContent .card {
        box-sizing: border-box;
    }

.terms-conditions {
    padding: 10px 25px;
}

    .terms-conditions ul,
    .terms-conditions ul li {
        margin: 10px;
    }

.institution-card .cardLinksweapon,
.uae-code-card .cardLinksweapon {
    margin-top: 10px;
}

    .institution-card .cardLinksweapon li a,
    .uae-code-card .cardLinksweapon li a {
        background-color: #777 !important;
        height: unset;
        color: white;
        border: none !important;
        min-width: 100px;
        height: 20px;
        vertical-align: middle;
        box-shadow: 0px 2px 2px #000;
        margin-bottom: 5px;
    }

        .institution-card .cardLinksweapon li a:hover,
        .institution-card .cardLinksweapon li a:focus,
        .uae-code-card .cardLinksweapon li a:hover,
        .uae-code-card .cardLinksweapon li a:focus {
            background-color: #333 !important;
            filter: none !important;
        }


.institution-lic-type-6::after {
    content: '\f19c';
}

body .new-certificate {
    background: #3f5c8c !important;
    border: #3f5c8c !important;
}

.new-certificate::after {
    content: '\f067';
    font-size: 16.0px;
    color: #fff;
    font-family: FontAwesome;
    line-height: 1.5em;
}

.loader-new-tbl .dec {
    width: 74%;
}


.submenu-title-container {
    display: flex !important;
    align-items: center;
    white-space: unset !important;
}

    .submenu-title-container .submenu-title-span {
        display: inline-block;
        line-height: normal;
        white-space: normal;
        line-height: 13px;
        text-transform: capitalize;
    }

    .submenu-title-container .new-service-sub {
        min-width: 40px;
    }

.icon-huawei {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/icon_huawei.svg);
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
    cursor: pointer;
}

.verify-eid-container {
    margin-top: 10px;
    border: solid 1px #ddd;
    padding: 15px;
}

span.entity-name {
    line-height: 13px;
    text-transform: capitalize;
}

.checkbox-list-container {
    height: 170px !important;
    overflow-y: scroll;
    margin-bottom: 10px;
    border: solid 1px #ddd;
    padding: 5px;
    box-sizing: border-box;
}

    .checkbox-list-container .checkbox-list {
        width: calc(33% - 12px);
        margin-bottom: 10px;
        box-sizing: border-box;
    }

        .checkbox-list-container .checkbox-list td {
            padding: 1px;
            /*line-height: 12px;*/
        }

.partner-list,
.partner-list li {
    list-style: none;
}

.partner-list {
    display: inline-block;
}

.input-search-filter {
    width: 150px;
    display: block;
    position: relative;
    min-width: unset;
    height: 16px;
    background-color: white;
    margin: 5px 0px;
}

.input-search-filter-icon {
    position: relative;
    background-color: #e8e8e8;
    border: solid 1px #ddd;
    border-bottom: none;
    box-sizing: border-box;
}

    .input-search-filter-icon::after {
        font-family: FontAwesome;
        content: '\f0b0';
        position: absolute;
        color: #ddd;
        font-size: 18.0px;
        top: 10px;
    }

.checkbox-list input[type=checkbox] {
    min-width: unset;
    bottom: -2px;
}

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

.margin-right-10 {
    margin-right: 10px;
}

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

.margin-left-10 {
    margin-left: 10px;
}

.margin-10 {
    margin: 10px;
}

.cb-select-all {
    position: absolute;
}

@media (max-width: 780px) {
    .cb-select-all input[type=checkbox] {
        min-width: unset !important;
    }

    .reverse-payment {
        margin-bottom: 15px;
    }

    .ed-payment-detail-title {
        clear: both;
    }
}

.rsbtn_player_item.rsbtn_rewind,
.rsbtn_player_item.rsbtn_forward,
.rsbtn_player_item.rsbtn_speed {
    display: none;
}

div#readspeaker_button1 {
    min-width: 255px;
    padding-top: 7px;
    padding-bottom: 0;
}

    div#readspeaker_button1.rs_mobile {
        display: none !important;
    }

#readspeaker_button1 .rsbtn_play {
    border-radius: 0 !important;
}

.rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown:before {
    right: 0px;
}

.rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown .rsbtn_slider span.rsbtn_volume_handle {
    left: 6px;
}

#rsmpl_container {
    display: none;
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.listviewpage {
    box-sizing: border-box;
    padding: 0px !important;
    margin: 10px 0px;
}

    .listviewpage a {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 25px;
        text-decoration: none;
        font-size: 16.0px !important;
        vertical-align: middle;
        padding: 1px 1px 0px;
        line-height: 26px;
        font-weight: normal;
    }

    .listviewpage .pager-button {
        width: 32px;
        min-width: unset;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        line-height: 30px;
    }

span.listviewpage span {
    display: inline-block;
    position: relative;
    line-height: 26px;
    width: 32px;
    height: 32px;
    font-size: 16.0px;
    border-radius: 100px !important;
    padding: 4px !important;
    font-weight: normal;
    box-sizing: border-box !important;
}

.pager-button::before {
    font-size: 22px;
    font-family: FontAwesome;
    position: absolute;
    color: #777;
    top: -4px;
}

@media (max-width: 780px) {
    .listviewpage .pager-button {
        width: 28px !important;
    }

    .listviewpage a.pager-button:first-child::before,
    .listviewpage a.pager-button:last-child::before {
        left: 7px !important;
    }

    .listviewpage a.pager-button:nth-child(2)::before,
    .listviewpage a.pager-button:nth-last-child(2)::before {
        left: 11px !important;
        font-size: 21.0px;
    }

    .listviewpage a {
        font-size: 18.0px !important;
        width: 28px !important;
    }

    /*span.listviewpage span {
        width: 15px;
    }*/
}

.card-body {
    padding: 0px 5px;
}


.ReadMoreReadLess.showlesscontent .SecSec,
.ReadMoreReadLess.showlesscontent .readLess {
    display: none;
}

.ReadMoreReadLess.showmorecontent .readMore {
    display: none;
}

.ReadMoreReadLess .readMore,
.ReadMoreReadLess .readLess {
    cursor: pointer;
    word-break: break-word;
}

    .ReadMoreReadLess .readMore .theme-text-color:hover,
    .ReadMoreReadLess .readLess.theme-text-color:hover {
        text-decoration: underline;
    }



.acNotificationBullet {
    height: 8px;
    width: 8px;
    border-radius: 50% !important;
    position: absolute;
    top: 7px;
    left: 35px;
    min-width: auto;
    padding: 0;
    z-index: 1;
    animation: NotificationBulletScaleAnimation .9s infinite;
}

    .acNotificationBullet.darkRed {
        background-color: #c8122e !important;
    }


@keyframes NotificationBulletScaleAnimation {
    5% {
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@media screen and (max-width: 1023px) {
    .acNotificationBullet {
        left: 50%;
        margin-left: -15px;
        top: 50%;
        margin-top: -20px;
    }
}

body .home-detail-tbl .useful-link-tbl a {
    display: block;
    color: #555555;
    padding: 0px;
}


    body .home-detail-tbl .useful-link-tbl a * {
        margin: 3px;
    }

    body .home-detail-tbl .useful-link-tbl a img {
        width: 22px;
        height: auto;
        filter: invert(0.6);
    }

    body .home-detail-tbl .useful-link-tbl a span {
        width: calc(100% - 35px);
    }

body .useful-link-tbl.aid h3 {
    text-align: center !important;
}

body .aidUserManual {
    border-bottom: solid 2px #ddd;
    margin-bottom: 15px;
}

/*    body .aidUserManual a.aidLink,
    body .other-links a.aidLink {
        height: 25px;
        line-height: 23px;
        margin: 10px !important;
    }*/

        body .aidUserManual a.aidLink span,
        body .other-links a.aidLink span {
            font-size: 13.0px;
        }

        body .aidUserManual a.aidLink:hover span,
        body .other-links a.aidLink:hover span {
            text-decoration: underline;
        }

body[dir=rtl] .aidUserManual a.aidLink span,
body[dir=rtl] .other-links a.aidLink span {
    font-size: 14px;
    line-height: 1.4
}

body .useful-link-tbl.aid i {
    font-size: 22px;
}

    body .useful-link-tbl.aid i.fa-file-pdf-o {
        color: #d62525;
    }

    body .useful-link-tbl.aid i.fa-file-video-o {
        color: #666;
    }

body .visitor-counter {
}

    body .visitor-counter .visitor-counter-span {
        display: block;
        margin: 13px;
        line-height: 17px;
        color: #777;
        vertical-align: middle;
    }

        body .visitor-counter .visitor-counter-span span {
            display: block;
            font-size: 14px;
        }

        body .visitor-counter .visitor-counter-span i {
            position: relative;
            top: -5px;
            font-size: 26px;
        }

        body .visitor-counter .visitor-counter-span span {
            color: #aaa;
        }

            body .visitor-counter .visitor-counter-span span span {
                color: #666;
            }

.view-more-services {
    clear: both;
    display: block;
    padding: 10px;
}

    .view-more-services a {
        font-weight: bold;
        position: relative;
    }

        .view-more-services a:hover {
            text-decoration: underline !important;
        }

        .view-more-services a:after {
            font-family: FontAwesome;
            position: absolute;
            font-size: 16.0px;
        }

.useful-link-tbl.aid .span-long-text span {
    line-height: 1.2;
}

.useful-link-tbl.aid div {
    margin-bottom: 15px;
}

.page-footer-overlay {
    position: fixed;
    top: calc(50% - 115px);
    left: calc(50% - 230px);
    width: 390px;
    height: auto;
    min-height: 289px;
    background-color: #f9f9f9;
    z-index: 100000;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
}

    .page-footer-overlay div {
        background-color: #ffffff;
        border-radius: 5px;
        height: 100%;
        min-height: 264px;
        padding-top: 25px;
        box-sizing: border-box;
    }

    .page-footer-overlay img {
        max-width: 248px;
        display: inline-block;
        margin: 10px;
    }

    .page-footer-overlay a img {
        max-width: 161px;
        margin: 10px 5px;
    }

    .page-footer-overlay span {
        clear: both;
        display: block;
        color: #000;
        font-weight: bold !important;
        font-size: 18.0px !important;
        margin: 15px;
    }

@media (max-width: 780px) {
    .page-footer-overlay {
        width: 300px;
        padding: 5px;
        left: 50%;
        margin-left: -150px;
        min-height: unset !important;
    }

        .page-footer-overlay div {
            min-height: unset !important;
            padding-top: unset !important
        }

        .page-footer-overlay img {
            width: 120px;
        }

        .page-footer-overlay span {
            margin: 5px !important;
            font-size: 16px !important;
        }

    .fa.fa-times.float-far {
        font-size: 14px !important;
        padding: 3px !important;
        top: -8px !important;
        right: -8px !important;
    }
}


.fa.fa-times.float-far {
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    background-color: black;
    border-radius: 100px;
    padding: 5px;
    position: absolute;
    border: solid 2px;
    box-shadow: 0px 2px 2px #333;
    top: -14px;
    right: -14px;
}

body.loggedin .transactionServ .vehicleName {
    overflow: inherit;
}

.insta-note .fa {
    font-size: 15px;
    position: relative;
    top: 2px;
}

a.megaMenuPortalBtn::after {
    font-family: FontAwesome;
    content: '\f107' !important;
    font-size: 20px;
    font-weight: normal;
    line-height: 17px;
    position: relative;
    top: 2px;
    right: 10px;
}

.mm-mesonry-container {
    width: 100%;
    list-style: none;
}

.mm-mesonry-item {
    list-style: none;
    width: calc(33% - 20px) !important;
    height: auto;
}

    /*.mm-mesonry-item a:before {
        font-family: FontAwesome;
        content: '\f111' !important;
        font-size: 6px;
        font-weight: normal;
        position: relative;
    }*/

@media only screen and (min-width: 1024px) {
    .has-children > a::before,
    .has-children > a::after,
    .go-back a::before,
    .go-back a::after {
        background: #111433 !important;
    }

    .cd-dropdown-wrapper {
        display: none !important;
    }
}

@media (max-width: 780px) {
    .megaMenuPortal {
        display: none !important;
    }

    body #userwayAccessibilityIcon {
        bottom: 80px !important;
    }

    #userwayAccessibilityIcon {
        left: 10px !important
    }

    .uwy, body .uwy {
        z-index: 999 !important;
    }
}

.uwy, body .uwy {
    z-index: 999 !important;
}
/*.service-tabs li span:focus-visible, body * {
    outline: none;

.service-tabs li span:visited,
.service-tabs li span:focus,
.service-tabs li span:focus-visible,
.service-tabs li span:focus-within,
.sub-service-tabs li:visited,
.sub-service-tabs li:focus-within,
.sub-service-tabs li:focus,
.sub-service-tabs li:focus-visible,
body a:focus-visible,
body li:focus-visible,
body li a:focus-visible,
body li span:focus-visible {
    outline: none !important;
}
}*/
@media screen and (max-width: 430px) {
    #openMoiChat {
        bottom: 70px;
    }

    body #userwayAccessibilityIcon {
        bottom: 70px !important;
    }
}

body #userwayAccessibilityIcon {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    animation-duration: .8s;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    background-color: #C8122E !important;
}

@media screen and (max-width: 380px) {
    .left-sticky-menu span {
        font-size: 8px;
    }
}

.hyperlink-loader {
    overflow: hidden !important;
}

@media screen and (max-width: 780px) {
    .grid-compact-view {
        table-layout: fixed;
        min-width: unset !important;
        border: solid 1px #ddd;
        width: calc(100% - 2px) !important;
        box-shadow: 0px 2px 2px #333;
    }

    .gridView.grid-compact-view td {
        font-size: 13px;
        text-transform: capitalize !important;
        padding: 3px 5px !important;
    }

    .gridView.grid-compact-view tbody td {
        background-color: #fff !important;
    }

    .gridView.grid-compact-view tfoot td {
        background-color: #ddd !important;
    }

    .grid-compact-view thead {
        /*display: none !important;*/
    }

        .grid-compact-view thead tr th:first-child,
        .grid-compact-view tbody tr td:first-child,
        .grid-compact-view tfoot tr td:first-child {
            display: none;
        }

    .grid-compact-view tr th:nth-child(2),
    .grid-compact-view tr td:nth-child(2) {
        width: 67% !important;
    }

    .grid-compact-view tr th:nth-child(3),
    .grid-compact-view tr td:nth-child(3) {
        width: 33% !important;
    }
    /*.group-table .group-table-heading2{
        display:none !important;
    }*/
    .loadPerc {
        width: 20% !important;
        
    }

        .loadPerc b {
            display: none !important;
        }

    .loader-new-tbl .dec span {
    }

    .tickets-container .ticket-groups {
        height: 420px !important;
    }
}

.zero-padding-margin {
    margin: 0px !important;
    padding: 0px !important;
}

.tickets-container .fullcol {
    line-height: unset !important;
}

.tickets-container .ticket-groups {
    height: auto;
    max-height: 550px;
    overflow-y: scroll;
    background-color: #eee;
    padding: 10px !important;
    box-sizing: border-box;
}

body[dir=rtl] .tickets-container .ticket-groups {
    max-height: 714px;
}

.tickets-container .ticket-group-item {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.tickets-container .watermark-label-new {
    position: absolute;
}

.tickets-container .group-table tfoot tr td {
    padding: 14px;
    vertical-align: middle;
    text-align: center;
}

.ticket-group-item .ticket-selection td:nth-child(2) {
    display: inline-block !important;
}

.ticket-selection .choose-ticket {
    margin: 0px 3px;
    margin-top: -17px;
}

.ticket-group-item .total-amount {
    background-color: #f5f5f5;
}

.ticket-group-item .group-pay-fine {
    position: relative;
    margin: 20px auto 0px;
    padding: 11px 5px 5px 30px;
    background-image: url(https://portal.moi.gov.ae/eservices/Images/niceicons/details.svg) !important;
    background-size: 23px auto;
}

.ticket-lock {
    color: #a6a6a6;
    /*animation: blinkingText 2s infinite;*/
}
    .ticket-lock::before{
        font-size:30px !important;
    }
    body[dir=rtl] .ticket-group-item .group-pay-fine {
        margin-left: unset;
        margin-right: 20%;
        padding: 11px 30px 5px 5px;
    }

.normal-font {
    font-weight: normal !important;
}


body[dir=ltr] .clerance-certificate.compact:nth-child(odd) {
    margin-left: 0;
}

body[dir=ltr] .clerance-certificate.compact:nth-child(even) {
    margin-right: 0;
}

.clerance-certificate.compact {
    border-color: #92722b !important;
    width: calc(50% - 30px) !important;
}

    .clerance-certificate.compact .btnSection a span {
        margin: 0;
    }

@media screen and (max-width: 960px) {
    .clerance-certificate.compact {
        margin: 10px 0;
        width: 98% !important;
    }
}


body[dir=rtl] .clerance-certificate.compact:nth-child(odd) {
    margin-right: 0;
}

body[dir=rtl] .clerance-certificate.compact:nth-child(even) {
    margin-left: 0;
}

body .rowCloContainer.gridViewReadmore.card-buttons-container {
    padding: 5px 0px !important;
    background-color: #ececec;
    border-top: 1px solid #d8d8d8 !important;
}

.card-buttons-container .labelledLink:hover {
    box-shadow: 0px 2px 2px #333 !important;
}

.card-buttons-container a.labelledLink {
    background-color: #fff !important;
    color: #515151 !important;
    min-width: 105px;
    min-height: 32px;
    background-repeat: no-repeat !important;
    background-size: 30px 26px !important;
    border: solid 1px #ddd !important;
    box-sizing: border-box;
    padding-top: 9px;
    margin: 0px 3px !important;
    box-shadow: 0px 2px 2px #777;
    border-radius: 5px !important;
    background-position: 5px center !important;
    padding-left: 25px !important;
}

body[dir=rtl] .card-buttons-container a.labelledLink {
    min-width: 90px;
    padding-top: 6px;
    padding-right: 45px !important;
    background-position-x: calc(100% - 5px) !important;
}

body .labelledLink.edit-button {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/edit.svg") !important;
}

body .labelledLink.details-button {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/details.svg") !important;
}

body .labelledLink.psbd-renew {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Renew_Individual_Security_License_Dark.svg") !important;
}

body .labelledLink.psbd-cancel {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Cancel_Individual_Security_License_Dark.svg") !important;
}

body .labelledLink.psbd-replace {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Replacement_of_Lost_Damaged_Individual_Security_License_Dark.svg") !important;
}

body .labelledLink.psbd-change {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Change_Individual_Security_License_Type_Dark.svg") !important;
}

.labelledLink.psbd-renew.company {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Renew_New_Company_Security_License_Dark.svg") !important;
}

.labelledLink.psbd-cancel.company {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Cancel_Company_Security_License_Dark.svg") !important;
}

.labelledLink.psbd-replace.company {
    background-image: url("https://portal.moi.gov.ae/eservices/Images/niceicons/Replacement_of_Lost_Damaged_Company_Security_License_Dark.svg") !important;
}

body[dir=ltr] .gridview-cards .controlContainer .fullcol {
    font-size: 14px;
}

.labelTxt .CaptionLabel {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.fullcol > input[type=text], .fullcol > select {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

@media (max-width: 780px) {
    .card-buttons-container a.labelledLink {
        margin: 3px !important;
    }

    i.ticket-lock {
        top: 8px;
        font-size: 16px !important;
    }

    body[dir=rtl] i.ticket-lock {
        top: 14px;
        left: 4px;
    }
}


.highlight-focused-ticket {
    background-color: lightyellow;
}

.downloadPDFButton {
    width: 160px;
    display: inline-block;
    text-align: left;
    margin-top: 6px;
}

    .downloadPDFButton img {
        width: 20px;
        height: 20px;
        display: inline;
        margin: auto;
        margin-bottom: 5px;
        float: left;
        position: relative;
        top: -2px;
        margin-right: 7px;
    }


.moi-multiselect {
    min-width: 256px !important;
}

    .moi-multiselect .select2-search__field,
    .moi-multiselect .select2-selection__clear,
    .moi-multiselect .select2-selection__choice__remove {
        display: none;
    }

    .moi-multiselect .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0;
    }

    .moi-multiselect .select2-container {
        padding: 0;
        /*height:32px;*/
    }

    .moi-multiselect .select2-container--default .select2-selection--multiple {
        border: none;
    }

        .moi-multiselect .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            box-sizing: border-box;
            list-style: none;
            margin: 0;
            padding: 34px 0px 0px;
            width: 100% !important;
        }

            .moi-multiselect .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
                position: absolute;
                top: 0;
            }

            .moi-multiselect .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
                width: 100%;
                margin-top: 0;
                margin-bottom: 5px;
            }

    .moi-multiselect .select2-selection__clear {
        display: none;
    }

    .moi-multiselect .select2-container--default .select2-search--inline .select2-search__field {
        width: 100% !important;
        padding: 4px 7px !important;
        color: #545454;
        font-weight: 700 !important;
        height: 32px;
        border: 1px solid #ccc;
        display: block;
        margin: 0 !important;
        background: none repeat scroll 0 0 #F1F1F1;
    }

    .moi-multiselect .select2-selection--multiple .select2-selection__choice {
        box-sizing: border-box;
        width: 100%;
        white-space: pre-wrap;
    }

    .moi-multiselect .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        width: 12px;
        font-size: 14px;
    }

    .moi-multiselect .select2-container--default.select2-container--focus .select2-selection--multiple {
        border: 0;
    }

@media (max-width: 780px) {
    .moi-multiselect .select2-container--default .select2-search--inline .select2-search__field {
        max-width: 100% !important;
    }

    a.group-pay-fine {
        width: 80px !important;
        background-size: 16px auto !important;
    }
}

.collapse-notifications {
    padding-right: 10px;
}

body[dir=rtl] .collapse-notifications {
    padding-right: unset;
    padding-left: 10px;
}

.collapse-notifications::after {
    top: 5px;
    position: absolute;
    right: 5px;
    font-family: FontAwesome;
    color: #db6375;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

body[dir=rtl] .collapse-notifications::after {
    right: unset;
    left: 5px;
}

.collapse-notifications-down::after {
    content: '\f13a';
}

.collapse-notifications-up::after {
    content: '\f139';
}

.hidden-notification {
    display: none;
}

.user-notifications-container .verify-email-alert.collapse-notifications-down:not(.collapse-notifications-up) {
    border-bottom: solid 1px #ccc;
    box-shadow: 0px 2px 2px #333;
}

.cp-modal.cp-opened.cp-allow-close {
    z-index: 19990 !important;
}

.purelive_liveness_container {
    z-index: 1000001 !important;
}

.footer-wrapper .help-line-container i {
    vertical-align: top;
}

.footer-wrapper .help-line-container span span,
.footer-wrapper .help-line-container span a.help-line-number {
    display: block;
    margin-bottom: 3px;
}

    .footer-wrapper .help-line-container span a.help-line-number span {
        font-size: 18px;
    }

.footer-wrapper .whats-app {
    text-align: left;
    font-size: 18px !important;
    margin: 10px auto;
    font-weight: 700 !important;
}

body[dir=rtl] .footer-wrapper .whats-app {
    margin: 15px;
}



.footer-wrapper .whats-app i {
    margin: 0px 5px;
    font-size: 22px;
}


.tabs-desc {
    display: block;
    clear: both;
    margin-top: 20px;
    margin-bottom: 20px;
}

.sign-msg {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #151515 !important;
    background-image: url(../Images/mobile-icons/digital-sign.JPG);
    background-repeat: no-repeat;
    background-size: 42px;
}

    .sign-msg:after {
        display: none !important;
    }

    .sign-msg a {
        font-weight: bold;
    }

@media (max-width: 780px) {
    .sign-msg {
        background-size: 28px !important;
    }

    .payment-result-container .payment-result-title span {
        font-size: 13px !important;
    }

    .download-button-container {
        min-height: unset !important;
    }

    .payment-result-container .download-section .download-button-container:nth-child(2),
    .payment-result-container .download-section .download-button-container:nth-child(3) {
        border: none !important;
        margin: 10px !important;
        padding: 0px !important;
    }
}

.payment-result-container {
    display: block;
    clear: both;
    border: 1px solid #b0b0b0;
    border-radius: 15px 15px 0px 0px;
    padding: 10px;
}

    .payment-result-container .payment-result-title {
        border-radius: 15px 15px 0px 0px;
        display: block;
        clear: both;
        position: relative;
        margin-top: -10px;
        border-bottom: solid 3px #666;
    }

        .payment-result-container .payment-result-title span {
            color: #666;
            font-size: 18px;
        }




.section-margin {
    margin-top: 10px;
    margin-bottom: 20px;
}

.payment-result-container .panel {
    border: none !important;
    box-shadow: none;
}

.payment-result-container .panel-body {
    padding: 0px;
    text-align : center;
}



.download-button-container {
    display: inline-block;
    display: inline-block;
    margin: 10px;
}

    .download-button-container a span {
        display: block;
    }

    .download-button-container a {
        position: relative;
        display: block;
        box-sizing: content-box;
    }

        .download-button-container a img {
            width: 22px;
            height: 22px;
            margin: 0px 3px;
        }

        .download-button-container a span {
            display: inline-block;
            font-size: 13px;
            vertical-align: top;
        }

            .download-button-container a span.file-info * {
                display: block;
                vertical-align: middle;
            }

            .download-button-container a span.file-info span:first-child {
                font-weight: 600;
            }

            .download-button-container a span.file-info span:last-child {
                font-weight: 600;
            }

.payment-result-container .fourCol .rowCloContainer,
.payment-result-container .fourCol .rowCloContainer span {
    margin: 0px;
    padding: 0px;
}

.payment-result-container .receipt-details {
    border: solid 1px #ddd;
    display: inline-block;
    box-sizing: border-box;
}

.payment-result-container .fourCol .rowCloContainer {
    width: 33%;
    box-sizing: border-box;
    border-bottom: dotted 1px #ddd;
}


.button[disabled]:not(.current-tab) {
    background: #aaa !important;
    cursor: default;
}

body .process-tree-tbl .button:hover {
    opacity: unset !important;
}

/** Messaging Styles - New **/
body .success-msg,
body .error-msg,
body .info-msg {
    clear: both;
    font-size: 16px;
    line-height: 25px;
    display: block;
    padding: 13px 70px;
    position: relative;
    box-sizing: border-box;
    border: none !important;
    border-radius: 0.25rem;
    box-shadow: none !important;
    margin: 10px 0px !important;
}

body .success-msg {
    background-color: rgb(243, 250, 244) !important;
    border-color: rgb(47,102,60) !important;
    color: rgb(47,102,60) !important;
}

body .error-msg {
    background-color: rgb(254,242,242) !important;
    border-color: rgb(181,37,32) !important;
    color: rgb(181,37,32) !important;
}

body .info-msg {
    background-color: #e7f5ff !important;
    /*border: 1px solid rgb(140, 98, 25) !important;*/
    color: #003cff !important;
}

body .success-msg:before {
    content: '\f087';
    color: rgb(47,102,60) !important;
}

body .info-msg:before {
    content: '\f05a';
    /*color: rgb(0, 60, 225) !important;*/
}

body .error-msg:before {
    content: '\f06a';
    color: rgb(181,37,32) !important;
}

body .payment-success-msg:before {
    content: '\f09d' !important;
}

body .success-msg:before,
body .error-msg:before,
body .info-msg:before {
    display: block;
    font-size: 26px;
    top: calc(50% - 13px) !important;
    font-family: FontAwesome;
    position: absolute;
}

body[dir=rtl] .success-msg:before,
body[dir=rtl] .error-msg:before,
body[dir=rtl] .info-msg:before {
    right: 25px;
}

body[dir=ltr] .success-msg:before,
body[dir=ltr] .error-msg:before,
body[dir=ltr] .info-msg:before {
    left: 25px;
}

/**/

#inputHintPopUp img {
    width: 90%;
    height: auto;
    text-align: center;
    margin-top: 10px;
    border: solid 1px #ddd;
    border-radius: 10px;
    box-shadow: 0px 2px 2px #999;
}

.sample-popup-button-container {
    clear: both;
    position: relative;
    padding: 0px;
}

    .sample-popup-button-container a.sample-popup-button {
        width: 42px;
        background: #989898;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        position: absolute;
        top: 1px;
        cursor: pointer;
    }

body[dir=ltr] .sample-popup-button-container a.sample-popup-button {
    height: 43px;
    border-radius: 0px 4px 4px 0 !important;
    right: 0;
}

body[dir=rtl] .sample-popup-button-container a.sample-popup-button {
    height: 43px;
    border-radius: 4px 0px 0px 4px !important;
    left: 0;
}

    body[dir=rtl] .sample-popup-button-container a.sample-popup-button i.fa.fa-question {
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }

@media (max-width: 780px) {
    .popup.small {
        width: 90% !important;
    }

        .popup.small span.example-text {
            font-size: 11px !important;
        }
        .popup.small label.example-text {
            font-size: 11px !important;
        }
    body .controlContainer .fullcol,
    body .controlContainer .fullcolHeader {
        min-width: unset !important;
        width: calc(100% - 25px);
    }

    body input[type=text],
    body input[type=tel],
    body input[type=email],
    body select,
    body textarea,
    body span.select2-container {
        max-width: unset !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    body input[type=text],
    body input[type=tel],
    body input[type=email],
    body select {
        height: 35px !important;
    }

    body .UCChangeUserEmail a {
        right: 0px !important;
        top: 2px !important;
    }

    body[dir=rtl] .UCChangeUserEmail a {
        right: unset !important;
        left: 0px !important;
    }

    .sample-popup-button-container {
        max-width: unset !important;
    }

        .sample-popup-button-container input {
            margin: 5px 0px !important;
        }

    body .sample-popup-button-container a.sample-popup-button {
        height: 33px !important;
    }

    .hr-employment-user-control div.card.simple-card {
        width: 100% !important;
    }
}

.float-none {
    clear: both !important;
    float: none !important;
}

.hr-employment-user-control div.card.simple-card {
    margin: 5px !important;
    min-height: unset !important;
}

.hr-employment-user-control .remove-item:before {
    margin: 0px 2px;
}


.majalisdetail {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/majles-logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 150px;
    min-height: 100px;
}

.majalis-list-container .card {
    width: 325px !important;
    min-height: 250px !important;
    margin: 5px;
}

    .majalis-list-container .card .majalisdetail {
        background-position: right center;
        background-size: 80px;
    }

.majalis-list-container .card-body .fullcol div {
    clear: both;
    display: block;
    padding: 0px;
    margin: 0px;
}

    .majalis-list-container .card-body .fullcol div span {
        line-height: 20px;
    }

.majalis-list-container .clerance-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-radius: 0px 0px 8px 8px !important;
    text-align: center;
    padding: 7px;
    box-sizing: border-box;
}

.majalis-list-container .clerance-certificate .colLeft,
.majalis-list-container .clerance-certificate .colRight {
    min-height: initial;
}

@media screen and (min-width:769px) {

    .majalis-list-container .clerance-certificate .left-area,
    .majalis-list-container .clerance-certificate .right-area {
        padding-bottom: 5px;
    }
}

.majalis-list-container .listview-button i span {
    margin: 0px 3px;
}

@media (max-width: 780px) {

    .majalis-list-container .card {
        width: auto !important;
    }
}

.rta-tcn-container {
    max-width: 324px;
    position: relative;
    background-image: url(../images/RTALogo.png);
    background-repeat: no-repeat;
    background-size: 82px;
    margin-bottom: 10px;
    background-color: lightyellow;
}



    .rta-tcn-container .toggle-button {
        cursor: pointer;
        background-color: #fff !important;
    }

        .rta-tcn-container .toggle-button * {
            display: inline-block;
            padding: 0px !important;
            vertical-align: middle;
        }

        .rta-tcn-container .toggle-button span {
            font-size: 12px;
            text-decoration: underline;
            line-height: 16px;
        }

body[dir=rtl] .rta-tcn-container .toggle-button span {
    width: 90%;
}

.rta-tcn-container .toggle-button i {
    font-size: 21px;
    color: #666;
    margin: 0px 5px;
}

.rta-tcn-container .toggle-section {
    position: relative;
    border: solid 1px #999;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #333;
}

    .rta-tcn-container .toggle-section .toggle-section-content {
        padding: 7px;
    }

body[dir=ltr] .rta-tcn-container {
    background-position: calc(100% - 10px) 70px;
}

body[dir=rtl] .rta-tcn-container {
    background-position: 10px 81px;
}


.rta-tcn-container input.ValueLabel {
    width: 150px !important;
    display: inline-block;
    border: solid 1px #999;
    font-size: 11px !important;
    font-weight: normal !important;
    height: 12px !important;
    background-color: #fff !important;
    margin-top: 5px !important;
}

.rta-tcn-container a.rta-tcn-button {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 50px;
    font-size: 11px;
    margin: 5px;
    height: 22px;
    line-height: 22px;
    padding: 0px 3px;
}

.rta-tcn-container .toggle-section span {
    color: #333;
    display: block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}

    .rta-tcn-container .toggle-section span#spnInvalidRtaError {
        color: #ea1b1b !important;
        padding: 0px;
    }

    .rta-tcn-container .toggle-section span#spnFederalTCFFound {
        color: #009688 !important;
        padding: 0px;
        font-weight: normal !important;
    }

        .rta-tcn-container .toggle-section span#spnFederalTCFFound::before {
            content: '\f00c';
            font-family: FontAwesome;
            margin-right: 2px;
        }

body .colRight .sample-popup-button-container input[type=text] {
    width: 100% !important;
    min-width: 250px !important;
    box-sizing: border-box;
}

/*body[dir=ltr] .colRight .sample-popup-button-container input[type=text] {
    height: 35px;
}

body[dir=rtl] .colRight .sample-popup-button-container input[type=text] {
    height: 32px;
}

body[dir=ltr] .rta-tcn-container + .sample-popup-button-container input {
    height: 35px !important;
}

body[dir=rtl] .rta-tcn-container + .sample-popup-button-container input {
    height: 32px !important;
}*/


@media (max-width: 780px) {
    .rta-tcn-container input.ValueLabel {
        width: 170px !important;
        height: unset !important;
    }

    .rta-tcn-container {
        width: 329px !important;
        max-width: unset !important;
    }
}


.rta-tcn-container .ajax-loader {
    border: 2px solid #ddd;
    border-top: 2px solid #ff0000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
    position: absolute;
    left: 40%;
    top: 20%;
}

    .rta-tcn-container .ajax-loader + .toggle-section-content {
        opacity: 0.5;
        background-color: #999 !important;
    }


.select2-dropdown .select2-search--dropdown input.select2-search__field {
    min-width: unset !important;
    width: 90% !important;
}

/** New Popup Style - Start**/
@media (max-width: 780px) {
    body .popup {
        top: 4% !important;
    }
}

body .popup {
    top: 8%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0.3rem;
    box-shadow: 0px 10px 10px #333;
    max-height: calc(100% - 16%);
    overflow-y: auto;
    overflow-x: hidden;
}

    body .popup .controlContainer {
        width: 100%;
        box-sizing: border-box;
        margin: 0px;
        padding: 5px 10px;
    }

    body .popup,
    body .popup div,
    body .popup p {
        background-color: #fff;
    }

        body .popup:before {
            background: rgba(0, 0, 0, 0.5) !important;
        }

        body .popup p {
            width: 100%;
            text-align: left;
            font-size: 16px;
            padding: 20px 15px;
            margin: 0px !important;
            box-sizing: border-box;
            line-height: 1.5;
        }

body[dir=rtl] .popup p {
    text-align: right !important;
}

body .popup .header {
    background-color: #fff !important;
    color: #666 !important;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #ddd;
    padding: 20px 15px;
    height: 60px !important;
    box-sizing: border-box;
}

    body .popup .header a {
        background-color: #fff !important;
        color: #666 !important;
        font-weight: normal !important;
        font-size: 18px !important;
    }

    body .popup .header::before {
        display: none !important;
    }

body .popup .popup_footer {
    width: 100%;
    margin: 0px;
}

    body .popup .popup_footer .button {
        min-width: 100px;
        margin: 10px 5px;
        border-radius: 25px !important;
        padding: 8px !important;
        line-height: 22px;
        box-shadow: 0 0 10px #bfbfbf;
        max-height: 40px;
    }

        body .popup .popup_footer .button:not(.secondary) {
            border-color: #c8122e !important;
        }

        body .popup .popup_footer .button.secondary {
            background-color: #707070;
            border: 1px solid #707070;
            box-shadow: 0 0 10px #bfbfbf;
        }

/** New Popup Style - end**/
.hrapiattachments .avatar {
    margin: 5px;
}

    .hrapiattachments .avatar .document-name {
        width: 100% !important;
        display: block;
    }

    .hrapiattachments .avatar .file-input {
        width: calc(100% - 25px);
    }

        .hrapiattachments .avatar .file-input .button {
            margin: 2px;
            float: none;
        }

.hrapiattachments .glyphicon.glyphicon-trash::after {
    font-size: 15px;
    padding: 0px;
}

.hrapiattachments .attach-notes {
    min-width: unset;
    min-height: 70px;
    width: 100%;
    display: block;
    margin: 0px;
    box-sizing: border-box;
    font-weight: normal !important;
    line-height: 17px;
}

.hrapiattachments .avatar .krajee-default.file-preview-frame {
    display: block;
    box-sizing: border-box;
}

    .hrapiattachments .avatar .krajee-default.file-preview-frame .kv-file-content {
        display: block;
        clear: both;
        width: 100%;
        height: 100%;
    }

        .hrapiattachments .avatar .krajee-default.file-preview-frame .kv-file-content img {
            max-height: 150px !important;
        }


.hrapiattachments .avatar .file-input {
    min-height: 263px;
}

.hrapiattachments .avatar .file-drop-zone {
    min-height: 188px;
}

.hrapiattachments .sixCol .rowCloContainer {
    width: calc(30% - 12px);
    margin: 5px;
    vertical-align: top;
    padding: 0px;
}

.tawasul-container {
    text-align: center;
}

.footer-wrapper .section .whats-app i {
    color: #1fa67a !important;
}


.stacked-caption-value span {
    line-height: 16px;
    letter-spacing: 0.25px;
}

.police-case-status-reply {
    color: #c8122e;
}

.compact-Cols {
    padding: 5px;
}

    .compact-Cols div {
        padding: 0px !important;
        margin: 0px !important;
    }

    .compact-Cols .rowCloContainer {
        min-height: 47px;
    }

        .compact-Cols .rowCloContainer div {
            float: none;
            clear: both;
            display: block;
            min-width: unset;
            padding: 0px;
            margin: 0px;
            line-height: unset;
        }

.advancedSearchBox .tapsNC {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.advancedSearchBox .tapsNew label {
    padding: 10px 8px;
    border-radius: 0.5rem;
}

    .advancedSearchBox .tapsNew label:hover {
        background-color: rgb(247,247,247);
    }

    .advancedSearchBox .tapsNew label.selected {
        background-color: rgb(242, 236, 207) !important;
        color: rgb(93, 59, 38) !important;
        font-weight: 600;
        position: relative;
        z-index: 1;
    }

.advancedSearchBox .tapsNC img {
    filter: invert(0.2);
    position: absolute;
    width: 30%;
    bottom: 25px;
    right: 25px;
    opacity: 0.25;
}

body[dir=rtl] .advancedSearchBox .tapsNC img {
    right: unset;
    left: 25px;
}

@media (max-width: 780px) {
    .advancedSearchBox .tapsNew {
        text-align: center;
    }

        .advancedSearchBox .tapsNew label {
            width: calc(49% - 5px) !important;
            display: inline-block !important;
        }

    .advancedSearchBox .tapsNC img {
        width: 25% !important;
        right: 10px !important;
    }

    body[dir=rtl] .advancedSearchBox .tapsNC img {
        left: 10px !important;
    }
}

.attachedImgList {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px
}

    .attachedImgList .imgHolder {
        width: 50px;
    }

        .attachedImgList .imgHolder img {
            width: 100%;
            height: auto;
        }

    .attachedImgList span {
        margin: 0 10px;
        flex: 1;
        display: block;
    }

    .attachedImgList .btn {
        padding: 5px 15px 3px;
        font-size: 13px;
    }



.uae-pass-container.controlContainer {
    border: solid 1px #999;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px #333;
    background-color: #f5f5f5;
}

.sign-in-button-container {
    text-align: center;
    margin-bottom: 20px;
}

    .sign-in-button-container i {
        font-size: 48px;
        color: #169F9F;
    }

.uae-pass-sign-in-msg {
    font-size: 18px;
    font-weight: normal !important;
    line-height: 25px;
}

.uae-pass-sign-in {
    text-align: center;
    margin-top: 25px;
}

    .uae-pass-sign-in img {
        width: 100%;
        height: auto;
        max-width: 320px;
    }

.uae-pass-note {
    font-size: 0.82em;
    font-weight: normal;
    line-height: 15px;
    margin-top: 15px;
    display: block;
}

@media (max-width: 780px) {
    .uae-pass-container.controlContainer {
        padding: 10px;
    }

    .uae-pass-desc {
        /*text-align: center !important;*/
    }

    .uae-pass-sign-in-msg {
        font-size: 16px;
    }

    .sign-in-button-container i {
        font-size: 38px;
    }

    a.cd-dropdown-trigger {
        top: 34px
    }

    body .logged-links {
        right: 50px;
        float: right !important;
        top: 38px;
    }

    .footerTopBlock, .footer-note {
        padding: 3rem .875rem !important;
    }
}

span.ValueLabel {
    word-break: break-word;
}

.side-ribbon {
    top: calc(50% - 255px) !important;
}

    .side-ribbon > ul > li > a img {
        height: auto !important;
        width: 26px !important;
        margin-top: 20%;
        max-height: 24px;
    }

    .side-ribbon > ul > li {
        background-color: var(--gold-color);
        width: 40px;
        height: 42px;
        border-bottom: 1px solid #fff;
        margin: 0;
    }

.flexContainer {
    display: flex !important;
    flex-wrap: wrap !important;
}

    .flexContainer .fourCol {
        display: flex !important;
        flex-wrap: wrap !important;
    }



body.hrlogin:not(.uaepasslogin) #dvLeftStickyMenu, body.EmployeeServices_HRLogin #dvLeftStickyMenu,
body.hrlogin:not(.uaepasslogin) .side-ribbon, body.EmployeeServices_HRLogin .side-ribbon,
body.hrlogin:not(.uaepasslogin) .quicklinks.myprofilelink, body.EmployeeServices_HRLogin .quicklinks.myprofilelink,
body.hrlogin:not(.uaepasslogin) #side-happiness, body.EmployeeServices_HRLogin #side-happiness {
    display: none !important;
}


body .register-black-points-msg-container .info-msg:after {
    content: '' !important;
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 100px;
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/blackpoints-gray-icon.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    padding: 3px;
    background-position: center;
}

body .register-black-points-msg-container .info-msg:after,
body .register-black-points-msg-container .info-msg::before {
    background-color: #555 !important;
}

.width-100pct {
    width: 100% !important;
}

.card .notepad-style {
    border: none;
}

.terms.explosive-gv-selectable input[type="checkbox"] {
    margin: 0px 10px !important;
}

.weapons-terms {
    padding: 10px;
    font-size: 16px;
}

    .weapons-terms * {
        /*  direction: rtl !important;
        text-align: right !important;*/
        line-height: 28px !important;
    }

    .weapons-terms h1 {
        font-size: 20px;
    }

    .weapons-terms p {
        padding: 10px !important;
    }

    .weapons-terms ul {
        margin: 0px 20px;
    }

        .weapons-terms ul li {
            margin: 0px 0px 15px;
        }

    .weapons-terms a.btn {
        background-color: white !important;
        color: #333;
        font-weight: bold;
    }

        .weapons-terms a.btn::before {
            content: '\f08e';
            font-family: 'FontAwesome';
            font-size: 17px;
            margin: 0px 0px 0px 6px;
        }

.file-input {
    min-height: 40px;
}

.verify-eid-container .infoTitle {
    line-height: 18px !important;
}

.verify-eid-container span.example-text {
    margin-top: 0px !important;
}
.verify-eid-container label.example-text {
    margin-top: 0px !important;
}

.mofa-attestation-btn {
    background-image: url(https://portal.moi.gov.ae/eservices/Images/mobile-icons/mofa-attestation.svg) !important;
    background-size: 17px 20px !important;
    background-repeat: no-repeat !important;
    font-weight: normal !important;
    font-size: 14px !important;
    padding: 6px !important;
}


.number-control + span.example-text {
    margin-top: 0px;
}
.number-control + label.example-text {
    margin-top: 0px;
}

.dec span {
    padding: 5px 0px;
}

.footer-wrapper .section-right .tawasul-container {
}

    .footer-wrapper .section-right .tawasul-container img {
        width: 100px;
    }

    .footer-wrapper .section-right .tawasul-container li:first-child img {
        width: 172px;
    }


.footer-note ul li {
    display: inline-block;
    list-style: none;
    vertical-align: middle;
    margin: 0px 10px;
}

    .footer-note ul li img {
        width: 1.7rem;
        height: 1.7rem;
        filter: invert(0.55);
    }


.container-tbl {
    width: 100% !important;
    box-sizing: border-box;
    border: none !important;
    box-shadow: unset !important;
}

    .container-tbl .header-img {
        background-color: #fff !important;
        height: 110px;
    }

    .container-tbl header {
        background-color: rgba(247,247,247,1) !important;
    }

        /*.container-tbl header * {
            color: #232528 !important;
        }*/

        .container-tbl header > div {
        }


        .container-tbl .header-img,
        .container-tbl header .header-menu-container,
        .container-tbl .breadcrumb-container,
        .container-tbl .home-detail-tbl,
        .footer-wrapper .section,
        .footer-wrapper .footer-note,
        .container-tbl .user-notifications-container,
        #pageFooterCarousel,
        .main-content-container, .helpToolContainer {
            width: 100%;
            margin: 0px auto;
            max-width: 1536px;
            box-sizing: border-box !important;
        }




.home-detail-tbl .frame-right {
    display: inline-block;
    margin-bottom: 15px;
    margin-top: 0;
    overflow: hidden;
    width: 23%;
    padding: 0 0 5px;
}

body[dir=ltr] .home-detail-tbl .frame-right {
    float: right;
}

body[dir=rtl] .home-detail-tbl .frame-right {
    float: left;
}

@media screen and (max-width: 768px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .main-content-container {
        width: 100% !important;
        margin: 0px auto;
    }

    div.container-tbl {
        background-color: #fff !important;
    }

    .footer-wrapper .footer-note span {
        display: block !important;
    }
}

body .container-tbl .breadcrumb-tbl-resp {
    background-color: #fff !important;
    border: none !important;
    flex-grow: 3;
}

body .user-notifications-container * {
    box-shadow: none !important;
    border: none !important;
}

body input[type=text].main-search {
    background-size: 20px auto;
    padding: 10px;
    border: solid 2px;
    width: 90%;
    max-width: 245px;
}

.happiness-meter-widget-web-button,
.happiness-meter-widget-web-button:hover {
    position: fixed !important;
    background-image: url(https://portal.moi.gov.ae/eservices/images/happiness-icon.svg) !important;
    background-size: 90%;
    background-position: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: #92722b;
    right: 100px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    z-index: 111;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
}

.color-change-tbl,
.color-change-tbl *,
.hide-sm.happiness_wrapper {
    position: fixed;
    bottom: 111px;
    left: 13px;
    padding: 4px;
    z-index: 2222222;
    box-sizing: content-box;
}

    .hide-sm.happiness_wrapper,
    .color-change-tbl,
    .color-change-tbl * {
        right: unset !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        box-sizing: border-box;
        margin: unset !important;
    }

.settings-tbl .ico-btntbl a {
    float: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .settings-tbl .ico-btntbl a:after,
    .color-change-tbl *:after {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        width: 34px;
        height: 34px;
        border: 2px solid #fff;
        border-radius: 50%;
    }

    .settings-tbl .ico-btntbl a.fa:before {
        color: #fff !important;
        font-size: 18px !important;
        font-weight: normal;
    }

    .settings-tbl .ico-btntbl a.fa-info-circle {
        bottom: 160px;
    }

    .settings-tbl .ico-btntbl a.fa-volume-up {
        bottom: 62px;
    }




.main-search {
    background-image: url("../images/search02.gif");
    background-repeat: no-repeat;
    background-size: 11px auto;
    width: 150px;
    line-height: 20px !important;
    border-radius: 0.5rem !important;
}

.main-adv-search {
    background-image: none !important;
    text-align: right;
    border: none !important;
}

body .breadcrumb-tbl-resp {
    height: 31px;
    padding: 10px 0px;
    overflow: hidden;
}

.breadcrumb-container {
    display: flex;
    position: relative;
    clear: both;
    margin-bottom: 1rem !important;
}

    .breadcrumb-container .breadcrumb-tbl-resp,
    .breadcrumb-container .newUserType {
        display: inline-flex;
    }

    .breadcrumb-container .newUserType {
        background-color: #fff;
        margin-top: 0px;
    }

    .breadcrumb-container .userProfile {
        display: inline-flex;
        position: relative;
        width: 100%;
    }

        .breadcrumb-container .userProfile .newUserType {
        }

        .breadcrumb-container .userProfile .company-switcher {
            float: right;
        }

body[dir=rtl] .breadcrumb-container .userProfile span#lblUserProfileName {
    text-align: right;
    white-space:nowrap;
}

body[dir=rtl] .breadcrumb-container .userProfile .company-switcher {
    float: left;
}


@media screen and (max-width: 768px) {
    .breadcrumb-container {
        flex-wrap: wrap-reverse !important;
        border-radius: 0px !important;
    }

    body .breadcrumb-tbl-resp {
        height: auto !important;
    }

    .helpToolContainer {
        top: 23px !important;
    }
}


/*.process-tree-tbl .button:nth-child(1)::before{
    content:'Step 1';
}
.process-tree-tbl .button:nth-child(2)::before {
    content: 'Step 2';
}
.process-tree-tbl .button:nth-child(3)::before {
    content: 'Step 3';
}*/

.process-tree-tbl {
    width: 100%;
    margin: 10px 0px;
    background-color: #999999;
    border-radius: 3px;
    padding: 0;
    overflow: hidden;
}

.toolsups {
    margin-bottom: 15px;
}

    .toolsups a.action-button {
        padding: 10px 0px;
        border-bottom: solid 2px;
        border-radius: 0px !important;
        border-color: transparent;
    }

.action-button img {
    margin-bottom: 6px;
    max-height: 22px;
    filter: invert(0.7);
}

.sixCol .colRight,
.sixCol .colLeft {
    float: none !important;
}

.action-button {
    display: inline-block;
    margin-right: 0;
    font-size: 12px !important;
    text-align: center;
    min-width: unset !important;
}

    .action-button span {
        display: block;
    }

.detail-grid {
    min-height: 100px;
    padding: 20px 10px;
}

@media screen and (min-width: 790px) {
    .container-tbl .header-img {
        padding: 0px 10px !important;
    }

    .home-detail-tbl {
        padding: 15px 10px !important;
    }

    #pageFooterCarousel {
        padding: 2.5rem 0px !important;
    }

    .logged-links {
        margin: 18px 10px 0;
    }
}

@media screen and (min-width: 1030px) {
    .header-img .logo-txt {
        margin-top: 20px;
    }

    .moi-award {
        float: left;
        width: auto;
        height: auto;
        top: 25px;
        position: relative;
        margin-left: 1rem !important;
    }

        .moi-award a img {
            width: 4rem;
            height: auto;
        }
}

/* Footer CSS*/

.footerTopBlock {
    display: flex;
    padding: 3rem 1.375rem;
    margin: 0 auto;
    box-sizing: border-box;
}

    .footerTopBlock .section {
        flex: 1 1 0%;
        display: grid !important;
    }

        .footerTopBlock .section a {
            font-size: 1rem !important;
        }

.secBlock {
    /*    padding: 10px;*/
}

    .secBlock span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        font-size: 18px !important;
        font-weight: 600 !important;
        outline: none;
        user-select: none;
    }
        /*        .secBlock span:focus, .secBlock span:focus-within, .secBlock span:focus-visible {
            outline: none;
            user-select: none;
            background: transparent;
            background-color: transparent;
            visibility:hidden;
        }*/

        .secBlock span::after {
            content: '\002B';
            transition: transform 0.3s ease-in-out;
            font-size: 40px;
            font-weight: normal;
            height: 26px;
            line-height: 28px;
            color: #4b4f58;
            display: inline-block;
        }

    .secBlock.active span::after {
        content: '\2716';
        font-size: 24px;
        line-height: 33px;
        color: #92722b;
        transform: rotate(180deg);
    }

[dir="rtl"] .secBlock span::after {
    content: '\002B'; /* Plus Sign */
    transform: rotate(0deg);
}

[dir="rtl"] .secBlock.active span::after {
    content: '\2716'; /* Cross Sign */
    transform: rotate(-180deg); /* Rotates in opposite direction for RTL */
}

.secBlock ul {
    list-style: none;
    padding: 0;
    margin: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

    .secBlock ul li {
        text-align-last: start;
    }

.tawasul-container li {
    list-style: none;
    padding: 1rem 0;
}

    .tawasul-container li svg {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: -2px;
        margin-right: .75rem;
    }

[dir="rtl"] .tawasul-container li svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .2rem;
}

.tawasul-container li b {
    margin: 0 .75rem;
}

.tawasul-container li a span {
    display: inline-flex
}

@media (min-width: 640px) {
    .secBlock ul {
        max-height: none !important;
        overflow: visible !important;
    }

    .secBlock span::after {
        content: '' !important;
    }

    .section {
        -moz-column-gap: .625rem;
        column-gap: .625rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 640px) {
    .secBlock {
        border-bottom: 1px solid #e1e3e5;
    }

    .footerTopBlock {
        padding: 0rem 0.625rem;
        flex-direction: column;
    }

    .footer-wrapper .section span {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        display: flex;
        align-items: center;
        line-height: inherit;
        padding: 1rem 0;
    }

    body .container-tbl .header-img {
        height: 125px !important;
    }

    a.cd-dropdown-trigger {
        top: 22px;
    }

    .logged-links {
        top: 26px !important;
    }

    .footerTopBlock {
        padding: 0rem .625rem !important;
    }

    .footer-note {
        padding: 1.5rem .625rem !important;
    }

    .tawasul-container {
        padding: 2rem 0 1.3rem;
    }

}


@media (min-width: 768px) {
    .footerTopBlock .section {
        row-gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .footerTopBlock .section {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .quicklinks .aegov-btn {
        padding: 0 1rem;
    }

    body .uwy.utb .uai, .uwy.utb .uai img:not(.userway_check_on) {
        max-width: 44px !important;
        max-height: 44px !important;
    }
}

@media (min-width: 791px) and (max-width: 1024px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .main-content-container {
        /*max-width: 1024px !important;*/
    }

    .home-detail-tbl {
        padding: 15px;
    }

    .service-dir-title {
        font-size: 42px;
    }

    .sub-service-tabs {
        width: 20%;
    }

    .sub-service-contents {
        width: 78%;
    }

        .sub-service-contents > li {
            width: 40% !important;
            margin: 0.5rem !important;
        }

    .footer-note ul li img {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    .footer-note ul li {
        margin: 0px 5px !important;
    }

    .verify-email-alert span {
        font-size: 15px !important;
    }

    #pageFooterCarousel {
        padding: 2.5rem 0.5rem !important;
    }
}

body .wiz-content .responsive-tbl-holder {
    float: none !important;
}

@media (min-width: 1024px) {
    /** Start - Input Fields Styling for the Large Screens Only */
    body .rowCloContainer input[type=text],
    body .rowCloContainer input[type=tel],
    body .rowCloContainer input[type=email],
    body .rowCloContainer textarea,
    body .rowCloContainer select:not(.select2-hidden-accessible) {
        padding: .75rem !important;
        line-height: 1.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: 45px !important;
        max-width: unset;
        margin: 0px 0px 5px !important;
    }

    body .select2 {
        width: 100% !important;
        max-width: unset !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 9px !important;
    }

    .select2-dropdown .select2-search--dropdown input.select2-search__field {
        max-width: unset !important;
    }


    body .rowCloContainer {
        width: 48.5%;
        float: none !important;
    }

    body .fourCol .rowCloContainer {
        display: inline-block;
    }

    body .rowCloContainer .colLeft,
    body .rowCloContainer .colRight {
        display: block;
        width: 100%;
        box-sizing: border-box;
        vertical-align: top;
    }

    .quicklink-tbl *,
    .rowCloContainer input,
    .rowCloContainer textarea,
    .rowCloContainer select,
    .rowCloContainer .CaptionLabel,
    .rowCloContainer .ValueLabel {
        font-size: 14px;
    }

    body #AddressAddEditPopup .rowCloContainer,
    body .rowCloContainer.slickWrapper,
    body .notepad-style .rowCloContainer,
    body .rowCloContainer:has(.fullCol):not(:has(.fullCol .labelTxt)),
    body .rowCloContainer:has(.fullcol):not(:has(.fullcol .labelTxt)),
    body .rowCloContainer:has(.fullcol):not(:has(.fullcol .file-number)),
    body .rowCloContainer:has(textarea),
    body .card .card-body .rowCloContainer {
        width: 100%;
    }

    .slickWrapper {
        margin-top: 20px;
    }

    body .fourCol .rowCloContainer {
        width: 49%;
    }
    /*body .card{
        max-width:480px;
    }*/

    body .card .card-body .rowCloContainer .colLeft,
    body .card .card-body .rowCloContainer .colRight {
        display: inline-block;
    }

    body .card .card-body .rowCloContainer .colLeft {
        width: 30%;
    }

    body .card .card-body .rowCloContainer .colRight {
        width: 60%;
    }

    .UCCivilDefenseInstitution .simple-card {
        min-width: 350px;
    }

        .UCCivilDefenseInstitution .simple-card .colLeft {
            width: 100% !important;
        }

        .UCCivilDefenseInstitution .simple-card .colRight {
            width: 100% !important;
        }

    .rta-tcn-container {
        max-width: 400px;
    }

        .rta-tcn-container .toggle-section-content input[type=text] {
            max-width: 250px !important;
        }


    body .number_button,
    body .number_button:hover,
    body .number_button:link,
    body .number_button:visited {
        width: 27px;
        height: 27px;
    }

    body .number-control + span.example-text {
        margin-top: 6px !important;
    }

    body #ContentPlaceHolder1_ulEmpServices .emp-srv-grp {
        width: calc(32% - 20px);
    }

    .userDropdown, .accessibility-icon{
        min-height:50px;
    }

    /** End */
}

.colLeft span,
.CaptionLabel {
    color: rgb(35,37,40);
    font-size: 14px;
    font-weight: 500;
}


input, textarea, select {
    color: #92722b;
}
.ValueLabel {
    color: #826D26;
}
span, label {
    letter-spacing: 0.3px;
}
.footerTopBlock > .section > .secBlock > span.theme-text-color {
    color: #8C6C25 !important
}

@media (min-width: 1024px) {
    /** Wizard **/
    body .tab-arrow-png {
        display: none !important;
    }

    .process-tree-tbl {
        width: 100%;
        overflow: hidden;
        height: 90px;
        position: relative;
        margin: 15px auto !important;
        padding: 0px;
        float: none !important;
        display: block;
        clear: both;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }

        .process-tree-tbl span:has(.button)::before {
            position: absolute;
            font-size: 18px;
            left: 0px;
            color: #92722b;
            width: 30px;
            height: 30px;
            background-color: #fff;
            margin-left: 45%;
            box-sizing: border-box;
            box-sizing: content-box;
            color: rgb(27,29,33);
            border-radius: 100px;
            text-align: center;
            vertical-align: middle;
            line-height: 36px;
            border: solid 1px #999;
        }

        .process-tree-tbl span:nth-child(1)::before {
            content: '1';
        }

        .process-tree-tbl span:nth-child(2)::before {
            content: '2';
        }

        .process-tree-tbl span:nth-child(3)::before {
            content: '3';
        }


        .process-tree-tbl span:nth-child(1)::after,
        .process-tree-tbl span:nth-child(2)::after {
            content: '';
            display: block;
            border-bottom: solid 3px #92722b;
            top: -17px;
            position: relative;
            float: right;
            clear: both;
        }

    body[dir=ltr] .process-tree-tbl span:nth-child(1)::after,
    body[dir=ltr] .process-tree-tbl span:nth-child(2)::after {
        left: 45%;
    }

    .process-tree-tbl span:first-child:after
    .process-tree-tbl span:last-child::after {
        display: none !important;
    }

    body[dir=rtl] .process-tree-tbl span:nth-child(1)::after,
    body[dir=rtl] .process-tree-tbl span:nth-child(2)::after {
        right: 55%;
    }

    .process-tree-tbl span:last-child::after {
        display: none !important;
    }

    .process-tree-tbl span:has(.button.active-tab)::before {
        font-family: 'FontAwesome';
        content: '\f058';
        border: none;
        font-size: 40px;
        color: #92722b;
    }

    .process-tree-tbl span:has(.button.current-tab)::before {
        background-color: #92722b;
        color: #fff;
        border: none;
    }

    .process-tree-tbl span:has(.button.disabled-tab)::before {
        color: rgb(140,141,143);
    }

    .process-tree-tbl span:has(.button.current-tab)::after,
    .process-tree-tbl span:has(.button.disabled-tab)::after {
        border-color: rgb(140,141,143) !important;
    }

    body .process-tree-tbl span input.button,
    body .process-tree-tbl span input.button.active-tab,
    body .process-tree-tbl span input.button.current-tab,
    body .process-tree-tbl span input.button.disabled-tab {
        top: 32px;
        background: #fff !important;
        color: rgb(27,29,33);
        border: none;
    }

    body .wiz-content {
        background-color: #fcfcfc;
        border: solid 1px #ddd;
        border-radius: 5px;
        margin-top: 10px !important;
        padding: 10px;
        box-shadow: none;
        display: block;
        float: none;
        clear: both;
    }

    body input.button {
        min-width: 138px !important;
        min-height: 35px !important;
    }

    body .process-tree-tbl span .button {
        width: 245px;
        font-size: 14px;
    }

    .process-tree-tbl span:nth-child(1)::after,
    .process-tree-tbl span:nth-child(2)::after {
        width: 80%;
    }
}

@media (min-width: 1025px) {
    body .process-tree-tbl span .button {
        font-size: 16px;
    }

    .process-tree-tbl span:nth-child(1)::after,
    .process-tree-tbl span:nth-child(2)::after {
        width: 91.4%;
    }

    body .process-tree-tbl span input.button,
    body .process-tree-tbl span input.button.active-tab,
    body .process-tree-tbl span input.button.current-tab,
    body .process-tree-tbl span input.button.disabled-tab {
        top: 45px;
    }


    .quicklink-tbl *,
    .rowCloContainer input,
    .rowCloContainer textarea,
    .rowCloContainer select,
    .rowCloContainer .CaptionLabel,
    .rowCloContainer .ValueLabel {
        font-size: 16px;
    }

    .process-tree-tbl span:has(.button)::before {
        font-size: 22px;
        width: 36px;
        height: 36px;
        line-height: 40px;
    }
}

@media (max-width: 780px) {
    .process-tree-tbl span:nth-child(1)::before,
    .process-tree-tbl span:nth-child(2)::before,
    .process-tree-tbl span:nth-child(3)::before {
        position: relative;
        top: 5px;
        z-index: 10;
        width: auto;
        height: auto;
        display: inline-block;
    }

    body[dir=ltr] .process-tree-tbl span:nth-child(1)::before,
    body[dir=ltr] .process-tree-tbl span:nth-child(2)::before,
    body[dir=ltr] .process-tree-tbl span:nth-child(3)::before {
        left: 22px;
    }

    body[dir=rtl] .process-tree-tbl span:nth-child(1)::before,
    body[dir=rtl] .process-tree-tbl span:nth-child(2)::before,
    body[dir=rtl] .process-tree-tbl span:nth-child(3)::before {
        right: 22px;
    }

    .process-tree-tbl span:nth-child(1)::before {
        content: '1';
    }

    .process-tree-tbl span:nth-child(2)::before {
        content: '2';
    }

    .process-tree-tbl span:nth-child(3)::before {
        content: '3';
    }

    .process-tree-tbl span:has(.button.active-tab)::before {
        font-family: 'FontAwesome';
        content: '\f00c';
        font-size: 16px;
        color: #fff;
        width: 0px;
        height: 0px;
    }

    body[dir=ltr] .process-tree-tbl span:has(.button.active-tab)::before {
        left: 11px !important;
    }

    body[dir=rtl] .process-tree-tbl span:has(.button.active-tab)::before {
        right: 11px !important;
    }

    .process-tree-tbl span:has(.button.current-tab)::before {
        color: #fff;
    }
}



@media (min-width: 1000px) and (max-width: 1100px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .footerTopBlock,
    .main-content-container {
        max-width: 900px !important;
    }

    body .process-tree-tbl span .button {
        width: 180px !important;
    }

    body #dvLeftStickyMenu {
        display: none !important;
    }

    .breadcrumb-container .profile-image {
        width: 40px;
        height: 40px;
    }

    body .userProfile span#lblUserProfileName,
    body .sub-service-tabs li,
    body .service-tabs li {
        font-size: 14px;
        line-height: 18px;
    }

    .userCompanySection {
        width: 100%;
    }

    body #dvSearchWrapper {
        grid-gap: 10px;
    }
}

/** 1024 **/
@media (min-width: 1101px) and (max-width: 1300px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .footerTopBlock,
    .main-content-container {
        max-width: 1000px !important;
    }

    body .process-tree-tbl span .button {
        /*width: 215px !important;*/
    }

    .breadcrumb-container .newUserType {
        min-width: 220px;
    }

    .breadcrumb-container .profile-image {
        width: 40px;
        height: 40px;
    }

    .userProfile span#lblUserProfileName {
        font-size: 14px;
        line-height: 18px;
    }

    .userCompanySection {
        width: 100%;
    }
}
/** 1200, 1440 **/
@media (min-width: 1301px) and (max-width: 1500px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .footerTopBlock,
    .main-content-container {
        max-width: 1200px !important;
    }

    body .process-tree-tbl span .button {
        width: 260px !important;
    }
}
/** 1600 **/
@media (min-width: 1501px) and (max-width: 1700px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .footerTopBlock,
    .main-content-container {
        max-width: 1400px !important;
    }
 

    span[id*="lblServiceInfoCaption"],
    .loadPerc b span {
        font-size: 18px;
    }

    .dec span {
        font-size: 16px;
    }
}

/** 1800+ **/
@media (min-width: 1701px) {
    .container-tbl .header-img,
    .container-tbl header .header-menu-container,
    .container-tbl .breadcrumb-container,
    .container-tbl .home-detail-tbl,
    .footer-wrapper .section,
    .footer-wrapper .footer-note,
    .container-tbl .user-notifications-container,
    #pageFooterCarousel,
    .footerTopBlock,
    .main-content-container {
        max-width: 1536px !important;
    }


    span[id*="lblServiceInfoCaption"],
    .loadPerc b span {
        font-size: 18px;
    }
    .dec span {
        font-size: 16px;
    }
}

/*.tickets-container * {
    font-size: 14px !important;
}*/

.tickets-container .card {
    border-width: 1px !important;
    min-height: 234px !important;
    margin: 5px;
    width: 48%;
    background-color:#fff;
}

.tickets-container .card-header {
    border-radius: 10px 10px 0px 0px;
}

    .tickets-container .card-header * {
        color: #fff !important;
    }

.tickets-container .group-table {
    border-collapse: collapse;
    margin-bottom: 25px;
    border: none !important;
    box-shadow: none !important;
}

.tickets-container .plate-frame {
    transform: scale(0.75);
}

.tickets-container .group-table tbody tr:last-child td {
    border-bottom: none !important;
}

.ticketDetailsImage:hover {
    /*position: absolute;*/
    background-color: #fff;
}

.tickets-container .card.notepad-style {
    border-style: solid;
    max-width: 470px;
    margin-left:32px !important;
}

@media (max-width: 780px) {
    body .card {
        width: 95% !important;
    }
}

.tickets-container .img-container{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap: 10px;
}


.tickets-container .selected-violation {
    background-color: lightyellow !important;
}

.ticket-summary .ticket-summary-selected * {
    font-size: 16px !important;
}
/* Traffic Fine Detail Sidebar CSS*/

.snFineDetailWrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: stretch;
    flex-direction: row;
}

.sideNavFineDetial {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding: 5px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 128px;
    box-shadow: 0 3px 4px #d2d2d2;
    min-height: 50px;
    flex-grow: 1;
}

.sideNavFineDetial:first-child {
    padding-top: 0px;
}

    .sideNavFineDetial:last-child {
        border-bottom: none;
        padding-bottom: 0px;
    }

    .sideNavFineDetial .ValueLabel {
        font-weight: 500 !important;
        letter-spacing: 1px;
    }

    .sideNavFineDetial .CaptionLabel {
        color: #4a4a4a !important;
        height: auto;
        margin: 0;
        padding: 0 0 5px 0px
    }

.fineDetailTitle {
    padding-bottom: 20px;
}

.fineDetailSubTitle {
    padding-top: 30px;
    padding-bottom: 10px;
}

    .fineDetailSubTitle h4 {
        font-weight: 400;
    }

.tfTable input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -mox-appearance: none;
    width: 30px !important;
    height: 30px !important;
    border: 2px solid #a68009;
    border-radius: 2px !important;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0 !important;
}

    .tfTable input[type="checkbox"]:hover {
        box-shadow: 0 0 4px rgba(166, 128, 9, 0.5);
    }

    .tfTable input[type="checkbox"]:checked {
        background-color: #a68009;
        border-color: #a68009;
    }

    .tfTable input[type="checkbox"]::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 9px;
        width: 6px;
        height: 18px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        opacity: 0;
        transform: rotate(45deg) scale(0.8);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .tfTable input[type="checkbox"]:checked::after {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    .tfTable input[type="checkbox"]:disabled {
        background-color: #eaeaea;
        border-color: #ccc;
        cursor: not-allowed;
    }

.tfTable table {
    margin-bottom: 0px;
}

.tfTable th {
    background-color: #f0f3f6 !important;
    vertical-align: middle !important;
    color: #12121a !important;
    font-weight: 500 !important;
    padding: 10px 10px 18px !important;
}

    .tfTable th:first-child, .tfTable td:first-child, .tfTable th:last-child, .tfTable td:last-child {
        text-align: center;
        min-width: inherit !important;
    }

.tfTable .table-striped tr th, .tfTable .table-striped tr td {
    border: none !important;
    vertical-align: middle !important;
    min-width: 100px;
    padding: .75em !important;
}


.tfTable .div-masonry-container {
    border: 1px solid #e7e7e7;
}

.tf-detail-icon {
    background-image: url(../Images/tf-detail-icon.png) !important;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-size: contain;
}
.select-arrow-icon {
    background-image: url(../Images/select-arrow.jpg) !important;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-size: contain;
}
    .select-arrow-icon.selected {
        background-image: url(../PublicServices/PageNotFound.aspx.html) !important;
        background-color: #007bff;
        border-radius: 50%;
    }
.tfTable .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .05) !important;
}

.tfTable .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 1) !important;
}


.closebtn span {
    background-image: url(../Images/close.png) !important;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-position: center center;
    background-size: contain;
    display: inline-block;
    opacity: 0.5;
}
.closebtn span:hover {
    opacity:1;
}

/* Fines Statistics Cards*/
.finesStats {
    display: flex;
    justify-content: space-around;
    padding:10px;
}

.finesCard {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-color: #fff;
    border: 1px solid #dadada;
    border-radius: 10px;
    width: 250px;
    min-height: 80px;
    box-shadow: 0px 2px 5px #e7e7e7;
    padding: 10px;
}

/*    .finesCard:hover {
        box-shadow: 0 2px 5px #92722b;
    }*/
    .finesCard span{
    font-weight:500;
}
.fineslbl {
    font-size: 30px !important;
    padding: 8px 0px;
    display: block;
    color: #92722b;
}
.finesWrapper .process-tree-tbl {
    display:flex;
    justify-content:center;
    margin:30px auto !important;
}

.finesWrapper .info-msg {
    background-color: #ffecd4 !important;
    border: 1px solid #d37731 !important;
    color: #c05708 !important;
}

.finesWrapper .info-msg a {
    color: #c05708 !important;
}
.ml32{
    margin-left:32px;
}
.tfTable .plate-frame{
    min-width:275px !important;
}
.tSelectedAmount{
    text-align:right;
    padding: 0 40px;
}

    .tSelectedAmount span {
        font-weight: 500;
    }

.selectedtc {
    text-align: left;
}

.selectedtc span {
    font-weight: 500;
}
.sidenav {
    height: 100%;
    width:0px;
    position: fixed;
    z-index: 10000000000;
    top: 0;
    right: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 0px !important;
    box-shadow: 0 0 5px #000000;
    overflow: auto;
    box-sizing: border-box;
    max-width:500px;
}

.sidenavContent {
    padding: 50px 20px 20px;
    position: relative;
    z-index: 10002;
    height: 100vh;
    background-color: #ffffff;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: none; /* hidden by default */
    z-index: 1000; /* below menu */
}

.CaptionLabel {
    float: none !important
}
/*
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    display: block;
    transition: 0.3s;
}*/

    .sidenav a:hover {
        color: #f1f1f1;
    }

.sidenav .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    line-height: 30px;
}

.container-tbl {
    transition: margin-right .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

/*.home-detail-tbl .frame-right {
    display: none !important;
}*/

.home-detail-tbl .frame-left {
    width: 100% !important;
}

.card {
    cursor: pointer;
}

.advancedSearchLink {
    top: -14px;
}

.dataTables_empty {
    display: none !important;
}

#divImg {
    overflow: auto;
}

.group-table {
    margin-bottom: 0px;
}

    .group-table thead tr th,
    .group-table tbody tr td {
        width: 30%;
    }

        .group-table thead tr th:first-child,
        .group-table tbody tr td:first-child {
            width: 70%;
        }

    .group-table thead tr:nth-child(2) th {
        border-width: 1px;
    }

    .group-table thead tr th .controlContainer,
    .group-table thead tr th .controlContainer .rowCloContainer {
        margin: 0px;
        padding: 0px;
    }

        .group-table thead tr th .controlContainer .ValueLabel {
            padding: 0px;
        }

        .group-table thead tr th .controlContainer .fullcol {
            padding: 2px !important;
            line-height: unset !important;
        }

input[type=checkbox],
.group-pay-fine {
    cursor: pointer;
}

.group-logo {
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tickets-container .card {
    min-height: 60px !important;
    width: 50px;
    margin-left: 100px
}

.float-far input[type=checkbox] {
    min-width: unset;
}

.ticket-selection input[type=checkbox] {
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    transform: scale(2);
    margin: 0px 10px !important;
    min-width: unset !important;
}

.black-points-icon {
    font-size: 12px !important;
}

#trOtherDetails {
    border: solid 2px white;
    margin: 10px;
    text-align: center
}

@media (max-width: 780px) {
    .group-pay-fine {
        left: 20px !important;
    }

    body[dir=rtl] .group-pay-fine {
        left: unset !important;
        right: 20px !important;
    }

    .ticket-selection input[type=checkbox] {
        -ms-transform: scale(1.5); /* IE */
        -moz-transform: scale(1.5); /* FF */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
        -o-transform: scale(1.5); /* Opera */
        transform: scale(1.5);
    }

    .ticket-summary-selected td {
        width: 100% !important;
        display: block !important;
    }

    .sixCol .rowCloContainer {
        width: 100% !important;
    }

    .sixCol .colLeft, .sixCol .colRight {
        display: inline-block !important;
        width: 35%;
    }
}

.ticket-summary {
    border-collapse: collapse;
}

    .ticket-summary td {
        padding: 3px 0px;
    }

    .ticket-summary span {
        float: none;
    }

.ticket-summary-selected td {
    width: 50%;
}

    .ticket-summary-selected td span {
        display: inline-block !important;
        vertical-align: middle;
    }

    .ticket-summary-selected td:last-child {
        text-align: right;
    }

body[dir=rtl] .ticket-summary-selected td:last-child {
    text-align: left;
}

.zero-padding-margin .colRight span {
    padding: 0px;
}

.ticket-group-item .group-pay-fine {
    margin: 0px auto;
}

.sixCol .rowCloContainer,
.sixCol .rowCloContainer span {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.gridView.display tr, .gridView.display tr td {
    background-color: #fff;
    vertical-align: middle;
}


@media (min-width: 1701px) {
    body .process-tree-tbl .button {
        width: 425px !important;
        max-width: unset;
    }
}

.ticketDetailsImage {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #ddd;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin: 0px;
}

    .ticketDetailsImage:hover {
        transform: scale(1.05);
        box-shadow: 0 0px 5px rgba(0,0,0,0.2);
        z-index: 3;
        border-radius: 10px;
    }

.sidenav a.button{
    border:none;
    color: #ffffff !important;
    font-size:20px;
}

.sidenav .selectedtc {
    display: flex;
    align-items: center;
}
.sidenav .fineslbl{
    margin: 0 20px;
}

.sidenav .info-msg{
    text-align:left 
}
.tickets-container .plateNo{
    box-shadow: none !important;
}

.fineDescSideNav {
    padding: 5px 10px;
    border: 1px solid #d4d4d4cc;
    border-radius: 5px;
}
.fineDescSideNav div{
    padding: 7px 0;
    border-bottom: 1px solid #ccc;
}
.fineDescSideNav div:last-child{
    border-bottom: none;
}

.clikHereLink {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 16px;
    text-decoration: underline;
}
.payableBadge {
    background-color: #edffe8;
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid #34c304;
    color: #175c00;
    line-height: inherit;
    display: inline-block;
    font-size: 14px;
    min-width: 80px;
    text-align: center;
}

.unPayableBadge {
    background-color: #ffdbdb;
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid #d30707;
    color: #bf0101;
    line-height: inherit;
    display: inline-block;
    font-size: 14px;
    min-width: 80px;
    text-align: center;
}

@media (max-width: 780px) {
    #dvEmployeePageContainer #tabNotes {
        width: 100% !important;
        flex-direction: column;
        padding-top: 10px;
    }


    #dvEmployeePageContainer .tab-content .card {
        min-width: 30.5%;
        margin: 0;
        width: auto;
        max-width: inherit !important;
        padding: 10px;
        background-color: #92722b;
        background: linear-gradient(20deg, rgba(182, 138, 53, 1) -150%, rgba(255, 255, 255, 1) 80%);
    }
    .controlContainer.tableView .rowCloContainer:nth-child(2) {
        border-top: 1px dashed #ccc;
    }

    .finesStats {
        flex-wrap: wrap;
        gap: 15px;
        padding: 0 !important;
    }

        .finesStats .finesCard {
            flex-grow: 1;
            width: auto !important;
        }


    .tSelectedAmount {
        text-align: center !important;
        padding: 0px !important;
    }
    /*    .sidenavContent{
        height: auto !important;
    }*/
    .responsive-table {
        border: none !important;
    }

    .tfTable .responsive-table .table thead {
        display: none;
    }

    .responsive-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border: 1px solid #e7e7e7;
        border-radius: 10px;
        box-shadow: 0 2px 5px #e7e7e7;
    }

    .tfTable .responsive-table .table.table-striped tr td:first-child {
        text-align: left;
        background-color: #fafafa;
        border-top: none !important;
    }

        .tfTable .responsive-table .table.table-striped tr td:first-child span.ticket-checkbox {
            margin-top: -8px;
        }

    .tfTable .responsive-table .table.table-striped tr td {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #dee2e6 !important;
    }

    .responsive-table tr td:last-child {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
    }

    .responsive-table tr td:first-child span.ValueLabel {
        padding-bottom: 0 !important;
    }

    .responsive-table tr td:first-child input[type="checkbox"] {
        min-width: inherit !important;
    }

    .responsive-table .payableBadge, .responsive-table .unPayableBadge {
        max-width: 100px;
    }

    .responsive-table span.ValueLabel {
        margin: 0 !important;
        padding-bottom: 10px !important;
    }

    .tfTable .responsive-table .table-striped tbody tr:nth-of-type(even) {
        background-color: #ffffff !important;
    }

    .finesWrapper .wiz-content {
        border: none !important;
        box-shadow: none !important;
        padding: 2px;
        box-sizing: border-box;
        width: 100% !important;
    }

    .finesWrapper .line-seperator2 {
        display: none;
    }

    .tfTable input[type="checkbox"]::after {
        top: 2px !important;
        left: 12px !important;
    }

    .responsive-table .selected-violation {
        border-color: #92722b;
        box-shadow: 0 2px 5px #92722b;
    }

    .fineSearch.tapsNC {
        padding: 0;
        width: 100%;
    }

        .fineSearch.tapsNC .advancedSearchBox {
            border: 1px solid rgb(231, 231, 231);
            padding: 10px;
            border-radius: 10px;
        }

            .fineSearch.tapsNC .advancedSearchBox .tapsNew {
                text-align: center;
                margin: 0;
                border-radius: 10px;
                overflow: hidden;
                padding: 0 !important;
            }

                .fineSearch.tapsNC .advancedSearchBox .tapsNew label {
                    background-color: rgb(242, 236, 207) !important;
                    width: 100% !important;
                    margin: 0;
                    border-radius: 0;
                    text-align: left;
                    border-bottom: 1px solid #fff !important;
                    box-sizing: border-box;
                    height: auto;
                }

                    .fineSearch.tapsNC .advancedSearchBox .tapsNew label.selected {
                        background-color: #92722b !important;
                        color: #ffffff !important;
                    }

        .fineSearch.tapsNC input {
            margin: 0 auto !important;
            width: 250px !important;
            height: 40px;
            line-height: 28px;
        }

    .happiness-meter-widget-web-button {
        left: 5px !important;
        bottom: 183px !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        right: auto !important;
    }

    .chatContainer .moiChatBtn {
        width: 50px !important;
        height: 50px !important;
        right: 5px !important;
        box-shadow: 0 0 5px #ccc !important;
    }

    .totalCountMobile {
        position: fixed;
        bottom: 80px;
        z-index: 1999999999;
        background: #fff;
        left: 65px;
        border: 1px solid #e7e7e7;
        border-radius: 10px;
        width: calc(100% - 130px) !important;
        box-sizing: border-box;
        box-shadow: 0 2px 6px #ccc;
    }

        .totalCountMobile .fullcol {
            width: 100% !important;
            box-sizing: border-box;
        }

        .totalCountMobile table tr {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
        }

            .totalCountMobile table tr td {
                width: 50% !important;
                text-align: center;
            }

                .totalCountMobile table tr td:last-child {
                    display: inline-flex !important;
                    width: 100% !important;
                }

                    .totalCountMobile table tr td:last-child input {
                        width: 100% !important;
                        height: 36px;
                        line-height: 30px;
                        margin: 0px 10px;
                    }

                .totalCountMobile table tr td .selectedtc .CaptionLabel {
                    text-align: center;
                    margin: 0;
                    padding: 0;
                }

                .totalCountMobile table tr td .fineslbl {
                    font-size: 24px !important;
                }

        .totalCountMobile .CaptionLabel {
            font-size: 14px;
            margin: 0;
            text-align: center !important;
        }

        .totalCountMobile .selectedtc {
            text-align: center !important;
        }

        .totalCountMobile .fineslbl {
            font-size: 24px !important;
        }

        .totalCountMobile .CurrencySymbol {
            display: none !important;
        }

    .tableStep2 {
        padding: 5px;
        width: auto !important;
    }

        .tableStep2 table.gridView thead {
            display: none;
        }

        .tableStep2 table.gridView tr {
            display: flex;
            flex-direction: column;
            border: 1px solid #e7e7e7;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px #e7e7e7;
        }

        .tableStep2 table.gridView tbody td:first-child {
            flex-direction: row;
            background-color: #f9f9f9;
            align-items: center;
            padding: 10px 10px;
        }

            .tableStep2 table.gridView tbody td:first-child .mobileLbl {
                padding-right: 20px;
            }

            .tableStep2 table.gridView tbody td:first-child .ValueLabel {
                padding:0px;
            }
            .tableStep2 table.gridView tbody td:first-child span:last-child{
                font-weight:bold;
            }
            .tableStep2 table.gridView tbody td {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 5px 10px;
                border: none;
                height: auto;
                border-bottom: 1px solid #e7e7e7;
            }

    .tableStep2 table.gridView .ValueLabel {
        padding-bottom: 5px;
        display: block;
    }

    /* UI Fixes By Tareq*/

    .userDetail {
        justify-content: flex-start;
        display: inline-flex;
        flex-direction: column;
    }

    .userDetail .companyDropdown {
        display: inline-flex;
        justify-content: flex-start;
    }

}

.cd-dropdown-content li a{
    display: flex;
    align-items: center;
}

    .helpToolContainer span#openMenuBtn {
        background-color: #92722b;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
        white-space: nowrap;
        cursor: pointer;
    }

.serviceDetailWrapper {
    padding: 20px;
}
    .serviceDetailWrapper h3 {
        margin-bottom: 20px;
    }
    .serviceDetailWrapper .serviceDetail {
        display: flex;
        flex-direction: column;
        border: none !important;
        margin: 0 !important;
    }
    .serviceDetailWrapper .serviceDetail a {
        margin: 10px !important;
        border: none !important;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        justify-content: flex-start;
    }

    .sidenav .serviceDetailWrapper .closebtn {
        font-size: 40px;
    }

    .serviceDetailWrapper .serviceDetail a i {
        font-size: 1.3rem;
    }
        .serviceDetailWrapper .serviceDetail a:hover{
            color: inherit !important;
        }
        .serviceDetailWrapper .serviceDetail a span {
            font-size: 1rem !important;
            font-weight: normal;
        }

#dvEmployeePageContainer a.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    #dvEmployeePageContainer a.action-button img {
        max-height: 30px;
    }

#dvEmployeePageContainer .tab-content.active {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    gap: 20px;
}

#dvEmployeePageContainer .tab-content .card {
    min-width: 30.5%;
    margin: 0;
    width: auto;
    max-width: 30.5%;
    padding: 10px;
    background-color: #92722b;
    background: linear-gradient(20deg, rgba(182, 138, 53, 1) -150%, rgba(255, 255, 255, 1) 80%);
}

    #dvEmployeePageContainer .tab-content .card .cardTitle {
        font-size: 20px;
        color: #92722b;
        margin-bottom: 0px;
        display: block;
    }
.tabcontent {
    font-weight: bold
}

.empUserName {
    font-size: 18px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 5px #959595;
    margin: 0 3px;
    min-height: 20px;
    display: inline-flex;
    white-space: nowrap;
    flex-direction: row-reverse;
    min-width: 200px;
    align-items: center;
    gap: 15px;
}
.empUserName .fnlName{
    display: inline-flex;
    gap: 5px;
}

.empUserName .ranks {
    background-color: #9f762a;
    padding: 5px 10px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
}
.appointment-card.selected {
    background-color: #f0f7ff;
}

.appointment-card {
    max-width: 55px;
    margin: 5px;
    border-radius: 5px;
    background-color: #eee;
}

.appointment-card {
    cursor: pointer;
}

.appointment-radio {
    pointer-events: none;
}

.d-none {
    display: none;
}

.clerance-certificate {
    border-color: #999 !important
}

    .clerance-certificate .colLeft,
    .clerance-certificate .colRight {
        min-height: initial;
    }

.listview-button.mofa-attestation img {
    width: 17px;
    height: auto;
    vertical-align: middle;
    margin-bottom: -1px;
    /*filter: invert(0.8);*/
}

.clerance-body {
    position: relative;
    padding: 0px;
    background-repeat: no-repeat;
    background-size: 50px auto !important;
}

body[dir=ltr] .clerance-body {
    background-position: right bottom;
}

body[dir=rtl] .clerance-body {
    background-position: left bottom;
}

.clerance-body .controlContainer {
    margin: 0px;
}

.clerance-certificate .button-section {
    width: 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
    text-align: center;
}

    .clerance-certificate .button-section a {
        float: none !important;
        display: inline-block;
        margin: 5px;
        border: solid 1px #ddd;
        padding: 5px;
        text-align: center;
        color: #fff;
        min-width: 50px;
        cursor: pointer;
    }



.request-status {
    position: absolute;
    top: 5px;
}

body[dir=ltr] .request-status {
    right: 5px;
}

body[dir=rtl] .request-status {
    left: 5px;
}


.notepad-style .rowCloContainer:first-child {
    position: relative;
    border-bottom: double #999;
    background-color: #eee;
}



.sixCol .rowCloContainer {
    width: 33%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.sixCol.longLabels .CaptionLabel {
    min-width: unset !important;
}

.rowCloContainer ul {
    list-style: none;
}

    .rowCloContainer ul li {
        list-style: none;
        border: solid 1px #dddddd;
        margin-bottom: 10px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0px 2px 2px #666;
    }

        .rowCloContainer ul li a:hover {
            background-color: #ddd;
        }

        .rowCloContainer ul li a {
            display: inherit;
            background-color: #f5f5f5;
            cursor: pointer;
        }

.colLeft span {
    min-width: 0px !important
}
  
}

/*#TicketsTable_wrapper .dataTables_filter {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}*/

.respAllFines {
    display: none;
}

@media (max-width: 780px) {
    .respAllFines{
        display:block;
    }
    #TicketsTable_wrapper .dataTables_filter label {
        position: relative;
        height: auto;
        line-height: normal;
        width: 100%;
        display: block;
    }

        #TicketsTable_wrapper .dataTables_filter label input[type="search"] {
            margin-bottom: 7%;
            border-radius: 3px !important;
            padding-left: 22px !important;
            position: relative;
            height: 44px;
            max-width: 280px;
            margin-top: 3px;
        }

    #TicketsTable_wrapper .dataTables_filter:after {
        content: '\f002';
        font-family: FontAwesome;
        font-size: 15.0px;
        position: absolute;
        right: 7px;
        top: 17px;
        left: auto;
        color: #989898;
    }

    .respAllFines {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        font-size: 12px;
        z-index: 1;
        gap: 4px;
    }

    #TicketsTable_wrapper .tfTable input[type="checkbox"] {
    }

    .tickets-container .responsive-table {
        position: relative;
    }

        .tickets-container .responsive-table input[type="checkbox"] {
            min-width: inherit !important;
            padding: 0 !important;
        }

 


}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2.5px solid var(--focus-ring-color) !important;
    outline-offset: 0px !important;
}

.select2-container--default
.select2-selection--single:focus,
.select2-container--default
.select2-selection--single:focus-visible {
    outline: 1px solid var(--focus-ring-color) !important;
    outline-offset: 1px !important;
}

    .select2-container--default
    .select2-selection--single:focus:not(:focus-visible) {
        outline: 1px solid var(--focus-ring-color) !important;
    }

@media (forced-colors: active) {
    .select2-selection--single:focus-visible {
        outline: 1px solid var(--focus-ring-color) !important;
    }
}

.h4-sup-title{
    background : unset !important;
}



/* Long text fix */
.span-long-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.service-caption {
    padding: 5px 5px 5px 5px;
}

.dec > .CaptionLabel {
    padding: 5px 5px 5px 5px;
}



.theme-hover-background-color:hover img,
.theme-hover-before-background-color:hover:before img,
.theme-hover-after-background-color:hover:after img {
    filter: brightness(0) invert(1) !important;
}
.sub-service-contents li.theme-hover-background-color:hover img {
    filter: brightness(0) invert(1) !important;
}

.gridView tr.gridViewHeader {
    background-color: #f2f2f2 !important;
}
    .gridView tr.gridViewHeader th {
        color: #545454 !important;
    }
    .gridView tr.gridViewHeader th, .gridView tr.gridViewHeader td{
        border: none !important;
    }
.gridView tbody tr.odd td{
    background-color: #ffffff !important;
}
.gridView tbody tr:nth-of-type(even) td, .gridView tbody tr:hover, .gridView tbody tr.odd:hover td {
    background-color: rgba(0, 0, 0, .05) !important;
}
@media (max-width: 600px) {
    .process-tree-tbl span::after {
        content: '';
        display: block;
        border-bottom: solid 3px rgb(140,141,143);
        top: 13px;
        position: absolute;
        height: 1px;
        width: 28px;
    }

    .process-tree-tbl span:first-child::after {
        display: none !important;
    }
    .process-tree-tbl span:first-of-type::after {
        display: none !important;
    }
   
    .home-detail-tbl{ overflow: inherit !important}

    .pay-for-others {
        top: unset !important;
        margin: 0px !important;
    }

}

.select2-container .select2-selection--single {
    padding: .75rem !important;
    height: 45px !important;
    margin: 0px 0px 5px !important;
}

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

label.example-text {
    clear: both;
    display: block;
    font-size: 13.0px;
    font-weight: normal;
    margin-top: -8px;
    margin-bottom: 5px;
    color: #999;
    border: none !important;
    line-height: 2;
}
.rowCloContainer .certificate-list li.list-group-item {
    margin-top: 4px;
}

    .rowCloContainer .certificate-list li.list-group-item a {
        background: unset;
    }

.display_flex {
    display: flex !important
}

.ProgressPercantage{
    font-size:14px
}

.helpToolContainer {
    position: absolute;
    min-height: 25px;
    top: 30px;
    width: auto;
}

.fa-icon {
    font-size: 23px;
}


.service-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.required-note{
    font-weight:bold;
}
/*    .service-desc:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 31%;
        width: 42%;
        margin-top: 6px;
        padding: 8px 10px;
        background: #222;
        color: #fff;
        font-size: 13px;
        line-height: 1.4;
        border-radius: 6px;
        white-space: normal;
        z-index: 999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    }

    .service-desc:hover::before {
        content: "";
        position: absolute;
        right: 32%;
        top: 57%;
        border: 6px solid transparent;
        border-bottom-color: #222;
    }*/

@media (max-width: 600px) {
    .box-Hr table.gridView thead{
        display:none;
    }
    .box-Hr table.gridView tr {
        background-color: transparent;
    }

    .box-Hr table.gridView tr td {
        text-align: start;
        height: auto;
        margin: 0;
        padding: 10px !important;
    }
    .grevTextWrap{ 
        padding-left:0px;
        padding-right:0px;
    }
    .grevSubWrap .rowCloContainer .colRight {
        min-width: inherit;
    }
    .grevTrack table th{
        white-space: nowrap;
        min-width:100px;
    }
}
.required-note {
    font-weight: bold;
}
.display_block {
    display: block;
}

.grievanceWrapper .rowCloContainer:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.grievanceWrapper .controlContainer {
    display: flex;
    width: 100%;
    margin: 10px auto;
    clear: both;
    gap: 15px;
    flex-wrap: wrap;
}

.grievanceWrapper .card {
    border: solid 1px rgb(122 84 0) !important;
    box-shadow: 0px 3px 2px rgba(122, 84, 0, 0.3);
    width: auto !important;
    margin: 5px !important;
    max-width: 350px;
}

.grievanceWrapper .card-header {
    width: 100%;
    background-color: #92722b;
    padding: 7px 10px;
    box-sizing: border-box;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #d8d8d8;
    min-height: 36px;
    color: #fff;
}
.grievanceWrapper .card-header i {
    color: #fff;
}
.grievanceWrapper .paper-clip {
    background: #92722b;
    color: #fff;
}

.grevSubWrap{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 0px 5px;

}

    .grevSubWrap .rowCloContainer {
        width:32% !important;
    }
.grevTextWrap {
    padding: 20px 10px;
    display: flex;
    grid-gap: 20px
}
.grevTextWrap .rowCloContainer{
    width:50%;
}


/* Attachment Styling */
.attachmentWrapper{
    display: flex;
    gap: 20px;
}

    /*.attachmentWrapper .file-preview{
        display:none;
    }*/

    .attachmentWrapper .uploadDocWrapper {
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
        padding: 10px;
        border-radius: 10px;
        flex: 1;
    }

    .attachmentWrapper .docListWrapper {
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
        padding: 10px;
        border-radius: 10px;
        flex: 1;
    }

    .attachmentWrapper .file-input {
        width: 100%;
        box-sizing: border-box;
        padding: 0px;
        border: none;
        min-height: 100px;
        background-color: #efe4cc;
        border-radius: 10px;
    }

.btn.button.btn-file {
    position: inherit !important;
    transform: inherit !important;
    margin: 0 auto 5px;
}

    .btn.button.btn-file i {
        font-size: 25px;
    }

.attachmentWrapper .file-input samp {
    border: none;
    line-height: 22px;
    margin-bottom: 0;
    padding: 0 0;
}

.attachmentWrapper .docList {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    align-items: center;
    grid-gap: 10px;
    padding:10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom:10px;
    box-sizing: border-box;
}

    .attachmentWrapper .docList .card-body {
        padding:0px;
    }
.attachmentWrapper .docList .fileName {
    display: flex;
    flex: 1;
    font-size: 16px;
}
    .attachmentWrapper .docList .fileName span{
        flex: 1;
    }

    .attachmentWrapper .docList .download-btn {
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 20px;
    }

.attachmentWrapper .docList .fa-trash{
    font-size: 20px;
    margin: 0px 15px;
    color: #c13636;
}
.attachmentWrapper .docList .grvfile-image{
    font-size:50px;
}