html, body, div, span, h1, h2, h3, p, a, em, img, strong, sub, sup, b, u, i, center, ol, ul, li,
form, fieldset, label, input, select, textarea, legend, table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, menu, aside, article, canvas, details, embed, figure, figcaption, section {
    margin         : 0;
    padding        : 0;
    border         : none;
    outline        : none;
    vertical-align : baseline;
}

html, body {
    min-height : 100%;
    height     : 100%;
}

body {
    display          : flex;
    flex-direction   : column;
    background-color : #ffffff;
    color            : #000000;
    font             : normal 14px Arial, sans-serif;
    line-height      : 1.5;
}

h1 {
    margin         : 10px 0;
    text-align     : center;
    color          : #000000;
    font-size      : 1.4em;
    font-weight    : bold;
    text-transform : uppercase;
    letter-spacing : 3px;
}

h2 {
    margin         : 10px 0;
    text-align     : center;
    color          : #000000;
    font-size      : 1.2em;
    font-weight    : bold;
    text-transform : uppercase;
}

h3 {
    margin      : 10px 0;
    text-align  : center;
    font-size   : 1em;
    font-weight : bold;
    font-style  : italic;
}

a {
    color           : blue;
    text-decoration : none;
}

a:visited {
    color : gray;
}

table {
    margin          : 10px auto;
    border-collapse : collapse;
}

td {
    box-sizing     : border-box;
    padding        : 5px 10px;
    border         : 1px solid gray;
    vertical-align : middle;
}

table > caption {
    padding     : 5px 0;
    font-size   : 1.4em;
    font-weight : bold;
}

table > thead > tr > td {
    text-align  : center !important;
    font-weight : bold !important;
}

table > tfoot > tr > td {
    font-weight : bold !important;
}

hr {
    height           : 1px;
    background-color : gray;
}

input, select {
    box-sizing    : border-box;
    border        : 1px solid gray;
    border-radius : 5px;
    padding       : 2px 5px;
}

input[type=text] {
    padding : 5px 5px;
}

select {
    padding : 4px 5px;
}

p {
    margin      : 5px 0;
    text-align  : justify;
    text-indent : 20px;
}

.buttons-panel {
    display         : flex;
    justify-content : flex-start;
    align-items     : center;
}

.buttons-panel .ui-button {
    margin-left : 10px;
}

.buttons-panel .ui-button:first-child {
    margin-left : 0;
}

.ui-button .fa {
    margin-right   : 5px;
    vertical-align : middle;
    font-size      : 1.4em;
}

img {
    vertical-align : middle;
}

ul {
    list-style : none outside;
}

ol {
    list-style : none outside;
}

.flex-max-size {
    flex-grow : 1;
}

.error {
    color       : #cb2156 !important;
    font-weight : bold !important;
    text-align  : center;
}

#wrapper {
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
    width          : 90%;
    min-width      : 1000px;
    margin         : 0 auto;
}

#wrapper > * {
    flex-shrink : 0;
}

#header {
    display         : flex;
    justify-content : center;
    align-items     : center;
}

#header > #header-logo {
    height       : 70px;
    margin-right : 20px;
}

#header > #header-text {
    text-align : center;
    color      : black;
    font-size  : 12px;
}

#header > #header-text > h1 {
    text-align     : center;
    color          : black;
    font-size      : 24px;
    font-weight    : bold;
    letter-spacing : 1px;
    margin         : 0;
}

#footer {
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 2px;
    border-top      : 2px solid gray;
}

#footer > div {
    flex : 0 0 100px;
}

#footer > #footer-copy {
    flex-grow  : 1;
    text-align : center;
}

#footer > #footer-sign {
    text-align  : right;
    font-family : symbol;
    color       : #cccccc;
}

#main-menu {
    display          : flex;
    flex-direction   : row;
    justify-content  : flex-start;
    align-items      : stretch;
    background-color : gray;
    color            : white;
    box-shadow       : 2px 2px 5px 0 silver;
    padding          : 2px 0;
}

#main-menu > div > a {
    display        : block;
    margin         : 2px 10px;
    padding        : 2px 10px;
    border-top     : 2px solid transparent;
    border-bottom  : 2px solid transparent;
    font-size      : 16px;
    font-weight    : bold;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : white;
}

#main-menu > div > a > .fa {
    margin-right : 10px;
    width        : 1.2em;
    font-size    : 1.4em;
}

#main-menu > div > a:hover {
    color               : black;
    border-bottom-color : black;
}

#main-menu > div a.group {
    cursor : default;
}

#main-menu > div:hover > .main-sub-menu {
    left    : 0;
    opacity : 1;
    z-index : 999;
}

#main-menu > div > .main-sub-menu {
    position         : absolute;
    left             : -9999px;
    opacity          : 0;
    z-index          : 0;
    background-color : #ffffff;
}

#main-menu > div > .main-sub-menu > a {
    display          : block;
    padding          : 10px;
    margin           : 2px 0;
    font-size        : 14px;
    font-weight      : bold;
    white-space      : nowrap;
    text-align       : left;
    letter-spacing   : 2px;
    line-height      : 1;
    color            : #ffffff;
    background-color : #008000;
    text-transform   : uppercase;
}

#main-menu > div > .main-sub-menu > a:hover {
    color : lime;
}

#main-menu > div > .main-sub-menu > a.group {
    background-color : #999999;
    text-align       : center;
}

#content {
    flex-grow  : 1;
    margin-top : 10px;
    padding    : 0;
}

#menu-regions {
    width            : 220px;
    background-color : silver;
    padding          : 10px;
}

#menu-regions a {
    color : black;
}

#menu-regions > div {
    margin : 5px 0;
}

#menu-regions > div.active {
    margin-bottom : 10px;
}

#menu-regions > div.active > a {
    text-transform : uppercase;
    font-weight    : bold;
}

#menu-regions .menu-areas {
    padding-left : 20px;
}

#menu-regions .menu-areas > a {
    display : block;
    margin  : 2px 0;
}

#menu-regions .menu-areas > a.active {
    text-transform : uppercase;
    font-weight    : bold;
}

#content > div:nth-child(2) {
    flex-grow : 1;
}

div.google-visualization-tooltip {
    padding : 10px 0 0 20px;
}

div.google-visualization-tooltip > div {
    margin : 5px 0;
}

div.google-visualization-tooltip .title {
    font-weight : bold;
}

div.google-visualization-tooltip .total {

}

div.google-visualization-tooltip span.v {
    font-weight : bold;
}

div.google-visualization-tooltip > div > i {
    display      : inline-block;
    width        : 10px;
    height       : 10px;
    margin-right : 10px;
}