svg.position-relative{
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}
#appointment_modal .model-header-with-progress .progress-bar-container svg circle:last-of-type{
    stroke-dasharray: 125px;
    stroke-dashoffset: calc(125px - (125px * var(--percent)) / 100);
    stroke: #5C2483;
    width: 50%;
    height: 50%;
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}
#appointment_modal .model-header-with-progress .progress-bar-container svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 4;
    stroke-linecap: round;
}

#appointment_modal .model-header-with-progress .progress-bar-container .number {
    position: absolute;
    top: 30%;
    left: 22%;
    font-size: 13px;
}

.modal-title{
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    font-family: 'DM Sans', sans-serif;
}

#appointment_modal fieldset {
    display: flex;
    justify-content: space-evenly;
    align-content: stretch;
    flex-wrap: wrap;
}

fieldset label {
    margin: 10px 0px 20px 0px;
    font-size: 16px;
}

.img-size{
    object-fit: contain;
    background: beige;
    width: 100%;
    height: 150px;
}

.modal-footer button{
    line-height: 14px !important;
}

.bg-trans {
    background-color: transparent;
}

.all-start-top {
    align-items: flex-start !important;
}

.btn-set-new {
    font-size: 25px !important;
    font-family: "Museo Sans 300 ";
    font-weight: 600 !important;
    height: 60px;
}

a.loginBtnTab, a.signupBtnTab{
    height: 176.3px;
    width: 176.3px;
    background: #e4e5e7;
    border-radius: 99999px;
}

.loginBtnTab .hover-image {
    transition: filter 0.1s ease-in-out; /* Add a smooth transition */
}

.loginBtnTab:hover .hover-image{
    filter: brightness(0) saturate(100%) invert(19%) sepia(19%) saturate(6813%) hue-rotate(258deg) brightness(91%) contrast(98%);
}

.new-btn.button-box:hover .button-border{
    background-color: #612B85;
    color: white;
}

.new-btn.button-box:hover .hover-image{
    filter: brightness(0) saturate(100%) invert(19%) sepia(19%) saturate(6813%) hue-rotate(258deg) brightness(91%) contrast(98%);
}

/* .loginBtnTab .hover-image{
    filter: brightness(0) saturate(100%)
} */

.loginBtnTab:hover{
    background-color: #e4e5e7;
}

.signupBtnTab:hover .hover-image{
    filter: brightness(0) saturate(100%) invert(19%) sepia(19%) saturate(6813%) hue-rotate(258deg) brightness(91%) contrast(98%);
}

/* .signupBtnTab .hover-image{
    filter: brightness(0) saturate(100%)
} */

.signupBtnTab:hover{
    background-color: #e4e5e7;
}

.loginBtnTab.clicked .hover-image{
    filter: brightness(0) saturate(100%) invert(19%) sepia(19%) saturate(6813%) hue-rotate(258deg) brightness(91%) contrast(98%);
}

.signupBtnTab.clicked .hover-image{
    filter: brightness(0) saturate(100%) invert(19%) sepia(19%) saturate(6813%) hue-rotate(258deg) brightness(91%) contrast(98%);
}

.button-border{
    border: 1px solid #612B85;
}
/* .button-border:hover{
    background-color: #612B85;
    color: white;
} */

.common-btnfont {
    font-size: 22px !important;
}

@media (max-width:991px) {
    .common-btnfont {
        font-size: 18px !important;
    }
}

@media only screen and (min-width: 768px) {
    .auth-input-font {
        font-size: 25px !important;
        height: 55px;
    }
}

@media (max-width: 767px) {
    .new-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

@media only screen and (max-width: 768px) {
    .btn-set-new {
        font-size: 18px !important;
    }
}


@media only screen and (max-width: 900px) {
    .float-end{
        float: unset !important;
    }

    .main-container .container .row .col-md-8{
        width: 100%;
    }
}