@font-face {
    font-family: 'aileronregular';
    src: url('fonts/aileron-regular-webfont.woff2') format('woff2'),
         url('fonts/aileron-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'aileronthin';
    src: url('fonts/aileron-thin-webfont.woff2') format('woff2'),
         url('fonts/aileron-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'bree_serifregular';
    src: url('fonts/breeserif-regular-webfont.woff2') format('woff2'),
         url('fonts/breeserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body
{
    background-image: url('img/logo.png');
    background-repeat: no-repeat;
    background-size: 300px;
    margin: 0px;
    font-family: aileronthin, sans-serif;
}

#title
{
    position: fixed;
    background-color: white;
    border-bottom: 3px solid #5c3d46;
    width:  100%;
    display     : flex;
	justify-content: space-between;
	flex-wrap: wrap;
    left: 0px;
    top: 0px;
	z-index: 50;
}

#status-box
{
	position: fixed;
	left: 20px;
	top: 20px;
	width: 40em;
	height: 10em;
	background-color: #fff5f5;
	border: #5c3d5c46 1px solid;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
	border-radius: .25em;
    z-index: 100;
    display: none;
}

#status
{
    padding: 10px;
    color: #5c3d46;
    font-weight: 600;
}

.close, .expand, .collapse
{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    opacity: 0.5;
    z-index: 2;
}

#actions .expand
{
    padding-top: 6px;
    opacity: 1;
}

.close
{
    top: 10px;
}

.expand, .collapse
{
    top: 15px;
}

.close:hover, .expand:hover, .collapse:hover {
    opacity: 1;
}

.close:before, .close:after, .collapse:before, .collapse:after, .expand:before, .expand:after {
    position: absolute;
    left: 7px;
    content: ' ';
    height: 17px;
    width: 3px;
    background-color: #545454;
}

#overlay .close:before, #overlay .close:after, #overlay .collapse:before, #overlay .collapse:after, #overlay .expand:before, #overlay .expand:after,
#adjustoverlay .close:before, #adjustoverlay .close:after, #reconcileoverlay .close:before, #reconcileoverlay .close:after
{
    background-color: #eee;
}

.close:before, .expand:before
{
    transform: rotate(45deg);
}

.close:after, .collapse:after
{
    transform: rotate(-45deg);
}

.collapse:before
{
    transform: rotate(45deg) translateX(-7px) translateY(7px);
}

.expand:after
{
    transform: rotate(-45deg) translate(-7px) translateY(-7px);
}

#filters #collapsable
{
    display: none;
}

#menuburger
{
    display: flex;
    flex-direction:column;
    padding-top: 10px;
}

#menuburger .burger
{
display: block;
width: 30px;
height: 4px;
margin-bottom: 5px;
position: relative;
padding-left: 0px;
border-radius: 3px;
background-color: #5c3d46;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}

#css3menu2 .topfirst a .labelactions
{
    padding-right: 32px;
    font-size: 26px;
}

#filters h2
{
    color: #545454;
    padding: 0;
    margin: 0;
    text-align: center;
}

#main
{
    position: relative;
    top: 200px;
    width: 100%;
    font-family: aileronthin;
}

.toplast #menutitle
{
    display: flex;
}

#page
{
    color: #5c3d46;
    font: bold 30px aileronregular;
    padding-top: 4px;
    padding-left: 10px;
}

#autoshow {
	display		: table;
    margin		: 0 auto;
    padding: 20px;
    border-radius: 1em;
}

table
{
    border-collapse: collapse;
    font-size: 1.4em;
    color: #555;
}

#main #autoshow tr:nth-child(even)
{
	background-color: #eee;
}

th, label
{
    background-color: #eee;
    color: #555;
    font-family: aileronregular;
    padding: 2px 5px;
}

#labelforgot
{
    float: right;
    color: #eee;
    font-size: 1.4em;
}

label
{
    font-size: 1.4em;
    display: block;
    width: 95.5%;
}

.screenshot
{
    height: 300px;
}

#overlay th, #form th
{
    text-align: right;
    padding: 5px;
    background-color: #73bbc8;
    color: #eee;
    border: none;
}

#overlay td, #reconcileoverlay td, #adjustoverlay td, #form td
{
    background-color: #73bbc8;
    border: none;
    border-right: none;
}

#overlay th select
{
    background-color: #73bbc8;
    color: #eee;
    font-weight: bold;
    text-align: right;
}

thead th
{
    border: solid 1px #c8d6ca;
}

td
{
    padding: 2px 5px;
    border-left: solid 1px #c8d6ca;
    border-right: solid 1px #c8d6ca;
}

#autoshow tr:last-child
{
    border-bottom: solid 1px #c8d6ca;
}

#difference
{
    color: #eee;
}

input
{
    font-size: 1em;
    font-family: aileronthin, sans-serif;
    width: 90%;
}

input#name, input#pass, input#email
{
    width: 94%;
}

select
{
    font-size: 1em;
    font-family: aileronthin, sans-serif;
    width: 97%;
}

input[type=button]
{
    width: auto;
}

table input[type=button]
{
    font-size: .8em;
}

#overlay .centre
{
    text-align: center;
}

#overlay .line
{
    border-top: 1px solid white;
}

#overlay, #coloverlay
{
	background-image: url('img/overlay.png');
	background-repeat: repeat;
	position	: fixed;
	top		: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
    display: none;
	overflow	: auto;
}

.deleted, .register, .forgot {
	display: none;
}

#overlaycontent, #coloverlaycontent, #uploaddiv, #detailoverlay, #catoverlay, #suboverlay, #invoverlay, #payoverlay, #spentoverlay, #sharing {
	background-color	: #73bbc8;
	padding		: 30px;
	border		: #eee 3px solid;
    margin		: 100px auto 0 auto;
    max-width: 500px;
    -webkit-border-radius: 15px;
	-moz-border-radius	: 15px;
	border-radius	: 15px;
    display		: none;
    position: relative;
}

#suboverlay td, #overlay #permissions td
{
    color: white;
}

#overlay .left
{
    text-align: left;
}

#form
{
    background-color	: #5c868d;
	padding		: 30px;
	border		: #e7f5de 3px solid;
    margin		: 100px auto 0 auto;
    max-width: 600px;
    -webkit-border-radius: 15px;
	-moz-border-radius	: 15px;
	border-radius	: 15px;
    position: relative;
}

#filters
{
    background-color	: white;
	padding		: 10px 30px;
	border		: #545454 3px solid;
    margin		: 0 auto;
    max-width: 1200px;
    -webkit-border-radius: 15px;
	-moz-border-radius	: 15px;
	border-radius	: 15px;
    position: relative;
}

#filters label
{
    background-color: white;
    color: #545454;
}

#filters ul
{
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#filters ul ul
{
    list-style: none;
    display: block;
    color: white;
    font-size: 1.2em;
    text-indent: -1em;
}

#filters a, #filters a:hover
{
    text-decoration: none;
    /* color: #8dcbea; */
    color: #5c3d46;
}

#help h1
{
    color: #5c868d;
}

#help p
{
    color: #5c3d46;
    font-size: 1.2em;
}

#reconcileoverlay, #adjustoverlay {
	background	: #5c868d;
	padding		: 30px;
	border		: #e7f5de 3px solid;
	margin		: 0 auto;
	position	: fixed;
	top		: 170px;
	left		: 30px;
    -webkit-border-radius: 15px;
	-moz-border-radius	: 15px;
	border-radius	: 15px;
	display		: none;
}

#form li {
    list-style: none;
    padding: 5px;
}

#form ul {
	margin		: 0px;
	padding		: 0px;
}

#reportImage {
	display		: block;
	margin-left	: auto;
	margin-right	: auto;
}

