: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;
}

.btn-action {
    /*--bs-btn-font-weight: 600;*/
    /*--bs-btn-color: var(--alabaster);*/
    --bs-btn-color: #000000;
    --bs-btn-bg: var(--ghost);
    --bs-btn-border-color: var(--ghost);
    /*--bs-btn-hover-color: var(--alabaster);*/
    /*--bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: color-mix(in srgb, #000000 10%, var(--ghost));*/
    --bs-btn-hover-color: #aaaaaa;
    --bs-btn-hover-bg: #888888;
    --bs-btn-hover-border-color: color-mix(in srgb, #000000 10%, var(--ghost));
    --bs-btn-focus-shadow-rgb: var(--ghost-rgb);
    /*--bs-btn-active-color: var(--bs-btn-hover-color);*/
    /*--bs-btn-active-bg: color-mix(in srgb, #000000 200px, var(--ghost));*/
    --bs-btn-active-color: #dddddd;
    --bs-btn-active-bg: #333333;
    --bs-btn-active-border-color: color-mix(in srgb, #000000 10%, var(--ghost));
    --bs-btn-disabled-bg: var(--ghost);
    --bs-btn-disabled-border-color: var(--ghost);
    --form-check-input-checked-bg-color: #ff0000;
}

.btn-explore {
    /*--bs-btn-font-weight: 600;*/
    --bs-btn-color: var(--ghost);
    --bs-btn-bg: var(--alabaster);
    --bs-btn-border-color: var(--ghost);
    --bs-btn-hover-color: var(--ghost);
    --bs-btn-hover-bg: color-mix(in srgb, #000000 10%, var(--alabaster));
    --bs-btn-hover-border-color: color-mix(in srgb, #000000 10%, var(--goldenrod));
    --bs-btn-focus-shadow-rgb: var(--alabaster-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: color-mix(in srgb, #000000 10%, var(--alabaster));
    --bs-btn-active-border-color: color-mix(in srgb, #000000 10%, var(--alabaster));
}

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

.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(--bs-white) !important;
}

.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);
}

.picture-editing .form-range {
    &::-webkit-slider-thumb {
      width: 24px !important;
      height: 4px !important;
      border-radius: 0px !important;
      background: #000000 !important;
      margin-top: 0px !important;
    }
    
    &::-webkit-slider-runnable-track {
        height: 4px !important;
        background-color: #dddddd !important;
    }
  
    &::-moz-range-thumb {
        width: 24px !important;
        height: 4px !important;
        border-radius: 0px !important;
        background: #000000 !important;
        margin-top: 0px !important;
    }

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

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

.tile-set-shadow {
    box-shadow: 0px  0px 10px 4px var(--bilobaflower);
}

.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 0px 0px 4px 4px var(--mortar) !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);
}

.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-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);
}