/* Fight Games visual theme. */

:root {
    --fg-bg: #171717;
    --fg-header: #141414;
    --fg-panel: #202020;
    --fg-field: #191919;
    --fg-text: #f4f4f0;
    --fg-muted: #c3c3bb;
    --fg-line: #44443d;
    --fg-yellow: #ffd400;
    --fg-yellow-hover: #ffe86a;
    --fg-danger: #ff5f57;
}

html,
body {
    min-height: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--fg-bg);
    background-image:
        linear-gradient(180deg, rgba(23, 23, 23, .2), rgba(23, 23, 23, .94)),
        url(../img/bg.jpg);
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100vh, cover;
    background-attachment: fixed, fixed;
    color: var(--fg-text);
}

header {
    background: var(--fg-header);
    border-bottom: 3px solid var(--fg-yellow);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

header #logo {
    display: inline-block;
}

header #logo img {
    filter: invert(1);
}

#mobile-menu,
#mobile-menu:hover,
#mobile-menu:active,
#mobile-menu:focus {
    color: var(--fg-yellow);
}

#main {
    background: var(--fg-panel);
    color: var(--fg-text);
    border: 1px solid var(--fg-line);
    border-radius: 0;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .48);
}

.container .jumbotron {
    background: #181818;
    border-bottom: 1px solid var(--fg-line);
}

.jumbotron img {
    border-radius: 0;
    border: 1px solid rgba(255, 212, 0, .32);
}

.home-page .jumbotron {
    background: transparent;
    border-bottom: 0;
}

.home-page .jumbotron img {
    display: block;
    width: 100%;
}

.home-page .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-page .buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
}

.home-page .desktop-break {
    display: none;
}

@media (min-width: 768px) {
    .container {
        width: 100%;
        max-width: 1320px;
    }

    .home-page .desktop-break {
        display: block;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

h1 {
    border-left: 8px solid var(--fg-yellow);
    padding-left: 18px;
}

h2 {
    color: var(--fg-yellow);
}

p,
li,
label,
.checkbox label {
    color: var(--fg-text);
}

em,
.lead {
    color: var(--fg-muted);
}

a,
.help-link {
    color: var(--fg-yellow);
}

a:hover,
a:focus,
.help-link:hover,
.help-link:focus {
    color: var(--fg-yellow-hover);
}

.btn,
.btn-lg,
.btn-primary,
.btn-default,
button,
input[type="button"],
input[type="submit"] {
    border-radius: 0;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.btn-primary,
.btn-primary:visited,
input.btn-primary,
button.btn-primary {
    background: var(--fg-yellow);
    border-color: var(--fg-yellow);
    color: #000;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
input.btn-primary:hover,
input.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
    background: var(--fg-yellow-hover);
    border-color: var(--fg-yellow-hover);
    color: #000;
    outline: 2px solid rgba(255, 212, 0, .42);
    outline-offset: 2px;
}

.btn-default {
    background: #242424;
    border-color: var(--fg-line);
    color: var(--fg-text);
}

.btn-default:hover,
.btn-default:focus {
    background: #303030;
    border-color: var(--fg-yellow);
    color: #fff;
}

.form-title {
    border-bottom-color: var(--fg-line);
}

.form-title h2 {
    color: #fff;
}

.application-section {
    margin: 0 0 28px;
}

.application-section-title {
    border-bottom: 1px solid rgba(255, 212, 0, .42);
    color: var(--fg-yellow);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 22px;
    padding: 0 0 10px;
    text-transform: none;
}

.application-section .help-block {
    color: #8f8f86;
}

span.radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 0;
}

span.radio > input[type="radio"] {
    flex: 0 0 auto;
    float: none;
    margin: 0 8px 0 0;
    position: static;
}

span.radio > label {
    flex: 0 0 auto;
    float: none;
    margin: 0 34px 0 0;
    padding: 0;
}

.form-control,
select.form-control,
textarea.form-control {
    background: var(--fg-field);
    border: 1px solid #4b4b43;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--fg-yellow);
    box-shadow: inset 0 0 0 1px var(--fg-yellow);
}

.form-control::placeholder {
    color: #8d8d85;
}

fieldset {
    border: 0;
}

hr,
table,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-color: var(--fg-line);
}

.text-warning,
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: var(--fg-danger);
}

