:root {
    --xs: 600;
    --sm: 960;
    --md: 1280px;
    --lg: 1920px;
}

@font-face {
    font-family: 'Bariol';
    src: url('../Fonts/Bariol/Bariol_Bold.otf');
    font-weight: 700;
}

@font-face {
    font-family: 'Bariol';
    src: url('../Fonts/Bariol/Bariol_Regular.otf');
    font-weight: 400;
}

@font-face {
    font-family: 'Figtree';
    src: url('../Fonts/Figtree/Figtree-Bold.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Figtree';
    src: url('../Fonts/Figtree/Figtree-Medium.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Figtree';
    src: url('../Fonts/Figtree/Figtree-Regular.ttf');
    font-weight: 300;
}

.csu-clickable:hover {
    cursor: pointer;
}

.csu-width-60 {
    width: 60%;
}
.csu-width-70 {
    width: 70%;
}
.csu-width-100 {
    width: 100%;
}

.csu-text-gradient {
    background-image: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: transparent;
    background-clip: text;
}

.csu-background-primary-hover {
    background: var(--mud-palette-primary-hover);
}

.csu-background-background {
    background: var(--mud-palette-background);
}

.csu-background-appbar-background {
    background: var(--mud-palette-appbar-background);
}

.csu-background-gray-lighter {
    background: var(--mud-palette-gray-lighter);
}

.csu-background-transparent {
    background: transparent;
}

.csu-color-primary-text {
    color: var(--mud-palette-primary-text);
}

.csu-color-gray-darker {
    color: var(--mud-palette-gray-darker);
}

.csu-theme-gradient {
    background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: var(--mud-palette-primary-text) !important;
}

.csu-divider {
    border-color: var(--mud-palette-secondary) !important;
}

.csu-item-not-selected {
    opacity: 0.4;
}

.csu-red-text {
    color: red !important;
}

@media(min-width: 1281px) {
    .csu-large-logo {
        width: 472px;
    }
}

@media(max-width: 1280px) {
    .csu-large-logo {
        width: 350px;
    }
}

@media(max-width: 600px) {
    .csu-responsive-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .csu-large-logo {
        width: 250px;
    }
}