:root {
    --gridsize: 10px;
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

#top-logo {
    width: 20px;
    height: 20px;
    background-size: auto 20px;
    background-image: url("//www.xink.io/wp-content/themes/xink/assets/images/logo-navy.svg");
}

/* Canvas grid */

#canvas {
    /*border: 1px solid #d3d3d3;*/
    table-layout: fixed;
    border-spacing: 0px;
    border-collapse: collapse;
    background-color: #EFEFEF;
    border-radius: 3px;
}

    #canvas tr {
        line-height: var(--gridsize);
    }

    #canvas td {
        width: var(--gridsize);
        height: var(--gridsize);
        vertical-align: top;
        white-space: nowrap;
        border: 0px solid grey;
    }

.canvas-border {
    border: 0px dotted black;
}

.grid {
    border: 0px solid #d3d3d3;
}

.drag-target {
    background-color: #181858;
}

#notification-area {
    margin-top: 10px;
}

#upload-spinner {
    margin-top: 20px;
    margin-right: 20px;
}

.the-elements {
    display: inline-block;
    vertical-align: top;
}

.the-canvas {
    display: inline-block;
    vertical-align: top;
    max-width: 600px;
}

/* Draggable elements */
.element {
    border-radius: 5px;
    cursor: move;
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin-right: 8px;
    margin-bottom: 8px;
}

    .element .move-icon {
        width: 10px;
        height: 100%;
        background-color: lightgrey;
        display: inline-block;
        border-radius: 5px 0 0 5px;
    }

    .element .text {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 8px;
        padding-top: 4px;
        border-radius: 0 5px 5px 0;
        vertical-align: middle;
    }

    .element .dotted {
        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        -webkit-background-size: 3px 3px;
        -moz-background-size: 3px 3px;
        background-size: 3px 3px;
    }

/* Controls */

.element-controlview {
    position: relative;
    padding: 2px;
    cursor: pointer;
    -moz-box-shadow: 1px 1px 4px 1px #ccc;
    -webkit-box-shadow: 1px 1px 4px 1px #ccc;
    box-shadow: 1px 1px 4px 1px #ccc;
}

    .element-controlview .element-controlview-text {
        color: #555555;
        font-size: 12px;
        font-style: italic;
    }

    .element-controlview .element-controlview-close {
        position: absolute;
        width: 10px;
        height: 10px;
        top: -10px;
        right: -10px;
        z-index: 10;
        opacity: 0;
    }

    .element-controlview:hover .element-controlview-close {
        opacity: 100;
    }

.element-controlview-picture-img {
    margin: 0px;
    min-height: 5px;
    min-width: 5px;
    background-color: rgb(209, 209, 209);
    vertical-align: top;
}

.xink.images.wrapper {
    border: 1px solid #f0f0f0;
    height: 400px;
    width: 100%;
    overflow-y: scroll;
}

    .xink.images.wrapper > .image {
        border: 1px #999 solid;
        display: inline-block;
        width: 120px;
        height: 120px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        margin: 4px;
        cursor: pointer;
    }

        .xink.images.wrapper > .image:hover {
            border: 2px black solid;
        }

        .xink.images.wrapper > .image > .loading-animation {
            margin: 0 auto;
            top: 30px;
        }

.load-animation-center {
    text-align: center;
}

.xink-signature {
    line-height: 45px;
    border: 1px solid gray;
    border-radius: 2px;
    margin-bottom: 4px;
    cursor: pointer;
    padding-left: 20px;
}

    .xink-signature span {
        vertical-align: middle;
    }

    .xink-signature:hover {
        background-color: lightgray;
    }

@-webkit-keyframes fadeinout {
    0% {
        opacity: .15
    }

    45% {
        opacity: .7
    }

    100% {
        opacity: .15
    }
}

@-moz-keyframes fadeinout {
    0% {
        opacity: .15
    }

    45% {
        opacity: .7
    }

    100% {
        opacity: .15
    }
}

@keyframes fadeinout {
    0% {
        opacity: .15
    }

    45% {
        opacity: .7
    }

    100% {
        opacity: .15
    }
}

