/*--------------------------------------------------------------
# Shape
--------------------------------------------------------------*/

.shape {
    position: absolute;
    pointer-events: none;
    background-repeat: repeat-y;
    height: 100%;
    bottom: 0;
}
.shape.shape-single {
    background: url('/images/svg/shape-chevron-single.svg');
}
.shape.regular-shape {
    background: url('/images/svg/shape-chevrons-filled.svg');
}

/* Treatment detail page - shape */
.shape.treatment-detail-shape {
    background: url('/images/svg/shape-chevrons.svg');
    z-index: -1;
}


/* Footer - shape */
.shape.footer-shape[data-position='center right'] {
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 0.435;
    height: 700px;
    opacity: 0.075;
    transform: translateX(33%);
}






/*--------------------------------------------------------------
# Shape - sizes
--------------------------------------------------------------*/

.shape[data-size='regular'] {
    width: 30rem;
    height: 100%;
}


/*--------------------------------------------------------------
# Shape - positions
--------------------------------------------------------------*/

.shape[data-position='top-left'] {
    top: 0;
    left: 0;
    bottom: 0;
    background-position: top left;
}

.shape[data-position='top-right'] {
    top: 0;
    right: 0;
    bottom: 0;
    background-position: top right;
    background-repeat: no-repeat;
}

.shape[data-position='center right'] {
    top: 0;
    right: 0;
    bottom: 0;
}


/*--------------------------------------------------------------
# Shape - utility classes
--------------------------------------------------------------*/

.shape.flip {
    transform: scaleX(-1);
}

.shape.repeat-y {
    background-repeat: repeat-y;
}


/*--------------------------------------------------------------
# Shape - media querys
--------------------------------------------------------------*/

@media all and (max-width: 992px) {

    /*.shape.footer-shape[data-position='center right'] {*/
    /*    width: 20em;*/
    /*    background-size: cover;*/
    /*    background-repeat: no-repeat;*/
    /*}*/

}

@media all and (max-width: 768px) {

    .shape.treatment-detail-shape {
        width: 20rem;
        background-size: contain;
    }

    /*.shape.footer-shape[data-position='center right'] {*/
    /*    width: 15rem;*/
    /*}*/

}

@media all and (max-width: 575px) {

    .shape.treatment-detail-shape {
        width: 15rem;
        background-size: contain;
    }

    /*.shape.footer-shape[data-position='center right'] {*/
    /*    width: 7rem;*/
    /*}*/

}