/**
 * public.css
 *
 * CSS for public screens
 *
 * CSS 3
 *
 * @category  None
 * @package   /
 * @author    Rick Morice <rick@floor9design.com>
 * @copyright madefortrade.co - AANCO (UK) Limited
 * @license   Proprietary software
 * @link      https://github.com/floor9design-ltd/home-api.co
 * @version   0.1.0
 * @since     File available since Release 1.0
 */

@font-face {
    font-family: "din-2014-regular";
    src: url("/fonts/5357DIN-2014-Regular.woff2") format("woff2"),
        url("/fonts/5357DIN-2014-Regular.woff") format("woff");
    font-display: auto;
}

@font-face {
    font-family: "din-2014-extra-bold";
    src: url("/fonts/DIN-2014_Extra-Bold.woff") format("woff");
    font-display: auto;
}

body {
    font-family: "din-2014-regular", Georgia, "Times New Roman", serif;
    margin: 0;
    color: #4d4d4d;
    background-color: #efefef;
    box-sizing: border-box;
}

/* Basic framing */

.width-container {
    width: 95%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.section-padding {
    padding: 1.5vh;
}

.flex-container,
.flex-splash-container,
.flex-product-container,
.flex-dashboard-container {
    display: flex;
    flex-direction: row;
}

.product-main-column-image {
    height: 250px;
}

.flex-dashboard-container:first-child {
    margin-left: 0;
}

.main-column-mft,
.main-column-aside {
    order: 1;
    width: 30em;
    min-width: 30em;
    box-sizing: border-box;
    margin-right: 1em;
    max-height: 45em;
}

.news-body {
    max-height: 35em;
    padding: 1em;
    overflow-y: auto;
}

#html-content {
    width: 97%;
    height: 95%;
    margin-left: auto;
}

.html-area {
    min-height: 35em;
    width: 99%;

    padding-left: 1em;
    padding-top: 1em;
    border: 1px solid black;
    word-wrap: break-word;
}

.action-buttons {
    margin-top: 1em;
}
.main-column-kwik {
    order: 2;
    box-sizing: border-box;
    flex-grow: 8;
    margin-left: 0;
}

.flex-splash-main,
.flex-dashboard-main {
    order: 1;
    width: 30em;
    box-sizing: border-box;
}

.flex-splash-promo,
.flex-dashboard-promo {
    order: 2;
    box-sizing: border-box;
    flex-grow: 8;
    margin-left: 1em;
    width: 50%;
}

.flex-splash-promo {
    width: auto;
    text-align: right;
}

.flex-dashboard-promo img {
    width: 48%;
    border: 1px solid #000;
    box-sizing: border-box;
}

.flex-splash-promo img {
    max-height: 30em;
    border: 1px solid #000;
    box-sizing: border-box;
}

/* Global styles */

.hidden {
    display: none !important;
}

p {
    margin-block-start: 0;
    font-size: 0.9em;
}

p.margin-top-small {
    margin: 0;
}

p.margin-top-large {
    margin-block-start: 3em;
}

a {
    color: #a20f2b;
    text-decoration: none;
    transition: all 300ms ease 0ms;
}

a.section-link {
    color: inherit;
    text-decoration: inherit;
}
a.disabled-link {
    background-color: gray;
    pointer-events: none;
}
a.error-link {
    background-color: #fab1b1;
    pointer-events: none;
}
a:hover {
    color: #1f7da3;
    text-decoration: underline;
    transition: all 300ms ease 0ms;
}

a.section-link:hover {
    color: inherit;
    text-decoration: inherit;
}

.centred {
    text-align: center;
}

.info {
    color: #888;
    font-size: 0.9em;
}

.alert-text {
    color: #ff2b2b;
}

.alert-background {
    background: #fab1b1;
}

.box-info {
    display: block;
    background: #eee;
    border: 1px solid #aaa;
    padding: 1em 1em 1em 2em;
}

.box-info-inset {
    display: block;
    background: #eee;
    border: 1px solid #aaa;
    padding: 0 1em 1em 1em;
    margin-bottom: 1em;
}

.box-info-inset h3 {
    font-size: 0.9em;
    margin: 1em 0 0 0;
}

.box-info-inset ul {
    font-size: 0.8em;
    margin: 0.5em 0.5em 0.5em 0;
}

/* Navigation */

header.main {
    background: #fff;
    border: 0 solid #4e4e4e;
    border-bottom-width: 1px;
    margin-bottom: 1.5vh;
}

div.header-nav-images span.left-column {
    display: inline-block;
    width: 30.5em;
}

div.header-nav-images span.left-column img {
    height: 4.5vh;
}

div.header-nav-images span.right-column img {
    height: 6vh;
}

nav.main-navigation ul.main {
    margin: 2vh 0;
    float: right;
}

nav.main-navigation ul.main li {
    display: inline-block;
    margin-left: 2vw;
    font-size: 1.25em;
}

nav.main-navigation ul.main li.pulldown {
    padding-left: 0.9em;
    background-image: url("/images/menu-arrow.png");
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 0.5em;
}

nav.main-navigation ul.main li a,
nav.main-navigation span {
    color: #4d4d4d;
    padding-bottom: 1em;
}

nav.main-navigation span.dropbtn:hover {
    cursor: pointer;
    text-decoration: underline;
}

nav.main-navigation .dropdownContent {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.93);
    min-width: 9em;
    box-shadow: 0 0.5vmin 0.5vmin 0 rgba(0, 0, 0, 0.2);
    border: 0 solid rgba(0, 0, 0, 0.1);
    border-left-width: 1em;
    z-index: 1;
    margin: 0.5em 0 0 0;
    padding: 0;
}

nav.main-navigation .show {
    display: block;
}

nav.main-navigation ul.dropdownContent li {
    display: block;
    font-size: 0.9em;
    min-height: unset;
    padding: 0.8em 1.3em;
    margin: 0;
}

nav.main-navigation ul.dropdownContent li.spacer {
    color: rgb(0, 80, 38);
    background: rgba(0, 175, 77, 0.1);
    margin: 0;
    padding: 1.5vmin;
}

