/***** ----- GLOBAL BLUEPRINT ----- *****/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (prefers-color-scheme: dark) {}

@media (prefers-color-scheme: light) {}

html {
    position: fixed;
    overflow: hidden;
    max-height: 100vh;
    max-width: 100vw;
    height: 100%;
    width: 100%;
    overflow: overlay;
}

body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    overscroll-behavior: contain;
}

::selection {
    color: white;
    background-color: rgb(200, 45, 70);
}

::-moz-selection {
    color: white;
    background-color: rgb(200, 45, 70);
}

::-webkit-scrollbar {
    display: none;
}

input,
a {
    outline: none;
}

/***** ----- GLOBAL ELEMENT STATES ----- *****/

.invisible-absolute {
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

.invisible {
    visibility: hidden;
    pointer-events: none;
}

/***** ----- GLOBAL FRAMEWORK ----- *****/

#fw-warning-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: .75em;
    text-align: center;
    padding: .75em;
    z-index: 1000;
}

/***** ----- INTRO ----- *****/

.fw-intro-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    height: 100%;
    width: 100%;
    font-size: .75em;
    text-align: center;
    z-index: 1000;
    will-change: transform;
}

#intro-glyph,
#intro-wordmark,
.fw-intro-wrapper img {
    width: 6em;
    height: 6em;
    margin-bottom: -.75em;
    transform: translateY(10%);
    opacity: 1;

    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#intro-glyph.night,
#intro-wordmark.night {
    opacity: .335;
}

#fw-noscript>p,
#fw-intro>p.browser-warning {
    position: absolute;
    margin: 0;
    font-weight: bold;
    white-space: pre-line;
    color: rgb(200, 45, 70);
}

#fw-intro>p.browser-warning {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#fw-intro .b-spinner {
    position: absolute;
    top: calc(65%);

    height: 3rem;
    width: 3rem;
}

#fw-intro .version {
    position: absolute;
    bottom: 15%;
    font-weight: bold;
}

/***** ----- FRAMEWORK SPACE ----- *****/

#fw-space {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    will-change: transform;
}

#beta-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
    min-height: 1.95rem;
    color: white;
    text-align: center;
    padding: 0.5rem 0.5rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#fw-overlay {
    display: block;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10;
}

#fw-overlay.night {
    background-color: rgba(40, 40, 46, 0.6) !important;
}

#fw-outer-upper {
    display: flex;
    flex-direction: row;
    margin-right: .25em;
}

#fw-outer-upper .b-d-arrow-one {
    display: none;
}

#corner-circle {
    opacity: 0;
}

#fw-outer-lower {
    display: flex;
    flex-direction: row;
    height: 100%;
}

#fw-central-wrapper {
    flex: 1;
    height: calc(100% - .25em);
    display: flex;
    flex-direction: row;
    margin-right: .3em;
}

.fw-central-section {
    flex: 1;
}

.fw-central-flex .b-d-bar-horizontal {
    min-width: 0;
}

#fw-panel-wrapper {
    flex-basis: calc(20em + 3px);
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-left: .5em;
}

#fw-panel-wrapper.no-measure {
    margin: -.55rem 0 0 -.45em;
}

#fw-panel-wrapper.no-measure #fw-panel-header {
    margin: -.75em 0 0 0;
}

#fw-panel-wrapper.no-measure #fw-panel-detail {
    margin-bottom: .1em;
}

#fw-panel-header {
    max-height: 20em !important;
    max-width: 20em;
}

#fw-panel-header .b-d-descriptor:before {
    content: "NAVIGATION";
    text-align: right;
    text-transform: uppercase;
}

#fw-panel-header .b-d-descriptor {
    right: calc(100% - .75em);
}

header {
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#header-back {
    text-align: left;
}

#header-dismiss {
    position: absolute;
    text-align: left;
    height: 1.8rem;
}

#header-settings {
    text-align: right;
}

.header-tableview {
    max-height: calc(17em - 7px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.header-tableview-cell {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding-left: .5em;
    font-size: 1em;
    border: none;
    background-color: transparent;
}

.header-tableview-cell:disabled,
#header-mobile-button:disabled {
    pointer-events: none;
}

.header-tableview-cell:disabled .header-tableview-cell-title.light {
    color: rgb(150, 150, 156) !important;
}

.header-tableview-cell:disabled .header-tableview-cell-title.night {
    color: rgb(60, 60, 66) !important;
}

.header-tableview-cell:disabled>.header-tableview-cell-icon-wrapper,
#header-mobile-button:disabled>.header-tableview-cell-icon-wrapper,
.header-tableview-cell:disabled .header-tableview-cell-seen {
    opacity: .4;
    pointer-events: none;
}

.header-tableview-cell.light:hover,
#header-mobile-button.light:hover {
    cursor: pointer;
    background-color: rgb(249, 249, 255) !important;
}

.header-tableview-cell.night:hover,
#header-mobile-button.night:hover {
    cursor: pointer;
    background-color: rgb(21, 21, 27) !important;
}

.header-tableview-cell.light:active,
#header-mobile-button.light:active {
    background-color: rgb(240, 240, 246) !important;
    color: black !important;
}

.header-tableview-cell.night:active,
#header-mobile-button.night:active {
    background-color: rgb(28, 28, 34) !important;
    color: rgb(30, 30, 36) !important;
}

.header-tableview-cell:focus:hover {
    background-color: rgb(200, 45, 70) !important;
}

.header-tableview-cell:hover:disabled,
#header-mobile-button:hover:disabled {
    cursor: default;
    background-color: transparent;
}

.header-tableview-cell:focus,
#header-mobile-button:focus {
    background-color: rgb(200, 45, 70) !important;
    color: white !important;
    outline: none;
}

.header-tableview-cell:focus .header-tableview-cell-icon.light {
    filter: invert(1);
}

.header-tableview-cell:focus .header-tableview-cell-icon.night {
    filter: invert(1);
}

.header-tableview-cell:focus .header-tableview-cell-icon-wrapper.light {
    color: black !important;
}

.header-tableview-cell:focus .header-tableview-cell-icon-wrapper.night {
    color: black !important;
}

.header-tableview-cell:focus .header-tableview-cell-title.light {
    color: white !important;
}

.header-tableview-cell:focus .header-tableview-cell-title.night {
    filter: invert(0);
    color: white !important;
}

.header-tableview-cell:focus .header-tableview-cell-seen {
    filter: invert(1)brightness(300%);
}

.header-tableview-cell-setting:focus .header-tableview-cell-icon-wrapper.light {
    filter: invert(0);
    background-color: white !important;
}

.header-tableview-cell-setting:focus .header-tableview-cell-icon-wrapper.night {
    filter: invert(1);
    background-color: black !important;
}

.header-tableview-cell-setting:focus .header-tableview-cell-icon.light {
    filter: invert(1);
}

.header-tableview-cell-setting:focus .header-tableview-cell-icon.night {
    filter: invert(0) !important;
}

.header-tableview-cell:focus:active .header-tableview-cell-icon-wrapper.light {
    filter: invert(0);
}

.header-tableview-cell:focus:active .header-tableview-cell-icon-wrapper.night {
    filter: invert(1);
}

.header-tableview-cell:focus:active .header-tableview-cell-seen {
    filter: invert(0)brightness(0%);
}

.header-tableview-cell.light:active .header-tableview-cell-seen {
    filter: invert(0)brightness(50%);
}

.header-tableview-cell.night:active .header-tableview-cell-seen {
    filter: invert(0)brightness(200%);
}

.header-tableview-cell-title-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 1.95rem;
}

.header-tableview-cell-setting-toggle>.header-tableview-cell-title-wrapper {
    height: calc(3.9rem - 1px);
}

.header-tableview-cell-setting-button>.header-tableview-cell-title-wrapper,
.header-tableview-cell-setting-action>.header-tableview-cell-title-wrapper {
    height: 1.9rem;
}

.header-tableview-cell-title {
    display: flex;
    align-items: center;
    height: 1.95rem;
    width: 100%;
    margin: 0;
    margin-left: .75em;
    padding: 0;
    padding-top: .15em;
    font-size: .85em;
    text-transform: uppercase;
}

