* {
  box-sizing: border-box;
}



/*FORMS*/

.width-m-20{
    max-width:20rem;
}

.form-control:focus {
  border-color: #e0b652;
  box-shadow: 0 0 0 .25rem rgb(224 182 82);
}


.login_user{
    display: flex;
    flex-direction: column;
    align-items: center;
    color:white;
}

.input_filter{
    width:100%;
    padding: 10px;
}

.td_filter{
    padding: 0px;
}


.btn_reset_filter{
    width: min-content !important;
    padding: 5px !important;
}

.btn_reset_filter i{
    margin:0 !important;
}

.grid-container-deceased {
  display: grid;
  grid-template-areas:
    'genre genre name name name name name name parentname'
    'address address address address address  address address address tk'
    '. . . . . .  ceremonydate ceremonydate ceremonydate'
    'idiotita idiotita idiotita age age age deathdate deathdate deathdate'
    'afm afm afm curch curch curch receiptdate receiptdate receiptdate'
    'amka amka amka time time time receiptplace receiptplace receiptplace'
    'personalnumber personalnumber personalnumber thesi-tafis thesi-tafis thesi-tafis koimitirio koimitirio koimitirio '
    'sigenia sigenia sigenia sigenia sigenia sigenia sigenia sigenia sigenia';
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
}

.grid-field-genre { display:flex; justify-content: space-between; grid-area: genre; }
.grid-field-name { display:flex; justify-content: space-between; grid-area: name; }
.grid-field-parentname { display:flex; justify-content: space-between; grid-area: parentname; }
.grid-field-street { display:flex; justify-content: space-between; grid-area: street; }
.grid-field-streetnumber { display:flex; justify-content: space-between; grid-area: streetnumber; }
.grid-field-ceremonydate { display:flex; justify-content: space-between; grid-area: ceremonydate; }
.grid-field-area { display:flex; justify-content: space-between; grid-area: area; }
.grid-field-age { display:flex; justify-content: space-between; grid-area: age; }
.grid-field-deathdate { display:flex; justify-content: space-between; grid-area: deathdate; }
.grid-field-afm { display:flex; justify-content: space-between; grid-area: afm; }
.grid-field-curch { display:flex; justify-content: space-between; grid-area: curch; }
.grid-field-sigenia { display:flex; justify-content: space-between; grid-area: sigenia; } 
.grid-field-receiptdate { display:flex; justify-content: space-between; grid-area: receiptdate; }
.grid-field-amka { display:flex; justify-content: space-between; grid-area: amka; }
.grid-field-personalnumber { display:flex; justify-content: space-between; grid-area: personalnumber; }
/*.grid-field-time { display:flex; justify-content: space-between; grid-area: time; }*/
.grid-field-receiptplace { display:flex; justify-content: space-between; grid-area: receiptplace; }
.grid-field-govnumber { display:flex; justify-content: space-between; grid-area: govnumber; }
.grid-field-thesi-tafis { display:flex; justify-content: space-between; grid-area: thesi-tafis; }
.grid-field-koimitirio { display:flex; justify-content: space-between; grid-area: koimitirio; }
.grid-field-idiotita { display:flex; justify-content: space-between; grid-area: idiotita; }
.grid-field-time { display:flex; justify-content: space-between; grid-area: time; }
.grid-field-tk { display:flex; justify-content: space-between; grid-area: tk; }
.grid-field-govnumber { display:flex; justify-content: space-between; grid-area: govnumber; }
.grid-field-address { display:flex; justify-content: space-between; grid-area: address; }
.grid-field-thesi-tafis { display:flex; justify-content: space-between; grid-area: thesi-tafis; }





#deceased_address{
    width:100%;
}

input,
textarea{
   text-transform: uppercase; 
}

#deksiosi {
    text-transform: none;
}


.modal_input{
    text-transform: uppercase;
}

.toCapitalize{
    text-transform: capitalize;
}

.toLowercase{
    text-transform: lowercase;
}

/* Responsive για tablets */
/*customers Για μέγεθος οθόνης από 1400 pixels και κάτω */
@media (max-width: 1399px) {
  .modal_new_deceased_form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Δύο ίσες στήλες */
    align-items: center; /* Κεντράρει label και input */
    gap: 10px; /* Κενό μεταξύ label και input */
  }

  .modal_new_deceased_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }
  
   .modal_new_deceased_parent_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_parent_name input {
    display: grid;
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

    display: grid;
  } 
  
  .modal_new_deceased_street label {
    display: grid;
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 100%; /* Κενό από το input */
    display: grid;
  }

  .modal_new_deceased_street input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

     height:fit-content;
     display: grid;
  } 
  
  .modal_new_deceased_number label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_number input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

    height:fit-content;
  } 
  
  .modal_new_deceased_area label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_area input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

    height:fit-content;
  } 
  
    .modal_new_deceased_age label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_age input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  } 
  
    .modal_new_deceased_deathdate label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_deathdate input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

}
  .modal_new_deceased_receiptdate label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_receiptdate input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }
  
  .modal_new_deceased_receiptdate label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_receiptdate input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }
  .modal_new_deceased_receiptplace label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_receiptplace input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }  

  .modal_new_deceased_afm label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_afm input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }  
  
    .modal_new_deceased_amka label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_amka input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }  
  
  .modal_new_deceased_personal_number label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_personal_number input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }  
    .modal_new_deceased_sigenia label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_sigenia input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */

  }   
  
  
  
  
.modal_input {
    max-width:50%;
    
}   

  
}


@media (min-width: 1200px) {
    .modal_input {
        max-width:70%;
        width:70%;
        
    }
    
    #customer_email,
    #deceased_sigenia{
        width:100%;
    }
}

/* deceased - Για μέγεθος οθόνης από 600 pixels και κάτω */
@media (max-width: 600px) {
    .modal_new_deceased_form {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Δύο ίσες στήλες */
    align-items: center; /* Κεντράρει label και input */
    gap: 10px; /* Κενό μεταξύ label και input */
  }
.grid-container-deceased {
    grid-template-areas:
      'genre'
      'name'
      'parentname'
      'idiotita'
      'street'
      'streetnumber'
      'ceremonydate'
      'time'
      'deathdate'
      'receiptdate'
      'receiptplace'
      'area'
      'age'
      'afm'
      'personalnumber'
      'curch'
      'amka'
      'sigenia'
      'tk'
      'address'
      'govnumber'
      'thesi-tafis'
      'koimitirio';
}

  .modal_new_deceased_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    
  }
  
   .modal_new_deceased_parent_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_deceased_parent_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%;/* Πλήρης κάλυψη στήλης */
  } 
  
.modal_new_deceased_street label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 100%; /* Κενό από το input */
  }

    .modal_new_deceased_street input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
     max-width: 65%;/* Πλήρης κάλυψη στήλης */
     height:fit-content;
  } 
  
       .modal_new_deceased_number label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_number input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
  .modal_new_deceased_area label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_area input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
    .modal_new_deceased_age label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_age input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  } 
  
    .modal_new_deceased_deathdate label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_deathdate input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
}
  .modal_new_deceased_receiptdate label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_receiptdate input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }
  
  .modal_new_deceased_receiptplace label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_receiptplace input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }
  .modal_new_deceased_afm label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_afm input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }  
  
    .modal_new_deceased_amka label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_amka input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  } 
  
   .modal_new_deceased_personal_number label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_personal_number input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  } 
  
    .modal_new_deceased_sigenia label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_deceased_sigenia input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  } 
  
    .form_text {
    max-width: 60%;/* Βεβαιώνεται ότι τα input δεν ξεφεύγουν από τη στήλη */
    /*display: grid;*/
    height:fit-content;
      
  }
 
}
@media (max-width: 510px) {
    #deceased_name {
        max-width:66%;
        margin-left:86px;
    }
}
@media (max-width: 480px) {
    #deceased_name {
        max-width:100%;
        margin-left:15px;
    }
}


/* Για μέγεθος οθόνης από 350 pixels και κάτω */
@media (max-width: 350px) {
    .grid-container-deceased {
    grid-template-columns: 2fr; /* 1 column grid */
    grid-template-areas:
        'genre'
        'name'
        'parentname'
        'idiotita'
        'street'
        'streetnumber'
        'ceremonydate'
        'time'
        'area'
        'age'
        'deathdate'
        'afm'
        'curch'
        'receiptdate'
        'amka'
        'receiptplace'
        'sigenia'
        'tk'
        'address'
        'govnumber'
        'thesi-tafis'
        'koimitirio'
        ;
  }    
.grid-field-genre { display:flex; justify-content: space-between; grid-area: genre; }
.grid-field-name { display:grid; justify-content: centrer; justify-items: center; grid-area: name; }
.grid-field-parentname { display:grid; justify-content: centrer; justify-items: center; grid-area: parentname; }
.grid-field-street { display:grid; justify-content: centrer; justify-items: center; grid-area: street; }
.grid-field-streetnumber { display:grid; justify-content: centrer; justify-items: center; grid-area: streetnumber; }
.grid-field-ceremonydate { display:grid; justify-content: centrer; justify-items: center; grid-area: ceremonydate; }
.grid-field-area { display:grid; justify-content: centrer; justify-items: center; grid-area: area; }
.grid-field-age { display:grid; justify-content: centrer; justify-items: center; grid-area: age; }
.grid-field-deathdate { display:grid; justify-content: centrer; justify-items: center; grid-area: deathdate; }
.grid-field-afm { display:grid; justify-content: centrer; justify-items: center; grid-area: afm; }
.grid-field-curch { display:grid; justify-content: centrer; justify-items: center; grid-area: curch; }
.grid-field-receiptdate { display:grid; justify-content: centrer; justify-items: center; grid-area: receiptdate; }
.grid-field-amka { display:grid; justify-content: centrer; justify-items: center; grid-area: amka; }
.grid-field-personalnumber { display:grid; justify-content: centrer; justify-items: center; grid-area: personalnumber; }
.grid-field-sigenia { display:grid; justify-content: centrer; justify-items: center; grid-area: sigenia; }
/*.grid-field-time { display:grid; justify-content: centrer; justify-items: center; grid-area: time; }*/
.grid-field-receiptplace { display:grid; justify-content: centrer; justify-items: center; grid-area: receiptplace; }
.grid-field-tk { display:grid; justify-content: centrer; justify-items: center; grid-area: tk; }
.grid-field-address { display:grid; justify-content: centrer; justify-items: center; grid-area: address; }
.grid-field-govnumber { display:grid; justify-content: centrer; justify-items: center; grid-area: govnumber; }
.grid-field-koimitirio { display:grid; justify-content: centrer; justify-items: center; grid-area: koimitirio; }
.grid-field-thesi-tafis { display:grid; justify-content: centrer; justify-items: center; grid-area: thesi-tafis; }
.grid-field-idiotita { display:grid; justify-content: centrer; justify-items: center; grid-area: idiotita; }
.grid-field-time { display:grid; justify-content: centrer; justify-items: center; grid-area: time; }
}


