/* CSS Document */

body, table, td, input, .input {
    font-size : 12px;
    font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
    margin: 0px;
}

h1 {
    color: #6FA395
}
h2 {
    font-weight: bold;
    color: #6fa395
}
h3 {
    color: #6fa395
}
h4, h5, h6 {
    font-weight: bold;
}



.error {
    color: red;
}

.warning {
    font-size: 12px;
    font-weight: bold;
    color: gray;
}

input, select, textarea {
    padding: 2px;
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 1px;
    vertical-align : middle;
}

input[readonly], select[readonly], textarea[readonly],
input[disabled], select[disabled] , textarea[disabled] {
    background-color: #DDD;
    color: black;
}

input, select, textarea,
input[readonly=false], select[readonly=false], textarea[readonly=false] {
    color:#777;
    background-color: #FFFFFF;
}

input, select, textarea {
    font-size: 11px;
    box-sizing: border-box;
    border-radius: 4px;
    border-color: lightgray;
    border-style: solid;
    border-width: 1px;
}

input:focus , select:focus , textarea:focus, .selectize-input.input-active {
    border-color: gray;
}



input.checkbox {
    border-style: none;
}

input.radio {
    border-style: none;
}


table input, table select {
    width: 100%; /* simply scale inputs to table cell size */
}

.table > thead > tr > th {
    border: 1px solid #EEE;
}

th {
    background-color : #DDD;
    padding: 5px;
}

form th, table.formlayout th {
    padding: 3px;
    background-color : #FFF;
    font-weight: normal;
    text-align: left;
}

.bggrijs {
    background-color : #E8A317;
    color:#777
}

.groenetekst {
    color: green;
}

.blauwetekst {
    color: blue;
}


.topnav {
    font-size: 70%;
    color: #ffffff
}

.subnav {
    font-size: 70%;
    color: #666
}





.textcenter {
    text-align: center;
}

.textright {
    text-align: right;
}

.textleft {
    text-align: left;
}

.tesxtbold {
    font-weight: bold;
}


.number {
    text-align:right;
    white-space: nowrap;
}

td {
    padding: 3px;
}

td.nopadding {
    padding: 0px;
}


.tableRowOdd {
    background-color: #f5f5f5;
    border: 1px solid transparent;
    border-bottom-color: silver;
}
.tableRowEven {
    background-color: white;
    border: 1px solid transparent;
    border-bottom-color: silver;
}


.yellow.tableRowEven {
    background-color : #FFFF99;
}

.yellow.tableRowOdd {
    background-color : #FFFFDD;
}


.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}


.ui-notify { width:350px; position:fixed; top:10px; right:10px; }
.ui-notify-message { padding:10px; margin-bottom:15px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px }
.ui-notify-message h1 { font-size:14px; margin:0; padding:0 }
.ui-notify-message p { margin:3px 0; padding:0; line-height:18px ;font-weight: bold;}
.ui-notify-message:last-child { margin-bottom:0 }
.ui-notify-message-style { background:#000; background:rgba(0,0,0,0.8); -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; }
.ui-notify-message-style h1 { color:#fff; font-weight:bold }
.ui-notify-message-style p { color:#fff }
.ui-notify-close { color:#fff; text-decoration:underline }
.ui-notify-click { cursor:pointer }
.ui-notify-cross { margin-top:-4px; float:right; cursor:pointer; text-decoration:none; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px }
.ui-notify-cross:hover { color:#ffffab }
.ui-notify-cross:active { position:relative; top:1px }



.slick-grid-div {
    background: white;
    outline: 0;
    border: 1px solid lightGray;
    font-size: 10px !important;
    border-radius: 5px;
}

/***** MODAL DIALOG (htmx custom) ****/

#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width:80%;
	max-width:800px;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;
}


@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/***** einde MODAL DIALOG (htmx custom) ****/