title {
    display:none;
}

.headersubtitle {
    display:flex;
    background-color: transparent;
    flex-direction:column;
}

.headersubtitletext {
    color: #FFF;
    font-weight:bold;
}

.headersubpicture {
    display:flex;
    justify-content:space-between;
}

html {    
    display:block;
    background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

min-width: 250px;

font-family: 'Open Sans', sans-serif;

}

main {
    width: 96%;
    margin: auto;
}

.login {
    background-color: #FFF;
    margin: 1rem 0 1rem;
    padding: 5px;
    border-radius: 5px;
}

.collapsible {
    cursor: pointer;
}

/* Add a black background color to the top navigation */
.topnav {
   font-family: 'Open Sans', sans-serif;
   overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #E32525;
  text-align: center;
  padding: .5rem;
  margin: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #B3B4B3;
  color: #000;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #E32525;
  color: #FFF;
}


.lsprintgrid {
    display:grid;
    grid-template-rows: 70px 350px 350px;
    grid-template-columns: 400px 100px 100px 400px;
    justify-items: stretch;
    margin: auto;
   
}


.half {
    min-width:356px;
}

.halfplus {
    min-width:600px;
}

.titlediv {
    margin-bottom: 1rem;
    border-bottom: 2px solid #E4432D;
   /* background-color: #B3B4B3; */
    width:100%;
}

.leftalign {
    text-align:left;
}

.rightalign {
    text-align: right;
}


h1,h2,h3 {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin: auto;
}

h1 {
    font-weight: bold;
    color:#E4432D;
}

h2 {
    font-weight: bold;
    font-size: 1rem;
}

h3 {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
   /* text-align: center;  Niet center alignen voor lsview */
}


.alert {
    color: #E4432D;
}

.redtext {
    color: #E4432D;
}

.ambertext {
    color: #E37E39;
}

select {
    background-color: #FEFEFE;
    /*
    width: 20%;
    font-family: 'Roboto', sans-serif;
    font-size: .7rem;
    */
}


input {
    background-color: #FEFEFE;
    width: 95%;
    margin: auto;
    border:none;
    border-radius: 0;
    border-bottom: 2px solid #000;
    font-size: 1rem;
}

/*input[type="radio"] {
    width: 0;
    appearance: none;
    border: none;
    }
    */


input[type="checkbox"] {
    width: 0;
    appearance: none;
    border:none;
    }

p {
    width:95%;
    margin:auto;
    padding:.3rem;
}

.updategrid {
    display: grid;
  grid-template-columns: auto 10rem 10rem auto;
}

.inline {
    display:flex;
    text-align:center;
    justify-content: space-around;
}

/*waarschijnlijk overbodig */
.lidinfo {
    position:fixed;
    width:90%;
    left:auto;
    top:auto;
}


.checkbox {
    cursor: pointer;
    margin:auto;
}


.checkbox > input {
    display: block;
    text-align: center;
    color:#FFF;
    height: 1rem;
    width: 1rem;
    font-size: .8rem;
    /*margin: auto;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #000;
    border-radius: .3rem;
    transition-duration: 0.3s;
    background-color: #FFF;
    cursor: pointer;
  }

.checkbox > input:checked {
    border: 1px solid green;
    background-color: green;
}


.checkbox > input:checked::before {
    content: '\2713';
}



/*
.info {
    width:1rem;
    cursor: pointer;
    color:blue;
    text-align:center;
}
*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid black;
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0 1000px #FFE9E6 inset;
  transition: background-color 5000s ease-in-out 0s;
}


.inlogbutton {
    display:block;
    background-color: #E4432D;
    color:#FFF;
    margin:auto;
    padding: .3rem;
    font-size: 1rem;
    width: 50%;
    cursor: pointer;
    border-radius: 5px;
}

.ubtn {
    display:block;
    background-color: #E4432D;
    color:#FFFFFF;
    margin:auto;
    padding: .3rem;
    font-size: 1rem;
    width: 70%;
    cursor: pointer;
}

.backbutton {
    display:block;
    background-color: #FFFFFF;
    color: #E4432D;
    margin:auto;
    padding: .3rem;
    font-size: 1rem;
    width: 50%;
    cursor: pointer;
}

.ncobutton {
    display:block;
    background-color: #E4432D;
    color:#FFF;
    padding: .3rem;
    font-size: 1rem;
    width: 70%;
    margin:auto;
    cursor: pointer;
}

.lsbutton {
    display:block;
    background-color: #1769E3;
    color:#FFF;
    padding: .3rem;
    font-size: 1rem;
    width:70%;
    margin:auto;
    cursor: pointer;
}


.resbutton {
    border:none;
    background:none;
   
}

.trtop {
    border-top: solid 5px #000;
}

.fullwidth {
    width:100%;
}

form {
     font-size: 1rem;
}

a { 
    color: #E4432D;
}

img {
    width: 80%;
    margin: auto;
}

fieldset {
    width: 70%;
    margin: auto;
    padding:0;
    border-radius: 5px;
}


table {
 width: 96%;
 margin: auto;
}

/* TABEL OVERZICHT RESERVATIES MANIFEST */

.restable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
}

