.tableimage {
  width: 600px;
  overflow: hidden;
  img {
    margin: auto;
    display: block;
    transition: opacity .5s;
    width: 600px;
    &:hover  {
      opacity: 0;
    }
  }
  &__wrap {
    background-position: 50% 50%;
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
  }
}

.calc-asic-submit {
	display: flex;
    align-items: center;
    justify-content: center;
}

.calc-asic-table-result {
	border: 1px solid rgba(125, 125, 136, .2) !important;
	width: 90vw;
}


/* настройки для всего элемента с чекбоксом */
.checkbox {
  /* меняем внешний вид курсора */
  cursor: pointer;
  /* выравниваем элементы по центру */
  display: flex;
  align-items: center;
}

/* отдельные настройки для самого чекбокса */
.checkbox__input {
  /* устанавливаем абсолютное позиционирование */
  position: absolute;
  /* задаём высоту и ширину */
  width: 1.375em;
  height: 1.375em;
  /* делаем чекбокс непрозрачным, чтобы скрыть исходный элемент и заменить его потом нарисованным 
  opacity: 0;*/
  /* меняем внешний вид курсора */
  cursor: pointer;
}

/* настройки для SVG-иконки */
.checkbox__icon {
  /* размеры совпадают с размерами скрытого чекбокса */
  width: 1.375em;
  height: 1.375em;
  /* убираем ограничение по наименьшей ширине блока */
  flex-shrink: 0;
  /* разрешаем отображать содержимое за пределами блока */
  overflow: visible;
}

/* общие настройки для нового чекбокса и галочки */
.checkbox__icon .tick {
  /* рисовать будем всё отрезками по 20 пикселей */
  stroke-dasharray: 20px;
  /* но сместим начало всех отрезков тоже на 20 пикселей, чтобы пока галочка не рисовалась */
  stroke-dashoffset: 20px;
  /* это даст нам плавную анимацию отрисовки галочки */
  transition: stroke-dashoffset 0.2s ease-out;
}

/* настройки для подписи чекбокса */
.checkbox__label {
  /* добавляем отступ слева */
  margin-left: 0.5em;
}

/* включаем возможность поставить галочку */
.checkbox__input:checked + .checkbox__icon .tick {
  /* убираем смещение для отрезков, чтобы включить анимацию галочки */
  stroke-dashoffset: 0;
}


.check-group {
  /* делаем группе отдельный фон */
  background: #fff;
  /* ограничиваем ширину блока, чтобы он не расползался */
  max-width: 13rem;
  /* добавляем отступы */
  padding: 1.5rem;
  /* делаем красивое скругление и тень */
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 10, 0.2);
  /* сразу добавляем два счётчика, они понадобятся для подсчёта выбранных элементов */
  counter-reset: total;
  counter-reset: checked;
}

/* делаем отступы внутри группы */
.check-group > * + * {
  margin-top: 0.75rem;
}

/* подсчитываем количество всех чекбоксов */
.check-group .checkbox {
  counter-increment: total;
}

/* считаем только отмеченные галочки */
.check-group input[type=checkbox]:checked {
  counter-increment: checked;
}

/* настраиваем внешний вид строки с результатом */
.check-group__result {
  /* делаем жирный шрифт */
  font-weight: bold;
  /* немного отступаем сверху */
  padding-top: 0.75rem;
  /* рисуем тонкую линию над текстом */
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* обрабатываем результаты */
.check-group__result:after {
  /* добавляем строку со значениями счётчиков */
  content: counter(checked) " / " counter(total);
  /* добавляем отступ слева */
  padding-left: 1ch;
}