body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'SF UI Text', Helvetica, Arial, sans-serif; ;
    font-weight: 400;
}

@font-face {
    font-family: HelveticaNeue;
    src: url(/static/fonts/HelveticaNeueLTStd-Bd.otf);
    font-weight: 100;
}

#page { margin: 0; padding: 0; }

#content { background-color: #fff; color: #cdcdcd; overflow: hidden; position: relative; }

.left { float: left;}
.clear { clear: both; visibility: hidden; }

.toggle-div
{
    width: 100%;
    left: 0;
    position: absolute;
    z-index: 2;
    background-color: #cecece;

}

.toggle-div:hover
{
    background-color: #ffffff;
    cursor: pointer;
}
#shade-div
{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    top: 0px;
    left: 0px;
    z-index: 1001;
    transition: all .3s;
}

#for-more {
    position: relative;
    width: 70vw;
    display: none;
}

#for-more table {
    border: 1px solid #ddd;
    background: #fafafa;
    width: 100%;
    font-size: 70%;
    border-collapse: collapse;
}
#for-more table th {
    background: #f1f1f1;
}
#for-more table th, #for-more table td { border: 1px solid #ddd; padding: 0.7em 1em; }
#for-more .left { width: 50%; }
#for-more .right { width: 50%; }

#for-more table td:first-child {
    font-weight: bold;
}

#for-more .title { font-size: 3vh; }
#for-more .container { padding: 2vh 0; }

.closebtn{
    position: absolute;
    right: 16px;
    top: 20px;
    height: 36px;
    opacity: .3;
    width: 36px;
    background-image: url(/static/img/close.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

span.delete-tag {
    height: 1em; width: 1em;
    left: -1.05em; top: 0.6em;
    background-image: url(/static/img/x.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    opacity: 0.7;
}

span.delete-tag:hover{ opacity: 1; }

.closebtn:not(.delete-tag):hover{ opacity: 0.65; }

.right { float: right; }

.wrap#loginpanel {
    position: relative;
    text-align: right;
    display: none;
    width: 50em;
}

#loginpanel .text .we-use {
    font-size: 1.58em;
    margin-top: 1.5vh;
    position: absolute;
    color: white;
    background-color: black;
    padding: 0 5px;
}
#loginpanel .text .we-use-after {
    font-size: 0.8em;
    margin-bottom: 2em;
}

.warning .tooltip { display: block; }
.tooltip {
    background: #fff;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
    color: #000;
    display: none;
    font-weight: normal;
    left: 104%;
    top: 0;
    line-height: 150%;
    padding: 8px 14px;
    position: absolute;
    text-align: left;
    width: 215px;
}
.tooltip:before, .tooltip:after {
    border-style: solid;
    content: '';
    display: block;
    right: 100%;
    margin-top: -8px;
    position: absolute;
    top: 17px;
    width: 0;
}
.tooltip:before {
    border-color: transparent rgba(0, 0, 0, 0.48);
    border-width: 8px 10px 8px 0;
    z-index: 0;
}
.tooltip:after {
    border-color: transparent #fff;
    border-width: 8px 10px 8px 0;
    margin-right: -1px;
    z-index: 1;
}

#loginform .flex-box{
    margin-left: 72px;
}

.remember-wrapper {
    margin-right: 51px;
}

.remember-wrapper input[type="checkbox"] {
    height: 24px;
    position: relative;
    width: 24px;
    top: 10px;
    border: 0;
    color: #3e6373;
    border-radius: 3px;
    background-color: #eee;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.remember-wrapper input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 20px;
    position: absolute;
    top: 0px;
    left: 4px;
    outline: none;
}

label.remember {
    color: #3e6373;
    font-size: 11px;
}



#loginpanel input:not([type=checkbox]){
    border-radius: 3px;
    height: 45px;
    outline: none;
    padding-left: 1.3em;
    width: 243px;
    -webkit-appearance: none;
    font-size: 13px;
    margin-bottom: 7px;
    position: relative;
    border: none;
    background-size: 2em;
    background-color: #eee;
}

