AppBlack.css

*{
    padding: 0px 0px;
    margin: 0px 0px;
    font-family: 'Montserrat', sans-serif;
}
body{
    margin: 0px;
    padding: 0px;
    background: linear-gradient(142.5deg, #1D0337 34.24%, #390850 103.14%);
}
#root{
    display: grid;
    grid-template-areas: 'left right';
    grid-template-columns: 1.1fr 5fr;

    height: 100vh;
}
.todo_menu_left{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5fr;
    align-items: start;
    width: 100%;
    grid-area: left;
    justify-self: start;
    justify-items: center;
    background: linear-gradient(90deg, #230024 -18.11%, #35005F 100%);
    mix-blend-mode: normal;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25)
}
.menu_add_block{
    display: grid;
    grid-template-columns: 15fr 2fr;
    align-self: center;
    justify-items: center;
}
.menu_add_block .svg-icon{
    margin-right: 10px;
}

.input_menu_add_item{
    outline: none;
    margin: 0px 20px 0px 0px;
    color:white;
    padding: 5px  ;
    background: none;
    border:0px;
    border-bottom: 2px solid white;
    font-size: 16px;
    justify-self: center;
}
.item_left{
    color:white;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    justify-content: center;
    align-items: center;
    grid-column-gap: 10px;
}
.item_text{
    font-weight:600;
    letter-spacing: 1px;
    font-size: 16px;
    margin-left: 30px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.item_left{
    color:white;
    align-items: center;
    margin-top: 10px;
}
::placeholder{
    color:rgb(207, 207, 207);
    opacity: 1;
    font-size: 15px;
    font-style: italic;
    mix-blend-mode: luminosity;
}




.todo_right{
    display: grid;
    grid-template-rows:80px 5fr;
    width: 100%;
    justify-self: center;
    grid-area: right;

}
.header{
    display: grid;
    grid-template-columns: 5fr 1fr;
    align-items: center;
    justify-items: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: linear-gradient(179.6deg, #120037 0.8%, #3F035B 96.68%);
}
.logo{
    font-size: 40px;
    font-style: normal;
    color:white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.togle{

}
.black_label{
    color:white;
}
.item_right_block{
    padding: 5% 10%;
    display: grid;
    grid-template-rows: 1fr 1fr 5fr;
    /*justify-items: center;*/
}
.item_right_block_title{
    align-self: start;
    width: 100%;
    display: flex;
    align-items: center;
}
.item_right_title{
    border-bottom: 1px solid #ffffff;
    font-size: 30px;
    color: rgb(255, 255, 255);
    padding: 0px 0px 10px 0px;
}
.item_right_title_box{
    width: 80%;
}
.menu_add_block_right{
    justify-self: center;
}
.value_right_all{
    display: grid;
    grid-template-columns:20px 15fr 1fr 5fr;
    justify-items: start;
    align-items: center;
}
.value_right {
    margin: 0px 20px 0px 20px;
    width: 90%;
    border-bottom: 2px solid rgb(47, 22, 105);
    padding: 5px 0px 5px 20px;
}

.menu_add_block_right{
    display: grid;
    grid-template-columns: 10fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-self: start;
    align-items: center;
    grid-column-gap: 20px;
}
.input_right{
    width: 100%;
    /*font-weight: 500px;*/
    outline: none;
    margin: 0px 20px 0px 0px;
    color: rgb(255, 255, 255);
    padding: 5px  ;
    background: none;
    border:0px;
    border-bottom: 2px solid #ffffff;
    font-size: 16px;
}
.value_text{
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}


.react-switch-checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
}

.react-switch-label {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 40px;
    height: 15px;
    background: #EF476F;
    border-radius: 100px;
    position: relative;
    transition: background-color .2s;
}

.react-switch-label .react-switch-button {
    content: '';
    position: absolute;
    top: 1px;
    left: 1.5px;
    width: 13px;
    height: 13px;
    border-radius: 45px;
    transition: 0.2s;
    background: #fff;

    box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
    left: calc(100% - 1px);
    transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
    width: 60px;
}
.svg-icon{
    cursor: pointer;
}

.svg-icon.value{
    fill: rgb(255, 255, 255)
}
.svg-icon:hover{
    transition: .2s;
    transform: scale(1.1);
}
.svg-icon_done{
    fill: rgb(172, 172, 172);
    cursor: pointer;
}
.del{
    fill: rgb(245, 91, 91);
    stroke:  rgb(245, 91, 91);
    stroke-width: 0.2px;
}
.done{
    fill: rgb(255, 255, 255);
    /* stroke:  rgb(124, 124, 124); */
    stroke-width: 0.5px;
}
.done.yes{
    fill: #00fff1;
    /* stroke:  rgb(124, 124, 124); */
    stroke-width: 0.5px;
}
.important{
    margin-right: 20px;
    stroke:rgb(255, 255, 255);
    fill:white;
    stroke-width: 0.3px;
}
.important.yes{
    stroke: #fbff00;
    stroke-width: 1;
}
.remove{
    fill: rgba(255, 255, 255, 0.34);
    margin-right: 20px;
}
.remove:hover{
    fill: rgb(255, 255, 255);
}