/*
SPURR
URL: ?
AUTHOR: Nabil Amer Thabit (nbilz//lab//dsign | @nbilz)
EMAIL: nbilz@live.com
CREATE DATE: Jan 12, 2021
UPDATE DATE: Jan 12, 2021
REVISION: 1
NAME: spurr.dashboard-3.0.css
TYPE: Cascading Style Sheet
DESCRIPTION: Spurr | Drive Value Build Loyalty
PALETTE:    1. #00E900 / rgb(0, 233, 0) (Pure Lime Green / Green)
            2. #009C00 / rgb(0, 156, 0) (Dark Lime Green / Japanese Laurel)
*/

.crop-img{
    position: relative;
}

.crop-img img{
    width: 100%;
}

.popup .pop-foot{
    padding: 0 20px 20px 20px;
}

.popup .pop-foot ul.the-form li{
    width: 50%;
}

.need-help{
    background: #F0F0F0;
    padding: 30px;
    border-radius: 6px;
    color: #4D4D4D;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    overflow: auto;
}
.box-main ul li .badge-ex{
    height: 40px;
    width: 114px;
    object-fit: contain;
    margin: -20px 0 -5px 30px;
}

.need-help.use-green{
    background: #D10013;
    color: #FFF;
}

.need-help.use-yellow{
    margin: 20px 0 0 0;
    background: #D6B627;
    color: #FFF;
}

.need-help.use-yellow.only-yellow{
    margin: 30px 0 0 0;
}

.need-help.has-margin{
    margin: 20px 0 0 0;
}

.need-help.is-live{
    margin: 30px 0 0 0;
}

.need-help span{
    display: block;
    margin: 12px 0 28px 0;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    max-width: 540px;
}

.need-help img{
    float: right;
    margin: -17px 0;
    width: 170px;
    height: 166px;
    object-fit: contain;
}

.need-help.has-margin img{
    height: 157px;
    margin: -12px 20px;
    width: auto;
}

.need-help.use-yellow img{
    width: 117px;
    height: 117px;
    margin: 10px 10px 0 0;
}

.need-help .btn{
    margin: 0;
}

.need-help.use-yellow .btn{
    background: #FAD536;
    color: #000;
}

.need-help.use-yellow .btn:hover{
    background: #FAF556;
}

.need-help ul{
    padding: 0;
    margin: -15px;
    overflow: auto;
    float: left;
}

.need-help ul li{
    float: left;
    padding: 15px;
}

.need-help ul li .btn{
    padding: 10px;
    margin: 0;
    min-width: 120px;
}

.need-help ul li:last-child .btn{
    background: transparent;
    color: #B3B3B3;
    min-width: auto;
}

.need-help ul li:last-child .btn:hover{
    color: #5A78A4;
}

.edit-loyal{
    background: #FFC3C8;
    padding: 14px;
    border-radius: 6px;
    margin: 20px 0 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    line-height: 20px;
}

.edit-loyal.use-yellow{
    background: rgba(250, 212, 52, .3);
}

.edit-loyal img{
    height: 20px;
    width: 20px;
    margin: 0 10px 0 0;
}

.edit-loyal.use-yellow img{
    height: 35px;
    width: 35px;
    margin: -8px 5px -7px 0;
}

.edit-loyal a {
    float: right;
    margin: -1px 0 0 20px;
    font-size: 12px;
    line-height: 12px;
    padding: 5px 15px;
}

.edit-loyal ul{
    float: right;
    margin: -5px;
}

.edit-loyal ul li{
    padding: 5px;
}

.edit-loyal ul li a{
    width: 100px;
    box-sizing: border-box;
    padding: 5px;
}

.box-white{
    margin: 30px 0 20px 0;
}

.box-white .sec-tit{
    font-weight: bold;
}

.box-white .sec-tit > span{
    font-size: 13px;
    line-height: 18px;
    margin: 10px 0 0 0;
}

ul.lay-box{
    margin: -30px;
}

ul.lay-box > li{
    padding: 30px;
    position: relative;
}

ul.lay-box > li:last-child{
    overflow: auto;
    border-bottom: none;
}

ul.lay-box > li:after{
    content: '';
    position: absolute;
    border-bottom: 1px solid #E6E6E6;
    bottom: 0;
    left: 30px;
    right: 0;
}

ul.lay-box > li.bg-green:after,
ul.lay-box > li:last-child:after{
    display: none;
}