#loginpanel input[type=text]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
#loginpanel input[type=text]::-webkit-input-placeholder,
input[type=password]:-moz-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
#loginpanel input[type=text]::-webkit-input-placeholder,
input[type=password]::-moz-placeholder {
   font-style: italic;
   color: #b2b6b9;
}
#loginpanel input[type=text]::-webkit-input-placeholder,
input[type=password]:-ms-input-placeholder {
   font-style: italic;
   color: #b2b6b9;
}


#loginform .spinner {
    height: 35px;
    width: 35px;
    top: 7px;
    left: 48%;
    display: none;
}

#loginform div:not(.insta-button-wrapper)>.spinner .container1 > div,
    #loginform div:not(.insta-button-wrapper)>.spinner .container2 > div,
    #loginform div:not(.insta-button-wrapper)>.spinner  .container3 > div {
    background-color: white;
}

#facebook_container {
    overflow: hidden;
    position: relative;
}

.insta-button-wrapper {
    position: relative;
}

.admin-button-wrapper {
    margin-top: 0.5em;
    position: relative;
}

.fontawesome-facebook:before {
    font-family: 'FontAwesome', sans-serif;
    content: "\f09a";
    font-size: 30px;
}

.facebook-before {
    background: #507dc0;
    border-radius: 3px 0px 0px 3px;
    color: #f4f4f4;
    display: block;
    float: left;
    height: 47px;
    line-height: 50px;
    text-align: center;
    width: 15%;
}

.facebook {
    background: #507dc0;
    border: none;
    border-radius: 0px 3px 3px 0px;
    color: #fefefe;
    cursor: pointer;
    height: 47px;
    width: 100%;
}
#facebookBtn, #pinteBtn { float: left; width: 85%; }



#pinte-button-wrapper {
    overflow: hidden;
    position: relative;
}

.pinte-button-wrapper {
    background: #cc2127;
    border: none;
    border-radius: 0px 3px 3px 0px;
    color: #fefefe;
    cursor: pointer;
    height: 47px;
    width: 100%;
}
#pinte-button { float: left; width: 85%; }

.pinte-before {
    background: #cc2127;
    border-radius: 3px 0px 0px 3px;
    color: #f4f4f4;
    display: block;
    float: left;
    height: 47px;
    line-height: 47px;
    text-align: center;
    width: 15%;
    background-image: url(/static/img/pinte.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}
#google_container {
    overflow: hidden;
    position: relative;
}

.google-before {
    background: #df4930;
    border-radius: 3px 0px 0px 3px;
    color: #fefefe;
    display: block;
    float: left;
    height: 47px;
    line-height: 47px;
    text-align: center;
    width: 15%;
    background-image: url(/static/img/g_btn.png);
    background-size: contain;
    background-position: center center;
    border-right: 2px #df4930 solid;
}

.google {
    background: #df4930;
    border: none;
    border-radius: 0px 3px 3px 0px;
    color: #fefefe;
    cursor: pointer;
    height: 47px;
    width: 100%;
}
#googleBtn { float: left; width: 84%; }


.warning input {
    background: url(/static/img/input_warning.png) no-repeat right;
}

#loginpanel .logo-wrapper {
    position: absolute;
    width: 100%;
    bottom: 100%;
    left: 0;
    top: -56px;
}
#loginpanel .logo {
    position: relative;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
    padding: 5px;
    height: 45px;
    width: 90px;
    border-radius: 90px 90px 0 0;
    -moz-border-radius: 90px 90px 0 0;
    /* -webkit-border-radius: 90px 90px 0 0; */
    border: 3px double #000;
    border-bottom: none;
}

#loginpanel .logo .p {
    height: 80px;
    width: 80px;
    background-image: url(/static/img/p.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    left: 8px;
    top: 0px;
    position: relative;
}


#loginpanel .login {
    background-color: #ff5a60;
    border: none;
    border-radius: 3px;
    color: #ececec;
    cursor: pointer;
    font-size: 11px;
    height: 36px;
    text-transform: uppercase;
    width: 101px;
    -webkit-appearance: none;
}

