:root {
    --row-gap: 0;
}

.list-unstyled {list-style: none}

.fw900 {font-weight: 900;}
.fw700 {font-weight: 700}
.text-right {text-align: right}
.text-center {text-align: center}
.text-white {color: var(--cls-white)}
.text-blue {color: var(--cls-heading-blue)}

.margin-center {margin: 0 auto}

.d-flex {display: flex}
.justify-between {justify-content: space-between}
.justify-end {justify-content: flex-end}
.justify-center {justify-content: center}
.align-center {align-items: center}
.align-top {align-items: flex-start}
.align-bottom {align-items: flex-end}

.pos-relative {position: relative;}
.pos-absolute {position: absolute}
.pos-static {position: static}
.top-right {top: 0; right: 0;}
.bottom-right {bottom: 0; right: 0;}
.bottom-left {bottom: 0; left: 0;}

.trans-y-100 {transform: translateY(100%)}

.p0 {padding: 0;}
.px0 {padding-left: 0;padding-right: 0;}
.py0 {padding-top: 0;padding-bottom: 0;}
.pt0 {padding-top: 0}
.pb0 {padding-bottom: 0}
.pl0 {padding-left: 0}
.pr0 {padding-right: 0}

.p10 {padding: 10px;}
.px10 {padding-left: 10px;padding-right: 10px;}
.py10 {padding-top: 10px;padding-bottom: 10px;}
.pt10 {padding-top: 10px}
.pb10 {padding-bottom: 10px}
.pl10 {padding-left: 10px}
.pr10 {padding-right: 10px}

.p15 {padding: 15px;}
.px15 {padding-left: 15px;padding-right: 15px;}
.py15 {padding-top: 15px;padding-bottom: 15px;}
.pt15 {padding-top: 15px}
.pb15 {padding-bottom: 15px}
.pl15 {padding-left: 15px}
.pr15 {padding-right: 15px}

.p20 {padding: 2rem;}
.px20 {padding-left: 2rem;padding-right: 2rem;}
.py20 {padding-top: 2rem;padding-bottom: 2rem;}
.pt20 {padding-top: 2rem}
.pb20 {padding-bottom: 2rem}
.pl20 {padding-left: 2rem}
.pr20 {padding-right: 2rem}

.p30 {padding: 30px;}
.px30 {padding-left: 30px;padding-right: 30px;}
.py30 {padding-top: 30px;padding-bottom: 30px;}
.pt30 {padding-top: 30px}
.pb30 {padding-bottom: 30px}
.pl30 {padding-left: 30px}
.pr30 {padding-right: 30px}

.p40 {padding: 40px;}
.px40 {padding-left: 40px;padding-right: 40px;}
.py40 {padding-top: 40px;padding-bottom: 40px;}
.pt40 {padding-top: 40px}
.pb40 {padding-bottom: 40px}
.pl40 {padding-left: 40px}
.pr40 {padding-right: 40px}

.m10 {margin: 10px;}
.mt10 {margin-top: 10px}
.mb10 {margin-bottom: 10px}
.ml10 {margin-left: 10px}
.mr10 {margin-right: 10px}
.m15 {margin: 15px;}
.mt15 {margin-top: 15px}
.mb15 {margin-bottom: 15px}
.ml15 {margin-left: 15px}
.mr15 {margin-right: 15px}
.m20 {margin: 2rem;}
.mt20 {margin-top: 2rem}
.mb20 {margin-bottom: 2rem}
.ml20 {margin-left: 2rem}
.mr20 {margin-right: 2rem}

.gap5 {gap: 5px}
.gap10 {gap: 10px}
.gap15 {gap: 15px}
.gap20 {gap: 2rem}

.row {
    --row-gap: 1rem;
    display: flex;
    margin: 0 auto;
    gap: var(--row-gap);
}

@media screen and (max-width: 600px) {.row.split-from-600 {display: block}}
@media screen and (max-width: 700px) {.row.split-from-700 {display: block}}
@media screen and (max-width: 800px) {.row.split-from-800 {display: block}}
@media screen and (max-width: 900px) {.row.split-from-900 {display: block}}
@media screen and (max-width: 992px) {.row.split-from-992 {display: block}}
@media screen and (max-width: 1000px) {.row.split-from-1000 {display: block}}


