/* === CUSTOM CSS === */
$primary-color: #202020;
$background-color: #FFFFFF;
$secondary-color: #FFFFFF;
$font-color: #202020;

$extra-color: #ef4626; // Este color varía según plantilla
$background-label: #fff5f2; // Este color varía según plantilla
$background-label-hover-checked: #FBE1D8; // Este color varía según plantilla
$color-label: #000000; // Este color varía según plantilla
$color-label-hover: #000000; // Este color varía según plantilla
$font-size-15: 15.008px;

/** 08 09 2022 **/

.home_layout .m_action_link {
  display: none;
}
h1 {
  letter-spacing: .05rem;
}

.wrapper.home_layout  {
  .m_header_title {
    margin-bottom: 26px;
    padding-bottom: 25px;
    h1 {
      text-align: center;
      text-transform: uppercase;
      font-weight: bold;
      color: $extra-color;
      font-size: 28px;
      letter-spacing: .15rem;
    }
  }

  .headline_row {
    padding-bottom: 22px;
  }
  .m_text_content{
    font-size: 16px;
    letter-spacing: .05rem;
    line-height: 1.5;
    > * {
      font-size: 1rem;
      line-height: 1.8;
      letter-spacing: .15rem;
    }
  }
}
.m_header_title, .m_tab_nav_item, .form_fields .form_input input, .form_fields .form_input textarea, .m_wysiwyg textarea, .select_content, .row + .row, .fields, .fields + .row, .pagination a{
  border-bottom: 1px solid $extra-color;
}
.m_banner {
  border-bottom: 2px solid $extra-color;
}

// Formulary
.section-form-contender {
  padding: 0 25px;
  @media screen and (min-width: 768px) { 
    padding: 0 55px;
  }
}
.error, .notice, .error_explanation {
  font-size: $font-size-15;
  text-transform: uppercase !important;
  font-weight: 100;
  letter-spacing: 0;
}
.wizard > .steps::before, .wizard > .steps ul > li::after {
  content: none;
}
.wizard > .steps ul > li > a, .wizard > .steps ul > li > a:hover, .wizard > .steps ul > li > a:focus, .wizard > .steps ul > li > a:active {
  padding: 0.1em !important;
  width: 30px;
}
.wizard > .steps ul li.current a, .wizard > .steps .done a {
  background-color: $extra-color !important;
  border: solid 1px $extra-color;
  span {
    color: $secondary-color;
  }
}
.wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active {
  background: $background-label;
  border: solid 1px $extra-color;
}
.wizard>.steps .number {
  font-size: $font-size-15;
  font-weight: 100;
}
.wizard > .steps ul > li > a, .wizard > .steps ul > li > span {
  color: $font-color;
}
form.js_participation_form_wizard:not(.two_steps_quiz) .header_step {
  margin-bottom: 20px;
  .quizz_question {
    text-align: left;
    &.step_error {
      color: $font-color !important;
      background-color: transparent;
    }
  }
}
form .header_step .quizz_question {
  font-size: 1em;
  font-weight: bold !important;
  letter-spacing: inherit;
}
.js_quizz_question .js_answer_image {
  margin: 0 auto;
  width: 100%;
}
.li_wrapper .m_options_list_input .m_option label:not(.step_error), .m_tabs_nav {
  padding: 17px 5px 14px;
  text-align: center;
  border-color: $extra-color !important;
  background-color: $background-label !important;
  color: $color-label !important;
  letter-spacing: 0;
  font-weight: 100;
  font-size: $font-size-15;
  transition: all .3s ease-in-out;
  &:hover {
    background-color: $background-label-hover-checked !important;
    border-color: $extra-color !important;
    color: $color-label-hover !important;
  }
}
.control-point, .control-checks input:disabled ~ .control-point {
  opacity: 0;
}
.m_option_input:checked + .m_option_label {
  background-color: $background-label !important;
  color: $color-label !important;
  border-color: $extra-color !important;
}
.control-checks-link input:checked ~ .control-point::after, .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko):not(.no-answer-with-image) .no-answer.video-answer input:checked ~ label:not(.image_description), .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko):not(.no-answer-with-image) input:checked ~ label:not(.image_description),
.control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko) .video-answer input:checked ~ label:not(.image_description), .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko) .m_options_list_input:not(.no-answer) input:checked ~ label:not(.image_description) {
  background-color: $background-label-hover-checked !important;
  color: $color-label-hover !important;
}
.form_fields ol.align-items-end, .form_fields ul.align-items-end {
  align-items: flex-start !important;
}
.actions ul li a[href="#next"], .actions ul li a[href="#previous"], .actions ul li a[href="#finish"], .actions ul li button[href="#next"], .actions ul li button[href="#previous"], .actions ul li button[href="#finish"],
.link_btn:not(.show_legal):not(#legal_provider_link):not(.open-popup-link), .m_btn:not(.show_legal):not(#legal_provider_link):not(.open-popup-link):not(.m_btn_icon):not(.m_wysiwyg_btn), .m_comments_actions .m_btn_goto, .m_btn_goto {
  letter-spacing: .15rem;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  @media screen and (min-width: 768px) { 
    padding: 0.575rem 0.75rem;
  }
}
#error_explanation, .m_entries_entry_info .error, .m_actions_viewport .error, .wizard > .steps .step_error a, .m_header_step label.step_error, .form_fields .form_input label.step_error, .form_checkbox label.step_error, .js_error_placement_parent .js_error_placement .step_error, .form_select .step_error, .wizard > .content > .body label.step_error {
  color: $extra-color !important;
  background-color: transparent;
}
.pagination, .m_header>*, .m_popup_header {
  text-align: center;
  font-size: 30px;
  letter-spacing: .05;
}

// Thank you page


.entry_layout {
  .notice {
    display: none;
  }
  .raw-contender {
    letter-spacing: .05rem;
    p {
      font-size: 1rem;
      line-height: 1.8;
      letter-spacing: .15rem;
    }
    h1, h2, h3 {
      font-weight: bold !important;
      font-size: 28px;
      letter-spacing: .15rem;
      text-align: center !important;
    }
  }
}

// Cosmopolitan template

.m_header_title .h1, .raw-contender h1, .raw-contender h2, .raw-contender h3 {
  color: $extra-color;
}
.wizard > .steps .number, .li_wrapper .m_options_list_input .m_option label:not(.step_error), .m_tabs_nav {
  font-weight: bold;
}
form.js_participation_form_wizard:not(.two_steps_quiz) .header_step .quizz_question {
  text-align: center;
  font-weight: 400 !important;
  letter-spacing: .15rem;
}
.m_option_input:checked + .m_option_label,
.control-checks-link input:checked ~ .control-point::after, .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko):not(.no-answer-with-image) .no-answer.video-answer input:checked ~ label:not(.image_description), .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko):not(.no-answer-with-image) input:checked ~ label:not(.image_description), .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko) .video-answer input:checked ~ label:not(.image_description), .control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko) .m_options_list_input:not(.no-answer) input:checked ~ label:not(.image_description),
.control-checks:not(.js_quizz_question_ok):not(.js_quizz_question_ko):not(.no-answer-with-image) input:checked ~ label:not(.image_description) {
  background-color: $extra-color !important;
  color: $secondary-color !important;
  border-color: $extra-color !important;
  &:hover {
    color: $color-label !important;
  }
}