#loginpanel .text.first {
    width: 70%;
    padding: 3.5em 0 2em 0;
}

.cancel {
    color: red;
    font-weight: bold;
    text-align: center;
    font-size: 1.4em;
    cursor: pointer;
    margin-top: 1em;
}

#loginpanel .text {
    margin: 0 auto;
    width: 20em;
    padding: 1.4em 0;
}

#loginpanel .text.foot { font-size: 0.8em; width: 25em; color: #999;}
#loginpanel .text.foot a { font-weight: bold; color: #999; }
@media screen and (max-width: 300px) {
    #loginpanel .text.foot { font-size: 0.6em; }
}

#loginpanel .login.admin:hover { background-color: #ee4050; }
#loginpanel .facebook:hover { background-color: #007dde; }
#loginpanel .login.staff:hover { background-color: #00BE00; }
#loginpanel .login.student:hover { background-color: #00BABE; }

#loginpanel .login.staff {
    background-color: #11DE00;
    opacity: 0.5;
    cursor: default;
}

#loginpanel button { outline: none; }
#loginpanel .login-button { margin-bottom: 0.7em; }


#loginpanel .login.student {
    background-color: #00DADE;
    opacity: 0.5;
    cursor: default;
}

.round-button {
    text-decoration: none;
    font-size: 17px;
    color: #A7AAAE;
    border: 1px solid #A7AAAE;
    padding: 10px 20px;
    border-radius: 50px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    text-transform: uppercase;
    background-color: white;
    outline: none;
}

.round-button:hover
{
    cursor: pointer;
    background: #A7AAAE;
    color: #fff;
}

.object-wrapper { width: 80%; margin: 3em auto; }
.object-wrapper img { width: 100%; }

.error-message { color: red; font-size: 12px; }

.box hr {
    diplay: block;
    border: none;
    border-bottom: 1px dashed #ccc;
}
.box {
    background-color: #fbfbfb;
    border: 1px solid #AAA;
    border-bottom: 1px solid #888;
    border-radius: 3px;
    color: black;
    box-shadow: 0px 2px 2px #AAA;
    padding: 20px;
    margin: 2em auto;
    width: 50%;
}
.box h1, .box h2 {
    display: block;
    text-align: center;
}
.box h1 {
    color: #666;
    font-weight: normal;
    font-size: 50px;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    line-height:50px
}
.box h2 {
    color: #666;
    font-weight: normal;
    font-size: 1.5em;
}
.box p {
    display: block;
    margin-bottom: 10px;
}
.box ul li {
    margin-bottom: 7px;
}

.obj-share { margin-top: 0.8em !important; }

.spotlight .icon-button .icon-facebook {
    color: #fff;
}

/* Circle */
/*.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
    width: 0;
}
.icon-button:hover span {
    width: 1.4em;
    height: 1.4em;
    border-radius: 1.4em;
    margin: -0.7em;
}


.facebook span {
    background-color: #3B5998;
}
*/
/* Icons */
.icon-button i {
    background: none;
    color: white;
    height: 1.4em;
    left: 0;
    line-height: 1.4em;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
    width: 1.4em;
    z-index: 10;
}


.icon-button .icon-facebook {
    color: #3B5998;
}

.icon-facebook:before {
    content: "\f09a";
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
    color: white;
}

.spot-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.8em;
}

