@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes slideInUp {
    from { transform: translateY(5%); }
    to { transform: translateY(0); }
}
@keyframes slideInDown {
    from { transform: translateY(-5%); }
    to { transform: translateY(0); }
}
@keyframes slideInLeft {
    from { transform: translateX(5%); }
    to { transform: translateX(0); }
}
@keyframes slideInRight {
    from { transform: translateX(-5%); }
    to { transform: translateX(0); }
}
@keyframes slideOutUp {
    from { transform: translateY(0); }
    to { transform: translateY(-5%); }
}
@keyframes slideOutDown {
    from { transform: translateY(0); }
    to { transform: translateY(5%); }
}
@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-5%); }
}
@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(5%); }
}

.fadeIn {
    animation: fadeIn 0.3s ease-in-out forwards;
}
.fadeOut {
    animation: fadeOut 0.3s ease-in-out forwards;
}
.slideInUp {
    animation: slideInUp 0.3s ease-in-out forwards;
}
.slideInDown {
    animation: slideInDown 0.3s ease-in-out forwards;
}
.slideInLeft {
    animation: slideInLeft 0.3s ease-in-out forwards;
}
.slideInUpRight {
    animation: slideInUpRight 0.3s ease-in-out forwards;
}
.slideOutUp {
    animation: slideOutUp 0.3s ease-in-out forwards;
}
.slideOutDown {
    animation: slideOutDown 0.3s ease-in-out forwards;
}
.slideOutLeft {
    animation: slideOutLeft 0.3s ease-in-out forwards;
}
.slideOutRight {
    animation: slideOutRight 0.3s ease-in-out forwards;
}

.bg-blue-50 { background-color: #e0f2fe; } /* Lighter blue for info cards */
.bg-green-50 { background-color: #d1fae5; } /* Lighter green for info cards */
.bg-yellow-50 { background-color: #fffacd; } /* Lighter yellow for info cards */
.bg-red-50 { background-color: #fee2e2; } /* Lighter red for info cards */
.flex {display: flex;}
.flexColumn {flex-direction: column;}
.flexRow {flex-direction: row;}
.flexWrap {flex-wrap: wrap;}
.flexNowrap {flex-wrap: nowrap;}
.flexAlignCenter {align-items: center;}
.flexAlignStart {align-items: flex-start;}
.flexAlignEnd {align-items: flex-end;}
.floatL {float:left;}
.floatR {float:right;}
.color_red { color: red;}
.color_blue { color: blue;}
.color_tomato { color: tomato;}
.color_cornflowerblue { color: cornflowerblue;}
.bcRed{background-color: red;}
.bcBlue{background-color: blue;}
.bcAqua{background-color: aqua;}
.w10px{ width: 10px;}
.w20px{ width: 20px;}
.w30px{ width: 30px;}
.w40px{ width: 40px;}
.w50px{ width: 50px;}
.w60px{ width: 60px;}
.w70px{ width: 70px;}
.w80px{ width: 80px;}
.w90px{ width: 90px;}
.w100px{ width: 100px;}
.w200px{ width: 200px;}
.w300px{ width: 300px;}
.w400px{ width: 400px;}
.w500px{ width: 500px;}
.w600px{ width: 600px;}
.w700px{ width: 700px;}
.w800px{ width: 800px;}
.w900px{ width: 900px;}
.w1000px{ width: 1000px;}
.h100px{ height: 100px;}
.h200px{ height: 200px;}
.h300px{ height: 300px;}
.h400px{ height: 400px;}
.h500px{ height: 500px;}
.h600px{ height: 600px;}
.h700px{ height: 700px;}
.h800px{ height: 800px;}
.h900px{ height: 900px;}
.h1000px{ height: 1000px;}
.lineH10{ line-height: 1.0;}
.lineH11{ line-height: 1.1;}
.lineH12{ line-height: 1.2;}
.lineH13{ line-height: 1.3;}
.lineH14{ line-height: 1.4;}
.lineH15{ line-height: 1.5;}
.lineH16{ line-height: 1.6;}
.lineH17{ line-height: 1.7;}
.lineH18{ line-height: 1.8;}
.lineH19{ line-height: 1.9;}
.lineH20{ line-height: 2.0;}
.textAlignL{ text-align: left;}
.textAlignR{ text-align: right;}
.textAlignC{ text-align: center;}
.textAlignJ{ text-align: justify;}
.marginCenter{ 
    display:block;
    margin:0 auto;}
.marginAuto{ margin:auto;}
.dspIB{display:inline-block;}
.dspB{display:block;}
.fontSize15px{font-size:15px}
.fontSize20px{font-size:20px}
.fontSize25px{font-size:25px}
.fontSize30px{font-size:30px}
.fontSize35px{font-size:35px}
.fontSize40px{font-size:40px}
.fontSize01rem{font-size:0.1rem}
.fontSize02rem{font-size:0.2rem}
.fontSize03rem{font-size:0.3rem}
.fontSize04rem{font-size:0.4rem}
.fontSize05rem{font-size:0.5rem}
.fontSize06rem{font-size:0.6rem}
.fontSize07rem{font-size:0.7rem}
.fontSize08rem{font-size:0.8rem}
.fontSize09rem{font-size:0.9rem}
.fontSize10rem{font-size:1.0rem}
.fontSize11rem{font-size:1.1rem}
.fontSize12rem{font-size:1.2rem}
.fontSize13rem{font-size:1.3rem}
.fontSize14rem{font-size:1.4rem}
.fontSize15rem{font-size:1.5rem}
.fontSize16rem{font-size:1.6rem}
.fontSize17rem{font-size:1.7rem}
.fontSize18rem{font-size:1.8rem}
.fontSize19rem{font-size:1.9rem}
.fontSize20rem{font-size:2rem}
.fontWeight1{font-weight: normal;}
.fontWeight2{font-weight: bold;}
.fontWeight3{font-weight: bolder;}
.positionAbsolute{position: absolute;}
.positionFixed{position:fixed}
.positionRelative{position:relative}
.positionStatic{position:static}
.positionSticky{position:sticky}