@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&family=Source+Sans+Pro:wght@300;400;700&family=Roboto:wght@400;500;700;900&display=swap');
.font-title { font-family: 'Roboto', sans-serif; font-size: 16pt; font-weight: 900; }
.font-title-big { font-family: 'Roboto', sans-serif; font-size: 18pt; font-weight: 900; }
.font-title-extrabig { font-family: 'Roboto', sans-serif; font-size: 20pt; font-weight: 900; }
.font-default { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 400; }
.font-midi { font-family: 'Roboto', sans-serif; font-size: 14pt; font-weight: 400; }
.font-big { font-family: 'Roboto', sans-serif; font-size: 16pt; font-weight: 400; }
.font-extrabig { font-family: 'Roboto', sans-serif; font-size: 18pt; font-weight: 400; }
.font-small { font-family: 'Roboto', sans-serif; font-size: 10pt; font-weight: 400; }
.font-extrasmall { font-family: 'Roboto', sans-serif; font-size: 8pt; font-weight: 400; }


body { font-family: 'Roboto', sans-serif; font-size: 11pt; font-weight: 400; }



.visible { display: inline-block; }
.unvisible { display: none; }


.shadow-gray {
	padding: 10px 10px 10px 10px;
	border: 1px solid #AAAAAA;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px 5px #DDDDDD;
}
.shadow-blue {
	padding: 10px 10px 10px 10px;
	border: 1px solid #0040FF;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px 5px #81BEF7;
}
.shadow-brown {
	padding: 10px 10px 10px 10px;
	border: 1px solid #8A4B08;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px 5px #B45F04;
}



.black { color: black; }
.brown { color: brown; }
.blue { color: blue; }
.green { color: green; }
.gray { color: gray; }
.red { color: red; }
.orange { color: orange; }
.yellow { color: yellow; }
.white { color: white; }



