/* PVL 20190522: 	Standaard css voor Otho Online voor alle klanten. evt. specifiek zaken overrulen in praclox.mtw.css
					Voorlopig alles in één bestand, indien dit t.z.t. onoverzichtelijk wordt, een splitsing toepassen 
					zoals ook voor javascript is gedaan. 
					
					LET OP: classes beginnend met oo- zijn zelf gedefinieerde classes
					*/
					
/****************************************************/
/******************** <ALGEMEEN> ********************/
/****************************************************/

/* box rondom widgets (o.a. home en account) */
article {
  background: #fff;
  padding: 30px;
  position: relative;
  margin-bottom: 30px;
  box-shadow: 2px 2px 8px rgba(45, 45, 45, 0.36);
}

article > h3 {
	margin-top:0px;
}

/* voorkomen dat scherm verspringt bij openen modal */
body {
	padding-right:0px !important;
}

i {
	cursor: default;
}

img {
	max-width:100%;
	width:auto;
}

/* checkbox wat groter maken */
input[type=checkbox] {
	transform: scale(1.3);
	cursor:pointer;
}

/* adres input netjes uitlijnen */
/* todo? klein/groot door elkaar gebruikt.. */
input[name="str"],input[name="STR"]  { width:193px; margin-bottom:5px; }
input[name="hnr"],input[name="HNR"]  { width:50px; }
input[name="toe"],input[name="TOE"]  { width:40px; margin-left:5px; }
input[name="pc"], input[name="PC"]   { width:70px; }
input[name="pcl"],input[name="PCL"]  { width:35px; }
input[name="pcc"],input[name="PCC"]  { width:60px; margin-right:5px; }
input[name="wpl"],input[name="WPL"]  { width:120px; }
input[name="news"],input[name="av"],
input[name="NEWS"],input[name="AV"]  { margin-right:10px; }

.btn {
	font-weight:600;
}
.btn-ongepland {
	font-weight:normal;
}

.btn-circle {
	width: 125px;
    height: 125px;
    border-radius: 75px !important;
	border:none;
    background-color:#337ab7;
}
.btn-circle:hover{
	background-color:#337ab7;
}


/* iconen */
.glyphicon {
	font-family:'Glyphicons Halflings' !important;
	color:#337ab7;
	padding:0px;
}

#oo-register .glyphicon-envelope,
#oo-login .glyphicon-eye-open,
#oo-register .glyphicon-eye-open,
#oo-login .glyphicon-eye-close,
#oo-register .glyphicon-eye-close {
	padding-left:5px;
}

.glyphicon-edit,
.glyphicon-ok,
.glyphicon-open,
.glyphicon-pause,
.glyphicon-pencil,
.glyphicon-plus-add,
.glyphicon-save-file,
.glyphicon-star,
.glyphicon-star-empty,
.glyphicon-time,
.glyphicon-trash {
	cursor:pointer;
}

.glyphicon-edit				{ color:orange !important; }
.glyphicon-ok 				{ color:green !important; }
.glyphicon-pause 			{ color:orange !important; }
.glyphicon-pencil-right 	{ float:right; }
.glyphicon-pencil 			{ font-size:14px; }
.glyphicon-plus-add 		{ font-size:20px; } 
.glyphicon-question-sign	{ font-size:12px; }
.glyphicon-remove 			{ color:red !important; }
.glyphicon-trash 			{ color:red !important; }
/* einde iconen */

/* grote loader centreren binnen div */
.loader {
	margin:0 auto;
	/*padding:15px 0px;*/
	display:block;
	height:40px;
	width:40px;
}


/* popups */
.modal 						{ text-align: center; padding: 0!important; overflow-y:auto; }
.modal-title 				{ line-height:normal; }
.modal-header 				{ border-bottom:0px; }
.modal-header .close 		{ margin-top:0px; }
.modal-dialog 				{ display: inline-block; text-align: left; vertical-align: middle; }
.modal-body 				{ padding:0px; margin:0px auto; border-top: 1px solid #e5e5e5; }
.modal-body>div				{ overflow:auto; }	
.modal-body table 			{ margin:0px; }
.modal-body .panel-group 	{ margin-bottom: 0px; }
.modal-body .oo-loader-small{ margin-right: 5px }
.modal-body .oo-modal-loader{ margin: 5px auto;display:block }

/* knopjes login/registreren/recover niet goed uitgelijnd in bootstrap css */
.nav-tabs>li {
	margin-bottom:0px;
}

/* standaard marge onder btn groupen */
.oo-btn-group {
	margin-bottom:20px;
}

/* opmaak veld voor zoeken binnen aantekeningen */
.oo-faq-search {
	width:85px !important;
	float:right;
	margin: -5px 15px 0px;
}

/* icoon voor help/faq */
.oo-faq {
	position:relative;
	top:-5px;
	right:-5px;
	cursor:pointer;
	font-size:20px;
}

/* panel faq question */
.oo-faq-q {
	padding:5px 5px 5px 15px;
	font-weight:bold;
	font-size:14px;
}

/* panel faq awnser */
.oo-faq-a {
	padding:5px 15px 5px 15px;
	font-weight:normal;
	font-size:14px;
}

.oo-faq-a > p {
	margin:0px;
}

/* marge rondom hr wat kleiner */
.oo-hr {
	margin-top:10px;
	margin-bottom:10px;
}

.oo-input-small {
	width:65px;
}


/*
.oo-input-label-wide,
.oo-input-label-small,
.oo-input-field {
}*/
.oo-input-first {
	min-width:175px;
	height:40px;
}
#oo-select-table-left .oo-input-first,
#oo-select-table-right .oo-input-first,
#oo-frm-info-tbody .oo-input-first,
#oo-exp-info-tbody .oo-input-first {
	white-space: nowrap!important;
	min-width:unset;
}

