/* ==========================================================================
   kids_gallagher - 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).

   While this file is loaded, col-sm/md/lg-* use the BS3 breakpoints
   (768 / 992 / 1200) so existing page content lays out exactly as before.
   ========================================================================== */

/* ---- 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;
}

/* BS5 only pads/sizes columns inside .row - do the same for BS3 .form-horizontal rows.
   Zero specificity, so the real .col-sm-* widths still apply from their breakpoint up. */
:where(.form-horizontal .form-group) > :where([class*="col-"]) {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.form-horizontal .form-group > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.form-horizontal .form-group > .control-label {
    align-self: flex-start;
}


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

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}

.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 ----------------------------------------------------------------- */
/* This site's page content was written for Bootstrap 3, so while this file is
   loaded the grid uses BS3 breakpoints:
       col-xs-*  always   col-sm-*  >= 768px   col-md-*  >= 992px   col-lg-*  >= 1200px
   (BS5 on its own would switch col-sm at 576, col-md at 768, col-lg at 992.)
   col-xl-* / col-xxl-* and BS5's offset-* classes are left as Bootstrap 5 defines them. */

/* 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;
}

/* BS3 floated columns were only as tall as their content; BS5 flex rows stretch
   every column to the tallest one. Keep BS3 behaviour (align-items-* utilities still override). */
.row {
    align-items: flex-start;
}

/* 1. Undo BS5's earlier switch points: below the BS3 breakpoint a column is full width */
@media (min-width: 576px) and (max-width: 767.98px) {
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 2. col-xs-* at every width */
.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%; }

/* 3. col-sm / md / lg at the BS3 breakpoints (later = wins, as in BS3) */
@media (min-width: 768px) {
    .col-sm-1 { flex: 0 0 auto; width: 8.3333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
    .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: 992px) {
    .col-md-1 { flex: 0 0 auto; width: 8.3333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
    .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: 1200px) {
    .col-lg-1 { flex: 0 0 auto; width: 8.3333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .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%; }
}

/* BS5-only xl / xxl classes keep working on top of the above */
@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%}
}

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

/* BS3 made file inputs block-level */
input[type="file"] {
    display: block;
}

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


.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;
}