.grid-container-mnimosino {
  display: grid;
  grid-template-areas:
    'labelname name name name name name name name labelBtn'
    '. searchname searchname searchname searchname searchname searchname searchname searchname'
    'labelthanonaddress thanonaddress thanonaddress thanonaddress thanonaddress thanonaddress thanonaddress thanonaddress thanonaddress'
    'labelnaos naos naos naos naos labeltime time labeldate date '
    'labeldeksiosi deksiosi deksiosi deksiosi deksiosi deksiosi deksiosi deksiosi deksiosi'
    'labeltoixokoliseis toixokoliseis toixokoliseis toixokoliseis toixokoliseis toixokoliseis toixokoliseis toixokoliseis toixokoliseis';
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
}

.grid-field-labelname {  grid-area: labelname; }
.grid-field-name {  grid-area: name; }
.grid-field-labelBtn {  grid-area: labelBtn; }
.grid-field-searchname {  grid-area: searchname; }
.grid-field-labelnaos {  grid-area: labelnaos; }
.grid-field-naos {  grid-area: naos; }
.grid-field-labeldate {  grid-area: labeldate; }
.grid-field-date {  grid-area: date; }
.grid-field-labeltime {  grid-area: labeltime; }
.grid-field-time {  grid-area: time; }
.grid-field-labeltoixokoliseis {  grid-area: labeltoixokoliseis; }
.grid-field-toixokoliseis {  grid-area: toixokoliseis; }
.grid-field-labelthanonaddress {  grid-area: labelthanonaddress; }
.grid-field-thanonaddress {  grid-area: thanonaddress; }
.grid-field-labeldeksiosi {  grid-area: labeldeksiosi; }
.grid-field-deksiosi {  grid-area: deksiosi; }




.grid-container-customer {
  display: grid;
  grid-template-areas:
    'cname cname cname cname cname cname cname cparentname cparentname'
    'cphone cphone cphone cmobile cmobile cmobile cemail cemail cemail'
    'caddress caddress caddress caddress caddress caddress caddress caddress caddress-same'
    'cadt cadt cadt cafm cafm cafm cdoy cdoy ctk'
    'cpersonalnumber cpersonalnumber cpersonalnumber . . . . . .'
    'ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment';
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
}


.grid-field-cname { display:flex; justify-content: space-between; grid-area: cname; }
.grid-field-cparentname { display:flex; justify-content: space-between; grid-area: cparentname; }
.grid-field-cphone { display:flex; justify-content: space-between; grid-area: cphone; }
.grid-field-cmobile { display:flex; justify-content: space-between; grid-area: cmobile; }
.grid-field-cemail { display:flex; justify-content: space-between; grid-area: cemail; }
.grid-field-ccomment { display:flex; justify-content: space-between; grid-area: ccomment; }
.grid-field-caddress-same { display:flex; justify-content: space-between; grid-area: caddress-same; }
.grid-field-carea { display:flex; justify-content: space-between; grid-area: carea; }
.grid-field-cemail { display:flex; justify-content: space-between; grid-area: cemail; }
.grid-field-caddress { display:flex; justify-content: space-between; grid-area: caddress; }
.grid-field-cadt { display:flex; justify-content: space-between; grid-area: cadt; }
.grid-field-cafm { display:flex; justify-content: space-between; grid-area: cafm; }
.grid-field-cpersonalnumber { display:flex; justify-content: space-between; grid-area: cpersonalnumber; }
.grid-field-cdoy { display:flex; justify-content: space-between; grid-area: cdoy; }
.grid-field-ctk { display:flex; justify-content: space-between; grid-area: ctk; }
.grid-field-ccomment { display:flex; justify-content: space-between; grid-area: ccomment; }


.grid-container-customer-sintaksi {
  display: grid;
  grid-template-areas:
    'cname cname cname cname cname cname cname cparentname cparentname '
    'cphone cphone cphone cmobile cmobile cmobile cemail cemail cemail'
    'caddress caddress caddress caddress caddress caddress caddress-same  caddress-same ctk'
    'cadt cadt cadt cafm cafm  cafm cpersonalnumber cpersonalnumber cpersonalnumber '
    'cdoy cdoy cdoy . . . . . .'
    'ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment'
    ;
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
}


.grid-field-cname-sintaksi { display:flex; justify-content: space-between; grid-area: cname; }
.grid-field-cparentname-sintaksi { display:flex; justify-content: space-between; grid-area: cparentname; }
.grid-field-cphone-sintaksi { display:flex; justify-content: space-between; grid-area: cphone; }
.grid-field-cmobile-sintaksi { display:flex; justify-content: space-between; grid-area: cmobile; }
.grid-field-cemail-sintaksi { display:flex; justify-content: space-between; grid-area: cemail; }
.grid-field-caddress-same-sintaksi { display:flex; justify-content: space-between; grid-area: caddress-same; }
.grid-field-carea-sintaksi { display:flex; justify-content: space-between; grid-area: carea; }
.grid-field-cemail-sintaksi { display:flex; justify-content: space-between; grid-area: cemail; }
.grid-field-caddress-sintaksi { display:flex; justify-content: space-between; grid-area: caddress; }
.grid-field-cadt-sintaksi { display:flex; justify-content: space-between; grid-area: cadt; }
.grid-field-cpersonalnumber-sintaksi { display:flex; justify-content: space-between; grid-area: cpersonalnumber; }
.grid-field-cafm-sintaksi { display:flex; justify-content: space-between; grid-area: cafm; }
.grid-field-cdoy-sintaksi { display:flex; justify-content: space-between; grid-area: cdoy; }
.grid-field-ctk-sintaksi { display:flex; justify-content: space-between; grid-area: ctk; }
.grid-field-ccomment-sintaksi { display:flex; justify-content: space-between; grid-area: ccomment; }
.grid-field-cbirthdate-sintaksi{ display:flex; justify-content: space-between; grid-area: cbirthdate; }
.grid-field-cforeas-sintaksi{ display:flex; justify-content: space-between; grid-area: cforeas; }
.grid-field-camka-sintaksi{ display:flex; justify-content: space-between; grid-area: camka; }
.grid-field-catdate-sintaksi{ display:flex; justify-content: space-between; grid-area: catdate; }
.grid-field-cadtarxi-sintaksi{ display:flex; justify-content: space-between; grid-area: cadtarxi; }
.grid-field-cmothername-sintaksi{ display:flex; justify-content: space-between; grid-area: cmothername; }