.bg-black { background-color: black; }
.bg-gray { background-color: gray; }
.bg-light-gray { background-color: #F2F2F2; }
.bg-brown { background-color: brown; }
.bg-light-brown { background-color: #F6E3CE; }
.bg-blue { background-color: blue; }
.bg-light-blue { background-color: #CEE3F6; }
.bg-green { background-color: green; }
.bg-light-green { background-color: #82FA58; }
.bg-red { background-color: red; }
.bg-pink { background-color: #F79F81; }
.bg-orange { background-color: orange; }
.bg-yellow { background-color: yellow; }
.bg-light-yellow { background-color: #F5F6CE; }
.bg-white { background-color: white; }
.bg-caption-blau { background-image: linear-gradient(#CED8F6, #5882FA); }



.img-white {
	filter: brightness(0) invert(1);
}
.img-gray {
  filter: grayscale(100%);
}
.img-blue {
	filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
}
	
	
	
.rounded { border-radius: 5px; }
.rounded-top { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.rounded-bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.rounded-10 { border-radius: 10px; }



.center { margin: 0 auto; }
.center-middle {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.center-top {
	margin: 0;
	position: absolute;
	top: 5px;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, 5px);
}
.center-bottom {
	margin: 0;
	position: absolute;
	bottom: 5px;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -5px);
}
.left-middle {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 5px;
	-ms-transform: translate(5px, -50%);
	transform: translate(5px, -50%);
}
.left-top, .left {
	margin: 0;
	position: absolute;
	top: 5px;
	left: 5px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(5px, 5px);
}
.left-bottom {
	margin: 0;
	position: absolute;
	bottom: 5px;
	left: 5px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(5px, -5px);
}
.right-middle {
	margin: 0;
	position: absolute;
	top: 50%;
	right: 5px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-5px, -50%);
}
.right-top, .right {
	margin: 0;
	position: absolute;
	top: 5px;
	right: 5px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-5px, 5px);
}
.right-bottom {
	margin: 0;
	position: absolute;
	bottom: 5px;
	right: 5px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-5px, -5px);
}



.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p25 { padding: 25px; }
.p30 { padding: 30px; }



.w10 { width: 10px; }
.w20 { width: 20px; }
.w25 { width: 25px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w170 { width: 170px; }
.w180 { width: 180px; }
.w190 { width: 190px; }
.w200 { width: 200px; min-width: 200px; }
.w210 { width: 210px; min-width: 210px; }
.w220 { width: 220px; min-width: 220px; }
.w230 { width: 230px; min-width: 230px; }
.w240 { width: 240px; min-width: 240px; }
.w250 { width: 250px; min-width: 250px; }
.w260 { width: 260px; min-width: 260px; }
.w270 { width: 270px; min-width: 270px; }
.w280 { width: 280px; min-width: 280px; }
.w290 { width: 290px; min-width: 290px; }
.w300 { width: 300px; min-width: 300px; }
.w330 { width: 330px; min-width: 330px; }
.w350 { width: 350px; min-width: 350px; }

.gap-top-5 { margin-top: 5px; }
.gap-top-20 { margin-top: 20px; }
.gap-top-50 { margin-top: 50px; }
.gap-top-70 { margin-top: 70px; }
.gap-top-80 { margin-top: 80px; }
.gap-top-90 { margin-top: 90px; }
.gap-top-100 { margin-top: 100px; }

.gap-bottom-7 { margin-bottom: 7px; }
.gap-bottom-10 { margin-bottom: 10px; }
.gap-bottom-15 { margin-bottom: 15px; }
.gap-bottom-20 { margin-bottom: 20px; }
.gap-bottom-25 { margin-bottom: 25px; }
.gap-bottom-50 { margin-bottom: 50px; }
.gap-bottom-60 { margin-bottom: 60px; }
.gap-bottom-70 { margin-bottom: 70px; }
.gap-bottom-100 { margin-bottom: 100px; }



.body-window {
	width: 96%;
	height: 98%;
	max-width: 798px;
	max-height: 1500px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.body-title { font-family: 'Roboto', sans-serif; font-size: 14pt; ont-weight: 500; border-radius: 5px 5px 0 0; padding: 10px; background-image: linear-gradient(#fefefe, #ebebeb); }
.body-content { padding: 20px; font-family: 'Sans Pro', sans-serif; font-size: 12pt; font-weight: 300; height: calc(100% - 100px); overflow: scroll; }
.body-footer { padding: 5px; background-image: linear-gradient(#bbbbbb, #fefefe); }
.body-h-calc-152 { height: calc(100% - 152px); }



.window {
	z-index: 99999;
	width: 87%;
	max-width: 698px;
	min-height: 150px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.window-title { font-family: 'Roboto', sans-serif; font-size: 14pt; font-weight: 500; border-radius: 5px 5px 0 0; padding: 5px 10px;}
.window-content { padding: 20px; font-family: 'Sans Pro', sans-serif; font-size: 12pt; font-weight: 300; }
.window-footer { padding: 10px; }



.button {
	position: relative;
	background-color: #3e8e41;
	color: #FFFFFF;
	border: none;
	padding: 5px;
	width: 150px;
	text-align: center;
	transition-duration: 0.4s;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
}
.button:hover { background-color: #1f6627; }



.menu-container {
	min-width: 298px;
	max-width: 720px;
	min-height: 28px;
}
.menu-button {
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	color: #EFF8FB;
	text-shadow: 2px 2px 4px #000000;
	min-height: 22px;
	padding: 15px;
	background-image: linear-gradient(#999999, #bbbbbb);
}
.menu-button:hover { background-image: linear-gradient(#eeeeee, #aaaaaa); }



.row:after {
	content: "";
	display: table;
	clear: both;
}
.column {
	float: left;
	padding: 10px;
}



.autocomplete {
	position: relative;
	display: inline-block;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}
.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
	/*when hovering an item:*/
	background-color: #e9e9e9;
}
.autocomplete-active {
	/*when navigating through the items using the arrow keys:*/
	background-color: DodgerBlue !important;
	color: #ffffff;
}



#bg-disabled
{
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: #111111;
	opacity: 0.8;
}



p { margin: 0; padding: 0; }
input { border: 1px solid black; border-radius: 5px; padding: 5px; }
input:focus { border: 1px solid blue; outline: none; }