.header-tableview-cell:not(.header-tableview-cell-setting)>.header-tableview-cell-title-wrapper>.header-tableview-cell-title {
    border-bottom: .125em solid;
}

.header-tableview-cell:last-child>.header-tableview-cell-title-wrapper>.header-tableview-cell-title {
    border: none;
}

.header-tableview-cell-subtitle {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 0 1em;
    padding: 0 2em .15em 0;
    font-size: .65em;
    text-align: left;
}

.header-tableview-cell-setting:not(.header-tableview-cell-setting-button, .header-tableview-cell-setting-action) .header-tableview-cell-title {
    height: auto;
    margin-bottom: .3em;
    padding-top: 0;
}

.header-tableview-cell-setting-button .header-tableview-cell-title {
    height: 100%;
}

#header-sub-tableview .header-tableview-cell-title,
#header-settings-tableview .header-tableview-cell-title {
    text-transform: none;
}

#header-settings-tableview .header-tableview-cell-title {
    text-decoration: none;
}

.header-tableview-cell-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1.25em;
    width: 1.25em;
    border-radius: 25%;
}

#header-settings-tableview>button+.header-tableview-cell-setting-button,
#header-settings-tableview>button+.header-tableview-cell-setting-action {
    border: none;
    border-top: .1em solid;
}

#header-settings-tableview>button+.header-tableview-cell-setting-button~.header-tableview-cell-setting-button,
#header-settings-tableview>button+.header-tableview-cell-setting-action~.header-tableview-cell-setting-action {
    border: none;
}

#header-settings-tableview>button+.header-tableview-cell-setting-button~.header-tableview-cell-setting-button .header-tableview-cell-title,
#header-settings-tableview>button+.header-tableview-cell-setting-action~.header-tableview-cell-setting-action .header-tableview-cell-title {
    border-top: .1em solid;
}

.header-tableview-cell-icon {
    height: inherit;
    width: inherit;
    position: relative;
    background-repeat: no-repeat;
    background-size: .75em;
    background-position: center;
    font-size: 1em;
    font-weight: bold;
}

.header-tableview-cell-icon.night {
    filter: invert(.6);
}

.header-tableview-cell-setting .header-tableview-cell-icon.night {
    filter: invert(0) !important;
}

#fw-panel-header.minimal .header-tableview-cell-setting.light .header-tableview-cell-icon-wrapper {
    background-color: rgb(150, 150, 156) !important;
}

#fw-panel-header.minimal .header-tableview-cell-setting.night .header-tableview-cell-icon-wrapper {
    background-color: rgb(60, 60, 66) !important;
}

.header-tableview-cell-icon.header-tableview-cell-count {
    top: calc(-.1em + 5%);
}

.header-tableview-cell-setting-button .header-tableview-cell-icon,
.header-tableview-cell-setting-action .header-tableview-cell-icon {
    background-size: calc(100% + .15em);
}

.header-tableview-cell-seen {
    position: absolute;
    right: .25em;
    height: 1.95em;
    width: 1.95em;
    background-image: url("assets/glyph-seen.svg");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .65;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header-tableview-cell-seen.light {
    filter: invert(.6);
}

.header-tableview-cell-seen.night {
    filter: invert(.6);
    opacity: .45;
}

#header-mobile-button:before {
    content: "Menu items";
}

#header-mobile-button {
    border: none;
    height: 1.95rem;
    width: 100%;
    font-size: .9em;
    font-weight: bolder;
    padding-top: .25em;
    text-transform: uppercase;
}

#header-mobile-button.night:active {
    color: rgb(152, 152, 158) !important;
}

#fw-panel-detail {
    flex: 1;
    max-height: calc(35em + 7px);
    max-width: 20em;
}

#fw-panel-detail .b-d-descriptor:before {
    content: "DETAIL";
    text-align: right;
    text-transform: uppercase;
}

#fw-panel-detail .b-d-descriptor {
    right: calc(100% - .75em);
}

aside {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 100%;
}

#detail-backdrop:before {
    content: "Nothing to display.\A Please interact with a website element.";
    white-space: pre;
}

#detail-backdrop {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: absolute;
    align-self: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: .75em;
    text-align: center;
    pointer-events: none;
}

#detail-frame {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 2em 0;
    z-index: 1;
}

#detail-frame>*:not(.detail-table) {
    padding: 0 .75rem;
}

#detail-frame .detail-heading {
    width: 100%;
    margin: 1rem 0 2.5rem 0;
    font-size: 1.05em;
    word-wrap: break-word;
    order: -1;
}

#detail-frame .detail-description {
    width: calc(100% - .75rem);
    margin: 0 0 1.75rem .75rem;
    font-size: .8em;
    line-height: 1.25rem;
    border: none;
    border-left: .1rem solid;
    word-wrap: break-word;
    order: 0;
}

#detail-frame .detail-subheading {
    font-size: .8em;
    margin: 0 0 .25rem 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#detail-frame .detail-table {
    max-width: 100%;
    width: 100%;
    margin: 0 0 1.5rem 0;
    font-size: .75em;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.detail-table tr {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-left: .6rem;
    padding-top: .45rem;
}

.detail-table tr>td {
    display: inline-block;
    height: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: .1em solid;
}

.detail-table tr>td.multiline {
    height: auto;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-all;
    padding-bottom: .25rem;
}

.detail-table tr>td.multiline-word {
    height: auto;
    overflow: visible !important;
    white-space: normal !important;
    padding-bottom: .25rem;
}

.detail-table tr>td.multiline-word.prewrap {
    white-space: pre-wrap!important;
}

.detail-table tr>td:first-child {
    max-width: 10em;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detail-table tr>td:first-child:first-letter {
    text-transform: capitalize;
}

.detail-table tr>td:last-child {
    width: calc(100% - 10em);
    padding-right: .75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.detail-table tr>td a {
    text-decoration: underline;
}

.detail-table tr>td a:hover {
    cursor: pointer;
}

.detail-table tr a.light:hover {
    color: rgb(15, 15, 21) !important;
}

.detail-table tr a.night:hover {
    color: rgb(152, 152, 158) !important;
}

.detail-table tr>td a:focus {
    color: rgb(200, 45, 70) !important;
}

#detail-frame .detail-preview-subheading {
    order: 5;
}

#detail-frame .detail-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 18.35em;
    margin: 1rem 0 -2rem 0;
    padding: 2.5em;
    position: relative;

    border: none;
    border-top: .1em solid;
    order: 6;
}

#detail-frame .detail-preview-container.light {
    background: rgba(232, 232, 238, 1);
    background: -moz-linear-gradient(top, rgba(232, 232, 238, 1) 0%, rgba(232, 232, 238, 0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(232, 232, 238, 1)), color-stop(100%, rgba(232, 232, 238, 0)));
    background: -webkit-linear-gradient(top, rgba(232, 232, 238, 1) 0%, rgba(232, 232, 238, 0) 100%);
    background: -o-linear-gradient(top, rgba(232, 232, 238, 1) 0%, rgba(232, 232, 238, 0) 100%);
    background: -ms-linear-gradient(top, rgba(232, 232, 238, 1) 0%, rgba(232, 232, 238, 0) 100%);
    background: linear-gradient(to bottom, rgba(232, 232, 238, 1) 0%, rgba(232, 232, 238, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8ee', endColorstr='#e8e8ee', GradientType=0);
}

#detail-frame .detail-preview-container.night {
    background: rgba(15, 15, 21, 1);
    background: -moz-linear-gradient(top, rgba(15, 15, 21, 1) 0%, rgba(15, 15, 21, 0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15, 15, 21, 1)), color-stop(100%, rgba(15, 15, 21, 0)));
    background: -webkit-linear-gradient(top, rgba(15, 15, 21, 1) 0%, rgba(15, 15, 21, 0) 100%);
    background: -o-linear-gradient(top, rgba(15, 15, 21, 1) 0%, rgba(15, 15, 21, 0) 100%);
    background: -ms-linear-gradient(top, rgba(15, 15, 21, 1) 0%, rgba(15, 15, 21, 0) 100%);
    background: linear-gradient(to bottom, rgba(15, 15, 21, 1) 0%, rgba(15, 15, 21, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f0f15', endColorstr='#0f0f15', GradientType=0);
}

#detail-frame .detail-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: calc(100% - 5em);
    width: calc(100% - 5em);
    border: .1em solid;
}