.grid-container-sintaxi-details {
    display: grid;
    grid-template-areas:
      'labelmesokatathesis mesokatathesis mesokatathesis mesokatathesis . labeldatekatathesis datekatathesis datekatathesis datekatathesis'
      'lablelipalilos ipalilos ipalilos ipalilos . labelprotokoloeksodon protokoloeksodon protokoloeksodon protokoloeksodon'
      'labeldatepliromis datepliromis datepliromis datepliromis . labelcourier courier courier courier'
      'labelparalavisintaksia paralavisintaksia paralavisintaksia paralavisintaksia . labelparalavisintaksiadate paralavisintaksiadate paralavisintaksiadate paralavisintaksiadate'
      'labelparalavisintaksib paralavisintaksib paralavisintaksib paralavisintaksib . labelparalavisintaksibdate paralavisintaksibdate paralavisintaksibdate paralavisintaksibdate'
      'labelprotokolosintaksia protokolosintaksia protokolosintaksia protokolosintaksia . labelprotokolosintaksiadate protokolosintaksiadate protokolosintaksiadate protokolosintaksiadate'
      'labelprotokolosintaksib protokolosintaksib protokolosintaksib protokolosintaksib . labelprotokolosintaksibdate protokolosintaksibdate protokolosintaksibdate protokolosintaksibdate'
      'ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment';
    gap: 10px;
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
  }
  
  
  .grid-field-labelmesokatathesis {  grid-area: labelmesokatathesis; }
  .grid-field-mesokatathesis {  grid-area: mesokatathesis; }
  .grid-field-labeldatekatathesis {  grid-area: labeldatekatathesis; }
  .grid-field-datekatathesis {  grid-area: datekatathesis; }
  .grid-field-lablelipalilos {  grid-area: lablelipalilos; }
  .grid-field-ipalilos {  grid-area: ipalilos; }
  .grid-field-labelprotokoloeksodon {  grid-area: labelprotokoloeksodon; }
  .grid-field-protokoloeksodon {  grid-area: protokoloeksodon; }
  .grid-field-labeldatepliromis {  grid-area: labeldatepliromis; }
  .grid-field-datepliromis {  grid-area: datepliromis; }
  .grid-field-labelcourier {  grid-area: labelcourier; }
  .grid-field-courier {  grid-area: courier; }
  .grid-field-labelparalavisintaksia {  grid-area: labelparalavisintaksia; }
  .grid-field-paralavisintaksia {  grid-area: paralavisintaksia; }
  .grid-field-labelparalavisintaksib {  grid-area: labelparalavisintaksib; }
  .grid-field-paralavisintaksib {  grid-area: paralavisintaksib; }
  .grid-field-labelprotokolosintaksia {  grid-area: labelprotokolosintaksia; }
  .grid-field-protokolosintaksia {  grid-area: protokolosintaksia; }
  .grid-field-labelprotokolosintaksib {  grid-area: labelprotokolosintaksib; }
  .grid-field-protokolosintaksib {  grid-area: protokolosintaksib; }
  .grid-field-ccomment-sintakseos { display:flex; justify-content: space-between; grid-area: ccomment; }
  .grid-field-labelparalavisintaksiadate {  grid-area: labelparalavisintaksiadate; }
  .grid-field-paralavisintaksiadate {  grid-area: paralavisintaksiadate; }
  .grid-field-labelparalavisintaksibdate {  grid-area: labelparalavisintaksibdate; }
  .grid-field-paralavisintaksibdate {  grid-area: paralavisintaksibdate; }
  .grid-field-labelprotokolosintaksiadate {  grid-area: labelprotokolosintaksiadate; }
  .grid-field-protokolosintaksiadate {  grid-area: protokolosintaksiadate; }
  .grid-field-labelprotokolosintaksibdate {  grid-area: labelprotokolosintaksibdate; }
  .grid-field-protokolosintaksibdate {  grid-area: protokolosintaksibdate; }
  
  
  
.grid-container-eksoda-details {
    display: grid;
    grid-template-areas:
      'labelapl apl apl apl . labelgov gov gov gov'
      'labelasfaliathanon asfaliathanon asfaliathanon asfaliathanon . lablelposo poso poso poso'
      'labeliban iban iban iban . labelbank bank bank bank'
      'labelmesokatathesis mesokatathesis mesokatathesis mesokatathesis . labelsubmitdate submitdate submitdate submitdate'
      'labelprotokolo protokolo protokolo protokolo . labelpliromidate pliromidate pliromidate pliromidate';  
    gap: 10px;
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
  }
  
  
  .grid-field-labelapl {  grid-area: labelapl; }
  .grid-field-apl {  grid-area: apl; }
  .grid-field-labelgov {  grid-area: labelgov; }
  .grid-field-gov {  grid-area: gov; }
  .grid-field-lablelposo {  grid-area: lablelposo; }
  .grid-field-poso {  grid-area: poso; }
  .grid-field-labeliban {  grid-area: labeliban; }
  .grid-field-iban {  grid-area: iban; }
  .grid-field-labelbank {  grid-area: labelbank; }
  .grid-field-bank {  grid-area: bank; }
  .grid-field-labelmesokatathesis {  grid-area: labelmesokatathesis; }
  .grid-field-mesokatathesis {  grid-area: mesokatathesis; }
  .grid-field-labelsubmitdate {  grid-area: labelsubmitdate; }
  .grid-field-submitdate {  grid-area: submitdate; }
  .grid-field-labelprotokolo {  grid-area: labelprotokolo; }
  .grid-field-protokolo {  grid-area: protokolo; }
  .grid-field-labelpliromidate {  grid-area: labelpliromidate; }
  .grid-field-pliromidate {  grid-area: pliromidate; }
  .grid-field-labelasfaliathanon {  grid-area: labelasfaliathanon; }
  .grid-field-asfaliathanon {  grid-area: asfaliathanon; }  
  
  
.grid-container-customer-sintakseos {
  display: grid;
  grid-template-areas:
    'cname cname cname cname cname cname cname cname cname'
    'cparentname cparentname cparentname cmothername cmothername cmothername cweddingdate cweddingdate cweddingdate'
    'cphone cphone cphone cmobile cmobile cmobile cemail cemail cemail'
    'caddress caddress caddress caddress caddress caddress caddress-same  caddress-same ctk'
    'cforeas cforeas cforeas cadt cadt cadt catdate catdate catdate '
    'camka camka camka cafm cafm cafm cdoy cdoy cdoy '
    'cpersonalnumber cpersonalnumber cpersonalnumber . . . . . .'
    'ciban ciban ciban ciban ciban ciban cbank cbank cbank ';
    /*'ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment ccomment';*/
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
}


.grid-field-cname-sintakseos { display:flex; justify-content: space-between; grid-area: cname; }
.grid-field-cparentname-sintakseos { display:flex; justify-content: space-between; grid-area: cparentname; }
.grid-field-cphone-sintakseos { display:flex; justify-content: space-between; grid-area: cphone; }
.grid-field-cmobile-sintakseos { display:flex; justify-content: space-between; grid-area: cmobile; }
.grid-field-cemail-sintakseos { display:flex; justify-content: space-between; grid-area: cemail; }

.grid-field-caddress-same-sintakseos { display:flex; justify-content: space-between; grid-area: caddress-same; }

.grid-field-cemail-sintakseos { display:flex; justify-content: space-between; grid-area: cemail; }
.grid-field-caddress-sintakseos { display:flex; justify-content: space-between; grid-area: caddress; }
.grid-field-cadt-sintakseos { display:flex; justify-content: space-between; grid-area: cadt; }
.grid-field-cafm-sintakseos { display:flex; justify-content: space-between; grid-area: cafm; }
.grid-field-cdoy-sintakseos { display:flex; justify-content: space-between; grid-area: cdoy; }
.grid-field-ctk-sintakseos { display:flex; justify-content: space-between; grid-area: ctk; }
/*.grid-field-ccomment-sintakseos { display:flex; justify-content: space-between; grid-area: ccomment; }*/

.grid-field-cforeas-sintakseos{ display:flex; justify-content: space-between; grid-area: cforeas; }
.grid-field-camka-sintakseos{ display:flex; justify-content: space-between; grid-area: camka; }
.grid-field-cpersonalnumber-sintakseos{ display:flex; justify-content: space-between; grid-area: cpersonalnumber; }
.grid-field-catdate-sintakseos{ display:flex; justify-content: space-between; grid-area: catdate; }

.grid-field-cweddingdate-sintakseos{ display:flex; justify-content: space-between; grid-area: cweddingdate; }

.grid-field-cmothername-sintakseos{ display:flex; justify-content: space-between; grid-area: cmothername; }
.grid-field-cbank-sintakseos{ display:flex; justify-content: space-between; grid-area: cbank; }
.grid-field-ciban-sintakseos{ display:flex; justify-content: space-between; grid-area: ciban; }
  
  

.grid-container-deceased-sintaksi {
  display: grid;
  grid-template-areas:
    'genre genre name name name name name name name'
    'parentname parentname parentname parentname . mitronimo mitronimo mitronimo mitronimo'
    'address address address address address  address address address tk'
    'deathdate deathdate deathdate afm afm afm amka amka amka'
    'doy doy doy  eggrafa eggrafa eggrafa asfaleia asfaleia asfaleia'
    'adt adt adt adtdate adtdate adtdate personalnumber personalnumber personalnumber';
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
}

.grid-field-genre { display:flex; justify-content: space-between; grid-area: genre; }
.grid-field-name { display:flex; justify-content: space-between; grid-area: name; }
.grid-field-mitronimo { display:flex; justify-content: space-between; grid-area: mitronimo; }
.grid-field-doy { display:flex; justify-content: space-between; grid-area: doy; }
//.grid-field-dimotis { display:flex; justify-content: space-between; grid-area: dimotis; }

.grid-field-adt { display:flex; justify-content: space-between; grid-area: adt; }
.grid-field-adtdate { display:flex; justify-content: space-between; grid-area: adtdate; }

.grid-field-asfaleia { display:flex; justify-content: space-between; grid-area: asfaleia; }
.grid-field-eggrafa { display:flex; justify-content: space-between; grid-area: eggrafa; }
.grid-field-deathdate { display:flex; justify-content: space-between; grid-area: deathdate; }
.grid-field-afm { display:flex; justify-content: space-between; grid-area: afm; }
.grid-field-amka { display:flex; justify-content: space-between; grid-area: amka; }
.grid-field-personalnumber { display:flex; justify-content: space-between; grid-area: personalnumber; }

.grid-field-tk { display:flex; justify-content: space-between; grid-area: tk; }
.grid-field-address { display:flex; justify-content: space-between; grid-area: address; }
  

/*customers Για μέγεθος οθόνης από 1200 pixels και κάτω */
@media (max-width: 1200px) {
  .modal_new_customer_form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Δύο ίσες στήλες */
    align-items: center; /* Κεντράρει label και input */
    gap: 10px; /* Κενό μεταξύ label και input */
  }

  .modal_new_customer_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
  }
  
   .modal_new_customer_parent_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_parent_name input {
    display: grid;
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%;/* Πλήρης κάλυψη στήλης */
    display: grid;
  } 
  
     .modal_new_customer_mobile label {
    display: grid;
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 100%; /* Κενό από το input */
    display: grid;
  }

  .modal_new_customer_mobile input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
     width: 100%;/* Πλήρης κάλυψη στήλης */
     height:fit-content;
     display: grid;
  } 
  
       .modal_new_customer_phone label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_phone input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
  .modal_new_customer_cross label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_cross input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
    .modal_new_customer_address label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_address input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
  } 
  
    .modal_new_customer_adt label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_adt input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
}
  .modal_new_customer_afm label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_afm input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
  }
  
  .modal_new_customer_doy label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_doy input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
  }
  .modal_new_customer_tk label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_th input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    width: 100%; /* Πλήρης κάλυψη στήλης */
  }  

  /* Για φόρμες με την τάξη form_text */
  .form_text {
    width: 100%; /* Βεβαιώνεται ότι τα input δεν ξεφεύγουν από τη στήλη */
    height:fit-content;
      
  }
}




