#sr-colorpicker {
     width: 310px;
     position: absolute;
     z-index: 98;
     background: #ffffff;
     color: #666666;
     border: 1px solid #666666;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
     border-radius: 2px;
     -webkit-transform:none;
     transform:none;
}
#sr-colorpicker-title {
     width: 100%;
     display: block;
     text-align: center;
     height: 30px;
     line-height: 30px;
     font-size: 16px;
     background-color: #01406b;
     color: #ffffff;
}
#sr-colorpicker-canvas {
     width: 120px;
     height: 120px;
     cursor: pointer;
     border-radius: 0px;
}
#sr-colorpicker-box {
     display: block;
     width: 100%;
     text-align: left;
     padding: 5px;
}
#sr-colorpicker-blocks {
     display: inline-flex;
     min-width:162px;
     max-width:162px;
     width:162px;
     gap:4px;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     flex-direction:row;
     text-align: left;
     padding: 4px;
     vertical-align: top;
}
#sr-colorpicker-selector {
     display: inline-block;
     width: 120px;
     height: 120px;
     vertical-align: top;
}
#sr-colorpicker-results {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 30px;
     line-height: 30px;
     padding: 0 4px;
}
#sr-colorpicker-indicator {
     width: 24px;
     height: 24px;
     display: inline-block;
     border: 1px solid rgba(0, 0, 0, 0.25);
     background: transparent;
     vertical-align: middle;
     cursor:pointer;
     border-radius:2px;
}
#sr-colorpicker-controls {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 30px;
     line-height: 30px;
     padding: 0 4px;
}
#sr-colorpicker-rgb,
#sr-colorpicker-hex {
     width: 152px;
     height: 24px;
     line-height: 24px;
     font-size: 12px;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     border: 1px solid rgba(0, 0, 0, 0.25);
     background: transparent;
     color: #666666;
     border-radius:2px;
}
#sr-colorpicker-hex {
     width: 70px;
}
#sr-colorpicker-hex:focus {
     background: #ffffff;
     color: #666666;
}
.sr-colorpicker-color {
     width: 20px;
     height: 20px;
     display: inline-block;
     cursor: pointer;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius:2px;
}
#sr-colorpicker-last {
     height: 24px;
     width: 24px;
     cursor: pointer;
     position: relative;
     top: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     margin-top: 0;
     border-radius:2px;
}
.sr-colorpicker-color:hover {
     box-shadow: none;
}
.sr-colorpicker-color:active {
     box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25);
}
.sr-colorpicker-linebreak {
     width: 90%;
     margin: 10px 6px 5px 6px;
     background-color: rgb(150, 150, 150);
     height: 1px;
}

.sr-colorpicker-button {
     border: 1px solid #114779;
     width: 24px;
     height: 24px;
     line-height: 24px;
     margin: 1px 2px 2px 2px;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
     display: inline-block;
     vertical-align: middle;
     border-radius: 2px;
     cursor: pointer;
     box-sizing: border-box;
     text-align: center;
}

#sr-colorpicker-cancel,
#sr-colorpicker-clear,
#sr-colorpicker-select {
     width: 70px;
     display: inline-block;
}

.sr-colorpicker {
     width: 20px;
     height: 20px;
     display: inline-block;
     border: 1px solid #000;
     background-color: #fff;
     -webkit-appearance: none;
     outline: none;
}