.page-home .main-container {

    width: 100%;

    margin: 0;

    /* background: #f5f5f5; */

    max-width: 100% !important;

}

.page-home .hto-graph {

    background: #fff;

}

.list-address-item {

    position: relative;



}

.list-address-item-promo {

    width: 100%;

    height: 100%;

}

.list-address-item-promox {

    padding: 10px 15px;

}



.breadcrumb-wrap {

    margin-bottom: 10px;

}

.breadcrumb, a.breadcrumb {

    font-size: 14px !important;

    color: rgba(0,0,0,0.5) !important;

    text-transform: capitalize;

}

.breadcrumb:hover {

    color: #a8331f !important;

}

.breadcrumb::before {

    content: '\E5CC';

    color: rgba(0,0,0,0.5) !important;

    vertical-align: top;

    display: inline-block;

    font-family: 'Material Icons';

    font-weight: normal;

    font-style: normal;

    font-size: 15px;

    margin: 0 5px 0 3px;

}



ul.agreement {

    padding-left: 10px;

}

ul.agreement li {

    list-style-type: square;

    margin-bottom: 7px;

}

.page-home {

    background: #f2f0f0;

}

.page-home-layout {

    overflow-y: hidden;

}

.teks-gelap {

    color: #a8331f;

}

ol.hto {

    padding-left: 20px;

}

.info-persiapan{

    text-transform: uppercase;

}

.info-pr {

    margin-bottom: 5px;

}

ul.sub-hto {

    padding-left: 15px;

}

ul.sub-hto li {

    list-style-type: square;

    margin-top: 10px;

}



.hto-teks-wrapper {

    max-width: 700px;

    margin: 20px auto;

    width: 100%;

    padding: 20px;

}

.hto-svg-wrapper {

    max-width: 560px;

    margin: 20px auto;

    width: 100%;

    padding: 20px;

}

.li-hto {

    margin-top: 20px;

    text-align: justify;

}

.home-button-wrapper {

    max-width: 560px;

    margin: 0 auto;

    padding: 10px 0 50px 0;

    text-align: center;

}



td.toid {

    display: none !important;

    color: #ededed;

    font-size: 0px;

}

.tabs-member .tab a {

    padding-left: 10px;

    padding-right: 10px;

}

.hup-title {

    padding-left: 10px !important;



}



.divider-button {

    width: 100%;

    min-height: 30px;

}



.list-address-item-promo {

    cursor: pointer;

}



.list-detail .ld {

    display: inline-block;

}

.ld-telp {

    margin-right: 10px;

}

.selected-icon {

    display:none;

}

.list-address-item {

    border: 1px solid #f2f0f0;

    border-radius: 5px;

    /* padding: 10px 15px; */

    margin: 10px 0;

    font-size: 13px;

    position: relative;

    transition: all 0.35s ease-in-out;

    color: #888;

}

.laiwrapper {

    position: relative;

    width: 100%;

    height: 100%;

}



.list-address-item .lt-name {

    display: inline-block;

    font-weight: bold;

}

.list-address-item .lt-hp {

    display: inline-block;

    margin-left: 10px;

    font-weight: bold;

}

.list-address-item:hover {

    border: 1px solid #888;

}

.list-aktif {

    border: 1px solid #a8331f;

    background: #fdfdfd;

    color: #666;

}



.pli-footer-total {

    text-align: right;

}







.list-aktif .selected-icon {

    display: block;

    position: absolute;

    bottom:0;

    left:0;

    height: 30px;

    width: 30px;



}

.pen-alamat-ta {

    width: 100%;

    min-height: 100px;

    resize: vertical;

    padding: 10px;

}

.btn-alamat-baru-area {

    width: 100%;

    overflow: hidden;

}

.btn-alamat-baru {

    float: right;

}

.keterangan-tambahan-wrapper {

    width: 80%;

    margin: 10px auto;

}



.cart-segment {

    background: #fff;

}



input.tambahan-order {

    border: 1px solid #f6f6f6 !important;

    background: #f5f5f5 !important;

    padding: 5px 10px !important;

    height: 30px !important;

    font-size: 12px !important;

}

input#qrtext::placeholder {

    color: #a8331f !important;

}

#qrtext {

    height: 2rem !important;

    font-size: 12px;

    margin: 5px !important;

    border: 1px solid #ddd;

    /* background: #a8331f; */

    background: #f5f5f5;

    padding: 0px 10px;

    float: right;

    width: 86%;

    float:none;

    border-radius: 5px;

    -webkit-box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5);

    -moz-box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5);

    box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5);

    transition: all 0.35s ease-in-out;

}

