/* CSS Document */
:root {
  --text-color: hsl(0deg 0% 20%);
  --link-color: hsl(0deg 100% 40%);
  --link-color-hover: hsl(0deg 100% 70%);
  --title-color: hsl(0deg 0% 20%);
  --grey: hsl(0deg 0% 50%);
  --light-grey: hsl(0deg 0% 80%);
  --dark-grey: hsl(0deg 0% 30%);
  --error-text-color: hsl(0deg 100% 40%);
  --error-bg-color: hsl(0deg 100% 92%);
  --success-text-color: hsl(100deg 100% 40%);
  --success-bg-color: hsl(100deg 100% 92%);
  --editable-bg-color: hsl(100deg 100% 92%);
  --switch-color: hsl(100deg 40% 45%);
  --text-font: 'OpenSansLight', Arial, Helvetica, sans-serif;
  --gap: 1rem;
  --doublegap: 2rem;
}

* {
	border:none;
	margin:0;
	padding:0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.eot'),
         url('../fonts/OpenSans-Regular.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.eot'),
         url('../fonts/OpenSans-Bold.ttf') format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Italic.eot'),
         url('../fonts/OpenSans-Italic.ttf') format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-BoldItalic.eot'),
         url('../fonts/OpenSans-BoldItalic.ttf') format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSans-Light.eot'),
         url('../fonts/OpenSans-Light.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSans-Semibold.eot'),
         url('../fonts/OpenSans-Semibold.ttf') format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSans-LightItalic.eot'),
         url('../fonts/OpenSans-LightItalic.ttf') format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSans-SemiboldItalic.eot'),
         url('../fonts/OpenSans-SemiboldItalic.ttf') format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSansCond';
    src: url('../fonts/OpenSans-CondLight.eot'),
         url('../fonts/OpenSans-CondLight.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-CondBold.eot'),
         url('../fonts/OpenSans-CondBold.ttf') format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-CondLightItalic.eot'),
         url('../fonts/OpenSans-CondLightItalic.ttf') format("truetype");
    font-weight: normal;
    font-style: italic;
}

html {
    font-size: 62.5%;
}
body {
    font-family: var(--text-font);
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 2rem;
    color: var(--text-color);
}
p + p {
    margin-top: 1.5rem;
}
optgroup
{
    padding-top:3px;
    padding-bottom:3px;
}
    
table {
    border-collapse:collapse;
}
td, th {
    border: none;
    padding: 0.1rem 0.8rem;
    vertical-align:top;
    text-align:left;
    white-space:nowrap;
}
td:first-of-type,
th:first-of-type {
    padding-left: 0;
}
tr {
}
th {
    font-weight: normal;
    font-style: italic;
    font-size: 1.2rem;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    cursor: pointer;
    color: var(--link-color);
    transition-duration: 0.3s;
}
a:hover {
    color: var(--link-color-hover);
}
button, .button {
    font-size: 2.4rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin: 3rem;
    padding: 1rem 3rem;
    background: var(--link-color);
    border: 1px solid var(--link-color);
    border-radius: 0.4rem;
    transition-duration: 0.3s;
    cursor: pointer;
    user-select: none;
}
button:hover, .button:hover {
    background-color: white;
    color: var(--link-color);
}
button.icon, a.icon, .icon {
    height: 2rem;
    width: 2rem;
    margin: 1rem;
    line-height: 2rem;
    padding: 0;
    border-radius: 0;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--dark-grey);
    font-size: 2rem;
    transition-duration: 0.3s;
    transform-origin: center;
}
button.icon:hover, a.icon:hover {
    background-color: transparent;
    transform: scale(1.2);
    color: var(--link-color);
}
button.btn-secundary, .button.btn-secundary {
    background-color: var(--grey);
    border-color: var(--grey);
}
button.btn-secundary:hover, .button.btn-secundary:hover {
    background-color: white;
    color: var(--grey);
}
button[disabled="disabled"] {
    opacity: 0.4;
    cursor: not-allowed;
}
button.success {
    background-color: var(--success-text-color);
    border-color: var(--success-text-color);
    opacity: 1;
    color: white;
}
/* special buttons */
.fa-exclamation-circle {
    color: var(--error-text-color);
}
.fa-envelope-open-text {
    color: var(--success-text-color);
}
.fa-spinner {
    animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
  0%   {transform: rotate(0);}
  100% {transform: rotate(1turn);}
}


