/* TABLE OF CONTENTS
    01. General
    02. Header
    03. Footer
    04. Search Bar
    05. User
    06. Admin
    07. Pagination
    08. Forms
    09. 404
    10. Chat
    11. Icons
    12. Seminars
    13. Badges
    14. Confirm Modal
    15. Queries
        a. Mobile
        b. Tablet
        c. iPad Pro
*/

/* 01. GENERAL */
    :root {
        --white: #fff;
        --off-white: #F4F4F4;
        --black: #000;
        --grey: #727272;
        --light-grey: #EBEBEB;
        --dark-grey: #323232;
        --red: #A31F37;
        --green: #1fa335;
        --dark-red: #711B2B;
        --light-red: #D40B2F;
        --yellow: #f6af0ae2;
    }
    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 1em;
        font-weight: 500;
        background: var(--off-white);
        color: var(--grey);
    }
    * { font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif; }
    a { 
        color: var(--red); 
        text-decoration: none;
    }
    a:hover, a:focus { 
        text-decoration: underline; 
        color: var(--light-red);
    }
    .main-body {
        min-height: calc(100% - 100px);
        padding-bottom: 100px;
        overflow-x: hidden;
        font-size: 1em;
    }
    .main-body.chat { padding-bottom: 270px; }
    .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; }
    .btn-success { 
        background: var(--red); 
        border: 0;
        outline: 0;
    }
    .btn-success:hover { background: var(--light-red); }
    .container.white, .container-fluid.white { background: var(--white); }
    .errs {
        border: 5px solid var(--red);
        margin-bottom: 20px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
    }
    .errs strong { font-size: 1.4em; }
    .btn {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        padding: 10px;
        color: var(--red);
        font-weight: 600;
    }
    button.btn { padding: 6px; }
    .btn span {
        position: relative;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .btn:hover, .btn:focus, .btn:target, .btn.ghost {
        border-bottom: 2px solid var(--red);
        text-decoration: none;
        color: var(--red);
    }
    .btn.no-outline:hover, .btn.no-outline:focus, .btn.no-outline:target {
        border-bottom: 0;
    }
    a.btn.back {
        background: none;
        color: var(--grey);
        border: 0;
        font-size: 1.4em;
        font-weight: 700;
    }
    a.btn.back:hover, a.btn.back:focus, a.btn.back:target {
        color: var(--red);
        border: 0;
    }
    h1, h2, h3, h4, h5, h6 {
        text-align: center;
        color: var(--red);
        font-weight: 600;
    }
    h1.grey, h2.grey, h3.grey, h4.grey, h5.grey, h6.grey {
        color: var(--grey);
    }
    .red { color: var(--red); }
    .green { color: var(--green); }
    .yellow { color: var(--yellow); }
    .icon .btn:hover, .icon .btn:focus, .icon .btn:target { border: 2px solid var(--white); }
    .pfp .btn { color: var(--white); }
    .pfp .btn:hover, .pfp .btn:focus, .pfp .btn:target { border: 0; }
    a p.black { color: var(--black); }
    strong.large {
        font-size: 1.2em;
    }
    button {
        border: 0;
        outline: 0;
        color: var(--red);
        background: none;
    }


/* 02. HEADER */
    header {
        z-index: 198;
        top: 0;
        width: 100%;
        background: var(--white);
    }
    #header {
        position: relative;
        height: 200px;
        overflow: hidden;
    }
    #header img.bg {
        position: absolute;
        width: 100%;
        z-index: -1;
        bottom: 40%;
        left: 50%;
        transform: translate(-50%, 50%);
    }
    #header .bg-cover {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--red);
        opacity: 0.2;
    }
    #header .header-socials { 
        position: absolute; 
        bottom: 0;
        width: 100%;
    }
    #header .header-socials .icon { 
        width: 60px; 
        display: block;
        margin-bottom: 10px;
    }
    #header .header-socials h1 { 
        text-align: left;
        color: var(--white);
    }
    #header .header-socials a { 
        color: var(--white);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1.4em;
    }
    #header .header-socials a:hover, #header .header-socials a:focus, #header .header-socials a:target {
        text-decoration: none;
    }
    a.back {
        position: absolute;
        top: 10%;
        left: 20px;
        color: var(--grey);
        font-size: 1.2em;
        font-weight: 700;
    }
    a.back:hover, a.back:focus, a.back:target {
        color: var(--red);
        text-decoration: none;
    }
    .col-12.title { position: relative; }