input.tambahan-order::placeholder { /* Firefox, Chrome, Opera */ 

    color: #a8331f

} 



input.mdn-input {

    display:none;

}

.cart-foot {

    margin: 10px;



    padding: 10px;

}

.payment-pilihan {

    margin-bottom: 50px;

}

.list-address-item-op {

    margin-top: 10px;

    margin-bottom: 10px;

    text-align: right;

    position: absolute;

    right:10px;

    bottom: 10px;

}

.form-penerima {

    margin-top: 20px;

}

.userf-status-detail {

    margin-bottom: 20px;

}

.btn-kecil1 {

    padding: 0 5px !important;

    height: 25px;

    line-height: 25px;

    font-size: 12px;

}

.btn-kecil1 i.left {

    margin-right: 5px !important;

}

.collection a.collection-item{

    color: rgba(0,0,0,0.85);

    font-size: 12px;

}

.collection a.collection-item:not(.active):hover {

    background-color: #a8331f;

    color: #fef7e4;

}

.header-user {

    padding: 15px;

    background: #fff;

    text-align: center;

    width: 100%;

}

.user-profil-body1 {

    padding: 0 !important;

}

.user-main-area {

    margin: 0.5rem 0 1rem 0;

}

.pesanan-user-list {

    margin-top: 30px;

}

.layout-user-profile {

    background: #fff;

}



.modal-button-area {

    padding: 10px 15px;

}

.modal-button-area .btn {

    margin-right: 10px;

}



.page-users-user, .page-users-user-profil, .page-users-user-pesanan, .page-users-user-alamat,

.page-users-po {

    background: #ededed;

}

.detail-pesanan-user {

    background: #fff;

    padding: 10px;

    

    font-size: 13px;

}



.tabs-pesanan-user .tab a {

    padding: 0 10px !important;

    font-size: 13px;

    color: #a8331f;



}

.jo-button-area-all {

    margin-top: 10px;

    border-top: 1px solid #ddd;

    padding-top: 7px;

}



.dpu-timeline {

    display: flex;

    flex-wrap: wrap;

    border-left: 1px solid #ddd;

    border-top: 1px solid #ddd;

    



}

.tl {

    padding: 10px;

    flex: 1;

    flex-basis: 100px;

    min-height: 50px;

    border-right: 1px solid #ddd;

    border-bottom: 1px solid #ddd;

}



.pbd {

    padding-bottom: 10px !important;

    margin-bottom: 15px;

}

.tabs-pesanan-user {





    display: block !important;

}

/* .page-member-pesanan {

    background: #ededed;

} */



.page-admin {

    background: #ededed;

}



.pesanan-admin-title {

    color: #a8331f;

    font-size: 24px;

}

.warning {

    border: 1px solid #888;

    background: #a8331f;

    max-width: 500px;

    margin: 10px auto;

    /* text-align: center; */

    padding: 10px;

    color: #fff;

}

td.nomor {

    text-align: right;

}

#report-pesanan_filter label {

    visibility: hidden;

}

#report-pesanan_filter input {

    visibility: visible;

    margin-top: -20px;

}

#report-pesanan {

    font-size: 12px;

}

#report-pesanan_length {

    margin-top: 5px;

    margin-right: 10px;

}

.admin-report-wrapper {

    background: #fff;

    padding: 10px 15px;

}

#report-pesanan_length select {

    display: inline-block !important;

    width: auto;

    height: 30px;

}

#report-pesanan_length label {

    display: inline-block !important;

}



.report-filter .modal-overlay {

    opacity: 0 !important;

}

.report-filter .datepicker-modal {

    top: 0 !important;

}

.search-area {

    overflow:hidden;

}

#search-admin-text {

    height: 2rem !important;

    font-size: 12px;

    margin: 5px !important;

    border: 1px solid #a8331f;

    /* background: #a8331f; */

    background: #d7968b;

    padding: 0px 10px;

    float: right;

    width: 70%;

    border-radius: 5px;

    -webkit-box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.75);

    -moz-box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.75);

    box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.75);

    transition: all 0.35s ease-in-out;

}

#search-admin-text:focus {

    background: #f5f5f5;

}







#search-admin-text:focus {

    background: #fff;

}

.pesanan-tgl {

    text-align: right;

}

.pesanan-header-detail {

    background: #fdfdfd;

    padding: 15px;

}

