@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

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

body {
	/*background-color: rgba(80, 46, 46, 0.9);*/
	background-color: var(--main-bg-color);
	/*font-family: verdana;*/
	font-family: "Inter", sans-serif;
	color: #FFF;
}

.justify-content-between > :only-child {
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	main.container {
		position: relative;
		max-width: 576px;
		top: 80px;
		margin: 0 auto;
		padding: 15px 50px !important;
		height: calc(100% - 219px);
		min-height: unset !important;
		box-shadow: 0 0 20px rgba(0, 0, 0, .2);
		overflow-y: auto;
		overflow-x: hidden;
	}

	#mapContainer {
		max-width: 576px;
		top: 80px !important;
		margin: 0 auto;
		overflow: hidden;
		height: calc(100% - 219px) !important;
	}

	#mapContainer .statusBar {
		max-width: 576px;
	}

	#miniMapContainer {
		right: calc(50vw - 485px) !important;
		bottom: 170px !important;
	}

	#fullMenuSlideIn {
		max-width: 576px;
		top: 80px !important;
		right: 0;
		margin: 0 auto;
		overflow: hidden;
		height: calc(100vh - 219px) !important;
	}

	.modalAboveMapWrapper {
		max-width: 576px;
		top: 80px !important;
		right: 0;
		margin: 0 auto;
		padding: 15px 50px !important;
		overflow: hidden;
		height: calc(100% - 219px) !important;
	}

	.modalAboveMap > .closeModal {
		top: 70px !important;
		right: 225px !important;
	}

	.sw-navbar {
		max-width: 576px;
		margin-top: 40px;
		margin-bottom: 0px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0.3);
	}

	.fixed-bottom {
		max-width: 576px;
		margin-top: 0px;
		margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.3);
	}

	.explenation-section > div form {
		max-width: 85%;
		margin: 0 auto;
	}
}

@media (min-width: 1200px) {
	main.container {
		position: relative;
		max-width: 992px;
		top: 80px;
		margin: 0 auto;
		padding: 15px 200px !important;
		height: calc(100% - 234px);
		min-height: unset !important;
		box-shadow: 0 0 20px rgba(0, 0, 0, .2);
		overflow-y: auto;
		overflow-x: hidden;
	}

	#mapContainer {
		max-width: 992px;
		top: 80px !important;
		margin: 0 auto;
		overflow: hidden;
		height: calc(100% - 234px) !important;
	}

	#mapContainer .statusBar {
		max-width: 992px;
	}

	#miniMapContainer {
		right: calc(50vw - 485px) !important;
		bottom: 170px !important;
	}

	#fullMenuSlideIn {
		max-width: 992px;
		top: 80px !important;
		right: 0;
		margin: 0 auto;
		overflow: hidden;
		height: calc(100vh - 234px) !important;
	}

	.modalAboveMapWrapper {
		max-width: 992px;
		top: 80px !important;
		right: 0;
		margin: 0 auto;
		padding: 15px 200px !important;
		overflow: hidden;
		height: calc(100% - 234px) !important;
	}

	.modalAboveMap > .closeModal {
		top: 70px !important;
		right: 225px !important;
	}

	.sw-navbar {
		max-width: 992px;
		margin-top: 40px;
		margin-bottom: 0px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0.3);
	}

	.fixed-bottom {
		max-width: 992px;
		margin-top: 0px;
		margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.3);
	}

	.explenation-section > div form {
		max-width: 70%;
		margin: 0 auto;
	}
}

.container-outside-main {
	margin: 0 -15px;
}

.defaultFontSize {
	font-size: 0.7rem;
}

.mediumFontSize {
	font-size: 0.6rem !important;
}

.smallFontSize {
	font-size: 0.5rem !important;
}

a, a:active, a:hover {
	text-decoration: none;
	color: #FFF;
}

nav.sw-navbar {
	padding: 0.5rem 1rem;
}

.fullMenuToggle {
	cursor: pointer;
}

.card-body.default-spacing {
	padding: 20px !important;
}

.shineEffect {
	width: 100%;
	height: 25px;
	background: var(--secondary-bg-color);
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1a2a2), color-stop(50%,#5a5f5d), color-stop(51%,#35230e), color-stop(100%,#3d260c));*/
}

.btn-secretway {
	background-color: var(--button-secondary-bg-color-transparent);
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	color: #FFF;
	font-size: 0.7em;
	text-align: center;
	min-width: 150px;
	padding: 0.35rem 0.5rem;
	border: 0px;
}

.btn-secretway-outline {
	background-color: var(--button-tertiary-bg-color-transparent);
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	color: #FFF;
	font-size: 0.7em;
	text-align: center;
	min-width: 150px;
	padding: 0.35rem 0.5rem;
	border: 0px;
}

