$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;
$screen-phone: $screen-xs-min !default;
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-tablet: $screen-sm-min !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-desktop: $screen-md-min !default;
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
$screen-lg-desktop: $screen-lg-min !default;
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: $screen-xs-max) {
      @content;
    }
  } @else if $class == sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @content;
    }
  } @else if $class == md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @content;
    }
  } @else if $class == lg {
    @media (min-width: $screen-lg-min) {
      @content;
    }
  } @else if $class == ts {
    @media (max-width: $screen-sm-max) {
      @content;
    }
  } @else if $class == ds {
    @media (min-width: $screen-md-min) {
      @content;
    }
  } @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg, ts - touchscreen (xs, sm), ds - desktop (md, lg)";
  }
}

// colors
$white: #ffffff;
$black: #000000;
$green: #8bb72d;
$grey: #4c4c4c;
$gray-darker: #1a1a1a;
$light-grey: #d1d1d1;
$blue: #1057a1;
$yellow: #ffcc00;
$white-creme: #f9f9f9;
$lightBorder: 1px solid $light-grey;
$scroll: #333333;
$scroll-track: #ededed;
$loader-border-color: #f3f3f3;
$loader-border-top-color: #000;
$loader-margin-top: 80px;
$loader-margin-bottom: 30px;
$loader-width: 60px;
$loader-height: 60px;
$loader-border: 8px solid $loader-border-color;
$loader-border-top: 8px solid $loader-border-top-color;
$loader-border-radius: 50%;
$loader-animation: spin 1.5s linear infinite;
$loader-information-font-size: 20px;
$loader-information-text-align: center;
$loader-information-text-padding-bottom: 80px; // modal box options
$modal-box-background-color: rgba(0, 0, 0, .5);
$modal-box-padding: 25px 15px;
$modal-box-container-max-width: 1030px;
$modal-box-container-margin: 0 auto;
$modal-box-container-padding: 0 2px 0 0;
$modal-box-content-padding-media: 15px;
$modal-box-content-padding: 15px 30px;
$modal-box-content-margin-top: 50px;
$modal-box-content-margin-right: 4px;
$modal-box-close-button: 2.5em;
$modal-box-close-button-padding: 15px;

%icon-position {
  position: absolute;
  top: 5px;
  left: -29px;
}

#content-box {
  background: $white;
  padding: 30px;

  .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  a {
    text-decoration: none;
    color: $blue;
    font-size: inherit;
  }

  .btn {
    display: block;
    padding: 14px 25px;
    line-height: normal !important;
    font-family: inherit;
    font-size: 16px;
    text-transform: none;

    &.yellow {
      background: $yellow;
      color: $white;
      border: 1px solid $yellow;
    }

    &.center {
      margin: auto;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.2;
    letter-spacing: 0;
    color: $black;
  }

  h2 {
    font-size: 26px;
    margin: 10px 0;

    strong {
      font-weight: 600;
    }
  }

  table {
    border-collapse: separate;
    border: $lightBorder;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    page-break-after: auto;

    tbody > tr {
      page-break-inside: avoid;
      page-break-after: auto;

      td {
        padding: 12px 20px;
        border-right: $lightBorder;
        line-height: 1.5;
        vertical-align: top;
        border-top: $lightBorder;
        page-break-inside: avoid;
        page-break-after: auto;
      }
    }

    tbody > tr:nth-of-type(odd) {
      background-color: $white-creme;
    }
  }

  ol {
    list-style-type: none;
    counter-reset: count;
    margin: 15px 0 15px 40px;
    padding-left: 0;

    &.circle {
      margin: 15px 0 15px 20px;

      & > li {
        font-size: 16px;
        color: $gray-darker;
        padding-bottom: 7px;
        margin-left: 35px;

        &::before {
          left: -55px;
        }
      }
    }

    & > li {
      font-size: 14px;
      color: $grey;
      line-height: 18px;
      margin-bottom: 5px;
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        left: -29px;
        color: $green;
        font-weight: 500;
        counter-increment: count;
        content: counter(count) ".";
      }
    }

    &[type="a"] {
      counter-reset: listStyle;

      & > li {
        &::before {
          counter-increment: listStyle;
          content: counter(listStyle, lower-alpha) ".";
        }
      }
    }

    &[type="I"] {
      counter-reset: listStyle;

      & > li {
        &::before {
          counter-increment: listStyle;
          content: counter(listStyle, upper-roman) ".";
        }
      }
    }

    &.bracket > li:before {
      content: counter(count) ")";
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;

    & > li {
      font-size: 14px;
      color: $grey;
      line-height: 18px;
      margin-bottom: 5px;
      position: relative;

      a {
        color: $green;
      }
    }

    &.dotted-green {
      > li {
        &:before {
          content: "";
          display: block;
          width: 9px;
          height: 9px;
          background-color: $green;
          border-radius: 50%;
          @extend %icon-position;
        }
      }
    }

    &.space {
      margin: 5px 0 0 30px;
    }

    &.arrow {
      margin: 15px 0 15px 30px;

      & > li {
        font-size: 16px;
        color: $gray-darker;
        padding-bottom: 7px;
      }
    }
  }

  p {
    font-size: 14px;
    color: $grey;
    line-height: 18px;
    padding: 0;

    &:last-of-type {
      padding: 0;
    }

    &[data-empty] {
      display: none;
    }

    strong {
      font-weight: 700;
    }
  }

  .small-text {
    font-size: 11px;
  }
}

