.lottery_wrap {
    width: 820px;
    height: 630px;
    background-color: #000;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column
}

.lottery_wrap:before {
    content: '';
    background: #000;
    width: 820px;
    height: 630px;
    /* left: 5px;
    top: 5px; */
    position: absolute;
    z-index: -1
}

.lottery_wrap .header {
    align-items: flex-start;
    padding: 10px 25px;
    position: relative
}

.lottery_wrap .header .func_btns > p {
    text-align: right;
    color: #3f4e8e;
    font-size: 11px
}

.lottery_wrap .header .func_btns > ul {
    justify-content: flex-end;
    margin-bottom: 25px;
}

.func_btns #btn_question{
    background: url(../../../img/powerladder_trapon/question.png) no-repeat;
    background-size:cover;
}

.func_btns #btn_speaker{
    background: url(../../../img/powerladder_trapon/speaker.png) no-repeat;
    background-size:cover;
}

.func_btns #btn_return{
    background: url(../../../img/powerladder_trapon/return.png) no-repeat;
    background-size:cover;
}
.lottery_wrap .header .func_btns > ul li{
    width: 43px;
    height: 43px;
}

ul.func_btns{
    display: flex;
    margin-top: 25px;
}

ul.func_btns li:not(:last-child) {
    margin-right: 5px;
}

p.time_value{
    position: relative;
    left: 210px;
    font-size: 15px;
    top: -8px;
}

.lottery_wrap p{
    color: white;
}

p.marquee{
    left: 390px;
    position: relative;
    font-size: 16px;
    top: -29px;
    letter-spacing: -3px;
}

div.contents .side.left{
    margin-left: 25px;
}

div.contents side.right{
    margin-right: 25px;
}

.hidden{
    display: none;
}

div.powerball_board{
    width: 500px;
}

div.powerball_board .powerball_1{
    position: relative;
    top: 60px;
}
div.powerball_board .powerball_2{
    position: relative;
    top: 70px;
}
div.powerball_board .powerball_3{
    position: relative;
    top: 80px;
}
div.powerball_board .powerball_4{
    position: relative;
    top: 90px;
}
div.powerball_board .powerball_lms{
    position: relative;
    top: 130px;
    display: flex;
    margin-left: 23px;
    margin-right: 22px;
}

div.powerball_board .powerball_lms > .powerball_l,
div.powerball_board .powerball_lms > .powerball_m,
div.powerball_board .powerball_lms > .powerball_s{
    flex: 1;
}

div.inprogress_wrap .progress{
    margin-top: -19px;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #2b2015;
    height: 25px;
    margin-bottom: 10px;
    border-radius: 0px !important;
}
.left-progress{
    position: absolute;
    width: 120px;
    top: 3px;
    left: 96px;
}
.right-progress{
    position: absolute;
    width: 120px;
    top: 3px;
    right: 96px;
}
.half-progress{
    height: 26px !important;
    border-radius: 0px !important;
    margin-bottom: 0px !important;
    background-color: #0f161f !important;
    border: 1px solid #21414f;
    color: white;
}
.powerball_board img{
    z-index:1;
}
.progress-bar-grey{
    background-color:#898989 !important;
}
.lms-progress{
    height:30px !important;
    border-radius:0px !important;
    margin-bottom:0px !important;
    position: absolute !important;
    top: 11px;
    width: calc(100% - 40px);
    left: 25px;
    background-color: #2b2015 !important;
    border:1px solid #67472d;
    color:white;
}
.powerball_l,.powerball_m,.powerball_s{
    position: relative;
}
.side.left .progressbar-front-text{
    line-height:30px !important;
    display:none;
}

.side.left .progress .progressbar-back-text{
    line-height: 26px !important;
    z-index: 9;
}

.side.left .progress-striped .progress-bar, 
.side.left .progress-striped .progress-bar-striped {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)!important;
    background-size: 16px 16px!important;
}

.progress-bar-primary{
    background-color: #2c7bdd!important;
}

.progress-bar-warning {
    background-color: #3095d5!important;
}

