/*******************************************************

    Ritso Studios Font Elements

*******************************************************/
@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('fonts/BigShouldersDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
/*******************************************************

    Browser Element Overrides

*******************************************************/
a:link {
	cursor: pointer;
	color: var(--sycvar-text-primary-light);
	text-decoration: underline;
}
a:visited {
    color: var(--sycvar-text-primary-light) !important;
}
a:focus { font-weight: bolder; }
a:hover { font-weight: bolder; }
a:active { font-weight: bolder; }
blockquote {
    font-size: 150%;
	padding: 1em 2em;
	border: 2px solid var(--sycvar-border-info);/*CornflowerBlue*/
	background-color: var(--sycvar-bg-blockquote);
	border-radius: var(--sycvar-radius-lg);
}
body, html {
    font-family: var(--sycvar-font-body);
    font-size: 1em;
    line-height: var(--sycvar-line-body);
	background-color: var(--sycvar-bg-page);
	border: 0px;
	color: var(--sycvar-text-base);/*Raison Black*/
	overflow: visible;
	position: absolute;
    margin: 0;
	min-height: 99%;
	max-width: 90%;
	white-space: normal;
	word-break: normal;
}
button {
	background-color: var(--sycvar-bg-primary);
	border-radius: var(--sycvar-radius-lg);
	color: var(--sycvar-text-base);
	cursor: pointer;
	font-weight: 600;
	min-height: 1.75em;
	padding: 1em 2em 1em 2em;
	white-space: nowrap;
	word-break: normal;
}

button:hover{
	background-color: var(--sycvar-bg-primary-hover);
	cursor: pointer;
}

button:disabled {
	background-color: var(--sycvar-bg-disabled) !important;
	color: var(--sycvar-text-primary);
	cursor: default;
	font-style: italic;
	text-shadow: rgba(255,255,255,0.5) 0 .187em .187em;
}

button.sycbgprimary {
    color: var(--sycvar-text-on-primary);
}


h1,h2,h3,h4,h5,h6,
.syclogo,
.sycnavtop,
.sycnavtopddl,
.syc-demo-group-title,
button {
    font-family: var(--sycvar-font-display);
}

h1,h2,h3,h4,h5,h6 {
	margin: 0em 0em 0em 0em;
	font-weight: normal;
	line-height: var(--sycvar-line-heading);
}
h1 {
    font-size: 300%;
	font-weight: 800;
}
h2 {
    font-family: var(--sycvar-font-serif);
    font-size: 250%;
	font-weight: normal;
	font-style: italic;
	color: var(--sycvar-text-primary);/*Dark Green*/
	letter-spacing: -0.06em;
}
h3 { font-size: 200%; } /* 2.125em */
h4 { font-size: 150%; } /* 18px */
h5 { font-size: 120%; } /* 16px */
h6 { font-size: 87%; } /* 14px */
hr {
	margin: .5em 0em .5em 0em;
}
input[type=checkbox] {
    vertical-align: middle;
	zoom: 2 !important;
}
input[type=radio] {
    vertical-align: top;
	zoom: 2 !important;
}
input:checked + .sycslider {
	background-color: var(--sycvar-text-primary-light);/*Green Screen*/
}
input:checked + .sycslider:before {
	-webkit-transform: translateX(.75em);
	-ms-transform: translateX(.75em);
	transform: translateX(.75em);
}
input[type=text],
input[type=color],
input[type=submit],
input[type=password] {
	background-color: var(--sycvar-bg-base);/*Racist White*/
	border-radius: var(--sycvar-radius-md);
	border: 2px solid var(--sycvar-border-primary);/*Metallic Green*/
	color: var(--sycvar-text-base);/*Raison Black*/
	font-size: .7em;
	font-weight: bold;
	margin: .1em;
	padding: .2em;
	text-align: left;
	text-decoration: none;
}
label {
	color: var(--sycvar-text-label);/*Gun Metal*/
	display: inline-block;
	font-weight: normal;
	padding-right: .5em;
	vertical-align: top;
	white-space: nowrap;
}
label:hover {
	color: var(--sycvar-text-primary);/*Metallic Green*/
	font-weight: bolder;
}
p {
    line-height: 1.5;
	margin: 0 0 1.5em;
}
select {
	background: var(--sycvar-bg-base);/*Racist White*/
	border-radius: var(--sycvar-radius-md);
	border: 2px solid var(--sycvar-border-primary);/*Metallic Green*/
	color: var(--sycvar-text-base);/*Raison Black*/
	font-size: .8em;
	font-weight: normal;
	margin: .1em 0em .1em 0em;
	padding: .0em .2em .1em .2em;
	text-align: left;
	text-decoration: none;
    width: auto;
}
select option {
  font-size: .8em;
}
select option:checked {
	background: var(--sycvar-bg-primary);/*Dark Moderate Green*/
}
optgroup {
	font-size: 1em;
	font-weight: bold;
}
select option {
    font-size: .8em;
    font-weight: normal;
}
option:disabled {
	color: var(--sycvar-text-placeholder);/*Medium Gray*/
	font-style: italic;
	font-weight: lighter;
}
textarea {
	background: var(--sycvar-bg-base);/*Racist White*/
	border-radius: var(--sycvar-radius-md);
	border: 2px solid var(--sycvar-border-primary);/*Metallic Green*/
	color: var(--sycvar-text-base);/*Raison Black*/
	font-size: .8em;
	font-weight: bold;
	margin: .25em .25em .25em 0em;
	padding: .1625em;
	text-align: left;
}
textarea:active,
select:active,
input[type=text]:active,
input[type=color]:active,
input[type=password]:active,
input[type=submit]:active {
	background-color: var(--sycvar-bg-focus) !important;/*Celery Stalk*/
}
textarea:focus,
select:focus,
input[type=text]:focus,
input[type=color]:focus,
input[type=password]:focus,
input[type=submit]:focus {
	background-color: var(--sycvar-bg-focus) !important;/*Celery Stalk*/
	color: var(--sycvar-text-base);/*Raison Black*/
	font-style: normal;
	font-weight: bold;
}
textarea::placeholder,
select::placeholder,
input[type=text]::placeholder,
input[type=submit]::placeholder,
input[type=password]::placeholder {
	color: var(--sycvar-text-placeholder);/*Medium Gray*/
	font-style: italic;
	font-weight: lighter;
}
ul {
	margin: 0em .5em 0em 0em ;
	padding: .01em 0em 0em .0em;
	width: 100%;
	list-style-position: inside;
}
ol {
	list-style-position: inside;
	vertical-align: top;
}
li {
	vertical-align: top;
    padding-left: 1em;
    text-indent: -1.4em;
}
/*******************************************************

    Custom Styling Elements

*******************************************************/
.sycalignbottom {
	vertical-align: bottom !important;
}
.sycalignleft {
	text-align: left !important;
}
.sycalignmiddle {
	vertical-align: middle !important;
}
.sycalignright {
	text-align: right !important;
}
.sycaligntop {
	vertical-align: top !important;
}
.sycboldest {
    font-weight: 800;
}
.sycbginfo {
    background-color: var(--sycvar-bg-info); /* Soft Blue */
}

.sycbgwarm {
    background-color: var(--sycvar-bg-warm); /* Warm Brown */
}

.sycbgsecondary {
    background-color: var(--sycvar-bg-secondary); /* Off White */
}

.sycbgprimary {
    background-color: var(--sycvar-bg-primary); /* Dark Green */
}

.sycbgdanger {
    background-color: var(--sycvar-bg-danger); /* Light Rose */
}

.sycbgbase {
    background-color: var(--sycvar-bg-base); /* White */
}

.sycbgsuccess {
    background-color: var(--sycvar-bg-success); /* Soft Mint Green */
}

.sycbgwarning {
    background-color: var(--sycvar-bg-warning); /* Warm Cream */
}

.sycbgfeature {
    background-color: var(--sycvar-bg-feature); /* Soft Lavender */
}

.sycbgattention {
    background-color: var(--sycvar-bg-attention); /* Soft Peach */
}

.sycbginfoalt {
    background-color: var(--sycvar-bg-info-alt); /* Pale Sky Blue */
}

.sycbgsuccessalt {
    background-color: var(--sycvar-bg-success-alt); /* Soft Sage */
}

.sycbgtertiary {
    background-color: var(--sycvar-bg-tertiary); /* Light Sand */
}
.syccenter {
	text-align: center !important;
}
.syccol{
    display: table-cell;
    text-align: left;
    vertical-align: top;
}
.syccursormove {/* Warning: Behavioral Dependancy */
    cursor: move !important;
}
.syccursormove:hover {/* Warning: Behavioral Dependancy */
    cursor: move !important;
}
.syccursornone {/* Warning: Behavioral Dependancy */
    cursor: none !important;
}
.syccursornone:hover {/* Warning: Behavioral Dependancy */
    cursor: none !important;
}
.sycdemo-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-style: dashed;
    opacity: .75;
}
.sycdemo-unavailable-content {
    max-width: 600px;
    padding: 3em;
    text-align: center;
}
.sycdisabled {
	color: var(--sycvar-text-disabled); /*Kinda Grey Right*/
    font-weight: normal;
    font-style: italic;
    opacity: var(--sycvar-opacity-disabled);
    filter: alpha(opacity=30);
}
.sycdivinline {
	display: inline-block;
	overflow: hidden;
	white-space: normal;
}
.sycdivblock {
	display: block;
}
.sycdivinlineblock {
	display: inline-block;
}
.sycemojixs {
    font-size: .6em;
    line-height: 1;
}
.sycemojism {
    font-size: .8em;
    line-height: 1;
}
.sycemojireg {
    font-size: unset;
    line-height: unset;
}
.sycemojilg {
    font-size: 1.5em;
    line-height: 1;
}
.sycemojixl {
    font-size: 2em;
    line-height: 1;
}
.sycemojixxl {
    font-size: 3em;
    line-height: 1;
}
.sycerror {
    color: var(--sycvar-text-danger) !important;/*Tomato*/
	font-size: .7em !important;
	padding: .5em !important;
}
.syccolormuted {
    color: var(--sycvar-text-muted); /* Silverado */
}