nav.secondary-nav ul {
    margin: 0;
    padding: 0;
}

nav.content-form ul {
    margin: 1em 0;
    border: solid #ddd;
    border-width: 1px 0 0 0;
    padding: 1em 0 0 0;
}

nav.secondary-nav ul li,
nav.content-form ul li {
    display: inline-block;
    margin-bottom: 0.5em;
}

nav.margin-bottom {
    margin-bottom: 1em;
}

.mobile {
    display: none;
}

#mobile-menu-show {
    margin: 1vh auto;
    display: none;
}

/* Body */

section {
    border-radius: 0 2vh 0 0;
    padding: 1.5vh;
    margin: 0 0 1.5vh 0;
    box-sizing: border-box;
    overflow: auto;
}

.half-width {
    width: 47%;
}

.full-width {
    width: 100%;
}

.column-width-50 th {
    width: 50%;
}

.half-width-left {
    float: left;
}

.half-width-right {
    float: right;
}

.half-width img.half-width {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

.section-bottom {
    margin-bottom: 1vh;
}

.title-emphasis,
.title-emphasis-teal,
.title-emphasis-blue,
.title-emphasis-link,
.title-emphasis-olive,
.title-emphasis-info {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5vh;
    background-color: #a20f2b;
    border-radius: 0 1vh 0 0;
    color: #fff;
    text-transform: uppercase;
}

.title-emphasis-olive,
.title-emphasis-info {
    background-color: #a39d1f;
}

.title-emphasis-blue,
.title-emphasis-link {
    background-color: #1f7da3;
}

.title-emphasis-teal {
    background-color: #008d95;
}

.section-white {
    background-color: #fff;
}

.section-grey-border {
    background-color: #efefef;
}

.section-highlight {
    margin: 0 0 1.5em 0;
    padding: 1.5em;
    box-sizing: border-box;
    border: 1px solid #efefef;
    border-radius: 1em;
}

.title h1 {
    margin: 0.9vh;
    font-size: 1em;
}

.title h1 a {
    color: #fff;
}

.title h2 {
    font-size: 1.1em;
    color: #fff;
    margin: 1.2vh;
}

.title h2 a {
    color: #fff;
}

section h2 {
    font-size: 1em;
    margin: 0 0 1.2vh 0;
}

.clear {
    clear: both;
}

.break-word {
    word-wrap: break-word;
}

footer.width-container {
    background-color: #fff;
    padding: 1em;
    text-align: center;
    clear: both;
}

footer p {
    margin: 0;
    line-height: 3em;
}

footer img {
    display: inline-block;
    height: 7em;
    width: auto;
    vertical-align: middle;
    margin: 0 1em;
}

footer img:first-of-type {
    margin: 0 1em 0 8em;
}

footer img:last-of-type {
    margin: 0 8em 0 1em;
}

footer span {
    white-space: nowrap;
}

section.section-debug {
    color: #aaa;
    margin: 2em auto;
}

/* Errors */

div.alert {
    margin: 0 0 0.5em 0;
    padding: 1vh;
    border: #ccc solid;
    border-width: 1px 0;
    background: #ddd;
    color: #333;
    text-align: center;
}

div.alert-left {
    margin: 0 0 0.5em 0;
    padding: 0.5vh;
    border: #ccc solid;
    border-width: 1px 0;
    background: #eee;
    color: #333;
    font-style: italic;
}

div.alert-success {
    border-color: #acff80;
    background: #d1ffb9;
    color: #333;
}

div.alert-danger {
    border-color: #ff2b2b;
    background: #fab1b1;
    color: #333;
}

div.alert ul {
    list-style-type: none;
}

/* Forms */

div.form-line {
    clear: left;
    margin: 1em;
}

div.form-row {
    display: flex;
    flex-direction: row;
    margin: 1em;
}

div.form-row input {
    width: 5em;
    margin-right: 3em;
}

div.form-row label {
    width: 5em;
}

div.form-row select {
    width: 10em;
}

div.form-line-clear-right {
    clear: right;
}

div.form-line-no-left-margin {
    margin-left: 0;
}

nav.quote-progress-nav {
    clear: both;
    margin: 1em;
}

nav.quote-continue-nav {
    clear: both;
    margin-top: 1em;
    margin-left: 6em;
}

label {
    display: inline-block;
    width: 8em;
    font-size: 0.9em;
}

div.conc-drain label {
    width: 10em;
}

p.label-margin {
    margin-left: 9.5em;
}

.label-margin {
    margin-left: 10em;
    padding-left: 0;
}

.label-margin p {
    margin-left: 0;
}

.label-margin-fix {
    margin-left: 8em;
}

input:not([type="radio"]),
.input-box,
textarea,
select {
    display: inline-block;
    width: 15em;
    padding: 0.7em;
    vertical-align: middle;
}
select#glazing {
    background: var(--checked, #fff);
    color: #111;
}
select#glazing option {
    background: var(--checked, #fff);
    color: #111;
}
input[type="checkbox"] {
    width: 1em;
}
input[type="radio"] {
    width: 0.8em;
    height: 0.8em;
}
div.cill-extension > input,
div.cill-extension > .input-box,
div.cill-extension > label {
    width: 3em;
    height: 0.7em;
}
input[type="file"] {
    display: inline-block;
    width: 15em;
    padding: 0.7em;
    vertical-align: middle;
}

input.large {
    width: 30em;
}

select.multiple-large {
    width: 30em;
    height: 10em;
}

textarea {
    font-family: "din-2014-regular", Georgia, "Times New Roman", serif;
    width: 15em;
    height: 5em;
}

fieldset {
    box-sizing: border-box;
    margin-top: 1vh;
    margin-bottom: 1vh;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: 1vh;
    padding: 1em;
}

legend {
    padding: 0.5vw;
    color: #888;
}

.button,
.button-pagination,
.submit {
    display: inline-block;
    font-family: "din-2014-regular", Georgia, "Times New Roman", serif;
    color: #fff;
    padding: 0.6em 5em;
    background-color: #1f7da3;
    border: 0;
    border-radius: 0 1vh 0 0;
    transition: all 300ms ease 0ms;
}
.kwik-collect-button {
    display: inline-block;
    font-family: "din-2014-regular", Georgia, "Times New Roman", serif;
    padding: 0.6em 5em;
    background-color: #ecf0f1;
    border: 0;
    border-radius: 0 1vh 0 0;
    transition: all 300ms ease 0ms;
}
.button-edit-icon {
    display: inline-block;
    height: 1.12em;
    padding: 0.4em 2em 0.2em;
    border-radius: 5px;
    border: 0;
    background-image: url("/images/favicon/edit-icon.png");
    background-size: 0.8em;
    background-position: center;
    background-repeat: no-repeat;
    margin: 5px;
}

.button-edit-reference,
.button-edit-quantity {
    height: 1.12em;
    padding: 0.4em 1em 0.2em;
    border-radius: 5px;
    border: 0;
    background-image: url("/images/favicon/edit-icon.png");
    background-size: 0.8em;
    background-position: center;
    background-repeat: no-repeat;
    margin: 5px;
}

.button-delete-icon {
    display: inline-block;
    height: 1.855em;
    padding: 0.8em 2.3em 0.6em;
    border-radius: 5px;
    border: 0;
    background-image: url("/images/favicon/delete-icon.png");
    background-size: 1.2em;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.button-delete {
    display: inline-block;
    font-family: "din-2014-regular", Georgia, "Times New Roman", serif;
    color: #fff;
    padding: 0.6em 5em;
    background-color: inherit;
    border: 0;
    border-radius: 0 1vh 0 0;
    transition: all 300ms ease 0ms;
}

.button-pagination {
    margin-bottom: 0.5em;
}

.submit-round {
    margin-left: 9em;
    padding: 0.8em 3em;
    border-radius: 5px;
}

.submit-custom {
    margin-left: 9em;
}

input.increment,
input.increment-style {
    border-width: 1px;
    width: 3em;
    text-align: center;
    padding-left: 0.7em;
    border-radius: 5px;
}

input.number-wide {
    width: 6em;
}

button.increment,
button.increment-style {
    text-align: center;
    padding: 0.7em 0;
    width: 3em;
    color: #fff;
    background-color: #1f7da3;
    border-radius: 5px;
    border-width: 1px;
    border-color: #033f57;
}
button.increment-style:disabled:hover {
    cursor: not-allowed;
}
button.increment-style:disabled {
    background-color: #d0d0d0;
}

.button-dark,
.submit-dark {
    background-color: #033f57;
}

.button-readonly {
    background-color: #6c7a89;
}

.button-olive,
.submit-olive {
    background-color: #a39d1f;
}

.button-turquoise,
.submit-turquoise {
    background-color: #008d95;
}

.button-grey,
.submit-grey {
    background-color: #d0d0d0;
}

.button-green,
.submit-green {
    background-color: #77c25aff;
}

.button-red,
.submit-red {
    background-color: #a20f2b;
}

.button-round {
    border-radius: 5px;
    padding: 0.2em 0.6em;
}

.kwik-collect-button-round {
    border-radius: 5px;
    padding: 0.1em 0.1em;
}

.button-huge {
    padding: 1em 1.5em;
}

.button-dashboard {
    width: 10em;
    text-align: center;
    padding: 1em 0;
}

.button-dashboard-large {
    width: 16.9em;
    text-align: center;
    padding: 1em 0;
    font-size: 1.2em;
}

.button-inline,
.submit-inline {
    margin-left: 0;
    margin-bottom: 1em;
}

.button-pagination {
    border-radius: 5px;
    padding: 0.2em 0.6em;
}

.button-pagination-inactive {
    background-color: rgba(163, 157, 31, 0.45);
}

.button:hover,
.button-pagination:hover,
.submit:hover {
    color: #eee;
}

.popup-button-round {
    padding: 0.8em 3em;
    border-radius: 5px;
    margin: 0.25em;
}

/********Overriding datatable styles******/
#DataTables_Table_0_filter {
    float: left;
}
#DataTables_Table_0_previous {
    /*background-color: rgba(163, 157, 31, 0.45);*/
}
/********End of datatables***************/