#detail-frame .detail-preview-wrapper.light.data-light {
    background-color: rgb(202, 202, 208);
}

#detail-frame .detail-preview-wrapper.night.data-night {
    background-color: rgb(30, 30, 36);
}

#detail-frame .detail-preview-image {
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#detail-frame .detail-preview-image.square {
    height: 100%;
    width: 100%;
}

#detail-frame .detail-preview-image.wide {
    width: 100%;
}

#detail-frame .detail-preview-image.tall {
    height: 100%;
}

#fw-mobile-detail {
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    max-width: 40em;
    width: 100%;
    max-height: 50em;
    height: calc(100% - 3rem);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
    z-index: 90;
    will-change: transform;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, .3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fw-mobile-detail-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 3.5rem;
    width: 100%;
    border: none;
    border-bottom: .1em solid;
}

#fw-mobile-detail-navbar h3 {
    font-size: 1em;
    margin: 0;
    padding-top: .25rem;
}

#fw-mobile-detail-navbar #fw-mobile-detail-heading-dynamic {
    position: absolute;
    transform: translateY(40px);
    width: calc(100% - 7em);
    padding-top: .4em;
    text-align: center;
    height: 1.75em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#fw-mobile-detail-close {
    opacity: 1;
    z-index: 2;
}

#fw-mobile-detail-frame {
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100% - 3.5rem);
    max-width: 30em;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1rem 1.75rem 1rem 1.75rem;
    opacity: 0;
}

#fw-mobile-detail-frame .detail-heading {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    order: -1;
}

#fw-mobile-detail-frame .detail-description {
    font-size: .8em;
    line-height: 1.25rem;
    padding-left: .75rem;
    margin: 0 0 1.75rem 0;
    border-left: .1rem solid;
    order: 0;
}

#fw-mobile-detail-frame .detail-subheading {
    font-size: .85em;
    margin: .75rem 0 .5rem 0;
}

#fw-mobile-detail-frame .detail-table {
    max-width: calc(100% + .15rem);
    width: calc(100% + .15rem);
    margin: 0 -1.75rem 1.5rem 0;
    font-size: .75em;
    border: none;
}

#fw-mobile-detail-frame .detail-table tr {
    margin-left: -.15rem;
}

#fw-mobile-detail-frame .detail-preview-container {
    width: 100%;
    margin: .75rem auto -1rem auto;
    padding-top: 2.5rem;
    border-top: .1rem solid;
}

#fw-mobile-detail-frame .detail-preview-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2.5rem;
    height: 15em;
    width: 15em;
    border: .1em solid;
}

#fw-mobile-detail-frame .detail-preview-image {
    pointer-events: none;
}

#fw-mobile-detail-frame .detail-preview-image.square {
    height: 100%;
    width: 100%;
}

#fw-mobile-detail-frame .detail-preview-image.wide {
    width: 100%;
    height: auto;
}

#fw-mobile-detail-frame .detail-preview-image.tall {
    height: 100%;
    width: auto;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: .2em;
    height: 6em;
}

#footer-glyph,
#footer-wordmark {
    width: 2.5em;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#footer-glyph.night,
#footer-wordmark.night {
    filter: opacity(.335);
}

#footer-glyph {
    margin-bottom: .5em;
}

#fw-center-wrapper {
    display: flex;
    flex-direction: column;
    margin-left: .5em;
    margin-right: .5em;
    flex-basis: calc(10.25em - 1px);
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 2.65em;
}

#fw-center-wrapper>div:last-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: .5em;
    height: 100%;
}

#fw-center-wrapper>div:last-child>div:first-child {
    display: flex;
    flex-direction: column;
    position: relative;
    left: -.175em;
}

#fw-center-wrapper>div:last-child>div:first-child>div {
    margin-bottom: .25em;
}

#fw-center-wrapper>div:last-child>div:first-child>div:last-child {
    margin-top: .5em;
}

#fw-center-wrapper>div:last-child>div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

#fw-center-wrapper>div:last-child>div:nth-child(3) {
    flex: 1;
}

#fw-center-wrapper>div:last-child>div:last-child {
    position: relative;
}

#fw-content-wrapper {
    flex-basis: calc(50em + 3px);
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    height: 100%;
    min-width: calc(20em + 3px);
    margin-right: .5em;
}

#fw-content-wrapper.no-measure {
    margin-top: -.55em;
}

#fw-content-wrapper.no-measure #fw-panel-content {
    margin: -.75em 0 -.45em 0;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

main .b-spinner {
    position: absolute;
    height: 3rem;
    width: 3rem;
    left: calc(50% - 1.5em);
    top: calc(50% - 1.5em);
    z-index: 2;
}

#content-backdrop:before {
    content: "Use navigation to load content.";
}

#content-backdrop.error.connection:before {
    content: "Could not load content.\A Check internet connection and try again.";
    white-space: pre;
}

#content-backdrop.error.source:before {
    content: "This URL source could not be loaded at this time.\A Please try again later.";
    white-space: pre;
}

#content-backdrop {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: .75em;
    text-align: center;
    pointer-events: none;
}

#content-scroll-field {
    flex: 1;
    position: relative;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#content-scroll-field.loaded .b-spinner {
    display: none;
}

#content-iframe {
    display: block;
    border: none;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: .25px 0 .3px .25px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#content-close {
    text-align: left;
}

#content-next {
    text-align: right;
}

#fw-panel-content {
    flex: 1; height: 0;
}

#fw-panel-content .b-d-descriptor:before {
    content: "CONTENT";
    text-align: left;
    text-transform: uppercase;
}

#fw-panel-content .b-d-descriptor {
    left: calc(100% - .75em);
}

/***** ----- FRAMEWORK CARD ----- *****/

#fw-contact {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    max-width: 40em;
    width: 100%;
    max-height: 50em;
    height: 100%;

    border-radius: 1em;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 100;

    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, .3);
}

#fw-contact.night {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, .65);
}

#fw-contact.initial #fw-contact-button-wrapper {
    opacity: 0;
}

#fw-contact.initial .contact-hero-blurred {
    opacity: 0;
}

#fw-contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    overflow-y: scroll;
    margin-right: -20px;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
}

#fw-contact-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 20em;
    border: none;
    border-bottom: .1em solid;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    overflow: hidden;
    z-index: 1;
}

#fw-contact-hero-container.final {
    position: fixed;
    min-height: 3.5rem;
    max-height: 3.5rem;
    height: 100%;
}

#fw-contact-hero-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform;
    pointer-events: none;
}

.contact-hero-blurred {
    position: absolute;
    height: calc(100% + 40em);
    width: calc(100% + 20em);

    background-repeat: no-repeat;
    background-image: url(assets/brand-dash-blur.jpg);
    background-position: center;
    background-size: 100%;
    filter: saturate(200%)brightness(200%);
    opacity: 0;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.contact-hero-blurred.night {
    filter: saturate(200%)brightness(170%);
}

.contact-hero {
    position: relative;
    top: .5em;
    height: 7.5em;
    width: 7.5em;
    border-radius: 100%;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, .5);
    z-index: 5;
    will-change: transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fw-contact-hero-container .contact-hero-wordmark {
    position: relative;
    bottom: -1em;
    width: 6em;
    height: 2.5em;
    will-change: transform;

    background-image: url(assets/wordmark-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: brightness(0%);
    z-index: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fw-contact-hero-container .contact-hero-wordmark.night {
    filter: brightness(125%);
}

.contact-hero-subheading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    padding-bottom: .9em;
    margin: 0;
    height: 100%;
    width: 100%;
    font-size: 1em;
    opacity: 0;
    z-index: 1;
    transform: scale(2);
    transform-origin: bottom;
    will-change: transform;
    pointer-events: none;
}

#fw-contact-button-wrapper {
    display: flex;
    flex-direction: row;
    min-height: 3.5em;
    max-width: 40em;
    width: 100%;
    transition: min-height .2s ease-in-out;
    border: none;
    border-bottom: .1em solid;
    opacity: 0;
}

#fw-contact-button-wrapper.final {
    margin-top: 20em;
}

