/*
* project.css
* kld css !important
******************************************************************************/

body {
    font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;
    font-size: 14px !important;
    color: #697a8d !important;
}

/*--- login ---*/

.authentication-wrapper.authentication-basic .authentication-inner{
    max-width:1000px !important;
}

/*--- mormal ---*/
.w-100px {
    width: 100px !important;
}

.w-200px {
    width: 200px !important;
}

.w-300px {
    width: 300px !important;
}

/*--- app-brand ---*/
.app-brand {
    margin-top: 0px !important;
}

.app-brand-text.demo {
    text-transform: initial;
}
/*--- menu ---*/
.menu-vertical > .menu-inner > .menu-item > .menu-link, .menu-vertical .menu-sub > .menu-item > .menu-link {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.menu-vertical .menu-header {
    margin: 0.2rem 0 0.2rem 0;
    padding: 0.3rem 1.5rem;
}


    .menu-vertical .menu-header::before {
        height: 3px;
        top:1rem;
    }


/*--- layout-navbar ---*/
.layout-navbar {
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    padding-top: 3px !important;
    height: 3.4rem;
}

.navbar-title {
    font-size: 20px;
    font-weight: bold;
}
/*--- table ---*/
.mytable th {
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, .03);
}

.mytable th, .mytable td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: bold;
}

/*--- container ---*/
.container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
    padding-top: 0.5rem !important;
}

/*--- card-list-view > card ---*/

