/* styles.css */
/* Add padding to the top of the content to prevent overlap with the header */
.content-wrapper {
    height: calc(100vh - 1px - 1px); /* Adjust the 100px to match your header and footer height */

}

/* Add space at the bottom of the form container */
.form-container {
    margin-bottom: 100px; /* Adjust this value as needed */
  }
  

/* Content styles */
.content-container {
    flex: 1; /* Grow to fill remaining space */
    overflow-y: auto; /* Enable vertical scroll */
    padding-top: 20px; /* Optional: Add space for the header */
  }
  
  
body {
    line-height: 1.5;
    margin: 20px;
    background-color: #f3eee7;
}

.for-merchants {
    font-weight: bold;
}

.form-section {
    margin-bottom: 5px;
}

label {
    display: block;
    margin-bottom: 2.5px;
    color: #040720;
    font-family: 'Raleway', sans-serif;
}

input[type="text"],
input[type="email"],
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}



/* Styling for select elements */
/* Styling for select elements */
select {
    width: calc(100% - 12px); /* Adjust width to account for padding and border */
    padding: 10px; /* Apply padding to all sides */
    margin-bottom: 10px; /* Add margin bottom for spacing */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url('../static/images/arrow.svg'); /* Arrow icon */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position the arrow icon */
}

/* Adjust margin-right for select elements in the .form-field */
.form-field select {
    margin-right: 0; /* Remove margin-right */
}

/* Styling for dropdown arrows */
.select2-container::after,
.city-dropdown::after,
.bank-dropdown::after,
.selling-category-dropdown::after,
.bank-branch-dropdown::after,
select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent; /* Adjust arrow size as needed */
    border-right: 5px solid transparent; /* Adjust arrow size as needed */
    border-top: 5px solid #000; /* Adjust arrow color as needed */
    pointer-events: none; /* Ensure pseudo-element doesn't interfere with dropdown functionality */
}

/* Style the select element */
select {
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
}

/* Style the file input */
input[type="file"] {
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
}

/* Style the checkbox and its label */
input[type="checkbox"] {
    margin-right: 5px;
}

/* Submit and Reset buttons styling */
button[type="submit"],
button[type="reset"] {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif; /* Change the font family */
    /* font-style: 'normal'; */
    font-size: 1em; /* Change the font size */
    font-weight: 'normal';
    background-color: black;
    color: white;
    margin-right: 10px; /* Add some margin between the buttons */
    text-decoration: none; /* Remove underline for anchor elements */
    display: inline-block; /* Make anchor elements behave like buttons */
    /* Remove default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* padding: 10px 20px;  */
}

.button-container {
    margin-left: auto; /* Push the button container to the right by aligning it to the end */
}

.form-container {
    display: none;
    margin-bottom: 20px;
}

.content {
    color: #3A3B3C;
    line-height: 0.3;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
}

h1,
h2,
h3 {
    font-family: 'Raleway', sans-serif;
}

.form-section:last-child {
    margin-bottom: 200px;
}

.form-section .error-message {
    margin-bottom: 500px;
}

.form-fields-container {
    font-family: 'Raleway', sans-serif;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.form-field {
    width: calc(50% - 10px); /* Adjust width as needed */
    margin-bottom: 15px; /* Adjust margin as needed */
}

.form-field label {
    display: block;
}

.form-field input {
    width: calc(100% - 10px); /* Adjust width as needed */
}

.form-field .error-message,
#unregisteredMobileNumberError,
#registeredMobileNumberError,
#registeredAccountNumberError,
#unregisteredAccountNumberError,
#registeredAccountHolderNameError,
#unregisteredAccountHolderNameError,
#registeredIndividualNameError,
#unregisteredIndividualNameError,
#unregisteredSliderErrorElement,
#registeredSliderErrorElement,
#registeredFileError,
#unregisteredFileError,
#registeredMerchantNameError,
#unregisteredMerchantNameError,
#unregisteredAddressError,
#brDocumentError,
#nicFrontDocumentError,
#nicBackDocumentError,
#registeredBankStatementError,
#unregisteredBankStatementError {
    color: red;
    font-family: 'Raleway', sans-serif;
}

.error-message {
    color: red;
}

#slider-value {
    display: none !important;
}

.container {
    display: flex;
    justify-content: space-between;
}

.radio-group {
    display: flex;
}

.radio-group label {
    margin-right: 20px; /* Adjust margin as needed */
}

.left-section {
    width: 100%; /* Left half */
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    font-family: 'Raleway', sans-serif;
}

.logo{
    width: 200px; /* Set a specific width */
    height: 150px; /* Set a specific height */
    max-width: 100%; /* Ensure images don't exceed the width of their container */
    height: auto; /* Maintain aspect ratio */
    margin-right: auto;
}

/* overlay animation  */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f3eee7;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader {
    display: flex;
    align-items: center;
}

.dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #d0c0dd;
    margin-top: 20px;
    margin-left: 8px;
    animation: pulse 1.5s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.5s; }
.dot:nth-child(3) { animation-delay: 1s; }

@keyframes pulse {
    0%, 100% { background-color: #d0c0dd; }
    50% { background-color: #0217a3; }
}

.loader-text {
    font-family: 'Raleway', sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #0217a3;
    margin-right: 10px;
}

.loader-image {
    width: 32%;
    height: auto;
    margin-bottom: 2%;
  
}


/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
    .form-field {
        width: 100%; /* Full width */
    }

    .content p {
        font-size: 0.9em; /* Reduce font size */
        line-height: 0.5; /* Increase line height */
    }

    .radio-group label {
        margin-right: 10px; /* Reduce margin */
    }

    /* Adjust margin for select elements in the .form-field */
    .form-field select {
        margin-right: 10px; /* Reduce margin */
    }


    .button-container img {
        height: 40PX; /* Smaller size for the home icon on mobile devices */
    }

    .loader-text {
        font-size: 30px; /* Reduce font size */
    }

    .dot {
        width: 16px; /* Reduce dot size */
        height: 16px; /* Reduce dot size */
        margin-top: 10px; /* Reduce margin top */
    }

    .loader-image {
        width: 20%; /* Reduce image width */
    }

    /* Submit and Reset buttons styling */
    button[type="submit"],
    button[type="reset"] {
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-family: 'Raleway', sans-serif; /* Change the font family */
        /* font-style: 'bold'; */
        font-weight: 400;
        font-size: 1em; /* Change the font size */
        background-color: black;
        color: white;
        margin-right: 10px; /* Add some margin between the buttons */
        text-decoration: none; /* Remove underline for anchor elements */
        display: inline-block; /* Make anchor elements behave like buttons */
        /* Remove default browser styling */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    h2 {
        font-size: calc(1em + 1vw); /* Set the font size relative to the viewport width */
    }
    
}