html {
    height: 100%;
}
body {
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 0;
    color: #eee;
    background-color: #2f3337;
}
i.fas, i.fad, i.far {
    text-shadow: none !important;
}
input, select  {
    font-family: 'PT Sans', sans-serif;     
    font-size: 12px;
}
img {
    border: 0;
}
a {
    color: #A0C5FA;
}
.bcontents a, .message a, .warning a{
    color: #2b3277;
}
.block a, #login a {
    color: #a7d2ff;
}
#container {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.browser-warning {
    background-color: #882525;
    color: white;
    padding: 5px;
}
#header {
    height: 122px;
    background-color: #254d88;
    position: relative;
    width: 100%;
}
#logo  {
    align-items: center;
    background-color: #2c5aa1;
    color: white;
    text-decoration: none;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    padding: 30px 15px;
}

#logo .icon {
    background-image: url(/resources/icon.png?2);
    width: 62px;
    min-width: 62px;
    height: 62px;
    margin-right: 5px
}

#logo .text {
    display: flex;
    flex-direction: column;
}

#logo .title {
    font-size: 22px;
}

#logo .subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

#login {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    color: white;
    line-height: 60px;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
#user_loading {
    position: absolute;
    width: 100%;
    height: 24px;
    background-color: rgba(43,44,47,0.5);
    display: none;
}

.sk-fading-circle {
  margin-left: 10px;
  width: 24px;
  height: 24px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

#user_guest, #user_member, #affiliate_link, #login_fields, #login_buttons {
    float: left;
}
#login_fields {
    margin-right: 4px;
}
#login_fields {
    display: none;
}
.pm_icon {
    padding: 0 5px 0 10px;
}
.pm_icon a {
    color: #D38B0D;
    text-decoration: none;    
}
.notification_icon {
    cursor: pointer;
    padding: 0 10px 0 5px;
}
.notification_icon.new {
    color: #D38B0D;
}
.notification_icon.new_update {
    color: #32cd32;
}
.notifications-content {
    height: 400px;
}
.notifications-category {
    display: none;
}
.notifications-tabs {
    border-bottom: 1px solid #2b2c2f;
    display: flex;
    flex-direction: row;
    font-size: 13px;
    height: 30px;
    align-items: center;
}
.notifications-tab {
    background-color: #545558;
    border-right: 1px solid #2b2c2f;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
}
.notifications-tab.enabled {
    background-color: #D38B0D;
}
.notifications-content {
    padding: 10px;
    overflow: auto;
    font-size: 13px;
    line-height: normal;
}
.notification {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2b2c2f;
}
.notifications-clear {
    display: block;
    margin-top: 10px;
    color: #A0C5FA;
    text-decoration: underline;
    cursor: pointer;
}
.notifications-content .delete {
    display: none;
    justify-content: space-between;
    color: #eee;
    cursor: pointer;
}
.notification:hover .delete {
    display: inline-block;
}
.notifications-content img {
    width: 36px;
    height: 36px;
    display: block;
}
.notifications-content .left_img {
    position: relative;
    float: left;
    margin-right: 4px;
}
.notifications-content .right_img {
    position: relative;
    float: right;
    margin-left: 4px;
}
.notification .small {
    font-size: 11px;
    color: lightgray;
}
.notification .date {
    margin-bottom: 4px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.notification .body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.notification .text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#nav {
    display: flex;
    flex: 1;
    font-size: 18px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
}
#header_right {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 0;
}
#nav ul {
    display: flex;
    flex: 1;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
#nav ul li:hover {
    background-color: #2c5aa1;
}
#nav ul li:active, #nav ul li.active, #logo:active {
    background-color: #1e3e6e;
}
#nav ul li.active a{
    text-decoration: none;
    font-weight: bold;
}
#nav ul a {
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    text-decoration: none;
}
#nav ul li a {
    align-items: center;
    display: flex;
    flex: 1;
}
#nav ul li a.chat_link {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: normal;
}
#nav ul li a.chat_link .link {
    line-height: normal;
    margin-top: 18px;
}
#nav ul li a.chat_link .online {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    height: 19px;
}
#nav_right {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    color: white;
    line-height: 72px;
    height: 72px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}
