.mysection {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.redOrder {
    background: #bd0b0b !important;
}

/* HEADER*/
.search-header{
 display: none;
}



.send-mail{
    background:  var(--secondary-bg-color);
    border: none;  cursor:pointer;
    border: 1px solid white;    padding: 5px;    width: 100%;
    color: white;    margin-top: 5px;
}
.outstock {
    color: red;
}

.search-menu{
    height: 110px !important;
}
.itinerary a:hover{
text-decoration: underline;
}

.itinerary {
text-decoration:underline;
}

.itinerary{
    
    padding-top:5px;
}

@media (min-width: 500px) {   
    .mobile-only{
        display:none;
    }


}

@media (max-width: 500px) {   
    .feedshop{
    flex-wrap: wrap;
    justify-content: center;
}

    .not-mobile{
        display:none;
	}
	
	.order-form {
		margin-top: 20px;
	}
}


@media (max-width: 900px) {   
    .geo-mobile{
        height: -webkit-fill-available;
        margin-top: 117px;
    }
}
@media (min-width: 900px) {

    .search-menu{
        height: 70px !important;       
    }

}

.display-search{
    display: flex;
}

.search-header-icon{
    position: absolute;
    margin-left: -1px;
    margin-top: 11px;
    font-size: 22px;
    color: gray;
}
.header-info {
    display: flex;
    align-items: center;
        flex-grow: 1;
        justify-content: space-between;
}

.header-block {
    display: flex;
    flex-direction: column;
        flex-grow: 1;
}
.menu-header i {
    font-size: 27px;
    color: dodgerblue;
    /* border: 2px solid dodgerblue; */
    /* border-radius: 26px; */

    margin-right: 6px;
}
.menu-header:hover{
    background:#e9f4ff;
}

.menu-header {
    display: flex;
    cursor:pointer;
    background: white;
    align-items: center;
    border: 1px solid dodgerblue;
    padding: 2px 7px;
    margin-right: 10px;
}
/***********/
.card-userSearch {
	-webkit-box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);
	-moz-box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);
	box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);
	padding: 29px;
	color: black;
	background: white;
	border-radius: 5px;
	margin-bottom: 10px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mainCategory.selected{
    background:  var(--secondary-bg-color,dodgerblue);
    /* background:dodgerblue; */

}
.menuItem.selected{
    background:  var(--secondary-bg-color);
    
}

