:root {
    /* Colors */
    --c-primary: #4564ff;
    --c-primary-75: rgba(69, 100, 255, 0.75);
    --c-primary-50: rgba(69, 100, 255, 0.5);
    --c-primary-25: rgba(69, 100, 255, 0.25);
    --c-primary-light: #638fff;
    --c-primary-light-50: rgba(99, 143, 255, 0.5);
    --c-primary-light-25: rgba(99, 143, 255, 0.5);
    --c-secondary: #EE8383;
    --c-bg-white: #FFF;
    --c-bg-white-75: rgba(255, 255, 255, 0.75);
    --c-bg-white-50: rgba(255, 255, 255, 0.5);
    --c-bg-white-25: rgba(255, 255, 255, 0.25);
    --c-label: #e5e5f8;
    --c-display: #9cb8ff;
    --c-body: #f6fbff;
    --c-background: #F8F8F8;
    --c-background-15: rgba(248, 248, 248, 0.15);
    --c-hover: rgb(247, 245, 255);

    /* Styles */
    --st-font-family: Work Sans;
    --st-icon-font-family: Font Awesome 6 Free, Font Awesome 5 Free;

    /* Box shadows */
    --bs-button: 0 4px 8px rgba(142.27, 126.66, 162.56, 0.50);
    --bs-spread: 0px 5px 25px 0px rgba(118, 103, 139, 0.25);
    --bs-spread-light: 0px 5px 25px 0px rgba(118, 103, 139, 0.15);
    --bs-smashed: 0px 2px 2px 0px rgba(142, 127, 163, 0.50);

    /* Transition */
    --t-all: all 500ms ease
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--st-font-family), 'Poppins', sans-serif;
    color: var(--c-body);
    font-size: 14px;
    word-wrap: break-word;
    background: var(--c-background);
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}

/* Button styles */

.s-button:first-letter, .s-button-elevated:first-letter, .s-button-default:first-letter,
.s-button-outlined:first-letter, .s-button-danger:first-letter, .s-button-disabled:first-letter {
    text-transform: uppercase;
}

.s-button {
    text-decoration: none;
    min-width: 5rem;
    padding: .5rem 1rem;
    text-align: center;
    font-size: 1rem;
    font-family: var(--st-font-family);
    font-weight: 500;
    word-wrap: break-word;
    border-radius: 8px;
    transition: var(--t-all);
    cursor: pointer;
}

.s-button-elevated {
    box-shadow: var(--bs-button);
}

.s-button-default {
    color: var(--bs-emphasis-color);
    background: var(--c-primary);
    border: 1px var(--c-primary) solid;
}

