body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-size:15px;
    padding-right: 0 !important;
}
html {
    scroll-padding-top: 60px;
    scroll-behavior: smooth;
}
a {
    white-space: nowrap;
}

h2{
    font-size:26px;
}
label{
    font-size:16px;
}
input{
    font-size:16px !important;
}

.main-border-color {
    border-color: #5cb85c !important;
    color: #5cb85c;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

#ShowPagination > select {
    width: 75px
}

.navbar-inverse-sp {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
}

    .navbar-inverse-sp .navbar-brand-sp {
        color: #f5f5f5 !important;
    }

        .navbar-inverse-sp .navbar-brand-sp:hover, .navbar-inverse-sp .navbar-brand-sp:focus {
            color: #fdf59a !important;
            background-color: transparent !important;
        }
.navbar-brand-sp{
    font-size:16px;
}

.table-hover > tbody > tr:hover {
    background-color: #ddedbd !important;
}

.mu_select_bold {
    font-weight: bold;
}

input.search-input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    margin-bottom: 5px;
    height: auto;
}


.breadcrumbNobefore :before {
    content: none !important;
}

.fixed-table-body {
    min-height: 300px !important;
}

.input-daterange {
    max-width: 280px !important;
}
.dropdown-menu > li > a{
    font-size:16px;
}
.dropdown-menu > li > ul > li > a {
    font-size: 16px;
}

.dropdown-submenu {
    position: relative;
}
.ag-noRowsTitle{
    font-size:20px;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

.goTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
}

.goTopBtn {
    background-color: rgba(228, 211, 211, 0.36);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 16px;
    font-size: 25px;
    color: #5cb85c;
    transform: translateX(0);
    transition: transform 0.2s;
}
.inputWithin {
    /*position: relative;
    display: inline-block;*/
}
.inputWithin .Lefticon { /*左邊圖示*/
    position: absolute;
    left: 17px;
    top: calc(70% - 0.5em);
}
.inputWithin .Reighticon { /*右邊圖示*/
    position: absolute;
    right: 30px;
    top: calc(70% - 0.4em);
}

.wrapper {
    padding: 0 20px 30px 20px;
    width: 99%;
    margin: auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, .25);
}

.hideInput
{
    min-width:calc(100% - 30px);
    position:absolute;
    z-index:50;
}

a.goTopBtn.jq-goTop {
    color: #5cb85c;
}

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

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: rgb(255 255 255 / 15%) !important;
    border-color: #337ab7 !important;
}

.bg_table1 {
    background-color: #bcde9e99 !important;
    color: #000000b8 !important;
}
.bg_table2 {
    background-color: #a8de9e99!important;
    color: #000000b8!important;
}
.bg_table3 {
    background-color: #9edecc99!important;
    color: #000000b8!important;
}
.bg_table4 {
    background-color: #9ed0de99 !important;
    color: #000000b8 !important;
}
.bg_table5 {
    background-color: #9eb9de99 !important;
    color: #000000b8 !important;
}
.bg_table6 {
    background-color: #9ea8dead !important;
    color: #000000b8 !important;
}
.bg_table1_1 {
    background-color: #bcde9e44!important;
    color: #000000b8!important;
}

.bg_table2_1 {
    background-color: #a8de9e44!important;
    color: #000000b8!important;
}

.bg_table3_1 {
    background-color: #9edecc44!important;
    color: #000000b8!important;
}

.bg_table4_1 {
    background-color: #9ed0de44 !important;
    color: #000000b8 !important;
}

.bg_table5_1 {
    background-color: #9eb9de44 !important;
    color: #000000b8 !important;
}

.bg_table6_1 {
    background-color: #9ea8de44 !important;
    color: #000000b8 !important;
}

.bg_table1_row {
    background-color: #bcde9e99 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table2_row {
    background-color: #a8de9e99 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table3_row {
    background-color: #9edecc99 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table4_row {
    background-color: #9ed0de99 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table5_row {
    background-color: #9eb9de99 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table6_row {
    background-color: #9ea8dead !important;
    color: #000000b8 !important;
    font-size: 16px;
}
.bg_table1_1_row {
    background-color: #bcde9e44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table2_1_row {
    background-color: #a8de9e44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table3_1_row {
    background-color: #9edecc44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table4_1_row {
    background-color: #9ed0de44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table5_1_row {
    background-color: #9eb9de44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}

.bg_table6_1_row {
    background-color: #9ea8de44 !important;
    color: #000000b8 !important;
    font-size: 16px;
}
.bg_alert {
    color: #e24c4c;
    border-radius: 3px;
}



.btn-white {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ccc;
}

.language-li {
    padding-top: 15px;
}
#headerDownloadAllDiv {
    height: 600px;
}


.custom-select {
    background-color: #5cb85c;
    border: 0px;
    color: white;
}

.custom-select:focus-visible {
   background-color: #5cb85c;
   border: 0px;
   color: white;
   outline: #fff;
}

.custom-select:focus-visible > option {
  background-color: white;
  border: 0px;
  color: black;
}

.col-pad18 {
    padding-right: 18%;
}
.col-padl18 {
    left: 30%;
}

.row-text-primary {
    color: #337ab7 !important;
}

