/*
 * rem factor to adapt to non-10 rem's, e.g. if base font-size is 16px
 * then $_rem = 10/16 = 0.625 --> 1rem = (1rem*0.625*16) = 10
 */

/* UTILITIES */

.form {
  flex-grow: 1;
}

/*
.form__field {}

.form--login {}

.form--forgot-username {}

.form--password-reset {}

.form--init-account {} */

.form__field--last {
  flex-grow: 1; /* push the button to the end of the container */
}

/* TODO: Fix hardcoded paths here, but that would need Django template processing */
@font-face {
  font-family: 'cff-regular';
  src: url('../../../fonts/mobile/v4/SiseriffLTStd-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'cff-semibold';
  src: url('../../../fonts/mobile/v4/SiseriffLTStd-Semibold.otf') format('opentype');
}

@font-face {
  font-family: 'cff-bold';
  src: url('../../../fonts/mobile/v4/SiseriffLTStd-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'cff-black';
  src: url('../../../fonts/mobile/v4/SiseriffLTStd-Black.otf') format('opentype');
}

@font-face {
  font-family: 'cff-light';
  src: url('../../../fonts/mobile/v4/SiseriffLTStd-Light.otf') format('opentype');
}

@font-face {
  font-family: 'pts-regular';
  src: url('../../../fonts/mobile/v4/PT_Sans-Web-Regular.ttf');
}

@font-face {
  font-family: 'pts-bold';
  src: url('../../../fonts/mobile/v4/PT_Sans-Web-Bold.ttf');
}

/* GENERAL */

body {
  font-family: "pts-regular";
}

a {
  color: #FF0000;
}

.wrapper {
  /*min-height: 100vh;*/
  padding-top: 20px;
}

.header {
  color: #fff;
  background-color: #000;
  position: fixed; top: 0;
  width: 100%;
  height: 42px;
  z-index: 2;
}

.header .headline {
  position: relative;
}

.headline {
  text-transform: uppercase;
  font-family: "cff-light";
}

.content {
  padding: 1.4rem;
  flex-grow: 1; /* push the button to the end of the container */
}

.content p:first-of-type {
  font-family: "cff-regular";
  font-size: 14px;
  color: #4D4D4D;
  margin-bottom: 4rem;
}

.btn {
  width: 100%;
  min-height: 44px;
  box-shadow: 0 1px 15px 0 rgba(204, 204, 204, 0.5);
  background-color: #fff;
  font-family: "cff-semibold";
  color: #000000
}

.btn:active, .btn:focus {
  background: red;
          box-shadow: inset 0 0 5px #000000;
     -moz-box-shadow: inset 0 0 5px #000000;
  -webkit-box-shadow: inset 0 0 5px #000000;
}

a.btn {
  font-size: 0.8rem;
  box-shadow: none;
  min-height: 0;
  margin-bottom: 0;
}

/* .footer {

} */

div.alert {
  margin: 1rem;
  position: relative;
}

div.alert img {
  width: 38px;
  float: left;
  margin-right: 1rem;
}

div.field-error {
  color: red;
}


/* FORMS */

form div.field-wrapper {
  position: relative;
  margin-bottom: 2em;
}

form label {
  display: block;
  font-size: 13px;
  margin-bottom: .8rem;
  font-family: "pts-bold";
}

form .field-wrapper.required:not(.field-wrapper--checkbox) label:after {
  content: " *";
}

form .field-wrapper.required.field-wrapper--checkbox a:after {
  content: " *";
  color: initial;
  display: inline-block;
  padding-left: 0.2rem;
}

form input:not([type=checkbox]), /* don't apply styles to checkboxes */
form select {
  font-family: "pts-regular";
  width: 100%;
  font-size: 17px;
  caret-color: red;
  color: black;
  border-radius: 0;
  border: none;
  outline: none;
  border-bottom: 2px solid black;
  background-color: white;
}

form input:not([type=checkbox])::placeholder {
  color: #B4B6B8;
}

form input:focus,
form select:focus {
  border-bottom: 2px solid red;
}

/* Workarounds to style the select box caret */
form select {
          appearance: none;
     -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
}

form .select-wrapper:after {
  content: '\25BE';
  position: absolute;
  right: 0; /* right align */
  top: 50%;
  transform: translate(-50%, -50%); /* move up and left --> center */
}

/*
  Custom Checkbox Styles inspired by https://paulund.co.uk/how-to-style-a-checkbox-with-css
 */
form .field-wrapper--checkbox label {
  cursor: pointer;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  background: #fff;
  border: 2px solid #000;
}

form .field-wrapper--checkbox label:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 12px;
  height: 5px;
  background: transparent;
  top: 7px;
  left: 5px;
  border: 3px solid white;
  border-top: none;
  border-right: none;

  transform: rotate(-45deg);
}

form .field-wrapper--checkbox label:hover::after {
  opacity: 0.7;
}

form .field-wrapper--checkbox input[type=checkbox]:checked + span + a + label {
  background: red;
  border: none;
}


form .field-wrapper--checkbox input[type=checkbox]:checked + span + a + label:after {
  opacity: 1;
}


form .field-wrapper--checkbox input[type=checkbox]:checked + span + label {
  background: red;
  border: none;
}

form .field-wrapper--checkbox input[type=checkbox]:checked + span + label:after {
  opacity: 1;
}

form .field-wrapper--checkbox label {
  color: transparent;
  text-shadow: 0 0 0 red;
}

form .field-wrapper--checkbox label:focus {
  outline: none;
}

form .field-wrapper--checkbox span {
  margin-left: 0.5rem;
}

.iti {
  display: block;
}

.iti__flag {
  background-image: url("../../../images/mobile/v4/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("../../../images/mobile/v4/flags@2x.png");
  }
}

.logo {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* PAGES */

/* enter page */

/* login page */

/* privacy policy */

.privacy-policy ol {
  counter-reset: item;
  list-style-position: outside;
}

.privacy-policy li {
  display: block;
  padding-bottom: 2rem;
}

.privacy-policy li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

.privacy-policy li h5 {
  display: inline;
}