div.loading-animation {
    display: block;
    position: relative
}

    div.loading-animation div {
        position: absolute
    }

    div.loading-animation .bar1, div.loading-animation .bar2, div.loading-animation .bar3 {
        background-color: #999;
        left: 0
    }

    div.loading-animation .bar1 {
        top: 0;
        -webkit-animation: fadeinout 1500ms 200ms infinite;
        -moz-animation: fadeinout 1500ms 200ms infinite;
        -o-animation: fadeinout 1500ms 200ms infinite;
        animation: fadeinout 1500ms 200ms infinite
    }

    div.loading-animation .bar2 {
        -webkit-animation: fadeinout 1500ms 400ms infinite;
        -moz-animation: fadeinout 1500ms 400ms infinite;
        -o-animation: fadeinout 1500ms 400ms infinite;
        animation: fadeinout 1500ms 400ms infinite
    }

    div.loading-animation .bar3 {
        -webkit-animation: fadeinout 1500ms 600ms infinite;
        -moz-animation: fadeinout 1500ms 600ms infinite;
        -o-animation: fadeinout 1500ms 600ms infinite;
        animation: fadeinout 1500ms 600ms infinite
    }

    div.loading-animation .bar4 {
        margin-bottom: 0
    }

        div.loading-animation .bar4 .bar4-1 {
            background-color: #54c6f2;
            top: 0;
            -webkit-animation: fadeinout 1500ms 800ms infinite;
            -moz-animation: fadeinout 1500ms 800ms infinite;
            -o-animation: fadeinout 1500ms 800ms infinite;
            animation: fadeinout 1500ms 800ms infinite
        }

        div.loading-animation .bar4 .bar4-2 {
            background-color: #54c6f2;
            top: 0;
            -webkit-animation: fadeinout 1500ms 800ms infinite;
            -moz-animation: fadeinout 1500ms 800ms infinite;
            -o-animation: fadeinout 1500ms 800ms infinite;
            animation: fadeinout 1500ms 800ms infinite
        }

    div.loading-animation.small {
        float: left;
        height: 14px;
        width: 14px;
        margin: 8px 5px 8px 0
    }

        div.loading-animation.small div {
            height: 2px;
            margin-bottom: 2px
        }

        div.loading-animation.small .bar1, div.loading-animation.small .bar2, div.loading-animation.small .bar3 {
            left: 0
        }

        div.loading-animation.small .bar1 {
            width: 14px;
            top: 0
        }

        div.loading-animation.small .bar2 {
            width: 10px;
            top: 4px
        }

        div.loading-animation.small .bar3 {
            width: 12px;
            top: 8px
        }

        div.loading-animation.small .bar4 {
            top: 12px
        }

            div.loading-animation.small .bar4 .bar4-1 {
                width: 2px;
                height: 2px;
                margin-right: 2px
            }

            div.loading-animation.small .bar4 .bar4-2 {
                width: 7px;
                height: 2px;
                left: 4px
            }

    div.loading-animation.large {
        height: 28px;
        width: 28px;
        margin: 4em auto
    }

        div.loading-animation.large div {
            height: 4px;
            margin-bottom: 4px
        }

        div.loading-animation.large .bar1, div.loading-animation.large .bar2, div.loading-animation.large .bar3 {
            left: 0
        }

        div.loading-animation.large .bar1 {
            width: 28px;
            top: 0
        }

        div.loading-animation.large .bar2 {
            width: 20px;
            top: 8px
        }

        div.loading-animation.large .bar3 {
            width: 24px;
            top: 16px
        }

        div.loading-animation.large .bar4 {
            top: 24px
        }

            div.loading-animation.large .bar4 .bar4-1 {
                width: 4px;
                height: 4px;
                margin-right: 4px
            }

            div.loading-animation.large .bar4 .bar4-2 {
                width: 14px;
                height: 4px;
                left: 8px
            }

    div.loading-animation.enormous {
        height: 56px;
        width: 56px
    }

        div.loading-animation.enormous div {
            height: 8px;
            margin-bottom: 8px
        }

        div.loading-animation.enormous .bar1, div.loading-animation.enormous .bar2, div.loading-animation.enormous .bar3 {
            left: 0
        }

        div.loading-animation.enormous .bar1 {
            width: 56px;
            top: 0
        }

        div.loading-animation.enormous .bar2 {
            width: 40px;
            top: 16px
        }

        div.loading-animation.enormous .bar3 {
            width: 48px;
            top: 32px
        }

        div.loading-animation.enormous .bar4 {
            top: 48px
        }

            div.loading-animation.enormous .bar4 .bar4-1 {
                width: 8px;
                height: 8px;
                margin-right: 8px
            }

            div.loading-animation.enormous .bar4 .bar4-2 {
                width: 28px;
                height: 8px;
                left: 16px
            }