.nav-indicator {
            display: flex;
            justify-content: space-around; /* Changed to space-around for even spacing */
            list-style: none;
            margin-top: 1em;
            padding-left: 0;
			width: 100%;
            position: relative;
        }

        .nav-indicator::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: gray; /* Line color */
            z-index: 0; /* Keep the line behind the dots */
            transition: background-color 0.3s ease; /* Transition for the line color */
        }

        .indicator-point {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: gray;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            z-index: 1; /* Raise above the line */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* Hover effect */
        .indicator-point:hover:not(.active) {
            background-color: #bbb; /* Hover color */
            transform: scale(1.1); /* Slightly enlarge on hover */
        }

        /* Active point styling */
        .indicator-point.active {
            background: linear-gradient(to bottom, #ff5555, #cc0000); /* Gradient for active point */
            transform: scale(1.2); /* Enlarge active point */
        }

        /* Add more animations for the active class change */
        .indicator-point.active::after {
            animation: pulse 1s infinite;
        }

        /* Pulse effect on the active point */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
            }
        }
.loader-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF81;
    backdrop-filter:blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#content {
    display: none;
}
#gif-loader {
    width: 6%;
    height: auto;
}
body{
    background:linear-gradient(0deg, rgba(244, 244, 244, 0.7), rgba(244, 244, 244, 0.7)),#FFFFFF;
    overflow: auto !important;
    /*  background-image: url(images/sibguardbg.JPG);
background-size: contain;
    */
}
.bgbody{
    overflow: auto !important;
}

.drop-control{
    border-radius:20px;
    font-size: 1rem;
    line-height: 1.5;
    display: block;

}
.btn-block {
    display: block;
    width: 100%;

}
.addword {
    word-wrap: break-word;
    word-break: break-all;
}
.registration-form {
    padding: 10px 0;
}
.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.file-upload-input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff5858;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
}

.choosefile{
    display:grid;
    justify-content:center;
}


.registration-form form {
    background-color: #fff;
    max-width: 950px;
    margin: auto;
    padding: 50px 70px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
}

.registration-form .form-icon {
    text-align: center;
    background-color: #ff5858;
    border-radius: 50%;
    font-size: 40px;
    color: white;
    width: 100px;
    height: 100px;
    margin: auto;
    margin-bottom: 40px;
    line-height: 100px;
}

.registration-form .item {
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: 1px solid #ddd; /* Added to enhance the input fields */
}

.registration-form .create-account {
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    background-color: #ff5858;
    border: none;
    color: white;
    margin-top: 20px;
    transition: background-color 0.3s ease; /* Transition for a smoother hover effect */
}

.registration-form .create-account:hover {
    background-color: #e04e4e; /* Darker shade on hover for the button */
    color: #fff;
}

.registration-form .social-media {
    max-width: 600px;
    background-color: #fff;
    margin: auto;
    padding: 35px 0;
    text-align: center;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #9fadca;
    border-top: 1px solid #dee9ff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
}

.registration-form .social-icons {
    margin-top: 30px;
    margin-bottom: 16px;
}

.registration-form .social-icons a {
    font-size: 23px;
    margin: 0 3px;
    color: #5691ff;
    border: 1px solid;
    border-radius: 50%;
    width: 45px;
    display: inline-block;
    height: 45px;
    text-align: center;
    background-color: #fff;
    line-height: 45px;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.registration-form .social-icons a:hover {
    text-decoration: none;
    opacity: 0.6;
}
.error-message {
    display:none;
    color:red;
}
.highlighted {
    /*            background-color: #ff58580a; */
    box-shadow: 0 0 0 3px #ff58580a inset;
    padding: 5px;
}

.details-container {
    border: 2px solid #ff585887; /* Blue border color */
    padding: 15px;
    background-color: #f8f9fa; /* Light background color */
    margin-bottom: 20px;
    border-radius: 5px; /* Optional: for rounded corners */
}
.details-container fieldset {
    position: relative; /* Ensures the box-shadow or outline doesn't affect layout */
}

.form-instruction p {
    color: #333; /* Text color */
    padding: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #007bff; /* Accent border color */
    background-color: #f8f9fa; /* Light background color */
}

@media (max-width: 576px) {
    .registration-form form {
        padding: 50px 20px;
    }

    .registration-form .form-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
        line-height: 70px;
    }
}
.wizard {
  --wizard-step-number-active-bg: #ff5858!important;
}
.wizard > .steps > ul > li.current .number {
  border-color: #ff5858!important;
  color: #ff5858!important;
  font-size: 0;
}
.wizard > .steps > ul > li.done .number {
  background-color: #ff5858!important;
  color: #FFFFFF;
  border-color: #ff5858!important;
  font-size: 0;
}
/* Tab Navigation Styles */
.tab {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #ccc;
}