#bar {
    background-color: #2b2c2f;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
    padding-left: 10px;
}
#sequence_info img {
    margin-right: 5px;
}
#main {
    margin: 0 auto;
    display: flex;
}
#page_view #main, #page_playlist #main {
    min-width: 100%;
    position: absolute;
    left: 0;
    top: 122px;
}
#page_ad_left, #page_ad_right {
    height: 600px;
    margin-top: 50px;
    overflow: hidden;
}
@media (min-width: 1330px) {
    #page_ad_left, #page_ad_right {
        width: 120px;
    }
    #page_sequences #main, #page_memberlist #main {
        width: calc((120px + 50px) * 2 + 1077px);
    }
}
@media (min-width: 1420px) {
    #page_ad_left, #page_ad_right {
        width: 160px;
    }
    #page_sequences #main, #page_memberlist #main {
        width: calc((160px + 50px) * 2 + 1077px);
    }
}
@media (min-width: 1705px) {
    #page_ad_left, #page_ad_right {
        width: 300px;
    }
    #page_sequences #main, #page_memberlist #main {
        width: calc((300px + 50px) * 2 + 1077px);
    }
}
#page_ad_left {
    margin-right: 50px;
}
#page_ad_right {
    margin-left: 50px;
}
#sticky_footer_ad_container {
    display: none;
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
    width: 100%;
    height: 90px;
}
#sticky_footer_ad_container:has(iframe) {
    display: block;
}
#page {
    height: 100%;
    text-align: left;
    position: relative;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}
body:not(#page_view,#page_playlist) #page {
    width: 1077px;
}
#page_view #page, #page_playlist #page {
    width: 100%;
}
#page_sequences #page,
#page_memberlist #page,
#page_members #page {
    margin-top: 10px;
}
#page_top {
    width: 100%;
    border-bottom: 1px solid #33373d;
    color: white;
    display: flex;
    flex-direction: column;
}
#page_content {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}
#page_left {
    width: 200px;
    color: white;
}
#page_right {
    max-width: 876px;
    overflow: hidden;
    flex: 1;
}
#sequencer_sidebar {
    border-left: 1px solid #2b2c2f;
    display: flex;
    flex-direction: column;
    width: 0;
    position: relative;
}
.sequencer_sidebar_animate {
    transition: width 200ms ease-in-out;
}
#sequencer_sidebar_resize {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
}
#sequencer_sidebar_title {
    align-items: center;
    background-color: #35363a;
    border-bottom: 6px solid #2b2c2f;
    display: flex;
    justify-content: space-between;
    height: 35px;
    color: #9e9e9e;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}
#sequencer_sidebar_title > span {
    overflow: hidden;
}
#sequencer_sidebar_title > a {
    padding: 5px;
    font-size: 16px;
    color: inherit;
    text-decoration: none;
}
#sidebar_tab_list {
    height: 100%;
    display: flex;
    flex-direction: row;
}
#sidebar_tab_list .sidebar_tab {
    padding: 8px 10px 0px 10px;
    font-size: 12px;
    cursor: pointer;
    max-width: 200px;
}
#sidebar_tab_list .sidebar_tab a {
    margin-left: 10px;
    font-size: 10px;
    color: #9e9e9e;
    text-decoration: none;
}
#sidebar_tab_list .sidebar_tab a:hover,
#sequencer_sidebar .title a:hover {
    color: white;
}
#sequencer_sidebar .chat {
    font-size: 13px;
}
#sidebar_tab_list .selected {
    background-color: #3D3E43;
    color: white;
}
#sidebar_content {
    background-color: #2b2c2f;
    padding: 0 5px 5px 5px;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
#sidebar_content .sidebar_page {
    display: none;
    width: 100%;
    height: 100%;
}
#sidebar_content iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border-top: none;
    border-left: none;
}
.sidebar_chat_header {
    font-size: 11px;
    margin: 2px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
}
.sidebar_chat_frame_container {
    flex: 1;
}
.sidebar_chat_container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.info-sidebar {
    display: flex;
    flex-direction: column;
}
.info-sidebar #comments_frame {
    flex: 1;
}
.comments {
    color: white;
    width: 100%;
}
.comments-header {
    display: flex;
    height: 25px;
    margin-bottom: 10px;
}
.comments-title {
    display: flex;
    font-size: 18px;
    flex: 1;
}
.comments-header-right {
    display: flex;
}
.comments-content {
    display: flex;
    flex-direction: column;
}
.comments-content .comments-loading {
    display: none;
}
.sidebar-button {
    background-color: rgba(211, 211, 211, 0.2);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    padding: 0 6px;
}
.sidebar-button.disabled {
    cursor: default;
    pointer-events: none;
}
.comment-add i {
    margin-left: 5px;
}
.comment-form {
    display: none;
}
.comment-form .comment-reply-to {
    display: none;
}
#sidebar_content textarea {
    width: 100%;
    background: none;
    font-family: inherit;
    font-size: inherit;
    text-indent: 0;
    border: 1px solid rgba(211, 211, 211, 0.2);
    outline: none;
}
.comment-textarea {
    margin-bottom: 10px;
}
.comments .comment-save-loading {
    display: none;
}