.pesanan-bar-detail {

    background: #fef7e4;

    padding: 15px;

}

.tabs-pesanan-admin, .tabs-pesanan-user {

    margin-bottom: 10px;

}

.tabs-pesanan-admin .tab a {

    color: #a8331f !important;

    padding: 0 5px !important;

    font-size: 13px;

}

.tabs.pesanan-admin a.active {

    color: #fef7e4 !important;

    background-color: #a8331f !important;

} 

.kotak-sms {

    border: 1px solid #888;

    padding: 10px;

    margin-top: 10px;

    margin-bottom: 10px;

}

#btn-resi-clear {

    display: none;

}

.button-area {

    margin-top: 30px;

}

.fx-container-wrap {

    display: flex;

    flex-wrap: wrap;

}

.card-def-admin {

    margin: 5px !important;

    flex-basis: 200px;

}

.top-admin {

    color: #fff;

    padding: 5px 10px;

}

.status-adminkey, .status-adminval {

    width: 100%;

}

.status-adminval {

    color: #a8331f;

    font-size: 20px;

}

.content-sms {

    margin-top: 10px !important;

    margin-bottom: 10px;

    border: 1px solid #9e9e9e !important;

    padding: 10px !important;

}

.alasan-teks {

    display:none;

}



#teks-alasan {

    resize: vertical;

    background: #fff;

    font-size: 12px;

    padding: 10px;

    margin-top: 10px;

    margin-bottom: 20px;



}

.sw-setuju {

    margin: 20px 0;

}

.teks-kecil {

    font-size: 12px;

}

.notif-area-trans {

    padding: 20px 25px;

}

.button-area {

    padding: 10px 15px 20px 15px;

}

.cart-anyar {

    text-align: center;

}



.zrow {

    margin-bottom: 20px;

}

.zrow .btn {

    margin-right: 10px;

}

.zlabel, .xlabel {

    font-size: 10px;

    color: rgba(0,0,0,0.75);

}

.xkonten {

    font-size: 14px;

    color: #666;

    margin-bottom: 15px;

}

.zkonten {

    font-size: 14px;

    color: #666;

    margin-bottom: 5px;

}

.pbo {

    margin-bottom: 7px;

}

#mdn {

    max-width: 500px;

}

.dpu-user-det {

    background: rgba(255,255,255,0.7);

    padding: 10px;    

}

.sorder-item {

    background: #fff;

    padding: 10px;

}



.clear-table {

    background: transparent !important;

    border: 0 !important;

}



.clear-table tr {

    background: transparent !important;

    background-color: transparent !important;

}

.clear-table thead {

    display:none;

}

.clear-table td {

    padding: 0 !important;

}

.clear-table .dataTables_empty {

    display:none !important;

}



.sorder-rekap {

    background: rgba(255,255,255,0.8);

    border-top: 1px dotted rgba(0,0,0,0.3);

}

.sor-item {

    /* font-size: 12px; */

    padding:10px 15px;

    border-bottom: 1px dotted rgba(0,0,0,0.3);

}

.soi-title {

    text-align: right;

}

.soi-content {

    color: #a8331f;

    text-align: right;

}



.main-pesanan-area .dataTables_length .select-wrapper {

    display: none !important;

    /* width: 70px; */

}

.main-pesanan-area .dataTables_length {

    display: none !important;

    

}

.main-pesanan-area .dataTables_filter {

    width: 100%;

    

    overflow: hidden;

}

.main-pesanan-area .dataTables_filter label {

    visibility: hidden;

}

.main-pesanan-area .dataTables_filter input {

    background: #ddd;

    visibility: visible;

    height: 2rem;

    font-size: 12px;

    padding: 5px 10px;

    width: 100%;

    float: left;

}

.main-pesanan-area .dataTables_filter input::placeholder { 

    color: #a8331f;

}

.ket-tambah {

    margin-top: 10px;

}

.isi-kt {

    border: 1px solid #ddd;

    padding: 5px;

    font-size: 12px;

}

.label-od {

    color: #a8331f;

}





.lower-area {

    border-top: 1px solid #ddd;

    padding: 10px 0 !important;

    margin: 10px 0 !important;

}

.lower-area .btn {

    float:right;

}







.akses-rid {

    background: #fff;

    padding: 10px 0;

    /* overflow: hidden; */

    border-top: 2px solid #a8331f;

    border-bottom: 1px solid #ddd;

}

.akses-teks {

    font-style: italic;

    text-align: right;

}

.stat-od {

    font-size: 50px;

}

