/* =================================================================================================================================================================== */
/*
    Narrative: Globals CSS. Table of Contents loosely based on https://www.w3schools.com/tags/ref_byfunc.asp

    Table of Contents
    1. Globals
        1.1 :root
        1.2 Browser Defaults
        1.3 CSS Helper Classes
    2. Basic HTML
        2.1 html
        2.2 body
        2.3 h1 to h6
        2.4 p
        2.5 br
        2.6 hr
    3. Formatting
        3.1 abbr
        3.2 address
        3.3 b
        3.4 bdi
        3.5 bdo
        3.6 blockquote
        3.7 cite
        3.8 code
        3.9 del
        3.10 dfn
        3.11 em
        3.12 i
        3.13 ins
        3.14 kdb
        3.15 mark
        3.16 meter
        3.17 pre
        3.18 progress
        3.19 q
        3.20 s
        3.21 samp
        3.22 small
        3.23 strong
        3.24 sub
        3.25 sup
        3.26 template
        3.27 time
        3.28 u
        3.29 var
        3.30 wbr
    4. Forms and Input
        4.1 form
        4.2 input
            4.2.1 checkbox
            4.2.2 radio
            4.2.3 button
            4.2.4 color
            4.2.5 date
            4.2.6 datetime-local
            4.2.7 email
            4.2.8 file
            4.2.9 hidden
            4.2.10 image
            4.2.11 month 
            4.2.12 number 
            4.2.13 password
            4.2.14 range 
            4.2.15 reset
            4.2.16 search
            4.2.17 submit
            4.2.18 tel
            4.2.19 text
            4.2.20 time 
            4.2.21 url
            4.2.22 week
            4.2.23 global styles
        4.3 textarea
        4.4 button
        4.5 select
        4.6 optgroup
        4.7 option
        4.8 label
        4.9 fieldset
        4.10 legend
        4.11 datalist
        4.12 output
        4.13 summary
        4.14 form validation
    5. Frames
        5.1 iframe
    6. Images
        6.1 img
        6.2 map
        6.3 area
        6.4 canvas
        6.5 figcaption
        6.6 figure
        6.7 picture
        6.8 svg
    7. Audio / Video
        7.1 audio
        7.2 source
        7.3 track
        7.4 video
    8. Links
        8.1 a
        8.2 nav
    9. Lists
        9.1 ul
        9.2 ol
        9.3 li
        9.4 dl
        9.5 dt
        9.6 dd
    10. Tables
    11. Semantics
    12. Containers
        12.1 details
        12.2 div
        12.3 span
        12.4 summary
    */
/* =================================================================================================================================================================== */

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1. Globals  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */

/* 1.1 root */
/* @import url('globals.css');*/
:root {
    /* Font Awesome Font Name */
    --fa-name: "Font Awesome 6 Pro";
    --fa-name-brands: "Font Awesome 6 Brands";
    /* Color - Primary (cp) */
    --cp-red: #EF1217;
    --cp-crimson: #700017;
    --cp-verylightgray: #D8D8D8;
    --cp-lightgray: #A1A1A1;
    --cp-darkgray: #525051;
    --cp-mediumgray: #7D7470; /* from IOP header Icons*/
    --cp-lightgreen: #B5DC10;
    --cp-black: #000000;
    --cp-white: #FFFFFF;
    --cp-darkblue: #0E3F75;
    --cp-error: #900;
    --cp-invalid: #FCC;
    /* Color - Secondary (cs) */
    --cs-lightblue: #73A5CC;
    --cs-yellow: #FFBE0E;
    /* Font Colors */
    --cp-font: #4A4A4A;
    /* h1 - h6 Text Color (tc) */
    --tc-h1: #00305C;
    --tc-h2: #00305C;
    --tc-h3: #00305C;
    --tc-h4: #00305C;
    --tc-h5: #00305C;
    --tc-h6: #00305C;
    /* Header Colors (hc) */
    --hc-background: #FFFFFF;
    --hc-border: #F2F2F2;
    --hc-font: #4A4A4A;
    /* Breadcrumb Colors */
    --bc-background: #F2F2F2;
    /* Button Colors */
    --btn-bg: #599bb3;
    --btn-bg-gradient1: #599bb3;
    --btn-bg-gradient2: #408c99;
    --btn-box-shadow: #276873;
    --btn-border: #1B367A;
    --btn-text: #ffffff;
    --btn-text-shadow: #3d768a;
    --btn-bg-hover: #408c99;
    --btn-submit-bg: #bd0026;
    --btn-bg-submit-gradient1: #bd0026;
    --btn-bg-submit-gradient2: #700016;
    --btn-submit-border: #570011;
    --btn-submit-box-shadow: #bd0026;
    --btn-submit-text: #FFFFFF;
    --btn-submit-shadow: #570011;
    /* Table Colors (tbl) */
    --tbl-bg: #D1D1D1;
    --tbl-col-text: #FFFFFF;
    --tbl-cell-border: #525051;
    --tbl-th-bg: #00305C;
    --tbl-th-border: #FFFFFF;
    --tbl-row-striping: #DDD;
    --tbl-row-hover: #FFFF99;
    /* Form Colors (frm) */
    --frm-background1: rgba(227,227,227, 0.9);
    --frm-background2: rgba(227,227,227, 0.9);
    /* Input Fields (in) */
    --in-disabled: rgba(227,227,227, 0.9);
    /* Left Nav Colors (lv) */
    --lv-bg-hover: rgba(227,227,227, 0.9);
    /* Footer Colors */
    --ftr-background: #f7f7f7;
}


@media screen and (max-width: 992px) {
    :root {
        --header-margin-top: 110px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --header-margin-top: 90px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --header-margin-top: 80px;
    }
}

/* 1.2 Browser Defaults */
*, *::before, *::after {
    box-sizing: inherit;
}

/* User text selection */
::selection {
    color: var(--cp-darkgray);
    background: #e9ff32;
}

/* 1.3 CSS Helper Classes */
.obm-helper-hide {
    display: none !important;
}

.obm-helper-bold {
    font-weight: bold;
}

.obm-helper-italic, .obm-helper-italics {
    font-style: italic;
}

.obm-helper-underline {
    text-decoration: underline
}

.obm-helper-capitalize {
    text-transform: uppercase;
}

/* 1.3 CSS Supports Check */
div.obm-ie-bad {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    color: #FFFFFF;
    z-index: 10000;
    text-align: center;
    font-size: 50px;
    opacity: 0.8;
    padding-top: 50px;
}

    div.obm-ie-bad > a {
        display: block;
        margin-top: 200px;
    }
/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2. Basic HTML - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 2.1 html */
html {
    /* https://www.smashingmagazine.com/2016/05/fluid-typography/ */
    font-size: 16px;
    font-family: "Roboto", "Source Sans Pro", Tahoma, Verdana, Segoe, sans-serif;
}

