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;
}