﻿/* DEFAULTS
----------------------------------------------------------*/
/*  There is a problem that exists: different browsers have different  
    default padding and margin values for some elements. In order to solve, 
    use this css you set every padding and margin to 0.
{
padding: 0;
margin: 0;
}*/
#container {}
#left { width: 42%; float: left }
#right { width: 42%; float: right }
body {
    /*background: #000025;*/ /*LAST LIVE*/
    /*background: #f1f1f1;*/
    /*background: #b6b7bc;*/
    /*background: #000000;*/ /*#A0D0FF #E0F0FF #CCCCCC #17548d #06437c #05326b #020038*/
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    /*color: #333333;*/ /*#696969*/
}

a:link, a:visited
{
    color: #034af3;
    
    /*padding: 0px;
    text-decoration: underline;
    border-right:23px solid transparent;
    border-left:23px solid transparent;
    border-bottom:23px solid #999999;
    line-height: 20px;
    height: 0;
    display: inline-block;*/
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
    
    /*padding: 0px;
    border-right:23px solid yellow;
    border-left:23px solid transparent;
    border-bottom:23px solid transparent;
    line-height: 20px;
    height: 0;
    display: inline-block;*/
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}
select, input, textarea {
   font-family: Arial, Helvetica, sans-serif;
   /*font-size:11px;*/
}

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #333333;/*#666666*/
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    /*margin-top: 10px;*/
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    max-width: 960px;
    /*width: 960px;*/
    /*width: 75em;*/
    /*background-color: #E3E3FF;*/
    margin: 0px auto 0px auto;
    /*border: 1px solid #496077;*/
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-image:url('../images/headerbg.png');
    /*background: #17548d;*//*#4b6c9e recent:#446699*/
    /*background-image:url('/images/headerbg.png');*//*devserver*/
    /*background-image:url('/mts8/images/headerbg.png');*/
    /*color: #f9f9f9;*/
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #FFFFFF;/*#f9f9f9*/
    border: none;
    line-height: 2em;
    font-size: 1.3em; /*2em*/
}

.header h2 /*added*/
{
    font-weight: 500;
    margin: 0px;
    padding: 0px 0px 4px 20px;
    color: #FFFFFF;/*#f9f9f9*/
    border: none;
    line-height: 1em;
    font-size: 1em;
    text-align: right;
}

.main
{
    /*background-color: Gray;*/
    padding: 0px 12px;
    margin: 12px 8px 0px 8px;
    min-height: 420px;
    /*added below
    position: relative;*/
    /*float: right;
    width: 80.1095%;*/
}

.leftNav
{
    float: right;
    /*direction:rtl;*/
    /*min-height: 1300px;*/
    background-color:#334466;/*#3a4f63*/
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #999999;/*#4e5766*/
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.footer a
{
    color: #999999;
    text-decoration: none;
}

.footer a:hover
{
    color: #999999;
    text-decoration: none;
}

.footer a:active
{
    color: #999999;
    text-decoration: none;
}


.footerMaster
{
    color: #555555;/*#4e5766*/
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.footerMaster a
{
    color: #555555;
    text-decoration: none;
}

.footerMaster a:hover
{
    color: #666666;
    text-decoration: none;
}

.footerMaster a:active
{
    color: #555555;
    text-decoration: none;
}


/* MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#334466;/*#3a4f63*/
    width:100%;
}


/*this got rid of the flashy menu issue*/
div.menu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 
/*this got rid of the flashy menu issue*/
div.menu ul li ul 
{ 
    display: none; 
}


div.menu
{
    padding: 4px 8px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    /*width: 100% !important;*/
    position:static; /* STATIC IS DEFAULT ANYWAY */
    z-index:5; /* HIGHER NUM PUTS MENU ON TOP */
}

div.menu ul li a.level1, div.menu + ul li a:visited {
     background-color: #445577;
}

    div.menu ul li a, div.menu ul li a:visited {
        /*background-color: #445577;*/ /*#465c71*/
        border: 1px #4e667d solid;
        color: #FFFFFF; /*#dde4ec*/
        display: block;
        /*line-height: 1.35em;*/
        padding: 6px 20px;
        text-decoration: none;
        white-space: nowrap;
        /*added*/
        /*text-align: center;*/
        /*min-width: 1em;
        width: auto;
        max-width: 30em;*/
    }

div.menu ul li a:hover
{
    background-color: #334466;/*#bbccdd #bfcbd6*/
    border: 1px #4e667d solid; /*#446699 #0000FF #000099*/
    color: #FFFFFF;/*#465c71*/
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #334466;/*#465c71 #4e667d*/
    color: #FFFFFF;/*#cfdbe6*/
    text-decoration: none;
}

        div.menu ul li a.static.selected {
            /*color: #FFFFBB !important;*/
            font-weight: bold;
            /*border-color: #333333;*/
            background-color: #17548d;
        }
/* SIDE NAV MENU   
----------------------------------------------------------*/

div.hideSkiplink2
{
    background-color:#334466;/*#3a4f63*/
    width:auto;
}

div.menu2
{
    padding: 0px 8px 4px 8px;
}

div.menu2 ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu2 ul li a, div.menu2 ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    /*white-space: nowrap;*/
    min-width:6em;
    width:auto;
    max-width:6em;
}

