body {
    line-height: normal;
    /* 03/31/22 - trying to reduce font for better readability on mobile*/
    font-size: 0.8rem;
}

#abdParentContainer {
  display: none;    /* start off not displaying, as will display loading spinner*/
}

.h1, h1 {
font-size: 30px;
}

#aContent {
    /*top: 50px;*/
    /*position: absolute;*/
    width: 100%;
    overflow-y:auto;
    overflow-x: hidden;
    max-height: 50vh; /* 85% of viewport height*/
    /*padding: 1.0em;*/
    padding-top: 50px;
}

.adAdvert {
    background: lightgray;
    width: 100%;    
    max-height: 80px;
    position: relative;
    padding: 0px 0px 0px 15px;  /* To help with the weird issue of left margin being negative */
    z-index: 500;
}

.adDevMimicKeyboard {
    background: yellow;
    width: 100%;    
    height: 245px;
    padding: 0px 0px 0px 15px;  /* To help with the weird issue of left margin being negative */
  z-index: 1000;
  position: relative;
  display: none;
}


.adOuter-container {
      background: lightgray;
        }

.adInner-container {
      font-size: 1.0em;
      min-height: 10px;
      padding: 5px 5px 5px 20px;
}

    label {
      font-size: 0.8em;
    }

    #value {
      width: 55px;
    }
    
#adTable {
/*    display: none;*/
}

#myChart {
  max-width: auto;
  max-height: auto;
}

.adog_background{background-color: blue;}

.adSettings {
  padding-top: 50px;
}

.adSettingsContent {
  font-size: small;
  background: lightgrey;
}

hr {
  margin-top: 0rem;
  margin-bottom: 0rem;  
}

.form-control   { 
/* 03/31/22 - trying to reduce font for better readability on mobile*/
font-size: 0.8rem;
}

.themed-grid-col, .themed-grid-row {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #FFF5BF;
  border: 1px solid lightgray;
}

.themed-grid-col-settings, .themed-grid-col-config {
  background-color: #E89456;

}

.themed-grid-col-config { 
  height: 25px;
  padding: 5px;
}

.themed-grid-row-header {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: lightgray;
  border: 1px solid lightgray;
  font-weight: bold;
}

.select2-container {
  min-width: 200px;
}

.ad-beta {
  display: block;   /* change to display: none when beta is over */
}

/* login/register show password customiztion */
button[name="Rtoggle-password"], button[name="Ltoggle-password"] {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 9000;
  width: 28px;
  height: 30px;
  background: 0;
  border: 0;
}

button[name="Rtoggle-password"]:active,
button[name="Rtoggle-password"]:focus,
button[name="Rtoggle-password"]:hover,
button[name="Ltoggle-password"]:active,
button[name="Ltoggle-password"]:focus,
button[name="Ltoggle-password"]:hover
{
  cursor: pointer;
}

button[name="Ltoggle-password"]:focus,button[name="Rtoggle-password"]:focus {
  outline: none !important;
}

.btn-primary {
  background-color: #E89456 !important;
  border-color: #E89456 !important;
}


.btn-primary:hover {
  background-color: #ffd900 !important;
  border-color: #ffd900 !important;
}

.btn-light:hover {
  background-color: #ffd900 !important;
  border-color: #ffd900 !important;
}

/* ...existing code... */

/* Base background and text color */
body {
    background-color: #f6edda;
    color: #002037;
    line-height: normal;
    font-size: 0.8rem;
}

/* Headings */
.h1, h1, h2, h3 {
    color: #002037;
    font-family: 'optima', sans-serif;
}
.h1, h1 {
    font-size: 30px;
}

/* Main container backgrounds */
#abdParentContainer,
.adAdvert,
.adOuter-container,
.themed-grid-col,
.themed-grid-row,
.adSettingsContent,
.myform {
    background-color: #f6edda;
    color: #002037;
}

/* Accent containers */
.adInner-container,
.themed-grid-col-settings,
.themed-grid-col-config,
.themed-grid-row-header {
    background-color: #f8f9fb;
    color: #002037;
}

/* Special backgrounds */
.adog_background {
    background-color: #002037;
    color: #f6edda;
}

/* Buttons */
.btn-primary {
    background-color: #87cefa !important;
    border-color: #87cefa !important;
    color: #002037 !important;
}
.btn-primary:hover,
.btn-light:hover {
    background-color: #002037 !important;
    border-color: #002037 !important;
    color: #f6edda !important;
}

/* Inputs and forms */
input, select, textarea, .form-control {
    background-color: #f6edda;
    color: #002037;
    border: 1px solid #87cefa;
}
label {
    color: #002037;
}

/* Miscellaneous */
hr, .hr-or {
    border-color: #87cefa;
    background-color: #87cefa;
}

a {
    color: #002037;
}
a:hover {
    color: #87cefa;
}

.modal-content {
  background-color: lightblue;
}
/* ...existing code... */