/* TABLE OF CONTENTS
    01. General
    02. Header
    03. Footer
    04. Search Bar
    05. User
    06. Admin
    07. Pagination
    08. Confirm Modal
    09. User Add Panel
    10. Queries
        a. Mobile
        b. Tablet
        c. iPad Pro
*/

/* 01. GENERAL */
    :root {
        --white: #fff;
        --black: #000;
        --grey: #707070;
        --light-grey: #EBEBEB;
        --red: #BE1F44;
        --green: #1a9a1e;
        --blue: #1A3B74;
        --yellow: #fbd900;
    }
    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 1em;
        font-weight: 500;
        color: var(--black);
    }
    * { font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif; }
    a { 
        color: var(--red); 
        text-decoration: none;
    }
    a:hover, a:focus { text-decoration: underline; }
    .main-body {
        min-height: calc(100% - 100px);
        overflow-x: hidden;
        font-size: 1em;
    }
    .mobile-hide { display: block; }
    .mobile-only { display: none !important; }
    .tablet-only { display: none !important; }
    .quarter-width { width: 25%; }
    .half-width { width: 50%; }
    .three-quarter-width { width: 75%; }
    .full-width { width: 100%; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .text-uppercase { text-transform: uppercase; }
    .header-light { font-weight: 500; }
    .header-medium { font-weight: 700; }
    .header-heavy { font-weight: 900; }
    h2 { font-size: 2em; }
    .hide { display: none; }
    div.underlined { border-bottom: 1px solid var(--black); }
    .toggle-btn {
        padding: 0;
        color: var(--red);
    }
    .toggle-btn:hover, .toggle-btn:focus, .toggle-btn:target {
        padding: 0;
        color: #0a58ca;
        text-decoration: underline;
    }
    .green { color: var(--green); }
    .btn-primary {
        background: var(--blue);
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:target, .btn-primary:active {
        background: var(--red);
        text-decoration: none;
    }


/* 02. HEADER */
    header {
        z-index: 198;
        top: 0;
        width: 100%;
        background: var(--white);
    }
    .fixed-nav {
        position: fixed;
        top: 0;
    }
    .header-disabled {
        background: var(--red);
        color: var(--white);
        text-align: center;
        padding: 10px;
    }
    .header-links {
        z-index: 198;
        width: 100%;
        background: var(--blue);
    }
    .header-links a {
        display: block;
        float: left;
        width: 16%;
        height: 100%;
        padding: 15px 6px;
        font-size: 0.9em;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        color: var(--white);
    }
    .header-links a:hover, .header-links a:focus, .header-links a:target { 
        background: var(--red); 
        color: var(--white);
    }
    .header-links ul {
        list-style: none;
        list-style-position: inside;
        margin: 0;
        padding: 0;
    }
    #menu-toggle {
        display: none;
        margin-bottom: 4px;
        font-size: 1.6em;
        text-transform: uppercase;
        text-align: right;
        color: var(--blue);
    }
    .menu-opened {
        z-index: 999;
        position: fixed;
        left: 0;
        top: 0;
        width: 104%;
        height: 100%;
        padding: 14px;
        background: var(--light-grey);
        color: var(--blue);
    }
    .menu-opened ul li a, .menu-opened ul li a:visited { color: var(--blue); }
    .menu-opened ul li a:active, .menu-opened ul li a:focus, .menu-opened ul li a:hover { color: var(--blue); }
    .page-nav {
        z-index: 199;
        width: 100%;
        padding: 10px;
        background: var(--white);
    }
    .page-nav.submenu {
        z-index: 195;
        width: 100%;
    }
    .page-nav.fixed-nav {
        top: 48px;
        border-bottom: 2px solid var(--blue);
    }
    .page-nav a {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--green);
    }
    .page-nav a:hover {
        font-weight: 900;
        color: var(--orange);
    }
    .page-nav .container .row div {
        border-left: 2px solid var(--blue);
        text-align: center;
    }
    .page-nav .container .row div:first-child { border-left: 0; }
    .page-nav ul {
        border: 2px solid var(--blue);
        padding: 10px;
        list-style: none;
    }
    .page-nav ul li {
        border: 0px solid var(--blue);
        padding: 4px;
        text-align: center;
    }

