/** sleepvraag **********************************************************/
.dragBalansItem{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--oranjeDonker);
    z-index: 1;
    cursor: grab;
}

.dragBalansItem.divDragging{
    cursor: grabbing;
}

/* 20220524 deze class wprdt aan het item toegekend tijdens reverting */
div #drag .dragBalansItem.fout{
    -webkit-transition: background-color 1s;
    -moz-transition:    background-color 1s;
    -ms-transition:     background-color 1s;
    -o-transition:      background-color 1s;
    transition:         background-color 1s;

    background-color: var(--roodDonker) !important;
}

/* START dit zijn wat styles voor de sleepvraag */
div #drag .dragBalansItem{
  border-width: 0px;
  background-color: var(--oranjeDonker);
  padding: 7px 3px 3px 6px;
  width:150px;
  height: 30px;
  cursor: grab;
}

div #drag .trash {
    border: 10px orangered solid;
    display:block;
    overflow:hidden;
    background-color:black;
    text-align: center;
    display:block;
    overflow:hidden;
    height: 100px;
    width: 100px;
    float: right;
}

div #drag .star-size {
    font-size: 80px;
    color:orangered;
    line-height:1em;
}

div #drag table td{
    width: 170px;
    height: 35px;
}

div #drag table td.slim{
    width: 20px;
    height: 35px;
}

.ui-draggable-dragging{
  -webkit-box-shadow: 7px 7px 3px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 7px 7px 3px -4px rgba(0,0,0,0.75);
  box-shadow: 7px 7px 3px -4px rgba(0,0,0,0.75);
  z-index: 99;
}

.dragBalansItem{
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin: 5px;
}

.doelcel{
    //background-color: #DB8F1B;
    width:165px;
}

.teBreed{
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.naartoe td.borderbottom{
   border-bottom: 2px black solid;
}

div #drag table td{
    //padding: 3px 0px 1px 8px;
    height:40px;
}

.naartoe .dragBalansItem{
  margin: 1px 1px 2px 1px;
}

div #drag table td.pijltjesvlak{
  width: 35px;
  text-align:center;
  padding: 0px;
}


.middenonder{
  margin-left: auto; margin-right: auto;
}

.middenonder td{
    border: 2px solid #006EB3;
}

.bracket {
      stroke: #006eb3;
}

.grootblauw{
  font-size:32px;
  color: var(--menuAchtergrond);
}

div #drag table td.inspring{
  padding-left:15px;
}


div #drag table td.laag{
    height:20px;
    padding-top:0px;
}

.ui-droppable{
    background-color: var(--oranjeLicht);
}

.naartoe th{
    border: 4px var(--menuAchtergrond)Donkerder solid;
    background-color: var(--menuAchtergrond);
    font-weight: 800;
    padding: 5px;
    text-align: center;
    color: white;
}


td.mark{
    background-color: var(--zilverBackground);
}