html, body { height: 100%; margin: 0; overflow: hidden }
p, li { font-size: 10pt }

.screen-reader-text { display: none }

.accordion-item { border: none }
.accordion-header { height: 40px; position: sticky; top: 0; z-index: 99 }
.accordion-button { height: 100%; font-size: 10pt; letter-spacing: 1px }
.accordion-button:focus { box-shadow: none }
.accordion-button:not(.collapsed) { background-color: #0f8575; color: #fff }
.accordion-header button { background-color: #ddd6c2dd }
.accordion-body { font-size: 10pt; padding: 0.625rem }
.cpr-accordion-body-section { padding: 0.625rem }

.form-control { height: 30px; font-size: 16px; border: none }
.form-select { width: 100%; height: 30px;
  background-size: 1rem; -webkit-appearance: none; border: none;
  padding-top: 0; padding-bottom: 0; font-size: 16px }

.cpr-max-height-modal .modal-dialog { height: calc(100% - 2 * 0.5rem) }
@media only screen and (min-width: 576px) {
  .cpr-max-height-modal .modal-dialog { height: calc(100% - 2 * 1.75rem) } }
.cpr-max-height-modal .modal-content { height: 100%; background-color: #f5f3ec }
.cpr-max-height-modal .modal-body { height: calc(100% - 63px - 71px) }

#cpr-adjust-image div.modal-body { overflow: scroll; width: 100% }
#cpr-adjust-image div.modal-body { display: flex; flex-direction: column }
#cpr-guillotine-pic-container { width: 100%; flex-shrink: 0 }
#cpr-guillotine-extras { padding-left: 4px; margin-top: 4px }
#cpr-guillotine-dpi { margin: 10px 0; font-size: 12pt }
#cpr-guillotine-controls { margin: 10px 0 20px 0 }
#cpr-guillotine-controls .cpr-guillotine-button-group { margin-right: 18px }
#cpr-guillotine-controls button { margin-right: 6px; padding: 0; width: 40px; height: 32px }
@media only screen and (min-width: 576px) {
  #cpr-adjust-image div.modal-body { flex-direction: row }
  #cpr-guillotine-extras { margin-left: 20px; padding: 2px 0 }
}

@media only screen and (min-width: 320px) and (min-height: 568px) {
  #cpr-guillotine-pic-container { width: 150px }
}
@media only screen and (min-width: 370px) and (min-height: 660px) {
  #cpr-guillotine-pic-container { width: 210px }
}
@media only screen and (min-width: 410px) and (min-height: 730px) {
  #cpr-guillotine-pic-container { width: 260px }
}

@media only screen and (min-width: 576px) {
  #cpr-guillotine-pic-container { width: 130px }
  #cpr-adjust-image div.modal-dialog { max-width: 400px; height: 350px }
}
@media only screen and (min-width: 576px) and (min-height: 500px) {
  #cpr-guillotine-pic-container { width: 200px }
  #cpr-adjust-image div.modal-dialog { max-width: 500px; height: 450px }
}
@media only screen and (min-width: 576px) and (min-height: 600px) {
  #cpr-guillotine-pic-container { width: 270px }
  #cpr-adjust-image div.modal-dialog { max-width: 600px; height: 550px }
}
@media only screen and (min-width: 576px) and (min-height: 700px) {
  #cpr-guillotine-pic-container { width: 340px }
  #cpr-adjust-image div.modal-dialog { max-width: 700px; height: 650px }
}
@media only screen and (min-width: 576px) and (min-height: 800px) {
  #cpr-guillotine-pic-container { width: 410px }
  #cpr-adjust-image div.modal-dialog { max-width: 800px; height: 750px }
}
@media only screen and (min-width: 576px) and (min-height: 900px) {
  #cpr-guillotine-pic-container { width: 480px }
  #cpr-adjust-image div.modal-dialog { max-width: 900px; height: 850px }
}
@media only screen and (min-width: 576px) and (min-height: 1000px) {
  #cpr-guillotine-pic-container { width: 340px }
  #cpr-adjust-image div.modal-dialog { max-width: 1000px; height: 950px }
}
@media only screen and (min-width: 700px) and (min-height: 1000px) {
  #cpr-guillotine-pic-container { width: 450px }
  #cpr-adjust-image div.modal-dialog { max-width: 1000px; height: 950px }
}
@media only screen and (min-width: 820px) and (min-height: 1000px) {
  #cpr-guillotine-pic-container { width: 550px }
  #cpr-adjust-image div.modal-dialog { max-width: 1000px; height: 950px }
}

.cpr-button { height: 30px; margin: auto; padding: 0 20px;
  border: none; border-radius: 15px; stroke: #fff; fill: none;
  font-size: 10pt; letter-spacing: 1px; color: #fff }
.cpr-button:disabled { color: #cccccc7f }

.cpr-hidden-file-input { display: none }
.cpr-hidden-file-input + label { cursor: pointer;
  height: 30px; padding: 0 20px;
  background-color: #444; color: #fff; border: none; border-radius: 15px;
  font-size: 10pt; letter-spacing: 1px; display: flex; justify-content: center; align-items: center }

.cpr-hidden-radio { opacity: 0; width: 0; position: fixed }
.cpr-hidden-radio + label { cursor: pointer }
.cpr-space-h4 { width: 1rem; flex-grow: 0 }

.cpr-hidden-radio:checked + label.cpr-color-choice { border: 2px solid #fff; box-shadow: 0 0 8px 4px #0f8575 }
.cpr-hidden-radio:checked + label.cpr-gallery-choice-page { border: 2px solid #fff; box-shadow: 0 0 8px 4px #0f8575 }

.cpr-tags-container { display: flex; flex-wrap: wrap; margin: 0px -5px 10px -5px }
.cpr-tag-container { margin: 3px 5px }
.cpr-hidden-radio + label.cpr-tag { color: #000; height: 24px; border: 1px solid #000; border-radius: 12px; padding: 12px; font-size: 9pt; display: flex; align-items: center }
.cpr-hidden-radio + label.cpr-tag-variant { color: #000; height: 24px; border: 1px solid #000; border-radius: 12px; padding: 12px; font-size: 9pt; display: flex; align-items: center }
.cpr-hidden-radio + label.cpr-tag-large { height: 32px; border-radius: 16px; font-size: 10pt; letter-spacing: 1px }
.cpr-hidden-radio:checked + label.cpr-tag { background-color: #0f8575; border-color: #0f8575; color: #fff }
.cpr-hidden-radio:checked + label.cpr-tag-variant { background-color: #d46618; border-color: #d46618; color: #fff }
.cpr-hidden-radio:checked + label.cpr-tag-large { background-color: #9d947b; border-color: #9d947b; color: #fff }

div.cpr-gallery-container { display: flex; flex-wrap: wrap; justify-content: flex-start }

.cpr-color-choice { width: 30px; height: 30px; margin: 0 10px 5px 0 }
input[value="#ffffff"] + label.cpr-color-choice { border: 1px solid #ddd }
input[value="2"] + label.cpr-color-choice { border: 1px solid #ddd }
.cpr-color-button { width: 30px; height: 30px; border: none; background-color: transparent;
  border-radius: 50%;
  background: conic-gradient(hsl(360, 100%, 60%), hsl(315, 100%, 60%), hsl(270, 100%, 60%), hsl(225, 100%, 60%), hsl(180, 100%, 60%), hsl(135, 100%, 60%), hsl(90, 100%, 60%), hsl(45, 100%, 60%), hsl(0, 100%, 60%))}
.cpr-gallery-choice-page { width: 80px; height: 114px; margin: 0 12px 6px 0 }

.cpr-alignment-button { width: 30px; height: 30px; border: none; background-color: transparent }
.cpr-no-align-button { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.5 34.5'><path fill='%23bbb' d='M34.1,16.3L28.4,11l-1.7,1.9L30,16H18V4.5L21,7.8l1.9-1.7l-5.3-5.7C17.4,0.1,17.1,0,16.7,0 c-0.4,0-0.7,0.1-0.9,0.4l-5.3,5.7l1.9,1.7l3.1-3.3V16H4.5l3.3-3.1L6.1,11l-5.7,5.3C0.1,16.6,0,16.9,0,17.3c0,0.4,0.1,0.7,0.4,0.9 l5.7,5.3l1.7-1.9l-3.3-3.1h10.9V30l-3.1-3.3l-1.9,1.7l5.3,5.7c0.2,0.3,0.6,0.4,0.9,0.4s0.7-0.1,0.9-0.4l5.3-5.7L21,26.7L18,30V18.5 h12l-3.3,3.1l1.7,1.9l5.7-5.3c0.3-0.2,0.4-0.6,0.4-0.9C34.5,16.9,34.4,16.6,34.1,16.3z' /></svg>") }
.cpr-no-align-button.cpr-selected { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.5 34.5'><path fill='%230f8575' d='M34.1,16.3L28.4,11l-1.7,1.9L30,16H18V4.5L21,7.8l1.9-1.7l-5.3-5.7C17.4,0.1,17.1,0,16.7,0 c-0.4,0-0.7,0.1-0.9,0.4l-5.3,5.7l1.9,1.7l3.1-3.3V16H4.5l3.3-3.1L6.1,11l-5.7,5.3C0.1,16.6,0,16.9,0,17.3c0,0.4,0.1,0.7,0.4,0.9 l5.7,5.3l1.7-1.9l-3.3-3.1h10.9V30l-3.1-3.3l-1.9,1.7l5.3,5.7c0.2,0.3,0.6,0.4,0.9,0.4s0.7-0.1,0.9-0.4l5.3-5.7L21,26.7L18,30V18.5 h12l-3.3,3.1l1.7,1.9l5.7-5.3c0.3-0.2,0.4-0.6,0.4-0.9C34.5,16.9,34.4,16.6,34.1,16.3z' /></svg>") }
.cpr-left-align-button { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%23bbb' d='M 0 0 L 0 17 L 1 17 L 1 0 Z M 3 3 L 12 3 L 12 7 L 3 7 Z M 3 10 L 17 10 L 17 14 L 3 14 Z' /></svg>") }
.cpr-left-align-button.cpr-selected { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%230f8575' d='M 0 0 L 0 17 L 1 17 L 1 0 Z M 3 3 L 12 3 L 12 7 L 3 7 Z M 3 10 L 17 10 L 17 14 L 3 14 Z' /></svg>") }
.cpr-center-align-button { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%23bbb' d='M 8 0 L 8 17 L 9 17 L 9 0 Z' /><path fill='%23bbb' d='M 4.5 3 L 12.5 3 L 12.5 7 L 4.5 7 Z M 2 10 L 15 10 L 15 14 L 2 14 Z' /></svg>") }
.cpr-center-align-button.cpr-selected { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%230f8575' d='M 8 0 L 8 17 L 9 17 L 9 0 Z' /><path fill='%230f8575' d='M 4.5 3 L 12.5 3 L 12.5 7 L 4.5 7 Z M 2 10 L 15 10 L 15 14 L 2 14 Z' /></svg>") }
.cpr-right-align-button { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%23bbb' d='M 17 0 L 17 17 L 16 17 L 16 0 Z M 14 3 L 5 3 L 5 7 L 14 7 Z M 14 10 L 0 10 L 0 14 L 14 14 Z' /></svg>") }
.cpr-right-align-button.cpr-selected { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path fill='%230f8575' d='M 17 0 L 17 17 L 16 17 L 16 0 Z M 14 3 L 5 3 L 5 7 L 14 7 Z M 14 10 L 0 10 L 0 14 L 14 14 Z' /></svg>") }

.cpr-small-close-button { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path stroke='%23fff' stroke-width='1.5px' d='M 5 5 L 11 11 M 11 5 L 5 11' /></svg>") }

.cprd-layout-guide { display: none; fill: #f5f3ec }
.cpr-tab { display: none }
.cpr-top-bar-item { font-size: 8pt; letter-spacing: 1px }
.cpr-separator { width: 10px; height: 100%; background-size: cover }
.cpr-bottom-bar-item { flex: 1 0 50%; border: none; font-size: 10pt; letter-spacing: 1px; touch-action: manipulation }

.cpr-bg { background-color: #f5f3ec }
.cpr-min-header { font-size: 10pt; font-weight: bold; padding-bottom: 0.4rem; display: block }

.cpr-overview-header { font-size: 14pt; text-align: center }
.cpr-overview-section { margin-bottom: 20px }
.cpr-overview-item { font-size: 10pt }
div.cpr-overview-visual { display: none }

#cpr-top-container { height: 100%; font-family: 'Roboto'; font-size: 11pt }
  #cpr-top-bar-mobile { display: none }
  #cpr-flex-container { display: flex; height: 100% }
    #cpr-customization-pane { width: 30%; min-width: 300px; height: 100% }
      #cpr-top-bar-desktop { display: flex; height: 25px }
      #cpr-customization { height: calc(100% - 65px); overflow: auto; position: relative }
      #cpr-bottom-bar-desktop { display: flex; height: 40px }
    #cpr-display-pane { width: 70%; height: 100%; background-color: #fcfaf2; position: relative }
  #cpr-bottom-bar-mobile { display: none }

#cpr-customization ins { text-decoration-line: none; font-weight: bold }

#cprd-expand-button, #cprd-shrink-button { display: none }

.cprd-tab { width: 100%; height: 100% }
.cprd-svg-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center }
.cprd-draggable { cursor: move; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none }

@media only screen and (max-width: 768px) {
  #cpr-top-bar-mobile { display: flex; height: 25px }
  #cpr-flex-container { flex-direction: column; height: calc(100% - 65px) }
  #cpr-customization-pane { width: 100% }
  #cpr-customization-pane.cpr-state-large-display-pane { height: 40% }
  #cpr-customization-pane.cpr-state-small-display-pane { height: 75% }
  div.cpr-tab[data-tab="4"] { background-color: #f5f3ec }
  div.cpr-overview-visual { width: 100%; height: 150px; display: flex; justify-content: center; margin: 10px 0 }
  #cpr-top-bar-desktop { display: none }
  #cpr-customization { height: 100% }
  #cpr-bottom-bar-desktop { display: none }
  #cpr-display-pane { order: -1; width: 100% }
  #cpr-display-pane.cpr-state-large-display-pane { height: 60% }
  #cpr-display-pane.cpr-state-small-display-pane { height: 25% }
  #cpr-bottom-bar-mobile { display: flex; height: 40px }
  #cprd-expand-button, #cprd-shrink-button {
    display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; padding: 10px;
    background-color: transparent; border: none;
    stroke: #888; fill: none
  }
  #cprd-expand-button.cpr-state-large-display-pane { visibility: hidden }
  #cprd-expand-button.cpr-state-small-display-pane { visibility: visible }
  #cprd-shrink-button.cpr-state-large-display-pane { visibility: visible }
  #cprd-shrink-button.cpr-state-small-display-pane { visibility: hidden }
  #cprd-expand-button.cpr-fixed-size-display-pane { visibility: hidden }
  #cprd-shrink-button.cpr-fixed-size-display-pane { visibility: hidden }
}

@media only screen and (max-width: 768px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 560px }
  #cpr-display-pane.cpr-no-display-pane { display: none }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 560px) }
  #cpr-customization-pane.cpr-no-display-pane { height: 100% }
}
@media only screen and (max-width: 768px) and (max-height: 1366px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 478px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 478px) }
}
@media only screen and (max-width: 768px) and (max-height: 1024px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 358px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 358px) }
}
@media only screen and (max-width: 768px) and (max-height: 896px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 314px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 314px) }
}
@media only screen and (max-width: 768px) and (max-height: 812px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 284px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 284px) }
}
@media only screen and (max-width: 768px) and (max-height: 736px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 258px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 258px) }
}
@media only screen and (max-width: 768px) and (max-height: 667px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 233px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 233px) }
}
@media only screen and (max-width: 768px) and (max-height: 568px) {
  #cpr-display-pane.cpr-fixed-size-display-pane { height: 199px }
  #cpr-customization-pane.cpr-fixed-size-display-pane { height: calc(100% - 199px) }
}