@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');

body {font-family: "Arimo", Arial, Helvetica, sans-serif;font-size:0.9vw !important;color:#153c2a;}


button{
  font-family: "Arimo", Arial, Helvetica, sans-serif;
}

table {
  border-collapse: collapse;
}

tr{background-color: #fff}

th:not(:is(tr#totals th)){
  text-align: left;
  padding: 10px;
  background-color: #328c46;
  color: white;
}

tr#totals th{
  text-align: left;
  padding: 10px;
}

td{
  position: relative;
}

#alert{
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s, opacity 0.5s;
}

#alert-content{
  background-color: rgb(221,221,221);
  padding: 20px;
  text-align: center;
  color: white;
}

#alert-content p {
  margin: 0;
}

/* The Modal (background) */
.modal, .modalTop, .modalConfirm{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

 .modalTop, .modalConfirm{
   background-color: rgba(0,0,0,0.8);
 }

/* Modal Content */
.modal-content, .modalTop-content, .modalConfirm-content{
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
    min-height: 40%;
}

.modalTop-content{
  width: 40%;

}

.modalConfirm-content{
  width: 30%;

}



/* The Close Button */
.close{
  color: #aaaaaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
}

.clear{
  color: #aaaaaa;
  font-size: 1.5vw;
  font-weight: bold;
}

.add{
  color: #153c2a;
  font-size: 1.5vw;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #153c2a;
  text-decoration: none;
  cursor: pointer;
}

.hidden {
  display: none;
}

h2{
  text-align: center;
  font-size: 2.5vw;
}

h3{
  text-align: center;
  font-size: 1.5vw;
}

.red {
  background-color: #ff4747 !important;
  background-color: #FFBBA5 !important;
  background-color: #FF855E !important;
  
}

.green {
  background-color: #63ff47 !important;
  background-color: #a0d2f0 !important;
  background-color: #9DF3C7 !important;
}

.yellow {
  background-color: #f3df9d !important;
}



.lightgreen {
  background-color: #63ff47 !important;
  background-color: #a0d2f0 !important;
  background-color: #c4f7dd !important;
}


.blue {
  background-color: #0384fc !important;
  background-color: #a0d2f0 !important;
}

.Inputs {
  width: 50%;
  float: left;
}

.TotalSubmit{
  float: left;
}

td, #loadtabletemp th,#edittabletemp th,#addtabletemp th{
  padding-left: 10px;
  padding-right: 10px;
}



.button, .removeButton, .reloadButton, .storageButton{
  display: inline-block;
   height: 100%;      /* set to 100% */
   color: #153c2a;
   background-color: #cecece;
   margin: 2px;
   border: none;
   float:right;
   font-size:0.8vw;
   font-family: Arimo, Arial, Helvetica, sans-serif;
   
}



body{
  margin: 0;
  padding:0;
}

.text-inline p{
  display: inline;
}

.container{
  margin-left: auto;
  margin-right: auto;
  width:85vw;
}

body .container{
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 3vw 1vw 3vw 1vw;

}

.container.potato{
  box-shadow: inset 0px 0px 50px 50px #fff;
  background: url("../img/seamless.jpg");
}

table{
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgb(209, 209, 209);
  margin-top: 2vw;
  margin-bottom: 2vw;
}

#loadtabletemp, #edittabletemp, #addtabletemp{
  text-align: left;
  width:100%;
  font-size: 0.9vw;
  empty-cells:hide;
}

#loadSubmit{
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  width: 192px;
}

#loadSubmitbutton, #reserveSubmitbutton, #confirmSubmit{
  display: block;
  width: 192px;
  height: 48px;
}

#loads{
  font-size:0.9vw;
}


tr {
  background-color: #fff;
  color: #153c2a;
}
tr:nth-child(even){
  background-color: #e3e3e3;
  color: #153c2a;
}

.text-inline p{
  display: inline;
}

.progressBar {
  width: 100%;
  background-color: lightgrey;
  height: 30px;
  border: 1px solid grey;
}