.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border-radius: 5px; /* Rounded corners for the tab buttons */
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ff5858;
    color: white;
}
.form-control {
    height: unset;
}

/* Tab Content Styles */
.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 0.5s;
}

/* Responsive layout for tabs */
@media screen and (max-width: 600px) {
    .tab {
        flex-direction: column;
    }

    .tab button {
        width: 100%;
        text-align: center;
    }
}
/* Fading animation */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive layout - makes the tab buttons stack horizontally on smaller screens */
@media screen and (max-width: 600px) {
    .tab button {
        float: none;
        display: block;
        text-align: left;
    }
}

.slider-container {
    width: 90%;
    margin: 2em auto;
}

.income-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #e9e9e9;
    outline: none;
    margin-top: 20px;
}

.income-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ff5858;
    cursor: pointer;
    border: 2px solid #fff; /* White border around the thumb */
}

/* Moz equivalent for Firefox */
.income-slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ff5858;
    cursor: pointer;
    border: 2px solid #fff;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow the labels to wrap onto the next line */
    padding: 0 10px;
    margin-top: 20px; /* Add some space above the labels */
}

.range-labels span {
    font-size: 14px; /* Increased font size */
    color: #333;
    text-align: center;
    flex-basis: 20%; /* This will allow two ranges per line, adjust as needed */
    margin: 2px 0; /* Add some space above and below the labels */
    white-space: normal; /* Allow the text to wrap */
}


/* Specific label that is selected can have a different style */
.range-labels span.active {
    font-weight: bold;
    color: #ff5858;
}

.selected-range {
    text-align: center;
    margin-top: 10px;
    color: #555;
    font-size: 14px;
}

.range-labels {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    align-items: center;
    justify-items: center;
    padding: 0 10px;
    height: auto; /* Adjust height as needed to fit vertically wrapped text */
}

.label {
    font-size: 14px;
    color: #333;
    text-align: center;
    cursor: pointer; /* Indicates that the labels are clickable */
    line-height: 1.4;
    white-space: normal;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .range-labels {
        grid-template-columns: repeat(5, 1fr); /* 2 rows on medium and large devices */
    }
    .form_butts {
        display: flex;
        align-items: center; /* Align the items vertically */
        gap: 10px; /* This adds space between the radio buttons and labels */
    }
}

.form_butts {
    padding-left:2%;
}

.range-labels span {
    font-size: 14px; /* Increased font size */
    color: #333;
    text-align: center;
    flex: 1; /* This ensures that each label flexibly adjusts to the available space */
    margin: 5px 0; /* Add some space above and below the labels */
    white-space: nowrap; /* Prevents the text from wrapping */
}

/* You can add media queries to handle responsiveness if necessary */
@media (max-width: 768px) {
    .range-labels{
        display: flex;
    }
    .range-labels span {
        flex-basis: 100%; /* Each label takes full width on smaller screens */
        font-size: 12px; /* Slightly smaller font size for smaller screens */
    }
}

.radio-inline {
    display: inline-block;
    margin-right: 15px; /* Adjust spacing between radio buttons */
}

/* Styling for the radio buttons */
input[type='radio'] {
    accent-color: #ff5858;
}

