@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inconsolata', monospace, 'Sarabun';
}
body.submitting {
    pointer-events: none;
    opacity: 0.5;
}
a {
    color: blue;
}
input {
    font-family: 'Inconsolata', monospace, 'Sarabun';
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime-local"] {
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    color: #000000;
    background-color: #ffffff;
    padding: 4px 8px;
    outline: none;
    border: 1px solid #808080;
    border-radius: 2px;
    box-sizing: border-box;
    vertical-align: middle;
}
select {
    font-family: 'Inconsolata', monospace, 'Sarabun';
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    color: #000000;
    background-color: #ffffff;
    padding: 4px 8px;
    outline: none;
    border: 1px solid #808080;
    border-radius: 2px;
    box-sizing: border-box;
    vertical-align: middle;
}
button {
    font-family: 'Inconsolata', monospace, 'Sarabun';
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    color: #000000;
    background-color: #f8f8f8;
    padding: 4px 16px;
    outline: none;
    border: 1px solid #808080;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}
button:hover {
    background-color: #e8e8e8;
}
table {
    border-spacing: 0;
}
table th, table td {
    border: 1px solid #c0c0c0;
    padding: 4px 8px;
}
table th {
    background-color: #cbcbcb;
}
.row {
    margin: 0 -8px;
    font-size: 0;
}
.col {
    display: inline-block;
    vertical-align: top;
    padding: 0 8px;
    font-size: 1.0rem;
    box-sizing: border-box;
    width: 100%;
}
.col.col-d-1 { width: calc(100% * (1/12)); }
.col.col-d-2 { width: calc(100% * (2/12)); }
.col.col-d-3 { width: calc(100% * (3/12)); }
.col.col-d-4 { width: calc(100% * (4/12)); }
.col.col-d-5 { width: calc(100% * (5/12)); }
.col.col-d-6 { width: calc(100% * (6/12)); }
.col.col-d-7 { width: calc(100% * (7/12)); }
.col.col-d-8 { width: calc(100% * (8/12)); }
.col.col-d-9 { width: calc(100% * (9/12)); }
.col.col-d-10 { width: calc(100% * (10/12)); }
.col.col-d-11 { width: calc(100% * (11/12)); }
.col.col-d-12 { width: calc(100% * (12/12)); }
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.container-fluid {
    max-width: none;
}
.main-nav li {
    display: inline-block;
    margin-right: 8px;
}
.main-header ul {
    padding-left: 0;
}
.breadcrumb {
    padding-left: 32px;
}
.breadcrumb > li {
    display: inline-block;
    margin-right: 4px;
}
.breadcrumb > li::after {
    content: ' >'
}
.breadcrumb > li:last-child::after {
    content: ''
}
.main-footer {
    color: #808080;
}
.text-success { color: green; }
.text-warning { color: orange; }
.text-danger { color: red; }
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}
.w-100 { width: 100%; }
.hidden { display: none; }