/* Foundations: Start */
/* Meyer's Reset: Start */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
t,
article,
aside,
audio,
bb,
bdi,
canvas,
command,
datagrid,
datalist,
details,
dialog,
embed,
eventsource,
figcaption,
figure,
footer,
header,
hgroup,
keygen,
mark,
menu,
meter,
nav,
output,
progress,
rp,
rt,
ruby,
section,
source,
summary,
time,
track,
video,
wbr {
border: var(--layout-0);
margin: var(--layout-0);
outline: var(--layout-0);
padding: var(--layout-0);
vertical-align: baseline;
}
:focus {
outline: var(--layout-0);
}
body {
background: var(--color-neutrals-white);
color: var(--color-neutrals-black);
line-height: var(--font-standard-line-height);
}
ol,
ul,
menu {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: var(--layout-0);
}
caption,
th,
td {
font-weight: var(--text-weight-regular);
/* Direction: Start */
/* Direction: End */
}
caption[dir='ltr'],
th[dir='ltr'],
td[dir='ltr'] {
text-align: left;
}
caption[dir='rtl'],
th[dir='rtl'],
td[dir='rtl'] {
text-align: right;
}
blockquote::after,
blockquote::before,
q::after,
q::before {
content: var(--contentEmpty);
}
blockquote,
q {
quotes: '' '';
}
/* Clearfix: Start */
.clearfix {
clear: both;
}
/* Clearfix: End */
/* Meyer's Reset: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Animation: Start */
/* Ai: Start */
/* Accordion, Cards & Modal: Start */
@keyframes ai-accordion-cards-modal-shadow {
from {
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-base);
}
to {
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
}
}
/* Accordion, Cards & Modal: End */
/* Badge & Tag: Start */
@keyframes ai-rotate-tag {
0% {
opacity: var(--alpha-1);
transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
}
75% {
opacity: var(--alpha-1);
}
100% {
opacity: var(--alpha-0);
transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
}
}
/* Badge & Tag: End */
/* Button: Start */
/* Icon: Start */
@keyframes ai-button-icon-effect {
0% {
background-position: var(--percentage-0) var(--percentage-50);
}
50% {
background-position: var(--percentage-100) var(--percentage-50);
}
100% {
background-position: var(--percentage-0) var(--percentage-50);
}
}
/* Icon: End */
/* Text: Start */
@keyframes ai-button-text-gradient {
0% {
background-position: var(--percentage-0) var(--percentage-50);
}
50% {
background-position: var(--percentage-100) var(--percentage-50);
}
100% {
background-position: var(--percentage-0) var(--percentage-50);
}
}
/* Text: End */
/* Button: End */
/* Placeholder: Start */
@keyframes ai-placeholder {
from {
left: Var(--percentage-0);
}
to {
left: var(--percentage-100);
}
}
/* Placeholder: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Enter: Start */
@keyframes down-enter {
0% {
clip-path: inset(var(--layout-0) var(--layout-0) var(--percentage-100) var(--layout-0));
}
100% {
clip-path: inset(var(--layout-0));
}
}
/* Enter: End */
/* Leave: Start */
@keyframes down-leave {
0% {
clip-path: inset(var(--layout-0));
}
100% {
clip-path: inset(var(--percentage-100) var(--layout-0) var(--layout-0) var(--layout-0));
}
}
/* Leave: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* General Loading: Start */
@keyframes general-loading {
50% {
opacity: var(--alpha-100);
transform: scale(1);
}
100% {
opacity: var(--alpha-0);
}
}
/* General Loading: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* NO SE USA */
/* Ai: Start */
@keyframes ai-glowing {
0% {
background-position: var(--percentage-0) var(--percentage-0);
}
50% {
background-position: 400% var(--percentage-0);
}
100% {
background-position: var(--percentage-0) var(--percentage-0);
}
}
@keyframes ai-glowing-badge-tag {
0% {
background-position: var(--percentage-0) var(--percentage-0);
}
25% {
background-position: var(--percentage-50) var(--percentage-0);
}
50% {
background-position: var(--percentage-100) var(--percentage-0);
}
75% {
background-position: var(--percentage-50) var(--percentage-0);
}
100% {
background-position: var(--percentage-0) var(--percentage-0);
}
}
/* Ai: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Left to Right: Start */
@keyframes left-to-right {
from {
translate: var(--layout-0);
}
to {
translate: calc(var(-1) * var(--percentage-50));
}
}
/* Left to Right: End */
/* Right to Left: Start */
@keyframes right-to-left {
from {
translate: calc(var(-1) * var(--percentage-50));
}
to {
translate: var(--layout-0);
}
}
/* Right to Left: End */
/* DEPRECATED
[data-animation='a_anim-left-to-right'],
[data-animation='a_anim-right-to-left'] {
animation-duration: .5s;
animation-name: left-to-right;
animation-timing-function: ease-in-out;
}
[data-animation='a_anim-right-to-left'] {
animation-direction: reverse;
}
@keyframes left-to-right {
from { translate: 0; }
to { translate: -50%; }
}
DEPRECATED */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Loading > Indeterminate: Start */
@keyframes indeterminate-loading {
from {
width: var(--percentage-0);
}
to {
width: var(--percentage-100);
}
}
/* Loading > Indeterminate: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Spinner: Start */
@keyframes spinner {
0% {
transform: rotate(var(--rotation-angle-0));
}
100% {
transform: rotate(var(--rotation-angle-359));
}
}
/* Spinner: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Animation: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Drag and Drop: Start */
/* Import: Start */
/* Draggable: Start */
[draggable='true'] {
cursor: grab;
overflow: visible;
position: relative;
}
/* Draggale: End */
/* Draggable Item: Start */
.is-dragging {
cursor: grabbing;
}
/* Draggable Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Drop Target: Start */
.is-dragged-over {
background-color: var(--color-secondary-list-base);
/* Box: Start */
/* Box: End */
/* Line: Start */
/* Line: End */
}
.is-dragged-over[data-indicator='box'] {
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-b) rgba(var(--drop-box-shadow-rgba-color-r), var(--drop-box-shadow-rgba-color-g), var(--drop-box-shadow-rgba-color-b), var(--drop-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
transition: box-shadow var(--time-commons-base) ease;
}
.is-dragged-over[data-indicator='line']::after,
.is-dragged-over[data-indicator='line']::before {
content: var(--contentEmpty);
position: absolute;
}
.is-dragged-over[data-indicator='line']::after {
background-color: var(--color-primary-link-base);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='bottom']::after,
.is-dragged-over[data-indicator='line'][data-drop-edge='top']::after {
height: var(--layout-half);
left: var(--layout-0);
right: var(--layout-0);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='bottom']::after {
bottom: var(--layout-0);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='left']::after,
.is-dragged-over[data-indicator='line'][data-drop-edge='right']::after {
bottom: var(--layout-0);
top: var(--layout-0);
width: var(--layout-half);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='left']::after {
left: var(--layout-0);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='right']::after {
right: var(--layout-0);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='top']::after {
top: var(--layout-0);
}
.is-dragged-over[data-indicator='line']::before {
background-color: var(--color-neutrals-white);
border: solid var(--layout-half) var(--color-primary-link-base);
border-radius: var(--layout-xxxxx-small);
height: var(--layout-xxxxx-small);
width: var(--layout-xxxxx-small);
z-index: 2;
}
.is-dragged-over[data-indicator='line'][data-drop-edge='bottom']::before,
.is-dragged-over[data-indicator='line'][data-drop-edge='top']::before {
left: var(--drop-target-left-top);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='bottom']::before {
bottom: var(--drop-target-bottom-left-right-top);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='left']::before,
.is-dragged-over[data-indicator='line'][data-drop-edge='right']::before {
top: var(--drop-target-left-top);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='left']::before {
left: var(--drop-target-bottom-left-right-top);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='right']::before {
right: var(--drop-target-bottom-left-right-top);
}
.is-dragged-over[data-indicator='line'][data-drop-edge='top']::before {
top: var(--drop-target-bottom-left-right-top);
}
/* Drop Target: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Drop Target: Start */
.is-dragged-over {
--drop-box-shadow-rgba-color-a: 0.4;
--drop-box-shadow-rgba-color-b: 135;
--drop-box-shadow-rgba-color-g: 125;
--drop-box-shadow-rgba-color-r: 96;
--drop-target-bottom-left-right-top: -0.188rem;
/* -3px */
--drop-target-left-top: -0.25rem;
/* -4px */
}
/* Drop Target: End */
/* Variables: End */
/* Import: End */
/* Draggable & Dragged Over: Start */
[draggable='true'],
.is-dragged-over {
transition: background-color var(--time-commons-base) ease;
transform: translate3d(var(--layout-0), var(--layout-0), var(--layout-0));
}
/* Draggable & Dragged Over: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Drag and Drop: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* General: Start */
html {
font-size: var(--font-base-size);
}
/* *, After & Before: Start */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* *, After & Before: End */
/* Body: Start */
body {
background-color: var(--color-neutrals-white);
color: var(--color-primary-text-base);
font: var(--font-medium-weight) var(--font-medium-size) Inter, Helvetica, Arial, sans-serif;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
font-kerning: normal;
font-variant-ligatures: contextual common-ligatures;
letter-spacing: 0.3px;
line-height: var(--font-medium-line-height);
overflow: hidden;
text-rendering: optimizeLegibility;
}
/* Body: End */
abbr {
text-decoration: none;
}
/* Images Responsive: Start */
.imgresponsive {
height: auto;
resize: both;
width: var(--percentage-100);
}
.imgresponsiveheight {
height: var(--percentage-100);
resize: both;
width: auto;
}
/* Images Responsive: End */
/* Input: Start */
input,
select,
.select,
textarea {
font-family: Inter, Helvetica, Arial, sans-serif;
}
/* Input: End */
/* Tags: Start */
a,
article,
aside,
div,
figcaption,
figure,
fieldset,
footer,
form,
header,
label,
li,
menu,
nav,
ol,
table,
ul {
overflow: hidden;
width: auto;
}
/* Tags: End */
/* General: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Grid & Layout: Start */
/* Columns: Start */
.col-0 {
display: none;
}
.col-1 {
display: block;
grid-column-end: span 1;
}
.col-2 {
display: block;
grid-column-end: span 2;
}
.col-3 {
display: block;
grid-column-end: span 3;
}
.col-4 {
display: block;
grid-column-end: span 4;
}
.col-5 {
display: block;
grid-column-end: span 5;
}
.col-6 {
display: block;
grid-column-end: span 6;
}
.col-7 {
display: block;
grid-column-end: span 7;
}
.col-8 {
display: block;
grid-column-end: span 8;
}
.col-9 {
display: block;
grid-column-end: span 9;
}
.col-10 {
display: block;
grid-column-end: span 10;
}
.col-11 {
display: block;
grid-column-end: span 11;
}
.col-12 {
display: block;
grid-column-end: span 12;
}
/* Responsive: Start */
@media (min-width: 375px) {
/* Small: Start */
.s-0 {
display: none;
}
.s-1 {
display: block;
grid-column-end: span 1;
}
.s-2 {
display: block;
grid-column-end: span 2;
}
.s-3 {
display: block;
grid-column-end: span 3;
}
.s-4 {
display: block;
grid-column-end: span 4;
}
.s-5 {
display: block;
grid-column-end: span 5;
}
.s-6 {
display: block;
grid-column-end: span 6;
}
.s-7 {
display: block;
grid-column-end: span 7;
}
.s-8 {
display: block;
grid-column-end: span 8;
}
.s-9 {
display: block;
grid-column-end: span 9;
}
.s-10 {
display: block;
grid-column-end: span 10;
}
.s-11 {
display: block;
grid-column-end: span 11;
}
.s-12 {
display: block;
grid-column-end: span 12;
}
/* Small: End */
}
@media (min-width: 480px) {
/* XSmall: Start */
.xs-0 {
display: none;
}
.xs-1 {
display: block;
grid-column-end: span 1;
}
.xs-2 {
display: block;
grid-column-end: span 2;
}
.xs-3 {
display: block;
grid-column-end: span 3;
}
.xs-4 {
display: block;
grid-column-end: span 4;
}
.xs-5 {
display: block;
grid-column-end: span 5;
}
.xs-6 {
display: block;
grid-column-end: span 6;
}
.xs-7 {
display: block;
grid-column-end: span 7;
}
.xs-8 {
display: block;
grid-column-end: span 8;
}
.xs-9 {
display: block;
grid-column-end: span 9;
}
.xs-10 {
display: block;
grid-column-end: span 10;
}
.xs-11 {
display: block;
grid-column-end: span 11;
}
.xs-12 {
display: block;
grid-column-end: span 12;
}
/* XSmall: End */
}
@media (min-width: 640px) {
/* SMedium: Start */
.sm-0 {
display: none;
}
.sm-1 {
display: block;
grid-column-end: span 1;
}
.sm-2 {
display: block;
grid-column-end: span 2;
}
.sm-3 {
display: block;
grid-column-end: span 3;
}
.sm-4 {
display: block;
grid-column-end: span 4;
}
.sm-5 {
display: block;
grid-column-end: span 5;
}
.sm-6 {
display: block;
grid-column-end: span 6;
}
.sm-7 {
display: block;
grid-column-end: span 7;
}
.sm-8 {
display: block;
grid-column-end: span 8;
}
.sm-9 {
display: block;
grid-column-end: span 9;
}
.sm-10 {
display: block;
grid-column-end: span 10;
}
.sm-11 {
display: block;
grid-column-end: span 11;
}
.sm-12 {
display: block;
grid-column-end: span 12;
}
/* SMedium: End */
}
@media (min-width: 768px) {
/* Medium: Start */
.m-0 {
display: none;
}
.m-1 {
display: block;
grid-column-end: span 1;
}
.m-2 {
display: block;
grid-column-end: span 2;
}
.m-3 {
display: block;
grid-column-end: span 3;
}
.m-4 {
display: block;
grid-column-end: span 4;
}
.m-5 {
display: block;
grid-column-end: span 5;
}
.m-6 {
display: block;
grid-column-end: span 6;
}
.m-7 {
display: block;
grid-column-end: span 7;
}
.m-8 {
display: block;
grid-column-end: span 8;
}
.m-9 {
display: block;
grid-column-end: span 9;
}
.m-10 {
display: block;
grid-column-end: span 10;
}
.m-11 {
display: block;
grid-column-end: span 11;
}
.m-12 {
display: block;
grid-column-end: span 12;
}
/* Medium: End */
}
@media (min-width: 1024px) {
/* XMedium: Start */
.xm-0 {
display: none;
}
.xm-1 {
display: block;
grid-column-end: span 1;
}
.xm-2 {
display: block;
grid-column-end: span 2;
}
.xm-3 {
display: block;
grid-column-end: span 3;
}
.xm-4 {
display: block;
grid-column-end: span 4;
}
.xm-5 {
display: block;
grid-column-end: span 5;
}
.xm-6 {
display: block;
grid-column-end: span 6;
}
.xm-7 {
display: block;
grid-column-end: span 7;
}
.xm-8 {
display: block;
grid-column-end: span 8;
}
.xm-9 {
display: block;
grid-column-end: span 9;
}
.xm-10 {
display: block;
grid-column-end: span 10;
}
.xm-11 {
display: block;
grid-column-end: span 11;
}
.xm-12 {
display: block;
grid-column-end: span 12;
}
/* XMedium: End */
}
@media (min-width: 1280px) {
/* SLarge: Start */
.sl-0 {
display: none;
}
.sl-1 {
display: block;
grid-column-end: span 1;
}
.sl-2 {
display: block;
grid-column-end: span 2;
}
.sl-3 {
display: block;
grid-column-end: span 3;
}
.sl-4 {
display: block;
grid-column-end: span 4;
}
.sl-5 {
display: block;
grid-column-end: span 5;
}
.sl-6 {
display: block;
grid-column-end: span 6;
}
.sl-7 {
display: block;
grid-column-end: span 7;
}
.sl-8 {
display: block;
grid-column-end: span 8;
}
.sl-9 {
display: block;
grid-column-end: span 9;
}
.sl-10 {
display: block;
grid-column-end: span 10;
}
.sl-11 {
display: block;
grid-column-end: span 11;
}
.sl-12 {
display: block;
grid-column-end: span 12;
}
/* SLarge: End */
}
@media (min-width: 1366px) {
/* Large: Start */
.l-0 {
display: none;
}
.l-1 {
display: block;
grid-column-end: span 1;
}
.l-2 {
display: block;
grid-column-end: span 2;
}
.l-3 {
display: block;
grid-column-end: span 3;
}
.l-4 {
display: block;
grid-column-end: span 4;
}
.l-5 {
display: block;
grid-column-end: span 5;
}
.l-6 {
display: block;
grid-column-end: span 6;
}
.l-7 {
display: block;
grid-column-end: span 7;
}
.l-8 {
display: block;
grid-column-end: span 8;
}
.l-9 {
display: block;
grid-column-end: span 9;
}
.l-10 {
display: block;
grid-column-end: span 10;
}
.l-11 {
display: block;
grid-column-end: span 11;
}
.l-12 {
display: block;
grid-column-end: span 12;
}
/* Large: End */
}
@media (min-width: 1920px) {
/* XLarge: Start */
.xl-0 {
display: none;
}
.xl-1 {
display: block;
grid-column-end: span 1;
}
.xl-2 {
display: block;
grid-column-end: span 2;
}
.xl-3 {
display: block;
grid-column-end: span 3;
}
.xl-4 {
display: block;
grid-column-end: span 4;
}
.xl-5 {
display: block;
grid-column-end: span 5;
}
.xl-6 {
display: block;
grid-column-end: span 6;
}
.xl-7 {
display: block;
grid-column-end: span 7;
}
.xl-8 {
display: block;
grid-column-end: span 8;
}
.xl-9 {
display: block;
grid-column-end: span 9;
}
.xl-10 {
display: block;
grid-column-end: span 10;
}
.xl-11 {
display: block;
grid-column-end: span 11;
}
.xl-12 {
display: block;
grid-column-end: span 12;
}
/* XLarge: End */
}
/* Responsive: End */
/* Columns: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Grid: Start */
.grid {
column-gap: var(--layout-xxx-small);
display: grid;
grid-template-columns: repeat(12, var(--grid-unit));
justify-content: center;
}
/* Grid: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Layout: Start */
/* Placement: Center: Start */
.layout.center {
margin-left: auto;
margin-right: auto;
}
/* Placement: Center: End */
/* Responsive: Start */
/* SSmall: Start */
@media (min-width: 360px) {
.layout {
width: var(--layout-mobile-xxs-width);
}
}
/* SSmall: End */
/* Small: Start */
@media (min-width: 375px) {
.layout {
width: var(--layout-mobile-xs-width);
}
}
/* Small: End */
/* XSmall: Start */
@media (min-width: 480px) {
.layout {
width: var(--layout-mobile-s-width);
}
}
/* XSmall: End */
/* SMedium: Start */
@media (min-width: 640px) {
.layout {
width: var(--layout-mobile-l-width);
}
}
/* SMedium: End */
/* Medium: Start */
@media (min-width: 768px) {
.layout {
width: var(--layout-tablet-xxs-width);
}
}
/* Medium: End */
/* XMedium: Start */
@media (min-width: 1024px) {
.layout {
width: var(--layout-tablet-xl-width);
}
}
/* XMedium: End */
/* SLarge: Start */
@media (min-width: 1280px) {
.layout {
width: var(--layout-desktop-s-width);
}
}
/* SLarge: End */
/* Large: Start */
@media (min-width: 1366px) {
.layout {
width: var(--layout-desktop-m-width);
}
}
/* Large: End */
/* XLarge: Start */
@media (min-width: 1920px) {
.layout {
width: var(--layout-desktop-l-width);
}
}
/* XLarge: End */
/* Responsive: End */
/* Layout: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Offset: Start */
.offset-0 {
grid-column-start: 1;
}
.offset-1 {
grid-column-start: 2;
}
.offset-2 {
grid-column-start: 3;
}
.offset-3 {
grid-column-start: 4;
}
.offset-4 {
grid-column-start: 5;
}
.offset-5 {
grid-column-start: 6;
}
.offset-6 {
grid-column-start: 7;
}
.offset-7 {
grid-column-start: 8;
}
.offset-8 {
grid-column-start: 9;
}
.offset-9 {
grid-column-start: 10;
}
.offset-10 {
grid-column-start: 11;
}
.offset-11 {
grid-column-start: 12;
}
/* Responsive: Start */
@media (min-width: 375px) {
/* Small: Start */
.offset-s-0 {
grid-column-start: 1;
}
.offset-s-1 {
grid-column-start: 2;
}
.offset-s-2 {
grid-column-start: 3;
}
.offset-s-3 {
grid-column-start: 4;
}
.offset-s-4 {
grid-column-start: 5;
}
.offset-s-5 {
grid-column-start: 6;
}
.offset-s-6 {
grid-column-start: 7;
}
.offset-s-7 {
grid-column-start: 8;
}
.offset-s-8 {
grid-column-start: 9;
}
.offset-s-9 {
grid-column-start: 10;
}
.offset-s-10 {
grid-column-start: 11;
}
.offset-s-11 {
grid-column-start: 12;
}
/* Small: End */
}
@media (min-width: 480px) {
/* XSmall: Start */
.offset-xs-0 {
grid-column-start: 1;
}
.offset-xs-1 {
grid-column-start: 2;
}
.offset-xs-2 {
grid-column-start: 3;
}
.offset-xs-3 {
grid-column-start: 4;
}
.offset-xs-4 {
grid-column-start: 5;
}
.offset-xs-5 {
grid-column-start: 6;
}
.offset-xs-6 {
grid-column-start: 7;
}
.offset-xs-7 {
grid-column-start: 8;
}
.offset-xs-8 {
grid-column-start: 9;
}
.offset-xs-9 {
grid-column-start: 10;
}
.offset-xs-10 {
grid-column-start: 11;
}
.offset-xs-11 {
grid-column-start: 12;
}
/* XSmall: End */
}
@media (min-width: 640px) {
/* SMedium: Start */
.offset-sm-0 {
grid-column-start: 1;
}
.offset-sm-1 {
grid-column-start: 2;
}
.offset-sm-2 {
grid-column-start: 3;
}
.offset-sm-3 {
grid-column-start: 4;
}
.offset-sm-4 {
grid-column-start: 5;
}
.offset-sm-5 {
grid-column-start: 6;
}
.offset-sm-6 {
grid-column-start: 7;
}
.offset-sm-7 {
grid-column-start: 8;
}
.offset-sm-8 {
grid-column-start: 9;
}
.offset-sm-9 {
grid-column-start: 10;
}
.offset-sm-10 {
grid-column-start: 11;
}
.offset-sm-11 {
grid-column-start: 12;
}
/* SMedium: End */
}
@media (min-width: 768px) {
/* Medium: Start */
.offset-m-0 {
grid-column-start: 1;
}
.offset-m-1 {
grid-column-start: 2;
}
.offset-m-2 {
grid-column-start: 3;
}
.offset-m-3 {
grid-column-start: 4;
}
.offset-m-4 {
grid-column-start: 5;
}
.offset-m-5 {
grid-column-start: 6;
}
.offset-m-6 {
grid-column-start: 7;
}
.offset-m-7 {
grid-column-start: 8;
}
.offset-m-8 {
grid-column-start: 9;
}
.offset-m-9 {
grid-column-start: 10;
}
.offset-m-10 {
grid-column-start: 11;
}
.offset-m-11 {
grid-column-start: 12;
}
.offset-m-12 {
grid-column-start: 22;
}
/* Medium: End */
}
@media (min-width: 1024px) {
/* XMedium: Start */
.offset-xm-0 {
grid-column-start: 1;
}
.offset-xm-1 {
grid-column-start: 2;
}
.offset-xm-2 {
grid-column-start: 3;
}
.offset-xm-3 {
grid-column-start: 4;
}
.offset-xm-4 {
grid-column-start: 5;
}
.offset-xm-5 {
grid-column-start: 6;
}
.offset-xm-6 {
grid-column-start: 7;
}
.offset-xm-7 {
grid-column-start: 8;
}
.offset-xm-8 {
grid-column-start: 9;
}
.offset-xm-9 {
grid-column-start: 10;
}
.offset-xm-10 {
grid-column-start: 11;
}
.offset-xm-11 {
grid-column-start: 12;
}
/* XMedium: End */
}
@media (min-width: 1280px) {
/* SLarge: Start */
.offset-sl-0 {
grid-column-start: 1;
}
.offset-sl-1 {
grid-column-start: 2;
}
.offset-sl-2 {
grid-column-start: 3;
}
.offset-sl-3 {
grid-column-start: 4;
}
.offset-sl-4 {
grid-column-start: 5;
}
.offset-sl-5 {
grid-column-start: 6;
}
.offset-sl-6 {
grid-column-start: 7;
}
.offset-sl-7 {
grid-column-start: 8;
}
.offset-sl-8 {
grid-column-start: 9;
}
.offset-sl-9 {
grid-column-start: 10;
}
.offset-sl-10 {
grid-column-start: 11;
}
.offset-sl-11 {
grid-column-start: 12;
}
/* SLarge: End */
}
@media (min-width: 1366px) {
/* Large: Start */
.offset-l-0 {
grid-column-start: 1;
}
.offset-l-1 {
grid-column-start: 2;
}
.offset-l-2 {
grid-column-start: 3;
}
.offset-l-3 {
grid-column-start: 4;
}
.offset-l-4 {
grid-column-start: 5;
}
.offset-l-5 {
grid-column-start: 6;
}
.offset--6 {
grid-column-start: 7;
}
.offset-l-7 {
grid-column-start: 8;
}
.offset-l-8 {
grid-column-start: 9;
}
.offset-l-9 {
grid-column-start: 10;
}
.offset-l-10 {
grid-column-start: 11;
}
.offset-l-11 {
grid-column-start: 12;
}
/* Large: End */
}
@media (min-width: 1920px) {
/* XLarge: Start */
.offset-xl-0 {
grid-column-start: 1;
}
.offset-xl-1 {
grid-column-start: 2;
}
.offset-xl-2 {
grid-column-start: 3;
}
.offset-xl-3 {
grid-column-start: 4;
}
.offset-xl-4 {
grid-column-start: 5;
}
.offset-xl-5 {
grid-column-start: 6;
}
.offset-xl-6 {
grid-column-start: 7;
}
.offset-xl-7 {
grid-column-start: 8;
}
.offset-xl-8 {
grid-column-start: 9;
}
.offset-xl-9 {
grid-column-start: 10;
}
.offset-xl-10 {
grid-column-start: 11;
}
.offset-xl-11 {
grid-column-start: 12;
}
/* XLarge: End */
}
/* Responsive: End */
/* Offset: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Grid: Start */
.grid {
--grid-unit: 1fr;
}
/* Grid: End */
/* Layout: Start */
.layout {
--layout-mobile-xxs-width: 20rem;
/* 320px */
--layout-mobile-xs-width: 23rem;
/* 368px */
--layout-mobile-s-width: 29rem;
/* 464px */
--layout-mobile-l-width: 38rem;
/* 608px */
--layout-tablet-xxs-width: 44rem;
/* 704px */
--layout-tablet-xl-width: 59rem;
/* 944px */
--layout-desktop-s-width: 77rem;
/* 1232px */
--layout-desktop-m-width: 83rem;
/* 1328px */
--layout-desktop-l-width: 116rem;
/* 1856px */
}
/* Layout: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Grid & Layout: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Mixins: Start */
/* Actions: Start */
/* User Select: Start */
/* User Select: End */
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* AI: Start */
/* Accordion, Card & Modal: Start */
.aiBorderCardAccordion {
animation: ai-accordion-cards-modal-shadow var(--animation-all-duration) ease-in-out 1 forwards;
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
/* Variables: Start */
--animation-all-duration: 3s;
/* Variables: End */
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto auto, auto auto;
}
.aiBorderModal {
animation: ai-accordion-cards-modal-shadow var(--animation-all-duration) ease-in-out 1 forwards;
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
/* Variables: Start */
--animation-all-duration: 3s;
/* Variables: End */
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-45), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-228), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto, auto, auto, auto;
}
/* Accordion, Card & Modal: End */
/* Badge & Tag: Start */
/* Badge & Tag: End */
/* Button: Start */
/* Button: End */
/* Placeholder: Start */
.aiPlaceholder {
background-color: var(--color-alternative-ai-light);
overflow: hidden;
position: relative;
}
.aiPlaceholder::before {
animation: ai-placeholder 600ms ease-in-out infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background-image: linear-gradient(to left, var(--color-alternative-ai-light), var(--color-alternative-ai-base), var(--color-alternative-ai-light));
content: var(--contentEmpty);
height: var(--percentage-100);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
width: var(--percentage-100);
z-index: var(--layout-0);
}
/* Placeholder: End */
/* PopUp & Tooltip: Start */
.aiPopUpTooltip {
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-45), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-228), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto, auto, auto, auto;
}
/* PopUp & Tooltip: End */
/* AI: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Animation: Start */
/* All: Start */
/* All: End */
/* Ai: Start */
/* Box Shadow: Start */
/* Box Shadow: End */
/* Button: Start */
/* Button: End */
/* Badge & Tag: Start */
/* DEPRECATED */
/* Badge & Tag: End */
/* Ai: End */
/* Animation: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Appearance: Start */
/* Apple: Start */
/* Apple: End */
/* Appearance: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Box Shadow: Start */
/* Inset: Start */
/* Inset: End */
/* None: Start */
/* None: End */
/* RGBA: Start */
/* RGBA: End */
/* Box Shadow: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Ellipsis: Start */
/* Ellipsis: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Performance: Start */
/* Hardware Accelerated: Start */
/* Hardware Accelerated: End */
/* Performance: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Position: Start */
/* Horizontal: Start */
/* Horizontal: End */
/* Scale: Start */
/* Scale: End */
/* Vertical: Start */
/* Vertical: End */
/* Position: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Scroll: Start */
/* Scroll: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Transition: Start */
/* Transition: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Mixins: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Move Item: Start */
/* Left to Right: Start */
[data-animation='miltr'],
[data-animation='mirtl'] {
animation-duration: var(--animation-duration);
animation-name: left-to-right;
animation-timing-function: ease-in-out;
/* Variables: Start */
--animation-duration: 0.5s;
/* Variables: End */
}
/* Left to Right: End */
/* Right to Left: Start */
[data-animation='mirtl'] {
animation-direction: reverse;
}
/* Right to Left: End */
/* Move Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Typography: Start */
/* Font-Face: Start */
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: var(--text-weight-bold);
src: local('Inter Bold'), local('Inter-Bold'), url('../fonts/inter-bold.woff2') format('woff2'), url('../fonts/inter-bold.woff') format('woff'), url('../fonts/inter-bold.ttf') format('truetype'), url('../fonts/inter-bold.svg#Inter') format('svg');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: var(--text-weight-light);
src: local('Inter Light'), local('Inter-Light'), url('../fonts/inter-light.woff2') format('woff2'), url('../fonts/inter-light.woff') format('woff'), url('../fonts/inter-light.ttf') format('truetype'), url('../fonts/inter-light.svg#Inter') format('svg');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: var(--text-weight-medium);
src: local('Inter Medium'), local('Inter-Medium'), url('../fonts/inter-medium.woff2') format('woff2'), url('../fonts/inter-medium.woff') format('woff'), url('../fonts/inter-medium.ttf') format('truetype'), url('../fonts/inter-medium.svg#Inter') format('svg');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: var(--text-weight-regular);
src: local('Inter Regular'), local('Inter-Regular'), url('../fonts/inter-regular.woff2') format('woff2'), url('../fonts/inter-regular.woff') format('woff'), url('../fonts/inter-regular.ttf') format('truetype'), url('../fonts/inter-regular.svg#Inter') format('svg');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* Font-Face: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Typography: Start */
/* Body: Start */
[data-style='typobody'],
[data-style='typobutton'],
[data-style='typocaption'],
[data-style='typodisplay'],
[data-style='typoheader'],
[data-style='typoheadline'],
[data-style='typospecials'],
[data-style='typotitle1'],
[data-style='typotitle2'],
[data-style='typotitle3'] {
font-style: normal;
/* Text: Align: Direction: Start */
/* Text: Align: Direction: End */
}
[data-style='typobody'][data-align='tacenter'][dir='ltr'],
[data-style='typobutton'][data-align='tacenter'][dir='ltr'],
[data-style='typocaption'][data-align='tacenter'][dir='ltr'],
[data-style='typodisplay'][data-align='tacenter'][dir='ltr'],
[data-style='typoheader'][data-align='tacenter'][dir='ltr'],
[data-style='typoheadline'][data-align='tacenter'][dir='ltr'],
[data-style='typospecials'][data-align='tacenter'][dir='ltr'],
[data-style='typotitle1'][data-align='tacenter'][dir='ltr'],
[data-style='typotitle2'][data-align='tacenter'][dir='ltr'],
[data-style='typotitle3'][data-align='tacenter'][dir='ltr'] {
text-align: center;
}
[data-style='typobody'][data-align='taleft'][dir='ltr'],
[data-style='typobutton'][data-align='taleft'][dir='ltr'],
[data-style='typocaption'][data-align='taleft'][dir='ltr'],
[data-style='typodisplay'][data-align='taleft'][dir='ltr'],
[data-style='typoheader'][data-align='taleft'][dir='ltr'],
[data-style='typoheadline'][data-align='taleft'][dir='ltr'],
[data-style='typospecials'][data-align='taleft'][dir='ltr'],
[data-style='typotitle1'][data-align='taleft'][dir='ltr'],
[data-style='typotitle2'][data-align='taleft'][dir='ltr'],
[data-style='typotitle3'][data-align='taleft'][dir='ltr'] {
text-align: left;
}
[data-style='typobody'][data-align='taright'][dir='ltr'],
[data-style='typobutton'][data-align='taright'][dir='ltr'],
[data-style='typocaption'][data-align='taright'][dir='ltr'],
[data-style='typodisplay'][data-align='taright'][dir='ltr'],
[data-style='typoheader'][data-align='taright'][dir='ltr'],
[data-style='typoheadline'][data-align='taright'][dir='ltr'],
[data-style='typospecials'][data-align='taright'][dir='ltr'],
[data-style='typotitle1'][data-align='taright'][dir='ltr'],
[data-style='typotitle2'][data-align='taright'][dir='ltr'],
[data-style='typotitle3'][data-align='taright'][dir='ltr'] {
text-align: right;
}
[data-style='typobody'][data-align='tacenter'][dir='rtl'],
[data-style='typobutton'][data-align='tacenter'][dir='rtl'],
[data-style='typocaption'][data-align='tacenter'][dir='rtl'],
[data-style='typodisplay'][data-align='tacenter'][dir='rtl'],
[data-style='typoheader'][data-align='tacenter'][dir='rtl'],
[data-style='typoheadline'][data-align='tacenter'][dir='rtl'],
[data-style='typospecials'][data-align='tacenter'][dir='rtl'],
[data-style='typotitle1'][data-align='tacenter'][dir='rtl'],
[data-style='typotitle2'][data-align='tacenter'][dir='rtl'],
[data-style='typotitle3'][data-align='tacenter'][dir='rtl'] {
text-align: center;
}
[data-style='typobody'][data-align='taleft'][dir='rtl'],
[data-style='typobutton'][data-align='taleft'][dir='rtl'],
[data-style='typocaption'][data-align='taleft'][dir='rtl'],
[data-style='typodisplay'][data-align='taleft'][dir='rtl'],
[data-style='typoheader'][data-align='taleft'][dir='rtl'],
[data-style='typoheadline'][data-align='taleft'][dir='rtl'],
[data-style='typospecials'][data-align='taleft'][dir='rtl'],
[data-style='typotitle1'][data-align='taleft'][dir='rtl'],
[data-style='typotitle2'][data-align='taleft'][dir='rtl'],
[data-style='typotitle3'][data-align='taleft'][dir='rtl'] {
text-align: right;
}
[data-style='typobody'][data-align='taright'][dir='rtl'],
[data-style='typobutton'][data-align='taright'][dir='rtl'],
[data-style='typocaption'][data-align='taright'][dir='rtl'],
[data-style='typodisplay'][data-align='taright'][dir='rtl'],
[data-style='typoheader'][data-align='taright'][dir='rtl'],
[data-style='typoheadline'][data-align='taright'][dir='rtl'],
[data-style='typospecials'][data-align='taright'][dir='rtl'],
[data-style='typotitle1'][data-align='taright'][dir='rtl'],
[data-style='typotitle2'][data-align='taright'][dir='rtl'],
[data-style='typotitle3'][data-align='taright'][dir='rtl'] {
text-align: left;
}
/* Body: Start */
[data-style='typobody'] {
color: var(--color-primary-text-base);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
line-height: var(--font-medium-line-height);
}
/* Body: End */
/* Button: Start */
[data-style='typobutton'] {
color: var(--color-primary-text-base);
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
line-height: var(--font-small-line-height);
}
/* Button: End */
/* Caption: Start */
[data-style='typocaption'] {
color: var(--color-primary-text-base);
font-size: var(--font-x-small-size);
font-weight: var(--font-x-small-weight);
line-height: var(--font-x-small-line-height);
}
/* Caption: End */
/* Container: Start */
[data-style='typocontainer'] {
align-items: center;
display: flex;
}
/* Container: End */
/* Display: Start */
[data-style='typodisplay'] {
color: var(--color-primary-text-dark);
font-size: var(--font-x-large-size);
font-weight: var(--font-x-large-weight);
line-height: var(--font-x-large-line-height);
}
/* Display: End */
/* Header: Start */
[data-style='typoheader'] {
color: var(--color-primary-text-dark);
font-size: var(--font-xx-large-size);
font-weight: var(--font-xx-large-weight);
line-height: var(--font-xx-large-line-height);
}
/* Header: End */
/* Headline: Start */
[data-style='typoheadline'] {
color: var(--color-primary-text-base);
font-size: var(--font-x-large-size);
font-weight: var(--font-x-large-weight);
line-height: var(--font-x-large-line-height);
}
/* Headline: End */
/* Specials: Start */
[data-style='typospecials'] {
color: var(--color-primary-text-base);
font-size: var(--font-xx-small-size);
font-weight: var(--font-xx-small-weight);
line-height: var(--font-xx-small-line-height);
}
/* Specials: End */
/* Title 1: Start */
[data-style='typotitle1'],
[data-style='typotitle2'],
[data-style='typotitle3'] {
color: var(--color-primary-text-base);
}
[data-style='typotitle1'] {
font-size: var(--font-large-size);
font-weight: var(--font-large-weight);
line-height: var(--font-large-line-height);
}
/* Title 1: End */
/* Title 2: Start */
[data-style='typotitle2'],
[data-style='typotitle3'] {
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
line-height: var(--font-x-medium-line-height);
}
[data-style='typotitle2'] {
text-transform: uppercase;
}
/* Title 2: End */
/* Typography: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Line Clamp: Start */
[class*='lineclamp-']:not(.lineclamp-ellipsis) {
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
/* Ellipsis: Start */
.lineclamp-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ellipsis: End */
/* Lines: Start */
.lineclamp-1 {
-webkit-line-clamp: var(--line-clamp-1);
}
.lineclamp-2 {
-webkit-line-clamp: var(--line-clamp-2);
}
.lineclamp-3 {
-webkit-line-clamp: var(--line-clamp-3);
}
.lineclamp-4 {
-webkit-line-clamp: var(--line-clamp-4);
}
.lineclamp-5 {
-webkit-line-clamp: var(--line-clamp-5);
}
.lineclamp-6 {
-webkit-line-clamp: var(--line-clamp-6);
}
.lineclamp-7 {
-webkit-line-clamp: var(--line-clamp-7);
}
.lineclamp-8 {
-webkit-line-clamp: var(--line-clamp-8);
}
.lineclamp-9 {
-webkit-line-clamp: var(--line-clamp-9);
}
.lineclamp-10 {
-webkit-line-clamp: var(--line-clamp-10);
}
/* Lines: End */
/* Line Clamp: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Line Clamp: Start */
[class*='lineclamp-'] {
--line-clamp-1: 1;
--line-clamp-2: 2;
--line-clamp-3: 3;
--line-clamp-4: 4;
--line-clamp-5: 5;
--line-clamp-6: 6;
--line-clamp-7: 7;
--line-clamp-8: 8;
--line-clamp-9: 9;
--line-clamp-10: 10;
}
/* Variables: Line Clamp: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Typography: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/**
* Do not edit directly, this file was auto-generated.
*/
:root {
--breakpoint-desktop-l: 1920px;
--breakpoint-desktop-m: 1366px;
--breakpoint-desktop-s: 1280px;
--breakpoint-mobile-l: 640px;
--breakpoint-mobile-m: 600px;
--breakpoint-mobile-s: 480px;
--breakpoint-mobile-xl: 667px;
--breakpoint-mobile-xxl: 720px;
--breakpoint-mobile-xs: 375px;
--breakpoint-mobile-xxs: 360px;
--breakpoint-tablet-l: 960px;
--breakpoint-tablet-m: 900px;
--breakpoint-tablet-s: 854px;
--breakpoint-tablet-xl: 1024px;
--breakpoint-tablet-xxl: 1200px;
--breakpoint-tablet-xs: 800px;
--breakpoint-tablet-xxs: 768px;
--color-acentuation-brand-base: #f72717;
--color-acentuation-brand-dark: #d70014;
--color-acentuation-brand-light: #eb6663;
--color-acentuation-error-base: #fdecea;
--color-acentuation-error-dark: #cabab8;
--color-acentuation-error-light: #ffffff;
--color-acentuation-info-base: #e8f4fd;
--color-acentuation-info-dark: #b6c1ca;
--color-acentuation-info-light: #ffffff;
--color-acentuation-success-base: #edf7ed;
--color-acentuation-success-dark: #bbc4bb;
--color-acentuation-success-light: #ffffff;
--color-acentuation-warning-base: #fff4e5;
--color-acentuation-warning-dark: #ccc1b3;
--color-acentuation-warning-light: #ffffff;
--color-alternative-ai-base: #9b00ce;
--color-alternative-ai-dark: #5c00a7;
--color-alternative-ai-light: #f3e9ff;
--color-alternative-error-base: #ff1744;
--color-alternative-error-dark: #c4001d;
--color-alternative-error-light: #ff616f;
--color-alternative-focus-base: #4c9aff;
--color-alternative-focus-dark: #006ccb;
--color-alternative-focus-light: #89caff;
--color-alternative-success-base: #00936d;
--color-alternative-success-dark: #006442;
--color-alternative-success-light: #4fc49b;
--color-alternative-warning-base: #a36700;
--color-alternative-warning-dark: #703c00;
--color-alternative-warning-light: #d99539;
--color-avatar-icons-default: #d1d3d8;
--color-avatar-icons-eight: #8bc34a;
--color-avatar-icons-eighteen: #ffc107;
--color-avatar-icons-eleven: #00695c;
--color-avatar-icons-fifteen: #9e9d24;
--color-avatar-icons-five: #2196f3;
--color-avatar-icons-four: #0277bd;
--color-avatar-icons-fourteen: #4caf50;
--color-avatar-icons-nine: #7c4dff;
--color-avatar-icons-nineteen: #f9a825;
--color-avatar-icons-one: #283593;
--color-avatar-icons-seven: #00bcd4;
--color-avatar-icons-seventeen: #ffeb3b;
--color-avatar-icons-six: #03a9fa;
--color-avatar-icons-sixteen: #cddc39;
--color-avatar-icons-ten: #00838f;
--color-avatar-icons-thirteen: #558b2f;
--color-avatar-icons-thirty: #7b1fa2;
--color-avatar-icons-three: #1565c0;
--color-avatar-icons-twelve: #009688;
--color-avatar-icons-twenty: #ff9800;
--color-avatar-icons-twenty-eight: #ff84e2;
--color-avatar-icons-twenty-five: #ff5252;
--color-avatar-icons-twenty-four: #ff5722;
--color-avatar-icons-twenty-nine: #ab47bc;
--color-avatar-icons-twenty-one: #ff8f00;
--color-avatar-icons-twenty-seven: #ff4081;
--color-avatar-icons-twenty-six: #d50000;
--color-avatar-icons-twenty-three: #d84315;
--color-avatar-icons-twenty-two: #ef6c00;
--color-avatar-icons-two: #3d5afe;
--color-avatar-users-a: #d73628;
--color-avatar-users-b: #e5155a;
--color-avatar-users-c: #ad4bbe;
--color-avatar-users-d: #8662c6;
--color-avatar-users-default: #666;
--color-avatar-users-e: #6171c2;
--color-avatar-users-f: #1c6bf2;
--color-avatar-users-g: #087eb4;
--color-avatar-users-h: #188290;
--color-avatar-users-i: #358279;
--color-avatar-users-j: #35825c;
--color-avatar-users-k: #5a822b;
--color-avatar-users-l: #707a1a;
--color-avatar-users-m: #897106;
--color-avatar-users-n: #f6bf26;
--color-avatar-users-o: #926d07;
--color-avatar-users-p: #e03400;
--color-avatar-users-q: #757575;
--color-avatar-users-r: #65798b;
--color-avatar-users-s: #876d64;
--color-avatar-users-t: #747953;
--color-avatar-users-u: #676bc1;
--color-avatar-users-v: #8863c5;
--color-avatar-users-w: #2d6a4f;
--color-avatar-users-x: #24828f;
--color-avatar-users-y: #8a6f66;
--color-avatar-users-z: #58792f;
--color-notifications-badge-default: #9ea7aa;
--color-notifications-badge-eight: #000000;
--color-notifications-badge-eleven: #00a4b0;
--color-notifications-badge-five: #9b00ce;
--color-notifications-badge-four: #d50000;
--color-notifications-badge-fourteen: #632717;
--color-notifications-badge-nine: #4caf50;
--color-notifications-badge-one: #ff1744;
--color-notifications-badge-seven: #009688;
--color-notifications-badge-six: #d99539;
--color-notifications-badge-ten: #5b9efd;
--color-notifications-badge-three: #ff8f00;
--color-notifications-badge-thirteen: #b7783c;
--color-notifications-badge-twelve: #60504a;
--color-notifications-badge-two: #00936d;
--color-notifications-default: #9ea7aa;
--color-notifications-eight: #000000;
--color-notifications-eleven: #00a4b0;
--color-notifications-five: #9b00ce;
--color-notifications-four: #d50000;
--color-notifications-fourteen: #632717;
--color-notifications-nine: #4caf50;
--color-notifications-one: #ff1744;
--color-notifications-seven: #009688;
--color-notifications-six: #d99539;
--color-notifications-ten: #5b9efd;
--color-notifications-three: #ff8f00;
--color-notifications-thirteen: #b7783c;
--color-notifications-twelve: #60504a;
--color-notifications-two: #00936d;
--color-neutrals-black: #000000;
--color-neutrals-blue-grey-1: #eceff1;
--color-neutrals-blue-grey-2: #cfd8dc;
--color-neutrals-blue-grey-3: #b0bec5;
--color-neutrals-blue-grey-4: #90a4ae;
--color-neutrals-blue-grey-5: #78909c;
--color-neutrals-blue-grey-6: #607d8b;
--color-neutrals-blue-grey-7: #546e7a;
--color-neutrals-blue-grey-8: #455a64;
--color-neutrals-blue-grey-9: #37474f;
--color-neutrals-blue-grey-10: #263238;
--color-neutrals-grey-1: #fafafa;
--color-neutrals-grey-2: #f5f5f5;
--color-neutrals-grey-3: #eeeeee;
--color-neutrals-grey-4: #e0e0e0;
--color-neutrals-grey-5: #bdbdbd;
--color-neutrals-grey-6: #9e9e9e;
--color-neutrals-grey-7: #757575;
--color-neutrals-grey-8: #616161;
--color-neutrals-grey-9: #424242;
--color-neutrals-grey-10: #212121;
--color-neutrals-transparent: transparent;
--color-neutrals-white: #ffffff;
--color-primary-border-base: #cfd8dc;
--color-primary-border-dark: #9ea7aa;
--color-primary-border-light: #ffffff;
--color-primary-disable-base: #eeeeee;
--color-primary-disable-dark: #bcbcbc;
--color-primary-disable-light: #ffffff;
--color-primary-icon-base: #546e7a;
--color-primary-icon-dark: #29434e;
--color-primary-icon-light: #819ca9;
--color-primary-link-base: #0070c9;
--color-primary-link-dark: #004698;
--color-primary-link-light: #5b9efd;
--color-primary-primary-base: #0070c9;
--color-primary-primary-dark: #004698;
--color-primary-primary-light: #5b9efd;
--color-primary-text-base: #455a64;
--color-primary-text-dark: #1c313a;
--color-primary-text-light: #718792;
--color-secondary-alert-base: #f2f2f2;
--color-secondary-alert-dark: #bfbfbf;
--color-secondary-alert-light: #ffffff;
--color-secondary-list-base: #ebf4ff;
--color-secondary-list-dark: #b9c1cc;
--color-secondary-list-light: #ffffff;
--color-secondary-modal-base: #f9fafb;
--color-secondary-modal-dark: #c6c7c8;
--color-secondary-modal-light: #ffffff;
--color-secondary-shadow-base: rgba(96, 125, 135, 0.4);
--color-secondary-shadow-dark: #29434e;
--color-secondary-shadow-light: #819ca9;
--color-wallet-icons-default: #000000;
--color-wallet-icons-five: #ff6353;
--color-wallet-icons-four: #f23c79;
--color-wallet-icons-one: #16a5d9;
--color-wallet-icons-six: #f29718;
--color-wallet-icons-three: #26bf7f;
--color-wallet-icons-two: #8066ff;
--color-wallet-default: #000000;
--color-wallet-five: #ff6353;
--color-wallet-four: #f23c79;
--color-wallet-one: #16a5d9;
--color-wallet-six: #f29718;
--color-wallet-three: #26bf7f;
--color-wallet-two: #8066ff;
--color-black: #000000;
--color-blue-300: #5b9efd;
--color-blue-500: #0070c9;
--color-blue-700: #004698;
--color-blue-grey-50: #eceff1;
--color-blue-grey-100: #cfd8dc;
--color-blue-grey-200: #b0bec5;
--color-blue-grey-300: #90a4ae;
--color-blue-grey-400: #78909c;
--color-blue-grey-500: #607d8b;
--color-blue-grey-600: #546e7a;
--color-blue-grey-700: #455a64;
--color-blue-grey-800: #37474f;
--color-blue-grey-900: #263238;
--color-brand-300: #eb6663;
--color-brand-500: #f72717;
--color-brand-700: #d70014;
--color-corn-flower-blue-300: #89caff;
--color-corn-flower-blue-500: #4c9aff;
--color-corn-flower-blue-700: #006ccb;
--color-dim-blue-grey-300: #718792;
--color-dim-blue-grey-700: #1c313a;
--color-gainsboro-500: #f2f2f2;
--color-gainsboro-700: #bfbfbf;
--color-ghost-white-500: #f9fafb;
--color-ghost-white-700: #c6c7c8;
--color-green-300: #77f8cc;
--color-green-500: #3ec49b;
--color-green-700: #00936d;
--color-green-juniper-300: #4fc49b;
--color-green-juniper-500: #00936d;
--color-green-juniper-700: #006442;
--color-grey-50: #fafafa;
--color-grey-100: #f5f5f5;
--color-grey-200: #eeeeee;
--color-grey-300: #e0e0e0;
--color-grey-400: #bdbdbd;
--color-grey-500: #9e9e9e;
--color-grey-600: #757575;
--color-grey-700: #616161;
--color-grey-800: #424242;
--color-grey-900: #212121;
--color-hr-apps-default: #000000;
--color-hr-apps-eight: #d50000;
--color-hr-apps-eighteen: #ff84e2;
--color-hr-apps-eleven: #009688;
--color-hr-apps-fifteen: #ef6c00;
--color-hr-apps-five: #283593;
--color-hr-apps-four: #8Bc34a;
--color-hr-apps-fourteen: #ffc107;
--color-hr-apps-nine: #7c4dff;
--color-hr-apps-nineteen: #7b1fa2;
--color-hr-apps-one: #4caf50;
--color-hr-apps-seven: #00bcd4;
--color-hr-apps-seventeen: #ff5252;
--color-hr-apps-six: #f9a825;
--color-hr-apps-sixteen: #cddc39;
--color-hr-apps-ten: #ff5722;
--color-hr-apps-thirteen: #2196f3;
--color-hr-apps-three: #1565c0;
--color-hr-apps-twelve: #9e9d24;
--color-hr-apps-twenty: #03a9fa;
--color-hr-apps-twenty-eight: #0277bd;
--color-hr-apps-twenty-five: #d84315;
--color-hr-apps-twenty-four: #ffeb3b;
--color-hr-apps-twenty-nine: #ffeb3b;
--color-hr-apps-twenty-one: #ff8f00;
--color-hr-apps-twenty-seven: #ff4081;
--color-hr-apps-twenty-six: #00695c;
--color-hr-apps-twenty-three: #ab47bc;
--color-hr-apps-twenty-two: #4caf50;
--color-hr-apps-two: #ff9800;
--color-icons-default: #d1d3d8;
--color-icons-eight: #8bc34a;
--color-icons-eighteen: #ffc107;
--color-icons-eleven: #00695c;
--color-icons-fifteen: #9e9d24;
--color-icons-five: #2196f3;
--color-icons-four: #0277bd;
--color-icons-fourteen: #4caf50;
--color-icons-nine: #7c4dff;
--color-icons-nineteen: #f9a825;
--color-icons-one: #283593;
--color-icons-seven: #00bcd4;
--color-icons-seventeen: #ffeb3b;
--color-icons-six: #03a9fa;
--color-icons-sixteen: #cddc39;
--color-icons-ten: #00838f;
--color-icons-thirteen: #558b2f;
--color-icons-thirty: #7b1fa2;
--color-icons-three: #1565c0;
--color-icons-twelve: #009688;
--color-icons-twenty: #ff9800;
--color-icons-twenty-eight: #ff84e2;
--color-icons-twenty-five: #ff5252;
--color-icons-twenty-four: #ff5722;
--color-icons-twenty-nine: #ab47bc;
--color-icons-twenty-one: #ff8f00;
--color-icons-twenty-seven: #ff4081;
--color-icons-twenty-six: #d50000;
--color-icons-twenty-three: #d84315;
--color-icons-twenty-two: #ef6c00;
--color-icons-two: #3d5afe;
--color-initials-a: #d73628;
--color-initials-b: #e5155a;
--color-initials-c: #ad4bbe;
--color-initials-d: #8662c6;
--color-initials-default: #666;
--color-initials-e: #6171c2;
--color-initials-f: #1c6bf2;
--color-initials-g: #087eb4;
--color-initials-h: #188290;
--color-initials-i: #358279;
--color-initials-j: #35825c;
--color-initials-k: #5a822b;
--color-initials-l: #707a1a;
--color-initials-m: #897106;
--color-initials-n: #f6bf26;
--color-initials-o: #926d07;
--color-initials-p: #e03400;
--color-initials-q: #757575;
--color-initials-r: #65798b;
--color-initials-s: #876d64;
--color-initials-t: #747953;
--color-initials-u: #676bc1;
--color-initials-v: #8863c5;
--color-initials-w: #2d6a4f;
--color-initials-x: #24828f;
--color-initials-y: #8a6f66;
--color-initials-z: #58792f;
--color-leave-policies-default: #000000;
--color-leave-policies-eight: #ff84e2;
--color-leave-policies-eighteen: #007bff;
--color-leave-policies-eleven: #4caf50;
--color-leave-policies-fifteen: #ff84e2;
--color-leave-policies-five: #d50000;
--color-leave-policies-four: #009688;
--color-leave-policies-fourteen: #00bcd4;
--color-leave-policies-nine: #009688;
--color-leave-policies-one: #4caf50;
--color-leave-policies-seven: #1565c0;
--color-leave-policies-seventeen: #a52a2a;
--color-leave-policies-six: #d1d3d8;
--color-leave-policies-sixteen: #48d1cc;
--color-leave-policies-ten: #ab47bc;
--color-leave-policies-thirteen: #ff8f00;
--color-leave-policies-three: #009688;
--color-leave-policies-twelve: #ff8f00;
--color-leave-policies-two: #009688;
--color-light-blue-500: #ebf4ff;
--color-light-blue-700: #b9c1cc;
--color-light-sky-blue-500: #e8f4fd;
--color-light-sky-blue-700: #b6c1ca;
--color-light-slate-blue-grey-700: #9ea7aa;
--color-light-slate-grey-700: #bcbcbc;
--color-linen-500: #fff4e5;
--color-linen-700: #ccc1b3;
--color-misty-rose-500: #fdecea;
--color-misty-rose-700: #cabab8;
--color-orange-300: #ffdd50;
--color-orange-500: #fcab12;
--color-orange-700: #c47c00;
--color-orange-clay-300: #d99539;
--color-orange-clay-500: #a36700;
--color-orange-clay-700: #703c00;
--color-pale-green-500: #edf7ed;
--color-pale-green-700: #bbc4bb;
--color-red-300: #ff616f;
--color-red-500: #ff1744;
--color-red-700: #c4001d;
--color-slate-blue-grey-300: #819ca9;
--color-slate-blue-grey-500: rgba(96, 125, 135, 0.4);
--color-slate-blue-grey-700: #29434e;
--color-transparent: transparent;
--color-violet-300: #f3e9ff;
--color-violet-500: #9b00ce;
--color-violet-700: #5c00a7;
--color-white: #ffffff;
--font-0: 0;
--font-base-size: 16px;
--font-large-size: 1rem;
--font-large-line-height: 1.25rem;
--font-large-weight: 500;
--font-standard-line-height: 1;
--font-medium-size: 0.875rem;
--font-medium-line-height: 1.25rem;
--font-medium-weight: 400;
--font-small-size: 0.8125rem;
--font-small-line-height: 1rem;
--font-small-weight: 500;
--font-x-large-size: 1.125rem;
--font-x-large-line-height: 1.375rem;
--font-x-large-weight: 400;
--font-xx-large-size: 1.25rem;
--font-xx-large-line-height: 1.5rem;
--font-xx-large-weight: 500;
--font-x-medium-size: 0.875rem;
--font-x-medium-line-height: 1.125rem;
--font-x-medium-weight: 500;
--font-x-small-size: 0.75rem;
--font-x-small-line-height: 1rem;
--font-x-small-weight: 400;
--font-xx-small-size: 0.6875rem;
--font-xx-small-line-height: 0.9375rem;
--font-xx-small-weight: 400;
--layout-0: 0;
--layout-base: 0.25rem;
--layout-border: 1px;
--layout-half: 0.125rem;
--layout-large: 4.5rem;
--layout-medium: 3rem;
--layout-small: 1.75rem;
--layout-x-large: 4.25rem;
--layout-xx-large: 4rem;
--layout-xxx-large: 3.75rem;
--layout-xxxx-large: 3.5rem;
--layout-xxxxx-large: 3.25rem;
--layout-x-medium: 2.75rem;
--layout-xx-medium: 2.5rem;
--layout-xxx-medium: 2.25rem;
--layout-xxxx-medium: 2rem;
--layout-x-small: 1.5rem;
--layout-xx-small: 1.25rem;
--layout-xxx-small: 1rem;
--layout-xxxx-small: 0.75rem;
--layout-xxxxx-small: 0.5rem;
--alpha-0: 0;
--alpha-10: 0.1;
--alpha-20: 0.2;
--alpha-30: 0.3;
--alpha-40: 0.4;
--alpha-50: 0.5;
--alpha-60: 0.6;
--alpha-70: 0.7;
--alpha-80: 0.8;
--alpha-90: 0.9;
--alpha-100: 1;
--percentage-0: 0;
--percentage-1: 1%;
--percentage-2: 2%;
--percentage-3: 3%;
--percentage-4: 4%;
--percentage-5: 5%;
--percentage-6: 6%;
--percentage-7: 7%;
--percentage-8: 8%;
--percentage-9: 9%;
--percentage-10: 10%;
--percentage-11: 11%;
--percentage-12: 12%;
--percentage-13: 13%;
--percentage-14: 14%;
--percentage-15: 15%;
--percentage-16: 16%;
--percentage-17: 17%;
--percentage-18: 18%;
--percentage-19: 19%;
--percentage-20: 20%;
--percentage-21: 21%;
--percentage-22: 22%;
--percentage-23: 23%;
--percentage-24: 24%;
--percentage-25: 25%;
--percentage-26: 26%;
--percentage-27: 27%;
--percentage-28: 28%;
--percentage-29: 29%;
--percentage-30: 30%;
--percentage-31: 31%;
--percentage-32: 32%;
--percentage-33: 33%;
--percentage-34: 34%;
--percentage-35: 35%;
--percentage-36: 36%;
--percentage-37: 37%;
--percentage-38: 38%;
--percentage-39: 39%;
--percentage-40: 40%;
--percentage-41: 41%;
--percentage-42: 42%;
--percentage-43: 43%;
--percentage-44: 44%;
--percentage-45: 45%;
--percentage-46: 46%;
--percentage-47: 47%;
--percentage-48: 48%;
--percentage-49: 49%;
--percentage-50: 50%;
--percentage-51: 51%;
--percentage-52: 52%;
--percentage-53: 53%;
--percentage-54: 54%;
--percentage-55: 55%;
--percentage-56: 56%;
--percentage-57: 57%;
--percentage-58: 58%;
--percentage-59: 59%;
--percentage-60: 60%;
--percentage-61: 61%;
--percentage-62: 62%;
--percentage-63: 63%;
--percentage-64: 64%;
--percentage-65: 65%;
--percentage-66: 66%;
--percentage-67: 67%;
--percentage-68: 68%;
--percentage-69: 69%;
--percentage-70: 70%;
--percentage-71: 71%;
--percentage-72: 72%;
--percentage-73: 73%;
--percentage-74: 74%;
--percentage-75: 75%;
--percentage-76: 76%;
--percentage-77: 77%;
--percentage-78: 78%;
--percentage-79: 79%;
--percentage-80: 80%;
--percentage-81: 81%;
--percentage-82: 82%;
--percentage-83: 83%;
--percentage-84: 84%;
--percentage-85: 85%;
--percentage-86: 86%;
--percentage-87: 87%;
--percentage-88: 88%;
--percentage-89: 89%;
--percentage-90: 90%;
--percentage-91: 91%;
--percentage-92: 92%;
--percentage-93: 93%;
--percentage-94: 94%;
--percentage-95: 95%;
--percentage-96: 96%;
--percentage-97: 97%;
--percentage-98: 98%;
--percentage-99: 99%;
--percentage-100: 100%;
--rotation-angle-0: 0;
--rotation-angle-1: 1deg;
--rotation-angle-2: 2deg;
--rotation-angle-3: 3deg;
--rotation-angle-4: 4deg;
--rotation-angle-5: 5deg;
--rotation-angle-6: 6deg;
--rotation-angle-7: 7deg;
--rotation-angle-8: 8deg;
--rotation-angle-9: 9deg;
--rotation-angle-10: 10deg;
--rotation-angle-11: 11deg;
--rotation-angle-12: 12deg;
--rotation-angle-13: 13deg;
--rotation-angle-14: 14deg;
--rotation-angle-15: 15deg;
--rotation-angle-16: 16deg;
--rotation-angle-17: 17deg;
--rotation-angle-18: 18deg;
--rotation-angle-19: 19deg;
--rotation-angle-20: 20deg;
--rotation-angle-21: 21deg;
--rotation-angle-22: 22deg;
--rotation-angle-23: 23deg;
--rotation-angle-24: 24deg;
--rotation-angle-25: 25deg;
--rotation-angle-26: 26deg;
--rotation-angle-27: 27deg;
--rotation-angle-28: 28deg;
--rotation-angle-29: 29deg;
--rotation-angle-30: 30deg;
--rotation-angle-31: 31deg;
--rotation-angle-32: 32deg;
--rotation-angle-33: 33deg;
--rotation-angle-34: 34deg;
--rotation-angle-35: 35deg;
--rotation-angle-36: 36deg;
--rotation-angle-37: 37deg;
--rotation-angle-38: 38deg;
--rotation-angle-39: 39deg;
--rotation-angle-40: 40deg;
--rotation-angle-41: 41deg;
--rotation-angle-42: 42deg;
--rotation-angle-43: 43deg;
--rotation-angle-44: 44deg;
--rotation-angle-45: 45deg;
--rotation-angle-46: 46deg;
--rotation-angle-47: 47deg;
--rotation-angle-48: 48deg;
--rotation-angle-49: 49deg;
--rotation-angle-50: 50deg;
--rotation-angle-51: 51deg;
--rotation-angle-52: 52deg;
--rotation-angle-53: 53deg;
--rotation-angle-54: 54deg;
--rotation-angle-55: 55deg;
--rotation-angle-56: 56deg;
--rotation-angle-57: 57deg;
--rotation-angle-58: 58deg;
--rotation-angle-59: 59deg;
--rotation-angle-60: 60deg;
--rotation-angle-61: 61deg;
--rotation-angle-62: 62deg;
--rotation-angle-63: 63deg;
--rotation-angle-64: 64deg;
--rotation-angle-65: 65deg;
--rotation-angle-66: 66deg;
--rotation-angle-67: 67deg;
--rotation-angle-68: 68deg;
--rotation-angle-69: 69deg;
--rotation-angle-70: 70deg;
--rotation-angle-71: 71deg;
--rotation-angle-72: 72deg;
--rotation-angle-73: 73deg;
--rotation-angle-74: 74deg;
--rotation-angle-75: 75deg;
--rotation-angle-76: 76deg;
--rotation-angle-77: 77deg;
--rotation-angle-78: 78deg;
--rotation-angle-79: 79deg;
--rotation-angle-80: 80deg;
--rotation-angle-81: 81deg;
--rotation-angle-82: 82deg;
--rotation-angle-83: 83deg;
--rotation-angle-84: 84deg;
--rotation-angle-85: 85deg;
--rotation-angle-86: 86deg;
--rotation-angle-87: 87deg;
--rotation-angle-88: 88deg;
--rotation-angle-89: 89deg;
--rotation-angle-90: 90deg;
--rotation-angle-91: 91deg;
--rotation-angle-92: 92deg;
--rotation-angle-93: 93deg;
--rotation-angle-94: 94deg;
--rotation-angle-95: 95deg;
--rotation-angle-96: 96deg;
--rotation-angle-97: 97deg;
--rotation-angle-98: 98deg;
--rotation-angle-99: 99deg;
--rotation-angle-100: 100deg;
--rotation-angle-101: 101deg;
--rotation-angle-102: 102deg;
--rotation-angle-103: 103deg;
--rotation-angle-104: 104deg;
--rotation-angle-105: 105deg;
--rotation-angle-106: 106deg;
--rotation-angle-107: 107deg;
--rotation-angle-108: 108deg;
--rotation-angle-109: 109deg;
--rotation-angle-110: 110deg;
--rotation-angle-111: 111deg;
--rotation-angle-112: 112deg;
--rotation-angle-113: 113deg;
--rotation-angle-114: 114deg;
--rotation-angle-115: 115deg;
--rotation-angle-116: 116deg;
--rotation-angle-117: 117deg;
--rotation-angle-118: 118deg;
--rotation-angle-119: 119deg;
--rotation-angle-120: 120deg;
--rotation-angle-121: 121deg;
--rotation-angle-122: 122deg;
--rotation-angle-123: 123deg;
--rotation-angle-124: 124deg;
--rotation-angle-125: 125deg;
--rotation-angle-126: 126deg;
--rotation-angle-127: 127deg;
--rotation-angle-128: 128deg;
--rotation-angle-129: 129deg;
--rotation-angle-130: 130deg;
--rotation-angle-131: 131deg;
--rotation-angle-132: 132deg;
--rotation-angle-133: 133deg;
--rotation-angle-134: 134deg;
--rotation-angle-135: 135deg;
--rotation-angle-136: 136deg;
--rotation-angle-137: 137deg;
--rotation-angle-138: 138deg;
--rotation-angle-139: 139deg;
--rotation-angle-140: 140deg;
--rotation-angle-141: 141deg;
--rotation-angle-142: 142deg;
--rotation-angle-143: 143deg;
--rotation-angle-144: 144deg;
--rotation-angle-145: 145deg;
--rotation-angle-146: 146deg;
--rotation-angle-147: 147deg;
--rotation-angle-148: 148deg;
--rotation-angle-149: 149deg;
--rotation-angle-150: 150deg;
--rotation-angle-151: 151deg;
--rotation-angle-152: 152deg;
--rotation-angle-153: 153deg;
--rotation-angle-154: 154deg;
--rotation-angle-155: 155deg;
--rotation-angle-156: 156deg;
--rotation-angle-157: 157deg;
--rotation-angle-158: 158deg;
--rotation-angle-159: 159deg;
--rotation-angle-160: 160deg;
--rotation-angle-161: 161deg;
--rotation-angle-162: 162deg;
--rotation-angle-163: 163deg;
--rotation-angle-164: 164deg;
--rotation-angle-165: 165deg;
--rotation-angle-166: 166deg;
--rotation-angle-167: 167deg;
--rotation-angle-168: 168deg;
--rotation-angle-169: 169deg;
--rotation-angle-170: 170deg;
--rotation-angle-171: 171deg;
--rotation-angle-172: 172deg;
--rotation-angle-173: 173deg;
--rotation-angle-174: 174deg;
--rotation-angle-175: 175deg;
--rotation-angle-176: 176deg;
--rotation-angle-177: 177deg;
--rotation-angle-178: 178deg;
--rotation-angle-179: 179deg;
--rotation-angle-180: 180deg;
--rotation-angle-181: 181deg;
--rotation-angle-182: 182deg;
--rotation-angle-183: 183deg;
--rotation-angle-184: 184deg;
--rotation-angle-185: 185deg;
--rotation-angle-186: 186deg;
--rotation-angle-187: 187deg;
--rotation-angle-188: 188deg;
--rotation-angle-189: 189deg;
--rotation-angle-190: 190deg;
--rotation-angle-191: 191deg;
--rotation-angle-192: 192deg;
--rotation-angle-193: 193deg;
--rotation-angle-194: 194deg;
--rotation-angle-195: 195deg;
--rotation-angle-196: 196deg;
--rotation-angle-197: 197deg;
--rotation-angle-198: 198deg;
--rotation-angle-199: 199deg;
--rotation-angle-200: 200deg;
--rotation-angle-201: 201deg;
--rotation-angle-202: 202deg;
--rotation-angle-203: 203deg;
--rotation-angle-204: 204deg;
--rotation-angle-205: 205deg;
--rotation-angle-206: 206deg;
--rotation-angle-207: 207deg;
--rotation-angle-208: 208deg;
--rotation-angle-209: 209deg;
--rotation-angle-210: 210deg;
--rotation-angle-211: 211deg;
--rotation-angle-212: 212deg;
--rotation-angle-213: 213deg;
--rotation-angle-214: 214deg;
--rotation-angle-215: 215deg;
--rotation-angle-216: 216deg;
--rotation-angle-217: 217deg;
--rotation-angle-218: 218deg;
--rotation-angle-219: 219deg;
--rotation-angle-220: 220deg;
--rotation-angle-221: 221deg;
--rotation-angle-222: 222deg;
--rotation-angle-223: 223deg;
--rotation-angle-224: 224deg;
--rotation-angle-225: 225deg;
--rotation-angle-226: 226deg;
--rotation-angle-227: 227deg;
--rotation-angle-228: 228deg;
--rotation-angle-229: 229deg;
--rotation-angle-230: 230deg;
--rotation-angle-231: 231deg;
--rotation-angle-232: 232deg;
--rotation-angle-233: 233deg;
--rotation-angle-234: 234deg;
--rotation-angle-235: 235deg;
--rotation-angle-236: 236deg;
--rotation-angle-237: 237deg;
--rotation-angle-238: 238deg;
--rotation-angle-239: 239deg;
--rotation-angle-240: 240deg;
--rotation-angle-241: 241deg;
--rotation-angle-242: 242deg;
--rotation-angle-243: 243deg;
--rotation-angle-244: 244deg;
--rotation-angle-245: 245deg;
--rotation-angle-246: 246deg;
--rotation-angle-247: 247deg;
--rotation-angle-248: 248deg;
--rotation-angle-249: 249deg;
--rotation-angle-250: 250deg;
--rotation-angle-251: 251deg;
--rotation-angle-252: 252deg;
--rotation-angle-253: 253deg;
--rotation-angle-254: 254deg;
--rotation-angle-255: 255deg;
--rotation-angle-256: 256deg;
--rotation-angle-257: 257deg;
--rotation-angle-258: 258deg;
--rotation-angle-259: 259deg;
--rotation-angle-260: 260deg;
--rotation-angle-261: 261deg;
--rotation-angle-262: 262deg;
--rotation-angle-263: 263deg;
--rotation-angle-264: 264deg;
--rotation-angle-265: 265deg;
--rotation-angle-266: 266deg;
--rotation-angle-267: 267deg;
--rotation-angle-268: 268deg;
--rotation-angle-269: 269deg;
--rotation-angle-270: 270deg;
--rotation-angle-271: 271deg;
--rotation-angle-272: 272deg;
--rotation-angle-273: 273deg;
--rotation-angle-274: 274deg;
--rotation-angle-275: 275deg;
--rotation-angle-276: 276deg;
--rotation-angle-277: 277deg;
--rotation-angle-278: 278deg;
--rotation-angle-279: 279deg;
--rotation-angle-280: 280deg;
--rotation-angle-281: 281deg;
--rotation-angle-282: 282deg;
--rotation-angle-283: 283deg;
--rotation-angle-284: 284deg;
--rotation-angle-285: 285deg;
--rotation-angle-286: 286deg;
--rotation-angle-287: 287deg;
--rotation-angle-288: 288deg;
--rotation-angle-289: 289deg;
--rotation-angle-290: 290deg;
--rotation-angle-291: 291deg;
--rotation-angle-292: 292deg;
--rotation-angle-293: 293deg;
--rotation-angle-294: 294deg;
--rotation-angle-295: 295deg;
--rotation-angle-296: 296deg;
--rotation-angle-297: 297deg;
--rotation-angle-298: 298deg;
--rotation-angle-299: 299deg;
--rotation-angle-300: 300deg;
--rotation-angle-301: 301deg;
--rotation-angle-302: 302deg;
--rotation-angle-303: 303deg;
--rotation-angle-304: 304deg;
--rotation-angle-305: 305deg;
--rotation-angle-306: 306deg;
--rotation-angle-307: 307deg;
--rotation-angle-308: 308deg;
--rotation-angle-309: 309deg;
--rotation-angle-310: 310deg;
--rotation-angle-311: 311deg;
--rotation-angle-312: 312deg;
--rotation-angle-313: 313deg;
--rotation-angle-314: 314deg;
--rotation-angle-315: 315deg;
--rotation-angle-316: 316deg;
--rotation-angle-317: 317deg;
--rotation-angle-318: 318deg;
--rotation-angle-319: 319deg;
--rotation-angle-320: 320deg;
--rotation-angle-321: 321deg;
--rotation-angle-322: 322deg;
--rotation-angle-323: 323deg;
--rotation-angle-324: 324deg;
--rotation-angle-325: 325deg;
--rotation-angle-326: 326deg;
--rotation-angle-327: 327deg;
--rotation-angle-328: 328deg;
--rotation-angle-329: 329deg;
--rotation-angle-330: 330deg;
--rotation-angle-331: 331deg;
--rotation-angle-332: 332deg;
--rotation-angle-333: 333deg;
--rotation-angle-334: 334deg;
--rotation-angle-335: 335deg;
--rotation-angle-336: 336deg;
--rotation-angle-337: 337deg;
--rotation-angle-338: 338deg;
--rotation-angle-339: 339deg;
--rotation-angle-340: 340deg;
--rotation-angle-341: 341deg;
--rotation-angle-342: 342deg;
--rotation-angle-343: 343deg;
--rotation-angle-344: 344deg;
--rotation-angle-345: 345deg;
--rotation-angle-346: 346deg;
--rotation-angle-347: 347deg;
--rotation-angle-348: 348deg;
--rotation-angle-349: 349deg;
--rotation-angle-350: 350deg;
--rotation-angle-351: 351deg;
--rotation-angle-352: 352deg;
--rotation-angle-353: 353deg;
--rotation-angle-354: 354deg;
--rotation-angle-355: 355deg;
--rotation-angle-356: 356deg;
--rotation-angle-357: 357deg;
--rotation-angle-358: 358deg;
--rotation-angle-359: 359deg;
--rotation-angle-360: 360deg;
--shadow-0: 0;
--shadow-border-b: 1px;
--shadow-border-x: 1px;
--shadow-border-y: 1px;
--shadow-large-b: 0.5rem;
--shadow-large-x: 0.5rem;
--shadow-large-y: 0.5rem;
--shadow-medium-b: 0.25rem;
--shadow-medium-x: 0.25rem;
--shadow-medium-y: 0.25rem;
--shadow-small-b: 0.125rem;
--shadow-small-x: 0.125rem;
--shadow-small-y: 0.125rem;
--text-indentation-0: 0;
--text-indentation-negative: -99999px;
--text-weight-bold: 700;
--text-weight-bolder: 900;
--text-weight-light: 300;
--text-weight-lighter: 100;
--text-weight-medium: 500;
--text-weight-regular: 400;
--time-commons-base: 400ms;
--time-delay-xl: 1000ms;
--time-duration-l: 1000ms;
--time-duration-s: 200ms;
--viewport-height-0: 0;
--viewport-height-10: 10vh;
--viewport-height-20: 20vh;
--viewport-height-30: 30vh;
--viewport-height-40: 40vh;
--viewport-height-50: 50vh;
--viewport-height-60: 60vh;
--viewport-height-70: 70vh;
--viewport-height-80: 80vh;
--viewport-height-90: 90vh;
--viewport-height-100: 100vh;
--viewport-width-0: 0;
--viewport-width-10: 10vw;
--viewport-width-20: 20vw;
--viewport-width-30: 30vw;
--viewport-width-40: 40vw;
--viewport-width-50: 50vw;
--viewport-width-60: 60vw;
--viewport-width-70: 70vw;
--viewport-width-80: 80vw;
--viewport-width-90: 90vw;
--viewport-width-100: 100vw;
--weight-font-1: 100;
--weight-font-2: 300;
--weight-font-3: 400;
--weight-font-4: 500;
--weight-font-5: 700;
--weight-font-6: 900;
--weight-font-bold: 700;
--weight-font-bolder: 900;
--weight-font-light: 300;
--weight-font-lighter: 100;
--weight-font-medium: 500;
--weight-font-regular: 400;
--angle-commons-1: 1deg;
--angle-commons-2: 2deg;
--angle-commons-3: 3deg;
--angle-commons-4: 4deg;
--angle-commons-5: 5deg;
--angle-commons-6: 6deg;
--angle-commons-7: 7deg;
--angle-commons-8: 8deg;
--angle-commons-9: 9deg;
--angle-commons-10: 10deg;
--angle-commons-11: 11deg;
--angle-commons-12: 12deg;
--angle-commons-13: 13deg;
--angle-commons-14: 14deg;
--angle-commons-15: 15deg;
--angle-commons-16: 16deg;
--angle-commons-17: 17deg;
--angle-commons-18: 18deg;
--angle-commons-19: 19deg;
--angle-commons-20: 20deg;
--angle-commons-21: 21deg;
--angle-commons-22: 22deg;
--angle-commons-23: 23deg;
--angle-commons-24: 24deg;
--angle-commons-25: 25deg;
--angle-commons-26: 26deg;
--angle-commons-27: 27deg;
--angle-commons-28: 28deg;
--angle-commons-29: 29deg;
--angle-commons-30: 30deg;
--angle-commons-31: 31deg;
--angle-commons-32: 32deg;
--angle-commons-33: 33deg;
--angle-commons-34: 34deg;
--angle-commons-35: 35deg;
--angle-commons-36: 36deg;
--angle-commons-37: 37deg;
--angle-commons-38: 38deg;
--angle-commons-39: 39deg;
--angle-commons-40: 40deg;
--angle-commons-41: 41deg;
--angle-commons-42: 42deg;
--angle-commons-43: 43deg;
--angle-commons-44: 44deg;
--angle-commons-45: 45deg;
--angle-commons-46: 46deg;
--angle-commons-47: 47deg;
--angle-commons-48: 48deg;
--angle-commons-49: 49deg;
--angle-commons-50: 50deg;
--angle-commons-51: 51deg;
--angle-commons-52: 52deg;
--angle-commons-53: 53deg;
--angle-commons-54: 54deg;
--angle-commons-55: 55deg;
--angle-commons-56: 56deg;
--angle-commons-57: 57deg;
--angle-commons-58: 58deg;
--angle-commons-59: 59deg;
--angle-commons-60: 60deg;
--angle-commons-61: 61deg;
--angle-commons-62: 62deg;
--angle-commons-63: 63deg;
--angle-commons-64: 64deg;
--angle-commons-65: 65deg;
--angle-commons-66: 66deg;
--angle-commons-67: 67deg;
--angle-commons-68: 68deg;
--angle-commons-69: 69deg;
--angle-commons-70: 70deg;
--angle-commons-71: 71deg;
--angle-commons-72: 72deg;
--angle-commons-73: 73deg;
--angle-commons-74: 74deg;
--angle-commons-75: 75deg;
--angle-commons-76: 76deg;
--angle-commons-77: 77deg;
--angle-commons-78: 78deg;
--angle-commons-79: 79deg;
--angle-commons-80: 80deg;
--angle-commons-81: 81deg;
--angle-commons-82: 82deg;
--angle-commons-83: 83deg;
--angle-commons-84: 84deg;
--angle-commons-85: 85deg;
--angle-commons-86: 86deg;
--angle-commons-87: 87deg;
--angle-commons-88: 88deg;
--angle-commons-89: 89deg;
--angle-commons-90: 90deg;
--angle-commons-91: 91deg;
--angle-commons-92: 92deg;
--angle-commons-93: 93deg;
--angle-commons-94: 94deg;
--angle-commons-95: 95deg;
--angle-commons-96: 96deg;
--angle-commons-97: 97deg;
--angle-commons-98: 98deg;
--angle-commons-99: 99deg;
--angle-commons-100: 100deg;
--angle-commons-101: 101deg;
--angle-commons-102: 102deg;
--angle-commons-103: 103deg;
--angle-commons-104: 104deg;
--angle-commons-105: 105deg;
--angle-commons-106: 106deg;
--angle-commons-107: 107deg;
--angle-commons-108: 108deg;
--angle-commons-109: 109deg;
--angle-commons-110: 110deg;
--angle-commons-111: 111deg;
--angle-commons-112: 112deg;
--angle-commons-113: 113deg;
--angle-commons-114: 114deg;
--angle-commons-115: 115deg;
--angle-commons-116: 116deg;
--angle-commons-117: 117deg;
--angle-commons-118: 118deg;
--angle-commons-119: 119deg;
--angle-commons-120: 120deg;
--angle-commons-121: 121deg;
--angle-commons-122: 122deg;
--angle-commons-123: 123deg;
--angle-commons-124: 124deg;
--angle-commons-125: 125deg;
--angle-commons-126: 126deg;
--angle-commons-127: 127deg;
--angle-commons-128: 128deg;
--angle-commons-129: 129deg;
--angle-commons-130: 130deg;
--angle-commons-131: 131deg;
--angle-commons-132: 132deg;
--angle-commons-133: 133deg;
--angle-commons-134: 134deg;
--angle-commons-135: 135deg;
--angle-commons-136: 136deg;
--angle-commons-137: 137deg;
--angle-commons-138: 138deg;
--angle-commons-139: 139deg;
--angle-commons-140: 140deg;
--angle-commons-141: 141deg;
--angle-commons-142: 142deg;
--angle-commons-143: 143deg;
--angle-commons-144: 144deg;
--angle-commons-145: 145deg;
--angle-commons-146: 146deg;
--angle-commons-147: 147deg;
--angle-commons-148: 148deg;
--angle-commons-149: 149deg;
--angle-commons-150: 150deg;
--angle-commons-151: 151deg;
--angle-commons-152: 152deg;
--angle-commons-153: 153deg;
--angle-commons-154: 154deg;
--angle-commons-155: 155deg;
--angle-commons-156: 156deg;
--angle-commons-157: 157deg;
--angle-commons-158: 158deg;
--angle-commons-159: 159deg;
--angle-commons-160: 160deg;
--angle-commons-161: 161deg;
--angle-commons-162: 162deg;
--angle-commons-163: 163deg;
--angle-commons-164: 164deg;
--angle-commons-165: 165deg;
--angle-commons-166: 166deg;
--angle-commons-167: 167deg;
--angle-commons-168: 168deg;
--angle-commons-169: 169deg;
--angle-commons-170: 170deg;
--angle-commons-171: 171deg;
--angle-commons-172: 172deg;
--angle-commons-173: 173deg;
--angle-commons-174: 174deg;
--angle-commons-175: 175deg;
--angle-commons-176: 176deg;
--angle-commons-177: 177deg;
--angle-commons-178: 178deg;
--angle-commons-179: 179deg;
--angle-commons-180: 180deg;
--angle-commons-181: 181deg;
--angle-commons-182: 182deg;
--angle-commons-183: 183deg;
--angle-commons-184: 184deg;
--angle-commons-185: 185deg;
--angle-commons-186: 186deg;
--angle-commons-187: 187deg;
--angle-commons-188: 188deg;
--angle-commons-189: 189deg;
--angle-commons-190: 190deg;
--angle-commons-191: 191deg;
--angle-commons-192: 192deg;
--angle-commons-193: 193deg;
--angle-commons-194: 194deg;
--angle-commons-195: 195deg;
--angle-commons-196: 196deg;
--angle-commons-197: 197deg;
--angle-commons-198: 198deg;
--angle-commons-199: 199deg;
--angle-commons-200: 200deg;
--angle-commons-201: 201deg;
--angle-commons-202: 202deg;
--angle-commons-203: 203deg;
--angle-commons-204: 204deg;
--angle-commons-205: 205deg;
--angle-commons-206: 206deg;
--angle-commons-207: 207deg;
--angle-commons-208: 208deg;
--angle-commons-209: 209deg;
--angle-commons-210: 210deg;
--angle-commons-211: 211deg;
--angle-commons-212: 212deg;
--angle-commons-213: 213deg;
--angle-commons-214: 214deg;
--angle-commons-215: 215deg;
--angle-commons-216: 216deg;
--angle-commons-217: 217deg;
--angle-commons-218: 218deg;
--angle-commons-219: 219deg;
--angle-commons-220: 220deg;
--angle-commons-221: 221deg;
--angle-commons-222: 222deg;
--angle-commons-223: 223deg;
--angle-commons-224: 224deg;
--angle-commons-225: 225deg;
--angle-commons-226: 226deg;
--angle-commons-227: 227deg;
--angle-commons-228: 228deg;
--angle-commons-229: 229deg;
--angle-commons-230: 230deg;
--angle-commons-231: 231deg;
--angle-commons-232: 232deg;
--angle-commons-233: 233deg;
--angle-commons-234: 234deg;
--angle-commons-235: 235deg;
--angle-commons-236: 236deg;
--angle-commons-237: 237deg;
--angle-commons-238: 238deg;
--angle-commons-239: 239deg;
--angle-commons-240: 240deg;
--angle-commons-241: 241deg;
--angle-commons-242: 242deg;
--angle-commons-243: 243deg;
--angle-commons-244: 244deg;
--angle-commons-245: 245deg;
--angle-commons-246: 246deg;
--angle-commons-247: 247deg;
--angle-commons-248: 248deg;
--angle-commons-249: 249deg;
--angle-commons-250: 250deg;
--angle-commons-251: 251deg;
--angle-commons-252: 252deg;
--angle-commons-253: 253deg;
--angle-commons-254: 254deg;
--angle-commons-255: 255deg;
--angle-commons-256: 256deg;
--angle-commons-257: 257deg;
--angle-commons-258: 258deg;
--angle-commons-259: 259deg;
--angle-commons-260: 260deg;
--angle-commons-261: 261deg;
--angle-commons-262: 262deg;
--angle-commons-263: 263deg;
--angle-commons-264: 264deg;
--angle-commons-265: 265deg;
--angle-commons-266: 266deg;
--angle-commons-267: 267deg;
--angle-commons-268: 268deg;
--angle-commons-269: 269deg;
--angle-commons-270: 270deg;
--angle-commons-271: 271deg;
--angle-commons-272: 272deg;
--angle-commons-273: 273deg;
--angle-commons-274: 274deg;
--angle-commons-275: 275deg;
--angle-commons-276: 276deg;
--angle-commons-277: 277deg;
--angle-commons-278: 278deg;
--angle-commons-279: 279deg;
--angle-commons-280: 280deg;
--angle-commons-281: 281deg;
--angle-commons-282: 282deg;
--angle-commons-283: 283deg;
--angle-commons-284: 284deg;
--angle-commons-285: 285deg;
--angle-commons-286: 286deg;
--angle-commons-287: 287deg;
--angle-commons-288: 288deg;
--angle-commons-289: 289deg;
--angle-commons-290: 290deg;
--angle-commons-291: 291deg;
--angle-commons-292: 292deg;
--angle-commons-293: 293deg;
--angle-commons-294: 294deg;
--angle-commons-295: 295deg;
--angle-commons-296: 296deg;
--angle-commons-297: 297deg;
--angle-commons-298: 298deg;
--angle-commons-299: 299deg;
--angle-commons-300: 300deg;
--angle-commons-301: 301deg;
--angle-commons-302: 302deg;
--angle-commons-303: 303deg;
--angle-commons-304: 304deg;
--angle-commons-305: 305deg;
--angle-commons-306: 306deg;
--angle-commons-307: 307deg;
--angle-commons-308: 308deg;
--angle-commons-309: 309deg;
--angle-commons-310: 310deg;
--angle-commons-311: 311deg;
--angle-commons-312: 312deg;
--angle-commons-313: 313deg;
--angle-commons-314: 314deg;
--angle-commons-315: 315deg;
--angle-commons-316: 316deg;
--angle-commons-317: 317deg;
--angle-commons-318: 318deg;
--angle-commons-319: 319deg;
--angle-commons-320: 320deg;
--angle-commons-321: 321deg;
--angle-commons-322: 322deg;
--angle-commons-323: 323deg;
--angle-commons-324: 324deg;
--angle-commons-325: 325deg;
--angle-commons-326: 326deg;
--angle-commons-327: 327deg;
--angle-commons-328: 328deg;
--angle-commons-329: 329deg;
--angle-commons-330: 330deg;
--angle-commons-331: 331deg;
--angle-commons-332: 332deg;
--angle-commons-333: 333deg;
--angle-commons-334: 334deg;
--angle-commons-335: 335deg;
--angle-commons-336: 336deg;
--angle-commons-337: 337deg;
--angle-commons-338: 338deg;
--angle-commons-339: 339deg;
--angle-commons-340: 340deg;
--angle-commons-341: 341deg;
--angle-commons-342: 342deg;
--angle-commons-343: 343deg;
--angle-commons-344: 344deg;
--angle-commons-345: 345deg;
--angle-commons-346: 346deg;
--angle-commons-347: 347deg;
--angle-commons-348: 348deg;
--angle-commons-349: 349deg;
--angle-commons-350: 350deg;
--angle-commons-351: 351deg;
--angle-commons-352: 352deg;
--angle-commons-353: 353deg;
--angle-commons-354: 354deg;
--angle-commons-355: 355deg;
--angle-commons-356: 356deg;
--angle-commons-357: 357deg;
--angle-commons-358: 358deg;
--angle-commons-359: 359deg;
--angle-commons-360: 360deg;
--duration-base: 400ms;
--duration-s: 200ms;
--duration-m: 400ms;
--duration-l: 1000ms;
--portion-commons-1: 1%;
--portion-commons-2: 2%;
--portion-commons-3: 3%;
--portion-commons-4: 4%;
--portion-commons-5: 5%;
--portion-commons-6: 6%;
--portion-commons-7: 7%;
--portion-commons-8: 8%;
--portion-commons-9: 9%;
--portion-commons-10: 10%;
--portion-commons-11: 11%;
--portion-commons-12: 12%;
--portion-commons-13: 13%;
--portion-commons-14: 14%;
--portion-commons-15: 15%;
--portion-commons-16: 16%;
--portion-commons-17: 17%;
--portion-commons-18: 18%;
--portion-commons-19: 19%;
--portion-commons-20: 20%;
--portion-commons-21: 21%;
--portion-commons-22: 22%;
--portion-commons-23: 23%;
--portion-commons-24: 24%;
--portion-commons-25: 25%;
--portion-commons-26: 26%;
--portion-commons-27: 27%;
--portion-commons-28: 28%;
--portion-commons-29: 29%;
--portion-commons-30: 30%;
--portion-commons-31: 31%;
--portion-commons-32: 32%;
--portion-commons-33: 33%;
--portion-commons-34: 34%;
--portion-commons-35: 35%;
--portion-commons-36: 36%;
--portion-commons-37: 37%;
--portion-commons-38: 38%;
--portion-commons-39: 39%;
--portion-commons-40: 40%;
--portion-commons-41: 41%;
--portion-commons-42: 42%;
--portion-commons-43: 43%;
--portion-commons-44: 44%;
--portion-commons-45: 45%;
--portion-commons-46: 46%;
--portion-commons-47: 47%;
--portion-commons-48: 48%;
--portion-commons-49: 49%;
--portion-commons-50: 50%;
--portion-commons-51: 51%;
--portion-commons-52: 52%;
--portion-commons-53: 53%;
--portion-commons-54: 54%;
--portion-commons-55: 55%;
--portion-commons-56: 56%;
--portion-commons-57: 57%;
--portion-commons-58: 58%;
--portion-commons-59: 59%;
--portion-commons-60: 60%;
--portion-commons-61: 61%;
--portion-commons-62: 62%;
--portion-commons-63: 63%;
--portion-commons-64: 64%;
--portion-commons-65: 65%;
--portion-commons-66: 66%;
--portion-commons-67: 67%;
--portion-commons-68: 68%;
--portion-commons-69: 69%;
--portion-commons-70: 70%;
--portion-commons-71: 71%;
--portion-commons-72: 72%;
--portion-commons-73: 73%;
--portion-commons-74: 74%;
--portion-commons-75: 75%;
--portion-commons-76: 76%;
--portion-commons-77: 77%;
--portion-commons-78: 78%;
--portion-commons-79: 79%;
--portion-commons-80: 80%;
--portion-commons-81: 81%;
--portion-commons-82: 82%;
--portion-commons-83: 83%;
--portion-commons-84: 84%;
--portion-commons-85: 85%;
--portion-commons-86: 86%;
--portion-commons-87: 87%;
--portion-commons-88: 88%;
--portion-commons-89: 89%;
--portion-commons-90: 90%;
--portion-commons-91: 91%;
--portion-commons-92: 92%;
--portion-commons-93: 93%;
--portion-commons-94: 94%;
--portion-commons-95: 95%;
--portion-commons-96: 96%;
--portion-commons-97: 97%;
--portion-commons-98: 98%;
--portion-commons-99: 99%;
--portion-commons-100: 100%;
--portion-unit-1: 0.1;
--portion-unit-2: 0.2;
--portion-unit-3: 0.3;
--portion-unit-4: 0.4;
--portion-unit-5: 0.5;
--portion-unit-6: 0.6;
--portion-unit-7: 0.7;
--portion-unit-8: 0.8;
--portion-unit-9: 0.9;
--portion-unit-10: 1;
--size-commons-0: 0;
--size-commons-base: 16px;
--size-commons-border: 1px;
--size-font-1: 0.6875rem;
--size-font-2: 0.75rem;
--size-font-3: 0.8125rem;
--size-font-4: 0.875rem;
--size-font-5: 0.9375rem;
--size-font-6: 1rem;
--size-font-7: 1.125rem;
--size-font-8: 1.25rem;
--size-font-9: 1.375rem;
--size-font-10: 1.5rem;
--size-screen-1: 360px;
--size-screen-2: 375px;
--size-screen-3: 480px;
--size-screen-4: 600px;
--size-screen-5: 640px;
--size-screen-6: 667px;
--size-screen-7: 720px;
--size-screen-8: 768px;
--size-screen-9: 800px;
--size-screen-10: 854px;
--size-screen-11: 900px;
--size-screen-12: 960px;
--size-screen-13: 1024px;
--size-screen-14: 1200px;
--size-screen-15: 1280px;
--size-screen-16: 1366px;
--size-screen-17: 1920px;
--size-unit-1: 0.25rem;
--size-unit-2: 0.5rem;
--size-unit-3: 0.75rem;
--size-unit-4: 1rem;
--size-unit-5: 1.25rem;
--size-unit-6: 1.5rem;
--size-unit-7: 1.75rem;
--size-unit-8: 2rem;
--size-unit-9: 2.25rem;
--size-unit-10: 2.5rem;
--size-unit-11: 2.75rem;
--size-unit-12: 3rem;
--size-unit-13: 3.25rem;
--size-unit-14: 3.5rem;
--size-unit-15: 3.75rem;
--size-unit-16: 4rem;
--size-unit-17: 4.25rem;
--size-unit-18: 4.5rem;
--size-unit-05: 0.125rem;
--size-viewport-height-1: 10vh;
--size-viewport-height-2: 20vh;
--size-viewport-height-3: 30vh;
--size-viewport-height-4: 40vh;
--size-viewport-height-5: 50vh;
--size-viewport-height-6: 60vh;
--size-viewport-height-7: 70vh;
--size-viewport-height-8: 80vh;
--size-viewport-height-9: 90vh;
--size-viewport-height-10: 100vh;
--size-viewport-width-1: 10vw;
--size-viewport-width-2: 20vw;
--size-viewport-width-3: 30vw;
--size-viewport-width-4: 40vw;
--size-viewport-width-5: 50vw;
--size-viewport-width-6: 60vw;
--size-viewport-width-7: 70vw;
--size-viewport-width-8: 80vw;
--size-viewport-width-9: 90vw;
--size-viewport-width-10: 100vw;
--indentation-0: 0;
--indentation-negative: -99999px;
}
/* @import './design-tokens.css'; */
/* Variables: Start */
/* Hacks: Start */
/* Hacks: End */
/* Responsive: Start */
/* Max-Width: Start */
/* Max-Width: End */
/* Max-Width & Min-Width: Start */
/* 1920. Es min 1680. Podría ser 1367. */
/* 1366. Es min 1281. */
/* 1280. Es min 1025. */
/* 640. Es min 600. Podría ser en 481px. */
/* 480. Es min 376. */
/* 375. Es min 360. */
/* 1024. Es min 900px. Podría ser 769px. */
/* 768. Es min 700px. Podría ser 641px. */
/* Max-Width & Min-Width: End */
/* Min-Width: Start */
/* Min-Width: End */
/* Responsive: End */
/* Units: Start */
/* Units: End */
/* Url's: Start */
/* Url's: End */
:root {
/* Color: Start */
--color-primary-primary-light-rgba: rgba(91, 158, 253, 0.12);
/* Color: End */
/* Icons: Start */
--contentEmpty: '';
--iCircle: '•';
--iMore: '|';
--threePoints: '...';
/* Icons: End */
/* Units: Start */
--negative-value: -1;
/* Units: End */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Foundations: End */
/* Core: Start */
/* Wrapper: Start */
.wrapper {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
height: var(--viewport-height-100);
margin: auto;
width: var(--percentage-100);
/* Responsive: Start */
/* Responsive: End */
/* Hacks: Safari: Start */
/* Hacks: Safari: End */
}
.wrapper ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.wrapper ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.wrapper ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
@media (min-width: 1024px) {
.wrapper {
transform: none;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.wrapper {
-webkit-overflow-scrolling: touch;
}
}
/* Wrapper: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Icon: Start */
.icon {
display: inline-block;
height: var(--layout-x-small);
position: relative;
width: var(--layout-x-small);
/* Ai: SVG: Start */
/* Ai: SVG: End */
/* Placeholder: Shape: Square: Start */
/* Placeholder: Shape: Square: End */
/* SVG: Start */
/* SVG: End */
}
.icon.iai svg {
fill: var(--color-alternative-ai-base);
}
.icon .placeholder[data-shape='square'] {
height: var(--percentage-100);
width: var(--percentage-100);
}
.icon svg {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: fill var(--time-commons-base) ease;
fill: var(--color-primary-icon-base);
height: var(--layout-x-small);
width: var(--layout-x-small);
}
/* Icon: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* IconButton: AI: Start */
a.iconbutton.iabutton,
button.iconbutton.iabutton {
transition: background-color var(--time-commons-base) ease;
background-color: var(--color-alternative-ai-light);
border-radius: var(--percentage-100);
}
a.iconbutton.isparkles,
button.iconbutton.isparkles svg {
fill: var(--color-alternative-ai-base);
}
a.iconbutton.isparkles.active svg,
button.iconbutton.isparkles.active svg,
a.iconbutton.isparkles:hover svg,
button.iconbutton.isparkles:hover svg {
fill: var(--color-alternative-ai-dark);
}
a.iconbutton.isparkles.disable svg,
button.iconbutton.isparkles.disable svg {
fill: var(--color-primary-disable-dark);
}
/* IconButton: AI: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Button Group: Start */
.buttongroup {
align-items: center;
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
height: var(--layout-xxx-medium);
/* Placement: Start */
/* Bottom: Start */
/* Bottom: End */
/* Bottom-End: Start */
/* Bottom-End: End */
/* Bottom-Start: Start */
/* Bottom-Start: End */
/* Left: Start */
/* Left: End */
/* Left-End: Start */
/* Left-End: End */
/* Left-Start: Start */
/* Left-Start: End */
/* Top: Start */
/* Top: End */
/* Placement: End */
/* Button: Start */
/* Button: End */
}
.buttongroup[data-placement='bottom'],
.buttongroup[data-placement='bottom-end'],
.buttongroup[data-placement='bottom-start'],
.buttongroup[data-placement='left'],
.buttongroup[data-placement='left-end'],
.buttongroup[data-placement='left-start'],
.buttongroup[data-placement='right'],
.buttongroup[data-placement='right-end'],
.buttongroup[data-placement='right-start'],
.buttongroup[data-placement='top'],
.buttongroup[data-placement='top-end'],
.buttongroup[data-placement='top-start'] {
position: absolute;
z-index: 2;
}
.buttongroup[data-placement='bottom'] {
bottom: var(--layout-xxx-small);
}
.buttongroup[data-placement='bottom'],
.buttongroup[data-placement='top'] {
left: var(--percentage-50);
transform: translateX(var(--button-position-negative-50));
}
.buttongroup[data-placement='bottom-end'],
.buttongroup[data-placement='left-end'],
.buttongroup[data-placement='right'],
.buttongroup[data-placement='right-end'],
.buttongroup[data-placement='top-end'] {
left: auto;
right: var(--layout-xxx-small);
}
.buttongroup[data-placement='bottom-start'],
.buttongroup[data-placement='left'],
.buttongroup[data-placement='left-start'],
.buttongroup[data-placement='right-start'],
.buttongroup[data-placement='top-start'] {
left: var(--layout-xxx-small);
right: auto;
}
.buttongroup[data-placement='left'],
.buttongroup[data-placement='right'] {
top: var(--percentage-50);
transform: translateY(var(--button-position-negative-50));
}
.buttongroup[data-placement='left-end'],
.buttongroup[data-placement='right-end'] {
bottom: var(--layout-xxx-small);
top: auto;
}
.buttongroup[data-placement='left-start'],
.buttongroup[data-placement='right-start'] {
bottom: auto;
top: var(--layout-xxx-small);
}
.buttongroup[data-placement='top'] {
top: var(--layout-xxx-small);
}
.buttongroup button,
.buttongroup a {
border-left: solid var(--layout-border) var(--color-primary-border-base);
/* Direction: Start */
/* Direction: End */
}
.buttongroup button:first-child[dir='ltr'],
.buttongroup a:first-child[dir='ltr'],
.buttongroup button:last-child[dir='rtl'],
.buttongroup a:last-child[dir='rtl'] {
border-left: none;
}
.buttongroup button.contained,
.buttongroup a.contained,
.buttongroup button.default,
.buttongroup a.default,
.buttongroup button.outline,
.buttongroup a.outline {
border-radius: var(--layout-0);
}
/* Button Group: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* IconButton: Start */
a.iconbutton,
button.iconbutton {
display: inline-block;
position: relative;
text-indent: var(--text-indentation-negative);
/* AI: Start */
/* Icon: Variables: Start */
/* Variables: Start */
/* Variables: End */
/* Icon: Variables: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
/* AI: End */
/* Icon: Start */
/* Icon: End */
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* sMedium: Start */
/* sMedium: End */
/* xMedium: Start */
/* xMedium: End */
/* xxMedium: Start */
/* xxMedium: End */
/* Medium: End */
/* Small: Start */
/* xSmall: Start */
/* Debería ser ss */
/* xSmall: End */
/* xxSmall: Start */
/* xxSmall: End */
/* Small: End */
/* Size: End */
/* SVG: Start */
/* SVG: End */
/* States: Start */
/* Active: SVG: Start */
/* Active: SVG: End */
/* Disable: SVG: Start */
/* SPARKLES HAS DEPRECATED */
/* Disable: SVG: End */
/* States: End */
}
a.iconbutton[data-style='igoai'],
button.iconbutton[data-style='igoai'],
a.iconbutton[data-style='igoaisolid'],
button.iconbutton[data-style='igoaisolid'] {
background-color: var(--color-alternative-ai-light);
border-radius: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Hover: Icon: Start */
/* SVG: Start */
/* SVG: End */
/* Hover: Icon: End */
/* Disabled: Start */
/* Disabled: End */
/* Loading: Start */
/* Loading: End */
/* States: End */
}
a.iconbutton[data-style='igoai'] .icon,
button.iconbutton[data-style='igoai'] .icon,
a.iconbutton[data-style='igoaisolid'] .icon,
button.iconbutton[data-style='igoaisolid'] .icon {
animation: ai-button-icon-effect var(--ai-icon-button-animation-time) ease infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background: linear-gradient(var(--rotation-angle-221), var(--color-alternative-ai-dark), var(--ai-icon-button-background-color), var(--color-alternative-ai-base), var(--color-alternative-ai-light));
background-size: var(--ai-icon-button-background-size) var(--ai-icon-button-background-size);
mask: var(--ai-icon-button-svg);
/* SVG: Start */
/* SVG: End */
/* Variables: Start */
--ai-icon-button-animation-time: 1200ms;
--ai-icon-button-background-color: #7c00bb;
--ai-icon-button-background-size: 240%;
/* Variables: End */
}
a.iconbutton[data-style='igoai'] .icon svg,
button.iconbutton[data-style='igoai'] .icon svg,
a.iconbutton[data-style='igoaisolid'] .icon svg,
button.iconbutton[data-style='igoaisolid'] .icon svg {
opacity: var(--alpha-0);
}
a.iconbutton[data-style='igoai']:hover .icon,
button.iconbutton[data-style='igoai']:hover .icon,
a.iconbutton[data-style='igoaisolid']:hover .icon,
button.iconbutton[data-style='igoaisolid']:hover .icon,
a.iconbutton[data-style='igoai'][data-states='disable'] .icon,
button.iconbutton[data-style='igoai'][data-states='disable'] .icon,
a.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon,
button.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon {
background: none;
mask: none;
/* SVG: Start */
/* SVG: End */
}
a.iconbutton[data-style='igoai']:hover .icon svg,
button.iconbutton[data-style='igoai']:hover .icon svg,
a.iconbutton[data-style='igoaisolid']:hover .icon svg,
button.iconbutton[data-style='igoaisolid']:hover .icon svg,
a.iconbutton[data-style='igoai'][data-states='disable'] .icon svg,
button.iconbutton[data-style='igoai'][data-states='disable'] .icon svg,
a.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon svg,
button.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon svg {
opacity: var(--alpha-1);
}
a.iconbutton[data-style='igoai']:hover svg,
button.iconbutton[data-style='igoai']:hover svg,
a.iconbutton[data-style='igoaisolid']:hover svg,
button.iconbutton[data-style='igoaisolid']:hover svg {
fill: var(--color-alternative-ai-base);
}
a.iconbutton[data-style='igoai'][data-states='disable'],
button.iconbutton[data-style='igoai'][data-states='disable'],
a.iconbutton[data-style='igoaisolid'][data-states='disable'],
button.iconbutton[data-style='igoaisolid'][data-states='disable'] {
background-color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.iconbutton[data-style='igoai'][data-states='disable'] .icon svg,
button.iconbutton[data-style='igoai'][data-states='disable'] .icon svg,
a.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon svg,
button.iconbutton[data-style='igoaisolid'][data-states='disable'] .icon svg {
fill: var(--color-primary-disable-light);
}
a.iconbutton[data-style='igoai'][data-states='loading'],
button.iconbutton[data-style='igoai'][data-states='loading'],
a.iconbutton[data-style='igoaisolid'][data-states='loading'],
button.iconbutton[data-style='igoaisolid'][data-states='loading'] {
overflow: hidden;
padding-bottom: var(--layout-border);
padding-top: var(--layout-border);
position: relative;
z-index: 1;
/* Variables: Start */
--ai-badge-tag-animation-duration: 2s;
--ai-badge-tag-height-width: calc(var(--percentage-100) - var(--layout-half));
--ai-badge-tag-position-negative-value: -50%;
--ai-badge-tag-z-index-negative-value-1: -1;
--ai-badge-tag-z-index-negative-value-2: -2;
/* Variables: End */
}
a.iconbutton[data-style='igoai'][data-states='loading']::after,
button.iconbutton[data-style='igoai'][data-states='loading']::after,
a.iconbutton[data-style='igoaisolid'][data-states='loading']::after,
button.iconbutton[data-style='igoaisolid'][data-states='loading']::after,
a.iconbutton[data-style='igoai'][data-states='loading']::before,
button.iconbutton[data-style='igoai'][data-states='loading']::before,
a.iconbutton[data-style='igoaisolid'][data-states='loading']::before,
button.iconbutton[data-style='igoaisolid'][data-states='loading']::before {
content: var(--contentEmpty);
position: absolute;
}
a.iconbutton[data-style='igoai'][data-states='loading']::after,
button.iconbutton[data-style='igoai'][data-states='loading']::after,
a.iconbutton[data-style='igoaisolid'][data-states='loading']::after,
button.iconbutton[data-style='igoaisolid'][data-states='loading']::after {
background-color: var(--color-alternative-ai-light);
border-radius: var(--percentage-100);
bottom: var(--layout-border);
height: var(--ai-badge-tag-height-width);
left: var(--layout-border);
right: var(--layout-border);
top: var(--layout-border);
width: var(--ai-badge-tag-height-width);
z-index: var(--ai-badge-tag-z-index-negative-value-1);
}
a.iconbutton[data-style='igoai'][data-states='loading']::before,
button.iconbutton[data-style='igoai'][data-states='loading']::before,
a.iconbutton[data-style='igoaisolid'][data-states='loading']::before,
button.iconbutton[data-style='igoaisolid'][data-states='loading']::before {
animation: ai-rotate-tag var(--ai-badge-tag-animation-duration) linear infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
aspect-ratio: 1;
background: conic-gradient(var(--color-neutrals-transparent) var(--rotation-angle-270), var(--color-alternative-ai-base), var(--color-neutrals-transparent));
left: var(--percentage-50);
opacity: var(--alpha-0);
top: var(--percentage-50);
transform: translate(var(--ai-badge-tag-position-negative-value), var(--ai-badge-tag-position-negative-value));
width: var(--percentage-100);
z-index: var(--ai-badge-tag-z-index-negative-value-2);
}
a.iconbutton[data-style='igoai'] .icon,
button.iconbutton[data-style='igoai'] .icon {
--ai-icon-button-svg: url('data:image/svg+xml,\ ');
}
a.iconbutton[data-style='igoaisolid'] .icon,
button.iconbutton[data-style='igoaisolid'] .icon {
--ai-icon-button-svg: url('data:image/svg+xml,\ ');
}
a.iconbutton[data-style='igoaiassistant'][data-states='active'] svg,
button.iconbutton[data-style='igoaiassistant'][data-states='active'] svg {
fill: var(--color-alternative-ai-dark);
}
a.iconbutton[data-style='igoaiassistant']:hover svg,
button.iconbutton[data-style='igoaiassistant']:hover svg {
fill: var(--color-alternative-ai-base);
}
a.iconbutton .icon,
button.iconbutton .icon {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: fill var(--time-commons-base) ease;
}
a.iconbutton[data-size='l'],
button.iconbutton[data-size='l'] {
height: var(--layout-medium);
width: var(--layout-medium);
}
a.iconbutton[data-size='l'] .icon,
button.iconbutton[data-size='l'] .icon,
a.iconbutton[data-size='l'] svg,
button.iconbutton[data-size='l'] svg {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
a.iconbutton[data-size='m'],
button.iconbutton[data-size='m'] {
height: var(--layout-xxx-medium);
width: var(--layout-xxx-medium);
}
a.iconbutton[data-size='m'] .icon,
button.iconbutton[data-size='m'] .icon,
a.iconbutton[data-size='m'] svg,
button.iconbutton[data-size='m'] svg {
height: var(--layout-x-small);
width: var(--layout-x-small);
}
a.iconbutton[data-size='sm'],
button.iconbutton[data-size='sm'] {
height: var(--layout-xxxx-medium);
width: var(--layout-xxxx-medium);
}
a.iconbutton[data-size='sm'] .icon,
button.iconbutton[data-size='sm'] .icon,
a.iconbutton[data-size='sm'] svg,
button.iconbutton[data-size='sm'] svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
a.iconbutton[data-size='xm'],
button.iconbutton[data-size='xm'] {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
a.iconbutton[data-size='xm'] .icon,
button.iconbutton[data-size='xm'] .icon,
a.iconbutton[data-size='xm'] svg,
button.iconbutton[data-size='xm'] svg {
height: var(--layout-x-small);
width: var(--layout-x-small);
}
a.iconbutton[data-size='xxm'],
button.iconbutton[data-size='xxm'] {
height: var(--layout-x-medium);
width: var(--layout-x-medium);
}
a.iconbutton[data-size='xxm'] .icon,
button.iconbutton[data-size='xxm'] .icon,
a.iconbutton[data-size='xxm'] svg,
button.iconbutton[data-size='xxm'] svg {
height: var(--layout-small);
width: var(--layout-small);
}
a.iconbutton[data-size='s'],
button.iconbutton[data-size='s'] {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
a.iconbutton[data-size='s'] .icon,
button.iconbutton[data-size='s'] .icon,
a.iconbutton[data-size='s'] svg,
button.iconbutton[data-size='s'] svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
a.iconbutton[data-size='xs'],
button.iconbutton[data-size='xs'] {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
a.iconbutton[data-size='xs'] .icon,
button.iconbutton[data-size='xs'] .icon,
a.iconbutton[data-size='xs'] svg,
button.iconbutton[data-size='xs'] svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
a.iconbutton[data-size='xxs'],
button.iconbutton[data-size='xxs'] {
height: var(--layout-x-small);
width: var(--layout-x-small);
/* SVG: Start */
/* SVG: End */
}
a.iconbutton[data-size='xxs'] svg,
button.iconbutton[data-size='xxs'] svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
a.iconbutton svg,
button.iconbutton svg {
fill: var(--color-primary-icon-base);
}
a.iconbutton[data-states='active'] svg,
button.iconbutton[data-states='active'] svg,
a.iconbutton:hover svg,
button.iconbutton:hover svg {
fill: var(--color-primary-icon-dark);
}
a.iconbutton[data-states='disable'] svg,
button.iconbutton[data-states='disable'] svg,
a.iconbutton.isparkles[data-states='disable'] svg,
button.iconbutton.isparkles[data-states='disable'] svg,
a.iconbutton[data-style='igoaiassistant'][data-states='disable'] svg,
button.iconbutton[data-style='igoaiassistant'][data-states='disable'] svg,
a.iconbutton[data-style='igoaiassistant'][data-states='disable']:hover svg,
button.iconbutton[data-style='igoaiassistant'][data-states='disable']:hover svg {
fill: var(--color-primary-disable-dark);
}
/* IconButton: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Link: Start */
.link {
transition: color var(--time-commons-base) ease;
color: var(--color-primary-link-base);
display: inline;
/* Direction: Start */
/* Direction: End */
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Hover: Start */
/* Hover: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
/* SVG: Start */
/* SVG: End */
}
.link[dir='ltr'] {
text-align: left;
/* Icon: Start */
/* Icon: End */
/* Style: IconButton: Icon: Start */
/* Style: IconButton: Icon: End */
}
.link[dir='ltr'] .lileft {
margin-right: var(--layout-xxxxx-small);
}
.link[dir='ltr'] .liright {
margin-left: var(--layout-xxxxx-small);
}
.link[dir='ltr'].iconbutton .icon.lileft {
margin-right: var(--layout-0);
}
.link[dir='rtl'] {
text-align: right;
/* Icon: Start */
/* Icon: End */
/* Style: IconButton: Icon: Start */
/* Style: IconButton: Icon: End */
}
.link[dir='rtl'] .lileft {
margin-left: var(--layout-xxxxx-small);
}
.link[dir='rtl'] .liright {
margin-right: var(--layout-xxxxx-small);
}
.link[dir='rtl'].iconbutton .icon.lileft {
margin-left: var(--layout-0);
}
.link .icon {
vertical-align: middle;
}
.link:hover {
color: var(--color-primary-link-dark);
/* SVG: Start */
/* SVG: End */
/* Style: Contained: Start */
/* Style: Contained: End */
}
.link:hover svg {
fill: var(--color-primary-link-dark);
}
.link:hover.contained {
color: var(--color-neutrals-white);
/* SVG: Start */
/* SVG: End */
}
.link:hover.contained svg {
fill: var(--color-neutrals-white);
}
.link[data-states='disable'] {
color: var(--color-primary-disable-dark);
/* SVG: Start */
/* SVG: End */
/* Style: Contained: Start */
/* Style: Contained: End */
}
.link[data-states='disable'] svg {
fill: var(--color-primary-disable-dark);
}
.link[data-states='disable'].contained {
color: var(--color-neutrals-white);
/* SVG: Start */
/* SVG: End */
}
.link[data-states='disable'].contained svg {
fill: var(--color-neutrals-white);
}
.link svg {
transition: fill var(--time-commons-base) ease;
fill: var(--color-primary-link-base);
}
/* Link: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Split Button: Start */
.splitbutton {
align-items: center;
display: flex;
height: var(--layout-xxx-medium);
overflow: visible;
/* Contained: Start */
/* Direction: Start */
/* Direction: End */
/* IconButton: Start */
/* IconButton: End */
/* Contained: End */
/* Default: IconButton: Start */
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
/* SVG: End */
/* Default: IconButton: End */
/* Outline: IconButton: Start */
/* Outline: IconButton: End */
}
.splitbutton button.contained[dir='ltr'],
.splitbutton button.default[dir='ltr'],
.splitbutton button.outline[dir='ltr'] {
border-bottom-right-radius: var(--layout-0);
border-top-right-radius: var(--layout-0);
}
.splitbutton button.contained[dir='ltr'] + .iconbutton,
.splitbutton button.default[dir='ltr'] + .iconbutton,
.splitbutton button.outline[dir='ltr'] + .iconbutton {
border-bottom-right-radius: var(--layout-base);
border-top-right-radius: var(--layout-base);
}
.splitbutton button.contained[dir='rtl'],
.splitbutton button.default[dir='rtl'],
.splitbutton button.outline[dir='rtl'] {
border-bottom-left-radius: var(--layout-0);
border-top-left-radius: var(--layout-0);
}
.splitbutton button.contained[dir='rtl'] + .iconbutton,
.splitbutton button.default[dir='rtl'] + .iconbutton,
.splitbutton button.outline[dir='rtl'] + .iconbutton {
border-bottom-left-radius: var(--layout-base);
border-top-left-radius: var(--layout-base);
}
.splitbutton button.contained + .iconbutton {
transition: background-color var(--time-commons-base) ease;
background-color: var(--color-primary-primary-base);
border-left: solid var(--layout-half) var(--color-primary-border-light);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.splitbutton button.contained + .iconbutton[dir='ltr'] {
border-left: solid var(--layout-half) var(--color-primary-border-light);
}
.splitbutton button.contained + .iconbutton[dir='rtl'] {
border-right: solid var(--layout-half) var(--color-primary-border-light);
}
.splitbutton button.contained + .iconbutton svg {
fill: var(--color-neutrals-white);
}
.splitbutton button.contained + .iconbutton[data-states='disable'] {
background-color: var(--color-primary-disable-dark);
}
.splitbutton button.contained + .iconbutton:hover {
background-color: var(--color-primary-primary-dark);
/* SVG: Start */
/* SVG: End */
}
.splitbutton button.contained + .iconbutton:hover svg {
fill: var(--color-neutrals-white);
}
.splitbutton button.default + .iconbutton[dir='ltr'] {
border-left: solid var(--layout-half) var(--color-primary-border-base);
}
.splitbutton button.default + .iconbutton[dir='rtl'] {
border-right: solid var(--layout-half) var(--color-primary-border-base);
}
.splitbutton button.default + .iconbutton svg,
.splitbutton button.outline + .iconbutton svg {
fill: var(--color-primary-primary-base);
}
.splitbutton button.default + .iconbutton[data-states='disable'],
.splitbutton button.outline + .iconbutton[data-states='disable'] {
border-color: var(--color-primary-disable-dark);
}
.splitbutton button.default + .iconbutton[data-states='disable'] svg,
.splitbutton button.outline + .iconbutton[data-states='disable'] svg {
fill: var(--color-primary-disable-dark);
}
.splitbutton button.default + .iconbutton:hover svg,
.splitbutton button.outline + .iconbutton:hover svg {
fill: var(--color-primary-primary-dark);
}
.splitbutton button.outline + .iconbutton {
transition: border-color var(--time-commons-base) ease;
border: solid var(--layout-border) var(--color-primary-primary-base);
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.splitbutton button.outline + .iconbutton[data-states='disable'] {
border-color: var(--color-primary-disable-dark);
}
.splitbutton button.outline + .iconbutton:hover {
border-color: var(--color-primary-primary-dark);
}
/* Split Button: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
a,
button {
--button-position-negative-50: -50%;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
a,
button {
user-select: none;
cursor: pointer;
font-family: Inter, Helvetica, Arial, sans-serif;
height: auto;
text-decoration: none;
width: auto;
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Focus Visible: Start */
/* Focus Visible: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
a[data-states='disable'],
button[data-states='disable'],
a[data-states='loading'],
button[data-states='loading'] {
cursor: default;
pointer-events: none;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
box-shadow: none;
}
a:focus-visible,
button:focus-visible {
box-shadow: inset var(--layout-0) var(--layout-0) var(--layout-base) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-100));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
a:hover,
button:hover,
a:focus,
button:focus {
text-decoration: none;
}
button {
background: none;
border: none;
padding: var(--layout-0);
}
/* Image: Start */
a img {
border: none;
}
/* Image: End */
/* Data-Type: Button: States: Focus Visible: Start */
[data-type='button']:focus:not(:focus-visible) {
box-shadow: none;
}
[data-type='button']:focus-visible {
box-shadow: inset var(--layout-0) var(--layout-0) var(--layout-base) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-100));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
/* Data-Type: Button: States: Focus Visible: End */
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Container: Start */
.avatarcontainer {
position: relative;
}
/* Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.avatar {
--avatar-l-line-height: 4rem;
/* 64px */
--avatar-l-xl-font-size: 1.5rem;
/* 24px */
--avatar-m-line-height: 2.25rem;
/* 36px */
--avatar-s-line-height: 2rem;
/* 32px */
--avatar-xl-height: 5rem;
/* 80px */
--avatar-xl-line-height: 5rem;
/* 80px */
--avatar-xs-font-size: 0.5rem;
/* 8px */
--avatar-xs-line-height: 1.5rem;
/* 24px */
--avatar-xxl-font-size: 2rem;
/* 32px */
--avatar-xxl-height: 6.25rem;
/* 100px */
--avatar-xxl-line-height: 6.25rem;
/* 100px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Avatar: Start */
.avatar {
display: inline-block;
overflow: hidden;
text-align: center;
text-transform: uppercase;
/* Button: start */
/* Button: End */
/* Icon: Start */
/* Icon: End */
/* Image: Start */
/* Image: End */
/* Shape: Start */
/* Round: Start */
/* Round: End */
/* Square: Start */
/* Square: End */
/* Shape: End */
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xLarge: Start */
/* xLarge: End */
/* xSmall: Start */
/* xSmall: End */
/* xxLarge: Start */
/* xxLarge: End */
/* xsSmall: Start */
/* xsSmall: End */
/* Size: End */
}
.avatar button,
.avatar .icon,
.avatar img {
display: block;
}
.avatar button,
.avatar .icon {
height: var(--percentage-100);
width: var(--percentage-100);
}
.avatar .icon {
background-color: var(--color-neutrals-transparent);
position: relative;
/* SVG: Start */
/* SVG: End */
}
.avatar .icon svg {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
fill: var(--color-primary-icon-base);
}
.avatar img {
height: var(--percentage-100);
resize: both;
width: var(--percentage-100);
}
.avatar[data-shape='round'] {
border-radius: var(--percentage-100);
/* Placeholder: Round: Start */
/* Placeholder: Round: End */
}
.avatar[data-shape='round'] .placeholder[data-shape='round'] {
height: var(--percentage-100);
width: var(--percentage-100);
}
.avatar[data-shape='square'] {
border-radius: var(--layout-base);
/* Placeholder: Square: Start */
/* Placeholder: Square: End */
}
.avatar[data-shape='square'] .placeholder[data-shape='square'] {
height: var(--percentage-100);
width: var(--percentage-100);
}
.avatar[data-size='l'],
.avatar[data-size='xl'] {
font-size: var(--avatar-l-xl-font-size);
}
.avatar[data-size='l'] {
height: var(--layout-xx-large);
line-height: var(--avatar-l-line-height);
width: var(--layout-xx-large);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='l'] .icon svg {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
.avatar[data-size='m'],
.avatar[data-size='s'] {
font-size: var(--font-x-small-size);
}
.avatar[data-size='m'] {
height: var(--layout-xxx-medium);
line-height: var(--avatar-m-line-height);
width: var(--layout-xxx-medium);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='m'] .icon svg {
height: var(--layout-x-small);
width: var(--layout-x-small);
}
.avatar[data-size='s'] {
height: var(--layout-xxxx-medium);
line-height: var(--avatar-s-line-height);
width: var(--layout-xxxx-medium);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='s'] .icon svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
.avatar[data-size='xl'] {
height: var(--avatar-xl-height);
line-height: var(--avatar-xl-line-height);
width: var(--avatar-xl-height);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='xl'] .icon svg {
height: var(--layout-xxxx-large);
width: var(--layout-xxxx-large);
}
.avatar[data-size='xs'] {
font-size: var(--avatar-xs-font-size);
height: var(--layout-x-small);
line-height: var(--avatar-xs-line-height);
width: var(--layout-x-small);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='xs'] .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
.avatar[data-size='xxl'] {
font-size: var(--avatar-xxl-font-size);
height: var(--avatar-xxl-height);
line-height: var(--avatar-xxl-line-height);
width: var(--avatar-xxl-height);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='xxl'] .icon svg {
height: var(--layout-large);
width: var(--layout-large);
}
.avatar[data-size='xxs'] {
font-size: var(--avatar-xs-font-size);
height: var(--layout-xx-small);
line-height: var(--avatar-xs-line-height);
width: var(--layout-xx-small);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-size='xxs'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
/* Avatar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Popup: Start */
.popup {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
/* Popup: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tooltip: Start */
.tooltip {
font-size: var(--font-xx-small-size);
line-height: var(--font-xx-small-line-height);
padding-bottom: var(--layout-xxxxx-small);
padding-top: var(--layout-xxxxx-small);
position: relative;
/* Data Popper Arrow: Start */
/* Data Popper Arrow: End */
/* Placement: Start */
/* Bottom: Start */
/* Bottom: End */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* Top: Start */
/* Top: End */
/* Placement: End */
}
.tooltip [data-popper-arrow] {
height: var(--layout-xxxx-small);
overflow: hidden;
pointer-events: none;
text-align: left;
width: var(--layout-xxxx-small);
z-index: -1;
/* Direction: Start */
/* Direction: End */
}
.tooltip [data-popper-arrow]::after,
.tooltip [data-popper-arrow]::before {
content: var(--contentEmpty);
}
.tooltip [data-popper-arrow][dir='ltr'] {
text-indent: var(--text-indentation-negative);
}
.tooltip [data-popper-arrow][dir='rtl'] {
text-indent: var(--text-indentation-negative-right);
}
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow] {
top: var(--tooltip-position-top-negative);
}
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::before {
position: absolute;
top: var(--layout-0);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--layout-0));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
border-bottom-style: solid;
border-bottom-width: var(--layout-base);
}
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::after {
border-bottom-color: var(--color-primary-border-light);
}
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::before {
border-bottom-color: var(--color-secondary-shadow-base);
}
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]::before,
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::before {
border-left: solid var(--layout-xxxxx-small) var(--color-neutrals-transparent);
border-right: solid var(--layout-xxxxx-small) var(--color-neutrals-transparent);
}
.tooltip[data-popper-placement^='left'] > [data-popper-arrow] {
right: var(--tooltip-position-right-negative);
}
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::before {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: auto;
bottom: auto;
right: var(--layout-0);
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--layout-0), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
border-left-style: solid;
border-left-width: var(--layout-base);
}
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::after {
border-left-color: var(--color-primary-border-light);
}
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::before {
border-left-color: var(--color-secondary-shadow-base);
}
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='left'] > [data-popper-arrow]::before,
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::before {
border-bottom: solid var(--layout-xxxxx-small) var(--color-neutrals-transparent);
border-top: solid var(--layout-xxxxx-small) var(--color-neutrals-transparent);
}
.tooltip[data-popper-placement^='right'] > [data-popper-arrow] {
left: var(--tooltip-position-left-negative);
}
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::before {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--layout-0);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--layout-0), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
border-right-style: solid;
border-right-width: var(--layout-base);
}
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::after {
border-right-color: var(--color-primary-border-light);
}
.tooltip[data-popper-placement^='right'] > [data-popper-arrow]::before {
border-right-color: var(--color-secondary-shadow-base);
}
.tooltip[data-popper-placement^='top'] > [data-popper-arrow] {
bottom: var(--tooltip-position-bottom-negative);
}
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::after,
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::before {
position: absolute;
top: auto;
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: var(--layout-0);
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--layout-0));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
border-top-style: solid;
border-bottom-width: var(--layout-base);
}
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::after {
border-top-color: var(--color-primary-border-light);
}
.tooltip[data-popper-placement^='top'] > [data-popper-arrow]::before {
border-top-color: var(--color-secondary-shadow-base);
}
/* Tooltip: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.tooltip,
.popup {
--text-indentation-negative-right: 99999px;
--tooltip-position-bottom-negative: -0.25rem;
/* -4px */
--tooltip-position-left-negative: -0.25rem;
/* -4px */
--tooltip-position-right-negative: -0.25rem;
/* -4px */
--tooltip-position-top-negative: -0.25rem;
/* -4px */
--tooltip-popup-box-shadow-color-b: 135;
--tooltip-popup-box-shadow-color-g: 125;
--tooltip-popup-box-shadow-color-r: 96;
--tooltip-popup-max-width: 12rem;
/* 192px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.tooltip,
.popup {
box-shadow: var(--shadow-0) var(--shadow-medium-y) var(--shadow-medium-b) rgba(var(--tooltip-popup-box-shadow-color-r), var(--tooltip-popup-box-shadow-color-g), var(--tooltip-popup-box-shadow-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
color: var(--color-primary-text-base);
max-width: var(--tooltip-popup-max-width);
opacity: var(--alpha-0);
padding-left: var(--layout-xxxxx-small);
padding-right: var(--layout-xxxxx-small);
pointer-events: none;
z-index: 2;
/* Ai: Start */
/* Ai: End */
/* States: Active: Start */
/* States: Active: End */
}
.tooltip.tai,
.popup.tai {
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-45), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-228), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto, auto, auto, auto;
}
.tooltip[data-states='active'],
.popup[data-states='active'] {
opacity: var(--alpha-100);
pointer-events: all;
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Container: Start */
.chipcontainer {
align-items: center;
display: flex;
gap: var(--layout-xxxx-small);
overflow: visible;
width: var(--percentage-100);
}
/* Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.chip {
--chip-line-height: 1.75rem;
/* 28px */
--chip-shadow-rgba-color-a: 0.4;
--chip-shadow-rgba-color-b: 135;
--chip-shadow-rgba-color-g: 125;
--chip-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Chip: Start */
.chip,
.link.chip {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
align-items: center;
background-color: var(--color-secondary-alert-base);
border-radius: var(--layout-xxxx-medium);
display: flex;
gap: var(--layout-xxxxx-small);
height: var(--layout-xxxx-medium);
line-height: var(--chip-line-height);
padding: var(--layout-base);
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Hover: Start */
/* Hover: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* Read Only: Start */
/* Read Only: End */
/* States: End */
/* Styles: Start */
/* Border: Start */
/* Border: End */
/* Light: Start */
/* Light: End */
/* Shadow: Start */
/* Shadow: End */
/* Styles: End */
/* Typography: Caption: Start */
/* Typography: Caption: End */
}
.chip .icon,
.link.chip .icon {
border-radius: var(--percentage-100);
/* SVG: Start */
/* SVG: End */
}
.chip .icon svg,
.link.chip .icon svg {
transition: fill var(--time-commons-base) ease;
}
.chip[data-states='active'],
.link.chip[data-states='active'] {
background-color: var(--color-secondary-list-base);
color: var(--color-primary-link-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.chip[data-states='active'] .icon svg,
.link.chip[data-states='active'] .icon svg {
fill: var(--color-primary-link-dark);
}
.chip[data-states='disable'],
.link.chip[data-states='disable'] {
cursor: default;
color: var(--color-primary-disable-dark);
pointer-events: none;
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.chip[data-states='disable'] .icon svg,
.link.chip[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.chip:hover,
.link.chip:hover {
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.chip:hover .icon svg,
.link.chip:hover .icon svg {
fill: var(--color-primary-icon-dark);
}
.chip[data-states='readonly'],
.link.chip[data-states='readonly'] {
cursor: default;
pointer-events: none;
}
.chip[data-style='border'],
.link.chip[data-style='border'] {
border: solid var(--layout-border) var(--color-primary-border-base);
}
.chip[data-style='light'],
.link.chip[data-style='light'] {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--chip-shadow-rgba-color-r), var(--chip-shadow-rgba-color-g), var(--chip-shadow-rgba-color-b), var(--chip-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
/* States: Active: Start */
/* States: Active: End */
}
.chip[data-style='light'][data-states='active'],
.link.chip[data-style='light'][data-states='active'] {
background-color: var(--color-secondary-list-base);
}
.chip[data-style='shadow'],
.link.chip[data-style='shadow'] {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--chip-shadow-rgba-color-r), var(--chip-shadow-rgba-color-g), var(--chip-shadow-rgba-color-b), var(--chip-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
}
.chip [data-style='typocaption'],
.link.chip [data-style='typocaption'] {
flex: 1;
font-style: normal;
/* Direction: Start */
/* Direction: End */
}
.chip [data-style='typocaption'][dir='ltr']:first-child,
.link.chip [data-style='typocaption'][dir='ltr']:first-child {
margin-left: var(--layout-base);
}
.chip [data-style='typocaption'][dir='rtl']:first-child,
.link.chip [data-style='typocaption'][dir='rtl']:first-child {
margin-right: var(--layout-base);
}
.chip [data-style='typocaption'][dir='ltr']:last-child,
.link.chip [data-style='typocaption'][dir='ltr']:last-child {
margin-right: var(--layout-base);
}
.chip [data-style='typocaption'][dir='rtl']:last-child,
.link.chip [data-style='typocaption'][dir='rtl']:last-child {
margin-left: var(--layout-base);
}
/* Chip: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Actions: Start */
.actions {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
overflow: visible;
/* Action: Start */
/* Action: End */
/* Placement: Start */
/* Left: Start */
/* Direction: Start */
/* Direction: End */
/* Left: End */
/* Right: Direction: Start */
/* Right: Direction: End */
/* Placement: End */
}
.actions .action {
list-style: none;
overflow: visible;
position: relative;
}
.actions[data-placement='left'],
.actions[data-placement='right'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
z-index: 3;
}
.actions[data-placement='left'][dir='ltr'] {
left: var(--layout-0);
}
.actions[data-placement='left'][dir='rtl'] {
right: var(--layout-0);
}
.actions[data-placement='right'][dir='ltr'] {
right: var(--layout-0);
}
.actions[data-placement='right'][dir='rtl'] {
left: var(--layout-0);
}
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* List Item: Start */
.listitem {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
gap: var(--layout-xxxxx-small);
padding: var(--layout-xxxx-small);
position: relative;
/* Button & Link: Start */
/* Button & Link: End */
/* Actions: Direction: Start */
/* Actions: Direction: End */
/* Avatar: Start */
/* Image: Start */
/* Image: End */
/* Avatar: End */
/* Date: Start */
/* Date: End */
/* Direction: Start */
/* Direction: End */
/* Icon: Link: SVG: Start */
/* Icon: Link: SVG: End */
/* Inside: Start */
/* Inside: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* Inactive: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Typography: Start */
/* Typography: End */
/* Inactive: End */
/* States: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Text: Start */
/* Text: End */
/* Typography: End */
}
.listitem[data-type='button'],
.listitem[data-type='link'] {
cursor: pointer;
}
.listitem:last-child {
border-bottom: none;
}
.listitem .actions[data-placement='left'][dir='ltr'] {
left: var(--layout-xxxx-small);
}
.listitem .actions[data-placement='right'][dir='ltr'] {
right: var(--layout-xxxx-small);
}
.listitem .actions[data-placement='left'][dir='rtl'] {
right: var(--layout-xxxx-small);
}
.listitem .actions[data-placement='right'][dir='rtl'] {
left: var(--layout-xxxx-small);
}
.listitem img {
border-radius: var(--layout-base);
}
.listitem .lidate {
align-items: center;
background-color: var(--color-secondary-list-base);
border-radius: var(--layout-base);
display: flex;
flex-flow: row wrap;
height: var(--layout-xxx-medium);
justify-content: center;
padding: var(--layout-half) var(--layout-base);
width: var(--layout-xxx-medium);
/* Typography: Start */
/* Specials: Start */
/* Specials: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
.listitem .lidate [data-style='typospecials'],
.listitem .lidate [data-style='typotitle3'] {
transition: color var(--time-commons-base) ease;
color: var(--color-primary-primary-base);
}
.listitem .lidate [data-style='typotitle3'] {
line-height: var(--font-x-small-line-height);
}
.listitem[dir='ltr'] {
text-align: left;
}
.listitem[dir='rtl'] {
text-align: right;
}
.listitem .link .icon svg {
fill: var(--color-primary-icon-base);
}
.listitem .linside {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
width: inherit;
}
.listitem .placeholder[data-shape='line'] {
margin-bottom: var(--layout-base);
}
.listitem[data-states='active'] {
background-color: var(--color-secondary-list-base);
}
.listitem[data-states='disable'] {
cursor: default;
pointer-events: none;
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Typography: Start */
/* Typography: End */
}
.listitem[data-states='disable'] .icon svg,
.listitem[data-states='disable'] .link .icon svg {
fill: var(--color-primary-disable-dark);
}
.listitem[data-states='disable'] .lcaption,
.listitem[data-states='disable'] .lspecials,
.listitem[data-states='disable'] .ltext,
.listitem[data-states='disable'] .ltimeframe,
.listitem[data-states='disable'] .ltitle {
color: var(--color-primary-disable-dark);
}
.listitem[data-type='button']:hover,
.listitem[data-type='link']:hover {
background-color: var(--color-secondary-list-base);
/* Date: Typography: Specials: Start */
/* Date: Typography: Specials: End */
}
.listitem[data-type='button']:hover .lidate [data-style='typospecials'],
.listitem[data-type='link']:hover .lidate [data-style='typospecials'],
.listitem[data-type='button']:hover .lidate [data-style='typotitle3'],
.listitem[data-type='link']:hover .lidate [data-style='typotitle3'] {
color: var(--color-primary-primary-dark);
}
.listitem[data-states='inactive'] .icon svg,
.listitem[data-states='inactive'] .link .icon svg {
fill: var(--color-primary-disable-dark);
}
.listitem[data-states='inactive'] .lcaption,
.listitem[data-states='inactive'] .lspecials,
.listitem[data-states='inactive'] .ltext,
.listitem[data-states='inactive'] .ltimeframe,
.listitem[data-states='inactive'] .ltitle {
color: var(--color-primary-disable-dark);
}
.listitem .lcaption,
.listitem .lspecials,
.listitem .ltext,
.listitem .ltimeframe,
.listitem .ltitle {
width: var(--percentage-100);
}
.listitem .ltext {
font-style: normal;
}
/* List Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* List: Column: Start */
.listcontainer.column {
display: flex;
flex-flow: row wrap;
/* List Item: Start */
/* List Item: End */
}
.listcontainer.column .listitem {
width: var(--percentage-50);
}
/* List: Column: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.badge {
--badge-max-width: 8rem;
/* 128px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Badge: Start */
.badge {
align-items: center;
display: flex;
font-weight: var(--font-xx-small-weight);
gap: var(--layout-base);
padding-left: var(--layout-base);
padding-right: var(--layout-base);
text-align: center;
/* Color: Start */
/* Color: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* Shape: Start */
/* Round: Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xSmall: Start */
/* xSmall: End */
/* Round: Size: End */
/* Square: Start */
/* Square: End */
/* Shape: End */
/* Size: Start */
/* Large: Icon: Start */
/* Large: Icon: End */
/* Medium: Icon: Start */
/* Medium: Icon: End */
/* Small: Icon: Start */
/* Icon: End */
/* Small: Icon: End */
/* xSmall: Icon: Start */
/* xSmall: Icon End */
/* Size: End */
/* Text: Start */
/* Text: End */
}
.badge[data-background='black'] {
background-color: var(--color-neutrals-black);
color: var(--color-neutrals-white);
}
.badge[data-background='blue'] {
background-color: var(--color-blue-500);
color: var(--color-neutrals-white);
}
.badge[data-background='blue-grey'] {
background-color: var(--color-blue-grey-500);
color: var(--color-neutrals-black);
}
.badge[data-background='corn-flower'] {
background-color: var(--color-corn-flower-blue-500);
color: var(--color-neutrals-black);
}
.badge[data-background='dim-blue-grey'] {
background-color: var(--color-dim-blue-grey-700);
color: var(--color-neutrals-white);
}
.badge[data-background='gainsboro'] {
background-color: var(--color-gainsboro-700);
color: var(--color-neutrals-black);
}
.badge[data-background='ghost-white'] {
background-color: var(--color-ghost-white-700);
color: var(--color-neutrals-black);
}
.badge[data-background='green'] {
background-color: var(--color-green-700);
color: var(--color-neutrals-black);
}
.badge[data-background='grey'] {
background-color: var(--color-grey-600);
color: var(--color-neutrals-white);
}
.badge[data-background='ligth-blue'] {
background-color: var(--color-light-blue-700);
color: var(--color-neutrals-black);
}
.badge[data-background='ligth-sky-blue'] {
background-color: var(--color-light-sky-blue-700);
color: var(--color-neutrals-black);
}
.badge[data-background='linen'] {
background-color: var(--color-linen-700);
color: var(--color-neutrals-black);
}
.badge[data-background='misty-rose'] {
background-color: var(--color-misty-rose-700);
color: var(--color-neutrals-black);
}
.badge[data-background='orange'] {
background-color: var(--color-orange-500);
color: var(--color-neutrals-black);
}
.badge[data-background='pale-green'] {
background-color: var(--color-pale-green-700);
color: var(--color-neutrals-black);
}
.badge[data-background='red'] {
background-color: var(--color-red-700);
color: var(--color-neutrals-white);
}
.badge[data-background='slateblue-grey'] {
background-color: var(--color-slate-blue-grey-700);
color: var(--color-neutrals-white);
}
.badge[data-background='transparent'] {
background-color: var(--color-transparent);
color: var(--color-primary-text-base);
}
.badge[data-background='violet'] {
background-color: var(--color-violet-700);
color: var(--color-neutrals-white);
}
.badge[data-background='white'] {
background-color: var(--color-neutrals-white);
color: var(--color-primary-text-base);
}
.badge .placeholder[data-shape='line'] {
position: relative;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
min-width: var(--layout-xxxxx-small);
}
.badge[data-shape='round'][data-size='l'],
.badge[data-shape='round'][data-size='m'],
.badge[data-shape='round'][data-size='s'] {
max-width: var(--layout-xx-medium);
}
.badge[data-shape='round'][data-size='l'] {
border-radius: var(--layout-x-small);
font-size: var(--font-x-small-size);
height: var(--layout-x-small);
line-height: var(--font-xx-large-line-height);
min-width: var(--layout-x-small);
}
.badge[data-shape='round'][data-size='m'],
.badge[data-shape='round'][data-size='s'] {
font-size: var(--font-xx-small-size);
}
.badge[data-shape='round'][data-size='m'] {
border-radius: var(--layout-xx-small);
height: var(--layout-xx-small);
line-height: var(--font-medium-line-height);
min-width: var(--layout-xx-small);
}
.badge[data-shape='round'][data-size='s'] {
border-radius: var(--layout-xxx-small);
height: var(--layout-xxx-small);
line-height: var(--font-small-line-height);
min-width: var(--layout-xxx-small);
}
.badge[data-shape='round'][data-size='xs'] {
border-radius: var(--layout-xxxx-small);
height: var(--layout-xxxx-small);
line-height: var(--font-xx-small-line-height);
min-width: var(--layout-xxxx-small);
}
.badge[data-shape='square'] {
border-radius: var(--layout-base);
font-size: var(--font-xx-small-size);
line-height: var(--font-medium-line-height);
max-width: var(--badge-max-width);
}
.badge[data-size='l'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
.badge[data-size='l'] .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
.badge[data-size='m'] .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
.badge[data-size='m'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
.badge[data-size='s'] .icon {
height: var(--layout-xxxxx-small);
width: var(--layout-xxxxx-small);
/* SVG: Start */
/* SVG: End */
}
.badge[data-size='s'] .icon svg {
height: var(--layout-xxxxx-small);
width: var(--layout-xxxxx-small);
}
.badge[data-size='xs'] .icon {
height: var(--layout-base);
width: var(--layout-base);
/* SVG: Start */
/* SVG: End */
}
.badge[data-size='xs'] .icon svg {
height: var(--layout-base);
width: var(--layout-base);
}
.badge .btext {
margin-left: auto;
margin-right: auto;
}
.badge[hidden] {
text-indent: var(--text-indentation-negative);
}
/* Badge: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.containerarea {
--animation-enter-down-leave: 300ms;
--container-area-collapsable-horizontal-max-width: 32rem;
/* 512px */
--container-area-color-b: 135;
--container-area-color-g: 125;
--container-area-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Container Area: Start */
.containerarea {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
pointer-events: none;
visibility: hidden;
/* Animation: Start */
/* Collapsable Horizontal: Start */
/* Collapsable Horizontal: End */
/* Collapsable Vertical: Start */
/* Collapsable Vertical: End */
/* Fade: Start */
/* Fade: End */
/* Animation: End */
/* Placement: Start */
/* Placement: End */
/* Shadow: Start */
/* Shadow: End */
/* States: Visible: Start */
/* States: Visible: End */
}
.containerarea ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.containerarea ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.containerarea ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
.containerarea[data-animation='collapsable-horizontal'],
.containerarea[data-popper-placement^='left'],
.containerarea[data-popper-placement^='right'] {
max-height: var(--viewport-height-30);
/* List Container: Start */
/* List Container: End */
/* States: Visible: List Container: Start */
/* States: Visible: List Container: End */
}
.containerarea[data-animation='collapsable-horizontal'] .listcontainer,
.containerarea[data-popper-placement^='left'] .listcontainer,
.containerarea[data-popper-placement^='right'] .listcontainer {
transition: clip-path var(--time-commons-base) ease;
clip-path: inset(var(--layout-0));
}
.containerarea[data-animation='collapsable-horizontal'][data-states='visible'] .listcontainer,
.containerarea[data-popper-placement^='left'][data-states='visible'] .listcontainer,
.containerarea[data-popper-placement^='right'][data-states='visible'] .listcontainer {
clip-path: inset(var(--percentage-100));
}
.containerarea[data-animation='collapsable-vertical'],
.containerarea[data-popper-placement^='bottom'],
.containerarea[data-popper-placement^='top'] {
max-height: var(--viewport-height-30);
/* States: Visible: List Container: Start */
/* States: Visible: List Container: End */
}
.containerarea[data-animation='collapsable-vertical'][data-states='visible'] .listcontainer,
.containerarea[data-popper-placement^='bottom'][data-states='visible'] .listcontainer,
.containerarea[data-popper-placement^='top'][data-states='visible'] .listcontainer {
animation: down-enter var(--animation-enter-down-leave) 1 forwards;
animation-play-state: running;
/* Variables: Start */
--animation-duration: 1s;
/* Variables: End */
}
.containerarea[data-animation='fade'] {
transition: opacity var(--time-commons-base) ease;
opacity: var(--alpha-0);
/* States: Visible: Start */
/* States: Visible: End */
}
.containerarea[data-animation='fade'][data-states='visible'] {
opacity: var(--alpha-100);
}
.containerarea[data-popper-placement^='bottom'],
.containerarea[data-popper-placement^='left'],
.containerarea[data-popper-placement^='right'],
.containerarea[data-popper-placement^='top'] {
position: absolute;
z-index: 3;
}
.containerarea[data-style='ddshadow'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--container-area-color-r), var(--container-area-color-g), var(--container-area-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
z-index: 9;
}
.containerarea[data-states='visible'] {
pointer-events: all;
visibility: visible;
}
/* Container Area: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.containerarea[data-style='dddefault'],
.containerarea[data-style='ddshadow'] {
--drop-down-position-bottom-top-min-width: 8rem;
/* 128px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* DropDown: Start */
.dropdown {
position: relative;
/* Container Area: Start */
/* ListItem: States: Disable: Start */
/* ListItem: States: Disable: End */
/* Placement: Start */
/* Bottom & Top: Start */
/* Bottom & Top: End */
/* Left & Right: Start */
/* Left & Right: End */
/* Placement: End */
/* Container Area: End */
/* Inside: Start */
/* Inside: End */
}
.dropdown + .containerarea .listitem[data-states='disable'] {
pointer-events: all;
}
.dropdown + .containerarea[data-popper-placement^='bottom'],
.dropdown + .containerarea[data-popper-placement^='top'] {
min-width: var(--drop-down-position-bottom-top-min-width);
}
.dropdown + .containerarea[data-popper-placement^='left'],
.dropdown + .containerarea[data-popper-placement^='right'] {
min-height: var(--layout-x-medium);
}
.dropdown .binside {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
.containerarea[data-style='dddefault'][data-popper-placement^='bottom'],
.containerarea[data-style='dddefault'][data-popper-placement^='top'] {
min-width: var(--drop-down-position-bottom-top-min-width);
}
.containerarea[data-style='dddefault'][data-popper-placement^='left'],
.containerarea[data-style='dddefault'][data-popper-placement^='right'] {
min-height: var(--layout-x-medium);
}
/* DropDown: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Divider: Start */
.divider {
background-color: var(--color-primary-border-base);
border: none;
height: var(--layout-border);
/* Style: Start */
/* Horizontal: Start */
/* Horizontal: End */
/* Vertical: Start */
/* Vertical: End */
/* Style: End */
}
.divider[data-style='dhorizontal'] {
height: var(--layout-border);
width: var(--percentage-100);
}
.divider[data-style='dvertical'] {
transform: rotate(var(--rotation-angle-90));
}
/* Divider: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Image: Start */
figure.icontainer {
display: flex;
position: relative;
/* Image: Start */
/* Image: End */
}
figure.icontainer img {
display: block;
}
/* Image: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.placeholder {
--placeholder-l-xl-font-size: 1.5rem;
/* 24px; */
--placeholder-l-line-height: 4rem;
/* 64px; */
--placeholder-m-line-height: 2.25rem;
/* 36px; */
--placeholder-s-line-height: 2rem;
/* 32px; */
--placeholder-xl-height: 4.5rem;
/* 72px; */
--placeholder-xl-line-height: 5rem;
/* 80px; */
--placeholder-xs-font-size: 0.5rem;
/* 8px */
--placeholder-xs-line-height: 1.5rem;
/* 24px */
--placeholder-xxl-font-size: 2rem;
/* 32px; */
--placeholder-xxl-height: 6.25rem;
/* 100px; */
--placeholder-xxl-line-height: 6.25rem;
/* 100px; */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Placeholder: Start */
.placeholder {
background-color: var(--color-primary-disable-dark);
display: block;
text-indent: var(--text-indentation-negative);
/* Ai: Start */
/* Ai: End */
/* Shape: Start */
/* Line: Start */
/* Line: End */
/* Round: Start */
/* Round: End */
/* Shape: End */
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xLarge: Start */
/* xLarge: End */
/* xSmall: Start */
/* xSmall: End */
/* xxLarge: Start */
/* xxLarge: End */
/* Size: End */
}
.placeholder.pai {
background-color: var(--color-alternative-ai-light);
overflow: hidden;
position: relative;
}
.placeholder.pai::before {
animation: ai-placeholder 600ms ease-in-out infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background-image: linear-gradient(to left, var(--color-alternative-ai-light), var(--color-alternative-ai-base), var(--color-alternative-ai-light));
content: var(--contentEmpty);
height: var(--percentage-100);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
width: var(--percentage-100);
z-index: var(--layout-0);
}
.placeholder[data-shape='line'],
.placeholder[data-shape='square'] {
border-radius: var(--layout-base);
}
.placeholder[data-shape='line'] {
min-width: var(--layout-large);
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xLarge: Start */
/* xLarge: End */
/* xSmall: Start */
/* xSmall: End */
/* xxLarge: Start */
/* xxLarge: End */
/* Size: End */
}
.placeholder[data-shape='line'][data-size='l'],
.placeholder[data-shape='line'][data-size='m'],
.placeholder[data-shape='line'][data-size='s'],
.placeholder[data-shape='line'][data-size='xl'],
.placeholder[data-shape='line'][data-size='xs'],
.placeholder[data-shape='line'][data-size='xxl'] {
height: var(--layout-xxxx-small);
}
.placeholder[data-shape='line'][data-size='l'] {
width: var(--percentage-60);
}
.placeholder[data-shape='line'][data-size='m'] {
width: var(--percentage-50);
}
.placeholder[data-shape='line'][data-size='s'] {
width: var(--percentage-30);
}
.placeholder[data-shape='line'][data-size='xl'] {
width: var(--percentage-80);
}
.placeholder[data-shape='line'][data-size='xs'] {
width: var(--percentage-10);
}
.placeholder[data-shape='line'][data-size='xxl'] {
width: var(--percentage-100);
}
.placeholder[data-shape='round'] {
border-radius: var(--percentage-100);
}
.placeholder[data-size='l'],
.placeholder[data-size='xl'] {
font-size: var(--placeholder-l-xl-font-size);
}
.placeholder[data-size='l'] {
height: var(--layout-xx-large);
line-height: var(--placeholder-l-line-height);
width: var(--layout-xx-large);
}
.placeholder[data-size='m'],
.placeholder[data-size='s'] {
font-size: var(--font-x-small-size);
}
.placeholder[data-size='m'] {
height: var(--layout-xxx-medium);
line-height: var(--placeholder-m-line-height);
width: var(--layout-xxx-medium);
}
.placeholder[data-size='s'] {
height: var(--layout-xxxx-medium);
line-height: var(--placeholder-s-line-height);
width: var(--layout-xxxx-medium);
}
.placeholder[data-size='xl'] {
height: var(--placeholder-xl-height);
line-height: var(--placeholder-xl-line-height);
width: var(--placeholder-xl-height);
}
.placeholder[data-size='xs'] {
font-size: var(--placeholder-xs-font-size);
height: var(--layout-x-small);
line-height: var(--placeholder-xs-line-height);
width: var(--layout-x-small);
}
.placeholder[data-size='xxl'] {
font-size: var(--placeholder-xxl-font-size);
height: var(--placeholder-xxl-height);
line-height: var(--placeholder-xxl-line-height);
width: var(--placeholder-xxl-height);
}
/* Placeholder: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Circular: Start */
.progressbar[data-shape='circular'] {
position: relative;
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Circle: Start */
/* Inside: Circle: End */
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xLarge: Start */
/* xLarge: End */
/* xxLarge: Start */
/* xxLarge: End */
/* Size: End */
/* Slice: Start */
/* Slice: End */
/* Value: Start */
/* Value: End */
/* Determinate: Start */
/* Determinate: End */
/* Indeterminate: Inside: Start */
/* Indeterminate: Inside: End */
}
.progressbar[data-shape='circular'] .pbibar,
.progressbar[data-shape='circular'] .pbifill {
border: solid var(--layout-base) var(--color-primary-primary-base);
border-radius: var(--percentage-50);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
text-indent: var(--text-indentation-negative);
}
.progressbar[data-shape='circular'] .pbifill {
display: none;
}
.progressbar[data-shape='circular'] .pbinside::before {
border: solid var(--layout-base) var(--color-primary-primary-light);
border-radius: var(--percentage-100);
content: var(--contentEmpty);
display: block;
height: var(--percentage-100);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
width: var(--percentage-100);
z-index: 1;
}
.progressbar[data-shape='circular'][data-size='l'] {
min-height: var(--layout-medium);
width: var(--layout-medium);
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Start */
/* Inside: End */
}
.progressbar[data-shape='circular'][data-size='l'] .pbibar,
.progressbar[data-shape='circular'][data-size='l'] .pbifill,
.progressbar[data-shape='circular'][data-size='l'] .pbislice {
height: var(--layout-medium);
width: var(--layout-medium);
}
.progressbar[data-shape='circular'][data-size='l'] .pbibar {
clip: rect(var(--layout-0), var(--layout-x-small), var(--layout-medium), var(--layout-0));
}
.progressbar[data-shape='circular'][data-size='l'] .pbifill,
.progressbar[data-shape='circular'][data-size='l'] .pbislice {
clip: rect(var(--layout-0), var(--layout-medium), var(--layout-medium), var(--layout-x-small));
}
.progressbar[data-shape='circular'][data-size='l'] .pbinside {
height: var(--layout-medium);
width: var(--layout-medium);
}
.progressbar[data-shape='circular'][data-size='m'] {
min-height: var(--layout-x-medium);
width: var(--layout-x-medium);
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Start */
/* Inside: End */
}
.progressbar[data-shape='circular'][data-size='m'] .pbibar,
.progressbar[data-shape='circular'][data-size='m'] .pbifill,
.progressbar[data-shape='circular'][data-size='m'] .pbislice {
height: var(--layout-x-medium);
width: var(--layout-x-medium);
}
.progressbar[data-shape='circular'][data-size='m'] .pbibar {
clip: rect(var(--layout-0), var(--progress-bar-circular-m-clip), var(--layout-x-medium), var(--layout-0));
}
.progressbar[data-shape='circular'][data-size='m'] .pbifill,
.progressbar[data-shape='circular'][data-size='m'] .pbislice {
clip: rect(var(--layout-0), var(--layout-x-medium), var(--layout-x-medium), var(--progress-bar-circular-m-clip));
}
.progressbar[data-shape='circular'][data-size='m'] .pbinside {
height: var(--layout-x-medium);
width: var(--layout-x-medium);
}
.progressbar[data-shape='circular'][data-size='s'] {
min-height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Start */
/* Inside: End */
}
.progressbar[data-shape='circular'][data-size='s'] .pbibar,
.progressbar[data-shape='circular'][data-size='s'] .pbifill,
.progressbar[data-shape='circular'][data-size='s'] .pbislice {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
.progressbar[data-shape='circular'][data-size='s'] .pbibar {
clip: rect(var(--layout-0), var(--layout-xx-small), var(--layout-xx-medium), var(--layout-0));
}
.progressbar[data-shape='circular'][data-size='s'] .pbifill,
.progressbar[data-shape='circular'][data-size='s'] .pbislice {
clip: rect(var(--layout-0), var(--layout-xx-medium), var(--layout-xx-medium), var(--layout-xx-small));
}
.progressbar[data-shape='circular'][data-size='s'] .pbinside {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
.progressbar[data-shape='circular'][data-size='xl'] {
min-height: var(--layout-xxxxx-large);
width: var(--layout-xxxxx-large);
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Start */
/* Inside: End */
}
.progressbar[data-shape='circular'][data-size='xl'] .pbibar,
.progressbar[data-shape='circular'][data-size='xl'] .pbifill,
.progressbar[data-shape='circular'][data-size='xl'] .pbislice {
height: var(--layout-xxxxx-large);
width: var(--layout-xxxxx-large);
}
.progressbar[data-shape='circular'][data-size='xl'] .pbibar {
clip: rect(var(--layout-0), var(--progress-bar-circular-xl-clip), var(--layout-xxxxx-large), var(--layout-0));
}
.progressbar[data-shape='circular'][data-size='xl'] .pbifill,
.progressbar[data-shape='circular'][data-size='xl'] .pbislice {
clip: rect(var(--layout-0), var(--layout-xxxxx-large), var(--layout-xxxxx-large), var(--progress-bar-circular-xl-clip));
}
.progressbar[data-shape='circular'][data-size='xl'] .pbinside {
height: var(--layout-xxxxx-large);
width: var(--layout-xxxxx-large);
}
.progressbar[data-shape='circular'][data-size='xxl'] {
min-height: var(--layout-xxxx-large);
width: var(--layout-xxxx-large);
/* Bar: Start */
/* Bar: End */
/* Fill: Start */
/* Fill: End */
/* Inside: Start */
/* Inside: End */
}
.progressbar[data-shape='circular'][data-size='xxl'] .pbibar,
.progressbar[data-shape='circular'][data-size='xxl'] .pbifill,
.progressbar[data-shape='circular'][data-size='xxl'] .pbislice {
height: var(--layout-xxxx-large);
width: var(--layout-xxxx-large);
}
.progressbar[data-shape='circular'][data-size='xxl'] .pbibar {
clip: rect(var(--layout-0), var(--layout-small), var(--layout-xxxx-large), var(--layout-0));
}
.progressbar[data-shape='circular'][data-size='xxl'] .pbifill,
.progressbar[data-shape='circular'][data-size='xxl'] .pbislice {
clip: rect(var(--layout-0), var(--layout-xxxx-large), var(--layout-xxxx-large), var(--layout-small));
}
.progressbar[data-shape='circular'][data-size='xxl'] .pbinside {
height: var(--layout-xxxx-large);
width: var(--layout-xxxx-large);
}
.progressbar[data-shape='circular'] .pbislice {
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
z-index: 2;
}
.progressbar[data-shape='circular'] .pbivalue {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
font-size: var(--font-xx-small-size);
line-height: var(--progress-bar-circular-value-line-height);
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow] {
animation: none;
border: none;
/* Slice: Start */
/* Slice: End */
/* Value: Start */
/* Value: End */
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow] .pbislice {
display: block;
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow] .pbivalue {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='1'] .pbibar {
transform: rotate(var(--rotation-angle-4));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='2'] .pbibar {
transform: rotate(var(--rotation-angle-7));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='3'] .pbibar {
transform: rotate(var(--rotation-angle-11));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='4'] .pbibar {
transform: rotate(var(--rotation-angle-14));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='5'] .pbibar {
transform: rotate(var(--rotation-angle-18));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='6'] .pbibar {
transform: rotate(var(--rotation-angle-22));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='7'] .pbibar {
transform: rotate(var(--rotation-angle-25));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='8'] .pbibar {
transform: rotate(var(--rotation-angle-29));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='9'] .pbibar {
transform: rotate(var(--rotation-angle-32));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='10'] .pbibar {
transform: rotate(var(--rotation-angle-36));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='11'] .pbibar {
transform: rotate(var(--rotation-angle-40));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='12'] .pbibar {
transform: rotate(var(--rotation-angle-43));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='13'] .pbibar {
transform: rotate(var(--rotation-angle-47));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='14'] .pbibar {
transform: rotate(var(--rotation-angle-50));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='15'] .pbibar {
transform: rotate(var(--rotation-angle-54));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='16'] .pbibar {
transform: rotate(var(--rotation-angle-58));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='17'] .pbibar {
transform: rotate(var(--rotation-angle-61));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='18'] .pbibar {
transform: rotate(var(--rotation-angle-65));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='19'] .pbibar {
transform: rotate(var(--rotation-angle-68));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='20'] .pbibar {
transform: rotate(var(--rotation-angle-72));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='21'] .pbibar {
transform: rotate(var(--rotation-angle-76));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='22'] .pbibar {
transform: rotate(var(--rotation-angle-79));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='23'] .pbibar {
transform: rotate(var(--rotation-angle-83));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='24'] .pbibar {
transform: rotate(var(--rotation-angle-86));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='25'] .pbibar {
transform: rotate(var(--rotation-angle-90));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='26'] .pbibar {
transform: rotate(var(--rotation-angle-94));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='27'] .pbibar {
transform: rotate(var(--rotation-angle-97));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='28'] .pbibar {
transform: rotate(var(--rotation-angle-101));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='29'] .pbibar {
transform: rotate(var(--rotation-angle-104));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='30'] .pbibar {
transform: rotate(var(--rotation-angle-108));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='31'] .pbibar {
transform: rotate(var(--rotation-angle-112));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='32'] .pbibar {
transform: rotate(var(--rotation-angle-115));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='33'] .pbibar {
transform: rotate(var(--rotation-angle-119));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='34'] .pbibar {
transform: rotate(var(--rotation-angle-122));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='35'] .pbibar {
transform: rotate(var(--rotation-angle-126));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='36'] .pbibar {
transform: rotate(var(--rotation-angle-130));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='37'] .pbibar {
transform: rotate(var(--rotation-angle-133));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='38'] .pbibar {
transform: rotate(var(--rotation-angle-137));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='39'] .pbibar {
transform: rotate(var(--rotation-angle-140));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='40'] .pbibar {
transform: rotate(var(--rotation-angle-144));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='41'] .pbibar {
transform: rotate(var(--rotation-angle-148));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='42'] .pbibar {
transform: rotate(var(--rotation-angle-151));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='43'] .pbibar {
transform: rotate(var(--rotation-angle-155));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='44'] .pbibar {
transform: rotate(var(--rotation-angle-158));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='45'] .pbibar {
transform: rotate(var(--rotation-angle-162));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='46'] .pbibar {
transform: rotate(var(--rotation-angle-166));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='47'] .pbibar {
transform: rotate(var(--rotation-angle-169));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='48'] .pbibar {
transform: rotate(var(--rotation-angle-173));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='49'] .pbibar {
transform: rotate(var(--rotation-angle-176));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='50'] .pbibar {
transform: rotate(var(--rotation-angle-180));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='51'] .pbibar {
transform: rotate(var(--rotation-angle-184));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='52'] .pbibar {
transform: rotate(var(--rotation-angle-187));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='53'] .pbibar {
transform: rotate(var(--rotation-angle-191));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='54'] .pbibar {
transform: rotate(var(--rotation-angle-194));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='55'] .pbibar {
transform: rotate(var(--rotation-angle-198));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='56'] .pbibar {
transform: rotate(var(--rotation-angle-202));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='57'] .pbibar {
transform: rotate(var(--rotation-angle-205));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='58'] .pbibar {
transform: rotate(var(--rotation-angle-209));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='59'] .pbibar {
transform: rotate(var(--rotation-angle-212));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='60'] .pbibar {
transform: rotate(var(--rotation-angle-216));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='61'] .pbibar {
transform: rotate(var(--rotation-angle-220));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='62'] .pbibar {
transform: rotate(var(--rotation-angle-223));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='63'] .pbibar {
transform: rotate(var(--rotation-angle-227));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='64'] .pbibar {
transform: rotate(var(--rotation-angle-230));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='65'] .pbibar {
transform: rotate(var(--rotation-angle-234));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='66'] .pbibar {
transform: rotate(var(--rotation-angle-238));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='67'] .pbibar {
transform: rotate(var(--rotation-angle-241));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='68'] .pbibar {
transform: rotate(var(--rotation-angle-245));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='69'] .pbibar {
transform: rotate(var(--rotation-angle-248));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='70'] .pbibar {
transform: rotate(var(--rotation-angle-252));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='71'] .pbibar {
transform: rotate(var(--rotation-angle-256));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='72'] .pbibar {
transform: rotate(var(--rotation-angle-259));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='73'] .pbibar {
transform: rotate(var(--rotation-angle-263));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='74'] .pbibar {
transform: rotate(var(--rotation-angle-266));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='75'] .pbibar {
transform: rotate(var(--rotation-angle-270));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='76'] .pbibar {
transform: rotate(var(--rotation-angle-274));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='77'] .pbibar {
transform: rotate(var(--rotation-angle-277));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='78'] .pbibar {
transform: rotate(var(--rotation-angle-281));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='79'] .pbibar {
transform: rotate(var(--rotation-angle-284));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='80'] .pbibar {
transform: rotate(var(--rotation-angle-288));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='81'] .pbibar {
transform: rotate(var(--rotation-angle-292));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='82'] .pbibar {
transform: rotate(var(--rotation-angle-295));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='83'] .pbibar {
transform: rotate(var(--rotation-angle-299));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='84'] .pbibar {
transform: rotate(var(--rotation-angle-302));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='85'] .pbibar {
transform: rotate(var(--rotation-angle-306));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='86'] .pbibar {
transform: rotate(var(--rotation-angle-310));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='87'] .pbibar {
transform: rotate(var(--rotation-angle-313));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='88'] .pbibar {
transform: rotate(var(--rotation-angle-317));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='89'] .pbibar {
transform: rotate(var(--rotation-angle-320));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='90'] .pbibar {
transform: rotate(var(--rotation-angle-324));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='91'] .pbibar {
transform: rotate(var(--rotation-angle-328));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='92'] .pbibar {
transform: rotate(var(--rotation-angle-331));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='93'] .pbibar {
transform: rotate(var(--rotation-angle-335));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='94'] .pbibar {
transform: rotate(var(--rotation-angle-338));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='95'] .pbibar {
transform: rotate(var(--rotation-angle-342));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='96'] .pbibar {
transform: rotate(var(--rotation-angle-346));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='97'] .pbibar {
transform: rotate(var(--rotation-angle-349));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='98'] .pbibar {
transform: rotate(var(--rotation-angle-353));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='99'] .pbibar {
transform: rotate(var(--rotation-angle-356));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='100'] .pbibar {
transform: rotate(var(--rotation-angle-360));
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='50'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='51'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='52'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='53'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='54'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='55'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='56'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='57'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='58'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='59'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='60'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='61'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='62'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='63'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='64'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='65'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='66'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='67'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='68'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='69'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='70'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='71'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='72'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='73'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='74'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='75'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='76'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='77'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='78'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='79'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='80'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='81'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='82'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='83'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='84'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='85'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='86'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='87'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='88'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='89'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='90'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='91'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='92'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='93'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='94'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='95'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='96'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='97'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='98'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='99'] .pbifill,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='100'] .pbifill {
display: block;
}
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='50'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='51'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='52'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='53'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='54'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='55'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='56'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='57'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='58'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='59'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='60'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='61'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='62'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='63'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='64'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='65'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='66'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='67'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='68'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='69'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='70'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='71'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='72'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='73'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='74'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='75'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='76'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='77'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='78'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='79'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='80'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='81'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='82'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='83'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='84'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='85'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='86'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='87'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='88'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='89'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='90'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='91'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='92'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='93'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='94'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='95'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='96'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='97'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='98'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='99'] .pbislice,
.progressbar[data-shape='circular'] .pbinside div[aria-valuenow='100'] .pbislice {
clip: rect(auto, auto, auto, auto);
}
.progressbar[data-shape='circular'] .pbinside div {
animation: spinner var(--animation-duration) infinite forwards;
animation-play-state: running;
/* Variables: Start */
--animation-duration: 1s;
/* Variables: End */
border-bottom: solid var(--layout-base) var(--color-primary-link-light);
border-left: solid var(--layout-base) var(--color-primary-link-base);
border-right: solid var(--layout-base) var(--color-primary-link-light);
border-top: solid var(--layout-base) var(--color-primary-link-light);
border-radius: var(--percentage-100);
height: var(--percentage-100);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
width: var(--percentage-100);
z-index: 2;
/* Circle: Start */
/* Circle: End */
/* Direction: Start */
/* Direction: End */
/* Slice: Start */
/* Slice: End */
}
.progressbar[data-shape='circular'] .pbinside div::before {
border: none;
}
.progressbar[data-shape='circular'] .pbinside div[dir='ltr'] {
left: var(--layout-0);
}
.progressbar[data-shape='circular'] .pbinside div[dir='rtl'] {
animation-direction: reverse;
right: var(--layout-0);
}
.progressbar[data-shape='circular'] .pbinside div .pbislice {
display: none;
}
/* Circular: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Lineal: Start */
/* Inside: Start */
.progressbar[data-shape='lineal'] .pbinside {
background-color: var(--color-primary-primary-light);
border-radius: var(--layout-base);
height: var(--layout-xxx-small);
/* Determinate: Start */
/* Determinate: End */
/* Indeterminate: Start */
/* Indeterminate: End */
}
.progressbar[data-shape='lineal'] .pbinside div {
text-indent: var(--text-indentation-negative);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow],
.progressbar[data-shape='lineal'] .pbinside div::before {
background-color: var(--color-primary-primary-base);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow] {
transition: width var(--time-commons-base) linear;
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
/* Direction: Start */
/* Direction: End */
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow][dir='ltr'] {
left: var(--layout-0);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow][dir='rtl'] {
right: var(--layout-0);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow]::before {
display: none;
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='1'] {
width: var(--percentage-1);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='2'] {
width: var(--percentage-2);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='3'] {
width: var(--percentage-3);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='4'] {
width: var(--percentage-4);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='5'] {
width: var(--percentage-5);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='6'] {
width: var(--percentage-6);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='7'] {
width: var(--percentage-7);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='8'] {
width: var(--percentage-8);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='9'] {
width: var(--percentage-9);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='10'] {
width: var(--percentage-10);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='11'] {
width: var(--percentage-11);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='12'] {
width: var(--percentage-12);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='13'] {
width: var(--percentage-13);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='14'] {
width: var(--percentage-14);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='15'] {
width: var(--percentage-15);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='16'] {
width: var(--percentage-16);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='17'] {
width: var(--percentage-17);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='18'] {
width: var(--percentage-18);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='19'] {
width: var(--percentage-19);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='20'] {
width: var(--percentage-20);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='21'] {
width: var(--percentage-21);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='22'] {
width: var(--percentage-22);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='23'] {
width: var(--percentage-23);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='24'] {
width: var(--percentage-24);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='25'] {
width: var(--percentage-25);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='26'] {
width: var(--percentage-26);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='27'] {
width: var(--percentage-27);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='28'] {
width: var(--percentage-28);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='29'] {
width: var(--percentage-29);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='30'] {
width: var(--percentage-30);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='31'] {
width: var(--percentage-31);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='32'] {
width: var(--percentage-32);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='33'] {
width: var(--percentage-33);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='34'] {
width: var(--percentage-34);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='35'] {
width: var(--percentage-35);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='36'] {
width: var(--percentage-36);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='37'] {
width: var(--percentage-37);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='38'] {
width: var(--percentage-38);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='39'] {
width: var(--percentage-39);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='40'] {
width: var(--percentage-40);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='41'] {
width: var(--percentage-41);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='42'] {
width: var(--percentage-42);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='43'] {
width: var(--percentage-43);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='44'] {
width: var(--percentage-44);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='45'] {
width: var(--percentage-45);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='46'] {
width: var(--percentage-46);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='47'] {
width: var(--percentage-47);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='48'] {
width: var(--percentage-48);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='49'] {
width: var(--percentage-49);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='50'] {
width: var(--percentage-50);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='51'] {
width: var(--percentage-51);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='52'] {
width: var(--percentage-52);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='53'] {
width: var(--percentage-53);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='54'] {
width: var(--percentage-54);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='55'] {
width: var(--percentage-55);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='56'] {
width: var(--percentage-56);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='57'] {
width: var(--percentage-57);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='58'] {
width: var(--percentage-58);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='59'] {
width: var(--percentage-59);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='60'] {
width: var(--percentage-60);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='61'] {
width: var(--percentage-61);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='62'] {
width: var(--percentage-62);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='63'] {
width: var(--percentage-63);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='64'] {
width: var(--percentage-64);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='65'] {
width: var(--percentage-65);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='66'] {
width: var(--percentage-66);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='67'] {
width: var(--percentage-67);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='68'] {
width: var(--percentage-68);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='69'] {
width: var(--percentage-69);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='70'] {
width: var(--percentage-70);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='71'] {
width: var(--percentage-71);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='72'] {
width: var(--percentage-72);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='73'] {
width: var(--percentage-73);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='74'] {
width: var(--percentage-74);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='75'] {
width: var(--percentage-75);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='76'] {
width: var(--percentage-76);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='77'] {
width: var(--percentage-77);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='78'] {
width: var(--percentage-78);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='79'] {
width: var(--percentage-79);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='80'] {
width: var(--percentage-80);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='81'] {
width: var(--percentage-81);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='82'] {
width: var(--percentage-82);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='83'] {
width: var(--percentage-83);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='84'] {
width: var(--percentage-84);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='85'] {
width: var(--percentage-85);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='86'] {
width: var(--percentage-86);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='87'] {
width: var(--percentage-87);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='88'] {
width: var(--percentage-88);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='89'] {
width: var(--percentage-89);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='90'] {
width: var(--percentage-90);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='91'] {
width: var(--percentage-91);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='92'] {
width: var(--percentage-92);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='93'] {
width: var(--percentage-93);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='94'] {
width: var(--percentage-94);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='95'] {
width: var(--percentage-95);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='96'] {
width: var(--percentage-96);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='97'] {
width: var(--percentage-97);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='98'] {
width: var(--percentage-98);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='99'] {
width: var(--percentage-99);
}
.progressbar[data-shape='lineal'] .pbinside div[aria-valuenow='100'] {
width: var(--percentage-100);
}
.progressbar[data-shape='lineal'] .pbinside div::before {
animation: indeterminate-loading var(--progress-bar-lineal-duration) linear infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
content: var(--contentEmpty);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
will-change: width;
/* Direction: Start */
/* Direction: End */
}
.progressbar[data-shape='lineal'] .pbinside div::before[dir='ltr'] {
left: var(--layout-0);
}
.progressbar[data-shape='lineal'] .pbinside div::before[dir='rtl'] {
animation-direction: reverse;
right: var(--layout-0);
}
/* Inside: End */
/* Size: Start */
/* Large: Start */
.progressbar[data-shape='lineal'][data-size='l'] {
width: var(--percentage-50);
}
/* Large: End */
/* Medium: Start */
.progressbar[data-shape='lineal'][data-size='m'] {
width: var(--percentage-25);
}
/* Medium: End */
/* Small: Start */
.progressbar[data-shape='lineal'][data-size='s'] {
width: var(--progress-bar-lineal-s-width);
}
/* Small: End */
/* xLarge: Start */
.progressbar[data-shape='lineal'][data-size='xl'] {
width: var(--percentage-75);
}
/* xLarge: End */
/* xxLarge: Start */
.progressbar[data-shape='lineal'][data-size='xxl'] {
width: var(--percentage-100);
}
/* xxLarge: End */
/* Size: End */
/* Lineal: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.progressbar {
--progress-bar-circular-m-clip: 1.375rem;
/* 22px */
--progress-bar-circular-xl-clip: 1.625rem;
/* 26px */
--progress-bar-circular-value-line-height: 2rem;
/* 32px */
--progress-bar-lineal-duration: 2.1s;
--progress-bar-lineal-s-width: 8.25rem;
/* 132px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Progress Bar: Start */
.progressbar {
margin-left: auto;
margin-right: auto;
/* Inside: Start */
/* Inside: End */
/* Typography: Specials: Start */
/* Typography: Specials: End */
}
.progressbar .pbinside {
position: relative;
}
.progressbar [data-style='typospecials'] {
margin-bottom: var(--layout-base);
}
/* Progress Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Item: Start */
.breadcrumb .item {
align-items: center;
color: var(--color-primary-text-base);
display: flex;
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
gap: var(--layout-xxxxx-small);
line-height: var(--font-small-line-height);
/* Button & Link: Start */
/* Button & Link: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* Loading: Start */
/* Loading: End */
/* States: End */
}
.breadcrumb .item[data-type='button'],
.breadcrumb .item[data-type='link'] {
cursor: pointer;
}
.breadcrumb .item[data-type='button'][data-states='disable'],
.breadcrumb .item[data-type='link'][data-states='disable'] {
color: var(--color-primary-disable-dark);
pointer-events: none;
}
.breadcrumb .item[data-type='button']:hover,
.breadcrumb .item[data-type='link']:hover {
color: var(--color-primary-text-dark);
}
.breadcrumb .item .placeholder[data-size='m'][data-shape='line'] {
width: var(--layout-large);
}
/* Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Breadcrumb: Start */
/* Button: Start: */
.breadcrumb button {
font-weight: var(--font-small-weight);
}
/* Button: End: */
/* Link: Start: */
.breadcrumb .link,
.breadcrumb button {
transition: color var(--time-commons-base) ease;
display: inline-block;
/* States: Hover: Start */
/* States: Hover: End */
}
.breadcrumb .link:hover,
.breadcrumb button:hover {
color: var(--color-primary-text-dark);
}
/* Link: End: */
/* Item: Start */
/* Link: Start */
.breadcrumb .item .link {
color: var(--color-primary-text-base);
}
/* Link: End */
/* States: Start */
/* Disable: Start */
.breadcrumb .item.disable .link,
.breadcrumb .item.disable button {
color: var(--color-primary-disable-dark);
pointer-events: none;
}
/* Disable: End */
/* States: End */
/* Item: End */
/* Breadcrumb: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Breadcrumb: Start */
.breadcrumb {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
}
.breadcrumb .icon {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
/* SVG: Start */
/* SVG: End */
}
.breadcrumb .icon svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
/* Breadcrumb: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.headerapp {
--header-app-box-shadow-inset-axis-y-negative: -0.125rem;
/* -2px */
--header-app-box-shadow-inset-color-b: 135;
--header-app-box-shadow-inset-color-g: 125;
--header-app-box-shadow-inset-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Header App: Start */
.headerapp {
box-shadow: inset var(--shadow-0) var(--header-app-box-shadow-inset-axis-y-negative) var(--shadow-0) rgba(var(--header-app-box-shadow-inset-color-r), var(--header-app-box-shadow-inset-color-g), var(--header-app-box-shadow-inset-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
height: var(--layout-xx-large);
padding: var(--layout-xxxxx-small) var(--layout-xx-small);
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
/* Sticky: Start */
/* Sticky: End */
}
.headerapp .hinside {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
height: var(--percentage-100);
justify-content: space-between;
/* Center: Start */
/* Center: End */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
.headerapp .hinside .hcenter,
.headerapp .hinside .hleft,
.headerapp .hinside .hright {
align-items: center;
display: flex;
flex-flow: row wrap;
}
.headerapp .hinside .hcenter {
justify-content: center;
}
.headerapp .hinside .hleft {
flex: 1;
}
.headerapp .hinside .hleft + .hcenter + .hright {
flex: 1;
}
.headerapp .hinside .hright {
justify-content: end;
}
.headerapp.sticky {
position: sticky;
top: var(--layout-0);
z-index: 7;
}
/* Hacks: Safari: Start */
.msafari .headerapp.sticky {
position: -webkit-sticky;
}
/* Hacks: Safari: End */
/* Header App: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Inner Container (Flatpickr): Start */
.flatpickr-calendar .flatpickr-innerContainer {
padding: var(--layout-xxxx-small);
/* Container: Start */
/* Container: End */
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer {
display: flex;
flex-direction: column;
gap: var(var(--layout-xxxx-small));
/* WeekDays: Start */
/* Container: Start */
/* Container: End */
/* WeekDay: Start */
/* WeekDay: End */
/* WeekDays: End */
/* Days: Start */
/* Container: Start */
/* Container: End */
/* Day: Start */
/* Day: End */
/* Days: End */
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekdaycontainer {
align-items: center;
display: flex;
flex-flow: row wrap;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
color: var(--color-primary-text-dark);
display: inline-block;
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
height: var(--layout-xx-small);
line-height: var(--font-medium-line-height);
text-align: center;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer {
align-items: center;
display: flex;
flex-flow: row wrap;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
align-items: center;
border-radius: var(--layout-base);
color: var(--color-primary-text-base);
cursor: pointer;
display: flex;
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
line-height: var(--font-medium-line-height);
justify-content: center;
/* End Range: Direction: Start */
/* End Range: Direction: End */
/* In Range: Start */
/* In Range: End */
/* Next & Previous Month Day: Start */
/* Next & Previous Month Day: End */
/* Start Range: Direction: Start */
/* Start Range: Direction: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* hover: End */
/* Selected: Start */
/* Selected: End */
/* States: End */
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.endRange {
border-radius: var(--layout-0) var(--layout-base) var(--layout-base) var(--layout-0);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.inRange {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--form-calendar-box-shadow-rgba-color-r), var(--form-calendar-box-shadow-rgba-color-g), var(--form-calendar-box-shadow-rgba-color-b), var(--form-calendar-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-primary-light);
border-radius: var(--layout-0);
color: var(--color-neutrals-white);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.nextMonthDay {
color: var(--color-primary-disable-dark);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.startRange {
border-radius: var(--layout-base) var(--layout-0) var(--layout-0) var(--layout-base);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.flatpickr-disabled {
color: var(--color-primary-disable-dark);
pointer-events: none;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.selected {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--form-calendar-box-shadow-rgba-color-r), var(--form-calendar-box-shadow-rgba-color-g), var(--form-calendar-box-shadow-rgba-color-b), var(--form-calendar-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
color: var(--color-neutrals-white);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day:hover {
background-color: var(--color-primary-primary-light);
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day.selected {
background-color: var(--color-primary-primary-base);
}
/* Inner Container (Flatpickr): End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Input (Flatpickr): Start */
.flatpickr-input {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
flex-direction: column;
/* Footer: Start */
/* Footer: End */
/* List: Start */
/* Container: Direction: Start */
/* Container: Direction: End */
/* Item: Start */
/* Item: End */
/* List: End */
/* Presets: Start */
/* Presets: End */
/* Size: Start */
/* Large: Date Picker: Calendar (Flatpickr): Start */
/* Large: Date Picker: Calendar (Flatpickr): Container: End */
/* Medium: Date Picker: Calendar (Flatpickr): Start */
/* Medium: Date Picker: Calendar (Flatpickr): End */
/* Small: Date Picker: Calendar (Flatpickr): Start */
/* Small: Date Picker: Calendar (Flatpickr): End */
/* Size: End */
}
.flatpickr-input.drcwithfooter .drcfooter {
align-items: center;
border-top: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
gap: var(--layout-xxxx-small);
height: var(--layout-medium);
order: 2;
padding: var(--layout-xxxx-small);
width: var(--percentage-100);
/* Reference: Start */
/* Reference: End */
/* Calendar: Start */
/* Calendar: End */
}
.flatpickr-input.drcwithfooter .drcfooter .drcfreference {
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
height: var(--layout-x-small);
text-indent: var(--text-indentation-negative);
width: var(--layout-x-small);
}
.flatpickr-input.drcwithfooter .drcfooter + .flatpickr-calendar {
order: 1;
}
.flatpickr-input .listcontainer[dir='ltr'] {
border-right: solid var(--layout-half) var(--color-primary-border-base);
}
.flatpickr-input .listcontainer[dir='rtl'] {
border-left: solid var(--layout-half) var(--color-primary-border-base);
}
.flatpickr-input .listcontainer .listitem {
height: var(--layout-medium);
}
.flatpickr-input.drcwithpresets {
flex-flow: row wrap;
}
.flatpickr-input[data-size='l'] .flatpickr-calendar {
max-width: var(--form-calendar-size-large-min-width);
min-width: var(--form-calendar-size-large-min-width);
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: Start */
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: End */
/* Inner Container (Flatpickr): Container: Day: Start */
/* Inner Container (Flatpickr): Container: Day: End */
/* Months (Flatpickr): Month: Select: Start */
/* Months (Flatpickr): Month: Select: End */
}
.flatpickr-input[data-size='l'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
width: var(--layout-xxxxx-large);
}
.flatpickr-input[data-size='l'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
height: var(--layout-xxxxx-large);
width: var(--layout-xxxxx-large);
}
.flatpickr-input[data-size='l'] .flatpickr-calendar .flatpickr-current-month select {
flex-basis: var(--percentage-25);
}
.flatpickr-input[data-size='m'] .flatpickr-calendar {
max-width: var(--form-calendar-size-medium-min-width);
min-width: var(--form-calendar-size-medium-min-width);
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: Start */
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: End */
/* Inner Container (Flatpickr): Container: Day: Start */
/* Inner Container (Flatpickr): Container: Day: End */
/* Months (Flatpickr): Month: Select: Start */
/* Months (Flatpickr): Month: Select: End */
}
.flatpickr-input[data-size='m'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
width: var(--layout-xx-medium);
}
.flatpickr-input[data-size='m'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
.flatpickr-input[data-size='m'] .flatpickr-calendar .flatpickr-current-month select {
flex-basis: var(--percentage-25);
}
.flatpickr-input[data-size='s'] .flatpickr-calendar {
max-width: var(--form-calendar-size-small-min-width);
min-width: var(--form-calendar-size-small-min-width);
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: Start */
/* Inner Container (Flatpickr): Container: WeekDays: WeekDay: End */
/* Inner Container (Flatpickr): Container: Day: Start */
/* Inner Container (Flatpickr): Container: Day: End */
}
.flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
width: var(--layout-xxxx-medium);
}
.flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
height: var(--layout-xxxx-medium);
width: var(--layout-xxxx-medium);
}
/* Input (Flatpickr): End */
/* Drop Down: Start */
.containerarea[data-animation='collapsable-vertical'].dddpcalendar {
max-height: var(--form-calendar-drop-down-container-max-height);
/* Calendar: Inline: Start */
/* Calendar: Inline: End */
}
.containerarea[data-animation='collapsable-vertical'].dddpcalendar .flatpickr-input {
border: none;
}
/* Drop Down: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Months (Flatpickr): Start */
.flatpickr-calendar .flatpickr-months {
align-items: center;
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
gap: var(--layout-xxxxx-small);
height: var(--layout-medium);
padding: var(--layout-xxxx-small);
/* Month: Start */
/* Month: End */
/* Next Month: Start */
/* Next Month: End */
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
display: flex;
flex: 1;
order: 1;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
align-items: center;
display: flex;
flex: 1;
gap: var(--layout-xxxx-small);
/* Input: Start */
/* Input: End */
/* Year: Start */
/* Year: End */
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month input,
.flatpickr-calendar .flatpickr-months .flatpickr-current-month select {
background: none;
border: none;
color: var(--color-primary-text-dark);
flex: 1;
font-size: var(--font-large-size);
font-weight: var(--font-large-weight);
height: auto;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month input {
padding-right: var(--layout-0);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper {
display: flex;
flex: 1;
position: relative;
/* Arrows: Start */
/* Arrows: End */
/* States: Hover: Arrows: Start */
/* States: Hover: Arrows: End */
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span {
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-neutrals-transparent);
cursor: pointer;
height: var(--percentage-50);
line-height: var(--percentage-50);
position: absolute;
width: var(--layout-xx-small);
/* Down: Start */
/* Down: End */
/* Up: Start */
/* Up: End */
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span::after {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-primary-border-base);
border-left: solid var(--layout-base) var(--color-neutrals-transparent);
border-right: solid var(--layout-base) var(--color-neutrals-transparent);
content: var(--contentEmpty);
display: block;
opacity: var(--alpha-0);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowDown {
top: var(--percentage-50);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowDown::after {
border-top: solid var(--layout-base) var(--color-neutrals-black);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowUp {
border-bottom: none;
top: var(--layout-0);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowUp::after {
border-bottom: solid var(--layout-base) var(--color-neutrals-black);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper:hover span {
background-color: var(--color-primary-border-base);
border-color: var(--color-primary-border-base);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper:hover span::after {
opacity: var(--alpha-100);
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
align-items: center;
cursor: pointer;
display: flex;
height: var(--layout-xxx-medium);
justify-content: center;
width: var(--layout-xxx-medium);
/* SVG: Start */
/* SVG: End */
/* States: Start */
/* Disable: SVG: Start */
/* Disable: SVG: End */
/* Hover: SVG: Start */
/* Hover: SVG: End */
/* States: End */
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg {
fill: var(--color-primary-icon-base);
height: var(--layout-x-small);
width: var(--layout-x-small);
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month.disable svg,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month.disable svg {
fill: var(--color-primary-disable-dark);
pointer-events: none;
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg {
fill: var(--color-primary-icon-dark);
}
/* Direction: Start */
/* Month: Numbers: Wrapper: Arrows: Start */
.flatpickr-input[dir='ltr'] .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span {
right: var(--layout-0);
}
.flatpickr-input[dir='rtl'] .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span {
left: var(--layout-0);
}
/* Month: Numbers: Wrapper: Arrows: End */
/* Next Month: Start */
.flatpickr-input[dir='ltr'] .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
order: 3;
}
.flatpickr-input[dir='rtl'] .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
order: 2;
}
/* Next Month: End */
/* Previous Month: Start */
.flatpickr-input[dir='ltr'] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
order: 2;
}
.flatpickr-input[dir='rtl'] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
order: 3;
}
/* Previous Month: End */
/* Direction: End */
/* Months (Flatpickr): End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Time (Flatpickr): Start */
.flatpickr-calendar .flatpickr-time {
align-items: center;
border-top: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
gap: var(--layout-base);
height: var(--layout-medium);
padding: var(--layout-xxxx-small);
/* AM & PM: Start */
/* AM & PM: End */
/* Input: Start */
/* Input: End */
}
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar .flatpickr-time input {
color: var(--color-primary-text-dark);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
}
.flatpickr-calendar .flatpickr-time input {
background: none;
border: none;
height: auto;
width: auto;
}
/* Time (Flatpickr): End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.flatpickr-calendar,
.containerarea.dddpcalendar {
--form-calendar-box-shadow-rgba-color-a: 0.4;
--form-calendar-box-shadow-rgba-color-b: 135;
--form-calendar-box-shadow-rgba-color-g: 125;
--form-calendar-box-shadow-rgba-color-r: 96;
--form-calendar-drop-down-container-max-height: 29.5rem;
/* 472px */
}
/* Input (Flatpckr): Start */
.flatpickr-input,
.containerarea.dddpcalendar {
--form-calendar-size-large-min-width: 24.5rem;
/* 392px */
--form-calendar-size-medium-min-width: 19.25rem;
/* 308px */
--form-calendar-size-small-min-width: 15.75rem;
/* 252px */
--form-calendar-num-input-wrapper-width: 12ch;
/* 148px */
}
/* Input (Flatpckr): End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Container Area: Start */
.containerarea.dddpcalendar {
max-width: var(--form-calendar-size-large-min-width);
min-width: var(--form-calendar-size-small-min-width);
}
/* Container Area: End */
/* Date Picker: Calendar (Flatpickr): Start */
.flatpickr-calendar {
width: var(--percentage-100);
}
/* Date Picker: Calendar (Flatpickr): End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Checkbox Button: Start */
.checkboxbutton {
border-radius: var(--layout-base);
/* Icon: Start */
/* Icon: End */
/* States: Active: Icon: Start */
/* States: Active: Icon: End */
}
.checkboxbutton .icon.cicon {
height: var(--layout-xxxx-small);
position: initial;
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
.checkboxbutton .icon.cicon svg {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
fill: var(--color-neutrals-white);
height: var(--layout-xxxx-small);
opacity: var(--alpha-0);
width: var(--layout-xxxx-small);
}
.checkboxbutton[data-states='active'] .icon svg {
opacity: var(--alpha-100);
}
/* Checkbox Button: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Radio Button: Start */
.radiobutton {
border-radius: var(--layout-xxx-small);
/* Circle: Start */
/* Circle: End */
/* States: Active: Start */
/* States: Active: End */
}
.radiobutton span {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border-radius: var(--layout-xxxxx-small);
display: block;
height: var(--layout-xxxxx-small);
opacity: var(--alpha-0);
width: var(--layout-xxxxx-small);
}
.radiobutton[data-states='active'] span {
opacity: var(--alpha-100);
}
/* Radio Button: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Checkbox & Radio Button: Start */
.checkboxbutton,
.radiobutton {
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
border: solid var(--layout-border) var(--color-primary-primary-base);
display: inline-block;
height: var(--layout-xxx-small);
overflow: hidden;
position: relative;
text-indent: var(--text-indentation-negative);
width: var(--layout-xxx-small);
/* Placement: Direction: Start */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* Placement: Direction: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* States: End */
}
.checkboxbutton[data-placement='left'][dir='rtl'],
.radiobutton[data-placement='left'][dir='rtl'] {
order: 2;
}
.checkboxbutton[data-placement='right'][dir='ltr'],
.radiobutton[data-placement='right'][dir='ltr'] {
order: 2;
}
.checkboxbutton[data-states='active'],
.radiobutton[data-states='active'] {
background-color: var(--color-primary-primary-dark);
/* Disable: Start */
/* Disable: End */
}
.checkboxbutton[data-states='active'][data-states='disable'],
.radiobutton[data-states='active'][data-states='disable'] {
background-color: var(--color-primary-disable-dark);
border-color: var(--color-primary-disable-dark);
}
.checkboxbutton[data-states='disable'],
.radiobutton[data-states='disable'] {
border-color: var(--color-primary-disable-dark);
}
.checkboxbutton[data-states='error'],
.radiobutton[data-states='error'] {
border-color: var(--color-alternative-error-base);
}
/* Checkbox & Radio Button: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Colors: Start */
.colors {
transition: border-color var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-xxxx-medium);
height: var(--layout-xxxx-medium);
position: relative;
text-indent: var(--text-indentation-negative);
width: var(--layout-xxxx-medium);
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.colors::before {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-x-small);
content: var(--contentEmpty);
height: var(--layout-x-small);
width: var(--layout-x-small);
}
.colors.black::before {
background-color: var(--color-neutrals-black);
}
.colors.white::before {
background-color: var(--color-neutrals-white);
}
.colors.active {
border-color: var(--color-primary-primary-dark);
}
.colors.active::before {
border-color: var(--color-primary-primary-dark);
}
.colors.disable {
border-color: var(--color-primary-disable-dark);
cursor: default;
pointer-events: none;
}
.colors.disable.black::before,
.colors.disable.white::before {
background-color: var(--color-primary-disable-dark);
}
.colors:hover::before {
border-color: var(--color-primary-primary-dark);
}
/* Colors: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Picker: Start */
.picker {
transition: border-color var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-xxxx-medium);
height: var(--layout-xxxx-medium);
position: relative;
text-indent: var(--text-indentation-negative);
width: var(--layout-xxxx-medium);
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Icon: Start */
/* Hover: Icon: End */
/* States: End */
/* Input: Start */
/* Input: End */
}
.picker .icon {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
background-color: var(--color-primary-primary-base);
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-x-small);
/* SVG: Start */
/* SVG: End */
}
.picker .icon svg {
fill: var(--color-neutrals-white);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
.picker.active {
border-color: var(--color-primary-primary-dark);
/* Icon: Start */
/* Icon: End */
/* Input: Start */
/* Input: End */
}
.picker.active.icon {
background-color: var(--color-primary-primary-dark);
border-color: var(--color-primary-primary-dark);
}
.picker.active + input {
border-color: var(--color-primary-primary-dark);
}
.picker.disable {
border-color: var(--color-primary-disable-dark);
cursor: default;
pointer-events: none;
/* Icon: Start */
/* Icon: End */
/* Input: Start */
/* Input: End */
}
.picker.disable .icon {
background-color: var(--color-primary-disable-dark);
border-color: var(--color-primary-disable-dark);
}
.picker.disable + input.hidden,
.picker.disable + input.hidden + input {
border-color: var(--color-primary-disable-dark);
cursor: default;
pointer-events: none;
}
.picker:hover .icon,
.picker:hover + input {
border-color: var(--color-primary-primary-dark);
}
.picker + input.hidden {
cursor: pointer;
height: var(--layout-xxxx-medium);
margin-left: var(--layout-0);
opacity: var(--alpha-0);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
width: var(--layout-xxxx-medium);
}
/* Picker: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Color Picker: Start */
.colorpicker {
max-width: var(--form-color-picker-max-width);
min-width: var(--form-color-picker-min-width);
/* Color: Start */
/* Color: End */
/* Input: Start */
/* Input: End */
/* Label: Start */
/* Label: End */
/* Picker Container: Start */
/* Picker Container: End */
}
.colorpicker .color {
margin-right: var(--layout-xxxxx-small);
}
.colorpicker input {
font-size: var(--font-xx-small-size);
height: var(--layout-xx-small);
margin-left: var(--layout-half);
padding-left: var(--layout-xx-medium);
padding-right: var(--layout-xxxx-small);
width: var(--form-color-picker-input-width);
}
.colorpicker .flabel {
flex-basis: var(--percentage-100);
}
.colorpicker .pickercontainer {
align-items: center;
display: flex;
position: relative;
/* Picker: Start */
/* Picker: End */
}
.colorpicker .pickercontainer .picker {
position: absolute;
top: var(--layout-0);
left: var(--layout-0);
}
/* Color Picker: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* DatePicker: Start */
form .field.datepicker {
display: block;
/* Container: Start */
/* Container: End */
/* Field: Start */
/* Field: End */
/* Label: Start */
/* Label: End */
}
form .field.datepicker .container {
align-items: center;
display: flex;
flex-flow: row wrap;
overflow: visible;
padding: var(--layout-0);
}
form .field.datepicker .field {
padding-bottom: var(--layout-0);
/* Day: Start */
/* Direction: Start */
/* Direction: End */
/* Day: End */
/* Label: Start */
/* Label: End */
/* Month: Start */
/* Month: End */
}
form .field.datepicker .field.day,
form .field.datepicker .field.year {
max-width: calc(var(--percentage-25) - var(--layout-xxxx-small));
min-width: calc(var(--percentage-25) - var(--layout-xxxx-small));
}
form .field.datepicker .field.day[dir='ltr'] + .field.month[dir='ltr'],
form .field.datepicker .field.day[dir='ltr'] + .field.year[dir='ltr'],
form .field.datepicker .field.year[dir='ltr'] + .field.day[dir='ltr'],
form .field.datepicker .field.year[dir='ltr'] + .field.month[dir='ltr'] {
margin-left: var(--layout-xxx-small);
}
form .field.datepicker .field.day[dir='rtl'] + .field.month[dir='rtl'],
form .field.datepicker .field.day[dir='rtl'] + .field.year[dir='rtl'],
form .field.datepicker .field.year[dir='rtl'] + .field.day[dir='rtl'],
form .field.datepicker .field.year[dir='rtl'] + .field.month[dir='rtl'] {
margin-right: var(--layout-xxx-small);
}
form .field.datepicker .field .flabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
form .field.datepicker .field.month {
max-width: calc(var(--percentage-50) - var(--layout-xxxxx-small));
min-width: calc(var(--percentage-50) - var(--layout-xxxxx-small));
/* Direction: Start */
/* Direction: End */
}
form .field.datepicker .field.month + .field.day[dir='ltr'],
form .field.datepicker .field.month + .field.year[dir='ltr'] {
margin-left: var(--layout-xxx-small);
}
form .field.datepicker .field.month + .field.day[dir='rtl'],
form .field.datepicker .field.month + .field.year[dir='rtl'] {
margin-right: var(--layout-xxx-small);
}
form .field.datepicker .flabel {
display: inline-block;
}
/* DatePicker: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* AutoSuggest: Start */
/* Divider: Start */
form .autosuggest .divider {
height: var(--layout-half);
margin-bottom: var(--layout-0);
margin-top: var(--layout-0);
}
/* Divider: End */
/* Icon: Start */
form .autosuggest .icon.first {
transition: opacity var(--time-commons-base) ease;
height: var(--layout-xxx-small);
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
width: var(--layout-xxx-small);
z-index: 2;
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
/* Input: Start */
/* Input: End */
}
form .autosuggest .icon.first[dir='ltr'] {
left: var(--layout-xxxx-small);
}
form .autosuggest .icon.first[dir='rtl'] {
right: var(--layout-xxxx-small);
}
form .autosuggest .icon.first svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
form .autosuggest .icon.first + input[dir='ltr'] {
padding-left: var(--layout-xx-medium);
}
form .autosuggest .icon.first + input[dir='rtl'] {
padding-right: var(--layout-xx-medium);
}
form .autosuggest .flabel + .icon.first {
top: var(--layout-xx-medium);
}
/* Icon: End */
/* Input: Start */
form .autosuggest input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
display: flex;
min-height: var(--layout-xx-medium);
position: relative;
/* Container Area: Start */
/* Container Area: End */
/* States: Disable: Start */
/* States: Disable: End */
}
form .autosuggest input ~ .containerarea {
width: var(--percentage-100);
}
form .autosuggest input[disabled] {
background-color: var(--color-neutrals-white);
}
/* Input: End */
/* States: Start */
/* Disable: Icon: Start */
form .autosuggest[data-states='disable'] input ~ .icon svg {
fill: var(--color-primary-disable-dark);
}
/* Disable: Icon: End */
/* Loading: Start */
form .autosuggest[data-states='loading'] {
pointer-events: none;
/* Icon: Start */
/* Icon: End */
}
form .autosuggest[data-states='loading'] input ~ .icon.loading {
top: var(--percentage-40);
/* SVG: Start */
/* SVG: End */
}
form .autosuggest[data-states='loading'] input ~ .icon.loading svg {
fill: var(--color-primary-link-base);
}
/* Loading: End */
/* States: End */
/* AutoSuggest: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Editor (Content Editable): Start */
form .contenteditable,
.fcbox .contenteditable {
color: var(--color-primary-text-base);
font-size: var(--font-medium-size);
line-height: var(--font-large-line-height);
min-height: var(--layout-xx-medium);
min-width: var(--layout-0);
width: var(--percentage-100);
/* Border: Start */
/* Border: End */
/* Direction: TipTap: Placeholder: Start */
/* Direction: TipTap: Placeholder: End */
/* Placeholder: Start */
/* Placeholder: End */
}
form .contenteditable[data-style='border'],
.fcbox .contenteditable[data-style='border'] {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
}
form .contenteditable[dir='ltr'] .tiptap .is-editor-empty:first-child::before,
.fcbox .contenteditable[dir='ltr'] .tiptap .is-editor-empty:first-child::before {
float: left;
}
form .contenteditable[dir='rtl'] .tiptap .is-editor-empty:first-child::before,
.fcbox .contenteditable[dir='rtl'] .tiptap .is-editor-empty:first-child::before {
float: right;
}
form .contenteditable::placeholder,
.fcbox .contenteditable::placeholder,
form .contenteditable:-ms-input-placeholder,
.fcbox .contenteditable:-ms-input-placeholder {
color: var(--color-primary-text-light);
}
/* Editor (Content Editable): End */
/* Bubble Menu: Start */
.febubblemenu {
box-shadow: var(--shadow-0) var(--shadow-medium-y) var(--shadow-medium-b) rgba(var(--bubble-menu-box-shadow-color-r), var(--bubble-menu-box-shadow-color-g), var(--bubble-menu-box-shadow-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
align-items: center;
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
padding: var(--layout-xxxxx-small);
z-index: 2;
}
/* Bubble Menu: End */
/* TipTap: Start */
form .contenteditable .tiptap,
.fcbox .contenteditable .tiptap,
form .contenteditableview .tiptap,
.fcbox .contenteditableview .tiptap {
cursor: text;
/* Blockquote: Start */
/* Blockquote: End */
/* Code: Start */
/* Code: End */
/* Hr: Start */
/* Hr: End */
/* List: Start */
/* Bullet List: Start */
/* Bullet List: End */
/* Ordered List: Start */
/* Ordered List: End */
/* List: End */
/* Placeholder: Start */
/* Placeholder: End */
/* Pre: Start */
/* Pre: End */
}
form .contenteditable .tiptap blockquote,
.fcbox .contenteditable .tiptap blockquote,
form .contenteditableview .tiptap blockquote,
.fcbox .contenteditableview .tiptap blockquote {
border-left: solid var(--layout-base) var(--color-primary-border-base);
padding: var(--layout-base);
}
form .contenteditable .tiptap code,
.fcbox .contenteditable .tiptap code,
form .contenteditableview .tiptap code,
.fcbox .contenteditableview .tiptap code {
background-color: var(--color-secondary-list-base);
border-radius: var(--layout-base);
padding: var(--layout-base);
}
form .contenteditable .tiptap hr,
.fcbox .contenteditable .tiptap hr,
form .contenteditableview .tiptap hr,
.fcbox .contenteditableview .tiptap hr {
color: var(--color-primary-border-base);
}
form .contenteditable .tiptap ul,
.fcbox .contenteditable .tiptap ul,
form .contenteditableview .tiptap ul,
.fcbox .contenteditableview .tiptap ul,
form .contenteditable .tiptap ol,
.fcbox .contenteditable .tiptap ol,
form .contenteditableview .tiptap ol,
.fcbox .contenteditableview .tiptap ol {
counter-reset: list-item;
margin-block-end: var(--order-unordered-list-padding);
margin-block-start: var(--order-unordered-list-padding);
margin-inline-end: var(--layout-0);
margin-inline-start: var(--layout-0);
padding-inline-start: var(--layout-xx-medium);
/* Variables: Start */
--order-unordered-list-padding: 1em;
/* Variables: End */
}
form .contenteditable .tiptap ul li,
.fcbox .contenteditable .tiptap ul li,
form .contenteditableview .tiptap ul li,
.fcbox .contenteditableview .tiptap ul li,
form .contenteditable .tiptap ol li,
.fcbox .contenteditable .tiptap ol li,
form .contenteditableview .tiptap ol li,
.fcbox .contenteditableview .tiptap ol li {
overflow: visible;
}
form .contenteditable .tiptap ul li,
.fcbox .contenteditable .tiptap ul li,
form .contenteditableview .tiptap ul li,
.fcbox .contenteditableview .tiptap ul li {
list-style: outside disc;
}
form .contenteditable .tiptap ol li,
.fcbox .contenteditable .tiptap ol li,
form .contenteditableview .tiptap ol li,
.fcbox .contenteditableview .tiptap ol li {
list-style: outside decimal;
}
form .contenteditable .tiptap .is-editor-empty:first-child::before,
.fcbox .contenteditable .tiptap .is-editor-empty:first-child::before,
form .contenteditableview .tiptap .is-editor-empty:first-child::before,
.fcbox .contenteditableview .tiptap .is-editor-empty:first-child::before {
color: var(--color-primary-text-light);
content: attr(data-placeholder);
height: 0;
pointer-events: none;
}
form .contenteditable .tiptap pre,
.fcbox .contenteditable .tiptap pre,
form .contenteditableview .tiptap pre,
.fcbox .contenteditableview .tiptap pre {
background-color: var(--color-neutrals-black);
border-radius: var(--layout-base);
color: var(--color-neutrals-white);
padding: var(--layout-base);
/* Code: Start */
/* Code: End */
}
form .contenteditable .tiptap pre code,
.fcbox .contenteditable .tiptap pre code,
form .contenteditableview .tiptap pre code,
.fcbox .contenteditableview .tiptap pre code {
background-color: var(--color-neutrals-transparent);
}
/* Br: Start */
form .contenteditableview .tiptap br.ProseMirror-trailingBreak,
.fcbox .contenteditableview .tiptap br.ProseMirror-trailingBreak {
display: none;
}
/* Br: End */
form .contenteditable .tiptap,
.fcbox .contenteditable .tiptap {
padding: var(--layout-xxxx-small);
}
/* TipTap: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Input: Start */
form input {
height: var(--layout-xx-medium);
/* Direction: Start */
/* Direction: Start */
}
form input[type='button'][dir='ltr'],
form input[type='file'][dir='ltr'],
form input[type='number'][dir='ltr'],
form input[type='range'][dir='ltr'],
form input[type='reset'][dir='ltr'],
form input[type='submit'][dir='ltr'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
form input[type='color'][dir='ltr'],
form input[type='date'][dir='ltr'],
form input[type='email'][dir='ltr'],
form input[type='password'][dir='ltr'],
form input[type='search'][dir='ltr'],
form input[type='tel'][dir='ltr'],
form input[type='text'][dir='ltr'],
form input[type='time'][dir='ltr'],
form input[type='url'][dir='ltr'],
form input[type='week'][dir='ltr'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* onClear: Start */
/* onClear: End */
}
form input[type='color'][dir='ltr'].withonclear,
form input[type='date'][dir='ltr'].withonclear,
form input[type='email'][dir='ltr'].withonclear,
form input[type='password'][dir='ltr'].withonclear,
form input[type='search'][dir='ltr'].withonclear,
form input[type='tel'][dir='ltr'].withonclear,
form input[type='text'][dir='ltr'].withonclear,
form input[type='time'][dir='ltr'].withonclear,
form input[type='url'][dir='ltr'].withonclear,
form input[type='week'][dir='ltr'].withonclear {
padding-right: var(--layout-xxx-medium);
}
form input[type='button'][dir='rtl'],
form input[type='file'][dir='rtl'],
form input[type='number'][dir='rtl'],
form input[type='range'][dir='rtl'],
form input[type='reset'][dir='rtl'],
form input[type='submit'][dir='rtl'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
form input[type='color'][dir='rtl'],
form input[type='date'][dir='rtl'],
form input[type='email'][dir='rtl'],
form input[type='password'][dir='rtl'],
form input[type='search'][dir='rtl'],
form input[type='tel'][dir='rtl'],
form input[type='text'][dir='rtl'],
form input[type='time'][dir='rtl'],
form input[type='url'][dir='rtl'],
form input[type='week'][dir='rtl'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* onClear: Start */
/* onClear: End */
}
form input[type='color'][dir='rtl'].withonclear,
form input[type='date'][dir='rtl'].withonclear,
form input[type='email'][dir='rtl'].withonclear,
form input[type='password'][dir='rtl'].withonclear,
form input[type='search'][dir='rtl'].withonclear,
form input[type='tel'][dir='rtl'].withonclear,
form input[type='text'][dir='rtl'].withonclear,
form input[type='time'][dir='rtl'].withonclear,
form input[type='url'][dir='rtl'].withonclear,
form input[type='week'][dir='rtl'].withonclear {
padding-left: var(--layout-xxx-medium);
}
/* Input: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Select: Start */
form .select {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
background-color: var(--color-neutrals-white);
display: flex;
min-height: var(--layout-xx-medium);
position: relative;
/* Avatar: Start */
/* Avatar: End */
/* Container Area: Start */
/* Container Area: End */
/* Direction: Start */
/* Direction: End */
/* Icon: Start */
/* Direction: Start */
/* Direction: End */
/* Last: Start */
/* Last: End */
/* Loading: Start */
/* Loading: End */
/* Icon: End */
/* Inside: Start */
/* Inside: End */
}
form .select .avatar {
margin-bottom: var(--layout-xxxx-small);
margin-top: var(--layout-xxxx-small);
/* Direction: Start */
/* Direction: End */
}
form .select .avatar[dir='ltr'] {
margin-right: var(--layout-xxxx-small);
}
form .select .avatar[dir='rtl'] {
margin-left: var(--layout-xxxx-small);
}
form .select ~ .containerarea {
width: var(--percentage-100);
/* List Item: Button & Link: Start */
/* List Item: Button & Link: End */
}
form .select ~ .containerarea .listitem[data-type='button'],
form .select ~ .containerarea .listitem[data-type='link'] {
align-items: center;
}
form .select[dir='ltr'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xx-medium);
text-align: left;
}
form .select[dir='rtl'] {
padding-left: var(--layout-xx-medium);
padding-right: var(--layout-xxxx-small);
text-align: right;
}
form .select .icon[dir='ltr'] {
margin-right: var(--layout-xxxx-small);
}
form .select .icon[dir='rtl'] {
margin-left: var(--layout-xxxx-small);
}
form .select .icon.last {
transition: opacity var(--time-commons-base) ease;
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
cursor: pointer;
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
form .select .icon.last[dir='ltr'] {
margin-right: var(--layout-0);
right: var(--layout-xxxx-small);
}
form .select .icon.last[dir='rtl'] {
margin-left: var(--layout-0);
left: var(--layout-xxxx-small);
}
form .select .icon.last svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
form .select .icon.loading {
top: var(--percentage-22);
/* Direction: Start */
/* Direction: End */
}
form .select .icon.loading[dir='ltr'] {
margin-right: var(--layout-0);
}
form .select .icon.loading[dir='rtl'] {
margin-left: var(--layout-0);
}
form .select em {
font-style: normal;
}
form .select .binside {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: var(--layout-0);
padding-bottom: var(--layout-xxxxx-small);
padding-top: var(--layout-xxxxx-small);
}
/* States: Disable: Icon: Start */
form [data-states='disable'] .select .icon svg {
fill: var(--color-primary-disable-dark);
}
/* States: Disable: Icon: End */
/* Select: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Textarea: Start */
form textarea {
min-height: var(--form-text-area-min-height);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
resize: none;
/* Direction: Start */
/* Direction: End */
}
form textarea[dir='ltr'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
form textarea[dir='rtl'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Textarea: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Toolbar: Start */
form .toolbar {
align-items: center;
background-color: var(--color-neutrals-grey-1);
display: flex;
padding: var(--layout-xxxxx-small) var(--layout-base);
/* Divider: SVG: Start */
/* Divider: SVG: End */
/* IconButton: Start */
/* IconButton: End */
}
form .toolbar .icon.edivider svg {
fill: var(--color-primary-border-base);
}
form .toolbar .iconbutton {
margin-left: var(--layout-base);
margin-right: var(--layout-base);
}
/* Toolbar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Input, Select, TextArea: Start */
form input,
form .select,
form select,
form textarea {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
color: var(--color-primary-text-base);
font-size: var(--font-medium-size);
flex-basis: var(--percentage-100);
line-height: var(--font-large-line-height);
min-width: var(--layout-0);
/* Placeholder: Start */
/* Placeholder: End */
/* States: Disable: Start */
/* States: Disable: End */
}
form input::placeholder,
form .select::placeholder,
form select::placeholder,
form textarea::placeholder,
form input:-ms-input-placeholder,
form .select:-ms-input-placeholder,
form select:-ms-input-placeholder,
form textarea:-ms-input-placeholder {
color: var(--color-primary-text-light);
}
form input[disabled],
form .select[disabled],
form select[disabled],
form textarea[disabled] {
background-color: var(--color-neutrals-white);
}
/* Input, Select, TextArea: End */
/* States: Start */
/* Disable: Input: Start */
form [data-states='disable'] .contenteditable,
form [data-states='disable'] input,
form [data-states='disable'] .select,
form [data-states='disable'] select,
form [data-states='disable'] textarea {
color: var(--color-primary-disable-dark);
pointer-events: none;
/* Placeholder: Start */
/* Placeholder: End */
}
form [data-states='disable'] .contenteditable::placeholder,
form [data-states='disable'] input::placeholder,
form [data-states='disable'] .select::placeholder,
form [data-states='disable'] select::placeholder,
form [data-states='disable'] textarea::placeholder,
form [data-states='disable'] .contenteditable:-ms-input-placeholder,
form [data-states='disable'] input:-ms-input-placeholder,
form [data-states='disable'] .select:-ms-input-placeholder,
form [data-states='disable'] select:-ms-input-placeholder,
form [data-states='disable'] textarea:-ms-input-placeholder {
color: var(--color-primary-disable-dark);
}
/* Disable: Input: End */
/* Error: Input: Start */
form [data-states='error'] .contenteditable,
form [data-states='error'] input,
form [data-states='error'] .select,
form [data-states='error'] select,
form [data-states='error'] textarea {
border-color: var(--color-alternative-error-base);
}
/* Focus: Input: Start */
form [data-states='focus'] .contenteditable,
form [data-states='focus'] input,
form [data-states='focus'] .select,
form [data-states='focus'] select,
form [data-states='focus'] textarea {
border-color: var(--color-alternative-focus-base);
}
/* Focus: Input: End */
/* States: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Field Editor (Container Editor): Start */
form .containereditor {
flex-flow: row wrap;
/* Count: Start */
/* Count: End */
/* Error: Start */
/* Error: End */
/* Field Editor: Start */
/* Field Editor: End */
/* Instruction: Start */
/* Instruction: End */
/* Label: Start */
/* Label: End */
/* States: Start */
/* Disable: Count: Start */
/* Disable: Count: End */
/* Error: Start */
/* Count: Start */
/* Count: End */
/* Errors: Start */
/* Errors: End */
/* Label: Start */
/* Label: End */
/* Error: End */
/* Focus: Label: Start */
/* Focus: Label: End */
/* States: End */
}
form .containereditor .fcount,
form .containereditor .ferrors,
form .containereditor .finstruction,
form .containereditor .flabel {
display: block;
}
form .containereditor .fcount,
form .containereditor .ferrors,
form .containereditor .finstruction {
position: absolute;
bottom: var(--layout-xxxxx-small);
}
form .containereditor .fcount,
form .containereditor .ferrors,
form .containereditor .finstruction {
line-height: var(--font-small-line-height);
}
form .containereditor .fcount,
form .containereditor .finstruction {
transition: opacity var(--time-commons-base) ease;
color: var(--color-primary-text-light);
}
form .containereditor .fcount {
font-size: var(--font-xx-small-size);
/* Direction: Start */
/* Direction: End */
}
form .containereditor .fcount[dir='ltr'] {
right: var(--layout-0);
}
form .containereditor .fcount[dir='rtl'] {
left: var(--layout-0);
}
form .containereditor .ferrors,
form .containereditor .finstruction,
form .containereditor .flabel {
font-size: var(--font-x-small-size);
}
form .containereditor .ferrors,
form .containereditor .finstruction {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Direction: Start */
/* Direction: End */
}
form .containereditor .ferrors[dir='ltr'],
form .containereditor .finstruction[dir='ltr'] {
left: var(--layout-0);
}
form .containereditor .ferrors[dir='rtl'],
form .containereditor .finstruction[dir='rtl'] {
right: var(--layout-0);
}
form .containereditor .ferrors {
transition: opacity var(--time-commons-base) ease;
color: var(--color-alternative-error-base);
font-weight: var(--text-weight-regular);
opacity: var(--alpha-0);
pointer-events: none;
}
form .containereditor .fieldeditor {
display: flex;
flex-flow: row wrap;
min-width: var(--form-containereditor-min-width);
overflow: visible;
position: relative;
width: var(--percentage-100);
}
form .containereditor .finstruction,
form .containereditor .flabel {
font-size: var(--font-x-small-size);
}
form .containereditor .finstruction {
max-width: var(--percentage-80);
}
form .containereditor .flabel {
font-style: normal;
line-height: var(--font-medium-line-height);
margin-bottom: var(--layout-xxxxx-small);
/* Direction: Start */
/* Direction: End */
}
form .containereditor .flabel[dir='ltr'] {
margin-right: var(--layout-base);
}
form .containereditor .flabel[dir='rtl'] {
margin-left: var(--layout-base);
}
form .containereditor[data-states='disable'] .fcount,
form .containereditor[data-states='disable'] .finstruction,
form .containereditor[data-states='disable'] .flabel {
color: var(--color-primary-disable-dark);
}
form .containereditor[data-states='error'] .fcount,
form .containereditor[data-states='error'] .finstruction {
opacity: var(--alpha-0);
pointer-events: none;
}
form .containereditor[data-states='error'] .ferrors {
opacity: var(--alpha-100);
pointer-events: all;
}
form .containereditor[data-states='error'] .flabel {
color: var(--color-alternative-error-base);
}
form .containereditor[data-states='focus'] .flabel {
color: var(--color-alternative-focus-base);
}
/* Field Editor (Container Editor): End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Field: Start */
form .field {
flex-flow: row wrap;
/* Count: Start */
/* Count: End */
/* Error: Start */
/* Error: End */
/* IconButton: Start */
/* IconButton: End */
/* Instruction: Start */
/* Instruction: End */
/* Label: Start */
/* Label: End */
/* Tag: Start */
/* Tag: End */
/* States: Start */
/* Disable: Count: Start */
/* Disable: Count: End */
/* Error: Start */
/* Count: Start */
/* Count: End */
/* Errors: Start */
/* Errors: End */
/* Label: Start */
/* Label: End */
/* Error: End */
/* Focus: Label: Start */
/* Focus: Label: End */
/* Loading: Start */
/* Loading: End */
/* States: End */
}
form .field .fcount,
form .field .ferrors,
form .field .finstruction {
display: block;
}
form .field .fcount,
form .field .ferrors,
form .field .finstruction {
position: absolute;
bottom: var(--layout-xxxxx-small);
}
form .field .fcount,
form .field .ferrors,
form .field .finstruction {
line-height: var(--font-small-line-height);
}
form .field .fcount,
form .field .finstruction {
transition: opacity var(--time-commons-base) ease;
color: var(--color-primary-text-light);
}
form .field .fcount {
font-size: var(--font-xx-small-size);
/* Direction: Start */
/* Direction: End */
}
form .field .fcount[dir='ltr'] {
right: var(--layout-0);
}
form .field .fcount[dir='rtl'] {
left: var(--layout-0);
}
form .field .ferrors,
form .field .finstruction,
form .field .flabel {
font-size: var(--font-x-small-size);
}
form .field .ferrors,
form .field .finstruction {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Direction: Start */
/* Direction: End */
}
form .field .ferrors[dir='ltr'],
form .field .finstruction[dir='ltr'] {
left: var(--layout-0);
}
form .field .ferrors[dir='rtl'],
form .field .finstruction[dir='rtl'] {
right: var(--layout-0);
}
form .field .ferrors {
transition: opacity var(--time-commons-base) ease;
color: var(--color-alternative-error-base);
font-weight: var(--text-weight-regular);
opacity: var(--alpha-0);
pointer-events: none;
}
form .field .iconbutton[data-style='iclose'] {
position: absolute;
top: var(--layout-xx-medium);
/* stylelint-disable-line */
/* Direction: Start */
/* Direction: End */
}
form .field .iconbutton[data-style='iclose'][dir='ltr'] {
right: var(--layout-xxxx-small);
}
form .field .iconbutton[data-style='iclose'][dir='rtl'] {
left: var(--layout-xxxx-small);
}
form .field .finstruction,
form .field .flabel {
font-size: var(--font-x-small-size);
}
form .field .finstruction {
max-width: var(--percentage-80);
}
form .field .flabel {
align-items: flex-start;
display: flex;
font-style: normal;
gap: var(--layout-xxxxx-small);
line-height: var(--font-medium-line-height);
margin-bottom: var(--layout-xxxxx-small);
/* Direction: Start */
/* Direction: End */
/* Required: Start */
/* Required: End */
}
form .field .flabel[dir='ltr'] {
margin-right: var(--layout-base);
}
form .field .flabel[dir='rtl'] {
margin-left: var(--layout-base);
}
form .field .flabel .flrequired {
color: var(--color-alternative-error-base);
font-size: var(--font-x-medium-size);
}
form .field .tag {
position: absolute;
top: var(--percentage-52);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-secondary-list-base);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
height: var(--form-tag-height);
line-height: var(--font-standard-line-height);
padding: var(--layout-xxxx-small);
text-align: center;
text-transform: uppercase;
width: var(--form-tag-width);
/* Direction: Start */
/* Direction: End */
}
form .field .tag[dir='ltr'] {
border-left: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-0) var(--layout-base) var(--layout-base) var(--layout-0);
right: var(--layout-border);
}
form .field .tag[dir='rtl'] {
border-right: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base) var(--layout-0) var(--layout-0) var(--layout-base);
left: var(--layout-border);
}
form .field[data-states='disable'] .fcount,
form .field[data-states='disable'] .finstruction,
form .field[data-states='disable'] .flabel {
color: var(--color-primary-disable-dark);
}
form .field[data-states='error'] .fcount,
form .field[data-states='error'] .finstruction {
opacity: var(--alpha-0);
pointer-events: none;
}
form .field[data-states='error'] .ferrors {
opacity: var(--alpha-100);
pointer-events: all;
}
form .field[data-states='error'] .flabel {
color: var(--color-alternative-error-base);
}
form .field[data-states='focus'] .flabel {
color: var(--color-alternative-focus-base);
}
form .field[data-states='loading'] {
pointer-events: none;
/* Icon: Start */
}
form .field[data-states='loading'] .loading {
animation: spinner var(--form-field-loading-duration) linear infinite normal none;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background-color: var(--color-neutrals-white);
position: absolute;
transform: translateY(var(--form-position-negative));
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
form .field[data-states='loading'] .loading[dir='ltr'] {
right: var(--layout-xxxx-small);
}
form .field[data-states='loading'] .loading[dir='rtl'] {
left: var(--layout-xxxx-small);
}
form .field[data-states='loading'] .loading svg {
fill: var(--color-primary-link-base);
}
/* Field: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Field Button: Start */
form .fieldbutton {
gap: var(--layout-xxxxx-small);
/* Direction: Start */
/* Direction: End */
/* Error: Start */
/* Error: End */
/* Inside: Start */
/* Direction: Start */
/* Direction: End */
/* Inside: End */
/* Label: Start */
/* Label: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* States: End */
/* Switch: Start */
/* Switch: End */
/* Text: Start */
/* Text: End */
}
form .fieldbutton[dir='ltr'] {
flex-flow: row wrap;
}
form .fieldbutton[dir='rtl'] {
flex-flow: row-reverse wrap;
}
form .fieldbutton .ferrors {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity var(--time-commons-base) ease;
color: var(--color-alternative-error-base);
font-size: var(--font-x-small-size);
font-weight: var(--text-weight-regular);
opacity: var(--alpha-0);
pointer-events: none;
}
form .fieldbutton .fbinside,
form .fieldbutton .flabel,
form .fieldbutton .link,
form .fieldbutton .ftext {
display: block;
}
form .fieldbutton .checkboxbutton + .fbinside,
form .fieldbutton .radiobutton + .fbinside {
flex: 1;
/* Direction: Start */
/* Direction: End */
}
form .fieldbutton .checkboxbutton + .fbinside[dir='rtl'],
form .fieldbutton .radiobutton + .fbinside[dir='rtl'] {
order: 1;
}
form .fieldbutton .switch + .fbinside {
flex: 1;
}
form .fieldbutton .switch[data-placement='left'] + .fbinside[dir='ltr'] {
order: 2;
}
form .fieldbutton .switch[data-placement='left'] + .fbinside[dir='rtl'] {
order: 1;
}
form .fieldbutton .switch[data-placement='right'] + .fbinside[dir='ltr'] {
order: 1;
}
form .fieldbutton .switch[data-placement='right'] + .fbinside[dir='rtl'] {
order: 2;
}
form .fieldbutton .flabel,
form .fieldbutton .ftext,
form .fieldbutton .link {
line-height: var(--font-large-line-height);
}
form .fieldbutton .flabel {
font-size: var(--font-large-size);
font-style: normal;
font-weight: var(--font-large-weight);
}
form .fieldbutton[data-states='disable'] .flabel,
form .fieldbutton[data-states='disable'] .ftext,
form .fieldbutton[data-states='disable'] .link {
color: var(--color-primary-disable-dark);
pointer-events: none;
}
form .fieldbutton[data-states='error'] .ferrors {
opacity: var(--alpha-100);
pointer-events: all;
}
form .fieldbutton .switch {
margin-top: var(--form-switch-margin-top);
}
form .fieldbutton .ftext,
form .fieldbutton .link {
font-size: var(--font-medium-size);
}
/* Field Button: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Field: Start */
.containereditor,
.field,
.fieldbutton {
display: flex;
min-width: var(--form-field-min-width);
overflow: visible;
padding-bottom: var(--layout-x-small);
position: relative;
}
/* Field: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
form.search {
margin-bottom: var(--layout-x-small);
min-width: var(--form-search-min-width);
/* Inside: Start */
/* Inside: End */
}
form.search .field {
padding-bottom: var(--layout-0);
/* Icon: Start */
/* Icon: End */
/* IconButton: Start */
/* IconButton: End */
/* States: Icon: SVG: Start */
/* States: Icon: SVG: End */
}
form.search .field .icon.first {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
form.search .field .icon.first[dir='ltr'] {
left: var(--layout-xxxx-small);
}
form.search .field .icon.first[dir='rtl'] {
right: var(--layout-xxxx-small);
}
form.search .field .icon.first svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
form.search .field input {
width: var(--percentage-100);
/* Direction: Start */
/* Direction: End */
}
form.search .field input[dir='ltr'] {
padding-left: var(--layout-xxxx-medium);
padding-right: var(--layout-xxx-medium);
}
form.search .field input[dir='rtl'] {
padding-left: var(--layout-xxx-medium);
padding-right: var(--layout-xxxx-medium);
}
form.search .field .iconbutton[data-style='iclose'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
}
form.search .field[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
/* Hacks: MAC: Chrome & Safari: Start */
.msafari .search input,
.mchrome .search input {
-webkit-appearance: none;
-webkit-border-radius: var(--layout-0);
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
/* Hacks: MAC: Chrome & Safari: End */
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Switch: Start */
.switch {
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
background-color: var(--color-primary-disable-base);
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-xxxxx-small);
cursor: pointer;
display: block;
height: var(--layout-xxxx-small);
overflow: visible;
position: relative;
width: var(--layout-xxx-medium);
/* Icon: Start */
/* Icon: End */
/* Inside: Start */
/* Inside: End */
/* Placement: Direction: Start */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* Placement: Direction: End */
/* States: Start */
/* Active: Inside: Start */
/* Active: Inside End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* Loading: Icon: Start */
/* Loading: Icon: End */
/* States: End */
}
.switch .icon {
opacity: var(--alpha-0);
/* SVG: Start */
/* SVG: End */
}
.switch .icon svg {
fill: var(--color-neutrals-white);
height: var(--layout-xxx-small);
position: absolute;
top: var(--form-switch-svg-left-top);
/* stylelint-disable-line */
left: var(--form-switch-svg-left-top);
/* stylelint-disable-line */
width: var(--layout-xxx-small);
}
.switch .binside {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--form-switch-box-shadow-color-r), var(--form-switch-box-shadow-color-g), var(--form-switch-box-shadow-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
transition: left var(--time-commons-base) ease, background-color var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-xx-small);
height: var(--layout-xx-small);
position: absolute;
top: var(--form-switch-top-negative);
/* stylelint-disable-line */
left: var(--form-switch-left-negative);
/* stylelint-disable-line */
text-indent: var(--text-indentation-negative);
width: var(--layout-xx-small);
}
.switch[data-placement='left'][dir='ltr'] {
margin-right: var(--layout-xxxxx-small);
order: 1;
}
.switch[data-placement='left'][dir='rtl'] {
margin-left: var(--layout-xxxxx-small);
order: 2;
}
.switch[data-placement='right'][dir='ltr'] {
margin-right: var(--layout-xxxxx-small);
order: 2;
}
.switch[data-placement='right'][dir='rtl'] {
margin-left: var(--layout-xxxxx-small);
order: 1;
}
.switch[data-states='active'] .binside {
left: var(--form-switch-left);
}
.switch[data-states='disable'] {
border-color: var(--color-primary-disable-dark);
/* Inside: Start */
/* Inside: End */
}
.switch[data-states='disable'] .binside {
background-color: var(--color-primary-disable-base);
border-color: var(--color-primary-disable-dark);
}
.switch:hover,
.switch[data-states='active'] {
background-color: var(--color-primary-primary-light);
/* Inside: Start */
/* Inside: End */
/* Disable: Start */
/* Disable: End */
}
.switch:hover .binside,
.switch[data-states='active'] .binside {
background-color: var(--color-primary-primary-dark);
}
.switch:hover[data-states='disable'],
.switch[data-states='active'][data-states='disable'] {
background-color: var(--color-primary-disable-base);
border-color: var(--color-primary-disable-dark);
/* Inside: Start */
/* Inside: End */
}
.switch:hover[data-states='disable'] span,
.switch[data-states='active'][data-states='disable'] span {
background-color: var(--color-primary-disable-base);
border-color: var(--color-primary-disable-dark);
}
.switch[data-states='loading'] .icon {
opacity: var(--alpha-100);
z-index: 2;
/* SVG: Start */
/* SVG: End */
}
.switch[data-states='loading'] .icon svg {
animation: spinner var(--animation-all-duration) linear infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
}
/* Switch: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
form {
--form-select-container-area-color-b: 135;
--form-select-container-area-color-g: 125;
--form-select-container-area-color-r: 96;
--form-color-picker-input-width: 7.25rem;
/* 116px */
--form-color-picker-max-width: 14rem;
/* 224px */
--form-color-picker-min-width: 5rem;
/* 80px */
--form-date-month-width: 9.75rem;
/* 156px */
--form-position-negative: -50%;
}
/* Container Editor: Start */
.containereditor {
--form-containereditor-min-width: 7.375rem;
/* 118px */
--bubble-menu-box-shadow-color-b: 135;
--bubble-menu-box-shadow-color-g: 125;
--bubble-menu-box-shadow-color-r: 96;
}
/* Container Editor: End */
/* Field: Start */
.field {
--form-field-loading-duration: 1568ms;
--form-field-min-width: 7.375rem;
/* 118px */
}
/* Field: End */
/* Search: Start */
.search {
--form-search-min-width: 19.75rem;
/* 316px */
}
/* Search: End */
/* Switch: Start */
.switch {
--form-switch-box-shadow-color-b: 135;
--form-switch-box-shadow-color-g: 125;
--form-switch-box-shadow-color-r: 96;
--form-switch-left: 0.9375rem;
/* 15px */
--form-switch-left-negative: -0.0625rem;
--form-switch-margin-top: 0.375rem;
/* 6px */
--form-switch-svg-left-top: 0.0625rem;
--form-switch-top-negative: -0.3125rem;
}
/* Switch: End */
/* Tag: Start */
.tag {
--form-tag-height: 2.375rem;
/* 38px */
--form-tag-width: 3.25rem;
/* 52px */
}
/* Tag: End */
/* TextArea: Start */
.textarea,
textarea {
--form-text-area-min-height: 5rem;
/* 80px */
}
/* TextArea: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Select: Start */
form .select ~ .containerarea .listitem .item {
align-items: center;
}
/* Select: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Form: Start */
form {
overflow: visible;
position: relative;
/* Inside: Start */
/* Inside: End */
/* States: Disable: Start */
/* States: Disable: End */
/* With Tag: Direction: Start */
/* With Tag: Direction: End */
}
form fieldset {
overflow: visible;
position: relative;
/* Column: Start */
/* Column: End */
}
form fieldset.column {
align-items: flex-end;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Field: Start */
/* Field: End */
}
form fieldset.column .field,
form fieldset.column .fieldbutton,
form fieldset.column .containereditor {
flex: 1;
}
form[data-states='disable'] {
pointer-events: none;
}
form .withtag [type='text'][dir='ltr'] {
padding-right: var(--layout-xx-large);
}
form .withtag [type='text'][dir='rtl'] {
padding-left: var(--layout-xx-large);
}
/* Form: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.navigationbar .body {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
flex: 1;
overflow-x: hidden;
padding-left: var(--layout-base);
padding-right: var(--layout-base);
}
.navigationbar .body ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.navigationbar .body ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.navigationbar .body ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.navigationbar .footer {
height: var(--layout-xxxx-large);
padding-top: var(--layout-xxx-small);
width: var(--percentage-100);
/* Direction: Start */
/* Direction: End */
}
.navigationbar .footer[dir='ltr'] {
left: var(--layout-0);
}
.navigationbar .footer[dir='rtl'] {
right: var(--layout-0);
}
/* Sticky: Start */
.navigationbar.footer-sticky .footer {
position: absolute;
bottom: var(--layout-xxx-small);
}
/* Sticky: End */
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.navigationbar .header {
height: var(--layout-xx-medium);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.navigationbar {
--navigation-breakpoint-mobile-width: 8rem;
/* 128px */
--navigation-breakpoint-mobile-width-footer: 5.5rem;
/* 88px */
--navigation-breakpoint-desktop-width: 4rem;
/* 64px */
--navigation-breakpoint-desktop-width-nofooter: 6rem;
/* 96px */
--navigation-body-breakpoint-mobile-width: 13.5rem;
/* 216px; */
--navigation-body-breakpoint-desktop-width: 9.5rem;
/* 152px; */
--navigation-body-breakpoint-desktop-height: 10.25rem;
/* 164px; */
--navigation-body-breakpoint-mobile-width-header: 17rem;
/* 272px; */
--navigation-body-breakpoint-desktop-width-header: 13rem;
/* 208px; */
--navigation-body-breakpoint-desktop-height-header: 13.75rem;
/* 220px; */
--navigation-width: 18.25rem;
/* 292px; */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.navigationbar {
display: flex;
flex-direction: column;
height: calc(var(--viewport-height-100) - var(--navigation-breakpoint-mobile-width-footer));
gap: var(--layout-xxx-small);
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
position: relative;
width: var(--navigation-width);
/* Responsive: Start */
/* Responsive: End */
/* Footer: Start */
/* Sticky: Start */
/* Sticky: End */
/* Footer: End */
/* Sticky: Start */
/* Sticky: End */
}
@media (min-width: 1024px) {
.navigationbar {
width: auto;
}
}
.navigationbar .footer,
.navigationbar .header {
padding-left: var(--layout-xxx-small);
padding-right: var(--layout-xxx-small);
}
.navigationbar.footer-sticky {
height: calc(var(--viewport-height-100) - var(--navigation-breakpoint-desktop-width));
padding-bottom: var(--layout-xxxx-large);
}
.navigationbar.sticky {
position: sticky;
top: var(--layout-0);
z-index: 1;
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.accordion .abody {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
}
.accordion .abody ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.accordion .abody ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.accordion .abody ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.accordion .aheader {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--layout-xxxxx-small);
list-style: none;
/* Field Button: Start */
/* Field Button: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* States: Focus Visible: Start */
/* States: Focus Visible: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
.accordion .aheader .fieldbutton {
padding-bottom: var(--layout-0);
/* Checkbox & Radio Button: Direction: Start */
/* Checkbox & Radio Button: Direction: End */
}
.accordion .aheader .fieldbutton .checkboxbutton.left[dir='ltr'],
.accordion .aheader .fieldbutton .radiobutton.left[dir='ltr'],
.accordion .aheader .fieldbutton .checkboxbutton.left[dir='rtl'],
.accordion .aheader .fieldbutton .radiobutton.left[dir='rtl'] {
margin-left: var(--layout-0);
margin-right: var(--layout-0);
}
.accordion .aheader .placeholder[data-shape='line'] {
margin-top: var(--accordion-placeholder-line-magin-top);
}
.accordion .aheader:focus:not(:focus-visible) {
box-shadow: none;
}
.accordion .aheader:focus-visible {
box-shadow: inset var(--layout-0) var(--layout-0) var(--layout-base) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-100));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
.accordion .aheader [data-style='typocontainer'] {
flex: 1;
gap: var(--layout-xxxx-small);
/* Badge & Tag: Start */
/* Badge & Tag: End */
/* Title: Start */
/* Title: End */
}
.accordion .aheader [data-style='typocontainer'] .badge[data-shape='round'],
.accordion .aheader [data-style='typocontainer'] .badge[data-shape='square'] {
display: inline-block;
vertical-align: middle;
}
.accordion .aheader [data-style='typocontainer'] [data-style='typotitle1'] {
flex: 1;
line-height: var(--font-xx-large-line-height);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.accordion {
--accordion-box-shadow-rgba-color-a: 0.4;
--accordion-box-shadow-rgba-color-b: 135;
--accordion-box-shadow-rgba-color-g: 125;
--accordion-box-shadow-rgba-color-r: 96;
--accordion-min-width: 19.75rem;
/* 316px; */
--accordion-placeholder-line-magin-top: 0.375rem;
/* 6px; */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Accordion: Start */
.accordion {
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
display: flex;
flex-direction: column;
min-width: var(--accordion-min-width);
/* Ai: Start */
/* Ai: End */
/* Body: Start */
/* Body: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Inactive: Start */
/* Inactive: End */
/* States: End */
/* Styles: Start */
/* Border: Start */
/* Border: End */
/* Shadow: Start */
/* Shadow: End */
/* Styles: End */
}
.accordion.acai {
animation: ai-accordion-cards-modal-shadow var(--animation-all-duration) ease-in-out 1 forwards;
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
/* Variables: Start */
--animation-all-duration: 3s;
/* Variables: End */
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto auto, auto auto;
}
.accordion .abody,
.accordion .aheader {
padding: var(--layout-xxxx-small);
width: var(--percentage-100);
}
.accordion[data-states='disable'] {
color: var(--color-primary-disable-dark);
pointer-events: none;
/* Icon: Start */
/* Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.accordion[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.accordion[data-states='disable'] [data-style='typotitle1'] {
color: var(--color-primary-disable-dark);
}
.accordion[data-states='inactive'] {
color: var(--color-primary-disable-dark);
/* Icon: Start */
/* Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.accordion[data-states='inactive'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.accordion[data-states='inactive'] [data-style='typotitle1'] {
color: var(--color-primary-disable-dark);
}
.accordion[data-style='border'] {
border: solid var(--layout-border) var(--color-primary-border-base);
}
.accordion[data-style='shadow'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--accordion-box-shadow-rgba-color-r), var(--accordion-box-shadow-rgba-color-g), var(--accordion-box-shadow-rgba-color-b), var(--accordion-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
}
/* Accordion: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Tabs Item: Start */
.tabs .tabsitem {
transition: border-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
border-bottom: solid var(--layout-half) var(--color-neutrals-transparent);
color: var(--color-primary-text-base);
height: var(--layout-xx-medium);
padding: var(--layout-xxxxx-small) var(--layout-xxxx-small);
/* Direction: Start */
/* Direction: End */
/* Inside: Start */
/* Inside: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.tabs .tabsitem[dir='ltr'] {
flex-flow: row wrap;
}
.tabs .tabsitem[dir='rtl'] {
flex-flow: row-reverse wrap;
/* Icon: Left: Start */
/* Icon: Left: End */
/* Icon: Right: Start */
/* Icon: Right: End */
}
.tabs .tabsitem[dir='rtl'] .tileft[dir='rtl'] {
order: 1;
}
.tabs .tabsitem[dir='rtl'] .tiright[dir='rtl'] {
order: 1;
}
.tabs .tabsitem .binside {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
.tabs .tabsitem[data-states='active'] {
border-color: var(--color-primary-link-base);
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.tabs .tabsitem[data-states='active'] .icon svg {
fill: var(--color-primary-icon-dark);
}
.tabs .tabsitem[data-states='disable'] {
color: var(--color-primary-disable-dark);
pointer-events: none;
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.tabs .tabsitem[data-states='disable'] .icon svg {
fill: var(--color-primary-icon-light);
}
.tabs .tabsitem:hover {
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.tabs .tabsitem:hover .icon svg {
fill: var(--color-primary-icon-dark);
}
/* Link: Start */
.tabs a.tabsitem {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
/* Link: End */
/* Tabs Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Tabs: Start */
.tabs {
display: flex;
height: var(--layout-xx-medium);
/* Container Area: Start */
/* Container Area: End */
/* Sticky: Start */
/* Sticky: End */
}
.tabs + .containerarea {
padding: var(--layout-xxx-small) var(--layout-xxxx-small);
}
.tabs.sticky {
position: sticky;
top: var(--layout-0);
z-index: 7;
}
/* Header App: Start */
.headerapp + .tabs.sticky {
top: var(--layout-xx-large);
}
/* Header App: End */
/* Tabs: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Step: Start */
.stepper .step {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
flex-grow: 1;
position: relative;
/* Circle: Start */
/* Circle: End */
/* Line: Start */
/* Line: End */
/* Placeholder: Line: Start */
/* Placeholder: Line: End */
/* Placement: Start */
/* Center: Start */
/* Circle: Start */
/* Circle: End */
/* Placeholder: Line: Start */
/* Placeholder: Line: End */
/* Center: End */
/* First: Direction: Start */
/* Circle: Start */
/* Circle: End */
/* Circle: Start */
/* Circle: End */
/* First: Direction: End */
/* Last: Direction: Start */
/* Circle: Start */
/* Circle: End */
/* Placeholder: Line: Start */
/* Placeholder: Line: End */
/* Circle: Start */
/* Circle: End */
/* Placeholder: Line: Start */
/* Placeholder: Line: End */
/* Last: Direction: End */
/* Placement: End */
/* Typography: Body: Start */
/* Typography: Body: End */
/* States: Start */
/* Active: Start */
/* Circle: Start */
/* Circle: End */
/* Line: Start */
/* Line: End */
/* Active: End */
/* Focus: Start */
/* Focus: End */
/* States: End */
}
.stepper .step::before {
transition: background-color var(--time-commons-base) ease;
background-color: var(--color-primary-disable-dark);
border-radius: var(--layout-xxx-small);
display: block;
height: var(--layout-xxx-small);
top: var(--layout-half);
width: var(--layout-xxx-small);
}
.stepper .step::after,
.stepper .step::before {
content: var(--contentEmpty);
display: block;
position: absolute;
}
.stepper .step::after {
transition: border-color var(--time-commons-base) ease;
border: solid var(--layout-half) var(--color-primary-disable-dark);
left: var(--layout-0);
top: var(--layout-xxxxx-small);
right: var(--layout-0);
z-index: 1;
}
.stepper .step .placeholder[data-shape='line'] {
margin-top: var(--layout-x-small);
}
.stepper .step[data-placement='center']::before {
left: var(--percentage-50);
transform: translate(var(--stepper-position-negative), var(--layout-0));
}
.stepper .step[data-placement='center'] .placeholder[data-shape='line'] {
margin-left: auto;
margin-right: auto;
}
.stepper .step[data-placement='first'][dir='ltr']::before {
left: var(--layout-0);
}
.stepper .step[data-placement='first'][dir='rtl']::before {
right: var(--layout-0);
}
.stepper .step[data-placement='last'][dir='ltr']::before {
right: var(--layout-0);
}
.stepper .step[data-placement='last'][dir='ltr'] .placeholder[data-shape='line'] {
margin-left: auto;
}
.stepper .step[data-placement='last'][dir='rtl']::before {
left: var(--layout-0);
}
.stepper .step[data-placement='last'][dir='rtl'] .placeholder[data-shape='line'] {
margin-right: auto;
}
.stepper .step [data-style='typobody'].stext {
transition: color var(--time-commons-base) ease;
display: block;
padding-top: var(--layout-x-small);
}
.stepper .step[data-states='active']::before,
.stepper .step[data-states='focus']::before {
background-color: var(--color-primary-link-base);
}
.stepper .step[data-states='active']::after,
.stepper .step[data-states='focus']::after {
border-color: var(--color-primary-link-base);
}
.stepper .step[data-states='focus'] [data-style='typobody'].stext {
color: var(--color-primary-primary-base);
}
/* Step: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.stepper {
--stepper-position-negative: -50%;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Stepper: Start */
.stepper {
display: flex;
justify-content: space-between;
margin-bottom: var(--layout-xxx-small);
overflow: visible;
position: relative;
width: var(--percentage-100);
}
/* Stepper: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Alert Collapsible: Band: Start */
.alertcollapsible .acband {
align-items: center;
background-color: var(--color-secondary-alert-base);
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
height: var(--layout-xxxx-medium);
padding-bottom: var(--layout-xxxxx-small);
padding-left: var(--layout-xxxx-small);
padding-top: var(--layout-xxxxx-small);
/* Button: Start */
/* Button: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
.alertcollapsible .acband button,
.alertcollapsible .acband [data-style='typobody'] {
line-height: var(--font-small-line-height);
}
.alertcollapsible .acband button {
display: inline-block;
height: var(--layout-xxx-small);
margin-left: auto;
}
.alertcollapsible .acband [data-style='typobody'] {
flex: 1;
}
/* Alert Collapsible: Band: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Alert Collapsible: Body: Start */
.alertcollapsible .acbody {
background-color: var(--color-neutrals-white);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
height: var(--layout-medium);
padding: var(--layout-xxxx-small);
/* Icon: Start */
/* Icon: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
.alertcollapsible .acbody .icon {
display: inline-block;
/* Loading: SVG: Start */
/* Loading: SVG: End */
/* Status: Start */
/* Error: Icon: Start */
/* Error: Icon: End */
/* Success: Icon: Start */
/* Success: Icon: End */
/* Status: End */
}
.alertcollapsible .acbody .icon[data-status='loading'] svg {
animation: spinner var(--animation-all-duration) linear infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
fill: var(--color-primary-primary-base);
left: var(--layout-0);
top: var(--layout-0);
}
.alertcollapsible .acbody .icon[data-status='error'] svg {
fill: var(--color-alternative-error-base);
}
.alertcollapsible .acbody .icon[data-status='success'] svg {
fill: var(--color-alternative-success-base);
}
.alertcollapsible .acbody [data-style='typobody'] {
flex: 1;
line-height: var(--font-xx-large-line-height);
}
/* Alert Collapsible: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Alert Collapsible: Header: Start */
.alertcollapsible .acheader {
align-items: center;
background-color: var(--color-neutrals-black);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
height: var(--layout-medium);
padding: var(--layout-xxxx-small);
/* IconButton: Start */
/* SVG: Start */
/* SVG: End */
/* States: Active: SVG: Start */
/* States: Active: SVG: End */
/* IconButton: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.alertcollapsible .acheader .iconbutton svg {
fill: var(--color-neutrals-white);
}
.alertcollapsible .acheader .iconbutton[data-states='active'] svg,
.alertcollapsible .acheader .iconbutton:hover svg {
fill: var(--color-neutrals-white);
}
.alertcollapsible .acheader .placeholder[data-shape='line'] {
margin-top: var(--alert-collapsible-line-margin-top);
}
.alertcollapsible .acheader [data-style='typobody'] {
color: var(--color-neutrals-white);
flex: 1;
line-height: var(--font-xx-large-line-height);
}
/* Alert Collapsible: Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Alert Collapsible: Start */
.alertcollapsible {
border-radius: var(--layout-base);
width: var(--alert-collapsible-width);
/* Container Area: Start */
/* Container Area: End */
/* Placement: Start */
/* Bottom: Start */
/* Bottom: End */
/* Left: Start */
/* Left: End */
/* Left-End: Start */
/* Left-End: End */
/* Left-Start: Start */
/* Left-Start: End */
/* Right: Start */
/* Right: End */
/* Top: Start */
/* Top: End */
/* Placement: End */
}
.alertcollapsible .containerarea {
max-height: var(--layout-0);
/* States: Visible: Start */
/* States: Visible: End */
}
.alertcollapsible .containerarea[data-states='visible'] {
transition: max-height var(--time-commons-base) ease;
max-height: var(--alert-collapsible-container-area-max-height);
}
.alertcollapsible[data-placement='bottom'],
.alertcollapsible[data-placement='left'],
.alertcollapsible[data-placement='left-end'],
.alertcollapsible[data-placement='left-start'],
.alertcollapsible[data-placement='right'],
.alertcollapsible[data-placement='right-end'],
.alertcollapsible[data-placement='right-start'],
.alertcollapsible[data-placement='top'] {
position: fixed;
z-index: 10;
}
.alertcollapsible[data-placement='bottom'] {
bottom: var(--layout-xxx-small);
}
.alertcollapsible[data-placement='bottom'],
.alertcollapsible[data-placement='top'] {
left: var(--percentage-50);
transform: translateX(var(--alert-position-negative-50));
}
.alertcollapsible[data-placement='left'],
.alertcollapsible[data-placement='left-end'],
.alertcollapsible[data-placement='left-start'] {
left: var(--layout-xxx-small);
}
.alertcollapsible[data-placement='left'],
.alertcollapsible[data-placement='right'] {
top: var(--percentage-50);
transform: translateY(var(--alert-position-negative-50));
}
.alertcollapsible[data-placement='left-end'],
.alertcollapsible[data-placement='right-end'] {
bottom: var(--layout-xxx-small);
}
.alertcollapsible[data-placement='left-start'],
.alertcollapsible[data-placement='right-start'] {
top: var(--layout-xxx-small);
}
.alertcollapsible[data-placement='right'],
.alertcollapsible[data-placement='right-end'],
.alertcollapsible[data-placement='right-start'] {
right: var(--layout-xxx-small);
}
.alertcollapsible[data-placement='top'] {
top: var(--layout-xxx-small);
}
/* Alert Collapsible: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Container: Start */
.containeralert {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
overflow: visible;
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
position: fixed;
z-index: 10;
/* Alert: Start */
/* States: Start */
/* States: End */
/* Alert: End */
/* Placement: Start */
/* Bottom: Start */
/* Bottom: End */
/* Left: Start */
/* Left: End */
/* Left-End: Start */
/* Left-End: End */
/* Left-Start: Start */
/* Left-Start: End */
/* Right: Start */
/* Right: End */
/* Top: Start */
/* Top: End */
/* Placement: End */
}
.containeralert .alert,
.containeralert .alertcollapsible {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(96, 125, 135, var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
}
.containeralert .alert[data-style='error'],
.containeralert .alert[data-style='info'],
.containeralert .alert[data-style='success'],
.containeralert .alert[data-style='warning'] {
background-color: var(--color-neutrals-white);
}
.containeralert[data-placement='bottom'] {
bottom: var(--layout-xxx-small);
}
.containeralert[data-placement='bottom'],
.containeralert[data-placement='top'] {
left: var(--percentage-50);
transform: translateX(var(--alert-position-negative-50));
}
.containeralert[data-placement='left'],
.containeralert[data-placement='left-end'],
.containeralert[data-placement='left-start'] {
left: var(--layout-xxx-small);
}
.containeralert[data-placement='left'],
.containeralert[data-placement='right'] {
top: var(--percentage-50);
transform: translateY(var(--alert-position-negative-50));
}
.containeralert[data-placement='left-end'],
.containeralert[data-placement='right-end'] {
bottom: var(--layout-xxx-small);
}
.containeralert[data-placement='left-start'],
.containeralert[data-placement='right-start'] {
top: var(--layout-xxx-small);
}
.containeralert[data-placement='right'],
.containeralert[data-placement='right-end'],
.containeralert[data-placement='right-start'] {
right: var(--layout-xxx-small);
}
.containeralert[data-placement='top'] {
top: var(--layout-xxx-small);
}
/* Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.alert {
--alert-margin-bottom-top: 0.375rem;
/* 6px */
--alert-max-width: 20rem;
/* 320px */
--alert-min-width: 16rem;
/* 256px */
--alert-placeholder-line-margin-top: 0.375rem;
/* 6px */
}
.alert,
.alertcollapsible {
--alert-position-negative-50: -50%;
}
/* Collapsible: Start */
.alertcollapsible {
--alert-collapsible-container-area-max-height: 5rem;
/* 80px */
--alert-collapsible-line-margin-top: 0.375rem;
/* 6px */
--alert-collapsible-width: 32rem;
/* 512px */
}
/* Collapsible: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Alert: Start */
.alert {
align-items: center;
border-radius: var(--layout-base);
display: flex;
gap: var(--layout-xxxxx-small);
max-width: var(--alert-max-width);
min-height: var(--layout-xx-medium);
min-width: var(--alert-min-width);
padding: var(--layout-half) var(--layout-xxxx-small);
/* Animation: Collapsable Vertical: Start */
/* Animation: Collapsable Vertical: End */
/* Button: Start */
/* Button: End */
/* Styles: Start */
/* Default: Start */
/* Default: End */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* Info: Start */
/* Info: End */
/* Success: Start */
/* Success: End */
/* Warning: Start */
/* Warning: End */
/* Styles: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
.alert[data-animation='collapsable-vertical'] {
transition: padding-top var(--time-commons-base) ease, max-height var(--time-commons-base) ease, min-height var(--time-commons-base) ease, padding-bottom var(--time-commons-base) ease, margin-bottom var(--time-commons-base) ease;
margin-bottom: var(--layout-0);
max-height: var(--viewport-height-0);
min-height: var(--layout-0);
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
pointer-events: none;
/* States: Visible: Start */
/* States: Visible: End */
}
.alert[data-animation='collapsable-vertical'][data-states='visible'] {
margin-bottom: var(--layout-xxx-small);
max-height: var(--viewport-height-30);
min-height: var(--layout-xx-medium);
padding-bottom: var(--layout-half);
padding-top: var(--layout-half);
pointer-events: all;
}
.alert button {
display: inline-block;
/* Direction: Start */
/* Direction: End */
}
.alert button[dir='ltr'] {
margin-left: auto;
}
.alert button[dir='rtl'] {
margin-right: auto;
}
.alert[data-style='default'] {
background-color: var(--color-neutrals-white);
}
.alert[data-style='disable'] {
background-color: var(--color-neutrals-grey-1);
}
.alert[data-style='error'] {
background-color: var(--color-acentuation-error-base);
/* Icon: Start */
/* Icon: End */
}
.alert[data-style='error'] .icon svg {
fill: var(--color-alternative-error-base);
}
.alert[data-style='info'] {
background-color: var(--color-acentuation-info-base);
/* Icon: Start */
/* Icon: End */
}
.alert[data-style='info'] .icon svg {
fill: var(--color-alternative-focus-dark);
}
.alert[data-style='success'] {
background-color: var(--color-acentuation-success-base);
/* Icon: Start */
/* Icon: End */
}
.alert[data-style='success'] .icon svg {
fill: var(--color-alternative-success-base);
}
.alert[data-style='warning'] {
background-color: var(--color-acentuation-warning-base);
/* Icon: Start */
/* Icon: End */
}
.alert[data-style='warning'] .icon svg {
fill: var(--color-alternative-warning-base);
}
.alert [data-style='typobody'] {
flex: 1;
}
/* Alert: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Sticky: Start */
/* Sticky-Header: Start */
.sticky-header {
max-height: calc(var(--viewport-height-100) - var(--layout-x-large));
overflow-y: auto;
width: var(--percentage-100);
/* Th: Start */
/* Th: End */
}
.sticky-header .table .th {
box-shadow: var(--layout-0) var(--layout-half) var(--layout-0) var(--color-primary-border-base);
background-color: var(--color-neutrals-white);
position: sticky;
top: var(--layout-0);
/* stylelint-disable-line */
z-index: 2;
}
/* Sticky-Header: End */
/* Sticky-Body: Start */
.sticky-body {
overflow-x: auto;
width: var(--percentage-100);
/* Td: Start */
/* Td: End */
}
.sticky-body .table .td.sticky {
box-shadow: var(--layout-half) var(--layout-0) var(--layout-0) var(--color-primary-border-base);
background-color: var(--color-neutrals-white);
position: sticky;
left: var(--layout-0);
/* stylelint-disable-line */
z-index: 2;
}
/* Sticky-Body: End */
/* Sticky: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Td: Start */
.td {
min-height: var(--layout-xx-medium);
padding: var(--layout-0);
vertical-align: middle;
/* Actions: Start */
/* Actions: End */
/* Avatar: Start */
/* Avatar: End */
/* Badge: Start */
/* Badge: End */
/* Direction: Start */
/* Direction: End */
/* Empty: Inside: Start */
/* Empty: Inside: End */
/* Field Button: Start */
/* Field Button: End */
/* Icon: Start */
/* Icon: End */
/* Inside: Start */
/* Inside: End */
/* States: Loading: Inside: Start */
/* States: Loading: Inside: End */
/* Text: Align: Direction: Start */
/* Text: Align: Direction: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Typography: End */
}
.td.tactions {
width: var(--layout-xxxx-medium);
/* IconButton: Start */
/* IconButton: End */
}
.td.tactions .iconbutton {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
.td .avatar {
margin: var(--layout-xxxxx-small) var(--layout-xxxx-small);
vertical-align: middle;
/* Inside: Start */
/* Inside: End */
}
.td .avatar + .tinside {
padding-left: var(--layout-0);
vertical-align: middle;
width: calc(var(--percentage-100) - var(--layout-large));
}
.td .badge {
display: inline-block;
vertical-align: middle;
/* Shape: Start */
/* Round: Start */
/* Round: End */
/* Square: Start */
/* Square: End */
/* Shape: End */
/* Inside: Start */
/* Inside: End */
}
.td .badge:first-child,
.td .badge:last-child {
margin-bottom: var(--layout-xxxxx-small);
margin-top: var(--layout-xxxxx-small);
}
.td .badge[data-shape='round']:first-child {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-base);
}
.td .badge[data-shape='round']:last-child {
margin-left: var(--layout-base);
margin-right: var(--layout-xxxx-small);
}
.td .badge[data-shape='square'] {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
.td .badge + .tinside {
vertical-align: middle;
width: calc(var(--percentage-100) - var(--layout-xxx-medium));
/* Direction: Start */
/* Direction: End */
}
.td .badge + .tinside[dir='ltr'] {
padding-left: var(--layout-0);
}
.td .badge + .tinside[dir='rtl'] {
padding-right: var(--layout-0);
}
.td[dir='ltr'] {
text-align: left;
}
.td[dir='rtl'] {
text-align: right;
}
.td.tempty .tinside {
text-align: center;
width: var(--percentage-100);
}
.td .fieldbutton {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
padding-bottom: var(--layout-0);
}
.td .icon.ticon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
.td .icon.ticon:first-child {
margin-right: var(--layout-base);
}
.td .icon.ticon:last-child {
margin-left: var(--layout-base);
}
.td .icon.ticon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
.td .tinside {
display: inline-block;
padding: var(--layout-xxxxx-small) var(--layout-xxxx-small);
}
.td[data-states='loading'] .inside {
display: flex;
width: var(--percentage-100);
}
.td[data-align='tacenter'][dir='ltr'] {
text-align: center;
}
.td[data-align='taleft'][dir='ltr'] {
text-align: left;
}
.td[data-align='taright'][dir='ltr'] {
text-align: right;
}
.td[data-align='tacenter'][dir='rtl'] {
text-align: center;
}
.td[data-align='taleft'][dir='rtl'] {
text-align: right;
}
.td[data-align='taright'][dir='rtl'] {
text-align: left;
}
.td [data-style='typobody'],
.td [data-style='typocaption'],
.td [data-style='typotspecials'],
.td [data-style='typotime'],
.td [data-style='typotitle1'] {
display: block;
}
.td [data-style='typobody'] {
font-style: normal;
}
/* Td: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Th: Start */
.th {
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
line-height: var(--table-th-line-height);
min-height: var(--layout-xxxx-medium);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
position: relative;
/* Actions: Start */
/* Actions: End */
/* Direction: Start */
/* Direction: End */
/* Field Button: Start */
/* Field Button: End */
/* IconButton: Start */
/* IconButton: End */
/* Text Align: Start */
/* Text Align: End */
/* Sortable: Start */
/* Sortable: End */
}
.th.tactions {
text-indent: var(--text-indentation-negative);
width: var(--layout-xxxx-medium);
}
.th[dir='ltr'] {
text-align: left;
}
.th[dir='rtl'] {
text-align: right;
}
.th .fieldbutton {
padding-bottom: var(--layout-0);
}
.th .iconbutton[data-style='ihelp'] {
margin-left: var(--layout-base);
}
.th[data-align='tacenter'][dir='ltr'] {
text-align: center;
}
.th[data-align='taleft'][dir='ltr'] {
text-align: left;
}
.th[data-align='taright'][dir='ltr'] {
text-align: right;
}
.th[data-align='tacenter'][dir='rtl'] {
text-align: center;
}
.th[data-align='taleft'][dir='rtl'] {
text-align: right;
}
.th[data-align='taright'][dir='rtl'] {
text-align: left;
}
.th.sortable {
padding-right: var(--layout-xxxx-medium);
/* IconButton: Start */
/* IconButton: End */
}
.th.sortable .iconbutton[data-style='iorderdown'],
.th.sortable .iconbutton[data-style='iorderup'] {
position: absolute;
top: var(--layout-0);
right: var(--layout-0);
}
/* Th: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tr: Start */
.tr {
border-color: var(--color-primary-border-base);
border-style: solid;
}
/* Body: Start */
.tbody .tr {
border-bottom-width: var(--layout-border);
/* Button & Link: Start */
/* Button & Link: End */
/* With Button: Start */
/* Direction: Start */
/* Direction: End */
/* With Button: End */
/* With Link: Start */
/* Direction: Start */
/* Direction: End */
/* With Link: End */
}
.tbody .tr:last-child {
border-bottom: none;
}
.tbody .tr[data-type='button'],
.tbody .tr[data-type='link'] {
cursor: pointer;
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Inactive: Start */
/* Icon: Start */
/* Icon: End */
/* Typography: Start */
/* Typography: End */
/* Inactive: End */
/* States: End */
}
.tbody .tr[data-type='button'][data-states='active'],
.tbody .tr[data-type='link'][data-states='active'],
.tbody .tr[data-type='button']:hover,
.tbody .tr[data-type='link']:hover {
background-color: var(--color-secondary-list-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Typography: Start */
/* Typography: End */
}
.tbody .tr[data-type='button'][data-states='active'] .icon svg,
.tbody .tr[data-type='link'][data-states='active'] .icon svg,
.tbody .tr[data-type='button']:hover .icon svg,
.tbody .tr[data-type='link']:hover .icon svg {
fill: var(--color-primary-text-dark);
}
.tbody .tr[data-type='button'][data-states='active'] .tcaption,
.tbody .tr[data-type='link'][data-states='active'] .tcaption,
.tbody .tr[data-type='button']:hover .tcaption,
.tbody .tr[data-type='link']:hover .tcaption,
.tbody .tr[data-type='button'][data-states='active'] .ttext,
.tbody .tr[data-type='link'][data-states='active'] .ttext,
.tbody .tr[data-type='button']:hover .ttext,
.tbody .tr[data-type='link']:hover .ttext,
.tbody .tr[data-type='button'][data-states='active'] .ttimeframe,
.tbody .tr[data-type='link'][data-states='active'] .ttimeframe,
.tbody .tr[data-type='button']:hover .ttimeframe,
.tbody .tr[data-type='link']:hover .ttimeframe,
.tbody .tr[data-type='button'][data-states='active'] .ttitle,
.tbody .tr[data-type='link'][data-states='active'] .ttitle,
.tbody .tr[data-type='button']:hover .ttitle,
.tbody .tr[data-type='link']:hover .ttitle {
color: var(--color-primary-text-dark);
}
.tbody .tr[data-type='button'][data-states='disable'],
.tbody .tr[data-type='link'][data-states='disable'] {
cursor: default;
pointer-events: none;
/* Icon: Start */
/* Icon: End */
/* Typography: Start */
/* Typography: End */
}
.tbody .tr[data-type='button'][data-states='disable'] .icon svg,
.tbody .tr[data-type='link'][data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.tbody .tr[data-type='button'][data-states='disable'] .tcaption,
.tbody .tr[data-type='link'][data-states='disable'] .tcaption,
.tbody .tr[data-type='button'][data-states='disable'] .ttext,
.tbody .tr[data-type='link'][data-states='disable'] .ttext,
.tbody .tr[data-type='button'][data-states='disable'] .ttimeframe,
.tbody .tr[data-type='link'][data-states='disable'] .ttimeframe,
.tbody .tr[data-type='button'][data-states='disable'] .ttitle,
.tbody .tr[data-type='link'][data-states='disable'] .ttitle {
color: var(--color-primary-disable-dark);
}
.tbody .tr[data-type='button'][data-states='inactive'] .icon svg,
.tbody .tr[data-type='link'][data-states='inactive'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.tbody .tr[data-type='button'][data-states='inactive'] .tcaption,
.tbody .tr[data-type='link'][data-states='inactive'] .tcaption,
.tbody .tr[data-type='button'][data-states='inactive'] .ttext,
.tbody .tr[data-type='link'][data-states='inactive'] .ttext,
.tbody .tr[data-type='button'][data-states='inactive'] .ttimeframe,
.tbody .tr[data-type='link'][data-states='inactive'] .ttimeframe,
.tbody .tr[data-type='button'][data-states='inactive'] .ttitle,
.tbody .tr[data-type='link'][data-states='inactive'] .ttitle {
color: var(--color-primary-disable-dark);
}
.tbody .tr[data-type='button'] .td[data-align='tacenter'][dir='ltr'],
.tbody .tr[data-type='button'] .td[data-align='tacenter'][dir='rtl'] {
text-align: center;
}
.tbody .tr[data-type='button'] .td[data-align='taleft'][dir='ltr'] {
text-align: left;
}
.tbody .tr[data-type='button'] .td[data-align='taright'][dir='ltr'] {
text-align: right;
}
.tbody .tr[data-type='button'] .td[data-align='taleft'][dir='rtl'] {
text-align: right;
}
.tbody .tr[data-type='button'] .td[data-align='taright'][dir='rtl'] {
text-align: left;
}
.tbody .tr[data-type='link'] .td[data-align='tacenter'][dir='ltr'],
.tbody .tr[data-type='link'] .td[data-align='tacenter'][dir='rtl'] {
justify-content: center;
}
.tbody .tr[data-type='link'] .td[data-align='taleft'][dir='ltr'] {
justify-content: start;
}
.tbody .tr[data-type='link'] .td[data-align='taright'][dir='ltr'] {
justify-content: end;
}
.tbody .tr[data-type='link'] .td[data-align='taleft'][dir='rtl'] {
justify-content: end;
}
.tbody .tr[data-type='link'] .td[data-align='taright'][dir='rtl'] {
justify-content: start;
}
/* Body: End */
/* Footer: Start */
.tfoot .tr {
border-top-width: var(--layout-half);
}
/* Footer: End */
/* Header: Start */
.thead .tr {
border-bottom-width: var(--layout-half);
}
/* Header: End */
/* Tr: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tr: Start */
/* Body: Start */
/* States: Hover: Start */
.tbody .tr.withlink:hover,
.tbody .tr.withbutton:hover {
background-color: var(--color-secondary-list-base);
}
/* States: Hover: End */
/* With Button: Start */
/* Button: Start */
.tbody .tr.withbutton .td.tdbutton {
color: var(--color-primary-text-base);
font-weight: 400;
width: var(--percentage-100);
}
/* Button: End */
/* Direction: Start */
.tbody .tr.withbutton .td[dir='ltr'].tacenter .tdbutton,
.tbody .tr.withbutton .td[dir='rtl'].tacenter .tdbutton {
text-align: center;
}
.tbody .tr.withbutton .td[dir='ltr'].taleft .tdbutton {
text-align: left;
}
.tbody .tr.withbutton .td[dir='ltr'].taright .tdbutton {
text-align: right;
}
.tbody .tr.withbutton .td[dir='rtl'].taleft .tdbutton {
text-align: right;
}
.tbody .tr.withbutton .td[dir='rtl'].taright .tdbutton {
text-align: left;
}
/* Direction: End */
/* With Button: End */
/* With Link: Start */
/* Direction: Start */
.tbody .tr.withlink .td[dir='ltr'].tacenter .tdlink,
.tbody .tr.withlink .td[dir='rtl'].tacenter .tdlink {
justify-content: center;
}
.tbody .tr.withlink .td[dir='ltr'].taleft .tdlink {
justify-content: start;
}
.tbody .tr.withlink .td[dir='ltr'].taright .tdlink {
justify-content: end;
}
.tbody .tr.withlink .td[dir='rtl'].taleft .tdlink {
justify-content: end;
}
.tbody .tr.withlink .td[dir='rtl'].taright .tdlink {
justify-content: start;
}
/* Direction: End */
/* Link: Start */
.tbody .tr.withlink .td .tdlink {
align-items: center;
color: var(--color-primary-text-base);
display: flex;
height: var(--percentage-100);
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.tbody .tr.withlink .td .tdlink svg {
fill: var(--color-primary-text-base);
}
.tbody .tr.withlink .td .tdlink:hover {
color: var(--color-primary-text-dark);
/* Icon: Start */
/* Icon: End */
}
.tbody .tr.withlink .td .tdlink:hover svg {
fill: var(--color-primary-text-dark);
}
/* Link: End */
/* With Link: End */
/* Body: End */
/* Tr: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.table {
--table-th-line-height: 2rem;
/* 32px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.table {
border-collapse: collapse;
width: var(--percentage-100);
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Caption: Start */
.pagination [data-style='caption'] {
font-size: var(--font-x-small-size);
font-weight: var(--font-x-small-weight);
line-height: var(--font-x-small-line-height);
padding-bottom: var(--layout-half);
padding-top: var(--layout-half);
}
/* Caption: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Number: Start */
.pagination .pnumber {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
border-radius: var(--layout-base);
color: var(--color-primary-primary-base);
display: inline-block;
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
height: var(--layout-xx-small);
line-height: var(--font-medium-line-height);
min-width: var(--layout-xx-small);
text-align: center;
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.pagination .pnumber[data-states='active'] {
background-color: var(--color-primary-link-dark);
color: var(--color-neutrals-white);
/* Hover: Start */
/* Hover: End */
}
.pagination .pnumber[data-states='active']:hover {
color: var(--color-neutrals-white);
}
.pagination .pnumber[data-states='disable'] {
color: var(--color-primary-disable-dark);
cursor: default;
pointer-events: none;
}
.pagination .pnumber:hover {
color: var(--color-primary-link-dark);
}
/* Number: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Text: Start */
.pagination .ptext {
transition: color var(--time-commons-base) ease;
color: var(--color-primary-primary-base);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
line-height: var(--font-medium-line-height);
margin-left: auto;
margin-right: auto;
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Inside: Start */
/* Inside: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.pagination .ptext svg {
transition: fill var(--time-commons-base) ease;
fill: var(--color-primary-primary-base);
}
.pagination .ptext .binside {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
.pagination .ptext[data-states='active'] {
color: var(--color-primary-link-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.pagination .ptext[data-states='active'] .icon svg {
fill: var(--color-primary-link-dark);
}
.pagination .ptext[data-states='disable'] {
color: var(--color-primary-disable-dark);
cursor: default;
pointer-events: none;
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.pagination .ptext[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.pagination .ptext:hover {
color: var(--color-primary-link-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.pagination .ptext:hover .icon svg {
fill: var(--color-primary-link-dark);
}
/* Text: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Pagination: Start */
.pagination {
align-items: center;
display: flex;
gap: var(--layout-xxxx-small);
justify-content: space-between;
/* Container Area: Start */
/* Container Area: End */
}
.pagination .containerarea {
align-items: center;
display: flex;
gap: var(--layout-base);
pointer-events: all;
margin-left: auto;
padding-left: var(--layout-xxxxx-small);
padding-right: var(--layout-xxxxx-small);
visibility: visible;
}
/* Pagination: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.titlebar {
--title-bar-max-height: 6rem;
/* 96px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* TitleBar: Start */
.titlebar {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
justify-content: space-between;
max-height: var(--title-bar-max-height);
overflow: visible;
padding: var(--layout-xxxx-small);
position: relative;
width: var(--percentage-100);
/* Left: Start */
/* Left: End */
/* Padding: Off: Start */
/* Padding: Off: End */
/* Right: Start */
/* Right: End */
}
.titlebar .tbleft,
.titlebar .tbright {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
.titlebar .tbleft {
flex: 1;
/* IconButton: Start */
/* IconButton: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Container: Start */
/* Container: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
.titlebar .tbleft .iconbutton + .ttextcontainer {
width: calc(var(--percentage-100) - var(--layout-x-medium));
}
.titlebar .tbleft [data-style='typocaption'],
.titlebar .tbleft [data-style='typoheader'] {
width: var(--percentage-100);
}
.titlebar .tbleft .ttextcontainer {
display: flex;
flex: 1;
flex-direction: column;
}
.titlebar .tbleft [data-style='typoheader'] {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
.titlebar.paddingoff {
padding: var(--layout-0);
}
.titlebar.paddingbottomoff {
padding-bottom: var(--layout-0);
}
.titlebar.paddingleftoff {
padding-left: var(--layout-0);
}
.titlebar.paddingrightoff {
padding-right: var(--layout-0);
}
.titlebar.paddingtopoff {
padding-top: var(--layout-0);
}
.titlebar .tbright {
justify-content: end;
}
/* TitleBar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Backdrop: Start */
.backdrop {
position: fixed;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background: rgba(var(--layout-0), var(--layout-0), var(--layout-0), var(--alpha-40));
display: none;
height: var(--viewport-height-100);
pointer-events: none;
text-indent: var(--text-indentation-negative);
width: var(--viewport-width-100);
z-index: 10;
/* States: Active: Start */
/* States: Active: End */
}
.backdrop[data-states='active'] {
display: block;
pointer-events: all;
}
/* Backdrop: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Actions: Start */
/* Footer: Direction: Start */
.modal .mfooter .actions[dir='ltr'] {
justify-content: end;
}
.modal .mfooter .actions[dir='rtl'] {
justify-content: start;
}
/* Footer: Direction: End */
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: Start */
.modal .mbody {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
height: var(--percentage-100);
margin-bottom: var(--modal-body-margin-bottom);
margin-top: var(--layout-xxx-small);
overflow-y: auto;
/* Container: Start */
/* Container: End */
}
.modal .mbody ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.modal .mbody ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.modal .mbody ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
.modal .mbody .mbcontainer {
margin-left: var(--layout-base);
margin-right: var(--layout-base);
overflow: visible;
}
/* Placement: Start */
/* Left: Start */
.modal[data-placement^='left'] .mbody,
.modal:not([data-placement]) .mbody,
.modal[data-placement^='right'] .mbody {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
.modal[data-placement^='left'] .mbody,
.modal[data-placement^='right'] .mbody {
max-height: calc(var(--viewport-height-100) - var(--modal-body-max-height));
padding-bottom: var(--layout-xxxx-small);
}
/* Left: Start */
/* Media: Start */
.modal[data-placement^='media'] .mbody {
max-height: calc(var(--viewport-height-100) - var(--modal-body-max-height));
}
/* Media: End */
/* Not: Start */
.modal:not([data-placement]) .mbody {
max-height: calc(var(--viewport-height-100) - var(--modal-body-height));
}
/* Not: End */
/* Placement: End */
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.modal .mfooter {
height: var(--layout-xx-medium);
padding: var(--layout-half) var(--layout-xx-small);
/* Button: Primary: Start */
/* Button: Primary: End */
/* Button: Secondary: Start */
/* Button: Secondary: End */
/* Inside: End */
}
.modal .mfooter .contained,
.modal .mfooter .outline {
background-color: var(--color-neutrals-transparent);
border: none;
/* States: Disable: Start */
/* States: Disable: End */
}
.modal .mfooter .contained[data-states='disable'],
.modal .mfooter .outline[data-states='disable'] {
color: var(--color-primary-disable-dark);
}
.modal .mfooter .contained {
color: var(--color-primary-primary-base);
/* States: Active: Start */
/* States: Active: End */
}
.modal .mfooter .contained[data-states='active'],
.modal .mfooter .contained:hover {
color: var(--color-primary-primary-dark);
}
.modal .mfooter .outline {
color: var(--color-primary-text-base);
/* States: Active: Start */
/* States: Active: End */
}
.modal .mfooter .outline[data-states='active'],
.modal .mfooter .outline:hover {
color: var(--color-primary-text-dark);
}
/* Form: Start */
/* Direction: Start */
.modal form .mfooter[dir='ltr'] {
text-align: right;
}
.modal form .mfooter[dir='rtl'] {
text-align: left;
}
/* Direction: End */
/* Action: Start */
.modal form .mfooter .fieldbutton {
display: inline-block;
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
}
/* Action: End */
/* Form: End */
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.modal .mheader {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
height: var(--layout-xx-large);
justify-content: space-between;
overflow: visible;
padding: var(--layout-xxxx-small) var(--layout-xx-small);
width: var(--percentage-100);
/* Left: Start */
/* Typography: Title: Start */
/* Title: Start */
/* Typography: Title: End */
/* Left: End */
/* Right: Start */
/* Right: End */
}
.modal .mheader .left,
.modal .mheader .right {
align-items: center;
display: flex;
flex-flow: row wrap;
}
.modal .mheader .left [data-style='typoheader'] {
flex: 1;
width: var(--percentage-100);
/* Caption: Start */
/* Caption: End */
}
.modal .mheader .left [data-style='typoheader'] [data-style='typocaption'] {
display: block;
}
.modal .mheader .right {
gap: var(--layout-xxx-small);
justify-content: end;
overflow: visible;
}
/* Form: Start */
/* Action: Start */
.modal form .mheader .fieldbutton {
display: inline-block;
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
}
/* Action: End */
/* Form: End */
/* Not: Start */
.modal:not([data-placement]) .mheader .left {
width: var(--percentage-100);
}
/* Left: Start */
.modal[data-placement^='left'] .mheader .left,
.modal[data-placement^='right'] .mheader .left {
flex: 1;
}
/* Left: End */
/* Not: End */
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.modal {
--modal-body-height: 15.5rem;
/* 248px */
--modal-body-margin-bottom: 1.625rem;
/* 26px */
--modal-box-shadow-color-b: 135;
--modal-box-shadow-color-g: 125;
--modal-box-shadow-color-r: 96;
--modal-body-max-height: 5rem;
/* 80px */
--modal-max-width: 40rem;
/* 640px */
--modal-min-width: 21.25rem;
/* 340px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.modal {
box-shadow: none var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--modal-box-shadow-color-r), var(--modal-box-shadow-color-g), var(--modal-box-shadow-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
color: var(--color-primary-text-base);
z-index: 10;
/* Ai: Start */
/* Ai: End */
/* Backdrop: Start */
/* Backdrop: End */
/* Placement: Start */
/* Left: Start */
/* Left: End */
/* Not: Start */
/* Not: End */
/* Right: Start */
/* Right: End */
/* Placement: End */
}
.modal.mai {
animation: ai-accordion-cards-modal-shadow var(--animation-all-duration) ease-in-out 1 forwards;
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
/* Variables: Start */
--animation-all-duration: 3s;
/* Variables: End */
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-45), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-228), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto, auto, auto, auto;
}
.modal::backdrop {
background: rgba(var(--shadow-0), var(--shadow-0), var(--shadow-0), var(--alpha-40));
}
.modal[data-placement^='left'],
.modal[data-placement^='media'] {
position: fixed;
top: var(--layout-0);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--layout-0);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--layout-0), var(--layout-0));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
}
.modal[data-placement^='left'],
.modal[data-placement^='media'],
.modal[data-placement^='right'] {
height: var(--viewport-height-100);
/* Form: Start */
/* Form: End */
}
.modal[data-placement^='left'] .modalform,
.modal[data-placement^='media'] .modalform,
.modal[data-placement^='right'] .modalform {
height: var(--viewport-height-100);
}
.modal[data-placement^='left'],
.modal[data-placement^='right'] {
background: var(--color-neutrals-white);
max-width: var(--modal-max-width);
min-width: var(--modal-max-width);
}
.modal:not([data-placement]) {
position: fixed;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
border-radius: var(--layout-base);
max-height: var(--viewport-height-80);
/* fit-content */
max-width: var(--viewport-width-80);
/* fit-content */
min-width: var(--modal-min-width);
}
.modal[data-placement^='right'] {
position: fixed;
top: var(--layout-0);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: auto;
bottom: auto;
right: var(--layout-0);
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--layout-0), var(--layout-0));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Responsive: Start */
.responsive {
overflow: auto;
/* Table: Start */
/* Table: End */
}
.responsive-table {
overflow: auto;
width: var(--percentage-100);
}
/* Responsive: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Highlight: Start */
em.highlight {
font-style: italic;
font-weight: var(--font-small-weight);
}
/* Highlight: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards .cbody {
flex: 1;
position: relative;
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards .cfooter {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
min-height: var(--layout-xx-medium);
padding-bottom: var(--layout-half);
padding-top: var(--layout-half);
position: relative;
/* Link: Start */
/* Link: End */
}
.cards .cfooter .link {
margin-bottom: var(--layout-xxxxx-small);
margin-top: var(--layout-xxxxx-small);
/* Direction: Start */
/* Direction: End */
}
.cards .cfooter .link[dir='ltr']:first-child {
margin-left: var(--layout-xxxx-small);
}
.cards .cfooter .link[dir='rtl']:first-child {
margin-right: var(--layout-xxxx-small);
}
.cards .cfooter .link[dir='ltr']:last-child {
margin-right: var(--layout-xxxx-small);
}
.cards .cfooter .link[dir='rtl']:last-child {
margin-left: var(--layout-xxxx-small);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards .cheader {
align-items: center;
display: flex;
flex-flow: row wrap;
min-height: var(--layout-x-medium);
justify-content: space-between;
padding: var(--layout-base) var(--layout-xxxx-small);
position: relative;
width: var(--percentage-100);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards {
--cards-box-shadow-rgba-color-a: 0.4;
--cards-box-shadow-rgba-color-b: 135;
--cards-box-shadow-rgba-color-g: 125;
--cards-box-shadow-rgba-color-r: 96;
--cards-header-padding-right: 0.375rem;
/* 6px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.cards {
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
display: flex;
flex-direction: column;
min-width: calc(var(--percentage-100) - var(--layout-base));
/* Ai: Start */
/* Ai: End */
/* Button & Link: Start */
/* Button & Link: End */
/* Divider: Start */
/* Divider: End */
/* Inside: Start */
/* Inside: End */
/* Styles: Start */
/* Border: Start */
/* Border: End */
/* Shadow: Start */
/* Shadow: End */
/* Styles: End */
}
.cards.cai {
animation: ai-accordion-cards-modal-shadow var(--animation-all-duration) ease-in-out 1 forwards;
box-shadow: inset var(--shadow-0) var(--shadow-0) var(--shadow-medium-x) var(--color-alternative-ai-light);
/* Variables: Start */
--animation-all-duration: 3s;
/* Variables: End */
background-image: radial-gradient(circle at var(--percentage-100) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-100), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-100) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), radial-gradient(circle at var(--percentage-0) var(--percentage-0), var(--color-neutrals-white) var(--percentage-0), var(--color-neutrals-white) var(--layout-half), var(--color-neutrals-transparent) var(--layout-half)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--color-neutrals-white), var(--color-neutrals-white)), linear-gradient(var(--rotation-angle-312), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10)), linear-gradient(var(--rotation-angle-135), var(--color-alternative-ai-base) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-10));
background-position: var(--percentage-0) var(--percentage-0), var(--percentage-100) var(--percentage-0), var(--percentage-0) var(--percentage-100), var(--percentage-100) var(--percentage-100), var(--percentage-50) var(--percentage-50), var(--percentage-50) var(--percentage-50), 0 0, 0 0;
background-repeat: no-repeat;
background-size: var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), var(--layout-base) var(--layout-base), calc(var(--percentage-100) - var(--layout-base)) calc(var(--percentage-100) - var(--layout-xxxxx-small)), calc(var(--percentage-100) - var(--layout-xxxxx-small)) calc(var(--percentage-100) - var(--layout-base)), auto auto, auto auto;
}
.cards[data-type='button'],
.cards[data-type='link'] {
cursor: pointer;
}
.cards .divider {
margin-bottom: var(--layout-xxxxx-small);
margin-top: var(--layout-xxxxx-small);
}
.cards .cinside {
display: flex;
flex-direction: column;
overflow: visible;
}
.cards[data-style='border'] {
border: solid var(--layout-border) var(--color-primary-border-base);
}
.cards[data-style='shadow'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--cards-box-shadow-rgba-color-r), var(--cards-box-shadow-rgba-color-g), var(--cards-box-shadow-rgba-color-b), var(--cards-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Actions: Start */
.uploadfile.upimage .actions.ufiactions {
transition: opacity var(--time-commons-base) ease;
display: flex;
gap: var(--layout-xxxx-small);
height: var(--layout-xxx-medium);
justify-content: center;
opacity: var(--alpha-0);
pointer-events: none;
position: absolute;
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-xxxxx-small);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
z-index: 10;
/* Item: Start */
/* Item: End */
}
.uploadfile.upimage .actions.ufiactions .action {
height: auto;
width: auto;
/* IconButton: Start */
/* IconButton: End */
}
.uploadfile.upimage .actions.ufiactions .action .iconbutton {
background-color: var(--color-neutrals-white);
border-radius: var(--layout-xxx-medium);
}
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Field Image: Start */
.fieldimage {
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
align-items: center;
background-color: var(--color-secondary-alert-base);
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
height: var(--upload-file-image-height);
justify-content: center;
position: relative;
width: var(--upload-file-image-width);
/* Backdrop: Start */
/* Backdrop: End */
/* Empty: Start */
/* Empty: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* Hover: Start */
/* Hover: End */
/* Loading: Icon: Start */
/* Loading: Icon: End */
/* States: End */
}
.fieldimage .backdrop {
border-radius: var(--layout-base);
height: var(--percentage-100);
position: absolute;
width: var(--percentage-100);
}
.fieldimage .ufempty {
border-radius: var(--layout-base);
color: var(--color-primary-text-base);
height: var(--percentage-100);
text-align: center;
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
.fieldimage .ufempty .icon {
display: block;
height: var(--layout-xxxx-medium);
margin-bottom: var(--layout-xxxxx-small);
margin-left: auto;
margin-right: auto;
width: var(--layout-xxxx-medium);
/* SVG: Start */
/* SVG: End */
}
.fieldimage .ufempty .icon svg {
transition: fill var(--time-commons-base) ease;
height: var(--layout-xxxx-medium);
width: var(--layout-xxxx-medium);
}
.fieldimage .ufempty [data-style='typocontainer'] {
display: block;
width: var(--percentage-100);
/* Caption: Start */
/* Caption: End */
}
.fieldimage .ufempty [data-style='typocontainer'] [data-style='typocaption'],
.fieldimage .ufempty [data-style='typocontainer'] [data-style='typotitle1'] {
transition: color var(--time-commons-base) ease;
display: block;
text-align: center;
}
.fieldimage .ufempty [data-style='typocontainer'] [data-style='typocaption'] {
font-style: normal;
}
.fieldimage[data-states='disable'] {
pointer-events: none;
/* Caption: Start */
/* Caption: End */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.fieldimage[data-states='disable'] [data-style='typocaption'],
.fieldimage[data-states='disable'] [data-style='typotitle1'] {
color: var(--color-primary-disable-dark);
}
.fieldimage[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.fieldimage[data-states='disable']:hover {
background-color: var(--color-secondary-alert-base);
border-color: var(--color-primary-border-base);
}
.fieldimage[data-states='error'] {
background-color: var(--upload-file-image-color-error);
border-color: var(--color-alternative-error-base);
/* Empty: Start */
/* Caption: Start */
/* Caption: End */
/* Icon: Start */
/* Icon: End */
/* Empty: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.fieldimage[data-states='error'] .ufempty [data-style='typocaption'],
.fieldimage[data-states='error'] .ufempty [data-style='typotitle1'] {
color: var(--color-neutrals-white);
}
.fieldimage[data-states='error'] .ufempty .icon {
display: none;
}
.fieldimage[data-states='error']:hover {
background-color: var(--upload-file-image-color-error);
border-color: var(--color-alternative-error-base);
}
.fieldimage:hover {
background-color: var(--color-secondary-list-base);
}
.fieldimage[data-states='loading'] .icon.loading {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
display: block;
height: var(--layout-xxx-medium);
width: var(--layout-xxx-medium);
z-index: 9;
/* SVG: Start */
/* SVG: End */
}
.fieldimage[data-states='loading'] .icon.loading svg {
animation: spinner var(--animation-duration) infinite forwards;
animation-play-state: running;
/* Variables: Start */
--animation-duration: 1s;
/* Variables: End */
fill: var(--color-primary-link-base);
height: var(--layout-xxx-medium);
left: auto;
top: auto;
transform: none;
width: var(--layout-xxx-medium);
}
/* Field Image: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Highlight: Start */
.uploadfile.upimage .uihighlight {
border: solid var(--layout-half) var(--color-primary-primary-base);
border-radius: var(--layout-base);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
/* Typography: Specials: Start */
/* Typography: Specials: End */
}
.uploadfile.upimage .uihighlight [data-style='typospecials'] {
background-color: var(--color-primary-primary-base);
color: var(--color-neutrals-white);
line-height: var(--font-medium-line-height);
position: absolute;
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
text-align: center;
}
/* Highlight: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* UpFile: Start */
.uploadfile .upfile {
flex-flow: row wrap;
gap: var(--layout-0);
/*var(--layout-xxx-small);*/
/* Button: Outline: Start */
/* Button: Outline: End */
/* File Name: Start */
/* File Name: End */
/* Label: Start */
/* Label: End */
}
.uploadfile .upfile .outline {
justify-content: center;
}
.uploadfile .upfile .filename {
margin-left: var(--layout-xxx-small);
/* Icon: Start */
/* Icon: End */
/* Inside: Start */
/* Inside: End */
}
.uploadfile .upfile .filename .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
.uploadfile .upfile .filename .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
.uploadfile .upfile .filename .binside {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
.uploadfile .upfile .flabel {
width: var(--percentage-100);
}
/* UpFile: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Field Image: Start */
.fieldimage,
.uploadfile {
--upload-file-image-actions-item-margin: 0.375rem;
/* 6px */
--upload-file-image-color-error: rgba(255, 23, 68, 0.4);
--upload-file-image-height: 9rem;
/* 144px */
--upload-file-image-width: 15.75rem;
/* 252px */
}
/* Field Image: End */
/* UpFile: Start */
.upfile,
.uploadfile {
--upload-file-up-file-line-height: 2.25rem;
/* 36px */
}
/* UpFile: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Start */
.uploadfile {
display: flex;
flex-flow: row wrap;
position: relative;
/* File: Start */
/* File: End */
/* Image: Start */
/* Image: End */
}
.uploadfile.upfiles {
align-items: flex-end;
}
.uploadfile.upimage {
align-items: center;
gap: var(--layout-x-small);
max-width: var(--upload-file-image-width);
min-height: var(--upload-file-image-height);
/* States: Hover: Start */
/* Actions: Start */
/* Actions: End */
/* Backdrop: Start */
/* Backdrop: End */
/* Loading: Start */
/* Loading: End */
/* States: Hover: End */
}
.uploadfile.upimage:hover .actions {
opacity: var(--alpha-100);
pointer-events: all;
}
.uploadfile.upimage:hover .backdrop {
display: block;
}
.uploadfile.upimage:hover .fieldimage[data-states='loading'] + .actions {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
}
/* Base: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
em-emoji-picker {
--border-radius: var(--layout-base);
/* Box: Border Radius */
--color-border: var(--color-secondary-modal-base);
/* var(--color-neutrals-white); */
/* Search: Background: Delete */
--font-size: var(--font-x-medium-size);
/* Title: Font Size */
--rgb-accent: 0, 70, 152;
/* Tabs: Active */
/* --rgb-background: 255, 255, 255; */
/* Box: Background */
--rgb-color: 28, 49, 58;
/* Title: Color */
--shadow: var(--layout-0) var(--layout-base) var(--layout-base) rgba(96, 125, 135, 0.4);
/* Box: Shadow */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* DropDown: Start */
.iconbutton.dropdown[data-style='iemoji'] + .containerarea[data-animation='collapsable-vertical'],
.iconbutton.dropdown[data-style='iemoji'] + .containerarea[data-popper-placement^='bottom'],
.iconbutton.dropdown[data-style='iemoji'] + .containerarea[data-popper-placement^='top'] {
max-height: var(--percentage-100);
overflow: hidden;
}
/* DropDown: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Background: Start */
.herobanner .hbbackground {
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base) var(--layout-base) var(--layout-0) var(--layout-0);
height: var(--hero-banner-background-height);
margin-bottom: var(--hero-banner-background-margin-bottom);
position: relative;
/* Actions: Start */
/* Actions: End */
/* Avatars: Start */
/* Avatars: End */
/* Blur: Start */
/* Blur: End */
/* Form: Start */
/* Form: End */
/* Image: Start */
/* Image: End */
/* Overlay: Start */
/* Overlay: End */
/* Scale: Start */
/* Scale: End */
/* States: Hover: Start */
/* States: Hover: End */
/* Tag: Content: Start */
/* Tag: Content: End */
}
.herobanner .hbbackground .actions {
overflow: visible;
position: absolute;
bottom: var(--layout-xxxx-small);
/* stylelint-disable-line */
z-index: 2;
/* Action: Start */
/* Action: End */
/* Direction: Start */
/* Direction: End */
}
.herobanner .hbbackground .actions .action {
height: var(--layout-xxxx-medium);
overflow: visible;
width: var(--layout-xxxx-medium);
/* IconButton: Start */
/* IconButton: End */
}
.herobanner .hbbackground .actions .action .iconbutton {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.herobanner .hbbackground .actions[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.herobanner .hbbackground .actions[dir='rtl'] {
left: var(--layout-xxxx-small);
}
.herobanner .hbbackground .icon.avatars {
height: var(--hero-banner-background-height);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
width: var(--hero-banner-background-height);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.herobanner .hbbackground .icon.avatars[dir='ltr'] {
right: var(--layout-0);
}
.herobanner .hbbackground .icon.avatars[dir='rtl'] {
left: var(--layout-0);
}
.herobanner .hbbackground .icon.avatars svg {
fill: var(--color-neutrals-white);
height: var(--hero-banner-background-height);
width: var(--hero-banner-background-height);
}
.herobanner .hbbackground .hbblur {
filter: blur(var(--hero-banner-blur));
}
.herobanner .hbbackground .hbform {
transition: opacity var(--time-commons-base) ease;
opacity: var(--alpha-0);
overflow: visible;
pointer-events: none;
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
z-index: 2;
/* Direction: Start */
/* Direction: End */
/* Field: Start */
/* Field: End */
/* Field Button: Start */
/* Field Button: End */
/* IconButton: Start */
/* IconButton: End */
}
.herobanner .hbbackground .hbform[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.herobanner .hbbackground .hbform[dir='rtl'] {
left: var(--layout-xxxx-small);
}
.herobanner .hbbackground .hbform fieldset {
overflow: visible;
}
.herobanner .hbbackground .hbform .hbhidden {
display: none;
}
.herobanner .hbbackground .hbform .fieldbutton {
overflow: visible;
padding-bottom: var(--layout-0);
}
.herobanner .hbbackground .hbform .iconbutton[data-style='iedit'] {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-xxx-medium);
}
.herobanner .hbbackground img {
border-radius: var(--layout-base) var(--layout-base) var(--layout-0) var(--layout-0);
}
.herobanner .hbbackground.hboverlay::before {
background: linear-gradient(var(--rotation-angle-180), rgba(var(--layout-0), var(--layout-0), var(--layout-0), var(--alpha-40)) var(--percentage-0), var(--color-neutrals-transparent) var(--percentage-100));
content: var(--contentEmpty);
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
z-index: 2;
}
.herobanner .hbbackground .scale {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
height: auto;
resize: both;
width: var(--percentage-100);
}
.herobanner .hbbackground:hover .hbform {
opacity: var(--alpha-100);
pointer-events: all;
}
.herobanner .hbbackground .tagcontent {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
justify-content: flex-end;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
position: absolute;
bottom: var(--layout-xxxxx-small);
/* stylelint-disable-line */
width: var(--percentage-100);
/* Direction: Start */
/* Direction: End */
}
.herobanner .hbbackground .tagcontent[dir='ltr'] {
right: var(--layout-0);
}
.herobanner .hbbackground .tagcontent[dir='rtl'] {
left: var(--layout-0);
}
/* Background: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tabs: Content: Start */
.herobanner .tabscontent {
display: flex;
flex-flow: row wrap;
overflow: visible;
position: relative;
/* Tabs: Start */
/* Tabs: End */
}
.herobanner .tabscontent .tabs {
width: calc(var(--percentage-100) - var(--layout-xxx-medium));
}
/* Tabs: Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Text: Start */
.herobanner .text {
align-items: flex-end;
display: flex;
gap: var(--layout-xxxxx-small);
justify-content: space-between;
overflow: visible;
position: absolute;
top: var(--hero-banner-text-position-top);
/* stylelint-disable-line */
right: var(--layout-xxxx-small);
/* stylelint-disable-line */
left: var(--layout-xxxx-small);
/* stylelint-disable-line */
/* Avatar: Container: Start */
/* Avatar: Container: End */
/* Inside: Start */
/* Inside: End */
}
.herobanner .text .avatarcontainer {
height: var(--hero-banner-avatar-container-height-width);
overflow: visible;
position: relative;
width: var(--hero-banner-avatar-container-height-width);
/* Avatar: Start */
/* Avatar: End */
/* Button: Default: Start */
/* Button: Default: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.herobanner .text .avatarcontainer .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-half) var(--color-primary-border-light);
}
.herobanner .text .avatarcontainer .default {
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
justify-content: center;
opacity: var(--alpha-0);
pointer-events: none;
position: absolute;
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
width: var(--percentage-100);
}
.herobanner .text .avatarcontainer:hover .default {
pointer-events: all;
opacity: var(--alpha-100);
}
.herobanner .text .inside {
width: var(--percentage-100);
/* Typography: Container: Start */
/* Typography: Container: End */
/* Inside: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* Typography: Caption: Icon: Start */
/* Typography: Caption: Icon: End */
}
.herobanner .text .inside .typocontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
overflow: visible;
/* Icon: Organization: Start */
/* Icon: Organization: End */
/* Title 3: Start */
/* Title 3: End */
}
.herobanner .text .inside .typocontainer .icon.iorganization {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-icon-shadow-rgba-color-r), var(--hero-banner-icon-shadow-rgba-color-g), var(--hero-banner-icon-shadow-rgba-color-b), var(--hero-banner-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
/* SVG: Start */
/* SVG: End */
}
.herobanner .text .inside .typocontainer .icon.iorganization svg {
fill: var(--color-neutrals-white);
height: var(--hero-banner-icon-height-tooltip);
width: auto;
}
.herobanner .text .inside .typocontainer [data-style='typotitle3'] {
flex: 1;
/* Icon: Start */
/* Icon: End */
}
.herobanner .text .inside .typocontainer [data-style='typotitle3'] + .icon {
height: var(--layout-xx-small);
width: var(--layout-xxx-small);
}
.herobanner .text .inside .placeholder[data-shape='line'] {
margin-bottom: var(--layout-base);
}
.herobanner .text .inside [data-style='typocaption'],
.herobanner .text .inside [data-style='typospecials'],
.herobanner .text .inside .typocontainer {
width: var(--percentage-100);
}
.herobanner .text .inside [data-style='typocaption'] .icon,
.herobanner .text .inside [data-style='typospecials'] .icon {
height: var(--layout-xxxx-small);
vertical-align: middle;
width: var(--layout-xxxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.herobanner .text .inside [data-style='typocaption'] .icon[dir='ltr'],
.herobanner .text .inside [data-style='typospecials'] .icon[dir='ltr'] {
margin-right: var(--layout-base);
}
.herobanner .text .inside [data-style='typocaption'] .icon[dir='rtl'],
.herobanner .text .inside [data-style='typospecials'] .icon[dir='rtl'] {
margin-left: var(--layout-base);
}
.herobanner .text .inside [data-style='typocaption'] .icon svg,
.herobanner .text .inside [data-style='typospecials'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
/* Text: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.herobanner {
--hero-banner-avatar-container-height-width: 6.25rem;
/* 100px */
--hero-banner-background-height: 11rem;
/* 176px */
--hero-banner-background-margin-bottom: 5rem;
/* 80px */
--hero-banner-blur: 0.375rem;
/* 6px */
--hero-banner-icon-height-tooltip: 1.375rem;
/* 22px */
--hero-banner-icon-shadow-rgba-color-a: 0.4;
--hero-banner-icon-shadow-rgba-color-b: 135;
--hero-banner-icon-shadow-rgba-color-g: 125;
--hero-banner-icon-shadow-rgba-color-r: 96;
--hero-banner-max-height: 18.5rem;
/* 296px */
--hero-banner-min-height: 14.75rem;
/* 236px */
--hero-banner-shadow-rgba-color-a: 0.4;
--hero-banner-shadow-rgba-color-b: 135;
--hero-banner-shadow-rgba-color-g: 125;
--hero-banner-shadow-rgba-color-r: 96;
--hero-banner-text-position-top: 8.75rem;
/* 140px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Hero Banner: Start */
.herobanner {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
max-height: var(--hero-banner-max-height);
min-height: var(--hero-banner-min-height);
overflow: visible;
position: relative;
width: var(--percentage-100);
}
/* Hero Banner: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Empty: Start */
.empty {
align-items: center;
display: flex;
flex-flow: column;
gap: var(--layout-xxx-small);
justify-content: center;
/* Avatar: Start */
/* Avatar: End */
/* Style: Start */
/* Error: Start */
/* Error: End */
/* Info: Start */
/* Info: End */
/* Success: Start */
/* Success: End */
/* Warning: Start */
/* Warning: End */
/* Style: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
.empty .avatar {
background-color: var(--color-primary-border-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.empty .avatar .icon svg {
fill: var(--color-neutrals-white);
}
.empty[data-style='error'] .avatar {
background-color: var(--color-acentuation-error-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.empty[data-style='error'] .avatar .icon svg {
fill: var(--color-alternative-error-base);
}
.empty[data-style='info'] .avatar {
background-color: var(--color-acentuation-info-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.empty[data-style='info'] .avatar .icon svg {
fill: var(--color-alternative-focus-base);
}
.empty[data-style='success'] .avatar {
background-color: var(--color-acentuation-success-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.empty[data-style='success'] .avatar .icon svg {
fill: var(--color-alternative-success-base);
}
.empty[data-style='warning'] .avatar {
background-color: var(--color-acentuation-warning-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.empty[data-style='warning'] .avatar .icon svg {
fill: var(--color-alternative-warning-base);
}
.empty [data-style='typobody'],
.empty [data-style='typocaption'],
.empty [data-style='typotitle1'] {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
width: var(--percentage-100);
}
/* Empty: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Banner: Start */
.banner {
align-items: center;
background-color: var(--color-primary-primary-base);
display: flex;
height: var(--layout-medium);
justify-content: center;
overflow: visible;
position: relative;
width: var(--percentage-100);
/* Button & Link: Start */
/* Button & Link: End */
/* Container: Start */
/* Container: End */
/* IconButton: SVG: Start */
/* IconButton: SVG: End */
/* Sticky: Start */
/* Sticky: End */
/* Tooltip: Start */
/* Tooltip: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.banner [data-type='button'],
.banner [data-type='link'] {
cursor: pointer;
}
.banner .bcontainer {
align-items: center;
display: flex;
height: var(--layout-medium);
width: var(--percentage-100);
}
.banner .iconbutton svg,
.banner .iconbutton:hover svg {
fill: var(--color-neutrals-white);
}
.banner.sticky {
position: sticky;
top: var(--layout-0);
z-index: 8;
}
.banner .tooltip {
max-width: var(--percentage-100);
}
.banner [data-style='typotitle1'] {
color: var(--color-neutrals-white);
flex: 1;
padding-left: var(--layout-xxx-small);
padding-right: var(--layout-xxx-small);
}
/* Hacks: Safari: Start */
.msafari .banner.sticky {
position: -webkit-sticky;
}
/* Hacks: Safari: End */
/* Banner: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.fcbox .abody,
.fcbox .fcbbody {
overflow: hidden;
padding: var(--layout-0);
/* Alert: Start */
/* Alert: End */
/* Empty: Start */
/* Empty: End */
/* Inside: Start */
/* Inside: End */
/* Loading: Start */
/* Loading: End */
}
.fcbox .abody .alert,
.fcbox .fcbbody .alert {
border-radius: var(--layout-0);
max-width: var(--percentage-100);
width: var(--percentage-100);
/* Alert: Start */
/* Alert: End */
}
.fcbox .abody .alert + .ccbinside,
.fcbox .fcbbody .alert + .ccbinside {
height: calc(var(--form-chat-box-open-height) - var(--layout-xx-medium));
}
.fcbox .abody .ccbiempty,
.fcbox .fcbbody .ccbiempty {
height: var(--percentage-100);
width: var(--percentage-100);
}
.fcbox .abody .ccbinside,
.fcbox .fcbbody .ccbinside {
overflow: auto;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* Firefox: Start */
scrollbar-face-color: var(--color-primary-border-dark);
scrollbar-track-color: var(--color-primary-border-base);
scrollbar-width: thin;
/* Firefox: End */
/* IE-11: Start */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* IE-11: End */
/* Variables: Start */
--scroll-webkit-scrollbar-thumb-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-track-blur: 0.188rem;
/* 3px */
--scroll-webkit-scrollbar-width: 0.375rem;
/* 6px */
/* Variables: End */
align-content: flex-start;
align-items: flex-start;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
height: calc(var(--form-chat-box-open-height) - var(--layout-x-medium));
overflow-y: auto;
padding: var(--layout-xxx-small) var(--layout-xxxx-small);
}
.fcbox .abody .ccbinside ::-webkit-scrollbar,
.fcbox .fcbbody .ccbinside ::-webkit-scrollbar {
background-color: var(--color-primary-border-base);
width: var(--scroll-webkit-scrollbar-width);
}
.fcbox .abody .ccbinside ::-webkit-scrollbar-track,
.fcbox .fcbbody .ccbinside ::-webkit-scrollbar-track {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base);
}
.fcbox .abody .ccbinside ::-webkit-scrollbar-thumb,
.fcbox .fcbbody .ccbinside ::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-thumb-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-border-dark);
border-radius: var(--layout-base);
}
.fcbox .abody .progressbar,
.fcbox .fcbbody .progressbar {
margin-bottom: var(--layout-xxxx-small);
margin-top: var(--layout-xxxx-small);
}
/* Editor: Start */
.fcbox .abody .ccbeditor,
.fcbox .fcbfooter .ccbeditor {
align-items: center;
background-color: var(--color-neutrals-white);
border-top: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
min-height: var(--layout-medium);
width: var(--percentage-100);
/* Actions: Direction: Start */
/* Actions: Direction: End */
/* File & Url: Start */
/* File & Url: End */
}
.fcbox .abody .ccbeditor .cfeactions[dir='ltr'],
.fcbox .fcbfooter .ccbeditor .cfeactions[dir='ltr'] {
margin-right: var(--layout-xxxx-small);
}
.fcbox .abody .ccbeditor .cfeactions[dir='rtl'],
.fcbox .fcbfooter .ccbeditor .cfeactions[dir='rtl'] {
margin-left: var(--layout-xxxx-small);
}
.fcbox .abody .ccbeditor .cards.fileurl,
.fcbox .fcbfooter .ccbeditor .cards.fileurl {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
.fcbox .abody .ccbeditor .cards.fileurl:last-child,
.fcbox .fcbfooter .ccbeditor .cards.fileurl:last-child {
margin-bottom: var(--layout-xxxx-small);
}
/* Container: Start */
.fcbox .abody .containereditor,
.fcbox .fcbfooter .containereditor {
flex: 1;
gap: var(--layout-xxxxx-small);
max-width: var(--percentage-100);
padding-bottom: var(--layout-0);
width: var(--percentage-100);
/* Field: Start */
/* Field: End */
}
.fcbox .abody .containereditor .fieldeditor,
.fcbox .fcbfooter .containereditor .fieldeditor {
width: var(--percentage-100);
}
/* Container: End */
/* Editor: End */
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Box: Start */
.fcbox {
border-radius: var(--layout-base);
max-width: var(--form-chat-box-max-min-width);
min-width: var(--form-chat-box-max-min-width);
overflow: hidden;
/* Header: Start */
/* Header: End */
/* States: Start */
/* Active: Header: IconButton: SVG: Start */
/* Active: Header: IconButton: SVG: End */
/* Open: Start */
/* Open: End */
/* States: End */
}
.fcbox .aheader,
.fcbox .fcbheader {
background-color: var(--color-secondary-alert-base);
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base) var(--layout-base) var(--layout-0) var(--layout-0);
overflow: visible;
}
.fcbox .aheader a.iconbutton[data-states='active'],
.fcbox .aheader button.iconbutton:hover,
.fcbox .fcbheader a.iconbutton[data-states='active'],
.fcbox .fcbheader button.iconbutton:hover {
fill: var(--form-chat-box-header-icon-fill);
}
.fcbox[open] {
max-width: var(--form-chat-box-open-max-min-width);
min-width: var(--form-chat-box-open-max-min-width);
}
/* Box: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Container: Start */
.containerchat {
max-width: var(--form-chat-box-open-max-min-width);
min-width: var(--form-chat-box-max-min-width);
overflow: visible;
/* Placement: Start */
/* Left: Start */
/* Direction: Start */
/* Direction: End */
/* Left: End */
/* Right: Direction: Start */
/* Right: Direction: End */
/* Placement: End */
/* Box: Styles: Shadow: Start */
/* Box: Styles: Shadow: End */
}
.containerchat[data-placement='left'],
.containerchat[data-placement='right'] {
bottom: var(--layout-0);
position: fixed;
z-index: 10;
}
.containerchat[data-placement='left'][dir='ltr'] {
left: var(--layout-xxx-small);
}
.containerchat[data-placement='left'][dir='rtl'] {
right: var(--layout-xxx-small);
}
.containerchat[data-placement='right'][dir='ltr'] {
right: var(--layout-xxx-small);
}
.containerchat[data-placement='right'][dir='rtl'] {
left: var(--layout-xxx-small);
}
.containerchat .fcbox[data-style='shadow'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--layout-xxx-small) rgba(var(--form-chat-box-shadow-rgba-color-r), var(--form-chat-box-shadow-rgba-color-g), var(--form-chat-box-shadow-rgba-color-b), var(--form-chat-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border-radius: var(--layout-xxxx-small) var(--layout-xxxx-small) var(--layout-0) var(--layout-0);
}
/* Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Disclaimer: Start */
.fcbox .ccbinside .fcbdisclaimer {
background-color: var(--color-acentuation-warning-base);
border-radius: var(--layout-base);
margin-left: auto;
margin-right: auto;
max-width: var(--form-chat-disclaimer-width);
padding: var(--layout-xxxxx-small) var(--layout-xxxx-small);
}
/* Disclaimer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Divider: Start */
.fcbox .ccbinside .fcbdivider {
align-items: center;
display: flex;
height: var(--layout-x-small);
position: relative;
width: var(--percentage-100);
/* Typography: Specials: Start */
/* Typography: Specials: End */
}
.fcbox .ccbinside .fcbdivider [data-style='typospecials'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-neutrals-white);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Divider: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* TextBox: Start */
.fcbox .ccbinside .fcbtextbox {
display: flex;
gap: var(--layout-xxxx-small);
width: var(--percentage-100);
/* Bubble: Start */
/* Me: Start */
/* Me: End */
/* You: Direction: Start */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* You: Direction: End */
/* Bubble: End */
/* Inside: Start */
/* Inside: End */
/* Placement: Start */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* Placement: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
.fcbox .ccbinside .fcbtextbox .fcbtbibubble {
border-radius: var(--layout-base);
/* Image: Start */
/* Image: End */
}
.fcbox .ccbinside .fcbtextbox .fcbtbibubble img.fcbtbibubble {
display: block;
}
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbme'] .fcbtbibubble {
background-color: var(--color-secondary-alert-base);
padding: var(--layout-xxxx-small);
/* Typography: Start */
/* Typography: End */
}
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbme'] .fcbtbibubble p {
color: var(--color-primary-text-base);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
line-height: var(--font-medium-line-height);
}
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbme'] figure.fcbtbibubble,
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbyou'] figure.fcbtbibubble {
border: solid var(--layout-half) var(--color-secondary-alert-base);
}
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbme'] figure.fcbtbibubble {
border-radius: var(--layout-base);
/* Image: Start */
/* Image: End */
}
.fcbox .ccbinside .fcbtextbox[data-style='fcbtbme'] figure.fcbtbibubble img.fcbtbibubble {
background: none;
padding: var(--layout-0);
}
.fcbox .ccbinside .fcbtextbox[data-placement='left'][dir='ltr'] figure.fcbtbibubble {
border-radius: var(--layout-0) var(--layout-base) var(--layout-base) var(--layout-base);
}
.fcbox .ccbinside .fcbtextbox[data-placement='left'][dir='rtl'] figure.fcbtbibubble {
border-radius: var(--layout-base) var(--layout-0) var(--layout-base) var(--layout-base);
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'][dir='ltr'] figure.fcbtbibubble {
border-radius: var(--layout-base) var(--layout-0) var(--layout-base) var(--layout-base);
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'][dir='rtl'] figure.fcbtbibubble {
border-radius: var(--layout-0) var(--layout-base) var(--layout-base) var(--layout-base);
}
.fcbox .ccbinside .fcbtextbox .fcbtbinside {
display: flex;
flex-direction: column;
gap: var(--layout-base);
max-width: calc(var(--percentage-100) - var(--layout-large));
}
.fcbox .ccbinside .fcbtextbox[data-placement='left'] {
justify-content: flex-start;
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'] {
justify-content: flex-end;
/* Direction: Start */
/* Avatar: Start */
/* Avatar: End */
/* Bubble: Start */
/* Bubble: End */
/* Direction: End */
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .avatar[dir='ltr'],
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .icon[dir='ltr'] {
order: 2;
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .avatar[dir='rtl'],
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .icon[dir='rtl'] {
order: 1;
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .fcbtbibubble[dir='ltr'] {
order: 1;
}
.fcbox .ccbinside .fcbtextbox[data-placement='right'] .fcbtbibubble[dir='rtl'] {
order: 2;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'] {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
margin-bottom: var(--layout-base);
/* Direction: Start */
/* Direction: End */
/* Specials: Start */
/* Specials: End */
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='ltr'][data-align='tacenter'] {
text-align: center;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='ltr'][data-align='taleft'] {
text-align: left;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='ltr'][data-align='taright'] {
text-align: right;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='rtl'][data-align='tacenter'] {
text-align: center;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='rtl'][data-align='taleft'] {
text-align: right;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'][dir='rtl'][data-align='taright'] {
text-align: left;
}
.fcbox .ccbinside .fcbtextbox [data-style='typocontainer'] .fcbtbifirst {
color: var(--color-primary-text-dark);
font-weight: var(--font-small-weight);
}
/* TextBox: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.fcbox,
.containerchat {
--form-chat-box-body-inside-min-height: 27rem;
/* 432px */
--form-chat-box-max-min-width: 17.75rem;
/* 284px */
--form-chat-box-open-height: 30rem;
/* 480px */
--form-chat-box-open-max-height: 37.5rem;
/* 600px */
--form-chat-box-open-max-min-width: 37.5rem;
/* 600px */
--form-chat-box-shadow-rgba-color-a: 0.4;
--form-chat-box-shadow-rgba-color-b: 135;
--form-chat-box-shadow-rgba-color-g: 125;
--form-chat-box-shadow-rgba-color-r: 96;
--form-chat-disclaimer-width: 30.25rem;
/* 484px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Step: Start */
.timeline .step {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
overflow: visible;
padding-bottom: var(--layout-xxx-small);
position: relative;
/* Avatar: Start */
/* Avatar: End */
/* Line: Start */
/* Line: End */
/* States: Start */
/* States: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
.timeline .step.tllast {
padding-bottom: var(--layout-0);
}
.timeline .step.tllast::before {
display: none;
}
.timeline .step .avatar {
position: relative;
z-index: 2;
/* States: Start */
/* States: End */
/* Style: Start */
/* Heavy: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* Info: Start */
/* Info: End */
/* Success: Start */
/* Success: End */
/* Warning: Start */
/* Warning: End */
/* Heavy: End */
/* Light: Start */
/* Disable: Start */
/* Disable: End */
/* Error: Start */
/* Error: End */
/* Info: Start */
/* Info: End */
/* Success: Start */
/* Success: End */
/* Warning: Start */
/* Warning: End */
/* Light: End */
/* Style: End */
}
.timeline .step .avatar[data-states='error'] {
align-self: flex-start;
}
.timeline .step .avatar[data-style='heavy'] .icon svg {
fill: var(--color-neutrals-white);
}
.timeline .step .avatar[data-style='heavy'][data-states='disable'] {
background-color: var(--color-primary-disable-dark);
}
.timeline .step .avatar[data-style='heavy'][data-states='error'] {
background-color: var(--color-alternative-error-dark);
}
.timeline .step .avatar[data-style='heavy'][data-states='info'] {
background-color: var(--color-alternative-focus-dark);
}
.timeline .step .avatar[data-style='heavy'][data-states='success'] {
background-color: var(--color-alternative-success-dark);
}
.timeline .step .avatar[data-style='heavy'][data-states='warning'] {
background-color: var(--color-alternative-warning-dark);
}
.timeline .step .avatar[data-style='light'][data-states='disable'] {
background-color: var(--color-primary-disable-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.timeline .step .avatar[data-style='light'][data-states='disable'] .icon svg {
fill: var(--color-primary-disable-light);
}
.timeline .step .avatar[data-style='light'][data-states='error'] {
background-color: var(--color-acentuation-error-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.timeline .step .avatar[data-style='light'][data-states='error'] .icon svg {
fill: var(--color-alternative-error-dark);
}
.timeline .step .avatar[data-style='light'][data-states='info'] {
background-color: var(--color-acentuation-info-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.timeline .step .avatar[data-style='light'][data-states='info'] .icon svg {
fill: var(--color-primary-primary-dark);
}
.timeline .step .avatar[data-style='light'][data-states='success'] {
background-color: var(--color-acentuation-success-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.timeline .step .avatar[data-style='light'][data-states='success'] .icon svg {
fill: var(--color-alternative-success-dark);
}
.timeline .step .avatar[data-style='light'][data-states='warning'] {
background-color: var(--color-acentuation-warning-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.timeline .step .avatar[data-style='light'][data-states='warning'] .icon svg {
fill: var(--color-alternative-warning-dark);
}
.timeline .step::before {
background-color: var(--color-primary-border-base);
content: var(--contentEmpty);
display: block;
position: absolute;
top: var(--layout-0);
left: var(--timeline-step-position-left);
bottom: var(--layout-0);
width: var(--layout-half);
}
.timeline .step[data-states='focus'] .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-base) var(--color-neutrals-blue-grey-6);
border: solid var(--layout-border) var(--color-primary-border-light);
}
.timeline .step [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
/* Title: Start */
/* Title: End */
}
.timeline .step [data-style='typocontainer'] [data-style='typotitle3'] {
color: var(--color-primary-text-dark);
}
/* Step: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* TimeLine: Start */
.timeline .step {
--timeline-step-position-left: 0.875rem;
/* 14px */
}
/* TimeLine: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Timeline: Start */
.timeline {
display: flex;
flex-direction: column;
overflow: visible;
position: relative;
}
/* Timeline: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Core: End */
/* Platform: Start */
/* Import: Start */
/* AI: Start */
a.aibutton,
button.aibutton {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
background-color: var(--color-alternative-ai-light);
border-radius: var(--layout-xxx-medium);
color: var(--color-alternative-ai-base);
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* Icon: Start */
/* SVG: Start */
/* SVG: End */
/* Icon: End */
/* Text: Start */
/* Text: End */
/* Hover: End */
/* Loading: Start */
/* Loading: End */
/* States: End */
/* Text: Start */
/* Text: End */
/* Variables: Start */
--ai-button-animation-time: 1800ms;
--ai-button-backgorund-size: 240%;
/* Variables: End */
}
a.aibutton .icon,
button.aibutton .icon {
animation: ai-button-icon-effect var(--ai-button-animation-time) ease infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background: linear-gradient(var(--rotation-angle-221), var(--color-alternative-ai-dark), var(--color-alternative-ai-base), var(--color-alternative-ai-light));
/*linear-gradient(221deg, #5c00a7, #7c00bb, #9b00ce, #f3e9ff);*/
background-size: var(--ai-button-backgorund-size) var(--ai-button-backgorund-size);
mask: var(--ai-button-svg);
/* Variables: Start */
--ai-button-svg: url('data:image/svg+xml,\ ');
/* Variables: End */
}
a.aibutton .icon svg,
button.aibutton .icon svg {
opacity: var(--alpha-0);
}
a.aibutton[data-states='disable'],
button.aibutton[data-states='disable'] {
background-color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Text: Start */
/* Text: End */
}
a.aibutton[data-states='disable'] .icon svg,
button.aibutton[data-states='disable'] .icon svg,
a.aibutton[data-states='disable']:hover .icon svg,
button.aibutton[data-states='disable']:hover .icon svg {
fill: var(--color-primary-disable-light);
}
a.aibutton[data-states='disable'] .aibuttontext,
button.aibutton[data-states='disable'] .aibuttontext,
a.aibutton[data-states='disable']:hover .aibuttontext,
button.aibutton[data-states='disable']:hover .aibuttontext {
background: none;
color: var(--color-primary-disable-light);
-webkit-text-fill-color: var(--color-primary-disable-light);
}
a.aibutton:hover .icon,
button.aibutton:hover .icon,
a.aibutton[data-states='disable'] .icon,
button.aibutton[data-states='disable'] .icon {
background: none;
mask: none;
/* SVG: Start */
/* SVG: End */
}
a.aibutton:hover .icon svg,
button.aibutton:hover .icon svg,
a.aibutton[data-states='disable'] .icon svg,
button.aibutton[data-states='disable'] .icon svg {
opacity: var(--alpha-1);
}
a.aibutton:hover .icon svg,
button.aibutton:hover .icon svg {
fill: var(--color-alternative-ai-base);
}
a.aibutton:hover .aibuttontext,
button.aibutton:hover .aibuttontext {
background: none;
color: var(--color-alternative-ai-base);
-webkit-text-fill-color: var(--color-alternative-ai-base);
}
a.aibutton[data-states='loading'],
button.aibutton[data-states='loading'] {
overflow: hidden;
padding-bottom: var(--layout-border);
padding-top: var(--layout-border);
position: relative;
z-index: 1;
/* Variables: Start */
--ai-badge-tag-animation-duration: 2s;
--ai-badge-tag-height-width: calc(var(--percentage-100) - var(--layout-half));
--ai-badge-tag-position-negative-value: -50%;
--ai-badge-tag-z-index-negative-value-1: -1;
--ai-badge-tag-z-index-negative-value-2: -2;
/* Variables: End */
/* Icon: Start */
/* Icon: End */
}
a.aibutton[data-states='loading']::after,
button.aibutton[data-states='loading']::after,
a.aibutton[data-states='loading']::before,
button.aibutton[data-states='loading']::before {
content: var(--contentEmpty);
position: absolute;
}
a.aibutton[data-states='loading']::after,
button.aibutton[data-states='loading']::after {
background-color: var(--color-alternative-ai-light);
border-radius: var(--layout-xxx-medium);
bottom: var(--layout-border);
height: var(--ai-badge-tag-height-width);
left: var(--layout-border);
right: var(--layout-border);
top: var(--layout-border);
width: var(--ai-badge-tag-height-width);
z-index: var(--ai-badge-tag-z-index-negative-value-1);
}
a.aibutton[data-states='loading']::before,
button.aibutton[data-states='loading']::before {
animation: ai-rotate-tag var(--ai-badge-tag-animation-duration) linear infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
aspect-ratio: 1;
background: conic-gradient(var(--color-neutrals-transparent) var(--rotation-angle-270), var(--color-alternative-ai-base), var(--color-neutrals-transparent));
left: var(--percentage-50);
opacity: var(--alpha-0);
top: var(--percentage-50);
transform: translate(var(--ai-badge-tag-position-negative-value), var(--ai-badge-tag-position-negative-value));
width: var(--percentage-100);
z-index: var(--ai-badge-tag-z-index-negative-value-2);
}
a.aibutton[data-states='loading'] .icon,
button.aibutton[data-states='loading'] .icon {
display: inline-block;
}
a.aibutton .aibuttontext,
button.aibutton .aibuttontext {
animation: ai-button-text-gradient var(--ai-button-animation-time) ease infinite normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
background: linear-gradient(var(--rotation-angle-221), var(--color-alternative-ai-dark), var(--ai-button-background-text-color), var(--color-alternative-ai-base), var(--color-alternative-ai-light));
background-size: var(--ai-button-backgorund-size) var(--ai-button-backgorund-size);
color: var(--color-neutrals-transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: var(--color-neutrals-transparent);
/* Variables: Start */
--ai-button-background-text-color: #7c00bb;
/* Variables: End */
}
/* AI: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Contained: Start */
a.contained,
button.contained {
transition: background-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
color: var(--color-neutrals-white);
/* AI: Start */
/* AI: End */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Start */
/* Active: Start */
/* AI: Start */
/* AI: End */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
}
a.contained.ai,
button.contained.ai {
background-color: var(--color-alternative-ai-base);
}
a.contained .icon svg,
button.contained .icon svg {
fill: var(--color-neutrals-white);
}
a.contained[data-states='active'],
button.contained[data-states='active'],
a.contained:hover,
button.contained:hover {
background-color: var(--color-primary-primary-dark);
}
a.contained.ai[data-states='active'],
button.contained.ai[data-states='active'],
a.contained.ai:hover,
button.contained.ai:hover {
background-color: var(--color-alternative-ai-dark);
}
a.contained[data-states='disable'],
button.contained[data-states='disable'],
a.contained.iabutton[data-states='disable'],
button.contained.iabutton[data-states='disable'],
a.contained.ai[data-states='disable'],
button.contained.ai[data-states='disable'] {
background-color: var(--color-primary-disable-dark);
}
/* Contained: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Default: Start */
a.default,
a.outline,
a.upload,
button.default,
button.outline,
button.upload {
transition: border-color var(--time-commons-base) ease, color var(--time-commons-base) ease;
color: var(--color-primary-primary-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
}
a.default .icon svg,
a.outline .icon svg,
a.upload .icon svg,
button.default .icon svg,
button.outline .icon svg,
button.upload .icon svg {
fill: var(--color-primary-primary-base);
}
a.default[data-states='active'],
a.outline[data-states='active'],
a.upload[data-states='active'],
button.default[data-states='active'],
button.outline[data-states='active'],
button.upload[data-states='active'],
a.default:hover,
a.outline:hover,
a.upload:hover,
button.default:hover,
button.outline:hover,
button.upload:hover {
color: var(--color-primary-primary-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.default[data-states='active'] .icon svg,
a.outline[data-states='active'] .icon svg,
a.upload[data-states='active'] .icon svg,
button.default[data-states='active'] .icon svg,
button.outline[data-states='active'] .icon svg,
button.upload[data-states='active'] .icon svg,
a.default:hover .icon svg,
a.outline:hover .icon svg,
a.upload:hover .icon svg,
button.default:hover .icon svg,
button.outline:hover .icon svg,
button.upload:hover .icon svg {
fill: var(--color-primary-primary-dark);
}
a.default[data-states='disable'],
a.outline[data-states='disable'],
a.upload[data-states='disable'],
button.default[data-states='disable'],
button.outline[data-states='disable'],
button.upload[data-states='disable'],
a.default.iabutton[data-states='disable'],
a.outline.iabutton[data-states='disable'],
a.upload.iabutton[data-states='disable'],
button.default.iabutton[data-states='disable'],
button.outline.iabutton[data-states='disable'],
button.upload.iabutton[data-states='disable'] {
color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.default[data-states='disable'] .icon svg,
a.outline[data-states='disable'] .icon svg,
a.upload[data-states='disable'] .icon svg,
button.default[data-states='disable'] .icon svg,
button.outline[data-states='disable'] .icon svg,
button.upload[data-states='disable'] .icon svg,
a.default.iabutton[data-states='disable'] .icon svg,
a.outline.iabutton[data-states='disable'] .icon svg,
a.upload.iabutton[data-states='disable'] .icon svg,
button.default.iabutton[data-states='disable'] .icon svg,
button.outline.iabutton[data-states='disable'] .icon svg,
button.upload.iabutton[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
/* AI: Start */
button.default.ai {
color: var(--color-alternative-ai-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
}
button.default.ai .icon svg {
fill: var(--color-alternative-ai-base);
}
button.default.ai[data-states='active'],
button.default.ai:hover {
color: var(--color-alternative-ai-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
button.default.ai[data-states='active'] .icon svg,
button.default.ai:hover .icon svg {
fill: var(--color-alternative-ai-dark);
}
button.default.ai[data-states='disable'] {
color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
button.default.ai[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
/* AI: End */
/* Default: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Link: Start */
a.link.contained,
a.link.default a.link.outline {
display: flex;
font-size: var(--font-small-size);
line-height: var(--button-line-height);
/* Direction: Icon: Start */
/* Direction: End */
}
a.link.contained[dir='ltr'] .lileft,
a.link.default a.link.outline[dir='ltr'] .lileft,
a.link.contained[dir='rtl'] .liright,
a.link.default a.link.outline[dir='rtl'] .liright {
margin-right: var(--layout-0);
}
a.link.contained[dir='ltr'] .liright,
a.link.default a.link.outline[dir='ltr'] .liright,
a.link.contained[dir='rtl'] .lileft,
a.link.default a.link.outline[dir='rtl'] .lileft {
margin-left: var(--layout-0);
}
/* Link: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Outline: Start */
a.outline,
a.upload,
button.outline,
button.upload {
border: solid var(--layout-border) var(--color-primary-link-base);
border-radius: var(--layout-base);
/* AI: Start */
/* AI: End */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Start */
/* Active: Start */
/* AI: Start */
/* AI: End */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
}
a.outline.ai,
a.upload.ai,
button.outline.ai,
button.upload.ai {
border-color: var(--color-alternative-ai-base);
color: var(--color-alternative-ai-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.outline.ai .icon svg,
a.upload.ai .icon svg,
button.outline.ai .icon svg,
button.upload.ai .icon svg {
fill: var(--color-alternative-ai-base);
}
a.outline .icon svg,
a.upload .icon svg,
button.outline .icon svg,
button.upload .icon svg {
fill: var(--color-primary-primary-base);
}
a.outline[data-states='active'],
a.upload[data-states='active'],
button.outline[data-states='active'],
button.upload[data-states='active'],
a.outline:hover,
a.upload:hover,
button.outline:hover,
button.upload:hover {
border-color: var(--color-primary-link-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.outline[data-states='active'] .icon svg,
a.upload[data-states='active'] .icon svg,
button.outline[data-states='active'] .icon svg,
button.upload[data-states='active'] .icon svg,
a.outline:hover .icon svg,
a.upload:hover .icon svg,
button.outline:hover .icon svg,
button.upload:hover .icon svg {
fill: var(--color-primary-primary-dark);
}
a.outline.ai[data-states='active'],
a.upload.ai[data-states='active'],
button.outline.ai[data-states='active'],
button.upload.ai[data-states='active'],
a.outline.ai:hover,
a.upload.ai:hover,
button.outline.ai:hover,
button.upload.ai:hover {
border-color: var(--color-alternative-ai-dark);
color: var(--color-alternative-ai-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.outline.ai[data-states='active'] .icon svg,
a.upload.ai[data-states='active'] .icon svg,
button.outline.ai[data-states='active'] .icon svg,
button.upload.ai[data-states='active'] .icon svg,
a.outline.ai:hover .icon svg,
a.upload.ai:hover .icon svg,
button.outline.ai:hover .icon svg,
button.upload.ai:hover .icon svg {
fill: var(--color-alternative-ai-dark);
}
a.outline[data-states='disable'],
a.upload[data-states='disable'],
button.outline[data-states='disable'],
button.upload[data-states='disable'],
a.outline.iabutton[data-states='disable'],
a.upload.iabutton[data-states='disable'],
button.outline.iabutton[data-states='disable'],
button.upload.iabutton[data-states='disable'],
a.outline.ai[data-states='disable'],
a.upload.ai[data-states='disable'],
button.outline.ai[data-states='disable'],
button.upload.ai[data-states='disable'] {
border-color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
a.outline[data-states='disable'] .icon svg,
a.upload[data-states='disable'] .icon svg,
button.outline[data-states='disable'] .icon svg,
button.upload[data-states='disable'] .icon svg,
a.outline.iabutton[data-states='disable'] .icon svg,
a.upload.iabutton[data-states='disable'] .icon svg,
button.outline.iabutton[data-states='disable'] .icon svg,
button.upload.iabutton[data-states='disable'] .icon svg,
a.outline.ai[data-states='disable'] .icon svg,
a.upload.ai[data-states='disable'] .icon svg,
button.outline.ai[data-states='disable'] .icon svg,
button.upload.ai[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
a.outline.ai[data-states='disable'],
a.upload.ai[data-states='disable'],
button.outline.ai[data-states='disable'],
button.upload.ai[data-states='disable'] {
color: var(--color-primary-disable-dark);
}
/* Outline: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
a.aibutton,
a.contained,
a.default,
a.outline,
a.upload,
button.aibutton,
button.contained,
button.default,
button.outline,
button.upload {
--button-line-height: 2.25rem;
/* 36px */
--button-loading-duration: 1568ms;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* AI, Contained, Default, Outline & Upload: Start */
a.aibutton,
a.contained,
a.default,
a.outline,
a.upload,
button.aibutton,
button.contained,
button.default,
button.outline,
button.upload {
align-items: center;
display: flex;
flex-flow: row wrap;
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
gap: var(--layout-xxxxx-small);
height: var(--layout-xxx-medium);
justify-content: center;
line-height: var(--button-line-height);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
position: relative;
/* Icon: Start */
/* Icon: End */
/* Inside: Start */
/* Inside: End */
/* States: Start */
/* Hidden: Start */
/* Hidden: End */
/* Loading: Start */
/* Loading: End */
/* States: End */
}
a.aibutton .icon,
a.contained .icon,
a.default .icon,
a.outline .icon,
a.upload .icon,
button.aibutton .icon,
button.contained .icon,
button.default .icon,
button.outline .icon,
button.upload .icon {
height: var(--layout-xx-small);
vertical-align: middle;
width: var(--layout-xx-small);
/* SVG: Start */
/* SVG: End */
}
a.aibutton .icon svg,
a.contained .icon svg,
a.default .icon svg,
a.outline .icon svg,
a.upload .icon svg,
button.aibutton .icon svg,
button.contained .icon svg,
button.default .icon svg,
button.outline .icon svg,
button.upload .icon svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
a.aibutton .binside,
a.contained .binside,
a.default .binside,
a.outline .binside,
a.upload .binside,
button.aibutton .binside,
button.contained .binside,
button.default .binside,
button.outline .binside,
button.upload .binside {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
a.aibutton[hidden],
a.contained[hidden],
a.default[hidden],
a.outline[hidden],
a.upload[hidden],
button.aibutton[hidden],
button.contained[hidden],
button.default[hidden],
button.outline[hidden],
button.upload[hidden] {
display: none;
}
a.aibutton[data-states='loading'] .icon,
a.contained[data-states='loading'] .icon,
a.default[data-states='loading'] .icon,
a.outline[data-states='loading'] .icon,
a.upload[data-states='loading'] .icon,
button.aibutton[data-states='loading'] .icon,
button.contained[data-states='loading'] .icon,
button.default[data-states='loading'] .icon,
button.outline[data-states='loading'] .icon,
button.upload[data-states='loading'] .icon {
display: none;
}
a.aibutton[data-states='loading'] .icon.loading,
a.contained[data-states='loading'] .icon.loading,
a.default[data-states='loading'] .icon.loading,
a.outline[data-states='loading'] .icon.loading,
a.upload[data-states='loading'] .icon.loading,
button.aibutton[data-states='loading'] .icon.loading,
button.contained[data-states='loading'] .icon.loading,
button.default[data-states='loading'] .icon.loading,
button.outline[data-states='loading'] .icon.loading,
button.upload[data-states='loading'] .icon.loading {
display: inline-block;
/* SVG: Start */
/* SVG: End */
}
a.aibutton[data-states='loading'] .icon.loading svg,
a.contained[data-states='loading'] .icon.loading svg,
a.default[data-states='loading'] .icon.loading svg,
a.outline[data-states='loading'] .icon.loading svg,
a.upload[data-states='loading'] .icon.loading svg,
button.aibutton[data-states='loading'] .icon.loading svg,
button.contained[data-states='loading'] .icon.loading svg,
button.default[data-states='loading'] .icon.loading svg,
button.outline[data-states='loading'] .icon.loading svg,
button.upload[data-states='loading'] .icon.loading svg {
animation: spinner var(--button-loading-duration) linear infinite normal none;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
left: var(--layout-0);
top: var(--layout-0);
}
a.aibutton,
a.contained,
a.default,
a.outline,
a.upload {
line-height: var(--button-line-height);
}
/* AI, Contained, Default, Outline & Upload: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Avatar: Start */
/* Button: Initials: Start */
.avatar .initials {
display: block;
height: var(--percentage-100);
width: var(--percentage-100);
}
/* Button: Initials: End */
/* Emoji: Start */
.avatar {
line-height: 1;
/* Inside: Start */
/* Inside: End */
/* Size: Start */
/* Large: Start */
/* Large: End */
/* Medium: Start */
/* Medium: End */
/* Small: Start */
/* Small: End */
/* xLarge: Start */
/* xLarge: End */
/* xSmall: Start */
/* &[data-size='xs'] .aemoji { font-size: 16px; } */
/* xSmall: End */
/* xxLarge: Start */
/* xxLarge: End */
/* xsSmall: Start */
/* xsSmall: End */
/* Size: End */
}
.avatar .aemoji {
align-items: center;
display: flex;
font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji';
height: var(--percentage-100);
justify-content: center;
text-align: center;
width: var(--percentage-100);
/* Variables: Start */
--avatar-font-size-large: 2.75rem;
--avatar-font-size-medium: 1.5rem;
--avatar-font-size-x-large: 4rem;
--avatar-font-size-xx-large: 5.25rem;
/* Variables: End */
}
.avatar[data-size='l'] .aemoji {
font-size: var(--avatar-font-size-large);
}
.avatar[data-size='m'] .aemoji {
font-size: var(--avatar-font-size-medium);
}
.avatar[data-size='s'] .aemoji,
.avatar[data-size='xs'] .aemoji {
font-size: var(--font-large-size);
}
.avatar[data-size='xl'] .aemoji {
font-size: var(--avatar-font-size-x-large);
}
.avatar[data-size='xxl'] .aemoji {
font-size: var(--avatar-font-size-xx-large);
}
.avatar[data-size='xxs'] .aemoji {
font-size: var(--font-medium-size);
}
/* Emoji: End */
/* Icon: Start */
.avatar[data-background='bgdefault'].aai .icon.iai {
background-color: var(--color-neutrals-transparent);
/* SVG: Start */
/* SVG: End */
}
.avatar[data-background='bgdefault'].aai .icon.iai svg {
fill: var(--color-alternative-ai-base);
}
/* Icon: End */
/* Avatar: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Avatar: Start */
/* Background: Start */
/* Disable: Start */
.avatar[data-background='bgdisable'] {
background-color: var(--color-primary-disable-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-background='bgdisable'] .icon svg {
fill: var(--color-primary-icon-base);
}
/* Disable: End */
/* Error: Start */
.avatar[data-background='bgerror'] {
background-color: var(--color-acentuation-error-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-background='bgerror'] .icon svg {
fill: var(--color-alternative-error-dark);
}
/* Error: End */
/* Info: Start */
.avatar[data-background='bginfo'] {
background-color: var(--color-acentuation-info-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-background='bginfo'] .icon svg {
fill: var(--color-primary-primary-dark);
}
/* Info: End */
/* Success: Start */
.avatar[data-background='bgsuccess'] {
background-color: var(--color-acentuation-success-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-background='bgsuccess'] .icon svg {
fill: var(--color-alternative-success-dark);
}
/* Success: End */
/* Warning: Start */
.avatar[data-background='bgwarning'] {
background-color: var(--color-acentuation-warning-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.avatar[data-background='bgwarning'] .icon svg {
fill: var(--color-alternative-warning-dark);
}
/* Warning: End */
/* Background: End */
/* Avatar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Badges & Tags: Start */
/* Heavy: Start */
/* States: Start */
/* Ai: Start */
.badge[data-style='heavy'][data-states='ai'],
.badge[data-style='heavy'][data-states='default'],
.badge[data-style='heavy'][data-states='error'],
.badge[data-style='heavy'][data-states='info'],
.badge[data-style='heavy'][data-states='notifications'],
.badge[data-style='heavy'][data-states='success'],
.badge[data-style='heavy'][data-states='warning'] {
color: var(--color-neutrals-white);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='heavy'][data-states='ai'] .icon svg,
.badge[data-style='heavy'][data-states='default'] .icon svg,
.badge[data-style='heavy'][data-states='error'] .icon svg,
.badge[data-style='heavy'][data-states='info'] .icon svg,
.badge[data-style='heavy'][data-states='notifications'] .icon svg,
.badge[data-style='heavy'][data-states='success'] .icon svg,
.badge[data-style='heavy'][data-states='warning'] .icon svg {
fill: var(--color-neutrals-white);
}
.badge[data-style='heavy'][data-states='ai'] {
background-color: var(--color-alternative-ai-dark);
}
/* Ai: End */
/* Away: Start */
.badge[data-style='heavy'][data-states='away'],
.badge[data-style='heavy'][data-states='disable'],
.badge[data-style='heavy'][data-states='offline'],
.badge[data-style='heavy'][data-states='online'] {
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='heavy'][data-states='away'] .icon svg,
.badge[data-style='heavy'][data-states='disable'] .icon svg,
.badge[data-style='heavy'][data-states='offline'] .icon svg,
.badge[data-style='heavy'][data-states='online'] .icon svg {
fill: var(--color-primary-text-base);
}
.badge[data-style='heavy'][data-states='away'] {
background-color: var(--color-orange-700);
}
/* Away: End */
/* Default: Start */
.badge[data-style='heavy'][data-states='default'] {
background-color: var(--color-neutrals-black);
}
/* Default: End */
/* Disable: Start */
.badge[data-style='heavy'][data-states='disable'] {
background-color: var(--color-primary-disable-base);
}
/* Disable: End */
/* Error: Start */
.badge[data-style='heavy'][data-states='error'] {
background-color: var(--color-alternative-error-dark);
}
/* Error: End */
/* Info: Start */
.badge[data-style='heavy'][data-states='info'] {
background-color: var(--color-primary-primary-base);
}
/* Info: End */
/* Notification: Start */
.badge[data-style='heavy'][data-states='notifications'] {
background-color: var(--color-red-700);
}
/* Notification: End */
/* Offline: Start */
.badge[data-style='heavy'][data-states='offline'] {
background-color: var(--color-primary-disable-dark);
}
/* Offline: End */
/* Online: Start */
.badge[data-style='heavy'][data-states='online'] {
background-color: var(--color-green-700);
}
/* Online: End */
/* Success: Start */
.badge[data-style='heavy'][data-states='success'] {
background-color: var(--color-alternative-success-dark);
}
/* Success: End */
/* Warning: Start */
.badge[data-style='heavy'][data-states='warning'] {
background-color: var(--color-alternative-warning-base);
}
/* Warning: End */
/* States: End */
/* Heavy: End */
/* Light: Start */
/* States: Start */
/* Ai: Start */
.badge[data-style='light'][data-states='ai'] {
background-color: var(--color-neutrals-transparent);
color: var(--color-alternative-ai-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Shape: Start */
/* Round: Start */
/* Round: End */
/* Square: Start */
/* Square: End */
/* Shape: End */
}
.badge[data-style='light'][data-states='ai'] .icon svg {
fill: var(--color-alternative-ai-base);
}
.badge[data-style='light'][data-states='ai'][data-shape='round'] {
overflow: hidden;
padding-bottom: var(--layout-border);
padding-top: var(--layout-border);
position: relative;
z-index: 1;
/* Variables: Start */
--ai-badge-tag-animation-duration: 2s;
--ai-badge-tag-height-width: calc(var(--percentage-100) - var(--layout-half));
--ai-badge-tag-position-negative-value: -50%;
--ai-badge-tag-z-index-negative-value-1: -1;
--ai-badge-tag-z-index-negative-value-2: -2;
/* Variables: End */
}
.badge[data-style='light'][data-states='ai'][data-shape='round']::after,
.badge[data-style='light'][data-states='ai'][data-shape='round']::before {
content: var(--contentEmpty);
position: absolute;
}
.badge[data-style='light'][data-states='ai'][data-shape='round']::after {
background-color: var(--color-alternative-ai-light);
border-radius: var(--percentage-100);
bottom: var(--layout-border);
height: var(--ai-badge-tag-height-width);
left: var(--layout-border);
right: var(--layout-border);
top: var(--layout-border);
width: var(--ai-badge-tag-height-width);
z-index: var(--ai-badge-tag-z-index-negative-value-1);
}
.badge[data-style='light'][data-states='ai'][data-shape='round']::before {
animation: ai-rotate-tag var(--ai-badge-tag-animation-duration) linear 1 normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
aspect-ratio: 1;
background: conic-gradient(var(--color-neutrals-transparent) var(--rotation-angle-270), var(--color-alternative-ai-base), var(--color-neutrals-transparent));
left: var(--percentage-50);
opacity: var(--alpha-0);
top: var(--percentage-50);
transform: translate(var(--ai-badge-tag-position-negative-value), var(--ai-badge-tag-position-negative-value));
width: var(--percentage-100);
z-index: var(--ai-badge-tag-z-index-negative-value-2);
}
.badge[data-style='light'][data-states='ai'][data-shape='square'] {
overflow: hidden;
padding-bottom: var(--layout-border);
padding-top: var(--layout-border);
position: relative;
z-index: 1;
/* Variables: Start */
--ai-badge-tag-animation-duration: 2s;
--ai-badge-tag-height-width: calc(var(--percentage-100) - var(--layout-half));
--ai-badge-tag-position-negative-value: -50%;
--ai-badge-tag-z-index-negative-value-1: -1;
--ai-badge-tag-z-index-negative-value-2: -2;
/* Variables: End */
}
.badge[data-style='light'][data-states='ai'][data-shape='square']::after,
.badge[data-style='light'][data-states='ai'][data-shape='square']::before {
content: var(--contentEmpty);
position: absolute;
}
.badge[data-style='light'][data-states='ai'][data-shape='square']::after {
background-color: var(--color-alternative-ai-light);
border-radius: var(--layout-base);
bottom: var(--layout-border);
height: var(--ai-badge-tag-height-width);
left: var(--layout-border);
right: var(--layout-border);
top: var(--layout-border);
width: var(--ai-badge-tag-height-width);
z-index: var(--ai-badge-tag-z-index-negative-value-1);
}
.badge[data-style='light'][data-states='ai'][data-shape='square']::before {
animation: ai-rotate-tag var(--ai-badge-tag-animation-duration) linear 1 normal forwards;
animation-play-state: running;
/* Variables: Start */
--animation-all-delay: 0;
--animation-all-duration: 1s;
/* Variables: End */
aspect-ratio: 1;
background: conic-gradient(var(--color-neutrals-transparent) var(--rotation-angle-270), var(--color-alternative-ai-base), var(--color-neutrals-transparent));
left: var(--percentage-50);
opacity: var(--alpha-0);
top: var(--percentage-50);
transform: translate(var(--ai-badge-tag-position-negative-value), var(--ai-badge-tag-position-negative-value));
width: var(--percentage-100);
z-index: var(--ai-badge-tag-z-index-negative-value-2);
}
/* Ai: End */
/* Away: Start */
.badge[data-style='light'][data-states='away'] {
background-color: var(--color-orange-700);
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='away'] .icon svg {
fill: var(--color-primary-text-base);
}
/* Away: End */
/* Default: Start */
.badge[data-style='light'][data-states='default'] {
background-color: var(--color-neutrals-black);
color: var(--color-neutrals-white);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='default'] .icon svg {
fill: var(--color-neutrals-white);
}
/* Default: End */
/* Disable: Start */
.badge[data-style='light'][data-states='disable'] {
background-color: var(--color-primary-disable-base);
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='disable'] .icon svg {
fill: var(--color-primary-text-base);
}
/* Disable: End */
/* Error: Start */
.badge[data-style='light'][data-states='error'] {
background-color: var(--color-acentuation-error-base);
color: var(--color-alternative-error-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='error'] .icon svg {
fill: var(--color-alternative-error-dark);
}
/* Error: End */
/* Info: Start */
.badge[data-style='light'][data-states='info'] {
background-color: var(--color-acentuation-info-base);
color: var(--color-primary-primary-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='info'] .icon svg {
fill: var(--color-primary-primary-dark);
}
/* Info: End */
/* Notification: Start */
.badge[data-style='light'][data-states='notifications'] {
background-color: var(--color-red-700);
color: var(--color-neutrals-white);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='notifications'] .icon svg {
fill: var(--color-neutrals-white);
}
/* Notification: End */
/* Offline: Start */
.badge[data-style='light'][data-states='offline'] {
background-color: var(--color-primary-disable-dark);
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='offline'] .icon svg {
fill: var(--color-primary-text-base);
}
/* Offline: End */
/* Online: Start */
.badge[data-style='light'][data-states='online'] {
background-color: var(--color-green-700);
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='online'] .icon svg {
fill: var(--color-primary-text-base);
}
/* Online: End */
/* Success: Start */
.badge[data-style='light'][data-states='success'] {
background-color: var(--color-acentuation-success-base);
color: var(--color-alternative-success-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='success'] .icon svg {
fill: var(--color-alternative-success-dark);
}
/* Success: End */
/* Warning: Start */
.badge[data-style='light'][data-states='warning'] {
background-color: var(--color-acentuation-warning-base);
color: var(--color-alternative-warning-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.badge[data-style='light'][data-states='warning'] .icon svg {
fill: var(--color-alternative-warning-dark);
}
/* Warning: End */
/* States: End */
/* Light: End */
/* Badges & Tags: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Initials: Start */
.initials {
background-color: var(--color-avatar-users-default);
color: var(--color-neutrals-white);
}
.initials.a {
background-color: var(--color-avatar-users-a);
}
.initials.b {
background-color: var(--color-avatar-users-b);
}
.initials.c {
background-color: var(--color-avatar-users-c);
}
.initials.d {
background-color: var(--color-avatar-users-d);
}
.initials.e {
background-color: var(--color-avatar-users-e);
}
.initials.f {
background-color: var(--color-avatar-users-f);
}
.initials.g {
background-color: var(--color-avatar-users-g);
}
.initials.h {
background-color: var(--color-avatar-users-h);
}
.initials.i {
background-color: var(--color-avatar-users-i);
}
.initials.j {
background-color: var(--color-avatar-users-j);
}
.initials.k {
background-color: var(--color-avatar-users-k);
}
.initials.l {
background-color: var(--color-avatar-users-l);
}
.initials.m {
background-color: var(--color-avatar-users-m);
}
.initials.n {
background-color: var(--color-avatar-users-n);
}
.initials.o {
background-color: var(--color-avatar-users-o);
}
.initials.p {
background-color: var(--color-avatar-users-p);
}
.initials.q {
background-color: var(--color-avatar-users-q);
}
.initials.r {
background-color: var(--color-avatar-users-r);
}
.initials.s {
background-color: var(--color-avatar-users-s);
}
.initials.t {
background-color: var(--color-avatar-users-t);
}
.initials.u {
background-color: var(--color-avatar-users-u);
}
.initials.v {
background-color: var(--color-avatar-users-v);
}
.initials.w {
background-color: var(--color-avatar-users-w);
}
.initials.x {
background-color: var(--color-avatar-users-x);
}
.initials.y {
background-color: var(--color-avatar-users-y);
}
.initials.z {
background-color: var(--color-avatar-users-z);
}
/* Initials: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.dropdown + .containerarea .profileitem {
--animation-enter-down-leave: 300ms;
--drop-down-profile-item-min-width: 21rem;
/* 336px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Profile Item: Start */
/* Avatar: Badge: Start */
.dropdown .avatar + .badge {
bottom: var(--layout-0);
}
/* Avatar: Badge: End */
/* Container Area: Start */
/* Profile Item: Start */
.dropdown + .containerarea .profileitem {
align-items: center;
display: flex;
flex-flow: column wrap;
min-width: var(--drop-down-profile-item-min-width);
padding-bottom: var(--layout-xxxx-medium);
padding-top: var(--layout-xxxx-medium);
/* Avatar: Start */
/* Avatar: End */
/* Placeholder: Shape: Line: Start */
/* Placeholder: Shape: Line: End */
/* Typography: Start */
/* Typography: End */
}
.dropdown + .containerarea .profileitem .avatar {
margin-bottom: var(--layout-xxxx-small);
}
.dropdown + .containerarea .profileitem .placeholder[data-shape='line'] {
margin-bottom: var(--layout-base);
}
.dropdown + .containerarea .profileitem [data-style='typotitle1'],
.dropdown + .containerarea .profileitem [data-style='typobody'] {
display: block;
}
.dropdown + .containerarea .profileitem [data-style='typotitle1'] {
font-style: normal;
}
.dropdown + .containerarea .profileitem [data-style='typobody'] {
color: var(--color-primary-text-light);
}
/* Profile Item: End */
/* Collapsable Vertical: Start */
/* States: Visible: Start */
/* Profile Item: Start */
.dropdown + .containerarea[data-animation='collapsable-vertical'][data-states='visible'] .profileitem,
.dropdown + .containerarea[data-popper-placement^='bottom'][data-states='visible'] .profileitem,
.dropdown + .containerarea[data-popper-placement^='top'][data-states='visible'] .profileitem {
animation: down-enter var(--animation-enter-down-leave) 1 forwards;
animation-play-state: running;
/* Variables: Start */
--animation-duration: 1s;
/* Variables: End */
}
/* Profile Item: End */
/* States: Visible: End */
/* Collapsable Vertical: End */
/* Container Area: End */
/* Profile Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Actions: Start */
.headerapp .hactions {
height: var(--layout-xxxx-medium);
position: relative;
width: var(--layout-xxxx-medium);
/* Accordion: Start */
/* Accordion: End */
/* DropDown: Start */
/* DropDown: End */
/* Link: Start */
/* Link: End */
/* List Item: Accordion: Start */
/* List Item: Accordion: End */
/* Notifications: Start */
/* Notifications: End */
}
.headerapp .hactions .accordion {
width: var(--percentage-100);
/* Actions: Badge: Start */
/* Actions: Badge: End */
/* Body: Start */
/* Body: End */
/* Header: Title: Start */
/* Header: Title: End */
/* List Item: Item: Start */
/* List Item: Item: End */
}
.headerapp .hactions .accordion .badge {
position: relative;
}
.headerapp .hactions .accordion .abody {
padding: var(--layout-0);
}
.headerapp .hactions .accordion .aheader [data-style='typotitle1'] {
align-items: center;
display: flex;
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
}
.headerapp .hactions .accordion .listitem {
align-items: center;
gap: var(--layout-xxxx-small);
}
.headerapp .hactions .dropdown {
height: var(--layout-xxxx-medium);
/* Container Area: Start */
/* Container Area: End */
}
.headerapp .hactions .dropdown + .containerarea {
min-width: var(--header-app-dropdown-min-width);
overflow-x: hidden;
}
.headerapp .hactions .dropdown + .containerarea[data-popper-placement^='bottom'] {
max-height: var(--viewport-height-70);
}
.headerapp .hactions .link.ibtn {
display: block;
height: var(--layout-xxxx-medium);
/* Icon: Start */
/* Icon: End */
/* States: Active: Icon: SVG: Start */
/* States: Active: Icon: SVG: End */
}
.headerapp .hactions .link.ibtn .icon {
height: var(--layout-xxxx-medium);
width: var(--layout-xxxx-medium);
/* SVG: Start */
/* SVG: End */
}
.headerapp .hactions .link.ibtn .icon svg {
fill: var(--color-primary-icon-base);
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
.headerapp .hactions .link.ibtn[data-states='active'] .icon svg,
.headerapp .hactions .link.ibtn:hover .icon svg {
fill: var(--color-primary-icon-dark);
}
.headerapp .hactions .listitem.withaccordion {
padding: var(--layout-0);
}
.headerapp .hactions .cards.cardnotifications {
max-height: var(--header-app-notifications-max-height);
/* Body: Start */
/* Body: End */
/* Inside: Start */
/* Inside: End */
}
.headerapp .hactions .cards.cardnotifications .cnbody {
overflow-y: auto;
}
.headerapp .hactions .cards.cardnotifications .cninside {
max-height: var(--header-app-notifications-max-height);
}
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Brand: Start */
.headerapp .brand {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Responsive: Start */
/* Responsive: End */
/* Link: Start */
/* Link: End */
}
@media (min-width: 1024px) {
.headerapp .brand {
max-width: calc(var(--percentage-100) - var(--layout-xx-large));
}
}
.headerapp .brand .link {
align-items: center;
color: var(--color-primary-text-base);
display: flex;
gap: var(--layout-xxxxx-small);
line-height: var(--header-app-brand-line-height);
/* Icon: Start */
/* Icon: End */
/* Image: Start */
/* Image: End */
/* Typography: Header: Start */
/* Typography: Header: End */
}
.headerapp .brand .link .icon {
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
/* SVG: Start */
/* SVG: End */
}
.headerapp .brand .link .icon svg {
fill: var(--color-primary-icon-base);
height: var(--layout-xx-medium);
width: var(--layout-xx-medium);
}
.headerapp .brand .link img {
height: var(--percentage-100);
resize: both;
width: auto;
/* Typography: Header: Start */
/* Typography: Header: End */
}
.headerapp .brand .link img + [data-style='typoheader'] {
line-height: var(--header-app-brand-line-height-image);
}
.headerapp .brand .link [data-style='typoheader'] {
font-style: normal;
}
/* Brand: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Divider: Start */
.headerapp .divider {
background-color: var(--color-primary-border-base);
height: var(--layout-xxxx-medium);
width: var(--layout-border);
/* Divider: Start */
/* Divider: End */
}
.headerapp .divider .divider {
display: none;
}
/* Divider: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Experience: Start */
.headerapp .experience,
.experiencebar .experience {
height: var(--layout-medium);
position: relative;
width: var(--layout-medium);
/* Button: Start */
/* Button: End */
/* Link: Start */
/* Link: End */
}
.headerapp .experience button,
.experiencebar .experience button {
overflow: hidden;
}
.headerapp .experience .link,
.experiencebar .experience .link,
.headerapp .experience button,
.experiencebar .experience button {
border-radius: var(--layout-base);
display: block;
height: var(--layout-medium);
width: var(--layout-medium);
/* Icon: Start */
/* Icon: End */
/* SVG: Start */
/* SVG: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Hover: SVG: Start */
/* Hover: SVG: End */
/* Disable: SVG: Start */
/* Disable: SVG: End */
/* States: End */
}
.headerapp .experience .link .icon,
.experiencebar .experience .link .icon,
.headerapp .experience button .icon,
.experiencebar .experience button .icon {
height: var(--layout-medium);
width: var(--layout-medium);
}
.headerapp .experience .link svg,
.experiencebar .experience .link svg,
.headerapp .experience button svg,
.experiencebar .experience button svg {
fill: var(--color-primary-icon-base);
height: var(--layout-xxxx-medium);
width: var(--layout-xxxx-medium);
}
.headerapp .experience .link[data-states='active'],
.experiencebar .experience .link[data-states='active'],
.headerapp .experience button[data-states='active'],
.experiencebar .experience button[data-states='active'] {
background-color: var(--color-primary-primary-light-rgba);
/* SVG: Start */
/* SVG: End */
}
.headerapp .experience .link[data-states='active'] svg,
.experiencebar .experience .link[data-states='active'] svg,
.headerapp .experience button[data-states='active'] svg,
.experiencebar .experience button[data-states='active'] svg {
fill: var(--color-primary-primary-base);
}
.headerapp .experience .link:hover svg,
.experiencebar .experience .link:hover svg,
.headerapp .experience button:hover svg,
.experiencebar .experience button:hover svg {
fill: var(--color-primary-icon-dark);
}
.headerapp .experience .link[data-states='disable'] svg,
.experiencebar .experience .link[data-states='disable'] svg,
.headerapp .experience button[data-states='disable'] svg,
.experiencebar .experience button[data-states='disable'] svg {
fill: var(--color-primary-disable-dark);
}
/* Experience: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Experience Bar: Start */
.experiencebar {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--header-app-box-shadow-color-r), var(--header-app-box-shadow-color-g), var(--header-app-box-shadow-color-b), var(--alpha-40));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
height: var(--layout-xx-large);
padding: var(--layout-xxxxx-small) var(--layout-xx-small);
width: var(--percentage-100);
/* List: Start */
/* List: End */
/* Sticky: Start */
/* Sticky: End */
}
.experiencebar ol {
display: flex;
gap: var(--layout-xxxxx-small);
justify-content: center;
width: var(--percentage-100);
/* Direction: Start */
/* Direction: End */
}
.experiencebar ol[dir='ltr'] {
flex-flow: row wrap;
}
.experiencebar ol[dir='rtl'] {
flex-flow: row-reverse wrap;
}
.experiencebar li {
list-style: none;
}
.experiencebar.sticky {
position: fixed;
bottom: var(--layout-0);
z-index: 7;
}
/* Experience Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.headerapp {
--header-app-box-shadow-color-b: 135;
--header-app-box-shadow-color-g: 125;
--header-app-box-shadow-color-r: 96;
--header-app-brand-line-height: 2.5rem;
/* 40px */
--header-app-brand-line-height-image: 2.75rem;
/* 44px */
--header-app-dropdown-min-width: 12rem;
/* 192px */
--header-app-notifications-max-height: 23.75rem;
/* 380px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Header App: Start */
.headerapp {
overflow: visible;
/* Actions: Start */
/* Actions: End */
/* Inside: Start */
/* Inside: End */
}
.headerapp .hactions,
.headerapp .experience,
.headerapp .divider {
list-style: none;
}
.headerapp .hactions,
.headerapp .experience {
overflow: visible;
/* Badge: Start */
/* Badge: End */
}
.headerapp .hactions .badge,
.headerapp .experience .badge {
border: solid var(--layout-half) var(--color-primary-border-light);
line-height: var(--font-x-small-line-height);
pointer-events: none;
position: absolute;
z-index: 2;
/* Direction: Start */
/* Direction: End */
}
.headerapp .hactions .badge[dir='ltr'],
.headerapp .experience .badge[dir='ltr'] {
right: var(--layout-0);
}
.headerapp .hactions .badge[dir='rtl'],
.headerapp .experience .badge[dir='rtl'] {
left: var(--layout-0);
}
.headerapp .hactions .link + .badge,
.headerapp .experience .link + .badge,
.headerapp .hactions button + .badge,
.headerapp .experience button + .badge {
top: var(--layout-0);
}
.headerapp .hinside {
overflow: visible;
/* Center: Start */
/* List: Start */
/* List: End */
/* Center: End */
/* Left: Start */
/* Left: End */
}
.headerapp .hinside .hcenter,
.headerapp .hinside .hright,
.headerapp .hinside ol {
overflow: visible;
}
.headerapp .hinside .hcenter ol,
.headerapp .hinside .hright ol {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
.headerapp .hinside .hleft {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
}
/* Header App: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Container Editor: With Actions: Start */
form .containereditor.withactions {
position: relative;
/* Field Editor: Content Editable: Start */
/* Field Editor: Content Editable: End */
/* Actions: Start */
/* Actions: End */
/* PopUp: Start */
/* PopUp: End */
}
form .containereditor.withactions .fieldeditor .contenteditable {
padding-bottom: var(--layout-xxx-medium);
}
form .containereditor.withactions .fcactions {
display: flex;
flex-flow: row wrap;
overflow: visible;
position: absolute;
right: var(--layout-xxxxx-small);
/* stylelint-disable-line */
bottom: var(--layout-xxxx-medium);
/* stylelint-disable-line */
left: var(--layout-xxxxx-small);
/* stylelint-disable-line */
/* Emoji Picker: Start */
/* Emoji Picker: ENd
/* Field Button: Action: Start */
/* Field Button: Action: End */
/* Placement: Direction: Start */
/* Placement: Direction : End */
}
form .containereditor.withactions .fcactions .iconbutton.dropdown.iemoji + .containerarea[data-animation='collapsable-vertical'],
form .containereditor.withactions .fcactions .iconbutton.dropdown[data-style='iemoji'] + .containerarea[data-popper-placement^='bottom'],
form .containereditor.withactions .fcactions .iconbutton.dropdown[data-style='iemoji'] + .containerarea[data-popper-placement^='top'] {
max-height: var(--emoji-picker-max-height);
}
form .containereditor.withactions .fcactions .fieldbutton.action {
gap: var(--layout-base);
max-width: 100%;
padding-bottom: var(--layout-0);
}
form .containereditor.withactions .fcactions.left[dir='ltr'] {
justify-content: flex-start;
}
form .containereditor.withactions .fcactions.left[dir='rtl'] {
justify-content: flex-end;
}
form .containereditor.withactions .fcactions.right[dir='ltr'] {
justify-content: flex-end;
}
form .containereditor.withactions .fcactions.right[dir='rtl'] {
justify-content: flex-start;
}
form .containereditor.withactions .popup.tai {
max-width: var(--form--container-editor-popup-max-width);
min-width: var(--form--container-editor-popup-min-width);
/* Field Button: Start */
/* Field Button: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
form .containereditor.withactions .popup.tai .fieldbutton {
flex-flow: row wrap;
justify-content: flex-end;
padding-bottom: var(--layout-0);
}
form .containereditor.withactions .popup.tai .typobody,
form .containereditor.withactions .popup.tai [data-style='typobody'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-xxxxx-small);
}
/* Container Editor: With Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Element: Status: Start */
.field .status {
transition: opacity var(--time-commons-base) ease;
height: var(--layout-xxx-small);
opacity: var(--alpha-0);
pointer-events: none;
position: absolute;
top: var(--layout-xx-medium);
/* stylelint-disable-line */
width: var(--layout-xxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.field .status[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.field .status[dir='rtl'] {
left: var(--layout-xxxx-small);
}
.field .status svg {
fill: var(--color-alternative-focus-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
/* Element: Status: Start */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Actions: Start */
.fcactions {
--emoji-picker-max-height: 20rem;
/* 320px */
}
/* Actions: End */
/* Input (Flatpckr): Start */
form .containercalendar {
--form-calendar-size-large-min-width: 24.5rem;
/* 392px */
--form-calendar-size-medium-min-width: 19.25rem;
/* 308px */
--form-calendar-size-small-min-width: 15.75rem;
/* 252px */
}
/* Input (Flatpckr): End */
/* PopUp: Start */
form .containereditor .popup.iapopup {
--form--container-editor-popup-max-width: 35.5rem;
/* 568px */
--form--container-editor-popup-min-width: 20rem;
/* 320px */
}
/* PopUp: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.navigationbar .body {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
/* Cards: Inside: Start */
/* Cards: Inside: End */
/* Original: List Item: Start */
/* Original: List Item: End */
/* Title: Start */
/* Title: End */
}
.navigationbar .body .cards .cinside.search {
padding: var(--layout-xxxx-small);
/* Search: Start */
/* Search: End */
}
.navigationbar .body .cards .cinside.search .search {
margin-bottom: var(--layout-0);
min-width: var(--percentage-100);
}
.navigationbar .body .original .listitem {
border-bottom: none;
}
.navigationbar .body .title {
margin-bottom: var(--layout-xxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.navigationbar .footer {
padding-left: var(--layout-xxxx-small);
/* List: Start */
/* Item: Start */
/* Item: End */
/* List: End */
}
.navigationbar .footer .listcontainer {
display: flex;
margin-bottom: var(--layout-base);
/* Direction: Start */
/* Direction: End */
}
.navigationbar .footer .listcontainer[dir='ltr'] {
flex-flow: row wrap;
}
.navigationbar .footer .listcontainer[dir='rtl'] {
flex-flow: row-reverse wrap;
justify-content: start;
}
.navigationbar .footer .listitem {
align-items: center;
border-bottom: none;
padding-left: var(--layout-0);
position: relative;
/* Button & Link: Start */
/* Button & Link: End */
/* Direction: Start */
/* Direction: End */
/* Inside: Start */
/* Inside: End */
/* Text: Start */
/* Text: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.navigationbar .footer .listitem + .listitem::before {
content: var(--iCircle);
display: inline-block;
font-size: var(--font-xx-small-size);
line-height: var(--font-standard-line-height);
text-align: center;
width: var(--layout-xxx-small);
}
.navigationbar .footer .listitem[data-type='button'],
.navigationbar .footer .listitem[data-type='link'] {
transition: color var(--time-commons-base) ease;
cursor: pointer;
}
.navigationbar .footer .listitem[dir='rtl'] + .listitem::before {
order: 1;
}
.navigationbar .footer .listitem .inside {
padding: var(--layout-0);
}
.navigationbar .footer .listitem em {
font-size: var(--font-xx-small-size);
line-height: var(--font-xx-small-line-height);
}
.navigationbar .footer .listitem:hover {
background-color: var(--color-neutrals-transparent);
}
.navigationbar .footer .listitem:hover[data-type='button'],
.navigationbar .footer .listitem:hover[data-type='link'] {
color: var(--color-primary-text-dark);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
/* Search: Start */
.navigationbar .header .search {
margin-bottom: var(--layout-0);
min-width: var(--percentage-100);
/* Field: Start */
/* Field: End */
}
.navigationbar .header .search .field {
min-width: var(--percentage-100);
}
/* Search: End */
/* Responsive: Start */
@media (min-width: 1024px) {
.navigationbar .header {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
}
/* Responsive: End */
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.navigationbar {
--navigation-bar-left-negative: -100%;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Sticky: Start */
.navigationbar.sticky {
position: fixed;
top: var(--layout-xx-large);
/* stylelint-disable-line */
z-index: 6;
/* Direction: Start */
/* Direction: End */
/* Responsive: Start */
/* Responsive: End */
}
.navigationbar.sticky[dir='ltr'] {
transition: left var(--time-commons-base) ease;
left: var(--navigation-bar-left-negative);
/* States: Active: Start */
/* States: Active: End */
}
.navigationbar.sticky[dir='ltr'][data-states='active'] {
left: var(--layout-0);
}
@media (min-width: 1024px) {
.navigationbar.sticky[dir='ltr'] {
left: var(--layout-0);
}
}
.navigationbar.sticky[dir='rtl'] {
transition: right var(--time-commons-base) ease;
right: var(--navigation-bar-left-negative);
/* States: Active: Start */
/* States: Active: End */
}
.navigationbar.sticky[dir='rtl'][data-states='active'] {
right: var(--layout-0);
}
@media (min-width: 1024px) {
.navigationbar.sticky[dir='rtl'] {
right: var(--layout-0);
}
}
@media (min-width: 1024px) {
.navigationbar.sticky {
height: calc(var(--viewport-height-100) - var(--layout-xx-large));
position: sticky;
}
}
/* Base: Sticky: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Header: Media: Start */
/* Left: Start */
/* Style: Black: Start */
/* IconButton: Start */
/* SVG: Start */
.modal[data-placement^='media'].mmblack .mheader .left button.iconbutton svg {
fill: var(--color-neutrals-white);
}
/* SVG: End */
/* States: Active: Start */
.modal[data-placement^='media'].mmblack .mheader .left button.iconbutton.active svg,
.modal[data-placement^='media'].mmblack .mheader .left button.iconbutton:hover svg {
fill: var(--color-neutrals-white);
}
/* States: Active: End */
/* IconButton: End */
/* Typography: Title: Start */
.modal[data-placement^='media'].mmblack .mheader .left [data-style='typoheader'],
.modal[data-placement^='media'].mmblack .mheader .left [data-style='typocaption'] {
color: var(--color-neutrals-white);
}
/* Typography: Title: End */
/* Style: Black: End */
/* Left: End */
/* Right: Button: Outline: Start */
.modal[data-placement^='media'] .mheader .right button.outline {
background-color: var(--color-neutrals-white);
}
/* Right: Button: Outline: End */
/* Header: Media: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Base: Media: Start */
.modal[data-placement^='media'] {
width: var(--viewport-width-100);
/* Style: Start */
/* Black: Start */
/* Black: End */
/* White: Start */
/* White: End */
/* Style: End */
}
.modal[data-placement^='media'][data-style='mmblack'] {
background: var(--color-neutrals-black);
}
.modal[data-placement^='media'][data-style='mmwhite'] {
background: var(--color-neutrals-white);
}
/* Base: Media: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Footer: Start */
.cards.asidedetail .asdfooter {
border-top: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Button: Default: End */
/* Button: Default: End */
}
.cards.asidedetail .asdfooter .default,
.cards.asidedetail .asdfooter .contained,
.cards.asidedetail .asdfooter .outline {
width: var(--percentage-100);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Empty: Start */
.cards.asidedetail .empty {
height: var(--asidedetail-empty-height);
padding: var(--layout-xxxx-small);
}
/* Empty: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.asidedetail .asdheader {
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
/* Actions: Direction: Start */
/* Actions: Direction: End */
/* Footer: Start */
/* Footer: End */
/* Title: Start */
/* Title: End */
}
.cards.asidedetail .asdheader .actions[dir='ltr'] {
margin-left: auto;
}
.cards.asidedetail .asdheader .actions[dir='rtl'] {
margin-right: auto;
}
.cards.asidedetail .asdheader + .asdfooter {
border-top: none;
}
.cards.asidedetail .asdheader [data-style='typotitle1'] {
flex: 1;
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Items: Start */
.cards.asidedetail .asditems {
display: flex;
flex-direction: column;
gap: var(--layout-base);
padding: var(--layout-xxxx-small);
/* Title: Avatar: Start */
/* Title: Avatar: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Container: Start */
/* Container: End */
/* Typography: End */
}
.cards.asidedetail .asditems + .asditems {
padding-top: var(--layout-0);
}
.cards.asidedetail .asditems .asdtitle .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--v-card-icon-shadow-rgba-color-r), var(--v-card-icon-shadow-rgba-color-g), var(--v-card-icon-shadow-rgba-color-b), var(--v-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-half) var(--color-primary-border-light);
}
.cards.asidedetail .asditems [data-style='typocaption'] {
gap: var(--layout-base);
}
.cards.asidedetail .asditems [data-style='typocontainer'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
/* Caption: Start */
/* Caption: End */
/* Title: Start */
/* Title: End */
}
.cards.asidedetail .asditems [data-style='typocontainer'] + [data-style='typocaption'] {
color: var(--color-primary-text-light);
}
.cards.asidedetail .asditems [data-style='typocontainer'] [data-style='typocontainer'] {
align-items: flex-start;
flex: 1;
flex-direction: column;
}
/* Items: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.asidedetail {
--asidedetail-actions-width: 6rem;
/* 96px */
--asidedetail-empty-height: 9.75rem;
/* 156px */
--asidedetail-min-width: 18.5rem;
/* 296px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: AsideDetail: Start */
.cards.asidedetail {
margin-bottom: var(--layout-xxx-small);
min-width: var(--asidedetail-min-width);
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* States: Disable: Start */
/* States: Disable: End */
}
.cards.asidedetail:last-child {
margin-bottom: var(--layout-0);
}
.cards.asidedetail .cinside.asdinside {
height: var(--percentage-100);
width: var(--percentage-100);
/* Loading: Start */
/* Loading: End */
}
.cards.asidedetail .cinside.asdinside .progressbar {
margin-bottom: var(--layout-xxxx-small);
margin-top: var(--layout-xxxx-small);
}
.cards.asidedetail[data-states='disable'] {
pointer-events: none;
/* Typography: Header: Start */
/* Typography: Header: End */
}
.cards.asidedetail[data-states='disable'] [data-style='typoheader'] {
color: var(--color-primary-disable-dark);
}
/* Cards: AsideDetail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Cards: Create: Body: AI: Start */
.cards.ccreate .cbody.createai .field {
padding-bottom: var(--layout-0);
}
.cards.ccreate .cbody.createai .field textarea {
border: none;
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
}
/* Cards: Create: Body: AI: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Post: Start */
.cards.ccreate .cbody.createpost {
display: flex;
flex-direction: column;
/* Cards: File & URL: Start */
/* Cards: File & URL: End */
/* Editor: Start */
/* Editor: End */
/* Images: Container: Start */
/* Images: Container: End */
/* Recognition: Start */
/* Caption: Start */
/* Caption: End */
/* Container: Chips: Start */
/* Container: Chips: End */
/* Container: Images: Start */
/* Container: Images: End */
/* Title: Start */
/* Title: End */
/* Recognition: End */
}
.cards.ccreate .cbody.createpost .cards.fileurl,
.cards.ccreate .cbody.createpost .field,
.cards.ccreate .cbody.createpost .cpcontainerimage,
.cards.ccreate .cbody.createpost .recotitle,
.cards.ccreate .cbody.createpost .recocaption,
.cards.ccreate .cbody.createpost .cpcontainerchips,
.cards.ccreate .cbody.createpost .cpcontainerimagecards {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
.cards.ccreate .cbody.createpost .cards.fileurl {
margin-bottom: var(--layout-xxx-small);
width: auto;
}
.cards.ccreate .cbody.createpost .containereditor {
flex: 1;
}
.cards.ccreate .cbody.createpost .cpcontainerimage {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-xxx-small);
/* Upload File: Start */
/* Upload File: End */
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage {
max-height: var(--cards-create-body-post-image-height-width);
max-width: var(--cards-create-body-post-image-height-width);
min-height: var(--cards-create-body-post-image-height-width);
min-width: var(--cards-create-body-post-image-height-width);
/* Image: Start */
/* Image: End */
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage {
background-color: var(--color-secondary-list-base);
border-color: var(--color-primary-primary-base);
border-style: dashed;
height: var(--cards-create-body-post-image-height-width);
width: var(--cards-create-body-post-image-height-width);
/* Actions: Start */
/* Actions: End */
/* Empty: Icon: Start */
/* Empty: Icon: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage + .actions {
bottom: auto;
justify-content: flex-end;
right: var(--layout-0);
top: var(--layout-base);
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage .ufempty .icon {
margin-bottom: var(--layout-0);
/* SVG: Start */
/* SVG: End */
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage .ufempty .icon svg {
fill: var(--color-primary-primary-base);
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage:hover {
background-color: var(--color-secondary-list-base);
border-color: var(--color-primary-primary-dark);
/* Empty: Icon: SVG: Start */
/* Empty: Icon: SVG: End */
}
.cards.ccreate .cbody.createpost .cpcontainerimage .uploadfile.upimage .fieldimage:hover .ufempty .icon svg {
fill: var(--color-primary-primary-dark);
}
.cards.ccreate .cbody.createpost .recocaption {
margin-bottom: var(--layout-xxxxx-small);
}
.cards.ccreate .cbody.createpost .cpcontainerchips {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-xxx-small);
}
.cards.ccreate .cbody.createpost .cpcontainerimagecards {
margin-bottom: var(--layout-xxx-small);
}
.cards.ccreate .cbody.createpost .recotitle {
margin-bottom: var(--layout-xxx-small);
}
/* Cards: Poll: Start */
.cards.ccreate .cards.cardpoll {
margin-bottom: var(--layout-xxx-small);
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
/* Body: Start */
/* Body: End */
}
.cards.ccreate .cards.cardpoll .cbody.cpbody {
min-height: var(--layout-xxx-small);
}
/* Cards: Poll: End */
/* Cards: Create: Body: Post: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Program: Start */
.cards.ccreate .cbody.createprogram {
min-height: calc(var(--cards-create-users-min-height) - var(--cards-create-body-mih-height));
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Container: Chips: Start */
/* Container: Chips: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.ccreate .cbody.createprogram .containerchips {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-xxxxx-small);
}
.cards.ccreate .cbody.createprogram .ccutitle {
margin-bottom: var(--layout-xxxxx-small);
}
/* Cards: Create: Body: Program: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Publish: Start */
.cards.ccreate .cbody.createspublish {
padding-bottom: var(--layout-xxxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* List: Start */
/* List: End */
}
.cards.ccreate .cbody.createspublish .listcontainer {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, var(--percentage-100));
/* Responsive: Start */
/* Responsive: End */
/* Item: Start */
/* Item: End */
}
@media (min-width: 768px) {
.cards.ccreate .cbody.createspublish .listcontainer {
grid-template-columns: repeat(2, var(--percentage-50));
justify-content: flex-start;
}
}
.cards.ccreate .cbody.createspublish .listcontainer .listitem {
align-items: center;
border: solid var(--layout-half) var(--color-neutrals-transparent);
border-radius: var(--layout-base);
/* States: Active: Start */
/* States: Active: End */
}
.cards.ccreate .cbody.createspublish .listcontainer .listitem[data-states='active'] {
border-color: var(--color-primary-primary-base);
}
/* Cards: Create: Body: Publish: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Schedule: Field: Start */
.cards.ccreate .cbody.createschedule .field {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
/* Cards: Create: Body: Schedule: Field: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Survey: Field: Start */
.cards.ccreate .cbody.createsurvey .field,
.cards.ccreate .cbody.createsurvey .fieldbutton {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
/* Cards: Create: Body: Survey: Field: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Cards: Create: Body: Users: Start */
.cards.ccreate .cbody.createusers {
min-height: calc(var(--cards-create-users-min-height) - var(--cards-create-body-mih-height));
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Container: Chips: Start */
/* Container: Chips: End */
/* List: Start */
/* List: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.ccreate .cbody.createusers .containerchips {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-x-small);
}
.cards.ccreate .cbody.createusers .listcontainer {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, var(--percentage-100));
/* Responsive: Start */
/* Responsive: End */
/* Item: Start */
/* Item: End */
}
@media (min-width: 768px) {
.cards.ccreate .cbody.createusers .listcontainer {
grid-template-columns: repeat(2, var(--percentage-50));
justify-content: flex-start;
}
}
.cards.ccreate .cbody.createusers .listcontainer .listitem {
align-items: center;
border: solid var(--layout-half) var(--color-neutrals-transparent);
border-radius: var(--layout-base);
/* States: Active: Start */
/* States: Active: End */
}
.cards.ccreate .cbody.createusers .listcontainer .listitem[data-states='active'] {
border-color: var(--color-primary-primary-base);
}
.cards.ccreate .cbody.createusers .ccutitle {
margin-bottom: var(--layout-xxxxx-small);
}
/* Cards: Create: Body: Users: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Actions: Start */
.cards.createcontent .cciactions .fieldbutton {
display: inline-block;
margin-left: var(--layout-xxxx-small);
padding-bottom: var(--layout-0);
vertical-align: middle;
/* Button: Start */
/* AI: Start */
/* AI: End */
/* Default: Start */
/* Icon: Start */
/* States: Hover: Start */
/* States: Hover: End */
/* Icon: End */
/* Default: End */
/* Button: End */
}
.cards.createcontent .cciactions .fieldbutton:first-child {
margin-left: var(--layout-0);
}
.cards.createcontent .cciactions .fieldbutton button.aibutton {
background-color: var(--color-neutrals-transparent);
}
.cards.createcontent .cciactions .fieldbutton .default.ccadreco,
.cards.createcontent .cciactions .fieldbutton .default.ccadimage {
color: var(--color-primary-text-base);
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.createcontent .cciactions .fieldbutton .default.ccadreco:hover,
.cards.createcontent .cciactions .fieldbutton .default.ccadimage:hover {
color: var(--color-primary-text-dark);
}
.cards.createcontent .cciactions .fieldbutton .default.ccadreco .icon svg {
fill: var(--color-alternative-warning-light);
}
.cards.createcontent .cciactions .fieldbutton .default.ccadimage .icon svg {
fill: var(--color-alternative-success-light);
}
.cards.createcontent .cciactions .fieldbutton .default.ccadreco:hover .icon svg {
fill: var(--color-alternative-warning-base);
}
.cards.createcontent .cciactions .fieldbutton .default.ccadimage:hover .icon svg {
fill: var(--color-alternative-success-base);
}
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.createcontent {
--createcontent-max-width: 41rem;
/* 656px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: CreateContent: Start */
.cards.createcontent {
margin-bottom: var(--layout-xxx-small);
max-width: var(--createcontent-max-width);
padding: var(--layout-xxxx-small);
/* Inside: Start */
/* Inside: End */
}
.cards.createcontent .ccinside {
gap: var(--layout-xxxx-small);
/* First: Start */
/* Avatar: Start */
/* Avatar: End */
/* Input: Start */
/* Input: End */
/* First: End */
}
.cards.createcontent .ccinside .ccifirst .avatar {
display: inline-block;
margin-right: var(--layout-xxx-small);
vertical-align: middle;
}
.cards.createcontent .ccinside .ccifirst .field {
display: inline-block;
padding-bottom: var(--layout-0);
vertical-align: middle;
width: calc(var(--percentage-100) - var(--layout-xxxxx-large));
/* States: Disable: Start */
/* States: Disable: End */
}
.cards.createcontent .ccinside .ccifirst .field input {
width: var(--percentage-100);
}
.cards.createcontent .ccinside .ccifirst .field[data-states='disable'] input {
color: var(--color-primary-text-base);
}
/* Cards: CreateContent: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.ccreate .ccfooter {
border-top: solid var(--layout-border) var(--color-primary-border-base);
padding: var(--layout-xxxx-small);
/* Actions: Start */
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
/* Actions: End */
/* Field: Start */
/* Field: End */
}
.cards.ccreate .ccfooter .ccfaleft,
.cards.ccreate .ccfooter .ccfaright {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
overflow: visible;
}
.cards.ccreate .ccfooter .ccfaright {
margin-left: auto;
}
.cards.ccreate .ccfooter .fieldbutton {
padding-bottom: var(--layout-0);
}
.cards.ccreate .ccfooter .fieldbutton:first-child {
margin-left: var(--layout-0);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.ccreate .ccheader {
gap: var(--layout-xxxx-small);
min-height: var(--layout-xxx-small);
padding-bottom: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* User: Start */
/* Button: Default: Start */
/* Button: Default: End */
/* Container Text: Start */
/* Container: Text: End */
/* Typography: Container: Start */
/* Typography: Container: End */
/* User: End */
}
.cards.ccreate .ccheader .default.cchubutton {
background-color: var(--color-acentuation-info-base);
height: var(--layout-xx-small);
font-size: var(--font-xx-small-size);
gap: var(--layout-xxxxx-small);
line-height: var(--layout-xx-small);
/* Icon: Start */
/* Icon: End */
}
.cards.ccreate .ccheader .default.cchubutton .icon {
height: var(--font-x-small-size);
width: var(--font-x-small-size);
/* SVG: Start */
/* SVG: End */
}
.cards.ccreate .ccheader .default.cchubutton .icon svg {
height: var(--font-x-small-size);
width: var(--font-x-small-size);
}
.cards.ccreate .ccheader .containertext {
display: flex;
flex-flow: row wrap;
width: calc(var(--percentage-100) - var(--layout-medium));
}
.cards.ccreate .ccheader [data-style='typocontainer'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
width: var(--percentage-100);
/* Title 3: Start */
/* Title 3: End */
}
.cards.ccreate .ccheader [data-style='typocontainer'] span[data-style='typotitle3'] {
font-weight: var(--font-medium-weight);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards.ccreate {
--cards-create-body-mih-height: 6.563rem;
/* 105px */
--cards-create-max-width: 40rem;
/* 640px */
--cards-create-min-height: 18.25rem;
/* 292px */
--cards-create-min-width: 20rem;
/* 320px */
--cards-create-body-post-image-height-width: 5rem;
/* 80px */
--cards-create-users-min-height: 30rem;
/* 480px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Create: Start */
.cards.ccreate {
min-height: var(--cards-create-min-height);
max-width: var(--cards-create-max-width);
min-width: var(--cards-create-min-width);
overflow: visible;
/* Alert: Start */
/* Alert: End */
/* Body: Start */
/* Body: End */
/* Inside: Start */
/* Inside: End */
}
.cards.ccreate .alert {
margin-bottom: var(--layout-xxxx-small);
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
max-width: var(--percentage-100);
}
.cards.ccreate .cbody {
flex: 1;
}
.cards.ccreate .cinside.ccinside {
display: flex;
flex: 1;
flex-direction: column;
}
/* Cards: Create: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.dcdetail .dcbody {
display: block;
padding: var(--layout-xxxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.dcdetail .dcfooter {
align-items: center;
border-top: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
min-height: var(--layout-xxx-small);
padding: var(--layout-xxxx-small);
/* Actions: Start */
/* Button: Start */
/* Button: End */
/* Direction: Start */
/* Direction: End */
/* Actions: End */
/* Typography: Caption: Direction: Start */
/* Typography: Caption: Direction: End */
}
.cards.dcdetail .dcfooter .actions .action:first-child .default {
color: var(--color-primary-text-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: Start */
/* DEBERIA SER :hover ? */
/* Hover: End */
/* StateS: End */
}
.cards.dcdetail .dcfooter .actions .action:first-child .default .icon svg {
fill: var(--color-primary-text-base);
}
.cards.dcdetail .dcfooter .actions .action:first-child .default[data-states='disable'] {
color: var(--color-primary-disable-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.cards.dcdetail .dcfooter .actions .action:first-child .default[data-states='disable'] .icon svg {
fill: var(--color-primary-disable-dark);
}
.cards.dcdetail .dcfooter .actions .action:first-child .default[data-states='hover'] {
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.cards.dcdetail .dcfooter .actions .action:first-child .default[data-states='hover'] .icon svg {
fill: var(--color-primary-text-dark);
}
.cards.dcdetail .dcfooter .actions[dir='ltr'] {
margin-left: auto;
/* Button: Start */
/* Button: End */
}
.cards.dcdetail .dcfooter .actions[dir='ltr'] .action:last-child .default {
padding-right: var(--layout-0);
}
.cards.dcdetail .dcfooter .actions[dir='rtl'] {
margin-right: auto;
/* Button: Start */
/* Button: End */
}
.cards.dcdetail .dcfooter .actions[dir='rtl'] .action:last-child .default {
padding-left: var(--layout-0);
}
.cards.dcdetail .dcfooter [data-style='typocaption'][dir='ltr'] {
padding-right: var(--layout-xxxxx-small);
}
.cards.dcdetail .dcfooter [data-style='typocaption'][dir='rtl'] {
padding-left: var(--layout-xxxxx-small);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.dcdetail .dcheader {
align-items: center;
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
overflow: visible;
/* Footer: Start */
/* Footer: End */
/* Left: Start */
/* Left: End */
}
.cards.dcdetail .dcheader:last-child {
border-bottom: none;
}
.cards.dcdetail .dcheader + .dcfooter {
border-top: none;
}
.cards.dcdetail .dcheader .dcleft {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
overflow: visible;
/* Avatar: Start */
/* Avatar: End */
/* Text: Start */
/* Text: End */
}
.cards.dcdetail .dcheader .dcleft .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--dcdetail-detail-icon-shadow-rgba-color-r), var(--dcdetail-detail-icon-shadow-rgba-color-g), var(--dcdetail-detail-icon-shadow-rgba-color-b), var(--dcdetail-detail-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
.cards.dcdetail .dcheader .dcleft .dctext {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--layout-base);
/* Typography: Container: Start */
/* Typography: Container: End */
}
.cards.dcdetail .dcheader .dcleft .dctext [data-style='typocontainer'] {
flex-flow: row wrap;
gap: var(--layout-base);
}
/* Right: Start */
.cards.dcdetail .dcheader .dcright,
.cards.dcdetail .dcheadercontainer .dcright {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
overflow: visible;
/* Actions: Action: Start */
/* Actions: Action: End */
}
.cards.dcdetail .dcheader .dcright .action,
.cards.dcdetail .dcheadercontainer .dcright .action {
align-items: center;
display: flex;
height: var(--layout-xxx-medium);
}
/* Right: End */
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Columns: Start */
.cards.dcdetail .dcicolumns {
align-items: flex-start;
flex-flow: row wrap;
justify-content: space-between;
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
.cards.dcdetail .dcicolumns .dcileft,
.cards.dcdetail .dcicolumns .dciright {
display: flex;
}
.cards.dcdetail .dcicolumns .dcileft {
align-items: center;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
/* Typography: Title: Start */
/* Typography: Title End */
}
.cards.dcdetail .dcicolumns .dcileft .typotitle3 {
flex: 1;
}
.cards.dcdetail .dcicolumns .dciright {
flex-direction: column;
justify-content: flex-end;
/* User: Start */
/* User: End */
}
.cards.dcdetail .dcicolumns .dciright .dciuser {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
justify-content: flex-end;
/* Text: Start */
/* Text: End */
}
.cards.dcdetail .dcicolumns .dciright .dciuser .dcitext {
display: flex;
flex: 1;
flex-direction: column;
}
/* Columns: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Row: Start */
.cards.dcdetail .dcitems {
border-top: solid var(--layout-border) var(--color-primary-border-base);
flex-direction: column;
padding-top: var(--layout-xxx-small);
/* Columns: Start */
/* Columns: End */
/* Link: Start */
/* Link: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.dcdetail .dcitems:first-child {
border-top: none;
padding-top: var(--layout-0);
}
.cards.dcdetail .dcitems + .dcicolumns {
border-top: solid var(--layout-border) var(--color-primary-border-base);
padding-top: var(--layout-xxx-small);
}
.cards.dcdetail .dcitems .link {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.cards.dcdetail .dcitems [data-style='typotitle3'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
}
/* Row: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Columns & Row: Start */
.cards.dcdetail .dcicolumns,
.cards.dcdetail .dcitems {
display: flex;
gap: var(--layout-xxxx-small);
margin-bottom: var(--layout-xxx-small);
}
.cards.dcdetail .dcicolumns:last-child,
.cards.dcdetail .dcitems:last-child {
margin-bottom: var(--layout-0);
}
/* Link: Start */
/* Icon: SVG: Start */
.cards.dcdetail .dcbody.link .icon svg,
.cards.dcdetail .dcbody.link:hover .icon svg {
fill: var(--color-primary-icon-base);
}
/* Icon: SVG: End */
/* Link: End */
/* Columns & Row: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.dcdetail {
--dcdetail-detail-icon-shadow-rgba-color-a: 40%;
--dcdetail-detail-icon-shadow-rgba-color-b: 135;
--dcdetail-detail-icon-shadow-rgba-color-g: 125;
--dcdetail-detail-icon-shadow-rgba-color-r: 96;
--dcdetail-max-width: 41rem;
/* 656px */
--dcdetail-min-width: 20rem;
/* 320px */
--dcdetail-header-actions-padding-right: 6rem;
/* 96px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Detail: Start */
.cards.dcdetail {
margin-bottom: var(--layout-xxx-small);
min-width: var(--dcdetail-min-width);
overflow: visible;
/* Inside: Start */
/* Inside: End */
}
.cards.dcdetail:last-child {
margin-bottom: var(--layout-0);
}
.cards.dcdetail .cinside.dcdinside {
height: var(--percentage-100);
width: var(--percentage-100);
}
/* Cards: Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Body: Banner: Start */
.cards.cfeed .cfbody .cfibbanner {
position: relative;
/* Container: Start */
/* Container: End */
/* With Image: Start */
/* With Image: End */
}
.cards.cfeed .cfbody .cfibbanner .cfibbcontainer {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--layout-base);
justify-content: center;
/* Avatar: Start */
/* Avatar: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
.cards.cfeed .cfbody .cfibbanner .cfibbcontainer .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-half) var(--color-primary-border-light);
}
.cards.cfeed .cfbody .cfibbanner .cfibbcontainer [data-style='typobody'] {
color: var(--color-primary-text-light);
}
.cards.cfeed .cfbody .cfibbanner.withimage {
padding-bottom: var(--cards-feed-container-banner-padding-bottom);
/* Container: Start */
/* Container: End */
}
.cards.cfeed .cfbody .cfibbanner.withimage .cfibbcontainer {
position: absolute;
left: var(--percentage-50);
/* stylelint-disable-line */
transform: translateX(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
bottom: var(--layout-0);
}
/* Body: Banner: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: Description: Start */
.cards.cfeed .cfbody .cfibdescription {
background-color: var(--color-neutrals-blue-grey-1);
display: flex;
flex-direction: column;
gap: var(--layout-xxxxx-small);
padding: var(--layout-xxxx-small);
}
/* Body: Description: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: Editor: Start */
.cards.cfeed .cfbody .cfibeditorview {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Body: Editor: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: File & URL: Start */
.cards.cfeed .cfbody .cfibfileurl {
background-color: var(--color-acentuation-info-base);
border-radius: var(--layout-0);
/* Avatar: Start */
/* Avatar: End */
/* Header: Start */
/* Header: End */
/* Typography: Caption: Start */
/* Typography: Caption: End */
}
.cards.cfeed .cfbody .cfibfileurl .avatar {
box-shadow: none;
border: none;
}
.cards.cfeed .cfbody .cfibfileurl .fuheader {
padding-bottom: var(--layout-xxxxx-small);
padding-top: var(--layout-xxxxx-small);
}
.cards.cfeed .cfbody .cfibfileurl [data-style='typocaption'] {
color: var(--color-primary-link-base);
}
/* Body: File & URL: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: Image: Start */
.cards.cfeed .cfbody .cfibcontainerimage {
display: flex;
flex-direction: column;
/* Container: Start */
/* Container: End */
/* Count: Start */
/* Four: Start */
/* Four: End */
/* Three: Start */
/* Three: End */
/* Two: Start */
/* Two: End */
/* Count: End */
}
.cards.cfeed .cfbody .cfibcontainerimage .icontainer figcaption {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
align-items: center;
background-color: var(--cards-feed-container-image-background-caption);
color: var(--color-neutrals-white);
display: flex;
font-size: var(--font-xx-large-size);
font-weight: var(--font-xx-large-weight);
height: var(--percentage-100);
line-height: var(--font-xx-large-line-height);
justify-content: center;
width: var(--percentage-100);
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcifour,
.cards.cfeed .cfbody .cfibcontainerimage.cfibcithree,
.cards.cfeed .cfbody .cfibcontainerimage.cfibcitwo {
display: grid;
gap: var(--layout-base);
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcifour[data-style='cfibchorizontal'] {
grid-template-columns: repeat(auto-fit, minmax(var(--cards-feed-container-image-columns-min-max), var(--cards-feed-container-image-columns-unit)));
/* Container: Start */
/* Container: End */
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcifour[data-style='cfibchorizontal'] .icontainer:first-child {
grid-column: span 3 / auto;
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcifour[data-style='cfibcvertical'] {
grid-template-columns: repeat(auto-fit, minmax(var(--cards-feed-container-image-columns-min-max), var(--cards-feed-container-image-columns-unit)));
/* Container: Start */
/* Container: End */
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcifour[data-style='cfibcvertical'] .icontainer:first-child {
grid-column: span 2 / auto;
grid-row: span 3 / auto;
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcithree {
grid-template-columns: repeat(auto-fit, minmax(var(--cards-feed-container-image-columns-min-max), var(--cards-feed-container-image-columns-unit)));
/* Container: Start */
/* Container: End */
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcithree .icontainer:first-child {
grid-column: span 2 / auto;
grid-row: span 2 / auto;
}
.cards.cfeed .cfbody .cfibcontainerimage.cfibcitwo {
grid-template-columns: repeat(2, var(--cards-feed-container-image-columns-unit));
}
/* Body: Image: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Body: Poll: Start */
.cards.cfeed .cfbody .cfibpoll {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
/* Body: Poll: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Body: Start */
.cards.cfeed .cfbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Comments: Start */
.cards.cfeed .cfcommentscontainer .cfcomments {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
/* Inside: Start */
/* Inside: End */
}
.cards.cfeed .cfcommentscontainer .cfcomments .cfcinside {
align-items: center;
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--font-x-small-size);
/* Editor: Container: Start */
/* Editor: Container: End */
/* Field Button: Start */
/* Field Button: End */
}
.cards.cfeed .cfcommentscontainer .cfcomments .cfcinside .containereditor {
flex: 1;
padding-bottom: var(--layout-0);
}
.cards.cfeed .cfcommentscontainer .cfcomments .cfcinside .fieldbutton {
padding-bottom: var(--layout-0);
/* Drop Down: Start */
/* Drop Down: End */
}
.cards.cfeed .cfcommentscontainer .cfcomments .cfcinside .fieldbutton .dropdown + .containerarea {
overflow: visible;
}
/* Comments: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Comments: Item: Start */
.cards.cfeed .cfcommentscontainer .cfcommentsitem {
display: flex;
flex-direction: column;
gap: var(--layout-xxxxx-small);
overflow: visible;
position: relative;
/* Body: Start */
/* Body: End */
/* Footer: Start */
/* Button: Start */
/* Button: End */
/* Direction: Start */
/* Direction: End */
/* Divider: Start */
/* Divider: End */
/* Typography: Caption: Start */
/* Typography: Caption: End */
/* Footer: End */
/* Header: Left: Start */
/* Header: Left: End */
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcibody {
display: flex;
flex-direction: column;
gap: var(--layout-xxxxx-small);
/* Direction: Start */
/* Direction: End */
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcibody[dir='ltr'] {
padding-left: var(--layout-x-medium);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcibody[dir='rtl'] {
padding-right: var(--layout-x-medium);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter,
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfciheader {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter .default {
color: var(--color-primary-text-base);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
/* States: Active: Start */
/* States: Active: End */
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter .default.active,
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter .default:hover {
color: var(--color-primary-text-dark);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter[dir='ltr'] {
padding-left: var(--layout-x-medium);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter[dir='rtl'] {
padding-right: var(--layout-x-medium);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter .divider[data-style='dvertical'] {
margin: var(--layout-0);
width: var(--layout-xxx-small);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfcifooter [data-style='typocaption'] {
color: var(--color-primary-text-light);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfciheader .cfcihleft,
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfciheader .cfciright {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfciheader .cfcihleft {
flex: 1;
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.cfeed .cfcommentscontainer .cfcommentsitem .cfciheader .cfcihleft [data-style='typotitle1'] {
flex: 1;
}
/* Comments: Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Line: Start */
.cards.cfeed .linecontainer {
height: var(--percentage-100);
pointer-events: none;
overflow: visible;
position: absolute;
left: var(--layout-xxx-small);
top: var(--layout-x-medium);
/* Curve: Start */
/* Curve: End */
/* Vertical: Start */
/* Vertical: End */
}
.cards.cfeed .linecontainer .cfcilcurve,
.cards.cfeed .linecontainer .cfcivertical {
border-left: solid var(--layout-half) var(--color-primary-border-base);
text-indent: var(--text-indentation-negative);
}
.cards.cfeed .linecontainer .cfcilcurve {
background-color: var(--color-neutrals-white);
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
border-bottom-left-radius: var(--layout-xxxxx-small);
display: none;
height: var(--layout-xxx-medium);
position: absolute;
left: var(--layout-0);
bottom: var(--layout-0);
width: var(--layout-xxx-small);
z-index: 2;
}
.cards.cfeed .linecontainer .cfcivertical {
display: block;
height: var(--percentage-100);
width: var(--layout-xxx-small);
}
/* Replies: Start */
.cards.cfeed .cfreplycontainer .linecontainer {
left: var(--cards-feed-container-line-replies-left-negative);
top: var(--layout-0);
/* Curve: Start */
/* Curve: End */
}
.cards.cfeed .cfreplycontainer .linecontainer .cfcilcurve {
bottom: auto;
display: block;
top: var(--cards-feed-container-line-replies-top-negative);
}
/* Comments: Start */
.cards.cfeed .cfreplycontainer .cfcomments.cfcreplies .linecontainer .cfcivertical {
margin-top: var(--cards-feed-container-line-replies-margin-top-negative);
}
/* Comments: End */
/* Replies: End */
/* Line: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Reply: Container: Start */
.cards.cfeed .cfreplycontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
position: relative;
/* Direction: Start */
/* Direction: End */
}
.cards.cfeed .cfreplycontainer[dir='ltr'] {
padding-left: var(--layout-x-medium);
}
.cards.cfeed .cfreplycontainer[dir='rtl'] {
padding-right: var(--layout-x-medium);
}
/* Reply: Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Comments: Container: Start */
.cards.cfeed .cfcommentscontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
position: relative;
}
/* Comments: Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Container: Start */
.feedcontainer {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-xx-small);
overflow: visible;
}
/* Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.cfeed .cffooter {
align-items: flex-start;
flex-direction: column;
overflow: visible;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Actions: Start */
/* Actions: End */
/* Divider: Start */
/* Divider: End */
/* Social: Start */
/* Actions: Start */
/* Actions: End */
/* Typography: Caption: Start */
/* Typography: Caption: End */
/* Social: End */
}
.cards.cfeed .cffooter .cffactions,
.cards.cfeed .cffooter .cffsocial {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
}
.cards.cfeed .cffooter .cffactions {
overflow: visible;
/* Button: Start */
/* Button: End */
/* Tooltip: Start */
/* Tooltip: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.cfeed .cffooter .cffactions button.default {
color: var(--color-primary-text-base);
/* Direction: Start */
/* Direction: End
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.cards.cfeed .cffooter .cffactions button.default:first-child[dir='ltr'] {
padding-left: var(--layout-0);
}
.cards.cfeed .cffooter .cffactions button.default:first-child[dir='rtl'] {
padding-right: var(--layout-0);
}
.cards.cfeed .cffooter .cffactions button.default .icon svg {
fill: var(--color-primary-text-base);
}
.cards.cfeed .cffooter .cffactions .tooltip {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
max-width: var(--percentage-100);
/* Button: IconButton: Start */
/* Button: IconButton: End */
}
.cards.cfeed .cffooter .cffactions .tooltip .iconbutton {
transition: background-color var(--time-commons-base) ease;
border-radius: var(--layout-base);
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.cfeed .cffooter .cffactions .tooltip .iconbutton:hover {
background-color: var(--color-secondary-list-base);
}
.cards.cfeed .cffooter .cffactions [data-style='typotitle3'] {
flex: 1;
}
.cards.cfeed .cffooter .divider {
margin-bottom: var(--layout-0);
margin-top: var(--layout-0);
}
.cards.cfeed .cffooter .cffsocial .cffsreactions {
background-color: var(--color-neutrals-blue-grey-1);
border-radius: var(--layout-xx-small);
padding: var(--layout-half) var(--layout-xxxxx-small);
/* Typography: Caption: Start */
/* Typography: Caption: End */
}
.cards.cfeed .cffooter .cffsocial .cffsreactions [data-style='typocaption'] {
color: var(--color-primary-text-dark);
}
.cards.cfeed .cffooter .cffsocial [data-style='typocaption'] {
color: var(--color-primary-text-light);
flex: 1;
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.cfeed .cfheader {
gap: var(--layout-xxx-small);
overflow: visible;
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
/* Left: Start */
/* Left: End */
}
.cards.cfeed .cfheader .cfhleft {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
/* Text: Start */
/* Text: End */
/* Typography: Time: Start */
/* Typography: Time: End */
}
.cards.cfeed .cfheader .cfhleft .cfhltext {
display: flex;
flex: 1;
flex-direction: column;
}
.cards.cfeed .cfheader .cfhleft [data-style='typocaption'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
.cards.cfeed .cfheader .cfhleft [data-style='typocaption'] .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
.cards.cfeed .cfheader .cfhleft [data-style='typocaption'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards.cfeed {
--cards-feed-container-line-replies-left-negative: calc(var(--negative-value) * var(--layout-small));
/* -28px */
--cards-feed-container-line-replies-margin-top-negative: calc(var(--negative-value) * var(--layout-xxxx-medium));
/* -32px */
--cards-feed-container-line-replies-top-negative: calc(var(--negative-value) * var(--layout-xxx-small));
/* -16px */
--cards-feed-container-banner-padding-bottom: 6.25rem;
/* 100px */
--cards-feed-container-image-background-caption: rgba(0, 0, 0, 0.4);
--cards-feed-container-image-columns-min-max: 13.25rem;
/* 212px */
--cards-feed-container-image-columns-unit: 1fr;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Feed: Start */
.cards.cfeed {
gap: var(--layout-xxxx-small);
overflow: visible;
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Body: Start */
/* Body: End */
/* Inside: Start */
/* Inside: End */
}
.cards.cfeed .cbody {
flex: 1;
}
.cards.cfeed .cinside.cfinside {
flex: 1;
gap: var(--layout-xxxx-small);
}
.cards.cfeed .cinside.cfinsidelast {
flex-flow: row wrap;
/* Button: Default: Start */
/* Button: Default: End */
}
.cards.cfeed .cinside.cfinsidelast .default {
color: var(--color-primary-text-dark);
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.cfeed .cinside.cfinsidelast .default:hover {
color: var(--color-primary-text-dark);
}
/* Cards: Feed: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Header: Start */
.cards.fileurl .fuheader {
flex: 1;
min-height: var(--layout-medium);
padding-right: var(--layout-0);
width: auto;
/* Avatar: Start */
/* Avatar: End */
/* Container: Start */
/* Container: End */
/* Text: Start */
/* Text: End */
}
.cards.fileurl .fuheader .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--file-url-icon-shadow-rgba-color-r), var(--file-url-icon-shadow-rgba-color-g), var(--file-url-icon-shadow-rgba-color-b), var(--file-url-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
.cards.fileurl .fuheader [data-style='typocontainer'] {
align-items: flex-start;
flex: 1;
flex-direction: column;
}
.cards.fileurl .fuheader .futext {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
overflow: visible;
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.fileurl {
--file-url-icon-shadow-rgba-color-a: 40%;
--file-url-icon-shadow-rgba-color-b: 135;
--file-url-icon-shadow-rgba-color-g: 125;
--file-url-icon-shadow-rgba-color-r: 96;
--file-url-min-width: 20rem;
/* 320px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: File & URL: Start */
.cards.fileurl {
min-height: var(--layout-medium);
min-width: var(--file-url-min-width);
overflow: visible;
position: relative;
width: var(--percentage-100);
/* Header: Link: Start */
/* Header: Link: End */
/* Inside: Start */
/* Inside: End */
}
.cards.fileurl[data-type='link'] {
width: var(--percentage-100);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.cards.fileurl[data-type='link'] .icon svg {
fill: var(--color-primary-icon-base);
}
.cards.fileurl .cinside.fuinside {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
justify-content: space-between;
min-height: var(--layout-medium);
padding-right: var(--layout-xxx-small);
width: var(--percentage-100);
}
/* Cards: File & URL: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.cfilters .cfbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding: var(--layout-xxxx-small) var(--layout-xxxx-small) var(--layout-xxxxx-small);
width: var(--percentage-100);
/* Field: Start */
/* Field: End */
}
.cards.cfilters .cfbody .field,
.cards.cfilters .cfbody .fieldbutton {
padding-bottom: var(--layout-0);
width: var(--percentage-100);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.cfilters .cffooter {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding: var(--layout-xxxxx-small) var(--layout-xxxx-small) var(--layout-xxxx-small);
width: var(--percentage-100);
/* Field Button: Start */
/* Field Button: End */
}
.cards.cfilters .cffooter .fieldbutton {
padding-bottom: var(--layout-0);
width: var(--percentage-100);
/* Button: Contained: Start */
/* Button: Contained: End */
}
.cards.cfilters .cffooter .fieldbutton .contained,
.cards.cfilters .cffooter .fieldbutton .default,
.cards.cfilters .cffooter .fieldbutton .outline {
width: var(--percentage-100);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.cfilters .cfheader {
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
/* Hacks: Chrome & Safari: Start */
/* Hacks: Chrome & Safari: End */
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.cards.cfilters .cfheader [data-style='typotitle1'] {
line-height: var(--filters-header-line-height);
}
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cfilters {
--filters-header-line-height: 2.75rem;
/* 44px */
--filters-min-width: 20rem;
/* 320px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Filters: Start */
.cards.cfilters {
min-width: var(--filters-min-width);
overflow: visible;
position: relative;
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
.cards.cfilters .cinside.cfinside {
align-items: center;
display: flex;
flex-direction: column;
width: var(--percentage-100);
}
/* Cards: File & URL: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: List: List Item: Start */
.cards.navigation .cbody .listitem {
border-bottom: none;
/* Title: Start */
/* Title: End */
}
.cards.navigation .cbody .listitem .ltitle {
font-weight: var(--font-x-large-weight);
line-height: var(--font-xx-large-line-height);
}
/* Body: List: List Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.navigation .cheader {
overflow: visible;
/* Typography: Start */
/* Title 1: Start */
/* Title 1: End */
/* Title 3: Start */
/* Title 3: End */
/* Typography: End */
}
.cards.navigation .cheader [data-style='typotitle1'],
.cards.navigation .cheader [data-style='typotitle3'] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
width: var(--percentage-100);
}
.cards.navigation .cheader [data-style='typotitle1'] {
flex: 1;
}
.cards.navigation .cheader [data-style='typotitle1'] + [data-style='typotitle3'] {
margin-top: var(--layout-xxxx-small);
}
.cards.navigation .cheader [data-style='typotitle3'] {
overflow: visible;
/* Icon: Start */
/* For Tooltip: Start */
/* For Tooltip: End */
/* Icon: End */
}
.cards.navigation .cheader [data-style='typotitle3'] .icon.fortooltip {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--card-navigation-icon-shadow-rgba-color-r), var(--card-navigation-icon-shadow-rgba-color-g), var(--card-navigation-icon-shadow-rgba-color-b), var(--card-navigation-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
height: var(--layout-xx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
.cards.navigation .cheader [data-style='typotitle3'] .icon.fortooltip svg {
fill: var(--color-neutrals-white);
height: var(--card-navigation-icon-height-tooltip);
width: auto;
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards.navigation {
--card-navigation-icon-height-tooltip: 1.375rem;
/* 22px */
--card-navigation-icon-shadow-rgba-color-a: 0.4;
--card-navigation-icon-shadow-rgba-color-b: 135;
--card-navigation-icon-shadow-rgba-color-g: 125;
--card-navigation-icon-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Navigation: Start */
.cards.navigation {
margin-bottom: var(--layout-xxxx-small);
}
/* Cards: Navigation: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: List: Start */
.cards.cardnotifications .cnbody .cnblist {
display: flex;
flex-direction: column;
}
/* Body: List: End */
/* Body: Empty: Start */
.cards.cardnotifications .cnbody .empty {
padding-bottom: var(--card-notifications-padding-bottom-top);
padding-top: var(--card-notifications-padding-bottom-top);
}
/* Body: Empty: End */
/* Loading: Start */
.cards.cardnotifications .cnbody .progressbar {
margin-bottom: var(--layout-xxx-small);
margin-top: var(--layout-xxx-small);
}
/* Loading: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.cardnotifications .cnfooter {
align-items: center;
border-top: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
justify-content: center;
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.cardnotifications .cnheader {
align-items: center;
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
flex-flow: row wrap;
gap: var(--layout-xxx-small);
justify-content: space-between;
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.cardnotifications .cnheader [data-style='typotitle1'] {
flex: 1;
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Items: Start */
.cards.cardnotifications .cnbody .cnblitem {
min-width: var(--card-notifications-list-item-min-width-40);
/* Responsive: Start */
/* Responsive: End */
/* Avatar: Start */
/* Container: Start */
/* Container: End */
/* Avatar: End */
/* Read Mark: Start */
/* Read Mark: End */
}
@media (min-width: 1920px) {
.cards.cardnotifications .cnbody .cnblitem {
min-width: var(--card-notifications-list-item-min-width-25);
}
}
.cards.cardnotifications .cnbody .cnblitem .avatar[data-size='m'][data-background='bgdefault'] {
background-color: var(--color-neutrals-grey-3);
/* Icon: Start */
/* Icon: End */
}
.cards.cardnotifications .cnbody .cnblitem .avatar[data-size='m'][data-background='bgdefault'] .icon {
background-color: var(--color-neutrals-grey-3);
/* SVG: Start */
/* SVG: End */
}
.cards.cardnotifications .cnbody .cnblitem .avatar[data-size='m'][data-background='bgdefault'] .icon svg {
fill: var(--color-alternative-focus-dark);
}
.cards.cardnotifications .cnbody .cnblitem .avatarcontainer {
height: var(--layout-xx-medium);
/* Avatar: Start */
/* Avatar: End */
}
.cards.cardnotifications .cnbody .cnblitem .avatarcontainer .avatar[data-size='xxs'] {
position: absolute;
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-0);
/* stylelint-disable-line */
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
.cards.cardnotifications .cnbody .cnblitem .avatarcontainer .avatar[data-size='xxs'] .icon svg {
fill: var(--color-neutrals-white);
}
.cards.cardnotifications .cnbody .cnblitem .cnbliread {
transition: background-color var(--time-commons-base) ease, border-color var(--time-commons-base) ease;
background-color: var(--color-primary-primary-base);
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-xxxxx-small);
display: block;
height: var(--layout-xxxxx-small);
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
right: var(--layout-xxxx-small);
/* stylelint-disable-line */
text-indent: var(--text-indentation-negative);
width: var(--layout-xxxxx-small);
/* States: Start */
/* Active: Start */
/* Active: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
.cards.cardnotifications .cnbody .cnblitem .cnbliread[data-states='active'] {
background-color: var(--color-neutrals-white);
}
.cards.cardnotifications .cnbody .cnblitem .cnbliread:hover {
background-color: var(--color-primary-primary-dark);
border-color: var(--color-primary-primary-dark);
}
/* Items: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards.cardnotifications {
--card-notifications-list-item-min-width-25: 25vw;
/* 25vw */
--card-notifications-list-item-min-width-40: 40vw;
/* 40vw */
--card-notifications-padding-bottom-top: 5rem;
/* 80px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Card: Notifications: Inside: Start */
.cards.cardnotifications .cninside {
flex: 1;
}
/* Card: Notifications: Inside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Poll: Start */
.cards.cardpoll {
min-width: var(--card-poll-min-width);
/* Body: Start */
/* Body: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Direction: Start */
/* Direction: End */
/* Typography: Headline: Start */
/* Typography: Headline: End */
/* Header: End */
}
.cards.cardpoll .cpbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Preview: Items: Start */
/* Preview: Items: End */
/* Result: Start */
/* Result: End */
}
.cards.cardpoll .cpbody .cpisencondary {
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-base);
color: var(--color-primary-primary-base);
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
height: var(--layout-xxx-medium);
line-height: var(--layout-xxx-medium);
width: var(--percentage-100);
}
.cards.cardpoll .cpbody .cpbresults {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Inside: Start */
/* Inside: End */
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Left: Start */
/* Left: End */
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
/* Progress Bar: Start */
/* Progress Bar: End */
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar {
height: var(--layout-xxx-medium);
position: relative;
/* Direction: Start */
/* Direction: End */
/* Inside: Start */
/* Inside: End */
/* States: Start */
/* Active: Start */
/* Active: End */
/* Disable: Start */
/* Disable: End */
/* States: End */
/* Typography: Specials: Start */
/* Typography: Specials: End */
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar[dir="ltr"] {
margin-left: var(--layout-0);
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar[dir="rtl"] {
margin-right: var(--layout-0);
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar .pbinside {
background-color: var(--color-neutrals-transparent);
border-radius: var(--layout-0);
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar[data-states='active'] div[aria-valuenow] {
background-color: var(--color-acentuation-info-base);
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar[data-states='disable'] div[aria-valuenow] {
background-color: var(--color-primary-disable-base);
}
.cards.cardpoll .cpbody .cpbresults .cpbrlinside .cpbrleft .cpbrlprogressbar [data-style='typospecials'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
color: var(--color-primary-text-dark);
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
left: var(--layout-xxxx-small);
line-height: var(--font-small-line-height);
margin-bottom: var(--layout-0);
z-index: 2;
}
.cards.cardpoll .cpfooter {
gap: var(--layout-base);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
.cards.cardpoll .cpheader[dir='ltr'] {
padding-right: var(--layout-xxxx-small);
}
.cards.cardpoll .cpheader[dir='rtl'] {
padding-left: var(--layout-xxxx-small);
}
.cards.cardpoll .cpheader [data-style='typoheadline'] {
flex: 1;
}
/* Poll: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.pcprofile .pcbody {
display: flex;
flex-direction: column;
padding: var(--layout-xxxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Actions: Start */
.cards.pcprofile .pciactions {
display: grid;
gap: var(--layout-xxxxx-small);
/* Action: Start */
/* Button: Start */
/* Button: End */
/* Medal: Start */
/* Medal: End */
/* Action: End */
/* Size: Start */
/* Size: End */
}
.cards.pcprofile .pciactions .pciaction.iabutton {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
height: var(--layout-xxx-medium);
width: var(--layout-xxx-medium);
}
.cards.pcprofile .pciactions .pciaction.iamedal {
width: var(--layout-x-large);
/* Default: Start */
/* Default: End */
/* IconButton: Start */
/* IconButton: End */
/* Typography: Start */
/* Container: Start */
/* Container: End */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
}
.cards.pcprofile .pciactions .pciaction.iamedal button.default {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
.cards.pcprofile .pciactions .pciaction.iamedal .iconbutton[data-size='m'] {
height: auto;
text-indent: var(--layout-0);
width: var(--layout-x-large);
/* Icon: Start */
/* Icon: End */
}
.cards.pcprofile .pciactions .pciaction.iamedal .iconbutton[data-size='m'] .icon {
height: var(--layout-x-large);
width: var(--layout-x-large);
/* SVG: Start */
/* SVG: End */
}
.cards.pcprofile .pciactions .pciaction.iamedal .iconbutton[data-size='m'] .icon svg {
height: var(--layout-x-large);
position: relative;
top: auto;
/* stylelint-disable-line */
left: auto;
/* stylelint-disable-line */
transform: none;
width: var(--layout-x-large);
}
.cards.pcprofile .pciactions .pciaction.iamedal [data-style='typocontainer'] {
height: var(--layout-x-large);
position: relative;
width: var(--layout-x-large);
/* Title: Start */
/* Title: End */
}
.cards.pcprofile .pciactions .pciaction.iamedal [data-style='typocontainer'] [data-style='typotitle3'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
color: var(--color-neutrals-white);
}
.cards.pcprofile .pciactions .pciaction.iamedal [data-style='typocaption'] {
display: block;
margin-top: var(--layout-half);
text-align: center;
}
.cards.pcprofile .pciactions.abig {
align-items: flex-start;
grid-template-columns: repeat(auto-fit, var(--layout-x-large));
}
.cards.pcprofile .pciactions.asmall {
grid-template-columns: repeat(auto-fit, var(--layout-xxxx-medium));
}
/* Actions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* List: Start */
.cards.pcprofile .pcilist {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
overflow: visible;
/* Item: Start */
/* Link: Start */
/* Link: End */
/* Title: Start */
/* Title: End */
}
.cards.pcprofile .pcilist .pclitem,
.cards.pcprofile .pcilist .pcltitle {
overflow: visible;
}
.cards.pcprofile .pcilist .pclitem,
.cards.pcprofile .pcilist [data-style='typobutton'] {
align-items: center;
display: flex;
flex-flow: row wrap;
}
.cards.pcprofile .pcilist .pclitem {
gap: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
/* Typography: Start */
/* Typography: End */
}
.cards.pcprofile .pcilist .pclitem .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--profile-card-icon-shadow-rgba-color-r), var(--profile-card-icon-shadow-rgba-color-g), var(--profile-card-icon-shadow-rgba-color-b), var(--profile-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] {
flex-flow: row wrap;
max-width: calc(var(--percentage-100) - var(--layout-medium));
/* Caption: Start */
/* Caption: End */
}
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] [data-style='typocaption'],
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] [data-style='typobody'] {
width: var(--percentage-100);
}
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] [data-style='typocaption'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] [data-style='typocaption'] .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
.cards.pcprofile .pcilist .pclitem [data-style='typocontainer'] [data-style='typocaption'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
.cards.pcprofile .pcilist[data-type='link'] {
align-items: center;
display: flex;
flex-flow: row wrap;
/* Typography: Start */
/* Caption: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Caption: End */
/* Typography: End */
}
.cards.pcprofile .pcilist[data-type='link'] [data-style='typocaption'] .icon svg {
fill: var(--color-primary-icon-base);
}
.cards.pcprofile .pcilist .pcltitle [data-style='typobutton'] {
gap: var(--layout-xxxxx-small);
/* Icon: Organization: Start */
/* Icon: Organization: End */
}
.cards.pcprofile .pcilist .pcltitle [data-style='typobutton'] .icon.iorganization {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--profile-card-icon-shadow-rgba-color-r), var(--profile-card-icon-shadow-rgba-color-g), var(--profile-card-icon-shadow-rgba-color-b), var(--profile-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
height: var(--layout-xx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
.cards.pcprofile .pcilist .pcltitle [data-style='typobutton'] .icon.iorganization svg {
fill: var(--color-neutrals-white);
height: var(--profile-card-icon-items-title-height);
width: auto;
}
/* List: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Text: Start */
.cards.pcprofile .pcitext {
display: flex;
flex-direction: column;
margin-bottom: var(--layout-xxx-small);
/* Caption: Start */
/* Caption: End */
}
.cards.pcprofile .pcitext:last-child {
margin-bottom: var(--layout-0);
}
.cards.pcprofile .pcitext [data-style='typocaption'] {
margin-bottom: var(--layout-base);
}
/* Text: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.pcprofile .pcheader {
align-items: center;
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
min-height: var(--layout-x-medium);
padding: var(--layout-base) var(--layout-xxxx-small);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.pcprofile {
--profile-card-icon-items-title-height: 1.375rem;
/* 22px */
--profile-card-icon-shadow-rgba-color-a: 0.4;
--profile-card-icon-shadow-rgba-color-b: 135;
--profile-card-icon-shadow-rgba-color-g: 125;
--profile-card-icon-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.signup .cbody {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Field Button: Start */
/* Field Button: End */
/* Typography: Start */
/* Typography: End */
}
.cards.signup .cbody .fieldbutton {
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
/* Direction: Start */
/* Direction: End */
}
.cards.signup .cbody .fieldbutton[dir='ltr'].left {
float: left;
}
.cards.signup .cbody .fieldbutton[dir='ltr'].right {
float: right;
}
.cards.signup .cbody .fieldbutton[dir='rtl'].left {
float: right;
}
.cards.signup .cbody .fieldbutton[dir='rtl'].right {
float: left;
}
.cards.signup .cbody p[data-style='typobody'],
.cards.signup .cbody legend[data-style='typoheader'] {
margin-bottom: var(--layout-xxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.signup .cfooter {
padding: var(--layout-xxxx-small);
/* Field Button: Start */
/* Field Button: End */
}
.cards.signup .cfooter .fieldbutton {
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
/* Direction: Start */
/* Direction: End */
}
.cards.signup .cfooter .fieldbutton[dir='ltr'].left {
margin-right: auto;
}
.cards.signup .cfooter .fieldbutton[dir='ltr'].right {
margin-left: auto;
}
.cards.signup .cfooter .fieldbutton[dir='rtl'].left {
margin-left: auto;
}
.cards.signup .cfooter .fieldbutton[dir='rtl'].right {
margin-right: auto;
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.signup .cheader {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Image: Start */
/* Image: End */
/* Title: Start */
/* Title: End */
}
.cards.signup .cheader img {
display: block;
margin-left: auto;
margin-right: auto;
}
.cards.signup .cheader [data-style='typotitle1'] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
justify-content: center;
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
}
.cards.signup .cheader [data-style='typotitle1'] .icon {
height: var(--layout-x-medium);
width: var(--layout-x-medium);
/* SVG: Start */
/* SVG: End */
}
.cards.signup .cheader [data-style='typotitle1'] .icon svg {
height: var(--layout-x-medium);
width: var(--layout-x-medium);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.signup {
--signup-max-width: 22.5rem;
/* 360px */
--signup-min-width: 22.5rem;
/* 360px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: SignUp: Start */
.cards.signup {
max-width: var(--signup-max-width);
min-width: var(--signup-min-width);
/* Inside: Start */
/* Inside: End */
}
.cards.signup .cinside {
gap: var(--layout-base);
}
/* Cards: SignUp: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Variables: Start */
.cards.survey {
--cards-survey-min-width: 20rem;
/* 320px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: Survey: Start */
.cards.survey {
min-width: var(--cards-survey-min-width);
overflow: visible;
position: relative;
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
.cards.survey .cinside.csinside {
display: flex;
flex-direction: column;
gap: var(--layout-x-small);
padding-bottom: var(--layout-xxxx-small);
width: var(--percentage-100);
/* Body: Start */
/* Body: ENd */
/* Field Button: Start */
/* Field Button: End */
/* Header: Start */
/* Header: End */
/* Typography: Start */
/* Specials: Start */
/* Specials: End */
/* Title: Start */
/* Title: Start */
/* Typography: End */
}
.cards.survey .cinside.csinside .csbody {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-x-small);
justify-content: center;
/* IconButton: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Hover: Start */
/* States: Hover: End */
/* IconButton: End */
}
.cards.survey .cinside.csinside .csbody .iconbutton .icon .svg {
transition: fill var(--time-commons-base) ease;
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojianger'] .icon svg {
fill: var(--color-acentuation-brand-base);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojisad'] .icon svg {
fill: var(--color-acentuation-brand-light);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojinormal'] .icon svg {
fill: var(--color-alternative-warning-light);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojihappy'] .icon svg {
fill: var(--color-alternative-success-light);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojiblissful'] .icon svg {
fill: var(--color-alternative-success-base);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojianger']:hover .icon svg {
fill: var(--color-acentuation-brand-dark);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojisad']:hover .icon svg {
fill: var(--color-acentuation-brand-base);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojinormal']:hover .icon svg {
fill: var(--color-alternative-warning-base);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojihappy']:hover .icon svg {
fill: var(--color-alternative-success-base);
}
.cards.survey .cinside.csinside .csbody .iconbutton[data-style='iemojiblissful']:hover .icon svg {
fill: var(--color-alternative-success-dark);
}
.cards.survey .cinside.csinside .fieldbutton {
padding-bottom: var(--layout-0);
}
.cards.survey .cinside.csinside .csheader .fieldbutton {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
/* Direction: Start */
/* Direction: End */
}
.cards.survey .cinside.csinside .csheader .fieldbutton[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.cards.survey .cinside.csinside .csheader .fieldbutton[dir='rtl'] {
left: var(--layout-xxxx-small);
}
.cards.survey .cinside.csinside [data-style='typospecials'] {
color: var(--color-primary-text-dark);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
width: var(--percentage-100);
}
.cards.survey .cinside.csinside [data-style='typotitle1'] {
flex: 1;
}
/* Cards: Survey: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.timelinecard .tlbody {
padding: var(--layout-xxxx-small);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.timelinecard .tlheader {
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards.timelinecard {
--time-line-min-width: 18.5rem;
/* 296px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: TimeLine: Start */
.cards.timelinecard {
min-width: var(--time-line-min-width);
overflow: visible;
/* Inside: Start */
/* Inside: End */
}
.cards.timelinecard .cinside.tlinside {
height: var(--percentage-100);
width: var(--percentage-100);
/* Loading: Start */
/* Loading: End */
}
.cards.timelinecard .cinside.tlinside .progressbar {
margin-bottom: var(--layout-xxxx-small);
margin-top: var(--layout-xxxx-small);
}
/* Cards: TimeLine: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.usercard .cbody {
overflow: visible;
position: initial;
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Empty: Start */
.cards.usercard .empty:first-child {
padding-top: var(--layout-xxxx-medium);
}
/* Empty: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Link: Start */
.cards.usercard .cfooter .link {
font-size: var(--font-small-size);
}
/* Footer: Link: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
.cards.usercard .cheader {
display: block;
overflow: visible;
padding: var(--layout-0);
position: relative;
/* Actions: DropDown: Start */
/* Actions: DropDown: End */
/* Avatar: Start */
/* Avatar: End */
/* Container: Start */
/* Container: End */
/* Loading: Start */
/* Loading: End */
/* States: Hover Start */
/* States: Hover: End */
/* Typography: Start */
/* Typography: End */
}
.cards.usercard .cheader .dropdown {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--cards-box-shadow-rgba-color-r), var(--cards-box-shadow-rgba-color-g), var(--cards-box-shadow-rgba-color-b), var(--cards-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border-radius: var(--percentage-100);
opacity: var(--alpha-0);
position: absolute;
bottom: var(--percentage-45);
/* stylelint-disable-line */
left: var(--percentage-50);
/* stylelint-disable-line */
/* Form: Start */
/* Form: End */
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform {
min-width: var(--usercard-header-drop-down-width);
/* Field: Start */
/* Field: End */
/* Button: Start */
/* Default */
/* Default: End */
/* Outline: Start */
/* Outline: End */
/* Button: End */
/* Upload File: End */
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .fieldbutton {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
padding-bottom: var(--layout-0);
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .fieldbutton:last-child {
border-bottom: none;
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .default,
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .outline {
color: var(--color-primary-text-base);
font-size: var(--font-medium-size);
font-weight: var(--font-medium-weight);
height: auto;
justify-content: flex-start;
line-height: var(--font-medium-line-height);
padding: var(--layout-xxxx-small);
width: var(--percentage-100);
/* States: Start */
/* Disable: Start */
/* Disable: End */
/* Hover: start */
/* Hover: End */
/* States: End */
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .default[data-states='disable'],
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .outline[data-states='disable'] {
color: var(--color-primary-disable-dark);
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .default:hover,
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .outline:hover {
color: var(--color-primary-text-dark);
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .outline {
border: none;
}
.cards.usercard .cheader .dropdown ~ .containerarea .ddform .outline ~ .filename {
display: none;
}
.cards.usercard .cheader .avatar {
margin: var(--layout-xxxxx-small) auto var(--layout-xxxx-small);
}
.cards.usercard .cheader .hcontainer {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: var(--layout-base) var(--layout-xxxx-small);
}
.cards.usercard .cheader .hloadingcontainer {
padding-bottom: var(--layout-xxxxx-small);
padding-top: var(--layout-xxxxx-small);
/* Placeholder: Start */
/* Placeholder: End */
}
.cards.usercard .cheader .hloadingcontainer .placeholder {
margin-left: auto;
margin-right: auto;
}
.cards.usercard .cheader .hloadingcontainer .placeholder:first-child {
height: var(--layout-xx-large);
margin-bottom: var(--layout-xxxx-small);
width: var(--layout-xx-large);
}
.cards.usercard .cheader .hloadingcontainer .placeholder:last-child {
margin-top: var(--layout-xxxxx-small);
}
.cards.usercard .cheader:hover .dropdown {
opacity: var(--alpha-1);
}
.cards.usercard .cheader [data-style='typotitle3'],
.cards.usercard .cheader [data-style='typocaption'] {
width: var(--percentage-100);
}
.cards.usercard .cheader [data-style='typotitle3'] {
margin-bottom: var(--layout-base);
}
.cards.usercard .cheader [data-style='typotitle3']:last-child {
margin-bottom: var(--layout-xxxxx-small);
}
.cards.usercard .cheader [data-style='typocaption'] {
margin-bottom: var(--layout-xxxxx-small);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Inside Chip: Start */
.cards.usercard .insidechip {
padding-bottom: var(--layout-xx-small);
/* Body: Start */
/* Chip: Start */
/* Chip: End */
/* Loading: Start */
/* Loading: End */
/* Title: Start */
/* Title: End */
/* Body: End */
}
.cards.usercard .insidechip:last-child {
padding-bottom: var(--layout-0);
}
.cards.usercard .insidechip .cbody:last-child {
padding-bottom: var(--layout-xxxxx-small);
}
.cards.usercard .insidechip .chip {
height: var(--layout-xxx-medium);
line-height: var(--font-small-line-height);
margin: var(--layout-base) var(--layout-xxxx-small) var(--layout-xxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
}
.cards.usercard .insidechip .chip .avatar .icon svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
.cards.usercard .insidechip .icloadingcontainer {
margin-bottom: var(--layout-xxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Placeholder: Start */
/* Placeholder: End */
}
.cards.usercard .insidechip .icloadingcontainer .placeholder {
height: var(--layout-xxx-medium);
width: var(--percentage-100);
}
.cards.usercard .insidechip .ctitle {
margin-bottom: var(--layout-xxx-small);
}
/* Inside Chip: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Inside Header: Start */
.cards.usercard .insideheader {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
overflow: visible;
/* Inside Chip: Start */
/* Inside Chip: End */
}
.cards.usercard .insideheader:last-child {
border-bottom: none;
}
.cards.usercard .insideheader + .insidechip,
.cards.usercard .insideheader + .insideuser {
padding-top: var(--layout-xx-small);
}
/* Inside Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Inside User: Start */
/* Empty: Start */
.cards.usercard .insideuser .empty {
padding-bottom: var(--layout-xx-small);
}
/* Empty: End */
/* List Item: Start */
.cards.usercard .insideuser .listitem {
border-bottom: none;
/* Caption: Start */
/* Caption: End */
/* Inside: Start */
/* Inside: End */
/* Text: Start */
/* Text: End */
/* Typography: Start */
/* Typography: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.usercard .insideuser .listitem .lcaption {
order: 2;
}
.cards.usercard .insideuser .listitem .linside {
align-items: center;
}
.cards.usercard .insideuser .listitem .ltext {
align-items: center;
display: flex;
gap: var(--layout-base);
line-height: var(--font-large-line-height);
order: 1;
}
.cards.usercard .insideuser .listitem [data-style='typobutton'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: max-width var(--time-commons-base) ease, opacity var(--time-commons-base) ease;
color: var(--color-primary-primary-base);
opacity: var(--alpha-0);
/* Direction: Start */
/* Direction: End */
}
.cards.usercard .insideuser .listitem [data-style='typobutton'][dir='ltr'] {
right: var(--layout-x-small);
}
.cards.usercard .insideuser .listitem [data-style='typobutton'][dir='rtl'] {
left: var(--layout-x-small);
}
.cards.usercard .insideuser .listitem:hover {
/* Inside: Start */
/* Inside: End */
/* Typography: Start */
/* Typography: End */
}
.cards.usercard .insideuser .listitem:hover .linside {
max-width: calc(var(--percentage-100) - var(--usercard-max-width-hover));
}
.cards.usercard .insideuser .listitem:hover [data-style='typobutton'] {
opacity: var(--alpha-100);
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.usercard .insideuser .listitem:hover [data-style='typobutton']:hover {
color: var(--color-primary-primary-dark);
}
/* List Item: End */
/* Loading: List Item: Start */
.cards.usercard .insideuser .iuloadingcontainer .listitem {
align-items: center;
display: flex;
flex-flow: row wrap;
margin-bottom: var(--layout-0);
padding: var(--layout-xxxx-small);
/* Inside: Start */
/* Inside: End */
}
.cards.usercard .insideuser .iuloadingcontainer .listitem .linside {
width: calc(var(--percentage-100) - var(--layout-xxx-medium));
/* Placeholder: Start */
/* Placeholder: End */
}
.cards.usercard .insideuser .iuloadingcontainer .listitem .linside .placeholder:first-child {
margin-bottom: var(--layout-base);
width: var(--percentage-100);
}
/* Loading: List Item: End */
/* Title: Start */
.cards.usercard .insideuser .ctitle {
margin-bottom: var(--layout-base);
}
/* Title: End */
/* Inside User: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Inside Wallet: Start */
.cards.usercard .insidewallet {
padding-bottom: var(--layout-xx-small);
/* Body: Start */
/* List Container: Start */
/* List Container: End */
/* List Item: Start */
/* List Item: End */
/* Loading: List Item: Start */
/* Loading: List Item: End */
/* Body: End */
}
.cards.usercard .insidewallet:last-child {
padding-bottom: var(--layout-0);
}
.cards.usercard .insidewallet .listcontainer {
overflow: visible;
}
.cards.usercard .insidewallet .listitem {
border: none;
overflow: visible;
position: initial;
/* Icon: SVG: Start */
/* Icon: SVG: Start */
/* States: Hover: Icon: SVG: Start */
/* States: Hover: Icon: SVG: End */
}
.cards.usercard .insidewallet .listitem .producticon svg {
fill: var(--color-primary-icon-base);
}
.cards.usercard .insidewallet .listitem:hover .producticon svg {
fill: var(--color-primary-icon-base);
}
.cards.usercard .insidewallet .iwloadingcontainer .listitem {
align-items: center;
display: flex;
flex-flow: row wrap;
padding: var(--layout-xxxx-small);
/* Placeholder: Direction: Start */
/* Placeholder: Direction: End */
}
.cards.usercard .insidewallet .iwloadingcontainer .listitem .placeholder:first-child[dir='ltr'] {
margin-right: var(--layout-xxxxx-small);
}
.cards.usercard .insidewallet .iwloadingcontainer .listitem .placeholder:first-child[dir='rtl'] {
margin-left: var(--layout-xxxxx-small);
}
/* Inside Wallet: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Tooltip List: Start */
.cards.usercard .tooltip.tcardlist {
max-height: var(--usercard-tooltip-list-max-height);
/* Cards: Start */
/* Actions: Start */
/* Actions: End */
/* Body: Start */
/* Body: End */
/* List Item: States: Hover: Start */
/* List Item: States: Hover: End */
/* Cards: End */
}
.cards.usercard .tooltip.tcardlist .cards .actions {
position: absolute;
top: var(--percentage-42);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
color: var(--color-primary-primary-base);
opacity: var(--alpha-0);
/* Direction: Start */
/* Direction: End */
/* Icon: Start */
/* Icon: End */
}
.cards.usercard .tooltip.tcardlist .cards .actions[dir='ltr'] {
right: var(--layout-x-small);
}
.cards.usercard .tooltip.tcardlist .cards .actions[dir='rtl'] {
left: var(--layout-x-small);
}
.cards.usercard .tooltip.tcardlist .cards .actions .icon {
margin: var(--layout-0);
}
.cards.usercard .tooltip.tcardlist .cards .cbody,
.cards.usercard .tooltip.tcardlist .cards .cheader {
margin-bottom: var(--layout-base);
}
.cards.usercard .tooltip.tcardlist .cards .listitem:hover .actions {
opacity: var(--alpha-100);
}
/* Tooltip List: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tooltip Wallet: Start */
.cards.usercard .tooltip.tcardwallet {
max-height: var(--usercard-tooltip-wallet-max-height);
/* Cards: Start */
/* Body: Start */
/* Body: End */
/* Cards: End */
}
.cards.usercard .tooltip.tcardwallet .cards .cbody,
.cards.usercard .tooltip.tcardwallet .cards .cheader {
margin-bottom: var(--layout-xxx-small);
}
.cards.usercard .tooltip.tcardwallet .cards .cbody {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
.cards.usercard .tooltip.tcardwallet .cards .cbody:last-child {
margin-bottom: var(--layout-0);
}
/* Tooltip Wallet: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
.cards.usercard .tooltip {
max-width: var(--usercard-tooltip-wallet-width);
padding: var(--layout-0);
width: var(--usercard-tooltip-wallet-width);
/* Cards: Start */
/* Cards: End */
}
.cards.usercard .tooltip .cards {
background-color: var(--color-secondary-modal-base);
/* Empty: Start */
/* Empty: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Header: End */
}
.cards.usercard .tooltip .cards .empty {
padding-bottom: var(--layout-xxxx-medium);
padding-top: var(--layout-xxxx-medium);
}
.cards.usercard .tooltip .cards .cfooter {
border-top: solid var(--layout-border) var(--color-primary-border-base);
padding-bottom: var(--layout-half);
}
.cards.usercard .tooltip .cards .cheader {
min-height: var(--layout-xxxx-medium);
padding: var(--layout-xxxx-small) var(--layout-xxxx-small) var(--layout-0);
}
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.usercard {
--usercard-header-bottom: -0.5rem;
/* -8px */
--usercard-header-drop-down-width: 10.75rem;
/* 172px */
--usercard-header-left: -0.5rem;
/* -8px */
--usercard-max-width-hover: 7rem;
/* 96px */
--usercard-min-width: 17.625rem;
/* 282px */
--usercard-tooltip-list-max-height: 22.5rem;
/* 360px */
--usercard-tooltip-wallet-max-height: 8.75rem;
/* 140px */
--usercard-tooltip-wallet-width: 17.25rem;
/* 276px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: UserCard: Start */
.cards.usercard {
margin-bottom: var(--layout-xxxx-small);
min-width: var(--usercard-min-width);
overflow: visible;
/* Title: Start */
/* Title: End */
}
.cards.usercard:last-child {
margin-bottom: var(--layout-0);
}
.cards.usercard .ctitle {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Cards: UserCard: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Body: Start */
.cards.vcard .vcbody {
min-height: var(--layout-xxxx-large);
/* var(--layout-large); */
padding-bottom: var(--layout-xxx-small);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Typography: Start */
/* Typography: End */
}
.cards.vcard .vcbody:last-child {
padding-bottom: var(--layout-xxxx-small);
}
.cards.vcard .vcbody [data-style='typobody'] {
margin-bottom: var(--layout-xxxx-small);
}
.cards.vcard .vcbody [data-style='typobody']:last-child {
margin-bottom: var(--layout-0);
}
/* Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
.cards.vcard .vcfooter {
align-items: flex-start;
border-top: solid var(--layout-half) var(--color-primary-border-base);
flex-direction: column;
overflow: visible;
padding: var(--layout-xxxx-small);
/* Button: Secondary: Start */
/* Button: Secondary: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
.cards.vcard .vcfooter .outline {
width: var(--percentage-100);
}
.cards.vcard .vcfooter [data-style='typocontainer'] {
align-items: center;
display: flex;
gap: var(--layout-xxxx-small);
justify-content: space-between;
overflow: visible;
width: var(--percentage-100);
/* Avatar: Container: Start */
/* Avatar: Container: End */
/* Caption: Start */
/* Caption: End */
/* Icon: Start */
/* Icon: End */
}
.cards.vcard .vcfooter [data-style='typocontainer'] .avatarcontainer {
align-items: center;
display: flex;
justify-content: flex-end;
margin: var(--layout-0);
/* Avatar: Start */
/* Avatar: End */
}
.cards.vcard .vcfooter [data-style='typocontainer'] .avatarcontainer .avatar {
border: solid var(--layout-border) var(--color-primary-border-light);
/* Direction: Start */
/* Direction: End */
}
.cards.vcard .vcfooter [data-style='typocontainer'] .avatarcontainer .avatar + .avatar[dir='ltr'] {
margin-left: var(--v-card-footer-avatar-negative-margin);
}
.cards.vcard .vcfooter [data-style='typocontainer'] .avatarcontainer .avatar + .avatar[dir='rtl'] {
margin-right: var(--v-card-footer-avatar-negative-margin);
}
.cards.vcard .vcfooter [data-style='typocontainer'] [data-style='typocaption'] {
flex: 1;
}
.cards.vcard .vcfooter [data-style='typocontainer'] .icon {
height: var(--layout-xx-small);
width: var(--layout-xxx-small);
/* Organization: Start */
/* Organization: End */
}
.cards.vcard .vcfooter [data-style='typocontainer'] .icon.iorganization {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--v-card-icon-shadow-rgba-color-r), var(--v-card-icon-shadow-rgba-color-g), var(--v-card-icon-shadow-rgba-color-b), var(--v-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-primary-primary-base);
border-radius: var(--layout-base);
/* SVG: Start */
/* SVG: End */
}
.cards.vcard .vcfooter [data-style='typocontainer'] .icon.iorganization svg {
fill: var(--color-neutrals-white);
height: var(--v-card-footer-icon-height-tooltip);
width: auto;
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Header: Background: Start */
.cards.vcard .vcheader .vcbackground {
background-color: var(--color-primary-border-base);
border-radius: var(--layout-base) var(--layout-base) var(--layout-0) var(--layout-0);
height: var(--v-card-header-background-height);
margin-bottom: var(--layout-x-small);
overflow: hidden;
position: relative;
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
/* Image: Start */
/* Image: End */
}
.cards.vcard .vcheader .vcbackground .vchicon {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
height: var(--v-card-header-icon-height-width);
width: var(--v-card-header-icon-height-width);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.cards.vcard .vcheader .vcbackground .vchicon[dir='ltr'] {
right: var(--layout-0);
}
.cards.vcard .vcheader .vcbackground .vchicon[dir='rtl'] {
left: var(--layout-0);
}
.cards.vcard .vcheader .vcbackground .vchicon svg {
fill: var(--color-neutrals-white);
height: var(--v-card-header-icon-height-width);
width: var(--v-card-header-icon-height-width);
}
.cards.vcard .vcheader .vcbackground img {
border-radius: var(--layout-base) var(--layout-base) var(--layout-0) var(--layout-0);
/* Scale: Start */
/* Scale: End */
}
.cards.vcard .vcheader .vcbackground img.scale {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
height: auto;
resize: both;
width: var(--percentage-100);
}
/* Background: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Text: Start */
.cards.vcard .vcheader .vctext {
display: flex;
flex-direction: column;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
width: var(--percentage-100);
/* Left: Placeholder: Shape: Line: Start */
/* Left: Placeholder: Shape: Line: End */
/* Typography: Start */
/* Caption: Icon: Start */
/* Caption: Icon: End */
/* Specials: Start */
/* Icon: Direction: Start */
/* Icon: Direction: End */
/* States: Start */
/* Error: Start */
/* Error: End */
/* States: End */
/* Specials: End */
/* Title: Icon: Start */
/* Title: Icon: End */
/* Typography: End */
}
.cards.vcard .vcheader .vctext .placeholder[data-shape='line'] {
margin-bottom: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typocaption'] .icon,
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon {
height: var(--layout-xxxx-small);
vertical-align: middle;
width: var(--layout-xxxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.cards.vcard .vcheader .vctext [data-style='typocaption'] .icon[dir='ltr'],
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon[dir='ltr'] {
margin-right: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typocaption'] .icon[dir='rtl'],
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon[dir='rtl'] {
margin-left: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typocaption'] .icon svg,
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon svg {
fill: var(--color-primary-icon-base);
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon.last[dir='ltr'] {
margin-left: var(--layout-base);
margin-right: var(--layout-0);
}
.cards.vcard .vcheader .vctext [data-style='typospecials'] .icon.last[dir='rtl'] {
margin-left: var(--layout-0);
margin-right: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typospecials'].error {
color: var(--color-alternative-error-base);
/* Tooltip: Typography: Start */
/* Tooltip: Typography: End */
}
.cards.vcard .vcheader .vctext [data-style='typospecials'].error .tooltip {
color: var(--color-primary-text-base);
}
.cards.vcard .vcheader .vctext [data-style='typotitle3'] .icon {
height: var(--layout-xxx-small);
vertical-align: middle;
width: var(--layout-xxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
.cards.vcard .vcheader .vctext [data-style='typotitle3'] .icon[dir='ltr'] {
margin-left: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typotitle3'] .icon[dir='rtl'] {
margin-right: var(--layout-base);
}
.cards.vcard .vcheader .vctext [data-style='typotitle3'] .icon svg {
fill: var(--color-primary-icon-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
/* Text: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Header: Start */
.cards.vcard .vcheader {
padding: var(--layout-0) var(--layout-0) var(--layout-xxx-small);
position: relative;
/* Avatar: Start */
/* Avatar: End */
/* Tag Content: Start */
/* Tag Content: End */
}
.cards.vcard .vcheader:last-child {
padding-bottom: var(--layout-xxxx-small);
}
.cards.vcard .vcheader .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--v-card-icon-shadow-rgba-color-r), var(--v-card-icon-shadow-rgba-color-g), var(--v-card-icon-shadow-rgba-color-b), var(--v-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
position: absolute;
top: var(--layout-xx-large);
/* stylelint-disable-line */
/* Direction: Start */
/* Direction: End */
}
.cards.vcard .vcheader .avatar[dir='ltr'] {
left: var(--layout-xxxx-small);
}
.cards.vcard .vcheader .avatar[dir='rtl'] {
right: var(--layout-xxxx-small);
}
.cards.vcard .vcheader .vctagcontent {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
justify-content: flex-end;
position: absolute;
bottom: var(--layout-base);
/* stylelint-disable-line */
/* Direction: Start */
/* Direction: End */
}
.cards.vcard .vcheader .vctagcontent[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.cards.vcard .vcheader .vctagcontent[dir='rtl'] {
left: var(--layout-xxxx-small);
}
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Only Text: Start */
.cards.vcard.ot {
padding-bottom: var(--layout-xxxx-small);
/* DropDown: Start */
/* DropDown: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Header: End */
}
.cards.vcard.ot .iconbutton.dropdown {
box-shadow: none;
}
.cards.vcard.ot .vcfooterot {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Button: Outline: Start */
/* Button: Outline: End */
}
.cards.vcard.ot .vcfooterot .outline {
width: var(--percentage-100);
}
.cards.vcard.ot .vcheaderot {
align-items: flex-start;
gap: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
/* Direction: Start */
/* Direction: End */
/* Tag: Start */
/* Tag: End */
/* Text: Start */
/* Text: End */
}
.cards.vcard.ot .vcheaderot .avatar {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--v-card-icon-shadow-rgba-color-r), var(--v-card-icon-shadow-rgba-color-g), var(--v-card-icon-shadow-rgba-color-b), var(--v-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
.cards.vcard.ot .vcheaderot[dir='ltr'] {
padding-right: var(--layout-xxxx-small);
}
.cards.vcard.ot .vcheaderot[dir='rtl'] {
padding-left: var(--layout-xxxx-small);
}
.cards.vcard.ot .vcheaderot .badge {
align-self: flex-start;
}
.cards.vcard.ot .vcheaderot .vctext {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--layout-half);
/* Typography: Start */
/* Container: Start */
/* Container: End */
/* Specials: Start */
/* Specials: End */
/* Typography: End */
}
.cards.vcard.ot .vcheaderot .vctext [data-style='typocontainer'] {
gap: var(--layout-xxxxx-small);
/* Title: Start */
/* Title: End */
}
.cards.vcard.ot .vcheaderot .vctext [data-style='typocontainer'] [data-style='typotitle1'] {
flex: 1;
}
.cards.vcard.ot .vcheaderot .vctext [data-style='typospecials'] {
width: var(--percentage-100);
}
/* Only Text: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.vcard {
--v-card-footer-avatar-negative-margin: -0.75rem;
/* -12px */
--v-card-footer-icon-height-tooltip: 1.375rem;
/* 22px */
--v-card-header-background-height: 5.5rem;
/* 88px */
--v-card-icon-shadow-rgba-color-a: 0.4;
--v-card-icon-shadow-rgba-color-b: 135;
--v-card-icon-shadow-rgba-color-g: 125;
--v-card-icon-shadow-rgba-color-r: 96;
--v-card-max-width: 20rem;
/* 320px */
--v-card-min-width: 18.5rem;
/* 296px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Cards: vCard: Start */
.cards.vcard {
max-width: var(--v-card-max-width);
min-width: var(--v-card-min-width);
overflow: visible;
position: relative;
/* Inside: Start */
/* Inside: End */
/* DropDown: Start */
/* DropDown: End */
/* States: Hover: Start */
/* States: Hover: End */
}
.cards.vcard .cinside.vcinside {
height: var(--percentage-100);
justify-content: space-between;
width: var(--percentage-100);
}
.cards.vcard .iconbutton.dropdown {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--v-card-icon-shadow-rgba-color-r), var(--v-card-icon-shadow-rgba-color-g), var(--v-card-icon-shadow-rgba-color-b), var(--v-card-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
transition: opacity var(--time-commons-base) ease;
background-color: var(--color-neutrals-white);
border: solid var(--layout-border) var(--color-primary-border-light);
border-radius: var(--layout-base);
opacity: var(--alpha-0);
pointer-events: none;
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
z-index: 2;
/* Direction: Start */
/* Direction: End */
}
.cards.vcard .iconbutton.dropdown[dir='ltr'] {
right: var(--layout-xxxx-small);
}
.cards.vcard .iconbutton.dropdown[dir='rtl'] {
left: var(--layout-xxxx-small);
}
.cards.vcard:hover .iconbutton.dropdown {
opacity: var(--alpha-100);
pointer-events: all;
}
/* Cards: vCard: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.cards {
--card-collection-max-height: 15rem;
/* 240px */
--card-comments-form-input-max-width: 12.5rem;
/* 200px */
--card-comments-form-input-min-width: 7.5rem;
/* 120px */
--card-item-body-padding: 0.375rem;
/* 6px */
--card-item-vertical-height: 15.75rem;
/* 252px */
--card-item-vertical-width: 12rem;
/* 192px */
--card-poll-min-width: 18.5rem;
/* 296px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* BORRAR */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Upload File: Image: Start */
.uploadfile.upimage .fieldimage + .cards.fileurl {
min-width: var(--percentage-100);
/* Actions: Action: Start */
/* Actions: Action: End */
}
.uploadfile.upimage .fieldimage + .cards.fileurl .actions .action {
height: var(--layout-xxx-medium);
}
/* Upload File: Image: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Text: Avatar: Container: DropDown: Start */
.herobanner .text .avatarcontainer .dropdown {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--hero-banner-shadow-rgba-color-r), var(--hero-banner-shadow-rgba-color-g), var(--hero-banner-shadow-rgba-color-b), var(--hero-banner-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border: solid var(--layout-half) var(--color-primary-border-light);
border-radius: var(--layout-xxxx-medium);
position: absolute;
bottom: var(--layout-0);
/* stylelint-disable-line */
/* Direction: Start */
/* Direction: End */
}
.herobanner .text .avatarcontainer .dropdown[dir='ltr'] {
right: var(--layout-0);
}
.herobanner .text .avatarcontainer .dropdown[dir='rtl'] {
left: var(--layout-0);
}
/* Text: Avatar: Container: DropDown: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.herobanner {
--hero-banner-shadow-rgba-color-a: 0.4;
--hero-banner-shadow-rgba-color-b: 135;
--hero-banner-shadow-rgba-color-g: 125;
--hero-banner-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Inline: Start */
.cards.fcbox {
max-width: var(--percentage-100);
/* Footer: Start */
/* Footer: End */
/* Header: Left: Start */
/* Header: Left: End */
}
.cards.fcbox .fcbfooter {
align-items: center;
background-color: var(--color-neutrals-white);
display: flex;
flex-flow: row wrap;
min-height: var(--layout-medium);
overflow: visible;
}
.cards.fcbox .fcbheader .fcbhleft {
align-items: center;
display: flex;
flex: 1;
gap: var(--layout-xxxxx-small);
}
/* Inline: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Platform: End */
/* Product: Start */
/* Import: Start */
/* Alert: Start */
[part='account'] .alert {
margin-bottom: var(--layout-xxx-small);
max-width: var(--percentage-100);
}
/* Alert: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Content: Start */
[part='account'] {
background-color: var(--color-secondary-modal-base);
/* Article: Start */
/* Article: End */
/* SignIn: Start */
/* SignIn: End */
}
[part='account'] article {
overflow: visible;
position: relative;
}
[part='account'] .signin article:nth-child(2) {
align-items: center;
display: flex;
justify-content: center;
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Footer: Start */
[part='account'] .signin footer {
position: absolute;
left: var(--percentage-50);
/* stylelint-disable-line */
transform: translateX(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
bottom: var(--layout-xxx-small);
width: var(--percentage-100);
/* Text: Start */
/* Text: End */
}
[part='account'] .signin footer [data-style='typobody'] {
display: flex;
justify-content: center;
width: var(--percentage-100);
/* Button: Default: Start */
/* Button: Default: End */
/* LinkTo: Start */
/* LinkTo: End */
}
[part='account'] .signin footer [data-style='typobody'] .default {
font-size: var(--font-x-medium-size);
}
[part='account'] .signin footer [data-style='typobody'] .link {
line-height: var(--sign-up-footer-link-line-height);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
/* Footer: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* FormCard: Start */
[part='account'] .formcard {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--formcard-shadow-rgba-color-r), var(--formcard-shadow-rgba-color-g), var(--formcard-shadow-rgba-color-b), var(--formcard-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
margin-bottom: var(--layout-xxx-small);
margin-top: var(--layout-xxx-small);
padding: var(--layout-xxxx-small);
/* Inside: Start */
/* Field Button: Start */
/* Field Button: End */
/* Qr: Start */
/* Qr: End */
/* Typography: Header: Start */
/* Typography: Header: End */
/* Inside: End */
}
[part='account'] .formcard .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='account'] .formcard .qr {
background-color: var(--color-secondary-modal-base);
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
height: var(--qr-code-size);
padding: var(--layout-xxxxx-small);
position: relative;
width: var(--qr-code-size);
/* Field: Start */
/* Field: End */
}
[part='account'] .formcard .qr .field {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
transition: background-color var(--time-commons-base) ease;
background-color: var(--color-primary-primary-base);
border-radius: var(--qr-code-retry);
color: var(--color-neutrals-white);
cursor: pointer;
height: var(--qr-code-retry);
padding: var(--layout-xx-small);
text-align: center;
width: var(--qr-code-retry);
/* States: Hover: Start */
/* States: Hover: End */
/* IconButton: Start */
/* IconButton: End */
}
[part='account'] .formcard .qr .field:hover {
background-color: var(--color-primary-primary-dark);
}
[part='account'] .formcard .qr .field button.iconbutton {
margin-bottom: var(--layout-xxx-small);
margin-left: auto;
margin-right: auto;
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
[part='account'] .formcard .qr .field button.iconbutton svg,
[part='account'] .formcard .qr .field button.iconbutton:hover svg {
fill: var(--color-neutrals-white);
}
[part='account'] .formcard [data-style='typoheader'],
[part='account'] .formcard [data-style='typoheader'] + [data-style='typobody'] {
margin-bottom: var(--layout-xxxx-small);
}
/* FormCard: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='account'] .navigationbar {
padding-top: var(--navigation-bar-padding-top);
/* Body: Start */
/* Body: End */
/* Navigation: Start */
/* Navigation: End */
}
[part='account'] .navigationbar .body {
padding: var(--layout-half);
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Start */
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: End */
}
[part='account'] .navigationbar .body::-webkit-scrollbar,
[part='account'] .navigationbar .body::-webkit-scrollbar-track,
[part='account'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='account'] .navigationbar .body::-webkit-scrollbar-track,
[part='account'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='account'] .navigationbar .body:hover::-webkit-scrollbar,
[part='account'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='account'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='account'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='account'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
[part='account'] .navigationbar .navigation:first-child {
overflow: visible;
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
.navigationbar {
--navigation-bar-padding-top: 0.875rem;
/* 14px */
--navigation-body-iconbutton-position-top: 0.375rem;
/* 6px */
--navigation-box-shadow-rgba-color-a: 0.4;
--navigation-box-shadow-rgba-color-b: 135;
--navigation-box-shadow-rgba-color-g: 125;
--navigation-box-shadow-rgba-color-r: 96;
--navigation-box-size: 6.25rem;
/* 100px; */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='account'] {
--formcard-shadow-rgba-color-a: 0.4;
--formcard-shadow-rgba-color-b: 135;
--formcard-shadow-rgba-color-g: 125;
--formcard-shadow-rgba-color-r: 96;
--qr-code-retry: 8.25rem;
/* 132px */
--qr-code-size: 17rem;
/* 272px */
--sign-up-footer-link-line-height: 2.25rem;
/* 36px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Conversations: Start */
[part='admin'] .iaassistantconversations {
display: flex;
flex-flow: row wrap;
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
[part='admin'] .iaassistantconversations .iaacileft {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Search: Start */
/* Search: End */
/* List: Container: Start */
/* List: Container: End */
}
[part='admin'] .iaassistantconversations .iaacileft .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
margin-bottom: var(--layout-0);
/* Inside: Start */
/* Field Button: Start */
/* Field Button: End */
/* Inside: End */
}
[part='admin'] .iaassistantconversations .iaacileft .search fieldset:nth-child(1) {
flex: 1;
}
[part='admin'] .iaassistantconversations .iaacileft .search .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .iaassistantconversations .iaacileft .listcontainer {
border-top: solid var(--layout-border) var(--color-primary-border-base);
width: var(--percentage-100);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='admin'] .iaassistantconversations .iaacileft .listcontainer [data-style='typocontainer'] {
align-items: flex-end;
display: flex;
flex-direction: column;
/* Icon: Start */
/* Icon: End */
}
[part='admin'] .iaassistantconversations .iaacileft .listcontainer [data-style='typocontainer'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .iaassistantconversations .iaacileft .listcontainer [data-style='typocontainer'] .icon svg {
fill: var(--color-alternative-warning-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='admin'] .iaassistantconversations .iaaciright {
align-items: flex-start;
border-left: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex: 1;
flex-direction: column;
/* List: Container: Start */
/* List: Container: End */
/* Chat: Start */
/* Chat: End */
}
[part='admin'] .iaassistantconversations .iaaciright .listcontainer {
align-items: flex-start;
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
width: var(--percentage-100);
}
[part='admin'] .iaassistantconversations .iaaciright .cards.fcbox {
border: none;
border-radius: var(--layout-0);
flex: 1;
}
/* Conversations: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Detail: Start */
[part='admin'] .modalddetailticket {
width: var(--viewport-width-100);
/* Body: Start */
/* Container: Start */
/* Container: End */
/* Body: End */
}
[part='admin'] .modalddetailticket .mbcontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
height: var(--percentage-100);
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft {
padding-left: var(--layout-xx-small);
width: calc(var(--percentage-100) - calc(var(--modal-detail-ticket-width) + var(--layout-xxx-small)));
/* Cards: Start */
/* Activity: Inside: Body: Start */
/* Activity: Inside: Body: End */
/* Card: Detail: Header: Start */
/* Card: Detail: Header: End */
/* Cards: End */
/* Tabs: Container Area: Start */
/* Tabs: Container Area: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.activity .cinside .cbody {
max-height: var(--modal-detail-activity-history-max-height);
overflow-y: auto;
padding: var(--layout-xxxx-small);
/* Typography: Start */
/* Typography: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.activity .cinside .cbody [data-style='typocontainer'] {
gap: var(--layout-base);
justify-content: space-between;
padding-bottom: var(--layout-base);
padding-top: var(--layout-base);
/* Caption: Start */
/* Caption: End */
/* Container: Start */
/* Container: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.activity .cinside .cbody [data-style='typocontainer'] strong[data-style='typocaption'] {
color: var(--color-primary-text-dark);
font-weight: var(--font-small-weight);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.activity .cinside .cbody [data-style='typocontainer'] [data-style='typocontainer'] {
max-width: calc(var(--percentage-100) - var(--modal-detail-ticket-activity-time-width));
padding-bottom: var(--layout-0);
padding-right: var(--layout-xxx-small);
padding-top: var(--layout-0);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.dcdetail.cai .cheader {
border-bottom: none;
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .cards.dcdetail .cheader {
gap: var(--layout-base);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .tabs + .containerarea {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
/* Collapsable Vertical: Start */
/* Collapsable Vertical: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtleft .tabs + .containerarea[data-animation='collapsable-vertical'] {
max-height: inherit;
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright {
padding-right: var(--layout-xx-small);
width: var(--modal-detail-ticket-width);
/* Card: Detail: Body: Start */
/* Card: Detail: Body: End */
/* Field Button: Start */
/* Field Button: End */
/* Popup: Field Button: Start */
/* Popup: Field Button: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail .cbody {
overflow: visible;
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody {
padding: var(--layout-0);
/* List: Start */
/* List: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody .listcontainer {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
/* Column: Start */
/* Column: End */
/* Item: Start */
/* Item: End */
/* Link: Start */
/* Link: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody .listcontainer.column {
border-bottom: none;
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody .listcontainer.column .listitem {
border-bottom: none;
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody .listcontainer.first .listitem {
align-items: center;
width: var(--percentage-100);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .dcdetail.last .cbody .listcontainer .link {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
right: var(--layout-xxxx-small);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .modalddetailticket .mbcontainer .mdtright .popup .fieldbutton {
justify-content: flex-end;
}
/* Modal: Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Filter: Inside: Start */
[part='admin'] .modaliaassistantfilter .containerarea.dddpcalendar {
width: auto;
}
/* Modal: Filter: Inside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Questions: Start */
[part='admin'] .iaassistantquestions {
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* Title Bar: Start */
/* Title Bar: End */
}
[part='admin'] .iaassistantquestions .inside {
margin-left: auto;
margin-right: auto;
padding-bottom: var(--layout-medium);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Accordion: Start */
/* Accordion: End */
/* Search: Start */
/* Search: End */
}
[part='admin'] .iaassistantquestions .inside .accordion {
border-radius: var(--layout-0);
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='admin'] .iaassistantquestions .inside .searchcontainer,
[part='admin'] .iaassistantquestions .inside [data-style='typotitle1'].first {
margin-bottom: var(--layout-x-small);
}
[part='admin'] .iaassistantquestions .inside .searchcontainer {
overflow: visible;
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .iaassistantquestions .inside .searchcontainer fieldset:first-child {
min-width: var(--ia-search-first-field-min-width);
}
[part='admin'] .iaassistantquestions .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Questions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='admin'] .iaassistantquestions .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tickets: Start */
[part='admin'] .iaassistanttickets {
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* Title Bar: Start */
/* Title Bar: End */
}
[part='admin'] .iaassistanttickets .inside {
margin-left: auto;
margin-right: auto;
/* Calendar: Start */
/* Calendar: End */
/* Graphics: Start */
/* Graphics: End */
/* Pagination: Start */
/* Pagination: End */
/* Search: Start */
/* Search: End */
/* Table: Start */
/* Head: Start */
/* Head: End */
/* Avatar: Start */
/* Icon: Start */
/* Icon: End */
/* States: Hover: Start */
/* States: Hover: End */
/* Avatar: End */
/* Table: End */
}
[part='admin'] .iaassistanttickets .inside .iatfcalendar {
display: flex;
flex-flow: row wrap;
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .iaassistanttickets .inside .iatfcalendar fieldset {
margin-left: auto;
}
[part='admin'] .iaassistanttickets .inside .iatfcalendar .containercalendar {
min-width: var(--form-calendar-size-large-min-width);
}
[part='admin'] .iaassistanttickets .inside .iatfcalendar .containercalendar .select ~ .containerarea.dddpcalendar {
width: max-content;
}
[part='admin'] .iaassistanttickets .inside .iagraphics {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: var(--layout-xxxx-small);
margin-bottom: var(--layout-x-small);
/* Inside: Start */
/* AI: Start */
/* Icon: Start */
/* Icon: End */
/* Typography: Body: Start */
/* Typography: Body: End */
/* AI: End */
/* First: Number: Start */
/* First: Number: End */
/* Last: Number: Start */
/* Last: Number: End */
/* Second: Number: Start */
/* Second: Number: End */
/* Inside: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Number: Start */
/* Number: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgai,
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgfirst,
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgsecond,
[part='admin'] .iaassistanttickets .inside .iagraphics .ctglast {
display: flex;
flex-direction: column;
gap: var(--layout-half);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgai .ctgnumber {
color: var(--color-alternative-ai-dark);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgai .icon {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgai .icon svg {
fill: var(--color-alternative-ai-base);
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgai [data-style='typobody'] {
color: var(--color-alternative-ai-base);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgfirst .ctgnumber {
color: var(--color-alternative-focus-dark);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgsecond .ctgnumber {
color: var(--color-alternative-focus-base);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctglast .ctgnumber {
color: var(--color-primary-icon-base);
}
[part='admin'] .iaassistanttickets .inside .iagraphics [data-style='typobody'] {
align-items: center;
display: flex;
gap: var(--layout-base);
}
[part='admin'] .iaassistanttickets .inside .iagraphics .ctgnumber {
font-size: var(--layout-xx-medium);
font-weight: var(--font-xx-large-weight);
line-height: var(--layout-x-medium);
}
[part='admin'] .iaassistanttickets .inside .iagraphics [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
width: var(--percentage-100);
}
[part='admin'] .iaassistanttickets .inside .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
[part='admin'] .iaassistanttickets .inside .searchcontainer {
margin-bottom: var(--layout-x-small);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(1),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(1) {
width: var(--percentage-20);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(2),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(2) {
width: var(--percentage-20);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(3),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(3) {
width: var(--percentage-16);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(4),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(4) {
width: var(--percentage-10);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(5),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(5) {
width: var(--percentage-18);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(6),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(6) {
width: var(--percentage-12);
}
[part='admin'] .iaassistanttickets .inside .table .th:nth-child(7),
[part='admin'] .iaassistanttickets .inside .table .td:nth-child(7) {
width: var(--percentage-4);
}
[part='admin'] .iaassistanttickets .inside .table .avatar[data-shape='square'] {
border-radius: var(--layout-xxx-medium);
}
[part='admin'] .iaassistanttickets .inside .table .tbody .tr[data-type="button"]:hover .avatar[data-shape='square'] .icon svg {
fill: var(--color-neutrals-white);
}
[part='admin'] .iaassistanttickets .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Tickets: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Tickets: Graphics: Start */
[part='admin'] .iaassistanttickets .iagraphics {
--ia-cards-height: 8.5rem;
/* 136px */
--ia-cards-numbers-max-min-width: 13rem;
/* 208px */
--ia-cards-performance-max-min-width: 34.25rem;
/* 548px */
--ia-cards-tickets-max-min-width: 17rem;
/* 272px */
--ia-grahpics-color-references-no: #ff8800;
--ia-grahpics-color-references-yes: #bce1ff;
--ia-graphics-number-size: var(--layout-xx-medium);
/* 40px */
--ia-graphics-graph-container-width: 8.625rem;
/* 138px */
}
/* Tickets: Graphics: End */
/* Modal: Detail Ticket: Start */
[part='admin'] .modalddetailticket {
--modal-detail-activity-history-max-height: 24rem;
/* 384px */
--modal-detail-chat-box-body-height: 28.875rem;
/* 462px */
--modal-detail-ticket-activity-time-width: 7rem;
/* 112px */
--modal-detail-ticket-width: 37.5rem;
/* 600px */
}
/* Modal: Detail Ticket: End */
/* Questions: Start */
[part='admin'] .iaassistantquestions {
--ia-search-first-field-min-width: 20rem;
/* 320px */
}
/* Questions: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Alert: Start */
[part='admin'] .alert {
margin-bottom: var(--layout-xxx-small);
/*DEPRECATED WHEN OLD CSS DIE*/
max-width: var(--percentage-100);
}
/* Alert: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Settings: Start */
[part='admin'] .commonsettings {
overflow: visible;
/* Alert: Start */
/* Alert: End */
/* Form: Settings: Start */
/* Form: Settings: End */
}
[part='admin'] .commonsettings .alert,
[part='admin'] .commonsettings .titlebar {
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .commonsettings .alert {
align-items: center;
}
[part='admin'] .commonsettings .formsettings {
margin-left: auto;
margin-right: auto;
max-width: var(--commons-settings-max-width);
/* Inside: Last: Start */
/* Inside: Last: End */
}
[part='admin'] .commonsettings .formsettings .last p {
margin-bottom: var(--layout-xxx-small);
}
/* Settings: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Commons: Settings: Start */
[part='admin'] .commonsettings {
--commons-settings-max-width: 41rem;
/* 656px */
}
/* Variables: Commons: Settings: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Activity: Start */
[part='admin'] .generalactivityhome .containeractivity {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Inside: Start */
/* Inside: End */
/* Title Bar: Start */
/* Title Bar: End */
}
[part='admin'] .generalactivityhome .containeractivity .inside {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Cards: End */
}
[part='admin'] .generalactivityhome .containeractivity .inside .pcapgahaicards {
flex: 1;
gap: var(--layout-xxxx-small);
min-width: var(--percentage-25);
padding: var(--layout-xxxx-small);
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
[part='admin'] .generalactivityhome .containeractivity .inside .pcapgahaicards .cbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
}
[part='admin'] .generalactivityhome .containeractivity .inside .pcapgahaicards .cheader {
padding: var(--layout-0);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='admin'] .generalactivityhome .containeractivity .inside .pcapgahaicards .cheader [data-style='typocontainer'] {
gap: var(--layout-xxxx-small);
/* Buttons: Start */
/* Buttons: End */
}
[part='admin'] .generalactivityhome .containeractivity .inside .pcapgahaicards .cheader [data-style='typocontainer'] [data-style='typobutton'] {
color: var(--color-primary-text-light);
}
[part='admin'] .generalactivityhome .containeractivity .titlebar {
align-items: flex-end;
/* Right: Typography: Body: Start */
/* Right: Typography: Body: End */
}
[part='admin'] .generalactivityhome .containeractivity .titlebar .tbright [data-style='typobody'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
/* Icon: Start */
/* Icon: End */
}
[part='admin'] .generalactivityhome .containeractivity .titlebar .tbright [data-style='typobody'] .icon {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .generalactivityhome .containeractivity .titlebar .tbright [data-style='typobody'] .icon svg {
height: var(--layout-xx-small);
width: var(--layout-xx-small);
}
/* Activity: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Features: Start */
[part='admin'] .generalactivityhome .containerfeatures {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Alert: Start */
/* DEPRECATED WHEN OLD CSS DIE */
/* Alert: End */
/* DEPRECATED WHEN OLD CSS DIE */
/* List: Start */
/* List: End */
}
[part='admin'] .generalactivityhome .containerfeatures .alert {
margin-bottom: var(--layout-0);
}
[part='admin'] .generalactivityhome .containerfeatures .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .generalactivityhome .containerfeatures .listcontainer .listitem {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='admin'] .generalactivityhome .containerfeatures .listcontainer .listitem [data-style='typotitle1'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
/* Features: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Metrics: Start */
[part='admin'] .generalactivityhome .containermetrics {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside {
display: grid;
grid-template-columns: repeat(3, auto);
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Cards: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards {
flex: 1;
gap: var(--layout-xx-small);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody {
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: var(--layout-xxxx-small);
overflow: visible;
/* Typography: Start */
/* Button: End */
/* Text: Start */
/* Text: End */
/* Typography: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'] {
align-items: center;
display: flex;
/* Icon: Start */
/* Icon: End */
/* States: Start */
/* Error: Start */
/* Error: End */
/* Success: Start */
/* Success: End */
/* States: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'] .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'].error {
color: var(--color-alternative-error-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'].error .icon svg {
fill: var(--color-alternative-error-dark);
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'].success {
color: var(--color-alternative-success-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typobutton'].success .icon svg {
fill: var(--color-alternative-success-base);
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cbody [data-style='typoheadline'] {
color: var(--color-primary-text-dark);
font-weight: var(--font-x-medium-weight);
}
[part='admin'] .generalactivityhome .containermetrics .inside .pcapgahmcards .cheader {
align-items: center;
justify-content: space-between;
min-height: var(--layout-xxx-small);
padding: var(--layout-0);
}
/* Metrics: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* General Activity: Start */
[part='admin'] .generalactivityhome {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
}
/* General Activity: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Layout: Start */
[part='admin'] .layout.center {
overflow: visible;
padding-right: var(--layout-xx-small);
width: 100%;
}
/* Layout: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Balance: Start */
[part='admin'] .leavepoliciesautomaticaccrual,
[part='admin'] .leavepoliciesbulkhistory {
flex-direction: column;
overflow: visible;
/* BreadCrumb: Start */
/* BreadCrumb: End */
/* Pagination: Start */
/* Pagination: End */
/* Table: Container: start */
/* Table: Container: End */
/* Tabs: Start */
/* Tabs: End */
}
[part='admin'] .leavepoliciesautomaticaccrual .breadcrumb,
[part='admin'] .leavepoliciesbulkhistory .breadcrumb {
padding: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesautomaticaccrual .pagination,
[part='admin'] .leavepoliciesbulkhistory .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesautomaticaccrual .tablecontainer,
[part='admin'] .leavepoliciesbulkhistory .tablecontainer {
display: flex;
flex-direction: column;
}
[part='admin'] .leavepoliciesautomaticaccrual .tabs,
[part='admin'] .leavepoliciesbulkhistory .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
margin-bottom: var(--layout-xxx-small);
}
/* Detail: Balance: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Home: Start */
[part='admin'] .leavepolicieshome {
overflow: visible;
/* Inside: Accordion: Start */
/* Inside: Accordion: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .leavepolicieshome .inside .accordion {
margin-bottom: var(--layout-xxx-small);
/* Body: Start */
/* Body: End */
}
[part='admin'] .leavepolicieshome .inside .accordion .abody {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, auto);
overflow: visible;
/* Responsive: Start */
/* Responsive: End */
}
@media (min-width: 1024px) {
[part='admin'] .leavepolicieshome .inside .accordion .abody {
grid-template-columns: repeat(2, auto);
justify-content: flex-start;
}
}
@media (min-width: 1366px) {
[part='admin'] .leavepolicieshome .inside .accordion .abody {
grid-template-columns: repeat(3, auto);
}
}
@media (min-width: 1920px) {
[part='admin'] .leavepolicieshome .inside .accordion .abody {
grid-template-columns: repeat(5, auto);
}
}
[part='admin'] .leavepolicieshome .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Balance: Start */
[part='admin'] .leavepoliciesdetail .inside.lpdibalance {
flex-direction: column;
overflow: visible;
/* Alert: Start */
/* Alert: End */
/* Cards: Start */
/* Cards: End */
/* Pagination: Start */
/* Pagination: End */
/* Search: Start */
/* Search: End */
/* Table: Thead: Start */
/* Table: Thead: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .alert {
margin-bottom: var(--layout-0);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .alert[data-style='default'] {
background-color: var(--color-neutrals-blue-grey-2);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext {
padding-bottom: var(--layout-xxxx-small);
/* Divider: Start */
/* Divider: End */
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .divider {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside {
gap: var(--layout-xxxxx-small);
/* Body: Start */
/* Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody {
align-items: flex-end;
display: flex;
flex-flow: row wrap;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdnileft,
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdniright {
display: flex;
flex: 1;
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdnileft {
flex-direction: column;
/* Typography: Body: Start */
/* Typography: Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdnileft [data-style='typobody']:last-child {
color: var(--color-primary-text-light);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdniright {
flex-flow: row wrap;
gap: var(--layout-base);
justify-content: flex-end;
/* Tag: Start */
/* Tag: End */
/* Typography: Body: Start */
/* Typography: Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdniright .badge[data-shape='square'] {
text-align: left;
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .lpdbnext .cinside .cbody .lpdniright [data-style='typobody'] {
color: var(--color-primary-text-light);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .searchcontainer {
justify-content: space-between;
overflow: visible;
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .searchcontainer .last {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
/* Field Button: Start */
/* Field Button: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .searchcontainer .last .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .table .thead .th,
[part='admin'] .leavepoliciesdetail .inside.lpdibalance .table .tbody .td {
width: var(--percentage-20);
}
/* Detail: Balance: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Detail: General: Start */
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral {
align-items: flex-start;
flex-flow: row wrap;
/* Left: Start */
/* Left: End */
/* Aside: Start */
/* Approval: Body: Start */
/* Approval: Body: End */
/* General: List: Container: Start */
/* General: List: Container: End */
/* Aside: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Elegibility: Start */
/* Elegibility: End */
/* General: Body: Start */
/* General: Body: End */
/* Request: Items: Start */
/* Request: Items: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard {
margin-bottom: var(--layout-0);
/* Body: Start */
/* Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* List: Start */
/* List: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody .listcontainer {
background-color: var(--color-secondary-modal-base);
border-radius: var(--layout-base);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody .listcontainer .listitem {
border: none;
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody .listcontainer .listitem.lctitle {
align-items: center;
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody .listcontainer .listitem .linside {
gap: var(--layout-base);
padding: var(--layout-0);
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilecard .cbody .listcontainer .listitem .linside [data-style='typotitle3'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody {
align-items: flex-start;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody .avatar[data-shape='square'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--leave-policies-icon-shadow-rgba-color-r), var(--leave-policies-icon-shadow-rgba-color-g), var(--leave-policies-icon-shadow-rgba-color-b), var(--leave-policies-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Caption: Start */
/* Caption: End */
/* Container: Start */
/* Container: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody [data-style='typocontainer'] [data-style='typobutton'] {
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody [data-style='typocontainer'] [data-style='typobutton'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody [data-style='typocontainer'] [data-style='typobutton'] .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilcard .cbody [data-style='typocontainer'] [data-style='typocontainer'] {
gap: var(--layout-0);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilrcard .dcbody .dcitems {
border: none;
gap: var(--layout-0);
/* Typography: Body: Start */
/* Typography: Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdileft .lpdadgilrcard .dcbody .dcitems [data-style='typobody'] {
padding-left: var(--layout-xxx-medium);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdiright {
max-width: var(--leave-policies-detail-aside-max-width);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadaacard .asdbody {
display: flex;
flex-direction: column;
gap: var(--layout-base);
padding: var(--layout-xxxx-small);
/* Avatar Container: Start */
/* Avatar Container: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadaacard .asdbody .avatarcontainer {
margin-top: var(--layout-xxxxx-small);
text-align: left;
/* Avatar: Start b*/
/* Avatar: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadaacard .asdbody .avatarcontainer .avatar {
border: solid var(--layout-border) var(--color-primary-border-light);
margin-left: var(--leave-policies-detail-aside-approval-avatar-margin-left);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadgacard .listcontainer {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadgacard .listcontainer .listitem {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
/* Typography: Body: Start */
/* Typography: Body: End */
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral .lpdadgacard .listcontainer .listitem .ltext[data-style='typobody'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
/* Detail: General: Start */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Movement Detail: Start */
[part='admin'] .leavepoliciesmovementdetail {
overflow: visible;
/* BreadCrumb: Start */
/* BreadCrumb: End */
/* Card: User Detail: Body: Start */
/* Card: User Detail: Body: End */
/* Inside: Start */
/* Inside: End */
/* Pagination: Start */
/* Pagination: End */
/* Table: Container: start */
/* Table: Container: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .leavepoliciesmovementdetail .breadcrumb {
padding: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesmovementdetail .dcdetail.cdudcard .dcbody {
display: flex;
flex-direction: column;
padding: var(--layout-0);
/* List: Start */
/* Column: Start */
/* Column: End */
/* First: Start */
/* First: End */
/* List: End */
}
[part='admin'] .leavepoliciesmovementdetail .dcdetail.cdudcard .dcbody .listcontainer.column {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* List Item: Start */
/* List item: End */
}
[part='admin'] .leavepoliciesmovementdetail .dcdetail.cdudcard .dcbody .listcontainer.column .listitem {
border-bottom: none;
flex: 1;
width: auto;
}
[part='admin'] .leavepoliciesmovementdetail .dcdetail.cdudcard .dcbody .listcontainer.first {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
}
[part='admin'] .leavepoliciesmovementdetail .inside {
display: flex;
flex-direction: column;
margin-bottom: var(--layout-x-small);
margin-left: auto;
margin-right: auto;
gap: var(--layout-xxx-small);
}
[part='admin'] .leavepoliciesmovementdetail .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesmovementdetail .tablecontainer {
display: flex;
flex-direction: column;
}
[part='admin'] .leavepoliciesmovementdetail .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Movement Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Detail: Start */
[part='admin'] .leavepoliciesdetail {
overflow: visible;
padding-bottom: var(--layout-xxx-small);
/* BreadCrumb: Start */
/* BreadCrumb: End */
/* Inside: Start */
/* Inside: End */
/* Search: Container: Start */
/* Search: Container: End */
/* Tabs: Start */
/* Tabs: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .leavepoliciesdetail .breadcrumb {
padding: var(--layout-xxxx-small);
}
[part='admin'] .leavepoliciesdetail .inside.lpdigeneral,
[part='admin'] .leavepoliciesdetail .inside.lpdibalance {
display: flex;
margin-bottom: var(--layout-x-small);
margin-left: auto;
margin-right: auto;
gap: var(--layout-xxx-small);
}
[part='admin'] .leavepoliciesdetail .searchcontainer {
margin-bottom: var(--layout-0);
}
[part='admin'] .leavepoliciesdetail .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .leavepoliciesdetail .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Home: Start */
[part='admin'] .leavepolicieshome {
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .leavepolicieshome .inside {
margin-left: auto;
margin-right: auto;
/* Alert: Start */
/* Alert: End */
/* Pagination: Start */
/* Pagination: End */
/* Select: Container: Start */
/* Select: Container: End */
/* Table: Start */
/* Avatar: Start */
/* Icon: Start */
/* Icon: End */
/* States: Hover: Start */
/* States: Hover: End */
/* Avatar: End */
/* Country: Icon: Start */
/* Country: Icon: End */
/* Thead: Start */
/* Thead: End */
/* Table: End */
}
[part='admin'] .leavepolicieshome .inside .alert {
margin-bottom: var(--layout-0);
}
[part='admin'] .leavepolicieshome .inside .alert.default {
background-color: var(--color-neutrals-blue-grey-2);
}
[part='admin'] .leavepolicieshome .inside .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
[part='admin'] .leavepolicieshome .inside .selectcontainer {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-x-small);
}
[part='admin'] .leavepolicieshome .inside .selectcontainer .field {
padding-bottom: var(--layout-0);
}
[part='admin'] .leavepolicieshome .inside .table .avatar[data-shape='square'] {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--leave-policies-icon-shadow-rgba-color-r), var(--leave-policies-icon-shadow-rgba-color-g), var(--leave-policies-icon-shadow-rgba-color-b), var(--leave-policies-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
margin-left: var(--layout-xxxx-small);
}
[part='admin'] .leavepolicieshome .inside .table .tbody .tr[data-type='button']:hover .avatar[data-shape='square'] .icon svg {
fill: var(--color-neutrals-white);
}
[part='admin'] .leavepolicieshome .inside .table .tcountry .icon {
vertical-align: middle;
}
[part='admin'] .leavepolicieshome .inside .table .thead .th:first-child,
[part='admin'] .leavepolicieshome .inside .table .tbody .td:first-child {
width: var(--percentage-60);
}
[part='admin'] .leavepolicieshome .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Bulk Upload: Body: Start */
/* Button: Start */
[part='admin'] .modalleavepoliciesbulkupload .fieldbutton {
padding-bottom: var(--layout-xxx-small);
/* Default: Start */
/* Default: End */
}
[part='admin'] .modalleavepoliciesbulkupload .fieldbutton .default {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
/* Button: End */
/* Pagination: Start */
[part='admin'] .modalleavepoliciesbulkupload .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
margin-left: var(--layout-xx-small);
margin-right: var(--layout-xx-small);
padding-top: var(--layout-xxxx-small);
}
/* Pagination: End */
/* Table: Start */
[part='admin'] .modalleavepoliciesbulkupload .table {
margin-left: var(--layout-xx-small);
margin-right: var(--layout-xx-small);
}
/* Table: End */
/* Typography: Container: Start */
[part='admin'] .modalleavepoliciesbulkupload [data-style='typocontainer'] {
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--layout-xxx-small);
}
/* Typography: Container: End */
/* Upload File: Start */
[part='admin'] .modalleavepoliciesbulkupload .uploadfile.upimage {
max-width: var(--percentage-100);
width: var(--percentage-100);
/* File & URL: Typography: Container: Start */
/* File & URL: Typography: Container: End */
/* Image: Start */
/* Image: End */
}
[part='admin'] .modalleavepoliciesbulkupload .uploadfile.upimage .fileurl [data-style='typocontainer'] {
margin-bottom: var(--layout-0);
}
[part='admin'] .modalleavepoliciesbulkupload .uploadfile.upimage .fieldimage {
width: var(--percentage-100);
}
/* Upload File: End */
/* Modal: Bulk Upload: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create Leave Policies: Start */
/* Step Container: Start */
[part='admin'] .modalcreateleavepolicies .stepcontainer {
overflow: visible;
/* Step 1: Start */
/* Typography: Container: Start */
/* Typopgrahy: Container: End */
/* Step 1: End */
/* Step 2: Start */
/* Step 2: End */
/* Step 3: Typography: Start */
/* Container: Start */
/* Container: End */
/* Title: Start */
/* Title: End */
/* Step 3: Typography: End */
/* Step 4: Inside: Start */
/* Step 4: Inside: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepone [data-style='typocontainer'],
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepone [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepone [data-style='typocontainer'] {
gap: var(--layout-xxxxx-small);
/* Title: Start */
/* Title: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepone [data-style='typocontainer'] [data-style='typotitle1'] {
margin-bottom: 0;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion {
margin-bottom: var(--layout-xxx-small);
/* Change Users: Container: Start */
/* Change Users: Container: End */
/* Column: Start */
/* Field: Start */
/* Field: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
/* Column: End */
/* Container Date: Start */
/* Container Date: End */
/* Group: Start */
/* Group: End */
/* Title: Start */
/* Title: End */
/* Multi Group: Start */
/* Multi Group: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .changeuserscontainer {
align-items: center;
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
gap: var(--layout-xxxxx-small);
height: var(--layout-xx-medium);
margin-bottom: var(--layout-x-small);
padding-bottom: var(--layout-0);
/* Typography: Start */
/* Typography: End */
/* Field Button: Start */
/* Field Button: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .changeuserscontainer [data-style='typobody'] {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .changeuserscontainer .fieldbutton {
align-items: center;
padding-bottom: var(--layout-0);
/* Change Users: Start */
/* Change Users: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .changeuserscontainer .fieldbutton.changeusers {
flex: 1;
/* Button: Default: Start */
/* Button: Default: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .changeuserscontainer .fieldbutton.changeusers .default {
align-items: flex-start;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .column.fcthree .field {
min-width: var(--percentage-30);
width: auto;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .column.fcthree [data-style='typobody'].middle {
line-height: var(--modal-create-leave-policies-step-2-line-height);
padding-bottom: var(--layout-x-small);
text-align: center;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .column.fcthree [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
width: var(--percentage-100);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
justify-content: center;
margin-bottom: var(--layout-xxx-small);
margin-left: auto;
margin-right: auto;
max-width: var(--percentage-66);
min-width: var(--percentage-66);
padding: var(--layout-xxx-small);
width: auto;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton {
padding-bottom: var(--layout-0);
/* Button: Start */
/* Button: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline {
border-color: var(--color-primary-border-base);
border-radius: var(--layout-xxx-medium);
color: var(--color-primary-text-base);
height: var(--layout-xxx-medium);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
width: var(--layout-xxx-medium);
/* States: Start */
/* Active: Start */
/* Active: End */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline[data-states='active'],
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline:hover {
border-color: var(--color-primary-link-dark);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline[data-states='active'] {
background-color: var(--color-primary-primary-base);
color: var(--color-neutrals-white);
/* Hover: Start */
/* Hover: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline[data-states='active']:hover {
color: var(--color-neutrals-white);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .containerdate .fieldbutton .outline:hover {
color: var(--color-primary-link-dark);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .abody .group {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Field: Start */
/* Field: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .abody .group .field {
min-width: var(--percentage-30);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .abody .group [data-style='typobody'] {
flex: 1;
line-height: var(--modal-create-leave-policies-step-2-line-height);
padding-bottom: var(--layout-x-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .abody .group [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
width: var(--percentage-100);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .abody [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup {
padding-left: var(--layout-xxx-small);
/* Column: Start */
/* Four: Start */
/* Four: End */
/* Column: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column {
align-items: flex-end;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
overflow: visible;
/* Field: Start */
/* Field: End */
/* Four: Start */
/* Four: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column.fcfour {
align-items: center;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column .field {
flex: 1;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column.fcfour .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column.fcfour .fieldbutton.last {
justify-content: center;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .accordion .multigroup .column.fcfour + .column.fcfour .fieldbutton {
padding-bottom: var(--layout-x-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .last {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.steptwo .last .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepthree [data-style='typocontainer'] {
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--layout-xxx-small);
/* Title: Start */
/* Title: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepthree [data-style='typocontainer'] [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepthree [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour {
display: flex;
flex-direction: column;
/* Cards: Start */
/* Cards: End */
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard {
margin-bottom: var(--layout-xxx-small);
overflow: visible;
/* Body: Start */
/* Body: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Header: End */
/* States: Start */
/* Hover: Start */
/* Hover: End */
/* States: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cbody {
overflow: visible;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Chip: Container: Start */
/* Chip: Container: End */
/* Column: Start */
/* Column: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cbody .chipcontainer {
flex-flow: row wrap;
padding-left: var(--modal-create-leave-policies-step-4-chip-container-padding-right);
padding-right: var(--layout-xxxx-large);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cbody fieldset.column .fieldbutton {
flex: 0;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cfooter {
justify-content: center;
/* Field: Button: Start */
/* Field: Button: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cfooter .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cheader {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
gap: var(--layout-xxxx-small);
/* Field: Button: Start */
/* Field: Button: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cheader .fieldbutton {
transition: opacity var(--time-commons-base) ease;
opacity: var(--layout-0);
padding-bottom: var(--layout-0);
pointer-events: none;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cheader [data-style='typocontainer'] {
align-items: flex-start;
flex: 1;
flex-direction: column;
/* Caption: Start */
/* Caption: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cheader [data-style='typocontainer'] [data-style='typocaption'],
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard .cheader [data-style='typocontainer'] [data-style='typotitle1'] {
color: var(--color-primary-text-dark);
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour .cards.lpmcpcard:hover .cheader .fieldbutton {
opacity: 1;
pointer-events: all;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour fieldset.last {
align-items: center;
display: flex;
flex-direction: column;
/* Field: Button: Start */
/* Field: Button: End */
}
[part='admin'] .modalcreateleavepolicies .stepcontainer.stepfour fieldset.last .fieldbutton {
padding-bottom: var(--layout-0);
}
/* Step Container: End */
/* Tabs: start */
[part='admin'] .modalcreateleavepolicies .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
margin-bottom: var(--layout-xxx-small);
}
/* Tabs: End */
/* Modal: Create Leave Policies: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Next Automatic Accreditation: Start */
[part='admin'] .modalnextautomaticaccreditation .mbody .lspecials {
margin-top: var(--layout-xxxxx-small);
}
/* Modal: Next Automatic Accreditation: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Upadate Balance: Body: Start */
/* Cards: Start */
[part='admin'] .modalleavepoliciesupdatebalance .cards.lpmubcard {
background-color: var(--color-neutrals-blue-grey-2);
/* Body: Start */
/* Body: End */
}
[part='admin'] .modalleavepoliciesupdatebalance .cards.lpmubcard .cbody {
padding: var(--layout-xxxx-small);
/* List: Start */
/* List: End */
}
[part='admin'] .modalleavepoliciesupdatebalance .cards.lpmubcard .cbody .listcontainer {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-medium);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .modalleavepoliciesupdatebalance .cards.lpmubcard .cbody .listcontainer .listitem {
border-bottom: none;
padding: var(--layout-0);
/* Title: Start */
/* Title: End */
}
[part='admin'] .modalleavepoliciesupdatebalance .cards.lpmubcard .cbody .listcontainer .listitem [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
}
/* Card:s End */
/* Typography: Start */
/* Container: Start */
[part='admin'] .modalleavepoliciesupdatebalance [data-style='typocontainer'] {
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--layout-xxx-small);
/* Title: Start */
/* Title: End */
}
[part='admin'] .modalleavepoliciesupdatebalance [data-style='typocontainer'] [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
}
/* Container: End */
/* Title: Start */
[part='admin'] .modalleavepoliciesupdatebalance [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
/* Title: End */
/* Typography: End */
/* Modal: Upadate Balance: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Upload History: Body: Start */
[part='admin'] .modalleavepoliciesuploadhistory .mbody {
padding-left: var(--layout-xx-small);
padding-right: var(--layout-xx-small);
/* Pagination: Start */
/* Pagination: End */
}
[part='admin'] .modalleavepoliciesuploadhistory .mbody .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-top: var(--layout-xxxx-small);
}
/* Modal: Upload History: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='admin'] .leavepoliciesdetail {
--leave-policies-detail-aside-approval-avatar-margin-left: -0.25rem;
--leave-policies-detail-aside-max-width: 20rem;
/* 320px */
--leave-policies-icon-shadow-rgba-color-a: 0.4;
--leave-policies-icon-shadow-rgba-color-b: 135;
--leave-policies-icon-shadow-rgba-color-g: 125;
--leave-policies-icon-shadow-rgba-color-r: 96;
}
[part='admin'] .leavepolicieshome {
--leave-policies-icon-shadow-rgba-color-a: 0.4;
--leave-policies-icon-shadow-rgba-color-b: 135;
--leave-policies-icon-shadow-rgba-color-g: 125;
--leave-policies-icon-shadow-rgba-color-r: 96;
}
[part='admin'] .modalcreateleavepolicies .stepcontainer {
--modal-create-leave-policies-step-2-line-height: 2.5rem;
--modal-create-leave-policies-step-4-chip-container-padding-right: 46.5%;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Manage Features: Start */
[part='admin'] .managefeatures {
overflow: visible;
/* BreadCrumb: Start */
/* BreadCrumb: End */
/* Container Features: Start */
/* Container Features: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .managefeatures .breadcrumb {
padding: var(--layout-xxxx-small);
}
[part='admin'] .managefeatures .containerfeatures {
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* List: Start */
/* List: End */
}
[part='admin'] .managefeatures .containerfeatures fieldset {
overflow: visible;
}
[part='admin'] .managefeatures .containerfeatures .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .managefeatures .containerfeatures .listcontainer .listitem {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
/* Field Button: Switch: Start */
/* Field Button: Switch: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='admin'] .managefeatures .containerfeatures .listcontainer .listitem .fieldbutton .switch {
margin-top: var(--layout-0);
}
[part='admin'] .managefeatures .containerfeatures .listcontainer .listitem [data-style='typocaption'] {
color: var(--color-primary-text-light);
}
[part='admin'] .managefeatures .containerfeatures .listcontainer .listitem [data-style='typotitle1'] {
align-items: center;
color: var(--color-primary-text-dark);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
}
[part='admin'] .managefeatures .titlebar {
margin-bottom: var(--layout-base);
}
/* Manage Features: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='admin'] .navigationbar {
background-color: var(--color-secondary-modal-base);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Accordion: Start */
/* Accordion: End */
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .navigationbar .accordion {
background-color: var(--color-neutrals-transparent);
min-width: var(--percentage-100);
/* Body: Start */
/* List: Start */
/* List: End */
/* Body: End */
/* Header: Start */
/* Icon: Start */
/* Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
/* Header: End */
/* States: Hover: Start */
/* Header: Start */
/* Header: End */
/* Icon: Start */
/* Icon: End */
/* States: Hover: End */
}
[part='admin'] .navigationbar .accordion .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding-left: var(--layout-xx-small);
/* List Item: Start */
/* List Item: End */
}
[part='admin'] .navigationbar .accordion .listcontainer .listitem {
border-bottom: none;
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
/* Inside: Start */
/* Inside: End */
/* States: Active: Start */
/*States: Active: End */
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='admin'] .navigationbar .accordion .listcontainer .listitem .linside {
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
}
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-states='active'],
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-type='button']:hover,
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-type='link']:hover {
background-color: var(--color-neutrals-transparent);
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-states='active'] [data-style='typobody'],
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-type='button']:hover [data-style='typobody'],
[part='admin'] .navigationbar .accordion .listcontainer .listitem[data-type='link']:hover [data-style='typobody'] {
color: var(--color-primary-text-dark);
}
[part='admin'] .navigationbar .accordion .listcontainer .listitem [data-style='typobody'] {
color: var(--color-primary-text-light);
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
line-height: var(--font-small-line-height);
}
[part='admin'] .navigationbar .accordion .aheader {
transition: background-color var(--time-commons-base) ease;
border-radius: var(--layout-base);
}
[part='admin'] .navigationbar .accordion [data-style='typocontainer'] + .icon {
transition: opacity var(--time-commons-base) ease;
opacity: var(--alpha-0);
}
[part='admin'] .navigationbar .accordion [data-style='typocontainer'] {
align-items: center;
display: flex;
flex-flow: row wrap;
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
line-height: var(--font-xx-large-line-height);
}
[part='admin'] .navigationbar .accordion:hover .aheader,
[part='admin'] .navigationbar .accordion[open] .aheader {
background-color: var(--color-secondary-list-base);
}
[part='admin'] .navigationbar .accordion:hover [data-style='typocontainer'] + .icon,
[part='admin'] .navigationbar .accordion[open] [data-style='typocontainer'] + .icon {
opacity: var(--alpha-100);
}
[part='admin'] .navigationbar .flitem .listitem {
align-items: center;
border-radius: var(--layout-base);
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='admin'] .navigationbar .flitem .listitem .ltext[data-style='typobody'] {
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
line-height: var(--font-xx-large-line-height);
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='admin'] .peoplehome {
overflow: visible;
/* Table Container: Start */
/* Table Container: End */
/* Table: Start */
/* Table: End */
/* Tag: Start */
/* Tag: End */
/* TitleBar: Start */
/* TitleBar: End */
/* Pagination: Start */
/* Pagination: End */
}
[part='admin'] .peoplehome .tablecontainer {
overflow: visible;
}
[part='admin'] .peoplehome .table .first {
width: var(--layout-xxx-small);
/* Field Button: Start */
/* Field Button: End */
}
[part='admin'] .peoplehome .table .first .fieldbutton {
width: var(--layout-xxx-small);
/* Checkbox Button: Start */
/* Checkbox Button: End */
}
[part='admin'] .peoplehome .table .first .fieldbutton .checkboxbutton {
margin-right: var(--layout-0);
}
[part='admin'] .peoplehome .badge {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
max-width: calc(var(--percentage-100) - var(--layout-x-small));
width: calc(var(--percentage-100) - var(--layout-x-small));
}
[part='admin'] .peoplehome .titlebar {
margin-bottom: var(--layout-xxx-small);
}
[part='admin'] .peoplehome .pagination {
margin-top: var(--layout-xxxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create User: Start */
/* Body: Start */
/* Inside: Start */
[part='admin'] .modalcreateuser fieldset {
overflow: visible;
/* Last: Field Button: Start */
/* Last: Field Button: End */
}
[part='admin'] .modalcreateuser fieldset.last .fieldbutton {
align-items: center;
/* First: Start */
/* First: End */
/* Last: Start */
/* Last: End */
}
[part='admin'] .modalcreateuser fieldset.last .fieldbutton.first {
height: var(--layout-xxx-large);
}
[part='admin'] .modalcreateuser fieldset.last .fieldbutton.last {
justify-content: flex-end;
}
/* Inside: End */
/* Typography: Display: Start */
[part='admin'] .modalcreateuser [data-style='typodisplay'],
[part='admin'] .modalcreateuser [data-style='typotitle1'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
margin-bottom: var(--layout-x-small);
}
/* Typography: Display: End */
/* Body: End */
/* Modal: Create User: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Filter People: Start */
/* Body: Inside: Start */
[part='admin'] .modalfilterpeople .mbody .cthree {
float: left;
width: var(--percentage-33);
}
/* Typography: Start */
[part='admin'] .modalfilterpeople [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
/* Typography: End */
/* Body: Inside: End */
/* Modal: Filter People: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Manage People Permissions: Start */
/* Body: Field Button: Start */
[part='admin'] .modalmanagepeoplepermissions .mbody .fieldbutton {
padding: var(--layout-xxxx-small);
/* Hightlight: Start */
/* Highlight: End */
}
[part='admin'] .modalmanagepeoplepermissions .mbody .fieldbutton.chighlight {
background-color: var(--color-secondary-list-base);
border: solid var(--layout-border) var(--color-primary-primary-base);
border-radius: var(--layout-base);
margin-left: var(--layout-xxx-medium);
}
/* Body: Field Button: End */
/* Modal: Manage People Permissions: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/*@import './search.less';
@import './variables.less'; */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search Container: Start */
[part='admin'] .searchcontainer {
align-items: center;
display: flex;
flex-flow: row wrap;
margin-bottom: var(--layout-xx-small);
/* Field: Start */
/* Field: End */
/* Items: Start */
/* Items: End */
/* Search: Start */
/* Search: End */
}
[part='admin'] .searchcontainer .field {
padding-bottom: var(--layout-0);
}
[part='admin'] .searchcontainer .items {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-top: var(--layout-xx-small);
width: var(--percentage-100);
}
[part='admin'] .searchcontainer .search {
margin-bottom: var(--layout-0);
min-width: var(--form-search-container-width);
/* Actions: Start */
/* Actions: End */
}
[part='admin'] .searchcontainer .search + .actions {
margin-left: var(--layout-xxx-small);
}
/* Search Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='admin'] .spaceshome {
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* Pagination: Start */
/* Pagination: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='admin'] .spaceshome .inside {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, auto);
overflow: visible;
/* Responsive: Start */
/* Responsive: End */
}
@media (min-width: 1024px) {
[part='admin'] .spaceshome .inside {
grid-template-columns: repeat(2, auto);
justify-content: flex-start;
}
}
@media (min-width: 1280px) {
[part='admin'] .spaceshome .inside {
grid-template-columns: repeat(3, auto);
}
}
@media (min-width: 1920px) {
[part='admin'] .spaceshome .inside {
grid-template-columns: repeat(4, auto);
}
}
[part='admin'] .spaceshome .pagination {
margin-top: var(--layout-xxx-small);
}
[part='admin'] .spaceshome .titlebar {
margin-bottom: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Order Spaces: Start */
[part='admin'] .modalorderspaces {
/* Inside: Field Button: Start */
/* Inside: Field Button: End */
/* Field Button: Start */
/* Field Button: End */
}
[part='admin'] .modalorderspaces .first .fieldbutton {
justify-content: flex-end;
/* Label: Start */
/* Label: End */
}
[part='admin'] .modalorderspaces .first .fieldbutton .flabel {
font-size: var(--font-large-size);
font-weight: var(--font-large-weight);
line-height: var(--font-large-line-height);
text-align: right;
width: calc(var(--percentage-100) - var(--layout-xxxxx-small));
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces {
margin-bottom: var(--layout-xxx-small);
padding-bottom: var(--layout-0);
/* Button: Default: Start */
/* Button: Default: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default {
border: solid var(--layout-border) var(--color-primary-border-base);
height: auto;
justify-content: flex-start;
padding: var(--layout-xxxxx-small) var(--layout-xxxxx-small) var(--layout-xxxxx-small) var(--layout-xx-medium);
position: relative;
text-align: left;
width: var(--percentage-100);
/* Container: Typo: Start */
/* Container: Typo: End */
/* Drag & Drop: Start */
/* Drag & Drop: End */
/* Inside: Start */
/* Inside: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .containertypo {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .icon.draganddrop {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable-line */
transform: translateY(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
height: var(--layout-x-small);
left: var(--layout-xxxxx-small);
margin-right: var(--layout-0);
width: var(--layout-x-small);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .icon.draganddrop svg {
fill: var(--color-primary-border-base);
height: var(--layout-x-small);
width: var(--layout-x-small);
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
width: var(--percentage-100);
/* Avatar: Start */
/* Avatar: End */
/* Text: Start */
/* Text: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--modal-order-spaces-avatar-shadow-rgba-color-r), var(--modal-order-spaces-avatar-shadow-rgba-color-g), var(--modal-order-spaces-avatar-shadow-rgba-color-b), var(--modal-order-spaces-avatar-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
/* Icon: Start */
/* Icon: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside .avatar .icon {
height: var(--percentage-100);
margin-right: var(--layout-0);
width: var(--percentage-100);
/* SVG: Start */
/* SVG: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside .avatar .icon svg {
height: var(--layout-x-small);
width: var(--layout-x-small);
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside .text {
display: flex;
flex: 1;
flex-direction: column;
/* Typography: Caption: Start */
/* Typography: Caption: End */
}
[part='admin'] .modalorderspaces .fieldbutton.gdsorderspaces .default .fbinside .text [data-style='typocaption'] {
font-size: var(--font-x-small-size);
font-weight: var(--font-x-small-weight);
line-height: var(--font-x-small-line-height);
}
/* Modal: Order Spaces: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='admin'] .spaceshome .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Modal: Order Spaces: Start */
[part='admin'] .modalorderspaces {
--modal-order-spaces-avatar-shadow-rgba-color-a: 0.4;
--modal-order-spaces-avatar-shadow-rgba-color-b: 135;
--modal-order-spaces-avatar-shadow-rgba-color-g: 125;
--modal-order-spaces-avatar-shadow-rgba-color-r: 96;
}
/* Variables: Modal: Order Spaces: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='admin'] {
--form-search-container-width: 20rem;
/* 320px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Banner: Start */
[part='communication'] .banner,
[part='recognition'] .banner,
[part='timeoff'] .banner,
[part='wallet'] .banner {
background-color: var(--product-banner-background-color);
}
/* Banner: End */
/* Banner: Header: Start */
.banner + .headerapp.sticky {
top: var(--layout-medium);
/* Navigation Bar: Start */
/* Navigation Bar: End */
}
.banner + .headerapp.sticky + section .navigationbar {
top: var(--banner-navigation-bar-sticky);
/* Footer: Start */
/* Sticky: Start */
/* Sticky: End */
/* Footer: End */
}
.banner + .headerapp.sticky + section .navigationbar.footer-sticky {
height: calc(var(--viewport-height-100) - var(--banner-navigation-bar-sticky));
}
/* Banner: Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Alert: Start */
[part='bond'] .alert {
max-width: var(--percentage-100);
}
/* Alert: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Breadcrumb: Start */
[part='bond'] .breadcrumb {
margin-bottom: var(--layout-base);
}
/* Breadcrumb: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Container Card: Start */
[part='bond'] .containercards {
display: flex;
flex-flow: row wrap;
/* Cards: Start */
/* Cards: End */
}
[part='bond'] .containercards .cards {
margin-bottom: var(--layout-xxx-small);
margin-left: var(--layout-xxxxx-small);
margin-right: var(--layout-xxxxx-small);
max-width: var(--containercard-cards-max-width);
min-width: var(--containercard-cards-min-width);
overflow: visible;
width: var(--containercard-cards-min-width);
/* Body: Start */
/* Body: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Header: End */
}
[part='bond'] .containercards .cards .cbody {
padding: var(--layout-xxxx-small);
/* Typography: Caption: Start */
/* Typography: Caption: End */
}
[part='bond'] .containercards .cards .cbody [data-style='typocaption'] {
display: block;
}
[part='bond'] .containercards .cards .cfooter {
border-top: solid var(--layout-border) var(--color-primary-border-base);
padding: var(--layout-xxxx-small);
}
[part='bond'] .containercards .cards .cheader {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
overflow: visible;
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='bond'] .containercards .cards .cheader [data-style='typocaption'] {
display: block;
margin-top: var(--layout-half);
width: var(--percentage-100);
}
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] {
max-width: calc(var(--percentage-100) - var(--layout-x-medium));
/* Badge: Start */
/* Badge: End */
}
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] .badge,
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] [data-style='typotitle1'],
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] [data-style='typocaption'] {
float: left;
}
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] .badge {
margin-left: var(--layout-base);
}
[part='bond'] .containercards .cards .cheader [data-style='typotitle1'] [data-style='typotitle1'] {
max-width: var(--percentage-72);
vertical-align: middle;
}
/* Container Card: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Content: Start */
[part='bond'] {
padding-top: var(--layout-large);
/* Article: Start */
/* Article: End */
}
[part='bond'] article {
overflow: visible;
position: relative;
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Detail: Start */
[part='bond'] .detail {
margin-bottom: var(--layout-xxxxx-small);
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
}
[part='bond'] .detail [data-style='typobody'],
[part='bond'] .detail [data-style='typocaption'] {
display: block;
}
[part='bond'] .detail [data-style='typobody'] {
margin-bottom: var(--layout-base);
}
[part='bond'] .detail [data-style='typocaption'] {
margin-top: var(--layout-base);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* FormCreate: Start */
[part='bond'] .formcreate {
overflow: visible;
/* Footer: Start */
/* Footer: End */
/* Header: Typography: Start */
/* Header: Typography: End */
}
[part='bond'] .formcreate .footer .fieldbutton {
float: left;
min-width: var(--layout-xxx-small);
}
[part='bond'] .formcreate .footer .fieldbutton:last-child {
margin-left: var(--layout-xxx-small);
}
[part='bond'] .formcreate [data-style='typoheader'] {
margin-bottom: var(--layout-xxx-small);
/* Body: Start */
/* Body: End */
}
[part='bond'] .formcreate [data-style='typoheader'] [data-style='typobody'] {
display: block;
}
/* FormCreate: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Table: Start */
[part='bond'] .table {
/* Tbody: Start */
/* Tbody: End */
/* Thead: Start */
/* Thead: End */
}
[part='bond'] .table .td .badge:last-child {
margin-left: var(--layout-xxxx-small);
}
[part='bond'] .table .th {
line-height: var(--font-xx-large-line-height);
}
/* Table: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Title Bar: Start */
[part='bond'] .titlebar {
margin-bottom: var(--layout-base);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='bond'] .titlebar small {
margin-top: var(--layout-half);
}
/* Title Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='bond'] {
--containercard-cards-max-width: 27rem;
/* 432px */
--containercard-cards-min-width: 20rem;
/* 320px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Avatar: Avatar Icon: Start */
.avatar[data-background='bgdefault'] .icon {
background-color: var(--color-avatar-icons-default);
}
.avatar[data-background='bgeight'] .icon {
background-color: var(--color-avatar-icons-eight);
}
.avatar[data-background='bgeighteen'] .icon {
background-color: var(--color-avatar-icons-eighteen);
}
.avatar[data-background='bgeleven'] .icon {
background-color: var(--color-avatar-icons-eleven);
}
.avatar[data-background='bgfifteen'] .icon {
background-color: var(--color-avatar-icons-fifteen);
}
.avatar[data-background='bgfive'] .icon {
background-color: var(--color-avatar-icons-five);
}
.avatar[data-background='bgfour'] .icon {
background-color: var(--color-avatar-icons-four);
}
.avatar[data-background='bgfourteen'] .icon {
background-color: var(--color-avatar-icons-fourteen);
}
.avatar[data-background='bggeneric'] .icon {
background-color: var(--color-avatar-icons-default);
}
.avatar[data-background='bgnine'] .icon {
background-color: var(--color-avatar-icons-nine);
}
.avatar[data-background='bgnineteen'] .icon {
background-color: var(--color-avatar-icons-nineteen);
}
.avatar[data-background='bgone'] .icon {
background-color: var(--color-avatar-icons-one);
}
.avatar[data-background='bgseven'] .icon {
background-color: var(--color-avatar-icons-seven);
}
.avatar[data-background='bgseventeen'] .icon {
background-color: var(--color-avatar-icons-seventeen);
}
.avatar[data-background='bgsix'] .icon {
background-color: var(--color-avatar-icons-six);
}
.avatar[data-background='bgsixteen'] .icon {
background-color: var(--color-avatar-icons-sixteen);
}
.avatar[data-background='bgten'] .icon {
background-color: var(--color-avatar-icons-ten);
}
.avatar[data-background='bgthirteen'] .icon {
background-color: var(--color-avatar-icons-thirteen);
}
.avatar[data-background='bgthirty'] .icon {
background-color: var(--color-avatar-icons-thirty);
}
.avatar[data-background='bgthree'] .icon {
background-color: var(--color-avatar-icons-three);
}
.avatar[data-background='bgtwelve'] .icon {
background-color: var(--color-avatar-icons-twelve);
}
.avatar[data-background='bgtransparent'] .icon {
background-color: var(--color-neutrals-transparent);
}
.avatar[data-background='bgtwenty'] .icon {
background-color: var(--color-avatar-icons-twenty);
}
.avatar[data-background='bgtwentyeight'] .icon {
background-color: var(--color-avatar-icons-twenty-eight);
}
.avatar[data-background='bgtwentyfive'] .icon {
background-color: var(--color-avatar-icons-twenty-five);
}
.avatar[data-background='bgtwentyfour'] .icon {
background-color: var(--color-avatar-icons-twenty-four);
}
.avatar[data-background='bgtwentynine'] .icon {
background-color: var(--color-avatar-icons-twenty-nine);
}
.avatar[data-background='bgtwentyone'] .icon {
background-color: var(--color-avatar-icons-twenty-one);
}
.avatar[data-background='bgtwentyseven'] .icon {
background-color: var(--color-avatar-icons-twenty-seven);
}
.avatar[data-background='bgtwentysix'] .icon {
background-color: var(--color-avatar-icons-twenty-six);
}
.avatar[data-background='bgtwentythree'] .icon {
background-color: var(--color-avatar-icons-twenty-three);
}
.avatar[data-background='bgtwentytwo'] .icon {
background-color: var(--color-avatar-icons-twenty-two);
}
.avatar[data-background='bgtwo'] .icon {
background-color: var(--color-avatar-icons-two);
}
/* SVG: Start */
.avatar[data-background]:not([data-background='bgdisable'], [data-background='bgerror'], [data-background='bginfo'], [data-background='bgsuccess'], [data-background='bgtransparent'], [data-background='bgwarning']) .icon svg {
fill: var(--color-neutrals-white);
}
/* SVG: End */
/* Avatar: Avatar Icon: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* HR Apps: Start */
[data-background='hrbgeight'] {
background-color: var(--color-hr-apps-eight);
}
[data-background='hrbgeighteen'] {
background-color: var(--color-hr-apps-eighteen);
}
[data-background='hrbgeleven'] {
background-color: var(--color-hr-apps-eleven);
}
[data-background='hrbgfifteen'] {
background-color: var(--color-hr-apps-fifteen);
}
[data-background='hrbgfive'] {
background-color: var(--color-hr-apps-five);
}
[data-background='hrbgfour'] {
background-color: var(--color-hr-apps-four);
}
[data-background='hrbgfourteen'] {
background-color: var(--color-hr-apps-fourteen);
}
[data-background='hrbgnine'] {
background-color: var(--color-hr-apps-nine);
}
[data-background='hrbgnineteen'] {
background-color: var(--color-hr-apps-nineteen);
}
[data-background='hrbgone'] {
background-color: var(--color-hr-apps-one);
}
[data-background='hrbgseven'] {
background-color: var(--color-hr-apps-seven);
}
[data-background='hrbgseventeen'] {
background-color: var(--color-hr-apps-seventeen);
}
[data-background='hrbgsix'] {
background-color: var(--color-hr-apps-six);
}
[data-background='hrbgsixteen'] {
background-color: var(--color-hr-apps-sixteen);
}
[data-background='hrbgten'] {
background-color: var(--color-hr-apps-ten);
}
[data-background='hrbgthirteen'] {
background-color: var(--color-hr-apps-thirteen);
}
[data-background='hrbgthree'] {
background-color: var(--color-hr-apps-three);
}
[data-background='hrbgtwelve'] {
background-color: var(--color-hr-apps-twelve);
}
[data-background='hrbgtwenty'] {
background-color: var(--color-hr-apps-twenty);
}
[data-background='hrbgtwentyeight'] {
background-color: var(--color-hr-apps-twenty-eight);
}
[data-background='hrbgtwentyfive'] {
background-color: var(--color-hr-apps-twenty-five);
}
[data-background='hrbgtwentyfour'] {
background-color: var(--color-hr-apps-twenty-four);
}
[data-background='hrbgtwentynine'] {
background-color: var(--color-hr-apps-twenty-nine);
}
[data-background='hrbgtwentyone'] {
background-color: var(--color-hr-apps-twenty-one);
}
[data-background='hrbgtwentyseven'] {
background-color: var(--color-hr-apps-twenty-seven);
}
[data-background='hrbgtwentysix'] {
background-color: var(--color-hr-apps-twenty-six);
}
[data-background='hrbgtwentythree'] {
background-color: var(--color-hr-apps-twenty-three);
}
[data-background='hrbgtwentytwo'] {
background-color: var(--color-hr-apps-twenty-two);
}
[data-background='hrbgtwo'] {
background-color: var(--color-hr-apps-two);
}
/* HR Apps: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Leave Policies: Start */
[data-background='lpbgeight'] {
background-color: var(--color-leave-policies-eight);
}
[data-background='lpbgeighteen'] {
background-color: var(--color-leave-policies-eighteen);
}
[data-background='lpbgeleven'] {
background-color: var(--color-leave-policies-eleven);
}
[data-background='lpbgfifteen'] {
background-color: var(--color-leave-policies-fifteen);
}
[data-background='lpbgfive'] {
background-color: var(--color-leave-policies-five);
}
[data-background='lpbgfour'] {
background-color: var(--color-leave-policies-four);
}
[data-background='lpbgfourteen'] {
background-color: var(--color-leave-policies-fourteen);
}
[data-background='lpbgnine'] {
background-color: var(--color-leave-policies-nine);
}
[data-background='lpbgone'] {
background-color: var(--color-leave-policies-one);
}
[data-background='lpbgseven'] {
background-color: var(--color-leave-policies-seven);
}
[data-background='lpbgseventeen'] {
background-color: var(--color-leave-policies-seventeen);
}
[data-background='lpbgsix'] {
background-color: var(--color-leave-policies-six);
}
[data-background='lpbgsixteen'] {
background-color: var(--color-leave-policies-sixteen);
}
[data-background='lpbgten'] {
background-color: var(--color-leave-policies-ten);
}
[data-background='lpbgthirteen'] {
background-color: var(--color-leave-policies-thirteen);
}
[data-background='lpbgthree'] {
background-color: var(--color-leave-policies-three);
}
[data-background='lpbgtwelve'] {
background-color: var(--color-leave-policies-twelve);
}
[data-background='lpbgtwo'] {
background-color: var(--color-leave-policies-two);
}
/* Leave Policies: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Notifications: Badge: Start */
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgdefault'] .icon {
background-color: var(--color-notifications-badge-default);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgeight'] .icon {
background-color: var(--color-notifications-badge-eight);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgeleven'] .icon {
background-color: var(--color-notifications-badge-eleven);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgfive'] .icon {
background-color: var(--color-notifications-badge-five);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgfour'] .icon {
background-color: var(--color-notifications-badge-four);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgfourteen'] .icon {
background-color: var(--color-notifications-badge-fourteen);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgnine'] .icon {
background-color: var(--color-notifications-badge-nine);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgone'] .icon {
background-color: var(--color-notifications-badge-one);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgseven'] .icon {
background-color: var(--color-notifications-badge-seven);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgsix'] .icon {
background-color: var(--color-notifications-badge-six);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgten'] .icon {
background-color: var(--color-notifications-badge-ten);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgthree'] .icon {
background-color: var(--color-notifications-badge-three);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bghirteen'] .icon {
background-color: var(--color-notifications-badge-thirteen);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgtwelve'] .icon {
background-color: var(--color-notifications-badge-twelve);
}
.cards.cardnotifications .avatar[data-size='xxs'][data-background='bgtwo'] .icon {
background-color: var(--color-notifications-badge-two);
}
/* Notifications: Badge: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Wallets: Icon: SVG: Start */
.icon.wbgdefault svg {
fill: var(--color-wallet-default);
}
.icon.wbgfive svg {
fill: var(--color-wallet-five);
}
.icon.wbgfour svg {
fill: var(--color-wallet-four);
}
.icon.wbgone svg {
fill: var(--color-wallet-one);
}
.icon.wbgsix svg {
fill: var(--color-wallet-six);
}
.icon.wbgthree svg {
fill: var(--color-wallet-three);
}
.icon.wbgtwo svg {
fill: var(--color-wallet-two);
}
/* Wallets: Icon: SVG: End */
/* Diseñado por: Lic.avatar. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Content: Start */
[part='communication'] {
background-color: var(--color-secondary-modal-base);
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: Start */
/* Folders: Start */
[part='communication'] .documentsfolders {
overflow: visible;
}
/* Folders: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Folders: Start */
[part='communication'] .documentsfoldersinside {
overflow: visible;
/* Actions: DEPRECATED: Start */
/* Actions: DEPRECATED: End */
/* BreadCrumb: Start */
/* BreadCrumb: End */
}
[part='communication'] .documentsfoldersinside .foldersactions {
align-items: center;
display: flex;
justify-content: space-between;
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
[part='communication'] .documentsfoldersinside .foldersactions .faleft,
[part='communication'] .documentsfoldersinside .foldersactions .faright {
width: var(--percentage-50);
}
[part='communication'] .documentsfoldersinside .foldersactions .faright {
align-items: center;
display: flex;
justify-content: flex-end;
/* Button: Default: Start */
/* Button: Default: End */
}
[part='communication'] .documentsfoldersinside .foldersactions .faright .default {
color: var(--color-primary-text-dark);
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
gap: var(--layout-xxxxx-small);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Active: Start */
/* States: Active: End */
}
[part='communication'] .documentsfoldersinside .foldersactions .faright .default .icon svg {
fill: var(--color-primary-text-dark);
}
[part='communication'] .documentsfoldersinside .foldersactions .faright .default[data-states='active'],
[part='communication'] .documentsfoldersinside .foldersactions .faright .default:hover {
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
[part='communication'] .documentsfoldersinside .foldersactions .faright .default[data-states='active'] .icon svg,
[part='communication'] .documentsfoldersinside .foldersactions .faright .default:hover .icon svg {
fill: var(--color-primary-text-dark);
}
[part='communication'] .documentsfoldersinside .breadcrumb {
margin-bottom: var(--layout-base);
margin-top: var(--layout-xxx-small);
}
/* Folders: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Home: Start */
[part='communication'] .documentshome {
overflow: visible;
/* Container: Start */
/* Pending: Start */
/* Pending: End */
/* Container: End */
/* List: Item: Start */
/* List: Item: End */
}
[part='communication'] .documentshome .documentspendingcontainer {
margin-bottom: var(--layout-base);
}
[part='communication'] .documentshome .listitem .linside .lright {
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
width: auto;
/* Direction: Start */
/* Direction: End */
}
[part='communication'] .documentshome .listitem .linside .lright[dir='ltr'] {
right: var(--layout-xxxx-small);
}
[part='communication'] .documentshome .listitem .linside .lright[dir='rtl'] {
left: var(--layout-xxxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Documents: Detail: Body: Start */
[part='communication'] .modaldocumentsdetail .mbody {
padding-left: var(--layout-xxx-small);
padding-right: var(--layout-xxx-small);
/* Aside: Start */
/* Aside: End */
/* Inside: Container: Start */
/* Inside: Container: End */
/* Form: Start */
/* Form: End */
}
[part='communication'] .modaldocumentsdetail .mbody .mddaside {
height: calc(var(--viewport-height-100) - var(--modal-payslips-detail-preview-height-actions));
margin-left: var(--layout-xxx-small);
overflow-y: auto;
width: var(--modal-documents-detail-aside-width);
/* Items: Start */
/* Items: End */
}
[part='communication'] .modaldocumentsdetail .mbody .mddaside .cards.asidedetail .asditems [data-style='typocontainer'] + [data-style='typocaption'] {
margin-top: var(--layout-small);
}
[part='communication'] .modaldocumentsdetail .mbody .mbcontainer {
display: flex;
flex-flow: row wrap;
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside {
flex-grow: 2;
max-width: var(--percentage-100);
/* Actions: Start */
/* Actions: End */
/* Preview: Start */
/* Preview: End */
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside .mddiactions {
padding: var(--layout-xxx-small);
/* Button: Start */
/* Button: End */
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside .mddiactions .fieldbutton {
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-bottom: var(--layout-0);
/* Default: Start */
/* Default: End */
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside .mddiactions .fieldbutton .default {
font-size: var(--font-x-small-size);
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside .mddipreview {
background-color: var(--color-neutrals-black);
height: calc(var(--viewport-height-100) - var(--modal-documents-detail-preview-height-actions));
}
[part='communication'] .modaldocumentsdetail .mbody .mddinside .mddipreview.withoutactions {
height: calc(var(--viewport-height-100) - var(--modal-documents-detail-preview-height));
}
/* Modal: Documents: Detail: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='communication'] .documentshome .search,
[part='communication'] .documentsfolders .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
[part='communication'] .documentshome .search:first-child,
[part='communication'] .documentsfolders .search:first-child {
padding-top: var(--layout-xxxx-small);
}
[part='communication'] .documentshome .search fieldset,
[part='communication'] .documentsfolders .search fieldset {
width: var(--documents-home-search-fieldset-width);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Files: Start */
[part='communication'] .documentshome .filescontainer {
--list-item-padding-right: 11rem;
/* 176px */
}
/* Files: End */
/* Modal: Documents: Detail: Start */
[part='communication'] .modaldocumentsdetail {
--modal-documents-detail-aside-width: 20rem;
/* 320px */
--modal-documents-detail-preview-height: 5rem;
/* 80px */
--modal-documents-detail-preview-height-actions: 11.5rem;
/* 184px */
}
/* Modal: Documents: Detail: End */
/* Search: Start */
[part='communication'] .documentshome .search,
[part='communication'] .documentsfolders .search {
--documents-home-search-fieldset-width: 20rem;
/* 320px */
}
/* Search: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Container: Start */
[part='communication'] .documentshome .documentscontainer,
[part='communication'] .documentsfolders .documentscontainer,
[part='communication'] .documentsfoldersinside .documentscontainer {
overflow: visible;
/* Title: Start */
/* Title: End */
}
[part='communication'] .documentshome .documentscontainer .titlebar,
[part='communication'] .documentsfolders .documentscontainer .titlebar,
[part='communication'] .documentsfoldersinside .documentscontainer .titlebar {
margin-top: var(--layout-0);
}
/* Container: End */
/* Empty: Start */
[part='communication'] .documentshome .empty,
[part='communication'] .documentsfolders .empty,
[part='communication'] .documentsfoldersinside .empty {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Empty: End */
/* Progress Bar: Start */
[part='communication'] .documentshome .progressbar,
[part='communication'] .documentsfolders .progressbar,
[part='communication'] .documentsfoldersinside .progressbar {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Progress Bar: End */
/* Tabs: Start */
[part='communication'] .documentshome .tabs,
[part='communication'] .documentsfolders .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
margin-bottom: var(--layout-base);
}
/* Tabs: End */
/* Title: Start */
[part='communication'] .documentshome .titlebar,
[part='communication'] .documentsfolders .titlebar,
[part='communication'] .documentsfoldersinside .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Title: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='communication'] .feedhome {
padding-top: var(--layout-xxx-small);
/* Chip: Container: Search: Start */
/* Chip: Container: Search: End */
}
[part='communication'] .feedhome .chipcontainer form.search {
flex: 1;
margin-bottom: var(--layout-0);
/* Field: Start */
/* Field: End */
}
[part='communication'] .feedhome .chipcontainer form.search .field input {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--chip-shadow-rgba-color-r), var(--chip-shadow-rgba-color-g), var(--chip-shadow-rgba-color-b), var(--chip-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: none;
border-radius: var(--layout-xxxx-medium);
height: var(--layout-xxxx-medium);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Post: Start */
[part='communication'] .modalcprcontainer {
max-width: var(--modal-create-post-max-width);
min-width: var(--modal-create-post-min-width);
width: var(--percentage-100);
}
/* Modal: Post: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Schedule Program: Start */
[part='communication'] .modalscheduleprogram {
overflow: visible;
/* Alert: Start */
/* Alert: End */
/* Calendar: Start */
/* Calendar: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='communication'] .modalscheduleprogram .alert,
[part='communication'] .modalscheduleprogram .mspdate[data-style='typobody'] {
margin-bottom: var(--layout-xxx-small);
}
[part='communication'] .modalscheduleprogram .alert {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='communication'] .modalscheduleprogram .field.containercalendar .flatpickr-input {
margin: auto;
}
[part='communication'] .modalscheduleprogram .mspdate [data-style='typotitle1'] {
align-items: center;
color: var(--color-primary-text-dark);
display: flex;
gap: var(--layout-base);
justify-content: center;
margin-bottom: var(--layout-base);
}
[part='communication'] .modalscheduleprogram .mspdate[data-style='typotitle3'] {
margin-bottom: var(--layout-xxxxx-small);
}
/* Modal: Schedule Program: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Feed: Start */
[part='communication'] .feedhome {
--chip-shadow-rgba-color-a: 0.4;
--chip-shadow-rgba-color-b: 135;
--chip-shadow-rgba-color-g: 125;
--chip-shadow-rgba-color-r: 96;
}
/* Feed: End */
/* Modal: Create Post: Start */
[part='communication'] .modalcprcontainer {
--modal-create-post-max-width: 40rem;
/* 640px */
--modal-create-post-min-width: 20rem;
/* 320px */
}
/* Modal: Create Post: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Apps & Shortcuts: Start */
[part='communication'] .modalappshortcuts .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
/* Container Area: Start */
/* Container Area: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea {
max-height: var(--percentage-100);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
/* List: Start */
/* List: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Item: Start */
/* Item: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
gap: var(--layout-xxxx-small);
/* Avatar: Container: Start */
/* Avatar: Container: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer {
height: var(--layout-xxx-medium);
overflow: visible;
/* Avatar: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Native: Start */
/* Native: End */
/* Avatar: End */
/* Badge: Start */
/* Badge: End */
}
.avatar [part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer[data-background='bgdefault'] .icon svg {
fill: var(--color-primary-icon-base);
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer .avatar.hanative {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-base) var(--color-neutrals-blue-grey-6);
border-radius: var(--layout-xxxxx-small);
/* Emoji: Start */
/* Emoji: End */
/* Icon: Start */
/* Icon: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer .avatar.hanative[data-background='bgdefault'] .aemoji {
background-color: var(--color-secondary-list-base);
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer .avatar.hanative[data-background='bgdefault'] .icon {
background-color: var(--color-alternative-focus-base);
/* SVG: Start */
/* SVG: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer .avatar.hanative[data-background='bgdefault'] .icon svg {
fill: var(--color-neutrals-white);
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem .avatarcontainer .badge {
position: absolute;
top: calc(var(--layout-base) * var(--negative-value));
right: calc(var(--layout-base) * var(--negative-value));
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem [data-style='typotitle1'] {
align-items: center;
display: flex;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem [data-style='typotitle1'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='communication'] .modalappshortcuts .tabs + .containerarea .listcontainer .listitem [data-style='typotitle1'] .icon svg {
fill: var(--color-alternative-focus-dark);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
/* Apps & Shortcuts: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='communication'] .navigationbar {
overflow: visible;
padding-top: var(--navigation-bar-padding-top);
/* Body: Start */
/* Body: End */
/* Cards: Spaces: Start */
/* Cards: Spaces: End */
}
[part='communication'] .navigationbar .body {
padding: var(--layout-half);
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* States: Hover: Chrome, Edge & Safari: End */
}
[part='communication'] .navigationbar .body::-webkit-scrollbar,
[part='communication'] .navigationbar .body::-webkit-scrollbar-track,
[part='communication'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='communication'] .navigationbar .body::-webkit-scrollbar-track,
[part='communication'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='communication'] .navigationbar .body:hover::-webkit-scrollbar,
[part='communication'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='communication'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='communication'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='communication'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
[part='communication'] .navigationbar .nbspaces .cfooter {
border-top: solid var(--layout-border) var(--color-primary-border-base);
justify-content: space-between;
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='communication'] .payslipshome {
overflow: visible;
/* Container: Start */
/* Pending: Start */
/* Pending: End */
/* Container: End */
/* List: Item: Start */
/* List: Item: End */
}
[part='communication'] .payslipshome .payslipspendingcontainer {
margin-bottom: var(--layout-base);
}
[part='communication'] .payslipshome .listitem .linside .lright {
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
width: auto;
/* Direction: Start */
/* Direction: End */
}
[part='communication'] .payslipshome .listitem .linside .lright[dir='ltr'] {
right: var(--layout-xxxx-small);
}
[part='communication'] .payslipshome .listitem .linside .lright[dir='rtl'] {
left: var(--layout-xxxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Payslips: Detail: Body: Start */
[part='communication'] .modalpayslipsdetail .mbody {
padding-left: var(--layout-xxx-small);
padding-right: var(--layout-xxx-small);
/* Aside: Start */
/* Aside: End */
/* Inside: Container: Start */
/* Inside: Container: End */
/* Form: Start */
/* Form: End */
}
[part='communication'] .modalpayslipsdetail .mbody .mddaside {
height: calc(var(--viewport-height-100) - var(--modal-payslips-detail-preview-height-actions));
margin-left: var(--layout-xxx-small);
overflow-y: auto;
width: var(--modal-payslips-detail-aside-width);
/* Items: Start */
/* Items: End */
}
[part='communication'] .modalpayslipsdetail .mbody .mddaside .cards.asidedetail .asditems [data-style='typocontainer'] + [data-style='typocaption'] {
margin-top: var(--layout-small);
}
[part='communication'] .modalpayslipsdetail .mbody .mbcontainer {
display: flex;
flex-flow: row wrap;
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside {
flex-grow: 2;
max-width: var(--percentage-100);
/* Actions: Start */
/* Actions: End */
/* Preview: Start */
/* Preview: End */
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside .mddiactions {
padding: var(--layout-xxx-small);
/* Button: Start */
/* Button: End */
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside .mddiactions .fieldbutton {
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-bottom: var(--layout-0);
/* Default: Start */
/* Default: End */
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside .mddiactions .fieldbutton .default {
font-size: var(--font-x-small-size);
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside .mddipreview {
background-color: var(--color-neutrals-black);
height: calc(var(--viewport-height-100) - var(--modal-payslips-detail-preview-height-actions));
}
[part='communication'] .modalpayslipsdetail .mbody .mddinside .mddipreview.withoutactions {
height: calc(var(--viewport-height-100) - var(--modal-payslips-detail-preview-height));
}
/* Modal: Payslips: Detail: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='communication'] .payslipshome .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
[part='communication'] .payslipshome .search:first-child {
padding-top: var(--layout-xxxx-small);
}
[part='communication'] .payslipshome .search fieldset {
width: var(--payslips-home-search-fieldset-width);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Files: Start */
[part='communication'] .payslipshome .filescontainer {
--list-item-padding-right: 11rem;
/* 176px */
}
/* Files: End */
/* Modal: Payslips: Detail: Start */
[part='communication'] .modalpayslipsdetail {
--modal-payslips-detail-aside-width: 20rem;
/* 320px */
--modal-payslips-detail-preview-height: 5rem;
/* 80px */
--modal-payslips-detail-preview-height-actions: 11.5rem;
/* 184px */
}
/* Modal: Payslips: Detail: End */
/* Search: Start */
[part='communication'] .payslipshome .search {
--payslips-home-search-fieldset-width: 20rem;
/* 320px */
}
/* Search: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Container: Start */
[part='communication'] .payslipshome .payslipscontainer {
overflow: visible;
/* Title: Start */
/* Title: End */
}
[part='communication'] .payslipshome .payslipscontainer .titlebar {
margin-top: var(--layout-0);
}
/* Container: End */
/* Empty: Start */
[part='communication'] .payslipshome .empty {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Empty: End */
/* Progress Bar: Start */
[part='communication'] .payslipshome .progressbar {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Progress Bar: End */
/* Title: Start */
[part='communication'] .payslipshome .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Title: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Directory: Start */
[part='communication'] .peopledirectory {
overflow: visible;
/* Pagination: Start */
/* Pagination: End */
/* Table: Container: Start */
/* Table: Container: End */
/* Title Bar: Start */
/* Title Bar: End */
}
[part='communication'] .peopledirectory .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding: var(--layout-xxxx-small);
}
[part='communication'] .peopledirectory .tablecontainer {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--table-box-shadow-rgba-color-r), var(--table-box-shadow-rgba-color-g), var(--table-box-shadow-rgba-color-b), var(--table-box-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
display: flex;
flex-direction: column;
}
[part='communication'] .peopledirectory .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Directory: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Organization Chart: Start */
[part='communication'] .peoplechart {
overflow: visible;
/* Container: Start */
/* Container: End */
/* Title Bar: Start */
/* Title Bar: End */
}
[part='communication'] .peoplechart .organizationchartcontainer {
display: flex;
justify-content: center;
overflow: visible;
width: var(--percentage-100);
/* Root: Start */
/* Root: End */
/* Children: Start */
/* Children: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occroot,
[part='communication'] .peoplechart .organizationchartcontainer .occritem,
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren,
[part='communication'] .peoplechart .organizationchartcontainer .occricitem {
overflow: visible;
position: relative;
}
[part='communication'] .peoplechart .organizationchartcontainer .occroot {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
/* Item: Start */
/* Item: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occroot .occritem {
align-items: center;
display: flex;
flex-direction: column;
width: var(--percentage-100);
/* Line: Start */
/* Line: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occroot .occritem::after {
position: absolute;
left: var(--percentage-50);
/* stylelint-disable-line */
transform: translateX(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-primary-border-base);
bottom: calc(var(--layout-xxx-small) * var(--negative-value));
content: var(--contentEmpty);
height: var(--layout-xxx-small);
width: var(--layout-half);
}
[part='communication'] .peoplechart .organizationchartcontainer .occroot .occritem:last-child::after {
display: none;
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(auto-fit, minmax(var(--grid-template-column-min), var(--grid-template-column-max)));
justify-content: center;
max-width: var(--percentage-100);
padding-top: var(--layout-xxx-small);
/* Accordion: Start */
/* Accordion: End */
/* Line: Start */
/* Line: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren:has(.occricitem:nth-child(4)) {
justify-items: flex-start;
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren:not(:has(.occricitem:nth-child(4))) {
justify-items: center;
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren .occriciaccordion {
min-width: var(--grid-template-column-min);
/* Avatar: Start */
/* Avatar: End */
/* Header: Start */
/* Header: End */
/* List: Start */
/* List: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren .occriciaccordion .avatar {
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-small-b) rgba(var(--accordion-icon-shadow-rgba-color-r), var(--accordion-icon-shadow-rgba-color-g), var(--accordion-icon-shadow-rgba-color-b), var(--accordion-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren .occriciaccordion .aheader {
align-items: flex-start;
gap: var(--layout-xxxx-small);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren .occriciaccordion .aheader [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-0);
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren .occriciaccordion .listcontainer {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
}
[part='communication'] .peoplechart .organizationchartcontainer .occrchildren::after {
position: absolute;
left: var(--percentage-50);
/* stylelint-disable-line */
transform: translateX(var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-primary-border-base);
content: var(--contentEmpty);
height: var(--layout-xxx-small);
top: var(--layout-0);
width: var(--layout-half);
}
[part='communication'] .peoplechart .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Organization Chart: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='communication'] .peopledirectory .search {
margin-bottom: var(--layout-xxx-small);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Directory: Start */
[part='communication'] .peopledirectory {
--table-box-shadow-rgba-color-a: 0.4;
--table-box-shadow-rgba-color-b: 135;
--table-box-shadow-rgba-color-g: 125;
--table-box-shadow-rgba-color-r: 96;
}
/* Directory: End */
/* Organization Chart: Start */
[part='communication'] .peoplechart {
--accordion-icon-shadow-rgba-color-a: 0.4;
--accordion-icon-shadow-rgba-color-b: 135;
--accordion-icon-shadow-rgba-color-g: 125;
--accordion-icon-shadow-rgba-color-r: 96;
--grid-template-column-max: 1fr;
--grid-template-column-min: 18.5rem;
/* 296px */
}
/* Organization Chart: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='communication'] .profilehome {
overflow: visible;
padding-top: var(--layout-xxx-small);
/* Columns: Start */
/* Columns: End */
/* Hero Banner: Start */
/* Hero Banner: End */
}
[part='communication'] .profilehome .profilecolumns {
column-count: 2;
overflow: visible;
/* Cards: Start */
/* Cards: End */
}
[part='communication'] .profilehome .profilecolumns .pcprofile {
margin-bottom: var(--layout-xxx-small);
page-break-inside: avoid;
}
[part='communication'] .profilehome .herobanner {
margin-bottom: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Medals: Start */
[part='communication'] .modalmedals .pciactions {
display: grid;
gap: var(--layout-xxxxx-small);
grid-template-columns: repeat(auto-fit, var(--layout-x-large));
/* Medal: Start */
/* Medal: End */
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal {
width: var(--layout-x-large);
/* IconButton: Start */
/* IconButton: End */
/* Typography: Start */
/* Container: Start */
/* Container: End */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal .iconbutton[data-size='m'] {
height: auto;
text-indent: var(--layout-0);
width: var(--layout-x-large);
/* Icon: Start */
/* Icon: End */
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal .iconbutton[data-size='m'] .icon {
height: var(--layout-x-large);
width: var(--layout-x-large);
/* SVG: Start */
/* SVG: End */
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal .iconbutton[data-size='m'] .icon svg {
height: var(--layout-x-large);
position: relative;
top: auto;
/* stylelint-disable-line */
left: auto;
/* stylelint-disable-line */
transform: none;
width: var(--layout-x-large);
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal [data-style='typocontainer'] {
height: var(--layout-x-large);
position: relative;
width: var(--layout-x-large);
/* Title: Start */
/* Title: End */
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal [data-style='typocontainer'] [data-style='typotitle3'] {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
color: var(--color-neutrals-white);
}
[part='communication'] .modalmedals .pciactions .pciaction.iamedal [data-style='typocaption'] {
display: block;
margin-top: var(--layout-half);
text-align: center;
}
/* Modal: Medals: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Photo: Image: Start */
[part='communication'] .modalphoto figure img {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Modal: Photo: Image: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='communication'] .spacesdetail {
overflow: visible;
padding-top: var(--layout-xxx-small);
/* Hero Banner: Start */
/* Hero Banner: End */
/* Aside: Start */
/* Aside: End */
}
[part='communication'] .spacesdetail .herobanner {
margin-bottom: var(--layout-xxx-small);
}
[part='communication'] .spacesdetail + .aside {
padding-top: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Files: Start */
[part='communication'] .spacesdetail .filescontainer {
overflow: visible;
/* Actions: Start */
/* Actions: End */
/* Alert: Start */
/* Alert: End */
/* Empty: Start */
/* Empty: End */
/* Inside: Start */
/* Inside: End */
/* Progress Bar: Start */
/* Progress Bar: End */
}
[part='communication'] .spacesdetail .filescontainer .filesactions {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: var(--layout-xxx-small);
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faleft,
[part='communication'] .spacesdetail .filescontainer .filesactions .faright {
width: var(--percentage-50);
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faright {
align-items: center;
display: flex;
justify-content: flex-end;
/* Button: Default: Start */
/* Button: Default: End */
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default {
color: var(--color-primary-text-dark);
font-size: var(--font-x-medium-size);
font-weight: var(--font-x-medium-weight);
gap: var(--layout-xxxxx-small);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* States: Active: Start */
/* States: Active: End */
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default .icon svg {
fill: var(--color-primary-text-dark);
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default[data-states='active'],
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default:hover {
color: var(--color-primary-text-dark);
/* Icon: SVG: Start */
/* Icon: SVG: End */
}
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default[data-states='active'] .icon svg,
[part='communication'] .spacesdetail .filescontainer .filesactions .faright .default:hover .icon svg {
fill: var(--color-primary-text-dark);
}
[part='communication'] .spacesdetail .filescontainer .alert {
margin-bottom: var(--layout-xxx-small);
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='communication'] .spacesdetail .filescontainer .empty {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
[part='communication'] .spacesdetail .filescontainer .filesinsidecontainer {
overflow: visible;
/* List: Start */
/* List: End */
}
[part='communication'] .spacesdetail .filescontainer .filesinsidecontainer .listcontainer {
overflow: visible;
/* List Item: Start */
/* List Item: End */
}
[part='communication'] .spacesdetail .filescontainer .filesinsidecontainer .listcontainer .listitem {
overflow: visible;
}
[part='communication'] .spacesdetail .filescontainer .progressbar {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Files: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Home: Start */
/* Tabs: Start */
[part='communication'] .spaceshome .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
/* Container Area: Start */
/* Container Area: End */
}
[part='communication'] .spaceshome .tabs + .containerarea {
background-color: var(--color-neutrals-transparent);
max-height: var(--percentage-100);
max-width: var(--percentage-100);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
overflow: visible;
/* Inside: Start */
/* Inside: End */
/* States: Active: Start */
/* States: Active: End */
}
[part='communication'] .spaceshome .tabs + .containerarea .inside {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, auto);
overflow: visible;
padding-bottom: var(--layout-xxx-small);
/* Responsive: Start */
/* Responsive: End */
/* vCard: Start */
/* vCard: End */
}
@media (min-width: 768px) {
[part='communication'] .spaceshome .tabs + .containerarea .inside {
grid-template-columns: repeat(2, auto);
justify-content: flex-start;
}
}
@media (min-width: 1366px) {
[part='communication'] .spaceshome .tabs + .containerarea .inside {
grid-template-columns: repeat(3, minmax(var(--v-card-min-width), var(--v-card-max-width)));
}
}
@media (min-width: 1920px) {
[part='communication'] .spaceshome .tabs + .containerarea .inside {
grid-template-columns: repeat(3, minmax(var(--v-card-min-width), var(--v-card-max-width)));
}
}
[part='communication'] .spaceshome .tabs + .containerarea .inside .cards.vcard {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='communication'] .spaceshome .tabs + .containerarea[data-states='active'] {
max-height: var(--percentage-100);
}
/* Tabs: End */
/* TitleBar: Start */
[part='communication'] .spaceshome .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* TitleBar: End */
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create Spaces: Start */
/* Body: Start */
/* Inside: Start */
[part='communication'] .modalcreatespaces .mbody fieldset {
margin-bottom: var(--layout-x-small);
}
[part='communication'] .modalcreatespaces .mbody fieldset:last-child {
margin-bottom: var(--layout-0);
}
/* Inside: End */
/* Membership: Container: Start */
[part='communication'] .modalcreatespaces .membershipcontainer {
height: var(--modal-create-spaces-membership-item-height);
margin-bottom: var(--layout-xxx-small);
position: relative;
/* Button: Start */
/* Button: End */
/* Field Button: Start */
/* Field Button: End */
/* Membership: Check: Start */
/* Membership: Check: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline {
transition: background-color var(--time-commons-base) ease;
border-color: var(--color-primary-border-base);
height: auto;
justify-content: flex-start;
line-height: var(--font-standard-line-height);
padding: var(--layout-xxxx-small) var(--layout-xxxx-small) var(--layout-xxx-medium);
text-align: left;
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
/* Text: Start */
/* Text: End */
/* Typography: Start */
/* Buttons: Start */
/* Buttons: End */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
/* States: Active: Start */
/* States: Active: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline .icon {
height: var(--layout-xxx-medium);
width: var(--layout-xxx-medium);
/* SVG: Start */
/* SVG: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline .icon svg {
transition: fill var(--time-commons-base) ease;
fill: var(--color-primary-icon-base);
height: var(--layout-xxx-medium);
width: var(--layout-xxx-medium);
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline .text {
flex: 1;
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline [data-style='typobutton'],
[part='communication'] .modalcreatespaces .membershipcontainer .outline [data-style='typocaption'] {
transition: color var(--time-commons-base) ease;
width: var(--percentage-100);
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline [data-style='typobutton'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-base);
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline [data-style='typocaption'] {
display: block;
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline[data-states='active'],
[part='communication'] .modalcreatespaces .membershipcontainer .outline:hover {
background-color: var(--color-secondary-list-base);
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Typography: Buttons: Start */
/* Typography: Buttons: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline[data-states='active'] .icon svg,
[part='communication'] .modalcreatespaces .membershipcontainer .outline:hover .icon svg {
fill: var(--color-primary-primary-dark);
}
[part='communication'] .modalcreatespaces .membershipcontainer .outline[data-states='active'] [data-style='typobutton'],
[part='communication'] .modalcreatespaces .membershipcontainer .outline:hover [data-style='typobutton'],
[part='communication'] .modalcreatespaces .membershipcontainer .outline[data-states='active'] [data-style='typocaption'],
[part='communication'] .modalcreatespaces .membershipcontainer .outline:hover [data-style='typocaption'] {
color: var(--color-primary-primary-dark);
}
[part='communication'] .modalcreatespaces .membershipcontainer .fieldbutton {
padding-bottom: var(--layout-0);
}
[part='communication'] .modalcreatespaces .membershipcontainer .membershipcheck {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
position: absolute;
right: var(--layout-0);
/* stylelint-disable-line */
bottom: var(--layout-xxxx-small);
/* stylelint-disable-line */
left: var(--layout-xxxx-large);
/* stylelint-disable-line */
/* Icon: Start */
/* Icon: End */
/* Field Button: Start */
/* Field Button: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .membershipcheck .icon.checkicon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .membershipcheck .icon.checkicon svg {
fill: var(--color-primary-primary-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='communication'] .modalcreatespaces .membershipcontainer .membershipcheck .fieldbutton {
align-items: center;
width: var(--percentage-100);
/* Typography: Label: Start */
/* Typography: Label: End */
}
[part='communication'] .modalcreatespaces .membershipcontainer .membershipcheck .fieldbutton .flabel {
font-size: var(--font-xx-small-size);
}
/* Membership: Container: End */
/* Typography: Title: Start */
[part='communication'] .modalcreatespaces [data-style='typotitle1'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-xxx-small);
}
/* Typography: Title: End */
/* Body: End */
/* Modal: Create Spaces: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Search: Start */
[part='communication'] .spaceshome .search {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
[part='communication'] .spaceshome .search fieldset {
width: var(--space-home-search-fieldset-width);
}
/* Search: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Files: Start */
[part='communication'] .spacesdetail .filescontainer {
--list-item-padding-right: 11rem;
/* 176px */
}
/* Files: End */
/* Home: Start */
[part='communication'] .spaceshome .inside {
--v-card-max-width: 20rem;
/* 320px */
--v-card-min-width: 20rem;
/* 320px */
}
/* Home: End */
/* Modal: Create Spaces: Start */
[part='communication'] .modalcreatespaces {
--modal-create-spaces-membership-item-height: 5.5rem;
/* 88px */
}
/* Modal: Create Spaces: End */
/* Search: Start */
[part='communication'] .spaceshome .search {
--space-home-search-fieldset-width: 20rem;
/* 320px */
}
/* Search: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='communication'] .ticketshome {
overflow: visible;
/* Container: Start */
/* Pending: Start */
/* Pending: End */
/* Container: End */
/* List: Item: Start */
/* List: Item: End */
}
[part='communication'] .ticketshome .ticketspendingcontainer {
margin-bottom: var(--layout-base);
}
[part='communication'] .ticketshome .listitem .linside .lright {
position: absolute;
top: var(--layout-xxxx-small);
/* stylelint-disable-line */
width: auto;
/* Direction: Start */
/* Direction: End */
}
[part='communication'] .ticketshome .listitem .linside .lright[dir='ltr'] {
right: var(--layout-xxxx-small);
}
[part='communication'] .ticketshome .listitem .linside .lright[dir='rtl'] {
left: var(--layout-xxxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Tickets: Detail: Body: Start */
[part='communication'] .modalticketsdetail .mbody {
padding-left: var(--layout-xxx-small);
padding-right: var(--layout-xxx-small);
/* Card: Detail: Start */
/* Card: Detail: End */
}
[part='communication'] .modalticketsdetail .mbody .dcdetail {
margin-bottom: var(--layout-xxx-small);
/* Body: Start */
/* Body: End */
}
[part='communication'] .modalticketsdetail .mbody .dcdetail .cbody {
padding: var(--layout-0);
/* List: Start */
/* List: End */
}
[part='communication'] .modalticketsdetail .mbody .dcdetail .cbody .listcontainer {
display: flex;
flex-flow: row wrap;
/* Column: Start */
/* Columns End */
}
[part='communication'] .modalticketsdetail .mbody .dcdetail .cbody .listcontainer.column {
border-bottom: none;
/* List Item: Start */
/* List Item: End */
}
[part='communication'] .modalticketsdetail .mbody .dcdetail .cbody .listcontainer.column .listitem {
border-bottom: none;
}
/* Modal: Tickets: Detail: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Container: Start */
[part='communication'] .ticketshome .ticketscontainer {
overflow: visible;
/* Title: Start */
/* Title: End */
}
[part='communication'] .ticketshome .ticketscontainer .titlebar {
margin-top: var(--layout-0);
}
/* Container: End */
/* Empty: Start */
[part='communication'] .ticketshome .empty {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Empty: End */
/* Progress Bar: Start */
[part='communication'] .ticketshome .progressbar {
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Progress Bar: End */
/* Title: Start */
[part='communication'] .ticketshome .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Title: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='hrapps'] .hrappsapproval {
overflow: visible;
padding-top: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Aside: Start */
[part='hrapps'] .aside {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
overflow: visible;
padding-top: var(--layout-xxx-small);
/* Card: AI: Start */
/* Card: AI: End */
/* Cards: Extract: Inside: Start */
/* Cards: Extract: Inside: End */
/* Cards: User: Start */
/* Cards: User: End */
/* Filters: Start */
/* Filters: End */
}
[part='hrapps'] .aside .adcardai {
border-radius: var(--layout-xxxx-small);
/* Inside: Body: Start */
/* Inside: Body: End */
}
[part='hrapps'] .aside .adcardai .cinside .cbody {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Button: Default: Start */
/* Button: Default: End */
}
[part='hrapps'] .aside .adcardai .cinside .cbody .default.ai {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='hrapps'] .aside .hrappscardextract .cinside {
align-items: center;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Avatar: Emoji: Start */
/* Avatar: Emoji: End */
}
[part='hrapps'] .aside .hrappscardextract .cinside .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-base) var(--color-neutrals-blue-grey-6);
border: solid var(--layout-half) var(--color-neutrals-white);
border-radius: var(--layout-xxxxx-small);
/* Background: Start */
/* Background: End */
}
[part='hrapps'] .aside .hrappscardextract .cinside .avatar[data-background='bgdefault'] .aemoji {
background-color: var(--color-secondary-list-base);
}
[part='hrapps'] .aside .hrappscarduser .listitem {
border-bottom: none;
}
[part='hrapps'] .aside .hrappscarduser .listitem.first {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
}
[part='hrapps'] .aside .cards.cfilters {
min-width: var(--percentage-100);
/* Body: Date Picker: Calendar (Flatpickr): Start */
/* Body: Date Picker: Calendar (Flatpickr): End */
/* Footer: Button: Start */
/* Footer: Button: End */
}
[part='hrapps'] .aside .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar {
max-width: var(--percentage-100);
/* Inner Container (Flatpickr): Start */
/* Day: Start */
/* Day: End */
/* WeekDays: Start */
/* WeekDays: End */
/* Inner Container (Flatpickr): End */
}
[part='hrapps'] .aside .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
height: var(--cards-filter-calendar-width);
width: var(--cards-filter-calendar-width);
}
[part='hrapps'] .aside .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
width: var(--cards-filter-calendar-width);
}
[part='hrapps'] .aside .cards.cfilters .cfooter.cffooter .default {
justify-content: flex-start;
}
/* Aside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Detail: Start */
[part='hrapps'] .hrappsdetail {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
overflow: visible;
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
/* Card: Start */
/* Card: End */
/* Details: Start */
/* Details: End */
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail {
overflow: visible;
/* Inside: Start */
/* Body: Item: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
/* Inside: End */
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item {
display: flex;
flex-direction: column;
gap: var(--layout-xxxxx-small);
padding: var(--layout-xxxx-small);
/* Button: Default: Start */
/* Button: Default: End */
/* Image: Container: Start */
/* Image: Container: End */
/* List: Item: Start */
/* List: Item: End */
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .default {
height: auto;
justify-content: flex-start;
line-height: var(--font-xx-large-size);
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .imagecontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .imagecontainer img {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-base);
/* Item: Start */
/* Item: End */
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .listcontainer .listitem {
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cbody .item .listcontainer .listitem::before {
content: var(--iCircle);
display: block;
position: absolute;
top: var(--layout-0);
/* stylelint-disable-line */
left: var(--layout-0);
/* stylelint-disable-line */
}
[part='hrapps'] .hrappsdetail .hrappscardsdetail .cheader {
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
}
[part='hrapps'] .hrappsdetail .cards.dcdetail {
margin-bottom: var(--layout-0);
/* Header: Start */
/* Header: End */
}
[part='hrapps'] .hrappsdetail .cards.dcdetail .cheader {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Left: Typography: Start */
/* Left: Typography: End */
}
[part='hrapps'] .hrappsdetail .cards.dcdetail .cheader .dcleft .dctext {
gap: var(--layout-0);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Form: Start */
.cards.hrappscardsform {
overflow: visible;
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
.cards.hrappscardsform .cbody {
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Description: Start */
/* Description: End */
/* Group: Start */
/* Group: End */
/* Label: Start */
/* Label: End */
}
.cards.hrappscardsform .cbody:first-child {
padding-top: var(--layout-xxxx-small);
}
.cards.hrappscardsform .cbody .hacfdescription {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding-bottom: var(--layout-x-small);
/* Inside: Start */
/* Inside: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.hrappscardsform .cbody .hacfdescription .hacfdinside {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
}
.cards.hrappscardsform .cbody .hacfdescription [data-style='typotitle3'] {
color: var(--color-primary-text-dark);
}
.cards.hrappscardsform .cbody .hacfgroup {
display: flex;
flex-direction: column;
/* Typography: Title: Start */
/* Typography: Title: End */
}
.cards.hrappscardsform .cbody .hacfgroup [data-style='typotitle3'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-xxx-small);
}
.cards.hrappscardsform .cbody .flabel {
color: var(--color-primary-text-dark);
font-size: var(--font-medium-size);
font-weight: var(--font-x-medium-weight);
line-height: var(--font-x-medium-line-height);
margin-bottom: var(--layout-xxx-small);
}
.cards.hrappscardsform .cheader {
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
margin-bottom: var(--layout-xx-small);
/* Hacks: Chrome & Safari: Start */
/* Hacks: Chrome & Safari: End */
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.cards.hrappscardsform .cheader [data-style='typotitle1'] {
line-height: var(--cards-form-header-line-height);
}
}
/* Form: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Header: Start */
/* Left: Start */
[part='hrapps'] .hrappsheader .hinside .hleft {
gap: var(--layout-xxxx-small);
overflow: visible;
/* Avatar: Emoji: Start */
/* Avatar: Emoji: End */
/* Brand: Start */
/* Brand: End */
/* Field Button: Start */
/* Field Button: End */
}
[part='hrapps'] .hrappsheader .hinside .hleft .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-base) var(--color-neutrals-blue-grey-6);
border: solid var(--layout-half) var(--color-neutrals-white);
border-radius: var(--layout-xxxxx-small);
/* Background: Start */
/* Background: End */
}
[part='hrapps'] .hrappsheader .hinside .hleft .avatar[data-background='bgdefault'] .aemoji {
background-color: var(--color-secondary-list-base);
}
[part='hrapps'] .hrappsheader .hinside .hleft .hrahbrand {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
overflow: visible;
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='hrapps'] .hrappsheader .hinside .hleft .hrahbrand [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
}
[part='hrapps'] .hrappsheader .hinside .hleft .fieldbutton {
padding-bottom: var(--layout-0);
}
/* Left: End*/
/* Right: Start */
[part='hrapps'] .hrappsheader .hinside .hright {
gap: var(--layout-xxxx-small);
/* Contained: Start */
/* Contained: End */
/* Field Button: Start */
/* Field Button: End */
}
[part='hrapps'] .hrappsheader .hinside .hright .contained,
[part='hrapps'] .hrappsheader .hinside .hright .default,
[part='hrapps'] .hrappsheader .hinside .hright .outline {
border-radius: var(--layout-xxxxx-small);
}
[part='hrapps'] .hrappsheader .hinside .hright .fieldbutton {
padding-bottom: var(--layout-0);
/* Link: Start */
/* Link: End */
}
[part='hrapps'] .hrappsheader .hinside .hright .fieldbutton .link.default {
display: flex;
font-size: var(--font-small-size);
line-height: var(--button-line-height);
}
/* Right: End */
/* Header: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* List: Container: Start */
[part='hrapps'] .cards.containerlist {
overflow: visible;
/* Body: Start */
/* Body: End */
/* Footer: Start */
/* Footer: End */
/* Header: Start */
/* Header: End */
/* Inside: Start */
/* Inside: End */
}
[part='hrapps'] .cards.containerlist .cbody {
display: flex;
flex-direction: column;
/* List: Start */
/* List: End */
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer {
overflow: visible;
/* Item: Start */
/* Item: End */
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer .listitem {
overflow: visible;
/* Avatar: Container: Start */
/* Avatar: Container: End */
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer .listitem .avatarcontainer {
height: var(--layout-xx-medium);
overflow: visible;
/* Avatar: Start */
/* Icon: SVG: Start */
/* Icon: SVG: End */
/* Avatar: End */
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer .listitem .avatarcontainer .avatar[data-size='xxs'] {
position: absolute;
right: var(--layout-0);
bottom: var(--layout-0);
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer .listitem .avatarcontainer .avatar[data-background='bgdefault'] .icon svg {
fill: var(--color-primary-icon-base);
}
[part='hrapps'] .cards.containerlist .cbody .listcontainer .listitem .avatarcontainer .avatar + .avatar[data-size='xxs'] {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--list-icon-shadow-rgba-color-r), var(--list-icon-shadow-rgba-color-g), var(--list-icon-shadow-rgba-color-b), var(--list-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
[part='hrapps'] .cards.containerlist .cfooter {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding: var(--layout-xxxx-small);
/* Pagination: Start */
/* Pagination: End */
}
[part='hrapps'] .cards.containerlist .cfooter .pagination {
width: var(--percentage-100);
}
[part='hrapps'] .cards.containerlist .cheader {
background-color: var(--color-neutrals-grey-2);
border-bottom: solid var(--layout-half) var(--color-primary-border-base);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Search: Start */
/* Search: End */
}
[part='hrapps'] .cards.containerlist .cheader .search {
margin-bottom: var(--layout-0);
width: var(--percentage-100);
}
[part='hrapps'] .cards.containerlist .cinside {
overflow: visible;
}
/* List: Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Filter: Button: Contained: Start */
[part='hrapps'] .modalhrappsfilter .contained,
[part='hrapps'] .modalhrappsfilter .default,
[part='hrapps'] .modalhrappsfilter .outline {
border-radius: var(--layout-xxxxx-small);
}
/* Modal: Filter: BVutton: Contained: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='hrapps'] .navigationbar {
overflow: visible;
padding-top: var(--layout-xxx-small);
/* Body: Start */
/* Body: End */
/* Cards: Extract: Inside: Start */
/* Cards: Extract: Inside: End */
/* Cards: User: Start */
/* Cards: User: End */
/* Filters: Start */
/* Filters: End */
}
[part='hrapps'] .navigationbar .body {
overflow: visible;
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* States: Hover: Chrome, Edge & Safari: End */
}
[part='hrapps'] .navigationbar .body::-webkit-scrollbar,
[part='hrapps'] .navigationbar .body::-webkit-scrollbar-track,
[part='hrapps'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='hrapps'] .navigationbar .body::-webkit-scrollbar-track,
[part='hrapps'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='hrapps'] .navigationbar .body:hover::-webkit-scrollbar,
[part='hrapps'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='hrapps'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='hrapps'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='hrapps'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
[part='hrapps'] .navigationbar .hrappscardextract .cinside {
align-items: center;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Avatar: Emoji: Start */
/* Avatar: Emoji: End */
}
[part='hrapps'] .navigationbar .hrappscardextract .cinside .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-base) var(--color-neutrals-blue-grey-6);
border: solid var(--layout-half) var(--color-neutrals-white);
border-radius: var(--layout-xxxxx-small);
/* Background: Start */
/* Background: End */
}
[part='hrapps'] .navigationbar .hrappscardextract .cinside .avatar[data-background='bgdefault'] .aemoji {
background-color: var(--color-secondary-list-base);
}
[part='hrapps'] .navigationbar .hrappscarduser .listitem {
border-bottom: none;
}
[part='hrapps'] .navigationbar .hrappscarduser .listitem.first {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
}
[part='hrapps'] .navigationbar .cards.cfilters {
min-width: var(--percentage-100);
/* Body: Date Picker: Calendar (Flatpickr): Start */
/* Body: Date Picker: Calendar (Flatpickr): End */
/* Footer: Button: Start */
/* Footer: Button: End */
}
[part='hrapps'] .navigationbar .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar {
max-width: var(--percentage-100);
/* Inner Container (Flatpickr): Start */
/* Day: Start */
/* Day: End */
/* WeekDays: Start */
/* WeekDays: End */
/* Inner Container (Flatpickr): End */
}
[part='hrapps'] .navigationbar .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .flatpickr-day {
height: var(--cards-filter-calendar-width);
width: var(--cards-filter-calendar-width);
}
[part='hrapps'] .navigationbar .cards.cfilters .flatpickr-input[data-size='s'] .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays .flatpickr-weekday {
width: var(--cards-filter-calendar-width);
}
[part='hrapps'] .navigationbar .cards.cfilters .cfooter.cffooter .default {
justify-content: flex-start;
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Results: Start */
[part='hrapps'] .hrappsresults {
overflow: visible;
padding-top: var(--layout-xxx-small);
/* Cards: Graph: Body: Start */
/* Cards: Graph: Body: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody {
display: flex;
flex-direction: column;
/* Graph: Start */
/* Graph: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding: var(--layout-xxxxx-small);
/* Typography: Container: Start */
/* Typography: Container: End */
/* Chart: Container: Start */
/* Chart: Container: End */
/* List: Container: Start */
/* List: Container: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-base);
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartbarcontainer,
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartpiecontainer {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding: var(--layout-xx-small);
/* Chart: Start */
/* Chart: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartbarcontainer .chart,
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartpiecontainer .chart {
display: flex;
flex-direction: column;
gap: var(--layout-base);
width: var(--percentage-100);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartbarcontainer .chart [data-style='typocontainer'],
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .chartpiecontainer .chart [data-style='typocontainer'] {
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
justify-content: space-between;
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .listcontainer.listgraph {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
max-height: var(--results-list-container-max-height);
overflow-y: auto;
/* List Item: Start */
/* List Item: End */
}
[part='hrapps'] .hrappsresults .dcdetail.containergraph .cbody.dcbody .graph .listcontainer.listgraph .listitem {
align-items: center;
background-color: var(--color-neutrals-grey-2);
border-bottom: none;
border-radius: var(--layout-xxxx-small);
min-height: var(--layout-medium);
}
/* Results: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Tabs: Start */
[part='hrapps'] .tabs.hratabs {
background-color: var(--color-neutrals-white);
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
height: var(--layout-x-medium);
justify-content: center;
/* Item: Start */
/* Item: End */
}
[part='hrapps'] .tabs.hratabs .tabsitem {
height: var(--layout-x-medium);
font-size: var(--font-medium-size);
}
/* Tabs: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='hrapps'] {
--cards-filter-calendar-width: 2.375rem;
/* 38px */
--cards-form-header-line-height: 2.75rem;
/* 44px */
--list-icon-shadow-rgba-color-a: 40%;
--list-icon-shadow-rgba-color-b: 135;
--list-icon-shadow-rgba-color-g: 125;
--list-icon-shadow-rgba-color-r: 96;
--results-list-container-max-height: 14.25rem;
/* 228px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Wrapper: Start */
[part='hrapps'] {
background-color: var(--color-secondary-modal-base);
/* Cards: Start */
/* Cards: End */
/* DropDown: Container Area: Start */
/* DropDown: Container Area: End */
/* Media Player: Start */
/* Media Player: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='hrapps'] .cards {
border-radius: var(--layout-xxxx-small);
/* Button: Start */
/* Button: End */
/* Header: Typography: Title: Start */
/* Header: Typography: Title: End */
}
[part='hrapps'] .cards .contained,
[part='hrapps'] .cards .outline {
border-radius: var(--layout-xxxx-small);
}
[part='hrapps'] .cards .cheader [data-style='typotitle1'] {
color: var(--color-primary-text-dark);
}
[part='hrapps'] .iconbutton.dropdown + .containerarea {
border-radius: var(--layout-xxxx-small);
}
[part='hrapps'] .mediaplayer {
border-radius: var(--layout-xxxx-small);
margin-left: auto;
margin-right: auto;
}
[part='hrapps'] .titlebar {
margin-bottom: var(--layout-xxx-small);
/* Button: Contained: Start */
/* Button: Contained: End */
}
[part='hrapps'] .titlebar .contained,
[part='hrapps'] .titlebar .default,
[part='hrapps'] .titlebar .outline {
border-radius: var(--layout-xxxxx-small);
}
/* Wrapper: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Breadcrumb: Start */
[part='marketplace'] article .breadcrumb {
margin-bottom: var(--layout-xx-small);
}
/* Breadcrumb: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Bulk Manage: Table: Body: Start */
[part='marketplace'] .table.tbulkmanage .td:nth-child(2) {
max-width: var(--table-bulk-manage-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tbulkmanage .td:nth-child(2) .tinside {
max-width: var(--table-bulk-manage-td-width);
}
/* Bulk Manage: Table: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Modal: Add Product: Body: Start */
[part='marketplace'] .modaladdproducts .mbody {
padding-left: var(--layout-xx-small);
padding-right: var(--layout-xx-small);
/* Alert: Start */
/* Alert: End */
}
[part='marketplace'] .modaladdproducts .mbody .alert {
margin-bottom: var(--layout-xxx-small);
max-width: var(--percentage-100);
width: var(--percentage-100);
}
/* Modal: Add Product: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Catalogs: Start */
/* Actions: Start */
[part='marketplace'] .actions.mbcactions {
flex: 1;
}
[part='marketplace'] .actions.mbcactions .action.alast {
margin-left: auto;
}
/* Actions: End */
/* Alert: Start */
[part='marketplace'] .rulesform + .alert {
margin-bottom: var(--layout-xx-small);
max-width: var(--percentage-100);
width: var(--percentage-100);
}
/* Alert: End */
/* Tabs: Start */
[part='marketplace'] .tabs.mbctabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
margin-bottom: var(--layout-xx-small);
}
/* Tabs: End */
/* Table: Body: Start */
[part='marketplace'] .table.tcproducts .td:nth-child(1) {
max-width: var(--table-catalogs-products-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tcproducts .td:nth-child(1) .tinside {
max-width: var(--table-catalogs-products-td-width);
}
[part='marketplace'] .table.tcplatforms .td:nth-child(1) {
max-width: var(--table-catalogs-platforms-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tcplatforms .td:nth-child(1) .tinside {
max-width: var(--table-catalogs-platforms-td-width);
}
/* Table: Body: End */
/* Catalogs: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Home: Table: Body: Start */
[part='marketplace'] .table.tcatalogs .td:nth-child(1) {
max-width: var(--table-catalogs-home-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tcatalogs .td:nth-child(1) .tinside {
max-width: var(--table-catalogs-home-td-width);
}
/* Home: Table: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Product: Categories: Start */
[part='marketplace'] .containercategories {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
overflow: visible;
/* Accordion: Body: Start */
/* Accordion: Body: End */
}
[part='marketplace'] .containercategories .accordion .abody {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Items: Start */
/* Items: End */
}
[part='marketplace'] .containercategories .accordion .abody .cards.bcitems {
overflow: visible;
/* Body: Start */
/* Body: End */
}
[part='marketplace'] .containercategories .accordion .abody .cards.bcitems .cbody {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='marketplace'] .containercategories .accordion .abody .cards.bcitems .cbody [data-style='typocontainer'] {
flex: 1;
gap: var(--layout-half);
}
/* Product: Categories: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Add Category: Start */
/* Alert: Start */
[part='marketplace'] .modaladdcategory .alert {
margin-bottom: var(--layout-xxx-small);
max-width: var(--percentage-100);
}
/* Alert: End */
/* Typography: Container: Start */
[part='marketplace'] .modaladdcategory [data-style='typocontainer'] {
gap: var(--layout-xxxxx-small);
margin-bottom: var(--layout-xx-small);
}
/* Typography: Container: End */
/* Modal: Add Category: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Content: Start */
[part='marketplace'] .navigationbar + article {
overflow: visible;
padding-bottom: var(--layout-xxx-small);
padding-top: var(--layout-xxx-small);
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Formula: Start */
[part='marketplace'] .formula {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
/* Badge: States: Start */
/* CCI: Start */
/* CCI: End */
/* CF: Start */
/* CF: End */
/* DTO: Start */
/* DTO: End */
/* MU: Start */
/* MU: End */
/* Badge: States: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
}
[part='marketplace'] .formula .badge[data-background='ligth-sky-blue'] {
background-color: var(--color-light-sky-blue-500);
color: var(--color-primary-text-base);
}
[part='marketplace'] .formula .badge[data-background='misty-rose'] {
background-color: var(--color-misty-rose-500);
color: var(--color-primary-text-base);
}
[part='marketplace'] .formula .badge[data-background='pale-green'] {
background-color: var(--color-pale-green-500);
color: var(--color-primary-text-base);
}
[part='marketplace'] .formula .badge[data-background='linen'] {
background-color: var(--color-linen-500);
color: var(--color-primary-text-base);
}
[part='marketplace'] .formula [data-style='typocaption'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
}
/* Formula: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Upload File: Body: Start */
[part='marketplace'] .modaluploadfile .mbody .mbcontainer .last {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Field Button: Start */
/* Field Button: End */
/* Image: Start */
/* Image: End */
}
[part='marketplace'] .modaluploadfile .mbody .mbcontainer .last .fieldbutton {
padding-bottom: var(--layout-0);
/* Button: Default: Start */
/* Button: Default: End */
}
[part='marketplace'] .modaluploadfile .mbody .mbcontainer .last .fieldbutton .default {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='marketplace'] .modaluploadfile .mbody .mbcontainer .last .uploadfile.upimage {
max-width: var(--percentage-100);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .modaluploadfile .mbody .mbcontainer .last .uploadfile.upimage .fieldimage {
width: var(--percentage-100);
}
/* Modal: Upload File: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='marketplace'] .navigationbar {
background-color: var(--color-secondary-modal-base);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Accordion: Start */
/* Accordion: End */
/* List Item: Start */
/* List Item: End */
}
[part='marketplace'] .navigationbar .accordion {
background-color: var(--color-neutrals-transparent);
min-width: var(--percentage-100);
/* Body: Start */
/* List: Start */
/* List: End */
/* List: Item: End */
/* Body: End */
/* Header: Start */
/* Icon: Start */
/* Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
/* Header: End */
/* States: Hover: Start */
/* Header: Start */
/* Header: End */
/* Icon: Start */
/* Icon: End */
/* States: Hover: End */
}
[part='marketplace'] .navigationbar .accordion .listcontainer {
gap: var(--layout-xxxx-small);
padding-left: var(--layout-xx-small);
/* List Item: Start */
/* List Item: End */
}
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem {
border-bottom: none;
/* Inside: Start */
/* Inside: End */
/* States: Active: Start */
/*States: Active: End */
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem .linside {
padding-bottom: var(--layout-0);
padding-top: var(--layout-0);
}
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-states='active'],
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-type='button']:hover,
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-type='link']:hover {
background-color: var(--color-neutrals-transparent);
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-states='active'] [data-style='typobody'],
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-type='button']:hover [data-style='typobody'],
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem[data-type='link']:hover [data-style='typobody'] {
color: var(--color-primary-text-dark);
}
[part='marketplace'] .navigationbar .accordion .listcontainer .listitem .typobody {
color: var(--color-primary-text-light);
font-size: var(--font-small-size);
font-weight: var(--font-small-weight);
line-height: var(--font-small-line-height);
}
[part='marketplace'] .navigationbar .accordion .aheader {
transition: background-color var(--time-commons-base) ease;
border-radius: var(--layout-base);
}
[part='marketplace'] .navigationbar .accordion [data-style='typotitle1'] + .icon {
transition: opacity var(--time-commons-base) ease;
opacity: var(--alpha-0);
}
[part='marketplace'] .navigationbar .accordion [data-style='typotitle1'] {
align-items: center;
display: flex;
flex-flow: row wrap;
font-size: var(--font-large-size);
font-weight: var(--font-large-weight);
line-height: var(--font-large-line-height);
}
[part='marketplace'] .navigationbar .accordion:hover .aheader,
[part='marketplace'] .navigationbar .accordion[open] .aheader {
background-color: var(--color-secondary-list-base);
}
[part='marketplace'] .navigationbar .accordion:hover [data-style='typotitle1'] + .icon,
[part='marketplace'] .navigationbar .accordion[open] [data-style='typotitle1'] + .icon {
opacity: var(--alpha-100);
}
[part='marketplace'] .navigationbar .body .listitem {
align-items: center;
/* States: Active: Start */
/* StateS: Active: End */
}
[part='marketplace'] .navigationbar .body .listitem[data-states='active'] .ltitle[data-style='typotitle1'] {
color: var(--color-primary-text-dark);
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Pagination: Start */
[part='marketplace'] .responsive-table + .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding: var(--layout-xxxx-small);
}
/* Pagination: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Start */
[part='marketplace'] .containerdetailplatforms {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Alert: Start */
/* Alert: End */
/* Cards: Product: List: List Item: Start */
/* Cards: Product: List: List Item: End */
/* Catalogs: Start */
/* Catalogs: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='marketplace'] .containerdetailplatforms .alert {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='marketplace'] .containerdetailplatforms .cardproduct .listitem {
border-bottom: none;
overflow: visible;
/* IconButton: Icon: Start */
/* IconButton: Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='marketplace'] .containerdetailplatforms .cardproduct .listitem .iconbutton .icon {
margin-bottom: var(--layout-0);
margin-top: var(--layout-0);
}
[part='marketplace'] .containerdetailplatforms .cardproduct .listitem [data-style='typotitle3'] {
align-items: center;
display: flex;
gap: var(--layout-base);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Body: Items: Start */
/* Body: Items: End */
/* Footer: Actions: Start */
/* Footer: Actions: End */
/* Header: Start */
/* Header: End */
/* Cards: End */
/* Inside: Start */
/* Inside: End */
/* Empty: Start */
/* Empty: End */
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .dcitems {
border-bottom: none;
border-top: none;
margin-bottom: var(--layout-half);
padding-top: var(--layout-0);
/* Icon: Start */
/* Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .dcitems:last-child {
margin-bottom: var(--layout-0);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .dcitems .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .dcitems .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .dcitems [data-style='typotitle3'] {
color: var(--color-primary-text-base);
font-size: var(--font-x-small-size);
font-weight: var(--font-x-small-weight);
gap: var(--layout-base);
line-height: var(--font-x-small-line-height);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .cfooter .actions {
width: var(--percentage-100);
/* Field Button: Start */
/* Field Button: End */
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .cfooter .actions .fieldbutton {
padding-bottom: var(--layout-0);
width: var(--percentage-100);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .cheader {
border-bottom: none;
/* Left: Text: Start */
/* Left: Text: End */
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .cards.dcdetail .cheader .dcleft .dctext [data-style='typocontainer'] {
align-items: flex-start;
flex-direction: column;
}
[part='marketplace'] .containerdetailplatforms .containercatalogs fieldset {
max-width: var(--percentage-32);
}
[part='marketplace'] .containerdetailplatforms .containercatalogs .empty {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
padding: var(--layout-xxx-small) var(--layout-xxxx-small);
width: var(--percentage-100);
}
[part='marketplace'] .containerdetailplatforms .titlebar {
margin-bottom: var(--layout-0);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Catalogs: Start */
[part='marketplace'] .containercatalogsdetail {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Alert: Start */
/* Alert: End */
/* Cards: Items: Start */
/* Cards: Items: End */
/* Form: Start */
/* Form: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='marketplace'] .containercatalogsdetail .alert {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='marketplace'] .containercatalogsdetail .carditems {
overflow: visible;
/* Body: Start */
/* Body: End */
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody {
align-items: flex-start;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody .avatar {
border: solid var(--layout-border) var(--color-primary-border-base);
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
/* Body: Start */
/* Body: End */
/* Specials: Start */
/* Specials: End */
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] {
align-items: center;
display: flex;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] .icon svg {
fill: var(--color-alternative-warning-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='marketplace'] .containercatalogsdetail .carditems .cbody [data-style='typocontainer'] [data-style='typospecials'] {
color: var(--color-primary-text-light);
}
[part='marketplace'] .containercatalogsdetail .ccdform .fieldbutton {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
margin-bottom: var(--layout-0);
padding: var(--layout-xxxx-small);
}
[part='marketplace'] .containercatalogsdetail .titlebar {
margin-bottom: var(--layout-0);
}
/* Catalogs: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Add Products: Start */
/* Cards: Information: Start */
[part='marketplace'] .modalcatalogaddproducts .cardinformation {
margin-bottom: var(--layout-x-small);
/* List: List Item: Start */
/* List: List Item: End */
}
[part='marketplace'] .modalcatalogaddproducts .cardinformation .listitem {
border-bottom: none;
/* Typography: Body: Start */
/* Typography: Body: End */
}
[part='marketplace'] .modalcatalogaddproducts .cardinformation .listitem [data-style='typobody'] {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-base);
}
/* Cards: Information: End */
/* Typography: Container: Start */
[part='marketplace'] .modalcatalogaddproducts [data-style='typocontainer'] {
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--layout-x-small);
}
/* Typography: Container: End */
/* Modal: Add Products: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Home: Table: Body: Start */
[part='marketplace'] .table.tplatforms .td:nth-child(1) {
max-width: var(--table-platforms-home-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tplatforms .td:nth-child(1) .tinside {
max-width: var(--table-platforms-home-td-width);
}
/* Home: Table: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Start */
[part='marketplace'] .containerdetail {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Information: List: List Item: Start */
/* Information: List: List Item: End */
/* Items: Start */
/* Items: End */
/* Product: List: List Item: Start */
/* Product: List: List Item: End */
/* Cards: End */
/* Container Images: Start */
/* Container Images: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='marketplace'] .containerdetail .cardinformation .listitem {
border-bottom: none;
/* Button: Default: Start */
/* Button: Default: End */
/* Typography: Start */
/*Caption: Start */
/* Caption: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='marketplace'] .containerdetail .cardinformation .listitem .default {
justify-content: flex-start;
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='marketplace'] .containerdetail .cardinformation .listitem [data-style='typocaption'] {
color: var(--color-primary-text-light);
}
[part='marketplace'] .containerdetail .cardinformation .listitem [data-style='typotitle3'] {
color: var(--color-primary-text-dark);
}
[part='marketplace'] .containerdetail .carditems {
overflow: visible;
/* Body: Start */
/* Body: End */
}
[part='marketplace'] .containerdetail .carditems .cbody {
align-items: flex-start;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
overflow: visible;
padding: var(--layout-xxxx-small);
/* Avatar: Start */
/* Avatar: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='marketplace'] .containerdetail .carditems .cbody .avatar {
border: solid var(--layout-border) var(--color-primary-border-base);
}
[part='marketplace'] .containerdetail .carditems .cbody [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
/* Body: Start */
/* Body: End */
/* Specials: Start */
/* Specials: End */
}
[part='marketplace'] .containerdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] {
align-items: center;
display: flex;
gap: var(--layout-base);
/* Icon: Start */
/* Icon: End */
}
[part='marketplace'] .containerdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] .icon {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .containerdetail .carditems .cbody [data-style='typocontainer'] [data-style='typobody'] .icon svg {
fill: var(--color-alternative-warning-base);
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
[part='marketplace'] .containerdetail .carditems .cbody [data-style='typocontainer'] [data-style='typospecials'] {
color: var(--color-primary-text-light);
}
[part='marketplace'] .containerdetail .cardproduct .listitem {
border-bottom: none;
overflow: visible;
/* IconButton: Icon: Start */
/* IconButton: Icon: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='marketplace'] .containerdetail .cardproduct .listitem .iconbutton .icon {
margin-bottom: var(--layout-0);
margin-top: var(--layout-0);
}
[part='marketplace'] .containerdetail .cardproduct .listitem [data-style='typotitle3'] {
align-items: center;
display: flex;
gap: var(--layout-base);
}
[part='marketplace'] .containerdetail .containerimages fieldset {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
/* Upload File: Start */
/* Upload File: End */
}
[part='marketplace'] .containerdetail .containerimages fieldset .uploadfile.upimage {
flex: 1;
max-width: var(--percentage-100);
min-width: var(--detail-upload-file-width);
min-height: var(--detail-upload-file-height);
overflow: visible;
/* Field Image: Start */
/* Field Image: End */
/* Actions: Start */
/* Actions: End */
}
[part='marketplace'] .containerdetail .containerimages fieldset .uploadfile.upimage .fieldimage {
height: var(--detail-upload-file-height);
width: var(--percentage-100);
}
[part='marketplace'] .containerdetail .containerimages fieldset .uploadfile.upimage .actions.ufiactions {
bottom: auto;
left: auto;
right: var(--layout-xxxx-small);
top: var(--layout-xxxx-small);
/* IconButton: Start */
/* IconButton: End */
}
[part='marketplace'] .containerdetail .containerimages fieldset .uploadfile.upimage .actions.ufiactions .action .iconbutton {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
}
[part='marketplace'] .containerdetail .titlebar {
margin-bottom: var(--layout-0);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Administrator: Typography: Title: Start */
[part='marketplace'] .modaladministrator [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
/* Modal: Administrator: Typography: Title: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Categories: Body: Start */
[part='marketplace'] .modalcategories .mbody fieldset {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Accordion: Body: Start */
/* Accordion: Body: End */
}
[part='marketplace'] .modalcategories .mbody fieldset .accordion .abody {
padding-left: var(--layout-xxxx-medium);
}
/* Modal: Categories: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create Product: Start */
/* Tabs: Start */
[part='marketplace'] .modalcreateproduct .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
/* Container Area: Start */
/* Container Area: End */
}
[part='marketplace'] .modalcreateproduct .tabs + .containerarea[data-animation='collapsable-vertical'] {
display: flex;
flex-direction: column;
max-height: inherit;
}
/* Tabs: End */
/* Typography: Title: Start */
[part='marketplace'] .modalcreateproduct [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
/* Typography: Title: End */
/* Modal: Create Product: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Detail: Variant: Body: Container: Start */
[part='marketplace'] .modaldetailvariant .mbody .mbcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Information: List: List Item: Start */
/* Information: List: List Item: End */
/* Cards: End */
}
[part='marketplace'] .modaldetailvariant .mbody .mbcontainer .cardinformation .listitem {
border-bottom: none;
overflow: visible;
/* Button: Default: Start */
/* Button: Default: End */
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Title: Start */
/* Title: End */
/* Typography: End */
}
[part='marketplace'] .modaldetailvariant .mbody .mbcontainer .cardinformation .listitem .default {
justify-content: flex-start;
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='marketplace'] .modaldetailvariant .mbody .mbcontainer .cardinformation .listitem [data-style='typocaption'] {
color: var(--color-primary-text-light);
}
[part='marketplace'] .modaldetailvariant .mbody .mbcontainer .cardinformation .listitem [data-style='typotitle3'] {
align-items: center;
color: var(--color-primary-text-dark);
display: flex;
gap: var(--layout-base);
}
/* Modal: Detail: Variant: Body: Container: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Home: Table: Body: Start */
[part='marketplace'] .table.tproducts .td:nth-child(1),
[part='marketplace'] .table.tproducts .td:nth-child(3) {
max-width: var(--table-products-home-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tproducts .td:nth-child(1) .tinside,
[part='marketplace'] .table.tproducts .td:nth-child(3) .tinside {
max-width: var(--table-products-home-td-width);
}
[part='marketplace'] .table.tproducts .td:nth-child(2),
[part='marketplace'] .table.tproducts .td:nth-child(5) {
width: var(--table-products-home-td-middle-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tproducts .td:nth-child(2) .tinside,
[part='marketplace'] .table.tproducts .td:nth-child(5) .tinside {
max-width: var(--table-products-home-td-middle-width);
}
/* Home: Table: Body: End */
/* Home: Table: Brand: Start */
[part='marketplace'] .table.tpbrands .td:nth-child(1) {
max-width: var(--table-products-bradns-td-width);
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table.tpbrands .td:nth-child(1) .tinside {
max-width: var(--table-products-bradns-td-width);
}
/* Home: Table: Body: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Modal: Create Rule: Start */
/* Alert: Start */
[part='marketplace'] .modalcreaterule .alert {
margin-bottom: var(--layout-xxx-small);
max-width: var(--percentage-100);
}
/* Alert: End */
/* Rule: Start */
[part='marketplace'] .modalcreaterule .rule {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
margin-bottom: var(--layout-xx-small);
padding: var(--layout-xxx-small);
/* Typography: Title: Start */
/* Component: Formula: Start */
/* Component: Formula: End */
/* Typography: Title: End */
/* Field: Start */
/* Field: End */
}
[part='marketplace'] .modalcreaterule .rule:last-child {
margin-bottom: var(--layout-0);
}
[part='marketplace'] .modalcreaterule .rule [data-style='typotitle1'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
margin-bottom: var(--layout-xxx-small);
}
[part='marketplace'] .modalcreaterule .rule .formula [data-style='typotitle1'] {
margin-bottom: var(--layout-0);
}
[part='marketplace'] .modalcreaterule .rule .field.withtag {
max-width: var(--modal-create-rule-field-with-tag);
min-width: var(--modal-create-rule-field-with-tag);
}
/* Rule: End */
/* Typography: Caption: Start */
[part='marketplace'] .modalcreaterule [data-style='typocaption'] {
margin-bottom: var(--layout-xxxxx-small);
}
/* Typography: Caption: End */
/* Modal: Create Rule: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Detail Rule: Start */
/* Formula: Start */
[part='marketplace'] .modaldetailrule .formula {
margin-bottom: var(--layout-xx-small);
/* Typography: Title: Start */
/* Typography: Title: End */
}
[part='marketplace'] .modaldetailrule .formula [data-style='typotitle1'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
/* Formula: End */
/* Tabs: Start */
[part='marketplace'] .modaldetailrule .tabs li {
width: var(--percentage-33);
/* Item: Start */
/* Item: End */
}
[part='marketplace'] .modaldetailrule .tabs li .tabsitem {
justify-content: center;
width: var(--percentage-100);
}
/* Tabs: End */
/* Typographhy: Start */
/* Body: Start */
[part='marketplace'] .modaldetailrule [data-style='typobody'] {
margin-bottom: var(--layout-xx-small);
}
/* Body: End */
/* Caption: Start */
[part='marketplace'] .modaldetailrule [data-style='typocaption'],
[part='marketplace'] .modaldetailrule [data-style='typotitle1'] {
margin-bottom: var(--layout-xxxxx-small);
}
/* Caption: End */
/* Typography: End */
/* Modal: Detail Rule: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Filter Rule: Start */
/* States: Visible: Start */
[part='marketplace'] .modalfilterrule .fieldbutton + .containerarea[data-states='visible'] {
overflow: visible;
}
/* States: Visible: End */
/* Typography: Title: Start */
[part='marketplace'] .modalfilterrule [data-style='typotitle1'] {
margin-bottom: var(--layout-xxx-small);
}
/* Typography: Title: End */
/* Modal: Filter Rule: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Rules Form: Start */
[part='marketplace'] .rulesform {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
margin-bottom: var(--layout-xx-small);
/* Actions: Action: Direction: Start */
/* Actions: Action: Direction: End */
/* Inside: Start */
/* Inside: End */
/* Field: Start */
/* Field: End */
/* Items: Start */
/* Items: End */
/* Search: Start */
/* Search: End */
/* With Select: Start */
/* With Select: End */
}
[part='marketplace'] .rulesform .actions .action[dir='ltr']:first-child {
margin-left: var(--layout-0);
}
[part='marketplace'] .rulesform .actions .action[dir='rtl']:first-child {
margin-right: var(--layout-0);
}
[part='marketplace'] .rulesform fieldset {
min-width: var(--form-fieldset-min-width);
}
[part='marketplace'] .rulesform .field {
padding-bottom: var(--layout-0);
}
[part='marketplace'] .rulesform .items {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
width: var(--percentage-100);
}
[part='marketplace'] .rulesform .search {
margin-bottom: var(--layout-0);
max-width: var(--percentage-100);
}
[part='marketplace'] .rulesform.withselect {
overflow: visible;
/* Search: Start */
/* Search: End */
}
[part='marketplace'] .rulesform.withselect .search {
align-items: center;
display: flex;
gap: var(--layout-xxx-small);
max-width: var(--percentage-100);
width: var(--percentage-100);
}
/* Rules Form: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* SignIn: Start */
[part='marketplace'] .layout.center.signin {
width: var(--percentage-100);
}
[part='marketplace'] .signin article {
position: relative;
/* First: Start */
/* First: End */
/* SignUp: Start */
/* SignUp: End */
}
[part='marketplace'] .signin article.first {
background-color: var(--color-acentuation-brand-base);
height: var(--viewport-height-100);
position: relative;
/* Text: Start */
/* Text: End */
}
[part='marketplace'] .signin article.first .text {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
/* Icon: Start */
/* Icon: End */
/* Typography: Header: Start */
/* Typography: Header: End */
}
[part='marketplace'] .signin article.first .text .icon,
[part='marketplace'] .signin article.first .text .icon svg {
height: var(--signup-icon);
width: var(--signup-icon);
}
[part='marketplace'] .signin article.first .text .icon {
display: block;
margin-bottom: var(--layout-xxx-small);
margin-left: auto;
margin-right: auto;
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .signin article.first .text .icon svg {
fill: var(--color-neutrals-white);
}
[part='marketplace'] .signin article.first .text [data-style='typoheader'],
[part='marketplace'] .signin article.first .text [data-style='typocaption'] {
color: var(--color-neutrals-white);
text-align: center;
}
[part='marketplace'] .signin article.first .text [data-style='typoheader'] {
margin-bottom: var(--layout-xxxxx-small);
}
[part='marketplace'] .signin article .signup {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--signup-box-shadow-color-r), var(--signup-box-shadow-color-g), var(--signup-box-shadow-color-b), var(--alpha-40));
max-width: var(--signup-max-width);
min-width: var(--signup-min-width);
/* Inside: Start */
/* Inside: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Field: Start */
/* Field: End */
/* Typography: End */
}
[part='marketplace'] .signin article .signup fieldset {
padding-left: var(--layout-xx-small);
padding-right: var(--layout-xx-small);
}
[part='marketplace'] .signin article .signup fieldset:first-child {
padding-top: var(--layout-xx-small);
}
[part='marketplace'] .signin article .signup fieldset.last {
padding-bottom: var(--layout-xx-small);
/* Field Button: Start */
/* Field Button: End */
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton {
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
/* Direction: Start */
/* Direction: End */
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:first-child {
float: left;
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:last-child {
float: right;
/* Button: Start */
/* Button: End */
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:last-child button {
margin-left: auto;
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:first-child {
float: right;
/* Button: Start */
/* Button: End */
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:first-child button {
margin-left: auto;
}
[part='marketplace'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:last-child {
float: left;
}
[part='marketplace'] .signin article .signup [data-style='typobody'] {
margin-bottom: var(--layout-x-small);
margin-top: var(--layout-xxxx-small);
}
[part='marketplace'] .signin article .signup [data-style='typoheader'] + .field {
margin-top: var(--layout-x-small);
}
/* SignIn: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Table: Start */
/* Td: Start */
/* Empty: Start */
[part='marketplace'] .table .td.tempty {
text-align: center;
/* Inside: Start */
/* Inside: End */
}
[part='marketplace'] .table .td.tempty .tinside {
width: var(--percentage-100);
}
/* Empty: End */
/* Icon: Start */
[part='marketplace'] .table .td .icon[data-style='iflag'] {
height: var(--layout-x-small);
margin-left: var(--layout-xxxx-small);
vertical-align: middle;
width: var(--layout-x-small);
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .table .td .icon[data-style='iflag'] svg {
height: var(--layout-x-small);
width: var(--layout-x-small);
}
/* Icon: End */
/* IconButton: Icon: Start */
[part='marketplace'] .table .td .iconbutton .icon:first-child,
[part='marketplace'] .table .td .iconbutton .icon:last-child {
margin-left: var(--layout-0);
margin-right: var(--layout-0);
}
/* IconButton: Icon: End */
/* Inside: Icon: Start */
[part='marketplace'] .table .td .tinside [data-style='typobody'] .icon {
height: var(--layout-xxx-small);
vertical-align: middle;
width: var(--layout-xxx-small);
/* Direction: Start */
/* Direction: End */
/* SVG: Start */
/* SVG: End */
}
[part='marketplace'] .table .td .tinside [data-style='typobody'] .icon[dir='ltr'] {
margin-left: var(--layout-0);
margin-right: var(--layout-base);
}
[part='marketplace'] .table .td .tinside [data-style='typobody'] .icon[dir='rtl'] {
margin-left: var(--layout-base);
margin-right: var(--layout-0);
}
[part='marketplace'] .table .td .tinside [data-style='typobody'] .icon svg {
height: var(--layout-xxx-small);
width: var(--layout-xxx-small);
}
/* Inside: Icon: End */
/* Placeholder: Start */
[part='marketplace'] .table .td .placeholder {
margin: var(--layout-xxxx-small);
}
/* Placeholder: End */
/* Text Align: Right: Direction: Start */
[part='marketplace'] .table .td[data-align='taright'] .placeholder[dir='ltr'] {
float: right;
}
[part='marketplace'] .table .td[data-align='taright'] .placeholder[dir='rtl'] {
float: left;
}
/* Text Align: Right: Direction: End */
/* Td: End */
/* Table: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* TitleBar: Start */
[part='marketplace'] article .titlebar {
margin-bottom: var(--layout-xx-small);
padding: var(--layout-0);
}
/* TitleBar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Modal: List of Cotization: Start */
/* Table: Td: Start */
[part='marketplace'] .modallistofcotization .table .td {
max-width: var(--percentage-50);
/* Inside: Start */
/* Icon: Start */
/* Icon: End */
/* Inside: End */
}
[part='marketplace'] .modallistofcotization .table .td:nth-child(2) .tinside {
display: flex;
flex-flow: column;
}
[part='marketplace'] .modallistofcotization .table .td:nth-child(2) .tinside em {
order: 1;
}
[part='marketplace'] .modallistofcotization .table .td:nth-child(2) .tinside small {
order: 2;
}
[part='marketplace'] .modallistofcotization .table .td .icon[data-style='iflag'] {
margin-left: var(--layout-xxxx-small);
margin-right: var(--layout-xxxx-small);
}
/* Table: Td: End */
/* Modal: List of Cotization: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Type of Change: Start */
/* Alert: Start */
[part='marketplace'] .modaltypeofchange .alert {
margin-bottom: var(--layout-xx-small);
max-width: var(--percentage-100);
}
/* Alert: End */
/* Inside: Field: Start */
[part='marketplace'] .modaltypeofchange .mbcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-x-small);
}
[part='marketplace'] .modaltypeofchange .field:first-child {
max-width: var(--percentage-53);
min-width: var(--percentage-53);
/* Direction: Start */
/* Direction: End */
}
[part='marketplace'] .modaltypeofchange .field:first-child[dir='ltr'] {
float: left;
}
[part='marketplace'] .modaltypeofchange .field:first-child[dir='rtl'] {
float: right;
}
[part='marketplace'] .modaltypeofchange .field:last-child {
max-width: var(--percentage-44);
min-width: var(--percentage-44);
/* Direction: Start */
/* Direction: End */
}
[part='marketplace'] .modaltypeofchange .field:last-child[dir='ltr'] {
float: right;
}
[part='marketplace'] .modaltypeofchange .field:last-child[dir='rtl'] {
float: left;
}
/* Inside: Field: End */
/* Typography: Body: Start */
[part='marketplace'] .modaltypeofchange [data-style='typobody'] {
align-items: center;
display: flex;
gap: var(--layout-xxxxx-small);
}
/* Typography: Body: End */
/* Modal: Type of Change: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='marketplace'] {
--detail-upload-file-width: 11.75rem;
/* 188px*/
--detail-upload-file-height: 9.75rem;
/* 156px */
--form-fieldset-min-width: 25rem;
/* 400px*/
--modal-create-rule-field-with-tag: 9.75rem;
/* 156px */
--rules-form-auto-suggest-select-width: 40rem;
/* 640px */
--rules-form-auto-suggest-width: 20rem;
/* 320px */
--signup-box-shadow-color-b: 135;
--signup-box-shadow-color-g: 125;
--signup-box-shadow-color-r: 96;
--signup-icon: 5rem;
/* 80px */
--signup-max-width: 27rem;
/* 432px */
--signup-min-width: 20rem;
/* 432px */
--table-catalogs-home-td-width: 31.25rem;
/* 500px */
--table-catalogs-platforms-td-width: 31.25rem;
/* 500px */
--table-catalogs-products-td-width: 31.25rem;
/* 500px */
--table-bulk-manage-td-width: 31.25rem;
/* 500px */
--table-platforms-home-td-width: 31.25rem;
/* 500px */
--table-products-bradns-td-width: 31.25rem;
/* 500px */
--table-products-home-td-middle-width: 8.875rem;
/* 142px */
--table-products-home-td-width: 21.875rem;
/* 350px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Import: End */
/* Navigation Bar: Body: List Item: Start */
.navigationbar .body .listitem {
align-items: center;
flex-flow: row wrap;
gap: var(--layout-xxxxx-small);
/* States: Active: Start */
/* Avatar: Icon: SVG: Start */
/* Avatar: Icon: SVG: End */
/* Typography: Title: Start */
/* Typography: Title: End */
/* States: Active: End */
/* Typography: Title: Start */
/* Typography: Title: End */
}
.navigationbar .body .listitem[data-states='active'] .avatar[data-background='bgtransparent'] .icon svg {
fill: var(--color-primary-primary-base);
}
.navigationbar .body .listitem[data-states='active'] .ltitle[data-style='typotitle1'] {
color: var(--color-primary-primary-base);
}
.navigationbar .body .listitem .ltitle {
width: auto;
}
/* Navigation Bar: Body: List Item: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Notifications: Start */
.notificationshome .chipcontainer {
flex-flow: row wrap;
justify-content: space-between;
margin-bottom: var(--layout-xxx-small);
/* Left: Start */
/* Left: End */
}
.notificationshome .chipcontainer .ccleft {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
overflow: visible;
}
/* Notifications: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Settings: Start */
.modalnotificationssettings .mbcontainer {
display: flex;
flex-direction: column;
/* Typography: Body: Start */
/* Typography: Body: End */
/* Inside: Start */
/* Inside: End */
}
.modalnotificationssettings .mbcontainer [data-style='typobody'] {
margin-bottom: var(--layout-xxx-small);
}
.modalnotificationssettings .mbcontainer .mnsinside {
padding-left: var(--layout-x-small);
}
/* Modal: Settings: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Settings: Start */
.notificationssettings {
padding-top: var(--layout-xxxx-small);
/* Cards: Settings: Start */
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
/* Cards: Settings: End */
}
.notificationssettings .cards.ncsettingscontainer .ncscbody {
display: flex;
flex-direction: column;
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
/* Field Button: Start */
/* Field Button: End */
}
.notificationssettings .cards.ncsettingscontainer .ncscbody .fieldbutton {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
.notificationssettings .cards.ncsettingscontainer .ncscheader {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
gap: var(--layout-xxx-small);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Left: Start */
/* Left: End */
/* Right: Start */
/* Right: End */
}
.notificationssettings .cards.ncsettingscontainer .ncscheader .ncschleft {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
/* Typography: Start */
/* Typography: End */
}
.notificationssettings .cards.ncsettingscontainer .ncscheader .ncschleft [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.notificationssettings .cards.ncsettingscontainer .ncscheader .fieldbutton.ncschright {
padding-bottom: var(--layout-0);
}
/* Settings: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Not Found: Start */
.notfound {
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
padding-bottom: var(--layout-xxx-large);
padding-top: var(--layout-xxx-large);
/* Empty: Avatar: Icon: SVG: Start */
/* Empty: Avatar: Icon: SVG: End */
}
.notfound .empty .avatar .icon svg {
fill: var(--color-primary-link-base);
}
/* Not Found: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* ActivesInactives: Start */
[part='productnews'] .activesinactives {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* Search: Container: Start */
/* Search: Container: End */
/* Ads Container: Start */
/* Ads Container: End */
}
[part='productnews'] .activesinactives .searchcontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
}
[part='productnews'] .activesinactives .searchcontainer .field {
padding-bottom: var(--layout-0);
}
[part='productnews'] .activesinactives .adscontainer {
display: grid;
grid-template-columns: repeat(3, auto);
gap: var(--layout-xxx-small);
/* Cards: Start */
/* Cards: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard {
overflow: visible;
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cbody {
display: flex;
flex-direction: column;
gap: var(--layout-base);
padding: var(--layout-xxxx-small);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cbody [data-style='typocontainer'] {
gap: var(--layout-xxxxx-small);
/* Icon: Start */
/* Icon: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cbody [data-style='typocontainer'] .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cbody [data-style='typocontainer'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cheader {
justify-content: space-between;
overflow: visible;
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
/* Typography: Start */
/* Typography: End */
}
[part='productnews'] .activesinactives .adscontainer .cadscard .cheader [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--layout-half);
width: var(--percentage-100);
}
/* ActivesInactives: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Content: Start */
/* Tabs: Start */
[part='productnews'] .tabs {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
}
[part='productnews'] .titlebar + .tabs {
margin-bottom: var(--layout-xxx-small);
}
/* Tabs: End */
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create Ads: Inside: Start */
[part='productnews'] .modalcreateads .mbcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
padding-left: var(--layout-xx-small);
padding-right: var(--layout-xx-small);
/* Step: Container: Start */
/* Step: Container: End */
/* Stepper: Start */
/* Stepper: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
/* Alert: Start */
/* Alert: End */
/* Left: Start */
/* Column: Start */
/* Column: End */
/* List: List Item: Start */
/* List: List Item: End */
/* Typography: Container: Start */
/* Typography: Container: End */
/* Left: End */
/* Right: Start */
/* Field Button: Start */
/* Field Button: End */
/* Right: End */
/* States: Hidden: Start */
/* States: Hidden: End */
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .alert {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaleft,
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
flex: 1;
flex-direction: column;
overflow: visible;
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.stepone .mcaleft,
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.steptwo .mcaleft,
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.steptwo .mcaright {
padding: var(--layout-xxxx-small);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .column {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
overflow: visible;
/* Field: Start */
/* Field: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .column .field {
flex: 1;
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.stepthree .mcaleft .listcontainer .listitem {
align-items: flex-start;
flex-direction: column;
/* Button: Default: Start */
/* Button: Default: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.stepthree .mcaleft .listcontainer .listitem .default {
height: auto;
line-height: 1;
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaleft [data-style='typocontainer'] {
margin-bottom: var(--layout-xx-small);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright {
gap: var(--layout-xx-small);
/* Preview: Start */
/* Preview: End */
/* Upload File: Start */
/* Upload File: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview {
align-items: flex-start;
background-color: var(--color-secondary-modal-base);
display: flex;
flex: 1;
flex-direction: column;
gap: var(--layout-xxx-small);
padding: var(--layout-xxxx-small);
/* Browser: Start */
/* Browser: End */
/* Title: Container: Start */
/* Title: Container: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser {
background-color: var(--color-neutrals-blue-grey-1);
border-radius: var(--layout-base);
display: flex;
flex: 1;
flex-direction: column;
width: var(--percentage-100);
/* Circles: Container: Start */
/* Circles: Container: End */
/* Box: Container: Start */
/* Box: Container: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser .mcarpbcirclecontainer {
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Circle: Start */
/* Circle: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser .mcarpbcirclecontainer .mcarpbcccircle {
background-color: var(--color-neutrals-blue-grey-3);
border-radius: var(--layout-xxxx-small);
height: var(--layout-xxxx-small);
text-indent: var(--text-indentation-negative);
width: var(--layout-xxxx-small);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser .mcarpbboxcontainer {
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxx-small);
padding: var(--layout-xxx-small);
/* Box: Start */
/* Box: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser .mcarpbboxcontainer .mcarpbbcbox {
background-color: var(--color-neutrals-blue-grey-2);
border-radius: var(--layout-base);
text-indent: var(--text-indentation-negative);
width: var(--percentage-22);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .mcarpbrowser .mcarpbboxcontainer .mcarpbbcbox:nth-child(2) {
width: calc(var(--percentage-100) - var(--percentage-49));
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .mcarpreview .titlecontainer {
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: var(--percentage-100);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .uploadfile.upimage {
max-width: var(--percentage-100);
/* Field: Start */
/* Field: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .uploadfile.upimage .fieldimage {
width: var(--percentage-100);
/* Typography: Container: Start */
/* Typography: Container: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer .mcaright .uploadfile.upimage .fieldimage [data-style='typocontainer'] {
align-items: center;
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.steptwo .mcaright .fieldbutton {
padding-bottom: var(--layout-0);
/* Button: Default: Start */
/* Button: Default: End */
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer.steptwo .mcaright .fieldbutton .default {
padding-left: var(--layout-0);
padding-right: var(--layout-0);
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer[hidden] {
display: none;
}
[part='productnews'] .modalcreateads .mbcontainer .stepcontainer [data-style='typocontainer'] {
align-items: flex-start;
display: flex;
flex-direction: column;
}
[part='productnews'] .modalcreateads .mbcontainer .stepper {
margin-bottom: var(--layout-0);
}
/* Modal: Create Ads: Inside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Type Ads: Inside: Start */
[part='productnews'] .modaltypeads .mbcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
/* List: Start */
/* Container: Start */
/* Container: End */
/* List Item: Start */
/* List Item: End */
/* List: End */
}
[part='productnews'] .modaltypeads .mbcontainer .listcontainer {
display: flex;
flex-direction: column;
gap: var(--layout-xxx-small);
}
[part='productnews'] .modaltypeads .mbcontainer .listitem {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
gap: var(--layout-xxxx-small);
}
/* Modal: Type Ads: Inside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* SignIn: Start */
[part='productnews'] .layout.center.signin {
width: var(--percentage-100);
}
[part='productnews'] .signin article {
position: relative;
/* First: Start */
/* First: End */
/* SignUp: Start */
/* SignUp: End */
}
[part='productnews'] .signin article.first {
background-color: var(--color-neutrals-blue-grey-1);
height: var(--viewport-height-100);
position: relative;
/* Text: Start */
/* Text: End */
}
[part='productnews'] .signin article.first .text {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
/* Icon: Start */
/* Icon: End */
/* Typography: Header: Start */
/* Typography: Header: End */
}
[part='productnews'] .signin article.first .text .icon,
[part='productnews'] .signin article.first .text .icon svg {
height: var(--signup-icon);
width: var(--signup-icon);
}
[part='productnews'] .signin article.first .text .icon {
display: block;
margin-bottom: var(--layout-xxx-small);
margin-left: auto;
margin-right: auto;
/* SVG: Start */
/* SVG: End */
}
[part='productnews'] .signin article.first .text .icon svg {
fill: var(--color-acentuation-brand-base);
}
[part='productnews'] .signin article.first .text [data-style='typoheader'],
[part='productnews'] .signin article.first .text [data-style='typocaption'] {
text-align: center;
}
[part='productnews'] .signin article.first .text [data-style='typoheader'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-xxxxx-small);
}
[part='productnews'] .signin article .signup {
position: absolute;
top: var(--percentage-50);
/* stylelint-disable -- Position options need to be tabbed one further in. */
left: var(--percentage-50);
bottom: auto;
right: auto;
/* stylelint-enable -- Position options need to be tabbed one further in. */
transform: translate(var(--position-negative-value), var(--position-negative-value));
/* Variables: Start */
--position-negative-value: -50%;
/* Variables: End */
background-color: var(--color-neutrals-white);
border-radius: var(--layout-base);
box-shadow: var(--shadow-0) var(--shadow-border-y) var(--shadow-medium-b) rgba(var(--signup-box-shadow-color-r), var(--signup-box-shadow-color-g), var(--signup-box-shadow-color-b), var(--alpha-40));
max-width: var(--signup-max-width);
min-width: var(--signup-min-width);
/* Inside: Start */
/* Inside: End */
/* Typography: Start */
/* Body: Start */
/* Body: End */
/* Field: Start */
/* Field: End */
/* Typography: End */
}
[part='productnews'] .signin article .signup fieldset {
padding-left: var(--layout-xx-small);
padding-right: var(--layout-xx-small);
}
[part='productnews'] .signin article .signup fieldset:first-child {
padding-top: var(--layout-xx-small);
}
[part='productnews'] .signin article .signup fieldset.last {
padding-bottom: var(--layout-xx-small);
/* Field Button: Start */
/* Field Button: End */
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton {
min-width: var(--layout-0);
padding-bottom: var(--layout-0);
/* Direction: Start */
/* Direction: End */
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:first-child {
float: left;
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:last-child {
float: right;
/* Button: Start */
/* Button: End */
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='ltr']:last-child button {
margin-left: auto;
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:first-child {
float: right;
/* Button: Start */
/* Button: End */
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:first-child button {
margin-left: auto;
}
[part='productnews'] .signin article .signup fieldset.last .fieldbutton[dir='rtl']:last-child {
float: left;
}
[part='productnews'] .signin article .signup [data-style='typobody'] {
margin-bottom: var(--layout-x-small);
margin-top: var(--layout-xxxx-small);
}
[part='productnews'] .signin article .signup [data-style='typoheader'] + .field {
margin-top: var(--layout-x-small);
}
/* SignIn: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* TitleBar: Start */
[part='productnews'] article .titlebar {
margin-bottom: var(--layout-xx-small);
}
/* TitleBar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='productnews'] {
--signup-box-shadow-color-b: 135;
--signup-box-shadow-color-g: 125;
--signup-box-shadow-color-r: 96;
--signup-icon: 5rem;
/* 80px */
--signup-max-width: 27rem;
/* 432px */
--signup-min-width: 20rem;
/* 432px */
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Content: Start */
[part='recognition'] {
background-color: var(--color-secondary-modal-base);
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Home: Start */
[part='recognition'] .feedhome {
padding-top: var(--layout-xxx-small);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Post: Start */
[part='recognition'] .modalcprcontainer {
max-width: var(--modal-create-post-max-width);
min-width: var(--modal-create-post-min-width);
width: var(--percentage-100);
}
/* Modal: Post: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Modal: Create Post: Start */
[part='recognition'] .modalcprcontainer {
--modal-create-post-max-width: 40rem;
/* 640px */
--modal-create-post-min-width: 20rem;
/* 320px */
}
/* Modal: Create Post: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='recognition'] .navigationbar {
padding-top: var(--navigation-bar-padding-top);
/* Body: Start */
/* Body: End */
}
[part='recognition'] .navigationbar .body {
padding: var(--layout-half);
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* States: Hover: Chrome, Edge & Safari: End */
}
[part='recognition'] .navigationbar .body::-webkit-scrollbar,
[part='recognition'] .navigationbar .body::-webkit-scrollbar-track,
[part='recognition'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='recognition'] .navigationbar .body::-webkit-scrollbar-track,
[part='recognition'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='recognition'] .navigationbar .body:hover::-webkit-scrollbar,
[part='recognition'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='recognition'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='recognition'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='recognition'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Aside: Start */
[part='timeoff'] .aside {
overflow: visible;
}
/* Aside: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Content: Start */
[part='timeoff'] {
background-color: var(--color-secondary-modal-base);
/* Article: Container: Start */
/* Loading: Start */
/* Loading: End */
/* Pagination: Start */
/* Pagination: End */
/* Article: Container: End */
/* Breadcrumb: Start */
/* Breadcrumb: End */
/* Pagination: Start */
/* Pagination: End */
/* Chip: Start */
/*DEPRECATED*/
/* Chip: End */
/*DEPRECATED*/
/* Table: Badge & Tag: Start */
/* Table: Badge & Tag: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='timeoff'] article .historycontainer .progressbar,
[part='timeoff'] .tablecontainer .progressbar,
[part='timeoff'] .cards.detailinsidecontainer .progressbar {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
[part='timeoff'] article .historycontainer .pagination,
[part='timeoff'] article .detailinsidecontainer .pagination,
[part='timeoff'] article .tablecontainer .pagination {
border-top: solid var(--layout-half) var(--color-primary-border-base);
padding-left: var(--layout-xxxx-small);
padding-right: var(--layout-xxxx-small);
}
[part='timeoff'] .breadcrumb {
margin-bottom: var(--layout-xxx-small);
margin-top: var(--layout-xxx-small);
/* Alert: Start */
/* Alert: End */
/* TitleBar: Start */
/* TitleBar: End */
}
[part='timeoff'] .breadcrumb + .alert,
[part='timeoff'] .breadcrumb + .cards.dcdetail {
margin-top: var(--layout-xx-small);
}
[part='timeoff'] .breadcrumb + .titlebar {
margin-top: var(--layout-0);
padding-top: var(--layout-0);
}
[part='timeoff'] .pagination {
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
[part='timeoff'] .chipcontainer {
align-items: center;
display: flex;
gap: var(--layout-xxxx-small);
margin-bottom: var(--layout-xxx-small);
overflow: visible;
}
[part='timeoff'] .table .badge {
width: calc(var(--percentage-100) - var(--layout-x-small));
/* Direction: Start */
/* Direction: End */
}
[part='timeoff'] .table .badge:last-child[dir='ltr'] {
margin-left: var(--layout-xxxx-small);
}
[part='timeoff'] .table .badge:last-child[dir='rtl'] {
margin-right: var(--layout-xxxx-small);
}
[part='timeoff'] .titlebar {
margin-bottom: var(--layout-base);
margin-top: var(--layout-base);
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Alert: Start */
[part='timeoff'] .alert {
max-width: var(--percentage-100);
margin-bottom: var(--layout-xxx-small);
width: var(--percentage-100);
}
/* Alert: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Start */
[part='timeoff'] .leavepoliciesapprovalsdetail {
overflow: visible;
/* Aside: Start */
/* Aside: End */
/* Container: Start */
/* Detail List: Start */
/* Detail List: End */
/* Container: End */
/* Empty: Start */
/* Empty: End */
}
[part='timeoff'] .leavepoliciesapprovalsdetail + .aside {
padding-top: var(--layout-xxxx-large);
}
[part='timeoff'] .leavepoliciesapprovalsdetail .detaillistcontainer {
overflow: visible;
}
[part='timeoff'] .leavepoliciesapprovalsdetail .empty {
height: var(--empty-height);
padding-bottom: var(--layout-xxxx-small);
padding-top: var(--layout-xxxx-small);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Detail: Start */
[part='timeoff'] .leavepoliciesapprovalsreview {
overflow: visible;
/* Aside: Start */
/* Aside: End */
}
[part='timeoff'] .leavepoliciesapprovalsreview + .aside {
padding-top: var(--layout-xxxx-large);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* My History: Start */
[part='timeoff'] .leavepoliciesapprovalhistory {
overflow: visible;
/* Empty: Start */
/* Empty: End */
}
[part='timeoff'] .leavepoliciesapprovalhistory .empty {
height: var(--empty-height);
}
/* My History: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Policy Detail: Start */
/* Cards: Detail: Replace: Start */
[part='timeoff'] .modalpolicydetail .cardsdetailreplace {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
flex-direction: column;
width: var(--percentage-100);
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrbody {
display: flex;
flex-direction: column;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Card: Start */
/* Card: End */
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrbody .cdrcard {
align-items: center;
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
display: flex;
gap: var(--layout-xxxx-small);
padding: var(--layout-xxxx-small);
/* Typography: Text: Start */
/* Typography: Text: End */
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrbody .cdrcard [data-style='typobody'] {
width: calc(var(--percentage-100) - var(--modal-policy-detail-max-width));
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrheader {
align-items: center;
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
justify-content: space-between;
padding: var(--layout-xxxx-small);
/* Title: Start */
/* Title: End */
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrheader [data-style='typotitle1'] {
align-items: center;
display: flex;
flex: 1;
flex-flow: row wrap;
gap: var(--layout-xxxx-small);
}
[part='timeoff'] .modalpolicydetail .cardsdetailreplace .cdrheader [data-style='typotitle1'] [data-style='typocontainer'] {
flex: 1;
}
/* Cards: Detail: Replace: End */
/* Modal: Policy Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Request Policy: Start */
/* Step: One: Start */
/* Calendar: Start */
[part='timeoff'] .modalrequestpolicy .field.containercalendar .flatpickr-input {
margin: auto;
}
/* Calendar: End */
/* Step Date: Start */
[part='timeoff'] .modalrequestpolicy .stepdate {
display: flex;
flex-direction: column;
justify-content: center;
/* Title: Start */
/* Title: End */
}
[part='timeoff'] .modalrequestpolicy .stepdate [data-style='typotitle1'] {
align-items: center;
color: var(--color-primary-text-dark);
display: flex;
gap: var(--layout-xxxx-small);
justify-content: center;
margin-bottom: var(--layout-xxxxx-small);
}
/* Step Date: End */
/* Typography: Title: Start */
[part='timeoff'] .modalrequestpolicy .stepone [data-style='typotitle3'] {
color: var(--color-primary-text-dark);
margin-bottom: var(--layout-xxx-small);
/* Caption: Start */
/* Caption: End */
}
[part='timeoff'] .modalrequestpolicy .stepone [data-style='typotitle3'] [data-style='typocaption'] {
align-items: center;
display: flex;
gap: var(--layout-base);
width: var(--percentage-100);
/* Icon: Start */
/* Icon: End */
}
[part='timeoff'] .modalrequestpolicy .stepone [data-style='typotitle3'] [data-style='typocaption'] .icon {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
/* SVG: Start */
/* SVG: End */
}
[part='timeoff'] .modalrequestpolicy .stepone [data-style='typotitle3'] [data-style='typocaption'] .icon svg {
height: var(--layout-xxxx-small);
width: var(--layout-xxxx-small);
}
/* Typography: Title: End */
/* Step: One: End */
/* Step: Two: Start */
/* Step Instructions: Start */
[part='timeoff'] .modalrequestpolicy .stepinstructions {
margin-bottom: var(--layout-x-small);
/* Title: Start */
/* Title: End */
}
[part='timeoff'] .modalrequestpolicy .stepinstructions [data-style='typotitle1'] {
margin-bottom: var(--layout-xxxx-small);
}
/* Step Instructions: End */
/* Upload File: Start */
[part='timeoff'] .modalrequestpolicy .uploadfile.upimage {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
[part='timeoff'] .modalrequestpolicy .uploadfile.upimage .fieldimage {
width: var(--percentage-100);
}
/* Upload File: End */
/* Step: Two: End */
/* Modal: Request Policy: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Detail: Start */
[part='timeoff'] .leavepoliciesdetail {
overflow: visible;
/* Aside: Start */
/* Aside: End */
}
[part='timeoff'] .leavepoliciesdetail + .aside {
padding-top: var(--layout-xxxx-large);
}
/* Detail: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Home: Start */
[part='timeoff'] .leavepolicieshome {
overflow: visible;
/* Aside: Start */
/* Aside: End */
/* Inside: Start */
/* Inside: End */
}
[part='timeoff'] .leavepolicieshome + .aside {
padding-top: var(--layout-xxxx-large);
}
[part='timeoff'] .leavepolicieshome .inside {
display: grid;
gap: var(--layout-xxx-small);
grid-template-columns: repeat(1, minmax(var(--v-card-min-width), var(--percentage-100)));
justify-content: flex-start;
overflow: visible;
/* Responsive: Start */
/* Responsive: End */
/* vCard: Only Text: Start */
/* vCard: Only Text: End */
}
@media (max-width: 1366px) {
[part='timeoff'] .leavepolicieshome .inside {
grid-template-columns: repeat(2, minmax(var(--v-card-min-width), var(--percentage-100)));
}
}
@media '(max-width: 1920px)' {
[part='timeoff'] .leavepolicieshome .inside {
grid-template-columns: repeat(3, auto);
}
}
[part='timeoff'] .leavepolicieshome .inside .cards.vcard.ot {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
/* Home: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* My History: Start */
[part='timeoff'] .leavepoliciesmyhistory {
overflow: visible;
/* Empty: Start */
/* Empty: End */
}
[part='timeoff'] .leavepoliciesmyhistory .empty {
height: var(--empty-height);
}
/* My History: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* My Teams: Scheduled & History: Start */
[part='timeoff'] .leavepoliciesmyteams {
overflow: visible;
/* Empty: Start */
/* Empty: End */
/* Tabs: Start */
/* Tabs: End */
}
[part='timeoff'] .leavepoliciesmyteams .empty {
height: var(--empty-height);
}
[part='timeoff'] .leavepoliciesmyteams .tabs {
overflow: visible;
/* Tabs Item: Start */
/* Tabs Item: End */
}
[part='timeoff'] .leavepoliciesmyteams .tabs li {
overflow: visible;
}
[part='timeoff'] .leavepoliciesmyteams .tabs .tabsitem {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--tabs-shadow-rgba-color-r), var(--tabs-shadow-rgba-color-g), var(--tabs-shadow-rgba-color-b), var(--tabs-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
background-color: var(--color-neutrals-white);
width: auto;
/* Direction: Start */
/* Direction: End */
}
[part='timeoff'] .leavepoliciesmyteams .tabs .tabsitem:first-child[dir='ltr'] {
border-radius: var(--layout-base) var(--layout-0) var(--layout-0) var(--layout-0);
}
[part='timeoff'] .leavepoliciesmyteams .tabs .tabsitem:first-child[dir='rtl'] {
border-radius: var(--layout-0) var(--layout-base) var(--layout-0) var(--layout-0);
}
[part='timeoff'] .leavepoliciesmyteams .tabs .tabsitem:last-child[dir='ltr'] {
border-radius: var(--layout-0) var(--layout-base) var(--layout-0) var(--layout-0);
}
[part='timeoff'] .leavepoliciesmyteams .tabs .tabsitem:last-child[dir='rtl'] {
border-radius: var(--layout-base) var(--layout-0) var(--layout-0) var(--layout-0);
}
/* My Teams: Scheduled & History: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Timeline: Start */
/* List: Start */
[part='timeoff'] .cardstimelinereplace .ctrlist {
display: flex;
flex-direction: column;
width: var(--percentage-100);
/* Item: Start */
/* Item: End */
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem {
border-bottom: solid var(--layout-border) var(--color-primary-border-base);
display: flex;
flex-direction: column;
padding: var(--layout-xxxx-small);
width: var(--percentage-100);
/* Body: Start */
/* Body: End */
/* Header: Start */
/* Header: End */
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem:last-child {
border-bottom: none;
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem .ctrlibody {
padding-top: var(--layout-xxx-small);
/* Typography: Start */
/* Caption: Start */
/* Caption: End */
/* Typography: End */
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem .ctrlibody [data-style='typocaption'] {
color: var(--color-primary-text-light);
margin-bottom: var(--layout-base);
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem .ctrliheader {
display: flex;
flex-direction: column;
/* Typography: Start */
/* Text: Start */
/* Text: End */
/* Time: Start */
/* Time: End */
/* Typography: End */
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem .ctrliheader [data-style='typobody'] {
color: var(--color-primary-text-dark);
}
[part='timeoff'] .cardstimelinereplace .ctrlist .ctrlitem .ctrliheader [data-style='typobutton'] {
color: var(--color-primary-text-light);
}
/* List: End */
/* Timeline: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='timeoff'] {
--avatar-shadow-rgba-color-a: 0.4;
--avatar-shadow-rgba-color-b: 135;
--avatar-shadow-rgba-color-g: 125;
--avatar-shadow-rgba-color-r: 96;
--v-card-min-width: 18.5rem;
/* 296px */
/* Aside Detail: Start */
/* Aside Detail: End */
/* Modal: Policy Detail: Start */
/* Modal: Policy Detail: End */
/* Tabs: Start */
/* Tabs: End */
}
[part='timeoff'] .leavepoliciesapprovalsdetail,
[part='timeoff'] .leavepoliciesmyhistory,
[part='timeoff'] .leavepoliciesmyteams {
--empty-height: 5.25rem;
/* 84px */
}
[part='timeoff'] .cards.asidedetail,
[part='timeoff'] .leavepoliciesmyhistory {
--leave-policies-list-item-width: 6.5rem;
/* 104 */
}
[part='timeoff'] .modalpolicydetail {
--modal-policy-detail-max-width: 5.25rem;
/* 84px */
}
[part='timeoff'] .leavepoliciesmyteams {
--tabs-shadow-rgba-color-a: 0.4;
--tabs-shadow-rgba-color-b: 135;
--tabs-shadow-rgba-color-g: 125;
--tabs-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Avatar: Start */
[part='timeoff'] .cards.asidedetail .listitem .avatar,
[part='timeoff'] .modalpolicydetail .cdrheader [data-style='typotitle1'] .avatar,
[part='timeoff'] .leavepoliciesmyhistory .listitem .avatar,
[part='timeoff'] .leavepoliciesapprovalsdetail .listitem .avatar,
[part='timeoff'] .asidedetail.onlytext .asditems .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--avatar-shadow-rgba-color-r), var(--avatar-shadow-rgba-color-g), var(--avatar-shadow-rgba-color-b), var(--avatar-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
/* Avatar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='timeoff'] .navigationbar {
padding-top: var(--navigation-bar-padding-top);
/* Body: Start */
/* Body: End */
}
[part='timeoff'] .navigationbar .body {
padding: var(--layout-half);
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* States: Hover: Chrome, Edge & Safari: End */
}
[part='timeoff'] .navigationbar .body::-webkit-scrollbar,
[part='timeoff'] .navigationbar .body::-webkit-scrollbar-track,
[part='timeoff'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='timeoff'] .navigationbar .body::-webkit-scrollbar-track,
[part='timeoff'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='timeoff'] .navigationbar .body:hover::-webkit-scrollbar,
[part='timeoff'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='timeoff'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='timeoff'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='timeoff'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
/* Banner: Start */
.banner {
--product-banner-background-color: #72b0ff;
--product-banner-font-weight: 700;
}
/* Banner: End */
/* Navigation Bar: Start */
.navigationbar {
--banner-navigation-bar-breakpoint-desktop: 16rem;
/* 256px */
--banner-navigation-bar-breakpoint-desktop-nofooter: 9rem;
/* 144px */
--banner-navigation-bar-breakpoint-mobile: 20rem;
/* 320px */
--banner-navigation-bar-breakpoint-mobile-nofooter: 16.5rem;
/* 264px */
--banner-navigation-bar-sticky: 7rem;
/* 112px */
}
/* Navigation Bar: End */
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: Start */
/* Content: Start */
[part='wallet'] {
background-color: var(--color-secondary-modal-base);
}
/* Content: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Modal: Create Flex Time: Start */
/* Alert: Start */
[part='wallet'] .modalcreateflextime .alert,
[part='wallet'] .modalcreateflextime .wlfirst .listitem,
[part='wallet'] .modalcreateflextime .wltype .listitem,
[part='wallet'] .modalcreateflextime .stepone [data-style='typotitle3'],
[part='wallet'] .modalcreateflextime .steptwo [data-style='typotitle3'],
[part='wallet'] .modalcreateflextime .stepthree [data-style='typotitle3'] {
margin-bottom: var(--layout-xxx-small);
}
[part='wallet'] .modalcreateflextime .alert {
max-width: var(--percentage-100);
width: var(--percentage-100);
}
/* Alert: End */
/* List: Container: Start */
[part='wallet'] .modalcreateflextime .listcontainer.wlfirst,
[part='wallet'] .modalcreateflextime .listcontainer.wltype {
overflow: visible;
/* Item: Start */
/* Item: End */
}
[part='wallet'] .modalcreateflextime .listcontainer.wlfirst .listitem,
[part='wallet'] .modalcreateflextime .listcontainer.wltype .listitem {
border: solid var(--layout-border) var(--color-primary-border-base);
border-radius: var(--layout-base);
justify-content: space-between;
/* Inside: Start */
/* Inside: End */
}
[part='wallet'] .modalcreateflextime .listcontainer.wlfirst .listitem .linside,
[part='wallet'] .modalcreateflextime .listcontainer.wltype .listitem .linside {
align-items: center;
}
/* Type: Start */
[part='wallet'] .modalcreateflextime .listcontainer.wltype .listitem:last-child {
margin-bottom: var(--layout-0);
}
[part='wallet'] .modalcreateflextime .listcontainer.wltype .listitem .avatar {
box-shadow: var(--layout-0) var(--layout-border) var(--layout-half) rgba(var(--wallet-listitem-icon-shadow-rgba-color-r), var(--wallet-listitem-icon-shadow-rgba-color-g), var(--wallet-listitem-icon-shadow-rgba-color-b), var(--wallet-listitem-icon-shadow-rgba-color-a));
/* Variables: Start */
--box-shadow-rgba-color-a: 0.16;
--box-shadow-rgba-color-b: 0;
--box-shadow-rgba-color-g: 0;
--box-shadow-rgba-color-r: 0;
/* Variables: End */
border: solid var(--layout-border) var(--color-primary-border-light);
}
/* Avatar: Start */
/* Avatar: End */
/* Type: End */
/* List: Container: End */
/* Step: Three: Start */
/* Calendar: Start */
[part='wallet'] .modalcreateflextime .stepthree .field.containercalendar .flatpickr-input {
margin: auto;
}
/* Calendar: End */
/* Step: Three: End */
/* Modal: Create Flex Time: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Navigation Bar: Start */
[part='wallet'] .navigationbar {
padding-top: var(--navigation-bar-padding-top);
/* Body: Start */
/* Body: End */
}
[part='wallet'] .navigationbar .body {
padding: var(--layout-half);
/* Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Chrome, Edge & Safari: End */
/* States: Hover: Chrome, Edge & Safari: Start */
/* Bar: Start */
/* Bar: End */
/* Track: Start */
/* Track: End */
/* Thumb: Start */
/* Thumb: End */
/* States: Hover: Chrome, Edge & Safari: End */
}
[part='wallet'] .navigationbar .body::-webkit-scrollbar,
[part='wallet'] .navigationbar .body::-webkit-scrollbar-track,
[part='wallet'] .navigationbar .body::-webkit-scrollbar-thumb {
background: transparent;
}
[part='wallet'] .navigationbar .body::-webkit-scrollbar-track,
[part='wallet'] .navigationbar .body::-webkit-scrollbar-thumb {
box-shadow: none;
}
[part='wallet'] .navigationbar .body:hover::-webkit-scrollbar,
[part='wallet'] .navigationbar .body:hover::-webkit-scrollbar-track {
background-color: var(--color-primary-border-base);
}
[part='wallet'] .navigationbar .body:hover::-webkit-scrollbar-track,
[part='wallet'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
box-shadow: inset var(--layout-0) var(--layout-0) var(--scroll-webkit-scrollbar-track-blur) rgba(var(--box-shadow-inset-color-r), var(--box-shadow-inset-color-g), var(--box-shadow-inset-color-b), var(--alpha-30));
/* Variables: Start */
--box-shadow-inset-color-a: 0.16;
--box-shadow-inset-color-b: 0;
--box-shadow-inset-color-g: 0;
--box-shadow-inset-color-r: 0;
/* Variables: End */
}
[part='wallet'] .navigationbar .body:hover::-webkit-scrollbar-thumb {
background: var(--color-primary-border-dark);
}
/* Navigation Bar: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Variables: Start */
[part='wallet'] {
--wallet-listitem-icon-shadow-rgba-color-a: 0.4;
--wallet-listitem-icon-shadow-rgba-color-b: 135;
--wallet-listitem-icon-shadow-rgba-color-g: 125;
--wallet-listitem-icon-shadow-rgba-color-r: 96;
--wallet-listitem-shadow-rgba-color-a: 0.4;
--wallet-listitem-shadow-rgba-color-b: 135;
--wallet-listitem-shadow-rgba-color-g: 125;
--wallet-listitem-shadow-rgba-color-r: 96;
}
/* Variables: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Import: End */
/* Diseñado por: Lic. en Diseño Gráfico, José María 'Magnus' López Romera */
/* Product: End */