* {
    box-sizing: border-box;
}

:root {
    --grid-gap: 1rem 4rem;
    --padding-gap-top-bottom: 0.3rem;/*.5rem;*/
    --padding-gap-sides: 2rem;
    --first-column-width: calc(30rem + var(--padding-gap-sides));
    --min-column-width: calc(13rem + (var(--padding-gap-sides) * 2));
    --min-column-width-s: calc(10rem + (var(--padding-gap-sides) * 2));
    --min-column-width-xs: calc(5rem + (var(--padding-gap-sides) * 2));
    --border-bottom: 2px solid var(--stroke-color);
    --surface-bg: #FFFFFF;
    --stroke-color: #F1F1F3;
    --surface-secondary-bg: #266553;
    --font-primary-color: #323232;
    --font-secondary-color: #FFFFFF;
    --transparent-secondary-text: 255,255,255;
    --highligthed-column-color-RGB: 38,101,83;
    --divider-color: #CFCFCF;
    --sidebar-width: 21rem;
    --sidebar-collapsed-width: calc((1rem * 2) + 3.5rem);
    ;
    --body-bg: #F5E6D1;
    --border-radius: 5px;
    --input-bg: #FEFCFB;
    --input-stroke: #E4E4E4;
    --bg-padding: 2rem;
    --spacer-x1: 1rem;
    --spacer-x05: calc(var(--spacer-x1) * .5);
    --spacer-x2: calc(var(--spacer-x1) * 2);
    --spacer-x3: calc(var(--spacer-x1) * 3);
    --spacer-x4: calc(var(--spacer-x1) * 4);
    --spacer-x6: calc(var(--spacer-x1) * 6);
    --spacer-x8: calc(var(--spacer-x1) * 8);
    --gap-xs: var(--spacer-x05);
    --gap-s: var(--spacer-x1);
    --gap-m: var(--spacer-x2);
    --gap-l: var(--spacer-x4);
    --gap-xl: var(--spacer-x8);
    --input-min-width: 10rem;
    --number-min-width: 3rem;
    --toolbar-height: 7rem;
    --toolbar-title-height: 6rem;
}

html {
    font-size: 11px;/*12px;*/
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--body-bg);
    color: var(--font-primary-color);
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 1.5rem;
}

.right-align {
    text-align: end;
    /* padding-right: .5rem; */
}

.justify-content-end {
    justify-content: end;
}

.justify-content-center {
    justify-content: center;
}

.align-self-end {
    align-self: end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.large-text {
    font-size: 2.3rem;
}

.medium-text {
    font-size: 1.25rem;
}

.row-header {
    font-size: 1.15rem;
}

.result-label {
    font-size: 1.5rem;
}

.bold {
    font-weight: bold;
}

.position-relative {
    position: relative;
}

.margin-left-auto {
    margin-left: auto;
}

.fit-content {
    width: fit-content;
}

.uppercase-transform {
    text-transform: uppercase;
}

.medium-weight {
    font-weight: 500;
}

.italic {
    font-style: italic;
}

.flex {
    display: flex;
}

.column-direction {
    flex-direction: column;
}

.row-direction {
    flex-direction: row;
}

.space-between {
    justify-content: space-between;
}

.gap-xs {
    gap: var(--gap-xs);
}

.gap-s {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}

.gap-xl {
    gap: var(--gap-xl);
}

.remove-gap-left {
    margin-left: -3.5rem;
}

.remove-gap-right {
    margin-right: -3.5rem;
}

.border-bottom {
    border-bottom: var(--border-bottom);
}

.grid-container .no-border {
    border: none;
}

.margin-left-gap {
    margin-left: var(--padding-gap-sides);
}

.padding-top-bottom {
    padding: var(--padding-gap-top-bottom) 0;
}

.padding-btm-x1 {
    padding-bottom: var(--spacer-x1);
}

.padding-btm-x2 {
    padding-bottom: var(--spacer-x2);
}

.column-min-width {
    min-width: var(--min-column-width);
}

.nowrap {
    white-space: nowrap;
}

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

.surface-secondary-bg {
    background-color: var(--surface-secondary-bg);
    padding: var(--spacer-x2);
    color: var(--font-secondary-color);
    border-radius: var(--border-radius);
    /* width: 100%; */
}

.font-color-surface-secondary {
    color: var(--surface-secondary-bg);
}

#carbon-account .surface-secondary-bg {
    background-image: url('/images/content/carbon-page-overview-bg.svg');
    background-repeat: no-repeat;
    background-position: 110% 50%;
}

.highligthed-column {
    background-color: rgba(var(--highligthed-column-color-RGB), 0.2);
}

.transparent-secondary-text {
    color: rgba(var(--transparent-secondary-text), .5);
}

input[type=number] {
    text-align: end;
}

.vertical-align-top {
    vertical-align: top;
}

.column-label:not(.no-sticky) {
    position: sticky;
    left: 0;
}

.column-label {
    padding-right: var(--padding-gap-sides);
    background-color: var(--surface-bg);
    padding-left: var(--spacer-x2);
}

.grid-container > .column-label + .column-label,
.grid-container .grid-row-wrapper > .column-label + .column-label {
    padding-left: var(--spacer-x1);
    left: 4rem;
}

.number-list-padding {
    padding-right: var(--spacer-x1);
}

.padding-gap-sides {
    padding-left: var(--padding-gap-sides);
    padding-right: var(--padding-gap-sides);
}

/* .grid-container > div:not(.column-label) {
    padding-left: var(--padding-gap-sides);
    padding-right: var(--padding-gap-sides);
} */

.padding-outer-grid {
    padding-left: var(--spacer-x2);
    padding-right: var(--spacer-x2);
}

.align-items-center {
    align-items: center;
}

.full-width {
    width: 100%;
}

.flex-none {
    flex: none;
}

.input-text-container {
    gap: var(--gap-xs);
}

.text-text-container {
    gap: .2rem;
}

.grid-container {
    display: grid;
    max-width: 100%;
    align-items: center;
    overflow-x: auto;
    grid-auto-rows: 1fr;
    background-color: var(--surface-bg);
    /* padding: 0 var(--spacer-x2); */
    /* padding-right: var(--spacer-x2); */
}

    .grid-container.four-columns > div:nth-last-child(-n+4) {
        border-bottom: none;
    }

    .grid-container > div,
    .grid-container .grid-row-wrapper > div {
        height: 100%;
    }

        .grid-container > div:not(.subgrid, .grid-row-wrapper),
        .grid-container .grid-row-wrapper > div:not(.subgrid) {
            border-bottom: var(--border-bottom);
            padding-top: var(--padding-gap-top-bottom);
            padding-bottom: var(--padding-gap-top-bottom);
            display: flex;
            align-items: center;
        }

    .grid-container div.flex > div {
        /* display: flex; */
        align-items: center;
    }

    .grid-container > div:not(.column-label, .subgrid, .grid-row-wrapper),
    .grid-container > div.subgrid > div:not(.column-label) {
        font-weight: 500;
    }

    .grid-container div.bold,
    .grid-container > div.subgrid > div.bold {
        font-weight: bold;
    }

.flex-container ul {
    margin: 0;
}

.flex-container {
    display: flex;
    background-color: var(--surface-bg);
    padding: var(--spacer-x1) var(--spacer-x2);
}

    .flex-container > div:not(.surface-secondary-bg) {
        height: 100%;
        padding-top: var(--padding-gap-top-bottom);
        padding-bottom: var(--padding-gap-top-bottom);
    }

    .flex-container div.flex > div {
        align-items: center;
    }

#input-paper .grid-container.two-columns {
    grid-template-columns: auto minmax(var(--min-column-width-s), 3fr) minmax(var(--min-column-width), 1fr);
}

    #input-paper .grid-container.two-columns > div:nth-last-child(-n+3) {
        border-bottom: none;
    }

    #input-paper .grid-container.two-columns > div {
        /* display: flex; */
        width: 100%;
    }

        #input-paper .grid-container.two-columns > div input:not(.small-input-container) {
            /* width: 18rem; */
        }

    #input-paper .grid-container.two-columns .padding-gap-sides {
        justify-self: end;
    }

