.hotspot-top {
  top: 0;
}

.hotspot-bottom {
  bottom: 0;
}

.hotspot-left {
  left: 0;
}

.hotspot-right {
  right: 0;
}

.hotspot-left,
.hotspot-right {
  z-index: 99999998;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
}

.hotspot-top,
.hotspot-bottom {
  z-index: 99999998;
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
}

.column-move {
  padding: 1rem;
}

#header .column-move-mouse-down {
  cursor: move;
}

.column-clone {
  display: inline-block;
  position: fixed;
  opacity: 0.85;
  z-index: 9999 !important;
  background-color: var(--c-header-bar);
  will-change: transform;
  cursor: grabbing;
  padding: 6px;
  border: 1px solid var(--c-accent);
  -webkit-box-shadow: 0 0 0.7rem 0 rgba(79, 79, 79, 0.4);
  -moz-box-shadow: 0 0 0.7rem 0 rgba(79, 79, 79, 0.4);
  box-shadow: 0 0 0.7rem 0 rgba(79, 79, 79, 0.4);
  display: flex;
  flex-direction: row;
}
.column-clone .col-sort {
  display: none;
}
.column-clone span {
  font-weight: bold;
}

.caret-animation {
  --caret-colour: var(--c-accent);
  position: relative;
  background-color: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  display: inline-block;
  z-index: 999;
  height: 1.875rem;
  width: 0.1875rem;
  top: 0;
  left: 0;
  will-change: transform;
  animation: cursor-blink 500ms ease-in-out 1;
}

.caret {
  --caret-colour: var(--c-accent);
  position: absolute;
  display: flex;
  z-index: 998;
  background-color: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  width: 0.1875rem;
  height: 1.875rem;
  will-change: transform;
  transition: all ease-in-out 50ms;
}

@keyframes cursor-blink {
  0% {
    opacity: 1;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    border-left: 1px solid var(--c-accent);
    border-right: 1px solid var(--c-accent);
    transform: scaleX(8);
  }
}