@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Rubik:400,500,700');
/* 
font-family: 'Rubik', sans-serif;
font-family: 'Roboto Slab', serif;
*/
/* reset */

* {
  border: 0;
  box-sizing: content-box;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: 1.1 !important;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: top;
  text-align: center;
}

/* content editable */

*[contenteditable] {
  border-radius: 0.25em;
  min-width: 1em;
  outline: 0;
}

*[contenteditable] {
  cursor: pointer;
}

*[contenteditable]:hover,
*[contenteditable]:focus,
td:hover *[contenteditable],
td:focus *[contenteditable],
img.hover {
  background: #DEF;
  box-shadow: 0 0 1em 0.5em #DEF;
}

span[contenteditable] {
  display: inline-block;
}

/* heading */

/* h1 { font-family: 'Rubik', sans-serif; text-align: left; text-transform: uppercase; }  */

/* table */

table {
  font-size: 75%;
  table-layout: fixed;
  width: 100%;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
}

th,
td {
  border-width: 1px;
  padding: 0.5em;
  position: relative;
  text-align: left;
}

th,
td {
  border-radius: 0.25em;
  border-style: solid;
}

th {
  background: #EEE;
  border-color: #BBB;
}

td {
  border-color: #DDD;
}

/* page */

html {
  font: 17px/1 'Rubik', sans-serif;
  overflow: auto;
  padding: 0.5in;
}

html {
  background: #bdbdbd;
  cursor: default;
}

body {
  box-sizing: border-box;
  min-height: 11in;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.5in;
  width: 8.5in;
}

body {
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 0 1in -0.25in rgba(12, 147, 231, 0.5);
}

/* header */

header {
  margin: 0 0 3em;
}

header:after {
  clear: both;
  content: "";
  display: table;
}

header h1 {
  border-radius: 0.25em;
  color: #000000;
  margin: 0 0 0em;
  padding: 0.5em 0;
}

*/ header address {
  float: left;
  font-size: 75%;
  font-style: normal;
  line-height: 0.25;
  margin: 1em 1em 0;
}

header address p {
  margin: 0 0 0.25em;
}

header span,
header img {
  display: block;
  float: right;
}

header span {
  margin: 0 0 1em 1em;
  max-height: 25%;
  max-width: 60%;
  position: relative;
}

header img {
  max-height: 100%;
  max-width: 100%;
}

header input {
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 10%;
}

/* article */

article,
article address,
table.meta,
table.inventory {
  margin: 0 0 3em;
}

article:after {
  clear: both;
  content: "";
  display: table;
}

article h1 {
  clip: rect(0 0 0 0);
  position: absolute;
}

article address {
  float: left;
  font-size: 100%;
}

/* table meta & balance */

table.meta,
table.balance {
  float: right;
  width: 40%;



}

table.meta:after,
table.balance:after {
  clear: both;
  content: "";
  display: table;

}

/* table meta */

table.meta th {
  width: 150%;
  height: 15px;
  top: 0px;
  font-size: 10px;

}

table.meta td {
  width: 150%;
  height: 15px;
  top: 0px;
}

/* table items */

table.inventory {
  clear: both;
  width: 100%;

}

table.inventory th {
  font-weight: 500;
  text-align: center;
  top: -250px;
}

table.inventory td:nth-child(1) {
  width: 26%;
  top: -250px;
}

table.inventory td:nth-child(2) {
  width: 38%;
  top: -250px;
}

table.inventory td:nth-child(3) {
  text-align: right;
  width: 12%;
  top: -250px;
}

table.inventory td:nth-child(4) {
  text-align: right;
  width: 12%;
  top: -250px;
}

table.inventory td:nth-child(5) {
  text-align: right;
  width: 12%;
  top: -250px;
}

/* table balance */

table.balance th,
table.balance td {
  width: 50%;
  top: -250px;
}

table.balance td {
  text-align: right;
  top: -250px;
}

/* aside */

aside h1 {
  border: none;
  border-width: 0 0 1px;
  margin: 0 0 1em;

}

aside h1 {
  border-color: #999;
  border-bottom-style: solid;
}

/* javascript */

.add,
.cut {
  border-width: 1px;
  display: block;
  font-size: .8rem;
  padding: 0.25em 0.5em;
  float: left;
  text-align: center;
  width: 0.5em;
  top: 50px;
}

.add,
.cut {

  background-position: 0% 0%;
  box-shadow: 0 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  border-color: #0076A3;
  color: #FFF;
  cursor: pointer;
  font-weight: bold;
  background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
  background-color: #9AF;
  background-repeat: repeat;
  background-attachment: scroll;

}

.add {
  opacity: 10;
  position: absolute;
  top: 1;
  left: -1.5em;

}

.add:hover {
  background: #00ADEE;

}

.cut {
  opacity: 1;
  position: absolute;
  top: 1px;
  left: -1.5em;


}

.cut,
.add {
  -webkit-transition: opacity 100ms ease-in;

}

tr:hover .cut {
  opacity: 1;

}

