/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}


#StartScreen {
    position: relative;
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    height: 100vh;
    /* Background Image */
    background-image: url('../images/backgrounds/dash-2.jpg');
    background-size: cover; /* Ensures the image covers the entire div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents repeating */
}

#StartScreen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Background Blur */
    backdrop-filter: blur(10px); /* Adjust the blur intensity */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    background-color: rgba(0, 0, 0, 0.3); /* Optional: Adds a slight dark overlay */
}


#HomeTitle {
    font-size: 5.7rem;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    height: 400px;
    align-content: center;
    position: relative;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    color: whitesmoke;
}

#site-intro {
    background-color: #fef8ff;
    text-align: center;
    align-content: center;
    position: relative;
    height: 400px;
}


#legal-site-intro {
    background-color: white;
    text-align: left;
}

#legal-listing {
    list-style-type: disc; /* Use bullet points */
    padding-left: 50px; /* Indent the list */
}


    #legal-listing li {
        text-indent: 10px; /* Additional text indentation */
        margin-bottom: 5px; /* Space between items */
    }

#site-intro-header {
    font-size: 4.0rem;
    color: #57375c;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

#site-intro-sub-header {
    font-size: 1.2rem;
    color: #474747;
    font-weight: normal;
    font-family: 'General Sans' system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

#home-title-one {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: left;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    color: #57375c
}


#home-title-two{
    font-size: 1.8rem;
    font-weight: 600;
    text-align: left;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    color: #ad627c
}


#home-title-header-one{
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    color: #56375c;
}

.header-div{
    margin-top: 150px;
    margin-bottom: 150px;
    text-align: center;
}

#home-title-sub-header{
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    font-family: "Akaya Telivigala", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    color: #55385c;
}

.home-div{
    margin-top: 20px;
}


#home-title-purple-description {
    font-size: 18px;
    line-height: 40px;
}

#home-title-header-description-one {
    font-size: 21px;
    line-height: 45px;
    color: #565558
}

#testimonies-description{
    font-size: 14px;
    line-height: 30px;
    font-style: italic;
}


#logoTitle {
    font-family: "Akaya Telivigala", system-ui;
    font-weight: 900;
    font-style: normal;
    font-size: 2.7rem;
    letter-spacing: 3px;
    color: #56375C
}

#logoTitle > a {
    color: #56375C
}

#logo-title-footer {
    font-family: "Akaya Telivigala", system-ui;
    font-weight: 900;
    font-style: normal;
    font-size: 2.7rem;
    letter-spacing: 3px;
    color: #56375C
}

#logo-title-footer > a {
    color: #56375C
}

#footer-listing > li{
    line-height: 35px;
}

.sign-up-form-div-space {
    padding: 5px;
}
   


    #titleOne, #titleFour {
        color: #e18501f7
    }

#homeSubTitle {
    font-size: 1.5rem;
    line-height: 30px;
    margin-top: 25px;
    font-weight: 600;
    color: white;
}


#btnDarkColor {
    background-color: #56375C;
    color: white;
    height: 50px;
    text-transform: none;
    font-weight: bolder;
}



#btn-home-find-event {
    background-color: #e18501f7;
    border: 1px solid #e18501f7;
    color: #fff;
    width: 30%;
    font-weight: bold;
    font-size: 20px;
    border-radius: 8px;
    padding: 16px 24px;
    cursor: pointer;
    text-align: center;
    text-transform: initial;
    transition: color .3s ease, background .3s ease;
}



#btnDarkColor-Search {
    background-color: #56375C;
    color: white;
    text-transform: none;
    font-weight: bolder;
}


#dasboard-count{
    font-size: 15px;
    font-weight: bold;
}

.event-lisiting-mobile{
    display: none;
}

.image-lisiting-mobile{
    display: none;
}

.sticky-header {
    position: sticky;
    top: 70px; /* Stick to the top */
    background: white; /* Ensure it's visible */
    z-index: 1000; /* Ensure it stays above other elements */
}

#discovery-text{
    font-size: 15px;
    font-weight: bold;
}

#btnBrightColor {
    color: #e18501f7;
    height: 50px;
    text-transform: none;
    font-weight: bolder;
}


#btnBuyTickets {
    color: black;
    height: 50px;
    width: 200px;
    text-transform: none;
    font-weight: bolder;
    background-color: rgb(247 196 255);
}

#reg-title {
    font-family: "Akaya Telivigala";
    font-weight: 600;
    font-size: 2em;
    color: #56375C;
}


#reg-sub-title {
    font-weight: 500;
}

#sub-title-2{
    margin-top:10px;
    font-size :16px;
}

#sub-title-2{
    margin-top: 10px;
    font-size: 16px;
    font-weight:500;
}

#txt-activate-account-input{
    font-weight : bold;
    font-size: 20px;
    letter-spacing : 30px;
    text-align:center;
}

#login-title {
    font-family: "Akaya Telivigala", system-ui;
    font-weight: bold;
    font-size: 30px;
    color: #e18501f7;
    text-align: center;
}


#login-sub-title{
    font-size:14px;
    font-weight:600;
    text-align:center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}


#login-middle-title {
    font-family: "Akaya Telivigala", system-ui;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: #56375C;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

#transparent-image {
    height: 600px;
    background-color: #f3dff6;
}


.login-container {
    width: 55%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.column {
    float: left;
    padding: 10px;
    height: 500px; 
    align-content: center;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
    padding: 30px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

#forgot-password-div {
    text-align: right;
}

#forgot-password-div > a {
    font-size: 12px;
    color: #e18501f7;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
}

#login-sinup-div {
    text-align: center;
    font-weight:500;
}

    #login-sinup-div > a {
        text-decoration: none;
        cursor: pointer;
        color: #e18501f7;
    }

.mud-icon-button:focus-visible, .mud-icon-button:active {
    background-color: rgb(255 243 225);
}

#btn-create-event {
    color: #e18501f7;
}

    #btn-create-event :hover {
        color:#56375C ;
    }


#eventTypesDiv {
    cursor: pointer;
    border: 1px dashed;
    padding-left:15px;
    background: #ffe4cb52;
}


#public-event-div {
    background-color: rgb(243 223 246 / 57%);
    padding: 10px;
}

#private-event-div {
    background-color: rgb(243 223 246 / 57%);
        padding: 10px;
}


#ticket-event-div {
    background-color: rgb(243 223 246 / 57%);
    padding: 10px;
    border-radius: 15px;
}


#discovery-title {
    font-family: "Akaya Telivigala", system-ui;
    font-size: 45px;
    color: #56375C;
}

#discovery-title-mid {
    font-family: "Akaya Telivigala", system-ui;
    font-size: 25px;
    color: #56375C;
}

#discovery-title-small {
    font-family: "Akaya Telivigala", system-ui;
    font-size: 31px;
    color: #56375C;
}

#trending-title {
    font-family: "Akaya Telivigala", system-ui;
    font-weight: bold;
    font-size: 30px;
    color: #56375C;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}



#event-title {
    font-size: 2.0rem;
    color: #1e0a3c;
    font-weight:600;
    word-break: break-word;
    line-height: 3rem;
    font-family: "Akaya Telivigala", system-ui;
    width:100%;
}