.dui-info-box {
    height: auto;
    display: flex;
    flex-direction: var(--dui-infobox-direction);
    cursor: default;
    background-color: var(--dui-info-background-color);
    position: relative;
    overflow: hidden;
    margin: var(--dui-info-margin);
    color: var(--dui-text-color, var(--dui-info-color));
    box-shadow: var(--dui-infobox-box-shadow);
}

.dui-info-box.dui-info-flipped {
    min-height: var(--dui-info-flipped-height);
    --dui-infobox-direction: row-reverse;
}

.dui-info-icon {
    display: inline-block;
    text-align: center;
    min-width: var(--dui-info-icon-size);
    width: var(--dui-info-icon-size);
    min-height: var(--dui-info-icon-size);
    height: var(--dui-info-icon-size);
    color: var(--dui-info-icon-color);
    background-color: var(--dui-bg, var(--dui-info-icon-background));
}


.dui-info-icon i.dui {
    min-width: var(--dui-info-icon-size);
    min-height: var(--dui-info-icon-size);
}

.dui-info-icon i.dui.mdi:before {
    font-size: var(--dui-info-icon-font-size);
    transform: translate(calc(var(--dui-info-icon-size) / 3* -1), calc(var(--dui-info-icon-size) / 3* -1));
}

.dui-info-icon i.dui.mdi,
.dui-info-icon i.dui.mdi:before {
    min-width: var(--dui-info-icon-size);
    min-height: var(--dui-info-icon-size);
    line-height: var(--dui-info-icon-size);
}

.dui-info-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;
    padding: var(--dui-info-content-padding);
    align-items: var(--dui-info-align, end);
}

.dui-info-title {
    order: 10;
    font-size: var(--dui-info-title-font-size);
    margin: var(--dui-info-title-margin);
}

.dui-info-value {
    order: 20;
    font: var(--dui-info-value-font);
    margin: var(--dui-info-value-margin);
}

.dui-info-flipped {
    --dui-info-align: start;
}

.dui-info-flipped .dui-info-content {
    padding: var(--dui-info-flipped-content-padding);
}

.dui-info-hover-zoom .dui-info-icon {
    overflow: hidden;
}

.dui-info-hover-zoom .dui-info-icon i.dui,
.dui-info-hover-zoom .dui-info-icon i.dui.mdi:before {
    transition: all var(--dui-info-hover-duration) ease;
}

.dui-info-hover-zoom:hover .dui-info-icon i.dui,
.dui-info-hover-zooms:hover .dui-info-icon i.dui.mdi:before {
    opacity: 0.4;
    transform: rotate(var(--dui-info-hover-rotation)) scale(var(--dui-info-hover-scale));
}

.dui-info-hover-expand:not(.dui-info-flipped):after {
    background-color: rgba(0, 0, 0, 0.05);
    content: ".";
    position: absolute;
    left: var(--dui-info-icon-size);
    top: 0;
    width: 0;
    height: 100%;
    color: transparent;
    -moz-transition: all var(--dui-info-expand-duration);
    -o-transition: all var(--dui-info-expand-duration);
    -webkit-transition: all var(--dui-info-expand-duration);
    transition: all var(--dui-info-expand-duration);
}

.dui-info-flipped.dui-info-hover-expand:hover:after,
.dui-info-hover-expand:hover:after {
    width: 100%;
}

.dui-info-flipped.dui-info-hover-zoom .dui-info-icon i.dui,
.dui-info-flipped.dui-info-hover-zoom .dui-info-icon i.dui.mdi:before {
    transition: all var(--dui-info-hover-duration) ease;
}

.dui-info-flipped.dui-info-hover-expand:after {
    background-color: rgba(0, 0, 0, 0.05);
    content: ".";
    position: absolute;
    right: 70px;
    top: 0;
    width: 0;
    height: 100%;
    color: transparent;
    transition: all var(--dui-info-expand-duration);
}