.oo-input-second {
	width:100%;
	height:40px;	
}
#oo-exp .oo-input-field {
	font-weight:bold;
}
#oo-account .oo-input-field>input,
#oo-login .oo-input-field>input,
#oo-recover .oo-input-field>input {
	min-width:180px;
}

@media screen and (max-width: 601px) {
	.oo-input-label-wide { display:none; }
}
@media screen and (min-width: 601px) {
	.oo-input-label-small { display:none; }
}
/* ivm klein blok linksboven op groter scherm */
@media screen and (min-width: 992px) {
	#oo-exp-info-tbody .oo-input-label-small {
		display: table-cell!important;
	}
	#oo-exp-info-tbody .oo-input-label-wide {
		display: none;
	}
}
@media screen and (max-width: 991px) {
	#oo-select-table-left .oo-input-first,
	#oo-select-table-right .oo-input-first {
		min-width:200px;
	}
	#oo-select-table-left {
		margin-bottom:40px;
	}
}

 
/* kleine loader naast knoppen */
.oo-loader-small {
	height:20px;
	width:20px;
	margin-left:5px;
	vertical-align: middle;
}

/* break voorkomen */
.oo-nobr {
	white-space: nowrap;
}

/* eenvoudig padding verwijderen, niet nodig indien table binnen panel */
.oo-panel-no-padding {
	padding:0px;
}

.oo-home-pay-icon,
.oo-user-email,
.oo-toggle-password {
	vertical-align:middle;
	cursor:pointer;
}

.oo-update-text {
	font-size:12px;
	font-weight:normal;
	font-style:italic;
}

/* marge tussen panels verwijderen, mogen direct onder elkaar */
.panel-group .panel+.panel {
    margin-top: 0px;
}


/* ivm zorgen dat panel uit te klappen is door te klikken op header, niet alleen tekst */
.panel-heading {
    cursor: pointer;
}

/* align in table van bootstrap overrule: standaard midden */
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>thead>tr>td,
.table>thead>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th {
	vertical-align:middle;
	white-space:normal !important;
}

@media screen and (max-width: 767px) {
	#oo-invoer-content .table-responsive>.table {
		margin-bottom: 20px!important;
	}
}

/* geopende dossier modal: wel boven uitlijnen */
.oo-modal-dossier .table>tbody>tr>td {
	vertical-align:top;
}

@media (max-width: 450px) {
	.oo-upload-lbl {
		display:none;
	}
	#oo-upload-file {
		max-width:250px;
	}
}


/* shimmer loading */
.oo-shim {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;
}

.oo-shim-plot-action {
	width:100%;
	max-width:140px;
}

@media (max-width: 992px) and (min-width: 375px) {
	.oo-shim-plot {
		text-align:center!important;
	}
	.oo-shim-plot-action {
		height:100px!important;
		width:100%!important;
		margin-bottom:10px!important;
	}
}
@media (max-width: 700px) and (min-width: 375px) {
	.oo-shim-plot-action {
		height:70px!important;
		margin-bottom:5px!important;
	}
}
@media (max-width: 550px) and (min-width: 375px) {
	.oo-shim-plot-action {
		height:50px!important;
		margin-bottom:5px!important;
	}
}

.oo-shim::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
	background-image: linear-gradient(90deg, #DDDBDD, #EEEDEE 80%, #DDDBDD);
    animation: shimmer 2s infinite;
    content: '';
}

@keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
}





/* class van bootstraptable ook gebruiken voor reguliere tabellen */
.th-inner {
    line-height: 24px;
}

/* standaard font grootte voor alle tooltips */
.tooltip-inner {
	font-size:12px;
}

.ui-datepicker {
	padding:0px;
}
.ui-datepicker table {
	background-color:white;
}


