main {background-color: #e5e5e5}

/* White toggler-icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
  }


.btn-search-color {
  background-color: #C92520 !important;
  border-color: #C92520 !important;
  /* If you have a border */
}

.btn-search-color:hover {
  background-color: #D32F2F !important;
  border-color: #D32F2F !important;
  /* If you have a border */
}

.bg-stats {
  background-color: #F5F5DC
}

.stats-text {
  color: #000;
}

.back-to-top-text {
  color: #FFF
}

.bg-back-to-top {
  background-color: #5D4037
}

/* .bg-nav {background-color:#f9f5fa} */
.bg-nav {background-color: #085749}

/* @media (min-width: 992px) {

  .always-visible {
    display: block !important;
  }
}
 */
.accordion-button::after {
  order: -1;
  /* Place the icon before the text */
  margin-left: 0;
  /* Remove default left margin */
  margin-right: 0.5em;
  /* Add some space to the right */
}

.bg-lightgray{background-color: #374750;}

footer.footer {
  background-color: #232F3E;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  column-gap: 25px;
}

.category-list>div {
  /* Target the direct children of .category-list */
  text-align: center;
  /* Center the content within each column */
}

@media (min-width: 375px) and (max-width: 575.98px) {
  .category-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .category-list>div {
    width: auto;
    /* Allow columns to adjust their width based on content */
  }
}

@media (max-width: 374.98px) {

  /* Target screens smaller than 374.98pxpx */
  .category-list>div {
    width: 100% !important;
    /* Make each column take full width on extra small screens */
    padding: 0 !important;
    /* Remove any padding on the columns */
  }

  .c-l {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
    /* Add some top/bottom padding to the links */
  }
}

@media (max-width: 374.98px) {
  .category-list {
    justify-content: center;
  }

  .c-l {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

.c-l {
  display: block;
  width: auto;
  padding: 10px 10px 10px 0;
  text-align: start;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
  width: calc(100% - 20px);
}

.c-l:hover {
  display: block;
  transform: translateY(-1px) scale(1.001);
  color: #0a58ca;
  text-decoration: underline;
  width: 100%;
}


/* End CSS for table of categories */

shadow {
  width: 100%;
  max-width: 100vw;
  box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);
  z-index: 90
}

a {
  color: #1967d2
}


.footer li a:hover,
.nav-link a:hover,
a:hover,
ul.nav.nav-tabs a:hover {
  text-decoration: underline
}

.card,
.navbar-toggler,
.table-borderless td,
.table-borderless th {
  border: 0
}

.navbar-toggler:hover {
  background-color: rgba(0, 0, 0, .1);
  border-radius: 24px
}

.navbar-toggler:focus {
  box-shadow: none
}

.nav-bottom-border,
.navbar-bottom-border {
  border-bottom: 1px solid #e5e6e7
}

.navbar-brand {
  font-size: 1.4em;
  padding: 0
}

.navbar-brand sup {
  font-size: .4em;
  top: -1em
}

.letter i:hover,
.nav-link.small a:visited,
.navbar-light .navbar-nav .nav-link,
a.nav-link.small {
  color: #000
}

.btn-primary {
  background-color: #0f396b;
  border-color: #26538f
}

@media all and (min-width:768px) {
  .main {
    order: 1
  }

  .aside-right {
    order: 2
  }

  .footer {
    order: 3
  }
}

@media all and (min-width:992px) {
  .aside-left {
    order: 1
  }

  .main {
    order: 2
  }

  .aside-right {
    order: 3
  }

  .footer {
    order: 4
  }
}

.aside-left {
  flex: 0 0 auto
}

.aside-left .nav>li>a {
  display: inline-block;
  padding: .25rem .75rem;
  font-size: 90%
}

.aside-right {
  padding: 0
}

.letter,
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
  background-color: #fff
}

#letter-categories div {
  background-color: #fff;
  border-color: #ddd;
  border-bottom: 1px solid #e6e6e6;
  padding: .6rem !important;
  width: 9.3em
}

.letter {
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  padding: 1em
}

.letter p:last-child {
  margin-bottom: 0
}

.letter i {
  position: absolute;
  top: 0;
  right: 2px;
  color: #b0bec5;
  cursor: copy;
  font-size: 24px
}

.letter:hover {
  box-shadow: rgba(0, 0, 0, .2) 0 10px 16px 0, rgba(0, 0, 0, .19) 0 6px 20px 0
}

.letter .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #28a745;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 2px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%
}

.letter .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #ca8fdb
}

@media (max-width:767px) {
  button.navbar-toggle {
    float: left;
    margin-left: 20px;
    background-color: transparent;
    border: 1px solid transparent
  }

  ul.nav.navbar-nav {
    clear: left
  }

  a:link {
    text-decoration: none
  }
}

.adMiddle,
.center,
.footer table {
  margin: 0 auto
}

.wrapper,
ul.sentences {
  margin: 0
}

div#by,
div#by a {
  color: #989898;
  font-size: 14px;
  line-height: 17px
}

div#by img {
  margin: 5px 5px 5px 0
}

.table-hover>tbody>tr>td:hover {
  background-color: #f8f9fa
}

.footer ul {
  padding-left: 20px
}

.footer li {
  padding-left: 0
}

.footer li a {
  color: #000
}

.footer table {
  width: 60%
}


.adLeft,
.adRight {
  display: none
}

ul.phrases {
  list-style-type: circle
}

.adHoriz {
  width: 100%;
  height: auto;
  clear: both
}

@media (min-width:576px) {
  .adHoriz {
    min-height: 60px
  }
}

@media (min-width:400px) {
  .adHoriz {
    max-height: 100px
  }
}

@media (min-width:768) {
  .adRight {
    text-align: center;
    display: inline-block;
    width: 160px;
    min-height: 600px
  }

  .aside-right {
    -webkit-flex: 0 0 160px;
    flex: 0 0 160px;
    min-height: 600px
  }
}

@media (min-width:992px) {
  .adLeft {
    display: block;
    width: 160px;
    min-height: 600px;
    text-align: center
  }

  .aside-left {
    -webkit-flex: 0 0 160px;
    flex: 0 0 160px
  }

  .adHoriz {
    min-height: 90px
  }
}

@media (min-width:1200px) {
  .adRight {
    width: 336px
  }
}

.adBottom,
.adMiddle {
  display: inline-block
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0
}

@media (min-width:1400px) {
  .adLeft {
    display: block;
    width: 300px;
    min-height: 250px;
    text-align: center
  }
}

a.list-group-item.list-group-item-action:hover {
  cursor: pointer;
  color: #1967d2;
  text-decoration: underline
}

.adTop {
  width: 320px;
  height: 100px
}

@media(min-width:500px) {
  .adTop {
    width: 468px;
    height: 60px
  }
}

@media(min-width:800px) {
  .adTop {
    width: 728px;
    height: 90px
  }
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0
}

.x2 {
  min-width: 180px
}

@media (max-width:767.98px) {
  .x2 {
    height: 44px
  }

  .bg {
    background-color: #0f396b
  }
}

@media (min-width:768px) {
  .adBottom {
    display: none
  }

  .bg {
    background: linear-gradient(to bottom, #0d1940, #112359, #465ea6, #697fbf)
  }
}

.masthead {
  min-height: 20vh;
  position: relative
}