/**
 * guiobjects.css
 *
 * Copyright 2022 Tellbrite Corporation. All rights reserved.
 */

:root {
    --gui-font-names: Arial, sans-serif;
    --gui-text-color: midnightblue;
    --gui-link-color: deepskyblue;
    --gui-trim-color: darkslateblue;
    --gui-span-color: darkturquoise;
    --gui-tint-color: rgba(240, 240, 240, 0.9);
    --gui-page-color: white;
  	--gui-card-width: 300px;
    --gui-card-color: ghostwhite;
  	--gui-icon-width: 1rem;
    --gui-icon-color: whitesmoke;
    --gui-icon-round: 12.5%;
    --gui-line-width: 2px;
    --gui-line-color: gainsboro;
    --gui-line-round: 6px;
  	--gui-line-style: solid;
    --gui-grid-space: 0.5rem;
    --gui-menu-space: 0.5rem;
  	--gui-edge-space: 0.5rem;
    --gui-hero-height: 500px;

  	color: var(--gui-text-color);
    font-family: var(--gui-font-names);
    background-color: var(--gui-page-color);
}  
@media screen and (prefers-color-scheme: dark) {
    :root {
        --gui-text-color: whitesmoke;
        --gui-link-color: lightskyblue;
        --gui-trim-color: darkslateblue;
        --gui-span-color: darkturquoise;
        --gui-tint-color: rgba(64, 64, 64, 0.9);
        --gui-page-color: rgba(48, 48, 48);
        --gui-card-color: dimgray;
        --gui-icon-color: transparent;
        --gui-line-color: gray;
    }
    [class*="gui-"] figure img {
        filter: brightness(75%);
    }
    [class*="gui-"] figure figcaption {
        filter: brightness(100%);
    }
}

[class*="gui-"] a {
  color: var(--gui-link-color);
}

/**
 * GUIobjects : *.gui-hidden.
 */
*.gui-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px !important;
}

/**
 * GUIobjects : hr.gui-spacer
 */
hr.gui-spacer {
    margin: 2rem 0;
  	border: none;
}

/**
 * GUIobjects : form.gui-form
 */
form.gui-form label {
    margin: var(--gui-edge-space);
    display: block;
    font-size: small;
}
form.gui-form input {
    vertical-align: middle;
}
form.gui-form button {
    margin: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--gui-text-color);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
}
form.gui-form fieldset {
    border-radius: var(--gui-line-round);
    border: var(--gui-line-width) var(--gui-line-style) var(--gui-line-color);
}
form.gui-form fieldset legend {
    padding: 0 var(--gui-edge-space);
    text-align: center;
}
form.gui-form label select,
form.gui-form label textarea,
form.gui-form label input[type='tel'],
form.gui-form label input[type='url'],
form.gui-form label input[type='text'],
form.gui-form label input[type='file'],
form.gui-form label input[type='email'],
form.gui-form label input[type='search'],
form.gui-form label input[type='password'] {
    width: 100%;
    display: block;
    padding: 0.5rem;
    font-size: medium;
    border-radius: var(--gui-line-round);
    border: var(--gui-line-width) var(--gui-line-style) var(--gui-line-color);
    background-color: var(--gui-tint-color);
    color: var(--gui-text-color);}
form.gui-form label select {
    appearance: none;
}
form.gui-form label textarea {
    height: 8rem;
}

/**
 * GUIobjects : form.gui-subscribe
 */
 form.gui-subscribe {
    margin: 0 auto;
    max-width: 600px;
   	font-size: medium;
}
form.gui-subscribe fieldset {
    margin: var(--gui-edge-space);
  	padding: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border-radius: var(--gui-line-round);
    background-color: var(--gui-tint-color);
    border: var(--gui-line-width) var(--gui-line-style) var(--gui-line-color);
}
form.gui-subscribe label {
    flex: 1;
    margin: 0;
}
form.gui-subscribe input {
    width: 100%;
    padding: 0.5rem;
    border: none;
    font-size: inherit;
    background: none;
    box-sizing: border-box;
    color: var(--gui-text-color);
}
form.gui-subscribe button.gui-button {
    flex: 0;
    margin: 0;
    line-height: 1;
  	font-size: inherit;
}

/**
 * GUIobjects : blockquote.gui-quote
 */
blockquote.gui-quote {
    float: none;
    max-width: 100%;
    font-size: x-large;
    font-family: serif;
    padding: 0 1.5rem;
    margin: 3rem 0;
    position: relative;
    line-height: 1;
}
blockquote.gui-quote::before {
    content: "“";
    font-size: larger;
    font-weight: bolder;
}
blockquote.gui-quote::after {
    content: "”";
    font-size: larger;
    font-weight: bolder;
}
blockquote.gui-quote p {
    display: inline;
    font: inherit;
}

