/*Dra och släpp-exempel1*/
#div1 {
  width: 150px;
  height: 150px;
  border: 1px solid #aaaaaa;
  color: #000;
  background-color: #fff;
}

/*Dra och släpp-exempel2*/
  #droppable1, #droppable2 { 
    width: 200px; 
    height: 200px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px;
    border: 2px dashed #000;
    color: #000;
  }

  #draggable, #draggable-nonvalid { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0;
    color: #000;
  }

/*jquery ui overrides*/
.ui-state-hover{
  border: 2px solid #000 !important;;
}
.ui-state-active{
  background-color: #16a6c9 !important;
  color: #fff;
}

.ui-state-highlight {
  background: #16a6c9 !important;
}


/* Drag and drop box exercise */
#drag_and_drop_warmgrey .draggable_item {
  cursor: pointer !important;
  background-color: #7d6363;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  height: 130px !important;
  line-height: 24px !important;
  margin: 0 5px 10px 0;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  width: 300px !important;
  z-index: 5;
}

#drag_and_drop_warmgrey .draggable_item:active{
  background-color: #d9cfcf;
  color: #3d2626;
}

.draggable_item {
  cursor: pointer !important;
  background-color: #63605b;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 20px !important;
  margin: 0 5px 10px 0;
  overflow: hidden;
  padding: 15px;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  width: 90% !important;
  z-index: 5;
}
.draggable_item:hover {
  box-shadow: 1px 1px 1px #888;
}
.draggable_item:active{
  background-color: #d9d6de;
  color: #2b2936;
}
.draggable_item_shadow {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
}
.draggable_item_border {
  border: 2px solid #fff !important;
}

.draggable_item_3 {
  cursor: pointer !important;
  background-color: #7d6363;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 0 5px 10px 0;
  padding: 10px;
  text-decoration: none;
  vertical-align: middle;
  width: 100%;
  z-index: 5;
}
.draggable_item_3:hover {
  box-shadow: 1px 1px 1px #888;
}
.draggable_item_3:active{
  background-color: #d9cfcf;
  color: #2b2936;
}

#drag_and_drop_cap3 .droppable_area {
  border: 2px dashed #7d6363 !important; 
}
.droppable_area {
  border: 2px dashed #787387 !important; 
  padding: 10px !important;
  color: #000 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  width: auto !important;
  height: 410px !important;
  /* cursor: pointer !important; */
  z-index: 1 !important;
}

.droppable_area_special {
  border: 2px dashed #787387 !important; 
  padding: 10px !important;
  color: #000 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  width: 200px; 
  max-width: 200px; 
  height: 100px !important;
  /* cursor: pointer !important; */
  z-index: 1 !important;
}


.draggable_item_extra {
  cursor: pointer !important;
  background-color: #63605b;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 20px !important;
  margin: 0 5px 10px 0;
  overflow: hidden;
  padding: 15px;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  width: 90% !important;
  z-index: 5;
}
.draggable_item_extra:hover {
  box-shadow: 1px 1px 1px #888;
}