.calendar-block {
  display: block;
  z-index: 1030;
  position: relative;
  max-width: 100%;
}
.calendar-block.calendar-block__inline {
  z-index: auto;
}
.calendar-block .calendar-inner-block {
  border-radius: 20px;
  border: 2px solid #70D001;
  background: #1C1C1C;
}
.calendar-block:not(.calendar-block__top) .calendar-inner-block {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .calendar-block:not(.calendar-block__top) .calendar-inner-block {
    margin-bottom: 80px;
  }
}
.calendar-top.animation-left a:not(.calendar-button) {
  animation: linear animation-label-left 0.3s;
}
.calendar-top.animation-right a:not(.calendar-button) {
  animation: linear animation-label-right 0.3s;
}
.calendar-table.animation-left {
  animation: linear animation-left 0.1s;
}
.calendar-table.animation-right {
  animation: linear animation-right 0.1s;
}
.calendar-top {
  border-bottom: 1px solid #70D001;
  height: 72px;
  padding: 0 30px;
  display: flex;
  justify-content: space-around;
  position: relative;
  font-size: 16px;
}
.calendar-top > * {
  display: flex;
  align-items: center;
  padding: 0 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  color: #FFF;
  width: 100%;
  justify-content: center;
  transition: color 0.2s linear, font-weight 0.2s linear, font-size 0.2s linear;
}
.calendar-top > *:hover {
  color: #70D001;
}
.calendar-top > *.active {
  color: #70D001;
  font-weight: 600;
}
.calendar-top > *.disabled {
  cursor: default;
}
.calendar-top.calendar-top__month > *.active {
  font-size: 20px;
}
.calendar-button {
  position: absolute;
  height: 100%;
  top: 0;
  width: auto;
}
.calendar-button svg {
  display: block;
  width: 12px;
}
.calendar-button svg path {
  transition: fill 0.2s linear;
  fill: #70D001;
}
.calendar-button:hover svg path {
  fill: #70D001;
}
.calendar-button.button-prev {
  left: 16px;
  padding-right: 0;
}
.calendar-button.button-prev svg {
  transform: rotate(90deg);
}
.calendar-button.button-next {
  right: 16px;
  padding-left: 0;
}
.calendar-button.button-next svg {
  transform: rotate(-90deg);
}
.calendar-days-ranges {
  padding: 30px;
  display: flex;
}
.calendar-ranges {
  padding-right: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: -7px 0;
}
.calendar-ranges > * {
  height: 100%;
  padding: 7px 0;
  display: flex;
}
.calendar-ranges-select {
  display: none;
  padding: 30px 30px 0;
}
.calendar-range {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: #1C1C1C;
  color: #FFF;
  border: 1px solid #70D001;
  border-radius: 5px;
  width: 100%;
  transition: border-color 0.2s linear, box-shadow 0.2s linear, color 0.2s linear;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  line-height: 1;
}
.calendar-range:hover {
  border-color: 2px solid #70D001;
  color: #70D001;
}
.calendar-range.active {
  border-color: #70D001;
  box-shadow: 0px 3px 6px rgba(81, 142, 247, 0.17);
  color: #70D001;
}
.calendar-table {
  margin: -14px 0;
}
.calendar-table table.table-days > tbody > tr {
  height: auto;
}
.calendar-table table.table-days > tbody > tr > td {
  padding: 4px;
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.calendar-table table.table-days > tbody > tr > td:first-child {
  padding-left: 0;
}
.calendar-table table.table-days > tbody > tr > td:last-child {
  padding-right: 0;
}
.calendar-table table.table-days > tbody > tr > td.header,
.calendar-table table.table-days > tbody > tr > td.available {
  opacity: 1;
}
.calendar-table table.table-days > tbody > tr > td.header .item-circle,
.calendar-table table.table-days > tbody > tr > td.available .item-circle {
  color: #FFF;
}
.calendar-table table.table-days > tbody > tr > td.available .item-circle {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0);
  transition: 0.2s;
}
.calendar-table table.table-days > tbody > tr > td.available .item-circle:not(.start-date):not(.end-date):hover {
  background-color: #1C1C1C;
  color: #70D001;
  border: 2px solid #70D001;
}
.calendar-table table.table-days > tbody > tr > td .item-circle {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 15px;
  border-radius: 50%;
  color: #636363;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.header {
  font-size: 15px;
  margin-bottom: 5px;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.day-other-months {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 50%;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.in-range,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-day,
.calendar-table table.table-days > tbody > tr > td .item-circle.start-day {
  color: #636363;
  background-color: #FFF;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.in-range::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  right: 0;
  background: #FFF;
  z-index: -1;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.today {
  background-color: #636363;
  color: #FFF;
  border: none;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.today:hover {
  background-color: #636363;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.start-date,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-date {
  background-color: #70D001;
  color: #FFF;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.start-date:hover,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-date:hover {
  background-color: #70D001;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.start-date.to-range::before,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-date.to-range::before,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-day.to-range::before,
.calendar-table table.table-days > tbody > tr > td .item-circle.start-day.to-range::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: #FFF;
  z-index: -1;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.start-date.to-range::before,
.calendar-table table.table-days > tbody > tr > td .item-circle.start-day.to-range::before {
  left: 50%;
  right: 0;
}
.calendar-table table.table-days > tbody > tr > td .item-circle.end-date.to-range::before,
.calendar-table table.table-days > tbody > tr > td .item-circle.end-day.to-range::before {
  right: 50%;
  left: 0;
}
@keyframes animation-right {
  0% {
    transform: translate(30px, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate(15px, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}
@keyframes animation-left {
  0% {
    transform: translate(-30px, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate(-15px, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}
@keyframes animation-label-right {
  0% {
    transform: translate(10px, 0);
    opacity: 0.3;
  }
  50% {
    transform: translate(5px, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}
@keyframes animation-label-left {
  0% {
    transform: translate(-10px, 0);
    opacity: 0.3;
  }
  50% {
    transform: translate(-5px, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}
@media (max-width: 991px) {
  .calendar-top {
    border-bottom: none;
    height: 55px;
  }
  .calendar-top.calendar-top__month {
    background-color: #70D001;
  }
  .calendar-top.calendar-top__month > * {
    color: rgba(255, 255, 255, 0.6);
  }
  .calendar-top.calendar-top__month > *.active,
  .calendar-top.calendar-top__month > *:hover {
    color: #FFF;
  }
  .calendar-top.calendar-top__month .calendar-button svg path {
    fill: rgba(255, 255, 255, 0.6);
  }
  .calendar-top.calendar-top__month .calendar-button:hover svg path {
    fill: #FFF;
  }
}
@media (max-width: 509px) {
  .calendar-top {
    font-size: 14px;
  }
  .calendar-top.calendar-top__month {
    font-size: 12px;
  }
  .calendar-top.calendar-top__month > .active {
    font-size: 16px;
  }
  .calendar-block {
    width: 100%;
  }
  .calendar-ranges {
    display: none;
  }
  .calendar-ranges-select {
    display: block;
  }
  .calendar-table {
    width: 100%;
  }
  .calendar-table > table {
    width: 100%;
  }
}
@media (max-width: 399px) {
  .calendar-top {
    padding: 0 15px;
    height: 42px;
  }
  .calendar-button.button-prev {
    left: 5px;
  }
  .calendar-button.button-next {
    right: 5px;
  }
  .calendar-days-ranges {
    padding: 15px;
  }
  .calendar-ranges-select {
    padding: 15px 15px 0;
  }
  .calendar-table {
    margin-bottom: 0;
  }
  .calendar-table table.table-days > tbody > tr > td .item-circle {
    width: 30px;
    height: 30px;
  }
}