.syccolorinfo {
    color: var(--sycvar-text-info); /* Cornflower Blue */
}

.syccolorprimary {
    color: var(--sycvar-text-primary); /* Dark Green */
}

.syccolordanger {
    color: var(--sycvar-text-danger); /* Tomato */
}

.syccolorsubtle {
    color: var(--sycvar-text-subtle); /* Charcoal */
}

.syccolorinfoalt {
    color: var(--sycvar-text-info-alt); /* Deep Navy */
}

.syccolorsuccess {
    color: var(--sycvar-text-success); /* Sage Green */
}

.syccolorfeature {
    color: var(--sycvar-text-feature); /* Muted Plum */
}

.syccolorwarm {
    color: var(--sycvar-text-warm); /* Warm Brown */
}


.syccolorwarning {
    color: var(--sycvar-text-warning); /* Antique Gold */
}

.syccolormutedalt {
    color: var(--sycvar-text-muted-alt); /* Slate Gray */
}

.syccolorattention {
    color: var(--sycvar-text-attention); /* Orange */
}
.syccolordangeralt {
    color: var(--sycvar-text-danger-alt); /* Dusty Rose */
}

.syccolortext {
    color: var(--sycvar-text-base); /* Primary readable text */
}

.sycgrowlconf {
	background-color: rgba(255, 255, 255, 1);
	border-radius: var(--sycvar-radius-xs);
	border: .1em solid var(--sycvar-border-highlight); /* Golden Shower */
	box-shadow: .2em .2em .1em var(--sycvar-bg-overlay); /* Crusted Blood */
	color: var(--sycvar-text-info); /* Teal */

	position: fixed;
	top: .2em;
	left: 50%;
	transform: translateX(-50%);

	font-size: 100%;
	font-weight: bold;

	max-width: 50%;
	min-height: 2em;

	padding: .5em .5em .2em .5em;

	text-align: center;
	white-space: normal;
	word-break: normal;

	z-index: 9999;
}

