@import url(font-face.css);
@import url(variables.css);
@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  overflow: hidden;
}
h1{
  font-size: 1.9rem !important;
  font-weight: 600;
}

.login-content,
.new-study-content{
  display: flex;
  align-items: flex-start;
  height: 100vh;
}

.left-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  height: 100%;
}
.login-wrapper {
    justify-content: center;
    align-items: left;
    padding: 24px;
    background-color: white;
    min-width: 520px;
    border-radius: var(--borderM);
    box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.15);
    width: 800px;
}
.right-container {
  flex: 1 0 0;
  height: 100%;
}
.login-logo{
  position: absolute;
  left: 10px;
}

.form-container form input[type=text], input[type=email]{
 /**/
}
.form-container form{
  display: flex;
  flex-direction: column;
  gap: var(--paddingL);
}
.form-fields{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-container-remember-forgot{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-container form .checkbox input[type=checkbox]{
  margin-right: var(--paddingS);
}

.password-toggle{
  margin-left: -40px;
}
.remember-container{
  display: flex;
}
.remember-container span{
  margin-left: 10px;
  line-height: 14px;
  color: #374151;
  font-size: 12px;
}
.width-50{
  width: 50%;
}
.login-input[type='text'],
.login-input[type='number'],
select.login-input {
  width: 100%;
}
.form-fields .relative {
  position: relative;
}

.form-fields .error-text {
  position: absolute;
  left: 0;
  font-size: 0.875rem; 
  color: #ef4444;
}

.col-span-full {
  grid-column: span 6 / span 6;
}