.section-version1{
	background: transparent ; }
.portlet.light {
    background-color: #f2f2f2 ; }
.portlet.light.profile-sidebar-portlet.bordered {
    background: transparent ; }

.ranking-title h4 {
    padding: 45px 0 ;
    margin-top: 20px ;
    text-align: center ; }
.ranking-ul {
    width: 100% ;
    display: flex ; }
    .ranking-ul, .ranking-ul:after {
            clear: both ; }
    .ranking-ul:after, .ranking-ul:before {
        content: "" ;
        display: table ; }
    .ranking-ul li {
        float: left ;
        width: 33.3333% ;
        padding-right: 15px ; }
        .ranking-ul li:last-child {
            padding-right: 0 ; }
        .ranking-ul li:nth-child(1) {
            order: 2 ; }
        .ranking-ul li:nth-child(2) {
            order: 1 ; }
        .ranking-ul li:nth-child(3) {
            order: 3 ; }
        .ranking-ul li img {
            width: 100px ;
            display: block ; }
        .ranking-ul li .ranking-details {
            height: 350px ;
            padding: 10px ;
            position: relative ;
            border-radius: 5px ;
            background-color: #f5f7f6 ; }
            .ranking-ul li:first-child .ranking-details {
                height: 450px ;
                background-color: #ffeeda ; }
            .ranking-ul li .ranking-details .ranking-header {
                top: 0 ;
                left: 50% ;
                position: absolute ;
                transform: translate( -50%, -70% ) ; }


.dashboard-group {
    padding: 100px 0 ;
    background-color: #fff ; }
    .dashboard-ul {
        width: 100% ; }
        .dashboard-ul, .dashboard-ul:after {
                clear: both ; }
        .dashboard-ul:after, .dashboard-ul:before {
            content: "" ;
            display: table ; }
        .dashboard-ul li {
            padding: 0 ;
            float: left ;
            width: 33.3333% ;
            position: relative ;
            margin-bottom: 50px ; }
            @media only screen and ( max-width: 767px ){
                .dashboard-ul li {
                    /*width: 100% ;*/ } }
                @media only screen and ( max-width: 480px ){
                    }
            .dashboard-ul li:after {
                content: '' ;
                top: 50% ;
                right: 0 ;
                width: 1px ;
                height: 100% ;
                position: absolute ;
                background-color: #000 ;
                transform: translate( 0, -50% ) ; }
                @media only screen and ( max-width: 767px ){
                    .dashboard-ul li:after {
                        background-color: unset ; } }
                    @media only screen and ( max-width: 480px ){
                        }
            .dashboard-ul li:last-child:after {
                background-color: unset ; }
            .dashboard-ul li a img {
                width: 55% ;
                margin: 0 auto ;
                display: block ; }
            .dashboard-ul li a label {
                display: block ;
                font-size: 20px ;
                font-weight: 100 ;
                padding-top: 50px ;
                text-align: center ;
                text-transform: uppercase ; }
                @media only screen and ( max-width: 767px ){
                    .dashboard-ul li a label {
                        font-size: 16px;
                    } }
                    @media only screen and ( max-width: 480px ){
                        }

.item-tab-ul {
    width: 100% ;
    margin-top: 20px ; }
    .item-tab-ul li {
        padding: 5px 0 ; }
        .item-tab-ul li .tab-header {
            position: relative ; }
            .item-tab-ul li .tab-header h4 {
                font-size : 20px ;
                font-weight : bold ;
                text-transform: uppercase ; }
            .item-tab-ul li .tab-header a {
                top: 50% ;
                right: 0 ;
                display: block ;
                position: absolute ;
                transform: translate( 0, -50% ) ; }
                .item-tab-ul li .tab-header a:after {
                    top: 50% ;
                    right: 0 ;
                    width: 20px ;
                    content: '+' ;
                    display: block ;
                    font-size: 26px ;
                    text-align: center ;
                    position: absolute ;
                    transform: translate( 0, -50% ) ; }
                .item-tab-ul li .tab-header a.active:after {
                    content: '-' ; }
        .item-tab-ul li .tab-body {
            display: none ; }


.cash-point-balance-ul {
    width: 100% ; }
    @media only screen and ( max-width: 767px ){
        }
        @media only screen and ( max-width: 480px ){
            .cash-point-balance-ul {
                display: block ; } }
    .cash-point-balance-ul, .cash-point-balance-ul:after {
            clear: both ; }
    .cash-point-balance-ul:after, .cash-point-balance-ul:before {
        content: "" ;
        display: table ; }
    .cash-point-balance-ul li {
        float: left ;
        width: 100% ;
        vertical-align: top ; }
        .cash-point-balance-ul li:nth-child(1){
            width: 30% ; }
        .cash-point-balance-ul li:nth-child(2){
            width: 70% ; }
        @media only screen and ( max-width: 980px ){
            .cash-point-balance-ul li:nth-child(1){
                width: 40% ; }
            .cash-point-balance-ul li:nth-child(2){
                width: 60% ; } }
            @media only screen and ( max-width: 767px ){
                .cash-point-balance-ul li:nth-child(1){
                    width: 45% ; }
                .cash-point-balance-ul li:nth-child(2){
                    width: 55% ; } }
                @media only screen and ( max-width: 480px ){
                    .cash-point-balance-ul li:nth-child(1), .cash-point-balance-ul li:nth-child(2){
                        width: 100% ; }
                        .cash-point-balance-ul li:first-child {
                            margin-bottom: 15px ; } }
.cash-point-circle {
    color: #fff ;
    width: 150px ;
    height: 150px ;
    font-size: 60px ;
    margin-right: 30px ;
    line-height: 110px ;
    text-align: center ;
    position: relative ; }
        @media only screen and ( max-width: 480px ){
            .cash-point-circle {
                margin: 0 auto ; } }
    .cash-point-circle .layer-group {
        top: 50% ;
        left: 50% ;
        border-radius: 50% ;
        position: absolute ;
        transform: translate( -50%, -50% ) ; }
        .cash-point-circle .layer-group.layer-one {
            width: 150px ;
            height: 150px ;
            background: #000 ; }
        .cash-point-circle .layer-group.layer-two {
            width: 130px ;
            height: 130px ;
            background: #fff ; }
        .cash-point-circle .layer-group.layer-three {
            width: 110px ;
            height: 110px ;
            background: #000 ; }
.cash-point-content {
    text-align: left ;
    text-transform: uppercase ; }
    @media only screen and ( max-width: 480px ){
        .cash-point-content {
            text-align: center ; } }
    .cash-point-content .title {
        font-weight: bold ; }
    .cash-point-content .amount {
        font-size: 48px ; }
        @media only screen and ( max-width: 767px ){
            .cash-point-content .amount {
                font-size: 38px ; } }
            @media only screen and ( max-width: 480px ){
                .cash-point-content .amount {
                    font-size: 24px ; } }
    .cash-point-content .content {
        }
.cash-point-button-ul {
    width: 100% ; }
    .cash-point-button-ul, .cash-point-button-ul:after {
            clear: both ; }
    .cash-point-button-ul:after, .cash-point-button-ul:before {
        content: "" ;
        display: table ; }
    .cash-point-button-ul li {
        width: 50% ;
        float: left ;
        padding: 10px ;
        text-transform: uppercase ; }
        @media only screen and ( max-width: 767px ){
            .cash-point-button-ul li {
                width: 100% ; } }


.wallet-group {
    text-align: center ;
    border-radius: 5px ;
    margin-bottom: 25px ;
    border: 1px solid #000 ; }
    .wallet-header {
        height: 50px ;
        border-bottom: 1px solid ; }
    .wallet-body {
        padding: 50px ;
        text-transform: uppercase ; }
        .wallet-body .title {
            font-weight: bold ; }
        .wallet-body .amount {
            font-size: 48px ; }
            @media only screen and ( max-width: 767px ){
                .wallet-body .amount {
                    font-size: 38px ; } }
                @media only screen and ( max-width: 480px ){
                    .wallet-body .amount {
                        font-size: 24px ; } }
        .wallet-body .content {
            padding: 0 ; }
.wallet-topup {
    text-align: center ;
    text-transform: uppercase ; }


.point-group {
    text-align: center ;
    border-radius: 5px ;
    margin-bottom: 25px ;
    border: 1px solid #000 ; }
    .point-body {
        padding: 50px ;
        text-transform: uppercase ; }
        .point-body .amount {
            font-size: 48px ; }
            @media only screen and ( max-width: 767px ){
                .point-body .amount {
                    font-size: 38px ; } }
                @media only screen and ( max-width: 480px ){
                    .point-body .amount {
                        font-size: 24px ; } }
.point-redeem {
    text-align: center ;
    text-transform: uppercase ; }


.cart-group {
    height: auto ;
    background: #fff ;
    padding: 30px 20px ; }


.drive-ul {
    width: 100% ; }
    .drive-ul, .drive-ul:after {
            clear: both ; }
    .drive-ul:after, .drive-ul:before {
        content: "" ;
        display: table ; }
    .drive-ul li {
        float: left ;
        padding: 10px ;
        width: 33.3333% ;
        position: relative ;
        margin-bottom: 15px ; }
        .drive-ul li a {
            padding: 15px ;
            display: block ;
            border-radius: 5px ;
            border: 1px solid #000 ; }
.drive-table {
    width: 100% ; }
    .drive-table tr th, .drive-table tr td {
        padding: 10px ; }
    .drive-table thead tr th {
        background-color: #afb4b8 ; }
    .drive-table tbody tr th {
        background-color: #e5e6e8 ; }


.target-background-image {
    padding-bottom: 50% ;
    background-size: 100% auto ;
    background-position: bottom ;
    background-repeat: no-repeat ; }
.target-group {
    margin-bottom: 40px ; }
    .target-group.sub {
        margin-bottom: 20px ; }
    .target-title {
        font-size: 18px ;
        font-weight: bold ;
        margin-bottom: 10px ; }
    .target-title-sub {
        font-size: 14px ;
        font-weight: bold ;
        margin-bottom: 10px ; }
    .target-progress-bar-group {
    width: 100% ;
    border-radius: 15px ;
    background-color: #fff ; }
    .target-progress-bar-group .progress-bar {
        width: 0 ;
        height: 20px ;
        color: white ;
        font-size: 12px ;
        text-align: right ;
        position: relative ;
        border-radius: 15px ;
        background-color: rgb(116, 194, 92) ; }
        .target-progress-bar-group .progress-bar.sub {
            height: 15px ;
        }
        .target-group:nth-child(1) .target-progress-bar-group .progress-bar {
            background-color: #4c02e0 ; }
        .target-group:nth-child(2) .target-progress-bar-group .progress-bar {
            background-color: #b526e5 ; }
        .target-group:nth-last-child(1) .target-progress-bar-group .progress-bar {
            background-color: #f6129a ; }
        .target-group:nth-last-child(2) .target-progress-bar-group .progress-bar {
            background-color: #f6129a ; }
        .target-group:nth-last-child(3) .target-progress-bar-group .progress-bar {
            background-color: #f6129a ; }
        .target-group:nth-last-child(4) .target-progress-bar-group .progress-bar {
            background-color: #f6129a ; }
        .target-group:nth-last-child(5) .target-progress-bar-group .progress-bar {
            background-color: #f47835 ; }
        .target-progress-bar-group .progress-bar .number {
            top: 50% ;
            z-index: 2 ;
            width: 30px ;
            height: 30px ;
            right: -10px ;
            font-size: 9px ;
            line-height: 30px ;
            position: absolute ;
            border-radius: 50% ;
            text-align: center ;
            background-color: #000 ;
            transform: translate(0, -50%) ; }
            .target-progress-bar-group .progress-bar.sub .number {
                width: 25px ;
                height: 25px ;
                font-size: 8px ;
                line-height: 25px ; }
            .target-group:nth-child(1) .target-progress-bar-group .progress-bar .number {
                background-color: #4c02e0 ; }
            .target-group:nth-child(2) .target-progress-bar-group .progress-bar .number {
                background-color: #b526e5 ; }
            .target-group:nth-last-child(1) .target-progress-bar-group .progress-bar .number {
                background-color: #f6129a ; }
            .target-group:nth-last-child(2) .target-progress-bar-group .progress-bar .number {
                background-color: #f6129a ; }
            .target-group:nth-last-child(3) .target-progress-bar-group .progress-bar .number {
                background-color: #f6129a ; }
            .target-group:nth-last-child(4) .target-progress-bar-group .progress-bar .number {
                background-color: #f6129a ; }
            .target-group:nth-last-child(5) .target-progress-bar-group .progress-bar .number {
                background-color: #f47835 ; }


.purchase-button {
    border: 0 ;
    color: #000 ;
    width: 100% ;
    padding: 10px ;
    display: block ;
    margin-top: 8px ;
    cursor: pointer ;
    font-size: 14px ;
    background: #fff ;
    font-weight: 500 ;
    text-align: center ;
    text-transform: uppercase ; }



.order-information-table {
    width: 100% ;
    color: #716768 ; }
    .order-information-table tr th, .order-information-table tr td {
        padding: 12px 0 ;
        vertical-align: top ;
        border-bottom: 1px solid #000 ; }



.report_table {
    width: 100% ;
    font-size: 12px ; }
    .report_table tr.even {
        background-color: #f7f7f7 ; }
    .report_table tr.border-top {
        border-top: 1px solid #ddd ; }
        .report_table th {
            font-weight: 700 ;
            vertical-align: middle ; }
        .report_table th, .report_table td {
            padding: 10px 10px ;
            vertical-align: middle ; }
    .report_table thead th, .report_table thead td {
        font-weight: 700 ;
        padding: 13px 10px ;
        vertical-align: bottom ;
        background-color: #d3d3c9 ; }
    .report_table tfoot tr {
        background-color: #d3d3c9 ; }
        .report_table tfoot tr th, .report_table tfoot td {
            font-weight: 700 ; }


.member-voucher-template6 {
    width: 90% ;
    margin: auto ;
    height: 170px ;
    padding: 15px ;
    margin-bottom: 20px ;
    background-size: cover ;
    background-position: bottom ;
    box-shadow: -2px 2px 10px #a7a7a7 ; }
    .member-voucher-template6 .title {
        font-size: 20px ;
        line-height: 1.5 ;
        overflow: hidden ;
        font-weight: bold ;
        position: relative ;
        margin-bottom: 10px ;
        font-family: 'halfbred', sans-serif ; }
        .member-voucher-template6 .title:after {
            top: 50% ;
            content: '' ;
            width: 100% ;
            height: 2px  ;
            position: absolute ;
            background-color: #000 ;
            transform: translate(0, -50%) ; }
    .member-voucher-template6 .content table {
        width: 100% ;
        font-size: 10px ; }
        .member-voucher-template6 .content table tr th {
            font-weight: bold ; }
        .member-voucher-template6 .content table tr th, .member-voucher-template6 .content table tr td {
            vertical-align: top ;
            padding-bottom: 10px ;
            text-transform: uppercase ; }



@media not all and (min-resolution:.001dpcm) {
    @media {
        .form-control, input[type=date] {
            height: 37px ;
            line-height: 37px ;
            vertical-align: top ; } } }
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        .form-control, input[type=date] {
            height: 37px ;
            line-height: 37px ;
            vertical-align: top ; } } }