@charset "UTF-8";body,html {
    height: 100%
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

.error,.preloader {
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0
}

html {
    line-height: 1;
    font-family: "Helvetica Neue",sans-serif;
    font-size: 10px
}

ol,ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,td,th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

.error,.modal-body .actions,.preloader>span,.user .peer,.user.others .peer .avatar::after {
    text-align: center
}

blockquote,q {
    quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none
}

a img {
    border: 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

*,::after,::before {
    box-sizing: border-box
}

a {
    text-decoration: none
}

b,strong {
    font-weight: 700
}

input,select {
    font-family: inherit;
    padding: 1rem;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: .3rem;
    font-size: 1.4rem
}

.invisible {
    height: 0;
    width: 0;
    opacity: 0
}

@font-face {
    font-family: "Glyphicons Filetypes";
    src: url(fonts/glyphicons/glyphicons-filetypes-regular.woff) format("woff"),url(fonts/glyphicons/glyphicons-filetypes-regular.ttf) format("truetype"),url(fonts/glyphicons/glyphicons-filetypes-regular.svg#glyphicons_filetypesregular) format("svg")
}

[class*=glyphicon-] {
    display: inline-block;
    vertical-align: middle;
    font-family: "Glyphicons Filetypes";
    font-style: normal;
    font-weight: 400;
    font-size: 1em
}

.glyphicon-spin {
    animation: glyphicon-spin 2s infinite linear
}

@-moz-keyframes glyphicon-spin {
    0% {
        -moz-transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg)
    }
}

@-webkit-keyframes glyphicon-spin {
    0% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg)
    }
}

@-o-keyframes glyphicon-spin {
    0% {
        -o-transform: rotate(0)
    }

    100% {
        -o-transform: rotate(359deg)
    }
}

@-ms-keyframes glyphicon-spin {
    0% {
        -ms-transform: rotate(0)
    }

    100% {
        -ms-transform: rotate(359deg)
    }
}

@keyframes glyphicon-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

[class*=glyphicon-]:before {
    content: ""
}

.glyphicon-txt:before {
    content: ""
}

.glyphicon-doc:before {
    content: ""
}

.glyphicon-rtf:before {
    content: ""
}

.glyphicon-log:before {
    content: ""
}

.glyphicon-tex:before {
    content: ""
}

.glyphicon-msg:before {
    content: ""
}

.glyphicon-text:before {
    content: ""
}

.glyphicon-wpd:before {
    content: ""
}

.glyphicon-wps:before {
    content: ""
}

.glyphicon-docx:before {
    content: ""
}

.glyphicon-page:before {
    content: ""
}

.glyphicon-csv:before {
    content: ""
}

.glyphicon-dat:before {
    content: ""
}

.glyphicon-tar:before {
    content: ""
}

.glyphicon-xml:before {
    content: ""
}

.glyphicon-vcf:before {
    content: ""
}

.glyphicon-pps:before {
    content: ""
}

.glyphicon-key:before {
    content: ""
}

.glyphicon-ppt:before {
    content: ""
}

.glyphicon-pptx:before {
    content: ""
}

.glyphicon-sdf:before {
    content: ""
}

.glyphicon-gbr:before {
    content: ""
}

.glyphicon-ged:before {
    content: ""
}

.glyphicon-mp3:before {
    content: ""
}

.glyphicon-m4a:before {
    content: ""
}

.glyphicon-waw:before {
    content: ""
}

.glyphicon-wma:before {
    content: ""
}

.glyphicon-mpa:before {
    content: ""
}

.glyphicon-iff:before {
    content: ""
}

.glyphicon-aif:before {
    content: ""
}

.glyphicon-ra:before {
    content: ""
}

.glyphicon-mid:before {
    content: ""
}

.glyphicon-m3v:before {
    content: ""
}

.glyphicon-e_3gp:before {
    content: ""
}

.glyphicon-shf:before {
    content: ""
}

.glyphicon-avi:before {
    content: ""
}

.glyphicon-asx:before {
    content: ""
}

.glyphicon-mp4:before {
    content: ""
}

.glyphicon-e_3g2:before {
    content: ""
}

.glyphicon-mpg:before {
    content: ""
}

.glyphicon-asf:before {
    content: ""
}

.glyphicon-vob:before {
    content: ""
}

