@CHARSET "UTF-8";
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body, p, table, tr, td, th, h3, div, span, textarea {
	font-size: 15px;
	line-height: 1.2em;
	padding: 0;
	margin: 0; 
}

#container {
	overfow: auto;
	position: relative;
	background-color: #373e48;
}

#body_content {
	margin-left: 250px;  
}
#sidemenu {
	width:250px;
	float: left;
	background-color: #373E48;
	color: white;
	min-height: 100vh;
	height: 100%;
	font-size: 12pt;
}

#sidemenu ul, #sidemenu li {
	padding: 0; 
	margin: 0;
	list-style-type: none;
}

ul#mm_menu {
	padding: 0;
	margin-top: 10px;  
}

ul#mm_menu li {
	display: block;
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
}

ul#mm_menu li a {
	display: block;
	padding: 10px 0;
	color: white; 
	line-height: 1.5em; 
}

ul#mm_menu ul { display: none; padding-left: 10px;  }

ul#mm_menu li i.icon { font-size: 1.5em; margin-right: 15px; display: inline-block; width: 30px; text-align: center; position: relative; top: 3px;  }

ul#mm_menu li.is-selected { background-color: #2A70E8;   } /* rgba(98,222,100,0.2) rgba(255,247,8, 0.2); */
ul#mm_menu li.is-selected a { color: #fff; font-weight: bold; }

#logout {
	color: white;
	padding: 10px; 
	display: block;
}

/* BREADCRUMB */

#jwin_bread_crumb {
	padding: 0; 
	margin: 0;
	list-style-type: none;
	display: block;
	overflow: auto; 
	margin-bottom: 20px;
	margin-top: 20px;
}

#jwin_bread_crumb:after {
	display: block;
	content: "";
	height: 0;
	clear: both;
}
#jwin_bread_crumb li { 
	display: inline-block;
	float: left;  
}

#jwin_bread_crumb li:before { 
	content: "\f0da";
	font-family: FontAwesome;
	display: inline-block;
	width: 20px;
	text-align: center;  
	color: #2a70e8;
}

#cookies { font-size: 9pt; margin-left: 25px;}
#cookies a { color: #999; }

/* LOGIN */

#login_outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#login_middle {
    display: table-cell;
    vertical-align: middle;
}

#login_inner {
    margin-left: auto;
    margin-right: auto; 
    max-width: 400px;
    width: 100%; 
}

#login_logo { display: block; margin: 0 auto; }
#login_logo_wrapper { padding-bottom: 10px; margin-bottom: 10px;  }
#login_inner .sky-form label { margin-bottom: 10px; }

/* FORM CSS */
.sky-form .row { margin-bottom: 5px; }
.sky-form .row.disabled { opacity: 0.5; }
.sky-form .row>label { padding-top: 8px; }
.sky-form .button { float: left; }

.sky-form .listview { padding: 10px 15px 50px; }
.sky-form .listview.multi_select { padding-bottom: 10px; }

#listview_multiselect_buttons.sky-form .button { margin-right: 20px; } 
.sky-form.padding-sides { padding-left: 20px; padding-right: 20px; }

.listview_search { 
	padding: 0;
	margin: 0 0 10px 0px;
	overflow: auto;
	margin-left: -15px;
}

.listview_search:after {
	display: block;
	clear: both;
	content: "";
	height: 0;
}

.sky-form .listview a { color: #999; }
table.listview td, table.listview th { padding: 7px; }

#dashboard h2 { margin-bottom: 20px; }
p.panel {
	margin-bottom: 20px; 
	padding-top:20px;
}

#dashboard #widgets { list-style-type: none; padding: 0; margin: 0; }
#dashboard .widget {
	display: inline-block;
	min-width: 200px;
	min-height: 150px;
	float: left;
	border: 4px solid #2a70e8;
	padding: 0;
	margin: 0;
	margin-right: 50px; 
}

