/* 
  DEMO CSS 
*/
.demo-colors {
    background: white; 
    top: 200px; 
    width: 224px; 
    height: 390px; 
    left: -224px; 
    transition: .5s all linear; 
    border: 1px solid var(--color-1); 
    border-radius: 0 0 2rem 0;
    z-index: 1090;
}

.demo-colors.opened {
    left: 0px; 
}

.demo-opener {
    background: var(--color-1); 
    width: 50px; 
    height: 50px; 
    top: -1px; 
    left: 222px; 
    position: absolute; 
    border-radius: 0 1rem 1rem 0;
    cursor: pointer;
}

.demo-opener > i {
    color: white;
}

.demo-colors-content > p {
    font-weight: 500; 
    font-size: 1.25rem; 
    color: var(--color-2);
}

.demo-colors-subtitle {
    font-weight: 500; 
    color: var(--color-2);
}

.demo-colors-selector {
    width: 40px; 
    height: 40px; 
    border-radius: .5rem; 
    cursor: pointer;
}

.demo-colors-selector > i {
    color: white;
}

.demo-colors-selector.selected > i {
    display: block !important;
}

.demo-colors-selectors > .col:nth-child(1) .demo-colors-selector {
    background: #d92067;
}

.demo-colors-selectors > .col:nth-child(2) .demo-colors-selector {
    background: #334155;
}

.demo-colors-selectors > .col:nth-child(3) .demo-colors-selector {
    background: #323EDD;
}

.demo-colors-selectors > .col:nth-child(4) .demo-colors-selector {
    background: #00712D;
}

.demo-colors-selectors > .col:nth-child(5) .demo-colors-selector {
    background: #C7253E;
}

.demo-colors-selectors > .col:nth-child(6) .demo-colors-selector {
    background: #FABC3F;
}

.demo-colors-selectors > .col:nth-child(7) .demo-colors-selector {
    background: #8e55e9;
}

.demo-colors-selectors > .col:nth-child(8) .demo-colors-selector {
    background: #088395;
}

html.dark-mode {
    .demo-colors {
        background: var(--dark-color);
        border-color: var(--dark-border-1);
    }
}