nav{background-color: rgb(68, 68, 241); height: 40px;color:white;}
nav a{padding: 12px 15px; color: white; text-decoration: none;}
nav a:hover{background-color: white; color:rgb(68, 68, 241);}
.fright{float:right; margin-top: 11px;}
.frighta{float:right;}
.fleft{float:left;  margin-top: 11px;}
.clear{clear:both;}
.navitemright{margin-right: 20px;}
.navitemleft{margin-left: 20px;}
.bold{font-weight: bold;}

.hide{display:none;}


.mainscreen article{text-align: center; width: 60%; height: 100px; border: 2px solid rgb(68, 68, 241); margin: auto; margin-top: 50px; border-radius:4px; padding: 10px;}
.mainscreen p{margin-top: 20px;}

.mainscreen a{color: white;  text-decoration:none; padding: 5px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.mainscreen a:hover{background-color: white; color: black;}

.terugknop{float: left; margin-top: 30px; margin-left: 60px; color: white;  text-decoration:none; padding: 5px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.terugknop:hover{background-color: white; color: black;}

.functieknop{float: right; margin-top: 30px; margin-right: 30px; color: white; text-decoration: none; padding: 5px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.functieknop:hover{background-color: white; color: black;}
.functieinvulveld{float: left; margin-top: 30px; margin-left: 30px;  padding: 5px 20px; border-radius: 2px;}

.knop{ margin-top: 30px; margin-right: 30px; color: white; text-decoration: none; padding: 5px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.knop:hover{background-color: white; color: black;}

.dknop{ clear:both; margin-top: 30px; margin-right: 30px; color: white; text-decoration: none; padding: 5px 20px; border: 1px solid red; border-radius: 2px; background-color: lightcoral;}
.dknop:hover{background-color: white; color: black;}



.havenoverzicht article{}
.havenoverzicht h2{}

.havenmenu{margin: auto; clear: both; margin-top: 100px; width: 60%; height: 35px; }
.havenmenu input{text-align: center; float: left; margin-top: 11px; height: 28px; margin-left: 1%; min-width: 100px; width: 20%;}
.havenmenuitem{color: white;  text-decoration:none; padding: 5px 30px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.havenmenuitem:hover{background-color: white; color: black;}

.havenligplaats{margin:auto; margin-top: 15px; clear:both; width: 60%; height: 35px; border-radius: 3px;}
.havenligplaats a{color: white;  text-decoration:none; padding: 0px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.havenligplaats a:hover{background-color: white; color: black;}

.useroverzicht{margin:auto; margin-top:150px; clear: both;}
.useroverzicht table{ width:100%; margin: auto; text-align: center;}
.useroverzicht tr{height: 40px;}
.useroverzicht td{vertical-align: middle;}
.useroverzicht tr:nth-child(even){background-color: #CCC;}
.useroverzicht tr:nth-child(odd){background-color: #FFF;}
.useroverzicht a{color: white;  text-decoration:none; padding: 0px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.useroverzicht a:hover{background-color: white; color: black;}

.havenaanpasoverzicht{margin:auto; margin-top:150px; clear: both;}
.havenaanpasoverzicht table{ width:100%; margin: auto; text-align: center;}
.havenaanpasoverzicht tr{height: 40px;}
.havenaanpasoverzicht td{vertical-align: middle;}
.havenaanpasoverzicht tr:nth-child(even){background-color: #CCC;}
.havenaanpasoverzicht tr:nth-child(odd){background-color: #FFF;}
.havenaanpasoverzicht .btn {color: white;  text-decoration:none; padding: 0px 20px; border: 1px solid rgb(68, 68, 241); border-radius: 2px; background-color: rgb(68, 68, 241);}
.havenaanpasoverzicht .btn:hover{background-color: white; color: black;}

.ligplaatsdetails{margin: auto; margin-top:50px; width: 70%; border: 1px solid black;}
.ligplaatsdetails table{margin: auto; width:100%;  text-align: center; font-size: x-large;}
.ligplaatsdetails tr{height: 40px;}
.ligplaatsdetails td{border-right:1px solid black;}
.ligplaatsdetails h2{text-align: center; padding: 10px; font-size: xx-large;}

.reservatiehuidig{margin: auto; margin-top:50px; width:70%; border: 1px solid black;}
.reservatiehuidig table{margin: auto; width: 100%; text-align: center; font-size: large;}
.reservatiehuidig tr{height: 40px;}
.reservatiehuidig td{border-right:1px solid black;}
.reservatiehuidig h2{text-align: center; padding: 10px; font-size: xx-large;}

.ligplaatsvast{margin: auto; margin-top:50px; width:70%; border: 1px solid black;}
.ligplaatsvast table{margin: auto; width: 100%; text-align: center; font-size: large;}
.ligplaatsvast tr{height: 40px;}
.ligplaatsvast td{border-right:1px solid black;}
.ligplaatsvast h2{text-align: center; padding: 10px; font-size: xx-large;}

.reservatiehistory{float:left; margin-left:5%; margin-top: 50px; width: 40%; height: 400px; overflow-y: scroll; border: 1px solid black;}
.reservatiehistory table{margin: auto; width: 100%; text-align: center; font-size: large;}
.reservatiehistory tr{height: 40px;}
.reservatiehistory td{vertical-align: middle;}
.reservatiehistory tr:nth-child(even){background-color: #CCC;}
.reservatiehistory tr:nth-child(odd){background-color: #FFF;}
.reservatiehistory h2{text-align: center; padding: 10px; font-size: xx-large;}

.reservatietoekomst{float:right; margin-right:5%; margin-top: 50px; width: 40%; height: 400px; overflow-y: scroll; border: 1px solid black;}
.reservatietoekomst table{margin: auto; width: 100%; text-align: center; font-size: large;}
.reservatietoekomst tr{height: 40px;}
.reservatietoekomst td{vertical-align: middle;}
.reservatietoekomst tr:nth-child(even){background-color: #CCC;}
.reservatietoekomst tr:nth-child(odd){background-color: #FFF;}
.reservatietoekomst h2{text-align: center; padding: 10px; font-size: xx-large;}

.schipselectielijst{margin: auto; margin-top:50px; width:70%; border: 1px solid black;}
.schipselectielijst table{margin: auto; width: 100%; text-align: center; font-size: large;}
.schipselectielijst tr{height: 40px;}
.schipselectielijst td{vertical-align: middle;}
.schipselectielijst tr:nth-child(even){background-color: #CCC;}
.schipselectielijst tr:nth-child(odd){background-color: #FFF;}
.schipselectielijst h2{text-align: center; padding: 10px; font-size: xx-large;}
.schipselectielijst input{margin-top: 10px; margin-left: 10px; margin-bottom: 10px; padding: 5px; font-size: large;} 

.hiddenregistrationcenter{margin: auto; margin-top:50px; width:70%; border: 1px solid black;}
.hiddenregistrationcenter table{margin: auto; width: 100%; text-align: center; font-size: large;}
.hiddenregistrationcenter tr{height: 40px;}
.hiddenregistrationcenter td{border-right:1px solid black;}
.hiddenregistrationcenter h2{text-align: center; padding: 10px; font-size: xx-large;}
.hiddenregistrationcenter article{margin: auto; text-align: center;}

.ligplaatsselectielijst{margin: auto; margin-top:50px; width:70%; border: 1px solid black;}
.ligplaatsselectielijst table{margin: auto; width: 100%; text-align: center; font-size: large;}
.ligplaatsselectielijst tr{height: 40px;}
.ligplaatsselectielijst td{vertical-align: middle;}
.ligplaatsselectielijst tr:nth-child(even){background-color: #CCC;}
.ligplaatsselectielijst tr:nth-child(odd){background-color: #FFF;}
.ligplaatsselectielijst h2{text-align: center; padding: 10px; font-size: xx-large;}
.ligplaatsselectielijst input{text-align: center; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; padding: 5px; font-size: large;}
.ligplaatsselectielijst select{text-align: center; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; padding: 5px; font-size: large;}
.ligplaatsselectielijst article{text-align: center; width: 400px; margin: auto; margin-top: 20px; margin-bottom: 20px; padding: 20px;  border: 1px solid black;}


.vrij{border: 4px solid green; background-color: lightcyan;}
.bijnavrij{border: 4px solid orange; background-color: lightgoldenrodyellow;}
.bezet{border: 4px solid red; background-color: lightpink;}



.havenitemleft{float: left; margin-top: 9px; margin-left: 20px; margin-right: 20px;}
.havenitemright{float: right; margin-top: 9px; margin-right: 20px;  margin-left: 20px;}
.error{color:red;}

.nota{opacity: 0; animation: fade 20s linear forwards; animation-delay: 2s;  color: white; position: fixed; bottom: 50; left: 50; width: 500px; border: 2px solid rgb(68, 68, 241); border-radius: 4px; background-color: rgb(68, 68, 241); padding: 10px;}
.nota p{padding: 10px;}
.nota h1{color:white; font-size: larger;}

.bevestigingaangemaakt{opacity: 0; animation: fadebevestiging 4s linear forwards; position: fixed; bottom: 50; right: 100;  border: 2px solid green; background-color: lightcyan; border-radius: 4px;  padding: 10px;}
.bevestigingverwijderd{opacity: 0; animation: fadebevestiging 4s linear forwards; position: fixed; bottom: 50; right: 100;  border: 2px solid red; background-color: lightpink; border-radius: 4px;  padding: 10px;}
.bevestigingaangepast{opacity: 0; animation: fadebevestiging 4s linear forwards; position: fixed; bottom: 50; right: 100;  border: 2px solid orange; background-color: lightgoldenrodyellow; border-radius: 4px;  padding: 10px;}

@keyframes fade {
    0%,100% { opacity: 0; }
    25%,75% { opacity: 1; }
    
}

@keyframes fadebevestiging {
    0%,100% {opacity: 0;}
    20%,80% {opacity: 1;}
}