/* form summary container
==================================================================================================== */

/* main container */
html > body .form-summary
{
    margin: 1em 0 0 0; padding: 2em;
    font-size: 1em;
    color: var(--white);
    border-radius: 0.5em;
}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    html > body .form-summary {font-size: 0.8em;}
}
@media only screen and (max-width: 480px)
{
    html > body .form-summary {padding: 1em;}
}

/* background */
html > body .form-summary::before
{
    top: 0; left: 0; display: block; float: left;
    background: currentColor;
    border-radius: inherit;
    box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.5), 0 0.5em 1em 0.25em rgba(0,0,0,0.5);
    opacity: 0.1;
}










/* heading
==================================================================================================== */

/* main container */
html > body .form-summary :is(h1,h2,h3,h4,h5,h6)
{
    text-transform: uppercase;
    font-size: 1.4em;
}










/* list
==================================================================================================== */

/* main container */
html > body .form-summary ul
{
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.75em; row-gap: 0.5em;
    padding: 0;
}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .form-summary ul {grid-template-columns: 1fr; column-gap: 0; row-gap: 0;}
}










/* list item
==================================================================================================== */

/* main container */
html > body .form-summary ul > li {display: contents;}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .form-summary ul > li {margin: 1em 0 0 0;}
}

/* hide dot */
html > body .form-summary ul > li::before {display: none;}










/* label/data containers
==================================================================================================== */

/* main container */
html > body .form-summary ul > li span {position: relative;}





/* label
================================================== */

/* main container */
html > body .form-summary ul > li span.label
{
    padding: 0 1em 0 0.35em;
    white-space: nowrap;
    font-weight: 200;
    border-radius: 0.2em;
}

/* background */
html > body .form-summary ul > li span.label::before
{
    top: 0; left: 0; display: block; float: left; background: currentColor;
    border-radius: inherit;
    opacity: 0.15;
    filter: invert(1);
}

/* arrow icon */
html > body .form-summary ul > li span.label::after
{
    transform: translate3d(50%,-50%,0);
    top: 50%; right: 0; display: block; float: right; width: auto; height: auto; content: "\f105";
    font-family: var(--fa); font-weight: 700;
}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .form-summary ul > li span.label::after {display: none;}
}





/* data
================================================== */

/* main container */
html > body .form-summary ul > li span.data {font-weight: 500;}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .form-summary ul > li span.data {margin: 0 0 1em 0; padding: 0 0 0 0.35em;}
    html > body .form-summary ul > :last-child span.data {margin: 0;}
}