* {
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 20px;
    }
}

/* 2.2 body */
body {
    font-family: "Source Sans Pro", Tahoma, Verdana, Segoe, sans-serif;
    color: var(--cp-font);
    font-weight: normal;
    font-style: normal;
}

/* 2.3 h1 to h6 */
h1 {
    font-size: 2.25rem;
    color: var(--tc-h1);
}

h2 {
    font-size: 1.75rem;
    color: var(--tc-h2);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cp-verylightgray);
}

h3 {
    font-size: 1.5rem;
    color: var(--tc-h3);
}

h4 {
    font-size: 1.25rem;
    color: var(--tc-h4);
}

h5 {
    font-size: 1rem;
    color: var(--tc-h5);
}

h6 {
    font-size: 1rem;
    color: var(--tc-h6);
}

h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
    }
}

/* 2.4 p */
p {
    font-size: 1rem;
    line-height: 1.7rem;
    text-align: justify;
    margin: 0.5rem 1ch 1rem 0;
}


/* 2.5 br */
br {
}

/* 2.6 hr */
hr {
    width: 100%;
}

    hr.thin {
        margin: 25px 0 50px 0;
        border: none;
        height: 1px;
        background-color: #ccc;
    }

    hr.fade {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }

/* ======================================================================= END BASIC HTML =============================================================================*/


/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3. Formatting - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
abbr {
}

address {
}

b {
}

bdi {
}

bdo {
}

blockquote {
}

cite {
}

code {
    background-color: #2E3133;
    border: 3px inset #000000;
    padding: 0.8rem;
    color: #00C800;
    display: block;
    font-family: monospace;
    white-space: pre;
    max-height: 40vh;
    overflow: scroll;
}

del {
}

details {
}

dfn {
}

em {
}

i {
}

ins {
}

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

mark {
}

meter {
}

pre {
}

progress,
progress::-moz-progress-bar,
progress::-webkit-progress-value {
    background: var(--cp-lightgray);
    color: var(--cp-crimson);
    /*accent-color: var(--cp-crimson);*/
}

    /* Firefox: Filled portion of the progress bar */
    progress::-moz-progress-bar {
        background: var(--cp-crimson);
    }

    /* Chrome & Safari: Unfilled portion of the progress bar */
    progress::-webkit-progress-bar {
        background: lightgrey;
    }

    /* Chrome & Safari: Filled portion of the progress bar */
    progress::-webkit-progress-value {
        background: var(--cp-crimson);
    }


q {
}

s {
}

samp {
    background-color: #eeeeee;
    border-left: 3px solid #900;
    display: block;
    margin: 10px;
    padding: 25px 10px 10px 10px;
}

    samp:before {
        content: "example";
        color: #999;
        font-size: .7rem;
        float: left;
        margin-top: -20px;
    }

small {
}

strong {
}

sub {
}

sup {
}

template {
}

time {
}

u {
}

var {
}

wbr {
}
/* ======================================================================= END FORMATTING =============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4. Forms and Input  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
form {
}

input {
    outline: none;
}

    input:focus, textarea:focus, select:focus, textarea:focus {
        background-color: #FFF1A8;
    }

/* Based on Jen Simmons solution: https://codepen.io/jensimmons/pen/KKPzxJa?editors=1100 */
@supports(-webkit-appearance: none) {
    /* 4.2.1 checkbox */
    /* 	AKA, only do this if `-webkit-appearance: none` is supported. 
	Which means IE11 and Opera Mini will get the old browser-styled checkbox. 
	Which works just fine. Old browsers can get old looking things. */
    input[type="checkbox"] {
        /*  Remove the default styling.
		    `-webkit-appearance` is not an official CSS property 
			& likely never will be. But it's also in 95% of browsers, 
			non-webkit included, yes, as a `-webkit` property. 
			Firefox, Edge, Chrome, Opera all implemented `-webkit-appearance`.  
			Plus it *will* stick around. Browsers can't remove it. 
			So use it like this...                                 */
        -webkit-appearance: none;
        box-sizing: content-box;
        background-color: var(--cp-white);
        width: 26px;
        height: 26px;
        border: 1px solid var(--cp-darkgray);
    }

        input[type="checkbox"]:hover, input[id="checkbox"]::before {
            cursor: pointer;
        }

        input[type="checkbox"]:checked {
            /* Prepare for placing the new checkmark. */
            position: relative;
            /* Do a bug fix to keep iOS from adding dark background. */
            background: white;
        }

            input[type="checkbox"]:checked::before {
                content: "\f00c";
                background-color: transparent;
                font-family: var(--fa-name);
                font-size: 23px;
                padding-left: 2px;
            }
    /* 4.2.2 radio */
    input[type="radio"] {
        /*  Remove the default styling.
		    `-webkit-appearance` is not an official CSS property 
			& likely never will be. But it's also in 95% of browsers, 
			non-webkit included, yes, as a `-webkit` property. 
			Firefox, Edge, Chrome, Opera all implemented `-webkit-appearance`.  
			Plus it *will* stick around. Browsers can't remove it. 
			So use it like this...                                 */
        -webkit-appearance: none;
        /* Style the radio button container. */
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--cp-darkgray);
        padding: 0;
        background-color: white;
    }

        input[type="radio"]:checked {
            /* Prepare for placing the new checkmark. */
            position: relative;
            /* Do a bug fix to keep iOS from adding dark background. */
            /*background: none;*/
        }

            input[type="radio"]:checked::after {
                /* Place (position) the new “filled-in” blob. */
                position: absolute;
                top: 5px;
                width: 16px;
                height: 16px;
                background: var(--cp-darkgray);
                border-radius: 50%;
                content: "";
                left: 5px;
            }
}
/* 4.2.3 button */
input[type="button"] {
}

/* 4.2.4 color */
input[type="color"] {
    height: 2.3rem;
    width: 2.3rem;
    padding: 2px;
    cursor: pointer;
}

/* 4.2.5 date */
input[type="date"] {
    max-width: 25ch;
}

/* 4.2.6 datetime-local */
input[type="datetime-local"] {
    /* Once the viewport width falls below 300px this element doesn't scale */
    max-width: 92vw;
}

/* 4.2.7 email */
input[type="email"] {
    max-width: 50ch;
}

/* 4.2.8 file */
input[type="file"] {
    /* Once the viewport width falls below 400px this element doesn't scale */
    max-width: 90vw;
}

/* 4.2.9 hidden */
input[type="hidden"] {
}

/* 4.2.10 image */
input[type="image"] {
}

/* 4.2.11 month */
input[type="month"] {
}

/* 4.2.12 number */
input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: none;
    text-align: right;
}

/* 4.2.13 password */
input[type="password"] {
    max-width: 50ch;
}

