/*Generic Modal*/
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .5);
  padding: 20px 10px;
  overflow: auto;
  color: var(--text-color);

  &.open {
    display: block;
  }

  .modal-wrapper {
    position: relative;
    display: table;
    margin: 0 auto;

    .modal-body {
      width: 340px;
      background-color: var(--white);
      border-radius: 2px;
      -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      font-family: Helvetica, Arial, sans-serif;
      margin: 0 auto;
      max-height: 90vh;
      max-width: 90%;
      overflow: auto;
      position: relative;
      text-align: left;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }
  }

  .btn-close {
    color: var(--grey-400);
    font-size: 50px;
    cursor: pointer;
    position: absolute;
    right: 2rem;
    top: 0;
    z-index: 10;
  }

  @media (min-width: 600px) {
    padding: 20px 70px;

    .modal-wrapper {
      .modal-body {
        width: inherit;
      }
    }

    .btn-close {
      font-size: 70px;
      top: 1rem;
    }
  }

  @media (min-width: 1100px) {
    .modal-wrapper {
      .modal-body {
        max-width: 800px;
      }
    }
  }
}

body.modal-open {
  overflow: hidden;
}

/*Specific Modals*/
.modal {
  &#legal-notice {
    .modal-body {
      padding-bottom: 50px;

      h2 {
        margin: 60px auto;
        text-align: center;
        width: 90%;
      }

      div {
        margin: 0 auto 50px;
        max-width: 600px;
        width: 90%;
      }
    }
  }

  &#privacy-policy {
    .content {
      margin: 0 auto 50px;
      max-width: 900px;
      padding: 120px 30px 30px;
      width: 90%;

      ol {
        margin: 0;
        padding: 0
      }

      table td, table th {
        padding: 0
      }

      .c8 {
        border-right-style: solid;
        padding: 5pt 5pt 5pt 5pt;
        border-bottom-color: #000000;
        border-top-width: 1pt;
        border-right-width: 1pt;
        border-left-color: #000000;
        vertical-align: top;
        border-right-color: #000000;
        border-left-width: 1pt;
        border-top-style: solid;
        background-color: #1244a1;
        border-left-style: solid;
        border-bottom-width: 1pt;
        width: 117.8pt;
        border-top-color: #000000;
        border-bottom-style: solid
      }

      .c16 {
        border-right-style: solid;
        padding: 5pt 5pt 5pt 5pt;
        border-bottom-color: #000000;
        border-top-width: 1pt;
        border-right-width: 1pt;
        border-left-color: #000000;
        vertical-align: top;
        border-right-color: #000000;
        border-left-width: 1pt;
        border-top-style: solid;
        border-left-style: solid;
        border-bottom-width: 1pt;
        width: 117.8pt;
        border-top-color: #000000;
        border-bottom-style: solid
      }

      .c1 {
        border-right-style: solid;
        padding: 5pt 5pt 5pt 5pt;
        border-bottom-color: #000000;
        border-top-width: 1pt;
        border-right-width: 1pt;
        border-left-color: #000000;
        vertical-align: top;
        border-right-color: #000000;
        border-left-width: 1pt;
        border-top-style: solid;
        border-left-style: solid;
        border-bottom-width: 1pt;
        width: 117pt;
        border-top-color: #000000;
        border-bottom-style: solid
      }

      .c4 {
        border-right-style: solid;
        padding: 5pt 5pt 5pt 5pt;
        border-bottom-color: #000000;
        border-top-width: 1pt;
        border-right-width: 1pt;
        border-left-color: #000000;
        vertical-align: top;
        border-right-color: #000000;
        border-left-width: 1pt;
        border-top-style: solid;
        border-left-style: solid;
        border-bottom-width: 1pt;
        width: 116.2pt;
        border-top-color: #000000;
        border-bottom-style: solid
      }

      .c0 {
        border-right-style: solid;
        padding: 5pt 5pt 5pt 5pt;
        border-bottom-color: #000000;
        border-top-width: 1pt;
        border-right-width: 1pt;
        border-left-color: #000000;
        vertical-align: top;
        border-right-color: #000000;
        border-left-width: 1pt;
        border-top-style: solid;
        border-left-style: solid;
        border-bottom-width: 1pt;
        width: 123.8pt;
        border-top-color: #000000;
        border-bottom-style: solid
      }

      .c6 {
        padding-top: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        padding-bottom: 0;
        line-height: 1.0;
        border-bottom-style: solid;
        border-top-style: solid;
      }

      .c33 {
        -webkit-text-decoration-skip: none;
        color: #1155cc;
        font-weight: 700;
        text-decoration: underline;
        vertical-align: baseline;
        text-decoration-skip-ink: none;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c38 {
        -webkit-text-decoration-skip: none;
        color: #1155cc;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        font-size: 10pt;
        font-family: "Arial"
      }

      .c7 {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.0;
        orphans: 2;
        widows: 2;
        height: 11pt
      }

      .c11 {
        color: #000000;
        font-weight: 400;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c19 {
        color: #333333;
        font-weight: 700;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c14 {
        color: #000000;
        font-weight: 400;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 11pt;
        font-family: "Arial";
        font-style: normal
      }

      .c9 {
        color: #000000;
        font-weight: 400;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 11pt;
        font-family: "Arial";
        font-style: normal
      }

      .c5 {
        color: #333333;
        font-weight: 400;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c15 {
        color: #ffffff;
        font-weight: 700;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c28 {
        color: #000000;
        font-weight: 700;
        text-decoration: none;
        vertical-align: baseline;
        font-size: 10pt;
        font-family: "Arial";
        font-style: normal
      }

      .c20 {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.0;
        orphans: 2;
        widows: 2;
      }

      .c42 {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.15;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      .c25 {
        -webkit-text-decoration-skip: none;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        font-size: 24pt;
        font-family: "Arial"
      }

      .c24 {
        background-color: #ffffff;
        -webkit-text-decoration-skip: none;
        text-decoration: underline;
        text-decoration-skip-ink: none
      }

      .c35 {
        margin-left: -0.8pt;
        border-spacing: 0;
        border-collapse: collapse;
        margin-right: auto
      }

      .c21 {
        font-size: 10pt;
        font-family: "Arial";
        color: #333333;
        font-weight: 700
      }

      .c29 {
        color: #000000;
        text-decoration: none;
        vertical-align: baseline;
        font-style: normal
      }

      .c32 {
        color: #333333;
        text-decoration: none;
        vertical-align: baseline;
        font-style: normal
      }

      .c43 {
        margin-left: -6.8pt;
        border-spacing: 0;
        border-collapse: collapse;
        margin-right: auto
      }

      .c2 {
        border-spacing: 0;
        border-collapse: collapse;
        margin-right: auto
      }

      .c37 {
        padding-top: 0;
        padding-bottom: 15pt;
        line-height: 1.0;
        text-align: left
      }

      .c3 {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.0;
        text-align: left
      }

      .c30 {
        font-weight: 700;
        font-size: 24pt;
        font-family: "Arial"
      }

      .c39 {
        -webkit-text-decoration-skip: none;
        text-decoration: underline;
        text-decoration-skip-ink: none
      }

      .c23 {
        font-size: 10pt;
        font-family: "Arial";
        font-weight: 400
      }

      .c13 {
        background-color: #ffffff;
        orphans: 2;
        widows: 2
      }

      .c34 {
        background-color: #ffffff;
        max-width: 468pt;
        padding: 72pt 72pt 72pt 72pt
      }

      .c17 {
        font-size: 18pt;
        font-family: "Arial";
        font-weight: 700
      }

      .c10 {
        border: 1px solid black;
        margin: 5px
      }

      .c27 {
        color: inherit;
        text-decoration: inherit
      }

      .c22 {
        margin-left: 36pt;
        text-indent: -18pt
      }

      .c31 {
        color: #ff0000
      }

      .c41 {
        background-color: #ffffff
      }

      .c12 {
        background-color: #1244a1
      }

      .c26 {
        height: 11pt
      }

      .c18 {
        height: 0
      }

      .c40 {
        height: 40.5pt
      }

      .c36 {
        color: #333333
      }

      .title {
        padding-top: 0;
        color: #000000;
        font-size: 26pt;
        padding-bottom: 3pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      .subtitle {
        padding-top: 0;
        color: #666666;
        font-size: 15pt;
        padding-bottom: 16pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      li {
        color: #000000;
        font-size: 11pt;
        font-family: "Arial"
      }

      p {
        margin: 0;
        color: #000000;
        font-size: 11pt;
        font-family: "Arial"
      }

      h1 {
        padding-top: 20pt;
        color: #000000;
        font-size: 20pt;
        padding-bottom: 6pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      h2 {
        padding-top: 18pt;
        color: #000000;
        font-size: 16pt;
        padding-bottom: 6pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      h3 {
        padding-top: 16pt;
        color: #434343;
        font-size: 14pt;
        padding-bottom: 4pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      h4 {
        padding-top: 14pt;
        color: #666666;
        font-size: 10pt;
        padding-bottom: 4pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      h5 {
        padding-top: 10pt;
        color: #666666;
        font-size: 11pt;
        padding-bottom: 4pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      h6 {
        padding-top: 10pt;
        color: #666666;
        font-size: 11pt;
        padding-bottom: 4pt;
        font-family: "Arial";
        line-height: 1.15;
        page-break-after: avoid;
        font-style: italic;
        orphans: 2;
        widows: 2;
        text-align: left
      }

      @media (max-width: 660px){

        .pop table .c5, .pop table .c11, .pop table .c15 {
          font-size: 6pt !important;
        }

      }
    }
  }
}