@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/static/fonts/glyphicons-halflings-regular.eot');
    src: url('/static/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
    url('/static/fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('/static/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('/static/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

@font-face {
    font-family: 'AvenirLight';
    src: url('/static/fonts/AvenirLTStd-Light.woff');
}
@font-face {
    font-family: 'KeplerStdLightScn';
    src: url('/static/fonts/KeplerStd-LightScn.woff');
}


.relative { position: relative; }

.how-many-objects {
    color: #ff3e30;
    position: absolute;
    top: 23px;
    margin: 0 auto;
    z-index: 5;
    padding: 5px 8px;
    font-size: 1.1em;
}

span#loaded {
    width: 40px;
    display: inline-block;
}

span#amount {
    width: 40px;
    display: inline-block;
}

.how-many-objects .lock {
    height: 28px;
    position: absolute;
    right: -30px;
    top: -9px;
}

.how-many-objects .map-name {
    margin-right: .5em;
}

.how-many-objects-p {
    display: inline-block;
    position: relative;
    margin-right: 23px;
}

.how-many-objects .custom-map-name {
    margin-right: 27px;
    position: relative;
}

.how-many-objects img.edit {
    height: 28px;
    position: absolute;
    top: -8px;
    right: -24px;
}

.map-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 11;
}


.brighten:hover {
    opacity: 0.6 !important;
}

.brighten2:hover {
    -webkit-filter: brightness(1.2);
}

#messages-wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: auto;
    z-index: 105;
    font-weight: bold;
    font-size: 19px;
    color: black;
    padding: 10px 20px 10px 20px;
    display: none;
    cursor: default;
    max-height: 50%;
    max-width: 33%;
    overflow-y: auto;
}

.message-wrapper {
    margin-top: 10px;
}

.obj-panel {
    /*background:radial-gradient(50% 100%, rgba(255,255,255,.2), rgba(255,255,255,0)),

             linear-gradient(90deg, rgba(50,100,170,.7) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.7) 1px, transparent 0),

             linear-gradient(90deg, rgba(50,100,170,.4) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.4) 1px, transparent 0),

             linear-gradient(90deg, rgba(50,100,170,1) 2px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,1) 2px, transparent 0);

    background-color:#074b97;

    background-size:100% 100%,

                    50px 50px,
                    50px 50px,

                    25px 25px,
                    25px 25px,

                    100px 100px,
                    100px 100px;

    background-attachment: local;*/

    width:100%;
    height:100%;
}
.user-panel.blue-print {
    background-position: 0px 0px;
}
.blue-print {
    background:radial-gradient(50% 100%, rgba(255,255,255,.2), rgba(255,255,255,0)),

             linear-gradient(90deg, rgb(170,170,170) 1px, transparent 0),
             linear-gradient(180deg, rgb(170,170,170) 1px, transparent 0),

             linear-gradient(90deg, rgb(170,170,170) 1px, transparent 0),
             linear-gradient(180deg, rgb(170,170,170) 1px, transparent 0),

             linear-gradient(90deg, rgb(170,170,170) 2px, transparent 0),
             linear-gradient(180deg, rgb(170,170,170) 2px, transparent 0);

    /*background-color:#074b97;*/

    background-size:100% 100%,

                    50px 50px,
                    50px 50px,

                    25px 25px,
                    25px 25px,

                    100px 100px,
                    100px 100px;
    background-position-x: 56px;
    background-position-y: 44px;
    background-color: #e2e2e2;
    position: relative;
    outline-style:none;
    /*box-shadow: inset 0 0 9px 3px #111;*/
    background-size: 100%;
}

.obj-panel.animated { transition: all 0.1s; }

.obj-panel-container {
    overflow: hidden;
}

.search-super-wrapper {
    position: absolute;
    top: 23px;
    left: 33px;
    transition: all .5s cubic-bezier(0,1.5,.5,1);
    z-index: 11;
}

.search-wrapper {
    top: 0;
    left: 0;
    height: 45px;
    background-color: white;
    font-size: 15px;
    -webkit-box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    border-radius: 3px;
}

.search-box-wrapper {
    height: 45px;
    margin-left: 45px;
    border-left: 1px solid;
}

.search-box-wrapper .right-element {
    right: 68px;
    margin-top: 8px;
    height: 23px;
    width: 23px;
    top: 8px;
    cursor: pointer;
    opacity: .70;
    position: absolute;
}
.search-box-wrapper .right-element .closebtn {
    height: 100%;
    width: 100%;
    font-size: 0.6em;
    top: -2px;
    animation: fadeout 0.2s, fadein 0.2s;
}

.search-box {
    height: 45px;
    position: relative;
    border: transparent;
    background-color: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 13px;
    margin: 0 !important;
    padding: 9px 33px 9px 12px !important;
    background: transparent;
    width: 17em;
    transition: all 0.25s ease-in-out;
}

.search-box::-webkit-input-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
.search-box:-moz-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
.search-box::-moz-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
.search-box:-ms-input-placeholder {
   font-style: italic;
   color: #b2b6b9;
}

.search-box-wrapper input:focus{
    outline: none;
}

#search {
    width: 45px;
    height: 25px;
    margin-left: 0;
    font-size: 25px;
    padding: 0;
    right: 0;
    top: 10px;
    position: absolute;
    border: 0;
    background-color: rgba(255, 255, 255, .1);
    cursor: pointer;
}

.s {
    position: absolute;
    margin: 0 auto;
    bottom: -2px;
    right: 6px;
    width: 30px;
    height: 30px;
    background: url(/static/img/search.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: .5;
}
.s:hover{
/*    background: url(/static/img/s2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
    opacity: 0.62;
}
/*.search-box-wrapper input{
    background-color: rgba(255, 255, 255, .1) !important;
}*/

/*#search::before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAABVUlEQVRYw+2YQRGEMAxFkVAJlYAEJCABCUhAQiWshJWABCRUAg7+XsrMTkibNDBdDvtnek0fSfqToQPQPeE8AuK5IDkBGAC8AESctQEIAHxXKTUIgB7ACr0CAHcrCIAJNm0A+ltALkAc2jWlKoKkcnCKCdCR0i3p4lNmroJwPRGEgC6VhGo2gaTXUQUhwEQryKsmUOaZU40WEOoTk8Eb3iTGYgGhcgaQmcRYL4N0BjHl+RnIeDuI1iFJ8EBivC0gm7bRCsGj1ktKIIGx6pohNjNZ9RYQnxliTgHRM1a/XrH4kIEZhEzstT0mgeTmBpJZzemJjgk65naTO9aAPvOFtavAWMqKdjHyhcxIW9quGRVVO2uh/lTr8fWMqbEw1cvzV/AlXXico2c884IgwZhADMY2STBNQDQwzUAkmKYgAoxvClKAGZqDMDBb89IwRjlI0/f/W+ID3tQLQPib2qQAAAAASUVORK5CYII=);
    background: url(/static/img/s1.png);
    background-size: 17px;
    content: "";
    display: block;
    height: 17px;
    margin: 0 auto;
    width: 17px;
}

#search:hover {
    background: url(/static/img/s2.png);
    background-repeat: no-repeat;*/
    /*background-color: #357ae8;
    background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);*/
/*}

#search:active {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3),inset 2px 0 6px -1px rgba(0,0,0,0.3);
}
*/
.search-results-wrapper {
    display: none;
    position: absolute;
    left: 0;
    top: 61px;
    padding: 1em 1em !important;
    border-radius: 4px;
    font-size: 16px !important;
}

.search-results-wrapper1 {
    position: relative;
}

.no-search-results { display: none; }

.search-results-wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 11px solid rgba(0,0,0,0.6);
    position: absolute;
    top: -11px;
    left: 2em;
}

.search-results-category-wrapper {
    position: relative;
    float: left;
    margin-left: 5px;
}

.search-results-category-wrapper h3 {
    margin: 0.3em 0 0.5em 0;
}

.search-results-category-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 18em;
    overflow: auto;
}

