body {
	font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
}

select::after {
            color: #000;
}

.text-red	{
	color:#ff0000;
}

.card {
  box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
}

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 0;
  --bs-card-border-color: rgba(0,0,0,.125);
  --bs-card-border-radius: 1rem;
  --bs-card-box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
  --bs-card-inner-border-radius: 1rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: #fff;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.card-img, .card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img, .card-img-bottom, .card-img-top {
  width: 100%;
}


.card .card-header {

    padding: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;

}

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

.border-left-primary {
  border-left: .25rem solid #4e73df !important;
}

element {

}
.text-gray-300 {

    color: #dddfeb !important;

}

.text-gray-800 {
  color: #5a5c69 !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar {
  background-color: rgb(112, 173, 71);
  border-right: 0 !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: #fff;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: #efefef;
}

.menu-title , .menu-icon	{
	font-size:20px !important;
}


#datatable_wrapper, #datatable	{
	width:100%;
}

.bg-danger {
	background-color: #680030 !important;
}

.bg-warning {
	background-color: #d6c660 !important;
}

.bg-info {
	/*background-color: #0c71c7 !important;*/
	background-color: #003068 !important;
}

.bg-success {
	background-color: #006838 !important;
}

.btn-check:active + .btn.btn-success, .btn-check:checked + .btn.btn-success, .btn.btn-success.active, .btn.btn-success.show, .btn.btn-success:active:not(.btn-active), .btn.btn-success:focus:not(.btn-active), .btn.btn-success:hover:not(.btn-active), .show > .btn.btn-success {
	background-color: rgb(112, 173, 71) !important;
}

.btn.btn-success	{
	background-color: #006838 !important;
}

.logo-font, .logo-font:hover	{
	color:#70ad47;
	font-size: 22px;
}

.login-left-fix	{
	left: 0px !important;
	margin-left: 0px !important;
}

.border-black {
	border-color: #000;
}

#kt_app_sidebar_logo	{
	background-color: #fff !important;
}

@media (min-width: 992px) {
	div, main, ol, pre, span, ul {
		scrollbar-width: thin;
		scrollbar-color: #70ad47  transparent !important;
	}
}

.border-dark {
  border-color: rgb(33, 37, 41)  !important;
}

.bg-grey	{
	background-color: #fbfbfb;
	border: 1px #e5e5e5 solid;
}

#datatablesearchable_wrapper {
	width:100% !important;
}



/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.rwdcart table, .rwdcart thead, .rwdcart tbody, .rwdcart th, .rwdcart td, .rwdcart tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.rwdcart thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .rwdcart tr {
      margin: 0 0 1rem 0;
    }
      
    .rwdcart tr:nth-child(odd) {
      background: #fcfdfb;
    }
    
		.rwdcartx td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 0px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.rwdcartx td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.rwdheadingcart td:nth-of-type(1):before { content: "Product"; }
		.rwdheadingcart td:nth-of-type(2):before { content: "Option"; }
		.rwdheadingcart td:nth-of-type(3):before { content: "Amount"; }
		.rwdheadingcart td:nth-of-type(4):before { content: "Action"; }
	}
	
.cartdeloptions {
	border-top-color: rgb(239, 242, 245);
	border-top-style: dashed;
	border-top-width: 1px;
	border-collapse: separate;
}


.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

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

.font-weight-bolder {
  font-weight: 600 !important;
}


.font-size-sm {
  font-size: 0.925rem;
}

.font-size-xs {
  font-size: 0.8rem;
}

.font-size-lg {
  font-size: 1.08rem;
}

.font-size-h1 {
  font-size: 2rem !important;
}

.font-size-h2 {
  font-size: 1.75rem !important;
}

.font-size-h3 {
  font-size: 1.5rem !important;
}

.font-size-h4 {
  font-size: 1.35rem !important;
}

.font-size-h5 {
  font-size: 1.25rem !important;
}

.font-size-h6 {
  font-size: 1.175rem !important;
}
.importantmessage {
	
	padding: 25px;
	color: #f00;
	background-color: #fff;
	margin-bottom: 25px;
	border-radius: 20px;
	border: 3px solid #f00;
}