/* popup rechts onderin */
#oo-alert {
    position:fixed;
    bottom:0px;
    right:15px;
    width:350px;
	display:none;
}

/* laatste update cache */
#oo-update-span {
	position:relative;
	float:right;
	top: -5px;
	left: -5px;
	display:none;
	text-align:right;
}

#oo-update-icon {
	cursor:pointer;
	padding-left:5px;
	font-size:20px;
}
	
#oo-update-date {
	position:relative;
	top:-3px;
	text-align:right;
}

/****************************************************/
/***************** <BOOTSTRAPTABLE> *****************/
/****************************************************/

/* gegevens in cellen standaard bovenaan uitgelijnd, pvl: voorlopig alleen op home */
#oo-home .bootstrap-table .table-hover > tbody > tr > td {
	vertical-align:top;
}

/* zorgen voor een cursor als het gaat om een klikbare tabel */
.fixed-table-body > .table-hover > tbody > tr {
	cursor:pointer;
}

/* achtergrondkleur pagination en bijbehorende dropdown menu neutraal */
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:active,
.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:active {
	background-color:#ddd;
	border-color:#ddd;
}

.table-responsive {
	margin-bottom:0px;
	border:0px;
}

/****************************************************/
/********************** <LOGIN> *********************/
/****************************************************/

/* ivm extra info/optie onder buttons */
.oo-extra-head {
	padding-top:15px;
	cursor:pointer;
	font-size:12px;
}

.oo-extra-text {
	 padding-top:5px;
	 font-size:12px;
	 display:none;
}
.oo-extra-text>a {
	font-size:12px;
}

/* melding ontbrekend javascript */
.oo-no-js {
	color:red;
	text-align:center;
}

.oo-login-alert,
.oo-files-alert {
	margin-top:20px;
	display:none;
}

.oo-login-btn {
	margin-top:10px;
}

.oo-login-btn-back {
	display:none;
}

.oo-login-recaptcha {
	display:none;
}

/* @media only screen and (max-width: 500px) {
	.g-recaptcha {
		transform:scale(0.77);
		transform-origin:0 0;
	}
} */

/* sterkte wachtwoord */
.oo-pass-strength-div {
	height:10px;
	width:120px;
	margin:5px 0px 0px 0px;
}

/* breedte tabellen loginscherm automatisch */
/* todo: class */
#oo-login-form > table, 
#oo-recover-form > table, 
#oo-recover-usr-form > table, 
#oo-register-form > table,
#oo-link-form > table {
	/*width: auto;*/
	width:100%;
	margin-bottom:0px;
}

/****************************************************/
/********************** <HOME> **********************/
/****************************************************/

/* rss marge */
.itemTitle {
	margin-bottom:10px;
}

/* label binnen plot wat kleiner ivm overlap en standaard zwart */
.jqplot-data-label {
	font-size: 8pt;
	color:#000;
}

.oo-deb-action {
	text-align:center;
	display:none;
}

.oo-deb-action h3 {
	margin-bottom:0px;
}

.oo-deb-action-link {
	cursor:pointer;
	text-decoration:none !important;
}
.oo-deb-action-link:hover,
.oo-deb-action-link:focus,
.oo-deb-action-link:active {
	text-decoration:none !important;
}

.oo-deb-action-icon {
	margin-top:5px;
	font-size:50px !important;
	color:white !important;
}
/* actieknoppen bij kleinere schermen aanpassen */
@media screen and (max-width: 992px) {
	.oo-deb-action .btn-circle { width: 75px; height: 75px;	}
	.oo-deb-action h3 { font-size:18px; }
	.oo-deb-action-icon { font-size:25px !important; }
}
@media screen and (max-width: 767px)  { 
	.oo-deb-action article { padding:15px; }
	.oo-deb-action .btn-circle { width: 60px; height: 60px;	}
	.oo-deb-action h3 { font-size:14px; margin-top:10px; }
	.oo-deb-action-icon { font-size:20px !important; }
	.oo-deb-action { padding-left:10px;padding-right:10px; }
	.oo-deb-action-row { padding-left:20px; padding-right: 20px; }
}
@media screen and (max-width: 510px)  {
	.oo-deb-action article { padding:10px; }
	.oo-deb-action .btn-circle { width: 40px; height: 40px;	}
	.oo-deb-action-icon { font-size:14px!important; }
	.oo-deb-action h3 { font-size:10px; }
	.oo-deb-action { padding-left:5px;padding-right:5px; }
	.oo-deb-action-row { padding-left:25px; padding-right: 25px; }
}
@media screen and (max-width: 430px)  {
	.oo-deb-action h3 { font-size:8px; }
}

/* fallback: bij heel smal scherm, knoppen onder elkaar positioneren */
@media screen and (max-width: 374px)  {
	.oo-deb-action-row>.col-xs-3,
	#oo-home-shim-loader>.row>.col-xs-3	{
		float:unset!important;
		width:100%!important;
	}
}

