/* ************************************************************
 ***					   GENERAL CSS   					***
 **************************************************************/
/* General body and html setting */
body, html {
 font-size: 14px;
 font-family: 'Dosis', sans-serif;
 font-style: normal;
 margin:0px;
 padding:0px;
 min-width:50px;
 width:100%;
 height:100%;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 position: relative;
}

/* visual debugging of layout -> border: 1px dashed #CCCCCC !important; */
.container, .container div {
}

/* font styles */
@font-face {
  font-family: 'Dosis', sans-serif;
  font-style: normal;
  font-weight:400;
}

.bold{
	font-weight: bold;
}

/* change the uggly grey arrow in IE */
select::-ms-expand {
   width:12px;
   border:none;
   background:#fff;
} 
/* General label and input styles */
label{
	font-weight:normal;
	text-align:left;
	margin-bottom:0px;
	vertical-align:middle;
	width:100%;
	position:relative;
}
label.check-radio{
	cursor:pointer;
	display:inline-flex;
	align-items: center;
}
label.check-radio>input[type="checkbox"]{
	margin-right: 6px;
}
label sup, label sub{
	color:#B4B4B4;	
	position:absolute;
	right:0px;
	bottom:0px;
	line-height: inherit;
	font-size:11px;
}
input[type="checkbox"] {
  	height:20px;
	width:20px;
}
fieldset{
	background-color: transparent;
	border: 1px solid #BACDD3;
	padding: 8px 12px 8px 12px;
	margin-bottom: 10px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	border-radius: 6px;
	  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		   -o-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;
}
fieldset > legend{
	background-color: transparent;
	color: #0079C2;
	font-weight: bold;
	padding: 0px 5px;
}
/* proper rendering of canvas elements */
canvas { 
	box-sizing: initial; 
	image-rendering: pixelated
}
/* improve the look of an input file filed */
input[type=file] {
  width: 100%;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
}
input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #0B5ED7;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
  background: #0d45a5;
}


/* header title styles */
h1 { color: #38455F; margin: 10px 0px 5px 0px; font-size: 30px; font-weight:normal;}
h2 { color: #000000; margin:0px; font-size: 20px; font-weight:normal; font-family: 'Dosis', 'Open Sans', sans-serif;}
h3 { color: #000000; margin: 0px 0px 5px 0px; font-size: 15px; font-weight:normal; text-transform:uppercase;}
h4 { color: #0079C2; margin: 0px 0px 5px 0px; font-size: 18px; font-weight:normal;}
h5 { color: #2c556f; margin: 0px 0px 5px 0px; font-size: 15px; font-weight:normal; width:100%; background:#D7DCE0; padding:6px 10px;}
h6 { color: #000000; margin: 0px 0px 5px 0px; font-size: 25px; font-weight:normal; font-family: 'Frutiger', 'Open Sans', sans-serif;}
h7 { color: #0079C2; margin: 0px 0px 5px 0px; font-size: 15px; font-weight:normal;}

/* link styles */
a {
  color: #000000;
  text-decoration: underline;
  cursor:pointer;
}
a:hover,
a:focus {
  color: #000000;
}


/* horizontal rule style */
hr {
	border: 1px solid #2c556f;
	margin: 0px 0px 10px 0px ;
} 

hr.thin{
	height: 1px;
    background-color: #0079C2;
    border: none;
	margin: 0px 0px 15px 0px ;
}

hr.thin-grey{
	height: 1px;
    background-color: #BACDD3;
    border: none;
	margin: 0px 0px 15px 0px ;
}

/* BOX-SIZING
 * Set the box-sizing for all elements to border-box.
 * Elements should have padding and border included in the element's total width and height.
 * Otherwise lay-outs can get strange if thick borders or padding are applied to elements.
 * If box-sizing is set to content-box, the div will become too big, because the border or padding is in that case added to the total width and height of the div (= standard behaviour of a div element).
*/
*, *::before, *::after { 
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
	box-sizing:border-box;
}

/* better font rendering */
body, button, submit {
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-rendering: optimizeLegibility;	
}

/* delete standard margin and padding for forms */
form {
	padding:0px;
	margin:0px;	
}

/* make images standard responsive */
img {
  vertical-align: middle;
  max-width:100%;	
  max-height: auto;
}

/* tables should not be bigger than 100% */
table{
	max-width:100% !important;		
}

/* table background colour fix */
table {
  background-color: transparent;
}


@media print {
  *,
  *:before,
  *:after {
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: none !important;
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: none !important;
  }
  pre, blockquote, tr, img {
    page-break-inside: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3 {
    page-break-after: avoid;
  }
  .no-print, .no-print *
    {
        display: none !important;
    }
}

.error-message{
	padding:10px !important;
	background-color: #F85569;
	color:#ffffff;
	border: none !important;
  -webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;
	
}
.warning-message{
	padding:10px !important;
	background-color: #FFCF50;
	color:#ffffff;
	border: none !important;
  -webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;
	
}
.screen-messages{
	position:fixed;
	top:55px; 
	right:10px;
	z-index:100000000000;
	cursor:pointer;
}
.screen-message{
	width: 300px;
	max-width: 300px;
	height: auto;
	background-color: #ffffff;
	
	display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
	margin-bottom: 10px;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.50) !important;
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.50) !important;
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.50) !important;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
.screen-message.OK{
	border: 3px solid #02DA20;
}
.screen-message.NOK{
	border: 3px solid #F85569;
}
.screen-message.WARNING{
	border: 3px solid #FFCF50;
}
.screen-message-message{
	padding:10px;
	display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
.screen-message-icon-wrap{
  width:40px;
	display:flex;
	flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  align-self: auto;
	align-items: center;
	justify-content: center;
  order: 0;
}.screen-message-icon{
	font-size:24px;
	color: #ffffff;
	display: flex;
  	align-items: center;
}
.screen-message-icon-wrap.OK{
	background-color: #02DA20;
}
.screen-message-icon-wrap.NOK{
	background-color: #F85569;
}
.screen-message-icon-wrap.WARNING{
	background-color: #FFCF50;
}
.screen-message-icon.OK::before{
	content: '\f00c';
    font: var(--fa-font-solid);
	font-weight: bold;
	background-color: #02DA20;
}
.screen-message-icon.NOK::before{
	content: '\f00d';
    font: var(--fa-font-solid);
	font-weight: bold;
	background-color: #F85569;
}
.screen-message-icon.WARNING::before{
	content: '\f00d';
    font: var(--fa-font-solid);
	font-weight: bold;
	background-color: #FFCF50;
}



/* ****************************************************
 ***					LOGIN PAGE					***
 ******************************************************/
.body-login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  /* background: radial-gradient(circle, rgba(111,158,183,1) 0%, rgba(58,107,138,1) 100%); */
	background: #0B5ED7;
}

.form-signin {
  width: 330px;
  margin: auto;
}

.shield-signin {
  width: 330px;
	height: auto;
  padding: 25px;
  margin: auto;
  background: rgba(255,255,255,0.75);
  -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -2px rgba(0, 0, 0, 0.12)
}

.form-signin p {
	font-size: 28px;
	color: #4B5D6E;
	margin:10px;
}

.form-signin .user-icon {
	font-size: 86px !important;
	color: #4B5D6E;
}

.btn-login {
  background: #0082CE;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: 'Dosis', sans-serif;
  color: #fff;
  -webkit-border-radius: 20px !important ;
	-moz-border-radius: 20px !important;
	border-radius: 20px !important;
	width: 100%;
	text-transform:uppercase;
	margin: 0px !important;
}
.btn-login:hover,
.btn-login:focus,
.btn-login.focus,
.btn-login:active,
.btn-login.active {
  text-decoration: none;
  background-image: none;
  background: #89C500;
  color: #ffffff;
}
.fld-login{
	color: #ffffff !important;
	background: rgba(0,0,0,0.6)!important;
	border: none !important;
  -webkit-border-radius: 20px !important;
	-moz-border-radius: 20px !important;
	border-radius: 20px !important;
}

.fld-login:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff !important;
}

.fld-login::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff !important;
}

.fld-login::-webkit-input-placeholder { /* Edge */
  color: #ffffff !important;
}

.fld-login::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff !important;
  opacity: 1 !important; /* Firefox */
}

.login-philips{
	position: absolute;
	right: 0px;
	padding:50px;
	height:100%;
}
.login-philips-img{
	height:100%;
}

/**************************************************************
 ***					USER INTERFACE LAYOUT				***
 **************************************************************/
/* main layout container div */
.layout{
	display: flex;
	flex-direction: row;
	flex-wrap:no-wrap;
	width:100%;
	max-width:100% !important;
	height:100%;	
}
/* left container div, including the branding and the menu */
.left-container {
	width: 275px;
	min-width:275px;
	max-height:100%;
	display: flex;
	flex-direction: column;
	flex-wrap:no-wrap;
}
.branding {
	height:50px;
	display:flex;
	align-items:center;
	z-index:10;
	box-shadow: -6px 0px 14px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: -6px 0px 14px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -6px 0px 14px -2px rgba(0,0,0,0.75);
	border-right:6px solid #BDF0FF;
}	
/* menu container div */
.menu-container {
	width: 275px;
	min-width:275px;
	overflow:auto;
	flex:1;
	/* background: rgb(111,158,183);
    background: linear-gradient(0deg, rgba(111,158,183,1) 0%, rgba(58,107,138,1) 100%); */
	background:#0B5ED7;
	border-right:6px solid #BDF0FF;
}
/* menu icon style */
.menu-icon{
	margin-right:7px;	
}
/* content container div (incl. topbar, toolbar, titlebar and content) */
.content-container{
	flex:1;
	display: flex;
	flex-direction: column;
	flex-wrap:nowrap;
	background-color:#ECF2F6;
	background-color:#F4F7F9;
	padding:0px;	
}
/* top container div */
.topbar{
	height:50px;
	width:100%;
	max-width:100%;
	/* background: #3a6b8a;*/
	background: #0B5ED7;
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-shadow: 3px 0px 14px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 3px 0px 14px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 0px 14px -2px rgba(0,0,0,0.75);
}
.topbar div:last-child {
  margin-left: auto;
}
.topbar a{
	color: #ffffff;
	text-decoration:none;
	-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	border-radius: 8px;
	margin: 0px 2px;
}
.topbar button{
	color: #ffffff;
	background: transparent;
	border:none;
	text-decoration:none;
	font-size:14px;
	-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	border-radius: 8px;
	margin: 0px 2px;
	cursor: pointer;
}
.topbar button:hover{
	color: #ffffff;
	background-color: #00126E;
	text-decoration:none;
}
.topbar button:active, .topbar button:focus{
	text-decoration:none;
	outline:0; /* uggly dotted ring around selected link in Firefox */
}
.topbar .mc-caret{
	position: relative;
	left:-14px;
	z-index:5000;
	font-size:20px;
	color:#0B5ED7;
}
.topbar .mc-toggle{
	position:relative;
	left:-8px;
}
.topbar .s-btn{
	font-size:16px;
	width:40px;
	height:40px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	float: left;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
  	border-radius: 50%;
	-webkit-transition: background-color .28s ease;
  	transition: background-color .28s ease;
}
.topbar .s-btn:hover{
	background-color:#FFCF50;
	-webkit-transition: background-color .28s ease;
  	transition: background-color .28s ease;
}
.btn-topbar {
  padding: 8px 10px;
	position: relative;
  	-webkit-transition: color .28s ease, background-color .28s ease, border .28s ease;
  	transition: color .28s ease, background-color .28s ease, border .28s ease;
}
.btn-topbar:hover {
 	text-decoration: none;
}
.btn-topbar:focus,
.btn-topbar.focus,
.btn-topbar:active,
.btn-topbar.current {
 	text-decoration: none;
	/* background: #3a6b8a;*/
	background: #BDF0FF;
	color: #0B5ED7;
	box-shadow: 0px 14px 10px -11px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 14px 10px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 14px 10px -11px rgba(0,0,0,0.75);
}

.hamburger-nav {
  display:inline-block !important;
  margin-top:5px;
  transition: transform .2s ease-in-out;
  background: transparent;
}
.hamburger-nav:before,
.hamburger-nav:after {
  content: "";
}
.hamburger-nav:before,
.hamburger-nav .icon,
.hamburger-nav:after {
  display: block !important;
  width: 20px !important;
  height: 3px;
  margin: 0 0 .20em;
  transition: transform .2s ease-in-out;
  border-radius: .05em;
  background: #ffffff;
}
.hamburger-nav.active:before,
.hamburger-nav.active .icon,
.hamburger-nav.active:after {
  background: #ffffff;
}

.hamburger-nav:hover::before,
.hamburger-nav:hover .icon,
.hamburger-nav:hover::after {
  background: #BDF0FF;
}

/**

/**
 * CLOSE/CANCEL/CROSS
 */
.hamburger-nav.hamburger-nav-cancel.active .icon {
  transform: scale(0);
}
.hamburger-nav.hamburger-nav-cancel.active:before {
  transform: translateY(.4em) rotate(135deg);
}
.hamburger-nav.hamburger-nav-cancel.active:after {
  transform: translateY(-.4em) rotate(-135deg);
}

/* toolbar container div */
.toolbar{
	height:45px;
	width:100%;	
	background-color:#F4F7F9;
	border-bottom: 1px solid #BACDD3;
	display:flex;
	align-items:center;	
	padding-left:10px;
}
.btn-toolbar{
	color: #34404A;
	text-decoration:none;
	padding: 5px 8px 7px 8px;
	border: 1px solid #F4F7F9;
	margin-left:5px;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
}
.btn-toolbar .txt{
	vertical-align: middle;
}
.btn-toolbar .icon{
	vertical-align: middle;
	font-size: 16px;
}
.btn-toolbar:hover,
.btn-toolbar:active,
.btn-toolbar:focus{
	color: #000000;
	background-color: #F9E4A5;
	border: 1px solid #EFB50A;
	text-decoration:none;
	outline:0; /* uggly dotted ring around selected link in Firefox */
}
/* toolbar container div */
.filterbar{
	height:45px;
	width:100%;	
	background-color:#ffffff;
	border-bottom: 1px solid #BACDD3;
	display:flex;
	align-items:center;	
	padding-left:15px;
}
.btn-filterbar{
	color: #34404A;
	text-decoration:none;
	padding: 5px 8px 7px 8px;
	border: 1px solid #F4F7F9;
	background-color:transparent;
	margin-left:5px;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
	cursor: pointer;
}
.btn-filterbar .txt{
	vertical-align: middle;
}
.btn-filterbar .icon{
	vertical-align: middle;
	font-size: 16px;
}
.btn-filterbar:hover{
	color: #000000;
	background-color: #F9E4A5;
	border: 1px solid #EFB50A;
	text-decoration:none;
	outline:0; /* uggly dotted ring around selected link in Firefox */
}
#filterfields{
	padding:20px;
	position:absolute;
	top:60px;
	left:35px;
	z-index:100000;
	overflow:visible;
	background-color: #ffffff;
	border: 1px solid #F4F7F9;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	
	box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.50);
-webkit-box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.51);
}
#filterfields.no-offset{
	top:43px;
	left:15px;	
}
#filterfields:after{
	content:'';
	display: block;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid #ffffff;
	position:absolute;
	left:10px;
	top:-8px;
	
}
#filterfields .footer{
	border-top:1px solid #F4F7F9;
	padding-top:10px;
	display: flex;
	align-content: center;
}

