/* Custom DRAG AND DROP css
--------------------------------------------------
#C5C4DC
#9896C0
#7371A9
#4E5396
#283786
#22497C
#1E566F
#1C5B68


 */
#left, #right {
  position: relative;
}
#left {
  float: left;
}
#right {
  float: right;
}
.drag, .drop {
  font-size: 1.2em;
  line-height: 1.8em;
  position: relative;
  z-index: 10;
  display: inline-block;
  width: 350px;
  min-height: 50px;
  margin: 10px 0;
  padding: 0 20px;
  vertical-align: middle;
  border-radius: 7px;
}
.drag:focus, .drop:focus {
  outline: 0;
}
.dragHolder, .dropHolder {
  position: relative;
}
.drag {
  z-index: 10;
  padding-right: 40px;
  color: #fff;
  border: 3px solid #283786;
  border-radius: 7px  0 0 7px;
  background-color: #283786;
}
.drag:hover, .drag:focus {
  background-color: #22497c;
}
.drop {
  font-size: 1.2em;
  padding-left: 40px;
  border: 3px solid #283786;
  border-radius: 7px;  /* padding: 10px; */
  border-radius: 0  7px 7px 0;
  background-color: #c5c4dc;
}
.drop:hover, .drop:focus {
  background-color: #9896c0;
}
.line {
  position: absolute;    /* display: none; */
  z-index: 0;
  top: 50%;
  left: 400px;
  width: 40px;
  height: 10px;    /* border: solid thin red; */
  margin-top: -5px; /* pointer-events: none;*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #333;
}
.line:hover {
  z-index: 1;
  opacity: 0.5;
}
.tag, .tag-drag, .tag-drop {
  z-index: 101;
  display: inline-block;
  width: 40px;
  height: 40px;
  opacity: .7;
  border-radius: 100px;
  background-color: #24386e;
}
.tag-drag, .tag-drop {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  cursor: pointer;
/*  pointer-events: none;
*/  opacity: 1;
  border: 1px solid #fff;
}
.tag-drag {
  right: -4px;
}
.tag-drop {
  left: -4px;
  background-color: #9896c0;
}
.tag-drag:hover{
  transition: 0.2s;
  right: -8px;

}

.tag-drag-landing-area, .tag-drop-landing-area {
  position: absolute;
  z-index: 20;
  top: 0;    /* margin-top: -25px; */
  width: 25px;
  height: 120%;
  pointer-events: none;
  background-color: #eee;
}
.tag-drag-landing-area {
  top: -6%;
  right: -4px;
}
.tag-drop-landing-area {
  top: -6%;
  left: -4px;
}
#feedback {
  display: block;
  min-height: 1.1em;
  color: #000;
}
.noselect {
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                        not supported by any browser */
  -webkit-touch-callout: none; /* iOS Safari */
  -khtml-user-select: none;    /* Konqueror */
}

/* ----------- Large Display ----------- */
@media screen and (max-width:1920px) and (max-height:1080px) {

  /* Styles */
}

/* ----------- Laptop HiDPI screen ----------- */
@media screen and (max-width:1440px) and (max-height:900px) {

  /* Styles */
}

/* ----------- Laptop ----------- */
@media screen and (max-width:1366px) and (max-height:768px) {

  /* Styles */
  .drag, .drop {
    line-height: 2em;
    min-height: 45px;
    padding: 0;
    width: 400px;
  }

  .tag-drop-landing-area, .tag-drag-landing-area {
    top: -6px;
    height: 150%;

    
}
}

/* ----------- Laptop MDPI screen ----------- */
@media screen and (max-width:1280px) and (max-height:800px) {

  /* Styles */
}

/* ----------- iPad ----------- */
@media only screen and (max-device-width:1024px) and (max-device-height:768px) {

  /* Styles */
  #activity {
    font-size: 1em;
  }
}

/* ----------- iPhone 5 ----------- */
@media only screen and (max-device-width:568px) and (max-device-height:320px) {

  /* Styles */
  #activitySortableList, #order {
    width: 50%;
  }
  #order li, .ui-droppable {
    font-size: .9em;
    line-height: 1em;
    height: 3em;
  }
  span.swappableElement {
    line-height: 2.9em;
    height: 2.9em;
  }
}