/*! Tablesaw - v2.0.3 - 2016-06-03
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */

table.tablesaw {
    empty-cells: show;
    max-width: 100%;
    width: 100%;
}

.tablesaw {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Lato', sans-serif;
}






/* Structure */

.tablesaw {
    border: 0;
    padding: 0;
}

.tablesaw th,
.tablesaw td {
    box-sizing: border-box;
}

.tablesaw thead tr:first-child th {
    padding: 0.9em 0 0.7em 0;
    background: #000;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
}






/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
    /*border-bottom: 1px solid #dfdfdf;*/
    background: #fff;
}

.tablesaw-stack tbody tr td {
    /*border-bottom: 1px solid #dfdfdf;*/
    font-size: 1em;
    vertical-align: middle;
    color: #000;
    padding: 0.5em;
    text-align: center;
}

.tablesaw-stack tbody tr td.title {
    font-weight: 500;
}

@media (max-width: 1024px) {
    .tablesaw-stack tbody tr td.title {
        font-weight: normal;
    }
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
    display: none;
}

.tablesaw-stack tbody tr:nth-child(1),
.tablesaw-stack tbody tr:nth-child(3),
.tablesaw-stack tbody tr:nth-child(5),
.tablesaw-stack tbody tr:nth-child(7),
.tablesaw-stack tbody tr:nth-child(9) {
    background: #e8e8e8;
}

.tablesaw-contanct {
    border-collapse: collapse;
}

.tablesaw-contanct input {
    display: initial;
}

.tablesaw-contanct tbody td {
    border-top: 1px solid #eee;
    border-left: 1px solid #00b4ff;
    border-right: 1px solid #eee;
}

.tablesaw-contanct tbody td.title {
    border-left: 5px solid #00b4ff;
    border-bottom: 1px solid #fff;
    font-family: 'Noto Sans TC', sans-serif;
    background: #eee;
    color: #999;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 1px;
}

.tablesaw-contanct tbody td.title,
.tablesaw-contanct tbody td.fill {
    text-align: left;
    padding: 2.5% 2.5%;
}

.tablesaw-contanct tbody td.title span {
    background: #00b4ff;
    border-radius: 2px;
    padding: 1px 3px;
    margin: 0 0 0 10px;
    font-size: 0.5em;
    display: inline-block;
    color: #fff;
}

.tablesaw-contanct tbody td:last-child.title {
    background: none;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.tablesaw-contanct tbody tr:nth-child(1),
.tablesaw-contanct tbody tr:nth-child(3),
.tablesaw-contanct tbody tr:nth-child(5) {
    background: none;
}

.tablesaw-contanct tbody td input,
.tablesaw-contanct tbody td select,
.tablesaw-contanct tbody td textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    border-radius: 2px;
    border: none;
    width: 70%;
    padding: 0.9% 0 0.9% 0.9%;
    font-size: 0.85em;
    background: #e3e2e1;
}

.tablesaw-contanct tbody td input.code,
.tablesaw-contanct tbody td select.code {
    width: 20%;
}

.tablesaw-contanct tbody td input.add {
    margin: 10px 0 0 0;
}

.tablesaw-contanct tbody td input[type=button],
.tablesaw-contanct tbody td input[type=submit] {
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
    padding: 8px 0;
    width: 25%;
    text-align: center;
    background: #000;
    cursor: pointer;
    border-radius: 2px;
    font-size: 1em;
}

.tablesaw-contanct tbody td.fill div {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    margin: 5% 33% 0 0;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}






/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
    /* Show the table cells as a block level element */
    .tablesaw-stack td,
    .tablesaw-stack th {
        text-align: left;
        display: block;
    }
    .tablesaw-stack tr {
        clear: both;
        display: table-row;
    }
    /* Make the label elements a percentage width */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: block;
        padding: 0 .6em 0 0;
        width: 30%;
        display: inline-block;
    }
    /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
    .tablesaw-stack th .tablesaw-cell-label-top,
    .tablesaw-stack td .tablesaw-cell-label-top {
        display: block;
        padding: .4em 0;
        margin: .4em 0;
    }
    .tablesaw-cell-label {
        display: block;
    }
    /* Avoid double strokes when stacked */
    .tablesaw-stack tbody th.group {
        margin-top: -1px;
    }
    /* Avoid double strokes when stacked */
    .tablesaw-stack th.group b.tablesaw-cell-label {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .tablesaw thead tr:first-child th {
        font-size: 0.8em;
    }
    .tablesaw-stack tbody tr td {
        font-size: 0.8em;
        text-align: left;
    }
}

@media (max-width: 703px) {
    .tablesaw-contanct tbody td.title {
        font-size: 0.75em;
    }
    .tablesaw-contanct tbody td.title {
        padding: 2% 2.5%;
    }
    .tablesaw-contanct tbody td.fill {
        padding: 3% 2.5%;
    }
}

@media (max-width: 39.9375em) {
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: none;
    }
    .tablesaw-stack tbody td,
    .tablesaw-stack tbody th {
        clear: left;
        float: left;
        width: 100%;
    }
    .tablesaw-cell-label {
        vertical-align: top;
    }
    .tablesaw-cell-content {
        max-width: 67%;
        display: inline-block;
    }
    .tablesaw-stack td:empty,
    .tablesaw-stack th:empty {
        display: none;
    }
}






/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
    .tablesaw-stack tr {
        display: table-row;
    }
    /* Show the table header rows */
    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: none !important;
    }
    td.title {
        max-width: 12em;
    }
    .tablesaw-stack td.title a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10em;
        max-width: 40vw;
    }
}