/*

  - Forms styling -

  Please use the following declaration order:
  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

*/

/* Note: we have to use !important everywhere because divi uses #ID styling */
.gform_body ul {
  padding: 0 !important;
  margin: 0 !important;
}

li.gfield,
.gfield_checkbox li,
.gfield_radio li{
  list-style: none !important;
}

.gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.gfield_label_visible .gfield_label {
  display: block;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.gfield_name_field label:not(.gfield_label) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.gfield_name_field .ginput_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.gfield_name_field span {
  display: block !important;
  width: 100% !important;
  margin-bottom: 7.5px !important;
}

.ui-datepicker {
  background-color: white;
  padding: 15px;
}

@media screen and (min-width: 768px){
  .gfield_name_field span {
    width: calc(50% - 1.5%);
    display: inline-block;
  }
}

/*div ~ label {*/
/*  background-color: red !important;*/
/*}*/

.gform_body .gform_fields li {
  margin-bottom: 3% !important;
}

.gform_wrapper input:not([type="hidden"]),
.gform_wrapper input[type="text"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="file"],
.gform_wrapper textarea,
.gform_wrapper select {
  display: inline-block !important;
  width: 100% !important;
  padding: 16px !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  border: none !important;
  background-color: #f8f9fa !important;
  color: #999 !important;
}

.gform_wrapper input[type="url"] {
  display: none !important;
}

.gform_wrapper select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-256%201792%201792%22%3E%3Cpath%20d%3D%22M1426.44%20407.864q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19l-448-448q-19-19-19-45t19-45q19-19%2045-19h896q26%200%2045%2019t19%2045z%22%20fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1.5rem;
}

.ginput_container_multiselect select {
  background-image: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  height: 160px !important;
}

.ginput_container_multiselect select option {
  display: block !important;
  width: 100% !important;
  padding: 16px !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  border: none !important;
  background-color: #f8f9fa !important;
  color: #999 !important;
}

.ginput_container_multiselect select option:not(:last-child) {
  margin-bottom: 7.5px !important;
}

.gfield_checkbox li input,
.gfield_radio li input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(2px) !important;
  margin-right: 10px !important;
  border-radius: 4px !important;
  background-color: #f8f9fa !important;
  padding: 0 !important;
}

.gfield_consent_field input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(2px) !important;
  margin-right: 10px !important;
  border-radius: 4px !important;
  background-color: #f8f9fa !important;
  padding: 0 !important;
}

.gfield_consent_field input:checked{
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(2px) !important;
  margin-right: 10px !important;
  border-radius: 4px !important;
  background-color: #CFAF74 !important;
  padding: 0 !important;
}

.gfield_checkbox li input:checked,
.gfield_radio li input:checked {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(2px) !important;
  margin-right: 10px !important;
  border-radius: 4px !important;
  background-color: #CFAF74 !important;
  padding: 0 !important;
}

.gform_footer input[type="submit"] {
  width: auto !important;
  background-color: #cfae74 !important;
  margin-top: 15px !important;
  color: #fff !important;
}

.gform_footer input[type="submit"]:hover {
  background-color: #bc9f6b !important;
}

.gform_wrapper ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999 !important;
  background-image: none !important;
  font-size: 15px !important;
}

.gform_wrapper :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999 !important;
  background-image: none !important;
  font-size: 15px !important;
}

.gform_wrapper ::-ms-input-placeholder { /* Microsoft Edge */
  color: #999 !important;
  background-image: none !important;
  font-size: 15px !important;
}

.gform_validation_container {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.validation_error {
  margin-bottom: 3% !important;
}

.validation_message,
.validation_error {
  color: #f37c7b !important;
}

.quiz form ol#sensei-quiz-list li ul li label {
  display: inline-block;
}

.single-quiz .quiz-questions li.multiple-choice ul li label {
  margin: 0 0 15px 0 !important;
}

@media screen and (max-width: 578px){
  .single-quiz .quiz-questions li.multiple-choice ul li label {
    margin: -8px 0 15px 0 !important;
  }
}

.single-quiz .entry-content #wrapper-footer {
  display: none !important;
}

.single-quiz .answer-feedback {
  display: block !important;
  font-size: 16px;
}

.single-quiz .answer_message span {
  font-size: 16px;
  margin-bottom: .5rem;
}

.single-quiz .sensei-message {
  background-color: #E1E8EA !important;
  font-weight: 600;
}

.single-quiz #main .sensei-message::before {
  background-color: #424F52 !important;
  border-color: #424F52 !important;
}

.single-quiz #main .sensei-message.note::before {
  content: none !important;
}

