/*general*/
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

input {
  -webkit-user-select:text !important;
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

html,body{
    height: 100%;
    overflow-x: hidden;
}

#lftContainer {
  min-height: 90%;
  width: 100%;
  box-sizing: border-box; /* Inclure le padding dans la largeur totale */
  display: flex; /* Permet de gérer l'alignement des éléments internes */
  flex-direction: column; /* Aligner les enfants verticalement */
  justify-content: center; /* Centrer les éléments */
  margin: 15px 15px 15px 15px;
}

@media (max-width: 1200px) {
  #lftContainer {
      padding: 12px; /* Réduction de l'espacement pour les écrans plus petits */
  }
}
@media (max-width: 768px) {
  #lftContainer {
      padding: 8px;
  }
}
@media (max-width: 768px) {
  .Veuillez-saisir-le-m,
  .Tlchargement-des-f,
  .password-input,
  .validate-button,
  .error-message-password {
    margin: 20px auto !important;
    width: 90% !important;
    max-width: 100%;
  }

  .toggle-password-download {
    right: 15px !important;
    top: 10px !important;
  }

  .shift-right {
    margin-left: 0 !important;
  }

  .main_container .right_side .download_zone {
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    margin-left: 0 !important;
  }

  .main_container .right_side .download_zone .files {
    height: auto !important;
  }

  .flex-container {
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px !important;
  }

  .button-container {
    text-align: center !important;
    width: 100% !important;
  }

  .download-button,
  .custom-button {
    width: 100% !important;
    max-width: 90%;
    margin-bottom: 10px;
  }
}


@media (max-width: 480px) {
  #lftContainer {
      padding: 4px;
      flex-direction: column; /* Assurez-vous que tout s'empile sur les petits écrans */
  }
}
@media screen and (max-width: 600px) {
  #lftContainer {
      width: 100%;
      padding: 10px;
  }
}
@media screen and (min-width: 601px) {
  #lftContainer {
      width: 100%;
      margin: 0 auto;
  }
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
      /* Code spécifique à Safari */
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}


/*reset   height: 100%;*/
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}
textarea:active,
textarea:focus,
a:active,
a:hover,
input {
  outline: 0;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
&


/*defaults for 1440px, 1300px*/
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #333;
  background: #fff;
  font-size: 14px;
  line-height: 14px;
  font-family: 'Arial', sans-serif;
  overflow-x: hidden;
}
.select-after-pw{
  margin-top: 30px;
}
.Field-border {
  width: 195px;
  height: 32px;
  padding: 4px 10px 4px 10px; 
  border: solid 1px #000;
  position: relative;
  
}
.Ajouter-la-protectio {
  width: 275px;
  height: 34px;
  margin: 7px 21px 5px 0;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.29px;
  color: #333;
}
.Afin-de-scuriser-vo {
  width: 275px;
  height: 51px;
  margin: 15.7px 21px 5px 0;
  font-family: Helvetica;
  font-size: 11px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.23px;
  color: #333;
}




.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 10px; 
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}

.eye-icon {
  width: 20px;
  height: 20px;
}


.password-instruction {
  position: absolute;
  top: -23px; 
  left: 0;
  font-size: 10.5px;
  font-family: Helvetica;
  color: #000;
}

.error-message-password {
  width: 422px;
  height: 48px;
  margin: -118px 849px 60px 53px;
  font-family: Helvetica;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.13px;
  color: #000;
}
.invalid-input {
  border: 1px solid #cd3c14;
}
.error-message-password .error-icon {
  width: 17px;
  height: 16px;
  margin-right: 6px; 
}

.error-icon-password {
  width: 13px;
  height: 20px;
  margin: 4px 3px 8px 24px;
  object-fit: contain;
}


.disabled-input {
  background-color: #f5f5f5; 
  color: #999999; 
  border: 1px solid #ccc; 
  pointer-events: none; 
}

select-menu.disabled-select {
  pointer-events: none; 
  background-color: #ccc !important; 
  border: 1px solid #ccc !important; 
  color: #ccc !important; 
  opacity: 1; 
}

select-menu.disabled-select select {
  background-color: #e0e0e0 !important;
  color: #cccc !important; 
  pointer-events: none; 
  border: none !important; 
}


