/* HTML
---------------------------------------- */
html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #f1f2f3;
	color: #49595A;
	font-family: 'Open Sans';
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .15px;
	margin: 0;
	padding: 0;
}

#overlay {
	background: rgba(0,0,0,0.7);
	background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
	background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
	background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
	background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
	background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
	background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
	display: none;
	height: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	left: 0;
	position: fixed;
	top: 0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	width: 100%;
	z-index: 2000;
}

#login-content {
	display: block;
	min-height: 500px;
}

.skip-to-content {
    display: block;
    position: absolute;
    left: -9999px;
}

.skip-to-content:focus,
.skip-to-content:active {
    position: relative;
	display: unset;
	left: 50%;
	border: 1px dashed #6c74e7;
}

#content {
	display: block;
}

.scrollable {
	overflow-y: auto !important;
	overflow-x: hidden;
}

.displayBlock div {
	display: block; 
}

.popupDiv .popupDivContent .displayBlock div {
	display: block; 
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: #cccccc;
	border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #cccccc;
}

::-webkit-scrollbar-track {
	background-color: #eeeeee;
}

/* Header
---------------------------------------- */
header {
	background: #ffffff;
	border-top: 4px solid #be965c;
	width: 100%;
}

header > .header-container {
	height: auto;
	margin-left: 5%;
	margin-right: 5%;
	min-height: 135px;
	width: 90%;
}

header > .header-container > .header-logo {
	cursor: pointer;
	float: left;
	margin-top: 15px;
}

header > .header-container > .header-menu {
	display: block;
	float: right;
	margin-top: 15px;
}

header > .header-container > .header-menu > {
	clear: both;
	display: block;
	height: 33px;
	text-align: right;
}

header > .header-container > .header-menu > .contacts {
	border-right: 1px solid #eeeeee;
	color: #eeeeee;
	display: inline-block;
	line-height: 33px;
	margin-right: 20px;
	vertical-align: top;
}

header > .header-container > .header-menu > .contacts > a {
	padding: 0 15px 0 0;
}

header > .header-container > .header-menu > .language-selector {
    display: inline-block;
    line-height: 33px;
    margin-right: 20px;
    vertical-align: top !important;
    padding-right: 20px;
    border-right: 1px solid #e0e0e0;
}

header > .header-container > .header-menu > .language-selector > a {
	font-size: 14px;
    color: #265A87;
	font-weight: 400;
	padding: 5px;
    text-decoration: none !important;
}

header > .header-container > .header-menu > .language-selector > a.selectedLanguage {
	background: #49595A;
	color: #ffffff;
	font-weight: 400;
	padding: 5px;
	text-decoration: none;
}

header > .header-container > .header-menu > .language-selector > a.selectedLanguage:hover {
	color: #ffffff;
    text-decoration: none;
    background: #49595A;
}