.search-results-category-wrapper ul li {
    margin: 0 .6em .4em 0;
    cursor: pointer;
    text-overflow: ellipsis;
    max-width: 22em;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.search-results-category-wrapper ul li .thumbnail {
    float: left;
    height: 1.4em;
    width: 1.4em;
    background-size: cover;
    margin-right: 0.2em;
    position: relative;
}

.search-results-category-wrapper ul li .thumbnail .collage {
    width: 0.5em;
    float: left;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.search-results-category-wrapper ul li .thumbnail .double {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 0.5em;
    border: 1px white solid;
}

.search-results-category-wrapper ul li .thumbnail .trio1 {
    height: 0.5em;
    border: 1px white solid;
}
.search-results-category-wrapper ul li .thumbnail .trio2 {
    height: 0.5em;
    width: 1.1em;
    border: 1px white solid;
}

.search-results-category-wrapper ul li .thumbnail .quartet {
    height: 0.5em;
    border: 1px white solid;
}

.search-results-category-wrapper ul li .name {
/*    text-overflow: ellipsis;
    max-width: 19em;
    white-space: nowrap;
    float: left;
    overflow: hidden;*/
}

.search-results-category-wrapper ul li .name,
.search-results-category-wrapper ul li .count
{
    line-height: 1.4em;
}

.search-results-category-wrapper ul li:hover {
    color: red;
}

.triangle {
    display: none;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.85);
    position: absolute;
    top: 106%;
    left: 2em;
}


.unselectable
{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#sock-monitor {
    position: relative;
    top: 1px;
    height: 1em;
    width: 1em;
    background-color: grey;
    border-radius: 23px;
    display: inline-block;
    margin: 0 0 0 0.5em;
}

#sock-monitor.good { background-color: #0f0; box-shadow: 0px 0px 12px #0f0; }
#sock-monitor.bad { background-color: #DC0404; box-shadow: 0px 0px 12px #DC0404; }


#story-holder { position: relative; }

.list-panel
{
    background-color: #000;
    color: #fff;
    z-index: 11;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    display: none;
    top: 150px;
    right: 129px;
    width: 436px;
    /* min-width: 20vw; */
}

.list-panel ul { list-style-type: none; margin: 0 0 0 1vw; padding-left: 0; float: left; font-size: 2vh; }
.list-panel ul li {  margin-bottom: 0.5em; cursor: pointer; }
.list-panel ul li:hover {  background-color: red; color: white; }
.list-panel ul li:last-child {  margin-bottom: 0 !important; }
.list-panel ul .story-owner { font-weight: bold; }
.list-panelf ul .story-owner:hover { background-color: transparent !important; cursor: inherit !important; }
.list-panel .row-title
{
    font-size: 1.2em;
    font-weight: bold;
}

.list-panel .row-title:hover { background-color: transparent !important; }

.ss { width: 100%; text-align: center; padding-top: 5px; }

.obj-panel
{
    position: relative;
    top: 0px;
    left: 0px;
    /*box-shadow: 0 0 20px 3px #111;*/
    /*background: url(/static/img/c_map.gif);*/
}

.trans-moving { transition: 0.2s ease-out;
    transition-property: top, left; }

.threedots
{
    height: 15px;
    width: 30px;
    position: absolute;
    top: -13px;
    left: 48.5%;
    z-index: 111;
    background-color: #fff;
    cursor: pointer;
    border-top: 3px solid;
    border-left: 2px solid;
    border-left-color:#cc0000;
    border-right: 2px solid;
    border-color: #ddd;
    background-image: url(/static/img/threedots.png);
    -webkit-box-shadow: -10 0 10px #ccc;
    -moz-box-shadow: -10 0 10px #ccc;
    box-shadow: -10 0 10px #ccc;
}

.threedots:hover
{
    background-image: none;
    border-top: 3px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: #ded7cd;
    background-color: #ded7cd;
    background-image: url(/static/img/threedots_white.png);
}

.user-panel
{
    position: relative;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 50px #999;
}

.user-icon
{
    margin-left: 0.4em;
    padding: 4px;
    border-radius: 2px;
    font-family: Verdana;
}



.user-panel-container
{
    position: relative;
    background-color: #e9e9e9;
    box-shadow: inset 0 0 1px;
    color: #000;
}

.empty-plug {
    cursor: default;
    text-shadow: 0px -1px 0px #888;
    color: #888;
    position: absolute;
}

.plug
{
    cursor: pointer;
    position: absolute;
    box-shadow: #000 0 0 1px inset;
    color: #bbb;
    /*background-image: url(/static/img/c_map.gif);*/
    background-size: contain;
    /*border: 3px transparent;*/
    /*background-color: #450E00;*/
    padding: 3px;
}

.plug.pulse
{
    z-index: inherit !important;
    -webkit-box-shadow: inset 0 0 40px #f00;
    -moz-box-shadow: inset 0 0 40px #f00;
    box-shadow: inset 0 0 40px #f00;

    -webkit-animation:webkit-pulse 0.3s linear infinite;
    animation:pulse 0.3s linear infinite;
}

@-webkit-keyframes webkit-pulse {
    50% { -webkit-box-shadow: inset 0 0 40px #faa; }
}

@keyframes pulse {
    50% { box-shadow: inset 0 0 40px #faa; }
}

.plug div, .empty-plug div
{
    position: relative;
    top: 50%;
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    /*font-size: 1.2em;*/
    /*font-weight: normal;*/
    /*text-shadow: 0px -1px 0px #444444;*/
    /*font-family: "serif";*/
    color: rgba(255,255,255,0.5);
    padding-top: 7px;
    padding-right: 2px;
}

.user-panel-plug
{
    position: absolute;
    display: table;
}

.user-panel-plug div
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em;
    font-weight: normal;
    color: #999;
    text-shadow: 0px -1px 0px #444444;
    font-family: "serif";
}

.item
{
    cursor: pointer;
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.item.highlighted {
    outline-style: solid;
    outline-offset: -3px;
    outline-width: 3px;
    outline-color: #0f0;
}

.item.animated { transition: 0.04s all; -webkit-transition: 0.04s all; }

.item .text
{
    color: #fefefe;
    font-size: 0.7em;
    position: absolute;
    top: 2px; left: 2px;
    display: none;
}

.item .watched-wrapper {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px #ccc solid;
    color: #fff;
    font-size: 0.5em;
}
.item.watched .watched-wrapper {
    display: block;
}

.item > .symbols
{
    position: absolute;
    font-size: 2em;
    font-weight: bold;
    margin: 0 auto;
    text-shadow: 0 0 5px white;
}

.item > .number {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-28%);
    width: 100%;
    text-align: center;
}

.item > .users
{
    position: absolute;
    top: 100%;
    right: 0px;
}

.item .user-icon
{
    font-size: 0.7em;
    float: right;
    padding: 1px;
}


.no-storytray .moveicon { display: none !important;}
.moveicon
{
    position: absolute;
    right: 0;
    top: 0;
    height: 1em;
    display: none;
    width: 1em;
    /*background-image: url(/static/img/move-24.png);*/
    background-size: cover;
    cursor: move;
    background-repeat: no-repeat
}

.moveicon div { background-color: white; position: absolute; }
.moveicon .top-left { right: 0; top: 0; height: 20%; width: 20%; }
.moveicon .top-center { right: 30%; top: 0px; height: 20%; width: 20%; }
.moveicon .top-right { right: 60%; top: 0px; height: 20%; width: 20%; }
.moveicon .center-left { right: 0; top: 30%; height: 20%; width: 20%; }
.moveicon .center-center { right: 30%; top: 30%; height: 20%; width: 20%; }
.moveicon .center-right { right: 60%; top: 30%; height: 20%; width: 20%; }
.moveicon .bottom-left { right: 0; top: 60%; height: 20%; width: 20%; }
.moveicon .bottom-center { right: 30%; top: 60%; height: 20%; width: 20%; }
.moveicon .bottom-right { right: 60%; top: 60%; height: 20%; width: 20%; }

.obj-panel-container.zooming .item:hover {
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    z-index: inherit !important;
    box-shadow: none;
}

.obj-panel-container .item:hover,
.branchingMode-back .item:hover
{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    z-index: 9;
    box-shadow: rgb(50, 50, 50) 0px 0px 16px;
}

.item:hover > .moveicon { display: block; }
.item:hover > .text { display: block; }



.landing-wrapper {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
        background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    z-index: 60000;
    text-align: center;
}

.landing-wrapper .panel {
    width: 100%;
    /*font-family: AvenirLight,sans-serif;*/
    position: absolute;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    border: none;
    box-shadow: none;
    color: white;
}

.landing-wrapper .shade-div {
    opacity: 0;
    transition: all 0.5s;
    background-color: transparent;
}

.landing-wrapper.show-video .shade-div {
    display: block;
}

.landing-wrapper video {
    height: 50vh;
}

.landing-wrapper .video-wrapper {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: all .4s ease-out;
    /*height: 50%;*/
    opacity: 0;
}

.landing-wrapper .video-wrapper iframe {
    background-color: black;
    border: 0;
    outline: 0;
}

.landing-wrapper .video-wrapper .closebtn {
    right: -2px;
    top: -24px;
    height: auto;
    width: auto;
    position: absolute;
    background-image: none;
    cursor: pointer;
    color: #ddd;
    opacity: 1;
    font-size: 27px;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}

.landing-wrapper .video-wrapper .closebtn:hover {
    color: #fff;
    opacity: 1;
}

.landing-wrapper .panel .introducing {
    font-size: 65px;
    font-weight: bold;
}

.landing-wrapper .where {
    font-size: 30px;
    height: 26px;
    font-family: KeplerStdLightScn;
}

.landing-wrapper a {
    color: #fff;
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    left: 0;
}

@media (min-height: 700px) {
        .landing-wrapper .panel .introducing {
                font-size: 90px;
        }

        .landing-wrapper .where {
                font-size: 44px;
                height: 48px;
                font-family: KeplerStdLightScn;
        }
        .landing-wrapper .play-video span:before {
                font-size: 108px;
                height: 112px;
        }
}

.landing-wrapper .play-video {
    position: relative;
        padding-top: 0.2em;
        font-size: 44px;
        height: 48px;
}

.landing-wrapper .play-video span:hover {
    text-shadow: 0 0 35px #fff;
}

.landing-wrapper .play-video span {
    display: inline-block;
}

.landing-wrapper .play-video span:before {
    content: "\e029";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    left: 0;
    top: 0;
    -webkit-font-smoothing: antialiased;
    display: inline;
    transition: 0.1s all;
    cursor: pointer;
    -moz-osx-font-smoothing: grayscale;
}


.curtain {
    position: fixed;
    top: 0; left: 0; height: 100%; width: 100%;
    z-index: 60000;
    background: #fdfdfc;
    font-size: 62.5%;
}

.curtain .location {
    position: absolute;
    font-size: 1.5em;
}

.curtain .location:nth-child(1) {
    top: 1.5em;
}

.curtain .location:nth-child(2) {
    top: 3em;
}

.curtain .first-time {
    top: 8em;
    position: absolute;
    background-color: #aaffaa;
    padding: 0.2em 3em;
    font-size: 1.4em;
    display: none;
}

.shade-div
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
}

.spotlight
{
    position: relative;
    width: 82%;
    margin: 0 auto;
}
.spotlight .search-string {
    text-align: center;
    margin-bottom: .3em;
    display: none;
}

.spotlight .spotlight-controls {
    width: 100%;
}

.spotlight .header {
    height: 99px;
    border-bottom: 1px #ececec solid;
    position: relative;
    padding-left: 1.5em;
}

.spotlight .panel-inner {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    padding: 0;
    height: 82vh;
}

.panel-inner {
    background-color: rgb(255, 255, 255);
    position: relative;
    padding: 1em;
    border-radius: 5px;
}

#for-more .panel-inner {
    padding: 2em 1em;
}

