body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  
  .controls {
    width: calc(80%);
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Align items in a row */
    align-items: center;
    background: #f0f0f096;
  border-radius: 10px;
  }
  
  .controls input[type="file"] {
    display: none; /* Hide the default file input */
  }
  
  .controls label {
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
  }
  
  .controls button {
    background: #28a745;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .container {
    width: 80%;
    display: flex;
    max-width: 1200px;
    margin: auto;
    padding-top: 20px;
    align-items: center;
    justify-content: center;
  }
  .habillage{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width : 80%;
    align-items: center;
    margin: auto;
  }
  .entete{
    display: flex;
    justify-content: center;
  }
  .left-panel {
    flex-grow: 1;
    align-items: center;
    display: flex;
  }
  
  .image-container {
    width: 600px;
    height: 400px;
    border: 2px dashed #000;
    position: relative;
    background: #f0f0f096;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
  }
  
  #preview {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Adjust width to maintain aspect ratio */
    height: auto; /* Adjust height to maintain aspect ratio */
    display: none;
  }
  
  .hidden {
    display: none;
  }
  
  .info-wrapper {
    display: flex; /* Use Flexbox */
    flex-direction: column; /* Arrange children vertically */
    justify-content: space-evenly; /* Evenly distribute space between elements */
    align-items: center; /* Align items horizontally */
    height: inherit;
    width: inherit;
    padding: 10px;
}

  
  .color-info {
    margin-bottom: 10px;
    width: 80%;
  }
  
  .color-info input[type="text"] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
  }
  
  .color-info label {
    display: block;
    margin-bottom: 5px;
  }
  
  #browseButton {
    background: #048970;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 9px;
  }

  .file-path {
    flex-grow: 1; /* Take up remaining space */
    background: #fff;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    margin: 0 10px; /* Space between elements */
    overflow: hidden; /* Ensure the content doesn't overflow */
    white-space: nowrap; /* No wrapping of text */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    border: 1px solid #048970;
  }
  
  /* Style for the "Clear" button */
  #clearButton {
    background: #dc3545;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 22px;
  }

  #colorDisplay {
    width: 80%; /* Prend toute la largeur du conteneur parent */
    height: 100px; /* Hauteur fixe; ajustez selon le besoin */
    border: 1px solid #000; /* Optionnel: Ajoutez une bordure si nécessaire */
    box-sizing: border-box; /* S'assure que la bordure et le padding sont inclus dans la largeur/hauteur */
    padding: 10px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group .copy-icon {
    position: absolute;
    right: 5px;
    cursor: pointer;
    color: #007bff;
}

.input-group .copy-icon:hover {
    color: #0056b3;
}

.fa-copy {
    color: black; /* Set the color of the Font Awesome icons */
}

.fa-copy:hover {
    color: #0056b3; /* Optionally, change the color on hover */
}

h1,h2,h3{
    text-align: center;
}

  
  @media (max-width: 768px) {
    .controls {
        flex-direction: column;
        align-items: stretch; /* Ensure controls fill the container */
        padding: 20px 10px; /* Reduce horizontal padding on mobile */
    }

    .color-info input[type="text"] {
        width: 100%; /* Take full width on smaller screens */
        box-sizing: border-box; /* Ensure padding and border are included in width calculation */
    }


    .controls label,
    .controls button {
        margin: 10px 0; /* Add vertical margin for spacing */
        padding: 12px 15px; /* Adjust padding as necessary */
    }


    /* Ensure the image container fits within the screen, accounting for any padding */
    .image-container {
        width: calc(100% - 20px); /* Subtract any horizontal padding */
        margin-bottom: 20px;
    }

    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .left-panel {
        width: 100%; /* Full width on mobile */
    }

    .info-wrapper {
        /* Other styling specific for .info-wrapper on mobile */
        width: calc(100% - 20px); /* Adjust if there's any padding applied to the container */
        box-sizing: border-box; /* Include padding in the width calculation */
    }
    /* Adjust input and label sizes */
    .color-info input[type="text"],
    .color-info label {
        width: calc(100% - 20px); /* Adjust based on container padding */
        margin-bottom: 5px; /* Adjust margin */
    }

    /* Adjustments for image preview scaling */
    #preview {
        max-width: 100%;
        max-height: 100%;
    }

    .info-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center horizontally */
    }
}