input, select, textarea {
    font-family: 'OpenSansLight', Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    border: 1px solid var(--light-grey);
    padding: 0.4rem;
    background: #fff;
    border-radius: 0.3rem;
}
input[type=text], 
input[type=tel], 
input[type=date], 
input[type=datetime-local], 
input[type=email], 
input[type=url], 
input[type=number], 
input[type=password], 
input[type=submit], 
select, 
textarea {
    width: 100%;
    transition-duration: 3s;
    transition-property: background-color,border-color,color;
}
input[type=number] {
    text-align: right;
}
label {
    font-size: 1.2rem;
    color: var(--grey);
    display: inline-block;
    margin-top: 0.8rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
/* switch toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.switch b {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 34px;
  background-color: var(--light-grey);
  transition: .4s;
}

.switch b:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  border-radius: 50%;
  background-color: white;
  transition: .4s;
}

.switch input:checked + b {
  background-color: var(--switch-color);
}

.switch input:focus + b {
  box-shadow: 0 0 1px var(--switch-color);
}

.switch input:checked + b:before {
  transform: translateX(26px);
}

.error-msg {
    color: var(--error-text-color);
    font-weight: bold;
}
.error-field {
    background-color: var(--error-bg-color);
    border-color: var(--error-text-color);
    transition-duration: 0.4s !important;
}
.success-msg {
    color: var(--success-text-color);
    font-weight: bold;
}
.success-field {
    background-color: var(--success-bg-color);
    border-color: var(--success-text-color);
    transition-duration: 0.4s !important;
}
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.5rem;
    gap: 2rem;
    width: 100%;
}
form .formbuttons,
form .activetoggle {
    width: 100%;
}
form .activetoggle {
    text-align: right;
}

header {
    background: #333;
    padding: 0 2rem;
    position: fixed;
    height: 5rem;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1000;
}
.subheader {
    background: #ccc;
    padding: 1rem 2rem;
    position: fixed;
    height: 5rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 999;
    top: 5rem;
}
div#container {
    display: flex;
    justify-content: center;
}
main{
    display: block;
    padding-top: 10rem;
}
/* navigations */

nav {
    position: absolute;
    z-index: 50;
}
nav#navimain {
    left: 2rem;
}
nav#naviuser {
    right: 2rem;
}
nav ul {
    
}
nav li {
    color: #ccc;
    list-style: none;
    text-indent: 0;
    padding: 0;
}
nav a {
    color: #ccc;
    text-decoration: none;
    padding: 0 1rem;
    display: block;
}
nav li.curr a, nav a:hover {
    color: #fff;
}
nav > ul > li {
    display: inline-block;
    float: left;
    position: relative;
    line-height: 5rem;
}


/* sub */
nav > ul > li > ul {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    transition-duration: 0.5s;
    transition-delay: 1s;
    transform: scale(1,0);
    transform-origin: top;
}
nav ul ul li {
    line-height: 3.5rem;
}
nav ul ul li:hover {
    background-color: #000;
}
nav > ul > li:hover > ul {
    transform: scale(1,1);
    transition-delay: 0s;
}

nav#naviuser > ul > li > ul {
    text-align: right;
    right: 0;
    white-space: nowrap;
    border-top: 1px solid #555;
}
nav#naviuser > ul > li > ul a {
    white-space: nowrap;
}

