html {
    background-color: #f4f6f9;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #FFF;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #006993;
    border-radius: 20px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #006993;
    }

::-moz-selection { /* Code for Firefox */
    color: #FFF;
    background: #006993;
}

::selection {
    color: #FFF;
    background: #006993;
}


body {
    font-family: '微軟正黑體',sans-serif;
    font-size: 16px;
    color: #231815;
    font-weight: 700;
}


a, a:active, a:focus, a:visited {
    color: #000;
    text-decoration: none !important;
}

    a:hover {
        color: #000;
        text-decoration: underline;
    }

p {
    font-weight: 400 !important;
}

img {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
}


/* form autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid transparent;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}


.brand-image {
    position: relative;
    top: 5px;
}


/* TIME  */
.time-display {
    padding: 1rem;
    text-align: right;
    margin-right: -1rem;
}



/* format */
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.hidden {
    display: none !important;
}

.display-inline {
    display: inline-block !important;
}

.st-line {
    text-decoration: line-through;
}


hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.hr-black {
    margin-top: 0rem;
    margin-bottom: .2rem;
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: #000;
    height: 1px;
}


.mt-0 {
    margin-top: 0 !imporatant;
}




ul {
    list-style: none;
}


.fixed-bottom {
    z-index: 1020;
}

.z-index-999 {
    z-index: 999 !important;
}

.container-fluid.plr-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}


.plr-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.box-shadow {
    box-shadow: 0 0 20px rgba(41, 51, 47,.3);
}




/* badge */
.button-status {
    color: #FFF !important;
    font-size: .8rem !important;
    font-weight: 300;
    letter-spacing: 1px;
    white-space: nowrap !important;
    border-radius: 20px !important;
    padding: 5px 20px !important;
    margin: .3rem;
}


.badge-green {
    background: #0c907d !important;
    color: #fff !important;
}

.badge-green-light {
    background: #cce490 !important;
    color: #0c907d !important;
}

.badge-green-dark {
    background: #0d627a !important;
    color: #FFF !important;
}

.badge-blue {
    background-color: #4f81c7 !important;
    color: #FFF !important;
}

.badge-red {
    background: #ff6363 !important;
    color: #FFF !important;
}

.badge-grey {
    background: #ccc !important;
    color: #999 !important;
}

.badge-orange {
    background: #f57f17 !important;
    color: #fff !important;
}

.badge-yellow {
    background: #ffcc00 !important;
    color: #000 !important;
}






/* BTN */
a.btn {
    cursor: pointer;
    font-weight: 300 !important;
}

button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn, .btn:focus {
    color: #000;
    outline: none !important;
    margin: .3rem;
    font-weight: 300 !important;
    letter-spacing: .1rem;
    font-size: 1rem;
}

/* primary */
.btn-primary {
    color: #ffffff;
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: none;
}