.print-order{
    color:black;
        text-decoration: underline;
    font-size: 14px;
   background: none;
    border: none;
    cursor:pointer;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.descShop {
    padding: 0px 21px;
    color: #3f3f3f;
    background: #dddddd61;
}
.card-color {
	color: white;
	background-color: var(--main-bg-color, #2c3e50) !important;
}

.navbar .card {
	background: white;
}

.header-left .formSearch {
	flex-grow: 0.5;
    
}



/***************/


/* ITEMPAGEUSER/*
/***************/

.itemPageUser .header-user-img {
	height: 70px;
	min-height: 70px;
	width: 70px;
	min-width: 70px;
	border-radius: 37px;
}

.itemPageUser .avatar {
	font-size: 42px;
}


/***********/


/* BREADCURMB /*
/************/

* a.breadcrumb {
	font-weight:bold;
	color: black;
}

div.breadcrumb {
	
	margin-left: 20px;
    /* margin-right: auto; */
    /* margin-bottom: 7px; */
    background: #d7d7d7;
    padding-left: 19px;
    padding-right: 20px;
    width: max-content;
    display: flex;
    height: 30px;
    align-items: center;
    border-radius: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.breadcrumb i{
    padding-right: 5px;
    color:black;
    }
.navSearch {
	display: flex;
	justify-content: space-between;
	align-items: center;
    background: lightgrey;
    padding: 8px;
}


/***********/


/* SELECT CSS /*
/************/

*
/* The container must be positioned relative: */

.custom-select {
	position: relative;
	width: 160px;
	font-size: 13px;
}

.custom-select select {
	display: none;
	/*hide original SELECT element: */
}

.select-selected {
	background-color: white;
	padding-left: 10px !important;
	display: flex;
	align-items: center;
	height: 25px;
}


/* Style the arrow inside the select element: */

.select-selected:after {
	position: absolute;
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #000 transparent transparent transparent;
}


/* Point the arrow upwards when the select box is open (active): */

.select-selected.select-arrow-active:after {
	border-color: transparent transparent #000 transparent;
	top: 5px;
}


/* style the items (options), including the selected item: */

.select-items div {
	color: #000;
	padding: 3px 0px;
	display: flex;
	align-items: center;
	    height: 40px;
	cursor: pointer;
}


/* style the items (options), including the selected item: */

.select-selected {
	color: black;
	padding: 3px 0px;
	border: 1px solid black;
	display: flex;
	align-items: center;
	height: 25px;
	cursor: pointer;
}

@media (max-width: 900px) {
	.select-items div,
	.select-selected {
		width: 100%;
	}
	#category {
		display: none;
	}
	.select-selected {
	border: 1px solid black;
	}
	.categoryMaster {
		width: 100% !important;
	}
	.custom-select {
		    width: 140px;
	}
}


/* Style items (options): */

.select-items {
	position: absolute;
	background-color: white;
    
	    width: 138px;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	border: 1px solid grey;
	border-top: 0px;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	border-bottom: 1px solid grey;
	max-height: 438px;
	overflow-y: auto;
}


/* Hide the items when the select box is closed: */

.select-hide {
	display: none;
}

.selectedPage a {
	color: dodgerblue !important;
}

.select-items .categItem {
	padding-left: 10px !important;
	width: 100%;
	margin: 0;
}

.select-items .categ:hover {
	background: lightgrey;
}

.select-items .categoryMaster:hover {
	background: #266481 !important;
}

.select-items .categ {
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

.categoryMaster .categItem {
	width: 100%;
	color: black !important;
}

.categoryMaster {
	background:white;
	color: black !important;
}


/****************/


/*  PAGINATION  */


/****************/

[data-pagination],
[data-pagination] *,
[data-pagination] *:before,
[data-pagination] *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: auto;
}

[data-pagination] {
	font-size: 8pt;
	line-height: 1;
	font-weight: 400;
	font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
	margin: 1em auto;
	text-align: center;
	transition: font-size .2s ease-in-out;
}

[data-pagination] ul {
	list-style-type: none;
	display: inline;
	font-size: 100%;
	margin: 0;
	padding: .5em;
}

[data-pagination] ul li {
	display: inline-block;
	font-size: 100%;
	width: auto;
	border-radius: 3px;
}

[data-pagination] > a {
	font-size: 140%;
}

[data-pagination] a {
	color: #777;
	font-size: 100%;
	padding: .5em;
}

[data-pagination] a:focus,
[data-pagination] a:hover {
	color: #f60;
}

[data-pagination] li.current {
	background: rgba(0, 0, 0, .1)
}


/* Disabled & Hidden Styles */

[data-pagination] .disabled,
[data-pagination] [hidden],
[data-pagination] [disabled] {
	opacity: .5;
	pointer-events: none;
}

@media (min-width: 350px) {
	[data-pagination] {
		font-size: 14pt;
	}
}

@media (min-width: 500px) {
	[data-pagination] {
		font-size: 14pt;
	}
}

@media (min-width: 700px) {
	[data-pagination] {
		font-size: 14pt;
	}
}

@media (min-width: 900px) {
	[data-pagination] {
		font-size: 16pt;
	}
}


/**********/


/* SEARCH */


/**********/

.search {
    display: flex;
    align-items: center;
    height: 40px;
    /* border-radius: 5px; */
    padding: 5px 20px 4px 8px;
    margin-bottom: 10px;
    margin-left: -10px;
}
.search-form {
    background-color: white;
    border-right: 0px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    height: 31px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}
.search i {
	margin-right: 7px;
		color:black;
	margin-left: 6px;
}

.search input {
	background-color: transparent;
	border: 0px;
	flex-grow: 1;
	color: gray;
	height: 30px;
}

.search::placeholder {
	color: rgba(0, 0, 0, 0.3);
}


/**************/


/* ITEMS LIST */


/**************/

.item-list {
	margin-top: 10px;
}

.item-list .item-list-component {
	margin-bottom: 10px;
	flex-direction: row;
	justify-content: space-between;
	height: 120px;
}

	.item-list-pub {
		border: 3px dashed var(--main-bg-color);
		box-sizing: border-box;
		border-radius: 5px;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		padding: 20px;

		color: var(--main-bg-color);
	}

		.item-list-pub-plus {
			font-size: 32px;
		}

		.item-list-pub-text {
			font-size: 22px;
			text-align: center;
		}

.item-list .item-image {
	width: 150px;
	height: 100%;
	border-radius: 5px 0px 0px 5px;
}


/********************/


/* ITEMS IN SIDEBAR */


/********************/

.item-top {
	display: flex;
	flex-direction: column;
	/* border-radius: 5px; */
	margin-bottom: 10px;
	/* box-shadow: 0px 0px 16px -7px rgba(97,97,97,1); */
	/* padding: 10px 0px; */
}

a.goCarPool {
    font-size: 18px;
    display: flex;
    align-items: center;
    padding: 11px 10px;
    background-color: #ff9809;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    border: 0px;
    cursor: pointer;
    
}

a.goCarPool  i {
    font-size: 24px;
    margin-top: 1px;
}

	.nav-carpool-top {
		display: flex;
		flex-direction: column;
	}
		.nav-carpool-title i{
			color:white;
			font-size:30px;
		}
		.nav-carpool-title a{
		
			    font-family: 'Schoolbell';
    font-size: 20px;
    color:white;
    padding-left: 5px;
			
		}
.nav-carpool-title a:hover{
	text-decoration:underline;
}	

		.nav-carpool-title {
    color: #2c2c2c;
    background-color:#83d100;
    
    display: flex;
    align-items: center;
    padding: 10px;
    text-align: left;
		}
	
		
		
.nav-carpool-overlay {
    position: absolute;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0));
    height: 59px;
    font-size: 17px;
    color: white;
    padding: 5px 10px;
       z-index: 998;
}

.top-seller-item {
	padding: 10px;
}

.item-short-component:hover {
	text-decoration: underline;
}

.item-short-component {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	padding: 0px 17px;
	height: 77px;
}

.item-short-component .item-image {
	width: 70px;
	height: 70px;
	border: 1px solid lightgrey;
	border-radius: 11px;
}

.item-short-component .item-name {
	font-size: 14px;
	line-height: 16px;
	height: 16px;
}

.item-short-meta {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0px 10px;
}

.item-short-meta .item-price {
	font-weight: normal;
	color: #2980b9;
	font-size: 16px;
}


/*******************/


/* ITEMS DASHBOARD */


/*******************/


/*TOPVIEW*/

.topViewtitle {
	font-family: 'Schoolbell';
	font-size: 20px;
	    margin-top: 20px;
	color: #ffffff;
	background-color: #007ba9;
	display: flex;
	align-items: center;
	padding: 10px;
	margin-bottom: 5px;
	text-align: left;
}

.topnav ol.pageTop {
	list-style: none;
	display: flex;
	font-size: 21px;
	margin: auto;
}

.topnav nav.pages {
	display: flex;
}

.topnav {
	display: flex;
	margin: auto;
}

.topnav li {
	cursor: pointer;
}

.pageTop .select {
	cursor: pointer;
	color: red;
	font-weight: 100;
}

.topnav button {
	background: none;
	border: none;
	font-size: 22px;
	font-weight: 100;
	cursor: pointer;
}

.topPage[data-id='1'] {
	display: block;
}

.topPage {
	display: none;
	height: 394px;
}


