html {filter: saturate(50%) brightness(90%);}
body {font-family: "Kanit", sans-serif;font-weight: 700;font-style: normal;height: 100%;margin: 0;}
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);background-color: #ffffff75;}
body::-webkit-scrollbar {width: 10px;background-color: #ffffff75;} 
body::-webkit-scrollbar-thumb {background-color: rgb(110, 202, 255);border-radius: 50px;background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, 0.2)),color-stop(.5, transparent), to(transparent));}
.font-rubik {font-family: "Rubik", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;}
.box {background: linear-gradient(90deg, rgba(110, 202, 255, 1) 0%, rgba(50, 132, 221, 1) 100%);}
.bgco {background: rgb(110, 202, 255);background: linear-gradient(90deg, rgba(110, 202, 255, 0.75) 0%, rgba(50, 132, 221, 0.75) 100%); }
.boxm {background-color: rgba(255, 255, 255, 0.4);-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);}
.textb {color: rgb(110, 202, 255);}
.ul {position: relative;display: block;transition: 0.5s;cursor: pointer;}
.ul::after {position: absolute;content: "";width: 100%;height: 3px;top: 100%;left: 0;transition: transform 0.5s;transform: scaleX(0);transform-origin: right;background-color: rgb(45, 45, 255);}
.ul:hover {color: rgb(45, 45, 255);}
.ul:hover::after {transform: scaleX(1);transform-origin: left;}
.bgt {background-color: #ffffff00;}
.bgno {background: rgb(41, 44, 23);background: linear-gradient(0deg, rgba(41, 44, 23, 0.5) 0%, rgba(130, 152, 192, 0.5) 97%, rgba(99, 148, 206, 0.5) 100%);-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);}
.bgm {background: rgb(41, 44, 23);background: linear-gradient(0deg, rgba(41, 44, 23, 0.5) 0%, rgba(130, 152, 192, 0.5) 97%, rgba(99, 148, 206, 0.5) 100%);}
.bgca {background: rgba(0, 0, 0, 0.70);}
.bgmm {background: rgb(22, 22, 22);background: linear-gradient(0deg, rgba(22, 22, 22, 0.6) 0%, rgba(22, 22, 22, 0.6) 97%, rgba(22, 22, 22, 0.6) 100%);-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);}
.bgv {background: rgb(42,98,233);background: linear-gradient(10deg, rgba(42,98,233,1) 0%, rgba(217,72,141,1) 100%);}
.bgwb {background-color: #fff;}
.bgwv {background: linear-gradient(90deg, rgba(110, 202, 255, 1) 0%, rgba(50, 132, 221, 1) 100%);}
.bgw {background-color: #fff;border-radius: 30px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.bgmj {background-color: #fff;border-radius: 50px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.bgc {background-color: rgb(206, 236, 255);}
.bgcc {background-color: #89d4ff; color: #073579;}
.btn {will-change: transform;transition: transform 450ms;}
.btn:hover {transition: transform 455ms;transform: translateY(-10px);}
.button-66 {background-color: #89d4ff;border-radius: 50px;border: 0;box-shadow: rgba(255, 255, 255, 0.5) 0 -1px 3px 0 inset, rgba(255, 255, 255, 0.1) 0 3px 6px 0;box-sizing: border-box;color: #073579;cursor: pointer;font-size: 18px;font-weight: 600;line-height: 24px;min-height: 56px;max-width: 295px;padding: 16px 20px;position: relative;text-align: center;user-select: none;-webkit-user-select: none;touch-action: manipulation;vertical-align: baseline;transition: all .2s cubic-bezier(.22, .61, .36, 1);}
.button-66:hover {background-color: #6ecaff;transform: translateY(-2px);}
@media (min-width: 768px) {.button-66 {padding: 16px 44px;min-width: 150px;}}
.button-666 {background-color: #89d4ff;border-radius: 50px;border: 0;box-shadow: rgba(255, 255, 255, 0.5) 0 -1px 3px 0 inset, rgba(255, 255, 255, 0.1) 0 3px 6px 0;box-sizing: border-box;color: #073579;cursor: pointer;font-size: 18px;font-weight: 600;line-height: 24px;min-height: 56px;max-width: 365px;padding: 16px 20px;position: relative;text-align: center;user-select: none;-webkit-user-select: none;touch-action: manipulation;vertical-align: baseline;transition: all .2s cubic-bezier(.22, .61, .36, 1);}
.button-666:hover {background-color: #6ecaff;transform: translateY(-2px);}
@media (min-width: 768px) {.button-666 {padding: 16px 44px;min-width: 150px;}}
.button-6666 {background-color: #89d4ff;border-radius: 25px;border: 0;box-shadow: rgba(255, 255, 255, 0.5) 0 -1px 3px 0 inset, rgba(255, 255, 255, 0.1) 0 3px 6px 0;box-sizing: border-box;color: #073579;cursor: pointer;font-size: 18px;font-weight: 600;line-height: 24px;min-height: 40px;min-width: 100px;padding: 8px 20px;position: relative;text-align: center;user-select: none;-webkit-user-select: none;touch-action: manipulation;vertical-align: baseline;transition: all .2s cubic-bezier(.22, .61, .36, 1);}
.button-6666:hover {background-color: #6ecaff;transform: translateY(-2px);}
@media (min-width: 768px) {.button-6666 {padding: 8px 44px;min-width: 100px;}}
.fade-in {animation: fadeIn 1s;-webkit-animation: fadeIn 1s;-moz-animation: fadeIn 1s;-o-animation: fadeIn 1s;-ms-animation: fadeIn 1s;}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@-moz-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@bkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
.button-63 {align-items: center;background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);border: 0;border-radius: 50px;box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;box-sizing: border-box;color: #FFFFFF;display: flex;font-family: Phantomsans, sans-serif;font-size: 20px;justify-content: center;line-height: 1em;max-width: 100%;min-width: 140px;padding: 19px 24px;margin: 0 auto;text-decoration: none;user-select: none;-webkit-user-select: none;touch-action: manipulation;white-space: nowrap;cursor: pointer;}
.button-63:active,.button-63:hover {outline: 0;}
@media (min-width: 768px) {.button-63 {font-size: 24px;min-width: 196px;}}
.button-dan {background-color: #ff8989;border-radius: 25px;border: 0;box-shadow: rgba(255, 255, 255, 0.5) 0 -1px 3px 0 inset, rgba(255, 255, 255, 0.1) 0 3px 6px 0;box-sizing: border-box;color: #fff;cursor: pointer;font-size: 18px;font-weight: 600;line-height: 24px;min-height: 40px;min-width: 100px;padding: 8px 20px;position: relative;text-align: center;user-select: none;-webkit-user-select: none;touch-action: manipulation;vertical-align: baseline;transition: all .2s cubic-bezier(.22, .61, .36, 1);}
.button-dan:hover {background-color: #ff6e6e;transform: translateY(-2px);}
@media (min-width: 768px) {.button-dan {padding: 8px 44px;min-width: 100px;}}
.status-popup { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #ffffff; color: #333; padding: 15px 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 10px; font-size: 14px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000;border: 1px solid #c1c1c1; }
.status-popup.show { opacity: 1; visibility: visible; }
.status-popup .icon { width: 24px; height: 24px; }
.status-popup .refresh { color: #007bff; cursor: pointer; text-decoration: none; }
.status-popup .close { color: white; background-color: #666; border: none; border-radius: 50%; cursor: pointer; padding: 5px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sha0 {box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.sha1 {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.sha13 {box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
.sha15 {box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.sha16 {box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.sha17 {box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.sha26 {box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.sha45 {box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;}
.sha46 {box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;}
.sha79 {box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;}
.swal2-confirm {background-color:rgb(115, 211, 255) !important; color: white !important;padding: 0.5rem 1rem;border-radius: 0.375rem;transition: background-color 0.2s ease;}
.swal2-confirm:hover {background-color: rgb(68, 185, 239) !important; }
.swal2-cancel {background-color: #e5e7eb !important; color: #111827 !important;           padding: 0.5rem 1rem;border-radius: 0.375rem;transition: background-color 0.2s ease;}
.swal2-cancel:hover {background-color: #d1d5db !important; }