.si.full.height{
    height: 100%;
}

.si.flex{
    display: flex !important;
    flex-direction: column;
}

.si.grow{
    flex-grow: 1 !important;
}

.si.centered{
    justify-content: center;
    align-items: center;
}

.si.overflow{
    overflow-y: auto;
    overflow-x: hidden;
}

.si.overflow.none{
    overflow: hidden;
}

.si.overlay{
    position:absolute;
    width: 100%;
    height:calc(100svh - var(--dashboard-height) );
    top: 0px;
    left: 0;
    background-color: var(--color-white-warm);
    z-index: 801;
}

.si.form{
    height: 100%;
}

.si.table{
    max-height: 100% !important;
}

/** Utilities **/
.si.cursor {
    cursor: pointer;
}

.si.hide{
    display: none !important;
}

/** Colors */
/** Text */
.si.color.primary{
    color: var(--color-primary) !important;
}

.si.color.secondary{
    color: var(--color-secondary) !important;
}

.si.color.accent{
    color: var(--color-accent) !important;
}

.si.color.white{
    color: var(--color-white) !important;
}

.si.color.white-light{
    color: var(--color-white-light) !important;
}
/** Background */
.si.background.primary{
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}
.si.background.primary:hover{
    background-color: var(--color-primary-light) !important;
}

.si.background.secondary{
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}
.si.background.secondary:hover{
    background-color: var(--color-secondary-light) !important;
}

.si.background.primary-accent{
    background-color: var(--color-primary-accent) !important;
    color: var(--color-white) !important;
}

.si.background.primary-accent:hover {
    background-color: var(--color-primary-accent-light) !important;
}

.si.background.secondary-dark{
    background-color: var(--color-secondary-dark) !important;
    color: var(--color-white) !important;
}
.si.background.secondary-dark:hover{
    background-color: var(--color-secondary-dark-light) !important;
}

.si.background.white{
    background-color: var(--color-white);
}

.si.background.warning{
    background-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

.si.background.transparent{
    background: transparent !important;
    box-shadow: none;
    border: 0;
}

/** Attachment */
.sui.attachment{
    height: 80px;
    width: 80px;
    margin: 3.6px;
    display: inline-block;
    position: relative;
}

.sui.attachment img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sui.attachment .actions{
    position: absolute;
    background: rgba(55,55,55,0.3);
    height: 80px;
    width: 24px;
    right: 0;
    bottom: 0;
    top: 0;
}

.sui.attachment .actions .trash{
    position: absolute;
    right: 0px;
    top: 8px;
    color: #FFF;
}

.sui.attachment .actions .zoom.in{
    position: absolute;
    right: 0px;
    bottom: 8px;
    color: #FFF;
}

.si.spacer.width{
    width: attr(data-size px, 8px) !important;
}

.si.spacer.height{
    height: attr(data-size px, 8px) !important;
}