:root{
    --brandC01:#0A1F44; --brandC02:#0F2E6E; --brandC03:#eaeff9;  /* BRAND-COLORS */
    --txtC01:#404653; --txtC02:#6b7280; --tc03:#00A0FF; /* TEXT-COLORS */
    --bgC01: #f6f6f6;
    --bgInput01: #e9f0fd;
    --brdrC01: #e5e7eb; /* BORDER-COLORS */
    --glblCWht:#fff; --glblCBlck:#000; --glblCRd:red; --glblCGry:#fafafa; --glblCGry2:#6b7280; --glblCrtcl:#711717; --glblCGrn:#17712c; /* GLOBAL COLORS */
    --raster:25px; /* RASTER */
}
* {box-sizing:border-box; margin:0;padding:0; /*position: relative;*/}
html, body {background:var(--glblCGry);color:var(--txtC01); font:normal 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; height:100%; min-height:100%; }
body, body * { display:flex; flex-direction:column;}

/* GLOBALS */
a{color:var(--txtC01);text-decoration:none; cursor: pointer;}
a:hover{text-decoration:underline}
.btn { background: var(--brandC01); border: none; color: var(--glblCWht); cursor: pointer; max-width:300px; padding: 5px var(--raster);  text-align: center; }
.btn:hover { background: var(--brandC02); box-shadow:  0px 0px 5px 0px #c7c7c7;text-decoration: none;}
.btn.muted { background: var(--glblCGry); color: var(--txtC02); cursor:not-allowed; font-style: italic;}
.btn.muted:hover { box-shadow:none;}
.btn.critical { background-color: var(--glblCrtcl); font-style: italic;}
.btn.success { background-color: var(--glblCGrn); }
.noDisplay { display: none; }
img { max-width: 100%;}
svg  { height:auto; width:100% }


/* GLOBAL CLASSES */
.space { justify-content: space-between;}
.space.row { gap: var(--raster) !important;}
.end  { align-items: end; justify-content: end;}
.start  { align-items: start}
.center { align-items: center; align-content: center; justify-content: center; text-align: center; }
.row { flex-direction:row; gap:3px}
.grid { display: grid; gap: 3px;}
.wrap { flex-wrap: wrap; }
.twoCols {grid-template-columns:1fr 1fr; }
.twoCols.px200 {grid-template-columns:200px 1fr; }
.threeCols {grid-template-columns:1fr 1fr 1fr; }
.threeCols.select {grid-template-columns:150px 400px 1fr !important; } 
.fourCols {grid-template-columns:1fr 1fr 1fr 1fr; }
.fiveCols {grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
.colspan2 { grid-column: span 2;}
.colspan3 { grid-column: span 3;}
.colspan4 { grid-column: span 4;}

.noGap { gap:0;}

.error { color: var(--glblCRd);}
.link1 { display: flex; flex-direction: row;}
.link1 span { border-bottom: 1px dashed var(--glblCGry2); }
.link1:hover span { border-bottom: 1px dashed var(--glblCWht)}
.link1:hover {  text-decoration: none;}
.link1.critical { color: var(--glblCrtcl); font-style: italic;}


.col25 { width: 25%;}
.muted, .muted * { color: var(--txtC02);}
.noMargin { margin:0 !important; padding: 0 !important;}
.rounded { border-radius: var(--raster); }
.rounded2 { border-radius: 7px }
.rounded3 { border-radius: 3px }
.divider { background: var(--brdrC01); height: 1px; margin: 15px 0;}
.divider.full { margin-left: calc(var(--raster) * -1); margin-right:calc(var(--raster) * -1); }
.fa-solid { font-size:1em; margin: 3px 5px 0 0; }
.fa-solid.outline { background: var(--glblCWht); border: 2px solid var(--brdrC01); border-radius: 100px;; margin: 0 5px; padding: 8px 13px 6px 13px; }
.fa-solid.outline::before { margin-left:-6px }
.fa-solid.light { opacity:0.4;}

.status { border: 1px solid var(--glblCGry2); box-shadow:  0px 0px 5px 0px #c7c7c7; color: var(--glblCWht); height:20px; text-align: center; width:70px; }
.status.active { background: var(--glblCGrn);}
.status.inactive { background: var(--glblCrtcl);}

.fa-triangle-exclamation { color:red}
.fa-circle-check { color: green}
.fa-chevron-down, .fa-chevron-up { bottom: var(--raster); cursor: pointer; position: absolute; right: var(--raster); }
#mbbLoader { align-items:center; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(5px); bottom:0; display: none; font-size:10em; left:0; position:fixed; right:0; top:0; z-index:99}
#lightbox { align-items:center; background-color:rgba(0,0,0,0.5); bottom: 0; display: none; left:0; padding:50px 0; position: fixed; right:0;top:0; z-index:20}
#lightbox article { background-color: #fff; border: 1px solid var(--brdrC01); border-radius: var(--raster); padding: calc(var(--raster)*2 ); position: relative;}
#lightbox i.closeLightbox { cursor: pointer; position: absolute; right:var(--raster); top:var(--raster); font-size: 2em;}



/* STRUCTURE */
.container{  margin:0 auto 0 auto; max-width:1200px; width:1200px }

header { background:var(--glblCWht);}
header nav { position: relative; width:350px }
header ul { background-color: var(--glblCWht); border: 1px solid var(--brdrC01); border-bottom: none; display:none; position:absolute; right:0; top:55px; width: 100%; z-index:1;}
header ul li { border-bottom: 1px solid var(--brdrC01); line-height: 2em; padding: 0 var(--raster); }
header ul li small { margin-left:15px; }
header ul li span { color: var(--txtC02); }
header .container {align-items: center; position:relative} 
header .logo { margin: 25px 0; max-width: 50%; width:300px;}
header .burger { cursor: pointer; font-size: 40px; font-weight: bold; text-align: right; }
header .bar { background-color: var(--brandC01); color: var(--glblCWht);  }
header .bar div { height: 40px; line-height:40px;}
header .bar ul { top:40px;}
header .bar .user { cursor: pointer; position: relative; width: 300px; }
header .bar .user i { font-size: 20px; margin-top: 11px;  }

main { padding: calc(var(--raster)*2 ) 0; }
main .container {  margin-bottom: var(--raster);  }
main .hero { /*background:linear-gradient(#fff, #f2f2f2);*/ display:grid;  grid-template-columns:2fr 1fr; gap: var(--raster);}
/*main .hero .grid { gap: var(--raster); grid-template-columns: 1fr 1fr; }*/
main .hero .grid article { margin-bottom: 0;}
main .title {background:linear-gradient( var(--glblCWht),var(--glblCGry)); border-bottom: 1px solid var(--brdrC01); margin:calc(var(--raster)*-1); margin-bottom: var(--raster);  padding: var(--raster); }

main article { background-color: var(--glblCWht); border: 1px solid var(--brdrC01); border-radius: var(--raster); box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; gap:3px; margin-bottom: var(--raster); overflow: hidden; padding: var(--raster);  }
main article.error { background:#ffe1e1; border: 1px solid #990000; color: var(--brandC01);  }
main article.successs { background:#ffe1e1; border: 1px solid #990000; color: var(--brandC01);  }
main article li { display: list-item; margin-left:15px}
main article .block { border: 1px solid var(--brdrC01); padding: var(--raster) var(--raster) 0 var(--raster); margin-bottom:var(--raster);}

main #login { align-self: center; width:300px }
main #userDashboard .twoCols { grid-template-columns: 150px 1fr; }

main .dashboard { margin-bottom:var(--raster)}
main .dashboard article { margin-bottom:0}
main .tile { background:var(--glblCWht); border: 1px solid var(--brdrC01); overflow: hidden; padding: calc(var(--raster)/2); }
main .dashboard .title.tiles { gap:var(--raster) }
main .dashboard .title.tiles .tile { height: 150px;}
main .actions { padding-bottom: 0}
main .actions .tile { margin-bottom:var(--raster)}

main #formForecastRefresh .submitArea { display: none;} 
main .identify .row { gap: var(--raster); grid-template-columns: 1fr 1fr 300px }
main .identify .row article { padding:var(--raster);  }
main .resultTiles { display: grid; gap: var(--raster); }
main .resultTiles .tile { border: 1px solid var(--brdrC01); height: 350px;; text-align: center;  }
main .resultTiles .tile span { margin: 0 15px 15px 15px}

main #protocol  { background: linear-gradient(var(--glblCWht),var(--glblCGry)); display: block; left: 0; top: 0; position: sticky; z-index:10;}
main #protocol ul { gap:0;  grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; }
main #protocol ul li { margin:0; position:relative; text-align: center;}
main #protocol ul li i { font-size:1.5em; position: relative; z-index:1; }
main #protocol ul li i span { color: var(--glblCWht); font-size: 0.5em; margin: -18px 0 10px 0; }
main #protocol ul li.muted .fa-circle-check { display: none;}
main #protocol ul li.done .fa-hexagon { display: none;}
main #protocol ul li.current { font-weight: bold; }
main #protocol ul li.current .fa-circle-check { display: none; }
main #protocol ul li::before { content:""; left:0; right:0; position:absolute; top: 15px; height: 1px; background: var(--brdrC01); z-index: 0; }
main #protocol ul li:first-child::before { left:50%}
main #protocol ul li:last-child::before { right:50%}

main #carUsed small { margin-bottom: 15px;}
main #carUsed .twoCols { grid-template-columns: 200px 1fr;  }
main #carUsed .fourCols { grid-template-columns: 200px 1fr 210px 1fr;  }
main #carUsed #carBattery .twoCols { grid-template-columns: 350px 1fr}

main #carOptions .threeCols, #lightboxContent #carOptions .threeCols { grid-template-columns: 250px 300px 1fr; }
main #carOptions small, #lightboxContent #carOptions small { margin-bottom: 15px;}

main #carConditions .fourCols { grid-template-columns:  175px 1fr 210px 1fr}
main #carConditions .fourCols small { margin-bottom: 15px;}

main #carTarget .fourCols { grid-template-columns:  175px 1fr 210px 1fr}

main .result .twoCols .twoCols {grid-template-columns: 140px 1fr}
main .result .fourCols {grid-template-columns: 140px 1fr 1fr 1fr}
main .result#standard .threeCols {grid-template-columns: 140px 1fr 140px}
main #resultDetails .table {grid-template-columns: 230px 1fr 180px}
main #resultDetails .table span:nth-of-type(3n) { text-align: right; }

main #resultEquipment { max-height:490px; position: relative; overflow: hidden; }

main #pagination { grid-auto-flow: column; grid-auto-columns: 40px; }
main #pagination a { border: 1px solid var(--brdrC01); padding: 10px 0;}
main #pagination a.active {background:var(--brdrC01) }
main #pagination a:hover { text-decoration: none}

main #carEquipment .row { max-height: 95px; overflow: hidden; position: relative;}
.equipment { background:var(--bgInput01) ; border: 1px solid var(--brandC02); border-radius: 100px; display: inline; margin: 0 2px 2px 0; padding:3px 10px; white-space: nowrap; }
.equipment.active { background: var(--brandC02); color: var(--glblCWht); }
.equipmentAdditional .equipment { cursor: pointer; } 

main #packages .fourCols  { cursor:pointer; grid-template-columns:70px 60px 1fr 15px }

main hr { border: none; height: 1px; background-color: var(--brdrC01); margin-bottom: 1em; }
main code { background-color: var(--glblCGry2); border: 1px solid var(--brdrC01); color: var(--glblCWht); font-size: .9rem; max-height: 245px; overflow: hidden; padding: var(--raster); position: relative; }
main code i.fa-solid { cursor: pointer; flex-shrink: 0; position: absolute; transition: transform 10s ease; z-index:1}
main code i.fa-copy,
main code i.fa-check {right:calc(var(--raster)); top:var(--raster); }

#ticket .twoCols {grid-template-columns: 140px 1fr}
#ticket textarea {height:200px}

footer { background:var(--glblCWht); border-top:1px solid var(--brdrC01); border-bottom:1px solid var(--brdrC01); padding: calc(var(--raster)) 0;}
footer .container .logo { width:200px;}
.subline { background:var(--glblCWht); padding: 5px 0; text-align: center; }

/* DAT-LOGO */
.dat-logo { white-space: nowrap;}
.dat-logo .dat-headline { color: var(--brandC01); font-size: clamp(22px,2.6vw,28px); font-weight: bold; font-style: italic; line-height: 30px; padding-right: 10px; text-align: right;}
.dat-logo .dat-subline { font-weight: bold; text-align: right; }

/* TEXT */
h1 { color: var(--brandC01); font-size: clamp(28px,3.5vw,34px); margin-bottom: 1em;}
h2 { color: var(--brandC01); font-size: clamp(22px,2.6vw,28px); margin-bottom: 1em;}
h3 { color: var(--brandC01); font-size: 1.1rem; margin-bottom: 1em;}
h4 { color: var(--glblCBlck); font-size: 1rem; margin-bottom: 1em;}
p { margin-bottom: 0.5em;}
h1, h2, h3, h4, p { display:block}
h1 *, h2 *, h3 *, h4 *, p *, a, label { display: unset;}
small { font-size: .8rem; }
small.critical { margin-bottom:5px; display: block; color:var(--glblCrtcl)}
.verySmall { font-size: .6rem; }
.redColor { color: var(--glblCRd);}
.greenColor { color:var(--glblCGrn)}
.boldFont { font-weight:bold}
.italicFont { font-style:italic}
.noWrap { white-space: nowrap;}
.tag { color:var(--glblCGry2); font-size: .72rem;  letter-spacing:.12em; text-transform: uppercase; }

/* DATA-TABLE */
.table { display: grid;}
.table span { border-bottom: 1px solid var(--brdrC01); padding: 10px 20px; }
.table span.head { background: var(--brandC03); font-weight: bold }

/* GRID */
.grid .tile { border: 1px solid var(--brdrC01); padding: var(--raster); text-align: center; }

/* RESULT GALLERY */
.gallery img { width:350px; margin: 0 15px 15px 0;}

/* FORMS */
label {align-content: center;}
input[type=text], input[type=password], input[type=number], input[type=date], input[type=submit] { border:1px solid var(--brdrC01); line-height:2.5em; padding: 0 10px; width: 100%;}
input[type=text], input[type=password], input[type=number], input[type=date], select { background: var(--bgInput01); }
input[type=submit] { align-items: center; }
select { height: 30px; padding:3px 10px; border:1px solid var(--brdrC01) }
textarea, input[type=date] { border:1px solid var(--brdrC01); font:normal 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; padding: 0 10px; width: 100%;}
input.error,
select.error { color: var(--glblCRd);}
input.tight,
select.tight { width: 150px}

@media (max-width: 768px) {
  /* Tablet */
  .container { padding:0 var(--raster); width: 100%;} 
  main .hero {grid-template-columns: 1fr; }
  footer .fourCols {grid-template-columns: 1fr 1fr 1fr;}

}

@media (max-width: 480px) {
  /* SMARPHONE */
  html, body { font-size: 14px; }
  h1 { font-size: clamp(24px,3.5vw,30px); }
  h2 { font-size: clamp(18px,2.6vw,24px); }
  h3 { font-size: 1.1rem; }
  h4 { font-size: 1rem; }

  .threeCols, .fourCols, .grid.colsOnPhone {grid-template-columns: 1fr !important;}
  .colsOnPhone { flex-direction: column;}
  .twoColsOnPhone {grid-template-columns: 1fr 1fr !important;}
  .noColspanOnPhone { grid-column:auto}
  .hideOnPhone { display: none !important;}
  
  main .dashboard .title.tiles .tile { height: auto; padding: 15px 0;}
  main .threeCols.select { grid-template-columns: 150px 1fr !important; overflow: hidden;}
  main #carUsed .twoCols { grid-template-columns: 150px 1fr !important;}
  main #resultDetails .table span{ border-bottom: none; padding: 3px 10px;}
  main #resultDetails .table span:nth-of-type(3n) { border-bottom: 1px solid var(--brdrC01); margin-bottom: 10px; padding-bottom: 10px; text-align: left; }
  
  footer .fourCols div { margin-bottom:var(--raster);}
  
  
}