.sycfieldset {
	background-color: var(--sycvar-bg-base);/*Racist White*/
	border-radius: var(--sycvar-radius-md);
	display: inline-block;
	margin: 0em .5em .5em .5em;
	padding: unset;
	text-align: left;
	vertical-align: top;
}
.sycfieldsetclosed {
	background-color: transparent !important;
	border: 0px !important;
	box-shadow: none !important;
}
.sycfooter {
	background-color: var(--sycvar-bg-primary);/*Dark Green*/
    font-size: .8em;
    font-style: normal;
    font-weight: normal;
    color: var(--sycvar-text-on-primary);/*Racist White*/
    vertical-align: bottom;
    padding: 1em 3em 1em 3em;
}

/*******************************************************
    Header Component

    The structural CSS stays here. Individual themes
    decide whether the header is visually integrated
    with the page or presented as a distinct component.
*******************************************************/
.sycheaderframe {
    background: var(--sycvar-header-bg);
    color: var(--sycvar-header-text);
    border-top: var(--sycvar-header-border-top-width) solid var(--sycvar-header-border);
    border-bottom: var(--sycvar-header-border-bottom-width) solid var(--sycvar-header-border);
    border-radius: var(--sycvar-header-radius);
    box-shadow: var(--sycvar-header-shadow);
}
.sycheaderinner {
    background: var(--sycvar-header-inner-bg);
}