/* 4.2.14 range */
input[type="range"] {
    -webkit-appearance: none;
    width: auto;
}

    input[type="range"]:focus {
        outline: none;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        width: auto;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: var(--cp-crimson);
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type="range"]::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 2rem;
        width: 16px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -14px;
    }

    input[type="range"]:focus::-webkit-slider-runnable-track {
        background: var(--cp-crimson);
    }

    input[type="range"]::-moz-range-track {
        width: auto;
        cursor: pointer;
        height: 1rem;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: var(--cp-crimson);
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type="range"]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }

    input[type="range"]::-ms-track {
        width: auto;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type="range"]::-ms-fill-lower {
        background: #2a6495;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type="range"]::-ms-fill-upper {
        background: #3071a9;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type="range"]::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: var(--cp-crimson);
        cursor: pointer;
    }

    input[type="range"]:focus::-ms-fill-lower {
        background: #3071a9;
    }

    input[type="range"]:focus::-ms-fill-upper {
        background: #367ebd;
    }

    input[type="range"]:after {
        content: attr(value);
    }

/* 4.2.15 reset */
input[type="reset"] {
}

/* 4.2.16 search */
input[type="search"] {
}

/* 4.2.17 submit */
input[type="submit"] {
}

/* 4.2.18 tel */
input[type="tel"] {
    max-width: 30ch;
}

/* 4.2.19 text */
input[type="text"] {
}

/* 4.2.20 time */
input[type="time"] {
    max-width: 20ch;
}

/* 4.2.21 url */
input[type="url"] {
}

/* 4.2.22 week */
input[type="week"] {
}

/* 4.2.23 global styles */
input[type="month"],
input[type="number"],
input[type="time"],
input[type="week"],
input[type="file"] {
    padding: 0.34rem;
    min-height: 1.5rem;
    border: 1px solid var(--cp-darkgray);
    background-color: var(--cp-white);
}

input[type="date"],
input[type="datetime-local"] {
    padding: 0.32rem;
    min-height: 1.5rem;
    border: 1px solid var(--cp-darkgray);
    background-color: var(--cp-white);
}

input[inputmode="decimal"], input[inputmode="numeric"] {
    text-align: right;
}

/* This is placed here because the validation CSS comes before the select/textarea CSS. So for the sake of hierarchy, the default background color is here. AK */
select, textarea {
    background-color: var(--cp-white);
}

/* Turns off the spinner arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea {
    padding: 0.5rem;
    min-height: 1.5rem;
    border: 1px solid var(--cp-darkgray);
    background-color: var(--cp-white);
}

/* Buttons should not be used since they cannot have icons applied and do not have pseudo selectors ::before and ::after */
/* This styling makes them look incredibly ugly to deter usage. AK */
input[type="image"] {
    background-color: yellow !important;
    color: red !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 50px !important;
    text-decoration: line-through !important;
    padding: 150px !important;
    border-radius: 50% !important;
    border: 10px dashed green !important;
}


/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: unset;
    -webkit-text-fill-color: unset;
    -webkit-box-shadow: unset;
}

/* 4.3 textarea */
textarea {
}

/* 4.4 button */
button, input[type="submit"], input[type="reset"], input[type="button"] {
    box-shadow: inset 0px 10px 14px -7px var(--btn-box-shadow);
    background: linear-gradient(to bottom, var(--btn-bg-gradient1) 5%, var(--btn-bg-gradient2) 100%);
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    text-decoration: none;
    text-shadow: 0px 1px 0px var(--btn-text-shadow);
    padding: 0.8rem;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    min-width: 5vw;
}

    /* Button icons using Font Awesome */
    button:before, a.fa:before {
        font-family: var(--fa-name) !important;
        margin-right: 0.4rem;
        cursor: pointer;
        font-weight: 900;
    }

    button:not(:disabled):hover {
        background: linear-gradient(to bottom, var(--btn-bg-gradient2) 5%, var(--btn-bg-gradient1) 100%);
        background-color: var(--btn-bg-hover);
    }

a.fa:before:hover {
    color: red;
}

button:disabled:before, a.fa:disabled:before {
    cursor: not-allowed;
}

button[type="submit"], input[type="submit"] {
    box-shadow: inset 0px 1px 0px 0px var(--btn-submit-box-shadow);
    background: linear-gradient(to bottom, var(--btn-bg-submit-gradient1) 5%, var(--btn-bg-submit-gradient2) 100%);
    background-color: var(--btn-submit-bg);
    border: 1px solid var(--btn-submit-border);
    text-shadow: 0px 1px 0px var(--btn-submit-shadow);
}

    button[type="submit"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover {
        background: linear-gradient(to bottom, var(--btn-bg-submit-gradient2) 5%, var(--btn-bg-submit-gradient1) 100%);
    }

    button[type="submit"]:before, .obm-icon-submit:before {
        content: '\f058';
    }

button[type="reset"]:before, .obm-icon-reset:before {
    content: '\f0e2';
}

button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    transition: opacity 0.3s ease-out;
}