#dashboard .widget h3 { text-align: center; background-color: #2a70e8; padding: 5px; color:#fff;}
#dashboard .widget .widget_content { padding: 20px 0; }
#dashboard .widget .p { width: 100%; text-align: center; display: inline-block; }
#dashboard .widget .p50 { width: 50%; text-align: center; display: inline-block; }
#dashboard .widget .number { font-size: 36pt; color: #777; }
#dashboard .widget .line { font-size: 18pt; color: #777; padding: 0 10px; }
#dashboard .widget .text { font-size: 10pt; text-transform: uppercase; }

.row ul#listview_top_actions { padding-top: 0; margin-top: 0; margin-bottom: 0; }

.hint { font-size: 9pt; }

#view-content { background-color: white; min-height: 100vh; overflow: auto;}

#view_planboard, .admin_view { overflow: auto;}
#view_planboard { overflow-x: hidden; background-color: white; min-height: 100vh; }
#view_planboard #controls { margin: 20px 0; }

#view_planboard .location .empty-wrapper, #view_planboard .location .empty-wrapper * { font-weight: normal; font-size: 10pt; color: #F06F05; }
#view_planboard .location .empty-wrapper { margin-left: 10px; display: none; } 

#view_planboard .location td,
#view_planboard .location th
  { 
  	border: 1px solid #777;
  	border-collapse: collapse;
  	padding: 0;
  	margin: 0; 
  }

#view_planboard .location th {
	font-weight: normal;
	font-size: 9pt; 
	border-top: none;
	border-left: none;  
}
#view_planboard .location th.mirror {
	font-family: 'Open Sans Condensed', sans-serif;
	width: 250px;
	font-size: 11pt;
}

#view_planboard .location th.mirror span {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 11pt;
}

#view_planboard .location table {
	border: none;
	margin-bottom: 30px;
	border-collapse: collapse;
	width: 100%;
}


#view_planboard .plan { 
	position: absolute; 
	border-top: 1px solid #A80F0F;
	border-right: 5px solid rgb(0,0,0,0.5);
	background-color: red; 
	width: 57px; 
	height: 20px; 
	cursor: pointer; 
	color: white;
	font-size: 8pt;
	text-align: left;
	padding: 5px;
	overflow: hidden;
}

#view_planboard .plan-icons {
	position: absolute;
	width: auto;
	overflow: auto;
	right: 0;
	top: 3px;
	font-size: 1em;
	padding: 1px;
}

#view_planboard .plan-icon {
	color: white;
/*	float: right; */  
	display: none;
	margin-right: 3px; 
	position: relative;
	z-index: 100;
}
#view_planboard .plan.has_photo a.photo,
#view_planboard .plan.has_material .material,
#view_planboard .plan.is_in_place .placed,
#view_planboard .plan.moved .moved
{
	display: inline-block;
}

#view_planboard .plan.partly {
	background-color: #B09292; 
	cursor: default;	
}

#timeline {
	position: absolute;
	height: 100%;
	width: 3px;
	background-color: #efd575;
	border-right: 1px solid #ad9a53;
	left: 500px;
	z-index: 100;
	display: none;
	cursor: col-resize;
}

.label_cb_timeline {
	margin-top: 8px;
}
#view_planboard #locations { 
	position: relative;
	overflow: hidden;
	clear: right;
	padding-left: 25px;
	padding-right: 25px;
}

#view_planboard .plan.new {
	background-color: #EDDFD5;
	color: black;
	border: 2px dashed #D4AC90;
}
#view_planboard .plan .flag_modified { display: none;  }
#view_planboard .plan.modified .flag_modified { display: inline-block; width: 5px; float: right;  }

#view_planboard .plan .selected_plan { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.4);  }
#view_planboard .plan.selected .selected_plan { display: block;   }

#view_planboard .location td.occupied {
	border-top: 2px solid green;
}

	
#view_planboard .drop_over { background-color: #aff; }

.ui-datepicker { width: 350px; }

.date_expired { color: #700; }

#view_planboard #new_campaign {
	width: 450px;
	padding: 10px;
	background-color: #E3E7E8;
	position: absolute;
	z-index: 5;
	right: 50px;
	top: 50px; 
}

#view_planboard #new_campaign_form {
	box-shadow: none; 
	overflow: auto; 
	overflow-x: hidden;
	width: 100%;
	display: none;
	margin: 20px 0;
}

