:root {
    --header-bg: var(--snuff);

    --body-content-bg: var(--alto);

    --footer-bg: var(--electricviolet);

    --footer-cover-bg: var(--bilobaflower);
    --footer-content-bg: var(--alto);
    --footer-base-bg: var(--honeyflower);

    --tile-picture-frame-color-black: #000000;
    --tile-picture-frame-color-white: #ffffff;

    --bs-body-color: var(--lead);
}

.btn-theme {
    background: linear-gradient(90deg, var(--sunsetPapaya) 0%, var(--krissMeNotFuchsia) 50%, var(--akihabaraArcade) 100%) !important;
    border-color: var(--krissMeNotFuchsia);
    border-radius: 20px !important;
    height: 40px;
    font-size: 16px !important;
}

.btn-footer {
    color: var(--veiledDelight);
    background: var(--jaguar) !important;
    border-color: var(--jaguar);
    border-radius: 20px !important;
    width: 110px;
    font-size: 12px !important;
}

.btn-action {
    --bs-btn-color: white;
    --bs-btn-bg: var(--lead);
    --bs-btn-border-color: var(--lead);
    border-left: 4px solid var(--akihabaraArcade);
    border-bottom: 4px solid var(--akihabaraArcade);
}

.btn-action-easy {
    --bs-btn-color: white;
    --bs-btn-bg: var(--lead);
    --bs-btn-border-color: var(--lead);
    opacity: 1 !important;
}

.btn-explore {
    --bs-btn-color: var(--lead);
    --bs-btn-bg: var(--cottonField);
    --bs-btn-border-color: var(--ghost);
    --bs-btn-hover-border-color: var(--ghost);
    border-bottom: 4px solid var(--akihabaraArcade);
}

.btn-explore-simple {
    --bs-btn-color: var(--lead);
    --bs-btn-bg: var(--cottonField);
    --bs-btn-border-color: var(--ghost);
    --bs-btn-hover-border-color: var(--ghost);
}

.btn-explore-light {
    --bs-btn-color: var(--lead);
    --bs-btn-bg: var(--cottonField);
}

.btn-explore-easy {
    --bs-btn-color: var(--lead) !important;
    --bs-btn-border-color: var(--ghostlight) !important;
    --bs-btn-hover-color: var(--lead) !important;
    --bs-btn-hover-border-color: var(--ghostlight) !important;
    --bs-btn-hover-background-color: var(white) !important;
}

.btn-explore-easy-active {
    --bs-btn-color: var(--akihabaraArcade) !important;
    --bs-btn-hover-color: var(--akihabaraArcade) !important;
    --bs-btn-border-color: var(--akihabaraArcade) !important;
    --bs-btn-hover-border-color: var(--akihabaraArcade) !important;
    --bs-btn-background-color: white !important;
    --bs-btn-hover-background-color: white !important;
}

/*
.btn-explore::after {
    color: var(--ghost);
}
*/

.btn-perform {
    --bs-btn-color: white !important;
    --bs-btn-bg: var(--brazilianGreen) !important;
    --bs-btn-border-color: var(--brazilianGreen) !important;
}

.btn-accent {
    --bs-btn-color: white !important;
    --bs-btn-bg: var(--akihabaraArcade) !important;
    --bs-btn-border-color: var(--akihabaraArcade) !important;
}

.btn-accent-easy {
	--bs-btn-color: var(--akihabaraArcade) !important;
    --bs-btn-border-color: var(--akihabaraArcade) !important;
    --bs-btn-background-color: white !important;

    --bs-btn-hover-color: white !important;
    --bs-btn-hover-border-color: var(--akihabaraArcade) !important;
    
    --bs-btn-hover-background-color: var(--akihabaraArcade) !important;

	--bs-btn-active-color: white !important;
    --bs-btn-active-border-color: var(--akihabaraArcade) !important;
    --bs-btn-active-background-color: var(--akihabaraArcade) !important;


}

.btn-accent-easy p {
	color: var(--akihabaraArcade) !important;
    --bs-btn-hover-color: white !important;
}

.btn-accent-easy p:hover {
	color: white !important;
}


.btn-feature {
    --bs-btn-border-color: var(--alabaster) !important;
}


.btn-link-regular {
    /*--bs-btn-font-weight: 600;*/
    --bs-btn-color: var(--electricviolet) !important;
    --bs-btn-hover-color: var(--electricviolet) !important;
    --bs-btn-disabled-color: var(--electricviolet) !important;
}