/**
 * GUIobjects : a.gui-icon
 * GUIobjects : img.gui-icon
 * GUIobjects : button.gui-icon
 */
img.gui-icon {
    width: var(--gui-icon-width);
    height: var(--gui-icon-width);
    display: inline-block;
    vertical-align: top;
}
a.gui-icon,
button.gui-icon {
    margin: 0;
    padding: calc(var(--gui-icon-width) * 0.25);
    border: none;
    border-radius: var(--gui-icon-round);
  	width: calc(var(--gui-icon-width) * 1.5);
    height: calc(var(--gui-icon-width) * 1.5);
    display: inline-block;
		box-sizing: border-box;
		background: var(--gui-icon-color);
	  cursor: pointer;
}

/**
 * GUIobjects : a.gui-button
 * GUIobjects : button.gui-button
 * GUIobjects : a.gui-button-outline
 * GUIobjects : button.gui-button-outline
 */
a.gui-button,
button.gui-button,
a.gui-button-outline,
button.gui-button-outline {
    display: inline-block;
    padding: var(--gui-edge-space) calc(var(--gui-edge-space) * 1.5);
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border-radius: var(--gui-line-round);
    border: var(--gui-line-width) var(--gui-line-style) var(--gui-trim-color);
}
a.gui-button,
button.gui-button {
  	color: white;
    background-color: var(--gui-trim-color);
}
a.gui-button-outline,
button.gui-button-outline {
    color: var(--gui-trim-color);
  	background-color: rgb(255, 255, 255, 0.1);
}
a.gui-button b,
button.gui-button b,
a.gui-button-outline b,
button.gui-button-outline b {
    color: inherit;
}

/**
 * GUIobjects : figure.gui-picture
 */
figure.gui-picture {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  	display: flex;
  	flex-flow: column nowrap;
  	position: relative;
    min-width: 10rem;
}
figure.gui-picture img {
   	flex: 1;
  	width: 100%;
  	height: 100%;
    object-fit: cover;
  	object-position: top;
  	border-radius: var(--gui-line-round);
}
figure.gui-picture figcaption {
  	width: 100%;
    font-size: xx-small;
  	box-sizing: border-box;
  	position: absolute;
  	text-align: center;
  	text-shadow: 1px 1px 3px 5px var(--gui-tint-color);
  	bottom: 0;
  	z-index: 1;
}

/**
 * GUIobjects : figure.gui-counter
 */
figure.gui-counter {
    width: 100%;
    margin: 0;
    padding: 0;
  	display: flex;
  	flex-flow: row nowrap;
  	align-items: center;
    justify-content: start;
    background: var(--gui-tint-color);
	  border-radius: var(--gui-line-round);
  	min-width: 10rem;
    flex: 1;
}
figure.gui-counter img {
    height: 4rem;
    padding: var(--gui-edge-space);
    box-sizing: border-box;
    flex: 1;
}
figure.gui-counter figcaption {
    width: 100%;
  	margin: 0;
    padding: var(--gui-edge-space);
  	box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
figure.gui-counter figcaption b {
  	font-weight: normal;
}
figure.gui-counter figcaption i {
  	font-size: 400%;
  	font-style: normal;
  	font-weight: 100;
}

/**
 * GUIobjects : article.gui-summary
 */
article.gui-summary {
  	box-sizing: border-box;
  	padding: var(--gui-edge-space);
}
article.gui-summary header {
  	margin: var(--gui-edge-space) auto;
}
article.gui-summary header h2 {
  	margin: 0;
  	font-size: 100%;
  	font-weight: 200;
  	text-transform: uppercase;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--gui-span-color);
    text-decoration-thickness: var(--gui-line-width);
}
article.gui-summary header h3 {
  	margin: 0;
  	font-size: 300%;
  	color: var(--gui-span-color);
}
article.gui-summary p {
  	line-height: 1.5;
}

/**
 * GUIobjects : ol.gui-grid
 */
