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

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

.si.centered.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

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

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

/** Margin, Padding, Width, Height **/
.si.width{
    width: attr(data-size type(<percentage>)) !important;
}

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

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

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

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

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

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

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

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

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

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

/** Colors **/
.si.color.white{
    color: #FFF;
}

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

.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.primary-dark{
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

.si.background.primary-dark:hover {
    background-color: var(--color-primary-dark-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.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.accent{
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}


/** SI Utility **/
.si.cursor {
    cursor: pointer;
}

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

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

.si.form{
    height: 100%;
}

.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;
}

.sui.dimmer{
    background-color: rgba(0,0,0,.65);
    width: 100%;
    height: 100%;
    z-index: 2025;
    overflow: auto;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.sui.dimmer img{
    width: auto;
    height: 100%;
}

.sui.margin{
    margin: 20px;
}

.si.alert{
    border: 1px solid #EEE !important;
    border-radius: 8px !important;
    box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.5) !important; 
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%) !important
    
}