/** General form styles **/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');



.custom-ul-free {

    list-style-type: none; /* Remove default list bullets */

    padding-left: 0; /* Optional: removes indentation if desired */

    margin-left: 1em; /* Adjust as needed */

  }

  

  .custom-ul-free li {

    position: relative; /* Establishes a positioning context for pseudo-elements */

    padding-left: 1.5em; /* Make space for the icon */

  }

  

  .custom-ul-free li:before {

    content: "\f00c"; /* FontAwesome check icon */

    font-family: 'FontAwesome'; /* Specify the FontAwesome font family */

    position: absolute; /* Position absolutely within the li element */

    left: 0; /* Align to the left */

    top: 50%; /* Center vertically */

    transform: translateY(-50%); /* Center correctly regardless of line height */

    color: #01C27F; /* The icon color */

    transition: color 0.3s; /* Color transition for hover or other state changes */

  }

  .custom-ul-professional {

    list-style-type: none; /* Remove default list bullets */

    padding-left: 0; /* Optional: removes indentation if desired */

    margin-left: 1em; /* Adjust as needed */

  }

  

  .custom-ul-professional li {

    position: relative; /* Establishes a positioning context for pseudo-elements */

    padding-left: 1.5em; /* Make space for the icon */

  }

  
.user-error{
    text-align: center;
    font-family: montserrat;
    font-size: 12px;
    color: red;
}

  .custom-ul-professional li:before {

    content: "\f00c"; /* FontAwesome check icon */

    font-family: 'FontAwesome'; /* Specify the FontAwesome font family */

    position: absolute; /* Position absolutely within the li element */

    left: 0; /* Align to the left */

    top: 50%; /* Center vertically */

    transform: translateY(-50%); /* Center correctly regardless of line height */

    color: #0BA8EB; /* The icon color */

    transition: color 0.3s; /* Color transition for hover or other state changes */

  }

  .custom-ul-business {

    list-style-type: none; /* Remove default list bullets */

    padding-left: 0; /* Optional: removes indentation if desired */

    margin-left: 1em; /* Adjust as needed */

  }

  

  .custom-ul-business li {

    position: relative; /* Establishes a positioning context for pseudo-elements */

    padding-left: 1.5em; /* Make space for the icon */

  }

  

  .custom-ul-business li:before {

    content: "\f00c"; /* FontAwesome check icon */

    font-family: 'FontAwesome'; /* Specify the FontAwesome font family */

    position: absolute; /* Position absolutely within the li element */

    left: 0; /* Align to the left */

    top: 50%; /* Center vertically */

    transform: translateY(-50%); /* Center correctly regardless of line height */

    color: #0580FB; /* The icon color */

    transition: color 0.3s; /* Color transition for hover or other state changes */

  }

  .custom-ul-starter {

    list-style-type: none; /* Remove default list bullets */

    padding-left: 0; /* Optional: removes indentation if desired */

    margin-left: 1em; /* Adjust as needed */

  }

  

  .custom-ul-starter li {

    position: relative; /* Establishes a positioning context for pseudo-elements */

    padding-left: 1.5em; /* Make space for the icon */

  }

  

  .custom-ul-starter li:before {

    content: "\f00c"; /* FontAwesome check icon */

    font-family: 'FontAwesome'; /* Specify the FontAwesome font family */

    position: absolute; /* Position absolutely within the li element */

    left: 0; /* Align to the left */

    top: 50%; /* Center vertically */

    transform: translateY(-50%); /* Center correctly regardless of line height */

    color: #0BA8EB; /* The icon color */

    transition: color 0.3s; /* Color transition for hover or other state changes */

  }

  #viewPlansBtn {

      color: #fff;

      background: transparent;

      border: none;

      font-size: 16px;

      font-weight: bold;

      cursor: pointer;

  }

  .iti {

      z-index: 99;

      width: 100%;

  }

  .iti__flag-box {
    width: 32px;
}

  .iti__flag-container {


  background: #ffffff;

  width: 19.4%;

  border-right-width: 0;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

  border: 1px solid #EAEAEA;

  }

  @media (min-width: 430px) {
    .iti__flag {
      margin-left: 9px;
    }
  }


  .iti__country-list {

      max-width: 360px;

  }

  #register > div.commpany-container > div.fixed > div.phone > label {

  display: block;

  margin-bottom: 3px;

  }



  #googleSignIn {

  display: block;

  cursor: pointer;

  border: 1px solid #ececec;

  padding: 10px 25px;

  margin-bottom: 15px;

  margin-top: 15px;

  border-radius: 8px;

  margin-left: 3%;

  text-decoration: none;

  }

  .login-container {

      text-align: center;

	  background: white;

  }

  #step1, .step1 {

      opacity: 1; 

      visibility: visible; 

      max-height: 1000px; 

      transform: scale(1); 

      max-width: 424px;

      margin: auto;

      position: relative;

  }

  #step2, .step2 {

      margin: auto;

      max-width: 450px;

	  max-height: 100%;

      padding: 35px;

	  position: absolute;

  }

  #step1-5, .step1-5 {

    opacity: 1;

    transform: scale(1.0);

    position: absolute;

    max-height: 1000px;

    max-width: 424px;
   
}


  .validation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 6px;
    margin-bottom: -20px;
    margin-left: 6px;
    pointer-events: none; 
}

.validation-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #969696;
    margin-bottom: 2px;
    position: relative;
    padding-left: 10px; 
}

.validation-list li.valid {
    padding-left: 16px;
    margin-left: -6px;
}

.validation-list li::before {
    content: "•"; 
    position: absolute;
    left: 0;
    color: #969696;
}

.validation-list img {
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    display: none; 
    margin-bottom: -2px;
}

.validation-list li.valid::before {
    display: none;
}

.validation-list li.valid img {
    display: block;
}