.row-text-danger {
    color: #d9534f !important;
}
.row-bg-green {
    background-color: #5cb85c !important;
    color: white !important;
    font-size: 16px;
}
.row-bg-blue {
    background-color: #337ab7 !important;
    color: white !important;
    font-size: 16px;
}
.row-context {
    font-size: 16px;
}
.row-filter-color-blue {
    background-color: #80a8f040 !important;
}
.row-filter-color-green {
    background-color: #6fbb7d47 !important;
}
.uppercase {
    text-transform: uppercase;
}
.ft-mean {
    font-size: 24px !important;
    font-weight: bold !important;
}

.ft-title {
    font-size: 26px !important;
    font-weight: bold !important;
}
.fs-18p {
    font-size: 18px !important;
}

.alert-position {
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
}

.tab-button {
    letter-spacing: 3px;
    border: none;
    padding: 5px 12px;
    color: #232c3d;
    background-color: white;
    font-size: 12px;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 10px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .tab-button:hover {
        text-decoration: none;
        background-color: #d5e3ff;
        box-shadow: 0px 0px 9px #5c7cb8;
    }

/*補充boostrap語法*/
.h-100{
    height:100% !important;
}
.h-75 {
    height: 100% !important;
}
.h-50 {
    height: 100% !important;
}
.h-25 {
    height: 100% !important;
}
.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center !important;
}
.justify-content-around {
    justify-content: space-around !important;
}
.justify-content-space-between{
    justify-content: space-between !important;
}
.d-block{
    display:block;
}

.d-flex {
    display: flex;
}
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

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

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

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

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

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

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}
.w-100 {
    width: 100% !important;
}

.w-75 {
    width: 75% !important;
}

.w-50 {
    width: 50% !important;
}

.w-25 {
    width: 25% !important;
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

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

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

.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333333%;
}

.col-5 {
    width: 41.66666667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333333%;
}

.col-8 {
    width: 66.66666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333333%;
}

.col-11 {
    width: 91.66666667%;
}

.col-12 {
    width: 100%;
}


.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.bg-gray {
    background-color: #ededed;
}

.rounded-pill {
    border-radius: var(--bs-border-radius-pill) !important;
}
.d-none{
    display:none;
}
.border-0{
    border:0 !important;
}

.buttonWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.ListWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
}
/*bootstrap自訂義*/
.border{
    border:1px solid #000000;
}

.flex-cloumn {
    flex-direction:column;
}
.flex-row {
    flex-direction: row;
}
.fs-45 {
    font-size: 1.3rem !important;
}

.m-w-100 {
    min-width: 100% !important;
}
.mx-w-100 {
    max-width: 100% !important;
}

.d-inlineflex {
    display: inline-flex;
}
.d-inlineblock{
    display: inline-block;
}
.w-90{
    width:90% !important;
}
.bg-grey {
    background-color:#C2C2C2 !important
}
.red {
    color: red;
}

/*Loading*/
@keyframes loading {
    from {
        transform: rotate(0deg);
    }

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

@keyframes arrow-bottom-loading {
    from {
        margin-top: 10px;
    }

    to {
        margin-top: -10px;
    }
}

/*手機CSS*/
@media (max-width: 767px) {
    .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #f5f5f5 !important;
        white-space: nowrap;
    }

        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            color: #262626;
            text-decoration: none;
            background-color: #5cb85c !important;
        }

    .glyphicon {
        position: relative;
        top: 8px;
        display: inline-block;
        font-family: "Glyphicons Halflings";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .glyphicon-h {
        position: relative;
        top: 0px;
        display: inline-block;
        font-family: "Glyphicons Halflings";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .language-li {
        padding-top: 15px;
        padding-left: 17px;
    }

    .col-pad18 {
        padding-right: 5%;
    }

    .col-padl18 {
        left: 18%;
    }

    .buttonWrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .ListWrapper {
        display: grid;
        grid-template-columns: 1fr 1fr ;
    }
    /*補充boostrap語法*/
    .justify-content-sm-start {
        justify-content: flex-start !important;
    }
    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .d-sm-block {
        display: block !important;
    }
    .d-sm-none {
        display: none !important;
    }
    .d-sm-flex{
        display: flex !important;
    }
    .mt-sm-2 {
        margin-top: 0.5rem !important;
    }
    .ms-sm-2 {
        margin-left: 0.5rem !important;
    }
    .me-sm-2 {
        margin-right: 0.5rem !important;
    }

    .mt-sm-0 {
        margin-top: 0rem;
    }
    .m-sm-0{
        margin:0rem !important;
    }

    .mb-sm-n7 {
        margin-bottom: -1.75rem
    }
    .w-sm-100{
        width : 100%;
    }
    .w-sm-75 {
        width: 75%;
    }
    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*手機CSS*/
@media (max-width: 992px) {
    .w-md-100{
        width:100% !important;
    }

    .d-md-block{
        display:block !important;
    }
    .d-md-flex {
        display: flex !important;
    }
    .d-md-none {
        display: none !important;
    }
    .mt-md-2 {
        margin-top: 0.5rem !important;
    }
    /*補充boostrap語法*/
    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }
    #headerDownloadAllDiv{
        height:auto;
    }
    .w-md-75 {
        width: 75% !important;
    }
}

@media (max-width: 1200px) {
    .d-lg-flex {
        display: flex !important;
    }
    /*補充boostrap語法*/
    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }
}