/* ==========================================================================
   Base
   ========================================================================== */
body {
	color: #777;
	font-size: 13px;
	font-family: 'OpenSans-Regular', Arial, sans-serif;
}
body *{
	outline:none;
}
a {
	color: #16a085;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	-webkit-backface-visibility: hidden;
}
label{
	padding-top: 3px;
}
a:hover {
	color: #1abc9c;
	text-decoration: none;
}
.mx-fileinput .mx-wrapped-input {
	cursor: pointer;
}
.alert {
	padding: 2px 4px;
	margin: 4px 0;
}
.table th {
	font-family: 'OpenSans-Semibold';
	font-weight: 600;
  	font-style: normal
}

.table-stylingless {
	border: 0px solid !important; 
}
/* Keyframes
   ========================================================================== */

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}



/* Fonts
   ========================================================================== */
@font-face {
	font-family: 'OpenSans-Regular';
	src: url('fonts/OpenSans-Regular.eot'); /* IE9 Compat Modes */
	src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
	     url('fonts/OpenSans-Regular.woff') format('woff'),
	     url('fonts/OpenSans-Regular.ttf')  format('truetype');
	font-weight: normal;
  	font-style: normal;
	}
@font-face {
	font-family: 'OpenSans-Semibold';
	src: url('fonts/OpenSans-Semibold.eot'); /* IE9 Compat Modes */
	src: url('fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
	     url('fonts/OpenSans-Semibold.woff') format('woff'),
	     url('fonts/OpenSans-Semibold.ttf')  format('truetype');
	font-weight: 600;
  	font-style: normal;
	}
@font-face {
	font-family: 'OpenSans-Bold';
	src: url('fonts/OpenSans-Bold.eot'); /* IE9 Compat Modes */
	src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
	     url('fonts/OpenSans-Bold.woff') format('woff'),
	     url('fonts/OpenSans-Bold.ttf')  format('truetype');
	font-weight: bold;
  	font-style: normal;
}

/* ==========================================================================
   Default Modal
   ========================================================================== */
.mx-window-header {
	background-color: #393;
}
.mx-window-active .mx-window-header {
	background-color: #368ee0; 
}
.mx-window-header h4 {
	color: #FFF;
}
.mx-window-header .close {
	color: #FFF;
	text-shadow: none;
	opacity: 1;
}
.modal-header {
	padding: 10px 15px;
}

/* ==========================================================================
   Default Login Modal
   ========================================================================== */
.mx-login .modal-content {
	border-style: none;
	background: #FFF;
	box-shadow: none;
}
.mx-login .modal-body {
	padding: 0 15px;
}
.mx-login .modal-content input {
	font-size: 16px;
	height: 56px;
	padding: 12px 12px;
	border: 1px solid #EEE;
	background: #eee;
	box-shadow: none;
}
.mx-login .modal-content input:focus {
	border-color: #66afe9;
}
.mx-login .modal-header,
.mx-login .modal-footer {
	border-style: none;
}
.mx-login button {
	font-size: 16px;
}
.mx-login h4 {
	font-weight: bold;
	font-size: 20px;
	color: #aaa;
}

/* Default Modal Underlay
   ========================================================================== */
.mx-underlay {
	
}

/* ==========================================================================
   Layout Container
   ========================================================================== */

.TopBarRegion{
	background:#0397d7;
}

.TitleRegion label{
	color:#ffffff;
	font-weight: bold;
	font-size: 14pt;
	padding:0;
}
.mx-title{
	padding:8px 8px 0 8px;
}
.LogoutRegion{
	text-align: right;
}
.LogoutRegion .mx-layoutcontainer-wrapper{
	padding: 10px 18px 10px 0;
}
.AZLLogo .mx-layoutcontainer-wrapper{
	text-align: right;
	padding-right: 18px;
}
/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-default {
	font-size: 13px;
}
.btn-default:hover,
.btn-default:focus {

}
.btn-inverse {

}
.btn-inverse:hover,
.btn-inverse:focus {

}
.btn-primary {
	
}
.btn-primary:hover,
.btn-primary:focus {
	
}
.btn-info {

}
.btn-info:hover,
.btn-info:focus {

}
.btn-success {
	
}
.btn-success:hover,
.btn-success:focus {

}
.btn-warning {

}
.btn-warning:hover,
.btn-warning:focus {

}
.btn-danger {

}
.btn-danger:hover,
.btn-danger:focus {

}
.btn.disabled, 
.btn[disabled] {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.mx-dateinput-select-button,
.mx-listview-clear-button {
	padding: 5px 10px;
}

/* ==========================================================================
   Typography
   ========================================================================== */
.mx-title {
	font-size: 24px;
	margin-bottom: 0px;
	font-weight: normal;
}

.mx-title2 {
	font-size: 18px;
	margin-bottom: 0px;
	font-weight: normal;
}
.mendixFormView_headerLabel label {
	padding-bottom: 5px;
	font-size: 18px;
	border-bottom: 1px solid #f4f4f4;
}

/* ==========================================================================
   Grids
   ========================================================================== */
.mx-datagrid-head th {
	background: #EEE;
}
.table-striped tbody>tr:nth-child(odd)>td, 
.table-striped tbody>tr:nth-child(odd)>th {
	background: #FFF;
}
.mx-datagrid-body-table td {
	border-bottom: 1px solid #f1edee;
}
.mx-datagrid-body-table tr:last-child td {
	border-bottom: none;
}
.mx-datagrid .mx-datagrid-body-table .selected td {
	background-color: #e7f1fb;
}
.mx-grid-pagingbar .mx-button {
	padding: 4px;
	border-style: none;
	background: none;
}
.mx-templategrid-item {
	padding: 0;
	border: 5px solid transparent;
}
.mx-templategrid-item.selected {
	background-color: transparent;
}
.mx-templategrid-item table {
	border: 1px solid #ddd;
}
.mx-templategrid-item.selected table {
	background-color: #f5f5f5;
}
.mx-datagrid-data-wrapper{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.mx-grid-search-label{
	width:150px;
}

.DropZoneCustom .dropzone.dz-clickable{
	overflow-y: scroll;
}
/* ==========================================================================
   Dataviews
   ========================================================================== */
.mx-table th, .mx-table td{
	padding: 3px;
}
.mx-table{
	margin-bottom: 10px;
	border: 1px solid #dfe6ea;
	border-collapse: separate;
	border-radius: 5px;
	padding: 5px;
}
.mx-table.NoBorder{
	border:none;
	padding:0;
	margin:0;
}

.mx-table.NoBorder .form-group {
	border:none;
	padding:0;
	margin-bottom:0px;
}

.form-control{
	padding: 3px;
	height: 25px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
	cursor: auto;
}
.mx-referenceselector-select-button,.mx-dateinput-select-button{
	padding: 0;
	height: 25px;
	width: 25px;
}
select.formcontrol{
	padding:0;
}

.mx-nobottompadding {
	margin-bottom: 0px;
}

.mx-dataview .mx-grid, .border{
	margin-bottom: 10px;
	border: 1px solid #dfe6ea;
	border-collapse: separate;
	border-radius: 5px;
	padding: 11px;
}
.mx-grid.NoBorder{
	border: none;
}
.SaveButtons .btn{
	margin-right: 3px;
}
.dijitValidationTextBox{
	display: block;
	width: 100%;
	height: 25px;
	padding: 3px;
	font-size: 14px;
	line-height: 1.428571429;
	color: #555;
	vertical-align: middle;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.DummyField{
	display: none;
}
.InlineButton{
	height: 25px;
	padding: 0 10px;
}
/* ==========================================================================
   Tab Container
   ========================================================================== */
.mx-tabcontainer-tabs > li > a {
	color: #333;
	border-color: #DDD;
	background: #DDD;
}
.mx-tabcontainer-nested ul {
	background: #fafafa;
}
.mx-tabcontainer-nested ul > li > a {
	border-style: none;
	background: none;
}
.mx-tabcontainer-nested ul > li.active > a {
	border-style: none;
	font-weight: bold;
	background: none;
}
.mx-tabcontainer-nested ul > li > a:hover,
.mx-tabcontainer-nested ul > li > a:focus {
	border-style: none;
}
.mx-tabcontainer-nested ul > li.active > a:hover,
.mx-tabcontainer-nested ul > li.active > a:focus {
	border-style: none;
	background: none;
}
.mx-tabcontainer-indicator{
	color: #fff;
	background: #f00;
	-webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* ==========================================================================
   Group Box
   ========================================================================== */
.mx-groupbox-header {
	color: #FFF;
	background-color: #368ee0;
}
.mx-dataview-message{
	position: initial
}
/* ==========================================================================
   Navigation
   ========================================================================== */

/* Navigation Bar
========================================================================== */
.mx-navbar {
	margin: 0;
	min-height: 60px;
	border-style: none;
	background: none;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}
.mx-navbar .nav > .mx-navbar-item > a {
	padding: 20px 15px 20px;
	color: #FFF;
	text-shadow: none;
}
.mx-navbar .nav > .mx-navbar-item > a:hover,
.mx-navbar .nav > .mx-navbar-item > a:focus {
	background: #FFF;
}
.mx-navbar .nav li.dropdown.open > .dropdown-toggle, 
.mx-navbar .nav li.dropdown.active > .dropdown-toggle, 
.mx-navbar .nav li.dropdown.open.active > .dropdown-toggle {
	border-color: #d5dce0;
	color: #0397d7;
	background: none;
}
.mx-navbar .nav li.dropdown > .dropdown-toggle .caret {
	border-bottom-color: #FFF;
	border-top-color: #FFF;
}
.mx-navbar-sublist {
	border-color: #368ee0;
}

/* Dropdown */
.mx-navbar .mx-navbar-item .mx-navbar-submenu {

}
.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a {
	
}
.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a:hover,
.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a:focus {
	
}

/* Navigation Tree
========================================================================== */
.mx-navigationtree a {
	display: block;
	padding: 5px 10px;
}
.mx-navigationtree a:hover,
.mx-navigationtree a:focus {
	color: #FFF;
	text-shadow: none;
	background: #0397d7;
	border-radius: 3px;
}
.mx-navigationtree li {
	padding: 5px 0;
	border-bottom: 1px solid #dfe6ea;
}
.mx-navigationtree ul {
	margin: 0;
	padding: 0;
}
.mx-navigationtree ul li ul {
	padding: 0;
	margin-left: 10px;
}
.mx-navigationtree ul li ul li {
	padding-left: 0;
	margin-left: 0;
}
.mx-navigationtree .mx-navigationtree-has-items > a {
	font-weight: normal;
}
.mx-navigationtree .mx-navigationtree-has-items ul li:last-child {
	border-style: none;
}

/* Navigation List
========================================================================== */
.MenuRegion {
	padding-top: 20px;
	border-right: 1px solid #f1edee;
	background: #f7f7f7;
}
.MenuRegion td,
.MenuRegion th {
	padding: 0;
}
.MenuRegion label {
	padding: 3px;
	font-size: 13px;
	font-family: 'OpenSans-Regular', Arial, sans-serif;
}
.TopBarRegion .MenuRegion {
	padding-top: 0;
	vertical-align: middle;
	border-style: none;
	background: none;
}
.TopBarRegion .MenuRegion img {
	margin-left: 20px;
}
.TopBarRegion .mx-layoutcontainer-right {
	vertical-align: middle;
}
.TopBarRegion .mx-layoutcontainer-right a {
	color: #FFF;
	margin-left: 3px;
}
.TopBarRegion .mx-layoutcontainer-right a:hover {
	color: #333;
}
.MenuRegion .mx-navigationlist {
	padding: 0;
}
.MenuRegion .mx-navigationlist > li {
    padding: 0;
    border-style: none;
    background: none
}
.MenuRegion .mx-navigationlist > li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.MenuRegion .mx-navigationlist > li:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.MenuRegion .mx-navigationlist > li:nth-child(2n+1) {
    background-color: none;
}
.MenuRegion .mx-navigationlist > li:hover {
    background: none;
}
.MenuRegion .mx-navigationlist > li label {
	display: block;
	padding: 9px 14px 14px;
	color: #333;
	font-family: 'OpenSans-Regular', Arial, sans-serif;
	font-size: 14px;
}
.MenuRegion .mx-navigationlist > li label:hover,
.MenuRegion .mx-navigationlist > li label:focus {
	background: #E7E7E7;
}
.mx-list > li:nth-child(2n+1) {
	background: none;
}

/* ==========================================================================
   Dijit Widgets
   ========================================================================== */

/* Calendar
========================================================================== */
.dijitCalendarContainer {
	background-color: #eff0f2;
}
.dijitCalendarContainer tr th,
.dijitCalendarContainer tr td {
	padding: 3px 6px;
	text-align: center;
}
.dijitCalendarContainer tr th {
	text-align: center;
	color: #FFF;
	background-color: #34495e;
}
.dijitCalendarContainer tr .dijitCalendarArrow {
	cursor: pointer;
}
.dijitCalendarMonthLabel {
	font-weight: bold;
}
.dijitCalendarContainer .dijitCalendarMonthContainer th:first-child {
	border-top-left-radius: 3px;
}
.dijitCalendarContainer .dijitCalendarMonthContainer th:last-child {
	border-top-right-radius: 3px;
}
.dijitCalendarContainer .dijitButtonNode {
	border-style: none;
}
.dijitCalendarSelectedDate,
.dijitCalendarSelectedDate:hover {
	color: #FFF;
	background: #0397d7;
	border-radius: 10px;
}
.dijitCalendarHoveredDate,
.dijitCalendarPreviousYearHover,
.dijitCalendarNextYearHover,
.dijitCalendarMonthLabelHover {
	background-color: #dbdcdd;
	border-radius: 10px;
}
.dijitCalendarYearContainer td {
	font-weight: bold;
	border-top: 1px solid #dbdcdd;
	text-align: center;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

/* Tooltip
========================================================================== */
.dijitTooltipContainer {
	border-width: 1px;
	border-color: #34495e;
	background: #FFF;
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}
.mx-tooltip-content {
	padding: 5px;
}
.dijitTooltipConnector {
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-right-color: #34495e;
	border-width: 10px 10px 10px 0;
	margin-left:-10px;
}

/* ==========================================================================
   Beheer
   ========================================================================== */

.Beheer .mx-groupbox-body{
	border:0;
}
.Beheer .mx-groupbox-body .mx-groupbox{
	display:inline-block;
	width: 300px;
	vertical-align: top;
	margin: 0 10px 0 0;
}

/* ==========================================================================
   Rapportage
   ========================================================================== */

.Rapportage .mx-groupbox-body{
	border:0;
}
.Rapportage .mx-groupbox-body .mx-groupbox{
	display:inline-block;
	width: 400px;
	vertical-align: top;
	margin: 0 10px 0 0;
}

/* ==========================================================================
   Rapportage
   ========================================================================== */
.HelpTextButton{
	margin-top: 9px;
}

/* ==========================================================================
   SideBar
   ========================================================================== */
.faqtable{
	padding-left: 5px;
}
.faqtable h3 {
	padding-left: 8px;
}
.faqtable .mx-templategrid{
	border: none;
	padding-left: 0px;
	padding-top: 0px;
	border-width: 0px;
}
.faqtable .mx-templategrid-item{
	border-width: 0px;
}
.faqtable .mx-templategrid-content-wrapper{
	border-width: 0px;
}
.faqtable .faqlink a{
	color: #777;
	padding-left: 3px;
	border-width: 0px;
}
.faqtable .faqlink a:hover{
	text-decoration: underline;
}
.faqtable .mx-link{
	padding-left: 0px;
	border-width: 0px;
}
.question{
	font-size: 24px;
	padding-bottom: 10px;
}
.mx-link{
	padding: 3px 0 0 0;
}
/* ==========================================================================
   MenuBar
   ========================================================================== */
.menu{
	float: right; 
}
.menu a{
	padding-bottom: 0px; 
}
.MenuRegion {
	padding-top: 20px;
	border-right: 1px solid #f1edee;
	background: #f7f7f7;
}
.TitleRegion label{
	color:#ffffff;
	font-weight: bold;
	font-size: 14pt;
	padding:0;
}
.sidebar-email {
	padding: 3px;
    padding-left: 3px;
}
.sidebar-contacttable {
	display: block;
	overflow-x: auto;
}
.sidebar-mainmenu{
	margin-bottom: 100px;
}

.flexcontainer {
	display: flex;
}

.flexitem-main {
	flex: 1;
	margin-left: 5px;
}

.flex-end {
	align-items: end;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

.circleMobile
{
	position: fixed;
    bottom: 5px !important;
    right: 15px;
    width: 60px;
    height: 60px;
    font-size: 30px;
    line-height: 30px;
    box-shadow: 0px 2.5px 2.5px #191919;
	padding: 0;
	position: fixed;
    z-index: 3;
    border-radius: 50%;
	border-style: hidden;
	text-align: center;
	margin-right: 0 !important;
	background: #0397d7;
	color: #eee;
}

.circleMobileSmall
{
	right: 25px;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 12px;
	box-shadow: 0px 2.5px 2.5px #191919;
	padding: 0;
	position: fixed;
	z-index: 5;
	border-radius: 50%;
	border-style: hidden;
	text-align: center;
	margin-right: 0 !important;
	background: #0397d7;
	color: #eee;
}

.phoneInput
{
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.footer-button
{
	position: fixed;
	bottom: 5px;
	left: 5px; 
	float: left;
}