:root {
    --colorButton: #2A3F54;
    --colorButtonHover: rgb(204, 49, 49);
    --colorCardRdbackground: white;
    --colorCheckBox: rgb(28, 12, 110);
}


body {
    font-family: Calibri;
    font-size: 14px;
    color: #888;
    font-weight: 400;
}

.container {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: relative;
}

    .container::before {
        background-size: cover;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        /* opacity: 0.7;   */
    }


/*1. Login SodexoControl*/
/*-------------------------------------*/

.logo-login {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.card-rounded {
    border-radius: 10px 10px 10px 10px;
    background-color: var(--colorCardRdbackground);
    width: 100%;
    height: 500px;
    box-shadow: 3px 10px 5px 6px rgba(90, 81, 81, 0.37);
    padding: 20px;
}

.link-login {
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
}

.btn-login {
    width: 100%;
    background-color: var(--colorButton);
    border-color: var(--colorButton);
    color: white;
    margin-top: 12px;
    margin-bottom: 15px;
}

    .btn-login:hover {
        background-color: var(--colorButtonHover);
        border-color: var(--colorButtonHover);
        color: white;
    }

    .btn-login:focus {
        color: #fff;
        background-color: var(--colorButtonHover);
        border-color: var(--colorButtonHover);
    }

.auth-wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    min-width: 100%;
    min-height: 100vh;
}

    .auth-wrapper a,
    .auth-wrapper p > a {
        color: #111;
        font-weight: 600;
    }

    .auth-wrapper .btn-auth-gen .btn-icon {
        width: 140px;
        height: 140px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 45px;
    }

        .auth-wrapper .btn-auth-gen .btn-icon small {
            font-size: 15px;
        }

    .auth-wrapper .input-group {
        background: transparent;
    }

    .auth-wrapper .card {
        margin-bottom: 0;
    }

    .auth-wrapper > div {
        z-index: 5;
    }

    .auth-wrapper .auth-content {
        position: relative;
        width: 390px;
        padding: 15px;
        z-index: 5;
    }

        .auth-wrapper .auth-content.multyform, .auth-wrapper .auth-content.subscribe {
            width: 750px;
        }

@media only screen and (max-width: 768px) {
    .auth-wrapper {
        max-width: 360px;
    }
}

@media only screen and (max-width: 575px) {
    .auth-wrapper .card .card-body {
        padding: 30px 15px;
    }
}

