
html {
    font-family: Arial, Helvetica, sans-serif;
    /* font-size: 16px; */
}

body {
    padding: 0;
    margin: 0;
    background-color: rgb(248, 248, 248);
    color: #333333;
}

ul, ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0;
    padding: 0;
}

pre {
    background-color: rgb(240, 240, 240);
    white-space: pre-wrap;
    padding: 0.7em;
    margin: 0.7rem 0;
    border: 1px solid rgb(199, 199, 199);
    border-radius: 4px;
}

.container {
    margin: 1rem 2%;
}


/**********************************************
 HEADER
**********************************************/

header {
    background-color: #455A64;
    color: white;
    padding: 1rem 0;
}

h1 {
    margin: 0;
}

section {
    margin-bottom: 1.5rem;
}

/**********************************************
 SUMMARY
**********************************************/

.summary {
    display: grid;
    grid-template-columns: auto minmax(15rem, 23rem);
    grid-gap: 1rem;
    align-items: center;
    /* justify-content: start; */
}

.metadata {
    align-self: start;
}

.metadata td:first-child {
    font-weight: bold;
    padding-right: 0.7rem;
}

.metadata td {
    padding: 0.2rem;
    vertical-align: top;
}

.graph {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0.7rem;
    align-items: center;
}

.graph svg {
    width: 100%;
    height: auto;
}

.graph svg text {
    font-size: 10px;
    fill: #333333;
}

{% for category, (bg, fg) in colors.items() %}
.graph svg .{{ category }} {stroke: {{ bg }};}
{% endfor %}

.legend {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.3rem;
    align-items: center;
}


/**********************************************
 WARNINGS
**********************************************/

.warnings {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.7rem;
    align-items: start;
}


/**********************************************
 TESTS
**********************************************/

.title {
    cursor: pointer;
    padding: 0.4rem;
}

.collapsible > .title::before {
    content: " ";
    background-image: url("{{ icons.arrow }}");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    width: 0.7em;
    height: 0.7em;
    display: inline-block;
    justify-self: end;
    transform: rotate(0deg);
    transition: transform ease-out 0.2s;
}

.collapsible:not(.collapsed) > .title::before {
    transform: rotate(90deg);
}

.collapsed > .content {
    display: none;
}

.badge {
    font-size: 85%;
    text-align: center;
    background-color: #78909C;
    color: white;
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: 4px;
}

{% for category, (bg, fg) in colors.items() %}
.status.{{ category }} {
    background-color: {{ bg }} !important;
    color: {{ fg }} !important;
}
{% endfor %}

.file > .title {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-gap: 0.7rem;
    align-items: center;
}

.fspath {
    margin: 0;
    font-size: 1.1em;
}

.file > .title > .counts > div {
    margin-right: 0.3em;
}

.file > .content {
    margin-left: 1rem;
    margin-top: -0.5rem;
    padding: 0.7rem 0;
}

.test {
    background-color: white;
    margin-bottom: 0.7rem;
    border-radius: 4px;
    box-shadow: 0 1px 2px #afafaf;
}

.status {
    font-weight: bold;
}

.test > .title {
    display: grid;
    grid-template-columns: 1rem 4.5em 1fr auto;
    grid-gap: 0.7rem;
    align-items: center;
    /* justify-content: start; */
}

.duration {
    font-size: 85%;
    font-weight: normal;
    color: rgb(112, 112, 112);
}

.test-name {
    font-size: 1em;
    margin: 0;
    word-break: break-all;
}

.test > .content {
    padding: 0.7rem;
}

.documentation p {
    margin-top: 0;
    margin-bottom: 1em;
}

.marker {
    display: inline-block;
    color: #5e5e5e;
    margin: 0 0.2rem 0.2rem 0;
}

.fixturename {
    margin: 0 0.2rem 0.2rem 0;
}


/**********************************************
 TEST PHASES
**********************************************/

.test-phases {
    border-left: 1px solid #b1b1b1;
    margin-left: 1rem;
}

.phase {
    position: relative;
    /* padding: 0.7rem 0 0.7rem 1rem; */
    padding-left: 1rem;
    margin-bottom: 0;
    border-radius: 0;
}

.phase .status {
    position: absolute;
    display: inline-block;
    margin-left: -2.4rem;
    margin-top: -0.3em;
    padding: 0;
    transform: translateX(-50%);
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 500%;
    border: 2px solid #464646;
    background-color: white;
}

.phase-name {
    /* margin-left: 1rem; */
    display: inline-block;
    font-size: 1em;
    margin: 0;
}

.section-title {
    font-size: 1em;
    font-weight: normal;
    margin: 1em 0 0 0;
    padding: 0;
}
