/* global css */
/* start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Open Sans", sans-serif !important;
}
.heading-color-primary {
    color: #984275 !important;
    font-weight: 500 !important;
}
.heading-color-secondary {
    color: #325998 !important;
    font-weight: 400 !important;
}
.heading-color-tertiary {
    color: #984275 !important;
    font-weight: 300 !important;
}
img {
    width: 100%;
    height: auto;
}
a {
    text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid rgb(212, 212, 212) !important;
    border-radius: 0;
    padding: 0;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid #af3869 !important;
    border-radius: 0;
    box-shadow: none !important; /* Removes the default shadow */
    padding: 0;
}
input[type="text"].is-invalid,
input[type="email"].is-invalid,
input[type="number"].is-invalid,
input[type="password"].is-invalid {
    border-bottom: 1.5px solid red !important;
    padding: 0;
}
label {
    font-weight: 600;
    color: #325998 !important;
    margin-bottom: 0;
}
textarea {
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid rgb(212, 212, 212) !important;
    border-radius: 0 !important;
}
textarea:focus {
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid #af3869 !important;
    border-radius: 0;
    box-shadow: none !important; /* Removes the default shadow */
}
.home-header-heading {
    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.form-check-label {
    color: black !important;
    font-weight: 500;
}
.other-label {
    color: black !important;
    font-weight: 500;
}
.question-heading-color {
    color: #325998 !important;
    font-weight: 600 !important;
}

/* Specific styles for the floating-input-box and floating-label-box within the form-floating class */
.form-floating .floating-input-box {
    padding: unset; /* Only unset padding for this specific input */
}

.form-floating .floating-input-box:focus {
    padding: unset; /* Ensure padding remains unset when focused */
}

.form-floating .floating-label-box {
    margin-bottom: unset; /* Ensure margin-bottom is unset for this specific label */
}
/* end */

/* header start */
.navbar-container {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(
        to right,
        #325998 0,
        #45376c 50%,
        #584587 60%,
        #af3869 100%
    );
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.left-header {
    display: flex;
    gap: 2rem;
}
.left-header > p {
    margin-bottom: 0 !important;
}
.left-header > p:nth-child(1) {
    color: #ffff;
    font-weight: 500;
    cursor: pointer;
}
.left-header > p:nth-child(1) > a {
    color: #fff;
}
.left-header > p:nth-child(2) {
    color: #ffff;
    font-weight: 500;
    cursor: pointer;
}
.left-header > p:nth-child(2) > a {
    color: #ffff;
    font-weight: 500;
    cursor: pointer;
}
.left-header > p:nth-child(2):hover {
    text-decoration: underline;
}

.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ra-log-size {
    width: 12rem;
    height: 3rem;
}
/* header end */

/* form box with image and text */
/* start */
.form-box-with-img {
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 4rem 0 0 0;
    padding: 2rem;
    border-radius: 0.5rem;
    gap: 3rem;
}
.left-form-box {
    flex: 1;
}
.right-form-box {
    flex: 1;
}
.form-box-img {
    width: 100%;
    height: 14rem !important;
}
/* end */

/* login form */
/* start */
.outer-container {
    padding: 2rem;
    margin: 5rem auto 3rem auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 35rem;
}
.form-box-with-img-inlogin-page {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form-outer-container {
    display: flex;
    border-radius: 0.5rem;
    gap: 3rem;
    margin-top: 2rem;
}
/* end */

/* user data css */
/* start */
.user-data-container {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 2rem;
    margin: 3rem auto 2rem auto;
}
.nodata-found {
    display: grid;
    place-items: center;
    margin-top: 3rem;
}
.nodata-found > p {
    font-weight: 600;
}
.user-default-data-container {
    margin-top: 2rem;
}
.refer-feedback-container {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 2rem;
    margin: 1rem auto 2rem auto;
}

/* end */

/* refer form container */
.user-refer-form-container {
    margin: 2rem;
}
.customer-info-container {
    margin: 2rem;
}

.referal-info-message {
    position: relative;
}
.delete-icon {
    position: absolute;
    top: 27px;
    right: 0;
    cursor: pointer;
}

.feedback-info-container {
    width: 27rem;
    margin: 3rem auto;
}
.rating-box {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.rating-box .number {
    border: 1px solid gray;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 500;
}
.textarea-box {
    border: 1px solid gray !important;
    width: 100%;
    min-height: 7rem;
    padding: 0.5rem;
    border-radius: 0.2rem !important;
    font-size: 14px;
}
.textarea-box:focus {
    border: 1px solid gray !important;
}
.satisfied-box {
    position: relative;
}
.satisfied-text {
    position: absolute;
    white-space: nowrap;
    margin: 0.3rem 0;
    font-size: 11px;
}
.last-satisfied-text {
    right: 0;
}
.arrow-icon-on-feebackform {
    display: flex;
    justify-content: space-between;
}
#prevBtn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #325998;
}
#nextBtn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #af3869;
}
.first-number {
    background-color: #ff4545;
    border: none !important;
    outline: none;
    color: white;
}
.rating-box .number:nth-child(2) {
    background-color: #ffa534;
    border: none !important;
    outline: none;
    color: white;
}
.rating-box .number:nth-child(3) {
    background-color: #ffe234;
    border: none !important;
    outline: none;
    color: white;
}
.rating-box .number:nth-child(4) {
    background-color: #b7dd29;
    border: none !important;
    outline: none;
    color: white;
}
.last-number {
    background-color: #57e32c;
    border: none !important;
    outline: none;
    color: white;
}

.number.selected {
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1.2);
}
.text-content-box {
    display: flex;
    justify-content: space-around;
}
.text-content-box > div {
    font-size: 11px;
}

/* home screen */
.how-it-work-outer-container {
    padding: 3rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 5rem;
}
.how-it-work-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1rem;
    margin-top: 2rem;
}
.how-we-work-img {
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: block;
    margin: 2rem auto;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.first-box {
    text-align: center;
    border-radius: 16px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 1rem;
    position: relative;
    z-index: -1;
}
.second-box {
    text-align: center;
    border-radius: 16px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 1rem;
    position: relative;
    z-index: -1;
}
.third-box {
    text-align: center;
    border-radius: 16px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 1rem;
    position: relative;
    z-index: -1;
}
.fourth-box {
    text-align: center;
    border-radius: 16px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 1rem;
    z-index: -1;
}
.first-arrow-icon {
    background-color: #325998;
    position: absolute;
    color: white;
    border-radius: 50%;
    padding: 0.5rem;
    width: 3rem;
    height: 3rem;
    top: 46%;
    right: -22px;
    z-index: 9;
    display: grid !important;
    place-content: center;
    font-size: 1.3rem;
}
.second-arrow-icon {
    background-color: #45376c;
    position: absolute;
    color: white;
    border-radius: 50%;
    padding: 0.5rem;
    width: 3rem;
    height: 3rem;
    top: 46%;
    right: -22px;
    z-index: 9;
    display: grid !important;
    place-content: center;
    font-size: 1.3rem;
}
.third-arrow-icon {
    background-color: #af3869;
    position: absolute;
    color: white;
    border-radius: 50%;
    padding: 0.5rem;
    width: 3rem;
    height: 3rem;
    top: 46%;
    right: -22px;
    z-index: 9;
    display: grid !important;
    place-content: center;
    font-size: 1.3rem;
}
.iframe-container {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 0.2rem;
    border: 1px solid gray;
    padding: 0.2rem;
    width: 100%;
    height: 25rem;
}

/* bonus insights form */
.bonus-insights-container {
    padding: 2rem;
}

.relative-box {
    /* position: relative; */
}
.absolute-box {
    /* position: absolute;
    right: 0;
    top: 0; */
    text-align: center;
}

.box-position-relative {
    position: relative;
}
.form-submit-data {
    color: green;
    position: absolute;
    top: 26px;
    left: -20px;
}
#client_email {
    word-wrap: break-word;
}