.spotlight .delete {
    float: right;
    display: none;
    font-size: 1.2em;
}

.spotlight .pixel-button.delete {
    padding: 10px 10px 8px 10px;
    z-index: 1;
}

.pixel-button {
    color: white;
    position: relative;
    background-color: black;
    padding: 10px 10px 7px 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pixel-button:before {
    content: "";
    left: -6px;
    right: -6px;
    background-color: black;
    top: 4px;
    bottom: 4px;
    z-index: -1;
    display: block;
    position: absolute;
}

.pixel-button:after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    background-color: black;
    top: 10px;
    bottom: 10px;
    z-index: -1;
    display: block;
    position: absolute;
}

.pixel-button:hover {
    top: 1px;
    left: 1px;
}

.pixel-button:active {
    top: 2px;
}

.spotlight .delete .spinner { height: 1em;
    width: 1em;
    display: inline-block;
    position: relative;
    top: 0.15em;
    left: 0;
}

.spotlight .arrow {
    font-size: 20vh;
    position: absolute;
    cursor: pointer;
    background-image: url("/static/img/arrow.png");
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
    width: 5vw;
    opacity: 0.8;
    transition: 0.07s all;
}
.spotlight .leftarrow:hover { opacity: 1; transform: translateY(-50%) scale(1.2) ; }
.spotlight .leftarrow:active { transform: translateY(-50%) scale(1.2) ; }
.spotlight .leftarrow.hover { opacity: 1; transform: translateY(-50%) scale(1.2) ; }

.spotlight .rightarrow:hover { opacity: 1; transform: translateY(-50%) scale(1.2) rotate(180deg); }
.spotlight .rightarrow:active { transform: translateY(-50%) scale(1) rotate(180deg); }
.spotlight .rightarrow.hover { opacity: 1; transform: translateY(-50%) scale(1.2) rotate(180deg); }

.spotlight .leftarrow { left: -5vw; }
.spotlight .rightarrow {
    right: -5vw;
    -webkit-transform: rotate(180deg) translateY(50%);
    -moz-transform: rotate(180deg) translateY(50%);
    -ms-transform: rotate(180deg) translateY(50%);
    -o-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%);
}

.spotlight .vert-panel
{
    position: relative;
    color: #858585;
    width: 49%;
}

.spotlight a.facebook-share {
    position: absolute;
    right: 8px;
    top: -22px;
    opacity: .5;
}

.spotlight .facebook-share img {
    height: 38px;
}

.spotlight .closebtn {
    height: 34px;
    width: 34px;
    top: 28px;
    right: 28px;
    opacity: .5;
}

.spotlight .image-wrapper {
    position: relative;
    height: 72%;
}

.spotlight .related-images.section {
    height: 21%;
}
.spotlight .related-images-wrapper {
    margin-top: 9px;
    display: flex;
    position: relative;
    height: 80%;
}

.spotlight .related-images-wrapper img {
    max-height: 10%;
    width: 20%;
    margin-right: 3%;
}

.spotlight .related-images-wrapper div:last-child {
    margin-right: 0;
}

.spotlight .related-images-wrapper div {
    background-image: url(https://images-na.ssl-images-amazon.com/images/I/513Jv2QT3IL._SL160_.jpg);
    width: 23%;
    margin-right: 5%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.spotlight .vert-panel-left .image {
    display: none;
    position: absolute;
    display: block;
    max-width: 87%;
    max-height: 87%;
}

.spotlight .first-block {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.spotlight .second-block {
    display: flex;
}

.spotlight .vert-panel-right {
    width: 50%;
}
.spotlight .vert-panel-left {
    position: relative;
    height: 100%;
    width: 50%;
    border-right: 1px solid #ececec;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.spotlight .vert-panel-left .overlay span {
    font-size: 0.6em;
    margin-left: 1em;
}

.spotlight .horiz-panel
{
    text-align: center;
}

.spotlight .section {
    padding: 1.5em 1.5em;
    border-bottom: 1px solid #ececec;
}

.spotlight .section.two {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.spotlight .section.two .section {
    border-bottom: none;
}

.spotlight .section.two > div:first-child {
    border-right: 1px solid #ececec;
}

.spotlight .section .value {
    color: #2d3741;
    font-size: 16px;
    position: relative;
}
.spotlight .section .title {
    color: #b2b6b9;
    font-size: 14px;
    padding-bottom: .6em;
}

.spotlight .section.doi .value:after {
    position: absolute;
    top: -2px;
    right: 17px;
    content: " ";
    border-top: 6px solid #b2b6b9;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.spotlight .header .title {
    padding-top: 12px;
}

.spotlight .title {
    font-size: 21px;
    color: #2d3741;
    position: relative;
}

.spotlight .edit-img {
    height: 2em;
    cursor: pointer;
    opacity: .5;
    position: relative;
    top: 14px;
}

.spotlight .delete {
    height: 34px;
    width: 34px;
    top: 28px;
    right: 79px;
    position: absolute;
    cursor: pointer;
}

.spotlight .delete img {
    height: 100%;
    opacity: .5;
}


.spotlight .add-round-button,
.settings-wrapper .add-round-button {
    position: absolute;
    margin-left: 6px;
    height: 20px;
    width: 20px;
    font-size: 18px;
    line-height: 18px;
    border-radius: 50%;
    border: 1px solid;
    background-image: none;
    color: inherit;
    top: -5px;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.spotlight .overlay-wrapper {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all 0.2s;
}
.spotlight .overlay-wrapper:hover { opacity: 1; }
.spotlight .overlay {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    margin: auto;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    cursor: pointer;
}

.spotlight .vert-panel-left:hover .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
}

.spotlight .overlay div {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    position: absolute;
    font-size: 20px;
    height: 20px;
    left: 0;
    top: 50%;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.spotlight .vert-panel-left:hover .overlay div {
    opacity: 1;
    -webkit-transition: 1.3s ease;
    transition: 1.3s ease;
}

.spotlight .add-round-button:after { font-size: 22px; }

.spotlight .ajax-loader {
    position: absolute;
    top: 1.4em;
}



.search-string>span {
    background-color: yellow;
    border-radius: 11px;
    padding: 0.5em 0.5em 0.3em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    font-size: 0.7em;
}

.ask-tag-wrapper {
    display: none;
    position: absolute;
    z-index: 2;
    padding: 4em 15em;
}

.ask-tag-wrapper .panel-inner {
    height: auto;
    padding: 1em 1em;
    box-shadow: 0 0 40px 0px #565656;
}

.ask-tag-wrapper h3 {
    text-align: center;
    margin-bottom: .2em;
}

.ask-tag-wrapper .helper {
    color: #b2b6b9;
    white-space: nowrap;
    margin-bottom: 1em;
}

.ask-tag-wrapper input.tag-name {
    border: 1px solid #b2b6b9;
    border-radius: 2px;
    padding: 1em;
    outline-color: #b2b6b9;
}

.ask-tag-wrapper input#add-tag-button {
    margin-left: .5em;
    background-color: white;
    border-radius: 2px;
    border: 1px solid #b2b6b9;
    padding: 1em;
    outline-color: #a1a5a8;
}

.ask-tag-wrapper .closebtn {
    height: 1em;
    width: 1em;
    top: .5em;
    right: .5em;
}

.ask-tag-center.vert-horiz-center {
    position: absolute;
}

.ask-tag-wrapper .error-text {
    font-size: 0.8em;
    color: red;
    position: relative;
    text-align: center;
    margin-top: 0.4em;
}

.nav-buttons {
    /*display: table;*/
    font-size: 1em;
    position: absolute;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    color: #fff;
}
.nav-buttons .text {
    /*display: table-cell;
    left:50%;
    top:50%;*/
    position:absolute;
    vertical-align: middle;
    text-align: center;
    visibility: hidden;
    text-shadow: 2px 0px 6px #000, -2px 0px 6px #000;
    font-size: 2em;
    font-family: "Verdana";
}

.nav-buttons.horizontal
{
    width: 100%;
    height: 10%;
}

.nav-buttons.left { left: 0; top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(147, 147, 147, 0)); }
.nav-buttons.right { right: 0; top: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.7), rgba(147, 147, 147, 0)); }
.nav-buttons.down { bottom: 0px; left: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), rgba(147, 147, 147, 0) ); }
.nav-buttons.up { top: 0; left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(147, 147, 147, 0) ); }

