html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Arial, sans-serif;
}

p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Arial, sans-serif;
}

.container {
    flex: 1;
}
/* Always show the full name and hide the abbreviation by default */
.navbar-brand-full {
    display: block;
}

.navbar-brand-abbrev {
    display: none;
}

/* On smaller screens, hide the full name and show the abbreviation */
@media (max-width: 768px) { /* Adjust this value based on your needs */
    .navbar-brand-full {
        display: none;
    }

    .navbar-brand-abbrev {
        display: block;
    }
}

.title-and-line {
    display: flex; /* This will align the title and hr in a row */
    align-items: center; /* This will vertically align the hr with the title */
    width: 100%; /* Full width to the parent container */
}

.line-right {
    flex-grow: 1; /* This will make the hr take up the remaining space */
    border: 0; /* Removes the default border */
    height: 1px; /* Set the height of your line */
    background-color: #1B3E6F; /* Same color as your title for consistency */
    margin-left: 10px; /* Space between the title and line */
    margin-bottom: 11px; /* Aligns the line with the bottom of the title */
}

.success-container {
    text-align: center;
    margin-top: 50px;
}

.success-gif {
    width: 100px; /* Adjust based on the size of your GIF */
    height: auto;
    border-radius: 15%; /* Creates the circular effect */
    margin-bottom: 20px;
}

.select2-container--default .select2-selection--single,
input[type='text'],
input[type='tel'] {
    height: 38px; /* Or whatever height fits your design */
    padding: 6px 12px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font-size as needed */
    line-height: 1.42857143; /* Adjust line height to center the text vertically */
    border-radius: 4px; /* Optional: to match border radius */
    border: 1px solid #ccc; /* Optional: to match border style */
}

/* Adjust the line height of the flag icon if necessary */
.flag-icon {
    line-height: 38px; /* Match the line height to the height of the select/input fields */
    margin-top: -2px;
    border: 1px solid;
    height: 15px;
    top: 13px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: -7px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px;
}
.select2-container--open .select2-dropdown--above {
    width: 14rem !important;
}
.select2-container--open .select2-dropdown--below {
    width: 14rem !important;
}
.required::after {
    content: "*";
    color: red;
}