body {
    overflow: hidden; /* Hide scrollbars */
    margin:0;
    border:0;
}

.body-background{
  background-image: url(/images/svg/fond_accueil.svg);
  filter: invert(93%) sepia(17%) saturate(415%) hue-rotate(183deg) brightness(97%) contrast(97%);
  background-size: 100% auto; /* Fill width, retain proportions */
}

 /* The sidepanel menu */
.sidepanel {
    height: 250px; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
  }
  
  /* The sidepanel links */
  .sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidepanel a:hover {
    color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style the button that is used to open the sidepanel */
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
  }
  
  .openbtn:hover {
    background-color: #444;
  } 

  .container {
    position: relative;
    text-align: center;
    color: white;
  }

  .color-bg-tellier-darkBlue{
    background-color: #152B50;
  }

  .color-bg-tellier-blue{
    background-color: #164194;
  }

  .color-bg-tellier-lightBlue{
    background-color: #E1E8F5;
  }

  .color-bg-tellier-white{
    background-color:#FFFFFF;
  }

  .color-svg-tellier-lightBlue{
    filter: invert(93%) sepia(17%) saturate(415%) hue-rotate(183deg) brightness(97%) contrast(97%);
  }

  .color-svg-tellier-orange{
    filter: invert(62%) sepia(69%) saturate(2200%) hue-rotate(356deg) brightness(140%) contrast(91%);
  }

  .color-svg-tellier-darkOrange{
    filter: invert(62%) sepia(74%) saturate(2211%) hue-rotate(356deg) brightness(104%) contrast(91%);
  }

  .color-svg-tellier-blue{
    filter: invert(15%) sepia(66%) saturate(3234%) hue-rotate(215deg) brightness(96%) contrast(89%);
  }

  .color-bg-tellier-orange{
    background-color: #F49712;
  }

  .color-text-tellier{
    color:#164194;
  }
  .color-text-2-tellier{
    color:#F49712;
  }

  .color-light-text-tellier{
    color:#899DB4;
  }

  .color-white-text-tellier{
    color:#FFFFFF;
  }

.connect-button > img{
  filter: invert(62%) sepia(69%) saturate(2200%) hue-rotate(356deg) brightness(140%) contrast(91%);
  width:60%;
}

.connect-button:hover{
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  cursor: pointer;
}

.large-bg{
  width: 85%;
  background-size: cover;
  right:0;
  bottom: 0;
  z-index: 1;
  position: fixed;
}

.connexion-panel{
  width:30%;
  height: 100%;
  left:0;
  bottom: 0;
  top: 0;
  z-index: 10;
  position: fixed;
}

.connexion-content{
  padding-top:20%;
  left:30px;
  right: 30px;
  text-align: justify;
  margin-top:5%;
  z-index: 11;
  position: absolute;
}

.top-logo{
  top:20px;
  left:20px;
  max-width: 15vw;
  max-height: 10%;
  position: fixed;
}

.bot-logo{
  bottom:20px;
  left:20px;
  max-width: 15%;
  position: fixed;
  z-index: 1;
}

.center-text{
  text-align: center !important;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-ui{
  height: 100%;
  width: 100%;
  z-index:1;
}

.iframe-pdf{
  height: 100%;
  width: 100%;
}