@media screen and (max-width: 450px)  {
	.oo-home-callback-text-lbl {
		display:none;
	}
}

.oo-home-face {
	border-radius:50%;
	padding:10px;
	margin:auto;
}

.oo-home-totaal-lopend {
	max-height:unset!important;
}

.oo-home-news-DEB {
	max-height:225px;
	overflow-y:auto;
	overflow-x:hidden;
}

.oo-home-news-OPD {
	max-height:500px;
	overflow-y:auto;
	overflow-x:hidden;
}

.oo-home-slider-p {
	text-align:center;
}

/* tabel valt binnen widget, widget niet te groot laten worden 
   indien tabel groter, zorgen voor een scrollbar */
.oo-home-table {
	max-height:175px;
	overflow-y:auto;
}

/* tabellen bij plots klikbaar */
.oo-home-table-plot>tbody>tr:hover {
	background-color:#F5F5F5;
	cursor: pointer;
}
.oo-home-table-plot-padding {
	padding-top:10px;
}

/* bij een pie afwijken van default, anders wel erg groot */
.oo-plot-pie,
.oo-plot-meter {
	height:200px;
}

/* todo? jqplot totalLabel pakt hij niet */
.oo-plot-donut-inner-label {
	position: absolute; 
	left: 0; 
	top: 0;
	height:100%;
	width:100%;
	font-size:18px;
	margin-top:-9px;
	display:flex;
}

.oo-plot-donut-inner-label-text {
	align-self:center;
	text-align:center;
	width:100%;
	/* margin-top:-160px; */
	z-index:1049;
}

.oo-plot-donut-outer-label {
	text-align:center;
	font-size:18px;
}

@media screen and (max-width: 500px) {
	.oo-plot-donut-outer-label {
		font-size:14px;
	}
}
@media screen and (max-width: 400px) {
	.oo-plot-donut-outer-label {
		font-size:12px;
	}
}

/* maximale hoogte slider smoelen > anders afbeelding heel groot */
.slick-slide { height:250px; }
.slick-slide img { height:200px !important; }

#oo-home-update {
	top:-15px;
	display:none;
}

/****************************************************/
/******************** <DOSSIERS> ********************/
/****************************************************/

/* vinkje achter lopend/gesloten indien zichtbaar in de tabel */
.btn-primary-active-check:after { 
  font-family: 'Glyphicons Halflings';
  font-size:12px;
  content: "\e013"; 
  margin-left:5px;
}