/*.btn-secretway {
	background-color: var(--secondary-bg-color);
	color: #FFF;
	font-size: 0.8em;
	text-align: center;
	min-width: 150px;
	padding: 0.25rem 0.5rem;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
}*/

.btn-full-width {
	width: 100%;
}

main.container {
	min-height: calc(100% - 99px);
	padding-top: calc(40px + 15px);
	padding-bottom: calc(99px + 15px);

	background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--main-container-background);
	background-size: cover; /* of 100%? */
	background-position: center;
	background-attachment: fixed;
}

.no-background {
	background: transparent !important;
}

.text-normal, p {
	font-size: 0.7rem;
	color: #FFF;
}

.text-clock {
	font-size: 0.8rem;
}

.sw-text-light {
	color: #FFF;
}

.sw-background-light-dark {
	background-color: var(--tertiarty-bg-color);
}

.sw-background-dark {
	background-color: var(--secondary-bg-color);
}

.no-border {
	border: none;
}

.navbar-toggler {
	padding: 0;
}

.navbar-toggler-icon {
	height: 1em;
}

.sw-new-messages {
	font-size: 1.1em;
}

main.hoofdkwartier > .card {
	margin-bottom: 15px;
}

main.hoofdkwartier > .card > .card-body > .row {
	color: #FFF;
	font-size: 0.9em;
}

main.hoofdkwartier > .card > .card-body > .row i {
	padding: 0 5px;
}

main.container > .card {
	opacity: 0.96;
	border-radius: 0;
	border-color: var(--secondary-bg-color);
	/*background: transparent;*/
	background-color: var(--main-bg-color);
}

main.container > .card > .card-header {
	border-color: var(--secondary-bg-color);
	font-size: 0.7rem;
	text-align: center;
	padding: 0.20rem 1.20rem;
	border-radius: 0px !important;
	color: #FFF;
	/*background: url('https://www.secretway.nl/assets/css/v3/menu2.jpg');*/
	font-weight: bold;
}

main.container > .card > .card-image {
	border-bottom: 1px solid var(--secondary-bg-color);
	height: 130px;
}

main.container > .card > .card-text {
	border-bottom: 1px solid var(--secondary-bg-color);
	padding: .50rem .75rem;
	/*background: var(--tertiarty-bg-color);*/
	background: var(--4th-bg-color);
	/*background: transparent;*/
}

main.container > .card > .card-text p {
	margin-bottom: 0;
}

main.container > .card > .card-body {
	/*background: var(--tertiarty-bg-color);*/
	background: var(--4th-bg-color);
	/*background: transparent;*/
	padding: 0;
}

main.container > .card > .card-body > .card {
	background: var(--secondary-bg-color);
	margin: .50rem .75rem;
}

main.container > .card > .card-body > .card > .card-body {
	font-size: 0.7rem;
	padding: .25rem .50rem;
	color: #FFF;
}

/* FOOTER */
.playerInfo i {
	font-size: 1.1rem;
	margin-top: 5px;
}

.playerInfo .pagerank-holder {
	height: 15px;
	width: 100%;
	background-color: #333333;
	border: 1px #848484 solid;
	float: left;
	margin-top: 6px;
}

.playerInfo .rank3 {
	background-color: #FFCC00;
	height: 13px;
	float: left;
	text-align: center;
}

.playerInfo span {
	color: var(--secondary-bg-color);
	font-size: 0.5rem;
	font-weight: bold;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;

	text-shadow: 0 1px 3px 0 rgba(212, 212, 213, 1), 0 0 0 1px rgba(212, 212, 213, 1);
}

footer > .playerInfo {
	padding: 5px 20px;
	font-size: 0.7em;
}
/* -------- */

.errormsg {
/*	color: #B80000 !important;*/
	color: #e01818 !important;
}

.text-background {
	padding: 5px 10px;
	background: rgba(0, 0, 0, .25);
	margin-bottom: 5px;
}

.admincolor {
	color: yellow;
}

.hdcolor {
	color: #00CCCC;
}

.title, .titlecolor, .messagetitlecolor, .accentcolor {
	color: orange !important;
}

.green {
	color: #0F6800 !important;
}

.succes {
	/*color: #25C400 !important;*/
/*	color: #49FF1F !important;*/
	color: #43e51e !important;
}

.inputDollarPrefix input {
	padding-left: 15px;
}

.inputDollarPrefix {
	position: relative;
	display: inline;
}

.inputDollarPrefix:before {
	content: '$';
	position: absolute;
	font-size: 0.7rem;
	top: 2px;
	left: 8px;
	z-index: 1;
}