/* Optional: Add more styling for the labels if needed */
.radio-inline label {
    padding-left: 5px; /* Adjust padding if needed */
    cursor: pointer;
}

/* Style the checked radio button label */
input[type='radio']:checked + label {
    color: #ff5858; /* Color for text label when radio is selected */
}
.flight-types {
    display: flex;
    max-width: 336px;
    width: 100%;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    font-size: 12px;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
}
.flight-types > input {
    display: none;
}
.flight-types > input:checked + label {
    color: #fff;
}
.flight-types > input:nth-of-type(1):checked ~ label:last-of-type:before {
    transform: translateX(calc(0% + 0px));
}
.flight-types > input:nth-of-type(2):checked ~ label:last-of-type:before {
    transform: translateX(calc(100% + 0px));
}
.flight-types > input:nth-of-type(3):checked ~ label:last-of-type:before {
    transform: translateX(calc(200% + 0px));
}
.flight-types label {
    flex: 1;
    font-size: medium;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: black;
    text-overflow: ellipsis;
    cursor: pointer;
}
.flight-types label:last-of-type:before {
    content: "";
    display: block;
    max-width: calc(33.3333333333% - 0px);
    margin: 0px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transform: translateX(0);
}
.flight-types label {
    padding: 6px 3px;
    transition: color 250ms cubic-bezier(0, 0.95, 0.38, 0.98);
}
.flight-types label:before {
    background: #ff5858;
    transition: all 250ms cubic-bezier(0, 0.95, 0.38, 0.98);
}
.flight-types label:not(:last-child) {

    border-right: 0px solid #fff;
}


#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    z-index: -1;
}

/* Header with logo */

#imgLogo{
    height: 100px;
    float:right !important;
    position: relative;
    z-index: 999999;
}



/* Form container */
.container {
    position: relative;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 40px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    width: 100%; /* Full width */
    max-width: 40rem; /* Maximum width */
    margin: 20px auto; /* Centering */
}

/* For small screens, use full width */
@media (max-width: 600px) {
    .container {
        width: 90%; /* Adjust width for small screens */
        margin-top: 10px; /* Adjust top margin */
    }

    .header-logo img {
        max-height: 50px; /* Smaller logo for small screens */
    }
}

/* Form header */
.form-header h3 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Progress bar */
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: #333;
    text-transform: uppercase;
    font-size: 9px;
    width: 50%;
    float: left;
    position: relative;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #ddd;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #ddd;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /* Place the line behind the dots */
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active:before, #progressbar li.active:after {
    background: #333;
}

/* Button styling */
.button-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Space out buttons */
    gap: 10px; /* Full width to accommodate both buttons */
}
.button-container-single {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center button */
    width: 100%; /* Full width to accommodate the button */
}

.action-button {
    width: 73px;
    font-size: small;
    background-color: #333;
    border: none;
    color: white;
    border-radius: 25px;
    cursor: pointer;
    display: block;
    padding: 5px;
    margin: 10px 5px; /* Optional: Adjust spacing between buttons */
}
.mainOTP {
    display: grid;
    opacity: 1;
    align-content: space-evenly;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}
#otp {
    font-size: 1.5em;
    width: 100%;
    padding: 0.75em 0.5em;
    border: 2px solid transparent;
    height: calc(1.5em + .75rem + 2px);
    border-bottom: 2px solid #ccc;
    background-color: transparent;
    transition: border-color 0.3s, background-color 0.3s;
    font-family: Arial, sans-serif;
    text-align: center;
    outline: none;
    /* Responsive font size */
    @media (max-width: 600px) {
        font-size: 1em;
    }
    animation: scale-in 0.5s ease forwards;
}

/* Animation for the input */
@keyframes scale-in {
    from {
        transform: scale(0.9);
        opacity: 0.5;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Styles when the input is focused */
#otp:focus {
    background: antiquewhite;
    box-shadow: 0 1px 0 0 #a41515;
    border-bottom-color: #a41515; /* Underline color when the input field is focused */
}



/* Style for the placeholder */
#otp::placeholder {
    color: #ccc;
    opacity: 1;
}