#fw-contact-button-wrapper:hover {
    min-height: 4.25em;
}

#fw-contact-button-wrapper:hover .contact-button-label {
    opacity: 1;
}

.contact-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 0;
    margin: 0;

    background-color: transparent;
    border: none;
    outline: none;
}

.contact-button:nth-child(2) {
    border-left: .1em solid;
    border-right: .1em solid;
}

.contact-button.night .contact-button-image {
    filter: invert(1)hue-rotate(180deg);
}

.contact-button.light:hover {
    cursor: pointer;
    background-color: rgb(249, 249, 255);
}

.contact-button.night:hover {
    cursor: pointer;
    background-color: rgb(21, 21, 27);
}

.contact-button.light:active {
    background-color: rgb(240, 240, 246);
}

.contact-button.night:active {
    background-color: rgb(28, 28, 34);
}

.contact-button:focus {
    background-color: rgb(200, 45, 70) !important;
    outline: none;
}

.contact-button.night:focus .contact-button-image {
    filter: none;
}

.contact-button.light:hover .contact-button-label {
    color: black !important;
}

.contact-button.night:hover .contact-button-label {
    color: rgb(152, 152, 158) !important;
}

.contact-button.light:focus .contact-button-label {
    color: white !important;
}

.contact-button.night:focus .contact-button-label {
    color: white !important;
}

.contact-button:focus .contact-button-label {
    color: white !important;
}

.contact-button-image {
    position: absolute;
    height: 3.5rem;
    width: 3.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

.contact-button-label {
    position: absolute;
    bottom: 0;
    height: 1.25rem;
    width: 100%;
    margin: 0;
    padding: .15em 0 0 0;
    font-size: .7rem;
    text-decoration: underline;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    pointer-events: none;
}

#fw-contact-detail-container {
    flex: 1;
    width: 100%;
    margin-top: 0;
}

#fw-contact-detail-container>.b-d-bar {
    margin: 1em 0;
    width: calc(100% - 0em);
    padding: 0 .25em;
}

#fw-contact-availability {
    width: 100%;
    text-align: center;
    font-size: .8em;
    margin: 2em 0 1em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

#fw-contact-availability.no-measure {
    margin-top: -1em;
}

#fw-contact-availability-dot {
    position: relative;
    left: calc(50% - .25em);
    height: .5em;
    width: .5em;
    border-radius: 100%;
}

#fw-contact-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-top: .75em;
    padding: 0 .75em 5em .75em;
    overflow-x: hidden;
}

.contact-detail-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 3.5em;
    max-width: 20em;
    width: 100%;
    margin: 1em;

    border: .1em solid;
}

.contact-detail-box .b-d-bar-vertical {
    position: absolute;
    left: -1.25rem;
    height: calc(100% + .2em);
    max-width: 1em;
}

.contact-detail-box .b-d-bar-horizontal {
    position: absolute;
    bottom: -1.35rem;
    width: calc(100% + .1em);
    max-height: 1em;
}

.contact-detail-box.light:hover,
.contact-detail-box.light:hover .contact-detail-descriptor {
    border-color: rgb(15, 15, 21) !important;
}

.contact-detail-box.night:hover,
.contact-detail-box.night:hover .contact-detail-descriptor {
    border-color: rgb(152, 152, 158) !important;
}

.contact-detail-box.light:hover .b-d-value {
    color: black !important;
}

.contact-detail-box.light:hover .b-d-line {
    border-color: black !important;
}

.contact-detail-box.light:hover .b-d-seperator-one,
.contact-detail-box.light:hover .b-d-seperator-two {
    border-color: black !important;
}

.contact-detail-box.night:hover .b-d-value {
    color: rgb(152, 152, 158) !important;
}

.contact-detail-box.night:hover .b-d-line {
    border-color: rgb(152, 152, 158) !important;
}

.contact-detail-box.night:hover .b-d-seperator-one,
.contact-detail-box.night:hover .b-d-seperator-two {
    border-color: rgb(152, 152, 158) !important;
}

.contact-detail-box.light:hover .contact-detail-descriptor {
    color: rgb(15, 15, 21) !important;
}

.contact-detail-box.night:hover .contact-detail-descriptor {
    color: rgb(152, 152, 158) !important;
}

.contact-detail-descriptor {
    align-self: flex-start;
    position: absolute;
    left: 19.9rem;
    top: .25rem;
    padding-left: .2rem;
    width: 100%;

    font-size: .75em;
    text-transform: uppercase;
    border: none;
    border-bottom: .1rem solid;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.contact-detail-anchor,
.contact-detail-text {
    font-size: .8em;
    margin: 0;
    padding: 1em;
}

.contact-detail-anchor {
    flex: 1;
    width: 100%;
    padding-top: 1.5em;
    text-align: center;
    text-decoration: none;
}

.contact-detail-text {
    flex: 1;
    width: 100%;
    white-space: pre-wrap;
}

.contact-detail-text.center {
    padding-top: 1.5em;
    text-align: center;
}

.contact-detail-text.left {
    align-self: flex-start;
}

.contact-detail-anchor-standalone {
    font-size: .8em;
    margin: .75rem 0;
    text-decoration: none;
}

.contact-detail-anchor-standalone:first-of-type {
    margin-top: 4em;
}

.contact-detail-anchor:hover,
.contact-detail-anchor-standalone:hover {
    text-decoration: underline;
}

.contact-detail-anchor.light:active,
.contact-detail-anchor-standalone.light:active {
    filter: brightness(75%);
}

.contact-detail-anchor.night:active,
.contact-detail-anchor-standalone.night:active {
    filter: brightness(125%);
}

.contact-detail-social-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 15rem;
    margin-top: 4rem;
}

.contact-detail-social-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 48px;
    width: 48px;
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: transform .2s ease-out;
}

.contact-detail-social-wrapper button:active {
    transform: scale(.95);
}

.contact-detail-social-wrapper button:focus {
    background-color: rgb(200, 45, 70);
    border-radius: 100%;
    outline: none;
}

.contact-detail-social-wrapper button:focus img {
    filter: invert(1);
    opacity: 1;
}

.contact-detail-social-wrapper button img {
    width: 75%;
    opacity: .6;
    pointer-events: none;
}

.contact-detail-social-wrapper.night button img {
    opacity: .5;
    filter: invert(1);
}

/***** ----- AV PLAYER ----- *****/

.fw-player-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
    height: 1.75em;
    padding: 0 .75em;
    z-index: 3;
}

.fw-player-container:hover+.fw-player-nowplaying-wrapper,
.fw-player-nowplaying-wrapper.focused {
    transform: translate(-50%, -110%);
    opacity: 1;
}

.fw-player-button:first-of-type {
    margin-left: .35em;
}

.fw-player-button:last-of-type {
    margin-right: .35em;
}

.fw-player-button {
    flex-shrink: 0;
    font-size: 1em;
    height: 1.75em;
    width: 1.75em;
    max-height: 1.75em;
    max-width: 1.75em;
    margin: 0 .25em;
    background-color: transparent;
    border: none;
    outline: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.fw-player-button:focus {
    border-radius: 100%;
    border: .1em solid rgb(200, 45, 70);
}

.fw-player-button.night {
    filter: brightness(150%);
}

.fw-player-button.light:active:not(.fw-player-volume-button) {
    filter: brightness(70%);
}

.fw-player-button.night:active:not(.fw-player-volume-button) {
    filter: brightness(130%);
}

.fw-player-playpause-button.play {
    background-image: url("assets/glyph-play.svg");
}

.fw-player-playpause-button.pause {
    background-image: url("assets/glyph-pause.svg");
}

.fw-player-stop-button {
    margin-right: .35em;
}

.fw-player-next-button {
    margin-left: .1em;
}

.fw-player-volume-button {
    position: relative;
    border: .1em solid transparent;
    z-index: 10;
}

.fw-player-volume-button.muted {
    background-image: url("assets/glyph-mute.svg") !important;
}

.fw-player-volume-button.focused {
    border-radius: 0;
    background-size: 75%;
}

.fw-player-scrubber {
    flex: 1;
    min-width: 3em;
    background: transparent;
    -webkit-appearance: none;
    transition: transform .1s ease-in-out;
    margin: 0 1em;
    padding: 1em 0;
}

.fw-player-scrubber:focus {
    outline: none;
}

.fw-player-scrubber::-ms-track {
    flex: 1;
    cursor: pointer;

    background: transparent;
    border-color: transparent;
    color: transparent;
}

.fw-player-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: -.45em;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    background-color: rgb(90, 90, 96);
    transition: transform .1s ease-in-out;
}

