@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #f8f8f8;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.pt-page-moveFromLeft {
    -webkit-animation: moveFromLeft .4s ease both;
    animation: moveFromLeft .4s ease both;
}

.pt-page-moveFromRight {
    -webkit-animation: moveFromRight .4s ease both;
    animation: moveFromRight .4s ease both;
}
.title-link {
    transition: all 0.35s ease-in-out;
}
    .title-link:hover {
        text-shadow: -1px 0px #fff, 0px 1px #fff,0 0 5px rgba(0, 61, 0, .3);
    }

.btn-ban {
    pointer-events: none;
    cursor: default;
}

.login-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#btn-back-to-top {
    z-index: 15;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
    display: none;
    border-radius: 50%;
    background-color: #0a58ca !important;
    border-color: #0a58ca;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 9px -4px;
}

@font-face {
    font-family: 'Font Awesome 5 Free Solid';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

.icon-input {
    font-family: 'Microsoft JhengHei','Font Awesome 5 Free Solid', sans-serif;
}
.fit-icon {
    width:20px;
    margin-right:6px;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.swal-footer {
    text-align: center;
}

.invalid-forget {
    text-align: left;
    padding-left: 6rem;
}

.invalid-reg {
    text-align: left;
    padding-left: 8rem;
}
@-webkit-keyframes moveFromLeft {
    from {
        -webkit-transform: translateX(-100vw);
    }
}

@keyframes moveFromLeft {
    from {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
        opacity: .1;
    }
}

@-webkit-keyframes moveFromRight {
    from {
        -webkit-transform: translateX(100vw);
    }
}

@keyframes moveFromRight {
    from {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
        opacity: .4;
    }
}


.loader {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 40px 0 #198754;
    position: relative;
    animation: loader 0.8s ease-in-out alternate infinite;
    animation-delay: 0.32s;
    top: 50%;
    margin: -50px auto 0;
}

    .loader::after, .loader::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-shadow: 0 40px 0 #198754;
        animation: loader 0.8s ease-in-out alternate infinite;
    }

    .loader::before {
        left: -30px;
        animation-delay: 0.48s;
    }

    .loader::after {
        right: -30px;
        animation-delay: 0.16s;
    }

@keyframes loader {
    0% {
        box-shadow: 0 40px 0 #198754;
    }

    100% {
        box-shadow: 0 20px 0 #198754;
    }
}

/* Shine */
.logo figure {
    position: relative;
    cursor:pointer;
}

    .logo figure::before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
    }

    .logo figure:hover::before {
        -webkit-animation: shine 1s;
        animation: shine 1s;
    }

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.vh-100 {
    height: 100vh !important;
}

/* Layout skeleton */
.contain {
    align-items: stretch;
    display: flex;
    margin: 0 auto;
    width: 100%;
}

.wrapper {
    align-items: stretch;
    display: flex;
    margin: 0 auto;
    width: 80%;
}

#sidebar {
    position: fixed;
    max-width: 264px;
    min-width: 264px;
    transition: all 0.35s ease-in-out;
    box-shadow: 0 0 25px 0 rgba(49, 57, 66, 0.2);
    z-index: 1050;
    background: rgb(196,250,212);
    background: linear-gradient(180deg, rgba(196,250,212,1) 0%, rgba(255,255,255,1) 35%);
}

    /* Sidebar collapse */

    #sidebar.collapsed {
        margin-left: -264px;
    }

.main {
    margin: 0 2rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

    .main.manege {
        margin-left: 296px;
    }

    .main.collapsed {
        margin-left: 32px;
    }

.btn-nav-toggle {
    color: white;
    border: 0px;
    transition: 0.3s;
    background-color: transparent;
}

    .btn-nav-toggle:hover {
        box-shadow: 0 0 10px rgba(49, 57, 66, 0.5);
    }

    .btn-nav-toggle:focus {
        box-shadow: 0 0 0 .25rem rgba(0,127,67,.25);
    }

.btn-nav-back {
    color: white;
    border: 0px;
    transition: 0.3s;
    background-color: transparent;
}

    .btn-nav-back:hover {
        text-shadow: 0 0 10px rgba(49, 57, 66, 0.5);
    }

.navbar-brand {
    cursor: default;
    user-select: none;
}

.sidebar-logo {
    padding: 1.15rem 1.5rem;
}

    .sidebar-logo a {
        color: #212529;
        font-size: 1.25rem;
        font-weight: 600;
    }

.sidebar-nav {
    padding: 0;
}

.sidebar-header {
    color: #818181;
    font-size: .75rem;
    padding: 1.5rem 1.5rem .375rem;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #212529;
    position: relative;
    display: block;
    font-size: 1rem;
    transition: .3s ease-out;
}
    a.sidebar-link:hover {
        background-color: rgba(185,219,247,.4);
        text-shadow: 0 0 2px white;
    }
    a.sidebar-link.active {
        font-weight: bold;
        background-color: rgba(212,239,221,.5);
        pointer-events: none;
        cursor: default;
    }

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.1rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}
.sidebar-icon {
    width: 30px;
    text-align: center;
    padding-right: .5rem;
}
.search {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    flex: 1;
    max-width: 100vw;
}

.grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.top-fit {
    top: 3.5rem !important;
}

.btn-teal {
    color: #212529;
    background-color: #20c997;
    border-color: #20c997;
}

    .btn-teal:hover {
        color: #212529;
        background-color: #1ab98a;
        border-color: #15ab7f;
    }

    .btn-check:focus + .btn-teal, .btn-teal:focus {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(23, 215, 127, .25);
    }