.progressDone {
  width: 0%;
  background-color: #153c2a;
  height: 30px;
}

.Progress {
  text-align: center;
  margin: auto;
  width: 50%
}

tr.strikeout td:before {
  content: " ";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 0;
  border-bottom: 3px solid #FF855E;
  width: 100%;
}

tr.strikeout td:after {
  content: "\00B7";
  font-size: 1px;
}

.bold {
  font-weight: bold;
}

.nav-wide{
  width:22%;

  float:left;
  display: flex;
  align-items: center;

  border-right: none;
}

.nav-narrow{
  width:12%;

  float:left;
  display: flex;
  align-items: center;

  background-color: #153c2a;

}

.nav-narrow p, .nav-wide p{
  font-weight: normal;
  font-size: 1vw;
  display:inline;
  margin:0;
  margin-left: 1vw;
  color: #ffffff;
}

.nav{
  cursor: default;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
}

.nav, footer{
  background-color:#328c46;
  width:100%;
  min-height: calc(calc(0.8vw + 20px)*2);
  display: flex;

}

table{
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
}

.nav img{
  height: 1.5vw;
  margin-left: 1vw;
  filter: invert(100%);
}

.nav select{
  background-color: transparent;
  color:white;
  border: none;
  font-size: 1vw;
  outline: none;
  border-image-width: 0;
  display: block;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

select option{
  background-color: white;
  color: #153c2a;
  font-size: 0.75vw;
}

#search{

}

#sort, #type, #search, #add_type select, #add_variety select, #sort2, #type2, #sort3, #type3, #breeder{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 0.8vw;
  display: block;
  height:  2vw;
  margin: 0;
  float: left;
  border: none;
  padding: 0 1em 0 1em;
  outline: none;
  border-right: 1px solid rgb(209, 209, 209);
  background-color: transparent;
}

#add_type select, #add_variety select{
  height: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
  color: inherit;
}

#sort option, #type option, #search option{
  background-color: white;
  color: #153c2a;
}


td[colspan="100"]{
  padding: 0;
  height: 2vw;
  line-height:  2vw;
}

td[colspan="100"] .clear, td[colspan="100"] .print {
  display: block;
  padding: 0 0.5em 0 0.5em;
  height: 2vw;
  line-height:  2vw;
  border-right: 1px solid rgb(209, 209, 209);
  float: left;
  box-sizing:border-box;
}

td[colspan="100"] .add {
  display: block;
  padding: 0 0.5em 0 0.5em;
  height: 2vw;
  line-height:  2vw;
  border-right: 1px solid rgb(209, 209, 209);
  float: left;
  box-sizing:border-box;
}

#list, #list_producer, #list_customer, #list_variation, #list_planned{
  width: 100%;
  font-size:0.9vw;
  word-wrap:break-word;
  width:100%;
}

[contentEditable=true]{
  outline: none;
}

.name[contentEditable=true]:empty:not(:focus):before{
  content:"Indtast fremavler!";
  color: #888;
}

.amount[contentEditable=true]:empty:not(:focus):before{
  content:"Indtast mængde!";
  color: #888;
}

#QTY[contentEditable=true]:empty:not(:focus):before{
  content:"Indtast mængde!";
  color: #888;
}

.column[contentEditable=true]:empty:not(:focus):before{
  content:"Indtast kolonnenr.";
  color: #888;
}

.name {
  color: #888;
}

.login{
  padding: 1.5vw;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: 30vw;
 
}

.loginbutton{
    display: inline-block;
     height: 100%;      /* set to 100% */
     color: #153c2a;
     background-color: #cecece;
     border: none;
     font-size:0.9vw;
     padding: 0.25vw;
     padding-left: 1vw;
     padding-right: 1vw;
     font-family: Arimo, Arial, Helvetica, sans-serif;
}