/* Για μέγεθος οθόνης από 600 pixels και κάτω */
@media (max-width: 600px) {
    .modal_new_customer_form {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Δύο ίσες στήλες */
    align-items: center; /* Κεντράρει label και input */
    gap: 10px; /* Κενό μεταξύ label και input */
  }
.grid-container-customer {
    grid-template-areas:
      'cname'
      'cparentname'
      'cphone'
      'cmobile'
      'cemail'
      'ccomment'
      'caddress-same'
      'carea'
      'caddress'
      'cadt'
      'cafm'
      'cpersonalnumber'
      'cdoy'
      'ctk'
      ;
}

.grid-container-customer-sintaksi {
    grid-template-areas:
      'cname'
      'cbirthdate'
      'cparentname'
      'cmothername'
      'cphone'
      'cmobile'
      'cemail'
      'caddress-same'
      'caddress'
      'ctk' 
      'cadt'
      'cadtarxi'
      'cweddingdate'
      'cafm'
      'cpersonalnumber'
      'cdoy'
      'cforeas'
      'ccomment'
      ;
}

.grid-container-customer-sintakseos {
    grid-template-areas:
      'cname'
      'cparentname'
      'cmothername'
      'cphone'
      'cmobile'
      'cemail'
      'caddress-same'
      'caddress'
      'ctk' 
      'cadt'
      'catdate'
      'cweddingdate'
      'camka'
      'cafm'
      'cpersonalnumber'
      'cdoy'
      'ciban'
      'cbank'
      'cforeas'
      'ccomment'
      ;
}

.grid-container-deceased-sintaksi{
    grid-template-areas:
      'genre'
      'name'
      'parentname'
      'mitronimo'
      'address'
      'tk'
      'deathdate'
      'afm'
      'amka'
      'personalnumber'
      'doy'
      'adt'
      'adtdate'
      'asfaleia'
      'eggrafa'
      
      ;
}


.grid-container-mnimosino {
    grid-template-areas:
      'labelname name name name labelBtn'
      '. searchname searchname searchname .'
      'labelthanonaddress thanonaddress thanonaddress thanonaddress .'
      'labelnaos naos naos naos .'
      'labeldate date date date .'
      'labeltime time time time .'
      'labeldeksiosi deksiosi deksiosi deksiosi .'
      'labeltoixokoliseis toixokoliseis toixokoliseis toixokoliseis .'
      
      ;
}

.grid-container-sintaxi-details {
    grid-template-areas:
      'labelmesokatathesis mesokatathesis mesokatathesis mesokatathesis mesokatathesis'
      'labeldatekatathesis datekatathesis datekatathesis datekatathesis datekatathesis'
      'lablelipalilos ipalilos ipalilos ipalilos ipalilos'
      'labelprotokoloeksodon protokoloeksodon protokoloeksodon protokoloeksodon protokoloeksodon'
      'labeldatepliromis datepliromis datepliromis datepliromis datepliromis'
      'labelcourier courier courier courier courier'
      'labelparalavisintaksia paralavisintaksia paralavisintaksia paralavisintaksia paralavisintaksia'
      'labelparalavisintaksiadate paralavisintaksiadate paralavisintaksiadate paralavisintaksiadate paralavisintaksiadate'
      'labelparalavisintaksib paralavisintaksib paralavisintaksib paralavisintaksib paralavisintaksib'
      'labelparalavisintaksibdate paralavisintaksibdate paralavisintaksibdate paralavisintaksibdate paralavisintaksibdate'
      'labelprotokolosintaksia protokolosintaksia protokolosintaksia protokolosintaksia protokolosintaksia'
      'labelprotokolosintaksiadate protokolosintaksiadate protokolosintaksiadate protokolosintaksiadate protokolosintaksiadate'
      'labelprotokolosintaksib protokolosintaksib protokolosintaksib protokolosintaksib protokolosintaksib'
      'labelprotokolosintaksibdate protokolosintaksibdate protokolosintaksibdate protokolosintaksibdate protokolosintaksibdate'
      'ccomment ccomment ccomment ccomment ccomment'
      
      ;
}

.grid-container-eksoda-details {
    grid-template-areas:
      'labelapl apl apl apl apl'
      'labelgov gov gov gov gov'
      'labelasfaliathanon asfaliathanon asfaliathanon asfaliathanon asfaliathanon'
      'lablelposo poso poso poso poso'
      'labeliban iban iban iban iban'
      'labelbank bank bank bank bank'
      'labelmesokatathesis mesokatathesis mesokatathesis mesokatathesis mesokatathesis'
      'labelsubmitdate submitdate submitdate submitdate submitdate'
      'labelprotokolo protokolo protokolo protokolo protokolo'
      'labelpliromidate pliromidate pliromidate pliromidate pliromidate'
      
      
      ;
}

  .modal_new_customer_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    
  }
  
   .modal_new_customer_parent_name label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_parent_name input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%;/* Πλήρης κάλυψη στήλης */
  } 
  
  .modal_new_customer_mobile label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 100%; /* Κενό από το input */
  }

  .modal_new_customer_mobile input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
     max-width: 65%;/* Πλήρης κάλυψη στήλης */
     height:fit-content;
  } 
  
       .modal_new_customer_phone label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_phone input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
  .modal_new_customer_cross label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_cross input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
    height:fit-content;
  } 
  
    .modal_new_customer_address label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_address input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  } 
  
    .modal_new_customer_adt label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_adt input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
}
  .modal_new_customer_afm label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_afm input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }
  
  .modal_new_customer_doy label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_doy input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }
  .modal_new_customer_tk label {
    grid-column: 1 / 2; /* Τοποθέτηση στη πρώτη στήλη */
    display: grid;
    text-align: right; /* Στοίχιση δεξιά */
    padding-right: 10px; /* Κενό από το input */
  }

  .modal_new_customer_th input {
    grid-column: 2 / 3; /* Τοποθέτηση στη δεύτερη στήλη */
    display: grid;
    max-width: 65%; /* Πλήρης κάλυψη στήλης */
  }  
  
    .form_text {
    /*max-width: 40%;*//* Βεβαιώνεται ότι τα input δεν ξεφεύγουν από τη στήλη */
    /*display: grid;*/
    height:fit-content;
      
  }
 .modal_input_afm {
     max-width:100%;
 }
}
@media (max-width: 510px) {
    .cust_name {
        max-width:66%;
        margin-left:85px;
    }
}
@media (max-width: 480px) {
    .cust_name {
        max-width:100%;
        margin-left:15px; 
    }
}

@media (max-width: 470px) {
 .modal_input_afm {
     max-width:80%;
 }
}

/* Για μέγεθος οθόνης από 350 pixels και κάτω */
@media (max-width: 350px) {
.grid-container-customer {
    grid-template-columns: 1fr; /* 1 column grid */
    grid-template-areas:
      'cname'
      'cparentname'
      'cphone'
      'cmobile'
      'cemail'
      'ccomment'
      'caddress-same'
      'carea'
      'caddress'
      'cadt'
      'cafm'
      'cpersonalnumber'
      'cdoy'
      'ctk'
      ;
  }    
.grid-field-cname { display:grid; justify-content: center; justify-items: center; grid-area: cname; }
.grid-field-cparentname { display:grid; justify-content: center; justify-items: center; grid-area: cparentname; }
.grid-field-cphone { display:grid; justify-content: center; justify-items: center; grid-area: cphone; }
.grid-field-cmobile { display:grid; justify-content: center; justify-items: center; grid-area: cmobile; }
.grid-field-cemail { display:grid; justify-content: center; justify-items: center; grid-area: cemail; }
.grid-field-ccomment { display:grid; justify-content: center; justify-items: center; grid-area: ccomment; }
.grid-field-caddress-same { display:grid; justify-content: center; justify-items: center; grid-area: caddress-same; }
.grid-field-carea { display:grid; justify-content: center; justify-items: center; grid-area: carea; }

.grid-field-caddress { display:grid; justify-content: center; justify-items: center; grid-area: caddress; }
.grid-field-cadt { display:grid; justify-content: center; justify-items: center; grid-area: cadt; }
.grid-field-cafm { display:grid; justify-content: center; justify-items: center; grid-area: cafm; }
.grid-field-cpersonalnumber { display:grid; justify-content: center; justify-items: center; grid-area: cpersonalnumber; }
.grid-field-cdoy { display:grid; justify-content: center; justify-items: center; grid-area: cdoy; }
.grid-field-ctk { display:grid; justify-content: center; justify-items: center; grid-area: ctk; }
}

/*@media (max-width: 378px){
    .grid-container-customer{font-size: 12px;}
    .grid-field-caddress {font-size: 10px;}
    .grid-field-cphone {font-size: 13.5px;}
} */



    

.border_one_solid{
    border: 1px solid;
}

.margin_zero{
    margin:0px !important; 
}



/*.container{*/
/*    max-width: 1200px;*/
/*    margin: 50 200px;*/
/*    height:85%;*/
/*    background:aliceblue;*/
/*    border-radius: 5px;*//* Στοιχεία Αγγελητηρίων*/



