@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --c-primary: 233deg 67% 24%;
    --c-secondary: 233deg 79% 50%;
    --c-accent: 182deg 59% 75%;
    --c-accent-light: 182deg 59% 80%;
    --c-accent-lighter: 182deg 59% 90%;
    --c-account: 0deg 100% 78%;
    --c-info: 0deg 81% 87%;
    --c-tip: 0deg 94% 82%;
    --c-success: 147deg 80% 50%;
    --c-success-700: 147deg 80% 29%;
    --c-warning: 340deg 76% 37%;
    --c-warning-light: 340deg 76% 92%;
    --c-shadow: 0deg 0% 63%;

    --c-gray-100: 0deg 0% 96%;
    --c-gray-200: 0deg 0% 90%;
    --c-gray-300: 0deg 0% 85%;
    --c-gray-400: 0deg 0% 65%;
    --c-gray-500: 0deg 0% 50%;

    --c-body: 0deg 0% 5%;
    --c-page: hsl(var(--c-gray-100));

    --c-card-icon: hsl(var(--c-success));

    --chat-own-msg-bg: 233deg 79% 94%;
    --chapters-bg: #fff;

    --f-accent: 'Rubik', sans-serif;
    --f-main: 'Rubik', sans-serif;
    --f-heading-weight: 500;

    --i-auth-bg: url('/images/auth-img.jpg');

    --f-btn-weight: 500;
    --s-btn-radius: 0.375rem;

    --s-webinarsub-radius: 0.5rem;
}

.btn {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(var(--c-gray-200));
    --_c-btn-border: transparent;
    --_c-btn-hover-border: hsl(var(--c-gray-200));
    --_c-btn-color: hsl(var(--c-body));
    --_c-btn-hover-color: inherit;
}

.btn--primary {
    --_c-btn-bg: hsl(var(--c-primary));
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(var(--c-primary));
    --_c-btn-hover-border: hsl(var(--c-primary));
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(var(--c-primary));
}

.btn--outline-primary {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-primary));
    --_c-btn-border: hsl(var(--c-primary));
    --_c-btn-hover-border: hsl(var(--c-primary));
    --_c-btn-color: hsl(var(--c-primary));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--secondary {
    --_c-btn-bg: hsl(var(--c-secondary));
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(var(--c-secondary));
    --_c-btn-hover-border: hsl(var(--c-secondary));
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(var(--c-secondary));
}

.btn--outline-secondary {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-secondary));
    --_c-btn-border: hsl(var(--c-secondary));
    --_c-btn-hover-border: hsl(var(--c-secondary));
    --_c-btn-color: hsl(var(--c-secondary));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--success {
    --_c-btn-bg: hsl(var(--c-success));
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(var(--c-success));
    --_c-btn-hover-border: hsl(var(--c-success));
    --_c-btn-color: hsl(0 0% 5%);
    --_c-btn-hover-color: hsl(0 0% 5%);
}

.btn--outline-success {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-success));
    --_c-btn-border: hsl(var(--c-success));
    --_c-btn-hover-border: hsl(var(--c-success));
    --_c-btn-color: hsl(0 0% 5%);
    --_c-btn-hover-color: hsl(0 0% 5%);
}

.btn--warning {
    --_c-btn-bg: hsl(var(--c-warning));
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(var(--c-warning));
    --_c-btn-hover-border: hsl(var(--c-warning));
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(var(--c-warning));
}

.btn--outline-warning {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-warning));
    --_c-btn-border: hsl(var(--c-warning));
    --_c-btn-hover-border: hsl(var(--c-warning));
    --_c-btn-color: hsl(var(--c-warning));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-white {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(0 0% 100%);
    --_c-btn-hover-border: hsl(0 0% 100%);
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(var(--c-body));
}

.btn--link {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: transparent;
    --_c-btn-hover-border: transparent;
    --_c-btn-color: hsl(var(--c-body));
    --_c-btn-hover-color: hsl(var(--c-body));
}

.vwr-countdown {
    --c-vwr-countdown-bg: transparent;
    --c-vwr-countdown-txt: hsl(0deg 0% 100%);
    align-items: center;
}