html {
  --sticker-size: 50px;
  --spacing: 30px;
}

/* Back ground*/
#canvas {
    background-color: white;
    /*
    height: 450px;
    width: 338px;
    */
    width: 313px;
    height: 418px;
    border: solid 1px;
    margin: auto;
}

#sample_img {
    margin: auto;
}

.stick_image {
    width: 150px;
    height: 150px;
}

#sample_img {
    width: 300px;
    position: relative;
}

.horiz_scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.rectangle {
    position: absolute !important;
    background-color: white;
    border: solid 3px black;
    
    /* for title */
    text-align:center;
    padding: 10px 0px 0px 0px;

    /* z-index: 2 !important; */
}

.rack {
    position: absolute !important;
    background-color: #5B9BD5;
    border: solid 1px black;

    /* z-index: 3 !important; */
}

/* sticker Icon*/
.sticker { 
    position: absolute !important; 
    /* position: relative !important; */
    /*width: 27px;*/
    width: var(--sticker-size);
    height: var(--sticker-size);
    
    /* z-index: 4 !important; */
}

.sticker_green {
    background-color: green;
}

.sticker_yellow {
    background-color: yellow;
}

.sticker_red {
    background-color: red;
}

.sticker_gray {
    background-color: gray;
}

/* Cursor */
.draggable {
    /* cursor: move;
    z-index:200 !important; */
}



.rect { 
    position: absolute !important;
    /*width: 27px;*/
    width: 18px;
    height: 27px;
    
    z-index: 100 !important;
}

.rect_green {
    background-color: green;
}

.rect_yellow {
    background-color: yellow;
}

.rect_red {
    background-color: red;
}

.rect_gray {
    background-color: gray;
}

.colorSelector span {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: block;
    border: 1px solid #ccc;
    margin: 4px;
    float: left;
}

.color-picker.no-alpha .color-picker\:a {
    display: none;
}