.family_group_input{
    margin-bottom:5px;
    margin-left:10px;
}

#family_members {
    display: flex;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
/*}*/

.container {
    /* max-width: 1200px; */
    /*margin: 2% auto; */
    height: 95%;
    /*background: aliceblue;*/
    /*background: #2946a4;;*/
    background:white;
    border-radius: 5px;
    overflow: auto;
    /*padding:0;*/
}

/* Στοιχεία Αγγελητηρίων*/
.grid-container-family { background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}
.family_group_input {
    margin-bottom: 5px;
    
}

.h3, h3 {
    text-align: center;
}
/*
@media only screen and (max-width:600px){
    .h3, h3 {margin-left:60px;}
} 
*/

#family_members {
    display: flex;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

#familyNames {
    flex-wrap: wrap;
}

 .h3 {
    justify-content: center;
}

.modalfam,
.modalfam + div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.modalfam label,
.modalfam + div label {
    width: 30%;
    min-width: 100px;
    margin-right: 10px;
    text-align: right;
}

.modalfam input,
.modalfam + div input {
    flex: 1;
    padding: 0;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modalfam .btn {
    margin-left: 10px; /* Απόσταση από το input */
}

@media screen and (max-width: 488px) {
    .namemodal  {
        /*flex-dirextion:row; */
        flex-wrap:wrap;
        align-content: stretch;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    
}

/* Τοποθέτηση, Δεξίωση, Πούλμαν, Κοιμητήριο, Τοιχοκολήσεις */
.grid-container-extras {
    display: flex;
    flex-wrap: wrap; 
    background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}

.grid-container-extras .grid-field-topothetisi,
.grid-container-extras .grid-field-deksiosi,
.grid-container-extras .grid-field-bus,
.grid-container-extras .grid-field-koimitirio,
.grid-container-extras .grid-field-toixokoliseis,
.grid-container-extras .grid-field-comment-aggelitiria{
    display: flex; 
    width: 100%; 
    margin-bottom: 10px; 
    justify-content: space-between;
    align-items:center;
}

.grid-container-extras .grid-field-topothetisi label,
.grid-container-extras .grid-field-deksiosi label,
.grid-container-extras .grid-field-bus label,
.grid-container-extras .grid-field-koimitirio label,
.grid-container-extras .grid-field-toixokoliseis label,
.grid-container-extras .grid-field-comment-aggelitiria label{
    /*display: flex; */
    /*align-items: center; */
    /*justify-content: flex-start; */
    /*width: 40%; */
    /*margin-right: 10px; */
}

.grid-container-extras .grid-field-topothetisi input,
.grid-container-extras .grid-field-deksiosi input,
.grid-container-extras .grid-field-bus input,
.grid-container-extras .grid-field-koimitirio input,
.grid-container-extras .grid-field-toixokoliseis input ,
.grid-container-extras .grid-field-comment-aggelitiria input {
    width: 75%; 
    padding: 2px; 
    /*margin-right:450px;*/
}

/*Τέλος Τοποθέτηση, Δεξίωση, Πούλμαν, Κοιμητήριο, Τοιχοκολήσεις */

/* Γενικά στυλ για το fieldset και τα περιεχόμενα */

/* Fieldset styling */
fieldset {
    padding: 15px;
    border: 1px solid #ccc;
    margin-top: 20px;
    color:black;
    /*color:white; */
} 

@media only screen and (max-width:900px){
    fieldset {
        padding: 0px;
    }

}

legend.center {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color:#e0b652;
} 

/* Στεφάνια */
.grid-container-wreath {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}
/*Αντί στεφάνου checkbox*/
#checknowearth {
    margin-left: 15px;
}

#fa-trash {
    align-items: flex-end; 
}

/*#inputWreath {*/
/*    margin-left: 15px;*/
/*}*/
/* Στοίχιση του div που περιέχει το label, το input και το button */
.stefania   {
    align-items: center;
    margin-bottom: 10px;
}

.family_group label {
    margin-right: 10px;
    white-space: nowrap;
}

.family_group input.form_text {
    flex: 1;
    padding: 5px;
    margin-right: 10px; /* Απόσταση ανάμεσα στο input και το button */
}

/* Στυλ για την περιοχή με τα στεφάνια (wreaths) */
.stefania {
    margin-top: 15px;
}

/* Στυλ για τη λίστα στεφανιών */
.stefania  {
    list-style-type: none;
    padding: 0;
}

.stefania  ul li {
    margin-bottom: 5px;

}
/* Στυλ για το div του στεφανιού */
.stefania  {

    margin-left: 165px;
    margin-top: 10px;
}


.dikaiomata-stefania input{
    width:5rem;
}




.grid-header0 {
        display: grid;
    grid-template-columns: 2fr 1fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
     padding-left: 50px;
}
.grid-header0 div {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 0.5rem;
}



/* Υπηρεσίες */
.grid-container-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}

.grid-list-services {
    display: grid;
    grid-template-columns: 0.1fr 12fr 3fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
}

.dapanes-header{
    display: grid;
    grid-template-columns:  12fr 3fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
}

.dapanes-totals{
    display: grid;
    grid-template-columns:  12fr 3fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
}

.services0 {list-style: decimal;padding-left: 0}

.grid-list-services div,
.dapanes-totals div{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 0.5rem;
}

@media only screen and (max-width:510px){
    .grid-list-services div,
    .dapanes-totals div{
        /*align-items: flex-start;*/
        padding:0;
    }
    
    .type1, 
    .type2 {
        margin:3px 3px;
    }

}


.dapanes-header div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

/* Προσθήκη κάθετου border */
.grid-list-services div:nth-child(2),
.grid-list-services div:nth-child(3) {
    border-left: 1px solid #ccc;
}

.grid-list-services div:nth-child(4) {
    border-left: 1px solid #ccc;
}

.grid-list-services label ,
.dapanes-totals label{
    /*font-weight: bold; */
    text-align: left;
    white-space: pre-wrap;
    font-size: 1em;
    width:100%;
}
@media screen and (max-width: 1399px) {
.grid-list-services input[type="text"] {max-width: fit-content;}
.dapanes-totals input[type="text"] {max-width: fit-content;}
    }
@media screen and (max-width: 680px) {
.services0 {padding-left: 0}
.grid-header0 {padding-left: 0}

.grid-list-services input[type="text"] {
    width: 100%;
    max-width: 400px;
}

.dapanes-totals input[type="text"] {
    width: 100%;
    max-width: 250px;
}

.grid-list-services input[type="checkbox"] {
    margin-left: auto;
}

.dapanes-totals input[type="checkbox"] {
    margin-left: auto;
}
    }
    

/* Πληρωμές */
.grid-container-pliromes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}

.grid-list-pliromes {
    background-color:#ddd;
    display: grid;
    grid-template-columns: 2fr 1fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
}
.pliromes0 {padding-left: 0}
.grid-list-pliromes div {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.2rem 0.5rem;
}
.grid-list-pliromes label {
    margin-left:15px;
}
/* Προσθήκη κάθετου border */
.grid-list-pliromes div:nth-child(2),
.grid-list-pliromes div:nth-child(3) {
    border-left: 1px solid #ccc;
}

.grid-list-pliromes div:nth-child(4) {
    border-left: 1px solid #ccc;
}

.grid-list-pliromes label {
    /*font-weight: bold; */
    text-align: left;
    white-space: pre-wrap;
    font-size: 0.8rem;
}

.listapliromwn{
    background-color:#ddd;
    display: grid;

    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
}

@media screen and (max-width: 1399px) {
.grid-list-pliromes  {max-width: 100%;}
    
.grid-list-pliromes label  {max-width: 65%;}
        
/*   #sunolo_pliromis {max-width: 50%;} */
/*.grid-list-pliromes input {max-width: 35%;}*/
}    
  
@media screen and (max-width: 1200px) {
    #pliromiList input{
        width:inherit;
    }
}
    
@media screen and (max-width: 960px) {
  .grid-list-pliromes label {
    padding-right: 4px;
}
      }
@media screen and (max-width: 680px) {
.pliromes0 {padding-left: 0}

.grid-list-pliromes input[type="text"] {
    width: 100%;
    max-width: 100px;
}
    }
@media only screen and (max-width:520px){
#pliromiList input {
        max-width:40%;
}
}
@media only screen and (max-width:520px){
li.grid-list-pliromes {
        max-width:100%;
        display:flex;
        flex-direction:column;
}
/*#sunolo_pliromis {*/
/*    margin-left: inherit;*/
/*}*/
 
}  

/* Responsive styles για Αγγελητήρια */
@media screen and (max-width: 1399px) {
 .family_name { width:89%; max-width:100%;}
 
    
}
@media screen and (max-width: 600px) {
.family_group_input {
    display: flex;
    margin-bottom: 10px;

}
}
.family_main {
    width:100%;
}


/* Δικαιώματα */
.grid-container-dikaiomata{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    background-color:#ddd;
    border-radius: 5px;
    padding: 5px;
}

.grid-list-dikaiomata {
    display: grid;
    grid-template-columns: 0.1fr 12fr 6fr; 
    align-items: center; /* Κάθετη στοίχιση */
    gap: 0;
    border: 1px solid #ccc; /* Οριοθετεί τη γραμμή */
    padding: 0.5rem;
    border-radius: 5px;
    margin-bottom:5px;
}
.dikaiomata0 {padding-left: 0}
.grid-list-dikaiomata div {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 0.5rem;
}
/* Προσθήκη κάθετου border */
.grid-list-dikaiomata div:nth-child(2),
.grid-list-dikaiomata div:nth-child(3) {
    border-left: 1px solid #ccc;
}

