* {
    margin: 0;
    padding: 0;
}

.toolbox-cont {
    background-color: rgb(39, 33, 33);
    height: 10vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    /* margin-left: 4vw; */
}

i {
    color: white;
}



.toolbox-priority-cont {
    display: flex;
    flex-direction: row;
    /* justify-content : center; */
    align-items: center;
    box-sizing: border-box;
    border: 1px solid rgb(80, 80, 80);
    margin-left: 7vw;
}

.clearFilter{
    margin-left: 1vw;
    scale: 1.3;
}
.clearFilter:hover{
    cursor: pointer;
    scale: 1.34;
}

.colorFilter {
    height: 5vh;
    width: 6vw;
    box-sizing: border-box;
    border: 2px solid rgb(39, 33, 33);
}

.colorFilter:hover {
    cursor: pointer;
}

.lightpink {
    background-color: lightpink;
}

.lightgreen {
    background-color: lightgreen;
}

.lightblue {
    background-color: lightblue;

}

.black {
    background-color:black;
}

.lightpink:hover {
    background-color: rgba(228, 163, 248, 0.872);
}

.lightgreen:hover {
    background-color: rgba(184, 239, 184, 0.89);
}

.lightblue:hover {
    background-color: rgba(163, 226, 248, 0.925);
}

.black:hover {
    background-color: rgb(64, 62, 62);
}




/* toggle */

.toggles{
    scale: 2;
    margin-left: 45vw;
}
.toggles:hover{
    cursor: pointer;
}
.fa-toggle-on{
    display: none;
}
.fa-toggle-off{
    display: block;
}

.action-btn-cont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 2vw;
}

.add-btn,
.remove-btn {
    background-color: rgb(53, 48, 48);
    margin-left: 1vw;
}

.add-btn:hover,
.remove-btn:hover {
    background-color: rgba(53, 48, 48, 0.7);
    cursor: pointer;
    margin-left: 1vw;
}

.add,
.del {
    margin: 1vw;
    scale: 1.3;
}


/* task ticket style */


.main-cont {
    box-sizing: border-box;
    /* border: 2px solid rgb(52, 52, 52); */
    height: fit-content;
    width: 95vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3vh;
    margin-left: auto;
    margin-right: auto;
}

.ticket-cont {
    border-radius: .5rem;
    box-sizing: border-box;
    border: 2px solid rgb(255, 172, 172);
    height: 25vh;
    width: 13rem;
    /* background-color: lightblue; */
    margin-top: 2vh;
    overflow: hidden;
    margin-left: 1vw;
    margin-right: 1vw;
}

.ticket-color {
    background-color: lightpink;
    height: 2vh;
}

.ticket-id {
    background-color: yellow;
    height: 3vh;
    text-align: center;
}

.task-area {
    background-color: lightcoral;
    height: 16.5vh;
}
.task-area:focus{
    outline: none;
}

.ticket-lock {
    /* margin-top: 7.5vh; */
    height: 3vh;
    background-color: lightcoral;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.lock {
    display: block;
    margin-right: .3vw;
    color: rgb(37, 37, 37);
}

.lock:hover {
    cursor: pointer;
}
.unlock {
    display: none;
    margin-right: .3vw;
    color: rgb(37, 37, 37);
}

.unlock:hover {
    cursor: pointer;
}

/* modal container */

.modal-cont {
    position: absolute;
    height: 50vh;
    width: 40vw;
    top: 30%;
    left: 30%;
    right: 30%;
    background-color: lightblue;
    /* display : flex; */
    flex-direction: row;
    align-items: center;
    justify-content: right;
    display: none;
}

.textArea-cont {
    /* background-color: red; */
    width: 70%;
    height: 100%;
    resize: none;
    padding: 0.5rem;
    box-sizing: border-box;
}

.placeholderLight::placeholder{
    color: black;
}

.placeholderDark::placeholder{
    color: white;
}

.priority-colors-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(47, 47, 47);
    height: 50vh;
    width: 30%;
}

.priority-color {
    height: 6vh;
    width: 5vw;
    border-radius: 1rem;
    box-sizing: border-box;
    border: 2px solid #272121;
    margin-top: 1rem;
}

.priority-color:hover {
    cursor: pointer;
}

.priority-colors-container>p{
    color: white;
    font-size: .8rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
}



/* hover title changes */
  [title]:after {
    transition: opacity 1ms ease-out; /* 👈 Change the time to meet your requirements. */
  }

  [title]:hover:after {
    opacity: 1;
  }