.btn-input {
    width: 5rem;
    font-size: 1.2rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.table-striped-columns > :not(caption) > tr > :nth-child(2n-1) {
    font-weight: bold;
    color: #146c43;
    vertical-align: middle;
    text-align: center;
}

.table-striped-columns > :not(caption) > tr > :nth-child(2n) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.table-res {
    overflow-x: scroll;
}

.table-rwd {
    margin-bottom: 0;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-rwd tbody tr.click {
        cursor: pointer;
    }

    .table-rwd th {
        min-width: 6rem;
        text-align: center;
    }

    .table-rwd td {
        vertical-align: middle;
        text-align: center;
    }

        .table-rwd td.string {
            vertical-align: middle;
            text-align: left;
        }

.table-rwd-list {
    margin-bottom: 0;
}
    .table-rwd-list tbody tr.click {
        cursor: pointer;
    }
    .table-rwd-list th {
        min-width: 6rem;
        text-align: center;
    }
    .table-rwd-list td {
        vertical-align: middle;
        text-align: center;
    }
        .table-rwd-list td.string {
            vertical-align: middle;
            text-align: left;
        }
        .table-rwd-list td.title {
            width: 45%;
            text-align: left;
        }
    .table-rwd-list th.print, td.print {
        display: none;
    }

.page-link {
    color: #008356;
}

.page-item.active .page-link {
    background-color: #008356;
    border-color: #008356;
}

.page-link:hover {
    color: #198754;
    background-color: #e9efea;
    border-color: #dee2e6;
}

.page-link:focus {
    color: #212529;
    box-shadow: 0 0 0 .25rem rgba(0, 127, 67, .25);
}

.search-main {
    position: relative;
}

.icon-search {
    position: absolute;
    top: .2rem;
    background: transparent;
    border: 0;
    right: 1rem;
    color: #198754;
    font-size: 1.25rem;
}

    .icon-search:focus {
        box-shadow: 0 0 0 .25rem rgba(0, 127, 67, .25);
    }

    .icon-search.user {
        top: .5rem;
        right: 1.5rem;
    }

.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
}

    .form-signin .form-control:focus {
        z-index: 2;
    }

.input {
    border-radius: 0;
}

.form-disabled {
    user-select: none;
    pointer-events: none;
    background-color: rgba(233,236,239,.8);
}

.form-signin .input:first-of-type {
    margin-bottom: -1px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.form-signin .input:last-of-type {
    margin-bottom: 10px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
.autocomplete-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
}

#viewport {
    position: relative;
}
    #viewport > canvas, #viewport > video {
        max-width: 100%;
        width: 100%;
    }
        #viewport > canvas.drawing, #viewport > canvas.drawingBuffer {
            position: absolute;
            left: 0;
            top: 0;
        }

/* Responsive */
@media (min-width:768px) {
    .content {
        width: auto;
    }
}
@media (max-width:576px) {
    .w-sm-100 {
        width: 100% !important;
    }
}
@media (max-width:768px) {
    .main {
        margin: 0;
    }

    .wrapper {
        width: 100vw;
    }

    .container-fluid {
        width: 100vw !important;
    }

        .container-fluid.manege {
            width: 100% !important;
        }

    #sidebar {
        margin-left: -264px;
    }

        #sidebar.collapsed {
            margin-left: 0px;
        }

    .main.manege {
        margin-left: 0px;
    }

    .main.collapsed {
        margin-left: 264px;
    }

    .table-res {
        overflow: hidden;
    }

    .table-rwd {
        border: 0;
        width: calc(100vw - 56px);
    }

        .table-rwd caption {
            font-size: 1.3em;
        }

        .table-rwd thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .table-rwd tr {
            border: 1px solid #ddd;
            border-radius: .25rem;
            display: block;
            margin-bottom: .625em;
        }

            .table-rwd tr:nth-child(2n+1) {
                background-color: #f3f3f3;
            }

        .table-rwd td {
            display: block;
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 30%;
            text-align: left;
        }

            .table-rwd td::before {
                content: attr(data-label);
                /* Now like a table header */
                position: absolute;
                vertical-align: middle;
                text-align: center;
                /* Top/left values mimic padding */
                top: 0;
                left: 6px;
                width: 20%;
                padding: .5rem 10px;
                white-space: nowrap;
                font-weight: bold;
            }

            .table-rwd td:last-child {
                border-bottom: 0;
            }
}
@media only screen and (max-width:991.98px) {
    .table-rwd-list {
        border: 0;
        width: 100%;
    }

        .table-rwd-list caption {
            font-size: 1.3em;
        }

        .table-rwd-list thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .table-rwd-list tr {
            border: 1px solid #ddd;
            border-width: 0 0 1px;
            display: grid;
            padding: .25rem;
            grid-template-columns: 2rem auto 6rem;
            gap: .15rem;
        }

        .table-rwd-list > tbody > tr:nth-of-type(odd) {
            background-color: #f6f6f6;
        }

        .table-rwd-list > tbody > tr:nth-of-type(odd) {
            --bs-table-accent-bg: transparent;
        }

        .table-rwd-list td {
            display: grid;
            border: none;
            text-align: left;
            padding: 0;
        }

            .table-rwd-list td.row-cross {
                grid-row: 1 / span 2;
                text-align: center;
            }

            .table-rwd-list td.title {
                grid-column: 2;
                width: auto;
            }

            .table-rwd-list td.col-end {
                grid-row: 1;
                grid-column: 3;
                text-align: right;
                padding-right: .5rem;
            }

            .table-rwd-list td:last-child {
                border-bottom: 0;
            }

            .table-rwd-list td.count {
                text-align: right;
                padding-right: 1.8rem;
            }

                .table-rwd-list td.count::after {
                    content: "\4EF6";
                    position: absolute;
                    right: 1rem;
                }
            .table-rwd-list td.print {
                display: none;
            }

        .table-rwd-list tfoot tr td {
            display: inline;
            grid-column: span 3;
        }
}