:root{
    --iq-blue: #003863;
    --iq-note: rgba(0,56,99,0.3);
    --iq-mainbg: #c4ddef;
    --aside-width: 13.5rem;
    --aside-width_mobile: 10rem;
    --aside-width_mini: 8rem;
    --header-height: 8rem;
    --header-height-mobile: 6rem;
    --table-line: #B0C4DE;
    --table-sub: #8da6c4;    
    --placeholder: #a6a7a8;
}
/*******************
/* 
/* font: italic small-caps bold 12px/30px Georgia, serif;
/* font-style font-variant font-weight font-size/line-height font-family
/* 
******************************/
html,body,#main-body,aside,div,header,main,button{
    box-sizing: border-box;
}
html,body,#main-body{
    background-color: var(--iq-mainbg);
    font: 100%/1.5  Arial, sans-serif;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media only screen and (max-width: 1200px) {
    html,body,#main-body{
        font: 80%/1.3  Arial, sans-serif;
    }
}
@media only screen and (max-width: 450px) {
    html,body,#main-body{
        font: 75%/1.3  Arial, sans-serif;
    }
}
#debuginfo:before{
    content: 'debugging info:';
}
#debugrinfo{
    border: 1px solid red;
    z-index: 9000;
    padding: 1rem 0;
}
p.error{
    border: 1px solid red;
    color: red !important;
    padding: 1rem 1rem !important;
    width: 70% !important;
    margin-top: 2rem !important;
}
/********************
aside
********************/
aside{
    background-color: var(--iq-blue);
    box-shadow: 3px 5px 5px black;
    color: white;
    float: left;
    font: 100%/1.5  Arial, sans-serif;
    min-height: 100%;
    padding: 1rem 1rem 0; 
    position: fixed;
    top:0;
    width: var(--aside-width);
    z-index: 100;
}
aside img:first-child{
    padding-top: 6.5rem;
}
aside img{
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 60%;
    padding-top: 3.5rem;
}
.info_h1,.welcome p.h1{
    font: 100%/1.5  Arial, sans-serif;
    text-align: left;
    margin-left: .8rem;
}
.welcome{
    padding-top: .1rem;
    margin-bottom: 17rem;
}
/* change also the padding-left value of the #main-page */
@media only screen and (max-width: 900px) {
    aside{
        font: 100%/1.5  Arial, sans-serif;
        padding: 1rem .5rem 0; 
        width: var(--aside-width_mobile);
    }
    aside img:first-child{
        padding-top: 5.5rem;
    }
    aside img{
        padding-top: 2.5rem;
        max-width: 70%;
    }
    .info-left{
        margin-top: 3rem;
    }
}
@media only screen and (max-width: 400px) {
    aside{
        font: 100%/1.3  Arial, sans-serif;
        padding: 1rem .5rem 0; 
        width: var(--aside-width_mini);
    }
    aside img{
        padding-top: 2rem;
    }
}
aside .mail{
    font: 100%/1.5  Arial, sans-serif;
    text-align: left;
    position: absolute;
    bottom: 1rem;
}
aside .mail a{
    color: white;
    padding-left: .5rem;
    text-decoration: none;
}
.round{
    background-color: white;
    border-radius: 10rem;
    color: var(--iq-blue);
    padding: .3rem;
}
@media only screen and (max-height: 450px) {
    aside .mail{
        display: none;
    }
}

