﻿@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap");
@font-face {
  font-family: "OpenSans-Regular" !important;
  src: url("../font/open sans/OpenSans-Regular.ttf") format("truetype"); }

/*$color_bailleur: #2B6389;*/
/*COULEUR BAILLEUR*/
.btn-contact {
  background-color: #8f9393;
  color: #fff;
  height: 31px;
  width: 152px;
  font-size: 13px;
  border-radius: 6px;
  /*border-color: $color_bailleur;*/
  padding: 0px 0px 0px 9px;
  position: relative;
  opacity: 80%; }

.steps-progress-bar li.active:before, .steps-progress-bar li.active:after {
  font-weight: 800;
  border: 3px solid #8f9393 !important;
  width: 46px;
  border-radius: 26px; }

.btn-contact:hover, .btn-contact:focus, .btn-contact:active {
  background-color: #8f9393;
  color: #fff;
  border-color: #8f9393;
  outline: none !important;
  box-shadow: none !important;
  opacity: 100%;
  font-weight: 600; }

.btn-contact::before {
  content: '';
  display: inherit;
  position: relative;
  background-image: url("../Image/source/Icon material-email.png");
  width: 14px;
  height: 11px;
  top: 1px;
  left: -8px; }

.postexteTitreConnexion {
  font-size: 31px;
  font-weight: bold;
  color: #8f9393;
  font-weight: bold; }

#texteTitreAccueil {
  font-size: 26px;
  font-weight: bold;
  color: #8f9393;
  font-weight: bold; }

/*FIN COULEUR BAILLEUR*/
.form-control {
  display: block;
  width: 100%;
  padding: 0.8rem 0.75rem !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

.progress-container {
  margin-top: 5rem;
  padding: 0px 70px; }

.progress-decoration {
  position: relative;
  height: 16vh; }
  .progress-decoration svg {
    position: absolute;
    fill: rgba(237, 30, 40, 0.2); }
  .progress-decoration .icon-cloud {
    fill: rgba(145, 179, 250, 0.4); }
  .progress-decoration #cloud-one {
    right: 6vw;
    top: -12vh; }
  .progress-decoration #cloud-two {
    right: 32vw;
    top: -8vh; }
  .progress-decoration #cloud-three {
    right: 72vw;
    top: -12vh; }
  .progress-decoration #tree-one {
    bottom: 0;
    right: 80vw; }
  .progress-decoration #tree-two {
    bottom: 0;
    right: 20vw; }
  .progress-decoration #lamp-one {
    bottom: 0;
    right: 54vw; }
  .progress-decoration #lamp-two {
    bottom: 0;
    right: 0; }

.progress-bar {
  background-color: transparent;
  border: 3px #f4f4f4 solid;
  border-radius: 20px;
  position: relative;
  margin: 4px 0 16px 0;
  height: 30px;
  width: 100%; }
  .progress-bar .completed-bar {
    background: linear-gradient(to left, #ff000c, #ffb200, #2edb4c);
    border-radius: 20px;
    color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    width: 0;
    opacity: 0;
    transition: width 2s ease 0.4s;
    padding: 0 8px; }
    .progress-bar .completed-bar__dashed {
      width: 96%;
      border: 2px dashed #ffffff; }
    .progress-bar .completed-bar__truck {
      font-size: 1.5rem;
      margin-left: 4px; }
  .progress-bar .completed-bar-success {
    background: linear-gradient(to left, #32a546, #07ca29);
    border-radius: 20px;
    color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    width: 0;
    opacity: 0;
    transition: width 2s ease 0.4s;
    padding: 0 8px; }
    .progress-bar .completed-bar-success__dashed {
      width: 96%;
      border: 2px dashed #ffffff; }
    .progress-bar .completed-bar-success__truck {
      font-size: 1.5rem;
      margin-left: 4px; }

.progress-information {
  display: none;
  justify-content: space-between;
  padding: 0 4px; }

.icon-cloud {
  height: 50px;
  width: 50px; }

.icon-lamp {
  height: 70px;
  width: 60px; }

.icon-tree--one {
  height: 60px;
  width: 60px; }

.icon-tree--two {
  height: 70px;
  width: 60px; }

p {
  font-family: verdana, Arial, Helvetica, sans-serif;
  /*font-family: "Poppins", "Helvetica", "sans-serif";*/
  letter-spacing: 1px;
  line-height: 1.5;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(48, 48, 48, 0.6); }

@media only screen and (max-width: 576px) {
  .progress-container {
    padding: 0px 16px; }
  .progress-decoration {
    display: none; }
  .progress-information {
    display: flex; }
  .progress-bar {
    margin-bottom: 4px; }
    .progress-bar .completed-bar__dashed {
      width: 96%;
      border: 1px dashed #ffffff; }
    .progress-bar .completed-bar__truck {
      font-size: 1rem;
      margin-left: 0; } }