#otp:hover:not(:focus) {
    background-color: #f8f8f8;
}

#otp:focus::after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 100%;
    background: #a41515;
    transition: background-color .5s ease;
}




.action-button:hover {
    background-color: #555;
}

/* Progress bar styling */
#progressbar {
    display: flex; /* Use flexbox to create a row of items */
    justify-content: space-between; /* Distribute space evenly between items */
    align-items: center; /* Align items vertically */
    margin: 0;
    padding: 0;
    list-style-type: none; /* Remove default list styling */
}

#progressbar li {
    flex: 1; /* Allow each item to grow and fill the space */
    text-align: center; /* Center text within each item */
}

#progressbar li:before {
    content: counter(step); /* Number the steps */
    counter-increment: step;
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #ddd; /* Grey background for step numbers */
}

#progressbar li.active:before, #progressbar li.active:after {
    background: #EC1C24; /* Red color for active steps */
    color: white;
}

.card-block-form {
    /* Set width and height as needed, or use max-width/max-height for responsiveness */
    width: 100%;
    height: 100%;
    overflow: hidden; /* This will crop the child fieldset to the parent div's size */
}

fieldset {
    width: 80%; /* Full width to match parent */
    overflow: hidden; /* Crop to parent size */
    /* More fieldset styles as needed */
}

.section {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
.field {
    margin-bottom: 15px;
}
.field strong {
    display: block;
    color: #495057;
}
.field span {
    font-size: 14px;
}
.row {
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .col-md-4, .col-md-6 {
        margin-bottom: 15px;
    }
}
.digit-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    input {
        width: 40px;
        height: 40px;
        background-color: #ff5858;
        border: none;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        font-family: 'Raleway', sans-serif;
        font-weight: 200;
        color: white;
        margin: 0 2px;
        border-radius:25%;
    }


    .splitter {
        padding: 0 5px;
        color: #4a3c3c;
        font-size: 24px;
    }
}

.prompt {
    margin-bottom: 20px;
    font-size: 20px;
    color: #4a3c3c;
}
.readonly-checkbox{
    opacity: 0.5;
    pointer-events: none;
}
.modified {
    background-color: #bbff00bf;
}
#declarationRadio {
    height: 20px;
    width: 20px;
}
#fyiblock {
    font-size: smaller;
}
#info-alert {
    font-size: small;
}
.nav-group-sub {
    display: none; // This makes them collapsed by default
}
.nav-sidebar .nav-item-open > .nav-link:not(.disabled):not(:active) {
    background-color: transparent;
}
.lead-justify{
  text-align: justify;
}

.mobile-friendly-button {
    min-height: 44px; /* Minimum touch target size */
    min-width: 100px;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Button states */
.action-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.action-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-button:not(:disabled):active {
    transform: translateY(1px);
}

/* Loading spinner animation */
.ph-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        gap: 16px;
    }

    .action-button {
        width: 100%;
        margin: 0;
    }

    #progressbar li {
        font-size: 12px;
    }
}

/* Form field enhancements */
.form-control {
    height: 44px;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: #ff5858;
    box-shadow: 0 0 0 3px rgba(255, 88, 88, 0.1);
}

/* Progress indicator enhancement */
#progressbar li.active:before {
    background: #ff5858;
    box-shadow: 0 0 10px rgba(255, 88, 88, 0.5);
}

#progressbar li.active {
    color: #ff5858;
}

/* Feedback messages */
.validation-invalid-label {
    font-size: 14px;
    color: #dc3545;
    margin-top: 4px;
    display: block;
}

/* Visual feedback for success/error states */
.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.wizard {
    display: none;
}

/* Show progress steps on screens larger than 768px */
@media (min-width: 768px) {
    .wizard {
        display: block;
    }
}
.custom-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Optional: Custom styles for SweetAlert */
.swal2-custom-popup {
    padding: 2em;
    border-radius: 10px;
}

.swal2-custom-title {
    font-size: 1.5em;
    color: #333;
}