@font-face {
    font-family: 'Segoe UI Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Regular'), url('../fonts/segoe-ui/Segoe UI.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Italic'), url('../fonts/segoe-ui/Segoe UI Italic.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold'), url('../fonts/segoe-ui/Segoe UI Bold.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold Italic'), url('../fonts/segoe-ui/Segoe UI Bold Italic.woff') format('woff');
}

html {
    font-family: 'Segoe UI Regular' !Important;
}

:root {
    --primary: #563e7c;
    --secondary: #7051a2;
    --dark-primary: #322449;
    --success: #1d9e74;
    --danger: #ef3b4f;
    --warning: #e65d0d;
}

.text-primary, .primary-text{
    color: var(--primary);
}

.text-danger, .danger-text{
    color: var(--danger);
}

.text-warning, .warning-text{
    color: var(--warning);
}

.text-success, .success-text{
    color: var(--success);
}

.text-secondary, .secondary-text{
    color: var(--secondary);
}

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

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

.bg-success{
    background-color: var(--success);
}

.bg-danger{
    background-color: var(--danger);
}

.bg-warning{
    background-color: var(--warning);
}

nav#w-top-nav{
    background-color: #ffffff;
}

nav#w-top-nav a{
    color: #333333;
    white-space: nowrap;
}

#w-side-nav{
    background: linear-gradient(265deg, hsl(317, 88%, 87%) 0%, hsl(218, 68%, 79%) 100%);
}
#w-side-nav * {
    /*color: white;*/
}

.dropdown-content li > a, .dropdown-content li > span {
    color: #333333;
}

nav#breadcrumbs{
    background-color: var(--primary);
}

nav#breadcrumbs .breadcrumb{
    /*color: var(--primary);*/
}

.toast.success{
    background-color: var(--success);
}

.toast.error {
    background-color: var(--danger);
}

.toast.warning{
    background-color: var(--warning);
}

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

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

.secondary-text {
    color: var(--secondary);
}

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

.btn, .btn-large, .btn-small{
    background-color: var(--primary);
}

.btn:hover, .btn-large:hover, .btn-small:hover{
    background-color: var(--secondary);
}

.btn-round{
    border-radius: 1.25em;
}

.pagination li.active{
    background-color: var(--primary);
}

.hover-ltr{
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, rgba(0, 86, 171, 0.2) 50%);
    transition: background-position .5s;
}
.hover-ltr:hover{
    background-position: -100% 0;
}

.sidenav li.active {
    background-color: var(--primary);
}
.sidenav li.active * {
    color: #fff;
}

th.gridjs-th {
    background: var(--secondary);
    color: #fff;
}

th.gridjs-th:hover, th.gridjs-th-sort:focus, th.gridjs-th-sort:hover {
    background: var(--dark-primary);
    color: #fff;
}

.home-section-full-screen{
    /*min-height: calc(100vh - 64px);*/
    min-height: 100vh;
}
#home{
    background-image: url('../img/home-backround.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    /* Add the blur effect */
    filter: blur(4px);
    -webkit-filter: blur(4px);
}

.top-nav-fixed{
    position: fixed;
    z-index: 1;
    box-shadow: none;
    background: transparent!important;
}

.collection a.collection-item{
    color: var(--primary);
}

.tabs .tab a {
    color: var(--primary) !important;
}
.tabs .tab a.active {
    font-weight: bold;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: rgb(176 134 245 / 29%);
}
.tabs .indicator{
    background-color: var(--primary);
}