@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    color-scheme: dark;
}

html,
body {
    background: #0a0a0a;
    padding: 0;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    user-select: none;
    scroll-behavior: smooth;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    background: transparent;
    width: 8px;
    border-radius: 10px;
    height: 8px;
}

::-webkit-scrollbar-track {
    margin: 0;
}

::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / .2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / .3);
}

::-webkit-scrollbar-thumb:active {
    background: rgb(255 255 255 / .1);
}

.transparentscroll::-webkit-scrollbar {
    background: none;
}

.hidescrollbar::-webkit-scrollbar {
    display: none;
}

.transparenthoverscroll::-webkit-scrollbar {
    display: none;
    background: none;
}

.transparenthoverscroll:hover::-webkit-scrollbar {
    display: unset;
}

dialog::backdrop {
    background: rgb(0 0 0 / .5);
}

.iniciopage {
    animation: preInicio .5s, inicioFull 1s .5s cubic-bezier(0, .9, .4, 1);
}

.inicioback {
    animation: preInicio 1s, inicioFull 1.5s 1s cubic-bezier(0, .9, .4, 1);
}

@keyframes preInicio {
    from {
        filter: blur(20px);
        opacity: 0;
    }
    to {
        filter: blur(20px);
        opacity: 0;
    }
}

@keyframes inicioFull {
    from {
        transform: scale(1.5);
        filter: blur(20px);
        opacity: 0;
    }
    to {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.animationcbdi {
    animation: changeBackgroundDivInicio .8s cubic-bezier(0, .9, .4, 1);
}

.animationcbdi2 {
    animation: closedNotification .4s, changeBackgroundDivInicio2 .4s .4s cubic-bezier(0, .7, .4, 1);
}

@keyframes changeBackgroundDivInicio {
    from {
        margin-bottom: -500px;
        opacity: 0;
    }
    to {
        margin-bottom: 0;
        opacity: 1;
    }
}

@keyframes changeBackgroundDivInicio2 {
    from {
        margin-bottom: -100px;
        transform: scale(.8);
        filter: blur(40px);
        opacity: 0;
    }
    to {
        margin-bottom: 0;
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.inicio-opacity {
    animation: inicioOpacityIn .8s cubic-bezier(0, .9, .4, 1);
}

.inicio-opacity-fast {
    animation: inicioOpacityIn .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes inicioOpacityIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.inicio-user-icon {
    animation: preUserIcon 1.5s, inicioUserIcon .8s 1.5s cubic-bezier(.25, 1.42, .41, 1.2);
}

@keyframes preUserIcon {
    from {
        transform: scale(.5);
        filter: blur(10px);
    }
    to {
        transform: scale(.5);
        filter: blur(10px);
    }
}

@keyframes inicioUserIcon {
    from {
        transform: scale(.5);
        filter: blur(10px);
    }
    to {
        transform: scale(1);
        filter: blur(0);
    }
}

.ani-notification {
    animation: preNotification .6s cubic-bezier(0, 1.5, .4, 1), inNotification 2s .5s, closeNotification 1s 2.5s cubic-bezier(.4, 0, 1, .4), closedNotification 1s 3.5s;
}

@keyframes preNotification {
    from {
        transform: translateY(-100%) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) rotateX(0);
        opacity: 1;
    }
}

@keyframes inNotification {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@keyframes closedNotification {
    from {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}

@keyframes closeNotification {
    from {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
    to {
        transform: scale(.6);
        filter: blur(10px);
        opacity: 0;
    }
}

.aniopasca {
    animation: aniopasca .4s cubic-bezier(0, .9, .4, 1);
}

.aniopasca2 {
    animation: closedNotification .5s, aniopasca .5s .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes aniopasca {
    from {
        transform: scale(.6);
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.inicio-horario {
    animation: closedNotification .4s, inicioHorario .3s .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes inicioHorario {
    from {
        transform: translateX(50%) translateY(-50%) scale(.6);
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.inicio-calendario {
    animation: closedNotification .4s, inicioCalendario .3s .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes inicioCalendario {
    from {
        transform: translateX(-50%) translateY(50%) scale(.6);
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.inicio-panel {
    animation: inicioCalendario .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes inicioCalendario {
    from {
        transform: translateX(-50%) scale(.6);
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.animationcca {
    animation: clockChangeAnimationP1 .1s cubic-bezier(0, .7, .3, 1), clockChangeAnimationP2 .3s .1s cubic-bezier(0, 1.2, .45, 1.8);
}

@keyframes clockChangeAnimationP1 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(.9);
    }
}

@keyframes clockChangeAnimationP2 {
    0% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}

.animationhni {
    animation: horarioNowItem 2s cubic-bezier(.4, 0, .4, 1) infinite;
}

@keyframes horarioNowItem {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
    100% {
        opacity: 1;
    }
}

.animationhni2 {
    animation: ANIMATIONanimationhni2 2s cubic-bezier(.4, 0, .4, 1) infinite;
}

@keyframes ANIMATIONanimationhni2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.anifromup {
    animation: fromUp .4s cubic-bezier(0, .9, .4, 1);
}

@keyframes fromUp {
    from {
        margin-bottom: -100%;
        transform: scale(.8);
        filter: blur(40px);
        opacity: 0;
        pointer-events: none;
    }
    to {
        margin-bottom: 0;
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
        pointer-events: none;
    }
}

.gtransition {
    transition: .3s cubic-bezier(0, .7, .4, 1);
}

.ltransition {
    transition: .5s cubic-bezier(0, .7, .4, 1);
}

.dtransition {
    transition: .5s cubic-bezier(.25, 1.42, .41, 1.2);
}

.qtransition {
    transition: .4s cubic-bezier(.6, 0, 1, .8);
}

.rtransition {
    transition: .2s cubic-bezier(.6, 0, 1, .8);
}