@import url(https://fonts.cdns.onelive.me/hankengrotesk/stylesheet.css);
@import url(https://fonts.cdns.onelive.me/metropolis/stylesheet.css);

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
table {
    margin: 0;
    padding: 0;
}

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

body {
    font-family: 'Hanken Grotesk', 'Metropolis', 'Segoe UI', Tahoma, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #2a2a2a;
    background: #f7f8fa;
}

::selection {
    background: #3982D6;
    color: #fff;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
}

h1,
h2,
h3,
h4 {
    font-weight: 200;
    line-height: 1.2;
    color: #1e1e1e;
}

h1 {
    font-size: 34px;
    margin: 0 0 14px;
}

h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 24px 0 10px;
}

h3 {
    font-size: 18px;
    font-weight: 400;
    margin: 18px 0 8px;
}

h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 14px 0 6px;
}

p {
    margin: 0 0 12px;
}

ul,
ol {
    margin: 0 0 12px 22px;
}

a {
    color: #3982D6;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #1F5693;
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid #e6e6e6;
    margin: 24px 0;
}

/* layout shell */

.ol-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.ol-main {
    padding: 26px 0 56px;
    min-height: 380px;
}

.ol-with-sidebar {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.ol-content {
    -ms-flex: 1 1 560px;
    -webkit-flex: 1 1 560px;
    flex: 1 1 560px;
    min-width: 300px;
    padding: 0 12px;
}

.ol-sidebar {
    -ms-flex: 0 1 300px;
    -webkit-flex: 0 1 300px;
    flex: 0 1 300px;
    min-width: 250px;
    padding: 0 12px;
}

.ol-sidebar-nav {
    -ms-flex: 0 1 220px;
    -webkit-flex: 0 1 220px;
    flex: 0 1 220px;
    min-width: 180px;
    padding: 0 12px;
}

/* header */

.ol-header {
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.ol-header-top {
    position: relative;
    padding: 14px 24px 5px;
    max-width: 1160px;
    margin: 0 auto;
    zoom: 1;
}

.ol-header-top:after {
    content: "";
    display: block;
    clear: both;
}

.ol-logo {
    float: left;
    display: inline-block;
    line-height: 30px;
    font-size: 21px;
    font-weight: 200;
    color: #1e1e1e;
    letter-spacing: 0.2px;
}

.ol-logo img {
    width: 150px;
}

/* Inline wordmark: every glyph uses currentColor, so the whole logo recolours
   to each theme's accent (see ol-themes.css) instead of shipping a fixed image. */
.ol-logo-svg {
    display: block;
    width: auto;
    height: 26px;
    color: #3982D6;
}

.ol-logo b {
    font-weight: 600;
    color: #3982D6;
}

.ol-logo:hover,
.ol-logo:focus {
    text-decoration: none;
    color: #1e1e1e;
}

.ol-header-tools {
    float: right;
    zoom: 1;
}

.ol-header-tools>* {
    float: left;
    margin-left: 14px;
}

.ol-search {
    position: relative;
    margin-top: 1px;
}

.ol-search input {
    width: 190px;
    padding: 4px 10px;
    font: inherit;
    font-size: 13px;
    color: #2a2a2a;
    background: #f2f3f5;
    border: 2px solid #e0e2e6;
    border-radius: 0;
}

.ol-search input:focus {
    border-color: #3982D6;
    outline: 0;
    background: #fff;
}

/* icons */

.ol-icon-btn {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    color: #555;
    cursor: pointer;
}

.ol-icon-btn svg {
    vertical-align: middle;
}

.ol-icon-btn:hover,
.ol-icon-btn:focus {
    color: #3982D6;
    text-decoration: none;
}

.ol-badge {
    display: none;
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    color: #fff;
    background: #D64339;
    border-radius: 9px;
    text-align: center;
}

.ol-badge.show {
    display: inline-block;
}

/* current user chip + presence */

.ol-me {
    position: relative;
    line-height: 32px;
    font-size: 14px;
}

.ol-me-chip {
    cursor: pointer;
    color: #2a2a2a;
    white-space: nowrap;
}

.ol-me-chip:hover {
    text-decoration: none;
    color: #3982D6;
}

.ol-me-chip .ol-avatar {
    vertical-align: middle;
    margin-right: 7px;
}

.ol-me-name {
    vertical-align: middle;
}

.ol-me-caret {
    font-size: 9px;
    color: #999;
    margin-left: 5px;
    vertical-align: middle;
}

.ol-me-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    min-width: 210px;
    background: #fff;
    border: 1px solid #d2d2d2;
    -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    line-height: 1.5;
}

.ol-me-menu.show {
    display: block;
}

.ol-me-menu a,
.ol-me-menu .ol-menu-item {
    display: block;
    padding: 7px 16px;
    color: #444;
    font-size: 14px;
    cursor: pointer;
}

.ol-me-menu a:hover,
.ol-me-menu .ol-menu-item:hover {
    background: #ebf3fb;
    color: #1F5693;
    text-decoration: none;
}

.ol-me-menu .ol-menu-sep {
    border-top: 1px solid #eee;
    margin: 6px 0;
}

.ol-me-menu .ol-menu-label {
    padding: 4px 16px 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #999;
}

.ol-presence-choice .ol-presence-dot {
    margin-right: 8px;
}

.ol-presence-choice.sel {
    font-weight: 600;
}

/* primary nav */

.ol-navbar {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.ol-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    zoom: 1;
}

.ol-nav:after {
    content: "";
    display: block;
    clear: both;
}

.ol-nav>li {
    float: left;
    position: relative;
    margin-right: 6px;
}

.ol-nav>li>a {
    display: block;
    padding: 4px 13px 6px;
    color: #555;
    font-size: 15px;
    border-bottom: 3px solid transparent;
}

.ol-nav>li>a:hover,
.ol-nav>li>a:focus {
    color: #3982D6;
    text-decoration: none;
    border-bottom-color: #3982D6;
}

.ol-nav>li.ol-current>a {
    border-bottom-color: #3982D6;
    color: #1e1e1e;
    font-weight: 600;
}

.ol-nav .ol-nav-badge {
    display: none;
    min-width: 16px;
    padding: 0 4px;
    margin-left: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: #fff;
    background: #D64339;
    border-radius: 8px;
    text-align: center;
}

.ol-nav .ol-nav-badge.show {
    display: inline-block;
}

.ol-nav-toggle {
    display: none;
    float: right;
    background: transparent;
    border: 2px solid #3982D6;
    border-radius: 0;
    color: #3982D6;
    font: inherit;
    font-size: 14px;
    padding: 3px 14px;
    margin: 2px 0 0 16px;
    cursor: pointer;
}

.ol-nav-toggle:hover,
.ol-nav-toggle:focus {
    background: #3982D6;
    color: #fff;
}

/* accent band */

.ol-band {
    background: #3982D6;
    color: #fff;
}

.ol-band-inner {
    padding: 22px 0 20px;
}

.ol-band h1 {
    color: #fff;
    font-size: 30px;
    margin: 0;
}

.ol-band .ol-band-sub {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
}

.ol-band a,
.ol-band-inner a {
    color: #fff;
    text-decoration: underline;
}

.ol-band a:hover,
.ol-band a:focus,
.ol-band-inner a:hover,
.ol-band-inner a:focus {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
}

.ol-breadcrumb-band {
    font-size: 13px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.8);
}