/* voorlopig vaste kleurenset te gebruiken voor kleuren regels table */
/* todo? kleuren volledig meegeven vanuit APPX? */
.oo-dossiers-bg-geel   { background-color: #F9F871; }
.oo-dossiers-bg-oranje { background-color: #FFC27B; }
.oo-dossiers-bg-rood   { background-color: #F6A38E; }
.oo-dossiers-bg-roze   { background-color: #F3A3CD; }
.oo-dossiers-bg-paars  { background-color: #C3A2D3; }
.oo-dossiers-bg-blauw  { background-color: #86B9FF; }
.oo-dossiers-bg-groen  { background-color: #9BDE7E; }
.oo-dossiers-bg-bruin  { background-color: #B1AC88; }


.oo-dossiers-btn, #oo-dossiers-btn-src {
	margin-top:10px;
}

.oo-dossiers-btn-min-width {
	min-width:105px;
}

.oo-dossiers-snelfilter-tooltip {
	padding-top:15px;
	padding-right:5px;
}

/* ivm beperkte ruimte dossierlijst OPD */
.oo-dossiers-width {
	min-width:125px;
	word-break: break-all; 
}

/* responsive maken van tabel met dossiers */
@media screen and (max-width: 1200px) { .oo-dossiers-prio7,.oo-dossiers-prio6,.oo-dossiers-prio5 { display:none; }}
@media screen and (max-width: 992px)  { .oo-dossiers-prio4 { display:none; }}
@media screen and (max-width: 767px)  { .oo-dossiers-prio3 { display:none; }}
@media screen and (max-width: 300px)  { .oo-dossiers-prio2 { display:none; }}

/* responsive maken van tabel homepagina (dus niet volledige breedte zoals oo-dossiers */
@media screen and (max-width: 992px)  { .oo-table-prio5 { display:none; }}
@media screen and (max-width: 600px)  { .oo-table-prio4 { display:none; }}
@media screen and (max-width: 450px)  { .oo-table-prio3 { display:none; }}
@media screen and (max-width: 375px)  { .oo-table-prio2 { display:none; }}

/* 10px ruimte indien saldo en reactie onder elkaar geplaatst */
@media screen and (min-width: 992px) {
    .oo-dossier-spacer {
		display:none;
		margin-top:10px;
	}
}

/* popup dosier ipv uitklappen */
@media (min-width: 850px) 		{ .oo-modal-dossier .modal-dialog { width: auto; min-width:750px; }}
@media (min-width: 992px) 		{ .oo-modal-dossier .modal-dialog { width:950px; }}
@media (min-width: 1050px) 		{ .oo-modal-dossier .modal-dialog { width:1000px; }}
@media (min-width: 1250px) 		{ .oo-modal-dossier .modal-dialog { width:1200px; }}
@media (min-width: 1450px) 		{ .oo-modal-dossier .modal-dialog { width:95%;height:95%; }}
@media (max-width: 850px) 		{ .modal-dialog { width:90%!important; } }
.oo-frm-modal>.modal-dialog { width:90%!important;max-width:1200px; }

/* hoogte beter benutten bij groter scherm */
@media (min-width: 992px) { 
	@media (min-height: 800px) 		{ 
		.oo-modal-dossier .oo-dossier-top-left 			{ height:calc(65vh - 270px);max-height:500px; } 
		.oo-modal-dossier .oo-dossier-bottom-left 		{ height:270px; } 
		.oo-modal-dossier .oo-dossier-bottom-right 		{ height:calc(65vh - 200px);max-height:570px; } 
		.oo-modal-dossier .oo-dossier-bottom-right-full { height:calc(65vh + 48px);max-height:824px; } 
	}
	
	/* maximale hoogte bovenste blok, anders scroll blak erin */
	.oo-dossier-top {
		height:200px;
		overflow-y:auto;
	}
}

/* @media (min-height: 800px) 		{ .oo-modal-dossier .oo-dossier-top { height:225px; } .oo-modal-dossier .oo-dossier-bottom { height:375px; } } */

.oo-modal-dossier tbody td 		{ border-left: 1px solid #dddddd; }
.oo-modal-dossier-closed 		{ height:22px;padding:0px 10px; }
.oo-modal-dossier-closed-img 	{ position:relative;top:-2px;height:32px; }
.oo-modal-dossier-np 			{ padding:0px 10px; }
.oo-modal-dossier-np-active 	{ cursor:pointer; }
.oo-modal-dossier-np-inactive 	{ color:#ddd !important; }
.oo-modal-dossier-title			{ display:inline-block;width:180px;text-align:center; }


/* aantekening standaard hele breedte */
.td_aant {
	width: 100%;
}

/* overrule foutieve marge progressbar jquery-ui */
.ui-progressbar-value { margin: 0px !important; }
.ui-progressbar 	  { width:55px; }

/* default breedte snelfilter smaller */
.search > input {
	width:100px;
}

/* klein scherm > minder marge dan standaard bootstrap ivm dossiertabel */
@media (max-width: 767px) {
	#oo-update-span {
		left: -10px;
	}
	.oo-faq {
		right:-10px;
	}
}

/* klein scherm liepen inputs buiten het scherm, maximaliseren */
@media screen and (max-width: 460px) {
	input,select {
		max-width:175px;
	}
}
@media screen and (max-width: 420px) {
	input,select {
		max-width:150px;
	}
}
@media screen and (max-width: 380px) {
	input,select {
		max-width:120px;
	}
}

/* selecteerknop favoriet in het midden */
#fav_toggle {
	margin-bottom:2px;
}

#oo-src {
	margin-top:10px;
}

#oo-src-table,
#oo-select-table {
	border-bottom:0px;
}

#oo-src-table thead th,
#oo-select-table thead th {
	border-left:0px;
}


#oo-src-table input[data-type="date"],
#oo-select-table-left input[data-type="date"],
#oo-select-table-right input[data-type="date"],
#oo-select-table input[data-type="date"] {
	width:100px;
}
#oo-src-table input[data-type="amount"],
#oo-select-table-left input[data-type="amount"],
#oo-select-table-right input[data-type="amount"],
#oo-select-table input[data-type="amount"] {
	width:80px;
}

#oo-select-loader {
	margin:5px !important;
}

/* + voor detail in het midden van de kolom */
/* not class detail-view ivm uitgeklapte dossier */
#oo-dossiers > tbody > tr:not([class="detail-view"]) > td:nth-child(1) {
	text-align:center;
}

#oo-dossiers-update {
	top:-5px;
	display:none;
}

/****************************************************/
/******************** <DOSSIER> *********************/
/****************************************************/

/* detail-view is uitgeklapt dossier, daar default cursor */
.detail-view {
	cursor:default !important;
}

/* standaard loze ruimte rondom blokken weghalen */
.oo-dossier .col-md-7,.oo-dossier .col-md-5 {
	padding:0px;	
}

/* stijl van de 4 blokken van het dossier */
.entry-widget {
	background: #fff;
	position: relative;
	box-shadow: 2px 2px 8px rgba(45, 45, 45, 0.36);
	margin:0px; 
}