#company-information .grid-container.two-columns {
    grid-template-columns: auto minmax(var(--min-column-width-s), 60rem);
    overflow-x: initial;
    padding: 0;
    grid-auto-rows: auto;
}

#company-information .grid-container input[type="number"] {
    max-width: 5rem;
}

#company-information .company-logo-buttons {
    display: flex;
    justify-content: space-around;
}

.grid-container-three-columns {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(2, minmax(7.5rem, .5fr)) minmax(25rem, 2fr);
}

section.grid-container-three-columns > div:nth-last-child(-n+4) {
    border-bottom: none;
}

.grid-container-carbon-account {
    /*grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(4, minmax(var(--min-column-width-s), 1fr));*/
    grid-template-columns: minmax(var(--min-column-width), calc(42rem + var(--padding-gap-sides))) repeat(3, minmax(var(--min-column-width-s), 1fr)) repeat(1, minmax(8rem, 10rem));
}

#carbon-account .grid-container-carbon-account > div:not(.column-label) {
    justify-content: end;
}

.grid-container-four-columns {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(3, minmax(var(--min-column-width), 1fr));
}

    .grid-container-four-columns > div:nth-last-child(-n+4) {
        border-bottom: none;
    }

.grid-container-six-columns {
    grid-template-columns: auto minmax(var(--min-column-width), 22rem) minmax(30rem, 1fr) repeat(3, minmax(var(--min-column-width-xs), 1fr));
}

    .grid-container-six-columns > div:nth-last-child(-n+6) {
        border-bottom: none;
    }


#input-employees .grid-container-six-columns {
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(2, minmax(var(--min-column-width), 2fr)) repeat(2, minmax(15rem, 1fr));
}

    #input-employees .grid-container-six-columns > div:nth-last-child(-n+6) {
        border-bottom: none;
    }

.grid-container-seven-columns {
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(5, minmax(var(--min-column-width-s), 1fr));
}

    .grid-container-seven-columns > div:nth-last-child(-n+7) {
        border-bottom: none;
    }

.benchmark-grid {
    grid-template-columns: auto 1fr;
}

.grid-container.benchmark-grid > div:nth-last-child(-n+2) {
    border-bottom: none;
}

.forgot-password {
    margin-top: var(--spacer-x05);
}

    .forgot-password > a {
        color: inherit;
    }

.login-container {
    justify-content: center;
    align-content: center;
    height: 100vh;
}

    /* .login-container > div:not(.vertical-divider) {
    flex: 50%;
} */

    .login-container .image-container {
        width: 20rem;
    }

.grid-container-login {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacer-x1);
}

    .grid-container-login input[type=submit] {
        width: fit-content;
        padding: var(--spacer-x05) var(--spacer-x1);
    }

.login-headings > div:first-child {
    font-size: var(--spacer-x4);
}

#benchmark select {
    width: initial;
}

.grid-container-emission {
    grid-template-columns: auto minmax(var(--min-column-width-s), 20rem) repeat(5, minmax(auto, 1fr)) repeat(2, minmax(15rem, 1fr));
}

.grid-container-eight-columns {
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(4, minmax(var(--min-column-width-xs), 1fr)) repeat(2, minmax(15rem, 1fr));
}

    .grid-container-eight-columns > div:nth-last-child(-n+8) {
        border-bottom: none;
    }

.span-6-8 {
    grid-column: 6 / 8;
}

#paper-consumption-grid {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(4, minmax(var(--min-column-width), 1fr));
}

.grid-container > div.subgrid {
    display: grid;
    grid-auto-rows: 1fr;
}

    .grid-container > div.subgrid > div {
        border-bottom: var(--border-bottom);
        height: 100%;
        padding-top: var(--padding-gap-top-bottom);
        padding-bottom: var(--padding-gap-top-bottom);
        display: flex;
        align-items: center;
    }



input[type=submit],
input[type=checkbox],
.label-checkbox {
    cursor: pointer;
}