.comments-reload {
    margin-left: 10px;
}

.sidebar-button .loader {
    display: none;
    vertical-align: top;
    width: 12px;
    height: 12px;
    margin-top: 6px;
}

.comments-reload {
    cursor: pointer;
}
.comments-reload i {
    margin-top: 6px;

}
.comment-save {
    margin-bottom: 10px;    
}
.help_content {
    background-color: #35363a;
    color: #eee;
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
    padding: 10px;
}
.help_content h1 {
    font-size: 18px;
    margin: 0;
    padding: 0;
}
.member_row {
    display: flex;
    padding: 14px;
    margin-bottom: 5px;
}
.member_row .number {
    font-size: 14px;
    padding: 5px;
    color: lightgray;
}
.member_row .name {
    color: white;
    text-decoration: none;
    display: flex;
    font-size: 14px;
    margin-right: 5px;
    padding: 5px;
    width: 184px;
    min-height: 36px;
    word-wrap: break-word;
}
.member_row .name .details {
    word-wrap: break-word;
    width: 138px;   
}
.member_row .time, .profile_header .time, .profile_header .details {
    font-size: 14px;
    color: lightgray;
}
.member_row .info  {
    min-width: 156px;
    color: lightgray;
}
.member_row .sequences {
    margin-left: 5px;
}
.member_row .sequences img {
    margin-left: 5px;
}
.profile_banner {
    display: flex;
    flex-direction: row;
    background-color: #676e7a;
}
.profile_header {
    padding: 10px;
    min-height: 36px;
    word-wrap: break-word;
    box-sizing: border-box;
    display: flex;
    border-right: 1px solid #33373d;
    flex-direction: column;
}
.profile-buttons {
    margin-top: 5px;
}
.profile-button {
    cursor: pointer;
    border: 1px solid rgba(211, 211, 211, 0.5);
    padding: 5px;
    display: inline-block;
}
.profile-button:not(:first-child) {
    margin-left: 5px;
}
a.profile-button{
    color: inherit;
    text-decoration: none;
}
.profile-button.enabled {
    background-color: #D38B0D;
    border: none;
}
.profile_header_links {
    margin-top: 5px;
}
.profile_header_top {
    flex-direction: row;
    display: flex;
    align-items: center;
}
.profile_header_right {
    flex: 1;
    padding: 10px;
    overflow: auto;
}
.bio {
    font-size: 15px;
    word-break: break-word;
    overflow-y: auto;
    max-height: 185px;
}
#bio-edit {
    float: right;
}
#bio-textarea {
    box-sizing: border-box;
    display: none;
    width: 100%;
    background: none;
    height: 105px;
    font-family: inherit;
    font-size: inherit;
    display: none;
    text-indent: 0;
    border: none;
    outline: none;
    resize: none;
}
#bio-save {
    display: none;
    font-size: 18px;
    cursor: pointer;
    margin-top: 5px;
    color: #lightgray;
    width: 18px;
    height: 18px;
}
#bio-loading {
    display: none;
    margin-top: 5px;
}
.bio::-webkit-scrollbar,  #bio-textarea::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.bio::-webkit-scrollbar-track, .bio::-webkit-scrollbar-corner,
#bio-textarea::-webkit-scrollbar-track, #bio-textarea::-webkit-scrollbar-corner {
    background-color: transparent;
}
.bio::-webkit-scrollbar-thumb, #bio-textarea::-webkit-scrollbar-thumb {
    background: lightgray;
}
.bio::-webkit-scrollbar-thumb:hover, #bio-textarea::-webkit-scrollbar-thumb:hover {
    background: white;
}
.profile_header .name {
    font-size: 18px;
    color: white;
}
.char {
    vertical-align: middle;
    margin-right: 10px;
    width: 36px;
    height: 36px;
}
.profile_header .char {
    width: 100px;
    height: 100px;
}
.preview_large {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-size: 100px;
    vertical-align: top;
    margin-right: 2px;
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview_large .title {
    display: block;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    width: 90px;
    height: 90px;
    text-shadow: 1px 1px 0px #000;
}
.preview_large .delete {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 16px;
    height: 16px;
    color: white;
}
.preview_large .delete, .playlist_preview_sequence_wrapper span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}
.add_featured {
    position: relative;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    cursor: pointer;
}
.add_featured span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 16px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.6);
}
.block {
    color: #1b1b1b;
    margin: 10px auto;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
}
#page_left .block, #page_left .bcontents{
    width: 200px;
}
#page_right .block, #page_right .bcontents{
    width: 808px;
}
.btitle {
    position: relative;
    background-color: #676e7a;
    border-bottom: 1px solid #33373d;
    color: #eee;
    font-size: 18px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    z-index: 2;
}
.notitle .btitle {
z-index: 1;
}
.notitle .bcontents_text {
    margin-top: -20px;
}
#page_sequences #page_left,
#page_sequences #page_right,
#page_memberlist #page_left,
#page_memberlist #page_right,
#page_members #page_left,
#page_members #page_right {
    background-color: #484f57;
}
#page_sequences #page_left,
#page_memberlist #page_left,
#page_members #page_left {
    border-right: 1px solid #33373d;
}
.left_column {
    margin-top: 10px;
}
.right_column {
    color: white;
}
#page_sequences .right_column,
#page_members .right_column {
    margin: 9px;
}

