.brief {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	  font-family: poppins;
	}
  
	.border-radius-50 {
	  border-radius: 50% !important;
	}
  
	.carousel-item {
	  div {
		div {
		  text-align: center;
		  img {
			max-height: 330px;
		  }
		}
	  }
	}
	.video-container {
		box-sizing: border-box;
		outline: none !important;
		display: inline-block;

		.video {
			box-sizing: border-box;
			outline: none !important;
			width: 300px;
			height: 150px;
			margin-right: 15px;
			margin-bottom: 35px;
			float: left;
			border: none;
			background-size: cover;
			background-position: center center;
			position: relative;
			border-radius: 4px 4px 0 0;
		}
	}
	.add-video {
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		--blue: #007bff;
		--indigo: #6610f2;
		--purple: #6f42c1;
		--pink: #e83e8c;
		--red: #dc3545;
		--orange: #fd7e14;
		--yellow: #ffc107;
		--green: #28a745;
		--teal: #20c997;
		--cyan: #17a2b8;
		--white: #fff;
		--gray: #6c757d;
		--gray-dark: #343a40;
		--primary: #007bff;
		--secondary: #6c757d;
		--success: #28a745;
		--info: #17a2b8;
		--warning: #ffc107;
		--danger: #dc3545;
		--light: #f8f9fa;
		--dark: #343a40;
		--breakpoint-xs: 0;
		--breakpoint-sm: 576px;
		--breakpoint-md: 768px;
		--breakpoint-lg: 992px;
		--breakpoint-xl: 1200px;
		--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
		--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
		--color-font: #5e6473;
		--color-primary: #f6ded3;
		--color-secondary: #0e6b8a;
		--color-marron: #d8ad7f;
		--color-ligth: #bdbebd;
		--color-link: #000;
		--color-link-hover: #5e6473;
		--color-gradient-start: #4fda91;
		--color-gradient-stop: #34dbc5;
		--color-img-holder: #efefef;
		--color-bricorama-yellow: #ffd300;
		font-size: 1em;
		font-weight: 400;
		color: var(--color-font);
		-webkit-font-smoothing: antialiased;
		font-family: Poppins;
		line-height: 1.5;
		box-sizing: border-box;
		outline: none !important;
		border: 1px solid #ccc;
		width: 130px;
		height: 150px;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 35px;
		float: left;
		cursor: pointer;

		i {
		  padding-top: 30px;
		  padding-bottom: 20px;
		  display: block;
		  font-size: 30px;
		}
		label {
		  font-size: 12px;
		  width: 100px;
		  display: block;
		  margin: auto;
		  line-height: 20px;
		}
		cursor: pointer;
		&:hover {
		  background: #f7f7f7;
		}
	  }
	.photos {
	  display: inline-block;
	  & > div {
		border: 1px solid #ccc;
		width: 130px;
		height: 150px;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 35px;
		float: left;
	  }
	  .photo {
		border: none;
		background-size: cover;
		background-position: center center;
		position: relative;
		border-radius: 4px 4px 0 0;
		input {
		  display: none;
		}
		textarea {
		  position: absolute;
		  top: 106%;
		  left: 0;
		  min-width: 250px;
		  font-size: 12px;
		  border: 1px solid #e8e8e8;
		  border-radius: 0 4px 4px 4px;
		  padding: 5px;
		  display: none;
		  background: white;
		  z-index: 1;
		}
		.delete {
		  background: red;
		  width: 25px;
		  height: 25px;
		  text-align: center;
		  line-height: 25px;
		  position: absolute;
		  right: 5px;
		  top: 5px;
		  color: white;
		  border-radius: 50%;
		  font-size: 12px;
		  cursor: pointer;
		  &:hover {
			color: red;
			background: white;
		  }
		}
  
		.commentaire {
		  text-align: center;
		  position: absolute;
		  left: 0;
		  right: 0;
		  text-align: center;
		  line-height: 20px;
		  top: 150px;
		  font-size: 10px;
		  cursor: pointer;
		  border: 1px solid #e8e8e8;
		  border-radius: 0 0 4px 4px;
		  &:hover {
			color: #5e6473;
			background: white;
		  }
		}
	  }
	  .add-photo {
		i {
		  padding-top: 30px;
		  padding-bottom: 20px;
		  display: block;
		  font-size: 30px;
		}
		label {
		  font-size: 12px;
		  width: 100px;
		  display: block;
		  margin: auto;
		  line-height: 20px;
		}
		cursor: pointer;
		&:hover {
		  background: #f7f7f7;
		}
	  }
	}
  
	.navbar {
	  border-top: 10px solid #f7f7f7;
	  margin: 0px 20px 10px 20px;
	  border-radius: 10px;
	  overflow: hidden;
	}
  
	.panel {
	  padding: 0 30px;
	}
  
	input.form-control,
	textarea {
	  border: none;
	  padding-left: 0 10px;
	  margin: 0;
	  border-bottom: 1px solid #ccc;
	  margin-top: -10px;
	  background: transparent;
	  max-width: 80%;
	  min-height: 0px;
	}
  
	.liquid-progressbar-inner {
	  background: #000;
	}
	#content {
	  background: #f7f7f7;
	}
	.col1 {
	}
	.col2 {
	  padding-right: 20px;
	  padding-left: 30px;
	  .box {
		background: white;
		border-radius: 10px;
		padding: 20px 0;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	  }
	}
	.title {
	  padding-left: 25px;
	  font-size: 20px;
	  font-weight: bold;
	}
  
	.menu {
	  background: white;
	  border-radius: 10px;
	  margin: 0 0 0 20px;
	  padding: 20px 0;
	  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  
	  ul {
		padding: 0;
		li {
		  list-style: none;
		  // border: 1px solid var(--color-primary);
		  padding: 0px 30px 0px 25px;
		  margin-bottom: 20px;
		  line-height: 50px;
		  border-radius: 2px;
		  cursor: pointer;
		  transform: scale(1);
		  box-shadow: none;
		  transition: all 0.25s ease;
		  img {
			width: 30px;
			margin-right: 10px;
		  }
		  &:hover {
			transform: scale(1.05);
		  }
		  &.active {
			background: var(--color-primary);
			transform: scale(1.1);
			box-shadow: 0px 5px 10px rgba(126, 142, 177, 0.4);
			font-weight: bold;
		  }
		}
	  }
	}
	.form-check {
	  padding-left: 0;
	  .titre {
		font-size: 16px;
		padding-bottom: 20px;
		font-weight: 700;
	  }
	  label {
		span {
		  line-height: 30px;
		  border: 1px solid #ccc;
		  display: inline-block;
		  padding: 5px 15px;
		  margin-right: 10px;
		  margin-bottom: 10px;
		  opacity: 0.6;
		  cursor: pointer;
		  min-width: 42px;
		  text-align: center;
		  border-radius: 5px;
		}
  
		input {
		  display: none;
		  &:checked {
			& + span {
			  opacity: 1;
			  color: black;
			  background: var(--color-primary);
			  box-shadow: 0px 5px 10px rgba(126, 142, 177, 0.2);
			}
		  }
		}
	  }
	  .form-control {
		min-height: 40px;
		&.autre {
		  width: 150px;
		  margin-top: 2px;
		}
	  }
	}
  
	.panel-gout-et-couleur {
	  .titre {
		line-height: 24px;
		margin-left: 10px;
		&.category {
		  font-weight: bold;
		  padding-bottom: 5px;
		  margin-bottom: 20px;
		  border-bottom: 2px solid #ccc;
		}
	  }
	  input[type="text"] {
		margin: 0px 10px 40px 10px;
		min-height: auto;
		width: 50%;
	  }
	  .carousel {
		.details {
		  padding-top: 10px;
		  i {
			font-size: 18px;
			&:hover {
			  color: red;
			  cursor: pointer;
			}
		  }
		}
	  }
	  .is-top,
	  .is-bottom {
		z-index: 99;
		cursor: pointer;
	  }
	}
	.panel-inspirations {
	  textarea {
	  }
	}
	.panel-body {
	  min-height: fit-content;
	}
  
	@media screen and (max-width: 992px) {
	  #content {
		top: 0;
	  }
	  .container-fluid {
		margin-bottom: 100px;
	  }
	  .btn {
		font-size: 12px;
		padding: 5px 10px;
	  }
	  .navbar {
		font-size: 16px !important;
		.row {
		  margin-bottom: 10px;
		  .brand {
			margin-left: 0;
		  }
		}
	  }
	  section {
		padding-top: 0 !important;
	  }
	  .col1 {
		width: 100% !important;
	  }
	  .sticky-wrapper {
		& > div {
		  position: relative !important;
		  width: 85% !important;
		  top: 0 !important;
		  left: 10px;
		  right: 30px;
		}
	  }
	  .panel {
		padding: 0 15px;
		p {
		  font-size: 14px;
		}
		.pull-right {
		  width: 100%;
		  margin: 0 !important;
		  text-align: center;
		}
		textarea {
		  min-height: 100px !important;
		  width: 100%;
		  max-width: 100%;
		}
	  }
  
	  .form-check {
		position: relative;
		.titre {
		  font-size: 15px !important;
		}
		& > span {
		  position: absolute;
		  top: 110px;
		  width: auto;
		  &:last-child {
			right: 10px;
		  }
		}
	  }
	  .carousel {
		left: 30px !important;
		width: 200px !important;
		img {
		  height: 170px !important;
		}
	  }
	  .budget-slider {
		width: 100% !important;
	  }
	}
  }
  
  .budget-slider {
	.irs--round {
	  .irs-bar {
		background-color: var(--color-primary);
	  }
	  .irs-from,
	  .irs-to,
	  .irs-single {
		background-color: var(--color-primary);
		color: black;
	  }
	  .from::after,
	  .to::after {
		content: "";
		width: 24px;
		height: 24px;
		background: url("/img/picto-primary.svg");
		background-size: cover;
		display: block;
	  }
	  .irs-handle {
		border-color: var(--color-primary);
		border: none;
		box-shadow: none;
	  }
	  .irs-from:before,
	  .irs-to:before,
	  .irs-single:before {
		border-top-color: var(--color-primary);
	  }
	}
  }
  
  .budget-slider {
	border: 1px solid #ccc;
	border-radius: 10px;
	cursor: pointer;
	width: 445px;
	margin-bottom: 30px;
	display: inline-block;
	margin-right: 20px;
	position: relative;
  
	&:hover {
	  border: 1px solid #e8e7e8;
	}
	&.disable-budget-slider {
	  cursor: default !important;
	  &:hover {
		border: 1px solid #ccc !important;
	  }
	}
	.title {
	  display: inline-block;
	  padding: 20px 20px;
	  color: black;
	  display: block;
	  border-radius: 10px;
	  font-size: 15px;
	}
	.content {
	  padding: 0 30px 20px;
	}
	.irs--round {
	  // .irs-max{
	  // 	padding-left: 12px !important;
	  // 	visibility: visible !important;
	  // 	z-index: 1;
	  // 	background: #e8e7e8;
	  // 	margin-right: -20px;
	  // 	&:after{
	  // 		content: '+';
	  // 		position: absolute;
	  // 		left: 3px;
	  // 	}
	  // }
	}
  
	&.disabled {
	  opacity: 0.5;
	  background: #f8f8f8;
	  position: relative;
  
	  &:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 9999;
	  }
	  &:hover {
		border: 1px solid #000;
	  }
	  .irs--round {
		.irs-from,
		.irs-to,
		.irs-min,
		.irs-max {
		  visibility: hidden !important;
		}
  
		.irs-bar {
		  background-color: #e8e7e8;
		}
		.irs-from,
		.irs-to,
		.irs-single {
		  background-color: #e8e7e8;
		}
		.irs-handle {
		  border-color: #e8e7e8;
		}
		.irs-from:before,
		.irs-to:before,
		.irs-single:before {
		  border-top-color: #e8e7e8;
		}
		.from::after,
		.to::after {
		  background: url("/img/picto-gris.svg");
		}
	  }
	}
  }
  
  .tab-brief {
	.budget-slider {
	  width: 390px;
	}
  }
  
  .tabs-brief {
	&.tabs-nav {
	  background-color: transparent;
	}
  }
  
  .box-choosed-video {
	width: 130px !important;
	height: 150px !important;
	text-align: center !important;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-top: 30px !important;
	i {
	  font-size: 30px;
	}
	span {
	  white-space: normal !important;
	  line-height: 18px !important;
	  font-size: 12px;
	}
  }