:root { --its-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --its-font-size: 1rem; } /* TEXT */ [data-font-size="x-large"] { --its-font-size: 1.2rem; } [data-font-size="large"] { --its-font-size: 1.1rem; } [data-font-size="medium"] { --its-font-size: 1rem; } [data-font-size="small"] { --its-font-size: 0.9rem; } [data-font-size="x-small"] { --its-font-size: 0.8rem; } [data-theme="light"] { --saturation-w-s: 050%; --lightness-w-s: 025%; --saturation-w-z: 050%; --lightness-w-z: 075%; --saturation-v-s: 050%; --lightness-v-s: 035%; --saturation-v-z: 050%; --lightness-v-z: 085%; /* W */ --its-color-XXX-w-s: hsl(000, 000%, 000%); --its-color-000-w-s: hsl(000, var(--saturation-w-s), var(--lightness-w-s)); --its-color-010-w-s: hsl(010, var(--saturation-w-s), var(--lightness-w-s)); --its-color-020-w-s: hsl(020, var(--saturation-w-s), var(--lightness-w-s)); --its-color-030-w-s: hsl(030, var(--saturation-w-s), var(--lightness-w-s)); --its-color-040-w-s: hsl(040, var(--saturation-w-s), var(--lightness-w-s)); --its-color-050-w-s: hsl(050, var(--saturation-w-s), var(--lightness-w-s)); --its-color-060-w-s: hsl(060, var(--saturation-w-s), var(--lightness-w-s)); --its-color-070-w-s: hsl(070, var(--saturation-w-s), var(--lightness-w-s)); --its-color-080-w-s: hsl(080, var(--saturation-w-s), var(--lightness-w-s)); --its-color-090-w-s: hsl(090, var(--saturation-w-s), var(--lightness-w-s)); --its-color-100-w-s: hsl(100, var(--saturation-w-s), var(--lightness-w-s)); --its-color-110-w-s: hsl(110, var(--saturation-w-s), var(--lightness-w-s)); --its-color-120-w-s: hsl(120, var(--saturation-w-s), var(--lightness-w-s)); --its-color-130-w-s: hsl(130, var(--saturation-w-s), var(--lightness-w-s)); --its-color-140-w-s: hsl(140, var(--saturation-w-s), var(--lightness-w-s)); --its-color-150-w-s: hsl(150, var(--saturation-w-s), var(--lightness-w-s)); --its-color-160-w-s: hsl(160, var(--saturation-w-s), var(--lightness-w-s)); --its-color-170-w-s: hsl(170, var(--saturation-w-s), var(--lightness-w-s)); --its-color-180-w-s: hsl(180, var(--saturation-w-s), var(--lightness-w-s)); --its-color-190-w-s: hsl(190, var(--saturation-w-s), var(--lightness-w-s)); --its-color-200-w-s: hsl(200, var(--saturation-w-s), var(--lightness-w-s)); --its-color-210-w-s: hsl(210, var(--saturation-w-s), var(--lightness-w-s)); --its-color-220-w-s: hsl(220, var(--saturation-w-s), var(--lightness-w-s)); --its-color-230-w-s: hsl(230, var(--saturation-w-s), var(--lightness-w-s)); --its-color-240-w-s: hsl(240, var(--saturation-w-s), var(--lightness-w-s)); --its-color-250-w-s: hsl(250, var(--saturation-w-s), var(--lightness-w-s)); --its-color-260-w-s: hsl(260, var(--saturation-w-s), var(--lightness-w-s)); --its-color-270-w-s: hsl(270, var(--saturation-w-s), var(--lightness-w-s)); --its-color-280-w-s: hsl(280, var(--saturation-w-s), var(--lightness-w-s)); --its-color-290-w-s: hsl(290, var(--saturation-w-s), var(--lightness-w-s)); --its-color-300-w-s: hsl(300, var(--saturation-w-s), var(--lightness-w-s)); --its-color-310-w-s: hsl(310, var(--saturation-w-s), var(--lightness-w-s)); --its-color-320-w-s: hsl(320, var(--saturation-w-s), var(--lightness-w-s)); --its-color-330-w-s: hsl(330, var(--saturation-w-s), var(--lightness-w-s)); --its-color-340-w-s: hsl(340, var(--saturation-w-s), var(--lightness-w-s)); --its-color-350-w-s: hsl(350, var(--saturation-w-s), var(--lightness-w-s)); --its-color-360-w-s: hsl(360, var(--saturation-w-s), var(--lightness-w-s)); /* INVERSE */ --its-color-XXX-w-z: hsl(000, 000%, 100%); --its-color-000-w-z: hsl(000, var(--saturation-w-z), var(--lightness-w-z)); --its-color-010-w-z: hsl(010, var(--saturation-w-z), var(--lightness-w-z)); --its-color-020-w-z: hsl(020, var(--saturation-w-z), var(--lightness-w-z)); --its-color-030-w-z: hsl(030, var(--saturation-w-z), var(--lightness-w-z)); --its-color-040-w-z: hsl(040, var(--saturation-w-z), var(--lightness-w-z)); --its-color-050-w-z: hsl(050, var(--saturation-w-z), var(--lightness-w-z)); --its-color-060-w-z: hsl(060, var(--saturation-w-z), var(--lightness-w-z)); --its-color-070-w-z: hsl(070, var(--saturation-w-z), var(--lightness-w-z)); --its-color-080-w-z: hsl(080, var(--saturation-w-z), var(--lightness-w-z)); --its-color-090-w-z: hsl(090, var(--saturation-w-z), var(--lightness-w-z)); --its-color-100-w-z: hsl(100, var(--saturation-w-z), var(--lightness-w-z)); --its-color-110-w-z: hsl(110, var(--saturation-w-z), var(--lightness-w-z)); --its-color-120-w-z: hsl(120, var(--saturation-w-z), var(--lightness-w-z)); --its-color-130-w-z: hsl(130, var(--saturation-w-z), var(--lightness-w-z)); --its-color-140-w-z: hsl(140, var(--saturation-w-z), var(--lightness-w-z)); --its-color-150-w-z: hsl(150, var(--saturation-w-z), var(--lightness-w-z)); --its-color-160-w-z: hsl(160, var(--saturation-w-z), var(--lightness-w-z)); --its-color-170-w-z: hsl(170, var(--saturation-w-z), var(--lightness-w-z)); --its-color-180-w-z: hsl(180, var(--saturation-w-z), var(--lightness-w-z)); --its-color-190-w-z: hsl(190, var(--saturation-w-z), var(--lightness-w-z)); --its-color-200-w-z: hsl(200, var(--saturation-w-z), var(--lightness-w-z)); --its-color-210-w-z: hsl(210, var(--saturation-w-z), var(--lightness-w-z)); --its-color-220-w-z: hsl(220, var(--saturation-w-z), var(--lightness-w-z)); --its-color-230-w-z: hsl(230, var(--saturation-w-z), var(--lightness-w-z)); --its-color-240-w-z: hsl(240, var(--saturation-w-z), var(--lightness-w-z)); --its-color-250-w-z: hsl(250, var(--saturation-w-z), var(--lightness-w-z)); --its-color-260-w-z: hsl(260, var(--saturation-w-z), var(--lightness-w-z)); --its-color-270-w-z: hsl(270, var(--saturation-w-z), var(--lightness-w-z)); --its-color-280-w-z: hsl(280, var(--saturation-w-z), var(--lightness-w-z)); --its-color-290-w-z: hsl(290, var(--saturation-w-z), var(--lightness-w-z)); --its-color-300-w-z: hsl(300, var(--saturation-w-z), var(--lightness-w-z)); --its-color-310-w-z: hsl(310, var(--saturation-w-z), var(--lightness-w-z)); --its-color-320-w-z: hsl(320, var(--saturation-w-z), var(--lightness-w-z)); --its-color-330-w-z: hsl(330, var(--saturation-w-z), var(--lightness-w-z)); --its-color-340-w-z: hsl(340, var(--saturation-w-z), var(--lightness-w-z)); --its-color-350-w-z: hsl(350, var(--saturation-w-z), var(--lightness-w-z)); --its-color-360-w-z: hsl(360, var(--saturation-w-z), var(--lightness-w-z)); /* V */ --its-color-XXX-v-s: hsl(000, 000%, 035%); --its-color-000-v-s: hsl(000, var(--saturation-v-s), var(--lightness-v-s)); --its-color-010-v-s: hsl(010, var(--saturation-v-s), var(--lightness-v-s)); --its-color-020-v-s: hsl(020, var(--saturation-v-s), var(--lightness-v-s)); --its-color-030-v-s: hsl(030, var(--saturation-v-s), var(--lightness-v-s)); --its-color-040-v-s: hsl(040, var(--saturation-v-s), var(--lightness-v-s)); --its-color-050-v-s: hsl(050, var(--saturation-v-s), var(--lightness-v-s)); --its-color-060-v-s: hsl(060, var(--saturation-v-s), var(--lightness-v-s)); --its-color-070-v-s: hsl(070, var(--saturation-v-s), var(--lightness-v-s)); --its-color-080-v-s: hsl(080, var(--saturation-v-s), var(--lightness-v-s)); --its-color-090-v-s: hsl(090, var(--saturation-v-s), var(--lightness-v-s)); --its-color-100-v-s: hsl(100, var(--saturation-v-s), var(--lightness-v-s)); --its-color-110-v-s: hsl(110, var(--saturation-v-s), var(--lightness-v-s)); --its-color-120-v-s: hsl(120, var(--saturation-v-s), var(--lightness-v-s)); --its-color-130-v-s: hsl(130, var(--saturation-v-s), var(--lightness-v-s)); --its-color-140-v-s: hsl(140, var(--saturation-v-s), var(--lightness-v-s)); --its-color-150-v-s: hsl(150, var(--saturation-v-s), var(--lightness-v-s)); --its-color-160-v-s: hsl(160, var(--saturation-v-s), var(--lightness-v-s)); --its-color-170-v-s: hsl(170, var(--saturation-v-s), var(--lightness-v-s)); --its-color-180-v-s: hsl(180, var(--saturation-v-s), var(--lightness-v-s)); --its-color-190-v-s: hsl(190, var(--saturation-v-s), var(--lightness-v-s)); --its-color-200-v-s: hsl(200, var(--saturation-v-s), var(--lightness-v-s)); --its-color-210-v-s: hsl(210, var(--saturation-v-s), var(--lightness-v-s)); --its-color-220-v-s: hsl(220, var(--saturation-v-s), var(--lightness-v-s)); --its-color-230-v-s: hsl(230, var(--saturation-v-s), var(--lightness-v-s)); --its-color-240-v-s: hsl(240, var(--saturation-v-s), var(--lightness-v-s)); --its-color-250-v-s: hsl(250, var(--saturation-v-s), var(--lightness-v-s)); --its-color-260-v-s: hsl(260, var(--saturation-v-s), var(--lightness-v-s)); --its-color-270-v-s: hsl(270, var(--saturation-v-s), var(--lightness-v-s)); --its-color-280-v-s: hsl(280, var(--saturation-v-s), var(--lightness-v-s)); --its-color-290-v-s: hsl(290, var(--saturation-v-s), var(--lightness-v-s)); --its-color-300-v-s: hsl(300, var(--saturation-v-s), var(--lightness-v-s)); --its-color-310-v-s: hsl(310, var(--saturation-v-s), var(--lightness-v-s)); --its-color-320-v-s: hsl(320, var(--saturation-v-s), var(--lightness-v-s)); --its-color-330-v-s: hsl(330, var(--saturation-v-s), var(--lightness-v-s)); --its-color-340-v-s: hsl(340, var(--saturation-v-s), var(--lightness-v-s)); --its-color-350-v-s: hsl(350, var(--saturation-v-s), var(--lightness-v-s)); --its-color-360-v-s: hsl(360, var(--saturation-v-s), var(--lightness-v-s)); /* INVERSE */ --its-color-XXX-v-z: hsl(000, 000%, 085%); --its-color-000-v-z: hsl(000, var(--saturation-v-z), var(--lightness-v-z)); --its-color-010-v-z: hsl(010, var(--saturation-v-z), var(--lightness-v-z)); --its-color-020-v-z: hsl(020, var(--saturation-v-z), var(--lightness-v-z)); --its-color-030-v-z: hsl(030, var(--saturation-v-z), var(--lightness-v-z)); --its-color-040-v-z: hsl(040, var(--saturation-v-z), var(--lightness-v-z)); --its-color-050-v-z: hsl(050, var(--saturation-v-z), var(--lightness-v-z)); --its-color-060-v-z: hsl(060, var(--saturation-v-z), var(--lightness-v-z)); --its-color-070-v-z: hsl(070, var(--saturation-v-z), var(--lightness-v-z)); --its-color-080-v-z: hsl(080, var(--saturation-v-z), var(--lightness-v-z)); --its-color-090-v-z: hsl(090, var(--saturation-v-z), var(--lightness-v-z)); --its-color-100-v-z: hsl(100, var(--saturation-v-z), var(--lightness-v-z)); --its-color-110-v-z: hsl(110, var(--saturation-v-z), var(--lightness-v-z)); --its-color-120-v-z: hsl(120, var(--saturation-v-z), var(--lightness-v-z)); --its-color-130-v-z: hsl(130, var(--saturation-v-z), var(--lightness-v-z)); --its-color-140-v-z: hsl(140, var(--saturation-v-z), var(--lightness-v-z)); --its-color-150-v-z: hsl(150, var(--saturation-v-z), var(--lightness-v-z)); --its-color-160-v-z: hsl(160, var(--saturation-v-z), var(--lightness-v-z)); --its-color-170-v-z: hsl(170, var(--saturation-v-z), var(--lightness-v-z)); --its-color-180-v-z: hsl(180, var(--saturation-v-z), var(--lightness-v-z)); --its-color-190-v-z: hsl(190, var(--saturation-v-z), var(--lightness-v-z)); --its-color-200-v-z: hsl(200, var(--saturation-v-z), var(--lightness-v-z)); --its-color-210-v-z: hsl(210, var(--saturation-v-z), var(--lightness-v-z)); --its-color-220-v-z: hsl(220, var(--saturation-v-z), var(--lightness-v-z)); --its-color-230-v-z: hsl(230, var(--saturation-v-z), var(--lightness-v-z)); --its-color-240-v-z: hsl(240, var(--saturation-v-z), var(--lightness-v-z)); --its-color-250-v-z: hsl(250, var(--saturation-v-z), var(--lightness-v-z)); --its-color-260-v-z: hsl(260, var(--saturation-v-z), var(--lightness-v-z)); --its-color-270-v-z: hsl(270, var(--saturation-v-z), var(--lightness-v-z)); --its-color-280-v-z: hsl(280, var(--saturation-v-z), var(--lightness-v-z)); --its-color-290-v-z: hsl(290, var(--saturation-v-z), var(--lightness-v-z)); --its-color-300-v-z: hsl(300, var(--saturation-v-z), var(--lightness-v-z)); --its-color-310-v-z: hsl(310, var(--saturation-v-z), var(--lightness-v-z)); --its-color-320-v-z: hsl(320, var(--saturation-v-z), var(--lightness-v-z)); --its-color-330-v-z: hsl(330, var(--saturation-v-z), var(--lightness-v-z)); --its-color-340-v-z: hsl(340, var(--saturation-v-z), var(--lightness-v-z)); --its-color-350-v-z: hsl(350, var(--saturation-v-z), var(--lightness-v-z)); --its-color-360-v-z: hsl(360, var(--saturation-v-z), var(--lightness-v-z)); } [data-theme="dark"] { --saturation-w-s: 075%; --lightness-w-s: 075%; --saturation-w-z: 040%; --lightness-w-z: 025%; --saturation-v-s: 050%; --lightness-v-s: 085%; --saturation-v-z: 060%; --lightness-v-z: 035%; /* W */ --its-color-XXX-w-s: hsl(000, 000%, 100%); --its-color-000-w-s: hsl(000, var(--saturation-w-s), var(--lightness-w-s)); --its-color-010-w-s: hsl(010, var(--saturation-w-s), var(--lightness-w-s)); --its-color-020-w-s: hsl(020, var(--saturation-w-s), var(--lightness-w-s)); --its-color-030-w-s: hsl(030, var(--saturation-w-s), var(--lightness-w-s)); --its-color-040-w-s: hsl(040, var(--saturation-w-s), var(--lightness-w-s)); --its-color-050-w-s: hsl(050, var(--saturation-w-s), var(--lightness-w-s)); --its-color-060-w-s: hsl(060, var(--saturation-w-s), var(--lightness-w-s)); --its-color-070-w-s: hsl(070, var(--saturation-w-s), var(--lightness-w-s)); --its-color-080-w-s: hsl(080, var(--saturation-w-s), var(--lightness-w-s)); --its-color-090-w-s: hsl(090, var(--saturation-w-s), var(--lightness-w-s)); --its-color-100-w-s: hsl(100, var(--saturation-w-s), var(--lightness-w-s)); --its-color-110-w-s: hsl(110, var(--saturation-w-s), var(--lightness-w-s)); --its-color-120-w-s: hsl(120, var(--saturation-w-s), var(--lightness-w-s)); --its-color-130-w-s: hsl(130, var(--saturation-w-s), var(--lightness-w-s)); --its-color-140-w-s: hsl(140, var(--saturation-w-s), var(--lightness-w-s)); --its-color-150-w-s: hsl(150, var(--saturation-w-s), var(--lightness-w-s)); --its-color-160-w-s: hsl(160, var(--saturation-w-s), var(--lightness-w-s)); --its-color-170-w-s: hsl(170, var(--saturation-w-s), var(--lightness-w-s)); --its-color-180-w-s: hsl(180, var(--saturation-w-s), var(--lightness-w-s)); --its-color-190-w-s: hsl(190, var(--saturation-w-s), var(--lightness-w-s)); --its-color-200-w-s: hsl(200, var(--saturation-w-s), var(--lightness-w-s)); --its-color-210-w-s: hsl(210, var(--saturation-w-s), var(--lightness-w-s)); --its-color-220-w-s: hsl(220, var(--saturation-w-s), var(--lightness-w-s)); --its-color-230-w-s: hsl(230, var(--saturation-w-s), var(--lightness-w-s)); --its-color-240-w-s: hsl(240, var(--saturation-w-s), var(--lightness-w-s)); --its-color-250-w-s: hsl(250, var(--saturation-w-s), var(--lightness-w-s)); --its-color-260-w-s: hsl(260, var(--saturation-w-s), var(--lightness-w-s)); --its-color-270-w-s: hsl(270, var(--saturation-w-s), var(--lightness-w-s)); --its-color-280-w-s: hsl(280, var(--saturation-w-s), var(--lightness-w-s)); --its-color-290-w-s: hsl(290, var(--saturation-w-s), var(--lightness-w-s)); --its-color-300-w-s: hsl(300, var(--saturation-w-s), var(--lightness-w-s)); --its-color-310-w-s: hsl(310, var(--saturation-w-s), var(--lightness-w-s)); --its-color-320-w-s: hsl(320, var(--saturation-w-s), var(--lightness-w-s)); --its-color-330-w-s: hsl(330, var(--saturation-w-s), var(--lightness-w-s)); --its-color-340-w-s: hsl(340, var(--saturation-w-s), var(--lightness-w-s)); --its-color-350-w-s: hsl(350, var(--saturation-w-s), var(--lightness-w-s)); --its-color-360-w-s: hsl(360, var(--saturation-w-s), var(--lightness-w-s)); /* INVERSE */ --its-color-XXX-w-z: hsl(000, 000%, 000%); --its-color-000-w-z: hsl(000, var(--saturation-w-z), var(--lightness-w-z)); --its-color-010-w-z: hsl(010, var(--saturation-w-z), var(--lightness-w-z)); --its-color-020-w-z: hsl(020, var(--saturation-w-z), var(--lightness-w-z)); --its-color-030-w-z: hsl(030, var(--saturation-w-z), var(--lightness-w-z)); --its-color-040-w-z: hsl(040, var(--saturation-w-z), var(--lightness-w-z)); --its-color-050-w-z: hsl(050, var(--saturation-w-z), var(--lightness-w-z)); --its-color-060-w-z: hsl(060, var(--saturation-w-z), var(--lightness-w-z)); --its-color-070-w-z: hsl(070, var(--saturation-w-z), var(--lightness-w-z)); --its-color-080-w-z: hsl(080, var(--saturation-w-z), var(--lightness-w-z)); --its-color-090-w-z: hsl(090, var(--saturation-w-z), var(--lightness-w-z)); --its-color-100-w-z: hsl(100, var(--saturation-w-z), var(--lightness-w-z)); --its-color-110-w-z: hsl(110, var(--saturation-w-z), var(--lightness-w-z)); --its-color-120-w-z: hsl(120, var(--saturation-w-z), var(--lightness-w-z)); --its-color-130-w-z: hsl(130, var(--saturation-w-z), var(--lightness-w-z)); --its-color-140-w-z: hsl(140, var(--saturation-w-z), var(--lightness-w-z)); --its-color-150-w-z: hsl(150, var(--saturation-w-z), var(--lightness-w-z)); --its-color-160-w-z: hsl(160, var(--saturation-w-z), var(--lightness-w-z)); --its-color-170-w-z: hsl(170, var(--saturation-w-z), var(--lightness-w-z)); --its-color-180-w-z: hsl(180, var(--saturation-w-z), var(--lightness-w-z)); --its-color-190-w-z: hsl(190, var(--saturation-w-z), var(--lightness-w-z)); --its-color-200-w-z: hsl(200, var(--saturation-w-z), var(--lightness-w-z)); --its-color-210-w-z: hsl(210, var(--saturation-w-z), var(--lightness-w-z)); --its-color-220-w-z: hsl(220, var(--saturation-w-z), var(--lightness-w-z)); --its-color-230-w-z: hsl(230, var(--saturation-w-z), var(--lightness-w-z)); --its-color-240-w-z: hsl(240, var(--saturation-w-z), var(--lightness-w-z)); --its-color-250-w-z: hsl(250, var(--saturation-w-z), var(--lightness-w-z)); --its-color-260-w-z: hsl(260, var(--saturation-w-z), var(--lightness-w-z)); --its-color-270-w-z: hsl(270, var(--saturation-w-z), var(--lightness-w-z)); --its-color-280-w-z: hsl(280, var(--saturation-w-z), var(--lightness-w-z)); --its-color-290-w-z: hsl(290, var(--saturation-w-z), var(--lightness-w-z)); --its-color-300-w-z: hsl(300, var(--saturation-w-z), var(--lightness-w-z)); --its-color-310-w-z: hsl(310, var(--saturation-w-z), var(--lightness-w-z)); --its-color-320-w-z: hsl(320, var(--saturation-w-z), var(--lightness-w-z)); --its-color-330-w-z: hsl(330, var(--saturation-w-z), var(--lightness-w-z)); --its-color-340-w-z: hsl(340, var(--saturation-w-z), var(--lightness-w-z)); --its-color-350-w-z: hsl(350, var(--saturation-w-z), var(--lightness-w-z)); --its-color-360-w-z: hsl(360, var(--saturation-w-z), var(--lightness-w-z)); /* V */ --its-color-XXX-v-s: hsl(000, 000%, 085%); --its-color-000-v-s: hsl(000, var(--saturation-v-s), var(--lightness-v-s)); --its-color-010-v-s: hsl(010, var(--saturation-v-s), var(--lightness-v-s)); --its-color-020-v-s: hsl(020, var(--saturation-v-s), var(--lightness-v-s)); --its-color-030-v-s: hsl(030, var(--saturation-v-s), var(--lightness-v-s)); --its-color-040-v-s: hsl(040, var(--saturation-v-s), var(--lightness-v-s)); --its-color-050-v-s: hsl(050, var(--saturation-v-s), var(--lightness-v-s)); --its-color-060-v-s: hsl(060, var(--saturation-v-s), var(--lightness-v-s)); --its-color-070-v-s: hsl(070, var(--saturation-v-s), var(--lightness-v-s)); --its-color-080-v-s: hsl(080, var(--saturation-v-s), var(--lightness-v-s)); --its-color-090-v-s: hsl(090, var(--saturation-v-s), var(--lightness-v-s)); --its-color-100-v-s: hsl(100, var(--saturation-v-s), var(--lightness-v-s)); --its-color-110-v-s: hsl(110, var(--saturation-v-s), var(--lightness-v-s)); --its-color-120-v-s: hsl(120, var(--saturation-v-s), var(--lightness-v-s)); --its-color-130-v-s: hsl(130, var(--saturation-v-s), var(--lightness-v-s)); --its-color-140-v-s: hsl(140, var(--saturation-v-s), var(--lightness-v-s)); --its-color-150-v-s: hsl(150, var(--saturation-v-s), var(--lightness-v-s)); --its-color-160-v-s: hsl(160, var(--saturation-v-s), var(--lightness-v-s)); --its-color-170-v-s: hsl(170, var(--saturation-v-s), var(--lightness-v-s)); --its-color-180-v-s: hsl(180, var(--saturation-v-s), var(--lightness-v-s)); --its-color-190-v-s: hsl(190, var(--saturation-v-s), var(--lightness-v-s)); --its-color-200-v-s: hsl(200, var(--saturation-v-s), var(--lightness-v-s)); --its-color-210-v-s: hsl(210, var(--saturation-v-s), var(--lightness-v-s)); --its-color-220-v-s: hsl(220, var(--saturation-v-s), var(--lightness-v-s)); --its-color-230-v-s: hsl(230, var(--saturation-v-s), var(--lightness-v-s)); --its-color-240-v-s: hsl(240, var(--saturation-v-s), var(--lightness-v-s)); --its-color-250-v-s: hsl(250, var(--saturation-v-s), var(--lightness-v-s)); --its-color-260-v-s: hsl(260, var(--saturation-v-s), var(--lightness-v-s)); --its-color-270-v-s: hsl(270, var(--saturation-v-s), var(--lightness-v-s)); --its-color-280-v-s: hsl(280, var(--saturation-v-s), var(--lightness-v-s)); --its-color-290-v-s: hsl(290, var(--saturation-v-s), var(--lightness-v-s)); --its-color-300-v-s: hsl(300, var(--saturation-v-s), var(--lightness-v-s)); --its-color-310-v-s: hsl(310, var(--saturation-v-s), var(--lightness-v-s)); --its-color-320-v-s: hsl(320, var(--saturation-v-s), var(--lightness-v-s)); --its-color-330-v-s: hsl(330, var(--saturation-v-s), var(--lightness-v-s)); --its-color-340-v-s: hsl(340, var(--saturation-v-s), var(--lightness-v-s)); --its-color-350-v-s: hsl(350, var(--saturation-v-s), var(--lightness-v-s)); --its-color-360-v-s: hsl(360, var(--saturation-v-s), var(--lightness-v-s)); /* INVERSE */ --its-color-XXX-v-z: hsl(000, 000%, 035%); --its-color-000-v-z: hsl(000, var(--saturation-v-z), var(--lightness-v-z)); --its-color-010-v-z: hsl(010, var(--saturation-v-z), var(--lightness-v-z)); --its-color-020-v-z: hsl(020, var(--saturation-v-z), var(--lightness-v-z)); --its-color-030-v-z: hsl(030, var(--saturation-v-z), var(--lightness-v-z)); --its-color-040-v-z: hsl(040, var(--saturation-v-z), var(--lightness-v-z)); --its-color-050-v-z: hsl(050, var(--saturation-v-z), var(--lightness-v-z)); --its-color-060-v-z: hsl(060, var(--saturation-v-z), var(--lightness-v-z)); --its-color-070-v-z: hsl(070, var(--saturation-v-z), var(--lightness-v-z)); --its-color-080-v-z: hsl(080, var(--saturation-v-z), var(--lightness-v-z)); --its-color-090-v-z: hsl(090, var(--saturation-v-z), var(--lightness-v-z)); --its-color-100-v-z: hsl(100, var(--saturation-v-z), var(--lightness-v-z)); --its-color-110-v-z: hsl(110, var(--saturation-v-z), var(--lightness-v-z)); --its-color-120-v-z: hsl(120, var(--saturation-v-z), var(--lightness-v-z)); --its-color-130-v-z: hsl(130, var(--saturation-v-z), var(--lightness-v-z)); --its-color-140-v-z: hsl(140, var(--saturation-v-z), var(--lightness-v-z)); --its-color-150-v-z: hsl(150, var(--saturation-v-z), var(--lightness-v-z)); --its-color-160-v-z: hsl(160, var(--saturation-v-z), var(--lightness-v-z)); --its-color-170-v-z: hsl(170, var(--saturation-v-z), var(--lightness-v-z)); --its-color-180-v-z: hsl(180, var(--saturation-v-z), var(--lightness-v-z)); --its-color-190-v-z: hsl(190, var(--saturation-v-z), var(--lightness-v-z)); --its-color-200-v-z: hsl(200, var(--saturation-v-z), var(--lightness-v-z)); --its-color-210-v-z: hsl(210, var(--saturation-v-z), var(--lightness-v-z)); --its-color-220-v-z: hsl(220, var(--saturation-v-z), var(--lightness-v-z)); --its-color-230-v-z: hsl(230, var(--saturation-v-z), var(--lightness-v-z)); --its-color-240-v-z: hsl(240, var(--saturation-v-z), var(--lightness-v-z)); --its-color-250-v-z: hsl(250, var(--saturation-v-z), var(--lightness-v-z)); --its-color-260-v-z: hsl(260, var(--saturation-v-z), var(--lightness-v-z)); --its-color-270-v-z: hsl(270, var(--saturation-v-z), var(--lightness-v-z)); --its-color-280-v-z: hsl(280, var(--saturation-v-z), var(--lightness-v-z)); --its-color-290-v-z: hsl(290, var(--saturation-v-z), var(--lightness-v-z)); --its-color-300-v-z: hsl(300, var(--saturation-v-z), var(--lightness-v-z)); --its-color-310-v-z: hsl(310, var(--saturation-v-z), var(--lightness-v-z)); --its-color-320-v-z: hsl(320, var(--saturation-v-z), var(--lightness-v-z)); --its-color-330-v-z: hsl(330, var(--saturation-v-z), var(--lightness-v-z)); --its-color-340-v-z: hsl(340, var(--saturation-v-z), var(--lightness-v-z)); --its-color-350-v-z: hsl(350, var(--saturation-v-z), var(--lightness-v-z)); --its-color-360-v-z: hsl(360, var(--saturation-v-z), var(--lightness-v-z)); } /* STRING */ .its-SC-XXX-w-s{ color: var(--its-color-XXX-w-s); } .its-SC-010-w-s{ color: var(--its-color-010-w-s); } .its-SC-030-w-s{ color: var(--its-color-030-w-s); } .its-SC-050-w-s{ color: var(--its-color-050-w-s); } .its-SC-070-w-s{ color: var(--its-color-070-w-s); } .its-SC-090-w-s{ color: var(--its-color-090-w-s); } .its-SC-110-w-s{ color: var(--its-color-110-w-s); } .its-SC-130-w-s{ color: var(--its-color-130-w-s); } .its-SC-150-w-s{ color: var(--its-color-150-w-s); } .its-SC-170-w-s{ color: var(--its-color-170-w-s); } .its-SC-190-w-s{ color: var(--its-color-190-w-s); } .its-SC-210-w-s{ color: var(--its-color-210-w-s); } .its-SC-230-w-s{ color: var(--its-color-230-w-s); } .its-SC-250-w-s{ color: var(--its-color-250-w-s); } .its-SC-270-w-s{ color: var(--its-color-270-w-s); } .its-SC-290-w-s{ color: var(--its-color-290-w-s); } .its-SC-310-w-s{ color: var(--its-color-310-w-s); } .its-SC-330-w-s{ color: var(--its-color-330-w-s); } .its-SC-350-w-s{ color: var(--its-color-350-w-s); } /* INVERSE */ .its-SC-XXX-w-z{ color: var(--its-color-XXX-w-z); } .its-SC-010-w-z{ color: var(--its-color-010-w-z); } .its-SC-030-w-z{ color: var(--its-color-030-w-z); } .its-SC-050-w-z{ color: var(--its-color-050-w-z); } .its-SC-070-w-z{ color: var(--its-color-070-w-z); } .its-SC-090-w-z{ color: var(--its-color-090-w-z); } .its-SC-110-w-z{ color: var(--its-color-110-w-z); } .its-SC-130-w-z{ color: var(--its-color-130-w-z); } .its-SC-150-w-z{ color: var(--its-color-150-w-z); } .its-SC-170-w-z{ color: var(--its-color-170-w-z); } .its-SC-190-w-z{ color: var(--its-color-190-w-z); } .its-SC-210-w-z{ color: var(--its-color-210-w-z); } .its-SC-230-w-z{ color: var(--its-color-230-w-z); } .its-SC-250-w-z{ color: var(--its-color-250-w-z); } .its-SC-270-w-z{ color: var(--its-color-270-w-z); } .its-SC-290-w-z{ color: var(--its-color-290-w-z); } .its-SC-310-w-z{ color: var(--its-color-310-w-z); } .its-SC-330-w-z{ color: var(--its-color-330-w-z); } .its-SC-350-w-z{ color: var(--its-color-350-w-z); } .its-SC-XXX-v-s{ color: var(--its-color-XXX-v-s); } .its-SC-010-v-s{ color: var(--its-color-010-v-s); } .its-SC-030-v-s{ color: var(--its-color-030-v-s); } .its-SC-050-v-s{ color: var(--its-color-050-v-s); } .its-SC-070-v-s{ color: var(--its-color-070-v-s); } .its-SC-090-v-s{ color: var(--its-color-090-v-s); } .its-SC-110-v-s{ color: var(--its-color-110-v-s); } .its-SC-130-v-s{ color: var(--its-color-130-v-s); } .its-SC-150-v-s{ color: var(--its-color-150-v-s); } .its-SC-170-v-s{ color: var(--its-color-170-v-s); } .its-SC-190-v-s{ color: var(--its-color-190-v-s); } .its-SC-210-v-s{ color: var(--its-color-210-v-s); } .its-SC-230-v-s{ color: var(--its-color-230-v-s); } .its-SC-250-v-s{ color: var(--its-color-250-v-s); } .its-SC-270-v-s{ color: var(--its-color-270-v-s); } .its-SC-290-v-s{ color: var(--its-color-290-v-s); } .its-SC-310-v-s{ color: var(--its-color-310-v-s); } .its-SC-330-v-s{ color: var(--its-color-330-v-s); } .its-SC-350-v-s{ color: var(--its-color-350-v-s); } /* INVERSE */ .its-SC-XXX-v-z{ color: var(--its-color-XXX-v-z); } .its-SC-010-v-z{ color: var(--its-color-010-v-z); } .its-SC-030-v-z{ color: var(--its-color-030-v-z); } .its-SC-050-v-z{ color: var(--its-color-050-v-z); } .its-SC-070-v-z{ color: var(--its-color-070-v-z); } .its-SC-090-v-z{ color: var(--its-color-090-v-z); } .its-SC-110-v-z{ color: var(--its-color-110-v-z); } .its-SC-130-v-z{ color: var(--its-color-130-v-z); } .its-SC-150-v-z{ color: var(--its-color-150-v-z); } .its-SC-170-v-z{ color: var(--its-color-170-v-z); } .its-SC-190-v-z{ color: var(--its-color-190-v-z); } .its-SC-210-v-z{ color: var(--its-color-210-v-z); } .its-SC-230-v-z{ color: var(--its-color-230-v-z); } .its-SC-250-v-z{ color: var(--its-color-250-v-z); } .its-SC-270-v-z{ color: var(--its-color-270-v-z); } .its-SC-290-v-z{ color: var(--its-color-290-v-z); } .its-SC-310-v-z{ color: var(--its-color-310-v-z); } .its-SC-330-v-z{ color: var(--its-color-330-v-z); } .its-SC-350-v-z{ color: var(--its-color-350-v-z); } /* GROUND */ .its-GC-XXX-w-s{ background-color: var(--its-color-XXX-w-s); } .its-GC-010-w-s{ background-color: var(--its-color-010-w-s); } .its-GC-030-w-s{ background-color: var(--its-color-030-w-s); } .its-GC-050-w-s{ background-color: var(--its-color-050-w-s); } .its-GC-070-w-s{ background-color: var(--its-color-070-w-s); } .its-GC-090-w-s{ background-color: var(--its-color-090-w-s); } .its-GC-110-w-s{ background-color: var(--its-color-110-w-s); } .its-GC-130-w-s{ background-color: var(--its-color-130-w-s); } .its-GC-150-w-s{ background-color: var(--its-color-150-w-s); } .its-GC-170-w-s{ background-color: var(--its-color-170-w-s); } .its-GC-190-w-s{ background-color: var(--its-color-190-w-s); } .its-GC-210-w-s{ background-color: var(--its-color-210-w-s); } .its-GC-230-w-s{ background-color: var(--its-color-230-w-s); } .its-GC-250-w-s{ background-color: var(--its-color-250-w-s); } .its-GC-270-w-s{ background-color: var(--its-color-270-w-s); } .its-GC-290-w-s{ background-color: var(--its-color-290-w-s); } .its-GC-310-w-s{ background-color: var(--its-color-310-w-s); } .its-GC-330-w-s{ background-color: var(--its-color-330-w-s); } .its-GC-350-w-s{ background-color: var(--its-color-350-w-s); } /* INVERSE */ .its-GC-XXX-w-z{ background-color: var(--its-color-XXX-w-z); } .its-GC-010-w-z{ background-color: var(--its-color-010-w-z); } .its-GC-030-w-z{ background-color: var(--its-color-030-w-z); } .its-GC-050-w-z{ background-color: var(--its-color-050-w-z); } .its-GC-070-w-z{ background-color: var(--its-color-070-w-z); } .its-GC-090-w-z{ background-color: var(--its-color-090-w-z); } .its-GC-110-w-z{ background-color: var(--its-color-110-w-z); } .its-GC-130-w-z{ background-color: var(--its-color-130-w-z); } .its-GC-150-w-z{ background-color: var(--its-color-150-w-z); } .its-GC-170-w-z{ background-color: var(--its-color-170-w-z); } .its-GC-190-w-z{ background-color: var(--its-color-190-w-z); } .its-GC-210-w-z{ background-color: var(--its-color-210-w-z); } .its-GC-230-w-z{ background-color: var(--its-color-230-w-z); } .its-GC-250-w-z{ background-color: var(--its-color-250-w-z); } .its-GC-270-w-z{ background-color: var(--its-color-270-w-z); } .its-GC-290-w-z{ background-color: var(--its-color-290-w-z); } .its-GC-310-w-z{ background-color: var(--its-color-310-w-z); } .its-GC-330-w-z{ background-color: var(--its-color-330-w-z); } .its-GC-350-w-z{ background-color: var(--its-color-350-w-z); } .its-GC-XXX-v-s{ background-color: var(--its-color-XXX-v-s); } .its-GC-010-v-s{ background-color: var(--its-color-010-v-s); } .its-GC-030-v-s{ background-color: var(--its-color-030-v-s); } .its-GC-050-v-s{ background-color: var(--its-color-050-v-s); } .its-GC-070-v-s{ background-color: var(--its-color-070-v-s); } .its-GC-090-v-s{ background-color: var(--its-color-090-v-s); } .its-GC-110-v-s{ background-color: var(--its-color-110-v-s); } .its-GC-130-v-s{ background-color: var(--its-color-130-v-s); } .its-GC-150-v-s{ background-color: var(--its-color-150-v-s); } .its-GC-170-v-s{ background-color: var(--its-color-170-v-s); } .its-GC-190-v-s{ background-color: var(--its-color-190-v-s); } .its-GC-210-v-s{ background-color: var(--its-color-210-v-s); } .its-GC-230-v-s{ background-color: var(--its-color-230-v-s); } .its-GC-250-v-s{ background-color: var(--its-color-250-v-s); } .its-GC-270-v-s{ background-color: var(--its-color-270-v-s); } .its-GC-290-v-s{ background-color: var(--its-color-290-v-s); } .its-GC-310-v-s{ background-color: var(--its-color-310-v-s); } .its-GC-330-v-s{ background-color: var(--its-color-330-v-s); } .its-GC-350-v-s{ background-color: var(--its-color-350-v-s); } /* INVERSE */ .its-GC-XXX-v-z{ background-color: var(--its-color-XXX-v-z); } .its-GC-010-v-z{ background-color: var(--its-color-010-v-z); } .its-GC-030-v-z{ background-color: var(--its-color-030-v-z); } .its-GC-050-v-z{ background-color: var(--its-color-050-v-z); } .its-GC-070-v-z{ background-color: var(--its-color-070-v-z); } .its-GC-090-v-z{ background-color: var(--its-color-090-v-z); } .its-GC-110-v-z{ background-color: var(--its-color-110-v-z); } .its-GC-130-v-z{ background-color: var(--its-color-130-v-z); } .its-GC-150-v-z{ background-color: var(--its-color-150-v-z); } .its-GC-170-v-z{ background-color: var(--its-color-170-v-z); } .its-GC-190-v-z{ background-color: var(--its-color-190-v-z); } .its-GC-210-v-z{ background-color: var(--its-color-210-v-z); } .its-GC-230-v-z{ background-color: var(--its-color-230-v-z); } .its-GC-250-v-z{ background-color: var(--its-color-250-v-z); } .its-GC-270-v-z{ background-color: var(--its-color-270-v-z); } .its-GC-290-v-z{ background-color: var(--its-color-290-v-z); } .its-GC-310-v-z{ background-color: var(--its-color-310-v-z); } .its-GC-330-v-z{ background-color: var(--its-color-330-v-z); } .its-GC-350-v-z{ background-color: var(--its-color-350-v-z); } /* BORDER */ .its-BC-XXX-w-s{ border-color: var(--its-color-XXX-w-s); } .its-BC-010-w-s{ border-color: var(--its-color-010-w-s); } .its-BC-030-w-s{ border-color: var(--its-color-030-w-s); } .its-BC-050-w-s{ border-color: var(--its-color-050-w-s); } .its-BC-070-w-s{ border-color: var(--its-color-070-w-s); } .its-BC-090-w-s{ border-color: var(--its-color-090-w-s); } .its-BC-110-w-s{ border-color: var(--its-color-110-w-s); } .its-BC-130-w-s{ border-color: var(--its-color-130-w-s); } .its-BC-150-w-s{ border-color: var(--its-color-150-w-s); } .its-BC-170-w-s{ border-color: var(--its-color-170-w-s); } .its-BC-190-w-s{ border-color: var(--its-color-190-w-s); } .its-BC-210-w-s{ border-color: var(--its-color-210-w-s); } .its-BC-230-w-s{ border-color: var(--its-color-230-w-s); } .its-BC-250-w-s{ border-color: var(--its-color-250-w-s); } .its-BC-270-w-s{ border-color: var(--its-color-270-w-s); } .its-BC-290-w-s{ border-color: var(--its-color-290-w-s); } .its-BC-310-w-s{ border-color: var(--its-color-310-w-s); } .its-BC-330-w-s{ border-color: var(--its-color-330-w-s); } .its-BC-350-w-s{ border-color: var(--its-color-350-w-s); } /* INVERSE */ .its-BC-XXX-w-z{ border-color: var(--its-color-XXX-w-z); } .its-BC-010-w-z{ border-color: var(--its-color-010-w-z); } .its-BC-030-w-z{ border-color: var(--its-color-030-w-z); } .its-BC-050-w-z{ border-color: var(--its-color-050-w-z); } .its-BC-070-w-z{ border-color: var(--its-color-070-w-z); } .its-BC-090-w-z{ border-color: var(--its-color-090-w-z); } .its-BC-110-w-z{ border-color: var(--its-color-110-w-z); } .its-BC-130-w-z{ border-color: var(--its-color-130-w-z); } .its-BC-150-w-z{ border-color: var(--its-color-150-w-z); } .its-BC-170-w-z{ border-color: var(--its-color-170-w-z); } .its-BC-190-w-z{ border-color: var(--its-color-190-w-z); } .its-BC-210-w-z{ border-color: var(--its-color-210-w-z); } .its-BC-230-w-z{ border-color: var(--its-color-230-w-z); } .its-BC-250-w-z{ border-color: var(--its-color-250-w-z); } .its-BC-270-w-z{ border-color: var(--its-color-270-w-z); } .its-BC-290-w-z{ border-color: var(--its-color-290-w-z); } .its-BC-310-w-z{ border-color: var(--its-color-310-w-z); } .its-BC-330-w-z{ border-color: var(--its-color-330-w-z); } .its-BC-350-w-z{ border-color: var(--its-color-350-w-z); } .its-BC-XXX-v-s{ border-color: var(--its-color-XXX-v-s); } .its-BC-010-v-s{ border-color: var(--its-color-010-v-s); } .its-BC-030-v-s{ border-color: var(--its-color-030-v-s); } .its-BC-050-v-s{ border-color: var(--its-color-050-v-s); } .its-BC-070-v-s{ border-color: var(--its-color-070-v-s); } .its-BC-090-v-s{ border-color: var(--its-color-090-v-s); } .its-BC-110-v-s{ border-color: var(--its-color-110-v-s); } .its-BC-130-v-s{ border-color: var(--its-color-130-v-s); } .its-BC-150-v-s{ border-color: var(--its-color-150-v-s); } .its-BC-170-v-s{ border-color: var(--its-color-170-v-s); } .its-BC-190-v-s{ border-color: var(--its-color-190-v-s); } .its-BC-210-v-s{ border-color: var(--its-color-210-v-s); } .its-BC-230-v-s{ border-color: var(--its-color-230-v-s); } .its-BC-250-v-s{ border-color: var(--its-color-250-v-s); } .its-BC-270-v-s{ border-color: var(--its-color-270-v-s); } .its-BC-290-v-s{ border-color: var(--its-color-290-v-s); } .its-BC-310-v-s{ border-color: var(--its-color-310-v-s); } .its-BC-330-v-s{ border-color: var(--its-color-330-v-s); } .its-BC-350-v-s{ border-color: var(--its-color-350-v-s); } /* INVERSE */ .its-BC-XXX-v-z{ border-color: var(--its-color-XXX-v-z); } .its-BC-010-v-z{ border-color: var(--its-color-010-v-z); } .its-BC-030-v-z{ border-color: var(--its-color-030-v-z); } .its-BC-050-v-z{ border-color: var(--its-color-050-v-z); } .its-BC-070-v-z{ border-color: var(--its-color-070-v-z); } .its-BC-090-v-z{ border-color: var(--its-color-090-v-z); } .its-BC-110-v-z{ border-color: var(--its-color-110-v-z); } .its-BC-130-v-z{ border-color: var(--its-color-130-v-z); } .its-BC-150-v-z{ border-color: var(--its-color-150-v-z); } .its-BC-170-v-z{ border-color: var(--its-color-170-v-z); } .its-BC-190-v-z{ border-color: var(--its-color-190-v-z); } .its-BC-210-v-z{ border-color: var(--its-color-210-v-z); } .its-BC-230-v-z{ border-color: var(--its-color-230-v-z); } .its-BC-250-v-z{ border-color: var(--its-color-250-v-z); } .its-BC-270-v-z{ border-color: var(--its-color-270-v-z); } .its-BC-290-v-z{ border-color: var(--its-color-290-v-z); } .its-BC-310-v-z{ border-color: var(--its-color-310-v-z); } .its-BC-330-v-z{ border-color: var(--its-color-330-v-z); } .its-BC-350-v-z{ border-color: var(--its-color-350-v-z); } * { margin: 0; padding: 0; border: 0; outline: none; vertical-align: middle; font-size: 100%; font: inherit; } *,*::before,*::after {box-sizing: border-box;} html { width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--its-color-XXX-w-z); -ms-touch-action: manipulation; touch-action: manipulation; /* scrollbar-width: none; Сокрытие полосы прокуртки для всех остальных браузеров */ } /* Сокрытие полосы прокуртки для браузеров webkit */ /* html::-webkit-scrollbar { width: 0px; height: 0px; background: rgba(255, 255, 255, 0.0); } */ /* html::-webkit-scrollbar { background: var(--its-color-XXX-w-s); } */ body { position: relative; display: flex; flex-direction: column; overflow-y: scroll; /* всегда отображать полосу прокрутки */ width: 100%; min-width: 640px; min-height: 100%;/* используется min-height чтобы была прокрутка и прижимался футер */ margin: 0; padding: 0; background-color: var(--its-color-XXX-w-z); font-family: var(--its-font-sans-serif); font-size: var(--its-font-size); font-weight: 400; line-height: 1; color: var(--its-color-XXX-w-s); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* HEADER */ .its-header { position: relative; width: 100%; white-space: nowrap; overflow: hidden; background-color: var(--its-color-200-w-s); } .its-header-wrapper { width: 100%; max-width: 1280px; margin: 0 auto; padding: 50px 20px 30px 20px; white-space: nowrap; overflow: hidden; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .its-header-logo { margin-inline-end: 2rem; display: flex; flex-shrink: 0; } .its-header-logo img { margin-inline-start: .5rem; width: 42px; height: 42px; cursor: pointer; } .its-header-logo span { color: var(--its-color-XXX-w-z); font-size: 2.6rem; font-weight: 600; text-decoration: none; cursor: pointer; } .its-header-logo span:hover { color: var(--its-color-050-v-z); } /* flex-grow: 1!important; */ .its-header-navi { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; padding: 2px 0 0 0; overflow: hidden; white-space: nowrap; } /* .its-header-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; width: 100%; overflow: hidden; white-space: nowrap; } */ .its-header-item { padding: 0 1rem 0 0; white-space: nowrap; } /* .its-header-item.its-active a { border-color: var(--its-color-XXX-w-z); } */ .its-header-item a { color: var(--its-color-XXX-w-z); font-size: 1.3rem; font-weight: 600; text-decoration: none; /* border-bottom: 3px solid transparent; */ /* border-bottom: 3px solid var(--its-color-050-v-z); */ } .its-header-item a:hover { color: var(--its-color-050-v-z); /* border-bottom: 3px solid var(--its-color-050-v-z); */ } .its-header-auth { margin-inline-start: 2rem; } .its-header-auth div { /* width: 180px; */ /* height: 38px; */ vertical-align: middle; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; color: var(--its-color-XXX-w-z); border: 1px solid var(--its-color-XXX-w-z); background-color: var(--its-color-260-v-s); border-radius: 25px; padding: 5px 13px 5px 13px; } .its-header-auth div i { line-height: 1; color: var(--its-color-XXX-w-z); } .its-header-auth div a { line-height: 1; color: var(--its-color-XXX-w-z); font-size: 1.1rem; font-weight: 600; text-decoration: none; padding: .6rem .5rem .5rem .5rem; } .its-header-auth div a:hover { color: var(--its-color-050-v-z); } /* CONTENT */ .its-content { position: relative; flex: 1 1 auto; width: 100%; height: 100%; white-space: nowrap; overflow: hidden; background-color: var(--its-color-XXX-w-z); } /* padding-bottom: 200px; */ /* TABS SECTION */ .its-tabs-section { display: flex; flex-direction: row; position: relative; background-color: var(--its-color-200-w-s); } .its-tabs-margin { flex: 1 1 auto!important; } .its-tabs-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; width: 100%; max-width: 1280px; position: relative; } .its-tabs-item { width: 100%; cursor: pointer; vertical-align: middle; border-radius: 1.3rem 1.3rem 0 0; padding: 2.1rem 40px 1.5rem 40px; background-color: var(--its-color-XXX-v-z); } .its-tabs-item.its-active { background-color: var(--its-color-XXX-w-z); } .its-tabs-item.its-active a { border-color: var(--its-color-XXX-w-s); } .its-tabs-item a { color: var(--its-color-XXX-w-s); font-size: 1.5rem; font-weight: 600; /* text-transform: uppercase; */ text-decoration: none; border-bottom: 3px solid transparent; } .its-tabs-item a:hover { border-color: var(--its-color-130-v-s); } /* MAIN SECTION */ .its-main-section { display: block; position: relative; width: 100%; } .its-main-center { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 20px; } /* CRUMBS */ .its-crumbs { display: flex; align-items: center; list-style: none; } .its-crumbs li { vertical-align: bottom; font-size: 0.9rem; display: inline-block; margin: 0 0 12px; color: var(--its-color-XXX-v-s); } .its-crumbs a { color: var(--its-color-230-w-s); border-bottom: 2px solid transparent; } .its-crumbs a:hover { border-color: var(--its-color-130-w-s); } .its-crumbs :not(:last-child):after { vertical-align: bottom; color: var(--its-color-230-w-s); padding-inline-start: .2rem; padding-inline-end: .2rem; content: '/'; } /* FOOTER */ .its-footer { position: relative; width: 100%; z-index: 11111; background-color: var(--its-color-200-w-s); } /* bottom: 0; left: 0; height: 200px; */ .its-footer-wrapper { position: relative; max-width: 1240px; margin: 0 auto; padding: 50px 20px 0px 20px; white-space: nowrap; overflow: hidden; /* display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; */ display: flex; flex-direction: row; flex-wrap: wrap; /* justify-content: space-between; align-items: flex-start; */ } /* BUTTON */ .its-footer-buttons { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; font-size: 1.1rem; font-weight: 600; border-inline-start: 1px solid var(--its-color-XXX-v-z); padding-block-start: .3rem; padding-block-end: .3rem; padding-inline-start: 2rem; padding-inline-end: 2rem; margin-block-end: 2rem; line-height: 1.5; } .its-footer-sup { border: 1px solid var(--its-color-XXX-w-z); border-radius: 5px; background-color: var(--its-color-010-w-s); color: var(--its-color-XXX-w-z); font-size: 1.1rem; font-weight: 600; text-decoration: none; text-transform: uppercase; text-align: center; padding: 1rem 2rem; margin: 0 0 .5rem 0!important; width: 100%; } .its-footer-sup:hover { /* border: 1px solid var(--its-color-050-v-s); border-radius: 5px; */ background-color: var(--its-color-170-w-s); /* color: var(--its-color-050-v-s); */ } .its-footer-adv { border: 1px solid var(--its-color-XXX-w-z); border-radius: 5px; background-color: var(--its-color-220-w-s); color: var(--its-color-XXX-w-z); font-size: 1.1rem; font-weight: 600; text-decoration: none; text-transform: uppercase; text-align: center; padding: 1rem 2rem; margin: 0!important; width: 100%; } .its-footer-adv:hover { /* border: 1px solid var(--its-color-050-v-s); border-radius: 5px; */ background-color: var(--its-color-170-w-s); /* color: var(--its-color-050-v-s); */ } /* NAVI */ .its-footer-navi { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: space-between; align-items: flex-start; border-inline-start: 1px solid var(--its-color-XXX-v-z); padding-inline-start: 2rem; padding-inline-end: 2rem; margin-block-end: 2rem; line-height: 1.5; } .its-footer-item { padding: 0rem 1rem 0 0; white-space: nowrap; } .its-footer-item a { color: var(--its-color-XXX-w-z); font-size: 1.1rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; } .its-footer-item a:hover { color: var(--its-color-050-w-z); } /* COPYRIGHT */ .its-footer-copyright { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; color: var(--its-color-XXX-w-z); font-size: .9rem; font-weight: 400; border-inline-start: 1px solid var(--its-color-XXX-v-z); padding-inline-start: 2rem; padding-inline-end: 2rem; margin-block-end: 2rem; line-height: 1.5; } /* H1 */ .its-h1 { color: var(--its-color-XXX-w-s); font-size: 2rem; font-weight: 700; line-height: 2rem; } .its-box-row { display: flex; flex-direction: row; } .its-box-col { display: flex; flex-direction: column; } .its-box-item { width: 100%; padding: .5rem; margin: .5rem; border-width: 1px; border-style: solid; border-radius: 5px; } .its-wrapper { margin: 0 auto; position: relative; max-width: 1237px; width: 100%; box-sizing: border-box; padding: 0 20px; } /* Header */ .its-header-logo-link { padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; white-space: nowrap !important; flex-wrap: nowrap !important; } .its-header-item-link { color: #FFFFFF !important; } .its-header-item-link:hover { color: #4FB17D !important; } .its-header-item-link-active { color: #4FB17D !important; } .its-header-auth-link { color: #FFFFFF !important; background-color: #203743 !important; border-radius: 13px !important; font-weight: bold !important; border: 0 !important; padding-inline-end: .5rem !important; } .its-header-auth-link:hover { color: #4FB17D !important; } /* .its-header-mobile-menu { font-size: 1.5rem; padding: 0 0 0 1rem; cursor: pointer; } .its-header-mobile-menu:hover { color: #4FB17D !important; } */ .its-show { display: block!important; } .its-hide { display: none!important; } /* ОТОБРАЖЕНИЕ НА ЭКРАНАХ */ /* экран меньше Х */ @media (width < 400px) { .its-show-x-400 { display: block !important; } .its-hide-x-400 { display: none !important; } .its-flex-row-x-400 { flex-direction: row; } .its-flex-col-x-400 { flex-direction: column; } .its-hidden-w-x-400 { display: none !important; } } @media (width < 600px) { .its-hidden-w-x-600 { display: none !important; } } @media (width < 800px) { .its-show-x-800 { display: block !important; } .its-hide-x-800 { display: none !important; } .its-flex-row-x-800 { flex-direction: row; } .its-flex-col-x-800 { flex-direction: column; } .its-hidden-w-x-800 { display: none !important; } .its-padding-inline-end-1rem-x-800 { padding-inline-end: 1rem; } .its-padding-block-end-1rem-x-800 { padding-block-end: 1rem; } } @media (width < 1000px) { .its-hidden-w-x-1000 { display: none !important; } } @media (width < 1100px) { .its-hidden-w-x-1100 { display: none !important; } } @media (width < 1200px) { .its-hidden-w-x-1200 { display: none !important; } } /* не проработано - заменить на скрытие показ для конкретных элементов */ /* .its-publication-list { display: block; margin: 0 -5px; padding: 0; } */ /* .its-publication-item { display: block; margin: 0 0 10px; } */ /* .its-publication-item .its-publication-media { display: block; width: 100%; background-color: #212120; } */ /* .its-publication-item .its-publication-content { display: block; width: 100%; } */ /* экран больше Х */ @media (width > 400px) { .its-show-400-x { display: block !important; } .its-hide-400-x { display: none !important; } .its-flex-row-400-x { flex-direction: row; } .its-flex-col-400-x { flex-direction: column; } .its-hidden-w-400-x { display: none !important; } } @media (width > 600px) { .its-hidden-w-600-x { display: none !important; } } @media (width > 800px) { .its-show-800-x { display: block !important; } .its-hide-800-x { display: none !important; } .its-flex-row-800-x { flex-direction: row; } .its-flex-col-800-x { flex-direction: column; } .its-hidden-w-800-x { display: none !important; } .its-padding-inline-end-1rem-800-x { padding-inline-end: 1rem; } .its-padding-block-end-1rem-800-x { padding-block-end: 1rem; } } @media (width > 1000px) { .its-hidden-w-1000-x { display: none !important; } } @media (width > 1100px) { .its-hidden-w-1100-x { display: none !important; } } @media (width > 1200px) { .its-hidden-w-1200-x { display: none !important; } } /* не проработано - заменить на скрытие показ для конкретных элементов */ /* .its-publication-list { display: block; margin: 0; padding: 40px 0 0; } */ /* .its-publication-item { display: flex; margin: 0 0 20px; } */ /* .its-publication-item .its-publication-media { width: 50%; } */ /* .its-publication-item .its-publication-content { width: 50%; } */ /* ОТОБРАЖЕНИЕ НА ЭКРАНАХ */ /* FLEX */ .its-flex { display: flex!important; } .its-flex-row { flex-direction: row; } .its-flex-align-content { align-content: center; } .its-flex-justify-content { justify-content: center; } .its-flex-align-items { align-items: center; } .its-flex-ccc { display: flex; align-content: center; justify-content: center; align-items: center; } /* FLEX */ .its-align-vertical-middle { vertical-align: middle; } .its-link-circle-background-white { background-color: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 50%; text-align: center; cursor: pointer; } .its-link-circle-background-white:hover { box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3); /* box-shadow: 0px 1px 6px 0px rgba(34, 60, 80, 0.2); */ /* box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); */ } .its-d-none { display: none; } .its-cursor-pointer { cursor: pointer; } .its-string-complete {color: rgb(142, 124, 195); } @keyframes its-a-string-complete-infinite-0-5 { from { color: rgb(142, 124, 195); } to { color: rgb(172, 154, 225); } } .its-a-string-complete-infinite-0-5 { color: rgb(142, 124, 195); animation-name: its-a-string-complete-infinite-0-5; animation-duration: 0.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes its-a-string-complete-infinite-1-0 { from { color: rgb(142, 124, 195); } to { color: rgb(172, 154, 225); } } .its-a-string-complete-infinite-1-0 { color: rgb(142, 124, 195); animation-name: its-a-string-complete-infinite-1-0; animation-duration: 1.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes its-a-string-complete-infinite-1-5 { from { color: rgb(142, 124, 195); } to { color: rgb(172, 154, 225); } } .its-a-string-complete-infinite-1-5 { color: rgb(142, 124, 195); animation-name: its-a-string-complete-infinite-1-5; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .its-font-size-0-5 { font-size: 0.5rem; } .its-font-size-0-7 { font-size: 0.7rem; } .its-font-size-0-9 { font-size: 0.9rem; } .its-font-size-1-1 { font-size: 1.1rem; } .its-font-size-1-3 { font-size: 1.3rem; } .its-font-size-1-5 { font-size: 1.5rem; } .its-font-size-1-7 { font-size: 1.7rem; } .its-font-size-1-9 { font-size: 1.9rem; } .its-font-size-2-1 { font-size: 2.1rem; } .its-font-size-2-3 { font-size: 2.3rem; } .its-t-large { font-size: large; } .its-t-medium { font-size: medium; } .its-t-small { font-size: small; } .its-t-start { text-align: start; } .its-t-center { text-align: center; } .its-t-end { text-align: end; } .its-t-justify { text-align: justify; } .its-t-underline { text-decoration: underline !important; } .its-mr-05 { margin: 0.5rem; } .its-mr-0 { margin: 0rem; } .its-mr-1 { margin: 1rem; } .its-mr-2 { margin: 2rem; } .its-mr-3 { margin: 3rem; } .its-mr-4 { margin: 4rem; } .its-mr-5 { margin: 5rem; } .its-ms-block-05 { margin-block-start: 0.5rem; } .its-ms-block-0 { margin-block-start: 0rem; } .its-ms-block-1 { margin-block-start: 1rem; } .its-ms-block-2 { margin-block-start: 2rem; } .its-ms-block-3 { margin-block-start: 3rem; } .its-ms-block-4 { margin-block-start: 4rem; } .its-ms-block-5 { margin-block-start: 5rem; } .its-me-block-05 { margin-block-end: 0.5rem; } .its-me-block-0 { margin-block-end: 0rem; } .its-me-block-1 { margin-block-end: 1rem; } .its-me-block-2 { margin-block-end: 2rem; } .its-me-block-3 { margin-block-end: 3rem; } .its-me-block-4 { margin-block-end: 4rem; } .its-me-block-5 { margin-block-end: 5rem; } .its-mx-inline-0 { margin-inline-start: 0; margin-inline-end: 0; } .its-mx-inline-05 { margin-inline-start: 0.5rem; margin-inline-end: 0.5rem; } .its-mx-inline-1 { margin-inline-start: 1rem; margin-inline-end: 1rem; } .its-my-0 { margin-top: 0; margin-bottom: 0; } .its-pr-0 { padding: 0rem; } .its-pr-1 { padding: 1rem; } .its-pr-2 { padding: 2rem; } .its-pr-3 { padding: 3rem; } .its-pr-4 { padding: 4rem; } .its-pr-5 { padding: 5rem; } .its-pb-0 { padding-bottom: 0rem; } .its-pb-1 { padding-bottom: 1rem; } .its-pb-2 { padding-bottom: 2rem; } .its-pb-3 { padding-bottom: 3rem; } .its-pb-4 { padding-bottom: 4rem; } .its-pb-5 { padding-bottom: 5rem; } /* ФИНАЛЬНЫЙ ВАРИАНТ предыдущие удалить */ .its-mbs-0 { margin-block-start: 0rem; } .its-mbs-1 { margin-block-start: 1rem; } .its-mbs-2 { margin-block-start: 2rem; } .its-mbs-3 { margin-block-start: 3rem; } .its-mbs-4 { margin-block-start: 4rem; } .its-mbs-5 { margin-block-start: 5rem; } .its-mbe-0 { margin-block-end: 0rem; } .its-mbe-1 { margin-block-end: 1rem; } .its-mbe-2 { margin-block-end: 2rem; } .its-mbe-3 { margin-block-end: 3rem; } .its-mbe-4 { margin-block-end: 4rem; } .its-mbe-5 { margin-block-end: 5rem; } .its-pbs-0 { padding-block-start: 0rem; } .its-pbs-1 { padding-block-start: 1rem; } .its-pbs-2 { padding-block-start: 2rem; } .its-pbs-3 { padding-block-start: 3rem; } .its-pbs-4 { padding-block-start: 4rem; } .its-pbs-5 { padding-block-start: 5rem; } .its-pbe-0 { padding-block-end: 0rem; } .its-pbe-1 { padding-block-end: 1rem; } .its-pbe-2 { padding-block-end: 2rem; } .its-pbe-3 { padding-block-end: 3rem; } .its-pbe-4 { padding-block-end: 4rem; } .its-pbe-5 { padding-block-end: 5rem; } .its-pis-0 { padding-inline-start: 0rem; } .its-pis-1 { padding-inline-start: 1rem; } .its-pis-2 { padding-inline-start: 2rem; } .its-pis-3 { padding-inline-start: 3rem; } .its-pis-4 { padding-inline-start: 4rem; } .its-pis-5 { padding-inline-start: 5rem; } .its-pie-0 { padding-inline-end: 0rem; } .its-pie-1 { padding-inline-end: 1rem; } .its-pie-2 { padding-inline-end: 2rem; } .its-pie-3 { padding-inline-end: 3rem; } .its-pie-4 { padding-inline-end: 4rem; } .its-pie-5 { padding-inline-end: 5rem; } .its-list-group-container { display: block; } .its-list-group-header { display: block; position: relative; cursor: pointer; box-sizing: border-box; box-shadow: 0 0px 2px rgba(0,0,0,0.5); height: 75px !important; width: 100% !important; max-width: 100% !important; min-width: 130px; margin: 0; padding: 39px 70px 15px 22px; border: 1px solid #fafafa; background: #F7F7F7 !important; } .its-list-group-header input { width: 130px; } .its-list-group-header label { display: block; position: absolute; top: 17px; left: 22px; color: #212120; font-size: 13px; font-weight: 600; letter-spacing: 0.13px; line-height: 13px; } .its-list-group-header .its-select-value { display: grid; width: 100%; min-width: 130px; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: normal; color: #212120; background: transparent; box-sizing: border-box; border: 0; } .its-list-group-header .its-select-value span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .its-list-group-header b.its-i-arrow { position: absolute; top: 33px; right: 6px; width: 20px; height: 20px; background: url(/zzz/images/svg/arr-select.svg) no-repeat; } .its-list-group-header b.its-i-loc2 { position: absolute; top: 26px; right: 16px; width: 20px; height: 23px; background: url(/zzz/images/svg/loc2.svg) no-repeat; } .its-list-group-header b.its-bi-card-list { position: absolute; top: 16px; right: 13px; width: 30px; height: 30px; background: url(/abc_resources/bootstrap/icons/1.10.5/card-list.svg) no-repeat; background-size: contain; } .its-list-group-header b.its-bi-search { position: absolute; top: 50%!important; left: 50%!important; transform: translate(-50%,-50%)!important; width: 30px; height: 30px; background: url(/abc_resources/bootstrap/icons/1.10.5/search.svg) no-repeat; background-size: contain; } .its-list-group-header b.its-bi-chat-right-text { position: absolute; top: 22px; right: 20px; width: 30px; height: 30px; background: url(/abc_resources/bootstrap/icons/1.10.5/chat-right-text.svg) no-repeat; background-size: contain; } .its-list-group-header b.its-bi-geo-alt { position: absolute; top: 22px; right: 20px; width: 30px; height: 30px; background: url(/abc_resources/bootstrap/icons/1.10.5/geo-alt.svg) no-repeat; background-size: contain; } .its-list-group-header b.its-bi-calendar3 { position: absolute; top: 22px; right: 20px; width: 30px; height: 30px; background: url(/abc_resources/bootstrap/icons/1.10.5/calendar3.svg) no-repeat; background-size: contain; } .its-list-group-body { position: relative; } .its-list-group-absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 10000; } @media screen and ( max-width: 800px) { .its-list-group-absolute { position: relative !important; } } .its-list-group-outline { display: block; background: #fafafa; border-color: #fafafa; border-radius: 0 0 13px 13px; border-top: 1px dashed #CCC; box-sizing: border-box; padding: 18px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); } .its-list-group-presearch { display: block !important; margin: 0; padding: 0; border: 0; contain: style; outline: none; } .its-list-group-presearch input { box-sizing: border-box; font: 13px !important; transition: all 0.2s ease-in-out; background-color: #EFEFEF !important; background: #EFEFEF url('/zzz/images/svg/search.svg') no-repeat right 12px center; border: none; border-bottom: 1px solid #F3F3F3; border-radius: 10px 10px 0 0 !important; padding: 15px 18px; width: 100%; height: auto; } .its-list-group { display: flex; flex-direction: column; overflow-y: auto; flex-wrap: nowrap; overflow-y: scroll; overflow-x: hidden; contain: style; padding: 0 !important; max-height: 150px !important; } .its-list-group :first-child { border-top-left-radius: 10px; } .its-velcro-br-tl { border-top-left-radius: 0px !important; } .its-list-group :last-child { border-bottom-left-radius: 10px; } .list-group-item { background-color: #FFFFFF; color: #212120; transition: all 0.2s ease-in-out; font-size: 13px; line-height: 20px; border-bottom: 1px solid #F3F3F3; padding: 0 !important; contain: style; margin: 0 !important; width: 100% !important; } .list-group-item:hover { background-color: #333333; color: #FFFFFF; } /* border-width: 1px; border-style: solid; border-radius: 5px; */ /* PROGRESS */ @keyframes gradient-1 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes indeterminate-1{0%{left:0%;width:0%} 42%{left:25%;width:75%} 75%{left:75%;width:25%} 100%{left:100%;width:0%}} @keyframes indeterminate-2{0%{left:0%;width:0%} 51%{left:11%;width:13%} 100%{left:100%;width:0%}} /* @keyframes indeterminate-1{0%{left:0%;width:0%} 50%{left:25%;width:75%}75%{left:100%;width:0%}} */ /* @keyframes indeterminate-2{0%{left:0%;width:0%} 50%{left:0%; width:0%} 75%{left:0%;width:50%} 100%{left:100%;width:0%}} */ .its-progress-preloader { display: block; position: relative; min-height: 3px; width: 100%; background-color: var(--its-color-XXX-v-z); } .its-progress-border { border-width: 1px; border-style: solid; border-radius: 5px; } .its-progress-ground { position: absolute; top: 50%!important; left: 50%!important; transform: translate(-50%,-50%)!important; /* CENTER */ z-index: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background-image: linear-gradient(-45deg, var(--its-color-050-w-z), var(--its-color-010-w-z), var(--its-color-210-w-z), var(--its-color-110-w-z) ); background-size: 300% 300%; animation-name: gradient-1; animation-iteration-count: infinite; animation-duration: 5s; animation-timing-function: ease-in-out; transition: all 0.2s ease-in-out; /* animation: gradient-1 5s ease infinite; */ /* transition: all 0.2s ease-in-out; */ } .its-progress-message { position: absolute; top: 50%!important; left: 50%!important; transform: translate(-50%,-50%)!important; /* CENTER */ z-index: 3; width: 100%; padding: 13px 20px; font-size: 1.3rem; font-weight: 500; border-width: 1px; border-style: solid; border-radius: 5px; transition: all 0.2s ease-in-out; text-align: center; } .its-progress-container { display: block; position: relative; min-height: 3px; width: 100%; max-width: 100%; height: 100%; max-height: 100%; } .its-progress-background { top: 0; bottom: 0; left: 0; display: block; width: 100%; position: absolute; z-index: 0; background-image: linear-gradient(to right, rgba(60,132,198, 0.3), rgba(60,132,198, 0.7)), linear-gradient(to right, rgb(106,168,79), rgb(106,168,79)); } .its-progress-line { display: block; width: 0%; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(to right, rgba(60,132,198, 0), rgba(60,132,198, 1)); background-color: rgba(106,168,79, 0.1); animation-name: indeterminate-1; animation-iteration-count: infinite; animation-duration: 2.3s; animation-timing-function: linear(0 0%, 1 100%); transition: width .2s linear(0 0%, 1 100%); /* animation-timing-function: cubic-bezier(0.4, 0, 1, 1); transition: width .2s cubic-bezier(0.4, 0, 1, 1); */ } .its-progress-dash { display: block; width: 0%; position: absolute; top: 0; bottom: 0; right: 0; z-index: 2; mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo='); background-image: linear-gradient(to right, rgba(241,194,50, 0), rgba(241,194,50, 0.5)), linear-gradient(to right, rgba(106,168,79, 0.5), rgba(106,168,79, 0.5)); background-color: rgba(60,132,198, 0.5); animation-name: indeterminate-2; animation-duration: 2.3s; animation-iteration-count: infinite; animation-timing-function: linear(0 0%, 1 100%); /* animation-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%); */ transition: width .2s linear(0 0%, 1 100%); /* animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); */ /* transition: width .2s cubic-bezier(0.65, 0.05, 0.36, 1); */ } /* PROGRESS */ /* NOTIFICATIONS */ .its-notification { width: 100%; padding: 13px 20px; font-size: 1rem; font-weight: 500; border-width: 1px; border-style: solid; border-radius: 5px; transition: all 0.2s ease-in-out; text-align: center; } /* NOTIFICATIONS */ /* ANIMATION */ @keyframes its-a-o-show-1-1 { from { opacity: 0; } to { opacity: 1; } } .its-a-o-show-1-1 { opacity: 1; animation-name: its-a-o-show-1-1; animation-duration: 1s; animation-timing-function: ease-in-out; } /* ANIMATION */ .its-admin-gear { z-index:99999; position: absolute; top: 0; right: 0; width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; color: var(--its-color-010-w-s); background-color: var(--its-color-030-w-z); /* box-shadow: 0px 2px 0px var(--its-color-030-w-s); */ /* border: 3px solid var(--its-color-030-w-s); */ border-bottom: 1px solid var(--its-color-030-w-s); } /* .its-admin-gear:hover { font-size: 1.3rem; } */ .its-admin-outline { z-index:10000; position: absolute; top: 0; right: 50px; width: 100%; height: 100%; /* border: 3px solid var(--its-color-030-w-z); */ /* border-right: 0; */ background: var(--its-color-030-w-z); background: linear-gradient(45deg, rgba(255,255,255,0) 0%, var(--its-color-030-w-z) 100%); } .its-modal { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index:11111; } .its-modal-background { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #21212050; display: flex; flex-direction: column; justify-content: flex-end; z-index:11111; } .its-modal-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #21212050; display: flex; flex-direction: column; justify-content: flex-end; z-index:11111; } .its-modal-outline { background-color: #FFFFFF; margin: 1rem; padding: 1rem; } .its-modal-outline .its-modal-content { color: #212120; font-size: 1.5rem; } .its-modal-outline .its-modal-action { background-color: #212120; color: #FFFFFF; text-align: center; padding: 1rem 2rem; cursor: pointer; font-size: 1.5rem; } .its-message-with-button { background: #ffffff; text-align: center; color: #71717a; letter-spacing: 0.13px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); border-radius: 20px; margin: 0; padding: 30px 15px; } .its-message-with-button p { margin: 0 0 16px 0; } .its-message-with-button .btn { margin: 15px 0 0; padding: 22px 20px; width: 100%; text-transform: uppercase; } /* font: 600 14px "Proxima Nova"; */ /* .its-intermediate-block { } */ .its-separate-block { margin: 1rem 0; }