chota/src/_util.css

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

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

.bg-dark {
    background-color: var(--color-darkGrey);
    color: #fff;
}

.bg-grey {
    background-color: var(--color-grey);
    color: #fff;
}

.bg-error {
    background-color: var(--color-error);
    color: #fff;
}

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

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

.text-light {
    color: var(--color-lightGrey);
}

.text-dark {
    color: var(--color-darkGrey);
}

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

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

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

/* Position & alignment */
.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.is-text-center {
    text-align: center;
}

.is-text-left {
    text-align: left;
}

.is-text-right {
    text-align: right;
}

.is-text-uppercase {
    text-transform: uppercase;
}

.is-text-lowercase {
    text-transform: lowercase;
}

.is-text-capitalize {
    text-transform: capitalize;
}

.is-full-screen {
    width: 100%;
    min-height: 100vh;
}

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

.is-vertical-align {
    display: flex;
    align-items: center;
}

.is-horizontal-align {
    display: flex;
    justify-content: center;
}

.is-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.is-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.is-fixed {
    position: fixed;
    width: 100%;
}

.is-paddingless {
    padding: 0 !important;
}

.is-marginless {
    margin: 0 !important;
}

.clearfix {
    content: "";
    display: table;
    clear: both;
}

.is-hidden {
    display: none !important;
}

@media screen and (max-width: 480px) {
    .hide-phone {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}