/* Таблицы: стили вывода на сайте.
   Цвета и размеры можно переопределить, задав переменные, например:
   .sm-t { --smt-head-blue-bg: #e8f0ff; --smt-accent: #d33; } */

.sm-t-wrap {
  max-width: 100%;
  margin: 0 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sm-t {
  --smt-border: #dcdcdc;
  --smt-text: #222;
  --smt-accent: #ef7a50;
  --smt-head-blue-bg: #eaf4fb;
  --smt-head-blue-text: #4aa8d8;
  --smt-head-orange-bg: var(--smt-accent);
  --smt-head-orange-text: #fff;
  --smt-head-peach-bg: #fde4d8;
  --smt-head-peach-text: var(--smt-accent);
  --smt-muted: #9a9a9a;
  --smt-radius: 12px;

  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--smt-text);
}

.sm-t__c {
  padding: 24px 20px;
  border-right: 1px solid var(--smt-border);
  border-bottom: 1px solid var(--smt-border);
  background: #fff;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* наружные границы (у ячеек, лежащих на краю таблицы или рядом с «пустой» ячейкой) */
.sm-t__c.bt { border-top: 1px solid var(--smt-border); }
.sm-t__c.bl { border-left: 1px solid var(--smt-border); }

/* скругления углов */
.sm-t__c.r-tl { border-top-left-radius: var(--smt-radius); }
.sm-t__c.r-tr { border-top-right-radius: var(--smt-radius); }
.sm-t__c.r-bl { border-bottom-left-radius: var(--smt-radius); }
.sm-t__c.r-br { border-bottom-right-radius: var(--smt-radius); }

/* выравнивание */
.sm-t__c--al-l { text-align: left; }
.sm-t__c--al-c { text-align: center; }
.sm-t__c--al-r { text-align: right; }

/* стили ячеек */
.sm-t__c--hblue {
  background: var(--smt-head-blue-bg);
  color: var(--smt-head-blue-text);
}
.sm-t__c--horange {
  padding: 10px 20px;
  background: var(--smt-head-orange-bg);
  color: var(--smt-head-orange-text);
  border-color: var(--smt-head-orange-bg);
  border-right-color: #fff;
}
.sm-t__c--hpeach {
  padding: 22px 12px;
  background: var(--smt-head-peach-bg);
  color: var(--smt-head-peach-text);
}
.sm-t__c--empty {
  padding: 0;
  background: transparent;
  border: 0;
}

/* мелкий серый текст (пояснения) */
.sm-t small {
  font-size: .85em;
  font-weight: 600;
  color: var(--smt-muted);
}
.sm-t a { color: inherit; text-decoration: underline; }

@media (max-width: 768px) {
  .sm-t { font-size: 14px; }
  .sm-t__c { padding: 14px 10px; }
  .sm-t__c--horange { padding: 8px 10px; }
  .sm-t__c--hpeach { padding: 14px 8px; }
}