* {font-size: 100.01%;}
html {font-size: 62.5%;}
body{
margin:0;
color:#494949;
min-width:1003px;
font:1.2em/1.4em 'UbuntuRegular', Arial, Helvetica, sans-serif;
background:#fff;
}
img{border-style:none;}
a {
text-decoration:none;
color:#0a5a83;
}
a:hover{text-decoration:underline;}
input, textarea, select{
font:100% Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#000;
}
form, fieldset{
margin:0;
padding:0;
border-style:none;
}
form .description {
margin-bottom: 15px;
}
form #error_notice {
background-color: #FFFEE9;
border: 1px solid red;
text-align: center;
width: 80%;
padding: 5px;
margin: 30px auto 0px auto;
color: red;
font-weight: bold;
}
form #error_notice p {
margin: 4px 0;
padding: 0;
}
form .green_form_button {
display: block;
cursor: auto;
color: #FFF;
width: auto;
font: 12px 'UbuntuMedium', Arial, Helvetica, sans-serif;
background: #F47321 url(../../images/green_button_bg.gif?1328a1724c71) repeat;
height: 22px;
padding: 2px 7px 1px 7px;
margin-top: 6px;
border: 1px solid #B1B1B1;
text-transform:uppercase;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
form > .fieldset-wrap {
display:block;
position:relative;
}
form > .fieldset-wrap > .field-wrap {
display:inline-block;
margin-right:1em;
}
legend {
display: block;
color: #0C6A93;
font-size: 1.266em;
font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
font-weight: normal;
padding: 10px 0px 10px 0px;
}
hr.light {
border: 0; /* Reset borders */
color :#989898;
background-color:#989898;
height: 1px;
}
.message, .message.dismissible_notice, #direct_deposit_warning {
background-color: #ffffd3;
padding: 15px;
border: 1px solid #ccc;
margin: 5px 0 5px 0;
text-align: center;
font:1.2em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.message p, #direct_deposit_warning p {
margin: 0;
}
.message p {
padding: 0 !important;
}
.importantmessage {
background-color: #ffd0b8;
}
.successmessage {
background-color: #BCF5A9;
}
.debugmessage {
background-color: #e4d0f5;
}
.cambouncernotes {
background-color: #ffff00 !important;
}
.no-space {
white-space: nowrap;
}
.invalidatoralert {
background-color: #f9bcfa;
}
.alignleft{float:left;}
.alignright{float:right;}
.none{display:none;}
.logo-zone{
float:left;
padding:6px 0 0 15px;
}
.logo-zone strong{
display:block;
padding:0 0 0 17px;
font:.833em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.logo-zone svg{
width: 198px;
height: 61px;
}
.logo{
width:210px;
height:65px;
text-indent:-9999px;
overflow:hidden;
padding:0;
background:url(../../images/logo-standard.png?a401ab051e4c) no-repeat;
box-sizing: border-box;
}
.logo a{
height:100%;
display:block;
position:relative;
}
.button_send {
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
float: right;
}
.button_send a {
display: block;
padding: 3px 5px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
}
.button_send {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -42px;
text-shadow:1px 1px 0 #bc2b1d;
}
.button_send a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -42px;
}
.creat {
color:#fff;
font:1.66em/1.55em 'UbuntuMedium', Arial, Helvetica, sans-serif;
background:#f47321 url(../../images/arrow-white.gif?6afe2ba49479) no-repeat 86% 64%;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
padding: 6px 30px 0 15px;
margin: 0 0 0 10px;
right: 0;
display: inline-block;
float: right;
position: relative;
}
.log-bar{
list-style:none;
margin:0 16px 0 0;
padding:0;
font:.9166em/2.818em 'UbuntuMedium', Arial, Helvetica, sans-serif;
float:right;
background:#084a67;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
}
* html .log-bar{
width:372px;
}
.log-bar li{
float:right;
margin:0 9px;
display:inline;
}
.log-bar li a{
color:#9fd8f1;
float:left;
}
.log-bar li a span{color:#ffc34f;}
.log-bar li a.nick{
padding:0 0 0 20px;
color:#f47321;
float: none;
margin:0px;
background:url(../../images/ico-logout.gif?7c368aa0d062) no-repeat 0 50%;
}
#main{
width:100%;
}
.top-section{
padding:8px 19px 0 15px;
height:1%;
border-bottom:1px solid #8bb3da;
background:#e2e2e2 url(../../images/bg-top-block.gif?057b802f7fc7) repeat-x;
font:1.25em/1.133em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.top-section_small_gfx{
background:#e2e2e2 url(../../images/bg-top-block-small.gif?0437047d9c3a) repeat-x;
}
.top-section:after{
content:"";
display:block;
clear:both;
}
.top-section h1{
margin:0 0 14px;
font-weight: normal;
}
.top-section .announcement {
font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
}
.top-section p{margin:0 0 14px;}
.actions{
display:inline-block;
position: relative;
list-style:none;
margin:0;
padding:0;
height: 1%;
top: 4px;
float:right;
font:.667em/2.4em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.actions li{
float:right;
margin:0 0 0 2px;
}
.actions li a{
float:left;
color:#dc5500;
border:1px solid #8bb3da;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
border-bottom:0;
position:relative;
padding:0 13px 0 5px;
background:#fceadb url(../../images/arrow-right.png?17e6f95d8e2a) no-repeat 95% 50%;
}
.actions li .prev{
padding:0 5px 0 13px;
background:#fceadb url(../../images/arrow-left.gif?ce3332e1d85f) no-repeat 5% 50%;
}
.actions.no_arrow li a{
background-image: none;
padding:0 5px 0 5px;
}
.content{
padding:11px 15px 17px 0;
overflow:hidden;
}
.content .c-1{
margin:0 0 0 15px;
}
.content .c-1 .followers {
font-weight: bold;
margin: 8px 0px 5px 3px;
}
.content .c-1 .recorded{
color: red;
font-weight: bold;
margin: 8px 0px 5px 3px;
}
.content .ad{
clear: both;
float:right;
width:186px;
margin:0 0 0 6px;
border:1px solid #acacac;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background-color: #E0E0E0;
padding-bottom: 4px;
text-align: center;
}
.content .ad img{
display:block;
margin-right: auto;
margin-left: auto;
margin-top: 3px;
margin-bottom: 3px;
}
.list{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
height:1%;
}
.list .thumbnail_label, .list .thumbnail_label_featured{
position: absolute;
right: 3px;
padding: 1px 3px 1px 3px;
text-align: center;
overflow: hidden;
color: #FFF;
font: 10px 'UbuntuRegular',Arial,Helvetica,sans-serif;
}
.list .thumbnail_label {
top: 85px;
}
.list .thumbnail_label_featured{
top: 85px;
border-bottom: 2px solid #dd7f21;
}
.list .thumbnail_label_exhibitionist {
top: 85px;
background-color:#6D85B5;
}
.list .thumbnail_label_recorded{
background-color:#4f4f4f;
}
.list .thumbnail_label_offline{
background-color:#4f4f4f;
}
.list .thumbnail_label_plug {
background-color:#900;
}
.list .thumbnail_label_c {
background-color:#0C6A93;
}
.list .thumbnail_label_c_hd {
background-color:#2472b4;
}
.list .thumbnail_label_c_hd_plus {
background-color:#2472b4;
}
.list .thumbnail_label_c_promoted {
background-color: #0471A1;
}
.list .thumbnail_label_c_private_show {
background-color:#C00;
}
.list .thumbnail_label_c_gaming {
background-color:#2472b4;
}
.list .thumbnail_label_c_new {
background-color: #71b404;
}
* html .list{
padding-bottom:7px;
}
*+html .list{
padding-bottom:7px;
margin:0;
}
.list li{
width:180px;
background:#f0f1f1;
float:left;
position:relative;
margin:0 7px 7px 0;
border:1px solid #acacac;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
max-height: 222px;
overflow: hidden;
}
.list .corners{
position:absolute;
top:-1px;
left:-1px;
width:182px;
height:149px;
overflow:hidden;
text-indent:-9999px;
background:url(../../images/bg-corners.gif?cf88aefe794a) no-repeat;
}
.list img{display:block;}
.list .details{
padding:4px 7px 0;
text-align: left;
}
.list .title{
width:100%;
overflow:hidden;
border-bottom:1px solid #acacac;
}
.list .title a{
float:left;
color:#0a5a83;
font:1.166em/1.142em 'UbuntuMedium', Arial, Helvetica, sans-serif;
width: 125px;
overflow: hidden;
}
.list .title .age{
float:left;
color:#575757;
padding:2px 6px 0 0;
font:1em/1.333em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.list .title .age_gender_container {
float: right;
}
.list .title .genderf,
.list .title .genderm,
.list .title .genderc,
.list .title .genders,
.list .title .genderx {
width: 14px;
height: 14px;
display: inline-block;
float: left;
}
.list .title .genderf::before,
.list .title .genderm::before,
.list .title .genderc::before,
.list .title .genders::before,
.list .title .genderx::before {
content: "\00a0";
}
.list .title .genderf{background:url(../../images/ico-female.svg?818c9c4c368f) no-repeat 100% 0; background-size: contain;}
.list .title .genderm{background:url(../../images/ico-male.svg?251793534c73) no-repeat 100% 0; background-size: contain;}
.list .title .genderc{background:url(../../images/ico-couple.svg?b74df354b80e) no-repeat 100% 0; background-size: contain;}
.list .title .genders{background:url(../../images/ico-trans.svg?4984008acb01) no-repeat 100% 0; background-size: contain;}
.list .title .genderx{background:url(../../images/ico-blank.png?c807e40114dc) no-repeat 100% 0; background-size: contain;}
.likes, .subject {
list-style:none;
margin:0;
padding:0;
font-size:11px;
line-height:16px;
width: 168px;
height: 32px;
overflow:hidden;
color:#000;
}
.subject.one_line {
height: 16px;
}
.likes li, .subject li {
width:auto;
background:none;
border:0;
margin:0 !important;
padding:0 2px;
}
.likes li a, .subject li a {
/*color:#000;*/
}
.sub-info{
list-style:none;
margin:0;
padding:0 0 4px;
font-size:.8333em;
color:#5a5a5a;
overflow:hidden;
height:1%;
}
.sub-info li{
width:auto;
background:none;
border:0;
padding:0 0 0 18px;
margin:0 !important;
position:relative;
float:none;
height:1%;
text-align: left;
}
.sub-info li.location{
background:url(../../images/ico-01.png?5dccbc881a52) no-repeat 0 50%;
width: 145px;
height: 15px;
overflow: hidden;
}
.sub-info li.cams{
background:url(../../images/ico-cams.png?829027f88094) no-repeat 0 50%;
width: 145px;
height: 15px;
overflow: hidden;
}
.sub-info li.cams_opaque{
opacity: 0;
}
.paging{
list-style:none;
margin:0;
padding:8px 0 10px;
overflow:hidden;
height:22px;
text-align:center;
}
.paging li{
display:inline-block;
margin:0 1px;
width:22px;
height:22px;
}
.paging li a{
float:left;
width:21px;
color:#dc5500;
height:21px;
text-align:center;
font:1.166em/1.577em 'UbuntuMedium', Arial, Helvetica, sans-serif;
border:1px solid #cecece;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#ededed;
}
* html .paging li {
display:inline;
margin:0 3px;
}
*+html .paging li {
display:inline;
margin:0 3px;
}
.paging li a:hover,
.paging li.active a{
color:#6d6d6d;
border:1px solid #fff;
text-decoration:none;
background:none;
font-family:'UbuntuRegular', Arial, Helvetica, sans-serif;
}
.paging li.active a{
cursor: default;
}
.paging li a.prev,
.paging li a.prev:hover{
text-indent:-9999px;
border:1px solid #f1d2bf;
background:#fceadb url(../../images/arrow-left.gif?ce3332e1d85f) no-repeat 50% 50%;
}
.paging li a.next,
.paging li a.next:hover{
text-indent:-9999px;
border:1px solid #f1d2bf;
background:#fceadb url(../../images/arrow-right.gif?70f424c35037) no-repeat 50% 50%;
}
.darkmode li a.prev, li a.prev:hover {
background: #2a2c2e url(../../images/arrow-left_dm.svg?b9699c1795b0) no-repeat 50% 50%;
}
.darkmode li a.next {
background: #2a2c2e url(../../images/arrow-right_dm.svg?2ab10858e309) no-repeat 50% 50%;
}
.banner{
margin:0 auto;
text-align: center;
}
.banner img{
display:block;
margin-right: auto;
margin-left: auto;
}
.block{
background:#e0e0e0;
border:1px solid #acacac;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:4px;
overflow:hidden;
}
.block .section{
overflow:hidden;
margin:0 0 5px;
height:514px;
}
#room_password{
background-color:transparent;
border:none;
}
.video-box{
background:#fff;
width:498px;
float:left;
border:1px solid #acacac;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
}
.video-box-embed{
width: 100%;
height: 100%;
}
.video-box .video{
width:500px;
height:407px;
margin:0 -1px;
}
.video-box .title{
overflow:hidden;
height:17px;
padding:6px 6px 9px 9px;
}
.video-box img{display:block;}
.video-box .title a{
color:#0c6a93;
font:.833em/1.6em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.block-section{
width:100%;
float:left;
}
.video-box h2{
margin:0;
font:1.166em/1.142em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.chat-box{
border:1px solid #acacac;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
background:#fff;
}
.chat-holder{margin:0 0 0 508px;position:relative;}
.buttons{
font:.916em/19px 'UbuntuMedium', Arial, Helvetica, sans-serif;
list-style:none;
margin:0 0 10px;
padding:3px 0 0 3px;
overflow:hidden;
background:#7f7f7f;
}
.buttons li{
float:left;
margin:0 2px 0 0;
}
.buttons a{
float:left;
color:#4c4c4c;
padding:0 8px;
margin:0;
position:relative;
background:#c9c9c9;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
}
.buttons a:hover,
.buttons .active a{
text-decoration:none;
background:#fff;
color:#dc5500;
}
.buttons .active a{
cursor: default;
}
.buttons img{
display:block;
margin:2px 0 1px;
}
.users-list {display: none;}
.users-list,
.settings-list,
.chat-list{
height:432px;
overflow:auto;
background:#fff;
padding:0 11px 0 11px;
color:#494949;
margin:0 0 7px;
/* 1em/1.166em */
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.chat-list .text {
margin:0 0 5px;
line-height: 120%;
}
.chat-list .cam_badge {
display: none;
float: left;
margin-right: 2px;
}
.chat-list span.roommessagelabel {
color:#DC5500;
font-weight:bold;
}
.chat-list span.pmalert {
color:#900;
font-weight:bold;
}
.chat-list span.messagelabel {
margin:0 4px 0 0;
float:left;
text-decoration: none;
color:#666666;
font-weight: bold;
}
.chat-list span.fanclubmessagelabel {
color:#090;
}
.chat-list span.tippedrecentlymessagelabel {
color:#009;
}
.chat-list span.tippedalotrecentlymessagelabel {
color: #be6aff;
}
.chat-list span.tippedtonsrecentlymessagelabel {
color: #804baa;
}
.chat-list span.hastokensmessagelabel{
color:#69A;
}
.chat-list span.hostmessagelabel {
color:#DC5500;
}
.chat-list span.moderatormessagelabel {
color:#DC0000;
}
.chat-list span.messagelabel:hover {
text-decoration: underline;
}
.chat-list span.othermessagelabel {
text-decoration: none;
font-weight: bold;
}
.chat-list span.othermessagelabel:hover {
text-decoration: underline;
}
.chat-list span.warningmessage {
color:#FF0000;
}
.chat-list .text p {
margin: 0;
}
.chat-list .text {
overflow-y: hidden;
}
.chat-list .text p a.thumbnail img, .chat-list .text a.thumbnail img {
border: 2px solid;
}
.chat-list span.privatealert {
color: #222;
font-weight: bold;
background-color: #ff8b45;
padding: 2px 4px;
}
.chat-list span.tipalert {
color: #003;
font-weight: bold;
background-color: #ff3;
}
.chat-list span.purchasealert {
color: #003;
font-weight: bold;
background-color: #33ff33;
}
.chat-list span.privatealert a {
color: #FFF;
text-decoration: underline;
}
.color-o{color:#DC5500;}
.color-m{color:#DC0000;}
.color-f{color:#090;}
.color-tr{color:#009;}
.color-g{color:#494949;}
.color-t{color:#69A;}
.color-p{color:#be6aff;}
.color-l{color:#804baa;}
.color-w{color:#ffffff;}
.color-bg-o{background-color:#DC5500;}
.color-bg-m{background-color:#DC0000;}
.color-bg-f{background-color:#090;}
.color-bg-tr{background-color:#009;}
.color-bg-g{background-color:#494949;}
.color-bg-t{background-color:#69A;}
.color-bg-p{background-color:#be6aff;}
.color-bg-l{background-color:#804baa;}
.mention-user{font-weight: bold;}
.mention-user-active{padding:0px 2px;}
.chat-form {margin:0 5px 3px;white-space:nowrap !important;}
.chat-form .row{
overflow:hidden;
height:1%;
padding:2px 0px 2px 0px;
border:1px solid #b1b1b1;
border-radius:4px;
white-space:nowrap;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px;
padding-left: 5px;
}
.chat-form .text{
float:right;
padding:3px 0;
margin-left: 6px;
background:url(../../images/none.gif?b1442e85b03b) no-repeat;
width:100%;
border:0;
line-height: 12px;
height: 12px;
outline: 0 none;
}
.chat-form .submit{
float:right;
padding:0;
margin:0 0 0 5px;
border:0;
width:39px;
height:21px;
background:url(../../images/btn-send.gif?da1a3895f87d) no-repeat;
cursor:pointer;
}
.chat-form .smile{
text-indent:-9999px;
overflow:hidden;
float:right;
width:15px;
height:15px;
margin:3px 5px 0 0;
background:url(../../images/ico-smile.png?8bca548eda3f) no-repeat;
}
.chat-form .tip {
text-indent:-9999px;
overflow:hidden;
float:right;
width:15px;
height:15px;
margin:3px 0 0;
background:url(../../images/ico-tip3.gif?f0e3c392165a) no-repeat;
}
.conteststats {
margin: 15px 15px 15px 15px;
}
.conteststats dl {
font-size: 1.166em;
line-height: 20px;
margin: 5px 0px 20px 15px;
}
.conteststats dl {
color:#000;
}
.conteststats dl dt {
float: left;
color: #0C6A93;
width: 200px;
font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
}
.conteststats h2 {
color: #0C6A93;
font-size: 1.266em;
font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
font-weight: normal;
margin-bottom: 2px;
border-bottom: 1px solid #4c4c4c;
width: 640px;
}
.conteststats h2 span {
color: #000;
font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
#leaderboard .number {
width: 25px;
}
#leaderboard .image {
width: 52px;
}
#leaderboard {
color: #0C6A93;
font-weight: bold;
font-size: 16px;
margin-bottom: 20px;
}
#leaderboard .points {
color: #000;
font-weight: normal;
font-size: 12px;
}
#leaderboard .position_1, #leaderboard .position_1 a {
color: #DC5500;
font-weight: bold;
font-size: 20px;
}
#leaderboard p {
margin: 5px;
}
#leaderboard {
border-collapse:collapse;
width: 640px;
}
#leaderboard .unclaimed {
color: #930a11;
font-size: 15px;
line-height: 44px;
}
#leaderboard td {
padding: 5px;
border-bottom: 1px solid #ccc;
}
#leaderboard .time {
width: 50px;
text-align: center;
font-size: 13px;
}
.info-user{
border:1px solid #acacac;
border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
background:#fff;
min-height:325px;
}
.info-user .title{
overflow:hidden;
height:1%;
}
.socials{
list-style:none;
margin:0;
padding:4px 0 0;
overflow:hidden;
float:right;
}
.socials li{
float:right;
margin:0 0 0 0px;
}
.socials li a{
float:left;
overflow:hidden;
height:21px;
}
.socials .button_follow, .button_unfollow, .button_tip, .button_share, .button_follow_dim, .button_unfollow_dim {
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 10px;
margin-right: 10px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.socials .button_follow a, .button_unfollow a, .button_tip a, .button_share a {
display: block;
padding: 3px 10px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
}
.button_rate, .button_rate_dim {
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 0px;
margin-right: 10px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.button_rate_lctnr {
display: inline-block;
padding: 0px 0px 0px 10px;
}
.button_rate_rctnr {
display: inline-block;
overflow: hidden;
height: 21px;
width: 5px;
}
.button_rate {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -126px;
color: #0a5a83;
text-shadow:1px 1px 0 #94D2E6;
}
.button_rate_dim {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -21px;
color: #6f6f6f;
text-shadow:1px 1px 0 #4f4f4f;
}
.button_rate .button_rate_lctnr {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -126px;
}
.button_rate_dim .button_rate_lctnr {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -21px;
}
#thumb_up_off, #thumb_up_off_dim {
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat 0px 0px;
}
#thumb_down_off, #thumb_down_off_dim {
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat -16px 0px;
}
#thumb_up_on {
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat 0px -16px;
}
#thumb_down_on {
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat -16px -16px;
}
.button_rate .thumb_img, .button_rate_dim .thumb_img {
margin-top: 3px;
float: right;
height: 16px;
width: 16px;
}
.button_rate_text {
display: inline-block;
padding-top: 3px;
padding-right: 2px;
float: left;
cursor: default;
}
.button_rate_dim .thumb_img, .button_rate_dim .button_rate_text, .button_follow_dim span, .button_unfollow_dim span {
opacity: 0.67;
}
.button_rate_dim .thumb_img, .button_rate .thumb_img {
margin-left: 6px;
}
#broadcaster_rating {
display: inline-block;
cursor: default;
}
#broadcaster_rating > span {
color: #7F7F7F;
display: inline-block;
height: 21px;
min-width: 8px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
font-size: 14px;
padding-top: 2px;
text-shadow: 1px 1px 0 #fff;
}
#broadcaster_rating > .btn_left {
position: relative;
left: 3px;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat left -126px;
}
#broadcaster_rating > .btn_right {
position: relative;
left: -3px;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -126px;
}
#broadcaster_rating > .btn_middle {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat center -126px;
}
#broadcaster_rating .thumbs_up_text {
position: relative;
top: -2px;
margin-right: 8px;
}
.button_rate_text.thumbs_up_text {
margin-left: 10px;
margin-right: 4px;
}
.button_rate_text.thumbs_down_text {
margin-left: 4px;
}
#broadcaster_rating .thumbs_down_text {
position: relative;
top: -2px;
margin-left: 8px;
}
#broadcaster_rating .rating_percent {
position: relative;
top: -2px;
left: -8px;
}
.rating_percent.green {
color: #298A08;
}
.rating_percent.orange {
color: #DF7401;
}
.rating_percent.red {
color: #DF0101;
}
.thumbs_up_image {
position: relative;
top: 1px;
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat 0px 0px;
display: inline-block;
height: 16px;
margin-right: 16px;
width: 16px;
}
#thumb_up_off_dim.thumbs_up_image, #thumb_up_off.thumbs_up_image,
#thumb_up_on_dim.thumbs_up_image, #thumb_up_on.thumbs_up_image {
margin-right: 4px;
top: 3px;
}
.thumbs_down_image {
position: relative;
top: 1px;
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat -16px 0px;
display: inline-block;
height: 16px;
width: 16px;
}
#thumb_down_off_dim.thumbs_down_image, #thumb_down_off.thumbs_down_image,
#thumb_down_on_dim.thumbs_down_image, #thumb_down_on.thumbs_down_image {
margin-left: 4px;
top: 3px;
}
.thumb_placeholder {
position: relative;
top: 1px;
display: inline-block;
height: 16px;
width: 1px;
}
.low_score_warning {
color: #DF0101;
float: right;
}
.socials .button_follow, .button_tip, .button_share {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px 0px;
text-shadow:1px 1px 0 #f18112;
}
.socials .button_follow a, .button_tip a, .button_share a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right 0px;
}
.socials .button_unfollow {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -21px;
text-shadow:1px 1px 0 #383838;
}
.socials .button_unfollow a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -21px;
}
.socials .button_follow_dim, .button_unfollow_dim {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -21px;
color: #6f6f6f;
text-shadow:1px 1px 0 #4f4f4f;
}
.button_follow_dim span, .button_unfollow_dim span {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -21px;
color: #6f6f6f;
text-shadow:1px 1px 0 #4f4f4f;
display: block;
padding: 3px 10px 0px 0px;
height: 18px;
text-decoration: none;
}
.socials li .google_plus_one{
width: 63px;
margin-top: 3px;
}
.socials li .addthis{
width: 175px;
margin-top: 2px;
}
.socials li #dynamicIcons{
width:82px;
display: inline;
margin-right: 6px;
}
.info-user .headline{
margin:0 0 6px;
overflow:hidden;
background:#7f7f7f;
padding:0 4px;
}
.info-user .headline .buttons{
float:left;
padding:6px 0 0;
margin:0;
font-size:1.083em;
line-height:1.846em;
}
.bottompanel,
.bio{
background:#fff;
min-height:288px;
overflow:auto;
}
.fixedheightbottompanel {
height:288px;
}
.bio dl{
overflow:hidden;
padding:7px 15px 0;
font-size:1.166em;
line-height:16px;
margin:0;
}
.bio dl dt{
position: absolute;
color:#0c6a93;
width:150px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.bio dl dd{
padding-left: 150px;
color:#000;
margin:0 0 9px;
min-height: 16px;
}
.bio dl dd p{
margin: 0px;
}
.editabletext {
cursor:pointer;
}
.content_body{
padding:0 19px 0 32px;
font:1em/1.3em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.content .legal_text {
font:1.1em/1.3em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.legal_text {
font:1.1em/1.3em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.content_body h1{
margin:0 0 14px;
font:1.733em/1.0769em 'UbuntuMedium', Arial, Helvetica, sans-serif;
color:#f47321;
}
.content_body h2{
margin:20px 0 14px;
font:1.166em/1.142em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.content_body h3{
margin:20px 0 14px;
font:1.166em/1.142em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.content_body li{
margin: 8px 0px 8px 0px;
}
.content_header{
font:1.166em/1.142em 'UbuntuRegular', Arial, Helvetica, sans-serif;
line-height:1.5em;
}
.content_header .standout {
color:#DC5500;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.content_header h1{
margin:0px;
font:1.733em/1.0769em 'UbuntuMedium', Arial, Helvetica, sans-serif;
color: #090;
}
.photopages, #tabs_content_container, .claim_winnings, .contest_rules,
.leaderboard, .previous_winners {
margin: 15px;
}
.photopages .photos_links,
#tabs_content_container .sub_navigation {
display: block;
margin-bottom: 15px;
}
#tabs_content_container .sub_navigation span {
color:#888;
}
#tabs_content_container .ubunturegular {
font: 1.2em/1.4em 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
#tabs_content_container .share_input {
width: 375px;
}
#tabs_content_container h1 {
font: 1.2em/1.4em 'UbuntuMedium', Arial, Helvetica, sans-serif;
margin-bottom: 20px;
}
.photopages .image_container {
float: left;
margin-right: 5px;
text-align: center;
}
.photopages .image_container img {
border: 1px solid #8bb3da;
margin: 0px;
padding: 0px;
}
.photopages .image_container img:hover {
border: 1px solid #f47321;
}
.photopages .image_container .image_info {
padding-bottom: 10px;
font-size: 10px;
}
.endless_container {
clear:both;
display: block;
margin-bottom: 15px;
}
.margintop_100px {
margin-top: 100px;
}
.tip_popup {
position:absolute;
z-index: 1000;
width:396px;
top:-206px;
left:352px;
}
.emote_popup {
z-index: 1000;
width:396px;
position:absolute;
bottom:28px;
right:34px;
}
.previous_winners h2 {
color: #626262;
font: 1.45em 'UbuntuBold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.previous_winners .form strong {
color:#000;
font: 1.0em 'UbuntuBold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
/* report popup within .video-box */
#report_popup {
position:absolute;
top:22px;
right:3px;
z-index: 999;
margin:0px;
padding:0px;
width:354px;
font-size:11px;
font-family:'UbuntuBold', Arial, Helvetica, sans-serif;
color:#454545;
}
#report_popup .carrot {margin: 0px;padding: 0px;}
#report_popup .report_formborder{
border-bottom:2px solid #0b5d81;
border-right:2px solid #0b5d81;
border-left:2px solid #0b5d81;
background-color: #fff;
margin: 0px;
border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
height:205px;
}
#report_popup .report_title {
margin:0px;
padding:6px 0px 0px 6px;
background-color:#e0e0e0;
height:23px;
color:#0b5d81;
font-size:15px;
}
#report_popup .report_select {margin:5px 0px 10px 10px;}
#report_popup select {margin-left:5px;width:168px;}
#report_popup .report_comments {margin:0px 0px 0px 10px;}
#report_popup textarea {
margin:0;
border:1px solid #a4a4a4;
width:323px;
height:80px;
resize:none;
}
#report_popup .report_buttons {
float:right;
margin:10px 8px 0px 0px;
}
/* submenu popups */
#jscontext .jscontextContainer {
margin: 0px;
padding: 0px;
height: auto;
width:196px;
min-width:196px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#454545;
}
.jscontextContainer .jscontextMenu{
border:1px solid #a4a4a4;
background-color: #e7e7e7;
margin:0px;
padding-bottom:8px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
min-height:106px;
width:250px;
min-width:250px;
max-width:250px;
}
.jscontextContainer .jscontextLabel {
margin:6px 4px;
color:#383838;
font-weight:bold;
}
.jscontextContainer .jscontextLabel img {
padding:3px 5px 0px 0px;
vertical-align:top;
}
.jscontextContainer p.jscontextBtn {
position:relative;
height:16px;
padding:3px 10px 0px 19px;
color:#004563;
margin:0px;
}
.jscontextContainer p.jscontextBtn:hover {
color:#fff;
background-color:#7f7f7f;
cursor:pointer;
}
.jscontextContainer div.pmline {
width:194px;
height:16px;
max-height:16px;
margin:0px auto;
color:#004563;
overflow:hidden;
}
.jscontextContainer div.pmline:hover {
background-color:#7f7f7f;
cursor:pointer;
color:#fff;
}
.jscontextContainer div.pmline:after {
content: "";
clear:both;
}
.jscontextContainer div.user {
width:152px;
float:left;
margin-left:10px;
}
.jscontextContainer div.close {
background:url('../../images/icon-close-off.gif?07cc62be6300') no-repeat top right;
float:right;
width:14px;
height:16px;
margin-right:10px;
}
.jscontextContainer div.pmline:hover div.close {
background:#7f7f7f url('../../images/icon-close-on.gif?b1f91053b079') no-repeat top right;
cursor:pointer;
}
/*.jscontextContainer div.pmline:hover div.user:after {
content: "Close";
padding-left: 87px;
color:#e7e7e7;
font-size:10px;
}*/
.jscontextContainer div.submenu_profile {
position:relative;
padding:3px 0px 3px 3px;
margin:0px;
color:#575757;
font-weight:bold;
}
.jscontextContainer div.submenu_profile img {
border:1px solid #f47321;
vertical-align:top;
margin-right:5px;
}
.jscontextContainer div.submenu_profile_info {
display: inline-table;
margin-top:5px;
}
.jscontextContainer div.submenu_profile_info img.icon {
border:none;
vertical-align:baseline;
padding-left:3px;
}
.jscontextContainer div.submenu_profile_info a {
color:#004563;
font-weight:normal;
text-decoration:none;
display: table-row;
}
.jscontextContainer div.submenu_profile_info a:hover {
text-decoration:underline;
}
.jscontextContainer p.pm {
background:url('../../images/icon-email.gif?a7eac4bc7204') no-repeat 5px 6px;
}
.jscontextContainer p.ignore {
background:url('../../images/icon-ignore.gif?fedfb72a3203') no-repeat 5px 6px;
}
.jscontextContainer hr {
border:none; /* reset borders */
border-bottom:1px solid #8b8b8b;
margin:3px 4px;
padding:0px;
}
/* new prejoin with comparison table */
.register {
margin-bottom: 30px;
clear: both;
width: 1000px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
}
.register h1{
margin:0;
padding:5px 0 0;
font:1.733em/1.0769em 'UbuntuMedium', Arial, Helvetica, sans-serif;
color:#f47321;
}
.register p {
margin:4px 0 14px;
}
.register p .red {
color: #900;
font: 1em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.register p .graybold {
font: 1em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.form_frame {
width:925px;
height:auto;
margin-top: 15px;
display: inline-block;
border: 1px solid #CECECE;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.compare_body {
width:360px;
height: auto;
padding:34px;
/* background:url('../../images/register_03.gif?b4c696ec6fa5'); */
float: left;
margin: 0;
border:none;
}
.compare_body .headertextarea {
background-color: #E0E0E0;
width: 502px;
height: 90px;
}
.compare_body .headertextarea h2 {
font: 11px 'UbuntuMedium', Arial, Helvetica, sans-serif;
text-align: center;
margin-left: 8px;
}
.compare_body .headertextarea h2 .black {
color: #000;
font-size: 20px;
line-height: 25px;
}
.compare_body .headertextarea .blue {
color: #0c6a93;
font-size: 20px;
line-height: 25px;
}
.compare_table {
margin: 0 0 0 7px;
width: 488px;
}
.compare_table .regular_row {
font: 11px 'UbuntuMedium', Arial, Helvetica, sans-serif;
height: 26px;
}
.compare_table .lightblue_row {
background-color: #d7e9f1;
height: 26px;
font: 11px 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.compare_table .title td {
text-align: center;
padding-top: 6px;
}
.compare_table .ourtitle {
font: 16px 'UbuntuMedium', Arial, Helvetica, sans-serif;
color: #0c6a93;
width: 165px;
}
.compare_table .theirtitle {
font: 14px 'UbuntuMedium', Arial, Helvetica, sans-serif;
width: 165px;
}
.compare_table .featuretext{
text-indent: 4px;
font-size: 13px;
}
.compare_table .redno{
color:#900;
text-align: center;
}
.compare_table .greenyes {
color:#060;
text-align: center;
}
.compare_table .grayavg {
text-align: center;
}
.compare_table .closingtext {
text-align: center;
height: 100px;
}
.compare_table .closingtext .choiceclear {
color: #0C6A93;
font: 26px 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.compare_table .closingtext .choiceclear2 {
color: #313131;
font: 16px 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
.register_body {
margin:0;
width:480px;
height: auto;
/* background:url(../../images/register_04.gif?2ec66ed0dcee) no-repeat; */
float: left;
padding:0;
padding-top:27px;
margin-left:0px;
}
.register_body h1 {
margin:0 0 14px;
font:1.733em/1.0769em 'UbuntuMedium', Arial, Helvetica, sans-serif;
color:#f47321;
}
.register_body p {
margin:-11px 0 14px;
}
.register_body .form_body {
margin-left: -45px;
}
.studio-found-msg,
.studio-found-err-msg {
margin-top: 15px;
}
.studio-invalid-msg span {
font-family: Ubuntu, Arial, Helvetica, sans-serif;
color: #d50000;
font-weight: bold;
display: inline-block;
vertical-align: bottom;
width: auto;
max-width: 300px;
text-overflow: ellipsis;
overflow: hidden;
}
.studio-found-msg span {
font-family: Ubuntu, Arial, Helvetica, sans-serif;
font-weight: bold;
display: inline-block;
vertical-align: bottom;
max-width: 300px;
width: auto;
text-overflow: ellipsis;
overflow: hidden;
}
.register_body form .button{
width:337px;
height:37px;
background: rgb(246,115,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2NzMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNDYzMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(246,115,0,1) 0%, rgba(212,99,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,115,0,1)), color-stop(100%,rgba(212,99,0,1)));
background: -webkit-linear-gradient(top, rgba(246,115,0,1) 0%,rgba(212,99,0,1) 100%);
background: -o-linear-gradient(top, rgba(246,115,0,1) 0%,rgba(212,99,0,1) 100%);
background: -ms-linear-gradient(top, rgba(246,115,0,1) 0%,rgba(212,99,0,1) 100%);
background: linear-gradient(to bottom, rgba(246,115,0,1) 0%,rgba(212,99,0,1) 100%);
background-color: #f47321;
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f67300', endColorstr='#d46300',GradientType=0 )";
text-transform:uppercase;
font: 18px 'UbuntuMedium', Arial, Helvetica, sans-serif;
text-align:center;
padding:0;
text-decoration:none !important;
margin: 15px auto;
}
.register_body form .button:disabled{
opacity:0.4;
cursor:default;
}
.register_body form .button:hover:disabled{
opacity:0.4;
cursor:default;
}
.register_body form .button:hover{
opacity:0.9;
}
.badge_verify_age h2 {
color: #DC5500;
margin: 5px 0px 5px 15px;
}
#email_disclosure{
margin-top: -20px;
}
.compare_box{
height:390px;
background-color:#F0F6FA;
border: 1px solid #D0D0D0;
}
.compare_box_hl{
text-align:center;
height:45px;
font: 21px 'UbuntuMedium', Arial, Helvetica, sans-serif;
line-height:25px;
color:#006995;
margin-top:20px;
}
.compare_box_row{
height:100px;
border-bottom: 1px solid #D0D0D0;
margin-left:35px;
margin-right:35px;
}
.compare_box_img{
float:left;
width:50px;
margin-top:22px;
}
.compare_box_txt{
float:left;
width:auto;
font: 16px 'UbuntuRegular', Arial, Helvetica, sans-serif;
line-height:22px;
color:#494949;
margin-top:25px;
margin-left:15px;
}
/* fonts */
@font-face {
font-family: 'UbuntuRegular';
src: url('../../fonts/ubuntur-webfont.eot?1188017abdc0');
src: url('../../fonts/ubuntur-webfont.eot?&1188017abdc0#iefix') format('eot'),
url('../../fonts/ubuntur-webfont.woff?896a82003cd1') format('woff'),
url('../../fonts/ubuntur-webfont.ttf?37cf452b3f58') format('truetype'),
url('../../fonts/ubuntur-webfont.svg?396700312810#webfontH0ji1hXa') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBold';
src: url('../../fonts/ubuntub-webfont.eot?a870ebadce32');
src: url('../../fonts/ubuntub-webfont.eot?&a870ebadce32#iefix') format('eot'),
url('../../fonts/ubuntub-webfont.woff?6455d1004bc5') format('woff'),
url('../../fonts/ubuntub-webfont.ttf?abee57aeee27') format('truetype'),
url('../../fonts/ubuntub-webfont.svg?693d742037eb#webfontOIyUgfKw') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuMedium';
src: url('../../fonts/ubuntum-webfont.eot?d8f8ba0da549');
src: url('../../fonts/ubuntum-webfont.eot?&d8f8ba0da549#iefix') format('eot'),
url('../../fonts/ubuntum-webfont.woff?a7fc63c36394') format('woff'),
url('../../fonts/ubuntum-webfont.ttf?b720a4d699c2') format('truetype'),
url('../../fonts/ubuntum-webfont.svg?c08a26c0b9c4#webfontl8qOUOft') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuLight';
src: url('../../fonts/ubuntul-webfont.eot?&e88fce520190#iefix') format('eot'),
url('../../fonts/ubuntul-webfont.woff?ab8a55e7d148') format('woff'),
url('../../fonts/ubuntul-webfont.ttf?107b250100bf') format('truetype'),
url('../../fonts/ubuntul-webfont.svg?273b9d2d1b08') format('svg');
font-weight: normal;
font-style: normal;
}
.button_abuse_report, .button_abuse_cancel {
display: inline-block;
height: 21px;
width: auto;
padding-left: 5px;
margin: 5px 8px 5px 0px;
font-size: 13px;
font-family:'UbuntuBold', Arial, Helvetica, sans-serif;
float: right;
}
.button_abuse_report a, .button_abuse_cancel a {
display: block;
padding: 3px 5px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
}
.button_abuse_report {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -42px;
text-shadow:1px 1px 0 #bc2b1d;
}
.button_abuse_report a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -42px;
}
.button_abuse_cancel {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -63px;
text-shadow:1px 1px 0 #383838;
margin-right: 5px;
}
.button_abuse_cancel a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -63px;
}
#af_content {
width: 960px;
margin: 0px auto;
}
#af_content p {
font: 14px 'UbuntuRegular', Arial, Helvetica, sans-serif;
line-height: 22px;
color: #454545;
font-weight: normal;
}
#af_content p span {
font: 18px 'UbuntuBold', Arial, Helvetica, sans-serif;
color: #303030;
}
#af_content h2 {
font-weight: normal;
font: 20px 'UbuntuBold', Arial, Helvetica, sans-serif;
color: #f47321;
}
#af_content h3 {
font-weight: normal;
font: 18px 'UbuntuBold', Arial, Helvetica, sans-serif;
color: #303030;
margin: 0 0 10px 0;
}
#af_content .signup_button {
float: right;
}
#af_content .signup_button:after {
clear:both;
display: block;
}
#af_content .tier {
background-color: #efefef;
border: 1px solid #acacac;
padding: 10px;
width: 278px;
margin-right: 30px;
float: left;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
#af_content .last {
margin-right: 0px;
}
#af_content .tier .title {
border-bottom: 1px solid #777;
padding-bottom: 5px;
margin-bottom: 5px;
font: 18px 'UbuntuMedium', Arial, Helvetica, sans-serif;
color: #484848;
}
#af_content .tier p {
font: 12px 'UbuntuRegular', Arial, Helvetica, sans-serif;
color: #363636;
margin: 0px;
padding: 0px;
}
#af_content .tier strong {
color: #378b0a;
font: 17px 'UbuntuBold', Arial, Helvetica, sans-serif;
}
#af_content .share {
background-color: #d4ecf8;
border: 1px solid #acacac;
padding: 0 10px;
width: 938px;
margin: 10px 0 20px 0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
#af_content .share p {
margin: 5px 0 5px 5px;
font: 14px 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
#af_content .share p span {
font: 14px 'UbuntuBold', Arial, Helvetica, sans-serif;
color: #378b0a;
}
#af_content .share input {
border: 1px solid #acacac;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
width: 930px;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
font: 20px 'UbuntuRegular', Arial, Helvetica, sans-serif;
color: #5a5a5a;
}
#af_content .button {
float: right;
display: block;
width: 370px;
font-weight: normal;
text-transform:uppercase;
font: 21px 'UbuntuBold', Arial, Helvetica, sans-serif;
color: #fff;
background: #F47321 url(../../images/arrow-white-v2.gif?75bde39356c3) no-repeat right 50%;
padding: 10px 0px 10px 20px;
border: 1px solid #B1B1B1;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#af_content hr {
clear: both;
margin: 25px 0 20px 0;
border: 0;
color :#989898;
background-color:#989898;
height: 1px;
}
.code {
font-family: monospace;
font-size: 14px;
color: #084a67;
}
.data_table {
border: 1px solid #ccc;
color:#222;
border-collapse:collapse;
margin-bottom: 30px;
}
.data_table th, .data_table td {
border-right: 1px solid #ccc;
padding-left: 4px;
line-height: 20px;
}
.data_table th {
background-color: #cccccc;
text-align: left;
color: #494949;
}
.data_table .altbg {
background-color: #eeeeee;
}
.data_table .data_message {
color: #666;
font-weight: normal;
word-break: break-all;
}
.table_tokens_earned {
width: 275px;
}
.table_recent_tips {
width: 675px;
padding: 0px;
margin: 0px;
}
.account_activity {
width: 700px;
height: 250px;
overflow: auto;
}
.dismissible_notice {
background-color: #ccc;
padding: 3px;
margin-bottom: 5px;
}
.set_goal_button, .broadcast_set_goal_button {
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 10px;
margin-right: 10px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.set_goal_button {
position: absolute;
left: 395px;
top: 484px;
}
.broadcast_set_goal_button {
position: absolute;
left: 410px;
top: 471px;
}
.set_goal_button a, .broadcast_set_goal_button a {
display: block;
padding: 3px 10px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
}
.set_goal_button, .broadcast_set_goal_button {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -84px;
text-shadow:1px 1px 0 #588d3d;
}
.set_goal_button a, .broadcast_set_goal_button a {
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -84px;
}
.broadcaster_panel_goal_configuration {
padding: 5px;
margin: 0px;
}
.broadcaster_panel_goal_configuration p {
margin: 0px;
margin-left: 2px;
font-weight: normal;
}
.broadcaster_panel_goal_configuration table {
margin: 0px;
padding: 0px;
}
.broadcaster_panel_goal_configuration td {
margin-left: 0px;
font-weight: normal;
width: 45px;
}
.broadcaster_panel_goal_configuration label {
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
color: #0C6A93;
}
.broadcaster_panel_goal_configuration .cancel {
position: absolute;
top: 444px;
left: 430px;
font-size: 11px;
}
#roomtitle {
height:19px;
line-height: 19px;
font-size: 12px;
overflow:hidden;
}
.content .ad .remove_ads {
background-color: #fc760c;
color:#fff;
margin-bottom: 10px;
}
.content .ad .remove_ads a {
color: #FFF;
font: 14px 'UbuntuBold', Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 20px;
}
.content .ad .remove_ads img {
float: left;
margin: 4px;
}
.ad_table {
max-width: 930px;
margin-top:20px
}
.banner .remove_ads {
background-color: #fc760c;
color:#fff;
border: 1px solid #bebebe;
border-radius:4px 4px 0px 0px;
-webkit-border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
text-align: left;
}
.banner .remove_ads a {
color: #FFF;
font: 14px 'UbuntuBold', Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 20px;
}
.banner .remove_ads img {
float: left;
margin: 4px;
}
table.tabular th{
font: 1.1em 'UbuntuMedium',Arial,Helvetica,sans-serif;
border-bottom: 1px solid #CCCCCC;
padding-right: 5px;
}
table.tabular tr:nth-child(even) {background: #dde9f5}
table.tabular tr:nth-child(odd) {background: #ffffff}
table.tabular tr td{
padding: 3px;
font: 1.1em Arial,Helvetica,sans-serif;
}
.content_body ul.followers li{
margin-left: 10px;
}
.content_body .frame {
background-color: #FFF;
}
.video-box{
position: relative;
}
.section #tooltip-subject{
position: absolute;
top: 32px;
left: 0px;
width: 475px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border: 1px solid #000000;
padding: 10px;
height: auto;
background-color: #ffffff;
z-index: 999;
}
div.warning-info{
color: #808080;
}
div.warning{
padding: 10px;
}
.searching-overlay {
position: absolute;
box-sizing: border-box;
z-index: 1;
background-color: #f1f2f2;
opacity: 0.9;
text-align: center;
min-height: 30px;
}
.searching-overlay-spinner {
height: 125px;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
margin-top: 200px;
vertical-align: top;
}
@keyframes spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.searching-overlay-spinner-medium {
height: 75px;
margin-top: 0;
vertical-align: middle;
}
.searching-overlay-spinner-small {
height: 50%;
margin-top: 0;
vertical-align: middle;
}
.searching-overlay-spinner-very-small {
height: 100%;
margin-top: 0;
}
.clearfix{
content: "";
clear: both;
display: table;
}
.notice span {
font-weight: bold;
color: #ff0000;
}
.supportlink{
font-size: 11px;
text-align: center;
color: #FFFFFF;
}
.supportlink a {
font-weight: normal;
text-align: center;
color: #ccc;
text-decoration: underline;
}
.content .featured_blog_posts {
margin-top: 40px;
margin-left: 32px;
margin-bottom: 0;
}
.featured_blog_posts h2 {
font: 1.5em/1.2em 'UbuntuBold', Arial, Helvetica, sans-serif;
}
.featured_blog_posts .h2link, .featured_blog_posts h2 a {
font:.8em/.8em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.featured_blog_posts .blog_post {
width: 250px;
height: 110px;
display: block;
float: left;
padding: 0 30px 10px 0;
}
.featured_blog_posts .blog_post .title_shell {
background: url(../../images/grey_background.gif?70ac82db1626) repeat-x 0px 5px;
margin-bottom: 5px;
}
.featured_blog_posts .blog_post .title {
display: inline-block;
font:1.2em/1.4em 'UbuntuBold', Arial, Helvetica, sans-serif;
background: #FFF;
padding-right: 8px;
}
.featured_blog_posts .links {
color: #5A5A5A;
font:.8333em/.8333em 'UbuntuRegular', Arial, Helvetica, sans-serif;
margin-top: 8px;
}
.upgrade_footer_text {
text-align: center;
font-family:'UbuntuRegular', Arial, Helvetica, sans-serif;
margin-top: 40px;
}
.follow_tooltip, .share_tooltip, #rate_tooltip, #rated_tooltip, #rate_dim_tooltip, #broadcaster_rating_tooltip,
#broadcaster_rating_history, .anon_tip_tooltip {
position: absolute;
z-index: 1000;
margin-top: 11px;
margin-left: -150px;
width: 225px;
background: #fdf6a8;
border: 3px solid #ffa63d;
padding: 0.5em 0.8em 0.8em 2em;
}
#rating_history_triangle {
position:absolute;
z-index: 1000;
margin-top: 6px;
margin-left: 65px;
width: 0;
height:0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #0b5d81;
}
#broadcaster_rating_history {
border: 3px solid #0b5d81;
background: #fff;
width: 300px;
height: auto;
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
border-radius: 5px;
padding: 2px;
}
.rating_history_item {
margin: 2px;
padding: 5px;
}
#broadcaster_rating_history .thumbs_up_image {
background: url(../../images/thumb_sprites.png?316a4816a918) no-repeat 0px -16px;
}
#rating_history {
width: 100%;
}
.rating_history_item {
display: block;
border: 2px solid #888;
border-radius: 5px;
min-height: 16px;
}
.rating_history_up {
background-color: #eee;
}
.rating_history_down {
background-color: #ffe9e5;
}
.rating_history_item .thumbs_down_image, .rating_history_item .thumbs_up_image {
margin-right: 10px;
display: inline-block;
}
.rating_text {
margin-right: 10px;
display: inline-block;
word-wrap: break-word;
max-width: 230px;
}
.rating_age {
margin-right: 10px;
float: right;
color: #aaa;
display: inline-block;
white-space: nowrap;
}
.more_text_button {
color: #0b5d81;
margin-left: 5px;
cursor: pointer;
}
#rate_tooltip, #rated_tooltip, #rate_dim_tooltip, #broadcaster_rating_tooltip {
margin-left: -100px;
}
.follow_tooltip img, #rate_tooltip img, #rated_tooltip img, #rate_dim_tooltip img, .share_tooltip .arrow,
#broadcaster_rating_tooltip img, #broadcaster_rating_history img, .anon_tip_tooltip img {
border: 0;
margin: -23px 0 0 150px;
position: absolute;
}
#broadcaster_rating_tooltip {
margin-left: -120px;
}
#broadcaster_rating_history {
margin-left: -165px;
}
.share_tooltip .button_share_close {
border: 0;
margin: -4px 0 0 220px;
position: absolute;
cursor: pointer;
}
.featured_text h1 {
font: 1.5em/1.2em 'UbuntuBold', Arial, Helvetica, sans-serif
}
.featured_text{
padding: 11px 20px 0px 30px;
font: 1em/1em 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
.featured_text p {
line-height: 16px;
}
div.chat-list div.separator{
width: 100%;
text-align: center;
border-bottom: 1px solid #ACACAC;
}
ul.photo-list{
list-style-type: none;
}
div.photo-item{
width: 200px;
display: inline-block;
float: left;
}
div.photo-item img{
text-align: center;
border: 1px solid #bebebe;
padding: 2px;
}
.photo-item-sortable{
display: block;
float: none;
background-color: #ffffff;
padding: 5px;
margin: 4px;
}
div.big-photo h4, div.photo-item h4{
margin-top: 2px;
margin-bottom: 2px;
}
div.cambouncer_imgs .image{
float: left;
display: inline-block;
margin: 5px;
}
div.content .offline_tipping{
position: relative;
}
div.content .offline_tipping .green_button_tip, div.content .offline_tipping .green_button_tip_offline{
top: 0;
left: 0;
position: relative;
margin-bottom: 5px;
}
div.content .offline_tipping .tip_popup{
top: -25px;
left: 75px;
}
.offline_tipping .overlay_popup .formborder {
border-bottom:2px solid #0b5d81;
border-left: none;
margin-left: -2px;
}
div.premium_box > h2{
margin-left: 15px;
}
div.premium_box p.empty{
margin-left: 30px;
padding: 0;
}
.premium-desc {
margin: 0 0 16px 0;
}
.footercon {
line-height: 14px;
width: 100%;
}
@media (max-width: 800px) {
.footercon {
text-align: left;
}
}
.footercon dd {
-webkit-margin-start: 0px;
}
.col1, .col2, .col3, .col4, .col5 {
text-align: left;
font-size: 12px;
height: 155px;
margin: 15px 0;
display: inline-block;
vertical-align: top;
margin-left: 20px;
width: 135px;
}
.col1 dd, .col2 dd, .col3 dd, .col4 dd, .col5 dd {
margin: 0;
padding: 0;
}
#facebox .popup{
border: none;
}
#facebox .content {
width: auto;
}
#settings_notice {
position: absolute;
background-color: #D8DEEA;
border: 1px solid #ACACAC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
padding: 8px 12px;
}
.invalid_message {
color: red;
}
.invalid_autologin_message {
color: red;
}
#autologin_button {
margin-left: 0px;
}
.login_name {
color: #f47321;
}
#abuse_category_options {
position: relative;
top: 5px;
}
.emoticon_abuse_categories {
width: 100%;
min-width: 420px;
}
#tag_tip {
background-color: #f0f1f1;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border: 1px solid #acacac;
box-shadow: 0px 0px 16px #888;
-moz-box-shadow: 0px 0px 16px #888;
-webkit-box-shadow: 0px 0px 16px #888;
height: 222px;
position: absolute;
width: 180px !important;
}
#tag_tip .list {
height: 222px;
max-height: 222px;
max-width: 180px;
min-height: 222px;
min-width: 180px;
width: 180px;
}
#selected_tag {
color: #e45900;
font-weight: bold;
}
#invalid_tip_message {
color: red;
float: left;
display: inline-block;
width: 130px;
text-align: right;
padding-top: 15px;
}
.button_disabled {
background-color: #888 !important;
color: #ccc !important;
}
.tour_list {
min-width: 180px !important;
}
.ad.model_spotlight {
margin-top: 10px;
}
.ad.model_spotlight img {
width: 160px;
height: 300px;
}
.endless_page_template h2{
color: #0a5a83 !important;
font: 1.166em/1.142em 'UbuntuMedium', Arial, Helvetica, sans-serif;
}
.followed_online_offline {
display: flex;
}
.followed_online_offline .title {
display: inline-block;
padding-right: 15px;
font-size: 12px;
}
.followed_online_offline .bold {
font-family: UbuntuBold, Helvetica, Arial, sans-serif;
}
.followed_online_offline .title p {
margin: 0;
}
.followed_online_offline .title a:hover {
text-decoration: none;
}
#allfree-iframe-body {
min-width: 0;
}
#player {
background-size: 100% 100%;
}
#player_text_header, #player_text_body, #enter_password_link {
position: absolute;
text-align: center;
z-index: 100;
font-weight: normal;
}
#player_text_header {
color: #72c0ff;
left: 0;
width: 100%;
top: 80px;
font-size: 3em;
}
#player_text_body {
color: #fff;
left: 15%;
width: 70%;
top: 130px;
font-size: 14px;
}
#spy_on_private_show, #enter_password_in_room {
color: #72c0ff;
font-size: 1.5em;
text-decoration: underline;
}
#enter_password_link {
left: 0;
width: 100%;
top: 180px;
color: #72c0ff;
font-weight: bold;
text-decoration: underline;
}
.terms-address-US {
background: url(../../images/terms-address-US.png?5486d7000fe4) no-repeat;
background-size: 225px 50px;
width: 225px;
height: 50px;
margin-top: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.terms-address-US {
background: url(../../images/terms-address-US@2x.png?9c4a611ea03e) no-repeat;
background-size: 225px 48px;
height: 48px;
}
}
.company-name-US {
background: url(../../images/multimediallc.png?19aba66985a8) no-repeat;
background-size: 113px 15px;
width: 113px;
height: 15px;
display: inline-block;
margin-bottom: -3px;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.company-name-US {
background: url(../../images/multimediallc@2x.png?f5eca179f90c) no-repeat;
background-size: 113px 15px;
}
}
div#player div#obs *.hidden {
display: none;
}
div#player div#obs {
width: 100%;
height: 100%;
}
div#obs {
background-color: #fff;
}
div#obs_video {
width: 100%;
height: 91%;
background-color: #fff;
}
div#obs_control {
padding-top: 10px;
width: 100%;
height: 10%;
margin-top: 5px;
}
div#obs_control a, div#obs_exit_away a {
padding: 0 10PX;
font-weight: bold;
font: 1.1em/1.2em 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
div#obs_control a#obs_back_to_webrtc {
padding-left: 5px;
}
div#obs_status_display, div#obs_exit_away {
text-align: center;
font-weight: bold;
font: 1.2em/1.4em 'UbuntuRegular', Arial, Helvetica, sans-serif;
}
div#obs_exit_away {
font-size: 0.9em;
margin-top: 10px;
}
div#obs_exit_away a {
font-size: 1.6em;
}
#obs_exit_away p {
margin: 3px;
}
div#obs_status_display {
/*padding-top: 30px;*/
}
#obs_room_status_block {
height: 145px;
line-height: 1em;
}
#obs_room_status {
padding-top: 25px;
font-size: 1.1em;
}
#obs_stream_region {
text-align: left;
font-size: 0.6em;
padding-left: 5px;
color: #d8d8d8;
}
#obs_stream_stats {
/*margin-top: 20px;*/
font-weight: normal;
}
#obs_room_status_block.obs-offline {
background-color: #bdbdbd;
}
#obs_room_status_block.obs-public {
background-color: #2ecc71;
}
#obs_room_status_block.obs-password-protected {
background-color: #27ae60;
}
#obs_room_status_block.obs-hidden {
background-color: #1abc9c;
}
#obs_room_status_block.obs-private {
background-color: #9b59b6;
}
#obs_room_status_block.obs-away {
background-color: #f1c40f;
}
#obs_room_status_highlight {
color: #000000;
font-weight: bolder;
}
#obs_stream_feedback {
width: 100%;
padding: 5px;
height: 150px;
box-sizing: border-box;
}
#obs_stream_details {
width: 100%;
padding: 8px;
height: 55px;
box-sizing: border-box;
}
#obs_stream_graphs {
width: 100%;
height: 110px;
padding: 3px;
box-sizing: border-box;
margin-top: 5px;
}
#obs_stream_graph_fps {
float: left;
width: 240px;
}
#obs_stream_graph_bitrate {
float: right;
width: 240px;
}
#obs_stream_graph_fps_disp {
font-weight: bold;
}
#obs_stream_graph_bitrate_disp {
font-weight: bold;
}
div#obs_exit_away {
max-width: 90%;
padding-left: 5%;
}
#obs_stream_feedback_box {
width: 85%;
padding: 5px;
text-align: center;
color: #1e1e1e;
font-size: 12px;
margin: 4px auto 0;
}
#obs_stream_feedback_box h4 {
color: inherit;
font-weight: bold;
font-size: 15px;
margin: 3px;
}
#obs_stream_feedback_box.obs-good {
background-color: rgba(46, 204, 113, 0.49);
border: 1px solid rgb(46, 204, 113);
color: #1e1e1e;
}
#obs_stream_feedback_box.obs-warning {
background-color: rgba(230, 126, 34, 0.61);
border: 1px solid rgb(230, 126, 34);
color: #1e1e1e;
}
#obs_stream_feedback_box.obs-bad {
background-color: rgba(231, 76, 60, 0.58);
border: 1px solid rgb(231, 76, 60);
color: #ffffff;
}
#obs_stream_graph_fps.obs-warning {
background-color: rgba(230, 126, 34, 0.61);
transition: background 500ms ease-in-out;
}
#obs_stream_graph_fps.obs-bad {
background-color: rgba(231, 76, 60, 0.58);
transition: background 500ms ease-in-out;
}
#obs_stream_graph_bitrate.obs-warning {
background-color: rgba(230, 126, 34, 0.61);
transition: background 500ms ease-in-out;
}
#obs_stream_graph_bitrate.obs-bad {
background-color: rgba(231, 76, 60, 0.58);
transition: background 500ms ease-in-out;
}
#obs_stream_rejected {
width: 85%;
padding: 5px;
text-align: center;
color: #ffffff;
font-size: 14px;
margin: 15px auto 0;
background-color: rgba(231, 76, 60, 0.58);
border: 1px solid rgb(231, 76, 60);
}
#obs_details_box_codec_disp {
font-size: 10px;
line-height: 1;
display: block;
margin-top: 2px;
}
#resolution_float_box {
font-size: 16px;
width: 33px;
height: 23px;
border-radius: 3px;
position: absolute;
right: 2px;
top: 10px;
font-weight: bold;
text-align: center;
}
#resolution_float_box_text {
padding: 10% 0;
}
#resolution_float_box.obs-sd {
background-color: #e67e22;
color: #fff;
}
#resolution_float_box.obs-hd {
background-color: #27ae60;
color: #fff;
}
#resolution_float_box.obs-hd-plus {
background-color: #16a085;
color: #fff;
}
#resolution_float_box.obs-4k {
background-color: #2980b9;
color: #f1c40f;
}
#resolution_float_box.obs-none {
display: none;
}
.obs_details_box {
width: 33%;
float: left;
height: 30px;
line-height: 18px;
position: relative;
}
.obs_details_box span {
font-size: 0.8em;
}
img#obs_jpegpush_player_image {
width: 100%;
height: 100%;
display: block;
}
input#obs_token {
border: none;
width: 90%;
text-align: center;
color: #7F7F7F;
}
div#obs_jpeg_warning {
position: absolute;
bottom: 0;
right: 0;
}
div#obs_jpeg_warning {
position: relative;
margin-top: -20px;
background-color: orange;
padding-left: 1px;
padding-right: 1px;
margin-left: 5px;
margin-right: 5px;
}
#hashtag_ticker {
overflow: hidden;
height: 16px;
text-align: left;
}
#hashtag_ticker a {
color: #4E8AAA;
padding-right: 10px;
}
#more_hashtags_link {
margin: 0 5px;
float: right;
cursor: pointer;
width: 70px;
text-align: right;
color: #4E8AAA;
}
#ios_unmute_container {
position: absolute;
top: 6px;
right: 6px;
opacity: 0.8;
float: right;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 6px;
height: 36px;
padding: 3px;
cursor: pointer;
}
#ios_unmute_text {
color: #0c6a93;
font-size: 14px;
padding: 6px;
position: relative;
top: 2px;
text-shadow: 0 0 1px #0c6a93;
}
#ios_unmute_img {
width: 36px;
height: 36px;
display: inline;
vertical-align: middle;
}
.top_alert {
background-color: #FFFFD3;
padding: 40px 30px;
margin: 20px;
text-align: left;
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 25px;
line-height: 32px;
text-decoration: none;
color: #494949;
position: relative;
}
.top_alert span, .top_alert a, .top_alert li {
font-size: 25px;
}
.top_alert a {
color: #0a5a83;
font-weight: bold;
}
.top_alert_close {
display: inline-block;
padding: 0;
position: absolute;
font-size: 50px;
right: 10px;
top: 5px;
user-select: none;
-webkit-user-select: none;
}
.follow_notification_prompt {
position: absolute;
background-color: #e0e0e0;
padding: 6px 12px;
border-radius: 3px;
margin-left: -220px;
width: 264px;
margin-top: 11px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
z-index: 1; /* Because 'position: relative' room tab elements will cover this otherwise */
}
.follow_notification_prompt_overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.follow_notification_prompt_title {
color: #0c6a93;
}
.follow_notification_prompt_description {
font-size: 11px;
margin: 5px 0 10px;
}
.follow_notification_prompt_confirm_btn {
display: inline-block;
background-color: #0c6a93;
padding: 5px 30px;
border-radius: 3px;
color: #eeeeee;
}
.follow_notification_prompt_confirm_btn:hover {
cursor: pointer;
background-color: #0c6a93cc;
}
.follow_notification_prompt_deny {
display: inline-block;
margin-left: 10px;
}
.follow_notification_prompt_deny:hover {
cursor: pointer;
text-decoration: underline;
}
.arrow_up {
position: absolute;
top: -11px;
left: 250px;
color: #e0e0e0;
text-shadow: 0px -2px 4px rgba(0,0,0,0.65);
font-size: 15px;
}
.arrow_up_cover {
position: absolute;
top: -10px;
left: 247px;
color: #e0e0e0;
font-size: 21px;
}
.icon_following {
background: url(../../images/following-hover.png?c8a176cf1dcb) no-repeat;
opacity: .7;
}
.icon_not_following {
background: url(../../images/following-off.png?e2f3a7174c61) no-repeat;
opacity: .5;
}
.icon_update_following {
background: url(../../images/following-update.gif?8a00b582b46c) no-repeat;
opacity: .5;
}
.no_select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.icon_following:not(.no_hover):hover, .icon_not_following:not(.no_hover):hover {
background: url(../../images/following-off-hover.png?ea2a5b0c3c09) no-repeat;
}
@media (hover: none) {
.icon_following:not(.no_hover):hover {
background: url(../../images/following-hover.png?c8a176cf1dcb) no-repeat;
opacity: .7;
}
.icon_not_following:not(.no_hover):hover {
background: url(../../images/following-off.png?e2f3a7174c61) no-repeat;
opacity: .5;
}
}
.icon_following, .icon_not_following, .icon_update_following, .icon_following:not(.no_hover):hover, .icon_not_following:not(.no_hover):hover {
position: absolute;
top: 0;
right: 0;
width: 23.25px;
height: 23.25px;
margin-top: 1px;
margin-right: 1px;
cursor: pointer;
background-size: 23.25px 23.25px;
}
.grecaptcha-badge { display: none; }
/** Flags used on the site */
.flag {
height: 14px;
vertical-align: text-top;
margin: 0 3px 0 3px;
background: #f47321;
border-radius: 2px;
color: #fff;
padding: 0 4px 0 3px;
text-shadow: none;
font: 11px ubunturegular,Arial,Helvetica,sans-serif;
}
.fieldset_main {
margin-left: 50px;
}
form th {
text-align:right;
width: 130px;
vertical-align: top;
padding-top: 10px;
}
form th label {
display: block;
font:1em/1.3em 'UbuntuMedium', Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px 4px 6px 0px;
color: #494949;
}
.bio form th label {
min-width: 130px;
}
form .requiredfield label:after, form .required label:after {
content: ' *';
}
form input[type=text], form input[type=password], form input[type=email],
form input[type=file], form input[type=url], form input[type=tel] {
width: 225px;
height: 20px;
line-height: 18px;
margin-top: 4px;
padding-top: 4px;
}
form input[type=text], form input[type=password], form input[type=email],
form input[type=url], form input[type=tel] {
background: #FFF;
border:1px solid #b1b1b1;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:2px 4px;
}
#roomtitleform input[type=text] {
width: 300px;
height: auto;
line-height: normal;
margin-top: auto;
border:none;
padding:0px;
}
form select {
width: auto;
line-height: 18px;
background: #FFF;
margin-top: 4px;
border:1px solid #b1b1b1;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:2px 4px;
}
form textarea {
width: 350px;
line-height: 18px;
background: #FFF;
margin-top: 4px;
border:1px solid #b1b1b1;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:2px 4px;
}
form input[type=checkbox], form input[type=radio] {
width: 18px;
height: 18px;
}
form .button {
display: block;
margin: 15px 0px 0px 137px;
color: #FFF;
width: auto;
font:1.16em/1.0em 'UbuntuMedium', Arial, Helvetica, sans-serif;
background:#f47321 url(../../images/arrow-white-v2.gif?75bde39356c3) no-repeat right 50%;
height: 28px;
padding: 0px 30px 2px 15px;
border:1px solid #b1b1b1;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
form .button:hover {
background-color: #FF6300;
text-decoration: underline;
cursor: pointer;
}
form .button:disabled {
background-color: #bababa;
cursor: default;
}
form ul {
list-style: none;
margin: 0px;
padding: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
clear:both;
display: block;
}
form ul li {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
}
form .errorlist{
background: url(../../images/ico-error.gif?5bbd9994802d) no-repeat 2px 50%;
font:.833em 'UbuntuMedium', Arial, Helvetica, sans-serif;
color: #666;
margin: 5px 0px 0px 2px;
padding: 2px 0px 0px 20px;
display: inline-block;
}
.search_criteria ul {
margin-top: 12px;
}
.search_criteria ul li {
margin: 0px 10px 0px 0px;
width: 150px;
}
.submit_button_footer {
display: block;
margin: 5px 0px 0px 140px;
font-size: .8em;
}
.formvalidate_error {
color: #d50000;
padding: 0;
}
.formvalidate_spinner {
display: inline-block;
vertical-align: middle;
}
.formvalidate_spinner img {
width: 19px;
height: 19px;
}
.formvalidate_hidden {
display: none!important;
}
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 1003;
text-align: left;
}
#facebox .popup{
position:relative;
border:3px solid rgba(0,0,0,0);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
display:table;
width: 370px;
padding: 10px;
background: #fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#facebox .content > p:first-child{
margin-top:0;
}
#facebox .content > p:last-child{
margin-bottom:0;
}
#facebox .close{
position:absolute;
top:5px;
right:5px;
padding:2px;
background:#fff;
}
#facebox .close img{
opacity:0.3;
}
#facebox .close:hover img{
opacity:1.0;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
margin: 0;
}
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.facebox_hide {
z-index:-100;
}
.facebox_overlayBG {
background-color: #000;
z-index: 1002;
}
.tip_shell {
position: relative;
width: 498px;
height: 70px;
background-color:#ffffff;
}
.goal_display, .broadcaster_panel_goal_display {
font-size: 11px;
text-align: left;
}
.goal_display .data, .broadcaster_panel_goal_display .data {
width: 110px;
}
.goal_display .goal_display_table, .broadcaster_panel_goal_display .goal_display_table {
margin: 0px;
padding: 0px;
width: 270px;
height: 70px;
border-collapse:collapse;
}
.goal_display tr {
height: 23px;
}
.goal_display table th, .broadcaster_panel_goal_display table th {
width: 135px;
text-align: right;
padding: 3px 2px 0px 5px;
height: 16px;
overflow: hidden;
display: inline-block;
}
.goal_display table td, .broadcaster_panel_goal_display table td {
padding: 0px 10px 0px 5px;
}
.goal_display table .dark_blue, .broadcaster_panel_goal_display table .dark_blue {
background-color: #d5ebf8;
}
.goal_display table .dark_light_blue, .broadcaster_panel_goal_display table .dark_light_blue {
background-color: #f2f9fd;
}
.room_goal_hightipper, .room_goal_lasttipper {
max-width: 65px;
overflow: hidden;
display: inline-block;
}
.goal_display .tip_amount, .broadcaster_panel_goal_display .tip_amount {
max-width: 25px;
overflow: hidden;
display: inline-block;
}
.goal_display .counter_label, .goal_display .counter_label_green, .broadcaster_panel_goal_display .counter_label, .broadcaster_panel_goal_display .counter_label_green {
max-width: 125px;
overflow: hidden;
display: inline-block;
line-height: 16px;
}
.goal_display .counter_label_green, .broadcaster_panel_goal_display .counter_label_green {
display: block;
color: #057205;
margin: 0px auto;
height: 16px;
font-weight: bold;
overflow: hidden;
}
.broadcaster_panel_away, .broadcaster_panel_show_requested, .broadcaster_panel_show_ended {
padding: 13px;
margin: 0;
text-align: center;
background-color: #d8deea;
}
.broadcaster_panel_show_ended {
padding: 3px 0 0 0;
height: 67px;
}
.broadcaster_panel_away p, .broadcaster_panel_show_requested p, .broadcaster_panel_show_ended p {
margin: 4px;
}
.broadcaster_panel_away strong, .broadcaster_panel_show_requested strong, .broadcaster_panel_show_ended strong {
font: 14px 'UbuntuBold', Arial, Helvetica, sans-serif;
}
.broadcaster_panel_away a, .broadcaster_panel_show_requested a, .broadcaster_panel_show_ended a {
color: #dc5500;
}
.broadcaster_panel_show_ended a {
text-decoration:underline;
margin-left: 5px;
}
.overlay_show_in_progress {
position: relative;
top: 0px;
width:458px;
height:322px;
background:url(../../images/cam_notice_background_logo.jpg?6ab2b3221c34) no-repeat;
text-align: center;
color: #ffffff;
padding: 85px 20px 0 20px;
}
.overlay_show_in_progress h1 {
font: 38px 'Ubuntu', Arial, Helvetica, sans-serif;
color: #70c7fe;
}
.overlay_show_in_progress a {
color: #70c7fe;
font: 16px 'UbuntuBold', Arial, Helvetica, sans-serif;
text-decoration: underline;
}
.overlay_show_in_progress a:hover {
text-decoration: none;
}
.broadcast_intro {
position: relative;
margin-top: 5px;
margin-left: 5px;
width:240px;
height:45px;
background-color: #d8deea;
padding: 7px;
}
.broadcast_intro p {
margin: 0;
}
.token_balance {
border-bottom: 1px solid #000;
}
.token_balance a {
font-size: 12px;
text-decoration: underline;
}
.tokens {
font: 15px 'UbuntuBold',Arial,Helvetica,sans-serif;
display: inline;
}
.token_options, .broadcaster_token_options {
position: absolute;
top: 0px;
left: 280px;
width: 195px;
font-size: 11px;
}
.token_options {
/*top: 440px;*/
}
.broadcaster_token_options {
/*top: 450px;*/
}
.token_options a, .broadcaster_token_options a {
font-size: 11px;
}
.green_button_tip {
position: absolute;
left: 410px;
top: 30px;
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 10px;
margin-right: 10px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -84px;
text-shadow:1px 1px 0 #588d3d;
}
.green_button_tip a {
display: block;
padding: 3px 10px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -84px;
}
.green_button_tip_offline {
position: absolute;
left: 410px;
top: 30px;
display: inline-block;
overflow: hidden;
height: 21px;
width: auto;
padding-left: 10px;
margin-right: 10px;
font-size: 12px;
font-family:'UbuntuMedium', Arial, Helvetica, sans-serif;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat 0px -105px;
text-shadow:1px 1px 0 #588d3d;
}
.green_button_tip_offline a {
display: block;
padding: 3px 10px 0px 0px;
height: 18px;
color: #fff;
text-decoration: none;
background: url(../../images/btn-sprites2.gif?9c492b22a0f3) no-repeat right -105px;
}
div.broadcaster_panel_default{
position: relative;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABBIAAsAAAAAGoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3RY21hcAAAAYQAAADQAAADIjn098ZnbHlmAAACVAAACv4AABEIAwnSw2hlYWQAAA1UAAAAKwAAADYV1OgpaGhlYQAADYAAAAAbAAAAJA4DByFobXR4AAANnAAAAA8AAACE4AAAAGxvY2EAAA2sAAAARAAAAEQ9NEHGbWF4cAAADfAAAAAfAAAAIAEyAIFuYW1lAAAOEAAAASUAAAIK1cf1oHBvc3QAAA84AAABDwAAAZ5AAl/0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQ7xTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGBHcRdyA4RZgQRAC4HCwEAAHic7dFprsIgAEXhg8U61XmeWcBb1FuQP4w7ZQXK5boMm3yclFDSANAHmuKviBBeBPQ8ymyo8w3jOh/5r2ui5nN6v8sYNJb3WMdeWRvLji0DhozKdxM6psyYs2DJijUbtuzYc+DIiTMXrty4k8oGLb+n0xCe37ekM7Z66j1DbUy3l6PpHnLfdLO5NdSBoQ4NdWSoY9ON54mhdqa/y1NDnRnq3FAXhro01JWhrg11Y6hbQ90Z6t5QD4Z6NNSToZ4N9WKoV0O9GerdUJORPqkhTd54nJ1YDXBU1RV+576/JBs2bPYPkrDZt5vsJrv53V/I5mclhGDCTwgGBQQSTEji4hCkYIAGd4TGIWFAhV0RQTpWmQp1xv6hA4OTOlNr2zFANbHUYbq2OtNCpViRqsk+e+7bTQAhzti8vPfuPffcc88959zznbcMMPjHD/KDDGEY0ABpYX384NhlomIYlo4JISGEY9mMh2FSidYiqkEUphtNYDSY/dXg9023l4DdxlqUl0chuZRhncJKrsCQHIwcGuwfnhMIzBnuH4Sym+1D2zaGjheXlhYfD238z80mKYMmvJ5XeOTzd8z9eujbMxJNhu4C9xPE/bCMiDuSNIWgkTQwBE55hLSAE7ZwhrHLnAHZOGV/kmBGTiNjZxzI77Hb7Hqjz68TjT6vh+5JT/cCIkqS0D6CqPf5jX4Qjdx5j6vlDfZM4aZFdbVXIxtOlJaP/WottMnH6CJQ3bTiue3PrY23HjnChtuamxwvvzFjxkPrNj3z0tG9T561HDYf6OgmRWvlY3JQHoQb8ltV2Yet7YfWctEjR1AtxS/cSX6U4alf6NJEBQ7YKg9wrXQKd0IeZCb2ux75Uhh1Un+Nz+9LTOE7PK777nN5xqdTneTBhCbx446mZrhnUkrCz2YhA9dSMxaG0SYmT8hi9ZPu1E94PJYQSH6LRmhxec7Q7ZeXntgQuVpbh+a4qWNsckVyTdn0P7o7DpgPW84+uRcq0BITflBikGdUjAZ9wYBVI3mtrNvr9kpg1UsaK6t3690aoorC1lg0GpMH2HAMtkZjsSi5Ig9ESVosOh7GQfLjKNLvKpMKkLSKNFAka710GdgSi8oDMSoNhqjkKBXTgn3swtaxyzGkUzIzae9RtLdWkSlZ1KDX6EzgllzV4NV4SoDFSOGD4+HCeQUF8wrZ5Hs8zIb5EaVxy8DYFTbMCJPnLIWZxugZE2NlivC0gc1qEQUR8jEKgZcAXeH18BiCgl5nlHh0CrjB4Hb5fX4gb0J7c9PuHVsfgkx2n/vTY/JV8kn8PGxf7faOZ8qX8JVByuIf4whk9sqXli2hvPJV9hrp0hY7l8r2x37ydaVsb4xvXv/47v2NjfCl8m5oRDJclFMoE1yk0Uh1Te4/m8lFXe9qBZD0EkheicebXvzI2PLCuoKCukLuhPIeKwaHPEouxw3kMqaIUXDQ1p0mip+MyCORSCQaoUsnY1VZ38nUTrG21WvVo4f1OsEJFhvSfAFwGfT8VHRMeAVUpwLOoLzjT/REIj3O3FhuURE+nERF+0pTId5Fyxv5sfwGyg4O+my4vZv0sZm7oeQlFZORiB+tG0MweVNraeitl7yxiPIHTk4/diVxs94o5lEYishB2iAtkchEnsActoEpx44Fo8XnsQMaA22BlqC20RmhBKzYojZyYaxg+JggMc4HHY2m+L9EkWSYljirOisrO7d3VorxzyZ6Vc4lJqITAu1b2wOBdrLElAP+bFc2eGaZFVbkmJktv5uT6Jlz5D/MnBFor6ig/JPnRViBsV3LNKGGqB1ChJ0tgQywlVLFJIuQgTFttwkiKxhyQdAZMdMYtSaoAewqfvXVYPAbDT6/1mez85YS8FSDywQ6NfAnef6FNEGMilnppyvn5rB6tTyq1pOceRWnp2WJEZFXHeX5oyoem1nTTgdqc4heDY7bOeKz63vnz+/dRx+s31Ht2JGanQ5seirfWJL9tjozU/12TnEjn5oux9OzU3ckGbBzBwNOyk69JykKH0n/0LM9A72tuwM3zQpIRu4AxiToseEpgPOmbROyFe9/X2yeUvoUsCyEvjcgs7fpWP3/aKlFN0+6HFUe6D9HFz/XPwBlN9tTqNyZjFJ8UO2RUT5/h4CptCctEyeisnOyXjALEp7dXKaQKf6O7IMnGjNNACRMLxqdYJX8eMLvmmd68D+ayBLyKKYZwYxDt/GNhzETDJ05Qxlyi3pi3/Z93ndYVSumgj0V/KkIFlO6+1K3fF2+3g0q+YtuSIf0bvmLqV09nnobI6hwcjIP8aPCKayjsF5JBY3LaKAeRLSyYB1h81oTwe9SlPMkXB7G0mfL9q71gaqqwPqu67QRKS1+ObTx+sbQy9QV2OQHEScGkdFBeT7v7qisqqrs6N52i78/R+6S0qQONVj26agOVoswCyQWIV5D86vH53bxNUeXV0K+XZaHv/nm/KsHhOvylwsWnJX/HE8l/4WCv5x+l5n08z6UU8bUMa3MBpSmM7F63AxntdC9eBCKEZW9Hr+ABNqtxgAQrSbMtmrW7lKQuoSgBhSrTazWVU2QAKWY8wiiuhqFmQgWJBgoXiuWIm42N7hqZbBsgXz52O5P5uSvaNgFGnOuvsRw8I8Laha91wMvDuxqWFheN7/8GVtTltdS83DQsXRmqc5ZtcJXEVrlV2doTWk5+Yunm71dG5f55m/qY0MjI93vv9/NfpxXV9sUXrxy2fbNy1or65cOlDRnOoKFeeXcbw42H/bNDT5Qs3flgs31gWC1lD1nfUV/X7NdCnSUdHY2e8afzfKsqZ5ZljfDqjLOmk3UebNXB+aHArPYDRs+/HDDxeT5DiP+sFg7OpRaVQMGBV89PpeBdj22hCE0Uub0UqwLrNWsG0cuyadgLXTeR5rbO4+3c/vl15cur2nRq+TXCQDcS3SO+s6ak+e5/eMS+1dw3btu3YG2tvFL8XdIZvdjdW6TO/4B7IdrZWVPmctm5/59AgsPItTSbCiIBr2OqIGzmu20SMKAS7yqwGBUfGfgjDYlLLDeF0SfcLB2LSx8flT+08/kzz6yOj96rft4rpTjdPQcmLd47uKibbDq7ZSz/XtbH2nN717Nd62rU+c8Icevvv7I09wA6WvjVcafb+FsbNG+ZQ80Rn6ZZsvrP7teP2dzTdoETvNhjCmsr8FID2sJ69VYvdUcxk4AzYRlKcaE38eXNRlfW9H1as9i6acLHp1XpuNB5K7DIvkX08y1ZYvh3KfWaiCzH+ztrSDmD7LuX73x/mJelB8Yj39t8nhNQJJ2CAthpoFGLsGgtSOCJooCGoaJAMTjSWHVZ08YAa1Fg9lPI5U6DOsGVjDasJeZZ+YyhfCwfOzCxlBA69M9XLXtza7H/rav+9Tjq5xNi0wpKQIRNO4Lrzz7yp5QVYM6Jd/oc1Uvn/mQhhuWh6ENXoS2YTZ8QT42bF5d/559zp5r0Uff2VnR2tdf2/WCOd2cO0Mw6qpWPnvxpV0nrt5fZd2yItc199GWe8vlNfNDq+CH/7yAAnB9hn7T4QO4c1g9ScxsZgmzntnE/IDGndtHMw69lFwoCnYsMGx+rBp8JSBqdLzBr9QRPq/PbhWMWFtQZp1xguy/haw3TEHm3TWAnxFWQQWgt7M5OV0lCz1VRYucpWliy7z6Zd4urwPIyeZQqli2Lgg7szJV09PysATbOQtYIrB2YzbkJYkGgJ0m4AjPUap1pvYu1K9qr97z0Yl3p332b2LYB78ncYIlRkau/8GObSsOlZancACE5d5ily+c2+7h5Yj4lqhVmXXB+iXLfvdqSgqfKtQvfHDV0OnvQR1qhw42XS/vkvsh/hXcrDFP0a+SJNIomEfD1nsrYGO+1bgTOJhM8Hv6ek+7vVglxuSRwoKn17S937bm6YJCeSSG0Op1n+7tE37tcZ/p7dsTv4EUrGpDbWueKigsLHhqTVsoEj+JU0kaSjnj9tz8/gryQWwJ9BcJXBC/7smO+I/IFURJetFPrdt5WcoL6DbEJaygI8CTHfQTjf40ofD+DwalTqIAAHicY2BkYGAA4gDud4bx/DZfGbjZGUDg+q1z05BpdkawOAcDE4gCAB45CXEAeJxjYGRgYGcAARD5/z87IwMjAypQBAAtgwI4AHicY2BgYGAfYAwAOkQA4QAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhHicY2BkYGBQZChlYGcAASYg5gJCBob/YD4DABfTAbQAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2PyXLCMBBE3YCNDWEL2ffk7o8S8oCnkCVHC5C/jzBQlUP6IHVPzYyekl5y0iL5X5/ooY8BUmQYIkeBEca4wgRTzDDHAtdY4ga3uMM9HvCIJzzjBa94wzs+8ImvZNAq8TM+HqVkKxWlrQiOxjujQkNlEzyNzl6Z/cU2XF06at7U83VQyklLpEvSnuzsb+HAPnPfQVgaupa1Jlu4sPLsFblcitaz0dHU0ZF1qatjZ1+aTXYCmp6u0gSvWNPyHLtFZ+ZeXWVSaEkqs3T8S74WklbGbNNNq4LL4+CWKtZDv2cfX8l8aFbKFhEnJnJ+IULFpqwoQnNHlHaVQtPBl+ypmbSWdmyC61KS/AKZC3Y+AA==) format("woff");font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\f10a"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\f10b"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\f10c"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\f10d"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\f10f"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\f110"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\f111"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\f112"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\f113"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\f114"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\f115"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\f116"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\f117"}.vjs-icon-gplus{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-gplus:before{content:"\f118"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\f119"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\f11a"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\f11b"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\f11c"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\f11d"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\f11e"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\f11f"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\f120"}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:0}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-fluid{width:100%;max-width:100%;height:0}.video-js.vjs-16-9{padding-top:56.25%}.video-js.vjs-4-3{padding-top:75%}.video-js.vjs-fill{width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen{width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.5em;width:3em;display:block;position:absolute;top:10px;left:10px;padding:0;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:rgba(43,51,63,.7);-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-big-play-centered .vjs-big-play-button{top:50%;left:50%;margin-top:-.75em;margin-left:-1.5em}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);-webkit-transition:all 0s;-moz-transition:all 0s;-ms-transition:all 0s;-o-transition:all 0s;transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button{display:block}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:-webkit-linear-gradient(-90deg,rgba(0,0,0,.8),rgba(255,255,255,0));background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:rgba(115,133,159,.5)}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-no-flex .vjs-menu-button-inline .vjs-menu{display:block;opacity:1;position:relative;width:auto}.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu{width:auto}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.vjs-has-started .vjs-control-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-ms-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-ms-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}.vjs-has-started.vjs-no-flex .vjs-control-bar{display:table}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-no-flex .vjs-control{display:table-cell;vertical-align:middle}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:-ms-flex;display:flex;align-items:center}.vjs-no-flex .vjs-progress-control{width:auto}.video-js .vjs-progress-holder{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.666666666666666666em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;top:-.333333333333333em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.vjs-no-flex .vjs-progress-control .vjs-mouse-display{z-index:0}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-ms-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em 0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{-webkit-transition:width 1s;-moz-transition:width 1s;-ms-transition:width 1s;-o-transition:width 1s;transition:width 1s}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel .vjs-volume-control:hover,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control,.video-js .vjs-volume-panel:hover .vjs-volume-control{visibility:visible;opacity:1;position:relative;-webkit-transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;-moz-transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;-ms-transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;-o-transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical{left:-3.5em}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:9em;-webkit-transition:width .1s;-moz-transition:width .1s;-ms-transition:width .1s;-o-transition:width .1s;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;-webkit-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;-moz-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;-ms-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;-o-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{-webkit-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s;-moz-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s;-ms-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s;-o-transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;visibility:visible;opacity:1;position:relative;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{position:absolute;bottom:3em;left:.5em}.video-js .vjs-volume-panel{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{top:-.3em;right:-.5em}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.vjs-poster{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-live-control{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;font-size:1em;line-height:3em}.vjs-no-flex .vjs-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{cursor:pointer;-ms-flex:none;flex:none;display:-ms-inline-flexbox;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.vjs-no-flex .vjs-seek-to-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.video-js .vjs-time-control{-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.vjs-live .vjs-time-control{display:none}.video-js .vjs-current-time,.vjs-no-flex .vjs-current-time{display:none}.video-js .vjs-duration,.vjs-no-flex .vjs-duration{display:none}.vjs-time-divider{display:none;line-height:3em}.vjs-live .vjs-time-divider{display:none}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{-moz-transform:translateY(-3em);-ms-transform:translateY(-3em);-o-transform:translateY(-3em);-webkit-transform:translateY(-3em);transform:translateY(-3em)}.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{-moz-transform:translateY(-1.5em);-ms-transform:translateY(-1.5em);-o-transform:translateY(-1.5em);-webkit-transform:translateY(-1.5em);transform:translateY(-1.5em)}.video-js .vjs-fullscreen-control{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-error .vjs-error-display:before{color:#fff;content:'X';font-family:Arial,Helvetica,sans-serif;font-size:4em;left:0;line-height:1;margin-top:-.5em;position:absolute;text-shadow:.05em .05em .1em #000;text-align:center;top:50%;vertical-align:middle;width:100%}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:.85;text-align:left;border:6px solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;border-radius:25px;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block;-webkit-animation:0s linear .3s forwards vjs-spinner-show;animation:0s linear .3s forwards vjs-spinner-show}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;margin:-6px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:.44s;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@-webkit-keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes vjs-spinner-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}@-webkit-keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\f10d";font-size:1.5em;line-height:inherit}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \f11d";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;display:block}.video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer{width:auto}.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subs-caps-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-panel{display:none}.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subs-caps-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-panel{display:none}.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-audio-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-panel{display:none}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:rgba(43,51,63,.75);color:#fff;height:70%}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0 24px}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:5px;padding:3px;border:none}.vjs-text-track-settings fieldset span{display:inline-block}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;margin:0 0 5px 0}.vjs-text-track-settings .vjs-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);display:block;margin:0 0 5px 0;padding:0;border:0;height:1px;width:1px;overflow:hidden}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:rgba(43,51,63,.75)}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:0;background:0 0}.video-js .vjs-menu :focus:not(:focus-visible),.video-js :focus:not(:focus-visible){outline:0;background:0 0}
#header {
position: relative;
width: 100%;
background: #fff url(../../images/bg-body.gif?588dc80f5af1) repeat-x;
-webkit-text-size-adjust: none; }
#header .ad, #header .vote-banner {
position: absolute;
display: inline-block;
margin-top: 10px;
left: 270px;
width: 468px;
height: 60px;
z-index: 10; }
#header .ad img, #header .vote-banner img {
display: block; }
#header .section {
height: 88px;
width: 100%; }
#header .right_section {
position: absolute;
right: 0; }
.darkmode #header a {
color: #fff; }
#header #user_information {
display: inline-block;
width: auto;
min-width: 247px;
margin-top: 13px;
margin-right: 12px;
z-index: 100;
text-align: left;
border-top: 1px solid #0c6a93;
border-right: 1px solid #0c6a93;
border-bottom: none;
border-left: 1px solid #0c6a93;
border-image: initial;
border-radius: 5px 5px 0 0;
color: #494949;
font-size: 11px;
background: #0c6a93;
position: relative;
box-sizing: border-box; }
#header #user_information.lang-hi, #header #user_information.lang-ja, #header #user_information.lang-zh {
margin-top: 9px; }
#header #user_information.uip_v2 {
position: absolute;
bottom: 10px;
right: 12px;
background: none;
border: none;
min-width: auto;
vertical-align: bottom; }
#header #user_information.uip_v2 a.uip_btn {
border-radius: 4px;
box-sizing: border-box;
font-family: UbuntuRegular, Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 16px;
line-height: 22px;
padding: 5px 10px;
margin: 0px 2px;
text-decoration: none;
cursor: pointer;
vertical-align: bottom;
display: inline-block;
height: 32px; }
#header #user_information.uip_v2 a.uip_btn.uip_primary {
background: #F47321;
color: #ffffff;
border: 1px solid #D56125; }
#header #user_information.uip_v2 a.uip_btn.uip_secondary {
background: #ffffff;
color: #6C6C78;
border: 1px solid #ACACAC; }
.darkmode #header #user_information.uip_v2 a.uip_btn.uip_secondary {
background-color: #272A2C;
color: #DEDEDE;
border: 1px solid #474747; }
#header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement {
border: 1px solid #ACACAC; }
.darkmode #header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement {
border: 1px solid #474747; }
#header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement.tabindex_fix {
border: 1px solid #D56125; }
#header #user_information.uip_v2 a.uip_btn.uip_upgrade {
font-size: 12px;
line-height: 14px;
padding: 8px 12px; }
#header #user_information.uip_v2 a.uip_btn.purchase_tokens {
padding-right: 12px;
padding-left: 12px; }
#header #user_information.uip_v2 a.uip_btn .token_img {
width: 17px;
height: 17px;
vertical-align: middle;
margin-bottom: 3px;
margin-right: 2px;
display: inline-block;
background-image: url(../../images/uip_tokens.svg?1a695b98c8a7);
background-repeat: no-repeat;
text-decoration: none; }
.darkmode #header #user_information.uip_v2 a.uip_btn .token_img {
background-image: url(../../images/uip_tokens_darkmode.svg?5a603b1e7789); }
#header #user_information.uip_v2 .user_information_header_icon {
margin-left: 0px;
padding-left: 0px;
position: inherit;
top: 2px;
width: 18px;
height: 18px;
padding: 0px 2px; }
#header #user_information.uip_v2 .user_information_header_icon.anonymous {
background-image: url(../../images/gendericons/anon_dark.svg?7a02cebefc89);
background-repeat: no-repeat;
display: inline-block; }
.darkmode #header #user_information.uip_v2 .user_information_header_icon.anonymous {
background-image: url(../../images/gendericons/anon.svg?00993266cf7f); }
#header #user_information.uip_v2 #user_information_profile_container:hover .user_information_header_username {
text-decoration: underline; }
#header #user_information.uip_v2 #userInfoPanelMenuDropdownRoot {
display: inline;
position: absolute;
width: 100%;
left: 0px; }
#header #user_information.uip_v2 #userInfoPanelMenuDropdownRoot:hover ~ .user_information_header_username {
text-decoration: none; }
#header #user_information a.tokencountlink,
#header #user_information strong.auip_tokens {
color: #494949;
font-size: 13px;
font-family: 'UbuntuBold', Arial, Helvetica, sans-serif; }
#header #user_information table th, #header #user_information table td, #header #user_information a {
font: 11px 'UbuntuMedium', Arial, Helvetica, sans-serif;
text-align: left; }
#header #user_information table th.auip_links, #header #user_information table td.auip_links, #header #user_information a.auip_links {
font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }
#header #user_information tr > td:last-child {
text-align: right; }
#header #user_information table th, #header #user_information table td {
padding: 2px 0 2px 5px; }
#header #user_information .bottom table td strong {
font: 13px 'UbuntuBold', Arial, Helvetica, sans-serif; }
#header #user_information .overflow {
width: 105px;
height: 15px;
overflow: hidden; }
#header #user_information a {
color: #e45900; }
#header #user_information .bottom {
height: 42px;
background-color: #e9e9e9;
padding: 4px 4px 4px 0; }
#header #user_information .user_information_header {
padding: 3px 0 4px;
height: 17px;
width: 100%; }
#header #user_information .user_information_header .user_information_container {
display: inline-block;
cursor: pointer; }
#header #user_information .user_information_header .user_information_container.anonymous {
cursor: default; }
#header #user_information .user_information_header .user_information_container.anonymous > .user_information_header_icon {
top: 0; }
#header #user_information .user_information_container:hover span {
text-decoration: underline; }
#header #user_information .user_information_header_icon {
vertical-align: top;
padding-left: 2px;
position: relative;
margin-left: 3px;
top: -1px;
width: 16px;
height: 16px; }
#header #user_information .user_information_header_username {
display: inline-block;
color: white;
font-family: 'UbuntuBold', Helvetica, Arial, sans-serif;
font-size: 12px;
position: relative;
margin: 0 2px;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
line-height: 17px;
cursor: pointer; }
#header #user_information .user_information_header_username.uip_v2 {
line-height: 10px;
vertical-align: top;
margin: 0px;
color: #49494F;
min-width: 55px;
max-width: 105px;
padding-bottom: 2px; }
.darkmode #header #user_information .user_information_header_username.uip_v2 {
color: #fcfcfc; }
#header #user_information .user_information_status.uip_v2 {
color: #6C6C78;
vertical-align: bottom;
position: absolute;
left: 35px;
bottom: 3px;
font-family: UbuntuRegular, Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 9px;
line-height: 10px; }
.darkmode #header #user_information .user_information_status.uip_v2 {
color: #CBCBCB; }
#header #user_information .user_information_status.uip_v2.supporter {
color: #F47321; }
#header #user_information .uipTestLink {
background-color: #fff;
color: #306A91; }
#header #user_information .uipTestLink:hover {
background-color: #306A91;
color: #FFF; }
.darkmode #header #user_information .uipTestLink:hover {
background-color: #7f7f7f; }
.darkmode #header #user_information .uipTestLink {
background-color: #2a2a2c;
color: #fff; }
#header #user_information .user_information_header_arrowdown {
border: none;
vertical-align: top;
position: relative;
top: 4px;
width: 8px;
height: 8px; }
#header #user_information .user_information_header_arrowdown.uip_v2 {
top: 8px;
width: 10px;
height: 7px;
margin-left: 14px;
background-image: url(../../images/arrowdown_black.svg?d52de6552c38);
display: inline-block; }
.darkmode #header #user_information .user_information_header_arrowdown.uip_v2 {
background-image: url(../../images/arrowdown_grey.svg?8d913e8950f8); }
#header #user_information .user_information_icon {
background: center/contain no-repeat;
border: none;
cursor: pointer;
float: right;
height: 16px;
width: 13px; }
#header #user_information .chat_bubble {
margin: 0 10px 0 0;
background-image: url(../../tsdefaultassets/pms/chat-bubble-gray.svg?fc4198c61bdf);
width: 12px; }
#header #user_information .chat_bubble.active {
background-image: url(../../tsdefaultassets/pms/chat-bubble-normal.svg?018218ac58fc); }
#header #user_information .chat_bubble.has_unread {
background-image: url(../../tsdefaultassets/pms/chat-bubble-new.svg?1a2e10645f4a);
width: 16px; }
#header #user_information .notification_bell {
background-image: url(../../images/bell_inactive.svg?b7c610114958);
margin-right: 6px; }
.darkmode #header #user_information .notification_bell {
background-image: url(../../images/darkmode_bell_inactive.svg?adffa5f94466); }
#header #user_information .notification_bell.has_unseen {
background-image: url(../../images/bell_notification.svg?7c8c88191e0c); }
.darkmode #header #user_information .notification_bell.has_unseen {
background-image: url(../../images/darkmode_bell_notification.svg?f91063ab46c7); }
#header #user_information #userUpdatesBellRoot.has_unseen .notification_bell.uip_v2 {
background-image: url(../../images/bell_notification_black.svg?9f7cd01adff1); }
.darkmode #header #user_information #userUpdatesBellRoot.has_unseen .notification_bell.uip_v2 {
background-image: url(../../images/darkmode_bell_notification.svg?f91063ab46c7); }
#header #user_information .notification_bell.active {
background-image: url(../../images/bell_active.svg?6e820b132257); }
.darkmode #header #user_information .notification_bell.active {
background-image: url(../../images/darkmode_bell_active.svg?be025e95b1a2); }
@media (max-width: 1280px) {
#header .ad.uip_v2 {
display: none; } }
#header .anon_dropdown_container {
display: inline;
position: relative; }
#header .tabindex_fix {
outline: none; }
.nav-bar {
overflow: hidden;
height: 1%;
padding: 0 12px 0 32px;
background: #0c6a93;
border-bottom: 3px solid #f47321;
white-space: nowrap; }
.nav-bar .purchase_tokens {
display: inline-block;
color: #FFF; }
.nav-bar .purchase_tokens a {
float: none; }
.nav-bar #beta {
height: 14px;
vertical-align: text-top;
margin: 0 0 0 3px;
background: #f47321;
border-radius: 2px;
color: #fff;
padding: 0 4px 0 3px;
text-shadow: none;
font: 11px 'UbuntuRegular', Arial, Helvetica, sans-serif;
line-height: 1.7; }
.nav-bar #tube-link-container:hover {
text-decoration: none; }
.nav-bar #tube-link:hover {
text-decoration: underline; }
#nav {
position: relative;
list-style: none;
margin: 0;
padding: 0;
line-height: 30px;
height: 36px;
overflow: hidden;
display: block;
box-sizing: content-box;
width: 100%; }
#nav li {
font: 1.166em 'UbuntuMedium', Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 0 #000;
padding: 12px 0 3px 0;
float: left;
margin: 0 20px 0 0; }
#nav li a {
color: #fff; }
#nav div {
color: #fff; }
.sub-nav {
display: inline-block;
position: relative;
top: 3px;
list-style: none;
margin: 0;
padding: 0;
height: 27px;
font: .8666em/16px 'UbuntuMedium', Arial, Helvetica, sans-serif; }
.sub-nav li {
float: left;
margin: 0 2px 0 0;
height: 27px;
overflow: hidden; }
.sub-nav li.selected {
font-size: 1.153em;
line-height: 16px; }
#mybroadcast-nav-tab a, #contest_nav_tab a {
color: #090; }
.gender-tab a, .sub-nav li > a {
float: left;
box-sizing: border-box;
height: 27px;
color: #5e81a4;
background: #dde9f5;
border: 1px solid #8bb3da;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
padding: 5px 11px 4px;
text-decoration: none; }
.gender-tab ahover, .active .gender-tab a, .sub-nav li > ahover, .active .sub-nav li > a {
text-decoration: none;
background: #fff;
color: #dc5500;
border-bottom: 1px solid #fff;
cursor: default; }
.darkmode #header {
background: #000; }
.darkmode #header #user_information .user_information_header {
background: #3a3e41;
border-radius: 5px 5px 0 0; }
.darkmode #header #user_information {
border-top-color: #323639;
border-left-color: #323639;
border-right-color: #323639;
background: transparent; }
.darkmode #header #user_information .bottom {
background-color: #262a2c; }
.darkmode #header #user_information,
.darkmode .logo-zone strong,
.darkmode #header #user_information a.tokencountlink,
.darkmode #header #user_information strong.auip_tokens {
color: #b3b3b3; }
.darkmode #header #user_information a {
color: #68B5F0; }
.footer-holder {
padding: 20px 0 15px;
width: 100%;
overflow: hidden;
font: .833em/1.2em 'UbuntuRegular', Arial, Helvetica, sans-serif;
text-align: center;
background: url(../../images/bg-footer-holder.gif?cc1e09ef1e7a) repeat-x; }
.footer-holder p {
margin: 0 0 8px; }
.footer-holder ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0 65px 27px;
font: 12px/20px 'UbuntuMedium', Arial, Helvetica, sans-serif; }
.footer-holder ul li {
display: inline;
padding: 0 3px 0 4px;
background: url(../../images/divider-01.gif?f035b6ed9178) no-repeat 0 50%; }
.footer-holder ul li:first-child {
background: none; }
.footer-holder ul li a {
color: #6b6b6b; }
.footer-holder .nav {
font: 13px/15px 'UbuntuMedium', Arial, Helvetica, sans-serif;
padding: 0 65px 13px; }
.footer-holder .nav li {
padding: 0 7px 0 11px; }
.footer-holder .nav li a {
color: #dc5500; }
.footer-holder #social-media-icons li {
padding: 0 10px;
background: none;
height: 20px;
line-height: 20px; }
.footer-holder #social-media-icons li a {
height: 20px;
line-height: 20px; }
.darkmode .footer-holder {
background: #1a1a1b;
border-top: 5px solid #727272; }
.darkmode .footer-holder h2, .darkmode .footer-holder .nav li a, .darkmode .footer-holder ul li a, .darkmode .footer-holder a, .darkmode .footer-holder p {
color: #b3b3b3; }
.footer-holder .footer-cb-address {
background: transparent url(../../images/cb-footer-address-US.svg?32f8dfba1611) no-repeat center;
background-size: contain;
text-align: center;
margin: 5px auto;
display: block;
height: 10px; }
.darkmode .footer-holder .footer-cb-address {
background: transparent url(../../images/cb-footer-address-US_dm.svg?01811869745d) no-repeat center;
background-size: contain; }
.footer-holder .twitter-icon {
display: inline-block;
width: 20px;
height: 17px;
background-image: url(../../images/socialmediaicons/social-media-twitter.svg?f674327e0970); }
.darkmode .footer-holder .twitter-icon {
background-image: url(../../images/socialmediaicons/social-media-twitter_dm.svg?96b2640b9b30); }
.footer-holder .facebook-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(../../images/socialmediaicons/social-media-facebook.svg?ca05d9320c6d); }
.darkmode .footer-holder .facebook-icon {
background-image: url(../../images/socialmediaicons/social-media-facebook_dm.svg?1650dafbb2cf); }
.footer-holder .instagram-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(../../images/socialmediaicons/social-media-instagram.svg?4ccdae05a467); }
.darkmode .footer-holder .instagram-icon {
background-image: url(../../images/socialmediaicons/social-media-instagram_dm.svg?805f07623584); }
.pm-control-bar {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-flex-pack: justify; }
@media screen and (min-width: 0\0) {
.pm-control-bar span {
display: inline-block;
height: 100%; } }
#ChatWindowBar .pm-more-menus li:hover {
color: #ccc !important; }
#ChatWindowBar .PrivateChatWindow form input[type=radio] {
height: 14px;
width: 14px; }
#ChatWindowBar .PrivateChatWindow form label {
margin: 3px 8px !important; }
#ChatWindowBar .PrivateChatWindow .send-button {
background-color: #F47321;
border: 1px solid #D56125;
cursor: pointer; }
#ChatWindowBar .PrivateChatWindow .send-button.disabled {
background-color: grey;
border: 1px solid grey;
cursor: wait; }
#ChatWindowBar .PrivateChatWindow div.corner div.me {
border-radius: 10px 10px 4px 10px !important; }
#ChatWindowBar .PrivateChatWindow div.corner div.other {
border-radius: 10px 10px 10px 4px !important; }
#ChatWindowBar .emoticonImage img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: inline-block; }
.userPanel {
color: #222; }
.darkmode .userPanel {
color: #ccc; }
/* Note this is a theme file -- Only color css allowed here! */
#header #user_information #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
border-color: #2C6990; }
.darkmode #header #user_information #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
border-color: #323639; }
#header #user_information #userInfoPanelMenuDropdownRoot .dmSwitchCircle {
background-color: #fff; }
#header #user_information #userInfoPanelMenuDropdownRoot .dmSwitch {
background-color: #474747; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.cornerSurveyWrapper {
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16); }
.cornerSurveyWrapper .cornerSurveyContainer {
background-color: #FFFFFF;
border-color: #EFEFEF; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer {
background-color: #0D0D0E;
border-color: #000000; }
.cornerSurveyWrapper .cornerSurveyContainer .timer {
background-color: #306A91; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .timer {
background-color: #85FFFF; }
.cornerSurveyWrapper .cornerSurveyContainer .survey .title {
color: #272F35; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .title {
color: #FFFFFF; }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer {
background-color: #FFFFFF;
border-color: #ACACAC; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer {
background-color: #0D0D0E;
border-color: #474747; }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover {
background-color: #E0EEFB;
border-color: #0B5B7E; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover {
background-color: #253543;
border-color: #85FFFF; }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble.svg?2c270418c9a7"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-darkmode.svg?f185c8672aca"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyInTrouble, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-hover.svg?40c2318cfa5e"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyInTrouble, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-darkmode-hover.svg?86cecd3f512f"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy.svg?464bf681ef2d"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-darkmode.svg?15c39eee3883"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyUnhappy, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-hover.svg?e61cc6deaadc"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyUnhappy, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-darkmode-hover.svg?3e26294c528c"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent.svg?035ce1a98261"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-darkmode.svg?d88f9a2a408c"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyIndifferent, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-hover.svg?07f36a93de62"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyIndifferent, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-darkmode-hover.svg?eb0c643cd3eb"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk.svg?41565f4557d9"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-darkmode.svg?89b9dfde6d4d"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileySmirk, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-hover.svg?3d80624964fb"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileySmirk, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-darkmode-hover.svg?704f464b0147"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love.svg?09c33b0fe104"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-darkmode.svg?7b690c269db1"); }
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyInLove, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-hover.svg?204ae832b170"); }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover .smileyInLove, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer .selected.smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-darkmode-hover.svg?42c1b0a53961"); }
.cornerSurveyWrapper .cornerSurveyContainer .confirmation .title {
color: #525252; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .confirmation .title {
color: #D1D1D1; }
.cornerSurveyWrapper .cornerSurveyContainer .confirmation .feedbackLink {
color: #306A91; }
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .confirmation .feedbackLink {
color: #85FFFF; }
.userFeedbackForm {
background-color: #fff; }
.darkmode .userFeedbackForm {
background-color: #1a1a1a; }
.userFeedbackForm .submitRow {
background-color: #F47321;
border-color: #A8A8A8;
color: #fff; }
.darkmode .userFeedbackForm .cancelAnchor {
color: #68B5F0; }
.userFeedbackForm .editToggle {
background-color: rgba(249, 249, 249, 0.75);
color: #000; }
.userFeedbackForm .editToggle:hover {
background-color: #fff;
color: #0471A1; }
.userFeedbackForm .closeControl {
background: transparent url(../../tsdefaultassets/close.svg?9a87e6f7a4de) no-repeat center center; }
.darkmode .userFeedbackForm .closeControl {
background: transparent url(../../tsdefaultassets/close-dark.svg?aaaa0dcab22a) no-repeat center center; }
.userFeedbackForm :focus {
outline: -webkit-focus-ring-color solid 1px; }
.userFeedbackForm .smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble.svg?2c270418c9a7"); }
.darkmode .userFeedbackForm .smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-darkmode.svg?f185c8672aca"); }
.userFeedbackForm .smileyInTrouble:hover, .userFeedbackForm .selected.smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-hover.svg?40c2318cfa5e"); }
.darkmode .userFeedbackForm .smileyInTrouble:hover, .darkmode .userFeedbackForm .selected.smileyInTrouble {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-trouble-darkmode-hover.svg?86cecd3f512f"); }
.userFeedbackForm .smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy.svg?464bf681ef2d"); }
.darkmode .userFeedbackForm .smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-darkmode.svg?15c39eee3883"); }
.userFeedbackForm .smileyUnhappy:hover, .userFeedbackForm .selected.smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-hover.svg?e61cc6deaadc"); }
.darkmode .userFeedbackForm .smileyUnhappy:hover, .darkmode .userFeedbackForm .selected.smileyUnhappy {
background-image: url("../../tsdefaultassets/popup_survey/smiley-unhappy-darkmode-hover.svg?3e26294c528c"); }
.userFeedbackForm .smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent.svg?035ce1a98261"); }
.darkmode .userFeedbackForm .smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-darkmode.svg?d88f9a2a408c"); }
.userFeedbackForm .smileyIndifferent:hover, .userFeedbackForm .selected.smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-hover.svg?07f36a93de62"); }
.darkmode .userFeedbackForm .smileyIndifferent:hover, .darkmode .userFeedbackForm .selected.smileyIndifferent {
background-image: url("../../tsdefaultassets/popup_survey/smiley-indifferent-darkmode-hover.svg?eb0c643cd3eb"); }
.userFeedbackForm .smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk.svg?41565f4557d9"); }
.darkmode .userFeedbackForm .smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-darkmode.svg?89b9dfde6d4d"); }
.userFeedbackForm .smileySmirk:hover, .userFeedbackForm .selected.smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-hover.svg?3d80624964fb"); }
.darkmode .userFeedbackForm .smileySmirk:hover, .darkmode .userFeedbackForm .selected.smileySmirk {
background-image: url("../../tsdefaultassets/popup_survey/smiley-smirk-darkmode-hover.svg?704f464b0147"); }
.userFeedbackForm .smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love.svg?09c33b0fe104"); }
.darkmode .userFeedbackForm .smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-darkmode.svg?7b690c269db1"); }
.userFeedbackForm .smileyInLove:hover, .userFeedbackForm .selected.smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-hover.svg?204ae832b170"); }
.darkmode .userFeedbackForm .smileyInLove:hover, .darkmode .userFeedbackForm .selected.smileyInLove {
background-image: url("../../tsdefaultassets/popup_survey/smiley-in-love-darkmode-hover.svg?42c1b0a53961"); }
.darkmode .userFeedbackForm .feedbackComment {
background-color: #1a1a1a;
color: #B3B3B3; }
.userFeedbackForm .feedbackComment:focus {
border-color: transparent; }
.userFeedbackForm .screenShotControl .sscButton {
background: #0c6a93;
border-color: #A8A8A8;
color: #fff; }
.userFeedbackForm .screenShotControl .info {
color: #ABABAB; }
.userFeedbackForm .highlight:not(.active) {
background-color: transparent; }
.userFeedbackForm .highlight:not(.active):hover {
background-color: #3C87BA; }
.userFeedbackForm .highlight.active {
background-color: #3C87BA; }
.userFeedbackForm .error {
color: red; }
.canvas .infoToolTip {
background-color: #FFFFD3;
border-color: #CCCCCC; }
.canvas .drawControls {
background-color: #fff; }
.canvas .drawControls .done:hover {
background-color: #E8E8E8; }
.canvas .drawControls .hideImage {
background-color: #000; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.roomElement {
border: 1px solid rgba(100, 100, 100, 0.5); }
.darkmode .roomElement {
border: 1px solid rgba(100, 100, 100, 0.5); }
.roomElementAnchor {
background-color: #f0f1f1; }
.darkmode .roomElementAnchor {
background-color: #252728; }
.roomElementAnchor.isHighlighted {
background-color: #f9eed0; }
.darkmode .roomElementAnchor.isHighlighted {
background-color: #F47321; }
.roomElementAnchor:hover {
color: #dc5500; }
.darkmode .roomElementAnchor:hover {
color: #DEDEDE; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.PmListItem {
border-color: #E0E0E0;
background-color: #ffffff; }
.darkmode .PmListItem, .hasDarkBackground .PmListItem {
color: #CBCBCB; }
.darkmode .PmListItem {
background-color: #202223; }
.PmListItem .replyIconSvg svg {
fill: #49494F; }
.darkmode .PmListItem .replyIconSvg svg, .hasDarkBackground .PmListItem .replyIconSvg svg {
fill: #ffffff; }
.darkmode .PmListItem .messageDiv, .hasDarkBackground .PmListItem .messageDiv {
color: #ffffff; }
.PmListItem.unreadBg {
background-color: #FCEADC; }
.darkmode .PmListItem.unreadBg, .hasDarkBackground .PmListItem.unreadBg {
background-color: #5B4736; }
.PmListItem.selected {
background-color: #E0E0E0; }
.darkmode .PmListItem.selected, .hasDarkBackground .PmListItem.selected {
background-color: #434649; }
.hasDarkBackground .PmListItem {
border-color: #7F7F7F;
background-color: #2A2C2E; }
.PmListItem .avatarBubble .broadcaster {
background-color: #DC5500; }
.PmListItem .avatarBubble .mod {
background-color: #DC0000; }
.PmListItem .avatarBubble .inFanclub {
background-color: #090; }
.PmListItem .avatarBubble .tippedTonsRecently {
background-color: #804baa; }
.PmListItem .avatarBubble .tippedALotRecently {
background-color: #be6aff; }
.PmListItem .avatarBubble .tippedRecently {
background-color: #1E5CFB; }
.PmListItem .avatarBubble .hasTokens {
background-color: #69A; }
.PmListItem .avatarBubble .defaultUser {
background-color: #939393; }
.PmListItem .closeBtnContainer {
fill: #888; }
.PmListItem .closeBtnContainer:hover {
fill: #222; }
.darkmode .PmListItem .closeBtnContainer:hover, .hasDarkBackground .PmListItem .closeBtnContainer:hover {
fill: #D1D1D1; }
.PmListItem .timeString {
color: #6C6C78; }
.darkmode .PmListItem .timeString {
color: #888; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.PMControlBar {
background-color: #ffffff; }
.darkmode .PMControlBar {
background-color: #202223; }
.PMControlBar .backButton {
color: #0471A1; }
.darkmode .PMControlBar .backButton {
color: #68B5F0; }
.SearchBar {
border-color: #BDBDBD; }
.SearchBar .searchUserInput {
color: #000000;
border-color: #BDBDBD; }
.SearchBar .searchUserInput:focus {
border-color: #000000; }
.darkmode .SearchBar .searchUserInput, .hasDarkBackground .SearchBar .searchUserInput {
color: #ffffff; }
.darkmode .SearchBar .searchUserInput:focus, .hasDarkBackground .SearchBar .searchUserInput:focus {
border-color: #ffffff; }
.tab.chat-tab-handle.active {
color: #dc5500; }
.darkmode .tab.chat-tab-handle.active {
color: #68B5F0; }
#ChatTabContainer {
background-color: #fff;
border: 1px solid #acacac; }
.darkmode #ChatTabContainer {
background-color: #202223;
border: 1px solid #474747; }
#ChatTabContainer #tab-row {
background-color: #7f7f7f;
border-bottom: none; }
.darkmode #ChatTabContainer #tab-row {
background-color: #1a1a1c; }
#ChatTabContainer .refreshUsersLink {
color: #0a5a83; }
.darkmode #ChatTabContainer .refreshUsersLink {
color: #68B5F0; }
#ChatTabContainer .notesIcon {
background: url(../../tsdefaultassets/notes_light.svg?9743cb4941b2) no-repeat center; }
.darkmode #ChatTabContainer .notesIcon {
background: url(../../tsdefaultassets/notes_dm_light.svg?5f4262c591e5) no-repeat center; }
#ChatTabContainer .notesIcon.hover {
background: url(../../tsdefaultassets/notes.svg?83c71ae8f502) no-repeat center; }
.darkmode #ChatTabContainer .notesIcon.hover {
background: url(../../tsdefaultassets/notes_dm.svg?aebbc4d049ee) no-repeat center; }
.noteIconSvg.roomNoticeMsg svg, .noteIconSvg.regMsg svg, .noteIconSvg.roomNoticeMsg svg, .noteIconSvg.regMsg svg {
stroke: #6C6C78;
fill: transparent !important;
color: transparent !important; }
.noteIconSvg.roomNoticeMsg svg:hover, .noteIconSvg.regMsg svg:hover, .noteIconSvg.roomNoticeMsg svg:hover, .noteIconSvg.regMsg svg:hover {
stroke: #272F35; }
.isTip .noteIconSvg.roomNoticeMsg svg, .isTip .noteIconSvg.roomNoticeMsg svg {
stroke: #6C6C78 !important;
fill: transparent !important;
color: transparent !important; }
.isTip .noteIconSvg.roomNoticeMsg svg:hover, .isTip .noteIconSvg.roomNoticeMsg svg:hover {
stroke: #272F35 !important; }
.darkmode .noteIconSvg.roomNoticeMsg svg, .darkmode .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg, .darkmode .noteIconSvg.roomNoticeMsg svg, .darkmode .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg {
stroke: #DDD;
fill: transparent !important;
color: transparent !important; }
.darkmode .noteIconSvg.roomNoticeMsg svg:hover, .darkmode .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover, .darkmode .noteIconSvg.roomNoticeMsg svg:hover, .darkmode .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover {
stroke: #FFF; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.updatesTabContents {
background-color: #ffffff; }
.darkmode .updatesTabContents {
background-color: #202223; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.twitterUpdateRow, .userUpdatesPanel {
background-color: #ffe5be;
border-color: #dabb95; }
.darkmode .twitterUpdateRow, .darkmode .userUpdatesPanel {
background-color: #ffe5be;
border-color: #d9bb97; }
.twitterUpdateRow.uipExp, .userUpdatesPanel.uipExp {
background-color: #fff;
border-color: #F0F0F0; }
.darkmode .twitterUpdateRow.uipExp, .darkmode .userUpdatesPanel.uipExp {
background-color: #2a2c2e;
border-color: #1a1a1b; }
.twitterUpdateRow.seen, .userUpdatesPanel.seen {
background-color: #FCEADC;
border-color: #EFEFEF; }
.twitterUpdateRow.seen.uipExp, .userUpdatesPanel.seen.uipExp {
background-color: #F8F9FA; }
.twitterUpdateRow .contentSection, .userUpdatesPanel .contentSection {
color: #494949; }
.twitterUpdateRow .contentSection .tweetLink, .userUpdatesPanel .contentSection .tweetLink {
color: #e45900; }
.twitterUpdateRow .timeSince, .userUpdatesPanel .timeSince {
color: #7f7f7f; }
.darkmode .twitterUpdateRow .timeSince, .darkmode .userUpdatesPanel .timeSince {
color: #6c6c78; }
.twitterUpdateRow .twitterLink, .twitterUpdateRow .tweetLink, .userUpdatesPanel .twitterLink, .userUpdatesPanel .tweetLink {
color: #0a5a83; }
.darkmode .twitterUpdateRow .twitterLink, .darkmode .twitterUpdateRow .tweetLink, .darkmode .userUpdatesPanel .twitterLink, .darkmode .userUpdatesPanel .tweetLink {
color: #68B5F0; }
.twitterUpdateRow.seen, .userUpdatesPanel.seen {
background-color: #efefef;
border-color: #c1c1c1; }
.darkmode .twitterUpdateRow.seen, .darkmode .userUpdatesPanel.seen {
background-color: #2a2c2e;
border-color: #1a1a1b; }
.darkmode .twitterUpdateRow.seen .contentSection, .darkmode .userUpdatesPanel.seen .contentSection {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
#UserUpdatesPanel {
background-color: #ffffff;
border-color: #2C6990; }
.darkmode #UserUpdatesPanel {
background-color: #202223;
border-color: #333639;
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5), 8px 0px 8px -8px rgba(0, 0, 0, 0.5), -8px 0px 8px -8px rgba(0, 0, 0, 0.5); }
#UserUpdatesPanel #updates-tab {
color: #dc5500; }
#UserUpdatesPanel .tab.active {
color: #dc5500; }
.darkmode #UserUpdatesPanel .tab.active {
color: #68B5F0; }
#UserUpdatesPanel #tab-row {
background-color: #747474; }
.darkmode #UserUpdatesPanel #tab-row {
background-color: #474747; }
#UserUpdatesPanel .feedbackLink {
color: #0a5a83; }
.darkmode #UserUpdatesPanel .feedbackLink {
color: #68B5F0; }
/* Note this is a theme file -- Only color css allowed here! */
#ChatTabContents .message-list {
background-color: #fff;
color: #494949; }
.darkmode #ChatTabContents .message-list {
background-color: transparent;
color: #dedede; }
#ChatTabContents .message-list .msg-text {
color: #494949; }
.darkmode #ChatTabContents .message-list .msg-text {
color: #dedede; }
#ChatTabContents .message-list .msg-text .roomNotice {
color: #494949; }
.darkmode #ChatTabContents .message-list .msg-text .roomNotice {
color: #dedede; }
#ChatTabContents .chat-input-div .send-button,
#ChatTabContents .inputDiv .send-button,
#SplitModeChatSettingsTab .chat-input-div .send-button,
#SplitModeChatSettingsTab .inputDiv .send-button,
#UserListTab .chat-input-div .send-button,
#UserListTab .inputDiv .send-button,
#FVChatTabContents .chat-input-div .send-button,
#FVChatTabContents .inputDiv .send-button,
#FVChatSettingsTab .chat-input-div .send-button,
#FVChatSettingsTab .inputDiv .send-button {
color: #ffffff;
background-color: #eb3404;
cursor: pointer;
text-shadow: #bc2b1d 1px 1px 0; }
#ChatTabContents .chat-input-div .send-button.disabled,
#ChatTabContents .inputDiv .send-button.disabled,
#SplitModeChatSettingsTab .chat-input-div .send-button.disabled,
#SplitModeChatSettingsTab .inputDiv .send-button.disabled,
#UserListTab .chat-input-div .send-button.disabled,
#UserListTab .inputDiv .send-button.disabled,
#FVChatTabContents .chat-input-div .send-button.disabled,
#FVChatTabContents .inputDiv .send-button.disabled,
#FVChatSettingsTab .chat-input-div .send-button.disabled,
#FVChatSettingsTab .inputDiv .send-button.disabled {
background-color: grey;
cursor: wait;
text-shadow: none; }
#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
background-color: #ffffff; }
.darkmode #FVChatTabContents .chat-input-div, .darkmode #FVChatSettingsTab .chat-input-div {
background-color: #474747; }
#FVChatTabContents .chat-input-div .chat-input-field,
#FVChatSettingsTab .chat-input-div .chat-input-field {
color: #000000; }
.darkmode #FVChatTabContents .chat-input-div .chat-input-field, .darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
background-color: #474747;
color: #ffffff; }
#FVChatTabContents .chat-input-div .send-button,
#FVChatSettingsTab .chat-input-div .send-button {
color: #ffffff;
background-color: #eb3404; }
#FVChatTabContents .chat-input-div .send-button.send-button-gradient,
#FVChatSettingsTab .chat-input-div .send-button.send-button-gradient {
background: linear-gradient(#f66d51, #eb3404); }
#FVChatTabContents .chat-input-div .tip-button,
#FVChatSettingsTab .chat-input-div .tip-button {
color: #ffffff;
background-color: #53843a; }
#FVChatTabContents .chat-input-div .tip-button.tip-button-gradient,
#FVChatSettingsTab .chat-input-div .tip-button.tip-button-gradient {
background: linear-gradient(#87c667, #53843a); }
#FVChatTabContents .msg-text,
#FVChatSettingsTab .msg-text {
color: #FFFFFF; }
.darkmode #FVChatTabContents .msg-text, .darkmode #FVChatSettingsTab .msg-text {
color: #dedede; }
.msg-link {
color: #0a5a83; }
.darkmode .msg-link, .hasDarkBackground .msg-link {
color: #85FFFF; }
.bright-background .msg-link {
color: #0a5a83; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
#FVChatSettingsTab .chat-settings-input, #SplitModeChatSettingsTab .chat-settings-input {
border-color: #b1b1b1; }
.darkmode #FVChatSettingsTab .chat-settings-input::placeholder, .darkmode #SplitModeChatSettingsTab .chat-settings-input::placeholder {
color: #ddd; }
.darkmode #FVChatSettingsTab .chat-settings-input:focus, .darkmode #SplitModeChatSettingsTab .chat-settings-input:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
.darkmode #FVChatSettingsTab .chat-settings-select, .darkmode #SplitModeChatSettingsTab .chat-settings-select {
background-color: #000000;
color: #ddd; }
#SplitModeChatSettingsTab .link {
color: #0a5a83; }
.darkmode #SplitModeChatSettingsTab .link {
color: #68B5F0; }
#FVChatSettingsTab {
color: #ffffff; }
#FVChatSettingsTab .manage-ignored-link {
color: #85ffff; }
.darkmode #FVChatSettingsTab .manage-ignored-link {
color: #68B5F0; }
#FVChatSettingsTab .chat-input-div {
background-color: #ffffff; }
.darkmode #FVChatSettingsTab .chat-input-div {
background-color: #474747; }
.darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
background-color: #474747;
color: #ffffff; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.BaseTabsContainer .inputDiv {
background-color: #fff; }
.darkmode .BaseTabsContainer .inputDiv {
background-color: #202223; }
.BaseTabsContainer .inputDiv .msg-input {
background-color: #fff;
color: #000; }
.darkmode .BaseTabsContainer .inputDiv .msg-input {
background-color: #202223;
color: #dedede; }
#tab-row {
background-color: #7f7f7f;
border-bottom: 2px solid #7f7f7f; }
.darkmode #tab-row {
background-color: #1a1a1c;
border-bottom: 2px solid #1a1a1c; }
.tab {
background-color: #c9c9c9; }
.darkmode .tab {
background-color: #323639; }
.tab:hover {
background-color: #fff; }
.darkmode .tab:hover {
background-color: #202223; }
.tab.active {
background-color: #fff;
color: #0d5d81;
cursor: default; }
.darkmode .tab.active {
background-color: #202223;
color: #68B5F0; }
.tab.collapsed {
background-color: #fff; }
.darkmode .tab.collapsed {
background-color: #202223; }
.tab.collapsed:hover {
background-color: #c9c9c9; }
.darkmode .tab.collapsed:hover {
background-color: #323639; }
.chat-tabs-dropdown-border {
border-color: #c9c9c9; }
.darkmode .chat-tabs-dropdown-border {
border-color: #666666; }
.tooltip-white {
color: #000;
background-color: #FFF;
border-color: #EFEFEF; }
.darkmode .tooltip-white {
color: #ededed;
background-color: #303030;
border-color: #222222; }
.tooltip-white .divotBottom .divotBackground {
border-top-color: #fff; }
.darkmode .tooltip-white .divotBottom .divotBackground {
border-top-color: #303030; }
.tooltip-white .divotBottom .divotBorder {
border-top-color: #efefef; }
.darkmode .tooltip-white .divotBottom .divotBorder {
border-top-color: #303030; }
.tooltip {
color: #222222;
background-color: #fdf294;
border-color: #ff9130; }
.darkmode .tooltip {
color: #ededed;
background-color: #303030;
border-color: #222222; }
.tooltip .divotTop .divotBackground {
border-bottom-color: #fdf294; }
.darkmode .tooltip .divotTop .divotBackground {
border-bottom-color: #303030; }
.tooltip .divotTop .divotBorder {
border-bottom-color: #ff9130; }
.darkmode .tooltip .divotTop .divotBorder {
border-bottom-color: #222222; }
.tooltip .divotBottom .divotBackground {
border-top-color: #fdf294; }
.darkmode .tooltip .divotBottom .divotBackground {
border-top-color: #303030; }
.tooltip .divotBottom .divotBorder {
border-top-color: #ff9130; }
.darkmode .tooltip .divotBottom .divotBorder {
border-top-color: #222222; }
.tooltip .divotLeft .divotBackground {
border-right-color: #fdf294; }
.darkmode .tooltip .divotLeft .divotBackground {
border-right-color: #303030; }
.tooltip .divotLeft .divotBorder {
border-right-color: #ff9130; }
.darkmode .tooltip .divotLeft .divotBorder {
border-right-color: #222222; }
.tooltip .divotRight .divotBackground {
border-left-color: #fdf294; }
.darkmode .tooltip .divotRight .divotBackground {
border-left-color: #303030; }
.tooltip .divotRight .divotBorder {
border-left-color: #ff9130; }
.darkmode .tooltip .divotRight .divotBorder {
border-right-color: #222222; }
.tooltip.modern {
color: #222222;
background-color: #FFFFFF;
border-color: #EFEFEF;
box-shadow: 0 0 30px grey;
fill: currentColor !important; }
.tooltip.modern .tooltipCloseButton {
cursor: pointer; }
.tooltip.modern .tooltipCloseButton:hover {
fill: #999 !important; }
.darkmode .tooltip.modern {
color: #EDEDED;
background-color: #303030;
border-color: #222222;
box-shadow: 0 0 16px black; }
.tooltip.modern .divotTop .divotBackground {
border-bottom-color: #FFFFFF; }
.darkmode .tooltip.modern .divotTop .divotBackground {
border-bottom-color: #303030; }
.tooltip.modern .divotTop .divotBorder {
border-bottom-color: #EFEFEF; }
.darkmode .tooltip.modern .divotTop .divotBorder {
border-bottom-color: #222222; }
.tooltip.modern .divotBottom .divotBackground {
border-top-color: #FFFFFF; }
.darkmode .tooltip.modern .divotBottom .divotBackground {
border-top-color: #303030; }
.tooltip.modern .divotBottom .divotBorder {
border-top-color: #EFEFEF; }
.darkmode .tooltip.modern .divotBottom .divotBorder {
border-top-color: #222222; }
.tooltip.modern .divotLeft .divotBackground {
border-right-color: #FFFFFF; }
.darkmode .tooltip.modern .divotLeft .divotBackground {
border-right-color: #303030; }
.tooltip.modern .divotLeft .divotBorder {
border-right-color: #EFEFEF; }
.darkmode .tooltip.modern .divotLeft .divotBorder {
border-right-color: #222222; }
.tooltip.modern .divotRight .divotBackground {
border-left-color: #FFFFFF; }
.darkmode .tooltip.modern .divotRight .divotBackground {
border-left-color: #303030; }
.tooltip.modern .divotRight .divotBorder {
border-left-color: #EFEFEF; }
.darkmode .tooltip.modern .divotRight .divotBorder {
border-left-color: #222222; }
.tooltip.white-shadow {
color: #222222;
background-color: #FFFFFF;
border-color: #ACACAC;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.16); }
.darkmode .tooltip.white-shadow {
color: #FFFFFF;
background-color: #222429;
border-color: #2E3137;
box-shadow: 0 0 16px black; }
.tooltip.white-shadow .divotTop .divotBackground {
border-bottom-color: #FFFFFF; }
.darkmode .tooltip.white-shadow .divotTop .divotBackground {
border-bottom-color: #222429; }
.tooltip.white-shadow .divotTop .divotBorder {
border-bottom-color: #ACACAC; }
.darkmode .tooltip.white-shadow .divotTop .divotBorder {
border-bottom-color: #2E3137; }
.tooltip.white-shadow .divotBottom .divotBackground {
border-top-color: #FFFFFF; }
.darkmode .tooltip.white-shadow .divotBottom .divotBackground {
border-top-color: #222429; }
.tooltip.white-shadow .divotBottom .divotBorder {
border-top-color: #ACACAC; }
.darkmode .tooltip.white-shadow .divotBottom .divotBorder {
border-top-color: #2E3137; }
.tooltip.white-shadow .divotLeft .divotBackground {
border-right-color: #FFFFFF; }
.darkmode .tooltip.white-shadow .divotLeft .divotBackground {
border-right-color: #222429; }
.tooltip.white-shadow .divotLeft .divotBorder {
border-right-color: #ACACAC; }
.darkmode .tooltip.white-shadow .divotLeft .divotBorder {
border-right-color: #2E3137; }
.tooltip.white-shadow .divotRight .divotBackground {
border-left-color: #FFFFFF; }
.darkmode .tooltip.white-shadow .divotRight .divotBackground {
border-left-color: #222429; }
.tooltip.white-shadow .divotRight .divotBorder {
border-left-color: #ACACAC; }
.darkmode .tooltip.white-shadow .divotRight .divotBorder {
border-left-color: #2E3137; }
/* Note this is a theme file -- Only color css allowed here! */
.transparentCheckbox {
border-color: #A8A8A8; }
.transparentCheckbox.focused {
box-shadow: 0 0 0 2px #68b5f0; }
.transparentCheckbox.checked {
background: url(../../tsdefaultassets/round-white-checkmark.svg?de510ac7d460) no-repeat center center, #0075ff; }
.darkmode .transparentCheckbox.checked {
background-color: #8E8E93; }
.transparentCheckbox.checked.disabled {
background-color: #d1d1d1; }
.darkmode .transparentCheckbox.checked.disabled {
border-color: #4b4c4b;
background: url(../../tsdefaultassets/round-gray-checkmark.svg?ab824c5cd6ea) no-repeat center center, #131414; }
.transparentCheckbox.disabled {
background-color: #F8F9FA;
border-color: #EFEFEF; }
.darkmode .transparentCheckbox.disabled {
border-color: #4b4c4b;
background-color: #202223; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.followedContainer {
color: #0a5a83; }
.darkmode .followedContainer {
color: #b3b3b3; }
#main .top-section .sub-nav li a.tabAnchor.orange, #main .top-section .sub-nav li a.tabAnchor.orange .followed,
#main .genderTabs .tabAnchor.orange,
#main .followedContainer .tabAnchor.orange,
#main .genderTabs .tabAnchor.orange .followed,
#main .followedContainer .tabAnchor.orange .followed, #nav > #followed_tab.orange, #nav > #followed_tab.orange .followed, #nav.orange, #nav.orange .followed, .right-buttons #followed_tab .followed.orange, .right-buttons #followed_tab .followed.orange .followed {
background-color: #FAE6C4 !important;
color: #dc5500 !important; }
.darkmode #main .top-section .sub-nav li a.tabAnchor.orange, .darkmode #main .top-section .sub-nav li a.tabAnchor.orange .followed, .darkmode #main .genderTabs .tabAnchor.orange, .darkmode #main .followedContainer .tabAnchor.orange, .darkmode #main .genderTabs .tabAnchor.orange .followed, .darkmode #main .followedContainer .tabAnchor.orange .followed, .darkmode #nav > #followed_tab.orange, .darkmode #nav > #followed_tab.orange .followed, .darkmode #nav.orange, .darkmode #nav.orange .followed, .darkmode .right-buttons #followed_tab .followed.orange, .darkmode .right-buttons #followed_tab .followed.orange .followed {
background-color: #885336 !important;
color: #ffffff !important; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.modalAlert {
color: #000000;
background-color: rgba(0, 0, 0, 0.4); }
.darkmode .modalAlert {
color: #B3B3B3; }
.modalAlert .dialog {
background-color: #ffffff;
border: 1px solid #ACACAC; }
.darkmode .modalAlert .dialog {
background-color: #1a1a1a;
border: 1px solid #474747; }
.modalAlert .dialog .dialogForm {
background-color: #f9f9f9;
border-top-color: #cccccc; }
.darkmode .modalAlert .dialog .dialogForm {
background-color: #202223;
border-top-color: #474747; }
.modalAlert .dialog .dialogForm .accept {
color: #ffffff;
background-color: #006ffc;
border-color: #006ffc; }
.darkmode .modalAlert .dialog .dialogForm .accept {
background-color: #68B5F0;
border-color: #68B5F0; }
.modalAlert .dialog .dialogForm .decline {
color: #0268ff;
background-color: #ffffff;
border-color: #cccccc; }
.darkmode .modalAlert .dialog .dialogForm .decline {
color: #68B5F0;
background-color: #202223;
border-color: #68B5F0; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
body.darkmode {
background: #000; }
body.darkmode #main {
color: #b3b3b3; }
.textColor {
color: #494949; }
.darkmode .textColor {
color: #b3b3b3; }
.bgColor {
background-color: #FFFFFF; }
.darkmode .bgColor {
background-color: #2a2c30; }
.tabSectionBorder {
border-bottom: 1px solid #8bb3da; }
.darkmode .tabSectionBorder {
border-bottom: 1px solid #666666; }
.tabBorder {
border-color: #8bb3da; }
.darkmode .tabBorder {
border-color: #666666; }
.tabActiveBorder, .tabBorder:hover:not(.orange) {
border-bottom: 1px solid #ffffff; }
.darkmode .tabActiveBorder, .darkmode .tabBorder:hover:not(.orange) {
border-bottom: 1px solid #000; }
.tabBorder.tabBorderNoHover:hover {
border-bottom: 1px solid #8bb3da; }
.darkmode .tabBorder.tabBorderNoHover:hover {
border-bottom: 1px solid #666666; }
.tabInactiveBgColor {
background-color: #dde9f5; }
.darkmode .tabInactiveBgColor {
background-color: #2a2c30; }
.tabInactiveColor {
color: #5e81a4; }
.darkmode .tabInactiveColor {
color: #dedede; }
.tabActiveBgColor, .tabInactiveBgColor:hover {
background-color: #FFFFFF; }
.darkmode .tabActiveBgColor, .darkmode .tabInactiveBgColor:hover {
background-color: #000; }
.tabActiveColor, .tabInactiveColor:hover {
color: #dc5500; }
.darkmode .tabActiveColor, .darkmode .tabInactiveColor:hover {
color: #68B5F0; }
.chatAreaTabColor {
color: #4c4c4c; }
.darkmode .chatAreaTabColor {
color: #aaaaaa; }
.defaultColor {
color: #494949; }
.darkmode .defaultColor {
color: #b3b3b3; }
.defaultTooltipColor {
color: #222222; }
.darkmode .defaultTooltipColor {
color: #B3B3B3; }
.roomSubjectToolTipColor {
color: #494949; }
.darkmode .roomSubjectToolTipColor {
color: #b3b3b3; }
.hrefColor {
color: #0A5B83; }
.darkmode .hrefColor {
color: #68B5F0; }
.tagFontColor {
color: #FFFFFF; }
.tagExhibColor {
background-color: #6D85B5; }
.tagHDColor {
background-color: #2472B4; }
.tagLineColor {
background-color: #0b5d81; }
.tagOfflineColor {
background-color: #4F4F4F; }
.tagPrivateGroupColor {
background-color: #B60A42; }
.tagGamingColor {
background-color: #2472b4; }
.camBgColor {
background-color: #F0F1F1; }
.darkmode .camBgColor {
background-color: #2A2C2E; }
.camBorderColor {
color: #ACACAC; }
.darkmode .camBorderColor {
color: #2A2C2E; }
.camSubjectColor {
color: #000000; }
.darkmode .camSubjectColor {
color: #B3B3B3; }
.camSubjectTagColor {
color: #0A5A83; }
.darkmode .camSubjectTagColor {
color: #68B5F0; }
.camAltTextColor {
color: #575757; }
.darkmode .camAltTextColor {
color: #888888; }
.camHrefColor {
color: #0A5A83; }
.darkmode .camHrefColor {
color: #68B5F0; }
.transparentBg {
background: transparent; }
.nextCamBgColor {
background: #FCEADB; }
.darkmode .nextCamBgColor {
background: #303843; }
.navigationAlt2BgImage {
background: url(../../tsdefaultassets/gender_tab_bg.gif?0437047d9c3a) repeat-x; }
.darkmode .navigationAlt2BgImage {
background-image: none; }
.navigationAlt2BgColor {
background-color: #ffffff; }
.darkmode .navigationAlt2BgColor {
background-color: #2a2c30; }
.contentBgColor:hover {
border-bottom-color: #ffffff; }
.darkmode .contentBgColor:hover {
border-bottom-color: #202223; }
.overlayOpacity {
background-color: #000 !important;
opacity: 0.85; }
.dismissibleMessageColor {
color: #49494F; }
.darkmode .dismissibleMessageColor {
color: #B3B3B3; }
#header #user_information .userInfoDropdownBgColor {
background-color: #3C87BA; }
.darkmode #header #user_information .userInfoDropdownBgColor {
background-color: #515151; }
#header #user_information .userInfoDropdownTextColor {
color: #fff; }
.darkmode #header #user_information .userInfoDropdownTextColor {
color: #fff; }
#header #user_information .userInfoDropdownHighlightColor {
background-color: transparent; }
#header #user_information .userInfoDropdownHighlightColor:hover {
background-color: #F47321; }
.darkmode .logo-zone image {
opacity: 0.8; }
.darkmode.isIpad select {
color: #000 !important; }
/**
From defaultSiteSettings
----bgColor: "#ffffff", ---- DONE
navigationBgColor: "#0c6a93",
navigationFontColor: "#ffffff",
navigationAltBgColor: "#f47321",
----navigationAlt2BgColor: "#ffffff", ---- DONE
----navigationAlt2BgImage: `url(../../scss/site/${STATIC_URL_ROOT}tsdefaultassets/gender_tab_bg.gif) repeat-x`, ---- DONE
h1Color: "#004B5E",
----textColor: "#494949", ---- DONE
----defaultColor: "#494949", ---- DONE
----defaultTooltipColor: "#222222", ---- DONE
userInfoAreaTextColor: "#222222",
----hrefColor: "#0A5B83", ---- DONE
----tabBorderColor: "#8bb3da",---- DONE
----tabActiveColor: "#ffffff", ---- DONE
----tabInactiveColor: "#dde9f5", ---- DONE
----tabActiveFontColor: "#dc5500", ---- DONE
----tabInactiveFontColor: "#5e81a4", ---- DONE
----tagExhibColor: "#6D85B5", ---- DONE
----tagFontColor: "#FFF", ---- DONE
----tagHDColor: "#2472B4", ---- DONE
----tagLineColor: "#0b5d81", ---- DONE
----tagOfflineColor: "#4F4F4F", ---- DONE
----tagPrivateGroupColor: "#B60A42", ---- DONE
----contentBgColor: "#FFFFFF", ---- DONE
----camBgColor: "#F0F1F1", ---- DONE
----camBorderColor: "#ACACAC", ---- DONE
----camSubjectColor: "#000", ---- DONE
----camSubjectTagColor: "#0A5A83", ---- DONE
----camAltTextColor: "#575757", ---- DONE
----camHrefColor: "#0A5A83", ---- DONE
tokenHrefColor: "#e45900",
footerHrefColor: "#676767",
footerTextColor: "#494949",
copyrightTextColor: "#494949",
userInfoBgColor: "#e9e9e9",
usernameColor: "#ffffff",
----nextCamBgColor: "#FCEADB", ---- DONE
footerColNameColor: "#494949",
footerRowColor: "#0A5A83",
footerSiteNavColor: "#dc5500",
----chatAreaTabColor: "#4C4C4C", ---- DONE
----roomSubjectToolTipColor: "#494949", ---- DONE
loginOverlayColor: "#000000",
----dismissibleMessageColor: "#494949", ---- DONE
----userInfoDropdownBgColor: "#3C87BA", ---- DONE
----userInfoDropdownHighlightColor: "#F47321", ---- DONE
----userInfoDropdownTextColor: "#ffffff", ---- DONE
signupBgColor: "#f47321",
*/
/**
* Generic mixins
*/
.overlay {
background: transparent url(../../images/overlay_black.png?4979f19d01ae) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1100;
display: none; }
#entrance_terms, #broadcast_terms, #obs_broadcast_info, #daily_payout_info, #electronic_consent_terms {
position: absolute;
top: 250px;
left: 20%;
right: 20%;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
display: none;
border: 2px solid #ccc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 5px #333;
-moz-box-shadow: 0 1px 5px #333;
-ms-box-shadow: 0 1px 5px #333;
-o-box-shadow: 0 1px 5px #333;
box-shadow: 0 1px 5px #333;
z-index: 1100;
min-width: 700px; }
.overlay_popup {
/*
Used on CB1 chat page for tip and emote popups
*/ }
.overlay_popup .formborder {
border-top: 2px solid #0b5d81;
border-right: 2px solid #0b5d81;
border-left: 2px solid #0b5d81;
background-color: #fff;
margin: 0px;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
height: 222px; }
.overlay_popup td.formborder {
vertical-align: top;
display: block; }
.overlay_popup .divider {
margin: 0px;
padding: 0px; }
.overlay_popup .popup_imgs {
width: 369px;
height: auto;
padding: 8px 10px 6px; }
.overlay_popup .title {
margin: 0px;
padding: 6px 0px 0px 6px;
background-color: #e0e0e0;
height: 23px;
color: #0b5d81;
font: 15px 'UbuntuBold', Arial, Helvetica, sans-serif; }
.overlay_popup .more {
margin: 0px;
padding: 0px 10px 0px;
width: 369px;
text-align: right; }
.overlay_popup .more a {
color: #d55215;
font: 13px 'UbuntuRegular', Arial, Helvetica, sans-serif;
text-decoration: underline; }
.overlay_popup .body {
padding: 8px 10px 6px; }
.overlay_popup .body a {
color: #d55215;
text-decoration: underline;
font-weight: normal; }
.overlay_popup .body form {
clear: both;
display: block; }
.overlay_popup .balance {
font-weight: bold;
margin-bottom: 15px;
float: left; }
.overlay_popup .balance span {
color: green; }
.overlay_popup .purchase_tokens {
font-size: .9em;
float: right; }
/**
* Generic mixins
*/
.overlay {
background: transparent url(../../images/overlay_black.png?4979f19d01ae) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1100;
display: none; }
#entrance_terms, #broadcast_terms, #obs_broadcast_info, #daily_payout_info, #electronic_consent_terms {
position: absolute;
top: 250px;
left: 20%;
right: 20%;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
display: none;
border: 2px solid #ccc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 5px #333;
-moz-box-shadow: 0 1px 5px #333;
-ms-box-shadow: 0 1px 5px #333;
-o-box-shadow: 0 1px 5px #333;
box-shadow: 0 1px 5px #333;
z-index: 1100;
min-width: 700px; }
#entrance_terms#electronic_consent_terms, #broadcast_terms#electronic_consent_terms, #obs_broadcast_info#electronic_consent_terms, #daily_payout_info#electronic_consent_terms, #electronic_consent_terms#electronic_consent_terms {
min-width: 0; }
#entrance_terms .header, #broadcast_terms .header, #obs_broadcast_info .header, #daily_payout_info .header, #electronic_consent_terms .header {
text-align: center;
color: #222; }
#entrance_terms p, #entrance_terms ul, #broadcast_terms p, #broadcast_terms ul, #obs_broadcast_info p, #obs_broadcast_info ul, #daily_payout_info p, #daily_payout_info ul, #electronic_consent_terms p, #electronic_consent_terms ul {
line-height: 1.4em !important; }
#entrance_terms .scroll, #broadcast_terms .scroll, #obs_broadcast_info .scroll, #daily_payout_info .scroll, #electronic_consent_terms .scroll {
height: 200px;
overflow: auto;
padding: 0 15px 0 10px;
border: 1px solid #ccc;
margin: 0 auto;
text-align: left; }
#entrance_terms .scroll p, #broadcast_terms .scroll p, #obs_broadcast_info .scroll p, #daily_payout_info .scroll p, #electronic_consent_terms .scroll p {
margin-block-start: 1em !important;
margin-block-end: 1em !important;
margin-inline-start: 0 !important;
margin-inline-end: 0 !important; }
#entrance_terms a, #broadcast_terms a, #obs_broadcast_info a, #daily_payout_info a, #electronic_consent_terms a {
color: #0a5a83; }
#entrance_terms .footer, #broadcast_terms .footer, #obs_broadcast_info .footer, #daily_payout_info .footer, #electronic_consent_terms .footer {
text-align: center;
color: #222; }
#entrance_terms .footer a, #broadcast_terms .footer a, #obs_broadcast_info .footer a, #daily_payout_info .footer a, #electronic_consent_terms .footer a {
width: 200px;
height: 30px;
line-height: 30px;
font-weight: bold;
background-color: orange;
margin: 10px 5px 0 5px;
display: inline-block;
text-align: center; }
#entrance_terms .footer .exit_entrance_terms, #broadcast_terms .footer .exit_entrance_terms, #obs_broadcast_info .footer .exit_entrance_terms, #daily_payout_info .footer .exit_entrance_terms, #electronic_consent_terms .footer .exit_entrance_terms {
background-color: #CCC; }
#entrance_terms {
display: block; }
#entrance_terms_overlay {
position: fixed;
overflow: auto;
display: block;
background-color: black; }
#entrance_terms_overlay #entrance_terms {
min-width: 400px;
top: 20%; }
@media (max-width: 900px) {
#entrance_terms_overlay #entrance_terms {
left: 10%;
right: 10%; } }
@media (max-width: 600px) {
#entrance_terms_overlay #entrance_terms {
left: 5%;
right: 5%; } }
@media (max-height: 800px) {
#entrance_terms_overlay #entrance_terms {
top: 10%; } }
@media (max-height: 600px) {
#entrance_terms_overlay #entrance_terms {
top: 5%; } }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.broadcastTermsModal {
background-color: #FFFFFF;
border-color: #CCCCCC;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
.darkmode .broadcastTermsModal {
background-color: #1A1A1B;
border-color: #474747; }
.broadcastTermsModal .header {
color: #0B5D81; }
.darkmode .broadcastTermsModal .header {
color: #68B5F0; }
.broadcastTermsModal .body {
border-color: #CCCCCC; }
.darkmode .broadcastTermsModal .body {
background-color: #1A1A1B;
color: #B3B3B3;
border-color: #474747; }
.darkmode .broadcastTermsModal .body a {
color: #68B5F0; }
.broadcastTermsModal .acceptLink {
background-color: #F47321;
color: #FFFFFF;
border-radius: 4px;
border-color: #B1B1B1; }
.blackOverlay {
background-color: black; }
.transparentOverlay {
background-color: rgba(0, 0, 0, 0.4); }
.darkmode div#broadcast_terms {
background-color: #2a2c2e;
color: #cbcbcb; }
.darkmode div#broadcast_terms a, .darkmode div#broadcast_terms p strong {
color: #68b5f0; }
.darkmode div#broadcast_terms .footer a {
color: #2a2c2e; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.BioContents .tokenText, #tabs_content_container .tokenText, .psContainer .tokenText {
color: #ffffff; }
.darkmode .BioContents a, .darkmode #tabs_content_container a, .darkmode .psContainer a {
color: #68B5F0; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.darkmode #PhotoVideos:focus {
outline: none; }
#PhotoVideos .link,
#PhotoVideos .showMoreText {
color: #0A5A83; }
.darkmode #PhotoVideos .link, .darkmode #PhotoVideos .showMoreText {
color: #68B5F0; }
#PhotoVideos .createdAt {
color: #555555; }
.darkmode #PhotoVideos .createdAt {
color: #B3B3B3; }
#PhotoVideos .buttonBorder {
border-color: #000000; }
#PhotoVideos .buttonBorder.rgba {
border-color: rgba(0, 0, 0, 0.35); }
#PhotoVideos .buttonBgColor {
background-color: #488839; }
#PhotoVideos .buttonBgColor.gradient {
background: linear-gradient(#57A863 26.52%, #488839 75.14%); }
#PhotoVideos .buttonBgColor.grey {
background-color: #8B8B8B; }
#PhotoVideos .buttonBgColor.grey.gradient {
background: linear-gradient(#A9A9A9 29.7%, #8B8B8B 70.67%); }
#PhotoVideos .lockOverlayBg {
background-color: #333333; }
#PhotoVideos .lockOverlayBg.rgba {
background-color: rgba(0, 0, 0, 0.7); }
#PhotoVideos .previewText {
color: white; }
#PhotoVideos .errorMessage {
color: #000000;
background-color: #ffd0b8;
border-color: #cccccc; }
#PhotoVideos .videoProcessing {
color: red; }
#PhotoVideos .purchasedBadge {
color: #ffffff;
background-color: #6d85b5; }
#PhotoVideos .popoutIcon {
background: url(../../tsdefaultassets/popout.svg?fa74da7e69d7) no-repeat center; }
.darkmode #PhotoVideos .popoutIcon {
background: url(../../tsdefaultassets/popout_darkmode.svg?4ed4b17ed080) no-repeat center; }
.darkmode #PhotoVideos #broadcaster_links a, .darkmode #PhotoVideos #staff_links a {
color: #68B5F0; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.ContestStats .statsContainer {
color: #0c6a93; }
.darkmode .ContestStats .statsContainer {
color: #68B5F0; }
.ContestStats .statText {
color: #0b5d81; }
.darkmode .ContestStats .statText {
color: #68B5F0; }
.ContestStats .statData {
color: #000000; }
.darkmode .ContestStats .statData {
color: #B3B3B3; }
.ContestStats .topRow {
color: #dc5500; }
.ContestStats .otherRows {
color: #0c6a93; }
.darkmode .ContestStats .otherRows {
color: #68B5F0; }
.ContestStats .rowBorder {
border-bottom: 1px solid #cccccc; }
/* Note this is a theme file -- Only color css allowed here! */
#shareTab .urlInput {
border-color: #b1b1b1; }
.darkmode #shareTab .urlInput {
border-color: #4b4c4b;
background-color: #202223;
color: #ffffff; }
.darkmode #shareTab .urlInput:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.FeaturesTab .noneSelected {
color: #808080; }
.darkmode .FeaturesTab .noneSelected {
color: #6C6C78; }
.FeaturesTab .deactivate {
color: #af0000; }
.darkmode .FeaturesTab .deactivate {
color: #FE3D39; }
.FeaturesTab .orText {
color: #dc5500; }
.darkmode .FeaturesTab a {
color: #68B5F0; }
.FeaturesTab .tabSection {
border: 1px solid #EFEFEF; }
.darkmode .FeaturesTab .tabSection {
border: none; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.GameInfoBar {
color: #49494F;
background-color: white; }
.GameInfoBar .gameImage {
border-right: solid 1px #EFEFEF; }
.GameInfoBar .stopStreamingButton {
border: 1px solid #49494F; }
.darkmode .GameInfoBar {
color: #B3B3B3;
background-color: #2A2C2E; }
.darkmode .GameInfoBar a {
color: #68B5F0; }
.darkmode .GameInfoBar .gameImage {
border-right: solid 1px #666666; }
.darkmode .GameInfoBar .stopStreamingButton {
border: 1px solid #B3B3B3; }
.darkmode .OBSInfoSection a {
color: #68B5F0; }
.GameSelection {
background-color: white;
color: #49494F;
border: 1px solid #EFEFEF; }
.GameSelection .searchBar {
border: 1px solid #ACACAC; }
.GameSelection .title {
color: #272F35; }
.GameSelection .selectGameButton {
border: 1px solid #49494F; }
.darkmode .GameSelection {
background-color: #202223;
color: #B3B3B3;
border: 1px solid #2e3137; }
.darkmode .GameSelection .searchBar {
border: 1px solid #2e3137; }
.darkmode .GameSelection .searchBar input[type=text] {
background-color: inherit;
color: inherit; }
.darkmode .GameSelection .title {
color: white; }
.darkmode .GameSelection .selectGameButton {
border: 1px solid #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.BroadcastContestStats .statsContainer {
color: #0c6a93; }
.darkmode .BroadcastContestStats .statsContainer {
color: #68B5F0; }
.BroadcastContestStats .statText {
color: #0b5d81; }
.darkmode .BroadcastContestStats .statText {
color: #68B5F0; }
.BroadcastContestStats .statData {
color: #000000; }
.darkmode .BroadcastContestStats .statData {
color: #B3B3B3; }
.BroadcastContestStats .topRow {
color: #dc5500; }
.BroadcastContestStats .otherRows {
color: #0c6a93; }
.darkmode .BroadcastContestStats .otherRows {
color: #68B5F0; }
.BroadcastContestStats .rowBorder {
border-bottom: 1px solid #cccccc; }
.darkmode .BroadcastContestStats {
color: #B3B3B3; }
.darkmode .TokenStatsTab {
color: #b3b3b3; }
.TokenStatsTab .lightText {
color: #666666; }
.darkmode .TokenStatsTab .lightText {
color: #b3b3b3; }
.TokenStatsTab .tokenStatsTable {
color: #525252; }
.darkmode .TokenStatsTab .tokenStatsTable {
color: #D1D1D1;
border-color: #2A2C2E; }
.TokenStatsTab .tokenStatsTable table, .TokenStatsTab .tokenStatsTable td, .TokenStatsTab .tokenStatsTable th {
border-color: #E0E0E0; }
.darkmode .TokenStatsTab .tokenStatsTable table, .darkmode .TokenStatsTab .tokenStatsTable td, .darkmode .TokenStatsTab .tokenStatsTable th {
border-color: #2A2C2E; }
.TokenStatsTab .tokenStatsTable .rowHeader {
background-color: #E0E0E0; }
.darkmode .TokenStatsTab .tokenStatsTable .rowHeader {
background-color: #2A2C2E; }
.TokenStatsTab .tokenStatsTable .rowOdd {
background-color: #FFFFFF; }
.darkmode .TokenStatsTab .tokenStatsTable .rowOdd {
background-color: #0D0D0E; }
.TokenStatsTab .tokenStatsTable .rowEven {
background-color: #F8F9FA; }
.darkmode .TokenStatsTab .tokenStatsTable .rowEven {
background-color: #202223; }
.TokenStatsTab .tokenStatsTable .transactionMessage {
color: #666666; }
.darkmode .TokenStatsTab .tokenStatsTable .transactionMessage {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.MembershipsTab .membershipLightText {
color: #717171; }
.darkmode .MembershipsTab .membershipLightText {
color: #B3B3B3; }
.MembershipsTab .membershipHeader {
border-bottom-color: #4c4c4c; }
.MembershipsTab .username {
color: #e45900; }
.NewMembershipsTab .newMembershipHeader {
color: #000000;
border-bottom-color: #EFEFEF; }
.darkmode .NewMembershipsTab .newMembershipHeader {
color: #B3B3B3; }
.NewMembershipsTab .tr {
color: #49494F; }
.darkmode .NewMembershipsTab .tr {
color: #b3b3b3; }
.NewMembershipsTab .durationCol, .NewMembershipsTab .sinceStyle, .NewMembershipsTab .cantRenewMessage {
color: #CBCBCB; }
.darkmode .NewMembershipsTab .durationCol, .darkmode .NewMembershipsTab .sinceStyle, .darkmode .NewMembershipsTab .cantRenewMessage {
color: #B3B3B3; }
.NewMembershipsTab .supporterDescriptions {
color: #6C6C78; }
.darkmode .NewMembershipsTab .supporterDescriptions {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.SatisfactionRating {
background-color: #bbbbbb; }
.darkmode .SatisfactionRating {
background-color: #202223; }
.SatisfactionRating.gradient {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #dddddd 60%); }
.darkmode .SatisfactionRating.gradient {
background: linear-gradient(180deg, #474747 29.7%, #2a2c2f 70.67%); }
.SatisfactionRating .satisfactionSpan {
color: #7F7F7F;
text-shadow: 1px 1px 0px #94d2e6; }
.darkmode .SatisfactionRating .satisfactionSpan {
color: #B3B3B3;
text-shadow: 1px 1px 0px #274a62; }
.SatisfactionRating .voteText {
text-shadow: 1px 1px 0px #bababa; }
.darkmode .SatisfactionRating .voteText {
text-shadow: 1px 1px 0px #363636; }
.SatisfactionRating .ratingHistory {
border-color: #0b5d81; }
.SatisfactionRating .highPercent {
color: #298A08; }
.SatisfactionRating .mediumPercent {
color: #af5c01; }
.SatisfactionRating .lowPercent {
color: #af0101; }
.SatisfactionRating .commentDate {
color: #aaaaaa; }
.SatisfactionRating .vote {
border-color: #888888; }
.darkmode .SatisfactionRating .vote {
border-color: #474747; }
.SatisfactionRating .positiveVote {
background-color: #EEEEEE; }
.darkmode .SatisfactionRating .positiveVote {
background-color: #2A2C2F;
color: #B3B3B3; }
.SatisfactionRating .negativeVote {
background-color: #ffe9e5; }
.darkmode .SatisfactionRating .negativeVote {
color: #49494F; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.roomCard {
border-color: #acacac; }
.darkmode .roomCard {
border-color: rgba(100, 100, 100, 0.5); }
.roomCard .cardTitle {
border-bottom-color: #acacac; }
.darkmode .roomCard .cardTitle {
border-bottom-color: #666666; }
.roomCard .tagNewColor {
color: #ffffff;
background-color: #71b404; }
.roomCard li.cams {
background: url(../../images/cam.svg?aee4a41ba664) no-repeat 0 0;
background-size: auto; }
.darkmode .roomCard li.cams {
background: url(../../images/cam_white.svg?282a760aab80) no-repeat 0 0;
background-size: auto; }
.roomCard li.location {
background: url(../../images/location.svg?5021cfc1ff61) no-repeat 0 0;
background-size: auto; }
.darkmode .roomCard li.location {
background: url(../../images/location_white.svg?339f27869359) no-repeat 0 0;
background-size: auto; }
.roomCard .age {
float: left;
color: #49494F;
padding: 2px 6px 0 0;
font: 1em/1.333em 'UbuntuMedium', Arial, Helvetica, sans-serif; }
.darkmode .roomCard .age {
color: #B3B3B3; }
.roomCard .age_gender_container {
float: right;
height: 17px; }
.roomCard .genderf,
.roomCard .genderm,
.roomCard .genderc,
.roomCard .genders,
.roomCard .genderx {
width: 14px;
height: 14px;
display: inline-block;
float: left; }
.roomCard .genderf {
background: url(../../images/ico-female.svg?818c9c4c368f) no-repeat 100% 0;
background-size: contain; }
.roomCard .genderm {
background: url(../../images/ico-male.svg?251793534c73) no-repeat 100% 0;
background-size: contain; }
.roomCard .genderc {
background: url(../../images/ico-couple.svg?b74df354b80e) no-repeat 100% 0;
background-size: contain; }
.roomCard .genders {
background: url(../../images/ico-trans.svg?4984008acb01) no-repeat 100% 0;
background-size: contain; }
.roomCard .genderx {
background: url(../../images/ico-blank.png?c807e40114dc) no-repeat 100% 0;
background-size: contain; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.PmListItem {
border-color: #E0E0E0;
background-color: #ffffff; }
.darkmode .PmListItem, .hasDarkBackground .PmListItem {
color: #CBCBCB; }
.darkmode .PmListItem {
background-color: #202223; }
.PmListItem .replyIconSvg svg {
fill: #49494F; }
.darkmode .PmListItem .replyIconSvg svg, .hasDarkBackground .PmListItem .replyIconSvg svg {
fill: #ffffff; }
.darkmode .PmListItem .messageDiv, .hasDarkBackground .PmListItem .messageDiv {
color: #ffffff; }
.PmListItem.unreadBg {
background-color: #FCEADC; }
.darkmode .PmListItem.unreadBg, .hasDarkBackground .PmListItem.unreadBg {
background-color: #5B4736; }
.PmListItem.selected {
background-color: #E0E0E0; }
.darkmode .PmListItem.selected, .hasDarkBackground .PmListItem.selected {
background-color: #434649; }
.hasDarkBackground .PmListItem {
border-color: #7F7F7F;
background-color: #2A2C2E; }
.PmListItem .avatarBubble .broadcaster {
background-color: #DC5500; }
.PmListItem .avatarBubble .mod {
background-color: #DC0000; }
.PmListItem .avatarBubble .inFanclub {
background-color: #090; }
.PmListItem .avatarBubble .tippedTonsRecently {
background-color: #804baa; }
.PmListItem .avatarBubble .tippedALotRecently {
background-color: #be6aff; }
.PmListItem .avatarBubble .tippedRecently {
background-color: #1E5CFB; }
.PmListItem .avatarBubble .hasTokens {
background-color: #69A; }
.PmListItem .avatarBubble .defaultUser {
background-color: #939393; }
.PmListItem .closeBtnContainer {
fill: #888; }
.PmListItem .closeBtnContainer:hover {
fill: #222; }
.darkmode .PmListItem .closeBtnContainer:hover, .hasDarkBackground .PmListItem .closeBtnContainer:hover {
fill: #D1D1D1; }
.PmListItem .timeString {
color: #6C6C78; }
.darkmode .PmListItem .timeString {
color: #888; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.PMControlBar {
background-color: #ffffff; }
.darkmode .PMControlBar {
background-color: #202223; }
.PMControlBar .backButton {
color: #0471A1; }
.darkmode .PMControlBar .backButton {
color: #68B5F0; }
.SearchBar {
border-color: #BDBDBD; }
.SearchBar .searchUserInput {
color: #000000;
border-color: #BDBDBD; }
.SearchBar .searchUserInput:focus {
border-color: #000000; }
.darkmode .SearchBar .searchUserInput, .hasDarkBackground .SearchBar .searchUserInput {
color: #ffffff; }
.darkmode .SearchBar .searchUserInput:focus, .hasDarkBackground .SearchBar .searchUserInput:focus {
border-color: #ffffff; }
.tab.chat-tab-handle.active {
color: #dc5500; }
.darkmode .tab.chat-tab-handle.active {
color: #68B5F0; }
#ChatTabContainer {
background-color: #fff;
border: 1px solid #acacac; }
.darkmode #ChatTabContainer {
background-color: #202223;
border: 1px solid #474747; }
#ChatTabContainer #tab-row {
background-color: #7f7f7f;
border-bottom: none; }
.darkmode #ChatTabContainer #tab-row {
background-color: #1a1a1c; }
#ChatTabContainer .refreshUsersLink {
color: #0a5a83; }
.darkmode #ChatTabContainer .refreshUsersLink {
color: #68B5F0; }
#ChatTabContainer .notesIcon {
background: url(../../tsdefaultassets/notes_light.svg?9743cb4941b2) no-repeat center; }
.darkmode #ChatTabContainer .notesIcon {
background: url(../../tsdefaultassets/notes_dm_light.svg?5f4262c591e5) no-repeat center; }
#ChatTabContainer .notesIcon.hover {
background: url(../../tsdefaultassets/notes.svg?83c71ae8f502) no-repeat center; }
.darkmode #ChatTabContainer .notesIcon.hover {
background: url(../../tsdefaultassets/notes_dm.svg?aebbc4d049ee) no-repeat center; }
.noteIconSvg.roomNoticeMsg svg, .noteIconSvg.regMsg svg, .noteIconSvg.roomNoticeMsg svg, .noteIconSvg.regMsg svg {
stroke: #6C6C78;
fill: transparent !important;
color: transparent !important; }
.noteIconSvg.roomNoticeMsg svg:hover, .noteIconSvg.regMsg svg:hover, .noteIconSvg.roomNoticeMsg svg:hover, .noteIconSvg.regMsg svg:hover {
stroke: #272F35; }
.isTip .noteIconSvg.roomNoticeMsg svg, .isTip .noteIconSvg.roomNoticeMsg svg {
stroke: #6C6C78 !important;
fill: transparent !important;
color: transparent !important; }
.isTip .noteIconSvg.roomNoticeMsg svg:hover, .isTip .noteIconSvg.roomNoticeMsg svg:hover {
stroke: #272F35 !important; }
.darkmode .noteIconSvg.roomNoticeMsg svg, .darkmode .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg, .darkmode .noteIconSvg.roomNoticeMsg svg, .darkmode .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg svg, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg {
stroke: #DDD;
fill: transparent !important;
color: transparent !important; }
.darkmode .noteIconSvg.roomNoticeMsg svg:hover, .darkmode .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover, .darkmode .noteIconSvg.roomNoticeMsg svg:hover, .darkmode .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg svg:hover, .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover {
stroke: #FFF; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.updatesTabContents {
background-color: #ffffff; }
.darkmode .updatesTabContents {
background-color: #202223; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.twitterUpdateRow, .userUpdatesPanel {
background-color: #ffe5be;
border-color: #dabb95; }
.darkmode .twitterUpdateRow, .darkmode .userUpdatesPanel {
background-color: #ffe5be;
border-color: #d9bb97; }
.twitterUpdateRow.uipExp, .userUpdatesPanel.uipExp {
background-color: #fff;
border-color: #F0F0F0; }
.darkmode .twitterUpdateRow.uipExp, .darkmode .userUpdatesPanel.uipExp {
background-color: #2a2c2e;
border-color: #1a1a1b; }
.twitterUpdateRow.seen, .userUpdatesPanel.seen {
background-color: #FCEADC;
border-color: #EFEFEF; }
.twitterUpdateRow.seen.uipExp, .userUpdatesPanel.seen.uipExp {
background-color: #F8F9FA; }
.twitterUpdateRow .contentSection, .userUpdatesPanel .contentSection {
color: #494949; }
.twitterUpdateRow .contentSection .tweetLink, .userUpdatesPanel .contentSection .tweetLink {
color: #e45900; }
.twitterUpdateRow .timeSince, .userUpdatesPanel .timeSince {
color: #7f7f7f; }
.darkmode .twitterUpdateRow .timeSince, .darkmode .userUpdatesPanel .timeSince {
color: #6c6c78; }
.twitterUpdateRow .twitterLink, .twitterUpdateRow .tweetLink, .userUpdatesPanel .twitterLink, .userUpdatesPanel .tweetLink {
color: #0a5a83; }
.darkmode .twitterUpdateRow .twitterLink, .darkmode .twitterUpdateRow .tweetLink, .darkmode .userUpdatesPanel .twitterLink, .darkmode .userUpdatesPanel .tweetLink {
color: #68B5F0; }
.twitterUpdateRow.seen, .userUpdatesPanel.seen {
background-color: #efefef;
border-color: #c1c1c1; }
.darkmode .twitterUpdateRow.seen, .darkmode .userUpdatesPanel.seen {
background-color: #2a2c2e;
border-color: #1a1a1b; }
.darkmode .twitterUpdateRow.seen .contentSection, .darkmode .userUpdatesPanel.seen .contentSection {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
#UserUpdatesPanel {
background-color: #ffffff;
border-color: #2C6990; }
.darkmode #UserUpdatesPanel {
background-color: #202223;
border-color: #333639;
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5), 8px 0px 8px -8px rgba(0, 0, 0, 0.5), -8px 0px 8px -8px rgba(0, 0, 0, 0.5); }
#UserUpdatesPanel #updates-tab {
color: #dc5500; }
#UserUpdatesPanel .tab.active {
color: #dc5500; }
.darkmode #UserUpdatesPanel .tab.active {
color: #68B5F0; }
#UserUpdatesPanel #tab-row {
background-color: #747474; }
.darkmode #UserUpdatesPanel #tab-row {
background-color: #474747; }
#UserUpdatesPanel .feedbackLink {
color: #0a5a83; }
.darkmode #UserUpdatesPanel .feedbackLink {
color: #68B5F0; }
/* Note this is a theme file -- Only color css allowed here! */
#ChatTabContents .message-list {
background-color: #fff;
color: #494949; }
.darkmode #ChatTabContents .message-list {
background-color: transparent;
color: #dedede; }
#ChatTabContents .message-list .msg-text {
color: #494949; }
.darkmode #ChatTabContents .message-list .msg-text {
color: #dedede; }
#ChatTabContents .message-list .msg-text .roomNotice {
color: #494949; }
.darkmode #ChatTabContents .message-list .msg-text .roomNotice {
color: #dedede; }
#ChatTabContents .chat-input-div .send-button,
#ChatTabContents .inputDiv .send-button,
#SplitModeChatSettingsTab .chat-input-div .send-button,
#SplitModeChatSettingsTab .inputDiv .send-button,
#UserListTab .chat-input-div .send-button,
#UserListTab .inputDiv .send-button,
#FVChatTabContents .chat-input-div .send-button,
#FVChatTabContents .inputDiv .send-button,
#FVChatSettingsTab .chat-input-div .send-button,
#FVChatSettingsTab .inputDiv .send-button {
color: #ffffff;
background-color: #eb3404;
cursor: pointer;
text-shadow: #bc2b1d 1px 1px 0; }
#ChatTabContents .chat-input-div .send-button.disabled,
#ChatTabContents .inputDiv .send-button.disabled,
#SplitModeChatSettingsTab .chat-input-div .send-button.disabled,
#SplitModeChatSettingsTab .inputDiv .send-button.disabled,
#UserListTab .chat-input-div .send-button.disabled,
#UserListTab .inputDiv .send-button.disabled,
#FVChatTabContents .chat-input-div .send-button.disabled,
#FVChatTabContents .inputDiv .send-button.disabled,
#FVChatSettingsTab .chat-input-div .send-button.disabled,
#FVChatSettingsTab .inputDiv .send-button.disabled {
background-color: grey;
cursor: wait;
text-shadow: none; }
#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
background-color: #ffffff; }
.darkmode #FVChatTabContents .chat-input-div, .darkmode #FVChatSettingsTab .chat-input-div {
background-color: #474747; }
#FVChatTabContents .chat-input-div .chat-input-field,
#FVChatSettingsTab .chat-input-div .chat-input-field {
color: #000000; }
.darkmode #FVChatTabContents .chat-input-div .chat-input-field, .darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
background-color: #474747;
color: #ffffff; }
#FVChatTabContents .chat-input-div .send-button,
#FVChatSettingsTab .chat-input-div .send-button {
color: #ffffff;
background-color: #eb3404; }
#FVChatTabContents .chat-input-div .send-button.send-button-gradient,
#FVChatSettingsTab .chat-input-div .send-button.send-button-gradient {
background: linear-gradient(#f66d51, #eb3404); }
#FVChatTabContents .chat-input-div .tip-button,
#FVChatSettingsTab .chat-input-div .tip-button {
color: #ffffff;
background-color: #53843a; }
#FVChatTabContents .chat-input-div .tip-button.tip-button-gradient,
#FVChatSettingsTab .chat-input-div .tip-button.tip-button-gradient {
background: linear-gradient(#87c667, #53843a); }
#FVChatTabContents .msg-text,
#FVChatSettingsTab .msg-text {
color: #FFFFFF; }
.darkmode #FVChatTabContents .msg-text, .darkmode #FVChatSettingsTab .msg-text {
color: #dedede; }
.msg-link {
color: #0a5a83; }
.darkmode .msg-link, .hasDarkBackground .msg-link {
color: #85FFFF; }
.bright-background .msg-link {
color: #0a5a83; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
#SplitModeChatSettingsTab .chat-settings-input, #FVChatSettingsTab .chat-settings-input {
border-color: #b1b1b1; }
.darkmode #SplitModeChatSettingsTab .chat-settings-input::placeholder, .darkmode #FVChatSettingsTab .chat-settings-input::placeholder {
color: #ddd; }
.darkmode #SplitModeChatSettingsTab .chat-settings-input:focus, .darkmode #FVChatSettingsTab .chat-settings-input:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
.darkmode #SplitModeChatSettingsTab .chat-settings-select, .darkmode #FVChatSettingsTab .chat-settings-select {
background-color: #000000;
color: #ddd; }
#SplitModeChatSettingsTab .link {
color: #0a5a83; }
.darkmode #SplitModeChatSettingsTab .link {
color: #68B5F0; }
#FVChatSettingsTab {
color: #ffffff; }
#FVChatSettingsTab .manage-ignored-link {
color: #85ffff; }
.darkmode #FVChatSettingsTab .manage-ignored-link {
color: #68B5F0; }
#FVChatSettingsTab .chat-input-div {
background-color: #ffffff; }
.darkmode #FVChatSettingsTab .chat-input-div {
background-color: #474747; }
.darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
background-color: #474747;
color: #ffffff; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.BaseTabsContainer .inputDiv {
background-color: #fff; }
.darkmode .BaseTabsContainer .inputDiv {
background-color: #202223; }
.BaseTabsContainer .inputDiv .msg-input {
background-color: #fff;
color: #000; }
.darkmode .BaseTabsContainer .inputDiv .msg-input {
background-color: #202223;
color: #dedede; }
#tab-row {
background-color: #7f7f7f;
border-bottom: 2px solid #7f7f7f; }
.darkmode #tab-row {
background-color: #1a1a1c;
border-bottom: 2px solid #1a1a1c; }
.tab {
background-color: #c9c9c9; }
.darkmode .tab {
background-color: #323639; }
.tab:hover {
background-color: #fff; }
.darkmode .tab:hover {
background-color: #202223; }
.tab.active {
background-color: #fff;
color: #0d5d81;
cursor: default; }
.darkmode .tab.active {
background-color: #202223;
color: #68B5F0; }
.tab.collapsed {
background-color: #fff; }
.darkmode .tab.collapsed {
background-color: #202223; }
.tab.collapsed:hover {
background-color: #c9c9c9; }
.darkmode .tab.collapsed:hover {
background-color: #323639; }
.chat-tabs-dropdown-border {
border-color: #c9c9c9; }
.darkmode .chat-tabs-dropdown-border {
border-color: #666666; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.notificationsModal {
background-color: #e0e0e0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75); }
.darkmode .notificationsModal {
background-color: #333639;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
.notificationsModal .upArrow {
color: #e0e0e0;
text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.65); }
.darkmode .notificationsModal .upArrow {
color: #333639;
text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5); }
.notificationsModal .upArrowCover {
color: #e0e0e0; }
.darkmode .notificationsModal .upArrowCover {
color: #333639; }
.notificationsModal .title {
color: #0c6a93; }
.darkmode .notificationsModal .title {
color: #68B5F0; }
.notificationsModal .confirmButton {
background-color: #0c6a93;
color: #eeeeee; }
.darkmode .notificationsModal .confirmButton {
background-color: #68b5f0;
color: #ffffff; }
.notificationsModal .confirmButton:hover {
background-color: #0c6a93cc; }
.darkmode .notificationsModal .confirmButton:hover {
background-color: #3e83a1; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.followButton {
color: #ffffff;
background-color: #ff7002;
text-shadow: #f18112 1px 1px 0px; }
.followButton.gradient {
background: linear-gradient(180deg, #FD9742 0%, #FD9D43 44.27%, #FD943C 51.25%, #FC7E2C 58.99%, #FD7023 100%); }
.darkmode .followButton.gradient {
background: linear-gradient(180deg, #FD9742 0%, #FD9D43 44.27%, #FD943C 51.25%, #FC7E2C 58.99%, #FD7023 100%); }
.unfollowButton {
color: #ffffff;
background-color: #8b8b8b;
text-shadow: #383838 1px 1px 0px;
border-right-color: #474747; }
.darkmode .unfollowButton {
color: #888888;
background-color: #2A2C2F;
text-shadow: 1px 1px 0px #000000;
border-right-color: #000000; }
.unfollowButton.gradient {
background: linear-gradient(180deg, #B2B2B2 0%, #B6B6B6 51.06%, #969696 51.25%, #969696 100%); }
.darkmode .unfollowButton.gradient {
background: linear-gradient(180deg, #474747 29.7%, #2A2C2F 70.67%); }
.notificationBtnMenu {
background-color: #fff;
color: #49494F; }
.darkmode .notificationBtnMenu {
background-color: #2a2c2e;
color: #B3B3B3; }
.notificationBtnMenu .notification-item {
border-color: #ACACAC;
color: #49494F; }
.darkmode .notificationBtnMenu .notification-item {
border-color: #474747;
color: #B3B3B3; }
.notificationBtnMenu .notification-item:hover {
background-color: #fde3d3; }
.darkmode .notificationBtnMenu .notification-item:hover {
background-color: #202223; }
.notificationBtnMenu .title {
background-color: #fafafa;
border-color: #ACACAC; }
.darkmode .notificationBtnMenu .title {
background-color: #202223;
border-color: #474747; }
.notificationBtnMenu .bookend {
border-color: #ACACAC; }
.darkmode .notificationBtnMenu .bookend {
border-color: #474747; }
.FollowNotificationButton {
background-color: #8b8b8b; }
.FollowNotificationButton.gradient {
background: linear-gradient(180deg, #a9a9a9 0%, #adadad 50%, #8b8b8b 60%); }
.darkmode .FollowNotificationButton.gradient {
background: linear-gradient(180deg, #474747 29.7%, #2A2C2F 70.67%); }
.darkmode .FollowNotificationButton {
background-color: #2A2C2F; }
.notification-btn-icon.all {
background-image: url(../../images/follower/alarm-bell-ring-1.svg?e0f4045214c5); }
.darkmode .notification-btn-icon.all, .notification-btn-icon.all.static {
background-image: url(../../images/follower/alarm-bell-ring-1-white.svg?94c2bd6bf819); }
.notification-btn-icon.smart {
background-image: url(../../images/follower/alarm-bell-1.svg?281ea1ddd63e); }
.darkmode .notification-btn-icon.smart, .notification-btn-icon.smart.static {
background-image: url(../../images/follower/alarm-bell-1-white.svg?512f5994fa74); }
.notification-btn-icon.none {
background-image: url(../../images/follower/alarm-bell-off.svg?69c6917c7525); }
.darkmode .notification-btn-icon.none, .notification-btn-icon.none.static {
background-image: url(../../images/follower/alarm-bell-off-white.svg?cc61a12667d8); }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
#satisfactionScore.enabled {
background-color: #ffffff;
color: #0a5a83;
text-shadow: #94d2e6 1px 1px 0px; }
.darkmode #satisfactionScore.enabled {
background-color: #2a2c2f;
color: #68B5F0;
text-shadow: 1px 1px 0px #274a62; }
#satisfactionScore.enabled.gradient {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #dddddd 60%); }
.darkmode #satisfactionScore.enabled.gradient {
background: linear-gradient(180deg, #474747 29.7%, #2a2c2f 70.67%); }
#satisfactionScore.disabled {
background-color: #bbbbbb;
color: #777777;
text-shadow: #bababa 1px 1px 0px; }
.darkmode #satisfactionScore.disabled {
background-color: #202223;
color: #747474;
text-shadow: 1px 1px 0px #363636; }
#satisfactionScore.disabled.gradient {
background: linear-gradient(180deg, #bbbbbb 0%, #bbbbbb 50%, #aaaaaa 60%); }
.darkmode #satisfactionScore.disabled.gradient {
background: linear-gradient(180deg, #2A2C2F 29.7%, #1A1A1A 70.67%); }
#satisfactionScore .highPercent {
color: #298A08; }
#satisfactionScore .mediumPercent {
color: #af5c01; }
#satisfactionScore .lowPercent {
color: #af0101; }
#satisfactionComment {
background-color: #ffffff;
border-color: #0b5d81;
color: #777777; }
.darkmode #satisfactionComment {
background-color: #000000;
border-color: #202223;
color: #B3B3B3; }
#satisfactionComment .divot .divotBorder {
border-bottom-color: #0b5d81; }
.darkmode #satisfactionComment .divot .divotBorder {
border-bottom-color: #202223; }
#satisfactionComment .divot .divotBackground {
border-bottom-color: #e0e0e0; }
.darkmode #satisfactionComment .divot .divotBackground {
border-bottom-color: #333639; }
#satisfactionComment .header {
color: #0b5d81;
background-color: #e0e0e0; }
.darkmode #satisfactionComment .header {
color: #68B5F0;
background-color: #333639; }
#satisfactionComment .textBox {
border-color: #777777;
color: #000000; }
.darkmode #satisfactionComment .textBox {
border-color: #4b4c4b;
color: #ffffff;
background-color: #202223; }
.darkmode #satisfactionComment .textBox:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
#satisfactionComment .submitBtn {
color: #ffffff;
background-color: #ff9735; }
#satisfactionComment .submitBtn.gradient {
background: linear-gradient(#ff9735 0%, #ff9e36 50%, #ff7002 60%); }
.darkmode #satisfactionComment .submitBtn:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
#satisfactionComment .submittedMsg {
color: #777777; }
.darkmode #satisfactionComment .submittedMsg {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.gender-tab.active a, .gender-tab a.active, a.gender-tab.active, div.gender-tab.active,
.gender-tab a:hover, a.gender-tab:hover, div.gender-tab:hover, .followed-tab.active, .followed-tab:hover,
#main .top-section .sub-nav li.active a, #main .top-section .sub-nav li a.active,
#main .top-section .sub-nav li a:hover {
border: 1px solid #8bb3da;
background: #fff;
color: #dc5500;
border-bottom-color: transparent; }
.darkmode .gender-tab.active a, .darkmode .gender-tab a.active, .darkmode a.gender-tab.active, .darkmode div.gender-tab.active, .darkmode .gender-tab a:hover, .darkmode a.gender-tab:hover, .darkmode div.gender-tab:hover, .darkmode .followed-tab.active, .darkmode .followed-tab:hover, .darkmode #main .top-section .sub-nav li.active a, .darkmode #main .top-section .sub-nav li a.active, .darkmode #main .top-section .sub-nav li a:hover {
color: #68b5f0;
border: 1px solid #3d3d3d;
background-color: #000;
border-bottom-color: transparent; }
.gender-tab.collapsed, .gender-tab.collapsed a {
background: transparent !important;
border: none !important;
border-bottom: 1px solid transparent !important; }
.darkmode .gender-tab.collapsed {
background-color: transparent; }
.gender-tab a, a.gender-tab, div.gender-tab,
#main .top-section .sub-nav li a {
color: #5e81a4;
background: #dde9f5;
border-color: #8bb3da; }
.darkmode .gender-tab a, .darkmode a.gender-tab, .darkmode div.gender-tab, .darkmode #main .top-section .sub-nav li a {
background-color: transparent;
color: #DEDEDE;
border-color: #666; }
.gender-tab a:hover, a.gender-tab:hover, div.gender-tab:hover,
#main .top-section .sub-nav li a:hover {
cursor: pointer; }
.followedContainer a {
background-color: transparent; }
.darkmode #main .top-section {
background: #2a2c2f;
border-bottom-color: #666; }
#main .top-section #search_icon .search_svg {
width: 12px;
height: 12px;
display: inline-block;
position: relative;
top: 1px;
background-image: url(../../images/search.svg?45db19d3993d); }
.darkmode #main .top-section #search_icon .search_svg {
background-image: url(../../images/search_dm.svg?3492defa25bc); }
.darkmode #main .top-section #SearchInput input.search_input {
background-color: #202223;
color: #dedede; }
#main .content .searching-overlay {
background-color: #f1f2f2; }
.darkmode #main .content .searching-overlay {
background-color: #2a2c2e; }
#roomTabs {
border-color: #acacac;
background-color: #ffffff; }
.darkmode #roomTabs {
border-color: #3d3d3d;
background-color: #222222; }
#roomTabs .tabBar {
background-color: #7f7f7f; }
.darkmode #roomTabs .tabBar {
background-color: #1a1a1a; }
#roomTabs .link {
color: #0b5d81; }
.darkmode #roomTabs .link {
color: #68B5F0; }
#roomTabs .label {
color: #0a5a83; }
.darkmode #roomTabs .label {
color: #B3B3B3; }
#roomTabs .contentText {
color: #000000; }
.darkmode #roomTabs .contentText {
color: #B3B3B3; }
#roomTabs .separator {
color: #222222; }
.darkmode #roomTabs .separator {
color: #b3b3b3; }
#roomTabs .fanclubMessage {
color: #494949; }
.darkmode #roomTabs .fanclubMessage {
color: #B3B3B3; }
#roomTabs .psContainer {
color: #0a5a83; }
.darkmode #roomTabs .psContainer {
color: #68B5F0; }
#roomTabs .previewBorder {
color: #cccccc; }
.darkmode #roomTabs .previewBorder {
color: #2A2C2E; }
.tabLink {
color: #4c4c4c;
background-color: #c9c9c9; }
.darkmode .tabLink {
color: #B3B3B3;
background-color: #343638; }
.tabLink.tabOpen, .tabLink.active {
color: #dc5500;
background-color: #ffffff; }
.darkmode .tabLink.tabOpen, .darkmode .tabLink.active {
color: #68B5F0;
background-color: #202223; }
.tabLink.tabCollapsed {
background-color: #ffffff; }
.darkmode .tabLink.tabCollapsed {
background-color: #202223; }
.room-tabs-dropdown-border {
border-color: #7f7f7f; }
.darkmode .room-tabs-dropdown-border {
border-color: #666666; }
/* Note this is a theme file -- Only color css allowed here! */
form .field {
border-color: #b1b1b1;
background-color: #ffffff; }
.darkmode form .field {
border-color: #4b4c4b;
background-color: #202223;
color: #ffffff; }
.darkmode form .field:focus {
outline: none;
box-shadow: 0 0 0 2px #68b5f0; }
form .fieldError {
color: #d50000; }
.darkmode form .fieldError {
color: #d50000; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.standardEmoticonsModal {
background-color: #ffffff;
border-color: #0b5d81; }
.darkmode .standardEmoticonsModal {
background-color: #000000;
border-color: #202223; }
.standardEmoticonsModal .emoticonsHeader {
color: #0b5d81;
background-color: #e0e0e0; }
.darkmode .standardEmoticonsModal .emoticonsHeader {
color: #68B5F0;
background-color: #333639; }
.standardEmoticonsModal .uploadLink {
color: #dc5500; }
.standardEmoticonsModal .divot .divotBorder {
border-top-color: #0b5d81; }
.darkmode .standardEmoticonsModal .divot .divotBorder {
border-top-color: #202223; }
.standardEmoticonsModal .divot .divotBackground {
border-top-color: #ffffff; }
.darkmode .standardEmoticonsModal .divot .divotBackground {
border-top-color: #000000; }
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.chatReport {
color: #454545; }
.darkmode .chatReport {
color: #B3B3B3; }
.chatReport .headerDiv {
color: #005b85; }
.darkmode .chatReport .headerDiv {
color: #68B5F0; }
.chatReport .submitButton {
color: #fff;
background-color: #eb3404; }
.chatReport .cancelButton {
color: #fff;
background-color: #383838; }
.chatReport .closeReportLink {
color: #0a5a83; }
.darkmode .chatReport .closeReportLink {
color: #68B5F0; }
.chatReport .ignoreUserLink {
color: #0a5a83; }
.darkmode .chatReport .ignoreUserLink {
color: #68B5F0; }
.chatReport .ignoreUserLink.disabled {
color: #454545; }
.darkmode .chatReport .ignoreUserLink.disabled {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.emoticonPreviewModal {
background-color: #ffffff;
color: #494949; }
.darkmode .emoticonPreviewModal {
background-color: #000;
color: #b3b3b3; }
.emoticonPreviewModal .closeButton {
background: url(../../tsdefaultassets/close.svg?9a87e6f7a4de) no-repeat center center;
background-size: cover; }
.darkmode .emoticonPreviewModal .closeButton {
background: url(../../tsdefaultassets/close-white.svg?b0389426f1cb) no-repeat center center;
background-size: cover; }
.emoticonPreviewModal .cancelButton {
color: #fff;
background-color: #898989; }
.emoticonPreviewModal .reportButton {
color: #fff;
background-color: #ef6352; }
.darkmode .emoticonPreviewModal .categorySelect {
background-color: #000000;
color: #B3B3B3; }
.emoticonPreviewModal .hrefColor {
color: #0A5B83; }
.darkmode .emoticonPreviewModal .hrefColor {
color: #68B5F0; }
.emoticonImage img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: inline-block; }
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.chatReport {
color: #454545; }
.darkmode .chatReport {
color: #B3B3B3; }
.chatReport .headerDiv {
color: #005b85; }
.darkmode .chatReport .headerDiv {
color: #68B5F0; }
.chatReport .submitButton {
color: #fff;
background-color: #eb3404; }
.chatReport .cancelButton {
color: #fff;
background-color: #383838; }
.chatReport .closeReportLink {
color: #0a5a83; }
.darkmode .chatReport .closeReportLink {
color: #68B5F0; }
.chatReport .ignoreUserLink {
color: #0a5a83; }
.darkmode .chatReport .ignoreUserLink {
color: #68B5F0; }
.chatReport .ignoreUserLink.disabled {
color: #454545; }
.darkmode .chatReport .ignoreUserLink.disabled {
color: #B3B3B3; }
/*
* Before using one these variables, check if a mixin could be used. If
* the lightmode color and darkmode color in the design both match the colors
* here, then we can use a mixin from _color_mixins.scss instead. May need to
* build the mixin first, following the example of existing ones.
*
* (Darkmode colors not necessarily finalized, should check back later with the
* figma to confirm them)
*/
.userContextMenu .menuContents {
background-color: transparent; }
.userContextMenu .menu {
background-color: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
color: #000; }
.darkmode .userContextMenu .menu {
background-color: #303030;
border: 1px solid #000;
color: #EDEDED; }
.userContextMenu .menu .rowDivider {
background-color: #f0f0f0; }
.darkmode .userContextMenu .menu .rowDivider {
background-color: #222; }
.userContextMenu .header {
background-color: #f9f9f9;
color: #000; }
.darkmode .userContextMenu .header {
background-color: #262626;
color: #EDEDED; }
.userContextMenu .age {
color: #000; }
.darkmode .userContextMenu .age {
color: #EDEDED; }
.userContextMenu .userLabel .subLabel {
color: #49494F; }
.darkmode .userContextMenu .userLabel .subLabel {
color: #EDEDED; }
.userContextMenu .links {
color: #49494F;
background-color: transparent; }
.darkmode .userContextMenu .links {
color: #EDEDED; }
.userContextMenu .links:hover {
background-color: #F9E4D5; }
.darkmode .userContextMenu .links:hover {
background-color: #563E2E; }
.broadcaster {
color: #DC5500; }
.broadcaster.mentionHl {
color: #fff;
background-color: #DC5500; }
.mod {
color: #DC0000; }
.mod.mentionHl {
color: #fff;
background-color: #DC0000; }
.inFanclub {
color: #090; }
.inFanclub.mentionHl {
color: #fff;
background-color: #090; }
.tippedTonsRecently {
color: #804baa; }
.tippedTonsRecently.mentionHl {
color: #fff;
background-color: #804baa; }
.tippedALotRecently {
color: #be6aff; }
.tippedALotRecently.mentionHl {
color: #fff;
background-color: #be6aff; }
.tippedRecently {
color: #1E5CFB; }
.tippedRecently.mentionHl {
color: #fff;
background-color: #1E5CFB; }
.hasTokens {
color: #69A; }
.hasTokens.mentionHl {
color: #fff;
background-color: #69A; }
.defaultUser {
color: #939393; }
.defaultUser.mentionHl {
color: #fff;
background-color: #939393; }
form .button, button.ajax_button {
display: block;
padding: 0px 30px 2px 15px;
margin: 15px 0px 0px 137px;
width: auto;
height: 28px;
border: 1px solid #b1b1b1;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #FFF;
font: 1.16em/1.0em 'UbuntuMedium', Arial, Helvetica, sans-serif;
background: #f47321 url(../../images/arrow-white-v2.gif?75bde39356c3) no-repeat right 50%; }
form .button:hover, button.ajax_button:hover {
background-color: #FF6300;
text-decoration: underline;
cursor: pointer; }
form .button:disabled, button.ajax_button:disabled, form .disabled.button, button.disabled.ajax_button {
background-color: #bababa;
cursor: default; }
form .button:disabled:hover, button.ajax_button:disabled:hover, form .disabled.button:hover, button.disabled.ajax_button:hover {
text-decoraton: none; }
.search_autocomplete::-ms-clear {
display: none; }