@font-face {
	font-family: "koliko";
	src: url("/fonts/koliko-Light.woff") format("woff"), url("/fonts/koliko-Light.ttf") format("ttf");
}

@font-face {
	font-family: "GrandHotel";
	src: url("/fonts/GrandHotel-Regular.otf") format("truetype");
}

* {
	/*font-family: 'Roboto', sans-serif;*/
	/* font-family: 'Didact Gothic', sans-serif; */
	font-family: 'Karla', sans-serif;
	margin: 0;
	padding: 0;
}

button {
	cursor: pointer;
}

h2 {
    margin-bottom: 10px;
    font-weight: 900;
    border-left: 10px solid #00d1b2;
    padding-left: 10px;
	letter-spacing: -2px;
	font-variant: small-caps;
}


.infoPub {
    /* padding-top: 35px; */
    
    padding: 11px;
    background: var(--main-bg-color);
    color: white;
    height: 179px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/** LOADER **/

.loader-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#f8f8f8;
    z-index: 99;
}

::-webkit-scrollbar-track {
	background-color: #F5F5F5;
}

::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	background-color: var(--main-bg-color, #2c3e50);
}

.button-icon{
	display:flex;
	align-items: center;
	justify-content: center;
}

.button-icon i{
	padding-right:10px;
}

.leaflet-bottom {
    z-index: -1 !important;
}

.fullHeader {
	display: flex;
	justify-content: space-between;
}

.address-item {
	cursor: pointer;
}

.address-item:hover {
	background: lightgrey;
}

.headerLogo {
	height: 52px;
}

a {
	text-decoration: none;
}

a.link-button {
	background-color: #ff9809;
	color: #ffffff;
	font-weight: bold;
	padding: 7px 14px 7px 15px;
        border-radius: 5px;
}

.miniAdd {
	display: none;
	flex-shrink: 0;
}

.miniAddLink {
	position: absolute;
	font-size: 30px;
	margin-left: 3px;
	margin-top: -1px;
}

@media screen and (max-width: 1255px) {
	.header-left a.link-button {
		display: none;
	}
	.miniAdd {
		background: orange;
		width: 35px;
		height: 35px;
		border-radius: 19px;
		display: block;
	}
}

select.sortItems {
	height: 28px;
	border-radius: 5px;
	font-size: 15px;
}

.card {
	-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: 10px;
	/*border-radius: 5px;*/
	background: white;
	margin-bottom: 10px;
}

.card-title {
	background-color: var(--main-bg-color, #2c3e50);
	color: #ffffff;
	flex-basis: 0;
}

.itemPage .iconleft {
	color: white;
	font-size: 29px;
}


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


/* LAYOUT */


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

body {
	display: flex;
	min-height: 100vh;
	width: 100%;
	flex-grow: 1;
	flex-direction: column;
	justify-content: space-between;
	background: #f8f8f8;
}

.flex {
	display: flex;
}

header {
	position: fixed;
	top: 0px;
	width: 100%;

	height: 70px;
	background-color: white;
	
	color: black;
	z-index: 1000;
    box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);

    display: flex;
    justify-content: center;

	transition: height 0.2s ease-in-out;
}

	.header {
		width: 100%;
		height: 100%;
		display: flex;

		
		justify-content: space-between;
		align-items: center;

		
		box-sizing: border-box;
	}

    .header.responsive-full {
        width : 100%;
    }

.header-left {
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	align-items: center;
}

.header-title {
	font-family: "koliko", sans-serif;
}

.header-left a,
.header-title a {
	color: #ffffff;
}

.header-title {
	display: flex;
	align-items: center;
	margin-right: 20px;
	padding-left: 10px;
}

.header-title a {
	display: flex;
	align-items: center;
	margin: 0px;
	padding: 0px;
}

.header-subtitle {
	font-size: 14px;
	font-weight: normal;
	margin-left: 15px;
	letter-spacing: 0px;
}

.header-user {
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
}

