@charset "UTF-8";

@import "style/style.css";

/*
	Style updates should be made here, not in 'style/style.css'.

	The 'style/style.css' file is the root style of the queue,
	which has many other dependencies and should not change.

	Some of these entries here may need `!important` because we're
	overriding the base style, which is unfortunately inherited
	after this file is included.
*/

:root
{
	--Spacing:	10px;
	--Spacing2:	5px;
	--Spacing2x:	20px;

	--BorderRadius: 10px;
	--BorderRadius2: 5px;

	--TopMenuHeight: 30px   !important;
	--SidePanelWidth: 250px !important;

	/* change the spinner/wait to another SVG */
	/* --Spinner: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150"><path fill="none" stroke="white" stroke-width="15" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"><animate attributeName="stroke-dashoffset" calcMode="spline" dur="2" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite"></animate></path></svg>'); */
}

h1
{
	margin: 0 0 0.5em 0;
	line-height: 43px;
}

h3
{
	margin: 0 0 0em 0;
}

input[type=range] {
	cursor: pointer;
	min-width: 10px;
}


/*
	css nesting... browsers made before 2023 will probably not support it.

	This helps the need to put !important everywhere, but browser support
	is a little questionable.  At the time of writing this (2025), it was
	only released in 2023.  We kind of have to see how many peoplse complain.
*/
.viewer-base
{
	.viewer-sidepanel
	{
	}

	.viewer-sidepanel h1
	{
		text-transform: capitalize;
	}

	.viewer-error
	{
		background-image: url("style/icons/glyphicons-basic-586-bomb@2x.png") !important;
		font-size: x-large;
	}

	.viewer-viewport
	{
		border: none;

		/*
			if the sidepanel and topmenu are activated,
			this may want to be uncommented.
		*/
		/* border-radius: 0 50px 0 0; */
	}

	.modal-content.viewer-sidepanel
	{
		padding-top: 0;
		gap: 2px;
	}

	.modal-content .form
	{
		padding-top: 0;
		padding-right: 0px;
		margin-right: 0px;
	}
}