* {font-size: 16px; font-family: 'Tahoma'; padding: 8px; box-sizing: border-box;}
html {padding: 0px;}
body {background-color: #FFFFFF; margin: 0px; overflow: hidden; padding: 0px;}

*.center {text-align: center;}
*.left {text-align: left;}
*.right {text-align: right;}

*.color {white-space: nowrap; width: 24px;}

*.group {font-size: 18px; text-align: center;}
*.text {text-align: left;}
*.number {text-align: right;}
*.percentage {text-align: right;}

*.link {color: #0000FF; cursor: pointer; text-decoration: underline;}
*.error {color: #FF0000;}
*.bg-er {background-color: #FC3D39; color: #000000;}
*.bg-ok {background-color: #53D769; color: #FFFFFF;}

p {text-align: justify; margin: 8px 0px;}
a {margin: 0px; padding: 0px;}
b {margin: 0px; padding: 0px;}

h1.title {font-size: 32px;}

div.frame {height: 100%; position: relative; width: 100%;}
div.frame>div.title {height: 40px; left: 0px; position: absolute; top: 0px; width: 100%;}
div.frame>div.body {height: calc(100% - 40px); left: 0px; overflow: auto; position: absolute; top: 40px; width: 100%;}

table.list {}
tbody.list {}
tbody.list>tr>td.link {color: #022986; cursor: default; text-decoration: underline;}
tbody.list>tr>td.link:hover {background-color: #022986; color: #FFFFFF;}

body.page {}
div.page {display: grid; gap: 16px; grid-template-columns: 320px auto; grid-template-rows: 120px auto; height: 100%; justify-items: stretch; padding: 16px; width: 100%;}
div.page.no-hd.no-as {grid-template-columns: 1fr; grid-template-rows: 1fr;}
div.page.no-hd.no-as.dialog {padding: 0px;}
header.page {background-color: #FFFFFF; border-bottom: 1px solid #DBDBDB; grid-column: 1/span 2; grid-row: 1; padding: 0px;}
aside.page {background-color: #FFFFFF; border: 1px solid #DBDBDB; grid-column: 1; grid-row: 2; padding: 0px;}
section.page {background-color: #FFFFFF; border: 1px solid #DBDBDB; grid-column: 2; grid-row: 2; position: relative;}
div.page.no-hd.no-as>section.page {grid-column: 1; grid-row: 1;}
section.page>div.pagetitle {background-color: #022986; color: #FFFFFF; font-size: 20px; height: 40px; left: 0px; position: absolute; top: 0px; width: 100%;}
section.page>div.pagebody {display: initial; height: calc(100% - 96px); left: 0px; overflow: auto; position: absolute; top: 40px; width: 100%;}
section.page>div.pagebody.dialog {padding: 32px;}
section.page>div.pagefooter {background-color: #F5F5F5; border-top: 1px solid #DBDBDB; height: 56px; left: 0px; position: absolute; top: calc(100% - 56px); width: 100%;}
section.page>div.pagefooter:empty {background-color: #FFFFFF; border-top: 1px solid #FFFFFF;}
section.page>div.pagefooter.bg-grey:empty {background-color: #F5F5F5; border-top: 1px solid #F5F5F5;}
div.pagefooter>button {}

div.pageshadow {display: none;}
div.pageshadow.show {display: none;}

table.pagetitle {width: 100%;}
td.pagetitle {font-size: 48px;}

div.pagemenu {height: 100%; padding: 0px; position: relative; width: 100%;}
div.pagemenuheader {background-color: #022986; border-bottom: 1px solid #DBDBDB; color: #FFFFFF; font-size: 20px; height: 40px; left: 0px; line-height: 20px; position: relative; top: 0px; width: 100%;}
div.pagemenubody {height: calc(100% - 40px); left: 0px; overflow: auto; padding: 0px; top: 40px; width: 100%;}

table.pagemenu {width: 100%;}
td.pagemenugroup {font-size: 20px; font-weight: bold; padding: 2px;}
td.pagemenu {cursor: default; font-size: 16px; font-weight: lighter; padding: 2px 8px;}
td.pagemenu.slct {background-color: #022986; color: #FFFFFF;}
td.pagemenu:hover {background-color: #96BE1F; color: #FFFFFF;}

div.pageform {display: grid; gap: 8px; grid-auto-flow: row; min-width: 800px; width: 100%;}
div.pagecontainer {display: grid; gap: 8px; grid-auto-flow: row; max-width: 800px; padding: 0px; width: 100%;}
div.pagecontainer>div.pageform {padding: 0px;}
div.pagegroup {border-bottom: 1px solid #DBDBDB; font-size: 20px; padding: 8px; width: 100%;}
div.pagerow {display: grid; gap: 8px; grid-template-columns: repeat(12, 1fr); padding: 0px 8px;}
div.pagerow.vertical {grid-auto-flow: row;}
div.pagecol {display: grid; gap: 0px; grid-auto-flow: row; padding: 0px;}
div.pagepanelrow {place-self: stretch stretch;}
div.pagepanel {grid-column: 1 / span 12; place-self: stretch stretch;}
label.control {padding: 0px 0px 8px 0px;}
input.control {width: 100%;}
input.control-hide {display: none;}
input.control-inline {border: none; text-align: center; width: 100%;}
div.help {font-size: 12px; overflow: hidden; padding: 0px 8px; text-overflow: ellipsis; visibility: hidden; white-space: nowrap;}
div.pagecol:focus-within>div.help {font-size: 12px; overflow: hidden; padding: 0px 8px; text-overflow: ellipsis; visibility: visible; white-space: nowrap;}

table.pagelist {border: 1px solid #DBDBDB; border-collapse: collapse; border-spacing: 0px; border-radius: 6px; width: 100%;}
table.pagelist>thead>tr>th {background-color: #FFFFFF;}
table.pagelist>tbody>tr:nth-child(odd) {background-color: #FFFFFF;}
table.pagelist>tbody>tr:nth-child(even) {background-color: #F2F2F2;}
table.pagelist>tbody>tr {border: 1px solid #DBDBDB; vertical-align: top;}
table.pagelist>tbody>tr>td {vertical-align: middle;}
table.pagelist>tbody>tr>td.toolbar {display: grid; grid-auto-flow: column; grid-gap: 8px; white-space: nowrap;}


.hourglass {display: inline-block; position: relative; width: 80px; height: 80px;}
.hourglass:after {content: " "; display: block; border-radius: 50%; width: 0; height: 0; margin: 8px; box-sizing: border-box; border: 32px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-hourglass 1.2s infinite;}
@keyframes hourglass {
  0% {transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
  50% {transform: rotate(900deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
  100% {transform: rotate(1800deg);}
}

div.panel {display: grid; grid-auto-flow: column; padding: 8px 0px; gap: 8px;}
div.panel.col-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
div.score-card {background-color: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 6px; cursor: default; display: grid; grid-auto-flow: row; gap: 8px;}
div.score-card.link {cursor: pointer;}
div.score-card.link:hover {background-color: #022986; color: #FFFFFF;}
div.score-card>div.value {font-size: 32px; text-align: center; padding: 8px 0px 0px 0px}
div.score-card>div.label {font-size: 12px; text-align: center; padding: 0px 0px 8px 0px}

div.bg-error {background-color: #E51C23; color: #FFFFFF;}
div.bg-ok {background-color: #4CD964; color: #FFFFFF;}
div.bg-info {background-color: #007AFF; color: #FFFFFF;}
div.bg-alert {background-color: #FFCC00; color: #FFFFFF;}
div.bg-warning {background-color: #FF9500; color: #FFFFFF;}
div.bg-data {background-color: #8E8E93; color: #FFFFFF;}
div.bg-grey {background-color: #F5F5F5; color: #000000;}


div.dialog-mist {display: none;}
div.dialog-label {display: none;}
iframe.dialog-iframe {display: none;}

div.dialog-mist.show {background-color: #000000; display: initial; height: 100%; left: 0px; opacity: 0.75; position: absolute; top: 0px; width: 100%; z-index: 10000;}
div.dialog-label.show {color: #FFFFFF; display: initial; height: 5%; left: 5%; opacity: 1; position: absolute; text-align: center; top: 95%; width: 90%; z-index: 10001;}
div.dialog-label.show.center {top: 50%;}
iframe.dialog-iframe.show {border: none; display: initial; height: 90%; left: 5%; margin: 0px; opacity: 1; padding: 0px; position: absolute; top: 5%; width: 90%; z-index: 10001;}


div.yearly-panel {background-color: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 6px;}
div.yearly-panel>div.year {width: 100%;}
div.yearly-panel>div.year>div.title {border-bottom: 1px solid #DBDBDB; font-size: 24px; text-align: center;}
div.yearly-panel>div.months {display: grid; gap: 8px; grid-template-columns: repeat(6, 1fr);}
div.yearly-panel>div.months>div.month {background-color: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 6px;}
div.yearly-panel>div.months>div.month>div.title {text-align: center; text-transform: capitalize; width: 100%;}
div.yearly-panel>div.months>div.month>div.rate {cursor: pointer; font-size: 20px; text-align: center; width: 100%;}
div.yearly-panel>div.months>div.month>div.rate.hide {display: none;}