@charset "utf-8";

.spinMode{
    transform: rotate(-180deg)!important;
    transition: var(--transition1);
}
.spinModeAll{
    /*animation: 2s rotateOneSens linear reverse;*/
    transform:  scale(1) rotate(-360deg)!important;
    transition: var(--transition1) !important;
}
.selectorVisibility{
    opacity: 1!important;
    visibility: visible!important;
    transform: translateX(0)!important;
    transition: var(--transition2);
}

@keyframes rotateOneSens {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-180deg)!important;
    }
}

.importantTasks{
    border: 1px dashed var(--red);
    background: var(--red_bg)!important;
}
.importantTasks_color{
    color: var(--red)!important;
}
.importantTasks_cross{
    background: red!important;
}
.specialTasks_cross{
    background: #d7d748!important;
}
.specialTasks{
    border: 1px dashed var(--yellow_b);
    background: var(--yellow) !important;
}
.specialTasks_color{
    color: var(--yellow)!important;
}
.clkTasks_color{
    color: #89e9ff!important;
}
.colorFont{
    color: var(--b_sec) !important;
}

.endTasks{
    background: #c1ffd7;
    border: 1px solid green;
    color: var(--b_sec);
    transition: var(--transition1);
}
.endTasks_text{
    color: var(--b_sec) !important;
    accent-color: #008000;
    transition: var(--transition1);
}
.endTasks_container{
    background: #3ace71!important;
    transition: var(--transition1);
}
.todoBanMainContainer .circle{
    border: 2px solid var(--td_color_grey);
}
.circle{
    background: none;
    border-radius: var(--border3);
    border: 2px solid var(--b);
    width: 1em;
    height: 1em;
}

.bumpOnRClick{
    transform: scale(.99);
    transition: var(--transition3);
}
.td-transform-none{
    transform: none!important;
}
.bumpOnClick{
    transform: scale(.96);
    transition: var(--transition3);
}
.bumpOnClick2{
    transform: scale(.85) !important;
    transition: var(--transition4);
}

.slideOut{
    transform: translateX(-100vw) skewX(-10deg) scaleY(0);
    opacity: 0;
    filter: blur(.1em);
    transition: all 1s!important;
}

.modal__show{
    transform: translateY(0)!important;
    opacity: 1!important;
    display: flex!important;
    transition: var(--transition1);
}
.modal__show__bg{background: rgba(0,0,0,0.6) !important}
.modal__content_d{transform: translateY(-100vh)!important;}

.zoom_out{
    transform: scale(.95)!important;
    transition: var(--transition2);
}

.disabledOptionsRC{
    opacity: .2!important;
    cursor: not-allowed!important;
}
.disabledOptionsRC:hover{
    background: none!important;
}

.shareTask{
    border: 2px dashed #3d3dcf;
}

.choosingNote{
    filter: blur(.2em);
    cursor: pointer;
    transition: var(--transition1);
}
.noteChoose{
    filter: none;
    transition: var(--transition3);
}
.choosingNote:hover{
    filter: none;
    transition: var(--transition3);
}

.show{
    display: flex!important;
}
.showPicker{
    transform:  translate(-50%, -60px) scale(1)!important;
    opacity: 1!important;
    /*transition: var(--transition3);*/
}
.showHour{
    transform: translateX(0)!important;
    opacity: 1!important;
    transition: var(--transition3);
}

.td-color-red{color: red!important;}
.td-color-green{color: green!important;}
.td-color-orange{color: orange!important;}
.td-color-default{color: var(--td_color_grey)!important;}

.td-padding{
    padding: 1em;
}
.td-without-padding{
    padding: 1em 1em 1em 0;
}

.showMenu{
    opacity: 1!important;
    transition: var(--transition3);
    transform-origin: top right;
    transform: translate(-0%, 50%) scale(1)!important;
}
.gridH{
    flex-direction: row;
    gap: 2em;
}
.gridV{
    flex-direction: column;
    gap: 1em;
}

.todoBanMainID_remove{
    opacity: 0!important;
    transition: var(--transition1);
    transform-origin: top right;
    transform: translateY(-10vh)!important;
}

.speechOn{
    color: red!important;
    animation: 2s pulse infinite;
}

@keyframes pulse {
    0%{
        box-shadow: 0 0 0 0 var(--td_color_grey_op);
        background: var(--td_bg_body);
    }
    70%{
        box-shadow: 0 0 0 10px transparent;
        background: var(--td_bg_body);
    }
    100%{
        box-shadow: 0 0 0 0 transparent;
        background: var(--td_bg_body);
    }
}
.speech_not_supported{display: none!important}

.highlightTodo{
    border-radius: var(--border1);
    /*transform: scale(1.05) !important;*/
    transition: var(--transition3);
    animation: 2s pulse;
}