:root {
    --maincolor: #00579F;
    --maincolor-dark: #00467F;
    --divcolor: #E4E6EE;
    --fontcolor: #26333D;
    --fonthover: #FFCC00;
    --border-hover: #E18700;
    --fontwhite: #ffffff;
    --navcolor: #f8f9fa;
    --navfont: #8A8A8A;
}

@font-face {
    font-family: 'DinNextLight';
    src: url('fonts/din-next/light/DinNextLight.eot');
    src: url('fonts/din-next/light/DinNextLight.woff2') format('woff2'),
    url('fonts/din-next/light/DinNextLight.woff') format('woff'),
    url("fonts/din-next/light/DinNextLight.ttf") format('truetype'),
    url('fonts/din-next/light/DinNextLight.svg#DinNextLight') format('svg');
}

@font-face {
    font-family: 'DinNextRegular';
    src: url('fonts/din-next/regular/DinNextRegular.eot');
    src: url('fonts/din-next/regular/DinNextRegular.woff2') format('woff2'),
    url('fonts/din-next/regular/DinNextRegular.woff') format('woff'),
    url('fonts/din-next/regular/DinNextRegular.ttf') format('truetype'),
    url('fonts/din-next/regular/DinNextRegular.svg#DinNextRegular') format('svg');
}

@font-face {
    font-family: 'DinNextMedium';
    src: url('fonts/din-next/medium/DinNextMedium.eot');
    src: url('fonts/din-next/medium/DinNextMedium.woff2') format('woff2'),
    url('fonts/din-next/medium/DinNextMedium.woff') format('woff'),
    url('fonts/din-next/medium/DinNextMedium.ttf') format('truetype'),
    url('fonts/din-next/medium/DinNextMedium.svg#DinNextMedium') format('svg');
}

@font-face {
    font-family: 'DinNextBold';
    src: url('fonts/din-next/bold/DinNextBold.eot');
    src: url('fonts/din-next/bold/DinNextBold.woff2') format('woff2'),
    url('fonts/din-next/bold/DinNextBold.woff') format('woff'),
    url('fonts/din-next/bold/DinNextBold.ttf') format('truetype'),
    url('fonts/din-next/bold/DinNextBold.svg#DinNextBold') format('svg');
}

html, body {
    font-family: 'DinNextRegular', serif;
    color: var(--fontcolor);
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--maincolor);
    text-decoration: none;
    transition: all .3s ease-in-out;
}

b, strong {
    font-weight: 700;
}

[dir=rtl] body {
    text-align: right;
    direction: rtl;
}

img {
    max-width: 100%;
}

a {
    color: var(--maincolor);
}

a:hover {
    color: var(--fonthover);
}

a,
a:hover {
    text-decoration: none;
}

label {
    color: var(--fontcolor);
    font-size: 0.875rem;
    font-weight: bold;
}

.auth-body {
    overflow: hidden;
}

.authentication-cover-img {
    opacity: 90%;
}

.auth-part {
    display: flex;
    width: 100%;
    height: 100vh;
}

.auth-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 732px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 0 2px 20px 1px rgba(0, 0, 0, .11);
}

@media (max-width: 768px) {
    .auth-form {
        width: 100%;
        height: auto;
    }
}

.auth-form .auth-form-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #fff;
}