header > .header-container > .header-menu > .qs-widget {
	display: inline-block;
	margin-right: 20px;
	position: relative;
	vertical-align: top;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-content > form > input[type="text"] {
	border: 1px solid #e1e1e1;
	display: none;
	font-size: 13px;
	height: 30px;
	margin: 0;
	padding: 0 5px;
	width: 200px;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-content > form > input[type="text"]:focus,
header > .header-container > .header-menu > .qs-widget > .qs-widget-content > form > input[type="text"]:hover {
	border: 1px solid #be965c;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-content > form > a > .fa-search {
	color: #49595A;
	display: inline-block;
	font-size: 20px;
	margin: 0;
	padding: 5px;
	vertical-align: top;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips {
	background: #ffffff;
	box-shadow: 0 2px 3px #8a8a8a;
	color: #49595A;
	display: none;
	font-size: 13px;
	left: 0%;
	padding: 10px;
	position: absolute;
	text-align: left !important;
	top: 37px;
	width: 225px;
	z-index: 999;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips > ul > li {
	color: #764F2E;
	font-size: 13px;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips > ul > li > ul {
	list-style: initial;
	margin: 0;
	padding: 5px 25px;
}

header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips > ul > li > ul > li {
	color: #49595A;
	font-size: 13px;
}

header > .header-container > .header-menu > .message-centre {
	cursor: pointer;
	display: inline-block;
	margin-right: 20px;
	position: relative;
    font-size: 25px;
    line-height: 1.12em;
    vertical-align: top;
    border-right: 1px solid #e0e0e0;
    padding-right: 30px;
}

header > .header-container > .header-menu > .message-centre > .fa-envelope {
	font-size: 25px;
}

header > .header-container > .header-menu > .message-centre > .message-alert {
	background: #dc143c;
	border-radius: 50%;
	color: #ffffff;
	display: none;
	font-size: 11px;
	height: 22px;
	position: absolute;
	right: 16px;
	text-align: center;
	top: -7px;
	width: 22px;
}

header > .header-container > .header-menu > .message-centre > .message-alert > span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

header > .header-container > .header-menu > .account-settings {
	display: inline-block;
	height: 33px;
	line-height: 33px;
	vertical-align: top;
}

header > .header-container > .header-menu > .account-settings > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

header > .header-container > .header-menu > .account-settings > ul > li {
	cursor: pointer;
}

header > .header-container > .header-menu > .account-settings > ul > li > a {
	color: #554646;
	font-size: 14px;
	font-weight: 400;
}

.account-settings a {
    text-decoration: none;
}

header > .header-container > .header-menu > .account-settings > ul > li > a:hover {
	color: #463838;
	text-decoration: none;
}

header > .header-container > .header-menu > .account-settings > ul > li > a > .fa-user-circle {
	color: #cccccc;
	font-size: 20px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul {
	background: #ffffff;
	border-top: 4px solid #554646;
	box-shadow: 0 2px 3px #8a8a8a;
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;	
	position: absolute;
	right: 5%;
	width: 330px;
	z-index: 999;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li {
	border-bottom: 1px solid #e1e1e1;
	cursor: pointer;
	line-height: 33px !important;
	padding: 5px 10px;
	text-align: right;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li:hover {
	background-color: #f5efe7;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li > a {
	color: #554646 !important;
	font-size: 13px !important;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li > a:hover {
	color: #463838;
	text-decoration: none;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li > div.description {
	line-height: 20px !important;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li.adminrole {
	background: #f1f1f1;
	cursor: default;
	line-height: 2em !important;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li.account-expiration-message {
	background-color: #F6EAEA;
	cursor: default;
	display: none;
	font-size: 12px;
	line-height: 1.5em !important;
	padding: 10px;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li.account-expiration-message:hover {
	background-color: #F6EAEA;
}

header > .header-container > .header-menu > .account-settings > ul > li > ul > li.account-expiration-message > a {
	color: #ffffff !important;
}

/* Login page
---------------------------------------- */
.login-header-container {
	height: auto;
	margin: 20px auto;
	min-height: 135px;
	overflow: hidden;
	width: 60%;
}

#login .col-md-11 {
	margin-left: 5%;
	margin-right: 5%;
	padding: 0px !important;
	width: 90%;
}

#login .col-md-8 {
	background: #ffffff;
	height: auto;
	margin: 35px 20%;
	min-height: 350px;
	overflow: hidden;
	padding: 2.5% !important;
	width: 55%;
}

#login .col-md-6 {
	border-right: 1px solid #e1e1e1;
	margin-right: 0 !important;
	padding: 0 !important;
	width: 54.5%;
}

#login .col-md-5 {
	padding: 0px !important;
	width: 45%;
}

#after {
	display: none;
}

#login {
	background-color: #f1f2f3;
	height: auto;
	margin-bottom: 25px;
	/* min-height: 500px; */
	overflow: hidden;
	width: 100%;
}

#login h1 {
	color: #764F2E;
	font-size: 27px;
	font-weight: 300;
	margin: 0 0 20px 0;
	position: relative;
}

#login h2 {
	color: #554646;
	font-size: 19px;
	font-weight: 400;
	margin: 20px 0 40px 0;
}

#login .login-error {
	margin: 115px auto 0px auto;
	text-align: center;
}

#login .login-error p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
	margin: 10px 0 !important;
}

#login .login-error .buttons a {
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	margin: 30px 0;
	padding: 10px 5px;
	width: 275px;
}

#login .login-top-menu {
	color: #545454;
	font-size: 13px;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 5px;
}

#login #contactHelpline {
	display: inline-block;
}

