/* CSS Document */
body { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: 400; background: #e2e7f7; color: #3b3b3b; margin: 20px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

a, a:link, a:visited, a:active {color: #FF7F00; text-decoration: none; border-bottom: 1px #FF7F00 dotted;}
a:hover {color: #FF7F00; text-decoration: underline; border: none;}
a.emphasis{font-weight: bold;}
h1 {font-size: 18px;}
h2 {font-size: 16px;}
p { padding: 0; margin: 0; }

/*  HEADER  */
div#header {align-items: center; border-bottom: 2px solid #FF7F00; background-color: white; padding: 10px; justify-items: left;}
div#warningText {font-weight:bold;color:#1E4666;text-align:center;}
div#warningText h1 {text-align:center;}
#logo img {width: 240px; height: auto;}
#logo a {border-bottom: none;}

/* CONTENT   */
div#main {border-bottom: 2px solid #FF7F00; background-color: white; padding: 10px;}
.boxInfo { position: relative;}
.boxInfo2 { background-color:#BCD1DF; color: #1E4666; font-weight:bold; text-align:center; padding:4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.detailsInfo {text-align:left; padding:5px 10px;}
.noData {text-align:center; color:#FF7F00; font-weight:bold;}

.boxInfo input {position: absolute; opacity: 0; z-index: -1;}
.boxInfo label {position: relative; display: block; background-color:#005e80; font-size: 16px; font-weight:bold; color:#FFFFFF; text-align:center; padding:4px;}

article {border-bottom: 2px solid #005e80; padding: 5px 0;}
article:last-of-type {border: none;}

p.legend {background-color: gainsboro; padding: 2px 5px;}

.hide { display: none; }
.show { display: block; }

.box {font-weight: bold; padding: 0 2px;}
.red {background-color:#FF0000; color:#FFFFFF;}
.orange {background-color:#FFC400;}
.yellow {background-color:#FFFF00;}
.green {background-color:#39B54A; color:#FFFFFF;}
.gray {background-color:#e0e0e0;}

span.tblue { font-size: 10px; background-color: #005e80; color: white; font-weight: bold; width: 30px; display: inline-block; text-align: center; }
span.tred { font-size: 10px; background-color: #f87607; color: white; font-weight: bold; width: 30px; margin-left: 1px; display: inline-block; text-align: center; }

.nobreak {white-space: nowrap;}
.title { font-weight: bold; }

.table { margin: 0 0 10px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; }
@media screen and (max-width: 580px) { 
  .table { display: block; }
}

.row { display: table-row; background: #f6f6f6; }
.row:nth-of-type(odd) { background: #e9e9e9; }
.row.header { font-weight: 900; color: #ffffff; background-color:#BCD1DF;  color: #1E4666; }
@media screen and (max-width: 580px) {
  .row { display: block; border: 1px solid #BCD1DF; }
  .row.header { display: none; }
  .row.header .cell { display: none; } 
  .row .cell:before { content: attr(data-title); min-width: 98px; font-size: 10px; line-height: 10px; font-weight: bold; text-transform: uppercase; color: #969696; display: inline-block; }
  .row .cell.green:before, .row .cell.red:before { color: #fff; }
}

.cell { padding: 3px 12px; display: table-cell; }
@media screen and (max-width: 580px) {
  .cell { padding: 2px 12px; display: block; }
}

select {margin: 2px 0 10px 0; border: 1px solid #ccc; border-radius: 0.25em; padding: 0.25em 0.5em; cursor: pointer; line-height: 1.1; background-color: #fff; background-image: linear-gradient(to top, #f9f9f9, #fff 33%); }
p.update { font-size: 11px; font-weight: bold; margin-top: 5px; text-align: right; }

.container1X2 {display: grid; grid-template-columns: 1fr 2fr;}
.container3X1 {display: grid; grid-template-columns: 1fr 1fr 1fr; }
.container2X2 {display: grid; grid-template-columns: 2fr 2fr; }
@media only screen and (max-width: 900px) {
  h1 {font-size: 16px;}
  .container3X1 {display: block;}
  .container2X2 {display: block;}
  .container1X2 {display: block;}
  
  .detailsInfo {padding:5px 0px;}

  #logo {text-align: center;}

  /* collapsible panels */
  .boxInfo label {cursor: pointer;}  
  input:checked ~ .collapsible {visibility: visible; max-height: 100%;}
  .collapsible {visibility: hidden; overflow: hidden; max-height: 0; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s;}
}

/* Comns */
#detailCOMNS {margin: 0 2px;}
.boxCOMNS label { background-color:#FF7F00;}
.boxCOMNS .article { background-color:#fff2e6; padding:6px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); margin-bottom: 3px; }


/* FOOTER */
.footer { padding: 10px; background-color: #005e80; font-size: 13px;}
.footer p, .footer div {color: #fff;}
.footer .container3X1 { align-items: center; text-align: center; }

div#containerF{width:1024px !important; width /**/:1034px; margin: 5px auto; padding:5px; text-align:left; background:#FFF;}
div#footer { border-top: #FF7F00 2px solid; font-size: 10px; text-align: center;}
p {margin: 5px 0;}