/* =========================
   FONTS & VARIABLES
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --font-primary: 'Poppins', Arial;
    --color-primary: #ffed00;
    --color-primary-dark: #2a375;
    --color-primary-medium: #e8e7da;
    --color-primary-light: #7699a9;
    --color-primary-20: #ffed0033;
}


/* =========================
   BUTTONS
========================= */
#buttonGetMoreInvoices {
    color: black !important;
}

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

.btn-primary.dropdown-toggle:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle.dropdown-toggle:focus,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled):active:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle.dropdown-toggle:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled).active,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled).active:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled):active,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled):active:focus,
.wizard > .actions > ul li:not(:first-of-type) a.dropdown-toggle:focus,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled).active,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled).active:focus,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled):active,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 .2rem var(--color-primary-dark);
}

.btn-primary:hover {
color: #333;
boder-color: #333;
}


/* =========================
   NAVBAR & LOGO
========================= */
.page-xs .logo {
    height: 6.875em;
}

.navbar-logo {
    height: 6.875em;
}

.navbar {
    height: 9.5em;
}


/* =========================
   HIGHCHARTS
========================= */
.highcharts-point-select {
    fill: var(--color-primary-dark) !important;
    stroke: var(--color-primary-dark) !important;
}


/* =========================
   BACKGROUNDS
========================= */
.bg-gray-alabaster {
    background-color: #fff;
}


/* =========================
   TYPOGRAPHY
========================= */
.btn-primary,
.btn-secondary,
.wizard > .actions > ul li:first-of-type a,
.wizard > .actions > ul li:not(:first-of-type) a {
    font-weight: 300;
}

.font-weight-bold {
    color: #333;
}


/* =========================
   LOGIN / EXTERNAL LOGIN
========================= */
#tabExternalLogin {
    background: #fff;
    color: var(--color-primary);
    text-decoration: underline;
    border: none;
}

#literalExternalLoginHtml {
    text-align: center;
}

#tabExternalLogin.active {
    color: inherit;
    text-decoration: none;
    border: none;
    cursor: default;
}


/* =========================
   HIGHCHARTS COLORS
========================= */
/* Falbygdens energi */
.highcharts-color-vat {
    fill: var(--color-gray-dusty);
    stroke: var(--color-gray-dusty);
}

.highcharts-color-energy-tax {
    fill: var(--color-gray-boulder);
    stroke: var(--color-gray-boulder);
}

.highcharts-color-power-fee,
.highcharts-color-fix-fee {
    fill: var(--color-primary);
    stroke: var(--color-primary);
}

.highcharts-color-consumption-fee {
    fill: var(--color-primary-medium);
    stroke: var(--color-primary-medium);
}

.highcharts-color-sum {
    display: none;
}

/* Year comparison */
.highcharts-color-compare-consumption-year-4,
.highcharts-color-year-compare-consumption.highcharts-series-3 {
    fill: green !important;
    stroke: green !important;
}


/* =========================
   WIZARD
========================= */
.wizard > .steps a {
    color: #333;
}

.wizard > .steps ul li:not(:last-child).done a:before {
    filter: invert(0);
}


/* =========================
   SELECT2
========================= */
.select2-container--default 
.select2-results__option--highlighted[aria-selected] {
    color: #333;
}


/* =========================
   GLOBAL COLOR FIXES
========================= */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle.disabled,
.show > .btn-primary.dropdown-toggle:disabled,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle.disabled,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:disabled,
.wizard > .actions > ul li:not(:first-of-type) a,
.wizard > .actions > ul li:not(:first-of-type) a.disabled,
.wizard > .actions > ul li:not(:first-of-type) a:disabled {
    color: #333;
}

.btn-secondary:focus,
.btn-secondary:hover,
.wizard > .actions > ul li:first-of-type a:focus,
.wizard > .actions > ul li:first-of-type a:hover,
a.btn-secondary:focus,
a.btn-secondary:hover {
    color: #333;
}

.btn:not(:disabled):not(.disabled) {
    color: #333;
}

.btn-tertiary:not(:disabled):not(.disabled).active,
.btn-tertiary:not(:disabled):not(.disabled):active {
    color: #333;
}

a {
    color: #333;
}

.btn-tertiary:not(:disabled):not(.disabled).active img[src$=".svg"],
.btn-tertiary:not(:disabled):not(.disabled):active img[src$=".svg"] {
    filter: invert(0%);
}

.link-count {
    color: #333;
}


/* =========================
   COMPONENTS
========================= */
.link-count,
.spinner > span {
    background-color: #2a3751;
    color: #fff;
}

.object-position-right {
    object-position: center;
}

button.year-button.selected,
button.year-button.selected:hover {
    background-color: #2a3751;
}


/* =========================
   COOKIE
========================= */
#cc--main button#s-rall-bn,
#cc--main button#c-s-bn,
#cc--main button#s-sv-bn,
#cc--main button#c-p-bn,
#cc--main button#s-all-bn,
#cc--main button#s-rall-bn {
    color: var(--color-black);
    background-color: var(--color-primary);
    border-radius: 6.25em;
    border: 2px solid var(--color-primary);
    border-style: solid;
}

#cc--main button#c-p-bn:hover,
#cc--main button#s-all-bn:hover,
#cc--main button#s-rall-bn:hover {
    background-color: var(--color-primary-dark);
    border-radius: 6.25em;
    border-color: var(--color-primary-dark);
}

/* =========================
   COOKIE BANNER
   ========================= */
#cc--main button {
    color: var(--color-black);
    background-color: var(--color-primary);
    border-radius: 999px;
    border: 2px solid var(--color-primary);
}

/* Hover */
#cc--main button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-black);
}