@import url('https://fonts.googleapis.com/css2?family=Hurricane&display=swap');

.trf-steps{
    display:none;
}
#step-1{
    display:block;
}
.button-container{
    margin:20px 0;
    text-align:right;
}
.slider_plus{
    display:none;
    float: right;
    padding: 2px;
    margin-top: -6px;
}
.button-container input[type="submit"]:hover,
.button-container .form-button:hover{
    transition:background-color 200ms ease-in;
    background-color:#d1242a !important;
    color:#fff !important;
}
.button-container input[type="submit"],
.button-container .form-button{
    font-family: "Poppins", Sans-serif;
    display: inline-block;
    margin-top: 10px !important;
    padding: 16px 34px !important;
    padding-bottom: 17px !important;
    background-color: #072756 !important;
    font-size: 20px !important;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.2em;
    letter-spacing: -0.3px !important;
    fill: #FFFFFFF7;
    color: #fff !important;
    border-radius: 40px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) inset !important;
    cursor: pointer;
}
.select2-container{
    min-height:80px;
    font-family: "Poppins", Sans-serif;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    border-radius:24px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover{
    border-color:#007bff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    font-size: 15px;
    padding-left: 15px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: #4285f4 !important;
    color:#fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    font-size: 22px !important;
    border: none;
    left: auto;
    right: 10px;
    padding: 0px 8px;
    line-height: 28px;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    margin-right: 2px;
    font-size: 20px;
    /* float: right; */
    background-color: #efefef;
    border-radius: 20px;
    top: 8px;
}
/* Style the select2 container (input field) */
.select2-container .select2-selection--multiple {
    background-color: #FFF;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

/* Style the individual options in the dropdown */
.select2-container .select2-results__option {
    padding: 8px 12px; /* Padding inside each option */
    font-size: 16px; /* Font size of the options */
    color: #333; /* Text color */
    background-color: #fff; /* Background color of each option */
}

/* Style for hovered options in the dropdown */
.select2-container .select2-results__option--highlighted {
    background-color: #007bff; /* Background color of the option on hover */
    color: #fff; /* Text color on hover */
}

/* Style the selected items in the input field (tags) */
.select2-container .select2-selection__choice {
    background-color: #007bff; /* Background color of selected items */
    color: #fff; /* Text color of selected items */
    border-radius: 20px; /* Rounded corners for the selected items */
    padding: 3px 10px; /* Padding around the text of the selected items */
    margin: 2px; /* Space between selected items */
}

/* Style the remove button (x) for selected items */
.select2-container .select2-selection__choice__remove {
    color: #fff; /* Color of the remove button (x) */
    font-size: 16px; /* Size of the remove button (x) */
}

/* Style the dropdown container */
.select2-container--default .select2-results {
    max-height: 300px; /* Set a maximum height for the dropdown */
    overflow-y: auto; /* Allow scrolling if the dropdown content exceeds the max height */
}

/* Customize the dropdown arrow */
.select2-container .select2-selection__arrow {
    top: 50%; /* Position the arrow vertically */
    right: 10px; /* Position the arrow on the right */
    transform: translateY(-50%); /* Vertically center the arrow */
}

/* Style the dropdown when it’s focused */
.select2-container--focus .select2-selection--multiple {
    border-color: #007bff; /* Change the border color when focused */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle shadow on focus */
}

/* Placeholder text styling */
.select2-container .select2-selection--multiple .select2-selection__placeholder {
    color: #888; /* Placeholder text color */
    font-style: italic; /* Italicize the placeholder text */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #fff;
    color: #000;
    font-size: 16px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #2196F3 2px;
    padding-top:10px;
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
    padding-top: 10px;
}
.select2-container--default .select2-search--inline .select2-search__field:focus,
.select2-container--default .select2-search--inline .select2-search__field:hover{
    box-shadow:none !important;
}
.select2-container--default .select2-search--inline .select2-search__field{
    margin: 10px;
    margin-left: -5px;
    border: none !important;
    height: 46px !important;
    padding-left: 0 !important;
    font-size: 14px;
    font-style: italic;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:#2196F3;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px;
    padding: 1px;
    color: red;
    font-size: 16px;
    visibility:hidden;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    width:100%;
}
.form-button{
    display: inline-block;
    margin-top: 10px !important;
    padding: 14px 28px !important;
    background-color: #072756 !important;
    font-size: 18px !important;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: -0.3px !important;
    fill: #FFFFFFF7;
    color: #fff !important;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08) inset;
    cursor:pointer;
}
.form-button.back-button{
    background-color: #e9e9e9 !important;
    color: #000 !important;
}
.package-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30px;
}
.package-container .package-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 33%;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index:100;
}