select-menu.disabled-select:focus {
  outline: none !important;
  box-shadow: none !important;
}
select-menu.disabled-select > * {
  background-color: #ccc !important;
  color: #ccc !important; 
  pointer-events: none;
}
.eye-icondownload {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.validate-button {
  align-self: flex-start;
  border: none;
  padding: 9px 20px 13px;
  color: #000;
  background-color: #f16e00;
  width: auto;
  min-width: 100px;
  cursor: pointer;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  transition: background-color 0.3s;
  margin-top: 24px;
  margin-left: 50px ;
  height: 40px;
}
.validate-button.with-error {
  margin-top: 24px;
}
.validate-button.no-error {
  margin-top: -15px;
}
.validate-button:hover {
  background-color: black;
  color: white;
}


.validate-button:active {
  background-color: white;
  color: black;
  border: 2px solid black;
}

.validate-button.button-disabled {
  background-color: #ccc;
  color: #fff;
  cursor: not-allowed;
}

.Voulez-vous-que-le-m {
  width: 275px;
  height: 12px;
  margin: 2px 31px 0 0;
  font-family: Helvetica;
  font-size: 11px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.23px;
  color: #333;
}
.Field-border-error {
  border: solid 1px red;
}

.error-message {
  letter-spacing: -0.1px;
  color: #000;
  width: 208px;
  height: 10px;
  margin: 5px 23px 5px -18px;
  font-family: Helvetica;
  font-weight: 500;
  font-size: 10px;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.45;
  position: absolute;
}

.error-message2 {
  color: #000;
  letter-spacing: -0.px;
  display: flex;
  font-family: Helvetica;
  margin: 0px 0px -9px -19px;
  width: 204px;
  height: 36px;
  font-size: 8px;
  position: absolute;
  bottom: -30px;
  font-weight: 500;
  left: 0;
  line-height: 1.2;
}

/*general*/
a {
  color:#fff;
}
.black {
  color:#000;
}
.underline {
  text-decoration: underline;
}
a:active,
a:hover,
a:focus {
  color:#ff7900;
  text-decoration: none;
}
a.black {
  color:#000;
}
a.underline, a:active.underline, a:hover.underline {
  text-decoration: underline;
}

.clearer {
  clear:both;
}
.underline {
  text-decoration: underline;
}
.bold {
  font-weight: 700;
}
.normal {
  font-weight: 400;
}
.italic {
  font-style: italic;
}
.center {
  text-align: center;
}
.center-margin {
  margin: 0 auto;
}
.right {
  text-align: right;
}
.nopadding {
  padding:0!important;
}
.vertical_middle {
  vertical-align: middle;
}
.white {
  color:#fff;
}
.orange {
  color: #ff6600;
}
.blue {
  color:#4bb4e6;
}
.red {
  color:#ff0000;
}
.black {
  color:#000;
}
.nowrap {
  white-space: nowrap;
}
.vertical_align_helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
textarea {
  resize: none;
}
button:focus {
  outline: none;
}

header {
  background-color: #000;
  min-height: 60px;
  max-height: 65px;
  color:#fff;
  border-bottom: 1px solid #cccccc;
}
header .email_top img {
  margin-top: 21px;
  vertical-align: middle;
}
header .email_top {
  padding-left: 5px;
}
header .email_top .title {
  font-size: 20px;
  line-height: 20px;
  margin-top: 23px;
  margin-left: 22px;
}
.title_container .headerTitle{
   line-height: 80%;
   font-size: 42px;
   font-weight: bold;
   letter-spacing: -1.4px;
   color: #000;
}
.title_container .subtitle {
  line-height: 100%;
  text-align: right ;
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

header .menu_top {
  padding-right: 5px;
}
header .menu_top a {
  display: inline-block;
}
header .menu_top .assistance:hover img:first-of-type {
  display: none;
}
header .menu_top .assistance:hover img:nth-of-type(2) {
  display: inline-block!important;
}
header .menu_top .deconnexion:hover img:first-of-type {
  display: none;
}
header .menu_top .deconnexion:hover img:nth-of-type(2) {
  display: inline-block!important;
}
header .menu_top .connexion:hover img:first-of-type {
  display: none;
}
header .menu_top .connexion:hover img:nth-of-type(2) {
  display: inline-block!important;
}
header .item {
  margin-top: 25px;
  margin-left: 40px;
  margin-bottom: 25px;
}
header .item span {
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  margin-left: 8px;
}
.avis {
  z-index: 15001 !important;
  background-color: #000;
  color:#fff;
  border:1px solid #666666;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: fixed;
  left:-52px;
  height:25px;
  padding: 5px 9px 5px 9px;
  margin-top: 10%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.avis span {
  font-size: 13px;
  font-weight: bold;
}
.avis span a {
  color:#666666;
}
.title_container{
height: 20px;
margin-bottom: 50px;
text-size-adjust: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative; 
}
.main_container {
  margin-top: 35px;
  margin-bottom: 50px;

}
.main_container .left_side {
  padding-left: 5px;
  padding-right: 25px;
}
.main_container .left_side .mail_content {
  border:1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
}
.main_container .left_side .mail_content .top {
  background-color: #eeeeee;
  min-height: 49px;
  text-align: center;
}
.main_container .left_side .mail_content .top .title {
  display: inline-block;
  padding-top: 8px;
}
.main_container .left_side .mail_content .top span {
  padding-left: 3px;
  vertical-align: sub;
  position: relative;
  background: url(/assets/arrow_up1.png) no-repeat bottom center;
  display: inline-block;
  height: 31px;
}
.main_container .left_side .mail_content .from {
  height: 39px;
  padding-left: 10px;
  border-bottom: 1px solid #cccccc;
}
.main_container .left_side .mail_content .from span {
  vertical-align: middle;
  display: inline-block;
}
.main_container .left_side .mail_content .to {
  min-height: 49px;
  padding-left: 10px;
  position: relative;
  border-bottom: 1px solid #cccccc;
}
.main_container .left_side .mail_content .to.addressbook {
  border-bottom: none;
}
.main_container .left_side .mail_content .to>span {
  display: inline-block;
  vertical-align: top;
  margin-top: 18px;
  padding-left: 5px;
}
.main_container .left_side .mail_content .to div.to_content {
  margin-top: 4px;
  width: 93%;
  margin-left: 10px;
  display: inline-block;
  max-height: 80px;
  position: relative;
  padding-right: 40px;
}
.main_container .left_side .mail_content .to div.to_content input {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: nowrap;
  min-width: 215px;
  padding-top: 0;
  margin-top: 9px;
  height: 22px;
  vertical-align: top;
  font-size: 14px;
  line-height: 18px;
}
.main_container .left_side .mail_content .to div.to_content .placeholder {
  color: #666;
  display: block;
  padding-top: 13px;
}
.main_container .left_side .mail_content .to div.destination {
  vertical-align: middle;
  display: inline-block;
  padding: 4px 7px 3px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #eee;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}
.main_container .left_side .mail_content .to div.destination input {
  display: none;

}
.main_container .left_side .mail_content .to div.destination.editing {
  background: none;
  border: none;
  margin-top: 0;
}
.main_container .left_side .mail_content .to div.destination.error {
  border-color: #ed1218;
}
.main_container .left_side .mail_content .to div.destination.error span {
  border-bottom: 1px dashed #ed1218;
}
.main_container .left_side .mail_content .to div.destination a {
  vertical-align: middle;
  margin-left: 7px;
  display: inline-block;
}
.ps>.ps__scrollbar-y-rail {
  opacity: 0.6;
  width: 8px;
}
.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #616161;
}
.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  width: 6px;
  background-color: #616161;
}
.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  width: 6px;
}
.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y, .ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y {
  width: 6px;
}
.ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y {
  width: 6px;
}
.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  width: 6px;
}
.main_container .left_side .mail_content .to input {
  border:none;
  width: 100%;
  margin-top: 12px;
}
.main_container .left_side .mail_content .to button.address_book {
  background: url(/assets/addressbook.png) no-repeat center;
  height: 27px;
  width: 34px;
  border:none;
  position: absolute;
  right: 12px;
  bottom: 11px;
}
.main_container .left_side .mail_content .to button.address_book_ok {
  background: url(/assets/addressbook_ok.png) no-repeat center;

}

.address_book_content .gelement mark {
  padding:0;
  color:#f16e00;
  font-weight: bold;
  background-color: transparent;
}