#view_planboard #new_campaign_form label {
	display: inline-block;
	width: 200px;
	float: left;
	font-size: 11pt;
}
#view_planboard #new_campaign_form .field {
	display: block;
	clear: both;
	margin-bottom: 2px;
}

#view_planboard #new_campaign_actions { margin-top: 20px; }

/*
#view_planboard #new_campaign_form input,
#view_planboard #new_campaign_form select
{
	width: 200px;
	border: 1px solid #777;
	font-size: 11pt;
	line-height: 1em;
	padding: 3px 10px;
	height: 2em;
	background-color: white;
}
*/

#view_planboard #new_campaign_form input[type=button] {
	/*width: auto;
	background-color: #3D7CEA;
	color: white;
	border: none;
	padding: 8px 10px; 
	height: auto;
	cursor: pointer;
	*/
	margin-right: 15px;
}
#view_planboard #new_campaign_form input[type=button].disabled {
	background-color: #aaa;
	color: #999;
	cursor: default;
}

#planboard_filters {
	margin-bottom: 50px;
	padding-left: 25px;
}

#planboard_actions #mirrors_info {
	width: auto;
	float: left;
}

.admin_buttons {
	clear: both;
	background-color: #373E48;
	padding: 5px;
	padding-left: 25px;
	margin-top: 90px;
}

.admin_buttons.top_screen {
	margin: 20px 0;	
}

.admin_buttons input.button, .admin_buttons a.button {
	display: inline-block;
	border: 1px solid #ddd;
	color: #373E48;
	background-color: #ddd;
	padding: 5px 15px; 
	margin-right: 15px; 
	cursor: pointer; 
	font-size: 11pt;
}

.admin_buttons.white_menu {
	background-color: white;
}

.admin_buttons.white_menu a.button {
		background-color: #2a70e8;
		color: white;
		text-align: center;
}

.admin_buttons.vertical a.button {
	display: block;
	margin-bottom: 5px;
	width: 170px; 
}

#selected_locations {
	border: 1px solid #999;
	/*border-radius: 5px;*/
	padding: 10px;
	overflow-y: scroll;
	height: 80px;
	width: 325px;	
	margin-top: 3px; 
	display: none;
}

.filtered_location {
	display: inline-block;
	padding: 3px 15px 3px 10px;
	background-color: #E3E7E8;
	border: 1px solid #999;
	border-radius: 50px;
	font-size: 10pt;
	
}

.filtered_location .del {
	display: inline-block;
	margin-right: 10px; 
	text-align: center;
	cursor: pointer;
	font-size: 8pt;
	color: #900;
	font-style: bold;
}

.filter { margin-top: 10px; }

.innercell { height: 5px; border: 1px solid red; }

#dialogs {
	display: none;
}

.mm_dialog .row { padding-bottom: 10px; }
.mm_dialog label.display { line-height: 39px; }

.field .input_wrapper { display: inline-block; margin-left: 10px; }
.admin_fields .field { display: block; margin-bottom: 10px; position: relative;  }
/*.admin_fields .field label { width: 200px; display: inline-block; vertical-align: top; }*/
.admin_col { float: left; }
.admin_col_700 { width: 700px; }
.admin_col_500 { width: 500px; }
.field .input_wrapper input[type=text], .field .input_wrapper select {
	padding: 2px 5px;
	border: 1px solid #333;
	border-radius: 3px; 
	width: 400px;
	font-size: 11pt; 
	color: black;
	background-color: #fff;
}
.field .input_wrapper textarea {
	padding: 2px 5px;
	border: 1px solid #333;
	border-radius: 3px; 
	width: 400px;
	height: 4em;
	font-size: 11pt; 
}

label.text { padding-top: 8px; display: block; margin-bottom: 5px; }