.package-container .package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.package-container .package-card h2 {
    font-size: 18px;
    font-weight:700;
    color: #333;
    margin-bottom: 15px;
}

.package-container .package-card .description {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.package-container input[type="radio"] {
    display: none;
}



.package-container label {
    border: 2px solid #f9f9f9;
    cursor: pointer;
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    min-height:310px;
    
}

.package-container label:hover {
    background-color: #f1f1f1;
}

.package-container .enrol-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.package-container .enrol-button:hover {
    background-color: #45a049;
}

#custom-contact-form #step-5 h2{
    margin-bottom: 20px;
    text-align:center;
}
.accept-checkbox-wrapper{
    text-align: center;
    margin: 25px 0;
}
.accept-checkbox-wrapper input[type="checkbox"]{
    margin-right: 5px;
    display: inline-block;
}
.confirm-para {
    text-align: center;
    margin-bottom: 40px !important;
}
.button-container.button-container-last{
    text-align:center;
}
#custom-contact-form h2.closer{
    margin-bottom: 10px;
}
#custom-contact-form h2{
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 600;
    color: #11284a;
    margin-top: 20px;
    font-family:"Faustina", Sans-serif;
}
input[name="form-submit"]:disabled {
    background-color: #ccc; /* Light gray background */
    color: #666; /* Darker gray text */
    opacity: 0.6; /* Reduce opacity */
}
#custom-contact-form h3{
    font-weight: 400;
    color: #0d2850;
    margin: 10px 0 10px 0;
    font-family: "Poppins", Sans-serif;
    font-size:18px;
}
span.info-ico-wrapper:hover > .info-icon-data{
     opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
span.info-ico-wrapper {
    width: 18px;
    height: 16px;
    position: relative;
    display: inline-block;
    background-image: url(../images/new/info.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    margin-left: 5px;
    
}
.info-icon-data{
    background-color: #fff;
    position: absolute;
    z-index: 100;
    padding: 20px;
    top: 24px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    max-width: 200px;
    width: max-content;
    z-index: 200;
    right: 0;
    border-radius: 10px;
    font-size: 16px;
    line-height: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
}
span.pack-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 7px;
    margin-top: -4px;
}
span.pack-icon.pi-bulk-enrol{
    background-image: url(../images/new/bulk-enrol.svg);
    background-repeat: no-repeat;
    background-position: 1px;
    background-size: 20px;
}
span.pack-icon.pi-instant{
    background-image: url(../images/new/instant.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}
span.pack-icon.pi-independent{
    background-image: url(../images/new/Independent.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
span.pack-icon.pi-bulk-disc{
    background-image: url(../images/new/bulk.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
span.pack-icon.pi-moderator{
    background-image: url(../images/new/moderator.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
span.pack-icon.pi-realtime{
    background-image: url(../images/new/realtime.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
span.pack-icon.pi-tainer{
    background-image: url(../images/new/tainer.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.more-details-desc {
    line-height: 20px;
    font-style: italic;
    font-size: 15px;
    color: #464646;
    margin-bottom: 20px !important;
}
.field-space-top{
    margin-top:20px;
}
.form-box{
    display: flex;
    gap: 20px; /* Space between columns */
    margin-bottom:25px;
}
.form-container {
  display: flex;
  gap: 20px; /* Space between columns */
  margin-bottom:15px;
}

.form-container.half{
    width:50%;
}
.form-container.quarter{
    width:30%;
}
.digial_challenge_options .option-title{
    width: 100%;
    font-weight: 600;
    display: block;
    margin: 10px 0;
    font-size: 18px;
    color: #333;
}
.digial_challenge_options .option-desc{
    font-size: 14px;
    font-weight: 400;
    color: #666;
    width: 100%;
    display: none;
    line-height: 18px;
}
.other_challenge{
    margin-top:30px;
}
.terms_label input[type="checkbox"] {
  transform: scale(1.5); /* Adjust the scale factor as needed */
  margin-right: 5px;
}
.terms_label{
    border-radius: 5px;
    padding: 12px 15px;
    background-color: #f5f5f5;
    font-size:17px;
}
.terms_label a{
    color:#0c274f;
    text-decoration:underline !important;
}
.radio-label svg{
    display: inline-block;
    width: 20px;
    height: 20px;
    fill: #0d2850;
    margin-right: 5px;
    margin-bottom: -3px;
}
.project-logo  {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 7px;
    margin-top: -4px;
    border: 1px solid #7b7b7b;
    border-radius: 5px;
    text-align: center;
}
.project-logo.logo-website{
    background-image: url(../images/icons/website.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
span.project-logo.logo-landing{
    background-image: url(../images/icons/landing.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
span.project-logo.logo-ai{
    background-image: url(../images/icons/ai.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
span.project-logo.logo-form{
    background-image: url(../images/icons/form.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px;
}
span.project-logo.logo-ads{
    background-image: url(../images/icons/ads.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}
span.project-logo.logo-branding{
    background-image: url(../images/icons/api.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
span.project-logo.logo-logo{
    background-image: url(../images/icons/bulb.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
span.project-logo.logo-other{
    background-image: url(../images/icons/custom.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
span.project-logo.cloud{
    background-image: url(../images/icons/cloud.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
span.project-logo.application{
    background-image: url(../images/icons/application.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
span.project-logo.security{
    background-image: url(../images/icons/security.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
#conditional-fields{
    margin-bottom:20px;
}
#conditional-fields label{
    margin-top:20px;
    margin-bottom:5px;
}
#custom-contact-form .form-group{
    margin-bottom:15px;
}
#custom-contact-form input[type=date]:focus, 
#custom-contact-form input[type=email]:focus, 
#custom-contact-form input[type=number]:focus, 
#custom-contact-form input[type=password]:focus, 
#custom-contact-form input[type=search]:focus, 
#custom-contact-form input[type=tel]:focus, 
#custom-contact-form input[type=text]:focus, 
#custom-contact-form input[type=url]:focus, 
#custom-contact-form select:focus, 
#custom-contact-form textarea:focus  {
    border-color: #007BFF;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
}
#custom-contact-form input[type=date]:hover, 
#custom-contact-form input[type=email]:hover, 
#custom-contact-form input[type=number]:hover, 
#custom-contact-form input[type=password]:hover, 
#custom-contact-form input[type=search]:hover, 
#custom-contact-form input[type=tel]:hover, 
#custom-contact-form input[type=text]:hover, 
#custom-contact-form input[type=url]:hover, 
#custom-contact-form select:hover, 
#custom-contact-form textarea:hover  {
    border-color: #007BFF;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
}
#custom-contact-form input[type=date], 
#custom-contact-form input[type=email], 
#custom-contact-form input[type=number], 
#custom-contact-form input[type=password], 
#custom-contact-form input[type=search], 
#custom-contact-form input[type=tel], 
#custom-contact-form input[type=text], 
#custom-contact-form input[type=url], 
#custom-contact-form select, 
#custom-contact-form textarea {
    width: 100%;
    border: 1px solid #666;
    border-radius: 5px;
    padding: .7rem 1rem;
    transition: all .3s;
}
span.required {
    font-size: 13px;
    color: red;
    margin-left: 5px;
    font-weight: 400;
    letter-spacing: 0px;
}
.field-space{
    margin-bottom:20px;
}
.field-space label{
    margin-bottom:5px;
}
.field-left {
  flex: 1; /* Example: left column takes up 2/3 of the space */
}

.field-right {
  flex: 1; /* Example: right column takes up 1/3 of the space */
}
.form-box label,
.form-container label{
    margin-bottom:5px;
}
#custom-contact-form h5{
    margin: 20px 0 5px;
    font-size: 18px;
}
#custom-contact-form .package-card h2{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
}
#custom-contact-form .feature {
    display: flex;
    align-items: center;
    margin: 20px 0;
    justify-content: flex-start;
    font-size: 16px;
    width: 100%;
    flex-direction: row;
}
#custom-contact-form .feature i {
    margin-right: 10px;
    font-size: 1.1em;
    color: #777;
    width: 20px;
    text-align: center;
    margin-top:-3px;
}
.slider-wrapper{
    width: 100%;
    position: relative;
    margin-bottom:5px;
}
#slider{
    margin: 15px 0 10px;
}
/* Base slider styling */
#custom-contact-form .ui-slider {
  height: 8px;
  background: #e0e0e0;
  border: none;
  border-radius: 2px;
  position: relative;
  width:89%;
}

/* The range (filled part) */
#custom-contact-form .ui-slider .ui-slider-range {
  background: #4285f4; /* Google blue */
  height: 100%;
  border-radius: 2px;
}

/* The handle (draggable part) */
#custom-contact-form .ui-slider .ui-slider-handle {
  width: 19px;
  height: 19px;
  background: #4285f4;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: -6px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

/* Hover and focus effect */
#custom-contact-form .ui-slider .ui-slider-handle:hover,
#custom-contact-form .ui-slider .ui-slider-handle:focus {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(66, 133, 244, 0.5);
}
#custom-contact-form .ui-slider-horizontal .ui-slider-handle {
    top: -.25em;
    border-radius:20px;
}
.slider-label-box{
    font-size:18px;
}
.slider-wrapper .ui-slider-handle {
    position: relative;
}
.slider-wrapper .tooltip {
    opacity: 1;
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: #4285f4;
    color: #fff;
    padding: 7px 14px;
    font-size: 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.slider-wrapper input[name="number_of_participants"]{
    border: 1px solid #999 !important;
    text-align: right;
    font-size: 22px;
    /* position: absolute; */
    width: 8% !important;
    padding: 2px 0px !important;
    float: right;
    margin-top: -10px;
    width: 10%;
}
.custom-datetime-select{
    display:flex;
}
.custom-datetime-select select{
    padding:5px 7px !important;
}

.custom-datetime-select select[name="day_start"],
.custom-datetime-select select[name="day_alt"]{
    margin-right:10px;
    width:70px !important;
}
.custom-datetime-select select[name="month_start"],
.custom-datetime-select select[name="month_alt"]{
    margin-right:10px;
    width:110px !important;
}
.custom-datetime-select select[name="year_start"],
.custom-datetime-select select[name="year_alt"]{
    margin-right:30px;
    width:80px !important;
}
.custom-datetime-select select[name="hour_start"],
.custom-datetime-select select[name="hour_alt"]{
    margin-right:10px;
    width:80px !important;
}
.custom-datetime-select select[name="halfhour_start"],
.custom-datetime-select select[name="halfhour_alt"]{
    margin-right:10px;
    width:60px !important;
}
.custom-datetime-select select[name="ampm_start"],
.custom-datetime-select select[name="ampm_alt"]{
    width:60px !important;
}
.discount-value{
    font-size: 16px;
    color: #017706;
    font-weight: 400;
}

.step-details.closer{
    margin-bottom: 10px !important;
}
.step-details{
    margin-bottom: 35px !important;
    font-size: 15px;
    color: #000;
    font-weight: 400;
    font-family: "Poppins", Sans-serif;
    line-height:17px;
}

#invoice-form .switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 50px;
  margin-left:10px;
}

#invoice-form  .switch input {
  display:none;
}

#invoice-form  .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

#invoice-form .slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 16px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 16px;
}

#invoice-form input:checked + .slider {
  background-color: #66bb6a;
}

#invoice-form input:checked + .slider:before {
  transform: translateX(26px);
}

#invoice-form .slider.round {
  border-radius: 34px;
}

#invoice-form .slider.round:before {
  border-radius: 50%;
}

/* Hide the default radio button */
.radio-button-style input[type="radio"] {
  display: none;
}
.radio-button-style{
    margin-top:10px;
}
.radio-button-style.communication{
    margin-top:5px;
}
.radio-button-style.communication label i{
    font-size: 16px;
    margin-right: 10px;
}
.radio-button-style label i{
    font-size: 14px;
    margin-right: 5px
}

/* Style the label to look like a button */
.radio-button-style.bigger  input[type="radio"] + label {
    font-size: 18px;
    width: 150px;
    text-align: center;
}
.radio-button-style  input[type="radio"] + label {
    padding: 10px 20px;
    background-color: #ffffff;
    color: #494949;
    border: 2px solid #848484;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 16px;
}

/* Change background color on hover */
.radio-button-style  input[type="radio"]:checked + label,
.radio-button-style  input[type="radio"] + label:hover {
  background-color: #0d2850;
  color:#fff !important;
  border: 2px solid #0c274f;
}

/* Optional: Style the label when checked */
.radio-button-style  input[type="radio"]:checked + label {
    background-color: #0d2850;
    border-color: #0c274f;
    color: #fff !important;
}

/* Optional: Style the label when checked */
.radio-button-style  input[type="radio"] + label:hover svg,
.radio-button-style  input[type="radio"]:checked + label svg {
    fill:#fff
}

.step-bar {
  font-family: "Poppins", Sans-serif;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 10px;
}
#custom-branding-fields{
    padding: 20px;
    border-radius: 10px;
    background-color: rgb(246, 246, 246);
    margin-bottom: 20px;
}
.otc-check-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:inline-block;
    background-color:#fff;
}
.checkbox-container:hover{
    background-color:#c3c3c3;
}
.checkbox-container {
    padding: 10px;
    background-color:#dedede;
    display: inline-block;
    transition: background-color 0.3s ease;
    color:#fff;
    border-radius: 10px;
    width:100%;
    position:relative;
}

.otc-check-icon {
    margin: 2px 5px;
}
.otc-checkbox-left{
    float:left;
    width:10%;
}
.otc-checkbox-right{
    float:right;
    width:90%;
}
.checkbox-label-small{
    font-size: 20px;
    margin: 10px 0;
    color:#000;
}
#otc-check-1,
#otc-check-2{
    visibility:hidden;
    width:0;
    height:0;
}
.file-choosen{
    font-size: 14px;
    margin: 2px 20px;
    margin-right: 20px;
}
span.checkbox-tagger.extra{
    background-color: #9f2b22;
}
span.checkbox-tagger {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 15px;
    border-radius: 10px;
    text-transform: uppercase;
}
.checkbox-container .upload-button-wrapper{
    max-width: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom:10px;
}
.checkbox-container .upload-button {
    margin-top: 10px;
    margin-right: 10px;
    height: auto;
    width: 100%;
    display: inline-block;
    text-align:center;
    padding: 10px 20px;
    font-size: 15px;
    color: white;
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.checkbox-container .upload-button:hover {
    color: #000 !important;
    background-color: #f4f4f4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.checkbox-container .upload-button:active {
    color: #000 !important;
    background-color: #f4f4f4;
}
.checkbox-container:has(input[type="checkbox"]:checked) {
    background-color: #4CAF50; 
}
.checkbox-container:has(input[type="checkbox"]:checked) .checkbox-label-small {
    color:#fff;
}
.checkbox-container:has(input[type="checkbox"]:checked) .otc-check-icon {
    background-image: url(../images/tick.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
.checkbox-container label{
    cursor: pointer;
    float: left;
    width: 100%;
    position: absolute;
}
span.step-label {
    border: 2px solid;
    text-align: center;
    width: 40px;
    display: inline-block;
    padding: 3px 0;
    text-transform: uppercase;
    font-weight: 400;
    color: #3c3c3c;
    font-size: 20px;
    background-color: #ffffff;
    border-radius: 100%;
    margin-right: 5px;
}
.step-desc{
    font-size: 15px;
    line-height: 14px;
    font-weight: 300;
}
.step-item.active .step-desc{
    color:#d1242a;
}
.step-item.passed .step-desc{
    color: #3FB74E;
}
.step-item {
    width: auto;
    padding: 10px 0;
    text-align: left;
    border-radius: 0;
    font-weight: bold;
}
.step-item.passed {
}
.step-item.active {
    
}
.step-item.passed .step-label  {
    color: #FFF;
    background-color:#3FB74E;
    border:2px solid #3FB74E;
}
.step-item.active .step-label  {
    color: #d1242a;
}
.confirmation-table-wrapper{
    font-family: "Poppins", Sans-serif;
    max-width:500px;
    margin:0 auto;
}
#confirm-table-html tr td:first-child,
#confirmation-table tr td:first-child{
    font-weight:500;
}
.confirm-slot{
    margin-top: 5px;
}
#confirm-table-html tr,
#confirmation-table tr{
    border-top:none;
    border-left:none;
    border-right:none;
    background-color:#fff;
}
#confirmation-table td{
    border:none;
    background-color:#f9f9f9;
}
#confirm-table-html td{
    border:none;
    background-color:#fff;
}
#confirm-table-html td{
    border-bottom:none;
    padding: 20px 0px;
    vertical-align:middle;
}
#confirmation-table td{
    border-bottom: 1px solid #ddd;
    padding: 16px;
    vertical-align: middle;
    line-height: 34px;
}
#confirm-table-html input:focus,
#confirm-table-html input:active,
#confirm-table-html input:hover{
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow:0 1px 0 0 rgba(0,0,0,1) !important;
}
#confirm-table-html input{
    border: none !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
}
#step-3-button{
    opacity:0.5;
}
.step-bar{
    margin-top: -15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #f5f5f5;
}
.digial_challenge_options{
    gap: 20px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}
.digial_challenge_options li{
    list-style:none;
}
#start_date{
    max-width:100%;
}
#contact_person_name:hover,
#contact_person_name:active,
#contact_person_name:focus{
    box-shadow:0 1px 0 0 rgba(0,0,0,1) !important;
}
#contact_person_name {
    border-radius: 0 !important;
    padding: 10px 0 !important;
    font-size: 40px;
    font-family: "Hurricane", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #333 !important;
}
.confimation-success .gohome:hover{
    color: #2f2f2f;
    text-decoration:underline;
}
.confimation-success .gohome{
    text-decoration:underline;
    text-transform: uppercase;
    color: #2f2f2f;
    /* background-color: #f2f2f2; */
    padding: 13px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 0;
    margin-top: -20px;
    font-size: 17px;
}
.form-button.complete-step{
    padding: 20px 30px !important;
    background-color: #d81e24 !important;
    margin: 20px 0 !important;
}
.form-button.complete-step:hover{
    background-color: #97090e !important;
}
.confimation-success h1 {
    font-size: 36px !important;
    margin-bottom: 40px;
}
.digial_challenge_options li {
    float: left;
    width: 48%;
}
.digial_challenge_options li label{
    width:100%;
}
.final-notification {
    display: inline-flex;
    align-items: center;
    background-color: #e6f7e6;
    border: 2px solid #b6e6b6;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 16px;
    color: #008000;
    margin: 20px 0;
}
.final-notification span {
    font-weight: bold;
    margin-right: 8px;
}
.final-message-success{
    font-size:16px;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 10px;
}
.confimation-success{
    text-align:center;
}
.other_challenge.hidden{
    display:none;
}
.other_challenge_list{
    padding:0;
    margin:0;
}
.other_challenge_list li{
    margin-bottom:10px;
    list-style:none;
}
#interactiveSection .field-right{
    flex:2;
}
.radio-buttons label{
    margin-right:10px;
}
.error-select-course{
    color: red;
    font-size: 16px;
    display: none;
    margin-top: -10px;
}
.error-select-abn{
    margin-top:10px;
    color: red;
    font-size: 16px;
    display: none;
}
.error-invoice-address{
    color: red;
    font-size: 16px;
    display: none;
}
.otc-date-picker input[type="text"]{
    max-width:50%;
    width:100%;
}
.otc-date-picker-50 input[type="text"]{
    max-width:50%;
    width:100%;
}
.otc-date-picker{
    width:100%;
}
.otc-date-picker-50{
    width:100%;
}
.tooltip:empty {
    display:none;
}

