/************************************************************/
/***********************   MAIN LAYOUT  *********************/
/************************************************************/

#zol_header {
	width: 100%;
	height: 80px;
	background-color: white;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 1px solid #999999;
	overflow: hidden;
	display:flex;
	box-sizing: border-box;
}

#zol_header_avatar {
	background-color: #FBFBFB;
	border-right: 1px solid #EEE;
}

#zol_header_avatar .notifications {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

#zol_header_menu {
	flex: 1;
	min-width: 0px;
}

#menu-container .menu-item {
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#menu-container .menu-item .badge {
	position: absolute;
	bottom: 0px;
	right: -10px;
	color: white !important;
}

#zol_content {
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}

#zol_inhoud {
	width: 100%;
	height: calc(100% - 95px);
}

#d1 {
	width: calc(100% - 42px);
	height: calc(100% - 42px);
	background: #FFFFFF; 
	border-radius: 10px;
	border: 1px solid #999999;
	padding: 20px;	
}

#menulinks {
	
	position:relative;
	top:0px;
	width: 140px; 
	height: calc(100% - 4px);
	background-color: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #999999;
	float:left;
}

#midden {
	width: calc(100% - 198px);
	height: calc(100% - 42px);
	float: right;
	border-radius: 10px;
	border: 1px solid #999999;
	background: #FFFFFF;
	padding: 20px;
}

/************************************************************/
/********************       FRAMES       ********************/
/************************************************************/

html,
body {
	margin: 0px !important;
	height: 100%;	
	width: 100%;
}

.zol_fixed {
	position: fixed;
}

iframe {
	border: 0px;	
}

form {
	margin : 0px !important;
}

input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #AAAAAA;
	border-radius: 4px;
	font-size: 11px;
	height: 20px;
	outline: none;
}

input:disabled {
	background-color: #EEE;
}

textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #AAAAAA;
	border-radius: 4px;
	font-size: 11px;
	outline: none;
}

select{
    border: 1px solid #CCCCCC;
}

input, select, textarea{
    color: #666666 !important;
}

.zol_iframe {
	width: 100%;
	height: 100% !important;
}

.zol_iframe_large {
	width: 100%;
	height: 100%;
}

/************************************************************/
/********************   ACHTERGRONDEN    ********************/
/************************************************************/

