:root {
    --primary-l: #0081A7;
    --primary-m: #005377;
    --primary-d: #052F5F;
    --success-l: #06A77D;
    --success-m: #136F63;
    --success-d: #004346;
    --info-l: #84CAE7;
    --info-m: rgb(80, 191, 238);
    --info-d: rgb(11, 173, 243);
    --warning-l: #F7CE5B;
    --warning-m: rgb(223, 169, 22);
    --warning-d: rgb(152, 114, 9);
    --danger-l: #FB4B4E;
    --danger-m: #7C0B2B;
    --danger-d: #4d0312;
    --light-alt: #EFF1ED;
    --dark-alt: #1C1F33;
    --secondary-alt: #4F646F;
    --blue: #274C77;
    --yellow: #FFBC42;
    --pink: #8F2D56;
    --teal: #1F7A8C;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

@font-face {
    font-family: 'Concert';
    src: url('../webfonts/ConcertOne-Regular.ttf');
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Open Sans", sans-serif;
    color: #475160;
    font-size: 0.95rem;
    line-height: 1.6;
    /* background-image: url("../img/bg/main-bg.jpg"); */
    background-color: #f8f9fa;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

footer {
    flex: 0 0 50px;
    margin-top: auto;
}


[data-theme=dark] .bg-primary-l {
    background-color: #005a74
}

[data-theme=dark] .bg-primary-m {
    background-color: #002f44
}

[data-theme=dark] .bg-primary-d {
    background-color: #02172f
}

[data-theme=dark] .bg-success-l {
    background-color: #047658
}

[data-theme=dark] .bg-success-m {
    background-color: #0c433c
}

[data-theme=dark] .bg-success-d {
    background-color: #001213
}

[data-theme=dark] .bg-info-l {
    background-color: #59b8df
}

[data-theme=dark] .bg-info-m {
    background-color: #22aee9
}

[data-theme=dark] .bg-info-d {
    background-color: #098ac2
}

[data-theme=dark] .bg-warning-l {
    background-color: #f5bf2a
}

[data-theme=dark] .bg-warning-m {
    background-color: #b18611
}

[data-theme=dark] .bg-warning-d {
    background-color: #684e06
}

[data-theme=dark] .bg-danger-l {
    background-color: #fa191d
}

[data-theme=dark] .bg-danger-m {
    background-color: #4d071b
}

[data-theme=dark] .bg-danger-d {
    background-color: #1c0107
}

[data-theme=dark] .bg-light-alt {
    background-color: #d6dbd0
}

[data-theme=dark] .bg-dark-alt {
    background-color: #0a0b12
}

[data-theme=dark] .bg-secondary-alt {
    background-color: #3a4951
}

[data-theme=dark] .bg-blue {
    background-color: #1a3351
}

[data-theme=dark] .bg-yellow {
    background-color: #ffaa0f
}

[data-theme=dark] .bg-pink {
    background-color: #68213f
}

[data-theme=dark] .bg-teal {
    background-color: #165662
}

.bg-primary-l {
    background-color: #0081A7
}

.bg-primary-l-50 {
    background-color: rgb(0 129 167 / .5)
}

.text-primary-l {
    color: #0081A7
}

.border-primary-l {
    border: 1px solid #0081A7
}

.bg-primary-m {
    background-color: #005377
}

.bg-primary-m-50 {
    background-color: rgb(0 83 119 / .5)
}

.text-primary-m {
    color: #005377
}

.border-primary-m {
    border: 1px solid #005377
}

.bg-primary-d {
    background-color: #052F5F
}

.bg-primary-d-50 {
    background-color: rgb(5 47 95 / .5)
}

.text-primary-d {
    color: #052F5F
}

.border-primary-d {
    border: 1px solid #052F5F
}

.bg-success-l {
    background-color: #06A77D
}

.bg-success-l-50 {
    background-color: rgb(6 167 125 / .5)
}

.text-success-l {
    color: #06A77D
}

.border-success-l {
    border: 1px solid #06A77D
}

.bg-success-m {
    background-color: #136F63
}

.bg-success-m-50 {
    background-color: rgb(19 111 99 / .5)
}

.text-success-m {
    color: #136F63
}

.border-success-m {
    border: 1px solid #136F63
}

.bg-success-d {
    background-color: #004346
}

.bg-success-d-50 {
    background-color: rgb(0 67 70 / .5)
}

.text-success-d {
    color: #004346
}

.border-success-d {
    border: 1px solid #004346
}

.bg-info-l {
    background-color: #84CAE7
}

.bg-info-l-50 {
    background-color: rgb(132 202 231 / .5)
}

.text-info-l {
    color: #84CAE7
}

.border-info-l {
    border: 1px solid #84CAE7
}

.bg-info-m {
    background-color: #50bfee
}

.bg-info-m-50 {
    background-color: rgb(80 191 238 / .5)
}

.text-info-m {
    color: #50bfee
}

.border-info-m {
    border: 1px solid #50bfee
}

.bg-info-d {
    background-color: #0badf3
}

.bg-info-d-50 {
    background-color: rgb(11 173 243 / .5)
}

.text-info-d {
    color: #0badf3
}

.border-info-d {
    border: 1px solid #0badf3
}

.bg-warning-l {
    background-color: #F7CE5B
}

.bg-warning-l-50 {
    background-color: rgb(247 206 91 / .5)
}

.text-warning-l {
    color: #F7CE5B
}

.border-warning-l {
    border: 1px solid #F7CE5B
}

.bg-warning-m {
    background-color: #dfa916
}

.bg-warning-m-50 {
    background-color: rgb(223 169 22 / .5)
}

.text-warning-m {
    color: #dfa916
}

.border-warning-m {
    border: 1px solid #dfa916
}

.bg-warning-d {
    background-color: #987209
}

.bg-warning-d-50 {
    background-color: rgb(152 114 9 / .5)
}

.text-warning-d {
    color: #987209
}

.border-warning-d {
    border: 1px solid #987209
}

.bg-danger-l {
    background-color: #FB4B4E
}

.bg-danger-l-50 {
    background-color: rgb(251 75 78 / .5)
}

.text-danger-l {
    color: #FB4B4E
}

.border-danger-l {
    border: 1px solid #FB4B4E
}

.bg-danger-m {
    background-color: #7C0B2B
}

.bg-danger-m-50 {
    background-color: rgb(124 11 43 / .5)
}

.text-danger-m {
    color: #7C0B2B
}

.border-danger-m {
    border: 1px solid #7C0B2B
}

.bg-danger-d {
    background-color: #4d0312
}

.bg-danger-d-50 {
    background-color: rgb(77 3 18 / .5)
}

.text-danger-d {
    color: #4d0312
}

.border-danger-d {
    border: 1px solid #4d0312
}

.bg-light-alt {
    background-color: #EFF1ED
}

.bg-light-alt-50 {
    background-color: rgb(239 241 237 / .5)
}

.text-light-alt {
    color: #EFF1ED
}

.border-light-alt {
    border: 1px solid #EFF1ED
}

.bg-dark-alt {
    background-color: #1C1F33
}

.bg-dark-alt-50 {
    background-color: rgb(28 31 51 / .5)
}

.text-dark-alt {
    color: #1C1F33
}

.border-dark-alt {
    border: 1px solid #1C1F33
}

.bg-secondary-alt {
    background-color: #4F646F
}

.bg-secondary-alt-50 {
    background-color: rgb(79 100 111 / .5)
}

.text-secondary-alt {
    color: #4F646F
}

.border-secondary-alt {
    border: 1px solid #4F646F
}

.bg-blue {
    background-color: #274C77
}

.bg-blue-50 {
    background-color: rgb(39 76 119 / .5)
}

.text-blue {
    color: #274C77
}

.border-blue {
    border: 1px solid #274C77
}

.bg-yellow {
    background-color: #FFBC42
}

.bg-yellow-50 {
    background-color: rgb(255 188 66 / .5)
}

.text-yellow {
    color: #FFBC42
}

.border-yellow {
    border: 1px solid #FFBC42
}

.bg-pink {
    background-color: #8F2D56
}

.bg-pink-50 {
    background-color: rgb(143 45 86 / .5)
}

.text-pink {
    color: #8F2D56
}

.border-pink {
    border: 1px solid #8F2D56
}

.bg-teal {
    background-color: #1F7A8C
}

.bg-teal-50 {
    background-color: rgb(31 122 140 / .5)
}

.text-teal {
    color: #1F7A8C
}

.border-teal {
    border: 1px solid #1F7A8C
}


.flasher {
    width: auto
}

.none {
    display: none
}

@keyframes rotating {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.rotating {
    animation: rotating 2s linear infinite
}

progress {
    width: 100%;
    height: 10px;
    margin-top: 20px;
    border-radius: 5px
}

#pass-strength-text {
    font-weight: 700;
    margin-top: 10px
}

.pass-weak {
    color: #FB4B4E
}

.pass-medium {
    color: #F7CE5B
}

.pass-strong {
    color: #136F63
}

@media only screen and (max-width:700px) {
    .hide-me {
        display: none !important
    }
}

@keyframes floating {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, 5px)
    }

    100% {
        transform: translate(0, 0)
    }
}

