.header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.well {
  background-color: antiquewhite;
}

.generate_buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.two_column {
  display: grid;
  grid-template-areas:
    "reload language"
    "invoice language";
  grid-template-columns: 2fr 1fr;
  gap: 15px;
}

.well .two_column_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#app-reload {
  grid-area: reload;
  background-color: #43beee;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
}

.generate_buttons #app-modify_all {
  background-color: rgb(8, 197, 255);
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
}

.generate_buttons #app-report_ns-report,
#app-bump_month_ns-update_dates {
  background-color: rgb(8, 197, 128);
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
  margin: 5px;
}

.generate_buttons #app-download_zip_ns-downloadPresets {
  background-color: #43beee;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
}

button[type="button"] {
  background-color: rgb(250, 225, 156);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  overflow: visible;
  white-space: pre-line;
}

#invoice-form-container {
  grid-area: invoice;
}

#app-lang {
  grid-area: language;
}

.wrap {
  overflow: visible;
  white-space: pre-line;
}

@media (max-width: 714px) {
  .well .four_column_grid_center {
    margin-top: 20px;
  }
  .well .seven_column_grid {
    margin-top: 20px;
  }
  .four_items_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (min-width: 715px) {
  .nwd-grid {
    display: grid;
    grid-template-columns: 5fr 1fr 4fr;
  }

  .well > .two_column_grid_gap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .well .three_column_grid_equal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
  }

  .four_items_grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
  }

  .well .three_column_grid_left_big {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
  }

  .well .four_column_grid_center {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
    gap: 15px;
  }

  .well .seven_column_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 3fr 1fr 1fr 1fr;
    gap: 10px;
  }

  .well .five_column_grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    gap: 15px;
  }
}

.well .five_column_grid > div {
  width: 100%;
}

.four_column_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

.go-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: normal;
  vertical-align: bottom;
}

.go-center-vertical {
  display: flex;
  align-items: center;
}

.go-center {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.go-center > .form-group {
  margin-bottom: 0;
}

.form-group-container > .form-group {
  margin-bottom: 0;
}

.form-group .shiny-input-container {
  display: flex;
  align-items: center;
}

.form-group > #app-invoiceNumber-label,
.form-group > #app-datesdelivery_month_text-label {
  display: none;
}

.salary_and_days_container {
  display: grid;
  grid-template-areas:
    "salary salary salary salary"
    "modified modified modified non_working_days";
  gap: 15px;
}

.salary {
  grid-area: salary;
}

.modified {
  grid-area: modified;
}

.non_working_days {
  grid-area: non_working_days;
  display: grid;
  gap: 15px;
}
.well .shiny-split-layout > div > div > #app-currency_date_ns-increaseInvoiceNumber,
.well .shiny-split-layout > div > div > #app-currency_date_ns-increaseDates,
.well .shiny-split-layout > div > div > #app-bump_month_ns-increaseMonth,
.well .shiny-split-layout > div > div > #app-salary_ns-increaseSingleDate,
.well .shiny-split-layout > div > div > #app-salary_ns-increaseDate {
  width: 0;
  height: 25px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;

  border-bottom: 25px solid rgb(179, 176, 28);

  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  border-top: none;
  box-shadow: none;
}

.well .shiny-split-layout > div > div > #app-currency_date_ns-decreaseInvoiceNumber,
.well .shiny-split-layout > div > div > #app-currency_date_ns-decreaseDates,
.well .shiny-split-layout > div > div > #app-bump_month_ns-decreaseMonth,
.well .shiny-split-layout > div > div > #app-salary_ns-decreaseSingleDate,
.well .shiny-split-layout > div > div > #app-salary_ns-decreaseDate {
  width: 0;
  height: 25px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;

  border-top: 25px solid rgb(179, 176, 28);

  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  border-bottom: none;
  box-shadow: none;
}

.go-bottom > div {
  flex-grow: 1;
}

.bottom-margin-10 {
  margin-bottom: 10px;
}

.fit-content {
  width: fit-content;
}

a:hover {
  text-decoration: none;
}

.flex-dates {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 150px;
  align-items: center;
  gap: 10px;
}

.col-sm-3 > img {
  width: 100%;
  max-width: 450px;
}