@media screen and (min-width: 576px) {
    .ov-mob-gap2 {
        gap: 2rem;
        --row-gap: 2rem;
    }
    .ov-mob-gap3 {
        gap: 3rem;
        --row-gap: 3rem;
    }

    .ov-mob-mw20p {max-width: 20%}
    .ov-mob-mw25p {max-width: 25%}
    .ov-mob-mw30p {max-width: 30%}
    .ov-mob-mw33p {max-width: 33.3333%}
    .ov-mob-mw40p {max-width: 40%}
    .ov-mob-mw45p {max-width: 45%}
    .ov-mob-mw50p {max-width: 50%}
    .ov-mob-mw55p {max-width: 55%}
    .ov-mob-mw60p {max-width: 60%}
    .ov-mob-mw65p {max-width: 65%}
    .ov-mob-mw70p {max-width: 70%}
    .ov-mob-mw75p {max-width: 75%}
    .ov-mob-mw80p {max-width: 80%}
    .ov-mob-mw85p {max-width: 85%}
    .ov-mob-mw90p {max-width: 90%}
    .ov-mob-mw95p {max-width: 95%}
    .ov-mob-mw100p {max-width: 100%}

    .ov-mob-m10 {margin: 10px;}
    .ov-mob-mt10 {margin-top: 10px}
    .ov-mob-mb10 {margin-bottom: 10px}
    .ov-mob-ml10 {margin-left: 10px}
    .ov-mob-mr10 {margin-right: 10px}
    .ov-mob-m15 {margin: 15px;}
    .ov-mob-mt15 {margin-top: 15px}
    .ov-mob-mb15 {margin-bottom: 15px}
    .ov-mob-ml15 {margin-left: 15px}
    .ov-mob-mr15 {margin-right: 15px}
    .ov-mob-m20 {margin: 2rem;}
    .ov-mob-mt20 {margin-top: 2rem}
    .ov-mob-mb20 {margin-bottom: 2rem}
    .ov-mob-ml20 {margin-left: 2rem}
    .ov-mob-mr20 {margin-right: 2rem}
}
@media screen and (min-width: 992px) {
    .ov-tab-gap2 {
        gap: 2rem;
        --row-gap: 2rem;
    }
    .ov-tab-gap3 {
        gap: 3rem;
        --row-gap: 3rem;
    }

    .ov-tab-mw20p {max-width: 20%}
    .ov-tab-mw25p {max-width: 25%}
    .ov-tab-mw30p {max-width: 30%}
    .ov-tab-mw33p {max-width: 33.3333%}
    .ov-tab-mw40p {max-width: 40%}
    .ov-tab-mw45p {max-width: 45%}
    .ov-tab-mw50p {max-width: 50%}
    .ov-tab-mw55p {max-width: 55%}
    .ov-tab-mw60p {max-width: 60%}
    .ov-tab-mw65p {max-width: 65%}
    .ov-tab-mw70p {max-width: 70%}
    .ov-tab-mw75p {max-width: 75%}
    .ov-tab-mw80p {max-width: 80%}
    .ov-tab-mw85p {max-width: 85%}
    .ov-tab-mw90p {max-width: 90%}
    .ov-tab-mw95p {max-width: 95%}
    .ov-tab-mw100p {max-width: 100%}

    .ov-tab-m10 {margin: 10px;}
    .ov-tab-mt10 {margin-top: 10px}
    .ov-tab-mb10 {margin-bottom: 10px}
    .ov-tab-ml10 {margin-left: 10px}
    .ov-tab-mr10 {margin-right: 10px}
    .ov-tab-m15 {margin: 15px;}
    .ov-tab-mt15 {margin-top: 15px}
    .ov-tab-mb15 {margin-bottom: 15px}
    .ov-tab-ml15 {margin-left: 15px}
    .ov-tab-mr15 {margin-right: 15px}
    .ov-tab-m20 {margin: 2rem;}
    .ov-tab-mt20 {margin-top: 2rem}
    .ov-tab-mb20 {margin-bottom: 2rem}
    .ov-tab-ml20 {margin-left: 2rem}
    .ov-tab-mr20 {margin-right: 2rem}
}

