/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 6, 2021, 11:14:45 AM
    Author     : jan
*/

body {
  margin: 2px;
  padding: 0px;
}
.grid-page {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  grid-template-columns:  auto;
  background-color: beige;
  grid-gap: 6px;
  border: 1px solid black;
  padding: 2px;
  align-content: flex-start;
  align-items: flex-start;
  justify-items: space-between;
  border-radius: 10px;
}
.grid-input {
  background-color: #2f0f12;
  padding: 10px;
  text-align: center;
}
.grid-formula {
  background-color: #2f0f12;
  padding: 10px;
  text-align: center;
}

.grid-pgheader {
  grid-column-start: 1;
  grid-column-end: 5;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  justify-content: flex-start;
  background-image: url(images/cover-background.jpg);
  background-size: 1100px 1100px;
  border: 4px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-pgheader-item {
/*  background-color: #2f0f12; */
  padding: 10px;
  text-align: center;
}

.grid-pgheader-nobutton {
  grid-column-start: 1;
  grid-column-end: 5;
  display: inline-grid;
  /* grid-template-columns: auto auto auto auto; */
  justify-content: left;
  grid-template-areas: 'logo title';
  grid-template-columns: 140px auto;
  background-image: url(images/cover-background.jpg);
  background-size: 1100px 1100px;
  border: 4px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-pgheader-item-nobutton {
  grid-area: title;
  padding: 10px;
  color: #D9B83B;
  text-align: center;
/*  justify-content: center; */
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 44px;
/*  width: 100%; */
}

.grid-pgheader-logo {
  grid-area: logo;
  padding: 10px;
  text-align: center;
}

.grid-pgfooter {
   grid-column: 1 / span 4;
   grid-row: 10;
  display: inline-grid;
  grid-template-columns: auto;
  justify-content: center;
  background-image: url(images/cover-background.jpg);
  background-size: 1100px 1100px;
  border: 4px solid #D9B83B;
  padding: 10px;
  color: #D9B83B;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}

.grid-secinfo {
  grid-row: 4;
    order: 4;

  grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secinp {
  grid-row: 3;
    order: 3;

  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secinp-item {
  background-color: #2F0F12;
  color: white;
  padding: 4px;
  text-align: right;
}

.grid-secinp-iteml {
  background-color: #2F0F12;
  color: white;
  padding: 4px;
  text-align: left;
}

.grid-secinp-header {
  grid-column: 1 / span 2;
  background-color: #2f0f12;
  color: white;
  font-weight: bold;
  padding: 10px;
  text-align: center; 
}

.grid-secpaytype {
  grid-row: 2;
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-button-bar {
  grid-column: 1 / span 2;
  background-color: #2f0f12;
  padding: 10px;
  align-items: left;
}

.grid-demo {
  grid-column: 1;
  border: 2px solid black;
  background-color: beige;
  padding: 10px;
  align-items: left;
  border-radius: 4px;
}

.grid-sectype {
  grid-row: 3;
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secf {
  grid-column: 1;
  grid-row: 5;
    order: 5;

  display: inline-grid;
  grid-template-columns: auto;
  background-color: white;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secf-item {
  color: white;
  padding: 4px;
  text-align: center;
}

.grid-secf-header {
  background-color: sandybrown;
  color: black;
  font-weight: bold;
  padding: 10px;
  border-radius: 3px;
  text-align: center; 
}

.grid-secvar {
    grid-row: 6;
      order: 6;

    grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secvar-itemr {
  background-color: #2f0f12;
  color: white;
  padding: 4px;
  text-align: right;
}


.grid-secvar-iteml {
  background-color: #2f0f12;
  color: white;
  padding: 4px;
  text-align: left;
}

.grid-secvar-iteml3s2 {
  background-color: #2f0f12;
  grid-column: 3 / span 2;
  color: white;
  padding: 4px;
  text-align: left;
}

.grid-secvar-itemc {
  background-color: #2f0f12;
  color: white;
  padding: 4px;
  text-align: center;
}

.grid-secvar-header {
  grid-column: 1 / span 4;
  background-color: #2f0f12;
  color: white;
  font-weight: bold;
  padding: 10px;
  text-align: center; 
}

.grid-secres {
  grid-row: 7;
    order: 7;

  grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secres-header {
  grid-column: 1 / span 3;
  background-color: #2f0f12;
  color: white;
 font-weight: bold;
  padding: 10px;
  text-align: center; 
}

.grid-secv2 {
  grid-column: 1;
  grid-row: 8;
    order: 8;

  display: inline-grid;
  grid-template-columns: auto;
  background-color: white;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secresv2 {
  grid-row: 12;
    order: 12;

  grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: min(3vw, 15px);
}

.grid-secresv2-header {
  grid-column: 1 / span 5;
  background-color: #2f0f12;
  color: white;
  font-weight: bold;
  padding: 10px;
  text-align: center; 
}

.grid-secvarv2 {
    grid-row: 12;
      order: 12;

    grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: min(4vw, 15px);
}


.grid-secvar2 {
    grid-row: 9;
      order: 9;

    grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.grid-secvar3 {
    grid-row: 10;
      order: 10;

    grid-column: 1;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2f0f12;
  border: 3px solid #D9B83B;
  padding: 5px;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}
.grid-seccf {
  grid-column: 1;
  grid-row: 11;
    order: 11;

  display: inline-grid;
  grid-template-columns: auto;
  background-color: white;
  border: 3px solid #D9B83B;
  padding: 3px;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}

.grid-seccf-header {
  background-color: #2f0f12;
  color: white;
  font-weight: bold;
  padding: 10px;
  border-radius: 3px;
  text-align: center; 
}

.grid-seccf-item {
  color: black;
  padding: 2px 0px;
  text-align: left;
}

.grid-error {
  grid-column: 1;
/*  grid-row: 2; */
  order: 2;
  display: inline-grid;
  grid-template-columns: auto;
  border: 4px solid red;
  padding: 10px;
  align-content: center;
  align-items: left;
  border-radius: 10px;
}

.grid-error-item {
  color: red;
  font-weight: bold;
  padding: 3px;
  text-align: center;
}

.button-pgheader {
  background-color: #2f0f12;
  border: 1px solid #D9B83B;
  color: #D9B83B;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.button-hover:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  transform: scale(1.1);
}

a:link, a:visited {
    color: darksalmon;
    text-decoration: none;
}

.hover_img a { position:relative; }
.hover_img a span { position:absolute; right: 30px; display:none; z-index:99; }  
.hover_img a:hover span { 
  display:block; 
  background-color: white;
  border: 1px solid #D9B83B;
  border-radius: 3px;
  padding: 10px 10px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

img {
 pointer-events: none;
}


.pop_formula{
    color: darksalmon; 
    cursor: pointer;
}

select {
  width: auto;
  padding: 2px 2px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f1f1f1;
}

th {
    padding: 2px;
    text-align: center;
}

td {
    padding: 10px;
    text-align: right;
}

#cftable {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(2vw, 16px);
  border-collapse: collapse;
  border: 1px solid black;
  width: 100%;
}

#cftable td, #cftable th {
/*  border: 1px solid #ddd; */
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 2px;
}

#cftable tr:nth-child(even){background-color: #f2f2f2;}

#cftable tr:hover {background-color: #ddd;}

#cftable th {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: #2f0f12;
  color: white;
}