/* ========================== HTML ELEMENTS ========================== */

/* ------------------- lists -------------------- */

ol.list-items-spaced, ul.list-items-spaced {
    margin-bottom: 1.5em;
}
    ol.list-items-spaced li, ul.list-items-spaced li {
        margin-bottom: 0.5em;
    }

ol.list-items-double-spaced, ul.list-items-double-spaced {
    margin-bottom: 1.5em;
}

    ol.list-items-double-spaced li, ul.list-items-double-spaced li {
        margin-bottom: 1em;
    }

ol.list-spaced li:last-of-type, ul.list-spaced li:last-of-type {
    margin-bottom: 1em;
}



ol.list-items-condensed, ul.list-items-condensed {
    margin-bottom: 0 !important;
}

    ol.list-items-condensed li, ul.list-items-condensed li {
        margin-bottom: 0 !important;
    }

/* ==================== COMMON DECORATION CLASSES ==================== */

/* ------------------- font-size -------------------- */

.font-size-0_75 {
    font-size: 0.75em;
}

.font-size-1 {
    font-size: 1em !important;
}

.font-size-1_1 {
    font-size: 1.1em !important;
}

.font-size-1_15 {
    font-size: 1.15em !important;
}

.font-size-1_2 {
    font-size: 1.2em;
}

.font-size-1_25 {
    font-size: 1.25em;
}

.font-size-1_33 {
    font-size: 1.333em;
}

.font-size-1_5 {
    font-size: 1.5em;
}

.font-size-2 {
    font-size: 2em;
}

.font-size-2_5 {
    font-size: 2.5em;
}

/* --------------------- overflow --------------------- */

.overflow-wrap-break-word {
    overflow-wrap: break-word;
}

/* --------------------- widths --------------------- */
.width-5-pct {
    width: 5%;
}

.width-10-pct {
    width: 10%;
}

.width-12_5-pct {
    width: 12.5%;
}

.width-15-pct {
    width: 15%;
}

.width-20-pct {
    width: 20%;
}

.width-25-pct {
    width: 25%;
}

.width-30-pct {
    width: 30%;
}

.width-33-pct {
    width: 33.33%;
}

.width-35-pct {
    width: 35%;
}

.width-40-pct {
    width: 40%;
}

.width-45-pct {
    width: 45%;
}

.width-50-pct {
    width: 50%;
}

.width-60-pct {
    width: 60%;
}

.width-70-pct {
    width: 70%;
}

.width-75-pct {
    width: 75%;
}

.width-100-pct {
    width: 100%;
}

/* --------------------- widths: MOBILE --------------------- */
@media screen and (max-width: 767px) {
    
    .width-5-pct-mobile {
        width: 5%;
    }

    .width-10-pct-mobile {
        width: 10%;
    }

    .width-12_5-pct-mobile {
        width: 12.5%;
    }

    .width-15-pct-mobile {
        width: 15%;
    }

    .width-20-pct-mobile {
        width: 20%;
    }

    .width-25-pct-mobile {
        width: 25%;
    }

    .width-30-pct-mobile {
        width: 30%;
    }

    .width-33-pct-mobile {
        width: 33.33%;
    }

    .width-35-pct-mobile {
        width: 35%;
    }

    .width-40-pct-mobile {
        width: 40%;
    }

    .width-45-pct-mobile {
        width: 45%;
    }

    .width-50-pct-mobile {
        width: 50%;
    }

    .width-60-pct-mobile {
        width: 60%;
    }

    .width-70-pct-mobile {
        width: 70%;
    }

    .width-75-pct-mobile {
        width: 75%;
    }

    .width-100-pct-mobile {
        width: 100%;
    }
}


/* --------------------- max-widths --------------------- */
.max-width-5-pct {
    max-width: 5%;
}

.max-width-10-pct {
    max-width: 10%;
}

.max-width-12_5-pct {
    max-width: 12.5%;
}

.max-width-15-pct {
    max-width: 15%;
}

.max-width-20-pct {
    max-width: 20%;
}

.max-width-25-pct {
    max-width: 25%;
}

.max-width-30-pct {
    max-width: 30%;
}

.max-width-33-pct {
    max-width: 33.33%;
}

.max-width-35-pct {
    max-width: 35%;
}

.max-width-40-pct {
    max-width: 40%;
}

.max-width-45-pct {
    max-width: 45%;
}

.max-width-50-pct {
    max-width: 50%;
}

.max-width-60-pct {
    max-width: 60%;
}

.max-width-65-pct {
    max-width: 65%;
}

.max-width-70-pct {
    max-width: 70%;
}

.max-width-75-pct {
    max-width: 75%;
}


/* --------------------- max-widths: MOBILE --------------------- */


@media screen and (max-width: 767px) {
    .max-width-100-pct-mobile {
        max-width: 100%;
    }
}


/* --------------------- border --------------------- */

.border-top-1 {
    border-top: 1px solid #ccc !important;
}

.border-color-lightgrey-on-focus:focus {
    border-color: #ccc !important;
}