.button:hover,
.submit:hover {
    cursor: pointer;
    background-color: #02222d;
    transition: all 300ms ease 0ms;
}

.submit-inactive:hover {
    cursor: not-allowed;
}

.button-inactive:hover {
    cursor: not-allowed;
}

/* tables */

table {
    border: 1px solid #ddd;
    width: 33%;
    margin: 1vh 0;
}
table #int-blinds {
    width: 100%;
}
table.full-width {
    width: 100%;
}

table tr {
}

table
    > tbody
    > tr:nth-child(even):not(.int-blinds):not(.kwik-collect-row):not(
        .priority-row
    ) {
    background-color: #eee;
}

table
    tr:nth-child(odd):not(.int-blinds):not(.kwik-collect-row):not(
        .priority-row
    ) {
    background-color: #fff;
}

table > tbody > tr.kwik-collect-row:nth-child(even) {
    background-color: #aa5f5f;
    color: #fff;
}

table tr.kwik-collect-row:nth-child(odd) {
    background-color: #f5aeae;
    color: #fff;
}

table > tbody > tr.priority-row:nth-child(even) {
    background-color: #aa9f5f;
    color: #fff;
}

table tr.priority-row:nth-child(odd) {
    background-color: #cfc386;
    color: #fff;
}

table td,
table th {
    box-sizing: border-box;
    padding: 0.5em;
    text-align: left;
    font-size: 0.9em;
    min-width: 9em;
}

table td.radio-td,
table th.radio-td {
    width: 2em;
}

table th.standout {
    background-color: #dedede;
}
#int-blinds > tbody > tr > td {
    box-sizing: border-box;
    text-align: left;
    padding: 0.3em;
    font-size: 0.8em;
}

table th.action,
table th.status {
    font-size: 0.9em;
    width: 7em;
}

table td {
}

/* Custom pages */

div.login {
    margin-top: 5vh;
}

