/* body {font-family: Arial, Helvetica, sans-serif;} */

/* The Modal (background) */
.modal_docs {
    /* display: none; Hidden by default */
  display: none; /* Hidden by default: Switch block / none */
  position: fixed; /* Stay in place */
  /* z-index: 2; Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width 21cm */
  height: 100%; /* Full height 29.7cm */
  overflow: auto; /* Enable scroll if needed */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal_docs_content {
  background-color: #fefefe;
  margin: 1% auto 1% auto; /* 5% from the top, 5% from the bottom and centered */
  border: 1px solid #888;
  width: 95%; /* Could be more or less, depending on screen size */
}

/* Select without Arrow */
.modal_docs select {
  -o-appearance: none !important;
  -ms-appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Change styles on extra small screens */
@media screen and (max-width: 300px) {

}

.sheet {
  background: white;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  }

.size_a4 {
  width: 21cm;
  height: 29.7cm; 
  }

/* .size_ticket {
  width: 21cm;
  height: 29.7cm; 
} */

/* Invoice */
/* .myInvoiceSheet {
  display: none;
} */

.sheet_invoice_grid {  display: grid;
  grid-template-columns: 2.5cm 1fr 1fr 1fr 1fr 1fr 1.5cm;
  grid-template-rows: 1fr 3.5fr 0.5fr 1fr 4.5fr 1fr 1fr 2fr 7fr 3fr 1.5fr 3.5fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "margin_left margin_top margin_top margin_top margin_top margin_top margin_right"
    "margin_left header header header header header margin_right"
    "margin_left . . . sender_contact sender_contact margin_right"
    "margin_left sender_address sender_address sender_address sender_contact sender_contact margin_right"
    "margin_left recipient_address recipient_address . sender_contact sender_contact margin_right"
    "margin_left recipient_address recipient_address . . . margin_right"
    "margin_left . . . . letter_date margin_right"
    "margin_left reference reference reference reference reference margin_right"
    "margin_left services services services services services margin_right"
    "margin_left . . . sum sum margin_right"
    "margin_left payment_terms payment_terms payment_terms payment_terms payment_terms margin_right"
    "margin_left footer footer footer footer footer margin_right"
    "margin_left margin_bottom margin_bottom margin_bottom margin_bottom margin_bottom margin_right";
}

.sheet_invoice_grid .margin_top { grid-area: margin_top; }

.header {
  justify-self: center;
  align-self: center;
  grid-area: header;
}

.sender_address {
  justify-self: start;
  align-self: end;
  grid-area: sender_address;
}

.margin_left { grid-area: margin_left; }

.margin_right { grid-area: margin_right; }

.margin_bottom { grid-area: margin_bottom; }

.recipient_address { grid-area: recipient_address; }

.sender_contact { grid-area: sender_contact; }

.letter_date {
  justify-self: start;
  align-self: start;
  grid-area: letter_date;
}

.reference {
  justify-self: start;
  align-self: start;
  grid-area: reference;
}

.services { grid-area: services; }

.sum {
  justify-self: end;
  align-self: start;
  grid-area: sum;
}

.payment_terms { grid-area: payment_terms; }

.footer {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "footer_left footer_middle footer_right";
  grid-area: footer;
}

.sum {
  text-align: right;
}

.footer_left {
  grid-area: footer_left;
  font-size: smaller;
}

.footer_middle {
  grid-area: footer_middle;
  font-size: smaller;
}

.footer_right {
  grid-area: footer_right;
  font-size: smaller;
}

/* Ticket */


.sheet_ticket {
  /* background: url(mountain.jpg); */
  background: url(img/custom/background-ticket.png);
  background-repeat: no-repeat;
  background-size: 21cm 21cm;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  }

.sheet_ticket_grid {
  display: grid;
  /* width: 15.24cm; */
  /* grid-template-columns: 83px 298px 510px 504px 405px;
  grid-template-rows: 158px 36px 134px 647px; */
  grid-template-columns: 35.5mm 25mm 43mm 43.5mm 34mm;
  grid-template-rows: 105mm 12mm 3mm 15mm 55mm;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-items: start;
  align-items: end;
  grid-template-areas:
    "margin_left_ticket margin_top_ticket margin_top_ticket margin_top_ticket margin_top_ticket"
    "margin_left_ticket ticket_no_1 . date_of_issue_ticket ticket_no_2"
    "margin_left_ticket ticket_no_1 . . ticket_no_2"
    "margin_left_ticket . count_passengers_ticket validity_date_ticket ."
    "margin_left_ticket . . . .";
}

.margin_top_ticket { grid-area: margin_top_ticket; }

.margin_left_ticket { grid-area: margin_left_ticket; }

.count_passengers_ticket { grid-area: count_passengers_ticket; }

.date_of_issue_ticket { grid-area: date_of_issue_ticket; }

.validity_date_ticket { grid-area: validity_date_ticket; }

.ticket_no_2 { grid-area: ticket_no_2; }

.ticket_no_1 { grid-area: ticket_no_1; }


/* html, body , .sheet_ticket_grid {
  height: 100%;
  margin: 0;
} */


/* For presentation only, no need to copy the code below */
/* .sheet * {
  border: 1px solid red;
  position: relative;
} */

/* .sheet *:after {
  content:attr(class);
} */
  

/* For Printing */
@media screen {
  #printSection {
      display: none;
  }
}

@media print {
    body * {
        visibility:hidden;
    }
    @page 
    {
        size:  A4;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
    #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}