.paletteButtonClass{
    background:transparent;
    border:none;
    border-radius: 4px;
}
.paletteButtonClass:hover > img{
    filter:drop-shadow(3px 3px 3px black);
}
.paletteButtonClass:active > img{
    filter:hue-rotate(90deg);
}
.paletteButtonSelectedClass{
    background: radial-gradient(ellipse at center,  #b2e1ff 0%,#66b6fc 100%);
    border:none;
    border-radius: 20px;
}

#CUSTOM_MAKE_DLG{
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index: 999999;
}
#CUSTOM_MAKE_DLG_BACK{
    position: absolute;
    left:50%;
    top:50%;
    width:65%;
    max-width: 450px;
    height:80%;
    max-height: 300px;
    transform: translate(-50%,-50%);
    padding:8px;
    border-radius: 16px;
    background: linear-gradient(135deg,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
    box-shadow: rgba(0,0,0,0.4) 5px 5px 8px 2px;
}
#CUSTOM_MAKE_TITLE{
    position: absolute;
    left:12px;
    top:6px;
    font-size:17px;
    font-family: sans-serif;
    font-weight: bold;
    color:white;
    text-shadow: rgba(0,0,0,0.7) 1px 1px 2px;
}
#CUSTOM_MAKE_DLG_INNER{
    position: absolute;
    left:8px;
    top:35px;
    width:calc(100% - 16px);
    height:calc(100% - 43px);
    border-radius: 0px 0px 8px 8px;
    background: white;
    padding:10px;
}
#CUSTOM_MAKE_FRAME{
    border:none;
    width:100%;
    height:100%;
}
#CELL_SELECT_TABLE{
    border:none;
    width:240px;
    height:240px;
    border-spacing: 1px;
    border-collapse: separate;
    table-layout: fixed;
    display:inline-table;
}
.cellSelectorTd{
    width:15px;
    height:15px;
    border:#AAAAAA 1px solid;
    font-size:1px;
    user-select: none;
    touch-action: none;
}
.customDlgInnerLeft{
    font-size:15px;
    font-family: sans-serif;
    text-align: right;
    vertical-align: top;
    width:20%;
    min-width: 80px;
    padding:0px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom:#DDDDDD 1px solid;
    color:#777777;
    font-weight: bold;
}
.customDlgInnerRight{
    font-size:14px;
    font-family: sans-serif;
    width:80%;
    text-align: left;
    vertical-align: top;
    padding:0px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom:#DDDDDD 1px solid;
}
.customDlgInnerRight > input[type="number"]{
    border:#777777 1px solid;
    border-radius: 8px;
    padding: 3px;
    text-align: center;
    font-size:17px;
    font-weight: bold;
    width:80px;
}
.customDlgInputNumber{
    border:#777777 1px solid;
    border-radius: 8px;
    padding: 3px;
    text-align: center;
    font-size:17px;
    font-weight: bold;
    width:80px;
}
.customDlgInnerLine{
    text-align: center;
    padding:8px;
}
.customDlgDirectionSelector{
    display: inline-block;
    text-align: center;
}
.customDlgDirectionSelector > img{
    width:40px;
    height:40px;
    border:none;
}


.customDlgOKButton {
    font-size:17px;
    font-family:sans-serif;
    width:121px;
    height:37px;
    border-width:1px;
    color:#fff;
    border-color:#84bbf3;
    font-weight:bold;
    border-top-left-radius:21px;
    border-top-right-radius:21px;
    border-bottom-left-radius:21px;
    border-bottom-right-radius:21px;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    text-shadow:inset 0px 1px 0px #528ecc;
    background:linear-gradient(#79bbff, #378de5);
}

.customDlgOKButton:hover {
    background: linear-gradient(#378de5, #79bbff);
}


.customDlgCancelButton {
    font-size:17px;
    font-family:sans-serif;
    width:121px;
    height:37px;
    border-width:1px;
    color:rgba(101, 101, 101, 1);
    border-color:#dcdcdc;
    border-top-left-radius:21px;
    border-top-right-radius:21px;
    border-bottom-left-radius:21px;
    border-bottom-right-radius:21px;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    text-shadow:inset 0px 1px 0px #ffffff;
    background:linear-gradient(#f9f9f9, #e9e9e9);
}

.customDlgCancelButton:hover {
    background: linear-gradient(#e9e9e9, #f9f9f9);
}

@media only screen and (max-width: 600px) {  
    #CUSTOM_MAKE_DLG_BACK{
        position: absolute;
        left:5%;
        top:5%;
        width:90%;
        height:90%;
        transform: unset;
    }
}