body {
    margin: 0;
    padding: 0;

    min-height: 100%;
    background: linear-gradient( 90deg, rgb(128, 128, 128), rgb(128, 128, 128));  
    background: url("/static/images/background-login.jpg") no-repeat center center fixed;
    background-size: cover;

    background-repeat: no-repeat;

    font-family: roboto;
    display:flex; /* You delete it on your web page */
    justify-content:center;/* and this - delete */
}

body:before {
	content:'';
	position: absolute;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* background-color: rgba(128,128,128,0.6); */
}

a:hover,
a:focus {
    text-decoration: none;
    color: #eee;
}
.login-card {
    min-height: 93vh;

    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -wenkit-background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    z-index: 2;
    padding: 0;
    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-family: roboto!important;
    border: 0;
}
.login-wedge{
    background-color: #fff;
    width: auto;
    border-radius: 30px;
    margin-top: 5vw;
}
.text-login{
    margin-bottom: 20px;
    color: #000;
    display:inline-block;
    border-bottom:1px solid #2aa77b;
    padding-bottom:2px;


}
.cont-login{
    /* margin-right: 20px; */
    margin-top: 50px;
    margin-bottom: 50px;
    
}
.login-card > form {
    z-index: 4;
    position: relative;
    padding: 0px 25px;
    width: 120%; 
} 
.logo-kapsul {
    text-align: center;
    position: relative;
    margin-top: 20px;
    margin-bottom: 50px;
}
.logo {
    height: auto;
    padding: 0px 0px;
}
/* form başlangıç stiller ------------------------------- */

.group {
    position: relative;
    margin-bottom: 20px;
}

.form-forgot{
    position: relative;
    margin-bottom: 25px;
    padding:10px;
    color: #fff;
}

.form-forgot a{
   color: #fff;
   text-decoration: none;
}


.form-forgot div input{

}



.group input {
    font-size: 18px;
    padding: 10px 10px 10px 10px;
    display: block;
    width: 100%;
    border: none;
    background-color: #edecee;
    border-radius: 30px;
    /* border-bottom: 1px solid rgba(255, 255, 255); */
    /* background: none; */
    color: #000;
}
.group input:focus {
    outline: none;
}
/* LABEL ======================================= */

.group label {
    color: rgba(255, 255, 255);
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 5px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
/* active durum */

.group input:focus ~ label,
input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: rgba(255, 255, 255);
}
/* BOTTOM BARS ================================= */

.bar {
    position: relative;
    display: block;
    width: 100%;
}
.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: rgba(255, 255, 255);
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.bar:before {
    left: 50%;
}
.bar:after {
    right: 50%;
}
/* active durum bar */

.group input:focus ~ .bar:before,
.group input:focus ~ .bar:after {
    width: 50%;
}
/* HIGHLIGHTER ================================== */

.highlight {
    position: absolute;
    height: 0%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;

}
/* active durum */

.group input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
/* form animasyon ================ */
 
@-webkit-keyframes inputHighlighter {
    from {
        background: rgba(255, 255, 255);
    }
    to {
        width: 0;
        background: transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background: rgba(255, 255, 255);
    }
    to {
        width: 0;
        background: transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background: rgba(255, 255, 255);
    }
    to {
        width: 0;
        background: transparent;
    }
}
.input-ikon {
    font-size: 25px!important;
    position: relative;
}
.input-sifre-ikon {
    font-size: 22px!important;
    position: relative;
}
.input-login{
    background-color: red;
    border-radius: 50px;
}
.span-input {
    margin-left: 10px;
    position: relative;
    top: -5px;
}
.giris-yap-buton {
    background: #2aa77b;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-family: roboto;
    font-weight: 100;
    padding: 10px;
    border-radius: 60px;
    border: 0;
    outline: none;
    width: 40%;
}
.forgot-and-create {
    margin: 20px 0px;
}
.forgot-and-create a {
    color: #bbb;
    font-size: 12px;
    text-decoration: none;
    font-weight: 100;
    margin-right: 10px;
}
/* Geçiş Links Forgot and Create */

.zaten-hesap-var-link {
    color: #bbb;
    font-size: 14px;
    padding: 20px 0px;
    text-decoration: none;
    display: block;
}
@media only screen and (max-width:440px){
    body{
        margin: 0;
        padding: 0;
        min-height: 100%;
        /* background: linear-gradient( 90deg, rgb(128, 128, 128), rgb(128, 128, 128));   */
        background: url("/static/images/login-mobile.jpg") no-repeat center center fixed;
        background-size: 150%;
        background-repeat: no-repeat;
    
        font-family: roboto;
        display:flex; /* You delete it on your web page */
        justify-content:center;/* and this - delete */
    }
    .logo{
        width: 45%;
        margin-top: 10px;
        margin-bottom: 10px;
     }
    .logo-kapsul {
        background-color: #3faf88;
        margin-bottom:0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        opacity: 0.9;
    }
    .login-wedge{
        border-radius: 0px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .group{
        margin-left: 30px;
        margin-right: 30px;
    }
    .group input {
        border-radius: 10px;
    }
    .giris-yap-buton{
        margin-left: 30px;
        border-radius: 15px;
    }
    .text-login{
        margin-left: 30px;
    }
    .cont-login{
        margin-top: 30px;
    }
    .form-mob{
        margin-top: 60%;
    }
  }