/*
 Copyright 2019 Novartis Institutes for BioMedical Research Inc. Licensed
 under the Apache License, Version 2.0 (the "License"); you may not use
 this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0. Unless
 required by applicable law or agreed to in writing, software distributed
 under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
 OR CONDITIONS OF ANY KIND, either express or implied. See the License for
 the specific language governing permissions and limitations under the License.
*/

pre {
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 6px;
    line-height: 1.385;
    color: #333333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #F5F5F5;
    border: 1px solid #cccccc;
    border-radius: 3px;
    width: 80%;
}


body {
	font-family: Arial, sans-serif;
	line-height: 1.8;
	margin: 50px;
	background-color: #F5F5F5;
	font-size: 21px;
	user-select: none;
}

.image-text-container {
	display: flex; /* Use flexbox to align items */
	align-items: center; /* Center vertically */
}	

/* p {
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 3px 22px 44px rgba(24, 77, 98, 0.1);
	/* border: 1px solid #000;
} 
*/


li {
	font-size: 22px;
}


.btn-group {
	display: flex;
	/* flex-direction: column; /* Stack buttons vertically */
	gap: 12px; /* Space between buttons */
	/* align-items: center;*/
	/* width: 100%; */
}

.btn-text-group {
	display: block;
	flex-direction: row; 
	width: 100%;
}

.list-group-item {
	flex: 1; /* Make each button take equal space */
}

.big-button {
	width: 100%; 
	height: 100px; 
}

.btn-group button {
	background-color: #42a5cc;
	border: 1px solid blue; 
	color: white; 
	padding: 10px 24px;
	/* float: left; /* Float the buttons side by side */
	font-weight: bold;
	font-size: 33px;
	cursor: pointer;
	width: 100%;
}

/* Clear floats  */
.btn-group:after {
	content: "";
	clear: both;
	display: table;
}

.btn-group button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
	background-color: black;
}


.footer {
	background-color: #F5F5F5;
	color: black;
	padding: 15px;
	text-align: center;
	position: relative;
	left: 0;
	right: 0;
	bottom: -34vh; /*-100px; Initially hide the footer */
	transition: bottom 0.3s; /* Smooth transition */
}

.footer.visible {
		bottom: 0; /* Show the footer */
}

.menu {
	display: none; /* Hide menu by default */
	margin-top: 10px;
}

.menu.show {
	display: block; /* Show menu when toggled */
}

.menu ul {
	list-style-type: none;
	padding: 0;
}

.menu li {
	margin: 5px 0;
	font-size: 14px;
}

.menu a {
	color: blue;
	text-decoration: none;
}

.menu a:hover {
	text-decoration: underline;
}

.contact a {
	color: blue;
	text-decoration: none;
}

.contact a:hover {
	text-decoration: underline;
}

.linkimg{
    width: 13px;
    height: 13px; 
    background-color: transparent;
}

.above-footer {
	font-size: 15px;
	position: absolute;
	/*bottom: 1px; /* 132px fixed distance from the bottom of the viewport */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%); /* Adjust for centering */
	padding: 20px;
	text-align: center;
	color: #555;
	animation: fadeOut 30s forwards;
}

/*Tooltip*/
.info-container{position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer;}

.info-icon{border-radius:2px;background:#42a5cc;color:#fff;font-weight:bold;text-align:center;line-height:1.5em;font-family:sans-serif;font-size:0.9em;user-select:none;padding:2px 4px;}

.info-tooltip{visibility:hidden;opacity:0;position:fixed;top:44vh;width:98%;background:#fff;border:2px solid #42a5cc;transition:opacity .2s ease-in-out;z-index:999}

.info-container:hover .info-tooltip,.info-container:focus-within .info-tooltip{visibility:visible;opacity:1}.info-tooltip h4{margin:0 0 .25em;font-size:1em;color:#333}

.info-tooltip p{margin:12;font-size:.9em;line-height:1.3;color:#555} 


/* Smaller screens eg. phones*/
@media (max-width: 900px) or (max-height: 750px) {
    body {
        font-size: 8px;
        margin: 5px;   
    }

    .big-button {
        height: 50px; 
    }
    
    .btn-group button {
        padding: 4px 9px;
        font-size: calc(20px - 0.75vw);
    }

	.menu li {
		font-size: 7px;
	}
	
    .linkimg{
        width: 5.5px;
        height: 5.5px; 
    }

    .above-footer {
        font-size: 5px;
        padding: 6px;
        width: 100%;
        left: 0;
        transform: none;
      }

	.footer {
		position: fixed; /* Fixed position to keep it at the bottom */
		bottom: 0vh; /*calc(-10vh + 10px); */
	}
	
}


@keyframes fadeOut {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
        z-index: -3;
    }
}

/*Bigger screens*/
@media (min-height: 1500px){
	.footer {
		bottom: -54vh;
	}
	
}

@media (min-height: 2500px){
	.footer {
		bottom: -74vh; 
	}
	
}

#cluster-bg {
	position: absolute;
	width: 98%; height: 98%;
	margin: auto;
	z-index: -1000;            /* well below everything else */
	pointer-events: none;      /* clicks go through to  UI */
	animation: fadeOut 120s forwards;
  }

#aniversion{
	font-size: clamp(6px, 1vw, 9px);
	left: 21vw;
	position: relative;
	font-family: monospace;
	color: #d3d3d38a;
}