/* remenber css variables don't work on internet explorer*/

* {
  /* Typography */
  --main-font: 'courier 20px',arial,helvetica;
  
  /* Calculation */
  /*--responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 100px) / (1200 - 100))); *//* Ranges from 421px to 1199px */
  
 --responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}



#toggleLogin {    
  padding-right: 15px;  
}

#loginAlert {    
  display:none;  
}

#AddAnAccountAlert {    
  display:none;  
}

#EnterReadingAlert {    
  display:none;  
}

#EditAnAccountAlert{    
  display:none;  
}

/* @media only screen and (max-width: 480px)  {
  
  
  h1 {
      font-size: 15px;
  }
} */

.btn-noSapcing {
  padding: 1px 1px 1px 1px;
  border: 0 none;  
}

/* Reduce spacing between bootstrap horizontal form controls */
.form-group {
  margin-bottom: 2px!important;
}

.floatLeft
{
  float:left;
}

.clear-float
{
  clear: both;
}

.LoggedOnUser {    
  text-align:left;
  /* Set max and min font sizes */
  --max-font: 12;
  --min-font: 8;
  font-family: var(--main-font);
  font-size: var(--responsive);  
}


.beta table, .beta th, .beta td {
  border: 1px solid black;
  height: 5px;
  text-align: left;
  padding: 1px;
  color:black;
  --max-font: 12;
  --min-font: 8;
  font-family: var(--main-font);
  font-size: var(--responsive);  
 
}

.beta td.container {
  height: 5px;
}

.beta th {
  background-color: #4CAF50;
  color: white;
}

.beta tr.header {
  background-color: #4CAF50;
  color: white;
  font-style: italic;
}

.beta tr {
  --max-font: 20;
  --min-font: 5;
  font-family: var(--main-font);
  font-size: var(--responsive);
}

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


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.containerLogo
{
    width: 40vw;
    height: 12vw;
}

.Header
{
    background-size: contain;
    background-image:url('images/BrandLogo.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: aqua;
    width: 100%;
    height: 100%;
    alt:"Logo Thing main logo";
}

.logo-main {
  display: block;
  margin: 20px auto;
}



.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px; /* Set the fixed height of the footer here */
  line-height: 30px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}