body {
	overflow: hidden;
}

.sticky-top {
	position: sticky;
	top: 0;
}

.header,
.header:hover {
	padding-top: 5px;
	padding-bottom: 5px;
	z-index: 999;

	color: #1181ca;
}

.bottomshadow {
	padding-top: 5px;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.w3-green {
	background-color: #008800 !important;
	color: #fff !important;
}

.w3-blue {
	background-color: #1770AA !important;
	color: #fff !important;
}

.w3-text-blue {
	color: #1181ca !important;
}

.w3-yellow {
	background-color: #F7E363 !important;
	color: #1181ca !important;
}

.title h1 {
	font-size: 50px;
	margin: -10px 0;
}

.extrabreed {
	width: 80%;
	margin-top: -60px;
}

.extrasmal {
	width: 50%;
	margin-top: -60px;
}

.smal {

	margin-top: -60px;
}

.text-right {
	text-align: right;
}

label {
	color: #888;
}

.w3-radio {
	margin: 0 5px 0 5px;
}


.verplicht {
	border: 2px solid red !important;
	background-color: #ff000011 !important;
}

.fotopicto {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #dee2e6;
}

.tab {
	height: calc(100vh - 120px);
	overflow: auto;
}

@media (min-width:1000px) {
	.kaartcontainer {
		height: calc(100vh - 200px);
	}
}

@media (max-width:1000px) {
	.kaartcontainer {
		height: calc(50vh);
	}
}

.map {
	height: 100%;
	position: relative;
}

.fotopictogroot {
	border: 1px solid #dee2e6;
	width: 150px;
	object-fit: cover;
}

.fullwidth {
	width: 100%
}

.logo {
	width: 100%;
	padding-top: 5px;
}

.activiteitregel {
	padding: 2px 8px;
}

.loader {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 200;

}

#tochtentabel .w3-card-4,
#klantentabel .w3-card-4 {
	border-left: 10px solid #1181ca !important;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 16px solid #f3f3f3;
	/* Light grey */
	border-top: 16px solid #1181ca;
	/* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

.w3-check {
	margin-right: 6px;
}

.activiteitzelf,
.aanwezigleden,
.sortkolom,
.regeledit,
.deelnemerregel {
	cursor: pointer;
}

.upload-container {
	position: relative;
}

.upload-container input {
	border: 1px solid #92b0b3;
	background: #f1f1f1;
	outline: 2px dashed #92b0b3;
	outline-offset: -10px;
	padding: 100px 20px 100px 20px;
	text-align: center !important;
	width: 100%;
}

.upload-container input:hover {
	background: #ddd;
}

.upload-container:before {
	position: absolute;
	bottom: 50px;
	left: 20px;
	content: " (of) Drag en Drop bestand hier ";
	color: #3f8188;
	font-weight: 900;
}

#routepunt {
	padding-bottom: 50px;
}

.teamnaam {
	font-size: x-large;
}

.vet {
	font-weight: bold;
}

a {
	text-decoration: none;
}

.map-icon-label .map-icon {
	font-size: 24px;
	color: white;
	line-height: 58px;
	text-align: center;
	white-space: nowrap;
}

.map-icon-blue {
	color: #1181ca !important;
	font-size: 40px !important;
}

@media (max-width:750px) {
	.loginwide {
		display: none;
	}

	.loginsmall {
		display: inline;
	}
}

@media (min-width:750px) {
	.loginsmall {
		display: none;
	}

	.loginwide {
		display: inline;
	}
}

.topnav a {
	font-size: 18px;
	font-weight: 400;
	margin: 10px 0;
}

.topnav .icon {
	display: none;
	padding-left: 10px
}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {
		display: none;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 600px) {
	.topnav.responsive {
		position: relative;
	}

	.topnav.responsive .icon1 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.topnav.responsive .icon2 {
		position: absolute;
		right: 50px;
		top: 0
	}

	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}

	.topnav.responsive a.klantknop {
		display: none;
	}
}

#fotocontainer {
	max-width: 200px;
}


.avastatitel {
	font-family: "Aladin";
	margin-left: 10px;
	font-size: 35px;
	margin-top: 8px;
}

.avastacode {
	margin-left: 15px;
	font-size: 32px;
	margin-top: 8px;
}



.chat1 {
	background-color: white;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	max-width: 70%;

}

.chat0 {
	background-color: #ffeb3b;
	float: right;
	margin-right: 10px;
	margin-bottom: 10px;
	max-width: 70%;
}

@media only screen and (min-width: 768px) {

	.chat0,
	.chat1,
	#camera--output-container {
		max-width: 30%
	}
}

#chatinput {
	margin-bottom: 6px;
}

.chattijd {
	float: right;
}

.chatnaam {
	float: left;
}

.chatbox {
	position: fixed;
	left: 0;
	bottom: 35px;
	width: 100%;
	background-color: white;
}

.chatallbox {
	width: 100%;
	background-color: white;
}

.chatbox textarea,
.chatallbox textarea {
	display: block;
	width: 100%;
	overflow: auto;
	border: 1px solid #ddd;
	max-height: 240px;
	resize: none;
	height: 44px;
	background-color: #ffeb3b50;
	font-size: x-large;
}

#chats {
	overflow-y: auto;
	height: calc(100vh - 240px);
}

.chatspanel {
	padding-bottom: 80px !important;
}

.annotatie {
	font-size: xx-small;
}

#chatheader {
	position: sticky;
	left: 0;
	top: 0;
	background-color: white;
}

.iframe-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
}

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.keurknop {
	margin-top: 6px;
}

.chat-icon {
	position: relative;
}

.chat-badge,
.chat-teams-badge {
	background-color: red;
	text-align: center;
	font-size: 15px;
	color: white;

	position: absolute;

}

.chat-badge {
	top: -5px;
	right: -5px;
	width: 15px;
	height: 15px;
	border-radius: 35%;
}

.chat-teams-badge {
	top: 1px;
	right: 1px;
	width: 20px;
	height: 20px;
	border-radius: 20%;
}

.hotspotedit,
.hotspotcopy {
	cursor: pointer;
}

.hotspotrow {
	border-bottom: 1px solid #e0e0e0;
}

.svg {
	padding-top: 3px;
}

.teampunten {
	border-left: 5px solid #1181ca;
	display: none;
}

/* PHOTO CHAT */
#camera--output--container {
	display: none;
}