/* 03. FOOTER */
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: var(--dark-grey);
    }
    footer section.container { 
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
    }  
    footer section.container .logo a {
        display: block;
        text-align: center;
        color: var(--grey);
    }
    footer section.container .logo a:hover, footer section.container .logo a:focus, footer section.container .logo a:target { 
        text-decoration: none; 
        color: var(--white);
    }
    footer section.container .logo a.active {
        color: var(--white);
        font-weight: bold;
    }
    footer section.container .logo a img { 
        width: 30px;
        margin-bottom: 5px;
    }


/* 04. SEARCH */
    select { -webkit-appearance: none; }
    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(--red);
    }
    div.search input { padding: 2.5px 10px; }
    div.search button { padding: 3.5px 10px; }
    div.search select { padding: 6px 10px; }
    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;
    }
    a.result {
        display: block;
    }
    form input.search-term {
        padding: 4px;
    }
    .search-type, select {
        background: var(--white);
        padding: 6px 10px;
    }
    #results li {
        border-top: 2px solid var(--light-grey);
        margin-bottom: 10px;
        padding-top: 10px;
    }


/* 05. USER */
    body { height: 100%;}
    .cms {
        background: var(--light-grey);
        color: var(--black);
    }
    .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(--red); 
        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(--red); }
    .cms div.row .dot { margin: 0 auto; }
    ul.main-nav {
        position: relative;
        right: 0;
        top: 10px;
        list-style: none;
        padding: 20px;
    }
    ul.main-nav li h1 { font-weight: 700; }
    ul.main-nav li a {
        display: block;
        width: 100%;
        padding: 20px;
        font-size: 1.2em; 
        font-weight: 600;
        color: var(--grey);
        border-top: 1px solid var(--grey);
    }
    ul.main-nav li a img, #menu.menu-opened a img {
        display: inline-block;
    }
    ul.main-nav li a img { width: 50px; }
    #menu.menu-opened a img {
        width: 30px;
        margin-right: 10px;
    }
    ul.main-nav li a:hover , ul.main-nav li a:focus, ul.main-nav li a:target {
        text-decoration: none;
        font-weight: 800; 
        color: var(--white);
        background: var(--red);
        border-top: 1px solid var(--red);
    }
    .more ul.main-nav li a:hover, .more ul.main-nav li a:focus, .more ul.main-nav li a:target {
        color: var(--red);
        background: transparent;
    }
    ul.main-nav li a.add {
        display: inline;
        border: 0;
        color: var(--red);
        padding: 10px;
    }
    ul.main-nav li a.add:hover , ul.main-nav li a.add:focus, ul.main-nav li a.add:target {
        background: transparent;
        border-top: 0px;
        color: var(--grey);
    }
    .pfp {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .pfp.small {
        width: 50px;
        height: 50px;
    }
    .pfp figure {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: var(--red);
        overflow: hidden;
    }
    .pfp figure .bg {
        position: absolute;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .pfp .icon {
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--grey);
        border: 3px solid var(--off-white);
        overflow: hidden;
        color: var(--white);
    }
    .pfp .icon img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
    }
    .profile-info {
        position: relative;
    }
    .profile-info strong {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2em;
    }
    .about-socials i.fa-phone { transform: scaleX(-1); }
    .about-logos strong { font-size: 1.1em; }
    .about-logos img { width: 100%; }
    .notes { position: relative; }
    #tooltip {
        z-index: 2;
        position: absolute;
        display: none;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 90px;
        padding-top: 10px;
        background: var(--white);
        border: 2px solid var(--dark-grey);
        border-radius: 10px;
        text-align: center;
    }
    #tooltip button {
        position: absolute;
        left: 0;
        bottom: 0;
        background: var(--red);
        width: 100%;
        padding: 5px;
        outline: none;
        border: 2px solid var(--dark-grey);
        color: var(--white);
    }
    #tooltip button:hover, #tooltip button:focus, #tooltip button:target {
        background: var(--white);
        color: var(--red);
    }


