:root {
    --main-bg-color: #FFF;
    --main-text-color: #020617;
    --heading-color: #222226;
    --secondary-bg-color: #F7F7F7;
    --secondary-text-color: #3F3F46;
    --tertiary-bg-color: #F4F4F5;
    --tertiary-text-color: #71717A;
    --danger-color: #EF4444;
    --primary-color: #0E54ED;
    --primary-accent-fg: #2463EB;
    --primary-accent-bg: #ECF3FB;
    --primary-color-light: #60a5fa;
    --primary-color-lighter: #dbe9fe;
    --primary-color-dark: #1f40b0;
    --primary-color-darker: #172554;
    
    --info-color: #c0dbfe;
    --warning-color: #e8c568;
    --success-color: #2a9d90;
    --secondary-success-bg: #D1F5E1;
    --secondary-success-fg: #219656;
    --secondary-danger-bg: #FFD7D7;
    --secondary-danger-fg: #F90000;
    --secondary-warning-bg: #FDF7E6;
    --secondary-warning-fg: #EAB308;

    --accent-color-1: #2a9d90;
    --accent-color-1-light: #95cec8;
    --accent-color-2: #e76e50;
    --accent-color-2-light: #f3b7a8;
    --accent-color-3: #e8c568;
    --accent-color-3-light: #f4e2b4;
    --accent-color-4: #3b4388;
    --accent-color-4-light: #9da1c4;
    --accent-color-5: #264653;
    --accent-color-5-light: #516b75;
    --accent-color-6: #EF4444;
    --accent-color-6: #f78f8f;
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    color: var(--main-text-color);
    font-size: 14px;
    font-family: "Inter","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

.bg-secondary {
    background-color: var(--primary-color-dark) !important;
}

.nav.nav-pills {
    background-color: var(--tertiary-bg-color);
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
}

.nav.nav-pills .nav-link {
    text-decoration: none;
    color: var(--tertiary-text-color);
    border: none;
    background: transparent;
}

.nav.nav-pills .nav-link.active {
    background-color: var(--main-bg-color);
    border-radius: 6px;
    color: var(--main-text-color);
}

a {
    text-decoration: none;
    color: var(--main-text-color);
}

/** ---------------- Buttons ----------------------*/
.btn, .btn:focus, .btn:hover, .btn:active, .btn:active:focus {
    outline: none;
}

.btn {
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 14px;
    line-height: 20px;
}

.form-control-sm, .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.5;
}

.btn-link {
    border:none;
    background: transparent;
}

.btn.btn-primary, .btn.btn-danger {
    color: #FAFAFA;
}

.btn-primary:hover {
    background-color: #3C82F6;
    border-color: #3C82F6;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
    background: #2463EB;
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #2463EB;
    border-color:#FAFAFA;
}
.btn-primary:disabled, .btn-primary.disabled, .btn-danger:disabled, .btn-danger.disabled {
    opacity: 0.5;
}

.btn-danger:hover {
    background-color: #DC2626CC;
    border-color: #DC2626CC;
}
.btn-danger:active, 
.btn-danger:focus, 
.btn-default:focus, 
.btn-light:focus,
.btn-light:active, 
.btn-outline-light:focus {
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #60A5FA;
}


.btn-group-xs>.btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 6px;
}

.btn-outline-primary {
    color: var(--primary-color);
    background-color: transparent;
    border-color: var(--primary-color);
}

.btn-reset-filters {
    color: var(--danger-color);
    background-color: #fff;
    border-color: #ccc;
}

.btn-reset-filters:hover,
.btn-reset-filters:active,
.btn-reset-filters:focus {
    background-color: #e6e6e6;
}

.btn-light, .btn-light:active, .btn-light:focus  {
    color: #18181B;
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
}

.btn-light:hover{
    background: #E2E2E2;
}

.btn-outline-light {
    color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
}

.btn-outline-light:hover {
    background-color: #fff;
}

.btn-light:active, .btn-light:focus, .btn-light:not(:disabled):not(.disabled):active:focus,
.btn-info:active, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active:focus, 
.btn-info:not(:disabled):not(.disabled).active:focus{
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #60A5FA;
}

.btn-info:active, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active:focus {
    background-color: #ECF3FB;
    color: var(--primary-accent-fg);
    border-color: var(--primary-accent-fg);
}
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--primary-accent-fg);
    background-color: #ECF3FB;
    box-shadow: none;
    border-color: var(--primary-accent-fg);
}
.btn-info, .btn-secondary,
.btn-info:not(:disabled):not(.disabled).active, 
.btn-info:not(:disabled):not(.disabled):active, 
.show>.btn-info.dropdown-toggle {
    background-color: #ECF3FB;
    color: var(--primary-accent-fg);
    border: 1px solid;
    box-shadow: none;
}

.btn-info:hover,.btn-secondary:hover {
    background-color: #ECF3FB;
    color: var(--primary-accent-fg);
    border: 1px solid #ECF3FB;
}

