@media screen and (max-width: 767px) {
	.toast-container.bottom-0 {
		margin-bottom: 60px;
	}

	@supports (-webkit-touch-callout: none) {
		.fixed-top .navbar.navbar-expand {
			padding-top: calc(env(safe-area-inset-top) + 10px)!important;
			padding-bottom: 0!important;
		}

		.fixed-bottom .navbar.navbar-expand {
			padding-top: 0!important;
			padding-bottom: calc(env(safe-area-inset-bottom) - 10px)!important;
		}

		.toast-container.bottom-0 {
			margin-bottom: calc(40px + env(safe-area-inset-bottom));
		}

		body {
			padding-top: env(safe-area-inset-top);
		}

		.offcanvas:not(.offcanvas-bottom) {
			padding-top: env(safe-area-inset-top);
		}

		.offcanvas-bottom, .offcanvas-end, .offcanvas-start {
			padding-bottom: env(safe-area-inset-bottom);
		}

		.modal-dialog[class*="modal-fullscreen"] .modal-content {
			padding-top: env(safe-area-inset-top);
		}
	}
}

@supports (-webkit-touch-callout: none) {
	a {
		-webkit-touch-callout: none;
	}

	input::-webkit-date-and-time-value {
		text-align: left;
	}
}

#topbar {
	z-index: 2;
	transition: background-color 250ms linear;
}

#btn-back-to-top {
	position: fixed;
	bottom: 20px;
	right: 12px;
	display: none;
	z-index: 100;
}

.position-sticky-top {
	top: 60px;
}

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

.position-fixed-top {
	top: 60px;
}

.position-fixed-bottom {
	bottom: 0;
}

@media screen and (max-width: 767px) {
	#btn-back-to-top {
		bottom: 80px;
	}

	.position-sticky-top {
		top: 80px;
	}

	.position-sticky-bottom {
		bottom: 80px;
	}

	.position-fixed-top {
		top: 80px;
	}

	.position-fixed-bottom {
		bottom: 80px;
	}

	#list-actions {
		top: 80px;
	}

	@supports (-webkit-touch-callout: none) {
		#btn-back-to-top {
			bottom: calc(60px + env(safe-area-inset-bottom));
		}

		.position-sticky-top {
			top: calc(80px + env(safe-area-inset-top));
		}

		.position-sticky-bottom {
			bottom: calc(60px + env(safe-area-inset-bottom));
		}

		.position-fixed-top {
			top: calc(80px + env(safe-area-inset-top));
		}

		.position-fixed-bottom {
			bottom: calc(60px + env(safe-area-inset-bottom));
		}

		#list-actions {
			top: calc(60px + env(safe-area-inset-top));
		}
	}
}

body {
	background-color: #00b4ff;
}

.text-bg-default {
	color: #000 !important;
	background-color: #00b4ff !important;
}

.content p {
	margin-bottom: 0;
}

.icon-spin {
	animation: spin 1s infinite linear;
}

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

.toast-container>:not(:last-child) {
	--bs-toast-spacing: 0.5rem;
}

[data-bs-toggle="collapse"] i.collapse-icon::after {
	font-family: bootstrap-icons !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 1;
}

[data-bs-toggle="collapse"].collapsed i.collapse-icon::after {
	vertical-align: -0.15em;
	content: ' \F282';
}

[data-bs-toggle="collapse"]:not(.collapsed) i.collapse-icon::after {
	vertical-align: -0.15em;
	content: ' \F286';
}

.form-check-input:checked {
	background-color: #00b4ff;
	border-color: #00b4ff;
}

.form-check {
	padding-left: 2em;
}

.form-check .form-check-input {
	margin-left: -2em;
}

.form-check-input:not(.form-switch .form-check-input) {
	width: 1.5em;
	height: 1.5em;
	margin-top: 0;
}

.form-switch .form-check-input {
	width: 3.2em;
	height: 2em;
}

.form-control[contenteditable] {
	display: inline-block;
	height: auto;
}

.ts-dropdown .active.badge {
	-webkit-box-shadow: inset 0px 0px 0px 2px #000000;
    -moz-box-shadow: inset 0px 0px 0px 2px #000000;
    box-shadow: inset 0px 0px 0px 2px #000000;
}

.progress-bar {
	--bs-progress-bar-bg: #00b4ff;
}

.badge {
	--bs-primary-rgb: 0, 180, 255;
}

.shadow {
	--bs-box-shadow: 0 0rem 1rem rgba(0, 0, 0, 0.25);
}

.btn {
	touch-action: manipulation;
}

.truncate {
	display: -webkit-box;
	-webkit-line-clamp: var(--lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.play-pause {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recording-timer {
	margin-left: 20px;
	font-size: 18px;
}

.waveform-container {
	margin-top: 20px;
	display: none;
}

.waveform {
	height: 56px;
}

#interactive.viewport canvas, #interactive.viewport video {
	position: absolute;
	max-width: 100%;
    height: auto;
}

#interactive.viewport canvas {
	position: relative;
}

#background-wrap {
	bottom: 0;
	left: 0;
	padding-top: 50px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

@keyframes animateCloud {
	0% { margin-left: -200vw; }
	100% { margin-left: 200vw; }
}

.cloud {
	background: #fff;
	background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);

	animation: animateCloud var(--speed, 25s) linear infinite;
	transform: scale(var(--scale, 1));
	border-radius: 100px;
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	height: 120px;
	position: relative;
	width: 350px;
}

.cloud:after, .cloud:before {
	background: #fff;
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	border-radius: 100px;
	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.cloud:before {
	border-radius: 200px;
	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}