.ol-band-inner .ol-breadcrumb-band a {
    color: rgba(255, 255, 255, 0.9);
}

/* buttons */

.ol-btn {
    display: inline-block;
    padding: 6px 22px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #2a2a2a;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: #e5e5e5;
    border: 2px solid #e5e5e5;
    border-radius: 0;
}

.ol-btn:hover,
.ol-btn:focus {
    background: #d8d8d8;
    border-color: #d8d8d8;
    color: #1e1e1e;
    text-decoration: none;
}

.ol-btn:active {
    background: #ccc;
    border-color: #ccc;
}

.ol-btn-primary {
    color: #fff;
    background: #3982D6;
    border-color: #3982D6;
}

.ol-btn-primary:hover,
.ol-btn-primary:focus {
    color: #fff;
    background: #2E6DB5;
    border-color: #2E6DB5;
}

.ol-btn-primary:active {
    background: #275C99;
    border-color: #275C99;
}

.ol-btn-sm {
    padding: 3px 12px;
    font-size: 13px;
}

.ol-btn[disabled],
.ol-btn.ol-disabled {
    opacity: 0.55;
    cursor: default;
}

/* forms */

.ol-field {
    margin-bottom: 14px;
}

.ol-field label,
.ol-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 3px;
}

.ol-input,
.ol-select,
.ol-textarea {
    width: 100%;
    max-width: 380px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    color: #2a2a2a;
    background: #fff;
    border: 2px solid #b9bdc4;
    border-radius: 0;
}

.ol-select {
    max-width: 240px;
}

.ol-textarea {
    max-width: none;
    min-height: 80px;
    resize: vertical;
}

.ol-input.full,
.ol-input-full {
    max-width: none;
}

.ol-input:focus,
.ol-select:focus,
.ol-textarea:focus {
    border-color: #3982D6;
    outline: 0;
}

.ol-help {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
}

.ol-check label {
    display: inline;
    font-size: 14px;
    color: #2a2a2a;
}

/* cards */

.ol-card {
    background: #fff;
    border: 1px solid #e3e5e8;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.ol-card-title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
    font-weight: 500;
    zoom: 1;
}

