@import "base";

#id_token-otp_token {
  width: 100%;
}

.non-styled--form {
  padding: 0;
  & > button {
    margin: 0;
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#id_understand {
  display: none
}


[for="id_token-otp_token"],
[for="id_generator-token"]
 {
    display: none;
}

form {
  @include _padding(20px, 0px, 30px, 0px);

  button {
    @include _margin(20px, 0px, 10px, 0px);
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    @include _margin(10px, 0px, 10px, 0px);
    @include _padding(0px, 10px, 0px, 10px);
    background: $color-background-secondary;
    border: 1px solid $color-message-border;
    height: 42px;
    width: 100%;

    &:focus {
      border: 1px solid $color-message-border;
      outline: none;
    }
  }

  input:read-only {
    background: $color-background-tint-primary;
    border-color: $color-background-tint-primary;
  }

  input[type="checkbox"] {
    height: 20px;
  }

  p {
    padding: 0;
  }

  textarea {
    @include _margin(10px, 0px, 10px, 0px);
    @include _padding(10px, 0px, 0px, 10px);
    width: 100%;
  }

  ul {
    color: $color-error;
    font-style: italic;
    list-style: none;
    padding: 0;
    text-align: left;
  }

  #episodes {
    p {
      @include _padding(10px, 0px, 10px, 0px);
    }
  }

  .panel {
    @include _margin-bottom(5px);
  }

  .panel-intro,
  .panel-header {
    label {
      @include _margin-right(9px);
    }

    input[type="checkbox"] {
      height: 20px;
      width: 20px;
    }
  }

  .panel-body {
    label {
      @include _margin-right(11px);
    }

    input[type="checkbox"] {
      height: 10px;
    }
  }
}

.form--login {
  display: flex;
}

.warningText {
  color: $color-error;
  text-align: left
}

.d-flex.flex-column.justify-content-start.align-items-start {
  & > .button.button--primary {
    @include _margin(0px, 0px, 50px, 0px);
  }
}

.button-group.d-flex.flex-row.justify-content-between.align-items-end {
  & > .button.button--secondary.button--secondary--light {
    margin: 0;
  }
}

.form--register {
  @include _padding(30px, 50px, 30px, 50px);
  text-align: center;

  h1 {
    text-align: center;
  }

  label {
    display: block;
    text-align: left;
  }

  .errorlist {
    color: $color-error;
    font-style: italic;
    list-style: none;
    padding: 0;
    text-align: left;
  }

  .no-password {
    @include _padding(15px, 0px, 30px, 0px);
    text-align: center;
  }
}

.form--login {
  @include _margin(30px, auto, 50px, auto);
  @include _padding(30px, 0px, 30px, 0px);
  text-align: center;
  width: 40%;
}

.form--register--teacher {
  color: $color-text-secondary;
  background-color: $color-primary-400;

  a:not(.button--home),
  a:not(.button--home):hover,
  a:not(.button--home):focus {
    color: $color-text-secondary;
  }

  input,
  .button--primary {
    color: $color-text-primary;
  }

  .errorlist {
    color: $color-text-secondary;
  }
}

.form--register--student {
  color: $color-text-secondary;
  background-color: $color-tertiary;

  a,
  a:hover,
  a:focus {
    color: $color-text-secondary;
  }

  input {
    color: $color-text-primary;
  }
}


.form-div {
  height: 100%;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;

  > form {
    height: 100%;
  }
}

.form--register--indep-student {
  color: $color-text-primary;
  background-color: $color-secondary-400;

  a,
  a:hover,
  a:active,
  a:focus, {
    color: $color-text-primary;
  }

  .button--secondary {
    border-color: $color-text-primary;
  }
}

.form__input {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.form__dob-input {
  @include _margin(0px, -10px, 0px, -10px);
  display: flex;
  flex: 1;
  justify-content: space-between;

  select {
    @include _margin(0px, 10px, 0px, 10px);
  }
}

@media (min-width: $mobile-max-width) {
  .registration {
    display: flex;
    flex-direction: row;
  }
  div {
    > .form--register:first-child {
      @include _margin(40px, 20px, 40px, 0px);
    }
    > .form--register:last-child {
      @include _margin(40px, 0px, 40px, 20px);
    }
  }
}

.form__checkbox {
  display: flex;
  align-items: center;
  font-size: 75%;
  padding: 1.2% 0% 1.2% 1.2%;
}

.form-div {
  > .row.form--row {
    > small {
        text-align: left;
    }
  }
}

.form__checkbox-input {
  padding-right: 25px;

  input[type="checkbox"] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    transform: scale(2); /* Universal */
    padding: 10px;
  }
}

.form--register--text p,
.form--register--text small {
  text-align: left;
}

.form__choice {
  @include _margin(40px, 0px, 0px, 37px);
  background-color: $color-background-secondary;
  border-radius: 50%;
  height: 75px;
  text-align: center;
  width: 75px;

  h3 {
    @include _padding(15px, 0px, 0px, 0px);
    color: $color-text-tertiary;
  }
}

.input--icon {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;

  input[type="text"],
  input[type="password"],
  input[type="email"] {
    @include _padding(0px, 40px, 0px, 15px);
  }
  > .iconify {
    color: black;
  }
}

.checkbox--labelled {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.form--row {
  @include _margin-top(5px);
  @include _margin-bottom(5px);
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  .form--row__input {
    align-items: flex-start;
    display: flex;
    flex-direction: column;

    .form__checkbox {
      font-size: 100%;
    }
  }

  .iconify {
    @include _font_size(24px);
    @include _margin(0px, 15px, 0px, 0px);
    position: absolute;
  }
}

@media (max-width: $tablet-large-max-width) {
  .form--login {
    width: 70%;
  }
}

@media (max-width: $mobile-max-width) {
  div {
    > .form--register {
      @include _margin(40px, 20px, 40px, 0px);
      display: flex;
      flex-direction: column;
      @include _padding(20px, 50px, 20px, 50px);
    }
  }

  .form--login {
    width: 85%;
    @include _margin(30px, auto, 30px, auto);
  }

  .form__choice {
    display: none;
  }

  .form--register {
    width: 100%;
  }

  .form--row {
    .form--row__input {
      width: 100%;

      .input--icon {
        width: 100%;
      }
    }
  }
}

/* This is to fix the font in input boxes on the first load of the page  */
input:-webkit-autofill::first-line {
  font-size: 18px;
  font-family: "Inter";
}

/* This is to make the background of input box white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