#page_sequences .right_column .pagelinks,
#page_members .right_column .pagelinks {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
}
.right_column .pagelinks {
    margin-top: 10px;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    background-color: #5b626c;
}
#page_top .block {
    width: 100%;
    margin: 0;
    box-shadow: none;
}
#page_top .btitle {
    border-top: 1px solid #33373d;
}
#page_top .bcontents {
    width: auto;
}
form.search {
    padding: 5px;
    border-bottom: 1px solid #33373d;
    display: flex;
}
input[type="text"][name="search"] {
    flex: 1;
    margin-right: 5px;
    background: none;
    border: none;
    border-bottom: 1px solid #676e7a;
    color: white;
    text-indent: 0;
    font-size: 14px;
}
input[name="search"]:focus {
    border-bottom: 1px solid white;  
    outline: none;
}
form.search button {
    background: none;
    cursor: pointer;
    color: white;
    border: none
}
#page_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 36px;
    width: 100%;
    font-size: 13px;
    box-sizing: border-box;
}
#page_left ul:not(:last-child){
    border-bottom: 1px solid #33373d;
}
#page_left ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#page_left ul li a {
    display: block;
}

#page_left ul li a.active {
    color: white;
}

#page_left ul li a i {
    margin-left: 10px;
    margin-right: 10px;
}

#page_left ul li a.active {
   font-weight: bold;
   background-color: #5b626c;
}

