body{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.42857143;
    font-weight:700;
    font-size: 17px;
    /* text-shadow: 1px 0 1px #fee357, 0 1px 1px #fee357, -1px 0 1px #fee357, 0 -1px 1px #fee357; */
    color: #7b1f60;
    background: url(../bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
form{margin-bottom:0;padding:10px 30px}
.center{text-align:center}
.wrap{width: 830px;height: auto;margin:20px auto;border-radius: 25px;background: #fff;box-shadow: 0 0 0 10px #230c3aa8;padding:15px}
.copy,.copy a{text-align:center;color:#888!important;text-shadow:1px 1px 1px #fff;font-size:11px}
.copy a{color:#4F6FAD}
.title{font-size:16px;text-align:center;padding:10px;margin:0}
.form-control{background:#7b1f60;box-shadow: 0 0 4px 4px #fbc82f;border: 2px solid #fbc82f;color: #fbc82f;border-radius:20px;outline:none;margin-bottom: 6px;margin-right: 5px;}
textarea.form-control{
    resize: vertical;
    min-height: 100px;
    max-height: 300px!important;
}
.form-control:focus{border-color:#fff864;outline:0;-webkit-box-shadow:inset 0 1px 1px #000 0 0 8px #000;box-shadow:inset 0 1px 1px #000 0 0 8px #000}
.form-control::placeholder{color:#fbc82f}
label{color: #7b1f60;text-shadow:none}
.h4,h4{font-weight:700;font-size:30px;text-shadow: 1px 0 1px #fee357, 0 1px 1px #fee357, -1px 0 1px #fee357, 0 -1px 1px #fee357;color: #7b1f60;}
h3{margin:0}
h2{font-size:14px;color:#888;padding-left:30px}
button{padding:5px 15px;cursor:pointer}
.error{font-weight:700;text-shadow: 1px 0 1px #fee357, 0 1px 1px #fee357, -1px 0 1px #fee357, 0 -1px 1px #fee357;color: #7b1f60;}
input[type="number"]{display:inline;width:130px}
hr{border-top: 1px solid #7b1f60;}
.btn{text-shadow:none}
.custom-btn {
  width: auto;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  padding: 9px 15px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.btnss {
  border: none;
  background: rgb(123 31 96);
  background: linear-gradient(0deg, rgb(123 31 96) 0%, rgba(234,76,137,1) 100%);
  color: #fff;
  overflow: hidden;
}
.btnss:hover {
    text-decoration: none;
    color: #fff;
}
.btnss:hover{
  opacity: .7;
}
.btnss:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
.answer{margin-top:5px;font-size:16px;padding:5px 0}
.logout{float:right;padding:10px;font-size:14px}
.clock{width:50px;text-align:center;height:35px;padding-top:15px;border-radius:50%;border:5px solid #aaa;font-size:20px;margin:10px auto}
.main{border-bottom:1px solid #aaa}
.top{width:90%;margin:0 auto}
.top input{width:50px;padding:0;border-radius:0;display:inline-block;text-align:center}
.top td{border-top:1px dashed #aaa}
.questions{border-collapse:collapse;width:95%;font-size:14px;border:1px solid #bbb;margin:0 auto}
.questions th,.questions td{padding:8px}
.questions th{background:#bbb;color:#fff}
.questions tr:nth-child(even){background-color:#f2f2f2}
.plus,.minus{position:relative;bottom:-3px;cursor:pointer}
.remove,.go{cursor:pointer}
input.between_time{width:60px;display:inline-block!important}
.small-btn{padding:2px 5px;display:inline-block;margin-left:10px}
.question{display:inline-block}
form.hint{margin:10px 0 15px}
.count{display:inline-block;padding:3px 10px;font-weight:700}
.info{color:red;display:none}
.table-bordered a{
    color: #ff7272;
}
table{border: 1px solid #fbc82f;background: #7b1f60;text-shadow: none;box-shadow: 0px 1px 4px 4px #f5bd30;color: #fde24d;}
th{
    background: #fbc82f;
    padding: 2px 8px;
    border-top: 1px solid #fbc82f;
    border-right: 1px solid #fbc82f;
    text-align: center;
    font-weight: 900;
    color: #7b1f60;
}
td{padding:2px 8px;border-top: 1px solid #f4c84b;border-right: 1px solid #f4c84b;background: #7b1f60;}
.wdt{margin: 20px;padding:14px;background: transparent;box-shadow: none;border: 0;}
.wdt td{background: transparent;color:#013e01;border: 0;font-size:18px;font-family:'Kurale',serif}
.wdt .race-btn, .wdt .inactive-btn{
    display: inline-block;
    border-radius: 50px;
    margin: 5px;
    text-decoration: none;
    line-height: 20px;
    color: #7b1f60!important;
    cursor: pointer;
    font-size: 18px!important;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #fbc82f;
    background: linear-gradient(to bottom, #f6d05d, #fbc82f);
}
.wdt .white{
    background: #f8ce51;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 18px;
    border-radius: 11px;
    color: #7b1f60;
    box-shadow: inset 0 2px 10px #7b1f60;
    text-decoration: none;
    }
.wdt form{
    padding: 0;
}


#header {
    width: max-content;
    height: 95px;
    margin-bottom: 135px;
    background: #ffffff;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 0 0 10px #230c3aa8;
}


#h_t_l {
    max-width: 290px;
    float: left;
    padding: 5px 0 0 23px;
}
#h_t_r {
    width: 675px;
    
    float: right;
}
#hnav {
    height: 30px;
    padding: 12px 0 0 0;
    overflow: hidden;
}
#h_playing {
    width: 625px;
    height: 26px;
    padding: 0 0 0 40px;
    color: #000;
    text-shadow: 0 0 0px #000;
    background: url() no-repeat 0 0;
    background-size: 5%;
    text-align: left;
    -webkit-line-clamp: 2; /*  */
    display: -webkit-box; /*  */
    -webkit-box-orient: vertical; /* */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nav {height: 40px;padding:12px 0 0 0;overflow:hidden;}
        #nav li {display:block;float:left;padding: 0 10px;font-family:Trebuchet MS;font-size:17px;line-height: 19px;}
        #nav li:first-child {padding-left:0;background:0;}
        #nav li a {color:#7b1f60;text-decoration:none;text-shadow: none;}
        #nav li a:hover {text-shadow:0 0 5px #fff;}
        #nav li a:hover {color: #eb8c2e!important;}
        #nav li:not(:last-child) {border-right: 2px solid #7b1f60;}
        #nav .current a{color: #eb8c2e!important;}
        #hnav_sub {overflow:hidden; padding:4px 15px 5px 0; float:left;}
        #hnav_sub li {display:block; float:left; padding:0 0 0 15px;}
        #hnav_sub li a {color:#325692; text-decoration:none;}
        #hnav_sub li a:hover {text-decoration:underline;}
.box_btns {}
.box_btns .ok{
    display: inline-block;
    margin: 0px 0 -1px;
    padding: 3px 10px;
    font-weight: 600;
    text-align: center;
    color: #fbc82f;
    background: #7b1f60;
    border-radius: 5px;
    text-shadow: none;
    text-decoration: none;
}
.box_btns .ok:hover{
    cursor: pointer;
    color: #7b1f60;
    background: #fbc82f;
}
.box_btns .ok_active{color: #7b1f60;background: #fbc82f;}
.big-rate {
    background: url(../bg-rate-big.png?2) no-repeat;
    background-size: cover;
    width: 812px;
    height: 760px;
    border: none;
    padding: 28px 0px;
    margin: 0;
    box-shadow: none;
}
.left-helper {
    height: 650px;
    position: relative;
    padding: 0 0 45px;
}
.big-rate .tabs{min-width:320px;padding:0}
.big-rate .tabs > section{display:none;padding:10px}
.big-rate .tabs > section > p{line-height:1.5;color:#fff;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
.big-rate .tabs > input{display:none;position:absolute}
.big-rate .tabs > label{display:inline-block;margin: 0px 0 -1px;padding: 3px 10px;font-weight:600;float:center;text-align:center;color: #fbc82f;background: #7b1f60;border-radius:5px}
.big-rate .tabs > label:before{font-family:fontawesome;font-weight:400;margin-right:10px}
.big-rate .tabs > label:hover{cursor:pointer;color: #7b1f60;background: #fbc82f;}
.big-rate .tabs > input:checked + label{color: #7b1f60;background: #fbc82f;}
#tab1:checked ~ #content-tab1,.big-rate #tab2:checked ~ #content-tab2,.big-rate #tab3:checked ~ #content-tab3{display:block;color:#fff}
@media screen and (max-width: 680px) {
.big-rate .tabs > label{font-size:0}
.big-rate .tabs > label:before{margin:0;font-size:18px}
}
@media screen and (max-width: 400px) {
.big-rate .tabs > label{padding:15px}
}
.box-top {
    width: 85%;
    padding: 10px 8px 29px;
    height: 135px;
    display: flex;
    flex-direction: row;
}
.invite-head.invite-head-gift {
    color: #efc31d;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: -5px;
}
.text-top {
    color: #d2d2d2;
    font-size: 14px;
    margin: 0;
    width: 265px;
    display: inline-block;
}
.text-top span {
    color: #fff;
}
.box-message {
    margin: 0;
    font-style: italic;
    text-align: left;
    margin: -17px 15px 4px;
    padding: 6px 14px 0px 9px;
    color: #d1d1d1;
    font-size: 14px;
    width: 380px;
    height: 56px;
    margin-top: 5px;
}
.box-message .va {
    height: 56px;
    vertical-align: middle;
}
.icon-inform {
    float: left;
    padding-right: 13px;
}
.table_raite {
    margin: 0 18px;
    width: 80%;
}
.row_rate {
    display: flex;
    overflow: hidden;
    height: 45px;
    color: #fff;
    margin-bottom: 3px;
    -moz-border-radius: 1px / 2px;
    -webkit-border-radius: 1px / 2px;
    border-radius: 1px / 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #2f0923;
    -moz-box-shadow: 0 1px 0 rgba(196,45,120,.71), inset 0 2px 2px rgba(0,0,0,.75);
    -webkit-box-shadow: 0 1px 0 rgb(196 45 120 / 71%), inset 0 2px 2px rgb(0 0 0 / 75%);
    box-shadow: 0 1px 0 rgb(196 45 120 / 71%), inset 0 2px 2px rgb(0 0 0 / 75%);
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.row_rate_inner {
    width: 278px;
    overflow: hidden;
    float: left;
}
.count {
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 26%);
}
.td_rate {
    float: left;
    line-height: 43px;
    text-align: center;
    height: 45px;
}
.gain.green {
    color: #2aa200;
    position: relative;
}
.gain {
    width: 28px;
    text-align: center;
    line-height: 52px;
}
.shelf{
    width: 355px;
    display: flex;
    background: url(/data/radio/shelf-purple.png) no-repeat;
    background-position: 38px 80px;
    flex-direction: column;
    align-items: center;
}
.row_rate .user {
    text-align: left;
    margin-left: 7px;
    font-size: 14px;
    line-height: 48px;
    font-weight: 700;
}
.user.red {
    color: #d1308e !important;
}
.point {
    text-align: left;
    padding-left: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.pagination{
    margin: auto;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;
    right: 0;
    display: inline-block;
    bottom: 6px;
    text-align: center;
}
.pagination_li{
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-style: italic;
    vertical-align: middle;
    padding: 4px 8px;
    margin: 0;
}
.pagination_li.but{
    padding: 0;
}
.pagination_li a{
    text-decoration: underline;
    color: #fff;
}
.pagination_li.active a {
    text-decoration: none;
    color: #f0c31d;
}
.pagination_li.active, .pagination_li:active, .pagination_li:hover{
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #561240;
    -moz-box-shadow: 0 1px 0 rgba(196,45,120,.71), inset 0 2px 2px rgba(0,0,0,.75);
    -webkit-box-shadow: 0 1px 0 rgba(196,45,120,.71), inset 0 2px 2px rgba(0,0,0,.75);
    box-shadow: 0 1px 0 rgba(196,45,120,.71), inset 0 2px 2px rgba(0,0,0,.75);
}
.pagination_li.but.active, .pagination_li.but:active, .pagination_li.but:hover{
    box-shadow: none;
}
.pagination_li.noun{
    background: none;
    box-shadow: none;
    margin: 0 -4px;
}