#body-container,.modal.show,.modal-backdrop.show, #page-overlay-mobile,.filter-mobile,.sidebaropen,.float-menu-m,#page-footer,#ctaNextt,#ctanext2,#sds,#content-tujuan,#ovl,.m-produk,.m-link,.btn-cs,.m-text,#customcolor, #content-select, .overlay-mobile, #overfl, .menu-ax, .modal, #page-overlay-mobile-agen, #content-select-jenis, #content-select-item, .cta-on, .modalCustom, #myBtn.open-button, .fl-sdx {
    /* background-color: #fafafa; */
    max-width: 480px;
    /* height: 100%; */
    left: calc(-50.6vw + 50%);
    right: calc(-50vw + 50%);
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; */
    /* box-shadow: 0 0 15px 1px rgb(0 0 0 / 10%); */
}
#myBtn.open-button {
    z-index: 999;
    left: 0px !important;
    right: 0px !important;
    bottom: 80px !important;
}

.wizard-bg {
    background: #777777;
}
.wizard-bg p {
    color: #fff;
}
.blurimage {
    filter: blur(2px);
}
@media (max-width: 480px) {
    #body-container,.modal.show,.modal-backdrop.show, #page-overlay-mobile,.filter-mobile,.sidebaropen,.float-menu-m,#page-footer,#ctaNextt,#ctanext2,#sds,#content-tujuan,#ovl,.m-produk,.m-link,.btn-cs,.m-text,#customcolor, #content-select, .overlay-mobile, #overfl, .menu-ax, .modal, #page-overlay-mobile-agen{
        /* background-color: #fafafa; */
        max-width: 480px;
        /* height: 100%; */
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%);
        margin-left: auto;
        margin-right: auto;
        /* overflow: hidden; */
        /* box-shadow: 0 0 15px 1px rgb(0 0 0 / 10%); */
    }
}
.badge-waktu {
    background: transparent;
    border: 1px solid #C94040;
    color: #C94040;
}
.badge-waktu2 {
    background: transparent;
    border: 1px solid #490e0e;
    color: #490e0e;
}
.badge-primary-status {
    /* color: #0057C0;
    background-color: #eef3ff; */
    color: #0057C0;
    background-color: #DAE4FF;
    /* border: 1px solid; */
}
.fl-sdx {
    position: fixed;
    bottom: 70px;
    z-index: 9999;
    left: -5px;
}
.badge-danger-status {
    background: #ffebeb;
    color: #b10000;
}
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: transparent !important;
}
.ribbon-box {
    top: 42px;
}
@media screen and (max-width: 480px) {
    .w-data {
        width: 59vw !important;
        margin-right: 10px !important;
    }
    .scrollHorizontal {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .scrollHorizontal::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
}
table tbody tr td {
    padding: 10px 0px !important;
}
table tbody tr td div ul li a {
    /* padding-left:0px !important; */
}
.block-content.pt-0{
    padding:10px 0px !important;
}
.w-data {
    width: 21vw;margin-right: 10px;
}
/* customize scrollbar */
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

@media (min-width: 1200px) {
    .modal-content {
        padding: 20px;
    }
}
.modal-content {
    padding: 20px;
}

::-webkit-scrollbar
{
	width: 10px;
    height: 10px !important;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #adadad;
    border: 2px solid #adadad;
    border-radius:40px !important;
}
.alert-toko, #float-menu, .scroll-bt{
    max-width: 480px;
    /* height: 100%; */
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; */
    /* box-shadow: 0 0 15px 1px rgb(0 0 0 / 10%); */
}
.pagination>li>a, .pagination>li>span {
    width: 20px;
    height: 25px;
    line-height: 0.3;
    margin-left: 0px;
    /* padding-left: 4px; */
    /* padding: 13px;
    padding-left: 9px;
    padding-right: 16px;
    border-radius: 7px; */
    padding-left: 9px;
    padding-right: 17px;
    border-radius: 7px;
    padding-top: 10px;

}
iframe#launcher {
    /* position: fixed;
    max-width: 480px;
    left: calc(-48vw + 50%); */
    /* right: calc(-50vw + 50%) !important; */
    /* margin-left: auto !important;
    margin-right: auto !important; */
    /* box-shadow: 0 0 15px 1px rgb(0 0 0 / 10%); */
    /* top: 140px;
    right: -349px !important; */

}
/* media query only desktop */
@media (min-width: 992px) {
    iframe#webWidget {
        position: fixed;
        max-width: 37vw;
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* box-shadow: 0 0 15px 1px rgb(0 0 0 / 10%); */
        top: 0;
        /* right: -349px !important; */
        bottom: 0 !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100% !important;
    
    }
}
@media (max-width: 480px) {
    /* iframe#launcher {
        right: -349px !important;
    } */
}
.frame-story,.blur,.bg-framxe,.m-create {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
#main-container {
    margin-top: 71px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto  {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.btn-tutorial-desktop {
    display: none !important;
}
.d-lg-none, .d-md-none, .d-sm-none, .container-tutorial-mobile {
    display: block !important;
}
.d-lg-block, .d-md-block, .d-sm-block {
    display: block !important;
}
.md-text-right {
    text-align: left !important;
}
.card-row-1 {
    min-height: 150px !important;
    max-height: 100% !important;
    box-sizing: border-box;
}
.alert-toko {
    position: fixed !important;
}
#page-header {
    /* position: fixed; */
    /* z-index: 999; */
    max-width: 480px;
    position: fixed;
    top: 0;
    z-index: 999;
}
.box-an {
    width:251px;
}
.scrollHorizontal {
    overflow-x: scroll;
    white-space: nowrap;
}
.d-md-block.d-none {
    display: none !important;
}
@media (min-width: 992px) {
    #sidebar {
        width: 500px;
        /* margin-left: auto; */
        /* margin-right: auto; */
        /* margin-right: -37px; */
        max-width: 484px;
    }
    .sidebaropen {
        transform: translateX(0) translateY(0) translateZ(0) !important;
    }
    #side-overlay {
        width: 500px;
    }

}
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    text-align: center !important;
}
.modal {
    padding: 0px 20px !important;
}
.modal .modal-dialog {
    width: 100% !important;
}
.btn-outline-primary:not([disabled]):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #407ec9;
    border-color: #407EC9;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus {
    color: #fff !important;
    background-color: #407EC9;
    border-color: #407EC9;
}
.content {
    padding:0px !important;
}
.scrollHorizontal {
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100% !important;
}
#page-header>.content-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}
.content p, .content .push, .content .block, .content .items-push>div {
    margin-bottom: 10px !important;
}
#page-footer {
    margin-top: 30px !important;
}
#tb_kategori .table-light tr th {
    display: none;
    padding: 0px !important;
}
.row {
    display: block;
    margin: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.container {
    padding: 0px !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}
iframe#launcher {
    /* top: 23% !important; */
    /* right: -7% !important; */
    /* background: #d8960e;
    z-index: 999 !important;
    border-radius: 20px 0px 0px 20px !important; */
}