tr:hover .add {
  opacity: 1;

}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  html {
    background: none;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  body {
    box-shadow: none;
    margin: 0;
  }

  span:empty {
    display: none;
  }

  .add,
  .cut {
    display: none;

  }

  .central_btn {
    display: none;

  }

}

@page {
  margin: 0;
}

.central_btn {
  text-align: center;
}

.central_btn button {
  position: relative;
  margin-top: 80px;
  font-size: 13px;
  padding: 10px 25px;
  border-radius: 5px;
  color: #000;
  border: 2px solid #e1e1e1;
  outline: none;
  font-family: calibri;
  font-weight: 400;
  letter-spacing: 1px;
  background: #fff;
  margin-bottom: 40px;
  top: -110px;
}

input#datepicker {
  width: 100%;

  &:checked+label {
    &::after {
      content: '';
      background: var(--border-color);
    }
  }

}

section.signature p {
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  letter-spacing: 1px;
  line-height: 1.4 !important;
}

/*  */
.ui-datepicker .ui-datepicker-title span.ui-datepicker-month {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 15px;
}

.ui-datepicker .ui-datepicker-title span.ui-datepicker-year {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 15px;
}

th .ui-datepicker-week-end {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 12px;
}

.ui-datepicker table th {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 13px;
}

.ui-datepicker td {
  font-size: 13px;
  font-family: 'Rubik', sans-serif;
}

.ui-datepicker td a.ui-state-default.ui-state-highlight.ui-state-active {
  background: #ffffff;
  color: #3F51B5;
  border: 1px solid #3F51B5;
  text-align: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: -4px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker table thead tr th:nth-child(2) {
  background: #F44336;
  color: #fff;
}

.ui-datepicker th {
  padding: 5px;
  text-align: center;
  font-weight: bold;
  border: 0;
  border-radius: 0;
}

.ui-datepicker table tbody tr td:nth-child(2) a.ui-state-default {
  border: 1px solid #f44336;
  text-align: center;
  background: #f44336;
  color: #fff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #00BCD4;
  background: #00BCD4 50% 50% repeat-x;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
}

.ui-datepicker table th {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 13px;
  background: #3c3c3c;
  color: #fff;
  border-right: 2px solid #fff;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
  border: none;
  background: none;
}

.ui-datepicker table tbody tr a.ui-state-default.ui-state-active {
  background: #fff !important;
  color: #00bcd4 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: none;
  background: none;
  font-weight: normal;
  color: #FFC107;
}




/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */


.section.top,
.section.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;


}

.section.center {
  padding: 5px;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;


  .program-field {
    grid-column: 1/-1;
  }
}

.dotted {
  border: #999;
  font-weight: 500;
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 2px !important;
  src: format(woff2);
  transform: translateY(-2px);
  margin-right: 2px;
  padding-left: 1.0px;
  border-style: solid;
  background-color: #54545411;
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 12px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-collapse: separate;
  border: 1.5px solid #0000004c;
  border: 1px solid transparent;




  &:focus {
    border: nsone;
    border-bottom: 1px solid var(--dotted-color);
    outline: none;
  }

  v>span:first-of-type {
    width: 100%;
  }
}

.title {
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -325px;
  overflow: hidden;
  white-space: nowrap;
}



.left {
  position: relative;
  left: -70px;
  top: -230px;
  text-align: center;

}

.left2 {
  position: relative;
  left: -100px;
  top: -110px;
  text-align: center;

}

.right {
  position: relative;
  right: 120px;
  top: -165px;
  text-align: center;
  font-size: 10px;
}

.firma1 {
  font-size: 12px;
  right: -170px;
  top: -190px;
  width: 110px;
  height: 120px;
  text-align: center;
  background-color: #8b8b8b64;
  font-weight: 500;
  box-shadow: #000000;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /* border: 1.5px solid #0000004c; */
}

.firma2 {
  font-size: 12px;
  right: -170px;
  top: -272px;
  text-align: center;
  font-weight: 500;
  box-shadow: #000000;
  background-color: #8483836e;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  width: 110px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /* border: 1.5px solid #0000004c; */

}

.escritura {
  font-size: 12px;
  bottom: 30px;
  right: -50px;
  top: -160px;
  text-align: center;
  background-color: #8b8b8b64;
  font-weight: 500;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  width: 110px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-collapse: separate;
  /* border: 1.5px solid #0000004c; */
}

.escritura2 {
  display: 0 inline-block !important;
  font-size: 12px;
  bottom: 30px;
  right: -48px;
  top: -151px;
  text-align: center;
  background-color: #8b8b8b64;
  font-weight: 500;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  width: 100px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /* border: 1.5px solid #0000004c; */


}

.dotted2 {
  border: #999;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  background: #EEE;
  border-color: #BBB;
  width: 118px;
  height: 12px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  bottom: 29px;
  right: -50px;
  top: -160px;
  overflow: hidden;
  white-space: nowrap;

  /* border: 1.5px solid #0000004c; */
  &:focus {
    border: none;
    border-bottom: 2px solid var(--dotted-color);
    outline: none;
  }
}