.validation-icon1 {
    width: 16px;
    height: 16px;
    margin-right: 8px !important;
    position: relative;
    bottom: 3px;
    display: inline-block; 
}


  #step3, .step3 {
    border: none !important;
}

@media (max-width: 767px) {
    #step3, .step3 {
        padding: 10px;
    }
}


  .terms { 

      text-align: center;

  }

  .step {

      font-family: "Montserrat", Sans-serif !important;

      opacity: 0;    

      transition: opacity 2s, transform 1.5s, max-height 1s;

      visibility: hidden;  

      max-height: 100px; 

      overflow: hidden;

      transform: scale(0.95);

      background-color: #FFFFFF;

      border-radius: 8px;

      max-width: 1000px;

      margin: auto;

      padding: 35px;

      margin-top: -35px !important;

    /*  border: 1px solid #eaeaea; */

/*       position: absolute; */

  }

  .pstep1 {
    font-size: 14px; 
    font-weight: 400;
    color: #4B4B4B; 
    text-align: center; 
    margin: 15px 0; 
    margin-bottom: 15px;
    font-family: montserrat; 
  }
  

  .fixed {

      transition: opacity 2s, transform 0.5s, max-height 2s, position .3s;

  }

  .is-business {

      transition: opacity 2s, transform 1.5s, max-height 1s;

      max-height: 0;

      opacity: 0;

      position: relative;

      z-index: -10;

  }

  #register { 

      padding-bottom: 2px;

  }

  
  .hidden {

      opacity: 0;

      bottom: 0;

      z-index: 9999;

      transition: opacity 1s ease-in-out;

  }

  .step-container, .step-container-business, .step-container-free, .select-plan  {

      width: 100%;

      height: 40px;

      position: relative;

      margin-bottom: 35px;

      display: inline-block;

  }

  .select-plan {

      display: block;

  }

  .left {

      width: 100%;

      text-align: center;

      display: inline-block;

  }

  .right {

      text-align: right;

      width: 30%;

      float: right;

  }

  .step-text {

    color: #282828 !important;

     margin-bottom: 5px;

     font-weight: 600 !important;

  }

  .step-indicator {

      float: right;

      max-width: 25%;

      display: none;

  }

  .loading-bar {

      height: 20px;

      background-color: #33DA80;

      width: 0;

      max-height: 5px;

      overflow: hidden;

      display: none;

  }

  .login-form h1 { 

      text-align: center;

  }

  .password-container {

      position: relative;

      display: inline-block;

      width: 100%;


  }

  

  .toggle-password {

      position: absolute;

      right: 3%;

      top: 20%;

      cursor: pointer;

  }

  #fh-first-name-field, #fh-last-name-field {

      max-width: 49.4%;

      display: inline-block;

      margin-bottom: 15px;

  }

  .checkbox-container {

      display: inline-block; 

      margin: 0px 10px;     

      width: 44%;

      margin-bottom: 35px;

  }

  

  .checkbox-container input[type="checkbox"] {

      margin-right: 5px;      

      vertical-align: middle; 

  }

  
  .checkbox-container label {

      font-size: larger;

      font-weight: bold;

      color: #000;

      vertical-align: middle; 

  }

  #total {

      margin-bottom: 16px;

  }

  .checkbox-container input[type="checkbox"]:checked + label {

      font-weight: bold;

  }

  .wrapper {

      font-family: "Montserrat", Sans-serif !important;

      max-width: 1000px;

      width: auto;

      margin: auto;

      border-radius: 4px;

      padding: 35px 5px; 

      margin-left: -8;
    margin-right: -8;

  }

  @media screen and (max-width: 340px) {
    .wrapper {
        margin-left: -6;
        margin-right: -6;
        padding: 35px 3px;
    }
}

  .wrapper label { 

  color: #4B4B4B;

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px;

  }

  

  .wrapper input[type="text"], .wrapper input[type="email"], .wrapper input[type="password"], .wrapper input[type="phone"] {

  border-radius: 8px;

  border: 0.5px solid  #EAEAEA;

  background:  #FEFEFE;

  padding: 20px 5px !important;

  width: 100%;

  margin-bottom: 15px;

  background-color: #fefefe;

  }

  

  .wrapper input[type="email"]:focus, #validate-password {

      outline: none;

      box-shadow: none;

  }

  .wrapper input[type="text"]:focus {

      border-color: #007BFF;

  }

  .wrapper input[type="text"]:focus,
  .wrapper input[type="password"]:focus,
  .wrapper input[type="phone"]:focus,
  #fh-phone:focus, 
  .iti__tel-input:focus { 
    border: 1px solid #9393FF !important; 
    outline: none !important; 
  }
  
 
  #freePlanPopup p {

      padding: 0% 10%;

  }

  #freePlanPopup  {

  font-family: "Montserrat", Sans-serif !important;  

  }

   .wrapper select{

      border-radius: 4px;

      border: 0.5px solid  #E1E1E1;

      padding: 20px 3px;

      width: 49.3%;

      display: inline-block;

      }

    @media all and (max-width: 540px){

#continue-second, #business-continue {

 width: 100%;

}

}  