.fw-player-scrubber::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.fw-player-scrubber::-webkit-slider-thumb:active {
    transform: scale(1.25);
    filter: contrast(200%);
}

.fw-player-scrubber.night::-webkit-slider-thumb {
    filter: brightness(150%);
}

.fw-player-scrubber.night::-webkit-slider-thumb:active {
    filter: brightness(130%);
}

.fw-player-scrubber::-webkit-slider-runnable-track {
    width: 100%;
    height: .1rem;
    cursor: default;
}

.fw-player-scrubber.light::-webkit-slider-runnable-track {
    background: rgb(150, 150, 156);
}

.fw-player-scrubber.night::-webkit-slider-runnable-track {
    background: rgb(60, 60, 66);
}

.fw-player-scrubber::-moz-range-thumb {
    -moz-appearance: none;
    position: relative;
    top: -.45em;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    border: none;
    background-color: rgb(90, 90, 96);
    transition: transform .1s ease-in-out;
}

.fw-player-scrubber::-moz-range-thumb:active {
    transform: scale(1.25);
}

.fw-player-scrubber.night::-moz-range-thumb {
    filter: brightness(150%);
}

.fw-player-scrubber.night::-moz-range-thumb:active {
    filter: brightness(130%);
}

.fw-player-scrubber::-moz-range-thumb:hover {
    -moz-transform: scale(1.25);
    transform: scale(1.25);
    filter: brightness(130%);
}

.fw-player-scrubber::-moz-range-track {
    width: 100%;
    height: .1rem;
    cursor: default;
}

.fw-player-scrubber.light::-moz-range-track {
    background: rgb(150, 150, 156);
}

.fw-player-scrubber.night::-moz-range-track {
    background: rgb(60, 60, 66);
}

.fw-player-scrubber::-ms-thumb {}

.fw-player-volume-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -.85em;
    left: .80em;
    transform-origin: left;
    transform: rotate(-90deg);
    width: 7em;
    height: 1.75em;
    border: .1em solid;
}

.fw-player-volume-slider {
    position: relative;
    width: 8.5em;
    background: transparent;
    -webkit-appearance: none;
    transition: transform .1s ease-in-out;
}

.fw-player-volume-slider:focus {
    outline: none;
}

.fw-player-volume-slider::-ms-track {
    flex: 1;
    cursor: pointer;

    background: transparent;
    border-color: transparent;
    color: transparent;
}

.fw-player-volume-slider::-webkit-slider-thumb {
    position: relative;
    top: calc(-.4em - 55%);
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    background-color: rgb(90, 90, 96);
    transition: transform .1s ease-in-out;
}

.fw-player-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.fw-player-volume-slider::-webkit-slider-thumb:active {
    transform: scale(1.25);
    filter: contrast(200%);
}

.fw-player-volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: .1rem;
    cursor: default;
}

.fw-player-volume-slider.light::-webkit-slider-runnable-track {
    background: rgb(150, 150, 156);
}

.fw-player-volume-slider.night::-webkit-slider-runnable-track {
    background: rgb(60, 60, 66);
}

.fw-player-volume-slider::-moz-range-thumb {
    position: relative;
    top: calc(-.4em - 55%);
    -moz-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    border: none;
    background-color: rgb(90, 90, 96);
    transition: transform .1s ease-in-out;
}

.fw-player-volume-slider::-moz-range-thumb:hover {
    -moz-transform: scale(1.25);
    transform: scale(1.25);
    filter: brightness(130%);
}

.fw-player-volume-slider::-moz-range-thumb:active {
    transform: scale(1.25);
    filter: contrast(200%);
}

.fw-player-volume-slider::-moz-range-track {
    width: 100%;
    height: .1rem;
    cursor: default;
}

.fw-player-volume-slider.light::-moz-range-track {
    background: rgb(150, 150, 156);
}

.fw-player-volume-slider.night::-moz-range-track {
    background: rgb(60, 60, 66);
}

.fw-player-volume-slider::-ms-thumb {}

.fw-player-fullscreen-button {
    margin-left: .5em;
    background-size: 80%;
}

.fw-player-viewer-button {
    border-radius: .5em;
}

.fw-player-nowplaying-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 1em;
    transform: translate(-50%, 0);
    height: 3.5em;
    max-width: calc(100% - 3.5em);
    padding: 0 1.25em;

    overflow: hidden;
    opacity: 0;
    border: .1em solid;
    border-radius: 1em;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .3);
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    pointer-events: none;
    will-change: transform;
    z-index: 2;
}

.fw-player-nowplaying-wrapper.light {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .3);
}

.fw-player-nowplaying-wrapper.night {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .65);
}

.fw-player-nowplaying-detail-title {
    width: 100%;
    height: 1rem;
    font-size: .8em;
    text-align: center;
    margin: 0 0 .35rem 0;
    padding: 0;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fw-player-nowplaying-detail-wrapper {
    display: flex;
    flex-direction: row;
    height: 1rem;
    width: 100%;
    font-size: .75em;
}

.fw-player-nowplaying-detail-time {
    margin: 0;
    padding: 0;
    width: 5em;
}

.fw-player-nowplaying-detail-currenttime {
    text-align: left;
}

.fw-player-nowplaying-detail-remainingtime {
    text-align: right;
}

.fw-player-nowplaying-detail-label {
    flex: 1;
    min-width: 10em;
    text-align: center;
    margin: 0;
    padding: 0 0 .5rem 0;
}

#content-container .fw-player-container {
    padding: 1.25em 1em;
}

/***** ----- NAVIGATOR ----- *****/

.fw-navigator-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 1.75em;
    padding: 0 .5em;
    flex-wrap: nowrap;
}

.fw-navigator-button {
    font-size: 1em;
    height: 1.75em;
    width: 1.75em;
    background-color: transparent;
    border: none;
    outline: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.fw-navigator-button.night {
    filter: brightness(150%);
}

.fw-navigator-button:focus {
    border-radius: 100%;
    border: .1em solid rgb(200, 45, 70);
}

.fw-navigator-button.light:active {
    filter: brightness(70%);
}

.fw-navigator-button.night:active {
    filter: brightness(130%);
}

.fw-navigator-button:active:disabled {
    filter: none;
}

.fw-navigator-button:disabled {
    opacity: .5;
}

#fw-navigator-button-previous {
    margin: 0 .75em;
    background-image: url("assets/glyph-prev.svg");
}

#fw-navigator-button-new-tab {
    margin: 0 .75em;
    background-image: url("assets/glyph-tab.svg");
}

#fw-navigator-button-monoshift {
    margin: 0 .75em;
    background-image: url("assets/glyph-monoshift.svg");
}

#fw-navigator-button-next {
    margin: 0 .75em;
    background-image: url("assets/glyph-next.svg");
}

/***** ----- VIEWER ----- *****/

#fw-viewer {
    display: flex;
    flex-direction: column;
    position: absolute;
    transform: translateY(100%);
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    padding: .25em;

    z-index: 100;
    will-change: transform;
    overflow: hidden;
}

#fw-viewer-display-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    max-width: 100%;
    margin-bottom: 1em;
}

#fw-viewer-display-container .b-spinner {
    height: 3rem;
    width: 3rem;
    left: calc(50% - 2em);
    top: calc(50% - 2em);
}

#fw-viewer-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    max-height: 100%;
    max-width: 100%;
}

#fw-viewer-display-wrapper>.b-d-bar {
    width: calc(100% - 19px);
}

#fw-viewer-display {
    display: flex;
    flex-direction: row;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    margin-top: .4em;
}

#fw-viewer-display>.b-d-bar {
    height: auto;
}

