@font-face {
    font-family: "Lufga";
    src: url("../fonts/Lufga/LufgaRegular.ttf");
}

@font-face {
    font-family: "Lufga";
    font-weight: bold;
    src: url("../fonts/Lufga/LufgaSemiBold.ttf");
}

@font-face {
    font-family: "Lufga";
    font-style: italic;
    src: url("../fonts/Lufga/LufgaItalic.ttf");
}

@font-face {
    font-family: "Lufga";
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/Lufga/LufgaSemiBoldItalic.ttf");
}


@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
	font-weight: bold;
    src: url("../fonts/Roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: "Roboto";
	font-style: italic;
    src: url("../fonts/Roboto/Roboto-Italic.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: bold;
	font-style: italic;
    src: url("../fonts/Roboto/Roboto-BoldItalic.ttf");
}

@font-face {
    font-family: "RobotoSlab";
    src: url("../fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf");
}

@font-face {
    font-family: "ClashDisplay";
    src: url("../fonts/ClashDisplay/Fonts/WEB/fonts/ClashDisplay-Medium.ttf");
}


@font-face {
    font-family: "CiscoSans";
    src: url("../fonts/CiscoSans/CiscoSans.ttf");
}
@font-face {
    font-family: "CiscoSans";
	font-weight: bold;
    src: url("../fonts/CiscoSans/CiscoSans-Bold.ttf");
}
@font-face {
    font-family: "CiscoSans";
	font-style: italic;
    src: url("../fonts/CiscoSans/CiscoSans-Oblique.ttf");
}
@font-face {
    font-family: "CiscoSans";
    font-weight: bold;
	font-style: italic;
    src: url("../fonts/CiscoSans/CiscoSans-BoldOblique.ttf");
}
@font-face {
    font-family: "CiscoSansThin";
    src: url("../fonts/CiscoSans/CiscoSans-Thin.ttf");
}

:root {
    /*****************************************************************************

    <---------------- w ------------------->     overall width
       <------------- t ---------------->        tile width
                               -------->    <--  frame thickness (f)
                               -------->  <----  grooving (g)
    ////////////////////////////////////////
    // ////////////////////////////////// // ++
    // //                              // //     visible border (b) = border minus grooving
    // //  +------------------------+  // // ++
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  +------------------------+  // //
    // //                              // //
    // ////////////////////////////////// //
    ////////////////////////////////////////

    **************************

    /** Dimensions in inches 

    t = 8.0
    f = 1.0
    g =  0.5
    b = 1.0

    padding inside frame outer boundary to represent frame width:
        f / w = f / (t + 2f - 2g) = 1.0 / (8.0 + 2 * 1.0 - 2 * 0.5) = 1 / 9 = 11.1111%

    padding inside tile outer boundary to represent border width:
        b / (t - 2g) = 1.0 / (8.0 - 2 * 0.5) = 1 / 7 = 14.2857%

    tile height with respect to frame height:
        t / w = t / (t + 2f - 2g) = 8 / 9 = 88.8889%

    tile displacement from frame corners:
        d = (100% t / w) / 2 = (100% - 88.8889%) / 2 = 5.5556

    **************************

    t = 8.0
    f = 0.5
    g =  0.25
    b = 0.5

    w = t + 2f - 2g = 8.0 + 2 * 0.5 - 2 * 0.25 = 8.5

    f / w = 0.5 / 8.5 = 5.8824%
    b / (t - 2g) = 0.5 / (8.0 - 2 * 0.25) = 0.5 / 7.5 = 6.6667%
    t / w = 8.0 / 8.5 = 94.1176%
    d = (100% - 94.1176%) / 2 = 2.9412%

    *****************************************************************************/

    /*
    --tile-picture-tile-width-in: 8.0;
    --tile-picture-frame-thickness-in: 0.5;
    --tile-picture-grooving-in: 0.25;
    --tile-picture-visible-border-in: 0.5;

    --tile-picture-frame-width-standard: calc(100% * var(--tile-picture-frame-thickness-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-visible-border-in)));

    --tile-picture-border-width-standard: calc(100% * var(--tile-picture-visible-border-in) /
        (var(--tile-picture-tile-width-in) - 2 * var(--tile-picture-grooving-in)));

    --tile-picture-tile-width-standard: calc(100% * var(--tile-picture-tile-width-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-grooving-in)));

    --tile-picture-tile-dislpacement-standard: calc(100% * (1 - var(--tile-picture-tile-width-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-grooving-in))) / 2);
    */

    --tile-picture-tile-width-mm: 203.5;
    --tile-picture-frame-thickness-mm: 8;
    --tile-picture-grooving-mm: 3.75;
    --tile-picture-visible-border-mm: 10;

    --tile-picture-frame-width-standard: calc(100% * var(--tile-picture-frame-thickness-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-visible-border-mm)));

    --tile-picture-border-width-standard: calc(100% * var(--tile-picture-visible-border-mm) /
        (var(--tile-picture-tile-width-mm) - 2 * var(--tile-picture-grooving-mm)));

    --tile-picture-tile-width-standard: calc(100% * var(--tile-picture-tile-width-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-grooving-mm)));

    --tile-picture-tile-dislpacement-standard: calc(100% * (1 - var(--tile-picture-tile-width-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-grooving-mm))) / 2);

}