ol.gui-grid {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--gui-grid-space);
    column-gap: var(--gui-grid-space);
}
ol.gui-grid > li {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
@media screen and (min-width: 600px) {
  	ol.gui-grid {
      	flex-flow: row wrap;
        justify-content: center;
  	}
  	ol.gui-grid > li {
		  	flex: 1 0;
  	}
}

/**
 * GUIobjects : div.gui-card
 */
div.gui-card {
    width: 100%;
    margin: 0;
    padding: 0;
  	display: flex;
  	position: relative;
  	flex-flow: column nowrap;
  	align-items: center;
    box-sizing: border-box;
    border-radius: var(--gui-line-round);
  	min-width: var(--gui-card-width);
    background: linear-gradient(45deg, var(--gui-card-color), var(--gui-page-color));
}
div.gui-card figure.gui-picture {
  	height: var(--gui-hero-height);  
}
div.gui-card article.gui-summary {
    height: 100%;
    max-width: 600px;
    position: absolute;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
div.gui-card article.gui-summary p {
    text-shadow: 0px 0px 2px var(--gui-tint-color);
}
div.gui-card[data-gui-card-flow="split"] figure.gui-picture {
		height: auto;
}
div.gui-card[data-gui-card-flow="split"] article.gui-summary {
		position: static;
}

/**
 * GUIobjects : div.gui-popup
 */
div.gui-popup > button[data-gui-popup-id][aria-expanded="true"] ~ * {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    padding: var(--gui-edge-space);
    box-sizing: border-box;
    background-color: var(--gui-page-color);
}
div.gui-popup > button[data-gui-popup-id][aria-expanded="false"] ~ * {
    display: none;
}
div.gui-popup > div > button {
    display: block;
    margin: 0 0 0 auto;
}

/**
 * GUIobjects : section.gui-player
 */
section.gui-player {
    width: 100%;
    margin: 0 auto var(--gui-edge-space);
    padding: 0;
    display: flex;
    flex-flow: column;
    position: relative;
}
section.gui-player > div > * {
    flex: 0 0 100%;
    display: none;
    height: var(--gui-hero-height);
}
section.gui-player > div > *:first-child,
section.gui-player > div > *[data-gui-player-current="true"] {
    display: flex;
    animation: gui-effect-fade-in 1s;
}
section.gui-player > footer {
  	font-size: small;
    position: absolute;
    left: var(--gui-edge-space);
    bottom: var(--gui-edge-space);
    width: calc(100% - 2 * var(--gui-edge-space));
    background: var(--gui-tint-color);
    border-radius: var(--gui-line-round);
}
section.gui-player > footer > nav {
    display: none;
    padding: var(--gui-edge-space) var(--gui-edge-space) 0;
}
section.gui-player > footer > nav h2 {
    margin: 0;
    font-size: medium;
}
section.gui-player > footer > nav ol {
    margin: 0;
    padding: var(--gui-edge-space);
    display: flex;
    list-style: none;
    flex-flow: row nowrap;
    overflow: scroll;
}
section.gui-player > footer > nav li {
    margin: var(--gui-edge-space);
    padding: var(--gui-edge-space);
    display: inline-block;
    text-align: center;
    border-radius: var(--gui-line-round);
}
section.gui-player > footer > nav li[data-gui-player-current="true"] {
    box-shadow: 0px 0px 5px 2px var(--gui-span-color);
}
section.gui-player > footer > nav li img {
    width: 5rem;
    height: 3rem;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    border-radius: var(--gui-line-round);
}
section.gui-player > footer > nav li a > span {
    display: block;
}
section.gui-player > footer > div {
    display: flex;
    margin: 0 auto;
    padding: 0.5rem;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
section.gui-player[data-gui-player-list="on"] > footer > nav {
    display: block;
    animation: gui-effect-fade-in 1s;
}
section.gui-player[data-gui-player-play="on"] 
    button[data-gui-player-control="play"],
section.gui-player[data-gui-player-loop="on"] 
    button[data-gui-player-control="loop"],
section.gui-player[data-gui-player-list="on"] 
    utton[data-gui-player-control="list"] {
    box-shadow: 0px 0px 5px 2px var(--gui-span-color);
}
section.gui-player[data-gui-player-look="spinner"] 
    button[data-gui-player-control="back"],
section.gui-player[data-gui-player-look="spinner"] 
    button[data-gui-player-control="next"] {
    position: absolute;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    bottom: calc(var(--gui-hero-height) * 0.40);
    border-radius: 50%;
    background: var(--gui-tint-color);
}
section.gui-player[data-gui-player-look="spinner"] 
    button[data-gui-player-control="back"] {
    left: 0;
}
section.gui-player[data-gui-player-look="spinner"] 
    button[data-gui-player-control="next"] {
    right: 0;
}
@media screen and (min-width: 600px) {
    section.gui-player > footer {
        left: 25%;
        width: calc(100% - 50%);
    }
    section.gui-player[data-gui-player-look="spinner"] 
        button[data-gui-player-control="back"] {
        left: calc(-50% + var(--gui-edge-space));
    }
    section.gui-player[data-gui-player-look="spinner"] 
        button[data-gui-player-control="next"] {
        right: calc(-50% + var(--gui-edge-space));
    }
}

/**
 * GUIobjects : ul.gui-flyout
 */
ul.gui-flyout,
ul.gui-flyout ul {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 10rem;
  	font-weight: 300;
  	font-size: medium;
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--gui-menu-space);
}
ul.gui-flyout li {
    text-align: left;
    position: relative;
    white-space: nowrap;
}
ul.gui-flyout li > button[data-gui-flyout-id] {
  	float: right;
  	background: none;
  	margin-left: 0.5rem;
    width: var(--gui-icon-width);
    height: var(--gui-icon-width);
}
ul.gui-flyout li > button[data-gui-flyout-id] img.gui-icon {
    width: 100%;
  	height: 100%;
  	vertical-align: text-top;
}
ul.gui-flyout li > button[aria-expanded="true"] img.gui-icon {
    animation: gui-effect-flip-vertically 0.5s;
    transform: rotate(-180deg);
}
ul.gui-flyout li > button[aria-expanded="true"] ~ * {
    display: block;
    border-radius: var(--gui-line-round);
    background-color: var(--gui-tint-color);
}
ul.gui-flyout li > button[aria-expanded="true"] ~ ul {
  	display: flex;
  	padding: var(--gui-menu-space);
}
ul.gui-flyout li > button[aria-expanded="false"] ~ * {
    display: none;
}
ul.gui-flyout b {
    font-weight: normal;
}
ul.gui-flyout p {
    margin: 0;
    padding: var(--gui-edge-space);
    white-space: normal;
}
ul.gui-flyout a {
    text-decoration: none;
}
ul.gui-flyout a:hover {
    border-bottom: var(--gui-line-width) solid var(--gui-link-color);
}
ul.gui-flyout img.gui-icon ~ a {
    margin-left: 0.5rem;
}
@media screen and (min-width: 600px) {
  	ul.gui-flyout {
				flex-flow: row;
      	justify-content: space-evenly;
  	}
    ul.gui-flyout[data-gui-flyout-menu="on"] > li > button[aria-expanded="true"] ~ * {
        position: absolute;
  	}
}

/**
 * GUIobjects : div.gui-brand
 */
div.gui-brand > a {
    display: block;
}
div.gui-brand > a > img {
    height: 2rem;
    display: block;
}

/**
 * GUIobjects : nav.gui-omnibar.
 */
nav.gui-omnibar {
    display: flex;
  	margin: 0 0 var(--gui-edge-space);
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
nav.gui-omnibar > ul.gui-flyout {
  	min-width: auto;
}
nav.gui-omnibar > ul.gui-flyout > li {
  	padding: 0;
  	line-height: 1;
}
@media screen and (min-width: 600px) {
    nav.gui-omnibar > div#gui-omnibar_menu {
        flex: 0 0 50%;
    }
    nav.gui-omnibar > div#gui-omnibar_menu > button,
    nav.gui-omnibar > div#gui-omnibar_menu > div > button {
        display: none;
    }
    nav.gui-omnibar > div#gui-omnibar_menu > div {
        width: auto;
        display: block;
        position: static;
        text-align: right;
        padding: 0;
    }
}

