@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wdth,wght,YTAS,YTDE,YTFI,YTLC,YTUC@110,100,725,-250,725,500,725;110,300,725,-250,725,500,725;110,500,725,-250,725,500,725;110,700,725,-250,725,500,725&display=swap');

@font-face {
  font-family: "emblematic-soft-linear";
  src:url("../../icons/esl/emblematic-soft-linear.eot");
  src:url("../../icons/esl/emblematic-soft-linear.eot?#iefix") format("embedded-opentype"),
    url("../../icons/esl/emblematic-soft-linear.woff") format("woff"),
    url("../../icons/esl/emblematic-soft-linear.ttf") format("truetype"),
    url("../../icons/esl/emblematic-soft-linear.svg#mazzucco-mello") format("svg");
  font-weight: normal;
  font-style: normal;
}

:root {

    --roboto-em-size-ratio: 2.048;
    --roboto-capitular-ratio: 1.456;
    --roboto-baseline-threshold: 0.015;
    --roboto-size-ratio: calc(var(--roboto-em-size-ratio) / var(--roboto-capitular-ratio));

    --f-light: 100;
    --f-regular: 300;
    --f-medium: 500;
    --f-bold: 700;

    --esl: 'emblematic-soft-linear';
    --esl-baseline-threshold: 0;
    --esl-size-ratio: 1;

    --grid-division: 16;

    --fr: calc(1 / var(--grid-division)); /* fração */
    --hfr: calc(var(--fr) / 2); /* meia fração */
    --trd: calc(var(--fr) / 3); /* um terço de fração */
    --qt: calc(var(--fr) / 4); /* um quarto de fração */
    --htrd: calc(var(--fr) / 6); /* meio terço de fração */
    --hqt: calc(var(--fr) / 8); /* meio quarto de fração */
    --un: calc(var(--fr) / 16); /* unidade */

    --vw-fr: calc(var(--fr) * 100vw);
    --vw-hfr: calc(var(--hfr) * 100vw);
    --vw-trd:  calc(var(--trd) * 100vw);
    --vw-qt: calc(var(--qt) * 100vw);
    --vw-htrd:  calc(var(--htrd) * 100vw);
    --vw-hqt:  calc(var(--hqt) * 100vw);
    --vw-un: calc(var(--un) * 100vw);

    --t-fr: calc(var(--fr) * 60s);
    --t-hfr: calc(var(--hfr) * 60s);
    --t-trd:  calc(var(--trd) * 60s);
    --t-qt: calc(var(--qt) * 60s);
    --t-htrd:  calc(var(--htrd) * 60s);
    --t-hqt:  calc(var(--hqt) * 60s);
    --t-un: calc(var(--un) * 60s);

    --grd-1: calc(var(--vw-fr) * 1);
    --grd-2: calc(var(--vw-fr) * 2);
    --grd-3: calc(var(--vw-fr) * 3);
    --grd-4: calc(var(--vw-fr) * 4);
    --grd-5: calc(var(--vw-fr) * 5);
    --grd-6: calc(var(--vw-fr) * 6);
    --grd-7: calc(var(--vw-fr) * 7);
    --grd-8: calc(var(--vw-fr) * 8);
    --grd-9: calc(var(--vw-fr) * 9);
    --grd-10: calc(var(--vw-fr) * 10);
    --grd-11: calc(var(--vw-fr) * 11);
    --grd-12: calc(var(--vw-fr) * 12);
    --grd-13: calc(var(--vw-fr) * 13);
    --grd-14: calc(var(--vw-fr) * 14);
    --grd-15: calc(var(--vw-fr) * 15);
    --grd-16: calc(var(--vw-fr) * 16);

    --sz-1: var(--vw-un);
    --sz-1h: calc(var(--sz-1) * 1.5);
    --sz-2: calc(var(--sz-1) * 2);
    --sz-2h: calc(var(--sz-1) * 2.5);
    --sz-3: calc(var(--sz-1) * 3);
    --sz-3h: calc(var(--sz-1) * 3.5);
    --sz-4: calc(var(--sz-1) * 4);
    --sz-4h: calc(var(--sz-1) * 4.5);
    --sz-5: calc(var(--sz-1) * 5);
    --sz-5h: calc(var(--sz-1) * 5.5);
    --sz-6: calc(var(--sz-1) * 6);
    --sz-6h: calc(var(--sz-1) * 6.5);
    --sz-7: calc(var(--sz-1) * 7);
    --sz-7h: calc(var(--sz-1) * 7.5);
    --sz-8: calc(var(--sz-1) * 8);
    --sz-8h: calc(var(--sz-1) * 8.5);
    --sz-9: calc(var(--sz-1) * 9);
    --sz-9h: calc(var(--sz-1) * 9.5);
    --sz-10: calc(var(--sz-1) * 10);
    --sz-10h: calc(var(--sz-1) * 10.5);
    --sz-11: calc(var(--sz-1) * 11);
    --sz-11h: calc(var(--sz-1) * 11.5);
    --sz-12: calc(var(--sz-1) * 12);
    --sz-12h: calc(var(--sz-1) * 12.5);
    --sz-13: calc(var(--sz-1) * 13);
    --sz-13h: calc(var(--sz-1) * 13.5);
    --sz-14: calc(var(--sz-1) * 14);
    --sz-14h: calc(var(--sz-1) * 14.5);
    --sz-15: calc(var(--sz-1) * 15);
    --sz-15h: calc(var(--sz-1) * 15.5);
    --sz-16: calc(var(--sz-1) * 16);

    --line-gap-ratio: 1;

    --white: rgb(255,255,255);
    --gray-01: rgb(250,245,245);
    --gray-02: rgb(205,200,200);
    --gray-03: rgb(125,120,120);
    --black: rgb(55,45,45);
    --red: rgb(236,50,50);

    --alert: rgb(255,55,55);
    --warning: rgb(255,155,0);
    --notice: rgb(0, 185, 230);
    --done: rgb(125,225,80);
    --info: rgb(205,205,205);

    --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-quad: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    --shadow-01: 0 15px 60px -7.5px rgba(0,0,0,.2);

    /* ---- Structure Measures ---- */
    --base-size: var(--sz-2);
    --page-margin: var(--vw-fr);
    --display-gap: var(--vw-fr);
    --row-gap: var(--vw-hfr);
    --column-gap: var(--vw-fr);
}

@media (max-width: 1024px) {
    :root{
        --base-size: calc(var(--sz-2) * 1.5);
    }
}

@media (max-width: 800px) {
    :root{
        --base-size: calc(var(--sz-2) * 2);
    }
}

@media (max-width: 640px) {
    :root{
        --base-size: calc(var(--sz-2) * 2.5);
    }
}