textarea {
    resize: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.small-input-container {
    width: 5rem;
    min-width: 3rem;
}

input.small-input-container {
    width: 5rem;
    min-width: 3rem;
}

a.collapsible {
    text-decoration: none;
}

    a.collapsible > div {
        width: 100%;
        background-color: var(--surface-secondary-bg);
        color: var(--font-secondary-color);
        font-weight: bold;
        padding: var(--spacer-x05) var(--spacer-x2);
    }


.column-label-custom {
    width: calc(var(--first-column-width) - var(--padding-gap-sides));
    padding-left: 0;
}

.sidebar {
    background-color: var(--surface-bg);
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    padding: 0;
    overflow-y: overlay;
    font-weight: bold;
    z-index: 2;
}

    .sidebar nav ul {
        list-style-type: none;
        padding: 0;
        width: 100%;
    }

        .sidebar nav ul li img {
            width: 1.5rem;
        }

        .sidebar nav ul li a.flex {
            align-items: center;
        }

    .sidebar > nav .logo-container {
        padding: 0 1rem;
    }

.image-container > img {
    width: 100%;
}

.sidebar > nav {
    padding: var(--spacer-x2) var(--spacer-x1) var(--spacer-x1);
}

.sidebar ul li a {
    display: block;
    padding: .7rem 1rem .7rem calc(1.5rem + 1rem + .5rem);
    margin: var(--spacer-x05) 0;
}

    .sidebar ul li a.drop-down {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.sidebar ul li ul li ul li {
    padding-left: 1rem;
}

.nav-link-icon {
    background-size: 1.5rem;
    background-repeat: no-repeat;
    display: block;
    background-position-y: center;
    background-position-x: 1rem;
}

.sidebar nav ul li .nav-company-info-icon,
.nav-company-info-icon {
    background-image: url('/images/navbar/Info.svg');
}

.sidebar nav ul li a.active.nav-company-info-icon {
    background-image: url('/images/navbar/info-bg-surface.svg');
}

.sidebar nav ul li .nav-company-icon {
    background-image: url('/images/navbar/company.svg');
}

.sidebar nav ul li a.active.nav-company-icon {
    background-image: url('/images/navbar/company-bg-surface.svg');
}

.sidebar nav ul li .nav-employees-icon {
    background-image: url('/images/navbar/employees.svg');
}

.sidebar nav ul li a.active.nav-employees-icon {
    background-image: url('/images/navbar/employees-bg-surface.svg');
}

.sidebar nav ul li .nav-paper-icon {
    background-image: url('/images/navbar/paper.svg');
}

.sidebar nav ul li a.active.nav-paper-icon {
    background-image: url('/images/navbar/paper-bg-surface.svg');
}

.sidebar nav ul li .nav-transportation-icon {
    background-image: url('/images/navbar/truck.svg');
}

.sidebar nav ul li a.active.nav-transportation-icon {
    background-image: url('/images/navbar/truck-bg-surface.svg');
}

.sidebar nav ul li .nav-outsourcing-icon {
    background-image: url('/images/navbar/outsourcing.svg');
}

.sidebar nav ul li a.active.nav-outsourcing-icon {
    background-image: url('/images/navbar/outsourcing-bg-surface.svg');
}

.sidebar nav ul li .nav-carbon-account-icon {
    background-image: url('/images/navbar/carbon-account.svg');
}

.sidebar nav ul li a.active.nav-carbon-account-icon {
    background-image: url('/images/navbar/carbon-account-bg-surface.svg');
}

.nav-product-calculation-icon {
    background-image: url('/images/navbar/calculator.svg');
}

.sidebar nav ul li a.active.nav-product-calculation-icon {
    background-image: url('/images/navbar/calculator-bg-surface.svg');
}

.sidebar nav ul li .nav-emission-calculation-icon {
    background-image: url('/images/navbar/emissions-icon.svg');
}

.sidebar nav ul li a.active.nav-emission-calculation-icon {
    background-image: url('/images/navbar/emissions-bg-surface.svg');
}

.sidebar nav ul li .nav-benchmark-icon {
    background-image: url('/images/navbar/benchmark-icon.svg');
}

.sidebar nav ul li a.active.nav-benchmark-icon {
    background-image: url('/images/navbar/benchmark-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-development-icon {
    background-image: url('/images/navbar/development-icon.svg');
}

.sidebar nav ul li a.active.nav-development-icon {
    background-image: url('/images/navbar/development-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-setting-icon {
    background-image: url('/images/navbar/setting-icon.svg');
}

.sidebar nav ul li a.active.nav-setting-icon {
    background-image: url('/images/navbar/setting-icon-bg-surface.svg');
}

.sidebar nav a {
    text-decoration: none;
    color: inherit;
}

.logo {
    padding-bottom: 1rem;
}

main {
    margin-left: var(--sidebar-width);
    padding: 3rem 2rem;
}

.nav-divider {
    width: 100%;
    border-bottom: 1px solid var(--divider-color);
    margin: var(--spacer-x1) 0;
}

.vertical-divider {
    height: 50vh;
    width: 2px;
    background-color: var(--divider-color);
}

.page-overview {
    background-color: var(--surface-bg);
    padding: var(--bg-padding);
    font-size: 1.15rem;
}

    .page-overview > .page-title {
        margin-bottom: var(--spacer-x2);
    }

    .page-overview > .flex-container > div {
        gap: var(--spacer-x1);
    }

    .page-overview .nav-divider {
        border-bottom: 1px solid var(--font-secondary-color);
    }

.page-overview-container {
    display: grid;
    grid-template-columns: auto auto;
    height: fit-content;
}

.surface-secondary-bg {
    padding: var(--spacer-x4);
}

p {
    margin: 0;
}

#carbon-account .padding-gap-sides {
    padding-left: var(--spacer-x4);
    padding-right: var(--spacer-x1);
}

.grid-container .border-top-bottom {
    border-top: 2px solid var(--surface-secondary-bg);
    border-bottom: 2px solid var(--surface-secondary-bg);
}

.collapsible-checkbox {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/* Accordion styles */
.tab {
    width: 100%;
    overflow: hidden;
    user-select: none;
    border-radius: var(--border-radius);
}

    .tab img {
        width: 1.5rem;
        height: 1.5rem;
    }

.tab-label {
    display: flex;
    justify-content: space-between;
    padding: var(--spacer-x05) var(--spacer-x2);
    background: var(--surface-secondary-bg);
    font-weight: bold;
    cursor: pointer;
    color: var(--font-secondary-color);
    /* border-radius: var(--border-radius); */
}

    .sidebar ul li a.drop-down::after,
    .tab-label::after {
        content: "\276F";
        width: var(--spacer-x1);
        height: var(--spacer-x1);
        text-align: center;
        transition: all 0.35s;
        display: table;
    }

.tab-content {
    max-height: 0;
    transition: max-height 0.35s ease-in;
}

.collapsible-checkbox:checked + .tab-label::after,
.sidebar li > a.active::after {
    transform: rotate(90deg);
}

.collapsible-checkbox:checked ~ .tab-content {
    max-height: 100%;
}

/* Administration */
#administration .grid-container{
    padding: 0;
}

    #administration .grid-container > div:not(.no-padding) {
        padding: var(--spacer-x1) var(--spacer-x2);
    }

    #administration .grid-container > div.no-padding {
        padding: var(--spacer-x1) var(--spacer-x1) var(--spacer-x1) var(--spacer-x2);
    }

    #administration .grid-container.four-columns {
        grid-template-columns: repeat(3, 2fr) 1fr;
    }

.more-options-image {
    display: flex;
    align-items: center;
    border: 1px solid var(--stroke-color);
    padding: 0.3rem var(--spacer-x1);
    background-color: var(--surface-bg);
    border-radius: var(--border-radius);
    /* margin-bottom: 1rem; */
}

.more-options-container {
    position: relative;
    cursor: pointer;
}

    .more-options-container:hover > .more-options-content {
        display: flex;
    }

.more-options-container-padding {
    padding: 0.3rem var(--spacer-x1);
}

.more-options-content {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--stroke-color);
    position: absolute;
    /* right: var(--spacer-x2); */
    right: 2rem;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
    display: none;
    gap: var(--spacer-x1);
    z-index: 20;
}

.more-options-content {
    bottom: 0;
}

.more-options-top-rows .more-options-content {
    top: 0;
    bottom: auto;
}

.more-options-content a {
    text-decoration: none;
    color: inherit;
}

.sidebar ul > li > ul > li {
    font-weight: normal;
}

.sidebar nav ul li .nav-users-icon {
    background-image: url('/images/navbar/user-icon.svg');
}

.sidebar nav ul li a.active.nav-users-icon {
    background-image: url('/images/navbar/user-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-group-icon {
    background-image: url('/images/navbar/group-icon.svg');
}

.sidebar nav ul li a.active.nav-group-icon {
    background-image: url('/images/navbar/group-icon-bg-surface.svg');
}

.sidebar .tab-label {
    padding: 0;
    align-items: center;
    padding-right: var(--spacer-x1);
    background-color: initial;
    color: inherit;
}

.sidebar input:checked + .tab-label {
    background-color: var(--surface-secondary-bg);
    border-radius: var(--border-radius);
    color: var(--font-secondary-color);
}

    .sidebar input:checked + .tab-label a.nav-group-icon {
        background-image: url('/images/navbar/group-icon-bg-surface.svg');
    }

/* Ribbon */
.menu-toolbar {
    position: fixed;
    width: calc(100% - var(--sidebar-width) - (2rem * 2));
    top: 0;
    padding-top: 3rem;
    /* padding-top: 10rem; */
    background-color: var(--body-bg);
    z-index: 10;
}

.dp-ribbon {
    padding: var(--spacer-x1) var(--padding-gap-sides);
    display: flex;
    justify-content: left;
    gap: var(--spacer-s);
    background-color: #FAFAFA;
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    height: var(--toolbar-height);
}

.dp-ribbon-section,
.dp-ribbon-sub {
    padding: 0 var(--spacer-x1);
}

    .dp-ribbon-section:first-child {
        padding-left: 0;
    }

.dp-ribbon-section {
    border-right: 1px solid var(--divider-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x05);
    position: relative;
    height: fit-content;
}

    .dp-ribbon-section.right {
        margin-left: auto;
        display: flex;
    }

.dp-ribbon-section-header {
    font-weight: bold;
    color: var(--surface-secondary-bg);
}

.dp-ribbon {
    align-items: center;
}

.dp-ribbon-section .btn-toolbar-expand + div {
    display: none;
}

.dp-ribbon-section .btn-toolbar-expand.active + div {
    display: flex;
    position: absolute;
    background-color: var(--surface-bg);
    padding: var(--spacer-x1);
    display: flex;
    flex-direction: column;
    top: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
    min-width: 25rem;
}


.title-of-page-container {
    height: var(--toolbar-title-height);
}

.menu-right {
    height: 4rem;
}

.scroll-content {
    margin-top: calc(var(--toolbar-height) + 4rem);
}

.menu-toolbar-with-title + .scroll-content {
    margin-top: 13rem;
}

.edit-user-container .tab-content {
    background-color: var(--surface-bg);
}

    .edit-user-container .tab-content > section {
        padding: var(--spacer-x1) var(--spacer-x2);
    }

.edit-row {
    display: flex;
    padding: var(--spacer-x1) 0;
}

.edit-label-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x05);
}

.edit-label-checkbox {
    display: flex;
    gap: var(--spacer-x05);
    align-items: center;
    white-space: nowrap;
}