.filtertag{
	background-color:#E5FFE9;
	color:#02DA20;border:1px solid #02DA20;
	padding:1px 10px;
	margin-left:5px;
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	text-align: left;
}
.filtertag > .title{
	font-size:11px;
}
.filtertag > .value{
	font-size:13px;
}

/* tabbar container div */
.tabbar{
	display:flex;
	height:45px;
	line-height:35px;
	width:100%;	
	background-color:#D7DCE0;
	text-transform: uppercase;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0 auto;
	padding:10px 0px 0px 10px;
	white-space: nowrap;
}
.btn-tabbar{
	display: inline-block;
  	text-align: center;
	margin:0px 1px;
}
.btn-tabbar a {
  	color: #FFFFFF;
	background: #0B5ED7; /* 2c556f */
    border: 1px solid #0B5ED7; /* 2c556f */
	height:35px;
  	display: block;
  	width: 100%;
	padding: 0px 15px;
	text-decoration:none;
	-webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
  	-webkit-transition: color .28s ease, background-color .28s ease, border .28s ease;
  	transition: color .28s ease, background-color .28s ease, border .28s ease;
}
.btn-tabbar a.active {
  outline: none;
  color: #0B5ED7; /* 2c556f */
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-bottom:1px solid #FFFFFF ;
}
.btn-tabbar a:hover {
	background: #BDF0FF; /* 75a7c2 */
	border: 1px solid #BDF0FF; /* 75a7c2 */
	color: #0B5ED7;
}
/* this is for tabs in the webpage itself, not the tabs in the main template, beneath the toolbar */
.tabcontainer > .tab-content{
	padding:10px;
}

/* titlebar container div */
.titlebar{
	height:60px;
	width:100%;	
	border-top:1px solid #0079C2;
	border-bottom: 1px solid #BACDD3;
	display:flex;
	align-items:center;	
}
.titlebar div{
	padding:20px;
}
.titlebar .title{
	font-size: 22px;
	color: #000000;
	font-weight:normal;
	font-family: 'Frutiger', 'Open Sans', sans-serif;
}
.titlebar .q-search{
	align-items:flex-end;
	flex-grow: 1;
	padding-left:20px;
}
.titlebar .q-search input{
	border: 1px solid #BACDD3;
	padding:8px 7px 7px 35px;
	color: #333333;
	font-size: 16px;
	background:url("q-search.png") no-repeat 5px;
	background-color: #ffffff;
   	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
    border-radius: 6px;
}
.titlebar .q-search input:focus{
	outline: none;
}
/* content container div, to display the specific page content */
.content{
	flex:1;
	overflow:auto;
}
/* layer with spinner to show the user that something's loading */
#overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 1000000000000000000000000;
  background:#ffffff;
  filter:alpha(opacity=50);
  opacity:0.5;
}

/* layer with spinner to show the user that something's loading in a module window */
.model-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 100000000000000000000000;
  background:#ffffff;
  filter:alpha(opacity=50);
  opacity:0.5;
}

.sticky{
	position: -webkit-sticky !important; /* this is for all Safari (Desktop & iOS), not for Chrome */
    position: sticky !important;
	top: 0;
}




/******************************************************
 ***					GENERAL MENU				***
 ******************************************************/
.menu{
	width:100%;
	padding:5px;
}
.menu .inner{
	vertical-align:middle;
	width:100%;
}
/* sub menu toggle arrow */
.submenu-toggle{
	position: absolute;
    top: 2px;
    right: 11px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
    z-index: 1;
	color:#ffffff; /* from #navigation-sub ul li */
    
}
.submenu-toggle.active{
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.submenu-toggle:hover {
    background: #BDF0FF; /* #adc3d2 */
}
/* 
 * we only define a :hover style for the mobile menu items, no pseudo :active or :focus style !!
 * we toggle the pseudo :active and :focus style via class .active in a jquery on("click") event, see scripts.js
 */
.menu .inner a, .menu .inner a.active{
	text-decoration:none;
	color:#ffffff;
}
/* container for menu items, the #navigation-sub div must be inside the menu inner div */
#navigation-sub{
	width:100%;
	overflow:auto;
	cursor:pointer;
}
#navigation-sub ul{
	width:100%;
	list-style: none;
	padding:0px;
	margin:0px;
}
#navigation-sub ul a{
	height:100%;
	display:block;
	padding:8px;
	color: #ffffff;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	margin: 5px 0px 5px 0px;
	-webkit-transition: color .28s ease, background-color .28s ease, border .28s ease;
  	transition: color .28s ease, background-color .28s ease, border .28s ease;
}
#navigation-sub ul a:hover{
	background-color: #00126E; /* #5E317C */
	color: #ffffff !important;
	text-decoration:none;
}
#navigation-sub ul li{
	color:#000000;
	position:relative;
}
/* hide sub menus by targeting any UL’s within a UL */
#navigation-sub ul ul {
	display:none;
	z-index:10000; /* place items on top of other elements on de page */
}
#navigation-sub ul ul li{
	border: 0px;
	padding:2px;
}
#navigation-sub ul ul a{
	margin: 0px 0px 0px 30px;
}
#navigation-sub ul ul a:before {
    content: "";
    height: 100%;
    opacity: 1;
    width: 3px;
    background: #e0f3ff;
    position: absolute;
    left: 15px;
    top: 0;
}

#navigation-sub ul ul ul a{
	margin-left:60px;
}
#navigation-sub ul ul ul ul a{
	margin-left:90px;
}
#navigation-sub ul ul ul ul ul a{
	margin-left:120px;
}

/* current active menu item */
#navigation-sub ul a.current,#navigation-sub ul ul a.current{
	border-left: 4px solid #6DB7F2;	
	/* background-color: #5E317C; */
	background-color: #BDF0FF;
	color: #0B5ED7 !important;
	padding-left:4px;
}


/* bottom div at the end of a menu list, to prevent from showing a scrollbar when toggling ul items */
.nav-block-bottom{
	height:5px;	
}





/**************************************************
 ***					MOBILE MENU				***
 **************************************************/
.mobile-menu{
	display: none;
	height:50px; /* must have the same height as the .inner and .inner a div */
}
.mobile-menu .inner{
	height:50px; /* must have the same height as the .mobile-menu and .inner a div */
	position:fixed;
	top:0;
	left:0;
	z-index:100000;
	vertical-align:middle;
	width:100%;
	padding-left:10px;
	padding-right:10px;
	background-color:#2F3A4D;
}
.mobile-menu .inner .parent-nav{
	height:inherit;
	z-index:inherit;
	position:relative;
    -webkit-box-shadow: 0 10px 32px -20px #000000;
	   -moz-box-shadow: 0 10px 32px -20px #000000;
	        box-shadow: 0 10px 32px -20px #000000;
}
.mobile-menu .inner .parent-nav a{
	height:50px; /* must have the same height as the .mobile-menu and .inner div */
	line-height:46px; /* a bit smaller than the heigt, to center the text vertically */
	position:relative;
	float:left;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	-webkit-transition:background-color 0.3s,ease;
	-moz-transition:background-color 0.3s,ease;
	-o-transition:background-color 0.3s,ease;
	transition:background-color 0.3s,ease;	
	border-left:1px solid #ffffff;
	padding-left:20px;
	padding-right:20px;
	color:#ffffff;	
}
.mobile-menu .inner .parent-nav a:last-of-type{
	border-right:1px solid #ffffff;
}
/* make all the span elements inside the anchor inline */
.mobile-menu .inner .parent-nav a span{
	display:inline;
	vertical-align:middle;
}
.mobile-menu .inner .parent-nav a span.icon{
	font-size:24px;
}
/* the mobile menu label is standard hidden */
.mobile-menu .inner .parent-nav a span.label{	
	padding-left:10px;
    display:none;
}
/* add show-all in case a lable must always be visible */
.mobile-menu .inner .parent-nav a span.label.show-all{	
	display:inline;
}
/* 
 * we only define a :hover style for the mobile menu items, no pseudo :active or :focus style !!
 * we toggle the pseudo :active and :focus style via class .active in a jquery on("click") event, see scripts.js
 */
.mobile-menu .inner .parent-nav a:hover, .mobile-menu .inner .parent-nav a.active{
	background-color:#556176;
	text-decoration:none;
	color:#ffffff;
}
/* show the mobile menu label on bigger mobile screens */
@media (min-width: 500px) {
	.mobile-menu .inner .parent-nav a span.label{	
		display:inline;
	}
}
/* 
 * mobile sub navigation list with menu's
 * the #mobile-navigation-sub div must be inside the mobile-menu inner div
 * we give it a top 100% style, so it's placed directly under the mobile-menu inner div
 */
#mobile-navigation-sub{
	display:none;
	position:absolute;
	top:100%;	
	left:0px;
	overflow:auto;
	cursor:pointer;
	width:75%;
	-webkit-box-shadow: 10px 9px 10px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 9px 10px -9px rgba(0,0,0,0.75);
	box-shadow: 10px 9px 10px -9px rgba(0,0,0,0.75);
	background-color:#2F3A4D;
}
#mobile-navigation-sub ul{
	width:100%;
	list-style: none;
	padding:0px;
	margin:0px;
	background-color:inherit;
}
#mobile-navigation-sub ul li{
	position:relative;
	border-top: 1px solid #485970;
	border-bottom: 1px solid #151A1E;
	color:#ffffff;
}
#mobile-navigation-sub ul a{
	height:100%;
	display:block;
	text-decoration:none;
	padding:15px 50px 15px 15px;
	color:inherit; /* from #mobile-navigation-sub ul li */
}
#mobile-navigation-sub ul a:hover{
	background-color:#556176;
}
/* hide mobile sub menus by targeting any UL’s within a UL */
#mobile-navigation-sub ul ul {
	display:none;
	z-index:10000; /* place items on top of other elements on de page */
	background-color: #3D4A5E;
}
#mobile-navigation-sub ul ul li{
	border: 0px;
}
#mobile-navigation-sub ul ul a{
	padding-left:30px;
}
#mobile-navigation-sub ul ul ul a{
	padding-left:60px;
}
#mobile-navigation-sub ul ul ul ul a{
	padding-left:90px;
}
#mobile-navigation-sub ul ul ul ul ul a{
	padding-left:120px;
}
#mobile-navigation-sub ul a:hover{
	text-decoration:none;
}

.hamburger {
  display:inline-block !important;
  margin-top:5px;
  transition: transform .2s ease-in-out;
  background: transparent;
}
.hamburger:before,
.hamburger:after {
  content: "";
}
.hamburger:before,
.hamburger .icon,
.hamburger:after {
  display: block !important;
  width: 24px !important;
  height: 4px;
  margin: 0 0 .15em;
  transition: transform .2s ease-in-out;
  border-radius: .05em;
  background: #ffffff;
}
.hamburger.active:before,
.hamburger.active .icon,
.hamburger.active:after {
  background: #ffffff;
}

