/* custom style ayrus */

/* fonts celah */
@font-face {
    font-family: 'celahreguler';
    src: url('barlow-light.eot');
    src: url('fonts/celah-reguler.eot?#iefix') format('embedded-opentype'),
            url('fonts/celah-reguler.woff') format('woff'),
            url('fonts/celah-reguler.woff2') format('woff2'),
            url('fonts/celah-reguler.ttf') format('truetype'),
            url('fonts/celah-reguler.svg#celahreguler') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* icon */
@font-face {
    font-family: 'iconcelah';
    src: url('barlow-light.eot');
    src: url('fonts/iconcelah.eot?#iefix') format('embedded-opentype'),
            url('fonts/iconcelah.woff') format('woff'),
            url('fonts/iconcelah.ttf') format('truetype'),
            url('fonts/iconcelah.svg#celahreguler') format('svg');
    font-weight: normal;
    font-style: normal;
}
.iconcelah, .nav-tabs-dropdown:before,
.form-check .form-check-label .input-helper::after, .form-check .form-check-label .input-helper::before,
.fc-icon-left-single-arrow::after, .fc-icon-right-single-arrow::after,
.form-radio.form-radio-flat label input:checked + .input-helper::after, .fa
{ font-family: "iconcelah", arial; }
.iconbig { font-size: 4rem; }
.iconmid { font-size: 3rem; }
.iconheader { font-size: 1.2rem; }
.navbar-nav-right .iconheader { font-size: 1.7rem; font-size: 1.5rem; color: #3c3c3c;}

.font-reg, body,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
.sidebar, .sidebar .nav .nav-item.nav-profile .profile-name .designation, 
.sidebar .nav .nav-item.nav-profile .profile-name .name, .navbar, .btn, .badge,
.form-control, .table thead th
{ font-family: "celahreguler", arial; }

/* basic style */
a:hover, .wrapper-listitems ul li a:hover { 
    text-decoration: none;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }
.content-wrapper, .sidebar { background: #fff;}
.navbar { background: #fff;}
.card { border-radius: 10px; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05);}
.navbar .navbar-menu-wrapper { color: #ccc; }
.listnonstyle ul { padding-left: 0; }
.listnonstyle ul li { list-style: none; margin-bottom: 0; }
.wrapper-rp { display: inline; position: relative;}
.rp { position: absolute; font-size: 1rem; left: -23px; color: #727272;}
.wrapper-formshow { 
    padding: 1rem 1.5rem;
    /* background: #fbfbfb; */
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 0 30px #eaeaea;
}
.form-default .wrapper-title-form { margin-bottom: 2.2rem; margin-top: 1.5rem;}
.wrapper-title-form h3 { margin-bottom: 0.1rem; }
.wrapper-title-form p { color: #8d8d8d; font-size: 0.8rem;}
#vn-info { display: none; }
#vn-click2{ 
    min-width: auto;
    margin-left: -1.5rem;
    margin-top: -1rem;
    border-radius: 10px 0 10px 0px;
    padding: 0.6rem 1.3rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}
.wrapper-btnform { margin: 2rem 0 1rem; }
.form-control { color: #000; font-size: 0.9rem; }
.btn-group .btn.btn-primary:hover { border-color: #fff; }
.wrapper-btnform .btn.btn-primary { font-size: 1rem; }
.icon-menu::before { font-size: 1.7rem; content: "\e98d"; }
.icon-order::before { font-size: 1.7rem; content: "\e9c7"; }
.icon-eyeoff::before { font-size: 1rem; content: "\e95c"; }
.icon-eyeon::before { font-size: 1rem; content: "\e95b"; }
.form-check .form-check-label .input-helper::after { content: "\e92c"; font-weight: normal; font-style: normal; font-size: 1.3rem; }
.form-check.lovesign .form-check-label .input-helper::before { 
    border: none;
    top: -4px;
    color: #a4a4a4;
}
.form-check.lovesign .form-check-label .input-helper::before,
.form-check.lovesign .form-check-label .input-helper::after { 
    content: "\e975";
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    background: #fff;
    width: auto;
    height: auto;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
}
.form-check.lovesign .form-check-label input:checked + .input-helper::after { 
    background:#ff5656;
    width: 1.64rem;
    height: 1.71rem;
    top: -4px;
    line-height: 25px;
    color: #fff;
 }
 .form-check-label { cursor: pointer;}
.lovesign { position: absolute; right: 1px; top: -5px; }
.status-own { 
    padding: 0.4rem 1rem;
    min-width: 100px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    display: inline-block;
}
.so-active { background: #8cffba; color: #636363; }
.so-resign { background: #ccc;}
.so-nyetak { background: #3fccf7;}
.so-pengiriman { background: #0095ec;}
.so-terkirim { background: #00A720;}
.wrapper-formsecondmodal { max-width: 100%; flex: 100%; margin: 1rem 0;}
.grid-form-secondmodal { margin: 1rem 0; }
.btn.btn-secondary.add-ux { min-width: auto; margin: 0 0 0 -2.5rem; }
.new-catinput { margin: 0.5rem 0 0 0.5rem; width: 80%; border-radius: 4px;}
.form-control.new-catinput::placeholder { color: #a0c0c8; }
/* .filter-content { margin: 1rem -1.8rem;  background: #f5f4ff; padding: 0.8rem 1rem 0rem;} */
.filter-content { margin-top: 2rem; }
.filter-content .form-group { margin-bottom: 0; }
.filter-content ul li { width: 23%; float: left; margin: 0 1%;}
.filterow .card-body { padding: 1.2rem 1rem 0; height: 70px; }
.form-radio.form-radio-flat label input:checked + .input-helper::after {
    content: '\e92b';
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    left: 0;
    top: 0;
}
.radio-fleft .form-radio { 
    width: 43%;
    float: left;
    margin: 3% 2%;
}
.radio-fleft .col-sm-3 { flex: 100%; max-width: 100%;}
.radio-liststyle .form-radio label, .radio-liststyle .form-check label {
    background: #f2f2f2;
    padding: 1rem 1.3rem 1rem 3rem;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    height: 55px;
    overflow: hidden;
    text-align: left;
}
.radio-liststyle .form-radio label input + .input-helper::before,
.radio-liststyle .form-radio label input:checked + .input-helper::after,
.radio-liststyle .form-check label input + .input-helper::before,
.radio-liststyle .form-check label input:checked + .input-helper::after
{ margin: 1rem; }
.radio-liststyle .form-radio label input + .input-helper::before,
.radio-liststyle .form-check label input + .input-helper::before 
{ border: 2px solid #cbcbcb; }
.radio-liststyle .form-radio label input:checked + .input-helper::after
 { border: none; }
 .radio-liststyle .form-check label input:checked + .input-helper::after 
 { background: #fff;  }
.form-check.form-radio-flat { padding-left: 0; }
.wrapper-rfleft { margin-left: 10px; }
.hide { display: none; }
.form-control:disabled::placeholder { color: #000; }
.note-input { text-align: right; font-size: 0.8rem; margin-top: 0.5rem;}
.note-input a { }
.addnotes-product { margin-bottom: 0.7rem; }
.addnotes-product .notes1 { font-size: 0.9rem; }
.addnotes-product .notes2 { font-size: 1.4rem; }
.gobtn {  position: absolute; top: 16px; right: 10px; }
.btn.btn-fw.gobtn { min-width: 50px; z-index: 100; }
.btn.btn-primary.fullbtn { width: 100%; font-size: 1.5rem; padding: 1rem;}
.form-control { padding: 0.8rem 0.75rem; }
.wrapper-toppages .btn-secondary .iconsmall { font-size: 1.3rem; }
.note-textinput { 
    font-size: 0.78rem;
    padding: 0.5rem 0;
    text-align: right;
    color: #7fc1f9;
}

/* table */
.py-1 .bs-img { margin: 0.4rem 0; }
table tbody tr td, .first-hs { color: #929292; }
table.table thead tr th { font-size: 1rem; text-align: center; }
.table td, .table th { text-align: center; }
table .action-listdata a { padding: 0.5rem;}
table td.texleft-table { width: 20%; line-height: 20px;}
.py-1 .thumb-medium-table { width: 70px; }
.order-list tr td, .custom-list tr td { width: 25%; } 

.table thead th, .title-taglist { color: #656565; }
.wrapper-table { margin-top: 30px; }

/* basic color */
.fc-state-default { background: #fff;}
.greencolor, .icon-eyeon::before { color: #00c21e !important; }
.redcolor { color: #ea3232 !important; }
.outcolor { color: #5d5d5d; }
.notecolor { color: #7fc1f9 !important; }
a, a:hover, .text-maincolor,
#tab-bestseller ul li.nav-one a.current, #tab-bestseller ul.featured li a:hover,
#tab-bestseller ul li.nav-two a.current, #tab-bestseller ul.core li a:hover,
#tab-bestseller ul li.nav-three a.current, #tab-bestseller ul.jquerytuts li a:hover,
#tab-bestseller .nav li a, .sidebar .nav .nav-item.active > .nav-link, 
ul.pagination li.active a, .wrapper-btn-modaldialog .btn-primary, .wrapper-btn-modaldialog .btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active, 
.show > .btn-primary.dropdown-toggle, .wrapperleft-contentitems #nav-tabs-wrapper li a.active, 
#addrow, #addrow-customitem, #tab-login ul.nav li a.current, .numitems-topsale .btn,
.paymentmethod .card-header.active .btn-link, .sidebar .nav .nav-item a.nav-link:hover
{ color: #ff9234; }
.back-maincolor, .btn-color, .owl-dot.active span, .wrapper-filteremployee .btn.active,
.fc-state-active, .fc-state-down, .btn-branch.active, .action-listdata a
{ background: #ff9234; color: #fff;}
.bordercolor,
#tab-bestseller ul.nav li a.current, .badge-info
{ border-color: #ff9234; }
.grey-bg, .owl-dot span { background: #ccc; }
.btn-primary, .btn-primary:hover,
.show > .btn-primary.dropdown-toggle {
    color: #ff9234;
    background-color: #ffffff;
    border-color: #ff9234;
    font-size: 0.9rem;
}
.wrapper-btnform .btn-primary, .form-radio label input + .input-helper:after { 
    background: #ff9234;  /* fallback for old browsers */
    color: #fff;
}
.navbar-nav-left a span.iconheader, .iconlink-head,
.iconcelah.icon-menu.text-maincolor
{ color: #5f5f5f; }
.gradientlight {
    background: #FFAD8E;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FFAD8E, #F25597);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FFAD8E, #F25597); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gradientpercent {
    background: #f8c207;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f8c207, #f5d053);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f8c207, #f5d053); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.col-form-label, .gray-color { color: #6c6c6c; }
.col-form-label, .form-check-label, .info-saldolink ul li { color: #929292; }
.btn-secondary, .btn-secondary:hover { 
    background: #e2e2e2;
    color: #8c8c8c;
    font-size: 0.9rem;
    padding: 0.7rem 1.5rem;
    border: none;
}
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active
 { background: transparent; }
.oncolor-background, .range-calendar .months .cell.selected,
.default-theme .range-bar
 { background: #04bc95;}
.range-calendar .months .cell.selected, .default-theme .range-bar { border-radius: 7px; }
.oncolor-text, .monthyear-pick { color: #04bc95; }
.green-colorsale, .warning-items.green-colorsale { background: #58ff6c; }
 

/* basic button */
.btndefault { padding: 10px 15px; }
.btnborder { border: 1px solid #7c4bff; }
.btn.text-maincolor { background: #f4f4f4; width: 100%; }
.btn-icon { 
    padding: 0.2rem 0.8rem 0.3rem;
    border-radius: 5px;
    margin-top: 0.1rem;
    display: inline-block;
    font-size: 0.8rem;
}
.wrapper-title-form a, .saldo-leftmenu p,
.note-input a { color: #ff7474; text-decoration: underline; }
a:hover, .saldo-leftmenu a:hover p { font-style: normal; text-decoration: none; color: #ff7474; }
.saldo-leftmenu p { margin-bottom: 0;}
.saldo-leftmenu .rp { font-size: 0.8rem; left: -20px;}
.saldo-leftmenu h3 { color: #000;}
#showcustomcontent.search-saldo { border: none; padding-left: 0; width: 50%;}
.dd-custom.search-saldo button.btn { width: 19%; }
.list-rb-saldo ul li { 
    float: left;
    list-style: none;
    width: 30%;
    margin: 0 1.5%;
}
.list-rb-saldo ul { padding-left: 0; }
.wrapper-list-historysaldo {  width: 70%; }
.time-hs.title-taglist { margin-top: 0; }
.right-historysaldo { font-size: 1.2rem;}
.right-historysaldo p { 
    font-size: 0.7rem;
    color: #989898;
    margin-bottom: 0;
    margin-top: 0.2rem;
}
.wrapper-list-historysaldo ul li { padding: 0.6rem 0; border-bottom: 1px solid #f5f5f5;}
.wrapper-list-historysaldo .wraper-paging ul.pagination li { border: none; }
.wrapper-list-historysaldo p.notecolor { font-size: 1rem; }
.info-saldolink {
    width: 25%;
    text-align: right;
    background: #f9f9f9;
    border-radius: 7px;
    padding: 1rem;
    border: 1px solid #f1f1f1;
}
.info-saldolink ul {  margin-top: 0.4rem; }
.title-sl {
    background: #fff;
    margin: -1rem -1rem 0;
    border-radius: 5px 5px 0 0;
    padding: 0.5rem;
}
.info-saldolink ul li { font-size: 0.8rem;  padding: 0.5rem 0; }
.title-slright { 
    font-size: 1rem;
    margin-bottom: 0.4rem;
    color: #4a4a4a;
}
.saldo-popup { 
    margin-bottom: 1rem;
    background: #d0edfb;
    margin: -1rem -1.5rem 1.5rem;
    padding: 0.5rem 1rem;
 }
.wrapper-popup-norek { margin: 1rem 0; }
.info-norek-popup { 
    background: #f1f1f1;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: #6b6b6b;
    font-size: 0.9rem;
}

/* toogle on off */
/* toogle */
.show-customform { display: none; }
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 60px;
    height: 30px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}
input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 23px;
    background-color: #dddddd;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label { background-color: #41dfbe; }
input.cmn-toggle-round-flat:checked + label:after { margin-left: 29px; background-color: #41dfbe; }
.texttoggleform { margin-bottom: 5px; padding-top: 8px;}

.toogle-medium input.cmn-toggle-round-flat + label::after { width: 27px; }
.toogle-medium input.cmn-toggle-round-flat + label { width: 70px; height: 35px; }
.toogle-medium input.cmn-toggle-round-flat:checked + label::after { margin-left: 35px; }

.on-toggle { font-size: 10px; margin: 6px 10px; position: absolute; color: #41dfbe; }
.off-toggle { font-size: 0.6rem; margin-left: 31px; color: #424242; }

/* header */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count 
{ font-weight: normal; color: #fff; border-radius: 4px; }
.navbar-nav-right a { border: 1px solid #efefef; padding: 0.1rem 0.6rem; border-radius: 7px;}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item 
{ border-bottom: 1px solid #f8f8f8; }
.preview-item-content .preview-subject .time-textemail {
    color: #ff7474;
    font-weight: normal !important;
    font-size: 0.7rem;
    margin-top: 4px;
    display: block;
    width: 100%;
}
.preview-list .preview-item .preview-thumbnail .preview-icon, .preview-list .preview-item .preview-thumbnail img { 
    height: auto;
}
.sidebar .nav .nav-item.nav-profile .nav-link { padding: 0 1.625rem 1.2rem 1.188rem; }
.navbar .navbar-brand-wrapper .navbar-brand img { width: auto; margin-top: -5px; height: 35px;}

/* left menu */
.iconleftmenu { margin: 0rem 1rem 0 0; }
.sidebar .nav .nav-item .nav-link .menu-title { font-size: 1rem; }
.arrowsublist { margin-left: auto; }
.sidebar .nav .nav-item .nav-link { color: #7d7d7d;}
.sidebar .nav .nav-item a.nav-link:hover { 
    background: #fbf8e7 !important;
    border-radius: 0px 10px 10px 0px;
}

/* dashboard */
.topdashboard h3 { font-size: 2rem; }
.topdashboard .card-body { padding: 1rem 1.81rem; }
.topdashboard .text-topstatic { margin-bottom: 10px; }
.topstatic-dashboard .float-left.text-topstatic { margin: 3px 10px; }
.selectbranch-time .card-body { padding: 1.5rem 1rem 0.5rem; }
.wrappertime-chart .form-group label.btn { margin-bottom: 0 !important; font-size: 0.9rem; }
.wrapper-chartdashboard #canvasrevenue,
.wrapper-chartdashboard #canvassale,
.wrapper-chartdashboard #canvascustomer
{ border-radius: 0 0 10px 10px; }
.wrapper-doughnut-bestseller #doughnutChart { width: 100%; }
.dd-selectbranch { 
    transform: translate3d(1px, 37px, 0px) !important;
    padding: 0;
    min-width: 200px;
    right: 0 !important;
}
.dd-selectbranch li a {
    width: 100%;
    display: block;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #f4f4f4;
}
.wrapper-selectbranchtop { position: relative; width: auto; display: inline-block; }
.titleselect-branch { 
    min-width: 173px; 
    border-color: #f1f1f1;
    border-top: none;
}
.dd-monthly { margin-top: -2px; margin-left: 1px;}
.dd-monthly .wrapper-selectbranchtop { margin-top: -1px; }
.dd-monthly button.titleselect-branch { width: 173px; border-radius: 0px 0px 0px 3px; padding: 13px;}
.dd-monthly button.dropdown-toggle { 
    border-radius: 0px 0 3px 0px;
    margin-left: -5px;
    background: #fff;
    border: 1px solid #f1f1f1;
    padding: 13px;
    width: 58px;
 }
.dd-custom { 
    width: 316px;
    background: #fff;
    padding: 0.5rem 0.5rem 0;
    border: 1px solid #f3f3f3;
    border-radius: 0 0 4px 4px;
    border-top:none;
}
.dd-custom input.float-left { width: 37%; margin: 0.3rem;}
.dd-custom button.btn { 
    width: 50px;
    margin: 0.3rem 0 0 0.3rem;
    height: 45px;
    background: #ff9234;
    color: #fff;
    font-size: 0.9rem;
}

/* dashboard no product */
.form-default .nomargin-top, .nomargin-top { margin-top: 0; }
.note-popover.popover { display: none;}
.addmargin-bottom { margin-bottom: 1rem; }

/* nav tabs */
#tab-bestseller {  }
#tab-bestseller .list-wrap ul, #tab-login ul { padding-left: 0; margin-bottom: 0; }
#tab-bestseller .nav { overflow: hidden; margin: 0 0 20px 0; }
#tab-bestseller .nav li { width: auto; float: left; margin: 0 10px 0 0; }
#tab-bestseller .nav li.last { margin-right: 0; }
#tab-bestseller .nav li a { 
    display: block;
    padding: 5px;
    font-size: 0.7rem;
    text-align: center;
    border: 0;
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}
#tab-bestseller ul.nav li a.current { border-bottom: 2px solid; border-radius: 0; }
#tab-bestseller .nav li a:hover { }
#tab-bestseller ul { list-style: none; }
#tab-bestseller ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#tab-bestseller ul li a:hover { text-decoration: none;}
#tab-bestseller ul li:last-child a { border: none; }
#tab-bestseller ul li.nav-one a.current, #tab-bestseller ul.featured li a:hover,
#tab-bestseller ul li.nav-two a.current, #tab-bestseller ul.core li a:hover,
#tab-bestseller ul li.nav-three a.current, #tab-bestseller ul.jquerytuts li a:hover
{ background: transparent; text-decoration: none; font-size: 0.87rem;}
.nameitems { text-transform: capitalize;}
.navbar { box-shadow: 0 0 20px #f0f0f0; }

/* review */
.reviewcustomer { 
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 3px 15px #c2c2c2;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}
.reviewcustomer ul { padding-left: 0; }
.reviewcustomer ul li { 
    list-style: none; 
    display: inline-block; 
    width: 32.8%; 
}
.review-count { /*margin: 1.2rem 1rem 0;*/ }
.review-count p.text-muted { 
    background: #fff;
    display: inline-block;
    border-radius: 10px;
    padding: 0.1rem 0.6rem;
    font-size: 0.7rem;
    margin-bottom: 5px;
}
.titlereview { font-size: 1rem; }
.numcount { font-size: 1.5rem; }
.happycolor { color: #4870fb; }
.nocommentcolor { color: #e0d34e; }
.sadcolor { color: #e76b6b; }
.avgvisit-customer p { margin-bottom: 0.3rem;}

/* for datepicker */
.datepicker { }
.datepicker:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 6px;
}
.datepicker:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    position: absolute;
    top: -6px;
    left: 7px;
}
.datepicker.dropdown-menu { padding: 0.5rem 1rem; box-shadow: 0 0 20px #e9e9e9; z-index: 10000; }
.datepicker > div { display: none; }
.datepicker table { width: 100%; margin: 0; }
.datepicker td,
.datepicker th {
    text-align: center;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.datepicker td.day:hover { background: #eee; border-radius: 30px;  cursor: pointer }
.datepicker td.day.disabled { color: #eee; }
.datepicker td.old,
.datepicker td.new { color: #c3c3c3; }
.datepicker td.active,
.datepicker td.active:hover { color: #fff; }
.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active:focus,
.datepicker td.active:hover:focus,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled] { color: #fff; }

.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active { border-radius: 30px; background: #ff9234; }

.datepicker td span {
    display: block;
    width: 31%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 2px;
    cursor: pointer;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.datepicker td span:hover { background: #eee; }
.datepicker td span.active { color: #fff; }
.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] { color: #fff; background: #7c4bff; }
.datepicker td span.active:active,
.datepicker td span.active.active {  }
.datepicker td span.old { color: #999; }
.datepicker th.switch { width: 145px; }
.datepicker th.next,
.datepicker th.prev { font-size: 21px; }
.datepicker thead tr:first-child th { cursor: pointer; }
.datepicker thead tr:first-child th:hover { background: #eee; }
.input-append.date .add-on i,
.input-prepend.date .add-on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.default-input.datepicker { font-size: 14px; margin-top: 0; padding: 10px;}
table tbody tr td.day { color: #000; }

/* branch dashboard */
.top-dc { }
.owl-carousel .owl-item .top-dc img { width: 170px; margin: 0 auto;}
.content-dc { text-align: center; margin-top: 20px; }
.owl-dot span { 
  height: 12px;
  width: 20px;
  display: block;
  border-radius: 20px;
  border: 2px solid #fff;
}
.owl-dots { text-align: center; }
.owl-dots .owl-dot { display: inline-block; margin: 10px 5px 0; }
.owl-nav { display: none; }

.owl-carousel .owl-item img { 
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
.list-databranch .title-branchlist { color: #000; }
.listnonstyle.prod-terlaris li {  padding: 0 0.4rem; margin-bottom: 0; }
.prod-terlaris ul { margin-bottom: 0; }
.title-taglist { font-size: 12px; margin-top: 5px;}

.defaultcard { width: 90%; margin: 1rem auto;}
.defaultcard .content-branchlist { border-radius: 10px; box-shadow: 0 0px 2px #e2e2e2;}
.defaultcard .content-branchlist:hover { border-radius: 10px; box-shadow: 0 3px 10px #ececec;}
.card-heading { font-size: 2.25rem; }
.img-branchlist { border-radius: 10px 10px 0 0; }
.head-branch { position: relative; }
.title-branchlist { font-size: 0.9rem; }
.name-branch { 
    position: absolute;
    background: #fff;
    padding: 0.31rem 1rem;
    box-shadow: 0 0 10px #ccc;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 85%;
    text-align: center;
    border-radius: 30px;
    bottom: -18px;
    font-size: 1.2rem;
}
.list-databranch ul li { margin-bottom: 10px; }
.amount-branchlist { font-size: 1.2rem; position: relative; padding-left: 1.2rem; color: #6b6b6b;}
.amount-branchlist .rp { left: 0; font-size: 0.8rem; }

a.rd-branch { 
    padding: 1rem;
    display: inline-block;
    width: 100%;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #f3f3f3;
    text-transform: capitalize;
}

/* breadcrumb */
.breadcrumb > li + li::before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
.breadcrumb li a { color: #000; }
.breadcrumb li.active { color: #939393; }
.breadcrumb { padding: 0; font-size: 0.8rem; margin-bottom: 1.7rem;}
.breadcrumb li:first-of-type a { padding-left: 0; }
.breadcrumb li:last-child { border-right: 0; }

/* modal dialog */
.modal-dialog { max-width: 65%; }
.modal-dialog.small-dialog { max-width: 30%; top:20%; }
.modal-content { background: #fff; }
.modal-header { display: block; }
.modal-header h4 { margin-bottom: 0; }
.modal-header .float-right .close { opacity: 1; }
.modal-header .float-right .btn-secondary { 
    margin: -24px -17px 0 0;
    min-width: auto;
    font-size: 2rem;
    padding: 0 1rem 0.4rem;
    border-radius: 0px 5px 0 10px;
}
.content-confirmation.card {     
    padding: 0.9rem;
    box-shadow: 0 0 20px #e9e9e9;
    width: 90%;
    margin: 2rem auto;
}
.wrapper-btn-modaldialog .btn-primary { 
    width: 50%;
    border-radius: 0;
    font-weight: normal;
    opacity: 1;
    background: transparent;
    border: none;
    padding-bottom: 0.5rem;
}
.wrapper-btn-modaldialog { 
    margin: 0 -1rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 0.7rem;
}
.wrapper-btn-modaldialog .leftbtn-modaldialog { border-right: 1px solid #f0f0f0;}
.content-module.cm-popup { padding: 0rem 0.5rem; }
.second-modaldialog { background: #fff;}
.modal-dialog.small-long-dialog { top: 5%; }
.fullpagemodal.modal.show .modal-dialog { max-width: 100%; margin-top: 0; border-radius: 0;}
.fullpagemodal .order-listcustom-items.listnonstyle ul li { width: 23.2%; }
.fullpagemodal .modal-content { border: none; margin:0;}
.fullpagemodal .wrapper-btnform input.btn { width: 100%; padding: 1rem; font-size: 2rem; }
.fullpagemodal button span.btn.btn-secondary {
    padding: 1rem 1.5rem 1.5rem;
    margin: 0;
    font-size: 3rem;
    line-height: 15px;
    border-radius: 10px;
}

/* pagination */
ul.pagination { margin-top: 1.5rem; margin-bottom: 1rem;}
ul.pagination li a { padding: 0.5rem 0.8rem; color: #848484; }
ul.pagination li.disabled a { color: #d5d5d5; }
.paging-top ul.pagination { margin-top: 2.5rem; }
.paging-bottom ul.pagination { margin-bottom: 0; }

/* branch pages */
label.filebutton {
    background-color: #bababa;
    border-radius: 16px;
    color: #fff;
    font-size: 1.4rem;
    margin: 1.5rem;
    opacity: 0.8;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    padding: 0.71rem 0rem;
    width: 50px;
}
label.filebutton:hover { background: #000; }
label.filebutton span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding: 0;
}
.wrapper-uploadbranch-img img { width: 150px; border-radius: 10px; box-shadow: 6px 6px 10px #cecece;}
.wrapper-listdata ul li .card {
    margin: -1px -1.8rem;
    box-shadow: none;
    border-top: 1px solid #f2f2f2;
    border-radius: 0;
    border-bottom: 1px solid #f2f2f2;
}
.wrapper-listdata ul li .card .card-body { padding: 0.8rem 1.81rem; }
.wrapper-listdata { margin-top: 1rem; }
.wrapper-listdata ul li .card-body ul li { float: left; width: 16.5%; padding: 0 1%; font-size: 0.9rem; }
.wrapper-listdata ul li .card-body ul li.img-listdata img 
{ width: 70px; border-radius: 10px; box-shadow: 0 3px 10px #b0b0b0; }
.wrapper-listdata ul li .card-body ul li.img-listdata { width: 12%; }
.wrapper-listdata ul li .card-body ul li.address-listdata { width:22%; }
.action-listdata a { 
    border: 1px solid;
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    font-size: 0.8rem;
    margin: 0.1rem;
    display: inline-block;
}
.action-listdata a:hover { border: none; color: #fff;  }
.card-body #vn-click { margin-left: -2.5rem; min-width: auto;}
.searchtop { margin-bottom: 0; margin-left: 15px; width: 35%;}
.top-searchandbutton { display: inherit; }
.top-searchandbutton .wrapper-btnform { margin: 0.2rem 1rem 0 0;}
.top-searchandbutton .iconlink-head { 
    font-size: 1rem;
    color: #fff;
    margin-right: 6px;
 }

/* left tab responsive "items" */
.nav-tabs-dropdown {
    display: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.nav-tabs-dropdown:before {
    content: "\e92d";
    position: absolute;
    right: 30px;
}
.tab-pane .paging-top ul.pagination { margin-top:0; }
.nav-tabs { border-bottom: 0;}
.wrapperleft-contentitems { margin: 2rem 0 0; }
.wrapperleft-contentitems #nav-tabs-wrapper li a { 
    color: #848484;
    padding: 0.3rem;
    display: block;
    margin-left: 0.4rem; 
}
.wrapper-listitems ul li { width: 29%; float: left; margin: 0.7rem; /*position: relative;*/ }
.wrapper-listitems ul li a { border-radius: 5px; box-shadow: 0px 0px 1px #ddd; display: block;}
.wrapper-listitems ul li a:hover { box-shadow: 0 0 30px #efefef; border-radius: 10px;}
.wrapper-listitems.items-product ul li { width: 17.4%; }

.img-listitems-page { height: 135px; overflow: hidden; position: relative; border-radius: 5px 5px 0 0; }
.img-listitems-page img { width: 100%; border-radius: 10px 10px 0 0; margin-top: -25px;}
.content-listitems-page { padding: 0.4rem 0.8rem; height: 79px; overflow: hidden; font-size: 0.9rem; color: #6b6b6b; }
.is_stuck { 
    margin-top: 4rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 20px #eaeaea;
    border-radius: 6px;
    padding: 0.5rem 1rem 0;
    z-index: 1;
}
.is_stuck .wraper-paging ul.pagination { margin-bottom: 0;  margin-top: 0.2rem;}
.wrapperleft-contentitems .col-sm-3 { border-radius: 5px; padding: 0.8rem 0;}
.priceitems {
    position: absolute;
    background: rgba(255,255,255,0.8);
    color: #000;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    margin: 0.4rem;
    border-radius: 7px;
    bottom: 0;
}
.price-default { font-size: 0.9rem; color: #000; margin-bottom: 0.3rem;}
.price-default .rp { 
    position: relative;
    font-size: 0.7rem;
    left: 0;
    display: inline-block;
    top: -5px;
    margin-right: 4px;
    color: #000;
}
.uploaditems-img img { width: 100px; }
.addcategory-form { 
    text-align: right;
    flex: 100%;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem 0 0;
}
#addrow, #addrow-customitem {  background: #f2f3ff; border: 1px solid #e5e4ff; border-radius: 5px; }
.getformula .btn { width: 100%; }
.info-varcustom {
    color: #b0b0b0;
    /* padding: 0.2rem 0.3rem 0.6rem; */
    width: 100%;
    border-top: 1px solid #f4f4f4;
    height: 47px; /* for same height like others */
}
.info-varcustom span { 
    width: 48%;
    display: inline-block;
    font-size: 0.7rem;
    text-align: center;
}
.info-varcustom .dropdown button { padding: 0.7rem 1rem 1rem; }
.info-varcustom .dropdown button span.iconcelah {
    width: auto;
    margin: 0.1rem 0.5rem 0;
    font-size: 1rem;
}
.info-varcustom .dropdown button span.text-share {
    width: auto;
    font-size: 1rem;
    line-height: 0;
}
.info-varcustom button:hover { 
    background: #ff9234;
    color: #fff;
    border-radius: 0 0 5px 5px;
 }
.warning-items { 
    position: absolute;
    top: 0.4rem;
    background: #fff649;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    color: #000;
    margin: 0 0.5rem;
    border-radius: 7px;
}
.count-items { font-size: 0.8rem; }
.nonaktif-product { 
    text-align: center;
    padding-top: 0.6rem;
    font-size: 1rem;
    background: #f3f3f3;
    display: inline-block;
    border-radius: 0 0 5px 5px;
    color: #a5a5a5;
}

/* shift management */
.shift-management ul li {
    width: 46%;
    float: left;
    margin: 1rem;
    padding: 1rem;
    border-radius: 10px;
}
.shift-1 { background: #ffe65e; }
.shift-2 { background: #ff8d74; }
.shiftlist-employee { background: #fff; margin: 1rem 0 0 0; border-radius: 6px; width: 100%;}
.calendar-values .col { border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; padding: 0.5rem 0.5rem 0.8rem;}
.year-schedulepick { margin-left: 4px; }
.monthyear-pick { font-size: 1.4rem; }
#parent { margin-top: 1rem; }
#parent .box { float: left; width: 25%; padding: 1rem;}
.namerank-shift { margin-left: 0.7rem; }
.namerank-shift .col-form-label { padding: 5px 0; font-size: 0.89rem;}
.wrapper-filteremployee .btn.active { }
#parent .form-check .form-check-label .input-helper::before { border: 2px solid #606060; background: #d2d2d2; }
#parent .form-check .form-check-label input:checked + .input-helper::after { background: #fff; }
.cm-popup .shift-1 { padding: 0.5rem 1rem; margin-bottom: 1rem; border-radius: 10px;}
.fc-time { display: none; }
.confirmation-modal .shiftlist-employee { margin-top: 0; }
.second-layer { width: 100%; }
.second-layer .wrapper-formsecondmodal { margin: 0;}
.fixtext-toggle { margin-top: 12px; }
.fixtext-toggle .on-toggle { margin-left: -19px; top: 4px;}
.fixtext-toggle .off-toggle { margin-left: 3px; top: 4px;}
.wrapper-overtime { margin: 2rem -0.8rem 1rem; padding: 0.8rem 1rem 0; background: #f8f8f8;}
.wrapper-overtime .form-group { padding-bottom: 1rem; }
#parent.list-downemployee { height: 300px; overflow: scroll; margin-top: 0;}
#parent.list-downemployee .box { float: none; width: 100%; }
#parent.list-downemployee .form-radio label input + .input-helper::before { background: #7b7a7a; }
/* #parent.list-downemployee .form-radio label input + .input-helper::after { background: #08D419; } */

/* replace calender css */
#calendar { margin-top: 1.5rem; }
#calendar .fc-button-group, #calendar .fc-button-group .fc-prev-button{ display: block; }
#calendar .fc-button-group, #calendar .fc-button-group .fc-prev-button,
#calendar .fc-button-group .fc-next-button { background: #fff; }
.fc-icon-left-single-arrow::after { content:"\e92e" }
.fc-icon-right-single-arrow::after { content: "\e92f"}
.fc-icon-left-single-arrow::after, .fc-icon-right-single-arrow::after { 
    font-size: 1rem;
    font-weight: normal;
}
.fc button { padding: 0 0.5rem 0.26rem; height: auto; }
.fc-state-active, .fc-state-down { box-shadow: none; text-shadow: none;}
.fc button, .fc table, body .fc { font-size: 0.9rem; text-transform: capitalize; }
.fc-button-group .fc-button.fc-month-button, .fc-button-group .fc-button.fc-agendaDay-button, .fc-today-button 
{ min-width: 80px; padding: 0.2rem 1rem 0.4rem; }
.fc button {  padding: 0.2rem 1rem 0.4rem; }
.fc-state-disabled { background: #ccc; }
.fc-event.fc-draggable { padding: 0.02rem 0.4rem; }
.fc-event, .fc-event:hover { color: #000; }

/* promo page */
.wrapper-promo { margin-top: 2rem; }
.wrapper-promo a { color: #000; }
.headpromo-list { 
    background: #f4f4f4;
    margin: -1.86rem -1.81rem 0.5rem;
    border-radius: 8px 8px 0 0;
    padding: 1rem;
    text-align: center;
    height: 100px;
    font-size: 1.7rem;
}
.contentpromo-list { margin: 0rem -1rem 0.5rem; }
.datepromo { font-size: 0.6rem; }
.statuspromo { 
    font-size: 0.7rem;
    position: absolute;
    top: 5px;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    left: 6px;
}
.wrapper-promo .progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0 -1.83rem;
    border-radius: 0 0 5px 5px;
    font-size: 0.6rem;
}
.namepromo {  
    line-height: 21px;
    margin-bottom: 0.5rem;
    height: 45px;
    overflow: hidden;
}
.amountpromo { margin-top: 1.2rem; }
.wrapper-promo .col-xl-2 { flex: 0 0 19.778%; max-width: 19.778%;}
.picturepromo { 
    margin: -1rem;
    height: 100px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.picturepromo img { width: 100%; margin-top: -1.5rem;}
.wrapper-promo a:hover { box-shadow: 0 0 20px #ccc; border-radius: 8px;  }
.wrapper-filterbranch .btn-branch { 
    float: left;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}
.fortypepromo-option .btn-group { height: 35px; }
.fortypepromo-option label.btn.btn-primary { margin-bottom: 0; border-right: 1px solid;}
.fortypepromo-option label.btn.btn-primary.lastoption-typepromo { border-right: none; }
.fortypepromo-option .dd-custom { width: 310px; }
.fortypepromo-option .form-group { margin-top: 0.4rem; }
.wrapper-startendpromo .form-control { margin-bottom: 1rem; }
.default-toggleonoff { border-bottom: 1px solid #efefef; padding-top: 0.5rem; }
.wrapper-otoption .fleft { font-size: 0.9rem; margin-top: 0.3rem; }
.wrapper-otoption .off-toggle, .wrapper-otoption .on-toggle { margin-top: 8px; }
.wrapper-detailpage .bs-img { width: 70px; }
.wrapper-filterbranch .bs-img { width: 100px; }
.wrapper-filterbranch .avatar-checklist-employee.float-left { width: 100% }
.wrapper-filterbranch .namerank-shift { margin-left: 0;  margin-top: 1rem; clear: both;}
.wrapper-filterbranch #parent .box { width: 20%; padding: 0.2rem 1rem; }

/* detail page */
.top-detailpage { margin-top: 2rem; }
.top-detailpage .statuspromo { 
    top: 1rem;
    left: 1rem;
    font-size: 1rem;
    min-width: 100px;
    text-align: center;
}
.content-detailpage { margin-top: 2rem; }
.wrapper-detailpage .wrapper-title-form { margin-top: 2rem; }

/* login */
.login { background: #F7FAFF; }
.login .row-login { width: 380px; margin: 3% auto 0;}
.login .wrapper-btnform .btn { width: 100%; padding: 0.8rem;}
.login .logologin { text-align: center; margin-bottom: 2rem;}
.login .logologin img { width: 48%; }
.optionlogin ul li { float: left; width: 33.3%; }
.optionlogin ul li a { 
    display: block;
    margin: 1rem;
    box-shadow: 0 4px 10px #f0f0f0;
    border-radius: 10px;
    text-align: center;
    padding: 0.5rem;
    height: 55px;
    width: 65px;
    line-height: 30px; 
}
.imgoptionlogin { width: 60%; border-radius: 10px; }
.optionlogin ul { margin-bottom: 0; }
.seperator { text-align: center; margin: 1.8rem 0 1.8rem;}
.line {  border-bottom: 1px solid #e7e7e7; display: block; margin-top: -11px; }
.textseperator {
    background: #fff;
    display: inline;
    padding: 0.5rem 1rem;
    border: 1px solid #f4f4f4;
    font-size: 0.7rem;
    border-radius: 9px;
}
.login .col-xl-6 { padding: 0; }
.login .col-xl-6 .card { box-shadow: none; border-radius: 0;}
#tab-login ul.nav { }
#tab-login ul.nav li { width: 50%; text-align: center; }
#tab-login ul.nav li a { 
    display: inline-block;
    width: 100%;
    padding: 0rem 1rem 0.5rem;
    margin-bottom: 1rem;
}
#tab-login ul.nav li a { color: #6e6d6d; }
#tab-login ul.nav li a.current { border-bottom: 2px solid; }
.toggle-password { position: absolute; right: 15px; top: 8px; cursor: pointer; z-index: 1000;}
.row-registertwo { width: 60%; margin: 2rem auto; }
.row-registertwo .logologin img { width: 20%; }

/* order */
.order-page .main-panel { width: calc(100% - 330px);  }
.order-page .content-wrapper { padding: 1rem; border-radius: 0;}
.order-page .wrapperleft-contentitems { margin: 0; }
.order-page .card-body { padding: 1rem; }
.order-page .wrapperleft-contentitems #nav-tabs-wrapper li a { 
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    padding: 0.6em 0.5rem;
    margin-top: -1px;
}
.order-page .wrapper-listitems ul li { width: 16.8%; }
.order-page .img-listitems-page { height: 100px; }
.order-page .col-sm-2 { padding: 0; }
.order-page .content-listitems-page { height: 31px; position: relative; }
.nameitems-order { 
    position: absolute;
    bottom: 0;
    color: #000;
    width: auto;
    margin: 0 -0.8rem;
    padding: 0.3rem 1rem;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    height: 31px;
}
.order-page .img-listitems-page img { margin-top: -10px; }
.order-page .sidebar { background: #fff; width: 335px; }
.order-page .sidebar .titletop-sale { padding: 1rem 1rem 0.5rem; }
.module-topsale { 
    width: 50%;
    text-align: center;
    padding: 0.7rem;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    height: 60px;
}
.customeradd-topsale { border-right: 1px solid #f5f5f5; }
.numitems-topsale { width: 40%; }
.numitems-topsale .btn { 
    height: 29px;
    padding: 0;
    width: 35px;
    background: #fff;
    border-color: #f4f4f4;
}
.listorder li { padding: 0.5rem 1rem 0.8rem; border-bottom: 1px dashed #e7e7e7; }
.listorder li:first-child { padding-top: 1rem; }
.listorder li .form-control { border: none; }
.detailprice-orderitem ul li { 
    padding: 0;
    color: #a4a2a2;
    font-size: 0.8rem;
}
.detailprice-orderitem { margin-top: 10px; }
.detailprice-orderitem ul li { margin-bottom: 5px; border: none; }
.detailprice-orderitem ul li:first-child { padding-top:0;}
.detailprice-orderitem .float-right { color: #000; }
.detailprice-orderitem .float-left { width: 60%;}
.wrapper-pricequantity { padding: 1rem 0 0rem 0.6rem; }
.bottom-pay { margin-top: 3rem; }
.namesaleitem { position: relative; cursor: pointer;}
.delete-itemorder { position: absolute; right: 0; top: 0; font-size: 1.2rem;}
.delete-itemorder a, .delete-itemorder span { color: #e79300; }
.bottom-pay a {
    width: 330px;
    display: block;
    text-align: center;
    padding: 1rem;
    font-size: 1.2rem
}
.bottom-pay a:hover { color: inherit; }
.module-topsale img { width: 35px; border-radius: 10px; margin-right: 0.5rem;}
.texttopsale-order { font-size: 0.8rem; }
.table-orderlist { 
    width: 35px;
    height: 35px;
    background: #ececec;
    border-radius: 10px;
    line-height: 32px;
    margin-right: 0.5rem;
}
.id-ttopsale, .texttopsale-order { color: #a4a2a2; }
.variant-textoption { display: block; }
.order-listcustom-items.listnonstyle ul li { float: left; margin: 0 0.5rem; width: 23%; }
.order-listcustom-items.listnonstyle .radio-liststyle { width: 100%; padding: 1rem 0.5rem 0;}
.order-listcustom-items .radio-liststyle .form-radio,
.order-listcustom-items .radio-liststyle .form-check { 
    background: #fff;
    border-radius: 10px;
    border: 1px solid #efefef;
    text-align: center;
    margin: 0;
}
.rpcustom-list { padding: 0.5rem 1rem; font-size: 0.9rem; }
.pricemodal { font-size: 1.3rem; }
.paymentmethod .radio-liststyle .form-radio label, 
.paymentmethod .radio-liststyle .form-check label
{ border-radius: 10px; background: #fff;}
.amountpayment { margin: 1rem 0 2.5rem; }
.paymentmethod .radio-liststyle { margin-bottom: 0; }
.default-showoption-payment { 
  
}
.order-listcustom-items.listnonstyle .default-showoption-payment ul li { width: 22.7%; }
.order-listcustom-items.listnonstyle .default-showoption-payment ul li.fiftycash { width:47.5%;}
.order-listcustom-items.listnonstyle .default-showoption-payment ul li.fiftycash .form-group .inputtext-payment { 
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.6rem;
}
.form-radio .form-check-label input.custominputamountform {
    margin-left: 0;
    display: block;
    top: 0.5rem;
    opacity: 1;
    position: absolute;
    left: auto;
    background: #fbfbfb;
    right: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
}
#tab-paymentmethod { width: 100%; }
.order-listcustom-items.listnonstyle #tab-paymentmethod ul li a {
    border: 1px solid #eaeaea;
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.6rem;
    border-radius: 7px;
}
#tab-paymentmethod .list-wrap ul { 
    border: 1px solid;
    width: 98%;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
}
.paymentmethod .card-header .btn-link, #accordion { width: 100%; }
.paymentmethod .card-header .btn-link { padding: 1rem; color: #000; }
.paymentmethod .card-header { 
    padding: 0;
    border: none;
    background: #f6f4f4;
    border: 1px solid #e9e9e9;
    border-radius: 7px;
}
.paymentmethod ul { width: 100%; }
.paymentmethod #accordion .card { box-shadow: none; }
.paymentmethod #accordion .card-body { padding: 0; }
.paymentmethod .card-header.active { background: #fff; box-shadow: 0 0 20px #eaeaea;}
.addpayment-option { margin-top: 1rem }
.infopayment {
    background: #daf3ff;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin-top: 0.8rem;
}
.priceitemorder { font-size: 1rem;}
.pointcustomer { padding: 0.5rem 1rem; border-bottom: 1px dashed #e6e6e6;}
.pointamount { font-size: 0.8rem; }
.onoffwrapper .switch label { margin-bottom: 0; }
.onoffwrapper .switch { margin-top: 4px;}
.promoadditem { color: #41dfbe; }
.listaddminamount ul li { 
    border-bottom: none;
    width: 50%;
    float: left;
}
.listaddminamount ul li .iconcelah { font-size: 2rem; }
.textname-ama { font-size: 0.7rem; }
.listorder .listaddminamount li:first-child  { padding: 0.5rem 1rem 0.8rem; }


.listbs ul li { /*border-bottom: 1px solid #f0f0f0;*/ padding: 10px 0;} 
.listbs ul li:last-child { border-bottom: 0; }
.bs-img { width: 50px; border-radius: 10px; /*box-shadow: 1px 3px 10px #c3bcbc;*/}
.descitems { margin: 0 15px; font-size: 0.9rem; width: 61%;}
.orderitems { color: #9e9e9e; }
.percentageitems { 
    padding: 10px 7px;
    border-radius: 50px;
    font-size: 0.69rem;
    margin-top: 4px;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #000;
}

.radio-group label {
    overflow: hidden;
 } .radio-group input {
     /* This is on purpose for accessibility. Using display: hidden is evil.
     This makes things keyboard friendly right out tha box! */
    height: 1px;
    width: 1px;
    position: absolute;
    top: -20px;
 } .radio-group .not-active  {
    color: #7d7d7d;
    background-color: #f5f5f5;
    padding: 0.7rem 2rem;
 }

/* mobile style */
.hide-deskop { display: none; }
.wrapper-iconmobile { 
    background: #fff;
    border-radius: 5px;
    border: 1px solid #f6f6f6;
    margin-top: 1rem;
}
.wrapper-iconmobile ul li { 
    float: left;
    width: 49%;
    position: relative;
    text-align: center;
}
.wrapper-iconmobile ul li:first-child { border-right: 1px solid #f4f4f4; }
.sidebar .nav .nav-item.nav-profile .wrapper-iconmobile ul li a.nav-link  
{ padding: 0.3rem; }
.count-mobilemessage { 
    position: absolute;
    top: 4px;
    background: #FF0017;
    color: #fff;
    padding: 0.1rem 0.36rem;
    font-size: 0.5rem;
    border-radius: 4px;
}

/* wysiwyg */
.note-editor.note-frame { border: none;}
.card-header { border-bottom: 1px solid #f3f3f3; }
.note-editor.note-frame .note-statusbar { border-top: 1px solid #f3f3f3; }
.note-editor.note-frame .note-editing-area .note-editable { font-size: 0.9rem;}

/* auto complete */
.qtagselect__select {
    position: absolute;
    opacity: 0; 
}
.qtagselect__container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 200px;
    min-height: 34px; 
}
.qtagselect__choices {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.3rem 0.75rem;
    width: 100%;
    height: 100%;
    border: 1px solid #f3f3f3;
    background-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: text; 
}
.qtagselect__field, .qtagselect__input {
    height: 100%;
    width: 100%;
    border: none;
    cursor: pointer; 
    list-style: none;
}
.qtagselect__input {
    height: 28px;
    padding-right: 30px; 
}
.qtagselect__placeholder {
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 1rem;
 }
.qtagselect__btn {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    height: 100%; 
}
.qtagselect__btn:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    font-size: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666666;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    right: 12px; 
    list-style: none;
}
.qtagselect__choice {
    position: relative;
    height: 22px;
    line-height: 20px;
    padding: 0 20px 0 6px;
    margin: 4px 6px 4px 0;
    font-size: 12px;
    float: left;
    border: solid 1px rgba(192, 195, 197, 0.6);
    cursor: default;
    list-style: none;
}
.qtagselect__choice .qtagselect__del {
    position: absolute;
    right: 4px;
    top: 4px; }
.qtagselect__choice.isblue {
    color: #4788e4;
    background-color: rgba(71, 136, 228, 0.15);
    border: solid 1px rgba(71, 136, 228, 0.2); 
    border-radius: 15px;
}
.qtagselect__choice.isblue .qtagselect__del {background-position: 2px -8px; }
.qtagselect__choice.isblue .qtagselect__del:hover { background-position: -10px -8px; }
.qtagselect__choice.ispurple {
    color: #8168ba;
    background-color: rgba(129, 104, 186, 0.15);
    border: solid 1px rgba(129, 104, 186, 0.2); 
}
.qtagselect__choice.ispurple .qtagselect__del { background-position: 2px -18px; }
.qtagselect__choice.ispurple .qtagselect__del:hover { background-position: -10px -18px; }
.qtagselect__choice.isgray { background-color: rgba(192, 195, 197, 0.15); }
.qtagselect__del {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../images/qtagicon.png) 2px 2px no-repeat;
    cursor: pointer; 
}
.qtagselect__del:hover { background-position: -10px 2px; }
.qtagselect__choice + .qtagselect__field { }
.qtagselect__drop {
    position: absolute;
    top: 100%;
    z-index: 1000;
    margin-top: -1px;
    width: 100%;
    border: 1px solid #4788e4;
    background: #fff;
    -webkit-box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2);
    -moz-box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2);
    box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2);
    display: none; 
}
.qtagselect__drop__ft { padding: 0 10px 8px; text-align: right; }
.qtagselect__closelink { color: #666666; font-size: 12px; }
.qtagselect__closelink .qtagselect__triangle:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    font-size: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #666666; }
.qtagselect__closelink:hover { color: #4788e4; }
.qtagselect__closelink:hover .qtagselect__triangle:before { border-bottom: 6px solid #4788e4; }
.qtagselect__triangle { margin-left: 4px; }
.qtagselect__results {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 10px;
    max-height: 250px;
    scrollbar-arrow-color: #e6e7e8;
    scrollbar-track-color: #ffffff;
    scrollbar-face-color: #e6e7e8;
    scrollbar-3dlight-color: #e6e7e8;
    scrollbar-highlight-color: #e6e7e8;
    scrollbar-shadow-color: #e6e7e8;
    scrollbar-darkshadow-color: #e6e7e8;
    scrollbar-base-color: #e6e7e8; 
}
.qtagselect__results::-webkit-scrollbar-thumb { background-color: #e6e7e8; border-radius: 3px; }
.qtagselect__results::-webkit-scrollbar-thumb:hover { background-color: #d9dbdc; }
.qtagselect__results::-webkit-scrollbar-thumb:active { background-color: #d9dbdc; }
.qtagselect__results::-webkit-scrollbar-track { background-color: transparent; }
.qtagselect__results::-webkit-scrollbar-track-piece { background-color: transparent; }
.qtagselect__results::-webkit-scrollbar { width: 6px; height: 6px; }
.qtagselect__option {
    height: 22px;
    line-height: 20px;
    padding: 0 6px;
    margin: 4px 3px;
    font-size: 12px;
    float: left;
    border: solid 1px rgba(192, 195, 197, 0.6);
    cursor: pointer;
    list-style: none;
}
.qtagselect__option.isblue {
    color: #4788e4;
    background-color: rgba(71, 136, 228, 0.15);
    border: solid 1px rgba(71, 136, 228, 0.2); 
    border-radius: 15px;
}
.qtagselect__option.isblue:hover {
    color: #ffffff;
    background-color: #4788e4;
    border: solid 1px #4788e4; 
}
.qtagselect__option.ispurple {
    color: #8168ba;
    background-color: rgba(129, 104, 186, 0.15);
    border: solid 1px rgba(129, 104, 186, 0.2); 
}
.qtagselect__option.ispurple:hover {
    color: #ffffff;
    background-color: #8168ba;
    border: solid 1px #8168ba; 
}
.qtagselect__option.isgray { background-color: rgba(192, 195, 197, 0.15); }
.qtagselect__option.isselected { position: relative; }
.qtagselect__option.isselected:before {
    position: absolute;
    right: -1px;
    top: -1px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-top: 11px solid #c0c3c5;
    border-left: 13px solid transparent; 
}
.qtagselect__option.isselected:after {
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    content: '';
    width: 4px;
    height: 2px;
    background: #c0c3c5;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); 
}
.qtagselect__option.isselected, .qtagselect__option.isdisabled {
    color: #c0c3c5;
    background-color: rgba(192, 195, 197, 0.25);
    border: solid 1px rgba(192, 195, 197, 0.4);
    cursor: not-allowed; 
}
.qtagselect__option.isselected:hover, .qtagselect__option.isdisabled:hover {
    color: #c0c3c5;
    background-color: rgba(192, 195, 197, 0.25);
    border: solid 1px rgba(192, 195, 197, 0.4); 
}
.qtagselect__toast {
    position: fixed;
    top: 75px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-left: 108px;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    background: #FEE4D7;
    border: 1px solid #fdbc9a;
    color: #fb7a36;
    font-size: 14px;
    text-align: center;
    padding: 0 36px;
    z-index: 1001;
    display: none; 
}
.qtagselect.isopen .qtagselect__choices {
    border: 1px solid #4788e4;
    -webkit-box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2);
    -moz-box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2);
    box-shadow: 0 0 2px 1px rgba(71, 136, 228, 0.2); 
}
.qtagselect.isopen .qtagselect__btn { display: none; }
.qtagselect.isopen .qtagselect__drop { display: block; }
.qtagselect.isdisabled { cursor: not-allowed; }
.qtagselect.isdisabled .qtagselect__field { cursor: not-allowed; }
.qtagselect.iswauto .qtagselect__container { width: 100%; }
.qtagselect.isw360 .qtagselect__container { width: 360px; }

/* upload images */
.wrap-custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 150px;
    text-align: center;
    /* box-shadow: 0 0 10px #e8e8e8; */
    border-radius: 5px;
}
.wrap-custom-file input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    overflow: hidden;
    opacity: 0;
}
.wrap-custom-file label {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    padding: 0 0.5rem;
    cursor: pointer;
    background-color: #efefef;
    border-radius: 4px;
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}
.wrap-custom-file label:hover {  -webkit-transform: translateY(-1rem); transform: translateY(-1rem); }
.wrap-custom-file label.file-ok { background-size: cover; background-position: center; }
.upload-img-product ul { 
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;
}
.upload-img-product ul li { 
    float: left;
    list-style: none;
    width: 23%;
    margin: 0 1%;
}
.textupload-imgproduct { text-align: center;}
.textupload-imgproduct span { 
    background: #7fc1f9;
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 16px;
    color: #fff;
}
.wrap-custom-file label { margin-bottom: 0; }
.wrap-custom-file label span { 
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0.5rem;
    background: rgb(0, 0, 0, 0.6);
    color: #fff;
    display: none; 
}
.wrap-custom-file i { 
    font-size: 4rem;
    font-style: normal;
    color: #bbb;
    display: inline-block;
    margin-top: 2rem;
}
.wrap-custom-file .file-ok span { display: block; }
.file-ok i { display: none; }

/* timeline */
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #f3f3f3;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ff9234;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}
ul.timeline .preview-thumbnail img { width: 50px; }
ul.timeline .preview-thumbnail { margin-right: 1rem; }
ul.timeline .dropdown-item {
    padding: 0.8rem;
    box-shadow: 0 0 1px #ccc;
    border-radius: 10px;
}
ul.timeline .dropdown-item:hover { box-shadow: 0 0 10px #efefef; background: #fff;}
ul.timeline .preview-item-content { color: #6b6b6b; }
ul.timeline .preview-item-content p { margin-bottom: 0; }

/* share */
.fa { font-style: normal; }
.fa-at:before { content: "\e988"; }
.fa-twitter::before { content: "\e9e8"; }
.fa-facebook::before { content: "\e95d"; }
.fa-linkedin::before { content: "\e982"; }
.fa-whatsapp::before { content: "\e98e"; }

.btn-share { 
    width: 100%;
    background: transparent;
    border: none;
    color: #ff7474;
}
.jssocials-shares { margin: 0.2em 0.6rem; }
.wrapper-listitems ul li a {font-size: 0.8rem; /*border-radius: 35px;*/ }

/* setting */
.tabs {  margin-top: -1rem;  }
#tab-button {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#tab-button li { display: table-cell; width: 20%; }
#tab-button li a {
    display: block;
    padding: .5em;
    text-align: center;
    color: #7d7d7d;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
#tab-button li:not(:first-child) a { border-left: none; }
#tab-button li a:hover,
#tab-button .is-active a {
    border-bottom-color: #cccc;
    border-bottom: 1px solid #ff9234;
    color: #ff9234;
}
.tab-contents { padding: 1.8em 0em; /* border: 1px solid #ddd; */ }
.addline-bar { border-bottom: 1px solid #efefef; margin-bottom: 1rem;}
#tab-select.form-control { color: #ff9234; font-size: 1.3rem; height: 45px; }

/* saldo */
.profile-name .fluid-container { margin: 0.3rem 0 0; }
.saldo-leftmenu span { }
  
  
  
  .tab-button-outer {
    display: none;
  }
  .tab-contents {
    margin-top: 20px;
  }
  @media screen and (min-width: 768px) {
    .tab-button-outer {
      position: relative;
      z-index: 2;
      display: block;
    }
    .tab-select-outer {
      display: none;
    }
    .tab-contents {
      position: relative;
      top: -1px;
      margin-top: 0;
    }
  }

/* start responsive */
@media screen and (max-width: 1600px) {
    
    
}
@media screen and (max-width: 1034px)  {
    .order-page .wrapper-listitems ul li { width: 20.4%; }
    .order-page .img-listitems-page { height: 90px; }
    .order-listcustom-items.listnonstyle ul li { width: 22.3%; }
    
}

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
    .reviewcustomer .iconmid { font-size: 3rem; }
    .reviewcustomer .titlereview { font-size: 0.8rem; }
    .descitems { width: 47%; }
    .hidemob, .breadcrumb { display: none; }
    .hide-deskop , .wrapper-iconmobile { display: block; }

    .main-panel .content-wrapper h3.text-maincolor {
        position: absolute;
        z-index: 1000;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 1.2rem;
        top: 15px;
     }
     .navbar {  }
     .card-body #vn-click { margin-left: 1rem; }
     .modal-dialog {
        height: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        top: 0;
        margin: 0;
     }
     .modal-content { height: 100%; border-radius: 0; }
     .modal-dialog.small-dialog { top: 0; max-width:100% ;}
     .wrapper-btn-modaldialog { position: absolute; bottom: 0; width: 100%; padding-top: 0;}
     .wrapper-btn-modaldialog .btn-primary { padding: 1.5rem; font-size: 1.2rem;}

     .wrapperleft-contentitems .col-sm-3,
     .wrapperleft-contentitems .col-sm-9
     { max-width: 100%; flex: 100%;}
     
     .wrapperleft-contentitems .col-sm-3 h4 { display: none; }
     .wrapperleft-contentitems { margin: 1rem 0 0; }
     .wrapperleft-contentitems .col-sm-3 h4 { display: none; }
     #stikyhead h3 { display: none; }
     #stikyhead .paging-top { float: none !important; }
     #stikyhead .paging-top ul.pagination { padding-bottom: 0.5rem; margin: 1.5rem 0 1rem;}
     /* .wrapperleft-contentitems .col-sm-3 .nav-tabs-dropdown { border-radius: 5px; padding: 0.8rem 0;} */
     .wrapperleft-contentitems .col-sm-3 .nav-tabs-dropdown {  border-radius: 5px;  padding: 0.8rem 0; background: #fff; color: inherit; }
     .wrapperleft-contentitems .col-sm-9 { padding: 0; }

     /* order */
     .order-page .sidebar-offcanvas { right: -330px;}
     .order-page .col-sm-2, .order-page .col-sm-10 { flex: 100%; max-width: 100%; margin-bottom: 1rem;}
     .order-page .main-panel { width: 100%; }
     .order-page .sidebar-offcanvas.active { right: 0; }
     .order-page .wrapper-listitems ul li { width: 16.6%; }

     .row-registertwo { width: 100%; }
     .row-registertwo .logologin img { width: 40%; }

     .wrapper-table { overflow: scroll;}
     .navbar .navbar-menu-wrapper {
        position: absolute;
        left: 0;
        padding: 0;
      }
      .navbar .navbar-brand-wrapper .brand-logo-mini { margin-left: 30px; }
      .sidebar-offcanvas.active { 
        left: 0;
        box-shadow: 0 0 30px #d6d6d6;
      }
    .sidebar-offcanvas { 
        -webkit-transition: all 0s ease-in;
        -o-transition: all 0s ease-in;
        transition: all 0s ease-in;
    }
    .navbar .navbar-brand-wrapper { width: 130px; }
    .nav-link .iconlink-head { font-size: 1.5rem; }
}

@media screen and (min-width: 769px) {
    #nav-tabs-wrapper {
      display: block!important;
    }
    /* .fullpagemodal .order-listcustom-items.listnonstyle ul li { width: 31.2%; } */
}
@media screen and (max-width: 768px) {
    .hide-mob { display: none; }
    .show-mob { display: block; }
    .nav-tabs-dropdown { display: block; }
    #nav-tabs-wrapper {
        display: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        text-align: center;
    }
    .nav-tabs-horizontal {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    }
    .nav-tabs-horizontal  > li { float: none; }
    .nav-tabs-horizontal  > li + li { margin-left: 2px; }
    .nav-tabs-horizontal > li,
    .nav-tabs-horizontal > li > a { background: transparent; width: 100%; } 
    .nav-tabs-horizontal  > li > a { border-radius: 4px; }
    .nav-tabs-horizontal  > li.active > a,
    .nav-tabs-horizontal  > li.active > a:hover,
    .nav-tabs-horizontal  > li.active > a:focus { color: #ffffff;  background-color: #428bca; }

    .searchtop { width: 85%; }
    /* .wrapper-formshow { 
        margin: -2.5rem -2rem 0;
        position: absolute;
        top: 2rem;
        z-index: 10;
        width: 100%;
        height: auto;
        background: #fff;
     } */
     .wrapper-formshow {
        margin: -2.5rem -2rem 6rem;
        position: relative;
        z-index: 10;
        height: auto;
        background: #fff;
     }
     .wrapper-btnform .btn { width: 100%; padding: 1rem;}
     .filterow .grid-margin { margin-bottom: 0; margin-top: 15px;}
     .filter-content ul li { width: 48%; }

     .fullpagemodal .order-listcustom-items.listnonstyle ul li { width: 31%; }

     .upload-img-product ul li { width: 48%;  margin-bottom: 1rem; }
     .textupload-imgproduct span { margin-bottom: 0.4rem; }
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
    .sidebar-offcanvas { width: 100%; right: 100%; }
    .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
    { padding: 0; }
    .card,
    .wrapper-chartdashboard #canvasrevenue, .wrapper-chartdashboard #canvassale, 
    .wrapper-chartdashboard #canvascustomer
     { border-radius: 0; }

     .modal-dialog { height: auto; }
     .modal-dialog.small-dialog { height: 100%; }
     .modal-body .content-module .col-md-6 .form-group { padding: 0rem 1.4rem; }
     
     .wrapper-listitems ul li { width: 27%; }
     .searchtop { width: 80%; }
     .wrapper-formshow { margin: -2.5rem -1.78rem 6rem; }
     .wrapper-formshow .form-default .col-md-6 .form-group.row {  padding: 0 1rem; margin-bottom: 1rem; }

     .order-page .wrapper-listitems ul li { width: 20.8%; }

     .fullpagemodal .order-listcustom-items.listnonstyle ul li { width: 47%; }
     
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 580px) {
    
    .content-wrapper { padding: 0; }
    /* .row { margin: 0; } */
    .reviewcustomer { margin: 0 -2rem; border-radius: 0; box-shadow: none; padding: 0.51rem;}
    .reviewcustomer ul li { width: 31.8%; }
    .selectbranch-time { padding: 1rem; }
    .singlecard .grid-margin { margin-top: 20px; } 
    .modal-body .content-module .col-md-6 .form-group { padding: 0; margin: 0.8rem 0;}
    .modal-body .content-module .col-md-6 .form-group label { margin-bottom: 0.6rem; }

    .form-group label { margin-bottom: 0.5rem; }

    .order-page .wrapper-listitems ul li { width: 40.8%; }
    .fullpagemodal .order-listcustom-items.listnonstyle ul li {
        width: 100%;
        margin-left: 0;
    }

    .form-default .row { margin: 0 0 0.6rem 0; }
}

/************************************************************************************
smaller than 600 landscape only
*************************************************************************************/
@media only screen and (max-width: 600px) and (orientation: landscape) {
    
}

/************************************************************************************
smaller than 320
*************************************************************************************/
@media screen and (max-width: 360px) {
    .singlecard .card-body { padding: 1rem; }
    .singlecard .card-body #vn-click { margin: 0 0 2rem 0 }
    .form-group.searchtop { margin: 0 0 0.5rem 0; }
    .wrapper-listitems ul li { width: 42%; margin: 0.7rem; }
    #stikyhead .paging-top ul.pagination { margin: 0.5rem 0 0; }
    
    .login .row-login { width: auto; }
    
    
}