/* Icons */
input[name="company_name"]{
    background-image: url(../images/company_ico.svg);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 24px;
    padding-left: 38px !important;
}
input[name="full_name"]{
    background-image: url(../images/user_ico.svg);
    background-repeat: no-repeat;
    background-position: 11px 14px;
    background-size: 18px;
    padding-left: 38px !important;
}
input[name="job_title"]{
    background-image: url(../images/job_ico.svg);
    background-repeat: no-repeat;
    background-position: 13px 13px;
    background-size: 20px;
    padding-left: 38px !important;
}
input[name="email"]{
    background-image: url(../images/mail_ico.svg);
    background-repeat: no-repeat;
    background-position: 13px 13px;
    background-size: 20px;
    padding-left: 38px !important;
}
input[name="phone_number"]{
    background-image: url(../images/telephone_ico.svg);
    background-repeat: no-repeat;
    background-position: 13px 13px;
    background-size: 21px;
    padding-left: 38px !important;
}
textarea[name="company_address"]{
    background-image: url(../images/location_ico.svg);
    background-repeat: no-repeat;
    background-position: 13px 13px;
    background-size: 20px;
    padding-left: 38px !important;
}
input[name="company_website"] {
    background-image: url(../images/new/web.svg?update);
    background-repeat: no-repeat;
    background-position: 13px 13px;
    background-size: 18px;
    padding-left: 38px !important;
}
#confirmation-table{
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
    font-size: 15px;
    border-radius: 10px;
    table-layout: fixed;
    overflow: hidden;
}
.table-icon{
    width: 38px;
    height: 38px;
    display: inline-block;
    margin-bottom: -13px;
    margin-right: 10px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
}
.tico-date{
    background-image: url(../images/calander_ico.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.tico-user{
    background-image: url(../images/user_ico.svg);
     background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.tico-package{
    background-image: url(../images/package.svg);
     background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}
.tico-customize{
    background-image: url(../images/pencil.svg);
     background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
.flatpickr-input-date,
.flatpickr-input{
    background-image: url(../images/calander_ico.svg);
    background-repeat: no-repeat;
    background-position: 14px 13px;
    background-size: 16px;
    padding-left: 40px !important;
}
.accept-checkbox-wrapper label{
    padding: 15px 20px;
    background-color: #f2f2f2;
    border-radius: 10px;
}
#custom-contact-form label {
    color: #0d2850;
}
#custom-contact-form .error{
    font-size: 16px;
    color: red;
    display: inline-block;
    margin: 5px 0;
}
#package-01 .package-box{
    background-color: #D1242A;
    display: block;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 22px;
    margin: -10px -16px;
    margin-bottom: 30px;
}
#package-01 .package-desc{
    display: inline-block;
    color: #fff;
    clear: both;
    font-weight: 600;
}
#package-01 .package-label{
    display: inline-block;
    background-color: #880D12;
    color: #fff;
    clear: both;
    font-size: 15px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}

