body {
   margin: 0;
}

* {
  box-sizing: border-box;
}

.navbar {
  height: 12vh;
  background-color: #333;
  display: flex;
}

.ticket-container {
  min-height: 88vh;
  background-color: #f2f2f2;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-image: url("./bg_gif1.gif");
  background-repeat: no-repeat;
  background-size: cover;
}

#zira-title{
  text-align: center;
  display: flex;
  margin-left: 20vw;
  font-family: Georgia;
  text-decoration: underline;
  color: white;
}

.filter-container, .add-delete-container {
  margin-top: 2vh;
  margin-left: 8vw;
  background-color: #444;
  height: 8vh;
}

.filter-container {
  width: 18vw;
  display: flex;
}

.add-delete-container {
  width: 9vw;
  display: flex;
  margin-left: 300px;
}

.filter, .add, .delete {
  height: 100%;
}

.filter {
  width: 25%;
  
}

.add, .delete {
  width: 50%;
  height: 100%;
}

.pink-color-btn,
.blue-color-btn,
.yellow-color-btn,
.green-color-btn {
  margin: calc(8vh * 0.25) calc(4.5vw * 0.25) calc(8vh * 0.25) calc(4.5vw * 0.25);
  border-radius: 3px;
  display: block;
  width: 50%;
  height: 50%;
}

.pink-color-btn, .pink-modal-filter {
  background-color: pink;
}

.yellow-color-btn, .yellow-modal-filter {
  background-color: yellow;
}

.green-color-btn, .green-modal-filter {
  background-color: green;
}

.blue-color-btn, .blue-modal-filter {
  background-color: blue;
}


.action-btn {
  width: 50%;
  height: 50%;
  text-align: center;
  display: block;
  background-color: white;
  margin: calc(8vh * 0.25) calc(4.5vw * 0.25) calc(8vh * 0.25) calc(4.5vw * 0.25);
}

.add:hover, .delete:hover {
  background-color: black;
  cursor: pointer;
}

.filter:hover {
  background-color: black;
  cursor: pointer;
  opacity: 0.5;
}

.filter.active {
  background-color: black;
}

.modal {
  height: 18rem;
  width: 35rem;
  background-color: white;
  display: flex;
  box-shadow: 0px 0px 20px 5px grey;
  position: absolute;
  top: calc((88vh - 18rem) / 2);
  left: calc((100vw - 35rem) / 2);
  border-radius: 30px;
}

.task-to-be-added {
  height: 100%;
  width: 70%;

}

.priority-list {
  height: 100%;
  width: 30%;
  background-color: #444;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-filter {
  width: 100%;
  height: 20%;
}

.modal-filter:hover {
  opacity: 0.5;
  cursor: pointer;
}

.modal-filter.active {
  border: 5px solid;
}

.task-to-be-added {
  padding: 3rem;
  outline: none;
}

.placeholder {
  color: gray;
}

.ticket {
  height: 9rem;
  width: 16rem;
  background-color: white;
  border-radius: 10px;
}

.ticket.active {
  box-shadow: 0 0 5px 1px;
}

.ticket-color {
  height: 6%;
  width: 100%;
}

.ticket-id {
  color: grey;
  width: 100%;
  height: 15%;
  padding: 3%;
}

.task {
  width: 100%;
  height: 79%;
  padding: 3%;
}

.ticket-color-yellow {
  background-color: yellow;
}

.ticket-color-pink {
  background-color: pink;
}

.ticket-color-blue {
  background-color: blue;
}

.ticket-color-green {
  background-color: green;
}