@import url("base_style.css");

:root {
    /* Core color */
    --core: #0276D4;
    /* Secondary colors */
    --light-gray: #F0F0F0;
    --dark-gray: #7B7B7B;
    --black: #222222;
    --sky-blue: #3399FF;
    /* Accent colors */
    --mint: #02B891;
    --dark-cyan: #029CA6;
    --dark-blue: #003087;
}

.bg-core {
    background-color: var(--core);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-black {
    background-color: var(--black);
}

.bg-sky-blue {
    background-color: var(--sky-blue);
}

.bg-mint {
    background-color: var(--mint);
}

.bg-dark-cyan {
    background-color: var(--dark-cyan);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.card-header-bg {
    background-color: var(--dark-cyan);
    color: #FFF;
}

.card-footer-btn {
    background-color: var(--core);
}

.btn-primary, .btn-primary:hover {
    background-color: var(--core);
    border-color: var(--core);
    color: #ffffff;
}

.dropdown-item.active,.dropdown-item:active,.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:focus-within {
    outline: 0;
    background-color: var(--core) !important;
    color: #fff
}

.login-notice {
    background-color: var(--sky-blue);
    border-color: var(--sky-blue);
}

.user-profile {
    background-color: var(--dark-cyan);
    border: 3px solid var(--black);
}

.brand-line::before {
    content: "";
    display: inline-block;
    width: 40px; /* length of the line */
    height: 8px;  /* thickness of the line */
    margin-right: 10px;
    background-color: var(--core);
}

footer {
    & .copyright {
        padding-left: 1.5rem;
    }
}