h1,h2,h3,h4,h5,h6 {
    width: 100%;
}
h1,h2,h3 {
    font-weight: normal;
}
h1 {
    text-align: center;
    font-size: 3.2rem;
    line-height: 3.6rem;
    margin: 1.2rem 0 2rem;
}
h2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin: 2.5rem 0 0.5rem;
}
h3 {
    font-size: 2rem;
    line-height: 2.3rem;
    margin: 2rem 0 0.3rem;
}
h4 {
    font-size: 1.6rem;
    line-height: 1.6rem;
    margin: 1.6rem 0 0.2rem;
}
h5 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin: 1rem 0 0.2rem;
}
.centered {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.list {
}
li ul.list {
    padding-left: 30px;
}
.list-entry {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
    background-color: #f2f2f2;
}
.list-entry.inactive {
    color: #bbb;
    background-color: #f9f9f9;
}
.list-entry.edit, .list-entry:hover {
    background-color: #e0e0e0;
}
.list-entry.new:not(.edit) {
    display: none;
}
.list-entry > div {
    padding: 3px 0.5rem;
}
.list-form {
    width: 100%;
}
.list-entry.new:not(.edit) {
    display: none;
}
.formgroup {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1rem;
}
.formgroup > div {
    flex-basis: 100%;
}
.editable {
    background-color: white;
    border-radius: 2px;
    padding: 1px 5px;
    min-height: 2.2rem;
}
.editable[contenteditable=true] {
    background-color: var(--editable-bg-color) !important;
    cursor: text;
}



.destination-address, .destination-information {
    width: calc(50% - 1rem);
}
.formgroup .destination-prename,
.formgroup .destination-lastname {
    flex-basis: calc(50% - 1rem);
}
.formgroup .destination-street {
    flex-basis: calc(100% - 10rem);
}
.formgroup .destination-house {
    flex-basis: 8rem;
}
.formgroup .destination-zip {
    flex-basis: 8rem;
}
.formgroup .destination-city {
    flex-basis: calc(100% - 10rem);
}
.delivery_pu_group {
    display: flex;
    gap: 1rem;
}
.delivery_pu_group > div {
    flex: 1 0 0%;
}

.vote-vote_date {
    width: 9rem;
}
.vote-jobnumber {
    width: 9rem;
}
.vote-printrun_until {
    width: 13rem;
}

.votedestinationform {
    width: auto;
    justify-content: left;
}
.votedestination-address {
    width: 30rem;
}
.votedestination-information {
    width: 45rem;
}
.votedestination-products {
    display: flex;
    flex-wrap: nowrap;
}
.vote-product {
    width: 16rem;
}
.product-title {
    text-align: center;
    border-width: 0 1px;
    border-style: solid;
    border-color: var(--light-grey);
}
.product-old_amount,
.product-new_amount {
    width: 50%;
    float: left;
    text-align: right;
    padding-right: 1rem;
    border-width: 0 1px;
    border-style: solid;
    border-color: var(--light-grey);
}
.product-new_amount {
    font-weight: bold;
}
.product-title .error-msg {
    display: block;
}
/*
@media only screen 
    and (max-width: 2229px) 
{
*/
    .votedestination-products {
        display: block;
    }
    .vote-product {
        width: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--light-grey)
    }
    .votedestination-entry .vote-product {
        justify-content: space-evenly;
        width: 100%;
    }
    .product-title {
        text-align: left;
        padding-left: 1rem;
        width: 18rem;
        border: none;
    }
    .product-description {
        width: 30rem;
    }
    .product-old_amount,
    .product-new_amount {
        width: 10rem;
        float: none;
        border: none;
    }
    .vote-product button.icon {
        margin: 0 1rem;
    }
/* } */


.userform .formfield {
    width: 48%;
}
.user-entry {
    width: 60rem;
}
.user-uid {
    width: 8%;
}
.user-login {
    width: 12%;
}
.user-email {
    width: 40%;
}
.user-name {
    width: 40%;
}

.flexrow {
    display: flex;
    max-width: 1280px;
    justify-content: space-around;
}
.flexrow > .col {
    width: calc(50% - 2rem);
}