#continue-second, #business-continue {

  margin-top: 35px !important;

  margin: auto;

  z-index: 2;

}

  .form-default-button, .continue-btn, #continueFreePlan, #cancelFreePlan {

	  border-radius: 8px  !important;

	  background: #5D5FEF !important;

	  font-size: 16px !important;

	  font-style: normal !important;

	  font-weight: 600 !important;

	  text-transform: none !important;

	  color: #fff !important;

	  cursor: pointer !important;

	  padding: 20px 3px;

	  margin: 20px 0px !important;

	  border: none !important;

	  width: 100% !important;

	  transition: background-color 0.7s, color 0.7s !important;

  }

  .check-aval, .finish-button {

      max-width: 100% !important;

      margin-top: 5px !important;

      padding: 12px 0px !important;

  }

  #cancelFreePlan, .close-modal-btn {

      background: transparent !important;

      margin-left: 0 !important;

      color: #222 !important;

      margin-left: 0% !important;

  }

  #continueFreePlan, #try-again-button {

      margin-left: 0% !important;

  }

  .go-back {

      border-radius: 8px;

      background: #ececec !important;

      font-size: 16px;

      font-style: normal;

      font-weight: 600;

      text-transform: none !important;

      color: #444;

      cursor: pointer;

      padding: 10px 3px;

      margin: 20px auto;

      border: none;

      cursor: pointer;

      width: 100%;

      transition: background-color 0.7s, color 0.7s;

  }

  .form-link {

      color: #1C36E0 !important;

      font-weight: 400px;

      text-decoration: none !important;

  }


  .error-message, .alert_msg {

      text-transform: none !important;

  }

  .default-message {

      font-size: 14px;

      text-transform: none !important;

  }

  .name-available {

      font-size: 14px;

      color: green;

      position: relative;

      text-transform: none !important;

      margin-top: -12px;

      margin-bottom: 15px;

      font-family: 'Montserrat';

      display: none;

  }

  #continue-first:disabled, .form-default-button:disabled, .continue-btn:disabled {

      background-color: #F1F1F1 !important;  

      color: #C8C8C8 !important;            

      cursor: not-allowed;     

  }

  #continue-first {

      transition: background-color 0.7s, color 0.7s;

  }

  #validate-email {

      transition: border 0.7s;

    background-color: #fefefe;


  }

  

  .spinner {

      margin: 15px auto;

      border: 6px solid rgba(0, 0, 0, 0.1);  

      width: 20px;

      height: 20px;

      border-radius: 50%;

      border-top: 6px solid #5D5FEF; 

      animation: spin 1s linear infinite;

  }

  

  @keyframes spin {

      0% {

          transform: rotate(0deg);

      }

      100% {

          transform: rotate(360deg);

      }

  }

  

  /* Special styling for credit card number with icon */

  #spreedly-number, #spreedly-cvv {

      max-height: 40px;

  }

  #spreedly-cvv iframe {

      width: 92% !important;

  }

  #spreedly-number iframe {

      width: 96%;

  }

  

  .inline-date, .cvv-div {

      flex: 1;

  }

  .inline-date input {

      width: 45% !important;

      margin-right: 1%;

  }

  

  .inline-cc { 

      display: flex;

      margin-top: -30px;

  }

  #spreedly-cvv {

      margin-top: 10px!important;

      width: 100% !important;

  }

  #expiration-cvv-container {

      display: flex;

      justify-content: space-between;

  }


/* Container for checkbox e text */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
}

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #5D5FEF;
    border-radius: 4px;
    outline: none;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
    position: relative;
    margin-right: 8px;
}

.custom-checkbox:checked {
    background-color: #5D5FEF;
}