/* dashboard */

ul.document-downloads {
    padding: 12px;
}

ul.document-downloads li {
    display: inline-block;
    margin-right: 1em;
    width: 10em;
    text-align: center;
    font-size: 0.9em;
    vertical-align: top;
}

ul.document-downloads li img {
    border: 1px solid #ccc;
    width: 10em;
}

/* Product */

.product-main {
}

.product-min-height {
    min-height: 90vh;
}

.product-fixed-height {
    min-height: 57vh;
}

div.product-main-column {
    box-sizing: border-box;
    display: inline-block;
    width: 25%;
    min-width: 20em;
    max-width: 40em;
    padding: 2vw;
    vertical-align: top;
}

div.column-float-left {
    float: left;
}

div.product-main-column img {
    display: inline-block;
    width: 100%;
    border: 1px solid #4e4e4e;
    margin: 0 auto 2vh;
    box-sizing: border-box;
}

div.section-left,
div.product-content {
    order: 1;
    width: 28em;
    border: grey solid;
    border-width: 0 1px 0 0;
    padding: 0 1em 0 0;
    margin-right: 1em;
    box-sizing: border-box;
}

div.product-content-layout {
    order: 1;
    min-width: 40em;
    border: grey solid;
    border-width: 0 1px 0 0;
    padding: 0 1em 0 0;
    margin-right: 1em;
    box-sizing: border-box;
}

div.product-content-flat-glass-upstand {
    order: 1;
    width: 38em;
    border: grey solid;
    border-width: 0 1px 0 0;
    padding: 0 1em 0 0;
    margin-right: 1em;
    box-sizing: border-box;
}

div.section-right,
div.product-right,
div.styles-list,
div.product-summary {
    order: 2;
    flex-grow: 8;
    min-height: 37em;
}

div.section-right,
div.product-right,
div.product-summary {
    min-height: 37em;
}

.product-right canvas {
    width: 50%;
}

div.styles-list {
    min-height: 10em;
}

div.quote-preview {
    margin: 2vh 0 0 0;
}

div.product-right-display,
div.product-right-display-full {
    width: 58%;
    padding: 1vh;
    margin: 0;
    box-sizing: border-box;
}

div.product-right-display-full {
    width: auto;
}

div.product-right img,
div.product-summary img {
    height: 100%;
    max-height: 37em;
    width: auto;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin: 0 auto;
}

div.product-right canvas,
div.quote-preview canvas {
    display: none;
    width: 30em;
    height: 20em;
    border: 1px solid #000;
    box-sizing: border-box;
    margin: 0;
}
div.product-right canvas,
div.quote-preview canvas {
    max-height: 37em;
}
#partition-graphic {
    width: 100%;
    height: 100%;
    position: relative;
}
#partition-graphic canvas {
    width: 100%;
    height: 100%;
}

#custom-loading-screen-div {
    display: none;
}

div.product-summary img {
    text-align: center;
    max-height: none;
    height: 65vh;
}

div.info {
    clear: both;
}

#custom-loading-screen-div {
    background-color: #fff;
    color: #333;
    font-size: 50px;
    text-align: center;
    padding: 2em;
    box-sizing: border-box;
}

img.loading-screen-animated-gif {
    /*margin: 1em 0 0 0;*/
    width: 1em;
}

div.loading-screen {
    text-align: center;
}

div.loading-screen img {
    width: auto;
    height: auto;
    border: 0;
}

div.loading-screen img.loading-screen-animated-gif {
    width: 5em;
    height: 5em;
    border: 0;
}

/* dashboard */

nav.dashboard-nav {
    margin-bottom: 5em;
}

nav.dashboard-nav ul {
    text-align: center;
    padding: 0;
    margin-bottom: 1em;
}

nav.dashboard-nav ul li {
    display: inline-block;
}

/* quotes */

th.quotes-action {
    width: 15em;
    text-align: center;
}
form.button-delete {
    padding: 0;
}

td.quotes-action {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

/* Swatches */

div.colour-swatch {
    box-sizing: border-box;
    padding: 0 0 1em 0;
}

div.colour-swatch span {
    display: inline-block;
    width: 7em;
    height: 3.8em;
    border: 4px solid #ccc;
    padding-top: 1em;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.7em;
    cursor: pointer;
}

div.colour-swatch figure {
    display: inline-block;
    min-width: 20em;
    height: 10em;
    padding-top: 1em;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.7em;
}

div.colour-swatch.window figure {
    height: auto;
    min-width: 1em;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin-right: 1px;
    font-size: 10px;
}

div.colour-swatch-colour-section span {
    width: 12em !important;
}

div.colour-swatch:not("colour-swatch-inactive") span:hover {
    cursor: pointer;
    border: 4px solid #a20f2b;
}

div.colour-swatch span.colour-swatch-selected,
div.colour-swatch figure.colour-swatch-selected,
div.colour-swatch-selected,
img.colour-swatch-selected {
    border: 4px solid #1f7da3;
}

div.colour-swatch img.colour-swatch-selected {
    border: 4px solid #1f7da3;
}

.colour-swatch-selected-hardware {
    border: 4px solid #1f7da3 !important;
}

div.colour-swatch span.colour-swatch-large {
    width: 10em;
    padding-top: 1em;
    margin-bottom: 1em;
}

span.colour-swatch-white {
    background: rgb(255, 255, 255);
}

span.colour-swatch-inactive {
    background: #ddd;
    opacity: 50%;
}

span.colour-swatch-black {
    color: #eee;
    background: rgb(10, 10, 10);
}

span.colour-swatch-anthracite-grey {
    color: #eee;
    background: #383e42;
}

span.colour-swatch-agate-grey {
    color: #4d4d4d;
    background: #b0b0a9;
}

span.colour-swatch-chrome {
    color: #000;
    background: linear-gradient(
        90deg,
        rgba(2, 0, 36, 1) 0%,
        rgba(255, 255, 255, 1) 39%,
        rgba(59, 59, 59, 1) 100%
    );
}

span.colour-swatch-brushed {
    color: #eee;
    background: rgb(150, 150, 150);
}

span.colour-swatch-blue {
    color: #000;
    background: rgb(169, 207, 255);
}

span.colour-swatch-neutral {
    color: #000;
    background: rgb(229, 229, 229);
}

span.colour-swatch-aqua {
    color: #000;
    background: rgb(207, 241, 255);
}

span.colour-swatch-sunshade {
    color: #000;
    background: rgb(162, 189, 220);
}

span.colour-swatch-privacy {
    color: #000000;
    background: rgb(175, 175, 175);
}

div.colour-swatch span.picture {
    height: 7em;
    padding-top: 4.8em;
}

div.colour-swatch span.picture-handle-white {
    background: url("/images/product/bifold-door/hardware-handle-white.png")
        center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 0 0 3px #000000;
}

div.colour-swatch span.picture-handle-black {
    background: url("/images/product/bifold-door/hardware-handle-black.png")
        center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 0 0 3px #000000;
}

div.colour-swatch span.picture-handle-brushed {
    background: url("/images/product/bifold-door/hardware-handle-brushed.png")
        center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 0 0 3px #000000;
}

div.colour-swatch span.picture-handle-chrome {
    background: url("/images/product/bifold-door/hardware-handle-chrome.png")
        center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 0 0 3px #000000;
}

div.colour-swatch span.picture-shootbolt-chrome {
    background: url("/images/product/bifold-door/hardware-shootbolt-chrome.png")
        center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 0 0 3px #000000;
}

p.hardware-radio-images {
    text-align: right;
}

span.hardware-label {
    display: inline-block;
    width: 6.4em;
    text-align: center;
    vertical-align: text-top;
}

.bifold-hardware span.hardware-label {
    margin-top: 0.5em;
}

span.hardware-label img {
    height: 5em;
    border: 1px solid #000;
}
details.partitions span.hardware-label img {
    width: 5em; /* images are usually square */
    height: auto;
}
span.hardware-label#coming-soon .base {
    opacity: 0.5;
}