/* 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(--red); }
    span.event.closed { background: var(--red); }
    div.event {
        margin-bottom: 40px;
        border-bottom: 1px solid var(--red);
        padding-bottom: 20px;
    }
    .err-box {
        display: block;
        margin-top: 20px;        
    }
    #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: 10px 10px 15px;
        margin-bottom: 10px;
    } 
    body.info .info-blocks span.event { top: 4px; }
    .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); }
    #chats .seminar i.fa-copy { font-size: 1.6em; }
    #chats .seminar i.fa-times { 
        position: relative;
        top: -4px; 
    }
    #chats .seminar i.fa-caret-right { 
        position: relative;
        top: -6px; 
    }
    #chats .seminar i.fa-times.fa-2x { 
        font-size: 2.2em;
    }
    #chats .seminar i.fa-caret-right.fa-2x { 
        font-size: 2.5em;
    }
    #export-section { display: none; }
    #loader {
        display: none;
    }
    #loader.visible {
        display: block !important;
    }
    .progress-bar {
        height: 40px;
        width: 50%;
        margin: 0 auto;
        border: 2px solid var(--dark-grey);
        position: relative;
        background: var(--grey);
    }
    .progress-bar-fill {
        height: 100%;
        width: 0%;
        background: var(--red);
        display: flex;
    }
    .progress-bar-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.25s;
    }
    #response {
        display: none;
        width: 80%;
        margin: 0 auto;
        border: 2px solid var(--red);
        padding: 10px;
        background: var(--light-grey);
        text-align: center;
        color: var(--red);
    }
    #options.search-options {
        display: none;
        width: 100%;
        height: 200px;
        border: 2px solid var(--red);
        padding: 10px;
        overflow-y: auto;
        resize: vertical;
    }
    #response.visible, #options.search-options.visible {
        display: block;
    }
    .data-header {
        background-image: none;
        background: var(--red);
        color: var(--white);
    }
    .google-visualization-table .gradient {
        background-image: none !important;
    }
    .google-visualization-table-div-page {
        padding: 5px !important;
        background-color: var(--red) !important;
    }
    .goog-custom-button-collapse-left .goog-custom-button-inner-box, .goog-custom-button-collapse-right .goog-custom-button-inner-box {
        padding: 4px !important;
        background: var(--white) !important;
        border: none !important;
        color: var(--dark-grey) !important;
    }
    .goog-custom-button-collapse-left {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .google-visualization-table-page-number, .google-visualization-table-page-number.current {
        font-size: 12px !important;
        padding: 2px 6px !important;
        background: var(--white) !important;
        border: none !important;
        color: var(--dark-grey) !important;
    }
    .google-visualization-table-page-number.current {
        font-weight: bold;
        color: var(--red) !important;
    }
    .goog-custom-button-disabled {
        display: none !important;
    }
    .google-visualization-table-div-page [role="button"] {
        font-size: 0.8em !important;
    }


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


/* 08. FORMS */
    form {
        padding: 10px;
        font-weight: 700;
    }
    form input, form textarea, form select, .form-btn, div.search input, div.search select {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 2px solid #d9d9d9;
        margin-bottom: 40px;
    }
    form label, form input, .form-btn {
        font-size: 1.2em;
    }
    form input, .form-btn { color: var(--grey); }
    form input[type=submit], .form-btn { 
        background: var(--red);
        color: var(--white);
        margin-bottom: 10px;
        border: 2px solid var(--red);
    }
    form input[type=submit]:hover, form input[type=submit]:focus, form input[type=submit]:target, .form-btn:hover, .form-btn:focus, .form-btn:target {
        background: var(--white);
        color: var(--red);
        border: 2px solid var(--red);
    }
    form input[type=submit].non-btn, .form-btn.non-btn { 
        color: var(--dark-grey); 
        background: none;
        font-weight: 900;
        border: 0;
    }
    form input[type=submit].non-btn:hover, form input[type=submit].non-btn:focus, form input[type=submit].non-btn:target, .form-btn.non-btn:hover, .form-btn.non-btn:focus, .form-btn.non-btn:target { 
        color: var(--red);
    }
    .password-input { position: relative; }
    .password-input img {
        width: 40px;
        position: absolute;
        top: 12%;
        right: 20px;
        transform: translateY((-50%));
    }
    .register-btn {
        position: relative;
        text-align: center;
        font-size: 1.2em;
        padding: 20px;
    }
    .register-btn input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .register-btn .background {
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--light-grey);
        z-index: -10;
        border-radius: 10px;
        border: 1px solid var(--grey);
    }
    .register-btn input:checked ~ .background {
        opacity: 1;
    }
    .register-btn img { 
        width: 100%; 
        margin-bottom: 10px;
    }
    .register-btn p { margin-bottom: 0; }
    .register-btn img, .register-btn p { cursor: pointer; }
    #contact-form {
        border: 2px solid var(--red);
        background: var(--white);
        padding: 10px;
    }
    form .hidden { display: none; }
    div.form-container {
        width: 100%;
        height: 300px;
        overflow-y: auto;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 2px solid #d9d9d9;
        margin-bottom: 40px;
    }
    div.form-container.tall { height: 500px; }
    .checkbox {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background: transparent url("/img/icons/ar-camera.png") no-repeat left top;
        background-size: cover;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkbox .checkmark:after {
        content: " ";
        position: absolute;
        display: none;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        width: 15px;
        height: 15px;
        background: var(--red);
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .checkbox:hover input ~ .checkmark:after {
        opacity: 0.5;
        display: block;
    }

    /* Show the checkmark when checked */
    .checkbox input:checked ~ .checkmark:after {
        display: block;
    }



/* 09. 404 */
    .err-page {
        position: relative;
        width: 100%;
        height: 100%;
        color: var(--red);
    }
    .err-page .row {
        position: relative;
        width: 100%;
        top: 50%;
        margin: 0 auto;
        transform: translateY(-50%);
        text-align: center;
        padding: 10px;
    }
    .err-page img, .err-page h1, .err-page h2, .err-page a { margin-bottom: 20px; }
    .err-page h1 { font-size: 3.4em; }
    .err-page h2 { font-size: 2em; }
    .err-page img { width: 100%; }
    .err-page a {
        margin-bottom: 10px;
        padding: 6px 20px;
        border: 2px solid var(--red);
        background: var(--red);
        color: var(--white);
        font-size: 1.6em;
        text-transform: uppercase;
    }
    .err-page a:hover, .err-page a:focus, .err-page a:target {
        background: var(--white);
        color: var(--red);
        border: 2px solid var(--red);
        text-decoration: none;
    }



/* 10. CHAT */
    ul#chats { list-style: none; }
    ul#chats li {
        margin-top: 10px;
        border-top: 1px solid var(--grey);
        padding-top: 15px;
    }
    #chat-form {
        position: fixed;
        bottom: 170px;
        width: 100%;
        height: 80px;
        margin: 0;
        padding: 0;
    }
    #chat-form form {
        background: var(--light-grey);
    }
    #chat-form.top {
        margin-bottom: 100px; 
    }
    #chat-form form { padding: 0; }
    #chat-form textarea, #chat-form input {
        width: 100%;
        border-radius: 0;
    }
    #chat-form textarea {
        position: relative;
        top: 2px;
        left: 50%;
        outline: 0;
        margin: 0;
        border: 2px solid var(--grey);
        padding: 10px;
        resize: none;
        width: 96%;
        transform: translateX(-50%);
    }
    .fa-pencil-alt.fa-2x { font-size: 1.6em; }




