/* Add some margin to the page and set a default font and colour */



/* Slots for final card positions */

#cardSlots {
/*  margin: 50px auto 0 auto;
  background: #ddf;*/
}

/* The initial pile of unsorted cards */

#cardPile {
/*  margin: 0 auto;
  background: #ffd;*/
}

#cardSlots, #cardPile,#cardSlots1, #cardPile1 {
  width: 100%;
  height:auto;
 
}

/* Individual cards and slots */

#cardSlots div, #cardPile div, #cardSlots1 div, #cardPile1 div {
    width: 250px;
    height: 10vh;
    padding: 0 10%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #01539c;
    margin-bottom: 3vh;
    display : flex;
  align-items : center;
  justify-content: center
}

/*#cardSlots div:first-child, #cardPile div:first-child, #cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0;
}*/

#cardSlots div.hovered, #cardSlots1 div.hovered {
  background: #aaa;
  
}
#cardSlots, #cardSlots1{
    /*pointer-events:none;*/
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
#cardSlots div, #cardSlots1 div {
  border: 1px solid #ff3941;
  color: transparent;
   background-image: url(../img/boxbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

#cardPile div, #cardPile1 div {
    color: #01539c;
    background: #FFF;
    font-family: Prelo-SemiBold;
    font-size: 2rem;
    padding: 0 10%;
    font-weight: 300;
    margin-bottom: 3vh;
    text-align: center;
    cursor: move;
}

#cardPile div.ui-draggable-dragging, #cardPile1 div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

.correct{
    background: green !important;
    color: #FFF !important;
}
.wrong{
    background: red !important;
    color: #FFF !important;
}