html {
  font-size: 12px; // the base for the rem unit (used in react-datepicker)
}

body {
  background-color: $page-bkg-grey;
  font-family: $font-family;
  font-size: $font-size-s;
  letter-spacing: $text-letter-spacing;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: scrollbar; // prevent transparent scrollbar in IE
}

a {
  text-decoration: none;

  &:hover {
    color: $link-hover-color;
    text-decoration: none;
  }
}

input {
  &[type='text'] {
    box-shadow: 0 0 0 50px $input-txt-bkg-color inset;

    &:focus {
      box-shadow: 0 0 0 50px $input-txt-bkg-color inset;
    }
  }

  &[type='password'] {
    box-shadow: 0 0 0 50px $input-txt-bkg-color inset;

    &:focus {
      box-shadow: 0 0 0 50px $input-txt-bkg-color inset;
    }
  }
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  font-family: $font-family6;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-family: $font-family6;
}

input.placeholder,
textarea.placeholder {
  font-family: $font-family6;
}

.overflow-x {
  overflow-x: scroll;
}

.no-scroll {
  overflow: hidden;
}

.pre-wrap {
  white-space: pre-wrap;
}

.white {
  color: $white;
}

.grey {
  color: $grey;
}

.black {
  color: $black;
}

.app-content {
  margin: 40px 0 0;
}

.max-container {
  margin: 0 auto;
  max-width: $app-max-width;
}

.background-light {
  background-color: $page-bkg-light;
}

.background-grey {
  background-color: $page-bkg-grey;
}

.background-dark-grey {
  background-color: $page-bkg-dark-grey;
}

.background-dark {
  background-color: $page-bkg-dark;
}

.background-img {
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

.mobile-content-section {
  padding-top: 40px !important;
}

.content-margin {
  margin: -30px 0 0;
}

.inline {
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

.border-top {
  border-top: $navbar-border;
}

.border-right {
  border-right: $navbar-border;
}

.border-left {
  border-left: $navbar-border;
}

.border-bottom {
  border-bottom: $navbar-border;
}

.border {
  border: $navbar-border;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.padding {
  padding: 15px;
}

.margin-xs {
  margin-top: 5px;
}

.margin-s {
  margin-top: 10px;
}

.margin-m {
  margin-top: 20px;
}

.margin-l {
  margin-top: 40px;
}

.margin-xl {
  margin-top: 60px;
}

.margin-xxl {
  margin-top: 80px;
}

.margin-xxxl {
  margin-top: 120px;
}

.margin-left-xxl {
  margin-left: 75px;
}

.margin-left-2 {
  margin-left: 2px;
}

.full-size {
  width: 100%;
}

.underline {
  border-bottom: $box-border;
  margin: 0 0 20px;
}

.uppercase {
  text-transform: uppercase;
}

.hidden {
  display: none;
}

.shown {
  display: block;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

.clear {
  clear: both;
}

.relative {
  position: relative;
}

.pointer {
  cursor: pointer;
}

.no-pointer-events {
  pointer-events: none;
}

.form-label {
  color: $grey;
  font-family: $font-family;
  font-size: $font-size-xs;
  padding: 0 0 0 5px;
}

.form-label-body {
  position: absolute;
  top: 131px;
}

.form-tree > .form-container > .form-tree-item {
  &::after,
  &::before {
    display: none;
  }
}

.form-tree {
  .form-container:first-child > .form-tree-item::before {
    display: none;
  }

  .form-container:first-child > .form-tree-item::after {
    border-radius: 5px 0 0 0;
  }

  .plus.form-tree-item:last-child::after,
  .form-container:last-child > .form-tree-item::after {
    display: none;
  }

  .plus.form-tree-item:last-child::before,
  .form-container:last-child > .form-tree-item::before {
    border-radius: 0 0 0 5px;
  }

  .form-container {
    .form-group {
      margin-bottom: 10px !important;
    }

    .form-tree-item {
      position: relative;

      &.plus {
        margin: initial;
        height: 15px;
        width: 15px;
        font-size: 10px;
      }
    }

    .form-tree-item::after {
      position: absolute;
      content: '';
      top: 18px;
      left: -15px;
      border-left: 1px solid $grey;
      border-top: 1px solid $grey;
      border-radius: 0 0 0 0;
      width: 15px;
      height: 100%;
    }

    .form-tree-item.plus::after {
      top: 8px;
    }

    .form-tree-item::before {
      content: '';
      position: absolute;
      top: -26px;
      left: -15px;
      border-left: 1px solid $grey;
      border-bottom: 1px solid $grey;
      border-radius: 0 0 0 0;
      width: 15px;
      height: 45px;
    }

    .form-tree-item.plus::before {
      height: 19px;
      top: -10px;
    }
  }

  .form-branch {
    margin-left: 25px;
  }
}

.login {
  .form-group {
    .form-control {
      border-radius: 0;
    }
  }
}

.capitalized {
  text-transform: capitalize;
}

strong {
  font-family: $font-family3;
}

#pDebug {
  display: none;
}

.cursor-wait {
  cursor: wait !important;
}

.small-hyphen-padding {
  padding: 0 0 0 5px;
}

.jumbotron {
  margin-top: 50px;
}

.flex {
  display: flex;
}

.center-flex {
  display: flex;
  justify-content: center;
}

.center-align-flex {
  display: flex;
  align-items: center;
}

.baseline-align-flex {
  display: flex;
  align-items: baseline;
}

.content-section {
  padding: 25px 0;
}

@media screen and (max-width: $screen-xxs-max) {
  .content-section {
    padding: $margin-section-tiny 0;
  }

  .max-container {
    padding: 0 5px !important;
  }
}

@media screen and (min-width: $screen-sm-min) {
  .content-section {
    padding: 35px 0;
  }
}

@media screen and (min-width: $screen-md-min) {
  .col-bottom {
    display: table-cell;
    float: none;
    vertical-align: bottom;
  }
}

@media screen and (min-width: 1024px) {
  .max-container {
    padding: 0 20px;
  }

  .page-body {
    margin: 0 90px 80px 90px;
  }
}
