/*------------------*/
/* Global Variables */
/*------------------*/
:root {
	--global-color-main-base: #37B8ED;		
	--global-color-main-darker: #2C94BF;		
	--global-color-main-darkest: #28558B;
	--global-color-main-active: #73CDF2;	
	--global-color-main-hover-light: #0399D6;	
	--global-color-main-hover-dark: #007BAE;
	--global-color-button-base: #FFEC52;	
	--global-color-button-darker: #E6D44A;		
	--global-color-button-disabled: #EEEEEE;
	--global-color-title: #FFFFFF;
	--global-color-text-normal: #3A3A3A;	
	--global-color-text-faded: #676767;
}

.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-30 { font-size: 30px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

i.material-icons{
	vertical-align: middle;
}

/*--------------*/
/* Global Rules */
/*--------------*/
html { 
	font-size: 16px; 
	margin: 0;
	padding: 0;
  	position: relative;
  	min-height: 100%;
}
body {
	background-color: #C1C1C1; 
	font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-align: left;
	flex-direction: column; 
	/*padding-top: 64px*/
}

br { 
	line-height: 20px; 
	margin: 0; 
}
/*
hr { 
	border-top: 1px solid var(--global-color-main-base); 
	color: rgba(0, 0, 0, 0); 
	margin: 1em 2.5em;
	padding: 0; 
}
*/
h1, h2, h3, h4, h5, h6 { 
	font-family: 'Fredoka One', cursive; 
	font-weight: normal; 
	line-height: 1em; 
	margin: 0 0 0.75em 0; 
	padding: 0; 
}
div#body-container > div h1 { 
    font-size: 2.25em;
    color: var(--global-color-title);
    /*text-shadow: 1px 1px 2px rgb(255 255 255 / 40%);*/
	text-shadow: 0px 1px 2px rgb(255 255 255 / 45%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: #5f5f5f;
    color: transparent;
    pointer-events: none;
	user-select: none;
}

h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }
p { 
	color: var(--global-color-text-normal); 
	font-family: 'Montserrat', sans-serif;
	font-size: 1em; 
	font-weight: 500; 
	line-height: 1.5em; 
	margin: 0 0 0.75em 0; 
	padding: 0; 
}


h1 i.material-icons{
	font-size: 1.2em;
	vertical-align: text-top;;
}

label { margin: 0 0 10px 0; }

a { cursor: pointer; }
a:link { color: var(--global-color-main-base); }
a:visited { color: var(--global-color-main-base); }
a:hover { color: var(--global-color-main-darker); }
a:active { color: var(--global-color-main-darkest); }

/*
a:link { color: var(--global-color-main-darkest); }
a:visited { color: var(--global-color-main-darkest); }
a:hover { color: #c73536; text-decoration: none; }
a:active { color: #c73536; }
*/

input, textarea { margin: 0 0 10px 0; }
body.browser-edge input::-ms-clear, 
body.browser-edge input::-ms-reveal { 
	display: none; 
	position: absolute;
}
body.browser-safari input::-webkit-credentials-auto-fill-button { 
	display: none; 
	position: absolute; 
	visibility: hidden; 
}

div#body-container{
	/* margin: 1.5rem auto 250px auto; */
	margin-top: 1.5rem;
	margin-bottom:  1.5rem;
}

@media (min-width: 576px){
	/*
	.modal-xl {
		max-width: 900px;
	}*/
	.modal-lg {
		min-width: 980px;
	}
	.modal-xl {
		/* min-width: 1280px; */
		min-width: 80%;
	}
}

/* bootstrap styles */
.modal-header{
	background-color: #37B8ED;
}
.modal-header .modal-title{
	color: white !important;
}
.modal-header button.close{
	color:white;
	font-size: 2rem;
	text-shadow:  none;
	opacity: .5;
}
.modal-header .close:not(:disabled):not(.disabled):focus, 
.modal-header .close:not(:disabled):not(.disabled):hover{
	color:white;
	opacity: 1;
}
.form-control{
	border-color: var(--global-color-main-base);
	border-radius: .5rem;
}
.form-control:disabled, .form-control[readonly]{
	border-color:#e9ecef
}
.alert{
	font-weight: 400;
}
.alert-danger {
    color: #F93A3A;
    background-color: #FCEDEE;
    border-color: #FF6C6C;
}

