/* 
	Standard layout definitions 
*/
/* darker blue */
/* website text blue */
/* gray */
/* orange */
/* darker gray */
/* gray */
/* light gray */
/* small device width */
/* website styles */
/* orange text background (used for BETA) */
/* text styles */
.text-style-small {
  font-size: 1.2em;
  line-height: 1.5em;
  letter-spacing: 0.03125em;
}
.text-style-standard {
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: 0.03125em;
}
.text-style-large {
  font-size: 2.8em;
  line-height: 1.18em;
}
/*
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ------------------------------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation can be
 *  found at http://fontawesome.io.  Stay up to date on Twitter at
 *  http://twitter.com/fontawesome.
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - The Font Awesome font is licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Font Awesome documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 *
 *  Author - Dave Gandy
 *  ------------------------------------------------------------------------------
 *  Email: dave@fontawesome.io
 *  Twitter: http://twitter.com/davegandy
 *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
 */
/*
@import "awesome/mixins.less";
*/
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=3.2.1');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
/*
@import "awesome/core.less";
@import "awesome/bootstrap.less";
@import "awesome/extras.less";
@import "awesome/icons.less";
*/.damage-row-flex-wrapper {
  display: flex;
  justify-content: space-between;
}
.damage-row-flex-wrapper > div {
  flex-basis: 33%;
}
.toggle-row-header {
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: .03125em;
  color: #000;
  background: #deebf2;
  min-height: 1.5em;
  padding: 0.75em;
  margin: 0;
}
.toggle-row-header:hover {
  background: #acd9ee;
}
.toggle-row-left {
  font-weight: normal;
  display: flex;
}
.damage-header-date {
  width: 6em;
}
.toggle-row-header-nav {
  color: #2064a0;
}
.toggle-row-nav {
  font-family: 'FontAwesome';
}
.damage-content {
  border: 0 !important;
}
.damage-row {
  margin: 0.3em 0;
}
.damage-row-content {
  background: #eef5f8;
  padding: 1em;
}
.damage-empty-row span {
  font-size: 1.6em;
  line-height: 2em;
}
.damage-row-list > span {
  font-size: 1.6em;
  font-weight: bold;
  color: #4d4d4d;
}
.damage-row-list > ul {
  margin-left: 1em;
  margin-top: 0.5em;
  font-size: 1.6em;
  line-height: 1.4em;
}
.damage-groups {
  border-style: solid;
  border-width: 0 0 0 thin;
  border-color: #dddddd;
  border-radius: 0.2em;
  padding-left: 2em;
}
.damage-groups-empty {
  border-style: solid;
  border-width: 0 0 0 thin;
  border-color: #dddddd;
  border-radius: 0.2em;
  padding-left: 2em;
}
.damage-groups-empty h2 {
  font-size: 1.6em;
  font-weight: bold;
  color: #4d4d4d;
  padding-bottom: 0.75em;
}
.damage-groups-empty span {
  font-size: 1.6em;
}
.damage-poi-empty {
  flex-basis: 60% !important;
}
.damage-poi-empty h2 {
  font-size: 1.6em;
  font-weight: bold;
  color: #4d4d4d;
  padding-bottom: 0.75em;
}
.damage-poi-empty span {
  font-size: 1.6em;
}
.damage-not-reported {
  border-style: solid;
  border-color: #b4b4b4;
  border-width: 0 thin thin thin;
}
.damage-glossary-content {
  background: #eef5f8;
  padding: 1em;
}
.damage-glossary-content .damage-glossary-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.damage-glossary-content .damage-glossary-entry {
  margin: 0.5em 0;
}
.damage-glossary-content dt.damage-glossary {
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: 0.03125em;
  font-weight: bold;
  color: #4d4d4d;
}
.damage-glossary-content dd.damage-glossary {
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: 0.03125em;
  padding-bottom: 0.2em;
  color: #888888;
}
div.car-svg.left_rear_area .left_rear,
div.car-svg.left_area .left,
div.car-svg.left_front_area .left_front,
div.car-svg.right_rear_area .right_rear,
div.car-svg.right_area .right,
div.car-svg.right_front_area .right_front,
div.car-svg.rear_area .rear,
div.car-svg.front_area .front,
div.car-svg.roof_area .roof,
div.car-svg.vehicle_damaged_on_all_sides .all_sides {
  fill: #5995ba;
}
.car-svg {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.car-label.full-width {
  width: 100%;
  text-align: center;
}
.car-label.top-label {
  margin-bottom: 0.5em;
}
.car-label.bottom-label {
  margin-top: 0.5em;
}
.car-label-rotated.right-label {
  margin-left: 0.5em;
}
.car-label-rotated.left-label {
  margin-right: 0.5em;
}
.car-label-rotated {
  transform: rotate(180deg);
  writing-mode: tb-rl;
}
.details-timeout-wrapper {
  display: grid;
  grid-template-columns: 6% 1fr;
  grid-template-rows: 1fr 1.2fr 1fr 1fr;
  border: #e10000 solid 0.15em;
  padding: 0.625em;
  font-size: 1.6em;
  line-height: 1.5em;
}
.details-timeout-wrapper > .timeout-icon-info {
  margin: auto;
  color: #e10000;
  font-size: 0.9em;
  grid-area: 1 / 1 / 2 / 2;;
}
.details-timeout-wrapper .details-timeout-header {
  margin: auto 0;
  font-weight: 600;
  color: #4d4d4d;
  grid-area: 1 / 2 / 2 / 3;
}
.details-timeout-wrapper .details-timeout-description {
  grid-area: 2 / 2 / 3 / 3;
}
.details-timeout-wrapper .details-timeout-reload {
  grid-area: 3 / 2 / 4 / 3;
}
.details-timeout-wrapper .details-timeout-reload span {
  font-weight: 600;
  color: #4d4d4d;
  line-height: 2em;
}
.details-timeout-wrapper .details-timeout-reload-button {
  grid-area: 4 / 2 / 5 / 3;
  padding: 1em 0;
}
.details-timeout-wrapper .details-timeout-reload-button a {
  color: #eef5f8;
  background-color: #0b64a0;
  border-radius: 28px;
  cursor: pointer;
  padding: 0.8em 3em;
  text-decoration: none;
}
.details-timeout-wrapper .details-timeout-reload-button a:hover {
  background-color: #003f75;
}
.details-timeout-wrapper .details-timeout-reload-button a:visited {
  color: #eef5f8;
}
.details-loading-bar {
  position: relative;
  width: 100%;
  height: 1em;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.details-loading-bar:after {
  content: '';
  background: #5995ba;
  position: absolute;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  width: 0;
  height: 100%;
  animation: load 30s 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes load {
 from {
  width: 0;
}
to {
  width: 100%;
}

}
@media only screen and (max-width: 740px) {
  .damage-row-flex-wrapper {
  flex-direction: column;
}
.damage-row-list,
.damage-groups-empty {
  border-width: thin 0 0 0;
  padding-top: 1em;
  padding-left: 0;
  margin-top: 1em;
}
.details-timeout-wrapper {
  flex-direction: column;
}
.details-timeout-reload {
  align-items: center;
}

}