.custom-checkbox:checked::after {
    content: '\2713';
    position: absolute;
    color: white;
    font-size: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-text {
    font-size: 12px;
    line-height: 18px;
    font-family: 'Montserrat';
    color: #969696;
    flex: 1;
}

.label-authorize {
    display: flex;
}
  
  

  /* Theme cards */

  .card-section {

      display: flex;

      gap: 20px; /* spacing between cards */

      justify-content: space-between;

  }

  

  .app-card {

      flex: 1;

      border: 1px solid #ccc;

      border-radius: 8px;

      position: relative;

      transition: box-shadow 0.3s ease;

      text-align: left;

      background-color: #f6f6f6;

      color: #666;    

      transition: background-color .3s, color .3s;

  }

  

  .app-card:hover {

      box-shadow: 0 4px 12px #444;

  }

  

  .app-card img {

      width: 100%;

      object-fit: cover;

      border-top-right-radius: 8px;

      border-top-left-radius: 8px;

      border-bottom-right-radius: 0px;

      border-bottom-left-radius: 0px;

      background-color: #fff;

  }

  

  .app-card .container {

      padding: 30px 5px;

      border-bottom-right-radius: 8px;

      border-bottom-left-radius: 8px;

  }

  

  .product-heading {

      font-weight: bold;

      margin-bottom:  10px;

      color: #444;

      transition: color .6s;

      line-height: 1 !important;

      padding: 0;

      margin-top: 0 !important;

  }

  .custom-radio {

      display: none;

  }

  .custom-radio-div {

      display: inline-block;

      width: 87%;

      padding: 3px;

  }

  .custom-radio-div:first-child {

     width: 5%;

  }

  .custom-radio-img {

      display: block;

      width: 27px; /* adjust as per your image size */

      height: 27px;

      background-image: url('/wp-content/plugins/fanhero-saas-checkout/img/Not-Selected.webp');

      margin-right: 10px;

      background-repeat: no-repeat;

      margin-bottom: 40px;

  }

  .highlight .custom-radio-img {

      background-image: url('/wp-content/plugins/fanhero-saas-checkout/img/Selected.webp') !important;

  }

  .custom-radio:checked + .custom-radio-img {

  

  }

  /* Indicate when a card is selected */

  .app-card input[type="radio"]:checked + .container {

      border: 2px solid #000; 

  }

   

  .url-input-container {

      display: flex;

      flex-direction: column;

      align-items: center;

      padding: 10px;

      border-radius: 8px;

      position: relative;

      width: 100%;

  }

  

  #platformName {

      background: #ffffff;

      flex: 1;

      outline: none;

      padding: 12px 5px !important;

      margin-bottom: 16px;
      


  }

  





  .app-card button {

      position: absolute;

      right: 10px;

      top: 50%;

      transform: translateY(-50%);

  }

  .highlight {

      background-color: #0660F9 !important;

      color: #fff !important;

      box-shadow: 0 5px 13px #444 !important;

  }

  

  .highlight .product-heading {

      color: #fff !important;

  }

  /*Selected plan / product info box */

  .plan-info {

      border-radius: 8px; 

      background: radial-gradient(244.62% 206.96% at 108.82% 176.05%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%), #ffffff;

      display: flex;

      margin-bottom: 24px;

      /* padding: 2%; */

      max-width: 376px;

      min-height: 197px;

  }




  .plan-info div {

      padding: 15px;

  }

  .plan-info h3 {

   color: #fff;   

   line-height: 0 !important;

  }

  .plan-info .fr-price {

      color: #fff; 

  }

  .plan-info .sc-price {

      margin-top: -10px;

      color: #fff; 

      font-size: 110%;

      font-weight: bolder;

  }

  .sc-price {

    font-size: 40px;

  }


  .price-number {

      color: #fff; 

      font-size: 90%;

      font-weight: 400;

  }

  .mobile-info {

      width: 45%;

      display: inline-block;

  }

 .professional-info {

    width: 100%;

    display: inline-block;

}

  #view-plans {

      margin: auto;

      text-align: right;

      cursor: pointer;

  }

  .plan-header {

      color: #fff;

      padding: 20px 15px 5px 15px; 

      min-height: 150px;

  }

  .plan-description {

      padding: 10px;

  }

  .plan-description h4 {

      font-size: 14px;

      color: #444;

      font-weight: bold;

  }

  .free-item .plan-header p {

      visibility: hidden;

  }

  .freeplan-popup {

      display: none;

      position: fixed;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      background-color: #fff;

      border: 1px solid #fff;

      padding: 20px;

      z-index: 9999;

      text-align: center;

      border-radius: 8px;

      min-width: 300px;

    }

  .align-bottom {

      flex-grow: 1; 

      display: flex;

      align-items: flex-end; 

      margin-bottom: 15px;

  }

  .plan-header h3 { 

      margin: 0;

      color: #fff;

  }

  .business-info {

      width: 100%;

  }

  

  .selectPlanBtn{

      width: 60%;

      padding: 15px;

      border-radius: 4px;

      border: 1px solid #0660F9;

      background-color: #fff;

      color: #0660F9;

      font-size: 14px;

      margin-left: 20%;

      margin-top: -15px;

      position: relative;

      cursor: pointer;

      }


     .hidden-icon-2 { 

      position: absolute;

      right: 5%;

      top: 39%;

      transform: translateY(-80%);

      display: none;

      width: 20px; 

      height: 20px;

      background-color: white;

      }

      .hidden-icon-1 { 

        position: absolute;
  
        right: 5%;
  
        top: 49%;
  
        transform: translateY(-80%);
  
        display: none;
  
        width: 20px; 
  
        height: 20px;

        background-color: white;
  
        }

      .mobile {

          display: none;

      }



  

  /* Fullscreen popup styling */

  #planSelectionPopup {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.7); 

      z-index: 9999;

      display: flex;

      align-items: center;

      overflow-x: auto; 

      scroll-snap-type: x mandatory; 

      justify-content: center;

      font-family: "Montserrat", Sans-serif !important;

  }

  

  /* Close button styling */

  #closePlanPopup {

      position: fixed;

      top: 5px;

      right: 5px;

      background-color: #EFEFEF;

      color: #333;

      font-weight: bold;

      border: none;

      border-radius: 50%;

      padding: 5px 9px;

      cursor: pointer;

      z-index: 10000; 

  }

  

  /* Carousel styles mmobile */

  .plan-carousel-item {

      margin: 1%;

      height: 85%;

      width: 27.77%;

      box-shadow: 0px 15px 60px -5px rgba(57, 67, 82, 0.07); 

      box-sizing: border-box; 

      border-radius: 5px;

      background-color: #FFF;

      scroll-snap-align: start; 

      transition: transform 0.3s; 

      border-radius: 20px;

      overflow: hidden;

      display: flex;

      flex-direction: column;

  }

  

  .plan-carousel-item:hover {

      transform: scale(1.05); 

  }



  .modal {

      font-family: "Montserrat", Sans-serif !important;  

      display: none;

      position: fixed;

      z-index: 1;

      left: 0;

      top: 0;

      width: 100vw;

      height: 100vh;

      overflow: auto;

      background-color: rgba(0,0,0,0.7);

      max-width: none !important;

  }

  

  .modal-content {

      background-color: #fefefe;

      margin: 15% auto;

      padding: 20px;

      border: none;

      border-radius: 10px;

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

      width: 40%; 

      text-align: center;

  }

  

  .close-btn {

      color: #aaa;

      float: right;

      font-size: 28px;

      font-weight: bold;

      cursor: pointer;

  }

  

  .close-btn:hover,

  .close-btn:focus {

      color: black;

      text-decoration: none;

      cursor: pointer;

  }

  

  .try-again-btn,

  .close-modal-btn {

      padding: 10px 20px;

      margin: 10px;

      border: none;

      border-radius: 5px;

      cursor: pointer;

      transition: background-color 0.2s;

  }

  

  .try-again-btn {

      background-color: #0052cc;

      color: white;

  }

  

  .try-again-btn:hover {

      background-color: #003f99;

  }

  

  .close-modal-btn {

      background-color: #ccc;

      color: white;

  }

  

  .close-modal-btn:hover {

      background-color: #aaa;

  }

  /*
  .iti__arrow {
    margin-left: 10px;
    margin-bottom: 3px;
    width: 8px;
    height: 8px;
    border: solid #191919;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform: rotate(45deg);
}
*/
  
  
/** CSS FROM PAGE **/



a#googleSignIn {

    font-size: 16px;

    color: #4B4B4B;

    font-family: 'Montserrat';

    font-weight: 500;

    line-height: 19.5px;

    height: 40px;

    padding: 0px;

    width: 100%;

    margin-left: 0;

    border: .5px solid #E1E1E1;

    border-radius: 8px;

    background-color: #fefefe;


}

