/* 固定navbar */
.navbar {
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 1050;
}
/* navbar高度 */
.nav-padding {
    padding-top: 56px;
}
/* 改變側邊欄顏色 */
.sb-sidenav-light {
    background-color: #e6e6e6;
}
/* 表格垂直置中 */
td, th {
    vertical-align: middle !important;
}
/* 表格padding 80% rem */
.table-padding-80 td, .table-padding-80 th {
    padding: 0.8rem !important;
}
/* card框線 */
.card {
    border: 1px solid rgba(0, 0, 0, 0.25);
}
/* 游標 */
.cursor-pointer {
    cursor: pointer;
}
/* 最小尺寸350px */
.img-min-width {
    min-width: 350px;
}
/* 機率計算器 */
.counter{
    font-family: 'Nunito Sans', sans-serif;
    background: #fff;
    text-align: center;
    width: 200px;
    min-height: 215px;
    padding: 10px 15px;
    margin: 0 auto;
    border-radius: 30px;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.2);
    position: relative;
}
.counter:before{
    content: '';
    background-color: #9DD662;
    height: 105px;
    width: 100%;
    border-radius: 30px 30px 0 0;
    position: absolute;
    left: 0;
    top: 0;
}
.counter .counter-icon{
    color: #fff;
    background: #7CA936;
    font-size: 50px;
    line-height: 90px;
    width: 120px;
    height: 100px;
    margin: 0 auto 10px;
    border-radius: 10px 10px 0 0;
    transform: translateY(-20px);
    position: relative;
    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter .counter-icon:before{
    content: "";
    background: #8AC248;
    width: 120px;
    height: 90px;
    border-radius: 10px 10px 0 0;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter h3{
    color: #333;
    font-size:17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.counter .counter-value{
    color: #7CA936;
    font-size: 30px;
    font-weight: 600;
    display: block;
}
.counter.blue:before{ background-color: #5A9BEF; }
.counter.blue .counter-icon{ background-color: #2A70B5; }
.counter.blue .counter-icon:before{ background-color: #367DCB; }
.counter.blue .counter-value{ color: #367DCB; }
.counter.red:before{ background-color: #FD6D4B; }
.counter.red .counter-icon{ background-color: #D14026; }
.counter.red .counter-icon:before{ background-color: #EA5736; }
.counter.red .counter-value{ color: #EA5736; }
.counter.gray:before{ background-color: #777; }
.counter.gray .counter-icon{ background-color: #444; }
.counter.gray .counter-icon:before{ background-color: #666; }
.counter.gray .counter-value{ color: #666; }

/* 圖片容器 */
.img-container {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 圖卡元件A：上圖+下文字 */
.img-card-a {
    display: flex;
    flex-direction: column;
    border: 1px solid #808080;
    border-radius: 0.5rem;
    overflow: hidden;
}
.img-card-a .card-img {
    background-color: #ddddcc;
    padding: 0.5rem;
}
.img-card-a .card-text {
    background-color: #ffefc1;
    padding: 0.5rem;
    border-top: 1px solid #808080;
}

/* 圖卡元件B：左圖+右上標題+右下內容 */
.img-card-b {
    display: flex;
    text-align: center;
    border: 1px solid #808080;
    border-radius: 0.5rem;
    overflow: hidden;
}
.img-card-b .card-img {
    flex-basis: 40%;
    background-color: #ddddcc;
    padding: 0.5rem;
    text-align: center;
}
.img-card-b .card-content {
    flex-basis: 60%;
    border-left: 1px solid #808080;
}
.img-card-b .card-content .content-header {
    padding: 0.25rem;
    background-color: #ffefc1;
}
.img-card-b .card-content .content-body {
    padding: 0.5rem;
    border-top: 1px solid #808080;
}