.address_book_content {
  height: 271px;
  position: relative;
}
.address_book_scrollbar{
    height: 271px;
    position: relative;
}
.address_book_content .group {
}
.address_book_content .group .gtitle {
  color:#666666;
  font-weight: bold;
  background-color: #ebebeb;
  padding: 6px 5px 6px 10px;
}
.address_book_content  .gelement {
  min-height: 58px;
  border-bottom: 1px solid #d3d3d3;
  cursor: pointer;
}
.address_book_content  .gelement:hover {
  background-color: #FEF4EC;
}
.address_book_content  .gelement>div {
  float:left;
}
.address_book_content  .gelement .check {
  min-width: 48px;
  width: 8%;
  min-height: 48px;
  position: relative;
}
.address_book_content  .gelement .check > * {
  position: absolute;
}
.address_book_content  .gelement .check input {
  margin-top: 24px;
}
.address_book_content  .gelement .check .checkbox-visible {
  top:38%;
  left: 36%;
  height: 19px;
  min-width: 17px;
  background-image: url(/assets/oo-controls.png);
  background-repeat: no-repeat;
  background-size: 20px 577px;
  background-position: 1px -96px;
  -ms-flex-item-align: center;
}
.address_book_content  .gelement .check > input {
  z-index: 1;
  opacity: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translatex(-50%) translatey(-50%);
  transform: translatex(-50%) translatey(-50%);
  display: block;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.address_book_content  .gelement .check > input:checked + .checkbox-visible {
  background-position: 1px -128px!important;
}
.address_book_content  .gelement .check > input:hover + .checkbox-visible {
}
.address_book_content  .gelement .check > input:hover:checked + .checkbox-visible {
}
.address_book_content  .gelement .check > input:focus + .checkbox-visible {
}

.address_book_content  .gelement .img {
  min-width: 44px;
  width: 7%;
  padding-top: 8px;
}
.address_book_content  .gelement .img img {
  border-radius: 3px;
  border: 1px solid #b4b4b4;
}
.address_book_content  .gelement .desc {
  min-width: 460px;
  width: 83%;
  padding-left: 8px;
}
.address_book_content  .gelement .desc .first {
  font-weight: bold;
  padding-top: 15px;
}
.address_book_content  .gelement .desc .second {
  font-size: 12px;
  padding-top: 5px;
}
.address_book_content  .gelement.disabled .desc .first, .address_book_content  .gelement.disabled .desc .second {
  color: #999;
}


.main_container .left_side .mail_content .subject {
  height: 39px;
  padding-left: 10px;
  position: relative;
  border-bottom: 1px solid #cccccc;
}
.main_container .left_side .mail_content .subject span {
  vertical-align: middle;
  display: inline-block;
}
.main_container .left_side .mail_content .subject input {
  border:none;
  width: 87%;
  margin-left: 10px;
}
.main_container .left_side .mail_content .content {
  height: 382px;
  padding-left: 10px;
  position: relative;
  min-height: 190px;
}
.main_container .left_side .mail_content .content textarea {
  border: none;
  width: 98%;
  margin: 20px 5px;
  min-height: 155px;
}
.main_container .left_side .mail_content .bottom {
  background-color: #eeeeee;
  min-height: 43px;
}
.main_container .left_side .mail_content .bottom .button_bold {
  background: url(/assets/bold.png) no-repeat center;
  height: 27px;
  width: 29px;
  border:1px solid #666;
  border-radius: 3px;
  background-color: #eee;
  margin-left: 7px;
  margin-top: 8px;
}
.main_container .left_side .mail_content .bottom .button_italic {
  background: url(/assets/italic.png) no-repeat center;
  height: 27px;
  width: 29px;
  border:none;
  margin-left: 4px;
  margin-top: 8px;
  border:1px solid #666;
  border-radius: 3px;
  background-color: #eee;
}
.main_container .left_side .mail_content .bottom .button_underline {
  background: url(/assets/underline.png) no-repeat center;
  height: 27px;
  width: 29px;
  border:none;
  margin-left: 4px;
  margin-top: 8px;
  border:1px solid #666;
  border-radius: 3px;
  background-color: #eee;
}
.main_container .left_side .mail_content .bottom .button_bold.active, .main_container .left_side .mail_content .bottom .button_underline.active, .main_container .left_side .mail_content .bottom .button_italic.active {
  background-color: #ccc;
}

.main_container .left_side .mail_content .bottom .button_signature {
  background: url(/assets/signature.png) no-repeat center;
  height: 27px;
  width: 98px;
  border:none;
  float: right;
  margin-right: 10px;
  margin-top: 8px;
}

.main_container .right_side {
  padding-left: 24px;
  padding-right: 5px;
}
.main_container .right_side .upload_zone {
  border:1px solid #cccccc;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden;
}
.main_container .right_side .upload_zone .files {

}
.main_container .right_side .upload_zone .bottom {
  background-color: #eeeeee;
  min-height: 43px;
}
.main_container .right_side .upload_zone .bottom .bottom_content {
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}
.main_container .right_side .upload_zone span.progress_bar {
  width: 134px;
  height: 10px;
  background-color: #fff;
  margin-left: 15px;
  display: inline-block;
  position: relative;
}
.main_container .right_side .upload_zone span.progress_bar span {
  display: inline-block;
  background-color: #ccc;
  width: 15%;
  position: absolute;
  left: 0;
  height: 10px;
}
.main_container .right_side .upload_zone span.helper {
  font-size: 12px;
  line-height: 12px;
  margin-left: 12px;
  display: inline-block;
}
.main_container .right_side .upload_zone .bottom .button_add {
  background: url(/assets/ajouter.png) no-repeat center;
  height: 27px;
  width: 82px;
  border:none;
  float: right;
  margin-right: 10px;
  position: relative;
  top:-6px;
}
.main_container .right_side .upload_zone .files .zone_container {
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 25px 0;
}
.main_container .right_side .upload_zone .files .zone_container .zone {
  width: 80%;
  border-radius: 10px;
  border:3px dashed #eeeeee;
  padding:27px 0 25px 0;
  display: inline-block;
}
.main_container .right_side .upload_zone .files .zone_container .zone img {
  margin-bottom: 15px;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files {
  margin-top: 21px;
  padding: 0px 24px 0px 29px;
  height: 215px;
  position: relative;
  width: 99%;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading {
  margin-top: 10px;
  margin-bottom: 22px;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file {
  float:left;
  width: 9%;
  min-width: 24px;
  text-align: left;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail {
  float:left;
  width: 91%;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail div {
  float:left;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .name {
  width: 90%;
  font-weight: bold;
  text-align: left;
  line-height: 30px;
  color: #333;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .name span {
  color:#999;
  font-weight: normal;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .delete {
  width: 10%;
  min-width: 20px;
  text-align: right;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_progress {
  width: 100%;
  position: relative;
  height: 7px;
  background-color: #eee;
  border-radius: 5px;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_progress span {
  background-color: #f16e00;
  border-radius: 5px;
  width: 10%;
  position: absolute;
  left: 0;
  display: inline-block;
  height: 7px;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading.error .file_detail .name {
  color: #dc3c14;
  font-weight: normal;
}

.main_container .right_side .upload_zone .files .zone .insert {
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color:#999999;
}
.main_container .right_side .settings {
  border:1px solid #cccccc;
  padding: 22px 27px 23px 22px;
}
.main_container .right_side .settings>div {
  height: 32px;
  line-height: 32px;
  margin-bottom: 20px;
}
.main_container .success {
  background-color: #50be87;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 29px 0;
  border: 1px solid #ccc;
}
/* .main_container .success_result {
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 29px 30px;
} */
.main_container .success_result .title {
  font-weight: bold;
  font-size:13px;
  text-align: center;
  margin-bottom: 18px;
}
.main_container .success_result .emails {
  background-color: #eee;
  padding:6px 6px;
  position: relative;
  color:#666;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 20px;
}
.main_container .success_result .emails .emails_content {
  position: relative;
  height: 100px;
  padding: 12px 15px 0 12px;
}
.main_container .success_result .subtitle {
  text-align: center;
  margin-bottom: 10px;
  font-size: 13px;
}
.main_container .success_result input {
  border: 1px solid #ccc;
  width: 100%;
  font-size: 13px;
  padding: 7px 15px;
}
.main_container .success_result {
  align-items: center;
  top: 204px; 
  width: 493px; 
  height: 60px; 
  padding: 15px 70px 15px 20px;
  margin: 24px 472px 0 385px;
  border: solid 2px #32c832;
  display: flex;
  justify-content: center;
  background-color: #ffffff ;
  box-sizing: border-box; 
  margin-left: 5% !important;
  margin-right: 0 !important; 

}

/* Centrage horizontal du bloc d'erreur */
.error-row {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.error_block_wrapper {
  max-width: 600px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.main_container .error_result {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 30px;
  border: 1px solid #ccc;
  width: 100%;
  border-top: none;
  
}
.main_container .error_result .title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;

}
.main_container .error_result img {
  margin-bottom: 10px;
  max-width: 100px;
}
.main_container .error_result .emails {
  background-color: #eee;
  padding: 10px 15px;
  width: 100%;
  color: #666;
  font-size: 13px;
  line-height: 18px;
  border-radius: 5px;
}
.main_container .error_result .emails .emails_content {
  /* position: relative; */
  height: 100px;
  padding: 12px 15px 0 12px;
  margin: 0px 140px 0 10px;
}

.main_container.img.confirmation {
  width: 30px;
  height: 30px; 
  object-fit: contain;

}


.main_container .Notification {
  width: 353px;
  height: 18px;
  font-family: "HelveticaNeue-Bold", sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13; 
  letter-spacing: -0.1px; 
  text-transform: Titlecase ; 
  color: #000000; 
  white-space: nowrap ;
  margin-left: 20px !important;
  margin-right: 0 !important;
}
.main_container .AnalysisNotification {
  align-items: center;
  width: 555px;
  height: 253px;
  margin-top: 3%;
  padding: 26px 30px 35px 31px;
  border-radius: 8px;
  border: solid 1px #979797 !important;
  background-color: #fff;
  left: 442px;
  right: 443px;
}
.main_container .Vos-fichiers-font-ac {
  width: 493px;
  height: 36px;
  margin: 0 0 28px 1px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  color: #000;
}
.main_container .security-message-antivirus {
  width: 370px;
  height: 28px;
  margin: 28px 63px 28px 61px;
  padding: 4px 18px 4px 16px;
  border-radius: 13px;
  background-color: #666;
}
.main_container .img.iconCyber {
  width: 20px;
  height: 20px;
  margin: 0 6px 0 0;
  object-fit: contain;
  color: #000;
}
.main_container .secure-send{
  
  width: 310px;
  height: 16px;
  margin: 1px 0 3px 6px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 13px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  color: #fff;
}
.main_container .Suite-lanalyse-n {
  width: 493px;
  height: 72px;
  margin: 28px 1px 0 0;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  color: #000;
}

.send_again {
  padding: 0; 
  text-align: center;
  background-color: #ff7900;
  width: fit-content;
  /* position: absolute;  */
  max-width: 90%;
  margin: 30px auto 0px auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  cursor: pointer; 
}

.send_again:hover {
  background-color: #000; 
}

.send_again:active {
  background-color: #ffffff;
  color: #000; 
  border: 2px solid black;
}

.send_again a {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  /* margin: 0 10px 0 0; */
  font-family: "HelveticaNeue-Bold",sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  text-align: center;
  color: #000;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.send_again a:hover {
  color: #fff;
}

.send_again a:active {
  color: #000;
}

.main_container .custom-button {
  width: 50px;
  height: 30px;
  padding: 5px 15px 5px;
  font-family: "HelveticaNeue-Bold" ,sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  text-align: center;
  color: #000;
  gap: 8px; /* espace entre image et texte */
  cursor: pointer;
}
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
    align-items: flex-end;
  }

  .button-container {
    width: 100%;
    text-align: right;
  }
}
.download_container .custom-buttonn {
  width: 84px;
  height: 30px;
  padding: 5px 15px 5px;
  font-family: "HelveticaNeue-Bold" ,sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  text-align: center;
  color: #000;
}
.Rectangle {
  width: 92px;
  height: 40px;
  margin: 40px 1198px 262px 50px;
  padding: 9px 20px 13px;
  background-color: var(--ff-7900-orange-brand);
}

.Tlchargement-des-f {
  width: 313px;
  height: 26px;
  margin: 40px 977px 40px 50px;
  font-family: "HelveticaNeue-Bold" ,sans-serif;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #000;
}

.Veuillez-saisir-le-m {
  width: 441px;
  height: 54px;
  margin: 40px 849px 20px 50px;
  font-family: "HelveticaNeue-Bold" ,sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  color: #000;
}

.password-input {
  width: 100%; 
  max-width: 300px; 
  height: 40px;
  margin: 2px 990px 40px 50px;
  padding: 8px 40px 8px 13px;
  border: solid 2px #000;
  box-sizing: border-box;
}
.password-input-error {
  border: solid 2px #cd3c14; 
}
.password-container {
  position: relative;
  width: fit-content; 
}
.toggle-password-download {
  position: relative;
  top: -58px; 
  right: -318px; 
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.main_container .security {
  display: flex;
  align-items: center;  
  gap: 8px;             
  width: fit-content;
  max-width: 100%;
  padding: 6px 18px;
  margin: 30px 10px 10px 0;
  border-radius: 13px;
  background-color: #666;
  box-sizing: border-box;
  flex-wrap: nowrap;
  
}
.main_container .security-message{
  
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;  
}
.main_container .main_error {
  background-color: #dc3c14;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 29px 0;
  border: 1px solid #ccc;
}
.main_container .success_result.error .subtitle {
  color: #ccc;
}
.main_container .success_result.error input {
  color: #ccc;
  text-align: center;
}

.assist{
 margin-top:15px;
  float:left;
  border: none;
  padding: 7px 7px 7px 7px;
  color:#fff;
  border-radius: 3px;
}
.assist span{
  vertical-align: middle;
  color:#000;
}

.assist a {
  font-weight: bold;
   font-size: 17px;
  color:#00f;
  display: inline-block;

}

.submit {
  /* padding-right: 0px; */
  display: inline-block;
  text-align: right !important;
  margin-top: -74px;

}

.submit button {
  border: none;
  /* padding: 9px 14px 9px 160px; */
  margin: 35px 0 10px 100px;
  color:black;
  background-color: #f16e00;;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  text-align: center;
}

.button-disabled {
  pointer-events: none;
  opacity: 0.6; 
  cursor: not-allowed;
  background-color: gray;
}
.custom-button-send {
    width: 84px;
    height: 30px;
    background-color: var(--ff-7900-orange-brand);
    color: black;
    border: 1px solid black;
    transition: all 0.3s ease;
}


.custom-button-send:hover {
  background-color: black;
  color: white;
}


.custom-button-send:active {
  background-color: white;
  color: black;
  border: 2px solid black;
}

.custom-button-send.button-disabled {
  width: 142px;
  height: 30px;
  padding: 5px 15px 9px;
  background-color: #ccc;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  white-space: nowrap;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.1px;
  text-align: center;
  color:#000;
  cursor: not-allowed;
  border: 1px solid #ccc; 
  transition: all 0.01s ease;
}



.select-hidden {
  display: none;
  visibility: hidden;
}
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  color:#000;

  float:right;
  font-size: 12px;
  font-weight: bold;
  line-height: 21px;
  min-width: 194px;
  height: 32px;
}
.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  background-color: white;
  border: 1px solid #cccccc;
  padding: 5px 35px 4px 9px;
}
.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #676868;
  position: absolute;
  top: 10px;
  right: 16px;
}
.select-options {
  display: none;
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  border-top: none;
}
.select-options:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #676868;
  position: absolute;
  right: 16px;
  bottom: -8px;
}
.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #ccc;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:before {
  content:''; /* with class ModalCarrot ??*/
  display: inline-block;
  position:relative; /*or absolute*/
  z-index:100; /*a number that's more than the modal box*/
  left:-12px;
  top:0px;
  width: 28px;
}
.select-options li.selected:before {
  content:url(/assets/check.png); /* with class ModalCarrot ??*/
}

.select-options li:hover {
  background: #eee;
}
.select-options li[rel="hide"] {
  display: none;
}

.main_container .left_side .download_content {
  border:1px solid #ccc;
  border-top: 5px solid #ff5223;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  min-height: 410px;
  position: relative;
}
.main_container .left_side .download_content .top {
  padding: 15px 20px;
  border-bottom: 1px solid #ccc;
}
.main_container .left_side .download_content .top .subject {
  padding-bottom: 12px;
}
.main_container .left_side .download_content .top .subject span {
  font-size: 16px;
  font-weight: bold;
}
.main_container .left_side .download_content .top .from {
  padding-bottom: 5px;
}
.main_container .left_side .download_content .top .from span {
  font-weight: bold;
}
.main_container .left_side .download_content .top .when {
  font-size: 13px;
}
.main_container .left_side .download_content .bottom {
  padding: 25px 20px;
  line-height: 16px;
  font-size: 12px;
}
.main_container .left_side .download_content .bottom em {
  font-size: 13px;
  color:#444;
}
.main_container .left_side .download_content .footer {
  position: absolute;
  font-weight: bold;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 12px 20px;
  border-top: 1px solid #999;
  padding-top: 10px;
}
.main_container .right_side .download_zone {
  border:1px solid #cccccc;
  width: 700px;
  height: 410px;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 30px 5px 0px 29px;
  position: relative;
  margin-left: 30px;
}
.main_container .right_side .download_zone .files {
  height: 378px;
  position: relative;
}
.main_container .right_side .download_zone .files .downloading {
  padding: 30px 0;
  border-top: 1px solid #ccc;
  margin-right: 25px;
}
.main_container .right_side .download_zone .files .downloading:first-of-type {
  padding-top: 0;
  border-top: none;
}
.main_container .right_side .download_zone .files .downloading .file {
  float:left;
  width: 9%;
  min-width: 24px;
  text-align: left;
}
.main_container .right_side .download_zone .files .downloading .file_detail {
  float:left;
  width: 91%;
}
.main_container .right_side .download_zone .files .downloading .file_detail div {
  float:left;
}
.main_container .right_side .download_zone .files .downloading .file_detail .name {
  width: 73%;
  font-weight: bold;
  text-align: left;
  line-height: 30px;
  color: #555;
  font-family: Helvetica;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.09px;
}
.main_container .right_side .download_zone .files .downloading .file_detail .name span {
  font-weight: normal;
  color:#999;
}

.main_container .right_side .bottom button {
  float:left;
  border: none;
  padding: 9px 8px 9px 8px;
  color:#fff;
  background-color: #f16e00;
  border-radius: 3px;
  width: 20%;
  width: calc(100% - 78% - 4px);
}
.main_container .right_side .download_zone .files.expired {
  text-align: center;
  padding-top: 58px;
  height: 368px;
}
.main_container .right_side .download_zone .files.expired div {
  font-size: 20px;
  color: #999;
  padding-top: 20px;
  font-weight: bold;
}

.modal-header {
  padding: 11px 18px;
  border-bottom: 2px solid #dfdfdf;
}

.modal-header button.close {
  border: none;
  padding: 7px 7px 7px 7px;
  color:#000;
  background-image: url(/assets/close.png);
  border-radius: 1px;
  opacity: 1;
}
.modal-title {
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
}
.the-modal-changed{
 z-index: 15001 !important;
}
.modal-body {

  line-height: 18px;
  min-height: 100px;
}
.modal-content {
  box-shadow: none;
  border:1px solid #dfdfdf;
}
.modal-footer {
  background-color: #eee;
  border: none;
  padding: 5px 8px 6px 0;
}
.modal-footer button.confirm {
  border: none;
  padding: 9px 15px 9px 15px;
  color:#fff;
  background-color: #f16e00;
  border-radius: 3px;
}
.modal-footer button.cancel {
  border: 1px solid #999;
  padding: 8px 15px 8px 15px;
  color:#444;
  background-color: #fff;
  border-radius: 3px;
  margin-right: 8px;
}
.modal {
  text-align: center;
  padding: 0!important;
}
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 370px;
}

/*quill js override*/
/**
* Create a flex container that will display as a row
*/
.flex-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

/*
* Make a flex container using center alignement (cross-axis) and center justification
*/
.flex-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/*
* Not possible to use this class because it is overriden by classes ql-container ql-snow
* which are added bu quilljs librairie
*/
.lft-editor-content--noborder {
  border: 0;
}

/*
* Override ql-container ql-snow to remove border on the div content element
*/
.ql-container.ql-snow {
  border: none;
}

.lft-editor-toolbar__button {
  box-sizing: border-box;
  height: 27px;
  width: 29px;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #eee;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #999;
  outline: 0;
}

.ql-toolbar.ql-snow {
  padding: 0;
  border: none;
}

.lft-editor-toolbar__button svg {
  max-width: 14px;
  width: 14px;
  max-height: 14px;
  height: 14px;
  fill: #666;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  margin-left: 7px;
  margin-top: 8px;
  padding: 0px;
  height: 27px;
  width: 29px;
}

.ql-snow.ql-toolbar button span:hover,
.ql-snow .ql-toolbar button span:hover,
.ql-snow.ql-toolbar button.ql-active span,
.ql-snow .ql-toolbar button.ql-active span{
  background-color: #ccc;
}

.notification {
  width: 526px;
  height: 18px;
  padding-left: 50px;
  margin: -50px 0 0 23px;
  font-family: 'HelveticaNeue';
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  color: #000;
}

.description {
  width: 500px;
  height: 24px;
  margin: 0 236px 9px 23px;
  padding-left: 50px;
  font-family: 'HelveticaNeue';
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: #000;
}
.iconsfunctional_UIA-Eic_Air_time {
  width: 60px;
  height: 60px;
  margin: 0 23px 0 0;
  object-fit: contain;
  background: url(/assets/unavailable.png) no-repeat;

}
.unavailable_download_content {
  width: 800px;
  height: 80px;
  margin: 150px 250px 301px 150px;
  padding: 10px 308px 10px 23px;
  border: solid 2px #527edb;
  background-color: #fff;
}

.unavailable_download_container {
  background-color:#eee;
  min-height: 1000px;
}

.popup-overlay {
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1000; 
  justify-content: center; 
  align-items: center; 
  display: flex; 
}
.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.popup-content {
  width: 590px;
  height: 463px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-top: 10%;
}
.popup-text-container {
  margin-top: -490px; 
  padding-left: 50px; 
}

.close-btn-container{
  text-align: right;
  margin-top: 5%;
  margin-right: 30px;
}
.close-btn {

  width: 4%!important; 
  height: 4%!important; 
  background-color: transparent; 
  color: #000; 
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 29px!important; 
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
 
}

/* 
@media screen and (max-width: 1024px) {
  .close-btn {
    top: 28%; 
    right: 36%; 
    width: 4%; 
    height: 4%; 
  }
}

@media screen and (min-width: 1440px) {
  .close-btn {
    top: 21%; 
    right: 32%; 
    width: 4%; 
    height: 4%; 
  }
} */

img.Group-15 {
  width: 115px; 
  height: 600px; 
  margin-top: -100px; 
  padding-left: 50px; 
  object-fit: contain; 
}

.titre-popup {
  width: 480px;
  height: 280px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 22px; 
  font-weight: bold; 
  font-stretch: normal; 
  font-style: normal; 
  line-height: 1.36; 
  letter-spacing: normal; 
  color: #000; 
  margin-top: -470px; 
  padding-left: 150px; 
}
.password-info {
  width: 480px;
  height: 280px;
  white-space: nowrap; 
  /* margin-top: -35%;  */
  margin-top: -225px; 
  padding-left: 150px; 
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #000;
}
.password-info p {
  margin-bottom: 1.5em;
}
.bold-text {
  font-weight: bold;
  margin-top: -10px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 14px;
}
.service-border {
  width: 220px;
  height: 50px;
  /* margin: -90px 122px 4px 150px; */
  margin: -50px 122px 4px 150px;
  border: solid 1px #000;
  display: flex; 
  align-items: center; 
  justify-content: center;  
}

.service-access-border {
  width: 147px;
  height: 22px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}

.checkbox-label-text {
  width: 187px;
  height: 20px;
  margin: -25px 0 10px 15px;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #000;
}


.checkbox-border {
  margin: 20px 0 10px 25px;
}
.checkbox-border {
  display: flex; 
  align-items: center; 
  margin: 20px 0 10px 25px; 
}

.checkbox-border input[type="checkbox"] {
  width: 20px; 
  height: 20px; 
  margin-right: 10px; 
  border-radius: 0; 
  border: solid 2px #ccc;
  appearance: none; 
  -webkit-appearance: none; 
  cursor: pointer; 
}

.checkbox-border input[type="checkbox"]:checked {
  background-color: #000; 
}

.checkbox-label-text {
  margin: 0; 
  font-size: 14px; 
}
.shift-right {
  margin-left: 130px; 
}

.button-container {
  text-align: right;
  margin-top: 10px;
}

.custom-button {

  width: 188px !important;
  height: 40px !important;
  padding: 9px 20px 10px 20px;
  font-family: HelveticaNeue;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  color: #000;
  border: none; 
  background-color: #ff7900; 
}

.custom-button img {
  margin-right: 8px; 
  vertical-align: middle;
}

.custom-button:hover {
  background-color: #000;
  color: #fff;
  border: #fff;
}

.custom-button:hover img {
  content: url("/images/down_arrow.png");
  width: 15px;  
  height: 15px; 
}

.custom-button:active img {
  content: url("/images/downloadicon.png");
  width: 15px;  
  height: 15px; 
}

.custom-button:active {
  background-color: #fff;
  color: #000;
  border: solid 2px #000
}

.custom-button span {
  width: 123px;
  height: 18px;
  font-family: Helvetica;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: -0.1px;
  
}
.bottom_content.download {
  float: left;
  width: 70%; /* Ajustez selon vos besoins */
}

.download-button {
  width: 129px;
  height: 30px;
  display: inline-block;
  padding: 6px 12px;
  border: solid 2px #000;
  text-decoration: none;
  font-family: Helvetica;
  color: #000;
  font-stretch: normal;
  font-style: normal;
  font-weight: bold;
  background-color: #ffffff; /* Couleur de fond */
  transition: all 0.3s ease; /* Transition pour effet hover */
}

.download-button img {
  margin-right: 8px; /* Espacement entre l'icône et le texte */
  vertical-align: middle;

 
}

.download-button:hover {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}

.download-button:hover img {
  content: url("/images/down_arrow.png");
  width: 15px;  
  height: 15px; 
}


.download-button:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}
.download-button:active img {
  content: url("/images/downloadicon.png");
  width: 15px;  
  height: 15px; 
}
.download-button:active {
  background-color: #ff7900; /* Couleur lorsqu'il est pressé */
  color: #000; 
  border-color: #ff7900;
}


.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* pour mobile */
  padding: 20px;
  
}

div::after {
  content: "";
  display: block;
  clear: both; /* Évite les problèmes de débordement de float */
}





/*quill js override*/





/* responsive */
@media (max-width: 991px) {
  .main_container .left_side .mail_content .subject input {
    width: 80%;
  }
  .main_container .right_side .upload_zone span.progress_bar {
    width: 13%;
  }
  .main_container .right_side .settings select {
    width: 47%;
  }
  .main_container .left_side .mail_content .to div.to_content {
    width: 90%;
  }
  .unavailable_download_container .unavailable_download_content {
      width: 600px;
      margin: 150px 100px 301px 100px;
  }
  .unavailable_download_container .description .notification {
        width: 600px;
      margin: 150px 100px 301px 100px;
  }
}


@media (max-width: 767px) {
  .main_container .left_side {
    padding-left: 30px;
    padding-right: 30px;
  }
  .main_container .right_side {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
  }
  .main_container .left_side .mail_content .to div.to_content {
    width: 95%;
  }

  .unavailable_download_container .unavailable_download_content  {
      width: 370px;
      margin: 150px 50px 301px 10px;
  }
    .unavailable_download_container .container .unavailable_download_content .description {
        width: 370px;
        margin: 15px 15px 15px 15px;

    }
    .unavailable_download_container .container .unavailable_download_content .notification {
        width: 370px;
    }
}

@media (max-width: 320px) {
  .modal-dialog {
    width: 300px;
  }

}


/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
   :-ms-input-placeholder {
    color: #666666 !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #666666;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #666666;
    font-weight: 400;
}
.main_container {
    min-width: 370px;
}
.main_container .left_side .mail_content .to {
    display: flex;
}
.main_container .left_side .mail_content .to>span {
    width:25px
}
.main_container .left_side .mail_content .subject {
    display: flex;
    line-height: 39px;
}
.main_container .left_side .mail_content .subject span {
}

.main_container .right_side .settings>div{
    align-items: center;
    display: flex;
}
.main_container .right_side .settings>div>span{
    flex-grow: 1;
    line-height: normal;
}
.main_container .right_side .settings.settings-zone-disabled,
.main_container .right_side .settings.settings-zone-disabled .select{
    color: gray;
}
.main_container .right_side .settings.settings-zone-disabled .select-styled:after{
    display: none;
}

@media (max-width: 991px){
    .main_container .right_side .settings>div>span{
        font-size: 12px;

    }
    .main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail{
        font-size: 12px;
    }

}
@media (max-width: 767px) {
    .main_container .right_side .settings>div>span{
        flex-grow: 1;
        font-size: 14px;
    }
    .main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail{
        font-size: 14px;
    }
}

.address_book_content .gelement {
    display: flex;
    height: 58px;
}
.address_book_content .gelement .desc div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
}
.address_book_content .img .avatar{
    fill: #999999;
    background-color: #eeeeee;
    vertical-align: middle;
}
.main_container .left_side .mail_content .to>span{
    height: 49px;
    margin: 0;
    padding-top: 21px;
}
.main_container .left_side .mail_content .to div.to_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-height: 90px;
    min-height: 49px;
    width:95%;
}
.main_container .left_side .mail_content .to div.to_content input{
    width: initial;
    min-width: 50px;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 50px;
    margin:0;
    height: 30px;
}

.main_container .left_side .mail_content .to div.destination{
    display: flex;
    align-items: center;

    margin-top:5px;
    margin-bottom:5px;
    margin-right:10px;
    margin-left:0px;
}

.main_container .left_side .mail_content .to div.destination>span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    height: 15px;
    margin-top:4px;
    margin-bottom:4px;
}
.main_container .left_side .mail_content .to .destination-wrapper{
    margin:0px;
    padding:0px;
}
.main_container .right_side .upload_zone .files .zone_container {
    height: 215px;
    margin-top: 21px;
    width:99%;
}