.outdated {
    background: #201900;
    border-color: #806900;
    color: var(--fg-text);
}

.nav-pills.nav-wizard > li {
    border-color: var(--fg-bg);
}

.nav-pills.nav-wizard > li a {
    background: #242424;
    color: var(--fg-muted);
}

.nav-pills.nav-wizard > li .nav-arrow {
    border-color: transparent transparent transparent #242424;
}

.nav-pills.nav-wizard > li .nav-wedge {
    border-color: #242424 #242424 #242424 transparent;
}

.nav-pills.nav-wizard > li.active a {
    background: var(--fg-yellow);
    color: #000;
}

.nav-pills.nav-wizard > li.active .nav-arrow {
    border-color: transparent transparent transparent var(--fg-yellow);
}

.nav-pills.nav-wizard > li.active .nav-wedge {
    border-color: var(--fg-yellow) var(--fg-yellow) var(--fg-yellow) transparent;
}

.progress {
    background: #242424;
    border-radius: 0;
    box-shadow: none;
}

.progress .progress-bar {
    background-color: var(--fg-yellow);
    color: #000;
}

footer,
footer a,
footer a:hover,
footer a:focus {
    color: var(--fg-muted);
}

footer {
    border-top: 0;
}

@media (min-width: 992px) {
    .home-page {
        display: grid;
        grid-template-columns: minmax(420px, 50%) minmax(0, 1fr);
        gap: 42px;
        align-items: start;
    }

    .home-page .jumbotron {
        margin: 0;
        padding: 0;
    }

    .home-page h1 {
        border-left: 0;
        margin-top: 26px;
        padding-left: 0;
    }

    .home-page h2 {
        font-size: 34px;
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    body {
        background-color: var(--fg-bg);
        background-image: none;
    }

    header {
        background: var(--fg-header);
        border-bottom-color: var(--fg-yellow);
    }

    header ul.start-nav {
        background: var(--fg-header);
        border-top-color: var(--fg-line);
    }

    #main {
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    h1 {
        margin-left: 15px;
        margin-right: 15px;
    }

    .home-page .jumbotron {
        margin: 0 -15px;
    }

    .home-page .home-copy > p,
    .home-page .home-copy > ol,
    .home-page .home-copy > h2,
    .home-page .home-copy > .buttons {
        padding-left: 15px;
        padding-right: 15px;
    }

    .home-page .home-copy > ol {
        padding-left: 42px;
    }

    .home-page .home-copy > ol li {
        margin-bottom: 12px;
        padding-left: 4px;
    }

    .home-page .buttons {
        display: block;
    }

    .form-title h2 {
        margin-bottom: 16px;
    }

    span.radio {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 14px;
        align-items: center;
    }

    span.radio > input[type="radio"] {
        margin: 0;
    }

    span.radio > label {
        display: block;
        margin: 0;
    }

    .form-title .help-link {
        float: none;
        display: block;
        margin-top: 12px;
        padding-left: 0;
        white-space: normal;
        line-height: 1.35;
    }

    #main > p,
    #main > ol,
    #main > ul,
    #main > h2,
    #main > form,
    .regform {
        padding-left: 15px;
        padding-right: 15px;
    }

    #main > ol,
    #main > ul {
        padding-left: 42px;
    }

    #main > ol li,
    #main > ul li {
        margin-bottom: 12px;
        padding-left: 4px;
    }

    footer,
    footer a,
    footer a:hover {
        color: var(--fg-muted);
        border-top-color: var(--fg-line);
    }
}