@import "dc-1.css";

/* *********** */
/* *********** */
/* *********** */
/* *********** */

* {
   box-sizing: border-box;
}


html, body, div {
   /* box-sizing: border-box; */
   background-color: rgb(95%, 95%, 95%);
   font-size: 10pt;
}

a {
   text-decoration: none;
}

.display-pane-status,
.display-pane-1, 
.display-pane-2 {
   margin: .5rem;
   display: grid;
   grid-template-columns: 1fr; 
   row-gap: 2px;   
}

.display-pane-status {
   margin-top: 55px;
}

.display-box, .display-inline-box {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
   background-color: rgb(100%, 100%, 100%);
}

.display-box {
   border: 1px solid rgba(0, 0, 0, 0.2);
   width: 100%;
   min-width: 320px;
   height: auto;
   padding: 15px;
   display: grid;
   grid-template-columns: auto ;
   row-gap: 10px;
   box-shadow: 3px 6px 18px rgba(0, 0, 10, 0.2);
   
}

.display-inline-box {
   border: none;
   display: grid;
   grid-template-columns: 1fr 2fr ;
   column-gap: 1rem;
}

.display-io-box {
   grid-template-columns: 1fr 1fr 1fr;
}

.display-status-box {
   border: 2px solid  rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   background-color: white;
   display: grid;
   grid-template-columns: 80% 20% ;
   grid-template-rows: auto;
   column-gap: 1rem;
   padding: .5rem;
}

.display-item { 
   border: 1px solid rgba(0, 0, 0, 0.1);
   background-color: white;
   display: grid;
   grid-template-columns: 2fr 2fr .5fr;
   grid-column-gap: 10px;
   padding: .5rem;
}

.display-io-item { 
   border: 1px solid rgba(0, 0, 0, 0.1);
   background-color: white;
   display: grid;
   grid-template-columns: 2fr 2fr;
   grid-column-gap: 10px;
   padding: .5rem;
}

.display-label {
   font-size: 1.2rem;
   background-color: white;
   color: navy;
   align-self:  center;   /* flex-end */
   padding-left:  10px;
}

.display-counter {
   font-size: 1.8rem;
   font-family: monospace;
   color: white;
   background-color: navy; 
   align-self:  center;
   text-align: right;
   padding: 2px 10px;
   margin-left: .5rem;
}

.display-red {
   color: crimson !important;
}
.display-lightblue {
   color: rgb(161, 219, 253) !important;
}

.display-flag {
   background-color:#EEE; 
   border: 1px solid black;
   border-radius: 5px;
   align-self:  center;
   text-align: center;
   padding: 2px 10px;
   margin-left: .5rem;

}

.display-io-icon {
   width: 32px;
   height: 32px;
}

.display-status-icon {
   width: 48px;
   height: 48px;
   margin-bottom: 0 !important;
   margin-right: 20px;
   justify-self: right ;
}

.display-status-text {
   background-color: inherit;
   font-size: 2rem;
   text-align: center;
   justify-self: center;
   /* padding: 10 10; */
}

.display-page-header, .display-page-footer {
   display: grid;  
   grid-gap: .15em;
   /* padding: .5em 1em; */
   font-size: .8rem;
}

.display-page-header {
   padding: 1rem 1rem;
   grid-template-columns:  1fr auto 1fr;
   grid-column-gap: 1rem;
}

.display-page-footer {
   padding: 0px 10px;
   grid-template-columns:  80% 20%;
}

.display-page-header > div, 
.display-page-footer > div {
   background-color: inherit;
   align-self:  center;
}

.display-page-header #display-date {
   text-align: right;
}

.display-fill {
   display: none;
}

@media (min-width: 640px) {
   .display-pane-status {
      margin-top: initial;
   }

   .display-pane-1 {
      grid-template-columns: 1fr 1fr; 
      row-gap: 10px;
   }
   .display-pane-2 {
      grid-template-columns: 1fr 1fr; 
      row-gap: 10px;
   }

   .display-box {
      border: none;
      box-shadow: 3px 6px 6px rgba(0, 0, 00, 0.1);
   }
   
   .display-fill {
      display: block;
   }
}

@media (min-width: 980px) {
   .display-pane-1 {
      grid-template-columns: 1fr 1fr; 
      row-gap: 10px;
   }
   .display-pane-2 {
      grid-template-columns: 1fr 1fr 2fr; 
      row-gap: 10px;
   }

   .display-box {
      border: none;
      box-shadow: 3px 6px 6px rgba(0, 0, 00, 0.1);
   }

   .display-fill {
      display: none;
   }
}