@media (max-width: 540px) {
    :root{
        --grid-division: 12;
        --base-size: calc(var(--sz-2) * 2.25);
    }
}

@media (max-width: 480px) {
    :root{
        --base-size: calc(var(--sz-2) * 2.5);
    }
}

@media (max-width: 360px) {
    :root{
        --grid-division: 8;
        --base-size: calc(var(--sz-2) * 2.25);
    }
}

@media (max-width: 240px) {
    :root{
        --grid-division: 6;
        --base-size: calc(var(--sz-2) * 2.5);
    }
}


@keyframes avatar-loading {
    0%{
        opacity: 1;
        transform: scale(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(100%);
    }
}
@-webkit-keyframes avatar-loading {
    0%{
        opacity: .75;
        transform: scale(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(100%);
    }
}
@keyframes rotation {
    0%{ transform: rotateZ(0deg); }
    100%{ transform: rotateZ(360deg); }
}
@-webkit-keyframes  rotation {
    0%{ transform: rotateZ(0deg); }
    100%{ transform: rotateZ(360deg); }
}

* {
    /* Set */
    --line-gap: var(--line-gap-ratio);
    --font-size-ratio: var(--roboto-size-ratio);
    --baseline-threshold: var(--roboto-baseline-threshold);
    /* --lead-ratio para definir a distância entre os textos */

    /* Get */
    --adjusted-font-size: calc(var(--font-size) * var(--font-size-ratio));
    --baseline-adjustment: calc(var(--font-size) * var(--baseline-threshold));
    --line-height: calc(var(--font-size) * (var(--line-gap) + 1));
    --bound-adjustment: calc((var(--font-size) * (var(--line-gap) * -.5)) + var(--baseline-adjustment));
    --bound-retraction: calc((var(--bound-adjustment) - var(--baseline-adjustment)) * 2);
    --lead: calc(var(--font-size) * (var(--lead-ratio, 0) + 1));

    margin: 0;
    padding: 0;
    color: inherit;
    font-size: var(--adjusted-font-size);
    font-style: inherit;
    font-weight: inherit;
    font-kerning: normal;
    font-variant: normal;
    text-decoration: none;
    font-family: inherit;
    border: none;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: none;
    line-height: var(--line-height);
    background: 0 0;
    position: relative;
}

body {
    --font-size: var(--base-size);
    width: 100%;
    display: block;
    font-size: var(--adjusted-font-size);
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    font-family: 'Roboto Flex', Arial, Helvetica, sans-serif;
}

span, b, strong, i, em, mark, small, del, ins, sub, sup, abbr, cite, bdo, q{ font-size: inherit; }
img, li{ display: block; }

::-webkit-input-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
::-moz-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
:-moz-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
::placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
input[type=file]::-ms-browse{ display: none; }
input[type=file]::-webkit-file-upload-button{ display: none; }
input[type=file]::file-selector-button{ display: none; }

*:not(label) > [type=file]{ background-color: #f00 !important; }

/* // SISTEMA DE TEXTO // */
.italic{ font-style: italic;}
.light{ font-weight: var(--f-light); }
.regular{ font-weight: var(--f-regular); }
.medium{ font-weight: var(--f-medium); }
.semibold{ font-weight: var(--f-semibold); }
.bold{ font-weight: var(--f-bold); }

.prph,
.prph > p,
.prph > li,
.prph > ul > li
{
    --font-size: var(--prph-size, var(--base-size));
    --font-color: var(--text-color);
}
.title,
.title > h1,
.title > h2,
.title > h3,
.title > h4,
.title > h5,
.title > h6
{
    --font-size: var(--title-size, var(--base-size));
    --font-color: var(--title-color);
}

.prph > p,
.prph > li,
.prph > ul > li,
p.prph,
li.prph,
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title,
.title > h1,
.title > h2,
.title > h3,
.title > h4,
.title > h5,
.title > h6
{
    --line-gap: 1;
    --lead-ratio: 1;
    display: block;
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--bound-retraction);
    color: var(--font-color, var(--foreground));
}

.prph > p + p,
.prph > ul > li,
.prph > p + ul > li:first-of-type,
.prph > p + .title,
.prph > .title + p,
.prph > .title + ul > li:first-of-type,
.prph > ul + p,
.prph > ul + .title,
.prph > li + li,
.prph > li + ul > li:first-of-type,
p.prph + p,
p.prph + ul > li:first-of-type,
li.prph + li,
li.prph + ul > li:first-of-type
{
    margin-top: var(--lead);
}


.baseline, .baseline-childs > *{
    line-height: var(--line-height);
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--bound-retraction);
}
.baseline-childs.lh-0 > *{ --line-gap: 0; }
.baseline-childs.lh-05 > *{ --line-gap: 0.5; }
.baseline-childs.lh-075 > *{ --line-gap: .75; }
.baseline-childs.lh-1 > *{ --line-gap: 1; }
.baseline-childs.lh-12 > *{ --line-gap: 1.25; }
.baseline-childs.lh-15 > *{ --line-gap: 1.5; }

.baseline.lh-0{ --line-gap: 0; }
.baseline.lh-05{ --line-gap: 0.5; }
.baseline.lh-075{ --line-gap: .75; }
.baseline.lh-1{ --line-gap: 1; }
.baseline.lh-12{ --line-gap: 1.25; }
.baseline.lh-15{ --line-gap: 1.5; }

.leading-childs.ld-0 > *{ --lead-ratio: 0; }
.leading-childs.ld-05 > *{ --lead-ratio: .5; }
.leading-childs.ld-075 > *{ --lead-ratio: .75; }
.leading-childs.ld-1 > *{ --lead-ratio: 1; }
.leading-childs.ld-125 > *{ --lead-ratio: 1.25; }
.leading-childs.ld-15 > *{ --lead-ratio: 1.5; }
.leading-childs.ld-2 > *{ --lead-ratio: 2; }

.leading.ld-0{ --lead-ratio: 0; }
.leading.ld-05{ --lead-ratio: .5; }
.leading.ld-075{ --lead-ratio: .75; }
.leading.ld-1{ --lead-ratio: 1; }
.leading.ld-125{ --lead-ratio: 1.25; }
.leading.ld-15{ --lead-ratio: 1.5; }
.leading.ld-2{ --lead-ratio: 2; }

.leading, .leading-childs > * + *{ margin-top: var(--lead); }

.text-clip{
    display: -webkit-box;
    -webkit-line-clamp: var(--lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(var(--lines, 1) * var(--line-height));
}

.marker:not(ul),
ul.marker > li
{
    --item-mark: var(--mark, '\e08e');
}

ul.marker > li::before
{
    content: var(--item-mark);
    font-family: var(--esl);
    font-size: var(--font-size);
    line-height: var(--font-size);
    margin-right: calc(var(--font-size) * .5);
}

ul.marker.aligned > li{ padding-left: calc(var(--font-size) * 1.5); }
ul.marker.aligned > li::before{ margin-left: calc(var(--font-size) * -1.5); }

ul.marker.aligned.retracted > li{ margin-left: calc(var(--font-size) * -1.5); }

/* ==== RECURSOS ==== */

/* // ESQUEMAS DE CORES // */
.scheme-light
{
    --text-color: var(--gray-03);
    --field-color: var(--black);
    --title-color: var(--black);
    --background: var(--white);
    --modal-skin: var(--white);
    --modal-container-background: var(--white);
    --button-color: var(--white);
    --button-background: var(--gray-02);
    --command-button-color: var(--black);
    --command-button-border: var(--gray-01);
    --command-button-background: var(--gray-02);
    --avatar-border: var(--gray-01);
    --avatar-color: var(--white);
    --avatar-background: var(--gray-02);
}

.alert .button, .alert .close-button,
.warning .button, .warning .close-button,
.notice .button, .notice .close-button,
.done .button, .done .close-button,
.info .button, .info .close-button
{
    --button-color: var(--white);
    --button-background: rgba(0,0,0,.2);
}

.alert,.warning,.notice,.done,.info
{
    --text-color: var(--white);
    --button-color: var(--white);
}
.alert
{
    --background: var(--alert);
    --button-background: var(--alert);
    --modal-container-background: var(--alert);
}
.warning
{
    --background: var(--warning);
    --button-background: var(--warning);
    --modal-container-background: var(--warning);
}
.notice
{
    --background: var(--notice);
    --button-background: var(--notice);
    --modal-container-background: var(--notice);
}
.done
{
    --background: var(--done);
    --button-background: var(--done);
    --modal-container-background: var(--done);
}
.info
{
    --background: var(--info);
    --button-background: var(--info);
    --modal-container-background: var(--info);
}

.red
{
    --button-color: var(--white);
    --button-background: var(--red);
}

/* // COVERS // */
.cover{ z-index: 0;}

.cover::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cover::before
{
    background-size: cover;
    background-position: center;
    background-image: var(--cover-img);
    z-index: 0;
}

.cover.grain::before
{
    filter: contrast(100%) brightness(0%) grayscale(1);
    opacity: .2;
    background-image:
  	url("data:image/svg+xml,<svg width='1080' height='1080' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
}

.cover.solid{ background-color: var(--background); }

.cover.img-01{ --cover-img: url(../../img/covers/cover-01.jpg); }

/* // ESTILOS DE TEXTO // */
.t01, .t02, .t03
{
    --title-size: var(--base-size);
    font-weight: var(--f-bold);
}
.t02 { --title-size: calc(var(--base-size) * .75); }
.t03 { --title-size: calc(var(--base-size) * 1.25); }

.p01{ --prph-size: calc(var(--base-size) * .75); }
.p02{ --prph-size: var(--base-size); }
.p03{ --prph-size: calc(var(--base-size) * 1.25); }
.p04{ --prph-size: calc(var(--base-size) * 1.5); }


/* ==== ELEMENTOS ==== */

/* // BOTÕES // */
.button,
.button.message
{
    --foreground: var(--button-color, #FFF);
    --background: var(--button-background, #000);
    --resize-rate: 1;
    z-index: 0;
    transition: all 0.25s var(--ease-cubic);
    width: max-content;
}
.button.message
{
    width: auto;
    text-align: left;
}

.button.small{ --resize-rate: .75; }

.button.max-width{ width: 100%; }

.button [tabindex]
{
    display: block;
    transition: inherit;
}

.button.rounded,
.button.rounded [tabindex]
{
    border-radius: 100px;
}

button.button,
.button [tabindex],
button.button.message
{
    --font-size: calc(var(--base-size) * var(--resize-rate));
    font-size: var(--adjusted-font-size);
    padding: calc(var(--font-size) * .5) calc(var(--font-size) * 2);
    border-radius: calc(var(--font-size) * .5);
    color: var(--foreground);
    font-weight: var(--f-medium);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.button i
{
    font-family: var(--esl);
    display: block;
    line-height: 0;
    margin-top: calc(var(--font-size) * -.5);
    margin-bottom: calc(var(--font-size) * -.5);
}
.button i + span{ margin-left: var(--font-size); }
.button span + i{ margin-left: var(--font-size); }


button.button::after,
button.button::before,
.button [tabindex]::after,
.button [tabindex]::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-sizing: border-box;
    border-radius: inherit;
    transition: inherit;
}

button.button::after,
.button [tabindex]::after
{
    border: 2px solid var(--background);
}

button.button::before,
.button [tabindex]::before
{
    opacity: 0;
    background-color: var(--background);
}

button.button:hover,
button.button:focus,
.button:hover [tabindex],
.button [tabindex]:focus
{
    color: var(--foreground);
}

button.button:hover::before,
button.button:focus::before,
.button:hover [tabindex]::before,
.button [tabindex]:focus::before
{
    opacity: 1;
}

button.button.fill,
.button.fill [tabindex]
{
    color: var(--foreground);
}

button.button.fill::after,
.button.fill [tabindex]::after
{
    border: none;
}

button.button.fill::before,
.button.fill [tabindex]::before
{
    opacity: 1;
}

button.button.fill:hover,
button.button.fill:focus,
.button.fill:hover [tabindex],
.button.fill [tabindex]:focus
{
    color: var(--background);
}

button.button.fill:hover::before,
button.button.fill:focus::before,
.button.fill:hover [tabindex]::before,
.button.fill [tabindex]:focus::before
{
    background-color: var(--foreground);
}

button.button.fill.dusk,
.button.fill.dusk [tabindex]
{
    color: var(--foreground);
}
button.button.fill.dusk::after,
.button.fill.dusk [tabindex]::after
{
    background: var(--dusk, rgba(0,0,0,.2));
    opacity: 0;
}

button.button.fill.dusk::before,
.button.fill.dusk [tabindex]::before
{
    opacity: 1;
    background-color: var(--background);
}

button.button.fill.dusk:hover::after,
button.button.fill.dusk:focus::after,
.button.fill.dusk:hover [tabindex]::after,
.button.fill.dusk [tabindex]:focus::after
{
    opacity: 1;
}

button.button.message
{
    background-color: var(--background);
    padding-left: var(--font-size);
    padding-right: calc(var(--font-size) * 3);
    cursor: default;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    opacity: 0;
    transition: all .3s var(--ease-cubic);
}

button.button.message[aria-expanded='true']
{
    max-height: 500px;
    opacity: 1;
    padding-top: calc(var(--font-size) * .5);
    padding-bottom: calc(var(--font-size) * .5);
}

button.button.message::before
{
    content: '\e0b8';
    font-family: var(--esl);
    position: absolute;
    background-color: rgba(0,0,0,.2);
    opacity: 1;
    line-height: 1;
    width: calc(var(--font-size) * 2);
    height: calc(var(--font-size) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size);
    border-radius: 100%;
    margin: calc(var(--font-size) * .5);
    left: auto;
    top: 0;
    right: 0;
    cursor: pointer;
    pointer-events: auto;
}

button.button.message.left
{
    padding-right: var(--font-size);
    padding-left: calc(var(--font-size) * 3);
}

button.button.message.left::before
{
    right: auto;
    left: 0;
}

.button.hide{ display: none; }

.button.icon
{
    padding: calc(var(--font-size) * 1.2) calc(var(--font-size) * .7);
}
.button.icon i{ font-size: var(--font-size); }
.button.icon i::before{ line-height: 0; }

.button.create i::before{ content: '\e006'; }
.button.update i::before{ content: '\e0a9'; }
.button.upload i::before{ content: '\e0be'; }
.button.delete i::before{ content: '\5c'; }
.button.visualize i::before{ content: '\e05a'; }

/* // CONTROLES DE VALIDAÇÃO // */

.hint-button,
.message-display
{
    --square: 25px;
    background-color: var(--alert);
    color: #fff;
    box-shadow: 0 5px 12px -2px rgba(0,0,0,.25);
}

.hint-button
{
    --lens-opacity: .25;
    opacity: 0;
    width: var(--square);
    height: var(--square);
    border-radius: 50%;
    cursor: pointer;
    transition: all 2s linear;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    margin: calc(var(--support-base-size) * .625) calc(var(--support-base-size) * 1.25);
    right: 0;
    transition: opacity .2s linear;
    pointer-events: none;
    z-index: 2;
}

.hint-button.show{
    opacity: 1;
    pointer-events: auto;
}

.hint-button::before,
.hint-button::after
{
    font-family: var(--esl);
    font-size: 15px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 3px;
    width: 100%;
    line-height: 1;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition:
        background-color 0.2s linear,
        left 0.25s var(--ease-cubic);
}

.hint-button::before
{
    content: '\e0b0';
    left: 0;
}
.hint-button::after
{
    padding-top: 5px;
    content: '\e0b8';
    left: 100%;
}

.hint-button:hover::before,
.hint-button:focus::before,
.hint-button:hover::after,
.hint-button:focus::after
{
    background-color: rgba(0,0,0,var(--lens-opacity));
}

.hint-button[aria-expanded='true']::before{ left: -100%; }
.hint-button[aria-expanded='true']::after{ left: 0; }


.message-display
{
    --font-size: calc(var(--base-size) * .75);
    --line-gap: 1;
    border-radius: 3px;
    font-weight: var(--f-medium);
    padding: calc(var(--font-size) * .5) var(--font-size);
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    bottom: 0;
    margin-right: calc(var(--square) + (var(--base-size) * 2));
    opacity: 0;
    transition: all 0.25s var(--ease-quart);
}

.message-display.show
{
    transform: translateY(75%);
    opacity: 1;
}


/* // FORMULÁRIO // */
.field-group
{
    --remaining-space: 100%;
    --support-base-size: var(--base-size);
    --support-gap: var(--base-size);
    flex-basis: var(--flex-basis, 100%);
    display: flex;
    flex-wrap: wrap;
}

.field-group.small{ --support-base-size: calc(var(--base-size) * .75); }

:not(.field-group) > .field-group
{
    margin-left: calc(var(--support-gap) * -.5);
    margin-right: calc(var(--support-gap) * -.5);
    margin-bottom: calc(var(--support-gap) * -1);
}

.field-group + .field-group{ margin-top: calc(var(--base-size) * 3);}

.field-group > *
{
    box-sizing: border-box;
    padding-left: calc(var(--support-gap) * .5);
    padding-right: calc(var(--support-gap) * .5);
    margin-bottom: var(--support-gap);
}

.field-group > header{ margin-bottom: calc(var(--base-size) * 2);}

.field-group .text-field,
.field-group .select-field
{
    --font-size: var(--support-base-size);
    color: var(--field-color);
}
.field-group .button.icon{ --font-size: calc(var(--support-base-size) * 1.25); }

.field-group .text-field,
.field-group .select-field,
.field-group .button.icon
{
    min-height: calc(var(--base-size) * 2.5);
    min-width: calc(var(--base-size) * 2.5);
}

.field-group .error:empty{ display: none; }
.field-group .error
{
    --font-size: calc(var(--support-base-size) * .75);
    width: 100%;
    color: var(--warning);
    margin-left: calc(var(--support-gap) * .5);
    margin-right: calc(var(--support-gap) * .5);
}
.field-group .error::before
{
    content: '\e0b0';
    font-family: var(--esl);
    font-size: var(--support-base-size);
    margin-right: var(--support-gap);
}
.field-support{
    flex-basis: var(--flex-basis, auto);
}

.button-support{ margin-top: var(--support-gap); z-index: 0;}

.field-group.full{--flex-basis: 100%; }
.field-group.three-quart{--flex-basis: 75%; }
.field-group.two-third{--flex-basis: 66.666666%; }
.field-group.half{--flex-basis: 50%; }
.field-group.third{--flex-basis: 33.333333%; }
.field-group.quart{--flex-basis: 25%; }
.field-group.quint{--flex-basis: 20%; }

.field-group > *.full{ --flex-basis: var(--remaining-space); }
.field-group > *.three-quart{ --flex-basis: calc(var(--remaining-space) * .75); }
.field-group > *.two-third{ --flex-basis: calc(var(--remaining-space) * .666666); }
.field-group > *.half{ --flex-basis: calc(var(--remaining-space) * .5); }
.field-group > *.third{ --flex-basis: calc(var(--remaining-space) * .333333); }
.field-group > *.quart{ --flex-basis: calc(var(--remaining-space) * .25); }
.field-group > *.quint{ --flex-basis: calc(var(--remaining-space) * .2); }

.field-support > [class^='esl-']{
    position: absolute;
    z-index: 1;
    font-size: var(--support-base-size);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    left: calc(var(--support-base-size) * 1.5);
}

.field-support > .button.message[aria-expanded='true']:first-child{ margin-bottom: var(--support-base-size); }
.field-support > .button.message[aria-expanded='true']:not(:first-child):not(:last-child)
{
    margin-top: var(--support-base-size);
    margin-bottom: var(--support-base-size);
}
.field-support > .button.message[aria-expanded='true']:last-child{ margin-top: var(--support-base-size); }

.field-support > [class^='esl-'] + .text-field
{
    padding-left: calc(var(--support-base-size) * 3);
}
.field-support:empty{ display: none; }

.field-group button > i::before
{
    font-family: var(--esl);
    display: block;
    z-index: 1;
}
.field-group button.create > i::before{ content: '\e006'; }
.field-group button.update > i::before,
.field-group button.loading > i::before{ content: '\e0a9'; }

.field-group button.loading > i
{
    animation-name: rotation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.text-field,.select-field
{
    background-color: var(--gray-01);
    padding: calc(var(--font-size) * .5) var(--font-size);
    border-radius: calc(var(--base-size) * .5);
    box-sizing: border-box;
    width: 100%;
    color: var(--black);
    font-weight: var(--f-medium);
}

.select-field
{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: baseline;
    padding-top: calc(var(--font-size) * .75);
    background-image: url("data:image/svg+xml,<svg width='20' height='20' xmlns='http://www.w3.org/2000/svg'><text font-size='20' fill='%23372d2d' x='50%' text-anchor='middle' y='100%' class='small' style='font-family: emblematic-soft-linear'>\e08c</text></svg>");
    background-size: calc(var(--font-size) * 1.25);
    background-repeat: no-repeat;
    background-position: right var(--font-size) center;
}

.select-field > option
{
    font-size: inherit;
}


.document-field
{
    --font-size: var(--support-base-size);
    --padding-v: calc(var(--font-size) * .5);
    --padding-h: var(--font-size);
    font-weight: var(--f-medium);
    background-color: var(--button-background);
    color: var(--button-color);
    min-height: calc(var(--base-size) * 2.5);
    padding: var(--padding-v) var(--padding-h);
    box-sizing: border-box;
    border-radius: calc(var(--base-size) * .5);
    display: block;
    cursor: pointer;
    transition: all 0.25s var(--ease-cubic);
}

.field-group.small .document-field{ --padding-v: calc(var(--font-size) * .66666666); }

.document-field > [type='file']{ display: none; }

.document-field > .label
{
    padding: calc(var(--padding-v) - 4px) var(--padding-h);
    padding-right: calc((var(--font-size) * 3.333333) - 4px);
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: inherit;
    display: block;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    z-index: 1;
    transition: inherit;
}

.document-field > .label::after
{
    content: '\e0cf';
    font-family: var(--esl);
    font-size: calc(var(--font-size) * 1.333333);
    line-height: 1;
    position: absolute;
    right: var(--font-size);
    top: calc(50% - (var(--font-size) * .66666665));
}

.document-field.loading > .label::after
{
    content: '\e0a9';
    animation-name: rotation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.document-field.upload-error > .label::after{ content: '\e0b0'; }
.document-field.upload-error:hover .message-display
{
    transform: translateY(75%);
    margin: 0;
    opacity: 1;
}
.document-field.upload-done > .label::after{ content: '\e0d0'; }

.document-field > .current-file{
    display: block;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
}

.document-field > .current-file::before
{
    content: '\61';
    font-family: var(--esl);
    margin-right: var(--font-size);
    line-height: 0;
    font-size: calc(var(--font-size) * 1.333333);
}

.document-field::before,
.document-field::after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0,0,0,.2);
    border-radius: inherit;
    opacity: 0;
    transition: inherit;
}

.document-field::after{ width: 0; }
.document-field::before{ width: 100%; }

.document-field:not(.update):hover::before,
.document-field:not(.update):focus::before{ opacity: 1; }

.document-field.loading::after
{
    width: calc(var(--load) * 100%);
    opacity: 1;
}

.document-field.update{ pointer-events: none; }

.document-field.update > .current-file:not(:empty){ width: 50%; }
.document-field.update > .current-file:not(:empty) + .label
{
    left: auto;
    right: 4px;
    border-radius: calc((var(--base-size) * .5) - 4px);
    transform: translateX(0);
    pointer-events: all;
    cursor: pointer;
}

.document-field.update > .label::before
{
    content: '';
    display: block;
    background-color: rgba(0,0,0,.2);
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    transition: inherit;
}
.document-field.update > .label:hover::before{ opacity: 1; }


/* // AVATAR // */
.avatar
{
    --text-scale: .5;
    border-radius: 100%;
    border: calc(var(--base-size) * .5) solid var(--avatar-border);
    background-color: var(--avatar-background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--avatar-color);
}

.avatar::before
{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.avatar::after
{
    content: '\e07c';
    font-size: var(--scalable-text, var(--adjusted-font-size));
    font-family: var(--esl);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.avatar > img
{
    --font-size: calc(var(--base-size) * .75);
    position: absolute;
    clip-path: circle(50.0% at 50% 50%);
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.avatar > img[src=""]{ display: none; }

.avatar.field
{
    --font-size: calc(var(--base-size) * 1.5);
    box-sizing: border-box;
}

.avatar.field::after{ display: none; }

.avatar.loading::after
{
    content: var(--load, '0%');
    font-family: 'Roboto Flex', Arial, Helvetica;
    background-color: rgba(0,0,0,0.35);
    border-radius: 100%;
    display: flex;
    z-index: 2;
}

.avatar.field > label
{
    --text-scale: .4;
    position: absolute;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    border-radius: 100%;
    z-index: 3;
    background-color: var(--avatar-background);
    transition: background-color .4s ease-in-out;
    overflow: hidden;
}

.avatar.field > img ~ label > [type='file']
{
    position: absolute;
    font-size: 0;
    border-radius: inherit;
}

.avatar.field > label::before,
.avatar.field > label::after
{
    --centering: calc(50% - (var(--scalable-text) * .5));
    width: var(--scalable-text);
    height: var(--scalable-text);
    top: var(--centering);
    left: var(--centering);
    line-height: 0;
    font-size: var(--scalable-text, inherit);
    font-family: var(--esl);
    color: var(--avatar-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    transition: top 0.5s var(--ease-cubic);
}

.avatar.field > label::before{ content: '\e0cf'; }
.avatar.field > label::after
{
    content: '\e0b0';
    top: 100%;
    z-index: 0;
}

.avatar.field.error > label{ background-color: var(--alert); }
.avatar.field.error > label::before{ top: -100%; }
.avatar.field.error > label::after{ top: var(--centering); }

.avatar.field > label ~ .message-display
{
    width: calc(100% + var(--base-size) * 2);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.avatar.field.error > label:hover ~ .message-display
{
    transform: translateX(-50%) translateY(100%);
    opacity: 1;
}

.avatar.field > img[src=""] ~ label
{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.avatar.field.loading > img[src=""] ~ label::after
{
    content: '';
    top: 0;
    left: 0;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--done);
    animation-name: avatar-loading;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: var(--ease-cubic);
}

.avatar.field.loading > img[src=""] ~ label::before{ display: none; }

.avatar.field > img:not([src=""]) ~ label
{
    --text-scale: .5;
    width: calc(var(--base-size) * 2);
    height: calc(var(--base-size) * 2);
    top: calc((1 - .1464475)*100%);
    left: calc((1 - .1464475)*100%);
    transform: translateX(-50%) translateY(-50%);
}

.avatar.field > img:not([src=""]) ~ label::before{ content: '\e0a9'; }
.avatar.field.loading > img:not([src=""]) ~ label::before{
    animation-name: rotation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


/* // LOGO // */
.logo{ --height-ratio: 1; }
.logo > .img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}


.logo::before
{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: calc(100% * var(--height-ratio));
}

.faep.logo{
    --size: var(--grd-2);
    --height-ratio: .7716535433;
    width: var(--size);
    font-size: var(--size);
}

/* // BARRAS DE MENSAGEM // */
.message.bar{
    --font-size: calc(var(--base-size) * .75);
    background-color: var(--background);
    color: var(--text-color);
    border-radius: calc(var(--base-size) * .25);
    padding: calc(var(--base-size) * .5) var(--base-size);
    font-weight: var(--f-medium);
}
.message.bar:empty{ display: none; }

/* // TAGS // */
.tag
{
    --font-size: var(--base-size);
    padding: calc(var(--font-size) * .5) calc(var(--font-size) * 1.5);
    background: var(--button-background, var(--gray-02));
    color: var(--button-color, var(--white));
    display: flex;
    border-radius: calc(var(--font-size) * 1.5);
    font-size: var(--adjusted-font-size);
    align-items: baseline;
    width: fit-content;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.tag > i
{
    font-size: calc(var(--font-size) * 1.333333);
    line-height: 0;
    margin-right: calc(var(--font-size) * .5);
}

.tag.small{ --font-size: calc(var(--base-size) * .75);}

/* // FLEX-BOX // */
.flex-box{
    --flex-gap: var(--base-size);
    display: flex;
}

/* ==== COMPONENTES ==== */
/* // SEARCH BAR // */
.search-bar
{
    display: flex;
    margin-left: calc(var(--page-margin) * -.25);
    margin-right: calc(var(--page-margin) * -.25);
    align-items: flex-start;
}

.search-bar > .field-group
{
    --retraction: calc((var(--support-base-size) * 3) + var(--support-gap));
    --remaining-space: calc(100% - var(--retraction));
    padding: 0 calc(var(--page-margin) * .25);
}

.search-bar > .field-group.small
{
    --retraction: calc((var(--base-size) * 2.5) + var(--support-gap));
}

.search-bar > .field-group + .field-group{ margin-top: 0; }

.search-bar > .field-group > .group-legend
{
    flex-basis: 100%;
    margin-bottom: var(--font-size);
}

.search-bar .button-support
{
    flex-grow: 0;
    width: calc(var(--base-size) * 2.5);
    box-sizing: content-box;
    margin-top: 0;
    order: 10;
}

/* // FILTER CONTROLS // */
.filter-controls > * + *,
.filter-controls > header > * + *{ margin-top: calc(var(--base-size) * 2);}

/* // MODALBOX // */
.modal.active
{
    --container-pad: calc(var(--column-gap) * .5);
    --max-width: 800px;
    position: fixed;
    display: grid;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    grid-template-columns:
        1fr
        [pre-first]
        calc(var(--column-gap) * .5)
        [first]
        var(--container-pad)
        [pos-first]
        minmax(0, calc(var(--max-width) - calc(var(--container-pad) * 2)))
        [pre-last]
        var(--container-pad)
        [last]
        calc(var(--column-gap) * .5)
        [pos-last]
        1fr
    ;
    grid-template-rows:
        [pre-first]
        var(--display-gap)
        [first]
        var(--container-pad)
        [pos-first]
        1fr
        [pre-last]
        var(--container-pad)
        [last]
        var(--display-gap)
        [pos-last]
    ;
    left: 0;
    right: 0;
    top: calc(var(--display-gap) * -1);
    z-index: 2;
    transition: .5s var(--ease-cubic);
    transition-property: top, opacity;
}

.modal.active.expanded
{
    top: 0;
    opacity: 1;
    pointer-events: auto;
}

.modal.active::before
{
    background-color: var(--modal-skin, var(--white));
    opacity: .5;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modal.active > .container
{
    background-color: var(--modal-container-background, var(--white));
    border-radius: calc(var(--base-size) * .5);
    box-shadow: var(--shadow-01);
    padding: var(--container-pad);
    grid-column: first / last;
    grid-row: first / last;
    align-self: start;
    max-height: calc(100vh - calc(var(--display-gap) * 2));
    box-sizing: border-box;
    overflow: auto;
}

.modal.active > .close-button
{
    --square: calc(var(--base-size) * 2);
    background-color: var(--button-background);
    width: var(--square);
    height: var(--square);
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    grid-column: pre-last / last;
    grid-row: first / pos-first;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.modal.active > .close-button::before
{
    content: '\e0b8';
    font-family: var(--esl);
    color: var(--button-color);
    font-size: calc(var(--square) * .65);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color .2s ease-in-out;
}

.modal.active > .close-button:hover::before,
.modal.active > .close-button:focus::before
{
    background-color: rgba(0,0,0,.2);
}

.modal.active > .container.frame
{
    --outside-vertical-margin: calc(var(--container-pad) * .5);
    --inside-vertical-margin: var(--outside-vertical-margin);
    --outside-horizontal-margin: var(--outside-vertical-margin);
    --inside-horizontal-margin: var(--outside-vertical-margin);
    --gap: var(--outside-vertical-margin);
    padding: 0;
}

.modal.active > .container > .field-group
{
    grid-column: pos-first / pre-last;
    grid-row: pos-first / 4;
}
.modal.active > .container > .field-group
+ .field-group{ grid-row: 4 / 5; }

.modal.active > .container > .field-group
+ .field-group
+ .field-group{ grid-row: 5 / 6; }

.modal.active > .container > .field-group
+ .field-group
+ .field-group
+ .field-group{ grid-row: 6 / 7; }

.modal.active > .container > .aside
{
    grid-column: pos-first / pre-division 1;
    grid-row: pos-first / pre-last;
}
.modal.active > .container > .aside ~ .field-group{ grid-column: pos-division 1 / pre-last; }

.modal.active.dialog
{
    --max-width: 540px;
    --container-pad: calc(var(--column-gap) * .25);
}

.modal.active.dialog > .close-button{ --square: calc(var(--container-pad) * .75); }

.modal.active.dialog > .container
{
    padding-left: calc(var(--container-pad) * 4);
}

.modal.active.dialog > .container::before{
    font-size: calc(var(--container-pad) * 1.25);
    font-family: var(--esl);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.2);
    width: calc(var(--container-pad) * 2);
    height: calc(var(--container-pad) * 2);
    border-radius: 100%;
    position: absolute;
    left: var(--container-pad);
    top: var(--container-pad);
}
.modal.active.dialog > .container .msg-support
{
    display: flex;
    align-items: center;
    min-height: calc(var(--container-pad) * 2);
}

.modal.active.dialog > .container .buttons-support
{
    display: flex;
    margin: calc(var(--base-size) * -.5) calc(var(--base-size) * -.25);
    margin-top: var(--container-pad);
}
.modal.active.dialog > .container .buttons-support > * {
    margin: calc(var(--base-size) * .5) calc(var(--base-size) * .25);
    margin-top: 0;
}
.modal.active.dialog > .container .buttons-support:empty{ display: none; }

.modal.active.dialog.info > .container::before{ content: '\e0c0'; }
.modal.active.dialog.done > .container::before{ content: '\e0d0'; }
.modal.active.dialog.warning > .container::before{ content: '\e0b0'; }
.modal.active.dialog.alert > .container::before{ content: '\e0b7'; }

/* // CARDS // */
.card
{
    display: flex;
    border: 1px solid var(--button-background);
    box-sizing: border-box;
    border-radius: calc(var(--base-size) * .5);
    align-items: center;
    padding: var(--base-size);
}

.card > .button-support{ display: flex; }
.card > .button-support > * + * { margin-left: calc(var(--base-size) * .5);}

.card + .card{ margin-top: var(--base-size); }

.card > * + *{ margin-left: var(--base-size);}

.card .title{ color: var(--title-color); }
.card > figure
{
    width: calc(var(--base-size) * 4);
    border: none;
}

.card .content { flex-grow: 4; }
.card .content > .specifications
{
    --font-size: calc(var(--base-size) * .75);
    color: var(--text-color);
    display: flex;
    align-items: baseline;
    margin-top: var(--base-size);
}

.card .content > .specifications > span + span{ margin-left: var(--font-size); }

/* ==== ESTRUTURAS ==== */

.frame
{
    --divisions: 6;
    --outside-vertical-margin: calc(var(--page-margin) * .5);
    --inside-vertical-margin: calc(var(--page-margin) * .5);
    --outside-horizontal-margin: calc(var(--page-margin) * .5);
    --inside-horizontal-margin: calc(var(--page-margin) * .5);
    --gap: calc(var(--column-gap) * .5);

    display: grid;
    grid-template-columns:
        [pre-first]
        var(--outside-horizontal-margin)
        [first]
        var(--inside-horizontal-margin)
        [pos-first]
        repeat(calc(var(--divisions) - 1),
            1fr
            [pre-middle]
            minmax(0, var(--gap))
            [middle]
            minmax(0, var(--gap))
            [pos-middle]
            1fr
            [pre-division]
            minmax(0, var(--gap))
            [division]
            minmax(0, var(--gap))
            [pos-division]
        )
        1fr
        [pre-middle-last]
        minmax(0, var(--gap))
        [middle-last]
        minmax(0, var(--gap))
        [pos-middle-last]
        1fr
        [pre-last]
        var(--inside-horizontal-margin)
        [last]
        var(--outside-horizontal-margin)
        [pos-last]
    ;

    grid-template-rows:
        [pre-first]
        var(--outside-vertical-margin)
        [first]
        var(--inside-vertical-margin)
        [pos-first]
        repeat(10, auto)
        [pre-last]
        var(--inside-vertical-margin)
        [last]
        var(--outside-vertical-margin)
        [pos-last]
    ;
}

.frame.mono{ --divisions: 1; }
.frame.di{ --divisions: 2; }
.frame.tri{ --divisions: 3; }
.frame.tetra{ --divisions: 4; }
.frame.penta{ --divisions: 5; }
.frame.hexa{ --divisions: 6; }
.frame.octa{ --divisions: 8; }


.filter-controls h1{
    font-weight: var(--f-bold);
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--bound-retraction);
    color: var(--title-color, var(--foreground));
}

.panel-list > * + *,
.panel-list > header > * + *{ margin-top: calc(var(--base-size) * 2); }
.panel-list .pagination{ display: flex; }
.panel-list .pagination > * + *{ margin-left: calc(var(--base-size) * .5);}
.panel-list .pagination .button
{
    padding-left: var(--base-size);
    padding-right: var(--base-size);
}
.panel-list .pagination .button > i::before{
    font-family: var(--esl);
}
.panel-list .pagination .button.last > i::before{ content: '\e092';}
.panel-list .pagination .button.first > i::before{ content: '\e094';}
.panel-list .pagination .button.prev > i::before{ content: '\e098';}

.panel-header,
.panel-header .buttons-support,
.panel-header > .asset-info > header
{
    display: flex;
}
.panel-header{ align-items: flex-start; }

.panel-header > .avatar
{
    width: var(--grd-1);
    border: none;
}

.panel-header > * + *{ margin-left: calc(var(--base-size) * 2); }
.panel-header > .asset-info > * + *{ margin-top: calc(var(--base-size) * 2); }
.panel-header > .asset-info > header{ align-items: center; }
.panel-header > .asset-info > header > * + *{ margin-left: calc(var(--column-gap) * .5); }
.panel-header .buttons-support > * + *,
.panel-header p > span + span{ margin-left: var(--base-size); }


.tab-display
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

[role='tablist']
{
    display: flex;
    padding-left: calc(var(--base-size) * 2);
    border-bottom: 1px solid var(--button-background);
    grid-row: 1 / 2;
}

[role='tablist'] > [role='tab']
{
    --font-size: calc(var(--base-size) * .75);
    padding: calc(var(--font-size) * .5) var(--font-size);
    border-radius: calc(var(--font-size) * .5) calc(var(--font-size) * .5) 0 0;
    background-color: var(--button-background);
    color: var(--button-color);
    cursor: pointer;
    transition: background-color .5s var(--ease-quint);
}

[role='tablist'] > [role='tab']:hover,
[role='tablist'] > [role='tab']:focus,
[role='tablist'] > [role='tab'][aria-selected='true']
{
    background-color: var(--red);
}

[role='tablist'] > [role='tab'] + [role='tab']{ margin-left: calc(var(--font-size) * .5); }
[role='tabpanel']
{
    margin-top: calc(var(--base-size) * 2);
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    left: 0;
    opacity: 1;
    transition: all .75s var(--ease-quint);
}

[role='tabpanel'].hide
{
    left: calc(var(--column-gap) * -1);
    opacity: 0;
    pointer-events: none;
}

/* // ACCESS SCREEN // */
#AccessScreen{ min-height: 100vh; }

#AccessScreen .panel
{
    grid-column: pos-division 3 / pre-last;
    grid-row: pos-first / pre-last;
    align-self: center;
    background-color: var(--white);
    padding: calc(var(--column-gap) * .75) calc(var(--column-gap) * .5);
    border-radius: calc(var(--base-size) * .5);
    box-shadow: var(--shadow-01);
}

#AccessScreen .panel .logo
{
    --size: var(--grd-1);
    color: var(--red);
}

#AccessScreen .panel > *:not(:empty) ~ *{ margin-top: calc(var(--base-size) * 3); }
#AccessScreen .panel .presentation
{
    margin-top: calc(var(--base-size) * 2);
    font-weight: var(--f-medium);
}

/* // PANEL SCREEN // */
#PanelScreen .heading-bar
{
    grid-column: pre-first / pos-last;
    grid-row: pre-first / 4;
    align-self: start;
    margin: calc(var(--page-margin) * .25);
    margin-bottom: 0;
    height: calc(var(--page-margin) * 1.75);
}
#PanelScreen .heading-bar::before
{
    background-position: center 25%;
    border-radius: calc(var(--base-size) * .5);
}
#PanelScreen .heading-bar + #CommandPanel ~ *:not(.modal){ margin-top: var(--row-gap); }

/* //// COMMAND PANEL //// */
#PanelScreen #CommandPanel
{
    grid-column: pos-first / pre-division 1;
    grid-row: pre-first / pre-first;
    align-self: start;
    background-color: var(--background);
    border-radius: calc(var(--base-size) * .5);
    box-shadow: var(--shadow-01);
    margin-top: calc(var(--page-margin) + var(--base-size));
}

#PanelScreen #CommandPanel .avatar
{
    width: 50%;
    margin: auto;
    margin-top: calc(var(--base-size) * 2.5);
    margin-bottom: var(--base-size);
}

#PanelScreen #CommandPanel > header .prph
{
    --lead-ratio: 0.25;
    font-weight: var(--f-bold);
    text-align: center;
}

#PanelScreen #CommandPanel > header .name
{
    --text-color: var(--title-color);
    --prph-size: calc(var(--base-size) * .75);
}

#PanelScreen #CommandPanel > header .type
{
    --prph-size: calc(var(--base-size) * .5);
}

#PanelScreen #CommandPanel > nav{ margin-top: calc(var(--base-size) * 2);}
#PanelScreen #CommandPanel > nav li{ overflow: hidden; }
#PanelScreen #CommandPanel > nav li:last-of-type{ border-radius: 0 0 calc(var(--base-size) * .5) calc(var(--base-size) * .5); }

#PanelScreen #CommandPanel > nav a [tabindex]
{
    --font-size: calc(var(--base-size) * .65);
    --min-height: calc(var(--base-size) * 2.5);
    font-size: var(--adjusted-font-size);
    font-weight: var(--f-medium);
    line-height: var(--font-size);
    display: flex;
    align-items: baseline;
    padding: var(--base-size) calc(var(--base-size) * 2);
    min-height: var(--min-height);
    box-sizing: border-box;
    border-top: 1px solid var(--command-button-border);
    color: var(--command-button-color);
    transition: all 0.2s ease-in-out;
    transition-property: background-color, color;
}
#PanelScreen #CommandPanel > nav a.send-confirmation [tabindex]{ color: var(--alert); }

#PanelScreen #CommandPanel > nav a [tabindex]::before
{
    font-family: var(--esl);
    font-size: calc(var(--base-size) * .75);
    margin-right:  calc(var(--base-size) * .75);
}
#PanelScreen #CommandPanel > nav a.loading [tabindex]::after{
    content: '\e0a9';
    font-family: var(--esl);
    font-size: var(--base-size);
    position: absolute;
    line-height: 1;
    top: calc(var(--min-height) * .35);
    right: var(--base-size);
    animation-name: rotation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#PanelScreen #CommandPanel > nav a.send-confirmation [tabindex]::before{ content: '\e00d'; }
#PanelScreen #CommandPanel > nav a.home-screen [tabindex]::before{ content: '<'; }
#PanelScreen #CommandPanel > nav a.profile [tabindex]::before{ content: '\e080'; }
#PanelScreen #CommandPanel > nav a.add-student [tabindex]::before{ content: '\5b'; }
#PanelScreen #CommandPanel > nav a.see-admins [tabindex]::before{ content: '\e08a'; }
#PanelScreen #CommandPanel > nav a.load-sheet [tabindex]::before{ content: '\e0cf'; }
#PanelScreen #CommandPanel > nav a.export-sheet [tabindex]::before{ content: '\e0bd'; }
#PanelScreen #CommandPanel > nav a.exit [tabindex]::before{ content: '\3e'; }

#PanelScreen #CommandPanel > nav a [tabindex]:focus,
#PanelScreen #CommandPanel > nav a:hover [tabindex]
{
    background-color: var(--command-button-background);
    color: var(--background);
}
#PanelScreen #CommandPanel > nav a.hide{ display: none; }


#PanelScreen > .filter-controls,
#PanelScreen > .panel-header
{
    grid-column: pos-division 1 / pre-last;
    grid-row: 4 / 5;
}

#PanelScreen > .panel-header
{
    grid-column: pos-division 1 / pre-division 4;
    grid-row: 4 / 5;
}

#PanelScreen > .central-panel
{
    grid-column: pos-division 1 / pre-last;
    grid-row: 5 / pre-last;
}

#PanelScreen > .filter-controls + .central-panel,
#PanelScreen > .panel-header + .central-panel{ margin-top: calc(var(--base-size) * 2);}


/* MODAL VIEWS */
.modal.active #DiplomaView
{
    grid-column: pos-first / pre-last;
    grid-row: pos-first / pre-last;
}

.modal.active #DiplomaView > * + *{ margin-top: calc(var(--base-size) * 2); }
.modal.active #DiplomaView > header > div
{
    display: flex;
    align-items: center;
    margin-top: var(--base-size);
}

.modal.active #DiplomaView > header > div > * + *{ margin-left: var(--base-size);}