.login select, .login input[type=password], .login input[type=text]{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 0.8vw;
  display: block;
  height:  2vw;
  margin: 0;
  border: none;
  padding: 0 1em 0 1em;
  outline: none;
  border: 1px solid rgb(209, 209, 209);
  background-color: transparent;
}

.login select option{
    background-color: white;
    color: #153c2a;
    font-size: 0.75vw;
}

.login button[type=button]{
  display: inline-block;
     height: 100%;      /* set to 100% */
     color: white;
     background-color: #328c46;
     border: none;
     font-size:0.9vw;
     padding: 0.25vw;
     padding-left: 1vw;
     padding-right: 1vw;
     font-family: Arimo, Arial, Helvetica, sans-serif;
     margin-top: 0.20vw;
}

#selectedName{
  color: white;
     background-color: #153c2a;
} 

.pin{
  width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:20px;
    padding:20px;
}


.pin button[type=button]{
  aspect-ratio: 1/1;
  display: inline-block;
     height: 3.5vw;
     color: white;
     background-color: #328c46;
     border: none;
     font-size:0.9vw;
     padding: 0.25vw;
     font-family: Arimo, Arial, Helvetica, sans-serif;
     border-radius: 1.75vw;
}

.saveButton{
  display: block;
  background-color: #153c2a;
  padding: 0.8vw;
  width: 3vw;
  border: none;
  background-image: url("../img/save.png");
  background-position: center;
  background-size: 1.15vw;
  background-repeat: no-repeat;
}

.editButton{
  background-color: #153c2a;
  /* background-color: #ffffff00; */
  padding: 0.8vw;
  /* width: 3vw; */
  border: none;
  background-image: url("../img/edit.png");
  background-position: center;
  background-size: 1.15vw;
  background-repeat: no-repeat;
  /* filter: invert(1); */
}

.deleteButton{
  background-color: rgb(196, 39, 39);
  padding: 0.8vw;
  width: 3vw;
  border: none;
  background-image: url("../img/delete.png");
  background-position: center;
  background-size: 1.15vw;
  background-repeat: no-repeat;
}

.renewButton{
  background-color: #153c2a;
  padding: 0.8vw;
  width: 3vw;
  border: none;
  background-image: url("../img/reload.png");
  background-position: center;
  background-size: 1.15vw;
  background-repeat: no-repeat;
}

#editSubmitbutton, #addSubmitbutton{
  background-color: #153c2a;
  font-weight: bold;
  padding: 0.5vw;
  width: 10vw;
  color: white;
  font-size: 0.8vw;
  margin-left: auto;
  margin-right: auto;
  border: none;
  display: block;
  filter: brightness(0.5);
}


#loadSubmitbutton, #reserveSubmitbutton, #confirmSubmit{
  margin-top: 16px;
  padding: 0.5vw;
  width: 10vw;
  font-size: 0.8vw;
  color: white;
  background-color: #153c2a;
  font-weight: bold;
   border: none;

}

#addModal, #editModal{
  display: none;
}

.buttonCell{
  width: 1px;
}

.selectCustomer, .selectProducer{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 0.8vw;
  display: block;
  height:  2vw;
  margin: 0;
  float: left;
  border: none;
  padding: 0;
  outline: none;
  border: none !important;
  background-color: transparent;
  width: 100%;
}

#variation h5, #variation h4, #variation table{
  margin: 0.5vw;
  text-align: center;
}

input[type="file"]::file-selector-button,  input[type="file"]::-webkit-file-upload-button {
  display: none;
}
input[type="file"]{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  padding: 0.5vw;
  width: 10vw;
  font-size: 0.7vw;
  color: white;
  background-color: #153c2a;
   border: none;
   text-align: center;
  }

.lowTitle{
  margin: 0;
  margin-bottom: 0.5vw

}

#seperatorAvler, #seperatorFremavler{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 0.7vw;
  height:  2vw;
  margin: 0;
  border: none;
  padding: 0;
  outline: none;
  border: none !important;
  background-color: transparent;
}