body {
    font-family: "Lufga";
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.app-name {
    font-family: "ClashDisplay";
}

#top-bar {
    background: var(--chromaphoticBlack);
    color: var(--whiteAsHeaven);
}

#display {
    background: var(--lead);
    color: var(--whiteAsHeaven);
}

#process {
    background: var(--grass-valley);
    color: black;
}

/*
#footer {
    margin-top: auto;
    background: var(--ghost);
    color: var(--alabaster);
}
*/

#footer {
    background: radial-gradient(72.32% 72.63% at 50% 34.67%, #333457 0%, #11111F 59.6%);
    background-image: url('../pics/feature/footer_background.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;
    background-blend-mode: multiply;
}

#menuModal .modal-body {
    /* background: linear-gradient(135deg,  #ffd57d 0%,#ed8f15 100%); */
    background: var(--whiteAsHeaven);
}

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}





a.intro-link {
    font-size: 12px;
}

a.intro-link:link {
	color: var(--chromaphoticBlack) !important;
}

a.intro-link:visited {
	color: var(--chromaphoticBlack) !important;
}

a.intro-link:hover {
    color: var(--chromaphoticBlack) !important;
}

a.intro-link:active {
    color: var(--chromaphoticBlack) !important;
}





/*
a.header-link {
    font-size: 12px;
}
*/

a.header-link:link {
	color: var(--mortar) !important;
}

a.header-link:visited {
	color: var(--mortar) !important;
}

a.header-link:hover {
    color: var(--mortar) !important;
}

a.header-link:active {
    color: var(--mortar) !important;
}

a.display-link:link {
	color: white !important;
}

a.display-link:visited {
	color: white !important;
}

a.display-link:hover {
    color: white !important;
}

a.display-link:active {
    color: white !important;
}

a.ideas-link:link {
	color: black !important;
}

a.ideas-link:visited {
	color: black !important;
}

a.ideas-link:hover {
    color: black !important;
}

a.ideas-link:active {
    color: black !important;
}

a.community-post-author-link:link {
    color: var(--akihabaraArcade);
}

a.community-post-author-link:visited {
    color: var(--akihabaraArcade);
}

a.community-post-author-link:hover {
    color: var(--akihabaraArcade);
}

a.community-post-author-link:active {
    color: var(--akihabaraArcade);
}

a.blog-caption-link:link {
    color: var(--brightBlue);
}

a.blog-caption-link:visited {
    color: var(--brightBlue);
}

a.blog-caption-link:hover {
    color: var(--brightBlue);
}

a.blog-caption-link:active {
    color: var(--brightBlue);
}

a.blog-date-and-author-link:link {
    color: var(--iron);
}

a.blog-date-and-author-link:visited {
    color: var(--iron);
}

a.blog-date-and-author-link:hover {
    color: var(--iron);
}

a.blog-date-and-author-link:active {
    color: var(--iron);
}

a.blog-short-desc-link:link {
    color: black;
}

a.blog-short-desc-link:visited {
    color: black;
}

a.blog-short-desc-link:hover {
    color: black;
}

a.blog-short-desc-link:active {
    color: black;
}



a.footer-link:link {
	color: var(--veiledDelight) !important;
}

a.footer-link:visited {
	color: var(--veiledDelight) !important;
}

a.footer-link:hover {
    color: var(--veiledDelight) !important;
}

a.footer-link:active {
    color: var(--veiledDelight) !important;
}




a.subscribe-link:link {
    color: var(--akihabaraArcade) !important;
}

a.subscribe-link:visited {
    color: var(--akihabaraArcade) !important;
}

a.subscribe-link:hover {
    color: var(--akihabaraArcade) !important;
}

a.subscribe-link:active {
    color: var(--akihabaraArcade) !important;
}



a.no-decor-link:link {
	color: var(--industrialRevolution) !important;
}

a.no-decor-link:visited {
	color: var(--industrialRevolution) !important;
}

a.no-decor-link:hover {
    color: var(--industrialRevolution) !important;
}

a.no-decor-link:active {
    color: var(--industrialRevolution) !important;
}


a.accent-link:link {
    color: var(--akihabaraArcade);
}

a.accent-link:visited {
    color: var(--akihabaraArcade);
}

a.accent-link:hover {
    color: var(--akihabaraArcade);
}

a.accent-link:active {
    color: var(--akihabaraArcade);
}


a.tracking-link:link {
    color: var(--brightBlue);
}

a.tracking-link:visited {
    color: var(--brightBlue);
}

a.tracking-link:hover {
    color: var(--brightBlue);
}

a.tracking-link:active {
    color: var(--brightBlue);
}

a.home-design-template-display {
    color: var(--chromaphoticBlack);
}

a.home-design-template-display:visited {
    color: var(--chromaphoticBlack);
}

a.home-design-template-display:hover {
    color: var(--chromaphoticBlack);
}