/*********/

.infoUserPlace {
	font-size: 12px;
	color: black;
	padding-top: 9px;
	padding-left: 5px;
}

.infoUserPlace li {
	list-style: none;
}

.mobileAdd {
	visibility: hidden;
}

.mobileAdd a {
	/* position: absolute; */
	/* padding: 13px; */
	font-size: 53px;
	display: flex;
	margin-left: 9px;
	margin-top: -11px;
}

.infoUser {
	visibility: visible;
}

span.infoUser {
	margin-left: 6px;
}

@media screen and (max-width: 1000px) {
	.infoUser {
		
	}
	.header-user {
		flex-direction: row-reverse;
		flex-shrink: 1;
	}
}

@media screen and (max-width: 900px) {
	.mobileAdd {
		visibility: visible;
		background: #ff700a;
		position: fixed;
		bottom: 0px;
		right: 0px;
		margin-bottom: 32px;
		margin-right: 32px;
		z-index: 99999;
		height: 70px;
		width: 70px;
		border-radius: 35px;
		text-align: center;
		vertical-align: center;
		cursor: pointer;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);
	}

	.mobileAdd i {
		margin-top: 22px;
		color: white;
	}
}

.item-grid {
	padding: 10px 20px;
	margin-top: 10px;
	display: grid;
	grid-template-columns: [first] 1fr 1fr 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 25px;
}

.item-full-info-wrapper {
	width: 100%;
	padding : 10px 20px;
	box-sizing: border-box;
}

.item-full-info {
    border: 3px solid #c11111;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    font-weight: bold;
}

.item-grid.searching {
	margin-top: 10px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 10px;
}

