/**
* Core
**/
body {
    color: #FCFCFC;
    background: #02182B;
    font-family: 'Red Hat Text';
}

/**
* Classes
**/
.btn {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    padding: 3px !important;
    border-radius: 0 !important;
    font-family: 'Red Hat Text Bold';
    font-size: 14px;
}

.btn-blue {
    background:#0197F6;
    border: 1px solid #0197F6;
    color: #FCFCFC;
}

.btn-blue:hover {
    background:#0197F6;
    border: 1px solid #0197F6;
    color: #FCFCFC;
    filter: brightness(110%);
}

.btn-darkblue {
    background: #02182B;
    border: 1px solid #02182B;
    color: #FCFCFC;
}

.btn-darkblue:hover {
    background:#02182B;
    border: 1px solid #02182B;
    color: #FCFCFC;
    filter: brightness(150%);
}

.btn-red {
    background: #E15554;
    border: 1px solid #E15554;
    color: #FCFCFC;
}

.btn-red:hover {
    background:#E15554;
    border: 1px solid #E15554;
    color: #FCFCFC;
    filter: brightness(85%);
}

.small {
    font-size: 14px;
}

.form-control-pass {
    background-color: #4C4C4C !important;
    color: #FCFCFC !important;
    border: 2px solid #0197F6;
    border-radius: 0;
    text-align: center;
}

.form-sales {
    border: 2px solid #0197F6;
    border-radius: 0;
    padding: 2px 4px;
}

.toast {
    font-family: 'Red Hat Text Bold';
    margin-top: 3px !important;
    border: 1px solid #0197F6 !important;
    color: #02182B !important;
    background: #FCFCFC !important;
}

.modal {
    color: #02182B;
}

.alert-primary {
    border: 1px solid #E15554;
    border-radius: 0;
    background: #E15554;
    color: #FCFCFC;
}

/**
* Color Classes
**/
.blue {
    color: #0197F6;
}

.darkblue {
    color: #02182B;
}

.red {
    color: #E15554;
}

.dark {
    color: #4C4C4C;
}

.white {
    color: #FCFCFC;
}

/**
* Content
**/
#centeredContainer {
    width: 97%;
    max-width: 1200px;
    position: absolute;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%, -40%);
    transform: translate(-50%, -40%);
}

#main {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    color: #02182B;
    background: #FCFCFC;
}

/**
* Footer
**/
#footer {
    width: 100%;
}

#footerContent {
    font-size: 14px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: .5em 0;
}

#footerContent a {
    color: #E15554;
}

#footerContent a:hover {
    color: #FCFCFC;
}

/**
* Font Classes
**/
.redhat {
    font-family: 'Red Hat Text';
}

.redhatbold {
    font-family: 'Red Hat Text Bold';
}

.redhatdisplay {
    font-family: 'Red Hat Display';
}

.redhatmono {
    font-family: 'Red Hat Mono';
}

/**
* Font Families
**/
@font-face {
    font-family: 'Red Hat Display';
    src: url('../font/RedHatDisplay-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text Bold';
    src: url('../font/RedHatText-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../font/RedHatText-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Mono';
    src: url('../font/RedHatMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@media(max-width: 768px) {
    .mobileTextCenter {
        text-align: center;
    }

    .mobileTopDivide {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 2px solid #0197F6;
    }

    .mobileSalesMargin {
        margin-top: 15px;
    }

    .hideOnMobile {
        display: none !important;
    }
}