/************
main page
************/
#main-page{
    width: 100%;
    padding-left: var(--aside-width);/*13.5rem;*/
    position: relative;
}
@media only screen and (max-width: 900px) {
    #main-page{
        padding-left: var(--aside-width_mobile);
    }
}
@media only screen and (max-width: 400px) {
    #main-page{
        padding-left: var(--aside-width_mini);
    }
}
.stage, .stage-local,.dev{
    background-color: greenyellow;
    color: green;
}
.stage-local{
    background-color: gold;
}
.dev{
     background-color: darkred;
}
header{
    background-color: var(--iq-blue);
    box-shadow: inset .5em 0 5px -5px black;
    height: var(--header-height);
    position: relative;
    width: calc(100%);
}
header h1{
    color: white;
    display: inline-block;
    font: 700 250%/1  Arial, sans-serif;
    margin: 0;
    padding: 2rem 1rem;
    position: absolute;
    top: 1rem;
    left: 20rem;
}
header h1.left{
    left: 2rem;
}
header img.truck{
    height: var(--header-height);
    width: auto;
}
header img.logo{
    height: auto;
    padding: 2rem 0;
    width: 15rem;
    position: absolute;
    right: 5rem;
}
@media only screen and (max-width: 1200px) {
    header img.logo{ 
        width: 13rem;        
    }
}
@media only screen and (max-width: 900px) {
    header{
        height: var(--header-height-mobile);
    }
    header h1{
        font: 700 200%/1  Arial, sans-serif;
        top: 0;
        left: 15rem;
    }
    header img.truck{
        height: var(--header-height-mobile);
    }
    header img.logo{ 
        width: 10rem;
        right: 2rem;
    }
}
@media only screen and (max-width: 400px) {
    header h1{
        font: 700 180%/1  Arial, sans-serif;
        top: 0;
        left: 2rem;
    }
    header img.logo{ 
        width: 8rem;
        right: 1rem;
    }
}
header hr{
    border-bottom: 0px solid var(--iq-blue);
    clear: left;
}
form{
    margin: 0 auto;
    padding: 0 5%;
}

/**********************
content
**********************/
main article#tabrow.archive{
    margin: 2rem auto;
    width: 70%;
}
.intro{
    margin: 0 auto;
    padding: 0 5% 2rem;
    color: var(--iq-blue);
    text-decoration: none;
    font-size: 120%;
}
#tabrow.login input, #tabrow.login select, #tabrow.login option{
    background-color: transparent;
    border: 1px solid var(--iq-blue);
    border-radius: 3rem;
    color: var(--iq-blue);
    font-size: 100%;
    margin: 1rem 0;
    padding: 1rem 0;
    text-align: center;
    width: 100%;    
}
#tabrow{ 
    background-color: white;
    border-top-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
    margin: 0 auto;
    width: 90%;
}
#tabrow button.tab:nth-first-child{
    border-top-left-radius: .6rem;
}
#tabrow button.tab:last-child{
    border-bottom-right-radius: .6rem;
    border-right: 1px solid var(--iq-blue);
}
article,article#tabrow{
    background-color: transparent;
    margin: 5rem auto 0;
}
article.change,article.login,article.thanks{
    width: 50%;
}
article.change,article.login,article.thanks p{
    font-size: 100%;    
}
article.thanks h2{
    color: var(--iq-blue);
    font-size: 120%;
    font-weight: bold;
    text-align: left;
}
div.note{
    background-color: var(--iq-note);
    border: 1px solid var(--iq-blue);
    border-radius: .6rem;
    margin-bottom: 1rem;
    padding: .4rem .8rem .2rem;
    width: 90%;
}
div p.txt-note{
    color: green; 
    font-size: 100%;
    font-weight: normal;
    line-height: 1.5;
}
div .justified{
    margin: 1rem auto;
    padding: 0 .8rem;
}
#tabrow.main{
    margin: 5rem auto;
    position: relative;
}
.main p,.main h2{
    color: white;
    font: 180%  Arial, sans-serif;
    padding-bottom: .5rem;
    margin: 0;
    text-align: center;    
}

