@charset "utf-8";

.main{
    width: 80%;
    height: auto;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 20vh auto;
    font-family: 'Open Sans', sans-serif, Bahnschrift;
}
.content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2em;
}
.save{
    padding: 1em 3em;
    display: flex;
    width: 100%;

    background: var(--td_bg_container);
    box-shadow: var(--td_bx_shadow_container);
    color: var(--td_color_title);

    border-radius: var(--border1);
    align-items: center;
    align-content: center;
    flex-direction: row;
    transition: var(--transition1);
    justify-content: space-between;
}
.color-mode{
    display: flex;
    align-content: center;
    align-items: center;
    font-size: .8em;
    gap: 1em;
    /*padding: 0 2em;*/
    justify-content: flex-end;
}
.color-mode i{
    color: var(--td_color_title);

    font-size: var(--font3);
    transform: scale(1) rotate(0);
    transition: var(--transition1);
    cursor: pointer;
}
.color-mode i:last-child:hover{
    transform: scale(.9);
    transition: var(--transition2);
}


.save p{
    display: flex;
    gap: .5em;
    font-size: var(--font1);
    white-space :nowrap;
    /*transition: var(--transition1);*/
}
.save span{
    color: var(--td_color_grey);
}

.todoContainer,
.noteContainer{
    width: 100%;
    /*background: var(--b_sec);*/
    background: var(--td_bg_container);
    box-shadow: var(--td_bx_shadow_container);
    border-radius: var(--border1);
    height: fit-content;
    overflow: hidden;
    transition: var(--transition1);
}

#myUL{
    margin: 0;
    /*overflow: hidden;*/
    padding: 0 2em 3em 2em;
}

.todoContainer ul li:not(.li_sub),
.noteContainer ul li{
    cursor: pointer;
    position: relative;
    list-style-type: none;
    color: var(--td_color_grey);
    /* padding: .5em 1em; */
    margin: 1em 0 0;
    border-radius: var(--border1);
    /*font-size: var(--font1);*/
    transition: 0.2s;
    word-break: break-word;
    /* display: grid; */
    grid-auto-flow: column;
    grid-template-columns: 10% 1fr 8% 8%;
    /*background: #3c3b3b;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 5;
}
.li_sub_disabled{
    opacity: .4!important;
}
.disabled_li_sub_obj{
    background: var(--td_color_grey_dm);
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%) scaleX(0);
    transform-origin: left;
    transition: var(--transition1);
}
.disabled_li_sub_obj_ACTIVE{
    transform: translate(-50%, 50%) scaleX(1) !important;
}
.li_sub{
    position: relative;
    z-index: 100!important;
    padding: 0 1em 0 1em!important;
    display: flex!important;
    cursor: default!important;
    transition: var(--transition1);
    background: var(--td_bg_body);
    margin: 0 0.5em 0.5em!important;
    border-radius: var(--border1);
}
.li_sub:first-child{
    margin:0.5em!important;
}
.li_sub input{
    background: var(--td_bg_body);
    padding: 0 1em!important;
}

.textTask{
    background: none;
    transition: var(--transition2);
    height: fit-content;
    background: transparent;
    padding: 1em;
    color: var(--td_color_grey);
}
.date--deadline{
    opacity: 0;
    /*width: 100%;*/
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: var(--transition3);
}
.date--deadline span{
    position: absolute;
    top: 5px;
    left: 50%;
    opacity: 0;
    width: max-content;
    cursor: default!important;
    background: var(--td_bg_container);
    border: 1px solid var(--td_color_grey);
    border-radius: var(--border1);
    box-shadow: var(--td_bx_shadow_container_2);
    padding: .5em;
    transform: translate(-50%, 50%);
    color: var(--td_color_grey)!important;
}
.date--deadline:hover span{
    opacity: 1!important;
    transition: var(--transition3);
}
.option--container{
    width: 100%;
    /*overflow: hidden;*/
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}
.nd--option--container{
    width: 100% !important;
    display: grid;
    grid-template-columns: auto 30% 10% auto 20% auto 1fr;
    grid-template-rows: 1fr;
}

/*.nd--option--container *{min-width: 20%}*/