button:not(:disabled), input[type="submit"]:not(:disabled), input[type="reset"]:not(:disabled), input[type="button"]:not(:disabled) {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

button.invalid[type="submit"]:disabled {
    font-size: 0;
    align-self: start;
}

    button.invalid[type="submit"]:disabled::after {
        content: '- Form Incomplete -';
        display: block;
        color: var(--btn-submit-text);
        position: relative;
        text-align: center;
        font-size: 1rem;
    }

button.obm-popup-close:before {
    font-family: var(--fa-name);
    content: '\f057';
}

.obm-icon-none:before {
    content: '';
}

.obm-icon-close:before {
    content: '\f057';
}

/* 4.5 select */
select {
    padding: 0.37rem;
    min-height: 1.5rem;
    /*-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
}

@media screen and (max-width: 480px) {
    select {
        width: 100%;
    }
}

/* 4.6 optgroup */
optgroup {
}

/* 4.7 option */
option {
}

/* 4.8 label */
label {
}

    label[for]:hover {
        cursor: pointer;
    }

    label[data-invalid]:after {
        content: attr(data-invalid);
        display: inline-block;
        font-size: 0.7rem;
        /*margin-left: 0.3rem;*/
        color: var(--cp-error);
        font-style: italic;
        word-wrap: break-word;
        white-space: pre-wrap;
        grid-area: message;
    }

.obm-popup-content label[data-invalid]:after {
    display: block;
    margin-left: 0;
}

@media screen and (max-width: 768px) {
    label [data-invalid]:after {
        display: block;
        margin: 2px 0;
    }
}
/* 4.9 fieldset */
fieldset {
    border: 2px solid var(--cp-darkgray);
    border-radius: 5px;
}

/* 4.10 legend */
legend {
    padding: 2px 8px;
    border-radius: 5px;
}

/* 4.11 datalist (cannot be styled) */
datalist {
}

/* 4.12 output */
output {
}

/* 4.13 summary */
summary {
}

/* 
    INVALID (X): url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTQuODUyLDE4Ljg3N0wxMC40LDEyLjE5NGMtMC4xOTgtMC4yOTctMC42MzUtMC4yOTctMC44MzIsMC4wMDFsLTQuNDE5LDYuNjhDNS4wNTYsMTkuMDE2LDQuODk5LDE5LjEsNC43MzIsMTkuMUgyLjAyNGMtMC40MTYsMC0wLjY1LTAuNDc5LTAuMzk0LTAuODA3bDYuMjQzLTcuOTg5YzAuMTQzLTAuMTgyLDAuMTQxLTAuNDM5LTAuMDA0LTAuNjJMMS42NDksMS45MTJDMS4zODgsMS41ODUsMS42MjEsMS4xLDIuMDM5LDEuMWgyLjY5N2MwLjE2NSwwLDAuMzE5LDAuMDgxLDAuNDEyLDAuMjE3bDQuNDIzLDYuNDQ5YzAuMTk4LDAuMjg5LDAuNjI0LDAuMjg5LDAuODIzLDAuMDAxbDQuNDU2LTYuNDUyQzE0Ljk0NCwxLjE4MSwxNS4wOTgsMS4xLDE1LjI2MiwxLjFoMi42ODZjMC40MjEsMCwwLjY1MywwLjQ4OSwwLjM4NywwLjgxNWwtNi4zMzYsNy43NjZjLTAuMTQ5LDAuMTgyLTAuMTUsMC40NDMtMC4wMDQsMC42MjdsNi4zNTgsNy45ODJjMC4yNjEsMC4zMjcsMC4wMjgsMC44MTEtMC4zOTEsMC44MTFoLTIuNjk2QzE1LjEsMTkuMSwxNC45NDQsMTkuMDE2LDE0Ljg1MiwxOC44Nzd6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
    REQUIRED (*): url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTUuNTUzLDIuNGMwLjMyMiwwLjE4NSwwLjQxLDAuNjEsMC4xODcsMC45MDhsLTQuMzk3LDUuODY4djAuMTAzbDYuOTU1LTAuOTM0QzE4LjY3LDguMjk1LDE5LDguNTg0LDE5LDguOTU4djIuMDkxYzAsMC4zNzEtMC4zMjUsMC42NTktMC42OTMsMC42MTVsLTYuOTYzLTAuODQydjAuMTAzbDQuNDI1LDUuNjExYzAuMjMzLDAuMjk2LDAuMTUsMC43My0wLjE3NiwwLjkxOWwtMS45NywxLjE0MWMtMC4zMjIsMC4xODctMC43MzUsMC4wNDgtMC44OC0wLjI5NWwtMi43NjktNi41NTRIOS44NzJsLTIuOTk5LDYuNjAyYy0wLjE1NiwwLjM0My0wLjU4LDAuNDY5LTAuODk4LDAuMjY1bC0xLjcyMS0xLjEwM2MtMC4zMDUtMC4xOTYtMC4zNzgtMC42MS0wLjE1Ny0wLjg5OGw0LjQwNi01LjczOXYtMC4xMDNsLTYuODA1LDAuODg1QzEuMzI4LDExLjcwNSwxLDExLjQxNiwxLDExLjA0M1Y4Ljk1NmMwLTAuMzc0LDAuMzI5LTAuNjYyLDAuNy0wLjYxNGw2Ljc1NCwwLjg4NlY5LjEyNkw0LjExMSwzLjQwOGMtMC4yMjUtMC4yOTYtMC4xNC0wLjcyMiwwLjE4MS0wLjkwOWwxLjg4OC0xLjFDNi41LDEuMjEzLDYuOTEsMS4zNDcsNy4wNTksMS42ODVsMi44NjUsNi41MTRoMC4xMDFsMi44MTgtNi41NmMwLjE0Ni0wLjM0LDAuNTU2LTAuNDc3LDAuODc3LTAuMjkyTDE1LjU1MywyLjR6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
    VALID (check): url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDBBMTRCIiBkPSJNMi41MjQsMTAuOTUybC0xLjI1OCwyLjUxNmMtMC4xNTMsMC4zMDYtMC4wNjEsMC42NzksMC4yMTgsMC44NzhsNS45NzUsNC4yNjhjMC4zMDMsMC4yMTYsMC43MjIsMC4xNTYsMC45NTItMC4xMzZMMTguNjcsNS40MmMwLjE5NS0wLjI0OCwwLjE5OS0wLjU5NSwwLjAxLTAuODQ4bC0yLjAyMy0yLjY5OGMtMC4zMDYtMC40MDgtMC45MzEtMC4zNTktMS4xNzEsMC4wOUw4LjQ4NywxNS4wODdjLTAuMjMyLDAuNDM2LTAuODMyLDAuNDk4LTEuMTQ5LDAuMTE4bC0zLjY1Ny00LjM4OEMzLjM2LDEwLjQzMiwyLjc0OSwxMC41MDMsMi41MjQsMTAuOTUyeiIvPjwvc3ZnPg==) no-repeat;
    ALERT (!): url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48ZyBpZD0iWE1MSURfM18iPjxnPjxwYXRoIGZpbGw9IiNFRDFDMjQiIGQ9Ik0xNy45NSwxYzAuNDgsMCwwLjgsMC41MSwwLjU4LDAuOTRsLTYuNjksMTMuMzdsLTAuOS0wLjQ1YzAuMTItMC4xOSwwLjE4LTAuNDIsMC4xOC0wLjY3YzAtMC42OS0wLjQ1LTEuMTktMS4xNC0xLjE5di0xaDAuMjdjMC4yMiwwLDAuMzktMC4xNywwLjQtMC4zOGwwLjgyLTkuMjhDMTEuNDgsMi4xNiwxMS4zNCwyLDExLjE2LDJWMUgxNy45NXoiLz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTEuODQsMTUuMzFsLTEuMjYsMi41M2MtMC4yNCwwLjQ4LTAuOTIsMC40OC0xLjE2LDBMOC4wNSwxNS4xbDAuODgtMC40NGMwLjE2LDAuNDMsMC41NSwwLjcyLDEuMDUsMC43MmMwLjQzLDAsMC43Ny0wLjIsMC45Ni0wLjUyTDExLjg0LDE1LjMxeiIvPjxwYXRoIGZpbGw9IiNFRDFDMjQiIGQ9Ik0xMS4xNiwxdjFIOC44NEM4LjY2LDIsOC41MiwyLjE2LDguNTMsMi4zNGwwLjgyLDkuMjhDOS4zNiwxMS44Myw5LjUzLDEyLDkuNzUsMTJoMC4yM3YxYy0wLjY1LDAtMS4xMywwLjUtMS4xMywxLjE5YzAsMC4xNywwLjAzLDAuMzMsMC4wOCwwLjQ3TDguMDUsMTUuMUwxLjQ3LDEuOTRDMS4yNSwxLjUxLDEuNTcsMSwyLjA1LDFIMTEuMTZ6Ii8+PC9nPjwvZz48L3N2Zz4=) no-repeat;
*/



/* 4.14 form validation (https://www.the-art-of-web.com/html/html5-form-validation) */
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
    border: 1px solid var(--cp-darkgray);
    outline: none;
}

    input[type="date"]:not(:focus):invalid,
    input[type="datetime-local"]:not(:focus):invalid,
    input[type="email"]:not(:focus):invalid,
    input[type="file"]:not(:focus):invalid,
    input[type="month"]:not(:focus):invalid,
    input[type="number"]:not(:focus):invalid,
    input[type="password"]:not(:focus):invalid,
    input[type="search"]:not(:focus):invalid,
    input[type="tel"]:not(:focus):invalid,
    input[type="text"]:not(:focus):invalid,
    input[type="time"]:not(:focus):invalid,
    input[type="url"]:not(:focus):invalid,
    input[type="week"]:not(:focus):invalid,
    select:not(:focus):invalid,
    textarea:not(:focus):invalid,
    .obm-group-checkbox.invalid,
    .obm-group--group.invalid,
    .obm-autocomplete-multi.obm-field-invalid {
        -webkit-box-shadow: 0 0 0 0 transparent inset;
        border: 1px var(--cp-error) solid;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTUuNTUzLDIuNGMwLjMyMiwwLjE4NSwwLjQxLDAuNjEsMC4xODcsMC45MDhsLTQuMzk3LDUuODY4djAuMTAzbDYuOTU1LTAuOTM0QzE4LjY3LDguMjk1LDE5LDguNTg0LDE5LDguOTU4djIuMDkxYzAsMC4zNzEtMC4zMjUsMC42NTktMC42OTMsMC42MTVsLTYuOTYzLTAuODQydjAuMTAzbDQuNDI1LDUuNjExYzAuMjMzLDAuMjk2LDAuMTUsMC43My0wLjE3NiwwLjkxOWwtMS45NywxLjE0MWMtMC4zMjIsMC4xODctMC43MzUsMC4wNDgtMC44OC0wLjI5NWwtMi43NjktNi41NTRIOS44NzJsLTIuOTk5LDYuNjAyYy0wLjE1NiwwLjM0My0wLjU4LDAuNDY5LTAuODk4LDAuMjY1bC0xLjcyMS0xLjEwM2MtMC4zMDUtMC4xOTYtMC4zNzgtMC42MS0wLjE1Ny0wLjg5OGw0LjQwNi01LjczOXYtMC4xMDNsLTYuODA1LDAuODg1QzEuMzI4LDExLjcwNSwxLDExLjQxNiwxLDExLjA0M1Y4Ljk1NmMwLTAuMzc0LDAuMzI5LTAuNjYyLDAuNy0wLjYxNGw2Ljc1NCwwLjg4NlY5LjEyNkw0LjExMSwzLjQwOGMtMC4yMjUtMC4yOTYtMC4xNC0wLjcyMiwwLjE4MS0wLjkwOWwxLjg4OC0xLjFDNi41LDEuMjEzLDYuOTEsMS4zNDcsNy4wNTksMS42ODVsMi44NjUsNi41MTRoMC4xMDFsMi44MTgtNi41NmMwLjE0Ni0wLjM0LDAuNTU2LTAuNDc3LDAuODc3LTAuMjkyTDE1LjU1MywyLjR6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
        background-position: calc(100% - 7px) 8px;
        background-size: 20px;
        background-color: var(--cp-invalid);
        transition: background-color 0.3s ease-in;
        -moz-box-shadow: none;
        padding-right: 45px;
    }

input[type="checkbox"]:invalid {
    background-color: var(--cp-invalid);
    transition: background-color 0.3s ease-in;
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px var(--cp-error) solid;
    -moz-box-shadow: none;
}

input[type="date"]:required, input[type="date"]:not(:focus):required,
input[type="datetime-local"]:required, input[type="datetime-local"]:not(:focus):required,
input[type="email"]:required, input[type="email"]:not(:focus):required,
input[type="file"]:required, input[type="file"]:not(:focus):required,
input[type="month"]:required, input[type="month"]:not(:focus):required,
input[type="number"]:required, input[type="number"]:not(:focus):required,
input[type="password"]:required, input[type="password"]:not(:focus):required,
input[type="search"]:required, input[type="search"]:not(:focus):required,
input[type="tel"]:required, input[type="tel"]:not(:focus):required,
input[type="text"]:required, input[type="text"]:not(:focus):required,
input[type="time"]:required, input[type="time"]:not(:focus):required,
input[type="url"]:required, input[type="url"]:not(:focus):required,
input[type="week"]:required, input[type="week"]:not(:focus):required,
select:required, .obm-autocomplete-multi.obm-required {
    /* Force the background color for invalid fields */
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px var(--cp-error) solid;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTUuNTUzLDIuNGMwLjMyMiwwLjE4NSwwLjQxLDAuNjEsMC4xODcsMC45MDhsLTQuMzk3LDUuODY4djAuMTAzbDYuOTU1LTAuOTM0QzE4LjY3LDguMjk1LDE5LDguNTg0LDE5LDguOTU4djIuMDkxYzAsMC4zNzEtMC4zMjUsMC42NTktMC42OTMsMC42MTVsLTYuOTYzLTAuODQydjAuMTAzbDQuNDI1LDUuNjExYzAuMjMzLDAuMjk2LDAuMTUsMC43My0wLjE3NiwwLjkxOWwtMS45NywxLjE0MWMtMC4zMjIsMC4xODctMC43MzUsMC4wNDgtMC44OC0wLjI5NWwtMi43NjktNi41NTRIOS44NzJsLTIuOTk5LDYuNjAyYy0wLjE1NiwwLjM0My0wLjU4LDAuNDY5LTAuODk4LDAuMjY1bC0xLjcyMS0xLjEwM2MtMC4zMDUtMC4xOTYtMC4zNzgtMC42MS0wLjE1Ny0wLjg5OGw0LjQwNi01LjczOXYtMC4xMDNsLTYuODA1LDAuODg1QzEuMzI4LDExLjcwNSwxLDExLjQxNiwxLDExLjA0M1Y4Ljk1NmMwLTAuMzc0LDAuMzI5LTAuNjYyLDAuNy0wLjYxNGw2Ljc1NCwwLjg4NlY5LjEyNkw0LjExMSwzLjQwOGMtMC4yMjUtMC4yOTYtMC4xNC0wLjcyMiwwLjE4MS0wLjkwOWwxLjg4OC0xLjFDNi41LDEuMjEzLDYuOTEsMS4zNDcsNy4wNTksMS42ODVsMi44NjUsNi41MTRoMC4xMDFsMi44MTgtNi41NmMwLjE0Ni0wLjM0LDAuNTU2LTAuNDc3LDAuODc3LTAuMjkyTDE1LjU1MywyLjR6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
    background-position: calc(100% - 7px) 8px;
    background-size: 20px;
    background-color: var(--cp-invalid);
    transition: background-color 0.3s ease-in;
    -moz-box-shadow: none;
    padding-right: 45px;
}

@media screen and (min-width: 768px) {
    select:required {
        background-position: calc(100% - 25px) 8px !important;
    }

        select:required[multiple="multiple"] {
            background-position: calc(100% - 25px) 8px !important;
            padding-right: 40px;
        }
}

input[type="date"]:focus:valid:required,
input[type="datetime-local"]:focus:valid:required,
input[type="email"]:focus:valid:required,
input[type="file"]:focus:valid:required,
input[type="month"]:focus:valid:required,
input[type="number"]:focus:valid:required,
input[type="password"]:focus:valid:required,
input[type="search"]:focus:valid:required,
input[type="tel"]:focus:valid:required,
input[type="text"]:focus:valid:required,
input[type="time"]:focus:valid:required,
input[type="url"]:focus:valid:required,
input[type="week"]:focus:valid:required,
select:focus:valid,
textarea:focus:valid,
.obm-group-checkbox.invalid,
.obm-group-radio.invalid {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px solid var(--cp-darkgray);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDBBMTRCIiBkPSJNMi41MjQsMTAuOTUybC0xLjI1OCwyLjUxNmMtMC4xNTMsMC4zMDYtMC4wNjEsMC42NzksMC4yMTgsMC44NzhsNS45NzUsNC4yNjhjMC4zMDMsMC4yMTYsMC43MjIsMC4xNTYsMC45NTItMC4xMzZMMTguNjcsNS40MmMwLjE5NS0wLjI0OCwwLjE5OS0wLjU5NSwwLjAxLTAuODQ4bC0yLjAyMy0yLjY5OGMtMC4zMDYtMC40MDgtMC45MzEtMC4zNTktMS4xNzEsMC4wOUw4LjQ4NywxNS4wODdjLTAuMjMyLDAuNDM2LTAuODMyLDAuNDk4LTEuMTQ5LDAuMTE4bC0zLjY1Ny00LjM4OEMzLjM2LDEwLjQzMiwyLjc0OSwxMC41MDMsMi41MjQsMTAuOTUyeiIvPjwvc3ZnPg==) no-repeat;
    background-position: calc(100% - 7px) 8px;
    background-size: 20px;
    transition: background-color 0.3s ease-in;
    -moz-box-shadow: none;
    padding-right: 45px;
}

