@font-face {
    src: url(../fonts/ArbFONTSDINNextLTArabic-Regular-4.ttf);
    font-family: 'DINNext';
}
@font-face {
    src: url(../fonts/SuisseIntl-Regular.otf) format("opentype");
    font-family: 'SuisseIntlRegular';
    font-weight: normal;
    font-style: normal;
}
@font-face {
    src: url(../fonts/SuisseIntl-Medium.otf) format("opentype");
    font-family: 'SuisseIntlMedium';
    font-weight: normal;
    font-style: normal;
}
@font-face {
    src: url(../fonts/AirbnbCerealBook.ttf) format("opentype");
    font-family: 'AirbnbCerealBook';
    font-weight: normal;
    font-style: normal;
}
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;
    font-family: 'SuisseIntlMedium';
}

.letter-header{
    background-color:whitesmoke;
    padding:1rem;
    margin-bottom:1rem

}
.DisplayDataSection table {
    width: 100%;
}
    .DisplayDataSection table tr td {
        padding-top: 5px;
        padding-bottom: 10px;
        border: 0px solid red;
        text-align:center
    }
.DisplayDataSection table td.title {
    font-weight: bold;
}
    .DisplayDataSection table td.title.en {
        text-align: start
    }
    .DisplayDataSection table td.title.ar {
        text-align: end
    }
form span{
    margin-top:5px !important;
}
@media(max-width : 390px) {
    .div-recaptcha {
        padding: 0px !important;
    }
}

/*Loaing*/
.loading {
    position: fixed;
    display: none;
    z-index: 1031;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    /* Transparent Overlay */
    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(203 226 254 / 51%);/* rgba(0,0,0,0.3);*/
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1em;
            height: 1em;
            margin-top: -0.5em;
            -webkit-animation: spinner 1500ms infinite linear;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            /*0, 0, 0, 0.75*/
            -webkit-box-shadow: rgba(106 173 254) 1.5em 0 0 0, rgba(106 173 254) 1.1em 1.1em 0 0, rgba(106 173 254) 0 1.5em 0 0, rgba(106 173 254) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(106 173 254) 0 -1.5em 0 0, rgba(106 173 254) 1.1em -1.1em 0 0;
            box-shadow: rgba(106 173 254) 1.5em 0 0 0, rgba(106 173 254) 1.1em 1.1em 0 0, rgba(106 173 254) 0 1.5em 0 0, rgba(106 173 254) -1.1em 1.1em 0 0, rgba(106 173 254) -1.5em 0 0 0, rgba(106 173 254) -1.1em -1.1em 0 0, rgba(106 173 254) 0 -1.5em 0 0, rgba(106 173 254) 1.1em -1.1em 0 0;
        }

/* Animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* 404*/
#notfound {
    position: relative;
    height: 100vh;
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 40%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.notfound {
    max-width: 520px;
    width: 100%;
    line-height: 1.4;
}

    .notfound > div:first-child {
        padding-left: 200px;
        padding-top: 12px;
        height: 170px;
        margin-bottom: 20px;
    }

    .notfound .notfound-404 {
        position: absolute;
        left: 0;
        top: 0;
        width: 170px;
        height: 170px;
        background: #7eadfa;
        border-radius: 7px;
        -webkit-box-shadow: 0 0 0 10px #7eadfa inset, 0 0 0 20px #fff inset;
        box-shadow: 0 0 0 10px #7eadfa inset, 0 0 0 20px #fff inset;
    }

        .notfound .notfound-404 h1 {
            font-family: chango, cursive;
            color: #fff;
            font-size: 118px;
            margin: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            display: inline-block;
            height: 60px;
            line-height: 60px;
        }

    .notfound h2 {
        font-family: chango, cursive;
        font-size: 58px;
        color: #222;
        font-weight: 400;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.1;
        color: #7eadfa
    }
@media(max-width : 932px) {
    .notfound h2 {
        font-size: 60px !important;

    }
}
@media(max-width : 390px) {
    .notfound h2 {
        font-size: 38px !important;
    }
}