﻿.wepForm textarea { font-size: 1em; width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: solid 1px #999; border-radius: 5px; -webkit-appearance: none; }

/*header#header {display: flex; background: #231f20;justify-content: flex-start;  }
header#header h1 {font-family: 'Roboto Condensed',sans-serif;margin: 0 0 0 90px;align-self:center;text-transform: uppercase; font-weight: 300; color: #fff;font-size: 38px; }
header#header h1 strong {color:#fff; font-weight: 700;}*/

.flexwrapper { margin-bottom: -60px; }
.slide .content { color: #333; }


button:hover{color:#333}
.formFields { display: none; }

#container_full_login { position: fixed; top: 0; left: 0; z-index: 10002; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.58); text-align: center; display: none; }
#container_full_register { position: fixed; top: 0; left: 0; z-index: 10002; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.58); text-align: center; display: none; }
#inner { position: absolute; top: 10px; left: 4px; width: 450px; margin-left: calc(50% - 225px); height: calc(100% - 20px); background-color: #fff; padding: 20px 20px 0 20px; text-align: left; border: 1px solid #333; overflow-y: auto; }

.formSmall { }
.formSmall h1 { margin-bottom: -10px; line-height: 0.8em; }
.formSmall h2 { margin-bottom: 20px; line-height: 0.8em; }

/*
.formAdd { max-width: 500px; padding: 10px; border-radius: 4px; border: 1px solid #ccc; }

.formAdd form,.formAdd form p { margin:0 0 0 0!important}
.formAdd input[type="submit"] { margin-top: 10px; }
*/
.formAdd { float: left; }

.loginErr{color: #9F6000;background-color: #FEEFB3;padding:10px;border: 1px solid  #9F6000;margin:25px}
.loginErr p:last-of-type{ margin: 0 0 0.5em 0 }
.loginErr h3{color: #9F6000;}
.loginErr a.wepButton{background:#9F6000;border-color:#9F6000;margin: 0;}
.loginErr a.wepButton:hover { color: var(--color-wit); background: var(--color-zwart); border: solid 3px var(--color-zwart); text-decoration: none; }

div.msg { padding: 10px; background-color: #0094ff; color: #fff; margin-bottom: 12px; }
div.formMSg { padding: 10px; background-color: #0094ff; color: #fff; margin-bottom: 12px; }
div.formMSg a, div.msg a { color: #fff; }

div.formMSgGreen { padding: 10px; background-color: #DFF2BF; color: #222; margin-bottom: 12px; }
div.formMSgGreen a { color: #4F8A10; }
div.formMSgGreen button { background-color: #4F8A10;color:#fff;margin-top:10px;margin-bottom:0}
div.formMSgGreen button:hover { background-color:#333;color:#fff}

.btnOrder { float: right; margin: 0 0 25px 25px; }

.pgNrs { display: block; width: 100%; padding: 4px; overflow: hidden; overflow-y: auto; background-color: #fff; border-bottom: 1px solid #ccc; }
.pgNrs a { color: #333; text-decoration: none; }
.pgNrs a:hover { color: #ff8a00; text-decoration: none; }

a.pgNr, #pgNrsLeft, #pgNrsRight { display: inline-block; border: 1px solid #ff8a00; padding: 2px 2px 2px 2px; margin: 2px; text-align: center; text-decoration: none; color: #333; width: 40px; height: 40px; vertical-align: middle; }
a.pgNr:hover, #pgNrActive, #pgNrsLeft:hover, #pgNrsRight:hover { background-color: #ff8a00; color: #fff; border: 1px solid #feb832; text-decoration: none; }
#pgNrsLeft, #pgNrsRight { font-size: 1.2em; padding: 0; }

.acountMenu .button { margin-top: 5px; }
.formOpen, .formOpen .fit { margin: 0 !important; font-size: 0.8em;}
.overzicht tr > td:nth-child(3) .formOpen .fit  {margin: 0 !important; font-size: 0.8em; border: 1px solid #feb832; background: #feb832 }
.overzicht{font-size: 14px;}
.overzicht tr > td:first-child { min-width: 100px; width: 15%; }

form td { vertical-align: top; }

.compLeft { position:relative;top:10px;right:0;left:0;display:block; width:100% ;text-align:right; border:0px solid red!important;height:auto;padding-right:30px}

.tag1 { list-style: none;width: 96%; padding: 0; margin: 1%; background:#f7f7f7; }
.tag1 ul {margin: 0;}
.tag1 li {  margin: 0; }
.tag1 li a,.tag1 li a.inactiveTag { display: inline-block; text-decoration: none; border: 1px solid #d9d9d9; background-color: #fff; color: #333; width: calc(100% - 10px); padding: 2px 5px 2px 5px; margin: 0 0 3px 0; border-radius: 3px;}
.tag1 li a.activeTag { border-color: #333; color:white;background-color: #36b4e5 }

/*vacatures*/
tr.rowDeleted td{color: #ccc;}
/*einde vacatures*/

@media screen and (min-width: 720px) {
.tag1 li a:hover { border-color: #333; color:white;background-color: #36b4e5 }
}

.tag1 li.groupTitle a { background-color: transparent; color: #333; font-weight: bold; max-width: calc(100% - 50px); border: solid 0px #333;}

.groupTitle { background-color: #eee; color: #444; font-weight: bold; cursor: pointer; padding: 3px 10px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }
.groupTitle.active, .groupTitle:hover { background-color: #ccc; }
div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
div.panel li:first-child { margin-top:15px }
.groupTitle:after { content: '\02795'; /* Unicode  "plus" (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; }
.groupTitle.active:after { content: "\2796"; /* Unicode  "minus" sign (-) */ }


.rowRemove  { display:none}
.rowRemove td { background-color:#feb832;color:#333}
.accountRow { display:block;min-height:550px}
.accountL { float:left;display:inline-block;min-height:400px;width:calc(50% - 30px);padding:15px}
.accountR { float:right;display:inline-block;border:1px #ccc solid;width:calc(50% - 30px);padding:15px}

@media screen and (max-width: 980px) {
	header#header h1 {width: 100%; text-align: center;margin: 0;font-size: 5vw;}
	.acountMenu { -webkit-columns: 100px 2; /* Chrome, Safari, Opera */ -moz-columns: 100px 2; /* Firefox */ columns: 100px 2; }
	.acountMenu .button { width: 100%; }
	.accountL { float:none!important;display:block;width:100%}
	.accountR { float: none!important;display:block;width:100%}
}
@media screen and (max-width: 720px) {
	.overzicht tr:first-child {display: none;}
	td {display: block; min-width: 150px; width: 100%;}
	input[type="submit"], input[type="reset"], input[type="button"], button, .button {min-width: 150px; }
    /* Het Wep PW */
    .mobiel button {min-width: auto;}
}
@media screen and (max-width: 480px) {
	.acountMenu { -webkit-columns: unset; /* Chrome, Safari, Opera */ -moz-columns: unset; /* Firefox */ columns: unset; }
}