div.hardware-radio label {
    width: 6em;
}

div.hardware-radio input {
    width: 6.8em;
    padding: 0;
    margin: 0;
}

div.hardware-radio input:last-of-type {
    text-align: right;
    width: 1em;
    margin-left: 3em;
}

/* WIP stuff */

.choose-your-style-door,
.choose-your-style-slider {
    height: 3.5em;
    width: auto;
    border: 3px solid #ccc;
}

.choose-your-style-door-selected {
    border: 3px solid #1f7da3 !important;
}

.not-implemented {
    filter: grayscale(100%);
}

#coming-soon {
    filter: grayscale(50%);
}

#upstand {
    width: 15em;
    position: absolute;
    top: 54%;
    left: 51%;
    transform: translate(-50%, -50%);
    padding: 0.5em 1em;
    font-weight: bold;
}

.mft-upstand {
    top: 51% !important;
    left: 49% !important;
}

#upstand-description {
    margin-left: 27%;
}

#latest-upstand {
    width: 15em;
    text-align: center;
    padding: 2em;
    position: relative;
    top: 45%;
    margin: auto;
    left: -5%;
    transform: translateY(-50%);
}

#upstand-background {
    background: url("/images/product/roof-lantern/upstand_template.png") center
        center no-repeat;
    background-size: contain;
    position: relative;
    display: inline-block;
    min-height: 20em;
}

#sipsico-upstand-background {
    background: url("/images/product/flat-lite/upstand_template_sipsico.png")
        center center no-repeat;
    background-size: contain;
    position: relative;
    display: inline-block;
    min-height: 20em;
}

#sipsico-upstand-background-lantern {
    background: url("/images/product/roof-lantern/upstand_template_sipsico.png")
        center center no-repeat;
    background-size: contain;
    position: relative;
    display: inline-block;
    min-height: 20em;
}

#flat-glass-upstand-background {
    position: relative;
    background: url("/images/product/flat-glass/upstand_position.png") center
        center no-repeat;
    background-size: contain;
}

#fg-upstand-background {
    position: relative;
    padding: 1em;
    border-radius: 5px;
    /* height: 40em; */
    height: 50%;
    width: 70%;
    min-width: 600px;
    margin: auto;
}

#prod-dimensions,
#upstand-dimensions,
#hole-dimensions {
    position: relative;
    border: 1px solid #333;
    height: 60%;
    /* margin:auto;  */
    box-sizing: border-box;
}
#prod-dimensions {
    padding: 2.5em;
}
#upstand-dimensions {
    padding: 3.5em;
}
#hole-dimensions {
    padding: 8.5em;
}

#hole-dimensions {
    background-color: #b3b0b0;
}

#upstand-dimensions {
    background-color: #f0f0f0;
}

#prod-dimensions {
    margin-bottom: 3em;
}
.length-labels {
    position: absolute;
    top: 0;
    right: 50%;
}
.length-descriptions {
    position: absolute;
    bottom: 0;
    left: 0;
}

.width-label {
    position: absolute;
    top: 32%;
    right: 0.5em;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#important-note {
    position: absolute;
    bottom: 2px;
    font-weight: bold;
    left: 0;
}

div.canvas-text-anchor {
    position: relative;
}

p.over-render {
    display: none;
    position: absolute;
    top: -1.4em;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    margin: 0 auto;
}

.submit-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.info-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1061;
}

.info-modal-message {
    position: sticky;
    background: #fff;
    width: 25vw;
    margin: 0 auto;
    padding: 2em;
    text-align: center;
    top: 15em;
    border: 1px black solid;
    box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.5);
}

.submit-modal-message {
    position: sticky;
    background: #fff;
    width: 20em;
    margin: 0 auto;
    padding: 2em;
    text-align: center;
    top: 15em;
}

.submit-modal-message {
    position: sticky;
    background: #fff;
    width: 20em;
    margin: 0 auto;
    padding: 2em;
    text-align: center;
    top: 15em;
    border: 1px black solid;
    box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.5);
}

.submit-modal-message img.logo {
    width: 100%;
}

