:root {
	/* Primary: Diver Lady */
	--primary-100: #F2F7FF;
	--primary-200: #C8E0FD;
	--primary-300: #97C3ED;
	--primary-400: #5D98C3;
	--primary-500: #245470;
	--primary-600: #13475E;
	--primary-700: #0B3B4B;
	--primary-800: #072F39;
	--primary-900: #052226;

	/* Accent: Fuego Nuevo */
	--accent-100: #FFFAF2;
	--accent-200: #FFE1BE;
	--accent-300: #FDC189;
	--accent-400: #F99A53;
	--accent-500: #F06C1F;
	--accent-600: #BD420A;
	--accent-700: #8B2402;
	--accent-800: #591100;
	--accent-900: #260500;

	/* Neutral */
	--neutral-100: #FAFBFC;
	--neutral-200: #EAECEE;
	--neutral-300: #DADDE0;
	--neutral-400: #CACFD2;
	--neutral-500: #BBC1C4;
	--neutral-600: #939A9D;
	--neutral-700: #6D7375;
	--neutral-800: #474D4E;
	--neutral-900: #222626;
}

html,
body {
	margin: 0;
	height: 100%;
	font-family: 'Ubuntu', var(--bs-body-font-family);
}

canvas {
	background-color: transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
}

.navbar-blue {
	background-color: var(--primary-500);
	--bs-navbar-color: var(--neutral-300);
	--bs-navbar-hover-color: var(--neutral-100);
	--bs-navbar-disabled-color: var(--neutral-600);
	--bs-navbar-active-color: var(--primary-100);
	--bs-navbar-brand-color: var(--primary-100);
	--bs-navbar-brand-hover-color: var(--primary-100);
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23DADDE0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	--bs-dropdown-divider-bg: var(--neutral-300);
}

.navbar p {
	margin: 0;
}

#toolbar {
	background-color: white;
	box-shadow: 0px 0px 10px var(--neutral-200);
	padding-bottom: 7px;
	padding-top: 3px;
	padding-left: 7px;
	padding-right: 7px;
}

.title {
	font-size: 10pt;
	color: #6D7375;
}

.toolbar-range {
	width: 100px;
	padding-top: 3px;
}

.toolbar-range::-webkit-slider-thumb {
	background: gray;
	border: 2px solid darkgray;
}

.toolbar-range::-moz-range-thumb {
	background: rgb(96, 96, 96);
	border: 2px solid gray;
}

.toolbar-range::-webkit-slider-runnable-track {
	background: rgba(128, 128, 128, 0.5);
}

.toolbar-range::-moz-range-track {
	background-color: rgba(128, 128, 128, 0.5);
}

.range-minus-btn {
	padding-left: 0px;
	padding-right: 7px;
}

.range-plus-btn {
	padding-left: 7px;
	padding-right: 0px;
}

#toolbar button svg {
	vertical-align: sub;
}

.obj-bar {
	background-color: #5d98c3a6;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: #FAFBFC;
	font-size: 12pt;

	padding-top: 3px;
	padding-left: 12px;
	padding-right: 7px;
	padding-bottom: 3px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 0.5em;
}

.obj-bar .btn {
	padding-top: 0;
	padding-left: 7px;
	padding-right: 7px;
	color: #FAFBFC;
}

.obj-bar-nobr {
	white-space: nowrap;
	padding-left: 3px;
	padding-right: 3px;
}

.obj-bar .form-range {
	width: 125px;
	padding-top: 15px;
	padding-left: 3px;
}

.obj-bar .form-range::-webkit-slider-thumb {
	background: #939A9D;
	border: 2px solid #FAFBFC;
}

.obj-bar .form-range::-moz-range-thumb {
	background: #939A9D;
	border: 2px solid #FAFBFC;
}

.obj-bar .form-range::-ms-thumb {
	background: #939A9D;
	border: 2px solid #FAFBFC;
}

.obj-bar .form-range::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0.5);
}

.obj-bar .form-range::-moz-range-track {
	background-color: rgba(255, 255, 255, 0.5);
}

.obj-bar-editable {
	color: #FAFBFC;
	background-color: rgba(255, 255, 255, 0.2);
	border: none;
	text-align: center;
}

.obj-bar-editable::selection {
	background-color: #939A9D;
	color: #FAFBFC;
}

.obj-bar-number {
	width: 40px;
	padding-left: 1px;
	padding-right: 1px;
	font-size: 15px;
}

.obj-bar .form-switch .form-check-input {
	margin-top: 0px;
	background-color: rgba(255, 255, 255, 0.3);
	border: none;
	vertical-align: middle;
}

.obj-bar .form-switch .form-check-input {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0f0f0'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:checked {
	background-color: #939A9D;
	border: none;
}

.obj-bar .form-switch .form-check-input:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:checked:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* modifications to Bootstrap style */

.btn-group {
	padding-left: 0px;
	padding-right: 0px;
}

.btn-group>.dropup:not(:last-child)>.btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group>.dropup:nth-child(n+3)>.btn,
.btn-group>:not(.btn-check)+.dropup>.btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn-transparent {
	background: transparent !important;
	border-color: transparent !important;
}

.btn-secondary {
	--bs-btn-color: white;
	--bs-btn-bg: #BBC1C4;
	--bs-btn-border-color: #BBC1C4;
	--bs-btn-hover-color: white;
	--bs-btn-hover-bg: #939A9D;
	--bs-btn-hover-border-color: #939A9D;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: white;
	--bs-btn-active-bg: #6D7375;
	--bs-btn-active-border-color: #6D7375;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: white;
	--bs-btn-disabled-bg: #6c757d;
	--bs-btn-disabled-border-color: #6c757d;
}

.btn-primary {
	--bs-btn-color: white;
	--bs-btn-bg: #5D98C3;
	--bs-btn-border-color: #5D98C3;
	--bs-btn-hover-color: white;
	--bs-btn-hover-bg: #4e7fa5;
	--bs-btn-hover-border-color: #4e7fa5;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: white;
	--bs-btn-active-bg: #487597;
	--bs-btn-active-border-color: #487597;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: white;
	--bs-btn-disabled-bg: #4e7fa5;
	--bs-btn-disabled-border-color: #4e7fa5;
}