.react-spinner-loader-swing div {
    border-radius: 50%;
    float: left;
    height: 1em;
    width: 1em
}

.react-spinner-loader-swing div:first-of-type {
    background: linear-gradient(90deg,#385c78 0,#325774)
}

.react-spinner-loader-swing div:nth-of-type(2) {
    background: linear-gradient(90deg,#325774 0,#47536a)
}

.react-spinner-loader-swing div:nth-of-type(3) {
    background: linear-gradient(90deg,#4a5369 0,#6b4d59)
}

.react-spinner-loader-swing div:nth-of-type(4) {
    background: linear-gradient(90deg,#744c55 0,#954646)
}

.react-spinner-loader-swing div:nth-of-type(5) {
    background: linear-gradient(90deg,#9c4543 0,#bb4034)
}

.react-spinner-loader-swing div:nth-of-type(6) {
    background: linear-gradient(90deg,#c33f31 0,#d83b27)
}

.react-spinner-loader-swing div:nth-of-type(7) {
    background: linear-gradient(90deg,#da3b26 0,#db412c)
}

.react-spinner-loader-shadow {
    clear: left;
    padding-top: 1.5em
}

.react-spinner-loader-shadow div {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    float: left;
    width: 1em;
    height: .25em;
    border-radius: 50%;
    background: #e3dbd2
}

.react-spinner-loader-shadow .react-spinner-loader-shadow-l {
    background: #d5d8d6
}

.react-spinner-loader-shadow .react-spinner-loader-shadow-r {
    background: #eed3ca
}

@keyframes ball-l {
    0%,50% {
        transform: rotate(0) translateX(0)
    }

    to {
        transform: rotate(50deg) translateX(-2.5em)
    }
}

@keyframes ball-r {
    0% {
        transform: rotate(-50deg) translateX(2.5em)
    }

    50%,to {
        transform: rotate(0) translateX(0)
    }
}

@keyframes shadow-l-n {
    0%,50% {
        opacity: .5;
        transform: translateX(0)
    }

    to {
        opacity: .125;
        transform: translateX(-1.75em)
    }
}

@keyframes shadow-r-n {
    0% {
        opacity: .125;
        transform: translateX(1.75em)
    }

    50%,to {
        opacity: .5;
        transform: translateX(0)
    }
}

.react-spinner-loader-swing-l {
    animation: ball-l .425s ease-in-out infinite alternate
}

.react-spinner-loader-swing-r {
    animation: ball-r .425s ease-in-out infinite alternate
}

.react-spinner-loader-shadow-l {
    animation: shadow-l-n .425s ease-in-out infinite alternate
}

.react-spinner-loader-shadow-r {
    animation: shadow-r-n .425s ease-in-out infinite alternate
}

.react-spinner-loader-svg-calLoader {
    width: 230px;
    height: 230px;
    transform-origin: 115px 115px;
    animation: loader-spin 1.4s linear infinite
}

.react-spinner-loader-svg-cal-loader__path {
    animation: loader-path 1.4s ease-in-out infinite
}

@keyframes loader-spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes loader-path {
    0% {
        stroke-dasharray: 0,580,0,0,0,0,0,0,0
    }

    50% {
        stroke-dasharray: 0,450,10,30,10,30,10,30,10
    }

    to {
        stroke-dasharray: 0,580,0,0,0,0,0,0,0
    }
}

.react-spinner-loader-svg svg {
    transform-origin: 50% 65%
}

.react-spinner-loader-svg svg polygon {
    stroke-dasharray: 17;
    animation: dash 2.5s cubic-bezier(.35,.04,.63,.95) infinite
}

@keyframes dash {
    to {
        stroke-dashoffset: 136
    }
}

@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}

* {
    box-sizing: border-box
}

body,html {
    padding: 0;
    margin: 0
}

.index {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 12px
}

.main {
    padding: 12px 0
}

.container {
    flex: 1 1;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ced4da
}

.code {
    background: #f1f3f5;
    padding: 12px;
    border-radius: 4px
}

.notice {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center
}

a {
    text-decoration: none
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 4px
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.dnd,.viewer {
    width: 100vw;
    height: 100vh
}

.viewer {
    overflow: hidden
}