a.home-design-template-display:active {
    color: var(--chromaphoticBlack);
}




.form-control {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.btn-sm {
    font-size: 14px;
}

input {
    font-size: 14px;
}

.dropdown-menu {
    font-size: 14px;
}

.navbar-nav > li {
    font-size: 14px;
}

.text-body {
    font-size: 12px;
    margin: 0px;
}

.text-footer {
    font-size: 14px;
    margin: 6px;
}

.validation {
    font-size: 12px;
    margin: 0px;
    padding-left: 12px;
}

/*
.picture-crop-control {
    background-color: blueviolet;
    opacity: 0.1;
}
*/

@media (max-width: 767.98px) {
    .photobooks-banner {
        width: 100% !important;
    }
}

.import-button {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 48px;
    border-width: 4px;
    border-style: solid;
}

.picture-editing p,span {
    font-size: 12px;
    margin: 0px;
}

p.picture-editing-detail {
    font-size: 9px;
    margin: 0px;
}

.picture-editing .form-switch .form-check-input {
    width: 50px;
    height: 30px;
}

.picture-editing .form-switch .form-check-input:checked {
    width: 50px;
    height: 30px;
}

.progress-display p {
    font-size: 12px;
    margin: 0px;
    padding: 8px;
}

.tile-picture-frame-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.tile-grid-picture-frame-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.tile-picture-frame {
    padding: var(--tile-picture-frame-width, 0%);
}

.tile-picture-border {
    /*margin: 0%;*/
    padding: var(--tile-picture-border-width, 0%);
}

/*
.tile-picture.shadow-in-frame img {
    z-index: -1;
}
*/

@media (min-width: 768px) {
    #distinctTilesCarouselInnerDiv {
        display: flex;
    }

    #distinctTilesCarouselInnerDiv .carousel-item {
        display: block;
        margin-right: 0;
        flex: 0 0 calc(100% / 3);
    }
}

.design-display {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /*box-shadow: 0px  0px 10px 4px var(--bilobaflower);*/
}

p.design-details {
    font-size: 12px;
    margin: 0px;
}