input[type="checkbox"]:valid:required {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px solid var(--cp-darkgray);
    transition: background-color 0.3s ease-in;
    -moz-box-shadow: none;
    background-color: var(--cp-white);
    border: 1px solid var(--cp-darkgray);
}

input[type="date"]:focus:valid:required,
input[type="datetime-local"]:focus:valid:required,
input[type="email"]:focus:valid:required,
input[type="file"]:focus:valid:required,
input[type="month"]:focus:valid:required,
input[type="number"]:focus:valid:required,
input[type="password"]:focus:valid:required,
input[type="search"]:focus:valid:required,
input[type="tel"]:focus:valid:required,
input[type="text"]:focus:valid:required,
input[type="time"]:focus:valid:required,
input[type="url"]:focus:valid:required,
input[type="week"]:focus:valid:required,
select:focus:valid,
textarea:focus:valid,
.obm-autocomplete-multi.obm-required.obm-field-valid {
    background-color: var(--cp-white);
}

input[type="date"]:focus:valid:optional,
input[type="datetime-local"]:focus:valid:optional,
input[type="email"]:focus:valid:optional,
input[type="file"]:focus:valid:optional,
input[type="month"]:focus:valid:optional,
input[type="number"]:focus:valid:optional,
input[type="password"]:focus:valid:optional,
input[type="search"]:focus:valid:optional,
input[type="tel"]:focus:valid:optional,
input[type="text"]:focus:valid:optional,
input[type="time"]:focus:valid:optional,
input[type="url"]:focus:valid:optional,
input[type="week"]:focus:valid:optional,
select:focus:valid,
textarea:focus:valid,
.obm-group-checkbox.valid,
.obm-group-radio.valid,
.obm-autocomplete-multi.obm-field-valid {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px solid var(--cp-darkgray);
    background: none;
    background-color: var(--cp-white);
    -moz-box-shadow: none;
    padding-right: 0.5rem;
}