.dotted3 {
  border: #999;
  font-weight: 500;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 4px;
  background: #EEE;
  border-color: #BBB;
  width: 120px;
  height: 12px;
  border-width: 1px;
  padding: 0.2em;
  position: relative;
  top: -152px;
  bottom: 40px;
  right: -48px;
  overflow: hidden;
  white-space: nowrap;
  /* border: 1.5px solid #0000004c; */

  &:focus {
    border: none;
    border-bottom: 2px solid var(--dotted-color);
    outline: none;
  }
}

.dotted4 {
  display: 0 inline-block !important;
  border: #9a2929;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 5px;
  top: -191px;
  width: 102px;
  height: 16.5px;
  position: relative;
  right: -170px;
  top: -190px;
  overflow: hidden;
  white-space: nowrap;
  background: #EEE;
  border-color: #BBB;
  /* border: 1.5px solid #0000004c; */

  &:focus {
    border: none;
    border-bottom: 2px solid var(--dotted-color);
    outline: none;
  }
}

.dotted5 {
  display: 0 inline-block !important;
  border: #999;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px dotted var(--dotted-color);
  margin-bottom: 0 !important;
  transform: translateY(-1px);
  margin-right: 1px;
  padding-left: 1px;
  border-radius: 5px;
  right: -170px;
  top: -272px;
  position: relative;

  overflow: hidden;
  white-space: nowrap;
  background: #EEE;
  border-color: #BBB;
  width: 93px;
  height: 16.5px;
  /* border: 1.5px solid #0000004c; */

  &:focus {
    border: none;
    border-bottom: 2px solid var(--dotted-color);
    outline: none;
  }
}

h1 {

  font-size: 15px;
  position: relative;
  right: 145px;
  top: -100px;
  overflow: hidden;
  white-space: nowrap;
}

img {
  position: relative;
  width: 100px;
  top: -20px;
  right: 320px;
  overflow: hidden;
  white-space: nowrap;
}

p {
  display: 0 inline-block !important;
  font-size: 12px;
  position: relative;
  font-size: 14x;
  right: 145px;
  top: -95px;
  overflow: hidden;
  white-space: nowrap;
}

.b {
  position: relative;
  top: 120px;
  text-align: center;
}

.b2 {
  position: relative;
  top: 120px;
  text-align: center;
}

.content {
  font-size: 12px;
  position: relative;
  top: -330px;
  text-align: center;
  text-align-last: center;
}

.d {
  position: relative;
  top: 100px;
  text-align: center;

}

.title3 {
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -10px;
  overflow: hidden;
  white-space: nowrap;
}

.title4 {
  font-size: 15px;
  left: 249px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -90px;
  overflow: hidden;
  white-space: nowrap;
}

.d {
  position: relative;
  top: 100px;
  text-align: center;

}

.title5 {
  font-size: 15px;
  left: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -1px;
  overflow: hidden;
  white-space: nowrap;
}

.title6 {
  font-size: 12px;
  left: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -1px;
  overflow: hidden;
  white-space: nowrap;
}

.title7 {
  font-size: 15px;
  left: 250px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -0px;
  overflow: hidden;
  white-space: nowrap;
}

.title8 {
  font-size: 15px;
  left: 250px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  top: -40px;
  overflow: hidden;
  white-space: nowrap;
}

table.meta2 {
  float: left;
  width: 40%;
  top: 0px;
  height: 90%;

}

table.meta2:after {
  clear: both;

  content: "";
  display: table;
}

table.meta3 {
  float: left;
  width: 30%;
  top: 50px;
  height: 100px;
  font-size: 12px;
}

table.meta3:after {
  clear: both;
  content: "";
  display: table;
}

.td2 {
  width: 400px;
  top: 250px;
  height: 100px;
  left: -423px;
  float: center;
}

.th2 {

  font-size: 13px;
  width: 400px;
  top: -20px;
  height: -100px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  row-gap: 3;
}


.th3 {
  width: 4100px;
  top: 0px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;

}

.th2n {

  width: 400px;
  text-align: inherit;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.td4 {
  width: 405px;
  top: -110px;
  height: 75px;
  left: -420px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;

}

.f {
  position: relative;
  top: -10px;
  text-align: center;
}

.spanm {
  left: -3px;
  height: -30px;
}

.texta {
  width: 400px;
  height: 20px;
  background: #EEE;
  border-color: #000000;
  border-radius: 5px;
  left: -30px;
  grid-row: auto;
}



/* The container */
.container {
  left: 190px;
  top: -10px;
  text-align: center;
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -5px;
  left: 10px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
  background-color: #ccc;

}

/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;


}

/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
  display: block;

}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  height: 10px;
  width: 10px;
}

.checkmark2 {
  position: absolute;
  top: -5px;
  left: 10px;
  height: 20px;
  width: 20px;

  border-radius: 50%;
}

.checkmark3 {
  position: absolute;
  top: -5px;
  left: 10px;
  height: 20px;
  width: 20px;

  border-radius: 50%;
}