div.menu2 ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu2 ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

div.menu2 a, div.menu2 a:visited
{
    /*background-color: #4b6c9e;#465c71*/
    border: 1px #4e667d solid;
    color: #FFFFFF;/*#dde4ec*/
    display: block;
    line-height: 1.35em;
    padding: 4px 4px;
    text-decoration: none;
    white-space:normal;
    min-width:9em;
    width:auto;
    max-width:9em;
}

div.menu2 a:hover
{
    background-color: #445577;/*#bfcbd6 #465c71*/
    color: #FFFFFF;/*#465c71 #dde4ec*/
    text-decoration: none;
}

div.menu2 a:active
{
    background-color: #445577;/*#465c71*/
    color: #FFFFFF;/*#cfdbe6*/
    text-decoration: none;
}

.treeNav
{
    border: 1px #4e667d solid;
    background-color: #445577;/*#465c71*/
}

.menu2 .treeNav a:hover
{
    background-color: #334466;/*#3a4f63*/
}




/* AJAX TAB 
-------------------------------------------------------*/

.MyTabStyle .ajax__tab_header
{
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    font-weight:bold;
    display: block;
    
    /*font-size: 1.2em;
    color: #333333;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    display: block;*/
}
.MyTabStyle .ajax__tab_header h3
{
    color: #777;
}
.MyTabStyle .ajax__tab_header .ajax__tab_outer
{
    border-color: #222;
    color: #222;
    padding-left: 10px;
    margin-right: 3px;
    border:solid 1px #c6c6c6;
}
.MyTabStyle .ajax__tab_header .ajax__tab_inner
{
    border-color: #666;
    color: #666;
    /*padding: 3px 10px 2px 0px;*/
}
.MyTabStyle .ajax__tab_hover .ajax__tab_outer
{
    background-color: #ffffff; /*#17548d*/
}
.MyTabStyle .ajax__tab_hover .ajax__tab_inner
{
    color: #fff;
}
.MyTabStyle .ajax__tab_active .ajax__tab_outer
{
    color: #000;
    border-color: #ffffff;
    background-color: #ffffff;
}
.MyTabStyle .ajax__tab_active .ajax__tab_outer h3
{
    font-weight: 500;
    color: #333;
}
.MyTabStyle .ajax__tab_active .ajax__tab_inner
{
    color: #000;
    border-bottom-color: #ffffff;
    background-color: #ffffff;
}
.MyTabStyle .ajax__tab_body {
    font-family: verdana,tahoma,helvetica;
    font-size: 10pt;
    /*background-color: #fff;*/
    background: #f1f1f1;
    border-top-width: 0;
    border: solid 2px #ffffff;
    border-top-color: #ffffff;
}
.MyTabStyle .ajax__tab_tab
{
    /*color: Black;*/
    outline: 0;
}
/*.ajax__tab_xp
{
    color: #333333;
    font-size: 1em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.myInfoTab
{
    color: #333333;
    font-size: 1em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}*/


