﻿#root-content-flex > .dexter-FlexContainer-Items > *:nth-child(1),
#root-content-flex-copy > .dexter-FlexContainer-Items > *:nth-child(1) {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: auto;
}

#root-content-flex > .dexter-FlexContainer-Items > *:nth-child(2) {
    width: 83.333333%;
    max-width: 83.333333%;
    flex: 1 1 auto;
    min-height: auto;
}

#colors-bar-items > .dexter-FlexContainer-Items {
    min-height: 10px;
}

#colors-bar-items {
    background-color: #9999FB;
}

#colors-bar {
    background-color: #000000;
    color: #FFFFFF;
}

#colors-bar > .dexter-FlexContainer-Items {
    margin: -20px;
}

#colors-bar > .dexter-FlexContainer-Items > * {
    border: 0 solid transparent;
    border-width: 20px;
}

#colors-bar > .dexter-FlexContainer-Items > *:nth-child(1),
#colors-bar > .dexter-FlexContainer-Items > *:nth-child(5) {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: auto;
}

#colors-bar > .dexter-FlexContainer-Items > *:nth-child(2),
#colors-bar > .dexter-FlexContainer-Items > *:nth-child(3),
#colors-bar > .dexter-FlexContainer-Items > *:nth-child(4) {
    width: 300px;
    max-width: 300px;
    min-height: auto;
}

@media screen and (min-width: 1200px) {
    #colors-bar > .dexter-FlexContainer-Items {
        margin: -10px;
    }

    #colors-bar > .dexter-FlexContainer-Items > * {
        border-width: 10px;
    }

    #colors-bar > .dexter-FlexContainer-Items > *:nth-child(2),
    #colors-bar > .dexter-FlexContainer-Items > *:nth-child(3),
    #colors-bar > .dexter-FlexContainer-Items > *:nth-child(4) {
        width: 25%;
        max-width: 25%;
        flex: 1 1 auto;
        min-height: auto;
    }
}
