/* theme : CBL login => Style designed for Login.aspx */
/* Cwellt : 2019 */


/* -------------------------------------------------------------------------------------------------------------------------------------
*/

/* body of the login */

/* applying style for the login */

/*====================== BODY OF THE LOGIN PAGE CBL LOGIN =====================================*/

* {
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
}

#CBLpageLoginMVC {
    --cw-color-primary-opacity-70: rgba(var(--cw-color-primary-rgb-values), 0.7);
    --cw-color-primary-opacity-50: rgba(var(--cw-color-primary-rgb-values), 0.5);
    --cw-color-primary-opacity-30: rgba(var(--cw-color-primary-rgb-values), 0.3);
    max-width: 100%;
    height: 100vh;
    background: var(--cw-color-primary, #368ee0);
    background-image: linear-gradient(var(--cw-color-primary-opacity-70) 0%, var(--cw-color-primary-opacity-70) 100%), url('../DocumentStorage/CustomerFiles/l_CBL_loginAspx.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--cw-color-on-surface, #1C2833);
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*** flex **/
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* ============================== LOGIN'S BOX : INSIDE THE ELEMENTS =======================================*/

#BoxLogin {
    width: 800px;
    height: 600px;
    background: var(--cw-color-surface-bright, #fff);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 8px 12px 48px rgba(255, 255, 255, 0.5);
    z-index: 999;
}

    #BoxLogin .CblMVCPanelLogin {
        width: 50%;
        height: 100%;
    }

/* ====================================== Left box  => CBLFormLogin =====================================*/

#LeftBoxAspx {
    background: url('../DocumentStorage/CustomerFiles/l_CBL_loginAspx.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    #LeftBoxAspx, #LeftBoxAspx .cbl-leftBoxAspx-overlay {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px; /* applying the border radius */
    }

        #LeftBoxAspx .cbl-leftBoxAspx-overlay {
            width: 400px;
            height: 600px;
            background: var(--cw-color-primary-opacity-50); /*rgba(54,142,224,.5);*/
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        #LeftBoxAspx h1,
        #LeftBoxAspx p {
            color: var(--cw-color-on-primary, #fff);
            line-height: 40px;
            font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        }

        #LeftBoxAspx h1 {
            font-size: 50px;
            text-transform: uppercase;
        }


/* ====================================== Right box  => CBLFormLogin =====================================*/
#RightBox {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ======== COLOR OF THE CLASS .fas ==================================================================*/
#CBLpageLoginMVC .fa-sign-in-alt, #CBLpageLoginMVC .fa-microsoft {
    color: var(--cw-color-on-primary, #fff);
}

/* Logo's circle */

.circle-logo {
    width: 100px;
    height: 100px;
    background: var(--cw-color-surface-bright, #FFF);
    margin: auto auto;
    border-radius: 100%;
    margin-bottom: 32px;
    margin-top: 32px;
    overflow: hidden;
    padding: 10px 10px;
    border: solid 3px var(--cw-color-primary-opacity-70);
    box-shadow: 0px 0px 0px 8px var(--cw-color-primary-opacity-30), 0px 0px 0px 8px var(--cw-color-primary-opacity-30), 0px 0px 0px 2px var(--cw-color-primary-opacity-30);
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.img-logoMVC {margin-top: 12px;}*/

/* ========================= CBL INPUT LOGIN => are defined by the ID from asp:Tag =============================*/

/* applying the diferentes colors of each other */

#RightBox .CBL-input {
    width: 360px;
    height: 36px;
    border-radius: 0.5rem;
    border: solid 1px var(--cw-color-outline-variant, #BBD);
    background: var(--cw-color-surface-container-low, #fafafa);
    color: var(--cw-color-on-surface, #333);
    margin-bottom: 12px;
    text-align: center;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
}




/* Removing default icon of internet explorer  */
/* input[type="password"] */
#RightBox input[type="password"]::-ms-reveal,
#RightBox input[type="password"]::-ms-clear,
/* input[type="text"] */
#RightBox input[type="text"]::-ms-reveal,
#RightBox input[type="text"]::-ms-clear {
    display: none !important;
}


#Rightbox .CBL-input:invalid {
    background: var(--cw-color-error-container);
    color: var(--cw-color-on-error-container);
}


#RightBox div#fas-eye {
    width: 53px;
    height: 30px;
    color: var(--cw-color-icons, #368EE0);
    font-size: 1.5rem;
    float: right;
    position: relative;
    right: 0;
    margin-top: -52px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}

    #RightBox div#fas-eye .cbl-icon-login {
        font-size: 1.5rem;
    }

#RightBox .CBL-input::placeholder {
    color: #AAA;
}


