#main-content {
   /* These settings help ensure that full-screen app-mode is active, and the annoying-ass address bar on mobile isn't fucking up my beatiful page */
   min-height: unset;
   position: fixed;
   inset: 0;
}

#bi-area {
   display: flex;
   justify-content: center;
   align-items: center;
}
#bi-area.vertical-mode {
   flex-direction: column;
}
#bi-area-spacer {
   --spacer-color: hsl(320, 30%, 70%);
}
#bi-area:not(.vertical-mode) #bi-area-spacer {
   border-left: solid 1px var(--spacer-color);
   margin: var(--main-content-padding-side-base);
   height: calc(100% - 2*var(--main-content-padding-topbot-base));
}
#bi-area.vertical-mode #bi-area-spacer {
   border-top: solid 1px var(--spacer-color);
   margin: var(--main-content-padding-topbot-base);
   width: calc(100% - 2*var(--main-content-padding-side-base));
}


#selection-area.compressed-mode .section:not(#section-duration) .service-button {
   font-size: 12px;
}
#selection-area.compressed-mode .section:not(#section-duration) .service-button svg {
   width: 13px;
}
#selection-area:not(.compressed-mode) #section-duration .service-button {
   font-size: 20px;
}


#selection-area {
   --edgefade-apparent-max-height: 100%;
   max-width: 550px;
   flex-basis: 50%;
   overflow: overlay;
}
.vertical-mode #selection-area {
   --edgefade-apparent-max-height: 45%;
}
#section-included {
   margin-bottom: 0px;
}


.sedcard {
   --sedcard-scale: 5/14;
   background: transparent;
   padding: 0px;
   border: none;
}
.sedcard:hover {
   transform: scale(1.05);
}
.sedcard-image-container {
   margin-bottom: 0px;
}
.sedcard-image-container .model-photo-container {
   border: 1px solid black;
   border-radius: 8px;
}
.sedcard-title {
   font-size: 20px;
}


#section-included .service-button {
   --pretty-button-color-off: var(--pretty-button-color-on);
}


#table-area {
   max-height: 100%;
   max-width: 100%;
   overflow: overlay;
}
#result-table {
   border-collapse: separate;
   border-spacing: 0px;
}
#result-table>thead {
   position: sticky;
   top: 0px;
   background: linear-gradient(0deg, transparent, var(--main-content-color) 10px);
}
#result-table th,
#result-table td {
   padding: 7px 10px;
   text-align: center;
   border-right: 1px solid hsl(0, 0%, 75%);
   line-height: 1.1;
}
#result-table th {
   padding-top: 5px;
   padding-bottom: 15px;
}
#result-table td:first-child {
   width: 130px;
   padding-left: 5px;
}
#result-table th:first-child,
#result-table td:first-child {
   position: sticky;
   left: 0px;
   background: var(--main-content-color);
   z-index: 10;
}
#result-table th:last-child,
#result-table td:last-child {
   border-right: none;
   padding-right: 5px;
}
#result-table tr:first-child>td {
   border-top: 1px solid hsl(0, 0%, 75%);
}
#result-table tr.bordered-top>td {
   padding-top: 12px;
}
#result-table tr.bordered-bottom>td {
   padding-bottom: 12px;
   border-bottom: 1px solid hsl(0, 0%, 75%);
}
#result-table tr.total-row {
   font-weight: 700;
   font-size: 18px;
}
#result-table tr.total-row>td {
   padding-bottom: 5px;
}
#result-table tr.order-row {
   color: hsl(320, 50%, 50%);
   padding-bottom: 5px;
}
#result-table tr.order-row>td>div{
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: center;
}
#result-table .x-box {
   line-height: 0;
   color: red;
   font-size: x-large;
   font-weight: 900;
   font-family: 'Arial';
}


.contact-button {
   font-size: 12px;
   --button-svg-size: 22px;
}