:root {
    --loginw:400px;
    --loginh:200px;
}
* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body, html {
    background:gray;
    Color:white;
}
.link {
    cursor: pointer;
}
#dlogin {
    position:fixed;
    width:var(--loginw);
    left:calc(50% - (var(--loginw) / 2));
    height:var(--loginh);
    top: calc(50% - (var(--loginh) / 2));
}
#dlogin > div {
    text-align: left;
    color: white;
    padding: 20px;
    justify-content: center;
}
#login {
    width:100%;
    color: white;
    padding: 20px;
}
form.wfull {
    width: 100%;
    border:1px solid red;
}
body > form {
    width:370px;
    background:gray;
    margin:auto;
    padding:10px;
}
form label {
    width:150px;
    text-align:left;
    display:inline-block;
}
.c {
    text-align:center;
}
a:any-link {
    Color:yellow;
}
.important {
    color:red;
    font-weight:900;
}
footer {
    width:100%;
    position:fixed;
    bottom:0;
}
@media (max-width: 1023px) {
    
}
@media (min-width: 1024px) {
}
.texts  li > div {
    border:1px solid yellow;
    background:#04040460;
}
.texts li > div > span {
    display:inline-block;
    width: 50%;
    Color:black;
}
.texts li > div > span:nth-of-type(2) {
    text-align:right;
}
.texts > div > div {
    color:red;
}
.texts ol {
    margin-block-start: 1em;
    padding-inline-start: 20px;
    list-style-type: none;
}
.shops span:nth-of-type(1) {
    display:inline-block;
    width:200px;
}
a:any-link {
    color:white;
    text-decoration:none;
}
button.bottom {
    position:fixed;
    bottom:1rem;
    right:0;
    border:3px solid yellow;
    background:red;
    padding:10px;
}
span.rights button {
    top:0;
    right:1rem;
    font-size: 2rem;
    background: blue;
    border:none;
    color:yellow;
}
span.rights {
    float: right;
    width: 4rem;
    height: 4rem;
    border:none;
    background: blue;
    padding: 10px;   
    text-align: center; 
}
span.clear {
    clear:both;
}
#messages {
    display: none;
    position: absolute;
    width: 50%;
    height: 20%;
    margin: auto;
    background: green;
    left: 25%;
    top: 40%;
}
#error {
    position: absolute;
    width: 50%;
    margin: auto;
    background: green;
    left: 25%;
    top: 40%;
    padding:5px 25px;
}
.close {
    display:inline-block;
    right:0;
    top:0;
    position: absolute;
    border: 2px solid black;
    width: 1.5rem;
    text-align: center;
    margin: 5px;
}
.shops > .disabled {
    border-top: 3px solid blue;
}
.shops > .disabled :nth-child(2) {
    color:gray;
}
.shops > .disabled ~ .disabled {
    border: none;
}
#prodDetails, #prodDetails * {
    width:150px;
}
#producten {
    width:calc(99% - 150px);
    height:200px;
}
#possible {
    height:200px;
}
#newshops {
    width: calc(100% - 10px);
    margin:5px;
    height:200px;
}
.producten {
    padding:5px;
}
.producten select{
    margin-right: 20px;
    width: 150px;
}
.producten form .items {
    display:flex;
    align-items:flex-start;
}
textarea {
    padding: 5px;
    height: 200px;
    width: calc(100% - 1px);
}
.producten div.items > label {
    display: none;
}
ul.producten {
    list-style-type: none;
}
ul.producten li, ul.eenheden li {
    display: inline-block;
    width: 120px;
}
.add2shop select {
    width: 100px;
}
.add2shop select {
    width: 30%;
}
.shoplist {
    min-height: 5rem;
}
.add2shop span {
    display:inline-block;
}
.add2shop span:nth-of-type(1) {
    width:20%;
}
.add2shop span:nth-of-type(2) {
    width:40%;
}
.add2shop span:nth-of-type(3) {
    width:5%;
}
.add2shop span:nth-of-type(4) {
    width:10%;
}

.add2shop select:nth-of-type(3n+1) {
    width:20%;
}
.add2shop select:nth-of-type(3n+2) {
    width:40%;
}
.add2shop input[type="number"]  {
    width:5%;
}
.add2shop select:nth-of-type(3n+3) {
    width:10%;
}
#shoplist table {
    border:1px solid black;
    border-collapse: collapse;
    width:96%;
    margin:1%;
}
#shoplist table td {
    border:1px solid black;padding:2px;
    white-space: nowrap;
    width:20%;
    overflow:hidden;
}
#shoplist table td:nth-of-type(4) {
    text-align:right;
    width:5%;
}
#shoplist table td:nth-of-type(5) {
    width:10%;
}
.fr {
    float:right;
}
.fl {
    float:left;
}
.reset {
    clear:both;
}
.flex {
    display:flex;
}
.error {
    font-style: italic;
    animation: blinker 1s linear infinite;
}
@keyframes blinker { 
    0%  {color: white; opacity: 1.0;}
    24% {color: white; opacity: 1.0;}
    25% {color: black; opacity: 1.0;}
    49% {color: black; opacity: 1.0;}
    50% {opacity: 0.0;}
    100% {opacity: 0.0;}
}