body, html, td, th {
font-size: 12pt;
font-family: 'Noto Serif', serif;
}
body {
background-color: #999;
min-height: 100%;
}
#content {
background-color: #EEE;
border-top: 1px solid #EEE;
}
body.white #content {
background-color: #FFF;
border-top-color: #FFF;
}
input, button, select, option, .input, .button {
font-size: 12pt;
font-family: 'Noto Sans', sans-serif;
box-sizing: border-box;
}
input, select {
font-weight: bold;
}
h1 {
margin: 0 0 1em 0;
font-family: 'Noto Serif', serif;
}
h1 span.subtitle {
display: block;
font-size: 12pt;
}
h2 {
margin: 29px 0 .83em 0;
font-family: 'Noto Serif', serif;
}
h2 span.subtitle {
display: block;
font-size: 12pt;
}
.infoBoxContent>h1:first-child, .infoBoxContent>h2:first-child {
margin-top: 0;
}
body {
overflow-y: scroll;
}
#mainContent {
padding: 40px;
}
img {
border-width: 0;
}
div.templateHead {
width: 100%;
opacity: .95;
}
div.buttonBar {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
div.buttonBar>* {
text-align: left;
/* flex: 1 1 0px; */
margin: 10px;
}
div.multiButton {
display:flex;
white-space: nowrap;
}
div.multiButton .button {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
div.multiButton .button:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-left: 2px solid #268EDD;
}
div.multiButton .button:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-right: 2px solid #268EDD;
}
.button {
display: inline-block;
color: inherit;
background-color: #FFF;
background-repeat: no-repeat;
background-position: 12px center;
border-radius: 12px;
padding: 12px;
border: 2px solid #268EDD;
cursor: pointer;
}
.button:hover, .button.open {
background-color: #268EDD;
color: #FFF;
background-image: none;
text-decoration: none;
}
.menuContainer .button {
background-color: transparent;
color: #FFF;
}
.buttonBar.menuContainer .button {
background-color: #268EDD;
}
.menuContainer .button:hover, .menuContainer .button.open {
background-color: #FFF;
color: #000;
}
div.feedbacks {
background-color: #EEE;
}
body.white div.feedbacks {
background-color: #FFF;
}
div.feedback {
padding: 5px 40px;
color: #FFF;
background-color: #E44372;
font-family: 'Noto Sa', sans-serif;
font-weight: bold;
border-bottom: 1px solid #F45382;
}
div.feedback.success {
background-color: #00A54E;
border-bottom: 1px solid #10B55E;
}
div.feedback.info, div.feedback.debug {
background-color: #7E7E7E;
border-bottom: 1px solid #8E8E8E;
}
div.feedback.warning {
background-color: #B76F00;
border-bottom: 1px solid #C77F10;
}
th {
font-family: 'Noto Sa', sans-serif;
font-weight: normal;
font-size: 10pt;
}
div.table {
display: inline-block;
text-align: left;
overflow-x: auto;
max-width: 100%;
}
table.table>tbody>tr>td, table.table>thead>tr>th, table.table>tfoot>tr>td {
padding-left: .5em;
padding-right: .5em;
}
table.table>tbody>tr>td:first-child, table.table>tfoot>tr>td:first-child {
padding-left: 0;
}
table.table>tbody>tr>td:last-child, table.table>tfoot>tr>td:last-child {
padding-right: 0;
}
table.table>thead>tr>td, table.table>thead>tr>th, table.table>tfoot>tr>th {
background-color: #7E7E7E;
color: #FFF;
}
table.table>tfoot>tr>td {
border-top: 1px solid #7E7E7E;
}
table.table>tfoot>tr:first-child>td {
border-top: 2px solid #7E7E7E;
}
div.table.alternating>table>table>tbody>tr>td {
padding-top: .1em;
padding-bottom: .1em;
}
div.table.alternating>table>tbody>tr>td, div.table.alternating>table>tbody>tr.even>td {
background-color: #FFF;
}
div.table.alternating>table>tbody>tr:nth-child(2n+1)>td,
div.table.alternating>table>tbody>tr.odd>td {
background-color: #EEF7FF;
}
div.table.alternating>table>tbody>tr>td:first-child,
div.table.alternating>table>thead>tr>th:first-child,
div.table.alternating>table>tfoot>tr>td:first-child {
padding-left: .5em;
}
div.table.alternating>table>tbody>tr>td:last-child,
div.table.alternating>table>thead>tr>th:last-child,
div.table.alternating>table>tfoot>tr>td:last-child {
padding-right: .5em;
}
div.table.alternating {
border: 1px solid #7E7E7E;
}
table.grid>thead>tr>th {
border-right: 1px solid #FFF;
padding-left: .25em;
padding-right: .25em;
}
table.grid>thead>tr>th:last-child {
border-right: none;
}
table.grid>tbody>tr>td {
border: 1px solid #7E7E7E;
padding-left: .25em;
padding-right: .25em;
}
table.labelsAndInputs td {
padding-top: .25em;
padding-botton: .25em;
vertical-align: middle;
}
table.labelsAndInputs td.label {
text-align: right;
}
form div.labelAndInput {
margin-top: .5em;
}
form div.labelAndInput:first-child {
margin-top: 0;
}
label.small, .label.small, .small label {
font-size: 10pt;
color: #999;
font-family: 'Noto Sans', sans-serif;
}
.footnotes {
clear: both;
border-top: 2px solid #268EDD;
padding: 5px 40px 20px 40px;
}
#footer {
font-family: 'Noto Sans', sans-serif;
color: #FFF;
text-align: center;
padding: 5px 40px;
}
#footer a {
color: #FFF;
}
form div.labelAndInput>table>tbody>tr>td {
padding-right: 1em;
}
/* -------------------------------- infoBox -------------------------------- */
.infoBoxCollection {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
margin: -20px;
}
.infoBoxCollection>* {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1;
box-sizing: border-box;
padding: 20px;
}
.infoBox {
background-color: #FFF;
height: 100%;
border-radius: 16px;
}
body.white .infoBox {
background-color: #EEE;
}
.infoBoxContent {
padding: 10px 16px;
}
@media (max-width: 640px) {
#mainContent {
padding: 20px;
}
div.feedbacks {
margin-top: 20px;
}
div.feedback {
padding: 5px 40px;
}
.footnotes {
padding: 5px 20px 10px 20px;
}
#footer {
padding-left: 20px;
padding-right: 20px;
}
.infoBoxCollection {
margin: -10px;
}
.infoBoxCollection>* {
padding: 10px;
}
.infoBoxCollection>*,
.infoBoxCollection>*.wide,
.infoBoxCollection>*.narrow {
width: calc(100% - 20px);
}
}
@media (min-width: 641px) and (max-width: 800px) {
.infoBoxCollection>*.narrow {
width: calc(50% - 40px);
}
.infoBoxCollection>* {
width: calc(100% - 40px);
}
.infoBoxCollection>*.wide {
width: calc(100% - 40px);
}
}
@media (min-width: 801px) and (max-width: 1024px) {
.infoBoxCollection>*.narrow {
width: calc(33.33% - 40px);
}
.infoBoxCollection>* {
width: calc(50% - 40px);
}
.infoBoxCollection>*.wide {
width: calc(100% - 40px);
}
}
@media (min-width: 1025px) {
.infoBoxCollection>*.narrow {
width: calc(25% - 40px);
}
.infoBoxCollection>* {
width: calc(33.33% - 40px);
}
.infoBoxCollection>*.wide {
width: calc(50% - 40px);
}
}