.grid-list-dikaiomata div:nth-child(4) {
    border-left: 1px solid #ccc;
}

.grid-list-dikaiomata label {
    /*font-weight: bold; */
    text-align: left;
    white-space: pre-wrap;
    font-size:1rem;
}

@media screen and (max-width: 1399px) {
.grid-list-dikaiomata  input[type="text"] {max-width: fit-content;}
    }
    
@media screen and (max-width: 680px) {
.dikaiomata0 {padding-left: 0}
.grid-header0 {padding-left: 0}

.grid-list-dikaiomata input[type="text"],
.grid-list-dikaiomata textarea{
    width: 100%;
    max-width: 400px;
}
.grid-list-dikaiomata input[type="checkbox"] {
    margin-left: auto;
}

    .maxwidth4{
        max-width:4rem !important;
        margin-left:0 !important;
    }
    
    .maxwidth3{
        max-width:3rem !important;
        /*margin-left:0 !important;*/
    }
    
    .flex_vertical label{
        width: 100%;
    }
}
/*@media screen and (max-width:460px){*/
/*    .grid-list-dikaiomata label {*/
/*        margin-right:5px;*/
/*    }*/
/*}*/


@media screen and (max-width: 1399px) {
.grid-container-extras .grid-field-topothetisi input,
.grid-container-extras .grid-field-deksiosi input,
.grid-container-extras .grid-field-bus input,
.grid-container-extras .grid-field-koimitirio input,
.grid-container-extras .grid-field-toixokoliseis input,
.grid-container-extras .grid-field-comment-aggelitiria input{
    /*display: flex;*/
    width: auto; 
    padding: 2px; 
    margin-left: 0;
    margin-right:0;
}
}

/*
@media screen and (max-width: 700px) {

    .grid-field-topothetisi label, .grid-field-deksiosi label, .grid-field-bus label, 
    .grid-container-extras .grid-field-koimitirio label, .grid-field-toixokoliseis label {
    width: 80%;
}

}
@media screen and (max-width: 470px) {



    .grid-field-topothetisi label, .grid-field-deksiosi label, .grid-field-bus label, 
    .grid-container-extras .grid-field-koimitirio label, .grid-field-toixokoliseis label {
    width: 80%;
}

}

*/

@media screen and (max-width: 1399px) {
#modal_new_family_group_name {
    width:50%;
}
}
@media screen and (max-width: 600px) {
.namemodal { display: flex;}
}


/* Responsive styles για στεφάνια */
/*@media screen and (max-width: 1399px) {*/
    .stefania{max-width:98%;width:100%;}
    #inputWreath  {width:100%;}
    #checknowearth {width:auto;}
/*}*/

@media screen and (max-width: 600px) {
    
    .stefania{
        magin-left: inherit;
        display:initial;
        border-radius:5px;
    }
    
    #checknowearth {
    display: inline-block;
    }
   
    
}

@media screen and (max-width: 480px) {

    #divWreaths div#wreath {
        margin-left: 0;
    }
.pluswreaths0 {
    flex-direction:column;
    margin-left: 0;
}
.stefania{
border-radius:5px;}


}



/* responsive για Υπηρεσίες */
@media only screen and (max-width:790x){
.grid-list-services label,
.dapanes-totals label{
    white-space: -wrap;
    font-size: 0.6rem;
}
    }






@media only screen and (max-width:1200px){
    .container{
        max-width:100%;
    }
    
    
}

#wreathList{
    list-style: decimal;
    width:100%;
}


.grid-list-services,
.dapanes-header,
.dapanes-totals{
    margin-top:0.5rem;
    display:grid;
    grid-template-areas:
      'col col col col col col2 col2';
}


.autoheight{
	height:auto;
}

a {
    text-decoration:none;
    color: #c8d1e1;
}

button > a {
    color:black;
    display: inline-block;
    width: 100%;
}

.flex-center{
    display: flex;
    justify-content: center;
}

.home_wrapper{
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.home_wrapper button{
    margin: 1rem 0;
    font-size: 2rem;
    padding: 1rem;
    border-radius: 5px;
}

.form_user{
    text-align:center;
    background-color:#ddd;
    border-radius:5px;
}

.form_wrapper{
    /*width: fit-content;*/
    margin: auto;
}

.form_wrapper_flex{
    width: fit-content;
}

.form_group{
    display: flex;
    justify-content: space-between;
    margin: 5px auto;
    max-width: 380px;
    align-items: center;

}

.modal .form_group{
    max-width: 600px;
}

.form_group_checkbox{
    justify-content: left;
}

.form_text{
    margin-left:auto;
    border-radius: 5px;
} 

.form_submit{
    margin: auto;
    margin-top: 1rem;
    padding: 10px;
    background-image: linear-gradient(160deg, #e0b652 0%, #e0b652 100%);
    color: #000;
    cursor:pointer;
    transition: .2s all;
    border-radius: 5px;
}

.form_submit:hover{
    transform:scale(1.1);
}

/* login form */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
   background-color: #2946a4;
  /*background-color: #7e8ba3;*/
  /*color: #fff;*/
  color: black;
  7e8ba3:Helvetica Neue, sans-serif;
  margin: 0;
  /*min-height: 100%;*/
  font-size:1rem;
}

.align {
  align-items: center;
  display: flex;
  flex-direction: row;
}
.align__item--start {
  align-self: flex-start;
}
.align__item--end {
  align-self: flex-end;
}

.site__logo {
  margin-bottom: 2rem;
  margin-top: 2rem;
  width:100%;
}

.logo_main{
   width: 200px;
    height: 1rem;
    margin: 0; 
}

.site__logo_main{
    margin-left: 1rem;
    margin-top: 0.5rem;
    width: 5rem;
    height: 2rem;
}

input {
  border: 0;
  font: inherit;
}

input::placeholder {
  color: #7e8ba3;
}

.form__field {
  margin-bottom: 1rem;
}

.form__field input{
    width: 10rem;
}

.form input {
  outline: 0;
  padding: 0.5rem 1rem;
}
.form input[type=text], .form input[type=password] {
  width: 100%;
}

.grid {
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

h2 {
  /*font-size: 2.75rem;*/
  font-weight: 100;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

svg {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}



.register {
  box-shadow: 0 0 250px #000;
  text-align: center;
  padding: 4rem 2rem;
  background: aliceblue;
}
.register input {
  border: 1px solid #242c37;
  border-radius: 999px;
  background-color: transparent;
  text-align: center;
}
.register input[type=text], .register input[type=password] {
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: 1rem 50%;
   width: 100%;
   font-size:1.5rem;
   color:black;
}
.register input[type=submit] {
  background-image: linear-gradient(160deg, #8ceabb 0%, #378f7b 100%);
  color: #fff;
  margin-bottom: 6rem;
  width: 100%;
  font-size:1.5rem;
  cursor:pointer;
  transition: .2s all;
}

.register input[type=submit]:hover{
    transform:scale(1.1);
}

.error{
    color:red;
}

.error_btn{
    width: 15rem;
    border-radius: 1rem;
    padding: 0.2rem;
    cursor:pointer;
    border: 1px solid black;
    transition: .2s all;
    margin-right:1rem;
}


    


.error_btn:hover{
    transform:scale(1.1);
    box-shadow: 0 8px 8px 0 rgb(0 0 0 / 0.4);
}

.success{
    color:white !important;
    border: 2px solid green !important;
}

.fail{
    color:red !important;
    border: 2px solid red !important;
}

/* menu */

.logo{
    width: 500px;
    margin: auto;
    
    
}

@media only screen and (max-width:500px){
    .logo{
        width: 94%;
        
    }
}

.bg_maincolor{
    background:#2946a4;
    
}

.menu{
    display: flex;
    justify-content: space-around;
    background-color:#2946a4;
}

.menu a:hover{
    color:black;
}

.logout {
    display: inline-block;
     font-size: 2rem;
    transform: translate(0px, -6px);
    margin-left:10px;
}



/*dropdown button*/

.dropbtn {
  /*background-color: #4CAF50;*/
  /*color: white;*/
  /*padding: 16px;*/
  /*font-size: 16px;*/
  /*border: none;*/
    padding: 0;
    background: none;
    border: 0;
    font-size: 2rem;
    transform: translate(0px, -6px);
    color: inherit;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 1rem;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #B0DAFF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-radius: 5px;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {color: black;}


/* users table */

#users {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size:12px;
}

#users td, #users th {
  border: 1px solid #ddd;
  padding: 0.6rem;
  white-space: nowrap;
  text-transform: uppercase;
  
}

#users tr:nth-child(even){background-color: #ddd;}

#users tr:nth-child(odd) {
    background-color: #fff;
}



#users tr:hover {background-color: #B0DAFF;}

#users tr {
    cursor:pointer;
}

#users th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #e0b652;
  color: black;
}

@media only screen and (max-width:280px){
    #users th {
        font-size: 10px;
    }
}

