@font-face {
    font-family: ArabsWell;
    src: url(../fonts/arabswell_1/arabswell_1.ttf) format("opentype");
    font-display: swap;
}


@font-face {
    font-family: DroidArabicKufi;
    src: url(../fonts/droid/droid_arabic_kufi.ttf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: DroidArabicKufiBold;
    src: url(../fonts/droid/droidkufi_bold.ttf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/roboto/roboto_regular.ttf);
    unicode-range: U+30-39;
}


html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /*margin-bottom: 60px;*/
}

header.everif-header {
    direction: rtl;
}

header.everif-header > nav {
    background-color: #003566 !important;
}

header.everif-header > nav > div {
    width: 100%;
}

div.everif-header-logo-justice {
    text-align: start;
    padding-inline-start: 2em;
}

@media (max-width: 600px) {
    div.everif-header-logo-justice {
        text-align: center;
        padding-inline-start: 0em;
    }
}

div.everif-header-title {
    text-align: center;
    margin-top: 0.9em;
    margin-bottom: 0.5em;
}

div.everif-header-title > a {
    color: #fff !important;
    font-family: ArabsWell !important;
    font-weight: 5;
    font-size: 35px;
}

div.everif-header-title > a > span {
    color: #ffbc2b;
}

@media (max-width: 600px) {
    div.everif-header-title > a {
        font-size: 16px;
    }
}

div.everif-header-logo-mahakim {
    text-align: end;
}

footer.everif-footer {
    direction: rtl;
    background-color: #003566 !important;
}

footer.everif-footer > div {
    color: #fff !important;
}


footer.everif-footer > div > a {
    color: #ffbc2b;
}


div.everif-main-container {
    direction: rtl;
}

    div.everif-main-container > main > div {
        min-height: 90vh;
    }

div.everif-main-section1 {
    background-color: #ffc2211a;
    padding-top: 5em;
    text-align: center;
}


.text-underline {
    display: inline-block;
    position: relative;
    width: max-content;
}

.text-underline:after {
    content: "";
    position: absolute;
    width: -webkit-fill-available;
    height: 3px;
    background-color: #ffbc2b;
    bottom: -10px;
    left: -5px;
    margin-right: -2%;
}

h3.text-underline {
    font-size: 40px;
    font-family: DroidArabicKufi;
    color: #003566;
    font-weight: 800 !important;
    margin-bottom: 2em;
}

div.everif-main-section1 > img {
    /*float: inline-start;*/
}

@media (max-width: 600px) {

    div.everif-main-section1 {
        padding-top: 3em;
    }

    h3.text-underline {
        font-size: 18px;
        margin-bottom: 1em;
    }

    div.everif-main-section1 > img {
        width: 90%;
    }
}

div.everif-main-section2 {
    background: #f5f5f5;
    padding-top: 15em;
    padding-inline-start: 3em;
    padding-inline-end: 3em;
    font-family: Roboto,DroidArabicKufi;
}

div.everif-main-section2 > p {
    color: #003566;
    font-size: medium;
}


@media (min-width: 600px) {

    form#everif-form {
        width: 70%;
        margin: auto;
        padding-top: 2em;
    }
}

@media (max-width: 600px) {

    div.everif-main-section2 {
        padding-top: 2em;
    }
}

form#everif-form {
    padding-bottom: 2em;
}


.form-floating.ref-doc-input > label {
    top: 0;
    right: 0;
    transform-origin: 100% 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.form-floating.ref-doc-input > .form-control-plaintext ~ label, .form-floating.ref-doc-input > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(-0.15rem);
}

.everif-messages-list > ul {
    margin-bottom: 0;
}


.everif-icon-container {
    position: relative;
    display: inline-block;
}

    .everif-icon-container .everif-tooltip-image {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        height: 250px;
        border: 1px solid #ddd;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    .everif-icon-container:hover .everif-tooltip-image {
        display: block;
    }