#package-02 .package-box{
    background-color: #24D190;
    display: block;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 22px;
    margin: -10px -16px;
    margin-bottom: 30px;
}
#package-02 .package-desc{
    display: inline-block;
    color: #fff;
    clear: both;
    font-weight: 600;
}
#package-02 .package-label{
    display: inline-block;
    background-color: #108157;
    color: #fff;
    clear: both;
    font-size: 15px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}

#package-03 .package-box{
    background-color: #168BEC;
    display: block;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 22px;
    margin: -10px -16px;
    margin-bottom: 30px;
}
#package-03 .package-desc{
    display: inline-block;
    color: #fff;
    clear: both;
    font-weight: 600;
    font-size:19px;
}
#package-03 .package-label{
    display: inline-block;
    background-color: #103C81;
    color: #fff;
    clear: both;
    font-size: 15px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}

#package-01 input[type="radio"]:checked + label {
    border-color: #D1242A;
    background-color:#fff;
}
#package-02 input[type="radio"]:checked + label {
    border-color: #24D190;
    background-color:#fff;
}
#package-03 input[type="radio"]:checked + label {
    border-color: #168BEC;
    background-color:#fff;
}
#final-loader {
    text-align:center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffffde;
    display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.final-success{
    background-image: url(../images/tick.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78px;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.otc-loader-status{
    clear: both;
    display: block;
    width: 100%;
    font-size: 15px;
    margin: 20px 0;
    letter-spacing: 0;
    text-transform: capitalize;
}



/* Hide the default radio button */
.digial_challenge_options input[type="checkbox"] {
  display: none;
}

.digial_challenge_options{
    margin-top:5px;
}
.digial_challenge_options label{
    width:100%;
}
.digial_challenge_options  label i{
    font-size: 16px;
    margin-right: 10px;
}
.digial_challenge_options  label i{
    font-size: 14px;
    margin-right: 5px
}

.digial_challenge_options input[type="checkbox"] + label {
    padding: 20px;
    background-color: #ffffff;
    color: #494949;
    border: 1px solid #666;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 16px;
}

/* Change background color on hover */
.digial_challenge_options input[type="checkbox"] + label:hover {
  background-color: #FFF !important;
  color:#000000 !important;
  border: 1px solid #3FB74E;
  box-shadow: 0 0 0 1px #3FB74E;
}

/* Optional: Style the label when checked */
.digial_challenge_options input[type="checkbox"]:checked + label {
    background-color: #ffffff;
    border: 1px solid #3FB74E;
    color: #000000 !important;
    box-shadow: 0 0 0 1px #3FB74E;
    background-image: url(../images/icons/tick.svg);
    background-repeat: no-repeat;
    background-position: 96% 10%;
    background-size: 22px;
}

#final-loader .lds-roller,
#final-loader  .lds-roller div,
#final-loader  .lds-roller div:after {
  box-sizing: border-box;
}
#final-loader  .lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#final-loader  .lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
#final-loader .lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: rgb(11 40 83);
  margin: -3.6px 0 0 -3.6px;
}
#final-loader .lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
#final-loader .lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
#final-loader .lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
#final-loader .lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
#final-loader .lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
#final-loader .lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
#final-loader .lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
#final-loader .lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
#final-loader .lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
#final-loader .lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
#final-loader .lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
#final-loader .lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
#final-loader .lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
#final-loader .lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
#final-loader .lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
#final-loader .lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
    .digial_challenge_options li{
        width:100%;
        margin:0;
        text-align:left;
    }
    .step-desc{
        display:none;
    }
    .otc-date-picker-50 input[type="text"]{
        max-width: 100%;
        width: 100%;
    }
    #custom-branding-fields {
        background-color: #fff;
        padding: 0;
    }
    .otc-checkbox-left {
        float: left;
        width: 20%;
    }
    .otc-checkbox-right {
        float: right;
        width: 80%;
    }
    .checkbox-label-small {
        font-size: 18px;
        margin: 0;
    }
    #confirmation-table td {
        border-bottom: 1px solid #ddd;
        padding: 10px;
    }
    #confirm-table-html td {
        font-size: 14px;
    }
    .table-icon {
        display:none;
    }
    span.checkbox-tagger {
        position: static;
        top: 18px;
        right: 20px;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2px 10px;
        border-radius: 10px;
        text-transform: uppercase;
        float: right;
        margin-top: 10px;
    }
    .final-notification {
        display: inline-flex;
        flex-direction: column;
    }
    .radio-button-style.bigger input[type="radio"] + label {
        width: 100px;
    }
    .otc-date-picker input[type="text"]{
        max-width:100%;
        width:100%;
    }
    .form-container{
        flex-direction: column;
    }
    .package-container {
        flex-direction: column;
        
    }
    .package-container .package-card {
        width:100%;
    }
    .slider-wrapper input[name="number_of_participants"] {
        border: 1px solid #999 !important;
        text-align: right;
        font-size: 22px;
        /* position: absolute; */
        width: 28% !important;
        padding: 2px 10px !important;
        float: right;
        margin-top: 0;
    }
    #custom-contact-form .ui-slider {
        -ms-touch-action: none;
        touch-action: none;
        float: left;
        margin-bottom: 10px;
        z-index: 10000;
        height: 8px;
        background: #e0e0e0;
        border: none;
        border-radius: 2px;
        position: relative;
        width: 100%;
        z-index: 10000;
        touch-action: none;
        margin-top: 40px;
    }
    .radio-button-style input[type="radio"] + label {
        padding: 10px 12px;
        text-align: center;
        min-width: 70px;
    }
    .slider_plus {
        display: none;
        font-size: 20px;
        float: right;
        padding: 7px 2px;
        margin-top: 0;
    }
}


.slide-left {
	-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
    width: 100%;
    margin-left: 100px;
}

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}