:root {
  --first: #ffffff;
  --second: #000000;
  --yellow: #fe9600;
  --Error-color: #ff3232;
}

@font-face {
  font-family: iranYekanBakh;
  src: url(../Assets/font/Yekan-Bakh-FaNum-04-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  border: none;
  font-family: iranYekanBakh;
  box-sizing: border-box;
  border: none;
  outline: none;
  user-select: none;
}

a {
  text-decoration: none;
  color: var(--second);
}
a:hover {
  color: var(--second);
}

html,
body {
  overflow-x: hidden;
}
body {
  position: relative;
  font-size: 15px;
  font-weight: 400, 700, 800;
  direction: rtl;
}

.loader-container{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--first);
  z-index: 997;
}

.loader-container svg {
  width: 5em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}
 
.loader-container circle {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 5;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
 }
 
 @keyframes rotate4 {
  100% {
   transform: rotate(360deg);
  }
 }
 
 @keyframes dash4 {
  0% {
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
  }
 
  50% {
   stroke-dasharray: 90, 200;
   stroke-dashoffset: -35px;
  }
 
  100% {
   stroke-dashoffset: -125px;
  }
 }
 


main {
  background: linear-gradient(90deg, var(--first) 50%, var(--yellow) 50%);
}
main section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


main section #main_container {
  position: relative;
  display: flex;
  background-color: var(--first);
  /* transition: all 0.1s linear; */
  overflow: hidden;
  direction: ltr;
}
main section #main_container::before,
main section #main_container::after {
  position: absolute;
  content: "";
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, var(--yellow) 20%, transparent 80%);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
}
main section #main_container::after {
  animation-delay: -3s;
}
@keyframes animate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

main section #main_container form {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  inset: 3px;
  background: var(--first);
  border-radius: inherit;
  z-index: 10;
  direction: rtl;
}
.selection-box {
  justify-content: space-between;
  align-items: center;
  height: 12em;
}
.selection-box form .selection-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.selection-box span {
  cursor: pointer;
  color: var(--second);
}
.selection-box span:hover,
.selection-box span:active {
  color: var(--yellow);
}
.selection-box span:hover,
.selection-box span:active,
.selection-box span:only-child {
  color: var(--yellow);
  transform: scale(1.1);
  transition: all 0.4s linear;
}

.loginPage {
  height: 32em;
}

.loginPage .login-title {
  color: var(--second);
}
.loginPage .login-title .signup-link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-size: 0.9rem;
}
.loginPage .login-title .signup-link {
  cursor: pointer;
  color: var(--yellow);
}
.loginPage .login-title .signup-link:hover,
.loginPage .login-title .signup-link:active {
  opacity: 0.6;
}

.loginPage .login-receive-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loginPage .login-receive-container .input-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loginPage .login-receive-container .input-box .label {
  position: absolute;
  right: 10%;
  font-weight: bold;
  transition: all 0.2s linear;

  pointer-events: none;
  color: var(--second);
}

.loginPage .login-receive-container .input-box input {
  color: var(--second);
  font-weight: bold;
  border: 2px solid transparent;
  background-color: transparent;
  box-shadow: 3px 3px 10px rgb(114, 114, 114), -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.loginPage .login-receive-container .input-box input:focus {
  box-shadow: 3px 3px 10px rgb(49, 49, 49), -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgb(90, 90, 90), inset -1px -1px 6px rgba(255, 255, 255, 0.4);
  transition: all 0.2s linear;
}

.loginPage .login-receive-container .input-box input:valid ~ .label,
.loginPage .login-receive-container .input-box input:focus ~ .label {
  transition: all 0.4s linear;
  color: var(--yellow);
  font-size: 0.9em;
  transform: translate(-2%, -2.2em);
}

.loginPage .login-receive-container .login-btn {
  display: inline-block;
  background: transparent;
  color: var(--second);
  border: 1px solid var(--second);
  position: relative;
  overflow: hidden;
  /* transition: all 0.5s ease-in; */
  z-index: 1;
}

.loginPage .login-receive-container .login-btn::before,
.loginPage .login-receive-container .login-btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  transform: skew(15deg);
  transition: all 0.5s linear;
  overflow: hidden;
  z-index: -1;
}

.loginPage .login-receive-container .login-btn::before {
  left: -10px;
  background: var(--second);
}

.loginPage .login-receive-container .login-btn::after {
  right: -10px;
  background: var(--yellow);
}

.loginPage .login-receive-container .login-btn:hover::before,
.loginPage .login-receive-container .login-btn:hover::after {
  width: 58%;
}

.loginPage .login-receive-container .login-btn:hover span {
  color: var(--first);
  transition: all 0.3s linear;
}

