:root {
    --purple: 137, 50, 255; /* #8932ff */
    --orange: 255, 102, 50; /* #ff6632 */
    --bronze: 204, 116, 41; /* #cc7429 */
    --pink: 231, 46, 122; /* #e72e7a */
    --tiffany: 51, 97, 255; /* #3361ff */
    --option: 50, 57, 63; /* #32393f */
    --facebook: 59, 89, 152; /* #3b5998 */
    --twitter: 85, 172, 238; /* #55acee */
    --youtube: 229, 45, 39; /* #e52d27 */
    --sky-light: 180, 210, 255; /* #b4d2ff */
    --primary-2: 142, 168, 253; /* #8ea8fd */
    --primary-3: 193, 207, 255; /* #c1cfff */
}

.sidebar-header {
    width: 260px;
    height: 65px;
    display: flex;
    align-items: center;
    top: 0;
    bottom: 0;
    padding: 0 15px;
    z-index: 5;
    background-clip: padding-box;
    transition: all .2s;
}

    .sidebar-header .logo-icon {
        width: 52px;
    }

    .sidebar-header .logo-text {
        font-size: 26px;
        margin-left: 11px;
        margin-bottom: 0;
        letter-spacing: 1px;
        color: #3461ff;
    }


.paginator {
}

    .paginator nav {
    }


.app-content {
    min-height: 100vh;
}


