.dtwrapper {
  position: relative;
  padding: 15px;
  border-radius: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: .3s ease;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
}

.dtwrapper .icon {
  position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dtwrapper .icon i {
  position: relative;
    width: 55px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    border-radius: 100%;
    font-size: 1.5em;
    cursor: pointer;
}

.dtwrapper .icon i:hover{
  background: #efedfb;
}

.dtwrapper .tab-box{
  display: flex;
  gap: 15px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style: none;
}
.dtwrapper .tab-box.dragging{
  cursor: grab;
  scroll-behavior: auto;
}
.dtwrapper .tab-box .dttab{
  background: #e5e5e5;
  font-size: 1.18rem;
  padding: 10px 25px;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: .3s ease;
}
.dtwrapper .tab-box .dttab:hover{
  background: #efedfb;
}
.dtwrapper .tab-box.dragging .dttab{
  user-select: none;
  pointer-events: none;
  transition: .3s ease;
}
.dtwrapper .tab-box .dttab.active{
  color: #fff;
  background: #251ab7;
  transition: .3s ease;
}