.edit-input-full-width {
    flex: 1;
}

.edit-user-container label {
    font-weight: 500;
}

.edit-user-container > section {
    border-radius: var(--border-radius);
    padding: var(--spacer-x1);
}


/* TEMPLATE */

/* resetting */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* form */
.form-block {
    margin: 1rem 0 0 0;
}

/* headers */
h1 {
    font-weight: bold;
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

/* inputs */
input, select, textarea {
    padding: .3rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    border: 1px solid var(--input-stroke);
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    /* font-size: 1rem; */
    margin: 0;
}

    input:not(.collapsible-checkbox, .btn), select, textarea {
        width: 100%;
    }

    input[type=checkbox][disabled] {
        cursor: default;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border: 1px solid var(--surface-secondary-bg);
        outline: none;
    }

    /* input:focus,
select:focus {
    outline: none;
} */

    input[type="text"] {
        min-width: var(--input-min-width);
    }

    input[type="email"] {
        min-width: var(--input-min-width);
    }

    input[type="search"] {
        min-width: var(--input-min-width);
    }

    input[type="password"] {
        min-width: var(--input-min-width);
    }

    input[type="number"] {
        min-width: var(--number-min-width);
    }

    input[type="tel"] {
        min-width: var(--input-min-width);
    }

select {
    min-width: var(--input-min-width);
}

input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
}

.btn-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.4rem;
    height: 1.4rem;
    /* margin: 0 var(--spacer-xs) 0 0; */
    /* position: relative; */
    /* top: -.05rem; */
    border: 1px solid var(--input-stroke);
    background-image: url('images/icons/checkbox-standard.svg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: var(--border-radius);
}

    .btn-checkbox input[type="checkbox"]:hover:not(:disabled) {
        border: 1px solid var(--surface-secondary-bg);
    }

    .btn-checkbox input[type="checkbox"]:checked {
        background-image: url('images/icons/checkbox-checked.svg');
        border: 1px solid var(--surface-secondary-bg);
    }

select,
label,
a {
    cursor: pointer;
}


/* btn */
button,
.btn {
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid var(--surface-secondary-bg);
    padding: var(--spacer-x05) var(--spacer-x1);
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--surface-secondary-bg);
    border-radius: var(--border-radius);
    color: var(--font-secondary-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
    transition: all .1s ease-in-out;
    min-width: 5rem;
}

.nav-link-icon {
    background-size: 1.5rem;
    background-repeat: no-repeat;
    display: block;
    background-position-y: center;
    background-position-x: 1rem;
}

.btn-icon-l {
    padding-left: 3rem;
    background-position: var(--spacer-x1) center;
}

.btn-secondary {
    background-color: var(--input-stroke);
    border-color: var(--input-stroke);
    color: var(--color-on-primary);
}

.btn-hollow {
    background-color: var(--input-bg);
    color: var(--font-primary-color);
    border: 1px solid var(--surface-secondary-bg);
}

.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}




.sidebar nav > ul > li > a.active {
    background-color: var(--surface-secondary-bg);
    border-radius: var(--border-radius);
    color: var(--font-secondary-color);
}


/* sidebar */
.sidebar-section.responsive .sidebar {
    width: calc((1rem * 2) + 3.5rem);
}

.sidebar-section.responsive + main .menu-toolbar {
    width: calc(100% - var(--sidebar-collapsed-width) - (2rem * 2));
}

.sidebar-section.responsive .sidebar > nav > ul > li > a {
    width: 3.5rem;
    padding: 0.5rem 1rem;
}

    .sidebar-section.responsive .sidebar > nav > ul > li > a > span {
        display: none;
    }

    .sidebar-section.responsive .sidebar > nav > ul > li > a > div {
        display: none;
    }

.sidebar-section.responsive .sidebar .nav-link-icon {
    height: 2.5rem;
}

.logo-link {
    display: block;
    background-image: url('/images/navbar/climatecalc.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 3rem;
    background-position-x: center;
}

.sidebar-section.responsive .sidebar .logo-link {
    background-image: url('/images/navbar/climatecalcLogo.png');
    width: 2.9rem;
}

.sidebar-section.responsive .sidebar .logo-container {
    padding: 0;
    display: flex;
    justify-content: center;
}

.sidebar-section.responsive + main {
    margin-left: var(--sidebar-collapsed-width);
}

.collapse-menu-icon {
    background-color: var(--surface-secondary-bg);
    width: fit-content;
    border-radius: 100%;
    position: fixed;
    left: 20.3rem;
    top: 2rem;
    z-index: 3;
    display: flex;
}

.icon-arrow-left-white {
    background-image: url('/images/icons/arrow-left-icon-white.svg');
    background-size: .4rem;
}

.icon-arrow-left-black {
    background-image: url('images/icons/arrow-left-icon-black.svg');
}

.btn-back {
    background-size: .8rem;
}

.btn-round-icon {
    padding: .7rem;
    border-radius: 100%;
    min-width: fit-content;
    transition: transform .4s ease-in-out;
}

.sidebar-section.responsive .collapse-menu-icon {
    left: 4.9rem;
    top: 2rem;
}

    .sidebar-section.responsive .collapse-menu-icon .icon-arrow-left-white {
        transform: rotate(180deg);
    }

/**MCN - Nav bar icon & active fixes...*/
/*
.sidebar nav ul li > a.active,
button {
    background-color: var(--surface-secondary-bg);
    border-radius: var(--border-radius);
    color: var(--font-secondary-color);
}


.sidebar nav ul li .nav-company-info-icon {
    background-image: url('/images/navbar/Info.svg');
}

.sidebar nav ul li a.active.nav-company-info-icon {
    background-image: url('/images/navbar/info-bg-surface.svg');
}

.sidebar nav ul li .nav-company-icon {
    background-image: url('/images/navbar/company.svg');
}

.sidebar nav ul li a.active.nav-company-icon {
    background-image: url('/images/navbar/company-bg-surface.svg');
}

.sidebar nav ul li .nav-employees-icon {
    background-image: url('/images/navbar/employees.svg');
}

.sidebar nav ul li a.active.nav-employees-icon {
    background-image: url('/images/navbar/employees-bg-surface.svg');
}

.sidebar nav ul li .nav-paper-icon {
    background-image: url('/images/navbar/paper.svg');
}

.sidebar nav ul li a.active.nav-paper-icon {
    background-image: url('/images/navbar/paper-bg-surface.svg');
}

.sidebar nav ul li .nav-transportation-icon {
    background-image: url('/images/navbar/truck.svg');
}

.sidebar nav ul li a.active.nav-transportation-icon {
    background-image: url('/images/navbar/truck-bg-surface.svg');
}

.sidebar nav ul li .nav-outsourcing-icon {
    background-image: url('/images/navbar/outsourcing.svg');
}

.sidebar nav ul li a.active.nav-outsourcing-icon {
    background-image: url('/images/navbar/outsourcing-bg-surface.svg');
}

.sidebar nav ul li .nav-carbon-account-icon {
    background-image: url('/images/navbar/carbon-account.svg');
}

.sidebar nav ul li a.active.nav-carbon-account-icon {
    background-image: url('/images/navbar/carbon-account-bg-surface.svg');
}

.nav-product-calculation-icon {
    background-image: url('/images/navbar/calculator.svg');
}

.sidebar nav ul li a.active.nav-product-calculation-icon {
    background-image: url('/images/navbar/calculator-bg-surface.svg');
}

.sidebar nav ul li .nav-emission-calculation-icon {
    background-image: url('/images/navbar/emissions-icon.svg');
}

.sidebar nav ul li a.active.nav-emission-calculation-icon {
    background-image: url('/images/navbar/emissions-bg-surface.svg');
}

.sidebar nav ul li .nav-benchmark-icon {
    background-image: url('/images/navbar/benchmark-icon.svg');
}

.sidebar nav ul li a.active.nav-benchmark-icon {
    background-image: url('/images/navbar/benchmark-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-development-icon {
    background-image: url('/images/navbar/development-icon.svg');
}

.sidebar nav ul li a.active.nav-development-icon {
    background-image: url('/images/navbar/development-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-setting-icon {
    background-image: url('/images/navbar/setting-icon.svg');
}

.sidebar nav ul li a.active.nav-setting-icon {
    background-image: url('/images/navbar/setting-icon-bg-surface.svg');
}
    

.grid-container-eight-columns {
    grid-template-columns: auto 20rem repeat(4, minmax(var(--min-column-width-s), 1fr)) repeat(2, minmax(15rem, 1fr));
}
    */

main > .collapsible, 
main > div > .collapsible,
main > div > div > .collapsible {
    margin-bottom: 3em;
}

.tab-content {
    transition: none;
}

.alert-border, .small-input-container .alert-border, .input-text-container .alert-border {
    border: 1px solid red;
}

.alert-text {
    font-weight: bold;
    color: red;
}

/*as we are not using "number" for decimal fields the min width reigns havoc all over so we unset it here for now...*/
input[type="text"] {
    min-width: unset; /* var(--input-min-width); */
}

.grid-container > div.subgrid > div.command-cell {
    justify-content: right;
    align-items: end;
    padding-bottom: 0.25rem;
}

.grid-container > div.subgrid > div.command-cell button {
    font-size: 0.8rem;
}


/*temporary until something better*/
/*
.translation-table {
    display: flex;
    flex-direction:column;
}

.translation-table .translation-row, .translation-table .translation-table-header-row {
    display: flex;
    flex-direction: row;
}
    */
.custom-input-grid-x-columns {
    display: grid;
    /*grid-template-rows: repeat(auto-fill, 120px);*/
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    background-color: var(--surface-bg);
    padding: var(--spacer-x1) var(--spacer-x2);
    padding-left: 0;
    overflow-x: auto;
}

.custom-input-grid-x-columns .column-label:not(.no-sticky) {
    padding-left: var(--spacer-x3);
}

#administration .collapsible {
    margin-bottom: 0.5rem;
}

