body {
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 10px;
}

wip {
    position: fixed;
    bottom: 0;
    left: 0;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(/njum//fonts/Oswald_Cyrillic.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(/njum/fonts/Odwald_Vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(/njum/fonts/Oswald_Latin_ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(/njum/fonts/Oswald_latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'power_symbols';
    src: url('/njum/fonts/Unicode_IEC_symbol.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.power{
  font-family: 'power_symbols';
  font-style: normal;
}

body {
    height: 100vh;
    margin: 0;
    background: black;
}

#logo {
    border-radius: 35px;
    background: linear-gradient(to top, #0dd97de0 0%, #000000d9 100%);
    width: 8em;
    vertical-align: middle !important;
}

.w0bm-logo {
    margin: 5px;
    padding-left: 5px;
    margin-right: -5px;
}

.nav-menu {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 100px 100px 100px;
    background: linear-gradient(to top, #0dd97de0 0%, #000000d9 100%);
    border-radius: 35px;
    margin: 5px;
    text-align: center;
    border: 3px solid black;
    width: 20em;
    box-shadow: 0px 0px 0 2px #101010;
}

@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0px;
    padding-left: 0px;
}}

.nav-grid {
    display: grid;
    grid-template-columns: auto 1fr 2fr;
}

.navbar {
    justify-content: flex-start;
    padding: 0;
}

#bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(100px);
filter: blur(100px);
transform: translate3d(0, 0, 0);
z-index: -1;
transition: 2s ease;
}

.text-center {
    font-size: 25px;
    font-family: Oswald;
    text-transform: uppercase;
    line-height: 1.5;
    text-shadow: 1px 1px 1px black;
}

a {
    color: white;
}

.w0bm-main {
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    height: inherit;
}

.container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.w0bm-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}


.bg-dark {
	background: black!important;
}

.search-index {
    margin: 10px;
}

.indexedit input, .indexedit select {
    display: none;
}

ul.list-group.list-group-horizontal {
    justify-content: space-evenly;
    background: white;
}

/* experimental */
.video-metadata {
    z-index: 1;
    position: absolute;
    top: 0;
}

.video-metadata-overlay {
    opacity: 1;
    transition: .5s ease-in;
    position: absolute;
    z-index: 1;
    color: white;
    top: 0;
    text-shadow: 1px 1px 1px black;
}

.video-metadata-overlay:hover {
	transition: .5s ease-out;
	opacity: 1;
}

.search-input {
    border: 0;
    border-radius: 5px;
    background: #282828 !important;
}

.dropdown-menu {
  padding: 0;
}

.usernamelogin .passwordlogin {
  background: black;
}

.video-js .vjs-big-play-button {
    display: none;
}
.video-js .vjs-control-bar {
    display: flex;
}

.op-player {
    background: #000;
    font-family: sans-serif;
    line-height: 1.15;
    min-height: auto;
    position: initial;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
}

li.nav-item {
    padding: 5px;
    margin: 5px;
}

* {
    outline: 0 !important;
}

.page-header {
    flex: 1;
}

button#togglebg, button.bg-toggle, button#fav, button#nav-user, button#webm_edit, button#webm_report {
    background: #282828;
    color: white;
    border: 0;
    margin: 5px;
    border-radius: 5px;
    padding: 5px;
    transition: 0s ease;
}

button#togglebg:hover, button.bg-toggle:hover, button#fav:hover, button#nav-user:hover, button#webm_edit:hover, button#webm_report:hover {
  transition: .2s ease-in-out;
  background: #3e3d3d;
}

.slideDownReturn {
  -webkit-animation-name: slideDownReturn;
  animation-name: slideDownReturn;
  animation-duration: .5s; }

@-webkit-keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

.btn-dark:focus, .btn-dark.focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show>.btn-dark.dropdown-toggle:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.row.videonavigation {
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    font-family: "Oswald",sans-serif;
}

.col.video-navigation {
    text-align: center;
}

.col.first-video {
  text-align: start;
}

.col.latest-video {
  text-align: end;
}

.row {
  margin: 0;
}

