.m0   { margin: 0px !important; }
.m5   { margin: 5px !important; }
.m10  { margin: 10px !important; }
.m20  { margin: 20px !important; }
.m25  { margin: 25px !important; }
.mt0  { margin-top: 0px !important; }
.mt5  { margin-top: 5px !important; }
.mt6  { margin-top: 6px !important; }
.mt7  { margin-top: 7px !important; }
.mt8  { margin-top: 8px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mb0  { margin-bottom: 0px !important; }
.mb5  { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.ml0  { margin-left: 0px !important; }
.ml5  { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.mr0  { margin-right: 0px !important; }
.mr3  { margin-right: 3px !important; }
.mr5  { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mlx20 { margin-left: 20px; }
.p0   { padding: 0px !important; }
.p2   { padding: 2px !important; }
.p3   { padding: 3px !important; }
.p5   { padding: 5px !important; }
.p8   { padding: 8px !important; }
.p10  { padding: 10px !important; }
.p20  { padding: 20px !important; }
.pt0  { padding-top: 0px !important; }
.pt3  { padding-top: 3px !important; }
.pt4  { padding-top: 4px !important; }
.pt5  { padding-top: 5px !important; }
.pt7  { padding-top: 7px !important; } 
.pt8  { padding-top: 8px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pb0  { padding-bottom: 0px !important; }
.pb2  { padding-bottom: 2px !important; }
.pb3  { padding-bottom: 3px !important; }
.pb5  { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pl0  { padding-left: 0px !important; }
.pl5  { padding-left: 5px !important; }
.pl8  { padding-left: 8px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pr0  { padding-right: 0px !important; }
.pr5  { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.prx5 { padding-right: 0px !important; }
.prd5 { padding-right: 0px !important; }
.prdx5 { padding-right: 5px !important; }
.pldx5 { padding-left: 5px !important; }
.pls20 { padding-inline-start: 20px; }
.pld5  { padding-left: 5px !important; }
.px2 { padding-left: 2px;padding-right: 2px; }
.px5 { padding-left: 5px;padding-right: 5px; }
.px10 { padding-left: 10px;padding-right: 10px; }
.px15 { padding-left: 15px;padding-right: 15px; }
.py2 { padding-top: 2px;padding-bottom: 2px; }
.py5 { padding-top: 5px;padding-bottom: 5px; }
.py10 { padding-top: 10px;padding-bottom: 10px; }
.py15 { padding-top: 15px;padding-bottom: 15px; }
.pxc  { padding: 1px 2px !important; }
.p0-5  { padding: 0px 5px !important; }
.p0-10 { padding: 0px 10px !important; }
.p3-20  { padding: 3px 20px !important; }
.p5-0  { padding: 5px 0px !important; }
.p5-10 { padding: 5px 10px !important; }
.p8-15 { padding: 8px 15px !important; }
.p10-0 { padding: 10px 0px !important; }
.p10-5 { padding: 10px 5px !important; }
.pcustom { padding: 5px 0px 5px !important; }
.pcustomx { padding: 5px 0px 5px !important; }
.pspecial { padding: 5px 5px !important; }
.m45{min-height: 45px}

.font-8 { font-size: 8px !important; }
.font-9 { font-size: 9px !important; }
.font-10 { font-size: 10px !important; }
.font-11 { font-size: 11px !important; }
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-24 { font-size: 24px !important; }
.font-26 { font-size: 26px !important; }
.font-28 { font-size: 28px !important; }
.font-30 { font-size: 30px !important; }
.font-32 { font-size: 32px !important; }
.font-san {  font-family: sans-serif !important;}

.t4  { top: 4px; }  
.t5  { top: 5px; }
.top20  { top: 20px !important; }
.top30  { top: 30px !important; }
.top40  { top: 40px !important; }
.top50  { top: 50px !important; }
.top55  { top: 55px !important; }
.r5   { right: 5px; }
.r10  { right: 10px; }
.h20  { height: 20px !important; }
.h25  { height: 25px !important; }
.h30  { height: 30px !important; }
.h38  { height: 38px; }
.h50  { height: 50px; }
.h60  { height: 60px; }
.h80  { height: 80px; }
.h100 { height: 100px; }
.ln18 { line-height: 18px !important; }
.lh43 { line-height: 43px; }
.w16 { width: 16px; }
.w20 { width: 20px; }
.w25 { width: 25px; }
.w30 { width: 30px; }
.wi30 { width: 30px !important;}
.w32 { width: 32px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.wi80 { width: 80px !important; }
.w90 { width: 90px; }
.wi90 { width: 90px !important; }
.w100 { width: 100px; }
.wi100 { width: 100px !important; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.wi150 { width: 150px !important; }
.wi180 { width: 180px !important; }
.wi200 { width: 200px !important; }
.w160 { width: 160px; }
.w180 { width: 180px; }
.w200 { width: 200px; }
.w230 { width: 230px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w330 { width: 330px; }
.w350 { width: 350px; }
.w500 { max-width: 500px; }
.wx100 { max-width: 100px !important; }
.wi100 { width: 100px !important; }
.ww33 { width: 33% !important; }
.ww100 { width: 100% !important; }

.btn-38 { padding: 7px 35px 9px !important; }
.btn-38n { padding: 7px 10px 8px !important; }
.btn-25 {
    height: 25px;
    padding: 0px 10px 2px !important;
}
.btn-r5 { border-radius: 5px !important; }
.btn-r10 { border-radius: 10px !important; }

.border1 { border: 1px solid #8F8F8F; }

.pos-absolute { position: absolute; }
.pos-relative { position: relative; }
.pos-fixed { position: fixed; }
.pos-static { position: static; }
.pos-absolute-f { position: absolute !important; }

.brd-light {
    border:1px solid #DBDBDB;
}
.font-bold {
    /*font-weight: 600;*/
    font-weight: bold !important;
}
.font-up { text-transform: uppercase; }
.form_nom {
    width:100%;
    border-radius: 4px;
    border: 1px solid darkgrey;
    padding: 2px 5px;
    font-size: 12px;
}
.cust-header{
    padding: 5px 10px !important;
    font-size: 13px;
    background-color: #0893D8;
    color: #FFFFFF;
}
.subheader {
    padding: 5px 10px !important;
    background-color: #a3e03b;
    color: #FFF;
}
.pull-left {
    float: left;
}
.no-att{
    text-decoration: none !important;
}
.mfront{
    margin-top:10px;
    margin-bottom:20px;
}
.mbfront{
    margin-bottom:10px;
}
.no-border{
    border: 0px !important;
}
.custom_table>tbody>tr>td{
    padding: 3px 8px !important;
}
.swipe-area, .swipe-area-right{
    display: none;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.imgdiv{
    max-width: 100%;
    height: auto;
    border-radius: 5px !important;
}

.imgdiv:hover{
    border: 3px solid #0893D8;
}
.img300{
    max-width: 300px;
    height: auto;
}
.imgart{
    max-width: 500px;
    height: auto;
}
.imgfr{
    max-width: 100%;
    height: auto;
}
.imgdet{
    max-width: 100%;
    height: auto;
    border-radius: 5px !important;
}

.hsp80 { height: 60px; }

.special {
    position: fixed;
    top: 65px;
    width: calc(100% - 300px);
    z-index: 2;
}
.bottom-ppob{
    top: 55px;
    position: relative;
}
.search-input::placeholder {
    color: #FFFFFF !important;
    opacity: 1
}
.opsitime{
    border: solid 1px lightgrey;
    border-radius: 3px;
}
.ribbon-wrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    left: -3px;
}
.ribbon {
    color: #b73556;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    padding: 4px 0;
    top: 15px;
    left: -30px;
    width: 130px;
    background-color: #FDD011;
    z-index: 100;
    font-weight: bold;
}
.ribbon-red {
    color: #fff;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    padding: 4px 0;
    top: 15px;
    left: -30px;
    width: 130px;
    background-color: #ed1c24;
    z-index: 100;
    font-weight: bold;
}
.blink {
    animation: blinker 0.6s linear infinite;
    color: #1c87c9;
    font-weight: bold;
    font-family: sans-serif;
}
.topnotch {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.post-title {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: gray;
    line-height: 1.5555556;
}
.entry-meta{
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.15);
    margin-bottom: 15px;
}
.product-base {
    padding: 12px;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26, 54, 126, 0.125);
    border-radius: .25rem;
    box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
    border-width: 0;
    transition: all .2s;
}
.product-grid {
    margin: -15px;
    flex-wrap: wrap !important;
}
.grid-spacing-xs-3 {
    width: calc(100% + 24px);
    margin: -12px;
}
.grid-wrap-xs-nowrap {
    flex-wrap: nowrap;
}
.grid-container {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.product-grid .product-item {
    margin-top: 0px;
    margin-bottom: 0px;
}
.grid-spacing-xs-3 > .grid-item {
    padding: 10px;
}
.grid-grid-xs-3 {
    flex-grow: 0;
    max-width: 25%;
    flex-basis: 25%;
}
.grid-item {
    margin: 0;
    box-sizing: border-box;
}
.product-grid .product-icon {
    height: 45px !important;
    width: 45px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.product-grid .product-icon img {
    max-height: 40px !important;
    max-width: 40px !important;
}
div img, div svg {
    cursor: pointer;
}
.product-grid .product-name {
    color: #606060;
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
::-webkit-input-placeholder { /* Edge */
    color: #D6D6D6;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #D6D6D6;
}
::placeholder {
    color: #D6D6D6;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

@media (max-width: 576px) {
    .special { width: 100%; }
    .mx5 { margin-bottom: 5px !important; }
    .bottom-ppob{
        top: 105px;
        position: relative;
    }
    .prx5  { padding-right: 15px !important; }
    .prd5  { padding-right: 5px !important; }
    .pld5  { padding-left: 0px !important; }
    .prdx5 { padding-right: 15px !important; }
    .pldx5 { padding-left: 15px !important; }
    .wx100 { width:100%; }
    .hsp80 { height: 50px; }

    .swipe-area{
        display: unset;
        position: fixed;
        top: 150px;
        left: 0;
        bottom: 0;
        width: 50px;
        background-color: transparent;
        z-index: 99999;
    }
    .swipe-area-right{
        display: none;
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        width: calc( 100% - 250px);
        background-color: transparent;
        z-index: 99999;
    }
    .sidebar-mobile-open .swipe-area{
        display: none;
    }
    .sidebar-mobile-open .swipe-area-right{
        display: unset;
    }
    .mfront{
        margin-top:5px;
        margin-bottom:20px;
    }
    .mbfront{
        margin-bottom:20px;
    }
    .pcustom { padding: 0px 0px 5px !important; }
    .pcustomx { padding: 0px !important; }
    .pspecial { padding: 5px 5px !important; }

    .hidden-disp {
        display: none!important;
    }
    .tablex table {
        width: 100%;
    }
    .tablex thead th.column-primary {
        width: 100%;
        border: none;
    }
    .tablex thead th:not(.column-primary) {
        display:none;
    }
    th[scope="row"] {
        vertical-align: top;
        text-align: center;
    }
    .tablex td.undisp {
        display:none !important;
    }
    .tablex td.noborder{
        border: none;
    }
    .unproc {
        display:none !important;
    }
    .cust-header{
        padding: 5px 10px !important;
        font-size: 13px;
        background-color: #0893D8 !important;
        color: #fffff;
    }
    .tablex td {
        display: block;
        width: auto;
        background-color: #e6e6e6;
        font-size: 12px !important;
    }
    .tablex thead th::before {
        content: attr(data-header);
    }
    .tablex thead th span {
        display: none;
    }
    .tablex td::before {
        display: block;
        white-space: pre;
        float: left;
        content: attr(data-header);
    }
    .inline-table {
        background-color: #FFFFFF !important;
    }
    .inline-table td {
        display: table-cell;
        /*border: none;*/
        border-bottom: 1px solid #EBEBEB;/*none !important;*/
        background-color: #FFFFFF !important;
        /*height: 36px;*/
    }
    .inline-table td.lnob{border-left: none !important;}
    .inline-table td.rnob{border-right: none !important;}
    .inline-table td.tnob{border-top: none !important;}
    .inline-table td.bnob{border-bottom: none !important;}
    .inline-table td.xnob{
        border: none !important;
    }
    .mlx20 { margin-left: 0px; }
    .scroll-area-md {
        height: 420px !important;
    }
    .custom_table>tbody>tr>td{
        padding: 3px 3px !important;
    }
    .img300,.imgart{
        max-width: 100% !important;
        height: auto;
    }
    .top-menu-detail {
        padding: 0px !important;
    }
    .app-page-title {
        padding: 10px 15px !important;
    }
    .mobile-no-margin {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .mobile-col {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .mobile-card {
        border-radius: 0px !important;
        box-shadow: unset;
    }

}

@media (min-width: 577px) {
    .hidden-exp {
        display: none !important;
    }
    .tablex td {
        font-size: 13px !important;
    }
    .tablet td {
        padding: 2px 8px !important;
    }

    .rpad5{
        padding-right:5px !important;
    }
    .rleft5{
        padding-left:5px !important;
    }
}

@media (max-width: 768px) {
    .unproc {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .menu-top-height{
        display: none !important;
    }
    .lastcol{
        flex: 0 0 21% !important;
        max-width: 21% !important;
    }

}

.lenob{ border-left: none !important; }
.rinob{ border-right: none !important; }

.pointer{
    cursor: pointer;
}
.clx{
    font-size: 19px;
    vertical-align: super;
}
.badget-pright{
    float: right;
    margin-top: 6px;
    margin-right: -20px;
}

.grecaptcha-badge{
    display: none !important;
}
.app-header .header-text-light .app-header__logo .logo-src {
    background: url(../images/logo.png);
    z-index: 4000;
}
.bg-dupul {
    background-color: #ABCF00 !important
}
a.bg-dupul:hover,
a.bg-dupul:focus,
button.bg-dupul:hover,
button.bg-dupul:focus {
    background-color: #A3E03B !important
}
.bg-primary-dp {
    background-color: #0893D8 !important
}
a.bg-primary-dp:hover,
a.bg-primary-dp:focus,
button.bg-primary-dp:hover,
button.bg-primary-dp:focus {
    background-color: #3F6BD9 !important
}
.loader-custom{
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -45px;
    margin-top: -15px;
}
.avatar-icon-xxl .avatar-icon {
    width: 164px;
    height: 164px
}

.bg1-webuser{
    background: url(../images/bg1.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg2-webuser{
    background: url(../images/bg2.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg3-webuser{
    background: url(../images/bg3.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg4-webuser{
    background: url(../images/bg4.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg5-webuser{
    background: url(../images/bg5.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg6-webuser{
    background: url(../images/bg6.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg7-webuser{
    background: url(../images/bg7.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg8-webuser{
    background: url(../images/bg8.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bg9-webuser{
    background: url(../images/bg9.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.tranx{
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}
.app-logo-webuser {
    height: 30px;
    width: 100px;
    background: url(../images/logowebuser.png)
}
.app-logo-webcetak {
    height: 30px;
    width: 200px;
    background: url(../images/cetakstruk.png)
}

.btn-active{
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    color: #fff !important;
    background-color: #70737C !important;
    border-color: #70737C !important;
}
.btn-active:hover{
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    color: #fff !important;
    background-color: #5E6168 !important;
    border-color: #5E6168 !important;
}
.btn-activex{
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    color: #fff !important;
    background-color: #525961 !important;
    border-color: #525961 !important;
}
.btn-activex:hover{
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    color: #fff !important;
    background-color: #38393E !important;
    border-color: #38393E !important;
}
.vlist{
    margin: 2px;
    line-height: 15px;
}
.btn-active.vlist:hover{
    color: #fff !important;
}

.ckbox {
    font-weight: normal;
    position: relative;
    display: block;
    line-height: 1;
    margin-bottom: 0; }
    .ckbox span {
        padding-left: 15px; }
        .ckbox span:empty {
            float: left; }
        .ckbox span:before, .ckbox span:after {
            line-height: 18px;
            position: absolute; }
        .ckbox span:before {
            content: '';
            width: 16px;
            height: 16px;
            background-color: #fff;
            border: 1px solid #969dab;
            top: 1px;
            left: 0; }
        .ckbox span:after {
            top: 1px;
            left: 0;
            width: 16px;
            height: 16px;
            content: '';
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
            background-size: 65%;
            background-repeat: no-repeat;
            background-position: 55% 45%;
            background-color: #007bff;
            line-height: 17px;
            display: none; }
        .ckbox span:empty {
            padding-left: 0;
            width: 3px; }
    .ckbox input[type='checkbox'] {
        opacity: 0;
        margin: 0; }
        .ckbox input[type='checkbox']:checked + span:after {
            display: block; }
        .ckbox input[type='checkbox'][disabled] + span,
        .ckbox input[type='checkbox'][disabled] + span:before,
        .ckbox input[type='checkbox'][disabled] + span:after {
            opacity: .75; }

.ckbox-inline {
    display: inline-block;
}
.select2-container .select2-selection--single {
    height: 38px !important;
}
.select2-selection__arrow {
    height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}
.avatar-icon-wrapper .avatar-icon a {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #70737c;
    color: #fff;
    font-size: 18px;
    line-height: .9;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 100%;
}
.avatar-icon a:hover {
    background-color: #0056b3 !important;
    text-decoration: none;
}
.bg-avatar {
    background-color: #efefef !important;
    border-radius: 50px;
}
.label_aktif{
    background: rgb(0, 143, 251);
    color: rgb(0, 143, 251);
    height: 12px;
    width: 12px;
    left: 0px;
    top: 0px;
    border-width: 0px;
    border-color: rgb(255, 255, 255);
    border-radius: 2px;
}
.label_nonaktif{
    background: rgb(204, 0, 51);
    color: rgb(204, 0, 51);
    height: 12px;
    width: 12px;
    left: 0px;
    top: 0px;
    border-width: 0px;
    border-color: rgb(255, 255, 255);
    border-radius: 2px;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-alternate,
.btn-outline-focus, .btn-outline-light,
.btn-outline-warning, .btn-outline-info {
    background-color: white;
}
.btn-custom {
    min-width: 75px !important;
    height: 75px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 11px !important;
}
.hide {
    display: none!important;
}
.d-block{
    display: block !important;
}
.ck-editor__editable {
    min-height: 150px;
}
.popover-block-container {
    .popover-icon {
        background: none;
        color: none;
        border: none;
        padding: 0;
        outline: none;
        cursor: pointer;
        i {
            color: #FFFFFF;
            text-align: center;
            margin-top:4px;
        }
    }
}
.popover {
    max-width: 400px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0 5px 1px #C7C7C7;
}
.popover-body {
    border: none;
    padding: 8px 10px;
    font-size: 13px;
    z-index: 2;
    line-height: 1.53;
    letter-spacing: 0.1px;
}

.bg-icon {
    background-color: #efefef !important;
    border-radius: 20px;
    width: 130px;
}
.pro-icon {
    display: block;
    width: 44px;
    height: 44px;
    transition: all .2s;
    opacity: 1;
    border-radius: 20px;
    border: #fff solid 3px;
    overflow: hidden;
}
.pro-icon-wrapper .pro-icon a {
    position: absolute;
    bottom: 0;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #70737c;
    color: #fff;
    font-size: 18px;
    line-height: .9;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 100%;
}
.pro-icon-xxl .pro-icon {
    width: 130px;
    height: 130px
}

.bg-head-icon {
    background-color: #efefef !important;
    border-radius: 20px;
    width: 305px;
}
.head-icon {
    display: block;
    transition: all .2s;
    opacity: 1;
    border-radius: 20px;
    border: #fff solid 3px;
    overflow: hidden;
}
.head-icon-wrapper .head-icon a {
    position: absolute;
    bottom: 0;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #70737c;
    color: #fff;
    font-size: 18px;
    line-height: .9;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 100%;
}
.head-icon-xxl .head-icon {
    width: 305px;
    height: 130px
}

.imgBox {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    color: #ecf0f1;
    border-radius: 4px;
    border: 1px solid #ddd;
    /*cursor: pointer;*/
}

.image-upload {
    position: absolute;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    width: inherit !important;
    height: 33px;
    top: 125px;
    left: 0px;
}

.image-label {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #bdc3c7;
    color: #000000;
    width: 160px;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    text-transform: uppercase;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}
.image-del {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #FFCCFF;
    width: 10px;
    height: 10px;
    /*left: 0;*/
    right: 10;
    bottom: 10;
    margin: auto;
}
[item] .trash-image{
    position:absolute;
    left:20px;
    top:3px;
    z-index:10;
    cursor: pointer;
}
.imgBox{
    display:table;
}
.imgBox .add-image{
    display:table-cell;
    vertical-align:middle;
}
.imgBox .add-image img{
    width:75px;
    height:75px;
    opacity:.5
}
.thumb{
    width: 50px;
    height:50px;
}
.rating-table, .detail-table{
    display: inline-table;
    border: none;
    width: 100%;
}
.rating-table td {
    width: auto;
    background-color: transparent;
    padding: 1px 2px !important;
    border: none !important;
}
.detail-table td {
    width: auto;
    background-color: transparent;
    padding: 2px 8px !important;
    border: none !important;
}
.detail-table tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}
.detail-table td > span {
    margin-right:10px;
}
.imgthumb {
    padding:2px;
    border-radius: 5px;
    height:49px;
    width:49px;
}
.brad5{
    border-radius: 5px;
}
.brad10-white{
    border-radius: 10px;
    border: 8px solid white;
}
.brad3-white{
    border-radius: 5px;
    border: 1px solid white;
}

.table-detail td {
    padding: 0.5375rem !important;
}
.table-detail td img {
    height: auto !important;
}
.table-detail td p {
    font-size: 13px;
    line-height: 1.4;
}
.badge-sp {
    line-height: 1.3 !important;
    padding: .25rem 0.6rem !important;
}

.card-link{
    font-size: 13px;
    text-decoration: underline;
}
.cdborder{
    border: 1px solid #EDEDED;
}
.no-line{
    text-decoration: none !important;
}
.det-prod{
    padding: 0px 10px;
    width: 50%;
}
.det-prod-right{
    padding: 0px 10px 20px;
    width: 50%;
    text-align: right;
}
.price-label{
    width: 100px;
    font-size: 14px;
    color: #B5B5B5;
    font-weight: 500;
}
.price-label span{
    vertical-align:middle;
}
.price-label-detail{
    width: inherit;
    font-size: 16px;
    color: #FA8866;
    font-weight: 800;
}
.det-normal{
    font-size: 14px;
    color: #B5B5B5;
    font-weight: 500;
}

.weight-label{
    width: 100px;
    font-size: 14px;
    color: #B5B5B5;
    font-weight: 500;
}
.weight-label-detail{
    width: inherit;
    font-size: 14px;
    color: #B5B5B5;
    font-weight: 500;
}

.count-heart-icon{
    font-size: 18px;
    vertical-align: middle;
}
.count-heart{
    font-size: 13px;
    vertical-align: middle;
    margin-right: 10px;
}
.row-right{
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0px 10px;
}
.br-widget {
    height: 28px;
    white-space: nowrap;
}
.br-widget-rekom {
    height: 28px;
    white-space: nowrap;
}
.br-widget-rekom .fa {
    font-size: 12px;
    margin: 3px 1px 2px 0px;
    padding: 10px 0px;
}

.active-star {
    color: #ffb463;
}
.non-active-star {
    color: #d2d2d2;
}
.tx-gray {
    color: #d2d2d2;
}
.price{
    margin-bottom: 10px;
    width: 100%;
}
.tag-price{
    color: #d2d2d2;
    font-size: 13px;
}
.nom-price{
    color: #FA8866;
    font-size: 15px;
    font-weight: 600;
}
.nom-promo{
    color: #B5B5B5;
    font-size: 12px;
    margin-bottom: -6px;
}
.price-rekom{
    margin-bottom: 5px;
    width: 100%;
    height: 40px;
}
.nom-price-rekom{
    color: #FA8866;
    font-size: 15px;
    font-weight: 600;
}
.nom-promo-rekom{
    color: #B5B5B5;
    font-size: 11px;
    margin-bottom: -6px;
}

.gj-cursor-pointer div {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #E3FFC7;
}
.head-etiket, .sub-etiket {
    border: 1px solid lightgrey;
    border-radius: 4px;
}
.sub-etiket .widget-chart {
    padding: 10px !important;
}