/* # Custom Empire styling in addition to basic Bootstrap
Headings/subheadings commented using Markdown conventions (with # marks) */

/* ## Basic color definition */
:root {
    --sapph-shores: #12284C;
    --emp-skies: #5b89b4;
    --emp-accent: #a2c7e2;
}

/* ## Global font definition */
@font-face {
    font-family: ProximaNova;
    src: url("fonts/proxima_nova_reg.otf");
}

@font-face {
    font-family: ProximaNova;
    font-weight: bold;
    src: url("fonts/proxima_nova_bold.otf");
}

* {
    font-family: ProximaNova;
}

/* ## Page body/header/footer/margin definitions (so that the footer renders properly */
html {
    position: relative;
    min-height: 100%;
}

nav {
    background-color: var(--sapph-shores);
}

body {
    margin-bottom: 60px; /* Margin bottom by footer height */
}

.page-section {
    /* padding: 2rem 15%; */
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 62px;
}

.footer-container {
    height: 100%;
    background-color: var(--sapph-shores);
}

.footer-text {
    color: white;
}

/* ## Image size constraints */
.empire-logo-login {
    width: 150px;
    height: 150px;
}

img {
    height: 3rem;
    margin: 1rem;
}


/* ## Form controls */
input.submit {
    background-color: white !important;
}

.form-check-input:checked {
    background-color: var(--sapph-shores);
    border-color: var(--emp-accent);
}

/* ## Alerts */
.alert {
    border-style: solid;
    border-width: 3px;
    background-color: white;
    font-weight: bold;
    border-radius: 0;
}

.alert-primary {
    border-color: var(--emp-skies);
    color: var(--emp-skies);
}

.alert-secondary {
    border-color: #D3D3D3;
    color: #D3D3D3;
}

.alert-success {
    border-color: #15c14c;
    color: #15c14c;
}

.alert-danger {
    border-color: #c20b11;
    color: #c20b11;
}

/* ## Buttons, Lists, Accordions */
/* ### Buttons */
.btn {
    border-style: solid;
    border-width: 3px;
    font-weight: bold;
    border-radius: 0;
    background-color: white;
}

.btn-danger {
    border-color: #c20b11;
    color: #c20b11;
}

.btn-success {
    border-color: #15c14c;
    color: #15c14c;
}

.btn-primary {
    border-color: var(--sapph-shores);
    color: var(--sapph-shores);
}

.btn-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.btn-primary:hover {
    border-color: var(--sapph-shores);
    background-color: var(--emp-skies);
}

/* ### Links */
.links-list {
    display: flex;
    flex-direction: column;
}

.links-list-no-padding {
    padding: 0;
}

.links-list a.link-item {
    font-weight: bold;
    padding: 1em 2em;
    margin: 0.5rem 0;
    border-radius: 0.5em;
    width: 100%;
    border: None;
    background-color: var(--sapph-shores);
    color: white;
    transition: all 0.25s ease-out;
    text-decoration: none;
}

.links-list a.link-item:not(:hover) {
    color: var(--sapph-shores);
    background-color: var(--emp-accent);
}

/* ### Accordions */
.accordion {
    border-width: 0 !important;
}

.accordion-item, .accordion-header, .accordion-body {
    border-width: 0;
}

.accordion-button {
    background-color: var(--emp-skies);
    font-weight: bold;
    font-size: 20px;
    color: white;
    border-radius: 0 !important;
}

.accordion-button.collapsed {
    color: white;
    border-width: 0;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e") !important;
    background-size: 1.5rem;
}

.accordion-button:not(.collapsed) {
    color: var(--sapph-shores);
    background-color: var(--emp-accent);
    border-width: 0;
    --bs-accordion-border-width: 0;
}

.accordion-button:not(.collapsed)::after {
    color: var(--sapph-shores);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2312284C'%3e%3cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'/%3e%3c/svg%3e") !important;
    background-size: 1.5rem;
}

/* ### Lists and List Items */
.homepage-item {
    border: solid var(--emp-accent) 3px;
    text-align: center;
    color: red;
    height: 280px;
    width: 280px;

}

.homepage-item-link {
    text-decoration: none;
    color: var(--sapph-shores);
    /*height: 100%;
    width: 100%;*/
}

.homepage-item:hover {
    background-color: var(--emp-accent);
    transition: all 0.25s ease-out;

}

.list-group-item-action {
    border: solid var(--emp-accent) 3px;
    border-radius: 0;
}

.list-group {
    border-radius: 0;
}

.bg-emp-skies {
    background-color: var(--emp-skies) !important;
    color: white;
}

.bg-sapph-shores {
    background-color: var(--sapph-shores) !important;
    color: white;
}

/* ## Tables */
thead {
    background-color: var(--sapph-shores);
}

th {
    color: white;
}


/* ## Other Text */
h1 {
    font-weight: bold;
    font-size: 2.5rem;
    color: var(--sapph-shores);
}

h1.instance-title {
    font-size: 2.5rem;
}

h2 {
    font-weight: bold;
}


.subtitle {
    margin-top: 0;
    font-size: 2.1rem;
    color: var(--emp-skies);
}

h3.subtitle {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--sapph-shores)
}

@media (max-width: 500px) {
    h3.subtitle {
        font-size: 1.2rem;
    }

    .subtitle {
        font-size: 1.9rem;
    }
}