.bcontents {
    width: 808px;
    position: relative;
    z-index: 1;
    background-color: #484f57;
}
.bcontents_t, table {
    color: white;
}
.bcontents_t {
    padding: 8px;
}
.bcontents_t p {
    margin: 0;
}
#intro p {
    margin-top: 20px;
}
.bcontents_b {
    height: 22px;
    width: 100%;
}   
#login form {
    margin: 0;
    padding: 0;
    margin-left: 5px;
    margin-top: -2px;
    display: inline-block;
    height: 40px;
}
.preview {
    width: 64px;
    height: 64px;
    display: block;
    float: left;
    margin: 1px;
    position: relative;
}
.preview a, .preview .image {
    position: absolute;
    width: 64px;
    height: 64px;    
}
.preview .image {
    filter: sepia(100%) saturate(450%)
}
.preview:hover .image {
    filter: none;
}
.preview .info {
    color: white;
    font-family: silkscreen;
    font-size: 8px;
    font-smooth: never;
    -webkit-font-smoothing : none;
    letter-spacing: -1px;
    position: absolute;
    bottom: 4px;
    left: 4px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

.clear:before, .clear:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clear:after { clear: both; }   
.clear { zoom: 1; }

.block h1 {
    color: #eee;
    border-bottom: 1px solid #e19100;
}
input[type="submit"], a.linkbutton, input[type="button"], .pagination_page, .pagination_previous, .pagination_next, .pagination_first, .pagination_current, .pagination_last{
    display: inline-block;
    padding: 4px;
    border: 1px solid #252628;
    background-color: #3a3c3e;
    color: white;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}
.pagebutton {
    background-color: #676e7a;
    border-radius: 50%;
    display: inline-flex;
    padding: 4px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}
#bar .linkbutton, #bar input{
    padding: 0 5px;
    border: 0;
    height: 20px;
    line-height: 20px;
    margin-top: 2px;
}
input[type="text"], input[type="password"], textarea {
    background: none;
    border: 1px solid #252628;
    background-color: #3a3c3e;
    color: white;
    text-indent: 6px;
    padding: 4px;
}
textarea {
  box-sizing: border-box;
  resize: none;
}
a.linkbutton img, button img{
    vertical-align: middle;
}
input[type="submit"]:hover, a.linkbutton:hover, input[type="button"]:hover, .pagination_page:hover, .pagination_previous:hover, .pagination_next:hover, .pagination_first:hover, .pagination_current:hover, .pagination_last:hover{
    background-color: #434447;
    border-color: #434447;  
    color: white;
}
.pagination_current {
    border: 1px solid #e19100;
}
input[type="submit"]:active, a.linkbutton:active, input[type="button"]:active, .pagination_page:active, .pagination_previous:active, .pagination_next:active, .pagination_first:active, .pagination_current:active, .pagination_last:active{
    background-color: #3a3c3e;
}
#frame_wrapper {
    background-color: #35363a;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#ad_container {
    flex: 1;
    align-items: flex-end;
}
#nav ul li#ad_container:hover, #nav ul li#ad_container:active {
    background-color: initial;
}
#ad {
    width: 970px;
    height: 90px;
    margin-top: 5px;
    margin-right: 5px;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
}
#footer_ad_wrapper {
    width: 100%;
    height: 100px;
    background-color: #2b2c2f;
    position: relative;
}
#footer_ad {
    width: 970px;
    height: 90px;
    margin: 5px auto;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
}
#footer_ad_close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: #9e9e9e;
    padding: 10px;
}
#chatbar {
    width: 100%;
    height: 35px;
    border-top: 1px solid #444;
    background-color: #eee;
    position: fixed;
    bottom: 0;
    left: 0;
}
#chatbox {
    border:1px solid rgba(107, 107, 107, 0.8);
    background-color: rgba(26, 26, 26, 0.85);
    width: 800px;
    height: 520px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -250px;
    z-index: 500;
}
#chatbox_inner {
    width: 780px;
    margin-top: 5px;
    margin-left: 10px;
    position: relative; 
}
#chatbox_left{
    position: absolute;
    left: 0;
    width: 50%;
    text-align: left;
    height: 20px;
    line-height: 20px;
}
#chatbox_right{
    position: absolute;
    right: 0;
    width: 50%;
    text-align: right;
    height: 20px;
    line-height: 20px;
}
#chatbox_right img {
    vertical-align: middle;
}
#chatbox iframe {
    border: none;
    width: 780px;
    height: 480px;
    margin: 0;
    margin-top: 25px;
    padding: 0;
}
#chatbar iframe {
    border: none;
    overflow: hidden;
}
#chatbutton {
    position: fixed;
    bottom: 5px;
    left: 5px;
}
.close_chat {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #676e7a;
    cursor: pointer;
    font-size: 16px;
    vertical-align: middle;
    text-decoration: none;
}