/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    /*margin: 2px 12px 10px 10px;*/
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    /*font-weight: 600;
    padding: 2px 4px 8px 4px;*/
    color:blue;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

.blue-background, .grid th
{
    color: #FFFFFF;
    background-color: #7799CC;
    
    border-top-color: #FFFFFF;
    border-top-style: solid;
    border-top-width: 1px;
    
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    
    border-left-color: #FFFFFF;
    border-left-style: solid;
    border-left-width: 1px;
    
    /*border-color: #FFFFFF;
    border: 1px solid #FFFFFF;*/
    font-weight: normal;
    text-indent:2px;
    text-align:left;
}
.form th
{
    font-weight:normal;
}

.alternate
{
    background-color: #EDEDFF;
}
.alternate-norm
{
    background-color: #E3E3FF;
}
.yllw-norm { background-color: #F3F781; /* #F5F6CE, #F7FE2E */ }
.yllw-alt { background-color: #F4FA58; }
.green-norm { background-color: #75FA97; }
.green-alt { background-color: #64E986; }
.red-norm { background-color: #FD8665; }
.red-alt { background-color: #FC7554; }
.white-red
{
    color: White;
    background-color: #FD8665;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    /*background-color: #FFF;*/
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.titlebox
{
    border: 2px solid #FFFFFF; /*#EDEDFF*/
    vertical-align:top;
}

.tdtitle
{
    border: 2px solid #EDEDFF; 
    font-weight: normal;
    /* For any browser that can't create a gradient  */
    background-color: #6688BB; /*#445577 #446699 #7799CC #6688BB*/
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    
    /*//mozilla*/
    background: -moz-linear-gradient(left, #5577AA, #99BBEE);
    
    /* Chrome/Safari     */
    background: -webkit-gradient(linear, left top, right top, from(#5577AA), to(#99BBEE));
    
    /*IE 6/7 */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#5577AA',EndColorStr='#99BBEE');
    
    /*IE 8 (& up?)*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#446699', endColorstr='#88AADD');";
    
    /*Opera*/
    -os-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5577AA, endColorstr=#99BBEE)";
    
    color:#FFFFFF; /*#EDEDFF*/
    /*width:100%;*/
}

.navlike
{
    background-color: #6688BB;
    color: #FFFFFF;
    text-decoration:none;
}
.faq h3
{
    font-weight:bold;
}
.faq a
{
    background-color: #6688BB;
    color: #FFFFFF;
    text-decoration:none;
}
.faq a:hover
{
    
    background-color: #7799CC;
    color: #FFFFFF;
    text-decoration:none;
}
.faq li a
{
    color: #034af3;
    background-color: #E3E3FF;
    text-decoration:underline;
}
.faq li a:hover
{
    color: #1d60ff;
    background-color: #E3E3FF;
    text-decoration:none;
}

.breadcrumb
{
    color: #aaaaaa;
    font-size: .8em;
}
.breadcrumb a
{
    color: #777777;
    text-decoration: none;
}

.breadcrumb a:hover
{
    /*color: #1d60ff;*/
    color: #aaaaaa;
    text-decoration: none;
}

.line-right
{
    text-align:right;
}

.line-left
{
    text-align:left;
}

.center
{
    text-align: center;
}

.font-normal
{
    font-weight: normal;   
}

.reset
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.pad5
{
    padding: 5px 5px 5px 5px;
}
.padLeft
{
    padding-left: 20px;
}
.padRight
{
    padding-left: 20px;
}
.padLeftRight
{
    padding:0px 10px 0px 10px;
}
.padLeftRight5
{
    padding: 0px 5px 0px 5px;
}
.middle
{
    margin: 20px 10px 10px 10px;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.red
{
    color: Red;
}

.block
{
    display: block;
}

.top
{
    vertical-align: top;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

.watermarked
{
    /*background-color: #E3E3FF;*/
    color: #888888;
}

.agreementHead
{
    /*color: #222;
    background-color: #FFF;*/
    color: #FFF;
    background-color: #445577;
    font-weight: bold;
    margin: 0px auto 0px auto;
    border-bottom: 1px solid #496077;
}
.agreementPop {
    width: 600px;
    /*background-color: #FFF;*/
    background-color: #E3E3FF;
    padding: 10px 10px 10px 10px;
    border: 1px solid #496077;
    /*height:0px;
    overflow: hidden; */
    width: 100%;
    max-width:850px;
}

.cvvDescriptionPop {
    /*width: 600px;*/
    /*background-color: #FFF;*/
    background-color: #E3E3FF;
    padding: 10px 10px 10px 10px;
    border: 1px solid #496077;
    width: 100%;
    max-width: 500px;
}

.agreementPopupExBg {
    /*background-color: #FFF;*/
    background-color: #666699;
    filter: alpha(opacity=50);
    opacity: 0.7;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}

.year
{
    min-width: 60px;
}

.day
{
    min-width: 45px;
}

.month
{
    min-width: 35px;
}

.infopane
{
    padding: 5px;
    margin-bottom: 0px;
    border: solid #FFFFFF;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 1px;
}

.cpepane
{
    padding: 5px;
    margin-bottom: 15px;
    border: solid #FFFFFF;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    height:0px;
    overflow: hidden; 
}

.redlink a/*:link, a:visited*/
{
    color: #034af3;
}
.redlink a:hover
{
    color:Red;
    text-decoration: none;
}
.redlink a:active
{
    color: #034af3;
}

.Normal
{
  /*border: dashed 1px #000000;
  background-color: #FFFFFF;*/
  cursor: auto;
  /*padding: 10px;
  width: 200px;*/
  text-align: left;
}
 
.Progress
{
  /*border: dashed 1px #000000;*/
  background-color: #E3E3FF;
  background-image: url('../images/spinner.gif');
  background-position: center center;
  background-repeat: no-repeat;
  cursor: wait;
  /*padding: 10px;
  width: 200px;*/
  text-align: left;
}

#progressBackgroundFilter {
    position:fixed; 
    top:0px; 
    bottom:0px; 
    left:0px;
    right:0px;
    overflow:hidden; 
    padding:0; 
    margin:0; 
    background-color:#000; 
    filter:alpha(opacity=50); 
    opacity:0.70; 
    z-index:1000; 
}


#processMessage {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*top: 31%;*/
    left: 25%;
    right: 25%;
    z-index: 1001;
}

#processMessage > h2 {
    margin-bottom: 10px;
    color:white;
}

#processMessage > img {
    width: 50px;
}

/*
    #processMessage { 
    position:fixed; 
    top:30%; 
    left:43%;
    padding:10px; 
    width:14%; 
    z-index:1001; 
    background-color:#fff;
    border:solid 1px #000;
}*/

.gridlink a:link, .gridlink a:visited
{
    color: #333333;
    text-decoration: none;
}
.gridlink a:hover
{
    color:#333333;
    background-color:#cdd1fc;/*#c9cdff;#0093D0;*/
    text-decoration: none;
}
.gridlink a:active
{
    color: #333333; /*color: #034af3;*/
}

/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */
body {
    top: 0px !important;
}
div#google_translate_element div.goog-te-gadget-simple {
    /*border: none;*/
    background-color: transparent;
    /*background-color: #17548d;*/ /*#e3e3ff*/
    font-size: 0.85rem;
}

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {
    text-decoration: none;
}

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
    color: #aaa;
    /*color: rgba(255, 255, 255, 0.8);*/
}

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
    color: white;
}

.goog-te-gadget-icon {
    display: none !important;
    /*background: url("url for the icon") 0 0 no-repeat !important;*/
}

/* Remove the down arrow */
/*div#google_translate_element span[style="color: rgb(155, 155, 155);"] {
            display: none;
}*/
/* when dropdown open */
/*div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {
    display: none;
}*/
/* after clicked/touched */
/*div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {
    display: none;
}*/
/* on page load (not yet touched or clicked) */
/*div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {
    display: none;
}*/

/* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
/*div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {
    display: none;
}*/
/* Remove span with left border line | (next to the arrow) in Edge & IE11 (the "special" browsers of the world) */
/*div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
    display: none;
}*/
/* HIDE the google translate toolbar */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */







h7
{
    font-size: 1.5em;
    color: #333333;/*#666666*/
    font-variant: small-caps;
    text-transform: none;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 0px;
}
hr
{
    border-top: 1px solid #17548d;
}
.cartTotal
{
    padding: 7px 20px;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    background-color: #eeeeee;
    border: solid 1px #17548d; 
    display: block;
}
.subTotal
{
    padding: 3px 10px;
    font-size: 1.0em;
    font-weight: 600;
    text-decoration: none;
    background-color: #eeeeee;
    border: solid 1px #17548d;
}
.subTotal2
{
    font-variant: small-caps;
}
.buttonClass
{
    padding: 7px 20px;
    font-size: 1.2em;
    text-decoration: none;
    font-weight: 600;
    color: White;
    border: solid 1px #17548d;
    background-color: #17548d;
    display: block;
}
.buttonClass:hover
{
    border: solid 1px Black;
    background-color: #28659e;
}
.buttonClass2
{
    padding: 7px 20px;
    font-size: 1.2em;
    text-decoration: none;
    font-weight: 600;
    color: #333333;
    border: solid 1px #cccccc;
    background-color: #E3E3FF;
}
.buttonClass2:hover
{
    border: solid 1px #cccccc;
    background-color: #eeeeee;
}
.buttonClass3
{
    font-variant: small-caps;
    padding: 3px 10px;
    font-size: 1em;
    text-decoration: none;
    font-weight: 600;
    color: #333333;
    border: solid 1px #cccccc;
    background-color: #EDEDFF;
}
.buttonClass3:hover
{
    border: solid 1px #cccccc;
    background-color: #eeeeee;
}
.buttonClass3Accented
{
    font-variant: small-caps;
    padding: 3px 10px;
    font-size: 1em;
    text-decoration: none;
    font-weight: 600;
    color: #333333;
    border: solid 1px #FFFFE0;
    background-color:#FFFACD;
}
.buttonClass3Accented:hover
{
    border: solid 1px #FFFACD;
    background-color: #FFFFE0;
}
    
.linkbutton1
{
    color: #333333;
}
.linkbutton1:link, linkbutton1:visited
{
    color: #333333;
    text-decoration: none;
}
.linkbutton1:hover
{
    color: #333333;
    text-decoration: none;
}
.linkbutton1:active
{
    color: #333333;
}

/* Responsive UI with Flexbox */
.header {
    display: flex;
    /*flex-wrap:wrap;*/
}

.right-header-content {
    margin-left: auto;
}

#headImage {
    width: 100%;
}

/*.logoHeaderImage h1 {
    text-align: center;
}*/

.logoHeaderImage {
    display: flex;
    flex-direction: column;
}

/*Nav-bar show items*/
.navbar-toggler {
    padding: 4px 8px;
    font-size: unset;
    background-color: #334466;
}

.navbar-toggler:hover {
        background-color: #445577;
}


.navbar-toggler:focus {
    outline: none;
}

.navbar {
    padding: 0px;
}

/*This div.show padding:0 was breaking bootstrap alerts (not sure what it was fixing) -bs*/
div.show{
    /*padding:0;*/
}

div.show ul li a {
    text-align: left;
}

div.show > ul > li{
    width: 100%;
}

.navbar-nav {
    display:unset;
}

.navbar-toggler.btn-sm{
    margin:7px;
}

/*LOGIN SCREEN RESPONSIVE UI*/

/*.custom-width{
    width: 60px;
}*/

.login-label {
    width: 60px;
    text-align: right;
    padding-right: 5px;
}

.width-95p {
    width:95%;
}

.margin-bottom-4px{
    margin-bottom: 4px;
}

#MainContent_Login1_RememberMe {
    margin-top: 4px;
    margin-right: 3px;
}

.flex-login-container {
    margin-top:20px;
    margin-bottom:20px;
    max-width:350px;
}


.flex-login-container .flex-justify-end {
    padding-right: 15px;
    padding-top: 5px;
}


.btn-register {
    margin-right: 7px;
}

.login-links{
    margin-bottom:10px;
}

/*Login text decoreation*/
.loginDisplay > a {
    text-decoration: underline;
}

.loginDisplay > a:hover {
    text-decoration: none;
}

/*REGISTER SCREEN RESPONSIVE UI*/

.register-label-width {
    width: 105px;
}

div.register-content > table:first-child {
    width: 100%;
    max-width: 480px;
}

div.register-input > input {
    min-width: 220px;
}

.register-content h3 {
    margin-bottom: 10px;
}

.register-content input {
    margin-right: 11px;
}


/*WALLET SCREEN RESPONSIVE UI*/

.wallet-label-width {
    width: 105px;
}

div.wallet-content > table:first-child {
    width: 100%;
    max-width: 480px;
}

div.wallet-input > input {
    min-width: 220px;
}

.wallet-content h3 {
    margin-bottom: 10px;
}

.wallet-content input {
    margin-right: 11px;
}


/* min height */
.mnh-5rem {
    min-height: 5.2rem;
}

/* max width */
mxw-25 {
    max-width: 25%;
}
mxw-50 {
    max-width: 50%;
}
.mxw-150px {
    max-width: 150px;
}
.mxw-200px {
    max-width: 200px;
}
.mxw-250px {
    max-width: 250px;
}
.mxw-275px {
    max-width: 275px;
}
.mxw-300px {
    max-width: 300px;
}
.mxw-350px {
    max-width: 350px;
}
.mxw-400px {
    max-width: 400px;
}
.mxw-600px {
    max-width: 600px;
}

/*  Some portal colors: might be better doing overrides to bs4 themes, even better than that would be using SASS (variables)*/
.bg-blue-dark {
    background-color: #17548d
}
.bg-blue-medium {
    background-color: #7799CC;
}
.bg-blue-light {
    background-color: #e3e3ff;
}
.bg-blue-lighter {
    background-color: #ededff;
}


/* Remove chrome user agent stylesheet for login input element */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}


/*Add theme to bootstap primary button*/
/*.btn-primary {
    color: #fff;
    background-color: #17548d;
    border-color: #17548d;
}

.btn-primary:hover {
    color: #fff;
    background-color: #1d68af;
    border-color: #1d68af;
}


.btn-outline-primary {
    color: #17548d;
    background-color: transparent;
    background-image: none;
    border-color: #17548d;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #17548d;
    background-image: none;
    border-color: #17548d;
}*/

/* ANNUAL PAYMENT SUMMARY REPORT POP-UP DIALOG */
#MainContent_reportsMPE_foregroundElement {
    display: flex;
    justify-content: center;
    left: 5% !important; 
    right: 5% !important;
}

.btn-close-report {
    margin-left: 10px;
}

/* MAKE PAYMENT POP-UP DIALOG */
#MainContent_MPE_foregroundElement {
    display: flex;
    justify-content: center;
    left: 5% !important;
    right: 5% !important;
}

