.formCollab{
    .gray-wrapper {
        height: 50vh;
        width: 100%;
        background-color: #f7f7f7;
    }
      
      .content {
        margin-top: -50vh;
      }
      
      .title {
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        text-align: center;
        color: #393939;
      }
      
      .subtitle {
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
        color: #696969;
      }
      
      .required-label {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        color: #f43f5b;
      }
      
      label {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #393939;
      }
      
      .panel-body {
        padding: 3rem;
      }
      
      .btn-next {
        color: #575757;
        background-color: #ffffff;
        border: solid #d5d5d5 1px;
        font-weight: 600;
        font-size: 16px;
        padding-inline: 3rem;
      }
      
      .btn-next:hover {
        background-color: #43936c;
        border: solid #43936c 1px;
        color: #ffffff;
        transition: 300ms;
      }

      
      /* Hide all steps by default: */
      .tab {
        display: none;
      }
      
      .tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4rem;
      }
      
      .circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        background-color: #f7f7f7;
        color: #c9c9c9;
      }
      
      .circle.active {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        background-color: #43936c;
        color: #ffffff;
      }
      
      .tab-title {
        margin-left: 0.75rem;
        display: flex;
        align-items: center;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        color: #c9c9c9;
      }
      
      .tab-title.active {
        margin-left: 0.75rem;
        display: flex;
        align-items: center;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        color: #393939;
      }
      
      .line {
        flex-grow: 1;
        margin-inline: 5rem;
        height: 2px;
        border-width: 0;
        color: #d5d5d5;
        background-color: #d5d5d5;
      }
      
      .line.active {
        flex-grow: 1;
        margin-inline: 5rem;
        height: 2px;
        border-width: 0;
        color: #43936c;
        background-color: #43936c;
      }
      
      textarea {
        resize: vertical;
      }
      
      .info {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        color: #696969;
      }
      
      .checkbox-date-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 5px;
      }
      
      .invalid-feedback {
        color: #f43f5b;
      }
      
      .error {
        color: #f43f5b;
      }
      
      .panel-default {
        background: #ffffff;
        box-shadow: 0px 20px 60px -10px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        border: none;
      }
      
      .panel-header {
        margin-bottom: 5rem;
      }

      .wrapper-channel-option{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
      }
      
      @media (max-width: 600px) {
        .btn-next {
          padding-inline: 1.5rem;
        }

        #btn-next-1{
          display: block;
          width: 100%;
        }
      
        .title {
          font-size: 30px;
        }
      
        .subtitle {
          font-size: 16px;
        }
      
        .circle {
          width: 28px;
          height: 28px;
          font-size: 14px;
          font-weight: 600;
        }
      
        .circle.active {
          width: 28px;
          height: 28px;
          font-size: 14px;
          font-weight: 600;
        }
      
        .tab-title {
          margin-left: 0.5rem;
          font-size: 14px;
          font-weight: 600;
        }
      
        .tab-title.active {
          margin-left: 0.5rem;
          font-size: 14px;
          font-weight: 600;
        }
      
        .line {
          margin-inline: 1rem;
        }
      
        .line.active {
          margin-inline: 1rem;
        }
      
        .checkbox-date-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(4, 1fr);
          grid-column-gap: 10px;
          grid-row-gap: 5px;
        }
      
        .gray-wrapper {
          display: none;
        }
      
        .content {
          margin-top: 0;
        }
      
        .panel-default {
          background: #ffffff;
          box-shadow: none;
          border-radius: 12px;
          border: none;
          padding: 0;
        }
      
        .panel-body {
          padding: 0;
        }
      
        .panel-header {
          margin-bottom: 3rem;
        }
      
        .container {
          padding-inline: 0px;
          margin: 0px;
        }

        .wrapper-channel-option{
          display: grid;
          grid-template-columns: unset;
          gap: 16px;
        }
      }
      .control {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 1rem;
        padding-top: 3px;
        cursor: pointer;
        font-size: 14px;
        color: #393939;
      }
      
      .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
      }
      
      .control_indicator {
        position: absolute;
        top: 2px;
        left: 0;
        height: 20px;
        width: 20px;
        background: #ffffff;
        border: 1px solid #aeaeae;
        border-radius: 4px;
      }
      
      .control:hover input ~ .control_indicator,
      .control input:focus ~ .control_indicator {
        background: #ffffff;
      }
      
      .control input:checked ~ .control_indicator {
        background: #005e4e;
      }
      
      .control:hover input:not([disabled]):checked ~ .control_indicator,
      .control input:checked:focus ~ .control_indicator {
        background: #005e4e;
      }
      
      .control input:disabled ~ .control_indicator {
        background: #e6e6e6;
        opacity: 0.6;
        pointer-events: none;
      }
      
      .control_indicator:after {
        box-sizing: unset;
        content: "";
        position: absolute;
        display: none;
      }
      
      .control input:checked ~ .control_indicator:after {
        display: block;
      }
      
      .control-checkbox .control_indicator:after {
        left: 6px;
        top: 2px;
        width: 3px;
        height: 8px;
        border: solid #ffffff;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
      }
      
      .control-checkbox input:disabled ~ .control_indicator:after {
        border-color: #7b7b7b;
      }
      
      .control-checkbox .control_indicator::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 4.5rem;
        height: 4.5rem;
        margin-left: -1.3rem;
        margin-top: -1.3rem;
        background: #005e4e;
        border-radius: 3rem;
        opacity: 0.6;
        z-index: 99999;
        transform: scale(0);
      }
      
      @keyframes s-ripple {
        0% {
          transform: scale(0);
        }
      
        20% {
          transform: scale(1);
        }
      
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      
      @keyframes s-ripple-dup {
        0% {
          transform: scale(0);
        }
      
        30% {
          transform: scale(1);
        }
      
        60% {
          transform: scale(1);
        }
      
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      
      .control-checkbox input + .control_indicator::before {
        animation: s-ripple 250ms ease-out;
      }
      
      .control-checkbox input:checked + .control_indicator::before {
        animation-name: s-ripple-dup;
      }
      
      .radio-control {
        font-family: arial;
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 5px;
        padding-top: 3px;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: 1rem;
      }
      
      .radio-control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
      }
      
      .radio-control_indicator {
        position: absolute;
        top: 2px;
        left: 0;
        height: 20px;
        width: 20px;
        background: #ffffff;
        border: 1px solid #aeaeae;
        border-radius: 50px;
      }
      
      .radio-control:hover input ~ .radio-control_indicator,
      .radio-control input:focus ~ .radio-control_indicator {
        background: #ffffff;
      }
      
      .radio-control input:checked ~ .radio-control_indicator {
        background: #ffffff;
      }
      
      .radio-control:hover input:not([disabled]):checked ~ .radio-control_indicator,
      .radio-control input:checked:focus ~ .radio-control_indicator {
        background: #ffffff;
        border: 1px solid #005e4e;
      }
      
      .radio-control input:disabled ~ .radio-control_indicator {
        background: #e6e6e6;
        opacity: 0.6;
        pointer-events: none;
      }
      
      .radio-control_indicator:after {
        box-sizing: unset;
        content: "";
        position: absolute;
        display: none;
      }
      
      .radio-control input:checked ~ .radio-control_indicator:after {
        display: block;
      }
      
      .control-radio .radio-control_indicator {
        border-radius: 50%;
      }
      
      .control-radio .radio-control_indicator:after {
        left: 3px;
        top: 3px;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: #005e4e;
        transition: background 250ms;
      }
      
      .control-radio input:disabled ~ .radio-control_indicator:after {
        background: #7b7b7b;
      }
      
      .control-radio .radio-control_indicator::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 4.5rem;
        height: 4.5rem;
        margin-left: -1.3rem;
        margin-top: -1.3rem;
        background: #005e4e;
        border-radius: 3rem;
        opacity: 0.6;
        z-index: 99999;
        transform: scale(0);
      }
      
      @keyframes s-ripple {
        0% {
          opacity: 0;
          transform: scale(0);
        }
      
        20% {
          transform: scale(1);
        }
      
        100% {
          opacity: 0.01;
          transform: scale(1);
        }
      }
      
      @keyframes s-ripple-dup {
        0% {
          transform: scale(0);
        }
      
        30% {
          transform: scale(1);
        }
      
        60% {
          transform: scale(1);
        }
      
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      
      .control-radio input + .radio-control_indicator::before {
        animation: s-ripple 300ms ease-out;
      }
      
      .control-radio input:checked + .radio-control_indicator::before {
        animation-name: s-ripple-dup;
      }
      .checkbox-date label {
        width: 100%;
        height: 60px;
      }
      
      .checkbox-date label span {
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        border-radius: 8px;
        height: 60px;
        border: 1px solid #dcdcdc;
        transition: 300ms;
        font-size: 14px;
        font-weight: 600;
      }
      
      .checkbox-date label input {
        /* display: none; */
        opacity: 0;
      }
      
      .checkbox-date input:hover + span {
        background-color: #43936c;
        color: #ffffff;
        opacity: 0.7;
        cursor: pointer;
      }
      
      .checkbox-date input:checked + span {
        background-color: #43936c;
        color: #ffffff;
        box-shadow: 8px 10px 20px -13px rgba(0, 0, 0, 0.51);
        -webkit-box-shadow: 8px 10px 20px -13px rgba(0, 0, 0, 0.51);
        -moz-box-shadow: 8px 10px 20px -13px rgba(0, 0, 0, 0.51);
      }
      
      .checkbox-date input:checked:hover + span {
        background-color: #43936c;
        color: #ffffff;
      }

      
      
}