input[type="date"]:required:valid,
input[type="datetime-local"]:required:valid,
input[type="email"]:required:valid,
input[type="file"]:required:valid,
input[type="month"]:required:valid,
input[type="number"]:required:valid,
input[type="password"]:required:valid,
input[type="search"]:required:valid,
input[type="tel"]:required:valid,
input[type="text"]:required:valid,
input[type="time"]:required:valid,
input[type="url"]:required:valid,
input[type="week"]:required:valid,
textarea:required:valid,
select:required:valid,
.obm-group-checkbox.valid,
.obm-group-radio.valid,
.obm-autocomplete-multi.obm-required.obm-field-valid {
    /* Force the background color for invalid fields */
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px solid var(--cp-darkgray);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDBBMTRCIiBkPSJNMi41MjQsMTAuOTUybC0xLjI1OCwyLjUxNmMtMC4xNTMsMC4zMDYtMC4wNjEsMC42NzksMC4yMTgsMC44NzhsNS45NzUsNC4yNjhjMC4zMDMsMC4yMTYsMC43MjIsMC4xNTYsMC45NTItMC4xMzZMMTguNjcsNS40MmMwLjE5NS0wLjI0OCwwLjE5OS0wLjU5NSwwLjAxLTAuODQ4bC0yLjAyMy0yLjY5OGMtMC4zMDYtMC40MDgtMC45MzEtMC4zNTktMS4xNzEsMC4wOUw4LjQ4NywxNS4wODdjLTAuMjMyLDAuNDM2LTAuODMyLDAuNDk4LTEuMTQ5LDAuMTE4bC0zLjY1Ny00LjM4OEMzLjM2LDEwLjQzMiwyLjc0OSwxMC41MDMsMi41MjQsMTAuOTUyeiIvPjwvc3ZnPg==) no-repeat;
    background-position: calc(100% - 7px) 8px;
    background-size: 20px;
    background-color: var(--cp-white);
    -moz-box-shadow: none;
    padding-right: 45px;
    transition: background-color 0.3s ease-in;
}

.obm-group-checkbox.valid,
.obm-group-radio.valid {
    background-color: transparent;
}

select[multiple="multiple"]:required {
    padding-right: 45px;
    background-position-x: calc(100% - 25px) !important;
}

