:root {
  --background: #ecf0f4;
  --molecule-bg: #fff;
  --color: #222;
  --primary: #ff0046;
  --secondary: #28282d;
  --contrast: #f0f0f0;
  --border: #dce1ea;
  --shadow: #d2d7e1;
  --success: #7fff95;
  --warning: #ffb555;
  --error: #ff0046;
  --info: #656d79;
  --muted: #ededf0;
  --gap: 20px;
  --space: 8px;
  --radius: 8px;
  --topBarHeight: 42px;
  --container-padding: 20px;
  --container-width: calc(100vw - var(--container-padding) * 2);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}

body {
  background-color: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--color);
  scroll-behavior: smooth;
}

h1 {
    font-weight: bold;
    font-size: 1.6em
}

a {
    color: inherit;
}

/* Layout */
header, footer {
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header {
  margin-bottom: 2rem;
}

footer {
    margin-top: 4rem;
}

header h1 {
    text-align: center;
}

footer > * + * {
    margin-top: 1rem;
}

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

footer .holiday-a {
    background-color: #00abff;
}

footer .holiday-b {
    background-color: #97ff00;
}

footer .holiday-c {
    background-color: #ff00ef;
}

footer button {
  margin: 1rem;
}

.container {
  box-sizing: border-box;
  width: 100%;
  padding-left: calc(50% - var(--container-width) / 2);
  padding-right: calc(50% - var(--container-width) / 2);
}

.page__header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-inputs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.page__content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Form */
.form-help {
  color: var(--info);
  font-size: 0.9em;
}

.selection .form-help {
  margin-bottom: var(--space);
}

.multiple-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: flex-end;
}

.settings-form, .settings-inputs, .setting-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: flex-end;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-group label {
  padding: 0 calc(var(--space));
}

input, select {
  background-color: var(--molecule-bg);
  border: none;
  border-radius: var(--radius);
  color: var(--color);
  font-family: inherit;
  font-size: inherit;
  padding: 6px 8px;
}

fieldset {
  border: unset;
}

fieldset legend {
  margin-bottom: var(--space);
}

.multiple-checkbox input[type="checkbox"],
.multiple-checkbox input[type="radio"] {
  opacity: 0;
  width: auto;
  display: none;
}

.multiple-checkbox input[type="radio"]:checked + label,
.multiple-checkbox input[type="checkbox"]:checked + label {
  font-weight: bold;
  border-width: 3px;
  border-color: var(--secondary);
}

.multiple-checkbox label,
.multiple-checkbox div[data-status="publicholiday"] {
  border: 3px solid transparent;
  padding: 2px 8px;
  border-radius: 23px;
  display: inline-block;
}

.multiple-checkbox label {
  cursor: pointer;
}

.button-primary {
  background-color: var(--secondary);
  color: var(--contrast);
}

button,
.button {
  border: none;
  border-radius: var(--radius);
  font-size: inherit;
  color: inherit;
  padding: 6px 8px;
  cursor: pointer;
  background-color: unset;
  display: inline-flex;
}

/* Counter */
.counter {
  line-height: 1.6;
}

.counter_total {
  font-weight: bold;
}

.exceed {
  color: var(--error);
}

.exceed::before {
  content: "\26A0";
}

/* Calendar */

.calendar-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 100%);
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding: 1rem 2rem;
}

.monthname {
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
  font-size: 1.2em;
}

.days {
  background-color: #fff;
  border-radius: 4px;
}

.day {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.day-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 12px);
  padding: 4px 6px;
}

.day-divide {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 9;
}

.day-divide div {
  width: 50%;
}

.workday .day-divide div:hover {
  background-color: red;
  cursor: pointer;
}

.days > .day + .day {
  border-top: 1px solid #dce1ea;
}

.weekend {
  background-color: #6b808a;
  color: #ededf0;
}

.current-day {
  background-color: #00ffff;
  color: #222;
}

.public-holiday {
  background-color: #3d4d5d;
  color: #ededf0;
}

.day-date {
  margin-right: 6px;
}

.holiday-name {
  font-size: .6em;
}

.holiday {
  min-width: 12px;
}

.holiday > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
}

.zone-a .holiday-a {
  right: 8px;
  background-color: #00abff;
}

.zone-b .holiday-b{
  right: 4px;
  background-color: #97ff00;
}

.zone-c .holiday-c{
  right: 0;
  background-color: #ff00ef;
}

/* Calendar action */
[data-type="cp"] {
  background-color: #f0808083;
}

[data-type="rtt"] {
  background-color: #87cefa79;
}

[data-type="mandatory"] {
  background-color: #adbbff87;
}

/* Media Queries */
@media screen and (min-width: 800px) {
  .calendar-container{
      grid-template-columns: repeat(12, 1fr);
  }

  .monthname{
      font-size: 1em;
  }

  .day-date-rest,.holiday-name{
      display: none;
  }
}

@media screen and (min-width: 1720px) {
  .day-date-rest, .holiday-name{
      display: inline;
  }

  .monthname{
      font-size: 1.2em;
  }
}

@media print {
  * {
      print-color-adjust: exact;
  }
  
  body {
      background-color: unset;
  }

  main {
      display: block;
  }

  .calendar-container {
      grid-template-columns: repeat(12, 1fr);
      overflow-x: unset;
      padding: 0;
  }

  .month {
      min-width: 180px;
  }

  .current-day {
      background-color: unset;
  }

  header button,
  header .subtitle,
  footer .current-day,
  footer .data-source {
      display: none;
  }

  a {
      text-decoration: none;
  }

  a:after {
      content: " ("attr(href)")";
  }
}