#consult_container {

}

/* Скрываем стандартный радио-элемент */
#consult_container input[type="radio"] {
  display: none;
}

/* Стиль для кастомной кнопки */
#consult_container .custom-radio {
  display: inline-block;
  width: 24px;  height: 24px;
  border: 2px solid #308446;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  vertical-align: top;
}

/* Заполнение при выборе */
#consult_container .custom-radio::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #308446;
  border-radius: 50%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Активное состояние */
#consult_container input[type="radio"]:checked + .custom-radio::after {
  opacity: 1;
}

/* Дополнительно: отступы */
#consult_container label {
  /*display: inline-block;*/
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20px;
  padding-left: 15px;
}

#consult_container .elementor-field-option {
  padding-top: 7px; padding-bottom: 7px;
}

#consult_container .consultant_slide { display: none; }
/* Show slides in editor */
body.elementor_library-template-default.single-elementor_library.logged-in.elementor-editor-active
#consult_container .consultant_slide  { display: block !important; }

#consult_message_area input { background: #FFF !important; border-radius: 7px; }

#open_chat_popup_btns {
  display: block; width: 1px !important; height: 1px !important; overflow: hidden;
}

#chat_container { overflow-x: hidden !important; width: 100%; }
#chat_container iframe {
  overflow-x: hidden !important; /* Убирает горизонтальную прокрутку внутри iframe */
  width: calc(100% - 2px); /* Убедитесь, что ширина iframe равна 100% */
  border: none; box-sizing: border-box;
}

.course_row_data {
   cursor: pointer; border-bottom: #CCC 2px solid; 
  .course_briefcase { width: 70px; height: 53px; display: block; }
  .course_title { font-weight: bold; font-size: 12pt; color: #333; }
  .course_params { font-size: 11pt; color: #555; margin-top: 5px; }
  .course_price {
    font-size: 14pt; color: #333; font-weight: bold;
    svg { fill: #308446;  width: 15px; vertical-align: middle; margin-right: 6px; }
  }
  .course_format {
    margin-top: 10px; font-size: 9.6pt; color: #555;
  }
  .e-fas-chevron-right { fill: #308446; width: 12px; vertical-align: middle;   }
  &:hover { background-color: #ececec;  }
}

#course_fast_filter, .courses_template { width: 100% !important; display: block; }
#course_pagination { width: 100%; display: block; }
#course_pagination .page_link {
  width: 40px;
  cursor: pointer; background: #308446; color: #FFF !important;
  text-decoration: none; font-size: 10pt; text-align: center; font-weight: bold;
  padding: 5px 10px; border-radius: 5px; display: inline-block; margin-left: 5px; margin-top: 5px;
  &:hover {  background: #ffce45; color: #333;  }
}
#course_pagination .page_link.active {
  cursor: default; background: #6b6b6b; color: #FFF !important;
}

/**
* Стили для сетки 12 колонок
**/
/* Стили для контейнера и строки */
.container_greed {

  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;

  .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  /* Базовый стиль для колонок */
  [class*="col-"] {
    box-sizing: border-box;
    padding: 15px;
    flex-grow: 1;
  }

  /* Стили для ширины колонок */
  .col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .col-3 { flex: 0 0 25%; max-width: 25%; }
  .col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .col-6 { flex: 0 0 50%; max-width: 50%; }
  .col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-9 { flex: 0 0 75%; max-width: 75%; }
  .col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .col-12 { flex: 0 0 100%; max-width: 100%; }

  /* Медиазапросы для адаптивных размеров */
  @media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-sm-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-sm-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-sm-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  }

  @media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-md-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-md-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-md-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-md-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  }

  @media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-lg-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-lg-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-lg-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  }

  @media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-xl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-xl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-xl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  }
}