.add_btn{
    width: fit-content;
    font-size: 0.8rem !important;
    margin: 1rem auto !important;
    background-image: linear-gradient(160deg, #e0b652 0%, #e0b652 100%);
    color: black;
    cursor: pointer;
    transition: .2s all;
}

.add_btn:hover{
    transform:scale(1.1);
}

.btns_right{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.btn_green{
    padding: 1rem;
    background-image: linear-gradient(160deg, #8ceabb 0%, #378f7b 100%);
    color: white;
    cursor:pointer;
    transition: .2s all;
}

.btn_green:hover{
    transform:scale(1.1);
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  transition: opacity 0.5s ease; /* Fade in effect */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Fade-out effect */
.modal.fade-out {
    opacity: 0;
}


/* Modal Content/Box */
.modal-content {
  background-color: #2946a4;
  margin: 3rem auto; /* 3rem from the top and centered */
  padding: 20 50px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  position: absolute;
  left: 25%;
}
@media only screen and (max-width:900px){
    .modal-content{
        width: 100%;
        padding: 0px;
        left: 0;
        top: 0;
    }
}

.modal-price{
    display:none;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*BTN*/

.btn{
    width: 15rem;
    padding: 1rem;
    text-decoration: none;
    color: #000;
    background-color: #e0b652;
    margin: 1rem auto;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.2);
    transition: .2s all;
    cursor:pointer;
}
@media only screen and (max-width:600px){
.buttonstyle {
width: 10rem;
}
 } 
@media only screen and (max-width:437px){
.buttonstyle {
    max-width:7rem;
padding:3px;
}
 }  
  
@media only screen and (max-width:280px){
    .btn{
        width: 80%;
    }
}

.btn:hover,
.btn-pricelist:hover{
    transform:scale(1.1);
    border: 1px black solid;
    color:black;
    box-shadow: 0 8px 8px 0 rgb(0 0 0 / 0.4);
}

.btn-pricelist{
    padding:0.3rem;
    background-color: bee3db;
    cursor:pointer;
    transition: .2s all;
}



/*menu_bar_edit*/

.menu_bar_edit{
    display: flex;
    margin: 2rem;
    text-align: center;
}

.menu_bar_edit_pricelist{
    text-align: left;
}

.menu_bar_edit_pricelist a{
    margin-right:1rem;
}

i{
    margin-right:5px;
}


/*      TABS    */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #B0DAFF;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #8ceabb;
}

/* Style the tab content */
.tabcontent,
.tabcontent_extra{
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent_extra{
   border:none; 
}

#required_list{
    display:flex;
    flex-direction: column;
    margin-top:0.4rem;
}

/*  END TABS */


 

/*.search_result,*/
/*.search_result_extra{*/
/*    display:none;*/
/*    height: 100px;*/
/*    overflow: scroll;*/
/*    width: 300px;*/
/*    background-color: white;*/
/*    text-align: left;*/
/*    overflow-x: hidden;*/
/*}*/

td input {
  width: 100%;

} 

#products_include_table{
    margin-top:3rem;
}

#products_include_table td{
    text-align:center;
}

.to_insert{
    color:red;    
}

.inserted{
    color:green;
}

.fa-trash{
    cursor:pointer;
    color:red;
}


/*scrollbar*/

/* width */
::-webkit-scrollbar {
  height: 10px;
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: darkseagreen; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: green; 
}

/*End scrollbar*/

.modal_table,
.extra_modal_table{
    width: 100%;
}
 

 .modal_table th,
 .extra_modal_table th{
        position: sticky;
        top: 0;

      }
 .modal_table  td,
  .modal_table  th,
  .extra_modal_table td,
  .extra_modal_table th {
        border: 2px solid #ddd;
        padding: 0rem;

      }
 .modal_table th,
 .extra_modal_table th{
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        color:white;
        padding:0.4rem;
      }

  .modal_table tr,
  .extra_modal_table tr{
        border: 1px solid black;
      }
  .modal_table  tr:nth-child(odd) ,
  .extra_modal_table  tr:nth-child(odd) {
        background-color: #B0DAFF;
      }
 .modal_table tr:nth-child(even),
 .extra_modal_table tr:nth-child(even){
        background-color: white;
      }
 .modal_table  tr:nth-child(odd) button,
 .extra_modal_table  tr:nth-child(odd) button{
        background-color: #d1d1d1;
      }

   .modal_table   tr:hover,
    .modal_table  tr:focus,
    .extra_modal_table   tr:hover,
    .extra_modal_table  tr:focus{
        background-color: #56baed;
        
      }
      
   .modal_table  tr:hover input,
   .extra_modal_table  tr:hover input{
         color: #495057;
        background-color: #fff;
        border-color: red;
        outline: 0;
        
     }
     
.modal-price-label{
    font-size: 1rem;
} 

.modal-price-input{
    font-size: 1.1rem;
    border: 1px solid;
    width: 5rem;
}  

.modal-price-btn{
    width: 3rem;
    padding: 5px;
    font-size: 1rem;
}  

.price_table{
    width:auto;
}

.price_table th{
    position:relative;
}

.price_table_input{
    font-size: 1rem;
    width: 4rem;
    padding: 0;
    text-align: center;
    background: transparent;
}

.remove_th{
    display:none;
    cursor:pointer;
}

.price_table th:hover .remove_th{
    display:inline-block;
    position: absolute;
    top: 0;
    right: 2;
    font-size: 0.9em;
    color: red;
    
}

     
.to-choose{
    height: 80%;
    overflow: auto;
    text-align: center;
}     


/* include_table  */

#include_table,
#include_table_extra{
    border-collapse: collapse;
    font-size: 0.8rem;
}

#include_table th,
#include_table_extra th{
    font-size: 0.7rem;
}

#include_table td, #include_table th,
#include_table_extra td,#include_table_extra th{
  border: 1px solid #ddd;
  /*padding: 8px;*/
}
/* include_table  */

#include_table tr:nth-child(even),
#include_table_extra tr:nth-child(even){background-color: #B0DAFF;}

#include_table tr:hover,
#include_table_extra tr:hover{background-color: #349565;}
#include_table_extra tr:focus-within{background-color: #349565;}

#include_table tr td:last-child,
#include_table_extra tr td:last-child{
   text-align:center;
}

#include_table tr td:last-child button,
#include_table_extra tr td:last-child button{
   background:#8ceabb;
}

.td_product{
    width:500px;
}

.td_order_product_id{
    width:200px;
}

.td_order_product_name{
    width:350px;
}

.td_ts_product_name{
    width:25rem;
}





/* popup */
/* Popup container - can be anything you want */
.popup {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
 .popuptext {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -200px;
  height: 4rem;
  font-size: 1.3rem;
}

/* Popup arrow */
 .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
 .show {
  visibility: visible;
}


/* lists */
ul{
    list-style:none;
}

li{
    /*border-bottom:1px solid green;*/
    cursor:pointer;
}

li:hover{
    background:#8ceabb;
}

/* status span*/
.circle{
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    display: inline-block;
}

.circle__green{
    background: green;
}

.circle__red{
    background: red;
}

/* Orders */
.flex{
    display:flex;
}

.left{
    text-align:left;
    padding:0.5rem;
}

.left input,
.left select
{
    width:8rem;
    font-size: 0.9rem;
    padding:0;
    
}

.search_result_customers{
    /*width: 40rem;*/
    /*font-size: 0.8rem;*/
    max-height: 8rem;
    position: absolute;
    /*background: lightgreen;*/
    overflow: auto;
    /*top: 20px;*/
    display:none;
}


.address_grid{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 0.8rem;
    text-align: left;
}

/*.address_grid_address_label{*/
/*    grid-column: 1;*/
/*    grid-row: 1;*/
/*}*/

.address_grid_address_input{
    grid-column: 2/5;
    grid-row: 1;
}

.general_info_grid{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;
    gap: 0.6rem;
    text-align: left;
}

.dyehouse_grid{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    gap: 0.6rem;
    text-align: left;
}

.customer_info_grid{
    display: grid;
    grid-template-columns: auto auto ;
    grid-template-rows: auto;
    gap: 0.6rem;
    text-align: left;
}

.customer_info_grid input,
.customer_info_grid select{
    width:25rem;
    max-width:40rem;
}

/*.search_result_products{*/
/*    display: none;*/
/*    text-align: left;*/
/*    height: 6rem;*/
/*    overflow: auto;*/
/*}*/
.search_result_products,
.search_result_products_code,
.search_result,
.search_result_extra{
    display: none;
    text-align: left;
    height: 6rem;
    width:50rem;
    overflow: auto;
}

.totals{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 0.3rem;
    text-align: left;
}

#submit_btn,
#submit_btn_exit,
#submit_exit_btn,
#colorGroup_btn{
    padding: 0.5rem;
    /* background: lightgrey; */
    background-color: #8ceabb;
    margin: 1px auto ;
    border-radius: 1rem;
    cursor:pointer;
    transition: .2s all;
    
}

#submit_btn:hover,
#submit_btn_exit:hover,
#submit_exit_btn:hover,
#colorGroup_btn:hover{
    transform:scale(1.1);
    box-shadow: 0 8px 8px 0 rgb(0 0 0 / 0.4);
}

.controls{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}


.controls a{
    display: inline-block;
    padding: 3px;
    margin-right: 5px;
    cursor: pointer;
}

.new_order{
    color: green;
}

.delete_order{
    color: red;
}

.next_order{
    color: blue;
}

.search_input{
    width:105%;
}

label{
    font-size:1rem;
    text-align:left;
}
/*
input, select{
    width:15rem;
    font-size:0.8rem;
}
*/

.resizable{
    resize: horizontal;
  overflow: auto;
  /*width: auto;*/
  width: 100%;
  
  margin: 0px;
  padding: 3px;
  /*border: 1px solid black;*/
  display:block;

}

.td-resize{
    width:1rem;
}

.order_footer{
    display: flex;
    justify-content: space-between;
}

.product_edit_grid{
    display: grid;
    grid-template-columns: auto auto auto auto ;
    gap: 0.5rem; 
}

.product_info_grid{
    display: grid;
    grid-template-columns: auto auto auto ;
    gap: 0.5rem; 
}

.colorGroup_grid{
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5rem; 
}

.color_edit_grid{
    display: grid;
    grid-template-columns: auto auto auto ;
    gap: 0.5rem;
}    

.product_details_grid{
    display: grid;
    grid-template-columns: auto auto ;
    gap: 0.5rem;
} 

