body {min-height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-repeat: no-repeat;background-size: cover;position: relative;overflow-y: auto;background: url("/img/login/background.jpg");color: #14113b;width: 100%;height: 100%;margin: 0;background-position: center;background-repeat: no-repeat;background-color: black;}
.suvart-login{background: #ffffff8f;width: 345px;height: 500px;border-radius: 8px;margin: 50px auto;box-sizing: inherit;overflow-y: visible;position: relative;}
ul{padding: 20px 0;}
li{list-style: none;text-align: center;}
p{color: #14113b;}
h{font-family: 'Open Sans', sans-serif;color: #14113b;}
.suvart-label-button{margin-left: 20px;margin-right: 20px;color:#14113b;font-size: 13px;font-family: 'Open Sans', sans-serif;font-weight: 600;}
.suvart-label-button:hover{color: #0070a1;border-bottom: 1px solid #0070a1;}
.suvart-login-form{margin: 0px 30px; position: relative; display: none;}
.suvart-signup-form{margin: -20px 30px; position: relative; display: none;}
.suvart-lostpass-form{margin: 0px 30px; position: relative; display: none;}
.suvart-login-form-kullanici{text-align: center;}
.suvart-login-bar input,
.suvart-login-bar label {-webkit-transition: all .2s;transition: all .2s;font-size: 15px;font-family: 'Open Sans', sans-serif;font-weight: 400;}
.suvart-login-bar{outline:none;position:relative;height:60px;margin-left: 35px;margin-right: 35px;}
.suvart-login-bar input {outline:none;border: none;border-bottom: 1px solid #14113b;width: 100%;padding: 5px;background: none;margin: 10px 0;-webkit-appearance: none; color: #14113b;font-size: smaller;font-weight: 400;z-index:1;}
.suvart-login-bar label {position: absolute;top: 11px;left: 8px;color: #4a4a4a;line-height: 1.5;}
.suvart-login-bar input:focus {padding-left: 8px;border-bottom:2px solid #0070a1;transition: all 0.3s;}
.suvart-login-bar input:valid + label {top:-10px; font-size:small;}
.suvart-login-bar input:focus + label {top: -20px;left: 0;padding: 7px 15px;border-radius: 4px;background-color: #0070a1;color: #fff;font-size: 14px;}
.suvart-login-bar input:focus + label::after {content: '';position: absolute;	top: 100%;left: 50%;margin-left: -6px;border: 6px solid transparent;border-top-color: #0070a1;}
.suvart-signup-form-kullanici{text-align: center;}
.suvart-signup-bar input,
.suvart-signup-bar label {-webkit-transition: all .2s;transition: all .2s;font-size: 15px;font-family: 'Open Sans', sans-serif;font-weight: 400;}
.suvart-signup-bar{outline:none;position:relative;height:50px;margin-left: 35px;margin-right: 35px;}
.suvart-signup-bar input {outline:none;border: none;border-bottom: 1px solid #14113b;width: 100%;padding: 5px;background: none;margin: 10px 0;-webkit-appearance: none; color: #14113b;font-size: smaller;font-weight: 400;z-index:1;}
.suvart-signup-bar label {position: absolute;top: 11px;left: 8px;color: #aaa;line-height: 1.5;}
.suvart-signup-bar input:focus {padding-left: 8px;border-bottom:2px solid #0070a1;transition: all 0.3s;}
.suvart-signup-bar input:valid + label {top:-10px; font-size:small;}
.suvart-signup-bar input:focus + label {top: -20px;left: 0;padding: 7px 15px;border-radius: 4px;background-color: #0070a1;color: #fff;font-size: 14px;}
.suvart-signup-bar input:focus + label::after {content: '';position: absolute;	top: 100%;left: 50%;margin-left: -6px;border: 6px solid transparent;border-top-color: #0070a1;}
.suvart-lostpass-form-kullanici{text-align: center;}
.suvart-lostpass-bar input,
.suvart-lostpass-bar label {-webkit-transition: all .2s;transition: all .2s;font-size: 15px;font-family: 'Open Sans', sans-serif;font-weight: 400;}
.suvart-lostpass-bar{outline:none;position:relative;height:60px;margin-left: 35px;margin-right: 35px;}
.suvart-lostpass-bar input {outline:none;border: none;border-bottom: 1px solid #14113b;width: 100%;padding: 5px;background: none;margin: 10px 0;-webkit-appearance: none; color: #14113b;font-size: smaller;font-weight: 400;z-index:1;}
.suvart-lostpass-bar label {position: absolute;top: 11px;left: 8px;color: #aaa;line-height: 1.5;}
.suvart-lostpass-bar input:focus {padding-left: 8px;border-bottom:2px solid #0070a1;transition: all 0.3s;}
.suvart-lostpass-bar input:valid + label {top:-10px; font-size:small;}
.suvart-lostpass-bar input:focus + label {top: -20px;left: 0;padding: 7px 15px;border-radius: 4px;background-color: #0070a1;color: #fff;font-size: 14px;}
.suvart-lostpass-bar input:focus + label::after {content: '';position: absolute;	top: 100%;left: 50%;margin-left: -6px;border: 6px solid transparent;border-top-color: #0070a1;}
.suvart-buttons{margin-left: 35px;margin-right: 35px;}
.suvart-button{width: 100%;padding: 10px 0;font-weight: 600;background-color: #14113b;cursor: pointer;border: none;color: white;outline: none;}
.suvart-button:hover{background-color: #0070a1; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
input[name="login"]{display: none;}
input[name="login"]:checked + div{display: block;}
#lostpass_label,#signup_label{visibility: hidden;}
@media only screen and (max-width: 600px){
.suvart-login{margin-top:7vh;}
}