/* 03. FOOTER */
    footer {
        height: 100px;
        background: var(--white);
        display: none;
    }
    footer section.container { max-width: 100%; }
    footer section.container, footer div.row { height: 100%; }
    footer div.logo {
        padding: 20px 10px;
        text-align: center;
    }
    footer img.logo { width: 200px; }
    footer div.menu {
        background: var(--red);
        padding: 10px;
        font-size: 1.4em;
        position: relative;
        color: var(--white); 
        cursor: pointer;
    }
    footer div.menu span {        
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

/* 04. SEARCH */
    div.search, .search div { position: relative; }
    div.search div { padding: 0; }
    div.search input, div.search button, div.search select { width: 100%; }
    div.search button {
        border: 0;
        color: var(--white); 
        background: var(--blue);
    }
    div.search input { padding: 2.5px 10px; }
    div.search button { padding: 3.5px 10px; }
    div.search select { 
        padding: 6px 10px; 
        background: none;
    }
    div.search button:hover { background: var(--red); }   
    div.search input, div.search select { border: 1px solid var(--grey); }
    .results ul { 
        margin: 0;
        padding: 0;
    }
    .results li { 
        list-style: none; 
        list-style-position: outside;
        padding: 10px;
        border-bottom: 1px solid var(--grey);
    }
    a.result {
        display: block;
        margin-bottom: 10px;
    }


/* 05. USER */
    body { height: 100%;}
    .cms {
        background: var(--light-grey);
        color: var(--black);
    }
    .cms.uncolored { background-color: transparent; }
    .cms.user div.main-body { margin-top: 100px; }
    .cms h2 { text-align: center; }
    .cms form label { 
        margin-bottom: 10px;
        color: var(--black); 
    }
    .cms form input, .cms form select, .cms form textarea {
        padding: 10px;
        border: 2px solid var(--grey);
        border-radius: 10px 0 10px 0;
        background: var(--light-grey);
    }
    .cms form input, .cms form textarea, .cms form select { 
        width: 100%; 
        background: var(--white);
    }
    .cms form input.error { border: 2px solid var(--red); }
    .cms form input:focus, .cms form input:active { 
        border: 2px solid var(--blue); 
        outline: none;
    }
    .cms form input:read-only {
        border: 0;
        cursor: default;
        background: transparent;
    }
    .cms div.row { margin-bottom: 10px; }
    .cms div.row div.col-12 { margin-bottom: 24px; }
    .cms div.row div.col-2 { text-align: center; }
    .cms div.row label { font-weight: 600; }
    .cms button[type=submit] {
        display: block;
        width: 100%;
        border: 2px solid var(--grey);
        margin: 0 auto;
        padding: 10px;
        background: var(--white);
        font-size: 1.2em;
        font-weight: 600;
        color: var(--red);
    }
    .cms button[type=submit]:disabled {
        border: 1px solid var(--grey);
        background: var(--grey);
        color: var(--white);
        opacity: 0.1;
    }
    .cms div.row div.selections div {  margin-bottom: 10px; }
    .cms div.row div.selections.radio div {  text-align: center; }
    .cms div.row input[type=radio], .cms div.row input[type=checkbox] {
        place-content: center;
        -webkit-appearance: none;
        appearance: none;
        background: var(--light-grey);
        font: inherit;
        color: var(--red);
        width: 1.15em;
        height: 1.15em;
        border-radius: 50%;
        transform: translate(-0.25em, 0.35em);        
    }
    .cms div.row input[type=checkbox] { border-radius: 0; }
    .cms div.row input[type=radio]::before, .cms div.row input[type=checkbox]::before {
        display: block;
        content: "";
        position: relative;
        top: -0.5em;
        left: -0.5em;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        transform: scale(0);
        box-shadow: inset 1em 1em var(--red);
        background: var(--red);
    }
    .cms div.row input[type=checkbox]::before { border-radius: 0; }
    .cms div.row input[type="radio"]:checked::before, .cms div.row input[type="checkbox"]:checked::before { transform: scale(1); }
    div#nav-btns {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: var(--white);
        padding: 24px 0;
        --bs-gutter-x: 0;
        text-align: center; 
    }
    .cms div#nav-btns button[type=submit] {
        background: transparent;
        border: 0;
    }
    .cms div#nav-btns button[type=submit] img {
        width: 20px;
        height: 20px;
    }
    div#nav-btns .subtitle {  padding-top: 15px; }
    .dot {
        display: block;
        width: 30px;
        height: 30px;
        background: var(--grey);
        border-radius: 50%;
    }
    .dot.small {
        width: 20px;
        height: 20px;
    }
    .dot.active { background: var(--green); }
    .cms div.row .dot { margin: 0 auto; }
    .err-box {
        padding: 20px;
        background: var(--red);
        color: var(--white);
        text-align: center;
    }
    .err-box h2 { text-align: center; }
    .err-box a {
        color: var(--white);
        text-decoration: underline;
    }


