/**
* Core
**/
body {
    font-family: 'Red Hat Text';
}

/**
* Modifier Classes
**/
li.nav-item.dropdown::marker {
    content: "";
}

.btn {
    font-family: 'Red Hat Text';
}

.footer {
    font-size: 14px !important;
}

.sidebar-brand {
    text-align: center !important;
}

.nav-title {
    font-size: 14px !important;
    padding-bottom: 5px !important;
}

.header {
    background-color: #272932 !important;
}

.header a, .header a:visited, .header-toggler {
    color: #ffffff;
}

.header a:hover, .header a:active, .header-toggler:hover {
    color: #ffffff;
    filter: brightness(75%);
}

.sidebar {
    background-color: #272932 !important;
}

.dropdown-menu {
    border: 1px solid #272932;
    background-color: #272932;
}

.dropdown-header {
    color: #ffffff !important;
    background-color: #D1C5C0 !important;
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover  {
    color: #ffffff;
    filter: brightness(75%);
    background: transparent !important; 
}

.breadcrumb-item {
    color: #ffffff;
}

.footer a {
    color: #272932;
    text-decoration: none;
}

.footer a:hover {
    color: #272932;
    text-decoration: underline;
}

/**
* Color Classes
**/
.black {
    color: #272932;
}

.red {
    color: #710000;
}

.yellow {
    color: #FDF500;
}

.keppel {
    color: #1AC5B0;
}

.blue {
    color: #37EBF3;
}

.purple {
    color: #9370DB;
}

.frost {
    color: #E455AE;
}

.pink {
    color: #CB1DCD;
}

.silver {
    color: #D1C5C0;
}

.bg-yellow {
    background-color: #FDF500;
}

.bg-keppel {
    background-color: #1AC5B0;
}

.bg-blue {
    background-color: #37EBF3;
}

.bg-blue {
    background-color: #37EBF3;
}

.bg-red {
    background-color: #710000;
}

.bg-dark {
    background-color: #272932;
}

.bg-dark-pop {
    background-color: #272932;
    border: 1px solid #FFFFFF;
}

.bg-dark-pop-yellow {
    background-color: #272932;
    border: 1px solid #FDF500;
}

.bg-keppel-blue {
    background-image: linear-gradient(135deg, #FDF500, #D1C5C0 80%);
}

.border-red {
    border: 1px solid #710000;
}

/**
* Button Classes
**/
.btn-red {
    color: #fff;
    background: #710000;
    border: 1px solid #710000;
}

.btn-red:hover {
    -webkit-filter: brightness(80%);
    color: #fff;
    background: #710000;
    border: 1px solid #710000;
}

.btn-yellow {
    color: #272932;
    background: #FDF500;
    border: 1px solid #FDF500;
}

.btn-yellow:hover {
    -webkit-filter: brightness(80%);
    color: #272932;
    background: #FDF500;
    border: 1px solid #FDF500;
}

.btn-dark {
    color: #FFFFFF;
    background: #272932;
    border: 1px solid #272932;
}

.btn-dark:hover {
    -webkit-filter: brightness(80%);
    color: #FFFFFF;
    background: #272932;
    border: 1px solid #272932;
}

.btn-link-dark {
    font-weight: 400;
    color: #272932;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: underline;
}

.btn-link-dark:hover {
    font-weight: 400;
    color: #272932;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-outline-yellow {
    background: transparent;
    color: #FDF500;
    border: 1px solid #FDF500;
}

/**
* Alerts
**/
.alert-yellow {
    color: #272932;
    background-color: #FDF500;
    border: 1px solid #FDF500;
}

.alert-blue {
    color: #272932;
    background-color: #37EBF3;
    border: 1px solid #37EBF3;
}

.alert-pink {
    color: #FFFFFF;
    background-color: #CB1DCD;
    border: 1px solid #CB1DCD;
}

.alert-frost-pink {
    color: #FFFFFF;
    background-image: linear-gradient(#E455AE, #CB1DCD);
    border: 1px solid #FFFFFF;
}

/**
* Font Classes
**/
.alpha {
    font-family: 'AlphaCentauri';
}

.text {
    font-family: 'Red Hat Text'; 
}

.bold {
    font-family: 'Red Hat Bold';
}

.mono {
    font-family: 'Red Hat Mono';
}

/**
* Font Family
**/
@font-face {
    font-family: 'AlphaCentauri';
    src: url('../font/AlphaCentauri.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../font/RedHatText-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Bold';
    src: url('../font/RedHatText-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Mono';
    src: url('../font/RedHatMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}