.nav-buttons.vertical
{
    width: 8em;
    height: 100%;
}

.nav-buttons.left > .text { left: 0; top: 50%; }
.nav-buttons.right > .text { right: 0; top: 50%; }
.nav-buttons.down > .text { bottom: 0; left: 50%;}
.nav-buttons.up > .text { top: 0; left: 50%;}

.nav-buttons:hover { opacity: 1; }

.nav-buttons:hover .text { visibility: visible; }

.map-icon
{
    position: absolute;
    right: 10px;
    top: 0.6em;
}

#minimap .closesign {
    right: -17px;
    top: -17px;
    padding: 0px;
    cursor: pointer;
    position: absolute;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background-image: url(/static/img/close-green.svg);
    background-size: contain;
}

.closesign:hover { background-color: black; }

.map-icon img
{
    height: 30px;
    width: 100px;
    cursor: pointer;
}

#minimap {
    position: absolute;
    right: 9em;
    top: 7em;
    z-index: 20;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgb(50, 50, 50) 0px 0px 16px;
    display: none;
}

#minimap .test-img { visibility: hidden; z-index: -111; }

#minimap .view {
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

#minimap .window { margin: 0; height: 300px; width: 300px; }

#minimap .frame {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    height: 50%;
    width: 50%;
    background-color: rgba(255, 0, 0, .5);
}

#minimap .settings {
    margin: 5px auto;
    width: 85%;
}

#minimap img.display {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.spatialc-shade-div
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
}

.focus-back
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 999;
    background-position: 0 0;
}
.focus-back .closebtn {
    -webkit-filter: invert(1);
    filter: invert(1);
}

.focus-back .nav-buttons { display: none; }

.obj-panel-label {
    position: absolute;
    background-color: rgba(0, 0, 0, .65);
    border-radius: 4px;
    z-index: 11;
    padding: 1.1em 1.7em;
    box-shadow: 0px 1px 6px 3px rgba(0,0,0,0.2);
    color: white;
    transition: all .5s cubic-bezier(0,1.5,.5,1);
    font-size: 13px;
}

.obj-panel-label.adc {
    display: flex;
    align-items: center;
    padding: 6px 8px;
}
.fullscreen-trigger {
    height: 45px !important;
    width: 45px !important;
    background-color: #526efe;
    background-image: url(/static/img/split.svg);
    padding: 0;
    background-size: 100%;
    background-position: center;
    border-radius: 50%;
    transition: top .5s cubic-bezier(0,1.5,.5,1);
}

.obj-panel-label.fullscreen-trigger .dashed {
    height: 45%;
    width: 45%;
    position: relative;
}

.obj-panel-label.fullscreen-trigger .dashed .square {
    background-color: green;
    height: 20%;
    width: 20%;
    position: relative;
    display: none;
}

.obj-panel-label.fullscreen-trigger:hover {
    background-size: 120%;
    background-position: -4px -4px;
}

.obj-panel-label.fullscreen-trigger:hover > .dashed .square {
    display: block;
    animation: fullscreensquare 0.5s ease-in-out infinite;;
}

@keyframes fullscreensquare {
    15% {
    height: 30%;
    width: 30%;
    background-color: white;
    }
    30% {
    height: 50%;
    width: 50%;
    background-color: red;
    }
    45% {
    height: 60%;
    width: 60%;
    background-color: white;
    }
    60% {
    height: 80%;
    width: 80%;
    background-color: blue;
    }
    75% {
    height: 70%;
    width: 70%;
    background-color: white;
    }
    90% {
    height: 50%;
    width: 50%;
    background-color: green;
    }
}









#obj-panel-name .text {
    font-size: 1.1em;
    color: #0e0e0e;
    margin-right: 5px;
}

#obj-panel-name .text a { color: #0e0e0e; text-decoration: none; }
#obj-panel-name .text a:hover { color: #0e0e0e; text-decoration: underline; }
#obj-panel-name .text a:visited { color: #0e0e0e; }


.branchingMode-back {
    display: block;
    background-position: 0 0;
    overflow:hidden;
    position: relative;
}

.branchingMode-back .closebtn {
    -webkit-filter: invert(1);
    filter: invert(1);
    float:left;
    z-index:10;
}

.story-menu-common {
    font-size: 1.1em;
    color: #fff;
    cursor: pointer;
}

.story-menu-button {
    position: absolute;
    left:66%
    top: 15px;
    z-index: 11;
}

.story-menu {
    position: absolute;
    left:66%
    top: 50px;
    z-index: 11;
}

.field-wrapper { margin-bottom: 0.5em; }
.field-name { font-weight: bold; }

.send-story-container
{
    position: relative;
    width: 60vw;
    text-align: center;
}

.direct-link-panel {
    position: relative;
    margin-top: 1.2em;
}

.add-round-button {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-image: url(/static/img/addslide.png);
    background-size: 100%;
}

.add-round-button:hover { -webkit-filter: brightness(1.2); }


.ai-add-round-button {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-image: url(/static/img/ai_icon.png);
    background-size: 100%;
}

.ai-add-round-button:hover { -webkit-filter: brightness(1.2); }

#add-tag { top: -5px; }

#red-fighter {
    bottom: 25px;
    right: 25px;
    padding: 0;
    background-color: rgb(219, 68, 55);
}

#ai-red-fighter {
    bottom: 120px;
    right: 25px;
    padding: 0;
    background-color: rgb(219, 68, 55);
}

.add-n-import {
    bottom: 42px;
    right: 110px;
}

.analyze-with-ai {
    bottom: 135px;
    right: 110px;
}

.mb {
    cursor: pointer;
    height: 1.4em;
    width: 4em;
    left: 0;
    text-align: center;
    padding: 0;
    border-radius: 100%;
    padding: 1.5em 0 1em 0;
    position: absolute;
    z-index: 11;
}

.cm-menu {
    top: 9em;
    position: absolute;
    right: 109px;
    transition: all .5s cubic-bezier(0,1.5,.5,1);
}
#open-story { top: 0; }
#liveshare-story { top: 4.5em; }
#invite-story { top: 9em; }
#clear-story { top: 13.5em; }

@media screen and (min-height: 750px) {
    .cm-menu {
    top: 10em;
    position: absolute;
    right: 109px;
    }
    #open-story { top: 0; }
    #liveshare-story { top: 5em; }
    #invite-story { top: 10em; }
    #clear-story { top: 15em; }
}

.collection-direct-link {
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 13em;
    display: inline-block;
}

#obj-panel-name .hider {
    background-image: url(/static/img/homebutton.png);
    background-size: contain;
    background-repeat: no-repeat;
    /*background-position-y: -2px;*/
    height: 1.4em;
    width: 1.5em;
    float: left;
    cursor: pointer;
}

#obj-panel-name .hida {
    display: flex;
    align-items: center;
    height: 1.4em;
    margin-left: 3px;
}

.hida>span {
    margin-top: 3px;
}

#obj-panel-name {
    top: 15px;
    left: 33px;
}

#obj-panel-name #ops { color: red; cursor: pointer; font-weight: bold; }
#obj-panel-name #settings-trigger {
    height: 1.15em;
    cursor: pointer;
}

#obj-panel-name #settings-trigger:hover {
    /*color: #fff;*/
    opacity: .9;
}

#obj-panel-name #settings-trigger:after {
    content: "\f013";
    font-family: FontAwesome;
    font-size: 1.15em;
}