.progress-bar-danger {
    background-color: #e93b3b!important;
}
.side.right .bg-img{
    width: 255px;
    height: 444px;
    position: absolute;
    right: 25px;
    bottom: 10px;    
    z-index: -1;
}
.side.left{
    width: 500px;
    float: left;
}
.side.right{
    width: 255px;
    float: right;
    margin-right: 25px;
    padding-top:30px;
}
.scroll-wrapper{
    padding:0px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 350px;
    margin-right: 15px;
    margin-top: 18px;
}
#last_result_wrapper::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}
#last_result_wrapper::-webkit-scrollbar-thumb {
    background-color: #34666b;
}
.round-container{
    width: 208px;
    height:66px;
    margin-bottom:5px;
    position: relative;
    background:url("../../../img/powerladder_trapon/result_box.png") no-repeat; 
}
.round-header{
    background-color: #674e33;
    height: 30px;
    line-height: 30px;
    color:white;
    text-align: center;
    font-size: 14px;
}
.round-content{
    background-color: #1f170f;
    height: 68px;
    padding: 12px 20px 0px 20px;
}
.color-grey{
    color:#aca9a5;
}
.circle{
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 11px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    line-height: 32px;
    margin-bottom: 8px;
    margin-left: 4px;
}
.circle-red{
    background-color:#f13c29;
}
.circle-blue{
    background-color:#4cb8d3;
}
.circle-green{
    background-color:#6bb83d;
}
.circle-yellow{
    background-color:#f9ba25;
}
.circle-grey{
    background-color:#575757;
}
.sm-circle{
    position: relative;
    width:23px;
    height:23px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 11px;
    font-size: 13px;
    color:white;
    font-weight: bold;
    line-height:22px;
}
.badge {
    position: absolute;
    top: -5px;
    right: -2px;
    display: inline-block;
    padding: 1px 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #42423e;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f5c44f;
    border-radius: 8px;
    border: 1px solid #7d6e6e;
}

div.ball_result{
    width: 260px;
    height: 40px;
    bottom: 100px;
    left: 150px;
    position: absolute;
    font-size: 28px;
    letter-spacing: -5px;
    color: white;
    font-weight: 800;
}

span.ball{
    position: relative;
    width: 24px;
    height: 35px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 20px;
    line-height: 36px;
    padding-right: 10px;
    padding-left: 3px;
    padding-bottom: 3px;
}
span.ball-blue{
    background-color: #4cbbf9;
    border: 1px solid #205461;
}
span.ball-yellow{
    background-color: #edbf23;
    border: 1px solid #736121;
}
span.ball-green{
    background-color: #6eb22e;
    border: 1px solid #31542d;
}
span.ball-red{
    background-color: #ce3122;
    border: 1px solid #7a1b0e;
}
span.ball-dark{
    background-color: #777777;
    border: 1px solid #0f1010;
}
.total-progress1{
    transition: width 300s cubic-bezier(0, 0, 1, 1) !important
}
.progress span.progressbar-back-text,
.progress span.progressbar-front-text{
    color: white!important;
    font-size: 13px!important;
    line-height: 23px;
    letter-spacing: -1px;
}

.left-progress span.progressbar-back-text,
.left-progress span.progressbar-front-text{
    text-align: left!important;
    margin-left: 10px!important;
}

.right-progress span.progressbar-front-text{
    text-align: right!important;
}

.right-progress span.progressbar-back-text{
    width: 90%!important;
    text-align: right!important;
}
.powerladder_1{
    position: relative;
    top: 175px;
    margin-bottom: 5px;
}
.powerladder_ready img{
    z-index: 1;
}
.result-box{
    position: absolute;
    top: 17px;
    left: 20px;
}
.round-text{
    color:white;
    font-size:14px;
    font-weight: bold;
}