.auth-wrapper .auth-icon {
    font-size: 30px;
}

    .auth-wrapper .auth-icon:before {
        background: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.auth-wrapper.offline {
    background-image: none;
}

    .auth-wrapper.offline:before {
        display: none;
    }

.auth-wrapper .auth-bg .r {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

    .auth-wrapper .auth-bg .r:first-child {
        top: -100px;
        right: -100px;
        background: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
    }

    .auth-wrapper .auth-bg .r:last-child {
        left: -100px;
        bottom: -100px;
        background: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
    }

    .auth-wrapper .auth-bg .r.s {
        width: 20px;
        height: 20px;
    }

        .auth-wrapper .auth-bg .r.s:nth-child(2) {
            top: 150px;
            right: -150px;
            background: #04a9f5;
        }

        .auth-wrapper .auth-bg .r.s:nth-child(3) {
            left: -150px;
            bottom: 150px;
            background: #1de9b6;
        }

    .auth-wrapper .auth-bg .r:nth-child(odd) {
        -webkit-animation: floating 7s infinite;
        animation: floating 7s infinite;
    }

    .auth-wrapper .auth-bg .r:nth-child(even) {
        -webkit-animation: floating 9s infinite;
        animation: floating 9s infinite;
    }

/* image varient start */
.aut-bg-img {
    background-image: url("../images/bg-images/bg4.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.aut-bg-img-side p {
    line-height: 2;
}

.aut-bg-img .custom-select, .aut-bg-img .form-control,
.aut-bg-img-side .custom-select,
.aut-bg-img-side .form-control {
    background: transparent;
}

.auth-tabs .tab-content {
    overflow: hidden;
    position: relative;
}

    .auth-tabs .tab-content .auth-icon {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 150px;
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

/* image varient start */
@-webkit-keyframes floating {
    from {
        -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
        transform: rotate(0deg) translate(-10px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        transform: rotate(360deg) translate(-10px) rotate(-360deg);
    }
}

@keyframes floating {
    from {
        -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
        transform: rotate(0deg) translate(-10px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        transform: rotate(360deg) translate(-10px) rotate(-360deg);
    }
}


/**  =====================
      Radio & Checked css start
==========================  **/
.checkbox {
    padding: 10px 0;
    min-height: auto;
    position: relative;
    margin-right: 5px;
}

    .checkbox input[type=checkbox] {
        margin: 0;
        display: none;
        width: 22px;
    }

        .checkbox input[type=checkbox] + .cr {
            padding-left: 0;
        }

            .checkbox input[type=checkbox] + .cr:before {
                content: "\e83f";
                width: 22px;
                height: 22px;
                display: inline-block;
                margin-right: 10px;
                border: 2px solid #e9eaec;
                border-radius: 3px;
                font-size: 15px;
                font-family: 'feather';
                font-weight: 400;
                line-height: 19px;
                vertical-align: bottom;
                text-align: center;
                background: #ffffff;
                color: transparent;
                cursor: pointer;
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
            }

        .checkbox input[type=checkbox]:checked + .cr:before {
            /*     background: #1dd5d2;
    border-color: #1dd5d2;
    color: #ffffff; */
        }

        .checkbox input[type=checkbox].disabled + .cr, .checkbox input[type=checkbox]:disabled + .cr {
            opacity: 0.5;
        }

            .checkbox input[type=checkbox].disabled + .cr:before, .checkbox input[type=checkbox]:disabled + .cr:before {
                cursor: not-allowed;
            }

    .checkbox.checkbox-fill input[type=checkbox] + .cr:after {
        content: "";
        width: 22.5px;
        height: 22.5px;
        display: inline-block;
        margin-right: 10px;
        border: 2px solid #e9eaec;
        border-radius: 2px;
        vertical-align: bottom;
        text-align: center;
        background: transparent;
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        position: absolute;
        top: 8.5px;
        left: 3px;
    }

    .checkbox.checkbox-fill input[type=checkbox] + .cr:before {
        opacity: 0;
        content: "\e840";
        font-size: 27px;
        background: transparent;
    }

    .checkbox.checkbox-fill input[type=checkbox]:checked + .cr:after {
        opacity: 0;
    }

    .checkbox.checkbox-fill input[type=checkbox]:checked + .cr:before {
        opacity: 1;
        background: transparent;
        color: var(--colorCheckBox);
        border-color: transparent;
    }

    .checkbox.checkbox-primary input[type=checkbox]:checked + .cr:before {
        background: #04a9f5;
        border-color: #04a9f5;
        color: #ffffff;
    }

    .checkbox.checkbox-fill.checkbox-primary input[type=checkbox]:checked + .cr:before {
        background: transparent;
        color: #04a9f5;
        border-color: transparent;
    }

    .checkbox.checkbox-danger input[type=checkbox]:checked + .cr:before {
        background: #f44236;
        border-color: #f44236;
        color: #ffffff;
    }

    .checkbox.checkbox-fill.checkbox-danger input[type=checkbox]:checked + .cr:before {
        background: transparent;
        color: #f44236;
        border-color: transparent;
    }

    .checkbox.checkbox-success input[type=checkbox]:checked + .cr:before {
        background: #1de9b6;
        border-color: #1de9b6;
        color: #ffffff;
    }

    .checkbox.checkbox-fill.checkbox-success input[type=checkbox]:checked + .cr:before {
        background: transparent;
        color: #1de9b6;
        border-color: transparent;
    }

    .checkbox.checkbox-warning input[type=checkbox]:checked + .cr:before {
        background: #f4c22b;
        border-color: #f4c22b;
        color: #ffffff;
    }

    .checkbox.checkbox-fill.checkbox-warning input[type=checkbox]:checked + .cr:before {
        background: transparent;
        color: #f4c22b;
        border-color: transparent;
    }

    .checkbox.checkbox-info input[type=checkbox]:checked + .cr:before {
        background: #3ebfea;
        border-color: #3ebfea;
        color: #ffffff;
    }

    .checkbox.checkbox-fill.checkbox-info input[type=checkbox]:checked + .cr:before {
        background: transparent;
        color: #3ebfea;
        border-color: transparent;
    }

    .checkbox .cr {
        cursor: pointer;
    }