.restable > td {
    text-align:center;
}

.restable > thead {
    border: 4px solid;
    background-color: #B3B4B3;
}

.restable > tbody > tr {
    background-color: #FFF;
}

.restable > tbody > tr:nth-child(8n) {
    background-color: beige;
}

.restable > tbody > tr:nth-child(8n-1) {
    background-color: beige;
}

.restable > tbody > tr:nth-child(8n-2) {
    background-color: beige;
}

/* EINDE TABEL OVERZICHT RESRVATIES MANIFEST */

/* SPRONGENVIEWTABLE*/
.sprongenviewtable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.sprongenviewtable > thead {
    border: 4px solid;  
}
.sprongenviewtablefirstcolumn {
    width: 70px;
}
.sprongenviewtablesecondcolumn {
    width: 60px;
    text-align: center;
}

.sprongenviewsecondtablesecondcolumn {
    width: 20px;
    text-align: center;
}

.sprongenviewtable > tbody > tr:nth-last-child(1) {
   text-decoration: underline;
   border: 4px solid; 
   font-weight: bold;
}


/* EINDE SPRONGENVIEWTABLE */

/* SPRONGsoortenTABLE*/
.sprongsoortentable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}
.sprongensoortencolumnone {
     width: 120px;
}
.sprongensoortencolumnthree {
     width: 60px;
     text-align: right;
}
/* EINDE SPRONGsoortenTABLE*/

/*GEGEVENSSELFVIEWTABLE */
.gegevensselfviewtable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.gegevensselfviewtablefirstcolumn {
    width: 100px;
}

.gegevensselfviewtablefirstcolumnparttwo {
     width: 110px;
}

/* EINDE GEGEVENSSELFVIEWTABLE */

/* OVERVIEWTABLE */
.overviewtable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.overviewtable {
    border: 4px solid;
}

.symbol {
    text-align:center;
    margin:auto;
    cursor: pointer;
    width: 20px;
}

.levelcol {
    max-width: 150px; /*werkt niet*/
}

.overviewselect {
    width:100%;
    border:none;
    font-size:1rem;
}

/*  EINDE OVERVIEWTABLE */

/* TRANSACTIETABLE SELFVIEW*/
.transactietable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.transactietable > thead {
    border: 4px solid;
    border-bottom: 6px solid;
    background-color: #B3B4B3;
}

.transactietablethirdcolumn {
    width: 60px;
    text-align: center;
}

.transactietablefourthcolumn {
    width: 60px;
    text-align: center;
}

.transactietablefourthcolumn > h3{
    text-align: center;
}

.transactietable > tbody > tr:nth-child(4n) {
    border-bottom: 6px solid;
    background-color: #F9F2FE;
}

.transactietable > tbody > tr:nth-child(4n-1) {
    border-top: 6px solid;
    background-color: #F9F2FE;
}

/*EINDE TRANSACTIETABLE SELFVIEW*/

/* VERZEKERINGTABLE */
.verzekeringtable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.verzekeringtable > thead {
    border: 4px solid;
    border-bottom: 6px solid;
    background-color: #B3B4B3;
}