.loginPage .login-receive-container .forgetPass-link span {
  cursor: pointer;
  color: var(--second);
}
.loginPage .login-receive-container .forgetPass-link span:hover,
.loginPage .login-receive-container .forgetPass-link span:active {
  color: var(--yellow);
  transition: all 0.2s linear;
}
.loginPage .login-receive-container .openId-buttons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginPage .login-receive-container .openId-buttons span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--second);
  border-bottom: 2px solid var(--yellow);
  overflow: hidden;
}
.loginPage .login-receive-container .openId-buttons span:nth-child(2) {
  color: var(--yellow);
  border-bottom: 2px solid var(--second);
}
.loginPage .login-receive-container .openId-buttons span:hover,
.loginPage .login-receive-container .openId-buttons span:active {
  box-shadow: 0 8px 4px -6px var(--yellow);
  transform: scale(1.1);
  transition: all 0.3s linear;
}
.loginPage .login-receive-container .openId-buttons span:nth-child(2):hover,
.loginPage .login-receive-container .openId-buttons span:nth-child(2):active {
  box-shadow: 0 8px 4px -6px var(--second);
}

.signupPage {
  height: 34em;
}
.signupPage .signup-title {
  color: var(--second);
}
.signupPage .signup-title .login-link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-size: 1rem;
}
.signupPage .signup-title .login-link {
  cursor: pointer;
  color: var(--yellow);
}
.signupPage .signup-title .login-link:hover,
.signupPage .signup-title .login-link:active {
  opacity: 0.6;
}

.signupPage .signup-receive-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.signupPage .signup-receive-container .input-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.signupPage .signup-receive-container .input-box .label {
  position: absolute;
  right: 10%;
  font-weight: bold;
  transition: all 0.3s linear;
  pointer-events: none;
  color: var(--second);
}

.signupPage .signup-receive-container .input-box input {
  color: var(--second);
  font-weight: bold;
  border: 2px solid transparent;
  background-color: transparent;
  /* box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), -1px -1px 6px rgba(255, 255, 255, 0.4); */
  box-shadow: 3px 3px 10px rgb(114, 114, 114), -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.signupPage .signup-receive-container .input-box input:focus {
  /* box-shadow: 3px 3px 10px rgb(114, 114, 114), -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1), inset -1px -1px 6px rgba(255, 255, 255, 0.4); */
  box-shadow: 3px 3px 10px rgb(49, 49, 49), -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgb(90, 90, 90), inset -1px -1px 6px rgba(255, 255, 255, 0.4);
  transition: all 0.2s linear;
}

.signupPage .signup-receive-container .input-box input:valid ~ .label,
.signupPage .signup-receive-container .input-box input:focus ~ .label {
  transition: all 0.4s linear;
  color: var(--yellow);
  font-size: 0.9rem;
  transform: translate(-2%, -2.2em);
}

.signupPage .signup-receive-container .signup-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--second);
  position: relative;
  overflow: hidden;
  transition: all 0.5s linear;
  z-index: 1;
}

.signupPage .signup-receive-container .signup-btn::before,
.signupPage .signup-receive-container .signup-btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  transform: skew(15deg);
  transition: all 0.5s linear;
  overflow: hidden;
  z-index: -1;
}

.signupPage .signup-receive-container .signup-btn::before {
  left: -10px;
  background: var(--second);
}

.signupPage .signup-receive-container .signup-btn::after {
  right: -10px;
  background: var(--yellow);
}

.signupPage .signup-receive-container .signup-btn:hover::before,
.signupPage .signup-receive-container .signup-btn:hover::after {
  width: 58%;
}

.signupPage .signup-receive-container .signup-btn span {
  color: var(--second);
  transition: all 0.3s linear;
}
.signupPage .signup-receive-container .signup-btn:hover span {
  color: var(--first);
  transition: all 0.3s linear;
}

.endingLogin,
.endingSignup {
  height: 10em;
}
.endingLogin span,
.endingSignup span {
  color: var(--second);
}

.checkInputs input:required:invalid {
  border: 2px solid var(--Error-color); /* Red border only if the input is empty */
  box-shadow: 3px 3px 10px var(--Error-color), -1px -1px 6px var(--Error-color);
}

.showPasswordIcon {
  cursor: pointer;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 1.3em;
  color: var(--second);
  transform: translateY(-55%);
}
.showPasswordIcon:hover,
.showPasswordIcon i {
  color: var(--yellow);
  transition: all 0.2s linear;
}

.theme-btn {
  cursor: pointer;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0.5rem;
  right: 0.5rem;
  width: 50px;
  height: 50px;
  background-color: var(--second);
  color: var(--yellow);
  font-size: 1.8em;
  border-radius: 50%;
  transition: all 0.1s linear;
}
.theme-btn:hover {
  color: var(--first);
}