input[type="date"]:focus:invalid:required,
input[type="datetime-local"]:focus:invalid:required,
input[type="email"]:focus:invalid:required,
input[type="file"]:focus:invalid:required,
input[type="month"]:focus:invalid:required,
input[type="number"]:focus:invalid:required,
input[type="password"]:focus:invalid:required,
input[type="search"]:focus:invalid:required,
input[type="tel"]:focus:invalid:required,
input[type="text"]:focus:invalid:required,
input[type="time"]:focus:invalid:required,
input[type="url"]:focus:invalid:required,
input[type="week"]:focus:invalid:required,
select:focus:invalid:required,
textarea:focus:invalid:required,
.obm-group-checkbox.invalid,
.obm-group-radio.invalid {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px var(--cp-error) solid;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTQuODUyLDE4Ljg3N0wxMC40LDEyLjE5NGMtMC4xOTgtMC4yOTctMC42MzUtMC4yOTctMC44MzIsMC4wMDFsLTQuNDE5LDYuNjhDNS4wNTYsMTkuMDE2LDQuODk5LDE5LjEsNC43MzIsMTkuMUgyLjAyNGMtMC40MTYsMC0wLjY1LTAuNDc5LTAuMzk0LTAuODA3bDYuMjQzLTcuOTg5YzAuMTQzLTAuMTgyLDAuMTQxLTAuNDM5LTAuMDA0LTAuNjJMMS42NDksMS45MTJDMS4zODgsMS41ODUsMS42MjEsMS4xLDIuMDM5LDEuMWgyLjY5N2MwLjE2NSwwLDAuMzE5LDAuMDgxLDAuNDEyLDAuMjE3bDQuNDIzLDYuNDQ5YzAuMTk4LDAuMjg5LDAuNjI0LDAuMjg5LDAuODIzLDAuMDAxbDQuNDU2LTYuNDUyQzE0Ljk0NCwxLjE4MSwxNS4wOTgsMS4xLDE1LjI2MiwxLjFoMi42ODZjMC40MjEsMCwwLjY1MywwLjQ4OSwwLjM4NywwLjgxNWwtNi4zMzYsNy43NjZjLTAuMTQ5LDAuMTgyLTAuMTUsMC40NDMtMC4wMDQsMC42MjdsNi4zNTgsNy45ODJjMC4yNjEsMC4zMjcsMC4wMjgsMC44MTEtMC4zOTEsMC44MTFoLTIuNjk2QzE1LjEsMTkuMSwxNC45NDQsMTkuMDE2LDE0Ljg1MiwxOC44Nzd6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
    background-position: calc(100% - 7px) 8px;
    background-size: 20px;
    background-color: var(--cp-invalid);
    -moz-box-shadow: none;
    padding-right: 45px;
    transition: background-color 0.3s ease-in;
}

input[type="checkbox"]:invalid:required {
    border: 1px var(--cp-error) solid;
    background-color: var(--cp-invalid);
    transition: background-color 0.3s ease-in;
}

input[type="date"]:invalid:not(:required),
input[type="datetime-local"]:invalid:not(:required),
input[type="email"]:invalid:not(:required),
input[type="file"]:invalid:not(:required),
input[type="month"]:invalid:not(:required),
input[type="number"]:invalid:not(:required),
input[type="password"]:invalid:not(:required),
input[type="search"]:invalid:not(:required),
input[type="tel"]:invalid:not(:required),
input[type="text"]:invalid:not(:required),
input[type="time"]:invalid:not(:required),
input[type="url"]:invalid:not(:required),
input[type="week"]:invalid:not(:required),
select:invalid:not(:required),
textarea:invalid:not(:required),
.obm-group-checkbox.invalid,
.obm-group-radio.invalid {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    border: 1px var(--cp-error) solid;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRUQxQzI0IiBkPSJNMTQuODUyLDE4Ljg3N0wxMC40LDEyLjE5NGMtMC4xOTgtMC4yOTctMC42MzUtMC4yOTctMC44MzIsMC4wMDFsLTQuNDE5LDYuNjhDNS4wNTYsMTkuMDE2LDQuODk5LDE5LjEsNC43MzIsMTkuMUgyLjAyNGMtMC40MTYsMC0wLjY1LTAuNDc5LTAuMzk0LTAuODA3bDYuMjQzLTcuOTg5YzAuMTQzLTAuMTgyLDAuMTQxLTAuNDM5LTAuMDA0LTAuNjJMMS42NDksMS45MTJDMS4zODgsMS41ODUsMS42MjEsMS4xLDIuMDM5LDEuMWgyLjY5N2MwLjE2NSwwLDAuMzE5LDAuMDgxLDAuNDEyLDAuMjE3bDQuNDIzLDYuNDQ5YzAuMTk4LDAuMjg5LDAuNjI0LDAuMjg5LDAuODIzLDAuMDAxbDQuNDU2LTYuNDUyQzE0Ljk0NCwxLjE4MSwxNS4wOTgsMS4xLDE1LjI2MiwxLjFoMi42ODZjMC40MjEsMCwwLjY1MywwLjQ4OSwwLjM4NywwLjgxNWwtNi4zMzYsNy43NjZjLTAuMTQ5LDAuMTgyLTAuMTUsMC40NDMtMC4wMDQsMC42MjdsNi4zNTgsNy45ODJjMC4yNjEsMC4zMjcsMC4wMjgsMC44MTEtMC4zOTEsMC44MTFoLTIuNjk2QzE1LjEsMTkuMSwxNC45NDQsMTkuMDE2LDE0Ljg1MiwxOC44Nzd6Ii8+PC9nPjwvc3ZnPg==) no-repeat;
    background-position: calc(100% - 7px) 8px;
    background-size: 20px;
    background-color: var(--cp-invalid);
    -moz-box-shadow: none;
    padding-right: 45px;
    transition: background-color 0.3s ease-in;
}

textarea, .obm-group-radio, .obm-group-checkbox {
    background-position-y: 0.65rem !important; /* Places the background image in the top right corner*/
    padding-right: 45px;
}

    input:disabled,
    select:disabled,
    textarea:disabled,
    .obm-group-checkbox:disabled,
    .obm-group--group:disabled {
        background-color: var(--in-disabled);
        cursor: not-allowed !important;
    }

/* ==================================================================== END FORMS AND INPUT ===========================================================================*/
/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 5. Frames - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 5.1 iframe */
iframe {
}
/* ========================================================================= END FRAMES ===============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 6. Images - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 6.1 img */
img {
}

/* 6.2 map */
map {
}

/* 6.3 area */
area {
}

/* 6.4 canvas */
canvas {
}

/* 6.5 figcaption */
figcaption {
}

/* 6.6 figure */
figure {
}

/* 6.7 picture */
picture {
}

/* 6.8 svg */
svg {
}
/* ========================================================================= END IMAGES ===============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 7. Audio / Video  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 7.1 audio */
audio {
}

/* 7.2 source */
source {
}

/* 7.3 track */
track {
}

