body {
	background: url({{IMAGE.SOURCE}}) {{IMAGE.PROP}};
	-webkit-background-size: {{IMAGE.SIZE}};
	-moz-background-size: {{IMAGE.SIZE}};
	-o-background-size: {{IMAGE.SIZE}};
	background-size: {{IMAGE.SIZE}};
}

#menucontrol {
	position:fixed;
	left:  10px;
	top: 10px;
	bottom: 10px;
	width: 320px;
	padding: 10px;
}

#menucontrol img {
	float: none;
}

#biglogo {
	margin-bottom: 30px;
}

#menucontrol, #dashboard {
	border-radius: {{BORDER.RADIUS}};
	color: {{PANEL.TEXT}};
	background-color: {{PANEL.BG}};
}

#dashboard {
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
	padding: 0px;
}

#content {
	padding-left: 340px;
	height: 100%;
	padding-right: 10px;
}

#content h1 {
	text-align: center;
}

.ui-accordion h3 {
	text-align: left;
}

.ui-accordion .ui-accordion-header  {
	background-color: {{HEADER.BG.ALPHA_100}}; 
	color: {{HEADER.TEXT}};
	border-color: {{BORDER.COLOR}};
	outline: none;
	border-bottom-width: 0px;
	margin: 0;
	font-size: 20px;
}

.ui-accordion-lastitem {
	border-bottom: 1px solid {{BORDER.COLOR}} !important;
}

.ui-accordion .ui-accordion-content {
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 50px !important;
	border: none;
	margin: 0;
	background-color: {{TABLE.ODD.BG.ALPHA_200}};
	color: {{TABLE.ODD.TEXT}};
	border-left: 1px solid {{BORDER.COLOR}};
	border-right: 1px solid {{BORDER.COLOR}};
}

.ui-accordion .ui-accordion-content h4 {
	font-size: 18px;
}

.ui-accordion .ui-accordion-content h5 {
	font-size: 16px;
}

.ui-icon.iconopen {
    background:url({{ROOTPATH}}lib/layouts/images/icons/16/folderopen.png) no-repeat;
    background-size:16px;
    width:16px;
    height:16px;
	padding-right: 32px;
}

.ui-icon.iconclosed {
    background:url({{ROOTPATH}}lib/layouts/images/icons/16/folderclosed.png) no-repeat -5px;
    background-size:16px;
    width:16px;
    height:16px;
	background-position: 0 0;
	padding-right: 32px;
}


.list-group-flush .list-group-item {
	background-color: transparent;
	background-image : url({{ROOTPATH}}lib/layouts/images/icons/16/colors.png);
	background-repeat: no-repeat;
	background-position: 5px 6px;
	padding-left: 36px;
	padding-right: 0;
	border: none;
	border-radius: 0;
/*	margin-bottom: 10px; */
	padding-top: 2px;
	padding-bottom: 3px;
	font-size: 0.95em;
}

.detailsbox {
	padding: 10px;
	overflow-y:auto;
	overflow-x: hidden;
	background-color: {{BODY.BG.ALPHA_90}};
	color: {{BODY.TEXT}};
}

#testresults a {
	background-color: {{BUTTON.NORMAL.BG}};
	color: {{BUTTON.NORMAL.TEXT}};
	padding-left: 3px;
	paddint-right: 3px;
	border-radius: {{BUTTON.RADIUS}};
}

#testresults a:hover {
	background-color: {{BUTTON.HOVER.BG}};
	color: {{BUTTON.HOVER.TEXT}};
	text-decoration: none;
}

.detailsbox p.problem {
	padding-left: 150px;
	padding-top: 50px;
}

.detailsbox h4 {
	margin-bottom: 25px;
	margin-top: 25px;
	font-weight: bold;
}

.detailsbox h4:first-child {
	margin-top: 10px;
}

.detailsbox h4 span {
    position: relative;
    padding-bottom: 5px;
}

.detailsbox h4 span::after{
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 2px solid {{BORDER}};
    content: "";
}

.card {
	border-color: {{BORDER.COLOR.ALPHA_200}};
	border-radius: {{BORDER.RADIUS}};
	background-color: {{BODY.BG.ALPHA_90}};
}

pre, textarea {font-family: Consolas,monospace}


.data-header, .data-footer {
	width: 100%;
	background-color: {{HEADER.BG.ALPHA_100}}; 
	color: {{HEADER.TEXT}};
	padding: 10px 0 10px 0;
	border-radius: {{BORDER.RADIUS}};
}

.data-header {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.data-footer {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 10;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.detailsbox {
	z-index: 9;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.itemlist {
	max-height: 300px;
	overflow: auto;
	padding: 1px;
	border: 1px solid {{BORDER.COLOR}};
}

.rowtext {
	display:block;
	background-color: {{HEADER.BG}};
	color: {{HEADER.TEXT}};
	border: 1px solid {{BORDER.COLOR}};
	padding: 5px;
	text-align: center;
	font-weight: bold;
}

.verify-ok > .ui-icon.iconopen, .verify-ok > .ui-icon.iconclosed {
    background: url({{ROOTPATH}}lib/layouts/images/icons/alerts/ok-alert.png) no-repeat;
}

.verify-error > .ui-icon.iconopen, .verify-error > .ui-icon.iconclosed {
    background: url({{ROOTPATH}}lib/layouts/images/icons/alerts/error-alert.png) no-repeat;
}

.verify-info > .ui-icon.iconopen, .verify-info > .ui-icon.iconclosed {
    background: url({{ROOTPATH}}lib/layouts/images/icons/alerts/info-alert.png) no-repeat;
}

.verify-notok > .ui-icon.iconopen, .verify-notok > .ui-icon.iconclosed {
    background: url({{ROOTPATH}}lib/layouts/images/icons/alerts/notok-alert.png) no-repeat;
}

.verify-alert > .ui-icon.iconopen, .verify-alert > .ui-icon.iconclosed {
    background: url({{ROOTPATH}}lib/layouts/images/icons/alerts/alert-alert.png) no-repeat;
}

#tlddata .ui-widget-content, #suffixdata .ui-widget-content {
	background-color: transparent;
}

#errorlog-data {width: 100%;}

@media only screen and (max-width: 767px) {
	body, html {overflow-y: auto;}
	.detailsbox {overflow-y: visible;}
	.detailsbox {height: 100%;}
    #menucontrol {position:relative; height:auto; width: 100%; margin-left: 0; margin-right: 0;}
	#content {padding-left: 0px;}
	#dashboard {margin-left: 0px; margin-top: 20px; margin-right: 0; margin-bottom: 0; width: 100%;}
	#menucontrol {right: 0px; top:0; left: 0; width: auto;}
	.data-footer {position: relative;}
	.itemlist {max-height: 200px;}
	
	.ui-accordion .ui-accordion-content {padding: 10px;}
	.ui-accordion .ui-accordion-header {font-size: 17px;}
}

.dns-deleted-row {
	background-image: url({{ROOTPATH}}lib/layouts/images/icons/16/dns-removed.png) !important;
}

.dns-added-row {
	background-image: url({{ROOTPATH}}lib/layouts/images/icons/16/dns-added.png)  !important;
}

.dns-timeout-row {
	background-image: url({{ROOTPATH}}lib/layouts/images/icons/16/dns-timeout.png)  !important;
}
