/* ------------------------------------------------------------------------------------------------
   Page Header
------------------------------------------------------------------------------------------------ */
@media only screen {
    .PageHeader {
        grid-column: header-start / header-end;
        grid-row: header-start / header-end;
    }

    .MainFooter {
        grid-column: footer-start / footer-end;
        grid-row: footer-start / footer-end;
        width: 100%;
        display:none;
        font-size: 11pt;
        background-color: var(--Button);
        color: var(--ButtonText);
        vertical-align: bottom;
        padding: 10px;
        white-space:nowrap;
    }

    .MainContactUs {
        grid-column: contactus-start / contactus-end;
        grid-row: contactus-start / contactus-end;
        width: 100%;
        display:none;
        background-color: var(--Button);
        color: var(--ButtonText);
        padding: 10px;
        text-decoration: none;
        font-size:11pt;
        white-space:nowrap;
    }

    .MainHelpLink {
        grid-column: help-start / help-end;
        grid-row: help-start / help-end;
        display:none;
        background-color: var(--Button);
        color: var(--ButtonText);
        padding: 10px;
        text-decoration: none;
        white-space:nowrap;
    }

    .MainContactUs a, .MainContactUs a:hover, .MainHelpLink a, .MainHelpLink a:hover {
            color: var(--ButtonText);
        }

    .MainMenuHelpIcon {
            height: 22px;
            width: 22px;
            vertical-align: middle;
            padding-left:10px;
            padding-right:10px;
        }

   .MainContactUs a i.fa-phone,.MainContactUs a i.fa-envelope {
            padding: 5px;
            text-decoration:underline;
        }

        .MainContactUs a:hover, .MainHelpLink a:hover {
            text-decoration: underline;
        }

    .PageHeaderTopLine {
        display: block;
        background-color: var(--SiteBackground);
        height: 50px;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 500;
        border-bottom: 1px solid var(--Border);
        margin-bottom: .5em;
    }

    .PageHeaderLogo {
        height: 48px;
        position: absolute;
        right: 4px;
        margin: 0 auto;
        width: 141px;
    }
    .PageHeaderMenuIcon {
        display: inline-block;
        /*position: absolute;*/
        left: 4px;
        bottom: 4px;
        font-size: 2em;
    }
    .PageHeaderPageIcon
    {
        position: relative;
        left: 60vw;
        bottom: 0px;
        font-size: 2em;
    }
    .MainScrollToTop
    {
        display: none;
        position: absolute;
        top: 10px;
        right: 50vw;
        font-size: 1.5em;
        cursor:pointer;
        color: var(--Button);
    }
    .MenuAnchorLeft { float:left; padding-left:6px;}
    .MenuAnchorCenter { padding-left:6px;}
    .MenuAnchorRight { float: right; padding-right:6px;}
}
@media only screen and (min-width: 481px)
{
    .MainScrollToTop
    {
        right: 100px;
        top: auto;
        bottom: 4px;
        color: white;
    }
}
@media print 
{
    .MainFooter, .MainContactUs,.MainHelpLink,.PageHeaderMenuIcon 
    {
        display: none;
    }
    .PageHeaderLogo {
        display: none;
    }
    .PrintHeaderLogo {
        height: 68px;
        text-align:left;
    }
}
/* ------------------------------------------------------------------------------------------------
   Main Menu Top
------------------------------------------------------------------------------------------------ */
@media only screen {
    .MainMenuTopMenu {
        grid-column: nav-start / nav-end;
        grid-row: nav-start / nav-end;
        display: none;
        width: 100%;
        /*position: fixed;*/
        top: 50px;
        left: 0px;
        background-color: var(--TopMenuBackColor);
        color: var(--TopMenuFontColor);
        padding: 4px;
        z-index: 500;
    }

    .MainMenuTopMenuItem {
        display: inline-block;
        white-space: nowrap;
        margin-right: 2em;
    }

    .MainMenuTopMenuItemHidden { 
       opacity: 0.5;
    }
 
    .imp {
        background-color:deeppink;
    }
    .imp sup {
        cursor:pointer;
        margin-left: 5px;
    }

    .MainMenuTopSubMenu {
        display: none;
        position: fixed;
        top: var(--PageHeaderHeight);
        left: 0px;
        z-index: 1750;
        background-color: var(--TopMenuBackColor);
        color: var(--TopMenuFontColor);
        box-shadow: 10px 10px 10px var(--Border);
        padding: 4px;
    }

    .MainMenuTopSubMenuItem {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 1fr;
        grid-template-areas: "label pin";
        color: var(--TopMenuFontColor);
        padding: 4px;
    }

    .MainMenuTopSubMenuItem:hover,.MainMenuTopSubMenuItem:hover a {
        cursor:pointer;
    }

    .MainMenuTopSubMenuItemHidden,.MainMenuPopupSubMenuItemHidden {
        display: none;
    }

    .MainMenuTopCurrentSubMenuItem,.MainMenuTopCurrentSubMenuItem:hover {
        background-color: var(--Content);
        color: #000000;
        cursor:default;
    }

    .MainMenuTopSubMenuAnchor, .MainMenuTopSubMenuAnchor:visited {
        grid-column: label-start/label-end;
        color: var(--TopMenuFontColor);
        text-decoration: none;
    }
    .MainMenuTopSubMenuAnchor:hover{
        color: var(--Content);
        text-decoration: underline;
    }

    .mnupin:before{
        font-family: 'FontAwesome';
        font-style: normal;
        content: "\f10c";
    }
    .mnupinsel:before {
        font-family: 'FontAwesome';
        font-style: normal;
        content: "\f05d";
    }
    .mnupin {
        padding-top: 4px;
        padding-left: 4px;
        grid-column: pin-start/pin-end;
        color: var(--TopMenuBackColor);
    }

    .mnupinsel {
        padding-top: 4px;
        padding-left: 4px;
        grid-column: pin-start/pin-end;
        color: var(--Content);
    }

    .MainMenuTopCurrentSubMenuItem i.mnupin {
        color: var(--Content);
    }
    .MainMenuTopSubMenuItem.MainMenuTopCurrentSubMenuItem:hover i.mnupin, .MainMenuTopCurrentSubMenuItem i.mnupinsel  {
        color: #000000;
    }
    .MainMenuTopSubMenuItem:hover i.mnupin {
        color: var(--Content);
        text-decoration:none;
    }
    /* ------------------------------------------------------------------------------------------------
   Main Menu Popup
------------------------------------------------------------------------------------------------ */
    .MainMenuPopup {
        display: none;
        position: fixed;
        top: 10vh;
        left: 10vw;
        margin: auto;
        z-index: 999;
        border: 1px solid var(--Border);
        padding: 4px;
        background-color: var(--MenuBackground);
        box-shadow: 10px 10px 10px var(--Border);
        max-height: 85vh;
        max-width: 80vw;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .MainMenuPopupTitle {
        text-align: center;
        font-weight: bold;
    }

    .MainMenuPopupCloser {
        position: absolute;
        top: 2px;
        right: 8px;
        font-size: 1em;
        cursor: pointer;
    }

    .MainMenuPopupTable {
        background-color: var(--MenuBackground);
        border-collapse: collapse;
        border: none;
    }

    .MainMenuPopupTableRow {
        border: none;
        ;
    }

    .MainMenuPopupTableCell {
        background-color: var(--Content);
        border: 5px solid var(--MenuBackground);
    }

    .MainMenuPopupSubMenuTitle {
        text-align: center;
        font-weight: bold;
    }

    .MainMenuPopupMenuItemList {
        margin-block-start: 0.25em;
        margin-block-end: 0.25em;
    }

    .MainMenuPopupMenuListItem {
        padding: 2px;
    }

    .MainMenuPopupCurrentListItem {
        font-weight: bold;
        border: 1px solid var(--Border);
    }

    .MainMenuPopupFooter {
        text-align:center;
    }

    .MainMenuPopupAnchor {
        color: black;
    }

        .MainMenuPopupAnchor:hover {
            color: var(--Hover);
        }
}
@media only print {
    .MainMenuTopMenu ,
    .MainMenuTopMenuItem ,
    .MainMenuTopSubMenu,
    .MainMenuTopSubMenuItem,
    .MainMenuTopCurrentSubMenuItem ,
    .MainMenuTopSubMenuAnchor, 
    .MenuAnchor, .MenuAnchorRight,
    .MainMenuPopup ,
    .MainMenuPopupTitle,
    .MainMenuPopupCloser,
    .MainMenuPopupTable ,
    .MainMenuPopupTableRow ,
    .MainMenuPopupTableCell ,
    .MainMenuPopupSubMenuTitle ,
    .MainMenuPopupMenuItemList ,
    .MainMenuPopupMenuListItem ,
    .MainMenuPopupCurrentListItem ,
    .MainMenuPopupFooter ,
    .MainMenuPopupAnchor ,
    .MainMenuPopupAnchor:hover {
            display:none;
        }
}

/* ------------------------------------------------------------------------------------------------
   Media Query for Level3 -- Larger than a mobile device
------------------------------------------------------------------------------------------------ */
@media only screen and (min-width: 481px)
{
    .PageHeaderTopLine
    {
        border-bottom: none;
        margin-bottom: 0px;
    }
}


/*  **********************************************************  */
/*  **************** DEVICE DEPENDENT STYLES! ****************  */
/*  **********************************************************  */
/* Defaults (Large monitors (over 768 pixels wide) will use these settings) */
.PrintWidth {width:100%;}
.hideMobile { display:table-cell;} 
span.hideMobile { display:inline-block;}
.showMobile, span.showMobile { display:none;}
.showMobileLandscape {}
.hideMobileLandscape { display:none;}

@media only screen {
}
@media only print {
}
/* anything smaller than a desktop screen */
@media only screen and (min-width: 1px) and (max-width: 768px) {
	
}
/* anything smaller than a slightly smaller desktop screen?  I think this is for iPads in portrait,we could add a portrait requirement */
@media only screen and (min-width: 1px) and (max-width: 737px) {
}

/* SMALL DEVICE! 320 pixel resolution or smaller! */
@media only screen and (min-width: 1px) and (max-width: 320px) 
{ 
.PrintWidth  {width:310px;}
.hideMobile, span.hideMobile { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
.showMobileLandscape { display:none;}
.hideMobileLandscape { display:inherit;}
}

/* SMALL DEVICE! larger than 320, smaller or equal to 360 resolution! */
@media only screen and (min-width: 321px) and (max-width: 375px) 
{ 
.PrintWidth {width:355px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
.showMobileLandscape { display:none;}
.hideMobileLandscape { display:inherit;}
}

/* SMALL DEVICE! larger than 360, smaller than or equal to 480px */
@media only screen and (min-width: 376px) and (max-width: 412px) 
{ 
.PrintWidth {width:400px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
.showMobileLandscape { display:none;}
.hideMobileLandscape { display:inherit;}
}

@media only screen and (min-width: 413px) and (max-width: 480px) 
{ 
.PrintWidth {width:440px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
.showMobileLandscape { display:none;}
.hideMobileLandscape { display:inherit;}
}

/* SMALL DEVICE! larger than 480, smaller than or equal to 737px */
@media only screen and (min-width: 481px) and (max-width: 568px) 
{ 
.PrintWidth {width:560px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
}

/* SMALL DEVICE! larger than 480, smaller than or equal to 737px */
@media only screen and (min-width: 569px) and (max-width: 640px) 
{ 
.PrintWidth {width:580px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
span.showMobile { display:block;}
}

/* SMALL DEVICE! larger than 480, smaller than or equal to 737px */
@media only screen and (min-width: 641px) and (max-width: 737px) 
{ 
.PrintWidth {width:650px;}
.hideMobile, span.hideMobile  { display:none;}
.showMobile { display:block;} 
}

/* MEDIUM DEVICE (iPad): larger than 640, smaller than or equal to 768px */
@media only screen and (min-width: 738px) and (max-width: 768px)
{ 
    .MainMenuPopupTableCell {  border: 12px solid var(--MenuBackground);}
    .MainMenuTopMenu {
        display: grid; 
        grid-template-columns: auto auto auto auto 1fr auto;         
        grid-template-rows: 1fr;
        grid-template-areas: "mr inv mng cf spacer usermenu";
    }
    .MainFooter, .MainContactUs,.MainHelpLink { display:inline-block; padding:5px; }
    .MainFooter span.mfo { display:none; }
.PrintWidth {width:var(--PrintWidth);}
}

@media only screen and (min-width: 768px)
{ 
    .MainMenuTopMenu {
        display: grid; 
        grid-template-columns: auto auto auto auto 1fr auto;         
        grid-template-rows: 1fr;
        grid-template-areas: "mr inv mng cf spacer usermenu";

    }
    .MainFooter, .MainContactUs,.MainHelpLink { display:inline-block; }
    .MainFooter span.mfo { display:none; }
    .PrintWidth {width:var(--PrintWidth);}
}

.MainTable {
    width:100%;
    border-spacing:0;
}

._MainPanel {
    padding:0;
}

@media only screen and (min-width: 840px) {
    .MainFooter span.mfo { display: inline-block; }
}
@media only screen {
    .printHeader,.PrintHeaderText, .PrintHeaderIcon {
        display: none;
    }
}

/* PRINTING */
@media only print
{ 
    .printHeader  { 
        display:table-header-group;        
        width: var(--PrintWidth;)
    }
    .PrintHeaderIcon { display:table-cell; width:25%; text-align:left; }
    .PageHeader { /*position: absolute;*/
    }
    .PrintHeaderText {
        text-align:center;
        font-weight:bold;
        font-size:larger;
        display:table-cell; 
        width:75%;
    }
}