.glyphicon-wmv:before {
    content: ""
}

.glyphicon-mov:before {
    content: ""
}

.glyphicon-srt:before {
    content: ""
}

.glyphicon-m4v:before {
    content: ""
}

.glyphicon-flv:before {
    content: ""
}

.glyphicon-rm:before {
    content: ""
}

.glyphicon-png:before {
    content: ""
}

.glyphicon-psd:before {
    content: ""
}

.glyphicon-psp:before {
    content: ""
}

.glyphicon-jpeg:before,.glyphicon-jpg:before {
    content: ""
}

.glyphicon-tif:before {
    content: ""
}

.glyphicon-tiff:before {
    content: ""
}

.glyphicon-gif:before {
    content: ""
}

.glyphicon-bmp:before {
    content: ""
}

.glyphicon-tga:before {
    content: ""
}

.glyphicon-thm:before {
    content: ""
}

.glyphicon-yuv:before {
    content: ""
}

.glyphicon-dds:before {
    content: ""
}

.glyphicon-ai:before {
    content: ""
}

.glyphicon-eps:before {
    content: ""
}

.glyphicon-ps:before {
    content: ""
}

.glyphicon-svg:before {
    content: ""
}

.glyphicon-pdf:before {
    content: ""
}

.glyphicon-pct:before {
    content: ""
}

.glyphicon-indd:before {
    content: ""
}

.glyphicon-xlr:before {
    content: ""
}

.glyphicon-xls:before {
    content: ""
}

.glyphicon-xlsx:before {
    content: ""
}

.glyphicon-db:before {
    content: ""
}

.glyphicon-dbf:before {
    content: ""
}

.glyphicon-mdb:before {
    content: ""
}

.glyphicon-pdb:before {
    content: ""
}

.glyphicon-sql:before {
    content: ""
}

.glyphicon-aacd:before {
    content: ""
}

.glyphicon-app:before {
    content: ""
}

.glyphicon-exe:before {
    content: ""
}

.glyphicon-com:before {
    content: ""
}

.glyphicon-bat:before {
    content: ""
}

.glyphicon-apk:before {
    content: ""
}

.glyphicon-jar:before {
    content: ""
}

.glyphicon-hsf:before {
    content: ""
}

.glyphicon-pif:before {
    content: ""
}

.glyphicon-vb:before {
    content: ""
}

.glyphicon-cgi:before {
    content: ""
}

.glyphicon-css:before {
    content: ""
}

.glyphicon-js:before {
    content: ""
}

.glyphicon-php:before {
    content: ""
}

.glyphicon-xhtml:before {
    content: ""
}

.glyphicon-htm:before {
    content: ""
}

.glyphicon-html:before {
    content: ""
}

.glyphicon-asp:before {
    content: ""
}

.glyphicon-cer:before {
    content: ""
}

.glyphicon-jsp:before {
    content: ""
}

.glyphicon-cfm:before {
    content: ""
}

.glyphicon-aspx:before {
    content: ""
}

.glyphicon-rss:before {
    content: ""
}

.glyphicon-csr:before {
    content: ""
}

.glyphicon-less:before {
    content: "<"
}

.glyphicon-otf:before {
    content: ""
}

.glyphicon-ttf:before {
    content: ""
}

.glyphicon-font:before {
    content: ""
}

.glyphicon-fnt:before {
    content: ""
}

.glyphicon-eot:before {
    content: ""
}

.glyphicon-woff:before {
    content: ""
}

.glyphicon-zip:before {
    content: ""
}

.glyphicon-zipx:before {
    content: ""
}

.glyphicon-rar:before {
    content: ""
}

.glyphicon-targ:before {
    content: ""
}

.glyphicon-sitx:before {
    content: ""
}

.glyphicon-deb:before {
    content: ""
}

.glyphicon-e_7z:before {
    content: ""
}

.glyphicon-pkg:before {
    content: ""
}

.glyphicon-rpm:before {
    content: ""
}

.glyphicon-cbr:before {
    content: ""
}

.glyphicon-gz:before {
    content: ""
}

.glyphicon-dmg:before {
    content: ""
}

.glyphicon-cue:before {
    content: ""
}

.glyphicon-bin:before {
    content: ""
}

.glyphicon-iso:before {
    content: ""
}

