/* Bootstrap Hack */
.popover-content{
    max-width: 30rem!important;
    word-break: break-all!important;
}

.popover-content:after {
     content: "";
     display: table;
     clear: both;
 }

.btn2.btnCopy{
    float:right;
    font-size: 12px;
    margin-top: 5px;
}

dd{
    word-break: break-all!important;
}

.table.add tbody td{
    line-height: 44px !important;
    vertical-align: middle;
}

.table.add > thead > tr > th {
    border-top: 1px solid #e6e6e6 !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

.table.add > tbody > tr > td{
    border: none;
}

.table.add > tbody > tr.selected,
.table > tbody > tr.selected{
    background: #f7f0d8;
}

.table.add > tbody > tr.selected:hover{
    background: #f5f5f5;
}

.mod-table-ui p{
    margin: 0px !important;
    padding: 0px !important;
}

.mod-table-status b{
    font-size: 1.2em;
    font-weight: normal;
    color: #0071bc;
}

.mod-select{
    height: 32px;
    padding: 0 10px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 2px !important;
    cursor: pointer;
}

.mod-select:hover{
    border: 1px solid #0071bc;
}

/* Clear Floating */

.clear:after{
    content: "";
    display: block;
    clear: both;
    *zoom: 1;
}

/* Step bar */

ul.step_progress{
    display: block;
    margin: 0;
    padding: 0;
}

.step_progress li{
    float: left;
    display: block;
    margin: 0;
    padding: 0 20px;
    line-height: 32px;
    background: #578ebe;
    border-right: 1px solid #29abe2;
    color: #fff;
    border-radius: inherit;
}

.step_progress li:first-child{
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.step_progress li:last-child{
    border-right: 0;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.step_progress li.current{
    background: #29abe2;
}

/*  */

.mod-outer{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1900px;
    margin: auto;
}

.mod-outer-grid{
    position: relative;
    display: block;
}

.mod-table-outer{
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mod-panel{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #7ca7cc;
}

.mod-panel:last-child{
    margin-right: 0;
}

.mod-panel-head{
    position: relative;
    display: block;
    padding: 0px 10px;
    line-height: 41px;
    background: #578ebe;
}

.mod-panel-head:before{
    content: "";
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    top: 50%;
    left: 10px;
}

.mod-panel-head p{
    margin: 0;
    font-size: 1.3em;
    text-indent: 1.8em;
    color: #fff;
}

.mod-panel-head.date:before{
    background: url(/includes/admin/layout/img/icon_date.svg);
}

.mod-panel-head.filter:before{
    background: url(/includes/admin/layout/img/icon_filter.svg);
}

.mod-panel-head.list:before{
    background: url(/includes/admin/layout/img/icon_list.svg);
}

.mod-panel-content{
    display: block;
    padding: 10px;
    min-height: 180px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
}

.mod-grid{
    position: relative;
    display: block;
}

.mod-label{

}

.mag-r{
    margin-right: 10px;
}


.pad-r{
    padding-right: 10px;
}

.pad-lr{
    padding: 0 10px;
}

.sap-line{
    display: block;
    width: 100%;
    border-bottom: 1px solid #efefef;
    margin: 15px 0;
}

/* From */

.mod-inp-text,
.mod-inp-pwd,
.mod-slct{
    height: 34px;
    margin-bottom: 10px;
    padding: 0 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
}

.mod-inp-text:focus,
.mod-inp-pwd:focus,
.mod-slct:focus{
    border: 1px solid #999;
    outline: 0;
}

/* */

.mod-table-ui{
    position: relative;
    display: block;
    padding: 0 0 10px;
}

.mod-btn{
    color: #222;
    outline: 0;
    height: 32px;
    padding: 0 20px;
    border-radius: 2px !important;
    border: none;
    line-height: 1;
    box-shadow: 0px 3px 5px rgba(0,0,0,0);
    transition: all 0.3s linear;
    -webkit-filter: transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-btn:hover{
    box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
    transition: all 0.3s linear;
    -webkit-filter: transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-btn.redirect{
    color: #fff;
    background: #007fab;
}

.mod-btn.generate{
    color: #fff;
    background: linear-gradient(#00a2d3,#0090bf);
    background: -webkit-linear-gradient(#00a2d3,#0090bf);
    background: -moz-linear-gradient(#00a2d3,#0090bf);
    background: -o-linear-gradient(#00a2d3,#0090bf);
}

.mod-btn.mlt-delete{
    color: #fff;
    background: linear-gradient(#ff867f,#c97c77);
    background: -webkit-linear-gradient(#ff867f,#c97c77);
    background: -moz-linear-gradient(#ff867f,#c97c77);
    background: -o-linear-gradient(#ff867f,#c97c77);
}

.mod-btn.ac-confirm{
    color: #fff;
    background: linear-gradient(#ffab36,#ff9c00);
    background: -webkit-linear-gradient(#ffab36,#ff9c00);
    background: -moz-linear-gradient(#ffab36,#ff9c00);
    background: -o-linear-gradient(#ffab36,#ff9c00);
}

.mod-btn.ac-cancel{
    color: #fff;
    background: linear-gradient(#999,#666);
    background: -webkit-linear-gradient(#999,#666);
    background: -moz-linear-gradient(#999,#666);
    background: -o-linear-gradient(#999,#666);
}

.mod-btn-i{
    position: relative;
    height: 28px;
    line-height: 28px;
    padding: 0 10px 0 25px;
    border-radius: 2px !important;
    background: linear-gradient(#fefefe,#ddd);
    background: -webkit-linear-gradient(#fefefe,#ddd);
    background: -moz-linear-gradient(#fefefe,#ddd);
    background: -o-linear-gradient(#fefefe,#ddd);
    border: 1px solid #ccc;
    font-size: 1.1em;
    cursor: pointer;
}

.mod-btn-i:before{
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    top: 50%;
    left: 8px;
}

.mod-btn-i.slct-all:before{
    background: url(/includes/admin/layout/img/icon_btn_check.svg) no-repeat center;
}

.mod-btn-i.cacl-all:before{
    background: url(/includes/admin/layout/img/icon_btn_cancel.svg) no-repeat center;
}

.mod-btn-i.add:before{
    background: url(/includes/admin/layout/img/icon_btn_add.svg) no-repeat center;
}

.mod-btn-i.edit:before{
    background: url(/includes/admin/layout/img/icon_btn_edit.svg) no-repeat center;
}

.mod-btn:disabled,
.mod-btn-i:disabled{
    background: #efefef !important;
    color: #ccc;
    cursor: not-allowed !important;
}

.mod-btn:disabled:hover,
.mod-btn-i:disabled:hover{
    box-shadow: 0px 3px 5px rgba(0,0,0,0);
}


/* Mod Switch */

.mod-switch{
    position: relative;
    display: block;
    width: 40px;
    height: 18px;
    margin: auto;
    border-radius: 18px !important;
    background: #dcdfe6;
    cursor: pointer;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-switch.selected{
    background: #1991eb;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-switch p{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
    top: -1px;
    left: 0;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.mod-switch.selected p{
    left: 26px;
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}


/* Call to Action navi bar */

.call_to_action{
    position: fixed;
    display: none;
    width: 100%;
    padding: 0 20px;
    background: #fff;
    line-height: 50px;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.4);
    top: 46px;
    left: 0;
    z-index: 9995;
}

.call_to_action span{
    font-size: 1em;
    color: #333;
}

.call_to_action span b{
    padding: 0 6px;
    font-size: 1.7em;
    font-weight: normal;
    color: #0071bc;
}

.ac-close{
    position: absolute;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/includes/admin/layout/img/icon_close.svg) no-repeat center;
    text-indent: -9999px;
    cursor: pointer;
    top: 50%;
    right: 15px;
}

.ac-origin{
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.check-action{
    position: absolute;
    display: block;
    height: 100%;
    top: 50px;
    right: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.check-action:before{
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    top: 50%;
    left: -34px;
}

/* description */

.mod-desc{
    position: relative;
    padding: 15px 0;
}

.mod-desc p{
    font-size: 1em;
    color: #333;
}

.mod-desc p b{
    font-weight: normal;
    font-size: 1.2em;
    margin: 0 10px;
    color: #0071bc;
}

/* alignment */

.put-inl{
    display: inline-block;
}

.put-flt-left{
    float: left;
}

.put-flt-right{
    float: right;
}

.put-mag-l{
    margin-left: 10px;
}

.put-mag-r{
    margin-right: 10px;
}

.put-mag-lp{
    margin-left: 1.5%;
}

.put-mag-rp{
    margin-right: 1.5%;
}

.put-mag-auto{
    margin: auto;
}

.put-pad-l{
    padding-left: 10px;
}

.put-pad-r{
    padding-right: 10px;
}

.put-full{
    width: 100%;
}

.put-half{
    width: 50%;
    max-width: 550px;
    min-width: 550px;
}

.put-short{
    width: 30%;
    max-width: 300px;
    min-width: 180px;
}

.lb-short{
    width: 12.5%;
    min-width: 68px; 
}

.put-top-left{
    top: 0;
    left: 0;
}

.lh-30{
    line-height: 30px;
}

.put-ofl-h{
    overflow: hidden;
}

.v-align{
    display: table-cell;
    vertical-align: middle;
}

/* Width & height */

.put-v-short{
    max-width: 400px;
}

.w-50p{
    width: 50%;
}

.w-100p{
    width: 100%;
}

.w-100px{
    width: 100px;
}

.w-120px{
    width: 120px;
}

.w-150px{
    width: 150px;
}

.w-200px{
    width: 200px;
}

.w-250px{
    width: 250px;
}

.w-300px{
    width: 300px;
}

/* font settings */

.font-10px{
    font-size: 10px;
}

.font-12px{
    font-size: 12px;
}

.font-14px{
    font-size: 14px;
}

/* Decoration Symbol */

.put-dec{
    position: relative;
}

.put-dec:before{
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    top: 50%;
    left: -34px;
}

.put-dec.dec-4p:before,
.check-action.dec-4p:before{
    background: url(/includes/admin/layout/img/icon_dec_4p.svg) no-repeat center;
}

.text-break{
    word-wrap: break-word;
    word-break: break-all;
}

.text-nowrap{
    white-space:nowrap;
}

.top-time, .online-member{
    width: 300px;
    height: 50px;
    float: right;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    line-height: 50px;
    color: #ade4fd;
}

.online-member{
    height: 40px;
    line-height: 40px;
    position: relative;
    float: left;
    color: #888;
    left: 40px;
}
.online-member:before{
    content: '';
    position: absolute;
    width: 1px;
    background-color: #888888;
    left: -20px;
    top: 10px;
    bottom: 10px;
    margin: auto;
}

.online-member i{
    padding-right: 5px;
}

.online-member .text-primary{
    font-weight: bold;
}

/* Media Query */

@media screen and (max-width: 1150px){
    .mod-panel{
        width: 100%;
        max-width: 100%;
    }

    .mod-label,
    .mod-inp-text,
    .mod-inp-pwd,
    .mod-slct{
        display: block;
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 800px){
    .mod-table-ui p{
        float: none !important;
        display: block;
        margin: 10px 0 !important;
    }
}

/*page_horizontal_menu*/
.page_horizontal_menu > .page-sidebar-menu{
    padding: 0;
    margin: 0;
    background-color: #135;
    height: 40px;
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 100;

}

.page-header-fixed .page-container{
    margin-top: 86px;

}

.page_horizontal_menu > .page-sidebar-menu > .heading{
    float: left;
    display: block;
    position: relative;
    min-width: 130px;
    text-align: center;
}


.page_horizontal_menu > .page-sidebar-menu > .heading > .uppercase{
    color: #fff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 40px;
    cursor: pointer;
}

.page_horizontal_menu > .page-sidebar-menu > .heading:hover,
.page_horizontal_menu > .page-sidebar-menu > .heading > .uppercase.active{
    background-color: #2d7ac6;
}

.page_horizontal_menu > .page-sidebar-menu > .heading:first-child > .uppercase{
    border-left: none;
}

.page_horizontal_menu > .page-sidebar-menu > .heading:last-child > .uppercase{
    border-right: none;
}

.first_sub_menu{
    position: absolute;
    z-index: 5;
    background-color: #123;
    padding: 0;
    margin: 0;
    list-style: none;
    width: auto;
    max-height: 500px;
    box-shadow: 0 10px 10px -5px rgba(0,0,0,0.3) inset;
    display: none;
}
.first_sub_menu > li{
    border-top: solid 1px #08121C;
    border-bottom: solid 1px #162c42;
    float: left;
    min-width: 130px;
}
.first_sub_menu > li > a{
    color: #eee;
    padding: 8px;
    display: block;
}

.first_sub_menu a:focus{
    text-decoration: none;
}

.first_sub_menu > li > a:hover,
.first_sub_menu > li > a.active{
    background-color: #1d3954;
    text-decoration: none;
}

.second_sub_menu, .fourth_sub_menu{
    background-color: #012;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    box-shadow: 0 10px 10px -5px rgba(0,0,0,0.3) inset;
    display: none;
    position: absolute;
    left: 130px;
    top: 0;
}

/*.page_horizontal_menu > .page-sidebar-menu > .heading:last-child > .first_sub_menu > li > .second_sub_menu {*/
    /*left: -130px;*/
/*}*/

.second_sub_menu > li, .third_sub_menu > li{
    position: relative;
    display: block;
    border-bottom: solid 3px transparent;
}

.second_sub_menu > li > a, .third_sub_menu > li > a{
    color: #eee;
    padding: 8px;
    display: block;
    font-size: 12px;
}

.second_sub_menu > li > a:hover, .third_sub_menu > li > a:hover{
    background-color: #135;
    text-decoration: none;
}

.third_sub_menu{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 130px;
    width: 100%;
    background-color: #123;
    z-index: 100;
    top: 0;
    display: none;
    /*background-color: #012;*/
    box-shadow: 0 10px 10px -5px rgba(0,0,0,0.3) inset;
}

.fourth_sub_menu > li > a{
    color: #eee;
    padding: 8px;
    display: block;
    font-size: 12px;
}

.fourth_sub_menu > li > a:hover{
    background-color: #143e67;
    text-decoration: none;
}


.first_sub_menu .fa-angle-down.pull-right,
.first_sub_menu .fa-angle-right.pull-right{
    position: absolute;
    right: 5px;
}

.first_sub_menu .fa-angle-down.pull-left,
.first_sub_menu .fa-angle-left.pull-left{
    position: absolute;
    left: 5px;
}

@media (max-width: 1440px){
    .page_horizontal_menu > .page-sidebar-menu{
        display: flex;
    }

    .page_horizontal_menu > .page-sidebar-menu > .heading{
        flex: 1;
        min-width: auto;
    }
}

@media (max-width: 1440px){
    .page_horizontal_menu > .page-sidebar-menu > .heading:last-child .first_sub_menu{
        right: 0;
    }
    .page_horizontal_menu > .page-sidebar-menu > .heading:last-child .second_sub_menu{
        left: auto;
        right: 130px;
    }
}

/* SB */
.text-red{
    color: #ff0000;
}

.text-blue{
    color: #0000ff;
}

.text-green{
    color: #00ff00;
}


.btn_groups{
    list-style: none;
    padding: 0;
}

.btn_groups > li{
    float: left;
    margin-bottom: 5px;
}

.btn_groups > li > a{
    width: 6em;
}

.btn + .btn {
    margin-right: 10px;
}

.btn-group .btn {
    margin-right: 0px;
}

.game_result_pic{
    border: solid 1px #ccc;
}

.portlet-body > button{
    float: right;
}

.portlet.box > .portlet-body{
    padding: 45px 15px;
}
.table > tbody > tr > td{
    vertical-align: middle;
}

.table > tbody >tr > td > img{
    width: auto;
    height: 70px;
}

.delete_btn{
    padding-top: 10px;
}

.delete_btn > button{
    width: 130px;
}

.tabbar_icon_bg{
    background-color: #0e76a8;
}

.box_96x96{
    width: 96px;
    height: 96px;
}

.table > tbody >tr > td > img.box_200x200,
.box_200x200{
    width: 200px;
    height: auto;
}

.box_600x800{
    width: 600px;
    height: 800px;
}

.form-group.radio-inline.pd_left{
    padding-left: 0;
}

.form-group.radio-inline.pd_left.has-error .help-block{
    float:right;
    margin: 2px 0 0px 5px;
}
.form-group .notice_text{
    color: #ff0000;
    vertical-align: bottom;
}
.pz_title{
    padding-right: 0;
    padding-top: 7px;
}
.nopadding-left{
    padding-left: 0;
}

.first_sub_menu > .menu_active {
    background-color: #012;
    border-top: solid 1px #012;
    border-bottom: solid 1px #012;
}

i.fa.fa-circle{
    font-size: 12px;
}
i.fa.fa-circle.red{
    color: #cb5a5e
}
i.fa.fa-circle.green{
    color: #26a69a
}

/*overview style*/
/*即時資訊*/
.tile-stats{
    color:#fff;
}
.category{
    /* display: inline-block; */
    color:#5d5b5b;
    padding: 10px;
    border: 1px solid #c9c9c9;
    box-sizing: border-box;
    min-height: 165px;
}
.category.category-width{
    width: 14%;
    margin: 0px 7px;
    /* display: inline-block; */
    float: left;
}
.category.category-width.active{
    border-bottom: 5px solid #1296cb;
    box-sizing: border-box;
}
.btn.profit_and_loss.active{
    color: #1296cb;
    background: #fff;
    border: 1px solid #1296cb;
    box-sizing: border-box;
}
.tile-stats.bg-primary {
    padding: 10px;
    background-color: #2196f3;
}

.tile-stats:not(last-child){
    margin-bottom:20px;
}

.tile-stats.bg-success {
    padding: 10px;
    background-color: #00bcd4;
}

.tile-stats.bg-info {
    padding: 10px;
    background-color: #78d4ff;
}

.tile-stats.bg-warning {
    padding: 10px;
    background-color: #8BC34C;
}

.tile-stats.bg-blue{
    padding: 10px;
    background-color:#467fcf
}

.tile-stats.bg-red{
    padding: 10px;
    background-color:#cd201f
}

.tile-stats.bg-green{
    padding: 10px;
    background-color:#5eba00
}

.tile-stats.bg-yellow{
    padding: 10px;
    background-color:#f1c40f
}

.tile-stats .icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, .5);
    position: absolute;
    top: 40px;
    left: 15%;
    z-index: 1;
}

.tile-stats .icon i {
    margin: 0;
    font-size: 56px;
    line-height: 0;
    vertical-align: middle;
    padding: 0;
}

.tile-stats .count {
    font-size: 26px;
    line-height: 1.65857;
    margin-right: 10px;
    text-align: right;
}

.tile-stats .info {
    font-size: 16px;
    line-height: 1.65857;
    margin-left: 10px;
}

.tile-stats .info-line {
    position: relative;
    width: 100%;
    background: #ddd;
    height: 1px;
    margin: 10px 0px 10px 0px
}

.tile-stats.border-box {
    border: 1px solid transparent; 
    box-sizing: border-box; 
    color: #000; 
    padding: 15px;
}

.tile-stats h3 {
    color: #fff;
    text-align: right;
    margin: 0 10px;
}

.tile-stats p {
    display: inline-block;
    margin-bottom: 0;
}


.tile-stats div.src-btn {
    position: relative;
    margin: 10px;
    z-index: 5;
    padding: 10px 0 0;
    border-top: solid 1px #fff;
}
.tile-stats div.src-btn i {
    font-size: 20px;
    color: #fff;
}

.table-fixed {
    width: 100%;
}

.table-fixed tbody {
    height: 180px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

.table-fixed tbody td {
    background-color: #f9f9f9;
    float: left;
}

.table-fixed thead tr th {
    float: left;
}

.scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f9f9f9;
}

.scrollbar::-webkit-scrollbar {
    width: 3px;
    background-color: #f9f9f9;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #6f6f6f;
}

.border{
    border: solid 1px #ccc;
}

.align-top{
    vertical-align: top;
}

.align-middle{
    vertical-align: middle;
}

.align-bottom{
    vertical-align: bottom;
}

.p-5{
    padding: 5px;
}
.p-10{
    padding: 10px;
}
.p-20{
    padding: 20px;
}
.p-30{
    padding: 30px;
}

.m-5{
    margin: 5px;
}
.m-10{
    margin: 10px;
}
.m-20{
    margin: 20px;
}
.m-30{
    margin: 30px;
}

.px-5{
    padding:0 5px ;
}
.px-10{
    padding:0 10px;
}
.px-20{
    padding:0 20px;
}
.px-30{
    padding:0 30px;
}

.py-5{
    padding: 5px 0;
}
.py-10{
    padding: 10px 0;
}
.py-20{
    padding: 20px 0;
}
.py-30{
    padding: 30px 0;
}
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.popover{
    max-width: 100% !important;
}

.checkbox-center{
    display: inline-block;
    vertical-align: middle;
    padding-top: 7px;
}

.amChartsLegend{
    max-height: 200px !important;
    overflow-y: auto !important;
}

.amChartsLegend > svg{
    height: inherit !important;
}

.target-chart{
    position: relative;
    width: 33.33%;
    height: 300px;
    display: inline-block;
    float: left;
}

.panel-heading{
    font-size: 17px;
    font-weight: bold;
}

.panel.panel-default h5{
    padding:0 15px;
}

.fa.fa-table{
    vertical-align: middle;
}

.agentsystem{
    position: relative;
    margin: 10px;
    z-index: 5;
}

.agentsystem-title{
    display: inline-block;
    margin-bottom: 0;
    padding: 0px 15px 2px 1px;
    font-weight: bold;
    font-size: 20px; 
    font-family: '微軟正黑體';
    margin-top: -5px; 
    color: #7d7d7d;
}

.agentsystem i{
    font-size: 20px;
}

.agentsystem span {
    margin-left: 10px;
}

.return-top {
    width: 48px;
    height: 52px;
    position: fixed;
    bottom: 10.75rem;
    right: 5.25rem;
    text-decoration: none;
    display: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    background-color: #b3bfc7;
    -webkit-box-shadow: rgba(17, 51, 85, 0.3) 3px 3px 12px;
    box-shadow: rgba(17, 51, 85, 0.3) 3px 3px 12px;
    opacity: 0.9;
    font-size: 42px;
    text-align: center;
    color: #fff;
    z-index: 1001;
}

.return-top i {
    font-size: 46px;
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}

.return-top:hover {
    opacity: 1;
}

a.return-top:focus, a.return-top:hover{
    color:#fff;
}

.return-top:hover i, .return-top:focus i, .return-top:active i{
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-animation:hvr-icon-bob infinite 1.2s;
    animation:hvr-icon-bob infinite 1.2s;
}

/* Ripple In */
@-webkit-keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}
@keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}

.hvr-ripple-in:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 3px;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
    -webkit-animation:hvr-ripple-in infinite alternate 1.2s ease-in;
    animation:hvr-ripple-in infinite alternate 1.2s ease-in;
}

@-webkit-keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}
@keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

.item-buttons{
    background: #3d99da;
    color: #fff;
    padding: 35px 0;
    display: block;
    text-align: center;
    overflow: hidden;
    border-radius: 18px !important;
}

.item-buttons h3{
    display: block;
    margin: 0 0 20px;
    font-weight: 400;
    font-size: 28px;
}

.item-buttons a{
    width: 100px;
    font-weight: 400;
    font-size: 14px;
    background: #E5E5E5;
    padding: 15px 0;
    text-decoration: none;
    text-transform: uppercase;
    margin-right: 10px;
    display: inline-block;
    border-radius: 4px !important;
    color: #333333;
}

/* Mod Switch 2 */
.mod-switch-new{
    position: relative;
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 18px !important;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-switch-new.selected{
    background: #2196f3;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.mod-switch-new p{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    background: white;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
    top: 1px;
    left: 0;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.mod-switch-new.selected p{
    left: 22px;
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.radio-box{
    width: max-content;
    margin: 0 auto;
    text-align: left;
}

.radio-box .radio-inline{
    vertical-align: top;
}



.sidebar_container .page-bar{
    position: fixed;
    width: 100%;
    z-index: 4;
  }
  
  
.sidebar_container .page-sidebar-wrapper{
    position: fixed;
    left: 0;
    top: 126px;
    bottom:0;
    background-color: #fff;
    padding-bottom: 44px;
    z-index: 4;
}
  
.sidebar_container .contant_wrapper{
    margin-left: 235px;
    transition: .4s;
}
  
.sidebar_container .sidebar_wrapper{
    margin-top: 17px;
    border-right: solid 1px #e8e8e8;
    position: relative;
}

.sidebar_container .page-sidebar{
    background-color: #fff;
    overflow-y: auto;
    height: 100%;
    transition: .4s;
}

.sidebar_container.collapse.in .page-sidebar{
    overflow-y: initial;
}

.sidebar_container .page-sidebar-wrapper .show_hide_btn{
    width: 100%;
    position: absolute;
    bottom:0;
    left: 0;
    color: #666;
    background-color: #fff;
    border-top: solid 1px #e8e8e8;
    border-right: solid 1px #e8e8e8;
    transition: .3s;
    text-align: right;
}

.sidebar_container .page-sidebar-wrapper .show_hide_btn a{
    width: 45px;
    height: 45px;
    display: block;
    margin-left: auto;
    position: relative;
    background-color: #e8e8e8;
    color: #333;
    text-align: center;
}

.sidebar_container .page-sidebar-wrapper .show_hide_btn a i{
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.sidebar_container .page-sidebar-wrapper .show_hide_btn a i:before{
    font-size: 36px;
    height: 45px;
    line-height: 45px;
}
.sidebar_container.collapse.in .page-sidebar-wrapper .show_hide_btn a i{
    transform: rotate(0deg);
}

.sidebar_container .page-sidebar .page-sidebar-menu > li{
    position: relative;
}

/*.sidebar_container .page-sidebar .page-sidebar-menu > li:hover a i {*/
/*    color:white !important;*/
/*}*/

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li .sub-menu{
    display: none;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu > li:hover .sub-menu {
    display: block !important;
    position: absolute;
    top: 0;
    left: 100%;
    margin: auto;
    background-color: #f2f2f2;
    width: 180px;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li .sub-menu li .sub-menu{
    display: none !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li .sub-menu li:hover .sub-menu{
    display: block !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li .sub-menu{
    display: none !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu > li:hover,
.sidebar_container .page-sidebar .page-sidebar-menu > li:hover > a{
    background: #e0e0e0 !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu > li:hover .sub-menu li a{
    background: #f2f2f2 !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li > .sub-menu > li:hover > a{
    background-color: #e0e0e0 !important;
}

.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu li > .sub-menu > li > .sub-menu > li:hover > a{
    background-color: #e8e8e8 !important;
}
  
.sidebar_container .page-sidebar .page-sidebar-menu > li > a{
    color:#666;
    border-top: solid 1px #e8e8e8;
    transition: .3s;
    padding: 12px 8px;
    text-align: left;
}

.sidebar_container .page-sidebar .page-sidebar-menu > li > a i{
    margin: 4px 8px 4px 4px;
}

/*.sidebar_container .page-sidebar .page-sidebar-menu > li > a:hover,*/
.sidebar_container .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.sidebar_container .page-sidebar .page-sidebar-menu > li.open > a,
.sidebar_container .page-sidebar .page-sidebar-menu .sub-menu > li.open > a{
    background-color: #f2f2f2!important;
}

.sidebar_container .page-sidebar .page-sidebar-menu .sub-menu > li > a,
.sidebar_container .page-sidebar .page-sidebar-menu > li > a > i[class*="icon-"],
.sidebar_container .page-sidebar .page-sidebar-menu > li > a > i  {
    color:#666;
}


.sidebar_container .page-sidebar li.open > a > .pull-right{
    transform: rotate(90deg);
}

.sidebar_container .page-sidebar .page-sidebar-menu > li > a > i,
.sidebar_container .page-sidebar .page-sidebar-menu .sub-menu > li > a > i{
    color:#ccc;
}

.sidebar_container.collapse.in .page-sidebar{
    width: 45px;
}

.sidebar_container.collapse.in .contant_wrapper{
    margin-left: 45px;
}


.sidebar_container.collapse.in .page-sidebar .pull-right,
.sidebar_container.collapse.in .page-sidebar .page-sidebar-menu > li > a > span{
    display: none;
}

/* .page-content-wrapper  > .page-content > .row{
    padding-top: 32px;
} */

.sidebar_container .page-bar + br + .row{
    padding-top: 16px;
}

.page-content-wrapper .contant_wrapper .row{
    padding-top: 0;
}

/* @media (min-width: 992px){
    .sidebar_container .page-content-wrapper .page-content {
        margin-top: 40px;
    }
} */

@media (min-width: 1441px){
    .sidebar_container .page-content-wrapper .page-content {
        margin-top: 0px;
    }
}

@media (max-width: 991px){
    .sidebar_container .page-bar{
        position: absolute;
    }

    .page_horizontal_menu > .page-sidebar-menu{
        position: inherit;
    }

    .page-sidebar .page-sidebar-menu > li .sub-menu{
        background-color: transparent !important;
    }

    /*--*/
    .sidebar_container .page-sidebar-wrapper{
        width: 100%;
        position: initial !important;
        top: 46px !important;
        padding-bottom: 0 !important;
    }
    .sidebar_container .sidebar_wrapper .page-sidebar-wrapper .page-sidebar{
        margin: 0;
    }

    .sidebar_container .sidebar_wrapper .page-sidebar-wrapper .show_hide_btn{
        display: none;
    }

    .sidebar_container .sidebar_wrapper .contant_wrapper{
        margin-left: 0 !important;
    }
    /*--*/
}
.select2-drop.select2-drop-multi{
    z-index: 10050;
}

.bs-refresh{
    width: 24px;
    height: 24px;
    background-size: contain;
    margin-left: 8px;
}

.bs-refresh--active{
    -webkit-animation: refresh .8s linear infinite;
    animation: refresh .8s linear infinite
}

@-webkit-keyframes refresh {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes refresh {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.wallet-popup{
    padding: 0 15px;
}
.wallet-popup .col-lg-2{
    padding: 0;
}
/* 彩票快捷選項 */
.quickstart-lottery {
    padding: 15px;
}
.quickstart-lottery .quickstart-lottery__toggle-head {
    font-size: 14px;
    font-weight: 400;
    color: #5b9bd1;
    border-radius: 4px !important;
    padding: 6px 8px;
    cursor: pointer;
    border: 1px solid #5b9bd1;
    margin: 0 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.quickstart-lottery .quickstart-lottery__toggle-head .fa.fa-chevron-down {
    margin-left: auto;
}
.quickstart-lottery .quickstart-lottery__toggle-head[aria-expanded="true"] .fa-chevron-down {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.quickstart-lottery .quickstart-lottery__title {
    padding-right: 15px;
}
.quickstart-lottery .quickstart-lottery__content {
    padding-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.quickstart-lottery  .quickstart-lottery__sort-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.quickstart-lottery .quickstart-lottery__content .control-label {
    text-align: left !important;
}
.quickstart-lottery .quickstart-lottery__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
            padding-right: 15px;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
}
.quickstart-lottery .quickstart-lottery__setting {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-right: 8px;
    margin-top: -5px;
    color: #3598dc;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon .sort-icon-move, .quickstart-lottery__content .sort-icon .sort-icon-up {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon .sort-icon-up .fa.fa-long-arrow-up {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon .sort-icon-up .fa.fa-long-arrow-up:before {
    font-size: 12px;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon .sort-icon-up .fa.fa-long-arrow-up:after {
    content: '';
    display: block;
    height: 2px;
    width: 14px;
    background-color: #3598dc;
    margin-bottom: 2px;
}
.quickstart-lottery .quickstart-lottery__content .sort-icon .sort-icon-move {
    cursor: move;
}
.quickstart-lottery .quickstart-lottery__content .quickstart-lottery__sort-item.disable-top .sort-icon .sort-icon-up {
    cursor: not-allowed;
}
.quickstart-lottery .quickstart-lottery__content .quickstart-lottery__sort-item.disable-top .sort-icon .sort-icon-up .fa.fa-long-arrow-up {
    color: #c7c7c7;
}
.quickstart-lottery .quickstart-lottery__content .quickstart-lottery__sort-item.disable-top .sort-icon .sort-icon-up .fa.fa-long-arrow-up:after {
    background-color: #c7c7c7;
}
.quickstart-lottery .quickstart-lottery__content.ui-state-hightlight {
    background-color: #fff;
}