/* STYLEGUIDE */
:root {
    --black: #050505;
    --grey-700: #313E4D;
    --grey-600: #646B79;
    --grey-500: #898F9F;
    --grey-400: #CED2DB;
    --grey-300: #DCDEE8;
    --grey-200: #E7E9F1;
    --grey-100: #F0F0F7;
    --grey-50: #FAFAFC;
    --white: #FFFFFF;
    --brand-500: #0A2647;
    --brand-400: #1F477F;
    --brand-300:  #2D5EA4;
    --brand-250: #8DAAD1;
    --brand-200: #7AADEB;
    --brand-100: #C7E2FF;
    --brand-50: #EEF6FF;
    --green: rgba(36,138,61, 1);
    --green-light: rgba(36,138,61, 0.1);
    --red: rgba(255, 59, 48, 1);
    --red-light: rgba(255, 59, 48, .1);
    --yellow: rgba(255, 159, 10, 1);
    --yellow-light: rgba(255, 159, 10, .1);
    --blue: rgba(0, 122, 255, 1);
    --blue-light: rgba(0, 122, 255, .1);
    --green-300: #338F52;
    --yellow-300: #EFB615;
    --red-300: #E13B5C;

    --border-radius: 8px;
    --border-radius-lg: 16px;
    --border-radius-circle: 100px;

    --left-nav-col-width: 70px;
}

/* COLORS */
.c-brand-500 { color: var(--brand-500) !important; }
.c-base-1, .text-primary, .c-primary, .btn-base-5, .btn-link, .heading:hover>a, .link--style-2, .link--style-2:hover {
    color: var(--brand-300) !important;
}
.c-primary-light { color: var(--brand-200) !important; }
.c-primary-xlight { color: var(--brand-100) !important; }
.c-gray { color: var(--grey-600) !important; }
.c-gray-light { color: var(--grey-500) !important; }
.c-green { color: var(--green) !important; }
.c-white.c-white { color: var(--white) !important; }

.text-700 { color: var(--grey-700) !important; }
.text-muted { color: var(--grey-600) !important; }
.text-muted-light { color: var(--grey-400) !important; }

/* BACKGROUNDS */
.bg-base-1,
.btn-back-to-top,
.bg-primary,
.navbar-branded {
    background-color: var(--brand-300) !important;
}
.bg-base-1-light,
.bg-primary-light {
    background-color: var(--brand-50) !important;
}
.bg-base-1-dark,
.bg-primary-dark {
    background-color: var(--brand-500) !important;
}
.bg-green { background-color: var(--green) !important; }
.bg-muted { background-color: var(--grey-50) !important; }

/* NAVIGATION */
.navbar-inverse .navbar-nav .nav-link {
    color: var(--white) !important;
}

/* TYPOGRAPHY */
.heading, .display, .section-title .section-title-inner, h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif !important;
}
body, p {
    font-family: "Inter", sans-serif !important;
    color: var(--grey-600) !important;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
    font-weight: 600 !important;
}
h1, .heading-1 {
    font-size: 32px !important;
    line-height: 42px !important;
}
h2, .heading-2 {
    font-size: 24px !important;
    line-height: 34px !important;
}
h3, .heading-3 {
    font-size: 20px !important;
    line-height: 28px !important;
}
h4, .heading-4 {
    font-size: 18px !important;
    line-height: 26px !important;
}
h5, .heading-5 {
    font-size: 16px !important;
    line-height: 24px !important;
}
h6, .heading-6 {
    font-size: 14px !important;
    line-height: 22px !important;
}

/* LABELS */
label, .label-lg, .label-md, .label-sm {
    font-weight: 500 !important;
    color: var(--black) !important;
}

/* LINKS */
a, a:hover, .link, .link:hover, .link--style-1:hover, .meta-category a, .meta-category a:hover {
    color: var(--brand-300) !important;
}
a.c-white:hover,
a.c-primary-xlight:hover,
a.c-primary-light:hover {
    color: var(--white) !important;
}

/* BUTTONS */
.btn {
    font-weight: 500 !important;
    border-width: 2px !important;
    padding: 8px 20px !important;
    border-radius: var(--border-radius-circle) !important;
}
.btn-lg, .btn-styled.btn-lg {
    padding: 12px 24px !important;
    font-size: 20px !important;
    border-radius: var(--border-radius) !important;
}
.btn-sm, .btn-styled.btn-sm {
    padding: 4px 12px !important;
}
.btn-xs, .btn-styled.btn-xs {
    padding: 2px 6px !important;
}
.btn-icon { padding: 4px 6px !important; }
.btn-round { border-radius: var(--border-radius) !important; }
.btn-primary, .btn-base-1,
.tabs--style-1 .nav-tabs>li>a.active {
    background-color: var(--brand-300) !important;
    border-color: var(--brand-300) !important;
    color: var(--white) !important;
}
.btn-secondary,
.tabs--style-1 .nav-tabs>li>a:hover:not(.active) {
    background-color: var(--brand-50) !important;
    border-color: var(--brand-50) !important;
    color: var(--brand-400) !important;
}
.btn-base-1:hover,
.btn-primary:hover,
.btn-secondary:hover {
    background-color: var(--brand-400) !important;
    border-color: var(--brand-400) !important;
    color: var(--white) !important;
}
.btn-tertiary {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--brand-300) !important;
}
.btn-tertiary:hover,
.btn-tertiary:focus {
    background-color: var(--brand-100) !important;
    border-color: var(--brand-100) !important;
    color: var(--brand-400) !important;
}
.btn:hover,
.btn-base-1:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover {
    opacity: 1 !important; /* Remove this when public pages are fixed */
}
.btn:focus,
.btn-base-1:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-tertiary:focus {
    border-color: var(--brand-200) !important;
    opacity: 1 !important;
}
.btn.disabled, .btn:disabled {
    opacity: .5 !important;
}
.btn-success, .btn-success:hover {
    background-color: var(--green-300) !important;
    border-color: var(--green-300) !important;
    color: var(--white) !important;
}
.btn-danger, .btn-danger:hover {
    background-color: var(--red-300) !important;
    border-color: var(--red-300) !important;
    color: var(--white) !important;
}
.btn-tertiary-danger, .btn-tertiary-danger:hover {
    color: var(--red-300) !important;
}

/* BORDERS */
.border { border-color: var(--grey-100) !important; }

/* BORDER RADIUS */
.rounded { border-radius: var(--border-radius) !important; }
.rounded-xl { border-radius: var(--border-radius-lg) !important; }
.rounded-sm { border-radius: 4px !important; }

/* BADGES */
.badge {
    padding: 9px 14px !important;
    border-radius: var(--border-radius) !important;
    line-height: 1 !important;
}
.badge-pro {
    color: var(--brand-300);
    background-color: var(--brand-100);
}
.badge-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.badge-xs {
    padding: 4px 6px !important;
    font-size: 10px !important;
}

/* BADGE COLORS */
.alert.alert-success,
.badge.badge-success {
    color: var(--green) !important;
    background-color: var(--green-light) !important;
}
.alert.alert-danger,
.badge.badge-danger {
    color: var(--red) !important;
    background-color: var(--red-light) !important;
}
.alert.alert-warning,
.badge.badge-warning {
    color: var(--yellow) !important;
    background-color: var(--yellow-light) !important;
}
.alert.alert-info,
.badge.badge-info {
    color: var(--blue) !important;
    background-color: var(--blue-light) !important;
}

/* SPACING AND SIZES */
.container-xl {
    max-width: 1600px;
    padding-left: 24px;
    padding-right: 24px;
}
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }