/********************* General *********************/
body {
	background: rgb(250, 250, 250);
	background-color: #F0F3F4;
}

#container { position: static; }

#content, #header, #branding {
	padding: 10px 28px !important;
}

@media (max-width: 767px) {
	#content, #header, #branding {
		padding: 10px 16px !important;
	}

}

#container { margin-top: 60px; }
.popup #container { margin-top: 0; }

ul.messagelist {
    padding: 10px 20px;
}

#content-related { background: none; }
#content-related .module { background: #fff; }
#content-related .module h2 { color: #666; }
#content-related .module h3 { font-size: 13px; }

.module {
    border-radius: 4px;
    /*box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);*/
    /*box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);*/
	/*-webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
	box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);*/
	/*box-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);*/
	box-shadow: 0px 0 6px 0 rgba(0,0,0,0.075);
	border: 1px solid #eee;
    margin: 16px 0;
    padding: 0; /* 10px*/
    background-color: #fff;
}

.module h2, .module caption, .inline-group h2 {
	/*background: #1c2b36;*/
	font-size: 13px;
	border-radius: 4px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
    background-color: #209e91;
	padding: 12px !important;


	/*font-size: 15px;
	color: #888;
    background: transparent;
    text-transform: uppercase;
	border-bottom: 1px solid #ddd;*/
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 0;
    padding-right: 0;
}

.dashboard h2 {
	background: transparent; color: #444; padding: 18px 18px 18px 25px !important; font-size: 18px; border-bottom: 1px solid #ddd;
}

.dashboard { margin: 10px 0; }
.dashboard .content { padding: 25px; }

/*a.section:link, a.section:visited {
    color: #888;
    text-decoration: none;
}*/

ul.messagelist li {
    border: 1px solid #ddd;
}


/********************* Grid *********************/
.row {
	display: flex;
}
.column {
	display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 16px;
    margin-bottom: 16px;
    

}
@media (max-width: 768px) {
	.row { display: block; }
}

/********************* Tables *********************/
table th, table thead th .text a, table td {
	padding: 10px 15px;
	line-height: 1.5em;
}

table thead th { color: #fff; background-color: #209e91; }
table thead th.sorted { background-color: #188277;  }
table thead th .text a { color: #fff; background: transparent !important; padding-top: 15px; padding-bottom: 15px; }
table thead th .text a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	td, th {
	    padding: 10px;
	    font-size: 13px;
	}
}
table thead th.sorted .sortoptions { color: #fff; padding-top: 15px; }

/********************* Side menu *********************/
#sidemenu {
	box-shadow: 0px 0 6px 0 rgba(0,0,0,0.3);
	background: #1c2b36;
	width: 200px;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0; /*60px*/

	color: #fff;
	z-index: 50;
	overflow-y: auto;
}

@media (max-width: 767px) {
	#sidemenu {
		display: none;
	}
}

#sidemenu.show { display: block; }

.no-sidemenu #sidemenu { display: none; }
.no-sidemenu #content, .no-sidemenu .breadcrumbs, .no-sidemenu ul.messagelist { margin-left: 0; }

.popup #sidemenu { display: none; }
.popup #content, .popup .breadcrumbs, .popup ul.messagelist { margin-left: 0; }

#sidemenu ul {
	margin-top: 70px; /* 80px*/
	padding-left: 0;


}

#sidemenu li { list-style-type: none; /*padding: 0;*/  vertical-align: middle; font-size: 13px; position: relative; }
#sidemenu li a, #sidemenu li div {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #ddd;
	margin: 0;
}
#sidemenu li div { color: #bbb; /*font-weight: bold;*/ /*border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2);*/ /*background-color: rgba(255, 255, 255, 0.1);*/ }
#sidemenu li a:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
#sidemenu li a.selected { background-color: #209e91; color: #fff; }

#sidemenu li.level-2 a { padding-left: 60px; }

#sidemenu i { font-size: 15px; position: absolute; left: 16px; top: 13px; vertical-align: middle; }
#sidemenu li hr { background-color: rgba(255, 255, 255, 0.2); margin: 5px 20px; }

#header .show-sidemenu { display: none; float: left; padding: 5px 15px 5px 0; line-height: 1em; }
#header #site-name { white-space: nowrap; }

@media (max-width: 767px) {
	#header .show-sidemenu {
		display: block;
	}
}




/********************* Header *********************/
#header {
	background: #1c2b36;
	color: #aaa;
	display: block;
	height: auto !important;
	padding: 0 !important;
	/*box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);*/
	/*box-shadow: 0px 0 6px 0 #1c2b36;*/
	box-shadow: 0px 0 5px 0 rgba(28, 43, 54, 0.6);
	position: fixed; /* fixed */
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