#tabrow.change,#tabrow.login{
    background-color: transparent;
    width: 95%;
    max-width: 25rem; 
}
.archive h2{
    text-align: left;
}
.archive table th{
    font-weight: bolder;
}
.archive table{
    border-collapse: collapse;
}
.archive table tr{
    border-bottom: 1px solid var(--iq-blue);
}
.archive table tr:last-child{
    border-bottom: none;
}
.reflink{
    color: blue;
    text-decoration: underline;
}
.reorderlink,
.deletelink{
    background-color: rgb(0,128,0);
    border-radius: .5rem;
    color: white;
    font-weight: bold;
    padding: .5rem;
    text-decoration: none;    
}
.reorderlink:hover,
.reorderlink:focus,
.clicked{
    background-color: rgba(0,128,0,0.3);
    color: white;
    text-decoration: underline;    
}
.deletelink{
    background-color: rgb(255,0,0);
    padding: .7rem;
}
.deletelink:hover,
.deletelink:focus{
    background-color: rgba(255,0,0,0.3);
    color: white;
}
.archive .boardarchive{
    background-color: rgba(255,255,255,.3);
    border-radius: .5rem;
    padding: .5rem .5rem 1rem;
    width: 95%;
}
.archive button{
    font-weight: bold;
    margin-right: 20px;
    text-align: left;
}