.glyphicon-hdf:before {
    content: ""
}

.glyphicon-vcd:before {
    content: ""
}

.glyphicon-bak:before {
    content: ""
}

.glyphicon-tmp:before {
    content: ""
}

.glyphicon-ics:before {
    content: ""
}

.glyphicon-msi:before {
    content: ""
}

.glyphicon-cfg:before {
    content: ""
}

.glyphicon-ini:before {
    content: ""
}

.glyphicon-prf:before {
    content: ""
}

.preloader {
    width: 324px;
    height: 56px;
    background: url(images/sharedrop.svg) center no-repeat;
    background-size: 324px 56px;
    transition: opacity .2s
}

.preloader>span {
    position: absolute;
    width: 100%;
    bottom: -18px;
    font-size: 1.4rem
}

.error,.modal-body h3 {
    font-size: 1.8rem
}

.ember-application .preloader {
    opacity: 0
}

.error {
    width: 50rem;
    height: 15rem;
    line-height: 1.5em
}

.circles {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1140px;
    margin-left: -570px;
    height: 700px;
    z-index: -1;
    transform-origin: 570px 570px;
    animation: grow 1.5s ease-out
}

.circles .circle {
    stroke-width: .4;
    fill: transparent
}

@keyframes grow {
    50% {
        transform: scale(1.5,1.5);
        opacity: .2
    }

    51% {
        transform: scale(.5,.5);
        opacity: 0
    }
}

.modal-overlay {
    position: fixed;
    z-index: 300;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
    overflow: auto
}

.modal-body {
    position: absolute;
    z-index: 1301;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto auto 40px;
    background-color: #fff;
    width: 580px;
    padding: 20px;
    border-radius: 5px
}

.modal-body h3,.modal-body h4 {
    margin-bottom: .5em;
    font-weight: 700
}

.modal-body h4 {
    font-size: 1.5rem
}

.modal-body p {
    font-size: 1.4rem;
    line-height: 1.4em;
    margin-bottom: 1.42em
}

.modal-body p.note {
    font-size: 1.1rem
}

.modal-body a {
    color: #08c;
    opacity: .6
}

.modal-body a:hover {
    opacity: 1
}

.modal-body .qr-code div {
    padding: 15px
}

.modal-body .qr-code img {
    margin-left: auto;
    margin-right: auto
}

.modal-body .actions button {
    margin: 0 0 20px;
    display: inline-block;
    border: none;
    outline: 0;
    width: auto;
    font-family: inherit;
    font-size: 1.6rem;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,136,204,.8);
    color: #fff;
    padding: 14px 80px;
    text-shadow: rgba(0,0,0,.3) 0 -1px 0;
    transition: background .3s
}

.modal-body .actions button:hover {
    background: #08c
}

.modal-body .logo {
    height: 38px;
    margin-bottom: 20px;
    background: url(images/sharedrop.svg) left no-repeat
}

.modal-body .logo span {
    display: none
}

.modal-body .plus-icon {
    font-weight: 700;
    font-size: 2rem
}

.user {
    user-select: none
}

.user .peer {
    position: absolute;
    left: 50%;
    bottom: 300px;
    width: 76px;
    height: 76px;
    margin-left: -38px;
	cursor: default;
}

.user .peer .avatar {
    position: relative;
    width: 76px;
    height: 76px;
    transition: all .2s ease-in-out
}

.user .peer .avatar svg {
    top: 0;
    bottom: 0;
    z-index: -1
}

.user .peer .gravatar {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    border: 1px solid silver;
    box-shadow: rgba(0,0,0,.2) 0 0 3px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    animation: shadow .8s ease-in;
    transition: all .2s ease-in-out;
    background: #fff;
    padding: 10px 10px 10px 9px;
}

.user .peer .user-info {
    position: absolute;
    top: 76px;
    left: 50%;
    width: 140px;
    margin-left: -70px
}

.user .peer .user-info .user-email,.user .peer .user-info .user-label {
    font-weight: 700;
    color: #606060;
    padding-bottom: .4rem
}