.star-badge {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 200,200"> <polygon fill="#b81414" points="100, 0 113.29693, 16.04649 130.9017, 4.89435 138.58919, 24.26445 158.77853, 19.0983 160.10408, 39.89592 180.9017, 41.22147 175.73555, 61.41081 195.10565, 69.0983 183.95351, 86.70307 200, 100 183.95351, 113.29693 195.10565, 130.9017 175.73555, 138.58919 180.9017, 158.77853 160.10408, 160.10408 158.77853, 180.9017 138.58919, 175.73555 130.9017, 195.10565 113.29693, 183.95351 100.0, 200 86.70307, 183.95351 69.0983, 195.10565 61.41081, 175.73555 41.22147, 180.9017 39.89592, 160.10408 19.0983, 158.77853 24.26445, 138.58919 4.89435, 130.9017 16.04649, 113.29693 0, 100.0 16.04649, 86.70307 4.89435, 69.0983 24.26445, 61.41081 19.0983, 41.22147 39.89592, 39.89592 41.22147, 19.0983 61.41081, 24.26445 69.0983, 4.89435 86.70307, 16.04649" /> </svg> ');
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transform: rotate(-10deg);
    display: table;
    margin: auto;
    position: absolute;
    top: -2.5em;
    right: -2em;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
    position: absolute;
    width: 3em;
    height: 3em;
    font-size: 0.8em;
    padding: 0.5em;
}

.star-badge > *{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}






.spinner {
    position: absolute;
    top: 40%;
    left: 160px;
    display: block;
    z-index: 500;
}

.spotlight .spinner {
    width: 100px;
    height: 100px;
}

.spotlight .delete .container1 > div,
.spotlight .delete .container2 > div,
.spotlight .delete .container3 > div {
    background-color: #fff;
}

.container1 > div, .container2 > div, .container3 > div {
    height: 25%; width: 25%;
    background-color: #000;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
}

.notifications {
    background-color: #FFFFFF;
    position: absolute;
    padding: 0px;
    border: 1px #A9A9A9 solid;
    border-radius: 11px;
    left: 23px;
    top: 4px;
    font-size: 14px;
    height: 15px;
    width: 17px;
    text-align: center;
    cursor: pointer;
    color: #555;
    z-index: 4;
}

.notifications:before {
    content: "";
    height: 0;
    border-top: 8px #AEAEAE solid;
    border-bottom: none;
    border-left: 11px transparent solid;
    border-right: none;
    width: 0;
    position: absolute;
    transform: rotate(-88deg);
    top: 17px;
    left: 2px;
    z-index: 1;
}

.notifications-wrapper {
    position: absolute;
    background-color: #FFFFFF;
    border: 2px #B81414 solid;
    width: 27em;
    right: 1em;
    top: 3em;
    padding: 1em;
    box-shadow: 0 0 10px #B81414;
    display: none;
    z-index: 111111111111;
}

.notification-wrapper {
    background-color: #FFF;
    padding: 1em;
    font-family: Open Sans;
    box-shadow: 0 0 3px #B81414;
    margin-bottom: 0.5em;
    color: black;
}

.livecursor {
    position: absolute;
    z-index: 65000;
}

.livecursor_textlabel {
    position: absolute; top:23px; left: 23px;
    border: none;
    border-radius: .3em;
    box-shadow: .05em .05em .05em .05em rgba(0, 0, 0, 0.2);
    color: white;
    rem-text-shadow: rgba(0, 0, 0, 1) 0px 0px .3em;
    -webkit-font-smoothing: antialiased;
    padding: .3em .9em .3em .9em;
    font-family: sans-serif;
    font-weight: bold;
}
.vert-horiz-center {
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
}
.vert-center {
    top: 50%;
    transform: translateY(-50%);
}
.horiz-center {
    left: 50%;
    transform: translateX(-50%);
}

.followers-wrapper{
    position: absolute;
    top: 86%;
    z-index: 1;
    box-shadow: 0px 0px 4px 0px #ccc;
    background-color: white;
}

.follower-wrapper{
    height: 32px;
    margin: 3px;
    display: flex;
    cursor: pointer;
}
.follower-wrapper:hover{
    border-color: rgba(0,0,0,.1);
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.followers-wrapper .favatar{
    width: 32px;
    height: 32px;
    /*border: 1px solid black;*/
    background-size: cover !important;

}
.followers-wrapper .fusername{
        color: black;
    padding: 3px;
    text-align: center;
}
.header .L{

}
.header .R{
    margin-left: 92px;
}
.counter-wrapper p{
    cursor: pointer;
}
.thumbnail_generator{
    cursor: default;
}

.hidden {
    display: none;
}

.mt-30 {
    margin-top: 30px;
}