*{margin: 0; padding:0;}
img{border:none;}

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}

body{
    text-align: center;
    font-family: 'Hind', Helvetica, sans-serif;
}
#waiting-room{
    width: 30%;
    min-height: 90vh;
}
#group-areas{
    display: inline-flex;
    width: 65%;
    margin-left: 1%;
    flex-direction:column;
}
#group-areas .group-area{
    width: 20%;
    min-height: 5em;
}
.group-row {
    display: flex;
    flex-direction: row;
}
.drag-area{
    display: inline-block;
    border: dashed .25em blue;
    margin: -.25em 0 0 -.25em; /*border collapse*/
    text-align: left;
    padding: 2.2em .75em .5em;
    vertical-align: top;
    position: relative;
}
.drag-area li{
    list-style-type: none;
    display: inline-block;
    min-width: 6em;
}
.draggable{
    margin: .25em 0;
    background-color: lightblue;
    cursor: move;
    position: relative;
}
.draggable label{
    cursor: move;
    display: inline-block;
    padding: .15em .5em .15em 0;
}
.draggable.other-day{
    background-color: #FF00FF;
}
.draggable.half-day{
    background-color: #00FFFF;
}
.draggable.boarding{
    background-color: lightgreen;
}
.drop-active{
    border-color: #2C3539;
    background-color: rgba(0,0,0,.1);
}
.drop-active:after{
    content: 'Add to Group';
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 2em;
    text-transform: uppercase;
    transform: translateX(-50%) translateY(-50%);
    opacity: .5;
    width: 100%;
    height: 100%;
    text-align: center;
}
.dragging{
    opacity:.4;
}
.buttons{
    position: absolute;
    right: .5em;
    top: .5em;
}
a.button{
    text-decoration: none;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: rgb(150,150,150);
    padding: .25em;
    border-radius: .25em;
    font-size: .95em;
    margin-left: .1em;
}
.group-area h2{
    font-size: 1.2em;
    position: absolute;
    top: 0;
    left: .25em;
}
#controls{
    height: 2.5em;
    text-align: left;
    padding: 1em;
}
#controls button{
    position: relative;
}
#controls #periods button{
    height: 1.8em;
    text-transform: capitalize;
    padding: .2em;
}
#controls button.selected:after,
.context-menu .rating-selected:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: transparent;
    left: -3px;
    top: -3px;
    border: solid 3px #625D5D;
}
#controls .rotations{
    display: block;
}
.draggable.not-arrived:before,
.draggable.checked-out:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.draggable.not-arrived:before {
    background-color: rgba(200, 200, 200, .65);
}
.draggable.checked-out:before{
    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(100,100,100,.45) 10px,
            rgba(150,150,150,.45) 20px
    );
}
.draggable.not-arrived{
    font-weight:normal;
}
.draggable .stripes{
    height: 100%;
    margin-left: 4px;
    display: inline-block;
}
.draggable .node-stripe {
    display: inline-block;
    background-color: rgb(175,175,175);
    width:4px;
    height: 100%;
    margin-right: 2px;
    padding: .15em 0;
    position: relative;
}
.node-stripe.stripe-high,
.rating.rating-high{
    background-color: red;
}
.node-stripe.stripe-med,
.rating.rating-med{
    background-color: yellow;
}
.node-stripe.stripe-low,
.rating.rating-low{
    background-color: green;
}
.node-stripe.stripe-warning{
    background-color: #F87431;
}
.node-stripe.stripe-meals {
    background-color: transparent;
}
.node-stripe .stripe-section{
    position: absolute;
    height: calc(33% + .15em);
    top: 0;
}
.node-stripe.stripe-meals .stripe-section{
     background-color: blue;
 }
.stripe-section.meal-breakfast{
    top: 0;
}
.stripe-section.meal-lunch{
    top: 50%;
    transform: translateY(-50%);
}
.stripe-section.meal-dinner{
    bottom: 0;
    top: initial;
}
.context-menu {
    position: absolute;
    background-color: rgb(215,215,215);
    width: 15em;
    left: 71%;
    z-index: 99;
    display: none;
    top: 65%;
    padding: .5em;
    border: solid thin black;
}
.selected .context-menu{
    display: block;
    cursor: auto;
}
.context-menu h3{
    margin: 0;
}
.context-menu p{
    margin-bottom: .5em;
    clear: both;
    font-weight:normal;
}
.context-menu p.right,
.context-menu p.left{
    margin:0;
}
.context-menu p.right{
    float: right;
    clear: right;
}
.context-menu p.left{
    float: left;
    clear: left;
}
.context-menu p[class^=check]{
    text-align: right;
    margin: 0;
}
.context-menu p.notes:not(:empty){
    border-bottom: solid thin rgb(155,155,155);
    border-top: solid thin rgb(155,155,155);
}
.context-menu .rating {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
.context-menu .warning{
    color: red;
    display: block;
    font-weight:bold;
}
.context-menu .lunch{
    font-style: italic;
    display: block;
    font-weight: bold;
}
.rotation-notifier {
    display: inline-block;
    height: 100%;
    width: 21px;
    line-height: 75%;
    vertical-align: middle;
    text-align: right;
}
.rotation-notify {
    display: inline-block;
    font-size: 89%;
    margin-left: 1px;
    padding: 1px;
}
.grooming-notifier {
    display: inline-block;
    height: 100%;
    line-height: 75%;
    vertical-align: middle;
    white-space: pre-wrap;
}
.grooming-notify {
    display: inline;
    font-size: 89%;
    padding: 1px;
}
.grooming-notify:nth-child(2n):before{
    content: '\A';
}
.buttons .paste{
    display: none;
}
body.clipboard-active .paste{
    display: inline;
}
span.tooltip {
    font-size: 80%;
}
.expand-pane{
    position: absolute;
    top: 0;
    right: .5em;
    cursor: pointer;
    font-style: italic;
}
.expand-pane::after{
    content: '>';
}
.extra-pane{
    position: absolute;
    height: 100%;
    width: 13em;
    background-color: rgb(215,215,215);
    top: 0;
    right: -13em;
    display:none;
    overflow: auto;
    border-left: solid 2px #000;
}
.extra-pane h4 {
    padding-left: .5em;
    text-decoration: underline;
}
ul.play-history {
    padding: .25em .5em;
}
.afternoon #copy-am-to-pm{
    display: none;
}
.doingLoad .drag-area:before {
    content: ' ';
    position: absolute;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;
}

i.loading {
    display: none;
}
.doingLoad i.loading{
    display: block;
    position: absolute;
    font-size: 5em;
    z-index: 101;
    color: rgb(250,250,250);
    top: 42%;
    left: 50%;
    transform: translateY(50%);
}
.supervisor-only {
    color: #b33a3a;
}
@media print{
    html{
        zoom: .75;
    }
    .draggable *{
        -webkit-print-color-adjust: exact;
    }
    #group-areas{
        width: 100%;
    }
    #waiting-room,
    .clear-group,
    .buttons{
        display: none;
    }
    #group-areas .group-area {
        width: 23%
    }
    #dragArea8{
        page-break-before:always;
    }

}