.single-quiz #main .sensei-message.note,
.single-quiz #main .sensei-message.answer-feedback {
  padding: 16px 20px 16px 20px !important;
}

.single-quiz #main .sensei-message.alert {
  padding: 16px 20px 16px 20px !important;
  background-color: #E8DFDF !important;
}

.single-quiz #main .sensei-message.alert::before {
  background: #794445 !important;
  border: 6px solid #794445 !important;
  transform: translateY(-3px);
}

.single-quiz #main .sensei-message.answer-feedback::before {
  content: none !important;
}

.single-quiz .wp-block-buttons .btn {
  position: relative;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: .75rem 2rem .75rem 1rem !important;
  font-size: 15px !important;
}

.single-quiz .wp-block-buttons .btn::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
  transition: background-image .2s ease;
}

.single-quiz .btn.complete {
  background-color: #CFAD74 !important;
  min-width: 175px !important;
}

.single-quiz .btn.complete::before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%09%3Cpath%20d%3D%22M15.418%201.774l-8.833%2013.485-4.918-4.386%200.666-0.746%204.051%203.614%208.198-12.515%200.836%200.548z%22%20fill%3D%22%23fff%22%20%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.single-quiz .btn.complete:hover {
  background-color: #bc9f6b !important;
}

.single-quiz .btn.save {
  background-color: #FFF !important;
  color: #CFAD74 !important;
  border: 1px solid #CFAD74 !important;
  min-width: 175px !important;
}

.single-quiz .btn.save:hover {
  background-color: #CFAD74 !important;
  color: #fff !important;
}

.single-quiz .btn.save::before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.164%200H1.5C0.673%200%200%200.673%200%201.5V15.5C0%2016.327%200.673%2017%201.5%2017H15.5C16.327%2017%2017%2016.327%2017%2015.5V2.776L14.164%200ZM8%201V5H11V1H12V6H4V1H8ZM3%2016V10H14V16H3ZM16%2015.5C16%2015.775%2015.775%2016%2015.5%2016H15V9H2V16H1.5C1.224%2016%201%2015.775%201%2015.5V1.5C1%201.225%201.224%201%201.5%201H3V7H13V1H13.756L16%203.196V15.5Z%22%20fill%3D%22%23CFAD74%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.single-quiz .btn.save:hover::before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.164%200H1.5C0.673%200%200%200.673%200%201.5V15.5C0%2016.327%200.673%2017%201.5%2017H15.5C16.327%2017%2017%2016.327%2017%2015.5V2.776L14.164%200ZM8%201V5H11V1H12V6H4V1H8ZM3%2016V10H14V16H3ZM16%2015.5C16%2015.775%2015.775%2016%2015.5%2016H15V9H2V16H1.5C1.224%2016%201%2015.775%201%2015.5V1.5C1%201.225%201.224%201%201.5%201H3V7H13V1H13.756L16%203.196V15.5Z%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.single-quiz .btn.reset {
  background-color: transparent !important;
  border: none !important;
  color: #424F52 !important;
}

.single-quiz .btn.reset::before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6%207.375H0V1.375H1V5.484C2.013%202.291%205.036%200%208.5%200C12.006%200%2015.121%202.36%2016.074%205.739L15.111%206.01C14.279%203.06%2011.56%200.999%208.5%200.999C5.274%201%202.484%203.275%201.792%206.375H6V7.375ZM11%208.375V9.375H15.208C14.515%2012.476%2011.729%2014.75%208.5%2014.75C5.438%2014.75%202.72%2012.689%201.889%209.739L0.926%2010.01C1.878%2013.389%204.993%2015.749%208.5%2015.749C11.959%2015.749%2014.975%2013.469%2016%2010.267V14.375H17V8.375H11V8.375Z%22%20fill%3D%22%23424F52%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.single-quiz .btn.reset:hover {
  color: #CFAD74 !important;
}

.single-quiz .btn.reset:hover::before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6%207.375H0V1.375H1V5.484C2.013%202.291%205.036%200%208.5%200C12.006%200%2015.121%202.36%2016.074%205.739L15.111%206.01C14.279%203.06%2011.56%200.999%208.5%200.999C5.274%201%202.484%203.275%201.792%206.375H6V7.375ZM11%208.375V9.375H15.208C14.515%2012.476%2011.729%2014.75%208.5%2014.75C5.438%2014.75%202.72%2012.689%201.889%209.739L0.926%2010.01C1.878%2013.389%204.993%2015.749%208.5%2015.749C11.959%2015.749%2014.975%2013.469%2016%2010.267V14.375H17V8.375H11V8.375Z%22%20fill%3D%22%23CFAD74%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}