@media screen and (max-width: 992px) {
    .row.un-tab-2cols .col {
        max-width: 50%;
    }

    .un-tab-gap2 {gap: 2rem}
    .un-tab-gap3 {gap: 3rem}

    .un-tab-mw20p {max-width: 20%}
    .un-tab-mw25p {max-width: 25%}
    .un-tab-mw30p {max-width: 30%}
    .un-tab-mw33p {max-width: 33.3333%}
    .un-tab-mw40p {max-width: 40%}
    .un-tab-mw45p {max-width: 45%}
    .un-tab-mw50p {max-width: 50%}
    .un-tab-mw55p {max-width: 55%}
    .un-tab-mw60p {max-width: 60%}
    .un-tab-mw65p {max-width: 65%}
    .un-tab-mw70p {max-width: 70%}
    .un-tab-mw75p {max-width: 75%}
    .un-tab-mw80p {max-width: 80%}
    .un-tab-mw85p {max-width: 85%}
    .un-tab-mw90p {max-width: 90%}
    .un-tab-mw95p {max-width: 95%}
    .un-tab-mw100p {max-width: 100%}

    .un-tab-m10 {margin: 1rem;}
    .un-tab-mt10 {margin-top: 1rem}
    .un-tab-mb10 {margin-bottom: 1rem}
    .un-tab-ml10 {margin-left: 1rem}
    .un-tab-mr10 {margin-right: 1rem}
    .un-tab-m15 {margin: 1.5rem;}
    .un-tab-mt15 {margin-top: 1.5rem}
    .un-tab-mb15 {margin-bottom: 1.5rem}
    .un-tab-ml15 {margin-left: 1.5rem}
    .un-tab-mr15 {margin-right: 1.5rem}
    .un-tab-m20 {margin: 2rem;}
    .un-tab-mt20 {margin-top: 2rem}
    .un-tab-mb20 {margin-bottom: 2rem}
    .un-tab-ml20 {margin-left: 2rem}
    .un-tab-mr20 {margin-right: 2rem}
}

.col {
    flex: 1 1 auto;
}

.row.cols-3 .col {
    width: 33%;
}

.mw20p {max-width: 20%}
.mw25p {max-width: 25%}
.mw30p {max-width: 30%}
.mw33p {max-width: 33.3333%}
.mw40p {max-width: 40%}
.mw45p {max-width: 45%}
.mw50p {max-width: 50%}
.mw55p {max-width: 55%}
.mw60p {max-width: 60%}
.mw65p {max-width: 65%}
.mw70p {max-width: 70%}
.mw75p {max-width: 75%}
.mw80p {max-width: 80%}
.mw85p {max-width: 85%}
.mw90p {max-width: 90%}
.mw95p {max-width: 95%}
.mw100p {max-width: 100%}

.round-100p {border-radius: 100%}

/* For debugging
----------------------*/
.debugbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 99999;
    border: 1px solid gray;
    padding: 5px;
    box-shadow: 0 0 10px black;
}
#debugbar {list-style: none}
#debugbar li {
    display: inline-block;
    margin: 2px;
}
#debugbar button {
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
}

#debugbar .active,
#debugbar button:hover {
    background-color: lightgreen;
    color: black;
}
.debug {
    border: 1px solid red;
}
body.debug * {border: 1px solid red;}
body.debug-section section {border: 1px solid blue;}
body.debug-row .row {border: 1px solid green;}
body.debug-col .col {border: 1px solid black;}
body.debug-p p {border: 1px solid red;}
body.debug-layout section {border: 1px solid blue;}
body.debug-layout .row {border: 1px solid green;}
body.debug-layout .col {border: 1px solid black;}
body.debug-heading h1,
body.debug-heading h2,
body.debug-heading h3,
body.debug-heading h4,
body.debug-heading h5,
body.debug-heading h6 {border: 1px solid black;}
body.debug-img img {border: 1px solid red;}

@media screen and (max-width: 576px) {
    .hide-on-mobile {display: none}
}