.verzekeringtablefirstcolumn {
    width: 50px;
}

.verzekeringtable > tbody > tr:nth-child(8n) {
    border-bottom: 6px solid;
    background-color: #F9F2FE;
}

.verzekeringtable > tbody > tr:nth-child(8n-1) {
    background-color: #F9F2FE;
}

.verzekeringtable > tbody > tr:nth-child(8n-2) {
    background-color: #F9F2FE;
}

.verzekeringtable > tbody > tr:nth-child(8n-3) {
    border-top: 6px solid;
    background-color: #F9F2FE;
}

/*EINDE VERZEKERINGTABLE */

/*verzekeringoverviewtable*/
.verzekeringoverviewtable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.verzekeringoverviewtable > thead {
    border: 4px solid;
    border-bottom: 6px solid;
    background-color: #B3B4B3;
}

.verzekeringoverviewtablefirstcolumn {
    width: 50px;
}

.verzekeringoverviewtable > tbody > tr:nth-child(10n) {
    border-bottom: 6px solid;
    background-color: #F9F2FE;
}

.verzekeringoverviewtable > tbody > tr:nth-child(10n-1) {
    background-color: #F9F2FE;
}

.verzekeringoverviewtable > tbody > tr:nth-child(10n-2) {
    background-color: #F9F2FE;
}

.verzekeringoverviewtable > tbody > tr:nth-child(10n-3) {
    background-color: #F9F2FE;
}

.verzekeringoverviewtable > tbody > tr:nth-child(10n-4) {
    border-top: 6px solid;
    background-color: #F9F2FE;
}

/*EINDE verzekeringoverviewtable*/

/*MATERIAALVIEWTABLE */
.materiaalviewtable {
    border-collapse: collapse;
    width:100%;
    table-layout:fixed;
    border: 3px solid;
}

.materiaaltitle {
    margin-top: 1rem;
    border: 3px solid;
    border-bottom: 1px solid;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    display: flex;
}

.symbolright {
    float: right;
    margin: auto auto auto 5px;
    width: 20px;
}

.symbolleft {
    float: left;
    margin: auto 0 auto 1rem;
    width: 20px;
    color: #E4432D;
}

/*EINDE MATERIAALVIEWTABLE */

/*DROPVIEWTABLE */
.droptable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.droptable > thead {
    border: 4px solid;
}

.droptable > tbody > tr:nth-last-child(1) {
   text-decoration: underline;
   font-weight: bold;
   border: 4px solid;
}


/*EINDE DROPVIEWSELF*/

/* CORRECTIETABLE*/
.correctietable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}
.correctiecolumnone {
     width: 120px;
}
.correctiecolumntwo {
     width: 60px;
     text-align: right;
}
/* EINDE CORRECTIETABLE*/

/* RESVIEWSELF*/
#resviewselfwide {
    display:none;
}

#resviewselfsmall {
    display:block;
}

/* EINDE RESVIEWSELF*/

.lstable {
    border-collapse: collapse;
    margin-top:.5rem;
    width:100%;
    table-layout:fixed;
}

.lstable > thead {
    border: 4px solid;
}

.lssign {
    margin:auto;
    border: 4px solid;
}

.lstitle {
    display:flex;
    flex-wrap:wrap;
    border-top: 3px solid #E4432D;
    border-bottom: 3px solid #E4432D;
}

.fuelbox {
    border:4px solid;
    min-width:10rem;
    
}

th, td {
    border: 2px solid;
    border-collapse:collapse;
    padding: 0.5rem;
}

tr {
    border-collapse:collapse;
}

th {
    font-weight: bold;
}

td {
    padding:.5rem;
    word-wrap: break-word;
}

.loads {
    min-width: 1000px;
}
.openloads {
    display:flex;
    flex-direction: column;
    margin-bottom: 0;
}

.loadday {
    margin-left: 1rem;
    color: #FFF;
}

.loadsarray {
    display:flex;
    flex-wrap: wrap;
}

.loadsarrayvandaag {
    display:flex;
    flex-wrap: wrap;
}