.ol-card-title:after {
    content: "";
    display: block;
    clear: both;
}

.ol-card-title .ol-title-link {
    float: right;
    font-size: 13px;
    font-weight: 400;
}

.ol-sidebox {
    border-left: 4px solid #3982D6;
    background: #fff;
    border-top: 1px solid #e3e5e8;
    border-right: 1px solid #e3e5e8;
    border-bottom: 1px solid #e3e5e8;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
}

.ol-sidebox h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
}

.ol-sidebox ul {
    list-style: none;
    margin: 0;
}

.ol-sidebox li {
    padding: 3px 0;
}

.ol-note {
    background: #f0f6fd;
    border: 1px solid #d5e5f7;
    padding: 10px 14px;
    font-size: 13px;
    color: #3d5876;
    margin-bottom: 20px;
}

/* side nav (settings pages) */

.ol-sidenav {
    list-style: none;
    margin: 0 0 22px;
}

.ol-sidenav li {
    border-bottom: 1px solid #eceef1;
}

.ol-sidenav li:last-child {
    border-bottom: 0;
}

.ol-sidenav a {
    display: block;
    padding: 8px 4px;
    color: #444;
}

.ol-sidenav a:hover {
    color: #3982D6;
    text-decoration: none;
}

.ol-sidenav a.sel {
    color: #1e1e1e;
    font-weight: 600;
    border-left: 3px solid #3982D6;
    padding-left: 9px;
}

.ol-sidenav-label {
    display: block;
    margin: 14px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #999;
}

/* avatars */

.ol-avatar {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    vertical-align: middle;
}

.ol-avatar img,
.ol-avatar .ol-avatar-initial {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ol-avatar .ol-avatar-initial {
    background: #5b6b7c;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 40px;
    text-transform: uppercase;
}

.ol-avatar.sm {
    width: 30px;
    height: 30px;
}

.ol-avatar.sm .ol-avatar-initial {
    font-size: 13px;
    line-height: 26px;
}

.ol-avatar.lg {
    width: 96px;
    height: 96px;
}

.ol-avatar.lg .ol-avatar-initial {
    font-size: 38px;
    line-height: 92px;
}

/* presence */

.ol-presence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b8b8b8;
    vertical-align: middle;
}

.ol-avatar .ol-presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    display: none;
}

.ol-avatar.sm .ol-presence-dot {
    width: 10px;
    height: 10px;
}

.ol-avatar.ol-p-online img,
.ol-avatar.ol-p-online .ol-avatar-initial {
    border-color: #5DA713;
}

.ol-avatar.ol-p-away img,
.ol-avatar.ol-p-away .ol-avatar-initial {
    border-color: #E8A317;
}

.ol-avatar.ol-p-busy img,
.ol-avatar.ol-p-busy .ol-avatar-initial {
    border-color: #D64339;
}

.ol-avatar.ol-p-offline img,
.ol-avatar.ol-p-offline .ol-avatar-initial {
    border-color: #c3c7cc;
}

.ol-avatar.ol-p-online .ol-presence-dot {
    display: block;
    background: #5DA713;
}

.ol-avatar.ol-p-away .ol-presence-dot {
    display: block;
    background: #E8A317;
}

.ol-avatar.ol-p-busy .ol-presence-dot {
    display: block;
    background: #D64339;
}

.ol-avatar.ol-p-offline .ol-presence-dot {
    display: block;
    background: #b8b8b8;
}

.ol-p-label-online {
    color: #47710D;
}

.ol-p-label-away {
    color: #A97403;
}

.ol-p-label-busy {
    color: #A52D24;
}

.ol-p-label-offline {
    color: #767676;
}

.ol-presence-dot.online {
    background: #5DA713;
}

.ol-presence-dot.away {
    background: #E8A317;
}

.ol-presence-dot.busy {
    background: #D64339;
}

.ol-presence-dot.offline,
.ol-presence-dot.invisible {
    background: #b8b8b8;
}

/* feed / posts */

.ol-feed-item {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f2;
}

.ol-feed-item:last-child {
    border-bottom: 0;
}

.ol-feed-avatar {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 12px;
}

.ol-feed-body {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    font-size: 14px;
}

.ol-feed-head {
    margin-bottom: 2px;
}

.ol-feed-head strong {
    font-weight: 600;
}