.hidden {
	display		: none;
	visibility	: hidden;
}

.labelcategory {
    width       : 200px;
}

.labelaverage {
    width       : 80px;
}

.colaccount, .colfullname, .colacctype, .colbankname, .colaccnum, .colopenbal, .colopendate, .collimit, .colrole, .colcategory, .coltransfer, .colsubcat, .colspent, .colpayee, .colinvestment {
	display		: none;
}

#help
{
    background-color: #eee;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    max-width: 1200px;
    padding: 30px;
    margin: 20px auto;
}

#chartflex
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.chart {
    background-color: white;
    margin: 20px auto;
    -webkit-border-radius: 15px;
	-moz-border-radius	: 15px;
    border-radius	: 15px;
    width: 800px;
    /* min-height: 500px !important; */
}

@media (max-width: 800px)
{
    .chart
    {
        width: 100%;
    }

    .chartjs-size-monitor
    {
        height: 600px;
    }
}

#chartdetail1
{
    background-color: #eee;
    padding-top: 60px;
}

#overlay {
    z-index: 10;
}

footer {
    text-align: center;
    padding-bottom: 20px;
}

/* Menus */
    ul#css3menu1,ul#css3menu1 ul, ul#css3menu2,ul#css3menu2 ul{
        margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:none;border-color:#5f5f5f;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
    ul#css3menu1 ul{
        display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color: white;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;padding:0 10px 10px;}
    ul#css3menu2 ul{
        display:none;position:absolute;right:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color: white;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;padding:0 10px 10px;}
    ul#css3menu1 li:hover>*, ul#css3menu2 li:hover>*{
        display:block;}
    ul#css3menu1 li, ul#css3menu2 li{
        position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
    ul#css3menu1 li:hover, ul#css3menu2 li:hover{
        z-index:1;background-color:#99bfaa;}
    ul#css3menu1 ul ul, ul#css3menu2 ul ul{
        position:absolute;left:100%;top:-10px;}
    ul#css3menu1, ul#css3menu2{
        font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
        *display:inline;}
    * html ul#css3menu1 li a, * html ul#css3menu2 li a{
        display:inline-block;}
    ul#css3menu1>li,  ul#css3menu2>li{
        margin:0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus, ul#css3menu2 a:active, ul#css3menu2 a:focus{
        outline-style:none;}
    ul#css3menu1 a, ul#css3menu2 a{
        display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 20px aileronthin,sans-serif;color:#5c3d46;text-shadow:#FFF 0 0 0px;cursor:pointer;padding:10px;background-color:white;background-image:url("img/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:none;border-color:#C0C0C0;}
    ul#css3menu1 ul li, ul#css3menu2 ul li{
        float:none;margin:10px 0 0;}
    ul#css3menu1 ul li:hover
    {background-color:#5c3d46;}
    ul#css3menu1 ul a, ul#css3menu2 ul a{
        text-align:left;padding:0px;background-color: white;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 16px aileronthin,sans-serif;color:#5c3d46;text-decoration:none;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed, ul#css3menu2 li:hover>a,ul#css3menu2 li a.pressed{
        background-color:white;border-color:#C0C0C0;border-style:none;color:#5c3d46;text-shadow:#FFF 0 0 0px;background-image:url("img/mainbk.png");background-position:0 100px;}
    ul#css3menu1 span, ul#css3menu2 span{
        display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
    ul#css3menu1 ul span{
        background-image:url("img/arrowsub.png");padding-right:12px;}
    ul#css3menu2 ul span{
        background-image:url("img/arrowsub.png");padding-right:12px;}
    ul#css3menu1 > li.switch, ul#css3menu2 > li.switch{
        display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
    ul#css3menu1 > li.switch:before, ul#css3menu2 > li.switch:before{
        content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#555;-moz-box-shadow:0 8px #555, 0 16px #555;-webkit-box-shadow:0 8px #555, 0 16px #555;box-shadow:0 8px #555, 0 16px #555;}
    ul#css3menu1 > li.switch:hover:before, ul#css3menu, > li.switch:hover:before{
        background:#eee;-moz-box-shadow:0 8px #eee, 0 16px #eee;-webkit-box-shadow:0 8px #eee, 0 16px #eee;box-shadow:0 8px #eee, 0 16px #eee;}
    .c3m-switch-input{
        display:none;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed, ul#css3menu2 li:hover>a,ul#css3menu2 li > a.pressed{
        background-color:white;background-image:url("img/mainbk.png");background-position:0 100px;border-style:none;border-color:#C0C0C0;color:#5c3d46;text-decoration:none;text-shadow:#FFF 0 0 1px;}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed, ul#css3menu2 ul li:hover>a,ul#css3menu2 ul li > a.pressed{
        background-color: white;background-image:none;color:#5c3d46;text-decoration:none;}
    ul#css3menu1 li.topfirst>a, ul#css3menu2 li.topfirst>a{
        border-radius:5px 0 0 5px;-moz-border-radius:0px 0 0 5px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
    ul#css3menu1 li.toplast>a, ul#css3menu2 li.toplast>a{
        border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;}
    @media screen and (max-width: 768px) {
        ul#css3menu1 > li, ul#css3menu2 > li {
            position: initial;}
        ul#css3menu1 ul .submenu,ul#css3menu1 li > ul, ul#css3menu2 ul .submenu,ul#css3menu2 li > ul {
            left: 0; right:auto; top: 100%;}
        ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column, ul#css3menu2 .submenu,ul#css3menu2 ul,ul#css3menu2 .column {
            -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
    }
    @media screen and (max-width: 281px) {
        ul#css3menu1, ul#css3menu2 {
            width: 100%;}
        ul#css3menu1 > li, ul#css3menu2 > li {
            display: none;		position: relative;		width: 100% !important;}
        ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li, ul#css3menu2 > li.switch,.c3m-switch-input:checked + ul#css3menu2 > li + li {
            display: block;}
        ul#css3menu1 > li.switch > label, ul#css3menu2 > li.switch > label {		position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}