/* witruimte tussen blokken boven en onder*/
.entry-widget-spacer {
	margin-top:5px;
}

/* grijze achtergrond kleur achter de blokken van het dossier */
.oo-dossier {
	background-color:#ddd;
}

.oo-dossier-aant-hr {
	margin-top:5px;
	margin-bottom:5px;
}


/* opmaak afbeelding voor download bijlage */
.oo-dossier-aant-image {
	max-width:unset !important;
	width:30px;
	padding-right:5px;
}

.oo-dossier-aant-left {
	width:100%;
}

.oo-dossier-aant-table {
	margin-bottom:0px;
	/* max-width:500px; */
	width:100%;
}

.oo-dossier-aant-table > tbody > tr > td {
	border:0px;
	line-height:1.4em;
}

/* break bij lange tekst zonder spaties */
.oo-dossier-aant-text {
	/*overflow-wrap: break-word;*/
	word-wrap: break-word;
	word-break: break-word;
}

/* titel dikgedrukt */
.oo-dossier-aant-title {
	font-weight:bold;
}

/* opmaak veld voor zoeken binnen aantekeningen */
.oo-dossier-aant-search {
	width:85px !important;
	float:right;
	margin: -42px 5px 0px;
}

.oo-dossier-aant-full {
	padding:5px
}

.oo-dossier-aant-full .oo-dossier-aant-hr {
	margin-top:2px;
	margin-bottom:2px;
}

.oo-dossier-aant-full .oo-dossier-aant-table {
	max-width:unset;
}

/* afbeelding betaling via iDEAL */
.oo-dossier-ideal {
	float:right;
	margin:10px;
}

/* melding m.b.t. ideal */
.oo-dossier-ideal-msg {
	margin:10px;
	font-size:smaller;
	font-style:italic;
}

/* afbeelding voor download dossier richting pdf */
.oo-dossier-action {
	width:25px;
	font-size:25px;
	float:right;
	margin:10px 5px;
}

/* buttons reactie */
.oo-dossier-react-btn {
	margin:10px;
}

/* tabjes zonder tabel een standaard padding meegeven */
.oo-dossier-padding {
	padding:10px;
}

.oo-dossier-popup-aant>.glyphicon {
	font-size:13px;
}
.oo-dossier-popup-aant:hover>.glyphicon {
	color:#fff;
}


/* zorgen voor ruimte tussen blokken indien onder elkaar of naast elkaar geplaatst */
.oo-dossier-spacer {
	margin-top:5px;
}

.oo-dossier-tab-doss-table {
	cursor:pointer;
}

@media (min-width: 992px) {
	/* maximale hoogte onderste blok, anders scroll blak erin */
	.oo-dossier-bottom {
		height:300px;
		overflow-y:auto;
	}

	.oo-dossier-bottom-right-full {
		height:528px;
	}	
	
	.oo-dossier .col-md-7 {
		padding-right:5px;
	}
	.oo-dossier-spacer {
		margin-top:0px;
	}
}

/* tabjes in het dossierplaatje */
.oo-dossier-tabs .nav-tabs { background: #ffffff; }
.oo-dossier-tabs .nav-tabs li { margin-bottom: 1px; }
.oo-dossier-tabs .nav-tabs li > a { border-radius: 0px; border: medium none; font-size: 14px; font-weight: 500; color: #000; margin: -1px; padding: 15px /*28.32px*/; }
.oo-dossier-tabs .nav > li > a:focus,.oo-dossier-tabs .nav > li > a:hover { background-color: #337ab7; color: #fff; outline: none; }
.oo-dossier-tabs .nav-tabs > li.active > a,.oo-dossier-tabs .nav-tabs > li.active > a:focus,.oo-dossier-tabs .nav-tabs > li.active > a:hover { background-color: #337ab7; color: #fff; border: none; }

/* hoogte regel aanpassen bij saldo om ruimte te sparen
   via important ivm overrule vanuit css bootstrap-table */
.oo-saldo td {
	padding-top:2px !important;
	padding-bottom:2px !important;
}
.oo-saldo i {
	cursor:auto;
}

/* boven totale een streep, important ivm overrule vanuit css bootstrap-table */
.oo-saldo-border {
	border-top:2px solid #737578 !important;
}

/* indien specificatie bij bedrag, laten zien dat hij klikbaar is */
.oo-saldo-spec:hover {
	cursor:pointer;
	background-color:#f5f5f5;
}

.oo-viewer-modal .modal-dialog { 
	width:auto;
	min-width:250px;
	min-height:80%;
}

.oo-viewer-modal object {
	width:75vw;
	min-height:75vh;
}

@media screen and (max-width: 991px) {
	#oo-home-select-right {
		display:none;
	}
}
@media screen and (min-width: 992px) {
	#oo-home-select-left {
		display:none;
	}
}


#oo-home .oo-select-btn {
	vertical-align:right;
}

#oo-home .oo-select-field {
	margin-bottom:5px;
	width:100%!important; /*altijd overrule op klant-css */
	max-width:none;
}

