body {
  margin:0;
  padding:0;
  font-family:roboto; /* Eğer Sayfanızda Başka Bir Font Kullanıyorsanız Bunu Silin */
}

.login-card {
  min-height:100vh!important;
  height:auto;
  position:relative;
  border-radius:5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  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;
}

.login-card:after {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  content:"";
  opacity:0.8;
  z-index:3;
}

.login-card > form {
  z-index:4;
  position:relative;
  padding:0px 10px;
  width:100%;
}

.logo-kapsul {
  text-align:center;
  position:relative;
  opacity:0.8;
  -moz-user-select:none;
  -webkit-user-select;
}

.logo {
  height:auto;
  padding:50px 0px;
  pointer-events:none;
  -moz-user-select:none;
  -webkit-user-select;
}

/* form başlangıç stiller ------------------------------- */
.group {
  position:relative;
  margin-bottom:25px;
}
.group input {
  font-size:16px;
  padding:10px 10px 10px 10px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid rgba(255,255,255, 0.3);
  background:none;
  color:#eee;
}
.group input:focus { outline:none; }

/* LABEL ======================================= */
.group label {
  color:rgba(255,255,255, 0.5);
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  -o-transition:0.2s ease all;
  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, 0.7);
}

/* 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, 0.7);
  -o-transition:0.2s ease all;
  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;
  opacity:0.5;
}

/* active durum */
.group input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* form animasyon ================ */
@-webkit-keyframes inputHighlighter {
  from { background:rgba(255,255,255, 0.7); }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from { background:rgba(255,255,255, 0.7); }
  to 	{ width:0; background:transparent; }
}

.input-ikon {
  font-size:25px!important;
  position:relative;
}

.input-sifre-ikon {
  font-size:22px!important;
  position:relative;
}

.span-input {
  margin-left:10px;
  position:relative;
  top:-5px;
}

.giris-yap-buton,.kayit-ol-buton,.sifre-hatirlat-buton {
  background: #fff;
  color: #f37020;
  display:block;
  text-align:center;
  text-decoration:none;
  font-family:roboto;
  font-weight:100;
  padding:10px;
  border-radius:3px;
  outline:none;
  opacity:0.8;
  width:100%;
  border:none;
  cursor:pointer;
  font-size:16px;
  -webkit-transition:200ms;
  -o-transition:200ms;
  transition:200ms;
  outline:none!important;
  border-radius: 70px;
  box-shadow: -2px 3px 0px rgba(34, 34, 34, 0.5);
}

.giris-yap-buton:hover,.kayit-ol-buton:hover,.sifre-hatirlat-buton:hover {
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.forgot-and-create{
  margin:20px 0px;
}

.forgot-and-create a{
color:#fff;
font-size:18px;
text-decoration:none;
font-weight:100;
margin-right:10px;
}

/* Geçiş Link */
.zaten-hesap-var-link{
color:#bbb;
font-size:18px;
padding:20px 0px;
text-decoration:none;
display:block;
}

.frame {
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}

img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  .bloc-desktop {
    display: none;
  }

  .logo-mobile {
    display: block !important;
  }
}

#password_rules ul li {
  color: #606060;
}

#password_rules ul li.complete {
color: #4c8b0d;
font-weight: 600;
}

span.togglePassword {
  color: #9c7373;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}



.abc {
  width: 100%;
  height: 100%;
  opacity: 0.95;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.55);
  overflow: auto;
  z-index: 9999;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}
div.popupContact {
  margin: auto;
  margin-top: auto;
  margin-top: 100px;
}
.form-cdl {
  max-width: 610px;
  padding: 15px;
  box-shadow: 8px 8px 0px rgba(34, 34, 34, 0.5);
  border-radius: 1px;
  background-color: #fff;
  margin: auto;
  text-align: center;
}
@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

.text-snackoo {
    color: #f37020;
}

.btn-snackoo {
    background-color: #f37020;
    color: #fff;
    border-radius: 4px;

}

.btn-snackoo:hover {
    background-color: #CB4F00;
    color: #fff;
}