.header-user:hover {
	background-color: rgba(0, 0, 0, 0.2);
}


/***********************************/
/*  AVATAR /*
/***********************************/

.header-user-img {
	height: 30px;
	min-height: 30px;
	width: 30px;
	min-width: 30px;
	border-radius: 30px;
	border: 3px solid var(--green);
	margin-right: 10px;
}

.itemPage .header-user-img {
	border-color: var(--green);
}

.myaccount .header-user-img .avatar {
	font-size: 55px;
	font-weight: bold;
	margin-top: 24px;
}

.myaccount .header-user-img {
	width: 125px;
	height: 125px;
	border-radius: 75px;
	border-color: dodgerblue;
	border-width: 5px;
}

.avatar {
	margin-top: 7px;
	font-size: 12px;
	width: 100%;
	text-align: center;
}


/********* MENU */

.header-user-menu {
	position: absolute;
	right: 0px;
	top: 70px;
	width: 250px;
	height: calc(100vh - 70px);
	overflow-y: auto;
	background-color: #ffffff;
	display: none;
	flex-direction: column;
	align-items: stretch;
	box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);
	z-index: 999;
}

.header-user:hover .header-user-menu {
	display: flex;
}

.header-user-menu-item {
    display: flex;
	line-height: 30px;
	font-size: 15px;
	color: #ababab;
	padding: 10px;
}

    

.header-user-menu-category {
	line-height: 20px;
	background-color: gray;
	color: #ffffff;
	text-transform: uppercase;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: bold;
}

.header-user-menu-item i {
	margin-right: 10px;
	width: 20px;
}

a .header-user-menu-item {
	color: #707070;
        align-items: center;
}

.header-user-menu-item:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.header-menu-close {
	font-size: 25px;
}

.header-icon {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 30px;
    align-items: center;
    display: flex;
}

.addItem span {
	font-size: 10px;
	margin-bottom: 3px;
}

.search-responsive {
	display: none;
	background: white;
	/* border: 1px solid dodgerblue; */
	margin-bottom: 13px;
	left: 0px;
	/* top: 50px; */
	width: 100%;
	max-width: 100%;
	z-index: 99;
	max-height: 100px;
}

@media screen and (max-width: 900px) {
	.search-responsive {
		display: block;
	}
}

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

.search-responsive-line {
	flex-grow: 1;
	width: auto;
	display: flex;
	padding: 5px 0px;
	color: rgba(0, 0, 0, 0.3);
	;
}

.search-responsive-line input {
	flex-grow: 1;
	margin-left: 5px;
	border: 0px;
	height: 35px;
}

.search-responsive-input {
	background-color: #ffffff;
	flex-grow: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 10px;
	color: lightgrey;
}

.search-responsive-input i {
	font-size: 25px;
}

.search-responsive-input::placeholder {
	color: lightgrey;
}

