@media print {
  .page-break {
    page-break-before: always;
  }
}

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  font-size: 4vw;
  margin: 0px;
  padding: 2px 2px;
}

h1 {
  margin: 0px;
  padding: 5px;
  font-size: min(7vw, 24px);
}

h2 {
  margin: 0px;
  padding: 5px;
  font-size: min(6vw, 20px);
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: min(5vw, 18px);
  text-align: left;
}

p {
  margin: 0px;
  padding: 0px;
  outline: 0px;
  font-size: min(6vw, 16px);
  text-align: left;
}

/**************** GRID ***********************************/

.grid_header {
  grid-area: header;
  padding: 15px;
  text-align: center;
  background: #348594;
  color: white;
}

.grid_navbar {
  grid-area: navbar;
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
  font-size: 16px;
}

.grid_main {
  grid-area: main;
  margin: 5px;
  padding: 5px;
}

.grid_lists {
  grid-area: lists;
  margin: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 5px;
  border-style: solid;
  border-width: 0.5px;
  height: max(300px, auto);
  overflow: auto;
}

.grid_lists2 {
  grid-area: lists2;
  margin: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 5px;
  border-style: solid;
  border-width: 0.5px;
  height: max(600px, auto);
  overflow: auto;
}

.grid_footer {
  grid-area: footer;
  margin-top: 20px;
  background: #348594;
  color: white;
  text-align: left;
}

.grid_footer p {
  margin: 5px;
  padding: 5px;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header '
    'navbar'
    'main'
    'lists'
    'lists2'
    'footer';
  grid-template-rows: auto auto auto auto auto 60px;
  gap: 0px;
  padding: 0px;
  background-color: aliceblue;
}

.grid-container>div {
  font-size: 16px;
}

/*************** NAVBAR **************************************/


.grid_navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  width: 140px;
  font-size: 16px;
  text-align: left;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.grid_navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  width: 140px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/********************  INPUT  *****************************/


input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number],
input[type=text],
input[type=date],
select,
input {
  width: max(200px, 2%);
  /*height: min(4.2vw, 28px);*/
  font-size: min(3vw, 16px);
  padding: 2px 2px;
  margin: 2px 2px;
  display: inline-block;
  border: 1px solid #aa1100;
  border-radius: 2px;
  box-sizing: border-box;
}

input[type=submit],
.button {
  width: auto;
  margin: 10px 0px 10px 0px;
  display: inline-block;
  background-color: aliceblue;
  border: 1px solid #aa1100;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: min(3vw, 16px);
  color: #303030;
  cursor: pointer;
}


input[type=submit]:hover,
.button:hover {
  background-color: #89bec7;
}


/*************** Button box  *******************/

#select {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  outline: 2px;
  /*background-color: red;*/
}

#select a {
  text-decoration: none;
  display: block;
  width: 100%;
}

p.options {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 20px;
  border-color: grey;
  border-style: solid;
  border-width: 5px;
  background-color: aliceblue;
  background-position: center center;
  opacity: 0.9;
  height: min(30vw, 120px);
  width: min(30vw, 120px);
  margin: 2px;
  font-family: arial;
  color: #202020;
  font-size: min(6vw, 17px);
  font-weight: bold;
  text-align: center;
}

p.options:hover {
  background-color: silver !important;
  color: #cb2525 !important;
}

/***************  Styled table **************/

table.styled {
  width: min(800px, 100%);
}

td.styled {
  width: auto;
  font-size: min(3.5vw, 16px);
}

th.styled {
  background: none repeat scroll 0 0 #d37b55;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: arial;
  margin: 4px;
  text-align: left;
  width: min(6000px, 95%);
}

tr.styled {
  background: none repeat scroll 0 0 #EBEBEB;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: arial;
  font-size: min(3.5vw, 16px);
  margin: 4px;
  text-align: left;
  width: min(6000px, 95%);
}

tr.styled:hover {
  background-color: #528599 !important;
}

table tr.styled {
  cursor: pointer;
}


/***************  Styled table **************/

table.styled3 {
  width: min(800px, 100%);
  font-family: arial;
  font-size: min(3vw, 16px);
  text-align: left;
}

th.styled3 {
  background-color: #6bcfcf;
  padding: 2px 5px 2px 2px;
}

td.styled3 {
  width: auto;
  padding: 2px 5px 2px 2px;
}

table tr:nth-child(odd).styled3 {
  background-color: #EBEBEB;
}

table tr:nth-child(even).styled3 {
  background-color: #f9f9f9;
}

/***************  styled2 table **************/

.styled2 table {
  border-collapse: collapse;
}

.styled2 th {
  background-color: #4a9ead;
  text-align: left;
  font-weight: bold;
  padding: 2px 5px 2px 5px;
  font-family: arial;
  font-size: min(3vw, 16px);
}

.styled2 td {
  width: auto;
  text-align: left;
  padding: 2px 5px 2px 5px;
  font-family: arial;
  font-size: min(3vw, 16px);
}

.styled2 tr:nth-child(even) {
  background-color: #f9f9f9;
}

.styled2 tr {
  background-color: #EBEBEB;
}

/******************** Other classes ****************/

#fileContent {
  font-size: min(1.5vw, 16px);
  white-space: pre-wrap;
  tab-size: 12;
  padding: 0;
  margin: 0;
  line-height: 80%;
}

#div_compact {
  font-size: min(1.4vw, 16px);
  white-space: pre;
  tab-size: 9;
  padding: 0;
  margin: 0;
  line-height: 80%;
}

.framed {
  margin: 2px;
  padding: 2px;
  border-style: solid;
  border-width: 0.5px;
}

.form1 p {
  line-height: 220%;
  padding: 0px;
  outline: 0px;
  font-size: min(6vw, 16px);
  text-align: left;
}