@media screen and (max-width: 1200px) {
	.item-grid.searching {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.item-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 1000px) {
	.item-grid.searching {
		grid-template-columns: 1fr 1fr;
	}
	.item-grid {
		grid-template-columns: 1fr 1fr;
	}
}



@media screen and (max-width: 400px) {
	.item-grid.searching {
		grid-template-columns: 1fr 1fr;
	}
    .item-grid .item-image {
        height: 130px !important;
    }
	.item-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 900px) {
	.item-grid.searching.responsive-full {}
	.item-grid.searching.responsive-small {
		display: none;
	}
}

@media screen and (max-width: 900px) {
	.item-grid.searching.responsive-full { display: none; }
	.item-grid.searching.responsive-small {}
}

.item-grid.item-top {
	grid-template-columns: 1fr 1fr;
}

.item-list-component {
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
	/* border-radius: 5px; */
	display: flex;
	color: black;
}

.soon {
    transform: rotate(-45deg);
    border-radius: 24px;
    margin-top: 69px;
    width: 100%;
    position: absolute;
    z-index: 99;
	font-size: 60px;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
    background: rgba(255,255,255,0.7);
}
a.item-list-component.disabled {
    opacity: 0.4;
}
.item-grid .item-list-component {
	flex-direction: column;
	justify-content: flex-start;
}


.item-image {
    background-position: center center;
    background-size: contain;
    background-blend-mode: multiply;
    position: relative;
    background-repeat: no-repeat;
}

.item-grid .item-image {
	width: 100%;
	height: 230px;
    background-position-y: 0px;
	/* border-radius: 5px 5px 0px 0px; */
}

.item-grid.item-top .item-image {
	height: 118px;
}

.item-grid.item-top .item-name {
	font-size: 13px;
}

.item-baseline {
	position: absolute;
	right: 5px;
	bottom: 5px;
	color: white;
}

.item-meta {
	flex-grow: 1;
	/* padding: 10px 10px 0px 10px; */
    padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #ffffff;
	border-radius: 0px 0px 5px 5px;
}

.item-title-line {
	width: 100%;
	display: flex;
}

.item-list .item-title-line {
	flex-direction: row;
	justify-content: space-between;
}

.item-grid .item-title-line {
	flex-direction: column-reverse;
	justify-content: flex-start;
	margin-bottom: 10px;
}

.item-list .item-category {
	flex-direction: column-reverse;
	width: auto;
	flex-grow: 2;
}

.item-name {
	margin-top: 5px;
	font-weight: bold;
	font-size: 18px;
	line-height: 20px;
	overflow: hidden;
	position: relative;
}

.item-name a {
	color: #000000;
}

.ellipsis {
	position: absolute;
	height: 20px;
	width: 30px;
	bottom: 0px;
	right: 0px;
	background: linear-gradient(0.25turn, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.item-category {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 12px;
	color: var(--main-bg-color, #2c3e50);
}

.item-price {
	font-size: 14px;
	font-weight: bold;
	color: black;
}

.item-desc {
	font-size: 12px;
	/* margin-bottom: 5px; */
	/* text-align: justify; */
}


/********/
/* ITEM */
/********/

div#swal2-content {
	font-size: 19px;
}

.itemPage .item-user-info-meta-mobile {
	display: none;
}

.itemPage .priceFull {
	display: none;
}


@media screen and (max-width: 900px) {
	.itemPage .item-user-info-meta-mobile.main {
		display: flex;
		align-items: flex-start;
		float: left;
	}
	.itemPage .priceFull {
		display: block;
	}
	.itemPage .item-user-info-meta-mobile {
		display: block;
	}
	.item-user-info-meta-mobile button {
		margin-bottom: 5px;
	}
	.item-user-info-meta-mobile.admin button {
		color: red;
		border-color: red;
	}
	.itemPage .item-user-info-meta-mobile .item-user-info-name {
		text-align: left;
	}
	.itemPage .item-user-info-meta-mobile .item-user-info-date {
		text-align: left;
	}
	.itemPage .item-user-info-meta-mobile .item-user-action {
		margin-bottom: 7px;
		text-align: right;
	}
}

.itemPage button {
	padding: 5px;
	background: white;
	background: transparent;
	color: dodgerblue;
	/* border-color: dodgerblue; */
	/* border-style: solid; */
	border: 1px solid dodgerblue;
	cursor: pointer;
	width: 100%;
	height: 40px;
}

.itemPage .item-user-actions button:hover {
	background: lightgrey;
}

.item-details {
	/*max-width: 680px;*/
}

.item-user-info-meta-mobile.admin button,
.item-user-info-meta.admin button {
	background: white;
	margin-bottom: 5px;
}

item-user-info-meta-mobile.admin button:last-child,
.item-user-info-meta.admin button:last-child {
	margin-bottom: 0px;
}

.admin .red-button {
	border-color: red !important;
	color: red;
}

.item-details h3 {
	margin-bottom: 10px;
}

.item-description {
	font-size: 14px;
}

.item-user-info {
	display: flex;
	align-items: center;
}

.itemPage .priceRight {
	font-size: 30px;
	text-align: center;
}

.item-user-img {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-size: cover;
}

.item-user-info-date {
	font-size: 12px;
	color: gray;
}

.item-user-actions {
	font-size: 13px;
}

.item-user-action {
	margin-bottom: 7px;
}


/************/


/* CAROUSEL */


/************/

.carousel-container {
	position: relative;
	height: 147px;
        margin-bottom: 10px;

}

.carousel-picture-background {
	height: 146px;
	background-size: cover;
	background-position: center center;
	filter: blur(10px);
	background-blend-mode: soft-light;
}

.carousel-picture {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 147px;
    max-width: 211px;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.shop-name {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    /* background: rgba(0,0,0,0.3); */
    color: black;
    bottom: -19px;
}

.full-img-overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1000;
}

.full-img-overlay div {
	position: absolute;
	width: 70px;
	font-size: 50px;
	color: rgba(255, 255, 255, 0.6);
	background-color: transparent;
	cursor: pointer;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.full-img-left {
	left: 0px;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.full-img-right {
	right: 0px;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.full-img-overlay div:hover i {
	color: #ffffff;
}

.full-img {
	position: absolute !important;
	max-height: 100vh !important;
	max-width: 100vw !important;
	z-index: 99 !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.carousel-button {
	font-size: 32px;
	    color: gray;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.carousel-next {
	right: -10px;
}

.carousel-prev {
	left: -10px;
}

.carousel-thumbnails {
	position: relative;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.carousel-thumbnail {
	height: 50px;
	margin: 5px;
	cursor: pointer;
}

.selected {
	border: 2px solid;
	border-color: var(--main-bg-color, #2c3e50);
}


/************/


/* NEW ITEM */


/************/

.newitem {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.newitem .bigIcon {
	font-size: 231px;
	margin: auto;
}

.newitem .left {
	width: 450px;
	padding: 20px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	justify-content: top;
	color: white;
	background: var(--main-bg-color, #2c3e50);
}

@media screen and (max-width: 900px) {
	.newitem .left {
		display: none;
	}
	.newitem {
		grid-template-columns: 1fr;
	}
}

.new-form label {
	text-align: left;
	width: 100%;
	padding: 10px;
	color: dodgerblue;
}

.new-form {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.new-form select,
.new-form input[type="text"],
.new-form input[type="number"],
.new-form input[type="password"],
.new-form textarea {
	width: 100%;
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
	margin-bottom: 10px;
	padding: 5px;
	box-sizing: border-box;
}

.new-form .currencyinput {
	border: 1px inset #ccc;
}

.new-form .currencyinput input {
	border: 0;
}

.form-select-parent {
	background-color: #bdc3c7;
	height: 25px;
	font-weight: bold;
}

.new-form textarea {
	height: 100px;
}

.new-form input[type="submit"] {
	height: 40px;
	padding: 5px;
	border: 0px;
	background-color: #00b894;
	color: #ffffff;
	width: 100px;
}

.new-form button {
	height: 40px;
	padding: 5px;
	border: 0px;
	background-color: #00b894;
	color: #ffffff;
	width: 100px;
}

.wizardBar {
	padding-top: 15px;
	text-align: right;
	width: 100%;
}

.wizardBar .right {
	float: right;
}

.wizardBar .left {
	float: left;
}

.wizardBar button {
	height: 40px;
	padding: 5px;
	border: 0px;
	background-color: var(--main-bg-color);
	color: #ffffff;
	width: 100px;
	cursor: pointer;
}

.wizardBar button[disabled=disabled],
.wizardBar button:disabled {
	height: 40px;
	padding: 5px;
	border: 0px;
	background-color: grey;
	color: #ffffff;
	width: 100px;
	cursor: pointer;
}

.search-responsive {
	height: auto !important;
}

.search-responsive .search {
	display: flex;
	flex-direction: column;
}
#category {
    background-color: var(--main-bg-color);
    margin-bottom: 10px;
    margin-left: auto;
    /* padding: 0px 20px; */
    margin-right: auto;
    height: 50px;
    margin-top: 9px;
    display: flex;
    align-items: stretch;
    z-index: 500;
    position: relative;
    color: white;
    font-size: 14px;
    margin-left: -10px;
}
.menuItem {
	display: flex;
	align-items: center;
    justify-content: center;
    height: 38px;
    border-right:1px solid white;
}

.menuItem i {
	color: #ffffff;
}

#category > li {
	display: inline-block;
	margin: 0px;
	padding: 10px;
}

#category li {
	display: inline-block;
    width: 100%;
}

#category ul.mainCategory {
	position: relative;
    margin-bottom: 0px;
	display: flex;
	align-items: center;
	cursor: pointer;
	width: 100%;
	border-bottom: 3px solid var(--main-bg-color);
	color: white;
	justify-content: center;
        border-top: 0px;
    border-left: 0px;
    border-right: 0px;
	
}

#category ul.mainCategory:hover {
	border-bottom: 3px solid white;
}



#category .subCategory {
    min-width: 206px;
    box-shadow: 0px 8px 16px rgba(48, 36, 12, 1);
     display: none; 
    background: white;
    /* border: 1px solid black; */
    border-radius: 2px;
    position: absolute;
    left: 0px;
    top: 48px;
    /* background: blue; */
    width: 100%;
}
#category .subCategory li {
	
padding: 0px 0px 0px 0px;
}

#category .subCategory li:hover {
    width: 100%;
	background: #efefef;
}

#category .subCategory li a {
    height: 53px;
	display: flex;
	justify-content: left;
	align-items: center;
	color: var(--main-bg-color);
    padding-left: 10px;
}

#category .subCategory li a img {
	padding-right: 6px;
}

#category .mainCategory:hover ul {
	display: grid;
}

#category .menuItem a {
	color: white;
    text-align: center;
        display: flex;
        justify-content: center;
    align-items: center;
    padding: 6px;
}

.product-qty-input {
    border: 0px;
    background: white;
}
@media (max-width: 900px) {
	#category {
		display: none;
	}
}