/* transition */
.circle-logo,
.btn-large,
.btn-primary,
i.fa-sign-in-alt,
i.fa-microsoft, a,
.btn-outline-backgroun,
.fa-cloud,
.cbl-icon-login,
#RightBox .CBL-input,
#RightBox .OpenAuthLogin {
    transition: all 0.3s ease-out;
}

/* ============================ LOGIN'S BUTTON ======#368ee0=============================================== */
#RightBox .cbl-btn-login {
    width: 100%;
    background: var(--cw-color-button-background, #368ee0);
    margin-bottom: 10px;
    color: var(--cw-color-button-content,#fff);
    border: none;
    outline: none;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #RightBox .cbl-btn-login:hover {
        color: var(--cw-color-button-hover-content,#fff);
        background: var(--cw-color-button-hover-background,#1565C0);
    }

#RightBox button {
    background: transparent;
}

i.fab {
    font-weight: lighter;
}

.btn-large span, .btn-large i {
    margin-left: 8px;
}

.cbl-btn-outline {
    border: solid 1px #368ee0;
    background: transparent;
}

#RightBox .OpenAuthLogin {
    color: var(--cw-color-primary, #368ee0);
    border: solid 1px var(--cw-color-primary, #368ee0);
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
}

    #RightBox .OpenAuthLogin:hover {
        background-color: var(--cw-color-primary-container);
        color: var(--cw-color-on-primary-container);
        border-color: var(--cw-color-on-primary-container);
    }

#RightBox .cbl-btn-login span {
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
}


#RightBox .cbl_checbox_login, #RightBox label {
    float: right;
}

#RightBox label {
    margin-right: 12px;
}


#RightBox .cwi-icons {
    font-size: 1.5rem;
}


/* focus */

.cbl-btn-login:hover .cbl-icon-login,
#RightBox .OpenAuthLogin:hover .cwi-cloud {
    display: inline-block;
    transform: translateX(50px);
    opacity: 0;
}

.cbl-btn-login:focus .cbl-icon-login,
#RightBox .OpenAuthLogin:focus .cwi-cloudd {
    display: inline-block;
    transform: translateX(50px);
    opacity: 0;
}

#RightBox .cbl-btn-login:focus {
    border: solid 0px;
}

/* ========================== APPLYING STYLE FOR FAILURE NOTIFICATIONS =======================================*/

/* ================== Invalid login attempt Incorrect Password &&  Invalid login attempt user not found ================*/
#RightBox #ContentPlaceHolder1_LoginUserValidationSummary ul, li {
    list-style: none;
    text-align: center;
    margin-top: 5px;
    margin-left: -1px;
}

#RightBox #ContentPlaceHolder1_LoginUserValidationSummary /* username is required*/ {
    background: var(--cw-color-error-container, #ffdad6); /*#000;*/
    padding: 10px 30px;
    float: right;
    position: absolute;
    color: var(--cw-color-on-error-container, #410002);
    text-align: center;
    border-radius: 4px;
    margin-left: 400px;
    margin-top: -10px;
    animation-name: Scale;
    animation-duration: 5s;
    animation-iteration-count: linear;
}

#RightBox #ContentPlaceHolder1_PasswordRequired {
    color: var(--cw-color-error, #DD0000);
    font-weight: bolder;
}

#RightBox .CBLpasswordValidate { /* the password field is required*/
    padding: 4px;
    background: var(--cw-color-error-container, #ffdad6);
    color: var(--cw-color-on-error-container, #410002);
    margin-top: 8px;
    margin-bottom: 14px;
    display: none;
    border-radius: 50px;
    box-shadow: 0px 0px 8px #000;
}

    #RightBox .CBLpasswordValidate p {
        margin-top: 5px;
    }
/* ========================================= NOTE : 
The bellow code style is used to show & manage the information given for modue Login and cbl_authorization in cs 
=====
*/

#RightBox .Failure {
    border: solid 1px var(--cw-color-error, #DD0000);
    padding: 10px 20px;
    background: #000;
    position: absolute;
    top: 0;
    margin-top: 80px;
    display: none;
    color: #fff;
    margin-left: -50px;
    border-radius: 4px;
}


#RightBox .failureLogin .fas {
    margin-left: 10px;
}



/* ================================ keyframes ================================ */

@keyframes Scale {
    20% {
        opacity: 0;
        padding: 5px 15px;
        margin-top: -10px;
    }

    30% {
        padding: 10px 30px;
        margin-top: -5px;
    }

    35% {
        padding: 5px 15px;
        margin-top: -10px;
    }

    20% {
        padding: 10px 30px;
        margin-top: -5px;
    }

    25% {
        padding: 5px 15px;
        margin-top: -10px;
    }
}



