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

@page {
  size: A4; /* Change from the default size of A4 */
  margin: 2cm;
  }

body {
  margin: 0;
  width: 1500px;
}

.wrap {
  position: relative;
  width: 33.33%;
  float: left;
}

.invoicelist {
  position: relative;
  background-color: #eeeeee;
  clear: left;
  padding-bottom: 7px;
  float: left;
}

.evenline {
 background-color: #cccccc85;
}


.id {
  position: relative;
  float: left;
  padding-right: 10px;
  padding-left: 20px;
  width: 100px;
}

.officeid {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 100px;
}
.customer {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 300px;
}

.date {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 200px;
}


.invdate {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 100px;
}

.amount {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 100px;
  text-align: right;
}

.bookings {
  position: relative;
  float: left;
  padding-right: 10px;
  width: 50px;
  text-align: right;
}

.logo {
  position: relative;
  left: 600px;
  width:300px;
  height: 100px;
  }

.logo img {
    width: 100%;
    height: auto;
}

.ama_title {
  position: relative;
  clear: left;
  float: left;
  padding-left: 10px;
  width: 300px;
  font-weight: bold;
  padding-bottom: 8px;
}

.title_text {
  position: relative;
  clear: left;
  float: left;
  padding-left: 10px;
  width: 100px;
  min-height: 1px;
  padding-bottom: 5px;
}

.ama_text {
  position: relative;
  float: left;
  padding-left: 10px;
  width: 200px;
  padding-bottom: 5px;
}

.headblock {
  position: relative;
  float: left;
  padding-left: 20px;
  width: 400px;
}

.invoicemain {
  position: relative;
  clear: left;
  float: left;
  padding-left: 30px;
  padding-top: 30px;
  width: 100%;
}

.inv_main_title {
  position: relative;
  float: left;
  font-weight: bold;
  font-size: 24px;
  padding-bottom: 20px;

}

.inv_main_text {
  position: relative;
  clear: left;
  float: left;
  padding-bottom: 7px;

}

.bold {
  font-weight: bold;
}

.invoicegrid {
  position: relative;
  clear: left;
  float: left;
  padding-left: 30px;
  padding-top: 10px;
  width: 100%;
}

.gridline {
  position: relative;
  clear: left;
  float: left;
  width: 100%;
  margin-left: 10px;
}

.grid_title {
  position: relative;
  float: left;
  width: 350px;
  border-left: solid;
  border-top: solid;
  height: 50px;
  padding-left: 5px;
}

.grid_artist {
  position: relative;
  float: left;
  width: 350px;
  text-align: left;
  border-left: solid;
  border-top: solid;
  height: 50px;
  padding-left: 5px;
}

.grid_album {
  position: relative;
  float: left;
  width: 150px;
  text-align: right;
  border-left: solid;
  border-top: solid;
  height: 25px;
  padding-right: 5px;
}

.grid_year {
  position: relative;
  float: left;
  width: 40px;
  text-align: right;
  border-left: solid;
  border-top: solid;
  height: 25px;
  padding-right: 5px;
}
.grid_style {
  position: relative;
  float: left;
  width: 40px;
  text-align: center;
  border-left: solid;
  border-top: solid;
  height: 25px;
  padding-right: 5px;
}
.grid_bpm {
  position: relative;
  float: left;
  width: 35px;
  text-align: center;
  border-left: solid;
  border-top: solid;
  height: 25px;
  padding-right: 5px;
}

.grid_duration {
  position: relative;
  float: left;
  width: 60px;
  text-align: center;
  border-left: solid;
  border-top: solid;
  height: 25px;
  padding-right: 5px;
}
.grid_controls {
  position: relative;
  float: left;
  width: 70px;
  text-align: center;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  height: 25px;
  padding-right: 5px;
}

.grid_playlist_actions {
  position: relative;
  float: left;
  width: 150px;
  text-align: center;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  height: 25px;
  padding-right: 5px;
}

.grid_total {
  position: relative;
  float: left;
  width: 150px;
  text-align: right;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  height: 25px;
  padding-right: 5px;
}

.icon_button {
  width: auto;
  background-color:#818d55; /* Green */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  margin-top: 5px;
}

/* Darker background on mouse-over */
.icon_button:hover {
  background-color: RoyalBlue;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
  }

.tmpl1.grid_period {
  display: None;
}

.font_small {
    font-size: 14px;
}
.tmpl2.grid_title {
  width: 437px;
}

.tmpl2.grid_period {
  width: 55px;
}

.tmpl2.grid_price {
  width: 70px;
}
.tmpl2.grid_sumamount {
  width: 70px;
}
.tmpl2.grid_sumdiscount {
  width: 70px;
}
.tmpl2.grid_total {
  width: 70px;
}



.summary {
  position: relative;
  clear: left;
  float: left;
  width: 100%;
  padding-top: 20px;
  padding-left: 30px;
}

.summarytitle {
  position: relative;
  clear: left;
  float: left;
  width: 760px;
  text-align: right;
  padding-left: 15px;
  padding-bottom: 8px;
}

.summaryvalue {
  position: relative;
  float: left;
  width: 150px;
  text-align: right;
  padding-left: 5px;

}

.note {
  position: relative;
  clear: left;
  float: left;
  width: 100%;
  padding-top: 20px;
  padding-left: 30px;
}

