<style>

html {
    scroll-behavior: smooth;
}

	a
	{
		text-decoration: none;
		color:#000066;
	}

	a:hover
	{
		color:#0033FF;
		text-decoration: none;
	}

        .smallText
        {
            font-size: 80%;
        }

.grayText
{
    color: #666666;
}
.blueText
{
    color: #0000FF;
}

.NormalLink A
{
    text-decoration:none;
    color:#000066;
    font-size: 110%;
    font-weight: bold;
}

.NormalLink A:hover {
    color:#0033FF;
}

.BigLink A
{
    text-decoration:none;
    color:#000066;
    font-size: 110%;
    font-weight: bold;
}

.BigLink A:hover
{
    color:#0033FF;
/*    text-decoration:underline;*/
    font-size: 110%;
    font-weight: bold;
}

.BoldLink A
{
    text-decoration:none;
    color:#000066;
    font-weight: bold;
}

.BoldLink A:hover
{
    color:#0033FF;
    cursor: pointer;
}

.BylineLink A
{
    text-decoration:none;
    color:#666666;
}

.BylineLink A:hover
{
    color:#0033FF;
    cursor: pointer;
}

.BoldGrayLink A
{
    text-decoration:none;
    color:#404040;
    font-weight: bold;
}

.BoldGrayLink A:hover
{
    color:#282828;
    text-decoration:underline;
}


.LinkSmall A
{
    text-decoration:none;
    color:white;
    font-size: 80%;
}

.LinkSmall A:hover
{
    color:white;
    text-decoration:underline;
    font-size: 80%;
}

.LinkBigWhite A
{
    text-decoration:none;
    color:white;
    font-size: 110%;
    font-weight: bold;
}

.LinkBigWhite A:hover
{
    color:white;
    text-decoration:underline;
    font-size: 110%;
    font-weight: bold;
}

.LinkSmallBlue A
{
    text-decoration:none;
    color:#000066;
    font-size: 80%;
    font-weight: bold;
}

.LinkSmallBlue A:hover
{
    color:#000066;
    text-decoration:underline;
    font-size: 80%;
    font-weight: bold;
}

.LinkSmallGray A
{
    text-decoration:none;
    color:#404040;
    font-size: 80%;
    font-weight: normal;
}

.LinkSmallGray A:hover
{
    color:#0000FF;
    text-decoration:underline;
    font-size: 80%;
    font-weight: normal;
}

.LinkGlowingBoldWhite a
{
    text-decoration:none;
    font-weight: bold;
    color:#DBDBDB;
    text-shadow: 0 0 10px #DBDBDB;
}

.LinkGlowingBoldWhite a:hover
{
    text-decoration:none;
    font-weight: bold;
    color:#FFFFFF;
    text-shadow: 0 0 10px #FFFFFF;
}



	#LinkDivBlock a
	{
		border: 1px solid #000000;
		text-decoration:none;
	}

	#LinkDivBlock a:hover
	{
		border: 1px solid #009900;
		text-decoration:none;
	}

img
{
    border-style:none;
    max-width: 100%;
}

img.PreviewPremiumAccountFeature
{
    border: none;
}

        .thumbnailImage
        {
            width: 50px;
            border: 1px solid #000000;
            margin: 10px 5px 0 0;
        }

.valign-middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Body
{
    background-color: #F9F7F7;
    font-family: "Google Sans","Roboto",Arial,Helvetica,sans-serif;
    font-size: 1em;
    line-height: 1.66;
    color: #202124;
    margin: 0px 0px 0px 0px;
    text-align: center;
}

h1 {
    background: none;
    text-decoration:none;
}
h2 {
    background: none;
    text-decoration:none;
}

label {
    opacity: 0.7;
    font-size: 80%;
}

select {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

hr {
    flex-grow: 1;
    border: none;
    height: 1px;
    background-color: #b0adad;
    margin: 0 10px;
    align-self: center;
}

.list-no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.select-lengthyOptions {
    width: 100%;    
}

    .backgroundPicturePanel {
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: cover;
        position: inherit;
    }

    .backgroundPicturePanelStandardSize {
        height: 530px;
    }

    .translucentPanel {
        background: rgb(0, 0, 0); /* fallback color */
        background: rgba(0, 0, 0, 0.7);
    }

    .tape {
        width: 100%;
        padding: 0.5em;
        background: #008a44;
        color: #ffffff;
        text-align: center;
    }
    .tape a {
        text-decoration: underline;
    }

.hero {
    position: relative;
    width: 100%;
    height: 800px; /* Adjust as needed */
    background: url(/styles/images/home/happy.jpg) center/cover no-repeat;
}
    
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
}
    
.hero-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    text-align: center;
    z-index: 2;
}

.hero-signup {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    text-align: center;
    z-index: 2;
}
            


    .homepageBackgroundPicture {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url(./images/home_image.jpg);
    }

    .homepageBackgroundPicture2 {
        background-image:
/*            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),*/
            url(./images/bg_bggenerator_com.jpg);
    }

    .homepageBackgroundPlain {
        background: #FFFFFF;
        color: #393a3d;
    }

    .price-blurb {
        margin: 0.25em;
        font-style: italic;
    }

    .homePageHeading
    {
        background: none;
        text-decoration:none;
        color:  #333333;
        font-size: 150%;
    }


    .homePageHeading-Light
    {
        background: none;
        text-decoration:none;
        color:  #FFFFFF;
        font-size: 150%;
    }


    .text-normal
    {
        font-size: 100% !important;
    }

    .text-small
    {
        font-size: 90%;
    }

    .text-space {
        line-height: 1.6;
    }

.text-left
{
	text-align: left;
}

.text-light {
    color: #FFFFFF;
}