.nwpwd{
    display: block;
    margin: .5rem 2rem;
    text-align: right;
}
.grey{
    color: grey;
    font-size: 80%;
}
.main p{
    color: var(--iq-blue);
    font-size: 140%;
    width: 100%;
    text-align: left;
}
.main p input{
    margin: 1rem 3rem 0 1.5rem ;
}
.main p input[type='radio']
{ 
   transform: scale(2); 
   accent-color: var(--iq-blue);
}
::placeholder{
  color: var(--iq-blue);
}
::-webkit-input-placeholder{
  color: var(--iq-blue);
}
::-ms-input-placeholder {
  color: var(--iq-blue);
}
.container{
    border: 1px solid black; 
    border-radius: 2px; 
    padding: 5px;
}
.redline{
    border: 1px solid red;
}
mseg{
    display: block;
    font-size: 80%;
    font-weight: bold;  
    padding: .5rem;
}
main{
    clear: both;
    padding-bottom: 7rem;
    width: 100%;
}
button{
    background-color: transparent;
    border: none;
    margin:0;
    padding: 0;
}
th, th select{
   font-weight: normal;
   padding-top: .3rem;
   text-align: left;
   vertical-align: top;
}
th select{
    padding: .2rem;
}
td{
   padding: .5rem;
}
td input{
    background-color: lightgrey;
    border: none;
    border-bottom: 1px solid white;
    color: var(--iq-blue);
    padding: .2rem;
    text-align: center;
    width: 3rem;
}
#maintable{
    font-size: 80%;
    padding-top: 25rem;
    position: relative;
}
@media only screen and (max-width: 1120px) {
    #maintable{
        padding-top: 27rem;
    }   
}
/***************************/
/*
/*          board 
/*
/***************************/
#loadingboard{ /*flex Container */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 10rem;
    margin: 0 5%;
    padding: 1rem 0;
    position: absolute;
    top: 0;
    width: 90%;
}
.feature{   
    background-color: var(--iq-note);
    border: 2px solid green;
    border-radius: .6rem;
    margin: 0 auto 1rem;
    padding: .4rem 1rem;
    color: green; 
    font-size: 100%;
    font-weight: bold;
    line-height: 2;
    width: 100%;
}
#infobox{
    width: 20%;
}
.info-left{
    background-color: var(--table-line);
    border: 2px solid white;
    border-radius: 1rem;
    padding: .5rem 1.5rem 0;
    text-align_: center;
}
.info-left hr{
    border: 1px solid white;
    width: 90%;
}
#loadingboardtable{
    margin: 0 2.5rem;
    width: 40%;
}
#loadingboardtable th,#loadingboardtable td{
    padding: .1rem .5rem;    
}
.firstHead{
    border-top-left-radius: 1rem;
}
.lastHead{
    border-top-right-radius: 1rem;
}
#loadingboardtable tr th{ 
    background-color: var(--iq-blue);
    border-top: 2px solid white;
    color: white;
    font-weight: bold;
}
#loadingboardtable tr td{
    background-color: white;
    border-left: 2px solid white;
    border-right: 2px solid white;
    color: black;
    font-weight: bold;
}
.firstBottom {
    border-bottom-left-radius: 1rem; 
}
.lastBottom {
    border-bottom-right-radius: 1rem; 
}
#sortingbox{
    width: 20%;
}
#selectSorting{
    background-color: var(--table-line);
    border: 2px solid white;
    border-radius: .5rem;
    color: var(--iq-blue);
    font-weight: bold;
    padding: 1rem;
    width: 100%;
}
#sortingbox #selectSorting option{
  width: 100%;
  border: 2px solid var(--iq-blue);
  border-radius: 0.5em;
  color: var(--iq-blue);
  font-weight: bold;
  cursor: pointer;
  line-height: 1.1;
  background-color: var(--table-line);
}
.strong{
    font-weight: bold;
}
@media only screen and (max-width: 1120px) {
    #loadingboard{
        width: 80%;
    }   
}
#devicebutton{
    background-image: linear-gradient(to bottom right, lightskyblue, lightblue);
    background-color: background;
    border: 1px solid lightblue;
    border-radius: 5px;
    color: darkblue;
    position: absolute;
    right: 5px;
    top: 2rem;
}
.notorderable{
    color: red;
    font-weight: bold;
    padding: 0 5%;
}
#shippingadress .notorderable{
    padding: 0;
}
button.tab{
    margin-right: -.3rem;
}
.tab:hover,.tab.active,.tabdormeo:hover,.tabdormeo.active,.tabprivdormeo:hover,.tabprivdormeo.active{
    background: var(--iq-blue);    
    border-top-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
    color: white;
}
.tabdormeo{
    background-color: white;
    border: 1px solid var(--iq-blue);
    border-bottom: 0;
    border-right: none;
    color: var(--iq-blue);
    cursor: pointer;    
    font: 600 90%/1.5  Arial, sans-serif;
    margin: 0 -3px 0 0;
    padding: .5rem 0;
    --widthA: 100%;
    --widthB: calc(var(--widthA) - 7px);
    --widthC: calc(var(--widthB) / 7);
    width: var(--widthC);
}
.tabprivdormeo{
     background-color: white;
    border: 1px solid var(--iq-blue);
    border-bottom: 0;
    border-right: none;
    color: var(--iq-blue);
    cursor: pointer;    
    font: 600 90%/1.5  Arial, sans-serif;
    margin: 0 -3px 0 0;
    padding: .5rem 0;
    --widthA: 100%;
    --widthB: calc(var(--widthA) - 4px);
    --widthC: calc(var(--widthB) / 8);
    width: var(--widthC);
}
.tab {
    background-color: white;
    border: 1px solid var(--iq-blue);
    border-bottom: 0;
    border-right: none;
    color: var(--iq-blue);
    cursor: pointer;    
    font: 600 90%/1.5  Arial, sans-serif;
    margin: 0;
    padding: .5rem 0;
        --widthA: 117%;
        --widthB: calc(var(--widthA) + 4px);
        --widthC: calc(var(--widthB) / 7);
        width: var(--widthC);
}
.break{
    display: none;
}
@media only screen and (max-width: 1120px) {
    .ordertable th:nth-child(2),.ordertable td:nth-child(2){
        display: none;
    }
    .break{
        display: block;
        line-height: 1;
    }
    button.tab{
        line-height: 1.5;
    }
}
/*https://kulturbanause.de/blog/tabellen-im-responsive-webdesign/#horizontal-scrollbare-tabellen
@media only screen and (max-width: 650px) {
    .ordertable {
      width: 100%;
      overflow-y: auto;
      margin: 0 0 1em;
    }

    .ordertable::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
    }

    .ordertable::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 3px solid #fff;
      background-color: rgba(0, 0, 0, .3);
    }
}*/
@media only screen and (max-width: 1400px) {
    .tab{
        font-size: 85%;
    }
}

