body {
  scrollbar-face-color: #B8BACC;
  scrollbar-shadow-color: #7888AB;
  scrollbar-highlight-color: #7888AB;
  scrollbar-3dlight-color: #7888AB;
  scrollbar-darkshadow-color: #7888AB;
  scrollbar-track-color: #7888AB;
  scrollbar-arrow-color: #7888AB;
  margin: 0px;
  padding: 0px;
}
html { height: 100%; margin-bottom: 1px; }

.form-group {
/*  width: 565px; */
  overflow: hidden;
/*  margin-bottom: 5px; */
}
.form-group .form-options {
  padding-top: 25px;
}
.form-group .custom-field {
/*  width: 180px; */
  text-align: center;
}
.form-group .prefix-label {
/*  text-align: left; */
}
.form-group .suffix-label {
/*  text-align: left; */
}
.form-group .letters-field {
  margin-left: 45px;
  margin-right: 45px;
}
.pre-suf {
  margin-bottom: 0px;
  text-align: center;
}

.pre-suf small {
  letter-spacing: 0.05em;
}

input {
  background-color: #FFFFFF;
  color: #0A1150;
  //font-family: Arial, Helvetica, sans-serif;
  //font-family: 'Montserrat', sans-serif;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
/*  border-radius: 2px;  check why this was added. introduces selector bug in iOS */
}
.main_letters {
  /* This is the main letters being input by users */
  //font-family: 'Montserrat', sans-serif;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: bold;
  color: #BE2718;
  letter-spacing: 0.10em;
  /*	line-height: 32px; */
  /* width: 310px; */
  height: 32px; 
  line-height: 32px;
  /*this is the box in which users input the letters*/
  text-transform: uppercase;
  padding: 0;
}

#main-letters {
/*The input field */
  width: 92%;
  border: 1px solid #023C6F;
  text-align: left;
}


.parent_prefix_suffix {
/* created to make sure that prefix and suffix boxes don't take up too much space on smaller screens */
/*  max-width: 30%; */
}

.prefix_suffix {
  /* This is for Prefix and Suffix */
  border: 1px solid #023C6F;
  font-family: Arial, Helvetica, sans-serif;
  //font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #BE2718;
  /*	letter-spacing : 2px; */
  line-height: 26px;
  max-width: 107px; 
  height: 26px; 
  /*	background-image: url(../images/lb4.gif); */
  text-align: left;
  text-transform: uppercase;
}

.prefix_suffix::placeholder {

  text-transform: none;
  color: Grey;
  font-weight: 200;
  transition: opacity 250ms ease-in-out;

}

:focus::-webkit-input-placeholder {
  opacity: 0.4;
}

.prefix_box {
  /*padding-right: 10px; */
}
.contains_box {
/*  max-width: 107px; */
}

::-webkit-input-placeholder { /* Chrome */
  text-transform: none;
  color: Grey;
  font-weight: 200;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.4;
}
:-ms-input-placeholder { /* IE 10+ */
  text-transform: none;
  color: Grey;
  font-weight: 200;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.4;
}
::-moz-placeholder { /* Firefox 19+ */
  text-transform: none;
  color: Grey;
  font-weight: 200;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.4;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  text-transform: none;
  color: Grey;
  font-weight: 200;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.4;
}

TEXTAREA {
  border: 1px solid #023C6F;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 200;
  color: #0A1150;
  letter-spacing: 1px;
}
HR {
  color: #B8BACC;
}
.title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: xx-large;
  font-weight: bold;
  color: #B8BACC;
  line-height: 60px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.title_smaller {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #B8BACC;
  line-height: 24px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.category {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #B8BACC;
  line-height: 24px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.dby {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #B8BACC;
  line-height: 16px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.dby1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #B8BACC;
  line-height: 16px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.welcome {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #BE2718;
  line-height: 14px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.dots {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #0A1150;
  line-height: 14px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.menu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 14px;
  vertical-align: middle;
}
.fhome {
  //font-family: Arial, Helvetica, sans-serif;
  //font-family: 'Montserrat', sans-serif;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 18px;
  //font-weight: normal;
  font-weight: 300;
  color: #0A1150;
  line-height: 22px;
  letter-spacing: 0px;
  //vertical-align: middle;
  //vertical-align: left;
  max-width: 400px;
}
.fword {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #0A1150;
  line-height: 24px;
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.fform {
  //font-family: Arial, Helvetica, sans-serif;
  //font-family: 'Montserrat', sans-serif;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 14px;
  font-weight: 300;
  //font-weight: normal;
  color: #0A1150;
  line-height: 18px;
  letter-spacing: 0px;
  vertical-align: middle;
  max-width: 400px;
  margin-bottom: 0;
}
.fform_eror {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #BE2718;
  line-height: 18px;
  letter-spacing: 0px;
  vertical-align: middle;
}
.fm {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  color: #606060;
  line-height: 10px;
  letter-spacing: 2px;
}
.fme {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #606060;
  line-height: 12px;
  letter-spacing: 2px;
}
.ftitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #4F5559;
  line-height: 14px;
  letter-spacing: 2px;
}
.centered {
  margin: 0 auto;
  text-align: left;
/*  width: 800px; */
}

#Clear-Button {
  height: 32px;
  line-height: 32px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  padding: 0 14.5px;
  color: #333;
  vertical-align: middle;
  font-weight: 400;
  border: 1px solid #ccc;
}

#Clear-Button:hover {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2) inset;
  background: lightgray;
}

.find-button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#Find-Words-Button {
  font-family: "Lora", serif;
  font-size: 14px;
  height: 32px;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #335190;
  color: #FFF;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  line-height: 32px;
  border: none;
  border-radius: 3px;
  display: inline-block;
  padding: 0 14.5px;
}

#Find-Words-Button:hover {
  background: #263c6a;
}