#import_page, #playlist_page {
    display: flex;
    height: 100%;
}
#instrument_menus {
    background-color: #2f3337;
    color: white;
    overflow-y: auto;
    min-width: 400px;
    font-size: 14px;
    padding: 10px;
}
#instrument_menus table {
    background-color: #484f57;
}
#sequencer_frame {
    flex: 1;
}
#playlist_menu {
    background-color: #35363a;
    color: white;
    overflow-y: auto;
    width: 600px;
    font-size: 14px;
    padding: 10px 8px 2px 8px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2b2c2f;
    transition: width 200ms ease-in-out
}
.playlist_title_wrapper {
    font-size: 20px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.playlist_title_wrapper span {
    flex: 1;
}
#playlist_title {
    word-break: break-word;
}
#playlist_description {
    font-size: 16px;
    color: lightgray;
    word-break: break-word;
    max-height: 3.7em;
}
#playlist_description:hover {
    max-height: 100%;
}
#sequences_list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: #484f57;
    border-collapse: collapse;
    margin-bottom: 5px;
    height: 100%;
    width: 100%;
}
.playlist_row, .playlist_header {
    font-size: 16px;
    align-items: center;
    flex-shrink: 0;
}
.playlist_header {
    display: flex;
    padding: 4px;
    justify-content: space-around;
    align-items: center;
    background-color: #676e7a;
}
.playlist_placeholder {
    min-height: 56px;
    background-color: #A0C5FA;
}
.playlist_row > a {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 8px;
}
.playlist_row:hover {
    background-color: #4f555e;
    cursor: pointer;
}
.playlist_row {
    min-height: 40px;
}
.playlist_header {
    min-height: 20px;
    color: lightgray;
    cursor: default;
}
.playlist_sequence_title_icon {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}
.playlist_sequence_title_text {
    display: flex;
    flex-direction: column;
}
.playlist_sequence_title {
    display: inline;
    font-size: 16px;
    height: 20px;
    overflow: hidden;
    word-break: break-all;
}
.playlist_sequence_subtitle {
    font-size: 14px;
    color: lightgray;
}
.playlist_sequence_subtitle span {
    color: #A0C5FA;
    text-decoration: underline;
}
#playlist_edit_btn {
    display: inline;
    padding-right: 5px;
    color: #adb0bd;
}
.options_column i {
    margin-right: 8px;
}
.options_column i:hover, #playlist_edit_btn:hover, .playlist_control_btn:hover {
    color: white;
    cursor: pointer;
}
.playlist_btn_active {
    color: white;
}
#playlist_title_input, #playlist_description_input {
    display: none;
}
#playlist_title_input {
    width: 200px;
}
#playlist_description_input {
    min-height: 90px;
    width: 90%;
    max-height: 200px;
    resize: vertical;
}
.playlist_delete_btn {
    font-size: 12px;
    padding-top: 5px;
}
.current_sequence {
    background-color: #5b626c !important;
}
#playlist_controls {
    display: flex;
    flex-direction: column;
    background-color: #2b2c2f;
    width: 100%;
    min-height: 115px;
}
.playlist_controls_btn_group {
    width: 100%;
    height: 100%;
    font-size: 20px;
    margin-top: 5px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
}
.playlist_control_btn {
    display: inline;
    color: #adb0bd;
}
#playlist_play_btn {
    color: #D38B0D;
}
.playlist_controls_duration_group {
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#duration_bar {
    width: 75%;
    height: 5px;
    margin: 8px;
    position: relative;
    background-color: #4f555e;
    overflow: hidden;
    cursor: pointer;
}
#duration_bar_progress {
    height: 100%;
    width: 0%;
    position: relative;
    background-color: #03a9f5;
}
#duration_time_current, #duration_time_end {
    color: #adb0bd;
    font-size: 12px;
}
.add_sequence_btn {
    line-height: 40px;
    overflow: visible;
}
#add_sequence {
    display: flex;
    justify-content: space-around;
    padding: 8px;
}
.deleted_sequence {
    pointer-events: none;
}
.deleted_sequence .num_column, .deleted_sequence .title_column, .deleted_sequence .duration_column {
    color: lightgray !important;
    opacity: 50%;
}
.playlist_preview {
    display: inline-flex;
    flex-direction: column;
    height: 155px;
    width: 155px;
    margin-bottom: 4px;
    margin-right: 3px;
    cursor: pointer;
    vertical-align: top;
    position: relative;
}
.playlist_preview a {
    text-decoration: none;
}
.playlist_preview_thumb {
    background-color: #000;
    width: 155px;
    height: 155px;
    background-repeat: no-repeat;
    background-position: center;
}
.playlist_preview_sequence_thumb {
    width: 77.5px;
    height: 77.5px;
}
.playlist_preview_sequence_wrapper {
    width: 155px;
    height: 155px;
    background-color: black;
    color: white;
    display: grid;
    position: relative;
}
.playlist_preview_sequence_wrapper span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 16px;
    line-height: 16px;
    padding: 4px;
}
.playlist_preview_small {
    width: 46px;
    height: 46px;
    background-color: black;
    margin-right: 10px;
    position: relative;
}
.playlist_preview_small .playlist_sequence {
    width: 23px;
    height: 23px;
    display: inline-block;
    background-size: contain;
}
#playlist_preview_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#playlist_preview_small_icon {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #adb0bd;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
#playlist_preview_loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;    
}
#playlist_preview_loading .loader {
    flex: none;
}
.playlist_preview_small:hover #playlist_preview_small_icon {
    display: flex;
}
#playlist_image_file {
    display: none;
}
.seq1 {
    grid-column: 1;
    grid-row: 1;
}
.seq2 {
    grid-column: 2;
    grid-row: 1;
}
.seq3 {
    grid-column: 1;
    grid-row: 2;
}
.seq4 {
    grid-column: 2;
    grid-row: 2;
}
.playlist_preview:hover .playlist_preview_title {
    display: flex;
}
.playlist_preview_title {
    height: 50px;
    background-color: rgba(0, 0, 0, 0.65);
    color: white;
    font-size: 14px;
    padding-left: 3px;
    padding-right: 3px;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 1;
}
#playlist_controls_playing_group {
    padding-left: 8px;
    padding-top: 8px;
    padding-right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.playlist_playing_left {
    width: 460px;
    overflow: hidden;
}
.playlist_playing_left > a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    width: 100%;
}
.playlist_playing_title {
    color: lightgray;
    font-size: 12px;
}
#playlist_playing_sequence {
    color: whitesmoke;
    font-size: 20px;
    height: 26px;
    display: block;
    word-break: break-all;
}
.playlist_controls_top {
    color: lightgray;
    display: flex;
    align-items: center;
    font-size: 18px;
}
.playlist_controls_top > i {
    margin-right: 5px;
}
#like_btn {
    display: none;
    margin-right: 10px;
    cursor: pointer;
}
#like_btn:hover {
    color: white;
}
#like_btn.active {
    color: salmon;
}
.num_column {
    color: lightgray;
    width: 24px;
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.title_column {
    height: 100%;
    width: 100%;
    display: flex;
}
.duration_column {
    color: lightgray;
    width: 50px;
    text-align: right;
    margin-right: 12px;
}
.options_column {
    width: 20px;
    color: #adb0bd;
    text-align: center;
    pointer-events: all;
}
.options_column i {
    width: 100%;
}

#CCPA_opt_out {
    bottom: 0 !important;
}