#googleSignIn img {

    width: 20px;

    margin-right: 10px;

	  margin-top: 4px;

    margin-bottom: -4px !important;

}

.social-login-text {

    padding: 0px;

}

.step1 h1 {

    font-size: 22px;

    font-family: 'Montserrat';

    line-height: 33.6px;

    font-weight: 600;

    color: #444444;

    text-align: center;

}


.fanhero-heading-1 {
    font-size: 22px;
    font-family: 'Montserrat';
    line-height: 33.6px;
    font-weight: 600;
    color: #444444;
    text-align: center;
    white-space: nowrap; 
}

@media (max-width: 768px) {
    .fanhero-mobile-line {
        display: block; 
    }
}



#step1-5 .step1email {
    margin-bottom: 0;
}

.step {

    border-radius: 8px;

}



.step1 label[for="fh_email"] {

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 400;

    line-height: 16px;

}

.step1 input#validate-email::placeholder {

    color: #A4A4A4;

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 400;

    line-height: 16px;

}

.wrapper input[type="text"], .wrapper input[type="email"], .wrapper input[type="password"], .wrapper input[type="phone"] {

    margin-bottom: 15px;

    height: 40px;

    margin-top: 5px;

    padding: 10px!important;

    font-size: 16px;

    font-family: 'Montserrat';

    line-height: 16px;

    color: #222;

    font-weight: 400;

	background: white;

}

.app-name-error {
    display: block; 
    width: 100%; 
}

.error-message {
    color: #FF0000 !important;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: 400;
    line-height: 16px;
    padding-left: 5px;
    padding-top: 2px;
    margin-top: 5px; 
    display: block; 
    text-align: left !important; 
    width: 100%; 
    margin-top: -12px;
    margin-bottom: 12px;
    font-style: italic;
    
}




.form-default-button, .continue-btn, #continueFreePlan, #cancelFreePlan {

    border-radius: 8px!important;

    background: #5D5FEF!important;

    font-size: 16px!important;

    font-style: normal!important;

    font-weight: 600!important;

    text-transform: none!important;

    color: #fff!important;

    cursor: pointer!important;

    padding: 0;

    margin: 20px 0px;

    border: none!important;

    width: 100%!important;

    transition: background-color 0.7s,color 0.7s!important;

    height: 40px;

    line-height: 17.07px;

    font-family: 'Montserrat';

    margin-bottom: 4px !important;

    margin-top: -16px !important;

}

.step1email, 
#continue-first, 
.login-container {
  margin-bottom: 24px; /* Espaçamento de 24px abaixo de cada elemento */
}


p.step2tip {

    font-size: 16px;

    line-height: 16px;

    font-weight: 600;

    font-family: 'Montserrat';

}

div#view-plans {

    display: none;

}

p.terms {

    font-family: 'Montserrat';

    font-size: 14px;

    font-weight: 400;

    color: #282828;

    line-height: 24px;

    padding-left: 20px;

    padding-right: 20px;

    margin-bottom: -12px;

}


.step-text , .step-indicator {

    color: #222222;

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 500;

    line-height: 24.38px;

}

.fixed label {

    font-size: 16px;

    font-family: 'Montserrat';

    color: #8093AD;

    line-height: 16px;

    font-weight: 400;

}

.step-container, .step-container-business, .step-container-free, .select-plan {
    
    margin-top: 24px;
    margin-bottom: 12px;

}

#step3 .step-container {

    display: none !important;
}


label[for="fh-register-business"] , label[for="fh-register-person"] {

    font-size: 16px;

    font-family: 'Montserrat';

    line-height: 14px;

    color: #444;

    font-weight: 400;

}

input#fh-register-business , input#fh-register-person {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    vertical-align: middle;

    border: 2px solid black;

    appearance: none;

    -webkit-appearance: none;

    outline: none;

    cursor: pointer;

}

input#fh-register-business:checked ,   input#fh-register-person:checked{

    background: radial-gradient(circle at center, 

    #5d5fef 60%, transparent 70%);

    background-repeat: no-repeat;

    background-position: center;

    background-size: 20px 20px;

}

span.checkbox-container {

    margin-top: 10px;

    margin-left: 0;

}

.checkbox-container {

    margin-bottom: 25px;

}

#fh-first-name-field, #fh-last-name-field , #fh-phone , #validate-password {

    border: 1px solid #e1e1e1;

    background-color: #fefefe;

    padding: 10px;

    font-size: 16px;

    font-family: 'Montserrat';

    line-height: 16px;

    font-weight: 400;

    width: 47%;

    float: left;

    margin: 0px;

    border-radius: 8px;

    margin-bottom:24px;

    margin-top: 4px;

}

input#fh-phone {

    width: 80%;

    margin-left: 19%;

    border-radius: 0 8px 8px 0;

}



.password-container {

    width: 100%;

}



.password-container input::placeholder {

    text-align: left; 

    position: relative; 

    top: 3px;

  }



input#validate-password {

    width: 99.5%;
    border: 1px solid #9393FF !important;

}
  
#step1-5 .password-container .toggle-password.fas.fa-eye,
#step1-5 .password-container .toggle-password.fas.fa-eye-slash {
    position: absolute;
    margin: 6% 1% 0% 0%; 
    color: #191919; 
}

@media (max-width: 760px) {
    #step1-5 .password-container .toggle-password.fas.fa-eye,
    #step1-5 .password-container .toggle-password.fas.fa-eye-slash {
        margin: 7% 1% 0% 0%; 
    }
}


@media (max-width: 370px) {
    #step1-5 .password-container .toggle-password.fas.fa-eye,
    #step1-5 .password-container .toggle-password.fas.fa-eye-slash {
        margin: 9% 1% 0% 0%; 
    }
}

i.toggle-password.fas.fa-eye, i.toggle-password.fas.fa-eye-slash {

    position: absolute;

    margin: 4.2% 1% 0% 0%;

    color:#191919;

}