ul.lay-box > li.bg-green{
    background: #D10013;
    border-radius: 6px 6px 0 0;
    overflow: auto;
}

ul.lay-box > li.bg-green img{
    float: right;
    margin: -13px 0;
    width: 258px;
    height: 186px;
    object-fit: contain;
}

ul.lay-box.box-done > li.bg-green img{
    background: #FFF;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    margin: 3px 0;
}

ul.lay-box > li .sec-tit{
    font-size: 18px;
    line-height: 22px;
}

ul.lay-box > li.bg-green .sec-tit{
    font-size: 21px;
    line-height: 21px;
    color: #FFF;
}

ul.lay-box > li.complete .sec-tit{
    float: left;
}

ul.lay-box > li.bg-green .sec-tit span{
    max-width: 480px;
    color: #FFF;
}

ul.lay-box.box-done > li.bg-green .sec-tit span{
    max-width: 540px;
}

ul.lay-box > li.complete .sec-tit span{
    margin: 0;
    color: #4D4D4D;
}

.box-white ul.lay-box > li.bg-green ul.the-form{
    float: left;
    margin: 15px -15px -15px -15px;
}

.box-white ul.lay-box > li.bg-green ul.the-form li{
    padding: 15px;
}

.box-white ul.lay-box > li.bg-green ul.the-form li label{
    color: #FFF;
    font-size: 14px;
    line-height: 14px;
}

.box-white ul.lay-box > li.bg-green ul.the-form li input,
.box-white ul.lay-box > li.bg-green ul.the-form li .select2-container{
    width: 240px !important;
}

ul.the-upload{
    margin: 30px -10px -10px -10px;
}

ul.the-upload li:first-child{
    padding-right: 55px;
}

.img-wrap{
    position: relative;
    background: rgba(0, 0, 0, .2);
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 15px 0 0;
    overflow: hidden;
}

.img-wrap img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-wrap span{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    color: rgba(255, 255, 255, .5);
    transform: translate(0, -50%);
}

.img-wrap.for-logo{
    border-radius: 80px;
}

.img-wrap.for-feat{
    border-radius: 4px;
    width: 142px;
}

.btn-wrap{
    padding: 5px 0;
    float: left;
    font-size: 13px;
    line-height: 18px;
    color: #B3B3B3;
}

.btn-wrap button.btn{
    display: block;
    margin: 10px 0 0 0;
    width: 120px;
    color: #505050;
/*    width: auto;*/
}

.cant-find{
    position: absolute;
    right: 30px;
    top: 30px;
    text-align: right;
    font-size: 13px;
    line-height: 18px;
    color: rgba(0, 0, 0, .5);
}

.cant-find a{
    display: block;
    text-decoration: underline;
    color: rgba(0, 0, 0, .5);
}

.cant-find a:hover{
    color: #007C00;
}

ul.the-form.the-com{
    margin: 15px -15px -15px -15px;
}

ul.the-form.the-com li{
    float: none;
    padding: 15px;
}

ul.the-form.the-com li.lay3{
    float: left;
    width: 33.33%;
}

ul.the-form.the-com li.aggree{
    width: auto;
}

ul.the-form.the-com li.aggree a{
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, .75);
    font-weight: bold;
}

ul.the-form.the-com li.aggree a:hover{
    color: #009C00;
}

ul.the-form.the-com li.aggree a.tos{
    text-decoration: underline;
/*    color: #009C00;*/
}

ul.the-form.the-com li.aggree a:hover{
    color: #007C00;
}

ul.the-form.the-com li.aggree a span{
    display: inline-block;
    vertical-align: middle;
    margin: -2px 12px 0 0;
    border-radius: 2px;
    width: 18px;
    height: 18px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .5);
}

ul.the-form.the-com li.aggree a:hover span{
    border: 1px solid #009C00;
}