.photo-display {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

p.photo-details {
    font-size: 12px;
    margin: 0px;
}

a.sub-menu-item-link:link {
	color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:visited {
	color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:hover {
    color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:active {
    color: var(--iron);
    text-decoration: none;
}

a.active-sub-menu-item-link:link {
    color: var(--akihabaraArcade) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:visited {
    color: var(--akihabaraArcade) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:hover {
    color: var(--akihabaraArcade) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:active {
    color: var(--akihabaraArcade) !important;
    text-decoration: underline !important;
}

p.active-sub-menu-item-regular {
    color: var(--akihabaraArcade) !important;
}

a.active-sub-menu-item-regular-link:link {
    color: var(--akihabaraArcade) !important;
}

a.active-sub-menu-item-regular-link:visited {
    color: var(--akihabaraArcade) !important;
}

a.active-sub-menu-item-regular-link:hover {
    color: var(--akihabaraArcade) !important;
}

a.active-sub-menu-item-regular-link:active {
    color: var(--akihabaraArcade) !important;
}

a.cancel-link:link {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:visited {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:hover {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:active {
    color: var(--rampantRhubarb) !important;
}

a.disabled img {
    opacity: 0.3;
}



a.theme-unselected:link p {
	color: var(--industrialRevolution) !important;
}

a.theme-unselected:visited p {
	color: var(--industrialRevolution) !important;
}

a.theme-unselected:hover p {
    color: var(--industrialRevolution) !important;
}

a.theme-unselected:active p {
    color: var(--industrialRevolution) !important;
}


a.theme-selected:link 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;
    font-weight: bold;
}

a.theme-selected:visited 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;
    font-weight: bold;
}

a.theme-selected:hover 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;
    font-weight: bold;
}

a.theme-selected:active 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;
    font-weight: bold;
}



.list-item {
    border-width: 1px;
    border-style: solid;
    border-color: var(--pixelWhite);
    background-color: var(--lynxWhite);
    border-radius: 1rem;
    padding: 1rem;
}

@media all and (max-width: 991px) {
    .item-action {
        display: block !important;
    }
}

.item-focussed .item-action {
	display: block !important;
}

.item-action-show {
	display: block !important;
}

a.active-picture-upload-source>div {
    border-right: 2px solid var(--akihabaraArcade);
}

.show-password .show-password-off {
    display: none;
}

.show-password .show-password-on {
    display: block;
}

.hide-password .show-password-off {
    display: block;
}

.hide-password .show-password-on {
    display: none;
}

.customer-photo-selected .customer-photo-selected-off {
	display: none;
}

.customer-photo-selected .customer-photo-selected-on {
	display: block;
}

.customer-photo-unselected .customer-photo-selected-off {
	display: block;
}

.customer-photo-unselected .customer-photo-selected-on {
	display: none;
}

.customer-photo-public .customer-photo-public-off {
    display: none;
}

.customer-photo-public .customer-photo-public-on {
    display: block;
}

.customer-photo-private .customer-photo-public-off {
    display: block;
}

.customer-photo-private .customer-photo-public-on {
    display: none;
}




.discount-coupon-group-selected .discount-coupons-apply {
	display: none;
}

.discount-coupon-group-selected .discount-coupons-remove {
	display: block;
}

.discount-coupon-group-selected .discount-coupon-code {
    color: var(--akihabaraArcade) !important;
}

.discount-coupon-group-unselected .discount-coupons-apply {
	display: block;
}

.discount-coupon-group-unselected .discount-coupons-remove {
	display: none;
}

.theme-unselected {
    background: var(--bs-border-color);
}

.theme-unselected > div {
    background: var(--whiteAsHeaven);
}

.theme-selected {
    background: linear-gradient(90deg, var(--sunsetPapaya) 0%, var(--krissMeNotFuchsia) 50%, var(--akihabaraArcade) 100%);
}

.theme-selected > div {
    background: linear-gradient(281.63deg, var(--akihabaraArcade-transparent-rgb) 4.73%, var(--krissMeNotFuchsia-transparent-rgb) 61.88%, var(--sunsetPapaya-transparent-rgb) 100.89%);
}

.theme-unselected .theme-selection-indicator {
    display: none !important;
}

.faq-unselected {
    background: var(--bs-border-color);
}

.faq-unselected .faq-answer {
    display: none !important;
}

.faq-unselected .faq-display-expand {
    display: block !important;
}

.faq-unselected .faq-display-collapse {
    display: none !important;
}

.faq-selected {
    background: linear-gradient(90deg, var(--sunsetPapaya) 0%, var(--krissMeNotFuchsia) 50%, var(--akihabaraArcade) 100%);
}

.faq-selected .faq-answer {
    display: block !important;
}

.faq-selected .faq-display-expand {
    display: none !important;
}

.faq-selected .faq-display-collapse {
    display: block !important;
}





/*
.info-unselected {
    background: var(--bs-border-color);
}
*/


.info-unselected .info-answer {
    display: none !important;
}

.info-unselected .info-display-expand {
    display: block !important;
}

.info-unselected .info-display-collapse {
    display: none !important;
}

.info-selected {
    background: linear-gradient(90deg, var(--sunsetPapaya) 0%, var(--krissMeNotFuchsia) 50%, var(--akihabaraArcade) 100%);
}

.info-selected .info-answer {
    display: block !important;
}

.info-selected .info-display-expand {
    display: none !important;
}

.info-selected .info-display-collapse {
    display: block !important;
}






.grid-visible .grid-visible-off {
	display: none;;
}

.grid-visible .grid-visible-on {
	display: block;;
}

.grid-invisible .grid-visible-off {
	display: block;
}

.grid-invisible .grid-visible-on {
	display: none;
}

.horizontal-scroll-no-scrollbar {
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.horizontal-scroll-no-scrollbar::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

.design-template-product-classification-selected img {
    border: 4px solid var(--akihabaraArcade);
    border-radius: 10%;
}

.design-template-product-classification-selected p {
    color: var(--akihabaraArcade);
    font-weight: bold;
}

.frame-selected img {
    display: block !important;
}

.img-w-constrained {
    width: calc(100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) !important;
    height: calc((100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) * (var(--tile-width-mm) / var(--tile-height-mm)) * (var(--orig-height-pixels) / var(--orig-width-pixels)) * var(--picture-bound-aspect-ratio)) !important;
}

.img-h-constrained {
    height: calc(100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) !important;
    width: calc((100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) * (var(--tile-height-mm) / var(--tile-width-mm)) * (var(--orig-width-pixels) / var(--orig-height-pixels)) / var(--picture-bound-aspect-ratio)) !important;
}

.unused-grid-component {
    opacity: 0.25;
}

.dap-intro-menu-item {
    font-size: 16px;
}

#howItWorksDisplayDiv {
    width: 100%;
    padding-top: 65%;
    position: relative;
}

#howItWorksDisplayInnerDiv {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#howItWorksVideoDiv {
    position: absolute;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
    overflow: hidden; 
}

.social-img-btn-header {
    padding: 2px;
}

.social-img-btn-header img {
    width: 12px;
    height: 12px;
}

.two-lines {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.social-img-btn-blogs {
    padding: 12px;
}

.social-img-btn-blogs img {
    width: 28px;
    height: 28px;
}

@media (min-width: 1400px) {
    #blogsSamplesOuterDiv {
        height: calc(((1296px - 1rem - 2px) / 3) * 0.75 + 180px);
        position: relative;
    }

    #blogsSamplesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((1296px - 1rem - 2px) / 3) + var(--position) * 0.5rem));
    }

    .home-blog-display {
        width: calc((1296px - 1rem - 2px) / 3);
        height: calc(((1296px - 1rem - 2px) / 3) * 0.75 + 180px);
    }

    #stylesThatMatchYourSpaceDesignTemplatesOuterDiv {
        height: calc(((1296px - 1rem) / 3) * 0.75 + 110px);
        position: relative;
    }

    #stylesThatMatchYourSpaceDesignTemplateCategoriesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((1296px - 1rem) / 3) + var(--position) * 0.5rem));
    }

    .home-design-template-display {
        width: calc((1296px - 1rem) / 3);
        height: calc(((1296px - 1rem) / 3) * 0.75 + 110px);
        border-radius: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    #blogsSamplesOuterDiv {
        height: calc(((1116px - 1rem - 2px) / 3) * 0.75 + 180px);
        position: relative;
    }

    #blogsSamplesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((1116px - 1rem - 2px) / 3) + var(--position) * 0.5rem));
    }

    .home-blog-display {
        width: calc((1116px - 1rem - 2px) / 3);
        height: calc(((1116px - 1rem - 2px) / 3) * 0.75 + 180px);
    }

    #stylesThatMatchYourSpaceDesignTemplatesOuterDiv {
        height: calc(((1116px - 1rem) / 3) * 0.75 + 110px);
        position: relative;
    }

    #stylesThatMatchYourSpaceDesignTemplateCategoriesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((1116px - 1rem) / 3) + var(--position) * 0.5rem));
    }

    .home-design-template-display {
        width: calc((1116px - 1rem) / 3);
        height: calc(((1116px - 1rem) / 3) * 0.75 + 110px);
        border-radius: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #blogsSamplesOuterDiv {
        height: calc(((936px - 1rem - 2px) / 3) * 0.75 + 180px);
        position: relative;
    }

    #blogsSamplesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((936px - 1rem - 2px) / 3) + var(--position) * 0.5rem));
    }

    .home-blog-display {
        width: calc((936px - 1rem - 2px) / 3);
        height: calc(((936px - 1rem - 2px) / 3) * 0.75 + 180px);
    }

    #stylesThatMatchYourSpaceDesignTemplatesOuterDiv {
        height: calc(((936px - 1rem) / 3) * 0.75 + 110px);
        position: relative;
    }

    #stylesThatMatchYourSpaceDesignTemplateCategoriesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((936px - 1rem) / 3) + var(--position) * 0.5rem));
    }

    .home-design-template-display {
        width: calc((936px - 1rem) / 3);
        height: calc(((936px - 1rem) / 3) * 0.75 + 110px);
        border-radius: 20px;
    }
}

