.my-delete-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: red;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 6l3 12h12l3-12H3zm1.5 1.5h15l-2.25 9h-10.5l-2.25-9zM9 4h6v1.5H9V4zM6.75 4.5H17.25v1.5H6.75V4.5z"/></svg>') center / contain no-repeat;
    cursor: pointer;
}

/*.my-custom-card {
    border: 3px solid red;*/ /* Adjust the color and thickness as needed */
    /*border-radius: 8px;*/ /* Optional: to round the corners */
    /*padding: 15px;*/ /* Optional: to add spacing inside the card */
/*}*/

.my-responsive-font {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    /* How clamp() Works:
        clamp(min, preferred, max) ensures the font size stays within a defined range:
        1rem is the minimum size (small screens).
        2.5vw (2.5% of the viewport width) is the preferred size that scales with screen size.
        1.5rem is the maximum size (large screens). */
}

.my-small-spacing {
    margin-bottom: 0.2rem; /* Adjust this value as needed */
}


@media (max-width: 768px) {
    .responsive-card-body {
        max-height: none; /* Remove the max-height constraint for smaller screens */
        overflow: visible; /* Allow content to flow naturally */
    }
}

.my-bold-text {
    font-weight: bold;
}
.my-font-grid {
    font-size: 12px; /* Adjust the font size as needed */
}

.my-progress {
    width: 100%;
    height: 20px;
    background-color: #ddd;
}

.my-progress-bar {
    height: 100%;
    background-color: #007bff;
}

.my-center-text {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; /* Optional: adjust as needed */
}

.my-display-inline {
    display: inline;
}

.my-fancy-border {
    border: 2px solid #3498db; /* Set the border color */
    border-radius: 10px; /* Add rounded corners */
    padding: 10px; /* Add some padding inside the div */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.my-syncfusion-spinner {
    color: red; /* Set your desired color here */
}

.my-image {
    max-width: 80%; /*100vw;*/
    height: auto;
    max-height: 60%; /*100vh;*/
    width: auto;
}
.my-center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-center-content-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Adds space between cards */
}


.my-image-height-100 {
    object-fit: cover;
    height: 100px; /* Adjust this to your needs */
    width: auto; /* This will maintain the aspect ratio */
}

.my_modal_size-photo {
    width: 600px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

.my_modal_size-xlarge {
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
}
.my_modal_size-largest {
    width: 98%;
    height: 98%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}


.my-horizontal-card-layout {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    justify-content: flex-start; /*space-between;*/
    align-items: flex-start;
    /*In CSS, the `justify-content` property is used to control the horizontal alignment of flexbox or grid container
        items within their respective containers. It does not apply to individual elements directly but rather to 
        the container that holds those elements. This property allows you to distribute the space along the main 
        axis of the container, which is typically horizontal for most layouts.

The `justify-content` property accepts several values:

1. `flex-start`: This value aligns the items at the start of the container. In a left-to-right context, 
        this means the items will be aligned to the left.

2. `flex-end`: This value aligns the items at the end of the container. In a left-to-right context, 
        this means the items will be aligned to the right.

3. `center`: This value centers the items horizontally within the container.

4. `space-between`: This value evenly distributes the items along the main axis, with the first item aligned
        to the start and the last item aligned to the end. The space between items is equal.

5. `space-around`: This value evenly distributes the items along the main axis, with equal space on 
        both sides of each item. The space between items is also equal.

6. `space-evenly`: This value evenly distributes the items along the main axis, with equal space between
        and around each item. It creates an equal amount of space before the first item and after the last item.

These values are particularly useful when working with flexbox and grid layouts to control how items are
        positioned horizontally within their containers. Depending on the value you choose, you can 
        achieve different alignment and spacing effects in your layouts.*/
}

.my-card {
    display: flex;
    margin: 1px;
    padding: 3px;
    position: relative;
    flex: 1; /* Cards take equal width and grow to fill space */
    flex-direction: column;
    margin-right: 10px; /* Add some spacing between cards */
    //max-width: calc(33.33% - 10px); /* Adjust card width based on the number of cards per row */
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 10px
}

.my-card-2horizontal {
    display: flex;
    margin: 1px;
    padding: 3px;
    position: relative;
    flex: 1; /* Cards take equal width and grow to fill space */
    flex-direction: column;
    margin-right: 10px; /* Add some spacing between cards */
    max-width: calc(50% - 5px); /* Adjust card width based on the number of cards per row */
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 10px
}

.my-link-button {
    background: none;
    border: none;
    color: blue; /* #007bff;Blue color for links */
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

.my-card-header {
    height: 30px;
    vertical-align: central;
    //background-color: lightskyblue;
    border-radius: 10px;
    margin-bottom: 5px;
}


.my-checkbox {
    width: 20px;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    cursor: pointer;
}

.responsive-card-body {
    max-height: 300px;
    overflow: auto;
}

.my-uploaded-image {
    max-width: 100%; /* Set a maximum width for responsiveness */
    max-height: 300px; /* Set a maximum height, adjust as needed */
}

.my-select-container {
    width: 300px; /* Adjust the width as needed */
    border: 1px solid #ccc; /* Border style */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 10px;
}

.my-select {
    width: 100%;
    border: none; /* Remove default select border */
    outline: none; /* Remove focus outline */
    height: auto;
    overflow: auto !important;
    margin: auto auto;
}

.scrollable-div-100 {
    height: 300px;
    overflow: auto; 
}
.scrollable-div-200 {
    height: 300px;
    overflow: auto;
}
.scrollable-div-300 {
    height: 300px;
    overflow: auto;
}
.scrollable-div-400 {
    height: 300px;
    overflow: auto;
}
.scrollable-div-500 {
    height: 300px;
    overflow: auto;
}
.scrollable-div-600 {
    height: 300px;
    overflow: auto;
}
.scrollable-div-700 {
    height: 700px;
    overflow: auto;
}
.scrollable-div-800 {
    height: 800px;
    overflow: auto;
}

.my-card-container {
    max-height: 500px; /* Set a fixed height for the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.my-custom-sfcard {
    border: 3px solid red;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
}