ul.the-form.the-com li.aggree a span img{
    display: inline-block;
    vertical-align: middle;
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

ul.the-form.the-com li.aggree a.is-on span img{
    opacity: .5;
}

ul.the-form.the-com li.powered{
    float: none;
    width: 100%;
    max-width: 531px;
}

ul.the-form.the-com li.powered img{
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translate(0, -50%);
    height: 16px;
}

ul.the-form.the-com li.powered input{
    padding-right: 132px;
}

ul.the-form.the-com li .value{
    font-size: 14px;
    line-height: 18px;
    color: #000;
    font-weight: normal;
    margin: 0;
}

.sec-tit.has-del .btn-red{
    float: right;
    font-size: 12px;
    line-height: 12px;
    width: 100px;
    padding: 6px 10px;
    box-sizing: border-box;
    margin: 0;
}

ul.child-com{
/*    border-top: 1px solid #E6E6E6;*/
}

ul.the-form li .svg{
    top: auto;
    bottom: 25px;
    left: 25px;
    transform: none;
}

ul.the-form.the-submit{
    float: right;
}

ul.the-form.the-submit li .btn{
    margin: 0;
    width: 160px;
    box-sizing: border-box;
}

ul.the-form.the-submit li .btn.btn-std{
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    padding: 10px;
    color: #808080;
}

ul.the-form.the-submit li .btn.btn-std:hover{
    color: #FFF;
}

ul.lay-box > li.launch .sec-tit{
    font-size: 24px;
    line-height: 24px;
}

ul.lay-box > li.launch a.btn{
    margin: 30px 0 0 0;
}

ul.lay-box > li.launch img{
    float: right;
    margin: -22.5px 0;
    width: 194px;
    height: 173px;
    object-fit: contain;
}

ul.lay-box > li.how-work .sec-tit{
    font-size: 16px;
    line-height: 16px;
}

ul.lay-box > li.how-work > ul{
    margin: -5px -25px -25px -25px;
}

ul.lay-box > li.how-work > ul li{
    width: 33.33%;
    padding: 25px;
    line-height: 16px;
}

ul.lay-box > li.how-work > ul li span{
    float: left;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 6px;
    margin: 0 15px 0 0;
    background: rgba(0, 0, 0, .2);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    font-weight: bold;
    text-align: center;
}

ul.lay-box > li.how-work > ul li strong{
    display: block;
    margin: 7.5px 0 0 0;
}

.drive{
    margin: 30px 0 0 0;
    background: #FFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    border-radius: 6px;
    padding: 30px;
    overflow: hidden;
}

.drive strong{
    font-size: 24px;
    line-height: 24px;
}

.drive p{
    margin: 20px 0;
    font-size: 13px;
    line-height: 18px;
    color: #787878;
    max-width: 480px;
}

.drive ul{
    margin: 20px -10px 30px -10px;
}

.drive ul li{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    padding: 8px 10px 8px 44px;
    font-weight: bold;
}

.drive ul li span{
    position: absolute;
    left: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    border: 2px solid #159C18;
    box-sizing: border-box;
    top: 50%;
    transform: translate(0, -50%);
}

.drive ul li span img{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.drive > img{
    float: right;
    margin: -30px -30px -30px 20px;
    object-fit: cover;
    object-position: left center;
    width: 367px;
    height: 330px;
}

.drive .btn{
    width: 220px;
    padding: 9px 10px;
    box-sizing: border-box;
    margin: 0;
}

/*LOYALTY ACTIVE*/
ul.the-form.top-form.single-form li .svg{
    bottom: 14px;
    left: 17px;
    opacity: .5;
}

ul.dash-top{
    margin: -10px;
    padding: 30px 0 0 0;
    overflow: auto;
}

ul.dash-top li{
    float: left;
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
}

ul.dash-top li:last-child{
    width: 100%;
}

ul.dash-top li .box-white{
    margin: 0;
}

.box-grey{
    background: #F0F0F0;
    padding: 20px;
    border-radius: 6px;
}

.box-grey .sec-tit{
    font-weight: bold;
}

.box-grey .sec-tit a{
    position: absolute;
    right: 0;
    top: -2.5px;
    opacity: .35;
}

.box-grey > ul.the-form{
    padding: 13px 0 0 0;
    margin: -7.5px;
}

.box-grey > ul.the-form > li{
    padding: 7.5px;
}

.box-grey > ul.the-form > li:first-child{
    width: 65%;
}

.box-grey > ul.the-form > li:last-child{
    width: 35%;
}

.box-grey > ul.the-form li span.as-label-right{
    right: 7.5px;
    width: 45px;
}

.box-grey > ul.the-form li .select2-container{
    padding-right: 45px;
}

.box-grey > ul.the-form li .select2-container--default .select2-selection--single,
.box-grey > ul.the-form li .select2-container--default .select2-selection--multiple{
    background: #FFF;
    border-radius: 6px 0 0 6px;
}

.box-grey > ul.the-form li.has-label-right .select2-container--default .select2-selection--single .select2-selection__arrow{
    margin-right: 45px;
}

.box-grey .sec-tit a img{
    width: 16px;
    height: 16px;
}

.box-chart{}

.box-chart .sec-tit{
    font-size: 18px;
}

.box-chart .sec-tit ul.legend{
    overflow: auto;
    margin: 0 -10px -10px -10px;
}

.box-chart .sec-tit ul.legend li{
    float: left;
    font-size: 13px;
    line-height: 13px;
    font-weight: normal;
    padding: 10px;
    width: auto;
}

.box-chart .sec-tit ul.legend li span{
    float: left;
    background: #27F32C;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin: 1px 5px -1px 0;
}

.box-chart .sec-tit ul.legend li:last-child span{
    background: #999999;
}

.chart.chart-loyal{
    height: 200px;
    margin: 30px 0 0 0;
}

.box-chart ul.the-form.top-form{
    width: 192px;
    bottom: auto;
    top: 0;
}

.box-chart ul.the-form.top-form li .svg{
    left: 17.5px;
    bottom: 14px;
    opacity: .5;
}

.box-chart ul.the-form.top-form li .select2-container--default .select2-selection--single.with-bor .select2-selection__rendered{
    font-weight: normal;
}

.box-green.has-margin{
    margin: 30px 0 -10px 0;
}

.box-green.has-margin.use-white{
    background: #FFF;
    margin: 20px 0 0 0;
}

.box-green.has-margin .sec-tit{
    font-weight: bold;
    font-size: 18px;
}

.box-green.has-margin.use-white .sec-tit{
    color: #4D4D4D;
}

.box-green .sec-tit span{
    color: #FFF;
}

.box-green.has-margin .sec-tit span{
    font-size: 13px;
    line-height: 18px;
}

.box-green.has-margin.use-white .sec-tit span{
    color: #808080;
}

.box-green a{
    margin: 30px 0 0 0;
}

.box-green img{
    float: right;
    height: 134px;
}

ul.dash-mid{
    margin: 10px -10px;
    overflow: auto;
}

ul.dash-mid.no-mar{
    margin: 10px -10px -10px -10px;
}

ul.dash-mid > li{
    width: 33.33%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
}

ul.dash-mid > li:first-child{
    width: 66.66%;
}

ul.dash-mid.for-event > li:first-child{
    width: 100%;
}

ul.dash-mid.for-point > li:first-child{
    width: 100%;
}

ul.dash-mid > li .box-white{
    margin: 0;
}

.box-main{
    padding: 23px;
    overflow: auto;
}

.box-main .sec-tit{
    font-size: 18px;
    line-height: 18px;
}

.box-main .sec-tit.with-share{
    position: relative;
    padding: 0 139px 0 0;
}

.box-main .sec-tit span{
    margin: 0 0 5px 0;
}

.box-main .sec-tit.with-share{
    max-width: none;
}

.box-main .sec-tit ul.share-link{
    position: absolute;
    overflow: auto;
    /* float: right; */
    padding: 0;
    margin: -6px;
    right: 0;
    top: 0;
}

.box-main .sec-tit ul.share-link li{
    border: none;
    float: left;
    width: auto;
    /* padding: 0; */
    padding: 6px;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
}

.box-main .sec-tit ul.share-link li a{
    display: block;
    width: 16px;
    height: 16px;
    padding: 0;
}

.box-main .sec-tit ul.share-link li a img{
    display: inline-block;
    vertical-align: top;
    /* width: 16px;
    height: 16px; */
    object-fit: contain;
}

.box-main .the-img{
    width: 140px;
    height: 140px;
    float: left;
    background: rgba(0, 0, 0, .2);
    border-radius: 6px;
    margin: 30px 0 13px 0;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 23px;
    color: rgba(255, 255, 255, .5);
    padding: 45px 0;
    box-sizing: border-box;
}

.box-main img.the-img{
    padding: 0;
}

.box-main img.the-img.the-clear{
    background: transparent;
}

.box-main .the-img.the-voucher{
    color: #FFF;
    background: url('../img/bg-voucher.jpg') center center no-repeat;
    background-size: cover;
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    padding: 22px 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box-main .the-img.the-voucher img{
    width: 45px;
    height: 45px;
    border-radius: 45px;
    display: block;
    margin: 0 auto;
}

.box-main .the-img.the-voucher strong{
    display: block;
    font-size: 26px;
    line-height: 26px;
    margin: 4.5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box-main ul{
    padding: 30px 0 0 170px;
    margin: 0 -23px 0 0;
}

.box-main ul.use-four{
    padding: 8px 0 0 170px;
}

.box-main ul li{
    border-bottom: 1px  solid rgba(0, 0, 0, .15);
    padding: 15px 0;
    font-size: 13px;
    line-height: 13px;
    color: rgba(0, 0, 0, .5);
}

.box-main ul li:last-child{
    border-bottom: none;
}

.box-stat{
    padding: 20px;
    position: relative;
}

.box-stat .sec-tit{
    font-size: 18px;
    line-height: 18px;
}

.box-stat .sec-tit span{
    font-size: 13px;
    line-height: 13px;
    margin: 5px 0 0 0;
}

.box-stat .sec-tit > strong{
    position: absolute;
    right: 0;
    top: 0;
}

.box-stat .sec-tit > strong.use-green{
    color: #D10013;
}

.box-stat .sec-tit > strong.use-red{
    color: #FD0D1B;
}

.box-stat .sec-tit > strong img{
    display: inline-block;
    width: 13px;
    height: 12px;
    margin: -3px 5px 0 0;
}

.box-stat .sec-tit > strong.use-green img{
    transform: rotate(180deg);
}

.box-stat > strong{
    display: block;
    font-size: 24px;
    line-height: 24px;
    margin: 25px 0 0 0;
}

.box-stat > strong > img{
    width: 30px;
    height: 20px;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.box-stat > strong span{
    font-size: 18px;
    line-height: 18px;
}

/*CAMPAIGN ACTIVE*/

.table-wrap{
    overflow: hidden;
    overflow-x: scroll;
    border-radius: 6px;
    padding: 0;
    margin: 30px 0 0 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
}

.table-wrap table{
    width: 100%;
    overflow: hidden;
}

.table-wrap table thead tr th,
.table-wrap table tbody tr td{
    padding: 20px 25px;
    font-size: 14px;
    line-height: 16px;
    width: 20%;
}

.table-wrap table thead tr th{
    padding: 12px 15px;
    background: #B4B4B4;
    color: #FFF;
}

.table-wrap table tbody tr td{
    background: #FFF;
    padding: 12px 15px;
    border-right: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

.table-wrap table thead tr th:last-child,
.table-wrap table tbody tr td:last-child{
    border-right: none;
    text-align: right;
}

.table-wrap table tbody tr:last-child td{
    border-bottom: none;
}

.table-wrap table tbody tr td.empty-tab{
    color: rgba(0, 0, 0, .2);
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    text-align: left;
    border-bottom: none !important;
}

.table-wrap table tbody tr td.empty-tab div{
    padding: 20px 0;
    max-width: 420px;
    margin: 0 auto;
    font-weight: normal;
}

.table-wrap table tbody tr td.empty-tab div span{
    float: left;
    margin: -8px 10px -8px 0;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: rgba(0, 0, 0, .1);
    padding: 12px;
    box-sizing: border-box;
}

.table-wrap table tbody tr td.empty-tab div span img{
    height: 26px;
    width: 26px;
}

ul.the-form.on-tab li .svg{
    left: 17.5px;
    bottom: 14px;
}

@media screen and (min-width: 1025px) and (max-width: 1600px){}

@media screen and (min-width: 768px) and (max-width: 1024px){
    ul.dash-top li{
        width: 50%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
    ul.lay-box > li.how-work > ul{
        margin: 10px -10px -10px -10px;
    }
    
    ul.lay-box > li.how-work > ul li{
        width: 100%;
        padding: 10px;
    }
    
    .drive > img{
        display: block;
        float: none;
        width: 100%;
        height: 335px;
        margin: -30px 0 30px 0;
    }
    
    ul.dash-mid > li{
        width: 50%;
    }
    
    ul.dash-mid > li:first-child{
        width: 100%;
    }
    
    .box-white.box-chart ul.the-form.top-form{
        margin: -20px -5px 0 -5px;
        width: auto;
    }
    
    .box-grey > ul.the-form > li:first-child,
    .box-grey > ul.the-form > li:last-child{
        width: 100%;
    }
}

@media screen and (max-width: 767px){
    .box-main .sec-tit.with-share{
        padding: 0;
    }

    .box-main .sec-tit ul.share-link{
        position: relative;
        margin: 14px -6px -6px -6px;
    }
    
    ul.lay-box > li.bg-green img{
        width: 100%;
        margin: -10px 0 10px 0;
    }
    
    .box-white ul.lay-box > li.bg-green ul.the-form li input,
    .box-white ul.lay-box > li.bg-green ul.the-form li .select2-container{
        width: 100% !important;
    }
    
    ul.the-upload li:first-child{
        padding-right: 10px;
    }
    
    .img-wrap{
        float: none;
        margin: 0 auto;
    }
    
    .btn-wrap{
        float: none;
        text-align: center;
    }
    
    .btn-wrap button.btn{
        margin: 10px auto 0 auto;
    }
    
    .cant-find{
        position: static;
        text-align: left;
        margin: 30px 0 0 0;
    }
    
    ul.the-form.the-com li.aggree a{
        padding: 0 0 0 32px;
    }
    
    ul.the-form.the-com li.aggree a span{
        margin: -2px 12px 0 -32px;
    }
    
    ul.the-form.the-com li.lay3{
        width: 100%;
    }
    
    ul.lay-box > li.complete .sec-tit{
        float: none;
    }
    
    ul.the-form.the-submit{
        float: none;
        margin: 10px -10px -10px -10px;
    }
    
    ul.the-form.the-submit li .btn{
        width: 100%;
    }
    
    .need-help img{
        display: block;
        float: none;
        margin: -10px auto 10px auto;
    }
    
    ul.lay-box > li.launch img{
        display: block;
        float: none;
        margin: -10px auto 10px auto;
    }
    
    ul.lay-box > li.launch a.btn{
        display: block;
    }
    
    ul.lay-box > li.how-work > ul{
        margin: 15px -15px -15px -15px;
    }
    
    ul.lay-box > li.how-work > ul li{
        width: 100%;
        padding: 15px;
    }
    
    .drive > img{
        display: block;
        float: none;
        width: auto;
        height: 335px;
        margin: -30px -30px 30px -30px;
    }
    
/*    LOYALTY ACTIVE*/
    ul.dash-top li{
        width: 100%;
    }
    
    .box-white.box-chart ul.the-form.top-form{
        margin: 5px -5px 0 -5px;
        width: auto;
    }
    
    .need-help ul{
        float: none;
        margin: -5px;
    }
    
    .need-help ul li{
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
    
    .need-help ul li a.btn{
        width: 100%;
        min-width: auto;
        box-sizing: border-box;
    }
    
    ul.dash-mid > li,
    ul.dash-mid > li:first-child{
        width: 100%;
    }
    
    .edit-loyal a{
        float: none;
        display: block;
        margin: 10px 0 0 0;
    }
    
    .box-main .the-img{
        float: none;
        width: 100%;
        margin: 30px 0 10px 0;
        padding: 50% 0;
    }
    
    .box-main .the-img.the-voucher{
        padding: 50% 0;
        font-size: 20px;
        line-height: 20px;
    }
    
    .box-main .the-img.the-voucher strong{
        font-size: 42px;
        line-height: 42px;
    }
    
    .box-main .the-img.the-voucher img{
        width: 65px;
        height: 65px;
        border-radius: 65px;
    }
    
    .box-main img.the-img{
        height: auto;
        padding: 0;
    }
    
    .box-main .the-img > span,
    .box-main .the-img > div{
        display: block;
        transform: translate(0, -50%);
    }
    
    .box-main ul,
    .box-main ul.use-four{
        padding: 0;
        margin: 0 -23px -15px 0;
    }
    
    .need-help.has-margin img{
        margin: 0 auto 10px auto;
    }
    
    .box-green img{
        display: block;
        float: none;
        margin: 0 auto 10px auto;
    }
    
    .need-help.use-yellow img{
        margin: 0 auto 10px auto;
    }
    
/*    CAMPAIGN ACTIVE*/
    .edit-loyal ul{
        float: none;
    }
    
    .edit-loyal ul li{
        width: 50%;
    }
    
    .edit-loyal ul li a{
        width: auto;
    }
    
    .the-form.top-form.on-tab{
        margin: 10px -5px -5px -5px;
    }
    
    .table-wrap table tbody tr td.empty-tab div{
        text-align: center;
    }
    
    .table-wrap table tbody tr td.empty-tab div span{
        display: block;
        float: none;
        margin: 0 auto 10px auto;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape){}

@media screen and (max-width: 767px) and (orientation: portrait){}

/*
@media screen and (min-width: 1025px) and (max-width: 1600px){}

@media screen and (min-width: 768px) and (max-width: 1024px){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){}

@media screen and (max-width: 767px){}

@media screen and (max-width: 767px) and (orientation: landscape){}

@media screen and (max-width: 767px) and (orientation: portrait){}
*/