@media (min-width: 451px) and (max-width: 768px) {
    i.toggle-password.fas.fa-eye, 
    i.toggle-password.fas.fa-eye-slash {
        margin: 4.2% 1% 0% 0%; 
    }
}

@media (max-width: 439px) {
    i.toggle-password.fas.fa-eye, i.toggle-password.fas.fa-eye-slashh {
        margin: 5% 1% 0% 0%; 
    }
}


.terms-container {
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.label-authorize {
    width: 100%; 
    max-width: 1000px; 
}

.checkbox-text {
    display: inline-block; 
}



.plan-info h3 {

    font-size: 35px;

    font-family: 'Montserrat';

    font-weight: 700;

    line-height: 18px;

    margin-bottom: 24px;

}

.sc-price {
    font-size: 40px !important;
    margin-bottom: -32px;
}


p.fr-price {

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 300;

    line-height: 20.8px;

    margin-bottom: 24px;

}

span.price-number {

    font-size: 12px;

    font-family: 'Montserrat';

    line-height: 12px;

    font-weight: 400;

}

p.sc-price {

    font-family: 'Montserrat';

    font-weight: 700;

    line-height: 22px;

    letter-spacing: 1px;

    text-align: justify;

    font-size: 40px;

}

button#viewPlansBtn {

    font-size: 12px;

    line-height: 14.63px;

    font-weight: 700;

    font-family: 'Montserrat';

}

p.cc-info {

    line-height: 16px;

    font-weight: 700;

    font-family: 'Montserrat';

}

p.trial-info {

    font-size: 14px;

    color: #000000;

    font-family: 'Montserrat';

    line-height: 16px;

    font-weight: 400;

    font-style: italic;

    padding-bottom: 10px;

}

div#total {

    font-size: 14px;

    font-weight: 600;

    font-family: 'Montserrat' !important;

    line-height: 24px;

    color: #AFAFAF;


}

#total span {

    font-size: 16px;

    line-height: 24px;

    font-family: 'Montserrat';

    font-weight: 500;

    color: #282828;

}

.total-due-step3 {
    margin-top: 8px;
}

.free-trial-step3 {

    font-size: 14px;

    font-weight: 600;

    font-family: 'Montserrat' !important;

    line-height: 24px;

    color: #AFAFAF;

    margin-bottom: 8px;


}

.free-trial-step3 span {

    font-size: 16px;

    line-height: 24px;

    font-family: 'Montserrat';

    font-weight: 500;

    color: #282828;

}



.checkbox-text {
    margin-bottom: 20px !important; 
}


span.checkbox-text {

    font-size: 12px;

    line-height: 18px;

    font-weight: 300;

    font-family: 'Montserrat';

    color: #969696;

}

#payment-form label , .step2 label {

    font-size: 14px;

    color: #4B4B4B !important;

    font-family: 'Montserrat';

    line-height: 20px;

    font-weight: 400;

}

#payment-form {
    display: flex;
    flex-direction: row-reverse;
    gap: 24px;
    align-items: flex-start;
  }

  .inline-date {
    flex: 0 0 60%; 
    margin-right: -8px;
}



@media screen and (max-width: 750px) {
    #payment-form {
      display: flex;
      flex-direction: column-reverse;
      gap: 2px !important;
    }

    .step4 .error-message {
    margin-top: 18px;
    margin-bottom: -48px;
}

  }
  

.payment-button {
    margin-top: 2px !important;
}


.payment-left {

    float: right;   

    padding: 30px;

    border-radius: 8px;
    

}

.payment-right {

    float: left;

    padding: 30px;

    border-radius: 8px;

    padding-bottom: 0;

}

#view-plans {

    width: 50%;

}

.plan-info-wrapper.desktop {

    margin-top: 45px;

}

p.cc-info {

    margin-top: 2px;
    margin-bottom: 20px;

}

input#card_number {

    background: transparent!important;

    border: 0!important;

}

input#cvv {

    background: transparent!important;

    border: 0!important;

}

#cvv-form input#cvv {

    border: 0!important;

}

.cvv-card-icon1 {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 20px;
    pointer-events: none;
    z-index: 1;
}


/* Icon cvv */

.cvv-div, .spreedly-number {
    position: relative;
}



/* icon imput card number */
.spreedly-number img {
    position: absolute;
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 90px; 
    pointer-events: none; 
    z-index: 1; 
}

@media only screen and (max-width: 600px) {
    .spreedly-number img {
        width: 60px; 
    }
}


#number-form input#card_number {

    background-color: transparent!important;

    border: 0!important;

    font-family: 'Montserrat'!important;

}

.payment-left input#full_name, .payment-left input#card_number, .payment-left #spreedly-number {

    height: 40px;

    width: 100%;

    border: .5px solid #E1E1E1;

    border-radius: 8px;

    margin-top: 5px;

    color: #222;

    font-size: 16px;

    font-family: 'Montserrat';

    padding: 10px;

    margin-bottom: 10px;

	background: white;

}

.step-container-business-3 {
    display: none !important;
}

.step4-h1{
    margin-bottom: 24px !important;
    margin-top: 8px !important;
}

.step4-text {
    text-align: center; 
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
}

.step4-text-business {
    text-align: center; 
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    margin-bottom: 12px;
}

.left-step4 {
    width: 100%; 
    display: flex; 
    justify-content: center; 
}

.left-step4-business {
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-bottom: 24px !important;
    margin-top: -4px !important;
}

.step4-business-container1 {  
    margin-bottom: 24px !important;
    margin-top: -4px !important;
}

input#month, input#year, #spreedly-cvv {

    height: 40px;

    border: .5px solid #E1E1E1;

    border-radius: 8px;

    padding: 10px;

    color: #222;

    font-size: 16px;

    font-family: 'Montserrat';

    line-height: 14px;

	background: white;

}