.table thead th{
	font-family: 'Fredoka one';
    font-weight: 400;
}

/*
input[type=date], 
input[type=password], 
input[type=text],
 textarea
{
	border: 1px solid var(--global-color-main-base);
	color: var(--global-color-text-normal);
	font-family: 'Montserrat', sans-serif;		
	font-size: 1.1em;		
	font-weight: 500;
	text-align: left;
	padding: 14px 19px;		
	width: calc(100% - 2em);
}
*/
textarea.form-control,
input[type=date], 
input[type=email], 
input[type=password], 
input[type=text] {
	/*border: 1px solid var(--global-color-main-base);*/
	color: var(--global-color-text-normal);
	font-family: 'Montserrat', sans-serif;		
	font-size: 0.85rem;		
	font-weight: 500;
	text-align: left;
	/*
	padding: 14px 19px;		
	width: calc(100% - 2em);*/
}
/*
body.browser-chrome input[type=password], 
body.browser-opera input[type=password], 
body.browser-safari input[type=password] { 
	letter-spacing: 4px; 
	-webkit-text-stroke-width: 3px; 
}
body.browser-edge input[type=date], 
body.browser-edge input[type=password], 
body.browser-edge input[type=text] { 
	padding: 14px 20px 13px 18px; 
}
body.browser-edge textarea { 
	padding: 14px 19px 13px 19px; 
}
body.browser-firefox input[type=date], 
body.browser-firefox input[type=password], 
body.browser-firefox input[type=text], 
body.browser-firefox textarea { 
	padding: 13px 19px;
 }
body.browser-safari input[type=date], 
body.browser-safari input[type=password], 
body.browser-safari input[type=text], 
body.browser-safari textarea { 
	padding: 14px 19px 13px 19px; 
}

input[type=date]::placeholder, 
input[type=password]::placeholder, 
input[type=text]::placeholder,
textarea::placeholder { 
	color: var(--global-color-text-faded); 
	font-style: italic; 
}
body.browser-chrome input[type=password]::placeholder, 
body.browser-opera input[type=password]::placeholder, 
body.browser-safari input[type=password]::placeholder { 
	letter-spacing: initial; 
	-webkit-text-stroke-width: initial; 
}
body.browser-edge input[type=date]::-ms-input-placeholder,
body.browser-edge input[type=password]::-ms-input-placeholder, 
body.browser-edge input[type=text]::-ms-input-placeholder,
body.browser-edge textarea::-ms-input-placeholder { 
	color: var(--global-color-text-faded); 
	font-style: italic; 
}
body.browser-firefox input[type=date]::placeholder, 
body.browser-firefox input[type=password]::placeholder, 
body.browser-firefox input[type=text]::placeholder, 
body.browser-firefox textarea::placeholder { 
	opacity: 1; 
}
*/


input[type=email]::placeholder, 
input[type=date]::placeholder, 
input[type=password]::placeholder, 
input[type=text]::placeholder,
textarea::placeholder { 
	color: var(--global-color-text-faded); 
	opacity: .45 !important;
}


input[type=button], 
input[type=submit]
{
	background-color: var(--global-color-button-base);
	border-style: none;		
	border-radius: 10px;
	color: var(--global-color-main-darkest);
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;		
	font-size: 1.15em;		
	font-weight: 800;
	text-align: center;
	padding: 1em;		width: 100%;
}
input[type=button]:active, 
input[type=submit]:active { 
	background-color: var(--global-color-button-darker); 
}
input[type=button]:disabled, 
input[type=submit]:disabled { 
	color: #CCCCCC; 
	background-color: var(--global-color-button-disabled);
 }