/* 11. ICONS */
    img.top-icon {
        width: 60px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }
    .status-icon {
        position: relative;
    }
    .status-icon span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }


/* 12. SEMINARS */
    .sem-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--off-white);
        display: none;
        z-index: 200;
    }
    .sem-panel #seminars-list {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    button.sem {
        background: transparent;
        outline: transparent;
        color: var(--red);
        font-size: 1em;
        font-weight: 700;
        border: 0;
    }
    .sem-panel button.sem {
        position: absolute;
        top: 25%;
        left: 4%;
        font-size: 1.2em;
    }
    #full-list, #prereqs-list {
        list-style: none;
        list-style-position: inside;
    }
    .sem-panel #full-list {
        position: relative;
        top: 20px;
        height: 100%;
        overflow-y: auto;
    }
    .sem-panel #full-list li, .sem-panel #roster-list li {
        border-bottom: 2px solid var(--light-grey);
        margin-bottom: 10px;
    }
    .schedule {
        position: relative;
        background: var(--white);
        padding: 10px;
        border-radius: 15px;
        margin-top: 4px;
        margin-bottom: 16px;
    }
    .schedule .time {
        font-size: 1.2em;
    }
    #schedule .schedule::after {
        content: " ";
        position: absolute;
        display: block;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 50px;
        background: var(--white);
    }
    #schedule .schedule.non-border::after, #schedule .schedule.null::after { display: none; }
    #schedule .schedule.null {
        background: transparent;
        border-radius: 0;
        border-bottom: 2px solid var(--red);
    }


/* 13. BADGES */
    .badge { font-size: 1em; }
    .badge button {
        background: none;
        border: 0;
        outline: none;
    }
    .badge figure {
        position: relative;
        width: 100%;
        text-align: center;
    }
    .badge strong {
        color: var(--dark-grey); 
        text-align: center;
        text-transform: uppercase;
    }
    .badge figure img {
        width: 100%;
    }
    .badge figure { margin-bottom: 10px; }
    .badge strong { margin-bottom: 40px; }
    .badge-admin {
        border: 1px solid var(--black);
        padding: 20px;
        text-align: center;
    }


/* 14. 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;
    }



/* 15. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            div#confirmation .container { width: 80%; }
            footer {
                height: 130px;
            }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .tablet-only { display: block !important; }
            div.search input { padding: 7px 10px; }
            div.search select { padding: 9px 10px; }
            div.search button { padding: 5px 10px; }
            div#confirmation .container { width: 80%; }
        }

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