.reboot-label {
    display: inline;
    margin-bottom: 0px;
}

#tblNewMethod > tbody {
    padding: 5px;
    display: block;
}

/* CVV DESCRIPTION POP-UP DIALOG */
#MainContent_descriptionPanel {
    /*display: flex;*/
    justify-content: center;
    left: 0% !important;
    right: 0% !important;
}

/* CVV DESCRIPTION POP-UP DIALOG */
#MainContent_divResult table {
    width: 100%;
}

.progress-center-viewport {
    position:fixed;
    top: 30%;
    bottom: 0%;
    right: 0%;
    left: 0%;
}
/*FLEXBOX RESPONSIVE UI CLASSES*/
/*.flex {
    display: flex;
}*/

.flex-container-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-container-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

.flex-container-col {
    display:flex;
   flex-direction: column;
}

.flex-box-grow-1 {
    flex-grow: 1;
}

.flex-box-grow-2 {
    flex-grow: 2;
}

.flex-box-grow-3 {
    flex-grow: 3;
}

.flex-justify-end {
    display: flex;
    justify-content: flex-end;
}

/*.flex-justify-center {
    justify-content: center;
}*/

.d-custom-grid {
    display: grid;
}



[data-toggle="collapse"] .fa:before {
    /*content: "\f139";*/
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    /*content: "\f13a";*/
    content: "\f078";
}