/* button, .btn- */
.btn,
.button,
a.button,
input[type=button], 
input[type=submit] {
	border-style: none;		
	border-radius: 5px;
	background-color: var(--global-color-button-base);
	color: var(--global-color-main-darkest);
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;		
	font-size: 12px;	
	font-weight: 800;
	text-align: center;
	padding: 1em;	
	text-transform: uppercase;	
	/*width: 100%;*/;
	border:0px;
}
input[type=button]:active,
input[type=submit]:active { 
	background-color: var(--global-color-button-darker); 
}
.button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled {
	color: #CCCCCC  !important;
	background-color: var(--global-color-button-disabled) !important;
}
.button:hover{
    background-color: var(--global-color-button-base);
	color: var(--global-color-main-darkest);
    border-color: #0062cc;
}
.button:not(:disabled):not(.disabled).active, 
.button:not(:disabled):not(.disabled):active, 
.show > .button.dropdown-toggle{
	background-color: var(--global-color-button-base);
	color: var(--global-color-main-darkest);
}
.button:not(:disabled):not(.disabled).active:focus, 
.button:not(:disabled):not(.disabled):active:focus, 
.show > .button.dropdown-toggle:focus{
	box-shadow: 0 0 0 0.2rem rgba(255, 236, 82, 0.5)
}
.button.focus, .button:focus{
	box-shadow: 0 0 0 0.2rem rgba(255, 236, 82, 0.5);
	outline:none;
}


