/* ソートマーク ▲▼ */
.sort-mark {
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 12px; /* Adjust size as needed */
}

.arrow {
    /* display: block; */
    background-color: transparent; /* Fully transparent background */
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    margin: 2px 0; /* Add spacing between arrows */
}

.arrow.ASC {
border-bottom: 7px solid #00FFFF; /* Up arrow color */
}

.arrow.DESC {
border-top: 7px solid #00FFFF; /* Down arrow color */
}

/* マウスオーバーでポインタ表示 */
th.clickable {
cursor: pointer; /* Changes the cursor to a hand (pointer) when hovered */
}

/* フィルターアイコン */
.filter-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

/* Funnel top (wider part) */
.filter-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    background: #FFFF00; /* Normal Yellow */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 0.2s ease-in-out;
}

/* Funnel bottom (narrower part) */
.filter-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40%;
    width: 20%;
    height: 35%;
    background: #FFFF00; /* Normal Yellow */
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease-in-out;
}

/* Hover effect */
.filter-icon:hover {
    transform: scale(1.5); /* Increase size */
    filter: drop-shadow(0px 0px 5px #FFD700); /* Add glow effect */
}

.filter-icon:hover::before,
.filter-icon:hover::after {
    background: #FFD700; /* Strong Yellow */
}

.hidden {
    display: none;
}

/* 通貨プルダウン */
#calcCur {
font-size: 16px;   /* 文字サイズ */
padding: 2px 2px;  /* 上下左右の余白 */
}

tr.hist {
    background-color: lightgrey; /* 過去リストデータは行色グレー */
}