.s-button-outlined {
    background: var(--bs-body-bg);
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.s-button-danger {
    background: var(--bs-body-bg);
    color: var(--c-secondary);
    border: 1px solid var(--c-secondary);
}

.s-button-disabled {
    background: none;
    color: #42404DFF;
    border: 1px solid #42404DFF;
    box-shadow: none;
    cursor: auto;
}

.s-button-classic-hover:hover {
    background: var(--bs-secondary-bg);
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.s-button-zoom-hover:hover {
    transform: scale(11);
}

.s-button:hover {
    background: var(--bs-secondary-bg);
    box-shadow: var(--bs-smashed);
}

.s-button-disabled:hover {
    background: none;
    color: #42404DFF;
    box-shadow: none;
    border: 1px solid #42404DFF;
    cursor: auto;
}

.icon-button:hover {
    background: rgba(219, 219, 219, 0.6);
}

/* Background colors */

.bg-white {
    background: var(--c-bg-white);
}

.bg-white-75 {
    background: var(--c-bg-white-75);
}

.bg-white-50 {
    background: var(--c-bg-white-50);
}

.font-color {
    color: #625F6F;
}

.text-nowrap {
    white-space: nowrap;
}

/* Text Styles */

.ts-header-1 {
    font-family: var(--st-font-family);
    font-weight: 700;
    word-wrap: break-word;
    font-size: 20px;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.44px;
}

.ts-header-2 {
    font-size: 18px;
    font-family: var(--st-font-family);
    font-weight: 700;
}

.ts-label {
    font-size: 14px;
    font-family: var(--st-font-family);
    font-weight: 400;
    word-wrap: break-word;
}

.ts-title {
    font-size: 16px;
    font-family: var(--st-font-family);
    font-weight: 600;
    word-wrap: break-word;
}

.ts-body {
    font-size: 14px;
    font-family: var(--st-font-family);
    font-weight: 400;
    word-wrap: break-word;
}

.ts-subtitle {
    font-size: 14px;
    font-family: var(--st-font-family);
    font-weight: 500;
    word-wrap: break-word;
}

/* Text Color */

.tc-body {
    color: var(--c-body);
}

.tc-display {
    color: var(--c-display);
}

.tc-label {
    color: var(--c-label);
}

.tc-primary {
    color: var(--c-primary);
}

.tc-secondary {
    color: var(--c-secondary);
}

.tc-green {
    color: #28ff56;
}

/* shadow */

.s-shadow-spread-light {
    box-shadow: var(--bs-spread-light);
}

.s-shadow-spread {
    box-shadow: var(--bs-spread);
}

.s-shadow-smashed {
    box-shadow: var(--bs-smashed);
}

.s-shadow-button {
    box-shadow: var(--bs-button);
}

/* Background colors */

.bc-primary {
    background-color: var(--c-primary);
}

.bc-primary-75 {
    background-color: var(--c-primary-75);
}

.bc-primary-50 {
    background-color: var(--c-primary-50);
}

.bc-primary-25 {
    background-color: var(--c-primary-25);
}

.bc-secondary {
    background-color: var(--c-secondary);
}

.bc-black {
    background-color: #000;
}

.bc {
    background-color: var(--c-background);
}

.bc-white {
    background-color: var(--c-bg-white);
}

.bc-white-75 {
    background-color: var(--c-bg-white-75);
}

.bc-white-50 {
    background-color: var(--c-bg-white-50);
}

.bc-white-25 {
    background-color: var(--c-bg-white-25);
}

.bc-grey {
    background: #ececec;
}

.bc-hover {
    background: var(--c-hover);
}

.bg-gradient-success {
    background-image: linear-gradient(310deg, #17ad37 0%, #7cc025 100%);
}

.bg-gradient-danger {
    background-image: linear-gradient(310deg, var(--c-secondary) 0%, #fa314e 100%);
}

/* Classes */

.s-smooth {
    transition: var(--t-all);
}

.nav-bar-item {
    border: 1px solid var(--c-background);
    transition: var(--t-all);
}

.nav-bar-item-selected:hover, .nav-bar-item:hover {
    border-radius: 8px;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    background: var(--c-bg-white);
    box-shadow: var(--bs-spread)
}

.nav-bar-item-selected {
    border: 1px var(--c-primary) solid;
    color: var(--c-primary);
    border-radius: 8px;
    transition: var(--t-all);
}

.icon {
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 20px;
    font-family: var(--st-icon-font-family);
    font-weight: 900;
    word-wrap: break-word;
}

.nav-item-title {
    font-size: 1rem;
    font-family: var(--st-font-family);
    font-weight: 500;
    word-wrap: break-word;
}

input {
    color: var(--c-body);
    font-weight: 500;
    width: 100%;
}

::placeholder {
    color: #C6C6C6;
}

label {
    width: 100%;
}

a {
    color: var(--c-primary-light);
}

.divider {
    border: .5px #C6C6C6 solid;
}

.divider-primary {
    border: .5px var(--c-primary-light) solid;
}

.s-border-primary {
    border: 1px var(--c-primary) solid;
}

.s-border-secondary {
    border: 1px var(--c-secondary) solid;
}

.Ellipse {
    @keyframes slideme {
        0% {
            top: 0;
            left: 0;
        }

        25% {
            top: 0%;
            left: 90%;
        }

        50% {
            top: 90%;
            left: 90%;
        }

        75% {
            top: 100%;
            left: 0%;
        }

        100% {
            top: 0%;
            left: 0%;
        }
    }
}

.s-blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.s-blur-small {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.s-blur-huge {
    -webkit-backdrop-filter: blur(200px);
    backdrop-filter: blur(200px);
}

.s-input, .form-control {
    background: var(--bs-secondary-bg);
}

.s-input:focus, .form-control:focus {
    background: var(--bs-secondary-bg);
    border-color: var(--c-primary-light) !important;
    box-shadow: 0 0 0 0.2rem var(--c-primary-light-25) !important;
}

.nav-link.active {
    background-color: var(--c-primary) !important;
    box-shadow: var(--bs-smashed);
    transition: var(--t-all);
}

.nav-link {
    color: var(--c-primary);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}