/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
.gform-theme--framework .gfield--type-product .ginput_container.ginput_container_singleproduct,
.gfield_checkbox input[type=checkbox]+label:before,
.gfield_checkbox input[type=checkbox]:checked+label:after,
.gform_wrapper .ginput_container_radio .gfield_radio .gchoice input[type=radio]+label::before,
.gform_wrapper .ginput_container_radio .gfield_radio .gchoice input[type=radio]:checked+label::after,
.gpi-available-inventory-message {
  display: none;
}

.gform-theme--foundation fieldset.training-choice {
  display: none !important;
}

.gform-theme--framework .gfield--type-product .gfield_description .training-des p {
  margin-bottom: 15px;
}

.gform-theme--framework .gfield--type-product .gfield_description .training-des strong {
  font-weight: bold;
}

.gform_wrapper .ginput_container_radio .gfield_radio .gchoice input[type=radio]+label {
  padding-left: 12px;
}

#gform_page_1_6 .gform_previous_button {
  display: none;
}

div.training-choice .gfield_description .training-des {
  display: none;
}

#desktop-sidebar {
  background: transparent url(/wp-content/uploads/2024/04/traing-side-bar.jpg) top left no-repeat !important;
  color: #fff;
}

#desktop-sidebar h2 {
  color: #fff;
}

.progress-bar {
  position: relative;
  height: 100px;
  width: 100px;
}

.progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.progress-bar div.chartDes {
  position: relative;
}

.progress-bar div div {
  position: absolute;
  font-family: Arial;
  font-size: 13px;
  line-height: 16px;
  height: 80px;
  width: 80px;
  left: 10px;
  top: 10px;
  text-align: center;
  border-radius: 50%;
  background-color: #ECF0F1;
}

.progress-bar div div span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 11px;
  font-weight: 400;
  transform: translate(-50%, -50%);
  width: 70px;
  color: #111111;
}

.progress-bar div div span strong {
  font-size: 18px;
  display: block;
  padding-top: 5px;
  font-weight: 850;
  color: #000000;
}

.progress-bar .background {
  background-color: #b3cef6;
}

.progress-bar .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

/* Style training-pool */
#training-form-wrapper {
  position: relative;
}

#training-form-wrapper .partial_entry_warning {
  margin-bottom: 0 !important;
}

#training-form-wrapper .gform_validation_errors {
  margin-bottom: 0;
}

#training-form-wrapper .gfield_checkbox>div {
  display: flex;
  align-items: center;
}

#training-form-wrapper .gfield_checkbox input[type=checkbox]+label {
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
}

#training-form-wrapper .elementor-widget-wrap {
  max-width: 720px;
}

#training-form-wrapper .gf_page_steps {
  position: relative;
  gap: 8px 30px;
  margin-bottom: 35px;
}

#training-form-wrapper .gf_page_steps>div {
  width: 16px;
  height: 16px;
  background-color: white;
  position: relative;
  border: 2px solid #80D0E8;
  border-radius: 50%;
}

#training-form-wrapper .gf_page_steps>div:not(:last-child):before {
  content: '';
  position: absolute;
  right: -34px;
  height: 1.5px;
  background-color: white;
  width: 32px;
  top: 50%;
  transform: translateY(-50%);
}

#training-form-wrapper .gf_page_steps>div.gf_step_completed:not(:last-child):before {
  content: '';
  background-color: #80D0E8;
}

#training-form-wrapper .gf_page_steps>div.gf_step_completed::after,
#training-form-wrapper .gf_page_steps>div.gf_step_active::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #80D0E8;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#training-form-wrapper .gf_page_steps>div .gf_step_number {
  opacity: 0;
  width: 16px;
  height: 16px;
}

#training-form-wrapper .gf_page_steps>div .gf_step_number::after {
  width: 16px;
  height: 16px;
}

#training-form-wrapper .gform_heading {
  position: absolute;
  right: 10px;
  margin-top: 24px;
}

#training-form-wrapper .gform_required_legend {
  margin-bottom: 0px;
  color: #A3A5A9;
}

#training-form-wrapper .gform_required_legend::after {
  content: " indicates required fields";
  font-size: 14px;
}

#training-form-wrapper span.gform-grid-col label::after {
  content: " *";
  font-weight: 600;
  color: #E9202E;
}

#training-form-wrapper input[type="text"],#training-form-wrapper input[type="tel"], #training-form-wrapper input[type="email"] {
  height: 50px;
  border-radius: 8px;
  border: 1px solid #80D0E8;
  background-color: white;
  outline: none;
  box-shadow: none;
}

#training-form-wrapper textarea {
  border-radius: 8px;
  border: 1px solid #80D0E8;
  background-color: white;
  outline: none;
  box-shadow: none;
}

#training-form-wrapper select {
  height: 50px;
  border-radius: 8px;
  border: 1px solid #80D0E8;
  background-color: white;
  outline: none;
  box-shadow: none;
  padding: 4px 12px;
}

#training-form-wrapper input[type="checkbox"] {
  position: relative;
  outline: none;
  box-shadow: none;
  border: none;
  margin-right: 6px;
  cursor: pointer;
}

#training-form-wrapper input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #00A1D1;
  top: 0;
  left: 0;
}

#training-form-wrapper input[type="checkbox"]:checked {
  background-color: #00A1D1;
  border-radius: 4px;
}

.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):before {
  color: white !important;
}

