<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ZhouHengYi/pen/mePXwM?limit=all&page=42&q=markup" />
<style class="cp-pen-styles">.auth-wrap {
-webkit-transition: opacity .5s cubic-bezier(.25, .25, .315, .86);
transition: opacity .5s cubic-bezier(.25, .25, .315, .86);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.auth-wrap.visible {
opacity: 1;
-ms-filter: none;
filter: none
}
.auth-copyright {
color: #fff;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
font-size: 12px;
line-height: 14px;
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1
}
.auth-center {
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 1
}
.auth-background,
.auth-center {
position: absolute;
left: 0;
top: 0
}
.auth-background {
width: 100%;
height: 100%;
background-color: #2e3136;
background-size: cover;
z-index: -1;
background-position: center center
}
.auth-blur {
overflow: hidden;
border-radius: 3px;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px)
}
.auth-inner {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
border-radius: 3px
}
.auth-inner,
.auth-inner .auth-brand {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.auth-inner .auth-brand {
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
background: hsla(0, 0%, 100%, .8);
padding: 30px
}
.auth-inner .auth-logo {
width: 168px;
height: 168px;
background: url(/assets/9cb691623c7ba013e791aad8845e93cb.svg);
background-size: 168px 168px
}
.auth-inner .auth-name {
background: url(/assets/62223f89a44d14b008682354fd142069.svg) center no-repeat;
margin-top: 30px;
height: 24px;
position: relative;
margin-bottom: 12px
}
.auth-inner .auth-name:after {
height: 3px;
width: 28px;
background: #4f545c;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
display: inline-block;
content: ' ';
position: absolute;
top: 100%;
left: 50%;
margin-left: -14px;
margin-top: 12px
}
form.auth-form {
padding: 30px;
border-radius: 0;
background: none;
background: rgba(40, 43, 48, .75);
min-width: 340px;
width: auto
}
form.auth-form h1 {
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
margin: 0;
margin-bottom: 30px
}
form.auth-form p {
color: #99aab5;
font-weight: 600;
font-size: 14px;
text-transform: none
}
form.auth-form p strong {
color: #fff
}
form.auth-form .control-group input[type=email],
form.auth-form .control-group input[type=password],
form.auth-form .control-group input[type=text] {
background: transparent;
border-bottom-color: hsla(0, 0%, 100%, .1);
color: #fff
}
form.auth-form .control-group input[type=email]::-webkit-input-placeholder,
form.auth-form .control-group input[type=password]::-webkit-input-placeholder,
form.auth-form .control-group input[type=text]::-webkit-input-placeholder {
color: hsla(0, 0%, 100%, .4)
}
form.auth-form .control-group input[type=email]:focus,
form.auth-form .control-group input[type=password]:focus,
form.auth-form .control-group input[type=text]:focus {
border-bottom-color: #fff
}
form.auth-form .btn-primary {
width: 100%;
margin: 0;
margin-top: 70px;
line-height: 58px;
padding: 0;
display: inline-block;
text-align: center;
text-decoration: none
}
form.auth-form .btn-forgot-password {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
background: none;
margin: 10px 0 0;
padding: 0;
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
-webkit-transition: opacity .2s ease-out;
transition: opacity .2s ease-out
}
form.auth-form .btn-forgot-password:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
form.auth-form footer {
font-size: 12px;
color: #87909c;
margin-top: 10px;
margin-bottom: 0
}
form.auth-form footer a {
color: #fff;
text-decoration: none
}
form.auth-form footer a:hover {
border-bottom: 2px solid #fff;
padding-bottom: 5px
}
.auth-invite,
.auth-verify {
min-height: 235px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.auth-invite p,
.auth-verify p {
max-width: 300px;
text-align: center;
line-height: 16px;
margin: 5px 0
}
.auth-invite p.error,
.auth-verify p.error {
color: #f04747!important
}
@media (max-width:628px) {
.auth-inner {
height: 100%;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.auth-inner .auth-brand {
width: 100%;
height: 60px;
padding: 20px;
background: #1e2124
}
.auth-brand .auth-logo {
width: 130px;
height: 36px;
background: url(/assets/4f004ac9be168ac6ee18fc442a52ab53.svg) no-repeat
}
.auth-brand .auth-name {
display: none
}
form.auth-form {
width: 100%;
height: 100%;
padding: 10px;
background: #1e2124
}
form.auth-form h1 {
visibility: hidden;
margin-bottom: 15px
}
form.auth-form input {
border-radius: 0;
width: 95%!important
}
.auth-blur {
width: 100%!important;
height: 100%!important
}
form.auth-form footer {
margin: 30px 0 15px
}
}
.spinner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.spinner-inner {
position: relative;
display: inline-block;
width: 32px;
height: 32px
}
.spinner-wandering-cubes .spinner-item {
background-color: #738bd7;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: spinner-wandering-cubes 1.8s infinite ease-in-out;
animation: spinner-wandering-cubes 1.8s infinite ease-in-out
}
.spinner-wandering-cubes .spinner-item:last-child {
-webkit-animation-delay: -.9s;
animation-delay: -.9s
}
.spinner-chasing-dots {
-webkit-animation: spinner-chasing-dots-rotate 2s infinite linear;
animation: spinner-chasing-dots-rotate 2s infinite linear
}
.spinner-chasing-dots .spinner-item {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #738bd7;
border-radius: 100%;
-webkit-animation: spinner-chasing-dots-bounce 2s infinite ease-in-out;
animation: spinner-chasing-dots-bounce 2s infinite ease-in-out
}
.spinner-chasing-dots .spinner-item:last-child {
top: auto;
bottom: 0;
-webkit-animation-delay: -1s;
animation-delay: -1s
}
@-webkit-keyframes spinner-wandering-cubes {
25% {
-webkit-transform: translateX(22px) rotate(-90deg) scale(.5);
-ms-transform: translateX(22px) rotate(-90deg) scale(.5);
transform: translateX(22px) rotate(-90deg) scale(.5)
}
50% {
-webkit-transform: translateX(22px) translateY(22px) rotate(-180deg);
-ms-transform: translateX(22px) translateY(22px) rotate(-180deg);
transform: translateX(22px) translateY(22px) rotate(-180deg)
}
75% {
-webkit-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5);
-ms-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5);
transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5)
}
to {
-webkit-transform: rotate(-1turn);
-ms-transform: rotate(-1turn);
transform: rotate(-1turn)
}
}
@keyframes spinner-wandering-cubes {
25% {
-webkit-transform: translateX(22px) rotate(-90deg) scale(.5);
-ms-transform: translateX(22px) rotate(-90deg) scale(.5);
transform: translateX(22px) rotate(-90deg) scale(.5)
}
50% {
-webkit-transform: translateX(22px) translateY(22px) rotate(-180deg);
-ms-transform: translateX(22px) translateY(22px) rotate(-180deg);
transform: translateX(22px) translateY(22px) rotate(-180deg)
}
75% {
-webkit-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5);
-ms-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5);
transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5)
}
to {
-webkit-transform: rotate(-1turn);
-ms-transform: rotate(-1turn);
transform: rotate(-1turn)
}
}
@keyframes spinner-chasing-dots-rotate {
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@-webkit-keyframes spinner-chasing-dots-bounce {
0%,
to {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
@keyframes spinner-chasing-dots-bounce {
0%,
to {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.invite-marketing-wrapper .auth-center {
padding-left: 440px
}
.invite-marketing {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 440px;
background-color: #fff;
background-image: url(/assets/8ed21d59810add29a2c49817f36acbbf.png), url(/assets/df6d9dc0b6a72a83e8794c107abcd867.png);
background-position: bottom left, bottom right;
background-size: 127px 190px, 97px 215px;
background-repeat: no-repeat, no-repeat;
z-index: 10;
box-shadow: 2px 0 4px 0 rgba(0, 0, 0, .5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
padding: 0 80px;
box-sizing: border-box
}
.invite-marketing .invite-marketing-header {
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 26px;
color: #738bd7;
margin-bottom: 20px
}
.invite-marketing .invite-marketing-body {
font-size: 18px;
line-height: 30px;
color: #99aab5;
font-weight: 500
}
.invite-marketing .invite-marketing-body,
.invite-marketing .invite-marketing-button {
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
margin-bottom: 40px
}
.invite-marketing .invite-marketing-button {
border-radius: 30px;
color: #738bd7;
border: 2px solid #738bd7;
padding: 11px 43px;
font-weight: 700;
font-size: 15px;
-webkit-transition: color .25s ease-out, border-color .25s ease-out;
transition: color .25s ease-out, border-color .25s ease-out;
cursor: pointer;
text-decoration: none
}
.invite-marketing .invite-marketing-button:hover {
color: #697ec4;
border-color: #697ec4
}
.theme-light .hljs {
display: block;
overflow-x: auto;
padding: .5em;
background: #fdf6e3;
color: #657b83;
-webkit-text-size-adjust: none
}
.theme-light .diff .hljs-header,
.theme-light .hljs-comment,
.theme-light .hljs-doctype,
.theme-light .hljs-pi,
.theme-light .lisp .hljs-string {
color: #93a1a1
}
.theme-light .css .hljs-tag,
.theme-light .hljs-addition,
.theme-light .hljs-keyword,
.theme-light .hljs-request,
.theme-light .hljs-status,
.theme-light .hljs-winutils,
.theme-light .method,
.theme-light .nginx .hljs-title {
color: #859900
}
.theme-light .hljs-command,
.theme-light .hljs-doctag,
.theme-light .hljs-hexcolor,
.theme-light .hljs-link_url,
.theme-light .hljs-number,
.theme-light .hljs-regexp,
.theme-light .hljs-rule .hljs-value,
.theme-light .hljs-string,
.theme-light .hljs-tag .hljs-value,
.theme-light .tex .hljs-formula {
color: #2aa198
}
.theme-light .css .hljs-function,
.theme-light .hljs-built_in,
.theme-light .hljs-chunk,
.theme-light .hljs-decorator,
.theme-light .hljs-id,
.theme-light .hljs-identifier,
.theme-light .hljs-localvars,
.theme-light .hljs-name,
.theme-light .hljs-title,
.theme-light .vhdl .hljs-literal {
color: #268bd2
}
.theme-light .hljs-attribute,
.theme-light .hljs-class .hljs-title,
.theme-light .hljs-constant,
.theme-light .hljs-link_reference,
.theme-light .hljs-parent,
.theme-light .hljs-type,
.theme-light .hljs-variable,
.theme-light .lisp .hljs-body,
.theme-light .smalltalk .hljs-number {
color: #b58900
}
.theme-light .css .hljs-pseudo,
.theme-light .diff .hljs-change,
.theme-light .hljs-attr_selector,
.theme-light .hljs-cdata,
.theme-light .hljs-header,
.theme-light .hljs-pragma,
.theme-light .hljs-preprocessor,
.theme-light .hljs-preprocessor .hljs-keyword,
.theme-light .hljs-shebang,
.theme-light .hljs-special,
.theme-light .hljs-subst,
.theme-light .hljs-symbol,
.theme-light .hljs-symbol .hljs-string {
color: #cb4b16
}
.theme-light .hljs-deletion,
.theme-light .hljs-important {
color: #dc322f
}
.theme-light .hljs-link_label {
color: #6c71c4
}
.theme-light .tex .hljs-formula {
background: #eee8d5
}
.theme-dark .hljs {
display: block;
overflow-x: auto;
padding: .5em;
background: #002b36;
color: #839496;
-webkit-text-size-adjust: none
}
.theme-dark .diff .hljs-header,
.theme-dark .hljs-comment,
.theme-dark .hljs-doctype,
.theme-dark .hljs-pi,
.theme-dark .lisp .hljs-string {
color: #586e75
}
.theme-dark .css .hljs-tag,
.theme-dark .hljs-addition,
.theme-dark .hljs-keyword,
.theme-dark .hljs-request,
.theme-dark .hljs-status,
.theme-dark .hljs-winutils,
.theme-dark .method,
.theme-dark .nginx .hljs-title {
color: #859900
}
.theme-dark .hljs-command,
.theme-dark .hljs-doctag,
.theme-dark .hljs-hexcolor,
.theme-dark .hljs-link_url,
.theme-dark .hljs-number,
.theme-dark .hljs-regexp,
.theme-dark .hljs-rule .hljs-value,
.theme-dark .hljs-string,
.theme-dark .hljs-tag .hljs-value,
.theme-dark .tex .hljs-formula {
color: #2aa198
}
.theme-dark .css .hljs-function,
.theme-dark .hljs-built_in,
.theme-dark .hljs-chunk,
.theme-dark .hljs-decorator,
.theme-dark .hljs-id,
.theme-dark .hljs-identifier,
.theme-dark .hljs-localvars,
.theme-dark .hljs-name,
.theme-dark .hljs-title,
.theme-dark .vhdl .hljs-literal {
color: #268bd2
}
.theme-dark .hljs-attribute,
.theme-dark .hljs-class .hljs-title,
.theme-dark .hljs-constant,
.theme-dark .hljs-link_reference,
.theme-dark .hljs-parent,
.theme-dark .hljs-type,
.theme-dark .hljs-variable,
.theme-dark .lisp .hljs-body,
.theme-dark .smalltalk .hljs-number {
color: #b58900
}
.theme-dark .css .hljs-pseudo,
.theme-dark .diff .hljs-change,
.theme-dark .hljs-attr_selector,
.theme-dark .hljs-cdata,
.theme-dark .hljs-header,
.theme-dark .hljs-pragma,
.theme-dark .hljs-preprocessor,
.theme-dark .hljs-preprocessor .hljs-keyword,
.theme-dark .hljs-shebang,
.theme-dark .hljs-special,
.theme-dark .hljs-subst,
.theme-dark .hljs-symbol,
.theme-dark .hljs-symbol .hljs-string {
color: #cb4b16
}
.theme-dark .hljs-deletion,
.theme-dark .hljs-important {
color: #dc322f
}
.theme-dark .hljs-link_label {
color: #6c71c4
}
.theme-dark .tex .hljs-formula {
background: #073642
}
.invite-mobile .top {
background-color: #738bd7;
padding: 0 20px
}
.invite-mobile .bottom {
background-color: #fff;
padding: 0 20px
}
.invite-mobile .wrap {
max-width: 500px;
margin: 0 auto;
overflow: auto
}
.invite-mobile .brand {
background: url(/assets/02a8c6a7d718b8e215bf28e86c932176.svg) center no-repeat;
background-size: 260px 72px;
margin: 30px auto;
width: 260px;
height: 72px
}
.invite-mobile .code-label {
line-height: 1.3em;
text-align: center;
margin-top: 20px;
font-weight: 600;
font-size: 14px;
color: #fff
}
.invite-mobile .code {
border: 2px solid hsla(0, 0%, 100%, .2);
text-overflow: ellipsis;
box-sizing: border-box;
margin: 10px auto 20px;
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
white-space: nowrap;
text-align: center;
border-radius: 8px;
font-weight: 500;
overflow: hidden;
font-size: 26px;
padding: 16px;
color: #fff
}
.invite-mobile .link {
border: 1px solid #dbdde1;
box-sizing: border-box;
text-decoration: none;
border-radius: 4px;
text-align: center;
margin: 20px auto;
font-weight: 600;
font-size: 16px;
padding: 16px 0;
display: block;
color: #99aab5
}
.invite-mobile .link strong {
font-weight: 700
}
.invite-mobile .link.purple {
background-color: #738bd7;
color: #fff;
border: 0
}
.verify-connected-account {
color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(/assets/1cc6cf69d6f907cff36e57fb523242e4.png) top left repeat;
background-color: #282b30
}
.verify-connected-account,
.verify-connected-account .logos {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.verify-connected-account .logos {
margin-bottom: 95px
}
.verify-connected-account .logos .logos-divider {
width: 28px;
height: 28px;
margin: 0 37px;
background-size: 28px 28px;
background-image: url(/assets/f4e75b5cafce1efdfc7013113575f9ff.svg);
content: ' ';
display: inline-block
}
.verify-connected-account .logos .logo {
width: 88px;
height: 88px;
background-size: 88px 88px
}
.verify-connected-account .logos .logo-discord {
background-image: url(/assets/57084ade1ef56635452abceaca20d0bd.svg)
}
.verify-connected-account .message {
text-align: center;
font-size: 18px
}
.verify-connected-account .message.error {
color: #f04747
}
.verify-connected-account .message strong {
font-weight: 700
}
.verify-connected-account .btn {
margin-top: 22px;
width: 400px;
height: 60px;
background-color: #738bd7;
padding: 10px 20px;
font-size: 16px;
line-height: 16px;
font-weight: 500;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
position: relative;
cursor: pointer;
border-radius: 3px;
color: #fff
}
.verify-connected-account .btn .spinner-item {
background-color: #fff;
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25)
}
.verify-connected-account .btn:hover {
background-color: #697ec4
}
.verify-connected-account .btn:disabled {
cursor: not-allowed;
background-color: #2e3136
}
.scroller-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.scroller-wrap,
.scroller-wrap .scroller {
min-height: 1px;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.scroller-wrap .scroller {
overflow-y: scroll
}
.scroller-wrap .scroller.scrolling>* {
pointer-events: none
}
.scroller-wrap .scroller::-webkit-scrollbar {
width: 14px
}
.scroller-wrap .scroller::-webkit-scrollbar-thumb {
background-color: #738bd7;
background-clip: padding-box;
border: 3px solid #fff;
border-radius: 7px
}
.scroller-wrap .scroller::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
background-clip: padding-box;
border: 3px solid #fff;
border-radius: 7px
}
.scroller-wrap.polyfill .scroller {
padding-right: 14px
}
.scroller-wrap .scrollbar {
background-color: #fff;
width: 14px;
pointer-events: none;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
bottom: 0;
right: 0;
top: 0
}
.scroller-wrap .scrollbar:after {
left: -3px;
width: 3px;
background-color: #fff;
position: absolute;
content: "";
bottom: 0;
top: 0
}
.scroller-wrap .scrollbar .track {
background: #f3f3f3;
border-radius: 4px;
margin: 3px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.scroller-wrap .scrollbar .thumb {
background-color: #fff;
border-radius: 7px;
position: absolute;
right: 0;
left: 0;
top: 0
}
.scroller-wrap .scrollbar .thumb:after {
border-radius: 4px;
background-color: #738bd7;
margin: 3px;
position: absolute;
content: "";
bottom: 0;
right: 0;
left: 0;
top: 0
}
.scroller-wrap.fade .scroller::-webkit-scrollbar-thumb,
.scroller-wrap.fade .scroller::-webkit-scrollbar-track-piece {
visibility: hidden
}
.scroller-wrap.fade .scroller:hover:hover::-webkit-scrollbar-thumb,
.scroller-wrap.fade .scroller:hover:hover::-webkit-scrollbar-track-piece,
.scroller-wrap.fade:hover:hover::-webkit-scrollbar-thumb,
.scroller-wrap.fade:hover:hover::-webkit-scrollbar-track-piece {
visibility: visible
}
.scroller-wrap.fade .scroller:hover .scrollbar .thumb,
.scroller-wrap.fade:hover .scrollbar .thumb {
opacity: 1;
-ms-filter: none;
filter: none
}
.scroller-wrap.fade .scrollbar .thumb {
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.scroller-wrap.dark .scroller::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
border-color: transparent
}
.scroller-wrap.dark .scroller::-webkit-scrollbar-track-piece {
background-color: transparent;
border-color: transparent
}
.scroller-wrap.dark .scrollbar,
.scroller-wrap.dark .scrollbar:after {
background-color: #2e3136
}
.scroller-wrap.dark .scrollbar .track {
background-color: transparent
}
.scroller-wrap.dark .scrollbar .thumb {
background-color: #2e3136
}
.scroller-wrap.dark .scrollbar .thumb:after {
background-color: rgba(0, 0, 0, .4)
}
.scroller-wrap.light .scroller::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
border-color: transparent
}
.scroller-wrap.light .scroller::-webkit-scrollbar-track-piece {
background-color: transparent;
border-color: transparent
}
.scroller-wrap.light .scrollbar,
.scroller-wrap.light .scrollbar:after {
background-color: #f3f3f3
}
.scroller-wrap.light .scrollbar .track {
background-color: transparent
}
.scroller-wrap.light .scrollbar .thumb {
background-color: #f3f3f3
}
.scroller-wrap.light .scrollbar .thumb:after {
background-color: rgba(0, 0, 0, .4)
}
.change-log {
background-color: #fff;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 698px;
-ms-flex: 1 698px;
flex: 1 698px;
min-height: 250px;
max-height: 698px;
width: 545px;
font-size: 13px;
line-height: 1.3em;
color: #747f8d
}
.change-log .embed {
border-left: none;
padding: 0;
margin: 0;
margin-top: 28px
}
.change-log .embed .embed-provider {
display: none
}
.change-log .embed .embed-video-actions {
-webkit-box-align: end;
-o-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
padding-bottom: 20px
}
.change-log .header {
margin: 28px 40px 0;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 28px;
position: relative;
font-weight: 600;
font-size: 14px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #99aab5
}
.change-log .header .close {
background: transparent url(/assets/14f734d6803726c94b970c3ed80c0864.svg);
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
background-size: cover;
position: absolute;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
width: 12px;
height: 12px;
right: 3px;
top: 2px
}
.change-log .header .close:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.change-log .header b {
text-transform: uppercase;
color: #738bd7
}
.change-log .scroller-wrap {
margin: 0 40px
}
.change-log h1 {
font-size: 14px
}
.change-log h1,
.change-log h2,
.change-log strong {
font-weight: 700
}
.change-log em,
.change-log i {
font-style: italic
}
.change-log p+p {
margin-top: 10px
}
.change-log ul {
margin: 20px
}
.change-log ul li {
list-style: disc outside;
margin-bottom: 10px;
color: #747f8d;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
font-weight: 600
}
.change-log ul li:last-child {
margin-bottom: 0
}
.change-log .lead-video {
margin-top: 28px
}
.change-log .changelog-added,
.change-log .changelog-added-secondary,
.change-log .changelog-fixed,
.change-log .changelog-in-progress {
text-transform: uppercase;
display: inline-block;
border-radius: 4px;
padding: 6px 12px;
font-weight: 700;
font-size: 14px;
color: #fff;
margin: 0
}
.change-log .changelog-added,
.change-log .changelog-added-secondary {
background-color: #43b581
}
.change-log .changelog-added {
margin-top: 28px
}
.change-log .changelog-fixed {
background-color: #738bd7
}
.change-log .changelog-in-progress {
background-color: #faa61a
}
.change-log pre {
border: 2px solid #f3f3f3;
border-radius: 5px;
max-width: 90%;
box-sizing: border-box;
font-size: 12px;
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace
}
.change-log pre,
.change-log pre code {
background: #f9f9f9
}
.change-log code.inline {
width: auto;
height: auto;
padding: .2em;
background: #f9f9f9;
border-radius: 3px;
font-size: 85%;
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace
}
.change-log img {
width: 100%
}
.change-log a {
color: #00b0f4;
-webkit-transition: .05s;
transition: .05s;
text-decoration: none
}
.change-log a:hover {
text-decoration: underline
}
.change-log .footer {
border-top: 1px solid #f0f0f0;
border-radius: 0 0 5px 5px;
padding: 14px 28px;
font-weight: 600;
font-size: 12px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #99aab5;
background-color: #f9f9f9
}
.image {
display: inline-block;
position: relative
}
.image.image-loading {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: rgba(0, 0, 0, .05)
}
.image canvas {
display: inline-block;
vertical-align: bottom
}
.image .image-gif {
background-image: url(/assets/f08d762d18b676262c8d40c5aff9e640.svg);
position: absolute;
top: 5px;
right: 5px;
width: 36px;
height: 22px
}
.embed {
border-left: 5px solid #f3f3f3;
padding: 4px 10px;
margin: 4px 0
}
.embed.embed-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
box-sizing: border-box
}
.embed.embed-link .embed-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 700px
}
.embed.embed-link .embed-thumbnail {
margin-left: 16px
}
.embed.embed-tweet .embed-inner>* {
display: inline-block
}
.embed.embed-tweet .embed-inner>*+* {
margin-left: 5px
}
.embed.embed-image {
border-left: none;
padding: 0
}
.embed .image {
border-radius: 3px;
overflow: hidden
}
.embed .embed-inner>:last-child,
.embed>:last-child {
margin-bottom: 0!important
}
.embed .embed-author,
.embed .embed-provider,
.embed .embed-title {
cursor: pointer
}
.embed .embed-provider {
display: block;
color: #87909c;
font-weight: 400;
font-size: 12px;
margin-bottom: 5px
}
.embed .embed-author {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 15px;
color: #2e3136
}
.embed .embed-title {
display: block;
font-weight: 600;
margin-bottom: 8px
}
.embed .embed-title+.embed-description {
margin-top: -3px!important
}
.embed .embed-description {
color: #737f8d
}
.embed .embed-description,
.embed .embed-error {
display: block;
font-size: 15px;
line-height: 1.1em;
font-weight: 500;
margin-bottom: 8px
}
.embed .embed-error {
color: #99aab5
}
.embed .embed-thumbnail {
display: inline-block;
position: relative
}
.embed .embed-thumbnail img {
margin: 0
}
.embed .embed-thumbnail.embed-thumbnail-article,
.embed .embed-thumbnail.embed-thumbnail-image {
cursor: nesw-resize;
cursor: -webkit-zoom-in
}
.embed .embed-video-actions {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.embed .embed-video-actions,
.embed .embed-video-actions .embed-video-actions-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.embed .embed-video-actions .embed-video-actions-inner {
background: rgba(0, 0, 0, .6);
border-radius: 6px;
padding: 12px 14px
}
.embed .embed-video-actions .embed-video-play,
.embed .embed-video-actions .embed-video-popout {
width: 19px;
height: 19px;
background: none;
background-size: 19px 19px;
display: inline-block;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60)
}
.embed .embed-video-actions .embed-video-play+*,
.embed .embed-video-actions .embed-video-popout+* {
margin-left: 18px
}
.embed .embed-video-actions .embed-video-play:hover,
.embed .embed-video-actions .embed-video-popout:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.embed .embed-video-actions .embed-video-play {
background-image: url(/assets/170bf363bc721a6440ec16f2e0ad196c.svg)
}
.embed .embed-video-actions .embed-video-popout {
background-image: url(/assets/7ff0938769e7e232f880731d45851b94.svg)
}
.comment>:last-child .embed {
margin-bottom: auto
}
.modal {
position: absolute;
top: 0;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 100%;
width: 100%;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: distribute;
-webkit-align-content: space-around;
align-content: space-around;
padding-top: 60px;
padding-bottom: 60px;
z-index: 1000;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
pointer-events: none;
box-sizing: border-box
}
.modal,
.modal .modal-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.modal .modal-inner {
pointer-events: auto;
min-height: 0
}
.modal:hover:after,
.modal:hover:before {
opacity: 1;
-ms-filter: none;
filter: none
}
.modal:after {
top: calc(50% - 9px);
right: 20px
}
.modal .modal-close {
position: absolute;
content: ' ';
top: 20px;
right: 20px;
width: 20px;
height: 20px;
background: url(/assets/7731c77d99babca1a8faec204d98c380.svg) no-repeat;
background-size: 20px;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: opacity .2s;
transition: opacity .2s
}
.modal .modal-close:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.modal .download-button {
text-decoration: none;
color: #fff;
text-align: left;
line-height: 30px;
display: block;
font-weight: 600;
font-size: 14px;
position: relative;
-webkit-transition: .15s;
transition: .15s;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.modal .download-button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.modal-content {
min-height: 0
}
.modal-content .form-inner {
padding: 28px 40px
}
.modal-content .form-inner p {
color: #2e3136;
line-height: 16px;
font-size: 14px
}
.modal-content .form-inner p:first-child {
margin-top: 0
}
.modal-content .form-inner p a {
text-decoration: underline;
font-weight: 600;
cursor: pointer;
color: #00b0f4
}
.modal-content .form-inner p a:hover {
text-decoration: none
}
.form {
width: 520px;
position: relative
}
.form hr {
border: none;
border-bottom: 1px solid #f0f0f0;
padding-top: 10px;
margin-bottom: 20px
}
.form .form-header {
padding: 0 40px;
color: #738bd7;
background: #fff;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #f0f0f0
}
.form .form-actions {
border-radius: 0 0 5px 5px
}
.form .form-inner {
background-color: #fff;
padding: 28px 40px 48px
}
.form .form-inner:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
.form .form-inner:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
}
.form input::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
color: #dadddf;
font-weight: 300
}
.form header {
font-weight: 700;
text-transform: uppercase;
color: #738bd7;
font-size: 14px;
padding-top: 28px;
padding-bottom: 28px
}
.form .radio-group {
line-height: 30px;
margin-bottom: 40px
}
.form .radio-group .radio {
margin-right: 6px
}
.form .radio-group li+li {
margin-top: 12px
}
.form .tabular .checkbox-group>li {
margin-bottom: 14px!important
}
.form .tabular .checkbox {
line-height: 18px!important;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start!important;
align-items: flex-start!important;
height: 36px
}
.form .checkbox-group {
line-height: 30px;
margin-bottom: 40px
}
.form .checkbox-group .checkbox {
margin-right: 6px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
white-space: pre-line
}
.form .checkbox-group li+li {
margin-top: 12px
}
.form .checkbox-group.checkbox-group-collapse li {
display: inline-block;
width: 50%
}
.form .control-groups {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.form .control-groups .control-group {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.form .control-groups .control-group+.control-group {
margin-top: 0;
margin-left: 16px
}
.form .control-groups+.control-group,
.form .control-groups+.control-groups {
margin-top: 18px
}
.form .control-groups:last-child .checkbox-group {
margin-bottom: 0
}
.form .control-group {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.form .control-group label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #87909c;
display: block
}
.form .control-group label+input,
.form .control-group label+textarea {
margin-top: 12px
}
.form .control-group label+.Select-control,
.form .control-group label+select {
margin-top: 10px
}
.form .control-group label+.checkbox-group,
.form .control-group label+.radio-group {
margin-top: 16px
}
.form .control-group label+.clipboard-input {
margin-top: 10px
}
.form .control-group label.hidden {
visibility: hidden
}
.form .control-group.help-text.error {
width: 100%
}
.form .control-group.error label {
color: #f04747
}
.form .control-group.error label span.error {
font-weight: 400
}
.form .control-group input {
line-height: 34px
}
.form .control-group input[type=email],
.form .control-group input[type=password],
.form .control-group input[type=text],
.form .control-group textarea {
font-size: 16px;
font-weight: 400;
color: #2e3136;
border: none;
outline: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 1px;
width: 100%;
resize: none
}
.form .control-group input[type=email]:focus,
.form .control-group input[type=password]:focus,
.form .control-group input[type=text]:focus,
.form .control-group textarea:focus {
border-bottom: 2px solid #738bd7;
margin-bottom: 0
}
.form .control-group input[type=email]:disabled,
.form .control-group input[type=password]:disabled,
.form .control-group input[type=text]:disabled,
.form .control-group textarea:disabled {
background: transparent;
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.form .control-group .Select.is-disabled {
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
cursor: no-drop
}
.form .control-group .Select-control {
width: 100%;
margin-top: 10px;
height: 46px;
border: 1px solid #cdcdcd;
font-size: 16px;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif
}
.form .control-group .Select-control .Select-placeholder {
box-sizing: border-box;
padding: 15px 25px 15px 10px;
color: #2e3136
}
.form .control-group .Select-control .Select-arrow {
top: 20px
}
.form .control-group .Select-option {
color: #2e3136
}
.form .control-group .Select-option.is-focused {
background: #f7f7f7;
color: #2e3136
}
.form .control-group .is-focused:not(.is-open)>.Select-control {
border: 1px solid #cdcdcd;
box-shadow: none
}
.form .control-group select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
background-color: #fff;
border: 1px solid #cdcdcd;
border-radius: 4px;
padding: 14px 10px;
font-size: 14px;
color: #2e3136;
outline: none;
box-sizing: border-box;
-webkit-transition: border .25s;
transition: border .25s;
cursor: pointer;
position: relative;
background: url(/assets/cb1c737673cd98f0e796d6a646ec512c.svg) 98% center no-repeat;
background-size: 20px 10px
}
.form .control-group select:hover {
border: 1px solid #f3f3f3
}
.form .control-group select:disabled {
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
cursor: no-drop;
background-image: url(/assets/cb1c737673cd98f0e796d6a646ec512c.svg)
}
.form .control-group select:disabled:hover {
border: 1px solid #cdcdcd
}
.form .control-group .help-text {
font-size: 11px;
line-height: 13px;
color: #87909c;
margin: 15px 0
}
.form .control-group .help-text a {
font-weight: 700
}
.form .control-group .help-text a:hover {
text-decoration: underline
}
.form .control-group .help-text.error,
.form .control-group .help-text.error a {
color: #f04747
}
.form .control-group+.control-group,
.form .control-group+.control-groups {
margin-top: 18px
}
.form .form-actions {
background-color: #f9f9f9;
border-top: 1px solid #f0f0f0;
box-sizing: border-box;
width: 100%;
padding: 18px 40px;
border-radius: 0 0 5px 5px;
text-align: right;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.form .btn {
padding: 10px 20px;
font-size: 16px;
line-height: 16px;
font-weight: 600;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
position: relative;
cursor: pointer
}
.form .btn.red {
background-color: #f36c6c
}
.form .btn.red:hover {
background-color: #f04747
}
.form .btn+.btn {
margin-left: 20px
}
.form .btn:disabled {
color: #ddd;
background-color: #949494;
position: relative;
-webkit-transition: none;
transition: none
}
.form .btn:disabled.btn-saving {
color: transparent
}
.form .btn:disabled .spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.form .btn:disabled .spinner .spinner-inner {
width: 16px;
height: 16px
}
.form .btn:disabled .spinner .spinner-item {
background-color: #fff
}
.form .btn:disabled:hover {
background-color: #949494
}
.form .btn-primary {
border-radius: 3px;
background-color: #738bd7;
color: #fff
}
.form .btn-primary:hover {
background-color: #697ec4
}
.form .btn-default {
padding: 10px 0;
background-color: #f9f9f9;
color: #949494;
padding-bottom: 4px;
border-bottom: 2px solid #f9f9f9
}
.form .btn-default:hover {
border-bottom: 2px solid #949494
}
.form .btn-default:active {
box-shadow: none
}
.form .btn-confirm {
float: left;
margin-left: -10px
}
.btn-confirm {
border-radius: 3px;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
height: 38px
}
.btn-confirm .icon {
vertical-align: middle;
background-repeat: no-repeat;
background-position: center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block
}
.btn-confirm .icon.icon-logout {
background-image: url(/assets/0a0cab04c40892fba673046328da5a10.svg)
}
.btn-confirm .icon.icon-delete {
background-image: url(/assets/4460f50cdc37c84669d1068a4bff9dd9.svg)
}
.btn-confirm .btn {
display: inline-block;
background-color: transparent;
-webkit-transition: none;
transition: none;
color: #fff
}
.btn-confirm.active .icon-logout,
.btn-confirm:hover .icon-logout {
background-image: url(/assets/43a609087c29076f83ef6dc117abdd28.svg)
}
.btn-confirm.active .icon-delete,
.btn-confirm:hover .icon-delete {
background-image: url(/assets/b872755ca2dc264fd0abc11a731eb9f7.svg)
}
.btn-confirm .btn:first-of-type {
height: 38px;
-webkit-transition: width .2s ease-out, background-color .2s ease-out, padding .2s ease-out;
transition: width .2s ease-out, background-color .2s ease-out, padding .2s ease-out
}
.btn-confirm .btn:first-of-type:hover {
background-color: #f04747;
color: #fff
}
.btn-confirm .btn:last-of-type:not(:first-of-type) {
width: 0;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
margin: 0;
-webkit-transition: width .2s ease-out, background-color .2s ease-out, padding .2s ease-out;
transition: width .2s ease-out, background-color .2s ease-out, padding .2s ease-out
}
.btn-confirm.active .btn {
background-color: #f04747
}
.btn-confirm.active .btn:last-of-type:not(:first-of-type) {
width: 100%;
background-color: #f36c6c;
padding-left: 20px;
padding-right: 20px;
font-weight: 600
}
.btn-confirm.active .btn:last-of-type:not(:first-of-type):hover {
background-color: #f04747
}
.alert.form {
overflow: visible!important;
position: relative;
text-align: center;
width: 440px;
box-sizing: border-box;
min-height: 322px
}
.alert.form.has-icon {
background-size: 0!important
}
.alert.form.has-icon h4 {
padding-top: 55px
}
.alert.form.has-icon:before {
background-image: inherit;
background-size: 100px;
background-color: #fff;
border-radius: 50px;
position: absolute;
margin: 0 auto;
content: "";
width: 100px;
height: 100px;
top: -28px;
right: 0;
left: 0
}
.alert.form .form-inner {
padding: 20px!important
}
.alert.form .form-inner h4 {
font-weight: 700;
font-size: 24px;
color: #535559
}
.alert.form .form-inner p {
margin-top: 14px;
margin-bottom: 0;
font-weight: 500;
line-height: 28px;
font-size: 18px;
color: #99aab5
}
.alert.form .form-inner .btn {
text-decoration: none;
display: inline-block;
line-height: 58px;
margin-top: 28px;
width: 100%;
height: 58px;
padding: 0;
border: 1px solid #697ec4
}
.alert.form .form-inner .btn-close-forever {
display: block;
color: #99aab5;
font-size: 12px;
cursor: pointer;
padding-top: 10px;
margin-bottom: -10px
}
.alert.form .form-inner .btn-close-forever:hover {
text-decoration: underline
}
.alert.form .form-inner .cancel {
border-radius: 3px;
border-color: #99aab5;
background-color: #99aab5;
color: #fff
}
.alert.form .form-inner .cancel:hover {
background-color: #869aa7
}
.alert.form .alert-actions {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.checkbox {
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.checkbox .checkbox-inner {
width: 18px;
height: 18px;
position: relative;
vertical-align: top;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.checkbox .checkbox-inner:after,
.checkbox .checkbox-inner:before {
content: ''
}
.checkbox .checkbox-inner span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #cdcdcd;
-webkit-transition: .24s;
transition: .24s;
border-radius: 2px;
box-sizing: border-box
}
.checkbox .checkbox-inner+span {
margin-left: 8px
}
.checkbox .checkbox-inner input[type=checkbox] {
display: none
}
.checkbox .checkbox-inner input[type=checkbox]:checked+span {
background-color: #738bd7;
border-color: #738bd7
}
.checkbox .checkbox-inner input[type=checkbox]:checked+span:after {
content: "";
position: absolute;
top: 0;
left: 4px;
display: table;
width: 4px;
height: 10px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.checkbox .checkbox-inner input[type=checkbox]:disabled+span {
border-color: #cdcdcd;
background-color: #f3f3f3;
cursor: not-allowed
}
.checkbox .checkbox-inner input[type=checkbox]:checked:disabled+span {
background-color: #c9d2f0;
border-color: #c9d2f0
}
.Select,
.Select-control {
position: relative
}
.Select-control {
overflow: hidden;
background-color: #fff;
border: 1px solid #ccc;
border-color: #d9d9d9 #ccc #b3b3b3;
border-radius: 4px;
box-sizing: border-box;
color: #333;
cursor: default;
outline: none;
padding: 8px 52px 8px 10px
}
.Select-control:hover {
box-shadow: 0 1px 0 rgba(0, 0, 0, .06)
}
.is-searchable.is-open>.Select-control {
cursor: text
}
.is-open>.Select-control {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #fff;
border-color: #b3b3b3 #ccc #d9d9d9
}
.is-open>.Select-control>.Select-arrow {
border-color: transparent transparent #999;
border-width: 0 5px 5px
}
.is-searchable.is-focused:not(.is-open)>.Select-control {
cursor: text
}
.is-focused:not(.is-open)>.Select-control {
border-color: #08c #0099e6 #0099e6;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 5px -1px rgba(0, 136, 204, .5)
}
.Select-placeholder {
color: #aaa;
padding: 8px 52px 8px 10px;
position: absolute;
top: 0;
left: 0;
right: -15px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.has-value>.Select-control>.Select-placeholder {
color: #333
}
.Select-value {
color: #aaa;
padding: 8px 52px 8px 10px;
position: absolute;
top: 0;
left: 0;
right: -15px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.has-value>.Select-control>.Select-value {
color: #333
}
.Select-input>input {
cursor: default;
background: none transparent;
box-shadow: none;
height: auto;
border: 0 none;
font-family: inherit;
font-size: inherit;
margin: 0;
padding: 0;
outline: none;
display: inline-block;
-webkit-appearance: none
}
.is-focused .Select-input>input {
cursor: text
}
.Select-control:not(.is-searchable)>.Select-input {
outline: none
}
.Select-loading {
-webkit-animation: Select-animation-spin .4s infinite linear;
animation: Select-animation-spin .4s infinite linear;
width: 16px;
height: 16px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid #ccc;
border-right-color: #333;
display: inline-block;
position: relative;
margin-top: -8px;
position: absolute;
right: 30px;
top: 50%
}
.has-value>.Select-control>.Select-loading {
right: 46px
}
.Select-clear {
color: #999;
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 6px 10px;
position: absolute;
right: 17px;
top: 0
}
.Select-clear:hover {
color: #c0392b
}
.Select-clear>span {
font-size: 1.1em
}
.Select-arrow-zone {
right: 0;
top: 0;
bottom: 0;
width: 30px
}
.Select-arrow,
.Select-arrow-zone {
content: " ";
display: block;
position: absolute;
cursor: pointer
}
.Select-arrow {
border-color: #999 transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
height: 0;
margin-top: -ceil(2.5px);
right: 10px;
top: 14px;
width: 0
}
.Select-menu-outer {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fff;
border: 1px solid #ccc;
border-top-color: #e6e6e6;
box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
box-sizing: border-box;
margin-top: -1px;
max-height: 200px;
position: absolute;
top: 100%;
width: 100%;
z-index: 1000;
-webkit-overflow-scrolling: touch
}
.Select-menu {
max-height: 198px;
overflow-y: auto
}
.Select-option {
box-sizing: border-box;
color: #666;
cursor: pointer;
display: block;
padding: 8px 10px
}
.Select-option:last-child {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.Select-option.is-focused {
background-color: #f2f9fc;
color: #333
}
.Select-option.is-disabled {
color: #ccc;
cursor: not-allowed
}
.Select-noresults,
.Select-search-prompt,
.Select-searching {
box-sizing: border-box;
color: #999;
cursor: default;
display: block;
padding: 8px 10px
}
.Select.is-multi .Select-control {
padding: 2px 52px 2px 3px
}
.Select.is-multi .Select-input {
vertical-align: middle;
border: 1px solid transparent;
margin: 2px;
padding: 3px 0
}
.Select-item {
background-color: #f2f9fc;
border-radius: 2px;
border: 1px solid #c9e6f2;
color: #08c;
display: inline-block;
font-size: 1em;
margin: 2px
}
.Select-item-icon,
.Select-item-label {
display: inline-block;
vertical-align: middle
}
.Select-item-label {
cursor: default;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
padding: 3px 5px
}
.Select-item-label .Select-item-label__a {
color: #08c;
cursor: pointer
}
.Select-item-icon {
cursor: pointer;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-right: 1px solid #c9e6f2;
padding: 2px 5px 4px
}
.Select-item-icon:focus,
.Select-item-icon:hover {
background-color: #ddeff7;
color: #0077b3
}
.Select-item-icon:active {
background-color: #c9e6f2
}
.Select.is-multi.is-disabled .Select-item {
background-color: #f2f2f2;
border: 1px solid #d9d9d9;
color: #888
}
.Select.is-multi.is-disabled .Select-item-icon {
cursor: not-allowed;
border-right: 1px solid #d9d9d9
}
.Select.is-multi.is-disabled .Select-item-icon:active,
.Select.is-multi.is-disabled .Select-item-icon:focus,
.Select.is-multi.is-disabled .Select-item-icon:hover {
background-color: #f2f2f2
}
@-webkit-keyframes Select-animation-spin {
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn)
}
}
.avatar-uploader {
text-align: center;
font-size: 12px
}
.avatar-uploader .avatar-uploader-inner {
display: inline-block;
width: 138px;
height: 138px;
border: 5px solid #ebebeb;
border-radius: 138px;
margin-bottom: 10px;
background-color: #738bd7;
background-size: 128px 128px;
background-position: center center;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
-webkit-transition: box-shadow .1s;
transition: box-shadow .1s
}
.avatar-uploader .avatar-uploader-inner>* {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
pointer-events: none;
color: #fff
}
.avatar-uploader .avatar-uploader-inner .avatar-uploader-acronym {
font-size: 40px
}
.avatar-uploader .avatar-uploader-inner .avatar-uploader-hint {
visibility: hidden;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
line-height: 12px;
white-space: pre
}
.avatar-uploader .avatar-uploader-inner .file-input,
.avatar-uploader .avatar-uploader-inner input[type=file] {
pointer-events: auto
}
.avatar-uploader .avatar-uploader-inner:hover {
box-shadow: inset 0 0 120px rgba(0, 0, 0, .75)
}
.avatar-uploader .avatar-uploader-inner:hover .avatar-uploader-acronym {
visibility: hidden
}
.avatar-uploader .avatar-uploader-inner:hover .avatar-uploader-hint {
visibility: visible
}
.avatar-uploader a {
font-weight: 700;
display: block;
color: #697ec4;
text-decoration: none;
cursor: pointer
}
.avatar-uploader a:hover {
color: #4056a2
}
.avatar-uploader small {
display: block;
font-size: 10px;
color: #87909c
}
.avatar-uploader small strong {
font-weight: 700
}
.create-guild-container {
width: 520px;
height: 420px;
overflow: hidden;
border-radius: 5px;
box-sizing: border-box;
background-color: #fff;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.create-guild-container .form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.create-guild-container .form,
.create-guild-container .form .form-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.create-guild-container .form-actions {
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.create-guild-container .form-actions .btn-default {
text-transform: uppercase;
font-size: 12px;
color: #99aab5
}
.create-guild-container .form-actions .btn-default:before {
content: ' ';
background-image: url(/assets/eb57a76361c43375bf23207ad2acc631.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: 18px, 12px;
padding-right: 18px;
margin-right: 10px
}
.create-guild-container p {
text-align: center;
line-height: 1.2;
font-weight: 600;
font-size: 18px;
color: #99aab5;
padding: 10px 0;
margin: 0
}
.create-guild-container h5 {
text-transform: uppercase;
text-align: center;
font-weight: 700;
line-height: 1.3;
font-size: 18px;
color: #738bd7
}
.create-guild-container .join-server h5 {
color: #43b581
}
.create-guild-container .join-server .form-inner {
padding-left: 75px;
padding-right: 75px;
padding-bottom: 0
}
.create-guild-container .join-server .btn-primary {
width: 100px;
background-color: #43b581
}
.create-guild-container .join-server .btn-primary:hover {
background-color: #3ca374
}
.create-guild-container .join-server .instructions {
margin-top: 14px
}
.create-guild-container .join-server .instructions p {
margin-bottom: 4px
}
.create-guild-container .join-server .error {
color: #f04747
}
.create-guild-container .join-server .sample-link {
color: #738bd7;
padding: 0;
margin-bottom: 3px;
font-size: 14px
}
.create-guild-container .join-server .link-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.create-guild-container .join-server .link-container input {
border: 1px solid #99aab5;
border-radius: 3px;
margin-top: 20px;
height: 44px;
padding: 0 10px;
box-sizing: border-box
}
.create-guild-container .join-server .link-container input:focus {
border-bottom: 1px solid #99aab5;
margin-bottom: 1px
}
.create-guild-container .join-server .link-container input.error {
border-color: #f04747
}
.create-guild-container .join-server .link-container label {
margin-top: 4px;
color: #99aab5;
text-transform: none;
font-weight: 400
}
.create-guild-container .create-guild .guild-form {
overflow: hidden;
margin-top: 14px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.create-guild-container .create-guild .guild-form .control-group {
margin-top: 32px
}
.create-guild-container .create-guild .guild-form .control-group input[disabled] {
background-color: transparent;
cursor: not-allowed;
font-style: italic
}
.create-guild-container .create-guild .guild-form .control-group:first-child {
margin-top: 0
}
.create-guild-container .create-guild .guild-form li {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0
}
.create-guild-container .create-or-join {
position: absolute;
top: 0;
left: 0
}
.create-guild-container .create-or-join .form-inner {
padding: 30px 24px;
width: 520px;
height: 420px;
box-sizing: border-box;
background-color: #fff;
background-image: url(/assets/f877708c7a418c661952af6fa33e6bd9.png), url(/assets/abc55f06ea0b2654c2855d6c00f62f69.png);
background-position: left bottom, right bottom;
background-size: 155px auto, 75px auto;
background-repeat: no-repeat
}
.create-guild-container .create-or-join header {
text-align: center;
padding: 0;
margin-top: 6px;
margin-bottom: 40px;
font-size: 18px
}
.create-guild-container .create-or-join .actions {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.create-guild-container .create-or-join .actions .or {
position: absolute;
left: 0;
top: 0;
background-image: url(/assets/b9cf5548cc5a23a6943f194a0ace88f8.svg);
width: 100%;
height: 100%;
padding-top: 48px;
background-position: center, center;
background-size: 52px, 52px;
background-repeat: no-repeat;
pointer-events: none;
color: #99aab5;
font-size: 22px;
text-align: center;
line-height: 368px;
font-weight: 600
}
.create-guild-container .action {
text-align: center;
width: 228px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 3px;
background: hsla(0, 0%, 100%, .75);
overflow: hidden;
padding: 10px;
box-sizing: border-box;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
cursor: pointer
}
.create-guild-container .action:hover.join .btn {
background-color: #369368!important
}
.create-guild-container .action:hover.create .btn {
background-color: #5976d0
}
.create-guild-container .action+.action {
margin-left: 16px
}
.create-guild-container .action .action-header {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
margin-top: 20px
}
.create-guild-container .action .action-body {
margin-top: 16px;
font-size: 14px;
padding: 0 15px;
font-weight: 500;
color: #99aab5;
line-height: 20px
}
.create-guild-container .action .action-icon {
width: 100%;
margin: 26px 0
}
.create-guild-container .action .btn {
width: 100%;
padding: 14px 20px
}
.create-guild-container .action.create .action-header {
color: #738bd7
}
.create-guild-container .action.create .action-icon {
background: url(/assets/b53510e4d14d4a0da7d44642485f4c40.png) center center no-repeat;
height: 78px;
background-size: 112px 78px
}
.create-guild-container .action.join .action-header {
color: #3ca374
}
.create-guild-container .action.join .action-icon {
background: url(/assets/42903393be66996f7a8c1e22d473a724.png) center center no-repeat;
height: 78px;
background-size: 178.5px 78px
}
.create-guild-container .action.join .btn {
background-color: #3ca374
}
.tab-bar-item {
cursor: pointer
}
.tab-bar-item.selected {
pointer-events: none;
cursor: default
}
.tab-bar.TOP {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 28px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.tab-bar.TOP .tab-bar-item {
display: inline-block;
padding-bottom: 15px;
margin-bottom: -1px;
font-size: 14px;
font-weight: 600;
color: #87909c
}
.tab-bar.TOP .tab-bar-item+.tab-bar-item {
margin-left: 12px
}
.tab-bar.TOP .tab-bar-item:hover {
border-bottom: 2px solid #87909c
}
.tab-bar.TOP .tab-bar-item.selected {
border-bottom: 2px solid #738bd7;
color: #738bd7
}
.tab-bar.SIDE {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.tab-bar.SIDE .tab-bar-header,
.tab-bar.SIDE .tab-bar-item {
display: inline-block;
font-size: 14px;
line-height: 1.25em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative
}
.tab-bar.SIDE .tab-bar-header {
font-weight: 700;
text-transform: uppercase;
color: #fff;
cursor: default;
overflow: hidden;
padding-top: 20px;
padding-left: 18px;
padding-bottom: 20px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
white-space: normal
}
.tab-bar.SIDE .tab-bar-item {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
text-decoration: none;
font-weight: 500;
padding: 8px 6px 10px 20px;
color: hsla(0, 0%, 100%, .3)
}
.tab-bar.SIDE .tab-bar-item:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
border-left: 4px solid #738bd7;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.tab-bar.SIDE .tab-bar-item.selected,
.tab-bar.SIDE .tab-bar-item:hover {
background: -webkit-linear-gradient(left, #33363b 85%, null);
background: linear-gradient(to right, #33363b 85%, null);
color: #fff
}
.tab-bar.SIDE .tab-bar-item:hover {
font-weight: 500
}
.tab-bar.SIDE .tab-bar-item:hover:before {
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.tab-bar.SIDE .tab-bar-item.selected:before {
opacity: 1;
-ms-filter: none;
filter: none
}
.btn-help {
background: #87909c;
color: #fff;
font-size: 12px;
line-height: 12px;
width: 16px;
height: 16px;
border-radius: 16px;
margin-left: 6px;
display: inline-block;
padding: 0;
box-sizing: border-box;
text-align: center;
cursor: help;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.btn-help:hover {
background: #738bd7
}
#permissions ul {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 0
}
#permissions ul,
#permissions ul li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
#permissions ul li {
margin: 0;
margin-bottom: 20px;
width: 50%;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
#permissions:first-child>div:first-child>h1 {
margin-top: 0
}
#permissions .permissions-helpdesk {
margin: 20px 0;
display: block;
color: #697ec4;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-weight: 700
}
#permissions .permissions-helpdesk:hover {
color: #4056a2
}
#permissions .permission-actions {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-size: 16px;
background: none;
padding: 5px 0;
margin: 0;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
cursor: pointer
}
#permissions .permission-actions.disabled {
pointer-events: none;
cursor: not-allowed
}
#permissions .permission-actions.disabled>div {
border-color: #cdcdcd;
background-color: #f3f3f3;
cursor: not-allowed
}
#permissions .permission-actions.disabled>div.ALLOW,
#permissions .permission-actions.disabled>div.DENY {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
#permissions .permission-actions>div {
border-radius: 2px;
background-color: #fff;
width: 18px;
height: 18px;
border: 2px solid #cdcdcd;
margin-right: 5px;
-webkit-transition: .24s;
transition: .24s;
position: relative;
box-sizing: border-box
}
#permissions .permission-actions>div.PASSTHROUGH:after {
border: 2px solid #cdcdcd;
position: absolute;
top: 1px;
left: 5px;
content: '';
display: table;
border-top-width: 0;
border-left-width: 0;
border-bottom-width: 0;
width: 0;
height: 12px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
#permissions .permission-actions>div.PASSTHROUGH:hover {
border-color: #b8b8b8
}
#permissions .permission-actions>div.ALLOW {
background-color: #43b581;
border-color: #43b581
}
#permissions .permission-actions>div.ALLOW:after {
content: '';
position: absolute;
top: 0;
left: 4px;
display: table;
width: 4px;
height: 10px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
#permissions .permission-actions>div.ALLOW:hover {
background-color: #328861;
border-color: #328861
}
#permissions .permission-actions>div.DENY {
background-color: #f04747;
border-color: #f04747
}
#permissions .permission-actions>div.DENY:after,
#permissions .permission-actions>div.DENY:before {
border: 2px solid #fff;
position: absolute;
top: 1px;
content: '';
display: table;
border-top-width: 0;
border-left-width: 0;
border-bottom-width: 0;
width: 0;
height: 12px
}
#permissions .permission-actions>div.DENY:after {
left: 6px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
#permissions .permission-actions>div.DENY:before {
left: 5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
#permissions .permission-actions>div.DENY:hover {
background-color: #d81212;
border-color: #d81212
}
#settings-roles-pro-tip {
float: left;
width: 500px;
text-align: left;
font-size: 12px;
color: #99aab5;
font-weight: 600;
height: 36px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
#settings-roles-pro-tip .pro-tip {
color: #43b581;
font-variant: small-caps;
font-weight: 700;
text-transform: uppercase
}
#settings-roles-pro-tip p {
margin: 0;
padding: 0
}
#settings-roles {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
#settings-roles,
#settings-roles h1 {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
#settings-roles h1 {
color: #87909c;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
margin: 20px 0;
font-size: 11px;
text-transform: uppercase;
font-weight: 700
}
#settings-roles .roles {
width: 190px;
box-sizing: border-box;
border-right: 1px solid #f0f0f0;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
#settings-roles .roles,
#settings-roles .roles header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
#settings-roles .roles header {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
margin: 0 38px 0 16px;
padding: 0;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
min-height: 54px;
cursor: pointer;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
opacity: .75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75)
}
#settings-roles .roles header:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
#settings-roles .roles header h1 {
margin: 0;
margin-left: 6px;
height: 10px
}
#settings-roles .roles header .btn-help {
margin-left: 0
}
#settings-roles .roles header .create-role-button {
background: url(/assets/627f703ca7ac41761322ae378800608a.svg) no-repeat center center;
background-size: 10px 10px;
width: 10px;
height: 10px;
content: ' ';
padding: 0
}
#settings-roles .roles header .create-role-button.popout-open {
opacity: 1;
-ms-filter: none;
filter: none
}
#settings-roles .roles .scroller {
margin: 0!important;
padding: 0!important
}
#settings-roles .roles li {
font-weight: 600;
font-size: 14px;
color: #87909c;
line-height: 38px;
min-height: 38px;
position: relative;
padding: 0 38px;
padding-right: 21px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
#settings-roles .roles li.draggable {
cursor: pointer
}
#settings-roles .roles li .avatar-small {
margin-top: 0;
margin-right: 6px;
width: 24px;
height: 24px;
background-size: 24px 24px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
#settings-roles .roles li:before {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 5px;
height: 38px
}
#settings-roles .roles li:hover {
background: -webkit-linear-gradient(left, #fbfbfb, #fff);
background: linear-gradient(to right, #fbfbfb, #fff)
}
#settings-roles .roles li:hover:before {
background-color: #9daee3
}
#settings-roles .roles li.selected {
background: -webkit-linear-gradient(left, #f9f9f9, #fff);
background: linear-gradient(to right, #f9f9f9, #fff)
}
#settings-roles .roles li.selected:before {
color: #738bd7;
background-color: #738bd7
}
#settings-roles .roles li.sorting:after {
position: absolute;
top: 0;
left: 0;
right: 0;
border: 2px solid #738bd7;
content: ' '
}
#settings-roles .roles li.sorting.sorting-after:after {
top: auto;
bottom: 0
}
#settings-roles .control-group .disabled-for-everyone {
font-weight: 500;
text-transform: none;
color: transparent;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
margin-left: 6px
}
#settings-roles .control-group:hover .disabled-for-everyone {
color: #f04747
}
#settings-roles .selected-role {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
#settings-roles .selected-role .selected-role-inner {
padding-left: 38px;
padding-right: 21px;
padding-top: 20px;
white-space: nowrap
}
#settings-roles .selected-role .control-group {
margin-bottom: 40px
}
#settings-roles .selected-role .btn-confirm {
margin-bottom: 20px
}
#settings-roles .managed-role-explaination {
border-radius: 5px;
background: #f26522;
padding: 10px 15px;
margin-bottom: 40px;
color: #fff;
white-space: initial;
font-weight: 600;
font-size: 14px;
line-height: 16px
}
.color-picker {
margin-top: 9px
}
.color-picker,
.color-picker .swatches {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.color-picker .swatches {
position: relative;
z-index: 10
}
.color-picker .swatches.disabled,
.color-picker .swatches.disabled .swatch {
cursor: not-allowed
}
.color-picker .swatches .regulars {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 300px
}
.color-picker .swatches .swatch {
cursor: pointer;
width: 20px;
height: 20px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
position: relative;
z-index: initial
}
.color-picker .swatches .swatch.selected:after {
position: relative;
z-index: -1;
display: inline-block;
content: ' ';
background-color: #54c7fc;
border-radius: 4px;
width: 26px;
height: 26px;
margin-top: -3px;
margin-left: -3px;
-webkit-animation: fadeIn linear .1s;
animation: fadeIn linear .1s
}
.color-picker .swatches .default {
width: 50px;
height: 50px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
border-radius: 4px;
background-color: #99aab5;
margin-right: 10px
}
.color-picker .swatches .default.selected:after {
width: 56px;
height: 56px
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
to {
opacity: 1;
-ms-filter: none;
filter: none
}
}
@keyframes fadeIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
to {
opacity: 1;
-ms-filter: none;
filter: none
}
}
.avatar-xlarge {
width: 60px;
height: 60px;
background-size: 60px 60px;
border-radius: 30px;
background-clip: padding-box;
position: relative;
background-color: none;
background-position: center center
}
.avatar-xlarge .status {
width: 14px;
height: 14px;
border-radius: 9px;
background-clip: padding-box;
position: absolute;
right: -4px;
bottom: -4px;
pointer-events: none
}
.avatar-large {
width: 40px;
height: 40px;
background-size: 40px 40px;
border-radius: 20px;
background-clip: padding-box;
position: relative;
background-color: none
}
.avatar-large .status {
width: 14px;
height: 14px;
border-radius: 9px;
background-clip: padding-box;
position: absolute;
right: -4px;
bottom: -4px;
pointer-events: none
}
.avatar-small {
width: 30px;
height: 30px;
background-size: 30px 30px;
border-radius: 20px;
background-clip: padding-box;
position: relative;
background-color: none;
float: left;
margin-top: 6px;
margin-right: 10px
}
.avatar-small .status {
width: 10px;
height: 10px;
border-radius: 7px;
background-clip: padding-box;
position: absolute;
right: -3px;
bottom: -3px;
pointer-events: none
}
.avatar-small.animate {
-webkit-transition: background-image .3s;
transition: background-image .3s
}
.avatar-small.animate .status {
-webkit-transition: width .2s ease, right .2s ease, background-color .2s ease;
transition: width .2s ease, right .2s ease, background-color .2s ease
}
.online {
background-color: #43b581
}
.idle {
background-color: #faa61a
}
.muted {
background-color: #f04747
}
.offline {
background-color: #747f8d
}
#autocomplete-popout {
width: 250px
}
#autocomplete-popout button,
#autocomplete-popout input:focus,
#autocomplete-popout textarea {
outline: none
}
#autocomplete-popout::-webkit-input-placeholder {
color: #dadddf;
font-weight: 300
}
#autocomplete-popout header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 54px;
padding: 0 20px
}
#autocomplete-popout section {
padding: 0
}
#autocomplete-popout h3 {
color: #c9d2f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 0;
margin-right: 5px
}
#autocomplete-popout input[type=text] {
color: #fff;
font-size: 16px;
font-weight: 500;
border: none;
background: none;
padding: 0;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-bottom: 1px
}
#autocomplete-popout .scroller {
height: 280px
}
#autocomplete-popout .empty,
#autocomplete-popout .row,
#autocomplete-popout .section {
padding: 0 20px;
line-height: 44px
}
#autocomplete-popout .empty:last-of-type,
#autocomplete-popout .row:last-of-type,
#autocomplete-popout .section:last-of-type {
border-radius: 0 0 3px 3px
}
#autocomplete-popout .section {
color: #87909c;
text-transform: uppercase;
font-size: 11px;
font-weight: 700
}
#autocomplete-popout .row {
color: #747f8d;
margin: 0;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
#autocomplete-popout .row .avatar-small .status {
border: 2px solid #fff
}
#autocomplete-popout .row a {
color: #747f8d
}
#autocomplete-popout .row:after {
border-bottom: none!important
}
#autocomplete-popout .row.selected,
#autocomplete-popout .row:hover {
background: -webkit-linear-gradient(left, #ebebeb, #fff);
background: linear-gradient(to right, #ebebeb, #fff)
}
#autocomplete-popout .row.selected a,
#autocomplete-popout .row:hover a {
color: #2e3136
}
#autocomplete-popout .row.selected .status,
#autocomplete-popout .row:hover .status {
border: 2px solid #ebebeb
}
#autocomplete-popout .empty h4 {
color: #738bd7;
font-size: 16px;
font-weight: 700;
text-align: center;
margin: 15px 0 0
}
#autocomplete-popout .empty p {
color: #737f8d;
font-size: 16px;
text-align: center;
margin: -20px 0 18px
}
#autocomplete-popout .empty:hover {
background-color: #fff;
cursor: default
}
.member-roles {
margin-top: 2px
}
.member-roles .member-role {
background-color: #f9f9f9;
border-radius: 3px;
border: 1px solid #f0f0f0;
font-size: 12px;
line-height: 12px;
color: #737f8d;
font-weight: 600;
padding: 2px 4px;
display: inline-block;
margin-right: 4px
}
.member-roles .member-role>.name {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.member-roles .member-role>* {
vertical-align: bottom
}
.member-roles .member-role span {
display: inline-block
}
.member-roles .member-role .member-role-remove {
background: url(/assets/a5e3655b01a07896c9b148d40f838f4c.svg) center center no-repeat;
width: 6px;
height: 12px;
background-size: 6px;
border: none;
margin: 0;
padding: 0;
margin-left: 12px
}
.member-roles .member-role .member-role-add {
background: url(/assets/c642d6863d64e7acd15794836424ae2a.svg) center center no-repeat;
width: 7px;
height: 12px;
background-size: 7px;
border: none;
margin: 0;
padding: 0
}
.member-roles .manipulate:hover {
border-color: #dbdde1
}
.clipboard-input h2 {
margin-top: 0
}
.clipboard-input-copied .clipboard-input-inner {
border-color: #43b581
}
.clipboard-input-copied button:not(.tweet) {
border-color: #43b581!important;
background-color: #43b581!important;
background-image: url(/assets/347525ee5c5d59f9217d1c04eb88617d.svg)!important
}
.clipboard-input-copied input::selection {
background: #43b581!important
}
.clipboard-input-tweeted .clipboard-input-inner {
border-color: #00aced
}
.clipboard-input-tweeted button:not(.copy) {
border-color: #00aced!important;
background-color: #00aced!important;
background-image: url(/assets/f44547176db6cb7afeaed2fc94dbf56a.svg)!important
}
.clipboard-input-tweeted input::selection {
background: #00aced!important
}
.clipboard-input-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
background: #fff;
border: 1px solid #e1e3e5;
border-radius: 3px;
box-sizing: border-box;
overflow: hidden
}
.clipboard-input-inner input {
padding-left: 6px;
outline: none;
border: none;
color: #747f8d;
font-size: 14px;
font-weight: 600;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 14px!important
}
.clipboard-input-inner input::selection {
background: #738bd7;
color: #fff
}
.clipboard-input-inner input~span {
width: 30px;
height: 30px
}
.clipboard-input-inner button {
border-left: 1px solid #e1e3e5;
width: 40px;
height: 40px;
background-color: #f3f3f3;
background-size: 16px 16px;
background-position: center center;
background-repeat: no-repeat;
position: relative
}
.clipboard-input-inner button.copy {
background-image: url(/assets/aac8cfe21a4d6aa0fca412ada650141a.svg)
}
.clipboard-input-inner button.tweet {
background-image: url(/assets/bfa588a843ae70a3aaa02bfe8c4f28f1.svg)
}
.clipboard-input-inner button:first-of-type:before {
pointer-events: none;
width: 30px;
position: absolute;
top: 0;
left: -31px;
height: 100%;
background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
background: linear-gradient(to right, hsla(0, 0%, 100%, 0), #fff);
content: ' '
}
.instant-invites {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.instant-invites,
.instant-invites .instant-invites-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.instant-invites .instant-invites-header {
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 20px;
font-weight: 700;
color: #87909c;
text-transform: uppercase;
font-size: 11px;
margin-right: -17px
}
.instant-invites .instant-invites-header>:first-child {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.instant-invites .instant-invite-buttons {
visibility: hidden
}
.instant-invites .instant-invite-buttons .btn {
min-width: 60px;
padding: 7px 9px;
margin: 0;
background: #fff;
border: 1px solid #e7e9eb;
border-radius: 3px;
color: #737f8d;
font-size: 14px;
-webkit-transition: none;
transition: none
}
.instant-invites .instant-invite-buttons .btn:hover {
background: #f3f4f5
}
.instant-invites .instant-invite-buttons .btn:active {
background: #87909c;
border-color: #87909c;
color: #fff
}
.instant-invites .instant-invite-buttons .btn.btn-danger {
border: 1px solid #fcdada;
color: #f04747
}
.instant-invites .instant-invite-buttons .btn.btn-danger:hover {
background: #fdeded
}
.instant-invites .instant-invite-buttons .btn.btn-danger:active {
background: #f04747;
border-color: #f04747;
color: #fff
}
.instant-invites .instant-invite-buttons .btn+.btn {
margin-left: 4px
}
.instant-invites .instant-invites-list {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 10px
}
.instant-invites .instant-invites-list .instant-invite {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 62px;
box-sizing: border-box;
font-size: 14px;
color: #99aab5
}
.instant-invites .instant-invites-list .instant-invite>:first-child {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.instant-invites .instant-invites-list .instant-invite .channel {
color: #4f545c;
font-weight: 600;
display: none
}
.instant-invites .instant-invites-list .instant-invite .member {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-weight: 500;
color: #2e3136;
padding-right: 5px
}
.instant-invites .instant-invites-list .instant-invite .member .avatar-small {
float: none;
display: inline-block;
margin: 0;
margin-right: 5px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.instant-invites .instant-invites-list .instant-invite .member .avatar-small .status {
border: 2px solid #fff
}
.instant-invites .instant-invites-list .instant-invite .show-channel .channel {
display: block
}
.instant-invites .instant-invites-list .instant-invite .show-channel .avatar-small {
width: 16px;
height: 16px;
background-size: 16px 16px;
margin-right: 4px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.instant-invites .instant-invites-list .instant-invite .show-channel .member {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-top: 6px;
font-weight: 500
}
.instant-invites .instant-invites-list .instant-invite .countdown {
font-size: 18px;
font-weight: 600;
color: #43b581
}
.instant-invites .instant-invites-list .instant-invite .countdown.countdown-never {
color: #87909c;
font-family: Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 40px;
font-weight: 300
}
.instant-invites .instant-invites-list .instant-invite .text:before {
content: '#';
margin-right: 2px;
color: #8a8e94;
font-weight: 300
}
.instant-invites .instant-invites-list .instant-invite:hover .instant-invite-buttons {
visibility: visible
}
.instant-invites .instant-invites-list .instant-invite .member-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 14px
}
.instant-invites .instant-invites-list .instant-invite .member-username {
color: #2e3136;
font-size: 14px;
font-weight: 500
}
.instant-invites .instant-invites-list .instant-invite+.instant-invite {
border-top: 1px solid #eceeef
}
.guild-settings-modal-integrations {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-weight: 700;
color: #87909c;
padding: 0 40px;
text-transform: uppercase;
font-size: 11px;
height: 57px;
border-bottom: 1px solid #f0f0f0;
box-shadow: 0 2px 0 hsla(200, 9%, 93%, .25)
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body {
padding-left: 14px!important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations {
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations .twitch-logo {
width: 128px;
height: 78px;
background: url(/assets/acf27060ade9e2de5973257d4e82a9e1.png) center center no-repeat;
background-size: 100% auto;
margin-bottom: 2px
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations p {
font-size: 14px;
font-weight: 700;
color: rgba(0, 0, 0, .15);
text-align: center;
text-transform: uppercase
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations p a {
color: #00b0f4;
cursor: pointer
}
.guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations p a:hover {
text-decoration: underline
}
.guild-settings-modal-integrations .integration {
box-sizing: border-box;
border-radius: 3px;
border: 2px solid transparent;
background-color: #f9f9f9
}
.guild-settings-modal-integrations .integration+.integration {
margin-top: 10px
}
.guild-settings-modal-integrations .integration .integration-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 80px;
padding: 0 15px
}
.guild-settings-modal-integrations .integration .integration-header.enabled {
border-radius: 0 0 3px 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2)
}
.guild-settings-modal-integrations .integration .integration-header .avatar-xlarge {
box-sizing: border-box;
-webkit-flex-shrink: 0;
flex-shrink: 0;
border: 3px solid hsla(0, 0%, 100%, .2);
margin-right: 14px
}
.guild-settings-modal-integrations .integration .integration-header .integration-info {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-integrations .integration .integration-header .integration-info .username {
font-size: 21px;
font-weight: 600;
color: #fff;
margin-bottom: 3px
}
.guild-settings-modal-integrations .integration .integration-header .integration-info a {
font-size: 12px;
font-weight: 400;
color: hsla(0, 0%, 100%, .6);
text-decoration: none
}
.guild-settings-modal-integrations .integration .integration-header .integration-info a:hover {
text-decoration: underline
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync {
color: #fff;
font-weight: 600;
font-size: 16px;
background: transparent;
cursor: pointer;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync,
.guild-settings-modal-integrations .integration .integration-header .integration-sync .checkbox {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync .checkbox {
margin-left: 10px;
width: 18px;
height: 18px;
border: 2px solid hsla(0, 0%, 100%, .6);
border-radius: 2px;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync .checkbox .checkbox-inner {
display: table;
width: 4px;
height: 10px;
border: 2px solid transparent;
margin-bottom: 2px;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync.syncing {
cursor: not-allowed
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync.enabled .checkbox {
background-color: #fff;
border-color: #fff
}
.guild-settings-modal-integrations .integration .integration-header .integration-sync:hover .checkbox {
border-color: hsla(0, 0%, 100%, .8)
}
.guild-settings-modal-integrations .integration .integration-options {
padding: 10px 15px 14px
}
.guild-settings-modal-integrations .integration .integration-options label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 18px;
margin-bottom: 8px
}
.guild-settings-modal-integrations .integration .integration-options .control-group+.control-group {
margin-left: 18px
}
.guild-settings-modal-integrations .integration .integration-options .btn-sync {
width: 18px;
height: 18px;
background-image: url(/assets/faa28a892f06d520db5b96efe6c07c5d.svg);
backgound-size: 18px 18px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
background-color: transparent;
margin-left: 10px
}
.guild-settings-modal-integrations .integration .integration-options .btn-sync:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-settings-modal-integrations .integration .integration-options .btn-sync:disabled {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear
}
.guild-settings-modal-integrations .integration .integration-options .synced-role a {
background: none;
font-size: 16px;
font-weight: 600;
padding: 0;
cursor: pointer
}
.guild-settings-modal-integrations .integration .integration-options .synced-role a:hover {
text-decoration: underline
}
.guild-settings-modal-integrations .integration .integration-options .synced-role span {
color: #99aab5
}
.guild-settings-modal-integrations .integration .integration-options .subscribers {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.guild-settings-modal-integrations .integration .integration-options .subscribers .num-subscribers {
font-size: 16px;
font-weight: 500;
color: #2e3136
}
.guild-settings-modal-integrations .integration .integration-options .subscribers .num-subscribers strong {
font-weight: 700
}
.guild-settings-modal-integrations .integration .integration-options .subscribers .last-sync {
font-size: 11px;
font-weight: 500;
color: #99aab5;
margin-top: 1px
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.guild-settings-modal.settings {
width: 900px;
min-height: 275px
}
.guild-settings-modal .guild-settings-modal-search {
border-radius: 18px;
outline: none;
border: 1px solid #dadddf;
box-sizing: border-box;
padding: 9px 14px 9px 38px;
width: 216px;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
background: url(/assets/9dd20e167baba5aebcd48cea0232f460.svg) 14px center no-repeat;
background-size: 14px 14px;
color: #4f545c
}
.guild-settings-modal .guild-settings-modal-search::-moz-placeholder,
.guild-settings-modal .guild-settings-modal-search::-webkit-input-placeholder {
color: #dadddf;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px
}
.guild-settings-modal .guild-settings-modal-search:focus {
border-color: #99aab5;
background-image: url(/assets/602102d93711d11b6975796def3f7d34.svg)
}
.guild-settings-modal-overview {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-overview,
.guild-settings-modal-overview .settings-panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.guild-settings-modal-overview .settings-panel {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.guild-settings-modal-overview .settings-panel>:last-child {
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.guild-settings-modal-overview .settings-panel .avatar-uploader {
margin-left: 50px
}
.guild-settings-modal-embed,
.guild-settings-modal-members {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-members {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.guild-settings-modal-members .guild-settings-modal-members-header {
border-bottom: 1px solid #f0f0f0;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
max-height: 36px
}
.guild-settings-modal-members .guild-settings-modal-members-footer,
.guild-settings-modal-members .guild-settings-modal-members-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.guild-settings-modal-members .guild-settings-modal-members-footer {
border-top: 1px solid #f0f0f0
}
.guild-settings-modal-members .guild-settings-modal-members-footer a {
color: #697ec4;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-weight: 700
}
.guild-settings-modal-members .guild-settings-modal-members-footer a:hover {
color: #4056a2
}
.guild-settings-modal-members .guild-settings-modal-members-footer .help-text {
font-size: 12px;
color: #87909c
}
.guild-settings-modal-members .guild-settings-modal-members-footer .help-text strong {
font-weight: 700
}
.guild-settings-modal-members h6 {
font-weight: 700;
font-size: 14px;
color: #99aab5;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-members .member-buttons {
visibility: hidden
}
.guild-settings-modal-members .member-buttons .btn {
min-width: 60px;
padding: 7px 9px;
margin: 0;
background: #fff;
border: 1px solid #e7e9eb;
border-radius: 3px;
color: #737f8d;
font-size: 14px;
-webkit-transition: none;
transition: none
}
.guild-settings-modal-members .member-buttons .btn:hover {
background: #f3f4f5
}
.guild-settings-modal-members .member-buttons .btn:active {
background: #87909c;
border-color: #87909c;
color: #fff
}
.guild-settings-modal-members .member-buttons .btn.btn-danger {
border: 1px solid #fcdada;
color: #f04747
}
.guild-settings-modal-members .member-buttons .btn.btn-danger:hover {
background: #fdeded
}
.guild-settings-modal-members .member-buttons .btn.btn-danger:active {
background: #f04747;
border-color: #f04747;
color: #fff
}
.guild-settings-modal-members .member-buttons .btn+.btn {
margin-left: 4px
}
.guild-settings-modal-members .guild-settings-modal-list {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-settings-modal-members .guild-settings-modal-list .member {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
color: #2e3136
}
.guild-settings-modal-members .guild-settings-modal-list .member:hover .member-buttons {
visibility: visible
}
.guild-settings-modal-members .guild-settings-modal-list .member .avatar-small {
margin: 16px 20px 16px 0;
float: none
}
.guild-settings-modal-members .guild-settings-modal-list .member .avatar-small .status {
border: 2px solid #fff
}
.guild-settings-modal-members .guild-settings-modal-list .member .member-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 14px
}
.guild-settings-modal-members .guild-settings-modal-list .member .member-username {
color: #2e3136;
font-size: 14px;
font-weight: 500
}
.guild-settings-modal-members .guild-settings-modal-list .member+.member {
border-top: 1px solid #eceeef
}
.settings {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-basis: 650px;
flex-basis: 650px;
min-height: 0;
max-height: 650px;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.settings .settings-header {
border-radius: 5px 0 0 5px;
background-color: #2e3136;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
color: #fff;
font-weight: 600;
box-shadow: 0 1px 0 rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
width: 190px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.settings .settings-right {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.settings .settings-inner,
.settings .settings-right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.settings .settings-inner {
background-color: #fff;
background-image: url(/assets/091c6c54b423141db36663321f162a74.png);
background-position: left bottom;
background-size: 100%, auto;
background-repeat: no-repeat;
min-height: 0;
overflow: hidden
}
.settings .settings-inner .settings-panel {
padding: 28px 40px
}
.settings .settings-inner .settings-panel-with-header {
padding: 14px 26px 28px 40px
}
.settings .settings-inner .settings-panel-header {
margin-left: 40px;
margin-right: 40px;
padding-top: 28px;
padding-bottom: 28px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.settings .settings-inner:first-child {
border-top-right-radius: 5px
}
.settings .settings-inner:last-child {
border-bottom-right-radius: 5px
}
.settings .settings-actions {
background-color: #f9f9f9;
border-top: 1px solid #f0f0f0;
box-sizing: border-box;
width: 100%;
padding: 18px 40px;
border-radius: 0 0 5px 0;
text-align: right;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.channel-settings-modal.settings {
width: 900px;
min-height: 165px
}
.channel-settings-modal .overview {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.radio {
cursor: pointer
}
.radio .radio-inner {
width: 28px;
height: 28px;
background: #fff;
border-radius: 15px;
position: relative;
border: 1px solid #cdcdcd;
display: inline-block
}
.radio .radio-inner+span {
margin-left: 10px
}
.radio .radio-inner input[type=radio] {
visibility: hidden
}
.radio .radio-inner input[type=radio]:checked+span:after {
opacity: 1;
-ms-filter: none;
filter: none
}
.radio .radio-inner span {
cursor: pointer;
left: 4px;
top: 4px
}
.radio .radio-inner span,
.radio .radio-inner span:after {
position: absolute;
width: 14px;
height: 14px;
border-radius: 7px
}
.radio .radio-inner span:after {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
content: '';
background: #738bd7;
top: 3px;
left: 3px;
-webkit-transition: .3s ease;
transition: .3s ease
}
.radio:hover span:after {
background: #738bd7;
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
.slider {
width: 100%;
height: 28px;
position: relative;
margin: 20px 0
}
.slider input {
display: none
}
.slider-bar {
background: #dbdde1;
border-radius: 5px;
height: 8px;
display: block;
overflow: hidden
}
.slider-bar-fill {
background: #697ec4;
height: 100%
}
.slider-handle-track {
position: absolute;
top: 0;
bottom: 0;
left: 12px;
right: 12px
}
.slider-handle {
left: 0;
width: 24px;
margin-left: -12px;
height: 24px;
top: -9px;
border-radius: 24px;
border: 1px solid #697ec4;
cursor: ew-resize
}
.slider-handle,
.slider-handle span {
position: absolute;
background-color: #fff;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .1)
}
.slider-handle span {
border: 1px solid #dbdde1;
border-radius: 5px;
top: -32px;
left: -15px;
width: 50px;
height: 22px;
line-height: 22px;
text-align: center;
font-weight: 700;
font-size: 12px;
color: #87909c;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
pointer-events: none
}
.slider-handle span:after,
.slider-handle span:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.slider-handle span:after {
border-color: transparent;
border-top-color: #fff;
border-width: 5px;
margin-left: -5px
}
.slider-handle span:before {
border-color: transparent;
border-top-color: #dbdde1;
border-width: 6px;
margin-left: -6px
}
.slider-handle:active span {
opacity: 1;
-ms-filter: none;
filter: none
}
div.control-group .shortcut-recorder {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-top: 10px
}
div.control-group .shortcut-recorder input[type=text] {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #cdcdcd;
line-height: 44px;
border-radius: 3px;
font-weight: 700;
margin-right: 10px;
margin-top: 0;
cursor: pointer;
display: inline-block;
color: transparent;
text-shadow: 0 0 0 #000;
font-size: 14px
}
div.control-group .shortcut-recorder input[type=text]:focus {
border: 1px solid red;
margin-bottom: 1px;
-webkit-animation: shortcut-recorder-pulse 1.5s infinite;
animation: shortcut-recorder-pulse 1.5s infinite
}
div.control-group .shortcut-recorder .help-text {
display: inline-block;
width: 70px;
margin: 0
}
@-webkit-keyframes shortcut-recorder-pulse {
0% {
box-shadow: 0 0 0 0 rgba(241, 71, 71, .4)
}
70% {
box-shadow: 0 0 10px 10px rgba(241, 71, 71, 0)
}
to {
box-shadow: 0 0 0 0 rgba(241, 71, 71, 0)
}
}
@keyframes shortcut-recorder-pulse {
0% {
box-shadow: 0 0 0 0 rgba(241, 71, 71, .4)
}
70% {
box-shadow: 0 0 10px 10px rgba(241, 71, 71, 0)
}
to {
box-shadow: 0 0 0 0 rgba(241, 71, 71, 0)
}
}
.user-settings-modal-connections .user-settings-modal-connections-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
padding-top: 23px!important;
padding-bottom: 5px!important
}
.user-settings-modal-connections .user-settings-modal-connections-header label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #87909c;
display: block
}
.user-settings-modal-connections .user-settings-modal-accounts-list {
padding-top: 15px;
padding-bottom: 15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
margin-left: 40px;
margin-right: 40px
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container {
margin-right: 18px;
height: 109px
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .btn {
background: #fff;
width: 70px;
height: 70px;
border: 2px solid #dadddf;
border-radius: 5px;
background-repeat: no-repeat;
background-position: center center;
background-size: 46px Auto;
-webkit-transition: box-shadow .14s ease-out;
transition: box-shadow .14s ease-out
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .btn:disabled {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
cursor: not-allowed
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .btn:hover:not([disabled]) {
box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .name {
font-size: 13px;
font-weight: 700;
color: #000;
margin-top: 12px;
text-align: center
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .count {
font-size: 11px;
font-weight: 700;
color: #43b581;
margin-top: 2px;
margin-bottom: 1px;
text-align: center
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container.disabled .btn {
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.user-settings-modal-connections .user-settings-modal-accounts-list .connect-container.disabled .count {
color: #000;
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40)
}
.user-settings-modal-connections .no-connections {
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.user-settings-modal-connections .no-connections p {
font-size: 16px;
font-weight: 700;
color: rgba(0, 0, 0, .09);
line-height: 120%;
width: 300px;
text-align: center;
text-transform: uppercase
}
.user-settings-modal-connections .user-settings-modal-connections-list {
padding: 12px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
box-shadow: 0 -1px #f0f0f0
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection {
width: 100%
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection+.connection {
margin-top: 10px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header {
height: 20px;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
padding: 5px 6px;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header .connection-icon {
width: 20px;
height: auto;
margin-right: 8px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header .connection-name {
font-size: 14px;
font-weight: medium;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header .btn-delete {
width: 16px;
height: 16px;
background-image: url(/assets/b872755ca2dc264fd0abc11a731eb9f7.svg);
backgound-size: 16px 16px;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
background-color: transparent
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header .btn-delete:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations {
border: 1px solid #eceeef;
border-top-style: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
padding: 5px;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.no-integrations {
height: 72px;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: rgba(0, 0, 0, .1);
text-transform: uppercase
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.revoked {
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 24px;
font-size: 14px;
font-weight: 600;
color: #99aab5
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.revoked a {
color: #00b0f4;
font-weight: 700;
cursor: pointer
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.revoked a:hover {
text-decoration: underline
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration {
border: 1px solid #eceeef;
border-radius: 3px;
background-color: #fff;
margin: 5px;
overflow: hidden;
width: 128px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 10px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner .avatar-xlarge {
background-color: #2e3136;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner .guild-name,
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: center;
display: block
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner .guild-name {
font-size: 14px;
font-weight: 600;
color: #2e3136;
margin-top: 8px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner a {
font-size: 12px;
color: #00b0f4;
font-weight: 600;
margin-top: 4px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .integration-inner a:hover {
text-decoration: underline
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn {
width: 100%;
height: 32px;
padding: 0;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn span {
font-size: 14px;
font-weight: 700;
text-transform: uppercase
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn.btn-join {
background-color: #43b581;
color: #fff
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn.btn-join:hover {
background-color: #369167
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn.btn-join:disabled {
cursor: default
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn.btn-join:disabled:hover {
background-color: #43b581
}
.user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration .btn.btn-joined {
background-color: #f9f9f9;
color: #43b581;
cursor: default;
border-top: 1px solid #eceeef
}
.audio-hint {
position: absolute;
color: #fff;
font-weight: 400;
font-size: 16px;
line-height: 18px;
width: 300px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.audio-hint.chrome {
left: 450px;
top: 120px
}
.audio-hint.chrome:after {
left: -100px
}
.audio-hint.firefox {
top: 20px;
left: 175px
}
.audio-hint.firefox:after {
left: -100px
}
.audio-hint:after {
width: 126px;
height: 76px;
position: absolute;
top: -7px;
content: ' ';
background: url(/assets/5bac8a5909510f58c12ee6ae724eecbb.svg) center center no-repeat;
background-size: 126px 76px
}
.audio-hint small {
display: block;
font-size: 12px;
line-height: 14px;
margin-top: 3px;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60)
}
.modal .download-apps {
position: static
}
.download-apps {
border-radius: 5px;
min-width: 880px;
min-height: 387px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.download-apps,
.download-apps .click-wrapper {
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.download-apps .click-wrapper {
text-decoration: none!important
}
.download-apps .inner {
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
margin: 10px
}
.download-apps .header {
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 22px;
padding: 20px 0;
margin: 0;
color: #737f8d
}
.download-apps .platforms-wrap {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.download-apps .platforms,
.download-apps .platforms-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.download-apps .platforms {
margin: 24px
}
.download-apps .platforms .platform {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 2px solid #99aab5;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-shrink: 0;
flex-shrink: 0;
cursor: pointer;
border-radius: 3px;
margin-left: 15px;
-webkit-font-smoothing: antialiased
}
.download-apps .platforms .platform .icon-wrap {
position: relative;
-webkit-align-self: center;
align-self: center;
-ms-flex-item-align: center;
margin: 25px 0;
width: 100px;
height: 100px
}
.download-apps .platforms .platform .icon {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
background-repeat: no-repeat;
position: absolute;
-webkit-align-self: center;
align-self: center;
-ms-flex-item-align: center;
width: 100%;
height: 100%
}
.download-apps .platforms .platform .icon.active {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.download-apps .platforms .platform .icon.apple {
background-image: url(/assets/57568e1cfc37c81cf56db9498b4f128a.svg)
}
.download-apps .platforms .platform .icon.apple.active {
background-image: url(/assets/7ddab19e24325212299490c2f413b122.svg)
}
.download-apps .platforms .platform .icon.android {
background-image: url(/assets/d73fd4014c02b360d9529a720ecb7c44.svg)
}
.download-apps .platforms .platform .icon.android.active {
background-image: url(/assets/676bfec9f4343f6fcdf0a12ae313a3de.svg)
}
.download-apps .platforms .platform .icon.windows {
background-image: url(/assets/d6221c5e88f5cb89f125868c077e9859.svg)
}
.download-apps .platforms .platform .icon.windows.active {
background-image: url(/assets/37ce528f3abf4d735a624309e990acc6.svg)
}
.download-apps .platforms .platform .icon.linux {
background-image: url(/assets/a3bee2061afed80c5bd76ff38cd18f0e.svg)
}
.download-apps .platforms .platform .icon.linux.active {
background-image: url(/assets/f8e3f6e7b2cf5f10aed43243560a1b91.svg)
}
.download-apps .platforms .platform .icon.ios {
background-image: url(/assets/0c460e9b848f5c4cc964ae9c62c0f9b9.svg)
}
.download-apps .platforms .platform .icon.ios.active {
background-image: url(/assets/00a1b0447f0474ecaa767a4bc09fe2ed.svg)
}
.download-apps .platforms .platform:first-child {
margin-left: 0
}
.download-apps .platforms .platform p {
text-transform: uppercase;
font-size: 13px;
margin: 5px 0;
text-align: center;
font-weight: 600;
color: #99aab5
}
.download-apps .platforms .platform .download-button {
-webkit-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
background-color: #99aab5;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
padding: 12px 0;
color: #fff;
width: 150px;
margin: 20px
}
.download-apps .platforms .platform.disabled {
cursor: default;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.download-apps .platforms .platform.disabled .download-button {
cursor: default!important
}
.download-apps .platforms .platform.active {
-webkit-transform: scale(1.025);
-ms-transform: scale(1.025);
transform: scale(1.025);
border-color: #738bd7
}
.download-apps .platforms .platform.active .icon {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.download-apps .platforms .platform.active .icon.active {
opacity: 1;
-ms-filter: none;
filter: none
}
.download-apps .platforms .platform.active p {
color: #697ec4
}
.download-apps .platforms .platform.active .download-button {
background-color: #738bd7
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
border-bottom: 1px solid #f0f0f0;
padding-top: 28px!important;
padding-bottom: 14px!important;
font-weight: 700;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-header .account-warning {
margin: 0!important
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-header .btn-add-keybind {
background-color: #43b581;
font-size: 14px;
font-weight: 500
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-header .btn-add-keybind:hover {
background-color: #3ca374
}
.user-settings-modal-keybinds .btn-help {
margin-left: 0;
margin-right: 8px
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list {
padding-top: 24px!important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .keybind {
width: 100%
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .keybind+.keybind {
padding: 24px 0 0;
margin: 0!important
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .control-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .control-group .Select-control {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
width: 150px;
padding-right: 16px;
margin: 0!important
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .control-group .shortcut-recorder {
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
margin: 0 16px
}
.user-settings-modal-keybinds .user-settings-modal-keybinds-list .control-group .shortcut-recorder .help-text {
display: none
}
.overlay-explaination {
border-radius: 5px;
background: #f26522;
padding: 10px 15px;
margin-bottom: 40px;
color: #fff;
white-space: initial;
font-weight: 600;
font-size: 14px;
line-height: 16px
}
.overlay-explaination strong {
font-weight: 700
}
.sensitivity {
margin-top: 28px!important
}
.sensitivity .checkbox {
margin-top: 15px
}
.sensitivity.hidden {
display: none!important
}
.sensitivity .slider {
margin-bottom: 0
}
.sensitivity .slider .slider-bar {
background-color: #43b581
}
.sensitivity .slider .slider-bar .slider-bar-fill {
background-color: #faa61a
}
.sensitivity .slider .slider-bar.microphone {
background-color: transparent;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
right: 0;
left: 0;
top: 0
}
.sensitivity .slider .slider-bar.microphone .grow {
border-left: 1px solid hsla(0, 0%, 100%, .25);
background-color: hsla(0, 0%, 100%, .5);
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.sensitivity .slider .slider-bar-auto {
background-color: #dbdde1;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear
}
.sensitivity .slider .slider-bar-auto.speaking {
background-color: #43b581
}
.sensitivity .slider .slider-handle {
border-color: #43b581
}
.sensitivity .help-text {
margin-top: 0!important
}
.sensitivity .help-text.error {
margin-top: 5px!important;
width: 50%
}
.user-settings-modal.settings {
width: 800px;
min-height: 169px
}
.user-settings-modal .settings-wrapper {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
flex-direction: column;
-webkit-box-pack: start;
-o-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start
}
.user-settings-modal .settings-wrapper,
.user-settings-modal .voice-settings {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column
}
.user-settings-modal .voice-settings {
flex-direction: column;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.user-settings-modal .voice-settings .reset-voice-settings {
color: #697ec4;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
margin-top: 20px
}
.user-settings-modal .voice-settings .reset-voice-settings:hover {
color: #4056a2
}
.user-settings-modal a {
color: #697ec4;
text-decoration: none;
cursor: pointer
}
.user-settings-modal a:hover {
color: #4056a2
}
.user-settings-modal .account-warning {
border: 1px solid #f04747;
border-radius: 5px;
background: #fdeded;
padding: 10px 15px;
margin-bottom: 40px;
color: #f04747;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.user-settings-modal .account-warning h3 {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px
}
.user-settings-modal .account-warning p {
font-weight: 600;
font-size: 12px;
line-height: 12px;
margin: 0
}
.user-settings-modal .account-warning a {
color: #f04747;
font-weight: 700
}
.user-settings-modal .account-warning a:hover {
text-decoration: underline
}
.user-settings-modal button.preview-sound {
background: none;
margin-left: 5px
}
.user-settings-modal button.preview-sound:before {
height: 16px;
width: 16px;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
background-image: url(/assets/0da483f69029c71506bfb2924ac884b4.svg);
display: inline-block;
margin-right: 5px;
margin-left: -5px;
vertical-align: top;
content: ' '
}
.user-settings-modal-account {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.user-settings-modal-account>* {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.user-settings-text-chat .help-text {
margin-left: 29px!important;
margin-top: -10px!important
}
.user-settings-locale a {
color: #00b0f4
}
.user-settings-locale a:hover {
color: #00b0f4;
text-decoration: underline
}
.user-settings-locale p {
font-size: 15px;
line-height: 17px;
color: #737f8d;
font-weight: 400;
margin-bottom: 5px;
margin-top: 5px
}
.user-settings-locale p+p {
margin-top: 0
}
.user-settings-locale .language-select+label {
margin-top: 20px
}
.user-settings-locale .help-translate {
height: 21px;
line-height: 24px;
background-image: url(/assets/52b2f82cd9ff0b70e9e3f572f72b07b2.svg);
background-repeat: no-repeat;
background-size: 28px 21px;
padding-left: 32px;
background-position: left center
}
.user-settings-locale .select-item {
background-repeat: no-repeat;
background-position: left center;
background-size: 27px 18px;
padding-left: 35px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.user-settings-locale .select-item.selected-value {
line-height: 28px;
height: auto
}
.user-settings-locale .select-item.option-value {
line-height: 20px;
height: 20px
}
.user-settings-locale .select-item .localized {
font-size: 12px;
color: #99aab5
}
.user-settings-locale .select-item .primary {
font-size: 15px;
color: #737f8d!important
}
.modal-new-user {
overflow: hidden;
min-height: 446px
}
.modal-new-user strong {
font-weight: 700
}
.modal-new-user>.steps {
background: #fff;
border-radius: 5px 5px 0 0;
width: 520px;
height: 371px;
overflow: hidden
}
.modal-new-user>.steps>li {
padding: 28px 40px;
width: 520px;
height: 371px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0
}
.modal-new-user>.steps .step-1 {
background: url(/assets/b1b5c660cab468888d7aca8750704e8f.png) no-repeat bottom
}
.modal-new-user>.steps .step-2 .guild-form {
overflow: hidden;
margin-top: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.modal-new-user>.steps .step-2 .guild-form .control-group {
margin-top: 32px
}
.modal-new-user>.steps .step-2 .guild-form .control-group input[disabled] {
background-color: transparent;
cursor: not-allowed;
font-style: italic
}
.modal-new-user>.steps .step-2 .guild-form .control-group:first-child {
margin-top: 0
}
.modal-new-user>.steps .step-2 .guild-form li {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0
}
.modal-new-user>.steps .step-3,
.modal-new-user>.steps .step-3 .instant-invite {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.modal-new-user>.steps .step-3 .instant-invite {
margin-top: 68px;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.modal-new-user>.steps .step-3 .instant-invite .clipboard-input-inner {
margin: 0 40px
}
.modal-new-user>.steps .step-3 .instant-invite .clipboard-input-inner button {
background-size: 24px;
width: 48px;
height: 48px
}
.modal-new-user>.steps .step-3 .instant-invite input {
color: #738bd7;
padding: 0 15px;
font-size: 24px;
height: 48px
}
.modal-new-user>.steps .step-3 .instant-invite h2 {
display: none
}
.modal-new-user>.steps .step-3 small {
margin-left: 40px;
margin-top: 5px;
font-size: 11px;
color: #99aab5
}
.modal-new-user p {
text-align: center;
line-height: 1.2;
font-weight: 600;
font-size: 18px;
color: #99aab5;
padding: 20px;
margin: 0
}
.modal-new-user h5 {
text-transform: uppercase;
text-align: center;
font-weight: 700;
line-height: 1.3;
font-size: 18px;
color: #738bd7
}
.modal-new-user .steps-wrap {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.modal-new-user .steps-wrap,
.modal-new-user .steps-wrap .steps {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.modal-new-user .steps-wrap .steps .divider {
background-color: #dbdde1;
border-radius: 0;
height: 4px;
width: 16px;
z-index: 0;
margin: 0
}
.modal-new-user .steps-wrap .steps li {
-webkit-transition: all .75s cubic-bezier(.64, 0, .355, 1.27);
transition: all .75s cubic-bezier(.64, 0, .355, 1.27);
background-color: #dbdde1;
border-radius: 10px;
-webkit-align-self: center;
align-self: center;
-ms-flex-item-align: center;
position: relative;
width: 12px;
height: 12px;
z-index: 1
}
.modal-new-user .steps-wrap .steps li.on,
.modal-new-user .steps-wrap .steps li.on+.divider,
.modal-new-user .steps-wrap .steps li.on:before {
background-color: #738bd7
}
.modal-new-user .steps-wrap .steps li.active {
background-color: #738bd7;
-webkit-transform: scale3d(1.666, 1.666, 1);
-ms-transform: scale3d(1.666, 1.666, 1);
transform: scale3d(1.666, 1.666, 1)
}
.modal-new-user .steps-wrap .steps li.active+.divider {
background-color: #dbdde1
}
.modal-new-user .steps-wrap .steps li:first-child {
margin-left: 0
}
.modal-new-user .steps-wrap .steps li:first-child:before {
display: none
}
.modal-new-user .form-actions {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.modal-new-user .hide {
display: none
}
.popout {
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
position: absolute;
z-index: 1000
}
.popout.popout-left {
margin-top: -20px
}
.popout.popout-left header:before {
top: 50%;
left: 100%;
border-left-color: #738bd7;
margin-top: -8px
}
.popout.popout-left.no-arrow {
margin-right: 10px
}
.popout.popout-right {
margin-top: -20px
}
.popout.popout-right header:before {
top: 50%;
right: 100%;
border-right-color: #738bd7;
margin-top: -8px
}
.popout.popout-right.no-arrow {
margin-left: 10px
}
.popout.popout-bottom {
margin-top: 14px
}
.popout.popout-bottom header:before {
left: 50%;
bottom: 100%;
border-bottom-color: #738bd7;
margin-left: -8px
}
.popout.popout-bottom.no-arrow {
margin-top: 10px
}
.popout.popout-top {
margin-top: -14px
}
.popout.popout-top section:before {
left: 50%;
top: 100%;
border-top-color: rgba(0, 0, 0, .08);
margin-left: -10px
}
.popout.popout-top section:after {
left: 50%;
top: 100%;
border-top-color: #fff;
margin-left: -8px
}
.popout.popout-top.no-arrow {
margin-bottom: 10px
}
.popout.popout-invert>* {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-direction: reverse;
-o-box-direction: reverse;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.popout.popout-invert header {
border-radius: 0 0 3px 3px
}
.popout.popout-invert section {
border-radius: 3px 3px 0 0
}
.popout.popout-invert.popout-top {
margin-top: -14px
}
.popout.popout-invert.popout-top header:before {
left: 50%;
top: 100%;
border-top-color: #738bd7;
margin-left: -8px
}
.popout.popout-invert.popout-top section:after {
visibility: hidden
}
.popout header {
background-color: rgba(115, 139, 215, .98);
padding: 13px;
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
border-radius: 3px 3px 0 0
}
.popout header:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 8px
}
.popout header:last-child {
border-radius: 3px
}
.popout.no-arrow header:before {
display: none
}
.popout section {
padding: 20px;
background-color: hsla(0, 0%, 100%, .98);
border-radius: 0 0 3px 3px
}
.popout section:after,
.popout section:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.popout section:before {
border-width: 10px
}
.popout section:after {
border-width: 8px
}
.popout p {
font-size: 14px;
color: #8a8e94;
margin: 0;
margin-bottom: 20px
}
.tooltip {
position: absolute;
background-color: #738bd7;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .1);
border-radius: 3px;
font-weight: 600;
font-size: 12px;
color: #fff;
padding: 5px 10px;
z-index: 1002;
max-width: 160px;
box-sizing: border-box;
word-wrap: break-word
}
.tooltip h1 {
margin: 0
}
.tooltip strong {
font-weight: 600
}
.tooltip:after {
border: solid transparent;
content: ' ';
width: 0;
height: 0;
pointer-events: none;
border-width: 5px
}
.tooltip.tooltip-top {
margin-top: -8px
}
.tooltip.tooltip-top:after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-top-color: #738bd7
}
.tooltip.tooltip-bottom {
margin-top: 8px
}
.tooltip.tooltip-bottom:after {
position: absolute;
bottom: 100%;
left: 50%;
border-bottom-color: #738bd7;
margin-left: -5px
}
.tooltip.tooltip-left {
margin-left: -8px
}
.tooltip.tooltip-left:after {
position: absolute;
left: 100%;
top: 50%;
border-left-color: #738bd7;
margin-top: -5px
}
.tooltip.tooltip-right {
margin-left: 8px
}
.tooltip.tooltip-right:after {
position: absolute;
right: 100%;
top: 50%;
border-right-color: #738bd7;
margin-top: -5px
}
.tooltip.tooltip-error {
background-color: #f04747
}
.tooltip.tooltip-error.tooltip-top:after {
border-top-color: #f04747
}
.tooltip.tooltip-error.tooltip-bottom:after {
border-bottom-color: #f04747
}
.tooltip.tooltip-error.tooltip-left:after {
border-left-color: #f04747
}
.tooltip.tooltip-error.tooltip-right:after {
border-right-color: #f04747
}
.tooltip.tooltip-success {
background-color: #43b581
}
.tooltip.tooltip-success.tooltip-top:after {
border-top-color: #43b581
}
.tooltip.tooltip-success.tooltip-bottom:after {
border-bottom-color: #43b581
}
.tooltip.tooltip-success.tooltip-left:after {
border-left-color: #43b581
}
.tooltip.tooltip-success.tooltip-right:after {
border-right-color: #43b581
}
.tooltip.tooltip-warning {
background-color: #faa61a
}
.tooltip.tooltip-warning.tooltip-top:after {
border-top-color: #faa61a
}
.tooltip.tooltip-warning.tooltip-bottom:after {
border-bottom-color: #faa61a
}
.tooltip.tooltip-warning.tooltip-left:after {
border-left-color: #faa61a
}
.tooltip.tooltip-warning.tooltip-right:after {
border-right-color: #faa61a
}
.button {
width: auto;
padding: 10px 20px;
font-size: 16px;
line-height: 16px;
font-weight: 500;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
position: relative;
cursor: pointer;
border-radius: 3px;
background-color: #738bd7;
color: #fff
}
.button:hover {
background-color: #697ec4
}
.tutorial-indicators .indicator {
position: absolute;
z-index: 999;
pointer-events: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.tutorial-indicators .indicator .animation-container {
position: relative;
top: -18px;
left: -18px;
-webkit-transition: opacity .2s ease-out;
transition: opacity .2s ease-out
}
.tutorial-indicators .indicator .animation-container.animating {
opacity: 1;
-ms-filter: none;
filter: none
}
.tutorial-indicators .indicator .animation-container.not-animating {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.tutorial-indicators .indicator .animation-container .top {
position: absolute;
background: url(/assets/e1969c99c7929450baa3c88fab8e244c.svg) center center no-repeat;
background-size: contain;
width: 9px;
height: 22px;
left: 18.5px;
top: -10px
}
.tutorial-indicators .indicator .animation-container .top.animating {
-webkit-animation: exclaim-loop 1.5s infinite ease-in-out forwards;
animation: exclaim-loop 1.5s infinite ease-in-out forwards
}
.tutorial-indicators .indicator .animation-container .top.not-animating {
-webkit-animation: quick-fade-out .2s forwards;
animation: quick-fade-out .2s forwards
}
.tutorial-indicators .indicator .animation-container .bottom {
position: absolute;
background: url(/assets/91efb70de850b7180044d04def863f07.svg) center center no-repeat;
background-size: contain;
width: 8px;
height: 8px;
left: 14px;
top: 14px
}
.tutorial-indicators .indicator .animation-container .bottom.animating {
-webkit-animation: dot-loop 1.5s infinite ease-in-out forwards;
animation: dot-loop 1.5s infinite ease-in-out forwards
}
.tutorial-indicators .indicator .animation-container .bottom.not-animating {
-webkit-animation: quick-fade-out .2s forwards;
animation: quick-fade-out .2s forwards
}
.tutorial-indicators .indicator .animation-container .inner-circle {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
position: absolute;
background: url(/assets/5d7b0c4b2a82d63d829b6ea591853c22.svg) center center no-repeat;
background-size: contain;
width: 30px;
height: 30px;
top: 3px;
left: 3px
}
.tutorial-indicators .indicator .animation-container .inner-circle.animating {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-animation: inner-circle-loop 1.5s infinite;
animation: inner-circle-loop 1.5s infinite
}
.tutorial-indicators .indicator .animation-container .inner-circle.animating.high-priority {
-webkit-animation: inner-circle-loop-high-priority 1.5s infinite;
animation: inner-circle-loop-high-priority 1.5s infinite
}
.tutorial-indicators .indicator .animation-container .inner-circle.not-animating {
-webkit-animation: quick-fade-out .2s forwards;
animation: quick-fade-out .2s forwards
}
.tutorial-indicators .indicator .animation-container .outer-circle {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
position: absolute;
background: url(/assets/2cf1ec0c044e0a2bdf7d818a1c8a7101.svg) center center no-repeat;
background-size: contain;
width: 36px;
height: 36px
}
.tutorial-indicators .indicator .animation-container .outer-circle.animating {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-animation: outer-circle-loop 1.5s infinite;
animation: outer-circle-loop 1.5s infinite
}
.tutorial-indicators .indicator .animation-container .outer-circle.animating.high-priority {
-webkit-animation: outer-circle-loop-high-priority 1.5s infinite;
animation: outer-circle-loop-high-priority 1.5s infinite
}
.tutorial-indicators .indicator .animation-container .outer-circle.not-animating {
-webkit-animation: quick-fade-out .2s forwards;
animation: quick-fade-out .2s forwards
}
@-webkit-keyframes exclaim-loop {
0% {
top: -10px
}
21% {
top: -14px
}
46%,
51% {
top: -10px
}
72% {
top: -14px
}
}
@keyframes exclaim-loop {
0%,
to {
top: -10px
}
21% {
top: -14px
}
46%,
51% {
top: -10px
}
72% {
top: -14px
}
to {
top: -10px
}
}
@-webkit-keyframes dot-loop {
0% {
top: 14px
}
19% {
top: 9px
}
44%,
49% {
top: 14px
}
70% {
top: 9px
}
}
@keyframes dot-loop {
0%,
95%,
to {
top: 14px
}
19% {
top: 9px
}
44%,
49% {
top: 14px
}
70% {
top: 9px
}
95%,
to {
top: 14px
}
}
@-webkit-keyframes inner-circle-loop {
0% {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
42% {
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
}
@keyframes inner-circle-loop {
0%,
to {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
42% {
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
to {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
}
@-webkit-keyframes outer-circle-loop {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
51% {
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
}
@keyframes outer-circle-loop {
0%,
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
51% {
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
}
@-webkit-keyframes inner-circle-loop-high-priority {
0% {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
42% {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
}
@keyframes inner-circle-loop-high-priority {
0%,
to {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
42% {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
to {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
}
@-webkit-keyframes outer-circle-loop-high-priority {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
51% {
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
}
@keyframes outer-circle-loop-high-priority {
0%,
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
51% {
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9)
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
}
@keyframes quick-fade-out {
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
}
.tutorial-popout {
width: 400px;
margin-top: -18px;
line-height: 120%
}
.tutorial-popout .content em {
font-style: italic
}
.tutorial-popout .content strong {
font-weight: 700
}
.tutorial-popout header {
padding: 18px;
height: 40px;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
text-transform: none;
font-size: 20px;
background-image: url(/assets/5f78c8790ce932e5a135f7d098ebc609.png);
background-repeat: no-repeat;
background-size: 400px 60px;
background-position: left bottom
}
.tutorial-popout section {
padding: 18px
}
.tutorial-popout .button-area {
padding-top: 18px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: end;
-o-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end
}
.tutorial-popout .button-area .skip-tips {
font-size: 12px;
color: #99aab5
}
.tutorial-popout .button-area .skip-tips a {
color: #738bd7;
cursor: pointer;
text-decoration: none
}
.popout-invert>.tutorial-popout {
margin-top: 40px!important
}
.chat-empty {
background: url(/assets/e3b08db8bd5ef2ac2a927fac111be220.png) center center no-repeat;
background-size: cover
}
.small-popout-box {
position: relative;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 3px
}
.option-popout {
width: 64px;
padding: 2px 0
}
.option-popout .btn-item {
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
color: #87909c;
font-size: 12px;
font-weight: 600;
text-align: center;
padding: 4px 0
}
.option-popout .btn-item:hover {
color: #2e3136;
cursor: pointer;
background-color: rgba(0, 0, 0, .05)
}
.chat {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative
}
.chat:not(.private) .user-name {
cursor: pointer
}
.chat:not(.private) .user-name:hover {
text-decoration: underline
}
.chat:not(.private) .avatar-large {
cursor: pointer;
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease
}
.chat:not(.private) .avatar-large:hover {
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80)
}
.chat .divider {
cursor: default;
margin-left: 20px;
margin-right: 6px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.chat .divider.divider-red>span {
color: #f04747;
text-transform: uppercase
}
.chat .divider.divider-red>div {
background: #f04747;
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
.chat .divider>span {
background-color: #fff;
line-height: 19px;
color: #99aab5;
font-weight: 600;
padding: 0 10px;
font-size: 14px
}
.chat .divider>div {
background: #eceeef;
content: "";
height: 1px;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.chat>.title-wrap {
border-bottom: 1px solid #eceeef;
box-shadow: 0 2px 0 hsla(200, 9%, 93%, .25);
padding: 6px 20px;
min-height: 57px;
box-sizing: border-box;
background-color: #fff;
width: 100%;
margin: 0;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.chat>.title-wrap,
.chat>.title-wrap>.title {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.chat>.title-wrap>.title {
font-size: 20px;
line-height: 20px;
letter-spacing: .04em;
color: #4f545c;
font-weight: 700;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.chat>.title-wrap>.title .channel-name {
margin-right: 5px
}
.chat>.title-wrap>.title .channel-name:before {
content: '#';
margin-right: 2px;
color: #8a8e94;
font-weight: 300
}
.chat>.title-wrap>.title .channel-name.channel-private:before {
content: '@'
}
.chat>.title-wrap>.title:hover .btn-edit {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.chat>.title-wrap>.title p {
margin: 0
}
.chat>.title-wrap>.title p+p {
margin-top: 5px
}
.chat>.title-wrap>.title>div {
font-size: 14px;
color: #747f8d;
font-weight: 600;
margin: 0;
margin-top: 7px
}
.chat>.title-wrap>.topic {
position: relative;
margin-top: 2px;
font-size: 14px;
line-height: 15px;
font-weight: 600;
color: #cdcdcd;
width: 100%;
cursor: pointer
}
.chat>.title-wrap>.topic .scroller-wrap {
box-sizing: border-box;
z-index: 50;
position: absolute;
top: 0;
left: -20px;
right: -20px;
max-height: 200px
}
.chat>.title-wrap>.topic .topic-preview {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.chat>.title-wrap>.topic .topic-full {
padding: 0 20px;
padding-bottom: 10px;
background-color: #fff;
border-bottom: 1px solid #eceeef;
box-shadow: 0 2px 0 hsla(200, 9%, 93%, .25);
white-space: pre-wrap
}
.chat>.title-wrap>.topic a {
color: #00b0f4;
-webkit-transition: .05s;
transition: .05s;
text-decoration: none
}
.chat>.title-wrap>.topic a:hover {
text-decoration: underline
}
.chat .messages-wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden
}
.chat .messages {
margin: 0;
overflow-x: hidden
}
.chat .loading-more {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.chat .loading-more .spinner {
display: inline-block;
margin: 0
}
.chat .has-more,
.chat .loading-more {
margin-top: 10px;
height: 36px
}
.chat .new-messages-bar {
position: absolute;
left: 20px;
top: 0;
-px: 0;
right: 20px;
border-radius: 0 0 3px 3px;
background-color: rgba(115, 139, 215, .9);
text-transform: capitalize;
font-weight: 500;
cursor: pointer;
color: #fff;
z-index: 1;
-webkit-transition: background-color .2s;
transition: background-color .2s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.chat .new-messages-bar button {
text-align: left;
background: none;
color: #fff;
font-weight: 600;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
padding: 6px 10px;
line-height: 14px
}
.chat .new-messages-bar button:first-child {
font-size: 14px;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.chat .new-messages-bar button:last-child {
text-transform: uppercase;
font-size: 12px;
color: #c9d2f0;
-webkit-transition: color .2s;
transition: color .2s
}
.chat .new-messages-bar button:last-child:hover {
color: #fff
}
.chat .new-messages-bar:hover {
background-color: #738bd7
}
.chat .new-messages-bar:active {
padding-top: 1px
}
.chat form {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
margin: 0 20px;
position: relative
}
.chat::-webkit-input-placeholder {
color: #dadddf
}
.message-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
padding: 20px 0;
margin-left: 20px;
margin-right: 6px;
word-wrap: break-word;
border-bottom: 1px solid #eceeef;
box-sizing: border-box
}
.message-group a {
color: #00b0f4;
-webkit-transition: .05s;
transition: .05s;
text-decoration: none
}
.message-group a:hover {
text-decoration: underline
}
.message-group .message.message-sending .message-text {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.message-group .message.message-send-failed .markup {
color: #f04747
}
.message-group .mentioned .message-text {
background: rgba(250, 166, 26, .2);
border-radius: 0 2px 2px 0;
position: relative
}
.message-group .mentioned .message-text:after {
position: absolute;
top: 0;
left: -6px;
bottom: 0;
content: ' ';
width: 2px;
background: rgba(250, 166, 26, .2);
border-left: 4px solid #faa61a;
border-radius: 2px 0 0 2px
}
.message-group .edit-message {
padding-bottom: 2px;
padding-top: 6px!important;
margin: 6px -26px 0 -80px
}
.message-group .edit-message .edit-container-outer {
margin-left: 20px;
margin-right: 6px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.message-group .edit-message .edit-container-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 20px
}
.message-group .edit-message .edit-operation {
padding: 7px 0;
color: #99aab5;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
font-weight: 600;
text-align: end
}
.message-group .edit-message .edit-operation>a {
color: #738bd7;
-webkit-transition: .05s;
transition: .05s;
text-decoration: none;
cursor: pointer
}
.message-group .edit-message .edit-operation>a:hover {
text-decoration: underline
}
.message-group .edit-message .channel-textarea {
margin: 6px 0 0
}
.message-group .edit-message .channel-textarea-inner {
border-color: #738bd7
}
.message-group .edit-message.edit-first-message {
margin-top: -6px
}
.message-group .btn-option {
visibility: hidden;
float: right;
background: url(/assets/1621314b2df1964b502c1100f82b0342.svg) center center no-repeat;
width: 16px;
height: 16px;
background-size: 16px 16px;
cursor: pointer
}
.message-group .btn-option.popout-open,
.message-group .btn-option:hover {
background: url(/assets/e6b46593ec05196770a34812a44b4e02.svg) center center no-repeat
}
.message-group .btn-option.popout-open,
.message-group .comment>div:hover .btn-option {
visibility: visible
}
.message-group.has-divider {
border-color: transparent
}
.message-group .via {
visibility: hidden;
-webkit-transition: .15s;
transition: .15s
}
.message-group .via a {
color: #99aab5;
text-decoration: underline
}
.message-group:hover .via {
visibility: visible
}
.message-group:last-of-type,
.message-group:last-of-type:after {
border-bottom: none
}
.message-group .emoji {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
margin-bottom: -5px
}
.message-group .image {
vertical-align: bottom;
max-width: 520px
}
.message-group .avatar-large {
margin-top: -2px;
margin-right: 20px
}
.message-group h2 {
margin: 0;
padding: 0
}
.message-group h2 strong {
color: #2e3136;
font-size: 16px;
font-weight: 600;
letter-spacing: 0
}
.message-group h2 span {
color: #99aab5;
font-size: 12px;
letter-spacing: 0;
font-weight: 500;
text-transform: none;
margin-left: 6px
}
.message-group .comment {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 20px
}
.message-group .comment .markup {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
color: #737f8d;
font-size: 15px;
line-height: 1.1em;
white-space: pre-wrap;
margin-top: 6px;
word-wrap: break-word
}
.message-group .comment .markup strong {
font-weight: 700
}
.message-group .comment .markup em {
font-style: italic
}
.message-group .comment .markup pre {
background: #f9f9f9;
border: 2px solid #f3f3f3;
border-radius: 5px;
max-width: 90%;
box-sizing: border-box;
font-size: 12px;
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace
}
.message-group .comment .markup pre code {
background: #f9f9f9;
text-indent: initial
}
.message-group .comment .markup code.inline {
width: auto;
height: auto;
padding: .2em;
background: #f9f9f9;
border-radius: 3px;
font-size: 85%;
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
text-indent: initial
}
.message-group .comment .edited {
font-size: 10px;
color: #99aab5;
margin-left: 3px;
cursor: pointer;
line-height: 10px
}
.message-group .comment .spinner {
margin-top: 13px;
display: block
}
.message-group .comment .attachment-image {
margin-top: 6px
}
.message-group .comment .attachment-image a,
.message-group .comment .attachment-image canvas,
.message-group .comment .attachment-image img {
display: inline-block
}
.message-group .comment .attachment-image a {
border-radius: 3px;
margin: 5px 0
}
.message-group .comment .attachment {
margin: 15px 0 5px;
zoom: 1
}
.message-group .comment .attachment:after,
.message-group .comment .attachment:before {
content: "";
display: table
}
.message-group .comment .attachment:after {
clear: both
}
.message-group .comment .attachment a,
.message-group .comment .attachment h4 {
font-size: 16px;
font-weight: 600;
padding-top: 2px;
margin: 0;
display: block
}
.message-group .comment .attachment a {
text-decoration: none
}
.message-group .comment .attachment h4 {
color: #737f8d
}
.message-group .comment .attachment .icon {
margin-right: 10px;
float: left
}
.message-group .comment .attachment .metadata {
color: #737f8d;
font-size: 11px;
margin-top: 4px
}
.message-group .comment .attachment .progress {
margin-top: 6px
}
.message-group.compact .accessory {
padding-left: 90px
}
.message-group.compact .emoji {
height: 20px;
width: 20px
}
.message-group.compact.message-group {
padding: 3px 0
}
.message-group.compact .timestamp {
display: inline-block;
width: 50px;
overflow: hidden;
text-align: right;
color: #d1d9de;
font-size: 12px;
line-height: 15px;
margin-right: 10px;
vertical-align: middle
}
.message-group.compact .message {
padding: 0;
margin: 6px 0;
line-height: 18px;
vertical-align: bottom
}
.message-group.compact .message:not(.first) .timestamp {
color: transparent!important
}
.message-group.compact .message:hover .timestamp {
color: #99aab5!important
}
.message-group.compact .message .markup {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-indent: -90px;
padding-left: 90px
}
.message-group.compact .message .markup .message-content {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial
}
.message-group.compact .message .markup.mentioned .timestamp {
color: #b2bfc8
}
.message-group.compact .message .markup .user-name {
display: inline-block;
text-indent: initial;
margin-right: 4px;
font-weight: 600!important;
font-size: 16px;
line-height: 15px;
color: #1e2124
}
.message-group.compact .edit-message {
margin-left: 0;
margin-top: 0!important;
padding-top: 2px!important
}
.message-group.compact .edit-message.edit-first-message {
padding-top: 8px!important
}
.message-group.compact .edit-message .edit-container-outer {
margin-left: 0
}
.message-group.compact .edit-message .edit-container-outer .edit-container-inner .channel-textarea {
margin-top: 0
}
.icon {
display: inline-block
}
.icon.icon-file {
width: 30px;
height: 40px;
background: url(/assets/6fa0b3f6ef250705d42d008bbd50dc79.svg) no-repeat
}
.highlight {
color: #738bd7;
background: #f1f3fb;
font-weight: 600;
-webkit-transition: background-color .05s, color .05s;
transition: background-color .05s, color .05s
}
.highlight:hover {
cursor: pointer;
color: #fff;
background-color: #738bd7
}
.highlight:active {
top: 1px
}
.mentioned .highlight,
.mentioned .highlight:hover {
background: transparent!important
}
.mentioned .highlight:hover {
color: #738bd7;
text-decoration: underline
}
.emoji {
height: 22px;
width: 22px;
margin: 0 .05em 0 .1em!important;
vertical-align: -.4em
}
#unsupported-browser {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #1b242b;
text-align: center
}
#unsupported-browser,
#unsupported-browser .wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
#unsupported-browser .wrap {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-width: 320px;
overflow: auto;
height: 100%
}
#unsupported-browser h1 {
font-weight: 700;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 22px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #fff;
margin-top: 50px;
text-transform: uppercase;
margin-bottom: 10px
}
#unsupported-browser p {
font-weight: 400;
margin: 0 auto 30px;
line-height: 18px;
max-width: 420px;
font-size: 14px;
padding: 0 20px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #949494
}
#unsupported-browser ul {
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin-bottom: 50px;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
#unsupported-browser li {
padding: 20px;
width: 188px;
margin: 10px;
border: 2px solid #282f36;
box-sizing: border-box;
border-radius: 3px;
-webkit-transition: .1s;
transition: .1s;
color: #fff
}
#unsupported-browser li div {
text-transform: uppercase;
text-align: center;
line-height: 1.5em;
font-weight: 600;
font-size: 12px
}
#unsupported-browser li:hover {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
border-color: #738bd7
}
#unsupported-browser li:hover .browser {
background-position-y: 100px
}
#unsupported-browser li:hover .btn {
background-color: #738bd7;
border-color: #738bd7;
color: #fff
}
#unsupported-browser .browser {
display: inline-block;
width: 100px;
height: 100px;
background: url(/assets/109aec0900d6892dd9b969aae23cf818.png);
background-size: 400px 200px;
margin-bottom: 28px
}
#unsupported-browser .browser.browser-discord {
background-position-x: 0
}
#unsupported-browser .browser.browser-opera {
background-position-x: 100px
}
#unsupported-browser .browser.browser-firefox {
background-position-x: 200px
}
#unsupported-browser .browser.browser-chrome {
background-position-x: 300px
}
#unsupported-browser .btn {
margin-top: 28px;
font-size: 16px;
font-weight: 600;
color: #fff;
border: 1px solid #282f36;
display: block;
padding: 10px;
box-sizing: border-box;
width: 100%;
background: transparent;
border-radius: 3px;
-webkit-transition: border .1s, background-color .1s;
transition: border .1s, background-color .1s;
text-decoration: none;
cursor: pointer
}
#unsupported-browser .btn:active {
position: relative;
top: 1px
}
.account {
height: 70px;
background: #282b30;
color: #fff;
font-size: 14px;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 10px;
border-top: 1px solid #1c1e22
}
.account,
.account .avatar-small {
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.account .avatar-small {
margin: 0
}
.account .status {
border: 2px solid #282b30
}
.account .username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.account .btn {
width: 32px;
height: 32px;
background: #2e3136;
position: relative
}
.account .btn:active {
background: #34373c;
box-shadow: inset 0 0 4px rgba(0, 0, 0, .06)
}
.account .btn:after {
content: ' ';
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
margin-right: 5px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.account .btn-mute {
border-radius: 3px 0 0 3px
}
.account .btn-mute:after {
background-image: url(/assets/c60e5f90bd86a4bcf2a60389ef6fcea1.svg)
}
.account .btn-mute:hover:after {
background-image: url(/assets/6ec9f6cfc6f5a3d9779628457f903af5.svg)
}
.account .btn-mute.disabled:after {
background-image: url(/assets/a65804e88b7c4d2dd2149bb3db64c449.svg)
}
.account .btn-mute.disabled:hover:after {
background-image: url(/assets/5760ad4be8b336d117e052cae69a672e.svg)
}
.account .btn-deafen:after {
background-image: url(/assets/0b7ed5c38508da4e4cfc72f33bae31f0.svg)
}
.account .btn-deafen:hover:after {
background-image: url(/assets/ac760ea6b6867d358b48756c75b87525.svg)
}
.account .btn-deafen.disabled:after {
background-image: url(/assets/9ccd196324cba1414811c84430d3a4ed.svg)
}
.account .btn-deafen.disabled:hover:after {
background-image: url(/assets/fcd35be28488b26b6c945ff61a481ab2.svg)
}
.account .btn-settings {
border-radius: 0 3px 3px 0
}
.account .btn-settings:after {
background-image: url(/assets/60f6b0788a5d9394b44261ef5d8ecffc.svg);
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
.account .btn-settings:hover:after {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)
}
.account .btn-deafen,
.account .btn-mute,
.account .btn-settings {
-webkit-transition: background-image .5s;
transition: background-image .5s
}
.account .btn-deafen,
.account .btn-mute {
border-right: 1px solid #1c1e22
}
.account .btn-deafen,
.account .btn-settings {
box-shadow: inset 1px 0 0 #373b42
}
.account .btn-group {
border: 1px solid #1c1e22;
border-radius: 4px;
overflow: hidden;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.links {
border-top: 1px solid #2e3136;
background: #282b30;
padding: 7px 10px;
font-size: 10px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.links li {
display: inline-block
}
.links li a {
font-weight: 600;
color: #535559;
border-bottom: 2px solid transparent;
cursor: pointer
}
.links li a:hover {
color: #dadddf
}
.links li+li {
margin-left: 6px
}
.links li+li:before {
content: '\2022';
color: #535559;
margin-right: 6px
}
.badge {
border-radius: 3px;
background-clip: padding-box;
background-color: #f04747;
box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 1px 0 hsla(0, 0%, 100%, .15);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 12px;
display: inline-block;
padding: 3px 6px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .25)
}
.btn-hamburger {
width: 60px;
height: 45px;
position: relative;
cursor: pointer;
background: transparent;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
margin-right: -20px
}
.btn-hamburger span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #fff;
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out
}
.btn-hamburger span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0
}
.btn-hamburger span:nth-child(odd) {
left: 0;
border-radius: 9px 0 0 9px
}
.btn-hamburger span:nth-child(1),
.btn-hamburger span:nth-child(2) {
top: 0
}
.btn-hamburger span:nth-child(3),
.btn-hamburger span:nth-child(4) {
top: 18px
}
.btn-hamburger span:nth-child(5),
.btn-hamburger span:nth-child(6) {
top: 36px
}
.btn-hamburger-open span:nth-child(1),
.btn-hamburger-open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.btn-hamburger-open span:nth-child(2),
.btn-hamburger-open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.btn-hamburger-open span:nth-child(1) {
left: 5px;
top: 7px
}
.btn-hamburger-open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px
}
.btn-hamburger-open span:nth-child(3) {
left: -50%
}
.btn-hamburger-open span:nth-child(3),
.btn-hamburger-open span:nth-child(4) {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.btn-hamburger-open span:nth-child(4) {
left: 100%
}
.btn-hamburger-open span:nth-child(5) {
left: 5px;
top: 29px
}
.btn-hamburger-open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px
}
.guild-header {
position: relative
}
.guild-header header {
background-color: #2e3136;
position: relative;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
color: #fff;
font-weight: 600;
padding: 28px 24px;
height: 56px;
box-shadow: 0 1px 0 #24272b, inset 0 -1px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 2;
cursor: pointer;
-webkit-transition: background-color .15s ease;
transition: background-color .15s ease
}
.guild-header header:hover {
background-color: #282b30
}
.guild-header header span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 56px
}
.guild-header header:after {
width: 100%;
height: 5px;
position: absolute;
bottom: 0;
left: 0;
content: ' '
}
.guild-header ul {
position: absolute;
top: 56px;
left: 0;
background: #282b30;
box-shadow: 0 2px 0 rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(0, 0, 0, .06);
width: 100%;
z-index: 1;
-webkit-transition: -webkit-transform .25s ease-out;
transition: transform .25s ease-out;
-webkit-transform: translate3d(0, -110%, 0);
-ms-transform: translate3d(0, -110%, 0);
transform: translate3d(0, -110%, 0);
box-sizing: border-box
}
.guild-header ul a {
color: #fff;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
font-size: 12px;
font-weight: 500;
display: block;
padding: 16px 24px;
cursor: pointer
}
.guild-header ul li:hover a {
color: #fff;
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-header.guild-header-open ul {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
}
.guild-channels {
background-color: #2e3136;
padding: 20px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-channels .icon {
background-color: transparent;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block
}
.guild-channels .icon+.icon {
margin-left: 8px
}
.guild-channels .icon-muted {
background-image: url(/assets/7d77f875e494ef93aa3a31e49c43ac30.svg)
}
.guild-channels .icon-deafened {
background-image: url(/assets/8969299703ff850a5238a8af52909a5a.svg)
}
.guild-channels .icon-instant-invite {
background-image: url(/assets/181143c7c10c902dc9183f39d1198d11.svg)
}
.guild-channels .icon-settings {
background-image: url(/assets/60f6b0788a5d9394b44261ef5d8ecffc.svg);
margin-top: 1px
}
.guild-channels .icon-lock {
background-image: url(/assets/9d85593693ca449c067d323915d57ebf.svg)
}
.guild-channels h2,
.guild-channels li {
padding: 0 20px;
padding-right: 6px
}
.guild-channels header h2 {
font-size: 12px;
color: #fff;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
text-transform: uppercase;
letter-spacing: .025em;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-transition: opacity .15s ease;
transition: opacity .15s ease;
cursor: pointer
}
.guild-channels header h2:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels header h2:hover button:after {
opacity: 1!important;
-ms-filter: none;
filter: none
}
.guild-channels header span {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guild-channels header button {
position: relative;
cursor: pointer;
background: none
}
.guild-channels header button:after {
position: absolute;
top: 0;
left: 0;
-webkit-transition: -webkit-transform .2s linear;
transition: transform .2s linear;
background: url(/assets/ce644eedd018cb94b7b1ce34aabdcc36.svg) no-repeat center center;
background-size: 10px 10px;
width: 100%;
height: 100%;
content: ' ';
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels header button:hover:after {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transition: .3s ease;
transition: .3s ease
}
.guild-channels ul {
list-style-type: none
}
.guild-channels ul+header {
margin-top: 30px
}
.guild-channels ul .channel {
font-size: 15px;
line-height: 1.25em;
position: relative;
cursor: pointer;
color: #fff;
padding: 0
}
.guild-channels ul .channel.sorting:after {
position: absolute;
top: 0;
left: 0;
right: 0;
border: 2px solid #43b581;
content: ' '
}
.guild-channels ul .channel.sorting.sorting-after:after {
top: auto;
bottom: 0
}
.guild-channels ul .channel .channel-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 5px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.guild-channels ul .channel a {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
color: #fff;
text-decoration: none;
font-weight: 500;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
text-shadow: 0 1px 1px rgba(0, 0, 0, .25)
}
.guild-channels ul .channel a:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel .icon {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.guild-channels ul .channel .icon.popout-open,
.guild-channels ul .channel .icon:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel.selected .icon,
.guild-channels ul .channel:hover .icon {
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
.guild-channels ul .channel-text a {
padding: 8px 6px 10px 20px
}
.guild-channels ul .channel-text .channel-name {
margin-right: 4px
}
.guild-channels ul .channel-text .channel-name:before {
content: '#';
color: #8a8e94!important;
margin-right: 3px;
font-weight: 600
}
.guild-channels ul .channel-text.channel-muted:not(.selected) a {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10)
}
.guild-channels ul .channel-text.selected {
background: -webkit-linear-gradient(left, #282b30 85%, #2e3136);
background: linear-gradient(to right, #282b30 85%, #2e3136)
}
.guild-channels ul .channel-text.selected a {
color: #fff;
opacity: 1;
-ms-filter: none;
filter: none;
font-weight: 500
}
.guild-channels ul .channel-text.selected:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
border-left: 4px solid #738bd7;
opacity: 1!important;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel-text:hover {
background: -webkit-linear-gradient(left, #282b30 85%, #2e3136);
background: linear-gradient(to right, #282b30 85%, #2e3136)
}
.guild-channels ul .channel-text:hover a {
color: #fff
}
.guild-channels ul .channel-text:hover:not(.unread):before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
border-left: 4px solid #738bd7;
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25)
}
.guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted) {
position: relative
}
.guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted) a {
color: #fff;
opacity: 1;
-ms-filter: none;
filter: none;
font-weight: 500
}
.guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted):before {
content: ' ';
width: 12px;
height: 12px;
border-radius: 6px;
background: #fff;
opacity: 1;
-ms-filter: none;
filter: none;
position: absolute;
top: 12px;
left: -6px
}
.guild-channels ul .channel-text .badge {
margin-top: -1px;
margin-left: 8px
}
.guild-channels ul .channel-voice {
padding: 8px 6px 10px 20px
}
.guild-channels ul .channel-voice .channel-arrow {
background: url(/assets/6ae194d3411ceac6502d081d5bcd2163.svg) no-repeat;
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-right: 8px;
width: 16px;
height: 16px;
vertical-align: top;
background-size: 8px 11px;
background-position: 60% 50%;
border-radius: 8px;
display: inline-block;
position: relative;
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.guild-channels ul .channel-voice .channel-arrow:hover {
background-color: #34373d
}
.guild-channels ul .channel-voice.collapsed .channel-arrow {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
.guild-channels ul .channel-voice:not(.locked):hover a {
color: #fff
}
.guild-channels ul .channel-voice:not(.locked):hover .channel-arrow {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel-voice.locked {
cursor: no-drop
}
.guild-channels ul .channel-voice.locked .icon-lock {
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
.guild-channels ul .channel-voice.audio a {
color: #fff;
opacity: 1!important;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel-voice.audio .channel-arrow,
.guild-channels ul .channel-voice.audio .icon-lock {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel-voice.audio li {
color: hsla(0, 0%, 100%, .5)
}
.guild-channels ul .channel-voice.drop-target {
box-shadow: inset 0 4px 0 #43b581, inset 0 -4px 0 #43b581, inset -4px 0 0 #43b581, inset 4px 0 0 #43b581;
background: rgba(67, 181, 129, .4);
z-index: 5
}
.guild-channels ul .channel-voice.drop-target:before {
visibility: hidden
}
.guild-channels ul .channel-voice.drop-target .channel-arrow {
background-color: transparent
}
.guild-channels ul .channel-voice.drop-target .channel-voice-states .avatar-small {
border-color: transparent
}
.guild-channels ul .channel-voice.drop-target .channel-voice-states li,
.guild-channels ul .channel-voice.drop-target .channel-voice-states li .draggable {
background: none;
color: #fff
}
.guild-channels ul .channel-voice.drop-target a {
color: #fff;
-webkit-transition: color .1s;
transition: color .1s
}
.guild-channels ul .channel-voice.drop-target .channel-arrow {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transition: opacity .1s;
transition: opacity .1s
}
.guild-channels ul .channel-voice-states {
margin-top: 10px;
font-size: 12px;
padding-left: 22px
}
.guild-channels ul .channel-voice-states li {
padding: 0;
font-size: 13px;
color: hsla(0, 0%, 100%, .2)
}
.guild-channels ul .channel-voice-states li>* {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.guild-channels ul .channel-voice-states li span {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-left: 2px
}
.guild-channels ul .channel-voice-states li.popout-open span {
color: #fff
}
.guild-channels ul .channel-voice-states li .icon {
opacity: 1!important;
-ms-filter: none;
filter: none
}
.guild-channels ul .channel-voice-states li .icon-muted {
background-image: url(/assets/7d77f875e494ef93aa3a31e49c43ac30.svg)
}
.guild-channels ul .channel-voice-states li .icon-deafened {
background-image: url(/assets/8969299703ff850a5238a8af52909a5a.svg)
}
.guild-channels ul .channel-voice-states li .avatar-small {
border: 2px solid transparent
}
.guild-channels ul .channel-voice-states li.speaking {
color: #fff
}
.guild-channels ul .channel-voice-states li.speaking .avatar-small {
background-color: #738bd7;
cursor: pointer;
border: 2px solid #43b581;
box-shadow: inset 0 0 0 2px #2e3136
}
.guild-channels ul .channel-voice-states li.speaking .avatar-small:hover,
.guild-channels ul .channel-voice-states li.speaking .draggable:hover .avatar-small {
border-color: #43b581
}
.guild-channels ul .channel-voice-states li:hover {
color: #fff
}
.guild-channels ul .channel-voice-states li:hover:not(.speaking) .avatar-small {
border-color: transparent
}
.guild-channels ul .channel-voice-states li .draggable {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: move
}
.guild-channels ul .channel-voice-states li .avatar-small {
display: inline-block;
float: none;
margin: 2px 5px 2px 2px;
width: 18px;
height: 18px;
background-size: 18px 18px;
background-repeat: no-repeat;
vertical-align: bottom
}
.guild-channels ul .collapsed .channel-voice-states {
margin-bottom: -3px!important
}
.guild-channels ul .collapsed .channel-voice-states li {
display: inline-block
}
.guild-channels ul .collapsed .channel-voice-states li .avatar-small {
margin-right: 2px
}
.guild-channels ul .collapsed .channel-voice-states .icon,
.guild-channels ul .collapsed .channel-voice-states span {
display: none
}
.guild-channels .toggle-muted-text-channels {
margin: 10px 0
}
.guild-channels .toggle-muted-text-channels a {
color: #fff;
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
cursor: pointer;
font-size: 11px;
text-decoration: underline;
text-transform: uppercase;
font-weight: 600;
line-height: 16px;
-webkit-transition: opacity .15s ease;
transition: opacity .15s ease;
display: block
}
.guild-channels .toggle-muted-text-channels a:before {
content: ' ';
width: 16px;
height: 16px;
background: url(/assets/d8f82ae3a677b5a1b4f5f0f20899236e.svg);
background-size: 16px 16px;
display: inline-block;
vertical-align: bottom;
margin-right: 5px;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.guild-channels .toggle-muted-text-channels a:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.guild-channels .toggle-muted-text-channels.collapse a:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
.user-popout-banned-video {
margin-bottom: 18px;
width: 100%
}
.user-popout {
width: 250px
}
.user-popout .slider {
margin: 12px 0 6px
}
.user-popout header {
font-size: 14px;
font-weight: 700;
color: #fff;
text-transform: uppercase
}
.user-popout header>* {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.user-popout header>*,
.user-popout header>* .username {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.user-popout header>* .username {
text-align: left;
text-overflow: ellipsis;
overflow: hidden
}
.user-popout .member-role {
margin-bottom: 4px
}
.user-popout .btn-group .btn {
width: 16px;
height: 16px;
background: transparent;
position: relative
}
.user-popout .btn-group .btn:after {
content: ' ';
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
margin-right: 5px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40)
}
.user-popout .btn-group .btn:hover:after {
opacity: 1;
-ms-filter: none;
filter: none
}
.user-popout .btn-group .btn+.btn {
margin-left: 8px
}
.user-popout .btn-group .btn-mute:after {
background-image: url(/assets/18377f7f3077ccb38f3663b85f968fe1.svg)
}
.user-popout .btn-group .btn-mute.disabled:after {
background-image: url(/assets/2d5b62634e7c2cfb48d0998409fe55d7.svg)
}
.user-popout .btn-group .btn-deafen:after {
background-image: url(/assets/8478b9eac3e784590f07d94fa0b14b54.svg)
}
.user-popout .btn-group .btn-deafen.disabled:after {
background-image: url(/assets/7735316a05f09e698b7f41c51301753f.svg)
}
.user-popout .user-popout-options {
padding: 12px
}
.user-popout .user-popout-options .roles-container {
margin-bottom: 16px
}
.user-popout .user-popout-options .label {
text-transform: uppercase;
font-weight: 700;
font-size: 10px;
color: #99aab5
}
.user-popout .user-popout-options .btn {
font-size: 16px;
font-weight: 600;
color: #fff;
border: 1px solid #697ec4;
disply: block;
margin-top: 6px;
padding: 7px;
width: 100%;
background-color: #738bd7;
border-radius: 3px;
-webkit-transition: border .2s, background-color .1s;
transition: border .2s, background-color .1s
}
.user-popout .user-popout-options .btn:first-of-type {
margin-top: 0
}
.user-popout .user-popout-options .btn:hover {
background-color: #697ec4
}
.user-popout .user-popout-options .btn:active {
background-color: #5e75c0;
border-color: background-color;
color: #fff
}
.user-popout .user-popout-options .btn.btn-server {
color: #f04747;
background-color: transparent;
padding: 8px 12px;
border-color: #f9b5b5
}
.user-popout .user-popout-options .btn.btn-server:hover {
border-color: #f69191;
background-color: #fef8f8
}
.user-popout .user-popout-options .btn.btn-server:active {
border-color: #f04747;
background-color: #f04747;
color: #fff
}
.instant-invite-popout {
width: 300px
}
.instant-invite-popout form {
width: auto
}
.instant-invite-popout form .btn {
width: 100%
}
.instant-invite-popout form .checkbox-group {
margin-bottom: 10px
}
.instant-invite-popout section {
padding: 15px
}
.instant-invite-popout section p {
margin: 0
}
.instant-invite-popout .instant-invite {
margin: 12px 0
}
.instant-invite-popout .actions {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.instant-invite-popout .actions .countdown {
font-size: 18px;
font-weight: 600;
color: #43b581;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.instant-invite-popout .actions .countdown.countdown-never {
color: #87909c;
font-family: Helvetica, Arial, Lucida Grande, sans-serif;
font-weight: 300
}
.instant-invite-popout a {
font-weight: 600;
font-size: 12px;
color: #99aab5;
cursor: pointer
}
.instant-invite-popout a:hover {
color: #698291
}
.instant-invite-popout hr {
border: 1px solid #f0f0f0;
border-bottom: none;
margin: 10px -15px
}
.private-channels {
background-color: #2e3136;
padding: 20px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.private-channels.empty-state:before {
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
position: absolute;
content: ' ';
width: 240px;
height: 240px;
top: 65px;
background-image: url(/assets/9fa9376ff1c2321755aeabfa5d8d6cb7.svg);
background-position: top left;
background-repeat: no-repeat;
margin-left: 20px
}
.private-channels .empty-state {
text-align: center;
width: 240px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
white-space: pre-line
}
.private-channels .empty-state .message {
font-family: Whitney;
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 15px;
margin: 70px auto 14px
}
.private-channels .empty-state .btn-primary {
width: 120px!important
}
.private-channels .status {
border: 2px solid #2e3136
}
.private-channels h2,
.private-channels li {
padding: 0 20px;
padding-right: 6px
}
.private-channels header {
position: relative
}
.private-channels header h2 {
font-size: 12px;
color: #fff;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
text-transform: uppercase;
letter-spacing: .025em;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-transition: opacity .15s ease;
transition: opacity .15s ease
}
.private-channels header h2:not(.static):hover {
opacity: 1;
-ms-filter: none;
filter: none;
cursor: pointer
}
.private-channels header h2:not(.static):hover button:after {
opacity: 1!important;
-ms-filter: none;
filter: none
}
.private-channels header h2.popout-open {
opacity: 1;
-ms-filter: none;
filter: none
}
.private-channels header span {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.private-channels header button {
position: relative;
cursor: pointer;
background: none
}
.private-channels header button:after {
position: absolute;
top: 0;
left: 0;
background: url(/assets/ce644eedd018cb94b7b1ce34aabdcc36.svg) no-repeat center center;
background-size: 10px 10px;
width: 100%;
height: 100%;
content: ' '
}
.private-channels .channel {
font-size: 14px;
line-height: 1.25em;
position: relative;
padding: 8px 6px 10px 20px;
cursor: pointer;
color: #fff
}
.private-channels .channel a {
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
color: #fff;
text-decoration: none;
font-weight: 500
}
.private-channels .channel .channel-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 5px;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.private-channels .channel .channel-game {
color: #99aab5;
font-size: 10px;
line-height: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.private-channels .channel .channel-game strong {
font-weight: 700
}
.private-channels .channel .close {
background: url(/assets/e1f34305c590f248dacaef40b0aa005f.svg) center center no-repeat;
width: 16px;
height: 16px;
content: ' ';
background-size: 16px 16px;
margin-top: -1px;
margin-right: 1px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.private-channels .channel .close:hover {
opacity: 1!important;
-ms-filter: none;
filter: none
}
.private-channels .channel .avatar-small {
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-top: 0;
margin-right: 12px;
background-color: #1e2124
}
.private-channels .channel .avatar-small:hover {
z-index: 2
}
.private-channels .channel:hover {
background: -webkit-linear-gradient(left, #282b30 85%, #2e3136);
background: linear-gradient(to right, #282b30 85%, #2e3136);
color: #fff
}
.private-channels .channel:hover .channel-name {
opacity: 1;
-ms-filter: none;
filter: none
}
.private-channels .channel:hover .channel-game,
.private-channels .channel:hover a {
color: #fff
}
.private-channels .channel:hover .status {
border-color: #2e3136
}
.private-channels .channel:hover .close {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.private-channels .channel:hover:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
border-left: 4px solid #738bd7;
opacity: .25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25)
}
.private-channels .channel.selected {
background: -webkit-linear-gradient(left, #282b30 85%, #2e3136);
background: linear-gradient(to right, #282b30 85%, #2e3136);
color: #fff
}
.private-channels .channel.selected .channel-name {
opacity: 1;
-ms-filter: none;
filter: none
}
.private-channels .channel.selected a {
color: #fff
}
.private-channels .channel.selected:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
border-left: 4px solid #738bd7;
opacity: 1!important;
-ms-filter: none;
filter: none
}
#voice-connection-popout {
width: 250px
}
#voice-connection-popout .sparkline {
height: 30px;
margin-bottom: 8px
}
#voice-connection-popout .secured {
font-size: 12px;
font-weight: 600;
color: #43b581
}
#voice-connection-popout .secured:before {
content: ' ';
background: url(/assets/0c89a0b25036b406bcbcf37701ec738f.svg) center center no-repeat;
width: 9px;
height: 12px;
background-size: 9px 12px;
display: inline-block;
margin-right: 4px;
vertical-align: bottom
}
#voice-connection-popout section {
padding: 14px 20px
}
#voice-connection-popout section p {
color: #8a8e94;
font-size: 14px;
line-height: 18px;
margin-bottom: 0;
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial
}
#voice-connection-popout section p strong {
font-weight: 700
}
#voice-connection-popout section p+p {
margin-top: 3px
}
#voice-connection-popout section a {
color: #00b0f4;
text-decoration: none
}
#voice-connection-popout section a:hover {
text-decoration: underline
}
#voice-connection-popout hr {
border: 1px solid #f0f0f0;
border-bottom: none;
margin: 14px -15px
}
#voice-connection {
background: #282b30;
color: #fff;
font-size: 14px;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 10px;
border-top: 1px solid #1c1e22;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
#voice-connection .btn {
width: 32px;
height: 32px;
background: #2e3136;
position: relative
}
#voice-connection .btn:active {
background: #34373c;
box-shadow: inset 0 0 4px rgba(0, 0, 0, .06)
}
#voice-connection .btn:after {
content: ' ';
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
margin-right: 5px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
#voice-connection .btn-group {
border: 1px solid #1c1e22;
overflow: hidden;
-webkit-flex-shrink: 0;
flex-shrink: 0;
border-radius: 3px
}
#voice-connection .btn-info {
border-right: 1px solid #1c1e22
}
#voice-connection .btn-info:after {
background-size: 8px 19px;
background-image: url(/assets/d44f38b8b37257c7684e2b3286669a0f.svg);
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
#voice-connection .btn-info:hover:after {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)
}
#voice-connection .btn-disconnect {
box-shadow: inset 1px 0 0 #373b42
}
#voice-connection .btn-disconnect:after {
background-image: url(/assets/6754187fddb4fcf6a1927712ee14562c.svg);
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20)
}
#voice-connection .btn-disconnect:hover:after {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)
}
#voice-connection .voice-connection-inner {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
#voice-connection .voice-connection-channel {
color: #fff;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
font-size: 10px;
font-weight: 500;
margin-top: 4px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
#voice-connection .voice-connection-status {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
#voice-connection .voice-connection-status .ping {
background: url(/assets/ebca02c11904a3812be7212755e6261f.svg) center center no-repeat;
width: 11px;
height: 12px;
backgrond-size: 11px 12px;
display: inline-block;
margin-right: 5px;
margin-left: 1px
}
#voice-connection .voice-connection-status-connected {
color: #43b581
}
#voice-connection .voice-connection-status-connecting {
color: #faa61a
}
#voice-connection .voice-connection-status-error {
color: #f04747
}
#voice-connection .voice-connection-quality-fine .ping {
background-image: url(/assets/b3f2e4ca10bff87e4b06a94f219ce668.svg)
}
#voice-connection .voice-connection-quality-average {
color: #faa61a
}
#voice-connection .voice-connection-quality-average .ping {
background-image: url(/assets/d6bebc319e0d9111afbe321a9b78db28.svg)
}
#voice-connection .voice-connection-quality-bad {
color: #f04747
}
#voice-connection .voice-connection-quality-bad .ping {
background-image: url(/assets/f4791144219e2832c441b0892f07baf8.svg)
}
.channels-wrap {
width: 240px
}
.channel-members-wrap {
min-width: 240px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
@media (max-width:1024px) {
.channel-members-wrap {
display: none
}
}
.channel-members {
max-width: 240px;
background-color: #f3f3f3;
padding: 20px 0;
box-sizing: border-box;
overflow-y: scroll;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.channel-members h2 {
color: #99aab5;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
padding: 0 30px
}
.channel-members .avatar-small {
float: none;
margin: 0;
margin-right: 10px;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.channel-members .avatar-small .status {
bottom: -2px;
right: -4px;
border: 2px solid #f3f3f3
}
.channel-members .member {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
color: #737f8d;
padding: 5px 30px;
padding-right: 16px;
font-weight: 600;
cursor: pointer;
line-height: 30px;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.channel-members .member+h2 {
margin-top: 30px
}
.channel-members .member .member-inner {
width: 140px
}
.channel-members .member .member-username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
line-height: 17px
}
.channel-members .member .member-game {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
line-height: 13px;
font-weight: 500;
color: #8a8e94
}
.channel-members .member .member-game strong {
font-weight: 700
}
.channel-members .member.member-status-offline {
color: #8a8e94;
font-weight: 300
}
.channel-members .member.member-status-offline .avatar-small {
-webkit-filter: grayscale(100%)
}
.channel-members .member.member-status-offline .status {
display: none
}
.channel-members .member.popout-open,
.channel-members .member:hover {
background-color: #ebebeb;
color: #2e3136
}
.channel-members .member.popout-open .member-username,
.channel-members .member:hover .member-username {
-webkit-filter: none!important
}
.channel-members .member.popout-open .avatar-small,
.channel-members .member:hover .avatar-small {
-webkit-filter: none
}
.channel-members .invite-spacer {
height: 40px
}
.channel-members .invite-btn {
font-size: 14px;
font-weight: 600;
line-height: 30px;
padding: 5px 23px;
margin-left: 30px;
margin-right: 15px;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
border-radius: 3px;
color: #fff;
background-color: #738bd7
}
.channel-members .invite-btn:hover {
background-color: #697ec4
}
.channel-members .invite-btn .icon {
width: 16px;
height: 16px;
background: url(/assets/181143c7c10c902dc9183f39d1198d11.svg) center center no-repeat;
background-size: 16px 16px;
margin-right: 5px;
vertical-align: -2px
}
.progress {
width: 150px;
background-color: #e9e7e7;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06);
overflow: hidden
}
.progress,
.progress .progress-bar {
height: 10px;
border-radius: 5px;
background-clip: padding-box
}
.progress .progress-bar {
background-color: #738bd7;
-webkit-transition: width .2s ease-in;
transition: width .2s ease-in
}
.channel-textarea {
margin: 20px 0 30px;
width: 100%;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
}
.channel-textarea.has-results {
border-radius: 0 0 3px 3px
}
.channel-textarea.has-results .channel-textarea-inner {
border-color: #738bd7
}
.channel-textarea.has-results .channel-textarea-autocomplete {
display: block
}
.channel-textarea.channel-textarea-disabled {
cursor: not-allowed;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.channel-textarea.channel-textarea-disabled textarea {
pointer-events: none
}
.channel-textarea-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
position: relative;
padding: 12px 10px;
border-radius: 3px;
border: 2px solid #dadddf;
box-sizing: border-box;
background-color: #fff
}
.channel-textarea-inner textarea {
resize: none;
outline: none;
border: none;
color: #747f8d;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
line-height: 18px;
max-height: 144px;
background-clear: padding-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
padding: 0
}
.channel-textarea-upload {
position: relative;
background: url(/assets/8c28d217cc33159474a64e24a2072c52.svg) center center no-repeat;
background-size: 25px 25px;
border-right: 1px solid #f0f0f0;
margin: -12px 10px -12px -10px;
width: 45px;
-webkit-transition: background-color .1s, border-right .1s;
transition: background-color .1s, border-right .1s;
overflow: hidden
}
.channel-textarea-upload:hover {
background-color: #f9f9f9;
border-right: 1px solid #dadddf
}
.channel-textarea-upload:active {
background-color: #e9ebec;
border-right: 1px solid #dadddf
}
.channel-textarea-autocomplete {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none
}
.channel-textarea-autocomplete-inner {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
border: 2px solid #738bd7;
background: #fff;
border-bottom: none;
box-sizing: border-box;
border-radius: 3px 3px 0 0
}
.channel-textarea-autocomplete-inner .spinner {
margin: 15px
}
.channel-textarea-autocomplete-inner .avatar-small {
float: none;
width: 26px;
height: 26px;
margin: 0;
background-size: 26px 26px;
margin-right: 10px
}
.channel-textarea-autocomplete-inner .avatar-small .status {
right: -3px;
bottom: -2px;
width: 8px;
height: 8px;
border: 2px solid #fff
}
.channel-textarea-autocomplete-inner .emoji {
margin-right: 10px!important
}
.channel-textarea-autocomplete-inner .command-icon {
height: 22px;
width: 22px;
margin: 0 .05em 0 .1em;
margin-right: 10px;
vertical-align: -.4em
}
.channel-textarea-autocomplete-inner .command-description {
color: #8a8e94;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right
}
.channel-textarea-autocomplete-inner .channel-name {
margin-right: 5px
}
.channel-textarea-autocomplete-inner .channel-name:before {
content: '#';
margin-right: 2px;
color: #8a8e94;
font-weight: 300
}
.channel-textarea-autocomplete-inner header {
border-bottom: 1px solid #f0f0f0;
padding: 10px;
font-size: 12px;
background-color: #738bd7;
color: #c9d2f0
}
.channel-textarea-autocomplete-inner header strong {
font-weight: 600;
color: #fff
}
.channel-textarea-autocomplete-inner ul {
padding: 6px 0
}
.channel-textarea-autocomplete-inner ul li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 6px 10px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
color: #2e3136;
-webkit-transition: padding-left .05s, box-shadow .2s;
transition: padding-left .05s, box-shadow .2s
}
.channel-textarea-autocomplete-inner ul li.active {
background: #f7f7f7;
padding-left: 12px
}
.channel-textarea-autocomplete-inner ul li.active .status {
border-color: #f0f0f0
}
.channel-textarea-autocomplete-inner ul.images {
padding: 2px 5px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
overflow: hidden
}
.channel-textarea-autocomplete-inner ul.images li {
padding: 0;
background: #f3f3f3;
margin: 6px 2px;
border: 3px solid transparent
}
.channel-textarea-autocomplete-inner ul.images li.active {
padding-left: 0;
border-color: #738bd7
}
.channel-textarea-autocomplete-inner:after {
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid #f0f0f0;
content: ' ';
width: 100%;
height: 1px
}
.invite-button {
margin: 10px 0;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
background-color: #f3f3f3;
padding: 8px 10px;
width: 240px;
border-radius: 4px;
border: 1px solid #e9e7e7;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex
}
.invite-button,
.invite-button.join {
-webkit-transition: border-color .2s;
transition: border-color .2s
}
.invite-button.join {
cursor: pointer
}
.invite-button.join:hover {
border-color: #dbdde1
}
.invite-button.join:hover .invite-button-icon {
border-color: #43b581
}
.invite-button.join:hover .invite-button-icon:before {
opacity: 1;
-ms-filter: none;
filter: none
}
.invite-button.expired .invite-button-header {
color: #f04747;
text-transform: uppercase
}
.invite-button.text .invite-button-header strong:before {
content: '#';
color: #8a8e94;
font-weight: 300
}
.invite-button-inner {
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.invite-button-icon,
.invite-button-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.invite-button-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
border: 1px solid #e9e7e7;
position: relative;
-webkit-transition: border-color .2s;
transition: border-color .2s;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.invite-button-icon:before {
content: '';
position: absolute;
top: 8px;
left: 19px;
display: table;
width: 9px;
height: 24px;
border: 3px solid #43b581;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: opacity .1s;
transition: opacity .1s
}
.invite-button-icon.accepted {
background-color: #43b581;
border-color: #43b581
}
.invite-button-icon.accepted:before {
border-color: #fff;
opacity: 1;
-ms-filter: none;
filter: none
}
.invite-button-icon.expired {
border-color: #f04747;
background-color: #f04747
}
.invite-button-icon.expired:after {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.invite-button-icon.expired:after,
.invite-button-icon.expired:before {
content: '';
position: absolute;
top: 13px;
left: 23px;
display: table;
width: 0;
height: 24px;
border: 3px solid #fff;
border-top-width: 0;
border-left-width: 0;
border-bottom-width: 0
}
.invite-button-icon.expired:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
-ms-filter: none;
filter: none
}
.invite-button-icon.accepting,
.invite-button-icon.resolving {
background-color: #ebebeb;
border-color: #dbdde1
}
.invite-button-icon.accepting .spinner,
.invite-button-icon.resolving .spinner {
margin: 0
}
.invite-button-icon.accepting:before,
.invite-button-icon.resolving:before {
display: none;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.invite-button-header {
font-size: 15px;
font-weight: 700;
color: #4f545c
}
.invite-button-header strong {
font-weight: 700
}
.invite-button-body {
margin-top: 5px;
font-size: 12px;
font-weight: 600;
color: #99aab5
}
.chat .empty-message {
margin-left: 20px;
margin-right: 20px;
height: 80px;
box-sizing: border-box;
padding-left: 20px;
border-bottom-style: solid;
border-width: 0 0 1px;
border-color: #eceeef;
background: url(/assets/52bdb8f08826b908d73bafd9b5c1eb89.png), url(/assets/8fa0bc44c3588f65ab90809affa180cc.png);
background-position: left bottom, right bottom;
background-size: 192px 80px, 216px 64px;
background-repeat: no-repeat, no-repeat
}
.chat .empty-message h1 {
line-height: 1em;
font-weight: 600;
color: #949494;
font-size: 16px;
padding: 30px 0
}
.chat .empty-message strong {
font-weight: 900
}
.chat .welcome-message>.empty-message {
margin-left: 0;
margin-right: 0;
width: 100%
}
.chat .welcome-message {
padding: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.chat .welcome-message h1 {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: #738bd7;
margin-bottom: 30px
}
.chat .welcome-message .item-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.chat .welcome-message .item-container .icon {
width: 50px;
height: 50px
}
.chat .welcome-message .item-container .icon.exclamation {
background: url(/assets/7616be62f9b90270b5a2e1fe9d2ece4f.svg) center center no-repeat
}
.chat .welcome-message .item-container .icon.share {
background: url(/assets/32f2b7967f102ef33064629e0a6c47ff.svg) center center no-repeat
}
.chat .welcome-message .item-container .icon.apps {
background: url(/assets/db7900a7a191ecf1949f15dd20dce2b2.svg) center center no-repeat
}
.chat .welcome-message .item-container .icon.mobile {
background: url(/assets/83d501f2b7dd2987302ce29b321f4494.svg) center center no-repeat
}
.chat .welcome-message .item-container .icon.twitter {
background: url(/assets/326d79eb53886c88437e99a3754b1cd0.svg) center center no-repeat
}
.chat .welcome-message p {
margin-left: 22px;
margin-top: 9px;
margin-bottom: 20px;
width: 334px;
color: #87909c;
font-size: 15px;
line-height: 150%
}
.chat .welcome-message strong {
font-weight: 700
}
.chat .welcome-message a {
color: #00b0f4;
cursor: pointer
}
.delete-message-modal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.delete-message-modal .form-header {
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.delete-message-modal .form-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
min-height: 100px
}
.delete-message-modal .form-inner .message-group {
margin-left: 0;
margin-right: 0;
padding-bottom: 0
}
.delete-message-modal .form-inner .message-group .btn-delete {
pointer-events: none
}
.delete-message-modal .form-inner .message-group .btn-delete,
.delete-message-modal .form-inner .message-group .btn-delete:hover {
visibility: none!important;
opacity: 0!important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"!important;
filter: alpha(opacity=0)!important
}
.typing {
position: absolute;
bottom: 1px;
left: 0;
height: 26px;
width: 100%;
background-color: hsla(0, 0%, 100%, .8);
color: #737f8d;
font-size: 13px;
font-weight: 500;
line-height: 24px;
resize: none
}
.typing strong {
font-weight: 700
}
.typing.animate .ellipsis div {
-webkit-animation: ellipsis 1.4s infinite ease-in-out;
animation: ellipsis 1.4s infinite ease-in-out
}
.typing .ellipsis {
width: 28px;
display: inline-block;
position: relative;
top: -1px
}
.typing .ellipsis div {
width: 6px;
height: 6px;
margin-right: 2px;
background-color: #737f8d;
border-radius: 3px;
display: inline-block;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.typing .ellipsis div:nth-of-type(2) {
-webkit-animation-delay: .2s;
animation-delay: .2s
}
.typing .ellipsis div:nth-of-type(3) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
margin-right: -40px
}
.status-typing {
width: 26px!important;
right: -11px!important;
overflow: hidden
}
.status-typing .ellipsis {
position: absolute top left;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.status-typing .ellipsis div {
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 3px;
display: inline-block;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.status-typing .ellipsis div+div {
margin-left: 2px
}
.animate .status-typing .ellipsis div {
-webkit-animation: ellipsis 1.4s infinite ease-in-out;
animation: ellipsis 1.4s infinite ease-in-out
}
.animate .status-typing .ellipsis div:nth-of-type(2) {
-webkit-animation-delay: .2s;
animation-delay: .2s
}
.animate .status-typing .ellipsis div:nth-of-type(3) {
-webkit-animation-delay: .4s;
animation-delay: .4s
}
@-webkit-keyframes ellipsis {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-filter: none;
filter: none
}
50% {
-webkit-transform: scale(.8);
-ms-transform: scale(.8);
transform: scale(.8);
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
}
@keyframes ellipsis {
0%,
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-filter: none;
filter: none
}
50% {
-webkit-transform: scale(.8);
-ms-transform: scale(.8);
transform: scale(.8);
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-filter: none;
filter: none
}
}
.status {
width: 10px;
height: 10px;
border-radius: 7px;
display: inline-block
}
.status-online {
background-color: #43b581
}
.status-idle {
background-color: #faa61a
}
.status-offline {
background-color: #747f8d
}
.channel-mute-button {
background: url(/assets/834a6d56133845401f5b298c296a36e6.svg) center center no-repeat;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
cursor: pointer;
margin-top: 2px;
-webkit-app-region: no-drag
}
.channel-mute-button.muted {
background-image: url(/assets/185e76f5fead6c212bfec8fa9616024f.svg)
}
.channel-mute-button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
#connecting {
background: #282b30;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 3000;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden
}
#connecting .connecting-inner {
text-align: center
}
#connecting .connecting-problems {
color: #fff;
padding-bottom: 32px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
#connecting .connecting-problems.in {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
}
#connecting .connecting-problems .connecting-problems-text {
font-family: Whitney;
font-size: 14px;
color: #949494;
margin-bottom: 8px
}
#connecting .connecting-problems .statuspage,
#connecting .connecting-problems .twitter {
font-weight: 600;
font-size: 15px;
line-height: 15px
}
#connecting .connecting-problems .statuspage:hover,
#connecting .connecting-problems .twitter:hover {
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80)
}
#connecting .connecting-problems .statuspage:before,
#connecting .connecting-problems .twitter:before {
display: inline-block;
content: ' ';
margin-right: 6px;
vertical-align: bottom
}
#connecting .connecting-problems .twitter:before {
width: 16px;
height: 15px;
background: url(/assets/31dd73caae6b4f9011d95f5b3efc15a1.svg) center center no-repeat;
background-size: 16px 12px
}
#connecting .connecting-problems .statuspage {
margin-left: 20px
}
#connecting .connecting-problems .statuspage:before {
width: 14px;
height: 15px;
background: url(/assets/3c1cec05bfad03b1495eccf72c38b10c.svg) center center no-repeat;
background-size: 14px 14px
}
#connecting img,
#connecting video {
width: 200px;
height: 200px
}
#connecting video {
visibility: hidden
}
#connecting video.ready {
visibility: visible
}
#connecting span {
color: #8a8e94;
font-size: 12px;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-weight: 600;
text-transform: uppercase;
display: block;
max-width: 400px;
line-height: 16px
}
#connecting span.quote {
margin-bottom: 10px;
color: #fff;
font-weight: 400;
font-style: italic;
font-size: 16px
}
.notice {
background-color: #f26522;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: 40px;
position: relative;
z-index: 3;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.notice .lenny {
font-weight: 300
}
.notice strong {
font-weight: 700
}
.notice.notice-info {
background-color: #4a90e2
}
.notice.notice-info .btn:hover {
color: #4a90e2
}
.notice .notice-dismiss {
position: absolute;
top: 15px;
right: 15px;
width: 10px;
height: 10px;
background: url(/assets/7731c77d99babca1a8faec204d98c380.svg) no-repeat;
background-size: 10px 10px;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: opacity .2s;
transition: opacity .2s;
cursor: pointer;
-webkit-app-region: no-drag
}
.notice .notice-dismiss:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.notice .icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
margin-top: -3px;
position: relative
}
.notice .icon+.icon {
margin-left: 6px
}
.notice .icon-windows {
background-image: url(/assets/24b843ed68d70abffbf4fdab9b400cc9.svg)
}
.notice .icon-apple {
background-image: url(/assets/ca511da5c9b326e5cb3f6befab1a3143.svg)
}
.notice .icon-android {
background-image: url(/assets/296aebeec33f5ce47db9ebbee9ccf1fc.svg)
}
.notice .btn {
border: 1px solid hsla(0, 0%, 100%, .25);
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
background: transparent;
color: #fff;
border-radius: 3px;
line-height: 24px;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
font-weight: 600;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
margin-top: 3px;
margin-bottom: 7px;
-webkit-app-region: no-drag
}
.notice .btn:hover {
color: #f26522;
background: #fff;
border-color: #fff
}
.notice .icon+.btn {
margin-left: 20px
}
.guilds-wrapper {
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
width: 80px;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background: #1e2124
}
.guilds {
padding: 18px 15px;
overflow-y: scroll;
width: 100px;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.guilds .friends-icon {
width: 50px;
height: 50px;
background-image: url(/assets/89576a4bb71f927eb20e8aef987b499b.svg);
background-size: 32px 28px;
background-position: center center;
background-repeat: no-repeat
}
.guilds .friends-online {
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
color: hsla(0, 0%, 100%, .3);
margin: 10px 0;
word-wrap: normal;
white-space: normal;
width: 50px;
line-height: 130%;
text-align: center
}
.guilds li {
width: 50px;
height: 50px;
position: relative;
z-index: 1
}
.guilds li .avatar-small {
width: 50px;
height: 50px;
border-radius: 0;
background-repeat: no-repeat;
background-size: 50px 50px;
margin: 0
}
.guilds li .badge {
position: absolute;
bottom: -2px;
right: -2px;
pointer-events: none
}
.guilds li.audio .guild-inner:after {
content: ' ';
position: absolute;
top: -6px;
right: -6px;
width: 24px;
height: 24px;
background: url(/assets/2a78f3f87ce01e509ce8f9cfb9916680.svg) center no-repeat;
background-color: #1e2124;
background-size: 16px;
border-radius: 12px;
overflow: hidden
}
.guilds li .guild-inner:before {
-webkit-transition: unset;
transition: unset;
content: ' ';
width: 12px;
height: 12px;
height: 40px;
left: -21px;
position: absolute;
top: 50%;
border-radius: 20px;
margin-top: -20px
}
.guilds li.unread .guild-inner:before {
transtion: unset;
height: 12px;
border-radius: 6px;
background: #8a8e94;
margin-top: -6px
}
.guilds li.active .guild-inner:before {
-webkit-transition: height .25s ease-in-out, margin-top .25s ease-in-out;
transition: height .25s ease-in-out, margin-top .25s ease-in-out;
height: 40px;
border-radius: 20px;
background: #fff;
margin-top: -20px
}
.guilds li .guild-inner {
cursor: pointer;
-webkit-transition: background-color .25s ease-in, border-radius .3s cubic-bezier(.68, -1.25, .228, 1.8);
transition: background-color .25s ease-in, border-radius .3s cubic-bezier(.68, -1.25, .228, 1.8);
overflow: hidden;
border-radius: 25px;
background: #2e3136;
font-size: 18px;
text-align: center;
line-height: 50px
}
.guilds li .guild-inner a {
color: #fff;
display: block;
width: 50px;
height: 50px
}
.guilds li+li {
margin-top: 10px
}
.guilds li.active .guild-inner,
.guilds li:hover .guild-inner {
border-radius: 15px;
background: #738bd7
}
.guilds li.active .guild-inner {
background: #738bd7
}
.dms {
display: block;
margin-top: 20px;
margin-bottom: 20px
}
.guilds-separator {
height: 2px!important;
position: relative;
background: none;
margin-bottom: 20px
}
.guilds-separator:after {
position: absolute;
top: 0;
left: 20%;
right: 20%;
content: ' ';
height: 2px!important;
background: #2e3136
}
.guilds-error {
width: 50px;
height: 50px;
border-radius: 25px;
background: #413338;
color: #fff!important;
border: 2px solid #f04747;
padding: 0;
font-size: 20px;
font-weight: 700;
text-align: center;
line-height: 46px;
box-sizing: border-box;
display: block
}
.guilds-error:hover {
background-color: #f04747
}
.guilds-add {
width: 100%;
height: 100%;
border-radius: 50%;
background: #1e2124;
color: #535559;
border: 1px dashed #535559;
padding: 0;
font-size: 40px;
font-weight: 200;
text-align: center;
line-height: 100%;
-webkit-transition: border-color .25s ease, color .25s ease;
transition: border-color .25s ease, color .25s ease
}
.guilds-add:hover {
color: hsla(0, 0%, 100%, .75);
border-color: hsla(0, 0%, 100%, .75)
}
.help-container {
height: 56px;
padding-bottom: 3px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
background-color: #1e2124;
width: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative
}
.help-container:after {
content: ' ';
position: absolute;
top: -15px;
left: 0;
height: 15px;
width: 100%;
z-index: 1;
background: -webkit-linear-gradient(90deg, #1e2124 20%, transparent);
background: linear-gradient(0deg, #1e2124 20%, transparent);
pointer-events: none
}
.need-help-button {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 600;
-webkit-transition: .2s color ease-in-out, .2s border-color ease-in-out;
transition: .2s color ease-in-out, .2s border-color ease-in-out;
border: 2px solid hsla(0, 0%, 100%, .3);
border-radius: 5px;
cursor: pointer;
width: 24px;
height: 24px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.need-help-button .btn-help {
color: hsla(0, 0%, 100%, .6);
margin: 0;
padding: 0;
line-height: 16px;
-webkit-transition: .2s background-color ease-in-out, .2s color ease-in-out;
transition: .2s background-color ease-in-out, .2s color ease-in-out;
background-color: transparent;
cursor: pointer
}
.need-help-button .help-text {
display: none
}
.need-help-button.expanded .help-text {
display: inline;
padding-right: 4px;
margin-left: 4px
}
.need-help-button:hover {
color: #738bd7;
border-color: #738bd7
}
.need-help-button:hover .btn-help {
color: #738bd7
}
.need-help-modal {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.need-help-modal a {
color: #00b0f4;
text-decoration: none;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out
}
.need-help-modal a:hover {
color: #009edc
}
.need-help-modal .header {
background-color: #738bd7;
border-radius: 5px 5px 0 0;
height: 120px;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.need-help-modal .header h1 {
color: #fff;
font-weight: 700;
margin: 38px 0 0;
font-size: 18px
}
.need-help-modal .header input[type=text] {
color: #555;
font-size: 14px;
margin: 15px 0;
width: 460px;
height: 40px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 2px 1px #697ec4;
box-sizing: border-box;
padding: 10px
}
.need-help-modal .header input[type=text]::-webkit-input-placeholder {
color: #c2ccd3
}
.need-help-modal .header input[type=text]:focus {
border-bottom: 1px solid #f0f0f0;
margin: 15px 0
}
.need-help-modal .form-inner {
padding: 38px;
min-height: 200px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.need-help-modal .form-inner.loading {
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.need-help-modal .form-inner .failed,
.need-help-modal .form-inner.loading {
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.need-help-modal .form-inner .failed {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.need-help-modal .form-inner .failed .poop {
width: 78px;
height: 79px;
background-image: url(/assets/34476a09f00a19a187555d005898081d.svg);
background-size: 78px 79px;
background-repeat: no-repeat;
margin-bottom: 15px
}
.need-help-modal .form-inner .failed p {
margin: 0;
font-weight: 700;
font-size: 14px;
color: #dbdde1
}
.need-help-modal .form-inner .failed p+p {
margin-top: 2px
}
.need-help-modal ul li {
font-size: 18px;
line-height: 22px;
font-weight: 600
}
.need-help-modal ul li+li {
margin-top: 12px
}
.need-help-modal .footer {
background-color: #fff;
border-radius: 0 0 5px 5px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
color: #99aab5;
font-size: 14px;
font-weight: 600;
padding: 20px 0 20px 38px;
border-top: 1px solid #c2ccd3
}
.need-help-modal .footer a {
margin-left: 4px
}
.osx-buttons {
position: absolute;
top: 10px;
left: 16px;
text-align: center;
pointer-events: auto
}
.osx-buttons button {
width: 12px;
height: 12px;
border-radius: 6px;
background-clip: padding-box;
background-color: #535559;
-webkit-transition: background-color .2s;
transition: background-color .2s;
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)
}
.osx-buttons button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.osx-buttons button+button {
margin-left: 6px
}
:hover .osx-close {
background-color: #fb615b!important
}
:hover .osx-minimize {
background-color: #fdbd41!important
}
:hover .osx-maximize {
background-color: #33c749!important
}
.platform-osx .guilds-wrapper {
padding-top: 45px
}
.platform-osx .guilds {
padding-top: 0
}
.win-buttons {
position: absolute;
top: 11px;
right: 16px;
pointer-events: auto
}
.win-buttons button {
width: 18px;
height: 18px;
backgound-size: 18px 18px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
background-color: transparent;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.win-buttons button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.win-buttons button+button {
margin-left: 10px
}
.win-buttons.win-buttons-light .win-close {
background-image: url(/assets/7cb189f121dc6edcd0d2602ec4bad77a.svg)
}
.win-buttons.win-buttons-light .win-minimize {
background-image: url(/assets/70a673b7ee4f034122a6e685204ecbc3.svg)
}
.win-buttons.win-buttons-light .win-maximize {
background-image: url(/assets/b89b61ff5a1f03ea6339181742d59799.svg)
}
.win-close {
background-image: url(/assets/0663b3d79af41ca83c8ef77228d2b13e.svg)
}
.win-minimize {
background-image: url(/assets/38afbd2a13e45ae674c68595d91f9919.svg)
}
.win-maximize {
background-image: url(/assets/d07d2ad7e0c46203531fa098617bbf8e.svg)
}
.titlebar-edge {
cursor: ns-resize;
height: 6px;
-webkit-app-region: no-drag
}
.platform-win .notice-dismiss {
left: 15px;
right: auto
}
.platform-win .auto-update {
top: 11px;
right: 100px
}
.auto-update {
position: absolute;
top: 16px;
right: 16px;
pointer-events: auto
}
.auto-update button {
width: 18px;
height: 18px;
backgound-size: 18px 18px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
background-color: transparent;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30)
}
.auto-update button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.auto-update-checking {
background-image: url(/assets/faa28a892f06d520db5b96efe6c07c5d.svg);
cursor: help;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear
}
.auto-update-downloading {
background-image: url(/assets/6f004faa78d2a18f817e3d7ab6fb8df8.svg);
cursor: help
}
.auto-update-ready {
background-image: url(/assets/140de768aee86cd53acf16df83d515db.svg);
cursor: pointer;
opacity: 1!important;
-ms-filter: none;
filter: none
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.radio-image {
cursor: pointer
}
.radio-image .radio-inner {
width: 100px;
height: 100px;
background: transparent;
position: relative;
border: 2px solid hsla(0, 0%, 100%, .2);
border-radius: 3px;
display: inline-block
}
.radio-image .radio-inner>.children {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.radio-image .radio-inner>.children * {
margin: 0
}
.radio-image .radio-inner input[type=radio] {
visibility: hidden
}
.radio-image .radio-inner input[type=radio]:checked+span:after {
opacity: 1;
-ms-filter: none;
filter: none
}
.radio-image .radio-inner span {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
border-radius: 3px;
left: 0;
top: 0
}
.radio-image .radio-inner span:after {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #738bd7;
border-radius: 3px;
-webkit-transition: .3s ease;
transition: .3s ease;
left: -2px;
top: -2px
}
.radio-image:hover span:after {
border-color: #738bd7;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
cursor: auto;
color: #fff;
-webkit-transition: background .2s linear;
transition: background .2s linear
}
.overlay .inner-container {
width: 36px
}
.overlay .overlay-draggable {
position: relative;
width: 326px
}
.overlay .overlay-draggable.flipped {
right: 290px
}
.overlay .discord-btn {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
pointer-events: inherit;
cursor: pointer
}
.overlay .discord-btn.flipped {
-webkit-box-pack: end;
-o-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.overlay .discord-btn .discord-btn-icon {
width: 36px;
height: 36px;
background: url(/assets/b3afd12bc47a87507780ce5f53a9d6a1.png) center center no-repeat;
background-size: 36px 36px;
border-radius: 3px;
margin-right: 12px
}
.overlay .discord-btn .discord-btn-icon.flipped {
margin-right: 0;
margin-left: 12px
}
.overlay .discord-btn .discord-btn-icon.error {
background-image: url(/assets/8b3fac6205178732d218265987cdb0dc.png)
}
.overlay .discord-btn .discord-btn-icon.connecting {
background-image: url(/assets/907c319873ae4c1d56d0d0e8dce6b476.png)
}
.overlay .discord-btn .discord-btn-icon.connected {
background-image: url(/assets/b3afd12bc47a87507780ce5f53a9d6a1.png)
}
.overlay .discord-wordmark {
width: 69px;
height: 36px;
background: url(/assets/f77cb9de0912a38dd418475f35ca1410.svg) left center no-repeat;
background-size: contain contain
}
.overlay .speakers.speakers-large {
margin-top: 12px
}
.overlay .speakers.speakers-small {
margin-top: 5px
}
.overlay .speakers .speaker {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.overlay .speakers .speaker+.speaker {
margin-top: 5px
}
.overlay .speakers .speaker.active {
opacity: 1;
-ms-filter: none;
filter: none
}
.overlay .speakers .speaker.flipped {
-webkit-box-pack: end;
-o-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.overlay .speakers .speaker .avatar-large,
.overlay .speakers .speaker .avatar-small {
background-position: center
}
.overlay .speakers .speaker .avatar-large {
width: 36px;
height: 36px;
margin: 0;
background-size: 36px 36px;
border-radius: 18px
}
.overlay .speakers .speaker .avatar-small {
width: 28px;
height: 28px;
margin: 4px;
background-size: 28px 28px;
border-radius: 14px
}
.overlay .speakers .speaker .username {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-shadow: 0 3px 8.6px rgba(0, 0, 0, .16), 0 1px 1px #000, 1px 0 1px #000;
color: #fff;
font-size: 12px;
font-weight: 500;
word-wrap: break-word;
margin-left: 12px
}
.overlay .speakers .speaker .username.flipped {
margin-left: 0;
margin-right: 12px;
text-align: right
}
.overlay .guild-panel {
position: absolute;
top: 0;
left: 38px;
width: 288px;
pointer-events: auto;
cursor: auto;
z-index: 1
}
.overlay .guild-panel.flipped {
position: absolute;
top: 0;
left: 0;
right: 38px
}
.overlay .guild-panel header {
border-radius: 3px 3px 0 0;
height: 36px;
box-sizing: border-box;
padding: 12px 10px;
background-color: #738bd7;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.overlay .guild-panel .btn-settings {
width: 16px;
height: 16px;
background: url(/assets/60f6b0788a5d9394b44261ef5d8ecffc.svg) center center no-repeat;
background-size: 16px;
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.overlay .guild-panel .btn-settings:hover {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)
}
.overlay .guild-panel section {
padding: 0;
background-color: #4f545c!important;
height: 376px
}
.overlay .guilds-wrapper {
width: 56px
}
.overlay .guilds-wrapper .guilds {
width: 76px;
padding: 10px
}
.overlay .guilds-wrapper .guilds li {
width: 36px;
height: 36px
}
.overlay .guilds-wrapper .guilds li .avatar-small {
width: 36px;
height: 36px;
background-size: 36px 36px
}
.overlay .guilds-wrapper .guilds li .guild-inner {
width: 36px;
height: 36px;
border-radius: 18px;
line-height: 36px
}
.overlay .guilds-wrapper .guilds li .guild-inner a {
width: 36px;
height: 36px
}
.overlay .guilds-wrapper .guilds li.active .guild-inner,
.overlay .guilds-wrapper .guilds li:hover .guild-inner {
border-radius: 12px
}
.overlay .guild-channels {
padding-top: 0;
padding-bottom: 0
}
.overlay .guild-channels .channel-voice {
padding-left: 10px
}
.overlay #voice-connection {
height: auto
}
.overlay #voice-connection .btn {
border: 0
}
.overlay #voice-connection .btn-mute {
border-radius: 3px 0 0 3px
}
.overlay #voice-connection .btn-deafen {
border-radius: 0
}
.overlay #voice-connection .btn-disconnect {
border-radius: 0 3px 3px 0
}
.overlay #voice-connection .btn-deafen,
.overlay #voice-connection .btn-mute {
border-right: 1px solid #1c1e22
}
.overlay #voice-connection .btn-deafen,
.overlay #voice-connection .btn-disconnect {
box-shadow: inset 1px 0 0 #373b42
}
.overlay-settings-popout {
width: 270px
}
.overlay-settings-popout .control-group ul {
margin-top: 8px;
margin-bottom: 0
}
.overlay-settings-popout .control-group ul li+li {
margin-top: 6px
}
.overlay-settings-popout .avatar-sizes {
margin-top: 16px
}
.overlay-settings-popout .avatar-sizes .control-group+.control-group {
margin-top: 22px
}
.overlay-settings-popout .avatar-sizes ul {
margin: 0;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: start;
-o-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.overlay-settings-popout .avatar-sizes ul li {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.overlay-settings-popout .avatar-sizes ul li+li {
margin-top: 0;
margin-left: 12px
}
.overlay-settings-popout .avatar-sizes .option-large,
.overlay-settings-popout .avatar-sizes .option-small {
background: url(/assets/b3afd12bc47a87507780ce5f53a9d6a1.png) center center no-repeat
}
.overlay-settings-popout .avatar-sizes .option-large {
width: 36px;
height: 36px;
background-size: 36px 36px;
border-radius: 36px
}
.overlay-settings-popout .avatar-sizes .option-small {
width: 26px;
height: 26px;
background-size: 26px 26px;
border-radius: 26px
}
.overlay-settings-popout section {
background-color: #2e3136;
color: hsla(0, 0%, 100%, .7)
}
.overlay-settings-popout section .control-group label {
color: hsla(0, 0%, 100%, .2);
font-size: 10px;
font-weight: 700
}
.overlay-settings-popout section .radio {
line-height: 20px
}
.overlay-settings-popout section .radio .radio-inner {
width: 12px;
height: 12px;
top: 3px;
background-color: transparent;
border-radius: 2px
}
.overlay-settings-popout section .radio .radio-inner+span {
margin-left: 5px
}
.overlay-settings-popout section .radio .radio-inner span {
width: 12px;
height: 12px;
left: 0;
top: 0
}
.overlay-settings-popout section .radio .radio-inner span:after {
width: 12px;
height: 12px;
background: #3ca374;
border-radius: 1px;
top: 0;
left: 0
}
a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline
}
body {
line-height: 1;
color: #000;
background: #fff
}
ol,
ul {
list-style: none
}
table {
border-collapse: separate;
border-spacing: 0
}
caption,
table,
td,
th {
vertical-align: middle
}
caption,
td,
th {
text-align: left;
font-weight: 400
}
a img {
border: none
}
@font-face {
font-family: Whitney;
font-style: light;
font-weight: 300;
src: url(/assets/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format('woff')
}
@font-face {
font-family: Whitney;
font-style: normal;
font-weight: 500;
src: url(/assets/e8acd7d9bf6207f99350ca9f9e23b168.woff) format('woff')
}
@font-face {
font-family: Whitney;
font-style: medium;
font-weight: 600;
src: url(/assets/3bdef1251a424500c1b3a78dea9b7e57.woff) format('woff')
}
@font-face {
font-family: Whitney;
font-style: bold;
font-weight: 700;
src: url(/assets/8e12fb4f14d9c4592eb8ec9f22337b04.woff) format('woff')
}
body {
margin: 0;
padding: 0;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: transparent
}
h1 {
margin: 15px 0
}
h2 {
margin: 9px 0
}
p {
margin: 14px 0
}
button,
input,
textarea {
font-family: inherit
}
strong {
font-weight: 600
}
button {
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
border: 0;
cursor: pointer
}
button:focus {
outline: none
}
code {
font-family: Menlo, Consolas, Monaco, monospace;
font-size: 14px;
line-height: 16px
}
.flex-vertical {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.flex-vertical>.flex-spacer {
min-height: 1px
}
.flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.flex-horizontal>.flex-spacer {
min-width: 1px
}
.flex-spacer {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
#modal-mount,
#popout-mount,
#tooltip-mount {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
pointer-events: none
}
#modal-mount>*,
#popout-mount>*,
#tooltip-mount>* {
pointer-events: auto
}
.app {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow: auto;
text-rendering: optimizeLegibility
}
.app a {
color: #00b0f4;
-webkit-transition: .05s;
transition: .05s;
text-decoration: none
}
.app h1 {
color: #737f8d;
font-size: 22px;
font-weight: 400;
line-height: 8px
}
.app button {
cursor: pointer
}
.app .upload-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background: rgba(0, 0, 0, .8);
font-size: 36px;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: .3s opacity ease-in-out;
transition: .3s opacity ease-in-out;
z-index: 2000
}
.app .upload-area strong {
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-weight: 700
}
.app .upload-area * {
pointer-events: none
}
.app .upload-area.in {
visibility: visible;
opacity: 1;
-ms-filter: none;
filter: none
}
.titlebar {
-webkit-app-region: drag;
pointer-events: none;
height: 25px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3000
}
.titlebar button {
-webkit-app-region: no-drag
}
.callout-backdrop {
position: absolute;
z-index: 1000;
bottom: 0;
right: 0;
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.theme-dark .chat-empty {
background: url(/assets/2f8fff584b4efd0febf82664f40aecaa.png) center center no-repeat;
background-size: cover
}
.theme-dark .chat .title-wrap {
background-color: #36393e;
border-bottom: 1px solid #282b30
}
.theme-dark .chat .title-wrap .channel-name {
color: #fff
}
.theme-dark .chat .title-wrap .channel-mute-button {
background: url(/assets/66cd452345ef15f6521d35f3fa877ef2.svg) center center no-repeat;
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
margin-top: -2px
}
.theme-dark .chat .title-wrap .channel-mute-button.muted {
background-image: url(/assets/6517271a0b20e476d61b1dd0505c2fc5.svg);
margin-top: 0
}
.theme-dark .chat .title-wrap .channel-mute-button:hover {
opacity: 1;
-ms-filter: none;
filter: none
}
.theme-dark .chat .title-wrap .topic {
color: #707578
}
.theme-dark .chat .title-wrap .topic a {
color: #0096cf
}
.theme-dark .chat .title-wrap .topic .topic-full {
background-color: #36393e;
border-bottom: 1px solid #282b30;
box-shadow: none
}
.theme-dark .chat .welcome-message a {
color: #0096cf
}
.theme-dark .chat .empty-message {
border-color: hsla(0, 0%, 100%, .02);
background: url(/assets/04e5ead69df31d03d3027363f9418326.png), url(/assets/1e47c538d6908dd308ba4b1a9277ee4b.png);
background-position: left bottom, right bottom;
background-size: 192px 80px, 216px 64px;
background-repeat: no-repeat, no-repeat
}
.theme-dark .chat form {
border-top: 1px solid hsla(0, 0%, 100%, .06)
}
.theme-dark .chat form .typing {
background-color: #36393e
}
.theme-dark .chat form .typing .ellipsis div {
background-color: hsla(0, 0%, 100%, .8)
}
.theme-dark .chat form .typing span {
color: hsla(0, 0%, 100%, .8)
}
.theme-dark .chat>.content {
background-color: #36393e
}
.theme-dark .chat>.content .scroller-wrap.polyfill .scrollbar,
.theme-dark .chat>.content .scroller-wrap.polyfill .scrollbar .thumb,
.theme-dark .chat>.content .scroller-wrap.polyfill .scrollbar:after {
background-color: #2e3136
}
.theme-dark .chat>.content .scroller-wrap.polyfill .scrollbar .thumb:after {
background-color: rgba(0, 0, 0, .4)
}
.theme-dark .chat>.content .scroller-wrap.polyfill .scrollbar .track {
background-color: transparent
}
.theme-dark .chat>.content:first-child .scroller-wrap::-webkit-scrollbar-thumb {
background-color: #1e2124;
border-color: #36393e
}
.theme-dark .chat>.content:first-child .scroller-wrap::-webkit-scrollbar-track-piece {
background-color: #2e3136;
border-color: #36393e
}
.theme-dark .chat>.content:first-child .scroller-wrap.polyfill .scrollbar,
.theme-dark .chat>.content:first-child .scroller-wrap.polyfill .scrollbar:after {
background-color: #36393e
}
.theme-dark .chat>.content:first-child .scroller-wrap.polyfill .scrollbar .thumb {
background-color: #36393e;
border-color: #36393e
}
.theme-dark .chat>.content:first-child .scroller-wrap.polyfill .scrollbar .thumb:after {
background-color: #1e2124
}
.theme-dark .chat>.content:first-child .scroller-wrap.polyfill .scrollbar .track {
background-color: #2e3136;
border-color: #36393e
}
.theme-dark .chat>.content .messages .invite-button {
background-color: #2e3136;
border-color: #2b2e33
}
.theme-dark .chat>.content .messages .invite-button .invite-button-icon.accepting,
.theme-dark .chat>.content .messages .invite-button .invite-button-icon.resolving {
background-color: #36393e;
border-color: #33363a
}
.theme-dark .chat>.content .messages .invite-button .invite-button-header {
color: hsla(0, 0%, 100%, .7)
}
.theme-dark .chat>.content .messages .invite-button .invite-button-header .text:before {
color: #fff;
margin-right: 1px
}
.theme-dark .chat>.content .messages .invite-button .invite-button-body {
color: hsla(0, 0%, 100%, .5)
}
.theme-dark .chat>.content .messages .divider span {
background-color: #36393e
}
.theme-dark .chat>.content .messages .divider:not(.red) span {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50)
}
.theme-dark .chat>.content .messages .divider:not(.red) div {
background: #474a4f
}
.theme-dark .chat>.content .messages .divider.divider-red>span {
color: #f04747;
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80)
}
.theme-dark .chat>.content .messages .divider.divider-red>div {
background: #f04747;
opacity: .4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40)
}
.theme-dark .chat>.content .messages .message-group:not(.has-divider) {
border-bottom-color: hsla(0, 0%, 100%, .04)
}
.theme-dark .chat>.content .messages .message-group h2 strong {
color: #fff
}
.theme-dark .chat>.content .messages .message-group h2 span {
color: hsla(0, 0%, 100%, .2)
}
.theme-dark .chat>.content .messages .message-group a {
color: #0096cf
}
.theme-dark .chat>.content .messages .message-group .edit-message .edit-operation {
color: hsla(0, 0%, 100%, .3)
}
.theme-dark .chat>.content .messages .message-group .comment .markup {
color: hsla(0, 0%, 100%, .7)
}
.theme-dark .chat>.content .messages .message-group .comment .markup .highlight {
background-color: rgba(115, 139, 215, .1)
}
.theme-dark .chat>.content .messages .message-group .comment .markup .highlight:hover {
background-color: rgba(115, 139, 215, .7)
}
.theme-dark .chat>.content .messages .message-group .comment .markup pre {
background: #2e3136;
border-color: #282b30
}
.theme-dark .chat>.content .messages .message-group .comment .markup code.inline,
.theme-dark .chat>.content .messages .message-group .comment .markup pre code {
background: #2e3136
}
.theme-dark .chat>.content .messages .message-group .comment .edited {
color: hsla(0, 0%, 100%, .2)
}
.theme-dark .chat>.content .messages .message-group .comment .message-send-failed .markup {
color: #f04747
}
.theme-dark .chat>.content .messages .message-group.compact .user-name {
color: #f9f9f9
}
.theme-dark .chat>.content .messages .message-group.compact .timestamp {
color: hsla(0, 0%, 100%, .2)
}
.theme-dark .chat>.content .messages .message-group.compact .mentioned .timestamp {
color: hsla(0, 0%, 100%, .3)
}
.theme-dark .chat>.content .messages .embed {
border-left-color: hsla(0, 0%, 95%, .1)
}
.theme-dark .chat>.content .messages .embed .embed-provider {
color: hsla(0, 0%, 100%, .6)
}
.theme-dark .chat>.content .messages .embed .embed-author,
.theme-dark .chat>.content .messages .embed .embed-description {
color: hsla(0, 0%, 100%, .7)
}
.theme-dark .chat>.content .messages .mentioned .message-text {
background: rgba(250, 166, 26, .1)
}
.theme-dark .channel-textarea.has-results .channel-textarea-inner {
border-color: hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-inner {
border-color: hsla(0, 0%, 100%, .2);
background-color: hsla(0, 0%, 100%, .06)
}
.theme-dark .channel-textarea-inner::-webkit-input-placeholder {
color: hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-inner textarea {
color: hsla(0, 0%, 100%, .7);
background-color: transparent
}
.theme-dark .channel-textarea-inner .channel-textarea-upload {
border-right-color: hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-inner .channel-textarea-upload:hover {
background-color: hsla(0, 0%, 100%, .06)
}
.theme-dark .channel-textarea-autocomplete-inner {
background-color: #424549;
border-color: hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-autocomplete-inner header {
border-bottom-color: #424549;
background-color: hsla(0, 0%, 100%, .2);
color: hsla(0, 0%, 100%, .5)
}
.theme-dark .channel-textarea-autocomplete-inner .avatar-small .status {
border-color: #424549
}
.theme-dark .channel-textarea-autocomplete-inner ul li {
color: hsla(0, 0%, 100%, .6)
}
.theme-dark .channel-textarea-autocomplete-inner ul li.active {
background: #393d43
}
.theme-dark .channel-textarea-autocomplete-inner ul li.active .status {
border-color: #393d43
}
.theme-dark .channel-textarea-autocomplete-inner ul.images li {
background: hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-autocomplete-inner:after {
border-bottom: 2px solid hsla(0, 0%, 100%, .2)
}
.theme-dark .channel-textarea-upload {
background: url(/assets/24972a3b5eac2034c73f575c6a49207b.svg) center center no-repeat;
background-size: 25px 25px;
-webkit-transition: background-color 0s;
transition: background-color 0s
}
.theme-dark .channel-textarea-upload:hover {
background: url(/assets/623ccc7d43748a9622c078748ea9e706.svg) center center no-repeat;
background-color: hsla(0, 0%, 100%, .06)
}
.theme-dark .channel-textarea-upload:active {
background-color: #e9ebec
}
.theme-dark .channel-members {
background-color: #2e3136
}
.theme-dark .channel-members h2 {
color: hsla(0, 0%, 100%, .4)
}
.theme-dark .channel-members .avatar-small .status {
border-color: #2e3136
}
.theme-dark .channel-members .member {
color: hsla(0, 0%, 100%, .6)
}
.theme-dark .channel-members .member.popout-open,
.theme-dark .channel-members .member:hover {
background: -webkit-linear-gradient(left, #282b30 85%, #2e3136);
background: linear-gradient(to right, #282b30 85%, #2e3136)
}
.theme-dark .channel-members .member.popout-open .member-username,
.theme-dark .channel-members .member:hover .member-username {
color: #fff
}
/*# sourceMappingURL=a872e2bb95aa9d365050.css.map*/</style></head><body>
<div class="guilds-wrapper">
<ul class="guilds">
<li class="active">
<div class="guild-inner">
<a href="/channels/@me">
<div class="friends-icon">H</div>
</a>
</div>
</li><span class="dms"></span>
<li class="guilds-separator"></li>
<li class="audio">
<div class="guild-inner">
<a class=" active" href="/channels/118124216162713609/118124216162713609">
<div class="friends-icon" style="font-size:18px;">H</div>
</a>
</div>
</li>
<li class=" "><button class="guilds-add">+</button></li>
</ul>
<div class="help-container">
<div class="need-help-button"><span class="btn-help">?</span><span class="help-text"></span></div>
</div>
</div>
</body></html>