.category-desc-shop .textinfo {
    padding: 5px 8px;
    color: #303030;
	font-size: 14px;
	
}

    .category-desc-shop .textinfo img { 
        max-width: 100%;
    }


.category-desc-shop i{
    display:flex;
    justify-content: center;
        
        color: dodgerblue;
}
.category-desc-shop .icon{
    
    font-size: 48px;
}
.category-desc-shop {
    display: block;
    margin: 10px 0px;
    /* border: 1px solid lightgrey; */
    padding:10px;
	background-color: #ffffff;
}

/*******/
/* NEW */
/*******/



/* HEADER */

.header-shopping-cart {
	position: relative;
	color: dodgerblue;
	margin-right: 10px;
	font-size: 35px;
	border: 1px solid dodgerblue;
	border-radius: 30px;
	display: flex;
	align-items: center;
	padding: 0px 15px;
	cursor:pointer;
}

	.header-shopping-cart-total {
		font-size: 13px;
		width: 50px;
		text-align: right;
	}

	.header-shopping-cart-num {
		position: absolute; 
		top: 5px;
		left: 35px;

		background-color: #ff5353;
		color: white;
		width: 15px;
		height: 15px;
		border-radius: 20px;
		font-size: 11px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
.side-shopping-cart-num {
	background: #ff5353;
	
	width: 25px;
	height: 25px;
	
    color: white;
    border-radius: 24px;
	
	font-size: 12px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
	.header-shopping-cart:hover .header-shopping-cart-content {
		display: flex;
	}

	.header-shopping-cart-content {
		display: none;
		position: absolute;
		width: 400px;
		
		flex-direction: column;
		background-color: white;
		font-size: 14px;	
		right: 0px;
		top: 36px;
		/* border: 1px solid black; */

		box-shadow: 0px 10px 16px -7px rgba(97, 97, 97, 0.5);

		z-index:900;
		padding: 10px;
	}

	.leaflet-top {
		z-index: 500 !important;
	}

		.header-shopping-wrapper {
			max-height: 200px;
			overflow-y: auto;
		}

		.shopping-cart-line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px;
		}

		.shopping-cart-button {
			border: 1px solid var(--main-bg-color);
			cursor: pointer;
			color: #fff;
			background-color: var(--main-bg-color);
			width: 100%;
height: 54px;
    font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.header-shopping-cart .shopping-cart-button {
			border: 1px solid dodgerblue;
			cursor: pointer;
			color: #fff;
			background-color: dodgerblue;
        }
/* MAIN */

.main-container-shop {
	position: relative;
	box-sizing: border-box;
	flex-grow: 1;
	flex-basis: 0;
	margin-right: 10px;
	/* background: white; */
}

.main-banner {
    width: 100%;
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

	.infoShop {
		border: 3px solid var(--main-bg-color);
		border-radius: 10px;
		padding: 25px;
		margin: 25px 10px;
		position: relative;
	}

	.main-container-shop-wrap {
		/* padding: 10px 20px; */
	}

		.product-list {
			display: flex;
			flex-direction: column;
			padding-top: 10px;
		}

/* PRODUCT */


.number-product {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--main-bg-color);
    height: 39px;
    box-sizing: border-box;
}

.unit-display {
    /* position: absolute; */
    /* margin-top: 9px; */
    /* width: 55px; */
    text-align: center;
    /* margin-left: -7px; */
    margin: 3px 3px 0px 3px;
    color: gray;
    font-size: 10px;
}

.product-list .product {
	display: flex;
	align-items: center;
	border: 1px solid lightgrey;
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 3px;
}

.product .product-name {
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    /* background: red; */
    align-items: center;
    font-size: 15px;
    font-weight: bolder;
    /* padding-bottom: 10px;
    padding-top: 10px; */
}



.product-detail {
    flex-grow: 1;
    /* min-width: 162px; */
}
	.product-disabled td {
		color: lightgrey;
	}

 a.myCart:hover{
     background-color: var(--main-bg-color) ;
     color:white;
 } 
    a.myCart {
    color: var(--main-bg-color);
    text-decoration: none;
    border: 3px var(--main-bg-color) solid;
    border-radius: 5px;
    padding: 10px 0px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
	width: 100%;
	box-sizing: border-box;
}

a.item-list-component.disabled {
    position: relative;
}

	.myCart-total {
		color: #000000;
		font-size: 12px;
		font-weight: normal;
	}

	.product .product-desc {
		font-size: 12px;
		flex-grow: 1;
	}
    .product .product-category {
		font-size: 12px;
		flex-grow: 1;
		padding-top: 5px;
		color: var(--secondary-bg-color); 
	}

	.product .product-price {
		margin-right: 10px;
        text-align: right;
	}

    @media screen and (max-width: 900px) {
        .product .product-name, .product .product-price {
            font-size: 10px; 
        }

        .product .product-category { 
            font-size: 8px;
        }

        .item-grid .item-image {
            width: 100%;
            /* border-radius: 5px 5px 0px 0px; */
        }
    }

		.product-actions {
			display: flex;
		}

			.product-action-button {
				background-color: var(--main-bg-color);
				width: 31px; height: 39px;
				display: flex; align-items: center; justify-content: center;
				color: #ffffff;
				cursor: pointer;
			}

            .header-shopping-cart-content .product-action-button {
				background-color: dodgerblue;
            }



		.product-qty-input {
			width: 25px;
			height: 39px;
			box-sizing: border-box;
			text-align: center;
			border-top: 1px solid var(--main-bg-color);
            border-bottom: 1px solid var(--main-bg-color);
		}
                                .header-shopping-cart-content .product-qty-input {
				border: 1px solid dodgerblue;
            }


.product-cart {
   width: 92px;
    border-radius: 5px;
    height: 39px;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    background-color: var(--main-bg-color);
    color: white;
    display: flex;
}

/*********/
/* ORDER */
/*********/

.main-container-shop-wrap > .order-section:first-child {
	margin-top: 20px !important;
}

.order-section {
	border: 3px solid var(--main-bg-color);
	border-radius: 10px;
	padding: 25px;
	margin-top: 10px;
	margin-bottom: 20px;
	position: relative;
}

@media (max-width: 500px) {   
button.menu-header.return {
    margin-bottom: 34px !important;
}
.shopping-cart-button {

    height: 54px;
    font-size: 18px;
}
    .order-section {
        padding: 15px 0px;
        border-radius:0px;
        margin:0px;
        border:none;
            padding-bottom: 28px;
        border-bottom: 2px solid var(--main-bg-color);
    }
    .order-section.valid {
    border-bottom: 0px;
}

    .order-form {

        margin-bottom: 10px;
    }
}


	.order-section-title {
		position: absolute;
		color: var(--main-bg-color);
		font-family: 'Fredoka One', sans-serif;
		font-size: 25px;
		background-color: white; 
		padding: 0px 10px;
		top: -20px;
	}

.table-order {
	width: 100%;
}

	.table-order td, .table-order th {
		padding: 3px;
	height: 40px;
    
	}

	.table-order tbody td {
		border-bottom: 1px solid lightgrey;
        align-items: center;
       
	}

	.table-order th {
		background-color: lightgrey;
		text-align: left;
	}

	.table-order-qty {
		display : flex;
		justify-content: center;
	}

.order-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
    
}

	.order-form label {
		margin-bottom: 5px;
		margin-top: 5px;
		font-size: 17px;
	}

	.order-form input[type="text"], .order-form input[type="datetime"], .order-form input[type="email"], .order-form input[type="tel"] {
		height: 30px;
		border: 1px solid rgba(0,0,0,0.1);
		margin-bottom: 10px;
		padding: 5px;
	}

    .order-form textarea {
        border: 1px solid rgba(0,0,0,0.1);
        padding: 5px;
    }

	.order-form-label {
		width: 200px;
		font-weight: bold;
	}

	.order-form input[type="radio"] {
		margin-bottom: 0px;
		margin-right: 10px;
	}

	.order-radio {
		display : flex;
		align-items: flex-start;
	}

		.order-radio label {
			font-size: 14px;
		}

/**********/
/* NAVBAR */
/**********/

.navbar-shop-infos {

    margin-top: 16px;
    border: 2px solid var(--secondary-bg-color);
    /* border-radius: 12px; */
    margin: 11px;
}

a.product-action-button.left {
    border-radius: 5px 0px 0px 5px;
}
a.product-action-button.right {
    border-radius: 0px 5px 5px 0px;
}

    .responsive-navbar .header-user-menu-item-shop {
        justify-content: space-between;
    }

/***********/
/* SIDEBAR */
/***********/

.sidebar-header {
    background:var(--secondary-bg-color);
    color: white;
    padding: 7px;
    font-size: 18px;
}

.content-sidebar {
    padding: 10px;
}

    
    .content-sidebar li {
        margin-left: 15px;
    }

	.nav-sell-map {
		background-color: lightgrey;
		height: 200px;
		margin-top: 10px;
		width: 100%;
	}

	.nav-dashboard-title {
		background-color: grey; 
		height: 40px; 
		width: 100%; 
		color: white;
		display: flex;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
	}

	.nav-dashboard-map {
		background-color: lightgrey;
		height: 300px;
	
		width: 100%;
	}

.invisible { display: none; }

.order-status {
    background: #73be3b;
    justify-content: center;
    color: white;
    width: 223px;
    text-align: center;
    font-size: 22px;
    padding: 8px;
    border-radius: 11px;
}

button.manage-button.valid:hover {
   background:var(--main-bg-color);
   color:white;
}
button.manage-button.cancel:hover {
   background:rgb(240, 86, 86);
   color:white
}

button.manage-button.inProgress:hover {
   background:rgb(219, 126, 20);
   color:white
}

button.manage-button.delivered:hover {
   background:#3ea718;
   color:white
}
.menuItem.home {
    width: 100%;
        padding: 0px 7px;
    display: flex;
        justify-content: center;
}
#myTable .my-item .detail.action {
    text-align: right;
    min-width: 0px ! important;
}
button.manage-button {
   
    padding: 8px;
    margin-right: 19px;
    margin-top: 10px;
    cursor:pointer;
}
button.manage-button.valid {
 border: 2px solid var(--main-bg-color);
}
button.manage-button.cancel {
 border: 2px solid red;
}