.circle-blue-1{
    background-image: linear-gradient(#0090bd, #004b7a);
}

.circle-red-1{
    background-image: linear-gradient(#d11a32, #8f1816);
}
.ladder-left{
    width: 49px;
    height: 49px;
    position: absolute;
    top: 223px;
    left: 145px;
    z-index: 1;
    background:url("../../../img/powerladder_trapon/left_inactive.png");
    background-repeat: no-repeat; 
}
.ladder-left.active{
    background:url("../../../img/powerladder_trapon/left_active.png"); 
}
.ladder-right{
    width: 49px;
    height: 49px;
    position: absolute;
    top: 223px;
    left: 353px;
    z-index: 1;
    background:url("../../../img/powerladder_trapon/right_inactive.png"); 
}
.ladder-right.active{
    background: url("../../../img/powerladder_trapon/right_active.png");
}
.ladder-odd{
    width: 49px;
    height: 49px;
    position: absolute;
    top: 396px;
    left: 145px;
    z-index: 1;
    background:url("../../../img/powerladder_trapon/odd_inactive.png"); 
}
.ladder-odd.active{
    background: url("../../../img/powerladder_trapon/odd_active.png");
}
.ladder-even{
    width: 49px;
    height: 49px;
    position: absolute;
    top: 396px;
    left: 353px;
    z-index: 1;
    background:url("../../../img/powerladder_trapon/even_inactive.png"); 
}
.ladder-even.active{
    background: url("../../../img/powerladder_trapon/even_active.png");
}

.result-line{
    width: 218px;
    height: 142px;
    position: absolute;
    top: 223px;
    left: 145px;
    z-index: 2;
}
.ladder-bg{
    width:218px;
    height:173px;
    position: absolute;
    left:166px;
    bottom:281px;
    background: url("../../../img/powerladder_trapon/ladder.png");
    z-index: 999;
}
.round-number{
    position: absolute;
    left: 230px;
    bottom: 299px;
    font-size: 21px;
    color: #ffd904;
    font-weight: bold;
    z-index: 999;
}
.round-number.active{
    left: 221px;
    bottom: 209px;
    font-size: 17px;
}
.ready-ladder{
    position: absolute;
    left: 177px;
    top: 274px;
    width:195px;
    height:120px;
    background:#000;
    z-index: 2;
}
.ladder-bg.active{
    background: url("../../../img/powerladder_trapon/ladder_result_back.png");
    background-repeat: no-repeat;
}
.result-wrapper{
    position: absolute;
    bottom: 165px;
    left: 214px;
}
.ladder-active{
    width: 218px;
    height: 173px;
    position: absolute;
    left: 166px;
    bottom: 187px;
}

.ladder-line-4 > div.left,
.ladder-line-4 > div.right,
.ladder-line-3 > div.left,
.ladder-line-3 > div.right{
    width: 14px;
    height: 126px;
    background: #335462;
    position: absolute;
    z-index: 0;
}

.ladder-line-4 > div.right,
.ladder-line-3 > div.right,
.ladder-backline > div.right{
    right: 0px;
}

.ladder-line-4 > div.middle,
.ladder-line-3 > div.middle{
    height: 14px;
    width: 219px;
    background: #335462;
    position: absolute;
    left: 0px;
    z-index: 0;
}

.ladder-line-4, 
.ladder-line-3, 
.ladder-backline{
    position: absolute;
    left: 165px;
    top: 270px;
    width: 219px;
    height: 125px;
    z-index: 2;
}

.ladder-backline > div.left,
.ladder-backline > div.right{
    width: 12px;
    height: 126px;
    background: #335462;
    position: absolute;
    z-index: 0;
}
.ladder-backline > div.middle{
    height: 10px;
    width: 219px;
    background: #335462;
    position: absolute;
    left: 0px;
    z-index: 0;
}

.btn-pattern-view{
    position: absolute;
    right: 39px;
    top: 186px;
    padding: 5px 8px;
    /* background: #2f70a0; */
    border-radius: 12px;
    color: white;
}

.btn-pattern-view:focus{
    outline: none;
}

.bottom-btns{
    position: absolute;
    right: 49px;
    bottom: 25px;
}


.btn-view{
    padding: 5px 18px;
    margin-right: 4px;
    background-image: linear-gradient(#696969, #000000);
    border-radius: 12px;
    color: white;
    border: 1px solid #242424;
}

.btn-view:focus{
    outline: none;
}

.pattern-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;    
    background: #101010;
    overflow: hidden;
    border-top:3px solid #a7a7a7;
    z-index: 9999999;
}

.pattern-wrapper .close{
    color:#bdbdbd;
    float:right;
    margin-right:15px;
    font-size:34px;
    padding:0px 12px;
}
/*  */


.nav-tabs.nav-justified>.active>a {
    border-radius: 0px !important;
    color:white;
}
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {
    border: 0px solid #ddd;
}
.nav-tabs.nav-justified li>a {
    border-radius: 0px !important;
    border-color: transparent;
    color:#6c6c6c;
    font-size:16px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #ddd;
    cursor: default;
    background-color: #101010;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #101010;
}

.nav-tabs.nav-justified {
    padding: 0px 84px 0px 56px;
}

.oddeven-title {
    padding: 10px 20px;
    display: flow-root;
    background: #393939;
}

#powerball_oddeven .odd-even, #powerball_oddeven .plop-broken {
    float: left;
    display: table;
}
.odd-even > .odd, .odd-even > .even, .plop-broken > .plop, .plop-broken > .broken {
    display: table-cell;
    width: 55%;
}
span.bg-blue {
    background: #3498db;
    color: white;
}
span.circle > p {
    margin-bottom: 0px;
    width: 24px;
    height: 16px;
    text-align: center;
}
span.odd-result, span.even-result, span.plop-result, span.broken-result {
    margin-left: 8px;
    color:#ddd;
}
span.bg-red {
    background: #e74c3c;
    color: white;
}
#powerball_oddeven .plop-broken {
    float: right;
}
span.bg-violet {
    background: #af28c7;
    color: white;
}
span.bg-black {
    background: #000000;
    color: white;
}

