:root {
    --theme_main: #c9191d;
    --theme_secondary: #FFD039;
    --theme_light_yellow: #fbf2c6;
    --theme_danger: #a51d2a;
    --jko_pink: #ff9ea1;
    --jko_light: #f8f9fa;
    --jko_gray: #eeecef;
    --jko_mid_gray: #c8c7c7;
    --jko_dark: #555555;
}
body {
    background-color: var(--jko_gray);
    color: var(--jko_dark);
    font-family: Noto Sans TC,Noto Sans SC,Hiragino Sans GB,MicroSoft YaHei,Arial,sans-serif;
    font-size: .95rem;
    letter-spacing: .1em;
}
.container, .contentContainer, .page_head, .page_footer {
    background-color: #fff;
}

span, p, h1, h2, a, button, input, table {
    animation-duration: .5s;
    animation-name: content-load;
}
@keyframes content-load {
    0%{
        filter: blur(20px);
        opacity: 0;
    }
    100%{
        filter: blur(0px);
        opacity: 1;
    }
}
span.fieldName {animation-name: none}
a { color: var(--theme_main) }
a:hover { color: var(--theme_main)}
.msg a { text-decoration: underline; }
.content {
    padding: 16px 8px;
    font-weight: 300;
}
.content .pageTitle {
    margin-bottom:16px;
    padding: 0 8px;
}
.content .pageTitle h1 {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
}
.content p {padding: 0 8px;}
input {
    border-color: var(--jko_mid_gray);
    border-radius: .25rem;
    padding: 5px;
}
.btn-jko-main, .btn-primary {
    color: var(--jko_light);
    background-color: var(--theme_main);
    border-color: var(--theme_main);
}
.btn-jko-main:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    color: var(--theme_main);
    background-color: var(--jko_pink);
    border-color: var(--theme_main);
}
.btn-secondary {
    border-color: var(--theme_main);
    color: var(--theme_main);
    background: #fff;
}
.formTable {
    width: 100%;
    font-size: .95rem;
    font-weight: 300;
    border-collapse: separate;
    border-spacing: 0;
}
.formTable tr,
.formTable tr td {
    border: 1px solid #dee2e6;
}
.formTable thead td {
    text-align: center;
    font-weight: 500;
}
.formTable thead tr,
.formTable tr:nth-of-type(2n+2),
.formTable tfoot tr {
    background-color: var(--jko_gray);
}
.formTable thead tr:first-of-type td:first-of-type {
    border-top-left-radius: .25rem;
}
.formTable thead tr:first-of-type td:last-of-type {
    border-top-right-radius: .25rem;
}
.formTable tfoot tr:last-of-type td:first-of-type {
    border-bottom-left-radius: .25rem;
}
.formTable tfoot tr:last-of-type td:last-of-type {
    border-bottom-right-radius: .25rem;
}
.formTable td {
    padding: 10px;
}
.modalContainer {
    backdrop-filter: blur(10px);
}
.modal-content {
    border: none;
    box-shadow: 0 20px 35px -15px rgba(50 ,50 ,50, .2 );
}
.breakRule {
    margin: 20px 0;
    padding: 10px 10px 1px 0;
    background-color: var(--theme_light_yellow);
    border-radius: .25rem;
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 5px solid #d9c999;
}
.breakRule a {
    display: inline-block;
    border-bottom: 2px dotted var(--theme_main);
    padding-bottom: 1px;
}
.breakRule a:hover {
    text-decoration: none;
}