html { height: 100%; font-size: 1em; }

body { height: 100%; font-family: 'Open Sans'; font-weight: 400; line-height: 1.45; color: #555; }

#body { padding-top: 20px; padding-bottom: 20px; }

p { margin-bottom: 1.3em; } 

h1, h2, h3, h4 { margin: 1.414em 0 0.5em; font-weight: inherit; line-height: 1.2; } 
h1 { margin-top: 0; font-size: 3.157em; } 
h2 { font-size: 2.369em; } 
h3 { font-size: 24px; } 
h4 { font-size: 1.333em; } 
small, .font_small { font-size: 0.75em !important; } 
extra-small, .font-extra-small { font-size: 0.75em; }

h1.slogan { font-family: "Open Sans", sans-serif; font-weight: 700; } 
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 { margin-top: 0; font-family: "Lato", sans-serif; font-weight: 300; color: #333; } 

.owner_header_button {
  height: 12px;
  background: #018db1;
  padding: 6px 8px;
  text-align: center;
  border-radius: 4px;
  color: white;
  line-height: 5px;
}

.owner_header_button:hover {
  background: #d9edf7;
}

.fit-content {
  white-space: nowrap;
  width: 1%;
}

.top-buffer {
  margin-top: 20px;
}

.small-top-buffer {
  margin-top: 8px;
}

.large-top-buffer {
  margin-top: 50px;
}

.small-margin-bottom {
  margin-bottom: 8px;
}

.no-padding-left-right {
  padding-left: 0px;
  padding-right: 0px;	
}

.no_margin_padding {
  margin: 0px;
  padding: 0px;
}

.small-padding-left-right {
  padding-left: 8px;
  padding-right: 8px;
}

.row-no-margin {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

a.no-style-link {
  text-decoration: none;
  color: inherit;
}

a.no-style-link:hover {
  color: #808080;
}

textarea {
  max-width: 100%;
}

.action-btn {
  position: relative; 
  top: 28px; 
}

.action-textarea {
  font-size: 9pt;
  margin-top: 8px;
  max-height: 200px;
}

.text-left {
  text-align: left !important;
}

.page-title {
  margin-top: 30px;
  margin-bottom: 30px;
}

.bold {
	font-weight:bold;
}

/* overwrite bootstrap form-control inputs when readonly */
.form-control[readonly="readonly"], .form-control[readonly] {
  border: 0;
  outline: none;
  background-color: #FFFFFF;
  box-shadow: none;
  -webkit-appearance: none;
}

.control-label-left {
  text-align: left!important;
}

.controls.readonly {
  padding-top: 5px;
}

.clickable {
  cursor: pointer;
}

.wordbreak {
    word-break: break-all;
}

.modal {
    word-break: normal;
}

.modal-title {
    text-align: center;
}

.field-icon {
  float: right;
  margin-right: 10px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.table>tbody>tr>td {
  border-top-color: #cdcdcd;
}

.table tbody tr td:first-child {
  word-break: break-all;
  text-align: left;
}

.table>thead>tr>th {
  padding-top: 5px;
  border-bottom: 0;
  text-align: left;
}

.table-clickable tr {
  cursor: pointer;
}

.table-clickable tr:hover {
  background-color: #d8d8d8 !important;
}

.clearable{
  background: #fff url("//assets.bettyblocks.com/c3eeb4ae2b484a5ea249dcf78b33f912_assets/files/icoX?_=cb51bb52542f859c42120198146e5b75") no-repeat right 10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */

/* DataTables styling CSS overwrite */
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_asc:after {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
  content: none;
}

table.dataTable thead .sorting_desc, 
table.dataTable thead .sorting_desc:after {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
  content: none;
}

table.dataTable thead .sorting, 
table.dataTable thead .sorting:after {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
  content: none;
}

table.dataTable thead>tr>th.sorting_asc, 
table.dataTable thead>tr>th.sorting_desc, 
table.dataTable thead>tr>th.sorting, 
table.dataTable thead>tr>td.sorting_asc, 
table.dataTable thead>tr>td.sorting_desc, 
table.dataTable thead>tr>td.sorting {
  padding-right: 5px;
  padding-left: 15px;
}

.table-small-margin-bottom {
  margin-bottom: 2px;
}

.small-top-buffer {
  margin-top: 6px;
}

.info-point {
  color: #018DB1;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.yellow {
  color: gold;
}

.orange {
  color: orange;
}

.light-gray {
  color: #ddd;
}

.not_visisble {
  opacity: 0.1;
}

.info-point:hover {
  cursor: pointer;
  color: grey;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropdown-title{
    background-color: #3e8e41;
}

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
  min-width: 250px;
  margin-bottom: 8px;
}

.search input {
  border-radius: 40px;
  text-indent: 30px;
  min-width: 220px;
}

.search .fa-search { 
  position: absolute;
  top: 9px;
  left: 30px;
}

.searchfield {
  width: 50%;
}

.searchfilters {
  display: inline-block;
  margin-top: 2px;
  margin-left: 5px;
}

.ml-1 {
  margin-left: 5px;
}

.mr-1 {
  margin-right: 5px;
}

.password_validation {
  padding: 15px; 
  margin: 15px; 
  border: 1px solid transparent; 
  border-radius: 4px; 
  color: #a94442; 
  background-color: #f2dede;
}

/* jquery-ui added class */
.ui-draggable-handle {
  cursor: move;
}

.text-new-message {
  color: #FF0000;
}

.card-body {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.cell-cut {
  max-width: 200px; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
}

.datetime {
  padding: 0px !important;
}

/* Datepicker custom */
#datepicker {
  width: 200px; 
  margin: 0px !important;
  padding: 0px !important;
  padding-left: 15px !important;
  font-size: 9pt !important;
}

#datepicker > span:hover {
  cursor: pointer;
}

.chevron:after {
    font-family:Fontawesome;
    content:'\f077';
    font-size:10px;
  	vertical-align: middle;
  	padding: 5px;
}

.chevron.collapsed:after {
    font-family:Fontawesome;
    content:'\f078';
}


/*Author: Kosmom.ru
  Loading image in een input veld.
*/
.loading, .loading>td, .loading>th, .nav li.loading.active>a, .pagination li.loading, .pagination>li.active.loading>a, .pager>li.loading>a {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 40px 40px;
  animation: 2s linear 0s normal none infinite progress-bar-stripes;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
}
.btn.btn-default.loading, input[type="text"].loading, select.loading, textarea.loading, .well.loading, .list-group-item.loading, .pagination>li.active.loading>a, .pager>li.loading>a {
  background-image: linear-gradient(45deg, rgba(235, 235, 235, 0.25) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(235, 235, 235, 0.25) 50%, rgba(235, 235, 235, 0.25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  color: #ddd;
}

tbody tr:nth-of-type(2n) { background-color: #f0f0f0; } 

th { background-color:#018DB1; font-weight:bold; color:#fff; } 

td { padding: 5px; vertical-align: top; } 

.ng-table th.sortable.sort-asc, .ng-table th.sortable.sort-desc { color: #018db1; } 

img.alignleft { float: left; margin-right: 10px; } 

.table-responsive a { color: #fff; } 
.table-responsive a:hover { color: #A8A9A5; text-decoration: none; } 

.has-retourcodes { background-color:pink !important }

.has-multiple-matches { background-color:#f3d2a4 !important; }

/* 
For Table TD -> top and bottom styling. 
.has-multiple-matches { border-top:#f3d2a4 2px solid !important;border-bottom:#f3d2a4 2px solid !important }
*/

.page { margin-bottom: 35px; } 

.nomarge { margin-top: 0 !important; } 

.newsblock { height: 200px; margin-bottom: 25px; overflow: hidden; } 
.newsblock h2 { font-size: 14px; } 

.wpcf7 { margin-top: 15px !important; width: 100% !important; } 

.post .title_cap h3 { padding: 5px !important; font-size: 16px; } 
.post img { width: 100%; } 

.footer { background-color: #fbfbfb; } 

.panel a h3 { text-decoration: none; border: none; color: #000; cursor: pointer; cursor: hand; font-size: 1.3em; } 

h3.bijeenkomst { text-decoration: none; border: none; color: #000; cursor: pointer; cursor: hand; font-size: 1.0em; font-weight: 700; } 

h3.panel-title { width: 95%; height: 100%; position: relative; } 

.showantwoord { float: right; position: relative; width: 5%; height: 100%; text-align: center; margin-top: -13px; } 

.veelgesteld { columns: 2; -webkit-columns: 2; -moz-columns: 2; margin-left: -15px; } 

ul.veelgesteld li { list-style: disc; margin-left: 15px; } 

.dropdown .child a { font-size: 1em; } 

.page ul li { margin-bottom: 4px; font-size: 14px; } 

.child { margin-left: 14px; } 

header { background-color: #ffffff; } 

.slogan { font-weight: 500; font-size: 2em; text-transform: uppercase; margin-left: 30px; margin-top: 40px; float: left; color:#555 } 

.sublink a { width: auto !important; float: none !important; } 
.zoek .sublink { width: 100%; text-align: right; } 
.zoek .navbar-form { height: 25px; float: right; padding-right: 0; } 

.logobar { padding-top: 10px; height: 80px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; border: none; text-decoration: none; } 
.logobar a { height: 60px; border: none; text-decoration: none; float: left; } 
.logobar img { min-width: 90px; max-width: 180px; float: left; } 

.navbar { background-color: #A8A9A5; border: none; border-radius: 0; min-height:30px !important; } 
.navbar a { color: #ffffff !important; font-family: "Raleway", sans-serif; border: none; font-weight: 500; font-size: 16px; } 
.navbar .selected-item a { color: #337ab7 !important; }
.navbar-collapse { padding-left: 0px; } 
.navbar-inverse { margin-bottom: 0px !important; } 
.navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover { background-color: #eeeeee !important; color: #000 !important; } 
.navbar-nav > li > a { padding-top:10px !important; padding-bottom:10px !important; } 


#topheader {
  margin-left: 15px;
}
#topheader a.active {
  background-color: #2e6da4; 
}
#topheader a:hover {
  background-color: #cdcdcd;
}
#topheader a.active:hover {
  background-color: #2e6da4;
}

.dropdown-toggle { color: #ffffff !important; font-family: "Raleway", sans-serif; border: none; font-weight: 500; font-size: 16px; } 
.dropdown-menu { background-color: #eeeeee; } 
.dropdown-menu a { color: #000000 !important; text-decoration: none; border: none; } 
.dropdown-menu a:hover { background-color: #A8A9A5 !important; color: #ffffff !important; } 

.subnav { background-color: #e6e6e6; width: 100%; height: 100%; float: left; } 
.subnav .breadcrumb { margin-bottom: 10px !important; font-size: 0.8em; } 
.subnav ol { background-color: #e6e6e6; margin-top: 5px; } 
.subnav ul { padding: 0; margin-left: 5px; margin-top: 0; } 
.subnav ul li { display: inline; padding-left: 10px; padding-right: 10px; padding-top: 10px; } 
.subnav ul li.active { background-color: #ffffff; } 
.subnav h2 { font-family: "Raleway", sans-serif; font-size: 16px; font-weight: 700; color: #A8A9A5; } 
.subnav h2.active { background-color: #ffffff; } 
.subnav a { border: none !important; } 

.footer { margin-right: auto; margin-left: auto; color: #fff; background-color: #99BE0E; } 
.footer p:last-child { margin-bottom: 0; } 

.footer a { border-bottom: 1px #fff dotted; color: #fff; } 
.footer a:hover { border-bottom: 1px #fff dotted; text-decoration: none; } 
.second-nav { margin-top: 15px; } 
.second-nav h2 { font-size: 16px; color: #ffffff; font-weight: 300; text-align: left; text-transform: uppercase; border-bottom: 1px dotted white; margin-bottom: 12px; line-height: 2.2em; } 
.footer ul { margin-left: 0px; list-style: none; padding-left: 0px; } 
.footer li { margin-bottom: 2px; list-style: none; } 
.footer li a { text-decoration: none; border-bottom: none; } 

.partners { background-color: #ffffff; padding-top: 15px; width: 100%; height: 100%; min-width: 200px; margin-top: 30px; margin-bottom: 30px; float: left; } 
.partners a { float: left; height: 80px; background-color: #ffffff; } 
.partners img { height: 80px; display: block; margin: 0 auto; } 

.copyright { text-align: center; margin-bottom: 30px; } 

@media screen and (max-width: 768px){
  .collapsed { border: none; } 
  #subnav { display: none; } 
  .navbar-toggle { border-color: #A8A9A5 !important; } 
  .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: #A8A9A5 !important; } 
  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #A8A9A5 !important; } 
  .dropdown-toggle { text-align: center; } 
  .navbar-form { display: none; } 
  .logobar { width: 750px; } 
  table { width: 100%; } 
  .col-sm-3 { width: 80%; margin-left: 10%; } 
  .contentblok { margin-bottom: 5% !important; margin-top: 5% !important; } 
  .col-sm-3 .thumbnail { height: 100%; } 
  .thumbnail img { width: 100%; } 
  .partners a { width: 100%; float: left; margin-bottom: 15px; } 
}

@media (min-width: 768px) {
  .navbar-static-top { display: none; } 
  .col-sm-3 { width: 50%; } 
  .dropdown a { font-size: 14px; } 
  .sublink { font-size: 0.8em; } 
  /*.slogan { float: none; } */
  .contentblok { margin-bottom: 0% !important; margin-top: 1% !important; } 
  .col-sm-3 .thumbnail { height: 100%; } 
  .hoofdpaginablok .col-sm-3 { padding-top: 1%; padding-bottom: 1%; } 
  .second-nav .col-sm-3 { padding-top: 0; } 
  .thumbnail img { width: 100%; } 
  .partners a { width: 50%; float: left; margin-bottom: 15px; } 
  .homepage { padding-top: 3%; padding-bottom: 3%; } 
 }

@media (min-width: 992px){
  .dropdown a { font-size: 16px; } 
  .sublink { font-size: 1em; } 
  .second-nav .col-sm-3 { padding-top: 0; } 
  .col-sm-3 { width: 25%; }
  .hoofdpaginablok .col-sm-3 { padding-top: 1%; padding-bottom: 1%; } 
  .partners a { width: 25%; } 
  .homepage { padding-top: 3%; padding-bottom: 3%; } 
  .title_cap h3 { font-size: 1em !important; } 
}

@media (min-width: 1200px) {
  .logobar { width: 1170px; } 
  .partners a { width: 14%; height: 50px; } 
  .partners img { height: 50px; } 
}

fieldset { padding: .35em .625em .75em; margin: 0 2px; } 
.table-hover:hover { cursor:pointer; background-color: #d8d8d8 !important; } 
.pointer-on-hover:hover { cursor: pointer; }
.glyphicon-refresh-animate { animation-name: rotateThis; -webkit-animation-name: rotateThis; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear; } 

@-webkit-keyframes rotateThis { from { -webkit-transform: rotate( 0deg ); } to { -webkit-transform: rotate( 360deg ); } }
@keyframes rotateThis { from { transform: rotate( 0deg ); } to { transform: rotate( 360deg ); } }

.btn-primary { color: #fff; background-color: #018DB1; border-color: #017A99; } 
.btn-primary:hover { color: #fff; background-color: #0182A3; border-color: #017A99; } 

@media (min-width: 620px){ .app-modal-window .modal-dialog { width: 560px; } }
@media (min-width: 920px){ .app-modal-window .modal-dialog { width: 840px; } }

.tab-pane { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-radius: 0px 0px 5px 5px; padding: 10px; } 
.nav-tabs { margin-bottom: 0; } 

/* Bootstrap stepwizard */

.stepwizard { display: table; width: 66.6%; position: relative; }
.stepwizard-step p { margin-top: 10px; }
.stepwizard-row { display: table-row; }
.stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; }
.stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; }
.stepwizard-step-4 { display: table-cell; text-align: center; position: relative; width: 23%}
.stepwizard-step-5 { display: table-cell; text-align: center; position: relative; width: 20%}
.stepwizard-step-6 { display: table-cell; text-align: center; position: relative; width: 16.66666667%}

.btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }

/* end Bootstrap stepwizard */

.overlay { background: #e9e9e9; position: relative; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; }

.loader { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -75px 0 0 -75px; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #018DB1; width: 25px; height: 25px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } 

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.required:after { content:" *"; color:#ff704d; font-size:100%; font-weight: bold; }

.center-loader { margin: auto; width: 50%; padding: 10px; text-align: center; }

.form-group::before,
.form-group::after { content: " "; display: table; }
.form-horizontal .small-bottom-margin { margin-bottom: 5px; }
.form-horizontal .no-bottom-margin { margin-bottom: 0px; line-height: 1; }

.submitted .ng-invalid { border: 1px solid red; }

.noselect { pointer-events: none; }

.td-vertical-align-middle td { vertical-align: middle !important; }

.errorMessage { padding-top: 10px; color: red; }
.border-radius-left-fix span button { border-bottom-left-radius: 0; border-top-left-radius: 0; }

/* Json accordion on messages page */

.property { padding: 0px 5px 10px 5px; }
.body-accordion { padding: 15px 5px 5px 5px; }
.group-accordion { margin-bottom: 0px; }
.heading-accordion { background: #f5f5f5; padding: 5px 10px; }
.heading-accordion:hover { cursor: pointer; background-color: #e6e6e6; border-color: #adadad; }
.heading-accordion a { color: #333; }
.heading-accordion a:hover { text-decoration: none; }
.heading-accordion a:focus { text-decoration: none; }
.dt-wider { width: 250px !important; margin-right: 15px; }
/* END Json accordion on messages page */