.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid #2b3035;
}

.delete-btn:hover {
  background-color: #bb2d3b;
  transform: scale(1.1);
}

.edit-mode .card {
  border: 1px dashed #6c757d !important;
}

.edit-mode .btn-link-custom {
  cursor: context-menu !important;
}

.sort-btn {
  position: absolute;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background-color: #0dcaf0;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid #2b3035;
}

.sort-btn:hover {
  background-color: #3dd5f3;
  transform: scale(1.1);
}

.sort-left { left: 5px; }
.sort-right { left: 30px; }

#butset button i {
  font-size: 14px;
}

#butset .btn::before {
  content: '';
  position: absolute;
  right: 0;
  font-size: 0.8rem;
  background: #222;
  color: #fff;
  padding: 3px 16px 3px 8px;
  z-index: -1;
  opacity: 0;
  transition: all 500ms ease;
}

#butset .btn:hover::before {
  content: attr(data-title);
  right: 60px;
  width: max-content;
  opacity: 1;
}

.btn-xs {
  padding: 3px;
  line-height: 0;
  margin-bottom: 3px;
}

.udbtns {
  width: 60px;
}

#gon {
  z-index: 90;
  width: 24px;
  height: max-content;
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
  position: fixed;
  bottom: 10px;
  left: 0;
  padding: 10px 0;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border: 1px solid aliceblue;
  border-right: 0;
  cursor: pointer;
}

html[data-bs-theme="light"] {
  & body{
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    height: 100vh;
  }
  .card-header {
    background-color: rgb(190, 210, 223) !important;
  }
  .modal-theme {
    background-color: rgb(190, 210, 223) !important;
    color: rgb(28, 28, 28) !important;
  }
  .btn-outline-theme {
    border: 1px solid rgb(77, 77, 77);
    color: rgb(77, 77, 77);
  }
}

html[data-bs-theme="dark"] {
  & body{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255, 255, 255, 0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(147, 147, 147, 0.4) 120%) #1e1e1e
    background-blend-mode: multiply,multiply;
    height: 100vh;
  }
  .card-header {
    background-color: rgb(28, 28, 28) !important;
  }
  .modal-theme {
    background-color: rgb(28, 28, 28) !important;
    color: rgb(190, 210, 223) !important;
  }
  .modal-theme .form-label, .modal-theme .btn-close{
    color: rgb(190, 210, 223) !important;
  }
  .btn-outline-theme {
    border: 1px solid rgb(190, 210, 223);
    color: rgb(190, 210, 223);
  }
}