.loadsarray > form {
    margin-left:1rem;
}

.loadsarrayvandaag > form {
    margin-left:1rem;
}

.loadsbutton {
    background-color: #E4432D;
    border-radius: 5px;
    border: none;
    padding: .5rem;
    font-size: 1rem;
    margin:.5rem;
    min-width:5rem;
    color: #fff;
    cursor:pointer;
}

.loadgrid {
    display: grid;
    grid-template-rows: 3.5rem 3rem 3rem 3rem 3rem 3rem 3rem;
    grid-template-columns: 6rem 22rem 20rem 3rem 3rem 3rem;
    grid-row-gap: .3rem;
    justify-content:center;
}


.loadgrid > p {
    font-size: 1.5rem;
}

.loadgrid > p > select {
    width:100%;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    border:2px solid #B3B4B3;
    border-radius:5px;
}

.subload {
    font-size: 1.5rem;
    margin: 1rem auto;
    padding: .5rem;
    background-color: #FFF;
}

.subload > h2 {
    font-size: 1.5rem;
    margin: 1rem auto;
    padding: .5rem;
    background-color: #FFF;
}

.subload > h2 > input {
    font-size: 1.5rem;
    width: 2em;
}

.closedloadgrid {
    display: grid;
    grid-template-columns:6rem 14rem 14rem 1rem;
    justify-content:center;
    border-bottom: 3px solid #E4432D;
}


.closedloadgrid > p {
    font-size: 1rem;
}

#lsbutton {
    width:95%;
    background-color: #1769E3;
    border-radius:.3rem;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: #FFF;
}

#lsclosedbutton {
    width:95%;
    background-color: #1769E3;
    border-radius:.3rem;
    margin: auto;
    color: #FFF;
}

#afrekenbutton {
    width:95%;
    background-color: green;
    border-radius:.3rem;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: #FFF;
}


.foot{
    background-color: #B3B4B3;
    width: 100%;
    margin: .5rem auto;
    padding:0;
    border-radius: 5px;
    
}

.foot > p {
    bottom:0;
    text-align:center; 
}

@media only screen and (min-width: 768px) {

main {
    width:80%;
}


.inlogbutton {
    font-size: 1.3rem;
    border-radius: 5px;
}

.ubtn{
    font-size: 1.3rem;
    border-radius: 5px;
}

.backbutton {
    font-size: 1.3rem;
    border-radius: 5px;
}

.ncobutton{
    font-size: 1.3rem;
    border-radius: 5px;
}

.lsbutton {
    font-size: 1.2rem;
    border-radius: 5px;
}

.overviewselect {
    font-size:1rem;
    border-radius: 5px;
}

img {
    min-width:600px;
    margin: 0;
}    

h2 { 
    font-size: 1rem;
}


.subload > h2 > input {
    font-size: 1.5rem;
}

select {
    font-size: 1rem;
}

/*.checkbox > input {
    height: 1rem;
    width: 1rem;
    font-size: .8rem;
}
*/

.loadgrid > p {
    font-size: 1.5rem;
}

.loadgrid > p > select {
    font-size: 1.5rem;
}

.closedloadgrid > p {
     font-size: 1rem;
}
 td {
 font-size:1rem;
}

}

@media only screen and (min-width: 1100px) {

main {
    width:70%;
}

img {
    width:600px;
}  

.subload > input {
    font-size: 1.5rem;
}

/* RESVIEWSELF*/
#resviewselfwide {
    display: block;
}

#resviewselfsmall {
    display:none;
}

/* EINDE RESVIEWSELF*/

    
}
 
 
 @media print {
     
html {
    min-width:1200px;
    background:none;
    margin:0;
    background-color: #FFF;
    color:#000;
    max-height: 800px;
}

main {
    width:100%;
    margin:0;
    background-color: #FFF;
    color:#000;
}

.login {
    background-color:none;
}


.half {
    min-width:300px;
}

    
header, footer {
  display: none !important;
}    

.noprint {
    display:none;
}
.printblackwhite {
    background-color: #FFF;
    color:#000;
}
@page { 
    size: landscape;
    margin: 0; 
}
}