button.manage-button.delivered {
 border: 2px solid #3ea718;
}

button.manage-button.inProgress {
 border: 2px solid orange;
}

.content-sidebar table {
    font-size: 15px;
}

@media screen and (max-width: 900px) {
	.table-order tbody td {
        font-size:11px;
	}
}

button.ValidButton {
    width: 68px;
    height: 31px;
    border-radius: 5px;
    border: 0px;
    /* border: 1px solid gray; */
    background: whit;
}


.infoPub a{
    color:white;
    text-decoration: none;
}

.main-container-banner {
	background-size: cover; background-position: center;
	width: 100%; height: 200px;

	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.main-container-banner-line {
    background-color: rgba(0,0,0,0.8);
    text-align: center;
    width: 60%;

}

.main-container-banner h2, .main-container-banner p {
	/* background-color: rgba(0,0,0,0.8); */
	padding: 10px;
}
.infoSite {
    padding: 11px;
    background: #e5e5ff;
}

/* PAGE INFOS */

.info-content {
    padding: 22px;
}
.info-content p.subtitle {
    padding-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

.info-content h2{
        padding-top: 10px;
        font-family: 'GrandHotel', Cursive;
		font-size:37px;
		font-weight: normal;
}


.info-content h3{
        margin-top: 20px;
		padding-bottom: 5px;
		margin-bottom: 10px;
}

.info-content img.img-info {
    width: 170px;
}
.info-content .img-list {
    display: flex;
	flex-direction: row;
	margin-top: 10px;
    justify-content: space-around;
    flex-grow: 1;
    flex-wrap: wrap;
}

	.info-content .img-list img {
		margin-top: 10px;
	}

button.info {
    width: 195px;
    cursor: pointer;
    background: #ecf0ff;
    border: none;
    border: 2px solid dodgerblue;
    font-weight: bold;
	font-size: 18px;
	padding: 10px;
}

button.info:hover{
    background:dodgerblue;
    border: 2px solid white;
    color:white;
}

/* EDITPRODUIT */

img.pictureEdit {
    width: 105px;
    border: 1px solid gray;
    margin: 5px;
    border-radius: 5px;
}

.imageList {
    padding: 15px;
    display: flex;
}
.imageList i {
    color: #e11b1b;
    position: absolute;
font-size: 35px;
    background: white;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
}


.imageList i:hover {
    background: #cccccc;
    cursor: pointer;
}

a.selected.icon.las.selected {
    background: #c2effa;
    cursor:auto;
}

.product .product-image {
    width: 55px;
    height: 55px;
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    border-radius:5px;
}

.product-grid .product-image {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5px;
    height: 200px;
    cursor:pointer;
}

.product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
@media (max-width: 1200px) {

    .product-grid {
    grid-template-columns: 1fr 1fr 1fr;

}
}
@media (max-width: 600px) {

    .product-grid {
    grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 420px) {

    .product-grid {
    grid-template-columns: 1fr;
}
}
.product-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    align-items: center;
    margin-top: 11px;
}

.product-grid .product-cart-actions {
    display: flex;
    justify-content: flex-end;
}

 .unit.kg {
    position: absolute;
    margin-left: 62px;
    margin-top: 9px;
    color: gray;
}

.product-qty-input.kg {

    height: 39px;
    box-sizing: border-box;
    text-align: right;
    border: 0px;
    border-top: 1px solid var(--main-bg-color);
    border-bottom: 1px solid var(--main-bg-color);
}

.table-order input.qty-product {
    width: 25px;
}

.category-desc {
    font-weight: normal;
    font-size: 12px;
    text-align: left;
    padding-left: 3px;
}

.printOnly {
    display: none;
}

.swal-wide .swal2-popup.swal2-modal.swal2-show {
    width: 100%;
    height: 600px;
}


/* SWITCH TOGGLE /*

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.switchDisplay {
    display: flex;
    align-items: center;
}
.checkTitle {
    padding-right: 9px;
}

/********/
/* GRID */
/********/

.product-grid-item {
	border: 1px solid lightgrey;
	display: flex;
	flex-direction: column;
}

	.product-grid-top {
        position: relative;
		flex-grow: 1;
		background-color: #ffffff;
	}

		.product-grid-item .product-detail {
			padding: 10px;
			height: 100px;
			overflow-y: hidden;
			overflow-x: hidden;
			position: relative;
			background-color: #ffffff;
		}

		.product-grid-name {
			font-weight: bold;
			margin-bottom: 10px;
                font-size: 16px;
		}

		.product-grid-desc {
			font-size: 12px;
			background-color: #ffffff;
		}

	.product-grid-bottom {
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
        background-color: #eeeded;
        height:31px;
	}
    p.infoSetting {
    font-style: italic;
    color: gray;
}

p.infoSetting i{
    padding-right: 6px;
}

.sort-global {
    display: flex;
    align-items: center;
    margin-bottom: 17px;
}

.sort-global .section{
        margin-left: 10px;
}


select#sort-prod {
    height: 36px;
    padding: 5px;
}

select#order-prod {
    height: 36px;
    padding: 5px;
}