footer {
	display: flex;
		
	justify-content: center;
	align-items: center;
	
	background-color: #2c3e50;
	padding: 20px;
	
	width: 100%;
	box-sizing: border-box;
}

    .footer {
        width: 1200px;

        display: flex;
        flex-direction: row;
        
        justify-content: space-between;
        align-items: center;
    }

    footer .links {
		display: flex;
		flex-direction: row;

		flex-wrap: wrap-reverse;

		max-width: 100%;
	}

		footer .links>div { width: 300px; display: flex; flex-direction: column;}
		footer .links>div>a { color: #ffffff; font-size: 20px; }

		footer .copy { margin-top: 20px; color: #ffffff;}

	footer .social {
		font-size: 40px;
	}

        footer .social a {
            color: #ffffff;
        }

	.footer-wrapper {
		width: 1200px;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 20px;
		padding-bottom: 20px;
	}

		.footer-left {
			display: flex;
			flex-direction: column;
		}

		.footer-title {
			font-size: 25px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.footer-left a {
			color: white;
			margin-bottom: 5px;
		}

main.center {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
}

main.main {
	position: relative;
	width: 100%;
	/*height: 100%;*/
	display: flex;
	flex-grow: 1;
    flex-direction: column;
	justify-content: stretch;
	align-items: center;
}


/* SIGNIN */


/*********/

.left-info .bigIcon {
	font-size: 231px;
}

.mainSignin {
	height: 523px;
	margin: auto;
	width: 674px;
	display: flex;
	flex-direction: row;
}

.signin-form {
	background: white;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: left;
	flex-direction: column;
	padding: 20px;
}

.mainSignin .left-info {
	/* float: left; */
	/* background: white; */
	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) {
	.mainSignin .left-info {
		display: none;
	}
	.mainSignin {
		width: 100%;
	}
}

.signin-form form {
	width: 100%;
	position: relative;
}

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

.form-spacer {
	display: flex;
	align-items: center;
	width: 100%;
}

.form-spacer-line {
	height: 1px;
	flex-grow: 1;
	border: 0px;
	border-top: 1px dotted gray;
}

.form-spacer-ou {
	margin: 0px 15px;
}

.signin-main {
	width: 100%;
	min-height: 541px;
	height: calc(100vh - 100px) !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding-top: 70px;
	flex-grow: 1;
	background: url(https://images.pexels.com/photos/3182784/pexels-photo-3182784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	height: -webkit-fill-available;
}

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

.navbar {
	background-color: #ffffff;
	width: 300px !important;
	box-sizing: border-box;
	border-left: 1px dotted lightgrey;
}

.category-collapse-icon {
	margin-right: 10px;
}


/*********/


/* GLOBAL */


/*********/

[contenteditable="true"].single-line {
	white-space: nowrap;
	width: 200px;
	overflow: hidden;
}

[contenteditable="true"].single-line br {
	display: none;
}

[contenteditable="true"].single-line * {
	display: inline;
	white-space: nowrap;
}


/*********/


/* LOGIN */


/*********/

.login-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	background-color: #ffffff;
}

.login-form-title {
	font-family: 'Didact Gothic', sans-serif;
	font-weight: bold;
	font-size: 40px;
	text-align: center;
	margin-bottom: 20px;
}

.login-form input,
.login-form select,
.swal2-input {
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0px;
	margin-bottom: 2px;
	padding: 5px;
	box-sizing: border-box;
}

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

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

.login-form-error {
	color: red;
	text-align: center;
	margin-bottom: 10px;
}

.login-links {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--main-bg-color, #2c3e50);
}


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


/* LOADER */


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

.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}

.lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}

.lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}

.lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}

.lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
}

.lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}

.lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}

.lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}

.lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}

@keyframes lds-roller {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


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


/* VUE TRANSITIONS */


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

.fade-enter-active,
.fade-leave-active {
	transition: opacity .2s, transform .2s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

{
	opacity: 0;
}

.slidedown-enter-active,
.slidedown-leave-active {
	transition: opacity .2s ease;
}

.slidedown-enter,
.slidedown-leave-to
/* .fade-leave-active below version 2.1.8 */

{
	opacity: 0;
}


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


/* SWAL 2 */


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

.swal-title {
	color: red;
}

[class^=swal2] {
	border-radius: 0px;
}


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


/* MYACOUNT /*
/***********/


/* Style the tab */

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


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

#myaccount .tab button {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	border-bottom: 1px solid #dbdbdb;
	color: #4a4a4a;
	background: white;
}


/* Change background color of buttons on hover */

#myaccount .tab button:hover {
	border-bottom-color: dodgerblue;
	color: #00d1b2;
}


/* Create an active/current tablink class */

#myaccount .tab button.active {
	border-bottom-color: dodgerblue;
	color: dodgerblue;
}


/* Style the tab content */

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


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


/* RESPONSONSIVE LAYOUT */


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

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

@media screen and (max-width: 900px) {
	.navbar {
		display: none;
		/* on cache la navbar sur les petits écrans */
	}
	.responsive-full {
		display: none;
	}
	.responsive-small {
		
	}
}

