.exlog_options_page {
  $options_section_container_padding: 10px;
  $border-thickness: 2px;
  $border-radius: 10px;
  $border-color: $color_accent;
  $border: $border-thickness solid $border-color;


  * {
    box-sizing: border-box;
  }

  p {
    word-wrap: break-word;
  }

  //Caters for admin area margin
  margin-left: -10px;
  @media screen and (min-width: 783px) {
    margin-left: -20px;
  }

  .options_section_outer_container {
    display: flex;
    flex-flow: row wrap;
    padding: 0 $options_section_container_padding;

    &.title-section {
      display: flex;
      flex-flow: row wrap;
      padding: 0 $options_section_container_padding;

      a {
        font-weight: bold;
      }

      img {
        width: 100px;
        margin-right: 20px;
      }

      h2 {
        text-align: center;
        font-size: 30px;
        flex-grow: 1;
        line-height: 35px;
        margin: 0;
      }

      .links-container {
        a {
          font-weight: bold;
        }
      }
    }
  }

  hr {
    border-color: black;
    border-style: dashed;
    border-bottom: none;
  }


  form {
    display: flex;
    flex-flow: row wrap;
    padding: 0 $options_section_container_padding;
  }

  .options_section_container {
    display: flex;
    flex-grow: 1;
    width: 33.33333%;
    padding: $options_section_container_padding;

    @media screen and (max-width: 1500px) {
      width: 50%;
    }

    @media screen and (max-width: 700px) {
      width: 100%;
    }

    input[type="button"] {
      min-width: 150px;
      display: block;
      margin: 0 auto 30px auto;

      &.remove_role_pairing, &.add_button {
        margin: 0;
        min-width: 0;
      }
    }

    .options_section {
      width: 100%;
      padding: 10px 30px;
      background-color: $color_primary;
      border-radius: $border-radius;
      border: $border;

      &.vert_middle {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .exlog_wpconfig_value_set_message {
        color: $color_accent_secondary;
        span {
          font-weight: bold;
        }
      }

      &.role_settings {
        .add_more {
          margin-top: 30px;
          display: flex;
          flex-direction: row;
          align-items: center;

          .add_button {
            font-size: 30px;
            margin-left: 20px;
            padding: 0 11px 3px 11px;
            line-height: normal;
            vertical-align: middle;
            height: auto;
          }
        }

        .role {
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          select, input {
            margin-right: 10px;
          }
        }
      }

      .option-container {
        $spacing: 15px;
        &:not(:last-of-type) {
          margin-bottom: $spacing * 2;
        }

        .option-title {
          margin: 0 0 $spacing 0;
        }

        &.repeater {
          border: $border;
          border-radius: $border-radius;
          padding: $spacing;

          section {
            border-top: $border;

            &:first-of-type:first-of-type {
              > .delete_repeater_item {
                display: none;
              }
            }

            &:last-of-type {
              border-bottom: $border;
            }

            &.repeater_item {
              padding: $spacing 0;
              display: flex;
              align-items: center;

              .repeater_item_input_container {
                flex-grow: 1;
                .repeater_markup_store {
                  background-color: #bafff5;
                }
              }

              .delete_repeater_item {
                width: 30px;
                height: 30px;
                min-width: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: flex-start;
                margin: 0 0 0 $spacing;
              }
            }
          }
        }
      }
    }
  }
}

body.settings_page_external-login {
  #wpfooter {
    position: relative;
  }
}