:root {
    --reportsTitleButtonsColor: #006DCC;
}
.reportsTitleButtonsColor {
    background-color: var(--reportsTitleButtonsColor);
}

.reportsPageIconSize {
    /*width: 76px;*/
    /*height: 76px;*/
    width: 4.0vw;
    min-width: 32px !important;
    height: auto;
    /*height: 5.0vw;*/
    /*height: 5.2vw;
    min-height: 32px;*/
    object-fit: scale-down;
}
.reportsPageTitleFont {
    /*font-family: Helvetica,"Arial Black",Arial;*/
    font-family: "Verdana";
    /*font-size: 24px;*/
    /*font-size:1.7vw;*/
    /*font-size: calc(14px + 1.7vw);*/
    font-size: calc(12px + 0.45vw);
    font-weight: bold;
    /*text-decoration-color: navy;*/
    color: var(--reportsTitleButtonsColor);
}

.reportsPageSubTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-family: "Verdana";
    /*font-size: 16px;*/
    /*font-size: 1.3vw;*/
    font-size: calc(09px + 0.48vw);
    font-weight: 100 200;
    /*font-stretch: 25% 100%;*/
    /*font-weight: bold;*/
    /*text-decoration-color: navy;*/
    color: var(--reportsTitleButtonsColor);
}
.reportsFormBgColor {
    background-color: lightgray;
}
.reportsCommandsBgColor {
    background-color: aliceblue;
}
.reportsLabelFont {
    font-size: calc(10px + 0.3vw);
    font-weight: bold;
}
.reportsDateTotalColor {
    background-color: lightyellow !important;
}
.reportsButtonSize {
    width: calc(30px + 3.6vw);
    /* font-size: clamp(0.8rem, 2vw, 1.2rem); /* Scales between 0.8-1.2rem */ */
}
.reportsInputFont {
    font-size: calc(10px + 0.45vw) !important;
    /* font-weight: bold; */
}
.reportsLabelBgColor {
    background-color: silver;
}
.reportsLabel {
    /* display: inline-block; */
    /*background-color: white;*/
    /*padding: 08px 06px;*/
    padding: 05px 05px;
    font-size: calc(10px + 0.45vw);
    /*font-size: 14px;*/
    /*font-weight: bold;*/
    /* box-sizing: border-box; */
    /*min-height: 1.5em;*/
    /*box-sizing: content-box;*/
    width: 100%;
    border-radius: 2px;
    /*border-radius: 4px;*/
     /*border: 1px solid transparent;*/ 
    border: 1px solid var(--PrimaryColor);
    /* // optional */
    /* background-color: #efefef; */
}
.reportsInput {
    /* display: inline-block; */
    background-color: white;
    /*padding: 08px 06px;*/
    padding: 05px 06px;
    font-size: calc(10px + 0.45vw);
    /*font-size: 14px;*/
    /*font-weight: bold;*/
    /* box-sizing: border-box; */
    /*min-height: 1.5em;*/
    /*box-sizing: content-box;*/
    border-radius: 4px;
    /* border: 1px solid transparent; */
    border: 1px solid var(--PrimaryColor);
    /* // optional */
    /* background-color: #efefef; */
    outline: none;
}
.reportsButton {
    /*background-color: #04AA6D;*/
    border: none;
    /*color: white;*/
    /*padding: 10px 06px;*/
    padding: 06px 06px;
    width: calc(30px + 5.2vw);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*font-size: 16px;*/
    font-size: calc(10px + 0.45vw);
    border-radius: 04px;
    /*margin: 2px 2px;*/
    cursor: pointer;
    outline:none;
}
.reportsShowButton {
    box-sizing: border-box;
    font-size: calc(08px + 0.70vw);
    font-weight: bold;
    background-color: var(--reportsTitleButtonsColor);
    color: white;
    padding: 06px 04px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 04px;
    /*border-radius: 0 4px 4px 0;*/ /* Rounded corners on the right */
    /*margin: 1px 1px;*/
    cursor: pointer;
    /*width: 90%;*/
    border: 1px solid var(--PrimaryColor);
    outline: none; /* Remove default outline */
}

.reportsShowButton:hover {
    background-color: gold;
    color: blue;
}


/* Base styles for the grid container */
.reportsCriteriaGrid {
    display: grid;
    /*  gap: 16px; */ /* Space between items */
    /*  padding: 16px; */
    /* Responsive grid layout without media queries */
    /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/ /* Automatically adjust columns */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Automatically adjust columns */
    width: 95%; /* Ensure the container takes full width */
    max-width: 1000px;
    gap: 0;
    margin: 0 auto; /* centers horizontally */
   /* margin-left: auto;*/
   /* margin-right: auto;*/
    background-color: #f0f0f0; /* to see container bounds */
}
/* Define different sizes for the columns */
.reportsCriteriaGridCol1 {
    grid-column: span 2; /* Smaller column */
}

.reportsCriteriaGridCol2 {
    grid-column: span 2; /* Larger column */
}

.reportsCriteriaGridCol3 {
    grid-column: span 2; /* Larger column */
}
.reportsCriteriaGridCol4 {
    grid-column: span 2; /* Larger column */
}
.reportsCriteriaGridCommonCol {
    /*grid-column: 1;*/ /* Larger column */
}
/* Optional: Style for grid items */
.reportsCriteriaGridCol {
    /* This can be used to style the  Search Text Box */
    /* background-color: lightblue; */
    /* padding: 20px;
            text-align: center; */
    /* border: 1px solid #ccc; */
}