.my-custom-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #0A3146; 
  color: white; /* Change text color if needed */
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
}







.my-button-icon {
  display: flex; 
  align-items: center; 
  z-index: 2; /* Devant la texture */
}

.my-button-icon svg {
  fill: #fff; 
  height: var(--icon-size, 25px) !important;
  width: var(--icon-size, 25px) !important;
    z-index: 2; /* Devant la texture */
}

.my-button-text {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center; 
  margin-left:10px;
    z-index: 2; /* Devant la texture */
}


.my-custom-button:hover .my-button-text {
text-decoration: underline;
}

.my-button-info {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    display: flex;
    align-items: center;/* Centers the text vertically */
    z-index: 2; /* Devant la texture */
    margin-left: 10px;
}


.my-button-file{
    font-size: 10px; /* Adjust file name size */
    color: #fff; /* color */
    position: absolute; /* Absolute positioning */
    bottom: 5px; /* Position at the bottom */
    /*padding-left:35px;*/
    border:red solid 1px;
    min-height:10px;
    min-width:10px;
    z-index: 2; /* Devant la texture */
}

.fileName {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    font-size: 0.9em;    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2px;
    background-color: #ffffff59;
    opacity: 0;
    font-size: 10px;
    z-index: 2; /* Devant la texture */
}

.fileName .name {
  color: #000;
  padding: 1px 4px;
    z-index: 2; /* Devant la texture */
}



.buttonlogo {
    display: flex;
    right: 10px; 
    top: 50%; 
    max-width:300px;
    margin-left:10px;
    z-index: 2; /* Devant la texture */
}

.buttonlogo img {
    height: auto;
}