.curae-roi {
  display: grid;
  gap: 1rem; }
  @media (min-width: 50em) {
    .curae-roi {
      grid-template-columns: 1fr 470px;
      gap: 1.5rem; } }
  .curae-roi .roi-left,
  .curae-roi .roi-right {
    background: var(--wp--preset--color--white);
    padding: 2rem 1.5rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03);
    border-radius: 8px; }
    @media (min-width: 50em) {
      .curae-roi .roi-left,
      .curae-roi .roi-right {
        padding: 5rem 2.375rem; } }
  .curae-roi .roi-left .fieldsets {
    display: grid;
    gap: 2rem; }
    @media (min-width: 50em) {
      .curae-roi .roi-left .fieldsets {
        gap: 4rem; } }
  .curae-roi .roi-left .disclaimer {
    font-size: 1rem;
    margin: 4rem 0 0 0; }
  .curae-roi fieldset {
    padding: 0;
    margin: 0;
    border: none;
    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ }
    .curae-roi fieldset .fieldset-top {
      display: grid;
      row-gap: 1rem;
      align-items: center;
      grid-template-columns: auto 180px;
      margin-bottom: 0.75rem; }
      .curae-roi fieldset .fieldset-top label {
        font-size: 0.875rem; }
      .curae-roi fieldset .fieldset-top .right-inputs {
        position: relative; }
        .curae-roi fieldset .fieldset-top .right-inputs .number-display,
        .curae-roi fieldset .fieldset-top .right-inputs input {
          text-align: right;
          line-height: 1.5rem;
          font-size: 1.25rem;
          height: 1.5rem;
          margin: 0;
          font-weight: 700;
          border: none;
          padding: 0; }
        .curae-roi fieldset .fieldset-top .right-inputs input {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          background: #ececec;
          transition: opacity 0.3s;
          width: 100%; }
          .curae-roi fieldset .fieldset-top .right-inputs input:hover, .curae-roi fieldset .fieldset-top .right-inputs input:focus {
            opacity: 1; }
    .curae-roi fieldset .fieldset-bottom {
      width: 100%;
      /* Width of the outside container */ }
    .curae-roi fieldset [type="range"] {
      -webkit-appearance: none;
      /* Override default CSS styles */
      appearance: none;
      width: 100%;
      height: 4px;
      background: rgba(33, 30, 31, 0.5);
      outline: none;
      /* Remove outline */
      transition: all .2s ease; }
      .curae-roi fieldset [type="range"]:hover {
        background: linear-gradient(281.92deg, #F57F26 -15.48%, #FED600 137.89%); }
      .curae-roi fieldset [type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        /* Set a specific slider handle width */
        height: 24px;
        /* Slider handle height */
        background: var(--wp--preset--color--orange);
        border-radius: 50%;
        border: 3px solid var(--wp--preset--color--white);
        cursor: pointer;
        /* Cursor on hover */ }
      .curae-roi fieldset [type="range"]::-moz-range-thumb {
        width: 24px;
        /* Set a specific slider handle width */
        height: 24px;
        /* Slider handle height */
        background: var(--wp--preset--color--orange);
        border-radius: 50%;
        border: 3px solid var(--wp--preset--color--white);
        cursor: pointer;
        /* Cursor on hover */ }
    .curae-roi fieldset .select-contain,
    .curae-roi fieldset .input-contain {
      position: relative; }
      .curae-roi fieldset .select-contain:before,
      .curae-roi fieldset .input-contain:before {
        box-sizing: border-box;
        background-color: rgba(33, 30, 31, 0.25);
        background-image: none;
        content: '';
        padding: 2px;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        z-index: 0; }
      .curae-roi fieldset .select-contain:after,
      .curae-roi fieldset .input-contain:after {
        z-index: 2;
        pointer-events: none;
        background-size: 13px 9px;
        width: 13px;
        height: 9px;
        background-image: url("../img/chevron-down-2.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: 1.25rem;
        top: calc(50% - 4.5px);
        content: '';
        display: block; }
      .curae-roi fieldset .select-contain.focused:before,
      .curae-roi fieldset .input-contain.focused:before {
        background-image: linear-gradient(90deg, #FED600 0%, #F47F21 100%);
        background-color: transparent; }
      .curae-roi fieldset .select-contain select,
      .curae-roi fieldset .select-contain input[type="text"],
      .curae-roi fieldset .input-contain select,
      .curae-roi fieldset .input-contain input[type="text"] {
        width: 100%;
        background-color: transparent;
        border-style: solid;
        border-color: var(--wp--preset--color--dark);
        border-width: 0 !important;
        border-radius: 0;
        color: var(--wp--preset--color--dark);
        padding: 0.75rem 1rem !important;
        font-size: 1rem;
        line-height: 1.5rem;
        height: auto;
        box-shadow: none;
        cursor: pointer;
        font-family: var(--wp--preset--font-family--body);
        appearance: none;
        position: relative;
        z-index: 1; }
        .curae-roi fieldset .select-contain select:hover, .curae-roi fieldset .select-contain select:focus,
        .curae-roi fieldset .select-contain input[type="text"]:hover,
        .curae-roi fieldset .select-contain input[type="text"]:focus,
        .curae-roi fieldset .input-contain select:hover,
        .curae-roi fieldset .input-contain select:focus,
        .curae-roi fieldset .input-contain input[type="text"]:hover,
        .curae-roi fieldset .input-contain input[type="text"]:focus {
          outline: none; }
    .curae-roi fieldset .input-contain:after {
      display: none; }
    .curae-roi fieldset .input-contain input[type="text"] {
      cursor: inherit; }
  .curae-roi .expansion-state-yes,
  .curae-roi .expansion-state-no {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: none;
    gap: 1rem;
    align-items: center; }
    @media (min-width: 50em) {
      .curae-roi .expansion-state-yes,
      .curae-roi .expansion-state-no {
        margin: -2rem 0 0; } }
    .curae-roi .expansion-state-yes.visible,
    .curae-roi .expansion-state-no.visible {
      display: flex; }
    .curae-roi .expansion-state-yes span,
    .curae-roi .expansion-state-no span {
      display: inline-block;
      width: 56px;
      height: 56px;
      background-repeat: no-repeat;
      background-size: 56px 56px;
      background-position: left center; }
    .curae-roi .expansion-state-yes.expansion-state-yes span,
    .curae-roi .expansion-state-no.expansion-state-yes span {
      background-image: url("../img/expansion-yes.svg"); }
    .curae-roi .expansion-state-yes.expansion-state-no span,
    .curae-roi .expansion-state-no.expansion-state-no span {
      background-image: url("../img/expansion-no.svg"); }
  .curae-roi .wp-element-button {
    margin-right: auto; }
  .curae-roi .roi-right h3 {
    text-align: center; }
  .curae-roi .roi-right p {
    margin: 0 0 3rem; }
  .curae-roi .roi-right .roi-result {
    background-image: url("../img/roi-result-back.svg");
    background-size: cover;
    aspect-ratio: 1 / 1;
    margin: 0 auto 2rem;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .curae-roi .roi-right .roi-result .roi-result-label {
      font-size: 1.25rem;
      font-weight: 400; }
    .curae-roi .roi-right .roi-result[disabled] {
      opacity: 0.2; }
      .curae-roi .roi-right .roi-result[disabled] span {
        display: none; }