.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: #9C6830;
		--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;

				&:hover {
					border: 1px solid #000;
				}
			}

			input {
				display: none;

				&:checked {
					&+span {
						opacity: 1;
						color: black;
						background: var(--color-primary);
						box-shadow: 0px 5px 10px rgba(126, 142, 177, 0.2);
						border: 1px solid #000;
					}
				}
			}
		}

		.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-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: 93% !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: 200px !important;
			width: 270px !important;

			img {
				height: 170px !important;
			}
		}

		.budget-slider {
			width: 100% !important;
		}
	}

	@media screen and (max-width: 500px) {
		.sticky-wrapper {
			&>div {
				width: 90% !important;
				left: 0px;
				right: 5px;
			}
		}

		.carousel {
			left: 30px !important;
			width: 210px !important;
		}
	}
}

.irs-handle {
	&:hover {
		cursor: col-resize !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;
				cursor: col-resize !important;
			}

			.irs-from:before,
			.irs-to:before,
			.irs-single:before {
				border-top-color: #e8e7e8;
			}

			.from::after,
			.to::after {
				background: url("/img/picto-gris.svg");
				cursor: col-resize !important;
			}
		}
	}
}

.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;
	}
}