@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);

  /* important to let autocomplete in popup using google maps API */
  .pac-container { z-index: 100000 !important; }
  /* important to let autocomplete in popup using google maps API */
  
a { text-decoration: none;}
.btn-infos {
    color: #fff !important;;
    background-color: #06ad9d !important;
    border-color: #06ad9d !important;
}
.btn-infos:hover {
    color: #fff !important;
    background-color: #04998b !important;;
    border-color: #04998b !important;;
}

  .flag_position, .flag_mainPosition{
    vertical-align: text-bottom !important;
  }
  .flag_position img{
    width: 16px !important; height: 16px !important;
  }
  .flag_mainPosition img{
    width: 24px !important; height: 24px !important;
  }

  img, svg {
    vertical-align: sub !important;
  }

.btnHover{
  border-radius: 50% !important;
  --phoenix-btn-padding-y: 0.8rem !important;
  --phoenix-btn-padding-x: 0.8rem !important;
}
.pcontent {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  /* color: black !important; */
}
#btn{
  outline: none;
  padding: 10px 15px;
}
#less{
  display: none;
}
#colorP p{color: red;}
.error{
  color: red !important;
  border-color: red !important; 
  font-weight: 700!important;  
}
.form-control:focus {
  color: var(--phoenix-gray-900);
  background-color: var(--phoenix-input-bg);
  border-color: none !important;
  outline: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
/* .modal{padding-right: 0px !important;}
.wrapper p{ position: absolute; right: 0px; cursor: pointer; font-size: 14px; background: #38c17226; color: #38c172; font-weight: bold; max-width: 100%; min-width: 50%; text-align: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; padding: 4px; border-radius: 6px; }
.wrapper input[type="file"] {display: none;}
.modal-header{padding-bottom: 40px;}
.modal-header h5{right: 20px; position: absolute;}
.modal-header .close{left: 0; position: absolute;}

#image {display: block; max-width: 100%;}
.preview {overflow: hidden; width: 160px; height: 160px; margin: 10px; border: 1px solid rgb(76, 0, 255);} 
.overlay {position: absolute; bottom: 10px; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.5); overflow: hidden; height: 0; transition: .5s ease; width: 100%;} 
.text {color: #333; font-size: 20px; position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}
img{max-width: 100%;}
.dropdown-toggle::after{border: none !important;}
#i-moreOption{max-width: 100%;background: #00000091;font-size: smaller;padding: 2px;position: absolute;right: -4px;top: 2px;border-radius: 50%;color: #ffffff;} */

.modal{padding-right: 0px !important;}

.wrapper p { 
    position: absolute;
    left: 0px; 
    cursor: pointer;
    font-size: 14px;
    background: #38c17226;
    color: #38c172;
    font-weight: bold;
    max-width: 100%;
    min-width: 50%;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis; 
    padding: 4px;
    border-radius: 6px;
}
 
.wrapper input[type="file"] {
    display: none;
}
 /* Profile */  
  #image {
      display: block;
      max-width: 100%; 
  }
  /* #image{display: block;   
    width: 356px;
  height: 350px;} */
  
  .preview {
      overflow: hidden;
      width: 160px; 
      height: 160px;
      margin: 10px;
      border: 1px solid rgb(76, 0, 255);
  } 
  .overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    height: 0;
    transition: .5s ease;
    width: 100%;
  } 
  
  .deleteElement{
    float: left !important;
    position: absolute;
    left: 20px;
  }
  /* .center{
    width: 162px; 
    margin: auto;
  } */
  
  
  #rating-value{	
    width: 110px;
    margin: 40px auto 0;
    padding: 10px 5px;
    text-align: center;
    box-shadow: inset 0 0 2px 1px rgba(46,204,113,.2);
  }
  #rating-valueLang{	
    width: 110px;
    margin: 40px auto 0;
    padding: 10px 5px;
    text-align: center;
    box-shadow: inset 0 0 2px 1px rgba(46,204,113,.2);
  }
  
  /*styling star rating*/
  .rating{
    border: none;
    float: left;
  }
  
  .rating > input{
    display: none;
  }
  
  .rating > label:before{
    content: '\f005';
    font-family: FontAwesome;
    margin: 5px;
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
  }

  
  .rating > label{
    color: #ddd;
    float: right;
    cursor: pointer;
  }
  
  .rating > input:checked ~ label,
  .rating:not(:checked) > label:hover, 
  .rating:not(:checked) > label:hover ~ label{
    color: #e57809;
  }
  
  .rating > input:checked + label:hover,
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label,
  .rating > input:checked ~ label:hover ~ label{
    color: #e57809;
  }
  
  /* #star55{
    color : red;
  } */

  #post_comment{ 
    height: 2.5rem;
    width: 2.5rem;
    border: 1px solid;
    border-radius: 50%;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    margin-left: 0px;
} 
.avatar-m{height: 2.3rem !important; width: 2.3rem !important;}
.comment_text{width: calc(100% - 44px);}
 .comment_text textarea{ 
     resize: none;
     border-radius: 26px;
     padding-bottom: 2px;  
     height: 42px;
     background-color: #fff;
     font-size: initial;
     padding-left: 20px;
     padding-right: 20px;
     float: left; 
     max-height: 63px;
 }

 .post_comment_ctrl {
  float: left;
  font-size: small;
  padding-top: 4px;
  color: #8a8d8f;
}

.preserveLines {
  white-space: pre-wrap;
}

.avatar_postLink{left: 20px !important; position: relative !important;}
.post_text textarea{ 
  resize: none;
  padding-top: 12px;
  border-radius: 26px; 
  height: 50px; 
}
.post_text textarea:hover{ 
  resize: none;
  cursor: pointer;
  padding-top: 12px;
  border-radius: 26px; 
  height: 50px;
  background-color: #f5f7fa;  
}

/* notifications */

.badge_notif{background: #e91e63; position: absolute; top: 14px; padding: 4px; left: 20px; color: #fff;}

.aHover{
  border-radius: 50% !important;
  --phoenix-btn-padding-y: 0.8rem !important;
  --phoenix-btn-padding-x: 0.8rem !important;
  background-color: white !important;
}

.aHover:hover{
  border-radius: 50% !important;
  --phoenix-btn-padding-y: 0.8rem !important;
  --phoenix-btn-padding-x: 0.8rem !important;
  background-color: #dae0e8c1 !important;
}

.valueSuggestions {
  list-style: none;
  margin: 0;
  padding: 0; 
  max-height: 150px;
  overflow-y: auto;
  background: #fff;
  position: relative;
  width: 100%;
  z-index: 1000;
}

.valueSuggestions li {
  padding: 8px;
  cursor: pointer;
}

.valueSuggestions li:hover {
  background-color: #f0f0f0; 
}

@media (max-width: 768px) { /* Taille maximale pour les tablettes ou moins */
  .mobile-btn {
      font-size: 12px !important; /* Taille de la police réduite */
      padding: 5px 5px !important; /* Réduction des marges intérieures */
      min-width: 80px !important; /* Largeur minimale du bouton en version mobile */
  }
}

.mobile-btn{
  min-width: 100px;  width: auto;
}

.introElements{
  font-size: 18px !important;
  /* padding-bottom:4px !important; */
}

@media (max-width: 768px) { /* Taille maximale pour les tablettes ou moins */
  .introElements {
      font-size: 14px !important; /* Taille de la police réduite */ 
      padding-top:6px !important;
  }
  .tableStars{
    font-size: .512rem !important;
  }
   
  .smaller-text {
    font-size: 0.85rem; /* ou une autre taille */
    padding-top: .35rem !important;
  }
  
}