table {
    background-color: #ffffff;
    padding: 0.25em;
}
table th {
    opacity: 0.7;
    font-weight: normal;
}

	table.blackBorder3
	{
		border-top: 1px solid #000000;
		border-left: 1px solid #000000;
		border-right: 1px solid #6E8B3D;
	}

    th.ContextHeader
    {
        background-color: #f8f8f8;

        background: -webkit-gradient(linear, left top, left bottom, from(#c3c4c4), to(#7d7e7e));
        background: -moz-linear-gradient(top,  #c3c4c4,  #7d7e7e);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3c4c4', endColorstr='#7d7e7e');

        border: 1px solid #CCCCCC;

        color: #404040;
        font-weight: bold;
        padding: 1.0ex;
        font-size: 120%;
    }

    table.JustBorder {
        border: 1px solid #DFE3EB;
    }
    table.JustBorder-dark {
        border: 1px solid #666666;
    }

	table.General
	{
		border: 1px solid #DFE3EB;
		background-color: #f9f7f7;
	}

        table.GeneralWhiteBackground
	{
            border: 1px solid #DFE3EB;
            background-color: #ffffff;
	}

	table.GeneralLightGreyBackground
	{
            border: 1px solid #DFE3EB;
            background-color: #ffffff;
	}

        th.GeneralLightGreyBackground
        {
            border: 1px solid #DFE3EB;
            background-color: #ffffff;
        }

        .TotalsRow
        {
            border-bottom: 2px solid #006633 !important;
            background: #FFFFFF;
            font-weight: bold;
            text-align: right !important;
            padding: 0.7em !important;
        }

        table.Contact
	{
            border: 1px solid #C0C0C0;
            background-color: #EBEBEB;
	}

        .GeneralLightGreyBackground td
        {
            color: #000000;
        }

        th.DarkGrey
        {
            background-color: #494747;
            font-weight: bold;
            color: #FFFFFF;
        }

        .text-alignment1 td
        {
            text-align: left;
        }
        
        .Row {
            padding: 10px;
        }

      	.EvenRow
	    {
            background:#FFFFFF;
            padding: 10px;
            /* border-bottom: 1px solid #cccccc; */
	    }
        .EvenRow-first
	{
            border-top: 1px dotted #cccccc;
	}

	.OddRow
	{
            background:#e6e6e6;
            padding: 10px;
            /* border-bottom: 1px solid #cccccc; */
	}
        .OddRow-top
	{
            border-top: 1px dotted #cccccc;
	}

        .GoodRow td
	{
            border-top: 1px solid #238e39;
            border-bottom: 1px solid #238e39;
	}

        .BadRow td
	{
            border-top: 1px solid #c1180f;
            border-bottom: 1px solid #c1180f;
	}

        table.AccountantVerifiedTable
        {
            border: 1px solid #006633;
            background-color: #f9f7f7;
        }

        .AccountantVerified td
        {
            border-bottom: 2px solid #006633;
        }

        td.AccountantVerifiedNote
        {
            color: #006633;
            font-weight: normal;
            font-size: 80%;
        }

        .VerifiedNote
        {
            color: #006633;
            font-weight: normal;
            font-size: 80%;
        }

	td.GeneralLightGreyBackgroundWithBorder
	{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
	}

	td.GeneralLightGreyBackground
	{
		background-color: #f9f7f7;
	}

        td.BackgroundCell
	{
            color: #333;
            background-color: #eeeeee;
            font-weight: bold;
            font-size: 120%;
            border: 1px solid #9a9a9a;
	}



        td.GeneralWhiteBackgroundWithBorder
	{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
	}

	table.GeneralDarkGreyBackground
	{
		border: 1px solid #CCCCCC;
		background-color: #3a3a3a;
	}

        th.GeneralDarkGreyBackground
        {
            border: 1px solid #CCCCCC;
            background-color: #3a3a3a;
        }

        th.BigWhiteHeader
        {
            color: #FFFFFF;
            font-size: 180%;
        }

	td.GeneralDarkGreyBackgroundWithBorder
	{
		border: 1px solid #CCCCCC;
		background-color: #3a3a3a;
		color: #FFFFFF;
                font-size: 100%;
	}

        tr.GeneralSlightDarkGreyBackground
	{
            background-color: #D8D8D8;
	}


table.DarkGrayTable
{
    border: 1px solid #CCCCCC;
    background-color: #3a3a3a;
    width: 60%;
    table-layout: fixed;
}

.DarkGrayTable td
{
    color: #FFFFFF;
}

table.DarkerGrayTable
{
    border: 1px solid #CCCCCC;
    background-color: #2f2f2f;
}

th.DarkerGrayTable
{
    border: 1px solid #CCCCCC;
    background-color: #2f2f2f;
}

td.DarkerGrayTable
{
    border: 1px solid #CCCCCC;
    background-color: #2f2f2f;
}

	td.GreyCellBorderDown
	{
		/* the cell border appears to slope down */
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-right: 1px solid #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}

	table.GreyTableBorderUp
	{
		/* appears like the table border slopes up */
		border-left: 1px solid #FFFFFF;
		border-top: 1px solid #FFFFFF;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		background-color: #f8f8f8;
	}

	th.General
	{
		color: #404040;
		font-weight: bold;
		padding: 1.0ex;
		font-size: 120%;
	}

        th.header-medium{
            color: #404040;
            font-weight: bold;
	}

        th.header-left{
            text-align: left;
	}

	tr.General
	{
		border-bottom: 1px solid #404040;
	}

	td.General
	{
		font-color: black;
	}

	td.GeneralSmall
	{
		font-color: black;
		font-size: 80%;
	}

	td.GeneralMediumBold
	{
		font-color: black;
		font-weight: bold;
	}

	td.GeneralMedium
	{
		font-color: black;
	}

	td.GeneralMedium1
	{
		font-color: black;
	}

        td.rightAlign
        {
            text-align: right !important;
        }

	td.BigInfo
	{
		font-size: 120%;
	}

th.BigHeader
{
    font-size: 120%;
}

	td.GeneralBig
	{
		font-color: black;
		font-size: 100%;
		text-align: left;
	}

	td.GeneralBigBold
	{
		font-color: black;
		font-size: 110%;
		font-weight: bold;
	}

	td.GeneralBigBoldRequired
	{
		color: #ab0404;
		font-size: 110%;
		font-weight: bold;
	}

	td.GeneralWithBorder
	{
		background: white;
		font-color: black;
		border: 1px solid #CCCCCC;
	}

	td.GeneralTextCell
	{
		font-color: black;
	}

	td.redBorder
	{
		border: 1px solid red;
                background: #F08080;
	}

	td.blueBorder
	{
		border: 1px solid blue;
	}

	td.Welcome
	{
		color: white;

	}

	th.ToolsPreview
	{
		background: #A2CD5A;
		color: white;
		font-size: 120%;
	}

	td.ToolsPreview
	{
		border: 1px solid #556B2F;
	}

	th.Why
	{
		text-decoration:none;
		text-align: left;
		color: #348017;
		font-weight: bold;
	}

	table.Why
	{
		background: #FFF8C6;
		border: 1px solid #348017;
	}

	td.Why
	{
		text-decoration:none;
		text-align: left;
		color: #348017;
		font-weight: bold;
	}

       table.Home
        {
                background: white;
        }


        table.HomeNavBar
        {
                background: #E6E8FA;
                border: 1px solid #104E8B;
        }


        table.HomeNavBarInner
        {
                background: #E6E8FA;
    }


    th.HomeNavBarHeading
        {
                background: #104E8B;
                font-weight: bold;
                color: white;
                padding: 1.0ex;
        }

        td.HomeNavBar
        {
                background: #E6E8FA;
                text-align: left;
                border-bottom: 1px solid #CCCCCC;
                padding: 1.0ex;
        }

        td.HomeNavBarBottom
        {
                background: #E6E8FA;
                text-align: left;
                padding: 1.0ex;
        }


        table.table100
        {
            width: 100%;
            border-spacing: 10px;
            border-collapse: collapse;
        }

        table.table100 td
        {
            text-align: left;
            padding: 10px;
        }


	table.ContentArea
	{
            background-color: #F9F7F7;
            width: 85%;
            border-spacing: 10px;
            border-collapse: collapse;
            border: 1px solid #CCCCCC;
	}

        table.ContentArea th
        {
            text-align: left;
            color: #404040;
            padding: 10px;
            font-size: 120%;
            font-weight: bold;
        }

        table.ContentArea td
        {
            text-align: left;
            padding: 10px;
        }


    td.HomeContentArea
        {
        border: 1px solid #006633;
    }


        td.HomeBottomLine
        {
                border-bottom: 1px solid #104E8B;
        }

table.AdsBackground
{
    border-color: #9ecaed;
    box-shadow:0 0 10px #9ecaed;
    background-color: #ccd7e0;
}

.AdsBackground td
{
    color: #000000;
}

.MainHeading1
{
    color: #404040;
    font-size: 20pt;
    font-weight: bold;
}

.MainHeading5
{
    color: #404040;
    font-size: 120%;
    font-weight: bold;
}

	.MainHeading5Green
	{
		color: #009900;
		font-size: 120%;
		font-weight: bold;
	}

    .GridTable table
    {
        border-style: solid;
        border-width: 2px;
        border-color: #000000
    }

    .GridTable th
    {
        font-weight: bold;
        border-style: solid;
        border-width: 1px;
        border-color: #000000
    }

    .GridTable td
    {
        border-style: solid;
        border-width: 1px;
        border-color: #000000
    }

    .GridTable-light table
    {
        border-color: #C0C0C0
    }

    .GridTable-light th
    {
        font-weight: bold;
        border-color: #C0C0C0;
    }

    .GridTable-light td
    {
        border-color: #C0C0C0
    }

    .table-cell-dotted-top
    {
            border-top: 1px dotted #494747;
            border-bottom: 1px dotted #494747;
    }

    .table-cell-dotted
    {
            border-bottom: 1px dotted #494747;
    }



    .pageContentContainerRow
    {
        overflow: auto;
        padding: 20px !important;
    }

    .background-white1 {
        background: #F8F8F8;
				padding: 5px;
    }

    .background-white2 {
        background: #F0F0F0;
				padding: 5px;
    }

    .background-white3 {
        background: #E0E0E0;
				padding: 5px;
    }

    .background-silver
    {
        background: #C0C0C0;
				padding: 5px;
    }

    .background-yellow
    {
        background: #f5ea92;
    }

    .background-blue
    {
        background: #bcd9ea;
    }

    .background-green
    {
        background: #D0FAEE;
    }

		.background-light
		{
			background-color: #e9ecef !important;
			padding: 5px;
		}

		.background-light2
		{
			background-color: #fafafa !important;
			padding: 5px;
		}

		.background-dark
		{
			background-color: #515151 !important;
			padding: 5px;
		}

    div.testimonial
    {
        background: #006633;
    }

    table.testimonial
    {
        width: 85%;
        border-spacing: 10px;
        border-collapse: collapse;
    }

    table.testimonial td
    {
        text-align: left;
        padding: 10px;
    }

    table.container {
        background: #FFFFFF;
        padding: 0 !important;
    }

.contextHeader {
    background: #FFFFFF;
    color: #000541;
    text-align: left;
    padding: 10px;
}
.contextHeader-bottom {
    border-bottom: 1px solid #DFE3EB;
}

    div.testimonial-light
    {
        background: #FFFFFF;
    }

    .flyer
    {
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        padding: 10px;
        display: inline-block;
    }

    table.testimonial-light
    {
        width: 85%;
        border-spacing: 10px;
        border-collapse: collapse;
    }

    table.testimonial-light td
    {
        text-align: left;
        color: #333333;
        padding: 10px;
    }

    .testimonial-text
    {
        font-family: "Averta", Arial, sans-serif;
        font-style: italic;
        font-size: 160%;
    }

    .testimonial-source
    {
        font-size: 120%;
    }


    .SignUpButton
        {
                color: white;
                background-color:#27408B;
                font-size: 8pt;
                font-weight: bold;
        }

        table.headerBar
	{
		background-color:#002311;
	}

table.headerBar-BottomBorder
{
    background-color:#002311;
    border-bottom: 1px solid #000000;
}

table.headerBar-TopBorder
{
    background-color:#002311;
    border-top: 1px solid #6E8B3D;
}

td.headerBar-BottomBorder
{
    background-color:#002311;
    border-bottom: 1px solid #000000;
}

td.headerBar-RaisedBorder
{
    background-color:#002311;
    border-top: 1px solid #6E8B3D;
    border-left: 1px solid #6E8B3D;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

table.headerBar-LoweredBorder
{
    background-color:#002311;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #6E8B3D;
    border-bottom: 1px solid #6E8B3D;
}

table.headerBar-Darker
{
    background-color:#002311;
}

table.headerBar-Darker-TopBorder
{
    background-color:#002311;
    border-top: 1px solid #6E8B3D;
}

th.WhiteBorder
{
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

td.LightBorder
{
    border: 1px solid #494747;
}

td.darkGreenCell
{
    background: #002e17;
}

td.checkmark
{
    background-image:url(../images/check_40.png);
    background-repeat:no-repeat;
    background-position:center;
}

td.WhiteText
{
    color: #FFFFFF;
}

table.footerBar-Dark-TopBorder
{
    border-top: 1px solid #7e7e7e;
}
td.footerBar-Light-TopBorder
{
    border-top: 1px solid #CCCCCC;
}

	table.SignUpContainerTable
	{
		background-color:#006633;
		border-bottom: 1px solid #000000;
	}

	table.CommonLinksTable
	{
		background-color:#006633;
	}

	td.CommonLinks
	{
		color:white;
		border-bottom: 1px solid black;
	}

	td.SignInLinkCell
	{
		border-top: 1px solid #6E8B3D;
		text-align: right;
	}




        td.CurrentNavBarArea
        {
                text-decoration:none;
                text-align: left;
                color:black;
                font-weight: bold;
                border-bottom: 1px solid #CCCCCC;
                padding: 1.0ex;
        }

        td.CurrentNavBarBottom
        {
                text-decoration:none;
                text-align: left;
                color:black;
                font-weight: bold;
                padding: 1.0ex;
        }


        .MediumBlueHeading
        {
                color: #191970;
                font-size: 120%;
                font-weight: bold;
                font-align: left;
        }

    .MediumGreenHeading
        {
		color: green;
		font-size: 120%;
		font-weight: bold;
		font-align: left;
    }


        .MediumBlackHeading
        {
                color: black;
                font-size: 120%;
                font-weight: bold;
                font-align: left;
        }

        .SmallBlackHeading
        {
                color: black;
                font-size: 120%;
                font-weight: bold;
                font-align: left;
        }

.HandWriting {
    font-family: Arial,sans-serif;
    font-style: italic;
}

        .White
        {
            color: #FFFFFF;
        }

.BiggerText {
    font-size: 240%;
}

        .BigText
        {
            font-size: 180%;
        }

        .Text120
        {
            font-size: 120%;
        }

        .NormalText
        {
            font-size: 100%;
            font-weight: normal;
        }

.notSoImportantText {
    color: #b0adad;
}

        .UserGuideImages
        {
                border:         1px solid #CCCCCC;
        }


	table.SignUpTable
	{
	 	background: #ECE5B6;
	 	border: 1px solid #104E8B;
	}

	th.SignUpTable
	{
                text-decoration:none;
                text-align: left;
                color: #104E8B;
                font-weight: bold;
	}

	td.SignUpTable
	{
                text-decoration:none;
                text-align: left;
                color: #104E8B;
                font-weight: bold;
	}

	table.MobileIntro
	{
		border: 1px solid #406a8e;
		background-color: #b8c5cf;
	}

	th.CentralViewHeading
	{
		background: white;
		text-decoration:none;
		text-align: left;
		color:  blue;
		font-size: 120%;
		border-left: 1px dashed #CCCCCC;
		border-right: 1px dashed #CCCCCC;
	}

	th.CentralViewHeadingNoBorder
	{
		background: white;
		text-decoration:none;
		text-align: left;
		color:  blue;
		font-size: 120%;
	}

	td.CentralViewCell
	{
		background: white;
		text-decoration:none;
		text-align: left;
		line-height: 1.5;
		color:  black;
		border-left: 1px dashed #CCCCCC;
		border-right: 1px dashed #CCCCCC;
	}

	td.CentralViewCellNoBorder
	{
		background: white;
		text-decoration:none;
		text-align: left;
		line-height: 1.5;
		color:  black;
	}

	td.CentralViewCellLeftBorder
	{
		background: white;
		text-decoration:none;
		text-align: left;
		line-height: 1.5;
		color:  black;
		border-left: 1px dashed #CCCCCC;
	}

	td.CentralViewCellRightBorder
	{
		background: white;
		text-decoration:none;
		text-align: left;
		line-height: 1.5;
		color:  black;
		border-right: 1px dashed #CCCCCC;
	}

	table.ToolsAndTips
	{
		background: #F0FFF0;
		border: 1px solid #009900;
	}

	th.ToolsAndTipsHeading
	{
		background: #7CCD7C;
		text-align: left;
		font-size: 120%;
		color: #5e5e5e;
		font-weight: bold;
		text-align:center;
	}

	td.ToolsAndTipsCell
	{
		text-align: left;
	}

	td.ToolsAndTipsCellBottom
	{
		text-align: left;

	}

	td.SignUpCell
	{
		background: #fd9b00;
		text-align: center;
		text-color: black;
		font-weight: bold;
		border: 1px solid #000066;
	}

	.SignUpLink A
	{
		text-decoration:none;
		color:#000066;
		font-weight: bold;
	}

	.SignUpLink A:hover
	{
		color:#000066 ;
		text-decoration:underline;
		font-weight: bold;
	}

	table.Reminder
	{
		background: #FFFFBE;
		border:	 1px solid #FE4400;
	}

	td.ReminderHeading
	{
		font-weight: bold;
		background: #FFFFBE;
		border-top: 1px solid #CCCCCC;
	}

	td.ReminderHeading2
	{
		font-weight: bold;
		background: #FFFFBE;
	}

	td.bottomRow
	{
		border-bottom: 1px solid #CCCCCC;
	}


	table.TodaysTip
	{
		border:	 1px solid #CCCCCC;
	}

	td.TodaysTip
	{
		border:	 1px solid #CCCCCC;
	}

	td.FeaturePreview
	{
		background: white;
		border:	 1px solid #CCCCCC;
		font-color: black;
	}

	td.FeaturePreviewHeading
	{
		background: white;
		color: green;
		font-weight: bold;
	}

	td.LilCalendarMonthName
	{
		background:	#4d4e00;
		color: white;
		font-size: 120%;
		font-weight: bold;
	}

	td.LilCalendarDay
	{
		color: #000000;
		font-size: 200%;
		font-weight: bold;
	}

	td.LilCalendarDayName
	{
		color: #000000;
		font-size: 120%;
		font-weight: bold;
	}

	td.LilCalendarYear
	{
		color: #000000;
		font-size: 120%;
	}

	td.IndianRed
	{
		background:	#AB94DC;
		padding: 25px;
		color: white;
		font-weight: bold;
	}

	td.Chilli
	{
		background:	#D44942;
		padding: 25px;
		color: white;
		font-weight: bold;
	}

	td.Nectarine
	{
		background:	#FF704D;
		padding: 25px;
		color: white;
		font-weight: bold;
	}

	td.Orangered
	{
		background:	#FF7441;
		padding: 25px;
                color: white;
                font-weight: bold;
	}


	td.Tan
	{
		background:#855e38;
		padding: 25px;
                color: white;
                font-weight: bold;
	}
        td.TanBorder
        {
            border: 3px solid #855e38;
        }

	td.Orange
	{
		background: #b55d08;
		padding: 25px;
                color: white;
                font-weight: bold;
	}
        td.OrangeBorder
        {
            border: 3px solid #b55d08;
        }

	td.Carrot
	{
		background:	#F2B263;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Copper
	{
		background:	#ECAC57;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Olive
	{
		background:	#C2C264;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Palegreen
	{
		background:	#82B482;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Cobaltgreen
	{
		background: #3c6a3d;
		padding: 25px;
                color: white;
                font-weight: bold;
	}
        td.CobaltgreenBorder
        {
            border: 3px solid #3c6a3d;
        }

	td.Turquoise
	{
		background:	#93B0B0;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Lightblue
	{
		background:	#9AC0CD;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Cobalt
	{
		background:	#7088CC;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Midnightblue
	{
		background:	#A4A4C9;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Mediumblue
	{
		background:	#6F6FDC;
		padding: 25px;
                color: white;
                font-weight: bold;
	}

	td.Mediumpurple
	{
		background:	#AB94DC;
		padding: 25px;
                color: white;
                font-weight: bold;
	}


	td.IncomeHeading
	{
		font-weight: bold;
		background: #9999FF;
		border-top: 1px solid #CCCCCC;
	}

	td.Income
	{
		font-weight: bold;
		background: #9999FF;
	}

	td.bottomLine
	{
		border-bottom: 1px solid #CCCCCC;
	}


	td.currency
	{
            font-weight: bold;
            color: #404040;
	}

    .currency-big
    {
        display: block;
        font-weight: bold;
        font-size: 160%;
        color: #404040;
        padding: 5px;
    }
    
    .currency
    {
        display: block;
        font-weight: bold;
        color: #404040;
    }

	td.LoanHeading
	{
		font-weight: bold;
		background: #CC6666;
		border-top: 1px solid #CCCCCC;
	}

	table.dynTable
	{
		border-color: #CCCCCC;
	    border-width: 1px 1px 1px 1px;
	    border-style: solid;
		width: 100%;
	}


	tr.dynTable0
	{
		background: #EEEEEE;
	}

	tr.dynTable1
	{
		background: #FFFFFF;
	}

	th.dynTable
	{
		padding: 5px;
		font-size: 120%;
		wrap-option:wrap;
		text-align:	left;
	}

	td.dynTable
	{
		padding: 5px;
		wrap-option:wrap;
		text-align: left;
	}

	table.RetirementCalcAdsense
	{
		background: #8FA880;
		border-top: 1px solid #C0D9AF;
		border-left: 1px solid #C0D9AF;
		border-bottom: 1px solid #687E5A;
		border-right: 1px solid #687E5A;
	}

	th.RetirementCalcAdsense
	{
		font-size: 120%;
		font-weight: bold;
		color: #FFFFFF;
	}

	td.RetirementCalcAdsense
	{
		border-top: 1px solid #687E5A;
		border-left: 1px solid #687E5A;
		border-bottom: 1px solid #C0D9AF;
		border-right: 1px solid #C0D9AF;
	}


	td.Amount
	{
		font-weight: bold;
		color: green;
		text-align: right;
	}

	/* show a new feature/promotion in this bright cell */
	td.PromoteNewFeature
	{
		padding: 25px;
		background:	#fff001;
		border: 2px dashed #0c460c;
	}

	.PopupTip
	{
		background-color: #2F4F4F;
		font-weight: bold;
		color: #FFFFFF;
		border: 1px solid #C0D9D9;
		width: 200px;
		height: 200px;
		padding: 10px;
		position: fixed;
		left: 50%;
		top: 50%;
		overflow: auto;
		margin-top: -100px;
		margin-left: -100px;
	}

    /* Style to show a div element floating in the center of the page */
    .DivInCenter
    {
        background-color: #FFFFFF;
/*        color: #FFFFFF;*/
        border: 1px solid #C0D9D9;
        width: 600px;
/*        height: 400px;*/
        padding: 10px;
        position: fixed;
        left: 50%;
        top: 20%;
        overflow: auto;
        margin-top: -100px;
        margin-left: -300px;
        z-index: 10000;
    }


    /* Style for popup that explains some term on the page */
    .WhatIsPopup
    {
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0px 0px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 20%);
        font-weight:normal;
        width: auto;
        padding: 10px;
        position: fixed;
        left: 50%;
        top: 50%;
        overflow: auto;
        text-align: left;
        z-index: 10100;
    }

    .heading
    {
        padding: 5px 0 5px 0;
        font-weight: bold;
    }

    .body
    {
        padding: 5px;
    }

/* Style for popup that talks about Verification Phrase */
.WhatIsVerificationPhrasePopupTip
{
    background-color: #FFFFFF;
    border: 1px solid #C0D9D9;
		border-radius: 10px;
		box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    width: inherit;
    padding: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    overflow: auto;
    margin-top: -150px;
    margin-left: -200px;
}

/* Style for popup that talks about Verification Phrase */
.WhatIsPopupInBudget
{
    background-color: #2F4F4F;
    color: #FFFFFF;
    border: 1px solid #C0D9D9;
    width: 400px;
    height: 100px;
    padding: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    overflow: auto;
    margin-top: -50px;
    margin-left: -200px;
}

.WhatIsPopupInBudget200
{
    background-color: #2F4F4F;
    color: #FFFFFF;
    border: 1px solid #C0D9D9;
    width: 400px;
    height: 200px;
    padding: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    overflow: auto;
    margin-top: -50px;
    margin-left: -200px;
}
	/* Style for calculators */
	table.Calculator
	{
		border: 1px solid #CCCCCC;
		background: #eceaea;
	}

	.Calculator td
	{
		font-weight:bold;
		color: #404040;
	}

	.Calculator input
	{
		/*font-size:8pt;*/
	}

	td.Result
	{
		font-weight: bold;
		color: blue;
	}

	td.ResultGood
	{
		font-weight: bold;
                font-size: 110%;
		color: #0ff80a;
	}

	td.ResultBad
	{
		font-weight: bold;
		color: red;
	}


/* default style for input elements */
.button
{
    font-size: 8pt;
}

.button_icon_only
{
    padding: .5em 1em;
    cursor: pointer;
}

.button_form
{
    min-width: 24px;
    padding: .5em 1em;
    background-color: #D0D0D0;
    color: #606060;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 100%;
    cursor: pointer;
}
.button_form:hover, .button_form:focus {
    background-color: #DCDCDC;
    border: 1px solid #A9A9A9;
}

.button_navbar
{
    background-color: #000000 !important;
    color: #CCCCCC;
    border: 1px solid #000000;
}
.button_navbar:hover, .button_navbar:focus
{
    background-color: #000000 !important;
    color: #32CD32 ;
    border: 1px solid #32CD32;
}

.button_primary
{
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #FFFFFF;
}
.button_primary:hover, .button_primary:focus
{
    background-color: #449d44;
    border-color: #398439;
    color: #FFFFFF;
}

.button_primary2
{
    background-color: inherit;
    border: 1px solid #4cae4c;
    color: #FFFFFF;
}
.button_primary2:hover, .button_primary2:focus
{
    background-color: inherit;
    border: 1px solid #398439;
    color: #FFFFFF;
}

.button_disabled
{
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}
.button_disabled:hover, .button_disabled:focus
{
    background-color: #d3d3d3;
    border-color: #d3d3d3;
    cursor: default;
}

.button-secondary
{
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #FFFFFF;
}
.button-secondary:hover, .button-secondary:focus
{
    background-color: #286090;
    border-color: #204d74;
    color: #FFFFFF;
}

.button-warning
{
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #FFFFFF;
}
.button-warning:hover, .button-warning:focus {
    background-color: #ec971f;
    border-color: #985f0d;
}

.button_error
{
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #FFFFFF;
}
.button_error:hover, .button_error:focus
{
    background-color: #c9302c;
    border-color: #ac2925;
}
.button_cancel {
    border: 1px solid #CCCCCC;
    background-color: transparent;
}
.button_cancel:hover, .button_cancel:focus {
    background-color: #DCDCDC;
    border: 1px solid #A9A9A9;
}

.button_mild {
    border: 1px solid transparent;
    background:rgba(0,0,0,0.1);
}
.button_mild:hover, .button_mild:focus {
/*    background-color: #DCDCDC;*/
    border: 1px solid #A9A9A9;
    background:rgba(0,0,0,0.2);
}

.button_action[disabled]
{
    border:1px solid #20222e; background-color: #3f425a;
}

.button_action
{
    border:1px solid #22285a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #4553b8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4553b8), color-stop(100%, #001df3));
    background-image: -webkit-linear-gradient(top, #4553b8, 001df3);
    background-image: -moz-linear-gradient(top, #4553b8, #001df3);
    background-image: -ms-linear-gradient(top, #4553b8, #001df3);
    background-image: -o-linear-gradient(top, #4553b8, #001df3);
    background-image: linear-gradient(top, #4553b8, #001df3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4553b8, endColorstr=#001df3);
}

.button_action:hover
{
    border:1px solid #22285a; background-color: #5768ea;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5768ea), color-stop(100%, #001df4));
    background-image: -webkit-linear-gradient(top, #5768ea, #001df4);
    background-image: -moz-linear-gradient(top, #5768ea, #001df4);
    background-image: -ms-linear-gradient(top, #5768ea, #001df4);
    background-image: -o-linear-gradient(top, #5768ea, #001df4);
    background-image: linear-gradient(top, #5768ea, #001df4);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5768ea, endColorstr=#001df4);
}

.button_positive[disabled]
{
    border:1px solid #224b09; background-color: #36780f;
}

.button_positive
{
    border:1px solid #34740e; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #4ba614;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ba614), color-stop(100%, #008c00));
    background-image: -webkit-linear-gradient(top, #4ba614, #008c00);
    background-image: -moz-linear-gradient(top, #4ba614, #008c00);
    background-image: -ms-linear-gradient(top, #4ba614, #008c00);
    background-image: -o-linear-gradient(top, #4ba614, #008c00);
    background-image: linear-gradient(top, #4ba614, #008c00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#008c00);
}

.button_positive:hover
{
    border:1px solid #224b09; background-color: #36780f;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
    background-image: -webkit-linear-gradient(top, #36780f, #005900);
    background-image: -moz-linear-gradient(top, #36780f, #005900);
    background-image: -ms-linear-gradient(top, #36780f, #005900);
    background-image: -o-linear-gradient(top, #36780f, #005900);
    background-image: linear-gradient(top, #36780f, #005900);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
}

.button_negative
{
    border:1px solid #72021c; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a90329;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(100%, #6d0019));
    background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
    background-image: -moz-linear-gradient(top, #a90329, #6d0019);
    background-image: -ms-linear-gradient(top, #a90329, #6d0019);
    background-image: -o-linear-gradient(top, #a90329, #6d0019);
    background-image: linear-gradient(top, #a90329, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a90329, endColorstr=#6d0019);
}

.button_negative:hover
{
    border:1px solid #450111; background-color: #77021d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77021d), color-stop(100%, #3a000d));
    background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
    background-image: -moz-linear-gradient(top, #77021d, #3a000d);
    background-image: -ms-linear-gradient(top, #77021d, #3a000d);
    background-image: -o-linear-gradient(top, #77021d, #3a000d);
    background-image: linear-gradient(top, #77021d, #3a000d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}

.button_negative:disabled
{
    border:1px solid #CCCCCC; background-color: #CCCCCC;
    text-shadow: none; color: #a9a9a9;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%, #CCCCCC));
    background-image: -webkit-linear-gradient(top, #CCCCCC, #CCCCCC);
    background-image: -moz-linear-gradient(top, #CCCCCC, #CCCCCC);
    background-image: -ms-linear-gradient(top, #CCCCCC, #CCCCCC);
    background-image: -o-linear-gradient(top, #CCCCCC, #CCCCCC);
    background-image: linear-gradient(top, #CCCCCC, #CCCCCC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CCCCCC, endColorstr=#CCCCCC);
}

.button_neutral
{
    border:1px solid #b7b7b7; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #d3d3d3;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #707070));
    background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
    background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
    background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
    background-image: -o-linear-gradient(top, #d3d3d3, #707070);
    background-image: linear-gradient(top, #d3d3d3, #707070);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070);
}

.button_neutral:hover
{
    border:1px solid #a0a0a0; background-color: #bababa;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%, #575757));
    background-image: -webkit-linear-gradient(top, #bababa, #575757);
    background-image: -moz-linear-gradient(top, #bababa, #575757);
    background-image: -ms-linear-gradient(top, #bababa, #575757);
    background-image: -o-linear-gradient(top, #bababa, #575757);
    background-image: linear-gradient(top, #bababa, #575757);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#bababa, endColorstr=#575757);
}

.button_warning
{
    border:1px solid #a6a001; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #e7e020;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e7e020), color-stop(100%, #b8b219));
    background-image: -webkit-linear-gradient(top, #e7e020, #b8b219);
    background-image: -moz-linear-gradient(top, #e7e020, #b8b219);
    background-image: -ms-linear-gradient(top, #e7e020, #b8b219);
    background-image: -o-linear-gradient(top, #e7e020, #b8b219);
    background-image: linear-gradient(top, #e7e020, #b8b219);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e7e020, endColorstr=#b8b219);
}

.button_warning:hover
{
    border:1px solid #6f6b02; background-color: #b7b225;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7b225), color-stop(100%, #7e7b1c));
    background-image: -webkit-linear-gradient(top, #b7b225, #7e7b1c);
    background-image: -moz-linear-gradient(top, #b7b225, #7e7b1c);
    background-image: -ms-linear-gradient(top, #b7b225, #7e7b1c);
    background-image: -o-linear-gradient(top, #b7b225, #7e7b1c);
    background-image: linear-gradient(top, #b7b225, #7e7b1c);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#b7b225, endColorstr=#7e7b1c);
}

div.imageWithDeleteBtn{
    position: relative;
    margin: 10px;
}

.button_deleteImage
{
    position: absolute;
    width:20px;
    height: 20px;
    text-indent: -9999px;
    cursor: pointer;
    top: 5px;
    right: 5px;
    background-image:url('../images/delete_0.gif');
}

.button_deleteImage:hover
{
    position: absolute;
    width:20px;
    height: 20px;
    text-indent: -9999px;
    cursor: pointer;
    top: 5px;
    right: 5px;
    background-image:url('../images/delete_1.gif');
}

.input_invisible
{
    display: none;
}


.InputAmount
{
    font-size: 8pt;
    text-align: right;
    /*min-width: 100%;
    max-width: 100%;*/
}

	.input-text-100
	{
		border: 1px solid #b2c2cd;
		border-radius: 5px;
    overflow: visible;
    padding: 6px 0.25em;
    width: 100%;
	}

	.input-required
	{
	    border: 1px solid #ab0404;
	}

	.input-text-50
	{
	    overflow: visible;
	    padding: 6px 0.25em;
	    width: 50%;
	}

	.input-button-100
	{
	    padding: 6px;
	    width: 100%;
	    font-weight:bold;
	}


        .input-button-50
        {
            padding: 6px;
            width: 50%;
            font-weight:bold;
        }


        .input-text-underline
        {
            background: transparent;
            padding: 5px;
            width: 95%;
            border:none;
            border-bottom: 2px solid #C0C0C0;
        }
        .input-text-underline-required
        {
            border-bottom: 2px solid #ab0404;
        }
        .input-text-underline:focus
        {
            outline: none;
            border:none;
            border-bottom: 2px solid #000000;
        }


	/* style for textarea */
	textarea.default
	{
		width:100%;
		height:15em;
		color: black;
	}

	/* style for tables that glow on hover, */
	/* used in tables that can be clicked   */
	/* and this leads to more info              */
	table.MoreInfo
	{
		border: 1px solid #CCCCCC;
	}

	table.MoreInfoHover
	{
		border: 1px solid blue;
	}


	table.FileUploadForm
	{
		border: 1px solid #778899;
		background: #FFFFFF;
	}

	th.FileUploadForm
	{
		background: #9FB6CD;
		color: #404040;
		font-weight: bold;
		font-size: 110%;
		padding: 1.0ex;
		border-bottom: 1px solid #778899;
	}


input[id="uploadCompanyLogoFile"] {
    display: none;
}
.custom-file-upload {
    /* border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer; */

    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.custom-file-upload i {
    margin-right: 8px;
}
.custom-file-upload:hover {
    background-color: #0056b3;
}


/* Used to show some results, style designed to draw attention */
.msgBlockSubtle
{
    padding: 5px;
    background: #E0E0E0;
    border: 1px solid #CCCCCC;
    display: inline-block;
}
	div.GreenBackgroundBigBoldText
	{
		background: #05c105;
		border: 1px solid #028c02;
		color: #ffffff;
		padding: 0.5em;
		font-weight: bold;
		font-size: 120%;
	}

.divMildGreenBackground
{
/*    background-color: #70DB93;*/
    display:inline-block;
    font-weight: bold;
    color: #0e5307;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #cdffc8;
    border: 1px solid #0e5307;
    text-align: left;
}

	div.RedBackgroundBigBoldText
	{
		background: #cf0505;
		border: 1px solid #940303;
		color: #ffffff;
		padding: 0.5em;
		font-weight: bold;
		font-size: 120%;
	}

.divMildRedBackground
{
/*    background-color: #F08080;*/
    display:inline-block;


    font-weight: bold;
    color: #80160b;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #f2dede;
    border: 1px solid #80160b;
    text-align: left;
}

	/* styles for div elements that are not shown or hidden */
	div.invisibleDiv
	{
		display: none;
		visibility: hidden;
	}

        div.visibleDiv
        {
            display: block;
            visibility: show;
        }

        /** Since you can't just name these classes 0 and 1, they have a showOrHide prefix */
        div.showOrHide0
        {
            visibility:hidden;
        }
        div.showOrHide1
        {
            visibility:show;
        }

	div.floatingDiv
	{
            display: block;
            visibility: visible;
            position: absolute;
            padding: 10px;
            background-color: #EEEEEE;
            overflow: auto;
            border: 1px solid #C0D9D9;
            z-index: 99999;
            box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
	}


	div.textBigBold
	{
		font-size: 120%;
		font-weight: bold;
	}

	div.textMediumBold
	{
		font-size: 110%;
		font-weight: bold;
	}

	/* Dashboard style */
	div.dashboardTopBar
	{
		border-left: 1px solid #000000;
		border-top: 1px solid #000000;
		border-right: 1px solid #000000;
		background-color: #2f2f2f;
	}
	table.dashboardBody
	{
		background-color: #002311;
	}
	div.dashboardBottomBar
	{
		border-left: 1px solid #000000;
		border-bottom: 1px solid #000000;
		border-right: 1px solid #000000;
		background-color: #2f2f2f;
		-moz-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
	}

    .dashboard_slide_btn
    {
        width: 20px;
        height: 20px;
        background-image: url('/images/expand_collapse_0.png');
        background-repeat: no-repeat;
    }
    .dashboard_slide_btn:hover
    {
        width: 20px;
        height: 20px;
        background-image: url('/images/expand_collapse_1.png');
        background-repeat: no-repeat;
    }
    
    .divCell {
        display: grid;
    }
    .divLeft
    {
	float: left;
        margin: 5px;
    }

    .divRight
    {
	float: right;
        margin: 5px;
    }

    .divCenter
    {
	margin:0 auto;
    }

    .divOneFifth
    {
        width: 18%;
    }

    .divQuarter
    {
        width: 24%;
    }
    
    .divThreeFourth {
        width: 70%;
    }

    .divOneThird
    {
        width: 30%;
    }
    
    .divOneThird-2
    {
        width: 28%;
    }

    .divHalf
    {
        width: 46%;
    }

    .divHalf2 {
        width: 50%;
    }

    .divTwoThird
    {
        width: 66%;
    }

    .divAlmostFullWidth
    {
        width: 96%;
    }
    .divAlmostFullWidth-complement
    {
        width: 4%;
    }

    .divWidth90
    {
        width: 90%;
    }

    .divSpacing10
    {
        margin: 10px;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
    }

    .divWithBorder
    {
        border: 1px solid #CCCCCC;
        padding: 10px;
    }

    .divContent {
        background: #FFFFFF;
    }

    .divContentLeftAlign
    {
        text-align: left !important;
    }
    .divContentRightAlign
    {
        text-align: right !important;
    }

    .divContentCenterAlign
    {
        text-align: center !important;
    }

    .divContentBottom
    {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .divBold
    {
        font-weight: bold;
    }

    .divStickyNote
    {
/*        border: 1px solid #CCCCCC;*/
        background-color: #ffc !important;
        margin: 0.5em;
        padding: 0.5em;
        font-size: 120%;
        text-align: center;
    }


.divContainer
{
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #333333;
    font-size: 120%;
    font-weight: bold;
    text-align: left;
    padding: 0.5em;
}

.divContainer2
{
	display: flow-root;
}

.divContainer80
{
    width: 80%;
    display: inline-block;
}

.divContainerCompact
{
	display: inline-block;
	margin: 5px;
	padding: 5px;
	border-radius: 10px;
  border: 1px solid #CCCCCC;
}

.container-responsive {
    display: inline-flex;
    flex-wrap:wrap;
    margin: 1em 0 1em 0;
    align-items: center;
    justify-content: center;
}
.row-or-column {
    flex-direction: row;
}

.divContainerPicture
{
    margin: 30px auto 0;
    border: 1px solid #CCCCCC;
    padding: 10px;
}

.picture-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.article-image {
	width: 800px !important;
}

    .headingContainer {
        text-align: center;
        padding-top: 25px;
    }

    .divTextContent {
        margin: 10px;
        background-color: #FFFFFF;
        border: 1px solid #DDDDDD;
        padding: 10px;
        color: #333333;
        font-weight: normal;
        text-align: left;
    }

    .div-margin {
        margin: 0.5em !important;
    }
    .div-nomargin {
        margin: 0px !important;
    }

    .div-header {
        padding: 5px 0 10px 0;
        color: #404040;
        font-weight: bold;
        text-align: left;
    }

    .divRow
    {
        position: relative;
        display: flex;
        margin: 10px;
    }

    .divRow-2
    {
        display: inline-flex;
    }
    
    .divRow-3
    {
        display: inline-flex;
    }

    .divRow-4
    {
        display: inline;
    }

    .divInRow
    {
        display: inline-block;
        margin: 0.5em;
    }

    .divInRow-2 {
        display: inline;
    }
    
    .divHideInMobile {
        display: inline-block;
    }

    .divListItem-top
    {
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        padding: 10px;
    }

    .divListItem
    {
        border-bottom: 1px solid #CCCCCC;
        padding: 10px;
    }

    .divTop
    {
        vertical-align: top;
        padding: 10px;
    }

    .divCalculator {
        border: 1px solid #CCCCCC;
        background-color: #F0F0F0;
        color: #333333;
        padding: 10px;
    }

    .divCalculatorRow {
        padding: 10px;
    }

    .divCalculator-blurb {
        margin: 1em;
        display: block;
        background-color: #ffff88;
        color: #333333;
        padding: 10px;
        text-align: left;
    }

    .divGetStartedTips
    {
        background-color: #105952;
        color: #FFFFFF;
        width: 200px;
        height: 200px;
        font-size: 120%;
        border: 10px solid #EEEEEE;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

        .DashboardIncome
        {
            background: #285838;
            border: 1px solid #00FF00;
            color: #FFFFFF;
            font-weight: bold;
            padding: 0.2em;
        }

        .DashboardExpense
	{
            background: #742c2c;
            border: 1px solid #FF0000;
            color: #FFFFFF;
            font-weight: bold;
            padding: 0.2em;
	}

        th.BalanceNegative
        {
            background: #7e0101;
            border: 1px solid #ff0000;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 90%;
            padding: 1.0ex;
        }

        th.BalancePositive
        {
            background: #063a06;
            border: 1px solid #00FF00;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 90%;
            padding: 1.0ex;
        }

	/* this div along with one of the divs below gives the shadow effect */
	div.messageShadow
	{
/*		background: #e5e3e3;
		padding: 0.5em;*/
		margin: 1em;
	}

	div.messageOdd
	{
		background: #cefdce;
/*		border: 1px solid #859f85;*/
		margin: -1em 0 0 -1em;
	}

	div.messageEven
	{
		background: #ecf8ec;
/*		border: 1px solid #859f85;*/
		margin: -1em 0 0 -1em;
	}
        
        .messageMetaTop {
            border-bottom: 1px solid #7D7E81;
            color: #7D7E81;
        }


	/* end divs for shadow effect */

	td.toolbar
	{
		background-color: #575757;
		padding: 10px;
	}


	.PremiumAccount
	{
		background: #2e4b32;
		border-top: 1px solid #00b51a;
		border-left: 1px solid #00b51a;
		border-right: 1px solid #000000;
		border-bottom: 1px solid #000000;
		color: #FFFFFF;
	}

	.PremiumAccount th
	{
		font-weight: bold;
		font-size: 120%;
		color: #FFFFFF;
	}

	.PremiumAccount2
	{
		background: #18271a;
		color: #FFFFFF;
	}

/* Style for the element that shows progress messages for a user action */
/* This element is displayed at the top (or some where near) the form that initiates the action */
.ProgressMessageBlock
{
    margin: 10px;
    padding: 10px;
    background: #FFF1A8;
    border: 1px solid #ffdd1e;
    text-align: center;
    color: black;
}

.EmptyBlock
{
    border: 1px solid #CCCCCC;
    padding: 5px;
}

.WarningBlock
{
    background: #cf8316;
    border: 1px solid #f69b18;
    color: #ffffff;
    margin: 10px;
    padding: 10px;
}

.SuccessfulMessage
{
/*    font-weight: bold;*/
    color: #0e5307;
}

.SuccessfulMessagePanel
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #cdffc8;
/*    border: 1px solid #0e5307;*/
    text-align: left;
}

.ToastPanel {
    position: fixed;
    left: 0%;
    bottom: 0%;
    width: 95%;
    min-height: 2em;
    text-align: center !important;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.75);
    z-index: 100000;
}

.ErrorText
{
/*    font-weight: bold;*/
    color: #80160b;
}

.ErrorMessagePanel
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #f2dede;
/*    border: 1px solid #80160b;*/
    text-align: left;
}

.AlertText
{
    font-weight: bold;
    color: #a94442;
}

.NeutralMessage
{
    font-weight: bold;
    color: #808080;
}

.StrikeThrough
{
    text-decoration: line-through;
}

.DataTable
{
    border: 1px solid #dddddd;
    background-color: #FFFFFF;
    border-collapse: collapse;
}

.DataTable th
{
    background-color: #eeeeee;
    border-bottom: 1px solid #dddddd;
    font-weight: normal;
    color: #404040;
    text-transform: uppercase;
    text-align: left;
    padding: 10px;
}

.DataTable td
{
    color: #404040;
    padding: 10px;
/*    text-align: left;*/
}

.DataTable table {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

.table-justenoughwidth {
    width: auto !important;
}

.DataTable-Responsive
{
    width: 100%; 
    border-collapse: collapse;
    border: 1px solid #ccc; 
}

.DataTable-Responsive th
{    
    background: #999; 
    color: white; 
    font-weight: bold; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ccc; 
    text-align: left; 
}

.DataTable-Responsive tr:nth-of-type(odd) 
{ 
    background: #eee; 
}

.DataTable-Responsive td
{
    padding: 6px; 
    /* border: 1px solid #ccc;  */
    text-align: left; 
}

.DataTable-Responsive table {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

.table-nocolor {
    border: none !important;
}

.table-nocolor tr { 
    background: #ffffff !important;
    border: none !important;
}

.table-nocolor td {
    border: none !important;
}


td.CalendarDay {
    height: 100px;
    width: 14%;
}

.CalendarDayLabel {
    font-size: 80%;
}


.IncomeTable
{
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.IncomeTable th
{
    background: #d3d3ff;
    color: #404040;
    font-weight: bold;
}

.IncomeTable td
{
    color: #404040;
}


.ExpenseTable
{
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.ExpenseTable th
{
    background: #c4ffc4;
    color: #404040;
    font-weight: bold;
}

.ExpenseTable td
{
    color: #404040;
}

.hintText {
    opacity: 0.7;
}
.hintText:hover {
    opacity: 1.0;
}

.Help
{
    color: #404040;
    text-align: left;
    font-weight: normal;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 10px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
}

.Help th
{
    color: #404040;
    font-size: 1em;
    font-weight: bold;
    font-family: Helvetica, Georgia, Serif;
    padding: 1.0ex;
}

.Help td
{
    background-color: #FFFFFF;
    padding: 1.0ex;
    font-size: 1em;
    font-weight: normal;
    font-family: Helvetica, Georgia, Serif;
}

.feedback
{
    height: 24px;
    width: 160px;
    padding: 0.2em 0.2em 0.2em 0.5em;
    background-color: #E04006;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 600;
}


/* Style for tables with forms */
.FormTable
{
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.FormTable th
{
    background-color: #494747;
    font-weight: bold;
    color: #FFFFFF;
}

.FormTable td
{
    font-weight: bold;
    color: #404040;
}

.CompanyInfoFormTable
{
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.CompanyInfoFormTable th
{
    background-color: #014437;
    font-weight: bold;
    color: #FFFFFF;
}

.CompanyInfoFormTable td
{
    font-weight: bold;
    color: #404040;
}

.Form-BigFields input, .password-field
{
    line-height: 40px;
    font-size: 30px;
}

.Form-BigFields label
{
    display: inline;
    font-size: 20px;
    color: #404040;
    letter-spacing: -1px;
    font-weight: bold;
}

.Form-BigFields select
{
    line-height: 40px;
    font-size: 30px;
    color: #404040;
    letter-spacing: -1px;
    font-weight: bold;
}

.Form-BigFields button
{
    line-height: 40px;
    font-size: 30px;
    color: #404040;
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
}


.Form-MediumFields input, .password-field
{
    line-height: 30px;
    font-size: 20px;
}

.Form-MediumFields label
{
    display: inline;
    font-size: 20px;
    color: #404040;
    letter-spacing: -1px;
    font-weight: bold;
}

.Form-MediumFields select
{
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #404040;
    letter-spacing: -1px;
    font-weight: bold;
}

.Form-MediumFields button
{
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
}

.FormField-Compact label
{
    display: block;
    letter-spacing: -1px;
}

/****************************************************************************/
.label-form-field{
  display:block;
  height:60px;
  overflow:auto;
  position:relative;
}
.input-form-field{
  position:absolute;
  top:20px;
}
.input-form-field ~ .span-form-field{
 transition:top 1s ease;
 position:absolute;
 top:20px;
 color: #CCCCCC;
}
.input-form-field:focus ~ .span-form-field{
 top:0px;
 color: #333333;
}

.input-with-unit-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}
.input-with-unit-hint span {
    color: #555;
}
/****************************************************************************/

#reminder_icon
{
    background-image: url('images/reminder_icon_0.png');
    height: 60px;
    width: 60px;
}

#reminder_icon:hover
{
    background-image: url('images/reminder_icon.png');
    height: 60px;
    width: 60px;
}

#reminder_icon_dark
{
    background-image: url('images/reminder_icon_dark.png');
    height: 60px;
    width: 60px;
}

#report_icon
{
    background-image: url('images/report_icon_0.png');
    height: 60px;
    width: 60px;
}

#report_icon:hover
{
    background-image: url('images/report_icon.png');
    height: 60px;
    width: 60px;
}

#report_icon_dark
{
    background-image: url('images/report_icon_dark.png');
    height: 60px;
    width: 60px;
}

#expense_icon
{
    background-image: url('images/expense_icon_0.png');
    height: 60px;
    width: 60px;
}

#expense_icon:hover
{
    background-image: url('images/expense_icon.png');
    height: 60px;
    width: 60px;
}

#expense_icon_dark
{
    background-image: url('images/expense_icon_dark.png');
    height: 60px;
    width: 60px;
}

#budget_icon
{
    background-image: url('images/budget_icon_0.png');
    height: 60px;
    width: 60px;
}

#budget_icon:hover
{
    background-image: url('images/budget_icon.png');
    height: 60px;
    width: 60px;
}

#budget_icon_dark
{
    background-image: url('images/budget_icon_dark.png');
    height: 60px;
    width: 60px;
}

#invoice_icon
{
    background-image: url('images/invoice_icon_0.png');
    height: 60px;
    width: 60px;
}

#invoice_icon:hover
{
    background-image: url('images/invoice_icon.png');
    height: 60px;
    width: 60px;
}

#invoice_icon_dark
{
    background-image: url('images/invoice_icon_dark.png');
    height: 60px;
    width: 60px;
}

#income_icon
{
    background-image: url('images/income_icon_0.png');
    height: 60px;
    width: 60px;
}

#income_icon:hover
{
    background-image: url('images/income_icon.png');
    height: 60px;
    width: 60px;
}

#income_icon_dark
{
    background-image: url('images/income_icon_dark.png');
    height: 60px;
    width: 60px;
}

#mobile_icon
{
    background-image: url('images/mobile_icon_0.png');
    height: 60px;
    width: 60px;
}

#mobile_icon:hover
{
    background-image: url('images/mobile_icon.png');
    height: 60px;
    width: 60px;
}

#mobile_icon_dark
{
    background-image: url('images/mobile_icon_dark.png');
    height: 60px;
    width: 60px;
}

#shared_expense_icon
{
    background-image: url('images/shared_expense_icon_0.png');
    height: 60px;
    width: 60px;
}

#shared_expense_icon:hover
{
    background-image: url('images/shared_expense_icon.png');
    height: 60px;
    width: 60px;
}

#shared_expense_icon_dark
{
    background-image: url('images/shared_expense_icon_dark.png');
    height: 60px;
    width: 60px;
}


#collaborate_icon
{
    background-image: url('images/collaborate_icon_0.png');
    height: 60px;
    width: 60px;
}

#collaborate_icon:hover
{
    background-image: url('images/collaborate_icon.png');
    height: 60px;
    width: 60px;
}

#collaborate_icon_dark
{
    background-image: url('images/collaborate_icon_dark.png');
    height: 60px;
    width: 60px;
}

.icon_positive {
    color: #238e39;
}
.icon_negative {
    color: #c1180f;
}
.icon_blue {
    color: #20B2AA;
}

.icon_medium {
    height: 160px;
    width: 160px;
    display: inline-block;
}

.collaborate_icon_medium {
    background-image: url('images/collaborate_160.png');
}

.mileage_tracking_icon_medium
{
    background-image: url('images/mileageTracking_160.png');
}

.invoice_icon_medium {
    background-image: url('images/invoice_160.png');
}

.report_icon_medium {
    background-image: url('images/report_160.png');
}

.report2_icon_medium {
    background-image: url('images/report2_160.png');
}

.mobile_icon_medium {
    background-image: url('images/mobile_160.png');
}

.payment_icon_medium {
    background-image: url('images/payment_160.png');
}

.budget_expense_income_icon_medium {
    background-image: url('images/budget_expense_income_160.png');
}

.action_button_list
{
    background-image: url('images/list_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_list:hover
{
    background-image: url('images/list_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_list_less
{
    background-image: url('images/list_less_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_list_less:hover
{
    background-image: url('images/list_less_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_list_multiple
{
    background-image: url('images/list_multiple_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_list_multiple:hover
{
    background-image: url('images/list_multiple_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_list_custom
{
    background-image: url('images/list_custom_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_list_custom:hover
{
    background-image: url('images/list_custom_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_new
{
    background-image: url('images/new_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_new:hover
{
    background-image: url('images/new_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_new_child
{
    background-image: url('images/new_child_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_new_child:hover
{
    background-image: url('images/new_child_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_new_multiple
{
    background-image: url('images/new_multiple_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_new_multiple:hover
{
    background-image: url('images/new_multiple_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_import
{
    background-image: url('images/import_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_import:hover
{
    background-image: url('images/import_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_import_2
{
    background-image: url('images/import_2_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_import_2:hover
{
    background-image: url('images/import_2_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_export
{
    background-image: url('images/export_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_export:hover
{
    background-image: url('images/export_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_print
{
    background-image: url('images/print_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_print:hover
{
    background-image: url('images/print_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_category
{
    background-image: url('images/category_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_category:hover
{
    background-image: url('images/category_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_category_list
{
    background-image: url('images/category_list_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_category_list:hover
{
    background-image: url('images/category_list_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_help
{
    background-image: url('images/help_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_help:hover
{
    background-image: url('images/help_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_calendar
{
    background-image: url('images/calendar_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_calendar:hover
{
    background-image: url('images/calendar_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_pay
{
    background-image: url('images/pay_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_pay:hover
{
    background-image: url('images/pay_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_settings
{
    background-image: url('images/settings_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_settings:hover
{
    background-image: url('images/settings_icon_30.png');
    cursor: pointer; cursor: hand;
}

.action_button_transfer
{
    background-image: url('images/transfer_icon_30_0.png');
    background-repeat: no-repeat;
    padding: 5px;
    width:30px;
    height: 30px;
}

.action_button_transfer:hover
{
    background-image: url('images/transfer_icon_30.png');
    cursor: pointer; cursor: hand;
}

/** Navbar style */
.navbar-dropdownBtn {
    display: none;
}
.navbarDropDownMenuClass {
    display: block;
    visibility: show;
}

.navbarMenuItem {
    position: relative;
    margin: 10px;
    float: left;
}
.navbarMenuItem a {
	padding: 3px 12px;
	text-decoration: none;
	color: #F8F8F8;
        font-weight: bold;
	line-height: 100%;
}
.navbarMenuItem a:hover {
	color: #FFFFFF;
}

.navContainer-parent {
    display: flex;
		background-color: #000000;
}
.navContainer {
    position:relative;
    left:0;
    right:0;
    padding: 5px;
    background-color: #000000;
}

.menu {
    top: 86px;
    left: 0;
    width: 280px;
    color: #ffffff;
    z-index: 100;
}
.menu a {
    color: #000000;
    text-decoration: none;
}
.menu-min {
    width: 50px !important;
}

.menu-item {
    margin: 0.5em !important;
    font-size: 120%;
    color: #000000;
    text-align: left;
}
.menu-item .icon {
    display: inline-block;
    margin: 5px;
    width: 25px;
    text-align: center;
}
.menu-item .name {
    display: inline-block;
}
.menu-item .nameless {
    display: none;
}

.msg-bar {
    margin: 0.5em !important;
    text-align: left;
}
.msg-bar .icon {
    display: inline-block;
    margin: 5px;
    width: 25px;
    text-align: center;
}
.msg-bar .msg {
    display: inline-block;
}

.amount-bar {
    margin: 0.5em !important;
    text-align: left;
    display: flex;
}
.amount-bar .currency-icon {
    display: inline-block;
    text-align: center;
    padding-right: 0.3em;
}
.amount-bar .amount-value {
    display: inline-block;
}


.card {
    background: #FFFFFF;
    margin-bottom: 1em;
    padding: 10px;
    box-shadow: 0 0 0 2px #eee;
    /* box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); */
}
.card-transparent {
    margin-bottom: 1em;
    padding: 10px;
    box-shadow: 0 0 0 2px #eee;
    /* box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); */
}
.card-compact {
    padding: 0 !important;
}
.card-nomargin {
    margin: 0 !important;
}

.card-aboutus {
	width: 80%;
	display: inline-block;
}
.card-60 {
    width: 60%;
    display: inline-block;
}
.card-primary {
    border: 1px solid #0b6cd9;
}

.card-noborder {
    box-shadow: none !important;
}

.card h3, h4 {
    text-align: left;
}

.margin-none {
    margin: 0 !important;
}

.border-top {
    border-top: 1px solid #CCCCCC;
}

.box {
    box-sizing: border-box;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    border: 1px solid #999999;
}
.boxWidth80 {
    width: 80%;
}
.box-just-enough {
    display: inline-block;
    width: unset;
}
.box-scale {
    width: unset;
}
.box-light {
    border: 1px solid #CCCCCC;
}
.box-error {
    border: 1px solid #d43f3a;
}
.box-noborder {
    border: none;
}
.box-section {
    border: none;
    border-bottom: 1px solid #999999;
}
.box-positive {
    border: 1px solid #238e39 !important;
}

.box-compact {
    margin: 0;
}
.box-light-background {
    background: #f5f5f7;
}
.box-bottom-border {
    border-top: none;
    border-right: none;
    border-left: none;
}

.ribbon {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: none;
    background: #f5f5f7;
}
.ribbon-cell {
    display: inline-block;
    padding: 0.5em;
    text-align: center;
    /* font-size: 80%; */
    font-weight: normal;
/*    border-left: 1px solid #eeeeee;*/
    border-top: 1px solid #eeeeee;
/*    border-right: 1px solid #cccccc;*/
    border-bottom: 1px solid #eeeeee;
}
.ribbon-cell a {
    text-decoration:none;
    color:#404040;
}
.ribbon-cell a:hover {
    color:#0000FF;
}

.ribbon-cell-infocus {
    font-weight: bold;
}

.myaccount-container {
    position: relative;
    display: flex;
/*    margin: 10px;*/
}

.myaccount-container .navbar {
    display: inline-block;
    float: left;
    margin-right: 0.2em;
}

.myaccount-container .main-container {
    display: inline-block;
    float: right;
    width: 100%;
}

.grid-container  {
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.grid-container-1  {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cell {

}

.form {
	width: 80%;
	display: inline-block;
	padding: 1em;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
}

.btn {
	background: #FFFFFF;
	border: 1px solid #666666;
	border-radius: 2px;
	cursor: pointer;
        padding: 3px;
}

.btn:hover {
	-webkit-box-shadow: 0 0 5px #6495ED;
}

.ui-tooltip-content {
    text-align: left;
}

.ui-dialog-titlebar-close {
    right: 0.8em !important;
}

.form-field {
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}
.form-field input {
    border: none;
    border-bottom: 2px solid #CCCCCC;
    margin-bottom: 5px;
    padding: 10px 10px 0px 0px;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: all .3s linear;
    background: transparent;
    font-size: 120%;
}
.form-field input[type=checkbox] {
    min-width: 2%;
}

.form-field input:focus {
    border-bottom: 2px solid #0000FF;
    outline: 0;
}
.form-field label {
    font-size: 80%;
    opacity: 0.7;
    padding-bottom: 0.25em;
}
.form-field label span {
    font-size: 80%;
}
.form-field select {
    border: none;
    border-bottom: 2px solid #CCCCCC;
    margin-bottom: 5px;
    padding: 10px 10px 0px 0px;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: all .3s linear;
    font-size: 120%;
}
.form-field select:focus {
    border-bottom: 2px solid #0000FF;
    outline: 0;
}
.form-field select[multiple] {
    border: 2px solid #CCCCCC !important;
}


.form-field textarea {
    width: 100%;
    border: 2px solid #CCCCCC;
}
.form-field textarea:focus {
    border: 2px solid #0000FF;
    outline: 0;
}

.form-field-scale {
    display: inline-block;
}

.input-field {
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}

.input-field input {
    border: none;
    border-bottom: 2px solid #CCCCCC;
    margin-bottom: 5px;
    padding: 10px 10px 0px 0px;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: all .3s linear;
    background: transparent;
    font-size: 120%;
}

.input-field input:focus {
    border-bottom: 2px solid #0000FF;
    outline: 0;
}

.input-field label {
    position: absolute;
    top: calc(5% - 7px);
    left: 0;
    opacity: 0;
    transition: all .3s ease;
}

.input-field input:not(:placeholder-shown) {
    padding: 10px 10px 0px 0px;
}

.input-field input:not(:placeholder-shown) + label{
    transform: translateY(-10px);
    opacity: .7;
}

.input-field textarea:not(:placeholder-shown) {
    /* padding: 10px; */
}

.input-field textarea:not(:placeholder-shown) + label{
    transform: translateY(-15px);
    opacity: .7;
}

.ExpenseAccount {
/*    background: #edebeb;*/
    border: 1px solid #9d9b9b;
/*    -moz-border-radius: 5px;*/
}

.ExpenseAccountCheckingAccount {
/*    background: #ebf9f2;*/
    border: 1px solid #486b59;
}

.ExpenseAccountSavingsAccount {
/*    background: #edf1f7;*/
    border: 1px solid #47556a;
}

.ExpenseAccountCreditCardAccount {
/*    background: #f8f5ec;*/
    border: 1px solid #8c7a4e;
}

.ExpenseAccountCashAccount {
/*    background: #defbed;*/
    border: 1px solid #486b59;
}

.BarChart tr {
    background: none !important;
}

.barchart-container {
    box-sizing: border-box;
    width: 100%;
    margin: 1em 0 1em 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto; 
}

.barchart-cell {
    background: none !important;
    margin-top: auto;
    padding: 10px;
    display: inline-block;
    width: fit-content;
}

.barchart-bar {
    border: 1px solid #202124;
}

.barchart-bar-label {
    display: inline-block;    
}


.suggestions-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
}

.suggestions-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.popup-signup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-signup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

#google-signin-container {
    display: flex;
    justify-content: center;
}
.g_id_signin {
    width: 100%;
    max-width: 400px;
}


@media screen and (max-width: 600px) {

    .divContainer80 {
        width: 100%;
        display: inline-block;
    }

    .grid-container  {
        margin: 0 auto;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(1, 1fr);
    }

    .container-responsive .divTwoThird {
        width: 100%;
    }

    .row-or-column {
        flex-direction: column;
    }

    .card-aboutus {
        width: auto;
				display: block;
    }
    .card-60 {
        width: auto;
    }
    
    .box {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        padding: 0.5em;
    }
    .box-scale {
        display: inline-block;
        width: unset;
    }

    .boxWidth80 {
        width: auto;
    }

    .form {
        width: auto;
        display: block;
    }
    
    .form-field-scale {
        display: inline;
    }
    .form-field-media {
        display: block;
    }
    
    .form-field label {
        display: contents;
    }

    .form-field input {
        font-size: 100% !important;
    }
    
    .WhatIsPopup {
        width: auto;
    }

    .navbar-dropdownBtn {
            display: block;
    }
    .navbarDropDownMenuClass {
        display: none;
    }
    .navbarDropDownMenuClass-Show {
        display: block;
    }
    .navbarMenuItem {
        display: inline-block;
        width: 200px;
        margin: 10px;
        text-align: left;
    }
    .navContainer {
        position:relative;
        width: 100%;
        left:0;
        right:0;
        background-color: #000000;
    }
    
    div.floatingDiv {
        left: 0;
    }
    
    .divHideInMobile {
        display: none;
    }

    table.DarkGrayTable
    {
        border: 1px solid #CCCCCC;
        background-color: #3a3a3a;
        width: 100%;
    }

    .divRow {
        margin: 0;
    }

		.divRow-2
		{
			display: inline;
		}


    .divOneThird
    {
        width: 100%;
    }
    
    .divQuarter {
        width: 100%;
    }
    
    .divThreeFourth {
        width: 100%;
    }

    .divTextContent {
        margin: 0px;
        background-color: #FFFFFF;
        border: 1px solid #DDDDDD;
        padding: 2px;
        color: #333333;
        font-weight: normal;
        text-align: left;
    }
		.video-container{
		  position: relative;
		  width: 100%;
		  padding-bottom: 56.25%;
		  height: 0;
		}
		.video-container iframe{
		  position: absolute;
		  top:0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}

		.article-image {
			width: 100% !important;
		}
                
                
    /* Force table to not be like tables anymore */
    .DataTable-Responsive table, .DataTable-Responsive thead, .DataTable-Responsive tbody, .DataTable-Responsive td, .DataTable-Responsive tr { 
	display: block; 
    }
    
    .DataTable-Responsive th {
        display: none;
    }
	
    /* Hide table headers (but not display: none;, for accessibility) */
    .DataTable-Responsive thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
	
    .DataTable-Responsive tr { border: 1px solid #ccc; }
	
    .DataTable-Responsive td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ddd; 
        position: relative;
    }
	
    .DataTable-Responsive td:before {
        content: attr(data-label);
/*        float: left;*/
        display: block;
        text-align: left;
        padding-bottom: 0.25em;
        font-size: 80%;
        opacity: 0.7;
    }
    
    .BarChart tr {
        display: inline;
        border: none;
    }
    .BarChart td {
        display: inline-block;
    }
    
    td.CalendarDay {
        height: auto;
        width: auto;
    }

    .input-with-unit-hint {
        max-width: 200px;
    }
}

.accountSettingsDropdownMenuPanel {
    position: absolute;
    top: 25px; left: 0px;
    display: inline-block;
    z-index: 9999;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.4);
}
.ui-menu {
  background-color: #f9f9f9;
  min-width: 283px;
/*  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/

  z-index: 10000;
}
.ui-menu-item {
    padding: 10px;
    text-align: left;
    height: 32px;
}

.ui-state-active {
    height: 32px;
}

.ui-widget-header {
    border: none !important;
    background: #FFFFFF !important;
}

.fa-blurry {
  opacity: 0.2;
}

/* Style for responsive video embedding */
.video-container{
    text-align: center;
}
.video-container iframe{

}

.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
position: relative;
width: 100%;
height: 460px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
}

.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
background: #002311;
position: absolute;
padding: 10px;
visibility: hidden;
width: 100%;
color: #ffffff;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
background: #002311;
border-top-width: 0;
overflow: hidden;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}

.fadecontenttoggler a:hover{
color: white;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
color: white;
}

td.Blank {
    height:100px;
    width:14%;
    border: 1px solid #CCCCCC;
}

.CalendarButtons { 
    font-size: 8pt; 
}

td.Day {
    height:100px;
    width:14%;
    border: 1px solid #CCCCCC;
}

th.ErrorHeading {
    font-size: 8pt;
    font-family: verdana;
    font-weight: bold;
    color: red;
}

table.ExpenseTracker { 
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}
th.ExpenseTracker {
    background: #0c460c;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 110%;
    padding: 1.0ex;	
}
td.ExpenseTracker { 
    wrap-option:wrap;
    text-align: left;
}
td.ExpenseTrackerRight {
    wrap-option:wrap;
    text-align: right;
}
td.ExpenseTrackerAmount { 
    wrap-option:wrap;
    text-align: right;
}
td.ExpenseTrackerReqd { 
    wrap-option:wrap; 
    color:red;
}
tr.ExpenseTrackerHeading { 
    font-size: 100%;
    font-weight: bold;
    background:#9dd59d;
    text-align: left;
}
td.ExpenseTrackerFormRequiredField { 
    font-weight: bold;
    color: #ab0404;
}
td.ExpenseTrackerFormField { 
    font-weight: bold;
    color: #404040;
}
td.ExpenseTrackerTotal { 
    font-weight: bold;
    color:green;
}
.ExpenseControls A { 
    text-decoration:none; 
    color:#000066; 
    font-weight: bold;
}
.ExpenseControls A:hover { 
    color:#0000FF; 
    text-decoration:underline;
}
.ExpenseTableButtons { 
    font-size: 90%;
    padding: 5px;
}
.ExpenseFieldRequired {  
    border: 1px solid #ab0404;
    position: relative;
}
.ExpenseFieldAmount { 
    text-align: right;
}
table.QuickHelp {
    width: 60%;
    background:	white;
    border: 1px solid #2b3242;
}
td.QuickHelp {
    text-align:	left;
    color: #595959;
}
th.QuickHelp {
    background: #65749a;
    font-weight: bold;
    color: white;
}
table.budget1 {
    width: 50%;
    border: 1px solid #CCCCCC;
    background: white;
}
td.budget1 {
 text-align: left;
}
td.spentAmt {
    border: 1px solid #CCCCCC;
    background: #EE0000;	
}	
td.remainingAmt {
    border:			1px solid #CCCCCC;
    background:		#7CFC00;	
}
.controls {
 font-size: 90%;
}
table.budget2 {
    width: 80%;
    border: 1px solid #CCCCCC;
    background: white;
}
.MenubarLink A { 
    text-decoration:none; 
    color:#DBDBDB; 
    font-size: 90%;
    font-weight: bold;
}	
.MenubarLink A:hover { 
    text-decoration:none; 
    color:#DBDBDB; 
    font-size: 90%;
    font-weight: bold;
}
table.PostMsg1 { 
    background:#f6f4f4; 
    border: 1px solid #CCCCCC;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
}
table.BarChart {
    border-bottom: 2px solid black;
}
td.BarChartHeading {
    text-align: center;
    font-weight: bold;
    color: #404040;
}
td.BarChart {
    border: none !important;
    vertical-align: bottom;
}
.BarBlueDefault {
    background-color: #B0C4DE; 	
}
.BarRedBright {
    background-color: #EE0000; 
}
.BarSuggestion {
    border-color: #9ecaed;
    box-shadow:0 0 10px #9ecaed;
    background-color: #ccd7e0;
}
.BarRedMild {
    background-color: #F08080; 
}
.BarGreenMild {
    background-color: #70DB93; 
}
table.Chart {
    background-color: #FFFFFF;
    border-spacing: 10px;
}
.Chart th {
    padding: 10px;
    color: #404040;
    font-weight: bold;
    font-size: 120%;
}
.Chart td {
    padding: 10px;
}
table.MyAccount { 
    background: white;
}
div.MyAccountDropDownMenuHidden {
    display: none;
    position: static;	
}
div.MyAccountDropDownMenuVisible {
    position: absolute;
    z-index: 1000;
}
td.MyAccountContentArea {
    border: 1px solid #006400;
}
th.ExpenseAccount {
    background: #c3c1c8;
    color: #404040;
    font-weight: bold;
    font-size: 110%;
    padding: 1.0ex;
    border-bottom: 1px solid #777185;
    border-top: 1px solid #777185;	
}
table.ExpenseAccount {
    background: #edebeb;
    border: 1px solid #9d9b9b;
    -moz-border-radius: 5px;
}
td.ExpenseAccountName {
    color: #2a0096;
    font-weight: bold;
}
td.ExpenseAccountType {
    color: #747373;
    font-weight: bold;
}
table.IncomeListTable {
    background: white;
}
th.IncomeListTable {
    background: #E6E8FA;	
    border-bottom: 1px solid #CCCCCC;
    color: black;
    font-weight: bold;
    font-size: 110%;
    padding: 1.0ex;			
}
table.ExpenseListTable {
    background: white;
}
th.ExpenseListTable {
    background: #9dd59d;
    border-top: 1px solid #005a00;	
    border-bottom: 1px solid #005a00;
    color: black;
    font-weight: bold;
    font-size: 110%;
    padding: 1.0ex;			
}
div.ReminderInCalendar {
    background: #FFEFDB;
    border: 1px solid #D2B48C;
    padding: 5px;
}	
div.MonthlyBillInCalendar {
    background: #ffc67d;
    border: 1px solid #fd8f01;
    padding: 5px;
}
tr.PersonalBudgetRow1 {
    background: #e9e9ed;
}
tr.PersonalBudgetRow2 {
    background: #dcdce0;
}
td.SharedExpenseSettle {
    color: black;
    border-bottom: 1px dotted #728194;
}
td.SharedExpenseSettleIOwe {
    color: red;
    border-bottom: 1px dotted #728194;
}
td.SharedExpenseSettleOwedToMe {
    color: green;
    border-bottom: 1px dotted #728194;
}

</style>