/* ================================== CBL LOGIN RESPONSIVE ASPX  ======note: ending when the login MVC be the same appearance like this one ===============================================*/


/* [ Desktops ]*/
@media only screen and ( min-width: 500px ) and ( max-width: 1100px ) {

    #CBLpageLoginMVC {
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }

    #BoxLogin #LeftBoxAspx {
        display: none;
    }


    #BoxLogin {
        padding: 1em 1em;
        background-color: rgba(255,255,255,.5);
    }
}


/*  [ Ipad ] 768 - 1024  */
@media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation : landscape ) {

    #CBLpageLoginMVC {
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }

    #BoxLogin {
        width: auto;
        margin-top: -1.95em;
        padding: 1em 1em;
        background-color: rgba(255,255,255,.5);
        padding-bottom: 4em;
    }

        #BoxLogin #LeftBoxAspx {
            display: none;
        }

    .circle-logo {
        width: 10em;
        height: 10em;
    }


    #RightBox .form-control.CBL-input {
        width: 35em !important;
        max-width: 35em !important;
        margin-left: -7em;
        height: 2.5em;
        font-size: 1.32em;
        color: #666666;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }

    #RightBox #fas-eye {
        opacity: 0;
    }


    #RightBox .cbl-btn-login,
    #RightBox .cbl-btn-outline {
        width: 37em;
        height: 3em;
        margin-left: -7em;
    }

    #RightBox .cbl-btn-login {
        border-bottom-width: 0em;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }

    #RightBox .cbl-btn-outline {
        color: #fff;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
        margin-bottom: .45em;
    }

    label {
        color: #fff;
    }
}



@media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation : portrait ) {
    #CBLpageLoginMVC {
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }

    #BoxLogin #LeftBoxAspx {
        display: none;
    }

    #BoxLogin {
        border: solid .1875em rgba(54, 142, 224,.7);
        background: rgba(255,255,255,.41);
        height: 90vh;
    }


    .circle-logo {
        width: 10em;
        height: 10em;
    }

    #RightBox .col-lg-12:nth-child(2) {
        margin-top: 20em;
    }


    #RightBox .CBL-input {
        width: 35em !important;
        max-width: 35em !important;
        margin-left: -7em;
        height: 2.5em;
        font-size: 1.32em;
        color: #666666;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }

    #RightBox #fas-eye {
        opacity: 0;
    }

    #RightBox .row:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #RightBox .cbl-btn-login,
    #RightBox .cbl-btn-outline {
        width: 24em;
        height: 3em;
        padding: .55em .55em;
        margin-left: 1.5em;
        font-size: 2em;
    }

    #RightBox .cbl-btn-login {
        border-bottom-width: 0em;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }

    #RightBox .cbl-btn-outline {
        color: #fff;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
        margin-bottom: 2em;
    }



    label {
        color: #fff;
        font-size: 2em;
    }
}




/*  [ Mobile ( IOS && Android ) ] 768 - 1024  */

@media only screen and ( min-device-width: 320px ) and ( max-device-width: 760px) and ( orientation: portrait ) {

    #BoxLogin {
        background-color: rgba(255,255,255,.41);
        padding: 2em 2em;
        height: 90vh;
    }

        #BoxLogin #LeftBoxAspx {
            display: none !important;
        }


    .circle-logo {
        width: 20em;
        height: 20em;
        margin-bottom: 4em;
    }


    #RightBox .CBL-input {
        width: 27em !important;
        max-width: 27em !important;
        height: 2.5em;
        margin-left: -7.5em;
        font-size: 2.15em;
        color: #666666;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }


    #RightBox #fas-eye {
        display: none !important;
    }


    #RightBox .cbl-btn-login {
        width: 15em;
        height: 3em;
        font-size: 3.85em;
        border-bottom-width: 0em;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
        margin-left: -4em;
    }

        #RightBox .cbl-btn-login:last-child {
            margin-bottom: 1em;
        }

    #RightBox .cbl-btn-outline {
        font-size: 3.85em;
        color: #fff;
        width: 15em !important;
        height: 3em !important;
        margin-top: 1em;
        margin-left: -4em;
        margin-bottom: 4em;
        box-shadow: 0em 0em .25em rgba(54,142,224,8);
    }

    #RightBox label {
        font-size: 3em;
        color: #fff;
    }
}


@media only screen and ( min-device-width: 320px ) and ( max-device-width: 760px) and ( orientation:landscape ) {

    #BoxLogin {
        background-color: rgba(255,255,255,.41);
        padding: 2em 2em;
    }

        #BoxLogin #LeftBoxAspx {
            display: none !important;
        }
}