#login #languageselector {
	display: inline-block;
	margin: 5px 0 0 25px;
}

#login #languageselector div {
	display: inline-block;
	padding: 0 5px 0 0;
}

#login #languageselector div a {
    text-decoration: none;
}

#login #contactHelpline a,
#login #languageselector a {
	color: #265A87;
	font-weight: 400;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

#login #contactHelpline a:hover,
#login #languageselector a:hover {
	color: #265A87;
	text-decoration: underline;
}

#login #languageselector .selectedLanguage a {
	background: #49595A;
	color: #ffffff;
	padding: 5px;
    text-decoration: none;
}

#login #languageselector .selectedLanguage a:hover {
	text-decoration: none;
}

.login-form,
.eu-login-form,
.password-form {
	display: block;
	margin: 20px auto;
	text-align: left;
	width: 60%;
}

.login-form input[type="text"],
.login-form input[type="password"] {
	padding: 10px 2.5%;
	width: 95%;
}

.password-form input[type="text"],
.password-form input[type="password"] {
	display: inline-block;
	padding: 10px 2.5%;
	width: 85%;
}

#col-find-account {
	border-right: none !important;
	width: 100% !important;
}

.login-form label,
.eu-login-form label {
	padding: 5px 0 25px 0 !important;
}

#requestAccess {
	margin: 25px 0 0 0;
}

.login-form .buttons,
.eu-login-form .buttons,
.password-form input[type="submit"],
.login-form input[type="submit"] {
	margin: 25px 0 0 0;
	width: 100% !important;
}

.login-form .buttons a,
.eu-login-form .buttons a,
.password-form .buttons a,
.password-form input[type="submit"],
.login-form input[type="submit"] {
	font-size: 16px;
	margin: 0px;
	padding: 10px 2.5%;
	width: 95%;
}

.eu-login-form .buttons a {
	background: #004494;
}

.eu-login-form .buttons a:hover {
	background: #012b58;
}

.buttons button {
    border: none;
    color: white;
}

.login-form .link-button,
.eu-login-form .link-button,
.password-form .link-button {
	background: #554646 !important;
	display: inline-block;
	margin: 5px !important;
	padding: 10px 20px !important;
	width: auto !important;
}

.login-form .cancel-button,
.eu-login-form .cancel-button,
.password-form .cancel-button {
	background: #ffffff !important;
	border: 1px solid #554646;
	display: inline-block;
	color: #554646 !important;
	margin: 5px !important;
	padding: 9px 19px !important;
	width: auto !important;
}

.login-form .link-button:hover,
.eu-login-form .link-button:hover,
.password-form .link-button:hover {
	background: #463838 !important;
	color: #ffffff !important;
}

.login-form .cancel-button:hover,
.eu-login-form .cancel-button:hover,
.password-form .cancel-button:hover {
	border: 1px solid #463838 !important;
	color: #463838 !important;
}

.eu-login-form ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eu-login-form ul > li {
	border: 1px solid #bec5c2;
	color: #554646;
	cursor: pointer;
	display: inline-block;
	margin: 5px;
	padding: 10px;
	text-align: left !important;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	width: 200px;
}

.eu-login-form ul > li:hover {
	background: #f5efe7;
	border: 1px solid #be965c;
}

