#app, body {
    height: 100% !important;
}

html {
    height: 100vh;
}

.mud-layout {
    animation: fade 1s;
}

.devc-nav-item, .devc-button {
    transition: color 0.3s linear, transform 0.3s linear;
}

.devc-item:hover {
    color: #2902d4;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.devc-button:hover {
    color: #0210cc;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

#load-container {
    height: 100%;
    background-color: #ffffff;
}

#load-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 91%;
}

@media(max-width: 959px) {
    #load-logo {
        width: 50%;
    }

    #load-spinner {
        border-top: 4px solid #0d6efd;
        border-right: 4px solid transparent;
        border-radius: 50%;
        width: 9vw;
        height: 9vw;
        animation: spin 0.75s linear 0s infinite;
        margin: 35px 0;
    }

    #load-text {
        color: black;
        font-size: 4vw;
        font-family: Roboto, Helvetica, Arial, sans-serif;
    }
}

@media(min-width: 960px) {
    #load-logo {
        width: 480px;
    }

    #load-spinner {
        border-top: 4px solid #0d6efd;
        border-right: 4px solid transparent;
        border-radius: 50%;
        width: 85px;
        height: 85px;
        animation: spin 0.75s linear 0s infinite;
        margin: 35px 0;
    }

    #load-text {
        color: black;
        font-size: 38px;
        font-family: Roboto, Helvetica, Arial, sans-serif;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*Tablestuff*/

tbody::before {
    content: '';
    display: block;
    height: 5px;
}


.devc-table-sort-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-direction: inherit;
    justify-content: flex-start;
}

    .devc-table-sort-label:hover {
        color: #0d6efd;
    }

        .devc-table-sort-label:hover .devc-table-sort-label-icon {
            opacity: 0.85;
        }

    .devc-table-sort-label .devc-table-sort-label-icon {
        font-size: 18px;
        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        margin-left: 4px;
        user-select: none;
        margin-right: 4px;
        opacity: 0.5;
    }

.active-filter {
    background-color: #e4e7eb;
    padding: 8px;
    margin: 0 5px;
    border-radius: 8px;
}

.circle {
    width: 25px;
    height: 25px;
    border-radius: 25%;
}

.circle-sm {
    width: 18px;
    height: 18px;
    border-radius: 25%;
}