@layer xone-project {
.xone-coll {
    cell-height: calc(70 * var(--xone-p-unit, 1px));
}

.frameKpiCardWeb {
    width: 100%;
    height: calc(120 * var(--xone-p-unit, 1px));
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    elevation: 3;
}

.headerStickyWeb {
    width: 100%;
    height: calc(64 * var(--xone-p-unit, 1px));
    background-color: #1A237E;
    elevation: 4;
}

.cardWeb {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    elevation: 2;
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.btnWebPrimario {
    width: 90%;
    height: calc(48 * var(--xone-p-unit, 1px));
    background-color: #1A237E;
    color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    text-align: center;
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    --xone-align: center;
    ripple-effect: true;
}

.btnWebSecundario {
    width: 90%;
    height: calc(48 * var(--xone-p-unit, 1px));
    background-color: #546E7A;
    color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    text-align: center;
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    --xone-align: center;
    ripple-effect: true;
}

.inputWebForm {
    labelwidth: 0;
    width: 90%;
    height: calc(48 * var(--xone-p-unit, 1px));
    --xone-align: center;
    border-radius: calc(10 * var(--xone-p-unit, 1px));
    floating-tooltip: true;
    tooltip-forecolor: #78909C;
    --xone-floating-label-color: #78909C;
    expanded-hint-color-focus: #1A237E;
    text-border: true;
    text-border-color: #CFD8DC;
    padding-left: calc(12 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.formGridWeb {
    width: 96%;
    margin-left: 2%;
}

.celdaWebTitulo {
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    color: #212121;
    font-weight: bold;
    labelwidth: 0;
    text-align: left;
}

.celdaWebSubtitulo {
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    color: #90A4AE;
    labelwidth: 0;
    text-align: left;
}

.testGridItem {
    width: 100%;
    height: calc(80 * var(--xone-p-unit, 1px));
    background-color: #E3F2FD;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    elevation: 1;
}

.testFlexItem {
    width: 100%;
    height: calc(60 * var(--xone-p-unit, 1px));
    background-color: #FFF3E0;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    elevation: 1;
}

.testStickyHeader {
    width: 100%;
    height: calc(50 * var(--xone-p-unit, 1px));
    background-color: #1A237E;
    color: #FFFFFF;
    elevation: 4;
}

.sectionBlue {
    background-color: #E8EAF6;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.sectionGreen {
    background-color: #E8F5E9;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.sectionOrange {
    background-color: #FFF3E0;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.sectionRed {
    background-color: #FFEBEE;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
}

.testSectionLabel {
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    color: #37474F;
    font-weight: bold;
    labelwidth: 0;
    text-align: left;
    margin-top: calc(12 * var(--xone-p-unit, 1px));
}

.testAttrLabel {
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    color: #546E7A;
    labelwidth: 0;
    text-align: left;
}

.testAttrValue {
    font-size: calc((8 + 9) * var(--xone-font-unit, 1px));
    color: #78909C;
    labelwidth: 0;
    text-align: left;
    font-style: italic;
}
}