/*********/
/* sizes */
/*********/

html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: monospace;
}

#status-bar {
	margin-top: 20px;
	margin-right: 20px;
}

#status-bar div {
	font-size: 1.75em;
	font-weight: bold;
	font-family: monospace;
	color: rgb(255, 193, 7); /* w3.css amber */
	padding: 2px 10px 2px 10px;
	margin-left: 10px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 4px;
}

.popupPoints {
	position: absolute;
    display: block !important;
	font-size: 1.75em;
	font-weight: bold;
	font-family: monospace;
	color: rgb(255, 193, 7); /* w3.css amber */
	padding: 2px 10px 2px 10px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 4px;
}

#frame {
	--width: 1000px;
	--height: 100%;
}

.mode__default .viewable:hover,
.mode__view .viewable:hover {
	cursor: crosshair;
}

.mode__take .takable:hover {
	cursor: grab;
}

.mode__default .viewable:hover,
.mode__view .viewable,
.mode__take .takable {
	background-color: rgba(255, 255, 255, 0.5);
	animation-name: visible-animated;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#img-view {
	width: 100%;
	height: 100%;
}

#img-view {
	position: block;
	top:0;
	left: 0;
}

#svg-view {
	position: absolute;
	top:0;
	left: 0;
}

.w3-button {
	font-weight: bold;
}

.w3-button.w3-indigo.w3-hover-white:hover {
	color: rgb(63, 81, 181) !important; /* w3.css indigo */
}

#modal-menu .w3-modal-content {
	width: 250px;
}

#modal-menu .dialog-body .w3-bar-item {
	margin-bottom: 10px;
}

.action-modal {
	background-color: rgb(76, 175, 80); /* w3.css green */
}

	.action-modal .dialog-footer .w3-button {
		background-color: white;
		color: rgb(76, 175, 80); /* w3.css green */
	}

	.action-modal .dialog-footer .w3-button:hover {
		background-color: rgb(0, 150, 136) !important; /* w3.css teal */
		color: white !important;
	}


.system-modal {
	background-color: rgb(33, 150, 243); /* w3.css blue */
}

	.system-modal .dialog-footer .w3-button {
		background-color: white;
		color: rgb(33, 150, 243); /* w3.css blue */
	}

	.system-modal .dialog-footer .w3-button:hover {
		background-color: rgb(63, 81, 181)!important; /* w3.css indigo */
		color: white !important;
	}
	
#button-go-forward {
	margin-top: 60px;
}

#button-go-right {
	margin-right: 60px;
}

#button-go-back {
	margin-bottom: 60px;
}

#button-go-left {
	margin-left: 60px;
}

.scene-navigation--button {
	background-color: rgb(233, 30, 99); /* w3.css pink */
	color: white;
}

.scene-navigation--button:hover {
	background-color: white !important;
	color: rgb(233, 30, 99) !important; /* w3.css pink */
}

.menu-button {
	background-color: rgb(33, 150, 243); /* w3.css blue */
	color: white;
}

.menu-button:hover {
	background-color: white !important;
	color: rgb(33, 150, 243) !important; /* w3.css blue */
}

.action-button {
	background-color: rgb(76, 175, 80); /* w3.css green */
	color: white;
}

.action-button:hover,
.action-button__active {
	background-color: white !important;
	color: rgb(76, 175, 80) !important; /* w3.css green */
}

#panel-actions,
#panel-item-inventory {
	height: 100%;
}

#panel-item-inventory {
	padding-left: 20px;
}

#quests {
	list-style: none;
	margin: 0;
	padding: 0;
}

	#quests li {
		margin-bottom: 5px;
	}

.quest-image {
	width: 50px;
	height: 50px;
	border: 1px solid lightgray;
}

.quest-text {
	padding-left: 10px;
}

.modal__image {
	width: 400px;
	height: 300px;
	border: 1px solid lightgray;
}

.modal__title,
.modal__description {
	padding-left: 10px;
	margin-top: 0;
}

#item-inventory {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

	#item-inventory img {
		height: 50px;
		width: 50px;
	}

	#item-inventory li {
		display: inline-block;
		padding-right: 5px;
	}

.item-inventory-placeholder {
	border: 1px solid white;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.button-close-dialog {
	border-radius: 0 4px 0 0;
}

/*
.w3-modal-content {
	background-color: rgba(211, 255, 255, 0.8);
	color: black;
}

	.w3-modal-content h1,
	.w3-modal-content h2,
	.w3-modal-content h3,
	.w3-modal-content h4,
	.w3-modal-content h5 {
		color: #3f51b5
	}

	.w3-modal-content i {
		background-color: white;
		color: #3f51b5;
		padding: 5px;
	}
*/

.dialog-header {
	border-radius: 16px 16px 0 0;
	border-bottom: 1px solid white;
}

.dialog-header h1,
.dialog-header h2,
.dialog-header h3,
.dialog-header h4,
.dialog-header h5 {
	font-weight: bold;
}

.dialog-body {
	padding-top: 16px;
	padding-bottom: 16px;
}

.dialog-footer {
	border-radius: 0 0 16px 16px;
	padding: 16px;
}

/**********/
/* colors */
/**********/

html, body {
	font-family: Verdana, Arial;
	color: #333333;
}

.map--marker {
	background-color:rgb(233, 30, 99); /* w3.css pink */
}

.map--marker:hover {
	background-color:white;
	cursor: pointer;
}

.map--marker-tooltip {
	white-space: nowrap;
	padding: 5px 10px;
	background-color: white;
	color: rgb(233, 30, 99); /* w3.css pink */
	border: 2px solid rgb(233, 30, 99); /* w3.css pink */
	font-weight: bold;
}

.map--marker-tooltip:hover {
	background-color: rgb(233, 30, 99); /* w3.css pink */
	color: white;
	border: 2px solid rgb(233, 30, 99); /* w3.css pink */
	cursor: pointer;
}

#container-scene-description {
	height: 23px;
}
 

/**************/
/* visibility */
/**************/


@keyframes visible-animated {
	from {
		background-color: rgba(255, 193, 7, 0.7); /* w3.css amber */
	}
	to {
		background-color: rgba(255, 193, 7, 0.1);
	}
}