body {
animation: fadeIn 0.5s ease-in 0s 1 normal;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

body, #wrapper {
    display:flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}
.my-div-style {
    margin-top: 6rem;
}

.task-blue {
    border: 1px solid #649bf9;
    background-color: #e6f7ff;
}

.task-gray {
    border: 1px solid gray;
    background-color: #f0f0f0;
}

.bg-checkout {
    background-color: #ffe4ec !important; /* 薄いピンク */
}
.bg-stay {
    background-color: #e6ffe4 !important; /* 薄いグリーン */
}

.wave-hands svg {
  display: inline-block;
  animation: waveDown 1.2s infinite;
}
.wave-hands svg:nth-child(1) { animation-delay: 0s; }
.wave-hands svg:nth-child(2) { animation-delay: 0.2s; }
.wave-hands svg:nth-child(3) { animation-delay: 0.4s; }

@keyframes waveDown {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(5px); }
  40%  { transform: translateY(-5px); }
  60%  { transform: translateY(5px); }
  80%  { transform: translateY(-2px);}
  100% { transform: translateY(0); }
}

.glow {
    animation: glow-effect 0.7s 1s infinite alternate;
}
@keyframes glow-effect {
    0% { box-shadow: 0 0 5px 2px #ffd700; }
    100% { box-shadow: 0 0 10px 4px #ffd700; 
    opacity: 0.7;}
}

.icon-big-small {
    animation: icon-big-small 1.2s infinite cubic-bezier(0.4,0,0.2,1);
    display: inline-block;
    will-change: transform;
}

@keyframes icon-big-small {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Cleaning Timer Tick Effect */
#cleaning-timer.tick {
    animation: tick-animation 0.2s ease-out;
}

@keyframes tick-animation {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* ソート可能なテーブルヘッダーのスタイル */
th.sort {
  cursor: pointer;
  position: relative; /* アイコンを絶対位置で配置するための基準 */
}

/* アイコンの基本スタイル */
.sort-icon {
  margin-left: 5px;
  color: #999; /* デフォルトのアイコン色 */
  display: inline-block;
  width: 1em; /* アイコン用のスペースを確保 */
}

/* アイコンが表示のときのスタイル (任意) */
.sort-icon.active-sort-icon {
  color: #FFF;
}