#training-form-wrapper #field_2_3 {
  max-width: 640px;
}

#training-form-wrapper #field_2_3 p:last-child {
  margin-bottom: 0;
}

#training-form-wrapper h1, #training-form-wrapper .gform_confirmation_message h2 {
  color: #11142D;
  font-size: 39px;
  font-weight: 850;
  margin-bottom: 30px;
}

#training-form-wrapper .gform_confirmation_message h2 {
  margin-bottom: 11px;
}

#training-form-wrapper p {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  line-height: 22.4px;
  letter-spacing: 0.5px;
}

#training-form-wrapper .gfield_required {
  font-size: 16px;
  font-weight: 600;
  color: #E9202E;
}

#training-form-wrapper .image-cover {
  width: 200px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
}

#training-form-wrapper .image-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#training-form-wrapper .training-choice {
  border-radius: 8px;
  border: 1px solid #80D0E8;
  padding: 20px;
  background-color: white;
  min-height: 150px;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

#training-form-wrapper .training-choice .gfield_description {
  max-width: 300px;
  margin-left: 32px;
}

#training-form-wrapper .gfield_label_product {
  font-size: 16px;
  font-weight: 600;
  color: black;
  max-width: 300px;
}

#training-form-wrapper .progress-bar {
  position: absolute;
  right: 24px;
  top: 24px;
}

#training-form-wrapper .elementor-widget-container > .progress-bar {
  position: absolute;
  right: 0px;
  top: 0px;
}

#training-form-wrapper .training-des, #training-form-wrapper .training-des p{
  font-size: 14px;
  font-weight: 400;
  color: #11142D;
}

#training-form-wrapper .training-des ul,
#training-form-wrapper .training-des ol {
  font-size: 14px;
  font-weight: 400;
  margin-left: 16px;
  color: #11142D;
}

#training-form-wrapper .training-des ul {
  list-style-type: disc !important;
}

#training-form-wrapper .training-des ol {
  list-style-type: decimal !important;
}

#training-form-wrapper .training-des ol li, #training-form-wrapper .training-des ul li {
   padding-bottom: 5px;
}

#training-form-wrapper .training-des .chartDes span {
  font-size: 11px;
  font-weight: 400;
}

#training-form-wrapper .training-des strong.chartCnt {
  font-size: 18px;
  font-weight: 850;
}

#training-form-wrapper .progress-bar div div {
  background-color: white;
}

#training-form-wrapper .toggle-des {
  color: #11142D;
  font-size: 14px;
  text-decoration: underline;
}

#training-form-wrapper .gform_page_footer {
  margin: 50px 0;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

#training-form-wrapper input[value="Previous"] {
  background-color: white;
  color: black;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  padding: 0 22px;
  height: 48px;
  border: 1px solid black;
}

#training-form-wrapper input[value="Next"],
#training-form-wrapper input[value="Submit"],
#training-form-wrapper input[value="Back to Last Page"] {
  background-color: #00A1D1;
  color: white;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  padding: 0 22px;
  height: 48px;
}

#training-form-wrapper input[value="Next"] {
  margin-left: auto;
}

#training-form-wrapper #gform_ajax_spinner_2 {
  display: none;
}

#training-form-wrapper div.desktop-sidebar div.elementor-widget-container {
  margin: 50px 70px 0 30px;
}

#training-form-wrapper div.desktop-sidebar h2 {
  line-height: 42px;
  margin-bottom: 40px !important;
}

#training-form-wrapper div.desktop-sidebar h2 span {
  font-size: 31px;
  font-weight: 850;
}

#training-form-wrapper div.desktop-sidebar p {
  font-size: 18px !important;
  font-weight: 300;
}

#training-form-wrapper .progress-bar:not([data-percent="100"]) .rotate {
  clip-path: circle(49%);
}

#training-form-wrapper div.gfield--width-third label {
  font-size: 14px;
  color: #11142D;
}

#training-form-wrapper #desktop-sidebar {
  min-height: 740px;
}

#training-form-wrapper .training-choice .elementor-widget {
  position: unset;
}

@media screen and (max-width: 768px) {
  #training-form-wrapper {
    padding: 10px;
  }

  #training-form-wrapper h1, #training-form-wrapper .gform_confirmation_message h2 {
    font-size: 24px;
    line-height: 28px;
  }

  #training-form-wrapper p {
    font-size: 14px;
  }

  #training-form-wrapper #desktop-sidebar {
    background-size: cover !important;
  }

  #training-form-wrapper .gform_wrapper form .top_label .gfield_label {
    font-size: 14px;
  }

  #training-form-wrapper #gform_fields_2 {
    grid-row-gap: 20px;
  }

  #training-form-wrapper .image-cover {
    width: unset;
    height: unset;
  }

  #training-form-wrapper .gfield_label_product {
    width: 220px;
    font-size: 14px;
  }

  #training-form-wrapper .progress-bar {
    right: 15px;
    top: 15px;
  }

  #training-form-wrapper .training-choice {
    min-height: 132px;
    padding: 16px;
  }

  #training-form-wrapper .training-choice .gfield_description {
    margin-left: 0;
    max-width: unset;
    margin-top: 55px;
  }

  #training-form-wrapper .training-choice .gfield_description .toggle-des {
    position: absolute;
    bottom: 15px;
  }

  #training-form-wrapper .training-choice .training-des {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 640px) {
  #training-form-wrapper span.gfield_label_product {
    width: 60%;
  }
}