.is-business input {

    height: 40px;

    padding: 10px;

    border: .5px solid #E1E1E1;

    border-radius: 4px;

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 400;

    color: #222;

    margin-top: 5px;

}

.fanhero-heading {
    font-size: 2em;
    text-align: center;
}



@media (max-width: 768px) {
    .fanhero-heading {
        font-size: 1.8em;
      /*  visibility: hidden; */
        text-align: center;
        margin-bottom: 20px;
    }

    
}




input#fh-company-field {

    width: 100%;

}

input#fh-company-field {

    width: 100%;

    margin-left: 0px;

}

.company , .address , .address2   {

    margin-bottom: 5px;

}

.address , .address2 {

    float: left;

    width: 100%;

}

.city, .zip , .country , .state {

    float: left;

    width: 99.5%;

    margin-bottom: 5px;

}

/*
.city , .country  {

    margin-right: 10px;

}

.zip , .state {

    margin-left: 10px;

}
*/

input#fh-address-field, input#fh-address2-field, input#fh-city-field, input#fh-zip-field {

    width: 100%;

    float: left;

    margin-left: 0px;

}

select#fh-country-field, select#fh-state-field {

    height: 40px;

    padding: 10px 20px 10px 10px;

    border: .5px solid #E1E1E1;

    margin-top: 5px;

    border-radius: 8px;

    color: #222;

    font-size: 16px;

    font-family: 'Montserrat';

    font-weight: 400;

    line-height: 14px;

    float: left;

    width: 100%;

    margin-bottom: 15px;

    background-color: #fefefe;

}

input#continue-second {

    position: relative!important;

    z-index: 2;

    margin-top: 35px !important;

}

.step2 span.checkbox-container {

    float: left;

    width: 50%;

    margin-left: 0;

    margin-right: 0;

    text-align: left;

}

input#validate-password {

    margin-bottom: 8px;

    background-color: #fefefe;


}

.right-logo-step3 {
    margin-bottom: 20px;
    margin-top: -6px;
    display: none;
}


.fname input {

    width: 100%!important;

    max-width: 100%!important;

    margin-left: 0px!important;

}

.fname {

    float: left;

    width: 99.5%;

    margin-right: 10px;

}

.checkbox-container input {

    margin: 0;

}

.password-container .error-message , .password-container  .default-message, .password-message {

    margin-top: 20px;

    font-family: 'Montserrat';

    font-size: 12px;

    font-weight: 400;

    color: #A4A4A4!important;

    line-height: 16px;

}

.password-message {

position: absolute !important;

margin-top: 12%;

display: none;

}

@media all and (max-width: 450px){

    .password-message {

    margin-top: 17%;

}

}

@media all and (max-width: 350px){

    .password-message {

    margin-top: 22%;

}

}

.password-container .default-message {

    margin-left: 10px;

}

.highlight .custom-radio-img {

    width: 20px;

    height: 20px;

}

.videoflix-theme .custom-radio-img {

    margin-bottom: 23px;

}

.custom-radio-img {

    width: 20px;

    height: 20px;

}

#platform-theme p {

    font-weight: 400!important;

    font-family: 'Montserrat';

    font-size: 14px;

    line-height: 19.6px;

    color: #444;

}

#platform-theme h3 {

    font-family: 'Montserrat';

    font-size: 17px;

    font-weight: 600;

    line-height: 16px;

    color: #444;

}

.url-input-container {

    padding-left: 0px;

    padding-top: 5px;

    padding-right: 0;

}

@media (min-width: 800px) {
    .url-input-container {
        margin-bottom: 12px;
    }
}


h4.product-heading {

    font-size: 16px;

    font-family: 'Montserrat';

    line-height: 16px;

    font-weight: 700;

}

.highlight p {

    color: #ffffff!important;

}

label[for="fh-app-name"] {

    font-size: 16px;

    font-family: 'Montserrat';

    color: #4B4B4B;

    line-height: 16px;

    font-weight: 400;

}

label[for="fh-app-name"] {

    font-size: 16px;

    font-family: 'Montserrat';

    color: #4B4B4B;

    line-height: 16px;

    font-weight: 400;

}

label.app-card {

    border: 0;

}

label[for="fh-last-name-field"] {

    float: left;

    width: 100%;

}

.phone {

    float: left;

    width: 100%;

    margin-bottom: 20px;

}

input#fh-last-name-field {

    width: 100%;

    max-width: 100%;

}

.lname {

    float: left;

    width: 99.5%;

    /* margin-left: 10px; */

    margin-top: 3px;

}



.iti--container.iti--fullscreen-popup.iti--country-search {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 80%;

    height: auto;

    max-width: 500px;

    box-shadow: none;

    padding: 0;

  }

  .left-back-icon, .left-back-icon-business {
    float: left; 
    margin-right: 10px; 
    cursor: pointer; 
    display: none;
}

.right-logo {
    float: right; 
    margin-left: 10px; 
    display: none;
}

.form-logo {
    height: 24px; 
}




/** Responsive adjustments **/



@media (max-width: 768px) {
    p.terms {
        font-size: 12px;
        line-height: 20px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: -8px;
    }
}


/** Responsive adjustments **/
 

@media all and (min-width:750px){ 

     .payment-left, .payment-right {

      width: 45%;

      display: inline-block;

      margin-right: 0;

     }

}

@media (max-width: 1000px) {

	.plan-carousel-item {

		min-width: 85%; 

		margin: 2%;

		height: 90%;

	}

}

@media all and (max-width: 800px) {

	.check-aval {

          font-size: 16px !important;

      }

}