.notetitle {
  position: relative;
  clear: left;
  float: left;
  width: 630px;
  text-align: left;
  padding-bottom: 3px;
}

.notevalue {
  position: relative;
  clear: left;
  float: left;
  width: 780px;
  text-align: left;

}

.w500 {
  width: 500px;
}

.w300 {
  width: 350px;
}

.center25 {
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
}
.center50 {
  height: 60px;
  line-height: 20px;
  white-space: wrap;
}

.onlytopline {
  height:1px;
  width: 945px;
  border-top: solid;
}

@media screen {
    div.divFooter {
        display: none;
    }
    .page-break	{ display: none; }
}
@media print {
    div.divFooter {
        position: fixed;
        bottom: 0;
    }
    .page-break	{ display: block;
                  page-break-after: always;
                  page-break-inside: auto;
                  height: 180px;
    }
}

.ama_footer_left {
  position: relative;
  float: left;
  width: 300px;
  text-align: left;
  font-size: 12px;

}
.ama_footer_mid {
  position: relative;
  float: left;
  width: 300px;
  text-align: center;
  font-size: 12px;

}
.ama_footer_right {
  position: relative;
  float: left;
  width: 300px;
  text-align: right;
  font-size: 12px;

}

.selectbox {
    font-size: 24px;
    margin-bottom: 10px;
}
@media print{
.noprint {
  display: None;
}
}
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#abc {
width:100%;
height:100%;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
background-color:#fff;
padding-left: 10px;
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
padding:10px;
border:1px solid #ccc;
padding-left:10px;
font-size:12px;
float:left;
height: 5px;
}

input[type=password] {
padding:10px;
border:1px solid #ccc;
padding-left:10px;
font-size:12px;
float:left;
height: 5px;
position: relative;
}

#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}

span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}

button.menu {
width:20%;
height:50px;
border-radius:3px;
background-color:#818d55;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
margin-top: 5px;
margin-bottom: 10px;
cursor:pointer
}

button.topmenu {
width:10%;
height:30px;
border-radius:3px;
background-color:#818d55;
color:#fff;
font-size:14px;
margin-top: 5px;
margin-bottom: 10px;
cursor:pointer
}

.content {
 margin-left: 10px;
}

h1 {
margin-left: 10px;
}

.logintext {
float:left;
position: relative;
font-size: 14px;
width: 80px;
}

.logininput {
float:left;
width: 100px;
height: 5px;
position: relative;
margin-left: 90px;
}

.loginline {
  width: 350px;
  height: 30px;
  clear: left;
  position: relative;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.vcenter {
margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

form.dateform {
max-width:800px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
background-color:#fff;
padding-left: 10px;
margin-left:10px;
margin-bottom: 5px;
}

.formtext {
float:left;
position: relative;
font-size: 14px;
width: 130px;
}

.forminput {
float:left;
width: 100px;
height: 5px;
position: relative;
margin-left: 30px;
}

.formline {
  width: 350px;
  height: 30px;
  clear: left;
  position: relative;
}

.officeid-selector {
 width: 500px;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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 */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* 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;
}


.listbox-area {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #eee;
}

[role="listbox"] {
  margin: 1em 0 0;
  padding: 0;
  min-height: 18em;
  border: 1px solid #aaa;
  background: white;
}

[role="listbox"]#ss_elem_list {
  position: relative;
  max-height: 18em;
  overflow-y: auto;
}

[role="listbox"] + *,
.listbox-label + * {
  margin-top: 1em;
}

[role="group"] {
  margin: 0;
  padding: 0;
}

[role="group"] > [role="presentation"] {
  display: block;
  margin: 0;
  padding: 0 0.5em;
  font-weight: bold;
  line-height: 2;
  background-color: #ccc;
}

[role="option"] {
  position: relative;
  display: block;
  padding: 0 1em 0 1.5em;
  line-height: 1.8em;
}

[role="option"].focused {
  background: #bde4ff;
}

[role="option"][aria-selected="true"]::before {
  position: absolute;
  left: 0.5em;
  content: "✓";
}

button[aria-haspopup="listbox"] {
  position: relative;
  padding: 5px 10px;
  width: 150px;
  border-radius: 0;
  text-align: left;
}

button[aria-haspopup="listbox"]::after {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: currentcolor;
  border-bottom: 0;
  content: "";
}

button[aria-haspopup="listbox"][aria-expanded="true"]::after {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: currentcolor;
  content: "";
}

button[aria-haspopup="listbox"] + [role="listbox"] {
  position: absolute;
  margin: 0;
  width: 9.5em;
  max-height: 10em;
  border-top: 0;
  overflow-y: auto;
}

[role="toolbar"] {
  display: flex;
}

[role="toolbar"] > * {
  border: 1px solid #aaa;
  background: #ccc;
}

[role="toolbar"] > [aria-disabled="false"]:focus {
  background-color: #eee;
}

button {
  font-size: inherit;
}

button[aria-disabled="true"] {
  opacity: 0.5;
}

.move-right-btn::after {
  content: " →";
}

.move-left-btn::before {
  content: "← ";
}

.annotate {
  color: #366ed4;
  font-style: italic;
}

.hidden {
  display: none;
}

.offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 14px;
  white-space: nowrap;
}