label[for="seperatorFremavler"], label[for="seperatorAvler"]{
  font-size: 0.7vw;
}

#list_producer, #list_customer, #list_variation{
  margin: 0vw 0 3vw 0;
  text-align: left;
}

#compare, #submit, #import, #submitAddTruck{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  padding: 0.5vw;
  width: 10vw;
  font-size: 0.7vw;
  color: white;
  background-color: #153c2a;
   border: none;
   text-align: center;
  }

#freeze{ 
  pointer-events: none !important; 
  overflow: hidden;
}

.freeze{ 
  pointer-events: none !important; 
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ffffffe0;  
  margin: 0;
  overflow: hidden;
  display: none;
}

img#freeze, img.freeze{
  height: 3vw;
  width: 3vw;
  background: none;
  top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
}

p#freeze, p.freeze{
  height: 15vw;
  background: none;
  text-align: center;
  top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    font-weight: bold;
    color: #696969;
}

#truckNewRegistration{
  width: 15vw;
  height: 3.57142857vw;
  font-size: 2.14285714vw;
  font-size: 2.5vw;
  background-color: #ebc80c;
  border: 3px solid black;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #ebc80c;
  text-align: center;
  font-stretch: wider;
  font-weight: bolder;
  display:block;
  margin:2vw auto 2vw auto;
}

div#comment{
  display: block;
  margin: 0 auto 0 auto;
  background-color: rgba(255, 196, 0, 0.534);
  width: 70%;
  line-height: 2vw;
  font-weight: bold;
  text-align: center;
  padding: 0 1vw 0 1vw;
  /* padding: 1vw 1vw; */
}

#changesTable{
  display: block;
  margin: 0 auto 0 auto;
  background-color: rgba(255, 196, 0, 0.534);
  width: 70%;
  line-height: 2vw;
  padding: 0 1vw 0 1vw;
  margin-top: 2vw;
  text-align:left"
}

option:disabled {
  display: none;
}

select:invalid { color: gray; }

#editTo{
  min-width: 15vw;
  display: inline-grid;
  text-align: left;
  border-bottom: 2px solid #153c2a;

}

#editFrom{
  min-width: 15vw;
  display: inline-grid;
  text-align: right;
  border-bottom: 2px solid #153c2a;
}

#editArrow{
  min-width: 5vw;
  font-size: 1.5vw;
  line-height: 1vw;
  display: inline-grid;
justify-content: center;}

#editContainer{
  grid-template-rows: repeat(3, 10vw);
  display: block;
  margin: 0 auto 0 auto;
  width: fit-content;

}

#editInfo{
  background-color: #328c46;
  color: white;
  width: 100%;
  height: 2vw;
  margin-bottom: 1vw;
  justify-content: center;
}
#editInfo h4{
  line-height: 2vw;
}

#editTo[contentEditable=true]:empty:before{
  content:"Indtast fremavler!";
  color: #888;
}

.block{
  margin: 2vw auto 2vw auto;
  display: block;
  width: fit-content;
}

#editAmount, #reserveAmount{
  border-bottom: 2px solid #153c2a;
  display: inline-block;
  min-width: 5vw;
text-align: right
;}

#editAmount[contentEditable=true]:empty:before, #reserveAmount[contentEditable=true]:empty:before{
  content:"0000";
  color: #888;
}

#addtabletemp label{
  color: #888;
  display: none;
}

td input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: #153c2a;
  width: 1.25em;
  height: 1.25em;
  /* border: 0.15em solid #153c2a; */
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
  padding: 1px;
}

