#content {
	overflow-y: scroll;
	overflow-x: hidden;

	position: absolute;

	top: 100px;
	bottom: 100px;

	left: 0px;
	right: 0px;

	min-width: 760px;

	margin-top: 0px !important;

	scrollbar-color: #66cccc #000000;
}

#main {
	align-items: flex-start;
}

#appbox > header {

	text-align: right;

	border-bottom: 2px dashed #66cccc80;

	padding-bottom: 5px;

	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 25px;
}

#appbox > header > img {
    float: right;
    display: block;

    margin-top: 10px;

	width: 24px;
	cursor: pointer;
	opacity: 75%;

	filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%);
}

#appbox > header > img:hover {
	opacity: 100%;
}

#appbox > header > ul > li > img {
    width: 32px;
}

#appbox > header > ul > li {
    font-family: Verdana;
    font-size: 12pt;
    color: #66cccc;

    font-variant: small-caps;
}

#appbox > header > img:hover {
	opacity: 100%;
}

.error {
	text-wrap: wrap;
	color: #ff0000 !important;
	font-size: 10pt !important;
	display: none;
	font-style: italic;
    font-weight: bold;
}

fieldset {
    width: 100% !important;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
}

/* image properties */
#system-img-box {
    margin: 0;
    padding: 0;

    aspect-ratio: 2 / 1;
}

#system-img-box > img {
    display: block;

    margin-left: auto;
    margin-right: auto;

    margin-top: 25px;
    margin-bottom: 25px;

    filter: brightness(0) saturate(100%) invert(75%) sepia(29%) saturate(602%) hue-rotate(131deg) brightness(94%) contrast(85%) blur(0.5px);
}

#system-img-box > svg {
    display: block;

    width: 100%;
    aspect-ratio: 2 / 1;

    background: transparent;
}

/* toolbar class */
.toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 0px;
    margin: 0px;
}

.toolbar > li:has(img) {
    display: inline-block;

    padding: 2px;
    margin: 1px;

    background-color: #66cccc20;
    border: 1px solid #66cccc80;
    border-radius: 1px;

    opacity: 40%;

    cursor: pointer;
}

.toolbar > li:has(img):not([disabled]):hover, .toolbar-item-active:not([disabled]) {
    opacity: 100%;
}

.toolbar > li:has(img)[disabled] {
    cursor: not-allowed;

    filter: saturate(0%);
}

.toolbar > li > img {
    display: block;

    filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%);
}

.toolbar-caption {
    display: none;

    margin: 0px;
    padding: 0px;
    padding-left: 10px;

    font-family: Verdana;
    font-size: 14px;
    font-style: italic;
    font-variant: small-caps;

    white-space: nowrap;
}

#settings-toolbar {
    justify-content: center;

    margin-bottom: 15px;
    margin-top: 15px;
}

#settings-toolbar > li {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    color: #66cccc;
}

#settings-toolbar > li > img {
    width: 48px;
}

#main-toolbar > li > img {
    width: 32px;
}

#main-toolbar > li {
    color: #66cccc;
}

#main-toolbar > li:not(li:has(img)) {
    width: 8px;
}

/* fieldset */
#settings {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

fieldset {
    background-color: #66cccc20;
    background: linear-gradient(45deg, #66cccc10 0%, #66cccc20 30%, #66cccc10 100%);
}

fieldset div + div {
    margin-top: 5px;
}

/* misc */
#bearing-div {
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#aperture-cone-div {
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#custom-retainer-div {
    margin-top: 15px;
    margin-left: 25px;
}

select + select {
    margin-top: 5px;
}

/* loading icon */
#system-loading-img {
	display: block;

	width: 64px;
	height: 64px;

	z-index: 899;

	position: fixed;
	top: 50%;
	left: 50%;

	transform: translateX(-50%) translateY(-50%);

    filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%) blur(0.5px);

	border: 2px solid #66cccc;
	background-color: #66cccc40;
    	border-radius: 50%;

    opacity: 75%;

    /*
	box-shadow: 0px 0px 5px 5px #66cccc40,
				inset 0px 0px 5px 5px #66cccc20;
                */
}

/* switch */
#expert-box {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-right: 100px;
    margin-bottom: 10px;
}

#expert-box p {
    display: inline-block;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #66cccc;
    font-weight: bold;
    font-size: 12pt;
    margin-left: 5px;
}

#expert-box:not(:has(input:checked))
{
    filter: saturate(0);
    opacity: 0.5;
}

.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #66cccc80;
    transition: .5s;
    border-radius: 10px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #66ccccff;
    transition: .5s;
    border-radius: 50%;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* text inputs */
#text-settings input {
    text-align: left !important;
}

/* display toolbar */
#system {
    display: flex;
    flex-direction: row;
    align-content: center;
}

#system-render {
    display: inline-block;
    flex: 5 0 400px;
}

#system-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    flex: 1 0 50px;
    align-self: center;
}

#system-toolbar {
    text-align: center;
}

#system-toolbar > input {
    display: none;
}

#system-toolbar > label {
    display: inline-block;

    width: 48px;
    height: 48px;

    background-color: #66cccc20;
    border: 1px solid #66cccc80;
    border-radius: 50%;

    opacity: 50%;

    cursor: pointer;
}

#system-toolbar > input:checked + label {
    opacity: 100%;
}

#system-toolbar > label > img {

    display: block;
    margin: 20%;

    max-width: 60%;
    max-height: 60%;

    filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%);
}