@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {box-sizing: border-box;}

html{ min-height: 100%}

body, input, textarea, select, button {
    font-family: 'Urbanist',Helvetica,Arial,Lucida,sans-serif;
}

body { padding:0; background-color: #333; background-size: cover; background-image: url("/media/images/blackwall_light.jpg");}

ul {margin: 0; padding: 0; list-style-type: none; background-color: #333;}
li{ margin-bottom: 10px; background-color: RGBA(0,0,0,0.5); padding: 10px; border: 1px solid #F9B233;}
select {padding: 8px; background-color: #111; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
input {padding: 8px; background-color: transparent; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
button {padding: 8px; background-color: #111; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px; cursor: pointer; background-color: #111111;}
button.delete-button {background-color: #E00914; color: #fff; font-weigh: bold; border: 1px solid #E00914;}
textarea {background-color: #111; color: #eee;}

a{color: #F9B233; text-decoration: none;}
a:hover{text-decoration: underline;}


#brainpowerlogo{position: absolute; padding: 8px 10px; top: 0; right:0; max-width: 50%;}
#brainpowerlogo img{max-height: 50px; max-width: 100%;}
#myTeamContainer{position: relative; padding: 8px 0;}
#myTeamContainer button{font-size: 1em; padding: 8px; min-width: 42px; font-weight: bold}

#toggleTeamContainer, #toggleAddPlayerContainer {position: absolute; z-index: 2000; width: 100%; background-color: #333; color: #EEE; border: 1px solid #F9B233; padding: 15px; font-size: 1.2em;}

#map {border: 2px solid #F9B233; height: 500px; max-height: 75vh;}
	
#newMarkerContainer {margin: 15px 0;}
#newMarkerContainer input {padding: 8px; background-color: #333; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
#newMarkerContainer button {padding: 8px; background-color: #111; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}

#marker-list {margin: 0; padding: 0; list-style-type: none; background-color: #333; color: #F9B233;}
#marker-list li{ margin-bottom: 10px; background-color: RGBA(0,0,0,0.5); padding: 10px; border: 1px solid #F9B233;}
#marker-list select {padding: 8px; background-color: #111; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
#marker-list input {padding: 8px; background-color: transparent; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
#marker-list button {padding: 8px; background-color: #111; color: #F9B233; border: 1px solid #F9B233; margin-right: 3px;}
#marker-list button.delete-button {background-color: #E00914; color: #fff; font-weigh: bold; border: 1px solid #E00914;}
#marker-list .location-name-input {width: 230px;}
#marker-list .location-radius-input {width: 60px;}
#marker-list .drag-handle{ margin-right: 10px; color: #F9B233;}
#marker-list .markerID, #marker-list .markerLatLng {display: none;}

#events-list, #cases-list, #teams-list {color: #F9B233; padding: 10px; margin: 20px 0 0 0;}
#events-list li, #cases-list li, #teams-list li{color: #F9B233; padding: 0; margin: 0; background-color: transparent; border: 0; padding-bottom: 10px;}
#teams-list > li {border: 1px solid #F9B233; padding-bottom: 0px; margin-bottom: 10px;}
#teams-list > li > div {padding: 10px;}
#teams-list > li > ul {border: 1px solid #F9B233;}
#teams-list > li > ul > li {padding: 5px 10px; border-bottom: 1px dotted #F9B233;}
#teams-list > li > ul > li.solved {background-color: RGBA(255,255,255,0.1);
}



.questionForMarker, .buttonForMarker, .passwordForMarker {width: 100%; max-width: 500px;margin-bottom: 2px;}

.toggleInfoContainer {border-top: 1px solid #F9B233; margin-top: 15px; padding: 3px; background-color: #333;} 
.toggleInfoButton {color: #F9B233; cursor: pointer;}
.toggleContainer {margin-top: 15px; display: none; color: #F9B233;}

.contentBeforeContainer textarea, .contentActualContainer textarea, .contentSolvedContainer textarea {width: 100%; height: 170px; color: #eeeeee;}

.activate {margin-top: 4px;}

#locationsContainer{ text-align: justify; margin-top: 10px; } 
.locationContainer{width: 32%; margin-right: 2%; margin-bottom: 2%; max-width: 150px; vertical-align: top; display: inline-block; position: relative; min-height: 150px; padding: 10px 5px; font-size: 1em; cursor: pointer; }
.locationContainer span{padding-top: 8px; display: inline-block; }
.locationContainer img{max-width: 80%; max-height: 80px; margin: 0 auto;}
.locationContent {position: fixed; display: block; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; z-index: 3000; overflow: auto;} 
.locationContentClose {position: absolute; display: block; right: 0; top: 0; margin: 5px; padding: 12px; border: 2px solid #FFF; background-color: #333; z-index: 1001; color: #FFF; font-weight: bold; text-align: center; cursor: pointer;}
.locationContentCloseLeft {animation: pulseCloseButton 1.5s infinite; background: linear-gradient(130deg, rgba(0,0,0,1) 20%, rgba(90,90,90,1) 60%, rgba(0,0,0,1) 100%); position: fixed; display: block; left: 0; bottom: 0; margin: 5px; padding: 12px 18px; border: 2px solid #FFF; z-index: 1001; color: #FFF; font-weight: bold; text-align: center; cursor: pointer;}


.locationPasswordContainer {text-align: center; padding: 15px 5px; background-color: #111; color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF;  font-size: 1.3em;}
.locationPasswordContainer button, .locationPasswordContainer input { background-color: #333; color: #FFF; border: 1px solid #FFF; font-size: 1em;}
.locationPasswordCheck { width: 300px; max-width: 90%;}




@keyframes pulseCloseButton {
	0% {
		
		background: linear-gradient(130deg, rgba(0,0,0,1) -20%, rgba(90,90,90,1) 0%, rgba(0,0,0,1) 20%);
	}	
	3% {
		background: linear-gradient(130deg, rgba(0,0,0,1) -10%, rgba(90,90,90,1) 10%, rgba(0,0,0,1) 30%);
	}
	6% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 0%, rgba(90,90,90,1) 20%, rgba(0,0,0,1) 40%);
	}
	9% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 10%, rgba(90,90,90,1) 30%, rgba(0,0,0,1) 50%);
	}
	12% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 20%, rgba(90,90,90,1) 40%, rgba(0,0,0,1) 60%);
	}
	15% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 30%, rgba(90,90,90,1) 50%, rgba(0,0,0,1) 70%);
	}
	18% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 40%, rgba(90,90,90,1) 60%, rgba(0,0,0,1) 80%);
	}
	21% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 50%, rgba(90,90,90,1) 70%, rgba(0,0,0,1) 90%);
	}
	24% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 60%, rgba(90,90,90,1) 80%, rgba(0,0,0,1) 100%);
	}
	27% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 70%, rgba(90,90,90,1) 90%, rgba(0,0,0,1) 110%);
	}
	30% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 80%, rgba(90,90,90,1) 100%, rgba(0,0,0,1) 120%);
	}
	33% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 90%, rgba(90,90,90,1) 110%, rgba(0,0,0,1) 130%);
	}
	36% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 100%, rgba(90,90,90,1) 120%, rgba(0,0,0,1) 140%);
	}
	100% {
		background: linear-gradient(130deg, rgba(0,0,0,1) 100%, rgba(90,90,90,1) 120%, rgba(0,0,0,1) 140%);
	}	
}


/* CSS to style the modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 2500;
			font-size: 1.6em;
        }

        .modal .modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			text-align: center;
			max-width: 300px;
			width: 90%;
        }
		
		.modal button{margin: 10px; font-size: 0.8em;}




/* LOADING SPINNER */
.loading-spinner {
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* MOBILE */
@media only screen and (max-width: 600px) {
	#myTeamContainer{padding: 40px 0 8px 0;}
	#map {height: 400px;}
	#toggleTeamContainer, #toggleAddPlayerContainer {text-align: center;}
	#brainpowerlogo{padding: 3px 10px;}
	#locationsContainer	.locationContainer:nth-child(3n+3){margin-right:0;}
}