.spaceInDown {
  -webkit-animation-name: spaceInDown;
  animation-name: spaceInDown; }

@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%); } }

@keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%); } }

@keyframes animate {
0% {
    transform: scale(0);
}
50% {
  transform: scale(1);
}
100% {
    transform: scale(1, 1);
}
}

.animate_content {
  animation: animate .5s ease;
}

.tags.hidden-xs {
    overflow: auto;
}

/*.container-fluid {
    height: 100vh;
}*/

.bootstrap-tagsinput .tag {
    background-color: #375a7f;
        display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;

}

.bootstrap-tagsinput {
    width: 100%;
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: .375rem .75rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    background: rgb(18, 18, 20);
    color: white;
}

.bootstrap-tagsinput {
    width: 100%;
    background: #121214;
    padding: 10px;
    border-radius: .25rem;
    height: auto !important;
}

.tag-col {
  padding: 0;
}

button#submittags {
    margin-top: 10px;
    margin-bottom: 10px;
}

li.nav-link.isSfw, li.nav-link.isNsfw {
    cursor: default;
    margin: 5px;
    padding: 10px;
    align-self: flex-end;
    font-family: "Oswald",sans-serif;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    grid-gap: 35px;
    align-items: stretch;
}

.gallery img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}

li.main-isSfw, li.main-isNsfw {
    position: absolute;
    list-style: none;
    line-height: 0;
}

#dragndrop {
    border: 2px dashed #353434;
    border-radius: 0px;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    padding: 0px;
    background-color: #121214;
    color: #888;
    width: 100%;
    min-height: 150px;
}

#dragndrop-link {
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

#dragndrop-link:hover {
    text-decoration: none;
}

#dragndrop-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    flex-direction: column;
}

#dragndrop-text > video {
    width: 85%;
    margin-top: 5px;
}

.progress {background: rgb(26, 27, 26); border-radius: 0px; height: 20px; width: 85%;}
.progress-bar-custom {background: rgba(47, 196, 47, 1);}
.progress-striped .progress-bar-custom {background-color: rgba(47, 196, 47, 1); background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255, 255, 255, 0.15),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255, 255, 255, 0.15)),color-stop(0.75,rgba(255, 255, 255, 0.15)),color-stop(0.75,transparent),to(transparent))); background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent); background-size: 36px 36px;}

#dragndrop-clear {
    color: red;
}

#dragndrop-clear:hover {
    text-decoration: none;
}

.progress-striped {
    margin-bottom: 0px;
}

.upload-info {
    font-size: 1.5rem;
    font-weight: normal;
    word-break: break-all;
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 5px;
}

.row-upload {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.row-upload > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.form-control {
    background: rgb(18, 18, 20);
    color: #999999;
}

.form-control:focus {
    color: #444;
    background-color: #121214;
    border-color: #739ac200;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
}

input[placeholder="Input tags..."] {
    background: transparent;
    border: 0;
    padding: 0;
    color: white;
}

input#nsfw {
    display: none;
}

label#nsfw {
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -moz-user-select: none;
}

#dragndrop-text > video {
    width: 50%;
    margin-top: 10px;
}

div#dragndrop {
    max-width: 100%;
}

select#category {
    color: #999999;
}

input[type="text"] {
    color: #999999;
}

input#collapsible[type='checkbox'] {
  display: none;
}

.lbl-toggle {
    display: flow-root;
    font-weight: bold;
    font-family: monospace;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

textarea.form-control {
    min-height: 60px !important;
    height: unset !important;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.collapsible-content .content-inner {
/**/
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100%;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

textarea#cinput {
    height: 80px !important;
}

.comment-entry-textarea {
    background: rgba(90, 88, 88, 0.4) none repeat scroll 0 0;
}

#commentForm textarea {
    color: #c8c8c8;
    background: rgba(90, 88, 88, 0.4) none repeat scroll 0 0;
    height: 2.7em;
    resize: vertical;
    -webkit-transition: height 0.8s;
    -moz-transition: height 0.8s;
    transition: height 0.8s;
}

div#comment_tools {
    padding-top: 5px;
}