.submit-modal-message img.loading-screen-animated-gif {
    width: 4em;
}

.not-available {
    opacity: 0.4;
    filter: grayscale(60%);
}

video {
    width: 80%;
    display: block;
    margin: auto;
}

.red {
    color: red;
}

img.doors-img-size {
    width: 200px !important;
    height: 200px !important;
}

figure.sliders-img-size {
    width: 20% !important;
    height: 10% !important;
    margin: 0;
    padding-top: -20px;
}
img.sliders-img-size {
    width: 100% !important;
}

figure img {
    margin-top: -0.6em;
}

figcaption {
    color: rgb(212, 72, 72);
    font-size: large;
    margin-top: -0.8em;
}

/* new classes */

.config-container {
    order: 1;
    width: 700px;
    border-right: 1px solid black;
    margin-right: 20px;
    margin-left: 10px;
    max-height: 37em;
    overflow: auto;
}

/* tree */
.tree-line {
    border-bottom: 1px dashed black;
    border-left: 1px dashed black;
    width: 35px;
    height: 1em;
    position: relative;
    left: -55px;
    top: 10px;
}

.parts-list li {
    cursor: pointer;
}

.note-offset {
    margin-left: 153px;
}

.awaiting_response_buttons a {
    text-decoration: none;
    color: white;
}

.awaiting_response_buttons a:hover {
    color: white;
}

.awaiting_response_buttons a:visited {
    color: white;
}

.popup-ctr-form {
    position: fixed;
    text-align: center;
    background-color: white;
    border: 1px solid black;
    box-shadow: 2px 2px 2px grey;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.popup-ctr-form input {
    padding-top: 0.6em;
}

.parts-list a {
    color: black;
}

.parts-list a:hover {
    color: rebeccapurple;
}

.parts-list button a {
    color: white;
}

.parts-list button a:hover {
    text-decoration: none;
    color: white;
}

div:where(.swal2-input-box) {
    /* swal2 does this for inputs */
    margin: 1em 2em 3px;
}
.swal2-input-box {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    overflow: hidden;
    /* simulate an input box using a div */
    width: 14.5em;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}
.swal2-input-box:focus-within {
    border-color: #b4dbed;
}
.swal2-input-box .prefix {
    color: #999;
}
.swal2-input-box input {
    /* Hide input inside input box */
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0 0.5rem 0 0;
    height: 1.8em;
    width: auto;
    color: inherit;
    font-size: inherit;
}
.swal2-input-box,
.swal2-input {
    height: 1.8em !important;
    font-size: medium;
}
.swal2-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    align-items: center;
}
.swal2-message {
    grid-column: 1 / span 2;
}
.swal2-label {
    text-align: right;
    padding-right: 10px;
}

.swal2-html-container {
    max-width: 80%;
    text-align: justify;
}

.swal2-terms {
    font-size: small;
}

.swal2-message-box {
    text-align: justify;
}

h2.swal2-title {
    font-size: 1.5em;
}

.swal2-cancel,
.swal2-confirm {
    height: 2em;
}

#swal2-subtitle {
    font-size: 0.6em;
    font-weight: bold;
}

.ui-datepicker-calendar {
    width: 25%;
}

.input-description {
    font-size: small;
}
.swal2-input[readonly] {
    background-color: #d2d2d2;
    cursor: not-allowed;
}
input[readonly] {
    background-color: #f2f2f2;
}
.input-box {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
    /* simulate an input box using a div */
    border: 1px solid #767676;
    border-radius: 2px;
    font-size: 0.833333em;
}
.input-box:focus-within {
    border: 2px solid #000;
}
.input-box .prefix {
    color: #999;
}
.input-box input {
    /* Hide input inside input box */
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0 0.5em 0 0;
    height: 2.7em;
    width: auto;
    color: inherit;
    font-size: inherit;
}
.title-inline {
    display: inline-block !important;
    width: 100%;
}

.title-inline h2 {
    display: inline-block !important;
    width: 150px;
}

.float-right {
    float: right;
}

.add-reference input,
.add-reference .input-box,
.add-reference select,
.add-reference textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ************quote-mail styles**************/
.social-media {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
}
.testimonials {
    margin-top: 10px;
}
.plea {
    color: darkgray;
}
.mail-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mail-body {
    color: black;
}
.mail-footer a,
.mail-body a {
    color: #0000ee;
}
.mail-footer a:visited,
.mail-body a:visited {
    color: #800080;
}
.kwik-collect-label {
    width: 40%;
    margin-left: 50%;
}
.kwik-collect-label-delivery {
    width: 40%;
    margin-left: 0;
}
.kwik-collect-unavailable {
    font-size: 0.7em;
}

.kwik-collect-input-container {
    display: inline-block;
}

.kwik-collect-awaiting {
    width: 15%;
}

.info-button,
.info-button-html {
    background-color: #808080;
    border: none;
    color: white;
    padding: 0.1em 0.4em;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.info-button:hover,
.info-button-html:hover {
    background-color: #383838;
}

.info-button::before,
.info-button-html::before {
    content: "\2139";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin-right: 5px;
}

#registration-form {
    width: 100%;
    margin: 0 auto;
    padding: 0 14%;
    background-color: white;
}

#registration-form .page-splitter {
    margin-top: 80px;
    background-color: #003e64;
    width: 65px;
    height: 15px;
    border-bottom-right-radius: 5px;
}

#registration-form hr {
    background-color: #bbb;
}

#registration-form .registration-title {
    font-size: 64px;
    color: #008d95;
    font-family: "din-2014-extra-bold";
    margin-bottom: 0;
}

#registration-form .discount-highlight {
    font-size: 20px;
    color: #008d95;
    font-family: "din-2014-extra-bold";
}

#registration-form .registration-subheader {
    font-size: 19px;
    color: #666;
}

#registration-form .form-section-wrapper {
    display: block;
}

#registration-form .form-section-title {
    width: 1320px;
    height: 44px;
    flex-shrink: 0;
    color: var(--registration-form-colour-section-title-green, #008d95);
    font-family: "din-2014-extra-bold";
    font-size: var(--font-size-h3, 34px);
    letter-spacing: -1px;
    font-weight: 900;
    line-height: normal;
}

