@font-face {
    font-family: Roboto;
    src: url(../Fonts/Roboto-Medium.ttf)
}

body { 
  background: #ccc;
  font-family: helvetica, arial, serif;
  font-size: 12px;
/*  text-transform: uppercase;*/
/*  text-align: center; */
}
input {
font-family:Arial;
font-size:14px;
}
label{
font-family:Arial;
font-size:14px;
color:#999999;
}
table{
  border: 3px solid;
  padding:1px;
}

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

.Prnheader, .Prnheader-space
{
  height: 45px;
}
.Prnheader {
  position: fixed;
  top: 0;
}

th{
    font-family:Roboto;
    background-color: #919bf2;
	background-size: 50px 25%;
	color:black;
	border:1px solid;
	padding:4px;
	
}

tr {
    background-color: #f5a04c;
    /*color:white;*/
    white-space:nowrap;
	border:1px solid;
	padding:4px;
}
tr hover {background-color: coral;}

td{
    text-align: left;
    font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
    background-color: #f7f799;
	background-size: 40px 25%;
	color:black;
	border:1px solid;
	padding:4px;
}

.tablefoot{
    width:10px;
    margin:auto;
    font-size:14px;
    border:1px solid #000;
 
}


.tablefoot tr {

/*color:white;*/
    white-space:nowrap;
    border:0;
}

.tablefoot td{
    text-align: left;
    height:20px;
    background-color: #ccc;
	background-size: 20px 15%;
    font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	color:black;
	border:0;
}





/*Headings */

h1 {

	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	background-color: #5e6ceb;
	background-size: 50px ;
	color:white;
	font-size:45px;
	font-weight:bold;
	margin:0;
	padding: 1px;
    box-shadow: 2px 2px 3px;
	border-top-right-radius: 18px;
    border-top-left-radius: 18px;
	border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    text-align: center;
    text-transform: uppercase;

 
	}
h5 {

	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	background-color: #5e6ceb;
	background-size: 100px 40px ;
	color:white;
	font-size:35px;
	font-weight:bold;
	margin:0;
	padding: 4px;
    box-shadow: 2px 2px 3px;
    width: 25%;
	border-top-right-radius: 18px;
    border-top-left-radius: 18px;
	border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    text-align: left;
    text-transform: uppercase;
 
	}
	
h6 {

	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	background-color: #5e6ceb;
	background-size: 100px 30px ;
	color:white;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding: 4px;
    box-shadow: 2px 2px 3px;
    width: 40%;
	border-top-right-radius: 18px;
    border-top-left-radius: 18px;
	border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    text-align: left;
    text-transform: uppercase;
 
	}
