div#errors, div#flashMessages {
    background-color: rgba(221,196,170,0.8);
    color: #bd0000;

    white-space: pre-line;
    font-weight:bold;

    position: fixed;
    bottom: 0px;
    left: 30px;
    right: 30px;
    width: calc( 100% - 60px);
    height: auto;
    margin: 6px;
    min-height: 0px;

    z-index: 10;
    float: none;
}

div#errors.ok {
    background-color: rgba(157, 197, 140, 0.69);
    color: #0c300e;
}
div#flashMessages {
   max-height: 30%;
   overflow-y: auto;
   margin-bottom: 5%;
   line-height:0px;
}

div#flashMessages div.row {
   margin: 5px; 
   position: static; 
   display: block;  
   line-height:normal;
}

div#flashMessages div.row::before, 
div#flashMessages div.row::after {
   content: none;
}

.invisible {
   display: none;
}

#dades {
   padding:5px;
   border: 0px;
   text-align: left;
}

main {
   max-width: 62em;
   margin-left: auto;
   margin-right: auto;
   padding:5px;
   border: 0px;
   text-align: center;
}

h1 {
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
}

body {
    font-family: 'Roboto', 'Titilium Web', sans-serif;
    font-size: 14px;
    font-weight: 300;
    background-color: white;
    color: black;
}

label, .acceptance .widget {
    font-weight: 400;
}

.widget {
    position: relative;
}
.widget ul {
    font-size: 12px;
    font-weight: 500;
    background-color: rgba(221,196,170,0.8);
    color: #bd0000;
    padding: 5px 15px 5px 30px;
    display:block;
    max-width: calc( 100vw - 68px - 2em );  
    position: absolute;
    top: 1em;
    z-index:10;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #bd00004d;
}

.nif .widget ul {
    left: 3.5em;
}

.name .widget ul {
    left: 3em;
}

.surname1 .widget ul {
    left: 2.5em;
}

.surname2 .widget ul {
    left: 2em;
}

.row {
  margin: 1em;
}


.row.name, .row.surname {
  display: inline-block;
  /*3 inputs per línia si hi ha lloc:
    0.33333 * (100% - (3 marges drets i esquerre d'1em - 1 padding dret i esquerra de 5 px - 2 espais entre divs de mig ex cadascun (al meu firefox :( ) ) 
    =  33%  - ( 6em - 10px - 1ex) / 3 */ 
  min-width: calc( 33% - 2em - 3px - 0.3ex );
}

@media (max-width: 706px) {
   .row.name {
       display: block;
       min-width: calc( 100% - 6em - 10px );
   }
   .row.name .widget input {
       max-width: 30em;
   }
}

.row.nif .widget input {
  max-width: 10em;
}

.row.name .widget input,
.row.surname .widget input
{
  width: calc( 100% - 16px );
}
.row.name > div,
.row.surname >  div
 {
  width: 100%;
}

.row:hover input, .row input:focus, 
.row:hover .col.label, .row:focus .col.label
{
  z-index: 20;
  position:relative;
}
.row:hover .col.label, .row:focus .col.label
{
  background: rgba(255,255,255,0.8);

}

#dades .row:hover .widget ul, #dades .row:focus .widget ul
{
    z-index: 15;
    background-color: rgba(221,196,170,0.9);
}

#dades:hover .widget ul, #dades:focus .widget ul
{
    background-color: rgba(221,196,170,0.7);
}

header div 
{
   margin-left:auto;
   margin-right:auto;
   width: 250px;
   max-width: 90vw;
}

input {
   border-color: rgb(212,212,212);
   padding: 5px;
   border-width: 3px;
   border-radius: 5px;
   border-style: solid;
   
}

.inputOk {
   border-color: rgb(212,212,212);
}

.inputError {
   border-color: red;
}

.button {
   padding: 0.6em 1.5em;
}

/* Header Styles */
.header {
   background-color: #f8f9fa;
   border-bottom: 2px solid #e0e0e0;
   padding: 20px 0;
   margin-bottom: 30px;
}

.header .col {
   text-align: center;
}

.header img {
   max-width: 100%;
   max-height: 150px;
   object-fit: contain;
   display: inline-block;
}

/* Main Content Styles - for pages extending base.html.twig */
main {
   max-width: 800px;
   margin: 0 auto 40px auto;
   padding: 20px;
   background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

main#dades {
   max-width: 62em;
   padding: 5px;
}

/* Footer Styles */
.footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 20px;
   margin-top: 40px;
   font-size: 14px;
}

/* Welcome Section */
#welcome {
   text-align: center;
   margin-bottom: 40px;
}

#welcome h1, #welcome h2 {
   font-size: 32px;
   color: #2c3e50;
   margin-bottom: 10px;
   text-transform: uppercase;
}

/* Status Section */
#status {
   text-align: center;
   padding: 20px;
   background-color: #f0f4f8;
   border-radius: 6px;
   margin-bottom: 30px;
}

#status p {
   font-size: 16px;
   line-height: 1.6;
   color: #34495e;
   margin: 10px 0;
}

/* Next Section */
#next {
   text-align: center;
   padding: 20px;
   background-color: #e8f4fd;
   border-radius: 6px;
   margin-top: 30px;
}

#next h2 {
   font-size: 24px;
   color: #2980b9;
   margin-bottom: 15px;
}

#next p {
   font-size: 15px;
   line-height: 1.6;
   color: #34495e;
}

/* Input styling for search forms */
input[type="text"], input[type="email"] {
   padding: 10px;
   border: 2px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
   transition: border-color 0.3s;
}

input[type="text"]:focus, input[type="email"]:focus {
   outline: none;
   border-color: #3498db;
}

button {
   background-color: #3498db;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s;
}

button:hover {
   background-color: #2980b9;
}

/* Table styling */
table {
   margin: 20px auto;
   border-collapse: collapse;
}

table td {
   padding: 10px;
}

table tr td:first-child {
   font-weight: bold;
   color: #555;
}

/* Link styling */
a {
   color: #3498db;
}

a:hover {
   color: #2980b9;
   text-decoration: underline;
}

/* Error/Success messages styling */
div#flashMessages, div#errors {
   border-radius: 5px;
   padding: 15px;
   margin: 10px 20px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

div#errors.ok {
   border-left: 5px solid #27ae60;
}

div#flashMessages {
   border-left: 5px solid #e74c3c;
}

/* Form styling */
.row.title {
   text-align: center;
   margin-bottom: 30px;
}

.row.title h1 {
   font-size: 28px;
   color: #2c3e50;
   margin-bottom: 15px;
}

.row.nif {
   text-align: center;
}

.row.nif .label {
   text-align: left;
   background-color: #f9f9f9;
   padding: 25px;
   border-radius: 8px;
   border: 1px solid #eee;
}

.row.nif p {
   font-size: 16px;
   line-height: 1.8;
   color: #333;
}

/* URL display styling */
#url {
   padding: 8px;
   border: 2px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
}

/* Certificate sent page styling */
h2 {
   font-size: 24px;
   color: #2c3e50;
   text-align: center;
   padding: 30px;
   background-color: #f0f4f8;
   border-radius: 8px;
}