@-webkit-keyframes floating {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, 5px)
    }

    100% {
        transform: translate(0, 0)
    }
}

.floating {
    -webkit-animation: floating 2s ease-in-out infinite;
    -moz-animation: floating 2s ease-in-out infinite;
    -ms-animation: floating 2s ease-in-out infinite;
    -o-animation: floating 2s ease-in-out infinite;
    animation: floating 2s ease-in-out infinite
}

@-webkit-keyframes bg-pan-left {
    0% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes bg-pan-left {
    0% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.bg-pan-left {
    -webkit-animation: bg-pan-left 8s both;
    animation: bg-pan-left 8s both
}

@-webkit-keyframes color-change-2x {
    0% {
        background: #19dcea
    }

    100% {
        background: #b22cff
    }
}

@keyframes color-change-2x {
    0% {
        background: #19dcea
    }

    100% {
        background: #b22cff
    }
}

.color-change-2x {
    -webkit-animation: color-change-2x 2s linear infinite alternate both;
    animation: color-change-2x 2s linear infinite alternate both
}

.text-justify {
    text-align: justify
}

@-webkit-keyframes shake-horizontal {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px)
    }
}

@keyframes shake-horizontal {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px)
    }
}

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(.455, .03, .515, .955) both;
    animation: shake-horizontal 0.8s cubic-bezier(.455, .03, .515, .955) both
}

