button{
    background-color: #E9FFE5;
    border-radius: 3px;
    font-family: "VarelaRound";
}
button:hover{
    background-color: #D6FBD0;
    color: #0d0d0d;
}

.wideBtn{
    width: 180px;
}
.blueBtn,.blueBtn:hover{
    background-color: var(--side_bg);
    color: #0d0d0d;
    border-radius: 10px;
}
.blueBtn:hover{
    font-weight: bold;
    cursor: pointer;
}
.greenBtn,.greenBtn:hover{
    background-color:   var(--green_bg);
    color:              var(--green_txt);
    border-radius: 10px;
}
.greenBtn:hover{
    font-weight: bold;
    cursor: pointer;
}
.yellowBtn,.yellowBtn:hover{
    background-color: var(--yellow_bg);
    color: var(--yellow_txt);
    border-radius: 10px;
}
.yellowBtn:hover{
    font-weight: bold;
    cursor: pointer;
}
.redBtn,.redBtn:hover{
    background-color:   var(--red_bg);
    color:              var(--red_txt);
    border-radius: 10px;
}
.redBtn:hover{
    font-weight: bold;
    cursor: pointer;
}
.grayBtn,.grayBtn:hover{
    background-color:   var(--gray_bg);
    color:              var(--red_txt);
    border-radius: 10px;
}
.grayBtn:hover{
    font-weight: bold;
    cursor: pointer;
}
.notes_btn{
    background: url("/inc/note_icon.png?c=2");
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}
.delBtn{
    /*background-color: red;*/
    border-radius: 50%;
    color: white;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
}