.webinar-time {
  display: flex;
  flex-direction: column; }

.webinar-time__item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 66px;
  cursor: pointer;
  background-color: #454545;
  box-shadow: 0 0 30px 0 rgba(147, 36, 223, 0);
  font-size: 18px;
  line-height: 29px;
  transition: background-color 0.2s linear, margin-right 0.2s linear, width 0.2s linear, box-shadow 0.2s linear, margin 0.2s linear;
  margin-bottom: 13px; }
  .webinar-time__item:hover {
    background-color: #2c2c2c; }
  .webinar-time__item:last-child {
    margin-bottom: 0; }
  .form__item-error .webinar-time__item {
    border: 1px solid #dc3545; }

.webinar-time__text {
  position: relative;
  display: block; }
  .webinar-time__text:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -29px;
    z-index: -1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background: url(/images/webinar-bullet.png) no-repeat center #fff;
    background-size: cover;
    transition: opacity 0.2s linear;
    transform: translate(-100%, -50%); }

.webinar-time__radio:checked + .webinar-time__item {
  font-family: "montserratsemibold", Arial, sans-serif;
  background-color: #9324df;
  box-shadow: 0 0 30px 0 rgba(147, 36, 223, 0.69);
  margin-left: -15px;
  margin-right: -15px;
  width: 100vw; }
  .webinar-time__radio:checked + .webinar-time__item .webinar-time__text:after {
    z-index: 10;
    opacity: 1;
    pointer-events: auto; }

@media (min-width: 768px) {
  .webinar-time {
    flex-direction: row;
    align-items: center; }
  .webinar-time__item {
    width: 33%;
    font-size: 14px;
    line-height: 18px;
    margin-right: 10px;
    margin-bottom: 0; }
    .webinar-time__item:last-child {
      margin-right: 0; }
  .webinar-time__text:after {
    left: -5px;
    width: 20px;
    height: 20px; }
  .webinar-time__radio:checked + .webinar-time__item {
    width: 40%;
    margin-left: 0;
    margin-right: 0; }
  .webinar-time__active .webinar-time__item {
    width: 30%; }
  .webinar-time__item-prev {
    margin-right: 0; } }

@media (min-width: 992px) {
  .webinar-time__radio:checked + .webinar-time__item {
    width: 50%; }
  .webinar-time__active .webinar-time__item {
    width: 25%; }
  .webinar-time__text:after {
    left: -29px;
    width: 28px;
    height: 28px; } }

@media (min-width: 1200px) {
  .webinar-time__item {
    font-size: 18px;
    line-height: 26px; } }