.shape-container {
    position: relative
}

.shape[class*=text-] > svg [fill]:not([fill=none]) {
    fill: currentColor !important
}

.shape {
    position: absolute;
    z-index: -1
}

.shape-top {
    top: 0;
    left: 0;
    right: 0
}

.shape-top > svg {
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center
}

.shape-bottom {
    bottom: 0;
    left: 0;
    right: 0
}

.shape-bottom > svg {
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

.shape-start {
    top: 0;
    left: 0;
    bottom: 0
}

.shape-start > svg {
    width: auto;
    height: 100%;
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.shape-end {
    top: 0;
    right: 0;
    bottom: 0
}

.shape-end > svg {
    width: auto;
    height: 100%;
    -webkit-transform-origin: right center;
    transform-origin: right center
}

.zi-1 {
    z-index: 1 !important;
}