@import url('https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/font/css/open-iconic-bootstrap.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-avatar@latest/dist/avatar.min.css");
/*/////////////////////////////Balu.K////////////////////////////////////*/
.bShadow {
    -webkit-box-shadow: 0px 2px 6px 1px rgba(148,186,51,1);
    -moz-box-shadow: 0px 2px 6px 1px rgba(148,186,51,1);
    box-shadow: 0px 2px 6px 1px rgb(183 216 255) /*0px 2px 6px 1px rgba(148,186,51,1)*/;
}

/*i {*/
/* use !important to prevent issues with browser extensions that change fonts */
/*font-family: 'toast' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;*/
/* Better Font Rendering =========== */
/*-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

h1, h2, h3, h4, h5, h6 {
    color: black !important;
}

/* Fixed: .btn btn-primary should be .btn.btn-primary */
.btn.btn-primary {
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 11px;
}

.textbox {
    border-radius: 13px;
}

.ImgSize {
    width: 23px;
    height: 23px;
}

.Subsidebar {
    border-right: white solid 2px;
}

.txtLeft {
    text-align: left;
}

.scrollbar {
    float: left;
    height: 300px;
    width: 65px;
    background: #fff;
    overflow-y: scroll;
}

.force-overflow {
    min-height: 450px;
}

.scrollbar-primary::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #1784f2de;
}

.scrollbar-primary {
    scrollbar-color: #4285F4 #F5F5F5;
}

.space {
    margin-top: 10px;
}

body {
    overflow: hidden !important;
    font-family: 'Sans Serif Collection', sans-serif !important;
    font-size: 12px !important;
    color: black !important;
}

.ht {
    height: 90vh !important;
}

.iconfont {
    font-size: 5px !important;
}

.nowrap {
    white-space: nowrap !important;
}

.btnsize {
}

.hBgColor {
    background: linear-gradient(to right, #172c80 0%, #ffffff 100%) !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    color: white !important;
    font-size: 14px !important;
}

input, select {
    height: 26px !important;
}

.chklbl {
    padding: 5px !important;
}

.chkbox {
    height: 18px !important;
    width: 44px !important;
}

.form-select,
.form-control {
    font-size: unset;
}

.MhBgColor1 {
    background: linear-gradient(to right, #04153d 0%, #ffffff 100%) !important;
    /*border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;*/
    color: white !important;
    font-size: 20px !important;
    padding: 3px 3px 3px 16px !important;
}

.sag {
    border-top: 5px solid #000 !important;
    z-index: 1;
    position: absolute !important;
    /* left: 50% !important; */
    /* top: 50% !important; */
    /* transform: translate(-50%, -50%) !important; */
    width: 100% !important;
    height: 38px !important;
    border-bottom: 5px solid #000 !important;
    /* Line-height: 50px !important; */
    /* background: #C70039 !important; */
    overflow: hidden !important;
}

    .sag span {
        color: #fff !important;
        font-size: 20px !important;
        background: #000 !important;
        /* display: inline-block !important; */
        padding: 2px 20px !important;
        /* text-transform: uppercase !important;*/
    }

        .sag span:before {
            position: absolute !important;
            content: "" !important;
            width: 20% !important;
            height: 100% !important;
            background: #000 !important;
            z-index: -1 !important;
            transform: rotate(45deg) !important;
        }

.bttn1 {
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 0px !important;
    height: 29px !important;
    width: 91px !important;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 20px !important;
    /*font-weight: bold;*/
    color: #fff !important;
    height: 49px !important;
    --r: .8em !important; /* control the cutout */

    border-block: .5em solid #0000 !important;
    padding-inline: .5em calc(var(--r) + .25em) !important;
    /*line-height: 1.8;*/
    clip-path: polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--r)) calc(100% - .25em),100% 50%,calc(100% - var(--r)) .25em);
    background: radial-gradient(.2em 50% at left, #000a, #0000) border-box, #172c80 padding-box !important; /* the color  */
    width: fit-content !important;
}

.MhBgcolor2 {
    background-color: aliceblue !important;
}

.paddBT {
    padding-top: 4px !important;
}

/*Data View Table Design(Srch)*/
.viewSrchTableHeight {
    height: 290px !important;
}

.SrchTableHeight {
    height: 340px !important;
}