#fw-viewer-display-panel {
    max-width: calc(100% - 1.15em);
    max-height: 100%;
    height: auto;
    width: auto;
    margin: 0 0 0 .4em;
}

#fw-viewer-display-panel .b-d-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

#fw-viewer-display-panel .b-d-content.light.data-light {
    background-color: rgb(202, 202, 208) !important;
}

#fw-viewer-display-panel .b-d-content.night.data-night {
    background-color: rgb(30, 30, 36) !important;
}

#fw-viewer-display-panel .viewer-placeholder::before {
    content: "Cinema is playing video in fullscreen.\A Click this pane to exit.";
    white-space: pre;
}

#fw-viewer-display-panel .viewer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    max-width: 100%;
    font-size: .75em;
    text-align: center;
    z-index: 1;
    transition: color .2s ease-in-out;
}

#fw-viewer-display-panel .viewer-placeholder.light:hover {
    cursor: pointer;
    color: black !important;
}

#fw-viewer-display-panel .viewer-placeholder.night:hover {
    cursor: pointer;
    color: rgb(152, 152, 158) !important;
}

#fw-viewer-display-panel.viewer-preview img {
    display: block;
    object-fit: scale-down;
    width: 100%;
    height: auto;
    max-height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fw-viewer-display-panel.viewer-preview img.svg {
    object-fit: cover;
}

#fw-viewer-display-panel.viewer-preview img.tall {
    object-fit: contain;
}

#fw-viewer-display-panel.viewer-audio img {
    object-fit: contain;
    max-height: 474px;
    max-width: 474px;
}

#fw-viewer-display-panel.viewer-audio img.tall {
    height: 100%;
}

#fw-viewer-display-panel.viewer-audio img.wide {
    width: 100%;
}

#fw-viewer-display-panel.viewer-audio img.square {
    height: 100%;
    width: 100%;
}

#fw-viewer-display-panel.viewer-cinema video {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    pointer-events: none;
}

#fw-viewer-display-panel .b-d-descriptor:before {
    text-align: left;
    text-transform: uppercase;
}

#fw-viewer-display-panel.viewer-cinema .b-d-descriptor:before {
    content: "CINEMA";
}

#fw-viewer-display-panel.viewer-audio .b-d-descriptor:before {
    content: "AUDIO";
}

#fw-viewer-display-panel.viewer-preview .b-d-descriptor:before {
    content: "PREVIEW";
}

#fw-viewer-display-panel.viewer-reader .b-d-descriptor:before {
    content: "READER";
}

#fw-viewer-display-panel .b-d-descriptor {
    left: calc(100% - .75em);
}

#fw-viewer-controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fw-viewer-controls-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 51.3em;
    width: 100%;
}

#fw-viewer-controls-wrapper>.b-d-bar {
    width: calc(100% - 20px);
}

#fw-viewer-controls {
    width: 100%;
    margin-bottom: .4em;
    display: flex;
    flex-direction: row;
}

#fw-viewer-controls>.b-d-bar {
    height: auto;
}

#fw-viewer-controls-panel {
    flex: 1;
    margin: 0 0 0 .4em;
}

#fw-viewer-controls-panel .b-d-content {
    display: flex;
    flex-direction: row;
    height: 3.5em;
    transition: height ease-in-out .2s;
}

#fw-viewer-controls-panel .b-d-content.light {
    background-color: white !important;
}

#fw-viewer-controls-panel .b-d-content.night {
    background-color: rgb(6, 6, 10) !important;
}

#fw-viewer-controls-panel .b-d-content:hover {
    height: 4.25em;
}

#fw-viewer-controls-panel .b-d-content:hover .controls-title {
    transform: scale(1.15);
    margin-bottom: -.4rem;
}

#fw-viewer-controls-panel .b-d-content:hover .controls-button-label {
    opacity: 1;
}

#fw-viewer-controls-panel .b-d-content:hover .controls-button-dropdown {
    bottom: 4.75rem;
}

#fw-viewer-controls-panel .controls-info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.controls-info-wrapper .controls-title-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-info-wrapper .controls-title {
    flex: 1;
    height: 1.5em;
    margin: 0;
    padding: 0 .75rem;
    font-size: .85em;
    text-align: center;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    transition: transform .2s ease-in-out, margin ease-in-out .2s;
}

.controls-info-wrapper .controls-subtitle-wrapper {
    display: flex;
    flex-direction: row;
    height: 1.25rem;
}

.controls-subtitle-wrapper .controls-subtitle-side {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 5em;
    font-size: .7em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.controls-subtitle-wrapper .controls-subtitle-side.light:hover {
    cursor: default;
    color: black !important;
}

.controls-subtitle-wrapper .controls-subtitle-side.night:hover {
    cursor: default;
    color: rgb(152, 152, 158) !important;
}

.controls-subtitle-wrapper #controls-subtitle-left {
    justify-content: flex-start;
    padding-left: .5rem;
}

.controls-subtitle-wrapper #controls-subtitle-right {
    justify-content: flex-end;
    padding-right: .5rem;
}

.controls-subtitle-wrapper .controls-subtitle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: .8em;
    font-weight: normal;
}

#fw-viewer-controls-panel .controls-button-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
}

.controls-button-wrapper>.controls-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 4.25rem;
    position: relative;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    border-left: .1em solid;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#fw-viewer-controls-panel .controls-button.disabled {
    pointer-events: none;
}

#fw-viewer-controls-panel .controls-button.disabled>.controls-button-image {
    opacity: .5;
}

#fw-viewer-controls-panel:hover .controls-button.disabled>.controls-button-label {
    opacity: .5 !important;
}

.controls-button-wrapper>.controls-button.invisible-absolute {
    display: none;
}

.controls-button-wrapper>.controls-button.focused.light {
    background-color: rgb(240, 240, 246) !important;
}

.controls-button-wrapper>.controls-button.focused.night {
    background-color: rgb(28, 28, 34) !important;
}

.controls-button-wrapper>.controls-button.focused.light .controls-button-image {
    filter: brightness(75%);
}

.controls-button-wrapper>.controls-button.focused.night .controls-button-image {
    filter: brightness(175%);
}

.controls-button-wrapper>.controls-button.focused.light .controls-button-label {
    color: black !important;
}

.controls-button-wrapper>.controls-button.focused.night .controls-button-label {
    color: rgb(152, 152, 158) !important;
}

.controls-button-wrapper>.controls-button:hover {
    cursor: pointer;
}

.controls-button-wrapper>.controls-button.light:hover {
    background-color: rgb(249, 249, 255);
}

.controls-button-wrapper>.controls-button.night:hover {
    background-color: rgb(21, 21, 27);
}

.controls-button-wrapper>.controls-button.light:active {
    background-color: rgb(240, 240, 246);
}

.controls-button-wrapper>.controls-button.night:active {
    background-color: rgb(28, 28, 34);
}

.controls-button-wrapper>.controls-button.light:focus {
    background-color: rgb(200, 45, 70);
}

.controls-button-wrapper>.controls-button.night:focus {
    background-color: rgb(200, 45, 70);
}

.controls-button-wrapper>.controls-button.light:focus .controls-button-image {
    filter: brightness(300%);
}

.controls-button-wrapper>.controls-button.night:focus .controls-button-image {
    filter: brightness(300%);
}

.controls-button-wrapper>.controls-button.light:active .controls-button-image {
    filter: brightness(75%);
}

.controls-button-wrapper>.controls-button.night:active .controls-button-image {
    filter: brightness(175%);
}

.controls-button-wrapper>.controls-button.light:hover .controls-button-label {
    color: black !important;
}

.controls-button-wrapper>.controls-button.night:hover .controls-button-label {
    color: rgb(152, 152, 158) !important;
}

.controls-button-wrapper>.controls-button.light:focus .controls-button-label {
    color: white !important;
}

.controls-button-wrapper>.controls-button.night:focus .controls-button-label {
    color: white !important;
}

.controls-button>.controls-button-image {
    position: relative;
    height: 3.5rem;
    width: 4.25rem;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    pointer-events: none;
}

.controls-button.night>.controls-button-image {
    filter: brightness(150%);
}