.sidebar nav ul li .nav-translations-icon {
    /*background-image: url('/images/navbar/company.svg');*/
    background-image: url('/images/icons-other/icon_translations.svg');
    /*background-image: url('/images/icons-other/icon_import.svg');*/
}

.sidebar nav ul li a.active.nav-translations-icon {
    background-image: url('/images/icons-other/icon_bg_translations.svg');
}

.sidebar nav ul li .nav-keydata-icon {
    /*background-image: url('/images/navbar/company.svg');*/
    background-image: url('/images/icons-other/icon_data_administration.svg');
}

.sidebar nav ul li a.active.nav-keydata-icon {
    background-image: url('/images/icons-other/icon_bg_data_administration.svg');
}

.sidebar nav ul li .nav-users-icon {
    background-image: url('/images/navbar/employees.svg');
}

.sidebar nav ul li a.active.nav-users-icon {
    background-image: url('/images/navbar/employees-bg-surface.svg');
}


/*changed*/
.sidebar nav ul li .nav-company-icon {
    background-image: url('/images/icons-other/icon_company.svg');
}

.sidebar nav ul li a.active.nav-company-icon {
    background-image: url('/images/icons-other/icon_bg_company.svg');
}

.sidebar nav ul li .nav-paper-icon {
    background-image: url('/images/icons-other/icon_paper_and_other_subs.svg');
}

.sidebar nav ul li a.active.nav-paper-icon {
    background-image: url('/images/icons-other/icon_bg_paper_and_other_subs.svg');
}


.sidebar nav ul li .nav-employees-icon {
    background-image: url('/images/icons-other/icon_employees.svg');
}

.sidebar nav ul li a.active.nav-employees-icon {
    background-image: url('/images/icons-other/icon_bg_employees.svg');
}

.sidebar nav ul li .nav-emission-calculation-icon {
    background-image: url('/images/icons-other/icon_emission_calculation.svg');
}

.sidebar nav ul li a.active.nav-emission-calculation-icon {
    background-image: url('/images/icons-other/icon_bg_emission_calculation.svg');
}

.sidebar nav ul li .nav-benchmark-icon {
    background-image: url('/images/icons-other/icon_benchmark.svg');
}

.sidebar nav ul li a.active.nav-benchmark-icon {
    /*background-image: url('/images/navbar/icon_bg_benchmark.svg');*/
    background-image: url('/images/navbar/benchmark-icon-bg-surface.svg');
}

.sidebar nav ul li .nav-development-icon {
    background-image: url('/images/icons-other/icon_development.svg');
}

.sidebar nav ul li a.active.nav-development-icon {
    background-image: url('/images/icons-other/icon_bg_development.svg');
}

#organization-permissions-grid, #multisite-permissions-grid, #company-permissions-grid, #system-permissions-grid {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(4, minmax(var(--min-column-width), 1fr));
}

.icon-arrow-left-black {
    background-image: url('/images/icons/arrow-left-icon-black.svg');
}


.grid-container > div.subgrid.product-calculation-share > div {
    border-bottom: none;
    justify-content: center;
}

#outsourcing .grid-container {
    padding: 0;
}

/*
#outsourcing .grid-container > div:not(.no-padding) {
    padding: var(--spacer-x1) var(--spacer-x2);
}
*/

#outsourcing .grid-container > div.no-padding {
    padding: var(--spacer-x1) var(--spacer-x1) var(--spacer-x1) var(--spacer-x2);
}

#outsourcing .grid-container.four-columns {
    grid-template-columns: repeat(3, 2fr) 1fr;
}

.grid-command-bar {
    padding-top: 2em;
}

a.download-icon {
   
    /*background-image: url('/images/icons-other/icon_download.svg');*/
    font-size: 0.8em;
    text-decoration: none;
    margin-right: 2em;
}

#external-product-calculation-grid {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(4, minmax(var(--min-column-width), 1fr));
}

.input-align-end {
    text-align: end;
}

.edit-user-container .command-buttons .btn {
    font-size: 0.8em;
    margin-right: 1.5em;
}

.edit-user-container fieldset {
    border: 1px solid var(--input-stroke);
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    margin: 0;
}

.edit-user-container fieldset input {
    background-color: white;
}

.disabled-by-permissions {
    opacity: .5;
    cursor: not-allowed;
}

input:disabled {
    opacity: 0.5;
}

.grid-container-carbon-account .result-container {
    justify-content: right;
}

.grid-container-carbon-account .padding-gap-sides.row-header {
    justify-content: right;
}

.span-8 {
    grid-column: span 8;
}

.span-7 {
    grid-column: span 7;
}

.span-6 {
    grid-column: span 6;
}

.span-5 {
    grid-column: span 5;
}

.span-4 {
    grid-column: span 4;
}

.span-3 {
    grid-column: span 3;
}

.span-2 {
    grid-column: span 2;
}

/*
.text-text-container > div > p {
    font-size: 0.9em;
    min-width:5rem;
}
*/

#administration .grid-container.four-columns {
    width: 100%;
}

.grid-container.nine-columns {
    /*grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(4, minmax(var(--min-column-width-xs), 1fr)) repeat(3, minmax(15rem, 1fr));*/
    /*grid-template-columns: auto minmax(7rem, 20rem) repeat(4, minmax(var(--min-column-width-xs), 1fr)) repeat(3, minmax(15rem, 1fr));*/
    /*grid-template-columns: auto 7rem repeat(4,13rem) 20rem 7rem 10rem;*/
    grid-template-columns: auto 7rem repeat(4,minmax(13rem,17rem)) 20rem 7rem 10rem;
    width: 100%;
}

/*report colors*/
.color-C0 {
    background-color: rgb(215,168,81);
}