.noteContainer ul li{
    display: flex;
    padding: .2em;
    border: 0;
    flex-direction: column;
}
.colorhastags{
    color: #2196f3!important;
    /*padding: 0.5em;*/
    border-radius: var(--border1);
    transition: var(--transition3);
}
.colorhastags:hover{
    background: var(--td_bg_body) !important;
    transition: var(--transition3);
}
.close_popup{
    position: sticky;
    top: 0;
    left: 0;
    margin: 0;
    padding: 1em .5em;
    /*background: var(--td_bg_body);*/
    z-index: 1000;
    border-radius: var(--border3);
    /*width: 3em;*/
    /*height: 3em;*/
    display: flex!important;
    justify-content: center;
    align-items: center;
    cursor: pointer!important;
}
.topBar--label{
    padding: 0 2em;
    width: 100% !important;
    border-bottom: 1px solid var(--td_color_grey);
}
.topBar--label ul{
    width: 95%;
    margin: auto 0 auto auto;
    display: grid;
    grid-template-columns: auto 30% 10% auto 20% auto 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    align-content: center;
}
.topBar--label *,
.nd--option--container *{
    /*border: 1px solid red;*/
}
.label--txt{grid-column: 2; padding: 0 1em}
/*.label--has{grid-column: 4}*/
.label--time{grid-column: span 1}
.label--chart{grid-column: 6}
.label--clock{padding: 1em}
.label--creator,.containerCreator p{padding: 0 0 0 1em;}

.containerCreator p{color: var(--grey2)}

#myUL{
    position:relative;
    transform: scale(1);
    transition: var(--transition2);
}
.header_popup{
    position: sticky;
    top: 0;
    left: 0;
    padding-bottom: .5em;
    background: var(--td_bg_body);
    z-index: 1000000;
    width: 100%;
}
.content_overlay{
    overflow: auto;
}
.header_l{
    cursor: pointer;
    padding: 0 .5em;
    border-radius: var(--border1);
    background: var(--td_bg_body);
    transition: var(--transition2);
}
.header_l:hover{
    background: var(--td_bg_container);
    transition: var(--transition2);
}
.header_popup,
.header_l{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}
.lbl_popup{padding: 1em}
#modal__has{
    position: absolute;
    max-height: 60%;
    min-height: 50vh;
    height: auto;
    width: 85%;
    padding: 1em;
    display: flex!important;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100000;
    border-radius: var(--border2);
    background: var(--td_bg_body);
    box-shadow: var(--td_bx_shadow_container);
    cursor: default!important;
    transition: var(--transition2);
}

.modal__container{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    opacity: 1;
    transform: translateY(-100vh);
    transform-origin: center;
    transition: var(--transition2);
}

#myUL_note input{
    margin: 0;
    background: none;
    color: var(--b);
    border-radius: 0;
    transition: var(--transition1);
}
.contentNote{
    display: flex;
    background: var(--grey1o) !important;
    height:auto;
    background: none;
    border: 0;
    margin: 0 1em 1em;
    flex-direction: column;
    cursor: text;
    border-radius: var(--border1);
    padding: .5em;
    font-size: inherit;
    color: var(--b);
    font-family: inherit;
    outline: none;
    resize: none;
    min-height: 15vh;
}
.todoBanMainContainer i{
    display: flex!important;
    align-items: center;

    transform: scale(1);
    transition: var(--transition2);
}
.todoBanMainContainer i[name="morebut"]{
    /*margin: 0 1em;*/
}
.close,
.end{
    margin: 1em 0 1em 1em;
    font-size: 1.1em;
    cursor: pointer;
    transform: scale(1.4);
    opacity: .5;
    transition: var(--transition2);
    accent-color: #74dfdf;
}
.end{
    margin: auto!important;
    transform: scale(1.2);
}

.close:hover{
    transform: scale(1.8) !important;
    transition: var(--transition2);
}
.end:hover{
    transform: scale(1.4) !important;
    transition: var(--transition2);
}
.div_option i:hover{
    transform: scale(1.4) !important;
    transition: var(--transition2);
}

.moreOptionsClass{
    height: 4vh;
    width: 100%;
    background:var(--b_sec);
    border-radius: var(--border1);
    transform: translateY(-50px);
    z-index: 10;
    transition: var(--transition2);
    display: none;
}


.todoContainer ul li:hover {
    /*background: #22262a;*/
}

.all:hover{
    /*background: #c1ffd7;*/
    /*height: calc(100% + 4vh + 1em);*/
}
.todoContainer div:hover >.moreOptionsClass {

    transform: translateY(0)!important;
    /*display: flex;*/
    transition: var(--transition2);
}