#registration-form .form-section-wrapper .form-legend-title-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--registration-form-colour-legend-field-label-grey, #666);
    margin: 1rem 0px;
    font-size: var(--font-size-text-16, 16px);
    font-weight: 600;
    width: 100%;
}

#registration-form .form-section-wrapper .form-legend-title-wrapper span {
    /* validation-warning */
    font-size: var(--font-size-text-13, 13px);
    font-style: italic;
    font-weight: 500;
    width: 158px;
    color: var(--colour-warnings-warning-red, #c02b0a);
    margin-left: 2px;
}

#registration-form .field-description {
    font-size: 19px;
    color: #4d4d4d;
    padding: 16px 0px;
    margin-top: 3px;
}

#registration-form .inline-checkbox-list {
    display: flex;
    color: #666666;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

#registration-form .checkbox-plus-label {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

#registration-form .checkbox-plus-label label {
    width: 100%;
}

#registration-form .form-inline-input-boxes {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

#registration-form .form-input-box-and-label {
    display: flex;
    flex-direction: column;
    width: 50%;
    float: left;
    margin-right: 5%;
}

#registration-form .single-input {
    margin-right: 10%;
    width: auto !important;
}

#registration-form .form-input-box-and-label-right {
    display: flex;
    flex-direction: column;
    width: 50%;
    float: left;
    margin-left: 5%;
}

#registration-form .form-input-box-and-label input {
    width: 100%;
    border: 1px solid #008d95;
    height: 46px;
    padding: 12px;
    box-sizing: border-box;
}

#registration-form .form-input-box-and-label select {
    width: 100%;
    border: 1px solid #008d95;
    height: 46px;
    padding: 12px;
    box-sizing: border-box;
}

#registration-form .form-input-box-and-label-right input {
    width: 100%;
    border: 1px solid #008d95;
    height: 46px;
    padding: 12px;
    box-sizing: border-box;
}

#registration-form .form-input-box-and-label-full {
    width: 100%;
}

#registration-form .form-input-box-and-label-full input {
    width: 100%;
    border: 1px solid #008d95;
    height: 46px;
    display: block;
    box-sizing: border-box;
}

#registration-form input[type="submit"] {
    border: 1px solid #008d95;
    border-bottom-right-radius: 10px;
    background-color: white;
    color: #008d95;
    margin: 0;
    font-weight: 900;
}

#registration-form input[type="submit"]:hover {
    border: 1px solid #008d95;
    border-bottom-right-radius: 10px;
    background-color: #008d95;
    color: white;
    font-weight: 900;
}

#registration-form .product-choice-hidden input {
    width: 100%;
    height: 200px;
}

#registration-form .initial-quote-details {
    width: 100%;
}

#registration-form .terms-and-conditions-box {
    border: 1px solid #999999;
    padding: 0.5rem;
    font-size: 13px;
}

#registration-form .terms-and-conditions-box a {
    color: #008d95;
    text-decoration: none;
}

.reinforcement-caption {
    font-size: 1.1em;
}
table#flat-glass-stock {
    table-layout: fixed;
    width: 41.8em;
    font-size: 14px;
}

table#flat-glass-stock input[type="radio"] {
    width: 10px;
}

table#flat-glass-stock.glazing-name {
    width: 30%;
}

.reinforcement-section input,
.reinforcement-section .input-box,
.reinforcement-section button {
    width: 1em;
    height: 1.2em;
}
.unglazed-slider-container {
    display: flex;
    flex-direction: row;
}

.unglazed-slider-options {
    font-size: small;
    margin-left: 3px;
    padding-top: 1em;
}

.main-product-guide {
    padding: 24px;
    height: 60vh;
}

input[type="number"],
#upstand_height {
    width: fit-content;
}

.upstand-title {
    margin-left: -1em;
}
.upstand-label {
    width: fit-content;
}

/********************popup test******************/

.promotion-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 14px;
}

.promotion-table th,
.promotion-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ccc;
}

.promotion-table th {
    background-color: #f4f4f4;
}

.promotion-table input[type="radio"] {
    margin: 0;
    display: inline-block;
}

@media (max-width: 100px) {
    .promotion-table {
        font-size: 10px;
    }

    .promotion-table th,
    .promotion-table td {
        padding: 8px;
    }

    .promotion-table input[type="radio"] {
        margin-left: 5px;
        width: 7px;
    }
}

.promotion-popup {
    overflow-y: auto;
}
.not-clickable {
    pointer-events: none;
}

.arrow {
    width: 50%;
    height: 2px;
    margin-left: 25%;
    margin-bottom: 4px;
    background-color: #000;
    position: relative;
}

.arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #000;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.grid-container {
    display: grid;
    gap: 10px;
    border: black 2px solid;
    padding: 10px;
    margin-top: 25px;
    height: auto;
}

