html {overflow-y:scroll;}
html, body {background-color:#ececec!important; height:100%; margin:0; padding:0}
#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
h1 {margin-bottom:30px; color:#E7711B; float:left; display:inline-block; box-sizing:border-box; font-size:2.1rem!important; line-height:inherit!important}
h1.login, h1.overzicht, h1.verwijder {width:100%!important;}

h2 {display:block; width:100%; color: #010050; margin-bottom: 15px; margin-top: 5px; font-size:1.5rem; }
p {width:100%;}
a, a:visited {
    /*color: #004b87;*/
    color: #010050;
}
.btn {font-weight:500;}
a:hover {color:#32373D;}
.aanpassing {color:#E7711B; font-weight:bold; text-align:center; font-size:1.2em;}
.verticalcenter {position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
    width: 500px;
    height: 500px;}
.verticalcenter p.centreer { margin:15px auto 0; text-align:center;}
/*.wrapper{ width: 350px; padding: 20px; margin:auto; }*/
.sticky {position:fixed; width:100%;}
/*.sticky-top + .container {padding-top:100px;}*/
/*nav*/
.topnav {
  overflow: hidden;
  background-color: #010050;
  width:100%;
  margin-top:5px;
  margin-bottom:-5px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  font-weight:normal;
}
.stickylogo {display:none;}
.stickylogo a {
    padding: 0!important;
}
.sticky .topnav .stickylogo {display:inline-block; width:auto; background:#ffffff; float:right; margin-top:5px; padding:10px;}
.sticky .topnav .stickylogo img {width:auto;}
.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}
/*end nav*/


.pluginsregel {float:left; width:100%;}
.pluginsregel:hover, .overzichtregel:hover, .trover:hover {background-color:#f1f1f1;}
.overzichtregel a:hover {font-weight:normal;}
.pluginsleft {float:left; width:85%;}
.websitesleft {float:left; width:60%;}
.websitesmiddle {float:left; width:20%;}
.pluginsright {float:left; width:15%; text-align:right; padding-right:10px; box-sizing:border-box;}
.websitesright {float:right; width:10%; text-align:right; padding-right:10px; box-sizing:border-box;}
form {margin-bottom:30px; margin-top:20px;}
form label.verwijder {float:left; width:150px;}
form .formregel {float:left; width:100%; margin-bottom:10px;}
form table tr td:first-child {padding-right:10px;}
form .table-sm {width:auto;}
form .table-sm tr td {border-top:none!important;} 
form.sint .form-group {width:500px;}
.klantdiv label {float:left; width:100%;}
.klantdiv .inputveld {float:left;}
.klantovz {width:100%;}
.klantovz tr td:first-child {width:50%;}
.btn-warning, .btn-danger{ color: #ffffff!important;}
.selectplugin {background-color:#f1f1f1; padding:20px; box-sizing:border-box; border-radius:10px;}
.registreerplugin {background-color:#f1f1f1; padding:20px; box-sizing:border-box; margin-top:10px; border-radius:10px;}
.registreerplugin table {width:100%;}
.registreerplugin table tr:hover {background-color:#f1f1f1;}
a:hover {color:#1D486C; text-decoration:none; font-weight:600;}
.content {padding-top:20px;}
.logo {margin-top:12px;}
.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;}
.nav-pills {margin-top:10px}
.navbar-inverse, .navbar-expand {border:none!important; border-radius:0px!important;padding-bottom:20px;margin-bottom:10px;}
.navbar-inverse, .navbar-collapse, .navbar-expand {background-color:#010050!important;}
.navbar-nav {list-style-type:none!important; }
.navbar-nav li, .navbar-nav li hover {margin-right: 30px;}
.navbar-inverse .navbar-collapse, .navbar-nav > li > a, .nav-pills > li > a  {color: #f6f6f6; padding:10px 15px; text-decoration:none}
.navbar-nav li.active a, .navbar-nav li.active a:focus, .nav-pills > li > a:focus  {background-color:#1D486C!important; text-decoration:none; border-radius: .25rem;}
.navbar-nav li a:hover, .nav-pills > li > a:hover {background-color:#1D486C!important; border-radius: .25rem;}
.page-header {margin:0 0 30px 0!important; background-color:#ffffff; height:80px;}
.page-header .container {padding-left:0; padding-right:0;}
.page-header .navbar .container {background-color:#010050;}
.hello-right {font-size:0.9em; text-align:right; margin-top:10px;}
.hello-right .btn {padding:2px 4px!important; font-size:0.9em;}
.container {background-color:#ffffff; max-width:1500px!important}
.contentcontainer {-webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.contentcontainer .content .title {float:left; display:inline-block; width:80%!important;}

.titelrij .row {padding-bottom:0!important;}
.titelrij h1, .titelrij .nieuw {margin-bottom:0!important;}
.col { border: 1px solid #E7711B; border-radius: 10px; box-sizing: border-box; margin: 5px; padding:10px 15px 15px;}
.colfullwidth { width:100%; }
.col.letters { border: none!important; padding: 0!important; }
footer .col {border:0;}
.row.content {margin-left:0!important; margin-right:0!important; padding-bottom:20px;}
.row.content:last-child {padding-bottom:25px!important;}
.rowleft {float:left;}
input, select, textarea { padding: 5px 8px; }
textarea {width:90%; margin-bottom:0!important;}
footer {
margin-top:40px;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#010050;
 }
footer .container {background:#010050; padding-top:10px; color:#f2f2f2;}
footer .navbar ul li a:hover {font-weight:normal!important;}
footer .collapse:not(.show) {display: none; display: contents;}
a i.fa:hover {color:#e7711b;}
.fa-edit:before:hover, .fa-pencil-square-o:before:hover {font-weight:600; color:#010050;}
.werk {padding:20px; border: 1px solid #ccc;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {border:1px solid #010050!important; background-color:#337ab7!important;}
.wijzigingen {margin-bottom:40px;}
.ui-accordion-content {height:auto!important;}
.nieuw {width: 20%; text-align: right; margin-top: 5px; margin-bottom:40px; float:right; display:inline-block;}
input[type="text"], input[type=email], input[type=number], textarea  {border:1px solid #cccccc; border-radius:5px; margin-bottom:5px;}
input.btn-default, a.button { -webkit-appearance: button; padding: 5px 8px; color: #010050; border: 2px solid #010050; border-radius: 5px; font-weight:500}
input.btn-default:hover, a.button:hover {color:#E7711B; border-color: #E7711B  ;}
input.btn-primary{ -webkit-appearance: button; padding: 5px 8px; color: #ffffff; border: 2px solid #010050; border-radius: 5px; font-weight:500; background-color:#010050}
input.btn-primary:hover { background-color:#E7711B; border-color:#e7711b;}
input.btn {margin-bottom:20px;}
.letters ul {list-style-type:none; padding-bottom:10px; border-bottom:3px solid #010050; height:40px;}
.letters ul li {float:left; margin-right:30px;}
.ovz a { background-color: #010050!important; max-height: 200px!important; display: block!important; color: #ffffff!important; text-align: center!important; padding: 50px 0!important; margin: 0 35px!important;}
.updateoverzicht th, .updateoverzicht td {padding:0; border-top:none!important;}
/*.updateoverzicht th:first-child {width:150px;}
.updateoverzicht th:nth-child(2){width:330px;}
.updateoverzicht th:nth-child(3) {width:410px;}*/
.zoekform {width:50%; float:left; padding: 0 15px; display:inline-block; text-align:right; margin-bottom:20px; margin-top:-50px;}
.zoekformaantekeningen {width:100%; padding: 0 15px; display:inline-block; text-align:left; margin-bottom:15px;}
.knopaantekeningen {float:left; width:50%; margin-top:-20px; padding-left:20px;}
.knopaantekeningcat {float:left; width:100%; margin-top:0; padding-left:0;  margin-bottom:20px;}
.nieuwknopdiv {float:left; width:50%; padding:0 15px;}
textarea.aantekening {min-height:250px;}
button.zoeken {background:none; border:none; color:#ffffff!important; font-size:1.3em; float:right; margin-top:3px}
.zoekformaantekeningen button.zoeken {float:left!important; margin-left:5px!important; margin-top:-0; padding:2px 20px 3px;}
.zoekformaantekeningen button.zoeken:hover {background-color:#e7711b!important;}
.zoekformaantekeningen input {float:left;}
table.wordpressoverzicht {width:100%;}
table.wordpressoverzicht tr:nth-child(even) {background: #f6f6f6;}
table.wordpressoverzicht td {width:33.3%;}
table.wordpressoverzicht form.formulier {margin:0;}
table.wordpressoverzicht form.formulier input[type="submit"] {padding:1px 5px;}
.invultabel {margin-bottom:20px;}
.invultabel tr td:nth-child(1) {padding-right:20px;}
table.overzichtwerk td {vertical-align:top}
table.overzichtwerk tr:nth-child(even){background:#ececec;}
table.standaard {margin-bottom:20px;}
table.standaard tr td:first-child {width:200px;}
.formpie label {display:block;}
.formpie input[type="text"] {width:400px;}
.formpie textarea {height:300px}
div[contenteditable="true"] {
    width: 100%;
    min-height: 300px;
    border: 1px solid #EEEEEE;
    padding: 5px 8px;
	box-sizing: border-box;
}
.slaleft {float:left; width:20%;}
.slamidden {float:left; width:65%;}
.slarechts {float:left; width:15%; text-align:right;}
.aantekeningresultaat {display:block; margin-bottom:20px; border:1px solid #010050; padding:20px; box-sizing:border-box; border-radius:10px; overflow:hidden;}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  /*color: #06D85F;*/
  color: #DC143C;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
.naam {float:left; width:300px;}
.username {float:left; width:200px;}
.soort {float:left; width:100px;}
.klantnaam {float:left; width:200px;}
.help-block {color:#DC143C;}

form .error { color: #DC143C; }

.labelfield { float: left; width: 100px; margin-top: 7px;
}
.ui-accordion-content blockquote {font-family: "Courier New"; margin-left:40px!important;}
.overigesites {float:right; width:49%;padding:2%; margin-left:1%; background-color:#f1f1f1; border: none;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04); box-shadow: 0 1px 1px rgba(0,0,0,.04); box-sizing:border-box}
.overigeplugins {float:left; width:49%; box-sizing:border-box; padding:2%; margin-right:1%; background-color:#f1f1f1; border: none;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04); box-shadow: 0 1px 1px rgba(0,0,0,.04);}
.overzichtenrow {margin-top:20px!important;}
input[type=button], input[type=reset], input[type=submit], button {border-radius:5px; padding:5px 10px; background-color:#010050!important; color:#ffffff!important; border:none!important;}
input[type=submit], input[type=reset] {margin-top:5px!important;}
input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, button:hover {background-color:#000028!important;}
.fullwidth {display:block; width:100%; clear:both; margin-bottom:20px;}

@media screen and (max-width: 600px) {
	.navbar {padding-bottom:10px;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .logo, .hello-right {text-align:center; margin-bottom:10px;}
  .logo {margin-bottom:20px;}

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media screen and (max-width: 440px) {
  .page-header {margin:0;}
  h1 {width:100%; font-size:1.8em;}
  .nieuw {width:100%; text-align:center;}
	.logo img {max-width:90%!important;}
	.col {padding:2%; margin:0 0 20px 0;}
  .col-4, .col-8 {width:100%; float:left; flex: 100%; max-width: 100%;}
  .row.content {padding-bottom:0;}
	.knopaantekeningen, .zoekformaantekeningen  {width:100%!important; display:block;}
	.knopaantekeningen {padding-left:15px!important;}
	.zoekformaantekeningen {margin-top:0!important;}
	.zoekformaantekeningen input {width:90%!important; float:left!important }
	button.zoeken {float:left!important}
	.websitesleft, .pluginsleft {float:left; width:80%; font-size:1.1em; margin-bottom:5px;}
	.websitesright, .pluginsright {float:left; width:20%; text-align:right; font-size:1.1em; margin-bottom:5px;}
	input[type='text'] {width:100%;}
	select {max-width:100%;}
	.ui-accordion-content {padding:1em!important;}
	.letters ul {height:150px;}
	.letters ul li {margin-bottom:10px;}
	.zoekform {text-align:left;}
	.zoekform input[type='text'] {width:80%;}
	textarea {width:100%;}
  .overzichtenrow .ovz {flex: 0 0 50%!important; max-width: 50%!important;}
	.overzichtenrow .ovz p {display:table-cell; vertical-align:middle; text-align:center;}
	.overzichtenrow .ovz a {margin:0 0 40px!important; }
	table.updateoverzicht {max-width:100%;}
	table.updateoverzicht tr:first-child{display:none;}
	table.updateoverzicht tr {width:100%; display:block; padding:10px;}
	table.updateoverzicht td {width:100%; display:block;}
	table.updateoverzicht tr:nth-child(even) {background: #ececec;}
	table.updateoverzicht td:nth-child(1)::before{content:"Dag: "; font-weight:500; margin-right:5px;}
	table.updateoverzicht td:nth-child(2):before{content:"Datum: "; font-weight:500; margin-right:5px;}
	table.updateoverzicht td:nth-child(3):before{content:"Website: "; font-weight:500; margin-right:5px;}
	table.updateoverzicht td:nth-child(4):before{content:"Werk: "; font-weight:500; margin-right:5px;}
	table.updateoverzicht td:nth-child(5):before{content:"Nwe versie : "; font-weight:500; margin-right:5px;}
	.stickylogo {float:left!important;}
  .overigesites, .overigeplugins {width:100%;}
  .overigeplugins {margin-bottom:20px;}
  .wijzigingen {padding: 2%; margin-bottom:20px!important;}
  footer {margin-top:0}
  input[type=text], input[type=email] {width:80%; max-width:90%!important;}
}