.nav-profile-name {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-wrapper .semi-nav .app-nav .main-nav li i {
    font-size: 1rem !important;
}

.identity-container {
}

    .identity-container .logo-text {
        font-size: 3rem;
    }

/* --- PURPLE --- */
.text-bg-purple {
    background-color: rgba(var(--purple), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-purple:hover, .text-bg-purple:active, .text-bg-purple.active, .text-bg-purple.show, .text-bg-purple:checked, .text-bg-purple:focus {
        background-color: rgba(var(--purple), 0.9);
    }

.text-outline-purple {
    background-color: transparent;
    color: rgba(var(--purple), 1);
    border: 1px solid rgba(var(--purple), 1);
}

    .text-outline-purple:hover, .text-outline-purple.active, .text-outline-purple.show, .text-outline-purple:checked, .text-outline-purple:focus {
        background-color: rgba(var(--purple), 1);
        color: rgba(var(--white), 1);
    }

.text-light-purple {
    background-color: rgba(var(--purple), 0.1);
    color: rgba(var(--purple), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-purple:hover, .text-light-purple.active, .text-light-purple.show, .text-light-purple:checked, .text-light-purple:focus {
        background-color: rgba(var(--purple), 0.2);
        border-color: rgba(var(--purple), 1);
        color: rgba(var(--purple), 1);
        transition: var(--app-transition);
    }

/* --- ORANGE --- */
.text-bg-orange {
    background-color: rgba(var(--orange), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-orange:hover, .text-bg-orange:active, .text-bg-orange.active, .text-bg-orange.show, .text-bg-orange:checked, .text-bg-orange:focus {
        background-color: rgba(var(--orange), 0.9);
    }

.text-outline-orange {
    background-color: transparent;
    color: rgba(var(--orange), 1);
    border: 1px solid rgba(var(--orange), 1);
}

    .text-outline-orange:hover, .text-outline-orange.active, .text-outline-orange.show, .text-outline-orange:checked, .text-outline-orange:focus {
        background-color: rgba(var(--orange), 1);
        color: rgba(var(--white), 1);
    }

.text-light-orange {
    background-color: rgba(var(--orange), 0.1);
    color: rgba(var(--orange), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-orange:hover, .text-light-orange.active, .text-light-orange.show, .text-light-orange:checked, .text-light-orange:focus {
        background-color: rgba(var(--orange), 0.2);
        border-color: rgba(var(--orange), 1);
        color: rgba(var(--orange), 1);
        transition: var(--app-transition);
    }

/* --- BRONZE --- */
.text-bg-bronze {
    background-color: rgba(var(--bronze), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-bronze:hover, .text-bg-bronze:active, .text-bg-bronze.active, .text-bg-bronze.show, .text-bg-bronze:checked, .text-bg-bronze:focus {
        background-color: rgba(var(--bronze), 0.9);
    }

.text-outline-bronze {
    background-color: transparent;
    color: rgba(var(--bronze), 1);
    border: 1px solid rgba(var(--bronze), 1);
}

    .text-outline-bronze:hover, .text-outline-bronze.active, .text-outline-bronze.show, .text-outline-bronze:checked, .text-outline-bronze:focus {
        background-color: rgba(var(--bronze), 1);
        color: rgba(var(--white), 1);
    }

.text-light-bronze {
    background-color: rgba(var(--bronze), 0.1);
    color: rgba(var(--bronze), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-bronze:hover, .text-light-bronze.active, .text-light-bronze.show, .text-light-bronze:checked, .text-light-bronze:focus {
        background-color: rgba(var(--bronze), 0.2);
        border-color: rgba(var(--bronze), 1);
        color: rgba(var(--bronze), 1);
        transition: var(--app-transition);
    }

/* --- PINK --- */
.text-bg-pink {
    background-color: rgba(var(--pink), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-pink:hover, .text-bg-pink:active, .text-bg-pink.active, .text-bg-pink.show, .text-bg-pink:checked, .text-bg-pink:focus {
        background-color: rgba(var(--pink), 0.9);
    }

.text-outline-pink {
    background-color: transparent;
    color: rgba(var(--pink), 1);
    border: 1px solid rgba(var(--pink), 1);
}

    .text-outline-pink:hover, .text-outline-pink.active, .text-outline-pink.show, .text-outline-pink:checked, .text-outline-pink:focus {
        background-color: rgba(var(--pink), 1);
        color: rgba(var(--white), 1);
    }

.text-light-pink {
    background-color: rgba(var(--pink), 0.1);
    color: rgba(var(--pink), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-pink:hover, .text-light-pink.active, .text-light-pink.show, .text-light-pink:checked, .text-light-pink:focus {
        background-color: rgba(var(--pink), 0.2);
        border-color: rgba(var(--pink), 1);
        color: rgba(var(--pink), 1);
        transition: var(--app-transition);
    }

/* --- TIFFANY --- */
.text-bg-tiffany {
    background-color: rgba(var(--tiffany), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-tiffany:hover, .text-bg-tiffany:active, .text-bg-tiffany.active, .text-bg-tiffany.show, .text-bg-tiffany:checked, .text-bg-tiffany:focus {
        background-color: rgba(var(--tiffany), 0.9);
    }

.text-outline-tiffany {
    background-color: transparent;
    color: rgba(var(--tiffany), 1);
    border: 1px solid rgba(var(--tiffany), 1);
}

    .text-outline-tiffany:hover, .text-outline-tiffany.active, .text-outline-tiffany.show, .text-outline-tiffany:checked, .text-outline-tiffany:focus {
        background-color: rgba(var(--tiffany), 1);
        color: rgba(var(--white), 1);
    }

.text-light-tiffany {
    background-color: rgba(var(--tiffany), 0.1);
    color: rgba(var(--tiffany), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-tiffany:hover, .text-light-tiffany.active, .text-light-tiffany.show, .text-light-tiffany:checked, .text-light-tiffany:focus {
        background-color: rgba(var(--tiffany), 0.2);
        border-color: rgba(var(--tiffany), 1);
        color: rgba(var(--tiffany), 1);
        transition: var(--app-transition);
    }

/* --- OPTION --- */
.text-bg-option {
    background-color: rgba(var(--option), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-option:hover, .text-bg-option:active, .text-bg-option.active, .text-bg-option.show, .text-bg-option:checked, .text-bg-option:focus {
        background-color: rgba(var(--option), 0.9);
    }

.text-outline-option {
    background-color: transparent;
    color: rgba(var(--option), 1);
    border: 1px solid rgba(var(--option), 1);
}

    .text-outline-option:hover, .text-outline-option.active, .text-outline-option.show, .text-outline-option:checked, .text-outline-option:focus {
        background-color: rgba(var(--option), 1);
        color: rgba(var(--white), 1);
    }

.text-light-option {
    background-color: rgba(var(--option), 0.1);
    color: rgba(var(--option), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-option:hover, .text-light-option.active, .text-light-option.show, .text-light-option:checked, .text-light-option:focus {
        background-color: rgba(var(--option), 0.2);
        border-color: rgba(var(--option), 1);
        color: rgba(var(--option), 1);
        transition: var(--app-transition);
    }

/* --- FACEBOOK --- */
.text-bg-facebook {
    background-color: rgba(var(--facebook), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-facebook:hover, .text-bg-facebook:active, .text-bg-facebook.active, .text-bg-facebook.show, .text-bg-facebook:checked, .text-bg-facebook:focus {
        background-color: rgba(var(--facebook), 0.9);
    }

.text-outline-facebook {
    background-color: transparent;
    color: rgba(var(--facebook), 1);
    border: 1px solid rgba(var(--facebook), 1);
}

    .text-outline-facebook:hover, .text-outline-facebook.active, .text-outline-facebook.show, .text-outline-facebook:checked, .text-outline-facebook:focus {
        background-color: rgba(var(--facebook), 1);
        color: rgba(var(--white), 1);
    }

.text-light-facebook {
    background-color: rgba(var(--facebook), 0.1);
    color: rgba(var(--facebook), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-facebook:hover, .text-light-facebook.active, .text-light-facebook.show, .text-light-facebook:checked, .text-light-facebook:focus {
        background-color: rgba(var(--facebook), 0.2);
        border-color: rgba(var(--facebook), 1);
        color: rgba(var(--facebook), 1);
        transition: var(--app-transition);
    }

/* --- TWITTER --- */
.text-bg-twitter {
    background-color: rgba(var(--twitter), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-twitter:hover, .text-bg-twitter:active, .text-bg-twitter.active, .text-bg-twitter.show, .text-bg-twitter:checked, .text-bg-twitter:focus {
        background-color: rgba(var(--twitter), 0.9);
    }

.text-outline-twitter {
    background-color: transparent;
    color: rgba(var(--twitter), 1);
    border: 1px solid rgba(var(--twitter), 1);
}

    .text-outline-twitter:hover, .text-outline-twitter.active, .text-outline-twitter.show, .text-outline-twitter:checked, .text-outline-twitter:focus {
        background-color: rgba(var(--twitter), 1);
        color: rgba(var(--white), 1);
    }

.text-light-twitter {
    background-color: rgba(var(--twitter), 0.1);
    color: rgba(var(--twitter), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-twitter:hover, .text-light-twitter.active, .text-light-twitter.show, .text-light-twitter:checked, .text-light-twitter:focus {
        background-color: rgba(var(--twitter), 0.2);
        border-color: rgba(var(--twitter), 1);
        color: rgba(var(--twitter), 1);
        transition: var(--app-transition);
    }

/* --- YOUTUBE --- */
.text-bg-youtube {
    background-color: rgba(var(--youtube), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-youtube:hover, .text-bg-youtube:active, .text-bg-youtube.active, .text-bg-youtube.show, .text-bg-youtube:checked, .text-bg-youtube:focus {
        background-color: rgba(var(--youtube), 0.9);
    }

.text-outline-youtube {
    background-color: transparent;
    color: rgba(var(--youtube), 1);
    border: 1px solid rgba(var(--youtube), 1);
}

    .text-outline-youtube:hover, .text-outline-youtube.active, .text-outline-youtube.show, .text-outline-youtube:checked, .text-outline-youtube:focus {
        background-color: rgba(var(--youtube), 1);
        color: rgba(var(--white), 1);
    }

.text-light-youtube {
    background-color: rgba(var(--youtube), 0.1);
    color: rgba(var(--youtube), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-youtube:hover, .text-light-youtube.active, .text-light-youtube.show, .text-light-youtube:checked, .text-light-youtube:focus {
        background-color: rgba(var(--youtube), 0.2);
        border-color: rgba(var(--youtube), 1);
        color: rgba(var(--youtube), 1);
        transition: var(--app-transition);
    }

/* --- SKY-LIGHT --- */
.text-bg-sky-light {
    background-color: rgba(var(--sky-light), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-sky-light:hover, .text-bg-sky-light:active, .text-bg-sky-light.active, .text-bg-sky-light.show, .text-bg-sky-light:checked, .text-bg-sky-light:focus {
        background-color: rgba(var(--sky-light), 0.9);
    }

.text-outline-sky-light {
    background-color: transparent;
    color: rgba(var(--sky-light), 1);
    border: 1px solid rgba(var(--sky-light), 1);
}

    .text-outline-sky-light:hover, .text-outline-sky-light.active, .text-outline-sky-light.show, .text-outline-sky-light:checked, .text-outline-sky-light:focus {
        background-color: rgba(var(--sky-light), 1);
        color: rgba(var(--white), 1);
    }

.text-light-sky-light {
    background-color: rgba(var(--sky-light), 0.1);
    color: rgba(var(--sky-light), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-sky-light:hover, .text-light-sky-light.active, .text-light-sky-light.show, .text-light-sky-light:checked, .text-light-sky-light:focus {
        background-color: rgba(var(--sky-light), 0.2);
        border-color: rgba(var(--sky-light), 1);
        color: rgba(var(--sky-light), 1);
        transition: var(--app-transition);
    }

/* --- PRIMARY-2 --- */
.text-bg-primary-2 {
    background-color: rgba(var(--primary-2), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-primary-2:hover, .text-bg-primary-2:active, .text-bg-primary-2.active, .text-bg-primary-2.show, .text-bg-primary-2:checked, .text-bg-primary-2:focus {
        background-color: rgba(var(--primary-2), 0.9);
    }

.text-outline-primary-2 {
    background-color: transparent;
    color: rgba(var(--primary-2), 1);
    border: 1px solid rgba(var(--primary-2), 1);
}

    .text-outline-primary-2:hover, .text-outline-primary-2.active, .text-outline-primary-2.show, .text-outline-primary-2.checked, .text-outline-primary-2:focus {
        background-color: rgba(var(--primary-2), 1);
        color: rgba(var(--white), 1);
    }

.text-light-primary-2 {
    background-color: rgba(var(--primary-2), 0.1);
    color: rgba(var(--primary-2), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-primary-2:hover, .text-light-primary-2.active, .text-light-primary-2.show, .text-light-primary-2.checked, .text-light-primary-2:focus {
        background-color: rgba(var(--primary-2), 0.2);
        border-color: rgba(var(--primary-2), 1);
        color: rgba(var(--primary-2), 1);
        transition: var(--app-transition);
    }

/* --- PRIMARY-3 --- */
.text-bg-primary-3 {
    background-color: rgba(var(--primary-3), 1) !important;
    color: rgba(var(--white), 1);
}

    .text-bg-primary-3:hover, .text-bg-primary-3:active, .text-bg-primary-3.active, .text-bg-primary-3.show, .text-bg-primary-3:checked, .text-bg-primary-3:focus {
        background-color: rgba(var(--primary-3), 0.9);
    }

.text-outline-primary-3 {
    background-color: transparent;
    color: rgba(var(--primary-3), 1);
    border: 1px solid rgba(var(--primary-3), 1);
}

    .text-outline-primary-3:hover, .text-outline-primary-3.active, .text-outline-primary-3.show, .text-outline-primary-3.checked, .text-outline-primary-3:focus {
        background-color: rgba(var(--primary-3), 1);
        color: rgba(var(--white), 1);
    }

.text-light-primary-3 {
    background-color: rgba(var(--primary-3), 0.1);
    color: rgba(var(--primary-3), 1);
    border-color: transparent;
    transition: var(--app-transition);
}

    .text-light-primary-3:hover, .text-light-primary-3.active, .text-light-primary-3.show, .text-light-primary-3.checked, .text-light-primary-3:focus {
        background-color: rgba(var(--primary-3), 0.2);
        border-color: rgba(var(--primary-3), 1);
        color: rgba(var(--primary-3), 1);
        transition: var(--app-transition);
    }


.text-purple {
    color: rgba(var(--purple), 1) !important;
}

.text-orange {
    color: rgba(var(--orange), 1) !important;
}

.text-bronze {
    color: rgba(var(--bronze), 1) !important;
}

.text-pink {
    color: rgba(var(--pink), 1) !important;
}

.text-tiffany {
    color: rgba(var(--tiffany), 1) !important;
}

.text-option {
    color: rgba(var(--option), 1) !important;
}

.text-facebook {
    color: rgba(var(--facebook), 1) !important;
}

.text-twitter {
    color: rgba(var(--twitter), 1) !important;
}

.text-youtube {
    color: rgba(var(--youtube), 1) !important;
}

.text-sky-light {
    color: rgba(var(--sky-light), 1) !important;
}

.text-primary-2 {
    color: rgba(var(--primary-2), 1) !important;
}

.text-primary-3 {
    color: rgba(var(--primary-3), 1) !important;
}