*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background-color: #1f2a38;
  color: #ecf0f1;
  font-family: "Open Sans", sans-serif;
}

h1 {
  color: #ecf0f1;
}

table.planner {
  margin: auto;
  font-family: "Open Sans", sans-serif;
  border-collapse: collapse;
  table-layout: fixed;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
/* Cells */
.planner thead tr th,
.planner tbody tr td {
    position:  relative;
    background-color: #26313f;
    width: 80px;
    border: 0.15em solid transparent;
    /* Видимая граница между днями недели (не просто транспарентный отступ,
       как раньше) - ширина (0.5em дестоп / 2px мобильный, см. media-запрос
       ниже) не трогается, меняется только цвет, поэтому колонки не смещаются
       по ширине между строками. */
    border-left: 0.5em solid rgba(255, 255, 255, 0.1);
    border-right: 0.5em solid rgba(255, 255, 255, 0.1);
}

/* Header cells */
.planner thead tr th {
    color: #ecf0f1;
    background-color: #34495e;
    padding: 0.3em;
    border-bottom-width: 0.8em;
}

/* First column header cells */
.planner thead tr th:nth-child(1) {
    width: 2em;
    background-color: transparent;
    padding: 0;
    /* Пустая ячейка над колонкой времени - ей не с чем "делить день", вертикальная
       граница дней (см. выше) тут не нужна и выглядит как лишняя линия сама по себе. */
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Body cells */
.planner tbody tr td {
  border-radius: 1em;
  height: 0.8em;
}

.planner tbody tr td:hover {
  background-color: #3d566e;
  cursor: pointer;
}


/* First column body cells */
.planner tbody tr td:nth-child(1) {
  width: 2em;
  font-size: 0.9em;
  background-color: transparent;
  padding: 0;
  /* Колонка с подписями времени (00h, 02h...) не является днём - вертикальная
     граница дней тут смотрится лишней линией слева/справа от подписи. */
  border-left-color: transparent;
  border-right-color: transparent;
}

/* First column body content */
.planner tbody tr td:nth-child(1) span {
  color: #ecf0f1;
  right: 0;
  display:none;
  position: absolute;
  top: -100%;
}

/* Every 4 lines -> first column cell */
.planner tbody tr:nth-child(4n + 1) td:nth-child(1) span {
  display: inline;
}
.planner tbody tr:nth-child(8n) td{
  border-bottom-width: 0.25em;
}

/*****************************
            Cell State
******************************/
/* Подсветка ячеек во время выделения времени под новое событие - !important
   по той же причине, что и у .has-event ниже: иначе перекрывается цветом
   6-часовой полосы (--row-band, см. categories.css), у которой сравнимая
   специфичность селектора. */
.planner td.selected {
  background-color: #4a90e2 !important;
}

.planner td.unfocus{
  opacity: 0.5;
}

.planner .tooltip {
  font-size: 0.8em;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  background-color: #1b2431;
  color: #ecf0f1;
  opacity: 0.95;
  position: fixed;
  display: inline-block;
  /* Следует за курсором - без этого сама подсказка периодически оказывается
     "под" курсором и перехватывает mousemove/mouseup, ломая расчёт ячейки/времени
     под курсором (event.target перестаёт быть <td>). */
  pointer-events: none;
}

/*****************************
            Misc
******************************/
.container {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  background-color: #1f2a38;
  box-sizing: border-box;
  padding : 3em;
  overflow:auto;
}

/* 3em (~48px) padding on each side eats almost a third of a phone-width
   screen - the fixed desktop value never had a mobile override before. */
@media (max-width: 600px) {
  .container {
    padding: 0.4em;
  }
}

/* Cell class */
.planner td.cell {
  cursor: pointer;
  transition: background-color 0.2s;
}

.planner td.cell:hover {
  background-color: #3d566e;
}