.ordertable.list,#debitorinfo{
    margin: 1rem 10% 0;
    width: 80%;
}
#debitorinfo{
    clear: left;
    line-height: 1;
}
#debitor{
    float: left;
    margin-left: 1rem;
    padding-right: 5rem;
    padding:0 5rem 5rem 0; 
    position: relative;
    width: 11rem;
}
.askback{
    position: absolute;
    bottom: 0;
}
#shippingadress td{
    vertical-align: top;
}
#shippingadress p{
    font-weight: bold;
}
#shippingadress .label{
    width: 10rem;
}
#shippingadress input,#shippingadress select{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--iq-blue);
    padding: 0;
    text-align: left;
    width: 25rem;
    height: 1rem;
}
#shippingadress input::placeholder{
    color: var(--placeholder);
}
#shippingadress textarea {
    background-color: rgba(255,255,255,.25);
    border: 1px solid var(--iq-blue);
    border-radius: .5rem;
    font-family: inherit; /*Arial, sans-serif;*/
    padding: .5rem;
    text-align: start;
    letter-spacing: normal;
    width: 35rem;
}
td span{
    text-align: right;
}
.info{
    font-family: inherit;
    font-size: 80%;
    color: #afc1d1;
    text-align: right;
    padding-left: 30rem; 
}
.redline{
    border: 1px solid red;
}
#shippingadress input.redbottomline{
    border-bottom: 1px solid red;
}
.redfont{
    color: red;
}
.greenfont{
    color: green;
}
.ordertable{
    border-collapse: collapse;
    border: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 1300px) {
    .ordertable{
        font-size: 90%;
    }
    
}
.ordertablehead{
    background-color: var(--iq-blue);
    border-bottom: 1px solid var(--iq-blue);
    color: white;
    font: 100%/1.3  Arial, sans-serif;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tablehead{
   background-color: white;
   color: var(--iq-blue);
   font: bold 100%/1.3 Arial, sans-serif;
}
.tablesub{
   background-color: var(--table-sub);    
   color: var(--iq-blue);
   font: bold 100%/1.3  Arial, sans-serif;
}
.ordertable th,.ordertablehead th{
    border-right: 1px solid black; 
}
.ordertable td{
    border-right: 1px solid var(--iq-blue);
    position: relative;
}
.ordertable td:last-child,.ordertable th:last-child{
    border-right: none; 
}
.ordertable tr td,.ordertable tr th{
    padding: .3rem;
}
.ordertable tr:nth-child(even){
   background-color:  var(--table-line);/* #8793c1; */
}
.ordertable tr:last-child td{
   background-color: white;
   height: .5px;
}
.ordertable td .info-sign{
    background-color: var(--table-sub);
    border-radius: 100%;
    color: white /* var(--iq-blue) */;
    display: inline;
    font: bolder italic 90%/.5 Arial, sans-serif;
    /* margin: 3px 0px 3px 10px; */
    padding: 8px;
    position: absolute;
    right: 10px;
    top: -7px;
}
.ordertable td .info-sign .restricted-info{
    background-color: var(--iq-blue);
    border: 1px solid var(--table-line);
    border-radius: 6px;
    color: var(--table-line);
    font: bold 100%/1.5 Arial, sans-serif;
    margin-left: -60px;
    padding: 5px 0;
    text-align: center;
    visibility: hidden;
    width: 200px;
    position: absolute;
    bottom: 120%;
    right: 0;
    z-index: 100;
}
.ordertable td .info-sign .restricted-info::after{
    content: "";
    position: absolute;
    top: 100%;
    /* left: 50%; */
    right: 5px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--iq-blue) transparent transparent transparent;
}
.ordertable td:hover .info-sign .restricted-info{
    visibility: visible;
}
#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    text-align: center;
}

#loading .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5em;
}
/*************** 
upload 
**************/
input[type="file"]{
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
}
input[type="file"]:focus + label[for="files"]{
    border: 1px solid #85E5FF;
}
Label[for="files"]{
    background-color: lightgray; /* var(--table-line); */
    border: 2px solid white;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: inline;
    margin: 2rem 0 0 -5rem;
    padding: .5rem 5rem .6rem 1.5rem;
    text-align: center;
}
label[for="files"]:hover{
    background-color: rgba(190,190,190,.8);
    color:darkgray;
}
#file-name {
    margin-left: 1rem;
}