@media screen and (max-width: 500px) {
	.navbar {
		display: none;
		/* on cache la navbar sur les petits écrans */
	}
	.responsive-mobile {
		display: none;
	}
}

.responsive-navbar {
	position: fixed;
	width: 100%;
	height: 100vh;
    overflow-y: auto;
	background-color: #ffffff;
	top: 0px;
	left: 0px;
	z-index: 99;
	box-shadow: 0px 0px 16px -7px rgba(97, 97, 97, 1);
    cursor: pointer;
}

.header-user-menu-title {
	display: flex;
	justify-content: space-between;
	color: white;
	padding: 15px;
	box-sizing: border-box;
	line-height: 30px;
    font-weight: bold;
    background:var(--main-bg-color);
}

.responsive-navbar .header-user-menu-item {
	padding: 15px;
        color: black;
            border-bottom: 1px solid #d2d2d2; 
            
}

.slide-enter-active,
.slide-leave-active {
	transition: left .3s ease-in-out;
}

.slide-enter,
.slide-leave-to
/* .fade-leave-active below version 2.1.8 */

{
	left: -100vw;
}

.slideLeft-enter-active,
.slideLeft-leave-active {
	transition: right .3s ease-in-out;
}

.slideLeft-enter,
.slideLeft-leave-to
/* .fade-leave-active below version 2.1.8 */

{
	right: -100vw;
}

.google-signin {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: rgb(66, 134, 245);
	border: 1px solid rgb(66, 134, 245);
	width: 100%;
	height: 50px;
}

.google-signin-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 50px;
	background-color: #ffffff;
}

.google-signin-text {
	flex-grow: 1;
	color: #ffffff;
	text-align: center;
}

[v-cloak] {
	display: none
}

/* widget */

.carpool-map-icon {
	background-color: #ffffff;
	border-radius: 30px;
	border: 3px solid var(--main-bg-color);
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 16px 0px rgba(97,97,97,1);
	
}

.carpool-map-icon.full {
	background-color: lightgrey;
	border-radius: 30px;
	border: 3px solid gray;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 16px 0px rgba(97,97,97,1);
	
}

/* Manage Items */

/** CARDS LIST /**/

manage-items div#activeItems,#manage-items div#inactiveItems {
    background: white;
}


.list-card .list-img{
  background-position: center center;
    background-size: cover !important;
    background-blend-mode: multiply;
    position: relative;

  width: 200px;
  min-width: 50px;
  min-height: 50px;
  height: 150px;
}



.list-card{
      margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    border-radius: 5px;
    display: flex;
    background: white;
}

.list-card .date {
    color: gray;
    font-size: 12px;
}


.list-card p.desc {
    height: 32px;
}

.list-grid {

}


.list-content {
    padding: 9px;
}

.list-card button i{

padding-right:10px;
  
}
.list-card button{
  margin-top: 5px;
    padding-left: 10px;
    display: flex;
    padding-right: 10px;
    background: white;
    background: transparent;
    color: dodgerblue;
    /* border-color: dodgerblue; */
    /* border-style: solid; */
    border: 1px solid dodgerblue;
    cursor: pointer;
    margin-right: 4px;
        min-height: 40px;
    align-items: center;
}

.list-card button.red{
  color:red;
  border-color: red;
}

.list-card button:hover{
  background: #d7f0ff;
}

.list-card .price {
    font-size: 19px;
    font-weight: bold;
    color: dodgerblue;
    padding-bottom: 5px;
    padding-top: 5px;
        height: 17px;
}

.list-card nav.buttons {
      flex-wrap: wrap;
    margin-top: 14px;
    display: flex;
  
}

.list-card-wrapper{
      display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    padding-bottom: 10px;
}

@media ( max-width: 800px ) {
  .list-card-wrapper{
      display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
}
}

/********************/
/* MENTIONS LEGALES */
/********************/

.mainLegal {
	background-color: #ffffff;
}

#mailtorapidetoPopupModal {
    display: none;
}