.responsive-tablet{
    display:none;
}
.formSearch {
    display: flex;
    flex-direction: column;
    padding: 0px 16px;
    flex-grow: 1;
    background:white;
}

@media (max-width: 900px) {

#category .menuItem a {
    font-size: 11px;
}

.main-container-banner {
    height: auto;
}

.main-container-banner-line {
    margin: 15px 0px;
}

}

@media screen and (max-width: 900px) {

.responsive-tablet{
    display:flex;
}
}

select#searchMobile {
    padding-left: 10px;
    height: 40px;
    margin-bottom: 7px;
    border: 1px solid black;
    color:white;
    background: var(--main-bg-color);
        font-weight: bold;
        font-size: 19px;
        border-radius: 5px;
        white-space: pre;
    text-overflow: ellipsis;
width: 100%;
}

input.vue-treeselect__input {
	border: 0px !important;
	box-shadow: none !important;
	margin: 0px !important;
}

.vue-treeselect__multi-value-item {
	background-color: var(--main-bg-color) !important;
	color: white !important;
}

.vue-treeselect__value-remove {
	color: white !important;
}

.vue-treeselect__label {
	color: #333333 !important;
}


/*** CATEG TAB /*


#settings .tab {
	overflow: hidden;
	background: white;
	    border-bottom: 1px solid lightgrey;
}


/* Style the buttons that are used to open the tab content */

