/* =====================================================================
   SJ DJ - SONG REQUESTS - PAGE STYLES
   Dark theme for both public request page and admin live view
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&display=swap');

body {
    background-color:   #000000;
    color:              #ffffff;
}

/* =====================================================================
   HEADER / BRANDING
   ===================================================================== */

.walkout-header {
    text-align:         center;
    padding:            20px 0 10px;
    border-bottom:      1px solid #333333;
    margin-bottom:      24px;
}

.walkout-header .sm-brand {
    font-family:        'smFont', sans-serif;
    font-size:          24px;
    color:              #ffffff;
    margin-bottom:      6px;
}

.walkout-header .sm-brand span {
    color:              #CC0000;
    font-weight:        800;
}

.walkout-header h1 {
    font-family:        'Nunito', sans-serif;
    font-size:          22px;
    font-weight:        800;
    color:              #ffffff;
    margin:             16px 0 4px;
}

.walkout-header p {
    font-family:        'Nunito', sans-serif;
    font-size:          13px;
    color:              #aaaaaa;
    margin:             0;
}

/* =====================================================================
   FORM ELEMENTS (public request page)
   ===================================================================== */

.form-group {
    margin-bottom:      18px;
}

.form-group label {
    display:            block;
    font-family:        'Nunito', sans-serif;
    font-size:          13px;
    font-weight:        600;
    color:              #cccccc;
    margin-bottom:      6px;
}

.form-group input {
    width:              100%;
    box-sizing:         border-box;
    background-color:   #1a1a1a;
    color:              #ffffff;
    border:             1px solid #444444;
    border-radius:      4px;
    padding:            10px;
    font-family:        'Nunito', sans-serif;
    font-size:          13px;
}

.form-group input:focus {
    outline:            none;
    border-color:       #CC0000;
}

.required {
    color:              #CC0000;
}

.btn-submit {
    width:              100%;
    padding:            14px;
    background-color:   #CC0000;
    color:              #ffffff;
    border:             none;
    border-radius:      4px;
    font-family:        'Nunito', sans-serif;
    font-size:          15px;
    font-weight:        700;
    cursor:             pointer;
    letter-spacing:     1px;
    text-transform:     uppercase;
    transition:         background-color 0.2s;
}

.btn-submit:hover {
    background-color:   #aa0000;
}

.success-box {
    background:         #1a1a1a;
    border:             1px solid #2e7d32;
    border-radius:      6px;
    padding:            30px 20px;
    text-align:         center;
    font-family:        'Nunito', sans-serif;
}

.success-box h2 {
    color:              #4caf50;
    margin:             0 0 10px;
}

.success-box p {
    color:              #cccccc;
    margin:             0;
}

.errorMsg {
    color:              #ff5555;
    font-family:        'Nunito', sans-serif;
    font-size:          13px;
}

/* =====================================================================
   ADMIN LIVE REQUESTS TABLE
   ===================================================================== */

#calendarSection {
    background:         transparent;
}

#eventsTable {
    width:               100%;
    border-collapse:     collapse;
}

#eventsTable th,
#eventsTable td {
    font-family:         'Barlow Condensed', 'Nunito', sans-serif;
    font-size:            18px;
    font-weight:          600;
    padding:              12px 14px;
    border-bottom:        1px solid #333333;
    color:                #f0f0f0;
}

#eventsTable th {
    background-color:    #1a1a1a;
    text-transform:       uppercase;
    font-size:            15px;
    font-weight:          800;
    letter-spacing:       1px;
    color:                #ffffff;
}

#eventsTable tr:hover {
    background-color:    #1a1a1a;
}

/* =====================================================================
   LOGIN FORM
   ===================================================================== */

#loginForm input {
    background-color:   #1a1a1a;
    color:              #ffffff;
    border:             1px solid #444444;
}

/* =====================================================================
   FOOTER
   ===================================================================== */

#footer-glucose {
    display:            none !important;
}