: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:#f6f6f6; --glblCGry2:#6b7280; --glblCrtcl:#711717; /* 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;}
.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  { justify-content: end;}
.center { justify-content: center; align-content: center;}
.row { flex-direction:row; gap:3px}
.grid { display: grid; gap: 3px;}
.wrap { flex-wrap: wrap; }
.threeCols {grid-template-columns:150px 400px 1fr !important; }
.error { color: var(--glblCRd);}


.col25 { width: 25%;}
.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;}
.fa-solid { font-size:1em; margin: 3px 5px 0 0; opacity: 0.4; }
.fa-triangle-exclamation { color:red}
.fa-circle-check { color: green}
#mbbLoader { display: none; font-size:10em; left:45%; position:fixed; top:45%; z-index:99}
#lightbox { background-color:rgba(0,0,0,0.5); bottom: 0; display: none; left:0; position: fixed; right:0;top:0; z-index:2}
#lightbox i.closeLightbox { cursor: pointer; position:absolute; right: var(--raster); top: var(--raster); }



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

header { background:var(--glblCWht);}
header .container {align-items: center;}
header .logo { margin: 25px 0; width:300px;}
header .burger { cursor: pointer; font-size: 40px; font-weight: bold; text-align: right; }
header nav { width:200px }
header nav:hover ul { display:flex} 
header nav ul { background-color: var(--glblCWht); border: 1px solid var(--brdrC01); border-bottom: none; display:none; position:absolute; top:55px; width: 100%; z-index:1;}
header nav ul li { border-bottom: 1px solid var(--brdrC01); line-height: 2em; padding: 0 var(--raster); text-align: right;  }
header .bar { background-color: var(--brandC01); color: var(--glblCWht); font-size: .9rem; height:40px; line-height: 40px;  }

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 article { background-color: var(--glblCWht); border: 1px solid var(--brdrC01); border-radius: var(--raster); gap:3px; margin-bottom: var(--raster); 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#card01 { width:300px }
main article .block { border: 1px solid var(--brdrC01); padding: var(--raster) var(--raster) 0 var(--raster); margin-bottom:var(--raster);}

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

footer { background:var(--glblCWht); border-top:1px solid var(--brdrC01); border-bottom:1px solid var(--brdrC01);}
footer .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;  padding: calc(var(--raster)*2) 0}
footer .container .logo { width:200px;}
.subline { background:var(--glblCWht); padding: var(--raster) 0; text-align: center; color:var(--txtC01);}

/* 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,40px); 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: .9rem; }
.verySmall { font-size: .6rem; }
.redColor { color: var(--glblCRd);}
.boldFont { font-weight:bold}
.noWrap { white-space: nowrap;}
.tag { color:var(--glblCGry2); font-size: .72rem;  letter-spacing:.12em; text-transform: uppercase; }
.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; } 

/* 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); height: 300px; 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=submit],
textarea { border:1px solid var(--brdrC01); line-height:2.5em; padding: 0 10px; width: 100%;}
input[type=submit] { align-items: center; }
input[type=text],
input[type=number],
input[type=password], 
select { background: var(--bgInput01); }
select {  height: 30px; padding:3px 10px; border:1px solid var(--brdrC01) }
input.error,
select.error { color: var(--glblCRd);}