/* 06. ADMIN */
    span.event {
        position: relative;
        top: 9px;
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--black);
    }
    span.event.open { background: var(--green); }
    span.event.closed { background: var(--red); }
    span.event.pending { background: var(--yellow); }
    div.event {
        margin-bottom: 40px;
        border-bottom: 1px solid var(--red);
        padding-bottom: 20px;
    }
    .err-box {
        display: block;
        margin-top: 20px;        
    }
    .err-box a {
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
    }
    #signups-feed details {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--grey);
    }
    #signups-feed .user { 
        padding: 10px;
        border: 1px solid var(--grey);
    }
    #signups-feed details summary {
        font-size: 1.4em;
        font-weight: 700;
    }
    #signups-feed details .user { margin-top: 10px; }
    #signups-feed details .user .full-name { font-size: 1.2em; }
    form input:read-only {
        border: 0;
        cursor: default;
    }
    .cms.admin form input, .cms.admin form select, .cms.admin form textarea { border-radius: 0; }
    body.info .info-blocks { background: var(--light-grey); } 
    body.info .info-blocks .info-block { 
        background: var(--white); 
        padding: 15px 10px;
        margin-bottom: 10px;
    } 
    body.info .info-blocks span.event { top: 4px; }
    .info-block h2 { margin-top: 10px; }
    .approval-btns a {
        display: inline-block;
        padding: 10px;
        background: var(--red);
        color: var(--white);
        font-size: 1.2em;
    }
    .approval-btns a:hover {
        text-decoration: none;
        background: var(--red);
        color: var(--white);
        font-size: 1.2em;
    }
    button.btn.download { color: var(--red); }
    button.btn.download:hover, button.btn.download:focus, button.btn.download:target { text-decoration: 1px solid var(--red); }
    .review-select {
        border: 2px solid var(--black);
        outline: 0;
        padding: 10px;
        background: var(--white);
        color: var(--red);
        font-weight: 700;
    }


/* 07. PAGINATION */
    .pagination {
        width: 100%;
        text-align: center;
    }


/* 08. CONFIRM MODAL */
    div#confirmation {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.7);
        display: none;
    }
    div#confirmation .container {
        position: fixed;
        z-index: 1001;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        background: var(--white);
        border: 2px solid var(--red);
        padding: 20px;
    }
    div#confirmation button {
        border: 2px solid var(--red);
    }
    div#confirmation button:hover {
        border: 2px solid var(--red);
        background: var(--red);
        color: var(--white);
    }
    div#confirmation textarea, div#confirmation input {
        padding: 10px;
    }
    div#confirmation #errors.errors {
        border: 2px solid var(--red);
        padding: 10px;
    }
    form#populations-form {
        width: 100%;
        height: 200px;
        border: 2px solid var(--red);
        overflow-y: auto;
    }



/* 09. USER ADD PANEL */
    div#users-panel {
        position: fixed;
        top: 0;
        lefT: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        z-index: 999;
        display: none;
    }
    div#users-panel select {
        background: var(--white);
    }
    div#users-panel a.cancel, #users-list button {
        display: inline-block;
        padding: 2px 10px;
        background: var(--red);
        color: var(--white);
        font-size: 1.2em;
    }
    div#users-panel .loading {
        font-size: 2em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--red);
        margin-top: 20px;
    }
    div#users-panel .loading img {
        width: 50px;
    }


/* 10. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            body.float-nav { margin-top: 350px; }
            #menu-toggle { display: block; }
            .mobile-head {
                z-index: 999;
                position: fixed;
                top: 0;
                left: 0;
                background: #fff;
                box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.1);
            }
            #menu ul { display: none; }
            #menu.menu-opened ul {
                display: block;
                position: absolute;
                top: 20%;
                left: 0;
                width: 100%;
                padding: 0;
                text-align: center;
            }
            #menu.menu-opened a {
                clear: both;
                width: 100%;
                margin-bottom: 10px;
                padding: 10px;
            }
            .header-links a { color: var(--blue); }
            footer { display: block; }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .header-links a {
                width: 25%;
                height: auto;
                padding: 5px;
            }
            .header-socials .fas, .header-socials .fab, .footer-socials .fas, .footer-socials .fab {
                margin-bottom: 12px;
                margin-top: 5px;
                font-size: 0.8em;
            }
            .tablet-only { display: block !important; }
            .header-socials .fab.fa-facebook-f, .footer-socials .fab.fa-facebook-f { padding: 6px 10px; }
            div.search input { padding: 7px 10px; }
            div.search select { padding: 9px 10px; }
            div.search button { padding: 5px 10px; }
            footer { display: block; }
        }

    /* c. iPad Pro */
        @media only screen and (width: 1024px) and (height: 1366px) and (orientation: portrait) {
            
        }