html{ min-height: 100%;}

body {
    background-color: #101010;
    background:url('../../images/bg.jpg') top right!important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    font-family: 'Samsung Sharp Sans';
}

body.nobackground{ background: #000!important; background-image: none;}

.login-page {
    width: 85%;
    padding: 0;
    margin: 40px auto 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 560px;
    margin: 0 auto 0 auto;
    padding: 30px 45px 45px 45px;
    text-align: center;
    /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
}
.form input,.form select {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    border:1px solid #cecece;
}
.form button {
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    background: #2e3192;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 18px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
    letter-spacing: 1px;
    border-radius: 3px;
    margin-top: 15px;
}
.form button:hover,.form button:active,.form button:focus {
    background: #27a1bb;
}
.form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}
.form .message a {
    color: #4CAF50;
    text-decoration: none;
}

.login-page .form h3{ font-weight: bold; color:#484848; margin-bottom: 20px;}
.login-page .form p { color:#888888; font-weight: 500; text-align: left; margin-bottom: 20px;}
.login-page .form p a{ text-decoration: underline; color: #52bad5;}
.login-page .form form label{ text-align: left; display: block; color:#484848;}
.login-page .form form input{ background: transparent; border-radius: 3px; border: 2px solid #c9c9c9; }
.login-page .form form input:focus{ border-color: #52bad5;}
.login-page .form form .checkbox{ margin-top: 25px; }
.login-page .form form .checkbox input{ width: 20px; top:2px;}
.login-page .form form .checkbox label{ display: inline-block; font-weight: 500;}
.login-page .form form a.forgot-btn{ font-weight: 500; text-decoration: underline; position: relative; display: inline-block; margin-top: 10px; }
.login-page .form form a.forgot-btn.left{ margin-right: 20px;}
.login-page .form form a.forgot-btn.left:after{ content:"."; position: absolute; display: block; right: -13px; top:-3px; }
.login-page .form form p.privacy{ font-size: 12px; margin-top: 70px;}

.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    /*transition: all .3s ease-in;*/
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}



.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}
.checkbox label{ padding-left: 0;}


.checkbox.check-me-login label{ padding-top: 5px;  }
.checkbox.check-me-login .cr{ width: 24px; height: 24px; top:-3px; margin-right: 15px;}
.checkbox.check-me-login .cr .cr-icon{ color:#fff; }
.checkbox.check-me-login  label input[type="checkbox"]:checked + .cr{ background: #52bad5; border-color:#52bad5; }

.login-page .container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
}
.login-page .container:before,.login-page  .container:after {
    content: "";
    display: block;
    clear: both;
}
.login-page .container .info {
    margin: 50px auto;
    text-align: center;
}
.login-page .container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
}
.login-page .container .info span {
    color: #4d4d4d;
    font-size: 12px;
}
.login-page .container .info span a {
    color: #000000;
    text-decoration: none;
}
.login-page .container .info span .fa {
    color: #EF3B3A;
}
body {
    background: #101010;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-container{ position: absolute; width: 100%; height: 100%; top:0; left:0;}

.login-side.left-side{ position:absolute; width: 65%; height: 100%; left:0; top:0; overflow: hidden;}
.login-side.right-side{ background: #fff; position: absolute; width: 35%; height: 100%; overflow: hidden; right: 0; top:0;}
.login-side.left-side{
    /*background:url('../images/bg.jpg') center!important;*/
    /*background-size: cover !important;*/
    /*background-repeat: no-repeat !important;*/
    /*background-image: linear-gradient(147deg, rgba(95, 198, 221, 0.51) 0%, rgba(0, 48, 59, 0.7) 74%);*/
}
.login-side.left-side .text-div{ position: absolute; width: 100%; max-width: 420px; left:70px; top: 100px;}
.login-side.left-side .text-div p { color:#fff; font-size: 17px; font-weight: 500; margin-bottom: 15px;}
.login-side.left-side .text-div.white-text p{ color:#fff;}
.login-side.left-side .text-div.black-text p{ color:#3e4448;}
.login-side.left-side .text-div a { color:#fff; font-size: 14px; transition: .3s ease; display: inline-block; font-weight: 500; padding: 7px 10px; border: 2px solid #fff; border-radius: 3px; }
.login-side.left-side .text-div.white-text a{color:#fff; border-color: #fff;}
.login-side.left-side .text-div.black-text a{ color:#3e4448; border-color: #3e4448;}
.login-side.left-side .text-div.white-text a:hover{ text-decoration: none; background: #fff; border-color: #fff; color:#3e4448; }
.login-side.left-side .text-div.black-text a:hover{ text-decoration: none; background: #3e4448; color:#fff; border-color: #3e4448; }
.login-page .form form label.input-label{ position: relative; z-index: 2;}
.login-page .form form label.input-label span{ position: absolute; z-index: 3; top:2px; font-size: 13px; right: 0; color:#237a91; font-weight: 500;}
.login-page .form form label.input-label span i{ margin-right: 5px; font-size: 15px;}
.login-page .form form label.input-label span.hide-pass{ display: none;}

@media (max-width: 767px){
    body{ background-color:#000!important;
        min-height: 100%;
        min-width: 100%;
        background-position: center 0!important;
        background-repeat: no-repeat !important;
        background-size: initial !important;
    }
    .form input{ border-radius:0!important;}
    .form button{ padding:10px; font-size:14px; }
}

.login-logo{ width: 100%; max-width: 275px; margin-bottom: 20px; }

.branch-request{
    margin:15px 0 0 0;
}

.branch-request a:hover,
.branch-request a:active,
.branch-request a:focus,
.branch-request a {position: relative; text-decoration: none; font-weight: bold; width: 100%; display: block; color:#fff; height: auto; font-size: 16px; padding: 15px; background: #1a7b91; }

.branch-request a img{
    position:relative; width:100%; height: auto;
}

.login-page.recover-page{ display: flex; align-items: center; width: 100%; height: 100%; position: absolute; margin: 0;  }
#password_recover input{ margin-bottom: 0;}
#password_recover button{ display: inline-block; width: calc(50% - 7px); background: #4caf50}
#password_recover button.backtomain{ margin-left: 10px; background: #8c8c8c;}

.files-title h2 { font-size: 18px; font-weight: bold; padding-left: 0; margin-top: 5px; }
.checkbox.bayi-sozlesme-onayi label{ padding-left: 0; }

/* Login Slider */
.login-slider{ position: relative; width: 100%; height: 100%; }
.login-slider .slider-div-inside{ position: relative; width: 100%;}
.login-slider .slick-slide,
.login-slider .slick-list.draggable,
.login-slider .slick-track,
.login-slider .slick-slider{ height: 100%; outline: none!important;}
.login-slider .slick-slide .slick-in{ position: relative; height: 100%; width: 100%; top:0; left:0; right: 0; bottom: 0;}
.login-slider .slick-dots{ bottom: 50px;}
.login-slider .slick-next{ right: 25px; z-index: 99;}
.login-slider .slick-prev{ left: 25px; z-index: 99;}
.login-slider .slick-next:before{ content: "\f054"; }
.login-slider .slick-prev:before{ content: "\f053"; }
.login-slider .slick-prev:before,
.login-slider .slick-next:before{ font-family: 'FontAwesome'; font-size: 26px; }
.slick-dots li button:before,
.slick-dots li.slick-active button:before{color: white; opacity: .60;}
.slick-dots li.slick-active button:before{color: white; opacity: .90;}
.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots li button:before{ font-size: 18px;}

@media screen and ( max-height: 930px ){
    .login-page { margin: 30px auto 0 auto; }
    .login-page .form form p.privacy{ margin-top: 10%; }
}


@media (max-width: 1400px) {
    .login-side.left-side{ width: 50%;}
    .login-side.right-side{ width: 50%;}
    .login-slider .slick-slide .slick-in{ display: flex; align-items: center;}
    /*.login-side.left-side .text-div{ text-align: center; position: relative; top: 0; left:0; margin: 0 auto; }*/
}

@media (max-width: 990px) {
    .login-side.left-side{ display: none; }
    .login-side.right-side{ width: 100%;}
    .overlay-icon{ height: 120px!important;}
    .login-page{ margin-top: 30px;}
}

@media (max-width: 480px){
    /*.login-page{display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 5%; position: absolute; height: 100%;}*/
    .login-page{ margin: 0 auto; width: 100%;}
    .login-page .form{ max-width: 100%; padding: 30px; margin-top: 0;}
    .login-logo{ width: 100%; max-width: 200px; margin-bottom: 20px; }
    .login-page .form form p.privacy{ margin-top: 15%;}
    .login-page .form h3{ font-size: 18px; margin-top: 5px;}
    .login-page .form form a.forgot-btn.left{ margin-right: 0;}
    .login-page .form form a.forgot-btn.left:after{ display: none;}
    #password_recover button{ display: block; width: 100%;}
    #password_recover button.backtomain{ margin-left: 0;}
    .content-area.bayi-sayfasi{ padding: 0;}
    .content-area.bayi-sayfasi .container{ padding-left: 0; padding-right: 0; }
}

@media ( max-height: 650px) and ( max-width: 990px ){
    .login-page { margin: 0 auto; }
    .login-page .form form p.privacy{ margin-top: 10%; }
    .login-logo{ max-width: 140px; margin-bottom: 15px; }
    .login-page .form h3{ font-size: 15px; margin-bottom: 15px; }
    .login-page .form p { font-size: 13px; margin-bottom: 15px; }
    .login-page .form form input{ height: 35px;}
    .login-page .form form label.input-label{ font-size: 13px;}
    .login-page .form button{ margin-top: 5px; }
    .login-page .form form .checkbox{ margin-top: 15px; }
    .login-page .form form a.forgot-btn{ display: block; font-size: 12px; }
    .login-page .form form p.privacy{ margin-top: 20px; font-size: 11px; }
}