.colors-mixing-guide .colors-mixing-block {
    background-color: #FAFAFF;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 15px;
}
.colors-mixing-guide .colors-mixing-block img {
    height: auto;
}
.colors-mixing-guide .colors-mixing-block-secondary {
    background-color: #e4f1f1;
}
.colors-mixing-guide .colors-mixing-block-secondary hr {
    border-color: #bdbdbd;
}
.colors-mixing-guide .colors-mixing-block .rounded-text {
    background-color: #EAE8FF;
    border-radius: 20px;
    border: 1px dashed #605CF3;
    padding: 10px 15px;
    margin-bottom: 15px;
}
.colors-mixing-guide .grid-two-columns {
    display: grid;
    grid-template-columns: auto auto;
    gap: 25px;
}
.colors-mixing-guide .colors-mixing-block .h4,
.colors-mixing-guide .colors-mixing-block .h3,
.colors-mixing-guide .colors-mixing-block h2,
.colors-mixing-guide .colors-mixing-block p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.colors-mixing-guide .colors-mixing-block p {
    flex-wrap: wrap;
}
.colors-mixing-guide .colors-mixing-block .empty-space {
    height: 30px;
}
.colors-mixing-guide .colors-mixing-block p span:last-child {
    margin-left: 5px;
}
.colors-mixing-guide .colors-mixing-block p span.shades:last-child,
.colors-mixing-guide .colors-mixing-block p span.tones:last-child,
.colors-mixing-guide .colors-mixing-block p span.tints:last-child {
    margin-left: 0;
}
.colors-mixing-guide .grid-colors-mixing-cycle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
@media (max-width: 768px) {
    .colors-mixing-guide .grid-colors-mixing-cycle {
        display: grid;
        grid-template-columns: auto;
        gap: 0;
    }
}
.colors-mixing-guide .colors-mixing-color-block {
    display: inline-block;
    height: 23px;
    width: 23px;
    border-radius: 6px;
    margin-right: 3px;
    margin-top: 3px;
}
.colors-mixing-color-block.red {
    background-color: #FF2600;
}
.colors-mixing-color-block.blue {
    background-color: #0200E2;
}
.colors-mixing-color-block.yellow {
    background-color: #FEEF00;
}
.colors-mixing-color-block.black {
    background-color: black;
}
.colors-mixing-color-block.white {
    background-color: white;
    border: 2px solid #d5d5d5;
    height: 26px;
    width: 26px;
}
.colors-mixing-color-block.magenta {
    background-color: #E80974;
}
.colors-mixing-color-block.violet {
    background-color: #E305E6;
}
.colors-mixing-color-block.purple {
    background-color: #7302E6;
}
.colors-mixing-color-block.teal {
    background-color: #00E0E2;
}
.colors-mixing-color-block.green {
    background-color: #00CB00;
}
.colors-mixing-color-block.chartreuse {
    background-color: #B3E10F;
}
.colors-mixing-color-block.amber {
    background-color: #FAC712;
}
.colors-mixing-color-block.orange {
    background-color: #FFA100;
}
.colors-mixing-color-block.vermilion {
    background-color: #F25622;
}
.colors-mixing-color-block.gray {
    background-color: #7F8687;
}
.colors-mixing-color-block.maroon {
    background-color: #960502;
}
.colors-mixing-color-block.pink {
    background-color: #F9493F;
}
.colors-mixing-color-block.brown {
    background-color: #63360D;
}
.colors-mixing-color-block.navy {
    background-color: #040186;
}
.colors-mixing-color-block.baby-blue {
    background-color: #8988FE;
}
.colors-mixing-color-block.tints-1 {
    background-color: #7C7B79;
}
.colors-mixing-color-block.tints-2 {
    background-color: #3A89C2;
}
.colors-mixing-color-block.tints-3 {
    background-color: #B7D3E6;
}
.colors-mixing-color-block.tints-4 {
    background-color: #B999D9;
}
.colors-mixing-color-block.tints-5 {
    background-color: #B8B8B8;
}
.colors-mixing-color-block.tints-6 {
    background-color: #F6B78D;
}
.colors-mixing-color-block.tints-7 {
    background-color: #7ABEA1;
}
.colors-mixing-color-block.tints-8 {
    background-color: #F8F8B8;
}
.colors-mixing-color-block.tints-9 {
    background-color: #7EACE1;
}
.colors-mixing-color-block.tints-10 {
    background-color: #F7F883;
}

.colors-mixing-color-block.tones-1 {
    background-color: #E1C04C;
}
.colors-mixing-color-block.tones-2 {
    background-color: #6491CA;
}
.colors-mixing-color-block.tones-3 {
    background-color: #9DB462;
}
.colors-mixing-color-block.tones-4 {
    background-color: #EABE4D;
}
.colors-mixing-color-block.tones-5 {
    background-color: #DC944A;
}
.colors-mixing-color-block.tones-6 {
    background-color: #DA753D;
}
.colors-mixing-color-block.tones-7 {
    background-color: #509BB2;
}
.colors-mixing-color-block.tones-8 {
    background-color: #6C78AB;
}
.colors-mixing-color-block.tones-9 {
    background-color: #CB6E9F;
}
.colors-mixing-color-block.tones-10 {
    background-color: #B09C05;
}

.colors-mixing-color-block.shades-1 {
    background-color: #0B0A42;
}
.colors-mixing-color-block.shades-2 {
    background-color: #113B3A;
}
.colors-mixing-color-block.shades-3 {
    background-color: #3A0A41;
}
.colors-mixing-color-block.shades-4 {
    background-color: #083F0A;
}
.colors-mixing-color-block.shades-5 {
    background-color: #6B3511;
}
.colors-mixing-color-block.shades-6 {
    background-color: #160611;
}
.colors-mixing-color-block.shades-7 {
    background-color: #771522;
}
.colors-mixing-color-block.shades-8 {
    background-color: #082533;
}
.colors-mixing-color-block.shades-9 {
    background-color: #546322;
}
.colors-mixing-color-block.shades-10 {
    background-color: #0A1C2A;
}
.colors-mixing-guide .colors-mixing-spectrum {
    position: relative;
    padding-bottom: 40px;
}
.colors-mixing-guide .colors-mixing-spectrum .spectrum-line {
    background: linear-gradient(90deg, #F40032 5%, #FAF000 20%, #4AF807 40%, #00F3EE 60%, #0008F9 80%, #E802ED 95%);
    height: 28px;
    border-radius: 6px;
    width: 100%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note {
    position: absolute;
    text-align: center;
    top: 0px;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note:before {
    content: '';
    display: block;
    margin: 0 auto;
    height: 45px;
    width: 1px;
    background-color: #000;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-1 {
    left: 0%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-2 {
    left: 17%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-3 {
    left: 40%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-4 {
    right: 35%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-5 {
    right: 20%;
}
.colors-mixing-guide .colors-mixing-spectrum .line-note-6 {
    right: 0%;
}