#Find-Words-Button:active {
  background: #182745;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2) inset;
}

#radio-input-or {
  padding-left: 10px;
}

table td + td { 
  padding-left: 20px; 
/*  border-left:20px solid white; */
}

.horizontal_blocks {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start) */
  margin-top: 4px;
}

#and_or_block {
/* padding-top: 20px; */
}

#main-letters-directive {
  font-size: 16px;  
}

#core_block {
  z-index: 998;
  min-width: 300px;
}


@media only screen and (min-width: 800px) {
#main-letters-directive {
  font-size: 18px;  
}
#core_block {
  min-width: 468px;
}
#sideblock {
  min-width: 300px;
}
}

#words-table {

  border: none;
  letter-spacing: 0.05em;
  margin-top: 2px;
  margin-bottom: 5px;
}

#words-container {
  min-height:20vh;
  /* In order to not have two horizontal Ads gang up on the words-table */
  z-index: 9999999;
  /* Need to make sure word results are always on top of everything */
}

#words-table a:link, a:visited {
  color: #000544; 
  /* 000544 is 30% darkened of background of logo */
}

#words-table a:hover {
  color: #263c6a;
}

/* @media only screen and (max-width: 800px) {
    #leaderboard {
        display: none;
    }
}*/

#leaderboard-background {
width:800px; height:94px; background-color:#f4f3f3;
display: flex;
border: 1px solid #335190;
}

#picker-background {
/* width:800px; height:92px; */
background-color:#f4f3f3;
padding-left: 14.5px;
margin-top: 20px;
/*
padding-right: 6px;
*/
border: 1px solid #335190;
font-family: "Helvetica Neue", sans-serif;
font-size: 15px;
}
#picker-background a {
  color: rgba(74, 74, 74, 0.5);
}
#picker-background a:hover {
  color: rgba(74, 74, 74, 0.7);
}
#picker-background ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 0;
}
#picker-background h4 {
  margin: 10px 0px 10px 0px;
}
@media only screen and (min-width: 800px) {

#picker-background {
margin-top: 95px;
margin-bottom: 60px;
}
}

#plead {
background-color:#f4f3f3;
padding-left: 14.5px;
font-family: "Helvetica Neue", sans-serif;
font-size: 15px;
}

.bottom{
    background-color:#f4f3f3;
    border-top:1px solid #335190;
    bottom:0;
    left:0;
    position:fixed;
    text-align:center;
    width:100%;
    z-index:1099
}
.bottom--inner{
    position:relative
}

.new-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.new-footer .sub {
  //font-family: "Helvetica Neue", sans-serif;
  //font-family: 'Montserrat', sans-serif;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.new-footer .box {
  border-top: 2px solid rgba(0, 0, 0, 0.05);
  padding-top: 20px;
}

.new-footer .box.small {
  width: 32%;
}

.new-footer .box.mid {
  width: 52%;
}

#results {
  min-height: 20vh;
}

.word-container {
  z-index: 9999999;
  margin: 2px 0 5px;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #05080E; /* 90% black and 10% background of logo */
  letter-spacing: 0.01em;
}

.word-container, .words-row, .word-detail {
  display: flex;
  box-sizing: border-box;
}

.word-container {
  flex-wrap: wrap;
}

.words-row {
  justify-content: space-between;
  width: 100%;
  background-color: #F5F9FC; 
}
.words-row:nth-child(odd) {
  background-color: #E9F0F7; 
}

.word-detail {
  flex-basis: calc(50% - 10px);
  justify-content: space-between;
}

.letter-count, .word {
  padding: 5px 10px;
}

.letter-count {
  flex-basis: 20%;
  text-align: right;
  margin-right: 5px;
  font-weight: 300;
}

.word {
  flex-basis: 80%;
  text-align: left;
  font-weight: 500;
}

.wild-card {
  /* color: var(--wild-card-color, #970000); */
  /* color: var(--wild-card-color, #05080E); */
  color: var(--wild-card-color, #d84315);
  /* e57373 is orange FF4500 is OrangeRed */
}

.word-container a:link, .word-container a:visited {
  /* color: #000080;   Darker shade of blue */
  color: #05080E; /* 90% black and 10% background of logo */
}
.word-container a:hover {
  /* color: #6897bb;   Lighter shade of blue for hover */
  color: #335190; /* Find Words base color */
}

.word-container.compact {
    display: grid;
    //grid-template-columns: repeat(2, 1fr);
    max-width: 75%;
    grid-template-columns: auto auto;
    //font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto',Arial,sans-serif;
}

.word-container.compact .words-row {
    display: contents; 
    line-height: 25px;
}

.word-container.compact .word-detail {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
}

.word-container.compact .letter-count,
.word-container.compact .word {
    padding: 0px;
    margin: 0;
}