#oo-select .col-md-12,
#oo-select .col-md-6 {
	padding: 0px;
}
#oo-select .table-bordered {
	margin-bottom:0px;	
}

#oo-select .oo-select-field-select {
	max-width:250px;
}

#oo-select #oo-select-per-van, 
#oo-select #oo-select-per-tm,
#oo-select #oo-select-grb-van,
#oo-select #oo-select-grb-tm {
	max-width:80px;
}
#oo-select #oo-select-loc {
	max-width:25px;
}
#oo-select #oo-select-oms {
	min-width:220px;
}

#oo-select .oo-select-btn {
	margin-top:10px;
}

/****************************************************/
/******************** <REGELING> ********************/
/****************************************************/

 @media (min-width: 400px) {
	.oo-regeling-huidig-table thead th:first-child,
	.oo-regeling-huidig-table tbody td:first-child {
		min-width:175px;
	}
	.oo-regeling-huidig-table thead th:nth-child(2),
	.oo-regeling-huidig-table tbody td:nth-child(2) {
		width:100%
	}
 }

#oo-regeling-huidig .bootstrap-table {
	padding-bottom:20px;
}

#oo-regeling-dossiers {
	padding-bottom:20px;
}

#oo-regeling-snel {
	margin:0px;
	display:block;
}

#oo-regeling-snel article {
	text-align:center;
	padding:15px;
}

#oo-regeling-snel hr {
	margin-top:10px;
	margin-bottom:10px;
}

#oo-regeling-snel .row {
	margin:0px;
}

#oo-regeling-snel article:hover {
	cursor:pointer;
	background-color:#f5f5f5;
}

.oo-regeling-snel-div {
	display:none;
}

#oo-regeling-snel-form-alert {
	font-weight:normal;
	font-style:italic;
	margin-bottom:10px;
}


 @media (max-width: 400px) {
	#oo-regeling-dossiers-table thead th:nth-child(2),
	#oo-regeling-dossiers-table tbody td:nth-child(2) {
		display:none;
	}
 }

/****************************************************/
/******************** <INVOER> *********************/
/****************************************************/

.oo-invoer-hide {
	display:none;
}

.oo-invoer-done {
	display:none;
}
.oo-invoer-max {
	font-size:10px;
	vertical-align:top;
}
.oo-invoer-bijl-table td {
	padding:5px;
}

/****************************************************/
/******************** <ACCOUNT> *********************/
/****************************************************/

.oo-account-collapse-icon {
	margin-top:5px;
	float:right;
}
.oo-account-cp-div {
	margin-bottom:10px;
}
.oo-account-cp-modal .col-md-5,
.oo-account-cp-modal .col-md-7 {
	padding:0px;
}

.oo-account-cp-modal .oo-input-first {
  min-width: 160px;
}

#oo-account-totp-qr img {
	margin:0px 0px 20px 0px!important;
	display:inline!important;
}	
#oo-account-totp-text {
	font-style:italic;
	font-size:12px;
}

@media (min-width: 768px) 		{ .oo-account-cp-modal .modal-dialog { width: auto;padding-left:25px;padding-right:25px; }}
@media (min-width: 992px) 		{ .oo-account-cp-modal .modal-dialog { width:900px; }}
@media (min-width: 1050px) 		{ .oo-account-cp-modal .modal-dialog { width:1000px; }}
@media (min-width: 1250px) 		{ .oo-account-cp-modal .modal-dialog { width:1100px; }}

/****************************************************/
/********************** <PAY> ***********************/
/****************************************************/

.oo-pay-alert{
	float:left;
	margin-top:5px;
	margin-right:10px!important;
	font-size:20px;
}

.oo-pay-alert-txt {
	margin-bottom:10px;
	float:left;
	font-size:12px;
	text-align:left;
	max-width:275px;
}

.oo-pay-extra-icon {
	color:gray;
	padding-bottom:5px;
	cursor:pointer;
}

.oo-pay-extra-icon-active {
	color:#337ab7;
}

.oo-pay-extra-td-icon {
	padding-right:10px;
}

.oo-pay-extra-tr {
	cursor:pointer;
}

.oo-pay-footer {
	text-align:right;
}

/* indien boxjes naast elkaar, gelijke hoogte */
@media screen and (min-width: 992px) {
	#oo-pay article {
		min-height:285px;
	}
}

/****************************************************/
/********************** <FRM> ***********************/
/****************************************************/

.oo-frm-btn-submit {
	float:right;
}

