@import url(./fonts.css);

body {
  background-color: #1d2436;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: white !important;
  direction: rtl !important;
}

.loginContainer,
.loginContainer > div {
  height: 100%;
}

.loginContainer > div > div[class="col"]:last-child {
  background: url("../assets/image4.png") center center / cover no-repeat;
}

.loginRegisteContainer {
  background-color: #313849;
  border-radius: 16px;
  width: 404px;
  padding: 34px 24px 41px 24px;
  box-shadow: 22px 33px 101.2px black;
}

.loginInput {
  width: 356px;
  height: 36px;
  border: 1.5px solid #70717a !important;
  background-color: #313849 !important;
  border-radius: 10px !important;
  color: #70717a !important;
  position: relative;
  font-size: 14px;
  padding: 0 16px;
  -webkit-text-fill-color: #eee !important;
  text-align: left;
}

.loginInput::placeholder {
  color: #70717a;
  font-size: 14px;
}

.forgetPass {
  color: #afaaaa !important;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.loginBtn {
  background-color: #0094da !important;
  width: 356px;
  margin-bottom: 16px;
  border-radius: 10px;
}

.loginLabel {
  width: max-content;
  position: absolute;
  right: 10px;
  background-color: #313849;
  padding: 0 10px;
  font-size: 14px !important;
  /* opacity: 0; */
  transform: translateY(6px);
  transition: all 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 1;
  color: #70717a;
  pointer-events: none !important;
}

.loginLabel.visible {
  /* opacity: 1; */
  transform: translateY(-15px);
  pointer-events: auto;
  color: #fff;
}

.loginInput:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
  background-color: #313849 !important;
}

.loginInput:focus::placeholder {
  color: transparent;
}

.loginText:first-child {
  font-size: 15px;
  margin-bottom: 8px;
}

.loginText:last-child {
  font-size: 13px;
  margin-bottom: 24px;
  color: #afaaaa;
}

input:-webkit-autofill {
  background-color: #313849 !important;
  -webkit-box-shadow: 0 0 0px 1000px #313849 inset !important;
  -webkit-text-fill-color: #eee !important;
  text-align: left;
  color: #eee;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #313849 inset !important;
  border: 1.5px solid #70717a !important;
}

.logo {
  width: 88px;
  height: 37px;
}

.textsContainer {
  text-align: center;
}