@import "../util/*";
@import "../_normalize";

body,
html {
  background-color: $color-cyan_shade1;
  font-size: 16px;
  min-height: 100vh;
}

a {
  text-decoration: none;
  &:active, &:hover, &:visited {
    color: $color-pink-bright;
    text-decoration: none;
  }
}

//CONTAINER
.Container {
  background: #fff;
  padding: 0;
  .Intro {
    background: #fff;
    color: #000;
    padding: 0 0 2em;
    text-align: left;
    margin: 0;
    @include for-size(tablet-portrait-up) {
      padding: 0 0 2em;
    }
  }
}

//HEADER
.Header {
  position: relative;
  overflow: auto;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  &-branding {
    background-color: $color-red-very-dark;
    padding: 0 $spacer-inner;
    width: 100%;
      height: 4em;
    &-image {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
  &-title {
    background: #fff;
    margin: 2em 5% 0;
    text-align: left;
    position: relative;
    padding: 20px 5px;
    @include for-size(tablet-portrait-up) {
      margin: 5em 15% 0;
    }
    &:before {
      background-image: url('/static/authentication_service/themes/ninyampinga/images/hero-icon.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 75px;
      height: 75px;
      content: "";
      display: inline-block;
      width: 135px;
    }
    h1 {
      position: relative;
      text-transform: uppercase;
      font-size: 1.75rem;
    }
  }
  &-links {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 1em;
    text-align: left;
    a {
      color: $color-pink-bright;
      text-decoration: none;
      border-bottom: 1px solid $color-pink-bright;
      text-decoration: none;
      &:active, &:hover {
        color: #02938a;
      }
    }
  }
}



//CONTENT
.Content {
  background: #fff;
  color: #000;
  overflow: auto;
  margin: 0 7%;
  padding: 1em 5% 2.5em;
  @include for-size(tablet-landscape-up) {
    padding: 1em 9% 2.5em;
    margin: 0 15%;
  }
  p {
    text-align: left;
  }
  .center {
    text-align: left;
    font-size: 1.125rem;
  }
}

//FORM
.Form {
  background: #fff;
  margin: 0;
  padding: 0;
  position: relative;

  &-buttons {
    margin: 0 26% 1em;
  }
  .Field {
    clear: both;
    border: none;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;

    &-item {
      color: #000;
      display: inline-block;
      margin: 10px 0;
      font-size: .875rem;
      @include for-size(tablet-landscape-up) {
        width: 73%;
        display: inline-block;
      }
    }
    &-label {
      color: #000;
      display: inline-block;
      padding: 0 .5em 0 0;
      font-weight: normal;
      vertical-align: middle;
      word-break: break-word;
      word-wrap: break-word;
      @include for-size(tablet-landscape-up) {
        width: 25%;
      }
    }
    &-message {
      color: #9b9fa2;
      font-size: 1rem;
      margin: 0 26% 1em;
      text-align: left;
      &--error {
        .Field--required .Field-item input,
        .Field-item input {
          border-color: #02938a;
        }
      }
    }

    .DateInput,
    .EmailInput,
    .NumberInput,
    .PasswordInput,
    .TextInput,
    .Textarea,
    .vDateField,
    .Select {
      border: 2px $color-pink-bright solid;
      font-size: 1em;
      height: 48px;
      outline: 0;
      padding: 5px;
      width: 100%;
      border-width: 2px;
      &:focus {
        border: 2px $color-pink-bright solid;
      }
    }
    .Textarea {
      height: 60px;
    }
    .ClearableFileInput {
      display: block;
    }
    .Form--required input {
      border-color: red;
    }
  }

  .ModelChoiceField .Select,
  .TypedChoiceField .Select {
    border: 2px solid $color-pink-bright;
    &:focus {
      border-color: #02938a;
    }
  }
}


.Button {
  background: $color-pink-bright url('/static/authentication_service/themes/ninyampinga/images/triangle-icon.png') no-repeat 94% 13px/14px;
  border: none;
  color: #fff;
  display: block;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 10px;
  text-transform: uppercase;
  margin: 1em 0;
  box-shadow: 12px 12px 0 0 $color-yellow;
  width: auto;
  -webkit-transition: box-shadow ease-in-out 0.3s;
  -moz-transition: box-shadow ease-in-out 0.3s;
  transition: box-shadow ease-in-out 0.3s;
  &:active, &:hover, &:focus {
    box-shadow: none;
    color: $color-yellow-gorse;
  }
}

.Messages {
  margin: 0;
  padding: 0 7%;
  .Message {
    background: #fff;
    color: #000;
    padding: 5px 15%;
  }
  .Message--success {
    background: #fff;
    color: $color-pink-bright;
    font-size: 20px;
  }
  .Message--error,
  .Message--warning {
    background: #000;
  }
}

.errorlist {
  color: #000;
  list-style: none;
  margin: 10px 0;
  padding: 0;
  li {
   margin: 10px 0;
 }
}

.Additional-text {
  color: #000;
  text-align: left;
  padding: 1em 0 0;
  margin: 0 26% 1em;
  font-size: 1.125rem;
  a {
    color: $color-pink-bright;
    border-bottom: 1px solid $color-pink-bright;
    text-decoration: none;
    &:active, &:focus, &:hover {
      color: $color-cyan_shade1;
      border-bottom: 1px solid $color-cyan_shade1;
    }
  }
}

//MENU NAV
.Form > .Menu {
  @media (min-width:64em) {
    width: auto;
    padding: 0;
  }
}

.Menu {
  background: #fff;
  padding: 0;
  margin: 0;
  &-title {
    display: none;
  }
  &-list {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
    &--right {
      margin: 0;
      padding: 0;
    }
  }
  &-item {
    display: block;
    margin: 10px 0 0 0;
    text-align: right;
    a {
      color: $color-pink-bright;
      font-size: 1.125rem;
      display: inline-block;
      border-bottom: 1px solid $color-pink-bright;
      text-transform: uppercase;
      font-weight: normal;
      text-decoration: none;
      &:active, &:hover, &:focus {
        color: $color-cyan_shade1;
        border-bottom: 1px solid $color-cyan_shade1;
      }
    }
  }
}


//FOOTER
.Back-to-top {
  background: transparent;
  color: $color-cyan_light_grayish;
  margin: 0;
  text-align: right;
  &--link {
    color: #fff;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    &:hover {
      text-decoration: underline;
      text-underline-position: below;
    }
  }
}

.Footer {
  border: 0;
  background-color: $color-pink-very-dark;
  text-align: left;
  padding: 1em;
  min-height: 300px;
  a {
    font-size: 1rem;
    color: $color-cyan_light_grayish;
    border-bottom: 1px solid $color-cyan_light_grayish;
    text-decoration: none;
  }
  p {
    color: #fff;
    font-size: 14px;
    @include for-size(tablet-landscape-up) {
      padding: 2em 0;
      text-align: right;
    }
  }
}