.pattern-wrapper span.circle {
    padding: 5px 1px;
    border-radius: 16px;
    font-weight: bold;
    display: inline-block;
    line-height: 17px;
    letter-spacing: -1px;
    margin-bottom: 0px;
    width: 28px;
    height: 28px;
}
.oddeven-result {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-hover>tbody>tr:hover {
    background-color: #151515;
}

td.odd {
    color: #3498db;
}
td.even {
    color: #e74c3c;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px solid transparent;
    text-align: center;
}
.oddeven-result{
    min-height: 365px;
    max-height: 365px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px 8px;
}

table.table-result > tbody > tr:nth-child(7) > td,
table.table-result > tbody > tr:nth-child(8) > td{
    color: white;
}

table.table-result > tbody > tr > td{
    vertical-align: middle;
    height: 44px;
}

.pick_deadline_popup{
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom : 1px solid #ccc;
    z-index: 999;
}
.margin_popup {
    position : absolute;
    width : 100%;
    height: 100%;
    padding-top : 0px;
    top : 0px;
    font-size: 15px;
    text-align: center;
    font-family: 'BMJUA';
    display: none;
    color : white;
}
.margin_popup > img{
    margin-top : 25px;
}

.margin_popup .title {
    font-size: 40px;
    margin-top : 150px;
    margin-bottom : 20px;
}
.margin_popup > .wrapper{
    position: absolute;
    left: 210px;
    top: 115px;
    width: 400px;
    height: 350px;
    border: 3px solid #50458c;
    border-radius: 24px;
}

.ly_share, .ly_game_tip {
    top: 45px;
    right: 54px;
    padding: 20px 30px;
}

.ly_share,.ly_game_tip {
    display: none;
    position: absolute;
    z-index: 2;
    border: 3px solid #fff;
    border-radius: 16px;
    background: rgba(20,25,36,.9);
    font-family: Roboto;
    text-align: left;
    color: #fff;
    padding: 20px;
    max-width: 400px;
    z-index:99999;
}

.ly_share.on,.ly_game_tip.on {
    display: block;
}

.ly_share .tit {
    color: #fff;
    font-size: 16px;
}

.ly_share .source {
    background: #fff;
    margin-top: 7px;
    margin-bottom: 10px;
}

.ly_share .source>textarea {
    width: 100%;
    height: 60px;
    padding: 7px;
    border: 0;
    box-sizing: border-box;
    font-size: 11px;
    background-color: #fff;
}

.ly_game_tip {
    max-width: 500px;
    top: 45px;
    right: 17px;
}

.ly_game_tip .tit {
    font-size: 16px;
    font-weight: 700;
}

.ly_game_tip .tit, .ly_game_tip .sub_tit {
    color: #fff;
    margin-bottom: 5px;
}
.ly_game_tip>p:not(:nth-last-of-type(1)), .ly_share>p:not(:nth-last-of-type(1)) {
    margin-bottom: 8px;
}

.ly_game_tip p {
    font-size: 11px;
    font-weight: 100;
    color: #a4b3c6;
    line-height: 15px;
    margin-bottom: 15px;
}

.ly_game_tip .sub_tit {
    font-size: 12px;
    font-weight: 700;
}

.ly_game_tip .tit, .ly_game_tip .sub_tit {
    color: #fff;
    margin-bottom: 5px;
}

.ly_game_tip .sub_tit, .ly_share .sub_tit {
    margin: 10px 0 8px;
}

.ly_game_tip .game_notice {
    font-weight: 400;
    color: #c0ff00;
}


.ly_share .close,.ly_game_tip .close{
    opacity: 0.5;
    color:white;
}


.func_btns #btn_speaker.no-audio{
    background: url(../../../img/powerladder_trapon/speaker-no.png) no-repeat !important;
    background-size:cover !important;
}

#total_progress_caption{
    z-index:1;
}