.user .peer .user-info .user-email {
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.user .peer .user-info .user-label {
    font-size: 1.4rem
}

.user .peer .user-info .user-ip {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.2em;
    color: grey
}

.user .peer .user-info .user-ip>strong {
    display: block
}

.user .peer .user-info .user-connection-status {
    position: absolute;
    left: -1rem;
    top: 50%;
    margin-top: -.3rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%
}

.user .peer .user-info .user-connection-status.disconnected {
    display: none
}

.user .peer .user-info .user-connection-status.connecting {
    background: rgba(0,136,204,.5);
    animation: blink .75s infinite
}

.user .peer .user-info .user-connection-status.connected {
    background: rgba(164,197,64,.8)
}

.user .peer .user-info select {
    appearance: none;
    border: none;
    font-size: 1rem;
    color: grey;
    padding-right: 10px;
    outline: 0;
    background: url(https://sharedrop.io/images/select-arrow.svg) 66px 50% no-repeat;
    text-indent: .01px;
    text-overflow: ""
}

.user .peer:nth-of-type(2) {
    margin-left: -186px;
    bottom: 225px
}

.user .peer:nth-of-type(3) {
    margin-left: 120px;
    bottom: 225px
}

.user .peer:nth-of-type(4) {
    margin-left: -186px;
    bottom: 365px
}

.user .peer:nth-of-type(5) {
    margin-left: 120px;
    bottom: 365px
}

.user .peer:nth-of-type(6) {
    margin-left: -326px;
    bottom: 180px
}

.user .peer:nth-of-type(7) {
    margin-left: 260px;
    bottom: 180px
}

.user .peer:nth-of-type(8) {
    margin-left: -366px;
    bottom: 320px
}

.user .peer:nth-of-type(9) {
    margin-left: 300px;
    bottom: 320px
}

.user .peer:nth-of-type(10) {
    margin-left: -436px;
    bottom: 90px
}

.user .peer:nth-of-type(11) {
    margin-left: 370px;
    bottom: 90px
}

.user .peer:nth-of-type(12) {
    bottom: 400px
}

.user .peer:nth-of-type(13) {
    margin-left: -236px;
    bottom: 90px
}

.user .peer:nth-of-type(14) {
    margin-left: 170px;
    bottom: 90px
}

.user.you .peer {
    bottom: 90px
}

.user.others .peer .avatar {
    cursor: pointer
}

.user.others .peer .avatar.hover,.user.others .peer .avatar:hover {
    transform: scale(1.1,1.1)
}

.user.others .peer .avatar.hover .gravatar,.user.others .peer .avatar:hover .gravatar {
    border-color: #249a56;
}

.user.others .peer .avatar::after {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 5px;
    left: 5px;
    z-index: 100;
    content: "L";
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    background: rgba(164,197,64,.8);
    border: 1px solid #fff;
    transform: scaleX(-1) rotate(-45deg);
    display: inline-block;
    width: 66px;
    height: 66px;
    line-height: 66px;
    vertical-align: middle;
    border-radius: 50%;
    transition: opacity .3s
}

.popover,.popover::after {
    position: absolute;
    left: 50%
}

.user.others .peer .avatar.transfer-completed::after {
    opacity: 1
}

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes shadow {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1;
        box-shadow: rgba(0,0,0,.3) 0 0 15px
    }
}

.popover {
    bottom: 100%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: #fff;
    border: 1px solid silver;
    padding: 10px;
    border-radius: 5px;
    width: 360px;
    box-shadow: rgba(0,0,0,.3) 0 1px 3px;
    text-align: left;
    margin-bottom: 5px
}

.popover::after {
    bottom: 0;
    margin: 0 0 -5px -5px;
    content: "";
    width: 10px;
    height: 10px;
    background: inherit;
    transform: rotate(45deg);
    border: 1px solid transparent;
    border-right-color: silver;
    border-bottom-color: silver
}

.popover-body {
    position: relative;
    padding-left: 60px
}

.popover-body p {
    word-break: break-all;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4em;
    margin-bottom: 1em;
    min-height: 28px
}

.popover-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 50px
}

.popover-buttons {
    text-align: right
}

@media (max-width: 768px) {
    .popover {
        left:0;
        right: 0;
        top: 0;
        bottom: 0;
        border: none;
        width: auto;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        transform: none;
        background-color: rgba(240,240,240,.9)
    }

    .popover::after {
        display: none
    }

    .popover-buttons button {
        font-size: 18px
    }
}