.TableSrch {
    margin: 0px !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.TableSrchThead {
    /*color: white !important;
    background-color: #172c80 !important;*/
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

    .TableSrchThead > tr {
        border-width: inherit !important;
    }

        .TableSrchThead > tr > th {
            /*padding: 10px !important;*/
            text-align: center !important;
            /*border: 1px solid #ddd !important;*/
            color: white !important;
            background-color: #172c80 !important;
        }
            .TableSrchThead > tr > th > .bi, .bi-arrow-right-circle {
                padding: 0px 0px 4px 0px !important;
                font-size: large !important;
            }

            .TableSrchThead > tr > th > .bi, .bi-pencil-square {
                padding: 0px 0px 4px 0px !important;
                font-size: large !important;
            }

            .TableSrchThead > tr > th > .bi, .bi-trash {
                padding: 0px 0px 4px 0px !important;
                font-size: large !important;
            }

            .TableSrchThead > tr > th > .bi, .bi-plus-square {
                padding: 0px 0px 4px 0px !important;
                font-size: large !important;
            }
            .TableSrchThead > tr > th > .bi, .bi-person-plus {
                padding: 0px 0px 4px 0px !important;
                font-size: large !important;
            }

.TableSrch > tbody > tr > td {
    /*padding: 10px !important;
    text-align: left !important;*/
    /*border: 1px solid #ddd !important;*/
}

.TableSrch > tbody {
    /*display: block !important;*/
    /*height: 300px !important;*/ /* Set the desired height for the scrollable body */
    /*overflow-y: auto !important;
    width: 100% !important;*/
}

.TableSrch > td, .TableSrchThead > th {
    text-align: center !important;
    width: 200px !important; /* Adjust column width */
}

/*alignment*/

.CAlign {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* text-align: center !important;*/
}

/*Start Blazor or html Controls Validations */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    /*padding-top: 1.1rem;*/
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9SQLite3bXkg5xU0LjY2MzMyIDI5Ni4yNDMzIDEzYiA5Mi44NDc2IDI3My4zMTMwMTNzLjMtYmFzZTY0IDE1LaF6OidsLWFsYXRoZXJTAKV+jZjI1MDAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdoZW4 = '') no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
/*End Blazor or html Controls Validations */


.acordbtn {
    padding-top: 3px !important;
    padding-right: 1rem !important;
    padding-bottom: 3px !important;
    padding-left: 1rem !important;
    font-size: 13px !important;
}

.acordbody {
    padding-top: 0.5rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1px !important;
    padding-left: 1rem !important;
}

.acordcolbody {
    padding-top: 3px !important;
    padding-right: 1rem !important;
    padding-bottom: 3px !important;
    padding-left: 1rem !important;
}

.scrrolepad {
    padding-top: 13px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 8px !important;
}

/*Login Start*/
.LoginContainer {
    position: relative;
    width: 100%;
    background-color: #fff;
    min-height: 100vh;
    overflow: hidden;
}

.FormsContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.signin-signup {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 75%;
    width: 50%;
    transition: 1s 0.7s ease-in-out;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 5;
}

.SigninForm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*padding: 0rem 5rem;*/
    transition: all 0.2s 0.7s;
    overflow: hidden;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

form.sign-up-form {
    opacity: 0;
    z-index: 1;
}

form.sign-in-form {
    z-index: 2;
}

.title {
    font-size: 2.2rem;
    color: #444;
    margin-bottom: 10px;
}

.input-field {
    max-width: 380px;
    width: 100%;
    background-color: #f0f0f0;
    margin: 10px 0;
    height: 55px;
    border-radius: 55px;
    display: grid;
    grid-template-columns: 15% 85%;
    padding: 0 0.4rem;
    position: relative;
}

    .input-field i {
        text-align: center;
        line-height: 55px;
        color: #acacac;
        transition: 0.5s;
        font-size: 1.1rem;
    }

    .input-field input {
        background: none;
        outline: none;
        border: none;
        line-height: 1;
        font-weight: 600;
        font-size: 1.1rem;
        color: #333;
        height: unset !important;
    }

        .input-field input::placeholder {
            color: #aaa;
            font-weight: 500;
        }

.social-text {
    padding: 0.7rem 0;
    font-size: 1rem;
}

.social-media {
    display: flex;
    justify-content: center;
}

.social-icon {
    height: 46px;
    width: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.45rem;
    color: #333;
    border-radius: 50%;
    border: 1px solid #333;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

    .social-icon:hover {
        color: #4481eb;
        border-color: #4481eb;
    }

.LoginBtn {
    width: 150px;
    /*background-color: #172c80;*/
    background-image: linear-gradient(to right, #384cad 0%, #172c80 100%);
    border: none;
    outline: none;
    height: 49px !important;
    border-radius: 49px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0;
    cursor: pointer;
    transition: 1.5s;
}

    .LoginBtn:hover {
        background-image: linear-gradient(to left, #172c80 100%, #384cad 0%);
        border: 1px solid;
        color: white;
    }

.LoginBtn2 {
    width: 150px;
    background-color: #1f1352;
    border: none;
    outline: none;
    height: 49px !important;
    border-radius: 49px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0;
    cursor: pointer;
    transition: 0.5s;
}

    .LoginBtn2:hover {
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari 3-8 */
        transform: scale(1.1);
    }

.panels-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.LoginContainer:before {
    content: "";
    position: absolute;
    height: 3000px;
    width: 2000px;
    top: -10%;
    right: 50%;
    transform: translateY(-50%);
    background-image: linear-gradient(to right, #a5c9e1 67%, #ffffff 100%);
    /*transition: 1.8s ease-in-out;
    border-radius: 50%;*/
    z-index: 6;
}

.LoginImg {
    padding-bottom: 15px;
    max-width: 42%;
    width: 42%;
    height: auto;
}

.image {
    width: 100%;
    transition: transform 1.1s ease-in-out;
    transition-delay: 0.4s;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    text-align: center;
    z-index: 6;
}

.left-panel {
    pointer-events: all;
    padding: 20px 20px 20px 20px;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    overflow: hidden scroll;
}

.right-panel {
    pointer-events: none;
    padding: 3rem 12% 2rem 17%;
}

.panel .content {
    color: #fff !important;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
}

.panel h3 {
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
    font-size: 1.5rem;
}

.panel p {
    font-size: 0.95rem;
    /*padding: 0.7rem 0;*/
}

.LoginBtn2.transparent {
    margin: 0;
    background: none;
    border: 2px solid #fff;
    width: 130px;
    height: 41px;
    font-weight: 600;
    font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
    transform: translateX(800px);
}

.ForgotPw {
    font-size: 15px;
    padding: 20px;
    cursor: pointer;
}

.Register {
    font-size: 15px;
    padding: 20px;
}

/* ANIMATION */
.LoginContainer.sign-up-mode:before {
    transform: translate(100%, -50%);
    right: 52%;
}

.LoginContainer.sign-up-mode .left-panel .image,
.LoginContainer.sign-up-mode .left-panel .content {
    transform: translateX(-800px);
}

.LoginContainer.sign-up-mode .signin-signup {
    left: 25%;
}

.LoginContainer.sign-up-mode form.sign-up-form {
    opacity: 1;
    z-index: 2;
}

.LoginContainer.sign-up-mode form.sign-in-form {
    opacity: 0;
    z-index: 1;
}

.LoginContainer.sign-up-mode .right-panel .image,
.LoginContainer.sign-up-mode .right-panel .content {
    transform: translateX(0%);
}

.LoginContainer.sign-up-mode .left-panel {
    pointer-events: none;
}

.LoginContainer.sign-up-mode .right-panel {
    pointer-events: all;
}

@media (max-width: 870px) {
    .LoginContainer {
        min-height: 800px;
        height: 100vh;
    }

    .signin-signup {
        width: 100%;
        top: 75%;
        transform: translate(-50%, -100%);
        transition: 1s 0.8s ease-in-out;
    }

    .signin-signup,
    .LoginContainer.sign-up-mode .signin-signup {
        left: 50%;
    }

    .panels-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 1fr;
    }

    .panel {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 2.5rem 8%;
        grid-column: 1 / 2;
    }

    .right-panel {
        grid-row: 3 / 4;
    }

    .left-panel {
        /* grid-row: 1 / 2;*/
        display: none;
    }

    .image {
        width: 200px;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.6s;
    }

    .panel .content {
        padding-right: 15%;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.8s;
    }

    .panel h3 {
        font-size: 1.2rem;
    }

    .panel p {
        font-size: 0.7rem;
        padding: 0.5rem 0;
    }

    .LoginBtn2.transparent {
        width: 110px;
        height: 35px;
        font-size: 0.7rem;
    }

    .LoginContainer:before {
        width: 1500px;
        height: 0px;
        transform: translateX(-50%);
        left: 30%;
        bottom: 68%;
        right: initial;
        top: initial;
        /*transition: 2s ease-in-out;*/
    }

    .LoginContainer.sign-up-mode:before {
        transform: translate(-50%, 100%);
        bottom: 32%;
        right: initial;
    }

    .LoginContainer.sign-up-mode .left-panel .image,
    .LoginContainer.sign-up-mode .left-panel .content {
        transform: translateY(-300px);
    }

    .LoginContainer.sign-up-mode .right-panel .image,
    .LoginContainer.sign-up-mode .right-panel .content {
        transform: translateY(0px);
    }

    .right-panel .image,
    .right-panel .content {
        transform: translateY(300px);
    }

    .LoginContainer.sign-up-mode .signin-signup {
        top: 5%;
        transform: translate(-50%, 0);
    }

    .NavLogo {
        /* margin-top: 10px;*/
    }
}

@media (max-width: 570px) {
    form {
        /* padding: 0 1.5rem;*/
    }

    .image {
        display: none;
    }

    .panel .content {
        padding: 0.5rem 1rem;
    }

    .LoginContainer {
        padding: 1.5rem;
    }

        .LoginContainer:before {
            bottom: 72%;
            left: 50%;
        }

        .LoginContainer.sign-up-mode:before {
            bottom: 28%;
            left: 50%;
        }

    .NavLogo {
        /* margin-top: 10px;*/
    }
}

/*End Login*/


/*************************************************MainLayout-Start*************************************************/

.NavLogo {
    /*padding-bottom: 15px;*/
    max-width: 80%;
    width: 100%;
    height: auto;
}

.NavBtpIcon {
    font-size: 17px !important;
}


#hideshowsidebar {
    width: 250px;
    position: fixed;
    height: 100vh;
    background: #f8f9fa;
    transition: transform 0.3s ease-in-out;
    z-index: 100;
}

    #hideshowsidebar.hidden {
        transform: translateX(-100%);
    }

.contentMain {
    margin-left: 250px;
    transition: margin-left 0.3s ease-in-out;
}

    .contentMain.full {
        margin-left: 0;
    }
/* Close button for mobile */
/*.close-btn {
            display: none;
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            background: none;
            border: none;
        }*/

@media (max-width: 768px) {
    #hideshowsidebar {
        transform: translateX(-100%);
    }

        #hideshowsidebar.show {
            transform: translateX(0);
        }

    .contentMain {
        margin-left: 0;
    }

    /*.close-btn {
                display: block;
            }*/
}


