:root {
    --green: #9ade19;
    --green-dark: #94d200;
    --green-light:#f5fce8;
    --text: #000000;
    --white: #ffffff;
    --grey-lightest: #f8f8f8;
    --grey-light: #fafafa;
    --grey-lighter: #68778d;
    --disabled-bg: #E9EAED;
    --disabled-text: #848B9A;
    --ghost: #202C48;
    --grey: #686868;
    --text-grey:  #BEBEBEBE;
    --purple: #650ca1;
    --blue: #03274f;
    --blue-light: #1c3254;
    --blue-lighter:#1E395F;
    --light-blue: #A2DAE8;
    --red: #C50101;
    /* This makes 1rem = 10px; */
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: 'Fira Sans';
}
.layout {
    margin-top: 10rem;
}
@media (min-width: 992px) {
    .layout {
        margin-top: 14.5rem;
    }
}
table {
    border: transparent;
}
td {
    padding: 0.5rem 0;
}
/* extend bootstrap row with equal height columns via class .display-flex */
.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}


@media (min-width: 576px) { 
    .row.display-flex > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .row.display-flex > [class*='col-'] {
        display: block;
    }
}


iframe {
    max-width: 100%;
}

@media all and (max-width: 767px) {
    *.desktop-only {
        display: none !important;
    }
}

@media all and (min-width: 768px) {
    *.mobile-only {
        display: none !important;
    }
}

img:not([src]):not([srcset]) {
    visibility: hidden;
}