.btn-link-footer {
    /*--bs-btn-font-weight: 600;*/
    --bs-btn-color: var(--bs-white) !important;
    --bs-btn-hover-color: var(--bs-white) !important;
    --bs-btn-disabled-color: var(--bs-white) !important;
}

.text-body {
    color: var(--electricviolet) !important;
}

.text-footer {
    color: var(--whiteAsHeaven) !important;
}

.text-copyright {
    color: var(--veiledDelight) 
}

.heading-footer {
    color: var(--bs-white) !important;
}

.validation {
    color: var(--bs-red) !important;
}

.photo-tiles-banner-bg {
	background: -moz-linear-gradient(180deg, var(--linen) 0%, var(--cosmic-latte) 100%);
	background: -webkit-linear-gradient(180deg, var(--linen) 0%, var(--cosmic-latte) 100%);
	background: linear-gradient(180deg, var(--linen) 0%, var(--cosmic-latte) 100%);
}

.photobooks-banner-bg {
    background: var(--monza-opaque);
}

.form-range {
    &::-webkit-slider-thumb {
        width: 12px !important;
        height: 12px !important;
        border-radius: 6px !important;
        background: red !important;
        margin-top: -4px !important;
    }
    
    &::-webkit-slider-runnable-track {
        height: 2px !important;
        background-color: #dddddd !important;
    }
  
    &::-moz-range-thumb {
        width: 12px !important;
        height: 12px !important;
        border-radius: 6px !important;
        background: red !important;
        margin-top: -4px !important;
    }

    &::-moz-range-track {
        height: 2px !important;
        background-color: #dddddd !important;
    }
}

.option-selected {
    border: 2px solid var(--akihabaraArcade);
}

#editingMenuDiv p {
    color: var(--iron);
}

#editingMenuDiv .editing-menu-selected p {
    color: var(--lead) !important;
    font-weight: bold;
}

#editingSmMenuDiv .editing-menu-selected {
    color: var(--akihabaraArcade) !important;
}

#editingSmMenuDiv .editing-menu-selected p {
    border-bottom: 2px solid var(--akihabaraArcade);
}

#editingSmSubMenuDiv .editing-sub-menu-selected {
    border: 2px solid var(--akihabaraArcade);
    background-color: var(--akihabaraArcade);
    color: white !important;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
}

.tile-base {
    box-shadow: calc(1px * var(--outer-shadows-offset-x, 0) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--outer-shadows-offset-y, 0) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--outer-shadows-blur, 10) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--outer-shadows-spread, 4) * var(--shadow-thickness-pct) / 100)
                hsl(0, 0%, calc(100% * (100 - var(--outer-shadows-darkness, 29)) / 100));
}

.tile-base-selected {
    box-shadow: 0px
                0px
                calc(10px * var(--shadow-thickness-pct) / 100)
                calc(4px * var(--shadow-thickness-pct) / 100)
                var(--akihabaraArcade)
                !important;
}

.tile-picture-frame {
    background: var(--tile-picture-frame-color, #000000);
}

.tile-picture-border {
    background: #ffffff;
}

.tile-picture-empty {
    background: var(--gainsboro);
}

.shadow-in-frame {
    box-shadow: inset
                calc(1px * var(--inner-shadows-offset-x, 0) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--inner-shadows-offset-y, 0) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-blur) * var(--inner-shadows-blur, 1) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-spread) * var(--inner-shadows-spread, 1) * var(--shadow-thickness-pct) / 100)
                hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100))
            !important;
}

.inset-shadow-in-frame {
    box-shadow: inset
                calc(1px * var(--inner-shadows-offset-x, 0) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--inner-shadows-offset-y, 0) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-blur) * var(--inner-shadows-blur, 1) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-spread) * var(--inner-shadows-spread, 1) * var(--shadow-thickness-pct) / 100)
                hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100))
                !important;
}

.inset-shadow-in-border {
    box-shadow: inset
                calc(1px * var(--inner-shadows-offset-x, 0) * var(--shadow-thickness-pct) / 100)
                calc(1px * var(--inner-shadows-offset-y, 0) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-blur) * var(--inner-shadows-blur, 1) * var(--shadow-thickness-pct) / 100)
                calc(var(--shadow-in-frame-spread) * var(--inner-shadows-spread, 1) * var(--shadow-thickness-pct) / 100)
                hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100))
                !important;
}