.grid-container > div {
    /* background-color: rgba(14, 76, 114, 0.8); */
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

.default-border {
    border: black 1px solid;
}

/* .inner-frame{
  margin: auto;
  padding: 20px;
  font-size: 30px;
  width: 200px;
  height: 40px;
  border: black 2px solid;
} */

.inner-frame {
    margin: 20px;
    padding: 20px;
    font-size: 30px;
    /* border: black 2px solid; */
}

.panel {
    transition: transform 0.3s ease;
}

.panel:hover {
    transform: scale(1.02);
    background-color: rgba(141, 199, 235, 0.8);
}

.hinge-images {
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.hinge-images > img:hover {
    transform: scale(1.02);
}

.hinge-images img {
    width: 15%;
}

.selected-section {
    background-color: lightblue;
    border: 1px solid hsl(119, 100%, 51%) !important;
}

.banner {
    background-color: #808080;
    color: #ffffff;
    padding: 20px 40px;
    border: 2px solid #800020;

    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
}

.banner p {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
}

.dim-sections {
    display: flex;
    gap: 1em;
}

.dimensions,
.sections {
    flex: 1;
    box-sizing: border-box;
}

.window-size {
    font-size: 0.9em;
}
.drainage {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.panel-width-locks,
.panel-height-locks {
    width: 1.5vw;
    height: 2.5vh;
}

.dimLocksWidth,
.dimLocksHeight {
    width: 1vw;
    height: 1vh;
}
.dimension-panel input {
    width: 29%;
    padding: 0;
}
.dimension-panel label {
    width: 4em;
}

.unclickable {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

span.handle-label {
    display: inline-block;
    width: 6.4em;
    text-align: center;
}

span.handle-label img {
    height: 5em;
    border: 1px solid #000;
}

/***********promo banner***********/

.promo-banner,
.promo-banner-order {
    background-color: #b32540;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}
.promo-banner {
    padding: 15px 0;
}
.promo-banner-order {
    padding: 10px 0;
    margin-bottom: 1em;
    font-size: 0.8rem;
}
.promo-banner a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.promo-banner a:hover {
    text-decoration: underline;
}
.close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
}
/* windows */
.width_panel {
    height: 6vh;
    display: flex;
}

.height_panel {
    display: flex;
    flex-direction: column;
    width: 6vw;
}
.panel-screens {
    width: 100%;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    height: 100%;
}

.image-container > .height-inputs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.image-container > .height-inputs > input {
    text-align: center;
    width: 3vw;
}
.panel-container {
    display: flex;
}
.hinged-frame {
    margin: 1vh;
    border: 1px solid;
    height: -webkit-fill-available;
    background-color: #fff;
}
.sections_parent {
    background-color: rgb(169, 169, 169);
}
.panel-main {
    background-color: rgb(224, 224, 224);
}
.styles-list input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
}

.cart-image {
    width: 2vw;
    position: absolute;
    right: 1%;
}

#all-window {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    width: 80%;
}

.window-item {
    width: 8vw;
    height: 20vh;
    padding: 1%;
    align-items: center;
}
#all-window figcaption {
    text-align: center;
    color: black;
    margin-top: 1px;
    font-size: 16px;
}
#all-window img {
    width: 100%;
    height: 60%;
}
#all-window .frame-captions {
    height: 30%;
}
.quote-selected {
    border: 3px solid #1f7da3;
}

.window-styles {
    border: 1px solid grey;
    padding: 0.4em;
    width: 98%;
    min-height: 25vh;
    margin-top: 0.8em;
}
.glide-container {
    padding-left: 1em;
    padding-top: 0.5em;
    width: 820px;
}
.glide-header {
    display: flex;
    flex-direction: row;
    gap: 1em;
    border-bottom: 1px solid #a3a1a1;
}
.glide-mft-log {
    width: 25%;
}
.quote-header {
    padding-top: 14px;
    font-weight: bold;
}
.style-image {
    padding-left: 16%;
}
.style-image img {
    padding-top: 2em;
    width: 45%;
    height: auto;
}
.glide-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.glide-sash-desc1 {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.glide-sash-desc2,
.glide-sash-desc3 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.glide-sash-desc3 {
    page-break-before: always;
}

.sash-desc-left,
.sash-desc-right {
    padding-top: 8px;
    width: 100px;
    font-family: serif;
    font-size: 13px;
}

.window-frame {
    display: grid;
    gap: 1px;
    border: 2px solid #333;
    background-color: #f9f9f9;
    height: 150px;
    width: 350px;
    margin-top: 1em;
}

.pane {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 2px solid black;
    text-align: center;
}

/* partitions */

summary {
    list-style: none;
    cursor: pointer;
    padding: 1em 0;
}
summary::-webkit-details-marker {
    display: none;
}

.img-overlay {
    position: relative;
    display: inline-block;
}
.img-overlay .base {
    display: block;
    width: 100%;
    height: auto;
}
.img-overlay .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

details {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    margin: 0.5rem 0;
    overflow: clip;
    
    /* animation stuff: */
    @media (prefers-reduced-motion: no-preference) {
        interpolate-size: allow-keywords;
    }
    
    /* animation stuff: */
    &::details-content {
        opacity: 0;
        block-size: 0;
        overflow-y: clip; 
        transition: content-visibility 1s allow-discrete,
                    opacity 1s,
                    block-size 1s;
    }
    
    /* animation stuff: */
    &[open]::details-content {
        opacity: 1;
        block-size: auto;
    }
}
details:hover {
    border-color: #1f7da3;
}
details > div#hinges_accent {
    overflow: hidden;
    max-height: 20em;
    transition: max-height 400ms ease, opacity 400ms ease;
    opacity: 1;
}
details > div#hinges_accent.hidden {
    display: block !important;
    max-height: 0;
    opacity: 0;
}

/* reduce the size of details summaries */
summary > h4 {
    margin: 0;
}

.clone-image {
    position: absolute;
    width: 100px;
    height: auto;
    cursor: grab;
}

.drag-container {
    position: relative;
}

.side-panel {
    position: absolute;
    top: 5em;
    right: 5em;
}
.css2d-labels button {
    cursor: pointer;
    pointer-events: auto !important;
}
.css2d-labels button.change-frame-options,
.css2d-labels button.show-frame-options,
.css2d-labels button.delete-frame {
    display: inline-flex;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    padding: 0;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
    overflow: hidden;
}
.css2d-labels button.show-frame-options {
    font-size: 2em;
    border-radius: 50%;
}
.css2d-labels button.show-frame-options[hidden],
.css2d-labels button.change-frame-options[hidden],
.css2d-labels button.delete-frame[hidden] {
    display: none;
}
.css2d-labels button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.upsell-btn {
    background-color: #fff200;
    color: #000;
}

.button-orange {
    background-color: #eb500d;
}

.upsell-parent {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
}

#swal2-html-container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.upsell-parent input {
    width: 30%;
}

.swal2-table {
    border: none;
    width: 98%;
}

#led-splash {
    color: red;
    font-size: 1.1em;
    font-style: italic;
    font-weight: bold;
}

.internal-glass-config-button {
    background: #008d95;
    color: white;
    border-radius: 1rem;
}