.lm-color {
    background-color: #fff;
    line-height: initial;
    box-sizing: border-box;
    position: relative;
}

.lm-color-options {
    display: none;
}

.lm-modal > div > .lm-color-options {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--lm-border-color, #ccc);
}

.lm-modal > div > .lm-color-options button {
    border: 0;
    background-color: transparent;
    text-transform: uppercase;
    cursor: pointer;
    padding: 15px;
    font-weight: bold;
}

.lm-color-grid {
    width: 100%;
    height: 100%;
}

.lm-color-grid table {
    width: 100%;
    height: 100%;
}

.lm-color-grid tr:first-child>td:first-child {
    border-top-left-radius: 3px;
}

.lm-color-grid tr:first-child>td:last-child {
    border-top-right-radius: 3px;
}

.lm-color-grid tr:last-child>td:first-child {
    border-bottom-left-radius: 3px;
}

.lm-color-grid tr:last-child>td:last-child {
    border-bottom-right-radius: 3px;
}

.lm-color-selected {
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='black'/%3E%3C/svg%3E");
}

.lm-color-hsl {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
}

.lm-color-hsl canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 3px;
    -webkit-user-drag: none;
}

.lm-color-point {
    height: 4px;
    width: 4px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    outline: 1px solid white;
}

.lm-color-input {
    padding-right: 24px !important;
    box-sizing: border-box;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="gray"><g><rect fill="none" height="24" width="24"/></g><g><g><g><g><path d="M12,22C6.49,22,2,17.51,2,12S6.49,2,12,2s10,4.04,10,9c0,3.31-2.69,6-6,6h-1.77c-0.28,0-0.5,0.22-0.5,0.5 c0,0.12,0.05,0.23,0.13,0.33c0.41,0.47,0.64,1.06,0.64,1.67C14.5,20.88,13.38,22,12,22z M12,4c-4.41,0-8,3.59-8,8s3.59,8,8,8 c0.28,0,0.5-0.22,0.5-0.5c0-0.16-0.08-0.28-0.14-0.35c-0.41-0.46-0.63-1.05-0.63-1.65c0-1.38,1.12-2.5,2.5-2.5H16 c2.21,0,4-1.79,4-4C20,7.14,16.41,4,12,4z"/><circle cx="6.5" cy="11.5" r="1.5"/><circle cx="9.5" cy="7.5" r="1.5"/><circle cx="14.5" cy="7.5" r="1.5"/><circle cx="17.5" cy="11.5" r="1.5"/></g></g></g></g></svg>') top 50% right 1px no-repeat;
}

.lm-color .lm-modal {
    min-width: initial;
    min-height: initial;
}

.lm-color .lm-tabs {
    flex-grow: 1;
    display: inline-flex;
    flex-direction: column;
    margin-top: 10px;
    min-width: 260px;
    min-height: 190px;
}

.lm-color .lm-tabs-content {
    display: flex;
    flex-grow: 1;
    margin-top: 4px;
}

.lm-color .lm-tabs .lm-tabs-content > div {
    flex-grow: 1;
    padding: 10px;
}