.oo-frm-hide {
	display:none;
}

.oo-frm-left {
	padding:0px 10px 0px 0px;
}

.oo-frm-right {
	padding:0px;
}

.oo-frm-right > textarea {
	min-height:120px;
	width:100%;
}

/* .oo-frm-right > input {
	min-width: 200px;
} */
.oo-frm-send .oo-frm-right {
	min-height:40px;
}

.oo-frm-show {
	display:auto;
}

.oo-tbl-tooltip {
	margin-left:5px;	
}

#oo-frm .oo-login-alert, 
#oo-exp .oo-login-alert {
	margin-top:0px;
}

#oo-frm-loader {
	float:right;
	margin:10px !important;
}

#oo-frm-qii-code {
	font-style:normal;
	
}

.oo-frm-qii-refresh {
	padding-top:15px;
	width:200px;
	cursor:pointer;
}

.oo-frm-qii-refresh-loader {
	display:inline-block!important;
	height:20px;
	width:20px;
}

.oo-frm-qii-digit {	
	 margin-right:10px;
	 font-size:30px;
	 padding:5px;
	 border:1px solid #ddd;
	 border-radius: 5px;
	 box-shadow: 2px 2px 2px #ddd;
}

.oo-frm-qii-succes {
	margin-right:10px;
	font-style:normal;
	font-weight:bold;
	font-size:25px;
}

.oo-frm-qii-succes-icon {
	font-size:25px;
	color:green!important;
}

/****************************************************/
/********************** <FRM> ***********************/
/****************************************************/

/* indien boxjes naast elkaar, gelijke hoogte */
@media screen and (min-width: 992px) {
	.oo-exp-article {
		min-height:335px;
	}
}

.oo-exp-icon {
	margin-top:5px;
	font-size:25px !important;
	color:white !important;
}

.oo-exp-icon-line {
	border-top:5px solid lightgray;
	width:55px;
	margin-left:100px;
	margin-top:35px;
	position:absolute;
}

.oo-exp-icon-line-active {
	border-color:#337ab7;
}

#oo-exp-voortgang-body-hor {
	text-align:center;
	margin-top:25px;
	margin-bottom:25px;
}

#oo-exp-voortgang-body-hor .btn-circle { 
	width: 75px; 
	height: 75px; 
	margin-left:25px;
	margin-right:25px;
}

#oo-exp-voortgang-body-hor .btn-circle-inactive { 
	background-color:lightgray;
	border-color:lightgray;
}

/* voortgangsbalk exploot responsive maken */
@media screen and (max-width: 1200px) {
	#oo-exp-voortgang-body-hor .btn-circle { width: 60px; height: 60px;	}
	.oo-exp-icon-line { margin-top:28px;margin-left:85px; }
	.oo-exp-icon { font-size:20px !important; }
}
@media screen and (max-width: 630px) {
	#oo-exp-voortgang-body-hor .btn-circle { margin-left:15px;margin-right:15px; }
	.oo-exp-icon-line { margin-left:75px;width:35px; }
}
@media screen and (max-width: 550px) {
	#oo-exp-voortgang-body-hor .btn-circle { width: 50px; height: 50px; margin-left:10px;margin-right:10px; }
	h3 { font-size:18px; }
	.oo-exp-icon-line { margin-top:23px;margin-left:60px; width:25px; }
	.oo-exp-icon { font-size:16px !important;width:35px; }
}
@media screen and (max-width: 470px) {
	#oo-exp-voortgang-body-hor .btn-circle { width: 40px; height: 40px; margin-left:5px;margin-right:5px; }
	.oo-exp-icon-line { margin-top:18px;margin-left:45px; width:15px; }
	.oo-exp-icon { font-size:14px !important;width:25px; }
}
@media screen and (max-width: 410px) {
	#oo-exp-voortgang-body-hor .btn-circle { width: 35px; height: 35px; margin-left:3px;margin-right:3px; }
	.oo-exp-icon-line { margin-top:16px;margin-left:38px; width: 11px; }
	.oo-exp-icon { font-size:12px !important;width:20px; }
}

/* todo? smal scherm: switch naar verticale voortgang? voorlopig alleen tabel tonen */
@media screen and (max-width: 374px) {
	#oo-exp-voortgang-body-hor { display:none }
}

/****************************************************/
/********************** <USR> ***********************/
/****************************************************/

/* FINANCE */
#oo-finance .detail-view {
	border-top: 1px solid #ddd;
	background-color: #f5f5f5;
}
#oo-finance .detail-view .col-md-6 {
	padding-left:0px;
	padding-right:0px;
}

#oo-finance .detail-view table>tbody>tr>td:nth-child(1) {
	min-width:140px;
}

#oo-finance .detail-view table>tbody>tr>td:nth-child(2) {
	font-weight:bold;
	width:100%;
}