@import "ubuntu.css";

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(58,202,187,1); /* Adjust color and opacity as needed */
  z-index: -1;
  pointer-events: none;
}

h1big {
  font-family: Ubuntu;
  font-weight: bold;
  text-align: center;
  font-size: 2.8rem;
  word-wrap: break-word; /* Ancien standard */
  overflow-wrap: break-word; /* Nouveau standard */
  word-break: break-word; /* Compatibilité générale */
  hyphens: auto; /* Active la césure */  
  color: darkred
}

h1 {
  font-family: Ubuntu;
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem;
  color: darkred
}

h12 {
  font-family: Ubuntu;
  font-weight: bold;
  text-align: center;
  font-size: 2rem;
  color: blue
}

h2 {
  font-family: Ubuntu;
  font-size: 1.6rem;
  font-weight: bold;
  color: darkred
}

h22 {
  font-family: Ubuntu;
  font-size: 1.6rem;
  font-weight: bold;
  color: blue
}

h_err {
  font-family: Ubuntu;
  font-size: 1.4rem;
  font-weight: bold;
  color: red
}

h_success {
  font-family: Ubuntu;
  font-size: 1.4rem;
  font-weight: bold;
  color: green
}

h3 {
  font-weight: bold;
  font-family: ubuntu;
  font-size: 2.4vh;
  color: red
}
h4 {
  font-family: Ubuntu;
  font-size: 2.2vh;
  color: red
}
h5 {
  font-family: Ubuntu;
  font-size: 1.8vh;
  color: blue;
  margin-top: 0;
  margin-bottom: 0;
}
h6 {
  font-family: Ubuntu;
  font-size: 1.5vh;
  margin-top: 0;
  margin-bottom: 0;
}

input
{
  font-weight: bold;
  font-family: ubuntu;
  font-size: 1.4rem;
  type : text;
}

.large-font-input {
    font-size: 1.2rem;  /* Adjust font size as desired */
}

iframe {
  display: block; /* Ensures it behaves like a block element */
  position: relative;  /* Ensures normal positioning */
  z-index: 1;  /* Ensures it's not overlapping other elements */
  margin-bottom: 20px; /* Space below the iframe */
}

p {
  position: relative;  /* Ensures normal flow of text */
  z-index: 2;  /* Ensures text appears on top if needed */
}

select
{
  font-family: ubuntu;
  font-size: 1.8vh;
}
option
{
  font-family: ubuntu;
  font-size: 1.8vh;
}
br {
        line-height: 75%;
}
.greendot {
  height: 2vh;
  width: 2vh;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}
.reddot {
  height: 2vh;
  width: 2vh;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}
.greydot {
  height: 2vh;
  width: 2vh;
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
}

.aidebulle {
  position: relative;
  display: inline-block;
  color:blue;
  border-bottom: 1px dotted blue;
  font-weight: bold; 
  font-family: ubuntu; 
  font-size: 11pt;
}

.aidebulle .aidebulletexte {
  visibility: hidden;
  width: 200px;
  background-color: yellow;
  color: black;
  text-align: center;
  padding: 10px;
  top: -100px;
  left: -100px;
  font-family: ubuntu; 
  font-weight: normal; 
  font-size: 10pt;


  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.aidebulle:hover .aidebulletexte {
  visibility: visible;
}

.submit-button {
    box-sizing: border-box;         /* Ensures padding affects total size */
    padding: 0.6rem 2.5rem;         /* Reduced padding for less height */
    margin: 0 auto;                 /* Centered and responsive margin */
    border-radius: 5px;
    background-color: lightgray;    /* Default background color */
    color: black;
    cursor: pointer;
}

.submit-button:disabled {
    background-color: gray;
    color: lightgray;
    cursor: not-allowed;
    opacity: 0.6; /* Makes it visually "grayed out" */
}

.transparent-box {
  width: 80%;
  height: 100px;
  background-color: rgba(255, 255, 255, 0); /* Transparent background */
  padding: 10px;
  color: #000;
  font-size: 16px;
  border: none; /* No border */
  overflow: hidden; /* No scrollbars */
  resize: none; /* No resize */
}

.text-display{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;        
  font-family: Ubuntu;
  font-size: 2.4vh;
  line-height: 1.8;
  font-weight: bold;
  color: darkred;  
}

.hidden {
  display: none;
}

.summary-box {
  width: 80%;
  padding-top: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  font-family: Ubuntu;
  font-size: 1.6vh;
}

.processing-text {
    margin-left: 20vw;
    font-size: 2.4vh;
    padding: 0.5rem;
}

.progress-container {
    width: 80%;                      /* Responsive width */
    max-width: 600px;                /* Limits width on large screens */
    margin: 0 auto;                  /* Centers the container */
    background-color: #e0e0e0;       /* Background color for container */
    border-radius: 5px;
    overflow: hidden;                /* Ensures no overflow */
}

.progress-bar {
    width: 1%;                       /* Example width for progress */
    height: 20px;                    /* Fixed height */
    background-color: #4caf50;       /* Progress bar color */
    transition: width 0.3s ease;     /* Smooth transition for changes */
}

.cursor-wait {
      cursor: wait;
    }
  
.disable-clicks {
  pointer-events: none; /* Désactive tous les clics */
}

.custom-file-input {
            display: inline-block;
            position: relative;
            font-family: Ubuntu;
            font-size: 1.4rem;
            line-height: 1.8;
            font-weight: bold;
            border: 2px solid black; /* Added black border */
            margin: 0 auto;                 /* Centered and responsive margin */
            border-radius: 5px;
        }

.custom-file-input input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
}

.custom-file-input label {
    box-sizing: border-box;         /* Ensures padding affects total size */
    padding: 0.6rem 2.5rem;         /* Reduced padding for less height */
    margin: 0 auto;                 /* Centered and responsive margin */
    border-radius: 5px;
    background-color: lightgray;    /* Default background color */
    color: black;  
    text-align: center;
}

.custom-file-input label:hover {
    background-color: #0056b3;
}

.language-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-container img {
    width: 20px;
    height: 15px;
}

select.language-select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
}

select.language-select option {
    padding: 10px;
}

@media (max-width: 768px) {
    h1big {
        font-size: 1.6rem; /* Medium size for tablets */
    }
    h1 {
        font-size: 1.4rem; /* Medium size for tablets */
    }
    h12 {
        font-size: 1.4rem; /* Medium size for tablets */
    }
    h2 {
        font-size: 1.2rem; /* Medium size for tablets */
    }
    h22 {
        font-size: 1.2rem; /* Medium size for tablets */
    }    
    input {
        font-size: 1rem; /* Medium size for tablets */
    }
    .custom-file-input {
      font-size: 1rem; /* Medium size for tablets */
    }
}

@media (max-width: 576px) {
    h1big {
        font-size: 1.4rem; /* Smaller size for smartphones */
    }
    h1 {
        font-size: 1.2rem; /* Medium size for tablets */
    }
    h12 {
        font-size: 1.2rem; /* Medium size for tablets */
    }
    h2 {
        font-size: 1.1rem; /* Medium size for tablets */
    }
    h22 {
        font-size: 1.1rem; /* Medium size for tablets */
    }    
    h_err {
        font-size: 1.1rem; /* Medium size for tablets */
    }
    h_success {
        font-size: 1.1rem; /* Medium size for tablets */
    }    
    input {
        font-size: 1rem; /* Medium size for tablets */
    }
    .custom-file-input {
      font-size: 1rem; /* Medium size for tablets */
    }    
}