.inputEuroPrefix input {
	padding-left: 20px;
}

.inputEuroPrefix {
	position: relative;
	display: inline;
}

.inputEuroPrefix:before {
	content: '€ ';
	position: absolute;
	font-size: 0.7rem;
	top: 3px;
	left: 8px;
	z-index: 1;
}

label {
	font-size: 0.7rem;
}

.fullWidthInput {
	width: 100%;
	background: var(--tertiarty-bg-color);
	color: #FFF;
	font-size: 0.7rem;
	padding: 0.15rem 0.4rem;
	/*padding: 0.25rem 0.5rem;*/
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
}

.buttonStandaard {
	background: var(--secondary-bg-color);
	color: #FFF;
	font-size: 0.7rem;
	padding: 0.15rem 0.4rem;
	/*padding: 0.25rem 0.5rem;*/
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
}

.submitButtonFullWidth {
	width: 100%;
	background: var(--secondary-bg-color);
	color: #FFF;
	font-size: 0.7rem;
	padding: 0.15rem 0.4rem;
	/*padding: 0.25rem 0.5rem;*/
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
}

#fullMenuSlideIn {
	position: fixed;
	display: none;
	top: 40px;
	left: 0;
	height: 100%;
	max-height: calc(100% - 138px);
	overflow-y: auto;
	width: 100%;
	background: var(--main-bg-color);
	border-top: 1px solid rgba(93, 65, 65, 0.7);
	border-right: 1px solid rgba(93, 65, 65, 0.7);
	border-bottom: 1px solid rgba(93, 65, 65, 0.7);
	padding: 0;
/*	z-index: 5;*/
	z-index: 10000;
}

#fullMenuSlideIn.visible {
	display: inline-block;
}

#fullMenuSlideIn .firstHalf {
	width: 50%;
	border-right: 1px solid var(--main-bg-color);
	float: left;
}

#fullMenuSlideIn .secondHalf {
	width: 50%;
	float: left;
}

#fullMenuSlideIn .header {
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid var(--main-bg-color);
	font-size: 0.7rem;
	padding: 5px;
	background: var(--secondary-bg-color);
}

#fullMenuSlideIn ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	background: var(--tertiarty-bg-color);
}

#fullMenuSlideIn ul li {
	font-size: 0.7rem;
	padding: 5px 20px;
	border-bottom: 1px solid var(--main-bg-color);
}

.amountUnreadMessages {
	position: absolute;
	background: #B80000;
	border: 1px solid var(--secondary-bg-color);
	border-radius: 100%;
	font-size: 8px;
	width: 12px;
	height: 12px;
	line-height: 10px;
	margin-left: -5px;
}

.misdaadNiveauButton {
	background: transparent;
	border: 1px solid var(--secondary-bg-color);
	cursor: pointer;
}

.misdaadNiveauButton:hover, {
	background: #3e1c00bd;
}

.misdaadNiveauButton.active {
	background: var(--secondary-bg-color);
}

#modalPageLoader {
	border: 0;
	width: 100%;
	height: 100%;
}

ul.stats-list {
	list-style: outside none none;
	margin: 0;
	padding: 5px 12px;
	background: rgba(0, 0, 0, .2);
}

ul.stats-list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

ul.stats-list li span {
	font-family: "Russo One", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	line-height: 30px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

ul.stats-list li strong {
	font-family: "Russo One", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 30px;
	text-align: right;
	color: #FFFFFF;
}

ul.card-stats {
	list-style: outside none none;
	margin: 0;
	padding: 5px 12px;
	background: rgba(0, 0, 0, .2);
}

ul.card-stats li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

ul.card-stats li span {
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.7);
}

ul.card-stats li strong {
	font-family: "Russo One", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	line-height: 20px;
	text-align: right;
	text-transform: uppercase;
	color: #FFFFFF;
}

.russo-one {
	font-family: "Russo One", sans-serif;
}

.inter-font {
	font-family: "Inter", sans-serif;
}

.inputNew {
	border: none;
	outline: none;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	font-family: "Russo One", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 0.35rem 0.5rem;
}

.inputNew::placeholder {
	color: rgba(255, 255, 255, .6);
	opacity: 1; /* Firefox */
}

.inputNew::-ms-input-placeholder { /* Edge 12 -18 */
	color: rgba(255, 255, 255, .6);
}

.progress-wrapper {
	display: flex;
	align-items: center;
}

.progress-inner {
	/*background: rgba(255, 255, 255, 0.1);*/
	/*padding: 8px;*/
	width: 100%;
}

