.select2-selection__rendered{
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent !important;
    outline: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--heading) !important;
    border: none;
}

.select2-selection {
    border: none !important;
    background: transparent !important;
    color: var(--heading) !important;
}

body {
    margin-top: 20px;
    background: #FAFAFA;
}

.order-card {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg, #4099ff, #73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg, #FFB64D, #ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg, #FF5370, #ff869a);
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

/* Overall card styling */
.order-card {
border-radius: 15px; /* Softer edges for visual appeal */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
transition: all 0.2s ease-in-out; /* Smooth hover effects */
}

.order-card:hover {
transform: translateY(-2px); /* Slight lift on hover */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Primary card emphasis */
.bg-c-pink {
background: linear-gradient(45deg, #FF5370, #ff869a); /* Base gradient */
box-shadow: 0 4px 10px rgba(255, 83, 112, 0.3); /* Color-matched shadow */
}

.bg-c-pink:hover {
background: linear-gradient(45deg, #FF4060, #FF7585); /* Gradient shift on hover */
}

/* Content clarity */
.card-block h6 {
font-weight: 600; /* Bolder headings */
}

.card-block p {
font-size: 16px; /* Legible text size */
line-height: 1.5; /* Improved readability */
}

/* Call to action buttons */
.btn-primary {
background-color: var(--bs-primary); /* Align with primary card color */
border-radius: 5px; /* Match card corners */
transition: all 0.2s ease-in-out; /* Smooth hover effect */
}

.btn-primary:hover {
background-color: var(--bs-btn-hover-bg); /* Hover color shift */
}


.form{

    width: 100%;

    background-color: var(--background);

    border: 1px solid var(--grey);

    border-radius: 10px;

    margin: 0px auto 20px 0px;

}



.form .heading{

    border-bottom: 1px solid var(--grey);

    padding: 20px 25px;

}



.form .heading h1{

    font-size: 18px;

    font-weight: 600;

    color: var(--heading);

}



.form .heading button{

    width: 35px;

    aspect-ratio: 1/1;

    border-radius: 50%;

    color: red;

    background-color: transparent;

    font-size: 25px;

    flex-shrink: 0;

    margin-left: auto;

}



.form .input-box{

    width: 90%;

    margin: 10px auto 20px auto;

}





.form .input-box.event-type{

    border: 1px solid var(--grey);

    border-radius: 5px;

    margin-top: 20px;

    overflow: hidden;

}



.form .input-box .type-label{

    width: 50px;

    height: 60px;

    flex-shrink: 0;

    padding-left: 15px;

    border-right: 1px solid var(--grey);

}



.form .input-box select{

    height: 60px;

    width: 100%;

    padding-left: 15px;

    font-weight: 13px;

    font-weight: 500;

    color: var(--heading);

    background-color: var(--background);

}



/* Styles for the modal */

.modal {

    display: none; /* Hide the modal by default */

    position: fixed;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

}



/* Updated styles for the smaller and centered modal */

.modal-content {

    background-color:  var(--background);

    max-width: 650px;

    color: var(--heading);

    margin: 2% auto;

    padding: 15px;

    border: 1px solid #888;

    width: 60%; /* Adjust the width as needed */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}





.close {

    color: var(--heading);

    float: right;

    font-size: 28px;

    font-weight: bold;

}



.close:hover,

.close:focus {

    color: var(--heading);

    text-decoration: none;

    cursor: pointer;

}



.form .input-box p{

    font-size: 13px;

    font-weight: 600;

    color: var(--text);

}





.form .input-box input,

.form .input-box textarea{

    width: 100%;

    border: 1px solid var(--grey);

    border-radius: 5px;

    margin-top: 10px;

    padding-left: 15px;

    height: 60px;

    font-size: 13px;

    font-weight: 500;

    color: var(--heading);

    background-color: transparent;

}



.form .input-box textarea{

    height: 200px;

    padding: 16px;

}



.form .input-box input:hover,

.form .input-box select:hover,

.form .input-box textarea:hover{

    border-color: var(--primary);

}



.form .save-btn{

    width: 90%;

    margin: 0px auto 20px auto;

}



.form .save-btn button{

    width: 100%;

    background-color: var(--primary);

    font-size: 13px;

    color: white;

    font-weight: 500;

    border-radius: 5px;

    height: 48px;

}







.list-user-events .event.selected,

.list-user-events .event:hover{

    border-color: var(--primary);

    box-shadow: 0px 0px 0px;

}



.list-user-events .event{

    width: 100%;

    margin: 0px auto 20px 0px;

    border-radius: 10px;

    background-color: var(--background);

    padding: 10px;

    flex-shrink: 0;

    border: 1px solid transparent;

    box-shadow: 0px 0px 1px rgba(0,0,0,0.25);

    cursor: pointer;

}



.event .type-image{

    width: 50%;

    max-width: 450px;

    height: 245px;

    border-radius: 5px;

    background-size: cover;

    background-position: center;

    flex-shrink: 0;

    margin-right: 40px;

}



.event h1{

    font-size: 20px;

    font-weight: 600;

    margin: 2px 0px 10px 0px;

    color: var(--heading);

}



.event .type{

    font-size: 16px;

    font-weight: 600;

    text-transform: capitalize;

    color: var(--primary);

}



.event .date{

    font-size: 12px;

    color: var(--text);

    font-weight: 500;

}



.event .actions{

    margin-top: 35px;

    gap: 25px;

    width: 100%;

}



.event .actions .view{

    width: 100%;

    height: 45px;

    background-color: var(--primary);

    color: white;

    font-weight: 500;

    font-size: 12px;

    flex-shrink: 0;

    border-radius: 5px;

    margin-right: 30px;

}



.event .actions .alter{

    width: 38px;

    aspect-ratio: 1/1;

    border-radius: 50%;

    font-size: 18px;

    color: var(--text);

    background-color: transparent;

    border: 1px solid var(--text);

    flex-shrink: 0;

}



.event .actions .delete:hover{

    color: red;

    border-color: red;

}



.event .actions .edit:hover{

    color: var(--primary);

    border-color: var(--primary);

}











@media screen and (max-width: 888px) {



    .event h1{

        font-size: 20px;

    } 



    .event .type-image{

        height: 200px;

        width: 42%;

    }





}





@media screen and (max-width: 777px) {



    .list-user-events{

        padding: 10px 0px;

    }



    .event .type{

        font-size: 13px;

    }



    .event h1{

        font-size: 17px;

    } 



    .event .type-image{

        height: 200px;

        width: 44%;

        margin-right: 20px;

    }



    .event .actions .view{

        width: 115px;

        height: 40px;

        margin-right: 15px;

    }



    .event .actions{

        gap: 15px;

    }



    .event .actions .alter{

        width: 35px;

    }





}







@media screen and (max-width: 550px) {



    .list-user-events .event{

        flex-direction: column;

    }



    .event .type-image{

        height: 190px;

        width: 100%;

        margin-right: unset;

        margin: auto;

        max-width: unset;

    }



    .event .details{

        width: 100%;

        padding: 10px 0px 0px 2px;

    }



    

    .event h1{

        font-weight: 600;

    }



    .event .actions{

        margin-top: 15px;

        justify-content: space-between;

    }



    .event .actions .view{

        margin-right: auto;

    }





}





@media screen and (max-width: 750px) {





.form{

    margin: 20px auto;

    width: 350px;

}



.form .heading h1{

    font-size: 16px;

}



.form .input-box .type-label{

    width: 110px;

}



.form .input-box p{

    font-size: 12px;

}



.form .input-box select,

.form .input-box input{

    font-size: 12px;

}







}