.controls-button>.controls-button-label {
    position: absolute;
    bottom: 0;
    height: 1.25rem;
    width: 4.25rem;
    margin: 0;
    padding: .15em 0 0 0;
    font-size: .7rem;
    text-decoration: underline;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    pointer-events: none;
}

.controls-button .controls-button-dropdown {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    bottom: 4rem;
    max-height: calc(100vh - 10em);
    height: auto;
    max-width: 225px;
    width: 100%;
    min-width: 225px;
    padding-bottom: 1rem;
    border-radius: 1rem;
    transition: bottom .2s ease-in-out;
}

.controls-button .controls-button-dropdown:hover {
    cursor: default;
}

.controls-button-dropdown .controls-dropdown-tableview {
    height: calc(100% - 1rem);
    overflow-y: scroll;
    margin-bottom: 1rem;
    border: .2em solid;
    border-radius: 1rem;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .2);
}

.controls-button-dropdown .controls-dropdown-tableview.night {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .65);
}

.controls-button .controls-dropdown-tableview.transition {
    box-shadow: none !important;
}

.controls-button-dropdown .controls-dropdown-tableview-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1.95rem;
    width: 100%;
    border-bottom: .1em solid;
    font-size: .8rem;
}

.controls-button-dropdown .controls-dropdown-tableview-cell:last-of-type {
    border: none;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button {
    height: 1.95rem;
    outline: none;
    border: none;
    border-bottom: .1em solid;
    background-color: transparent;
    text-decoration: underline;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.light:hover {
    background-color: rgb(249, 249, 255);
    color: black !important;
    cursor: pointer;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.night:hover {
    background-color: rgb(21, 21, 27);
    color: rgb(152, 152, 158) !important;
    cursor: pointer;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.light:active {
    background-color: rgb(240, 240, 246);
    color: black;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.night:active {
    background-color: rgb(28, 28, 34);
    color: rgb(152, 152, 158);
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.light:focus {
    background-color: rgb(200, 45, 70);
    color: white !important;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.night:focus {
    background-color: rgb(200, 45, 70);
    color: white !important;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.light:focus:active {
    background-color: rgb(240, 240, 246);
    color: black;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button.night:focus:active {
    background-color: rgb(28, 28, 34);
    color: rgb(152, 152, 158);
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-button:last-of-type {
    border: none;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-text {
    margin: 0;
    padding: 0;
}

.controls-button-dropdown .controls-dropdown-tableview-cell.cell-text.description {
    padding: .5rem;
}

.controls-button-dropdown-tail-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    bottom: 1rem;
    width: 100%;
    height: 1rem;
}

.controls-button-dropdown-tail-wrapper .controls-button-dropdown-tail {
    width: 0;
    height: 0;
    border-left: .75rem solid transparent !important;
    border-right: .75rem solid transparent !important;
    border-top: 1rem solid;
    border-bottom: none;
}

#fw-viewer-controls-panel .b-d-descriptor {
    display: none;
}

#fw-viewer-controls-panel .b-d-content {
    margin-top: .25em;
}

#fw-viewer-controls-panel.viewer-cinema .fw-player-container,
#fw-viewer-controls-panel.viewer-audio .fw-player-container,
#fw-viewer-controls-panel.viewer-preview .fw-navigator-container {
    position: absolute;
    top: -.8em;
    width: calc(100% - 3.75em);
}

@media (max-width: 1524px) {

    #fw-panel-header .b-d-descriptor,
    #fw-panel-detail .b-d-descriptor,
    #fw-panel-content .b-d-descriptor {
        display: none;
    }

    #content-backdrop:before {
        content: "Use start panel to load content.";
    }
}

@media (max-width: 1338px) {
    .fw-central-flex {
        position: absolute;
        visibility: hidden;
    }

    #fw-panel-wrapper {
        margin-right: .125em;
        margin-left: 0;
    }

    #fw-content-wrapper {
        margin-right: 0;
        margin-left: .125em;
    }
}

@media (max-width: 830px) {

    #fw-viewer-controls>.b-d-bar,
    #fw-viewer-display>.b-d-bar {
        display: none;
    }

    #fw-viewer-controls-panel {
        margin: 0;
        max-width: none;
    }

    #fw-viewer-display-panel {
        margin: 0;
    }

    #fw-viewer-controls-wrapper>.b-d-bar,
    #fw-viewer-display-wrapper>.b-d-bar {
        width: 100%;
    }
}

@media (max-width: 725px) {
    #fw-center-wrapper>div:last-child>div:nth-of-type(2) {
        display: none;
    }

    #fw-center-wrapper {
        min-width: 0;
    }
}

@media (max-width: 712px) {

    #fw-center-wrapper,
    #fw-center-wrapper>div:first-child {
        min-width: 0;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1) {
        display: none;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(4) {
        width: 100%;
        margin-left: -.25em;
    }
}

@media (max-width: 694px) {
    #fw-center-wrapper {
        margin-left: .2em;
        margin-right: .2em;
    }

    #fw-center-wrapper .b-d-bar {
        display: none;
    }
}

@media (max-width: 675px) {
    #fw-central-wrapper {
        justify-content: space-between;
    }

    #fw-center-wrapper {
        display: none;
    }

    .fw-central-flex {
        display: none;
    }

    #fw-panel-wrapper {
        flex: 1;
        max-width: calc(20em + 3px);
    }

    #fw-content-wrapper {
        max-width: calc(20em + 3px);
        min-width: calc(20em + 3px);
    }
}

@media (max-width: 667px) {
    #outer-upper-bar {
        padding-left: .25em;
    }

    #outer-lower-bar {
        padding-top: .25em;
    }

    #fw-content-wrapper {
        margin-right: -1px;
    }

    .fw-central-flex {
        display: none;
    }

    #fw-panel-wrapper.no-measure {
        width: calc(100% + .8em);
    }

    #fw-content-wrapper.no-measure {
        width: calc(100% + .8em);
        margin-left: -.45em;
        margin-bottom: .5em;
    }
}

@media (max-width: 666px) {
    #fw-panel-content.mobile.minimal #content-container.light {
        border-top: .1em solid rgb(150, 150, 156) !important;
    }

    #fw-panel-content.mobile.minimal #content-container.night {
        border-top: .1em solid rgb(60, 60, 66) !important;
    }

    #fw-panel-content.minimal .b-d-content.light {
        border-bottom: .1em solid rgb(150, 150, 156) !important;
    }

    #fw-panel-content.minimal .b-d-content.night {
        border-bottom: .1em solid rgb(60, 60, 66) !important;
    }

    .b-d-descriptor {
        display: flex;
    }

    #fw-central-wrapper {
        flex-direction: column;
        align-items: center;
        transform: translateX(-2px);
        margin-left: .25em;
    }

    #fw-panel-wrapper {
        flex: none;
        max-width: 30em;
        width: 100%;
        margin: 0;
    }

    #fw-panel-wrapper.no-measure {
        margin-bottom: 1.05em;
    }

    #fw-panel-wrapper.no-measure #fw-panel-header {
        margin-bottom: .25em;
    }

    #fw-panel-header {
        max-width: none;
    }

    #fw-panel-wrapper .b-d-box {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #fw-panel-header .b-d-square-bot-left,
    #fw-panel-header .b-d-square-bot-right {
        display: none;
    }

    #header-mobile-button {
        height: 3.9em;
    }

    .load-content {
        transform: rotate(90deg);
        top: -.05em;
    }

    #fw-panel-detail,
    #fw-panel-footer {
        display: none;
    }

    #fw-center-wrapper {
        display: flex;
        position: absolute;
        bottom: .25em;
        height: calc(100% - 1.5em);
        transform: translateX(16.15em);
    }

    #fw-center-wrapper .b-d-bar {
        display: flex;
    }

    #fw-center-wrapper>.b-d-bar {
        display: none;
    }

    #fw-center-wrapper>div:last-child {
        margin: 0;
        margin-top: 1px;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1) {
        display: flex;
        overflow: hidden;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1)>div:first-child {
        margin-bottom: 0;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1)>div:last-child {
        margin-top: 0;
        margin-bottom: 0;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1)>div:last-child .b-d-seperator-one {
        display: none;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(1)>div:last-child .b-d-arrow-one {
        padding-top: .65em;
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(4) {
        width: .6em;
        margin: 0;
        height: calc(100% + .5px);
    }

    #fw-content-wrapper {
        flex: 1;
        max-width: 30em;
        width: 100%;
        margin: 0;
    }

    #fw-content-wrapper .b-d-box {
        padding-top: 0;
        margin-top: 0;
    }

    #content-container {
        border-top: none !important;
    }

    #fw-content-wrapper .b-d-bar {
        display: none;
    }

    #fw-panel-content .b-d-descriptor:before {
        text-align: right;
    }

    #fw-panel-content .b-d-descriptor {
        right: calc(100% - .75em);
        left: auto;
    }

    #fw-panel-content .b-d-square-top-left,
    #fw-panel-content .b-d-square-top-right {
        display: none;
    }

    #fw-panel-content .b-navbar {
        display: none;
    }
}

