:root {
    --PrimaryColor: #CC942D;
    --SecondaryColor: #8e671f; /*Primary dark*/
    --TertiaryColor: #7a581b; /* more dark */
    --QuaternaryColor: #d6a956; /*Primary light*/
    --QuinaryColor: #e0be81; /*Primary double light*/
    /*--AppBgColor: #f4e9d5;*/ /* more dark */
    --AppBgColor: #f9f4ea; /* light*/
    --PrimaryFont: Verdana,Arial, Helvetica, sans-serif,"Arial Black";
    --SecondaryFont: Helvetica,Arial;
    --TertiaryFont: Arial;
    --BalanceColor: blue;
    --OpeningColor: blue;
    --DebitColor: red;
    --CreditColor: green;
    --LightRed: #ffeaea;
    --LightMaroon: #B76774;
}

:root {
    --base-font-size: 16px;
}

.MenusDiv {
    width: 90%;
    margin: auto;
    background-color: navajowhite;
    border-radius: 12px;
}
.MenusSubDiv {
    width: 96%;
    margin: auto;
    padding: 08px 16px;
    background-color: navajowhite;
}
.MenuItemBox {
    width: 50%;
    margin: auto;
    box-shadow: 0 2px 4px darkslategray;
    border-radius: 12px;
    padding: 08px;
    text-align: center;
}
/*Note: thead following keywords form sizes
    xx-small (9px); x-small (10px), small (13px), medium (16px), large (18px), x-large (24px), xx-large (32px)
    The values specified in parentheses are based on a browser whose default font size is 16px. */
/*font-family: Helvetica,"Arial Black",Arial;*/
/* Font 37px is equivalent to 2.6 vw on a screen resolution of 1600 x 900 */
/* it means 1px is equivalent to 0.07 vw on the resolution of 1600 x 900 */
.ScreenWidth {
    width: 98vw;
}
.MainDivColor {
    background-color: khaki;
}

.AccountAddInputFont {
    font-size: calc(10px + 0.45vw);
    /* font-weight: bold; */
}
.AccountAddButton {
    box-sizing: border-box;
    font-size: calc(08px + 0.70vw);
    font-weight: bold;
    background-color: mediumblue;
    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 */
}
.PanelPadding {
    padding-left: calc(04px + 1.25vw);
    padding-right: calc(04px + 1.25vw);
}
.PanelMargin {
    /*margin: 0px 20px 0px 20px;*/
    /*margin: 0px calc(4px + 1.12vw) 0px calc(4px + 1.12vw);*/
    margin: 0px calc(2px + 0.3vw) 0px calc(2px + 0.3vw);
}

.MenuBarFont {
    /*font-family: Helvetica,"Arial Black",Arial;*/
    /* Font 37px is equivalent to 2.6 vw on a screen resolution of 1600 x 900 */
    /* it means 1px is equivalent to 0.07 vw on the resolution of 1600 x 900 */
    font-size: calc(10px + 0.46vw);
    /* font-size: large; large is fixed quivalent to 18px */
    /*font-weight: bold;*/
    font-weight: 500;
    /*font-weight: 300 1000;*/
    text-decoration-color: maroon;
    color: maroon !important;
}
.MenuBarAgencyNameFont {
    font-size: calc(12px + 0.65vw);
    font-weight:bold;
    color:blue;
}
.HomeTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    /* Font 37px is equivalent to 2.6 vw on a screen resolution of 1600 x 900 */
    /* it means 1px is equivalent to 0.07 vw on the resolution of 1600 x 900 */
    font-size: calc(12px + 1.8vw);
    font-weight: bold;
    text-decoration-color: navy;
    /*color: navy;*/
    color: var(--accountsTitleButtonsColor);
}

.HomeSubTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: calc(10px + 0.32vw);
    font-weight: bold;
    text-decoration-color: navy;
    /*color: navy;*/
    color: var(--accountsTitleButtonsColor);
}

.StatusMessageFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: calc(10px + 0.32vw);
}

.StatusMessageFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: calc(10px + 0.32vw);
}
    /*.HomeTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: 40px;
    font-weight: bold;
    text-decoration-color: navy;
    color: navy;
}
.HomeSubTitleFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: 14px;
    font-weight: bold;
    text-decoration-color: navy;
    color: navy;
}*/
.HomeTitleRightMargin {
    /*margin-right: 50px;*/
    margin-right: 3vw;
}
.HomeTitlePadding {
    /*padding-top: calc(100vh - 180px);*/
    padding-top: calc(100vh - 03.67px);
}
.PageTitleFont {
    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: navy;*/
    color: var(--accountsTitleButtonsColor);
}

.PageSubTitleFont {
    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: navy;*/
    color: var(--accountsTitleButtonsColor);
}
.TitleFont {
    font-size: calc(12px + 0.70vw);
    font-weight: bold;
}

.SubTitleFont {
    font-size: calc(08px + 0.50vw);
    font-weight: bold;
}
.PageHeaderIconSize {
    /*width: 76px;*/
    /*height: 76px;*/
    width: 5.2vw;
    min-width: 40px !important;
    height: auto;
    /*height: 5.0vw;*/
    /*height: 5.2vw;
    min-height: 32px;*/
    object-fit:scale-down;
}
.MenusMainIconSize {
    /*width: 70px;*/
    /*height: 70px;*/
    /*width:auto;*/
    width: 6vw;
    min-width: 48px !important;
    /*height:90%;*/
    height: auto;
    /*height:11vh;*/
    /*min-height: 40px;*/
    /*object-fit: cover;*/
    /*object-fit: contain;*/
    /*display: block;*/
    /*aspect-ratio: 16/9;*/
}
.MenusIconSize {
    /*width: 70px;*/
    /*height: 70px;*/
    /*width:auto;*/
    width: 4.8vw;
    min-width: 40px !important;
    /*height:90%;*/
    height: auto;
    /*height: 10.0vh;
    min-height: 40px;*/
    object-fit: scale-down;
}
.ImageSize {
    width: 70px;
    height: 70px;
}

.ImageSize50 {
    width: 50px;
    height: 50px;
}

.MenuLinkFont {
    font-family: Helvetica,"Arial Black",Arial;
    font-size: calc(10px + 0.4vw);
    /*font-size: 14px;*/
    font-weight: bold;
    text-decoration-color: navy;
    color: navy;
}
.ButtonFont {
    font-size: calc(10px + 0.2vw);
    /*font-size: calc(08px + 0.2vw);*/
    width: 90%;
    /*padding-left: 2px;*/
    /*padding-right: 2px;*/
    padding: 0 4px;
    min-width:40px;
    min-height:40px;
    /*min-width: 44px;
    min-height: 44px;*/
    border: none;
    border-radius: 4px;
   /* font-size: 16px;*/
    font-weight: 500;
    cursor: pointer;
    display: inline-flex; /* Allows icon and text to align */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content if space allows */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.BackColor {
    background-color: aliceblue;
}
.BackButtonColor {
    background-color: lightyellow;
}
.ImageFit {
    object-fit: scale-down;
}

@media screen and (max-width: 400px) {
    .MarginTitle {
        margin-left: 60px;
    }
    .PageBackFont {
        font-family: Helvetica,"Arial Black",Arial;
        font-size: 12px;
        /*font-weight: bold;*/
        /*text-decoration-color: navy;*/
        /*color: navy;*/
    }
}
@media screen and (max-width: 300px) {

}