.text-first-capital {
    text-transform: capitalize;
}

.bonus-insight-question-flex {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-number {
    width: 14rem;
}

/* dynamic css when we click on add more button in share your circle section */
/* start */

/* end */
.share-your-container {
    border: 1px solid #ddd8d8;
    border-radius: 0.5rem;
}
.share-your-section-header {
    background-color: #e4e2e2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 14px;
    font-weight: 600;
}

/* Media query */

/* Styles for mobile devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .form-box-with-img {
        flex-direction: column;
    }
    .left-header {
        /* gap: 1rem; */
        display: block;
    }
    .ra-log-size {
        width: 5rem;
        height: 2rem;
    }
    .form-box-with-img-inlogin-page {
        width: 100%;
        flex-direction: column;
    }
    .how-it-work-container {
        grid-template-columns: 1fr;
    }
    .form-box-with-img {
        flex-direction: column;
    }
    .how-it-work-outer-container {
        padding: 0;
    }
    .iframe-container {
        height: 17rem;
    }
    .outer-container {
        width: 100%;
        padding: 1rem;
    }
    .login-form-outer-container {
        flex-direction: column;
    }
    .absolute-box {
        position: unset;
        text-align: center;
    }
    .refer-feedback-container {
        padding: 2rem 0;
    }
    #myTab {
        display: flex;
        justify-content: center;
    }
    .feedback-info-container {
        padding: 1rem;
        margin: 0;
        width: auto;
    }
    .rating-box .number {
        padding: 0.4rem 0.5rem;
    }
    .user-data-container {
        padding: 1rem;
    }
}

