.page-content {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.content-part {
    width: 50%;
}

.__desktop {
    display: block;
}
.__mobile {
    display: none;
}

@media only screen and (max-width: 1050px) {
    .__desktop {
        display: none;
    }
    .__mobile {
        display: block;
    }

    .content-part {
        width: 100%;
    }
}



/* Styles for option groups */

.option-group {
    background: #CBE6FF;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

.option-group label {
    display: flex;
    border: 1px solid #ccc;
    padding: 10px 30px;
    cursor: pointer;
    text-align: center;
}

.option-group input[type="radio"] {
    display: none;
}

.option-group label:hover {
    border: 1px solid #000;
}

.option-group input[type="radio"]:checked + label {
    border: 2px solid #000;
}

.vertical-group {
    display: flex;
    flex-direction: column;
}

.product__option-wrapper {
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.option-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}





/* Styles for uploaded images and image preview */

#uploaded-images-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.preview-image-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2%;
}

.uploaded-image-box {
    width: 100px;
    height: 100px;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    justify-content: center;
}
@media only screen and (max-width: 550px) {
    .uploaded-image-box {
        width: 50px;
        height: 50px;
    }
    .option-group {
        display: flex;
        flex-direction: column;
    }
    .option-group label {
        text-align: left;
    }
}
.uploaded-image-box img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

.image-display {
    margin-top: 20px;
    text-align: center;
    position: relative;
    display:flex; 
    justify-content: center; 
    align-items: center;
}
#preview-image {
    max-width: 100%;
}


/* IMAGE PREVIEW  */

.canvas-wrapper.stick {
    z-index: 100;
    position: fixed;
    top: 0;
}

input[name="small-preview-image"]:checked + label {
    border: 3px solid #0e459d;
}

.canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin: auto;
}

.square-cut {
    position: absolute;
    z-index: 99;
    width: 25px;
    height: 25px;
    background: white;
}

#left-top-square {
    left: 0px;
    top: 0px;
}

#right-top-square {
    right: 0px;
    top: 0px;
}

#right-bottom-square {
    right: 0px;
    bottom: 0px;
}

#left-bottom-square {
    left: 0px;
    bottom: 0px;
}

.border-cut {
    background: black;
    opacity: 20%;
}

.horizontal__ {
    width: 100%;
    height: 25px;
    position: absolute;
    z-index: 98;
}

.vertical__ {
    height: 100%;
    width: 25px;
    position: absolute;
    z-index: 98;
}

#top-border-cut {
    top: 0px;
}

#right-border-cut {
    top: 0px;
    right: 0px;
}

#bottom-border-cut {
    bottom: 0px;
}

#left-border-cut {
    top: 0px;
    left: 0px;
}


#collage-image-display {
    display: none;
}

.option-price {
    text-decoration: line-through;
}

.option-discounted-price {
    font-weight: bold;
    color: #f43d3d;
}


/* Styles for summary section */
.price-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.price-box {
    border: 1px solid #ccc;
    padding: 10px;
}
#total-price-box p:first-child,
#discounted-price-box p:first-child {
    font-weight: bold;
    margin-bottom: 10px;
}
#total-price,
#total-discounted-price {
    font-size: 20px;
    font-weight: bold;
}
#discounted-price-text {
    color: #ccc;
    font-size: 12px;
    margin-bottom: 5px;
}

/* Styles for section headings */
.section {
    margin-bottom: 20px;
    font-weight: bold;
}
#image-preview-section,
#collage-layout-section,
#formats-section,
#products-section,
#attribute-groups-section,
#summary-section {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}
#formats-section,
#products-section,
#attribute-groups-section,
#summary-section {
    border-bottom: 1px solid #ccc;
}




input {
    height: 40px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 40px;
}
.toggle-wrapper {
    flex: 1 1 calc(100% / 3);
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
@media (max-width: 960px) {
    .toggle-wrapper {
        flex: 1 1 calc(100% / 2);
    }
}
@media (max-width: 700px) {
    .toggle-wrapper {
        flex: 1 1 100%;
    }
}


* {
    box-sizing: border-box;
}
*:before, *:after {
    content: '';
    position: absolute;
}

.toggle {
    position: relative;
    display: inline-block;
}
label.toggle-item {
    width: 7em;
    background: #0e459d;
    height: 2em;
    display: inline-block;
    border-radius: 50px;
    border: 2px solid #0e459d;
    position: relative;
    transition: all 0.3s ease;
    transform-origin: 20% center;
    cursor: pointer;
}
label.toggle-item:before {
    display: block;
    transition: all 0.1s ease;
    width: 1.3em;
    height: 1.3em;
    top: 0.25em;
    left: 0.25em;
    border-radius: 2em;
    background: #eee01a;
    transition: 0.3s ease;
}
#image-orientation:checked + label {
    transform: rotate(90deg);
}
#image-orientation:checked + label:before {
    transform: translateX(80px);
    transition-delay: 0.1s;
    transition: 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s;
}