/*************
buttons
**************/
#btn-orderlist,#btn-archive,#btn-articlelisting,#btn-unfinishedorder,.btn-logout{
    background-color: var(--table-line);
    border: 2px solid white;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: block;
    margin-top: 2rem;
    padding: .5rem 0.5rem;
    text-align: center;
}
#btn-orderlist button,#btn-archive button,#btn-articlelisting button,#btn-unfinishedorder button,.btn-logout{
    color: white;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.3;
}
#btn-articlelisting{
    margin-top: -4.8rem;
}
.btn-logout{
    margin-top: 0;
    width: 100%;
}
#btn-orderlist:hover,#btn-archive:hover,#btn-articlelisting:hover,#btn-unfinishedorder:hover,.btn-logout:hover{
    background-color: transparent;
    border-color: var(--table-line);
    color: var(--table-line);
}
#btn-orderlist:hover button, #btn-archive:hover button, #btn-articlelisting:hover button, #btn-unfinishedorder:hover button{
    color: var(--table-line);
}
#btn-orderlist button hr,#btn-archive button hr,#btn-unfinishedorder button hr{
    border: 1px solid white;
}
#btn-orderlist:hover button hr,#btn-archive:hover button hr,#btn-unfinishedorder:hover button hr{
    border: 1px solid var(--table-line);
}
@media only screen and (max-width: 900px) {
    #btn-orderlist,.btn-logout{
        margin-top: 2rem;
    }
}
.right{
    position: absolute;
    right: 2rem;
    bottom: -5rem;
}
.loginbutton_front{
    background-color: var(--iq-blue);
    border-radius: 3rem;
    color: white;
    cursor: pointer;
    font-size: 120%;
    margin-top: 3rem;
    padding: 1rem 0;
    text-align: center;
    width: 100%;
}
.btn-container{
    background-color: white;
    height: 6rem;   
    padding: 2rem 2.5% 0;
    position: fixed;
    bottom: 0;
    --widthA: calc(var(--aside-width) + .3rem);
    left: var(--widthA);
    --widthB: calc(100% - var(--widthA));
    width: var(--widthB);
}
.orderbutton{
    background-color: green;
    border: 1px solid green;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    font-size: 120%;
    font-weight: bold;
    padding: .8rem;
    position: relative;
    width: 100%;
}
.orderbutton:hover{
    background-color: transparent;
    color: green;
}
#btn-change{
    background-color: white;
    border: 1px solid white;
    border-radius: 1rem;
    color: var(--iq-blue);
    cursor:pointer;
    display: inline-block;
    padding: 0 .5rem .5rem .5rem;
    text-align: left;
    width: 83%;
}
#btn-change button{
    font-weight: bold;
    cursor: pointer;
}
@media only screen and (max-width: 900px) {
    #btn-change button{
        font-weight: normal;
        font-size: 100%;
    }
}
#btn-change button b{
    font-size: 200%;
    font-weight: normal;
}
#btn-change:hover{
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
}
.sendorderbutton,.checkoutbutton,.loginbutton,.uploadbutton,.btn-continue{
    background-color: var(--iq-blue);
    border: 1px solid var(--iq-blue);
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    font-size: 120%;
    padding: .5rem;
    position: fixed;
    bottom: 1rem;
    left: 45%;
    width: 20rem;
}
.sendorderbutton:hover,.checkoutbutton:hover,.loginbutton:hover,.uploadbutton:hover,.btn-continue:hover{
    background-color: white;
    color: var(--iq-blue);
}
.sendorderbutton{
    z-index: 1;
}
.sendorderbutton,.uploadbutton{
    border: 2px solid white;
}
.uploadbutton{
    position: static;
    width: 15rem;
    margin: 2rem;
    height: 3rem;
    padding: .2rem;
}
.nosendbutton{
    background-color: red;
    border: 1px solid darkgoldenrod;
    border-radius: 1rem;
    color: white;
    font-size: 120%;
    font-family: arial, sans-serif;
    font-weight: bolder;
    padding: .5rem;
    position: fixed;
    bottom: 1rem;
    left: 45%;
    width: 20rem;
    text-align: center;
}

.out{
    bottom: 70%;
}
.resetbutton{
    background-color: red;
    color: white;
    padding: .5rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
}