/* Styles for small tablets (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .form-box-with-img {
        flex-direction: column;
    }
    .left-header {
        gap: 1rem;
    }
    .ra-log-size {
        width: 5rem;
        height: 2rem;
    }
    .form-box-with-img-inlogin-page {
        width: 100%;
        flex-direction: column;
    }
    .form-box-with-img {
        flex-direction: column;
    }
    .how-it-work-container {
        grid-template-columns: 1fr;
    }
    .outer-container {
        width: 100%;
        padding: 1rem;
    }
    .absolute-box {
        position: unset;
        text-align: center;
    }
    .refer-feedback-container {
        padding: 2rem 0;
    }
    #myTab {
        display: flex;
        justify-content: center;
    }
    .feedback-info-container {
        padding: 1rem;
        margin: 0;
        width: auto;
    }
    .rating-box .number {
        padding: 0.4rem 0.5rem;
    }
    .user-data-container {
        padding: 1rem;
    }
}

/* Styles for tablets (768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .form-box-with-img-inlogin-page {
        width: 90%;
    }
    .form-box-with-img {
        flex-direction: column;
    }
    .how-it-work-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.w-full{
    width: 100%;

}


.form-dropdown button{
    width: 100%;
}

.form-dropdown .dropdown-menu {
    width: 100%;
    padding: 10px;
    height: 100px;
    overflow-y: scroll;
}
.form-dropdown .dropdown-menu .dropdown-item{
    padding: 5px 10px;
}

.btn-transparent{
    background: transparent;
    color: black;
    text-align: left !important;
}
.form-dropdown .dropdown-toggle::after {
    position: absolute;
    right: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    right: 1%;
    top: 46%;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.btn-gradient{
    background: linear-gradient(90deg, #325998 0%, #AF3869 100%);
    color: white !important;
}


.top-heading-box {
    color: #170f49;
    font-weight: 700;
}

.custom-dropdown {
    border: none !important;
    outline: none !important;
}

#dropdownMenuButton1 {
    cursor: pointer;
    cursor: pointer;
    width: 3rem;
    font-size: 3rem;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 0px solid #000;
    padding-top: auto !important;
    border-bottom: 1px solid #000;
    padding-bottom: .625rem;
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 0px !important;
    outline: 0 !important;
    border-bottom: 1px solid black !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 0px !important;
    border-bottom: 1px solid black !important;
    border-radius: 4px;
    cursor: text;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #385796 !important;
    border: 1px solid #385796 !important;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}

.progress-bar .step .bullet.current {
    background: #af3869 !important;
    color: #fff !important;
}

.colored-toast.swal2-icon-success {
background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
background-color: #87adbd !important;
}

.colored-toast .swal2-title {
color: white;
}

.colored-toast .swal2-close {
color: white;
}

.colored-toast .swal2-html-container {
color: white;
}

.card{
border-radius: 2rem !important;
padding: 20px  !important;
}

.linear-gradient-text{
background: -webkit-linear-gradient(#325998, #af3869) !important;
-webkit-background-clip: text  !important;
-webkit-text-fill-color: transparent  !important;
}