body {
    font-family: 'Roboto', Verdana, sans-serif;
    margin: 0; /* Removes default browser margin */
    padding: 0; /* Adds padding around the content within the body */
    box-sizing: border-box;
    min-height: 100vh;
}

/*body {
    margin-bottom: 60px;
}*/

html {
    position: relative;
    font-size: 16px; /* Sets the base font size to 16 pixels */
    min-height: 100%;
}

@media (min-width: 768px) {   /*not doing anything here because set above at 16 anyway */
    html {
        font-size: 16px;
    }
}


#crsitecontainer {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(960px, 1920px) minmax(0, 1fr);
    /*grid-template-rows: 5.75rem 1fr 2.8rem;*/ /* 90px 1fr 45px; */
    grid-template-rows: auto auto 1fr 2.8rem;
    min-height: 100vh;
    /*overflow-x:hidden;*/
    overflow: visible;
}

.crm5stickytop-row1 {
    position: sticky;
    top: 0; /* Sticks the header to the top of the viewport */
    padding: 0;
    z-index: 100; /* Ensure the header stays on top of other content */
    align-self: start;
}

/* ------ grid rows cols ------ */

/* ---- row 1 ---- */
.crm5cl01 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /*background-color: #f0f5f5;*/
    background-color: #476b6b;
}

.crm5cl02 {
    grid-column: 2 / 3; /* Starts at column line 2, ends at column line 3 (occupies the second column) */
    grid-row: 1 / 2; /* Starts at row line 1, ends at row line 2 (occupies the first row) */
    background-color: #476b6b;
}

.crm5cl03 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: #476b6b;
}

/* ---- row 2 ---- */
.crm5cl04 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #f0f5f5;
}

.crm5cl05 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #fff;
}

.crm5cl06 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: #f0f5f5;
}

/* ---- row 3 ---- */
.crm5cl07 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: #f0f5f5;
}

.crm5cl08 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: #fff;
    align-self: start; /* Vertically align top of grid item */
}

.crm5cl09 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background-color: #f0f5f5;
}

/* ---- row 4 ---- */
.crm5cl10 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    background-color: #f0f5f5;
}

.crm5cl11 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background-color: #fff;
    align-self: center;
}

.crm5cl12 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    background-color: #f0f5f5;
}

#crm5bottommiddle {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #476b6b;
    display: grid;
    align-items: center;
    vertical-align: middle;
    font-family: 'Roboto', Verdana, sans-serif;
    font-size: 0.8rem;
    text-align: center;
}


/* bootstrap button adjustment ?? not sure why it's here */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* to ensure pointer shows over list items when hover*/
.st-anylist-item:hover {
    cursor: pointer;
}

/* dialog styling */

/* Basic reset and styling for the dialog itself */
dialog {
    border: none; /* Remove default browser border */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 0;
    box-sizing: border-box;
    max-width: 1600px;
    background-color: azure;
}

    /* Style the overlay that appears when the dialog is open as a modal */
    dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.3);
        /* Add effects like blur to the background content */
        /*backdrop-filter: blur(3px);*/
    }

.centered-dialog {
    position: fixed; /* Position relative to the viewport */
    top: 50%; /* Move the top edge to the vertical center */
    left: 50%; /* Move the left edge to the horizontal center */
    transform: translate(-50%, -50%); /* Move back up and left by half its own size */
    margin: 0; /* Remove default margins */
}


/* password input */
.form-group .toggle-password {
    position: absolute;
    right: 10px; /* Adjust as needed */
    top: 65%; /* Adjust vertically to align with the center of the input */
    transform: translateY(-50%);
    cursor: pointer;
}


/* date input */
/* Style the input wrapper */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    /*color-scheme: light; */ /* Forces the browser calendar popup into light or dark mode */
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #444;
    /*background-color: #222;
    color: #fff;*/
    border-radius: 6px;
    outline: none;
}

    input[type="date"]::-webkit-calendar-picker-indicator {
        background-color: #38bdf8;
        padding: 5px;
        border-radius: 4px;
        cursor: pointer;
        /* OR use filters to change a dark icon's color without hiding it */
        /* filter: invert(1); Turns a black icon into a white icon */
    }

        /* Optional: Trigger the calendar popup by clicking anywhere on the input box */
        /*input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        filter: invert(1);*/ /* Makes the calendar icon white for dark UI */
        /*}*/