.todoContainer ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

.todoContainer ul li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

.header {
    padding: 2em 3em 0;
    color: white;
    text-align: center;
}
.headerOne{
    display: flex;
    align-items: center; /*align header FS*/
    justify-content: space-between;
    flex-direction: row;
    margin: 1em 0; /*better margin header FS*/
}
input[type=checkbox]{
    width: auto;
    margin: 0 1em;  /*checkbox now in the container "option--container"*/
    transform: scale(1.5);
}

input {
    margin: 0;
    border: none;
    border-radius: 5px;
    outline: none;
    background: none;
    color: var(--td_color_grey);
    width: 100%;
    padding: 1em;
    font-size: 16px;
    transition: var(--transition1);
}
input::placeholder{
    color: var(--td_color_grey);
}
input::selection{
    background: var(--td_color_title);
}
.shareAllContainer{
    cursor: pointer;
    background: var(--td_bg_container);
    padding: 0.5em;
    border-radius: var(--border1);
    transition: var(--transition2);
}
.shareAllContainer p{
    color: var(--td_color_grey);
}
.shareAllContainer:hover{
    background: var(--td_bg_body);
    transition: var(--transition2);
}
.subSearch{
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 1em;
}
.subSearch p{
    color: var(--td_color_grey);
    /*cursor: pointer;*/
}
.sendRequest{
    border: 1px solid var(--td_bg_body);
    padding: 0.5em 1em;
    border-radius: var(--border1);
    background: var(--td_bg_container);
    transition: var(--transition3);
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.sendRequest i{font-size: inherit}
.sendRequest:hover{
    background: var(--td_bg_body);
    transition: var(--transition3);
}
.separator{
    border: 1px solid var(--td_color_grey);
    border-radius: var(--border1);
    margin:  0;
}
.filter_selector{
    width: fit-content;
    position: relative;
    z-index: 999!important;
    background: var(--td_bg_body);
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    border-radius: var(--border1);
    transform: scale(1);
    transition: transform .2s!important;
}
.filter_selector p{
    color: var(--td_color_grey);
    display: flex;
    gap: 0.5em;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}


.addTask_bar{
    display: flex;
    gap: 1em;
    flex-direction: row;
    position: relative;
    overflow: visible!important;
}
.filterTop{
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    transition: var(--transition3);
}
#pickerHour{
    position: absolute;
    top: 0;
    white-space: nowrap;
    left: 50%;
    width: auto;
    opacity: 0;
    transform: translate(-50%, 60px) scale(0);
    transform-origin: top;
    background: var(--td_bg_container);
    box-shadow: var(--td_bx_shadow_container);
    z-index: 600;
    border: 1px solid var(--td_color_grey);
    transition: none;
}
.filterTop_selector{
    border-radius: var(--border1);
    gap: 1em;
    /*width: 80px;*/
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: var(--td_color_grey);
    padding: .8em;
}

.filterTop i{
    cursor: pointer;
    font-size: 1em;
    color: var(--w);
    transform: scale(1);
    transition: var(--transition2);
}
.filterTop i:hover{
    transform: scale(1.2) !important;
    transition: var(--transition2);
}
/*.filterTop_selector div button i:hover, .div_optionstatic div i[name="important"]{color: var(--red)!important}*/
/*.filterTop_selector div button i:first-child:hover{color: #2196f3!important;}*/
/*.filterTop_selector div button i:last-child:hover, .div_optionstatic div i[name="star"]{color: var(--green)!important}*/

.sectionFilter{
    position: relative;
    display: flex;
    align-items: center;
    /*margin: 2em 0;*/
}
.sectionFilter hr{width: 100%}
.sectionFilter p{
    position: absolute;
    left: 50%;
    top: 0;
    width: 15%;
    background: var(--b_secs);
    transform: translate(-50%, -50%);
}

#myInput_label{position: relative;width: 100%;}
.speechTodo,
.speechNote{
    position: absolute;
    height: 3em;
    width: 3em;
    top: 50%;
    right: -2%;
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td_color_grey);
    cursor: pointer;
    background: var(--w);
    border-radius: 100px;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 var(--td_color_grey_op);
    transition: var(--transition3);
}

.speechTodo:hover,
.speechNote:hover{
    background: var(--td_bg_body);
    transform: translate(-50%, -50%);
    transition: var(--transition3);

}
#myInput,
#filterNote{border: 2px solid var(--td_bg_body);}

