/* MAIN {{{ */
.richtext {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	overflow: auto;
	padding: 5px;
}

a {
	cursor: pointer;
}

button {
	cursor: pointer;
}

footer {
	background-color: var(--purple-1);
	color: white;
	font-weight: bold;
	padding: 1px;
	overflow: hidden;
	border-radius: var(--soft);
	margin: var(--inside-space);
}

google-map {
	width: 100%;
	height: 500px;
}

google-map > iframe {
	height: 100%;
	width: 100%;
	filter: sepia(100%) hue-rotate(200deg) saturate(8);
	border-radius: var(--soft);
	border: solid;
}

icon {
	height: 0px;
}

input:focus, textarea:focus {
	outline: none;
}

label {
	font-weight: bold;
}

textarea {
	resize: none;
	width: 100%;
}

.rounded {
	border-radius: var(--primary-radius);
}

ul {
	margin: 0;
}

.txtpur {
	color: var(--purple-1);
}

.txtgr {
	color: var(--green-1);
}

.btn {
	border-radius: var(--soft);
	border: 2px solid var(--purple-1);
	background-color: var(--purple-1);
	color: white;
	padding: 8px;
}

#copyright {
	margin: 10px;
	text-align: center;
}

#pre-footer {
	padding: var(--inside-space);
	background-color: var(--color-2-a);
	color: white;
}

#pre-footer > h2 {
	color: black;
}

#pre-footer > div {
	display: flex;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	gap: var(--inside-space);
}

#location { 
	max-width: 100%;
	height: 100%;
	display: flex;
	padding: var(--inside-space);
	margin: var(--inside-space);
	margin-top: 0px;
}

@media screen and (max-width: 960px) {
	#pre-footer > div {
		flex-direction: column;
	}
}

@media screen and (max-width: 595px) {
	footer {
		margin-bottom: 0px;
		border-radius: 0px;
	}
}
/* MAIN }}} */

/* INFOBAR {{{ */
#info-bar a:hover > icon > svg {
	fill: yellow;
}

#info-bar > #social > a:hover > icon > svg {
	fill: yellow;
	transition: 0.2s;
}

#info-bar a:hover > span {
	color: yellow;
}
/* INFOBAR }}} */

/* USER {{{ */
.login:hover {
	background-color: white !important;
	border: 2px solid var(--purple-1);
	color: var(--purple-1);
}

.login:hover > icon > svg {
	fill: mediumslateblue;
}

#list > div:hover, #list > a:hover {
	border-left: 1px solid var(--purple-1);
}

@media screen and (max-width: 595px) {
	.login:hover {
		background-color: transparent !important;
		border: none !important;
	}
}
/* USER }}} */