.border-color-lightgrey {
    border-color: #ccc !important;
}

.border-color-red-soft {
    border-color: #E44B4B !important;
}

.border-color-red-soft-on-focus:focus {
    border-color: #E44B4B !important;
}

.no-border {
    border: none !important;
}

.no-border-left {
    border-left: none !important;
}

.no-border-right {
    border-right: none !important;
}



/* --------------------- colors --------------------- */

.green {
    color: rgb(92, 184, 92) !important;
}

.color-red-soft {
    color: #E44B4B !important;
}

.color-very-dark-grey {
    color: #666 !important;
}

.color-dark-blue {
    color: #3B5B8F !important;
}

.white {
    color: white !important;
}

.darkgrey {
    color: darkgrey !important;
}

.light-blue {
    color: #248cc8;
}

/* --------------------- shadow --------------------- */

.box-shadow-black-on-hover:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.no-box-shadow {
    box-shadow: none !important;
}

/* --------------------- margins --------------------- */

.margin-auto {
    margin: auto !important;
}

.margin-top-0 {
    margin-top: 0 !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 10px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-25 {
    margin-top: 25px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-top-40 {
    margin-top: 40px !important;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-top-60 {
    margin-top: 60px !important;
}

.margin-bottom-1em {
    margin-bottom: 1em !important;
}

.margin-bottom-2em {
    margin-bottom: 2em !important;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

.margin-bottom-60 {
    margin-bottom: 60px !important;
}

.margin-left-auto {
    margin-left: auto !important;
}

.margin-left-0 {
    margin-left: 0 !important;
}

.margin-left-1em {
    margin-left: 1em !important;
}

.margin-top-1em {
    margin-top: 1em !important;
}

.margin-right-auto {
    margin-right: auto;
}

.margin-right-1em {
    margin-right: 1em !important;
}

.margin-right-0 {
    margin-right: 0;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-left {
    margin-top: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}


/* -------------------------- padding ------------------------- */

.no-padding {
    padding: 0 !important;
}

.padding-0_5rem {
    padding-top: 0.5rem;
}

.padding-1rem {
    padding-top: 1rem;
}

.padding-top-1em {
    padding-top: 1em;
}

.padding-top-2em {
    padding-top: 2em;
}

.padding-top-3em {
    padding-top: 3em;
}

.padding-top-4em {
    padding-top: 4em;
}

.padding-left-1em {
    padding-left: 1em;
}

.padding-left-2em {
    padding-left: 2em;
}


/* -------------------------- cursors ------------------------- */

.cursor-pointer {
    cursor: pointer;
}


/* ----------------------- line heights ----------------------- */

.line-height-1_0 {
     line-height: 1.0;
}

.line-height-1_1 {
    line-height: 1.1;
}

.line-height-1_2 {
    line-height: 1.2;
}

.line-height-1_3 {
    line-height: 1.3;
}

.line-height-1_4 {
    line-height: 1.4;
}

.line-height-1_5 {
    line-height: 1.5;
}

.line-height-1_6 {
    line-height: 1.6;
}

.line-height-2_0 {
    line-height: 2.0;
}

/* --------------------------- flex --------------------------- */
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-basis-fit-content {
    flex-basis: fit-content;
}

.flex-basis-0 {
    flex-basis: 0;
}

.flex-basis-5pct {
    flex-basis: 5%;
}

.flex-basis-7pct {
    flex-basis: 7%;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

.flex-grow-4 {
    flex-grow: 4;
}

.flex-grow-5 {
    flex-grow: 5;
}

.flex-grow-6 {
    flex-grow: 6;
}

.flex-grow-7 {
    flex-grow: 7;
}

.flex-grow-8 {
    flex-grow: 8;
}

.flex-grow-9 {
    flex-grow: 9;
}


/* --------------------------- grid --------------------------- */
.grid {
    display: grid;
}

.grid-columns-repeat-260px {
    grid-template-columns: repeat(auto-fill, minmax(260px, max-content));
}


/* --------------------------- gap --------------------------- */
.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-05pct {
    gap: 0.5%;
}

.gap-1pct {
    gap: 1%;
}

.gap-2pct {
    gap: 2%;
}

.gap-1em {
    gap: 1em;
}

.gap-2em {
    gap: 2em;
}

.column-gap-1em {
    column-gap: 1em;
}

.column-gap-2em {
    column-gap: 2em;
}

.column-gap-3em {
    column-gap: 3em;
}

.column-gap-4em {
    column-gap: 4em;
}

.column-gap-1rem {
    column-gap: 1rem;
}

.column-gap-2rem {
    column-gap: 2rem;
}

.column-gap-3rem {
    column-gap: 3rem;
}

.column-gap-4rem {
    column-gap: 4rem;
}

.row-gap-1em {
    row-gap: 1em;
}

.row-gap-2em {
    row-gap: 2em;
}

.row-gap-1rem {
    row-gap: 1rem;
}

.row-gap-1_5rem {
    row-gap: 1.5rem;
}

.row-gap-2rem {
    row-gap: 2rem;
}

.row-gap-2em {
    row-gap: 2rem;
}

.row-gap-3rem {
    row-gap: 3rem;
}

.row-gap-4em {
    row-gap: 4rem;
}

/* ------------ content justification / alignment ---------------- */
.justify-content-center {
    justify-content: center;
}

.justify-content-space-between {
    justify-content: space-between;
}

.align-items {
    align-items: center;
}

/* --------------------- other & other beasts--------------------- */
stress {
    text-decoration: underline;
}

.no-background {
    background: none;
}

.underline {
    text-decoration: underline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.visible-by-bots-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.float-right {
    float: right;
    clear: both;
}

.float-left {
    float: left;
    clear: both;
}

.text-decoration-none {
    text-decoration: none !important;
}

:hover.text-decoration-none-on-hover {
    text-decoration: none !important;
}

.outline-none {
    outline: none;
}

.outline-none-on-focus:focus {
    outline: none;
}

.column-count-2 {
    column-count: 2;
}

.column-count-3 {
    column-count: 3;
}

.column-count-4 {
    column-count: 4;
}

.list-style-none {
    list-style: none !important;
}

/* --------------------- bootstrap "extensions" ---------------------- */

@media (min-width: 992px) {
    .col-lg-20-pct {
        width: 20%;
    }
}

/* =================================== COMPONENTS =================================== */

.badge-grey {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2em;
    background-color: #e9ecef;
    color: #555;
    border-radius: 4px;
    margin-right: 0.1em;
    vertical-align: top;
}

/* =================================== IMG ======================================= */

.img-content-fit {
    object-fit: contain;
    object-position: center;
}

/* =================================== BUTTONS =================================== */


.btn, a.btn, .btn i, .btn span {
    color: white !important;
}

.btn-white {
    border-color: #ccc;
    color: #aaa !important;
}

.btn-white i {
    color: #aaa !important;
}

.btn-white:hover,
.btn-white:focus {
    background-color: #f7f7f7;
    background-position: 0 -1px;
}

.btn-white:active {
    background-color: #f0f0f0;
    background-image: none;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
}

.btn-white.selected {
    background-color: #b0b0b0;
    color: white !important;
}

    .btn-white.selected:active {
        background-color: #a7a7a7;
        background-image: none;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
    }

/* ---------------------------------------------------------------------------- */

.btn-grey {
    color: #888 !important;
    background-color: #f3f3f3;
    background-position: 0 -1px;
}

    .btn-grey i {
        color: #888 !important;
    }

    .btn-grey:hover,
    .btn-grey:focus {
        background-color: #e7e7e7;
        background-position: 0 -1px;
    }

    .btn-grey:active {
        background-color: #e0e0e0;
        background-image: none;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
    }

    .btn-grey.selected {
        background-color: #29A2E7;
        color: white !important;
    }

    .btn-grey.selected:active {
        background-color: #248cc8;
        background-image: none;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.075);
    }


/* =================================== CONNECTORS & APPS =================================== */

a.container-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    text-decoration: none;
    padding: 15px 10px;
    font-weight: bold;
}

    a.container-box > * {
        margin-right: auto;
        margin-left: auto;
    }

    a.container-box > img {
        margin-bottom: 5px;
    }

.rounded-box {
    overflow: hidden;
    width: 100%;
    height: 145px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 4px;
}

.rounded-box:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    background-color: #f5f5f5;
}

/* ----------------- TABLE: COMPARISON --------------------------------------------------------- */

table.table-comparison tr {
    border-bottom: 1px solid #ccc;
}

table.table-comparison thead th {
    text-align: center;
    vertical-align: top;
    padding-bottom: 1em;
}

table.table-comparison tbody th[title] {
    width: 420px;
    text-decoration: underline dotted;
    cursor: help;
}

table.table-comparison tbody td {
    text-align: center;
    vertical-align: middle;
}

table.table-comparison td[data-yes]:before {
    font-family: FontAwesome;
    content: "\f14a";
    color: rgb(92, 184, 92);
}

table.table-comparison td[data-no]:before {
    font-family: FontAwesome;
    content: "\f05e";
    color: #E44B4B;
}

table.table-comparison td[data-warning]:before {
    font-family: FontAwesome;
    content: "\f06a";
    color: #E4AB4B;
}

/* =================================== TABLE OF CONTENTS =================================== */
#table-of-contents {
    display: none;
    height: fit-content;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 10px;
    color: #333;
}

#table-of-contents > .text-center {
    line-height: 2;
    margin-bottom: 0.5em;
}

#table-of-contents a, #table-of-contents span {
    color: #248cc8;
}

#table-of-contents ol {
    margin: 0;
    padding: 0;
}

#table-of-contents ol {
    counter-reset: item;
    color: #248cc8;
}

#table-of-contents li {
    display: block;
    line-height:2;
    margin-left: 1.5em;
}

#table-of-contents li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
    color: #248cc8;
}

.quote-block {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 15px;
    margin: 15px 0;
}