/* VARIABLES */
:root {
	--color-lemon-bkgreen: #d6e9b1;
	--color-lemon-green: #5d905e;
	--color-lemon-white: #fefefe;
	--color-lemon-gblack: #565656;
	--pad-nav-img-lang: 6px;
}

/*----------------------------------------------------*/
.disabled-content {
	pointer-events: none;
	opacity: 0.4;
}

/*----------------------------------------------------*/
html {
	/*force right vertical scrollbar*/
	overflow-y: scroll; /* ref[scrolbt1] */
}

body {
	padding-top: 70px;
	background: white url("images/background.png");
	-webkit-font-smoothing: antialiased;
	/* keep bootstrap from adding padding-right to body when modal show ref[scrolbt1] */
	padding-right: 0 !important;
}

img {
	border-radius: 3px;
}

.navbar {
	-webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15);
	/* box-shadow:      0 8px 6px -6px rgba(54, 54, 54, 0.50); */

	border-radius: 0;
	background-color: var(--color-lemon-white);
	/*border: 0;*/
	/*border-bottom: 2px solid black;*/
	/*border-color: #E7E7E7;*/
}

#topNavBar li.active a {
	color: var(--color-lemon-green) !important;
	/*border-bottom:2px solid white;*/
}

#topNavBar li a {
	color: var(--color-lemon-gblack) !important;
	/*border-bottom:2px solid white;*/
}

.navbar-nav > li > .dropdown-menu {
	border-radius: 4px;
}

/* ///kk TODO WSD
@media (min-width: 768px)
  .navbar-nav > li > a {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin-top: 6px !important;
}
*/

.icon-bar {
	background-color: var(--color-lemon-gblack);
}

.wsd-brand {
	font-family: "Satisfy", cursive;
	font-size: 45px;
	text-align: center;
	color: #555555;
}

.navbar-brand {
	font-family: "Satisfy", cursive;
	font-size: 25px;
	color: var(--color-lemon-green);

	/*for img...*/
	display: flex;
	align-items: center;

	padding: 0px 30px 0px 10px;
	/*padding: 0px;*/ /* firefox bug fix */
}

.navbar-brand > img {
	height: 100%;
	padding: 9px 8px;
}

.navbar-brand.active {
	/*color: var(--color-lemon-green);*/
}

.navbar-brand:hover,
.navbar-brand:focus {
	background-color: transparent;
	color: var(--color-lemon-green);
}

.navbar-nav .img-lang {
	width: 22px;
	color: #fff;
	/*
	-webkit-filter: drop-shadow( 1px 1px 2px gray );
			filter: drop-shadow( 1px 1px 2px gray );
*/
}

.nav > li > a.a-lang {
	padding-left: var(--pad-nav-img-lang);
	padding-right: var(--pad-nav-img-lang);
}
.nav > li > a.a-langR {
	padding-right: var(--pad-nav-img-lang);
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
	background-color: var(--color-lemon-bkgreen);
}

.nav > li > a:focus,
.nav > li > a:hover {
	background-color: var(--color-lemon-bkgreen);
}

/* finetune glyphicon vertical position */
.glyphicon {
	top: 2px; /* the default is 1px */
}

.glyphicon-heart {
	color: #cccccc;
	font-size: 16px;
}

.glyphicon-heart.active {
	color: #fdb230;
}

td .glyphicon-user {
	color: #cccccc;
	font-size: 16px;
}

td .glyphicon-user.active {
	color: #13b205;
}

/* glyphicons in buttons and Bootstrap badges 
 * inside td                                  */
td button .glyphicon {
	top: 2px;
}
td .btn .badge {
	top: 0px;
	/*vertical-align: middle;*/
}