/**

/**
 * CLOSE/CANCEL/CROSS
 */
.hamburger.hamburger-cancel.active .icon {
  transform: scale(0);
}
.hamburger.hamburger-cancel.active:before {
  transform: translateY(.4em) rotate(135deg);
}
.hamburger.hamburger-cancel.active:after {
  transform: translateY(-.4em) rotate(-135deg);
}


/* mobile sub menu toggle arrow */
.mobile-submenu-toggle{
	position: absolute;
    top: 6px;
    right: 11px;
    width: 40px;
    height: 40px;
    font: 400 14px "FontAwesome";
    line-height: 40px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
    z-index: 1;
	color:inherit; /* from #mobile-navigation-sub ul li */
    background: rgba(0, 0, 0, 0.1);
}
.mobile-submenu-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
}
.mobile-submenu-toggle.active{
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* toggle query for the general or mobile navigation */
@media (max-width: 1199px) {
	.mobile-menu{
		display:block;
	}
	.main-menu{
		display:none;
	}
}






/* ************************************************************
 ***			    	  FORM DESIGN			        	***
 **************************************************************/
/*
 * Form rows
 * Every element in a form row should have a bottom margin, so there's some space between the fields
 *
 * Form design must come before the grid system in CSS, so we can change the width of a form-group with the grid css elements.
 * -> for example, a form group is standard 100% wide, but if we want to float form groups next to each other in a form-row, we can add xs-9 to the form-group so the element becomes less wide
 */
.form-row{
	width:100%;
}

.form-row::after{
	content: "";
  	display: table;
  	clear: both;
}
/*
 * Group of elements, for example field with label
 * Every group should have some margin at the right, so there's space between elements
 * Except for the last element, so it's nicely aligned to the right border of the parent element (most left margin and moste right margin are the same, both 0)
 */
.form-group {
	margin-bottom:5px;
    float:left;
	padding-left:5px;
	padding-right:5px;
	position:relative;
	width:100%;
}
/* 
 * Elements placed inside a form group should get some margins
 * Except for labels, they should get no margins, as we want to display them directly on top of an input element.
 */
.form-control {
  display: block;
	font-family: inherit;
	font-size: inherit;
  width: 100%;
  height: 36px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border:1px solid #ccc;
  padding: 8px;
  margin-bottom: 5px;
   	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-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;
}
textarea.form-control{
	height: 125px;
}
textarea.form-control.small{
	height: 75px;
}
textarea.form-control.xsmall{
	height: 60px;
}
textarea.form-control.big{
	height: 165px;
}
textarea.form-control.oneline{
	height: 36px;
}
.textarea.form-control[disabled],
.textarea.form-control[readonly]{
  background-color: #fff;
	opacity: 1;
}
.form-control.auto-width {
	width:auto;
}
.form-control:focus {
  border-color: #25B9D7;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #fff;
	opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}
.form-control.narrow{
	padding: 4px;
  	margin-bottom: 0px;
  	height: 32px;
}
.btn-form-element {
  background-color: #CCCCCC;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  padding: 1px 6px 2px 6px;	
  border:1px solid #CCCCCC;
   	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px;
  	border-radius: 3px;
}
.btn-form-element:hover,
.btn-form-element:focus,
.btn-form-element.focus {
  text-decoration: none;
  outline:none;
  background-color: #25B9D7;
  border: 1px solid #25B9D7;
  color: #FFFFFF;
}
.btn-form-element:active,
.btn-form-element.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

@media (min-width: 768px){
	.form-control {
	  display: inline-block;
	  max-width:100%;
	  vertical-align: middle;
	}
}
/*
 * required fields in forms
 */
label.required:after {
    content:" *";
}
/*
 * modify the padding for form control select elements
 */
select.form-control {
	padding:0px 5px !important;
}
/* add class form-inline to a form in case the fields and labels must be inline, in one row */
.form-inline label{
	display:inline-block;
	margin-right:5px;
	width:auto;
}
.form-inline .form-control{
	margin-bottom:0px;
}
/* 
 * Form input groups
 * These are combinations of input elements and a button or icon right or left of the input element
 */
.input-group-right {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group-right>:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
	position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group-right>:last-child  {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
	border:1px solid #ccc;
	border-left: 0;
	position: relative;
    z-index: 2;
	width:35px;
	background-color: #F4F7F9 !important;
	text-align: center;
	vertical-align: middle;
	font-size: 16px !important;
	padding: 7px;
	color: #000000 !important;
  	-webkit-transition: none;
       -o-transition: none;
          transition: none;
}
.input-group-right>:last-child:hover {
	background-color: #00126E !important;
	border-color: #00126E !important;
	color: #fff !important;
}
.input-group-right>:last-child:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.input-group-right>:last-child:active {
	color: #000000 !important;
}
.input-group-right.red>:last-child:hover {
	background-color: #F85569 !important;
	border-color: #F85569 !important;
	color: #fff !important;
}
.input-group-left {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group-left>:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
	position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group-left>:first-child  {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
	border:1px solid #ccc;
	border-right: 0;
	position: relative;
    z-index: 2;
	width:35px;
	background-color: #F4F7F9 !important;
	text-align: center;
	vertical-align: middle;
	font-size: 16px !important;
	padding: 7px;
	color: #000000 !important;
  	-webkit-transition: none;
       -o-transition: none;
          transition: none;
}
.input-group-left>:first-child:hover {
	background-color: #00126E !important;
	border-color: #00126E !important;
	color: #fff !important;
}
.input-group-left>:first-child:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.input-group-left>:first-child:active {
	color: #000000 !important;
}
.input-group-left.red>:first-child:hover {
	background-color: #F85569 !important;
	border-color: #F85569 !important;
	color: #fff !important;
}
label.inline {
	display: block;
	padding-left: 15px;
	text-indent: -15px;
 }
input.inline {
	width: 15px;
	height: 15px;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
	position: relative;
	top: -1px;
}
.auto-width{
	width:auto !important;
	width: -moz-fit-content !important;
  width: fit-content !important;
  display: table !important;
}
.display-inline{
	display: inline;
	white-space: nowrap;
}




/* ************************************************************
 ***				RESPONSIVE GRID SYSTEM V1.0				***
 **************************************************************/
/*
 * Clearfix: contain floats
 * The use of display `table` rather than `block` is only necessary if using
 * `:before` to contain the top-margins of child elements.
 *
 * Row and row-fix don't float, see row and row-fix elements below.
 * The children of a row and row-fix float. Because of that, the row div doesn't have the same height as the children, it is just 0px or 1px heigh (because of the 1px min-height).
 * In other words, the children are not positioned inside of the row div, they float inside of the row div and therefore the row div doesn't need a height.
 * This looks weird if you give the row div a border or a background colour, as the div would be 1px heigh with a background colour and it would look like the children would float outside the parent div.
 * The parent row or row-fix div would collapse. To solve this issue, we need to add the clearfix hack to these divs.
 */
.clearfix::before, .row::before, .row-fix::before, .clearfix::after, .row::after, .row-fix::after {
  content: " ";
  display: table;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix::after, .row::after, .row-fix::after{
  clear: both;
}
.container::after, .container-fix::after {
  content: "";
  display: table;
  clear: both;
}
/* General container and row attributes */
.container, .container-fix, .row-fix, .row {
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  min-height:1px;
}
/* Standard container is 100% wide */
.container {
	max-width: 100%;
	padding:10px;
}
/* 
 * Standard rows is 100% wide  
 * Standard row-fix is also 100% wide for smartphones or small screens, but the width might change due to the media queries on larger screens
 * Rows don't need a float style. Certainly a row-fix cannot have a float as otherwise it cannot be centered in the middle of the screen via margin-left and margin-right: auto.
 */
.row, .row-fix {
	width:100%;
}
/* Container-fix and row-fix have a fixed width, depending on the screen resolution. */
@media (min-width: 768px) {
  .container-fix, .row-fix {
    width: 665px !important; /* 665 757px */
  }
}
@media (min-width: 992px) {
  .container-fix, .row-fix {
    width: 890px !important; /* 890 973px */
  }
}
@media (min-width: 1200px) {
  .container-fix, .row-fix {
    width: 900px !important; /* 1080 1170px */
  }
}
@media (min-width: 1500px) {
  .container-fix, .row-fix {
    width: 1000px !important;/* 1250 1470px*/
  }
}
@media (min-width: 1800px) {
  .container-fix, .row-fix {
    width: 1000px !important;/* 1270 1620px*/
  }
}
/*
 * General column width is 100%
 * This makes all the columns collapse into a single row of 98% wide (like a standard div would do, collapsed under each other instead of floating next to each other)
 * This is the standard behaviour (mobile first), unless one of the media queries below is used to float the divs next to each other on bigger screens.
 */
.col{
	width:100% ;
	margin-left:0%;
	margin-right:0%;
	min-height:1px;
	position:relative;
	float:left;
	text-align:center;
	padding:10px;/* can be overruled */
}
/* make sure that divs inside a col do not inherit the padding */
.col > div{
	padding:0px;/* can be overruled */
}

.col:last-child {
	float:right; /*In order to work around browsers' different subpixel rounding behaviors, this way the last column in a list is always nicely aligned to the right (no px offset at the right)*/
}

/* Overwrite '.col:last-child float:right' behaviour, in case it is desired */
.col.end{
	float:left; /* If the row doesn't have a count that adds up to 12 (16 or 18) columns, you can tag the last column with a 'end' class in order to overwrite the float right behavior of the '.col:last-child' */
}
.fluid > .col:last-child {
	float:left !important; /* 'fluid' tag can de added to a row class in case you don't know the last column (in case it's not possible to use the 'end' class) */
}
.col.single-center{/* In case you want a single column with a specific width (e.g. xs-9) to center in the middle of the page */
	float:none; 
	margin-left:auto;
	margin-right:auto;
}
/* 
 * STANDARD column behaviour in a row = no surround margins around columns, columns have a standard padding but there's no space between the columns
 * GALLERY column behaviour in a row = surround margins are added around a column (gutters or spacing between columns)
 * add class 'gallery' or 'gallery-wide' to the row div
 * gallery = margin around all the columns (left top right bottom)
 * gallery wide = margin around all the columns (left top right bottom), except for the first and last column (- left margin of the first column, - right margin of the last column -> outer left and rght column are aligned to the border of the container)
 * we give a gallery column no float style, but change it to inline-block, see also styleguide example 2.
 */
.row.gallery > .col, .row-fix.gallery > .col, .row.gallery-wide > .col, .row-fix.gallery-wide > .col{
	margin:0.5%;
	float:none;
	display:inline-block;
	vertical-align:top;
}
.row.gallery-wide > .col:first-child, .row-fix.gallery-wide > .col:first-child{
	margin-left:0%;	
}
.row.gallery-wide > .col:last-child, .row-fix.gallery-wide > .col:last-child{
	margin-right:0%;	
}
/*
 * The width of a gallery colomn should be set to 99% instead of 100%.
 * The reason is the 0.5% margin (1% in total).
 * If the width of a gallery column would also be 100%, the column would look strange in case they are collapsed (left 0.5% margin but no margin at the right, or at the left no margin and 0.5% margin at the right)
 */
.row.gallery > .col, .row-fix.gallery > .col{
	width:99%;
}
/* MEDIA QUERIES FOR BIGGER SCREENS */
@media (min-width: 340px) {
	.xs-18{width:100%;}
	.xs-17{width:94.4444444444444%;}
	.xs-16{width:88.8888888888889%;}
	.xs-15{width:83.3333333333333%;}
	.xs-14{width:77.7777777777778%;}
	.xs-13{width:72.2222222222222%;}
	.xs-12{width:66.6666666666667%;}
	.xs-11{width:61.1111111111111%;}
	.xs-10{width:55.5555555555556%;}
	.xs-9{width:50%;}
	.xs-8{width:44.4444444444444%;}
	.xs-7{width:38.8888888888889%;}
	.xs-6{width:33.3333333333333%;}
	.xs-5{width:27.7777777777778%;}
	.xs-4{width:22.2222222222222%;}
	.xs-3{width:16.6666666666667%;}
	.xs-2{width:11.1111111111111%;}
	.xs-1{width:5.55555555555556%;}
	
	.row.gallery > .xs-18, .row-fix.gallery > .xs-18{width:99%;}
	.row.gallery > .xs-17, .row-fix.gallery > .xs-17{width:93.4444444444444%;}
	.row.gallery > .xs-16, .row-fix.gallery > .xs-16{width:87.8888888888889%;}
	.row.gallery > .xs-15, .row-fix.gallery > .xs-15{width:82.3333333333333%;}
	.row.gallery > .xs-14, .row-fix.gallery > .xs-14{width:76.7777777777778%;}
	.row.gallery > .xs-13, .row-fix.gallery > .xs-13{width:71.2222222222222%;}
	.row.gallery > .xs-12, .row-fix.gallery > .xs-12{width:65.6666666666667%;}
	.row.gallery > .xs-11, .row-fix.gallery > .xs-11{width:60.1111111111111%;}
	.row.gallery > .xs-10, .row-fix.gallery > .xs-10{width:54.5555555555556%;}
	.row.gallery > .xs-9, .row-fix.gallery > .xs-9{width:49%;}
	.row.gallery > .xs-8, .row-fix.gallery > .xs-8{width:43.4444444444444%;}
	.row.gallery > .xs-7, .row-fix.gallery > .xs-7{width:37.8888888888889%;}
	.row.gallery > .xs-6, .row-fix.gallery > .xs-6{width:32.3333333333333%;}
	.row.gallery > .xs-5, .row-fix.gallery > .xs-5{width:26.7777777777778%;}
	.row.gallery > .xs-4, .row-fix.gallery > .xs-4{width:21.2222222222222%;}
	.row.gallery > .xs-3, .row-fix.gallery > .xs-3{width:15.6666666666667%;}
	.row.gallery > .xs-2, .row-fix.gallery > .xs-2{width:10.1111111111111%;}
	.row.gallery > .xs-1, .row-fix.gallery > .xs-1{width:4.55555555555556%;}
	
	.row.gallery-wide > .col.xs-18, .row-fix.gallery-wide > .col.xs-18{width:100%;}
	.row.gallery-wide > .col.xs-17, .row-fix.gallery-wide > .col.xs-17{width:94.3888888888889%;}
	.row.gallery-wide > .col.xs-16, .row-fix.gallery-wide > .col.xs-16{width:88.7777777777778%;}
	.row.gallery-wide > .col.xs-15, .row-fix.gallery-wide > .col.xs-15{width:83.1666666666667%;}
	.row.gallery-wide > .col.xs-14, .row-fix.gallery-wide > .col.xs-14{width:77.5555555555555%;}
	.row.gallery-wide > .col.xs-13, .row-fix.gallery-wide > .col.xs-13{width:71.9444444444444%;}
	.row.gallery-wide > .col.xs-12, .row-fix.gallery-wide > .col.xs-12{width:66.3333333333333%;}
	.row.gallery-wide > .col.xs-11, .row-fix.gallery-wide > .col.xs-11{width:60.7222222222222%;}
	.row.gallery-wide > .col.xs-10, .row-fix.gallery-wide > .col.xs-10{width:55.1111111111111%;}
	.row.gallery-wide > .col.xs-9, .row-fix.gallery-wide > .col.xs-9{width:49.5%;}
	.row.gallery-wide > .col.xs-8, .row-fix.gallery-wide > .col.xs-8{width:43.8888888888889%;}
	.row.gallery-wide > .col.xs-7, .row-fix.gallery-wide > .col.xs-7{width:38.2777777777778%;}
	.row.gallery-wide > .col.xs-6, .row-fix.gallery-wide > .col.xs-6{width:32.6666666666667%;}
	.row.gallery-wide > .col.xs-5, .row-fix.gallery-wide > .col.xs-5{width:27.0555555555556%;}
	.row.gallery-wide > .col.xs-4, .row-fix.gallery-wide > .col.xs-4{width:21.4444444444444%;}
	.row.gallery-wide > .col.xs-3, .row-fix.gallery-wide > .col.xs-3{width:15.8333333333333%;}
	.row.gallery-wide > .col.xs-2, .row-fix.gallery-wide > .col.xs-2{width:10.2222222222222%;}
	.row.gallery-wide > .col.xs-1, .row-fix.gallery-wide > .col.xs-1{width:4.61111111111111%;}
}

@media (min-width: 768px) {
	.s-18{width:100%;}
	.s-17{width:94.4444444444444%;}
	.s-16{width:88.8888888888889%;}
	.s-15{width:83.3333333333333%;}
	.s-14{width:77.7777777777778%;}
	.s-13{width:72.2222222222222%;}
	.s-12{width:66.6666666666667%;}
	.s-11{width:61.1111111111111%;}
	.s-10{width:55.5555555555556%;}
	.s-9{width:50%;}
	.s-8{width:44.4444444444444%;}
	.s-7{width:38.8888888888889%;}
	.s-6{width:33.3333333333333%;}
	.s-5{width:27.7777777777778%;}
	.s-4{width:22.2222222222222%;}
	.s-3{width:16.6666666666667%;}
	.s-2{width:11.1111111111111%;}
	.s-1{width:5.55555555555556%;}

	.row.gallery > .s-18, .row-fix.gallery > .s-18{width:99%;}
	.row.gallery > .s-17, .row-fix.gallery > .s-17{width:93.4444444444444%;}
	.row.gallery > .s-16, .row-fix.gallery > .s-16{width:87.8888888888889%;}
	.row.gallery > .s-15, .row-fix.gallery > .s-15{width:82.3333333333333%;}
	.row.gallery > .s-14, .row-fix.gallery > .s-14{width:76.7777777777778%;}
	.row.gallery > .s-13, .row-fix.gallery > .s-13{width:71.2222222222222%;}
	.row.gallery > .s-12, .row-fix.gallery > .s-12{width:65.6666666666667%;}
	.row.gallery > .s-11, .row-fix.gallery > .s-11{width:60.1111111111111%;}
	.row.gallery > .s-10, .row-fix.gallery > .s-10{width:54.5555555555556%;}
	.row.gallery > .s-9, .row-fix.gallery > .s-9{width:49%;}
	.row.gallery > .s-8, .row-fix.gallery > .s-8{width:43.4444444444444%;}
	.row.gallery > .s-7, .row-fix.gallery > .s-7{width:37.8888888888889%;}
	.row.gallery > .s-6, .row-fix.gallery > .s-6{width:32.3333333333333%;}
	.row.gallery > .s-5, .row-fix.gallery > .s-5{width:26.7777777777778%;}
	.row.gallery > .s-4, .row-fix.gallery > .s-4{width:21.2222222222222%;}
	.row.gallery > .s-3, .row-fix.gallery > .s-3{width:15.6666666666667%;}
	.row.gallery > .s-2, .row-fix.gallery > .s-2{width:10.1111111111111%;}
	.row.gallery > .s-1, .row-fix.gallery > .s-1{width:4.55555555555556%;}
		
	.row.gallery-wide > .col.s-18, .row-fix.gallery-wide > .col.s-18{width:100%;}
	.row.gallery-wide > .col.s-17, .row-fix.gallery-wide > .col.s-17{width:94.3888888888889%;}
	.row.gallery-wide > .col.s-16, .row-fix.gallery-wide > .col.s-16{width:88.7777777777778%;}
	.row.gallery-wide > .col.s-15, .row-fix.gallery-wide > .col.s-15{width:83.1666666666667%;}
	.row.gallery-wide > .col.s-14, .row-fix.gallery-wide > .col.s-14{width:77.5555555555555%;}
	.row.gallery-wide > .col.s-13, .row-fix.gallery-wide > .col.s-13{width:71.9444444444444%;}
	.row.gallery-wide > .col.s-12, .row-fix.gallery-wide > .col.s-12{width:66.3333333333333%;}
	.row.gallery-wide > .col.s-11, .row-fix.gallery-wide > .col.s-11{width:60.7222222222222%;}
	.row.gallery-wide > .col.s-10, .row-fix.gallery-wide > .col.s-10{width:55.1111111111111%;}
	.row.gallery-wide > .col.s-9, .row-fix.gallery-wide > .col.s-9{width:49.5%;}
	.row.gallery-wide > .col.s-8, .row-fix.gallery-wide > .col.s-8{width:43.8888888888889%;}
	.row.gallery-wide > .col.s-7, .row-fix.gallery-wide > .col.s-7{width:38.2777777777778%;}
	.row.gallery-wide > .col.s-6, .row-fix.gallery-wide > .col.s-6{width:32.6666666666667%;}
	.row.gallery-wide > .col.s-5, .row-fix.gallery-wide > .col.s-5{width:27.0555555555556%;}
	.row.gallery-wide > .col.s-4, .row-fix.gallery-wide > .col.s-4{width:21.4444444444444%;}
	.row.gallery-wide > .col.s-3, .row-fix.gallery-wide > .col.s-3{width:15.8333333333333%;}
	.row.gallery-wide > .col.s-2, .row-fix.gallery-wide > .col.s-2{width:10.2222222222222%;}
	.row.gallery-wide > .col.s-1, .row-fix.gallery-wide > .col.s-1{width:4.61111111111111%;}
}

@media (min-width: 992px) {
	.md-18{width:100%;}
	.md-17{width:94.4444444444444%;}
	.md-16{width:88.8888888888889%;}
	.md-15{width:83.3333333333333%;}
	.md-14{width:77.7777777777778%;}
	.md-13{width:72.2222222222222%;}
	.md-12{width:66.6666666666667%;}
	.md-11{width:61.1111111111111%;}
	.md-10{width:55.5555555555556%;}
	.md-9{width:50%;}
	.md-8{width:44.4444444444444%;}
	.md-7{width:38.8888888888889%;}
	.md-6{width:33.3333333333333%;}
	.md-5{width:27.7777777777778%;}
	.md-4{width:22.2222222222222%;}
	.md-3{width:16.6666666666667%;}
	.md-2{width:11.1111111111111%;}
	.md-1{width:5.55555555555556%;}
	 
	.row.gallery > .md-18, .row-fix.gallery > .md-18{width:99%;}
	.row.gallery > .md-17, .row-fix.gallery > .md-17{width:93.4444444444444%;}
	.row.gallery > .md-16, .row-fix.gallery > .md-16{width:87.8888888888889%;}
	.row.gallery > .md-15, .row-fix.gallery > .md-15{width:82.3333333333333%;}
	.row.gallery > .md-14, .row-fix.gallery > .md-14{width:76.7777777777778%;}
	.row.gallery > .md-13, .row-fix.gallery > .md-13{width:71.2222222222222%;}
	.row.gallery > .md-12, .row-fix.gallery > .md-12{width:65.6666666666667%;}
	.row.gallery > .md-11, .row-fix.gallery > .md-11{width:60.1111111111111%;}
	.row.gallery > .md-10, .row-fix.gallery > .md-10{width:54.5555555555556%;}
	.row.gallery > .md-9, .row-fix.gallery > .md-9{width:49%;}
	.row.gallery > .md-8, .row-fix.gallery > .md-8{width:43.4444444444444%;}
	.row.gallery > .md-7, .row-fix.gallery > .md-7{width:37.8888888888889%;}
	.row.gallery > .md-6, .row-fix.gallery > .md-6{width:32.3333333333333%;}
	.row.gallery > .md-5, .row-fix.gallery > .md-5{width:26.7777777777778%;}
	.row.gallery > .md-4, .row-fix.gallery > .md-4{width:21.2222222222222%;}
	.row.gallery > .md-3, .row-fix.gallery > .md-3{width:15.6666666666667%;}
	.row.gallery > .md-2, .row-fix.gallery > .md-2{width:10.1111111111111%;}
	.row.gallery > .md-1, .row-fix.gallery > .md-1{width:4.55555555555556%;}

	.row.gallery-wide > .col.md-18, .row-fix.gallery-wide > .col.md-18{width:100%;}
	.row.gallery-wide > .col.md-17, .row-fix.gallery-wide > .col.md-17{width:94.3888888888889%;}
	.row.gallery-wide > .col.md-16, .row-fix.gallery-wide > .col.md-16{width:88.7777777777778%;}
	.row.gallery-wide > .col.md-15, .row-fix.gallery-wide > .col.md-15{width:83.1666666666667%;}
	.row.gallery-wide > .col.md-14, .row-fix.gallery-wide > .col.md-14{width:77.5555555555555%;}
	.row.gallery-wide > .col.md-13, .row-fix.gallery-wide > .col.md-13{width:71.9444444444444%;}
	.row.gallery-wide > .col.md-12, .row-fix.gallery-wide > .col.md-12{width:66.3333333333333%;}
	.row.gallery-wide > .col.md-11, .row-fix.gallery-wide > .col.md-11{width:60.7222222222222%;}
	.row.gallery-wide > .col.md-10, .row-fix.gallery-wide > .col.md-10{width:55.1111111111111%;}
	.row.gallery-wide > .col.md-9, .row-fix.gallery-wide > .col.md-9{width:49.5%;}
	.row.gallery-wide > .col.md-8, .row-fix.gallery-wide > .col.md-8{width:43.8888888888889%;}
	.row.gallery-wide > .col.md-7, .row-fix.gallery-wide > .col.md-7{width:38.2777777777778%;}
	.row.gallery-wide > .col.md-6, .row-fix.gallery-wide > .col.md-6{width:32.6666666666667%;}
	.row.gallery-wide > .col.md-5, .row-fix.gallery-wide > .col.md-5{width:27.0555555555556%;}
	.row.gallery-wide > .col.md-4, .row-fix.gallery-wide > .col.md-4{width:21.4444444444444%;}
	.row.gallery-wide > .col.md-3, .row-fix.gallery-wide > .col.md-3{width:15.8333333333333%;}
	.row.gallery-wide > .col.md-2, .row-fix.gallery-wide > .col.md-2{width:10.2222222222222%;}
	.row.gallery-wide > .col.md-1, .row-fix.gallery-wide > .col.md-1{width:4.61111111111111%;}
}

@media (min-width: 1200px) {
	.l-18{width:100%;}
	.l-17{width:94.4444444444444%;}
	.l-16{width:88.8888888888889%;}
	.l-15{width:83.3333333333333%;}
	.l-14{width:77.7777777777778%;}
	.l-13{width:72.2222222222222%;}
	.l-12{width:66.6666666666667%;}
	.l-11{width:61.1111111111111%;}
	.l-10{width:55.5555555555556%;}
	.l-9{width:50%;}
	.l-8{width:44.4444444444444%;}
	.l-7{width:38.8888888888889%;}
	.l-6{width:33.3333333333333%;}
	.l-5{width:27.7777777777778%;}
	.l-4{width:22.2222222222222%;}
	.l-3{width:16.6666666666667%;}
	.l-2{width:11.1111111111111%;}
	.l-1{width:5.55555555555556%;}
	
	.row.gallery > .l-18, .row-fix.gallery > .l-18{width:99%;}
	.row.gallery > .l-17, .row-fix.gallery > .l-17{width:93.4444444444444%;}
	.row.gallery > .l-16, .row-fix.gallery > .l-16{width:87.8888888888889%;}
	.row.gallery > .l-15, .row-fix.gallery > .l-15{width:82.3333333333333%;}
	.row.gallery > .l-14, .row-fix.gallery > .l-14{width:76.7777777777778%;}
	.row.gallery > .l-13, .row-fix.gallery > .l-13{width:71.2222222222222%;}
	.row.gallery > .l-12, .row-fix.gallery > .l-12{width:65.6666666666667%;}
	.row.gallery > .l-11, .row-fix.gallery > .l-11{width:60.1111111111111%;}
	.row.gallery > .l-10, .row-fix.gallery > .l-10{width:54.5555555555556%;}
	.row.gallery > .l-9, .row-fix.gallery > .l-9{width:49%;}
	.row.gallery > .l-8, .row-fix.gallery > .l-8{width:43.4444444444444%;}
	.row.gallery > .l-7, .row-fix.gallery > .l-7{width:37.8888888888889%;}
	.row.gallery > .l-6, .row-fix.gallery > .l-6{width:32.3333333333333%;}
	.row.gallery > .l-5, .row-fix.gallery > .l-5{width:26.7777777777778%;}
	.row.gallery > .l-4, .row-fix.gallery > .l-4{width:21.2222222222222%;}
	.row.gallery > .l-3, .row-fix.gallery > .l-3{width:15.6666666666667%;}
	.row.gallery > .l-2, .row-fix.gallery > .l-2{width:10.1111111111111%;}
	.row.gallery > .l-1, .row-fix.gallery > .l-1{width:4.55555555555556%;}
	
	.row.gallery-wide > .col.l-18, .row-fix.gallery-wide > .col.l-18{width:100%;}
	.row.gallery-wide > .col.l-17, .row-fix.gallery-wide > .col.l-17{width:94.3888888888889%;}
	.row.gallery-wide > .col.l-16, .row-fix.gallery-wide > .col.l-16{width:88.7777777777778%;}
	.row.gallery-wide > .col.l-15, .row-fix.gallery-wide > .col.l-15{width:83.1666666666667%;}
	.row.gallery-wide > .col.l-14, .row-fix.gallery-wide > .col.l-14{width:77.5555555555555%;}
	.row.gallery-wide > .col.l-13, .row-fix.gallery-wide > .col.l-13{width:71.9444444444444%;}
	.row.gallery-wide > .col.l-12, .row-fix.gallery-wide > .col.l-12{width:66.3333333333333%;}
	.row.gallery-wide > .col.l-11, .row-fix.gallery-wide > .col.l-11{width:60.7222222222222%;}
	.row.gallery-wide > .col.l-10, .row-fix.gallery-wide > .col.l-10{width:55.1111111111111%;}
	.row.gallery-wide > .col.l-9, .row-fix.gallery-wide > .col.l-9{width:49.5%;}
	.row.gallery-wide > .col.l-8, .row-fix.gallery-wide > .col.l-8{width:43.8888888888889%;}
	.row.gallery-wide > .col.l-7, .row-fix.gallery-wide > .col.l-7{width:38.2777777777778%;}
	.row.gallery-wide > .col.l-6, .row-fix.gallery-wide > .col.l-6{width:32.6666666666667%;}
	.row.gallery-wide > .col.l-5, .row-fix.gallery-wide > .col.l-5{width:27.0555555555556%;}
	.row.gallery-wide > .col.l-4, .row-fix.gallery-wide > .col.l-4{width:21.4444444444444%;}
	.row.gallery-wide > .col.l-3, .row-fix.gallery-wide > .col.l-3{width:15.8333333333333%;}
	.row.gallery-wide > .col.l-2, .row-fix.gallery-wide > .col.l-2{width:10.2222222222222%;}
	.row.gallery-wide > .col.l-1, .row-fix.gallery-wide > .col.l-1{width:4.61111111111111%;}
}

@media (min-width: 1500px) {
	.xl-18{width:100%;}
	.xl-17{width:94.4444444444444%;}
	.xl-16{width:88.8888888888889%;}
	.xl-15{width:83.3333333333333%;}
	.xl-14{width:77.7777777777778%;}
	.xl-13{width:72.2222222222222%;}
	.xl-12{width:66.6666666666667%;}
	.xl-11{width:61.1111111111111%;}
	.xl-10{width:55.5555555555556%;}
	.xl-9{width:50%;}
	.xl-8{width:44.4444444444444%;}
	.xl-7{width:38.8888888888889%;}
	.xl-6{width:33.3333333333333%;}
	.xl-5{width:27.7777777777778%;}
	.xl-4{width:22.2222222222222%;}
	.xl-3{width:16.6666666666667%;}
	.xl-2{width:11.1111111111111%;}
	.xl-1{width:5.55555555555556%;}
	
	.row.gallery > .xl-18, .row-fix.gallery > .xl-18{width:99%;}
	.row.gallery > .xl-17, .row-fix.gallery > .xl-17{width:93.4444444444444%;}
	.row.gallery > .xl-16, .row-fix.gallery > .xl-16{width:87.8888888888889%;}
	.row.gallery > .xl-15, .row-fix.gallery > .xl-15{width:82.3333333333333%;}
	.row.gallery > .xl-14, .row-fix.gallery > .xl-14{width:76.7777777777778%;}
	.row.gallery > .xl-13, .row-fix.gallery > .xl-13{width:71.2222222222222%;}
	.row.gallery > .xl-12, .row-fix.gallery > .xl-12{width:65.6666666666667%;}
	.row.gallery > .xl-11, .row-fix.gallery > .xl-11{width:60.1111111111111%;}
	.row.gallery > .xl-10, .row-fix.gallery > .xl-10{width:54.5555555555556%;}
	.row.gallery > .xl-9, .row-fix.gallery > .xl-9{width:49%;}
	.row.gallery > .xl-8, .row-fix.gallery > .xl-8{width:43.4444444444444%;}
	.row.gallery > .xl-7, .row-fix.gallery > .xl-7{width:37.8888888888889%;}
	.row.gallery > .xl-6, .row-fix.gallery > .xl-6{width:32.3333333333333%;}
	.row.gallery > .xl-5, .row-fix.gallery > .xl-5{width:26.7777777777778%;}
	.row.gallery > .xl-4, .row-fix.gallery > .xl-4{width:21.2222222222222%;}
	.row.gallery > .xl-3, .row-fix.gallery > .xl-3{width:15.6666666666667%;}
	.row.gallery > .xl-2, .row-fix.gallery > .xl-2{width:10.1111111111111%;}
	.row.gallery > .xl-1, .row-fix.gallery > .xl-1{width:4.55555555555556%;}
	
	.row.gallery-wide > .col.xl-18, .row-fix.gallery-wide > .col.xl-18{width:100%;}
	.row.gallery-wide > .col.xl-17, .row-fix.gallery-wide > .col.xl-17{width:94.3888888888889%;}
	.row.gallery-wide > .col.xl-16, .row-fix.gallery-wide > .col.xl-16{width:88.7777777777778%;}
	.row.gallery-wide > .col.xl-15, .row-fix.gallery-wide > .col.xl-15{width:83.1666666666667%;}
	.row.gallery-wide > .col.xl-14, .row-fix.gallery-wide > .col.xl-14{width:77.5555555555555%;}
	.row.gallery-wide > .col.xl-13, .row-fix.gallery-wide > .col.xl-13{width:71.9444444444444%;}
	.row.gallery-wide > .col.xl-12, .row-fix.gallery-wide > .col.xl-12{width:66.3333333333333%;}
	.row.gallery-wide > .col.xl-11, .row-fix.gallery-wide > .col.xl-11{width:60.7222222222222%;}
	.row.gallery-wide > .col.xl-10, .row-fix.gallery-wide > .col.xl-10{width:55.1111111111111%;}
	.row.gallery-wide > .col.xl-9, .row-fix.gallery-wide > .col.xl-9{width:49.5%;}
	.row.gallery-wide > .col.xl-8, .row-fix.gallery-wide > .col.xl-8{width:43.8888888888889%;}
	.row.gallery-wide > .col.xl-7, .row-fix.gallery-wide > .col.xl-7{width:38.2777777777778%;}
	.row.gallery-wide > .col.xl-6, .row-fix.gallery-wide > .col.xl-6{width:32.6666666666667%;}
	.row.gallery-wide > .col.xl-5, .row-fix.gallery-wide > .col.xl-5{width:27.0555555555556%;}
	.row.gallery-wide > .col.xl-4, .row-fix.gallery-wide > .col.xl-4{width:21.4444444444444%;}
	.row.gallery-wide > .col.xl-3, .row-fix.gallery-wide > .col.xl-3{width:15.8333333333333%;}
	.row.gallery-wide > .col.xl-2, .row-fix.gallery-wide > .col.xl-2{width:10.2222222222222%;}
	.row.gallery-wide > .col.xl-1, .row-fix.gallery-wide > .col.xl-1{width:4.61111111111111%;}
}
@media (max-width:767px) {
	.xs-visible{
		display:block;
	}
	.xs-hidden{
		display: none !important;	
	}
}
@media (min-width: 768px) and (max-width:991px) {
	.s-visible{
		display:block;
	}
	.s-hidden{
		display: none !important;	
	}
}
@media (min-width: 992px) and (max-width:1199px) {
	.md-visible{
		display:block;
	}
	.md-hidden{
		display: none !important;	
	}
}
@media (min-width: 1200px) and (max-width:1499px) {
	.l-visible{
		display:block;
	}
	.l-hidden{
		display: none !important;	
	}
}
@media (min-width: 1500px) {
	.xl-visible{
		display:block;
	}
	.xl-hidden{
		display: none !important;	
	}
}
/* 
 * media query for Smaller Mobile Screens
 * labels are standard not visible on screens < 500px, so for buttons without labels on screens < 500px we can add below classes to make the buttons smaller as well
 * we can also make buttons with labels "show-all" bigger
 */
@media (max-width: 499px) {
	.sms-20{	
		width:20%;
	}
	.sms-25{	
		width:25%;
	}
	.sms-30{	
		width:30%;
	}
	.sms-33{	
		width:33.333333333%;
	}
	.sms-40{	
		width:40%;
	}
	.sms-50{	
		width:50%;
	}
	.sms-60{	
		width:60%;
	}
	.sms-70{	
		width:70%;
	}
	.sms-75{	
		width:75%;
	}
}

/* 
 * media query for standard form width
 */
@media (min-width: 340px){
	.form-block {
		width: 100%;
	}
}
@media (min-width: 992px){
	.form-block {
		width: 66.6666666666667%;
	}
}
@media (min-width: 1500px){
	.form-block {
		width: 61.1111111111111%;
	}
}






/* ************************************************************
 ***				FLEXBOX GRID SYSTEM V1.0				***
 **************************************************************/
.flex{
	display: flex;
	align-items:center;	
}
.flex-container-col { /* when you want to put elements underneath each other (like in a column) */ 
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap; /* all flex items will be on one line */ 
}
.flex-container-row { /* when you want to put elements next to each other (like in a row) */ 
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap; /* all flex items will be on one line */ 
}
.flex-container-col.stretch, .flex-container-row.stretch{
	align-content: stretch; /* lines stretch to take up the remaining space */ 
	flex-grow:1;
	flex-shrink: 0;
}
.flex-container-row.stretch-col{
	align-items: stretch;  /* each column in this row has the same height */ 
}
.flex-container-col.flex-align-center, .flex-container-row.flex-align-center {
  align-items: center; /* vertical align items in the center */ 
}
.flex-container-col.flex-justify-start, .flex-container-row.flex-justify-start {
  justify-content: flex-start; /* align items left */ 
}
.flex-gap{
	gap:10px;
}
.flex-gap-l{
	gap:20px;
}
/* items */ 
.flex-item {
  flex: 0 1 auto;
}
.flex-standard { /* when multiple columns in the same row, these elements just have the width of the div itself */ 
	flex-grow:0;
	flex-shrink: 0;
	overflow: hidden;
}
.flex-fill { /* when multiple columns in the same row, these elements have an equal width within the row */ 
	flex-grow:1;
	flex-shrink: 1;
	overflow: hidden;
}
.flex-item.flex-align-center {
   justify-content:center;
}




/* ************************************************
 ***					ELEMENTS				***
 **************************************************/
/* DROPDOWN LIST */
/* dropdown container div */
.dropdown{
	position:relative;	
	text-align: center;
	list-style: none;
	margin:0px;
}
/* Hide sub menus by targeting any UL’s within a UL*/
.dropdown ul {
	display: none;
	z-index:10000; /* place items on top of other elements on de page */
}
/*
 * To make these menus reappear they need to be converted back to block elements on hover of the LI.
 * The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.
 */
.dropdown:hover > li > ul {
	display: block;
}
/*
 * General dropdown 'main list or navigation' item attributes 
 * Adding position:relative; will allow us to absolutely position the sub menus according to the parent element. 
 * The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.
 */

.dropdown:after {
	content: ""; clear: both; display: block;
}

/* 
 * General dropdown 'sublist' attributes.
 * Sub menus inherit styles from their parent elements, so a change of background fixes their appearance. 
 * To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
 * The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one.
 * A quick hover effect can change the background to act as a visual cue.
 */
.dropdown ul {
	position: absolute;
	top: 100%;
	left:0;
	list-item-style:none;
	list-style:none;
	margin-left:0px;
	padding-left:0px;
	background: #5f6975;
	-webkit-box-shadow: 0px 1px 3px #666666;
	  -moz-box-shadow: 0px 1px 3px #666666;
	  box-shadow: 0px 1px 3px #666666;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
.dropdown ul li {
	float: none; 
	position: relative;
	display:block;
	border-radius: 6px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	padding: 10px 30px;
	text-align: left;
}	
.dropdown ul li a {
	color: #fff;
}	
.dropdown ul li a:hover {
	text-decoration:none;
	background: #4b545f;
}
/* Sub-sub-menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>. */
.dropdown ul ul {
	position: absolute; left: 100%; top:0;
}	
		

/* button style */
/* common button style */
.btn {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  padding: 10px 12px 10px 12px !important;	
  margin: 3px;
  border:0px;
   	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  text-decoration: none;
  outline:none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn i{
	padding-right:5px;
	font-size:inherit !important;
	font-style:inherit !important;
	color:inherit !important;
}
.btn i:hover,
.btn i:focus,
.btn i:active {
	font-size:inherit !important;
	font-style:inherit !important;
	color:inherit !important;
}
.btn.small {
	padding:3px;
}

/* default button */
.btn-default {
  background: #0B5ED7;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: 'Dosis', sans-serif;
  color: #fff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
  text-decoration: none;
  background-image: none;
  background: #00126E;
  color: #ffffff;
}

/* page toolbar button */
.btn-pg-toolbar {
  padding: 8px 10px 8px 10px;	
  font-size: 14px;
  background: #F4F7F9;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: 'Dosis', sans-serif;
  color: #000000;
  margin-bottom: 5px;
}

.btn-pg-toolbar:hover,
.btn-pg-toolbar:focus,
.btn-pg-toolbar.focus,
.btn-pg-toolbar:active,
.btn-pg-toolbar.active {
  text-decoration: none;
  background-image: none;
  background: #bacdd3;
  color: #000000;
}

/* small single button */
.btn-s {
 display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
	height:32px; /* same as form-control */
	width:32px;
	margin:2px 5px 8px 0px;
	padding:0px;
  font-size: 18px;
  font-family: 'Dosis', sans-serif;
  color: #0B5ED7;
border:1px solid #0B5ED7;
   	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
}
.btn-s i, .btn-s svg {
	text-align: center;
	vertical-align:middle;
}
.btn-s:hover,
.btn-s:focus,
.btn-s.focus,
.btn-s:active,
.btn-s.active {
  text-decoration: none;
  background-image: none;
	background-color: #BDF0FF;
  -webkit-box-shadow: 0px 0px 3px #BDF0FF;
  -moz-box-shadow: 0px 0px 3px #BDF0FF;
  box-shadow: 0px 0px 3px #BDF0FF;
}

.btn-s.red{
	color: #F85569;
	border:1px solid #F85569;
}
.btn-s.red:hover,
.btn-s.red:focus,
.btn-s.red.focus,
.btn-s.red:active,
.btn-s.red.active {
	background-color: #FEDCE0;
  -webkit-box-shadow: 0px 0px 3px #FEDCE0;
  -moz-box-shadow: 0px 0px 3px #FEDCE0;
  box-shadow: 0px 0px 3px #FEDCE0;
}

.btn-s:disabled{
	color: #cccccc;
	border:1px solid #cccccc;
}

/* button warning */
.btn-warning{
  background: #F59D1F;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: 'Dosis', sans-serif;
  color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active {
  text-decoration: none;
  background-image: none;
  background: #EB9316;
  color: #fff !important;
}	

/* button danger */
.btn-danger{
  background: #D9534F;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: 'Dosis', sans-serif;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active {
  text-decoration: none;
  background-image: none;
  background: #C9514D ;
  color: #fff !important;
}


/* button groups */
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}



/* SPACERS */
.spacer {
    margin-top:5px;
    margin-bottom:5px;
    max-width:100%;
    position:relative;
}
.spacer .mask {
    overflow:hidden;
    height:20px;
}
.spacer .mask:after {
    content:'';
    display:block;
    margin:-25px auto 0;
    width:100%;
    height:25px;
    border-radius:125px / 12px;
   -moz-box-shadow: 0px 0px 12px #2D2D2D; /* Firefox/Mozilla */  
   -webkit-box-shadow: 0px 0px 12px #2D2D2D; /*Safari/Chrome */  
    box-shadow:0 0 12px #2D2D2D;
}
.spacer span {
    width:50px;
    height:50px;
    position:absolute;
    bottom:100%;
    margin-bottom:-25px;
    left:50%;
    margin-left:-25px;
    border-radius:100%;
    box-shadow:0 2px 4px #999;
    background:white;
}
.spacer span i {
    position:absolute;
    top:4px;
    bottom:4px;
    left:4px;
    right:4px;
    border-radius:100%;
    border:1px dashed #aaa;
    text-align:center;
    line-height:40px;
    font-style:normal;
    color:#999; 
}

/* vertical variation */
.spacer-vertical {
  display:inline-block;
  margin-top:100px; margin-left:100px; width:100px; 
  position:relative; 
}
.spacer-vertical .mask { 
    overflow:hidden; width:20px; height:200px; 
}
.spacer-vertical .left .mask:after { 
    content:''; 
    display:block; margin-left:-20px;
    width:20px; height:100%;  
    border-radius:12px / 125px;  
    box-shadow:0 0 8px black;
}
.spacer-vertical .right .mask:before { 
    content:''; 
    display:block; margin-left:20px;
    width:20px; height:100%; 
    border-radius:12px / 125px; 
    box-shadow:0 0 8px black;
}



/* BACK TO TOP LINK */
#back-top {
	position:fixed;
	bottom: 5px;
	margin-left:45px;
	z-index:1000;
}
@media (max-width:767px) {
 #back-top {
	margin-left:-15px;
 }
}
#back-top a {
	font: 11px/100% Arial, Helvetica, sans-serif;
	color: #BFD1E3;
	width: 50px;
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
/* arrow icon (span tag) */
#back-top span {
	background: #BFD1E3;
	width: 50px;
	height: 50px;
	display: block;
	margin-bottom: 7px;
	opacity:0.5;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
#back-top span::before {
  color:#ffffff;
  content: "\f062";
  font: 400 36px "FontAwesome";
  line-height:46px;
}

@media (min-width:768px) {
 /* no hover on mobile devices, the link would stay 100% opaque after pressing the link on a mobile device */
 #back-top a:hover span {
	opacity:1;
	}
}
/* END OF BACK TO TOP */


/* table rows, different colours for even/odd rows and on mouse hover */
.even{
    background-color: #F7F7F7;
}
.odd{
    background-color: #F1F1F1
}
.row_hover{
	background-color: #B9DCFF;
}

.help-icon{
	font-size: 15px;
	color: #6DB7F2 !important;
	float: right;
}

.help-icon.big{
	font-size: 28px;
}


textarea.autoresize{
	resize:none;
}
textarea.autoresize::-webkit-scrollbar{
	width:0px;
}


/* picture list */

.picturelist { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.picturelist li { 
	margin: 0px 5px 5px 0px;
	padding: 0.5em;
	font-size: 1.3em;
	height:110px;
	width:110px;
	display: inline-block;
	float: left;
	position: relative;
	text-align: center;
	max-width:100%;
	max-height:100%;
	margin-bottom:3px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	-opera-border-radius:8px;
	-khtml-border-radius:8px;
	border-radius:8px;
	border:1px solid #0B5ED7;
}
.picturelist.grey li { 
	border:1px solid #cccccc;
}

.picturelist a{
	display: inline-block;
	width:100%;
	height:100%;
}

.icon-del{	
	color: #ffffff;
	background: #F85569;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-opera-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
	-webkit-transition: color .28s ease, background-color .28s ease, border .28s ease;
  	transition: color .28s ease, background-color .28s ease, border .28s ease;
	cursor: pointer;
	width: 24px;
	height: 24px;
	text-align: center;
	font-size: 16px;
	padding-top:3px;
}

.icon-del:hover{
	background: #AB113A;
}

.picturelist .icon-del{
	position: absolute;
	bottom:1px;
	right:1px;
}

/* loading spinner */
.loader {
    width: 20em;
    height: 20em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}
.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: gold;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}
.loader .face:nth-child(2) {
    width: 70%;
    height: 70%;
    color: lime;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
}
.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}
.loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
}