.progress-inner .progress, .progress-inner .progress-bar {
	background-color: rgba(255, 255, 255, 0);
	background-size: 14px 32px;
	background-image: linear-gradient(60deg, rgba(255, 255, 255, 0.15) 26%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 82%, transparent 75%, transparent);
	height: 12px;
}

.progress-inner .progress, .progress-inner .progress-bar {
	/*background-size: 10px 20px;
	height: 6px;*/
}

.progress-inner .progress {
	border-radius: 0;
}

.progress-inner .progress-bar.ranking {
	background-image: linear-gradient(60deg, #FFCC00 26%, transparent 25%, transparent 50%, #FFCC00 54%, #FFCC00 82%, transparent 75%, transparent);
}

.progress-inner .progress-bar.health {
	background-image: linear-gradient(60deg, #19c90e 26%, transparent 25%, transparent 50%, #19c90e 54%, #19c90e 82%, transparent 75%, transparent);
}

.progress-inner .progress-bar.achievements {
	background-image: linear-gradient(60deg, #0cd09f 26%, transparent 25%, transparent 50%, #0cd09f 54%, #0cd09f 82%, transparent 75%, transparent);
}

.progress-inner .progress.small, .progress-inner .progress.small .progress-bar {
	background-size: 10px 20px;
	height: 8px;
}

.modal-transparent-bg {
	background: rgba(0, 0, 0, 0.6);
}

.form-justify-space-between {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 5px;
}

.form-justify-space-between label {
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: 500;
	/*font-size: 12px;*/
	line-height: 8px;
	color: rgba(255, 255, 255, 0.7);

	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0;
}

.form-justify-space-between input, .form-justify-space-between select {
	font-family: "Russo One", sans-serif;
	font-style: normal;
	font-weight: 400;
	/*font-size: 10px;*/
	line-height: 8px;
	text-align: right;
	color: #FFFFFF;
	text-transform: uppercase;
	width: auto;
}

.border-dashed-dark-top {
	border-top: 1px dashed var(--dark-border-color);
}

.border-dashed-dark-bottom {
	border-bottom: 1px dashed var(--dark-border-color);
}

.border-dashed-dark-left {
	border-left: 1px dashed var(--dark-border-color);
}

.border-dashed-dark-right {
	border-right: 1px dashed var(--dark-border-color);
}

.fill-flex-column {
	flex: 1 1 auto;
	min-width: 0;
}

.statistics-card {
	border-top-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.statistics-card > div {
/*		background: rgba(0, 0, 0, .2);*/
}

.statistics-card ul.card-stats {
	list-style: outside none none;
	background: transparent;
}

.statistics-card ul.card-stats li:first-child {
	border-top: 1px dashed var(--dark-border-color);
}

.statistics-card ul.card-stats li:not(:last-child) {
	border-bottom: 1px dashed var(--dark-border-color);
}

.statistics-card ul.card-stats li {
	padding: 0 .5rem;
}

.statistics-card ul.card-stats li strong {
	font-size: 0.6rem;
}

.statistics-card ul.card-stats li .statistics-card-number {
	width: 15px;
	display: inline-block;
	text-align: right;
	margin-right: 3px;
}

/*select.inputNew {
	background-color: #222;
	color: #fff;
	border: 1px solid #555;
	padding: 8px;
	border-radius: 4px;

	-webkit-appearance: none;
	appearance: none;
}*/

select.inputNew option {
	background-color: rgba(93, 65, 65, 1);
	color: #FFF;
	padding: 8px;
}

/* Borders tussen opties */
select.inputNew option:not(:last-child) {
	border-bottom: 1px solid var(--dark-border-color);
}

.logEntries {
	border-radius: 4px !important;
	border: 0px;
}

.logEntries.card > .card-text:last-child {
	border-bottom: 0px !important;
}

.messageEntries {
	border-radius: 4px !important;
	border: 0px;
}

.messageEntries.card > .card-text:last-child {
	border-bottom: 0px !important;
}

.card-list > div > .card-container:last-child {
	margin-bottom: 0 !important;
}

.secretway-mini-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .05);
	border-radius: 50%;
	padding: 4px;
}

/*.secretway-mini-icon {
	max-width: 16px;
	max-height: 16px;
	width: auto;
	height: auto;
	border: 0;
}*/

.secretway-mini-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.secretway-headquarters-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .05);
	border-radius: 50%;
	padding: 2px;
}

.secretway-headquarters-icon {
	width: 14px;
	height: 14px;
	display: block;
}

.secretway-medium-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .05);
	border-radius: 50%;
	padding: 6px;
}

.secretway-medium-icon {
	width: 24px;
	height: 24px;
	display: block;
}

.object-card-icon {
	position: absolute;
	bottom: .5rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.object-card-icon img {
	width: 38px;
}