@media (max-width: 991px) {
    #blogsSamplesOuterDiv {
        height: calc(((var(--blogs-width-px) - 24px - 0.5rem - 1px) / 2) * 0.75 + 180px);
        position: relative;
    }

    #blogsSamplesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((var(--blogs-width-px) - 24px - 0.5rem - 1px) / 2) + var(--position) * 0.5rem));
    }

    .home-blog-display {
        width: calc((var(--blogs-width-px) - 24px - 0.5rem - 1px) / 2);
        height: calc(((var(--blogs-width-px) - 24px - 0.5rem - 1px) / 2) * 0.75 + 180px);
    }

    #stylesThatMatchYourSpaceDesignTemplatesOuterDiv {
        height: calc(((var(--style-matching-space-width-px) - 24px - 0.5rem) / 2) * 0.75 + 120px);
        position: relative;
    }

    #stylesThatMatchYourSpaceDesignTemplateCategoriesDiv {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        margin-left: calc(-1 * (var(--position) * ((var(--blogs-width-px) - 24px - 0.5rem) / 2) + var(--position) * 0.5rem));
    }

    .home-design-template-display {
        width: calc((var(--style-matching-space-width-px) - 24px - 0.5rem) / 2);
        height: calc(((var(--style-matching-space-width-px) - 24px - 0.5rem) / 2) * 0.75 + 110px);
        border-radius: 20px;
    }
}

@media all and (min-width: 992px) {
    #introBannerDiv {
        width: 100%; 
        overflow: hidden;
        border-radius: 40px;
        position: relative;
    }

    #introBannerDiv img {
        width: 100%;
    }

    #introPeopleGallery {
        height: 34px !important;
    }

    #introPartnership {
        font-size: 14px !important;
    }

    #introCaption {
        font-size: 50px !important;
    }

    #introText {
        font-size: 18px !important;
    }

    .daphub-general-text {
        font-size: 16px;
    }

    .daphub-caption {
        font-size: 40px;
        font-weight: bold;
    }

    .daphub-title {
        font-size: 20px;
        min-height: 60px;
    }

    .daphub-sub-title {
        font-size: 20px;
    }

    .home-design-template-nav-img {
        width: 32px;
        height: 32px;
    }

    .home-design-template-nav-img-sm {
        width: 20px;
        height: 20px;
    }

    .home-sample-blog-nav-img {
        width: 20px;
        height: 20px;
    }

    .faq-question {
        font-size: 18px;
    }
    
    .faq-answer {
        font-size: 16px;
    }

    .info-question {
        font-size: 18px;
    }
    
    .info-answer {
        font-size: 16px;
    }

    #features img {
        height: 76px;
    }

    #howItWorks {
        width: 1280px;
        max-width: 90% !important;
    }

    #howItWorksDisplayInnerDiv {
        border-radius: 40px;
    }

    #howItWorksVideoDiv {
        border-radius: 20px;
    }

    #faqs {
        width: 1280px;
        max-width: 90% !important;
    }

    .footer-caption {
        font-size: 24px;
    }

    .footer-social-img {
        width: 16px;
        height: 16px;
    }

    .social-img-btn-footer {
        padding: 16px;
    }

    .social-img-btn-footer img {
        width: 16px;
        height: 16px;
    }

    .btn-footer {
        height: 50px;
    }

    .footer-logo-img {
        height: 106px;
    }

    .footer-logo-name-img {
        height: 67px;
    }

    #collectionsBannerDiv img {
        height: 265px;
    }

    #blogsBannerDiv img {
        height: 265px;
    }

    #aboutUsBannerDiv img {
        height: 265px;
    }

    #aboutUsIntroBannerDiv img {
        width: 100%;
    }

    #bannerDesc {
        font-size: 16px;
    }

    #daphubCommunityContent {
        width: 960px;
        max-width: 90% !important
    }
}