.inset-shadow-in-image {
    box-shadow: inset
                    calc(2 * var(--picture-at-left-edge) * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    0px
                    calc(var(--shadow-in-image-blur) * var(--shadow-thickness-pct) / 100)
                    calc(-1 * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100)),
                inset
                    0px
                    calc(2 * var(--picture-at-top-edge) * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    calc(var(--shadow-in-image-blur) * var(--shadow-thickness-pct) / 100)
                    calc(-1 * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100)),
                inset
                    calc(-2 * var(--picture-at-right-edge) * calc(var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100))
                    0px
                    calc(var(--shadow-in-image-blur) * var(--shadow-thickness-pct) / 100)
                    calc(-1 * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100)),
                inset
                    0px
                    calc(-2 * var(--picture-at-bottom-edge) * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    calc(var(--shadow-in-image-blur) * var(--shadow-thickness-pct) / 100)
                    calc(-1 * var(--shadow-in-image-spread) * var(--shadow-thickness-pct) / 100)
                    hsl(0, 0%, calc(100% * (100 - var(--inner-shadows-darkness, 38)) / 100))
                !important;
}


.import-button {
    border-color: #f5f4f4;
    box-shadow: 4px 4px 4px 0px rgba(173, 171, 171, 0.25) inset, 4px 4px 6px 0px rgba(86, 86, 86, 0.25);
}

.modal-content p {
    color: var(--mortar);
}

.modal-content span {
    color: var(--mortar);
}

.btn-danger p {
    color: white;
}

.btn-danger span {
    color: white;
}

.btn-success p {
    color: white;
}

.btn-success span {
    color: white;
}

.btn-action p {
    color: white;
}

.btn-action span {
    color: white;
}

/*
.picture-editing p,span {
    color: var(--mortar);
}

p.picture-editing-detail {
    color: var(--mortar);
}
*/

/*
.form-check-input:checked {
    background-color: var(--mortar);
    border-color: var(--mortar);
}
*/

.form-check-input:checked {
    background-color: var(--akihabaraArcade);
    border-color: var(--akihabaraArcade);
}

.office-check .form-check-input:checked {
    background-color: var(--brazilianGreen) !important;
    border-color: var(--brazilianGreen) !important;
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='gray'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%2724%27%20viewBox%3D%270%20-960%20960%20960%27%20width%3D%2724%27%3E%3Cpath%20d%3D%27M480-80q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0%200q-134%200-227-93t-93-227q0-134%2093-227t227-93q134%200%20227%2093t93%20227q0%20134-93%20227t-227%2093Z%27%20stroke%3D%27%23ffffff%27%20fill%3D%27%23ffffff%27%2F%3E%3Cg%20transform%3D%27scale%280.5%29%20translate%28480%2C-480%29%27%3E%3Cpath%20d%3D%27M382-232.348%20146.348-468l64.891-64.891L382-362.131l366.761-366.76L813.652-664%20382-232.348Z%27%20fill%3D%27%23e30613%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/*
.design-display {
    background-color: var(--alto);
}
*/

.design-display-image-container {
    background-color: var(--bilobaflower);
}

p.design-details {
    color: var(--mortar);
}

.photo-display {
    background-color: var(--alto);
}

p.photo-details {
    color: var(--mortar);
}

.wrapper {
    height: 20%;
    width: 100%;
    background: #555;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.order-status-order-placed {
    background-color: var(--mortar);
    color: white;
}

.order-status-on-hold {
    background-color: var(--ghost);
    color: var(--mortar);
}

.order-status-in-print-queue {
    background-color: var(--potOfGold);
    color: var(--iron);
}

.order-status-printing-complete {
    background-color: var(--himalayanBalsam);
    color: var(--iron);
}

.order-status-finishing-done {
    background-color: var(--brightturquoise);
    color: var(--iron);
}

.order-status-packed {
    background-color: var(--electricviolet);
    color: white;
}

.order-status-shipped {
    background-color: var(--brightBlue);
    color: white;
}

.order-status-delivered {
    background-color: var(--lime);
    color: var(--iron);
}

.order-status-canceled {
    background-color: var(--rampantRhubarb);
    color: white;
}

.daphub-general-text {
    color: var(--industrialRevolution);
}

.daphub-title {
    color: var(--chromaphoticBlack);
}

.daphub-caption {
    color: var(--chromaphoticBlack);
}

.theme-unselected p {
    color: var(--industrialRevolution);
}

.theme-selected p {
    background: linear-gradient(90deg, var(--sunsetPapaya) 0%, var(--krissMeNotFuchsia) 50%, var(--akihabaraArcade) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-question {
    color: var(--chromaphoticBlack) !important;
}

.faq-answer {
    color: var(--industrialRevolution) !important;
}

.info-question {
    color: var(--chromaphoticBlack) !important;
}

.info-answer {
    color: var(--industrialRevolution) !important;
}

#bannerDesc {
    color: var(--industrialRevolution);
}