.stat-od::before {

    font-size: 50px;

    margin-left:0;

    color: rgba(0,0,0,0.3);

}

.tl-icon {

    text-align:center;

    color: rgba(0,0,0,0.3);

}

.tl-desc {

    text-align: center;

    color: rgba(0,0,0,0.3);

}

.tl-icon-date {

    font-size: 11px;

}

.stat-on {

    color: #a8331f;

}

.stat-on::before {

    color: #a8331f;

}



.dpu-status-bar {

    background: #fef7e4;

    padding: 10px;

}

.dsb-ket {

    font-size: 12px;

}

.stat-konten {

    color: #a8331f;

}

.dsb {

    display: flex;

    flex-wrap: wrap;

}

.dsb-1 {

    flex: 1;

    flex-basis: 200px;

}

.dsb-2 {

    flex: 2;

    flex-basis: 300px;

}



.zos {

    margin-bottom: 10px;

}

.ups0 {

    margin-bottom: 10px;

}

.header-admin-bar {

    margin: auto;

}

.ds-top {

    font-size: 13px;

    color: #a8331f;

}

.subheading span.de {

    background: #ededed;

}

.fx-dashboard {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

}

.fxd-1 {

    flex: 1 0 200px;

    margin: 10px;

}

.fxd-10 {

    flex: 1 0 100px;

    margin: 10px;

}

.dash-inside {

    display:flex;

    flex-wrap:nowrap;

    align-items: stretch;

    justify-content: center;

    height: 100%;

}

.dash-label {

    flex: 3;

    padding: 20px;

}



.dash-total {

    background: #a8331f;

    color: #fef7e4;

    font-size: 30px;

    flex: 1;

    text-align: center;

}

.card-rekap {

    padding: 10px;

}

.totalrekap {

    text-align: center;

    font-size: 30px;

    color: #a8331f;

}

.labelrekap {

    text-align: center;

    font-size: 13px;

}

.sms-area {

    padding: 15px;

}

.center-sms-area  {

    padding-top: 20px !important;

}









@media only screen and (max-width: 560px) {

    .sign-btn .btn {

        height: 30px;

        line-height: 30px;

        padding-left: 8px;

        padding-right: 8px;

        font-size: 12px;

        display:block;

        width: 100%;

        margin-bottom: 10px;

    }

    .stat-od {

        font-size: 25px;

        line-height:25px;

    }

    .stat-od::before {

        font-size: 25px;

        margin-left:0;

    }

    .tl-desc {

        text-align:left;

    }

    .tl-icon {

        padding-left: 2px;

        padding-right: 2px;

    }

    #modef {

        width: 90%;

    }

    .zrow .btn {

        padding: 0 7px 5px 7px;

        font-size: 12px;

        line-height: 30px;

        height: 30px;

    }

    .zrow .btn i.left {

        margin-right: 5px;

    }



    #btn-pay-back, #btn-pay-now {

        padding: 0 7px 5px 7px;

        font-size: 12px;

        line-height: 30px;

        height: 30px;

    }

    #btn-pay-back i.left {

        margin-right: 5px;

    }

    #btn-pay-now i.right {

        margin-left: 5px;

    }

    .pesanan-tgl {

        text-align: left;

    }

    .pbd {

        padding-bottom: 5px;

        border-bottom: 1px solid #ccc;

    }

    .tl {

        flex: 1;

        flex-basis: 300px;

        padding-bottom: 10px;

        padding-top: 10px;

    }

    div[class^="page-users"] .container {

        width: 100% !important;

    }

    .card-mc .catal-title {

        font-size: 12px;

    }

    .card-mc .catal-harga {

        font-size: 14px;

        margin: 5px;

    }

    .tabs-member {

        display: block !important;

        overflow: hidden !important;

        height: auto !important;

    }

    .tabs-member .tab {

        float: left !important;

    }



}





.sign-wrapper {

    margin-top: 20px;

    margin-bottom: 20px;

}

.btn-icon {

    padding: 0 !important;

    height: 30px !important;

    width: 30px !important;

    margin-right: 15px;

}



.btn-icon i {

margin: 0 !important;

line-height: 30px !important;

}

.os-det-title {

    font-weight: 500;

    margin-bottom: 5px;

}



.button-area-jo {

    display: block;

    width: 100%;

    padding: 10px 15px;

}





#modkecil {

    max-width: 500px !important;

}





.button-done-area {

    padding: 15px;

}







.btn-upload-bukti {

    margin-top: 10px;

}