#camera--output--container {
	width: 350px;
	position: fixed;
	object-fit: cover;
	bottom: 100px;
}


@media screen {}

#camera-output,
#video-output {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.deletebutton {
	width: 50px;
	color: #333333;
	background-color: #ffffff66;
	font-size: 16px;
	border-radius: 10px;
	border: none;
	padding: 6px 6px;
	text-align: center;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	right: 25px;
	bottom: 10px;
	cursor: pointer;
}


#fotobutton {
	position: relative;
}

#inputphoto {
	opacity: 0;
	overflow: hidden;
	width: 48px;
	height: 48px;
}

#btnCamera,
#inputphoto {
	position: absolute;
	left: 2px;
	top: 2px;
	cursor: pointer;
}

.klikbaar {
	cursor: pointer;
}

.bronskleur {
	background-color: darkgoldenrod;
	color: white;
}

.goudkleur {
	background-color: gold;
	color: black;
}

.zilverkleur {
	background-color: silver;
	color: black;
}

.menubutton {
	margin-left: 4px;
}

.hotspotlist,
.teamtabel,
.vragentabel {
	padding-bottom: 40px !important;
}

.chatfoto {
	position: relative;
}

.videolink {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100px;

}

#videocontent video {
	max-width: 100%;
}

#mkcontainer input[type=radio],
.red-recycle-bin,
.black-plus {
	margin-top: 15px;
}

.red-recycle-bin {
	color: red;
}

.black-plus {
	color: black;
}