@media (max-width: 767px) {
	#header {
		position: fixed;
	}
}




/*
#header:before {
	content: '';
	background: #1c2b36;
	width: 200px;
	height: 60px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -100;

}*/

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: #fff;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.5em;
    margin: 0;
}


/*#user-tools { display: none; }*/
#user-tools {
    line-height: 60px;
    margin-right: 20px;
}

@media (max-width: 767px) {
	#user-tools {
	    font-size: 0;
	}
	#user-tools a {
	    display: none;
	}
	/*
	#user-tools a:last-child {
		display: inline-block;
	    font-size: 11px;
	}*/
}



@media (max-width: 1024px) {
	/*#branding h1 {
	    margin: inherit;
	    font-size: initial;
	    line-height: inherit;
	}

	#header {
	    display: inherit;
	    flex-direction: inherit;
	    padding: inherit;
	    height: inherit;
	    line-height: auto;
	}

	#user-tools {
	    margin: 0;
	    font-weight: 400;
	    line-height: 1.85;
	    text-align: left;
	}*/
}


/*#user-tools {
    float: right;
    padding: 0;
    margin: 0 0 0 20px;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: right;
}*/



/********************* Breadcrumbs *********************/
div.breadcrumbs {
	display: none;
	background: transparent;
	color: #333;
	padding: 10px 25px !important;
	font-size: 14px;
}

div.breadcrumbs a {
    color: #aaa;
    /*text-decoration: underline;*/
}

div.breadcrumbs a:hover {
    color: #333;
    text-decoration: underline;
}

/********************* Typography *********************/
#content h1  {
	color: #666;
	font-weight: 400;
	font-size: 24px;
	margin: 10px 0;
	/*text-transform: uppercase;*/
}

/********************* Recent actions module *********************/
#recent-actions-module { padding-bottom: 16px; }
/*#content-related .actionlist { padding-bottom: 16px; }*/


/********************* Change list *********************/

#changelist {
	background: transparent;
	box-shadow: none;
	border: 0;
}

#changelist-form { 

}

#changelist-form .results { 
	overflow-x: initial;
	clear: both;
}

/*
#changelist-form {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12) !important;
    background-color: #fff !important;
}*/

#changelist .sortremove {
	display: none;
}

#changelist #toolbar {
	background: transparent;
	margin-bottom: 0;
	margin-right: 20px;
	/*float: right;*/
}
@media (max-width: 1024px) { #changelist #toolbar { float: none; } }
.change-list .filtered .results, .change-list .filtered .paginator, .filtered div.xfull {
    margin-right: 0;
    width: auto;
}

#changelist .actions { padding-top: 10px;}
#changelist .actions select { background: #fff;}

#changelist .results {
    border-radius: 4px;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

#changelist table thead th { padding: 0 !important; }
/*#changelist table th .text a { padding: 15px; }*/
/*#changelist table tbody td, #changelist table tbody th { min-width: 200px; }*/

#changelist .actions label { font-weight: bold; }
#changelist .actions { margin-right: 0; white-space: nowrap; }

/*#changelist .paginator { float: right; border: 0; }*/

#changelist .paginator, #changelist .actions {
    color: #666;
    background: transparent;
    border: 0;
}

#changelist-search .small { display: block; margin-left: 35px; }

/*
@media (max-width: 1024px)
.object-tools { margin-top: -42px; }
*/

/********************* Change list - Filter *********************/

#changelist-filter {
	z-index: 10;
	/*top: 42px;*/
	/*position: static;
	float: right;*/
	position: absolute;
	right: 30px;
	width: auto;
	margin-bottom: 5px;
}
#changelist-filter .changelist-content {
	position: absolute;
	right: 0;
	width: 300px;
	background-color: #F0F3F4;
	border: 1px solid #ddd;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
#changelist .toplinks { border: 0; }
#changelist-filter.expanded {
	border: 1px #eee;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
#changelist-filter h2 {
	margin-bottom: 0;
	cursor: pointer;
	font-size: 12px;
	user-select: none;
	border: 1px solid #888;

}
#changelist-filter:not(.expanded) h2 {
	/*background-color: transparent; */ /* #999*/
	/*color: #555;*/
	/*background-color: #999;
	color: #fff;*/
	background-color: #F0F3F4;
	color: #555;
    border-radius: 5px;
	border: 1px solid #ddd;

}
#changelist-filter ul { padding-bottom: 5px; }
#changelist-filter h3 { margin-bottom: 5px; }

