.redborder { border: 1px solid red; }
.bg-lightgrey { background-color: #F1F1F1; }
.bg-lightred { background-color: #ffe6e680; }
.bg-lightgreen { background-color: #dbeedb7d; }
.cursor-pointer { cursor: pointer; }
.s12 { font-size: 12px; }
.s18 { font-size: 18px; }
.s32 { font-size: 32px; }
.s40 { font-size: 40px; }
.text-underline { text-decoration: underline; }
.mw-95 { max-width: 95%; }
.z-index-1 { z-index: 1;}
.padding-top-50 { padding-top: 50px; }
.w-initial { width: initial; }


  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

/* Dropzone */
  
.dropzone {
  background: #F9F9F9 !important;
  border: 2px dashed #D2D2D2 !important;
  color: #A6AEB9;
}

.dropzone .dz-preview.dz-image-preview {
  background-color: transparent !important;
}

.dropzone .dz-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.dropzoneAdd .dz-preview.dz-image-preview {
  width: 100% !important;
  height: 200px !important;
  margin: 0 !important;
}

.dropzoneAdd .dz-preview .dz-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.dropzoneUpdate {
  min-height: 115px !important;
}

.dropzoneUpdate .dz-preview, .dropzoneUnivers .dz-preview {
  min-height: auto !important;
}

.dropzoneUpdate .dz-preview .dz-details, .dropzoneUnivers .dz-preview .dz-details {
  padding: 1em !important;
}

.dropzoneUpdate .dz-preview .dz-image, .dropzoneUnivers .dz-preview .dz-image {
  height: 80px !important;
  border-radius: 0 !important;
}

.dropzoneUnivers {
  text-align: center;
  min-width: 160px;
  min-height: 120px !important;
}

.dropzoneUnivers .dz-preview {
  margin: 0 !important;
}

.dropzoneUnivers .dz-message {
  margin: 0 !important;
}

.dropzoneUnivers .dz-preview:hover .dz-image img {
	transform: none !important;
  filter: none !important;
}

/* Radio button */

.banniere_etat, .checkbox-xl {
  width: 25px;
  height: 25px;
}

.banniere_etat:hover, .checkbox-xl:hover {
  cursor: pointer;
}

.en_ligne {
  background-color: #00800017 !important;
}

/* Prévisualisation bannière */

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

.fontsatis { font-family: "satisfy", sans-serif !important;}

.btn-lg {
  font-size: 15px;
  font-weight: 500;
  padding: 14px 35px;
}

.btn-design-reverse {
  text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: center;
	color: white !important;
	overflow: hidden;
	background-color: #1c1e21;
	border: none;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	z-index: 1;
	position: relative;
	border-radius: 4px;
}

.btn-design-reverse:hover {
	color: white;
}

.btn-design-reverse:hover:after {
	right: 0;
	left: auto;
	width: 0;
	background-color: #1c1e21;
	color: white;
}

.btn-design-reverse:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
  background-color: #f45000;
	border-radius: 4px;
	box-shadow: 0 0 0 0 #1c1e21 inset, 0 0 0 4px #f45000 inset;
	z-index: -1;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn-design-reverse i {
	margin-right: 10px;
}

.banniere-preview {
  font-family: 'Montserrat', sans-serif;
  height: 90vh;
	background-attachment: fixed !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

@font-face {
  font-family: "Material Design Icons";
  src: url(icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot?#iefix&v=1.8.36) format("embedded-opentype"),
  url(icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2?v=1.8.36) format("woff2"),
  url(icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff?v=1.8.36) format("woff"),
  url(icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf?v=1.8.36) format("truetype"),
  url(icons/material-design-iconic-font/fonts/materialdesignicons-webfont.svg?v=1.8.36#materialdesigniconsregular) format("svg");
  font-weight: 400;
  font-style: normal;
}

.mdi {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

.mdi:before {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0,0);
}

.mdi-emoticon:before { content: "\F1F2" }
.mdi-emoticon-cool:before { content: "\F1F3" }
.mdi-emoticon-dead:before { content: "\F69A" }
.mdi-emoticon-devil:before { content: "\F1F4" }
.mdi-emoticon-excited:before { content: "\F69B" }
.mdi-emoticon-happy:before { content: "\F1F5" }
.mdi-emoticon-neutral:before { content: "\F1F6" }
.mdi-emoticon-poop:before { content: "\F1F7" }
.mdi-emoticon-sad:before { content: "\F1F8" }
.mdi-emoticon-tongue:before { content: "\F1F9" }
.mdi-engine:before { content: "\F1FA" }