/* =====================================================================
   WALKOUT MUSIC - PAGE STYLES
   Black background, white text, SoundMonkey/GK Eventz branding
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');

@font-face {
    font-family:    'smFont';
    src:            url('https://soundmonkey-events.co.uk/assets/fonts/arista.ttf') format('truetype');
}

body {
    background-color:   #000000;
    color:              #ffffff;
    max-width:          640px;
    margin:             0 auto;
    padding:            20px;
}

/* =====================================================================
   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 .gk-brand {
    font-family:        'Bebas Neue', sans-serif;
    font-size:          16px;
    color:              #aaaaaa;
    letter-spacing:     3px;
}

.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
   ===================================================================== */

.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,
.form-group select,
.form-group textarea {
    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,
.form-group select:focus,
.form-group textarea:focus {
    outline:            none;
    border-color:       #CC0000;
}

.form-group select option {
    background-color:   #1a1a1a;
    color:              #ffffff;
}

.required {
    color:              #CC0000;
}

/* =====================================================================
   SUBMIT BUTTON
   ===================================================================== */

.btn-submit {
    display:            block;
    width:              100%;
    box-sizing:         border-box;
    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;
    text-decoration:    none;
    text-align:         center;
    transition:         background-color 0.2s;
}

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

/* =====================================================================
   QUESTION BUTTON
   ===================================================================== */

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

.btn-question:hover {
    background-color:   #CC0000;
    color:              #ffffff;
}

/* =====================================================================
   SUCCESS BOX
   ===================================================================== */

.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;
}

/* =====================================================================
   ERROR MESSAGE
   ===================================================================== */

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

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

.walkout-footer {
    border-top:         1px solid #333333;
    margin-top:         40px;
    padding-top:        16px;
    text-align:         center;
    font-family:        'Nunito', sans-serif;
    font-size:          11px;
    color:              #555555;
}

/* hide glucose widget in footer */
#footer-glucose {
    display:            none !important;
}