#settings .tab {
    display: flex;
    
    background: #b1b1b1;
    height: 52px;
}

#settings nav {
    width: 100%;
    text-align: right;
    margin-top: 13px;
    background: dodgerblue;
    color: white !important;
}

#settings .tab button {
    float: left;
    border: none;
    height: 46px;
    margin-top: 6px;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    border-bottom: 1px solid #dbdbdb;
    color: #4a4a4a;
    background: white;
    margin-left: 9px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
/* Change background color of buttons on hover */

#settings .tab button:hover {
	border-bottom-color: dodgerblue;
    background-color: dodgerblue;
	color: white;
}


/* Create an active/current tablink class */

#settings .tab button.active {
	border-bottom-color: dodgerblue;
    background-color: dodgerblue;
	color: white;
}

#settings section {
    border: 1px solid #a7a7a7;
}


/* Style the tab content */

#settings .tabcontent {
	display: none;
	padding: 6px 12px;
	border-top: none;
}




.popup-trigger {
  display: inline-block;
}

.popup-modal {
    background-color: #fff;
    position: fixed;
    left: 50%;
    height: 73%;
    top: 50%;
    width: 81%;
    transform: translate(-50%, -50%);
    padding: 45px;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease-in-out;
    z-index: 1011;
        overflow-x: scroll;
}


.popup-modal__close {
    position: absolute;
    font-size: 1.2rem;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

  .popup-modal.is--visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .body-blackout {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
        z-index: 1001;
}

   .body-blackout.is-blacked-out {
    display: flex;
  
}

.info-main {
    display: flex;
    flex-direction: row;
    margin-top: 25px;
    justify-content: space-between;
}



.info-pictures {
    display: flex;
    flex-direction: column;
    width: 25%;
}
.info-desc {
    /* display: flex; */
    width: 70%;
}


@media (max-width: 500px) {   
        .info-main {
            flex-direction: column;

        }
        .info-pictures {
            display: flex;
            width: 90%;
            margin-top:20px;
        }
        .info-desc {
            /* display: flex; */
            width: 90%;
        }

}

.product-grid-desc button  {
    background: none;
    border: 0px;
    cursor: pointer;
    text-decoration: underline;
}

.info-button{
    display:flex;
    flex-direction:row;
}

@media (max-width: 1000px) {   
.info-button{
    flex-direction:column;
    
}
.info-button button{
margin-bottom: 10px;
}
}


@media (max-width: 600px) {   
.info-button{
    flex-direction:column;
    
}
.info-button button{
margin-bottom: 10px;
width: 100%;
}
}

/* ADMIN */
.admin-card {
	color: black;
	width: 500px;
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.button-line {
	display: flex;
	flex-direction: row;
	justify-content: center;
    align-items: center;
}

	.button-line button, .button-line input[type="submit"] {
		background-color: dodgerblue;
		color: white;
		padding: 15px;
		border: 0px;
        cursor: pointer;
        box-sizing: border-box;
	}

	.button-line button.cancel {
		background-color: gray;
		color: white;
		padding: 15px;
		border: 0px;
	}

.flatpickr-time input:focus {
	background-color: lightblue;
}

/* PAYMENT*/
.order-form-payment label {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    height: 54px;
    /* padding: 0px; */
}
.order-form-payment .order-radio {
    margin: 6px 0px;
        padding: 0px 12px;
    border: 1px solid #c4c4c4;
    display: flex;
    align-items: center;
}
.order-form-payment .namePayment{
    padding-left:10px;
    margin-left: 35px;
    width: 263px;
}



/* Customize the label (the container) */
.order-form-payment label {
    
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid var(--main-bg-color);
    border-radius: 5px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 19px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.order-form-payment label:hover {
    
background: #d6d6d6;
}


.order-form-payment input:checked {
    
background: #f2f2f2;
}


/* Hide the browser's default radio button */
.order-form-payment .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;

}

/* Create a custom radio button */
.order-form-payment .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
      margin-left: 9px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  margin-top: 15px;
}

.order-form-payment .logo {
    background-image: url(/images/payment.png);
    height: 53px;
    width: 100%;
        background-position: right;
    background-size: contain;
    background-repeat: no-repeat;

}

/* On mouse-over, add a grey background color */
.order-form-payment .container:hover input ~ .checkmark {
  background-color: #ccc;
      margin-top: 15px;
          margin-left: 9px;
}

/* When the radio button is checked, add a blue background */
.order-form-payment .container input:checked ~ .checkmark {
  background-color: #2196F3;
  margin-top: 15px;
      margin-left: 9px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.order-form-payment .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.order-form-payment .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.order-form-payment .container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.banniere_img {
    height: 200px;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    align-items: center;
}
.buttonShare {
    background-color: #1877f2;
    border-radius: 5px;
    color: white;
    padding: 4px 11px;
    border: none;
    font-weight: bold;
}
.banniere_img img {
    height: 170px;
    
}

.communication .box {

       padding: 10px;
}
.communication div {
       padding: 5px;
}


.communication section{
    padding: 10px;
}

.communication .title {
    background:var(--main-bg-color);
    color:white;
        border-radius: 5px 5px 0px 0px;
}

.communication .label {
    padding: 10px;
    background: #eaeaea;
}

.communication .imageBox .image{
    background-image: url(https://shop.dev.keepthemove.com/images/logo-fonce.png);
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
        border: 1px solid gray;
    background-size: cover;
}

.communication .flyers {
    display: flex;
        flex-wrap: wrap;
}
.communication .imageBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.communication .codeBox {
    background: lightgrey;
    margin-bottom: 24px;
        padding: 21px;
    border-radius:5px;
}

.communication textarea {
    width: 100%;
}

.communication h4 {
    padding-bottom: 10px;
}