@media (max-width: 767px) {
	#changelist-filter { order: 0; }
}

.paginator .this-page { background-color: #ddd;/*border: 1px solid #bbb;*/ }


/********************* Forms *********************/

.form-row { padding: 8px 16px; } /*  !important */
/*@media (max-width: 767px) {
	.form-row { padding: 4px 12px 8px 12px !important;  }
}*/

.form-row input[type=text] {
	padding: 0px 8px !important; /* 6px 8px */
	margin: 0;
	
}

.form-row input[type=text], .form-row input[type=password], .form-row input[type=email], .form-row input[type=url], .form-row input[type=tel], .form-row input[type=number], .form-row textarea, .form-row select, .form-row .vTextField {
	box-sizing: border-box !important;
	min-height: 36px !important;
	font-size: 14px !important;
}


label {
    font-size: 13px !important;
    padding: 4px 10px 0 0;
}
@media (max-width: 767px) {
	.aligned label { padding: 0 0 0 0; line-height: 0.5em; }
}

/*.wide label {
    width: 160px;
}*/

.checkbox-row {
	margin-left: 170px;
}

form .wide ul {
    margin-left: 200px;
}

@media (max-width: 767px) {
	form .wide ul {
	    margin-left: 0;
	}

	.aligned label {
	    padding: 4px 10px 10px 0;
	}

	.checkbox-row {
		margin-left: 0;
	}
}

.help, .help li { font-size: 12px !important; }

/*form .wide p, form .wide input + p.help, form .wide input + div.help { margin-left: 160px; }*/

input[type=submit].default, .submit-row input.default {
    margin-right: 3px;
    margin-left: 0;
    float: left;
}

@media (max-width: 767px) {
	.aligned .form-row > div {
	    width: auto; /* calc(100vw - 30px) */
	}
}

/* Date/time fields - Hide "Today" and "Now" text */
.datetimeshortcuts { color: transparent; font-size: 0; margin-left: 6px !important; }
.datetimeshortcuts a:first-child { display: none; }
.datetimeshortcuts .date-icon, .datetimeshortcuts .clock-icon { margin-bottom: 5px; }


/********************* Inline forms *********************/
fieldset .fieldBox {
    padding-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-right: 1px solid #eee;
}
fieldset .fieldBox:last-child { border-right: 0; }

@media (max-width: 767px) {
	fieldset .fieldBox {
	    margin-top: 0;
		margin-bottom: 0;
		border-right: 0;
	}
}
@media (max-width: 767px) {
	fieldset .fieldBox + .fieldBox {
	    margin-top: 10px;
	    padding-top: 10px;
	}
}


/********************* Inline forms *********************/
.inline-related table th { background: #fff; color: #333; }
.inline-related table td { vertical-align: middle; }
.inline-related table td.original p { display: none; }
.inline-related table .original { display: none; }
.inline-group .tabular tr td { padding: 6px 10px !important; }

/*form .aligned ul {
    margin-left: 200px;
    padding-left: 10px;
}

@media (max-width: 767px) {
	form .aligned ul {
	    margin-left: 0;
	    padding-left: 0;
	}
}*/

/********************* Submit & delete buttons *********************/

.submit-row {
	margin-top: 10px;
	text-align: left;
	background: #fff;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
	/*border: 1px solid #ddd;*/
}

.submit-row p.deletelink-box {
	float: right;
}


/********************* Login page *********************/
.login #header { position: static; }
.login .submit-row { box-shadow: none; text-align: center; padding: 2em 0 0 0; }
.module input[type=submit] { margin: 16px; }


/* History button */


/********************* Tabs *********************/
.form-tabs { overflow: auto; clear: both; padding: 0; margin: 0; border-bottom: 1px solid #ddd; }
.form-tabs li {
	list-style-type: none; /*padding: 0;*/  vertical-align: middle; font-size: 13px; position: relative;
	float: left;
	padding: 20px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 12px;
	border-bottom: 2px solid transparent;
}
.form-tabs li:hover { background-color: rgba(0, 0, 0, 0.05); }
.form-tabs li:active { background-color: rgba(0, 0, 0, 0.2); }
.form-tabs li.active {
	border-bottom: 2px solid #209e91;
}

/********************* Tabs for inline *********************/
fieldset .inline-group fieldset h2 { display: none; }
fieldset .inline-group fieldset { box-shadow: none; }
fieldset .inline-group { margin: 0; }
.inline-deletelink { margin-right: 20px; }
fieldset .inline-group fieldset th:last-child { font-size: 0; color: transparent; }