#myInput:hover,
.addItems input:hover{
    background: var(--td_bg_body);
}
.addTask_bar:hover .filterTop,
#myInput:focus ~.filterTop{
    opacity: 1;
    transform: scaleX(1);
    transition: var(--transition3);
}

#myInput:focus,
#filterNote:focus{
    /*border: 2px solid var(--grey2);*/
}



.liChecked{
    opacity: .5;
    background: #c1ffd7!important;
    color: var(--b) !important;
    border: 2px solid transparent!important;
}
h2{
    text-align: initial;
    margin: 0 0 .5em 0;
    color: var(--td_color_title);
    font-size: var(--font3);
    transition: var(--transition1);
}
.title--header{margin: 0!important;}



#filterNote_label{
    position: relative;
    width: 100%;
}
#filterNote{
    padding: 1em;
    color: var(--td_color_grey);
}
.addItems{
    display: flex;
    gap: 1em;
    flex-direction: row;
}
button{
    background: none;
    outline: none;
    font-size: 1em;
    border: 0;
    cursor: pointer;
}
button i{
    color: var(--td_color_title);

    font-size: var(--font3);
    transform: scale(1);
    transition: var(--transition2);
}
button i:hover{
    /*color: var(--b_sec);*/
    transform: scale(.9);
    transition: var(--transition2);
}

.noteCard{
    cursor: default!important;
    min-height: 10vh;
    width: 100%;
}
.descriptionLink{
    padding: 1em 3em 0;
    /*display: flex;*/
    width: 100%;
    /*opacity: 0;*/
    transition: var(--transition2);
    display: none;
}
.descriptionLink div{
    background: var(--red);
    border-radius: var(--border1);
    padding: 1em;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1em;
}
.descriptionLink div p{
    text-align: justify;
}
.descriptionLink div i{
    cursor: pointer;
    height: fit-content;
    transform: scale(1);
    transition: var(--transition3);
}
.txt_link_todo{
    margin: 0 1em 0.5em;
}
.descriptionLink div i:hover{
    transform: scale(1.2);
    transition: var(--transition3);
}
.div_option_container i{
    color: var(--td_color_grey) !important;
}