/* added below for testing - not sure we will keep this at all - BS */
/* Switches start */
.switch {
    font-size: 1rem;
    position: relative;
}

.switch input {
    position: absolute;
    height: 1px;
    width: 1px;
    background: none;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 0;
}

.switch input + label {
    position: relative;
    min-width: calc(calc(2.375rem * .8) * 2);
    border-radius: calc(2.375rem * .8);
    height: calc(2.375rem * .8);
    line-height: calc(2.375rem * .8);
    display: inline-block;
    cursor: pointer;
    outline: none;
    user-select: none;
    vertical-align: middle;
    text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
}

.switch input + label::before,
.switch input + label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(calc(2.375rem * .8) * 2);
    bottom: 0;
    display: block;
}

.switch input + label::before {
    right: 0;
    background-color: #dee2e6;
    border-radius: calc(2.375rem * .8);
    transition: 0.2s all;
}

.switch input + label::after {
    top: 2px;
    left: 2px;
    width: calc(calc(2.375rem * .8) - calc(2px * 2));
    height: calc(calc(2.375rem * .8) - calc(2px * 2));
    border-radius: 50%;
    background-color: white;
    transition: 0.2s all;
}

.switch input:checked + label::before {
    background-color: #08d;
}

.switch input:checked + label::after {
    margin-left: calc(2.375rem * .8);
}