.sycheaderbrand {
    background: var(--sycvar-header-brand-bg);
    border-right: var(--sycvar-header-divider-width) solid var(--sycvar-header-divider);
}

.sycheadernav {
    background: var(--sycvar-header-nav-bg);
}

.sycheaderaction {
    background: var(--sycvar-header-action-bg);
    border-left: var(--sycvar-header-divider-width) solid var(--sycvar-header-divider);
}

.sychelp {
    color: var(--sycvar-text-help) !important;/*Very Dark Grey*/
	font-size: .6em !important;
	font-style: normal !important;
	word-break: normal !important;
	white-space: normal !important;
}
.sychover1 {
	background-color: unset;
}
.sychover1:hover {
	background-color: var(--sycvar-text-warning) !important;/*Sunflower;*/
}
.sycscrollcontainer {
    position: relative;
}

.sychoverleft,
.sychoverright {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 100%;
    min-height: 20px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    zoom: 2;
}

.sychoverleft {
    left: 0;
}
.sychoverleft:hover {
    background: color-mix(in srgb, var(--sycvar-text-info) 12%, transparent);
}
.sychoverright {
    right: 0;
}
.sychoverright:hover {
    background: color-mix(in srgb, var(--sycvar-text-info) 12%, transparent);
}

.sychoverleft span {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--sycvar-border-info);
  border-left: 3px solid var(--sycvar-border-info);
  transform: rotate(-45deg);
}

.sychoverright span {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--sycvar-border-info);
  border-left: 3px solid var(--sycvar-border-info);
  transform: rotate(125deg);
}

.syciframe {
    border: 0;
    height: 100%;
    min-height: 600px;
    min-width: 600px;
    overflow: auto;
    resize: both;
    width: 100%;
}

.syciframe1 {
    border-radius: var(--sycvar-radius-frame);
    border: 0;
    box-shadow: var(--sycvar-shadow-frame);
    height: 100%;
    height: 800px;
    width: 800px;
    overflow: auto;
    padding: 2px;
    resize: both;
    transition: transform var(--sycvar-trans-frame) ease, box-shadow var(--sycvar-trans-frame) ease;
    width: 100%;
}
.syciframe1:hover {
    transform: translateY(-5px);
    box-shadow: var(--sycvar-shadow-frame-hover);
}

.syciframe2 {
    width: 100%;
    min-width: 600px;
    height: 100%;
    min-height: 600px;
    border: 6px inset rgba(0, 0, 0, 0.45);
    border-radius: var(--sycvar-radius-frame);
}

.syciframe3 {
    border-radius: var(--sycvar-radius-frame);
    border: 0;
    box-shadow: var(--sycvar-shadow-frame);
    height: 100%;
    overflow: auto;
    padding: 2px;
    resize: both;
    transition: transform var(--sycvar-trans-frame) ease, box-shadow var(--sycvar-trans-frame) ease;
}
.syciframe3:hover {
    transform: translateY(-5px);
    box-shadow: var(--sycvar-shadow-frame-hover);
}

