:root {
    --accountsTitleButtonsColor: #006DCC;
}
.accountsTitleButtonsColor {
    background-color: var(--accountsTitleButtonsColor);
}
.accountsPageIconSize {
    /*width: 76px;*/
    /*height: 76px;*/
    width: 4.0vw;
    min-width: 44px !important;
    height: auto;
    /*height: 5.0vw;*/
    /*height: 5.2vw;
    min-height: 32px;*/
    object-fit: scale-down;
}
.accountsPageTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    /*font-size: 24px;*/
    /*font-size:1.7vw;*/
    /*font-size: calc(14px + 1.7vw);*/
    font-size: calc(12px + 0.77vw);
    font-weight: bold;
    /*text-decoration-color: navy;*/
    color: var(--accountsTitleButtonsColor);
}

.accountsPageSubTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    /*font-size: 16px;*/
    /*font-size: 1.3vw;*/
    font-size: calc(09px + 0.47vw);
    font-weight: 100 200;
    /*font-stretch: 25% 100%;*/
    /*font-weight: bold;*/
    /*text-decoration-color: navy;*/
    color: var(--accountsTitleButtonsColor);
}
.accountsFormBgColor {
    background-color: lightgray;
}
.accountsCommandsBgColor {
    background-color: aliceblue;
}
.accountsLabelFont {
    font-size: calc(12px + 0.3vw);
    font-weight: bold;
}

.accountsButtonSize {
    width: calc(30px + 3.6vw);
    /* font-size: clamp(0.8rem, 2vw, 1.2rem); /* Scales between 0.8-1.2rem */ */
}
.accountsInputFont {
    font-size: calc(10px + 0.45vw);
    /* font-weight: bold; */
}

.accountsAddButton {
    box-sizing: border-box;
    font-size: calc(08px + 0.70vw);
    font-weight: bold;
    background-color: var(--accountsTitleButtonsColor);
    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 */
}

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

.accountsSearchInput {
    /*display: block;*/
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    /*line-height: 1.5;*/ /* Line height for better readability */
    text-align: center;
    text-decoration: none;
    background-color: white;
    padding: 06px 04px;
    font-size: calc(10px + 0.57vw);
    /*font-weight: bold;*/
    border-radius: 04px;
    /*border-radius: 4px 0 0 4px;*/ /* Rounded corners on the left */
    border: 1px solid var(--PrimaryColor);
    outline: none; /* Remove default outline */
    /*margin: 1px 1px;*/
    /*display: block;  Makes the element a block-level element 
    width: 100%;  Takes up the full width of its container 
    padding: 0.375rem 0.75rem;  Padding for text inside the input 
    font-size: 1rem;  Default font size 
    font-weight: 400;  Normal font weight 
    line-height: 1.5;  Line height for better readability 
    color: #212529;  Text color 
    background-color: #fff;  Background color 
    background-clip: padding-box;  Ensures padding doesn't affect background 
    border: 1px solid #ced4da;  Default border color 
    border-radius: 0.25rem;  Slightly rounded corners 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;  Smooth transition*/
}
/* Base styles for the grid container */
.accountsAddSearchGrid {
    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(250px, 1fr)); /* Automatically adjust columns */
    width: 100%; /* Ensure the container takes full width */
    gap: 0;
}
/* Define different sizes for the columns */
.accountsAddSearchGridCol1 {
    grid-column: span 2; /* Smaller column */
}

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

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