/* CRF - 2019-08-25
*/



.bfav-anch {
  color: blue;
  /* text-decoration: underline; */
  text-decoration: none;
  /* cursor: auto; */
  cursor: pointer;
}


/* #crf-test-icon { */
  /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzIgMzIiIC8+' xmlns="http://www.w3.org/2000/svg"); */
  /* width: 32px; */
  /* height: 32px; */
/* } */

#crf-test-icon{
  width:32px;
  height:32px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>');
}

.svg-gift{
  width: 50px;
  height:50px;
  display: inline-block;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath class='st0' d='M38.1,10.6h-9.9c1.2-1,2-2.5,2-4.2c0-3-2.4-5.4-5.4-5.4c-2.4,0-4.5,1.6-5.2,3.8c-0.8-1-2-1.6-3.4-1.6c-2.4,0-4.3,1.9-4.3,4.3c0,1.2,0.5,2.3,1.3,3.1H1.9c-1,0-1.8,0.8-1.8,1.8V16c0,1,0.8,1.8,1.8,1.8v18.7c0,1,0.8,1.8,1.8,1.8h14.6h3.3h14.6c1,0,1.8-0.8,1.8-1.8V17.8c1,0,1.8-0.8,1.8-1.8v-3.6C39.9,11.4,39.1,10.6,38.1,10.6z M20.6,6.4c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2h-3.2h-1V7.5V6.4z M21,16.6h-2.1v-4.8H20H21V16.6z M13.2,7.5c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.1h-1.1h-2.1C14.6,10.6,13.2,9.2,13.2,7.5z M1.3,16v-3.6c0-0.3,0.3-0.6,0.6-0.6h14.4h1.5v4.8H2.5H1.9C1.6,16.6,1.3,16.4,1.3,16z M3.1,36.5V17.8h14.6v19.3h-14C3.4,37.1,3.1,36.8,3.1,36.5z M18.9,37.1V17.8H21v19.3H18.9z M36.9,36.5c0,0.3-0.3,0.6-0.6,0.6h-14V17.8h14.6V36.5z M38.7,16c0,0.3-0.3,0.6-0.6,0.6h-0.6H22.3v-4.8h2.6h13.3c0.3,0,0.6,0.3,0.6,0.6V16z'/%3E%3C/svg%3E");
}

/*https://stackoverflow.com/questions/40769908/google-material-icons-alignment-in-bootstrap-buttons
*/

.crf-icons {
  vertical-align: middle;
  line-height: 0 !important;
  position: relative;
  top: -1px;
}

.crf-box {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 20%;
  margin-right: 20%;
  border: 3px solid;
  border-radius: 10px;
  box-sizing: border-box;
}

@media only screen and (max-width: 800px) {
  .crf-box {
    margin-left: 2%;
    margin-right: 2%;
  }
}

.crf2-box {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 40%;
  margin-right: 40%;
  border: 3px solid;
  border-radius: 10px;
  box-sizing: border-box;
}

@media only screen and (max-width: 2000px) {
  .crf2-box {
    margin-left: 35%;
    margin-right: 35%;
  }
}

@media only screen and (max-width: 1300px) {
  .crf2-box {
    margin-left: 30%;
    margin-right: 30%;
  }
}

@media only screen and (max-width: 1000px) {
  .crf2-box {
    margin-left: 25%;
    margin-right: 25%;
  }
}

@media only screen and (max-width: 800px) {
  .crf2-box {
    margin-left: 15%;
    margin-right: 15%;
  }
}

@media only screen and (max-width: 600px) {
  .crf2-box {
    margin-left: 10%;
    margin-right: 10%;
  }
}

.crf-font-1 {
    font-size:130%;
}

.crf-font-2 {
    font-size:160%;
}

/* .crf-font-3 { */
    /* font-size:160%; */
/* } */

.hang-indent {
  padding-left: 20px;
  text-indent: -20px;
}

.rounded-300 {
  border-radius: 5px;
  border: solid 2px;
  height: 170px;
  width: auto;/*maintain aspect ratio*/
  max-width:300px;}

.fav-contain {
  position: relative;
  display: inline-block; /* Make the width of box same as image */
  width: 300px;
  padding: 5px;
}

.fav-contain .fav-caption {
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  left: 5%;
  right: 3%;
  top: 55%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 130px;
  background-color: lightblue;
  color: black;
}

.rounded-130 {
  border-radius: 5px;
  border: solid 2px;
  width: 130px;
}