.card-list-view .card-header {
    font-size: 18px;
    font-weight: bold;
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card-list-view .card-search {
    padding: 0.5rem 1.5rem;
}

.card-list-view .card-footer {
    background-color: rgba(0, 0, 0, .03);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.card-list-view .card-search-form {
    font-weight: bold;
}

    .card-list-view .card-search-form input, .card-list-view .card-search-form select {
        font-weight: bold;
    }




/*--- card-block-view > card ---*/

.card-block-view .card-header {
    font-size: 18px;
    font-weight: bold;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}


.card-block-view .card-body {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}


/*--- card-form-view > card ---*/

.card-form-view .card-header {
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
    /*background-color: #9b9b9b;*/
    background-color: #17a2b8;
    color: #FFFFFF;
}

.card-form-view .card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.card-form-view .card-footer {
    /*background-color: rgba(0, 0, 0, .03);*/
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    /*background-color: #9b9b9b;*/
    background-color: rgba(0, 0, 0, .03);
    color: #FFFFFF;
}

/*--- card ---*/

.card-outline-top-primary {
    border-top: 3px solid #17a2b8 !important;
}

.card-outline-top-scondary {
    border-top: 3px solid #8592A3 !important;
}

/*--- form ---*/

.form-label, .col-form-label {
    font-size: 0.9rem;
    font-weight: bold;
}

.field-validation-error {
    color: #ff6a00;
}

/*--- page ---*/
.page-title-box {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.page-title-left {
    font-size: 20px;
    font-weight: bold;
}

.page-title-right {
    font-size: 20px;
    font-weight: bold;
}

/*--- pageing ---*/
.page-link {
    font-size: 0.75rem;
    padding: 8px 12px;
    background-color: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

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

    .page-item.active .page-link:hover {
        background-color: #41909d;
    }

.mypagination {
    font-weight: bold;
}

    .mypagination .page-left {
        padding-top: 3px;
    }

    .mypagination ol, .mypagination ul, .mypagination dl {
        margin-bottom: 0rem;
    }


/*--- btn ---*/
.btn {
    box-shadow: none !important;
    padding: .375rem .75rem !important;
}

/*--- bootstrap-select ---*/
.bootstrap-select button {
}

.light-style .bootstrap-select .filter-option-inner-inner {
    color: #6c7e91;
}

/*--- tab btn ---*/
.tab-btn-on, .tab-btn-on:hover, .tab-btn-on:focus {
    color: #fff !important;
    background-color: #17a2b8;
    border: 3px solid #17a2b8;
}

.tab-btn-off, .tab-btn-off:hover, .tab-btn-off:focus {
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #dfdfdf;
}

/*--- bootstrap-select ---*/
.bootstrap-select button {
}

.light-style .bootstrap-select .filter-option-inner-inner {
    color: #6c7e91;
}


/*---button customization ---*/
.btn-primary {
    color: #fff !important;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
        color: #fff !important;
        background-color: #41909d !important;
        border-color: #41909d !important;
    }

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
        color: #fff;
        background-color: #308243 !important;
        border-color: #308243 !important;
    }

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
        color: #fff;
        background-color: #bc3945 !important;
        border-color: #bc3945 !important;
    }


/*--- form ---*/
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

/*--- breadcrumb ---*/
.breadcrumb-item.active, .breadcrumb-item a.active {
    font-weight: bold;
}
.input-group-text {
    background-color: #e9ecef;
}
.form-control {
    padding: 5px 10px 5px 10px !important;
}

/*--- list search form ---*/
.form-inline .form-group {
    margin-bottom: 1rem;
    display: inline;
}

.form-inline .form-control, .form-inline .form-select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

    .form-row > .col {
        padding-left: 5px;
        padding-right: 5px;
    }

label {
    margin-bottom: 0.5rem;
}


/*--- form ---*/
.alert-message {
    background-color: #c2936c;
    border-color: #c2936c;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.5rem;
}

.alert-notice {
    background-color: #50b3a9;
    border-color: #c2936c;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.5rem;
}

input[readonly="readonly"] {
    background-color: #f1f1f1;
}

    input[readonly="readonly"]:hover, input[readonly="readonly"]:focus {
        background-color: #f1f1f1;
    }

.form-check-input {
    border: 2px solid #aeaeae;
    vertical-align: text-bottom;
}

.form-check-input-item {
    margin-right: 10px;
}

.form-check-label {
    font-size: 16px;
    /*font-weight: bold;*/
}

.input-caption {
    color: #ff6a00;
    margin-top: 0.2rem;
}

.input-caption-blue {
    color: #2196f3;
    margin-top: 0.2rem;
}

/*--- utility ---*/

.cursor-pointer {
    cursor: pointer;
}

/*--- meni ---*/

.menu-item.active:before {
    display: none !important;
}

.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle {
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/*--- card search ---*/
.card-search {
}

    .card-search .card-search-textbox {
        display: inline-block;
        width: initial;
        padding: 5px 40px 5px 10px;
        margin-right: 5px;
    }

    .card-search .card-search-label {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        margin-right: 5px;
        margin-bottom: 0px;
    }

    .card-search .card-search-select {
        display: inline-block;
        width: initial;
        padding: 5px 40px 5px 10px;
        margin-right: 5px;
        font-weight:bold;
    }










.app-logistics-fleet-wrapper {
    position: relative;
    border: none;
    overflow: hidden;
    height: calc(100vh - 13rem);
}

@media (max-width: 1199.98px) {
    .app-logistics-fleet-wrapper {
        height: calc(100vh - 10.5rem);
    }
}

.layout-navbar-hidden .app-logistics-fleet-wrapper {
    height: calc(100vh - 5.75rem);
}

    .layout-navbar-hidden .app-logistics-fleet-wrapper .logistics-fleet-sidebar-body {
        height: calc(100vh - 15.5rem + 4rem);
    }

.app-logistics-fleet-wrapper .app-logistics-fleet-sidebar {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    flex-grow: 0;
    flex-basis: 21rem;
    left: calc(-21rem - 1.2rem);
    height: 100%;
    width: 21rem;
    transition: all 0.3s;
    z-index: 2;
}

    .app-logistics-fleet-wrapper .app-logistics-fleet-sidebar.show {
        left: 0;
    }

.app-logistics-fleet-wrapper .close-sidebar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

@media (max-width: 767.98px) {
    .app-logistics-fleet-wrapper #map {
        border-radius: 0.5rem;
    }
}

.app-logistics-fleet-wrapper .logistics-fleet-sidebar-body {
    height: calc(100vh - 15.5rem);
}

@media (max-width: 767.98px) {
    .app-logistics-fleet-wrapper {
        height: calc(100vh - 11.5rem);
    }

        .app-logistics-fleet-wrapper .logistics-fleet-sidebar-body {
            height: calc(100vh - 15.5rem - 2rem);
        }

    .layout-navbar-hidden .app-logistics-fleet-wrapper {
        height: calc(100vh - 7.5rem);
    }

        .layout-navbar-hidden .app-logistics-fleet-wrapper .logistics-fleet-sidebar-body {
            height: calc(100vh - 15.5rem + 2.5rem);
        }
}

@media (min-width: 768px) {
    .app-logistics-fleet-wrapper .app-logistics-fleet-sidebar {
        position: static;
        height: auto;
        background-color: transparent !important;
    }
}

[dir=rtl] .app-logistics-fleet-wrapper .app-logistics-fleet-sidebar {
    left: auto;
    right: calc(-21rem - 1.2rem);
}

    [dir=rtl] .app-logistics-fleet-wrapper .app-logistics-fleet-sidebar.show {
        left: auto;
        right: 0;
    }

[dir=rtl] .app-logistics-fleet-wrapper .close-sidebar {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: auto;
}

.dark-style .app-logistics-fleet-wrapper .app-logistics-fleet-sidebar {
    background-color: #2b2c40;
}



.menu-header-text {
    font-size: 16px;
    font-weight: bold;
}

/* perfect-scrollbar */
.ps__rail-x{
    height:10px !important;
}

.ps__thumb-x {
    height: 10px !important;
}

/* panel */

.switch-status-label {
    color: #FFFFFF;
    padding: 2px 6px;
    display: inline-block;
    border-radius: 5px;
    background-color: #dfdfdf;
}

.panel-list-button-control {
    cursor: pointer;
    color: #FFFFFF;
    background-color: #888888;
    padding: 2px 6px;
    display: inline-block;
    border-radius: 5px;
}

/* toast */
.toast-warning {
    background-color: #F89406;
    color:#FFFFFF;
}

/* tooltip */

.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    /*background-color: rgb(41 128 176 / 80%);*/
    background-color: rgb(0 0 0 / 60%);
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
}


.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: rgb(0 0 0 / 30%) !important;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: rgb(0 0 0 / 30%) !important;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: rgb(0 0 0 / 30%) !important;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: rgb(0 0 0 / 30%) !important;
}


/* 旋轉 START */

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.animation_rotate {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

/* 旋轉 END */

.line-word {
    overflow: hidden;
    text-align: center;
}

    .line-word::before,
    .line-word::after {
        background-color: #d0d0d0;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }

    .line-word::before {
        right: 0.5em;
        margin-left: -50%;
    }

    .line-word::after {
        left: 0.5em;
        margin-right: -50%;
    }



/* 表格標題固定 START */

.table_header_fix_block {
    overflow: auto;
    width: 100%;
    max-height: calc(100vh - 200px);
}

.table_header_fix tr th {
    z-index: 10;
    position: sticky;
    top: 0; /* 列首永遠固定於上 */
}

    .table_header_fix tr th:first-child {
        position: sticky;
        left: 0; /* 首行永遠固定於左 */
        z-index: 20;
    }

.table_header_fix tr td:first-child {
    position: sticky;
    left: 0; /* 首行永遠固定於左 */
    z-index: 10;
}

/* 表格標題固定 END */


/* class table-striped even style */
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #FFFFFF;
}