/*Custom style*/

.receiving {
	padding-top: 0;
}

.invoice {
	margin: 10px 5px;
}

.invoice .form-control.quantity {
	width: 30%;
	/*display: inline;*/
}

/*.receiving #myModal table.dataTable tbody td{
	padding: 4px 10px !important;
}*/

.div-between-col {
	text-align: center;
	line-height: 2.5;
}

.table-detail>tbody>tr>th,
.table-detail>tbody>tr>td {
	border-top: 1px solid #eaeaea;
}

.table-detail>tbody>tr:first-child>th,
.table-detail>tbody>tr:first-child>td {
	border-top: none;
}

.table-detail>tbody>tr:last-child>th,
.table-detail>tbody>tr:last-child>td {
	border-bottom: 1px solid #eaeaea;
}

.table-small tr td {
	font-size: 12px;
}

.table-fit {
	width: 1%;
	white-space: nowrap;
}

.table-vertical-middle th,
.table-vertical-middle td {
	vertical-align: middle !important;
}

.d-none {
	display: none;
}

.m-0 {
	margin: 0 !important;
}

.m-1 {
	margin: .25rem !important;
}

.m-2 {
	margin: .5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.m-4 {
	margin: 1.5rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.mt-1 {
	margin-top: .25rem !important;
}

.mr-1 {
	margin-right: .25rem !important;
}

.mb-1 {
	margin-bottom: .25rem !important;
}

.ml-1 {
	margin-left: .25rem !important;
}

.mx-1 {
	margin-left: .25rem !important;
	margin-right: .25rem !important;
}

.my-1 {
	margin-top: .25rem !important;
	margin-bottom: .25rem !important;
}

.mt-2 {
	margin-top: .5rem !important;
}

.mr-2 {
	margin-right: .5rem !important;
}

.mb-2 {
	margin-bottom: .5rem !important;
}

.ml-2 {
	margin-left: .5rem !important;
}

.mx-2 {
	margin-right: .5rem !important;
	margin-left: .5rem !important;
}

.my-2 {
	margin-top: .5rem !important;
	margin-bottom: .5rem !important;
}

.mt-3 {
	margin-top: 1rem !important;
}

.mr-3 {
	margin-right: 1rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.ml-3 {
	margin-left: 1rem !important;
}

.mx-3 {
	margin-right: 1rem !important;
	margin-left: 1rem !important;
}

.my-3 {
	margin-bottom: 1rem !important;
	margin-top: 1rem !important;
}

.mt-4 {
	margin-top: 1.5rem !important;
}

.mr-4 {
	margin-right: 1.5rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.ml-4 {
	margin-left: 1.5rem !important;
}

.mx-4 {
	margin-right: 1.5rem !important;
	margin-left: 1.5rem !important;
}

.my-4 {
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.mr-5 {
	margin-right: 3rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.ml-5 {
	margin-left: 3rem !important;
}

.mx-5 {
	margin-right: 3rem !important;
	margin-left: 3rem !important;
}

.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}

.mt-auto {
	margin-top: auto !important;
}

.mr-auto {
	margin-right: auto !important;
}

.mb-auto {
	margin-bottom: auto !important;
}

.ml-auto {
	margin-left: auto !important;
}

.mx-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}

.my-auto {
	margin-bottom: auto !important;
	margin-top: auto !important;
}

.p-0 {
	padding: 0 !important;
}

.p-1 {
	padding: .25rem !important;
}

.p-2 {
	padding: .5rem !important;
}

.p-3 {
	padding: 1rem !important;
}

.p-4 {
	padding: 1.5rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.pt-0 {
	padding-top: 0 !important;
}

.pr-0 {
	padding-right: 0 !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.pt-1 {
	padding-top: .25rem !important;
}

.pr-1 {
	padding-right: .25rem !important;
}

.pb-1 {
	padding-bottom: .25rem !important;
}

.pl-1 {
	padding-left: .25rem !important;
}

.px-1 {
	padding-left: .25rem !important;
	padding-right: .25rem !important;
}

.py-1 {
	padding-top: .25rem !important;
	padding-bottom: .25rem !important;
}

.pt-2 {
	padding-top: .5rem !important;
}

.pr-2 {
	padding-right: .5rem !important;
}

.pb-2 {
	padding-bottom: .5rem !important;
}

.pl-2 {
	padding-left: .5rem !important;
}

.px-2 {
	padding-right: .5rem !important;
	padding-left: .5rem !important;
}

.py-2 {
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
}

.pt-3 {
	padding-top: 1rem !important;
}

.pr-3 {
	padding-right: 1rem !important;
}

.pb-3 {
	padding-bottom: 1rem !important;
}

.pl-3 {
	padding-left: 1rem !important;
}

.py-3 {
	padding-bottom: 1rem !important;
	padding-top: 1rem !important;
}

.px-3 {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
}

.pt-4 {
	padding-top: 1.5rem !important;
}

.pr-4 {
	padding-right: 1.5rem !important;
}

.pb-4 {
	padding-bottom: 1.5rem !important;
}

.pl-4 {
	padding-left: 1.5rem !important;
}

.px-4 {
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}

.py-4 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.pt-5 {
	padding-top: 3rem !important;
}

.pr-5 {
	padding-right: 3rem !important;
}

.pb-5 {
	padding-bottom: 3rem !important;
}

.pl-5 {
	padding-left: 3rem !important;
}

.px-5 {
	padding-right: 3rem !important;
	padding-left: 3rem !important;
}

.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.badge-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

.badge-primary {
	color: #fff;
	background-color: #3c8dbc;
	border-color: #3c8dbc;
}

.align-items-center {
	-webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
}

.d-flex {
	display: flex;
}

.text-left {
	text-align: left !important;
}

.d-none {
	display: none;
}

.font-weight-bold {
	font-weight: bold;
}

.content-header>.breadcrumb-custom {
	float: right;
	background: transparent;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 12px;
	padding: 7px 5px;
	position: absolute;
	top: 15px;
	right: 10px;
	border-radius: 2px;
}

i.custom-fa {
	display: inline-block;
	color: #89A1B1;
	background-color: #F0F6F7;
	border-radius: 60px;
	padding: 0.5em 0.6em;
	font-size: 16pt;
}

i.custom-fa-customer {
	display: inline-block;
	color: #89A1B1;
	background-color: #F0F6F7;
	border-radius: 60px;
	padding: 0.5em 0.6em;
	font-size: 10pt;
}

.box .border-left-custom {
	border-left: 1px solid #e6e6e6;
}


.img-item-information {
    width: 100%;
    height: auto;
    object-fit: cover;
	border-radius: 0.4rem;
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
	border: 1.5px solid #eeeeee;
	border-radius: 5px;
	padding: 6px 12px;
	height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #929292;
	line-height: 28px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #9dc6dd;
	color: #4894c0;
}

.d-custom-step-1 {
	display: flex;
}

.content-right {
	margin-top: 0 !important;
	padding-left: 3rem !important;
}

.breadcrumb-custom {
    top: 35px !important;
    left: 10px !important;
}

.btn-customer {
	border-radius: 5px;
}

.form-control-custom {
	border: 1.5px solid #eeeeee;
	border-radius: 5px;
}

.btn-search-custom {
	border: 1.5px solid #eeeeee;
	border-radius: 0px 5px 5px 0px !important;
}

.text-non-active {
	color: #9a9a9a !important;
}

.v-hidden {
	visibility: hidden;
}

.fa-cart-custom-size {
    font-size: 1.5em;
}

.fa-cart-custom {
    color: #9a9a9a;
}

.fa-opacity-0 {
	opacity: 0 !important;
}

.fa-opacity-0 {
	opacity: 0 !important;
}

.fa-stack[data-count]:after{
	margin-top: 8px;
	position:absolute;
	right:0%;
	top:1%;
	content: attr(data-count);
	font-size:10pt;
	padding:.4em;
	border-radius:999px;
	line-height:.5em;
	color: white;
	background:rgba(255,0,0,.85);
	text-align:center;
	min-width:1em;
}

.box-item {
	border: 1px solid #eeeeee !important;
	box-shadow: none !important;
	margin-bottom: 1rem;
	/* min-height: 25vh !important;
	max-height: 50vh !important; */
}

.item-name {
	min-height: 8vh !important;
	max-height: 10vh !important;
}

.item-price {
	font-weight: 550;
	font-size: 11pt;
}

.item-information-price {
	font-weight: 450;
	font-size: 14pt;
}

.border-top {
	border-top: 1px solid #eeeeee;
}

.border-bottom-dashed {
	border-bottom: 1px dashed #eeeeee;
}

.pagination-active-custom {
    color: #fff !important;
    background-color: #3C8DBC !important;
	border-radius: 5px;
	margin: 5px 5px;
	cursor: pointer;
}

.box.box-solid>.box-header .btn-search-custom:hover {
	background-color: #367fa9;
}

.box.box-solid>.box-header .btn-select-item:hover {
	background-color: #008d4c;
}

.box.box-solid>.box-header .btn-disabled-item:hover {
	background-color: #d9534f;
    border-color: #d43f3a;
}

.pagination-custom {
    background: #f8f8f8 !important;
    color: #8e8e8e !important;
	border: none !important;
	margin: 5px 5px;
	cursor: pointer;
}

.modal-border-radius {
	border-radius: 0.5rem!important;
}

.text-white {
	color: #fff;
	opacity: 1 !important;
}

.modal-header-item {
	border-radius: 0.5rem 0.5rem 0rem 0rem !important;
	color: #fff;
	background-color: #3C8DBC;
}

.box-header-invoice {
	border-radius: 0.25rem 0.25rem 0rem 0rem !important;
	color: #fff;
	background-color: #3C8DBC;
}

.d-item-information {
	display: flex;
}

.box-item-information {
	border: 1px solid #eeeeee !important;
	box-shadow: none !important;
	margin-bottom: 1rem;
	border-radius: 0.5rem 0.5rem 0rem 0rem !important;
}

.box-item-pricing {
	border: 1px solid #eeeeee !important;
	box-shadow: none !important;
	border-radius: 0.5rem !important;
}

.table-fit {
    width: 1%;
    white-space: nowrap;
}

.border-0 {
	border: none !important;
	border-style : hidden!important;
}

.badge-stock {
	border-radius: 2px !important;
	font-weight: normal;
	color: #3C8DBC;
	background-color: #3c8dbc2f;
}

.badge-due-date {
	border-radius: 2px !important;
	font-weight: 550 !important;
	color: #a43433;
	background-color: #f7d3d3;
	font-size: 10pt;
	padding: 0.8rem 1rem !important;
}

.badge-invoice {
	border-radius: 2px !important;
	font-weight: 550 !important;
	color: #228d54;
	background-color: #cdf3e2;
	font-size: 10pt;
	padding: 0.8rem 1rem !important;
}

td.item-information {
	line-height: 0.5 !important;
	padding-left: 0px !important;
}

.justify-content-center	{
	-webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
	display: flex;
}

.input-quantity {
	display: flex;
	border: 1px solid #eeeeee;
	max-width: 15rem;
	border-radius: 0.25rem;
}

.btn-quantity {
	background-color:rgba(0, 0, 0, 0);
	color: #3C8DBC;
	border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
	font-size: 14pt;
}

.fw-500 {
	font-weight: 500 !important;
}

.hr-invoice {
	margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0;
    border-top: 1px solid #eee;
}

.invoice-icon {
	color: #a6b8c4 !important;
	font-size: 14pt;
	width: 5px !important;
	vertical-align: middle !important;
	line-height: 1.1 !important;
}

.invoice-information {
	font-weight: 350;
	vertical-align: middle !important;
	line-height: 1.1 !important;
}

.table-invoice>thead>tr>th {
	font-weight: 500 !important;
	vertical-align: middle !important;
}

.table-invoice>tbody>tr>td {
	font-weight: 300 !important;
	vertical-align: middle !important;
	font-size: 10pt;
}

.cursor-pointer {
	cursor: pointer;
}

.bg-discount-percent {
	background-color: #3C8DBC !important;
	color: #fff;
}

.control-label-custom {
	font-weight: 450 !important;
}

.box-pricing-invoice {
	background-color: #d8e8f2;
	border-radius: 0.5rem;
}

.right-invoice {
	color: #63a3c9;
	font-size: 12pt;
}

.left-invoice {
	font-weight: 550 !important;
	font-size: 12pt;
	color: #3d3d42;
}

.table-fit {
    width: 1% !important;
    white-space: nowrap;
}

.border-top {
	border: 1px solid #f4f4f4;
}

.justify-content-between {
	-webkit-box-pack: justify!important;
	-ms-flex-pack: justify!important;
	justify-content: space-between!important;
}

.table-responsive {
	overflow-x: auto;
}

@media (min-width: 992px) {
	.modal-xl {
	  width: 1140px;
	}
}

@media (max-width: 576px) {
	.box .border-left-custom {
		border-left: none;
	}

	.d-custom-step-1 {
		display: inline;
	}

	.d-item-information {
		display: inline;
	}

	.content-right {
		margin-top: 1.5rem !important;
		padding-left: 1.5rem !important;
	}


	.img-item-information {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 0.4rem;
	}

	.item-name {
		min-height: 4vh !important;
		max-height: 5vh !important;
	}
}

.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

.card-img-top {
	width: 100%;
	height: 30vw;
	object-fit: cover;
	border-radius: 2px;
}

#step-2-items-container {
	display: block;
	width: 100%;
	height: 80vh;
	overflow-y: scroll;
}

@media (min-width: 576px) {
	.card-img-top {
		width: 100%;
		height: 30vw;
		object-fit: cover;
		border-radius: 2px;
	}
}

@media (min-width: 768px) {
	#step-2-items-container {
		height: 60vh;
	}
}

@media (min-width: 992px) {
	.card-img-top {
		width: 100%;
		height: 10vw;
		object-fit: cover;
		border-radius: 2px;
	}

	#step-2-items-container {
		height: 70vh;
	}
}

@media (min-width: 1200px) {
	.card-img-top {
		width: 100%;
		height: 15vw;
		object-fit: cover;
		border-radius: 2px;
	}

	#step-2-items-container {
		height: 90vh;
	}
}

#step-2-items-container::-webkit-scrollbar {
	width: 10px;
}

/* Track */
#step-2-items-container::-webkit-scrollbar-track {
	background: #ECF0F5;
	border-radius: 10px;
}

/* Handle */
#step-2-items-container::-webkit-scrollbar-thumb {
	background: #3C8DBC;
	border-radius: 10px;
}

/* Handle on hover */
#step-2-items-container::-webkit-scrollbar-thumb:hover {
	background: #1f5370;
}