.div_option,
.div_optionstatic{
    border: 2px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
    z-index:2000!important;
    height: 100%;
    display: flex!important;
    padding: .2em;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: auto!important;
    opacity: 0;
    transition: var(--transition3);
}
.div_optionstatic{
    opacity: 1!important;
    padding: 0;
    margin: 0;
    border: 0;
}
.div_option div,
.div_optionstatic div{
    border-radius: var(--border1);
    gap: 1em;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    /*background: var(--td_bg_container_on);*/
    background: none;
    padding: .8em;
    /*width: 80px;*/
    /*box-shadow: var(--td_bx_shadow_container);*/
}
.headerTitle{
    position: relative;
}
.headerTitle:hover .headerTitleIcon,
.headerTitle input:hover ~.headerTitleIcon,
.headerTitle input:focus ~.headerTitleIcon{
    opacity: 1;
    transform: scaleX(1);
    transition: var(--transition3);
}
.headerTitle,
.headerTitleIcon{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.headerTitleIcon{
    padding: 0 1em 0 0;
    gap: 1em;
    color: var(--b_sec);
    opacity: 0;
    transition: var(--transition3);
}
.headerTitleIcon i {
    cursor: pointer;
    transform: scale(1);
    padding: .2em;
    transition: var(--transition2);
}
.headerTitleIcon i:hover{
    cursor: pointer;
    transform: scale(1.4);
    transition: var(--transition2);
}
.fa-minus-circle:hover{
    color: var(--red);
}

.optionNote{
    position: absolute;
    background: var(--b);
    top: 15%;
    left: 50%;
    box-shadow: 0 0 15px 0 black;
    transform: translate(-50%, 50%) scale(-.2) skew(-50deg) rotate(-20deg);
    transform-origin: top right;
    opacity: 0;
    transition: var(--transition3);
    height: 5vh;
    width: 20vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    border-radius: var(--border3);
}
.optionNote i{
    cursor: pointer;
    transform: scale(1);
    transition: var(--transition2);
}
.optionNote i:hover{
    cursor: pointer;
    transform: scale(1.4);
    transition: var(--transition2);
}
.expendNoteOption{
    transform: translate(-50%, 50%) scale(1) skew(0) rotate(0);
    opacity: 1;
    transition: var(--transition3);
}
.expendNoteOption_active{
    background: var(--b);
    color: var(--w);
    transform: scale(1.4) !important;
    padding: .2em;
    border-radius: var(--border3);
}

.categories{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 800!important;
    top: 100%;
    opacity: 0;
    left: 50%;
    transform: translate(-50%, 0) scaleY(0);
    transition: all .2s!important;
    transform-origin: top;
    border-radius: var(--border1);
    background: var(--td_bg_container);
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: .1em;
    box-shadow: var(--td_bx_shadow_container);
    padding: 0.5em;
    margin: .5em auto;
}

.categories label:hover {
    background: var(--grey3);
}

.categories_show{
    opacity: 1;
    transform: translate(-50%, 0) scaleY(1);
    transition: transform .2s!important;
}

.categories label{
    width: 100%;
    border-radius: var(--border1);
    color: var(--td_color_grey);
    padding: .5em;
    cursor: pointer;
    border: 2px solid transparent;
    /*transition: var(--transition1);*/
}
/*.categories label:last-child{*/
/*    width: 20%;*/
/*}*/
.categories label:hover{
    background: var(--td_bg_body);
}

.categories input:checked + label {
    border: 2px solid var(--grey2);
}
.categories input{display: none}
hr{background: var(--w);}


.collapsible{
    padding:0;
    /*margin-bottom: 1em;*/
}
.collapsible-header{
    display: -webkit-box;
    height: auto;
    font-size: 1.1em;
    display: -webkit-flex;
    display: -ms-flexbox;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 1rem;
    gap: var(--gap1);
    align-items: center;
    display: flex;
    /*border: 2px dashed var(--grey2);*/
    border: 1px solid var(--grey2);
    margin: 0 0 1em 0;
    align-content: center;
    -webkit-align-content: center;
    grid-auto-flow: column;
    -moz-transition: var(--transition1);
    -webkit-transition: var(--transition1);
    list-style-type: none;
    color: var(--td_color_grey);
    border-radius: var(--border1);
    transition: 0.2s;
    word-break: break-word;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 5;
}

.nd--collapsible-header{
    border: 0;
    border-bottom: 1px solid var(--green_bg) !important;
    margin: 0.2em 0!important;
    border-radius: 0!important;
}


.collapsible li:not(.li_sub){margin: 0!important;}

.collapsible-body {
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: justify;
    margin: 0;
    padding: 0 0 1em 0;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;

    border-bottom: 1px solid var(--green_bg) !important;
}
.collapsible_div_bodyContent{
    gap: .5em;
    background: var(--w);
    display: flex;
    flex-direction: column;
    /*border: 2px dashed var(--grey2)!important;*/
    /*border: 1px solid var(--grey2)!important;*/
    /*box-shadow: 0 4px 0 0 grey;*/
    /*border-radius: var(--border1);*/
}
.collapsible-body span:hover::before {
    transform: scaleX(0);
    transform-origin: bottom left;

    -webkit-transform: scale(0);
    -webkit-transform-origin: bottom left;

    -moz-transform: scale(0);
    -moz-transform-origin: bottom left;
}

.expandChevron{
    /*TODO: CHEKC GOOD CONDITION*/
    transform: rotate(-90deg);
    transition: transform .5s!important;
    -webkit-transition: transform .5s!important;
    -moz-transition: transform .5s!important;
}

.collapsible li.active > .collapsible-header i{
    transform: rotate(0deg);
    transition: var(--transition2);
    -webkit-transition: var(--transition2);
    -moz-transition: var(--transition2);
}
.todoBanMain{
    width: 100%;
    position: relative;
    height: auto;
    transition: var(--transition3);
}
#todoBanMainID,
.tutoTodo{display: none}

.todoBanMain.readOnly{
    background: none;
    position: relative;
    width: 99%;
    margin: auto;
}
.todoBanMain.readOnly .pickerHour{
    display: none;
}

.con_ov_container{
    background: var(--td_bg_body);
    padding: 0.5em;
    border-radius: var(--border1);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-right: 1em;
    gap: 1em;
    color: var(--b_sec_o_hover);
}

.content_overlay_todo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    border-radius: var(--border1);
    background: linear-gradient(45deg, rgba(84, 84, 84, 0.33), #66666663);
    cursor: pointer!important;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    flex-direction: row;
    transition: var(--transition3);
}
.cont_ov_but{
    transform: rotate(-90deg);
    font-size: 1.2em;
    opacity: 1;
}
.content_overlay_todo:hover{
    background: linear-gradient(45deg, #a1a1a182, rgba(199, 199, 199, 0.39));
    transition: var(--transition3);
}
.content_overlay_todo:hover .con_ov_container{
    color: var(--b_sec);
}
.content_overlay_todo:hover >.con_ov_container >i{color: var(--b_sec)}


.todoBanMain:not(.readOnly):hover .div_option{
    opacity: 1;
    transition: var(--transition3);
}
.todoBanMainContainer{
    position: absolute;
    top: 0;
    right: 0;
    /*border: 2px solid transparent;*/
    z-index: 100;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    align-content: center;
    /*padding: 0 15px 0 0;*/
}
.todoBanMainContainer span,
.todoBanMainContainer i{
    cursor: pointer;
    color: var(--td_bg_container);
}
/*.todoBanMainContainer span{padding: 1em 1em 1em 0}*/

.todoBanMainContainer .fa-check-circle{
    color: var(--td_color_grey);
}

.todoBanMainContainer .div_option i:first-child{
    transform: scale(1.2) !important;
}
.todoBanMainContainer .div_option i{
    transform: scale(1.4) !important;
}

.collapsible_div_bodyContent_staticContent{
    height: auto;
    position: relative;
    width: 100%;
    background: var(--td_color_grey_2);
    padding: 1em 15px;
    display: flex;
    align-items: center;
    /*justify-content: flex-end;*/
    align-content: center;
    flex-direction: row;
    gap: 1em;
    /*border-radius: 0 0 var(--border1) var(--border1);*/
    border-radius: var(--border1);
    cursor: default;
    transition: var(--transition1);
}
.collapsible_div_bodyContent_staticContent i{
    transform: scale(1);
    /*color: var(--w);*/
    cursor: pointer;
    transition: var(--transition2);
}
.collapsible_div_bodyContent_staticContent i:hover{
    transform: scale(1.4);
    transition: var(--transition2);
}
#myUL > div:last-child .collapsible-body{padding: 0}
#myUL_note > li:first-child{margin: 0}

@media all and (max-width: 1000px) {
    .nd--option--container p,
    .nd--option--container .colorhastags,
    .label--has,
    .label--txt,
    .label--time{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
@media all and (max-width: 1200px) {
    .todoContainer, .noteContainer{width: 100%}
    .content{
        flex-direction: column;
        gap: 1em;
    }
    .addTask_bar {flex-direction: column}
    .container_header{
        flex-direction: column!important;
        gap: 1em!important;
    }


    .overlay{
        background:none;
        z-index: 1;
        margin: auto;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        justify-content: center;
        display: none;
    }
    .segment{
        min-height: 10vh;
        width: 85vw;
        border: 10px solid blue;
        border-radius: var(--border1);
        z-index: 10;
        position: absolute;
        left: -85%;
    }
    .noVisibility{
        position: absolute;
        background: none;
        top: 0;
        width: 50%;
        height: 100%;
        z-index: 20;
        right: 0;
        overflow: hidden;
    }

}

.tutoTodo{
    padding: 1em 3em 0;
}
.replicate{
    background: #a17373;
    min-height: 20vh;
    width: 100%;
    border-radius: var(--border1);
}

.container_header{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2em;
    justify-content: space-between;
}
.container{
    background: var(--w);
    transition: var(--transition1);
    z-index: 10;
    border-radius: 0 var(--border3) var(--border3) 0;
}
.choose_user{
    /*display: none;*/
    /*background: var(--b_sec);*/
    border-radius: var(--border1);
    display: flex;
    color: var(--w);
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    padding: 1em 3em 0 0;
    gap: 2em;
    transition: var(--transition1);
}
.choose_user label{
    cursor: pointer;
    padding: .5em 1em;
    background: var(--grey1o);
    color: var(--b_sec);
    border: 2px solid transparent;
}
.choose_user input:checked + label {
    border: 2px solid var(--grey1o);
    color: var(--w);
    background: var(--b_sec_o);
}
#check_user_1_lab{border-radius: var(--border3) 0 0 var(--border3)}
#check_user_2_lab{border-radius: 0 var(--border3) var(--border3) 0}

.choose_user i{
    padding: 0.2em;
    z-index: 10;
    background: var(--b_sec);
    border-radius: var(--border3);
}

.selector{
    display: flex;
    /*gap: .5em;*/
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10vw);
    transition: var(--transition2);
}

.choose_user i{
    font-size: var(--font3);
    cursor: pointer;
    transition: var(--transition2);
}
.choose_user i:hover{
    transform: scale(.9);
    transition: var(--transition2);
}

.nothingToShow{
    width: 100%;
    border-radius: var(--border1);
    margin-top: .5em;
    display: none;
    flex-direction: column;
    padding: 0 3em;
}
.card{
    background: var(--td_color_grey);
    border-radius: var(--border1);
    display: flex;
    height: 20vh;
    width: 100%;
    color: var(--w);
    gap: 1em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}

/*-------------------*/

.context-menu hr {
    /*background: var(--b_sec);*/
    margin: 0 0.5em;
    border: 1px solid  var(--b_sec);
    border-radius: var(--border1);
}
.context-menu {
    font-family: 'Open Sans', sans-serif, Bahnschrift;
    position: absolute;
    background: var(--w);
    border-radius: var(--border1);
    z-index: 1000;
}

.context-menu ul {
    padding: 0.5em;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .1em;
    min-width: 150px;
    list-style: none;
    box-shadow: 0 0 3px 0 var(--b_sec_o);
    border-radius: var(--border1);
}

.context-menu ul li {
    border-radius: var(--border1);
    background: var(--w);
    padding: 1em;
    gap: 1em;
    word-break: break-word;
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
}
.context-menu ul li:last-child:hover {
    background: var(--w);
    cursor: initial
}
.i_div{
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.context-menu ul li div p{
    margin: auto auto 0 0;
}
#deleteTask:hover{color: #ed143d}
#shareTask:hover{color: #3d3dcf}
#enTask:hover{color: #0c660c}
/*#speTask:hover{color: #c3c112}*/
/*#impTask:hover{color: var(--red)}*/

.context-menu ul li:hover {
    background: var(--td_bg_body);
}

#shareTask{
    position: relative;
}
.context-menu ul{
    overflow: visible!important;
    border-radius: var(--border1);
}
.extend_share{
    position: absolute;
    right: -150px;
    width: 150px;
    top: 0;
    opacity: 0;
    /*transition: var(--transition1);*/
}
.extend_share ul{padding: 0;margin-left: 1em;background: var(--w)}
.extend_share ul li{background: var(--w)}
.extend_share ul li:hover,.extend_share ul li:last-child:hover{background: var(--td_bg_body);cursor: pointer}
.extend_share ul li:last-child:hover{
    border-radius: 0 0 var(--border1) var(--border1);
}
.extend_share ul li:first-child:hover{
    border-radius: var(--border1) var(--border1) 0 0;
}

#shareTaskContainer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
#shareTask:hover .extend_share{
    opacity: 1;
    /*transition: var(--transition1);*/
}








.filterNewTask .collapsible{padding: 15px 0}
.filterNewTask .collapsible-header{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 1em 0;
    margin-bottom: 0;
    gap: var(--gap1);
    align-items: center;
    display: block;
    background: none;
    border: 0;
    -webkit-align-content: center;
    transition: var(--transition1);
    -moz-transition: var(--transition1);
    -webkit-transition: var(--transition1);
}
.filterNewTask .collapsible-body {
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: justify;
    border-radius:var(--border1);
    -webkit-border-radius:var(--border1);
    -moz-border-radius:var(--border1);
}

@media screen and (max-width:700px){
    .canvasChart{display: none!important;}
}

.containerChart{
    width: auto!important;
    grid-column: 6;
    margin: 0 auto 0 0;
}
.canvasChart{
    background: none;
    width: 45px !important;
    margin: 0;
    height: 45px;
    padding: 10%;
    position: relative;
}
.canvasChart_p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--td_color_grey);
}


/*.toast{*/
/*    position: fixed;*/
/*    top: 2em!important;*/
/*    right: 2em!important;*/
/*    background: var(--td_color_grey);*/
/*    color: var(--w);*/
/*    box-shadow: var(--td_bx_shadow_container);*/
/*    border-radius: var(--border1);*/
/*    padding: 1em;*/
/*    font-family: 'Open Sans', sans-serif, Bahnschrift;*/
/*}*/