/*
    By Creatrix Ideas 
    Developer: Anıl Çıtlak
    2024 Feb
    ************************************************
    SignIn Structure CSS
    ************************************************
*/

@import url('Main_Structure.css');
/****************************************
    SIGN IN CSS
*/


.ci_signin-body {
}

.signin-bg {
    /* The image used */
    background-image: url("../Images/Main/login_bg.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    top: 0;
}


.signin-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    z-index: 1;
}


    .signin-container > .header {
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 2% 3% 1%;
        background-color: var(--color-white);
    }

@media screen and (max-width:480px) {
    .signin-container > .header {
        display: none;
    }
}

        .signin-container > .header > .logo {
            display: block;
            position: relative;
            width: 20%;
            float: left;
        }


            .signin-container > .header > .logo > img {
                width: 100%;
                max-width: 120px;
            }

        .signin-container > .header > .links {
            display: block;
            position: relative;
            width: 80%;
            float: right;
            text-align: right;
        }

      

            .signin-container > .header > .links > ul > li {
                float: right;
            }

                .signin-container > .header > .links > ul > li > a {
                    display: block;
                    padding: 10px;
                    color: var(--color-black);
                    font-size: var(--font-login-top-size);
                    letter-spacing: 3px;
                }

                    .signin-container > .header > .links > ul > li > a:hover {
                        color: var(--color-logo);
                    }

.login-box {
    display: inline-block;
    position: relative;
    width: 100%;
    z-index: 1;
    background-color: var(--color-white);
    top: -2px;
}

@media screen and (max-width:480px) {
    .login-box {
        margin-top:10%;
    }
}

    .login-box > .inside {
        display: flex;
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 700px;
        z-index: 1;
    }

@media screen and (max-width:480px) {
    .login-box > .inside {
        display: inline-block;
        position: relative;
        margin: 0 ;
        width: 100%;
        max-width: none;
        z-index: 1;
    }
}
        .login-box > .inside > .left {
            display: inline-flex;
            position: relative;
            float: left;
            width: 40%;
            z-index: 1;
            justify-content: center;
            align-items: center;
            transition: all .2s ease-in-out;
        }


            .login-box > .inside > .left > img {
                width: 100%;
                max-width: 250px;
                z-index: 2;
            }

            .login-box > .inside > .left:hover > img {
                transform: scale(1.1);
            }


@media screen and (max-width:480px) {
    .login-box > .inside > .left {
        display: inline-block;
        position: relative;
        float: none;
        width: 100%;
        text-align: center;
        margin-top:20px;
    }

        .login-box > .inside > .left > img {
            max-width: 120px;
        }
}

        .login-box > .inside > .right {
            position: relative;
            float: right;
            width: 60%;
            background: url(../Images/Main/signin_divide_v_line.png) left center no-repeat;
            padding: 5% 0 10% 10%;
            z-index: 1;
        }

@media screen and (max-width:480px) {
    .login-box > .inside > .right {
        display: inline-block;
        position: relative;
        float: none;
        width: 100%;
        padding: 8% 10%;
    }
}

.login-box > .inside > .right > form > .language {
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: right;
    margin: 20% 0 15%;
}

@media screen and (max-width:480px) {
    .login-box > .inside > .right > form > .language {
        margin: 0 0 10%;
    }
}

.login-box > .inside > .right > form > .language > select {
    border: none;
    font-size: var(--font-login-language-size);
}

.login-box > .inside > .right > form > .items {
    display: inline-block;
    position: relative;
    width: 100%;
}
    .login-box > .inside > .right > form > .items > .caption {
        display: inline-block;
        position: relative;
        width: 100%;
        font-size: var(--font-login-caption-size);
        font-weight: var(--font-bold-weight);
        margin-bottom: 15px;
    }

    .login-box > .inside > .right > form > .items > .item {
        display: inline-block;
        position: relative;
        width: 100%;
    }

        .login-box > .inside > .right > form > .items > .item > input[type=text],
        .login-box > .inside > .right > form > .items > .item > input[type=password] {
            width: 100%;
            padding: 12px 20px;
            border: 1px solid var(--color-gray-light3);
            margin-bottom: 10px;
            background-color: var(--color-gray-light4);
            font-size: var(--font-login-input-size);
            letter-spacing: 3px;
        }

        .login-box > .inside > .right > form > .items > .item > #password-visible {
            position: absolute;
            top: 15px;
            font-size: 20px;
            right: 15px;
            color: var(--color-logo);
            cursor: pointer;
        }

        .login-box > .inside > .right > form > .items > .item.button > button {
            width: 100%;
            padding: 12px 20px;
            border: none;
            margin-bottom: 10px;
            background: rgb(94,195,242);
            background: linear-gradient(54deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 48%, rgb(181, 0, 0) 93%);
            text-align: right;
            color: var(--color-white);
            font-size: var(--font-login-button-size);
            letter-spacing: 3px;
            -webkit-box-shadow: 0px 11px 18px -3px rgba(0,0,0,0.51);
            -moz-box-shadow: 0px 11px 18px -3px rgba(0,0,0,0.51);
            box-shadow: 0px 11px 18px -3px rgba(0,0,0,0.51);
            transition: 1.5s;
        }

            .login-box > .inside > .right > form > .items > .item.button > button:hover {
                background: rgb(94,195,242);
                background: linear-gradient(214deg, rgba(181, 0, 0) 0%, rgba(255, 0, 0) 48%, rgba(255, 0, 0) 93%);
                /*background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);*/
            }



.login-box > .inside > .right > .buttons {
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

    .login-box > .inside > .right > .buttons > a.help {
        color: var(--color-red);
        font-size: var(--font-login-help-size);
        float: left;
        margin-top: 30px;
        letter-spacing: 1px;
    }

        .login-box > .inside > .right >  .buttons > a.help:hover {
            color: var(--color-red-dark);
        }


    .login-box > .inside > .right >  .buttons > button.google {
        float: right;
        border: 1px solid var(--color-gray-light3);
        margin-top: 15px;
        font-size: var(--font-login-google-size);
        padding: 10px;
        padding-left: 35px;
        background-color: var(--color-white);
        background: url(../Images/Main/google_icon.png) left 10px center no-repeat;
        background-size: 20px 20px;
        letter-spacing: 1px;
    }

        .login-box > .inside > .right > .buttons > button.google:hover {
            color: var(--color-black);
            transform: scale(1.05);
        }

@media screen and (max-width:480px) {
    .login-box > .inside > .right  > .buttons {
        text-align: center;
    }

        .login-box > .inside > .right >  .buttons > a.help,
        .login-box > .inside > .right > .buttons > button.google {
            float: none;
        }
}


                    .login-box-shadow {
                        display: inline-block;
                        position: relative;
                        width: 100%;
                        height: 50px;
                        z-index: 1;
                        text-align: center;
                        top: -5px;
                    }

    .login-box-shadow > img {
        width: 100%;
        max-width: 950px;
    }

.g-recaptcha {
    transform: scale(0.80);
    -webkit-transform: scale(0.80);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}