.chaos {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
}

.full-notification-wrapper .all.container {
    display: block;
}
.full-notification-wrapper .removed.container,
.full-notification-wrapper .archived.container {
    display: none;
}

.full-notification-wrapper table td:last-child {
    text-align: right;
}

.settings-wrapper {
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: white;
    z-index: 1000;
    color: #555;
    display: none;
    overflow-y: auto;
    opacity: 0.95;
}

.settings-wrapper .name {
    color: #2d3842;
    font-size: 13px;
    font-weight: 600;
}

.flex {
    display: flex;
}

.settings-wrapper .field .name {
    color: #2d3842;
    font-size: 13px;
    font-weight: 600;
}

.settings-wrapper form#settings-form {
    margin-top: 16px;
}

.settings-wrapper .field {
    margin-bottom: 19px;
}

.settings-wrapper .checkboxes {
    margin-top: 29px;
}

.settings-wrapper .checkboxes .field {
    margin-bottom: 24px;
}

.settings-wrapper .checkboxes .field input[type="checkbox"] {
    float: right;
}

.settings-wrapper .field input[type="text"] {
    margin-top: 4px;
    color: #b8bcbe;
    font-weight: 600;
    padding-bottom: 3px;
    border-top: none;
    border-right: none;
    border-left: none;
    outline: none;
}

.settings-wrapper h2 {
    margin-bottom: 3px;
}
.settings-wrapper .subheader {
    color: #acb4c4;
    font-size: 13px;
    margin-bottom: 20px;
    font-style: italic;
}

.settings-wrapper .custom-tags h3 {
    position: relative;
}

.settings-wrapper .custom-tags h3 .add-round-button {
    top: 0;
    margin-left: .6em;
}

.settings-wrapper ul.tags {
    overflow: unset;
}

.settings-wrapper .controls img { max-height: 200px; max-width: 300px; }

.users-wrapper span.delete-tag {
    position: relative;
    top: 4px;
    display: block;
    left: -2px;
    height: 1em;
    width: 1em;
    float: left;
}

.settings-wrapper .green-button {
    margin: 0;
    padding: 0 16px;
    height: 40px;
}

.users-wrapper .level-choose { margin-left: 0.5em; }

.upper-section { overflow: hidden; padding-bottom: 0.5em; }

.settings-wrapper .left-column {
    width: 25%;
    padding: 0 7% 0 0;
}

.settings-wrapper .left-column:last-child {
    padding: 0;
}

.settings-wrapper .minimap-generate-status {
    margin: 5px 0;
}

.settings-wrapper .row { overflow: hidden; }
.settings-wrapper .row:after { clear: all; }

.settings {
    margin: 0 auto;
    width: 80%;
}

.send-story-container .email-field
{
    width: 23vw;
    font-size: 3vh;
    margin-bottom: 0.5em;
}

.send-story-container .email-submit
{
    font-size: 2.5vh;
}

.send-story-container img { margin-left: 2em; height: 1.7em; }
.send-story-container span { font-size: 1.7em; }

.panel.cock {
        top: -5% !important;
        opacity: 0 !important;
}

.panel {
    transition: all .3s;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.75);
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(193, 105, 86, .8)), to(rgba(50, 200, 176, .8)));
    padding: 10px;*/
}

.owned-maps { padding-left: 0.7em; }


.page .closebtn,
.full-notification-wrapper .closebtn,
.user-page-wrapper .closebtn,
.user-list-wrapper .closebtn,
.privacy-wrapper .closebtn {
    right: 49px;
    position: fixed;
    top: 30px;
}

.collections-wrapper .spinner {
    height: 1em;
    width: 1em;
    display: inline-block;
    position: relative;
    top: 0.15em;
    left: 0;
}

.collection-wrapper {
    /*margin: 0.5em auto; */
    list-style-type: none;
    position: relative;
    padding-left: 17px;
}
.collection-wrapper a:link {color:#FF0000; text-decoration:none; }
.collection-wrapper a:visited {color:#FF0000; text-decoration:none;}
.collection-wrapper a:hover {color:#F55; text-decoration:underline;}
.collection-wrapper a:active {color:#FFFFFF; text-decoration:none;}

.collection-wrapper .settings-wheel {
    position: absolute;
    left: 0;
    top: -2px;
    display: none;
    cursor: pointer;
}

.not-admin .settings-wheel { display: none !important; }

.shared-maps .settings-wheel { display: none !important; }

/*.collection-wrapper .settings-wheel:after {
    content: "\f013";
    font-family: FontAwesome;
}*/

.settings-menu-wrapper {
    position: absolute;
    top: 0;
    left: 18px;
    padding: 1em 0;
    z-index: 1;
}

ul.settings-menu {
    list-style-type: none;
    background-color: white;
    padding-left: 0;
}

.settings-menu li {
    padding: 0.3em 1em 0;
    cursor: pointer;
}

.settings-menu li:hover {
    background-color: #4C5B9F;
    color: white;
}

.collection-wrapper:hover > .settings-wheel { display: block; }

.collection-wrapper a { text-decoration: none; color: black; font-weight: bold; }
.collection-wrapper span.slug {
    padding: 4px 8px 1px 8px !important;
    margin-left: 0.5em;
    padding-top: 0.25em;
    display: none;
    outline: none;
}
.collection-wrapper.owner span.slug { display: inline; }

.collection-wrapper .removesign
{
    margin-top: -0.15em;
    height: 1em;
    width: 1em;
    float: right;
    background-image: url(/static/img/x.png);
    background-size: cover;
    cursor: pointer;
    display: none;
}
.collection-wrapper.owner .removesign { display: block; }
.collection-wrapper.active a { text-decoration: underline; }

.authorized .collection-wrapper {
    padding-right: 0.5em;
}

.obj-direct-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 30em;
}

.info-wrapper {
    overflow-y: auto;
}
.section-title { font-size: 1.2em; position: relative; margin-bottom: 0.5em; }
.section-title-with-content { font-size: 1.2em; position: relative; margin-bottom: 0.5em; color: #333; }


/********** tags ***********/

.tags-container {
    margin: 50px auto;
    width: 380px;
}

ul.tags {
    list-style-type: none;
    overflow: hidden;
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 14px;
}

.tags:not(#add-tag,.ere):before, .tags:not(#add-tag,.ere):after {
    content: '';
    display: table;
}

.tags:after {
    clear: both;
}


ul.tags li {
    position: relative;
    float: left;
    margin: 0 .6em 0 0;
    border: 1px solid #b2b6b9;
    border-radius: 2px;
    cursor: pointer;
    margin: 2px 2px 2px 0;
}

ul.tags li.no-database-tags {
    border: none;
}

.tags-imported .delete-tag { display: none; }

ul.tags li.inactive { opacity: 0.6; }
ul.tags li.inactive:hover { opacity: 1; }

body.authorized .custom-tags ul.tags li,
body.authorized .tags-custom li,
body.authorized .tags-object li  {
    margin: 3px 12px 5px 0;
}

ul.tags li:not(.ere):active {
    margin-top: 1px;
    margin-bottom: 7px;
}

ul.tags li:not(#add-tag,.ere):after {
    content: '';
    z-index: 2;
    position: absolute;
    top: 10px;
    right: -2px;
    width: 5px;
    height: 6px;
    opacity: .95;
    background: #eb6b22;
    border-radius: 3px 0 0 3px;
    -webkit-box-shadow: inset 1px 0 #99400e;
    box-shadow: inset 1px 0 #99400e;
}

.no-tags {
    font-style: italic;
    color: #a00;
    font-weight: bold;
    display: none;
    position: absolute;
}

.collection-wrapper span.slug:focus {
    -webkit-box-shadow: inset 0 1px 2px #ddd,0 0 5px #28a0e5;
    -moz-box-shadow: inset 0 1px 2px #ddd,0 0 5px #28a0e5;
    -ms-box-shadow: inset 0 1px 2px #ddd,0 0 5px #28a0e5;
    -o-box-shadow: inset 0 1px 2px #ddd,0 0 5px #28a0e5;
    box-shadow: inset 0 1px 2px #ddd,0 0 5px #28a0e5;
    border: 1px solid #28a0e5;
    outline: 0;
}

.collection-wrapper span.slug {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 12px;
    width: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    -webkit-font-smoothing: antialiased;
    border: 1px solid #bbb;
    border-top-color: #999;
    font-size: 1em;
    outline: none;
}

input.field {
    padding: 0px 5px;
    max-width: 100px;
}

ul.tags li > span {
    display: inline-block;
}

.tags-custom .delete-tag {
    display: none;
}

ul.tags span.count {
    position: relative;
    top: 1px;
    padding: 7px 15px 7px;
    color: #0ee1ab;
}

ul.tags span.tag-name {
    padding: 7px 15px 7px;
    border-right: 1px solid #b2b6b9;
}

ul.tags span.tag-wrapper {
    padding: 7px 15px 7px;
    border-right: 1px solid #b2b6b9;
}
ul.tags span.count {
    padding: 7px 15px 7px;
}

/******** end tags ********/

/* Base styles */
.btn-instagram {
    font-size: 14px;
    font-family: sans-serif;
    color: #466c79;
    text-shadow: 1px 1px #fff;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em 0 0.5em 0;
    border-radius: 0.25em;
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-right: 0.25em solid #00558D;
    position: relative;
    margin: 0 0 1px;
    width: 100%;
    cursor: pointer;
    height: 45px;
}

.btn-instagram:before, .btn-instagram:after {
    content:'';
    display:block;
    position: absolute;
}

/* Add Stripes */
.btn-instagram:before {
    width:0.25em;
    height: 100%;
    background:#FBB03B; /* yellow stripe */
    border-left:0.25em solid #D4145A; /* red stripe */
    border-right:0.25em solid #00A99D; /* green stripe */
    top:0;
    right:0;
}

/* Add Hightlights */
.btn-instagram:after {
    width:100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0.25em;
    padding-left: 0.25em;
    box-shadow: inset 1px 1px 0px rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.1);

background: -moz-linear-gradient(top,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.35)), color-stop(49%,rgba(255,255,255,0.2)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#1a000000',GradientType=0 );

}


/* Animate - Fade */
.btn-instagram, .btn-instagram:before {
    -webkit-transition-property: background, border;
    -webkit-transition: 0.1s ease-in;
    -moz-transition-property: background, border;
    -moz-transition: 0.1s ease-in;
    -o-transition-property: background, border;
    -o-transition: 0.1s ease-in;
    transition-property: background, border;
    transition: 0.1s ease-in;

}

/* Hover / Focus */
.btn-instagram:hover, .btn-instagram:focus  {
    background: #fff;
}

.btn-instagram:hover {
    border-right:0.25em solid #09c;
}

.btn-instagram:hover:before {
    background:#fc6; /* yellow stripe */
    border-left:0.25em solid #f06; /* red stripe */
    border-right:0.25em solid #0cc; /* green stripe */
}

.btn-instagram:hover:after {
background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#0d000000',GradientType=0 );

}

/* Active */
.btn-instagram:active {
    margin:1px 0 0;
}


body {
    background: #fff;
}

#copyright {
    bottom: 10px;
    text-align: center;
    font-size: 0.8em;
}

#more {
    font-size: 0.8em;
    bottom: 10px;
    right: 3em;
}
#more a { text-decoration: none; color: #0e0e0e; font-weight: bold; }
#more a:hover { text-decoration: underline; }
#more a:active { color: red; }

.insta-icon-wrapper {
    bottom: 88px;
    right: 42px;
    position: absolute;
    z-index: 11;
    background-color: #C3352D;
    width: 65px;
    height: 65px;
    border-radius: 38px;
    display: none;
}

.insta-icon-wrapper:hover { cursor: pointer; }

.insta-icon-wrapper:hover > .insta-icon svg#icon path {
    fill: #FFF;
}