.text-flicker-in-glow {
    -webkit-animation: text-flicker-in-glow 4s linear infinite both;
    animation: text-flicker-in-glow 4s linear infinite both
}

@-webkit-keyframes text-flicker-in-glow {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0;
        text-shadow: none
    }

    10.1% {
        opacity: 1;
        text-shadow: none
    }

    10.2% {
        opacity: 0;
        text-shadow: none
    }

    20% {
        opacity: 0;
        text-shadow: none
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .25)
    }

    20.6% {
        opacity: 0;
        text-shadow: none
    }

    30% {
        opacity: 0;
        text-shadow: none
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.6% {
        opacity: 0;
        text-shadow: none
    }

    45% {
        opacity: 0;
        text-shadow: none
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55.1% {
        opacity: 0;
        text-shadow: none
    }

    57% {
        opacity: 0;
        text-shadow: none
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60.1% {
        opacity: 0;
        text-shadow: none
    }

    65% {
        opacity: 0;
        text-shadow: none
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75.1% {
        opacity: 0;
        text-shadow: none
    }

    77% {
        opacity: 0;
        text-shadow: none
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85.1% {
        opacity: 0;
        text-shadow: none
    }

    86% {
        opacity: 0;
        text-shadow: none
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }
}

@keyframes text-flicker-in-glow {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0;
        text-shadow: none
    }

    10.1% {
        opacity: 1;
        text-shadow: none
    }

    10.2% {
        opacity: 0;
        text-shadow: none
    }

    20% {
        opacity: 0;
        text-shadow: none
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .25)
    }

    20.6% {
        opacity: 0;
        text-shadow: none
    }

    30% {
        opacity: 0;
        text-shadow: none
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.6% {
        opacity: 0;
        text-shadow: none
    }

    45% {
        opacity: 0;
        text-shadow: none
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55.1% {
        opacity: 0;
        text-shadow: none
    }

    57% {
        opacity: 0;
        text-shadow: none
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60.1% {
        opacity: 0;
        text-shadow: none
    }

    65% {
        opacity: 0;
        text-shadow: none
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75.1% {
        opacity: 0;
        text-shadow: none
    }

    77% {
        opacity: 0;
        text-shadow: none
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85.1% {
        opacity: 0;
        text-shadow: none
    }

    86% {
        opacity: 0;
        text-shadow: none
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }
}

.text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
}

@-webkit-keyframes text-flicker-in-glow {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0;
        text-shadow: none
    }

    10.1% {
        opacity: 1;
        text-shadow: none
    }

    10.2% {
        opacity: 0;
        text-shadow: none
    }

    20% {
        opacity: 0;
        text-shadow: none
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .25)
    }

    20.6% {
        opacity: 0;
        text-shadow: none
    }

    30% {
        opacity: 0;
        text-shadow: none
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.6% {
        opacity: 0;
        text-shadow: none
    }

    45% {
        opacity: 0;
        text-shadow: none
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55.1% {
        opacity: 0;
        text-shadow: none
    }

    57% {
        opacity: 0;
        text-shadow: none
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60.1% {
        opacity: 0;
        text-shadow: none
    }

    65% {
        opacity: 0;
        text-shadow: none
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75.1% {
        opacity: 0;
        text-shadow: none
    }

    77% {
        opacity: 0;
        text-shadow: none
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85.1% {
        opacity: 0;
        text-shadow: none
    }

    86% {
        opacity: 0;
        text-shadow: none
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }
}

@keyframes text-flicker-in-glow {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0;
        text-shadow: none
    }

    10.1% {
        opacity: 1;
        text-shadow: none
    }

    10.2% {
        opacity: 0;
        text-shadow: none
    }

    20% {
        opacity: 0;
        text-shadow: none
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .25)
    }

    20.6% {
        opacity: 0;
        text-shadow: none
    }

    30% {
        opacity: 0;
        text-shadow: none
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    30.6% {
        opacity: 0;
        text-shadow: none
    }

    45% {
        opacity: 0;
        text-shadow: none
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .45), 0 0 60px rgb(255 255 255 / .25)
    }

    55.1% {
        opacity: 0;
        text-shadow: none
    }

    57% {
        opacity: 0;
        text-shadow: none
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35)
    }

    60.1% {
        opacity: 0;
        text-shadow: none
    }

    65% {
        opacity: 0;
        text-shadow: none
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .35), 0 0 100px rgb(255 255 255 / .1)
    }

    75.1% {
        opacity: 0;
        text-shadow: none
    }

    77% {
        opacity: 0;
        text-shadow: none
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .55), 0 0 60px rgb(255 255 255 / .4), 0 0 110px rgb(255 255 255 / .2), 0 0 100px rgb(255 255 255 / .1)
    }

    85.1% {
        opacity: 0;
        text-shadow: none
    }

    86% {
        opacity: 0;
        text-shadow: none
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgb(255 255 255 / .6), 0 0 60px rgb(255 255 255 / .45), 0 0 110px rgb(255 255 255 / .25), 0 0 100px rgb(255 255 255 / .1)
    }
}

.text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

.text-blur-out {
    -webkit-animation: text-blur-out 1.2s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-blur-out 1.2s cubic-bezier(.55, .085, .68, .53) both
}

@-webkit-keyframes text-blur-out {
    0% {
        -webkit-filter: blur(.01);
        filter: blur(.01)
    }

    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%)
    }
}

@keyframes text-blur-out {
    0% {
        -webkit-filter: blur(.01);
        filter: blur(.01)
    }

    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%)
    }
}

