/*********************************************************************************
Bootstrap 5 -> Bootstrap 3 compatibility shim.

The site now ships the ZYVINTRA demo theme, which is built on Bootstrap 3.3.7.
A number of inner pages (member area, policies, KYC, reports) were written
against Bootstrap 5 utility classes that simply do not exist in Bootstrap 3.
This file re-implements the ones those pages actually use, so nothing collapses.

Loaded AFTER bootstrap.min.css and BEFORE layout.css, so the demo theme always
wins where the two overlap.
***************/

/* ---------- grid: BS5 all-breakpoint columns (BS3 only has col-xs-*) ------- */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.col-1  { width: 8.33333333%; }
.col-2  { width: 16.66666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.33333333%; }
.col-5  { width: 41.66666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.33333333%; }
.col-8  { width: 66.66666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }
.col    { width: auto; float: none; }

/* row gutters */
.g-0, .gx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.g-0 > [class*="col"], .gx-0 > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
.g-1 > [class*="col"] { padding: 4px; }
.g-2 > [class*="col"] { padding: 6px; }
.g-3 > [class*="col"] { padding: 8px; }
.g-4 > [class*="col"] { padding: 12px; }
.g-5 > [class*="col"], .gx-5 > [class*="col"] { padding: 16px; }

/* row-cols-* */
.row-cols-1 > * { float: left; width: 100%; }
.row-cols-2 > * { float: left; width: 50%; }
.row-cols-3 > * { float: left; width: 33.33333333%; }
.row-cols-4 > * { float: left; width: 25%; }
@media (min-width: 768px) {
    .row-cols-md-1 > * { width: 100%; }
    .row-cols-md-2 > * { width: 50%; }
    .row-cols-md-3 > * { width: 33.33333333%; }
}
@media (min-width: 992px) {
    .row-cols-lg-1 > * { width: 100%; }
    .row-cols-lg-2 > * { width: 50%; }
    .row-cols-lg-3 > * { width: 33.33333333%; }
    .row-cols-lg-4 > * { width: 25%; }
}
@media (min-width: 1200px) {
    .row-cols-xl-1 > * { width: 100%; }
    .row-cols-xl-2 > * { width: 50%; }
    .row-cols-xl-3 > * { width: 33.33333333%; }
    .row-cols-xl-4 > * { width: 25%; }
}

/* ---------- spacing (BS5 scale: 0/.25/.5/1/1.5/3 rem) --------------------- */
.m-0 { margin: 0 !important; }        .p-0 { padding: 0 !important; }
.m-1 { margin: .25rem !important; }   .p-1 { padding: .25rem !important; }
.m-2 { margin: .5rem !important; }    .p-2 { padding: .5rem !important; }
.m-3 { margin: 1rem !important; }     .p-3 { padding: 1rem !important; }
.m-4 { margin: 1.5rem !important; }   .p-4 { padding: 1.5rem !important; }
.m-5 { margin: 3rem !important; }     .p-5 { padding: 3rem !important; }