.bg-login {
	overflow: hidden;
	display: flex;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(https://admin.zorgonline.be/zol_includes/images/background.png), linear-gradient(161deg, rgb(247 247 247) 0%, rgb(113 138 146) 100%);
	background-position: center;
}

.bg-main {
	overflow: hidden;
	display: flex;
	background-image: linear-gradient(315deg, rgb(209 237 247) 0%, rgb(140 190 208) 100%);

}

.zol_bg_red {
	background-color: #F6CECE;
}

.zol_bg_orange {
	background-color: #F9BF6A;
}

.zol_bg_yellow {
	background-color: #FEFF97;
}

.zol_bg_green {
	background-color: #CEF6CE;
}

.zol_bg_lightgreen {
	background-color: #E6FAE6;
}

.zol_bg_blue {
	background-color: #B7D4F5;
}

.zol_bg_lightblue {
	background-color: #DEEDFF;
}

.zol_bg_grey {
	background-color: #EEEEEE;
}

.zol_info {
	width: 80%;
	margin-left: 10%;
	padding: 20px;
	border-top: 7px solid #6AC4DE !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
	text-align: -webkit-center;
}

.zol_warning {
	
	width: 80%;
	margin-left: 10%;
	padding: 20px;
	
	border-top: 7px solid #E14444 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;

	text-align: -webkit-center;
}

/************************************************************/
/**************************   BADGE  ************************/
/************************************************************/


/************************************************************/
/*************************   AVATAR  ************************/
/************************************************************/
.avatar {
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid #EEEEEE;
}

.initials {
	border-radius: 50%;
	background-color: #6AC4DE;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 23px;
	color: white;
}

/************************************************************/
/************************   EDITOR  ************************/
/************************************************************/

textarea.zol_editor {
	height: 250px;
}

/*
.zol_editor {
	width: 100%;
	height: 50%;
	min-height: 250px;
	max-height: 400px;
}

.mce-container-body .mce-edit-area {	
	height: calc(100% - 30px);
	min-height: 250px;
	max-height: 400px;
}
.mce-edit-area iframe {	
	height: 100% !important;
}

.mce-fullscreen {
	height: 100% !important;
	box-sizing: border-box !important;
    border: 1px solid #AAA !important;
}

.mce-fullscreen .mce-edit-area {
	height: calc(100% - 30px) !important;
	max-height: none;
}

.tinymce-content span,
.tinymce-content table {
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
	font-size: 11px;
}

.tinymce-content table {
	width: 95% !important;
	height: unset !important;
	margin: 5px auto;
}
*/

/************************************************************/
/**************************   TEXT  *************************/
/************************************************************/

.unread div,
.unread p,
.unread a {
	color: #E06060 !important;
}

.text-empty {
	height: 100%;
	font-style: italic;
	text-align: center;
	padding: 20px;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/*
.underline {
	border-bottom: 1px solid #9a9a9a;
    box-shadow: 0px 1px 0px 0px #eeeeee;
    padding-bottom: 10px;
	margin-bottom: 20px;
}
*/

.zol_page_content {
	font-size: 11px;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

/************************************************************/
/********************* UITSCHUIFMENU  ***********************/
/************************************************************/

.zol-menu {
	cursor: pointer;
	position: relative;
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
}

.zol-submenu {
	cursor: pointer;
	position: absolute;
	margin-top: 15px;
	width: 100%;
	z-index: 100;
}

.zol-submenu-item {
	cursor: pointer;
	padding: 10px;
	border: 1px solid #999;
	border-top: unset;
	background-color: white;
}

.zol-submenu-item:hover {
	background-color: #EEE;
}


.zol-submenu-item:first-child {
	border-top: 1px solid #999;
}

.zol-submenu-item:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


/************************************************************/
/********************   TEKST / HEADERS  ********************/
/************************************************************/

.zol_title {	
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;
}

p.zol_title {
	margin: 0px;
	padding-top: 10px !important;
	padding-bottom: 25px !important;
	text-align: center;
}

.zol_subtitle {
	margin: 0px;
	padding-bottom: 5px !important;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;
	text-align: center;
}

.zol_title_left {
	
	margin: 0px;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	
	text-align: left;
    width: 95%;
    margin-left: 2.5%;
	margin-bottom: 20px;
	border-bottom: 1px solid #666;
	
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;

}

.zol_title_menu {
	width:100%;
	text-align: center;
	margin: 0px;
	padding-top: 0px !important;
	padding-bottom: 15px !important;
}

.zol_ellipsis {
	/* padding-left: 10px; */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zol_navigation_left {
	position:absolute;
	top:0px;
	left:20px;	
}

.zol_navigation_right {
	position:absolute;
	top:0px;
	right:20px;	
}

/* SPECIFIEKE STIJL VOOR TEKST UIT TINYMCE */
.zol_editor_content ul li {
	margin: 0.5em 0;
}

.zol_editor_content ul li span {
	background-color: unset !important;
}

/* TITEL */
.styletitel { 
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

/* TEKST */
.styletekst {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/* TEKST - KLEIN */
.styletekstklein {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

/* TEKST - ROOD */
.styletekstrood {
	color: #E14444 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/* TEKST - ROOD - KLEIN */
.styletekstkleinrood {
	color: #E14444 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

/* TEKST - WIT */
.styletekstw {
	color: #FFFFFF !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
}

/* TEKST - WIT - KLEIN */
.styletekstwklein {
	color: #FFFFFF !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

/* TEKST EXTRA KLEIN */
.styletekstxklein {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
}

/* TEKST - ZWART */
.zol_tekst_zwart {
	color: black !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.zol_center_container {	
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: -10
}

.zol_center_content {
	position: relative;
	top: 50%;
	text-align: center;
	font-style: italic;
	
}

/************************************************************/
/********************   HTML ELEMENTEN   ********************/
/************************************************************/

/* TABELLEN */

table.zol_table {
	border: 0px;
}

table.zol_table_border {
	border:1px solid;
	border-color: #999999;
	text-align: center;
	border-collapse: collapse;
}

table.zol_table_border_fixed {
	border: 1px solid;
	border-color: #999999;
	text-align: center;
	border-collapse: collapse;
	table-layout: fixed;
	height: 95%;
}

/*
.zol_table .zol_row td,
.zol_table .zol_row_alternate td,
.zol_table_border .zol_row td,
.zol_table_border .zol_row_alternate td {
	padding: 10px;
}
*/

tr.zol_row_header{
	background-color: #6AC4DE !important;
	color: #FFFFFF !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	height: 20px;
}

tr.zol_row_header_small{
	background-color: #6AC4DE !important;
	color: #FFFFFF !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px; 
	font-weight: bold;
	text-align: center;
	height: 20px;
}

tr.zol_row, tr.zol_row_alternate {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 25px;
}

tr.zol_row.unread,
tr.zol_row_alternate.unread,
tr.zol_row.unread a,
tr.zol_row_alternate.unread a {
	color: #E06060 !important;
}

tr.zol_row_alternate:nth-child(odd), tbody.zol_row_alternate_body:nth-of-type(odd), tr.alternate:nth-of-type(odd) { /* ALTERNERENDE KLEUREN */
	background-color: #eeeeee;
}

tr.zol_row_header svg.zol_icon_table {
	fill: #FFFFFF;
	width:14px;
	height:14px;
}

.unread svg.zol_icon_table {
	fill: #E14444;
}

tr.zol_row_form{
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height:40px;
}

tr.row_sub:hover{
	background-color: #DBF2FF !important;
}

table.zol_table tr td {
	border: 0px;
	padding: 0;
	border-collapse: collapse;
}

.zol_td_label {
	
	font-weight: bold;
	
}

/* ANCHORS */
a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #666666;
	cursor:pointer !important;
}

/* LIJNEN */
hr {
	size:1px;
	color:#eeeeee;
}

/* TEXTAREA */
.zol_textarea_container {
	border: 1px solid #999;
	outline: none;
	height: 50px;
	width: calc(100% - 20px);
	padding: 10px;
	border-radius: 15px;
	background-color: white;
}

.zol_textarea_content {
	float: left;
	width: calc(100% - 50px);
}

.zol_textarea_button_container {
	display: table;
	float: right;
	width: 30px;
	height: 100%;
}

.zol_textarea_button {
	display: table-cell;
	vertical-align: middle
}

.zol_textarea {
	border: none;
	outline: none;
	height: 100%;
	width: 100%;
	resize: none;
}

/*  SELECT MENU */
.ui-selectmenu-menu li {
	color: #666666 !important;
	background-color: white;
	font-size: 11px;
	border: 1px solid #AAAAAA;
	border-top:none;
	padding: 10px;
}

.ui-selectmenu-menu li:hover {
	background-color: #EEEEEE;
}

/************************************************************/
/********************      PAGINA'S      ********************/
/************************************************************/

/* AGENDA */
.zol_agenda {
	padding: 0px 20px 20px;
	height: calc(100% - 20px);
}

.view-month .zol_agenda_checkbox {
	position: absolute;
	right: 6px;
	top: 6px;
	z-index: 100 !important;
}

.view-month .fc-content {
	width: calc(100% - 20px);
	position: relative;
	z-index: 2;
}

.view-week .zol_agenda_checkbox,
.view-day .zol_agenda_checkbox {
	float: left;
	margin-right: 5px;
	z-index: 100 !important;
}

.view-week .fc-content,
.view-day .fc-content {
	width: 100%;
	position: relative;
	z-index: 2;
}

.view-week .fc-time,
.view-day .fc-time {
	padding: 3px 0;
}

.zol_agenda_list_checkbox {
	vertical-align: middle !important;
	width: 20px;
}

.zol_agenda_legende {
	position:absolute;
	border:1px solid #AAA;
	border-radius: 0.5em;
	top:0px;
	left:20px;
	padding:10px
}

.zol_agenda_status {
	width: 15px;
	height: 15px;
	display: inline-block;
	border-radius:10px;
}

.zol_agenda_status_small {
	width:10px;
	height:10px;
	display: inline-block;
	border-radius:10px;
}

/* HOOFDSCHERM */
.zol_container_nieuws_1 { /* LAYOUT 1 */
	width: 100%;
	height: 50%;
	float: left;
}

.zol_tabs_nieuws_1 {
	padding: 0px !important;
	margin-bottom: 10px;
	width: 100%;
	height: calc(100% - 10px) !important;
}

.zol_container_daginfo_1 {	
	width: 50%;
	height: 50%;
	float: right;
}

.zol_tabs_daginfo_1 {	
	padding: 0px !important;
	margin: 10px 0px 0px 10px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_groepen_1 {	
	width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_groepen_1 {
	padding: 0px !important;
	margin: 10px 10px 0px 0px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_nieuws_2 { /* LAYOUT 2 */
	width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_nieuws_2 {
	padding: 0px !important;
	margin: 0px 10px 10px 0px;
	width: calc(100% - 10px);
	height: calc(100% - 10px) !important;
}

.zol_container_daginfo_2 {
	width: 50%;
	height: 100%;
	float: right;
}

.zol_tabs_daginfo_2 {
	padding: 0px !important;
	margin-left: 10px;
	width: calc(100% - 10px);
	height: 100%;
}

.zol_container_groepen_2 {
	width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_groepen_2 {
	padding: 0px !important;
	margin: 10px 10px 0px 0px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_nieuws_3 { /* LAYOUT 3 */
	width: calc(100% - 350px);
	min-width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_nieuws_3 {
	padding: 0px !important;
	width: calc(100% - 10px) !important;
	height: calc(100% - 10px) !important;
}

.zol_container_wie_3 {
	width: 350px;
	max-width: 50%;
	height: 50%;
	float: right;
}

.zol_container_daginfo_3 {
	width: 50%;
	height: 50%;
	float: right;
}

.zol_tabs_daginfo_3 {
	padding: 0px !important;
	margin: 10px 0px 0px 10px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_tabs_wie_3 {
	padding: 0px !important;
	margin: 0px 0px 10px 10px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_groepen_3 {
	width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_groepen_3 {
	padding: 0px !important;
	margin: 10px 10px 0px 0px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_nieuws_4 { /* LAYOUT 4 */
	width: 50%;
	height: 50%;
	float: right;
}

.zol_tabs_nieuws_4 {
	width: calc(100% - 10px);
	height: calc(100% - 10px) !important;
	margin: 0px 0px 10px 10px;
	padding: 0px !important;
}

.zol_container_daginfo_4 {
	width: 50%;
	height: 50%;
	float: right;
	clear: right;
}

.zol_tabs_daginfo_4 {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	padding: 0px !important;
	margin: 10px 0px 0px 10px;
} 

.zol_container_groepen_4 {
	width: 50%;
	height: 100%;
}

.zol_tabs_groepen_4 {
	padding: 0px !important;
	width: calc(100% - 10px);
	height: 100%;
}

.zol_container_nieuws_netwerk { /* LAYOUT NETWERK */
	width: 100%;
	height: 50%;
	float: right;
}

.zol_tabs_nieuws_netwerk {
	width: 100%;
	height: calc(100% - 10px);
	margin-bottom: 10px;
	padding: 0px !important;
}

.zol_container_daginfo_netwerk {
	width: 50%;
	height: 50%;
	float: right;
}

.zol_tabs_daginfo_netwerk {
	padding: 0px !important;
	margin: 10px 0px 0px 10px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.zol_container_facturatie_netwerk {
	width: 50%;
	height: 50%;
	float: left;
}

.zol_tabs_facturatie_netwerk {
	padding: 0px !important;
	margin: 10px 10px 0px 0px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.ui-tabs {
	overflow: auto;
}

.zol_tab_hoofdscherm {
	height: calc(100% - 70px);
	margin-right: 5px;
}

/* POSTIT'S */
.postit {
	line-height: 1;
	text-align:center;     
	width: 175px;
	margin: 25px;    
	height:150px;
	position:relative;   
	border:1px solid #E8E8E8;  
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;      
	border-bottom-right-radius: 60px 5px;
	display:inline-block;    
	background: #ffff88;
	background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
	background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
.postit:after {     
	content: "";
	position:absolute;
	z-index:-1;
	right:-0px; bottom:10px;
	width:155px;
	height: 25px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
	-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

/************************************************************/
/********************       JQUERY       ********************/
/************************************************************/

/* MENU */
.zol_menu_left {
	position: relative;
	top: 0px;
	width: 140px;
	height: 100%;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #999999;
	float: left;
}

.zol_menu_left .zol_menu_container {
	display: flex;
	flex-direction: column;
}

.zol_menu_item {
	height: 50px;
	padding-bottom: 1em;
	text-align: center;
	cursor: pointer;
}

.zol_menu_item:first-child {
	padding-top: 20px;
}

.zol_menu_item:last-child {
	padding-bottom: 20px;
}

.zol_menu_item .label {
	padding: 0.3em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	color: #666666 !important;
}

.zol_menu_item svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: #6AC4DE;
	stroke-width: 1px;
}

.zol_list_submenu {
	width: max-content;
	top: 0px;
    left: 137px;
}

.zol_list_submenu li {
	background-color: #FFFFFF;
	border: 1px solid #989898;
    border-top: 0px;
	line-height: 30px;
    text-align: left;
	padding: 0.5em 2em 0.5em 1em;
}

.zol_list_submenu a:first-child li {
	border-top: 1px solid #989898;
	border-top-right-radius: 5px;
}

.zol_list_submenu a:last-child li {
	border-bottom-right-radius: 5px;
}

.zol_list_submenu li:hover {
	background-color: #eeeeee;
}

.zol_list_submenu svg {
	stroke: none;
	float: left; 
	width: 18px;
	height: 30px;
	fill: #6AC4DE;
	padding-left: 10px;
	padding-right: 10px;
}

.zol_menu_content {
	background: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #999999;
	box-sizing: border-box;
	float: right;
	height: 100%;
	padding: 20px;
	width: calc(100% - 150px);
}

/* DATEPICKER */
.datepicker {
	outline: none;
	width: calc(100% - 20px);
}

/* DRAGGABLE */
.zol_draggable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	color: #666666 !important;
	padding: 10px;
	border: 1px solid #6AC4DE;
	/*
	border: 1px dashed #09C0EA;
	*/
	background-color: white;
}

.zol_sortable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	color: #666666 !important;
	/*
	border: 1px dashed #09C0EA;
	*/
	border: 1px solid #6AC4DE;
	background-color: white;
	padding: 5px;
}

.zol_sortable_placeholder {
	background: #DBF2FF !important;
}

/* ACCORDION */
.zol_accordion, .zol_accordion_inactive {
	width: 95% !important;
	margin-left: 2.5% !important;
	padding-top: 5px !important;
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
}

.zol_accordion_header {
	margin-top: -1px !important;
	padding: 10px !important;
	background-color: #F9F9F9;
}

.zol_accordion_header.ui-accordion-header-active {
	background-color: #F5F5F5;
	color: #666666 !important;
	font-weight: bold !important;
}

.ui-accordion-content {
	padding: 30px !important;
}

/* PROGRESS */
.zol_progress_bar {

	height:20px;
	background-color:#F6CED8 !important;
	border: 1px solid #999999;
}

.ui-progressbar-value {
	background-color:#CEF6D8 !important;
	border-right: 1px solid #999999;
}

/* DROPZONE */
.zol_dropzone {
	min-height: 150px;
    border: 0px solid rgba(0, 0, 0, 0.3);
    background: white;
    background-image: url(../img/upload.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120px 80px;
	text-align: center;

}

/* SCROLLBAR */
.zol_scrollbar {
	height: 100%;
}

/* TABS */
.zol_tabs {
	padding: 0px !important;
	margin: 0px 20px 0px 20px !important;
	overflow: hidden !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666 !important;
	/*
	-webkit-box-shadow:inset 0px 0px 0px 1px #AAAAAA;
	-moz-box-shadow:inset 0px 0px 0px 1px #AAAAAA;
	box-shadow:inset 0px 0px 0px 1px #AAAAAA;
	*/
	border: 1px solid #AAAAAA;
}

.zol_tabs .ui-tabs-nav {
	border-bottom: 1px solid #AAAAAA;
	margin-top: 0px !important;
    margin-bottom: 0px;
	-webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
}

.zol_tabs .ui-tabs-nav li {
	border: unset;
    border-right: 1px solid #AAAAAA;
}

.zol_tabs .ui-tabs-nav li.zol_tabs_button {
	border: unset;
}

.zol_tabs .ui-tabs-nav li.ui-tabs-active {
    background-color: white;
    font-weight: bold;
    border-bottom: unset;
}

.ui-tabs-anchor,
.zol_tabs .ui-tabs-anchor {
	min-height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zol_tabs .ui-tabs-anchor .icon {
	margin-left: 0.5em;
}

.zol_tabs .ui-tabs-anchor .icon svg {
    width: 15px;
    height: 15px;
    fill: #6AC4DE;
}

.zol_tabs_button {
	float: right !important;
	cursor: pointer;
	margin: 5px 5px 0 0;
}

.zol_tabs_navigation {
	padding: 0 0.25em !important;
	float: right !important;
	cursor: pointer;
}

.zol_tabs_hoofdscherm {
	padding: 0px !important;
	-webkit-box-shadow:inset 0px 0px 0px 1px #AAAAAA;
	-moz-box-shadow:inset 0px 0px 0px 1px #AAAAAA;
	box-shadow:inset 0px 0px 0px 1px #AAAAAA;
}

.zol_tabs ul li {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.ui-tabs-nav {
	-webkit-box-shadow:inset 0px 0px 0px 1px #aaaaaa;
	-moz-box-shadow:inset 0px 0px 0px 1px #aaaaaa;
	box-shadow:inset 0px 0px 0px 1px #aaaaaa;
}

.zol_tab_blink {
 -webkit-animation:	zol_blink_effect 1s infinite; /* Safari 4+ */
  -moz-animation:	zol_blink_effect 1s infinite; /* Fx 5+ */
  -o-animation:		zol_blink_effect 1s infinite; /* Opera 12+ */
  animation:		zol_blink_effect 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes zol_blink_effect {
	
	0%, 49% {
		background-color: #FF9800;
		border-bottom: 1px solid #AAAAAA;

	}
	
	50%, 100% {
		background-color: #F5F5F5;
		border-bottom: 1px solid #AAAAAA;
	}
}

/* DIALOG */
.ui-dialog {
	/*
	border-top: 7px solid #09C0EA;
	*/
	border-top: 7px solid #6AC4DE;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.ui-dialog .ui-dialog-content {
    padding: 0 !important;
}

div.ui-dialog-titlebar {
	background: none !important;
	min-height: 20px;
}

/* TOOLTIP */
.zol_tooltip {
	border: 1px solid #AAAAAA !important;
	padding: 10px !important;
	pointer-events: none;
}

/* SELECT */
.zol_select {
	border: 1px solid #AAAAAA !important;
	padding: 10px !important;
}


/* MULTISELECT */
/*
.ms-container .ms-list{ 
	height: calc(100% - 32px) !important;
}

.ms-selectable, .ms-selection {
	height: 100%
}

.zol_multi_label {
	background-color: #6AC4DE;
	color: #FFFFFF;
	font-size: 9px;
}
*/

.zol_multi_container {
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 40px;
	height: calc(100% - 80px);
}

/* FIELDSET */
.zol_fieldset{
	border: 1px dashed #AAAAAA;
	border-radius: 10px;
	margin: 20px 20px 40px 20px;
	text-align: left;
}

.zol_fieldset_legend {
	padding-left:5px;
	padding-right: 5px;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;
}

/* MENU'S */
li.zol_submenu_item a {
	display: block;
}

.zol_submenu_item {
	line-height: 30px;
	list-style-type:none;
	text-align: left;
	background-color:white;
	color: #666666 !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-right: 1em;
}

.zol_submenu_item_top {
	border: 1px solid #989898;
	border-top-right-radius: 5px;		
}

.zol_submenu_item_middle {
	border: 1px solid #989898;
	border-top: 0px;
}

.zol_submenu_item_bottom {
	border: 1px solid #989898;
	border-top: 0px;
	border-bottom-right-radius: 5px;		
}

.zol_submenu_item_single{
	border: 1px solid #989898;
	border-top-right-radius: 5px;		
	border-bottom-right-radius: 5px;		
}

.zol_submenu_item_square {
	border: 1px solid #989898;
	border-bottom: 0px;
}

.zol_submenu_item_square_full {
	border: 1px solid #989898;
}

.zol_submenu_item_top:hover,
.zol_submenu_item_middle:hover,
.zol_submenu_item_single:hover,
.zol_submenu_item_square:hover,
.zol_submenu_item_square_full:hover,
.zol_submenu_item_bottom:hover  {
	background-color:#eeeeee;
}

.zol_submenu_links {
	width:185px !important;
	left:138px !important;
	top:0px !important;
}

.zol_submenu_midden {
	width: max-content;
	left:25px !important;
	top:0px !important;
}

/* TOGGLE BUTTON */
.switch, .switch_disabled {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 10px;
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	transition: all 0.3s;
}

.switch::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background-color: white;
	top: 1px;
	left: 1px;
	transition: all 0.3s;
}

input[type='checkbox']:checked + .switch::after {
	transform: translateX(10px);
}

input[type='checkbox']:checked + .switch {
	background-color: #6AC4DE;
}

.offscreen {
  position: absolute;
  left: -9999px;
}

.ui-state-focus, .ui-tabs-nav li a:focus { outline: none; } /* BLAUWE RAND NIET TONEN BIJ ACTIEVE ITEMS */

/************************************************************/
/********************        ICONS       ********************/
/************************************************************/

img {
	border:0px;
}

svg.zol_icon_title,
svg.zol_icon_table,
svg.zol_icon_add,
svg.zol_icon_delete,
svg.zol_icon_edit {
	cursor: pointer;
}

svg.zol_icon_top_menu {
	width:35px;
	height:35px;
	fill: none;
	stroke-width: 1px;
	stroke: #6AC4DE;
}

svg.zol_icon_top_menu_small {
	width:25px;
	height:25px;
	fill: none;
	stroke-width:1px;
	stroke: #6AC4DE;
}

svg.zol_icon_left_menu, svg.zol_icon_navigation {
	width:25px;
	height:25px;
	fill: none;
	stroke-width:1px;
	stroke: #6AC4DE;
}

svg.zol_icon_header {
	width: 15px;
	height: 15px;
	fill:#FFFFFF;
	vertical-align:bottom;
}

svg.zol_icon_title {
	width:20px;
	height:20px;
	fill: #6AC4DE;
	vertical-align:bottom;
}

svg.zol_icon_inline {
	width:18px;
	height:18px;
	fill: #6AC4DE;
	vertical-align: bottom;
}

svg.zol_icon_small {
	width:15px;
	height:15px;
	fill: #6AC4DE;
	vertical-align: bottom;
}

svg.zol_icon_medium {
	width: 25px;
	height: 25px;
	fill: #6AC4DE;
	vertical-align: bottom;
}

svg.zol_icon_large {
	width:40px;
	height:40px;
	fill: #6AC4DE;
	vertical-align: bottom;
}


svg.zol_icon_xlarge {
	width: 100px;
	height: 100px;
	fill: #ECECEC;
	vertical-align: bottom;
}

svg.zol_icon_xsmall {
	width:10px;
	height:10px;
	fill: #6AC4DE;
	vertical-align: bottom;
}

.unread svg.zol_icon_inactive,
svg.zol_icon_inactive {
	fill: #CCCCCC !important;
}

svg.zol_icon_left_menu_inactive{
	
	fill: #CCCCCC !important;
	width:25px;
	height:25px;
}

svg.zol_icon_active{
	fill: #FF9800 !important;	
}

svg.zol_icon_read {
	fill: #6AC4DE;

}

.unread svg,
svg.zol_icon_unread{
	fill: #E14444 !important;
}

svg.zol_icon_table {
	width: 18px !important;
	height: 18px !important;
	fill: #6AC4DE;
	vertical-align: bottom;
}

svg.zol_icon_table:hover {
	fill: #FF9800;
}

svg.zol_icon_tab {
	width: 15px;
	height: 15px;
	vertical-align: bottom;
	fill: #6AC4DE;
}

svg.zol_icon_add {
	fill :#57c757  !important;
}

svg.zol_icon_add:hover {
	fill: #12BC12;		
}

svg.zol_icon_checked {
	width: 20px;
	height: 20px;
	stroke: #57C757;
}

svg.zol_icon_checked_white {
	width: 27px;
	height: 27px;
	stroke: #FFFFFF;	
}

svg.zol_icon_agenda {
	width: 20px;
	height: 20px;
	stroke: #666666;	
}

svg.zol_icon_unchecked {
	width: 20px;
	height: 20px;
	stroke: #E06060;
	/* stroke: #E14444; */
}

svg.zol_icon_unchecked_white {
	width: 27px;
	height: 27px;
	stroke: #FFFFFF;
}

svg.zol_icon_checked_inactive {
	width: 20px;
	height: 20px;
	stroke :#CCCCCC;	
}

svg.zol_icon_unchecked_active {
	width: 20px;
	height: 20px;
	stroke: #CCCCCC;
}

svg.zol_icon_edit {
	fill: #F0C504 !important;
}

svg.zol_icon_edit:hover {
	fill: #F0C504;	
}

svg.zol_icon_delete {
	fill: #E06060 !important;
}

svg.zol_icon_delete:hover {
	fill: #E14444;	
}

svg.zol_icon_header {
	fill: #FFFFFF;	
}

svg.zol_icon_status_red {
	fill: #E14444;
	width:12px;
	height:12px;
}

svg.zol_icon_status_red:hover{
	fill: #E14444;
}

svg.zol_icon_status_green {
	fill: #12BC12;
	width:12px;
	height:12px;
}

svg.zol_icon_status_green:hover{
	fill: #12BC12;
}

svg.zol_icon_status_blue {
	fill: #6AC4DE;
	width:12px;
	height:12px;
}

svg.zol_icon_status_blue:hover{
	fill: #6AC4DE;
}

svg.zol_icon_status_large {
	width: 20px !important;
	height: 20px !important;
}

svg.zol_icon_submenu {
	stroke: none;
	float:left;
	width:18px;
	height:30px;
	padding-left:10px;
	padding-right:10px;	
}

svg.zol_icon_submenu:hover {
	color:red;
}

svg.zol_icon_top_menu:hover, svg.zol_icon_left_menu_small:hover, svg.zol_icon_left_menu:hover, svg.zol_icon_navigation:hover {
	stroke: #FF9800;
}

svg.icon-active, svg.icon-active:hover {
	fill: #FF9800;
	stroke: none;
}

svg.icon-inactive, svg.icon-inactive:hover {
	fill: #CCCCCC !important;	
	stroke: none;	
}

svg.zol_icon_menu_small {
	width:15px;
	height:15px;
	fill: #999999;
	stroke: none;
}

svg.zol_icon_left_menu_active:hover {
	stroke: none;	
}

svg.zol_tab_icon{
	padding: 3px 10px 4px 12px !important;
}

svg.zol_icon_folder {
	width:25px;
	height:25px;
	/* fill:#09C0EA; */
	fill: #6AC4DE;
	stroke: none;
}

svg.zol_icon_folder_list {
	width: 20px;
	height: 20px;
	/* fill: #09C0EA; */
	fill: #6AC4DE;
	stroke: none;
}

svg.zol_icon_file {
	width: 25px;
	height: 25px;
	/* fill: #09C0EA; */
	fill: #6AC4DE;
}


svg.zol_icon_file_list {
	width: 20px;
	height: 20px;
	/* fill: #09C0EA; */
	fill: #6AC4DE;
}

svg.zol_icon_folder_na {
	width:25px;
	height:25px;
	fill:#E14444;
	stroke: none;
}

svg.zol_icon_color_0 { /* GRIJS */
	fill: #CCCCCC;	
}

svg.zol_icon_color_1 { /* ROOD */
	fill: #E14444;
}

svg.zol_icon_color_2 {/* ORANJE */
	fill: #FF9800;	
}

svg.zol_icon_color_3 { /* GEEL */
	fill: #FFE367;	
}

svg.zol_icon_color_4 { /* GROEN */
	fill: #12BC12;
}

svg.zol_icon_blink {
	-webkit-animation:	zol_blink_icon_effect 1s infinite; /* Safari 4+ */
	-moz-animation:	zol_blink_icon_effect 1s infinite; /* Fx 5+ */
	-o-animation:	zol_blink_icon_effect 1s infinite; /* Opera 12+ */
	animation:	zol_blink_icon_effect 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes zol_blink_icon_effect {
	
	0%, 49% {
		fill: #FF9800;

	}
	
	50%, 100% {
		/* fill: #09C0EA; */
		fill: #6AC4DE;
	}
	
}

/* ENQUETES OP HOOFDSCHERM */
.enquete_vraag {
	/* width: 90%; */
	margin-left: 5%;
	margin-top: 20px;
	margin-bottom : 20px;
}

.enquete_antwoord_container {
	/* width: 90%; */
	margin-left: 5%
}

.enquete_antwoord_open {
	width: 100%;
	height: 50px;
}

.enquete_rubriek {
	/* width: 95%; */
	margin-left: 2.5%;
	margin-top: 20px;
}

/**************************************************************/
/********************       AFDRUKKEN      ********************/
/**************************************************************/
@media print  
{
    div.zol_print_blok{
        page-break-inside: avoid;
    }
}

/************************************************************/
/*******************        ALBUMS       ********************/
/************************************************************/

.zol_album {
	width: 100%;
	height: 100%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: #DDD;
	position: relative;
}	

.zol_album_title {
	/* background-color: #09C0EA; */
	background-color: #6AC4DE;
    padding: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.zol_album_thumbnail {
	height: calc(100% - 23px);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.zol_album_overlay {
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #444444b3
}

.zol_album_opties {
	position: absolute;
	bottom: 6px;
	right: 6px;
	z-index: 100;
}

.zol_foto {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	position: relative;
	border: 3px solid white;
}

.zol_foto.selected {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	position: relative;
	border: 3px solid cyan;
}

.zol_foto_overlay {
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: 0px;
	background-color: #444444b3;
}

.zol_foto_opties {
	position: absolute;
	bottom: 6px;
	right: 6px;
	z-index: 100;
}

.zoekterm {
	color: #385898;
	cursor: pointer;
	font-style: italic;
	padding: 5px;
	margin: 3px;
	background-color: #EEE;
}

/************************************************************/
/*******************       PLANNING      ********************/
/************************************************************/
.planning_container {
	padding: 0em 1em;
    height: calc(100% - 132px);
}

.planning_container .zol_tabs {
    margin: 0px !important;
}

.planning_settings {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}

.planning_settings .zol_tabs {
	height: 100%;
	margin: 0px !important;
}

.planning_kalender {
    float: left;
    height: 100%;
    width: calc(100% - 375px);
    box-sizing: border-box;
    border: 1px solid #AAAAAA;
    overflow: hidden;
}

.planning_sidebar {
	float: right;
	top: 100px;
	width: 350px;
	height: 100%;
}

.zol_planning_tellers_frame {
	width: 100%;
	height: 100%;
}

.zol_planning_dag {
	border: 1px solid #CCCCCC;
	vertical-align: top;
	height: 100px;
}

.zol_planning_dag.vandaag {
	background-color : #FEFF97;
}

.zol_planning_dag_inactief {	
	border: 1px solid #CCCCCC;
	background-color: #DFDFDF;
}

.zol_planning_dag:hover, .zol_planning_dag_vandaag:hover {
	background-color: #D3F4FF;	
}	
	
.zol_planning_dag_header {
	position: relative;
	margin: 10px;
	height: 25px;
}

.zol_planning_dag_content {
	height: calc(100% - 60px);
}
	
.zol_planning_dagnummer {
	font-weight: bold;
	position: absolute;
    left: 0px;
    top: 0px;
}

.zol_planning_dagmodel {
	background-color: #FF9800;
	position: absolute;
	color: #FFFFFF;
	font-size: 10px;
	padding: 2px;
    right: 0px;
    top: 0px;
}

.zol_planning_toevoegen {
	position: absolute;
    right: 0px;
    top: 0px;
}

.zol_planning_title {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;
	text-align: center;
	margin: 0px;
	padding-top: 10px !important;
	padding-bottom: 15px !important;
}

/************************************************************/
/*******************       BERICHTEN      *******************/
/************************************************************/

.zol_berichten_container {
	padding: 0.5em 1em;
	height: calc(100% - 70px);
	display: flex;
}

.zol_berichten_lijst {
	width: 400px;
	border: 1px solid #999999;
}

.zol_berichten_select_map {
	width:100%;
	height: 25px;
}

.zol_berichten_select_map:focus, .zol_berichten_zoekvenster:focus {
	outline: none;
}

.zol_berichten_lijst_container {
	height: calc(100% - 50px);
}

.zol_berichten_zoekvenster {
	width: 100%;
	height: 30px;
	border: 0px;
	border-top: 1px solid #999999;
	border-radius: 0;
}

.zol_berichten_inhoud {
	border: 1px solid #999999;
	border-left:0px;
	background-color: #ffffff;
	width: calc(100% - 400px);

}

.conversatie_container {
	min-height: 100%;
	padding: 1em;
    background-color: #EEEEEE;
}

.conversatie_container .bericht_container {
	background-color: #ffffff;
	border: 1px solid #c3c3c3;
	margin-bottom: 1em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bericht_container {
	padding: 1em;
}

.bericht_container:last-child  {
	margin-bottom: 0 !important;
}

.img-circle {
	object-fit: cover;
	border-radius:50%;
	width: 80px;
	height: 80px;
	border: 1px solid #EEEEEE;
}

.img-circle-small {
	object-fit: cover;
	border-radius:50%;
	width: 50px;
	height: 50px;
	border: 1px solid #EEEEEE;
}

.zol_profile {
	object-fit: cover;
	border-radius:50%;
	width: 80px;
	height: 80px;
	border: 1px solid #EEEEEE;
}

.zol_profile_small {
	object-fit: cover;
	border-radius:50%;
	width: 40px;
	height: 40px;
	border: 1px solid #EEEEEE;
}

.bericht_geselecteerd {
	background-color: #EEEEEE !important;
}

.zol_berichten_opties {
	
	width: 160px;
	padding: 5px;
	border: 1px solid #929292;
	border-radius: 20px;
	position: absolute;
	left: 50%;
	margin-left: -80px;
	margin-top:-42px;
	background-color:white;
	
}

.bericht_header {
	width: 100%;
	table-layout: fixed;
	padding: 10px;
	padding-bottom: 0px;
}

.bericht_header td {
	padding:10px;
}

.bericht_content {
	
	padding: 0px 20px 20px;
}

.bericht_leescontrole {
	width: 3px;
	height: 100%;
	padding: 0px;
}

.bericht_ongelezen {
	background-color: #FF542d
}

/****************************/
/*****   NIEUWE STIJL   *****/
/****************************/

/* flexbox */
.flex,
.flex-box,
.flex-cell,
.flex-column,
.flex-row {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.flex-box,
.flex-column {
	box-sizing: border-box;
	flex-direction: column;
	width: 100%;
}

.flex-row  {
	flex-wrap: wrap;
}

.flex-basis-50 {
	flex-basis: 50px;
}

.flex-basis-100 {
	flex-basis: 100px;
}

.flex-basis-150 {
	flex-basis: 150px;
}

.flex-basis-200 {
	flex-basis: 200px;
}

.flex-basis-300 {
	flex-basis: 300px;
}

.flex-basis-400 {
	flex-basis: 400px;
}

.fill-1 {
	flex: 1;
}

.fill-2 {
	flex: 2;
}

.fill-3 {
	flex: 3;
}

.fill-4 {
	flex: 4;
}

.flex.left,
.flex.top-left,
.flex.bottom-left,
.flex-box.left,
.flex-box.top-left,
.flex-box.bottom-left,
.flex-cell.left,
.flex-cell.top-left,
.flex-cell.bottom-left {
	justify-content: flex-start;
}
.flex.top,
.flex.center,
.flex.bottom,
.flex-box.top,
.flex-box.center,
.flex-box.bottom,
.flex-cell.top,
.flex-cell.center,
.flex-cell.bottom {
	justify-content: center;
}

.flex.right,
.flex.top-right,
.flex.bottom-right,
.flex-box.right,
.flex-box.top-right,
.flex-box.bottom-right,
.flex-cell.right,
.flex-cell.top-right,
.flex-cell.bottom-right {
	justify-content: flex-end;
}

.flex.top,
.flex.top-left,
.flex.top-right,
.flex-box.top,
.flex-box.top-left,
.flex-box.top-right,
.flex-cell.top,
.flex-cell.top-left,
.flex-cell.top-right {
	align-items: flex-start;
}

.flex.left,
.flex.right,
.flex.center,
.flex-box.left,
.flex-box.right,
.flex-box.center,
.flex-cell.left,
.flex-cell.right,
.flex-cell.center {
	align-items: center;
}

.flex.bottom,
.flex.bottom-left,
.flex.bottom-right,.zol_tooltip {
	pointer-events: none;
}
.flex-box.bottom,
.flex-box.bottom-left,
.flex-box.bottom-right,
.flex-cell.bottom,
.flex-cell.bottom-left,
.flex-cell.bottom-right {
	align-items: flex-end;
}

.flex-center {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-max {
	color: #666666;
	height: 100%;
	font-style: italic;
	text-align: center;
	padding: 20px;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.flex-column-scroll {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.flex-column-scroll-container {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	min-height: 0; /* for Firefox */
}

.flex-column-scroll-content {
	flex-grow: 1;
	overflow: auto;
	min-height: 0; /* for Firefox */
}

.flex-column-scroll-content::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
.flex-column-scroll-content::-webkit-scrollbar-thumb {
    background: #FF0000;
}

/* layout blocks */
.zol_page_header,
.zol_page_content {
    color: #666666;
	font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* titles */
div.title {
	font-size: 12px;
}


div.title-block {
	align-items: center;
	color: #666;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	justify-content: center;
}

div.title-block {
	/* padding: 10px 0px 15px; */
	padding-bottom: 15px;
}

div.title.center,
div.title-block.center {
	justify-content: center;
}

div.title.left,
div.title-block.left {
	justify-content: flex-start;
}

div.title.right,
div.title-block.right {
	justify-content: flex-end;
}

div.title-block button {
	margin-left: 0.5em;
}

div.title-block .menu {
	position: relative;
}

div.title-block .menu ul {
	background-color: white;
	border: 1px solid #AAA;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	display: none;
	left:30px;
	list-style-type: none;
	overflow: hidden;
	padding: unset;
	position: absolute;
	margin: unset;
	top: 0px;
	width: max-content;
	z-index: 100;
}

div.title-block .menu ul li {
	border-bottom: 1px solid #AAA;
	font-size: 11px;
	font-weight: normal;
	padding: 8px 15px 8px 10px;
}

div.title-block .menu ul li:hover {
	background-color: #EEEEEE;
}

div.title-block .menu ul li:last-child {
	border-bottom: unset;
}

div.title-block .menu ul li a {
    align-items: center;
	display: flex;
}

div.title-block .menu ul li label {
	cursor: pointer;
}

div.title-block .menu ul li svg {
	width: 18px;
	height: 18px;
	fill: #6AC4DE;
	margin-right: 10px;
}

/*****/
div.zol-title {
	align-items: center;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	justify-content: center;
	padding: 10px 0px;
}

div.zol-title.underline {
	text-decoration: underline;
}

div.zol-title.left {
	justify-content: flex-start;
}

div.zol-title.right {
	justify-content: flex-end;
}

div.zol-title button {
	margin-left: 0.5em;
}


div.zol-title .menu {
	position: relative;
}

div.zol-title .menu ul {
	background-color: white;
	border: 1px solid #AAA;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	display: none;
	left:30px;
	list-style-type: none;
	overflow: hidden;
	padding: unset;
	position: absolute;
	margin: unset;
	top: 0px;
	width: max-content;
	z-index: 100;
}

div.zol-title .menu ul li {
	border-bottom: 1px solid #AAA;
	font-size: 11px;
	font-weight: normal;
	padding: 8px 15px 8px 10px;
}

div.zol-title .menu ul li:hover {
	background-color: #EEEEEE;
}

div.zol-title .menu ul li:last-child {
	border-bottom: unset;
}

div.zol-title .menu ul li a {
    align-items: center;
	display: flex;
}

div.zol-title .menu ul li label {
	cursor: pointer;
}

div.zol-title .menu ul li svg {
	width: 18px;
	height: 18px;
	fill: #6AC4DE;
	margin-right: 10px;
}

/* fieldsets */
fieldset.zol-fieldset,
fieldset.fieldset {
	border: 1px dashed #AAAAAA;
    border-radius: 10px;
	padding: 15px;
}

fieldset.zol-fieldset legend,
fieldset.fieldset legend {
	padding: 0px 5px;
    font-size: 12px;
	font-weight: bold;
}

/* multiselect */
.multiselect-container {
	/*
	display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    */
	
	/* TODO */
}

.multiselect-container .ms-container {
	height: 100%;
}