.color-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.color-selector dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
  
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    animation-name: overlayIn;
    animation-duration: .6s;
}

.color-selector dialog>* {
    z-index: 10001;
    animation-name: dialogIn;
    animation-duration: .6s;
}
  
@keyframes dialogIn {
    0%   { transform: scale(.9,.9) }
    100% { transform: scale(1,1) }
}
  
.color-selector dialog::before {
      content:"";
      display: block;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(100, 100, 100, .6);
}
  
@keyframes overlayIn {
    0%   { opacity: 0 }
    100% { opacity: 1 }
}
/******** Color Circle *************/
.color-circle {
    min-height: 3rem;
    min-width: 3rem;
    border-radius: 2rem;
    margin: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: solid 1px var(--divider-color);
}

.color-circle.small {
    min-height: 1.5rem;
    min-width: 1.5rem;
    margin: .2rem .5rem .2rem 0 ;
}

.color-circle.empty {
    border: dashed 2px var(--divider-color);
}

.color-circle:hover {

}

.color-circle>.color-name {
    padding: 0 1rem;
}

.color-circle >.remove-icon {
    display: none;
}
.color-circle:hover >.remove-icon {
    display: flex;
}

.color-circle:hover >.empty-label {
    display: block;
}

/******** Pantone Square **********/

.pantone-square {
    min-height: 3rem;
    min-width: 3rem;
    margin: .5rem;
    cursor: pointer;
    border: solid 1px var(--divider-color);
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}
.pantone-square>div {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 600;
}

/************* Color Picker ****************/

.color-picker {
    box-shadow: var(--shadow1);
    background-color: var(--paper-color);
    display: flex;
    flex-direction: column;
}

.color-picker>.color-selection {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-shadow: 1px 1px #333;
}

.color-picker>.basics {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.color-picker .flexbox-fix {
    display: none !important;
}

.color-picker * {
    box-shadow: none !important;
}

.color-picker>footer {
    display: flex;
}

.color-picker>footer>.button {
    flex: 1
}

/************* Color Line ****************/
.color-picker>.list-box {
    max-height: 10rem !important;
}

.color-picker .list-item-box {
    min-height: 2rem !important;
}

.color-line {
    flex: 1;
    display: flex;
    align-items: center;
    height: 2rem;
}

.color-line>.color-name {
    flex: 1;
}

.color-square {
    height: 2rem;
    width: 2rem;
    margin-right: 1rem;
    border: solid 1px #AAA;
}