:root {
    --container:66%;
    --color-main: #EE1A21;
    --color-secondary: #F6E815;
    --color-third: #000F5C;
  }

  .w100{width: 100%;}
  .btx{padding: .8rem 1.6rem; transition: all .3s ease-in-out; border-radius: 6px}
  .btx100{width: 100%;}
  .btx-ic{grid-gap: 10px;padding: 8px 12px; transition: all .3s ease-in-out; border-radius: 6px; display: inline-flex; align-items: center;}
  .btx-ic svg{width:22px}
  .btn-large{padding:1rem;background:var(--color-main)!important;text-transform:uppercase;letter-spacing:1px;font-weight:700;font-size:16px;border-radius:8px!important}
  .flex-center{display: flex; align-items: center;}
  .flex-center-between{display: flex; align-items: center; justify-content: space-between;}
  .gap20{grid-gap: 20px;}

  .auth-page{display: flex;background: var(--color-main);}
  .inner-auth{border-bottom-left-radius:60px;background:#fff}.form-trans input{box-shadow: none !important; background: 0 0; border-top: 0; border-left: 0; border-radius: 0; border-right: 0; border-bottom: 1px solid rgba(1, 1, 1, 0.21); padding: 1rem 0 1rem 2.5rem !important;}
  .form-trans input::placeholder{color:#646464}
  .form-trans svg{position: absolute;stroke: var(--color-main);}
  .content-auth form{margin-top: 3rem;width: 400px;}
  
.bg-auth,.inner-auth{width: 50%; height: 100vh; justify-content: center; align-items: center; display: flex; flex-direction: column;}
  .content-auth{text-align:left;display:flex;align-items:baseline;flex-direction:column}
  .btx svg,.btx i{stroke: #fff;color:#fff}

  .titlepage{margin:2rem 0;display:flex;justify-content:space-between;align-items:center}.titlepage h2{margin:0;font-size:28px!important;color:#282f44}
  .helptext {
    font-size: 15px;
    line-height: 2;
  }
  b.red{color:var(--color-main)}
  .form-trans{display:flex;align-items:center;margin-bottom:1rem;}
  .form-trans input:focus-within{border-bottom: 2px solid var(--color-main);}

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

.content{padding: 3rem 0;}
.navtop{padding:12px 7px;background:var(--color-main);border-bottom: 6px solid var(--color-secondary);}
.nav-submenu{visibility: hidden; opacity: 0; -webkit-transform: rotateX(-75deg); position: absolute; top: 45px; z-index: 1000; margin: 0px; padding: 7px; min-width: 190px; -webkit-transform-origin: 0% 0%; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -webkit-transform-style: preserve-3d; background-color: #ce191f; box-shadow: 0 10px 15px rgba(33, 38, 45, 0.12); border: 1px solid rgba(255, 255, 255, 0.04); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.navlist li{display: inline-block; position: relative;}
.nav-item a{display: flex; align-items: center; color: #fff; padding: 5px 15px; border-radius: 4px; transition: all .2s ease-in-out;}.nav-item a svg{width:16px;margin-right:7px}
.container{max-width: var(--container); margin: 0 auto;padding: 0;}
.navlist{display: inline-grid; grid-auto-flow: column; grid-gap: 26px;}
.nav-item a:hover{background:rgba(255, 255, 255, 0.36);}
.nav-submenu li{position: relative; margin: 0px auto 7px; padding: 0px; display: block;}
.nav-item:hover .nav-submenu{opacity: 1; visibility: visible;transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg);}
.smallwrap{max-width:750px!important;margin: 0 auto;}

.jcsearch{margin: 1rem 0 2rem; display: inline-flex; align-items: center; width: 100%;}
.btx-search{background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #F6A800 100%); border-radius: 8px; padding: 1.2rem !important; color: #fff !important; max-width: 250px; width: 100%; text-transform: uppercase; border: 0 !important; margin-left: 1rem;}
.jcsearch input{width:100%;border:1px solid #000;padding:1rem 1.5rem;border-radius:8px;background:#fff;font-size:1rem}



.wrapform {display: grid; align-items: end; padding: 1.5rem 1rem; background: #FFE5E6; border: 1px solid #EE1A21; margin-bottom: 60px; border-radius: 8px; grid-gap: 1rem; grid-auto-flow: column;}
.wrapform .formgroup{width: 100%;}

.toogle-nav{display: none;}
.logo-wrapper img{width: 85%;}

.flexprod, .flexprod-bund{display: flex; width: 100%; gap: 1rem;}
.flexprod .formgroup, .flexprod-bund .formgroup{width:100%}.formgroup{margin-bottom: 2rem;}
.wsmall{width: 16% !important;}
.wsmall-x{width: 30% !important;}
.wmed{width: 40% !important;}
.formgroup label{text-align:left}
.form-label{display:flex;justify-content:space-between;align-items:center}.form-label span{color:var(--color-main);font-size:13px}

.select2-selection--multiple{background:#f8f9ff!important;border:1px solid #CDCDCD!important;padding:.69rem .75rem!important;font-size:1rem!important}

.card .card-header{display: flex; align-items: center; justify-content: space-between;}
.card-header h4{margin: 0; font-size: 20px;}
.card-small{background: #eff3ff; border: 2px solid #000f5c; border-radius: 6px; padding: 1rem; align-items: start; display: flex; flex-direction: column; align-content: baseline; justify-content: center;}
.card-small h3{font-size: 18px;}

.formtrx.wsmall input{padding: 1rem 0.5rem 1rem 1rem !important;}
.foottrx{display: flex; align-items: end; padding: 1rem 0 2rem 0; flex-direction: column;}
.kasirname{margin-left: 2rem;display:grid;grid-gap:10px;align-items:center;grid-auto-flow:column;color:#848484;font-size:18px}
.trxhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.addrow button:first-child{margin-left:0!important}.trxhead .btn-submit{margin:0}
.totals{display:flex;align-items:center}
.totals span{font-size:2rem!important;color:var(--color-main);font-weight:700;margin-left:1rem}
.totals b{font-size:1.5rem}
.foottrx-left{display:flex;align-items:center;gap:2rem}
.form-large label{background: #FFE9E9; border: 2px solid var(--color-main); padding: 1.7rem; width: 100%; font-weight: 700; color: var(--color-main); font-size: 1.5rem !important; border-radius: 8px; text-align: center !important;}
.form-large input{overflow: hidden; clip: rect(0 0 0 0); position: absolute;}
.form-large input:checked + label{background:var(--color-main);color:#fff}
.form-primary{background: #ffe9e9 !important; border-color: var(--color-main) !important; color: var(--color-main);}

.viewprofile{width: 35%; margin-right: 2rem; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.fotoprofile img{width:250px;border-radius:100%}
.fotoprofile{display:inline-block;border:4px solid var(--color-main);padding:5px;border-radius:100%}
.viewprofile h3{margin:1rem 0 10px;display:inline-block}
.viewprofile span{font-size:18px}
.locuser{display: flex; grid-gap: 1rem; columns: 2; margin: 1rem 0 0;}
.locuser li{padding:12px 26px;background:#FFE8E8;border:1px solid var(--color-main);color:var(--color-main);border-radius:10px;font-weight:700}

.footer-act{display:flex;flex-direction:row-reverse;justify-content: space-between;}
.footer-act .btn-third{width:80%;margin:0 0 0 5px;justify-content: center;}
.footer-act #myform{margin:0 5px 0 0;width:18%}
.footer-act #myform button{width:100%;justify-content: center;}
.footer-act button{padding:1rem}
.footer-act form{margin: 0;}


.formgroup.formtrx{margin-bottom: 2rem;}
.retotal{padding:1rem 2rem;border:1px dashed var(--color-third);text-align:center;font-size:1.5rem;font-weight:700;color:var(--color-third);display:inline-flex;margin:0 auto}
.produkTotal{margin-left:10px}

.select2-container .select2-selection--single{background: #fff !important;}
.error-text{font-size: 1.5rem; font-weight: bold; color: var(--color-main); text-align: center; display: flex; padding: 2rem 0; background: #ffe6e7; justify-content: center; width: 60%; margin: 0 auto; border-radius: 15px; border: 1px solid var(--color-main);}
.pilih{display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5rem;}
.card-choose a{transition: all .3s ease-out;display:flex;flex-direction:column;padding:5rem 2rem;justify-content:center;align-items:center;background:#fff;border:1px solid rgba(1,1,1,0.26);border-radius:10px;width:100%}.card-choose{justify-content:center;display:flex}.card-choose a svg{width:4rem;height:4rem}
.card-choose a h4{color:#222;margin:1rem 0 10px}.card-choose a span{color:#111;font-size:16px}
.card-choose a:hover{background:#fdf2f2;border:1px solid var(--color-main);box-shadow:0 15px 25px -5px rgba(238,26,33,0.19)}

.list-result{grid-gap: 7px;display: flex; justify-content: space-between; width: 100%; padding: 1.5rem 0; border-bottom: 1px solid rgba(1, 1, 1, 0.28); font-size: 18px;}
.form-ongkir{margin-bottom: 1.5rem; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; max-width: 25rem; border-bottom: 1px solid rgba(1, 1, 1, 0.2); padding-bottom: 1.5rem;}
.form-ongkir label{font-size:20px;margin-right:1rem;margin-bottom:0;font-weight:700}

.split_item {border: 1px solid var(--color-main); border-radius: 50%; padding: 5px 10px; margin-right: 15px; display: inline-block; color: var(--color-main);}
.inner_detail{display: flex; margin-bottom: 15px; align-items: flex-start;}
.dp {padding: 5px 8px;background: var(--color-secondary);border-radius: 100px;}

.doneit{width:100%}.doneit button{letter-spacing: 2px;margin:0;width:100%;padding:1.5rem 1rem}
.accdp{display:flex;align-items:center;justify-content:space-between;grid-gap:2rem}.accdp .btx{padding:1.2rem 3rem;font-size:2rem}
.doneit button:hover{background: var(--color-third) !important; color: #fff !important;}

.item_detail{font-size: 18px; display: flex; flex-direction: column; grid-gap: 8px;}.wrap-split .inner_detail:last-child{margin:0}.item_detail p{margin:0}
.title-right{display: flex; grid-gap: 1rem; align-items: center;}

.itemTop{display:flex;justify-content:space-between;margin:0 0 2rem;padding-bottom:1rem;border-bottom:3px dashed var(--color-main)}
.itemTop p{font-size:24px;margin:0;font-weight:700}
.itemTop h2{font-size:27px}

.hargabundling{font-size: 18px; font-weight: bold; padding: 6px 16px; border: 2px solid var(--color-main); border-radius: 10px;}
.bundlingHarga{font-size: 18px; font-weight: bold; padding: 6px 16px; border: 2px solid var(--color-main); border-radius: 10px;}
.header-flex h5{margin-top: 10px;}
.search-bund i{top: 26px !important; right: 25px !important;}
.flex{display: flex;}
.skema{display:flex;margin-top:1rem;font-size:16px}.skema b{margin-right:5px}
.formgroup.nameprod{max-width:45%!important}
.pagination a,.pagination span{padding:.8rem 1.1rem;border-radius:5px}
.pagination a{border:0;color:#333;background:#fddbdc}
.pagination{grid-gap:7px}
.page-link:hover{color:#fff;background:var(--color-main)}








@media (max-width:767px){
  .innerprod{padding: 2rem 1rem;}.formgroup{margin-bottom: 1rem !important;}
  .pilih{grid-template-columns: repeat(1,1fr);grid-gap: 0;}
  .accdp{flex-direction:column;grid-gap:1rem}.accdp .btx{padding:15px;width:100%;text-align:center;font-size:30px!important}
  .card-transaksi #nav-tabContent{padding: 1.5rem;}
  .card-choose a{margin-bottom:3rem;width:100%}
  .error-text{width: 100%; font-size: 1rem; padding: 20px 0; border-radius: 10px;}
  .smallwrap{max-width: 93% !important;}
.navtop .container {
  max-width: 100% !important;
}
.jcsearch{margin: 1rem 0 2rem;}
.btx-search span{display:none}.btx-search{max-width:56px!important;margin-left:10px}
.nav-item a svg{margin-right: 1rem;}
.page-header{padding: 1.2rem 15px !important; border-bottom: 6px solid var(--color-main);}
  .page-wrapper.horizontal-wrapper .header-logo-wrapper{width: auto !important;}
  .toogle-nav{display: flex;background-color: transparent; border: none; padding: 0;}
  .logo-wrapper{text-align: center;}.toogle-nav svg{width: 1.9rem;}
  .nav-submenu{display: none;opacity: 1; visibility: visible;-webkit-transform: unset;position:relative;top:0;padding:5px;min-width:auto;background:rgba(1,1,1,0.4);border:0}
.nav-submenu li a{padding:8px 34px;border:0}
.page-title .row h3{font-size: 16px !important;}
  .horizontal-wrapper .left-header{display: none;}.toogle-nav{display:flex}
  .header-logo-wrapper{display: flex; align-items: center;}.item-aktif{display: block;}
  .navtop{overflow-y: scroll; border:0;-webkit-overflow-scrolling: touch; visibility: visible; z-index: 1000; top: 0; height: 100% !important; width: 100%; left: 0; padding: 0; position: fixed; margin-left: -100%;background: transparent;}
.navlist{grid-gap: 0;border: 0;height: 100vh; z-index: 97; display: inline-block; width: 270px; top: 0; position: relative; flex-direction: column; display: flex; align-items: baseline; background: #182028;}
.nav-item{width:100%}
.nav-aktif .navtop{margin: 0; transition: all .2s ease-in-out;}
.nav-item a{color: #99a4b1;border-radius: 0;border-bottom:1px solid rgba(255,255,255,0.12);padding:15px}
.overnav{width: calc(100% - 270px);right: 0;height: 100vh; position: fixed; top: 0; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.51); cursor: pointer;}
.nav-aktif .overnav{opacity: 1; visibility: visible; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -o-transition: opacity 1.5s ease-in-out;}
.formtrx label {height: 30px !important;}
.formtrx .form-large label {height: 95px !important;}
.wrapform {display: block !important;}
}

.ptb-50{padding: 40px 0;}
@media (max-width:767px) {
  .logo-wrapper img{width: 35%;}
  .auth-page{flex-direction:column-reverse}.bg-auth,.inner-auth{width:100%;height:90vh}.content-auth{max-width:100%}.content-auth form{width:100%}
  .mobhide{display: none !important;}
  .content{padding: 2rem 0;}
}



/* CUSTOM FORM & LABEL */
.table td{font-size: 1rem;}

.wrap .table thead{background:var(--color-secondary);height:4rem}
.wrap .table th{border:0}
.wrap .table{background-color: #fff; overflow: hidden; border-radius: 1.2rem;}
.btn-ic{display: inline-flex; align-items: center; padding: 8px 1.5rem;}
.btn-ic svg{width:20px;margin-right:7px;transition: all .3s ease-in-out;}
.btn-third:hover svg{stroke: var(--color-third);}
.rotate180{transform: rotate(180deg);}
.wrap .table thead tr {
  vertical-align: middle;
  font-weight: 700 !important;
}

table thead tr th {
  font-weight: 800 !important;
}
/* EMERGENCY PAGE TABLE */
.wrap .table thead.emergency{
  background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #F6A800 100%);
  height:4rem
}
.wrap .table thead.emergency th{
color: #fff !important;
}
.table-striped tbody.emergency tr:nth-of-type(2n+1) {
	--bs-table-accent-bg: #FFF3F4;
}
.btn-blue {
  background-color: #000F5C !important;
  border-color: #000F5C !important;
  color: #fff;
}

.btn-blue:hover {
  color: #cecece;
}

.btn-submit{background: #F6E815 !important; color: #000 !important; padding: 0.7rem 2rem; font-weight: 600; border:1px solid #ADA30C; font-size: 18px;}
.btn-submit:hover{background: var(--color-third) !important; color: #fff !important; border: 1px solid #000F5C !important;}
.badge-redloc {
	background-color: #FFEEEF;
	color: #FC4438 !important;
	border: 1px solid #FC4438 !important;
	font-size: 16px;
  transform: translateY(-20%);
  font-weight: 300;
}
.btn-primary:hover i{
 color: var(--color-main);
}
.btn-primary:hover svg{stroke: var(--color-main);}
.innerprod{padding: 1.5rem; background: #EFF3FF; border: 2px solid var(--color-third); border-radius: 6px;margin-top: 1rem;}
.prodarea{width:100%;margin:1.5rem 0 2rem}
.innerprod .form-control{background: #fff;}
.form-control,
.select2-container--default .select2-results__option--disabled,
.select2-results__option--selectable,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.69rem 0.75rem !important;
  font-size: 1rem !important;
}

.form-label {font-size: 16px; font-weight: 600; margin-bottom: 1rem;}
.form-control{background:#F8F9FF;border:1px solid #CDCDCD}
.form-control::placeholder{font-size:14px}
.select2-selection--single{background-color:#F8F9FF!important;border:1px solid #CDCDCD!important}


.grid{display:grid;grid-gap:1.2rem}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid2{grid-template-columns:repeat(2,1fr)}
.gridcolumn{grid-auto-flow: column;}


.cardv2{padding:2rem;border:2px solid var(--color-third);border-radius:10px}
.cardv2red{padding: 2rem; border: 2px solid var(--color-main); border-radius: 10px; display: flex; align-items: center;}.w60{width:60%}
.w50{width:50%}.w40{width:40%}
.flex-gap{display:flex;grid-gap:2rem}
.list-detail li{display:flex;align-items:center;grid-gap:12px;margin-bottom:1rem;font-size:16px}
.list-detail{margin-top:1.5rem}
.list-detail li:last-child{margin:0}
.list-detail li svg{stroke:var(--color-main)}
.cardv2red h4{margin-bottom:0;font-size:20px;color:var(--color-main);margin-right:1rem}
.cardv2red span{font-size:18px}
.wa_cust i{border-radius:10px;background:linear-gradient(135deg,#1D976C 2.95%,#2FD38A 100%);padding:15px;color:#fff;font-size:24px;margin-right:10px}
.wa_cust p{font-size:20px}

.wa_cust b{font-size:18px;margin-top:1rem}
.wa_cust{display:flex;flex-direction: column;align-items: start;border-bottom:2px solid #00000070;padding-bottom:15px;padding-top:15px;margin-bottom:25px;font-size:1.6rem}
.card_produk .harga_total{display: flex; justify-content: space-between;}
.harga_total div{font-size: 20px; font-weight: bold;}

.titlepage h2 .badge{margin-left:1rem}

/* DASHBOARD SETT CSS */
.card-1 {
  color: #fff;
  background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #F6A800 100%);
  border-radius: 10px;
}
.card-2{
  background: linear-gradient(103.87deg, #1D976C 2.95%, #2FD38A 100%);
  border-radius: 10px;
  color: #fff;
}
.card-3{
  background: linear-gradient(103.87deg, #5B73E8 0%, #44C4FA 100%);
  border-radius: 10px;
  color: #fff;
}
.price-dashboard{
  color: #000F5C !important;
  font-weight: 800 !important;
}
.text-orange {
  background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #FF8660 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.btn-dashboard {
    margin: 0 1rem 1rem;
}
.cardmin-db{
  min-height: 370px;
}
.head-dashboard {
  align-items: center;
  display: flex;
}

.ket-trans {
  font-weight: 100;
  font-size: 16px;
}
.select-dashboard .select2-selection.select2-selection--single {
  border: 2px solid #000F5C;
}

.select-dashboard #select2-peru-container {
  color: #000F5C !important;
}
/* TABB */
.card-transaksi nav .nav-tabs {
	border-bottom-color: #efefef;
	background: #DBE1FF;
  border-radius: 5px;
}
.card-transaksi .nav-tabs .nav-link.active {
	font-weight: 700;
	background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #F6A800 100%);
  color: #fff !important;
}
.card-transaksi nav .nav-link {
  padding: 2rem 0;
  font-size: 1.25rem;
  font-weight: 700;
	color: #000F5C !important;
}
.card-transaksi .nav-tabs .nav-link.active span {
	background: rgba(255, 255, 255, 0.29);
	border-radius: 6px;
	padding: 0.2rem 0.7rem;
	margin-right: 0.5rem;
}

.card-transaksi .nav-tabs .nav-link span {
	border-radius: 6px;
	padding: 0.2rem 0.7rem;
	margin-right: 0.5rem;
	background: #000F5C;
	color: #fff;
}
.card-transaksi #nav-tabContent {
	padding: 2.5rem;
	background: #FFFFFF;
	border: 1px solid #CECECE;
}
/* Showroom */
.showroom-card p {
  font-size: 16px;
  color: #282F4480;
  display: grid;
  margin: auto 0;
}
.showroom-card {
  height: 100px;
  display: flex;
  flex-direction: inherit;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.showroom-card .sr {font-weight: bold; font-size: 20px; line-height: 27px; background: linear-gradient(92.87deg, rgba(217, 217, 217, 0.28) 0%, #FA5420 0.01%, #FF8660 100%);   background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.showroom-card a {
  color: #000 !important;
  font-size: 22px;
}
.btn-danger {
  color: #fff !important;
}
.btn-danger:hover{background: #FFEBEC !important; color: var(--color-main) !important; border-color: var(--color-main) !important;}
.btn-submit-transaksi {
	background: #F6E815 !important;
	color: #000 !important;
	padding: 1.7rem 2rem;
	font-weight: 600;
	font-size: 18px;
	border-radius: 0;
}
.btn-submit-prev {
	background: #2F2F2F !important;
	color: #000 !important;
	padding: 1.26rem 2rem;
	font-weight: 600;
	font-size: 18px;
	border-radius: 0;
}
.btn-submit-prev i{
  color: #CBCBCB;
  font-size: 40px;
}
.card-foot-transaksi {
	background-color: rgba(0, 0, 0, 0.03);
	border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* Transaksi */
.formtrx label{font-size: 1.2rem !important;}
.formtrx .form-control{padding: 1rem 1.5rem !important; font-size: 18px !important;}
.formtrx .form-control::placeholder{font-size: 18px !important;}

.itemTopHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}
.itemTopHead p {
  margin: 0;
}
.itemTopHead h2 {
  margin: 0;
}

.selection{text-align: left;}
.capital {text-transform: capitalize;}


/* HISTORY MUTASI */

hr.dashed {
  border-top: 3px dashed #fff;
width: 100%;
height: 0 !important;
}
.small-primary{border-color: var(--color-main); background: #FFF4F4;}
.grid-icon{display: grid; grid-auto-flow: column; grid-gap: 7px; align-items: center;}
.grid-icon svg{width: 20px; stroke: var(--color-main);}


.addrow {
	display: flex;
}


.max1000{max-width: 1000px !important;
  margin: 0 auto;}

  .foot-transaksi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin: 0 -2.5rem -2.5rem -2.5rem; */
  }
/* LIVE SEARCH PRODUCT TRANSAKSI */
.modal-searchtrans {
    background: transparent !important;
    border: none !important;
}
.search-trans {
  position: relative;
  color: #aaa;
  font-size: 16px;
}
.search-trans input {background: #fff; border: 1px solid #aaa; border-radius: 5px; padding: 1.5rem !important;}
.search-trans .fa.fa-search {
  position: absolute;
  top: 18px;
  left: auto;
  right: 19px;
  font-size: 25px;
}
.search-trans input[type='text'] {
  font-size: 1.2em !important;
}
.search-trans input::placeholder {
  font-size: 0.9em !important;
}
.modal-searchtrans #result-searchtrans, #result-searchtransBund ,#result-searchtransDiskon{background: #fff; border: 1px solid #fff; border-radius: 8px; padding: 1.5rem !important; margin: 2rem 0 0;}
.page-item.active .page-link {
	z-index: 3;
	color: #fff;
	background-color: var(--color-main);
	border-color: var(--color-main);
}
/* #result-searchtrans .result {
    justify-content: space-between;
    font-size: 20px;
    font-weight: 800;
    border-bottom: 1px solid gray;
    display: grid !important;
    grid-template-columns: repeat(4,1fr);
    line-height: 3rem;
} */

.display-none{display:none!important;}

.kosong{color:red}
/* FAKTUR */
.faktur{padding: 2.5rem !important; background: #fff; max-width: 950px; margin: 0 auto;position: relative;}
.fakturhead{margin-bottom:8px;display:flex;justify-content:space-between;align-items: start;}
.fh-left{width:55%}
.fh-left h3{font-size:22px}
.fh-right{width: 33%; display: flex; flex-direction: column; align-items: end;}
.fh-right img{width: 170px;}
.f-fh{font-size:16px;color: #4b4b4b;line-height: 26px;}
.fh-top{color: #4b4b4b;display:flex;flex-direction:column;grid-gap:10px;font-size:18px}
.fh-branch{text-transform:uppercase}
.fh-alamat{font-size:16px;line-height: 25px;}
.fh-addr{font-size:16px;line-height: 13px;}
.fakturfoot{margin-top:2rem;display: flex;align-items: start;justify-content: space-between;}
.wrapcopyr{display:flex;flex-direction:column;}
.wrapcopyr span{width:100%;margin-top:15px;text-align: right;}
.fh-address{width:100%;display:flex;grid-gap:5px;margin:0 0 2rem;font-size:16px}
.content-auth input{font-size:18px!important}

.faktur .right{
  text-align: right;
}
.faktur .desc p.pt{
    font-size: 18px;
    text-transform: uppercase;
}
.faktur .desc p.addr{
  font-size: 18px;
}
.faktur .desc p.addr span::before {
	list-style-type: circle;
	content: "•";
}
.faktur .desc p.trans{
  font-size: 18px;
}
.fkt-wrap .table-fktur {
  border-collapse: collapse !important;
  border-radius: 1em !important;
  overflow: hidden !important;
}
.fkt-wrap{
  border: 1px solid #3B3B3B !important;
  border-radius: 10px;
  background: #fff !important;
  font-size: 16px;
}
.fkt-wrap .table-fktur th{
  border-bottom: 1px solid #3B3B3B !important;
  padding: 20px !important;;
}
.fkt-wrap .table-fktur td {
  padding: 15px 20px;
}
.table-fktur thead, tbody, tfoot, tr, td, th {
	border-color: #fff0;
}
.table-fktur .bordered {
	border-top: 1.5px dashed #2F2F3B;
}
.fkt-ket{
  font-size: 16px;
  color: #797979;
}
.profile-sm{
  width: 40px !important;
  border-radius: 50px !important;
}

/* input profile img style */

.input-profile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
  + .js-labelFile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
    cursor: pointer;
    .icon:before {
      //font-awesome
      content: "\f093";
    }
    &.has-file {
      .icon:before {
        //font-awesome
        content: "\f00c";
        color: #5AAC7B;
      }
    }
  }
}

.bundling-add {
	display: flex;
	justify-content: end;
	align-items: center;
}

.archive{padding:5px 8px;background:var(--color-main);border-radius:100px;color:#fff}
.total{padding:25px; width: 100%;margin: 1.5rem auto 0;text-align: right;background: rgba(246, 232, 21, 0.15);border-radius: 6px;border: 1px solid rgba(246, 232, 21, 0.56);font-size: 1.3rem;color: #000f5c;}
.item_detail b{text-transform:capitalize}
.formgroup.formtrx .select2-container .select2-selection--single{height:100%!important;padding:1rem!important}
.formtrx-foot .input-group{width:220px}
#overlay-modal{position:fixed;background:rgba(1,1,1,0.57);top:0;left:0;right:0;bottom:0;display:none}
#voucherModal{align-items:center;justify-content:center}
#voucherModal .modal-content{max-width:650px;padding: 1.5rem;} 
#voucherModal{align-items:center;justify-content:center}
.modal-head{display:flex;justify-content:space-between;grid-gap:1rem;margin:0 0 1.4rem}
.modal-head h4{margin:0;font-size:24px}
#vouchersearch{padding:1rem;background:#f0f0ff;color:#151515;border-radius:8px;font-size:16px;border:2px dashed #4949f0}
#voucherModal .modal-content{max-width:500px}
.voucher-list p{display:flex;margin:2rem 0 0;color:#ff5050;font-size:16px}
.voucher-list ul{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1rem;margin:2rem 0 0}
.voucher-list ul span{padding:1rem;background:#e5efff;display:flex;border-radius:8px;color:var(--bs-blue);justify-content:space-between;transition:all .2s ease-in-out}
.voucher-list ul span:hover{color:#fff;background:var(--bs-blue)}
.modal-head .close{font-size:2rem;color:#111;line-height:22px}
#cancelVoucher{margin:1rem 0 0;display:inline-flex;background:var(--bs-danger);color:#fff;padding:13px 20px;border-radius:9px;font-weight:700;transition:all .3s ease}
#cancelVoucher:hover{background:#333}
.voucher-wrap{display:inline-flex;font-size:14px!important;padding:10px 20px;background:var(--color-secondary);margin-left:1rem;border-radius:8px;grid-gap:10px}
.voucher-wrap span{font-weight:unset!important}

.link1{color:#000}.link1:hover{color:var(--color-main)}

@media (max-width:550px){.total{font-size:1rem;padding:1rem;margin:1rem 0 2rem!important;text-align:center}}
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}
@media (max-width:550px) {
  .formtrx-foot{display:flex;flex-direction:column!important;align-items:start;max-width:100%;width:100%;grid-gap:0}
.foottrx{align-items:start}
.formtrx-foot .input-group{width:100%}
  .flexprodmutasi .formgroup{width:100%!important;max-width:100%!important}
  .trxhead .btn-submit{padding: 0.7rem 2rem;}
  .trxhead .flex-center{flex-direction:initial;align-items:baseline;width:100%;grid-gap:1rem}
.trxhead{flex-direction:column;align-items:baseline;grid-gap:1.5rem}
.kasirname{margin:0}
  .formtrx label{font-size: 16px !important;margin-bottom: 5px !important;}.formtrx .form-control{padding: 1rem !important;font-size: 16px !important;}
  .btn-submit-transaksi{padding:1rem 1.5rem!important;border-radius:10px}
  .card .card-header{flex-direction: column; align-items: baseline; grid-gap: 1rem;}
  .cardv2red{flex-direction:column;align-items:baseline}.cardv2red h4{margin-bottom:11px}
  .cardv2red h4,.cardv2 h4{font-size:20px}.cardv2red,.cardv2{padding:1.5rem}.list-detail li,.cardv2red span{font-size:14px}.list-detail li svg{width:20px}
  .grid2,.grid3{grid-template-columns:repeat(1,1fr)}
  .card_produk .harga_total{flex-direction:column;align-items:baseline}.card_produk .harga_total div:last-child{margin-top:1rem}
  .flex-center .card-small{width: 100%;}
    .fotoprofile img{width:150px}
  .viewprofile{width:100%;margin:0 0 4rem}
  .viewprofile h3{font-size:22px}
  .viewprofile span{font-size:16px}
  .locuser li{font-size:12px}
    .select2-selection__choice{margin: 5px !important;}
    .flexprod{grid-gap: 10px;flex-direction:column}.wsmall,.wmed{width:auto!important}
    .title-right{display: flex;}
    .titlepage{flex-direction:column;align-items:baseline}
  .titlepage h2{font-size:20px!important;margin-bottom:1rem}
    .flex-center{flex-direction: column;}.helptext{margin: 2rem 0 0 !important;font-size: 13px; line-height: 23px;}
    form .grid3, form .grid2,.modal-body .grid2,.modal-body .grid3{grid-template-columns: repeat(1,1fr);grid-gap:0}
    .container{max-width: 93%;}
    
  .header-wrapper {
    max-width: 100% !important;
  }
  .card-transaksi #nav-tabContent{margin-top:0!important;padding: 2rem 1rem;}.card-transaksi .nav{display:grid!important}
  }

  /*update scroll nav*/
  @media (min-width: 767px){
    .modal-dialog{max-width: 700px;}
  }
@media (min-width: 767px) and (max-width: 1400px){
  .page-wrapper .page-header .header-wrapper,.container{max-width: 90%;}
.navlist{grid-gap:1rem}.nav-item a{padding:5px 10px}
  }

  @media (min-width: 550px) and (max-width: 900px){
    .wsmall-x{width:50%!important}
    .formgroup.nameprod{max-width:50%!important}.nameprod .flex-center-between{flex-direction:column;align-items:start}.nameprod .flex-center-between label{margin:0 0 5px!important}
    }


  @media (max-width:767px) {
    .titlepage h3{font-size:20px!important;width:100%;text-align:center;margin-bottom:1rem}.select-dashboard.col-4{width:90%;margin:0 auto}
    .page-wrapper .page-header .header-wrapper,.container{max-width: 93%;}
  }