.w3-bar {
    background-color: var(--color-primary);
    color: #fff;
}

/*
.w3-button {
    background-color: var(--color-primary);
    color: #fff;
}
*/

.w3-button:hover {
    background-color: var(--color-text);
}

.w3-bg-white {
    background-color: #fff;
}

.w3-container {
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.w3-card {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: #fff;
}

/*
.w3-quarter-height,
.w3-fifth-height,
.w3-tenth-height {
    float: left;
    height: 100%;
}
*/

.w3-quarter-height {
    height: 24.9999%;
    width: 100%;
    min-width: 10px;
}

.w3-fifth-height {
    height: 19.9999% !important;
    width: 100%;
    min-width: 10px;
}

.w3-full-width {
    width: 100%;
}

.w3-full-height {
    height: 100%;
}

.w3-full-view-height {
    height: 100vh;
}

.w3-sixth {
    float: left;
    width: 100%
}

.w3-row-padding>.w3-sixth {
    padding:0 8px;
}

@media (min-width:501px) {
    .w3-sixth {
        width:16.0%;
    }

    .w3-tenth-height {
        height: 9.9999%;
        width: 100%;
        min-width: 20px;
    }

    .w3-row-padding>.w3-quarter-height,
    .w3-row-padding>.w3-fifth-height,
    .w3-row-padding>.w3-tenth-height {
        padding: 0 8px;
    }
}