html, body{
    min-height: 100%;
    overflow: auto;
    font-family: helvetica,arial,sans-serif;
    color: #333;
}

body{
    margin: 0;
    padding: 0;
}

/*** Drop Section - Drop Area***/

.fa-drop-area > ul{
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    float: left;
}

.fa-drop-area li{
    float: left;
    display: table;
}

.fa-drop-area li:first-child{
    text-indent: -999px;
    position: relative;
    border-right: 1px solid #CCC;
    padding-right: 10px;
    margin:0 0 0 5px;
}
.fa-drop-area li:first-child button{
    border:1px dashed #CCC;
    height: 78px;
    width: 78px;
    line-height: 1;
    margin-right: 0;
    background: transparent;
}

.fa-drop-area li:first-child button:hover{
    box-shadow: none;
}

.fa-drop-area li:first-child span{
    color: transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.fa-drop-area li:first-child span:after{
    content: '+';
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    color: #CCC;
    font: 32px 'icon';
    position: absolute;
    line-height: 59px;
}

.fa-drop-area li:first-child img{
    opacity: 0.4;
}

.fa-drop-area button[data-itemCount]:after{
    content: attr(data-itemCount);
    position: absolute;
    top: -1px;
    right: -1px;
    line-height: 1;
    background: rgb(232, 159, 0);
    border-radius: 50%;
    padding: 6px;
    min-width: 30px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 18px;
}

.waiting-for-drop {
    background: #FFF !important;
    border: 2px dashed #505050 !important;
}

.waiting-for-drop img{
    opacity: 1 !important;
}

.drag-enter > button {
  background: #F2A900 !important;
}

.fa-drop-area button[data-itemCount="0"]:after{
    display: none;
}

.fa-drop-area ul li button{
    display: block;
    border: none;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    height: 100px;
    margin: 10px 5px;
    padding: 10px;
    width: 100px;
    border-radius: 100px;
    border: 1px solid #CCC;
    overflow: visible;
}

.fa-drop-area button[class^="toggle"]{
    float: right;
    margin: 10px;
    height: 33px;
    width: 33px;
    padding: 0;
    text-indent: 100%;
    position: relative;
}

.fa-drop-area button[class^="toggle"]:after{
    content: 'd';
    position: absolute;
    font: 12px 'icon';
    line-height: 1;
    text-indent: 0;
    top: 11px;
    left: 7px;
    text-transform: lowercase;
    transition: all 400ms;
}

.fa-drop-area button.toggleup{}

.fa-drop-area button.toggledown:after{
    transform: rotate(180deg);
}

/*** Drop Section - Item List***/
.fa-items-list{
    width: 100%;

}
/*********** Sliding Panel *************/
[class^='offPanel']{
    width: calc(100vw);
    height: calc(100vh - 120px);
    position: absolute;
    background: #FFFFFF;
    top: 120px;
    transition: all 400ms;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 0px;
}

/*[class^='offPanel'].show{*//**lose show**/
/*left: 0;*/
/*top: 120px;*/
/*}*/

/*[class$='-east']{*//**add ng-hide to these**/
/*left: 100vw;*/
/*}*/
/*[class$='-south']{*//**add ng-hide to these**/
/*top: 100vh;*/
/*}*/
/*** TODO: ask Conor why this fix was needed ***/
.offPanel-south.down{
    top: calc(100vh - 99px);
}
.offPanel-south{
    left: 0;
    top: 106px;
}
[class^='offPanel'] button .toggle{
    float: right;
}