.color-C1, .color-R1 {
    background-color: #D3D3D3;
}

.color-C2, .color-R2 {
    background-color: rgb(255, 128, 0);
}


.color-C3, .color-R3 {
    background-color: #FFFF00;
}

.color-C4, .color-R4 {
    background-color: rgb(181, 100, 201);
}

.color-C5, .color-R5 {
    background-color: #87CEFA;
}

.color-C6, .color-R6 {
    background-color: #7CfC00;
}

.color-C7, .color-R7 {
    background-color: #FF0000;
}

.color-C8, .color-R8 {
    background-color: #8B0000;
}

.validation-list .valid {
    color: green;
}

.validation-list .not-valid {
    color: red;
}

.benchmark-graphs {
    display:flex; 
    width:100%;
}

.benchmark-graphs .chart-container {
   margin: 2em;
}

.benchmark-graphs label {
    padding-bottom: 1em;
    padding-top: 1em;
    font-weight: bold;
}

#external-product-calculation-grid .unit {
    min-width: 1.5em;
    margin-left: 0.5em;
}

#external-product-calculation-grid .ext-prod-total {
    margin-left: 1.5em;
}

#sign-up-list {

}

.flex-container.upload-area {
    display: flex;
    flex-direction:column;
}

.file-drop-zone {
    padding: 20px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed var(--input-stroke);
    border-radius: 5px;
}

.file-drop-zone:hover {
    border-style: solid;
}

/*.flex-container > .file-drop-zone {
    height: unset !important;
}*/

.file-drop-zone input.fill-me-up {
    height: 100%;
    min-height: 85px;
}

.file-list-zone {
    width:100%;
}

.file-list-zone {
    margin-top: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    /*background-color: aliceblue;*/
    margin-bottom: 1.5em;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
}

.file-list-zone ul {
    list-style-type: none;
}

.file-list-zone ul li {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.file-list-zone ul li a{
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.flex-container.graph-container {
    display: flex;
    flex-direction: column;
}

.development-graphs .graphs-row {
    display: flex;
}

.development-graphs .chart-container {
    margin-bottom: 3em;
    min-width: 33%;
}

.chart-container label {
    font-weight: bold;
    /*padding:1em;*/
}

.company-logo-zone {
    display: flex;
}

.company-logo-zone .file-drop-zone {
    width: 50%;    
}

.company-logo-zone .company-logo-container {
    width: 50%;
    padding-left: 3em;
}

.company-logo-zone .company-logo-container img {
    /*width: 150px;
height: 150px; */
    max-height: 11rem;
    max-width: 11rem;
    width: auto;
    height: auto;
}

.span-2 {
    grid-column: span 2;
}

.mail-editor-container {
    flex-direction:column;
}

.mail-editor-container label {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
    color: var(--surface-secondary-bg);
}

.mail-editor-container .btn.btn-hollow {
    font-size: 0.8em;
    margin-right: 0.5rem;
    margin-bottom: 0.35rem;
}

.mail-editor-container .mail-editor {
    margin-bottom: 4rem;
}

.edit-user-container .welcome-mail-row {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}

#usagelog-list .four-columns {
    grid-template-columns: repeat(3, 1fr) 3fr;
    width: 100%;
}

.sidebar nav ul li .nav-recyclebin-icon {
    background-image: url('/images/icons-other/icon_delete.svg');
}

.sidebar nav ul li a.active.nav-recyclebin-icon {
    background-image: url('/images/icons-other/icon_bg_delete.svg');
}

.carbon-account span.old {
    color: darkgoldenrod;
    /*border: 1px dotted darkgray;
    background-color: aliceblue;*/
}

.check-container {
    margin-top: 0.5rem;
}

.btn.invalid {
    /*
    color: white;
    background-color: red;
        */
    border-color: red;
}

.invalid-error-text {
    color: red;
    margin-top: 0.5rem;
}

.input-paper-four-columns {
    /* grid-template-columns: minmax(2rem, var(--first-column-width)) repeat(3, minmax(2rem, 1fr)); */
    grid-template-columns: 2rem repeat(1, minmax(2rem, 1.5fr)) repeat(1,0.4fr) repeat(1,0.55fr);
}

.two-columns.grid-container .sub-menu,
.input-paper-four-columns.grid-container .sub-menu {
    grid-column: span 4;
    margin-left: 2rem;
}

.two-columns.grid-container .sub-menu div,
.input-paper-four-columns.grid-container .sub-menu div {
    margin-left: 2em;
    margin-right: 2em;
}

.two-columns.grid-container .sub-menu.no-border-bottom,
.input-paper-four-columns.grid-container .sub-menu.no-border-bottom {
    border-bottom: none;
}

.shared-substrate-column {
    justify-content: end;
    background-color: #cccccc;
}

.input-paper-five-columns {
    grid-template-columns: minmax(var(--min-column-width), var(--first-column-width)) repeat(4, minmax(var(--min-column-width), 1fr));
}

.shared-substrate-column span {
    margin-right: 1em;
}

.column-span-2 {
    grid-column: span 2;
}

#dashboard .grid-container-five-columns {
    /*grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(3, minmax(var(--min-column-width-s), 1fr));*/
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) 1fr repeat(2,0.1fr);
}

#dashboard .grid-container-five-columns .btn {
    font-size: 0.8em;
}

/*******************/
/***CUSTOM SELECT***/
/*******************/
.custom-select {
    padding: 0.3rem;
    /* background-color: white;
    border: 1px solid black;*/

    border: 1px solid var(--input-stroke);
    background-color: var(--input-bg);
    border-radius: 0.3rem;
    cursor: pointer;
    min-width: 13rem;
    /*max-width: 13rem;*/
    max-width: 34rem;
    overflow: hidden;
}

.custom-select-text {
}

.custom-select {
    display: grid;
    grid-template-columns: 1fr 1rem;
}

.custom-select .dropdown-icon div {
    margin-top: 0.25rem;
    margin-bottom: -0.25rem;
}

.custom-select .dropdown-icon div:after {
    content: "\276F";
    transform: rotate(90deg);
    min-width: 1rem;
    display: block;
}

.custom-option-test option,
.custom-option-test div {
    display: block;
    min-height: 1.6rem;
    background-color: white;
    color: black;
    padding: 0.3rem;
    cursor: pointer;
}

.custom-option-test div:hover {
    background-color: cornflowerblue;
    color: white;
}

.drop-down-area {
    display: none;
    border-left: 1px solid var(--input-stroke);
    border-right: 1px solid var(--input-stroke);
    border-bottom: 1px solid var(--input-stroke);
    overflow: auto;
    max-height: 30rem;
}

.drop-down-area.active {
    display: block;
    position: absolute;
    z-index: 1000;
}

.select-search-area {
    background-color: #ffffff;
}

