﻿
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-sans/IBMPlexSansArabic-Regular.woff2') format('woff2'), url('assets/fonts/ibm-plex-sans/IBMPlexSansArabic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-sans/IBMPlexSansArabic-Medium.woff2') format('woff2'), url('assets/fonts/ibm-plex-sans/IBMPlexSansArabic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-sans/IBMPlexSansArabic-SemiBold.woff2') format('woff2'), url('assets/fonts/ibm-plex-sans/IBMPlexSansArabic-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-sans/IBMPlexSansArabic-Bold.woff2') format('woff2'), url('assets/fonts/ibm-plex-sans/IBMPlexSansArabic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Buttons */
    --dga-primary-button-bg: rgba(27, 131, 84, 1);
    --dga-secondary-button-bg: rgba(255, 255, 255, 1);
    --dga-primary-button-text: rgba(255, 255, 255, 1);
    --dga-secondary-button-text: #161616;
    --dga-button-padding: 16px;
    --dga-button-height: 40px;
    --dga-button-border-radius: 4px;
    --dga-button-border: 1px solid #D2D6DB;
    --dga-button-primary-border: 1px solid #D2D6DB;
    --dga-button-hover-color: #166a45;
    --dga-button-text-size: 16px;
    /* Spacing/Sizes */
    --dga-padding-main: 20px;
    --dga-margin-main: 15px;
    /* Typography */
    --dga-font-main: 'Helvetica', sans-serif;
    --dga-font-size-base: 16px;
    /* inputs */
    --dga-input-gap: 8px;
    --dga-input-padding: 16px 8px;
    --dga-input-color: rgba(108, 115, 127, 1);
    --dga-input-line-height: 24px;
    --dga-input-font-weight: 400;
    --dga-input-font-size: 16px;
    --dga-input-height: 40px;
    --dga-prefix-padding: 16px;
    --dga-prefix-bg: #F3F4F6;
    --dga-prefix-color: rgba(108, 115, 127, 1);
    --dga-input-error-color: rgba(180, 35, 24, 1);
    --dga-input-border-color: 1px solid #9DA4AE;
    --dga-section-padding: 40px 80px;
}

body, html, h1, h2, h3, h4, h6, p, input, a, button {
    font-family: 'IBM Plex Sans Arabic' !important;
    /*    align-self: start;
    text-align: start;*/
}

label {
    margin-bottom: 0px;
}


input {
    display: inline-flex;
    max-height: fit-content;
    padding: var(--dga-input-padding);
    align-items: center;
    gap: var(--dga-input-gap);
    flex: 1 0 0;
    align-self: stretch;
    height: var(--dga-input-height);
    line-height: var(--dga-input-line-height);
    font-size: var(--dga-input-font-size);
    font-weight: var(--dga-input-font-weight);
}

.sso-field, .sso-captcha, .sso-captcha__input, .sso-captcha-div {
    position: relative;
}

    .sso-field .sso-captcha .sso-captcha-div:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        transform: translate(-50%);
        background-color: var(--dga-neutral-700);
        transition: width .2s ease-in-out;
    }

    .sso-field .sso-captcha .sso-captcha-div:focus-within:after {
        width: 100%;
    }

    .sso-captcha__input:focus {
        border-color: unset !important;
        box-shadow: unset !important;
    }

.container.form-container {
    padding: var(--dga-section-padding);
}

.dga-header .logo {
    align-self: center;
}

.sso-field__icon {
    padding-inline: var(--dga-prefix-padding);
    background: var(--dga-prefix-bg);
    color: var(--dga-prefix-color);
    min-width: fit-content;
    height: 40px;
    border: var(--dga-input-border-color);
    border-inline-end: 0;
    align-content: center;
    display: flex;
    align-items: center;
}

.forget-action-buttons {
    margin-top: 24px;
}

.sso-field__input-wrapper {
    height: var(--dga-input-height);
}

sso-captcha__input {
    min-height: 40px;
    align-self: center;
    position: relative;
}

.sso-field__error-text {
    color: var(--dga-input-error-color) !important;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    margin-top: 0;
}

.sso-field__input-wrapper {
    border: 0;
    display: inline-flex;
}

.sso-field__input {
    border: var(--dga-input-border-color);
    outline: none;
}

    .sso-field__input.error, input.form-control.error, .form-control.error .select2-choice {
        border-color: var(--dga-input-error-color) !important;
    }