/* .btn-primary */
.btn-primary.disabled, 
.btn-primary:disabled,
.btn-primary.disabled:hover {
	color: #fff !important;
	background-color: #bfbfbf !important;
}
.btn-primary:focus,
.btn-primary:hover{
    background-color: var(--global-color-main-base);
	color: #FFFFFF;
}
.btn-primary:not(:disabled).active, 
.btn-primary:not(:disabled):active, 
.show > .btn-primary.dropdown-toggle{
	background-color: var(--global-color-main-base);
	color: #FFFFFF;
}
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle{
	background-color: var(--global-color-main-base);
	color: #FFFFFF;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus, 
.show > .btn-primary.dropdown-toggle:focus{
	box-shadow: 0 0 0 0.2rem rgba(55, 184, 237, 0.5);
}
.btn-primary.focus, 
.btn-primary:focus {
	box-shadow: none;
}
.btn-primary.disabled {
	opacity: 1;
}
.btn-primary:disabled {
	opacity: .65;
}



/* .btn-danger */
.btn-danger{
	background-color: #FF6565;
	color:white;
}
.btn-danger.disabled, 
.btn-danger:disabled,
.btn-danger.disabled:hover {
	color: #fff;
	background-color:#bfbfbf;
}
.btn-danger:hover{
    background-color: var(--global-color-main-base);
    background-color: #ff3030;
	color: #FFFFFF;
}
.btn-danger:not(:disabled).active, 
.btn-danger:not(:disabled):active, 
.show > .btn-danger.dropdown-toggle{
	background-color: var(--global-color-main-base);
	color: #FFFFFF;
}
.btn-danger:not(:disabled):not(.disabled).active, 
.btn-danger:not(:disabled):not(.disabled):active, 
.show>.btn-danger.dropdown-toggle{
	background-color: var(--global-color-main-base);
	color: #FFFFFF;
}
.btn-danger:not(:disabled):not(.disabled).active:focus, 
.btn-danger:not(:disabled):not(.disabled):active:focus, 
.show > .btn-danger.dropdown-toggle:focus{
	box-shadow: 0 0 0 0.2rem rgba(55, 184, 237, 0.5);
}
.btn-danger.focus, 
.btn-danger:focus {
	box-shadow: none;
}
.btn-danger.disabled {
	opacity: 1;
}
.btn-danger:disabled {
	opacity: .65;
}




.scroller::-webkit-scrollbar {
	width: 5px;
}
.scroller::-webkit-scrollbar-thumb {
	background: #37B8ED; 
  }


select { 
	color: var(--global-color-text-normal); 
	font-family: 'Montserrat', sans-serif; 
	font-weight: 600; 
	margin: 0.5em 0; 
	padding: 0.25em; 
}
select:disabled { 
	color: var(--global-color-text-faded); 
}
option { 
	color: var(--global-color-text-normal); 
	font-family: 'Montserrat', sans-serif; 
	font-weight: 400; 
}
option:disabled { 
	color: var(--global-color-text-faded); 
	display:none; 
}

div { margin: 0; padding: 0; }
table { border-collapse: collapse; margin: 0 auto; }
th { font-weight: bold; padding: 0; text-align: center; }
td { font-weight: normal; padding: 0; text-align: center; }
img { margin: 0; padding: 0; }

/*----------------*/
/* Specific Rules */
/*----------------*/

.color-text { color: var(--global-color-text-normal); }
.color-faded { color: var(--global-color-text-faded); }
.color-title { color: var(--global-color-title); }

.display-block { display: block; }
.display-none { display: none; }

.float-left { float: left; }
.float-right { float: right; }

.font-fredokaone-normal { font-family: 'Fredoka One', cursive; font-weight: normal; }
.font-fredokaone-bold { font-family: 'Fredoka One', cursive; font-weight: bold; }

.font-montserrat-light { font-family: 'Montserrat', sans-serif; font-weight: 300; }
.font-montserrat-regular { font-family: 'Montserrat', sans-serif; font-weight: 400; }
.font-montserrat-medium { font-family: 'Montserrat', sans-serif; font-weight: 500; }
.font-montserrat-semibold { font-family: 'Montserrat', sans-serif; font-weight: 600; }
.font-montserrat-bold { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.font-montserrat-extrabold { font-family: 'Montserrat', sans-serif; font-weight: 800; }

.font-simulate-kerning { letter-spacing: 0.08em; }

p.info-error, p.info-success { 
	padding: 0.25em 0.5em; 
	margin: 0.5em 0; 
	width: calc(100% - 1em); 
}
p.info-error { 
	background-color: #FCF0F0; 
	border: 1px solid #FFC0C0; 
	color: #E87070; 
}
p.info-success { 
	background-color: #F5FCEC; 
	border: 1px solid #C7ED96; 
	color: #82B640; 
}

label.label-input { color: var(--global-color-main-base); 
	font-family: 'Montserrat', sans-serif; 
	font-size: 0.9em; 
	font-weight: 600; 
	letter-spacing: 0.08em; 
}

a.internal-link { 
	color: var(--global-color-main-base); 
	text-decoration: underline; 
}
a.internal-link:hover { 
	color: var(--global-color-main-darker); 
}
a.internal-link:active { 
	color: var(--global-color-main-darkest); 
}

input[type=button].loading, 
input[type=submit].loading
{
	color: rgba(0, 0, 0, 0);
	background-color: var(--global-color-button-disabled);
	background-image: url("../img/icon-loading.gif");		
	background-position: center;		
	background-repeat: no-repeat;		
	background-size: 2em;
}

div.input-passwordtextswitch { 
	cursor: pointer; 
	float: left; 
	height: 0; 
	width: 0; 
}

/*-------------------------*/
/* Specific Checkbox Rules */
/*-------------------------*/

label.checkbox-container
{
	color: var(--global-color-text-normal);
	font-family: 'Montserrat', sans-serif;		
	font-size: 0.85em;		
	font-weight: 500;
	cursor: pointer;
	display: block;
	position: relative;		
	padding: 0 0 0 24px;
	-moz-user-select: none;		
	-webkit-user-select: none;		
	user-select: none;
}
label.checkbox-container input[type=checkbox] { 
	opacity: 0; 
	position: absolute; 
}
label.checkbox-container:active input[type=checkbox] ~ span.checkbox-checkmark { 
	background-color: var(--global-color-main-active); 
}
label.checkbox-container input[type=checkbox]:checked ~ span.checkbox-checkmark { 
	background-color: var(--global-color-main-base); 
}
label.checkbox-container input[type=checkbox]:checked ~ span.checkbox-checkmark:after { 
	display: block; 
}
label.checkbox-container span.checkbox-checkmark
{
	border: 1px solid var(--global-color-main-base);
	height: 14px;		
	width: 14px;
	position: absolute;		
	top: 0;		
	left: 0;
}
label.checkbox-container span.checkbox-checkmark:after { 
	content: ""; 
	display: none; 
	position: absolute; 
}
label.checkbox-container span.checkbox-checkmark:after
{
	bottom: 3px;		
	left: 5px;
	height: 8px;		
	width: 3px;
	border-color: #FFFFFF;		
	border-style: solid;		
	border-width: 0 2px 2px 0;
	-moz-transform: rotate(45deg);		
	-webkit-transform: rotate(45deg);		
	transform: rotate(45deg);
}

/*---------------------------*/
/* Specific File Label Rules */
/*---------------------------*/

label.file-label
{
	background-color: var(--global-color-button-base);
	border-radius: 0.5em;
	color: var(--global-color-main-darkest);
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;		
	font-size: 1.2em;		
	font-weight: 800;
	text-align: center;
	padding: 1em;
}
label.file-label:active { 
	background-color: var(--global-color-button-darker); 
}
label.file-label-disabled { 
	color: #CCCCCC; 
	background-color: var(--global-color-button-disabled); 
}
label.file-label-disabled:active { 
	background-color: var(--global-color-button-disabled);
 }

/*------------------------------*/
/* Specific Custom Select Rules */
/*------------------------------*/

div.custom-select
{
	border: 1px solid var(--global-color-main-base);
	font-family: 'Montserrat', sans-serif;		
	font-size: 1.1em;		
	font-weight: 500;
	padding: 4px 10px 5px 0;		
	margin: 0 0 10px 0;
	position: relative;
	-moz-user-select: none;		
	-webkit-user-select: none;		
	user-select: none;
	width: calc(100% - 2em);
}
body.browser-firefox div.custom-select { 
	padding: 3px 10px 4px 0; 
}
div.custom-select select {
	 display: none; 
	}
div.custom-select div.select-selected.selected-default { 
	color:var(--global-color-text-faded); font-style: italic; 
}
div.custom-select div.select-selected div.selected-arrow{
	background-color: var(--global-color-main-base);
	width: 51px;
	position: absolute;		
	top: 0;		
	right: 0;		
	bottom: 0;
}
div.custom-select div.select-selected div.selected-arrow:after
{
	content: "";
	border: 8px solid transparent;		
	border-color: var(--global-color-title) transparent transparent transparent;
	position: absolute;		
	top: 22px;		
	right: 17px;
}
div.custom-select:hover div.select-selected div.selected-arrow, 
div.custom-select div.select-selected.select-arrow-active div.selected-arrow { 
	background-color: var(--global-color-main-hover-light); 
}
div.custom-select div.select-selected:active div.selected-arrow { 
	background-color: var(--global-color-main-active); 
}
div.custom-select div.select-selected.select-arrow-active div.selected-arrow:after { 
	border-color: transparent transparent var(--global-color-title) transparent; 
	top: 13px; 
}
div.custom-select div.select-items
{
	background-color: var(--global-color-main-hover-light);
	font-family: 'Montserrat', sans-serif;		font-size: 1em;		font-weight: 300;		letter-spacing: 0.08em;
	position: absolute;		top: 100%;		left: -1px;		right: -1px;
	z-index: 1;
}
div.custom-select div.select-items div, 
div.custom-select div.select-selected { 
	color: var(--global-color-text-normal); 
	cursor: pointer; 
	padding: 10px 22px 9px 22px;
 }
div.custom-select div.select-items div { 
	border-top: 1px solid var(--global-color-main-base);
	 color: var(--global-color-title); 
	}
div.custom-select div.select-items div:first-child { 
	border-top-style: none; 
}
div.custom-select div.select-items div:hover { 
	background-color: var(--global-color-main-hover-dark);
 }
div.custom-select div.select-items div:active { 
	background-color: var(--global-color-main-active); 
}
div.custom-select div.select-hide { display: none; }

/*--------------------------*/
/* Specific Round Box Rules */
/*--------------------------*/

div.round-box {
	 border-radius: 15px; 
	 box-shadow: 0 10px 60px 1px rgba(0, 69, 107, 0.7); 
	}
body.browser-edge div.round-box { 
	box-shadow: 0 10px 55px 1px rgba(0, 69, 107, 0.7);
 }
body.browser-firefox div.round-box, 
body.browser-safari div.round-box {
	 box-shadow: 0 10px 37px 1px rgba(0, 69, 107, 0.7);
	 }
div.round-box-title, div.round-box-body { 
	text-align: center; 
}
div.round-box-title { 
	background-color: var(--global-color-main-base); 
	border-radius: 15px 15px 0 0; 
	padding: 26px; 
	text-transform: uppercase
}
div.round-box-title h1, 
div.round-box-title h2, 
div.round-box-title h3, 
div.round-box-title h4, 
div.round-box-title h5, 
div.round-box-title h6 { 
	font-size: 1.25em; 
	margin-bottom: 0; 
}
div.round-box-body { 
	background-color: #FFFFFF;
	border-radius: 0 0 15px 15px; 
	padding: 26px; 
	text-align: left;
}

div.round-box.round-box-light, 
body.browser-edge div.round-box.round-box-light, 
body.browser-firefox div.round-box.round-box-light, 
body.browser-safari div.round-box.round-box-light { 
	box-shadow: none; 
}
div.round-box.round-box-light div.round-box-title { 
	border-color: #D9D9D9; 
	border-style: solid; 
	border-width: 0 1px; 
	padding: 14px 19px 12px 19px; 
	text-align: left; 
}
div.round-box.round-box-light div.round-box-title h1, 
div.round-box.round-box-light div.round-box-title h2, 
div.round-box.round-box-light div.round-box-title h3,
div.round-box.round-box-light div.round-box-title h4, 
div.round-box.round-box-light div.round-box-title h5, 
div.round-box.round-box-light div.round-box-title h6{ 
	font-family: 'Montserrat', sans-serif; 
	font-size: 0.875em; 
	font-weight: 700; 
	letter-spacing: 0.08em; 
	color:white;
}
body.browser-edge div.round-box.round-box-light div.round-box-title h1, 
body.browser-edge div.round-box.round-box-light div.round-box-title h2,
body.browser-edge div.round-box.round-box-light div.round-box-title h3, 
body.browser-edge div.round-box.round-box-light div.round-box-title h4,
body.browser-edge div.round-box.round-box-light div.round-box-title h5, 
body.browser-edge div.round-box.round-box-light div.round-box-title h6,
body.browser-firefox div.round-box.round-box-light div.round-box-title h1, 
body.browser-firefox div.round-box.round-box-light div.round-box-title h2,
body.browser-firefox div.round-box.round-box-light div.round-box-title h3, 
body.browser-firefox div.round-box.round-box-light div.round-box-title h4,
body.browser-firefox div.round-box.round-box-light div.round-box-title h5, 
body.browser-firefox div.round-box.round-box-light div.round-box-title h6 { 
	font-size: 0.9em; 
	font-weight: 700; 
}
div.round-box.round-box-light div.round-box-body {
	border-color: #D9D9D9; 
	border-style: solid;
	border-width: 0 1px 2px 1px; 
	padding: 26px; 
}
div.round-box.round-box-light div.round-box-body p { 
	font-weight: 300; 
	letter-spacing: 0.08em; 
}

button.button,
input[type=submit],
 input[type=submit]{
	font-size: 0.9em;
	text-transform: uppercase;
	margin: 0px;
}


.autocomplete-suggestions { 
	border: 1px solid #999; 
	background: #FFF; 
	overflow: auto; 
	font-size: 12px;
	font-weight: 600;
}
.autocomplete-suggestions::-webkit-scrollbar {
	width: 5px;
}
.autocomplete-suggestions::-webkit-scrollbar-thumb {
	background: #37B8ED; 
  }

  .autocomplete-suggestion { 
	margin: 5px; 
	padding: 5px 15px; 
	white-space: nowrap; 
	overflow: hidden; 
}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }


.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #9BDE41;
    border-color: #9BDE41;
}
.page-link:hover {
    z-index: 2;
    color: var(--global-color-main-base);
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-item a{
	color: var(--global-color-main-base);
	font-weight: 600;
}

.page-item .btn-primary:not(:disabled):not(.disabled).active, 
.page-item .btn-primary:not(:disabled):not(.disabled):active, 
.show > .page-item  .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #9BDE41;
    border-color: #9BDE41;
}
.page-item .btn-primary:not(:disabled):not(.disabled).active:focus, 
.page-item .btn-primary:not(:disabled):not(.disabled):active:focus, 
.show > .page-item .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(155, 222, 65, 0.5);
}