.main_container .right_side .upload_zone .bottom .bottom_content{
    display: flex;
}
.main_container .right_side .upload_zone .bottom .add_button {
    display: flex;
    background: none;
    height: 27px;
    width: 82px;
    padding: 0;
    background-color: #eeeeee;
    border-radius: 3px;
    border:1px solid gray;
    margin-right: 10px;
    position: relative;
    top: -6px;
}
.main_container .right_side .upload_zone .bottom .add_button svg {
    flex-grow: 0;
    flex-shrink: 0;
    width: 12px;
    fill: #666666
}
.main_container .right_side .upload_zone .bottom .add_button div {
    padding-left: 12px;
    padding-right: 8px;
    height: 27px;
    line-height: 27px;
}
.main_container .right_side .upload_zone .bottom .add_button span {
    color: #666666;
    height: 25px;
    line-height: 25px;
}
.main_container .right_side .upload_zone.upload-zone-disabled .bottom .add_button {
    border:1px solid #C1C1C1;
}
.main_container .right_side .upload_zone.upload-zone-disabled .bottom .add_button svg {
    fill: #C1C1C1;
}

.main_container .right_side .upload_zone.upload-zone-disabled .bottom .add_button span {
    color:#C1C1C1;
}
.main_container .right_side .upload_zone .bottom .helper{
    flex-grow: 1;
}