.l-header .navbar {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: 0 0;
    color: #000;
    user-select: none
}

.l-header .navbar .logo {
    position: relative;
    height: 45px;
    width: 375px;
    margin: 5px 0 0 15px;
    background: url(../img/sharedrop_by_lw.svg) left top no-repeat;
}

.l-header .navbar .logo .logo-title {
    display: none
}

.l-header .navbar .logo .logo-subtitle {
    position: absolute;
    bottom: 0;
    left: 44px;
    font-size: 1rem;
    font-weight: 700
}

.l-header .navbar .logo img {
    vertical-align: top
}

.l-header .navbar .nav {
    position: absolute;
    top: 15px;
    right: 15px
}

.l-header .navbar .nav>li {
    float: left;
    margin-left: 15px;
    font-size: 1.4rem;
    line-height: 30px
}

.l-header .navbar .nav>li a {
    display: inline-block;
    transition: opacity 175ms linear;
    color: #000
}

.l-header .navbar .nav>li a img {
    vertical-align: middle
}

.l-header .navbar .nav>li a:hover {
    opacity: .6
}

.l-header .navbar .icon-create-room {
    font-size: 28px;
    line-height: 24px
}

.l-header .navbar .icon-help {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid #000;
    font-size: 1.2rem;
    opacity: .18;
    margin-top: -2px
}

.l-content {
    position: relative;
    height: 100vh;
    min-height: 600px
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.l-footer,.ribbon {
    position: fixed;
    bottom: 0
}

.ribbon {
    left: -80px;
    width: 300px;
    height: 64px;
    transform: rotate(45deg);
    z-index: 999;
    background: linear-gradient(-180deg,#005bbb 50%,#ffd500 50%);
    opacity: .8
}

.l-footer {
    z-index: 200;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0);
    text-align: center;
    color: #b0b0b0;
	z-index: 1000;
}

.l-footer a {
    opacity: .6;
    transition: opacity .2s linear
}

.l-footer a:hover {
    opacity: 1
}

.l-footer a>span {
    display: none
}

.l-footer .about {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-top: .2em;
    padding: 0 10px;
	    color: #666;
}

.l-footer .logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px
}

.l-footer .left,.l-footer .right {
    display: flex
}

.l-footer .github {
    width: 20px;
    height: 20px;
    background: url(images/github.svg) center no-repeat
}

.l-footer .twitter {
    width: 80px;
    height: 20px;
    margin-left: 8px
}

.l-footer .donate img {
    height: 20px
}

@media (max-height: 520px) {
    .modal-body {
        height:auto;
        bottom: auto;
        margin: 15px auto
    }
}

@media (max-width: 768px) {
    .preloader {
        width:240px;
        height: 41px;
        background-size: 240px 41px
    }

    .modal-body {
        width: 90%;
        height: auto;
        bottom: auto;
        margin: 15px auto
    }

    .modal-body .note {
        display: block
    }

    .l-content {
        padding: 80px 0 115px;
        min-height: inherit;
        height: 100%
    }

    .user .peer {
        position: relative;
        left: auto!important;
        bottom: auto!important;
        height: 106px;
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #eee;
        margin: 0!important;
        text-align: left
    }

    .user .peer .avatar {
        z-index: 2
    }

    .user .peer .user-info {
        z-index: 1;
        position: absolute;
        top: 30px;
        left: 0;
        padding-left: 170px;
        width: 100%
    }

    .user .peer .user-info .user-email {
        font-size: 1.4rem
    }

    .user .peer .user-info .user-label {
        font-size: 1.8rem
    }

    .user .peer .user-info .user-ip {
        font-size: 1.2rem;
        color: grey
    }

    .user .peer .user-info .user-connection-status {
        top: 0;
        left: -9.2rem;
        margin-top: 0;
        transform: scale(1.75,1.75)
    }

    .user.you .peer {
        border-bottom: none
    }

    .l-header .navbar {
        z-index: 200;
        background: rgba(255,255,255,.7)
    }

    .l-header .navbar .email {
        display: none
    }

    .l-header .navbar .nav>li {
        margin-left: 10px
    }

    .l-footer {
        padding-top: 10px;
    }

    .circles {
        display: none
    }

    .error {
        width: auto;
        font-size: 1.4rem;
        padding: 0 15px
    }
}