td input[type="checkbox"]::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  clip-path: polygon( 50% 4.167%,50% 4.167%,46.622% 4.44%,43.417% 5.229%,40.429% 6.493%,37.699% 8.188%,35.271% 10.271%,33.188% 12.699%,31.493% 15.429%,30.229% 18.417%,29.44% 21.622%,29.167% 25%,37.5% 25%,37.5% 25%,37.664% 22.973%,38.138% 21.05%,38.896% 19.257%,39.913% 17.619%,41.163% 16.163%,42.619% 14.913%,44.257% 13.896%,46.05% 13.138%,47.973% 12.664%,50% 12.5%,50% 12.5%,52.027% 12.664%,53.95% 13.138%,55.743% 13.896%,57.381% 14.913%,58.838% 16.163%,60.087% 17.619%,61.104% 19.257%,61.862% 21.05%,62.336% 22.973%,62.5% 25%,62.5% 33.333%,25% 33.333%,25% 33.333%,23.649% 33.442%,22.367% 33.758%,21.171% 34.264%,20.079% 34.942%,19.108% 35.775%,18.275% 36.746%,17.597% 37.838%,17.092% 39.034%,16.776% 40.316%,16.667% 41.667%,16.667% 83.333%,16.667% 83.333%,16.775% 84.68%,17.089% 85.96%,17.593% 87.155%,18.268% 88.247%,19.099% 89.219%,20.069% 90.053%,21.16% 90.733%,22.357% 91.24%,23.643% 91.557%,25% 91.667%,49.976% 91.667%,49.976% 70.833%,49.976% 70.833%,48.627% 70.721%,47.348% 70.403%,46.156% 69.896%,45.067% 69.217%,44.099% 68.384%,43.269% 67.413%,42.593% 66.323%,42.09% 65.129%,41.775% 63.849%,41.667% 62.5%,41.667% 62.5%,41.776% 61.149%,42.092% 59.867%,42.597% 58.671%,43.275% 57.579%,44.108% 56.608%,45.079% 55.775%,46.171% 55.097%,47.367% 54.592%,48.649% 54.276%,50% 54.167%,50% 54.167%,51.351% 54.276%,52.633% 54.592%,53.829% 55.097%,54.921% 55.775%,55.892% 56.608%,56.725% 57.579%,57.403% 58.671%,57.908% 59.867%,58.224% 61.149%,58.333% 62.5%,58.333% 62.5%,58.225% 63.849%,57.91% 65.129%,57.407% 66.323%,56.731% 67.413%,55.901% 68.384%,54.933% 69.217%,53.845% 69.896%,52.652% 70.403%,51.373% 70.721%,50.025% 70.833%,50.025% 91.667%,75% 91.667%,75% 91.667%,76.351% 91.558%,77.633% 91.242%,78.829% 90.736%,79.921% 90.058%,80.892% 89.225%,81.725% 88.254%,82.403% 87.162%,82.908% 85.966%,83.224% 84.684%,83.333% 83.333%,83.333% 41.667%,83.333% 41.667%,83.224% 40.316%,82.908% 39.034%,82.403% 37.838%,81.725% 36.746%,80.892% 35.775%,79.921% 34.942%,78.829% 34.264%,77.633% 33.758%,76.351% 33.442%,75% 33.333%,70.833% 33.333%,70.833% 25%,70.833% 25%,70.561% 21.622%,69.771% 18.417%,68.507% 15.429%,66.812% 12.699%,64.729% 10.271%,62.301% 8.188%,59.572% 6.493%,56.583% 5.229%,53.378% 4.44%,50% 4.167% );
  transform-origin: bottom left;
  transition: 250ms ease;
  box-shadow: inset 1em 1em #153c2a;
  background-color: #153c2a;  
}