.eu-login-form ul > li > .user-eu-login {
	color: #cccccc;
	font-size: 35px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

.eu-login-form ul > li > .account-info {
	display: inline-block;
	vertical-align: middle;
}

.eu-login-form ul > li > .account-info > .account-info-org {
	display: block;
	font-size: 11px;
}

.info-circle {
	border: 3px solid #be965c;
    border-radius: 50%;
	color: #be965c;
    font-size: 35px;
    font-weight: 400;
    padding: 0 20px;
}

.password-form .buttons {
	display: block !important;
	margin-top: 27px;
	text-align: right;
	width: 100%;
}

.password-form .cancel {
	display: inline-block !important;
	margin-right: 1% !important;
	width: 40% !important;
}

.password-form .next {
	display: inline-block !important;
	margin-left: 1% !important;
	width: 45% !important;
}

/* Footer
---------------------------------------- */
footer,
#footer {
	background: none;
	clear: left;
	color: #49595a;
	padding-bottom: 10px;
	text-align: center;
	width: 100%;
}

footer div,
#footer div {
	color: #222222;
	display: inline-block;
	font-size: 13px;
	padding: 5px 10px;
}

/* Session timeout
---------------------------------------- */
.session-timeout {
	background: #f5efe7;
	font-size: 15px;
	font-weight: 400;
	margin: 75px 0;
	min-height: 250px;
	padding-left: 0px !important;
	padding-right: 0px !important;
	text-align: center !important;
}

.session-timeout p {
	text-align: center;
}

.session-timeout img {
	left: 50%;
	margin-left: -40px;
	position: relative;
}

.session-timeout img,
.session-timeout p {
	padding: 15px;
}


.session-timeout .buttons {
	margin: 10px auto;
	width: 200px;
}
.session-timeout .buttons a {
	display: block;
	font-size: 16px;
	font-weight: 400;
	margin-left: 0px !important;
	padding: 5px 0;
	text-align: center;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	width: 100%;
}

/* Disclaimer, privacy and cookies
---------------------------------------- */
.disclaimer-container,
.privacy-container,
.cookies-container {
	display: block;
}

.disclaimer-container .col-md-10,
.privacy-container .col-md-10,
.cookies-container .col-md-10 {
	margin-bottom: 25px;
	margin-left: 10%;
	margin-right: 10%;
	padding: 0px !important;
	width: 80%;
}

.disclaimer-container h1,
.privacy-container h1,
.cookies-container h1 {
	font-size: 27px;
	font-weight: 300;
	margin: 20px auto;
}

.disclaimer-title,
.privacy-title,
.cookies-title {
	background-color: #554646;
	color: #FFF;
	display: block !important;
	padding: 5px 10px;
	font-size: 15px;
	font-weight: 400;
	text-align: left;
}

#disclaimer-content,
#privacy-content,
#cookies-content {
    background-color: #ffffff;
    height: auto;
    min-height: 500px;
    overflow: hidden;
    padding: 10px;
}

#disclaimer-content h2,
#privacy-content h2,
#cookies-content h2 {
	color: #764F2E;
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 10px;
	text-align: left;
}

#disclaimer-content p,
#privacy-content p,
#cookies-content p {
	font-size: 14px;
	margin: 0;
	padding: 10px;
	text-align: justify;
}

/* Reports dashboard */
.reports {
	display: block;
}

.reports .col-md-8 {
	margin-bottom: 25px;
	margin-left: 22.5%;
	margin-right: 22.5%;
	padding: 0px !important;
	width: 55%;
}

.reports h1 {
	font-size: 27px;
	font-weight: 300;
	margin: 20px auto;
}

.reports #container {
	background: #ffffff;
	display: block;
	height: auto;
	min-height: 300px;
	overflow: hidden;
	padding: 25px 50px;
}

.reports #container #fromDate,
.reports #container #toDate {
	display: none;
	height: 235px;
	margin: 0;
	position: absolute;
	width: 276px;
	z-index: 999;
}

.reports #container #calendar1,
.reports #container #calendar2 {
	box-shadow: 0 2px 3px #8a8a8a;
	display: none;
	height: 235px;
	margin: -50px 0 0 0;
	position: relative;
	right: 0px;
	width: 276px;
}

