:root {
    --font-family: "Source Sans Pro", sans-serif;
    --color-primary: #3a5ce9;
    --color-primary-dark: #1a2188;
    --color-secondary: #4cd5f7;
    --color-input-background: #f2f2f2;
    --color-text: #231f20;
    --color-secondary-action-color: #ffffff;
    --color-secondary-action-background: #918f8f;
    --color-primaryContrast: #2998e3;
    --color-primary-text: #9C27B0;
    --color-secondaryContrast: #707070;
    --color-accent: #A2AAAD;
    --color-column-headers: #231f20;
    --color-success-text: #4CAF50;
    --color-info-text: blue;
    --color-warning-text: #6c2fac;
    --color-danger-text: #F44336;
    --color-inner-background: #ffffff;
    --color-light: #ffffff;
    --color-dark: #000;
    --color-links: #777777;
    --color-outer-background: lightgray;
    --font-size-smallest: .25em;
    --font-size-smaller: .5em;
    --font-size-small: .75em;
    --font-size-base: 1em;
    --font-size-large: 1.25em;
    --font-size-bit-large: 1.5em;
    --font-size-larger: 1.75em;
    --font-size-medium-large: 22px;
    --font-size-larger-yet: 2em;
    --font-size-largest: 2.5em;
    --font-size-huge: 4em;
    --font-weight-light: 100;
    --font-weight-lighter: 200;
    --font-weight-base: 400;
    --font-weight-dark: 500;
    --font-weight-medium-dark: 600;
    --font-weight-darker: 700;
    --font-weight-darkest: 900;
}

html {
    min-height: 100%;
    padding-bottom: 100px;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-base);
    line-height: 1.5;
    color: var(--color-text);
    text-align: left;
    background-color: var(--color-light);
}

/*overwrite bootstrap with a thinner padding**/
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-right: auto;
    margin-left: auto;
    max-width: 768px;
}

.row {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-0.5* var(--bs-gutter-x));
    margin-left: calc(-0.5* var(--bs-gutter-x));
}

/* login page error styling */
.wcs-validation-message ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.wcs-validation-message li {
    margin: 0;
}

/* site header styling */
.les-site-header {
    border-bottom: 5px solid var(--color-primary) !important;
}

.les-user-info li {
    padding: 0 !important;
    border: 0 !important;
}

.les-site-logo {
    width: 80% !important;
    height: auto !important;
}

.les-btn-logout, .les-btn-logout:hover, .les-btn-logout:active, .les-btn-logout:focus {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-primary);
    float: right;
}

    .les-btn-logout:hover {
        border: 1px solid var(--color-secondary) !important;
        background-color: var(--color-secondary) !important;
    }

/* site login styling */
.les-login-h1 {
    color: var(--color-primary);
    font-weight: var(--font-weight-darker);
    font-size: 39px;
    vertical-align: middle;
    text-transform: none !important;
}

.les-login-h2 {
    font-size: var(--font-size-larger-yet);
    font-weight: var(--font-weight-medium-dark);
    margin: 0 0 5px 0;
}

.les-login-h3 {
    font-size: var(--font-size-larger);
    font-weight: var(--font-weight-medium-dark);
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

.les-login-h4 {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-base);
    margin: 10px 0 0 0;
}

.les-logon-input {
    width: 70%;
    height: 46px;
    margin-bottom: 1em;
    font-weight: var(--font-weight-dark);
    border: 1px solid lightgray !important;
    border-radius: 4px !important;
    max-width: 479px;
}

@media screen and (max-width: 622px) {
    .les-logon-input {
        width: 90%;
        margin-bottom: .5em;
    }
}

.les-logon-large-checkbox-label {
    font-size: 1em;
}

.les-logon-large-checkbox {
    margin-top: 1em;
}

.les-validation-message ul li {
    list-style-type: none;
    color: var(--color-primary) !important;
}

.les-login-logo-image {
    width: 200px;
    height: auto;
}

/* site footer styling */
.les-logo-footer {
    bottom: 8%;
    width: 100%;
    z-index: -100;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* site buttons */
.btn-info, .btn-info-default, .btn-info-normal, .btn-info:hover, .btn-info-default:hover, .btn-info-normal:hover, .btn-info-default:active {
    color: white;
    background-color: var(--color-primary);
    margin: 20px 3.33% 0 3.33%;
    font-size: 1.429em;
    font-weight: 400;
    white-space: normal;
}

    .btn-info:hover, .btn-info-default:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
    }

    .btn-info-normal:hover {
        background-color: var(--color-primary) !important;
        color: white;
    }

@media screen and (max-width: 479px) {
    .container-fluid {
        padding-right: 2%;
        padding-left: 2%;
    }

    .row, .row > * {
        margin-right: 0;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .btn-info-default {
        margin: 20px 3.33% 0 2em;
    }

    .les-site-body {
        margin: 0;
    }

    .btn-full-width {
        width: 80%;
    }
}

@media screen and (max-width: 637px) {
    .btn-info-default {
        margin: 20px 3.33% 0 1em;
    }

    .les-btn-group {
        min-width: 10em;
    }
}

.les-button, .les-button:hover, .les-button:active, .les-button:focus, .les-button-reversed, .les-button-reversed:hover, .les-button-reversed:active, .les-button-reversed:focus, .les-button-small, .les-button-small:hover, .les-button-small:active, .les-button-small:focus, .les-button-small-secondary, .les-button-small-secondary:hover, .les-button-small-secondary:active, .les-button-small-secondary:focus {
    font-weight: var(--font-weight-base);
    color: var(--color-light);
    background-color: var(--color-primary);
    border-radius: 1.5rem !important;
    width: 35% !important;
    margin: 1em;
    text-transform: none;
    display: inline-block;
}

    .les-button:hover, .les-button:active, .les-button-small:hover, .les-button-small:active, .les-button-small:focus {
        background-color: var(--color-secondary);
    }

    .les-button-reversed:focus, .les-button-reversed-small, .les-button-reversed-small:focus {
        background-color: var(--color-primary-dark);
        border: 1px solid var(--color-primary-dark);
    }

        .les-button-reversed:hover, .les-button-reversed:active, .les-button-reversed-small:hover, .les-button-reversed-small:active {
            color: var(--color-light);
            background-color: var(--color-primary);
            border-color: var(--color-light);
        }

/* modal styling */
.modal-header {
    background-color: var(--color-primary) !important;
    color: white !important;
    font-size: 24px;
}

.modal-body {
    padding: 0;
}

.close {
    color: #fff;
    opacity: .75;
    box-sizing: unset !important;
}