/* loading spinner BLUE */
.loader-blue {
    width: 20em;
    height: 20em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-blue .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}
.loader-blue .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: #0079C2;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}
.loader-blue .face:nth-child(2) {
    width: 70%;
    height: 70%;
    color: deepskyblue;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
}
.loader-blue .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}
.loader-blue .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
}
@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}


.input-loader {
    width: 34px;
    height: 34px;
    border: 5px solid #0B5ED7;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


/* Sortable tables */
table.border-radius th:first-child{
	border-radius: 8px 0px 0px 0px;
	-webkit-border-radius: 8px 0px 0px 0px;
	-moz-border-radius: 8px 0px 0px 0px;
}
table.border-radius th:last-child{
	border-radius: 0px 8px 0px 0px;
	-webkit-border-radius: 0px 8px 0px 0px;
	-moz-border-radius: 0px 8px 0px 0px;
}
table.sortable{
	width:100%;
	border-collapse: collapse;
    cursor: pointer;
}
table.sortable thead {
	height:35px;
}
table.sortable th {
	font-weight: bold !important;
	font-size:13px;
	/* background: #2c556f;*/
	background: #F7F7F7;
	color: #000;
	position: -webkit-sticky !important; /* this is for all Safari (Desktop & iOS), not for Chrome */
    position: sticky !important;
    top: 0;
	box-shadow: 0px -8px 11px -16px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: 0px -8px 11px -16px rgba(0,0,0,0.75) inset;
-moz-box-shadow: 0px -8px 11px -16px rgba(0,0,0,0.75) inset;

}
table.sortable th:hover{
    /* background: #75a7c2;*/
	background: #0B5ED7;color:#fff;
}
table.sortable th:before{
    content:'';
    position:absolute;
    left: 0;
    top: 0;
    width:100%;
    border-top: 1px solid #FFFFFF;
}
table.sortable tbody{
  width:100%;
}
table.sortable td, table.sortable th {
	padding:5px;
	border-bottom: 1px solid #E5ECF1;
	border-right: 1px solid #FFFFFF;
}
table.sortable tr td:last-child {
	border-right: 0px; /* to avoid horizontal scroll bar */
}
table.sortable tbody tr td{
  height:29px;
}
table.sortable tbody tr:nth-child(2n) {
  background: #F7F7F7;
}
table.sortable tbody tr:nth-child(2n+1) {
  background: #ffffff;
}
table.sortable tbody tr:hover{
	background: #D6F5FF;
	color:#000;
}
table.sortable td.action:hover{
    background: #F9E4A5;
	color:#7E380E;
	cursor: pointer;
}
table.sortable td.action.red:hover{
	color:#F85569;
	background: #FEDCE0;
}
.transparent{
	background-color: transparent !important;
	border: none !important;
}

.selected{
  background: #02DA20 !important;
	color: #ffffff;
}
.table-icon{
	font-size: 18px;
}
th.small-icon{
	width:40px;
	text-align: center;
}
td.small-icon{
	width:40px;
	text-align: center;
}
th.big-icon{
	width:45px;
	text-align: center;
}
td.big-icon{
	width:45px;
	text-align: center;
}
i.green, svg.green{
	color: #02DA20;
}
ul.grey{
	color: grey;
}

table td, table th {
overflow:hidden;
  -moz-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
    

/* default table */
table.default{
	width:100%;
	border-collapse: collapse;
}
table.default thead {
	height:35px;
}
table.default th {
	font-weight: normal !important;
	text-transform: uppercase;
	/* background: #2c556f;*/
	background: #0B5ED7;
	color: #ffffff;
    top: 0;
}
table.default th:before{
    content:'';
    position:absolute;
    left: 0;
    top: 0;
    width:100%;
    border-top: 1px solid #FFFFFF;
}
table.default tbody{
  width:100%;
}
table.default td, table.default th {
	padding:5px;
	border-bottom: 1px solid #DDDDDD;
	border-top: 1px solid #DDDDDD;
	border-right: 1px solid #FFFFFF;
}
table.default tr td:last-child {
	border-right: 0px; /* to avoid horizontal scroll bar */
}
table.default tbody tr td{
  height:29px;
}
table.default tbody tr:nth-child(2n) {
  
}
table.default tbody tr:nth-child(2n+1) {
  
}
table.default tbody tr:hover{
  /* background: #77afcd; */
	background: #BDF0FF;
	/* color: #ffffff; */
	color: #0B5ED7;
}
table.default td.action:hover{
    background: #F9E4A5;
	color:#7E380E;
	cursor: pointer;
}
table.default td.action.red:hover{
	color:#F85569;
}



/* simple table */
table.simple{
	width:100%;
	border-collapse: collapse;
    cursor: pointer;
	overflow:show;
}
table.simple thead {
	height:35px;
}
table.simple th {
	font-weight: bold !important;
	color: #000000;
    top: 0;
	overflow:show;
}
table.simple th.sticky {
	position: -webkit-sticky !important; /* this is for all Safari (Desktop & iOS), not for Chrome */
    position: sticky !important;
	background-color: #FFFFFF;
	z-index: 100000;
}
table.simple tbody{
  width:100%;
}
table.simple td, table.simple th {
	padding:5px;
	border-bottom: 1px solid #DDDDDD;
	border-right: 1px solid #FFFFFF;
}
table.simple tr td:last-child {
	border-right: 0px; /* to avoid horizontal scroll bar */
}
table.simple tbody tr td{
  height:29px;
}
table.simple tbody tr:nth-child(2n) {
  background: #F7F7F7;
}
table.simple tbody tr:nth-child(2n+1) {
  background: #ffffff;
}
table.simple tbody tr:hover{
  /* background: #77afcd; */
	background: #BDF0FF;
	/* color: #ffffff; */
	color: #0B5ED7;
}
table.simple td.action:hover{
    background: #F9E4A5;
	color:#7E380E;
	cursor: pointer;
}
table.simple td.action.red:hover{
	color:#F85569;
	background: #FEDCE0;
}
table.simple.compact{
	width:auto;
}

.v-top{
	vertical-align: top;
}


/* Organizational chart */
.tree {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.tree ul {
	padding-left: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.tree li {
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 5px 0 5px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; left: 0; bottom: 50%;
	border-left: 2px solid #0B5ED7;
	width: 20px; height: 50%;
}
.tree li::after{
	bottom: auto; top: 50%;
	border-top: 2px solid #0B5ED7;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-left: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-bottom: 2px solid #0B5ED7;
}
.tree li:first-child::after{
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; left: 0; top: 50%;
	border-top: 2px solid #0B5ED7;
	width: 20px; height: 0;
}

.tree li a{
	border: 1px solid #0B5ED7;
	padding: 8px;
	text-decoration: none;
	display: inline-block;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	color: #000000;
	min-width:150px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
		-webkit-box-shadow: 0px 1px 3px rgb(121 121 121 / 30%);
	  -moz-box-shadow: 0px 1px 3px rgb(121 121 121 / 30%);
	  box-shadow:  0px 0px 4px 1px rgb(121 121 121 / 30%);
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #0B5ED7; color: #ffffff; border: 1px solid #0B5ED7;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #0B5ED7;
}




/*POP-UP Window*/
.edit-pop-window{
	display: none;
	position:absolute;
	top:0px;
	right: 0px;
	height:100%;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	padding: 20px;
	box-shadow: 0px 5px 10px 5px rgba(50, 50, 50, 0.50) !important;
	z-index: 10000;
}
.model-close-icon{
	font-size: 24px;
	position: absolute;
	top:4px;
	left:8px;
}


.border-right{
	border-right: 1px solid #CCCCCC;
}


.quote{
	padding:10px !important;
	border:1px solid #cccccc;
	border-radius: 5px;
	min-height:40px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

hr.investigation {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #cccccc;  /* old IE */
  background-color: #cccccc;  /* Modern Browsers */
}
h1.investigation {
    position: relative;
    font-size: 14px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1.investigation:before, h1.investigation:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: #cccccc;
}
h1.investigation:before {
    margin-left: -50%;
    text-align: right;
}

.height50perc{
	height:50%;
}
.chart{
	border:1px solid #cccccc;
	padding:10px !important;
	background-color: #FFFFFF;
}
.sc_details{
	border:1px solid #cccccc;
	background-color: #F4F7F9;
}


/* RADIO and CHECKOX styles */
label.radio-wrapper {
    cursor: pointer;
  }
  label.radio-wrapper input {
    display: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
  label.radio-wrapper input + span {
    line-height: 22px;
    height: 22px;
    padding-left: 22px;
    display: block;
    position: relative;
  }
  label.radio-wrapper input + span:not(:empty) {
    padding-left: 30px;
  }
  label.radio-wrapper input + span:before, label.radio-wrapper input + span:after {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 50%;
    left: 0;
    top: 0;
    position: absolute;
  }
  label.radio-wrapper input + span:before {
    background: #D1D7E3;
    transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
  }
  label.radio-wrapper input + span:after {
    background: #fff;
    transform: scale(0.78);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
  }
  label.radio-wrapper input:checked + span:before {
    transform: scale(1.04);
    background: #0B5ED7;
  }
  label.radio-wrapper input:checked + span:after {
    transform: scale(0.4);
    transition: transform 0.3s ease;
  }
  label.radio-wrapper:hover input + span:before {
    transform: scale(0.92);
  }
  label.radio-wrapper:hover input + span:after {
    transform: scale(0.74);
  }
  label.radio-wrapper:hover input:checked + span:after {
    transform: scale(0.4);
  }
  label.radio-wrapper.green input:checked + span:before {
    transform: scale(1.04);
    background: #02DA20;
  }
  label.radio-wrapper.red input:checked + span:before {
    transform: scale(1.04);
    background: #F85569;
  }
  label.radio-wrapper.orange input:checked + span:before {
    transform: scale(1.04);
    background: #FBB600;
  }


label.checkbox-wrapper {
    cursor: pointer;
  }
  label.checkbox-wrapper input {
    display: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
  label.checkbox-wrapper input + span {
    line-height: 22px;
    height: 22px;
    padding-left: 22px;
    position: relative;
  }
  label.checkbox-wrapper input + span:not(:empty) {
    padding-left: 30px;
  }
  label.checkbox-wrapper input + span:before, label.checkbox-wrapper input + span:after {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    left: 0;
    top: 0;
    position: absolute;
  }
  label.checkbox-wrapper input + span:before {
    background: #D1D7E3;
    transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
  }
  label.checkbox-wrapper input + span:after {
    background: #fff;
    transform: scale(0.78);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
  }
  label.checkbox-wrapper input:checked + span:before {
    transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	  background: #33C035;
  }
  label.checkbox-wrapper input:checked + span:after {
    transform: scale(0);
    transition: transform 0.3s ease;
  }
  label.checkbox-wrapper:hover input + span:before {
    transform: scale(0.92);
  }
  label.checkbox-wrapper:hover input + span:after {
    transform: scale(0.74);
  }
  label.checkbox-wrapper:hover input:checked + span:after {
    transform: scale(0);
  }

  label.checkbox-wrapper.red input:checked + span:before {
    transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	  background: #F85569;
  }

  label.checkbox-wrapper.blue input:checked + span:before {
    transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	  background: #0B5ED7;
  }

  label.checkbox-wrapper.purple input:checked + span:before {
    transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	  background: #D780FF;
  }

  label.checkbox-wrapper.orange input:checked + span:before {
    transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	  background: #FFCF50;
  }




.checkbox-slider input[type="checkbox"] {
	visibility: hidden;
	display: none;
}

.checkbox-slider{
	padding-top:8px;
}

  .checkbox-slider .toggle {
    position: relative;
    display: block;
    width: 40px;
    height: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-slider .toggle:before {
    content: "";
    position: relative;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 14px;
    display: block;
    background: #9A9999;
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  .checkbox-slider .toggle span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
    transition: all 0.2s ease;
  }
  .checkbox-slider .toggle span:before {
    content: "";
    position: absolute;
    display: block;
    margin: -18px;
    width: 56px;
    height: 56px;
    background: rgba(79, 46, 220, 0.5);
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
  }

  .checkbox-slider input[type="checkbox"]:checked + .toggle:before {
    background: #02DA20;
  }
  .checkbox-slider input[type="checkbox"]:checked + .toggle span {
    background: #01A51A;
    transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
  }
  .checkbox-slider input[type="checkbox"]:checked + .toggle span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
  }



/* Root Cause rows */
.rc-row{
	border-top: 1px solid #0079C2;
}
.rc-row:last-of-type{
	border-bottom: 1px solid #0079C2;
}



/* FIELDS & CARDS */
.field{
	padding:10px !important;
	background-color: #F4F7F9;
	  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  border-radius: 6px;
}
.field .title{
	color: #0079C2; margin: 0px 0px 5px 0px; font-size: 14px; font-weight:bold; width:100%; padding: 0px 0px 5px 0px;
}

.card{
	padding:0px;
	background-color: #ffffff;
	box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.50);
-webkit-box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.51);
	
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	max-height:100%;
	display: flex;
  flex-direction: column;
  flex-wrap:nowrap; /* all flex items will be on one line */ 
}

.card.left-border-dblue{
	border-left: 6px solid #00126E;
}
.card.left-border-mblue{
	border-left: 6px solid #0B5ED7;
}
.card.left-border-lblue{
	border-left: 6px solid #BDF0FF;
}
.card.left-border-green{
	border-left: 6px solid #02DA20;
}
.card.left-border-orange{
	border-left: 6px solid #FFCF50;
}
.card.bottom-border-dblue{
	border-bottom: 6px solid #00126E;
}
.card.bottom-border-mblue{
	border-bottom: 6px solid #0B5ED7;
}
.card.bottom-border-lblue{
	border-bottom: 6px solid #BDF0FF;
}
.card.bottom-border-green{
	border-bottom: 6px solid #02DA20;
}
.card.bottom-border-orange{
	border-bottom: 6px solid #FFCF50;
}

.card-title{
	font-size: 22px;
	font-family: 'Frutiger', 'Open Sans', sans-serif;
	padding:10px 20px;
	width:100%;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-radius: 6px 6px 0px 0px;
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius: 6px 6px 0px 0px;
	flex: 0 1 auto;
	flex-grow:0;
	flex-shrink: 0;
	overflow: hidden;
}

.card-header{ /*used for filterbar for example */
	padding:10px 20px;
	width:100%;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-radius: 6px 6px 0px 0px;
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius: 6px 6px 0px 0px;
	flex: 0 1 auto;
	flex-grow:0;
	flex-shrink: 0;
}

.card-content{
	margin:20px;
	max-width:100%;
	flex: 0 1 auto;
	flex-grow:1;
	flex-shrink: 1;
	overflow: auto;
}

.card-footer{
	padding:20px;
	width:100%;
	border-radius: 0px 0px 6px 6px;
	-webkit-border-radius: 0px 0px 6px 6px;
	-moz-border-radius: 0px 0px 6px 6px;
	flex: 0 1 auto;
	flex-grow:0;
	flex-shrink: 0;
	overflow: hidden;
}


/* background styles */
.bg-light-grey, .bg-lgrey{
	background-color: #F4F7F9;
}
.bg-grey, .bg-mgrey{
	background-color:#CFCFCF;
}
.bg-dgrey{
	background-color: #808080;
}
.bg-light-blue, .bg-lblue{
	background-color: #BDF0FF;
}
.bg-mblue{
	background-color: #0B5ED7;
}
.bg-dblue{
	background-color: #00126E;
}
.bg-white{
	background-color: #FFFFFF;
}
.bg-purple{
	background-color: #D780FF;
}
.bg-purple-1{
	background-color: #eee1f7;
}
.bg-purple-2{
	background-color: #ecd4fc;
}
.bg-purple-3{
	background-color: #d4b2ea;
}
.bg-purple-4{
	background-color: #b18acc;
}
.bg-green{
	background-color: #02DA20;
}
.bg-red{
	background-color: #F85569;
}
.bg-orange{
	background-color: #FFCF50;
}
.bg-pink{
	background-color: #FA8DDC;
}
.bg-purple-pink-45{
	background: #D780FF;
	background: linear-gradient(45deg,rgba(215, 128, 255, 1) 0%, rgba(250, 141, 220, 1) 100%);
}
.bg-dblue-mblue-45{
	background: #00126E;
	background: linear-gradient(45deg,rgba(0, 18, 110, 1) 0%, rgba(11, 94, 215, 1) 100%);
}
.bg-dblue-lblue-45{
	background: #00126E;
	background: linear-gradient(45deg,rgba(0, 18, 110, 1) 0%, rgba(189, 240, 255, 1) 100%);
}
.bg-mblue-lblue-45{
	background: #0B5ED7;
	background: linear-gradient(45deg,rgba(11, 94, 215, 1) 0%, rgba(189, 240, 255, 1) 100%);
}
.bg-mgreen-lgreen-45{
	background: #02DA20;
	background: linear-gradient(45deg,#02DA20 0%, #C4FFCC 100%);
}

.select2-container .select2-selection--multiple{
	min-height:36px !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #fff !important;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #fff !important;
}

/* PAGINATION */
.pagination {
  display:inline-block;
  list-style: none;
  padding:0px;
	margin:8px;
}
.pagination > li {
  display: inline;
}
.pagination > li > button {
  color: #000000;
  text-decoration: none;
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
  cursor:pointer;
}
.pagination > li:first-child > button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > button:not(.disabled):hover,
.pagination > li > button:not(.disabled):focus {
  color: #000000;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > li > button.active {
  color: #ffffff;
  background-color: #0B5ED7;
  border: 1px solid #0B5ED7;
}
.pagination > li > button.disabled {
  color: #cccccc;
  pointer-events: none;
  cursor:default;
}
.page-selector{
	padding:4px;
	border:1px solid #cccccc;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}


/***************************************** STYLES OVERRIDING THE ABOVE ***************************************/
/* text size styles */
.text-small {
  font-size:11px;
}
.font-14 {
  font-size:14px;
}
.font-15 {
  font-size:15px;
}
.font-16 {
  font-size:16px;
}
.font-18 {
  font-size:18px;
}
.font-20 {
  font-size:20px;
}
.font-22 {
  font-size:22px;
}
.font-24 {
  font-size:24px;
}
.font-26 {
  font-size:26px;
}
.font-28 {
  font-size:28px;
}

label{
  font-size:13px;
}

/* text color styles */
.font-white{
	color: #ffffff;
}
.font-black{
	color: #000000;
}
.font-green{
	color: #02DA20;
}
.font-red{
	color: #F85569;
}
.font-orange{
	color: #FFCF50;
}
.font-dgrey{
	color: #808080;
}
.font-dblue{
	color: #00126E;
}
.font-mblue{
	color: #0B5ED7;
}


/* text alignment styles */
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.text-middle {
	vertical-align:middle !important;
}
.text-top {
	vertical-align:top !important;
}
.text-bottom {
	vertical-align:bottom !important;
}
.text-justify {
  text-align: justify !important;
}
.text-nowrap {
  white-space: nowrap !important;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
@media (min-width: 340px) {
	.xs-text-left {
	  text-align: left !important;
	}
	.xs-text-right {
	  text-align: right !important;
	}
	.xs-text-center {
	  text-align: center !important;
	}
	.xs-text-middle {
		vertical-align:middle !important;
	}
	.xs-text-justify {
	  text-align: justify !important;
	}
	.xs-text-nowrap {
	  white-space: nowrap !important;
	}	
}
@media (min-width: 768px) {
	.s-text-left {
	  text-align: left !important;
	}
	.s-text-right {
	  text-align: right !important;
	}
	.s-text-center {
	  text-align: center !important;
	}
	.s-text-middle {
		vertical-align:middle !important;
	}
	.s-text-justify {
	  text-align: justify !important;
	}
	.s-text-nowrap {
	  white-space: nowrap !important;
	}	
}
@media (min-width: 992px) {
	.md-text-left {
	  text-align: left !important;
	}
	.md-text-right {
	  text-align: right !important;
	}
	.md-text-center {
	  text-align: center !important;
	}
	.md-text-middle {
		vertical-align:middle !important;
	}
	.md-text-justify {
	  text-align: justify !important;
	}
	.md-text-nowrap {
	  white-space: nowrap;
	}	
}
@media (min-width: 1200px) {
	.l-text-left {
	  text-align: left !important;
	}
	.l-text-right {
	  text-align: right !important;
	}
	.l-text-center {
	  text-align: center !important;
	}
	.l-text-middle {
		vertical-align:middle !important;
	}
	.l-text-justify {
	  text-align: justify !important;
	}
	.l-text-nowrap {
	  white-space: nowrap;
	}	
}
@media (min-width: 1500px) {
	.xl-text-left {
	  text-align: left !important;
	}
	.xl-text-right {
	  text-align: right !important;
	}
	.xl-text-center {
	  text-align: center !important;
	}
	.xl-text-middle {
		vertical-align:middle !important;
	}
	.xl-text-justify {
	  text-align: justify !important;
	}
	.xl-text-nowrap {
	  white-space: nowrap;
	}	
}


/* Padding styles */
.no-padding{
	padding:0px !important;
}
.padding-5 {
	padding: 5px !important;
}
.padding {
	padding: 10px !important;
}
.padding-10 {
	padding: 10px !important;
}
.padding-20{
	padding:20px !important;
}
.padding-50{
	padding:50px !important;
}
/* Padding LEFT/RIGHT styles */
.no-padding-left{
	padding-left:0px !important;
}
.no-padding-right{
	padding-right:0px !important;
}
.padding-left{
	padding-left:5px !important;
}
.padding-left-10{
	padding-left:10px !important;
}
.padding-left-15{
	padding-left:15px !important;
}
.padding-left-20{
	padding-left:20px !important;
}
.padding-right{
	padding-right:5px !important;
}
.padding-right-10{
	padding-right:10px !important;
}
.padding-right-15{
	padding-right:15px !important;
}
.padding-right-20{
	padding-right:20px !important;
}
.padding-left-right{
	padding: 0px 5px 0px 5px !important;
}
.padding-left-right-10{
	padding: 0px 10px 0px 10px !important;
}
.padding-left-right-20{
	padding: 0px 20px 0px 20px !important;
}
/* Padding TOP/BOTTOM styles */
.padding-bottom{
	padding:0px 0px 15px 0px !important;
}
.padding-bottom-20{
	padding:0px 0px 20px 0px !important;
}
.padding-top{
	padding-top:5px !important;
}
.padding-top-10{
	padding-top:10px !important;
}
.padding-top-15{
	padding-top:15px !important;
}
/* Padding LEFT/RIGHT/BOTTOM styles */
.padding-left-right-bottom-20{
	padding: 0px 20px 20px 20px !important;
}



/* Margin styles */
.no-margin{
	margin:0px !important;
}
.no-margin-bottom{
	margin-bottom:0px !important;
}
.margin{
	margin:10px;
}
.margin-bottom{
	margin-bottom:10px;
}
.margin-bottom-20{
	margin-bottom:20px;
}
.margin-bottom-25{
	margin-bottom:25px;
}
.margin-bottom-50{
	margin-bottom:50px;
}
.margin-top{
	margin-top:10px;
}
.margin-top-bottom{
	margin: 10px 0px;
}
.margin-left{
	margin-left:10px !important;
}.margin-right{
	margin-right:10px !important;
}



/* Overflow style */
.overflow-auto {
	overflow: auto;
	overscroll-behavior: contain;
}
.overflow-contain {
	overscroll-behavior: contain;
}
.overflow-hidden {
	overflow: hidden;
	overscroll-behavior: contain;
}
.overflow-hover:hover {
	overflow: auto;
}
.overflow-visible {
	overflow: visible;
}


/*
 * Hide from both screenreaders and browsers
 */
.hidden {
  display: none;
}
.xs-visible, .s-visible, .md-visible, .l-visible, .xl-visible{
  display: none;
}

/*
 * Positions
 */
.relative{
	position:relative;
}
.absolute{
	position:absolute;
}

.shadow{
  -webkit-box-shadow: 0 .10rem 1.35rem 0 rgba(58,59,69,.15);
  -moz-box-shadow: 0 .10rem 1.35rem 0 rgba(58,59,69,.15);
  box-shadow: 0 .10rem 1.35rem 0 rgba(58,59,69,.15);
}
.shadow-2{
  -webkit-box-shadow: 2px 5px 10px 0 #999999;
  -moz-box-shadow: 2px 5px 10px 0 #999999;
  box-shadow: 2px 5px 10px 0 #999999;
}
.no-shadow{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.border-radius{
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
.no-border-radius{
	border-radius: none;
	-webkit-border-radius: none;
	-moz-border-radius: none;
}
.shadow-top-inside{
	box-shadow: 0px 6px 12px -15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: 0px 6px 12px -15px rgba(0,0,0,0.75) inset;
-moz-box-shadow: 0px 6px 12px -15px rgba(0,0,0,0.75) inset;
}
.shadow-bottom-inside{
	box-shadow: 0px -6px 12px -15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: 0px -6px 12px -15px rgba(0,0,0,0.75) inset;
-moz-box-shadow: 0px -6px 12px -15px rgba(0,0,0,0.75) inset;
}

/* covering the whole page or div */
.full {
 width:100% !important;
 height:100% !important;
 max-width:100% !important;
 max-height:100% !important;
 border: 0px !important;
}

.full-height {
 height:100% !important;
 max-height:100% !important;
}

.full-height-min {
 min-height:100%;
}

.full-height-max {
 max-height:100%;
}

.full-width {
 width:100% !important;
 max-width:100% !important;
}
.half-width {
 width:50% !important;
 max-width:50% !important;
}
.width-60 {
 width:60% !important;
 max-width:60% !important;
}
.width-75 {
 width:75% !important;
 max-width:75% !important;
}
.width-85 {
 width:85% !important;
 max-width:85% !important;
}
.width-auto {
 width:auto !important;
}
.height-50px {
 height:50px !important;
}
.height-75px {
 height:75px !important;
}
.height-100px {
 height:100px !important;
}
.height-150px {
 height:150px !important;
}
.no-max-height{
	max-height:none;
}

.center{
	margin-left:auto !important;
	margin-right:auto !important;
}
.box{	
	background-color: #FFFFFF !important;
	padding:20px !important;
	border: 1px solid #D7DCE0;
}
/*make sure that all divs inside a box do not inherrit the padding */
.box > div{	
	padding:0px;
}

.no-border{
	border:none;
	-webkit-box-shadow: none;
	-moz-box-shadow:    none;
	box-shadow:         none;
}






/***************************************** STYLES OVERRIDING THIRD PARTY LIBRARIES ***************************************/

/* jquery UI */
.ui-tooltip {
    white-space: pre-line;
    padding: 10px 20px !important;
	border: 1px solid #38444F !important;
	background-color: #ffffff !important;
	-webkit-border-radius: 10 !important;
	-moz-border-radius: 10 !important;
    border-radius: 10px !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.50) !important;
	-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.50) !important;
	box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.50) !important;
	z-index: 100000000000 !important;
  }
.ui-checkboxradio-icon{
	height:8px !important;
	width:8px !important;
	border: #2c556f !important;
    background-color: #fff !important;
}
.ui-tabs {
	border: none !important;
	background: #ffffff !important;
}
.ui-tabs-tab {
	border: none !important;
}
.ui-tab {
	border: none !important;
	margin-top:5px !important;
}
.ui-widget {
	font-size: inherit !important;
	font-family: inherit !important;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-size: inherit !important;
	font-family: inherit !important;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-size: inherit !important;
	font-family: inherit !important;
}
.ui-tabs-nav {
	background: #D7DCE0 !important;
	border:none !important;
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
}
.ui-tabs-sub-nav{
	background: #F4F7F9 !important;
	padding: 10px 0px 0px 15px !important;
}
.ui-tabs-sub-nav .ui-tabs-tab{
	background: #C7CED1 !important;
}
.ui-tabs-sub-nav .ui-tabs-tab a{
	color: #000000 !important;
	font-weight: normal;
}
.ui-tabs-sub-nav .ui-tabs-active{
	background: #FFFFFF !important;
}
.ui-tabs-active {
	border: none !important;
}
.ui-state-active {
	border: none !important;
}
.ui-state-focus {
	border: none !important;
}
.ui-state-hover {
	border: none !important;
}
.ui-state-default {
	border: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	background-color: #0B5ED7 !important;
	font-weight: normal !important;
	color: #0B5ED7;
	cursor: pointer !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	background-color: #ffffff !important;
	font-weight: normal !important;
	color: #0B5ED7 !important;
	cursor: pointer !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-button:hover {
	background-color: #BDF0FF !important;
	font-weight: normal !important;
	color: #0B5ED7 !important;	
	cursor: pointer !important;
}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus {
	 color: #0B5ED7 !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: pointer !important;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #0B5ED7 !important;
}
.ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
    color: #0B5ED7 !important;
}
/* jquery confirm */
.jconfirm .jconfirm-box-container {
	margin-left: auto;
	margin-right:auto;	
}


/* glightbox */
@media (min-width: 769px) {
    .goverlay {
        opacity:0.75;
		will-change:contents !important;
    }
}

.goverlay {
    opacity:0.75;
	will-change:contents !important;
}

/* File upload */
.ff_fileupload_wrap .ff_fileupload_dropzone {
    border: 2px dashed #0B5ED7 !important;
	background-color: #F5F5F5 !important;
	color: #0B5ED7 !important; 
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
	top:0px !important;
}