td input[type="checkbox"]:checked::before {
  background-color: #328c46;
  box-shadow: inset 1em 1em #328c46;
  clip-path: polygon( 50% 4.167%,50% 4.167%,46.622% 4.44%,43.417% 5.229%,40.429% 6.493%,37.699% 8.188%,35.271% 10.271%,33.188% 12.699%,31.493% 15.429%,30.229% 18.417%,29.44% 21.622%,29.167% 25%,29.167% 33.333%,25% 33.333%,25% 33.333%,23.653% 33.442%,22.373% 33.756%,21.179% 34.259%,20.087% 34.935%,19.115% 35.766%,18.28% 36.735%,17.6% 37.827%,17.093% 39.024%,16.776% 40.309%,16.667% 41.667%,16.667% 83.333%,16.667% 83.333%,16.776% 84.684%,17.092% 85.966%,17.597% 87.162%,18.275% 88.254%,19.108% 89.225%,20.079% 90.058%,21.171% 90.736%,22.367% 91.242%,23.649% 91.558%,25% 91.667%,49.976% 91.667%,49.976% 70.833%,49.976% 70.833%,48.627% 70.721%,47.348% 70.403%,46.156% 69.896%,45.067% 69.217%,44.099% 68.384%,43.269% 67.413%,42.593% 66.323%,42.09% 65.129%,41.775% 63.849%,41.667% 62.5%,41.667% 62.5%,41.776% 61.149%,42.092% 59.867%,42.597% 58.671%,43.275% 57.579%,44.108% 56.608%,45.079% 55.775%,46.171% 55.097%,47.367% 54.592%,48.649% 54.276%,50% 54.167%,50% 54.167%,51.347% 54.275%,52.627% 54.589%,53.821% 55.093%,54.913% 55.768%,55.885% 56.599%,56.72% 57.569%,57.4% 58.66%,57.907% 59.857%,58.224% 61.143%,58.333% 62.5%,58.333% 62.5%,58.225% 63.849%,57.91% 65.129%,57.407% 66.323%,56.731% 67.413%,55.901% 68.384%,54.933% 69.217%,53.845% 69.896%,52.652% 70.403%,51.373% 70.721%,50.025% 70.833%,50.025% 91.667%,75% 91.667%,75% 91.667%,76.351% 91.558%,77.633% 91.242%,78.829% 90.736%,79.921% 90.058%,80.892% 89.225%,81.725% 88.254%,82.403% 87.162%,82.908% 85.966%,83.224% 84.684%,83.333% 83.333%,83.333% 41.667%,83.333% 41.667%,83.224% 40.316%,82.908% 39.034%,82.403% 37.838%,81.725% 36.746%,80.892% 35.775%,79.921% 34.942%,78.829% 34.264%,77.633% 33.758%,76.351% 33.442%,75% 33.333%,70.833% 33.333%,70.833% 25%,70.833% 25%,70.561% 21.622%,69.771% 18.417%,68.507% 15.429%,66.812% 12.699%,64.729% 10.271%,62.301% 8.188%,59.572% 6.493%,56.583% 5.229%,53.378% 4.44%,50% 4.167%,50% 12.5%,50% 12.5%,52.027% 12.664%,53.95% 13.138%,55.743% 13.896%,57.381% 14.913%,58.838% 16.163%,60.087% 17.619%,61.104% 19.257%,61.862% 21.05%,62.336% 22.973%,62.5% 25%,62.5% 33.333%,37.5% 33.333%,37.5% 25%,37.5% 25%,37.664% 22.973%,38.138% 21.05%,38.896% 19.257%,39.913% 17.619%,41.163% 16.163%,42.619% 14.913%,44.257% 13.896%,46.05% 13.138%,47.973% 12.664%,50% 12.5% );
}

td input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.hover:hover, #flt:hover{
  text-decoration: underline;
}

.hover::after {
  background-color: #e3e3e3;
  display: none;
  position: absolute;
  width: 5.5vw;
  height: 50%;
  z-index: 999;
  content: 'Klik for overblik!';
  top: 10%;
  right: 0;
  transform: translateX(calc(-100% - 4vw));
  margin-top: auto;
  margin-bottom: auto;
  padding: 5px 5px;
  /* margin: 15px; */
  text-align: center;
  font-size: 0.75vw;
}

.hover:hover::after {
  display: block;
  
}

.hover::before {
  background-color: #e3e3e3;
  content: ' ';
  display: none;
  position: absolute;
  width: 1rem;
  height: 1rem;
  z-index: 999;
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 10px), -50%) rotate(45deg);
}