/* bs-switch */
.bs-switch {
    position: relative;
    display: inline-block;
	width: 40px;
    height: 23px;
}
.bs-switch input {
    display: none;
}
.bs-switch .slider.round {
    -webkit-border-radius: 34px;
    border-radius: 34px;
}
.bs-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
}

.bs-switch .slider.round:before {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.bs-switch .slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    -webkit-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
}
.bs-switch input:checked+.slider {
    background-color: var(--global-color-main-base);
}

.bs-switch input:checked+.slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}


/*--------------------------------*/
/* Specific Navigation List Rules */
/*--------------------------------*/

/* MAIN MENU */
ul.list-navigation { 
	list-style-type: none; 
	margin: 0;
	padding: 0; 
	/*overflow: hidden; */
	display:flex;
}
ul.list-navigation li { 
	-moz-user-select: none; 
	-webkit-user-select: none;
	user-select: none; 
	/*width: var(--header-navigation-elements-width);*/
}
ul.list-navigation li a {
    display: inline-block;
	color: var(--global-color-title);
	font-family: 'Fredoka One', cursive;	
	font-size: 1.175rem;		
	font-weight: normal;		
	letter-spacing: 0.08em;
	text-align: center;
    text-decoration: none;
	box-sizing:initial;
	
    display: flex;
    align-items: center;
}
ul.list-navigation li a span {
	/*
	position: relative;
	top: calc((var(--header-container-height) / 2) - 0.65em); 
	*/
}

