@import url('../css/uikit/uikit.min.css');
@import url('../css/variables.css');

body{
  background: #F8FAFC;
}

.tutor-login{
  height:100vh;
}

#login .content .loginForm{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#login .logo{
  width:245px;
  height:70px;
  display:block;
  background:url('../img/logo.svg') 0 0 no-repeat;
  margin-top:70px;
}

#login .center-form {
  height: calc(100vh - 140px);
}

#login .loginForm{
  color:var(--dark-green);
}

#login .loginForm .title {
  font-weight:800;
  font-size:36px;
  line-height:43px;
  color:var(--dark-green);
  margin-bottom:20px;
}

#login .loginForm .sub-title {
  font-size:16px;
  line-height:22px;
  font-weight:400;
  margin-bottom:60px;
}

#login .loginForm input {
  font-size:16px;
  line-height:19px;
  color:var(--dark-green);
  background: #ECF2F7;
  padding:12px 15px;
  border:none;
  border-radius:10px;
  height:56px;
}

#login .loginForm label {
  font-weight:600;
  font-size:14px;
  margin-bottom:10px; 
  display:block; 
}

#login .loginForm .forgot-pass {
  color: var(--dark-green);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
}

#login .loginForm .checkbox-contain {
  display: flex;
  justify-content: flex-end;
  margin-bottom:70px;
}

#login .loginForm .uk-position-relative{
  margin-bottom:20px;
}

#login .uk-slideshow-items{
  height:100vh;
}

.button {
  width:100%;
  font-size: 14px;
  display: block;
  padding: 20px 10px;
  text-align: center;
  font-size: var(--header-font-size);
  line-height: var(--header-font-size);
  color: var(--white);
  font-weight: 700;
  transition: 0.5s ease background;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}


.orange-btn {
  background: linear-gradient( 90deg, var(--c1, #ff4b1f) 0%, var(--c2, #ff9068) 50%, var(--c2, #ff4b1f) 100% ) var(--x, 0) / 200%;
}
.aqua-btn {
  background: linear-gradient( 90deg, var(--c1, #05b1b7) 0%, 
  var(--c2, #00cdac) 50%, 
  var(--c2, #05b1b7) 100% ) 
  var(--x, 0) / 200%;
}

.aqua-btn:hover {
  color: var(--white);
  --x: 100%;
  text-decoration:none;
}

.toggle-password {
  position: absolute;
  top:15px;
  right: 22px;
}

.uk-dotnav {
  width: 506px;
  position: absolute;
  bottom: 130px;
  text-align: left;
  left: 30%;
  transform: translateX(-30%);
  margin-left: 0;
}

.uk-light .uk-dotnav>*>* {
  background-color:rgba(255, 255, 255, .3);
  border-color: transparent;
}

.uk-dotnav>*:first-child{
  padding-left:0;
}

.overlay {
  width:100%;
  height:100vh;
  background:url('../tutor/image-overlay.svg') 0 0 no-repeat;
  background-size: cover;
  position:absolute;
  bottom:0;
  right:0;
  z-index:1;
}

.caption{
  width:506px;
  position:absolute;
  bottom:206px;
  left:30%;
  transform: translateX(-30%);
  z-index:2;
}

.caption h5 {
  font-size:80px;
  font-weight:800;
  line-height:86px;
  color:#F9BF1E;
}

.caption h5 span{
  color:#fff;
}

.swal2-popup{
  width:26em!important
}

.caption p {
  font-size: 20px;
  line-height: 27px;
  color:#fff;
  position:relative;
  padding-left:15px;
}

.caption p::before{
  position:absolute;
  top:50%;
  left:0;
  width:1px;
  height:86%;
  content:'';
  background:#fff;
  transform: translateY(-50%);
}

#sign-up input.error, #register input.error, #verification-form input.error,#forgot-password input.error {
  border: 1px solid rgba(235, 52, 73, 0.7);
  background: rgba(235, 52, 73, 0.05);
}
#sign-up .error, #register .error {
  color: #eb3449 !important;
  display: block;
  margin-bottom: 5px;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 12px;
}
.lds-ellipsis div {
  position: absolute;
  top:0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

.login-step .uk-modal-dialog {
  border-radius: 30px;
  overflow: hidden;
}

.uk-modal-custom-width {
  width: 456px;
}

[class*='uk-modal-close-'] {
  right: 20px;
  top: 20px;
}

.custom-padding {
  padding: 0px !important;
  background: white;
}

.login-step .login-container {
  padding: 50px 40px;
}

.login-container .title {
  font-size: 36px;
  font-weight: 800;
  line-height: 43px;
  color: #0b3f54;
  margin: 0;
}

.login-step .input-line {
  padding-top: 30px;
}

.login-step .input-line label {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #0b3f54;
}

.login-step .input-line .uk-input {
  margin: 10px 0px;
  background: #ecf2f6;
  border-radius: 10px;
  height: 56px;
  color: #0b3f54;
  font-size: 16px;
}

.login-container .pass-contianer {
  position: relative;
}

.login-container .toggle-password {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translate(0, -50%);
}

#forgot-password .aqua-btn {
  margin-top:110px;
}

.subtitle-contain {
  display: flex;
  align-items: flex-start;
  margin: 15px 0 0 0;
}

.subtitle-contain img {
  margin-top: 5px;
}

.subtitle-contain .subtitle {
  padding-left: 10px;
}

.alert-login div{
  color: var(--dark-green);
  font-size: 24px;
  line-height: 27px;
  font-weight: 800;
}

.alert-login p{
  color: var(--dark-green);
  margin-top: 10px;
  font-size: 15px;
  line-height:21px;
}

.swal2-actions{
  margin: 0 auto 0!important; 
}

.swal2-actions{
  min-width: 140px;
}
#verification-code-form label.error {
  margin-bottom: 0px !important;
}
#verification-code .login-container,
#verification-code-success .login-container,
#check-mail .login-container {
  padding: 50px 40px 40px 40px;
}

#verification-code .login-container .orange-btn,
#verification-code-success .login-container .orange-btn {
  margin-top: 120px;
}

#verification-code-success .login-container .orange-btn {
  margin-top: 205px;
}

#verification-code-success .login-container,
#congratulations .login-container {
  text-align: center;
}

#verification-code-success .login-container .subtitle-contain img {
  display: none;
}

#verification-code-success .login-container .title {
  font-size: 28px;
  line-height: 33px;
  margin-top: 20px;
}

#verification-code-success .login-container .subtitle-contain {
  margin-top: 40px;
}

#verification-code-success .login-container {
  padding-top: 100px;
}
#verification-code-form label.error {
  margin-bottom: 0px !important;
}
#verification-code .login-container .title{
  font-size:34px;
}
.login-container .orange-btn {
    height: 56px;
    margin-top: 40px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    border-radius: 10px;
    transition: 0.5s !important;
    border: none;
    padding: 18px 50px;
    line-height: var(--header-font-size);
    text-transform: none;
}
label.error {
  font-size: 14px !important;
  color: red !important;
  font-weight: 700 !important;
   display: block; 
  margin: 5px 0px;
}
.resend-code a{
  font-weight: 700;
  color:var(--orange-color);
  text-decoration:none;
}