/* 7.4 video */
video {
}
/* ====================================================================== END AUDIO/VIDEO =============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 8. Links  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 8.1 a */
a {
    color: var(--cp-crimson);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

    a.obm-disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
        transition: opacity 0.3s ease-out;
    }

main a[target='_blank']:after {
    display: inline-block;
    margin-left: 5px;
    font-family: var(--fa-name);
    content: '\f08e';
    font-size: 0.9rem;
}

a.obm-link-launch {
    background-color: #14499E;
    border-color: #14499E;
    color: var(--cp-white);
    border-radius: 4px;
    padding: 1rem;
    text-decoration: none;
    text-align: center;
}

@media screen and (max-width: 480px) {
    a.obm-link-launch {
        width: 100%;
        display: block;
        margin-bottom: 0.3rem;
        text-align: center;
    }
}

/* 8.2 nav */
nav {
}
/* ====================================================================== END AUDIO/VIDEO =============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9. Lists  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 9.1 ul */
ul {
}

    ul.obm-ul-fa {
        list-style: none;
    }

        ul.obm-ul-fa > li:before {
            content: '\f192';
            font-family: var(--fa-name);
            display: inline-block;
            font-size: 0.8rem;
            margin-right: 0.3rem;
        }

/* 9.2 ol */
ol {
}

    ol ol {
        list-style: lower-alpha
    }

        ol ol ol {
            list-style: lower-roman
        }

/* 9.3 li */
li {
    margin-top: 0.2rem
}

/* 9.4 dl */
dl {
}

/* 9.5 dt */
dt {
}

/* 9.6 dd */
dd {
}
/* ====================================================================== END LISTS =============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 10. Tables  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
table {
    border-collapse: collapse;
}

    table:not(.calendar) caption {
        background: linear-gradient(135deg, var(--cp-mediumgray) 0%, var(--cp-lightgray) 50%, var(--cp-mediumgray) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        font-size: 1.2rem;
        color: var(--cp-black);
        padding: 0.3rem;
        border: 1px solid var(--cp-darkgray);
        margin-bottom: 5px;
    }

    table:not(.calendar) th {
        padding: 0.35rem;
        border-collapse: collapse;
        color: var(--tbl-col-text);
        background-color: var(--tbl-th-bg);
    }

        table:not(.calendar) th:not(:last-child) {
            border-right: solid 1px var(--tbl-th-border);
        }

    table:not(.calendar):not(.disbaleHighlight) tbody tr:hover {
        background-color: var(--tbl-row-hover) !important; /*!important used for the rows that are striped */
    }

    table:not(.calendar) tfoot tr:hover {
        background-color: unset !important;
    }

    table.obm-table-nostripes tr {
        background-color: unset;
    }

    table:not(.obm-table-nostripes):not(.calendar) tr:nth-child(even) {
        background-color: var(--tbl-row-striping);
    }

    table:not(.calendar) td {
        padding: 0.5rem;
        border: solid 1px var(--tbl-cell-border);
        border-collapse: collapse;
    }

.obm-table-cell-justify-left {
    text-align: left;
}

.obm-table-cell-justify-right {
    text-align: right;
}

.obm-table-cell-justify-center {
    text-align: center;
}

table:not(.calendar) thead {
}

    table:not(.calendar) thead > tr {
        border: 1px solid var(--tbl-cell-border);
    }

table:not(.calendar) tbody {
}


table:not(.calendar) tfoot {
}

table:not(.calendar) col {
}

table:not(.calendar) colgroup {
}


/* Sticky Table Header */
.stickyHeader {
    position: relative;
}

    .stickyHeader th {
        position: sticky;
        top: 110px;
    }

@media screen and (max-width: 768px) {
    table:not(.calendar) {
        width: 100%;
        background-color: var(--tbl-bg);
    }

        table:not(.calendar) tbody {
            border-color: var(--cp-lightgray);
            padding: 0.8rem;
            display: grid;
            /*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
            grid-gap: 0.8rem;
            /*max-height: 60vh;
        overflow-y: scroll;*/
        }

        /*tbody:before {
            content: 'Tap the record to view more information. Tap it again to collapse.';
            font-size: 0.8rem;
            display: block;
            grid-column: 1 / -1;
            text-align: center;
        }*/

        table:not(.calendar) thead, tr > th {
            display: none;
            grid-column: -1 / -1;
        }

        table:not(.calendar) tr {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
        }

    tr > td.obm-maintenance-edit-cell {
        grid-column: 1 / -1;
    }

    table:not(.calendar) tr:hover {
        background-color: unset !important;
    }


    table:not(.calendar) tr:active {
        background-color: unset;
    }

    /*tr:active > td, td.obm-mobile-show-temp {
                display: table-cell;
            }*/


    tr td:before {
        content: attr(data-header);
        font-weight: bold;
        color: var(--cp-font);
        display: block;
        font-size: 0.65rem;
        margin-bottom: 0.1rem;
        height: 2ch;
    }

    table:not(.calendar) td {
        background-color: var(--cp-white);
    }

        /*td:not(.obm-mobile-show) {
            display: none;
        }*/

        table:not(.calendar) td:first-child {
            border-top: solid 1px var(--tbl-cell-border);
            border-left: solid 1px var(--tbl-cell-border);
            border-right: solid 1px var(--tbl-cell-border);
            border-bottom: solid 1px var(--tbl-cell-border);
        }

    td:not(:first-child) {
        border-top: none;
        border-left: solid 1px var(--tbl-cell-border);
        border-right: solid 1px var(--tbl-cell-border);
        border-bottom: solid 1px var(--tbl-cell-border);
        border-collapse: collapse;
    }

    /*td.obm-mobile-show:first-child {
            border-top: solid 1px var(--tbl-cell-border);
        }*/


    .obm-table-colheader {
        display: none;
    }
}
/* ====================================================================== END TABLES =============================================================================*/

/* =================================================================================================================================================================== */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 12. Containers  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =================================================================================================================================================================== */
/* 12.1 details */
details {
    padding: 0 0 0.1rem;
    border-radius: 5px;
    border: none;
    background: #F2F2F2;
    margin-bottom: 0.4rem;
    list-style: none; /* Because of stupid IE */
    border-radius: 5px;
}

    details > * {
        margin: 1rem;
    }

    details:not([open])::after {
        display: block;
        content: '...';
        letter-spacing: 1ch;
        margin-top: -0.6rem;
        text-align: center;
        height: 2rem;
    }

    details[open]:after {
        content: '';
        height: 0;
    }


@media screen and (max-width: 480px) {
    details > * {
        margin: 0.25rem;
    }
}

summary {
    margin: 0 0 1rem 0;
    background: var(--cp-verylightgray);
    font-size: 1.1rem;
    padding: 0.5rem;
    border-radius: 5px;
    color: var(--cp-black);
    cursor: pointer;
}
/* ===================================================================== END CONTAINERS =============================================================================*/