.crf-contain {
  position: relative;
  display: inline-block; /* Make the width of box same as image */
  width: 130px;
  padding: 5px;
}

.crf-contain .bible-caption {
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  left: 5%;
  right: 3%;
  top: 55%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 130px;
  background-color: lightblue;
  color: black;
}

.bible-row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  padding-left: 7%;
}

/* Create four equal columns that sits next to each other */
.bible-column {
  -ms-flex: 85%; /* IE10 */
  flex: 85%;
  max-width: 85%;
  padding: 0 4px;
  white-space: wrap;
}

/* .bible-column div { */
  /* margin-top: 8px; */
  /* vertical-align: middle; */
  /* width: 100%; */
/* } */

/* ========= */

.bfav-light-font {
  text-shadow: 1px 1px 0 #000;
  color: #FFF
}

.bfav-dark-font {
  text-shadow: 1px 1px 0 #FFF;
  color: #000
}

.bfav-back {
  z-index: -1;
}

.bfav-box {
  background-color: blue;
  border: 2px solid black;
  /* opacity: 0.6;   */
  /* margin: 30px; */
  /* z-index: 2; */
  /* background-color: #ffffff; */
  /* background-color: #000000; */
  /* border: 2px solid black; */
  /* background: rgba(0, 151, 19); */
  /* background: rgba(0, 151, 19, 0.1); */
  /* opacity: 0.6; */
  /* border: 5px solid; */
  /* padding: 10px; */
}

/* ========= */

.bfav-bw {
  background-color: white;
  color: black;
}

/* FROM BOOTSTRAP 5 */

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ========= */

.bfav-small {
  font-size: 100%;
}

.bfav-medium {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 120%;
}

.bfav-large {
  font-size: 140%;
}

/* .bfav-bold { */
  /* text-shadow: 1px 1px 0 #000; */
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
/* } */

