@font-face {
    font-family: "Cairo";
    font-style: normal;
    /*font-weight: 400;*/
    font-display: swap;
    src: url(../Fonts/Cairo-arabic.woff2) format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    /*font-weight: 400;*/
    font-display: swap;
    src: url(../Fonts/cairo-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-display: swap;
    src: url(../Fonts/Cairo-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



body {
    -ms-overflow-style: scrollbar;
    --primary-color: #6d0b00;
    --primary-color-hover: #972214;
    --primary-color-rgb: 109, 11, 0;
    --secondary-color: #cba52c;
    --primary-color-focus: #b5911e;
}

body {
    font-family: 'Cairo';
    -ms-overflow-style: scrollbar;
    --primary-color: #6d0b00;
    --primary-color-hover: #972214;
    --primary-color-rgb: 109, 11, 0;
    --secondary-color: #cba52c;
}
body.k-rtl{
    text-align:right;
}
.text-primary:hover,
.text-primary {
    color: var(--primary-color) !important;
}
.container-fluid {
    display: flex;
    min-height: 100vh;
    /*! max-height: 768px; */
}

    .container-fluid .innerdivs {
        /* width: 50%; */
        display: inline-flex;
        /*! align-items: center; */
        justify-content: center;
    }

.innerdivs.Login-image {
    background: url('../images/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 50%;
    height: 100vh;
    position: sticky;
    top: 1px;
}

    .innerdivs.Login-image > div {
        /* height: 100vh; */
        display: flex;
        align-items: center;
        margin: 0;
        width: 100%;
        /*! width: 200px; */
        /*! height: 200px; */
        justify-content: center;
    }

.images-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
    background: #fff;
    border: 3px solid #92191c;
}

.innerdivs.Login-image .images-container img {
    margin: 0;
    /*max-width: 260px;*/
    width: 100%;
}
.field-validation-error {
    display: block;
    max-width: 400px;
    text-align: start;
    margin: auto;
}
.inputs-container {
    margin-bottom: 5px;
    width: max(400px,50%);
    margin: auto;
    text-align: start;
}

.inputs-container > div {
    margin-bottom: 20px;
}
.Login-code {
    padding: 40px;
    /* padding-top: 100px; */
    text-align: center;
    width: 50%;
    /* margin: auto; */
    flex: 1;
    box-sizing: border-box;
    background-color: #F2F2F2;
    background-image: url('../images/bg-2.png');
    background-repeat: no-repeat;
    background-position: 100px -180px;
    background-size: cover;
    /* align-items: center; */
    align-items: center;
}

.inputs-container input {
    padding: 7px;
    height: 45px;
    margin-bottom: 0px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    background: #FFFFFF99 0% 0% no-repeat padding-box;
    border: 0.25px solid #70707070;
    border-radius: 8px;
    width: 100%;
}

    .inputs-container input:focus {
        box-shadow: 0 0 0 1px #6d0b00;
        border-color: #6d0b00;
        outline: none;
    }

.Login-button:hover,
.Login-button {
    background: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 7px;
    padding: 0 10px;
    color: #fff;
    text-transform: capitalize;
    line-height: inherit;
    font-family: 'Cairo';
    min-width: 250px;
    margin: 0 10px;
    height: 44px;
}

.Login-button:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
}
.buttons-container {
    width: 100%;
    margin-bottom: 10px;
}

.title {
    margin-bottom: 70px;
    font-family: 'Cairo';
    font-weight: bold;
    font-size: 20px;
    color: var(--primary-color);
}

.description {
    color: #555;
    margin-bottom: 40px;
    font-size: 14px;
}

.Login-links {
    margin-bottom: 30px;
}

    .Login-links:last-child {
        margin-bottom: 0;
    }

a,
a:not(:link),
a:focus,
a:visited {
    color: var(--primary-color);
    text-decoration: none;
}

.invalid,
.invalid p {
    color: red;
}

.form-label {
    text-align: start;
    width: 100%;
    /* color: var(--primary-color); */
    font-weight: 600;
}

.Login-code.Register {
    text-align: start;
}

    .Login-code.Register .title {
        text-align: center;
    }

.loginLinks {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media only screen and (max-width: 1200px) {
    .innerdivs.Login-image .images-container img {
        /*max-width: 40%;*/ /*commented to fix bug #12326*/
    }
}

@media screen and (max-width: 990px) {
    [class*="col-"], .row-cols-1 > *, .row-cols-2 > *, .row-cols-3 > *, .row-cols-4 > *, .row-cols-5 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .form-label {
        font-size: 15px;
    }
}

@media only screen and (max-width: 600px) {

    .innerdivs.Login-image {
        display: none;
        min-height: inherit;
    }

    .innerdivs.Login-code {
        padding: 50px 10px;
        width: auto;
        box-sizing: border-box;
    }

    .container-fluid {
        height: auto
    }

    .Login-code {
        background-image: url('../images/bg-2.png'),url('../images/bg.png');
        background-position: 100px -180px, center;
        background-attachment: fixed;
    }
    
}

@media only screen and (max-width: 898px) {
    .inputs-container {
        margin-bottom: 5px;
        width: auto;
        margin: auto;
        text-align: start;
    }

}