@font-face{
    font-family: light;
    src: url('../roboto/Roboto-Light.ttf');
}
@font-face{
    font-family: med;
    src: url('../roboto/Roboto-Medium.ttf');
}
@font-face{
    font-family: regular;
    src: url('../roboto/Roboto-Regular.ttf');
}
@font-face{
    font-family: bold;
    src: url('../roboto/Roboto-Bold.ttf');
}

:root {
    --primary: rgba(62, 1, 111, 1);
    --gray: gray;
    --white: #ffffff;
}

.color-gray {
    color: var(--gray);
}

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

.my-bg {
    background: var(--primary) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: linear-gradient(109.6deg, #E5EAF9 0%, #FFFFFF 138.09%, rgba(62, 1, 111, 0.17) 98.6%);
    font-family: regular;
}

.wrapper {
    display: flex;
    justify-content: start;
    width: 80vw;
    height: 100vh;
    margin: auto;
    padding: 15px 0px;
}

.wrapper-left {
    width: 50%;
    height: 100%;
    padding: 20px !important;
    background: var(--white);
    border-radius: 10px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.wrapper-right {
    width: 50%;
    height: 100%;
    background-image: url("../img/login.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}

.left-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.left-first {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.left-second {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    min-height: calc(100% - 50px);
    scroll-behavior: initial;
    width: 100%;
}

/*.left-third {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    height: 20px;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: start;*/
/*    align-items: center;*/
/*}*/

.left-second .content {
    position: relative;
    min-height: 100%;
}

.left-second .content .content-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    padding: 10px 0px;
    overflow-y: inherit;
    overflow-x: hidden;
}

.footer-text {
    margin: 0;
}

.left-first h1 {
    margin: 0;
    font-family: bold;
    color: var(--primary);
}

.content-box h3 {
    margin: 0;
    color: black;
    font-family: med;
    text-transform: capitalize;
    text-align: center;
    padding: 15px 15px !important;
}

.btn:focus {
    box-shadow: none !important;
}

.form-control {
    padding: 12px !important;
    color: var(--gray) !important;
    border-radius: 10px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid lightgray !important;
}

.form-label {
    color: #444141 !important;
    font-family: regular !important;
    margin: 0 !important;
}

.form-label i {
    color: #444141 !important;
}

.form-control.pass {
    border-right: 1px solid #fff !important;
}

.input-group-text {
    border: 0 !important;
    border-top: 1px solid lightgray !important;
    border-right: 1px solid lightgray !important;
    border-bottom: 1px solid lightgray !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.input-group-text i {
    color: var(--gray);
}

.input-group-text i:hover {
    cursor: pointer;
}

.acc-span {
    display: flex;
    justify-content: center;
}

.acc-span span {
    font-family: light;
    font-size: 14px;
    margin-right: 4px;
}

.acc-span a {
    font-family: light;
    font-size: 14px;
}

.btn-custom-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--white);
    font-family: light;
    border-radius: 8px;
    font-size: 1rem;
    padding: 0.7rem 3rem;
}

.btn-custom-primary:hover {
    color: var(--white);
    background: rgb(50, 3, 89);
}

label.error {
    color: indianred;
    font-size: 13px;
}

@media (max-width: 1199.98px) {
    .wrapper {
        width: 90vw;
    }

    .left-second .content .content-box {
        width: 80%;
    }
}

@media (max-width: 991.98px) {
    .left-second .content .content-box {
        width: 90%;
    }
}

@media screen and (max-width: 767.99px) {
    .wrapper {
        width: 99vw;
    }

    .left-second .content .content-box {
        width: 90%;
    }
}

@media screen and (max-width: 575.99px) {
    .wrapper-left {
        width: 100%;
        border-radius: 10px !important;
    }

    .wrapper-right {
        width: 0;
    }

    .left-second .content .content-box {
        width: 95%;
    }

    .left-first {
        justify-content: center;
    }
}