.bfav-blue {
  color: blue;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.bfav-blue2 {
  color: blue;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-darkblue {
  color: darkblue;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
/* For SVG - see https://codepen.io/sosuke/pen/Pjoqqp */
.bfav-filter-darkblue{
  filter: invert(13%) sepia(49%) saturate(5165%) hue-rotate(237deg) brightness(84%) contrast(138%);
}

.bfav-gold {
  color: gold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* For SVG - see https://codepen.io/sosuke/pen/Pjoqqp */
.bfav-filter-gold{
  filter: invert(88%) sepia(29%) saturate(7057%) hue-rotate(6deg) brightness(110%) contrast(110%);
}

.bfav-silver {
  /* color: burlywood;  */
  color: silver;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* For SVG - see https://codepen.io/sosuke/pen/Pjoqqp */
.bfav-filter-silver{
  filter: invert(86%) sepia(24%) saturate(12%) hue-rotate(352deg) brightness(90%) contrast(80%);
}

.bfav-green {
  color: limegreen;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-tan {
  color: tan;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-tan2 {
  color: saddlebrown;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
}

.bfav-brown {
  color: sienna;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* For SVG - see https://codepen.io/sosuke/pen/Pjoqqp */
.bfav-filter-brown{
  filter: invert(33%) sepia(64%) saturate(537%) hue-rotate(334deg) brightness(96%) contrast(93%);
}

.bfav-brown2 {
  color: sienna;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
}

.bfav-red {
  color: red;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
}

.bfav-sky {
  color: skyblue;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-sky2 {
  color: #00688B;
  /* color: #4B92AF;  */
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
}

.bfav-pink {
  color: deeppink;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-tan {
  color: tan;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-cyan {
  color: cyan;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bfav-teal {
  color: teal;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}



.norm-size {
  font-size: 80%;
}

#top-nav {
  min-height: 50px;
}

#top-nav div {
  background-color: #010101;
  list-style: none;
}
#top-nav div span {
  display: inline-block;
}

#top-nav div span a {
  display: block;
  color: #f9f9f9;
  padding: 18px 20px;
}

#top-nav div span a:hover{background-color: #666;}

.top-msg {
  min-height: 50px;
}

.top-msg div {
  background-color: #010101;
  list-style: none;
}
.top-msg div span {
  display: inline-block;
}

.top-msg div span a {
  display: block;
  color: #f9f9f9;
  padding: 5px 5px;
}

.top-msg div span a:hover{background-color: #666;}

/* Dropdown */
/* li.dropdown{position: relative;} */
/* ul.dropdown-menu{ */
  /* position: absolute; */
  /* min-width: 120px; */
/* } */
/* ul.menu-big { */
  /* height: 90vh; */
  /* overflow: auto scroll !important;  */
/* } */

/* ul.dropdown-menu li{ */
  /* display: block !important; */
  /* white-space: nowrap; */
/* } */

/* Sub Dropdown */
/* ul.dropdown-menu ul.dropdown-menu{ */
  /* left: 100%; */
  /* top: 0; */
  /* background-color: #f00 !important; */
/* } */

/* Display none by Default */
/* ul.dropdown-menu{ */
  /* display: none; */
/* } */

/* .ui-autocomplete {  */
    /* position: absolute;  */
    /* cursor: default;  */
    /* height: 200px;  */
    /* overflow-y: scroll;  */
    /* overflow-x: hidden; */
/* } */

.crf-button {
  /* color: #fff !important; */
  /* text-transform: uppercase; */
  /* font-size: 120%; */
  font-weight: bold;
  /* font-size: 12pt; */
  font-size: 14px;
  text-decoration: none;
  /* background: #ed3330; */
  /* background: lightgray; */
  /* padding: 12px; */
  border-radius: 5px;
  border: solid 2px;
  display: inline-block;
  transition: all 0.4s ease 0s;
  margin: 5px;
  cursor: pointer;
}
.crf-button:hover {
  /* background: #434343; */
  /* background: darkgray; */
  /* letter-spacing: 1px; */
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
  transition: all 0.4s ease 0s;
}

.crf-button-2 {
  transition: all 0.4s ease 0s;
  cursor: pointer;
}
.crf-button-2:hover {
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
  transition: all 0.4s ease 0s;
}


#float-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#float-btn:hover {
  background-color: #555;
}

/* Footer */

  #footer {
    padding: 1rem 0 2rem 0 ;
    background: #000;
    text-align: center;
    color: white;
    /* margin-top: 140px; */
  }

    #footer div {
      cursor: default;
      list-style: none;
      /* padding-left: 0; */
      font-size: 200%;
      padding: 18px 20px;
    }
    #footer span {
      display: inline-block;
      padding: 0 1rem 0 0;
    }
    /* #footer li:last-child { */
      /* padding: 0 1rem 0 0; */
    /* } */

    #footer a {
      color: rgba(255, 255, 255, 0.5);
    }

      #footer a:hover {
        color: #FFF;
      }

    #footer .copyright {
      /* color: #bbb; */
      color: white;
      font-size: 0.9rem;
      margin: 0 0 2rem 0;
      padding: 0;
      text-align: center;
    }

    @media screen and (max-width: 736px) {

      #footer {
        padding: 3rem 0 1rem 0 ;
      }

    }

/* Target elements */

.targets-wrapper {
  margin: 0 -5px;
  padding: 10px 0 20px;
  display: flex;
  flex-wrap: wrap;
}

.target,
.target-click,
.target-notice {
  cursor: default;
  font-size: 14px;
  line-height: 50px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e2e2e2;
  background: #fafafa;
  text-align: center;
  font-weight: 500;
  position: relative;
  text-transform: uppercase;
  width: calc(25% - 10px);
  margin: 5px;
  transition: border-color .2s, background-color .2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.target:hover,
.target-click:hover,
.target-notice:hover {
  border-color: #bbb;
  background-color: #eee;
}

.target-click,
.target-notice {
  cursor: pointer;
}

.target.active,
.target-click.active,
.target-notice.active {
  color: #49d;
}

/* jBox styles */

.ajax-sending {
  color: #49d;
}

.ajax-complete {
  color: #390;
}

.ajax-success tt {
  color: #666;
  display: block;
  padding-top: 10px;
  font-size: 14px;
}

.ajax-error {
  color: #d00;
}

/* https://www.w3schools.com/howto/howto_css_image_text_blocks.asp */

/* Container holding the image and the text */
.x-container {
  position: relative;
}

/* Bottom right text */
.x-text-block {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 3px;
  padding-right: 3px;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive */

.x-row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create 3 equal columns that sits next to each other */
.x-column {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  max-width: 30%;
  padding: 0 4px;
}

.x-column a {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a 2 column-layout instead of 3 columns */
@media screen and (max-width: 800px) {
  .x-column {
    -ms-flex: 45%;
    flex: 45%;
    max-width: 45%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .x-column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* Blueberry Blue */
/* .bfav-btn { */
  /* background-color: #0041C2 !important */
/* } */
/* BS Primary */
/* .bfav-btn:hover { */
  /* background-color: #0275d8 !important */
/* } */


/* Fantastic! */
/* auto dark light */
/* https://getbootstrap.com/docs/5.3/customize/color-modes/ */
/* 11 Colors! */
/* blue indigo purple pink red orange yellow green teal cyan gray */
/* https://getbootstrap.com/docs/5.3/customize/color/ */

[data-bs-theme="blue"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-blue);
  --bs-body-bg-rgb: #{to-rgb($blue)};
  --bs-tertiary-bg: #{$blue-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
    --bs-dropdown-link-active-bg: #{$blue-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="indigo"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-indigo);
  --bs-body-bg-rgb: #{to-rgb($indigo)};
  --bs-tertiary-bg: #{$indigo-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($indigo-500, $indigo-600)};
    --bs-dropdown-link-active-bg: #{$indigo-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $indigo-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $indigo-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $indigo-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="purple"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-purple);
  --bs-body-bg-rgb: #{to-rgb($purple)};
  --bs-tertiary-bg: #{$purple-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($purple-500, $purple-600)};
    --bs-dropdown-link-active-bg: #{$purple-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $purple-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $purple-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $purple-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="pink"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-pink);
  --bs-body-bg-rgb: #{to-rgb($pink)};
  --bs-tertiary-bg: #{$pink-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($pink-500, $pink-600)};
    --bs-dropdown-link-active-bg: #{$pink-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $pink-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $pink-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $pink-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="red"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-red);
  --bs-body-bg-rgb: #{to-rgb($red)};
  --bs-tertiary-bg: #{$red-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($red-500, $red-600)};
    --bs-dropdown-link-active-bg: #{$red-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $red-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $red-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $red-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="orange"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-orange);
  --bs-body-bg-rgb: #{to-rgb($orange)};
  --bs-tertiary-bg: #{$orange-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($orange-500, $orange-600)};
    --bs-dropdown-link-active-bg: #{$orange-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $orange-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $orange-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $orange-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="yellow"] {
  --bs-body-color: var(--bs-black);
  --bs-body-color-rgb: #{to-rgb($black)};
  --bs-body-bg: var(--bs-yellow);
  --bs-body-bg-rgb: #{to-rgb($yellow)};
  --bs-tertiary-bg: #{$yellow-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($yellow-500, $yellow-600)};
    --bs-dropdown-link-active-bg: #{$yellow-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $yellow-400, .5)};
    --bs-btn-border-color: #{rgba($black, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $yellow-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($black, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $yellow-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($black, .5)};
    --bs-btn-focus-border-color: #{rgba($black, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="green"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-green);
  --bs-body-bg-rgb: #{to-rgb($green)};
  --bs-tertiary-bg: #{$green-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($green-500, $green-600)};
    --bs-dropdown-link-active-bg: #{$green-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $green-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $green-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $green-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="teal"] {
  --bs-body-color: var(--bs-black);
  --bs-body-color-rgb: #{to-rgb($black)};
  --bs-body-bg: var(--bs-teal);
  --bs-body-bg-rgb: #{to-rgb($teal)};
  --bs-tertiary-bg: #{$teal-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($teal-500, $teal-600)};
    --bs-dropdown-link-active-bg: #{$teal-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $teal-400, .5)};
    --bs-btn-border-color: #{rgba($black, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $teal-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($black, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $teal-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($black, .5)};
    --bs-btn-focus-border-color: #{rgba($black, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="cyan"] {
  --bs-body-color: var(--bs-black);
  --bs-body-color-rgb: #{to-rgb($black)};
  --bs-body-bg: var(--bs-cyan);
  --bs-body-bg-rgb: #{to-rgb($cyan)};
  --bs-tertiary-bg: #{$cyan-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($cyan-500, $cyan-600)};
    --bs-dropdown-link-active-bg: #{$cyan-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $cyan-400, .5)};
    --bs-btn-border-color: #{rgba($black, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $cyan-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($black, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $cyan-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($black, .5)};
    --bs-btn-focus-border-color: #{rgba($black, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

[data-bs-theme="gray"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-gray);
  --bs-body-bg-rgb: #{to-rgb($gray)};
  --bs-tertiary-bg: #{$gray-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($gray-500, $gray-600)};
    --bs-dropdown-link-active-bg: #{$gray-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $gray-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $gray-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $gray-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}