#invoice_actions { background-color: white; margin: 0; padding: 30px 30px 50px; }
#invoice_actions .button.active { background-color: #2A70E8; color: white; }
#invoice_lines { width: 100%; margin-top: 50px;  }
#invoice_lines, #invoice_lines td, #invoice_lines tr, #invoice_lines th {
	font-size: 12pt; 
}
#invoice_lines td { padding-right: 10px; }
#invoice_lines tr.separator td { padding: 10px 0; }
#invoice_lines tr.separator hr { height: 1px; border: 0; border-color: #333; background-color: #333; color: #333; }
#invoice_lines .col_control { width: 50px; width: 4%; }
#invoice_lines .col_amount { width: 50px;  width: 4%; }
#invoice_lines .col_description {  width: 59%; }

#invoice_lines .col_kind { width: 100px;  width: 7%; }
#invoice_lines .col_price { width: 100px;  width: 7%; }
#invoice_lines .col_btw { width: 80px;  width: 7%; }
#invoice_lines .col_price_ex { width: 150px;  width: 8%; }
#invoice_lines input[type=text] { width: 100%; box-sizing: border-box; }
#invoice_lines .prefix { float: left; margin-right: 5px; }
#invoice_lines .suffix { float: right; margin-left: 5px; }
#invoice_lines div { overflow: hidden; }

#expiration { display: none; }
#expiration label { position: relative; top: 10px; }
#toggle_expiration { 
	cursor: pointer;
	padding-left: 15px;
	margin-bottom: 5px;
	display: block;
}

#invoices { margin-top: 50px;  }
#invoices td, #invoices th { padding-right: 20px; }
#invoice_lines input[type=text] {
	border: 1px solid white;
	border-radius: 3px;
	padding: 2px 5px; 
	background-color: #E3E0E0;
}
#invoice_lines input.inline[type=text] {
	width: auto;
	border-color: #000;
}

#invoice_lines input[type=text]:hover, #invoice_lines input[type=text].active {
	border-color: #666;
}  

#invoice_lines #newline { display: none; }
#invoice_lines .text .hide_text .wrapper { display: none; }

#material_check { padding-top: 7px; padding-bottom: 5px; }

#invoice_recurring_summary {
	padding: 0 30px 40px;
	position: absolute;
	left: -10000px;
}
#invoice_recurring_summary.active {
	position: relative;
	left: 0; 
}


#invoice_recurring_summary .money_input {
	display: inline-block;
	width: 100px;
}

.payment_delete { color: red; }

/* HERINNERINGEN */
#reminders_left {
	float: left;
	width: 270px;
	height: 100%;
	padding: 0;
	margin: 0;
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #999; 
}

#reminders_right {
	float: left;
	width: 640px;
}

#reminders_flow {
	list-style-type: none;
	margin-top: 50px;
}

#reminders_flow li {
	display: block;
	margin-bottom: 5px;
	padding: 5px; 
}

#reminders_flow .check,
#reminders_flow .icon-wrapper {
	width: 28px;
	height: 28px;
	line-height: 28px; 
	float: left;
	margin-right: 5px;
	display: block;
	position: relative;
	color: #666;
}

#reminders_flow .icon {
	border: 2px solid #666;
	border-radius: 50px;
	width: 26px;
	height: 26px;
	display: inline-block;
	text-align: center;
	line-height: 23px;
	font-size: 9.5pt;
	font-weight: bold;
	padding-left: 1px;
}

#reminders_flow .check .fa {
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	color: rgba(255,255,255,0);

}


#reminders_flow .info {
	width: 170px;
	float: left;
	font-size: 9pt;
}

#reminders_flow li.active {
	background-color: #FDEED3;
}

#reminders_flow li.active .info {
	color: #7a6027; 
}

#reminders_flow li.active .icon {
	border-color: #F5A623;
	background-color: #F5A623;;
	color: white;
}

#reminders_flow li.checked .check .fa { 
	color: #3c8230;
}

.reminder_row {
	margin-bottom: 5px;
}
#reminder_to { width: 300px; }


/* MONTEUR LIJST */

#view_technician_list { overflow: auto;	padding: 0; background-color: white; }

#technician_filters { 
	margin-bottom: 50px;
	max-width: 480px;
	margin: 0 auto;
}

#all_filters { display: none; }

#technician_list {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	overflow: auto;
	margin-top: 50px;
	padding: 0 5px;
	border-top: 0;
	border-bottom: 0; 
	clear: both;
}