.panel.panel-default {
    background: rgba(90, 88, 88, 0.4) none repeat scroll 0 0;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: .25rem;
}

.testgrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.xdeh {
    padding: 15px;
}

img.comment_image {
    max-width: 22em;
}

/* Neue Pagination */
.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #161618;
    background-color: #1fb2b0;
    border-color: transparent;
    cursor: default;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: #d4d4d5;
    background-color: #282828;
    border-color: rgb(31, 178, 176);
}

ul.pagination {
    display: flex;
    justify-content: center;
    font-size: 15px;
}

a.badge.badge-sexy {
    background: transparent;
    color: white;
    text-shadow: 1px 1px 1px black;
        font-family: monospace;
}

.ratingarray {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fa-xs {
    font-size: .45em;
    vertical-align: middle;
    margin-right: 5px;
}

a.badge.badge-success.isSfw, a.badge.badge-danger.isNsfw {
    color: white;
    text-shadow: 1px 1px 1px black;
}


.popover {
    max-width: 50%;
}

.toggo.tag-panel-body {
    max-width: 100%;
}

.simplebar-scrollbar:before {
    background: #d0c4c4;
}

.panel-heading-messages {
    display: flex;
    justify-content: space-between;
}

.readall {
        margin-bottom: 0.5rem;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    color: #ffffff;
    background-color: #242424;
    border-color: #000000;
    cursor: not-allowed;
    z-index: 1;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 1;
    color: #ffffff;
    background-color: #333333;
    cursor: default;
    border: 1px solid black;
}

.pagination > li > a, .pagination > li > span {
    color: #ffffff;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 3px 6px;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: rgb(19, 19, 19);
    margin-left: -1px;
    border: 1px solid black;
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: #d4d4d5;
    background-color: rgb(36, 36, 36);
    border-color: rgb(0, 0, 0);
}

.bg-dark {
    background: #282828;
}

.stuck {
    position: fixed;
    bottom: 20px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    width: 320px;
    height: 100%;
    -webkit-animation: fade-in-up .25s ease forwards;
    animation: fade-in-up .25s ease forwards;
    left: 20px;
}
.video video {
  max-width: 100%;
  max-height: 100%;
}

@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}

#videoBox.in { animation: ac 1s; }

.panel.panel-danger {
    background: rgba(90, 88, 88, 0.4) none repeat scroll 0 0;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: .25rem;
    border: 1px dashed red;
    font-style: italic;
    color: lightgrey;
    background: #00000047;
}

/*.col-sm.scrollable:hover {
    background: #00000080;
}*/


section.videowrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.videowrapper iframe,.videowrapper video {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

/** Use .sticky */

.ytvideo .is-sticky, .videoTag .is-sticky {
    position: fixed;
    width: 360px;
    max-width: 640px;
    max-height: 360px;
    height: auto;
    bottom: 0;
        -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
        top: unset;
    left: unset;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.sticky-container__video {
  height: 270px;
  width: 480px;
  left: 0;
  bottom: 0;
  position: fixed;

}
.sticky-container_in-content .sticky-container__video {
  padding-bottom: 56.25%;
  position: relative;
  height: 0; width: auto;
  position: relative;
  bottom: auto; right: auto;
  overflow: hidden;

}
.sticky-container_in-content .sticky-container__video .sticky-container__object {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.commentOpener {
    text-align: center;
    padding: 5px;
}

.card > .badge {
    width: 50px;
}

.card {
    width: unset !important;
}

.commentOpenButton {
        text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    font-family: "Oswald",sans-serif;
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

.container-fluid {
    height: 100%;
}

ul.navbar-nav.mr-auto {
    flex-direction: row;
}

.container-fluid-nav {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

li.safe-for-rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1400px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1000px;
    }
}

.navbar-nav .dropdown-menu {
    position: absolute;
}

div#collapseComments {
    margin-bottom: 45px;
}

div#untenlinks {
    background: #000000d9;
    padding-left: 5px;
    padding-bottom: 5px;
}