ul.list-navigation > li > a {
	padding: 20px;
}

ul.list-navigation > li.active a, 
ul.list-navigation > li:hover{ 
	background-color: var(--global-color-main-hover-light); 
	transition: background-color 300ms ease,
		color 300ms ease;
}
ul.list-navigation li a:active, 
ul.list-navigation li.list-dropdown:hover a.dropdown-button:active {
	background-color: var(--global-color-main-active); 
}
ul.list-navigation li.list-dropdown:hover li a.dropdown-button { 
	background-color: var(--global-color-main-hover-light); 
}
ul.list-navigation li.list-dropdown { 
	display: inline-block; 
	position: relative; 
}
ul.list-navigation li.list-dropdown span.dropdown-arrow{
	border-color: rgba(255, 255, 255, 0.675);		
	border-style: solid;		
	border-width: 0 3px 3px 0;
	display: inline-block;
	margin-bottom: 13px;		
	padding: 3px;
	position: absolute;		
	top: calc((var(--header-container-height) / 2) + 0.5em + 2px);		
	/*left: calc((var(--header-navigation-elements-width) / 2) - 5px);*/
	left:50%;
	-moz-transform: rotate(45deg);		
	-webkit-transform: rotate(45deg);		
	transform: rotate(45deg);
}
ul.list-navigation div.dropdown-content { 
	/*background-color: var(--global-color-main-hover-light); */
	display: none; 
position: absolute;
	top: var(--header-container-height);
	left:0px; 
	z-index: 1;
}
ul.list-navigation div.dropdown-content a {
	display: block;
	border-top: 1px solid var(--global-color-main-base);
	color: var(--global-color-title);
	font-family: 'Montserrat', sans-serif;		
	font-size: 1em;		
	font-weight: 300;		
	letter-spacing: 0.08em;
	height: 1em;		
	/*min-width: calc(var(--header-navigation-elements-width) - 2em +2px);*/
	margin-top: 0;		
	/*padding: 12px 22px;*/
	padding: 22px 32px;
	text-align: left;
	text-decoration: none;
    white-space: nowrap;
	background: var(--global-color-main-hover-light);
}
ul.list-navigation div.dropdown-content a:first-child{
	border-radius: 0px 0px 0px 0px;
}
ul.list-navigation div.dropdown-content a:last-child{
	border-radius: 0px 0px 3px 3px;
}
ul.list-navigation div.dropdown-content a:first-child { 
	border-style: none; 
}
ul.list-navigation div.dropdown-content a:hover { 
	background-color: var(--global-color-main-hover-dark);
}
ul.list-navigation div.dropdown-content a:active { 
	background-color: var(--global-color-main-active);
}
ul.list-navigation li.list-dropdown:hover div.dropdown-content {
	display: block;
}
.custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
	background-color: var(--global-color-main-base)
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02);
}

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