.switch input:focus + label::before {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}

.switch input:disabled + label {
    color: #868e96;
    cursor: not-allowed;
}

.switch input:disabled + label::before {
    background-color: #e9ecef;
}

.switch.switch-sm {
    font-size: 0.875rem;
}

.switch.switch-sm input + label {
    min-width: calc(calc(1.9375rem * .8) * 2);
    height: calc(1.9375rem * .8);
    line-height: calc(1.9375rem * .8);
    text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
}

.switch.switch-sm input + label::before {
    width: calc(calc(1.9375rem * .8) * 2);
}

.switch.switch-sm input + label::after {
    width: calc(calc(1.9375rem * .8) - calc(2px * 2));
    height: calc(calc(1.9375rem * .8) - calc(2px * 2));
}

.switch.switch-sm input:checked + label::after {
    margin-left: calc(1.9375rem * .8);
}

.switch.switch-lg {
    font-size: 1.25rem;
}

.switch.switch-lg input + label {
    min-width: calc(calc(3rem * .8) * 2);
    height: calc(3rem * .8);
    line-height: calc(3rem * .8);
    text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
}

.switch.switch-lg input + label::before {
    width: calc(calc(3rem * .8) * 2);
}

.switch.switch-lg input + label::after {
    width: calc(calc(3rem * .8) - calc(2px * 2));
    height: calc(calc(3rem * .8) - calc(2px * 2));
}

.switch.switch-lg input:checked + label::after {
    margin-left: calc(3rem * .8);
}

.switch + .switch {
    margin-left: 1rem;
}

/*body {
    padding: 1rem;
}

.dropdown-menu {
    margin-top: .75rem;
}*/

/* switches end */