* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.toolbox-cont {
  height: 5rem;
  background-color: #4b4b4b;
  display: flex;
  align-items: center;
}

.toolbox-cont > * {
  margin-left: 4rem;
}

.toolbox-priority-cont {
  height: 3.5rem;
  width: 18rem;
  background-color:  #3d3d3d;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}


.action-btn-cont{
       height:3.5rem ;
       width:8rem ;
       background-color: #3d3d3d;
       display:flex
}

.action-btn-cont>*{
       display: flex;
       justify-content: center;
       width: 50%;
       font-size: 2rem;
       align-items: center;
       color: white;

}

.color {
  height: 1.5rem;
  width: 3rem;
}

.lightpink {
  background-color: lightpink;
}

.lightgreen {
  background-color: lightgreen;
}

.lightblue {
  background-color: lightblue;
}

.black {
  background-color: black;
}


.modal-cont{
  height: 50vh;
  width: 45vw;
  background: lightblue;
  position: absolute;
  top : 30%;
  left : 25%;
  display: none;

}


.textArea-cont{
  height: 100%;
  width: 75%;
  background-color: #dfe4ea;
  outline: none;
  border: none;
  resize : none;
  font-size: 2rem;
  padding: 2rem;
}


.priority-colors-container{
  height: 100%;
  width:25% ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: #4b4b4b
}

.priority-color{
  height: 3rem;
  width: 5rem;
}


.main-cont{
  display:flex;
  gap:2rem;
  justify-content: center;
  padding: 2rem;
  flex-wrap: wrap;
}


.ticket-cont{
  height: 12rem;
  width: 15rem;
  background-color: coral;
}


.ticket-color{
  height: 1rem;
 
}


.ticket-id{
  background-color: yellow;
  height: 2rem;
}

.ticket-lock{
  display: flex;
  font-size: 1.5rem;
  justify-content: flex-end;
  margin-top: 90px;
  margin-right: 5px;

}

.add-btn:hover{
  background-color: #4BB543;
}


.remove-btn:hover{
  background-color: #4BB543;
}


.toolbox-priority-cont>*:hover{
        background-color: #485460;
}
.active{
  border: 5px solid white;
}


    
   
    
 