.btn-bayaruser {

    margin-top: 5px;

    margin-bottom: 5px;

}





.header-admin-page {

    background: #a8331f;

    color: #fef7e4;

    /* padding: 10px 15px; */

    /* font-weight: bold; */

    text-transform: uppercase;

padding: 5px 15px;

font-size: 17px;

}





.box-bayar {

    padding:0px !important;

    margin-top: 20px;

    

}



.table-pembayaran-wrapper {

    background: #fff;

    padding: 10px;

}





























/* printcss */

.jo-content {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 90%;

    max-width: 226px;

}

.jo-layout {

    

    width: 95% !important;

    padding: 10px;

    

}

.jo-kanan {

    text-align: right;

}

.joh {

    overflow: hidden !important;

}

.jo-title {

    padding-top: 5px;

    border-bottom: 1px solid #000;

    padding-bottom: 5px;

    margin-bottom: 5px;

    overflow: hidden;

}

.jo-header, .jo-body, .jo-footer {

    width: 100%;

display: block;

margin-bottom: 10px;

overflow: hidden;

}

.jo-row{

    display: block;

    width: 100%;

    overflow: hidden;

}

.jo-6 {

    width: 50%;

    float: left;

}

.jo-5 {

    width: 40%;

    float: left;

}

.jo-fx-mid {

    align-items: center;

}

.jo-4 {

    width: 33.3333333333%;

    float: left;

}

.jo-8 {

    width: 66.6666666667%;

    float: left;

}

.jo-12 {

    width: 100%;

}

.jo-fx {

    display: flex;

    flex-wrap: wrap;

}

.jo-fx-item-1 {

    flex: 1;

}

.jo-fx-item-2 {

    flex: 2;

}

.jo-fx-item-2 {

    flex: 2;

}

.jo-fx-item-3 {

    flex: 3;

}

.jo-fx-item-4 {

    flex: 4;

}

.jo-fx-item-5 {

    flex: 5;

}

.jo-fx-item-pi {

    flex: 5;



}

.teks-kanan {

    text-align: right;

}

.padr-10 {

    padding-right: 10px;

}

.padl-10 {

    padding-left: 10px;

}

.jo-fx-item-ku {

    flex: 1;

}

.jo-fx-item-ck {

    flex: 1;

}

.fx-user, .fx-customer, .fx-pengambilan {

    padding-right: 10px;

}

.jo-body {



    padding-top: 5px;

    margin-top: 10px;

    margin-bottom: 10px;



}

.jo-footer {

    margin-top: 25px;

    margin-bottom: 30px;

}

.rincian {

    font-size: 85%;

}

.jo-b-title {

    padding-top: 5px;

    padding-bottom: 5px;

    border-top: 1px solid #888;

    border-bottom: 1px solid #888;

    /* font-weight: 550; */

}

.jo-b-body {

    

    padding-top: 5px;

    padding-bottom: 5px;

    

}

.jo-ordet {

    padding-top: 5px;

    padding-bottom: 5px;

    border-bottom: 1px dotted #888;

    font-size: 90%;

}

.product-item-title {

    /* font-weight: 550; */

    padding-top: 10px;

    border-bottom: 1px dotted #888;

}

.info-jo-1 {

    padding: 0px 10px 10px 10px;

    border: 1px solid #888;

}

.info-jo-2 {

    padding: 0px 10px 10px 10px;

    border-top: 1px solid #888;

    border-bottom: 1px solid #888;

    border-right: 1px solid #888;

}

.info-baris {

    padding-top: 5px;

    padding-bottom: 5px;

    border-bottom: 1px solid #888;

}

.ttd {

    padding: 10px;

    min-height: 170px;

    border-bottom: 1px solid #888;

    text-align: center;

}

.jo-ttd {

    margin-top: 15px;

    

}



/* layout struk */

.jo-struk {

    width: 100%;

    max-width: 300px;



}

.jos-title {

    display: block;

    border-top: 1px solid #000;

    border-bottom: 1px solid #000;

    padding-top: 5px;

    padding-bottom: 5px;

    margin-top:20px;

    text-align: center;

}

.barcode-wrapper {

    text-align: center;

}

.barcode {

    margin: 0 auto;

}

.jo-mcsc {

    text-align: right;

}

.logo-wrapper {

    border-bottom: 1px solid #888;

}

#modjo {

    background: #fff;

    max-width: 400px;

}

.tengah {

    text-align: center;

}

.cust-cust {

    margin-top: 10px;

}