.mt-0 { margin-top: 0 !important; }        .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; }   .mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }    .mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }     .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }   .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }     .mb-5 { margin-bottom: 3rem !important; }
.mt-auto { margin-top: auto !important; }  .mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }       .me-0 { margin-right: 0 !important; }
.ms-1 { margin-left: .25rem !important; }  .me-1 { margin-right: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }   .me-2 { margin-right: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }    .me-3 { margin-right: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }  .me-4 { margin-right: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }    .me-5 { margin-right: 3rem !important; }
.ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.pt-0 { padding-top: 0 !important; }       .pb-0 { padding-bottom: 0 !important; }
.pt-1 { padding-top: .25rem !important; }  .pb-1 { padding-bottom: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }   .pb-2 { padding-bottom: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }    .pb-3 { padding-bottom: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }  .pb-4 { padding-bottom: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }    .pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }      .pe-0 { padding-right: 0 !important; }
.ps-1 { padding-left: .25rem !important; } .pe-1 { padding-right: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }  .pe-2 { padding-right: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }   .pe-3 { padding-right: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; } .pe-4 { padding-right: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }   .pe-5 { padding-right: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* responsive spacing variants actually used by the views */
@media (min-width: 768px) {
    .mt-md-0 { margin-top: 0 !important; }
    .pt-md-0 { padding-top: 0 !important; }
}
@media (min-width: 992px) {
    .mb-lg-0 { margin-bottom: 0 !important; }
    .mb-lg-9 { margin-bottom: 4rem !important; }
    .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
@media (min-width: 1200px) {
    .px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* legacy theme spacing left over from the old template */
.pt-70 { padding-top: 70px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pm-0  { padding: 0 !important; margin: 0 !important; }

/* ---------- display & flex ------------------------------------------------ */
.d-none          { display: none !important; }
.d-block         { display: block !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-grid          { display: block !important; }   /* BS5 d-grid + gap == stacked full-width buttons */
.d-grid > .btn   { display: block; width: 100%; }
.d-table         { display: table !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }
.flex-fill       { flex: 1 1 auto !important; }
.flex-shrink-0   { flex-shrink: 0 !important; }
.flex-grow-1     { flex-grow: 1 !important; }
@media (min-width: 768px) {
    .flex-md-row { flex-direction: row !important; }
}

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.align-items-start       { align-items: flex-start !important; }
.align-items-end         { align-items: flex-end !important; }
.align-items-center      { align-items: center !important; }
.align-items-baseline    { align-items: baseline !important; }
.align-self-center       { align-self: center !important; }

.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.order-lg-1 { order: 1; }
.order-lg-2 { order: 2; }

/* BS5 float utilities */
.float-start { float: left !important; }
.float-end   { float: right !important; }
.float-none  { float: none !important; }

/* ---------- typography ---------------------------------------------------- */
.fw-bold      { font-weight: 700 !important; }
.fw-semibold  { font-weight: 600 !important; }
.fw-normal    { font-weight: 400 !important; }
.fw-light     { font-weight: 300 !important; }
.fw-6         { font-weight: 600 !important; }

.text-start   { text-align: left !important; }
.text-end     { text-align: right !important; }
.text-center  { text-align: center !important; }
@media (min-width: 768px) { .text-md-end { text-align: right !important; } }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-nowrap, .nowrap { white-space: nowrap !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-decoration-none      { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.text-muted     { color: #6c757d !important; }
.text-white     { color: #fff !important; }
.text-black     { color: #000 !important; }
.text-dark, .text-darks { color: #212529 !important; }
.text-light     { color: #f8f9fa !important; }
.text-primary   { color: #0d6efd !important; }
.text-secondary { color: #6c757d !important; }
.text-success   { color: #1e7e34 !important; }
.text-danger    { color: #c0392b !important; }
.text-warning   { color: #eb6020 !important; }
.text-info      { color: #0dcaf0 !important; }
a.text-success:hover { color: #155724 !important; }

.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-small, .text-small, .f-s-4 { font-size: .875rem !important; }
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.2; }
.lh-sm   { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.small   { font-size: .875em; }

/* ---------- colours ------------------------------------------------------- */
.bg-white       { background-color: #fff !important; }
.bg-light       { background-color: #f7faff !important; }
.bg-dark        { background-color: #011a44 !important; }
.bg-transparent { background-color: transparent !important; }
.bg-body        { background-color: #fff !important; }
/* map the old template palette onto the ZYVINTRA theme (navy #01235b / gold #b19943) */
.bg-success   { background-color: #1e7e34 !important; }
.bg-danger    { background-color: #c0392b !important; }
.bg-warning   { background-color: #eb6020 !important; }
.bg-primary   { background-color: #01235b !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-grey      { background-color: #fff4e5 !important; }
.bg-111111    { background-color: #001333 !important; }
.bg-fa2837    { background: linear-gradient(90deg, #b19943 0%, #8b7938 90%) !important; }

/* ---------- borders, radius, shadow --------------------------------------- */
.border         { border: 1px solid #dee2e6 !important; }
.border-0       { border: 0 !important; }
.border-1       { border: 1px solid #dee2e6 !important; }
.border-top     { border-top: 1px solid #dee2e6 !important; }
.border-bottom  { border-bottom: 1px solid #dee2e6 !important; }
.border-start   { border-left: 1px solid #dee2e6 !important; }
.border-end     { border-right: 1px solid #dee2e6 !important; }
.border-secondary { border-color: #c9b47a !important; }
.border-success   { border-color: #1e7e34 !important; }

.rounded        { border-radius: .25rem !important; }
.rounded-0      { border-radius: 0 !important; }
.rounded-1      { border-radius: .2rem !important; }
.rounded-2      { border-radius: .25rem !important; }
.rounded-3      { border-radius: .3rem !important; }
.rounded-4      { border-radius: .5rem !important; }
.rounded-pill   { border-radius: 50rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-top-4  { border-top-left-radius: .5rem !important; border-top-right-radius: .5rem !important; }

.shadow      { box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important; }
.shadow-sm   { box-shadow: 0 .125rem .25rem rgba(0,0,0,.08) !important; }
.shadow-lg   { box-shadow: 0 1rem 3rem rgba(0,0,0,.14) !important; }
.shadow-none { box-shadow: none !important; }

/* ---------- sizing & position --------------------------------------------- */
.w-25  { width: 25% !important; }
.w-50  { width: 50% !important; }
.w-75  { width: 75% !important; }
.w-90  { width: 90% !important; }
.w-100 { width: 100% !important; }
.h-25  { height: 25% !important; }
.h-50  { height: 50% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.top-0     { top: 0 !important; }
.bottom-0  { bottom: 0 !important; }
.start-0   { left: 0 !important; }
.end-0, .right-0 { right: 0 !important; }
.start-100 { left: 100% !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* BS5 renamed .img-responsive to .img-fluid */
.img-fluid { max-width: 100%; height: auto; }

.stretched-link::after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    content: "";
}

/* ---------- forms --------------------------------------------------------- */
.form-label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 600;
}
.form-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: inherit;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
}
.form-select-sm { padding: 4px 26px 4px 8px; font-size: .875em; }
.form-control-sm { padding: 4px 8px; font-size: .875em; height: auto; }
.form-text { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }

.form-check { position: relative; display: block; padding-left: 1.6em; margin-bottom: .125rem; }
.form-check .form-check-input { float: left; margin-left: -1.6em; margin-top: .3em; }
.form-check-inline { display: inline-block; margin-right: 1rem; }
.form-check-label { margin-bottom: 0; font-weight: 400; }
.input-group-text {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #eee;
    border: 1px solid #ccc;
}
.input-group { display: flex; }
.input-group > .form-control,
.input-group > .form-select { flex: 1 1 auto; width: 1%; }

/* ---------- components ---------------------------------------------------- */
.card {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #eddcc8;
    border-radius: .35rem;
    margin-bottom: 0;
}
.card-body   { padding: 1rem; }
.card-header {
    padding: .75rem 1rem;
    background: linear-gradient(45deg, #fff4e5, #f7faff);
    color: #01235b;
    border-bottom: 1px solid #eddcc8;
    border-radius: .35rem .35rem 0 0;
}
.card-footer {
    padding: .75rem 1rem;
    background: linear-gradient(45deg, #fff4e5, #f7faff);
    border-top: 1px solid #eddcc8;
}
.card-title { margin-bottom: .5rem; }
.card-text  { margin-bottom: 0 !important; }
.card-img-top { width: 100%; border-radius: .35rem .35rem 0 0; }

.badge {
    display: inline-block;
    padding: .35em .6em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    background-color: #6c757d;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
    border: 0;
    opacity: .5;
    cursor: pointer;
}
.btn-close:hover { opacity: .9; }

.spinner-border {
    display: inline-block;
    width: 2rem; height: 2rem;
    vertical-align: -.125em;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: bs-spin .75s linear infinite;
    animation: bs-spin .75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
.spinner-grow {
    display: inline-block;
    width: 2rem; height: 2rem;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: bs-grow .75s linear infinite;
    animation: bs-grow .75s linear infinite;
}
.spinner-grow-sm { width: 1rem; height: 1rem; }
@-webkit-keyframes bs-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@-webkit-keyframes bs-grow { 0% { -webkit-transform: scale(0); } 50% { opacity: 1; -webkit-transform: none; } }
@keyframes bs-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } }

/* tables - BS5 names on top of the BS3 table */
.table-light > :not(caption) > * > *,
.table-light th,
.table-light td { background-color: #fff4e5; }
.table > :not(caption) > * > * { padding: 8px; }
.align-middle { vertical-align: middle !important; }

/* buttons - map the old template's contextual buttons onto the theme palette */
.btn-success  { background: #1e7e34 !important; color: #fff !important; }
.btn-primary  { background: #01235b !important; color: #fff !important; }
.btn-dark     { background: #011a44 !important; color: #fff !important; }
.btn-danger   { background: #c0392b !important; color: #fff !important; }
.btn-secondary{ background: #6c757d !important; color: #fff !important; }
.btn-light    { background: #f1f1f1 !important; color: #333 !important; }
.btn-warning  { background: #eb6020 !important; color: #fff !important; }
.btn-outline-dark    { background: #fff !important; color: #333 !important; border: 1px solid #333 !important; }
.btn-outline-primary { background: #fff !important; color: #01235b !important; border: 1px solid #01235b !important; }
.btn-outline-success { background: #fff !important; color: #1e7e34 !important; border: 1px solid #1e7e34 !important; }
.btn-outline-secondary { background: #fff !important; color: #666 !important; border: 1px solid #ccc !important; }
.btn-sm { padding: 5px 12px !important; font-size: .875em; }
.btn-lg { padding: 12px 30px !important; font-size: 1.1em; }
.btn-rounded { border-radius: 50rem !important; }

/* the old template's empty green offer strip has no place in the new design */
.mini-banner { display: none !important; }

/* legacy template blocks that would otherwise inherit odd colours */
.top-header-area { display: none !important; }