.select-search-area input {
    border-radius: unset;
    border-color: transparent;
    background-color: #cccccc55;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}


/*******************/

.sidebar nav a.nav-link-not-active {
    cursor: default;
    color: rgba(0,0,0,0.5);
}

.sidebar nav ul li .nav-reports-icon {
    background-image: url('/images/icons-other/icon_reports_v2.svg');
}

.sidebar nav ul li a.active.nav-reports-icon {
    background-image: url('/images/icons-other/icon_bg_reports_v2.svg');
}

.sidebar nav ul li .nav-certify-icon {
    background-image: url('/images/icons-other/icon_certificates.svg');
}

.sidebar nav ul li a.active.nav-certify-icon {
    background-image: url('/images/icons-other/icon_bg_certificates.svg');
}

.sidebar nav ul li .nav-auditing-icon {
    background-image: url('/images/icons-other/icon_auditing.svg');
}

.sidebar nav ul li a.active.nav-auditing-icon {
    background-image: url('/images/icons-other/icon_bg_auditing.svg');
}

.sidebar nav ul li .nav-organization-icon {
    background-image: url('/images/icons-other/icon_organizations_v2.svg');
}

.sidebar nav ul li a.active.nav-organization-icon {
    background-image: url('/images/icons-other/icon_bg_organizations_v2.svg');
}

.sidebar nav ul li .nav-versions-icon {
    background-image: url('/images/icons-other/icon_versions_v2.svg');
}

.sidebar nav ul li a.active.nav-versions-icon {
    background-image: url('/images/icons-other/icon_bg_versions_v2.svg');
}

.sidebar nav ul li .nav-company-icon {
    background-image: url('/images/icons-other/icon_company_v2.svg');
}

.sidebar nav ul li a.active.nav-company-icon {
    background-image: url('/images/icons-other/icon_bg_company_v2.svg');
}

.sidebar nav ul li .nav-mail-templates-icon {
    background-image: url('/images/icons-other/icon_mail_templates_v2.svg');
}

.sidebar nav ul li a.active.nav-mail-templates-icon {
    background-image: url('/images/icons-other/icon_bg_mail_templates_v2.svg');
}

.sidebar nav ul li .nav-users-icon {
    background-image: url('/images/icons-other/icon_users_v2.svg');
}

.sidebar nav ul li a.active.nav-users-icon {
    background-image: url('/images/icons-other/icon_bg_users_v2.svg');
}

.sidebar nav ul li .nav-transportation-icon {
    background-image: url('/images/icons-other/icon_transport_v2.svg');
}

.sidebar nav ul li a.active.nav-transportation-icon {
    background-image: url('/images/icons-other/icon_bg_transport_v2.svg');
}

/*emissions with units <sub> etc.*/
.flex.text-text-container p {
    /*display: flex;*/
    gap: .2rem;
}

.flex.text-text-container p div {
    white-space: nowrap;
}

.flex.input-text-container div.unit {
    white-space: nowrap;
}

.grid-container-emission .small-input-container {
    min-width: 5rem;
}
/*
.nav-link-icon {
    background-size: 1.5rem 1.27rem;
}
    */
/*fix missing border bottom on climate calculation*/
.grid-container > div:not(.subgrid).border-top-bottom {
    border-top: 2px solid var(--surface-secondary-bg);
    border-bottom: 2px solid var(--surface-secondary-bg);
}

.blue-text {
    color: Blue;
}

.alert-text-purple {
    color: fuchsia;
    font-weight: bold;
}

.error-message-files {
    color: red;
    font-weight: bold;
}

.grid-container > div:not(.subgrid).header-border-bottom {
    border-bottom: 2px solid var(--surface-secondary-bg);
}

.grid-container-carbon-account .row-header > div img,
.grid-container-carbon-account .border-top-bottom > div img
{
    max-width: 1.75rem;
}

.specific-emission-used {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    background-color: rgba(255,255,255,1);
}


.chart-container .average-legend {
    display: flex;
    justify-content: center;
}

.chart-container .average-legend .average-icon {
    background-color: rgb(255, 99, 132);
    width: 1rem;
    height: 0.25rem;
    border-radius: 0.5rem;
    margin: 0.5rem;
}


.submenu-header {
    font-weight: bold;
    color: var(--surface-secondary-bg);
    border-bottom: 2px solid var(--surface-secondary-bg);
    padding-bottom: 0.2rem;
    margin-top: 0.5rem;
}

.submenu-btn div {
    display:flex;
}

/*for icons on buttons*/
.submenu-btn div > img {
    width: 1.25rem;
    height: 1.25rem;
}

.submenu-btn div::after {
    content: "\276F";
    width: var(--spacer-x1);
    height: var(--spacer-x1);
    text-align: center;
    transition: all 0.35s;
    display: table;
    margin-left: 1.0rem;
}

.submenu-btn.active div::after {
    transform: rotate(90deg);
}

.grid-container-carbon-account {
    grid-auto-rows: min-content;
}

.grid-container > div:not(.subgrid).border-top {
    border-top: 2px solid var(--surface-secondary-bg);
}

#sign-up-list .grid-container {
    grid-auto-rows: min-content;
    padding-bottom: 2rem;
}

.admin-dashboard-edit-area .grid-container.four-columns {
    width: 100%;
    grid-template-columns: repeat(3, 2fr) 1fr;
    margin: 0.5rem;
    margin-bottom: 3rem;
}

.admin-dashboard-edit-area {
    /*padding: 1rem;*/
    /*background-color: antiquewhite;*/
    background-color: #CFDCD8;
}

#administration .grid-container.five-columns {
    grid-template-columns: repeat(4, 2fr) 1fr;
    width: 100%;
}

.spinner img {
    width: 1.25em;
    height: 1.25em;
}

.carbon-account-selector {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    margin-right: 3rem;
}

.justify-content-space-between {
    justify-content: space-between;
}

.top-menu-user-name {
    cursor: default;
    font-weight: bold;
}

.culture-shorthand-text {
    width: 100%;
    text-align: right;
    font-style: italic;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.invalid-error-text-prod-calc {
    color: red;
}

div.command-cell.alt-bgcolor {
    background-color: #26655333;
}

.subgrid.left-border  {
    border-left: 1px dotted black;
    /*border-bottom: 1px solid black;*/
}

#external-product-calculation-grid {
    grid-row-gap: 3rem;
}

.more-options-carbon-account {
    border: 1px solid var(--stroke-color);
    background-color: var(--surface-bg);
    border-radius: var(--border-radius);
    display:inline-block;
}

.carbon-account-list .download-icon {
    display: inline-block;
    color: black;
}

.subgrid.is-unshared div{
    background-color: #cccccc;
}

input[type="text"].prod-calc-name-input {
    min-width: 15rem;
}

.grid-container > div.subgrid > div.bold-top-border {
    border-top: 1px solid black;
}

.grid-container > div.subgrid > div.bold-bottom-border {
    border-bottom: 1px solid black;
}

.cc-modal {
    display: none;
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.cc-modal.show {
    display:block;
}

.cc-modal .confirm-dialog {

    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    /*border: 1px solid #888;*/
    min-width: 20rem;
    width: 30rem;
    border-radius: 5px;
    min-height: 15rem;
    /*width: 80%;*/ /* Could be more or less, depending on screen size */
}

.cc-modal .confirm-dialog .confirm-dialog-content {


}

.cc-modal .modal-text {
    min-height:10rem;
}

.cc-modal .confirm-dialog .modal-button-container {
    display: flex;
    justify-content: space-around;
}

.cc-modal .confirm-dialog .modal-button-container .btn{
    text-align: center;
}

.text-danger {
    color:red;
}

.create-carbon-account-section {
    border: 1px solid var(--input-stroke);
    background-color: #ffffff; /*var(--input-bg);*/
    border-radius: var(--border-radius);
    margin: 0;

    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.create-carbon-account-section .create-carbon-account-area {
    border: 1px solid var(--input-stroke);
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    padding: 3rem;
    width: 30rem;
}

.create-carbon-account-area #CreateFromDate,
.create-carbon-account-area #CreateToDate {
    min-width: 12rem;
}

#labels .grid-container.four-columns {
    grid-template-columns: repeat(3, 2fr) 1fr;
}

#labels .grid-container {
    padding: 0;
}

#labels .grid-container > div:not(.no-padding) {
    padding: var(--spacer-x1) var(--spacer-x2);
}

#labels .grid-container > div.no-padding {
    padding: var(--spacer-x1) var(--spacer-x1) var(--spacer-x1) var(--spacer-x2);
}

#labels .grid-container.four-columns {
    width: 100%;
}

.modal-childcontent {
    width:100%;
    margin-top:1rem;
    margin-bottom:1rem;
}



#input-company .grid-container-seven-columns {
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(4, minmax(var(--min-column-width-s), 0.3fr)) 1fr;
}

