* {
    margin: 0;
    padding: 0;
}

.container-fluid {
    padding-right: 10px;
    padding-left: 10px;
}

@font-face {
    font-family: 'roboto-medium';
    src: url('../../fonts/roboto/roboto-medium.woff') format('woff');
}

@font-face {
    font-family: 'roboto-bold';
    src: url('../../fonts/roboto/roboto-bold.woff') format('woff');
}

@font-face {
    font-family: 'roboto-regular';
    src: url('../../fonts/roboto/roboto-regular.woff') format('woff');
}

@font-face {
    font-family: 'roboto-light';
    src: url('../../fonts/roboto/roboto-light.woff') format('woff');
}

html, body {
    min-height: 100%;
}

body {
    font-family: 'roboto-regular';
    background: #F8FAFF !important;
    font-size: 14px !important;
    overflow-x: hidden;
}

.mainContainer {
    -moz-box-shadow: 0 3px 50px rgb(0 0 0 / 0.15);
    -webkit-box-shadow: 0 3px 50px rgb(0 0 0 / 0.15);
    box-shadow: 0 3px 50px rgb(0 0 0 / 0.15);
    width: 70% !important
}

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animationGIF {
    /*background: #0071bf;*/
    background: url("../../images/defaultlogos/blue-bg.svg");
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.validation-summary-errors ul {
    padding-left: 0 !important;
}

.validation-summary-errors li {
    list-style: none;
    padding: 4px 10px;
    margin: 4px 0;
    background: #ffebeb;
    color: #dc3545;
}

.formSection {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: 60%;
    height: fit-content;
    padding: 20px;
}

.cardSection {
    width: 100%;
    padding: 20px;
}

.form-control {
    border: none !important
}

    .form-control:focus, input:focus {
        border-color: none !important;
        box-shadow: none !important;
    }

input[type=checkbox] {
    cursor: pointer
}

.formGroup {
    display: flex;
    -webkit-align-items: center !important;
    align-items: center !important;
    background-color: #F5F5F5 !important;
    padding: 2px 14px;
    /*border-left:5px solid #00BCF2;*/
}

    .formGroup input {
        background: transparent !important;
    }

        .formGroup input::placeholder {
            color: #B4B4B4
        }

    .formGroup i {
        font-size: 16px;
        margin-right: 5px;
        color: #B4B4B4
    }

.forgotLink {
    color: #0b5ed7 !important;
    text-decoration: none
}

    .forgotLink:hover {
        text-decoration: underline
    }

    .forgotLink:focus {
        color: #0ea1cb !important;
    }

.bottom-vector {
    position: absolute;
    height: 40%;
    left: 5px;
    bottom: -25%;
}

.top-vector {
    position: absolute;
    top: -13%;
    left: -5%;
    height: 30%;
}

.formSubmit {
    /*background: #00BCF2 !important;
    border: none !important;*/
}

    .formSubmit:focus {
        box-shadow: none !important
    }

.portalSelect {
    border: none !important;
    background: none !important
}

    .portalSelect .card-body {
        font-size: 1rem !important;
        font-family: roboto-medium;
        -moz-box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
        -webkit-box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
        box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
        cursor: pointer;
        border-radius: 5px;
        padding: 5px !important;
    }

.notLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit !important;
    padding: 1rem 1rem
}

.portalSelect .card-body:after {
    position: absolute;
    content: "";
    top: 0;
    left: 10px;
    width: 0;
    height: 100%;
    background: #0f82f0;
    transition: all .35s;
    border-radius: 5px;
}

.portalSelect .card-body:hover {
    color: #fff;
}

    .portalSelect .card-body:hover:after {
        width: 95%;
    }

.portalSelect .card-body a {
    position: relative;
    z-index: 2;
}

#signInBlock {
    /*display:flex*/
}

.lottie-animation {
    width: 70%;
    height: 70%;
}

.login-sec {
    padding: 50px;
    /*box-shadow: 0px 3px 78px #0F82F017;
    border-radius: 34px;*/
    /*background: rgba(122, 192, 55, 0.2);
    backdrop-filter: blur(18px);*/
    /*background-image: radial-gradient(rgba(15,130, 240, .5), #ffffff, #ffffff);*/
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

    .login-sec h3:before {
        content: "";
        display: inline-block;
        background: #0b5ed7;
        height: 50px;
        width: 8px;
        margin-right: 20px;
    }

#animationBlock {
    position: relative;
    transition: all .5s ease-out;
}

.process-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background: rgb(109 109 109 / 40%);
    position: fixed;
    z-index: 9999;
}

.form-check-input {
    height: 1.3em !important;
    width: 1.3em !important;
}
/*Loader*/
.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #fff;
            margin: -4px 0 0 -4px;
        }

        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .lds-roller div:nth-child(1):after {
                top: 63px;
                left: 63px;
            }

        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .lds-roller div:nth-child(2):after {
                top: 68px;
                left: 56px;
            }

        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .lds-roller div:nth-child(3):after {
                top: 71px;
                left: 48px;
            }

        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }

        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .lds-roller div:nth-child(5):after {
                top: 71px;
                left: 32px;
            }

        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .lds-roller div:nth-child(6):after {
                top: 68px;
                left: 24px;
            }

        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .lds-roller div:nth-child(7):after {
                top: 63px;
                left: 17px;
            }

        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12px;
            }

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*Loader End*/



/*--------------------------Media Query Starts---------------------*/
@media only screen and (max-width : 1500px) and (min-width : 993px) {
    .mainContainer .row {
        height: 52vh
    }

    .formSection {
        width: 80%
    }
}

@media only screen and (max-width : 992px) {
    .lottie-animation {
        width: 100%;
        height: 100%;
    }

    .formSection {
        width: 60%
    }

    .formDiv {
        height: 50vh
    }
}

@media only screen and (max-width : 767px) {
    .formSection {
        width: 100%;
    }

    .mainContainer {
        width: 90% !important
    }

    .top-vector {
        left: -8%
    }

    .formSection h3 {
        margin-bottom: 1rem !important
    }

    .text-muted, .forgotLink {
        font-size: 12px;
    }
}

@media only screen and (max-width : 576px) {
    .login-sec {
        padding: 25px;
    }
}