.main_container .left_side .mail_content .subject input{
    background-color: white;
    height: 36px;
}
.main_container .left_side .mail_content.compose-zone-disabled{
    color: gray;
}
.main_container .left_side .mail_content.compose-zone-disabled .address_book,
.main_container .left_side .mail_content.compose-zone-disabled .to div.destination a,
.main_container .left_side .mail_content.compose-zone-disabled .to div.to_content input{
    display: none;
}

.main_container .left_side .mail_content.compose-zone-disabled .lft-editor-toolbar__button svg {
    fill: gray;
}
.main_container .left_side .mail_content.compose-zone-disabled .ql-snow.ql-toolbar button span:hover,
.main_container .left_side .mail_content.compose-zone-disabled .ql-snow .ql-toolbar button span:hover,
.main_container .left_side .mail_content.compose-zone-disabled .ql-snow.ql-toolbar button.ql-active span,
.main_container .left_side .mail_content.compose-zone-disabled .ql-snow .ql-toolbar button.ql-active span{
background: none;
cursor: default;
}

.main_container .left_side .mail_content input::-ms-clear {
    display: none;
}

.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading {
    display: flex;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading.error {
    color: red;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading.error .file_detail .file_detail_text .name .file_name,
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading.error .file_detail .name span.file_error {
    font-weight: normal;
    color: red;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail {
    display: flex;
    flex-direction: column;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_detail_text {
    display: flex;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_detail_text .name {
    display: flex;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .name span.file_error {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 170px;
    overflow: hidden;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_detail_text .name .file_name {
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file_detail .file_detail_text .name .sizeLabel {
    white-space: nowrap;
}
.main_container .right_side .upload_zone .files .zone_container.uploaded_files .uploading .file{
    width: 40px;
    flex-shrink: 0;
}

.main_container .right_side .download_zone .files .downloading {
    display: flex;
    width: 100%;
}
.main_container .right_side .download_zone .files .downloading .file{
    width: 40px;
    flex-shrink: 0;
}
.main_container .right_side .download_zone .files .downloading .file_detail {
    display: flex;
}
.main_container .right_side .download_zone .files .downloading .file_detail {
    display: flex;
    flex-grow: 1;
    float: none;
}
.main_container .right_side .download_zone .files .downloading .file_detail div{
    float: none;
}
.main_container .right_side .download_zone .files .downloading .file_detail .download {
    width: 140px;
    white-space: nowrap;
    flex-shrink: 0;
}
.main_container .right_side .download_zone .files .downloading .file_detail .file_detail_size {
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 5px;
    color: #555;
    font-family: Helvetica;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.09px;
    line-height: 30px;
}
.main_container .right_side .download_zone .files .downloading .file_detail .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}
.main_container.download_container .right_side .bottom {
    display: flex;
    width:100%;
}
.main_container.download_container .right_side .bottom a {
    width:120px;
    white-space: nowrap;
    flex-shrink: 0;
}
.main_container.download_container .right_side .bottom button{
    float: none;
    width: 100%;
}
.main_container.download_container .right_side .bottom .bottom_content.download{
    flex-grow: 1;
}/**
 * Create a flex container that will display as a row
 */
.flex-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

/*
 * Make a flex container using center alignement (cross-axis) and center justification
 */
.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}


/*
 * Not possible to use this class because it is overriden by classes ql-container ql-snow
 * which are added bu quilljs librairie
 */
.lft-editor-content--noborder {
    border: 0;
}
/*
 * Override ql-container ql-snow to remove border on the div content element
 */
.ql-container.ql-snow {
    border: none;
}

.lft-editor-toolbar__button {
    box-sizing: border-box;
    height: 27px;
    width: 29px;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #eee;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999;
    outline: 0;
}

.ql-toolbar.ql-snow {
    padding: 0;
    border: none;
}

.lft-editor-toolbar__button svg {
    max-width: 14px;
    width: 14px;
    max-height: 14px;
    height: 14px;
    fill: #666;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    margin-left: 7px;
    margin-top: 8px;
    padding: 0px;
    height: 27px;
    width: 29px;
}

.ql-snow.ql-toolbar button span:hover,
.ql-snow .ql-toolbar button span:hover,
.ql-snow.ql-toolbar button.ql-active span,
.ql-snow .ql-toolbar button.ql-active span{
    background-color: #ccc;
}
.fileIcon{
    width: 23px;
    height: 30px;
    background: url(/assets/unknown_file.png) no-repeat;
}
.zipIcon{
    background: url(/assets/document_zip.png) no-repeat;
}
.imgIcon{
     background: url(/assets/document_image.png) no-repeat;
}
.vidIcon{
     background: url(/assets/Video_file.png) no-repeat;
}
.wordIcon{
     background: url(/assets/documentword.png) no-repeat;
}
.pptIcon{
     background: url(/assets/document_ppt.png) no-repeat;
}
.excelIcon{
     background: url(/assets/Excel.png) no-repeat;
}
.pdfIcon{
     background: url(/assets/document_pdf.png) no-repeat;
}
.textIcon{
     background: url(/assets/lourd_text.png) no-repeat;
}
.vcardIcon{
     background: url(/assets/vcard.png) no-repeat;
}
.audioIcon {
    background: url(/assets/document_music.png) no-repeat;
}