/* Holders for the Color Page */

 .ColorPaletteWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: -3.2rem;
    margin-left: -3.2rem;
}

  .ColorPalette {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
    flex: 1 1 25rem;
    padding-top: 3.2rem;
    padding-right: 3.2rem;
}

.ColorPaletteShade {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 3rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
    font-size: 1rem;
    color: #fff;
    /*background-color: #f4f6f8;*/
}


.ColorPaletteLabel {
    display: block;
}

.ColorPaletteHex, .ColorPaletteScss {
    display: block;
    white-space: nowrap;
    float: right;
}

.ColorPaletteShade.hasDarkText {
    color: #161d25;
}

.ColorPaletteLabel, .ColorPaletteValue {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
}

.ColorPaletteShade.isExpanded {
    height: 7.8rem;
}

.ColorPaletteShade:first-child {
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
}

.ColorPaletteShade:last-child {
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}