.hover:hover::before {
  display: block;
}

#editModal #comment{
  margin: 0.5vw auto 2vw auto;
  border: 1px solid rgb(209, 209, 209);
  background-color: rgb(240, 240, 240);
  text-align: left;
}

#editModal h5{
  margin: 0 8vw;
display: block;
font-size: 0.9vw;
}

#saveCommentButton{
  display: inline-block;
  margin: 0;
  height: 1vw;
  vertical-align: middle;
  transition: filter 0.5s ease;cursor: pointer;
}

.buttonDark{
  filter: brightness(0) saturate(100%) invert(19%) sepia(47%) saturate(478%) hue-rotate(100deg) brightness(94%) contrast(99%);
}

.buttonLight{
  filter: brightness(0) saturate(100%) invert(44%) sepia(20%) saturate(1326%) hue-rotate(81deg) brightness(98%) contrast(90%);
}

.weekButton {
  background-color: #153c2a;
  font-weight: bold;
  padding: 0.5vw;
  width: 5vw;
  color: white;
  font-size: 0.8vw;
  border: none;
  cursor: pointer;
}

#exportButton {
  background-color: #153c2a;
  font-weight: bold;
  padding: 0.5vw;
  width: 10vw;
  color: white;
  font-size: 0.8vw;
  border: none;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.weekButton:hover, .saveButton:hover, .editButton:hover, .reloadButton:hover, #compare:hover, #submit:hover, #import:hover, #submitAddTruck:hover, #exportButton:hover{
  background-color: #1f523d; /* Slightly lighter green for hover effect */
}

#weekDisplay {
  margin: 0 1vw;
  font-size: 1.25vw;
  font-weight: bold;
}

#producerArea select,#producerArea option{
  font-size: 0.9vw;
  border: none;
  background: none;
  width: 100%;
  color: inherit;
}

td input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: #153c2a;
  width: 1.25em;
  height: 1.25em;
  /* border: 0.15em solid #153c2a; */
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
  padding: 1px;
}

td input[type="radio"]::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  clip-path: polygon(92.9280399% 29.65260552%, 100.0000002% 36.72456583%, 47.39454104% 89.330025%, 19.10669979% 61.04218375%, 26.1786601% 53.97022344%, 47.39454104% 75.18610438%);
  box-shadow: inset 1em 1em #153c2a;
  background-color: #153c2a;  
}

td input[type="radio"]:checked::before {
  background-color: #328c46;
  box-shadow: inset 1em 1em #328c46;
  clip-path: polygon(92.9280399% 29.65260552%, 100.0000002% 36.72456583%, 47.39454104% 89.330025%, 19.10669979% 61.04218375%, 26.1786601% 53.97022344%, 47.39454104% 75.18610438%);
}

tr:has(input[type="radio"]:checked) {
  background-color: #9DF3C7 !important;
}

td input[type="radio"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

#allSubmitbutton, #chosenSubmitbutton{
  background-color: #153c2a;
  font-weight: bold;
  padding: 0.5vw;
  width: 10vw;
  color: white;
  font-size: 0.8vw;
  margin-left: auto;
  margin-right: auto;
  border: none;
  display: inline-block;
  filter: brightness(0.5);
}

#addNotification{
  margin: 0;
}

#addNotification input, #addNotification select{
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 0.8vw;
  display: block;
  height: 2vw;
  margin: 0;
  float: left;
  border: none;
  padding: 0 1em 0 1em;
  outline: none;
  border-right: 1px solid rgb(209, 209, 209);
  background-color: transparent;
}

#addNotification select:invalid {
  color: gray;
}

.print{
  color: #aaaaaa;
  font-size: 1.25vw;
  font-family: Arial;
  width: 2.5vw;
  float: right !important;
  border-left: 1px solid rgb(209, 209, 209);
  border-right: none !important;
  background-image: url("../img/print.png");
  background-position: center;
  background-size: 1.25vw;
  background-repeat: no-repeat;
}