.bounce-in-top {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both
}

@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.bounce-in-bottom {
    -webkit-animation: bounce-in-bottom 1.1s both;
    animation: bounce-in-bottom 1.1s both
}

@-webkit-keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.bounce-out-top {
    -webkit-animation: bounce-out-top 1.5s both;
    animation: bounce-out-top 1.5s both
}

@-webkit-keyframes bounce-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    5% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    25% {
        -webkit-transform: translateY(-38px);
        transform: translateY(-38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    52% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    85% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
        opacity: 0
    }
}

@keyframes bounce-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    5% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    25% {
        -webkit-transform: translateY(-38px);
        transform: translateY(-38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    52% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    85% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
        opacity: 0
    }
}

.bounce-out-bottom {
    -webkit-animation: bounce-out-bottom 1.5s both;
    animation: bounce-out-bottom 1.5s both
}

@-webkit-keyframes bounce-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    5% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    25% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    52% {
        -webkit-transform: translateY(75px);
        transform: translateY(75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    85% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(800px);
        transform: translateY(800px);
        opacity: 0
    }
}

@keyframes bounce-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    5% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    25% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    52% {
        -webkit-transform: translateY(75px);
        transform: translateY(75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    85% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(800px);
        transform: translateY(800px);
        opacity: 0
    }
}

.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.vibrate {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both
}

@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.glass-effect {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.34);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.title {
    font-family: 'Concert', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.custom-hr-center {
    width: 60px;
    /* Shorter width */
    height: 4px;
    /* Thicker line */
    /* background-color: #333; Dark color, change as needed */
    border: none;
    /* Remove default border */
    margin: 20px auto;
    /* Centered with some spacing */
}

.custom-hr-default {
    width: 60px;
    /* Shorter width */
    height: 4px;
    /* Thicker line */
    /* background-color: #333; Dark color, change as needed */
    border: none;
    /* Remove default border */
    margin: 20px 0px;
    /* Centered with some spacing */
}

.login-image {
    background-image: url('../../media/pictures/see-stat-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}