@media all and (max-width: 991px) {
    #introBannerDiv {
        height: 400px;
        width: 978px;
        max-width: 100% !important;
        overflow: hidden;
        border-radius: 24px;
        position: relative;
    }

    #introBannerDiv img {
        height: 100%;
    }

    #introPeopleGallery {
        height: 16px !important;
    }

    #introPartnership {
        font-size: 10px !important;
    }

    #introCaption {
        font-size: 20px !important;
    }

    #introText {
        font-size: 12px !important;
    }

    .daphub-general-text {
        font-size: 12px;
    }

    .daphub-caption {
        font-size: 20px;
        font-weight: bold;
    }

    .daphub-title {
        font-size: 16px;
        min-height: 48px;
    }

    .daphub-sub-title {
        font-size: 16px;
    }

    .home-design-template-nav-img {
        width: 24px;
        height: 24px;
    }

    .home-design-template-nav-img-sm {
        width: 20px;
        height: 20px;
    }

    .home-sample-blog-nav-img {
        width: 20px;
        height: 20px;
    }

    .faq-question {
        font-size: 16px;
    }
    
    .faq-answer {
        font-size: 14px;
    }


    #features img {
        height: 46px;
    }

    #howItWorks {
        width: 840px;
        max-width: 90% !important;
    }

    #howItWorksDisplayInnerDiv {
        border-radius: 24px;
    }

    #howItWorksVideoDiv {
        border-radius: 10px;
    }

    #faqs {
        width: 840px;
        max-width: 90% !important;
    }

    .footer-caption {
        font-size: 18px;
    }

    .social-img-btn-footer {
        padding: 12px;
    }

    .social-img-btn-footer img {
        width: 12px;
        height: 12px;
    }

    .btn-footer {
        height: 40px;
    }

    .footer-logo-img {
        height: 60px;
    }

    .footer-logo-name-img {
        height: 38px;
    }

    #collectionsBannerDiv img {
        width: 100%;
    }

    #blogsBannerDiv img {
        width: 100%;
    }

    #aboutUsBannerDiv img {
        width: 100%;
    }

    #aboutUsIntroBannerDiv img {
        width: 100%;
    }

    #bannerDesc {
        font-size: 12px;
    }

    #daphubCommunityContent {
        width: 320px;
        max-width: 90% !important
    }
}

@media all and (max-width: 767px) {
    .home-page-content {
        min-height: calc(100vh - 163px) !important;
    }
}

@media all and (min-width: 768px) {
    .home-page-content {
        min-height: calc(100vh - 84px) !important;
    }
}

@media all and (max-width: 991px) {
    #bannerActionsDiv {
        position: absolute;
        top: calc(60% - 18.5px);
    }
}

@media all and (min-width: 992px) {
    #bannerActionsDiv {
        position: absolute;
        top: calc(50% - 18.5px);
    }
}

@media all and (max-width: 991px) {
    .idea {
        height: 50vh;
        padding-left: 28.125vh;
    }
    #ideasSamplesDiv {
        width: 140.625vh;
    }
    #ideasSamplesDisplayDiv {
        overflow-x: scroll;
    }
}

@media all and (min-width: 992px) {
    .idea {
        width: 20%;
        padding-top: 35.56%;
    }
}

@media all and (max-width: 991px) {
    #communityPostsSamplesVisibleDiv {
        overflow-x: scroll;
    }
    #communityPostsSamplesOuterDiv {
        width: 225%;
        overflow: hidden;
    }
    #communityPostsSamplesDiv {
        width: 275vw;
    }
    .community-post {
        width: 75vw;
        margin-left: calc(-1% * var(--community-post-left-margin-factor) * 2.5);
        margin-right: calc(-1% * var(--community-post-right-margin-factor) * 2.5);
    }
    .inner-community-post {
        height: calc((100vw * 0.75) * (3.0 / 4.0));
    }
}

@media all and (min-width: 992px) {
    #communityPostsSamplesOuterDiv {
        width: 100%;
        overflow: hidden;
    }
    #communityPostsSamplesDiv {
        width: 125%;
    }
    .community-post {
        width: 37.5vw;
        margin-left: calc(-1% * var(--community-post-left-margin-factor) * 5);
        margin-right: calc(-1% * var(--community-post-right-margin-factor) * 5);
    }
    .inner-community-post {
        height: calc((100vw * 0.375) * (3.0 / 4.0));
    }
}