@media (max-width: 642px) {
    #fw-contact {
        top: auto;
        bottom: 0;
        transform: translate(-50%, 0%);

        max-width: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: calc(100% - 3em);
    }

    #fw-contact-button-wrapper:hover {
        min-height: 3.5em;
    }

    #fw-contact-button-wrapper:hover .contact-button-label {
        opacity: 0;
    }

    #fw-contact-detail {
        padding-bottom: 2em;
    }

    .contact-detail-box .b-d-bar-vertical {
        display: none;
    }

    .contact-detail-anchor-standalone:first-of-type {
        margin-top: 2.75em;
    }

    .contact-detail-social-wrapper {
        width: 16.5em;
        margin-top: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .contact-detail-social-wrapper button {
        height: 64px;
        width: 64px;
    }
}

@media (max-width: 568px) {
    #combo-d-bar {
        display: none;
    }
}

@media (max-width: 558px) {
    #fw-center-wrapper {
        transform: translateX(15.85em);
    }

    #fw-center-wrapper>div:last-child>div:nth-of-type(4) {
        display: none;
    }
}

@media (max-width: 539px) {
    .b-d-descriptor:not(#fw-viewer-display-panel .b-d-descriptor) {
        display: none;
    }
}

@media (max-width: 532px) {
    #fw-center-wrapper {
        display: none;
    }
}

@media (max-width: 488px) {
    .fw-player-prev-button {
        display: none;
    }

    #fw-viewer-controls-wrapper .b-d-bar,
    #fw-viewer-display>.b-d-bar {
        display: none;
    }

    #fw-viewer-controls-panel {
        margin: 0 0 .75em 0;
    }

    #fw-viewer-display-panel {
        max-width: 100%;
        margin-left: 0;
    }

    #fw-viewer-controls-panel .b-d-content {
        flex-direction: column;
    }

    #fw-viewer-controls-panel .b-d-content.minimal .controls-button {
        background-color: transparent;
    }

    #fw-viewer-controls-panel .b-d-content:hover {
        height: 3.5em;
    }

    #fw-viewer-controls-panel .b-d-content:hover .controls-title {
        transform: none;
        margin-bottom: 0;
    }

    #fw-viewer-controls-panel .b-d-content:hover .controls-button-dropdown {
        bottom: 5.25rem;
    }

    #fw-viewer-controls-panel .controls-button-wrapper {
        position: absolute;
        bottom: -.5em;
        left: 50%;
        height: 2.75rem;
        width: 100%;
        transform: translateX(-50%);
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

    .controls-button-wrapper>.controls-button {
        flex-direction: column;
        align-items: center;
        height: 2.75rem;
        width: 2.75rem;
        margin: 0 .5rem;
        border: .2em solid;
        border-radius: 100%;
    }

    .controls-button.light {
        background-color: white;
    }

    .controls-button-wrapper>.controls-button.night {
        background-color: rgb(6, 6, 10);
    }

    .controls-button>.controls-button-image {
        height: 2.75rem;
        width: 2.75rem;
        background-size: 60%;
    }

    .controls-button>.controls-button-label {
        display: none !important;
    }

    .controls-info-wrapper .controls-subtitle-wrapper {
        justify-content: space-between;
    }

    .controls-subtitle-wrapper .controls-subtitle {
        display: none;
    }

    .controls-button .controls-button-dropdown {
        position: fixed;
        bottom: 5.25rem;
        left: 50%;
        max-height: calc(100vh - 25em);
        transform: translateX(-50%);
    }

    .contact-detail-descriptor {
        display: none;
    }
}

@media (max-width: 380px) {
    #fw-center-wrapper {
        display: none;
    }

    #fw-mobile-detail-frame {
        padding: 1rem 1rem 1rem 1rem;
    }

    #fw-mobile-detail-frame .detail-heading {
        font-size: 1.15rem;
    }
}

@media (max-width: 349px) {
    #fw-outer-upper .b-d-arrow-one {
        display: block;
    }

    #fw-outer-upper,
    #outer-lower-bar {
        display: none;
    }

    #fw-outer-lower {
        padding-left: .25em;
        padding-right: .25em;
    }

    #fw-central-wrapper {
        transform: translateX(0);
        margin-left: auto;
        margin-right: auto;
        max-width: 320px;
        width: 100%;
        min-width: 310px;
        height: 100%;
    }

    #fw-content-wrapper {
        max-width: calc(20em + 3px);
        width: 100%;
        min-width: 0;
    }

    #fw-panel-wrapper>.b-d-bar {
        margin-top: .5em;
        width: 100%;
    }

    #fw-panel-header,
    #fw-panel-content {
        margin-left: 0;
        margin-right: 0;
    }

    #fw-central-wrapper.no-measure {
        transform: none;
        margin: 0 -.1em 0 .1em;
        padding: 0;
        max-width: none;
        width: 100%;
        min-width: 310px;
        height: calc(100% + .55em);
    }

    #fw-panel-wrapper.no-measure {
        margin-top: -.15em;
        margin-right: -.25em;
        width: calc(100% - .1em);
    }

    #fw-content-wrapper.no-measure {
        margin-right: -.25em;
        width: calc(100% - 2px);
        max-width: none;
    }
}

@media (max-width: 317px) {
    #fw-warning-wrapper:before {
        content: "Minimum supported width reached.\A Please make window wider.";
    }

    #fw-warning-wrapper {
        display: flex;
    }

    @media (max-height: 344px) {
        #fw-warning-wrapper:before {
            content: "Minimum supported size reached.\A Please make window bigger." !important;
        }

        #fw-warning-wrapper {
            display: flex;
        }
    }

    .b-d-bar {
        display: none;
    }
}

@media (max-height: 802px) {
    #fw-contact {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-top: 1.5rem;
        height: calc(100% - 3rem);
    }
}

@media (max-height: 773px) {
    #fw-panel-footer {
        display: none;
    }
}

@media (max-height: 530px) {
    #fw-viewer-controls-wrapper>.b-d-bar {
        display: none;
    }

    #fw-viewer-controls-panel {
        margin-bottom: -.35em;
    }
}

@media (max-height: 459px) {
    #fw-panel-detail {
        display: none;
    }

    @media (min-width: 666px) {

        #fw-center-wrapper>div:last-child>div:first-of-type>div:last-of-type,
        #fw-center-wrapper>div:last-child>div:nth-of-type(2) {
            display: none;
        }
    }
}

@media (max-height: 344px) {
    @media (min-width: 317px) {
        #fw-warning-wrapper:before {
            content: "Minimum supported height reached.\A Please make window taller.";
        }

        #fw-warning-wrapper {
            display: flex;
        }

        .b-d-bar {
            display: none;
        }
    }
}

@media only screen and (min-device-height: 0px) and (max-device-height: 466px) and (orientation: portrait) {
    #fw-warning-wrapper:before {
        content: "Portrait on this device is not supported.\A Please rotate your smartphone.";
    }

    #fw-warning-wrapper {
        display: flex;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 640px) and (min-device-height: 0px) and (max-device-height: 466px) and (orientation: landscape) {
    #fw-warning-wrapper:before {
        content: "Landscape on this device is not supported.\A Please rotate your smartphone.";
    }

    #fw-warning-wrapper {
        display: flex;
    }
}