@import url("base.css?v=5");

:root {
    --main-color: hotpink;
    --main-background: #f4f4f4;
    --pane-padding: 5px 42px;
    --gutter: 0.5em;
    /*--lanes-color: #ffd8b1;*/
    --lanes-color: #efffe1;
    --faciliy-color: #ffeffe;
}

/*
section.listing {
main { 
    background-color: var(--main-background);
}*/

.hide { display: none; }

#map { height: 400px; }
div.text-lab {
    padding: 0;
    margin-left: 0;
    display: none;  /* hidden by default */
}
.text-labels span {
    /* transform: rotate(30deg); */
    display: block;
    color: #008800;
    rotate: -30deg;
}


/* Cards to list inspections */
.insp-card {
    display: flex;
    align-items: stretch;
    background: white;
    width: 100%;
    margin: 5px 0;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.insp-card > :nth-child(1) {
    flex: 0 0;
    white-space: nowrap;
    background-color: #e4e7e8;
    padding: 0.3em 0.5em;
}
.insp-card > :nth-child(3) {
    flex: 0 0;
    padding: 0.3em 0.5em;
}
.insp-card > * {
    flex: 1 1 90%;
    padding: 0.3em 0.5em;
}
.insp-card p {
    margin: 0;
}
.insp-card p:nth-child(1) span {
    float: right;
}
.insp-card p:nth-child(2) {
    font-weight: bold;
    font-size: 0.9rem;
    color: #888;
}
.insp-card p:nth-child(3) {
    font-size: 0.9rem;
    color: #888;
}
.insp-card .date {
    float: right;
}
.ok {
    fill: #afd2af;
    /* stroke: orange; */
}

@media screen and (max-width: 480px) {
    .imgcard {
        display: none;
    }
}

.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.125em;  /* bottom, middle... */
    stroke-width: 0;
    stroke: #888;
    fill: #888;
    /* stroke: currentColor;
    fill: currentColor; */
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */





/* Form organization */

.flex-fields {
    display: flex;
    flex-flow: row wrap;
}
.flex-fields > * {
    flex: 1 1 auto;
    /* margin: 0.5rem 0; */
}

/* form#searchinspection .form-field::nth-child(1) { */
form#searchinspection .form_field:nth-child(1) {
    max-width: 10em;
}
form#inspection select#item {
    min-width: 10em;
}
.textinfo .form_field {
    width: 20em;
}



.fields h4 {
    font-size: 130%;
    margin: 0;
}


dl {
    display: flex;
    min-width: 20em;
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    /* border: solid #333;
    border-width: 1px 1px 0 0; */
}
dt {
    flex-basis: 40%;
    padding: 0.2rem 0.5rem;
    margin: 1px 0;
    background: #f7f7f7;
    text-align: right;
    /* color: #fff; */
}
dt::after {
    content: ":";
}
dd {
    flex-basis: 60%;
    flex-grow: 1;
    margin: 0;
    padding: 0.2rem 0.5rem;
    /* border-bottom: 1px solid #333; */
}

.card {
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.card > h4 {
    margin: 0 0 0.5em 0;
}



article.result {
    background-color: #eee;
    padding: 1rem;
    margin: 1em 0;
    /* border-radius: 0.5rem; */
}
article.result p {
    margin: 0;
}
.accepted {
    border-left: 0.3rem solid #63c74e;
}
.not-accepted {
    border-left: 0.3rem solid #fcef27;
}
.right {
    text-align: right;
}

.label {
    min-width: 4rem;
}
.label-warning {  background-color: #ffc107; color: #fff; }
.label-success {
    background-color: #fff;
    color: #50a83e;
    border: solid #63c74e; 3px;
}