/*  1-First Declar CSS Variables with their Values
    2-Use these Variables in CSS Rules or Class Declaration
    3-Assign these CSS Rule or Class Declaration to HTML Elements in the class attributes
*/
:root {
    --AppBgColor: #ffeaea; /* Light Red*/
    --MainBgColor: white;
    --MainTextForeColor: white;
    --MainTextColor: maroon;
    --OuterDivBgColor: khaki;
    --InnerDivBgColor: #B0C4DE;
    --AppIconHeight: 60px;
    --AppIconWidth: 60px;
    --PageIconHeight: 50px;
    --PageIconWidth: 50px;
    --PageIconHeight2: 40px;
    --PageIconWidth2: 40px;
    --PageHeaderFont: "Arial Black";
    --LabelFontSize: 14px;
    --PageHeaderBackColor: var(--MainTextColor);
    --PageHeaderForeColor: var(--MainTextForeColor);
    --PageHeaderFont: var(--PageHeaderFont);
    --LabelFontColor: var(--MainTextColor);
    --LabelFont: 'Arial Black';
    --InputFont: 'Arial';
    --InputFontSize: 14px;
    --InputFontWeight: bold;
    --InputFontColor: blue; /*var(--MainTextColor);*/
    --LabelFontWeight: bold;
    --PageHeadingFont: 'Arial Black';
    --PageHeadingFontSize: 20px;
    --PageHeadingFontWeight: bold;
    --PageSubHeadingFontSize: 16px;
    --PageSubHeadingFontsize2: 14px;
    --PageSubHeadingFont: 'Arial Black';
    --PageHeadingColor: var(--MainTextColor);
    --BorderRadiusSize: 08px;
}

.AppBgColor{
    /*background-color:var(--MainBgColor);*/
    background-color:var(--AppBgColor);
}
.OuterDivColor {
    background-color:var(--OuterDivBgColor);
}
.InnerDivColor {
    background-color:var(--InnerDivBgColor);
}
/* For Page Header Back Color  */
.PageHeaderBackColor {
    background-color: var(--PageHeaderBackColor);
}

.PageHeaderForeColor {
    color: var(--PageHeaderForeColor);
}

.PageSubHeaderBackColor {
    background-color: Gold;
}

.PageSubHeaderForeColor {
    color: navy;
}

.MainTextColor {
    color:var(--MainTextColor);
}
.RoundedCornor {
    border-radius:var(--BorderRadiusSize);
}
.ArialBlack{
    font-family:"Arial Black";
}
.PageHeaderFont {
    font-family:var(--PageHeaderFont);
}
.PageHeading {
    font-style: var(--PageHeadingFont);
    font-size: var(--PageHeadingFontSize);
    font-weight:var(--PageHeadingFontWeight);
    color: var(--PageHeadingColor);
}
.PageSubHeading {
    font-style: var(--PageSubHeadingFont);
    font-size: var(--PageSubHeadingFontSize);
    font-weight: var(--PageHeadingFontWeight);
    color: var(--PageHeadingColor);
}
.AppIcon {
    height: var(--AppIconHeight);
    width: var(--AppIconWidth);
    object-fit: scale-down;
}
.PageIcon {
    height: var(--PageIconHeight);
    width: var(--PageIconWidth);
    object-fit: scale-down;
}
.PageIcon2 {
    height: var(--PageIconHeight2);
    width: var(--PageIconWidth2);
    object-fit: scale-down;
}
.LabelFont {
    font-family:var(--LabelFont);
    font-size:var(--LabelFontSize);
    font-weight:var(--LabelFontWeight);
    color:var(--LabelFontColor);
}
.InputFont {
    font-family: var(--InputFont);
    font-size: var(--InputFontSize);
    /*font-weight: var(--InputFontWeight);*/
    color: var(--InputFontColor);
}
a, u {
    text-decoration: none;
}

.LinkFont2 {
    font-family: Helvetica,"Arial Black";
    font-size: 20px;
    font-weight: bold;
    text-decoration-color: navy;
    color: navy;
}

@media screen and (max-width: 400px) {
    .LinkFont2 {
        font-family: Helvetica,"Arial Black";
        font-size: 14px;
        font-weight: bold;
        text-decoration-color: navy;
        color: navy;
    }
}
.cardColumn {
    width: 100%;
    display: block;
    margin-bottom: 12px;
}
/* Style the Asset cards */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 12px 04px;
    text-align: center;
    /*background-color: #f1f1f1;*/
    border-radius: 8px;
}
.card2 {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 08px 04px;
    text-align: center;
    /*background-color: #f1f1f1;*/
    border-radius: 8px;
}
/* Remove extra left and right margins, due to padding */
.cardRow {
    margin: 0 -5px;
}