.sso-field__input-area {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.form-control {
    max-height: 40px !important;
    height: 40px;
}

.sso-field {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.sso-auth-card__inner #myform .sso-field__input-wrapper {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.sso-field__suffix-btn {
    width: max-content;
}

.sso-field__label, .sso-field__error-text {
    align-self: start;
}

.v4-page-container .container.form-container {
    width: 100%;
    max-width: 1028px !important;
}

.page-head .page-title h1,
.portlet.box > .portlet-title > .caption {
    color: #161616 !important;
}

.v4-page-header {
    background-color: #1b8354 !important;
}

.nav-logged {
    background: #f3f4f6;
}

.page-head .page-title h1 {
    color: #161616;
}

.form-fieldset-legend {
    color: #1b8354;
}

.v4-page-flyover {
    background-color: #067647;
}

.v4-flyover-content h5 {
    color: #dcfae6;
}

.green.btn, .blue.btn, .green.btn.disabled, .green.btn.disabled:hover, .green.btn.disabled:focus, .green.btn.disabled:active, .green.btn.disabled.active, .green.btn[disabled], .green.btn[disabled]:hover, .green.btn[disabled]:focus, .green.btn[disabled]:active, .green.btn[disabled].active, fieldset[disabled] .green.btn, fieldset[disabled] .green.btn:hover, fieldset[disabled] .green.btn:focus, fieldset[disabled] .green.btn:active, fieldset[disabled] .green.btn.active {
    background-color: #1b8354;
    font-size: var(--dga-button-text-size);
    height: var(--dga-button-height);
}

.v4-footer {
    background-color: #1b8354;
}


.btn.btn-default, .form-photo-upload .uploadButton {
    color: var(--dga-secondary-button-text);
    border: var(--dga-button-primary-border);
    padding-inline: var(--dga-button-padding);
    font-size: var(--dga-button-text-size);
    height: var(--dga-button-height);
    background-color: transparent;
    align-content: center;
    font-weight: 500;
}

    .btn.btn-default:hover, .form-photo-upload .uploadButton:hover {
        background: #dddddd61;
    }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #dff6e7;
    color: #0d121c;
    display: inline-flex;
    width: 100%;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: transparent;
    color: #0d121c;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}

    .select2-container--default .select2-results__option[aria-selected=true]:after {
        content: "";
        background: url("../assets/images/tick-02-stroke-rounded.svg");
        display: inline-flex;
        flex-direction: row;
        width: 25px;
        justify-content: end;
        flex-wrap: nowrap !important;
        background-repeat: no-repeat;
    }

/*.select2-container--default .select2-results__option--highlighted[aria-selected]:after {
    content: "";
    background: url("../assets/images/tick-02-stroke-rounded.svg");
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    justify-content: end;
    flex-wrap: nowrap !important;
    background-repeat: no-repeat;
}*/

.caption-subject {
    color: #1b8354;
}
/*.form .form-section,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn:active:hover, .green.btn.active:hover {
    background: #3a9f49;
}
*/
.btn-primary, .sso-btn {
    color: var(--dga-primary-button-text);
    background-color: var(--dga-primary-button-bg);
    border-radius: var(--dga-button-border-radius);
    border: var(--dga-button-border);
    line-height: 1;
    padding-inline: var(--dga-button-padding);
    height: var(--dga-button-height);
    font-size: var(--dga-button-text-size);
    align-content: center;
    font-weight: 500;
}


    .btn-primary:hover, .sso-btn:hover {
        background-color: var(--dga-button-hover-color);
        color: var(--dga-primary-button-text);
    }

.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn:active:hover, .green.btn.active:hover {
    background-color: #1b8354;
}

.cookiealert {
    background: #fff;
    padding-bottom: 4rem !important;
}

.form .form-section {
    color: #1b8354 !important;
}

.landing-icons li {
    list-style: none;
    text-align: center;
    min-height: 150px;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    background-color: #fff;
    height: 240px !important;
    width: 250px !important;
    margin: 1rem;
    align-content: center;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.service-icon {
    width: 48px;
    height: 48px;
    background: #f3fdf7;
    border-radius: 50%;
    align-content: center;
}

.landing-icons .service-icon .icon .fa, .landing-icons .service-icon .icon .hgi {
    color: #1b8354;
    font-size: 20px;
}

.landing-icons .service-name {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #1F2A37;
    font-family: 'IBM Plex Sans Arabic';
    text-align: start;
    text-align-last: start;
}

.landing-icons .service-upper {
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.landing-icons .service-buttons {
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-top: 24px;
    height: 100%;
    align-items: end;
}

.landing-icons .service-icon-button {
}

html.ar .landing-icons .badge-danger {
    position: absolute;
    right: 14px;
}

html.en .landing-icons .badge-danger {
    position: absolute;
    left: 14px;
}

.portlet-body #myform .form-group button[value="Search"] {
    margin-top: 16px;
}

.page-print.form-display label.control-label {
    color: #161616 !important;
    padding: 7px 0px !important
}

label.control-label {
    color: #161616;
    font-weight: 600;
}

.feeds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

input[type=checkbox], input[type=radio] {
    outline: 0;
}

div:has(> .form-control), .sso-field {
    position: relative;
}

div:has(> input.form-control:not(.hasCalendarPicker)), div:has(> input.form-control:not(.hasCaptcha)), div:has(> input.form-control:not(.error)) {
    position: relative;
}

    div:has(> input.form-control:not(.hasCalendarPicker)):after, div:has(> input.form-control:not(.hasCaptcha)):after, div:has(> input.form-control:not(.error)):after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        transform: translate(-50%);
        background-color: var(--dga-neutral-700, #0c111b);
        transition: width .2s ease-in-out;
        z-index: 999;
    }

.sso-field .sso-field__input-wrapper:before, .input-div:after {
    content: "";
    position: absolute;
    /* bottom: 0; */
    left: 50%;
    transform: translateY(10px);
    width: 0;
    height: 2px;
    transform: translate(-50%, 37px);
    background-color: var(--dga-neutral-700, #0c111b);
    transition: width .2s ease-in-out;
    z-index: 9999;
}

div:has(> input.form-control.error):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--dga-neutral-700, #0c111b);
    transition: width .2s ease-in-out;
    z-index: 999;
    top: 38px;
}

div:has(> input.form-control:not(.hasCalendarPicker )):focus-within:after {
    width: calc(100% - 30px);
}

.sso-field .sso-field__input-wrapper:focus-within:before, div:has(> input.form-control.hasCaptcha):focus-within:after {
    width: 100%;
}

html.ar .select2-selection__clear {
    transform: translateX(10px);
}

html.en .select2-selection__clear {
    transform: translateX(-10px);
}

ul.landing-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dashboard-menu .dropdown-toggle {
    flex-direction: row !important;
}

.dashboard-menu {
    display: flex;
    flex-wrap: wrap;
    gap: unset !important;
    padding: unset !important;
    background: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}

    .dashboard-menu .menu-card {
        width: auto !important;
        min-height: unset !important;
        background: var(--white) !important;
        border: 1px solid var(--line) !important;
        /* border-radius: 16px; */
        padding: 14px 10px !important;
        text-align: center !important;
        text-decoration: none !important;
        color: var(--text) !important;
        position: relative !important;
        transition: all .25s ease !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        border: 0 !important;
        box-shadow: unset !important;
        height: 40px !important;
        flex-direction: row !important;
        border-radius: 0 !important;
        border-bottom: 2px solid #c1c5c9 !important;
        position: relative !important;
        z-index: 9999999;
    }

        .dashboard-menu .menu-card.active {
            background: linear-gradient(135deg, #007640, #1b8354);
            color: #fff;
            border: none;
            box-shadow: 0 14px 25px rgba(47, 5, 73, .25);
            box-shadow: unset;
            border: 0;
            border-radius: 15px;
            border-bottom: 2px solid #1b8354 !important;
        }

.dropdown-panel {
    position: absolute !important;
    top: 50px !important;
    right: -17px !important;
    min-width: 240px !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 35px rgba(0, 0, 0, .12) !important;
    border: 1px solid #eee !important;
    padding: 8px !important;
    /*    opacity: 0;
    visibility: hidden ;*/
    /*    transform: translateY(8px) !important;*/
    transition: .22s ease !important;
    z-index: 9999999 !important;
}

.menu-card:hover {
    transform: translateY(0) !important;
}

.SelectService {
    margin-top: 1rem;
}

.divBox {
    margin-bottom: 1rem;
}

.form-actions.fluid .col-md-7 {
    display: inline-flex;
}

.cookie-header {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}

    .cookie-header > div {
        display: flex;
        align-items: center;
        font-weight: 600;
        gap: 1.5rem;
        line-height: 1.5rem;
    }

.cookie-msg {
    display: flex;
    margin-inline-start: 1rem;
}

.cookie-privacy-policy {
    display: flex;
    margin-inline-start: 1rem;
    color: #1b8354;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    outline: 2px solid transparent;
    text-decoration: none;
    transition: color .2s;
    margin-bottom: 1rem;
}

.cookiealert .acceptcookies {
    margin-left: 0px !important;
}

.accept-button {
    display: grid;
}

.refuse-button {
    display: grid;
    margin-top: 0.5rem;
}

.dga-header .nav-link, .dga-header .action-link {
    position: relative !important;
}

    .dga-header .nav-link:after {
        display: inline-flex;
        content: "";
    }

.nav-link.selected .hgi-stroke {
    transform: scaleY(-1);
}

.nav-link .hgi-stroke {
    transition: transform 0.2s ease-in-out;
}

.cookiealert a {
    text-decoration: none !important;
}

.row.row-fullName {
    direction: ltr;
}

.sso-header__inner a {
    text-decoration: none !important;
    color: #161616;
}

    .sso-header__inner a:hover {
        text-decoration: none !important;
        color: #161616 !important;
    }

.sso-btn--neutral {
    background: #F3F4F6 !important;
    border: 0;
}

    .sso-btn--neutral:hover {
        background: #E5E7EB !important;
        border: 0;
    }

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer:hover {
        background: #F3F4F6;
    }

.label-eng {
    display: flex;
    width: 100%;
    justify-content: start;
    direction: ltr;
}

.eng-label-row {
    display: inline-flex;
    flex-direction: row;
}

    .eng-label-row > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.input-div input#Captcha {
    width: 100%;
}

.input-group-capcha {
    max-width: 210px;
}

.captcha-and-refresh {
    width: 100% !important;
}

.image-capcha {
    width: 100% !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#btnRefreshCaptcha {
    min-width: 60px;
}

html.ar #btnRefreshCaptcha {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    height: 40px;
    border: 1px solid #9da4ae;
}

.col-md-6, .form-group .col-md-6 {
    position: unset;
}

.dashboard-menu {
    margin-bottom: 0 !important;
}

.form-wizard .steps > li > a.step > .number {
    color: #1b8354;
    background: #fff;
    border: 2px solid;
    padding: 0;
    align-content: center;
    place-content: center;
    /*    z-index: 99999 !important;*/
    position: relative !important;
}

.form-wizard .steps > li.active > a.step .number {
    background: #1b8354;
    color: #fff;
    border: 2px solid #1b8354;
}

.form-wizard .steps > li > a.step > .desc {
    color: #1f2a37;
}

.form-wizard .steps > li.active > a.step .desc {
    color: #1f2a37;
    font-weight: 500;
    border: 0;
}

.form-wizard .form-actions .actions-div {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}

/*ul#tab_wizard li:not(:first-child):after {
    content: "";
    display: block;
    width: calc(100% - -56px);
    height: 2px;
    background: green;
    position: absolute;
    top: 32px;
    left: -56px;
    z-index: 1;
}*/

.range-wrap .range input {
    width: 100%;
    position: absolute;
    top: -10px;
    height: 0;
    -webkit-appearance: none;
}

.note.note-info.note-bordered, .alert-info {
    background-color: #f5faff;
    border-color: #afaecb;
    color: #175cd3;
    padding: 16px 24px;
    border-inline-start: 5px solid #175cd3;
    border-radius: 8px;
}

.portlet .alert-info > h3:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-flex;
    background: url(../assets/images/alert.svg);
    margin: 1rem;
    border-radius: 50%;
    align-self: center;
    transform: translateY(2px);
}

#mobileField .sso-field__input-wrapper.sso-field__input-wrapper--with-suffix {
    height: 100%;
}

.sso-tabs__list {
    width: max-content
}

/*.form-container .form-horizontal.form-body {
    margin-top: 120px;
}*/

.header-user .dropdown-menu li a.no-link {
    flex-flow: wrap;
}

.header-user .dropdown-menu {
    padding: 8px;
}

    .header-user .dropdown-menu li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
        color: #333;
        text-decoration: none;
        font-size: 13px;
        transition: .2s;
    }

    .header-user .dropdown-menu li a:hover {
        background: #f3f4f6 !important;
        color: #161616 !important;
    }

        .header-user .dropdown-menu li a.no-link:hover {
            background-color: transparent !important;
        }

    .header-user .dropdown-menu li {
        padding-inline: 1rem;
    }

.form-actions .col-md-offset-3.col-md-9 {
    display: inline-flex;
    margin-inline-start: 0;
    justify-content: end;
    width: 100%;
}