#modal-box {
  overflow: hidden;
  padding: $modal-box-padding;
  width: 100%;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-color: $modal-box-background-color;
  z-index: 999999;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: $grey;
  line-height: 20px;

  a {
    text-decoration: none;
    color: $blue;
    font-size: inherit;
  }

  .btn {
    display: block;
    font-size: 16px;

    &.green {
      background: $green;
      color: $white;
      border: 1px solid $green;
    }

    &.center {
      margin: auto;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.2;
    letter-spacing: 0;
    color: $black;
  }

  h2 {
    font-size: 26px;
    margin: 10px 0;
  }

  table {
    border-collapse: separate;
    border: $lightBorder;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    page-break-after: auto;

    tbody > tr {
      page-break-inside: avoid;
      page-break-after: auto;

      td {
        padding: 12px 20px;
        border-right: $lightBorder;
        line-height: 1.5;
        vertical-align: top;
        border-top: $lightBorder;
        page-break-inside: avoid;
        page-break-after: auto;
      }
    }

    tbody > tr:nth-of-type(odd) {
      background-color: $white-creme;
    }
  }

  .modal-box-container {
    position: relative;
    background-color: $white;
    max-width: $modal-box-container-max-width;
    max-height: 100%;
    margin: $modal-box-container-margin;
    text-align: left;
    padding: $modal-box-container-padding;
    overflow: hidden;
    border-radius: 5px;
  }

  .close-button {
    position: absolute;
    padding: $modal-box-close-button-padding;
    cursor: pointer;
    display: block;
    font-size: $modal-box-close-button;
    line-height: 20px;
    right: 2px;
  }

  .modal-box-content {
    max-height: calc(100vh - 100px);
    margin-right: $modal-box-content-margin-right;
    padding: $modal-box-content-padding;
    overflow-y: auto;
    text-align: left;
    margin-top: $modal-box-content-margin-top;

    &::-webkit-scrollbar {
      width: 6px;
      background-color: $scroll;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $scroll;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-track {
      background-color: $scroll-track;
    }

    @include breakpoint(xs) {
      max-height: calc(100vh - 150px);
    }

    &.ios {
      max-height: calc(100vh - 150px);
    }
  }

  ol {
    list-style-type: none;
    counter-reset: count;
    margin: 15px 0 15px 40px;
    padding-left: 0;

    &.circle {
      margin: 15px 0 15px 20px;

      & > li {
        font-size: 16px;
        color: $gray-darker;
        padding-bottom: 7px;
        margin-left: 35px;

        &::before {
          left: -55px;
        }
      }
    }

    & > li {
      font-size: 14px;
      color: $grey;
      line-height: 18px;
      margin-bottom: 5px;
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        left: -29px;
        color: $green;
        font-weight: 500;
        counter-increment: count;
        content: counter(count) ".";
      }
    }

    &[type="a"] {
      counter-reset: listStyle;

      & > li {
        &::before {
          counter-increment: listStyle;
          content: counter(listStyle, lower-alpha) ".";
        }
      }
    }

    &[type="I"] {
      counter-reset: listStyle;

      & > li {
        &::before {
          counter-increment: listStyle;
          content: counter(listStyle, upper-roman) ".";
        }
      }
    }

    &.bracket > li:before {
      content: counter(count) ")";
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;

    & > li {
      font-size: 14px;
      color: $grey;
      line-height: 18px;
      margin-bottom: 5px;
      position: relative;

      a {
        color: $green;
      }
    }

    &.dotted-green {
      > li {
        &:before {
          content: "";
          display: block;
          width: 9px;
          height: 9px;
          background-color: $green;
          border-radius: 50%;
          @extend %icon-position;
        }
      }
    }

    &.space {
      margin: 5px 0 0 30px;
    }

    &.arrow {
      margin: 15px 0 15px 30px;

      & > li {
        font-size: 16px;
        color: $gray-darker;
        padding-bottom: 7px;
      }
    }
  }

  .page-informations {
    &__subtitle {
      color: $gray-darker;
      font-size: 19px;
      line-height: 20px;
      padding-bottom: 10px;

      &:last-of-type {
        padding-bottom: 10px;
      }
    }
  }

  .signature-container {
    display: flex;
    flex-flow: row-reverse wrap;

    &__customers-signature {
      width: 250px;
      margin: 20px 0;
      border-top: 1px dotted $grey;
      font-size: 11px;
      text-align: center;
      color: $grey;
      line-height: 18px;
    }
  }

  p {
    font-size: 14px;
    color: $grey;
    line-height: 18px;
    padding: 0 0 10px;

    &:last-of-type {
      padding: 0;
    }
  }

  .small-text {
    font-size: 11px;
  }
}

.open-modal {
  overflow: hidden;
}

@media screen and (max-width: 550px) {
  #modal-box {
    .modal-box-content {
      padding: $modal-box-content-padding-media;
    }
  }
}

.rodo-loader {
  margin: $loader-margin-top auto $loader-margin-bottom;
  border: $loader-border;
  border-top: $loader-border-top;
  border-radius: $loader-border-radius;
  width: $loader-width;
  height: $loader-height;
  animation: $loader-animation;
}

.rodo-loader + div {
  text-align: $loader-information-text-align;
  font-size: $loader-information-font-size;
  padding-bottom: $loader-information-text-padding-bottom;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}