#view_technician_list .row {
	display: block;
	width: 100%;
	overflow: auto;
	margin-bottom: 5px;
}

#view_technician_list .row.header {
	display: none;
}

#view_technician_list .row:after {
	display: block;
	content: "";
	height: 0;
	clear: both;
}

#view_technician_list .outer {
	background-color: #F7FCBD;
	padding: 5px;
	border: 1px solid #C9C589;
	overflow: auto;
}
#view_technician_list .row .cell {
	width: auto;
	float: left; 
	padding: 2px;
	margin-right: 10px; 
}

#view_technician_list .row .details {
	padding-left: 90px;
	position: relative;
}

#view_technician_list .action_toggle { cursor: pointer; }

#view_technician_list .row .cell.select { width: 50px; }
#view_technician_list .row .cell.month { width: 80px; float: left; }

#view_technician_list .cell .icon { 
	font-size: 18pt;
	display: inline-block;
	width: 30px;
	text-align: center;
	padding: 5px 0 0; 
	color: #D6D0AE;
	cursor: default;
}

#view_technician_list .cell .icon.picture { font-size: 15pt; position: relative; top: -2px; } 
#view_technician_list .cell .icon a { position: relative; z-index: 100; } 

#view_technician_list .is_in_place .in_place { color: #2D8724;}
#view_technician_list .has_picture .picture i { color: #2D8724;}

#view_technician_list .handle {
	width: 16px;
	float: right;
}

#view_technician_list .handle a {
	display: block;
	text-align: center;
	font-size: 9pt;
	width: 100%;
}

#view_technician_list .actions { 
	text-align: center;
	margin-top: 10px;
	padding-top: 10px; 
	border-top: 1px solid  #D6D0AE;
}

#view_technician_list input[type=file] {
	position: absolute; 
	left: -1000px;
}

#view_technician_list .actions { display: none; }

#view_technician_list .city_toggle {
	cursor: pointer;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid black; 
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}



td.money { text-align: right; }

.field-label-sortable .sort-icon {
	display: none;
}
.field-label-sortable.sort-active .sort-icon {
	display: inline-block;
	font-size: 9pt;
	margin-left: 5px;
	position: relative; 
	top: -1px;
}

.sky-form .listview a.field-label-sortable, .sky-form .listview a.field-label-sortable:hover {
	color: #2D72E8;
	text-decoration: none;
}

.sky-form .error { color: red; }
/* Gemeentes */

ul#checkboxes_gemeentes{
	display: block;
	width: 100%;
	
}

ul#checkboxes_gemeentes li{
	display: inline-block;
	float: left;
	width: 50%;
	
}

.field-status-color {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 10px;
	border-radius: 10px; 
}

.align-right {
	text-align: right;
}

.box_error {
	margin: 10px 0;
	padding: 20px;
	border: 1px solid #d00;
	display: inline-block;
}
.box_error, .box_error p { color: #d00; }

.box_success {
	margin: 10px 0;
	padding: 10px 20px;
	border: 1px solid #090;
	display: inline-block;
	margin-bottom: 20px; 
}
.box_success, .box_success p { color: #090; }

#messages:before {
	display: block;
	content: "";
	background-color: white;
	height: 1px;
}

/***** GRAPHS ******/
#reports #view-content {
	padding-top: 30px;
	overflow: hidden;
	padding-bottom: 50px;
}
#reports #controls {
	margin-bottom: 30px; 
}
#reports h3 {
	font-size: 1.2em;
	line-height: 1.5em;
}

#reports ul.available li{
	list-style-type: none;
	line-height: 1.5em;
}

#graph-content {
	
}

#graph-content table {
	border: none;
	border-collapse: collapse;
	margin-bottom: 50px;
}
#graph-content canvas {
	margin-bottom: 50px;
}

#graph-content tr:nth-child(even) {
	background-color: #f2f2f2;
}	

#graph-content th, #graph-content td {
	padding: 8px;
	padding-right: 20px;
}

#graph-content tr.totals {
	background-color: #fff;
	border-top: 1px solid #666;
}
#graph-content tr.totals td {
	font-weight: bold;
}
#graph-content .money {
	text-align: right;
}