.insta-icon {
    height: 100%;
    position: relative;
    width: 100%;
}
.insta-icon svg#icon {
    height: 100%;
    -webkit-transform: scale(0.575);
            transform: scale(0.575);
}
.insta-icon svg#icon path {
    fill: #E4DCCC;
    -webkit-transition: 300ms all ease-in-out;
    transition: 300ms all ease-in-out;
}
.insta-icon svg#icon path:hover {
    cursor: pointer;
    fill: #AB8469;
}
.insta-icon svg:not(#icon) {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transition: 900ms all cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: 900ms all cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    z-index: -1;
    fill: transparent;
}




.vertical-align {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ajax-loader {
    -moz-transition: ease-out 750ms;
    -o-transition: ease-out 750ms;
    -webkit-transition: ease-out 750ms;
    transition: ease-out 750ms;
    z-index: 50;
}
.ajax-loader .ajax-loader-logo {
    position: relative;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
}
.ajax-loader .ajax-loader-circle {
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-animation: ajaxLoaderSpin 1.4s linear infinite;
    -webkit-animation: ajaxLoaderSpin 1.4s linear infinite;
    animation: ajaxLoaderSpin 1.4s linear infinite;
}
.ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner {
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
    -webkit-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
    animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
}
.ajax-loader .ajax-loader-circle circle {
    /*-moz-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
    -webkit-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
    animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;*/
    -moz-animation: ajaxLoaderDash 1.4s ease-in-out infinite;
    -webkit-animation: ajaxLoaderDash 1.4s ease-in-out infinite;
    animation: ajaxLoaderDash 1.4s ease-in-out infinite;
    stroke-dasharray: 1570;
    stroke-dashoffset: 392.5;
    stroke: #f00;
    stroke-width: 19;
    fill: none;
}
.ajax-loader .ajax-loader-letters path {
    fill: #fff;
}

@-moz-keyframes ajaxLoaderSpin {
    0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    }
}
@-webkit-keyframes ajaxLoaderSpin {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    }
}
@keyframes ajaxLoaderSpin {
    0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    }
}
@-moz-keyframes ajaxLoaderColors {
    0% {
    stroke: #35ad0e;
    }
    25% {
    stroke: #d8ad44;
    }
    50% {
    stroke: #d00324;
    }
    75% {
    stroke: #dc00b8;
    }
    100% {
    stroke: #017efc;
    }
}
@-webkit-keyframes ajaxLoaderColors {
    0% {
    stroke: #35ad0e;
    }
    25% {
    stroke: #d8ad44;
    }
    50% {
    stroke: #d00324;
    }
    75% {
    stroke: #dc00b8;
    }
    100% {
    stroke: #017efc;
    }
}
@keyframes ajaxLoaderColors {
    0% {
    stroke: #35ad0e;
    }
    25% {
    stroke: #d8ad44;
    }
    50% {
    stroke: #d00324;
    }
    75% {
    stroke: #dc00b8;
    }
    100% {
    stroke: #017efc;
    }
}
@-moz-keyframes ajaxLoaderDash {
    0% {
    stroke-dashoffset: 1413;
    }
    50% {
    stroke-dashoffset: 392.5;
    }
    100% {
    stroke-dashoffset: 1413;
    }
}
@-webkit-keyframes ajaxLoaderDash {
    0% {
    stroke-dashoffset: 1413;
    }
    50% {
    stroke-dashoffset: 392.5;
    }
    100% {
    stroke-dashoffset: 1413;
    }
}
@keyframes ajaxLoaderDash {
    0% {
    stroke-dashoffset: 1413;
    }
    50% {
    stroke-dashoffset: 392.5;
    }
    100% {
    stroke-dashoffset: 1413;
    }
}
@-moz-keyframes ajaxLoaderDashSpin {
    50% {
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
    }
    100% {
    -moz-transform: rotate(450deg);
    transform: rotate(450deg);
    }
}
@-webkit-keyframes ajaxLoaderDashSpin {
    50% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    }
    100% {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
    }
}
@keyframes ajaxLoaderDashSpin {
    50% {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    }
    100% {
    -moz-transform: rotate(450deg);
    -ms-transform: rotate(450deg);
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
    }
}
.ajax-loader, .ajax-loader .ajax-loader-circle, .ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner, .ajax-loader .ajax-loader-circle circle, .ajax-loader .ajax-loader-letters {
    content: '';
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    width: 2em;
    height: 2em;
}

#loginpanel .ajax-loader {
    top: 46.5%;
    left: 50%;
    position: absolute;
    display: none;
}

#loginpanel .ajax-loader .ajax-loader-circle circle {
    stroke: #fff;
}

#loginpanel .four-users .user {
    height: 1.6em;
    width: 1.6em;
    border-radius: 1em;
    position: relative;
    float: left;
    background-size: cover;
    margin-left: 0.4em;
}

#loginpanel .panel-inner {
    padding: 5.2em 4em;
}

#loginpanel .flex-box {
    display: flex;
    position: relative;
}

#loginpanel .social-login {
    border-right: 1px solid #e7e8ec;
    width: 50%;
    position: relative;
}

.social-login>.login-button {
    width: 16em;
}

.or {
    position: absolute;
    right: -12px;
    font-size: 18px;
    border: 2px solid #e7e8ec;
    border-radius: 50%;
    padding: 23px 20px 17px 20px;
    background-color: white;
    color: #3e6373;
    z-index: 1;
    height: 25px;
    width: 25px;
}

#loginpanel .pass-login {
    border-left: 1px solid #e7e8ec;
    width: 50%;
    position: relative;
}

.sign-manually {
    color: #3e6373;
    font-size: 13px;
    text-align: left;
    padding-left: 75px;
    margin-bottom: 19px;
}

.outer-below {
    position: absolute;
    bottom: -12px;
    left: 97px;
    font-size: 9px;
    color: #bababa;
}

input#username {
    margin-bottom: 14px;
}