.color_form{
    display:flex;
}

.color_category_grid{
    display: grid;
    grid-template-columns: auto auto auto ;
    gap: 0.5rem;
}

.modal-content-colors {
    background-color: #fefefe;
    /* margin: auto; */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.belco_product{
        background: #8ceabb;
}

.color_choice{
    cursor:pointer;
}

#color_chart,
#color_categories{
    overflow: scroll;
    max-height: 500px;
}

.color_info_grid{
    display: grid;
    grid-template-columns:auto auto auto auto auto auto auto auto;
    gap: 0.5rem;
    
} 

.group_color{
    grid-template-columns:auto auto auto auto auto auto auto;
}

.color_info_grid input{
    width:2rem;
    border: 1px solid black;
}

/*.color_info_grid select{*/
/*    width:5rem;*/
/*}*/

.color_charge_type{
    width:5rem;
}

.color_pricelist{
    width:20rem;
}

.dyehouses_grid{
   display: grid;
    grid-template-columns:auto auto auto;
    gap: 0.5rem; 
}

.hidden{
    display:none;
}

.d-arrow,
.c_arrow{
    cursor:pointer;
}

.red{
    color:red;
}

.blue{
    color:blue;
}

.bg_red{
    background : #ff5353 !important;
}

.bg_green{
    background : #46db46 !important;
}

.bg_orange{
    background : #ffc355 !important;
}

#choose_color{
    cursor:pointer;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.color_choose{
    position: relative;
    height: 100%;
}

#color_msg{
    color:green;
    margin:1rem 0;
}

.order_footer_extras{
    border: 1px solid;
    width: 50%;
}

/*πινακας τεχνικής προδιαγραφής στην παραγγελία */
.main_table ,
.extra_table{
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.main_table td, .main_table th,
.extra_table td, .extra_table th{
  border: 1px solid #ddd;
  
}

.main_table tr:nth-child(even),
.extra_table tr:nth-child(even){background-color: #B0DAFF;}

.main_table tr:hover,
.extra_table tr:hover{background-color: #ddd;}



.main_table th,
.extra_table th{
  
  background-color: #4CAF50;
  color: white;
}

.extra_table td:nth-child(2){
    display:none;
}
.extra_table th:nth-child(2){
     display:none;
}

.td_85{
    width: 85%;
}

.center{
    text-align:center;
}

.radio_extra{
    margin:0;
}

.td_10{
    width: 10%;
}

.condition {
    width:18rem;
}

.condition select{
    width: auto;
}

.condition input{
   width: 4rem; 
}

.pieces_added,
.product_width,
.product_height,
.quantity,
.price,
.color_extra,
.presale_total,
.sale,
.total,
.extras_price,
.extra_qty,
.extra_price,
#mixed_value,
#color_extra_price,
#total_discount,
#prediscount,
#extra_discount,
#extra_discount_total,
#net_value,
#fpa,
#fpa_value,
#total_price,
#ekptosi_pliromis,
#teliko_pliromis,
#sunolo_eispraksis,
#ypoloipo
{
    text-align:right;
}


#new_name,
#new_description{
    width:30rem;
}

.productsPricelist input{
    width:4rem;
}

.productsPricelist .search_input{
    width:100%;
}

/*remove arrows from inputs number*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* End remove arrows from inputs number*/


.mm_cell,
.logistiki_cell{
    width:3rem;
  
}

/*print*/


@media print {
    .color_info_grid { page-break-before: always; } /* page-break-after works, as well */
    
}

@media only screen and (max-width:1280px){
    .color_selector{
        width:100%;
    }
    
    .quantity{
       width:100%; 
    }
}


.save_prices{
    font-size:28px !important;
    margin-right:1rem;
    cursor:pointer;
}

.save_prices:hover,
.save_prices:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.mainProductForm input{
    width: 25rem;
}

.basic_height_min,
.height_min{
    margin-left:4px;
}

.msg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    background: white;
    color: red;

}

.green{
    background:green;
    color:white;
    transition-duration:1s; /* <= creates fade out effect */
    transition-delay:1s;
}

.extra_qty_input{
    width:3rem;
}

.qty_2,
.extra_price,
.extra_discount,
.extra_total_price{
    text-align:right;
}

#msg_container{
    width: 100%;
    height: 100%;
    position: absolute;
    background: white;
    /*background: darkgray; */
    opacity: 0.8;
    z-index: 100;
}

.comments_line,
#comments_added{
    text-align: right;
}


#posta-table{
	width: auto;
	border-collapse: collapse;
	font-size:0.8em;
}

#posta-table, #posta-table th, #posta-table td{
	border: 1px solid;
}

.update_courier:hover{
	color:black;
}

#saveOrderId {width:10rem;}

@media only screen and (max-width:450px){
    #saveOrderId,
    .btn.save {width:auto;}
    

}

.btn.save:hover {
    background-color: #0ceba9; 
}

.btn:hover {
    background-color: #d7c7a1; 
}

/*modalFamily */
.modfamily {
    margin-right:15px;
    margin-top:5px;
}
.modal_label {
    color:#e0b652;
}

fieldset {
    background-color: #ddd;
}

/* Για την σελίδα customer create.php */

@media only screen and (max-width:1200px){
    .dimiourgia_pelati, .name_pelati {
        max-width:50%;
    }

}

@media only screen and (max-width:600px){
    .dimiourgia_pelati_afm {
        max-width:100%;
    }

}

@media only screen and (max-width:510px){
    .name_pelati {
        max-width:50%;
    }

}

.form-wrapper {
    padding:2px;
}

#antistefanon_textarea {
    max-width:50%;
    border-radius:5px;
}

.toMnimosino,
.toSintaksi,
.toEksoda{
    font-size: 0.8rem;
    width: auto;
    padding: 0.5rem;
}

.width_auto{
    width:auto !important;
    min-width:auto !important;
}

.grid-list-services,
.grid-list-dikaiomata,
.grid-list-dapanes{
    
    counter-increment: item; /* Αυξάνει τον μετρητή για κάθε li */
}

.grid-list-services::before,
.grid-list-dikaiomata::before,
.grid-list-dapanes::before{
    content: counter(item) ". "; /* Εμφανίζει τον αριθμό πριν το περιεχόμενο */
    
    
}

.service_name,
.dikaiomata_name{
    width:22rem;
}

.service_name,
.dikaiomata_name{
    font-size:0.9em;
}


@media only screen and (max-width:510px){
    .flex_vertical {
        flex-direction: column;
    }

}

#customer_comment{
    width:100%;
}

#next_ceremonies_dates{
    color: #2946a4;
    font-size: 0.8em;
}

#thanon,
#pelatis{
    width:100%;
}

.dapanes_name{
    width:100%;
}

.maxwidth4{
    max-width:4rem;
    margin-left:1rem;
}

.maxWidth100{
    width:100%;
    max-width:100%;
}

#ceremony_cross{
    width: 30rem;
    margin-left: 60px;
    
}


.divWreaths{
    display:flex;
    flex-direction: row;
    margin-top: 5px;
}

.cross{
    display: flex;
    align-items: center;
}

@media only screen and (min-width:650px){

.grid_stefania{
    margin-right:5px;
}

.grid_stefania input{
    margin-left:5px;
    max-width:60%;
}
    
}

.payments{
    display:flex;
    flex-direction: row;
    margin: 0.5rem 0;
}

@media only screen and (max-width:650px){
    .divWreaths {
        flex-direction: column;
    }
    
    .grid_column{
        display: grid;
        grid-template-columns: 1fr;
    }

    .grid_stefania{
        
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 4px;
        
    }
    
    .cross{
        width:100%;
    }
    
    .form_wrapper {
        padding:5px;
    }
    
    
    
    .parenthesi input{
        width:90% !important;
    }
    
    .divDatePliromis{
        flex-direction:column;
        padding:0 !important;
    }
    
    .payments{
        flex-direction: column;
    }
    
    .grid-container-mnimosino .form_text{
        max-width:100% !important;
    }
    
    body{
        font-size:0.8em;
    }
    
    
}

.parenthesi{
        width:100%;
    }

#tafi_parenthesi,
#tafi{
    width:70%;
}
    
.pliromimethodos{
    width:max-content;
}    

#naos,
#thanonaddress,
#deksiosi{
    width:100%;
}

#toixokoliseis{
    width:100%;
}

.flex1{
    flex:1;
}


.ppaddingL1{
    padding-left:1rem;
}

.textarea80{
    flex:1;
    max-width:80%;
}




/*
.grid-list-dapanes {
  display: grid;
  grid-template-columns: 0.1fr 5fr 0.5fr 0.2fr 0.5fr 0.5fr;
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
}
*/

.grid-list-dapanes {
  display: grid;
   grid-template-areas:
    'name name name name name atoma check anaatomo sinolo';
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
}

.grid-list-dapanes-name{
    grid-area: name;
}

.flex_column{
    display: flex;
    flex-direction: column;
}

.flex_column .btn{
    margin:3px;
}

.grid-list-dapanes-atoma{
    grid-area: atoma;
}

.grid-list-dapanes-check{
    grid-area: check;
}

.grid-list-dapanes-anaatomo{
    grid-area: anaatomo;
}

.grid-list-dapanes-sinolo{
    grid-area: sinolo;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

input:invalid {
  border: 2px dashed red;
}

.maxwidth3{
        max-width:3rem !important;
        /*margin-left:0 !important;*/
    }
    
.max_width_20{
    max-width:20rem !important;
}    

@media (max-width: 600px) {
    .hideOnMobile {
        display: none;
    }
    
    .columnOnMobile{
        display: flex;
        flex-direction: column;
    }
}