body, .offcanvas-body {
    font-family: 'Helvetica', 'Arial', '微软雅黑', sans-serif;
    color: #666666;
    background-color: #f5f5f5;
    font-size: 16px;
}
/* Change the color of the active indicator button */
.carousel-indicators .active {
    background-color: #20639B; /* Replace 'your-color-here' with your desired color */

}


.carousel-control-prev-icon {
    background-color: #20639B; /* Replace 'your-color-here' with your desired color */
}
.carousel-control-next-icon {
    background-color: #20639B; /* Replace 'your-color-here' with your desired color */
}
/* content col-sm-6 max-width */
.col-sm-6 img {
    width: 100%; /* Makes the image responsive */
    max-width: 700px; /* Maximum width of the image */
    height: auto; /* Maintain aspect ratio */
}

/* content max-width */
body>section {
    max-width: 1500px;
    
    padding: 0 15px; /* Optional: Adds padding inside the section */
}



.card-img-top {
    width: 100%;
    height: 180px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

/* breadcrumb */
.breadcrumb {
    font-size: 15px;
}

.breadcrumb a {
    color: #4F80E1;
}

.breadcrumb a:hover {
    color: #ED553B;
}

.breadcrumb .active {
    color: #292C44;
}


/* svg icon */
svg .red {
    fill: none;
    stroke-width: 0.3;
    stroke: #F3606C;
}

svg .green {
    fill: none;
    stroke-width: 0.3;
    stroke: #EA5504;
}

svg .blue {
    fill: none;
    stroke-width: 0.3;
    stroke: #20639B;
}

svg .gray {
    fill: none;
    stroke-width: 0.3;
    stroke: #999999;
}


/* other */
input {
    background-color: #F9F7F7 !important;
}

p {
    text-align: justify;
    font-size: 16px;
    line-height: 200%;
}

.subtitle {
    border-left: 5px solid #20639B;
    font-size: 18px;
    font-weight: 700;
}

.equation {
    background-color: #e6e6e6;
    border-radius: 8px;
    line-height: 300%;
}



/* content list marker*/
.marker {
    list-style-type: square;
    text-align: justify;
}

::marker {
    color: #20639B;
    font-size: 24px;
}


/* nav */
.navbar-brand {
    font-family: "Trebuchet MS";
}

nav>div {
    height: 45px;
}



/* topBtn */
#topBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
    background-color: #EA5504;
    opacity: 0.7;
}



/* 强迫footer在底部 */
html,
body {
    width: 100%;
    height: 100%;
}

section {
    min-height: calc(100% - 45px - 2 * 4px - 40px);
}

article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;
}

header,
main,
footer {
    flex-shrink: 0;
}


/* Footer */
footer {
    background-color: rgba(0, 0, 0, 0.75);
    color: #CCC;
}

footer a:hover {
    color: #ED553B !important;

}


/* sidebar list */
.list li {
    list-style-type: none;
}

.list>li>a {
    font-size: 14px;
    font-weight: 600;
    color: #555555;
    background-color: #FFF;
}

.list>li>a:hover {
    transition-duration: 0.3s;
    transition-property: transform;
}

li>.btn:hover {
    background-color: #20639B;
    color: #FFF !important;
}

li>.btn:hover .green {
    stroke: #FFF !important;
}

.sidebar-active {
    border-left: 4px solid #20639B !important;
}


/* category list */
.sublist {
    font-size: 16px;
}

.sublist>a:hover {
    box-shadow: 0 0 10px 0 #3CAEA3;
}


/* datatable custom style */
#table-wrapper {
    max-height: 500px; /* Adjust as needed */
    overflow-y: auto;
}



.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: #20639B !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    background-color: #ED553B !important;
}

.nav-link,
.page-link {
    color: #888888;
    font-size: 15px;
}

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


/* utilities */
.rounded-4 {
    border-radius: 10px;
}


.bg-blue {
    background-color: #20639B;
}


.bg-red {
    background-color: #ED553B;
}


.bg-orange {
    background-color: #f98f39;
}


.bg-green {
    background-color: #208490;
}


.bg-gray {
    background-color: rgba(0, 0, 0, 0.3);
}


.bg-gray-light {
    background-color: #fafafa !important;
}


.text-gray {
    color: #CCC !important;
}


.text-gray-light {
    color: #888888 !important;
}

.text-blue {
    color: #546f91 !important;
}


.text-brown {
    color: #ba7058;
}


.text-green {
    color: #208490 !important;
}


.fs-10 {
    font-size: 10px !important;
}


.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}


.fs-18 {
    font-size: 18px !important;
}


.fs-20 {
    font-size: 20px !important;
}


.fs-24 {
    font-size: 28px !important;
}


.fs-28 {
    font-size: 28px !important;
}


.is-invalid,
.is-valid {
    background-image: none !important;
    padding-right: 10px !important;
}


.is-valid {
    border-color: #CCC !important;
}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

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

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

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

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

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

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

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

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-25 {
        height: 25% !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

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

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

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

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

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

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

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

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }
}