span.register-now {
    color: #fe6268;
    cursor: pointer;
    margin-right: 1em;
}

span.forgot-password {
    color: #bababa;
    cursor: pointer;
    margin-left: 1em;
}

.user .status {
    background-color: #63AE17;
    height: 25%;
    width: 25%;
    border-radius: 100%;
    border: 3px solid white;
    position: absolute;
    bottom: -3px;
    right: -4px;
}

.user .status.online { background-color: #63AE17; }
.user .status.offline { background-color: #DF0000; }


#loginpanel .four-users:after { clear: both; }

#loginpanel .four-users {
    display: none;
    height: 1.6em;
    width: 9em;
    margin: 1em auto 0;
    padding: 0 0 1.7em;
}



.left .ajax-loader,
.left .ajax-loader .ajax-loader-circle,
.left .ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner,
.left .ajax-loader .ajax-loader-circle circle,
.left .ajax-loader .ajax-loader-letters {
    content: '';
    position: absolute;
    z-index: 1;
    width: 10em;
    height: 10em;
}

.left .ajax-loader {
    left: 50%;
    top: 50%;
}

.btn-fullscreen-enter {
    position:absolute;
    top: 23px;
    cursor:pointer;
    z-index:11 !important;
}
.btn-fullscreen-exit {
    position:absolute;
    top:23px;
    cursor:pointer;
    z-index:11 !important;
}
.btn-fullscreen-enter.collection {
    right:15px;
}
.btn-fullscreen-exit.collection {
    right: 31px;
}
.btn-fullscreen-enter.branching-story {
    left:15px;
}
.btn-fullscreen-exit.branching-story {
    right:197px;
}

.insta-collection-icon {
    float: left;
    width: 15px;
    position: absolute;
    height: 15px;
    top: -4px;
    left: -27px;
    border-radius: 5px;
    border: 2px solid #96999D;
}
.insta-collection-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #96999D;
    top: 5px;
}
.insta-collection-icon::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    border: 2px solid #96999D;
    border-radius: 50%;
    left: 3px;
    top: 3px;
    background: #FFFFFF;
}

.loader-wrapper { height: 100%; width: 100%; }
.loader-wrapper div { float: left; }

.yellow { background-color: #aaaa00; }

.choose-upload-map-wrapper {
        padding: 2em;
}

.privacy-trigger {
    cursor: pointer;
}

.privacy-wrapper {
    display: none;
}


.source-icons-box i{
    margin-right: 7px;
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255);
    z-index: 1000;
    color: #555;
    display: none;
    overflow-y: auto;
    padding: 0;
}

.inside-page {
    width: calc(100% - 270px);
    right: 0;
    left: auto;
    padding: 30px 85px;
    box-sizing: border-box;
    z-index: 12;
}

.page .page-header {
    font-size: 23px;
    color: #2d3741;
    font-weight: 600;
    padding: 31px 49px;
    border-bottom: 1px solid #dfe1e7;
}

.tabs-wrapper {
    display: flex;
    border-bottom: 1px solid #dfe1e7;
}

.tab:first-child {
    margin-left: 49px;
}

.tab {
    cursor: pointer;
    font-size: 23px;
    color: #2d3741;
    font-weight: 600;
    padding: 31px 0;
    margin: 0 26px;
}

.tab.bold {
    border-bottom: 5px solid #00e1a8;
}

.access-label {
    margin: 0;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 1px;
}

.user-page-wrapper .container,
.user-list-wrapper .container,
.collections-wrapper .container {
    margin: 49px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.user-page-wrapper .deactivated,
.collections-wrapper .deactivated {
    display: none;
}


.bqc {
    width: 295px;
    height: 420px;
    background-color: white;
    box-shadow: 0px 13px 39px -8px #bdc3c7;
    margin: 49px 24px;
    color: #2d3741;
    position: relative;
}

.bqc .share-image {
    height: 180px;
    background-image: url(/static/img/empty_grid.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.bqc .info {
    position: relative;
    padding: 45px 20px 0;;
}

.bqc .lock {
    width: 30px;
    height: 30px;
    position: absolute;
    background-size: contain;
    top: 35px;
    right: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

.bqc .lock.opened {
    background-image: url(/static/img/unlock-gray.svg);
}

.bqc .lock.closed {
    background-image: url(/static/img/lock-gray.svg);
}

.bqc .collection-name-wrapper {
    margin-bottom: 17px;
    height: 49px;
}

.bqc .collection-name {
    max-width: 230px;
    font-weight: 800;
    font-size: 21px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.bqc .objects-amount {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 9px;
}

.bqc .link {
    color: #b0b9c7;
    font-size: 14px;
    margin-bottom: 31px;
}

.bqc span.slug{
    box-sizing: border-box;
    width: auto;
    border: 1px solid #bbb;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 1px 3px 1px 3px;
    margin-left: 3px;
    outline: none;
}

.bqc .green-button {
    padding: 0 30px;
    height: 33px;
    border-color: #b0b9c7;
    margin-left: 0;
    border-width: 1px;
    font-size: 12px;
}

.bqc .avatar {
    width: 70px;
    height: 70px;
    border: 3px white solid;
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    top: -39px;
    background-size: contain;
    background-position: center;
}

.bqc .avatar:hover + .hover {
    opacity: 1;
    cursor: pointer;
}

.user-list-wrapper .name {
    font-weight: 800;
    font-size: 21px;
    text-align: center;
    margin-bottom: 10px;
}

.bqc .collection-amount {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.user-list-wrapper .counters-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 23px;
}

.user-list-wrapper .counter-wrapper {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    color: #303a43;
}

.user-list-wrapper .followers-counter,
.user-list-wrapper .following-counter {
    padding: 8px 12px;
}

.user-list-wrapper .followers-counter {
    border-right: 1px solid #dfe1e7;
}


.user-list-wrapper .follow {
    border-color: #2eca9b;
    color: #2eca9b;
    border-width: 2px;
    outline: none;
}

.user-list-wrapper .unfollow {
    border-width: 2px;
    outline: none;
}

.user-list-wrapper .unfollow:hover {
    cursor: pointer;
}


.user-list-wrapper .is-disabled{
    background-color: grey;
}
.user-list-wrapper .is-disabled:hover{
    background-color: grey !important;
}

.user-list-wrapper .follow:hover {
    cursor: pointer;
}


.justify-left {
    justify-content: left !important;
}


.vagrant-pixel {
    margin-bottom: 13px;
}
.empty-collection {
    position: absolute;
    top: 0;
    width: 100%;
    font-weight: bold;
    text-align: center;
    margin-top: 3.6em;
}

.user-page-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0 0 0 1em;
    z-index: 999999;
    background-color: white;
    display: none;
    overflow-y: auto;
}

.user-page-wrapper #user-page-container .save {
    display: none !important;
}

.bqc .featured {
    display: none;
    background-color: #0c0;
}

.featured.already {
    display: block;
}

#user-page-favorite-container .featured,
.collection-container[data-is-public="false"] .featured {
   display: none !important;
}

.collection-container:hover .featured {
    display: block;
}

.user-page-wrapper .closebtn{
    right: 1em;
}
.user-page-wrapper h1 {
    margin: 0;
    margin-left: 20px;
    margin-top: -4px;
    /* margin-bottom: 13px; */
    color: black;
    font-size: 60px;
}
.user-page-wrapper .container {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 49px 49px;
}
.user-page-wrapper .header {
    display: flex;
    margin-top: 50px;
    margin-left: 49px;
}

.user-page-wrapper .header .avatar {
    cursor: pointer;
    height: 96px;
    width: 96px;
    margin-left: 7px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    box-shadow: 2px 3px 55px -19px #ccc;
}

.user-page-wrapper .header .name {
    color: #303a43;
    font-size: 21px;
    font-weight: 800;
}

.user-page-wrapper .header .avatar-hovered-label {
    text-align: center;
    color: black;
    margin: 0 auto;
    font-size: 16px;
    margin-left: 14px;
    margin-top: 27px;
    position: absolute;
    opacity: 0;
    z-index: 2;
}

.user-page-wrapper .header .counters-wrapper {
    display: flex;
}

.user-page-wrapper .header .counter-wrapper {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    color: #303a43;
    cursor: pointer;
}

.user-page-wrapper .header #followers-counter {
    border-right: 1px solid #dfe1e7;
    padding-left: 0;
}

.user-page-wrapper .header .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 27px;
    position: relative;
}

.user-page-wrapper ul {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 6px;
    text-align: center;
}

.user-page-wrapper header {
    display: block;
    overflow: hidden;
    position: relative;
    padding-bottom: 2em;
}
.user-page-wrapper .bg {
    border-bottom: 8px solid #5cc0ff;
    width: 272px;
    height: 141.99px;
}
.user-page-wrapper .bio:hover > .desc {
    cursor: pointer;
    opacity: 1;
}
.user-page-wrapper .bio:hover > .desc {
  cursor: pointer;
  opacity: 1;
}
.user-page-wrapper .avatarcontainer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  display: block;
}
.user-page-wrapper .avatarcontainer:hover > .hover {
    opacity: 1;
}

