@import './flatpickr.css';
@import './form.css';
@import './base.css';


html {
    box-sizing:border-box;
    scroll-behavior:smooth
}
*, *:before, *:after {
    box-sizing:inherit
}
body {
    font-size:14px;
    color:var(--color-text-primary);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Helvetica, Arial, PingFang SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiBvcGFjaXR5PSIuMSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJoc2woMjYxLCA2MCUsIDM4JSkiIHN0cm9rZS13aWR0aD0iLjUiPjxwYXRoIGQ9Ik0wIDBoNjYuNjY3djY2LjY2N0gwek02Ni42NjcgMGg2Ni42Njd2NjYuNjY3SDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyAwSDIwMHY2Ni42NjdoLTY2LjY2N3pNMjAwIDBoNjYuNjY3djY2LjY2N0gyMDB6Ii8+PHBhdGggZD0iTTI2Ni42NjcgMGg2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgMEg0MDB2NjYuNjY3aC02Ni42Njd6TTQwMCAwaDY2LjY2N3Y2Ni42NjdINDAweiIvPjxwYXRoIGQ9Ik00NjYuNjY3IDBoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDBINjAwdjY2LjY2N2gtNjYuNjY3ek02MDAgMGg2Ni42Njd2NjYuNjY3SDYwMHpNNjY2LjY2NyAwaDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyAwSDgwMHY2Ni42NjdoLTY2LjY2N3pNODAwIDBoNjYuNjY3djY2LjY2N0g4MDB6TTAgNjYuNjY3aDY2LjY2N3Y2Ni42NjdIMHpNNjYuNjY3IDY2LjY2N2g2Ni42Njd2NjYuNjY3SDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyA2Ni42NjdIMjAwdjY2LjY2N2gtNjYuNjY3ek0yMDAgNjYuNjY3aDY2LjY2N3Y2Ni42NjdIMjAweiIvPjxwYXRoIGQ9Ik0yNjYuNjY3IDY2LjY2N2g2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgNjYuNjY3SDQwMHY2Ni42NjdoLTY2LjY2N3pNNDAwIDY2LjY2N2g2Ni42Njd2NjYuNjY3SDQwMHoiLz48cGF0aCBkPSJNNDY2LjY2NyA2Ni42NjdoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDY2LjY2N0g2MDB2NjYuNjY3aC02Ni42Njd6TTYwMCA2Ni42NjdoNjYuNjY3djY2LjY2N0g2MDB6TTY2Ni42NjcgNjYuNjY3aDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyA2Ni42NjdIODAwdjY2LjY2N2gtNjYuNjY3ek04MDAgNjYuNjY3aDY2LjY2N3Y2Ni42NjdIODAwek0wIDEzMy4zMzNoNjYuNjY3VjIwMEgwek02Ni42NjcgMTMzLjMzM2g2Ni42NjdWMjAwSDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyAxMzMuMzMzSDIwMFYyMDBoLTY2LjY2N3pNMjAwIDEzMy4zMzNoNjYuNjY3VjIwMEgyMDB6Ii8+PHBhdGggZD0iTTI2Ni42NjcgMTMzLjMzM2g2Ni42NjdWMjAwaC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgMTMzLjMzM0g0MDBWMjAwaC02Ni42Njd6TTQwMCAxMzMuMzMzaDY2LjY2N1YyMDBINDAweiIvPjxwYXRoIGQ9Ik00NjYuNjY3IDEzMy4zMzNoNjYuNjY3VjIwMGgtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDEzMy4zMzNINjAwVjIwMGgtNjYuNjY3ek02MDAgMTMzLjMzM2g2Ni42NjdWMjAwSDYwMHpNNjY2LjY2NyAxMzMuMzMzaDY2LjY2N1YyMDBoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyAxMzMuMzMzSDgwMFYyMDBoLTY2LjY2N3pNODAwIDEzMy4zMzNoNjYuNjY3VjIwMEg4MDB6TTAgMjAwaDY2LjY2N3Y2Ni42NjdIMHpNNjYuNjY3IDIwMGg2Ni42Njd2NjYuNjY3SDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyAyMDBIMjAwdjY2LjY2N2gtNjYuNjY3ek0yMDAgMjAwaDY2LjY2N3Y2Ni42NjdIMjAweiIvPjxwYXRoIGQ9Ik0yNjYuNjY3IDIwMGg2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgMjAwSDQwMHY2Ni42NjdoLTY2LjY2N3pNNDAwIDIwMGg2Ni42Njd2NjYuNjY3SDQwMHoiLz48cGF0aCBkPSJNNDY2LjY2NyAyMDBoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDIwMEg2MDB2NjYuNjY3aC02Ni42Njd6TTYwMCAyMDBoNjYuNjY3djY2LjY2N0g2MDB6TTY2Ni42NjcgMjAwaDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyAyMDBIODAwdjY2LjY2N2gtNjYuNjY3ek04MDAgMjAwaDY2LjY2N3Y2Ni42NjdIODAwek0wIDI2Ni42NjdoNjYuNjY3djY2LjY2N0gwek02Ni42NjcgMjY2LjY2N2g2Ni42Njd2NjYuNjY3SDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyAyNjYuNjY3SDIwMHY2Ni42NjdoLTY2LjY2N3pNMjAwIDI2Ni42NjdoNjYuNjY3djY2LjY2N0gyMDB6Ii8+PHBhdGggZD0iTTI2Ni42NjcgMjY2LjY2N2g2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgMjY2LjY2N0g0MDB2NjYuNjY3aC02Ni42Njd6TTQwMCAyNjYuNjY3aDY2LjY2N3Y2Ni42NjdINDAweiIvPjxwYXRoIGQ9Ik00NjYuNjY3IDI2Ni42NjdoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDI2Ni42NjdINjAwdjY2LjY2N2gtNjYuNjY3ek02MDAgMjY2LjY2N2g2Ni42Njd2NjYuNjY3SDYwMHpNNjY2LjY2NyAyNjYuNjY3aDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyAyNjYuNjY3SDgwMHY2Ni42NjdoLTY2LjY2N3pNODAwIDI2Ni42NjdoNjYuNjY3djY2LjY2N0g4MDB6TTAgMzMzLjMzM2g2Ni42NjdWNDAwSDB6TTY2LjY2NyAzMzMuMzMzaDY2LjY2N1Y0MDBINjYuNjY3eiIvPjxwYXRoIGQ9Ik0xMzMuMzMzIDMzMy4zMzNIMjAwVjQwMGgtNjYuNjY3ek0yMDAgMzMzLjMzM2g2Ni42NjdWNDAwSDIwMHoiLz48cGF0aCBkPSJNMjY2LjY2NyAzMzMuMzMzaDY2LjY2N1Y0MDBoLTY2LjY2N3oiLz48cGF0aCBkPSJNMzMzLjMzMyAzMzMuMzMzSDQwMFY0MDBoLTY2LjY2N3pNNDAwIDMzMy4zMzNoNjYuNjY3VjQwMEg0MDB6Ii8+PHBhdGggZD0iTTQ2Ni42NjcgMzMzLjMzM2g2Ni42NjdWNDAwaC02Ni42Njd6Ii8+PHBhdGggZD0iTTUzMy4zMzMgMzMzLjMzM0g2MDBWNDAwaC02Ni42Njd6TTYwMCAzMzMuMzMzaDY2LjY2N1Y0MDBINjAwek02NjYuNjY3IDMzMy4zMzNoNjYuNjY3VjQwMGgtNjYuNjY3eiIvPjxwYXRoIGQ9Ik03MzMuMzMzIDMzMy4zMzNIODAwVjQwMGgtNjYuNjY3ek04MDAgMzMzLjMzM2g2Ni42NjdWNDAwSDgwMHpNMCA0MDBoNjYuNjY3djY2LjY2N0gwek02Ni42NjcgNDAwaDY2LjY2N3Y2Ni42NjdINjYuNjY3eiIvPjxwYXRoIGQ9Ik0xMzMuMzMzIDQwMEgyMDB2NjYuNjY3aC02Ni42Njd6TTIwMCA0MDBoNjYuNjY3djY2LjY2N0gyMDB6Ii8+PHBhdGggZD0iTTI2Ni42NjcgNDAwaDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNMzMzLjMzMyA0MDBINDAwdjY2LjY2N2gtNjYuNjY3ek00MDAgNDAwaDY2LjY2N3Y2Ni42NjdINDAweiIvPjxwYXRoIGQ9Ik00NjYuNjY3IDQwMGg2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTUzMy4zMzMgNDAwSDYwMHY2Ni42NjdoLTY2LjY2N3pNNjAwIDQwMGg2Ni42Njd2NjYuNjY3SDYwMHpNNjY2LjY2NyA0MDBoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik03MzMuMzMzIDQwMEg4MDB2NjYuNjY3aC02Ni42Njd6TTgwMCA0MDBoNjYuNjY3djY2LjY2N0g4MDB6TTAgNDY2LjY2N2g2Ni42Njd2NjYuNjY3SDB6TTY2LjY2NyA0NjYuNjY3aDY2LjY2N3Y2Ni42NjdINjYuNjY3eiIvPjxwYXRoIGQ9Ik0xMzMuMzMzIDQ2Ni42NjdIMjAwdjY2LjY2N2gtNjYuNjY3ek0yMDAgNDY2LjY2N2g2Ni42Njd2NjYuNjY3SDIwMHoiLz48cGF0aCBkPSJNMjY2LjY2NyA0NjYuNjY3aDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNMzMzLjMzMyA0NjYuNjY3SDQwMHY2Ni42NjdoLTY2LjY2N3pNNDAwIDQ2Ni42NjdoNjYuNjY3djY2LjY2N0g0MDB6Ii8+PHBhdGggZD0iTTQ2Ni42NjcgNDY2LjY2N2g2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTUzMy4zMzMgNDY2LjY2N0g2MDB2NjYuNjY3aC02Ni42Njd6TTYwMCA0NjYuNjY3aDY2LjY2N3Y2Ni42NjdINjAwek02NjYuNjY3IDQ2Ni42NjdoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik03MzMuMzMzIDQ2Ni42NjdIODAwdjY2LjY2N2gtNjYuNjY3ek04MDAgNDY2LjY2N2g2Ni42Njd2NjYuNjY3SDgwMHpNMCA1MzMuMzMzaDY2LjY2N1Y2MDBIMHpNNjYuNjY3IDUzMy4zMzNoNjYuNjY3VjYwMEg2Ni42Njd6Ii8+PHBhdGggZD0iTTEzMy4zMzMgNTMzLjMzM0gyMDBWNjAwaC02Ni42Njd6TTIwMCA1MzMuMzMzaDY2LjY2N1Y2MDBIMjAweiIvPjxwYXRoIGQ9Ik0yNjYuNjY3IDUzMy4zMzNoNjYuNjY3VjYwMGgtNjYuNjY3eiIvPjxwYXRoIGQ9Ik0zMzMuMzMzIDUzMy4zMzNINDAwVjYwMGgtNjYuNjY3ek00MDAgNTMzLjMzM2g2Ni42NjdWNjAwSDQwMHoiLz48cGF0aCBkPSJNNDY2LjY2NyA1MzMuMzMzaDY2LjY2N1Y2MDBoLTY2LjY2N3oiLz48cGF0aCBkPSJNNTMzLjMzMyA1MzMuMzMzSDYwMFY2MDBoLTY2LjY2N3pNNjAwIDUzMy4zMzNoNjYuNjY3VjYwMEg2MDB6TTY2Ni42NjcgNTMzLjMzM2g2Ni42NjdWNjAwaC02Ni42Njd6Ii8+PHBhdGggZD0iTTczMy4zMzMgNTMzLjMzM0g4MDBWNjAwaC02Ni42Njd6TTgwMCA1MzMuMzMzaDY2LjY2N1Y2MDBIODAwek0wIDYwMGg2Ni42Njd2NjYuNjY3SDB6TTY2LjY2NyA2MDBoNjYuNjY3djY2LjY2N0g2Ni42Njd6Ii8+PHBhdGggZD0iTTEzMy4zMzMgNjAwSDIwMHY2Ni42NjdoLTY2LjY2N3pNMjAwIDYwMGg2Ni42Njd2NjYuNjY3SDIwMHoiLz48cGF0aCBkPSJNMjY2LjY2NyA2MDBoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik0zMzMuMzMzIDYwMEg0MDB2NjYuNjY3aC02Ni42Njd6TTQwMCA2MDBoNjYuNjY3djY2LjY2N0g0MDB6Ii8+PHBhdGggZD0iTTQ2Ni42NjcgNjAwaDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNTMzLjMzMyA2MDBINjAwdjY2LjY2N2gtNjYuNjY3ek02MDAgNjAwaDY2LjY2N3Y2Ni42NjdINjAwek02NjYuNjY3IDYwMGg2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTczMy4zMzMgNjAwSDgwMHY2Ni42NjdoLTY2LjY2N3pNODAwIDYwMGg2Ni42Njd2NjYuNjY3SDgwMHpNMCA2NjYuNjY3aDY2LjY2N3Y2Ni42NjdIMHpNNjYuNjY3IDY2Ni42NjdoNjYuNjY3djY2LjY2N0g2Ni42Njd6Ii8+PHBhdGggZD0iTTEzMy4zMzMgNjY2LjY2N0gyMDB2NjYuNjY3aC02Ni42Njd6TTIwMCA2NjYuNjY3aDY2LjY2N3Y2Ni42NjdIMjAweiIvPjxwYXRoIGQ9Ik0yNjYuNjY3IDY2Ni42NjdoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik0zMzMuMzMzIDY2Ni42NjdINDAwdjY2LjY2N2gtNjYuNjY3ek00MDAgNjY2LjY2N2g2Ni42Njd2NjYuNjY3SDQwMHoiLz48cGF0aCBkPSJNNDY2LjY2NyA2NjYuNjY3aDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNTMzLjMzMyA2NjYuNjY3SDYwMHY2Ni42NjdoLTY2LjY2N3pNNjAwIDY2Ni42NjdoNjYuNjY3djY2LjY2N0g2MDB6TTY2Ni42NjcgNjY2LjY2N2g2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTczMy4zMzMgNjY2LjY2N0g4MDB2NjYuNjY3aC02Ni42Njd6TTgwMCA2NjYuNjY3aDY2LjY2N3Y2Ni42NjdIODAwek0wIDczMy4zMzNoNjYuNjY3VjgwMEgwek02Ni42NjcgNzMzLjMzM2g2Ni42NjdWODAwSDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyA3MzMuMzMzSDIwMFY4MDBoLTY2LjY2N3pNMjAwIDczMy4zMzNoNjYuNjY3VjgwMEgyMDB6Ii8+PHBhdGggZD0iTTI2Ni42NjcgNzMzLjMzM2g2Ni42NjdWODAwaC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgNzMzLjMzM0g0MDBWODAwaC02Ni42Njd6TTQwMCA3MzMuMzMzaDY2LjY2N1Y4MDBINDAweiIvPjxwYXRoIGQ9Ik00NjYuNjY3IDczMy4zMzNoNjYuNjY3VjgwMGgtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDczMy4zMzNINjAwVjgwMGgtNjYuNjY3ek02MDAgNzMzLjMzM2g2Ni42NjdWODAwSDYwMHpNNjY2LjY2NyA3MzMuMzMzaDY2LjY2N1Y4MDBoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyA3MzMuMzMzSDgwMFY4MDBoLTY2LjY2N3pNODAwIDczMy4zMzNoNjYuNjY3VjgwMEg4MDB6TTAgODAwaDY2LjY2N3Y2Ni42NjdIMHpNNjYuNjY3IDgwMGg2Ni42Njd2NjYuNjY3SDY2LjY2N3oiLz48cGF0aCBkPSJNMTMzLjMzMyA4MDBIMjAwdjY2LjY2N2gtNjYuNjY3ek0yMDAgODAwaDY2LjY2N3Y2Ni42NjdIMjAweiIvPjxwYXRoIGQ9Ik0yNjYuNjY3IDgwMGg2Ni42Njd2NjYuNjY3aC02Ni42Njd6Ii8+PHBhdGggZD0iTTMzMy4zMzMgODAwSDQwMHY2Ni42NjdoLTY2LjY2N3pNNDAwIDgwMGg2Ni42Njd2NjYuNjY3SDQwMHoiLz48cGF0aCBkPSJNNDY2LjY2NyA4MDBoNjYuNjY3djY2LjY2N2gtNjYuNjY3eiIvPjxwYXRoIGQ9Ik01MzMuMzMzIDgwMEg2MDB2NjYuNjY3aC02Ni42Njd6TTYwMCA4MDBoNjYuNjY3djY2LjY2N0g2MDB6TTY2Ni42NjcgODAwaDY2LjY2N3Y2Ni42NjdoLTY2LjY2N3oiLz48cGF0aCBkPSJNNzMzLjMzMyA4MDBIODAwdjY2LjY2N2gtNjYuNjY3ek04MDAgODAwaDY2LjY2N3Y2Ni42NjdIODAweiIvPjwvZz48L3N2Zz4=);
    background-repeat:repeat;
    background-size:300px 300px
}
h1 {
    background-image:linear-gradient(to right, #ffaf45, #fb6d48, #d74b76, #673f69);
    -webkit-background-clip:text;
    -webkit-text-stroke:1px;
    font-size:var(--value-font-size-h1);
    letter-spacing:2px;
    color:transparent;
    width:max-content;
    text-align:center;
    margin:1.5rem auto .3rem;
    cursor:pointer
}
h2 {
    margin:0;
    font-size:18px;
    text-align:center;
    padding-top:12px;
    padding-bottom:8px
}
.bg {
    background-image:linear-gradient(310deg, #d6e9ff, #d6e5ff, #d1d6ff, #ddd1ff, #f3d1ff, #ffccf5, #ffccdf, #ffc8c7, #ffd8c7, #ffddc7);
    transition:background-image .5s ease
}
.inner_bg {
    background-color:#fff3;
    border-radius:24px;
    border:1px solid hsla(0, 0%, 100%, .1);
    padding:var(--value-padding-content)
}
@media (max-width: 500px) {
    .bg, .inner_bg {
        padding:1rem
    }
}
input {
    width:var(--value-width-calculator)
}
input[name=renew_money], input[type=date] {
    width:var(--value-width-calculator-half)
}
input.error {
    outline:2px solid transparent;
    outline-offset:2px;
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color:#2563eb;
    animation:shake .3s
}
@keyframes shake {
    0% {
        transform:translate(0)
    }
    25% {
        transform:translate(-5px)
    }
    50% {
        transform:translate(5px)
    }
    75% {
        transform:translate(-5px)
    }
    to {
        transform:translate(0)
    }
}
select[name=currency_code] {
    width:var(--value-width-calculator-half)
}
select[name=payment_cycle] {
    width:var(--value-width-calculator)
}
table.output {
    display:block;
    width:100%;
    overflow:auto;
    border-spacing:0;
    border-collapse:collapse;
    word-break:normal;
    -webkit-overflow-scrolling:touch
}
table.output tbody {
    width:100%
}
table.output th, table.output td {
    padding:9px 8px;
    color:var(--color-text-primary);
    word-break:break-all;
    border:1px solid #dfe2e5
}
table.output th {
    font-weight:700
}
table.output tr {
    background-color:#f6f8fa;
    border-top:1px solid #c6cbd1
}
table.output tr:nth-child(2n) {
    background-color:#fff
}
table.output th {
    text-align:center;
    background-color:#d6e9f9
}
table.output tr>td:first-child {
    text-align:right;
    color:var(--color-text-secondary);
    width:var(--value-width-result-col-1)
}
table.output tr>td:last-child {
    text-align:left;
    width:var(--value-width-result-col-2)
}
.toast {
    position:relative;
    padding:.75rem 1.25rem;
    margin-bottom:1rem;
    border:2px solid transparent;
    border-radius:.25rem
}
.toast.tips {
    color:#004085;
    background-color:#cce5ff;
    border-color:#b8daff;
    border:2px solid #004085
}
.toast.success {
    color:#155724;
    background-color:#d4edda;
    border-color:#c3e6cb;
    border:2px solid #155724
}
.toast.error {
    color:#721c24;
    background-color:#f8d7da;
    border-color:#f5c6cb;
    border:2px solid #721c24
}
.fade {
    transition:opacity .15s linear
}
.badge span.tooltip b.tooltiptext {
    transform:rotate(45deg);
    bottom:18px;
    left:58px;
    font-weight:400
}
.pending span.tooltip b.tooltiptext {
    bottom:20px;
    left:47px
}
.tooltip {
    font-size:12px;
    font-style:normal;
    position:relative;
    display:inline-block
}
.tooltip .tooltiptext {
    visibility:hidden;
    width:106px;
    font-weight:400;
    background-color:#000;
    color:#fff;
    text-align:center;
    border-radius:6px;
    padding:5px 3px;
    position:absolute;
    z-index:1;
    bottom:140%;
    left:100%;
    margin-left:-60px;
    opacity:.8
}
.tooltip .tooltiptext:after {
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:#000000 transparent transparent transparent
}
.tooltip:hover .tooltiptext {
    visibility:visible
}
.share_action .view_wrapper .tooltip .tooltiptext {
    bottom:120%;
    left:66%
}
.share_action .copy_wrapper .tooltip .tooltiptext {
    bottom:120%;
    left:63%
}
#app {
    max-width:var(--value-max-width-page);
    margin:0 auto
}
header {
    text-align:center;
    margin-bottom:1.2rem
}
main {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1.2em;
    border-radius:16px;
    padding:var(--value-padding-content)
}
footer {
    color:var(--color-text-secondary);
    text-align:center;
    margin:.5em auto
}
button.btn {
    cursor:pointer;
    background-color:#f0eefe;
    border:1px #b6abfb solid;
    border-radius:4px;
    color:#9656f7;
    -webkit-transition-duration:.4s;
    transition-duration:.4s
}
button.btn:hover {
    background-color:#6c56f6;
    color:#fff
}
button.btn:active {
    background-color:#5645c5
}
button.pay_btn {
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    height:25px;
    padding:3px 5px;
    border-radius:8px
}
button.pay_btn svg {
    margin-right:.2em
}
button.calculate_btn {
    color:#9656f7
}
button.calculate_btn:hover {
    background-color:#6c56f6;
    color:#fff;
    fill:#fff
}
button.calculate_btn:active {
    background-color:#5645c5;
    fill:#fff
}
button.view_btn, button.copy_btn, button.copied_btn {
    border:2px solid #0099cc;
    border:none;
    border-radius:6px;
    background:transparent;
    background-color:#d6d6d670;
    -webkit-transition-duration:.4s;
    transition-duration:.4s
}
button.view_btn:hover, button.copy_btn:hover, button.copied_btn:hover {
    background-color:#d6d6d6
}
button.view_btn:active, button.copy_btn:active, button.copied_btn:active {
    background-color:#bebebe
}
.calculate_action {
    margin:.8em auto;
    text-align:center
}
button.calculate_btn {
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:4px;
    padding:1em;
    width:100%;
    margin:auto
}
button.calculate_btn svg {
    margin-right:.3em
}
button.calculate_btn .calculate_text_content, button.calculate_btn .calculate_loading_content {
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}
.share {
    transition:all .4s ease-in-out;
    margin-top:.8em
}
.pic_share {
    display:block;
    color:var(--color-text-secondary)
}
.share_title {
    display:flex;
    align-items:center;
    justify-content:center
}
.share_action {
    text-align:center;
    margin:.5rem auto 0
}
.share_action span {
    display:inline-block
}
.share_action span button {
    cursor:pointer;
    width:65px;
    height:30px
}
.share_action span button div, .result_head {
    display:flex;
    align-items:center;
    justify-content:center
}
.created_at {
    margin:0 0 3px;
    padding:0;
    text-align:right;
    color:var(--color-text-secondary);
    font-size:x-small;
    background-color:transparent
}
.reference_label {
    display:flex;
    align-items:center
}
.rate_updated {
    color:var(--color-text-secondary)
}
.updated_date {
    margin:0 5px
}
label {
    display:block
}
label.reference {
    display:inline-block
}
.output_expiry_date, .output_total_value, .output_custom_exchange_rate {
    color:var(--color-text-tertiary);
    font-size:small
}
.output_remain_days {
    color:#087f5b
}
.output_remain_value {
    color:#e9605c
}
@media (min-width: 820px) {
    #app {
        padding:var(--value-padding-app-lg)
    }
    h1 {
        font-size:var(--value-font-size-h1-lg);
        text-align:left;
        margin:unset
    }
    .pic_share {
        display:flex;
        align-items:center;
        justify-content:space-between
    }
    .pic_share .share_action {
        display:inline-block;
        text-align:right;
        margin:unset
    }
}
.modal {
    display:none;
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#000c;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
.modal_img {
    max-width:90%;
    max-height:min(80%, 800px);
    margin:auto;
    display:block
}
.close {
    position:absolute;
    top:20px;
    right:35px;
    color:#fff;
    font-size:40px;
    font-weight:700;
    cursor:pointer
}
@media (max-width: 600px) {
    .modal_img {
        max-width:95%;
        max-height:95%
    }
}
.rotating {
    animation:rotate .75s linear infinite;
    transform-origin:12px 12px
}
@keyframes rotate {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
footer div {
    text-align:center;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center
}
footer a {
    display:flex;
    align-items:center;
    color:#737373;
    text-decoration:none
}
footer a:hover {
    text-decoration:underline
}
footer svg {
    margin:0 1px 0 3px
}
footer span {
    height:12px;
    background-color:#ccc;
    width:2px;
    margin:1em .5em
}