.chat {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 15px;    
  padding: 4px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.chat:first-child {
    padding-top: 0;
}
.comments .name {
    font-weight: bold;
}
.chat a {
    text-decoration: none;
    color: #039be5;
}
.date, .date a, .reply_text, .reply_text a {
  color: #9e9e9e;
}
.date a:hover, .reply_text a:hover {
  text-decoration: underline;
}
.message {
  color: #eeeeee;
  word-wrap: break-word;
}
.char {
  float: left;
  margin-right: 8px;
  width: 32px;
  height: 32px;
}
.actions {
  display: none;
}
.chat:hover .actions {
  display: inline;
}
.reply_text {
  font-size: 11px;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.comments .actions i {
  cursor: pointer;
  color: #676e7a;
  margin-left: 5px;
}
.comment-replies {
    margin-left: 24px;
    border-left: 1px solid rgba(211, 211, 211, 0.2);
    padding-left: 8px;
    margin-bottom: 8px;
}
.comment-replies-header {
    cursor: pointer;
    user-select: none;
}
.comment-replies-header i {
    margin-right: 4px;
}
.comment-replies-content {
    display: none;
    margin-top: 8px;
}
a.hidden-text {
    background-color: black;
    color: black;
}
a.hidden-text:hover {
    background-color: inherit;
    color: #A0C5FA;
}
.deleted-banner {
    background-color: #2c5aa1;
    opacity: 90%;
    border-left: 3px solid #3266b7;
    padding-left: 4px;
    margin-bottom: 8px;
    height: 20px;
    border-radius: 2px;
}
.deleted-close {
    float: right;
    padding-right: 4px;
    padding-top: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 10px;
}