*{
   box-sizing:box;
}
body{
    margin:0;
    padding:0
}
.toolbox-cont{
    height:5rem;
    background-color:#4b4b4b;
    display: flex;
    align-items: center;
}
.toolbox-cont >*{
    margin-left: 4rem;
    border-radius: 2px;
    
}
.toolbox-priority-cont{
    height:3rem;
    width:16rem;
    background-color:#3d3d3d;
    margin:1rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 5px;
}

.action-btn-cont{
    height:3rem;
    width:8rem;
    background-color: #3d3d3d;
    margin:1rem;
    /* margin-left: 10rem; */
    
    display:flex;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 5px;
}
.add-btn{
color:#dfe4ea;
display:flex;
justify-content: space-around;
align-items: center;
width:50%;
}

.remove-btn{
color:#dfe4ea;
display:flex;
justify-content: space-around;
align-items: center; 
color:#dfe4ea;
width:50%;
}
.color{
height:2rem;
width:3rem;
background-color:pink;
border-radius: 5px;
}
.lightpink{
    background-color: lightpink;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.lightblue{
    background-color: lightblue;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.lightgreen{
    background-color: lightgreen;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.black{
    background-color: black;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.add-btn:hover{
    background-color:#747d8c;
}
.remove-btn:hover{
    background-color:#747d8c;
}


.modal-cont{
height: 50vh; 
width: 45vw;
background-color: rgb(81, 78, 78);
position: absolute;
top: calc((100vh - 50vh) / 2);
left: calc((100vw - 45vw) / 2);
display: none;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}


.textarea-cont{
   
    width:70%;
    border:none;
    outline: none;
    resize: none;
    background-color: #dfe4ea;
    padding:2rem;
    font-size: 1.5rem;
    
}
.priority-colors-cont{
    height:100%;
    width:30%;
    background-color:#57606f;
    display:  flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
}

.priority-color{
    
    height:3.5rem;
    width:60%;
}
.border{
    border:4px solid #f3ecec;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

    
}
.ticket-cont{
    height:15rem;
    width:17rem;
   
    margin-bottom: 2rem;

    
}

.ticket-lock{
    height:2rem;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    background-color: #dcdde1; 
    display: flex;
    font-size:2rem;
    padding-right: 1rem;
    justify-content: flex-end;
    border-radius: 0px 0px 10px 10px;
}
.ticket-color{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    height:2rem;
   
    border-radius: 10px 10px 0px 0px;
    
}
.ticket-id{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    height:1.5rem;
    /* background-color: yellow; */
    padding:0.6rem;
    font-weight: bold;
    font-size: 1.5rem;
    
}

.task-area{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  height:calc(100% - 2rem  - 2rem - 2rem);
  background-color: #dcdde1;
   
    font-weight: bold;
    padding:0.6rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
.main-cont{
    display:flex;
    flex-wrap: wrap;
     padding:2rem;
    gap:2rem; 
    
}

/*resposive desigh*/

 
@media screen and (min-width:425px) and  (max-width :760px){
    .modal-cont{
        width:55vw;
        left:calc((100vw -60vw)/2);
    }

}

@media screen and (max-width: 426px) {
    .modal-cont {
        width: 75vw;
        height: 55vh;
        top: calc( ( 100vh - 55vh ) / 2 );
        left: calc( ( 100vw - 75vw ) / 2 );
        flex-direction: column;
    }
    .textarea-cont {
        width: 100%;
        height: 75%;
    }
    .priority-colors-cont {
        flex-direction: row;
        width: 100%;
        height: 25%;
    }
    .priority-color {
        width: 17%;
    }
    .toolbox-cont > * {
        margin-left: 2rem;
        border-radius: 2px;
    }
}