/* Shared DanceCore typography and Bootstrap component accents. */
:root {
    --brand-blue: #320eb3;
    --brand-blue-hover: #260b89;
    --font-body: "Montserrat", sans-serif;
    --font-heading: "Playfair Display", Georgia, serif;
}

body, button, input, select, textarea,
.tooltip, .popover, .ui-widget, .sweet-alert {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.panel-title, .panel .panel-heading, .white-box .box-title,
.popover-title, .fs-title, .fs-subtitle {
    font-family: var(--font-heading);
}

a {
    color: var(--brand-blue);
}
a:hover, a:focus {
    color: var(--brand-blue-hover);
}

.pagination > li > a, .pagination > li > span {
    color: var(--brand-blue);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.form-control:focus {
    border-color: var(--brand-blue);
}

/* Fill the photo area without extending underneath the login panel. */
@media (min-width: 768px) {
    .login-home {
        height: 100vh;
        padding: 0;
        background: none !important;
    }

    .login-home::before {
        content: "";
        position: absolute;
        inset: 0 400px 0 0;
        background: url('/img/front-page.jpg?v=2') center center / cover no-repeat;
    }
}