body {
  font-family: Arial, sans-serif;
  display: flex;
  background-color: rgb(228, 224, 205);
}

.sidebar {
  width: 300px;
  min-width: 300px;
  height: 95vh;
  padding: 10px;
  background-color: rgb(250, 247, 232);
  border-right: 1px solid #ccc;
  border-radius: 10px;
  position: fixed; /* Make the sidebar fixed */
  top: 0; /* Align to the top of the viewport */
  left: 0; /* Align to the left of the viewport */
  overflow-y: auto; /* Add scrolling if the content overflows */
}

.main {
  margin-left: 320px; /* Adjust the left margin to accommodate the fixed sidebar */
  flex-grow: 1;
  padding: 10px;
}

/* ... rest of your CSS ... */
.block {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
  border-radius: 20px;
  cursor: move;
  border: 1px solid #000;
  padding-left: 20px;
}
.over {
  border: 2px dashed #000;
}
.tabd {
  margin-left: 30px;
  /* transform: translateX(20px); */
}
.inp {
  width: 50px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid #000;
}

.red {
  background-color: rgb(255, 197, 197);
}

.red .inp {
  background-color: rgb(255, 156, 156);
}

.orenj {
  background-color: rgb(255, 230, 197);
}

.orenj .inp {
  background-color: rgb(255, 212, 156);
}

.purpul {
  background-color: rgb(241, 197, 255);
}

.purpul .inp {
  background-color: rgb(230, 156, 255);
}

.blu {
  background-color: rgb(197, 226, 255);
}

.blu .inp {
  background-color: rgb(156, 212, 255);
}

.grin {
  background-color: rgb(197, 255, 204);
}

.grin .inp {
  background-color: rgb(156, 255, 156);
}

.btn {
  border-radius: 10px;
  border: 2px solid #000;
  background-color: rgb(255, 255, 195);
  font-size: larger;
  cursor: pointer;
  margin: 5px;
  width: 360px;
  height: 80px;
  box-shadow: #000000 0px 5px 15px;
  position: absolute;
  right: 5px;
}

.btn:hover {
  background-color: rgb(156, 255, 156);
  transform: translateY(-5px);
}

.btn:active {
  background-color: rgb(0, 255, 0);
  transform: translateY(10px);
}

.frame {
  background-color: rgb(147, 250, 255);
  width: 360px;
  min-width: 360px;
  /* height: 280px; */
  border-radius: 10px;
  margin-top: 90px;
  /* position: absolute; */
  bottom: 10px;
  right: 10px;
  
  border-radius: 20px solid #000;
}

.delete-btn {
  background-color: rgb(255, 83, 83);
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  width: 150px;
  height: 40px;
  font-size:medium;
  right: 385px;
  top: 40px;
  color:rgb(87, 87, 87)
}
.delete-btn:hover {
  background-color: rgb(100, 0, 0);
  transform: translateY(-5px);
}
.delete-btn:active {
  background-color: rgb(255, 0, 0);
  transform: translateY(10px);
}

/* Add the following CSS for the confirmation dialog */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: rgb(255, 230, 197);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid #000;
  box-shadow: #000000 10px 5px 15px;
}

.modal button {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.modal .btn-delete {
  background-color: red;
  color: white;
}

.modal .btn-cancel {
  background-color: grey;
  color: white;
}

.popup {
  display: none;
  
  
}

.on_sidebar{
  
}

.on_sidebar:hover  + .popup {
  display:block;
  position: absolute;
  opacity: 1;
  box-shadow: #000 -10px 10px 10px;
  background-color: aquamarine;
  /* animation: show 5s ease-in-out; */
}

.icon{
 
  height: 15px;
  width: 15px;
  cursor: pointer;
  
}

.explination{
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
  border-radius: 20px;
  cursor: move;
  border: 1px solid #000;
  padding-left: 20px;
  opacity: 50%;
  
}

.img{
 
  height: auto;
  width: 100%;
  
}