/*
 * Tailwind CSS entry point
 * This file compiles alongside the existing Bootstrap theme.css
 * and is enqueued separately in WordPress.
 *
 * All Tailwind utilities are prefixed with "tw-" to avoid
 * collisions with Bootstrap classes during migration.
 */

/* @tailwind base; */
/* ---- Container ---- */
.\!container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 992px) {
    .\!container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 992px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.\!container {
    max-width: 1200px !important;
  }
.container {
    max-width: 1200px;
  }
@media (min-width: 1200px) {
         .\!container {
        width: 1170px;
    }
         .container {
        width: 1170px;
    }
     }
.container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 992px) {
    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (min-width: 1200px) {
    .container-fluid {
        padding-left: 45px;
        padding-right: 45px;
    }
}
/* ---- Row ---- */
.row {
    /* @apply tw-flex tw-flex-wrap; */
    margin-left: -15px;
    margin-right: -15px;
  }
/* ---- Columns (12-column grid) ---- */
/* Extra small (always full-width or specified fraction) */
.col-xs-3 {
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
}
.col-xs-4 {
    width: 33.333333%;
    padding-left: 15px;
    padding-right: 15px;
}
.col-xs-6 {
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
}
.col-xs-8  { width: 66.66666667%; padding-left: 15px; padding-right: 15px; }
.col-xs-12 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
/* Small (768px+) */
@media (min-width: 768px) {
    .col-sm-1 {
        width: 8.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-2 {
        width: 16.666667%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-3 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-4 {
        width: 33.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-5  { width: 41.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-sm-6 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-7  { width: 58.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-sm-8  { width: 66.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-sm-9 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sm-10 { width: 83.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-sm-11 { width: 91.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-sm-12 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
  }
/* Medium (992px+) */
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-2 {
        width: 16.666667%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-3 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-4 {
        width: 33.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-5  { width: 41.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-md-6 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-7  { width: 58.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-md-8  { width: 66.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-md-9 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-md-10 { width: 83.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-md-11 { width: 91.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-md-12 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
  }
/* Large (1200px+) */
@media (min-width: 1200px) {
    .col-lg-1 {
        width: 8.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-2 {
        width: 16.666667%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-3 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-4 {
        width: 33.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-5  { width: 41.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-lg-6 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-7  { width: 58.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-lg-8  { width: 66.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-lg-9 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-10 { width: 83.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-lg-11 { width: 91.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-lg-12 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
  }
/* Extra-extra-small (< 480px) - from grid/_xxs.scss */
@media (max-width: 480px) {
    .col-xxs-1 {
        width: 8.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-2 {
        width: 16.666667%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-3 {
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-4 {
        width: 33.333333%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-5  { width: 41.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-xxs-6 {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-7  { width: 58.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-xxs-8  { width: 66.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-xxs-9 {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xxs-10 { width: 83.33333333%; padding-left: 15px; padding-right: 15px; }
    .col-xxs-11 { width: 91.66666667%; padding-left: 15px; padding-right: 15px; }
    .col-xxs-12 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
  }
/* ---- Column offsets ---- */
.col-xs-offset-2  { margin-left: 16.66666667%; }
@media (min-width: 768px) {
    .col-sm-offset-0  { margin-left: 0; }
    .col-sm-offset-1  { margin-left: 8.33333333%; }
    .col-sm-offset-2  { margin-left: 16.66666667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.33333333%; }
    .col-sm-offset-5  { margin-left: 41.66666667%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-7  { margin-left: 58.33333333%; }
    .col-sm-offset-8  { margin-left: 66.66666667%; }
    .col-sm-offset-9  { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
    .col-sm-offset-12 { margin-left: 100%; }
  }
@media (min-width: 992px) {
    .col-md-offset-0  { margin-left: 0; }
    .col-md-offset-1  { margin-left: 8.33333333%; }
    .col-md-offset-2  { margin-left: 16.66666667%; }
    .col-md-offset-3  { margin-left: 25%; }
    .col-md-offset-4  { margin-left: 33.33333333%; }
    .col-md-offset-5  { margin-left: 41.66666667%; }
    .col-md-offset-6  { margin-left: 50%; }
    .col-md-offset-7  { margin-left: 58.33333333%; }
    .col-md-offset-8  { margin-left: 66.66666667%; }
    .col-md-offset-9  { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
    .col-md-offset-12 { margin-left: 100%; }
  }
@media (min-width: 1200px) {
    .col-lg-offset-0  { margin-left: 0; }
    .col-lg-offset-1  { margin-left: 8.33333333%; }
    .col-lg-offset-2  { margin-left: 16.66666667%; }
    .col-lg-offset-3  { margin-left: 25%; }
    .col-lg-offset-4  { margin-left: 33.33333333%; }
    .col-lg-offset-5  { margin-left: 41.66666667%; }
    .col-lg-offset-6  { margin-left: 50%; }
    .col-lg-offset-7  { margin-left: 58.33333333%; }
    .col-lg-offset-8  { margin-left: 66.66666667%; }
    .col-lg-offset-9  { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
    .col-lg-offset-12 { margin-left: 100%; }
  }
/* ---- Utility helpers ---- */
.clearfix {
    clear: both;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.hidden {
    display: none;
}
.visible {
    display: block;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/* ---- Forms ---- */
.form-group {
    margin-bottom: 20px;
  }
.form-group.form-group-no-margin {
    margin-bottom: 0 !important;
  }
.form-control {
    display: block;
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid #dadada;
    background-color: #ffffff;
    padding: 6px 12px;
    font-size: 14px;
    color: #252525;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    &:focus {
      border-color: #3c4981;
      outline: none;
      box-shadow: 0 0 0 1px #3c4981;
    }
    &:disabled {
      background-color: #f3f3f3;
      cursor: not-allowed;
      opacity: 0.75;
    }
  }
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    &::-ms-expand {
      display: none;
    }
    background: #ffffff url(../img/select-pointer.png) no-repeat scroll 95% 50%;
    padding: 5px 10px;
  }
.control-label {
    display: block;
    margin-bottom: 5px;
    color: #787878;
    font-weight: 400;
  }
.radio-inline {
    display: inline-block;
    border: none;
    color: #787878;
  }
.checkbox {
    background-color: #edf2f7;
    border: 0;
    margin: 0;
    padding: 5px 10px 10px 10px;
  }
.checkbox.checkbox-white {
    background: #ffffff;
  }
.help-block {
    font-size: 13px;
    font-weight: 600;
  }
.has-error .control-label {
    color: #960003;
  }
.has-error .form-control {
    border-color: #960003;
  }
.has-error .help-block {
    color: #960003;
    font-weight: 600;
    text-align: left;
    font-size: 13px;
  }
/* ---- Buttons ---- */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: normal;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    &:hover,
    &:focus,
    &:active {
      box-shadow: none;
      outline: 0;
    }
    &[disabled] {
      opacity: 0.25;
    }
  }
.btn-full,
  .btn-block {
    width: 100%;
  }
.btn-link {
    color: #49A94F;
    text-decoration: underline;
    &:hover {
      color: #3b8b3f;
    }
  }
.btn-default {
    background-color: #49A94F;
    color: #ffffff;
    padding: 10px 25px;
    &:hover {
      background-color: #6CBD6E;
      opacity: 1;
    }
    &:active,
    &:focus {
      background-color: #6CBD6E;
      opacity: 1;
    }
  }
.btn-primary {
    /* Currently inherits from Bootstrap defaults - no custom overrides */
  }
.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    &:hover,
    &:active,
    &:focus {
      border-color: #49A94F;
      opacity: 1;
      background-color: #4f5b8d;
      color: #ffffff;
    }
  }
.btn-success {
    background-color: #49A94F;
    color: #ffffff;
  }
.btn-close {
    background-color: #787878;
    color: #ffffff;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    padding: 3px 10px 3px 9px;
    font-size: 18px;
    transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    &:after {
      font-family: FontAwesome;
      content: "\f00d";
    }
  }
.btn-accordion-toggle.btn-accordion-collapsed {
    background-position: left -52px;
    &:hover {
      background-position: left bottom;
      opacity: 1;
    }
  }
.btn-sm {
    padding: 4px 12px;
    /* font-size: 0.875rem; */
  }
/* ---- Alerts ---- */
.alert {
    position: relative;
    border-radius: 0.25rem;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
  }
.alert-danger {
    background-color: rgba(150, 0, 3, 0.1);
    color: #960003;
    border-color: #960003;
  }
.alert-info {
    background-color: rgba(77, 167, 170, 0.1);
    color: #4DA7AA;
    border-color: #4DA7AA;
  }
/* ---- Tables ---- */
.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #E4E6EE;

    thead {
      background-color: #687288;
      tr td {
        border: none;
        color: #ffffff;
        font-weight: 800;
      }
    }

    tbody {
      tr td {
        border: none;
        color: #202E5B;
        font-weight: 600;
      }
    }
  }
.table-striped tbody {
    tr:nth-of-type(odd) {
      background-color: #F0F2F8;
    }
    tr:nth-of-type(even) {
      background-color: #ffffff;
    }
  }
.table-responsive {
    @media (max-width: 767px) {
      border: none;
    }
  }
/* ---- Labels ---- */
.label {
    display: inline-block;
    padding: 2px 12px;
    font-weight: 400;
    font-size: 75%;
    white-space: nowrap;
    border-radius: 10px;
  }
.label-info {
    background-color: #4DA7AA;
    color: #ffffff;
  }
/* ---- Panels / Cards ---- */
.panel {
    border-radius: 0;
    border: 0;
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }
.panel-body {
    padding: 15px;
  }
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
  }
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #dadada;
  }
/* panel-default */
.panel-default {
    border-color: #dadada;

    .panel-heading {
      color: #252525;
      background-color: #f3f3f3;
      border-color: #dadada;
    }

    .panel-body {
      ul,
      ol {
        li {
          list-style-position: inside;
        }
      }
    }

    &.background {
      &.background-lighter-grey {
        border: 1px solid #ffffff;
      }
    }

    &.colour {
      &.colour-white {
        border: 1px solid #dadada;
        .panel-body {
          h4 {
            font-weight: 800;
          }
          p {
            line-height: 200%;
          }
        }
        &.panel-left {
          .panel-body {
            > p {
              line-height: 150%;
            }
          }
        }
      }

      &.colour-pale-blue,
      &.colour-lighter-grey {
        color: #252525;
        p, li, blockquote, a:not(.btn) {
          color: #252525;
        }
      }
    }

    &.panel-left {
      .panel-body {
        > p {
          line-height: 150%;
        }
        .btn.btn-transparent {
          text-align: left;
          padding-left: 5px;
        }
      }
    }
  }
/* panel-group list styling */
.panel-group {
    margin-bottom: 20px;

    .panel {
      margin-bottom: 0;
      border-radius: 0;
      overflow: hidden;

      &.panel-default {
        .panel-body {
          ul,
          ol {
            text-align: left;
            padding-left: 0;
            list-style: none;
            li {
              text-align: left;
              margin-left: 6px;
              margin-bottom: 10px;
              a {
                padding-left: 10px;
                position: relative;
                font-weight: 600;
                text-decoration: none;
                display: block;
                &:before {
                  display: block;
                  font-family: FontAwesome;
                  content: "\f105";
                  position: absolute;
                  left: 0;
                  top: 0;
                }
                &:hover {
                  color: #6CBD6E;
                }
              }
            }
          }
        }
      }
    }
  }
/* panel-sub-module (accordion panels) */
.panel-sub-module {
    padding: 10px;

    .panel-collapse {
      padding: 10px 0 0 56px;
    }

    &.panel-sub-module-full {
      .panel-collapse {
        padding: 30px 30px 0 30px;
      }
    }

    .panel-heading {
      padding: 0;
      border: none;
      min-height: 40px;
      margin: 0;
      p {
        font-size: 17px;
        margin: 0 !important;
      }

      a {
        display: flex;
        align-items: center;
        outline: none;
        text-decoration: none;
        color: #3c4981;
        font-weight: 800;

        &:before {
          flex: 0 0 40px;
          display: block;
          width: 40px;
          height: 40px;
          margin-right: 16px;
          line-height: 34px;
          border-radius: 50%;
          text-align: center;
          color: #ffffff;
          font-size: 35px;
          content: "-";
          background: #787878;
          font-weight: normal;
        }

        &.collapsed {
          &:before {
            content: "+";
            font-size: 24px;
            line-height: 40px;
            background: #49A94F;
          }
          &:hover {
            &:before {
              background: #6CBD6E;
            }
          }
        }

        &:hover,
        &:active,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
/* panel-sub-sub-module (nested accordions) */
.panel-sub-sub-module {
    box-shadow: none;

    .panel-collapse {
      padding: 5px 10px 5px 36px;
    }

    .panel-heading {
      padding: 0 !important;
      border: none !important;
      min-height: 20px;
      p {
        margin: 0 !important;
        font-size: 14px;
      }

      a {
        display: flex;
        align-items: center;
        outline: none;
        text-decoration: none;
        color: #3c4981;
        font-weight: 600;
        min-height: 20px;

        &:before {
          flex: 0 0 20px;
          display: block;
          width: 20px;
          height: 20px;
          margin-right: 16px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          color: #ffffff;
          font-size: 20px;
          content: "-";
          background: #787878;
          font-weight: normal;
          vertical-align: bottom;
        }

        &.collapsed {
          &:before {
            content: "+";
            font-size: 17px;
            line-height: 20px;
            background: #49A94F;
          }
          &:hover {
            &:before {
              background: #6CBD6E;
            }
          }
        }

        &:hover,
        &:active,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
/* col-sm-6 panel padding override */
.col-sm-6 .panel.panel-default .panel-body {
    padding: 15px 65px;
    @media (max-width: 767px) {
      padding: 15px 15px;
    }
  }
/* ---- Accordions ---- */
.accordions {
    /* Container for accordion panel-sub-module items */
  }
/* collapse transition (Bootstrap JS toggles .in class) */
.collapse {
    display: none;
    &.in {
      display: block;
    }
  }
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition-timing-function: ease;
    transition-duration: 0.35s;
    transition-property: height, visibility;
  }
/* ---- Modals ---- */
/* Bootstrap JS retained for show/hide/backdrop behavior.
     CSS provides the visual layer. */
.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;

    &.fade .modal-dialog {
      transform: translate(0, -25%);
      transition: transform 0.3s ease-out;
    }

    &.in .modal-dialog {
      transform: translate(0, 0);
    }
  }
.modal-open {
    overflow: hidden;
  }
.modal-dialog {
    position: relative;
    width: auto;
    margin: 30px 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 768px) {
      margin: 30px auto;
    }
  }
.modal-dialog.modal-lg {
    max-width: 900px;
  }
.modal-content {
    position: relative;
    background-color: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    outline: 0;
  }
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;

    &.fade {
      opacity: 0;
    }
    &.in {
      opacity: 0.5;
    }
  }
.modal-header {
    padding: 30px;
    background-color: #3c4981;
    color: #ffffff;

    .modal-title {
      color: #ffffff;
    }
  }
.modal-body {
    padding: 30px;
    position: relative;
  }
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
  }
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
  }
/* ---- WYSIWYG Panel Group ---- */
.wysiwyg-panel-group {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 30px;

    .panel.panel-default .panel-body {
      padding: 20px;
    }
  }
/* ---- Widget (extends panel) ---- */
.widget {
    margin-bottom: 24px;
    border-radius: 0;
    border: 0;
    background-color: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

    h2, .h2, h3, .h3, h4, .h4, li {
      color: #2C3D6D;
    }

    p {
      font-size: 12px;
      color: #252525;
    }

    .panel-body {
      border-left: 1px solid #3c4981;
      border-right: 1px solid #3c4981;
    }

    .panel-heading {
      background-color: #3c4981;
      color: #ffffff;
    }

    .panel-footer {
      background-color: #3c4981;
      color: #ffffff;
    }

    header {
      border: none;
    }

    footer {
      border: none;
    }
  }
/* ---- Panel Selector ---- */
.panel-selector {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 0;

    &__content {
      height: 0;
      padding: 0;
      overflow: hidden;
      transition: opacity 0.25s ease-in-out 0.25s,
                 background-color 0.25s ease-in-out 0.25s,
                 height 0.25s ease-in-out;
      opacity: 0;
      flex: 0 0 calc(100% - 30px);

      @media (min-width: 500px) {
        order: 1;
      }

      &--visible {
        height: auto;
        margin-bottom: 16px;
        padding: 24px;
        opacity: 1;
        background-color: #edf2f7;
      }

      &__module {
        .container {
          width: auto !important;
          padding: 0 !important;
          &.wysiwyg > .background {
            padding: 20px 15px;
          }
        }
        .panel-group .panel.panel-default .panel-body {
          padding: 20px;
        }
      }
    }

    &__panel {
      &--half {
        flex: 0 0 100%;
        padding-left: 15px;
        padding-right: 15px;
        @media (min-width: 500px) {
          flex: 0 0 50%;
        }
      }

      &--third {
        flex: 0 0 100%;
        padding-left: 15px;
        padding-right: 15px;
        @media (min-width: 500px) {
          flex: 0 0 33.3%;
        }
      }

      .panel {
        box-shadow: 0 0 8px -2px #dfe0e0;
        border-width: 2px !important;
        transition: all 0.15s ease-in-out;
        border-radius: 4px;
      }

      &:hover .panel {
        @media (min-width: 500px) {
          transform: scale(1.02);
        }
      }

      &__title {
        margin-bottom: 0 !important;
        text-align: left;
        flex: 0 0 100%;
        @media (min-width: 500px) {
          text-align: center;
        }
      }

      &__button {
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: auto;
        width: 40px;
        max-width: 40px;
        background-color: #49A94F;
        border-radius: 0 4px 4px 0;
        color: #ffffff;
        transition: background-color 0.25s ease-in-out,
                    border-color 0.25s ease-in-out,
                    border-width 0.25s ease-in-out;

        &:hover,
        &:focus {
          opacity: 1;
          color: #ffffff;
          background-color: #377737;
        }

        &:after {
          font-family: FontAwesome;
          content: "\f054";
          transition: all 0.25s ease-in-out;
        }

        @media (min-width: 500px) {
          top: auto;
          right: 15px;
          bottom: 20px;
          left: 15px;
          width: calc(100% - 30px);
          max-width: none;
          border: 2px solid #49A94F;
          border-radius: 4px;
          background: transparent;
          color: #3c4981;
          font-weight: 600;

          &:hover,
          &:focus {
            border-color: #377737;
            color: #2C3D6D;
            background-color: transparent;
          }

          &:after {
            font-family: 'Open Sans', sans-serif;
            content: "Select";
          }
        }
      }

      &.panel-selector__panel--active {
        .panel {
          border-color: #6CBD6E !important;
        }
        .panel-selector__panel__button {
          border-radius: 50%;
          top: 50%;
          bottom: 50%;
          height: 40px;
          max-height: 40px;
          margin-top: -20px;
          margin-bottom: -20px;
          right: 4px;
          background-color: #4DA7AA;

          &:after {
            font-family: FontAwesome;
            content: "\f00c";
            color: #ffffff;
          }

          @media (min-width: 500px) {
            top: auto;
            right: 50%;
            bottom: 20px;
            left: 50%;
            margin-top: auto;
            margin-left: -20px;
            margin-right: 0;
            margin-bottom: auto;
            border: none;
            width: 40px;
          }
        }
      }
    }
  }
/* ---- Navbar ---- */
.navbar {
    min-height: 0;
    margin-bottom: 0;
    position: relative;
    border: 1px solid transparent;

    &.navbar-default {
      z-index: 100;
      border: none;
      padding: 40px 0 0 0;
      background: transparent;

      &.navbar-fixed-top {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
      }

      > .container {
        @media (min-width: 992px) {
          position: relative;
        }
      }

      .navbar-header {
        position: relative;
        @media (min-width: 992px) {
          position: static;
        }

        .navbar-brand {
          width: 110px;
          height: auto;
          padding: 0;
          margin-left: 23px;
          float: left;
          font-size: 18px;
          line-height: 20px;
          &:focus,
          &:active {
            opacity: 1;
          }
          @media (max-width: 767px) {
            padding-bottom: 10px;
            margin-top: -30px;
            width: 110px;
          }
        }

        .navbar-toggle {
          border: 0;
          border-radius: 0;
          background-color: #2C3D6D;
          color: #ffffff;
          padding: 13px 13px;
          float: right;
          cursor: pointer;
          &:hover {
            background-color: #2C3D6D;
            color: #ffffff;
          }
          .icon-bar {
            background-color: #ffffff;
            width: 18px;
            display: block;
            height: 2px;
            border-radius: 1px;
            margin-top: 4px;
            transition: all 0.25s ease-in-out;
            &:first-child {
              margin-top: 0;
            }
          }
          &.in {
            .icon-bar[data-burger-top] {
              transform: rotate(45deg) translate(4px, 4px);
            }
            .icon-bar[data-burger-middle] {
              transform: rotate(-45deg);
            }
            .icon-bar[data-burger-bottom] {
              width: 0;
            }
          }
        }
      }

      .navbar-nav {
        margin: 15px 0;
        list-style: none;
        padding-left: 0;

        li {
          background-color: transparent;
          a {
            background-color: transparent;
            color: inherit;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 12px;
            padding-right: 12px;
            display: block;
            text-decoration: none;
            @media (min-width: 1200px) {
              padding-left: 16px;
              padding-right: 16px;
            }
            .fa {
              color: #49A94F;
            }
            &:hover {
              color: #ffffff;
              background-color: #6CBD6E !important;
              opacity: 1;
              .fa {
                color: #ffffff;
              }
            }
            @media (max-width: 991px) {
              font-size: 13px;
              padding-left: 10px;
              padding-right: 10px;
            }
          }

          &.current-menu-item,
          &.current-page-ancestor {
            a {
              background-color: #49A94F;
              color: #ffffff;
              .fa {
                color: #ffffff !important;
              }
            }
          }

          &:hover {
            opacity: 1;
          }
        }

        &.navbar-right {
          background-color: #2C3D6D;
          /* float: right !important; */
          margin-right: -15px;
        }
      }

      /* Mobile collapse menu */
      @media (max-width: 991px) {
        .navbar-collapse {
          position: fixed;
          top: 125px;
          right: 0;
          bottom: 0;
          left: 100%;
          height: 100vh !important;
          min-height: 100vh;
          max-height: 100vh;
          border: none;
          box-shadow: none;
          background-color: #2C3D6D;
          transition: all 0.25s ease-in-out;
          margin-left: 0;
          margin-right: 0;
          padding-left: 0;
          padding-right: 0;
          overflow-y: auto;

          &.collapsing {
            overflow-x: auto;
          }
          &.in {
            left: 0;
          }

          .navbar-nav {
            margin: 0;
            li {
              display: block;
              float: none;
              > a {
                color: #ffffff;
                padding-left: 30px;
                @media (min-width: 768px) {
                  padding-left: calc(calc(100% - 750px) / 2 + 30px);
                  padding-right: calc(calc(100% - 750px) / 2 + 30px);
                }
              }
              &.current-menu-item,
              &.current-page-ancestor {
                a {
                  background-color: #49A94F;
                  &:hover {
                    background-color: #49A94F;
                  }
                }
              }
            }
          }
        }
      }
    }

    /* In-page navbar variant */
    &.navbar-in-page {
      text-align: center;
      border: 0;
      border-radius: 0;

      .navbar-nav {
        float: none;
        display: inline-block;

        li {
          display: inline-block;
          float: none;
          a {
            color: #3c4981;
            padding: 10px 15px;
            font-weight: 600;
            &:hover,
            &:active,
            &:focus {
              background-color: #49A94F !important;
              color: #ffffff;
              opacity: 1;
            }
          }
          &.active {
            a {
              &:hover,
              &:active,
              &:focus {
                background-color: #49A94F !important;
                color: #ffffff;
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
.navbar-caret {
    /* Visual caret for mobile nav */
  }
/* ---- Nav ---- */
.nav {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }
.nav > li {
    position: relative;
    display: block;
  }
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
  }
.nav-tabs,
  .nav-pills {
    border-bottom: 1px solid #dadada;
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
  }
/* ---- Glyphicons (retained - font-based icons) ---- */
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }
/* ---- sr-only (screen reader only) ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
/* ---- Affix ---- */
.affix {
    top: 126px;
    z-index: 101;
    width: 100%;
  }
.has-cookie-bar .affix {
    top: 198px;
  }
/* ---- Utility: Display ---- */
.display {
    &.display-block {
      display: block;
    }
    &.display-table {
      display: table;
    }
    &.display-table-cell {
      display: table-cell;
    }
    &.display-inline-block {
      display: inline-block;
    }
    &.display-vertical-middle {
      vertical-align: middle;
    }
    &.display-vertical-bottom {
      vertical-align: bottom;
    }
    &.display-off-canvas {
      display: block;
      position: absolute;
      top: 0;
      left: 9999px;
    }
  }
/* ---- Utility: Position ---- */
.position {
    &.position-relative {
      position: relative;
    }
    &.position-absolute {
      position: absolute;
      left: 0;
      &.position-bottom {
        bottom: 0;
        margin-bottom: 0;
      }
      &.position-bottom-md {
        bottom: 80px;
      }
      &.position-bottom-sm {
        bottom: 40px;
      }
      &.position-bottom-xs {
        bottom: 20px;
      }
      &.position-top-right {
        top: 0;
        right: 0;
      }
      &.position-off-canvas {
        top: 0;
        left: -30000px;
      }
    }
  }
/* ---- Utility: Background ---- */
.background {
    &.background-fixed {
      background-attachment: fixed;
    }
    &.background-cover {
      background-size: cover;
      background-position: center center;
    }
    &.background-image {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    &.background-white {
      background-color: #ffffff;
    }
    &.background-white-translucent {
      background-color: rgba(255, 255, 255, 0.4);
    }
    &.background-black {
      background-color: #ffffff;
    }
    &.background-black-translucent {
      background-color: rgba(0, 0, 0, 0.3);
    }
    &.background-blue {
      background-color: #3c4981;
    }
    &.background-blue-gradient {
      background-image: linear-gradient(-180deg, #3C4981 0%, #253664 100%);
    }
    &.background-blue-translucent {
      background-color: rgba(60, 73, 129, 0.3);
    }
    &.background-pale-blue {
      background-color: #edf2f7;
    }
    &.background-contrast-grey {
      background-color: #e5e5e5;
    }
    &.background-lighter-grey {
      background-color: #f3f3f3;
    }
    &.background-center {
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
/* ---- Utility: Colour ---- */
.colour {
    &.colour-black {
      background-color: #000000;
      color: #ffffff;
    }
    &.colour-white {
      background-color: #ffffff;
      color: #252525;
    }
    &.colour-blue {
      background-color: #3c4981;
      color: #ffffff;
      h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, li, blockquote, a {
        color: #ffffff;
      }
    }
    &.colour-dark-blue {
      background-color: #2C3D6D;
      h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, li, blockquote, a {
        color: #ffffff;
      }
    }
    &.colour-beige {
      background-color: #fffdc8;
      h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, li, blockquote {
        color: #2C3D6D;
      }
      a {
        color: #49A94F;
      }
    }
    &.colour-pale-blue {
      background-color: #edf2f7;
    }
    &.colour-lighter-grey {
      background-color: #f3f3f3;
    }
    &.colour-contrast-grey {
      background-color: #e5e5e5;
    }
  }
/* ---- Utility: Text Colour ---- */
.text-colour {
    &.text-colour-black {
      color: #000000;
      a {
        color: #000000;
        &:hover {
          color: #000000;
        }
      }
    }
    &.text-colour-white {
      color: #ffffff;
      a {
        color: #ffffff;
        &:hover {
          color: #ffffff;
        }
      }
    }
    &.text-colour-blue {
      color: #3c4981;
      a {
        color: #3c4981;
        &:hover {
          color: #3c4981;
        }
      }
    }
    a.text-colour-teal {
      color: #4DA7AA;
      &:hover {
        color: #4DA7AA;
      }
    }
    &.text-colour-green {
      color: #49A94F;
      a {
        color: #49A94F;
        &:hover {
          color: #49A94F;
        }
      }
    }
    &.text-colour-red {
      color: #960003;
      a {
        color: #960003;
        &:hover {
          color: #960003;
        }
      }
    }
  }
/* ---- Utility: Shape ---- */
.shape {
    &.shape-round {
      border-radius: 100%;
      display: inline-block;
      color: #ffffff;
    }
    &.shape-white {
      background-color: #ffffff;
    }
    &.shape-xs {
      max-width: 24px;
      max-height: 24px;
      padding: 3px 8px;
    }
    &.shape-sm {
      max-width: 32px;
      max-height: 32px;
      padding: 6px 9px;
    }
    &.shape-md {
      max-width: 36px;
      max-height: 36px;
      padding: 8px 11px;
    }
  }
/* ---- Utility: Height ---- */
.height {
    &.height-full {
      height: 100%;
    }
    &.height-scrollbar {
      height: 20px;
    }
  }
/* ---- Utility: Opacity ---- */
.opacity {
    &.opacity-75 {
      opacity: 0.75;
    }
    &.opacity-50 {
      opacity: 0.5;
    }
  }
/* ---- Utility: Border ---- */
.border {
    &.border-top-white {
      border-top: 2px solid #ffffff;
    }
    &.border-right-white {
      border-right: 2px solid #ffffff;
    }
  }
/* ---- Utility: Margin ---- */
.margin {
    &.margin-top-zero {
      margin-top: 0;
    }
    &.margin-top-xxs {
      margin-top: 10px;
      @media (max-width: 480px) {
        margin-top: 8px;
      }
    }
    &.margin-top-xs {
      margin-top: 20px;
      @media (max-width: 767px) {
        margin-top: 10px;
      }
    }
    &.margin-top-sm {
      margin-top: 40px;
      @media (max-width: 767px) {
        margin-top: 15px;
      }
    }
    &.margin-top-md {
      margin-top: 64px;
      @media (max-width: 767px) {
        margin-top: 30px;
      }
    }
    &.margin-top-lg {
      margin-top: 120px;
      @media (max-width: 767px) {
        margin-top: 60px;
      }
    }
    &.margin-top-negative-md {
      margin-top: -80px;
      @media (max-width: 767px) {
        margin-top: -30px;
      }
    }
    &.margin-bottom-zero {
      margin-bottom: 0;
    }
    &.margin-bottom-xxs {
      margin-bottom: 10px;
      @media (max-width: 480px) {
        margin-bottom: 8px;
      }
    }
    &.margin-bottom-xs {
      margin-bottom: 20px;
      @media (max-width: 767px) {
        margin-bottom: 10px;
      }
    }
    &.margin-bottom-sm {
      margin-bottom: 40px;
      @media (max-width: 767px) {
        margin-bottom: 15px;
      }
    }
    &.margin-bottom-md {
      margin-bottom: 64px;
      @media (max-width: 767px) {
        margin-bottom: 30px;
      }
    }
    &.margin-bottom-lg {
      margin-bottom: 120px;
      @media (max-width: 767px) {
        margin-bottom: 60px;
      }
    }
  }
/* ---- Utility: Padding ---- */
.padding {
    &.padding-top-zero {
      padding-top: 0;
    }
    &.padding-top-xxs {
      padding-top: 10px;
      @media (max-width: 480px) {
        padding-top: 8px;
      }
    }
    &.padding-top-xs {
      padding-top: 20px;
      @media (max-width: 767px) {
        padding-top: 10px;
      }
    }
    &.padding-top-sm {
      padding-top: 30px;
      @media (max-width: 767px) {
        padding-top: 15px;
      }
    }
    &.padding-top-md {
      padding-top: 45px;
      @media (max-width: 767px) {
        padding-top: 30px;
      }
    }
    &.padding-top-lg {
      padding-top: 80px;
      @media (max-width: 767px) {
        padding-top: 60px;
      }
    }
    &.padding-bottom-zero {
      padding-bottom: 0;
    }
    &.padding-bottom-xxs {
      padding-bottom: 10px;
      @media (max-width: 480px) {
        padding-bottom: 8px;
      }
    }
    &.padding-bottom-xs {
      padding-bottom: 20px;
      @media (max-width: 767px) {
        padding-bottom: 10px;
      }
    }
    &.padding-bottom-sm {
      padding-bottom: 30px;
      @media (max-width: 767px) {
        padding-bottom: 15px;
      }
    }
    &.padding-bottom-md {
      padding-bottom: 45px;
      @media (max-width: 767px) {
        padding-bottom: 30px;
      }
    }
    &.padding-bottom-lg {
      padding-bottom: 80px;
      @media (max-width: 767px) {
        padding-bottom: 60px;
      }
    }
    &.padding-bottom-none {
      padding-bottom: 0;
    }
  }
/* ---- Utility: Well ---- */
.well {
    border-radius: 0;
    border: 0;
    background-color: #e5e5e5;
    padding: 19px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    p {
      color: #787878;
      &.lead {
        color: #252525;
        font-weight: 600;
      }
    }
    &.well-arrow {
      box-shadow: none;
      background-color: #ffffff;
      background-image: url(../img/well-arrow.png);
      background-position: 30px top;
      background-repeat: no-repeat;
      padding: 35px;
    }
  }
/* ---- Utility: WordPress WYSIWYG align ---- */
.alignleft {
    float: left;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 10px;
  }
.alignright {
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 10px;
  }
.aligncenter {
    margin-left: auto;
    margin-right: auto;
  }
/* ---- Utility: List-unstyled ---- */
.list-unstyled {
    padding-left: 0;
    list-style: none;
  }
.list-legal li a {
    text-transform: uppercase;
    font-size: 10px;
  }
/* ---- Utility: img-responsive ---- */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
  }
/* ---- Utility: invisible / visible ---- */
.invisible {
    visibility: hidden;
  }
/* ---- Utility: text-decoration ---- */
/* ---- Utility: page colour ---- */

/*
 * =============================================================
 * Bootstrap → Tailwind Grid Mapping Layer
 * =============================================================
 * Maps Bootstrap 3 grid classes to Tailwind utility equivalents
 * so existing PHP templates work without HTML changes.
 *
 * NOTE: These mappings use the "tw-" prefix since all Tailwind
 * utilities are prefixed. As Bootstrap is gradually removed,
 * these can be simplified or removed entirely.
 */

/*
 * =============================================================
 * Phase 2: Forms, Buttons, Alerts, Tables
 * =============================================================
 * NOTE: Custom theme colors/sizes are used as raw CSS values
 * instead of @apply with prefixed utilities, because the tw-
 * prefix does not reliably resolve custom theme tokens in @apply.
 */

/*
 * =============================================================
 * Phase 3: Panels/Cards, Accordions, Modals
 * =============================================================
 * NOTE: Bootstrap JS (collapse.js, modal.js) is retained.
 * These mappings provide the CSS layer so Bootstrap's JS
 * continues to work while the visual styling comes from
 * Tailwind-equivalent CSS values.
 */

/*
 * =============================================================
 * Phase 4: Navbar, Icons, Utilities
 * =============================================================
 */

/*# sourceMappingURL=tailwind.css.map */