@media all and (max-width: 991px) {
    .daphub-post {
        height: 30vh;
        padding-left: 30vh;
    }
    #daphubPostsSamplesDiv {
        width: 150vh;
    }
    #daphubPostsSamplesOuterDiv {
        overflow-x: scroll;
    }
}

@media all and (min-width: 992px) {
    .daphub-post {
        width: 20%;
        padding-top: 20%;
    }
}

@media all and (max-width: 991px) {
    #reviewsSamplesDiv {
        --max-visible: 1;
        margin-left: calc(-100% * var(--position));
    }
    .review {
        width: calc(100vw * (10 / 12));
    }
}

@media all and (min-width: 992px) {
    #reviewsSamplesDiv {
        --max-visible: 3;
        margin-left: calc(-100% * var(--position) / 3);
    }
    .review {
        width: calc(100vw * (10 / 12) / 3);
    }
}

@media all and (max-width: 991px) {
    .account-menu {
        display: none;
        width: 0%;
    }

    .account-menu-display {
        display: block !important;
        width: 100% !important;
    }

    .account-contents {
        display: none;
        width: 0%;
    }

    .account-contents-display {
        display: block !important;
        width: 100% !important;
    }
}

@media all and (min-width: 992px) {
    .account-menu {
        display: block;
        width: 25%;
    }

    .account-contents {
        display: block;
        width: 75%;
    }

    a.active-menu-item>div {
        background-color: var(--siklenTofu);
        border-right: 2px solid black;
        border-radius: 5%;
        -webkit-border-radius: 5%;
        -moz-border-radius: 5%;
    }
    
    a.active-menu-item span {
        color: black;
    }
}

@media all and (min-width: 992px) {
	.customer-photo-square-container {
		position: relative;
		width: 14.28%;
		padding-top: 14.28%;
	}

	.customer-photo-square-container>div {
		padding: 0.25rem;
	}
}

@media all and (max-width: 991px) {
	.customer-photo-square-container {
		position: relative;
		width: 50%;
		padding-top: 50%;
	}

	.customer-photo-square-container>div {
		padding: 0.125rem;
	}
}

/*
@media all and (max-width: 991px) {
	.customer-photo-collection {
		max-height: calc(100vh - 260px);
		overflow-y: scroll;
	}
}

@media all and (min-width: 992px) {
	.customer-photo-selection {
		max-height: calc(100vh * 0.9 - 96px) !important;
		overflow-y: scroll;
	}
}

@media all and (max-width: 991px) {
	.customer-photo-selection {
		max-height: calc(100vh - 188px);
		overflow-y: scroll;
	}
}
*/


@media all and (min-width: 992px) {
    .customer-photo-collection {
		height: calc(100vh - 238.5px);
	}
    .customer-photo-collection-office {
		height: calc(100vh - 148px);
	}
	.customer-photo-selection {
		height: calc(100% - 97px);
	}
}

@media all and (max-width: 991px) {
    .customer-photo-collection {
		height: calc(100vh - 285.5px);
	}
    .customer-photo-collection-office {
		height: calc(100vh - 159px);
	}
	.customer-photo-selection {
		height: calc(100% - 142px);
	}
}




@media all and (min-width: 992px) {
	.customer-social-photo-album-container {
		width: 20%;
		padding: 0.5rem;
	}

	.customer-social-photo-container {
		width: 12.5%;
		padding: 0.25rem;
	}
}

@media all and (max-width: 991px) {
	.customer-social-photo-album-container {
		width: 50%;
		padding: 0.25rem;
	}

	.customer-social-photo-container {
		width: 25%;
		padding: 0.125rem;
	}
}

@media all and (min-width: 992px) {
	.picture-upload-main {
		height: 100% !important;
	}
}

@media all and (max-width: 991px) {
	.picture-upload-main {
		height: calc(100% - 88px) !important;
	}
}

@media all {
	.customer-social-photo-albums-display>.d-flex>div>.d-flex>a {
		display: none !important;
	}
	.customer-social-photo-albums-display>.d-flex>.form-check {
		display: none !important;
	}
	.customer-social-photo-albums-display>.flex-fill {
		height: calc(100% - 106px) !important;
	}
	.customer-social-photo-albums-display>.btn {
		display: none !important;
	}
}