MSGBlink {

	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
    animation-name: BlinkingMsg;
    animation-duration: 4s;
    animation-iteration-count: infinite;
	background-size: 80px 30px ;
	color: #fff;
	font-size:20px;
	font-weight:bold;
	margin:0;
	padding: 10px;
    box-shadow: 2px 2px 3px;
    width: 30%;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
}
@keyframes BlinkingMsg{
	0%		{ background-color: #10c018;}
	25%		{ background-color: #1056c0;}
	50%		{ background-color: #ef0a1a;}
	75%		{ background-color: #254878;}
	100%	{ background-color: #04a1d5;}
}
 


h2 {
	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	font-size:30px;
	font-weight:bold;
	margin:0;
	padding:2px;
	text-transform: uppercase;
	}
h-message {
	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	font-size:30px;
	font-weight:bold;
	margin:0;
	padding:2px;
	text-transform: uppercase;
	color:RED;
	}
h3 {
	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	font-size:18px;
	font-weight:bold;
	margin:0;
	padding:2px;
	text-transform: uppercase;
	}
h4 {
	font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	font-size:10px;
	font-weight:bold;
	margin:0;
	padding:2px;
	text-transform: uppercase;
	}
	
/* Footer */
footer {
    font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
    background-color: #5e6ceb;
	background-size: 50px 10%;

	color:white;
    padding: 3px;
	text-transform: uppercase;
	text-align: center;
	width: 22.5%;
	border-top-right-radius: 18px;
    border-top-left-radius: 18px;
	border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
  
}
foottxt {
    font-family:Lucinda Sans, Helvetica, sans-serif, Verdana, Arial;
	text-transform: uppercase;
	font-size:13px;
	font-weight:bold;
}

waarsku {

    font-family: Helvetica, sans-serif, Verdana, Arial;
    text-transform: uppercase;
    color:red;

}
.tblSaveForm {
border-top:3px SkyBlue solid;
background-color: #f8f8f8;
}
.header {
background-color: SkyBlue;
text-transform: uppercase;
}


.buttom {
background-color: SkyBlue;
padding:5px;
border-color:white;
border-radius:4px;
color:white;
text-transform: uppercase;
}
.buttom2 {
background-color: limegreen;
padding:5px;
border-color:white;
border-radius:2px;
color:white;
/* text-transform: uppercase; */
}
.message {
color: #FF0000;
text-align: center;
width: 100%;
}
.txtField {
background-color: #f2f25a;
padding: 5px;
border:#fedc4d 1px solid;
border-radius:4px;
}
.evenRow {
background-color: #E2EDF9;
font-size:12px;
color:#101010;
}
.evenRow:hover {
background-color: #ffef46;
}
.oddRow {
background-color: #B3E8FF;
font-size:12px;
color:#101010;
}
.oddRow:hover {
background-color: #ffef46;
}
.tblListForm {
border-top:2px #999999 solid;
}
.listheader {
background-color: #fedc4d;
font-size:12px;
font-weight:bold;
}
.link{
text-decoration:none;
color:#5e8fc7;
font-size:11px;

}
.btn-Add{
    color:#fff;
    background-color:#28a745;
    border-color:#28a745
    
}
.btn-Add:hover{
    color:#fff;
    background-color:#218838;
    border-color:#1e7e34
    
}
.btn-Add.focus,
.btn-Add:focus{
    color:#fff;
    background-color:#218838;
    border-color:#1e7e34;
    box-shadow:0 0 0 .2rem rgba(72,180,97,.5)
    
}
.btn-Add.disabled,
.btn-Add:disabled{
    color:#fff;
    background-color:#28a745;
    border-color:#28a745
    
}
.btn-primary{
    color:#fff;
    background-color:#007bff;
    border-color:#007bff
    
}
.btn-primary:hover{
    color:#fff;
    background-color:#0069d9;
    border-color:#0062cc
    
}
.btn-primary.focus,.btn-primary:focus{
    color:#fff;
    background-color:#0069d9;
    border-color:#0062cc;
    box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
    
}
.btn-primary.disabled,.btn-primary:disabled{
    color:#fff;
    background-color:#007bff;
    border-color:#007bff
    
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
    color:#fff;
    background-color:#0062cc;
    border-color:#005cbf
    
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus{
    box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
    
}
 
.wrap {
  display: inline-block;
  -webkit-box-shadow: 0 0 50px #fff;
  -moz-box-shadow: 0 0 50px #fff;
  box-shadow: 0 0 50px #fff;
  margin-top: 5px;
}

/* a little "umph" */
.decor {
  background: #6EAF8D;
  background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: linear-gradient(left, white 50%, #6EAF8D 50%);
  background-size: 25px 25%;
  padding: 2px;
  display: block;
}

a {
  text-decoration: none;
  /*color: #fff;*/
  color:#6babff;
  display: block;
}

ul {
  list-style: none;
  position: relative;
  text-align: left;
}

li {
  float: left;
    font-size:13px; 
}
li:hover{
    background-color: blue;
}

/* clear'n floats */
ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: #2B2B2B;
  background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #0E0E0E;
  -webkit-box-shadow: 2px 2px 3px #888;
  -moz-box-shadow: 2px 2px 3px #888;
  box-shadow: 2px 2px 3px #888;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  text-transform: uppercase;
}

/* prime */
ul.primary li a {
  display: block;
  padding: 3px 3px;
  border-right: 1px solid #3D3D3D;

}

ul.primary li:last-child a {
  border-right: 1px solid #3D3D3D;
}

ul.primary li a:hover {
  
  color: #000;
}

/* subs */
ul.sub {
  position: absolute;
  z-index: 100;
  box-shadow: 2px 2px 0 #BEBEBE;
  width: 25%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 3px 3px;
}

ul.sub li:last-child a {
  border-bottom: none;
}

ul.sub li a:hover {
  color: #000;
  background: #eeeeee;
}

/* sub display*/
ul.primary li:hover ul {
  display: block;
  background: lightblue;
}

/* keeps the tab background white */
ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
} 

@media only screen and (max-width: 600px) {
  .decor {
    padding: 3px;
  }
  
  .wrap {
    width: 50%;
    margin-top: 0px;
  }
  
   li {
    float: none;
  }
  
  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }
  
  ul.sub {
    display: block;  
    position: static;
    box-shadow: none;
    width: 100%;
  }
  
  ul.sub li a {
    background: #272727;
    border: none;
    color: #8B8B8B;
  }
  
  ul.sub li a:hover {
    color: #ccc;
    background: none;
  }
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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 */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

.text-success {
    color: #28a745;
}
.text-danger {
    color: #dc3545;
}