#confirmDeleteDialog{
    border-radius: 20px;
    border: 3px solid darkred;
    padding: 40px;
}
#confirmDeleteDialog button{
    /*font-size: 140%;*/
    /*cursor: pointer;*/
}
#confirmDeleteDialog button:hover{
    /*background-color: var(--nav_hover_bg);*/
    /*color: var(--nav_hover_text);*/
}
#confirmDeleteDialog p{
    text-align: center;
    font-size: 150%;
}
#confirmDeleteDialog .default{
    background-color: var(--side_bg);
    color: var(--side_text);
    padding: 5px 30px;
    border-radius: 10px;
    margin: 0 20px;
    /*border: none;*/
}
#confirmDeleteDialog::backdrop {
    background: repeating-linear-gradient(
            45deg,
            rgba(255, 0, 0, 0.2),
            rgba(255, 0, 0, 0.2) 1px,
            rgba(255, 0, 0, 0.3) 1px,
            rgba(255, 0, 0, 0.3) 20px
    );
}
.btn_cancel{
    background-image: url("/images/btn_cancel.png?c=2");
    height: 40px;
    width: calc(40px*300/111);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 20px;
    border: none;
    cursor: pointer;
}
.btn_cancel:hover{
    background-image: url("/images/btn_cancel_hover.png?c=2");
}
.btn_ok{
    background-image: url("/images/btn_ok.png?c=2");
    height: 40px;
    width: calc(40px*300/111);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 20px;
    border: none;
    cursor: pointer;
}
.btn_ok:hover{
    background-image: url("/images/btn_ok_hover.png?c=2");
}
.btn_delete{
    background-image: url("/images/btn_delete.png?c=2");
    height: 40px;
    width: calc(40px*335/119);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 20px;
    border: none;
    cursor: pointer;
}
.btn_delete:hover{
    background-image: url("/images/btn_delete_hover.png?c=2");
}
.greenBtn,.redBtn,.grayBtn{
    color: black;
    font-family: VarelaRound;
    border-radius: 10px;
    border: 2px solid black;
    font-size: 90%;
    padding: 5px 10px;
    margin: 10px;
    cursor: pointer;
}
.greenBtn{
    background-color: #5edb8c;
}
.greenBtn:hover{
    background-color: #aeeac4;
}
.redBtn{
    background-color: #ff6b6b;
}
.redBtn:hover{
    background-color: #fe9c9d;
}
.grayBtn{
    background-color: #c1c1c1;
}
.grayBtn:hover{
    background-color: #c1d4db;
}


.redDialog{
    border-radius: 20px;
    border: 3px solid #ab2d35;
    padding: 40px;
    /*text-align: center;*/
    font-size: 150%;
    height: 35vh;
}
.redDialog::backdrop {
    background-color: #AB2D35FF;
    opacity: 0.5;
}
/*.redDialog button{*/
/*    font-size: 130%;*/
/*    cursor: pointer;*/
/*    width: 60%;*/
/*    margin: 0 20%;*/
/*}*/
/*.redDialog button:hover{*/
/*    background-color: var(--nav_hover_bg);*/
/*    color: var(--nav_hover_text);*/
/*}*/
.greenDialog{
    border-radius: 20px;
    border: 3px solid #047e04;
    padding: 40px;
    /*text-align: center;*/
    font-size: 150%;
    height: 35vh;
}
.greenDialog::backdrop {
    background-color: #045f08;
    opacity: 0.5;
}
/*.greenDialog button{*/
/*    font-size: 130%;*/
/*    cursor: pointer;*/
/*    max-width: 40%;*/
/*}*/
/*.greenDialog button:hover{*/
/*    background-color: var(--nav_hover_bg);*/
/*    color: var(--nav_hover_text);*/
/*}*/
.greenDialog p{
    text-align: center;
    font-size: 150%;
}
.greenDialog input[type='text'],.greenDialog input[type='email']{
    border-radius: 5px;
    font-size: 120%;
    width: 80%;
}
.greenDialog .default{
    background-color: var(--side_bg);
    color: var(--side_text);
    padding: 5px 30px;
    border-radius: 10px;
    margin: 0 20px;
    /*border: none;*/
    position: absolute;
    right: 5%;
}
.greenDialog .LeftDialogBtn{
    position: absolute;
    left: 5%;
}