body {
    /*margin-top: 12px;*/
    /*padding: 0;*/
    /*font-family: "Open Sans", "Noto Sans TC", "Meiryo", "微軟正黑體", "Microsoft JhengHei", sans-serif;*/
    background-color: #f5f5f5;
}

.ui.segment {
    border: 1px solid #cfcfcf;
}

.ui.button, .ts.button {
    font-weight: 400;
    font-family: "Open Sans", "Noto Sans TC", "Meiryo", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

.ui.header, .ts.header {
    font-weight: 500;
}

.ui.grid.dialog {
    margin-top: 5vh!important;
}

.ui.grid.center {
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;
    /*text-align: center!important;*/
    min-height: 80vh!important;
}

.visually-hidden {
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

.ui.form .error.message {
    clear: both;
    margin-top: 2rem;
}
/* Mobile Only Hide */

@media only screen and (max-width: 767.98px) {
    [class*="tablet only"].segment:not(.mobile) {
        display: none !important;
    }

    [class*="tablet only"]:not(.mobile) {
        display: none !important;
    }

    [class*="computer only"].segment:not(.mobile) {
        display: none !important;
    }

    [class*="computer only"]:not(.mobile) {
        display: none !important;
    }

    [class*="large screen only"].segment:not(.mobile) {
        display: none !important;
    }

    [class*="large screen only"]:not(.mobile) {
        display: none !important;
    }

    [class*="widescreen only"].segment:not(.mobile) {
        display: none !important;
    }

    [class*="widescreen only"]:not(.mobile) {
        display: none !important;
    }
}

/* Tablet Only Hide */

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    [class*="mobile only"].segment:not(.tablet) {
        display: none !important;
    }

    [class*="mobile only"]:not(.tablet) {
        display: none !important;
    }

    [class*="computer only"].segment:not(.tablet) {
        display: none !important;
    }

    [class*="computer only"]:not(.tablet) {
        display: none !important;
    }

    [class*="large screen only"].segment:not(.tablet) {
        display: none !important;
    }

    [class*="large screen only"]:not(.tablet) {
        display: none !important;
    }

    [class*="widescreen only"].segment:not(.tablet) {
        display: none !important;
    }

    [class*="widescreen only"]:not(.tablet) {
        display: none !important;
    }
}

/* Computer Only Hide */

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    [class*="mobile only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="mobile only"]:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"]:not(.computer) {
        display: none !important;
    }

    [class*="large screen only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="large screen only"]:not(.computer) {
        display: none !important;
    }

    [class*="widescreen only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="widescreen only"]:not(.computer) {
        display: none !important;
    }
}

/* Large Screen Only Hide */

@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
    [class*="mobile only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="mobile only"]:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"]:not(.computer) {
        display: none !important;
    }

    [class*="widescreen only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="widescreen only"]:not(.computer) {
        display: none !important;
    }
}

/* Widescreen Only Hide */

@media only screen and (min-width: 1920px) {
    [class*="mobile only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="mobile only"]:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"].segment:not(.computer) {
        display: none !important;
    }

    [class*="tablet only"]:not(.computer) {
        display: none !important;
    }
}

/* Scrolling Table */

/* Opted in with the scrolling attribute on the mmt-table component. No
   breakpoint: auto shows no scrollbar while the table still fits, so this
   only ever acts when it is needed. */
.scrolling.table.container {
    overflow-x: auto;
}

/* the wrapper is the one that scrolls, so a table inside it must not do its
   own scrolling as well or there are two scrollbars nested in each other */
.scrolling.table.container .ui.table {
    display: table;
    overflow-x: visible;
}

/* Paginator In A Form */

/* A table inside a form sits in a narrower column than one filling the page,
   so its paginator runs out of room sooner. Keep the current page and the one
   either side of it; first and last item are always previous and next.
   The width matches where .ui.container steps up from 723px to 933px, since
   that is where the room actually appears. Only ever affects forms. */

@media only screen and (max-width: 991.98px) {
    .ui.form .ui.pagination.menu .item:not(:first-child):not(:last-child):not(.active):not(.active + .item):not(:has(+ .active)) {
        display: none !important;
    }
}

[v-cloak] {
  display: none;
}