/*
RESET AUTH CORE STYLES
STYLE ninyampinga (NINYAMPINGA)
*/
@import "../util/*";
@import "@font-face-TwCenMT.scss";

body,
html {
  background-color: $color-cyan_shade1;
  color: #000;
  font-size: 16px;
}
body {
  margin: 0;
  min-height: 100vh;
  @media (min-width:20em) {
    font-family: $TwCenMTRegular;
  }
}
h1 {
  font-family: $TwCenMTRegular;
}

//CONTAINER
.Container {
  background: 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

//HEADER
.Header {
  width: 100%;
  margin: 0;
  &-branding {
    text-align: center;
    margin: 0 auto 2em;
    overflow: auto;
    &-image {
      content: url('/static/authentication_service/themes/ninyampinga/images/ninyampinga-logo.svg');
      height: 90px;
      width: 330px;
    }
  }
  &-title {
    background: #fff;
    text-align: left;
    position: relative;
    margin: 2em 5% 0;
    padding: 1em 0 0;
    @include for-size(tablet-portrait-up) {
      padding: 2em 0 0;
      margin: 5em 15% 0;
    }
    h1 {
      font-size: 1.75rem;
      color: #000;
      background-color: $color-yellow-gorse;
      display: inline-block;
      @media screen and (min-width: 64em) {
        padding: 0 20px;
        margin: 20px 10px 0;
        position: absolute;
        left: 25px;
      }
    }
  }
}

.Header-links {
  margin: 0;
  padding: 1em;
  @media screen and (min-width: 64em) {
    font-size: 20px;
    position: absolute;
    right: 18%;
    top: 9em;
  }
}

.List {
  list-style: none;
  padding: 0;
  li {
    margin: 15px 0 0;
  }
}

.QR {
  text-align: center;
  &-image {
    border: 3px solid #000;
  }
}

.Tokens {
  border: 1px solid #000;
  margin: 5px 15px;
  padding: 0 15px 15px;
  &::after {
    clear: both;
    content: '';
    display: block;
  }
  li {
    float: left;
    @media screen and (min-width: 64em) {
      width: 50%;
    }
  }
}

//FORM
.Form {
  .Field {
    padding: 0;
    margin: 0;
    a {
      color: $color-pink-bright;
      border-bottom: 2px solid $color-pink-bright;
      text-decoration: none;
    }
    &-item {
      margin: 0;
      text-align: left;
      vertical-align: middle;
    }
    &-label {
      font-size: .875rem;
      margin: 0;
      text-align: left;
      display: inline-block;
      @media screen and (min-width: 64em) {
        font-size: 1.125rem;
      }
    }
    &-message {
      margin: 0 1em;
      @media screen and (min-width: 64em) {
        margin: 0 26% 1em;
      }
    }

    .DateInput,
    .EmailInput,
    .NumberInput,
    .PasswordInput,
    .TextInput,
    .Textarea,
    .vDateField {
      color: #000;
      font-weight: 400;
      padding: 5px;
      border-width: 2px;
      &:focus {
        border: 2px solid $color-pink-bright;
      }
    }
    .Textarea {
      height: 100px;
    }
  }
}


.Form .ModelChoiceField,
.Form .TypedChoiceField {
  display: block;
  position: relative;
  width: 100%;
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    &:after {
      color: $color-pink-bright;
      content: '';
      display: inline-block;
      height: .65em;
      pointer-events: none;
      position: absolute;
      right: 5%;
      top: 36%;
      transform: rotate(135deg);
      width: .65em;
    }
    .Select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
    }
  }
  .Select {
    appearance: inherit;
    -webkit-appearance: inherit;
    -moz-appearance: inherit;
    -ms-appearance: inherit;
    background-color: #fff;
    border-radius: 0;
    color: #000;
    min-height: 41px;
    outline: 0;
    padding: 5px 35px 5px 5px;
    width: 100%;
    border: 2px solid $color-pink-bright;
    &:focus {
      border-color: $color-pink-bright;
    }
  }
  .BooleanField {
    display: inline-block;
    margin: 0;
    position: relative;
    width: 100%;
    .Field-label {
      display: inline-block;
      padding: 5px;
      text-align: right;
      vertical-align: middle;
      width: auto;
    }
    .Field-item {
      display: inline-block;
      width: auto;
      .CheckboxInput {
        border: 2px solid $color-pink-bright;
        appearance: none;
        border: 2px solid $color-pink-bright;
        display: block;
        height: 20px;
        outline: 0;
        padding: 15px;
        width: 20px;
        &:checked {
          background-color: #000;
          border-color: #000;
          &:after {
            color: #fff;
            content: '\2714';
            font-size: 20px;
            left: -5px;
            line-height: 20px;
            position: relative;
            top: -5px;
          }
        }
      }
    }
    .Field-message {
      margin: 0;
    }
  }
}


.Form .Field-message--error .Field--required .Field-item input,
.Form .Form .Field-message--error .Field-item input {
  border-color: red;
}

.Button {
  background: $color-pink-bright url('/static/authentication_service/themes/ninyampinga/images/triangle-icon.png') no-repeat 94% 13px/14px;
  display: inline-block;
  padding: 12px 45px 12px 30px;
  margin: 1em;
  &:hover, &:active {
    background: $color-pink-bright url('/static/authentication_service/themes/ninyampinga/images/triangle-icon.png') no-repeat 94% -36px/14px;
  }
  &--warning {
    background: #ff674d url('/static/authentication_service/themes/ninyampinga/images/triangle-icon.png') no-repeat 94% 13px/14px;
    &:hover, &:active {
      color: $color-yellow-gorse;
    }
  }
}

.errorlist {
  margin-top: 20px;
}

.Additional-text {
  text-align: left;
  padding: 1em 0 0;
  margin: 0 26% 1em;
}

//MENU NAV
.Menu {
  margin: 0 auto;
  padding: 0;
  &-title {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    h1 {
     color: #fff;
     font-size: 1.2em;
   }
  }
}

//FOOTER

.Footer {
  padding: 1em;
  margin: 8em 0 0;
  min-height: 300px;
  @include for-size(tablet-landscape-up) {
    padding: 3em 15% 1em;
  }
  .Menu {
    background: transparent;
    &-item {
      color: $color-cyan_light_grayish;
      a {
        color: $color-cyan_light_grayish;
        border-bottom: 1px solid $color-cyan_light_grayish;
        text-decoration: none;
      }
    }
  }
}
