:root {
    --my-light-green: rgb(113, 190, 113);
    --my-medium-green: rgb(62, 156, 62);
    --my-green: green;
    --my-dark-green: rgb(1, 90, 1);

    --my-light-purple: #aa6dbd; 
    --my-medium-purple: #6b397a;
    --my-purple: #5a1470;
    --my-dark-purple: #370c44;

    --my-error-color: #f8d7da; /*rgb(255, 132, 132); */
    --my-dark-error-color: #721c24 ; /*rgb(184, 98, 98);  */
  }

#app_header{
	height: 60px;
	background-color: var(--my-purple);
	width: 100%;
	color: #ffffff;
	position: fixed;
	top:0;
	right: 0;
	z-index: 500;
}

#app_header #text{
    vertical-align: middle;
	height: 60px;
	width: 70%;
	min-width: 870px;
	margin: auto;
	padding-top: auto;
	padding-bottom: auto;
	line-height: 60px;
}

#app_header #title{
	float: left;
}

#app_header #links{
	float: right;
}

#container{
	background-color: #ffffff;
	width: 70%;
	min-width: 870px;
	margin:auto;
	padding: 20px;
	overflow: hidden;
	border-color: var(--my-light-green);
	border-style: solid;
	border-width: 0px 2px 2px 2px;
	position: relative;
}

.link{
	cursor: pointer;
	position: relative;
    display: inline-block;
}

.main{
	vertical-align: center;
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column; 
}

a:hover {
	color:inherit;
	text-decoration: none;
}

a {
	text-decoration: underline;
}

.alert {
    position: fixed;
    top: 140px;
	right: 20px;
	width: 20%;
	min-width: 350px;
}

/* Tooltip text */
.link .tooltiptext {
	background-color: var(--my-medium-purple) !important;
}

.main{
	width: 100%;
}

#home-menu{
	position: relative;
    display: inline-block;
}

#home-dropdown{
	color: white;
	font-size: 1em;
	background: var(--my-medium-purple);
	display: none;
	position: absolute;
	z-index: 1;
	margin-left: -260px;
	width: 300px;
}

#home-menu:hover #home-dropdown{
	display:block;
}

.dropdown-item{
	color: white;
	background: var(--my-medium-purple);
}

.dropdown-item:hover{	
	background: var(--my-purple);
}

@media print{
	#app_header{
		display:none !important;
	}
}