/*!
-------------------------------------------- 
* Admin Login CSS
* AUTHOR: The Belford Group
* Copyright (c) 2021
* Background pattern from Toptal Subtle Patterns
--------------------------------------------
*/

/* Basic Styles */
html, body { font-family: 'Fira Sans', sans-serif; background: url('/images/dusty-grey.png') repeat #eaeae7; }
body { min-height: 100vh !important; }
h1, h2, h3, h4 { font-family: 'Fira Sans', sans-serif; }
hr { border-top: 1px solid var(--secondary);}
.clickable, .btn-header > *:first-child > a.clickable { cursor: pointer !important; }
label.checkbox-inline { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn-outline-secondary:hover i.fa, .btn-outline-secondary:active i.fa, .btn-outline-secondary.active i.fa { color: #fff; }
.form-control { border-color: var(--secondary); }
.dropdown-menu.dropdown-hidden-visible { display: block !important; visibility: hidden !important; }
label.col-form-label { font-weight: bold; }

/* Cards */
.card { border-width: 2px; }
.fixed-hub-footer.fixed { margin: 0; z-index: 999; }

/* Login */
#login-logo-client { max-width: 75%; max-height: 8rem; height: auto; margin: 0 auto; text-align: center; }
#login-back-link {display:inline-block;padding:15px 0 15px 15px;}
@media (min-width: 768px) {
    #login-back-link { padding: 0; position: fixed; top: 2rem; left: 2rem; }
}
#login-card, #forgotpassword-card, #change-password-card { border: none; }
h1.login-h1 { font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.login-tos-links { text-align: center; margin-top: 0.75rem; }
.login-tos-links button { display: inline-block; font-size: 80%; padding: 0 0.5rem; }

/* Inputs */
body.backend .form-control { border-color: var(--secondary); border-radius: .25rem; }
body.backend .input-group.input-group-rounded > .form-control { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
body.backend .input-group .input-group-prepend .input-group-text { padding-left: 0; background: none; border: none; font-weight: bold; color: #888; }
body.backend .input-group .input-group-append .input-group-text { background: none; border: none; font-weight: bold; color: #888; padding-right: 0; }
body.backend .form-control:not(.datatable-search):focus { border-color: var(--primary); box-shadow: 0px 0px 0px 2px var(--primary); }
body.backend .form-control::placeholder { color: var(--secondary); opacity: 0.5; }
.custom-checkbox .custom-control-label::before { border-radius: .25rem; transform: scale(1.15); }
label.col-form-label { font-weight: bold; }

/* Validation */
span.required { margin-left: 3px; }
span.required, span.invalid, i.required { color: var(--danger); }
i.required { margin-left: 0.25rem; }
span.invalid { width: 100%; display: block; font-size: 0.9em; }
.has-error button.btn.multiselect { border-color: var(--danger); }
.has-error .invalid.jquery-validation-invalid { width: 100%; margin-top: .25rem; font-size: 80%; }
.has-error .input-group-prepend .input-group-text, .has-error .input-group-append .input-group-text { border-color: var(--danger); background: var(--danger); color: var(--danger); }
.has-error .input-group-prepend .input-group-text i, .has-error .input-group-append .input-group-text i { color: var(--danger); }
.has-error input.form-control, .has-error textarea.form-control { border-color: var(--danger); }
.has-error label.col-form-label { color: var(--danger); }

/* Bootstrap 4 Responsive Buttons */
@media (max-width: 575px) {
    .btn-xs-block { display: block; width: 100%; }
    .btn-xs-large { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
    .btn-xs-small { padding: .25rem .5rem; font-size: 0.875rem; border-radius: .2rem; }
}
@media (min-width: 576px) and (max-width: 767px) {
    .btn-sm-block { display: block; width: 100%; }
    .btn-sm-large { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
    .btn-sm-small { padding: .25rem .5rem; font-size: 0.875rem; border-radius: .2rem; }
}
@media (min-width: 768px) and (min-width: 991px) {
    .btn-md-block { display: block; width: 100%; }
    .btn-md-large { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
    .btn-md-small { padding: .25rem .5rem; font-size: 0.875rem; border-radius: .2rem; }
}
@media (min-width: 992px) and (min-width: 1199px) {
    .btn-lg-block { display: block; width: 100%; }
    .btn-lg-large { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
    .btn-lg-small { padding: .25rem .5rem; font-size: 0.875rem; border-radius: .2rem; }
}
@media (min-width: 1200px) {
    .btn-xl-block { display: block; width: 100%; }
    .btn-xl-large { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
    .btn-xl-small { padding: .25rem .5rem; font-size: 0.875rem; border-radius: .2rem; }
}