.auth-form .auth-form-content {
    width: 100%;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.auth-form .auth-form-content .app-brand {
    display: flex;
    flex: 0 0 auto;
    overflow: hidden;
    line-height: 1;
    min-height: 1px;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    align-items: center;
}

.auth-form .auth-form-content .logo-image {
    width: 100%;
    height: 50px;
}

.auth-form .auth-form-content .app-brand-logo img {
    max-width: 100%;
}

.auth-form .auth-form-content .auth-form-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form .main-footer {
    height: calc(8vh);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.auth-form .main-footer p {
    margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .auth-form .auth-form-content {
        padding: 1.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .auth-form .auth-form-content {
        padding: 2rem 3.5rem;
    }

    .auth-form .main-footer {
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .auth-form .auth-form-content {
        padding: 2.5rem 1.25rem;
    }
}

.auth-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--maincolor);
    position: relative;
}

@media (max-width: 768px) {
    .auth-banner {
        display: none;
    }
}

.auth-banner .auth-banner-content {
    /*padding: 1.5rem 1.5rem 0;*/
    text-align: center;
}

.auth-banner .auth-banner-content > img {
    width: 700px;
    height: auto;
    padding: 1rem 1rem 0;
    opacity: .90;
}

.auth-part .auth-headline {
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-family: 'DinNextBold', serif;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--fontcolor);
}

.auth-part .auth-details {
    font-family: 'DinNextMedium', serif;
    font-size: 0.875rem;
    color: var(--fontwhite);
    text-align: center;
    line-height: 1.7;
    /*word-spacing: 0.1em;*/
    padding-inline: 1rem;
    margin-bottom: 0.5rem;
}

.auth-part .auth-title {
    font-size: 1rem;
    color: var(--fontcolor);
}

@media (max-width: 992px) {
    .auth-banner .auth-banner-content > img {
        width: 640px;
    }
}

/*select lang*/
.select-change-lang {
    position: relative;
}

.select-change-lang .changeLang {
    text-align: center;
    width: 130px;
    max-width: 130px;
    padding: 0.25rem 0.375rem;
    height: 38px;
}

.select-change-lang img {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translate(-50%, -50%);
}

.input-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.input-with-icon > img {
    width: 18px;
    height: 18px;
    max-width: 18px;
}

.input-with-icon .input-icon {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translate(-50%, -50%);
}

/*.input-with-icon .form-control {*/
/*    padding-inline-start: 2.5rem;*/
/*}*/

/* Header Styles */
.btn-primary {
    background-color: var(--maincolor);
    height: 40px;
    font-size: 1rem;
}

.btn-primary:hover {
    color: #fff;
    background-color: #00467F;
    border-color: #00467F;
    box-shadow: none;
}

.text-primary {
    color: var(--maincolor) !important;
}

.form-group {
    margin-bottom: 15px;
}

.form-group > label {
    margin-bottom: 0.5rem;
}

.form-control {
    background-color: #F8F9FA !important;
    border: 1px solid #d4d8dd;
    height: 40px;
}

.form-control:focus {
    border-color: var(--maincolor);
    outline: 0;
    box-shadow: none;
}

.form-select {
    background-position: right 0.5rem center;
}

.form-check-inline {
    display: inline-block;
    margin-inline: 1rem auto;
}

.form-check {
    min-height: 1.5rem;
    padding-inline: 0.375rem 1.5em;
    margin-bottom: 0.125rem;
}

.form-check .form-check-input {
    margin-top: 0.375rem;
    width: 1.1em;
    height: 1.1em;
}

.form-check-label {
    padding-inline-start: 0.25rem;
}

.form-check-input:checked {
    background-color: var(--maincolor);
    border-color: var(--maincolor);
    border: 0;
    box-shadow: none;
}

.bold {
    font-weight: 600;
}

.orm-eye {
    right: 0.25rem;
    background: transparent;
    padding: 0;
    border: 0 !important;
    color: #FF5B5C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.2rem;
}

.orm-eye:hover {
    background: transparent;
    border: 0 !important;
}

.orm-eye:active {
    background-color: transparent;
}

.uneye {
    display: none;
    cursor: pointer;
}

.orm-eye .hidden {
    display: none;
}

.orm-eye .show {
    display: block;
}

.bg-frame {
    border-radius: 0.5rem;
    background-color: var(--navcolor);
}

.verified-wrapper {
    margin: auto;
    padding: 1.5rem;
    text-align: center;
}

.verified-wrapper .verified-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.verified-wrapper .verified-image > img {
    max-width: 130px;
}

@media (max-width: 567px) {
    .verified-wrapper {
        padding: 1.5rem 1rem;
    }
}

.code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    direction: ltr;
    padding: 0.375rem 0;
}

.code {
    caret-color: transparent;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 2rem;
    line-height: 2;
    font-weight: 400;
    -moz-appearance: textfield;
}

.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.code:valid {
    border-color: #009E47;
}

.code:focus {
    border: 1px solid var(--border-hover);
}

@media (max-width: 768px) {
    .code-container {
        flex-wrap: wrap;
    }

    .code {
        font-size: 1.5rem;
        height: 50px;
        max-width: 50px;
    }
}

/* input telephone */
.intl-tel-input {
    display: table-cell;
}

.intl-tel-input .selected-flag {
    z-index: 6;
}

.intl-tel-input .country-list {
    z-index: 8;
    left: 0;
}

.intl-tel-input .country-list {
    font-size: 15px !important;
}

.input-group .intl-tel-input .form-control {
    border-radius: 0.25rem 0 0.25rem 0;
}

/* Nav-bar */
.nav-blank {
    color: var(--navfont);
    background-color: var(--navcolor);
}

.nav-blank.active,
.show > .nav-blank {
    background-color: var(--maincolor) !important;
}

.nav-item {
    margin-inline-end: 15px;
}

/* Footer Styles */
.intl-tel-input.allow-dropdown {
    width: 100%;
    display: block;
}

.email-div, .company-div, .name-div, .password-div {
    direction: ltr !important;
}

.email-div label,
.company-div label,
.name-div label,
.password-div label {
    direction: rtl;
}

.company-div input::-webkit-input-placeholder,
.name-div input::-webkit-input-placeholder,
.password-div input::-webkit-input-placeholder {
    text-align: center !important;
    padding-inline-start: 2rem !important;
}

.company-div .form-control,
.name-div .form-control,
.password-div .form-control {
    text-align: center;
}

.password-div .form-control {
    padding-inline: 2.5rem;
}

.email-div input::-webkit-input-placeholder {
    padding-inline-start: 0 !important;
}

.email-div .form-control {
    padding-inline-start: 2.5rem;
    padding-inline-end: 1rem;
}