.reports #container .form-inline .form-group {
	width: 33%;
}

.reports #container .form-inline .form-control {
	padding: 5px;
	width: 90%;
}

.reports #container .form-inline .buttons {
	margin: 50px 0;
	text-align: center;
}

.reports #container .form-inline .buttons > a {
	font-size: 16px;
	margin: 0 auto;
	padding: 10px;
	width: 200px;
}

/* Helpers. Common re-used things
------------------------- */
.section-bkg {
	background-color: #f9f9f9;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.panel-separator {
    box-shadow: 0px 1px 10px 4px rgba(0,0,0,.2);
    min-height: 1px;
}

.mb-4 {
	margin-bottom: 24px;
}

.pt-1 {
	padding-top: 5px;
}

/* Media queries
---------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1366px) {
	.login-header-container {
		width: 75%;
	}

	#login .col-md-8 {
		margin: 35px 12.5%;
		padding: 2.5% !important;
		width: 70%;
	}

	header > .header-container {
		margin-left: 2% !important;
		margin-right: 2% !important;
		width: 96% !important;
	}

	header > .header-container > .header-menu > .account-settings > ul > li > ul {
		right: 2% !important;
	}

	header > .header-container > .header-menu > .qs-widget > .qs-widget-tooltips {
		right: 2%;
	}	

	.disclaimer-container h1,
	.privacy-container h1,
	.cookies-container h1 {
		font-size: 23px;
		font-weight: 300;
		margin: 20px auto;
	}
}

@media screen and (min-width: 992px) and (max-width: 1207px) {
	.login-header-container {
		width: 75%;
	}

	#login .col-md-8 {
		margin: 2.5% 12.5%;
		padding: 2.5% !important;
		width: 70%;
	}

	.disclaimer-container h1,
	.privacy-container h1,
	.cookies-container h1 {
		font-size: 20px;
		font-weight: 300;
		margin: 15px auto;
	}		
}

@media screen and (min-width: 240px) and (max-width: 991px) {
	#login-header {
		background: none;
		display: block !important;
		padding-bottom: 0 !important;
		text-align: center;
	}

	#login-header > .login-header-container > #logo-council {
		display: block !important;
		float: none !important;
	}

	#logo-council,
	#logo-portal {
		display: none !important;
	}

	#login h1 {
		text-align: center;
	}

	#login .login-top-menu {
		position: relative;
		text-align: center;
	}

	#login #contactHelpline,
	#login #languageselector {
		display: block;
		margin: 10px 0 0 0;
	}

	#login .col-xs-12 {
		margin-bottom: 5px;
		margin-top: 10px;
		width: 100% !important;
	}

	#login .col-md-8 {
		margin: 25px auto;
		width: 85% !important;
	}

	#login .col-md-6 {
		border-bottom: 1px solid #e1e1e1;
		border-right: none;
	}

	.login-form,
	.eu-login-form,
	.password-form {
		display: block;
		margin-top: 0;
		text-align: left;
		width: 95%;
	}

	/* .password-form {
		display: block;
		text-align: left;
		width: 100%;
	} */

	.login-form #requestAccess {
		display: none !important;
	}

	#login .login-error {
		margin: 0 auto !important;
		text-align: center;
	}

	/* Header */
	header {
		padding-bottom: 20px !important;
	}

	.notification-icon,
	.account-settings {
		display: none !important;
	}

	#notification-center {
		top: 210px !important;
	}

	footer div,
	#footer div {
		font-size: 11px;
	}
}

@media screen and (min-width: 240px) and (max-width: 510px) {
	#login .col-md-6 {
		border-bottom: 1px solid #e1e1e1;
		border-right: none;
	}

	#logo-council,
	#logo-portal {
		display: none !important;
	}

	header > .header-container > .header-menu > .message-centre,
	header > .header-container > .header-menu > .account-settings {
		display: none !important;
	}

	.notifyjs-corner {
		margin-left: -150px !important;
		width: 300px !important;
	}
}