#input-employees .grid-container-eight-columns {
    /*grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(4, minmax(var(--min-column-width-xs), 1fr)) repeat(2, minmax(15rem, 1fr));*/
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(4, minmax(var(--min-column-width-xs), 0.8fr)) minmax(15rem, 0.3fr) 1fr;
}

#input-employees .grid-container-six-columns {
    /*grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(2, minmax(var(--min-column-width), 2fr)) repeat(2, minmax(15rem, 1fr));*/
    grid-template-columns: auto minmax(var(--min-column-width), 20rem) repeat(2, minmax(var(--min-column-width), 1.6fr)) minmax(15rem, 0.3fr) 1fr;
}

#input-transportation .grid-container-six-columns {
    /*grid-template-columns: auto minmax(var(--min-column-width), 22rem) minmax(30rem, 1fr) repeat(3, minmax(var(--min-column-width-xs), 1fr));*/
    /*grid-template-columns: auto minmax(var(--min-column-width), 22rem) minmax(30rem, 1fr) repeat(2, minmax(var(--min-column-width-s), 0.3fr)) 1fr;*/
    grid-template-columns: auto minmax(var(--min-column-width), 22rem) minmax(30rem, 30rem) minmax(var(--min-column-width-xs), 0.3fr) minmax(var(--min-column-width-s), 0.3fr) 1fr;
}

.validate-btn {
    font-size: 0.8rem;
    padding-left: 1em;
}

.sidebar nav ul li .nav-labels-icon {
    background-image: url('/images/navbar/labelsv2.svg');
}

.sidebar nav ul li a.active.nav-labels-icon {
    background-image: url('/images/navbar/labelsv2-bg-surface.svg');
}

.sidebar nav ul li .nav-manage-files-icon {
    background-image: url('/images/navbar/manage-files.svg');
}

.sidebar nav ul li a.active.nav-manage-files-icon {
    background-image: url('/images/navbar/manage-files-bg-surface.svg');
}

.sidebar nav ul li .nav-iacc-archive-icon {
    background-image: url('/images/navbar/iacc-archive.svg');
}

.sidebar nav ul li a.active.nav-iacc-archive-icon {
    background-image: url('/images/navbar/iacc-archive-bg-surface.svg');
}

.version-selection select {
    max-width: 15rem;
}

.wizard-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.wizard-modal.show {
    display: block;
}

.wizard-modal .wizard-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    /*border: 1px solid #888;*/
    /*min-width: 20rem;*/
    width: 75rem;
    border-radius: 5px;
    min-height: 15rem;
    /*width: 80%;*/ /* Could be more or less, depending on screen size */
}



.wizard-modal .modal-text {
    min-height: 10rem;
}

.wizard-modal .wizard-content .modal-button-container {
    display: flex;
    justify-content: space-around;
}

.wizard-modal .wizard-content .modal-button-container .btn {
    text-align: center;
}

.list-item-row {
    display: flex;
    flex-direction:row;
}

.productcalculationlist-header-row {
    display: flex;
    flex-direction: row;
}

.productcalculationlist-header-row .filter-column-header {
    display: flex;
    flex-direction: column;
}

/* calculator V2 - Start */

.productcalculationlist-grid {
    display: grid;
    background-color: #ccc;
    gap: 1px;
    padding: 2px;
    /*border: 1px solid #F1F1F3;*/
    border-radius: var(--border-radius);
}

/*    .productcalculationlist-grid > div {
        background-color: #FAFAFA;
        
    }*/

    .filter-column-header-filters.date-filter {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1px;
    }

.col-sort-ascending::after {
    content: "\276F";
    width: var(--spacer-x1);
    text-align: center;
    transition: all 0.35s;
    display: inline-block;
    transform: rotate(-90deg);
    /*margin-top: 0.25rem;*/
}

.col-sort-descending::after {
    content: "\276F";
    width: var(--spacer-x1);
    text-align: center;
    transition: all 0.35s;
    display: inline-block;
    transform: rotate(90deg);
    /*margin-top: 0.5rem;*/
}

.filter-column-header {
    padding: 0;
    /*background-color: red;*/
    background-color: #eaeaea;
}

.grid-check {
    padding: 0.2rem;
    display: flex;
    justify-content: center;
}

.grid-content {
    padding: 0.4rem;
    background-color: #FAFAFA;
}

.filter-column-header-filters {
    padding: 0.4rem;
}

.filter-column-header-text {
    /*height: 1.5rem;*/
    background: var(--surface-secondary-bg);
    color: white;
    font-weight: bold;
    padding: 0.4rem;

    height: 5rem;
    text-align: center;
}

.filter-column-header-sort {
}

.filter-column-header-sort > div{
    display:inline-block;
    padding-top: 0.25rem;
}

.filter-column-header-sort.col-sort-ascending > div {
    
}

.filter-column-header-sort.col-sort-descending > div {

}


/*test*/
/*
.productcalculationlist-grid {
    overflow: hidden;
}

.grid-productcalculation-cell {
    position: relative;
    span {
        position: relative;
        z-index: 1;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -1000%;
        left: -1000%;
        background-color: green;
    }

    &:hover::before {
        background-color: orange;
    }

}
*/

.productcalculationlist-grid .row-wrapper {
    display: contents;
}

.productcalculationlist-grid .row-wrapper:hover > div {
    /*background-color: rgba(var(--highligthed-column-color-RGB), 0.2);*/
    background-color: #CFDCD8; /*same as the above with transparency on the normal off-white color, but then we can keep the normal grid background color as pseudo borders in the grid gaps*/
}

.row-wrapper .grid-check {
    background-color: #FAFAFA;
}

/* calculator V2 - End */

.print-show {
    display: none;
}

.grid-container div.grid-row-wrapper {
    display: contents;
}

.grid-container > div.force-page-break {
    display: none;
    /*page-break-after: always;*/
}

.label-btn {
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 0.8rem;
}

.signuprequest-notify-label {
    margin-right: 1rem;
}

/******POPUP************/
.hover-popup-content {
    display: none;
}

.hover-popup:hover .hover-popup-content {
    display: block;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
    margin-left: 0.5rem;
    margin-top: 0.2rem;
}

/* Tooltip text */
    .tooltip .tooltiptext {
    visibility: hidden;
    /*width: 120px;
background-color: black;*/
    /*width: 20rem;*/
    width: 40rem;
    background-color: var(--surface-secondary-bg);
    color: #fff;
    /*text-align: center;*/
    padding: 1rem;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*tooltip placement*/
.tooltip .tooltiptext {
    top: -1.8rem;
    /*left: 105%;*/
    left:20px;
}

/*tooltip arrow*/
   /* .tooltip .tooltiptext::after { */
    .tooltip .tooltiptext::before {
        content: " ";
        position: absolute;
        top: 1.8rem;
        left: -5px;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        /*border-color: var(--surface-secondary-bg) transparent transparent transparent;*/
        border-color: transparent var(--surface-secondary-bg) transparent transparent;
    }

.tooltip-paper-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
}
.tooltip-paper-item {

}

.tooltip-paper-header {
    margin-bottom: 1rem;
}

span.calc-version {
    margin-right: 1rem;
    font-weight: bold;
}

/*recycle bin (substrate)*/
#recyclebin .grid-container {
    padding: 0;
}

#recyclebin .grid-container > div:not(.no-padding) {
    padding: var(--spacer-x1) var(--spacer-x2);
}

#recyclebin .grid-container > div.no-padding {
    padding: var(--spacer-x1) var(--spacer-x1) var(--spacer-x1) var(--spacer-x2);
}

#recyclebin .grid-container.four-columns {
    grid-template-columns: repeat(3, 2fr) 1fr;
}

#recyclebin .collapsible {
    margin-bottom: 0.5rem;
}

#recyclebin .grid-container.four-columns {
    width: 100%;
}

#recyclebin .grid-container.five-columns {
    grid-template-columns: repeat(4, 2fr) 1fr;
    width: 100%;
}