@font-face {
    font-family: 'Tajawal-Regular';
    src: url('../assets/fonts/Tajawal-Regular.ttf') format('truetype');
}
    
@font-face {
    font-family: 'Tajawal-Light';
    src: url('../assets/fonts/Tajawal-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal-ExtraBold';
    src: url('../assets/fonts/Tajawal-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal-Bold';
    src: url('../assets/fonts/Tajawal-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal-ExtraLight';
    src: url('../assets/fonts/Tajawal-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Tajawal-Medium';
    src: url('../assets/fonts/Tajawal-Medium.ttf') format('truetype');
}
* {
    font-family: 'Tajawal-Regular'
}
html{
    height:100%;
}
body {
    width: 100%;
    /*    height:100%;
*/ position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}


.headerStyle {
    background-color: #0f638a;
}


.headerClass a{
    color: #0f638a;
}

.headerClass h3 {
    font-weight:bold
}

.homeButton {
    background-color: #0f638a !important;
    color:white !important;
}

.NumberTitleField {
  border:  2px solid #dedede !important;
}

.socialClass a{
    font-size:18px !important;
}

.footerClassHyper a{
    text-decoration:none ;
}

.rightClass {
    font-size: 12px !important;
}
.DevelopedByClass {
    font-size: 12px !important;
}
.foooterDeveloped {
    width: 55px;
}

.homeButton {
    border-radius: 10px;
    margin: 0px 20px 0px;
    width:100%
}

.homeButtons a {
    text-decoration: none !important;
    background-color: #e4e4e4;
    font-weight: bold;
    color: black
}


.homeButtons label {
    font-family: 'Almarai-Bold';
}

.homeButtons a{
    pointer-events:none;
}
.homeInsuButtons a {
    border-radius: 8px;
    background-color: #375b6d;
    color: white;
}

.addVehFor {
    pointer-events: visible;
}

.homeInsuButtons {
    border-radius: 8px;
    color: white;
}


.HeaderLogo {
    display: block;
    background-image: url('/images/General/JOIF Logo.png');
    height: 130px;
    width: 130px;
    background-repeat: no-repeat;
}

.longWidth {
    width: 28.5%;
    margin-top: 10px;
}


.fontIcons a {
    font-size: 25px;
}

.fontIcons .dropdown-item {
    font-size: 15px;
}

.headerClass h3 a {
    font-size: 20px;
}

.InsuranceHome {
    font-size: 60px;
}

.YourNumberTitle {
    font-size: 20px;
}

.form-control {
    box-shadow: none !important;
    outline: none !important
}

.NumberTitleField {
    border-radius: 10px !important;
    height: 55px;
}



.regNumberLabel{
    background-color:aliceblue;
    border-radius:10px;
    font-weight:bold;
}

.plateNumber, .emailField {
    border: none !important;
    border-bottom: 2px solid #d6d6d6 !important;
    border-radius: 0px !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea:focus, input:focus {
    outline: none;
}

.AddVehicleClass {

    margin-top:54px !important;
}

.AddVehicleButton a {
    background-color: #0f638a;
    border-color: #345567;
    color: white;
    border-radius: 10px;
}

.AddVehicleButton button {
    background-color: #0f638a;
    border-color: #345567;
    color: white;
    border-radius: 10px;
}



.destClass {
    width: 40px
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color: #000;
}

.card {
    background-color: #0f638a !important;
    color:white !important;
}

.cardData {
    background-color: #acc4d887 !important;
    color: black !important;
    border-color: #acc4d887 !important;
}

.cardValue {
    color: #36b336 !important;
}

.PaymentLabel {
    text-decoration:none !important;
    color: #969696;
}

 .payMethodLabel {
    cursor: pointer
}

.visaValue {
    background-color: #d8e7f5d9;
    padding: 18px 43px 18px 43px;
    font-weight: bold;
    color: green;
}

    .visaValue span {
        font-size: 14px;
    }

.boldText {
    font-weight:bold;
}
.referenceNumClass {
    background-color: #d8e7f5d9
}



.backButton {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.successCard {
    border: 1px solid #ececec
}
.successCard .card-header {
    background-color: #0f638a !important;
    color: white !important;
    font-weight:bold;
    font-size:20px
}

    .successCard .card-title {
        line-height: 2;
        font-size: 20px;
    }

.refNumberInput {
    background-color: transparent !important;
    border: none !important;
    font-weight: bold !important;
}

.OtpText {
    background-color: #efefef !important;
}

.sms-form-icon {
    display: block;
    width: 127px;
    height: 155px;
    background-image: url(../assets/images/assets/sms-code-icon.svg);
}


.digit-group input {
    width: 30px;
    height: 45px;
    border: none;
    text-align: center;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    margin: 0 2px;
}

.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.otpSend {
    background-color: #0f638a;
    border-color: #345567;
    color: white;
    border-radius: 10px;
}

.otpExit {
    background-color: silver;
    border-color: #b5b5b5;
    color: white;
    border-radius: 10px;
}

.paymentClass Label {
    background-color: #0f638a !important;
    cursor:default;
    color:white;
}

.PaymentOption .option {
    box-shadow: 0 6px 10px rgb(0 0 0 / 20%);
    cursor:pointer;
}
.paymentClass label:hover{
    cursor:default;
    color:white;
}

label#Username-error, label#DestNo-error, label#RegNoID-error, label#destID-error, label#NewOwnerNatID-error, label#OwnerPhone-error {
    position: absolute;
    width: 100%;
    bottom: -28px;
    color: #c60000;
}
.d-flex
{
    position:relative;
}

.flagHome{
    z-index:15
}
.NumberTitleField{
    z-index:1;
}

@media (max-width: 992px) {

    .homeTitle {
        font-weight: bold;
        font-size: 25px;
    }
    .digit-group input {
        font-size: 16px !important
    }
        .UnifiedInsuranceNav {
        white-space: initial;
        font-size: 11px !important;
        padding:0px !important
    }
    h3, h5, h6, .GeneralFont, p, li, .referenceNumClass span, .GeneralButton {
        font-size: 12px;
    }
    a {
        font-size: 13px !important;
    }

    label{
        font-size:14px !important;
    }
    .HeaderLogo {
        height: 47px !important;
        width: 47px !important;
    }

    #input_img_Efwatercom {
        width: 19px;
        height: 19px;
    }
    .visaValue {
        padding: 0px 20px 0px 20px;
    }

    .AddVehicleClass {
        margin-top: 50px !important;
    }
    .homeButton {
       margin: 0px 0px 0px;
    }
    input#Username {
        font-size:12px
    }
    .VisaValueDiv {
        margin: 0 00px 0px 0px !important;
    }

    .card-header, .card-title, .mobilePayment label {
        font-size: 18px !important;
    }
}

@media (min-width: 992px) {
    .homeTitle {
        font-weight: bold;
        font-size: 40px;
    }
    h6 span{
        font-size:18px !important
    }
    label {
        font-size: 17px !important;
    }

    .homeButtons label {
        font-size: 19px !important;
    }

    .YourNumberTitle {
        font-size: 18px !important
    }

    .card-header, .card-body {
        font-size: 19px;
    }

}

@media (max-width: 1680px) {
    .mobileFooter {
        display: flex
    }

    .webFooter {
        display: none
    }
    .webPayment {
        display: none
    }
    .mobilePayment{
        display:block
    }
}

    @media (min-width: 1680px) {
    /*    footer {
            height: 50px;
            bottom: 0
        }*/
        .webFooter {
            display: flex
        }

        .mobileFooter {
            display: none
        }

        .webPayment {
            display: block
        }

        .mobilePayment {
            display: none
        }
    }

    .backgrounfNav {
        background-color: #3A6073;
    }

    a#navbarDropdownUser, a#navbarDropdownLanguage {
        color: white;
    }

.dropdown-item.active, .dropdown-item:active {
    background-color: #3a6073;
}



.headerLink{
    color:black
}

.visaValue span:first-child{
    font-size:17px;
}


footer {
    background: #3A6073 !important;
    color: white;
    margin-top: 60px;
}

footer a {
    color: #fff;
    font-size: 14px;
    transition-duration: 0.2s;
    text-decoration: none;
    white-space:nowrap

}

footer a:hover {
    color: #FA944B;
    text-decoration: underline;
}

#EmailID-error {
    color: #c60000 !important
}

@media (min-width: 992px) {
    .UnifiedInsuranceNav {
        white-space: nowrap;
        font-size:14px
    }
}

.footer-section {
    background: #151414;
     position:relative;
     bottom:0;
     margin-top:auto;
}


.footer-content {
    position: relative;
    z-index: 2;
}
.copyright-area {
    background: #3a6073;
    padding: 25px 0;
}

.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #878787;
}

.copyright-text p a {
    color: #ff5e14;
}


@media only screen  (max-width:900px) {
    body{
        display:flex;
        height:100vh;
        flex-direction:column
    }
    footer, .footer-section {
        position: relative !important;
        bottom: 0 !important;
        margin-top:auto;
    }
}