div.clear-error::first-letter {
  text-transform:capitalize;
}

.mt-6{
  margin-top: 4rem !important;
}

/*
  Row 1 / column 1 and 2 => Single column for phone
*/

.grid {
  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  grid-gap: 1em;
  max-width: 100%;
}

.module {
  /* Demo-Specific Styles */
  max-width:35em;
  min-width:20em;
  margin: 0;
}

/* Fake toasts */
/* These are neat, but are not being used ??? Remove them IF that is still true after putting error handling in place. */
.animated {
  
  -webkit-animation-duration: 20s;
  animation-duration: 7s;
  animation-delay: 20s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
   
@-webkit-keyframes fake-toast {
  0% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fake-toast {
  0% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0; }
}
.fake-toast {
  -webkit-animation-name: fake-toast;
  animation-name: fake-toast;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

/* Material icons */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

/* My stuff */
@font-face {
    font-family: "Schalk";
    src: url('/fonts/Schalk.ttf') format("truetype");
}
.jlfont { 
    font-family: "Schalk", Verdana, Tahoma;
}

.jlchalk { 
    font-family: "Schalk", Verdana, Tahoma;
}

.ui {
  font-family: 'Ubuntu', sans-serif;
}

html, body {
    background-color:#eeeeee;
    color:#1f242e;
    font-family: 'Nunito Sans', 'Nunito', sans-serif;
    font-weight: 200;
    min-height: 100vh;
    margin: 0;
    font-size:1rem;
}

.full-height {
    min-height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

/*
??? Just removed.  Delete when the site clean up is done... if all of the formatting still looked good.
nav.top-nav {
  flex:1; 
  display:flex; 
  justify-content: 
  flex-end; 
  flex-wrap: wrap;
}

.top-nav div {
  
}

.top-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.top-nav button {
  border-radius: 1rem;
}
*/

.position-ref {
    position: relative;
}
/* ???
    .top-right {
        position: absolute;
        right: 10px;
        top: 18px;
    }
*/
/* ???
    .content {
        text-align: center;
    }
*/

.title,.compact-title {
    font-size: 84px;
    color:inherit;
    background-color: transparent;
    letter-spacing: 0.5rem;
    padding:1rem;
    padding-bottom: 0;
    text-align: center;
    margin:0;
}

h1.title {
  line-height: 1.5;
}



@media (max-width: 575.98px) {
  .title {
    font-size: 42px;
  }
  .module {
    /* Demo-Specific Styles */
    max-width:100%;
    min-width:0em;
    margin:0;
    margin-left: 1em;
    margin-right: 1em;
  }
 
  .compact-title{
    font-size: 38px;
    color:inherit;
    background-color: transparent;
    letter-spacing: 0.4rem;
    padding:1rem;
    padding-bottom: 0;
    text-align: center;
    margin:0;  
  }
}

.logo {
  color:inherit; 
  background-color:inherit;
  font-family: 'Ubuntu', sans-serif;
  /*font-weight: bold;*/
}

footer {
  min-width:100%;
  max-width:100%;
  background-color: #000004;
  margin-bottom:5px;
  color:#84ffff;
}

footer .title {
    font-size: 32px;
    color:inherit;
    background-color: transparent;
    letter-spacing: 0.5rem;
    padding:1rem;
    margin:2rem;
    text-align: center;
}

.title a {
    text-decoration: none;
    color:inherit;
}


h2.headline {
  margin-top:1rem;
  color:#000004;
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  /*margin-bottom: -0.2rem;*/
  font-weight:700;
  font-size:24px;
}

h3.headline {
  margin-top:1rem;
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  /*margin-bottom: -0.2rem;*/
  /*color:#00b9bf;*/
  font-size:20px;
  font-weight:700;
}

h3.long-headline {
  margin-top:1rem;
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  font-size:18px;
  font-weight:400;
}

h4.headline {
  margin-top:1rem;
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  margin-bottom: -0.2rem;
  font-size:16px;
  font-weight:700;
}

h5.headline {
  margin-top:1rem;
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  margin-bottom: -0.2rem;
  font-size:14px;
  font-weight:700;
  text-transform: uppercase;
}

.headline + .copy{
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  margin-top: 0px;
  padding-top: 0px;
  color:#1f242e;
  font-weight:200;
}

.long-headline + .copy{
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  margin-top: 0px;
  padding-top: 0px;
  color:#1f242e;
  font-weight:200;
}

.detail-copy{
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  margin-top: 0px;
  padding-top: 0px;
  padding-left:.75rem;
  color:#1f242e;
  font-weight:200;
}

.headline + div{
  margin-top: 0px;
  padding-top: 0px;
}

.long-headline + div{
  margin-top: 0px;
  padding-top: 0px;
}

.copy + div{
  margin-top: 0px;
  padding-top: 0px;
}

.copy a {
  color:inherit;
  text-decoration: underline;
  -moz-text-decoration-color:blue;  /* Code for Firefox */
  text-decoration-color:blue;
}

.copy a:visited {
  color:inherit;
  text-decoration: underline;
  -moz-text-decoration-color:purple; /* Code for Firefox */
  text-decoration-color:purple;
}

.copy a:hover {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

.copy a:active {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26;/* Code for Firefox */
  text-decoration-color:#E26B26;
}

.copy a:focus {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

.copy a:target {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

/* Clickable table titles */
a.table-title {
  color:inherit;
  text-decoration: underline;
  -moz-text-decoration-color:blue; /* Code for Firefox */
  text-decoration-color:blue;
}

a.table-title:visited {
  color:inherit;
  
  text-decoration: underline;

  -moz-text-decoration-color:purple;/* Code for Firefox */
  text-decoration-color:purple;
}

a.table-title:hover {
  
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

a.table-title:active {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

a.table-title:focus {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

a.table-title:target {
  font-style: italic;
  text-decoration: underline;
  -moz-text-decoration-color:#E26B26; /* Code for Firefox */
  text-decoration-color:#E26B26;
}

/* Class type cards */    
.sideways-card-right {
  background-color: #e0dbd1;
  color: #1f242e;
  /*background-color:#00b9bf;
  color:white;*/
  flex:1 1 176px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.sideways-card-right .headline {
  letter-spacing:0.1rem;
  text-decoration: none;
  margin-top: 0rem;
  color: #1f242e; /*color:white;*/
}

.sideways-card-left {
  width:100%;
  flex:1 0 100px;
}

.sideways-card-left img {
  width:100%;
}

.sideways-card {
  display:flex;
  flex-direction: row;
}

.sideways-card-link {
  text-decoration: none;
}

.sideways-card-link:hover {
  text-decoration-color:#e26b26;/*#42ecf2;*/
}

/* Font awesome color adjustments */
.fa-info-circle {
  color:#b6fff0;
}

.fa-reply {
  color:#c8f5bc; /* ??? You might consider making this arrow the color of the table header and then wrap it in this green.  That way it looks more like my other buttons, which have transparent icons wrapped in a circle or square of color.*/
}

.fa-gratipay {
  color:#FF9Dbb;
}

.off.fa-gratipay {
  color:grey;
}

.off.fa-gratipay:hover {
  color:#FF9Dbb;
}

.off.fa-gratipay-off:active {
  color:#FF9Dbb;
}

.off.fa-gratipay-off:target {
  color:#FF9Dbb;
}

.fa-pen-square {
  color:#c8f5bc;
}

.fa-heart-broken {
  color:#f0b5ff;
}

/* These are titles I don't intend for people to click on... but I've seen it happen.  So, this section will scroll into view, instead. */
.helplink a{
    text-decoration:none;
    color:inherit;
    cursor:inherit;
}

.capture-link {
  color:#84ffff;
}

.capture-dot-text{
  color:#000004;
}

.capture-dot {
  color:#84ffff;
}

.capture-dot:hover {
  color:white;
}

a.capture-link {
  color:white;
  text-decoration: underline;
  -moz-text-decoration-color: #84ffff; /* Code for Firefox */
  text-decoration-color: #84ffff;
}

.capture-link:hover {
  color:white;
  -moz-text-decoration-color:white; /* Code for Firefox */
  text-decoration-color:white;
}

/* a call to action specific to this site.*/
/*
div.calltoaction{
    width:100%;
    padding:1rem;
}

.calltoaction a{
    margin:0;text-decoration: none;
}

.calltoaction a div{
    padding:0.5rem;
    background-color:#95f5c7;
    border-radius:0.5rem;
    max-width:320px;
    margin:auto;
}

.calltoaction a div div{
    background-color:rgba(0,0,0,30%);
    padding:0.5rem;
    border-radius: 0.5rem; 
}

.calltoaction a div div p{
    color:white;
    text-align:center;
}
*/

.title a:hover {
    color:#b0bdda; /*#D3DAEA;*/
}

.jlfont a {
    text-decoration: none;
    color:inherit;
    background-color:transparent;
}

.jlfont .fake-purple-link{
  color:#f0b5ff;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.orange-chalk{
  color:#ffcbb5;
}

.jlfont .purple-chalk{
  color:#f0b5ff;
}

.jlfont .fake-purple-link:hover{
  color:#b0bdda;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .fake-yellow-link{
  color:#fff59d;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .yellow-chalk{
  color:#fff59d;
}

.jlfont .fake-yellow-link:hover{
  color:#b0bdda;
  border-bottom:2px solid;
  border-radius: 0.2rem
}


.bg-color-light{
  background-color:#F5F5F5;
}

.bg-color-blue-chalk{
  background-color:#B6FFF0;
}

.blue-chalk{
  color:#b6fff0;
}

.jlfont .blue-chalk{
  color:#b6fff0;
}

.jlfont .fake-blue-link{
  color:#b6fff0;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .fake-blue-link:hover{
  color:#b0bdda;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.bg-color-green-chalk{
  background-color: #c8f5bc !important;
}

.bg-color-green-chalk > .form-control {
  background-image: linear-gradient(0deg,white, 2px,rgba(0, 0, 4,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}

.green-chalk{
  color:#c8f5bc;
}

.jlfont .green-chalk{
  color:#c8f5bc;
}

.jlfont .fake-green-link{
  color:#c8f5bc;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .fake-green-link:hover{
  color:#b0bdda;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .clear {
  font-weight:700;
  margin-bottom: 1rem;
  letter-spacing: 0.1rem;
}

@media (max-width: 575.98px) {
  .jlfont .clear {
    font-weight:200;
    text-align: center;
  }
}

.jlfont a:hover {
    color:#b0bdda;
    background-color:transparent;
    font-style: italic;
}

.red-chalk{
  color:#ff9dbb;
}

.jlfont .red-chalk{
  color:#ff9dbb;
}

.jlfont .fake-red-link{
  color:#ff9dbb;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.jlfont .fake-red-link:hover{
  color:#b0bdda;
  border-bottom:2px solid;
  border-radius: 0.2rem
}

.subtitle {
    font-size: 42px;
    color:#1f242e;
    letter-spacing: 0.5rem;
    padding:1rem;
    text-align: center;
    margin:0;
    font-weight: normal;
}

.links a {
    padding: 0 25px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
}

/* ???
nav.links{
    position:flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 1rem;
    color:#e0dbd1;
}
*/

header.chalkboard{
    color:#e0dbd1;
    background-color:#1f242e;
    letter-spacing: 0.25rem;
    text-align: center;
    position:relative; 
    width:100%;
}

.chalkboard-banner {
  display:flex;
  flex-direction: column; 
  justify-content: center;
}

.capture-banner {
  padding:2rem; 
  margin-top: 1rem;
}

.site-map {
  font-size: 28px !important;
  text-align: left !important; 
  margin:0rem !important;
  padding:0rem !important; 
  margin-top:1rem !important;  
  margin-bottom:1rem !important; 
  padding-left:2rem !important; 
}

.copyright {
  margin:1rem; 
  margin-bottom:0rem; 
  display: flex; 
  flex-direction:row; 
  justify-content: space-evenly; 
  flex-wrap: wrap;
}

main {
  width:100%;
}

.message-board-good {
  font-family: 'Ubuntu', sans-serif;
  background-color:#1f242e;
  margin:0.0rem;
  color:#C8F5BC;
  font-size:8pt;
  border-radius:0;
  padding:0.25rem 1rem; 
  flex:1;
  text-align:left;
}

.message-board-bad {
  font-family: 'Ubuntu', sans-serif;
  background-color:#FF9DBB;
  margin:0.0rem;
  color:#000004/*#C8F5BC*/;
  font-size:8pt;
  border-radius:0;
  padding:0.25rem 1rem;
  flex:1;
  text-align:left;
}

.message-board-good p{
  margin:0rem;
}

.message-board-bad p{
  margin:0rem;
}

.mini-chalk-board {
  font-family: 'Ubuntu', sans-serif;
  background-color:#1f242e;
  margin:0.25rem;
  color:#C8F5BC;
  padding:1rem;
  border-radius: 0.5rem;
  flex:1;
}

.mini-chalk-board-light {
  font-family: 'Ubuntu', sans-serif;
  background-color:white;
  margin:0.25rem;
  color:#C8F5BC;
  padding:1rem;
  border-radius: 0.5rem;
  flex:1;
}

.mini-chalk-board a {
  color:#e0dbd1;
}

.mini-chalk-board-light a {
  color:#474c57;
}

.mini-chalk-board a:hover {
  color:#b0bdda;
}

.table-hover tbody tr:hover {
    background-color: rgba(132, 255, 255,0.5);
}

table.data-table {
  border-collapse: collapse;
}

.core {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 32rem;
}

.article {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 23rem;
  min-width: 18rem;
}

.m-b-md {
    margin-bottom: 30px;
}

.breadcrumb{
  background-color:#d0ccc9;/*#00b9bf;*/
  font-size:8pt;
  border-radius:0;
  padding:0.25rem 1rem;
  margin:0rem;
  letter-spacing:0.1rem;
}

.breadcrumb-item a{
  color:#000004;/*#84ffff;*/
  font-family: 'Ubuntu', sans-serif;
}

.breadcrumb-item:before{
  color:#000004; /*#84ffff;*/
  font-family: 'Ubuntu', sans-serif;
}
   
.breadcrumb-item + .breadcrumb-item::before{
  color:#000004;
  font-family: 'Ubuntu', sans-serif;
  content: ">" ;
}

.breadcrumb-item.active{
  color:#000004;
  font-family: 'Ubuntu', sans-serif;
}

.background-color-off-white{
  background-color:#f9f9f9;
}

.color-chalk{
  color:#e0dbd1;
}

.background-color-chalk{
  background-color:#e0dbd1;
}

.bg-color-primary{
  background-color:#1f242e; 
}

.bg-color-primary-dark{
  background-color:#000004; 
}

.bg-color-primary-light{
  background-color:#474c57; 
}

.color-primary{
  color:#1f242e; 
}

.color-primary-dark{
  color:#000004; 
}

.color-primary-light{
  color:#474c57; 
}

.bg-color-secondary{
  /*background-color:#42ecf2;*/ 
}

.bg-color-secondary-light{
  /*background-color:#84ffff;*/ 
}

.bg-color-secondary-dark{
  background-color:#00b9bf; 
}

.color-secondary{
  color:#42ecf2; 
}

.color-secondary-light{
  color:#84ffff; 
}

.color-secondary-dark{
  color:#00b9bf; 
}

.chalk-link{
  color:#474c57;
}

.chalk-link:hover{
  color:#000004;
}

.bg-color-alert{
  background-color:#e26b26;
}

.color-alert{
  color:#e26b26;
}

.bg-color-error{
  background-color:rgb(255, 157, 187, 0.5);
}

.bg-color-pink-chalk{
  background-color:#FF9DBB;
}

/* Adjustments to bootstrap 4 */
.dropdown-item:hover{
  background-color:rgba(255,255,255,0.3);
}

.btn.btn-secondary{
  color:#00b9bf;
}

.btn.btn-secondary:hover{
  color:inherit;
}

/* Override bootstrap 4 select box coloring */
.custom-select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='RGB(66, 236, 242)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
}

/* Override bootstrap materialize button color scheme */
.btn.btn-primary {
  color:#1f242e;
  background-color:transparent;
  border-color:#ccc
}

.btn-color-primary-dark{
  background-color:#000004;
  color:white;
}

.btn-color-secondary-light{
  background-color:rgba(132, 255, 255,1);
}

.btn-color-secondary-light:hover{
  background-color:rgba(132, 255, 255,0.8);
}

.btn-color-secondary-light:active{
  background-color:rgba(132, 255, 255,0.8);
}

.btn-color-secondary-light:focus{
  background-color:rgba(132, 255, 255,0.8);
}

.btn-color-secondary-light:target{
  background-color:rgba(132, 255, 255,0.8);
}

.btn-color-secondary-dark{
  background-color:rgba(0, 185, 191,1);
}

.btn-color-secondary-dark:hover{
  background-color:rgba(0, 185, 191,0.8);
}

.btn-color-secondary-dark:active{
  background-color:rgba(0, 185, 191,0.8);
}

.btn-color-secondary-dark:focus{
  background-color:rgba(0, 185, 191,0.8);
}

.btn-color-secondary-dark:target{
  background-color:rgba(0, 185, 191,0.8);
}

.btn-color-primary-light{
  background-color:#474c57; 
  color:white;
}

.btn-color-primary{
  background-color:#1f242e;
  color:white;
}

.btn-color-call-to-action{
  background-color:rgba(66,236,242,0.6);
}

.btn-color-call-to-action:hover{
  background-color:#42ecf2; 
}

.btn-color-call-to-action:hover:active{
  background-color:#42ecf2; 
}

.btn-color-call-to-action:active{
  background-color:#42ecf2; 
}

.btn-color-call-to-action:focus{
  background-color:#42ecf2; 
}

.btn-color-call-to-action:target{
  background-color:#42ecf2; 
}

.btn-color-inactive{
  background-color:#474c57; 
}
    
.btn-color-inactive:hover{
  background-color:rgba(71, 76, 87,0.6);
}

.icon-color-good-selected{
  background-color:#474c57;
  color:#c8f5bc;
}

.icon-color-good{
  background-color:rgba(71, 76, 87,0.2);
  color:rgba(71, 76, 87,0.4);
}
    
.icon-color-good:hover{
  background-color:#474c57;
  color:#c8f5bc;
}

.icon-color-bad-selected{
  background-color:#474c57;
  color:#ff9dbb;
}

.icon-color-bad{
  background-color:rgba(71, 76, 87,0.2);
  color:rgba(71, 76, 87,0.4);
}
    
.icon-color-bad:hover{
  background-color:#474c57;
  color:#ff9dbb;
}

.btn-color-other{
  background-color:rgba(240,181,255,0.95);
}

.btn-color-other:hover{
  background-color:#f0b5ff; 
}

.btn-color-other:hover:active{
  background-color:#f0b5ff; 
}

.btn-color-other:active{
  background-color:#f0b5ff; 
}

.btn-color-other:focus{
  background-color:#f0b5ff; 
}

.btn-color-other:target{
  background-color:#f0b5ff; 
}

.btn-color-info{
  background-color:rgba(182,255,240,0.95);
}

.btn-color-info:hover{
  background-color:#b6fff0;
}

.btn-color-info:hover:active{
  background-color:#b6fff0;
}

.btn-color-info:active{
  background-color:#b6fff0;
}

.btn-color-info:focus{
  background-color:#b6fff0;
}

.btn-color-info:target{
  background-color:#b6fff0;
}

.btn-color-secondary{
  background-color:rgba(66, 236, 242,0.95);
}

.btn-color-secondary:hover{
  background-color:#42ecf2; 
}

.btn-color-secondary:hover:active{
  background-color:#42ecf2; 
}

.btn-color-secondary:active{
  background-color:#42ecf2; 
}

.btn-color-secondary:focus{
  background-color:#42ecf2; 
}

.btn-color-secondary:target{
  background-color:#42ecf2; 
}

.btn-color-success{
  background-color:rgba(200,245,188,0.95);
}

.btn-color-success:hover{
  background-color:#c8f5bc;
}

.btn-color-success:hover:active{
  background-color:#c8f5bc;
}

.btn-color-success:active{
  background-color:#c8f5bc;
}

.btn-color-success:focus{
  background-color:#c8f5bc;
}

.btn-color-success:target{
  background-color:#c8f5bc;
}

.btn-color-danger{
  background-color:rgba(255,157,187,0.95);
}

.btn-color-danger:hover{
  background-color:#ff9dbb;
}

.btn-color-danger:hover:active{
  background-color:#ff9dbb;
}

.btn-color-danger:active{
  background-color:#ff9dbb;
}

.btn-color-danger:focus{
  background-color:#ff9dbb;
}

.btn-color-danger:target{
  background-color:#ff9dbb;
}

.btn-color-warning{
  background-color:rgba(255,245,157,0.95);
}

.btn-color-warning:hover{
  background-color:#fff59d;
}

.btn-color-warning:hover:active{
  background-color:#fff59d;
}

.btn-color-warning:active{
  background-color:#fff59d;
}

.btn-color-warning:focus{
  background-color:#fff59d;
}

.btn-color-warning:target{
  background-color:#fff59d;
}

/* Override bootstrap css, so my materialize modal datepicker behaves */
.modal {
  bottom: auto;
  color:red;
  background-color: pink;
}

.select-dropdown{
  line-height: 1.15;
  list-style-type: none;
  padding:0;
  position:relative;
}
/* Override material/bootstrap css, so my materialize modal datepicker behaves */
h2.capture-headline {
  font-weight:bold; 
  color:white;
  font-size:32px;
  letter-spacing: 0.5rem;
}

.final-capture-headline {
  font-weight:bold;
}

.pricing-grid {
  display:grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:1fr;
  grid-column-gap:0.5rem;
}

.frame {
    border-right-color: rgb(31, 36, 46);
    border-left-color: rgb(31, 36, 46);
    border-top-color: rgb(31, 36, 46);
    border-bottom-color: rgb(31, 36, 46);
    box-shadow:rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px
}

@media (max-width: 575.98px) {
  .final-capture-headline {
    font-size:28px;
  }
  footer .title {
    font-size:28px;
    padding:0.0rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    margin:0rem;
    margin-top:1rem;
    margin-bottom:1rem;
    
  }
  .hide-when-small {
    display:none;
  }
  .pricing-grid {
    display:unset;
  }
  .new-line-when-small{
    width:100%;
  }
}

.easy-read{
  /* No formatting when full screen.  Shrink to article like dimensions when small*/
}

@media (max-width: 767.98px) {  
  .hide-when-medium {
    display:none;
  }
  .pricing-grid {
    display:unset; 
  }
  .no-margin-when-medium{
    margin:0;
  }
  .easy-read{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 23rem;
    min-width: 18rem;
    margin:auto;
    margin-bottom:1rem;
  }
}

@media (max-width: 991.98px) {
  .hide-when-large {
    display:none;
  }
}

@media (min-width: 1300px) {
  .frame-when-extra-large {
    border-right-color: rgb(31, 36, 46);
    border-left-color: rgb(31, 36, 46);
    border-top-color: rgb(31, 36, 46);
    border-bottom-color: rgb(31, 36, 46);
    max-width: 1300px;
    margin:auto;
    box-shadow:rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px
  }
}

/* Date picker overrides. ??? This should probably be replaced (mostly) with scss 
.datepicker-calendar-container{
  background-color: #1f242e;
  color:#e0dbd1;
}

.datepicker-table abbr{
  color:#00b9bf;
}

.timepicker-text-container{
  color:#474c57;
}

.text-primary {
  color:#fff59d !important;
  font-weight:bold;
}
span.timepicker-span-hours.text-primary {
  color:#fff59d !important;
}
.timepicker-container{
  background-color: #1f242e;
}
.timepicker-digital-display{
  background-color: #42ecf2;
}
.timepicker-plate{
  background-color: #42ecf2;
}
.timepicker-tick {
}

.timepicker-tick:hover {
  background-color: rgba(255, 245, 157, .75);
}
.timepicker-tick.active {
  background-color: rgba(255, 245, 157, .75);
}

.timepicker-canvas line{
    stroke:#fff59d !important;
    stroke-width: 4;
    stroke-linecap: round;
}

.timepicker-canvas-bearing {
  stroke: none;
  fill: #fff59d !important;
}
.timepicker-canvas-bg {
  stroke: none;
  fill: #fff59d !important;
}
.timepicker-close{
  color: #fff59d !important;
}
.timepicker-cancel{
  color: #fff59d !important;
}

.datepicker-date-display{
  background-color: #42ecf2;
  color:#1f242e;
}
.datepicker-date-display .year-text{
  color:#1f242e;
}
.datepicker-done{
  color: #00b9bf;
}
.datepicker-cancel{
  color: #00b9bf;
}
.datepicker-controls input{
  color:#e0dbd1;
}

button.month-prev svg{
  color:#00b9bf;
  fill:#00b9bf;
}

button.month-next svg{
  color:#00b9bf;
  fill:#00b9bf;
}

.is-today .datepicker-day-button{
  color:#00b9bf;
}

.is-selected .datepicker-day-button{
  background-color:#42ecf2;
  color:#1f242e;
}

body .sidenav {
  background-color:#00b9bf;
}


End of datepicker overrides */

/* Form overrides */
.form-control {
  background-image:linear-gradient(0deg,#C8f5bc, 2px,rgba(0, 0, 4,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0)
}
.form-control:invalid {
  background-image:linear-gradient(0deg,#FF9DBB, 2px,rgba(0, 0, 4,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0)
}
.is-invalid {
  background-image:linear-gradient(0deg,red, 2px,rgba(0, 0, 4,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
  background-size:auto;
}

/*  CSS Tricks section */
@media
  only screen 
and (max-width: 760px), (min-device-width: 768px) 
and (max-device-width: 1024px)  {

  /* Force table to not act like a table anymore */
  table.data-table, thead.data-table, tbody.data-table, th.data-table, td.data-table, tr.data-table {
      display: block;
      width:100%;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead.data-table tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }

  tr.data-table {
    margin: 1.5rem 0 1.5rem 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  }
      
  tr.data-table:nth-child(odd) {
  }
      
  tr.data-table:nth-child(odd):hover {
    background-color: #b6fff0;
  }

  tr.data-table:nth-child(even) {
  }
    
  tr.data-table:nth-child(even):hover {
    background-color: #c8f5bc;/
  }

  td.data-table {
      /* Behave  like a "row" */
      border: none;
      position: relative;
  }

  td.data-table:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0;
      left: 6px;
      width: 85%;
      font-weight:bold;
      padding-right: 10px;
      white-space: nowrap;
      font-size:8pt;
  }

  table td.data-table:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td.data-table:first-child:before {
    content:none;
  }

  table tr.data-table:nth-child(odd) td.data-table:first-child {
    font-size:larger;
    color:#000004;
    font-weight:bold;
    background-color:#b6fff0;
     padding-left: 6px;
  }

  table tr.data-table:nth-child(even) td.data-table:first-child {
    font-size:larger;
    color:#000004;
    font-weight:bold;
    background-color:#c8f5bc;
     padding-left: 6px;
  }

  header.chalkboard{
      border: none;
  }
  
  table tr:first-child { margin: 0; }
  table td:last-child { border-bottom: none; }
  table tr:last-child { border-bottom: none; }

  .table .table{ /* override (for small tables only) bootstrap material design */ 
    background-color:white;
  }
  
  caption.data-table{
    width:100%;
  }
}
/* End of CSS Tricks */ 

#alert-success:target {
  display:none;
}

/* start of custom slider css */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

/* Hide default HTML checkbox */ 
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* the slider */ 
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FF9DBB;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #c8f5bc;
}

label {
  color:#212529;
}

input:focus + .slider {
  box-shadow: 0 0 1px #474c57;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* rounded slider */ 
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
} 
/* end of custom slider css */

/* focus outline
border-color:#17ffe9;
outline: 0;
box-shadow: inset 0 1px 2px
rgba(0,0,0,.075),0 0 5px rgba(23,255,233,.5); 
*/