/** Shopify CDN: Minification failed

Line 67:9 Expected ":"

**/
#sizeChartModal {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #000c;;
    z-index: 100;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 6rem;
    align-items: flex-end;
    gap: 2rem;
}

#sizeChartModal.active {
  display: flex;
  opacity: 1;
}

#sizeChartModal .closeIcon {
    cursor: pointer;
    width: 40px;
    height: 40px;
    max-height: 40px;
    max-width: 40px;
    min-height: 40px;
    min-width: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--burgundy);
    border: none;
    position: absolute;
    top: 2rem; 
    right: 2rem;
    z-index: 101;
}
#sizeChartModal .chartContainer {
    background: var(--burgundy);
    width: 100%;
    display: block;
    padding: 10px;
    position: relative;
}

#sizeChartModal .toggleContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width 100%;
}

#sizeChartModal .toggleContainer .toggle-switch {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  width: -webkit-fit-content;
  overflow: hidden;
  justify-content: center;
  cursor: pointer;
  border-radius: 2rem;
  background: rgba(249, 246, 236, 0.2);
}

#sizeChartModal .toggleContainer .text-cm.active,
#sizeChartModal .toggleContainer .text-inches.active {
    background: var(--offwhite);
    color: var(--burgundy);
    border-radius: 2rem;
} 

#sizeChartModal .toggleContainer .text-inches,
#sizeChartModal .toggleContainer .text-cm {
   color: var(--offwhite);
   padding: 0.5rem 1rem;
}

#sizeChartModal .chartContainer .inner {
    width: 100%;
    border: 1px solid var(--cream);
    padding: 4rem 0;
}

#sizeChartModal .chartContainer .inner .variantIcon {
    margin: auto;
    display: block;
    text-align: center;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    object-fit: cover;
    max-width: 100px;
    max-height: 100px;
}

#sizeChartModal .chartContainer .inner .chartContent {
    width: 100%;
    max-width: 80%;
    margin: auto;
    text-align: center;
    display: block;
    position: relative;
    padding: 2rem 0 0 0;
}

#sizeChartModal .chartContainer .inner .chartContent .row {
    position: relative;
    width: 100%;
}

#sizeChartModal .chartContainer .inner .chartContent .row ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
}
#sizeChartModal .chartContainer .inner .chartContent .row ul li {
    width: 25%;
    position: relative;
    text-align: center;
    padding: 1rem 0;
}
#sizeChartModal .chartContainer .inner .chartContent .row .mobileShow {
    display: none;
}
@media only screen and (max-width: 1024px){
    #sizeChartModal .chartContainer .inner h2 {
        padding: 0 4rem;
    }
}
@media only screen and (max-width: 800px){
    #sizeChartModal {padding: 4rem 2rem;}
    #sizeChartModal .chartContainer {
        max-height: calc(80vh);
        overflow: hidden;
        position: relative;
    }
    #sizeChartModal .chartContainer .inner {
        max-height: 100%;
        overflow: scroll;
    }
    #sizeChartModal .chartContainer .inner .chartContent .row.chartHeadings {
        display: none;
    }
    #sizeChartModal .chartContainer .inner .chartContent .row .mobileShow {
        display: block;
    }
    #sizeChartModal .chartContainer .inner .chartContent .row ul {
        flex-wrap: wrap;
    }
    #sizeChartModal .chartContainer .inner .chartContent .row ul li.sizes {
        width: 100%; 
        display: block; 
        margin: auto; 
        text-align: left;
    }
    #sizeChartModal .chartContainer .inner .chartContent .row {
        border-bottom: 1px solid rgba(187, 158, 127, 0.4);
    }
    #sizeChartModal .chartContainer .inner .chartContent .row ul li.measurements {
        width: 33.33%;
        text-align: left;
    }
}