body,
html {
    height: 100%;
    font-family: Arial, sans-serif;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.row {
    height: 100%;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.logo-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 20px;
    margin-top: 7px;
}

.logo-container h3 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    padding-top: 10px;
}

.logo-container span {
    padding-left: 37px;
}

.circle-container {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}

.fa-check {
    background-color: black;
    border-radius: 50%;
    padding: 0.25rem;
}

.circle {
    width: 23px;
    height: 23px;
    background-color: #b5986d;
    color: white;
    border-radius: 50%;
    border: 2px solid #896d42;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 20px;
    position: relative;
}

.circle::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 39px;
    background-color: rgba(219, 218, 218, 0.941);
    left: 50%;
    transform: translateX(-50%);
    top: 112%;
}

.circle:last-child::after {
    display: none;
}

.information-section {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
    position: relative;
}

.logo img {
    width: 16vw;
}

.information-section p {
    font-size: 1rem;
    margin-bottom: 0;
    margin-left: 5px;
}

/* Remove the border for select2 and apply form-control styles */
.select2-container .select2-selection--single {
    border: 1px solid #ccc !important;
    /* Set the border color */
    border-radius: 0.25rem !important;
    /* Rounded corners like form-control */
    padding: 0.375rem 0.75rem !important;
    /* Padding to match form-control */
    height: calc(2.25rem + 2px) !important;
    /* Height to match form-control */
    font-size: 1rem !important;
    /* Match font size */
}

/* Adjust the select2 arrow button styling */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px) !important;
}

/* Ensure the selected item text is aligned properly */
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5rem !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: #495057 !important;
}

/* next button styling */
.gradient-button {
    width: 20%;
    background: linear-gradient(to right, #b5986d, #e4d3b1);
    color: white;
    border: none;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gradient-button:hover {
    transform: translateY(-2px);
}

.gradient-button:active {
    transform: translateY(0);
}

.gradient-button-prev {
    width: 20%;
    /* background: linear-gradient(to right, #b5986d, #e4d3b1); */
    color: #b5986d;
    border: none;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 0;
    border: 1px solid #b5986d;
    cursor: pointer;
    margin-right: 5px;
}

.p-2 {
    padding: 1rem !important;
}

.wrapper {
    width: min(900px, 100% - 3rem);
}

@media (max-width: 692px) {
    .trash-btn {
        font-size: xx-small !important;
        width: fit-content;
        right: 5rem;
        position: absolute;
    }

    .one {
        background: #f1efe9;
        width: fit-content;
    }

    td p {
        font-size: xx-small !important;
    }

    /* 
    .two {
        background: white;
    } */

    th,
    td {
        border: none !important;
    }

    th {
        display: none;
    }

    td {
        display: grid;
        grid-template-columns: 15ch auto;
        font-size: xx-small;
        padding: 0.5rem 1rem;
        min-width: 12.6rem;
    }

    /* 
    td:first-child {
        padding-top: 2rem;
    }

    td:last-child {
        padding-bottom: 2rem;
    } */

    td::before {
        /* content: attr(data-cells); */
        font-weight: 700;
    }

    td:nth-of-type(1)::before {
        content: "Document name:";
    }
}

@media (max-width: 500px) {
    .logo img {
        width: 28vw;
        margin-top: 12px;
    }

    .fa {
        font-size: 4px;
    }

    #BASICINFORMATION .mt-0 {
        margin-top: 2px !important;
    }

    .p-2 {
        padding: 0 !important;
    }

    .h3,
    h3 {
        font-size: smaller !important;
        margin-bottom: auto !important;
    }

    .logo-container span {
        font-size: x-small !important;
        padding-left: 10px !important;
    }

    .logo-container {
        padding-left: 0px !important;
    }

    .l-1 {
        margin-top: 1.5rem !important;
    }

    .fw-bold {
        font-size: 0.72rem !important;
        margin-bottom: 10px !important;
    }

    p {
        margin-left: 2px !important;
        font-size: xx-small !important;
    }

    .mt-5 {
        margin-top: 1.5rem !important;
    }

    .circle {
        width: 12px !important;
        height: 11px !important;
    }

    .information-section p {
        font-size: xx-small !important;
        margin-bottom: 0 !important;
        margin-left: 5px !important;
    }

    .p-4 {
        padding-top: 1rem !important;
    }

    .row>* {
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.4) !important;
    }

    .col-6 {
        width: 100% !important;
    }

    .mt-4 {
        margin-top: 0.2rem !important;
    }

    .ms-3 .mt-4 {
        margin-top: 2rem !important;
    }

    #BasicInformationNEXT {
        margin-top: 1.5rem !important;
        margin-right: 20vw;
        width: max-content;
    }

    /* Bank Detail */
    .justify-content-end {
        justify-content: normal !important;
        margin-top: 1rem;
    }

    .gradient-button {
        width: 36% !important;
        /* padding: 0px !important; */
        font-size: 10px;
    }

    .gradient-button-prev {
        width: 36% !important;
        font-size: 10px !important;
        padding: 0px !important;
    }

    .mt {
        margin-top: 2rem !important;
    }

    /* Personal Detail */

    .align-items-center {
        align-items: normal !important;
    }

    .f {
        display: flex !important;
        flex-direction: column !important;
    }

    .u {
        display: flex;
        flex-direction: column !important;
    }

    .me-2 {
        width: fit-content;
        /* display: contents; */
    }

    .me-3,
    .agent,
    .ag {
        margin-left: 2rem !important;
        /* display: block; */
        top: -15px;
        position: relative;
        font-size: x-small;
    }

    .ms-3 {
        margin-left: 0px !important;
    }

    #AddOwnerBtn {
        width: fit-content;
    }

    /* 
    #OwnerTitle {
        width: 5rem !important;
    } */

    /* .pt-3 {
        width: max-content !important;
    } */

    /* .form-control {
        width: 67% !important;
    } */

    /* .select2Inputs {
        width: 12rem !important;
    } */

    .selection {
        width: 67%;
        display: contents;
    }

    /* .input-group {
        width: 67% !important;
    } */

    .fa-question {
        display: none;
    }

    .circle::after {
        content: "";
        position: absolute;
        top: 129%;
    }

    /* .select2-container {
        width: 12rem !important;
    } */
}

