.iti {
    width: 100%;
}

    .iti input, .iti input[type=text], .iti input[type=tel] {
        padding-left: 45px !important;
    }

.border-0 {
    border: 0px !important;
}

.border-right-0 {
    border-right: 0px !important;
}

.border-left-0 {
    border-left: 0px !important;
}



.input-group-text {
    margin: 0px 10px;
}

header {
    background: transparent !important;
    color: #001b28 !important;
}

    header input, header select {
        color: #001b28 !important;
    }

main {
    background: transparent !important;
    /*min-height: 100vh;*/
    /*padding-bottom: 125px !important;*/
}

.navbar {
    background: transparent !important;
}

.navbar-nav .nav-link {
    color: #001b28;
    border-bottom: 3px solid transparent;
}

.img-logo {
    /*min-height: 60px !important;*/
    width: auto !important;
}

.btn-link-back-icon {
    font-size: 28px;
}

.btn-link-back {
    color: white;
    font-size: 18px;
}

    .btn-link-back:hover {
        text-decoration: none !important;
        color: #154552 !important;
    }

.page-title {
    color: var(--bahri);
}


.form-control, .form-select, .custom-select {
    height: auto !important;
    padding: 8px !important;
}

select, select.form-control {
    background-position: 3% center !important;
    padding-left: 7% !important;
}

.wizard-body {
    min-height: 40vh;
}

.wizerd {
    border: 0px;
    border-radius: 0px;
    border-bottom: 2px solid #E3E3E3;
}

.wizerd__item {
    color: #A7B1B7;
}

footer {
    border-radius: 0px !important;
    /*position: fixed;
            bottom: 0;
            right: 0;
            left: 0;*/
    width: 100%;
}



.text-darkgreen {
    color: var(--darkgreen);
}

.fs-sm {
    font-size: 11pt;
}

.fs-xs {
    font-size: 9pt;
}

.nafaz-otp-number {
    background: transparent url('/images/preloader-darkgreen.svg') no-repeat center center;
    background-size: auto 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40pt;
    font-family: sans-serif;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--darkgreen);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    zoom: 3.5;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--darkgreen);
    animation: fill-green .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}





.crossmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--darkred);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.crossmark {
    zoom: 3.5;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--darkred);
    animation: fill-red .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.crossmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill-green {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--darkgreen);
    }
}

@keyframes fill-red {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--darkred);
    }
}