/* blue */
.btn-blue, .btn-blue:link {
    color: #ffffff !important;
    background-color: #4f81c7;
    border-color: #4f81c7;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

    .btn-blue.outline, .btn-blue.outline:link {
        color: #4f81c7 !important;
        background-color: transparent !important;
        border-color: #4f81c7 !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-blue:hover, .btn-blue:active, .btn-blue:focus,
        .btn-blue.outline:hover, .btn-blue.outline:active, .btn-blue.outline:focus {
            color: #FFF !important;
            background: #183f9a !important;
            border-color: #183f9a !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }


/* green */
.btn-green, .btn-green:link {
    color: #ffffff !important;
    background-color: #4AA96C;
    border-color: #4AA96C;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    cursor: pointer;
}

    .btn-green.outline, .btn-green.outline:link {
        color: #4AA96C !important;
        background-color: transparent !important;
        border-color: #4AA96C !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-green:hover, .btn-green:active, .btn-green:focus,
        .btn-green.outline:hover, .btn-green.outline:active, .btn-green.outline:focus {
            color: #FFF !important;
            background: #18933b !important;
            border-color: #18933b !important;
            box-shadow: 0 5px 14px 0 rgba(36, 189, 148, 0.3) !important;
        }






/* green-dark */
.btn-green-dark, .btn-green-dark:link {
    color: #ffffff !important;
    background-color: #0d627a;
    border-color: #0d627a;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    cursor: pointer;
}

    .btn-green-dark.outline, .btn-green-dark.outline:link {
        color: #0d627a !important;
        background-color: transparent !important;
        border-color: #0d627a !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-green-dark:hover, .btn-green-dark:active, .btn-green-dark:focus,
        .btn-green-dark.outline:hover, .btn-green-dark.outline:active, .btn-green-dark.outline:focus {
            color: #FFF !important;
            background: #073845 !important;
            border-color: #073845 !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }



/* red */
.btn-red, .btn-red:link {
    color: #ffffff !important;
    background-color: #F54748;
    border-color: #F54748;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

    .btn-red.outline, .btn-red.outline:link {
        color: #F54748 !important;
        background-color: transparent !important;
        border-color: #F54748 !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-red:hover, .btn-red:active, .btn-red:focus,
        .btn-red.outline:hover, .btn-red.outline:active, .btn-red.outline:focus {
            color: #FFF !important;
            background: #e60000 !important;
            border-color: #e60000 !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }


/* grey */
.btn-grey, .btn-grey:link {
    color: #999 !important;
    background-color: #ccc;
    border-color: #ccc;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

    .btn-grey.outline, .btn-grey.outline:link {
        color: #999 !important;
        background-color: transparent !important;
        border-color: #ccc !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-grey:hover, .btn-grey:active, .btn-grey:focus,
        .btn-grey.outline:hover, .btn-grey.outline:active, .btn-grey.outline:focus {
            color: #FFF !important;
            background: #999 !important;
            border-color: #999 !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }


/* purple */
.btn-purple, .btn-purple:link {
    color: #ffffff !important;
    background-color: #415e91;
    border-color: #415e91;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

    .btn-purple.outline, .btn-purple.outline:link {
        color: #415e91 !important;
        background-color: transparent !important;
        border-color: #415e91 !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-purple:hover, .btn-purple:active, .btn-purple:focus,
        .btn-purple.outline:hover, .btn-purple.outline:active, .btn-purple.outline:focus {
            color: #FFF !important;
            background: #2f456a !important;
            border-color: #2f456a !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }


/* orange */
.btn-orange, .btn-orange:link {
    color: #ffffff !important;
    background-color: #F48B29;
    border-color: #F48B29;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

    .btn-orange.outline, .btn-orange.outline:link {
        color: #F48B29 !important;
        background-color: transparent !important;
        border-color: #F48B29 !important;
        box-shadow: none;
        border-radius: 4px;
        padding: .2rem 2rem;
    }

        .btn-orange:hover, .btn-orange:active, .btn-orange:focus,
        .btn-orange.outline:hover, .btn-orange.outline:active, .btn-orange.outline:focus {
            color: #FFF !important;
            background: #FEA82F !important;
            border-color: #FEA82F !important;
            box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
        }



.select-dateTime-delete-btn .btn-delete {
    margin-top: 2rem;
}



/* border */
.border-0 {
    border: 1px solid transparent !important;
}

.border-right {
    border-right: 1px solid #bdcef5;
}




/* BG */
.bg-white {
    background: #FFF !important;
}

.bg-white-light {
    background: #F2f2f2 !important;
}

.bg-black {
    background: #3c4977 !important;
}

.bg-blue {
    background: #3D61D9 !important;
}


.bg-red-gradient {
    background: rgba(0, 105, 147) !important;
    background: linear-gradient(to top, rgba(0, 105, 147,1) 0%, rgba(75, 180, 103,1) 100%) !important;
}






/* text */
.upper {
    text-transform: uppercase !important;
}

.bold {
    font-weight: 700 !important;
}

.bold-500 {
    font-weight: 500 !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}



/* font-size */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.3rem;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.2;
}

.font-12 {
    font-size: .6rem !important;
}

.font-14 {
    font-size: .8rem !important;
}

.font-16 {
    font-size: 1rem !important;
}

.font-18 {
    font-size: 1.3rem !important;
}

.font-24 {
    font-size: 1.5rem !important;
}

.font-24 {
    font-size: 1.5rem !important;
}

.font-32 {
    font-size: 2rem !important;
}

.font-48 {
}


.font-80 {
    font-size: 5rem !important;
}



/* text color */
.red {
    color: #e60000 !important;
}

.red-dark {
    color: #ab0f25 !important;
}

.red2 {
    color: #e42716 !important;
}

.orange {
    color: #ef6e20 !important;
}


.navy {
    color: #323e48 !important;
}




.black {
    color: #231815 !important;
}

.black2 {
    color: #333 !important;
}

.black3 {
    color: #666 !important;
}


.white {
    color: #FFF !important;
}

.grey {
    color: #999 !important;
}

.grey2 {
    color: #ccc !important;
}



.blue {
    color: #035aa6 !important;
}

.blue02 {
    color: #006993 !important;
}


.yellow {
    color: #feb72b !important;
}

.purple {
    color: #4a47a3 !important;
}


.green {
    color: #24BD94 !important;
}



/* badge */
.navbar-badge.badge-warning {
    color: #FFF;
    background-color: #ff5d6c;
    position: absolute;
}

.os-content nav {
    position: relative;
    z-index: 99;
}



/* Top NAV */
.navbar {
    background: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2) !important;
    color: #3D61D9;
}

    .navbar a {
        color: #323e48 !important;
    }

.main-header {
}

.top-nav-icon {
    color: #fff;
    font-size: 1.5rem;
}

.user-login-menu.dropdown-menu {
    border: 1px solid rgba(255,255,255,.7);
    background-color: rgba(255,255,255,.7);
}

.user-login-menu ul {
    list-style: none !important;
}

.user-login-menu .list-group {
    padding: 1rem;
    color: #040638;
    text-align: left;
}


.notice-menu .list-group {
    padding: 1rem;
    color: #040638;
    text-align: left;
}

.notice-menu .notice-wrapper {
    padding: .5rem;
    border-bottom: 1px solid #f2f2f2;
}

    .notice-menu .notice-wrapper span {
        font-size: .5rem;
        color: #999 !important;
    }


.dropdown-item.logout.active, .dropdown-item.logout:active, .dropdown-item.logout:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: #ff5d6c;
}

.m-copyright {
    font-size: 10px;
    color: #999;
}


/* Left Sidebar */
.nav-qr-img {
    width: 100px;
    margin: 1rem auto;
}


.nav-sidebar .nav-item > .nav-link {
    color: #dae1e7;
}

.nav-sidebar > .nav-item > .nav-link:focus,
.nav-sidebar > .nav-item > .nav-treeview:focus {
    border-radius: 4px;
}


.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #18933b;
    color: #fff;
    border-radius: 4px;
}


.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar > .nav-item > .nav-link:hover {
    background-color: #0080b3 !important;
    color: #fff !important;
    border-radius: 4px;
}


.nav-sidebar > .nav-item > .nav-treeview {
    background: #006993 !important;
    border-radius: 4px;
}


.nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255,.7) !important;
    padding-left: 2.5rem;
}


    .nav-treeview > .nav-item > .nav-link.active {
        background: #fff !important;
        color: #006993 !important;
    }

    .nav-treeview > .nav-item > .nav-link:hover {
        background: #fff !important;
        color: #006993 !important;
        border-radius: 4px;
    }

.dropdown-menu {
    border: 1px solid #FFF;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #006993 !important;
}


#sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.8)
}


.brand-link .brand-image {
    float: left;
    line-height: .8;
    margin-left: .3rem;
    margin-right: .5rem;
    margin-top: -3px;
    max-height: 50px;
    width: auto;
}






/* footer */
.main-footer {
    background: #ffffff;
    border-top: 1px solid #fff;
    color: #869099;
}


/* Breadcrumb */
.content-header .breadcrumb {
    font-size: .8rem;
}

.breadcrumb-item a {
    color: #999;
}

.breadcrumb-item.active {
    color: #006993;
}



/* Modal */
/* common */
.modal-common-wrapper {
    border: 3px solid #4e8e3e;
}

    .modal-common-wrapper .modal-header,
    .modal-notice-wrapper .modal-header {
        border-bottom: 1px solid transparent;
    }

.modal-notice-wrapper .modal-body {
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll;
}


.modal-common-wrapper .modal-footer,
.modal-notice-wrapper .modal-footer {
    border-top: 1px solid transparent;
}

.modal-form-style {
    margin: 1rem 0;
    padding: 1rem;
}

    .modal-form-style label {
        font-weight: 300 !important;
        color: #000;
    }


.modal-title {
    color: #24BD94 !important;
}


.modal-body table {
    white-space: nowrap;
}

    .modal-body table td.title {
        color: #4e8e3e;
    }

    .modal-body table td.fill {
        color: #666;
    }

.modal-body img {
    margin: 0 auto;
}

.modal-footer {
    text-align: right;
}

.modal-header {
    border-bottom: 1px solid transparent;
    padding: 1rem 1rem 0rem 1rem
}


.addNewitem-modal, .viewHistory-modal, .viewuserInfor-modal {
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    padding: 1rem;
}








/* table */
table {
    width: 100%;
}

    table a {
        color: #ef6e20 !important;
        font-weight: 500;
    }

        table a:hover {
            color: #323e48 !important;
        }

.bootstrap-datetimepicker-widget table td {
    white-space: normal !important;
}

table th, table td {
    white-space: nowrap;
}


table tr, table th {
    text-align: center;
    font-weight: 400 !important;
}

    table th button {
        padding: .3rem .8rem !important;
    }


.text-wrap-balance {
    text-wrap: balance;
}


.table-bordered > thead > tr > th {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #FFF;
    text-align: center;
    white-space: nowrap !important;
}

.table-wrapper {
    margin: 1rem 0rem 1rem 0rem;
}

    .table-wrapper table {
        background: #FFF;
        box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
    }


    .table-wrapper thead {
        background: #fff !important;
        color: #006993;
    }

    .table-wrapper th, .table-sub-title {
        font-weight: 800 !important;
    }


    .table-wrapper tbody tr:nth-of-type(odd) {
        background-color: #f2f2f2;
    }

    .table-wrapper tbody tr:hover {
        background-color: #d2d9e0;
    }

    .table-wrapper a {
        color: #323e48;
    }

        .table-wrapper a:hover {
            color: #FFF;
        }



/* form */
label {
    font-size: .8rem;
    color: #999;
    margin-bottom: .3rem;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.form-control {
    padding: 0rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid #4f81c7;
    border-radius: 0.25rem;
}

textarea.form-control {
    padding: 1rem !important;
}



/* timepicker-choose-box */
.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #006993;
    border: 1px solid #006993;
    border-radius: 0.25rem;
}

.form-control:focus {
    border: 1px solid #006993;
}



/* Datetime picker dropdown */
.bootstrap-datetimepicker-widget {
    min-width: 300px;
    padding: 1rem !important;
}


    .bootstrap-datetimepicker-widget.dropdown-menu {
        min-width: 300px !important;
    }





/* Table page BTN */
.page-item.disabled .page-link {
    color: #999;
    background-color: #CCC;
    border-color: #CCC;
}


.page-item.active .page-link {
    z-index: 1;
    color: #ffffff;
    background-color: #006993;
    border-color: #006993;
    outline: none !important;
    box-shadow: none !important;
}

.page-item .page-link {
    z-index: 1;
    color: #999;
    background-color: #fff;
    border-color: #fff;
    outline: none !important;
    box-shadow: none !important;
}

    .page-item .page-link:hover {
        color: #fff;
        background-color: #ab0f25;
        border-color: #ab0f25;
    }



/* main-content-wrapper */
.content-wrapper {
    background: #fff;
}

.layout-footer-fixed .wrapper .content-wrapper {
    margin-bottom: 0;
}


/* checkbox */
.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #FFF;
    border: #006993 solid 1px;
    box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0);
}


.custom-control-input:checked ~ .custom-control-label::before {
    color: #ffffff;
    border-color: #006993;
    background-color: #006993;
    box-shadow: none;
}

/* red-check */
.custom-control-label.red-check::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #FFF;
    border: #FF5757 solid 1px;
    box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0);
}

.custom-control-input:checked ~ .custom-control-label.red-check::before {
    color: #ffffff;
    border-color: #FF5757;
    background-color: #FF5757;
    box-shadow: none;
}



/* login page */
.login-page {
    background: white;
}

.login-wrapper {
    background: #ffffff;
    border: 1px solid white;
    border-radius: 10px;
    color: #666;
    padding: 1rem;
    box-shadow: 0 0 20px rgba(24, 147, 59,.3);
}


/* copyright */
.sidebar-collapse .copyright {
    display: none !important;
}

.copyright {
    padding: 1rem;
    color: white;
    font-size: .5rem;
    position: absolute;
    bottom: 0%;
    width: 100%;
    left: 0%;
}


.sidebar-collapse .nav-treeview {
    display: none !important;
}

.sidebar-collapse .nav-sidebar:hover .menu-open .nav-treeview {
    display: block !important;
}





/* index */
.content-wrapper > .content {
    padding: 1rem 2rem 2rem 2rem;
}

.content-header h1 {
    font-size: 1.5rem;
}


.main-content-wrapper {
    padding-bottom: 5rem;
}


.top-btn-gp {
    margin: 1rem 0;
}


.form-all-wrapper {
    background: #FFF;
    padding: 1rem;
    clear: both;
    box-shadow: 0 0 20px rgba(195, 205, 213,.5);
    border: 1px solid #FFF;
    border-radius: 4px;
}

.form-contents h4 {
    color: #ef6e20 !important;
}

.form-frame {
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    padding: 1rem;
}



.form-title {
    color: #323e48 !important;
    font-size: 1.2rem;
}



/* top-table-filter */
.top-table-filter {
    border: 1px solid #006993;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 3rem;
}

.btn-search-filter {
    position: relative;
    top: 40%;
}


textarea {
    resize: none;
    overflow-y: scroll;
    height: 100px;
}


/* border */
.border-red {
    border: 1px solid #006993;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 3rem;
}



/* delete btn */
.delete-btn-sty {
    position: absolute;
    top: 23px;
}



#calendar a {
    color: #f2f2f2 !important;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: .8rem;
}


    #calendar a:hover {
        color: #FFF !important;
    }



/* index */
.map-wrapper {
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(24, 147, 59,.3);
    border: 4px solid #FFF;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}


.weather-wrapper {
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(24, 147, 59,.3);
    border: 4px solid #FFF;
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
}


.carStatus-wrapper {
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(24, 147, 59,.3);
    border: 4px solid #FFF;
    border-radius: 4px;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

.visitorStatus-wrapper {
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(24, 147, 59,.3);
    border: 4px solid #FFF;
    border-radius: 4px;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}


    .carStatus-wrapper h5, .visitorStatus-wrapper h5 {
        color: #666;
        font-size: 1rem;
    }

.status-frame {
    border: 1px solid #94D0CC;
    border-radius: 4px;
    padding: .5rem;
    width: 150px;
    margin: .5rem;
}

    .status-frame .result {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 0;
    }

    .status-frame .title {
        text-align: right;
        font-size: 1rem;
        margin-bottom: 0;
        color: #333;
        font-weight: 800;
    }


/* transport  */
.nav-item a {
    color: #999;
}

.nav-tabs .nav-item.show .nav-link {
    color: #999;
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
}

.nav-tabs .nav-link.active {
    color: #666;
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
}

.locationStatus-wrapper {
    width: 100%;
    background: white;
    /*box-shadow: 0 0 10px rgba(24, 147, 59,.3);*/
    border: 4px solid #FFF;
    border-radius: 4px;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

    .locationStatus-wrapper h5 {
        color: #666;
        font-size: 1.2rem;
        margin-bottom: .5rem;
    }

    .locationStatus-wrapper .status-frame {
        border: 0px solid #94D0CC;
        border-radius: 4px;
        padding: 1.5rem;
        width: 100%;
        margin: .5rem;
    }


        .locationStatus-wrapper .status-frame .result {
            font-size: 2rem;
            font-weight: 800 !important;
            margin-bottom: 0;
        }

        .locationStatus-wrapper .status-frame .title {
            text-align: right;
            font-size: 1.2rem;
            margin-bottom: 0;
            color: #333;
            font-weight: 800;
        }

    .locationStatus-wrapper .sub-title {
        font-size: 1.2rem;
        color: #006993;
        margin: 0 0 1rem 0;
    }

    .locationStatus-wrapper hr {
        margin: 1.5rem 0;
    }

.infor-details-wrapper {
    border: 1px solid #94D0CC;
    border-radius: 4px;
    padding: 1rem;
    width: 100%;
    margin: 1rem 0;
    position: relative;
}

.bg-light-green {
    background: #edf7f7;
    box-shadow: 0 0 20px rgba(148, 208, 204,.3);
}


.vl {
    border-left: 1px solid #94D0CC;
    height: 140px;
    position: absolute;
}


.vl02 {
    border-left: 1px solid #94D0CC;
    height: 140px;
    position: relative;
}



/* chart text color */
.weekdays-text {
    color: #0092f6;
    font-weight: 800 !important;
}

.weekend-text {
    color: #00d4c7;
    font-weight: 800 !important;
}

.holiday-text {
    color: #EF4F4F;
    font-weight: 800 !important;
}


/* api btn */
.api-btn, .api-btn.btn:focus {
    font-size: 1.5rem;
    font-weight: 800 !important;
    color: #4bb467;
}

.api-data-wrapper {
    margin-bottom: 1rem;
}

.hr-green {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid #4bb467;
}

.api-data-wrapper .sub-title {
    color: #333;
    font-weight: 800;
    font-size: 1.5rem;
}

.api-data-wrapper .description {
    color: #666;
    font-weight: 500;
    font-size: 1rem;
}

.api-data-wrapper .dl-link {
    color: #0099ff;
    text-decoration: underline !important;
}

    .api-data-wrapper .dl-link:focus, .api-data-wrapper .dl-link:hover {
        color: #0039e6;
    }



/* setting  */
.btn-setting {
    color: #333 !important;
    background-color: transparent !important;
    border: 1px solid #333 !important;
    padding: .2rem 2rem;
}

    .btn-setting:focus, .btn-setting:active, .btn-setting:visit {
        color: #333 !important;
        background-color: transparent !important;
        border: 1px solid #333 !important;
    }

.modal-title {
    color: #333 !important;
}

.setting-table-wrapper {
}

    .setting-table-wrapper th {
        background: #006993;
        color: #fff;
    }

    .setting-table-wrapper .table-sub-title {
    }

    .setting-table-wrapper .btn-info, .btn-light {
        font-size: 1rem !important;
        top: -5px !important;
    }

    .setting-table-wrapper .btn-info {
        color: #ffffff;
        background-color: #009933;
        border-color: #009933;
        box-shadow: none;
    }


    .setting-table-wrapper .btn-light {
        color: #1F2D3D;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
        box-shadow: none;
    }


/* calendar_settings */
.btn-upload {
    position: relative;
    top: 12px;
    left: 15px;
}



/* weather  */
.weather-wrapper {
    padding: 1rem;
}

    .weather-wrapper ul {
        padding-left: 0;
    }

    .weather-wrapper .weather-content {
        border: 1px solid #94D0CC;
        border-radius: 4px;
        padding: .2rem .3rem;
        margin-bottom: 1rem;
    }


    .weather-wrapper .weather-icon {
        font-size: 3.5rem;
        padding-left: 1rem;
    }

        .weather-wrapper .weather-icon .icon01 {
            color: #F9B208;
        }

        .weather-wrapper .weather-icon .icon02 {
            color: #0F52BA;
        }

        .weather-wrapper .weather-icon .icon03 {
            color: #393E46;
        }

        .weather-wrapper .weather-icon .icon04 {
            color: #77ACF1;
        }


        .weather-wrapper .weather-icon .icon05 {
            color: #687980;
        }

        .weather-wrapper .weather-icon .icon06 {
            color: #FFD523;
        }





    .weather-wrapper .weather-text {
        font-weight: 800;
        text-align: right;
        padding-top: 1rem;
    }


        .weather-wrapper .weather-text span {
            font-size: 1rem !important;
            color: #333;
        }


    .weather-wrapper .weather-text-blk {
        color: #333 !important;
    }


    .weather-wrapper .weather-text-green {
        color: #50CB93 !important;
    }


    .weather-wrapper .weather-text-orange {
        color: #FF7600 !important;
    }


    .weather-wrapper .weather-text-red {
        color: #CD113B !important;
    }




/* update 20210823  */
.road-wrapper {
}

    .road-wrapper h6 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .road-wrapper .status-frame {
        border: 0px solid #94D0CC;
        border-radius: 4px;
        padding: 1rem;
        width: 100%;
    }

        .road-wrapper .status-frame.border-left {
            border-left: 1px solid #94D0CC !important;
        }

        .road-wrapper .status-frame .title {
            font-weight: 800 !important;
        }

.infor-details-wrapper hr {
    margin: 1rem 0;
}





.checkbox-1x {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

.checkbox-2x {
    transform: scale(2);
    -webkit-transform: scale(2);
}



a.textLink {
    color: #0099ff !important;
    text-decoration: underline !important;
}


.form-group {
    margin-bottom: 0.5rem;
}



.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    color: #999;
}



.tv-setting-wrapper {
    padding: 1rem 1rem 0 1rem;
}

.tv-setting-contents {
    padding: 1rem 1rem 0 1rem;
}

    .tv-setting-contents ul {
        padding-left: 0;
    }


.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 2.25rem;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "選擇檔案";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
}


.file-delete-btn, .file-add-btn {
    margin: 0;
    font-size: 1rem;
}


.inline-display {
    display: inline-block !important;
}


.marquee-wrapper {
}


/* preview */
/* LED body */
.allframe01-wrapper {
    height: 1440px;
    width: 2560px;
}


.frame-hidden {
    display: none !important;
}

.preview-wrapper {
    height: 1440px;
    width: 2560px;
}

.preview-content {
    height: 1440px;
    width: 2560px;
    height: 360px;
}

.top-frame {
    width: 100%;
    height: 30px;
}

    .top-frame .item-sty01 {
        width: 853px;
        height: 30px;
        font-size: 22px;
    }


        .top-frame .item-sty01:first-child {
            padding-left: 3rem;
            text-align: left;
        }


        .top-frame .item-sty01:second-child {
            text-align: center;
        }


        .top-frame .item-sty01:last-child {
            text-align: right;
            padding-right: 3rem;
        }


        .top-frame .item-sty01 p {
            padding-left: 5px;
        }


        .top-frame .item-sty01 .img-wrapper {
            position: absolute;
            top: 0;
            left: 50%;
        }

            .top-frame .item-sty01 .img-wrapper img {
                height: 29px;
            }



.LED-frame {
    background: #fff;
    color: #000;
}

.frameBgBlk {
    background: #000 !important;
    color: #fff;
}


.bottom-frame {
    width: 100%;
    height: 40px;
}








/* preview-sty00 */
/* default LED only*/
.preview-sty00-1 {
    height: 360px;
    width: 2560px;
}

    .preview-sty00-1 img, .preview-sty00-1 source {
        height: 360px;
        width: 2560px;
    }


/* Top + default LED */
.preview-sty00-2 {
    height: 310px;
    width: 2560px;
}

    .preview-sty00-2 img, .preview-sty00-2 source {
        height: 310px;
        width: 2560px;
    }


/* preview-sty00-2  top frame*/
.top-frame-sty01 {
    width: 100%;
    height: 50px;
}

    .top-frame-sty01 .item-sty01 {
        width: 853px;
        height: 50px;
        font-size: 22px;
    }


        .top-frame-sty01 .item-sty01:first-child {
            padding-left: 3rem;
            text-align: left;
        }


        .top-frame-sty01 .item-sty01:second-child {
            text-align: center;
        }


        .top-frame-sty01 .item-sty01:last-child {
            text-align: right;
            padding-right: 3rem;
        }


        .top-frame-sty01 .item-sty01 p {
            padding-left: 5px;
        }


            .top-frame-sty01 .item-sty01 p.time {
                position: absolute;
                top: 10px;
            }

            .top-frame-sty01 .item-sty01 p.weather {
                position: relative;
                top: 10px;
            }

        .top-frame-sty01 .item-sty01 .img-wrapper {
            position: absolute;
            top: 0;
            left: 50%;
        }

            .top-frame-sty01 .item-sty01 .img-wrapper img {
                height: 50px;
            }




/* preview-sty01  */
/* LED*4 only */
.preview-sty01 {
    height: 360px;
    width: 640px;
}

    .preview-sty01 img, .preview-sty01 source {
        height: 360px;
        width: 640px;
    }


/* top + LED*4 */
.preview-sty01-2 {
    height: 330px;
    width: 640px;
}

    .preview-sty01-2 img, .preview-sty01-2 source {
        height: 330px;
        width: 640px;
    }


/* top + LED*4 + bottom */
.preview-sty01-3 {
    height: 240px;
    width: 640px;
}

    .preview-sty01-3 img, .preview-sty01-3 source {
        height: 240px;
        width: 640px;
    }


/*LED*4 bottom */
.preview-sty01-4 {
    height: 320px;
    width: 640px;
}

    .preview-sty01-4 img, .preview-sty01-4 sorce {
        height: 320px;
        width: 640px;
    }





/* Preview 2 */
/* LED*2 only */
.preview-sty02-1 {
    height: 360px;
    width: 1280px;
}

    .preview-sty02-1 img, .preview-sty02-1 source {
        height: 360px;
        width: 1280px;
    }


/* top + LED*2 */
.preview-sty02-2 {
    height: 330px;
    width: 1280px;
}

    .preview-sty02-2 img, .preview-sty02-2 source {
        height: 330px;
        width: 1280px;
    }


/* top + LED*2 + bottom */
.preview-sty02-3 {
    height: 290px;
    width: 1280px;
}

    .preview-sty02-3 img, .preview-sty02-3 source {
        height: 290px;
        width: 1280px;
    }


/* LED*2 + bottom */
.preview-sty02-4 {
    height: 320px;
    width: 1280px;
}

    .preview-sty02-4 img, .preview-sty02-4 sorce {
        height: 320px;
        width: 1280px;
    }


/*LED*2 bottom */
.preview-sty04-2 {
    height: 320px;
    width: 1280px;
}

    .preview-sty04-2 img, .preview-sty04-2 sorce {
        height: 320px;
        width: 1280px;
    }




/* Preview 3 */
/* 1 LED only */
.preview-sty03 {
    height: 360px;
    width: 2560px;
}

    .preview-sty03 img, .preview-sty03 source {
        height: 360px;
        width: 2560px;
    }


/* Top + 1 LED */
.preview-sty03-2 {
    height: 330px;
    width: 2560px;
}

    .preview-sty03-2 img, .preview-sty03-2 source {
        height: 330px;
        width: 2560px;
    }


/* Top + 1 LED + bottom */
.preview-sty03-3 {
    height: 290px;
    width: 2560px;
}

    .preview-sty03-3 img, .preview-sty03-3 source {
        height: 290px;
        width: 2560px;
    }


/* 1 LED + bottom */
.preview-sty03-4 {
    height: 320px;
    width: 2560px;
}

    .preview-sty03-4 img, .preview-sty03-4 source {
        height: 320px;
        width: 2560px;
    }