.module-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    font-weight: bold;
    background: #e9ecef;
    border-radius: 5px;
    outline: none;
}

    .module-toggle:focus {
        /*box-shadow: 0 0 0 2px #0d6efd55;*/
    }

.icon-rotate {
    transition: transform 0.3s ease;
}

    .icon-rotate.rotate {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }


/* Smooth expand/collapse for module screens */
.module-screens {
    overflow: hidden;
    transition: height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    height: 0;
    opacity: 0;
}

    .module-screens.show {
        opacity: 1;
    }

.module-screens-inner {
    padding-left: 1rem;
    padding-top: 0.5rem;
}

.nav-link {
    padding: 4px 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Smooth animation */
.module-screens {
    transition: height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    height: 0;
    opacity: 0;
}

    .module-screens.show {
        opacity: 1;
    }
.module-screens .nav-link {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.module-screens.show .nav-link {
    opacity: 1;
    transform: translateX(0);
}

    /* Optional: stagger effect */
    .module-screens.show .nav-link:nth-child(1) {
        transition-delay: 0.05s;
    }

    .module-screens.show .nav-link:nth-child(2) {
        transition-delay: 0.1s;
    }

    .module-screens.show .nav-link:nth-child(3) {
        transition-delay: 0.15s;
    }

    .module-screens.show .nav-link:nth-child(4) {
        transition-delay: 0.2s;
    }

/* Highlight Active Child */
.nav-link.active {
    background: #e7f0ff !important;
    font-weight: 600;
    border-left: 4px solid #0d6efd;
    padding-left: 18px !important;
    border-radius: 4px;
}

/* Highlight Active Parent */
.module-toggle.active-parent {
    background: #e9f2ff !important;
    font-weight: 600;
    border-left: 4px solid #0d6efd;
    border-radius: 4px;
}


/*-------------------------------SearchBar Start--------------------------*/

.search-wrapper {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-box {
    position: relative;
    background: white;
    border-radius: 7px;
    transition: background 0.3s ease-in-out;
}

.search-box:focus-within {
    background: #fff; /* You can darken slightly if needed */
    /* Removed transform and box-shadow to prevent layout jump */
}

/* Input field */
.search-input {
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 15px 25px;
    padding-right: 50px;
    width: 100%;
    transition: border-color 0.3s ease-in-out;
    box-sizing: border-box;
}

    .search-input:focus {
        outline: none !important;
        /*border-color: #007bff;*/ /* optional */
        box-shadow: none;
    }

/* Search icon */
.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    transition: color 0.3s ease-in-out;
}

.search-box:focus-within .search-icon {
    color: #007bff;
}

/* Suggestions box (floating, doesn't affect height) */
.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index: 1000;
    pointer-events: none;
}

.search-box:focus-within .suggestions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .suggestion-item:hover {
        background-color: #f8f9fa;
    }

    .suggestion-item i {
        margin-right: 10px;
        color: #666;
    }

/* Recent searches section */
.recent-searches {
    color: #666;
    font-size: 0.8rem;
    padding: 10px 20px;
    background: #f8f9fa;
    border-radius: 10px 10px 0 0;
}

/*-------------------------------SearchBar End----------------------------*/

/*************************************************MainLayout-End************************************************/

/************************************************Avatar-Start***************************************************/


.AvatarActive {
    background-color: lawngreen;
    padding: 6px;
    transform: translate(-121%, 212%) !important;
}

.avatar {
    height: 38px !important;
    width: 40px !important;
}

    .avatar > img {
        height: 38px;
        width: 40px;
    }


/* Style for the hover container */
.hover-avatar {
    transition: transform 0.3s ease-in-out;
}

    /* Hover effect for the container */
    .hover-avatar:hover {
        transform: scale(1.05);
    }

/* Style for the content list wrapper */
.avatar-list-wrapper {
    margin-left: -111px;
    z-index: 6;
    position: absolute;
    overflow: hidden;
    height: 0; /* Initially hidden */
    width: 200px;
    transition: height 0.5s ease-in-out; /* Smooth height transition */
}

/* Style for the content list */
.avatar-list {
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Content list visible with a smooth animation */
.avatar-list-wrapper.show {
    margin-top: 3px;
    margin-left: -111px;
    z-index: 7;
    position: absolute;
    height: 220px;
    width: 200px; /* Set the height to show the list */
}

    .avatar-list-wrapper.show .avatar-list {
        opacity: 1;
        transform: translateY(0);
    }

/* Style for each list item */
.avatar-list ul {
    list-style-type: none;
    padding: 0;
}

.avatar-list li {
    padding: 8px 10px;
    margin: 5px 0;
    background-color: #e1e1e1;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    /* Hover effect for list items */
    .avatar-list li:hover {
        background-color: #ddd;
    }

    /* Selected item styling */
    .avatar-list li.selected {
        background-color: #4CAF50;
        color: white;
    }

/* Avatar Popup Message style */
.avatar-popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 7;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Black with transparency */
    padding-top: 60px;
    text-align: center;
}

.avatar-popup-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 10px;
}

.avatar-popup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .avatar-popup-close:hover,
    .avatar-popup-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.avatar-popup-message {
    padding: 25px;
    margin: 0px;
}


@media (max-width: 576px) {

    .avatar-list-wrapper.show {
        margin-top: 3px !important;
        margin-left: -155px !important;
        z-index: 7 !important;
        position: absolute !important;
        height: 220px !important;
        width: 200px !important;
    }
}

/*************************************************Avatar End*************************************************/
.my-custom-btn {
    background-color: #007bff; /* Or any custom color */
    color: white;
    border: 1px solid #007bff;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
}

    .my-custom-btn:hover {
        background-color: #0056b3;
        color: #fff;
    }

/*************************************************Tab Start*************************************************/
.tabbar12 {
    opacity: 1 !important;
    padding: 10px !important;
    margin-left: 10px !important;
}

.nav-tabs .nav-link.active {
    background-color: aliceblue !important;
}
/*************************************************Tab End*************************************************/
.greyed-out {
    filter: grayscale(100%);
    opacity: 0.5;
}

/********************************************Profile Hover Start***********************************************/
.icon-hover {
    transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    display: inline-block;
}

    .icon-hover:hover {
        transform: scale(1.15);
        color: #0d6efd;
    }
/***********************************************Profile Hover End***********************************************/

/*************************************************Spinner Start*************************************************/
.spinner-container {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.spinner-circle {
    width: 100%;
    height: 100%;
    border: 8px solid #e9ecef;
    border-top: 6px solid #0d6efd;
    border-right: 6px solid #007bff;
    border-radius: 50%;
    animation: spinFast 1.5s linear infinite;
}

.spinner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #0d6efd;
    font-weight: 500;
    text-align: center;
}

@keyframes spinFast {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*************************************************Spinner End*************************************************/

/*********************************************Header Scroll Start*********************************************/
.scroll-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
}

    .scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .scroll-container::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 3px;
    }

    .scroll-container::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
/*********************************************Header Scroll End*********************************************/

button:focus,
select:focus,
input:focus,
textarea:focus,
.form-select:focus,
.dropdown-item:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}