.ol-feed-age {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.ol-post-body {
    margin: 4px 0 6px;
    word-wrap: break-word;
}

.ol-post-images {
    margin: 8px 0 4px;
    zoom: 1;
}

.ol-post-images:after {
    content: "";
    display: block;
    clear: both;
}

.ol-post-images a {
    float: left;
    display: block;
    width: 138px;
    height: 138px;
    margin: 0 8px 8px 0;
    overflow: hidden;
    background: #f0f1f3;
    text-align: center;
}

.ol-post-images img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.ol-post-file {
    margin: 4px 0;
    padding: 6px 10px;
    background: #f4f6f8;
    border: 1px solid #e5e8eb;
    font-size: 13px;
}

.ol-post-actions {
    margin-top: 6px;
    font-size: 13px;
}

.ol-post-actions a {
    margin-right: 14px;
    cursor: pointer;
}

.ol-like-count {
    color: #888;
    margin-right: 14px;
}

.ol-like-count:empty {
    margin-right: 0;
}

/* comment-count link shown under a feed post */

.ol-comment-link {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
    cursor: pointer;
}

.ol-comment-link svg {
    margin-right: 5px;
    opacity: 0.8;
}

.ol-comment-link:hover {
    color: #3982D6;
    text-decoration: none;
}

/* comments section (single-post page) */

.ol-comments-card {
    margin-top: 14px;
}

.ol-comments-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.ol-comment {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 12px 0;
    font-size: 13px;
}

.ol-comment-thread {
    border-bottom: 1px solid #eef0f2;
}

.ol-comment-thread:last-child {
    border-bottom: 0;
}

.ol-comment-replies {
    margin-left: 40px;
    border-left: 2px solid #eef0f2;
    padding-left: 12px;
}

.ol-comment-avatar {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 10px;
}

.ol-comment-main {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

.ol-comment-head {
    margin-bottom: 2px;
}

.ol-comment-head strong {
    font-weight: 600;
}

.ol-comment-body {
    word-wrap: break-word;
}

.ol-comment-meta {
    color: #999;
    font-size: 12px;
    margin-left: 8px;
}

.ol-comment-del {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 0 4px;
    line-height: 1;
    font-size: 18px;
    color: #b6bbc1;
    cursor: pointer;
}

.ol-comment-del:hover {
    color: #D64339;
    text-decoration: none;
}

.ol-comment-actions {
    margin-top: 3px;
}

.ol-comment-reply-link {
    font-size: 12px;
    cursor: pointer;
}

.ol-reply-form {
    margin: 4px 0 10px;
}

.ol-comment-form {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin-top: 12px;
}

.ol-comment-form input[type=text] {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    border: 2px solid #d6dade;
    border-radius: 0;
}

.ol-comment-form input[type=text]:focus {
    border-color: #3982D6;
    outline: 0;
}

.ol-comment-form button {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 0 8px;
}

.ol-empty {
    padding: 22px 10px;
    color: #888;
    font-size: 14px;
    text-align: center;
}

.ol-feed-fresh {
    display: none;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 12px;
    font: inherit;
    font-size: 13px;
    color: #1F5693;
    background: #e8f1fb;
    border: 1px solid #cadff5;
    cursor: pointer;
    text-align: center;
}

.ol-feed-fresh.show {
    display: block;
}

/* composer */

.ol-composer-toolbar {
    margin-bottom: 8px;
}

.ol-composer-toolbar button {
    font: inherit;
    font-size: 13px;
    min-width: 30px;
    padding: 3px 8px;
    margin-right: 4px;
    background: #f2f3f5;
    border: 1px solid #d9dce0;
    cursor: pointer;
}

.ol-composer-toolbar button:hover {
    background: #e6eef8;
    border-color: #3982D6;
}

.ol-composer-toolbar button svg {
    display: block;
    margin: 0 auto;
}

.ol-composer-toolbar select,
.ol-composer-toolbar input[type=color] {
    font: inherit;
    font-size: 13px;
    padding: 2px 4px;
    margin-right: 4px;
    border: 1px solid #d9dce0;
    background: #fff;
    vertical-align: middle;
}

.ol-composer-input {
    min-height: 64px;
    padding: 10px 12px;
    border: 2px solid #d6dade;
    background: #fff;
    font-size: 14px;
    word-wrap: break-word;
}

.ol-composer-input:focus {
    border-color: #3982D6;
    outline: 0;
}

.ol-composer-input:empty:before {
    content: attr(data-placeholder);
    color: #a5a9ae;
}

.ol-composer-actions {
    margin-top: 10px;
}

.ol-composer-actions .ol-attach {
    margin-left: 14px;
    font-size: 13px;
    cursor: pointer;
}

.ol-attach-list {
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.ol-attach-list span {
    display: inline-block;
    background: #eef2f6;
    border: 1px solid #dbe2e8;
    padding: 2px 8px;
    margin: 2px 6px 2px 0;
}

/* people / contact rows */

.ol-person-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f2;
}

.ol-person-row:last-child {
    border-bottom: 0;
}

.ol-person-row .ol-avatar {
    margin-right: 12px;
}

.ol-person-main {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

.ol-person-name {
    font-weight: 600;
    font-size: 14px;
}

.ol-person-sub {
    font-size: 12px;
    color: #888;
}

.ol-person-actions {
    font-size: 13px;
    white-space: nowrap;
}

.ol-person-actions a {
    margin-left: 12px;
    cursor: pointer;
}

/* group list rows */

.ol-group-row .ol-person-main {
    line-height: 1.3;
}

.ol-group-row .ol-person-name {
    font-size: 15px;
}

.ol-group-row .ol-person-sub {
    margin-top: 1px;
}

.ol-group-desc {
    margin-top: 3px;
    font-size: 13px;
    color: #555;
}

/* group members */

.ol-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 18px;
}

.ol-member {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f2;
}

.ol-member .ol-avatar {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 10px;
}

.ol-member-main {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    line-height: 1.3;
}

.ol-member-name {
    font-weight: 600;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ol-member-role {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: #5b6b7c;
    padding: 0 6px;
    line-height: 16px;
}

.ol-member-actions {
    margin-top: 4px;
    font-size: 12px;
}

.ol-member-actions a {
    margin-right: 12px;
    cursor: pointer;
}

.ol-member-invite {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.ol-member-invite .ol-input {
    max-width: 320px;
}

/* friend grid on profiles */

.ol-friend-grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ol-friend-tile {
    -ms-flex: 0 0 33.33%;
    -webkit-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    word-wrap: break-word;
}

.ol-friend-tile a {
    display: block;
    margin-top: 4px;
}

/* photo grid */

.ol-photo-grid {
    zoom: 1;
}

.ol-photo-grid:after {
    content: "";
    display: block;
    clear: both;
}

.ol-photo-grid a {
    float: left;
    display: block;
    width: 31%;
    margin: 0 2% 10px 0;
    height: 110px;
    overflow: hidden;
    background: #f0f1f3;
}

.ol-photo-grid a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.ol-photo-grid.wide a {
    width: 23%;
    height: 150px;
}

/* pagination */

.ol-pagination {
    margin: 18px 0 4px;
    text-align: center;
    font-size: 14px;
}

.ol-pagination a,
.ol-pagination span {
    display: inline-block;
    min-width: 30px;
    padding: 4px 8px;
    margin: 0 2px;
    border: 1px solid #dfe2e6;
    background: #fff;
    color: #3982D6;
}

.ol-pagination a:hover {
    background: #ebf3fb;
    text-decoration: none;
}

.ol-pagination .ol-page-current {
    background: #3982D6;
    border-color: #3982D6;
    color: #fff;
    font-weight: 600;
}

.ol-pagination .ol-page-gap {
    border: 0;
    background: transparent;
    color: #999;
}

.ol-showmore {
    display: block;
    width: 100%;
    padding: 9px 12px;
    margin-top: 12px;
    font: inherit;
    font-size: 14px;
    color: #3982D6;
    background: #f4f8fd;
    border: 1px solid #d5e5f7;
    cursor: pointer;
    text-align: center;
}

.ol-showmore:hover {
    background: #e8f1fb;
}

.ol-showmore[disabled] {
    color: #999;
    cursor: default;
}

.ol-loadmore-wrap {
    text-align: center;
    padding: 12px 0 2px;
}

.ol-loadmore {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
    color: #3982D6;
    border: 1px solid #d5e5f7;
    background: #f4f8fd;
}

.ol-loadmore:hover {
    background: #e8f1fb;
}

/* notifications */

.ol-notif-panel {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 300;
    width: 330px;
    background: #fff;
    border: 1px solid #d2d2d2;
    -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    text-align: left;
    line-height: 1.5;
}

.ol-notif-panel.show {
    display: block;
}

.ol-notif-head {
    padding: 9px 14px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    zoom: 1;
}

.ol-notif-head:after {
    content: "";
    display: block;
    clear: both;
}

.ol-notif-head .ol-see-all {
    float: right;
}

.ol-notif-row {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 13px;
    color: #333;
}

.ol-notif-row:hover {
    background: #f4f8fd;
    text-decoration: none;
}

.ol-notif-row.unread {
    background: #eef5fd;
}

.ol-notif-row:last-child {
    border-bottom: 0;
}

.ol-notif-empty {
    padding: 18px 14px;
    color: #888;
    font-size: 13px;
}

.ol-notif-page-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f2;
}

.ol-notif-page-row.unread {
    background: #f2f8fe;
}

.ol-notif-page-row .ol-avatar {
    margin: 0 12px 0 6px;
}

.ol-notif-page-body {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    font-size: 14px;
}

.ol-notif-page-age {
    font-size: 12px;
    color: #999;
}

/* toast */

.ol-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 300px;
    max-width: 88%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.ol-toast {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #cfd4da;
    border-left: 4px solid #3982D6;
    -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 12px 32px 12px 14px;
    font-size: 13px;
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-transition: opacity 0.18s ease, -webkit-transform 0.18s ease;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ol-toast+.ol-toast {
    margin-top: 10px;
}

.ol-toast.show {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.ol-toast .ol-toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.ol-toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    color: #8a9096;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ol-toast-close:hover {
    color: #2a2a2a;
}

/* moderator alert banner */

.ol-modalert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #B3261E;
    color: #fff;
    padding: 12px 44px 12px 20px;
    font-size: 14px;
    text-align: center;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ol-modalert.show {
    display: block;
}

.ol-modalert strong {
    margin-right: 8px;
}

.ol-modalert-close {
    position: absolute;
    right: 14px;
    top: 10px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 2px 6px;
}

/* messages chat */

.ol-chat {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    min-height: 480px;
    background: #fff;
    border: 1px solid #e3e5e8;
}

.ol-chat-list {
    -ms-flex: 0 0 290px;
    -webkit-flex: 0 0 290px;
    flex: 0 0 290px;
    border-right: 1px solid #e8eaed;
    overflow-y: auto;
    max-height: 640px;
}

.ol-conv {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid #f0f1f3;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ol-conv:hover {
    background: #f4f8fd;
}

.ol-conv.sel {
    background: #e8f1fb;
    border-left: 3px solid #3982D6;
    padding-left: 11px;
}

.ol-conv .ol-avatar {
    margin-right: 10px;
}

.ol-conv-main {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

.ol-conv-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-conv-last {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-conv-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    color: #fff;
    background: #D64339;
    border-radius: 9px;
    text-align: center;
}

.ol-chat-pane {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

.ol-chat-head {
    padding: 12px 16px;
    border-bottom: 1px solid #e8eaed;
    zoom: 1;
}

.ol-chat-head:after {
    content: "";
    display: block;
    clear: both;
}

.ol-chat-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    float: left;
}

.ol-chat-head .ol-chat-tools {
    float: right;
    font-size: 13px;
}

.ol-chat-head .ol-chat-tools a {
    margin-left: 12px;
    cursor: pointer;
}

.ol-chat-members {
    clear: both;
    font-size: 12px;
    color: #888;
}

.ol-chat-scroll {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 14px 16px;
    max-height: 440px;
    min-height: 300px;
}

.ol-msg {
    margin-bottom: 10px;
    zoom: 1;
}

.ol-msg:after {
    content: "";
    display: block;
    clear: both;
}

.ol-msg-bubble {
    display: inline-block;
    max-width: 78%;
    padding: 7px 12px;
    background: #f1f3f5;
    font-size: 14px;
    word-wrap: break-word;
}

.ol-msg.mine {
    text-align: right;
}

.ol-msg.mine .ol-msg-bubble {
    background: #dcebfb;
    text-align: left;
}

.ol-msg-meta {
    font-size: 11px;
    color: #98a0a8;
    margin-top: 2px;
}

.ol-msg-author {
    font-size: 12px;
    font-weight: 600;
    color: #667;
    margin-bottom: 1px;
}

.ol-msg-quote {
    display: block;
    border-left: 3px solid rgba(0, 0, 0, 0.22);
    padding: 1px 8px;
    margin-bottom: 5px;
    font-size: 12px;
    opacity: 0.85;
}

.ol-msg-quote-name {
    display: block;
    font-weight: 600;
}

.ol-msg-quote-text {
    display: block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-msg-foot {
    margin-top: 2px;
}

.ol-msg-reply {
    font-size: 11px;
    cursor: pointer;
    margin-right: 8px;
    opacity: 0;
    -webkit-transition: opacity 0.12s ease;
    transition: opacity 0.12s ease;
}

.ol-msg:hover .ol-msg-reply,
.ol-msg-reply:focus {
    opacity: 1;
}

.ol-reply-bar {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 12px;
    border-top: 1px solid #e8eaed;
    background: #f6f8fa;
    font-size: 12px;
}

.ol-reply-bar-body {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

.ol-reply-bar-label {
    color: #667;
}

.ol-reply-bar-snippet {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #98a0a8;
}

.ol-reply-bar-cancel {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 0 4px;
    font-size: 18px;
    line-height: 1;
    color: #8a9096;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ol-msg-day {
    text-align: center;
    font-size: 11px;
    color: #a5aab0;
    margin: 12px 0 8px;
}

.ol-typing {
    padding: 0 16px 4px;
    font-size: 12px;
    color: #999;
    min-height: 20px;
}

.ol-chat-inputbar {
    border-top: 1px solid #e8eaed;
    padding: 10px 12px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.ol-chat-inputbar input[type=text] {
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    padding: 7px 12px;
    font: inherit;
    font-size: 14px;
    border: 2px solid #d6dade;
    border-radius: 0;
    min-width: 0;
}

.ol-chat-inputbar input[type=text]:focus {
    border-color: #3982D6;
    outline: 0;
}

.ol-chat-inputbar .ol-btn {
    margin-left: 8px;
}

.ol-chat-empty {
    padding: 60px 20px;
    text-align: center;
    color: #98a0a8;
}

.ol-earlier {
    text-align: center;
    margin-bottom: 10px;
}

/* sync table */

.ol-table-wrap {
    overflow-x: auto;
}

.ol-table {
    width: 100%;
    font-size: 14px;
}

.ol-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 2px solid #e6e8eb;
}

.ol-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #eef0f2;
}

.ol-table tr:hover td {
    background: #f8fafc;
}

.ol-table .ol-row-actions a {
    margin-right: 12px;
    cursor: pointer;
}

/* sync upload card */

.ol-upload-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.ol-upload-row .ol-file-input {
    -ms-flex: 1 1 220px;
    -webkit-flex: 1 1 220px;
    flex: 1 1 220px;
    min-width: 180px;
    font-size: 13px;
    margin: 0 10px 10px 0;
}

.ol-upload-row .ol-select {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    margin: 0 10px 10px 0;
}

.ol-upload-row .ol-btn {
    margin: 0 0 10px 0;
}

.ol-quota {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* sync file rows (name cell with preview thumbnail) */

.ol-file-cell {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 0;
}

.ol-file-thumb {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    background: #f0f1f3;
    border: 1px solid #e3e5e8;
    overflow: hidden;
}

.ol-file-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.ol-file-ext {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a9096;
}

.ol-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ol-quota-bar {
    display: inline-block;
    width: 220px;
    height: 10px;
    background: #e8eaee;
    vertical-align: middle;
    margin-right: 10px;
}

.ol-quota-fill {
    display: block;
    height: 10px;
    background: #3982D6;
}

.ol-quota-text {
    font-size: 13px;
    color: #777;
    vertical-align: middle;
}

/* theme picker */

.ol-theme-grid {
    zoom: 1;
}

.ol-theme-grid:after {
    content: "";
    display: block;
    clear: both;
}

.ol-theme-thumb {
    float: left;
    width: 132px;
    height: 88px;
    margin: 0 12px 12px 0;
    border: 3px solid #dcdfe3;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #eee;
}

.ol-theme-thumb:hover {
    border-color: #9db9d9;
}

.ol-theme-thumb.selected {
    border-color: #3982D6;
}

.ol-theme-thumb img {
    width: 100%;
    height: 100%;
}

.ol-theme-thumb .ol-theme-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 8px;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
}

/* flash + busy */

.ol-flash {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 950;
    margin-left: -180px;
    width: 360px;
    padding: 10px 16px;
    background: #1e1e1e;
    color: #fff;
    font-size: 13px;
    text-align: center;
    -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ol-flash.show {
    display: block;
}

.ol-flash.error {
    background: #B3261E;
}

.ol-busy {
    display: none;
    position: fixed;
    top: 12px;
    left: 50%;
    margin-left: -50px;
    z-index: 960;
    padding: 5px 16px;
    background: #1e1e1e;
    color: #fff;
    font-size: 12px;
}

.ol-busy.show {
    display: block;
}

/* misc utilities */

.ol-muted {
    color: #767676;
}

.ol-small {
    font-size: 13px;
}

.ol-hidden {
    display: none !important;
}

.ol-mt-0 {
    margin-top: 0;
}

.ol-mt-10 {
    margin-top: 10px;
}

.ol-mt-20 {
    margin-top: 20px;
}

.ol-mb-24 {
    margin-bottom: 24px;
}

.ol-actions {
    margin: 20px 0;
}

.ol-actions .ol-btn {
    margin: 0 10px 10px 0;
}

.ol-right {
    float: right;
}

.ol-clear {
    clear: both;
}

.ol-music-cover,
.sp_music_cover {
    width: 44px;
    height: 44px;
    max-width: 44px;
    float: left;
    margin-right: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: hidden;
}

.ol-status-bubble {
    background: #fff;
    border: 1px solid #e3e5e8;
    border-left: 4px solid #3982D6;
    padding: 12px 16px;
    font-size: 15px;
    font-style: italic;
    color: #444;
    margin-bottom: 20px;
}

.ol-status-bubble .ol-status-date {
    font-size: 12px;
    font-style: normal;
    color: #999;
    margin-top: 2px;
}

/* footer */

.ol-footer {
    background: #eef0f3;
    margin-top: 48px;
    font-size: 13px;
    color: #767676;
    border-top: 1px solid #e3e5e8;
}

.ol-footer-inner {
    padding: 16px 0;
    zoom: 1;
}

.ol-footer-inner:after {
    content: "";
    display: block;
    clear: both;
}

.ol-footer-copy {
    float: left;
    margin: 0;
}

.ol-footer-links {
    float: right;
    list-style: none;
    margin: 0;
}

.ol-footer-links li {
    display: inline-block;
    margin-left: 20px;
}

.ol-footer a {
    color: #767676;
}

.ol-footer a:hover {
    color: #3982D6;
}

/* responsive */

@media (max-width: 900px) {
    h1 {
        font-size: 28px;
    }

    .ol-band h1 {
        font-size: 24px;
    }

    .ol-chat-list {
        -ms-flex-preferred-size: 220px;
        -webkit-flex-basis: 220px;
        flex-basis: 220px;
    }

    .ol-search input {
        width: 130px;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    .ol-container,
    .ol-navbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ol-header-top {
        padding: 12px 16px 10px;
    }

    .ol-search {
        display: none;
    }

    .ol-nav-toggle {
        display: block;
    }

    .ol-navbar {
        padding: 0;
    }

    .ol-nav {
        display: none;
        border-top: 1px solid #e6e6e6;
    }

    .ol-nav.ol-nav-visible {
        display: block;
    }

    .ol-nav>li {
        float: none;
        margin: 0;
    }

    .ol-nav>li>a {
        padding: 10px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ol-sidebar,
    .ol-sidebar-nav {
        -ms-flex: 1 1 100%;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    .ol-chat {
        display: block;
    }

    .ol-chat-list {
        max-height: 220px;
        border-right: 0;
        border-bottom: 1px solid #e8eaed;
    }

    .ol-friend-tile {
        -ms-flex: 0 0 25%;
        -webkit-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .ol-me-name {
        display: none;
    }

    .ol-footer-copy,
    .ol-footer-links {
        float: none;
    }

    .ol-footer-links li {
        margin: 0 20px 0 0;
    }
}

*,
*:before,
*:after {
    border-radius: 0 !important;
}

.ol-avatar,
.ol-avatar img,
.ol-avatar-ring,
.ol-avatar-initial,
.ol-presence-dot,
.ol-badge,
.ol-nav-badge {
    border-radius: 0 !important;
}

.ol-feed-tabs {
    border-bottom: 2px solid #e3e5e8;
    margin-bottom: 14px;
}

.ol-feed-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 14px 9px;
    font: inherit;
    font-size: 15px;
    color: #555;
    cursor: pointer;
}

.ol-feed-tab:hover {
    color: #3982D6;
}

.ol-feed-tab.sel {
    color: #1e1e1e;
    font-weight: 600;
    border-bottom-color: #3982D6;
}

.ol-bsky-actions {
    margin: 4px 0 2px;
    font-size: 13px;
}

.ol-bsky-actions a {
    margin-right: 12px;
    cursor: pointer;
}

.ol-bsky-author {
    font-weight: 600;
}

.ol-post-video {
    margin: 8px 0;
}

.ol-post-video video {
    max-width: 100%;
    max-height: 420px;
    display: block;
    background: #000;
}

.ol-video-expand {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    cursor: pointer;
}

.ol-post-image {
    cursor: zoom-in;
}

.ol-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: rgba(10, 12, 16, 0.92);
    text-align: center;
}

.ol-lightbox.show {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.ol-lightbox-stage {
    max-width: 92%;
    max-height: 88%;
}

.ol-lightbox-media {
    max-width: 100%;
    max-height: 84vh;
    display: block;
    margin: 0 auto;
    -webkit-box-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}

.ol-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    color: #fff;
    text-align: left;
    z-index: 2;
}

.ol-lightbox-name {
    font-size: 14px;
}

.ol-lightbox-close {
    position: absolute;
    top: 8px;
    right: 14px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.ol-lightbox-nav {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 46px;
    height: 60px;
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 2;
}

.ol-lightbox-nav.prev {
    left: 10px;
}

.ol-lightbox-nav.next {
    right: 10px;
}

.ol-linkwarn {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    background: rgba(10, 12, 16, 0.55);
}

.ol-linkwarn.show {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.ol-linkwarn-box {
    background: #fff;
    border: 1px solid #cfd3d9;
    max-width: 440px;
    width: 90%;
    padding: 20px 22px;
    -webkit-box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.ol-linkwarn-box h3 {
    margin-top: 0;
}

.ol-linkwarn-url {
    word-break: break-all;
    font-size: 13px;
    background: #f2f4f7;
    border: 1px solid #e3e5e8;
    padding: 8px 10px;
    color: #33475b;
}

.ol-linkwarn-actions {
    margin-top: 16px;
}

.ol-linkwarn-actions .ol-btn {
    margin-right: 10px;
}