.sycimghome {
	border: none;
	margin: .5em;
	width: 40em;
	height: 16em;
}
.sycimgbig {
	max-width: 15em !important;
	max-height: 15em !important;
}
.sycimgcatalog {
	border-radius: var(--sycvar-radius-lg);
	border: solid .1em var(--sycvar-border-primary);/*Metallic Green*/
	margin: .5em;
	max-height: 8em !important;
	max-width: 20em !important;
}
.sycimgfloat{
    box-shadow: .3em .2em .2em var(--sycvar-text-primary-light);/*Green Screen*/
    margin: .1em .5em .3em .1em !important;
}
.sycimgframed {
	border-radius: var(--sycvar-radius-sm);
	border: ridge .2em var(--sycvar-border-primary);/*Metallic Green*/
}
.sycimgframedconfirm {
	border-radius: var(--sycvar-radius-sm);
	border: ridge .2em var(--sycvar-border-primary);/*Metallic Green*/
}
.sycimgframederror {
	border-radius: var(--sycvar-radius-sm);
	border: ridge .2em var(--sycvar-border-danger);/*Tomato*/
}
.sycimgframedinfo {
	border-radius: var(--sycvar-radius-sm);
	border: ridge .2em var(--sycvar-border-info);/*Cornflower Blue*/
}
.sycimgframedwarn {
	border-radius: var(--sycvar-radius-sm);
	border: ridge .2em var(--sycvar-border-warning);/*Rotten Orange*/
}
.sycimgfull {
	max-width: none !important;
	max-height: none !important;
}
.sycimgicon {
	max-width: 1em !important;
	max-height: 1em !important;
	vertical-align: middle;
}
.sycimginarow {
    cursor: pointer;
	display: inline-block;
	overflow: hidden;
    text-align: center;
	vertical-align: top;
	white-space: normal;
}
.sycimglogo {
	max-width: 3em;
	max-height: 3em;
}
.sycimgmed {
	max-width: 8em !important;
	max-height: 8em !important;
}
.sycimgsmall {
	max-width: 4em !important;
	max-height: 4em !important;
}
.sycinvertrounded {
    background-color: var(--sycvar-bg-primary);/*Dark Green*/
	border: solid 1px var(--sycvar-border-primary);
	border-radius: var(--sycvar-radius-xl);
	padding: .25em .6em .25em .6em;
    color: var(--sycvar-text-on-primary);/*Racist White*/

}
.sycinvisible {
	display: none !important;/* CRITICAL: Behavioral Dependancy */
}
.sycinset {
    border: 6px inset rgba(0, 0, 0, 0.45);
    border-radius: var(--sycvar-radius-frame);
}
.syclegend{
	background-color: var(--sycvar-bg-moreinfo);/*Polished Metal*/
	border: ridge .2em var(--sycvar-border-muted);/*Polished Metal*/
	border-radius: var(--sycvar-radius-md);
	color: var(--sycvar-text-label);/*Gun Metal*/
	padding: .25em 0em 0em .5em;
	white-space: nowrap;
}
.syclogo {
    font-size: 200%;
}
.syclogogreen {
    color: var(--sycvar-text-primary);/*Dark Green*/
    -webkit-text-stroke: 1px var(--sycvar-border-primary-dark);
}
.syclogoorange {
    color: var(--sycvar-text-danger);/*Orange*/
    -webkit-text-stroke: 1px var(--sycvar-border-logo-accent);/*Copper Stroke*/
}
.sycmaxhi1 {
	max-height: var(--sycvar-height-1);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxhi2 {
	max-height: var(--sycvar-height-2);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxhi3 {
	max-height: var(--sycvar-height-3);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxhi4 {
	max-height: var(--sycvar-height-4);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxhi5 {
	max-height: var(--sycvar-height-5);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxhi6 {
	max-height: var(--sycvar-height-6);
	overflow-y: auto !important;/* Warning: Behavioral Dependancy */
}
.sycminwide1 {
    min-width: var(--sycvar-width-1);
}
.sycminwide2 {
    min-width: var(--sycvar-width-2);
}
.sycminwide3 {
    min-width: var(--sycvar-width-3);
}
.sycminwide4 {
    min-width: var(--sycvar-width-4);
}
.sycminwide5 {
    min-width: var(--sycvar-width-5);
}
.sycminwide6 {
    min-width: var(--sycvar-width-6);
}
.sycmaxwide1 {
	max-width: var(--sycvar-width-1);/* Warning: Behavioral Dependancy */
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide2 {
	max-width: var(--sycvar-width-2);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide3 {
	max-width: var(--sycvar-width-3max);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide4 {
	max-width: var(--sycvar-width-4);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide5 {
	max-width: var(--sycvar-width-5);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide6 {
	max-width: var(--sycvar-width-6);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmaxwide6 {
	max-width: var(--sycvar-width-7);
	overflow-x: auto !important;/* Warning: Behavioral Dependancy */
}
.sycmgnb {
	margin-bottom:var(--sycvar-space-base);
}
.sycmgnh {
	margin: 0em var(--sycvar-space-base) 0em var(--sycvar-space-base);
}
.sycmgnl {
	margin-left: var(--sycvar-space-lg);
}
.sycmgnr {
	margin-right: var(--sycvar-space-base);
}
.sycmgnt {
	margin-top: var(--sycvar-space-base);
}
.sycmgnu {
	margin: 0em var(--sycvar-space-base) var(--sycvar-space-base) var(--sycvar-space-base);
}
.sycmgnx {
	margin: var(--sycvar-space-base);
}
.sycmodal {
    background-color: var(--sycvar-bg-base);/*Racist White*/
    border-radius: var(--sycvar-radius-sm);
    border: ridge .2em var(--sycvar-border-primary);/*Metallic Green*/
    color: var(--sycvar-text-info);/*Cornflower Blue*/
    display: inline-block;
    position:absolute;/* Warning: Behavioral Dependancy */
    z-index: 9999;/* Warning: Behavioral Dependancy */
}
.sycscrolltop {
    overflow-x: auto;
    overflow-y: hidden;
    height: 24px;
    margin-bottom: 10px;
}
.sycscrolltop-inner {
    height: 1px;
}
.sycwidetrack {
    overflow-x: auto;
    overflow-y: hidden;

    max-width: 100%;

    padding-bottom: 10px;

    scrollbar-width: auto;
}
.sycwidecontent {
    display: flex;
    gap: 24px;
    width: max-content;
}
.sycfeature {
    cursor: pointer;
    width: 350px;
    flex-shrink: 0;
}
.sycwidetrack::-webkit-scrollbar,
.sycscrolltop::-webkit-scrollbar {
    height: 18px;
}

.sycwidetrack::-webkit-scrollbar-track,
.sycscrolltop::-webkit-scrollbar-track {
    background: var(--sycvar-bg-scrolltrack);
    border-radius: var(--sycvar-radius-demo);
}

.sycwidetrack::-webkit-scrollbar-thumb,
.sycscrolltop::-webkit-scrollbar-thumb {
    background: var(--sycvar-bg-scrollthumb);
    border-radius: var(--sycvar-radius-demo);
}

.sycwidetrack::-webkit-scrollbar-thumb:hover,
.sycscrolltop::-webkit-scrollbar-thumb:hover {
    background: var(--sycvar-bg-primary);
}
.sycfontsize1 {
    font-size: 150%;
}
.sycmoreinfo {
    background-color: var(--sycvar-bg-moreinfo);/*Old Man Pubes*/
    border-radius: var(--sycvar-radius-moreinfo);
    color: var(--sycvar-text-info); /*Man Teal*/
    cursor: pointer;
    font-family: var(--sycvar-font-mono);
    font-size: .5em !important;
    font-style: normal !important;
    font-weight: normal !important;
    padding: 2px 6px !important;
    transition: background var(--sycvar-trans-fast);
    width: fit-content;
	zoom: 1 !important;
}
.sycmoreinfo:hover {
  background-color: var(--sycvar-bg-moreinfo-hover);/*Pale White*/
}
.sycnopad {
    padding: unset !important;
}
.sycnowrap {
	white-space: nowrap !important;/* Warning: Behavioral Dependancy */
}
.sycopacity {
	opacity: var(--sycvar-opacity-muted) !important;
}
.sycoverflowok {
	overflow: auto !important;/* Warning: Behavioral Dependancy */
}
.sycoverflowscrollx {
	overflow-x: scroll !important;/* Warning: Behavioral Dependancy */
}
.sycoverflowscrolly {
	overflow-y: scroll !important;/* Warning: Behavioral Dependancy */
}
.sycoverlay{
    background: var(--sycvar-bg-overlay);/*Dark Liver*/
    bottom: 0;/* Warning: Behavioral Dependancy */
    filter: alpha(opacity=70);/* Warning: Behavioral Dependancy */
    font-size: 200% !important;
    height: 100%;/* Warning: Behavioral Dependancy */
    left: 0;/* Warning: Behavioral Dependancy */
    opacity: var(--sycvar-opacity-overlay);/* Warning: Behavioral Dependancy */
    position: fixed;/* Warning: Behavioral Dependancy */
    text-align: center;/* Warning: Behavioral Dependancy */
    top: 0;/* Warning: Behavioral Dependancy */
    vertical-align: middle;/* Warning: Behavioral Dependancy */
    width: 100%;/* Warning: Behavioral Dependancy */
    z-index: 9998;/* Warning: Behavioral Dependancy */
}
.sycpadb {
	padding-bottom: var(--sycvar-space-base);
}
.sycpadn {
	padding-top: var(--sycvar-space-base);
	padding-left: var(--sycvar-space-base);
	padding-right: var(--sycvar-space-base)
}
.sycpadl {
	padding-left: var(--sycvar-space-base);
}
.sycpadr {
	padding-right: var(--sycvar-space-base);
}
.sycpadt {
	padding-top: var(--sycvar-space-base);
}
.sycpadh {
	padding-left: var(--sycvar-space-base);
	padding-right: var(--sycvar-space-base)
}
.sycpadv {
	padding-bottom: var(--sycvar-space-base);
	padding-top: var(--sycvar-space-base);
}
.sycpadu {
	padding-bottom: var(--sycvar-space-base);
	padding-left: var(--sycvar-space-base);
	padding-right: var(--sycvar-space-base)
}
.sycpadx {
	padding: var(--sycvar-space-base) var(--sycvar-space-base) var(--sycvar-space-base) var(--sycvar-space-base);
}
.sycpadx9 {
	padding: var(--sycvar-space-lg) var(--sycvar-space-xxxl) var(--sycvar-space-lg) var(--sycvar-space-xxxl);
}
.sycpadxxl {
	padding: var(--sycvar-space-lg) var(--sycvar-space-lg) var(--sycvar-space-lg) var(--sycvar-space-lg);
}
.sycpadhxl{
	padding-left: var(--sycvar-space-lg);
	padding-right: var(--sycvar-space-lg)
}
.sycpagetitle {
    color: var(--sycvar-text-info);/*Cornflower Blue*/
    font-size: 1em;
    font-weight: bold;
    padding-right: .5em;
    vertical-align: top;
    white-space: nowrap;
}
.sycpointer {
	cursor: pointer;/* Warning: Behavioral Dependancy */
}
.sycpointer:hover {
	cursor: pointer;/* Warning: Behavioral Dependancy */
}
.sycposabs {
    position: absolute;/* Warning: Behavioral Dependancy */
}
.sycresizable {
    resize: both;
    overflow: auto;
}
.sycrounded {
	border-radius: var(--sycvar-radius-xl);
}
.sycbounded {
	border-radius: var(--sycvar-radius-xl);
	border:2px solid;
}
.sycboundedthin {
	border-radius: var(--sycvar-radius-xl);
	border:1px solid;
}
.sycrow{
    display: table-row;
}
.sycrowodd {
    background-color: var(--sycvar-bg-success);/*Mint Green*/
}
.sycrowodd:hover {
	background-color: var(--sycvar-bg-hover);/*Lemon Yellow*/
}
.sycrowodd-nohover {
    background-color: var(--sycvar-bg-success);/*Mint Green*/
}
.sycroweven {
    background-color: var(--sycvar-bg-base);/*Racist White*/
}
.sycroweven:hover {
	background-color: var(--sycvar-bg-hover);/*Lemon Yellow*/
}
.sycroweven-nohover {
    background-color: var(--sycvar-bg-base);/*Racist White*/
}
.sycrowactive {
    background-color: var(--sycvar-text-warning) !important;/*Sunflower;*/
    font-weight: bolder !important;
}
.sycrowactive:hover {
    font-weight: bold;
}
.syctable {
    display: table;
    width: -webkit-fill-available;
}
.syctablestamp{
    display: table;
    width: unset;
}
.sycnavitem {
    color: var(--sycvar-text-primary);/*Dark Green*/
    font-weight: normal;
    padding: .25em .5em .25em 1em;
}
.sycnavitem:hover {
    background-color: var(--sycvar-bg-primary);/*Dark Green*/
    color: var(--sycvar-text-on-primary);/*Racist White*/
}
.sycnavsub {
	display:none;
	position: absolute;
    top: 100%;
    left: -2px;
    min-width: 180px;

    background: var(--sycvar-bg-base);/*Racist White*/
	border:2px solid var(--sycvar-border-primary);
	box-shadow: var(--sycvar-shadow-nav);

    z-index: 10000;
}
.sycnavtop {
    position: relative;
    font-weight: bolder;
    padding-bottom: .25em;
    vertical-align: baseline;
    cursor: pointer;
}
.sycnavtop:hover {
    background-color: var(--sycvar-bg-primary);/*Dark Green*/
    border-color: var(--sycvar-text-primary);
	border-radius: var(--sycvar-radius-lg) .5em 0 0;
    color: var(--sycvar-text-warning-light);/*Lemon Yellow*/
}
.sycnavtopddl {
    position: relative;
    font-weight: bolder;
    padding-bottom: .25em;
    vertical-align: baseline;
    cursor: pointer;
}
.sycnavtopddl:hover {
    background-color: var(--sycvar-bg-primary);/*Dark Green*/
	border-radius: var(--sycvar-radius-lg) .5em 0 0;
	border-color:var(--sycvar-text-primary);
    color: var(--sycvar-text-warning-light);/*Lemon Yellow*/
}
.sycnavtopddl:hover > .sycnavsub {
    display: block;
}
.sycunderline {
    text-decoration: underline !important;
}
.sychrulel {
    border-top: ridge .3em;
}
.sycvrulel {
    border-left: solid 2px var(--sycvar-border-neutral);
}
.sycvruler {
    border-right: solid 2px var(--sycvar-border-neutral);
}
.syczoomout1 {
	zoom: 0.9 !important;
}
.syczoomout2 {
	zoom: 0.75 !important;
}
.syczoomout3 {
	zoom: 0.7 !important;
}
.syczoomout4 {
	zoom: 0.6 !important;
}
.syczoomout5 {
	zoom: 0.5 !important;
}
.syczindex1 {
	z-index:50;
}
.syczindex2 {
	z-index:999;
}
/*******************************************************
    Styling the Demo Pages
*******************************************************/
.syc-demo-nav {
    width: 100%;
    font-size: 16px;
    color: var(--sycvar-text-base);
}

.syc-demo-group {
    padding: 10px 8px 12px 8px;
    border-top: 1px solid var(--sycvar-border-demo);
}

.syc-demo-group:first-child {
    border-top: none;
}

.syc-demo-group-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.syc-demo-group-scheduler .syc-demo-group-title,
.syc-demo-group-scheduler .syc-demo-heading-icon,
.syc-demo-group-scheduler .syc-demo-icon {
    color: var(--sycvar-text-primary-light);
}

.syc-demo-group-client .syc-demo-group-title,
.syc-demo-group-client .syc-demo-heading-icon,
.syc-demo-group-client .syc-demo-icon {
    color: var(--sycvar-text-info-light);
}

.syc-demo-group-backoffice .syc-demo-group-title,
.syc-demo-group-backoffice .syc-demo-heading-icon,
.syc-demo-group-backoffice .syc-demo-icon {
    color: var(--sycvar-text-feature-light);
}

.syc-demo-heading-icon {
    width: 28px;
    text-align: center;
    font-size: 22px;
}

.syc-demo-link {
    position: relative;
    min-height: 27px;
    display: flex;
    align-items: center;
    padding: 2px 25px 2px 38px;
    cursor: pointer;
}

.syc-demo-link:hover {
    background: color-mix(in srgb, var(--sycvar-text-warning) 7%, transparent);
}

.syc-demo-icon {
    position: absolute;
    left: 10px;
    width: 20px;
    text-align: center;
    font-size: 15px;
}

.syc-demo-label {
    flex: 1;
}

.syc-demo-arrow {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    font-weight: 300;
    color: var(--sycvar-text-label);
}

.syc-demo-note {
    margin-left: auto;
    margin-right: 28px;
    display: flex;
    align-items: flex-start;
    gap: 8px;

    font-size: 13px;
    line-height: 1.15;
    color: var(--sycvar-text-label);
    white-space: nowrap;
}

.syc-demo-info {
    font-size: 18px;
    line-height: 1;
    color: var(--sycvar-text-info-light);
}

/*******************************************************

    Captain Rogers related styling

*******************************************************/
.captrogers-callout {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 15px 0;
    padding: 12px 16px;

    background: var(--sycvar-bg-callout);
    border: 1px solid var(--sycvar-border-info-dark);
    border-radius: var(--sycvar-radius-demo);
}


/* Captain Rogers image container */

.captrogers {
    flex: 0 0 auto;
    text-align: center;
}

.captrogers img {
    display: block;
    width: 64px;
    height: auto;
}


/* Content */

.captrogers-content {
    flex: 1;
    min-width: 0;
}

.captrogers-content h4 {
    margin: 0 0 4px 0;
    color: var(--sycvar-text-info);
}

.captrogers-content p {
    margin: 0;
}


/* Rogers positioning */

.captrogers-callout:has(.captrogers.left) {
    flex-direction: row;
}

.captrogers-callout:has(.captrogers.right) {
    flex-direction: row-reverse;
}

.captrogers-callout:has(.captrogers.top) {
    flex-direction: column;
}

.captrogers-callout:has(.captrogers.bottom) {
    flex-direction: column-reverse;
}


/* Center Rogers for vertical layouts */

.captrogers-callout:has(.captrogers.top),
.captrogers-callout:has(.captrogers.bottom) {
    align-items: stretch;
}

.captrogers-callout:has(.captrogers.top) .captrogers,
.captrogers-callout:has(.captrogers.bottom) .captrogers {
    align-self: center;
}
/*******************************************************

    Media Width Defaults

*******************************************************/
@media only screen and (min-width:480px){
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}
@media only screen and (min-width:960px){
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}
@media only screen and (min-width:1024px){
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}
@media only screen and (min-width:1360px){
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}
@media only screen and (min-width:1440px){
	/* styles for browsers larger than 1440px; */
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}
@media only screen and (min-width:2000px){
	/* for sumo sized (mac) screens */
    body, html {
    	font-size: 1em;
    	width:99%;
    }
}