/* FOOTER */
#footer{ 
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
	background-color: #77868c;     
	
	/*
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 230px;
	overflow: hidden
	*/
}
#footer .footer-container{ 
	padding: 45px 0 30px; 
	margin: auto; 
	overflow: hidden
}
#footer .column-left{
	float:left;
	width: 50%;
}
#footer .column-right{
	float:right; 
	width: 50%;
}
#footer p{
	color: white; 
	font-size: .815rem; 
	line-height: 1.25em;
	font-weight: 200;
}
#footer p.logo{
	margin-top:15px;
	 margin-bottom: 5px;
}

#footer a{ 
	color: white; 
	text-decoration: none;
	font-size: .8rem;
}
#footer ul{
	list-style: none; 
	padding: 0;
	margin: 0;
	font-size: .8rem;
}
#footer ul.menu{
	padding-right: 3em; 
	float: right;
}
#footer ul.menu > li{
	float: left; 
	margin-left:40px;
}
#footer ul.menu > li:first-child{margin-left: 0px}
#footer ul.menu ul{margin-top: 3px}
#footer ul.menu > li > a{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-decoration: underline; 
	margin-bottom: 10px;
}
#footer ul.menu a:hover{
	color: #FFEC52;
}
#footer ul.menu li a{
	display: block;
}