@media all and (max-width: 750px) {

	.check-aval {

		  position: fixed;

          max-width: 100% !important;

		  margin-top: 30px!important;

		  width: 100% !important;

		  

      }

    .modal-content {

      width: 80% !important;

    }

	#step2, .step2 {

		min-height: 595px;

		max-height: 865px;

		position: absolute;

	}

	.fname {

		float: left;

		width: 100%;

		margin-right: 10px;

	}

	.lname {

		float: left;

		width: 100%;

		margin-left: 0px;

		margin-top: 0px;

	}

      .mobile {

          display: none;

      }

      .desktop {

        height: 180px;
        display: block;


      }

      .freeplan-popup {

          top: auto;

          bottom: 0;

      }

      .hidden-icon-1, .hidden-icon-2 { 

          right: 5%;

		  top: 5px;

          background-color: white;

      }

      .checkbox-container { 

          width: 40%;

      }

      .plan-info {

          display: flex;

      }

      .starter-info{
        padding: 6%;
      }

      .plan-info .sc-price {
        margin-top: -12px;
        font-size: 32px;
    }

      #view-plans, .mobile-info, .professional-info { 

          width: 100%;

      }

      #view-plans {

          text-align: center;

      }

      .card-section {

          overflow-x: auto;

          white-space: nowrap;

        }

        .app-card {

          flex: 0 0 auto;

          width: 80%; 

        }

      .custom-radio-div:first-child {

          width: 10%;

      }

      

	.payment-right {

		width: 100%;

		margin: 0;

        margin-bottom: 8px;

        padding: 20;

        padding-top: 28px;

        padding-bottom: 0;

	}

	.card-section {

		overflow-x: auto;

		white-space: normal;

	}

	input#platformName {

		margin-right: 0px;

		max-width: 100%;

		position: fixed;

	}

	.zip, .state {

    	margin-left: 0px;

	}

    .state {
        margin-bottom: 24px !important;
    }

	.city, .zip, .country, .state {

		float: left;

		width: 100%;

		margin-bottom: 5px;

	}

	.name-available {

		position: relative;
        margin-top: 52px;
        margin-bottom: -45;

	}

}

#step5 {
    display: none;
    background: none;
    border: none;
    padding: 0;
    padding-top: 24px;
}

@media screen and (max-width: 800px) {

	#step5 {

		margin-top: 20px !important;

	}
}

@media screen and (max-width: 679px) {

	.payment-left {

		width: 100%;

		padding: 20;

        margin-bottom: 20px;

	}

}

@media screen and (max-width: 539px) {

  #fh-first-name-field, #fh-last-name-field, #fh-phone, #validate-password {

    width: 100%!important;

    max-width: 100%!important;

	}

	.password-container {

		width: 100%;

	}

	.payment-left {

		width: 100%;

		padding: 20;

	}

	input#fh-phone {

		width: 80%!important;

		margin-left: 19%;

	}

}



@media screen and (max-width: 350px) {

	select#fh-country-field, select#fh-state-field {

		width: 100%;

		

	}

	input#fh-address-field, input#fh-address2-field, input#fh-city-field, input#fh-zip-field {

		width: 100%;

		

		

	}

}

@media screen and (max-width: 360px) {
    
    #step1, .step1 #step2, .step2 {
        padding-left: 10px;
        padding-right: 10px;
    }

     #step2, .step2 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #step1-5, .step1-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #step3, .step3 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #step4, .step4 {
        padding-left: 4px !important;
        padding-right: 10px !important;
    }
	
	#step5, .step5 {
        width: 105%;
    }

/*
    .fanhero-heading {
        margin-bottom: -60px;
    }
*/
    #card_number {
        font-size: 14px !important; 
    }

    .payment-left, .payment-right {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    #payment-form {
        gap: 2px;  
    }

    input#month, input#year, #spreedly-cvv {
        font-size: 14px;
        color: #191919 !important;
    }

    

    .inline-date {
        flex: 0 0 60%; 
        margin-right: -4px;
    }
    
}

/*
@media screen and (max-width: 405px) {
    
    .fanhero-heading {
        margin-bottom: -60px;
    }
}
*/

.email-field-container {
    position: relative; 
}

#validate-email {
    width: 100%; 
    display: block; 
}

#hidden-mail {
    position: absolute;
    right: 16px; 
    top: 50%; 
    transform: translateY(-50%); 
    display: none;
    width: 20px;
    height: 20px;
    pointer-events: none; 
}

#step1-5 .password-container {
    position: relative; 
    display: inline-block;
    width: 100%;
}

#step1-5 .password-container .toggle-password.fas.fa-eye,
#step1-5 .password-container .toggle-password.fas.fa-eye-slash {
    position: absolute;
    top: 27%; 
    right: 10px; 
    transform: translateY(-50%); 
    color: #191919;
    font-size: 18px; 
    cursor: pointer; 
}

#step2 .password-container {
    position: relative; 
    display: inline-block;
    width: 100%;
}

#step2 .password-container .toggle-password.fas.fa-eye,
#step2 .password-container .toggle-password.fas.fa-eye-slash {
    position: absolute;
    top: 24%; 
    right: 10px; 
    transform: translateY(-50%); 
    color: #191919;
    font-size: 18px; 
    cursor: pointer; 
}


#suffix {

  color: #222;

  position: absolute;

  top: 50%;        
      
  left: calc(36% + 4px); 

  transform: translateY(-77%);

  white-space: nowrap;
  
  overflow: hidden;
}

@media (max-width: 450px) {
    #suffix {

        left: calc(37% + 14px); 
        
    }
}

@media (max-width: 420px) {
    #suffix {

        left: calc(38% + 14px); 
        
    }
}

@media (max-width: 390px) {
    #suffix {

        left: calc(42% + 12px); 
        
    }
}

@media (max-width: 380px) {
    #suffix {

        left: calc(41% + 20px); 
        
    }
}

@media (max-width: 360px) {
    #suffix {

        left: calc(41% + 16px); 
        
    }
}

@media (max-width: 340px) {
    #suffix {

        left: calc(42% + 24px); 
        
    }
}

.input-suffix-container {
    display: flex; 
    align-items: center; 
    position: relative; 
    width: 100%; 
}