:root {
    --vertical-rythm: 0.5rem;
    --spacing: 0.5rem;

    --orange: #ee7601;
    --orange-dark: #e84b0f;
    --dark-marker: #9f9fa8;
    --darker-marker: #6f6f7d;
    --darkest-marker: #35353c;
    --light-marker: #eee;
    --light-marker--highlight: #ddd;
    --light-marker--highlighter: #ccc;
    --font-color: #222;
    --background-color: #fff;
    --light-boxelem: #fff;
    --boks-shadow: 0px 5px 15px #bbbbbb;
    --link-color: #0000ee;
    --link-color-clicked: #8300ee;

    --error-marker: hsl(33.7, 100%, 61.6%);

    --green-marker: #8BC435;
}

/* Dark mode variables */
html.dark-mode,
body.dark-mode {
    --dark-marker: #808080;
    --darker-marker: #aaaaaa;
    --darkest-marker: #eee;
    --light-marker: #2a2a2a;
    --light-marker--highlight: #3b3b3b;
    --light-marker--highlighter: #404040;
    --font-color: #ffffff;
    --background-color: #1b1b1b;
    --light-boxelem: #363636;
    --boks-shadow: 0px 5px 15px #eee;
    --link-color: #2583ff;
    --link-color-clicked: #bc6bff;
}

* {
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}

html {
    font: 16px/1.5rem "Open Sans", sans-serif;
    color: var(--font-color);
    background-color: var(--background-color);
    overflow-y:scroll;
}

/* i18n diagnostics */

.missing-i18n {
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 0 0.3em;
    border-radius: 0.3em;
    border: 2px solid white;
    outline: 2px solid red;
    position: relative;
}


/* Top-of-page header */

header {
    background-color: var(--background-color);
    color: var(--font-color);
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding-left:1.25rem;
    padding-bottom:0.5rem;
    position:fixed;
    top:0;
    width:100%;
    z-index:2;
    border-bottom:1px solid var(--light-marker--highlight);
}

header .rightside {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: flex-end;

}

header .user-section {
    line-height:3rem;
    height:3rem;
    cursor:pointer;
    margin-top:0.25rem;
}

header .user-section:hover {
    color:var(--orange);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

header .user-section .register {
    display:block;
    padding-left: 1rem;
    padding-right: 1rem;
    height:3rem;
    color: var(--font-color);
}

header .user-section .register:hover {
    color:var(--orange);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

header .user-section .login {
    display:block;
    padding-left: 1rem;
    padding-right: 1rem;
    height:3rem;
}

header .user-section .login:hover {
    color:var(--orange);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

header .user-section .user-link {
    display:block;
    padding-left: 3rem;
    padding-right: 1rem;
    height:3rem;
    background-image: url('icons/profile_icon-dark.svg');
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 0.5rem 0.5rem;
    color: var(--font-color);
}
header .user-section:hover .user-link {
    background-image: url('icons/profile_icon-orange.svg');
    color:var(--orange);
}

html.dark-mode header .user-section .user-link,
body.dark-mode header .user-section .user-link {
    background-image: url('icons/profile_icon-dark.svg');
    color: black;
    filter: invert(1);
}
html.dark-mode header .user-section:hover .user-link,
body.dark-mode header .user-section:hover .user-link {
    background-image: url('icons/profile_icon-orange.svg');
    filter: none;
    color: var(--orange);
}

header .user-section .dropdown-content {
    width:21rem;
    cursor: default;
    font-weight:normal;
}

header .login-line {
    display:flex;
    flex-flow: row nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    height:3rem;
    line-height:3rem;
    justify-content: space-between;
    gap: 1rem;
    color: var(--font-color);
}

header .login-line:last-child {
    height: auto;
    min-height: 1.5rem;
    line-height: 1.5rem;
    padding-bottom:1rem;
}

header .login-line label {
    display:block;
    width:6rem;
}

header .login-line input[type=text], header .login-line input[type=password], header .login-line input[type=email] {
    display:block;
    width:12rem;
    height:2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left:0.5rem;
}

header .login-line a.text-link {
    color: rgb(38, 38, 38);
    text-align:right;
    line-height:1.5rem;
    width: 12rem;
    text-align:right;
}

header .login-line a.text-link:hover {
    color: var(--orange);
}




header .login-line a.text-link:first-child {
    width: 6rem;
    text-align:left;
}

header .login-line a.login-option {
    display:block;
    width:100%;
    height:2rem;
    line-height:2rem;
    margin-top:0.5rem;
    text-align:center;

    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: repeat-x;
    color: var(--font-color);
    text-decoration:none;
}

header .login-line a.login-option:hover {
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    -webkit-transition:.4s;
    -o-transition:.4s;
    transition:.4s
}

header .user-section .account-link {
    display:block;
    padding-left: 3rem;
    padding-right: 1rem;
    height:3rem;
    line-height:3rem;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 0.5rem 0.5rem;
    color: var(--font-color);
    text-decoration:none;
    position: relative;
}

header .user-section .account-link::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 0 0;
    pointer-events: none;
}

header .user-section .account-link:hover {
    color:var(--orange);
    text-decoration:underline;
    text-decoration-thickness: 2px;
}

header .user-section .account-link {
    background-image: none;
}

header .user-section .account-link.account-link--profile::before {
    background-image: url('icons/profile_icon-dark.svg');
}
header .user-section .account-link.account-link--profile:hover::before {
    background-image: url('icons/profile_icon-orange.svg');
}

header .user-section .account-link.account-link--logout::before {
    background-image: url('icons/logout_icon-dark.svg');
}
header .user-section .account-link.account-link--logout:hover::before {
    background-image: url('icons/logout_icon-orange.svg');
}

header .user-section .account-link.account-link--user-overview::before {
    background-image: url('icons/users_icon-dark.svg');
}
header .user-section .account-link.account-link--user-overview:hover::before {
    background-image: url('icons/users_icon-orange.svg');
}

header .user-section .account-link.account-link--calculations::before {
    background-image: url('icons/calculation_icon-dark.svg');
}
header .user-section .account-link.account-link--calculations:hover::before {
    background-image: url('icons/calculation_icon-orange.svg');
}

html.dark-mode header .user-section .account-link::before,
body.dark-mode header .user-section .account-link::before {
    filter: invert(1);
}

html.dark-mode header .user-section .account-link:hover::before,
body.dark-mode header .user-section .account-link:hover::before {
    filter: none;
}

html.dark-mode input[type="number"]::-webkit-inner-spin-button,
html.dark-mode input[type="number"]::-webkit-outer-spin-button,
body.dark-mode input[type="number"]::-webkit-inner-spin-button,
body.dark-mode input[type="number"]::-webkit-outer-spin-button {
    filter: invert(0.8);
}

html.dark-mode ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--light-boxelem);
}