.user-page-wrapper .avatar img {
    width: 65px;
    height: 65px;
}
.user-page-wrapper .avatar:hover + .hover {
    opacity: 1;
    cursor: pointer;
}
.user-page-wrapper .hover {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-color: #3498db;
    top: 0;
    font-size: 1.8em;
    text-align: center;
    color: white;
    padding-top: 18%;
    opacity: 0;
    font-weight: 300;
    border: 8px solid #5cc0ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    box-sizing: border-box;
}
.user-page-wrapper .data {
  color: #81878b;
}
.user-page-wrapper .data li {
    width: 32%;
    text-align: center;
    display: inline-block;
    font-size: 1.5em;
    border-right: solid 1px #bdc3c7;
}
.user-page-wrapper .data li:last-child {
      border: none;
}
.user-page-wrapper.data li span {
      display: block;
      text-transform: uppercase;
      font-size: .5em;
      margin-top: .6em;
      font-weight:700;
}
.user-page-wrapper .desc {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 141.99px;
  color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  box-sizing: border-box;
}
.user-page-wrapper .desc h3 {
    font-size: 1.2em;
    margin-bottom: .5em;
    padding-top: 2em;
}
.user-page-wrapper .desc p {
    font-size: .9em;
}

.user-page-wrapper .follow {
    margin: 0 auto;
    background-color: #2589cc;
    width: 150px;
    color: white;
    text-align: center;
    padding: .5em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    box-sizing: border-box;

}

.user-page-wrapper .follow:hover {
    background-color: #167abd;
    cursor: pointer;
    box-sizing: border-box;
}
.user-page-wrapper .header .follow {
    background-color: #00cc00;
    margin-left: 20px;
}
.user-page-wrapper .header .unfollow {
    margin-left: 20px;
}
.user-page-wrapper .header .unfollow:hover {
    margin-left: 20px;
}
.user-page-wrapper .header .follow:hover {
    background-color: #00b300;
    margin-left: 20px;
}
.options {
    margin-top: 7px;
    height: 25px;
    text-align: center;
    color: #555;
}
.widgets-are-hidden #obj-panel-name,
.widgets-are-hidden .search-super-wrapper {
    left: -30em !important;
}
.widgets-are-hidden .how-many-objects,
.widgets-are-hidden .btn-fullscreen-enter,
.widgets-are-hidden .btn-fullscreen-exit {
    top: -25em !important;
}

.widgets-are-hidden .cm-menu-wrapper {
    top: -25em !important;
    right: -30em !important;
}

.widgets-are-hidden .ball,
.widgets-are-hidden #more,
.widgets-are-hidden .cm-menu,
.widgets-are-hidden .add-n-import,
.widgets-are-hidden #red-fighter {
    right: -30em !important;
    bottom: -25em !important;
}

.widgets-are-hidden .ball,
.widgets-are-hidden #more,
.widgets-are-hidden .cm-menu,
.widgets-are-hidden .analyze-with-ai,
.widgets-are-hidden #ai-red-fighter {
    right: -30em !important;
    bottom: -25em !important;
}

.current-collection {
    /*border: 2px solid #00cc00;*/
    box-sizing: border-box;
    height: 357px !important;
    outline: 8px solid #5cc0ff;
}

.marks {
    display: flex;
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 1;
    font-size: 15px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.mark {
    cursor: pointer;
    border-radius: 3px;
    color: white;
    padding: 7px 12px;
}

.save {
    background-color: red;
    right: 10px;
    position: absolute;
}

.save:hover{
    background-color: #e60000;
}

.background {
    position: absolute;
    width: 100%;
    opacity: 0;
    background-color: white;
    height: 100%;
    z-index: 1;
}
.giphy_icon {
    width: 16px;
    height: 16px;
    /*background-repeat: no-repeat;
    background-position: : center;
    background-image: url('/static/img/giphy.png');*/
}
.cm-menu-wrapper {
    right: 29px;
    z-index: 20;
    position: absolute;
    top: 23px;
    transition: all .5s cubic-bezier(0,1.5,.5,1);
}
.cm-buttons-wrapper{
    display: flex;
}
.cm-buttons-wrapper .trigger{
    background: #ff8a3d;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 -1px 0px rgba(0,0,0,0.0);
    cursor: pointer;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    position: relative;
    padding: 0;
}
.cm-buttons-wrapper .trigger:hover{
    opacity: 0.6;
}
.trigger .bg{
    width: 33px;
    height: 33px;
    margin: 6px;
    background-size: 100%;
}
.trigger i{
    margin-top:5px;
}
.cm-actions .bg{
    background-image: url(/static/img/menu.svg);
}
.cm-notifications .bg{
    background: #000;
    border-radius: 50px;
    text-align: center;
    font-size: 13px;
    color: white;
}
.cm-notifications{
    border-radius:50px;
}
.cm-actions-wrapper{
    position: absolute;
    z-index: 100;
    margin-top: 77px;
    right: 27px;
}
.cm-actions-container{
    padding: 7px;
    font: 13px/27px Arial,sans-serif;
    border: 1px solid rgba(0,0,0,.2);
    background: #fff;
    -webkit-box-shadow: 0 2px 2px 0px rgba(0,0,0,.6);;
    box-shadow: 0 2px 2px 0px rgba(0,0,0,.6);
}
.cm-actions-wrapper .rise{
    border: 1px solid rgba(0,0,0,.2);
    height: 15px;
    position: absolute;
    right: 14px;
    top:-1px;
    border-width: 0 10px 10px 10px;
    margin-top: -8px;
    z-index: 200;
    height: 0;
    border-color: transparent transparent #fff transparent;
}
.cm-actions-container>div {
    display: flex;
}
.cm-actions-container>div:first-child>div:first-child {
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
}

.cm-actions-container>div:first-child>div:last-child {
    border-left: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.cm-actions-container>div:last-child>div:first-child {
    border-right: 1px solid #ececec;
    border-top: 1px solid #ececec;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.cm-actions-container>div:last-child>div:last-child {
    border-left: 1px solid #ececec;
    border-top: 1px solid #ececec;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.cm-action-wrapper:hover .cm-action-text{
    color: #ff8a3d;
}
.cm-action-wrapper{
    cursor: pointer;
    width: 64px;
    padding: 12px;
    height: 64px;
    text-align: center;
    display: inline-block;
}

.cm-action-icon{
    height: 53%;
    background-size: 66%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 7px;
}

#open-story .cm-action-icon {
    background-image: url(/static/img/open.svg);
}
#liveshare-story .cm-action-icon {
    background-image: url(/static/img/share.svg);
}
#invite-story .cm-action-icon {
    background-image: url(/static/img/invite.svg);
}
#clear-story .cm-action-icon {
    background-image: url(/static/img/clear.svg);
}

.cm-action-text{
    color: black;
    margin-top: -5px;
}
.cm-invisible-curtain{

    z-index: 10;
    height: 100%;
    width: 100%;
    position: absolute;
}
.heart-likes{
    display: flex;
    position: absolute;
    z-index: 100;
    padding: 10px 17px;
    flex-direction: row;
    background-color: rgba(255,255,255,.6);
}
.heart-likes i{
    color: white;
    top: -1px;
    margin-left: 3px;
    font-size: 12px;
    position: relative;
}
.heart-counter {
    color: black;
    position: relative;
    font-size: 12px;
    line-height: 12px;
}
.thumbnail_generator{
    color: black;
    position: absolute;
    text-decoration: none;
    left: 0;
    top: 37%;
    margin: auto;
    right: 0;
}


.followers-page-wrapper .container,
.full-notification-wrapper .page-content {
    margin: 56px 49px;
}

.followers-page-wrapper .container table th:nth-child(1) { padding-left: 33px; }
.followers-page-wrapper .container table th:nth-child(2) { width: 10%; }
.followers-page-wrapper .container table th:nth-child(3) { width: 10%; }
.followers-page-wrapper .container table th:nth-child(4) { width: 10%; }
.followers-page-wrapper .container table th:nth-child(5) { width: 10%; }
.followers-page-wrapper .container table th:nth-child(6) { width: 10%; }
.followers-page-wrapper .container table th:nth-child(7) { width: 22%; }

.followers-page-wrapper .container table td:last-child {
    text-align: right;
}


.followers-page-wrapper table .avatar {
    height: 60px;
    border-radius: 50%;
    margin-right: 12px;
}

.followers-page-wrapper table span.name {
    top: -24px;
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

.followers-page-wrapper .green-button,
.full-notification-wrapper .green-button {
    padding: 0;
    font-size: 10px;
    margin-left: 0;
    border-width: 1px;
    border-radius: 1px;
    height: 32px;
    width: 90px;
}

.followers-page-wrapper .green-button.ban {
    margin-right: 25px;
}