/* Styles for the Razor pages (login, recovery, activation). The markup kept Bootstrap's class
   names; this reproduces the handful of them in use with Bootstrap 4.6's values, so the whole
   framework (160 KB, none of its JavaScript used) no longer ships with the login page. */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
        "Liberation Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background: #3A3A3C;
    overflow: hidden;
}

h1, h2, h3, h6 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h6 { font-size: 1rem; }
p, ul { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img { vertical-align: middle; border-style: none; }
a { color: #007bff; text-decoration: none; }
a:hover { color: #0056b3; text-decoration: underline; }
label { display: inline-block; margin-bottom: .5rem; color: white !important; }
input, button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
input { border: none; border-radius: 2px; }

.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col-12, .col-sm-12, .col-md-4, .col-md-8 {
    position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
}
.col-12 { flex: 0 0 100%; max-width: 100%; }

.form-group { margin-bottom: 1rem; }
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: none;
    border-radius: 2px;
}
.form-control:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.form-control[readonly] { background-color: #e9ecef; }
.form-text { display: block; margin-top: .25rem; }
.form-check { position: relative; display: block; padding-left: 1.25rem; }
.form-check-input { position: absolute; margin-top: .3rem; margin-left: -1.25rem; }
.form-check-label { margin-bottom: 0; }

.btn {
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
}
.btn:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.btn:disabled { opacity: .65; cursor: default; }
.btn-primary { color: #3A3A3C; background-color: #ffcf01; border-color: #3A3A3C; }
.btn-primary:hover:not(:disabled) { background-color: #e6ba00; }

.alert { padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-light { color: #f8f9fa !important; }
a.text-light:hover { color: #cbd3da !important; }
.text-muted { color: #6c757d !important; }
.text-danger { color: #dc3545 !important; }
.text-uppercase { text-transform: uppercase !important; }
.font-weight-bold { font-weight: 700 !important; }
.w-100 { width: 100% !important; }
.vh-100 { height: 100vh !important; }
.m-0 { margin: 0 !important; }
.m-2 { margin: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-5 { margin-top: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: .5rem !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.position-relative { position: relative !important; }
.shadow-none { box-shadow: none !important; }
.clearfix::after { display: block; clear: both; content: ""; }

.wrapper-page { width: 80%; max-width: 350px; }
.wrapper-page h2 { margin: 20px 0; }
h2 > img { max-height: 120px; height: 100%; }
#small-logo { width: 80%; }
#big-logo { height: 90vh; }

@media (min-width: 576px) {
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mt-md-5 { margin-top: 3rem !important; }
    .p-md-5 { padding: 3rem !important; }
    .d-md-flex { display: flex !important; }
}

@media (max-width: 768px) {
    #big-logo { height: auto; width: 100%; }
}