html.dark-mode ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-marker);
    border-radius: 6px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--darker-marker);
}





header .orange-climate-logo {
    background-image:url('logo-orange.svg');
    background-repeat:no-repeat;
    width:12rem;
    height:3rem;
    background-size:100% 100%;
    background-size:contain;
    text-indent:-999em;
    display:inline-block;
    margin-top:0.5rem;
}

header a.new-calculation {
    margin-top:0.25rem;
    padding:0px 1rem;
    color: var(--font-color);
    line-height:3rem;
    text-decoration: none;
    margin-left: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
}

header a.new-calculation:hover {
    color:var(--orange);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

header .language-select {
    position:relative;
    display:inline-block;
}

header .current-language {
    width: calc(3rem + 2px);
    background-color:inherit;
    border:1px solid transparent;
    cursor: pointer;
    margin-top:0.25rem;
}

header .dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--background-color);
  border: 1px solid #e6e9ee;
}

header .dropdown-content.show {
    display: block;
    border-radius:12px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
}



header .call-button {
    height:100%;
    width:10rem;
    line-height:2.5rem;
    height:2.5rem;

    background-color: var(--background-color);
    color: var(--font-color);
    text-decoration:none;
    border:1px solid var(--dark-marker);
    border-radius:12px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
    margin-top: 0.5rem;
    text-align:center;
    margin-left:1rem;
    margin-right:1rem;

}

header .call-button:hover {
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    color:white;
    border:0px;
}

header .call-button img {
    display:block;
    height:3rem;
    width:3rem;
    padding:0.75rem;
    float:left;
}


header > * + * {
    padding-left: 0.5rem;
}

header img {
    max-height: 3rem;
}

header h1 {
    font-size: 100%;
    font-weight: bold;
}


/* Footer */

footer {
    margin: 0 auto;
    max-width:960px;
    width:100%;
    color:lightgray;
    padding-bottom:1rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
}

footer a, footer a:visited {
    color:lightgray;
}

footer a:hover {
    color:gray;
}

.flag-entry {
    display:block;
    width: calc(3rem + 2px);
    height:3rem;
    padding: 0;
    border-radius: 0;
}

.flag-entry:hover {
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: no-repeat;
    background-position:calc(((3rem - 18px) / 2) - 2px) calc(((3rem - 15px) / 2) - 2px);
    background-size: 24px 19px;
}

.flag {
    margin-left: calc((3rem + 2px - 20px) / 2);
    margin-right: calc((3rem + 2px - 20px) / 2);
    margin-top: calc((3rem - 15px) / 2);
    margin-bottom: calc((3rem - 15px) / 2);
    width:20px;
    height:15px;
    display:inline-block;
}

.flag-nl {
    background: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20viewBox%3D%220%200%2020%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%22.05%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h20v14.934H0z%22%2F%3E%3Cpath%20fill%3D%22%2321468b%22%20d%3D%22M0%2010.022h20V15H0z%22%2F%3E%3Cpath%20d%3D%22M0%200h20v4.978H0V0z%22%20fill%3D%22%23ae1c28%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.flag-de {
    background: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20viewBox%3D%220%200%2020%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M0%2010h20v5H0v-5z%22%20fill%3D%22%23ffce00%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M0%200h20v5H0V0z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M0%205h20v5H0V5z%22%20fill%3D%22%23d00%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
}

.flag-en {
    background: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20viewBox%3D%220%200%2020%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M-.213%200h641.71v481.28H-.213V0z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23000%22%20stroke-width%3D%22.03%22%3E%3Cpath%20d%3D%22M0%200h20v15H0V0z%22%20fill%3D%22%23006%22%2F%3E%3Cpath%20d%3D%22M0%200v1.677L17.764%2015H20v-1.677L2.236%200H0zm20%200v1.677L2.236%2015H0v-1.677L17.764%200H20z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M8.333%200v15h3.334V0H8.333zM0%205v5h20V5H0z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%206v3h20V6H0zm9-6v15h2V0H9zM0%2015l6.667-5h1.49l-6.666%205H0zM0%200l6.667%205H5.176L0%201.118V0zm11.843%205l6.666-5H20l-6.667%205h-1.49zM20%2015l-6.667-5h1.491L20%2013.882V15z%22%20fill%3D%22%23c00%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}


.gdpr-section {
    float:right;
}


/* Flash messages */

.flash-location {
    position:fixed;
    right:1rem;
    width: 30rem;
    top: 4rem;
    z-index:1;
}

.flash-location .flash-entry {
    background-color:skyblue;
    border-radius:1rem;
    padding:1rem;
    width:100%;
    margin-bottom:1rem;
}

.flash-location .flash-entry ul {
    margin-left:1.5rem;
}