/* ==========================================================================
   little_sails - Bootstrap 3 -> 5 compatibility shim
   Bootstrap 5.3.8

   Keeps Bootstrap 3 class names that may still exist in CMS page content,
   form.php output, or custom.js working under Bootstrap 5.
   Once content has been updated to BS5 class names this file can be removed
   (and its <link> taken out of header.php).

   NOTE: BS3 -> BS5 grid breakpoints moved:
     BS3  sm >= 768   md >= 992   lg >= 1200
     BS5  sm >= 576   md >= 768   lg >= 992   xl >= 1200
   so existing col-sm/md/lg-* columns now go side-by-side one size earlier.
   ========================================================================== */

/* ---- Forms ---------------------------------------------------------------- */

label {
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.radio label,
.checkbox label,
.radio-inline,
.checkbox-inline,
.form-check-label {
    font-weight: normal;
}

.form-group {
    margin-bottom: 15px;
}

.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.control-label {
    font-weight: bold;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.has-error .form-control { border-color: #a94442; }
.has-error .help-block,
.has-error .control-label { color: #a94442; }
.has-success .form-control { border-color: #3c763d; }

/* BS5 .form-control removes the native select arrow - add the .form-select one back */
select.form-control:not([multiple]):not([size]) {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

legend {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    font-size: 21px;
    line-height: inherit;
    border-bottom: 1px solid #e5e5e5;
}

/* ---- Buttons -------------------------------------------------------------- */

.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
}

.btn-xs {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 3px;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ---- Grid ----------------------------------------------------------------- */

/* BS3 gutter was 30px (BS5 default is 24px) - matches the 15px .section padding.
   Rows using BS5 g-* / gx-* gutter classes are left alone. */
.row:not([class*="g-"]) {
    --bs-gutter-x: 30px;
}

.col-xs-1 { flex: 0 0 auto; width: 8.3333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

.col-xs-offset-1 { margin-left: 8.3333333%; }
.col-xs-offset-2 { margin-left: 16.666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.333333%; }
.col-xs-offset-5 { margin-left: 41.666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.333333%; }
.col-xs-offset-8 { margin-left: 66.666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.333333%; }
.col-xs-offset-11 { margin-left: 91.666667%; }

/* Re-state Bootstrap 5's own responsive column widths AFTER the .col-xs-* rules
   above, so combinations like "col-xs-12 col-md-6" still switch at md.
   (Copied verbatim from bootstrap.min.css 5.3.8.) */
@media (min-width: 576px) {
    .col-sm{flex:1 0 0}
    .col-sm-auto{flex:0 0 auto;width:auto}
    .col-sm-1{flex:0 0 auto;width:8.33333333%}
    .col-sm-2{flex:0 0 auto;width:16.66666667%}
    .col-sm-3{flex:0 0 auto;width:25%}
    .col-sm-4{flex:0 0 auto;width:33.33333333%}
    .col-sm-5{flex:0 0 auto;width:41.66666667%}
    .col-sm-6{flex:0 0 auto;width:50%}
    .col-sm-7{flex:0 0 auto;width:58.33333333%}
    .col-sm-8{flex:0 0 auto;width:66.66666667%}
    .col-sm-9{flex:0 0 auto;width:75%}
    .col-sm-10{flex:0 0 auto;width:83.33333333%}
    .col-sm-11{flex:0 0 auto;width:91.66666667%}
    .col-sm-12{flex:0 0 auto;width:100%}
}
@media (min-width: 768px) {
    .col-md{flex:1 0 0}
    .col-md-auto{flex:0 0 auto;width:auto}
    .col-md-1{flex:0 0 auto;width:8.33333333%}
    .col-md-2{flex:0 0 auto;width:16.66666667%}
    .col-md-3{flex:0 0 auto;width:25%}
    .col-md-4{flex:0 0 auto;width:33.33333333%}
    .col-md-5{flex:0 0 auto;width:41.66666667%}
    .col-md-6{flex:0 0 auto;width:50%}
    .col-md-7{flex:0 0 auto;width:58.33333333%}
    .col-md-8{flex:0 0 auto;width:66.66666667%}
    .col-md-9{flex:0 0 auto;width:75%}
    .col-md-10{flex:0 0 auto;width:83.33333333%}
    .col-md-11{flex:0 0 auto;width:91.66666667%}
    .col-md-12{flex:0 0 auto;width:100%}
}
@media (min-width: 992px) {
    .col-lg{flex:1 0 0}
    .col-lg-auto{flex:0 0 auto;width:auto}
    .col-lg-1{flex:0 0 auto;width:8.33333333%}
    .col-lg-2{flex:0 0 auto;width:16.66666667%}
    .col-lg-3{flex:0 0 auto;width:25%}
    .col-lg-4{flex:0 0 auto;width:33.33333333%}
    .col-lg-5{flex:0 0 auto;width:41.66666667%}
    .col-lg-6{flex:0 0 auto;width:50%}
    .col-lg-7{flex:0 0 auto;width:58.33333333%}
    .col-lg-8{flex:0 0 auto;width:66.66666667%}
    .col-lg-9{flex:0 0 auto;width:75%}
    .col-lg-10{flex:0 0 auto;width:83.33333333%}
    .col-lg-11{flex:0 0 auto;width:91.66666667%}
    .col-lg-12{flex:0 0 auto;width:100%}
}
@media (min-width: 1200px) {
    .col-xl{flex:1 0 0}
    .col-xl-auto{flex:0 0 auto;width:auto}
    .col-xl-1{flex:0 0 auto;width:8.33333333%}
    .col-xl-2{flex:0 0 auto;width:16.66666667%}
    .col-xl-3{flex:0 0 auto;width:25%}
    .col-xl-4{flex:0 0 auto;width:33.33333333%}
    .col-xl-5{flex:0 0 auto;width:41.66666667%}
    .col-xl-6{flex:0 0 auto;width:50%}
    .col-xl-7{flex:0 0 auto;width:58.33333333%}
    .col-xl-8{flex:0 0 auto;width:66.66666667%}
    .col-xl-9{flex:0 0 auto;width:75%}
    .col-xl-10{flex:0 0 auto;width:83.33333333%}
    .col-xl-11{flex:0 0 auto;width:91.66666667%}
    .col-xl-12{flex:0 0 auto;width:100%}
}
@media (min-width: 1400px) {
    .col-xxl{flex:1 0 0}
    .col-xxl-auto{flex:0 0 auto;width:auto}
    .col-xxl-1{flex:0 0 auto;width:8.33333333%}
    .col-xxl-2{flex:0 0 auto;width:16.66666667%}
    .col-xxl-3{flex:0 0 auto;width:25%}
    .col-xxl-4{flex:0 0 auto;width:33.33333333%}
    .col-xxl-5{flex:0 0 auto;width:41.66666667%}
    .col-xxl-6{flex:0 0 auto;width:50%}
    .col-xxl-7{flex:0 0 auto;width:58.33333333%}
    .col-xxl-8{flex:0 0 auto;width:66.66666667%}
    .col-xxl-9{flex:0 0 auto;width:75%}
    .col-xxl-10{flex:0 0 auto;width:83.33333333%}
    .col-xxl-11{flex:0 0 auto;width:91.66666667%}
    .col-xxl-12{flex:0 0 auto;width:100%}
}

@media (min-width: 576px) {
    .col-sm-offset-0 { margin-left: 0; }
    .col-sm-offset-1 { margin-left: 8.3333333%; }
    .col-sm-offset-2 { margin-left: 16.666667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.333333%; }
    .col-sm-offset-5 { margin-left: 41.666667%; }
    .col-sm-offset-6 { margin-left: 50%; }
    .col-sm-offset-7 { margin-left: 58.333333%; }
    .col-sm-offset-8 { margin-left: 66.666667%; }
    .col-sm-offset-9 { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.333333%; }
    .col-sm-offset-11 { margin-left: 91.666667%; }
}
@media (min-width: 768px) {
    .col-md-offset-0 { margin-left: 0; }
    .col-md-offset-1 { margin-left: 8.3333333%; }
    .col-md-offset-2 { margin-left: 16.666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.333333%; }
    .col-md-offset-5 { margin-left: 41.666667%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-7 { margin-left: 58.333333%; }
    .col-md-offset-8 { margin-left: 66.666667%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.333333%; }
    .col-md-offset-11 { margin-left: 91.666667%; }
}
@media (min-width: 992px) {
    .col-lg-offset-0 { margin-left: 0; }
    .col-lg-offset-1 { margin-left: 8.3333333%; }
    .col-lg-offset-2 { margin-left: 16.666667%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-4 { margin-left: 33.333333%; }
    .col-lg-offset-5 { margin-left: 41.666667%; }
    .col-lg-offset-6 { margin-left: 50%; }
    .col-lg-offset-7 { margin-left: 58.333333%; }
    .col-lg-offset-8 { margin-left: 66.666667%; }
    .col-lg-offset-9 { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.333333%; }
    .col-lg-offset-11 { margin-left: 91.666667%; }
}

/* ---- Helpers / utilities -------------------------------------------------- */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.pull-left  { float: left !important; }
.pull-right { float: right !important; }

.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }

.hidden { display: none !important; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* hidden-* (BS3 breakpoints) */
@media (max-width: 767.98px)                        { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px)                           { .hidden-lg { display: none !important; } }

/* ---- Content -------------------------------------------------------------- */

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

blockquote p:last-child {
    margin-bottom: 0;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

.table-condensed > :not(caption) > * > * {
    padding: 5px;
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive-4by3  { padding-bottom: 75%; }

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}