@media (min-width: 500px) and (max-width: 768px) {
    .logo img {
        width: 26vw;
        margin-top: 12px;
    }

    #BASICINFORMATION .mt-0 {
        margin-top: 2px !important;
        font-size: medium !important;
    }

    .fa {
        font-size: xx-small !important;
    }

    .p-2 {
        padding: 0 !important;
    }

    .h3,
    h3 {
        font-size: large !important;
        margin-bottom: auto !important;
    }

    .logo-container span {
        font-size: small !important;
        padding-left: 10px !important;
    }

    .logo-container {
        padding-left: 0px !important;
    }

    .l-1 {
        margin-top: 2rem !important;
    }

    .fw-bold {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    p {
        margin-left: 2px !important;
        font-size: small !important;
    }

    .mt-5 {
        margin-top: 2.2rem !important;
    }

    .circle {
        width: 13px !important;
        height: 11px !important;
    }

    .information-section p {
        font-size: small !important;
        margin-bottom: 0 !important;
        margin-left: 5px !important;
    }

    .p-4 {
        padding-top: 1rem !important;
    }

    .row>* {
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.4) !important;
    }

    .col-6 {
        width: 50% !important;
    }

    .mt-4 {
        margin-top: 0.2rem !important;
    }

    .ms-3 .mt-4 {
        margin-top: 2rem !important;
    }

    #BasicInformationNEXT {
        margin-top: 1.5rem !important;
        /* margin-right: 20vw; 
        width: max-content;*/
    }

    .justify-content-end {
        justify-content: flex-end !important;
    }

    .gradient-button {
        width: 20% !important;
        /* padding: 0px !important; */
        font-size: 10px;
    }

    .gradient-button-prev {
        width: 20% !important;
        font-size: 10px !important;
        padding: 0px !important;
    }

    .mt {
        margin-top: 2rem !important;
    }

    .align-items-center {
        align-items: normal !important;
    }

    .f {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }


    .u {
        display: flex;
        flex-direction: column !important;
    }

    .me-2 {
        width: fit-content;
        /* display: contents; */
    }

    .me-3,
    .agent,
    .ag {
        margin-left: 2rem !important;
        /* display: block; */
        top: -15px;
        position: relative;
        font-size: x-small;
    }

    .ms-3 {
        margin-left: 0px !important;
    }

    #AddOwnerBtn {
        width: fit-content;
    }

    /* #OwnerTitle {
        width: 5rem !important;
    }

    .pt-3 {
        width: max-content !important;
    }

    .form-control {
        width: 50% !important;
    } */

    /* .select2Inputs {
        width: 88% !important;
    } */

    .selection {
        width: 67%;
        display: contents;
    }

    .circle::after {
        content: "";
        position: absolute;
        top: 129%;
    }

    /* 
    .input-group {
        width: 67% !important;
    } */

    .fa-question {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1219px) {
    #AddOwnerBtn {
        margin-top: 2.6rem !important;
    }
}