@media all and (min-width: 992px) {
	.about-us-intro-txt-left {
		width: 62.73% !important;
	}
    .about-us-intro-txt-right {
		width: 37.27% !important;
	}
    .about-us-story-left {
        width: 55% !important;
    }
    .about-us-story-right {
        width: 45% !important;
    }
    .about-us-create-together {
        width: 60% !important;
        padding-top: 50%;
        padding-left: 0rem !important;
        padding-right: 0.25rem !important;
    }

    .about-us-create-together > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: calc(100% - 0.25rem) !important;
        height: 100%;
        border-radius: 8px; 
    }

    .about-us-vision {
        width: 40% !important;
        padding-top: 50%;
        padding-left: 0.25rem !important;
        padding-right: 0rem !important;
    }

    .about-us-vision > div {
        position: absolute;
        top: 0rem;
        left: 0.25rem; 
        width: calc(100% - 0.25rem) !important;
        height: 100%;
        border-radius: 8px; 
    }

    .terms-and-conditions-intro-txt-left {
		width: 62.73% !important;
	}
    .terms-and-conditions-intro-txt-right {
		width: 37.27% !important;
	}

    .contact-us-content-left {
		width: 62.73% !important;
	}
    .contact-us-content-right {
		width: 37.27% !important;
        border-radius: 0 8px 8px 0;
	}
}

@media all and (max-width: 991px) {
	.about-us-intro-txt-left {
		width: 100% !important;
	}
    .about-us-intro-txt-right {
		width: 100% !important;
	}
    .about-us-story-left {
        width: 100% !important;
    }
    .about-us-story-right {
        width: 100% !important;
    }
    .about-us-create-together {
        width: 100% !important;
        padding-top: 120% !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
        margin-bottom: 0.5rem;
    }

    .about-us-create-together > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px; 
    }

    .about-us-vision {
        width: 100% !important;
        padding-top: 125% !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }

    .about-us-vision > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px;
    }

    .terms-and-conditions-intro-txt-left {
		width: 100% !important;
	}
    .terms-and-conditions-intro-txt-right {
		width: 100% !important;
	}

    .contact-us-content-left {
		width: 100% !important;
        border-radius: 8px;
        overflow: hidden;
	}
    .contact-us-content-right {
		width: 100% !important;
        border-radius: 8px;
	}
}

@media all and (max-width: 991px) {
    #displayPhotoPatternTilesInnerDiv {
        margin-left: calc((100vw - 24px) * ((1 / 6 ) - var(--position) * (4 / 6)));
    }
    #displayPhotoArtTilesInnerDiv {
        margin-left: calc((100vw - 24px) * ((1 / 6 ) - var(--position) * (4 / 6)));
    }
    #displayPhotoTilesInnerDiv {
        margin-left: calc((100vw - 24px) * ((1 / 6 ) - var(--position) * (4 / 6)));
    }
    .photo-tile {
        width: calc((100vw - 24px) * (4 / 6));
    }
}

@media all and (max-width: 991px) {
    #selectFromArtLibraryModal_artCategoriesDiv {
        height: 100px;
        overflow-y: scroll;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #selectFromArtLibraryModal_artCategoriesDiv a p {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #selectFromArtLibraryModal_artLibraryItemsOuterDiv {
        height: calc(100% - 100px);
    }

    #selectFromArtLibraryModal_artLibraryItemsDiv {
        height: calc(100% - 144px);
    }
}

@media all and (min-width: 992px) {
    #selectFromArtLibraryModal_artCategoriesDiv {
        height: 100%;
        overflow-y: scroll;
    }
    #selectFromArtLibraryModal_artCategoriesDiv a p {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    #selectFromArtLibraryModal_artLibraryItemsOuterDiv {
        height: 100%;
    }
    #selectFromArtLibraryModal_artLibraryItemsDiv {
        height: calc(100% - 111px);
    }
}

@media all and (min-width: 992px) {
    .photo-tile {
        width: calc((100vw - 24px) * (7 / 12) - 8px);
        max-width: 600px !important;
    }
}

@media all and (max-width: 991px) {
    .picture-label-font {
        font-size: 8px !important;
    }
}

@media all and (min-width: 992px) {
    .picture-label-font {
        font-size: 12px !important;
    }
}

.animate-loader {
	border: 8px solid #f3f3f3;
	border-radius: 50%;
	border-top: 1px solid var(--pixelWhite);
	border-right: 1px solid var(--pixelWhite);
	border-bottom: 2px solid var(--lead);
	border-left: 2px solid var(--lead);
	width: 14px;
	height: 14px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes slideRight1 {
    0%   {left: 0%;}
    100% {left: 100%;}
}

@keyframes slideRight2 {
    0%   {left: 0%;}
    85.71% {left: 85.71%;}
    85.72% {left: -14.28%;}
    100% {left: 0%;}
}

@keyframes slideRight3 {
    0%   {left: 0%;}
    71.42% {left: 71.42%;}
    71.43% {left: -28.57%;}
    100% {left: 0%;}
}

@keyframes slideRight4 {
    0%   {left: 0%;}
    57.14% {left: 57.14%;}
    57.15% {left: -42.86%;}
    100% {left: 0%;}
}

@keyframes slideRight5 {
    0%   {left: 0%;}
    42.86% {left: 42.86%;}
    42.87% {left: -57.14%;}
    100% {left: 0%;}
}

@keyframes slideRight6 {
    0%   {left: 0%;}
    28.57% {left: 28.57%;}
    28.58% {left: -71.42%;}
    100% {left: 0%;}
}

@keyframes slideRight7 {
    0%   {left: 0%;}
    14.28% {left: 14.28%;}
    14.29% {left: -85.71%;}
    100% {left: 0%;}
}