#footer .copyright{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	background-color: #333333; 
	color:#F4F4F4; 
	padding: 16px;
	font-size:  12px;  
	text-align: center;
}
#footer .copyright a{ 
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color:#F4F4F4;
	text-decoration: underline;
	font-size:  12px; 
}

body{
	display: flex;
    height: 100vh;
}

#app{
    display: flex;
    flex-direction: column; 
    flex-grow: 1;
}
/*
#app #body{
	border:20px solid #E14747;
	min-height: 700px;
}
*/
#app > .container, #app > #body {

    flex-grow: 1;
    display: flex;
    flex-direction: column;
   /* justify-content: center; */
}

#app #body-background{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* ------------------------ */

#alert{
	margin-bottom: 1rem;
    position: fixed;
    z-index: 9999;
    top: 100px;
    width: 25%;
    right: 1.5rem;
}

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

.loader{
	min-height: 100px;
	background: transparent url("../img/ajax-loader.gif") center no-repeat;
}

.loader-mini {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: left;
    margin: auto; 
    cursor: progress;

    .icon {
        display: flex;
        width: 25px;
        height: 25px;
        border: 3px solid var(--global-color-main-base);
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
    }

    .message {
        color: #094875;
        padding: 2rem;
    }
}

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

.grid {
	display: grid;
	grid-template-columns: auto;
	gap: 0.75rem;
	align-items: center;
}

.grid.grid-2{
	grid-template-columns: auto auto;
}

.grid.grid-3{
	grid-template-columns: auto auto auto;
}

.grid.grid-4{
	grid-template-columns: auto auto auto auto;
}

.grid .bs-switch{
	display: block;
	height: 20px;
	margin: 0px;
	padding: 0px;
}
.grid .bs-switch .slider {
	background-color: #A1A1A1;
}	
.grid .bs-switch .slider.round{
	border-radius: 20px;
}

.grid .bs-switch .slider::before{
	height: 16px;
	width: 16px;
	background-color: #D9D9D9;
}
		
.grid .bs-switch input:checked+.slider{
			
	background-color: #094975;
}

.grid .bs-switch input:checked+.slider::before{
	background-color: #FFD11B;
	transform: translateX(20px);
}

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

[v-cloak] > *{
	display: none;
}

[v-cloak] .loader{
	display: block;
}

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

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;} 
 } 

.fadeOut {
	opacity: 1;
	animation: fadeOut 0.4s linear;
	-webkit-animation: fadeOut 0.4s linear;

	animation-delay: 1s;
	-webkit-animation-delay: 1s;

	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

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

/* webkit scroll bar*/
html {
}
body {
}

/* Let's get this party started */
::-webkit-scrollbar {
	width: 12px;
	background-color: transparent;
}
 
/* Track */
::-webkit-scrollbar-track {
	
	background-color: #333333;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--global-color-main-base);
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*
	background: rgba(255,0,0,0.8); 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
	background: var(--global-color-main-active);
}

textarea::-webkit-scrollbar-track {
	background-color: transparent;
}