.btn-warning {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
}

.btn-warning:hover {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
    opacity: 0.75;
}

.btn-warning:not(:disabled):not(.disabled).active, 
.btn-warning:not(:disabled):not(.disabled):active, 
.show>.btn-warning.dropdown-toggle {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #60A5FA;
}

/** Nav buttons - to be removed when nav is updated **/

.navbar-brand {
    float: left;
    padding: 0;
    font-size: 18px;
    line-height: 20px;
    margin-right: 16px;
}

.nav-link {
    display: block;
    padding: 7px;
}

.nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: 2px;
    vertical-align: 2px;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 10px;
        padding-left: 10px;
    }
}

.navbar-nav>li>a.btn {
    padding: 6px 12px;
}
.navbar-nav>li>a.btn.focus, .navbar-nav>li>a.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.navbar-nav>li>a.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.navbar-nav>li>a.btn-info.focus, .navbar-nav>li>a.btn-info:focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgb(58 176 195 / 50%);
}

.navbar-nav>li>a.btn-outline-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.navbar-nav>li>a.btn-outline-info.focus, .navbar-nav>li>a.btn-outline-info:focus {
    box-shadow: 0 0 0 0.2rem rgb(23 162 184 / 50%);
}

.navbar-nav>li>a.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.navbar-nav>li>a.btn-success.focus, .navbar-nav>li>a.btn-success:focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: 0 0 0 0.2rem rgb(72 180 97 / 50%);
}

.navbar-nav>li>a.btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.navbar-nav>li>a.btn-outline-success.focus, .navbar-nav>li>a.btn-outline-success:focus {
    box-shadow: 0 0 0 0.2rem rgb(40 167 69 / 50%);
}

.navbar-nav>li>a.btn-warning {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
}

.navbar-nav>li>a.btn-warning:hover {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
    opacity: 0.75;
}

.navbar-nav>li>a.btn-warning.focus, .navbar-nav>li>a.btn-warning:focus {
    color: #fff;
    background-color: #E8C568;
    border-color: #debe64;
}

.navbar-nav>li>a.btn-outline-warning:hover {
    color: #E8C568;
    background-color: transparent;
    border-color: #E8C568;
}

.navbar-nav>li>a.btn-outline-warning.focus, .navbar-nav>li>a.btn-outline-warning:focus {
    box-shadow: 0 0 0 0.2rem rgb(255 193 7 / 50%);
}

.navbar-nav>li>a.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.navbar-nav>li>a.btn-danger.focus, .navbar-nav>li>a.btn-danger:focus {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
    box-shadow: 0 0 0 0.2rem rgb(225 83 97 / 50%);
}

.navbar-nav>li>a.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.navbar-nav>li>a.btn-outline-danger.focus, .navbar-nav>li>a.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 50%);
}

.navbar-nav>li>a.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.navbar-nav>li>a.btn-light.focus, .navbar-nav>li>a.btn-light:focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%);
}

.navbar-nav>li>a.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.navbar-nav>li>a.btn-outline-light.focus, .navbar-nav>li>a.btn-outline-light:focus {
    box-shadow: 0 0 0 0.2rem rgb(248 249 250 / 50%);
}

.navbar-nav>li>a.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}

.navbar-nav>li>a.btn-dark.focus, .navbar-nav>li>a.btn-dark:focus {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
    box-shadow: 0 0 0 0.2rem rgb(82 88 93 / 50%);
}

.navbar-nav>li>a.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.navbar-nav>li>a.btn-outline-dark.focus, .navbar-nav>li>a.btn-outline-dark:focus {
    box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);
}

/* ---------------------------- badges --------------------------------------- */

.badge.small {
    font-size: 0.75em;
}

.badge-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.badge-success {
    background-color: var(--secondary-success-bg);
    color: var(--secondary-success-fg);
    border: 1px solid #A2EBC4;
}

.badge-info {
    background-color: #ECF3FB;
    color: var(--primary-accent-fg);
    border: 1px solid;
}

.badge-warning {
    background-color: var(--secondary-warning-bg);
    color: var(--secondary-warning-fg);
    border: 1px solid;
}

.badge-danger {
    background-color: var(--secondary-danger-bg);
    color: var(--secondary-danger-fg);
    border: 1px solid #FFAFAF;
}

.badge-default {
    background-color: var(--secondary-bg-color);
}

/* --------------------- Form Controls --------------------------- */
.form-control {
    border-radius: 8px;
    height: 36px;
    border: 1px solid #E4E4E7;
    color: #09090B;
}

.form-control.form-control-sm {
    height: 28px;
}

.form-control:focus {
    box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #60A5FA;
    border: 1px solid #E4E4E7;
    color: #09090B;
}

select.form-control option:hover, select.form-control option:checked {
    color: var(--primary-accent-fg);
    background-color: var(--primary-accent-bg);
}

/* ---------------------- Text ------------------- */
.text-info {
    color: var(--primary-color-dark) !important;
}