/* account page */
dl {
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* Modal dialog */

/* add blur effect in background when a modal dialog is shown. */
.modal-open .blur-container {
	filter: blur(0.2em);
	-webkit-filter: blur(0.2em);
	-moz-filter: blur(0.2em);
}
/* background color when showing modal */
.modal-backdrop {
	/*background-color: rgba(255,255,255,.6);*/
	background-color: rgba(64, 103, 69, 0.85);
}
/* fade in dialog instead of fade from top */
.modal.fade .modal-dialog {
	transform: translate3d(0, 0, 0);
}
.modal.in .modal-dialog {
	transform: translate3d(0, 0, 0);
}

/*
.modal-header, h5, .close {
	background-color: #5cb85c;
	color:white !important;
	text-align: center;
	font-size: 30px;
}
.modal-footer {
	background-color: #f9f9f9;
}
*/

/* appear closer to vertical center */
.modal-dialog {
	padding-top: 10%;
}

/*----------------------------------------------------*/

.wsd-auth-container {
	margin-top: 50px;
}
.wsd-auth-container .wsd-panel-heading-link {
	float: right;
	font-size: 80%;
	position: relative;
	top: -10px;
}
.wsd-auth-container .panel-body {
	padding-top: 30px;
}
.wsd-auth-container .input-group {
	margin-bottom: 25px;
}
.wsd-auth-container .panel-heading {
	color: #555;
	background-color: #eee;
	border-color: #cbcbcb;
}
.wsd-auth-container .panel-info {
	border-color: #a2a2a2;
}

.table.table-report .row-group {
	background-color: lemonchiffon;
	font-weight: 500;
	border-top: 5px solid lightgray;
}
.table.table-report > tbody > tr > td {
	border-top: none;
}

.table > tbody > tr > td {
	vertical-align: middle;
}

tr:hover {
	background-color: #f8f8f8;
}

.td a:hover,
a:visited,
a:link,
a:active {
	text-decoration: none;
}

.wsd-oneline-form label {
	display: block;
}
.wsd-oneline-form div {
	display: inline-block;
	margin-left: 15px;
}

.wsd-strong-title {
	margin-bottom: 15px;
	font-weight: bold;
}

.btnrawfixed {
	min-width: 160px;
}

/* right align the caret */
.caret.caret-aligned {
	position: absolute;
	left: 90%;
	top: 45%;
}

/* keep links black colored in the tables */
table tr a:hover,
table tr a:visited,
table tr a:link,
table tr a:active {
	color: #333;
}

/* Remove dotted outline from all links */
a:hover,
a:visited,
a:link,
a:active {
	outline: 0;
}
/* what about outline in bootstrap buttons? (Submit, etc) */

.wsd-fa-refreshing-on {
	color: white;
}
.wsd-fa-refreshing-off {
	color: gray;
}

td.wsd-grayed {
	color: #aaa;
}

/* Bootstrap button overloads */
td .btn-outline {
	/* remove border from buttons inside the tables */
	border: 0px solid transparent;
}

.btn-outline {
	background-color: transparent;
	color: inherit;
	transition: all 0.3s;
}

.btn-primary.btn-outline {
	color: #428bca;
}

.btn-success.btn-outline {
	color: #5cb85c;
}

.btn-info.btn-outline {
	color: #5bc0de;
}

.btn-warning.btn-outline {
	color: #f0ad4e;
}

.btn-danger.btn-outline {
	color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
	color: #fff;
}

/* Bootstrap change nav-bar collapse breakpoint */
/* https://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less */

@media (max-width: 980px) {
	.navbar-header {
		float: none;
	}
	.navbar-left,
	.navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-nav {
		float: none !important;
		margin-top: 7.5px;
	}
	.navbar-nav > li {
		float: none;
	}
	.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.collapse.in {
		display: block !important;
	}
}

/* Panels in dashboard */

.panel-green {
	border-color: #5cb85c;
}
.panel-green > .panel-heading {
	border-color: #5cb85c;
	color: white;
	background-color: #5cb85c;
}
.panel-green > a {
	color: #5cb85c;
}
.panel-green > a:hover {
	color: #3d8b3d;
}
.panel-red {
	border-color: #d9534f;
}
.panel-red > .panel-heading {
	border-color: #d9534f;
	color: white;
	background-color: #d9534f;
}
.panel-red > a {
	color: #d9534f;
}
.panel-red > a:hover {
	color: #b52b27;
}
.panel-yellow {
	border-color: #f0ad4e;
}
.panel-yellow > .panel-heading {
	border-color: #f0ad4e;
	color: white;
	background-color: #f0ad4e;
}
.panel-yellow > a {
	color: #f0ad4e;
}
.panel-yellow > a:hover {
	color: #df8a13;
}

.panel-heading .huge {
	font-size: 30px;
}

img.fa-image {
	/*width: 10em;*/
	height: 5em;
}

/* ************** WSD Other *************** */

#id_captcha_1 {
	max-width: 70px;
	margin-left: 10px;
	border-style: none;
	/*font-size: large;*/
}

@media screen and (max-width: 600px) {
	.cookieinfo {
		min-height: 66px !important;
		min-width: 100px !important;
	}
	.cookieinfo-close {
		padding-top: 20px !important;
	}
}

/* ************ WSD Animations ************ */

.wsd-flash-danger {
	animation: flash-danger 1s infinite linear alternate;
	-moz-animation: flash-danger 1s infinite linear alternate;
	-webkit-animation: flash-danger 1s infinite linear alternate;
	-o-animation: flash-danger 1s infinite linear alternate;
}

@keyframes flash-danger {
	from {
		color: #babdbd;
	}
	to {
		color: red;
	}
}

@-moz-keyframes flash-danger {
	from {
		color: #babdbd;
	}
	to {
		color: red;
	}
}

@-webkit-keyframes flash-danger {
	from {
		color: #babdbd;
	}
	to {
		color: red;
	}
}

@-o-keyframes flash-danger {
	from {
		color: #babdbd;
	}
	to {
		color: red;
	}
}

/* ************ To be sorted ************ */

/*currently in use only for footer*/
.w3-tiny {
	font-size: 10px !important;
}
.w3-small {
	font-size: 12px !important;
}
.w3-medium {
	font-size: 15px !important;
}
.w3-large {
	font-size: 18px !important;
}
.w3-left-align {
	text-align: left !important;
}
.w3-right-align {
	text-align: right !important;
}
.w3-justify {
	text-align: justify !important;
}
.w3-center {
	text-align: center !important;
}
.w3-opacity,
.w3-hover-opacity:hover {
	opacity: 0.6;
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
	opacity: 1;
}
.wsd-footer {
	padding: 0px 20px;
}