/**
 * GUIobjects : nav.gui-sitemap
 */
@media screen and (min-width: 600px) {
    nav.gui-sitemap > ul.gui-flyout {
        flex-flow: row wrap;
        justify-content: space-between;
    }
    nav.gui-sitemap > ul.gui-flyout > li {
        margin: 0 0 var(--gui-edge-space);
    }
    nav.gui-sitemap > ul.gui-flyout > li > span {
        font-weight: bold;
    }
    nav.gui-sitemap > ul.gui-flyout > li > ul {
        display: flex;
      	margin-top: var(--gui-edge-space);
    }
    nav.gui-sitemap > ul.gui-flyout > li > button[data-gui-flyout-id] {
        display: none;
    }
}

/**
 * GUIobjects : section.gui-channels
 */
section.gui-channels {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
section.gui-channels div.gui-brand {
    flex: 1;
}
section.gui-channels div {
    line-height: 2;
}

/**
 * GUIobjects : section.gui-notices
 */
section.gui-notices {
  	font-size: small;
}
section.gui-notices p {
    display: flex;
    text-align: center;
    flex-flow: row wrap;
    justify-content: space-around;
}

/**
 * GUIobjects : section.gui-faqs
 */
section.gui-faqs ul.gui-flyout {
  	flex-flow: column nowrap;
}
section.gui-faqs ul.gui-flyout p {
  	line-height: 1.5;
}

/**
 * GUIobjects : section.gui-newsletter
 */
@media screen and (min-width: 600px) {
  
    section.gui-newsletter div.gui-card {
        flex-flow: row nowrap;
    }
    section.gui-newsletter div.gui-card figure.gui-picture {
        height: calc(var(--gui-hero-height) * 0.5);
    }
  	section.gui-newsletter div.gui-card article.gui-summary {
        width: 100%;
        min-width: 100%;
        flex-flow: row nowrap;
        align-items: center;
  	}
  	section.gui-newsletter div.gui-card article.gui-summary > footer {
				flex: 1 0 33%;
  	}
}

/**
 * GUIobjects : gui-effect-fade-in
 */
@keyframes gui-effect-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/**
 * GUIobjects : gui-effect-flip-vertically
 */
@keyframes gui-effect-flip-vertically {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}