:root {


}

a {
  text-decoration: none;
}
/* hide recaptcha badge */
.grecaptcha-badge { visibility: hidden; }

select {
  -webkit-appearance:none;
  /* Add paddings to accommodate arrow */
  padding: 8px;
  padding-right: 40px;
  font-size: 14px;
  outline: none;  

  /* Add arrow icon */
  /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow.svg);
  background-size: 15px;
  background-position: right 10px center;
  background-repeat: no-repeat;
}
select.bg10 {
  background-size: 10px;
}
.no-scrollbar {
  overflow-x: scroll; /* Allows horizontal scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and WebKit-based browsers */
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* resize div */

  .resize-parent-container {
    position: absolute;
    box-sizing: border-box;
    margin: 0px;
    top: 49px; /* Same as .header height */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  .resize-container {
      display: flex;
      height: 100%;
      width: 100%;
  }

    .left-panel {
      width: 70%;
      min-width: 10%;
      overflow-y: hidden;
      overflow-x: auto;
      /* */
    }

    .resizer-vertical {
      width: 5px;
      background: #ccc;
      cursor: ew-resize;
    }

    .right-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .top-panel {
      display: flex;
      overflow: hidden;
      flex-direction: column;
    }
    .resizer-horizontal {
      height: 5px;
      background: #ccc;
      cursor: ns-resize;
    }

    .bottom-panel {
      display: flex;
      flex: 1;
      height: 40%;
      min-height: 10%;
      overflow: hidden;
      flex-direction: column;
    }

   .panel-header {
     flex-shrink: 0; /* Prevent it from shrinking */
     min-height: 30px;
  }
  .panel-header > div {
    margin-top: auto;
    margin-bottom: auto;
  }
  .panel-header > div.mar-top-0 {
    margin-top: 0px;
  }
  .panel-body {
    flex: 1;
    min-height: 0; /* allow flex to constrain height so graph doesn't expand endlessly */
    overflow-y: auto;
  }

/* end resize div */

.rotating-image {
  animation: spin 1.2s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.round-button-right-arrow-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  cursor: pointer;
}
.round-button-right-arrow-white.bg-25 {
  background-size: 25px 25px;
}
.round-button-right-arrow-white.bg-20 {
  background-size: 20px 20px;
}
.round-button-right-arrow-white.bg-18 {
  background-size: 18px 18px;
}
.float-background {
    width: 100%;
    height: 100%;
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
}
.z-index-20 {
 z-index: 20;
}
.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}
/* Custom checkbox The container */
.check_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bg-calendar-icon {
  background-image: url('/media/calendar.svg');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 20px 35px;
  cursor: pointer;
  padding: 9px;
  box-sizing: border-box;
  background-position: center right;
}

/* Hide the browser's default checkbox */
.check_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #efefef;
  border: 1px solid #444;
}

/* When the checkbox is checked, add a blue background */
.check_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* required for fade_block() */

/* */
.opacity-0 {
  opacity: 0;
}
.layer-fade-in {
  opacity: 1;
  transition: 1s;
}

.display-block {
  display: block;
}
.display-inline-block {
  display: inline-block;
}
.display-flex {
  display: flex;
}
.display-none {
  display: none;
}
.scroll-auto {
  overflow: auto;
}
.scroll-hidden {
  overflow: hidden;
}

.button-notice-box {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: floralwhite;
}

.arrow-down-bar {
  padding-right: 30px;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-down-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-down-white.pad-r-0 {
  background-position: center right 0px;
}
.bg-right-arrow-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-up-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.pad-r-0 {
  background-position: center right 0px;
}
.arrow-up-bar {
  padding-bottom: 10px;
  padding-right: 30px;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}

 @keyframes popup {
  0% {
    opactiy: 0;
    }
  50% {
    opacity: 0.5;
    }
  100% {
    opacity: 1;
    }
  }
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    display: block;
  }
  100% {
    opacity: 1;
    font-size: auto;
    line-height: 1;
    height: 100%;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideDown{
  0% {
    transform: translateY(-50%) scaleY(0);
   /* transform: scaleY(0); */
    max-height: 0;
    opacity: 0;
  }
  60% {
     opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1);
/*    transform: scaleY(1); */
    max-height: 620px; 
    opacity: 1;
  }
}

@keyframes slideUp{
  0% {
    opacity: 1;
    max-height: 800px;
    transform: scaleY(1);
    transform: translateY(0);
/*    transform: scaleY(1); */
  }
  50% {
    opacity: 0;
    transform: scaleY(0.5);
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%) scaleY(0);
/*    transform: scaleY(0); */
    max-height: 0px;
    opacity: 0;
  }
}


@keyframes appear-delay {
  0% { opacity: 0; height: 0; line-height: 0;}
  20% {opacity: 0.2; height: 20%; line-height: 0.2; ease-in}
  40% {opacity: 0.4; height: 40%; line-height: 0.4; ease-in}
  60% {opacity: 0.6; height: 60%; line-height: 0.6; ease-in} 
  80% {opacity: 0.8; height: 80%; line-height: 0.8; ease-in}
  100% {opacity: 1; height: 100%; line-height: 1; ease-in}
}

@keyframes disappear {
  0% { opacity: 1;}
  100% {opacity: 0; ease}
}

@keyframes appear {
  0% { opacity: 0; height: 0; line-height: 0;}
  50% {opacity: 0; height: 100%; line-height: 1;}
  100% {opacity: 1;}
}
.book-index-bgimg {
  width: 100vw;
  height: 85vh;
}
.book-index-body-bgimg {
  width: 100%;
  height: 100%;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/uploads/Daphne_Beach_Warrior_flipped_20240821124730.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.height-85vh {
  height: 85vh;
}
.open-button-br {
  position: absolute;
  top: 40px; 
  right: 35px; 
  left: auto;
  cursor: pointer;
  border: none;
 }

.overflow-auto {
  overflow: auto;
}
.overflow-hiden {
  overflow: hidden;
}
@media only screen and (min-width: 800px) {
  .m100pc-ipd-50pc {
    width: 50%;
  }
  .m100pc-ipd-auto {
    width: auto;
  }
  .flex-video-box {
    width: 600px;
    height: 350px;
  }
  .m-95-ipd-300px {
    width: 300px;
  }
  .m-95vw-ip-300px-d-400px {
    width: 400px;
  }
  .m-95vw-ip-350px-d-500px {
    width: 500px;
  }
  .m-95-ip-500-700-d-900 {
    width: 700px;
  }
  .m-100-ip-500-700-d-900 {
    width: 700px;
  }
  .ip-d-500px {
    width: 500px;
  }
}
/* phone screen landscape */
@media only screen and (max-height: 540px) {
}

@media only screen and (min-width: 601px) and (max-width: 799px){
  .large-scroll-box-height {
    height: 1150px;
  }
  .m100pc-ipd-50pc {
    width: 50%;
  }
  .m100pc-ipd-auto {
    width: auto;
  }
  .flex-video-box {
    width: 500px;
    height: 280px;
  }
  .m-95-ipd-300px {
    width: 300px;
  }
  .m-95vw-ip-350px-d-500px {
    width: 350px;
  }
  .m-95vw-ip-300px-d-400px {
    width: 300px;
  }
  .m-95-ip-500-700-d-900 {
    width: 500px;
  }
  .m-100-ip-500-700-d-900 {
    width: 500px;
  }
  .ip-d-500px {
    width: 500px;
  }
}
@media only screen and (max-width: 600px) {
  .m-width-95pc {
    width: 95%;
  }
  .m100pc-ipd-50pc {
    width: 100%;
  }
  .m100pc-ipd-auto {
    width: 100%;
  }
  .flex-video-box {
    width: 95%;
    height: 125px;
  }
  .m-95-ipd-300px {
    width: 95%;
  }
  .m-95vw-ip-300px-d-400px {
    width: 100%;
  }
  .m-95vw-ip-350px-d-500px {
    width: 100%;
    overflow: scroll;
  }
  .m-95-ip-500-700-d-900 {
    width: 95%;
  }
  .m-100-ip-500-700-d-900 {
    width: 100%;
  }
  .m-max-height-500 {
    max-height: 500px;
  }
  .m-max-height-600 {
    max-height: 600px;
  }
}
.make-popup {
  background-color: #fff;
  z-index: 1100;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  min-width: 300px;
}
.make-popup-box {
  width: 250px;
  min-height: 400px;
  padding: 20px;
  margin-top: 50px;
}
 .red-border {
  border: 1px solid red;
 }
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.error {
  color: red;
  background-color: #fff;
  font-size: 20px;
  text-align: center;
  margin: 10px auto;
  padding: 10px;
  width: 50vw;
  border-radius: 5px;
 }  
.side-menu {
  width: 200px;
  height: 100%;
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 0;
}
.side-menu ul {
  list-style-type: none;
  margin-top: 200px;
  margin-left: 15px;
}
.side-menu li {
  padding: 0 0 15px 5px;
  font-size: 18px;
}
.side-menu a {
  color: #fff;
  text-decoration: none;
}
.side-menu a:visited {
  color: #fff;
  text-decoration: none;
}
.float-none {
  float: none;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
/* Popups  */
.floating-div {
  background-color: #fff;
  position: absolute;
  z-index: 1001;
  animation-name: popup;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
  box-shadow: 7px 7px 30px #222;
 }
section {
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  animation-name: popup;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
  box-shadow: 5px 5px 15px #666666;
  min-height: 250px;
  max-height: 580px;
  overflow: auto;
  padding-bottom: 20px;
 }
 .popup-message {
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 24pt;
  color: #000;
  text-align: center;
 }
  .popup-message a {
   text-decoration: none;
   color: #000;
   font-weight: bold;
 }
 .popup-message a:visited {
  text-decoration: none;
  color: #000;
  font-weight: bold;
 }
 .popup-close {
  font-size: 20pt;
  color: #000;
  float: right;
  padding: 5px 15px 5px 5px;
 }
/* end popups */

.centered-container {
  position: absolute;
  margin-top: 0;
  left: 50%;
  top: 50%;  
  transform: translate(-50%, -50%);
}
.hero-container {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.hero-title {
  color: #fff;
  width: 100%;
  font-size: 35px;
  letter-spacing: 2px;
  text-shadow: 1px 2px 3px #333;
}
.circle {
  border-radius: 50%;
  -moz-border-radius: 50%;
}
.border-box {
  box-sizing: border-box;
}
.wid-3rd {
  width: 33.33%;
}
.wid-2-3rd {
  width: 66.66%;
}
.wid-25pc {
  width: 25%;
}
.wid-10pc {
  width: 10%;
}
.wid-50pc {
  width: 50%;
}
.wid-75pc {
  width: 75%;
}
.wid-100pc {
  width: 100%;
}
.wid-50px {
  width: 50px;
}
.wid-75px {
  width: 75px;
}
.wid-100px {
  width: 100px;
}
.wid-150px {
  width: 150px;
}
.wid-175px {
  width: 175px;
}
.hgt-400 {
  height: 400px;
}
.br-word {
  overflow-wrap: break-word;
}
.pointer {
  cursor: pointer;
}
.flex-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}
.flex-scroll-container {
  display: flex;
  overflow: auto;
}
.flex-no-wr {
  display: flex;
  flex-wrap: nowrap;
}
.grid {
  display: grid;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.align-items-center {
  align-items: center;
}
.align-items-start {
  align-items: start;
}
.align-items-end {
  align-items: end;
}
.justify-sa {
  justify-content: space-around;
}
.justify-sb {
  justify-content: space-between;
}
/* required for printing */
.display-flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.simple-flex-container {
  display: flex;
}
.item-box {
  width: 50vw;
  height: 50vw;
}
.round-corn-10 {
  border-radius: 10px;
}
.round-corn-20 {
  border-radius: 20px;
}
.round-10 {
  border-radius: 10px;
}
.round-20 {
  border-radius: 20px;
}
.round-25 {
  border-radius: 25px;
}
.round-30 {
  border-radius: 30px;
}
.round-40 {
  border-radius: 40px;
}
.round-top-40 {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.box-shad-none {
  box-shadow: 0px;
}
.box-shad {
  box-shadow: 2px 2px 8px #989898; 
}
.box-shad-444 {
   box-shadow: 2px 2px 8px #444;
}
.box-shad-1-ef {
   box-shadow: 1px 1px 8px #efefef;
}
.box-shad-1-de {
   box-shadow: 1px 1px 8px #dedede;
}
.box-shad-1 {
  box-shadow: 1px 1px 6px #989898;
}
.box-shad-right-bottom {
  box-shadow: 2px 3px 8px #989898;
}
.box-shad-right-bottom-1 {
  box-shadow: 1px 2px 6px #ccc;
}
.bord-radius-0 {
  border-radius: 0;
}
.bord-tp-gry {
  border-top: 1px solid #ccc;
}
.bord-bot-gry {
  border-bottom: 1px solid #989898;
}
.bord-ver-ccc {
  border-top:  1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.txt-al-rt {
  text-align: right;
  padding-right: 30px;
}
.uppercase {
  text-transform: uppercase;
}
.underline-98  {
  text-decoration: underline;
  text-decoration-color: #989898;
}
/* book retreatbox */
.transp {
  opacity: 0.7;
}
}
@media only screen and (min-width: 1000px) {

  .m-95-ip-500-700-d-900 {
    width: 900px;
  }
  .m-100-ip-500-700-d-900 {
    width: 900px;
  }
  .retreat-title {
    width: 330px;
  }
}

.bg-img {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-img.bottom {
  background-position: bottom;
}
.bg-img.top {
  background-position: top;
}
.bg-img.left {
  background-position: left;
}
.bg-img.right {
  background-position: right;
}
.bg-img.absolute {
  position: absolute;
}
.bg-img.contain {
  background-size: contain;
}
.bg-img.bg-50px {
  background-size: 50px; 
}
.bg-img.bg-60px {
  background-size: 60px; 
}
.bg-img.bg-70px {
  background-size: 70px; 
}
.bg-img.bg-80px {
  background-size: 80px; 
}
.bg-img.bg-90px {
  background-size: 90px; 
}
.bg-img.bg-100px {
  background-size: 100px; 
}
.bg-img.bp-top {
  background-position: top;
}

.bgimg-cen {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cen-txt {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* dead center within parent */
.center { 
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cen-vert {
  position: relative;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.cen-horiz {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.lft-txt {
  text-align: left;
}
.shad-txt {
  text-shadow: 1px 2px 3px #333;
 }
.hide {
  display: none;
}
.show {
  display: block;
}
.flx-marg-auto {
  margin-left: auto;
  margin-right: auto;
}
.mar-lr-auto {
  margin-left: auto;
  margin-right: auto;
}
.mar-h-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mar-0 {
  margin: 0;
}
.mar-0-auto {
  margin: 0 auto;
}
.mar-top-0 {
  margin-top: 0;
}
.mar-top-5 {
  margin-top: 5px;
}
.mar-top-6 {
  margin-top: 6px;
}
.mar-top-7 {
  margin-top: 7px;
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-25 {
  margin-top: 25px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-35 {
  margin-top: 35px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-60 {
  margin-top: 60px;
}
.mar-top-70 {
  margin-top: 70px;
}

.mar-top-80 {
  margin-top: 80px;
}
.mar-top_100 {
  margin-top: 100px;
}
.mar-top-bot-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.mar-top-auto: {
  margin-top: auto;
}
.mar-top-0 {
  margin-top: 0px;
}
.mar-bot-0 {
  margin-bottom: 0px;
}
.mar-bot-auto {
  margin-bottom: auto;
}
.mar-auto {
  margin: auto;
}
.mar-ver-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mar-60-auto {
  margin: 60px auto;
}
.mar-0 {
  margin: 0;
}
.mar-5 {
  margin: 5px;
}
.mar-5-20 {
  margin: 5px 20px;
}
.mar-10 {
  margin: 10px;
}
.mar-10-auto {
  margin: 10px auto;
}
.mar-15 {
  margin: 15px;
}
.mar-20 {
  margin: 20px;
}
.mar-30 {
  margin: 30px;
}
.mar-40 {
  margin: 40px;
}
.mar-50-0 {
  margin: 50px 0;
}
.mar-left-0 {
  margin-left: 0;
}
.mar-left-5 {
  margin-left: 5px;
}
.mar-left-10 {
  margin-left: 10px;
}
.mar-left-20 {
  margin-left: 20px;
}
.mar-left-30 {
 margin-left: 30px;
}
.mar-left-40 {
 margin-left: 40px;
}
.mar-left-50 {
 margin-left: 50px;
}
.mar-left-60 {
 margin-left: 60px;
}
.mar-left-70 {
 margin-left: 70px;
}
.mar-left-80 {
 margin-left: 80px;
}
.mar-right-20 {
  margin-right: 20px;
}
.mar-right-25 {
  margin-right: 25px;
}
.mar-h-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mar-h-6 {
  margin-left: 6px;
  margin-right: 6px;
}
.mar-h-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mar-h-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mar-h-30 {
  margin-left: 30px;
  margin-right: 30px;
}
.mar-h-40 {
  margin-left: 40px;
  margin-right: 40px;
}
.mar-hor-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mar-30-0 {
  margin: 30px 0;
}
.mar-right-0 {
  margin-right: 0px;
}
.mar-40-auto-0 {
  margin: 40px auto 0;
}
.letter-spacing-1 {
  letter-spacing: 1px;
}
.letter-spacing-1-2 {
  letter-spacing: 1.2px;
}
.letter-spacing-1-5 {
  letter-spacing: 1.5px;
}
.letter-spacing-2 {
  letter-spacing: 2px;
}
.letter-spacing-2-5 {
  letter-spacing: 2.5px;
}
.sq {
  width: 200px;
  height: 200px;
  margin: 10px;
  border-radius: 5px;
}
.rect {
  width: 200px;
  height: 100px; 
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-15 {
  margin-top: 15px;
}
.mar-top-18 {
  margin-top: 18px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-50 {
  margin-top: 50px;
}
.mar-0 {
  margin: 0;
}
.mar-ver-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.mar-ver-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mar-ver-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.mar-ver-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mar-ver-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.mar-ver-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.mar-bot-0 {
  margin-bottom: 0;
}
.mar-bot-5 {
  margin-bottom: 5px;
}
.mar-bot-10 {
  margin-bottom: 10px;
}
.mar-bot-20 {
  margin-bottom: 20px;
}
.mar-bot-30 {
  margin-bottom: 30px;
}
.mar-bot-40 {
  margin-bottom: 40px;
}
.mar-bot-50 {
  margin-bottom: 50px;
}
.mar-bot-100 {
  margin-bottom: 100px;
}
.mar-top-0 {
  margin-top: 0;
}
.mar-bot-0 {
  margin-bottom: 0;
}
.mar-top-5 {
  margin-top: 5px;
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-50 {
  margin-top: 50px;
}
.mar-right-0 {
  margin-right: 0;
}
.mar-right-5 {
  margin-right: 5px;
}
.mar-right-10 {
  margin-right: 10px;
}
. mar-right-20 {
  margin-right: 20px;
}

.mar-right-auto {
  margin-right: auto;
}
.mar-left-auto {
  margin-left: auto;
}
.mar-0-auto-0-0 {
  margin: 0 auto 0 0;
}
.mar-40-auto-0 {
  margin: 40px auto 0;
}
.max-width-215 {
  max-width: 215px;
}
.max-width-300 {
  max-width: 300px;
}
.max-width-350 {
  max-width: 350px;
}
.max-width-400 {
  max-width: 400px;
}
.max-width-500 {
  max-width: 500px;
}
.max-width-600 {
  max-width: 600px;
}
.max-width-700 {
  max-width: 700px;
}
.max-width-800 {
  max-width: 800px;
}
.max-width-1000 {
  max-width: 1000px;
}
.max-width-1200 {
  max-width: 1200px;
}
.max-width-1500 {
  max-width: 1500px;
}
.max-height-400 {
   max-height: 400px;
}
.max-height-450 {
   max-height: 450px;
}
.max-height-500 {
  max-height: 500px;
}
.width-auto {
  width: auto;
}
.min-width-100 {
  min-width: 100px;
}
.min-width-200 {
  min-width: 200px;
}
.min-width-300 {
  min-width: 300px;
}
.width-215 {
  width: 215px;
}
.width-250 {
  width: 250px;
}
.width-200 {
  width: 200px;
}
.width-300 {
  width: 300px;
}
.width-350 {
  width: 350px;
}
.width-500 {
  width: 500px;
}
.width-600 {
  width: 600px;
}
.width-700 {
  width: 700px;
}
.width-800 {
  width: 800px;
}
.width-900 {
  width: 900px;
}
.width-1000 {
  width: 1000px;
}
.pad-h-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.pad-h-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.pad-h-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pad-h-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.pad-h-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pad-h-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.pad-h-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.pad-h-b-20 {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.pad-h-b-30 {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}
.pad-left-5 {
  padding-left: 5px;
}
.pad-left-10 {
  padding-left: 10px;
}
.pad-left-20 {
  padding-left: 20px;
}
.pad-right-5 {
  padding-right: 5px;
}
.pad-right-10 {
  padding-right: 10px;
}
.pad-right-20 {
  padding-right: 20px;
}
.pad-0 {
  padding: 0;
}  
.padd-vert-10 {
  padding: 10px 0;
}
.pad-ver-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.pad-ver-7 {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pad-ver-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.pad-ver-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pad-ver-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pad-ver-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.pad-ver-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.pad-ver-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.padd-bot-10 {
  padding-bottom: 10px;
}
.pad-bot-0 {
  padding-bottom: 0px;
}
.pad-bot-5 {
  padding-bottom: 5px;
}
.pad-bot-10 {
  padding-bottom: 10px;
}
.pad-bot-20 {
  padding-bottom: 20px;
}
.pad-bot-30 {
  padding-bottom: 30px;
}
.pad-bot-40 {
  padding-bottom: 40px;
}
.padd-top-10 {
  padding-top: 10px;
}
.pad-top-0 {
  padding-top: 0px;
}
.pad-top-2 {
  padding-top: 2px;
}
.pad-top-5 {
  padding-top: 5px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-top-15 {
  padding-top: 15px;
}
.pad-top-20 {
  padding-top: 20px;
}
.pad-top-30 {
  padding-top: 30px;
}
.pad-top-40 {
  padding-top: 40px;
}
.pad-top-50 {
  padding-top: 50px;
}
.pad-top-60 {
  padding-top: 60px;
}
.pad-top-70 {
  padding-top: 70px;
}
.pad-top-80 {
  padding-top: 80px;
}
.line-height-1-3 {
  line-height: 1.3;
}
.line-height-1-5 {
  line-height: 1.5;
}
.line-height-1-8 {
  line-height: 1.8;
}
.line-height-1-9 {
  line-height: 1.9;
}
.line-height-2 {
  line-height: 2;
}
.bord-ccc {
  border: 1px solid #ccc;
}
.bord-de {
  border: 1px solid #dedede;
}
.bord-bot-0 {
  border-bottom: 0;
}
.bord-left-1-ccc {
  border-left: solid 1px #ccc;
}
.bord-bot-1-cadetblue {
  border-bottom: 1px solid cadetblue;
}
.bord-bot-1-ccc {
  border-bottom: solid 1px #ccc;
}
.bord-right-1-ccc {
  border-right: solid 1px #ccc;
}
.bord-right-1-de {
  border-right: solid 1px #dedede;
}
.bord-right-1-ef {
  border-right: solid 1px #efefef;
}
.bord-top-1-ccc { 
  border-top: solid 1px #ccc;
}
.bord-top-1-ef {
  border-top: 1px solid #efefef;
}
.bord-bot-1-ef {
  border-bottom: 1px solid #efefef;
}
.bord-top-1-000 {
  border-top: solid 1px #000;
}
.bord-1-ef {
  border: 1px solid #efefef;
}
.bord-1-ccc {
  border: 1px solid #ccc;
}
.bord-1-98 {
  border: 1px solid #989898;
}
.bord-top-1-98 {
  border-top: solid 1px #989898;
}
.bord-1-333 {
  border: 1px solid #333;
}
.bord-1-blk {
  border: 1px solid #000;
}
.bord-bot-1-98 {
  border-bottom: solid 1px #989898;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
.bord-bot-1-666 {
  border-bottom: solid 1px #666;
}
.bord-bot-1-333 {
  border-bottom: solid 1px #333;
}
.gry-brd-bt {
  border-bottom: solid 1px #989898;
}
.xxl-txt {
  font-size: 50px;
}
.xl-txt {
  font-size: 40px;
}
.large-txt {
  font-size: 35px;
}
.med-txt {
  font-size: 30px;
}
.sm-med-txt {
  font-size: 25px;
  }
.small-txt {
  font-size: 18px;
}
.x-small-txt {
  font-size: 16px;
}
.xxs-txt {
  font-size: 14px;
}
.italic {
  font-style: italic;
}
.cursive {
  font-family: cursive;
}
.adobe-garamond-pro {
font-family: adobe-garamond-pro, serif;
font-style: normal;
font-weight: 400;
}

.adobe-garamond-pro-italic {
font-family: adobe-garamond-pro, serif;
font-style: italic;
font-weight: 400;
}
.serif {
  font-family: "Times New Roman", Times, serif;
}
.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}
.white-txt {
  color: #fff
}
.grey-txt-lite {
  color: #ccc;
}
.grey-txt-med {
  color: #666666;
}
.grey-txt-dark {
  color: #444;
}
.red-txt {
  color: red;
}
.green-txt {
  color: green;
}
.txt-red {  
  color: red;
}
.blk-txt {
  color: #000;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.normal {
  font-weight: normal;
}
.bg-grad-cadetblue-trans-top {
  background-image: linear-gradient(to top, cadetblue, rgb(255,255,255,0));
}
.bg-grad-white-smoke {
  background-image: linear-gradient(to bottom, rgba(245, 245, 245, 1), white);
}
.bg-grad-trans-white {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}
.bg-grad-white-trans {
  background-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
}
.bg-grad-trans-black {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000);
}
.bg-trans {
  background-color: transparent;
}
.bg-black-trans-5 {
  background-color: rgb(0,0,0,0.5);
}
.bg-000 {
  background-color: #000;
}
.bg-black-trans {
  background-color: rgba(0,0,0,0.15);
}
.bg-black-trans-2 {
  background-color: rgba(0,0,0,0.2);
}
.bg-black-trans-3 {
  background-color: rgba(0,0,0,0.3);
}
.bg-darkorange {
  background-color: darkorange;
}
.bg-lightcoral {
  background-color: lightcoral;
}
.bg-antiquewhite {
  background-color: antiquewhite;
}
.bg-dodgerblue {
  background-color: dodgerblue;
}
.bg-aliceblue {
  background-color: aliceblue;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-cream {
  background-color: #edebc2;
}
.bg-slate {
  background-color: slategray;
}
.bg-beige {
  background-color: beige;
}
.bg-darksalmon {
  background-color: darksalmon;
}
.txt-slate {
  color: slategray;  
}
.bord-slate {
  border: 1px solid slategray;
}
.bg-warm-deep {
  background-color: #e05e58;
}
.bord-warm-deep {
  border: solid 1px #c2605b;
}
.bg-warm-med {
  background-color: #f3928c;
}
.bg-warm-lite {
  background-color: #efc5b6;
}
.bg-lt-pink {
  background-color: #feede5;
}
.bg-peachpuff {
  background-color: peachpuff;
}
.bg-lt-blue {
  background-color: #cde6fa;
}
.bord-cream {
  border: solid 1px #edebc2;
} 
.bg-lt-gry {
  background-color: #efefef;
}
.bg-med-gry-1 {
  background-color: #ccc;
}
.bg-a9 {
  background-color: #A9A9A9;
}
.bg-ccc {
  background-color: #ccc;
}
.bg-whitesmoke {
  background-color: whitesmoke;
}
.bg-ef {
  background-color: #efefef;
}
.bg-de {
  background-color: #dedede;
}
.bg-98 {
  background-color: #989898;
}
.bg-666 {
  background-color: #666;
}
.bg-444 {
  background-color: #444;
}
.bg-333 {
  background-color: #333;
}
.bg-cadetblue {
  background-color: cadetblue;
}
.bg-plum {
  background-color: plum;
}
.txt-cadetblue {
  color: cadetblue;
}
.txt-dodgerblue {
  color: dodgerblue;
}
.txt-fff {
  color: #fff;
}
.txt-000 {
  color: #000;
}
.txt-ccc {
  color: #ccc;
}
.txt-cc {
  color: #ccc;
}
.txt-ef {
  color: #efefef;
}
.txt-98 {
  color: #989898;
}
.txt-666 {
  color: #666;
}
.txt-555 {
  color: #555;
}
.txt-444 {
  color: #444;
}
.txt-333 {
  color: #333;
}
.bg-grad-tb-ef-ff {
  background: linear-gradient(to bottom, whitesmoke, #fff);
}
.bg-fff {
  background-color: #fff;
}
.bg-fff-08 {
  background-color: rgb(255,255,255,0.8);
}
.bg-fff-07 {
  background-color: rgb(255,255,255,0.7);
}
.bg-fff-06 {
  background-color: rgb(255,255,255,0.6);
}
.bg-fff-05 {
  background-color: rgb(255,255,255,0.5);
}
.bg-fff-04 {
  background-color: rgb(255,255,255,0.4);
}
.bg-fff-03 {
  background-color: rgb(255,255,255,0.3);
}
.bg-floralwhite {
  background-color: floralwhite;
}
.bg-ghostwhite {
  background-color: ghostwhite;
}
.txt-10px {
  font-size: 10px;
}
.txt-11px {
  font-size: 11px;
}
.txt-12px {
  font-size: 12px;
}
.txt-14px {
  font-size: 14px;
}
.txt-15px {
  font-size: 15px;
}
.txt-16px {
  font-size: 16px;
}
.txt-18px {
  font-size: 18px;
}
.txt-20px {
  font-size: 20px;
}
.txt-22px {
  font-size: 22px;
}
.txt-24px {
  font-size: 24px;
}
.txt-26px {
  font-size: 26px;
}
.txt-28px {
  font-size: 28px;
}
.txt-30px {
  font-size: 30px;
}
.txt-32px {
  font-size: 32px;
}
.txt-34px {
  font-size: 34px;
}
.txt-36px {
  font-size: 36px;
}
.txt-38px {
  font-size: 38px;
}
.txt-38px {
  font-size: 38px;
}
.txt-50px {
  font-size: 50px;
}
.bg-med-gry-2 {
  background-color: #989898;
}
.bg-dark-gry-1 {
  background-color: #666666;
}
.bg-dark-gry-2 {
  background-color: #333;
}
.bord-1-66 {
  border: solid 1px #666;
}
.bord-3-66 {
  border: solid 3px #666;
}
.bord-1-cc {
  border: solid 1px #ccc;
}
.bord-1-98 {
  border: 1px solid #989898;
}
.bord-2-98 {
  border: solid 2px #989898;
}
.bord-3-98 {
  border: solid 3px #989898;
}
.bord-warm-deep-2 {
  border: solid 2px #e05e58;
}
.bord-cool-deep {
  border: solid 1px #537575;
}
.bg-neutral {
  background-color: #e0dcd1;
} 
.bg-warm-grey-lite {
  background-color: #f8f8f8;
}
.bg-coral {
  background-color: #f8f4f1;
}
.bg-coral-dark {
  background-color: #e8e4e1;
}
.bg-cool-drk {
  background-color: #355454;
}
.bg-cool-deep {
  background-color: #537575;
}
.bg-cool-med {
  background-color: #90A8A8;
}
.bg-cool-lite {
  background-color: #bcd6d5;
}
.bg-cool-vlite {
  background-color: #f5fafa;
}
.bg-white {
  background-color: #fff;
}
.bg-blk {
  background-color: #000;
}
.txt-cen {
  text-align: center;
}
.rtxt {
  text-align: right;
}
.ltxt {
  text-align: left;
}
.ctxt {
  text-align: center;
}
.point {
  cursor: pointer;
}
.no-outline {
  outline: none;
}
.no-border {
  border: 0;
}
.radius-5 {
  border-radius: 5px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-15 {
  border-radius: 15px;
}
.radius-20 {
  border-radius: 20px;
}
.box-shad-inset {
  box-shadow: 1px 1px 0px 0px #c1c1c1 inset;
}
.break-word {
  word-break: break-word;
}
.width-10 {
  width: 10px;
}
.width-20 {
  width: 20px;
}
.width-25 {
  width: 25px;
}
.width-30 {
  width: 30px;
}
.width-40 {
  width: 40px;
}
.width-45 {
  width: 45px;
}
.width-230 {
  width: 230px;
}
.width-250 {
  width: 250px;
}
.width-300 {
  width: 300px;
}
.width-400 {
  width: 400px;
}
.max-height-none {
  max-height: none;
}
.max-height-65pc {
  max-height: 65%;
}
.height-10 {
  height: 10px;
}
.height-18 {
  height: 18px;
}
.height-20 {
  height: 20px;
}
.height-25 {
  height: 25px;
}
.height-30 {
  height: 30px;
}
.height-40 {
  height: 40px;
}
.height-50 {
  height: 50px;
}
.height-60 {
  height: 60px;
}
.height-70 {
  height: 70px;
}
.height-80 {
  height: 80px;
}
.height-90 {
  height: 90px;
}
.height-100 {
  height: 100px;
}
.height-120 {
  height: 120px;
}
.height-150 {
  height: 150px;
}
.height-200 {
  height: 200px;
}
.height-210 {
  height: 210px;
}
.height-250 {
  height: 250px;
}
.height-300 {
  height: 300px;
}
.min-height-300 {
  min-height: 300px;
}
.min-height-400 {
  min-height: 400px;
}
.min-height-450 {
  min-height: 450px;
}
.min-height-500 {
  min-height: 500px;
}
.height-350 {
  height: 350px;
}
.height-400 {
  height: 400px;
}
.height-450 {
  height: 450px;
}
.height-500 {
  height: 500px;
}
.height-550 {
  height: 550px;
}
.height-600 {
  height: 600px;
}
.height-650 {
  height: 650px;
}
.height-700 {
  height: 700px;
}
.height-750 {
  height: 750px;
}
.height-800 {
  height: 800px;
}
.height-10 {
  height: 10px;
}
.height-20 {
  height: 20px;
}
.height-28 {
  height: 28px;
}
.height-30 {
  height: 30px;
}
.height-33 {
  height: 33px;
}
.height-40 {
  height: 40px;
}
.height-50 {
  height: 50px;
}
.height-100 {
  height: 100px;
}
.height-80pc {
  height: 80%;
}
.height-100pc {
  height: 100%;
}
.width-61pc {
  width: 61%;
}
.width-28 {
  width: 28px;
}
.width-50 {
  width: 50px;
}
.width-80 {
  width: 80px;
}
.width-100 {
  width: 100px;
}
.width-120 {
  width: 120px;
}
.width-130 {
  width: 130px;
}
.width-150 {
  width: 150px;
}
.width-200 {
  width: 200px;
  max-width: 200px;
}
.width-210 {
  width: 210px;
  max-width: 210px;
}
.height-200 {
  height: 200px;
  max-height: 200px;
}
.width-220 {
  width: 220px;
  max-width: 220px;
}
.width-100pc {
  width: 100%;
}
.width-90pc {
  width: 90%;
}
.width-60pc {
  width: 60%;
}
.width-40pc {
  width: 40%;
}
.width-49pc {
  width: 49%;
}
.width-48pc {
  width: 48%;
}
.height-48pc {
  height: 48%;
}
.height-49pc {
  height: 49%;
}
.width-50pc {
  width: 50%;
}
.h50 {
  height: 50%;
}
.height-10pc {
  height: 10%;
}
.height-15pc {
  height: 15%;
}
.height-25pc {
  height: 25%;
}
.height-40pc {
  height: 40%;
}
.height-60pc {
  height: 60%;
}
.height-50pc {
  height: 50%;
}
.height-66pc {
  height: 66%;
}
.height-75pc {
  height: 75%;
}
.height-33pc {
  height: 33%;
}
.height-60pc {
  height: 60%;
}
.height-40pc {
  height: 40%;
}
.max-width-280 {
  width: 280px;
  max-width: 280px;
}
.round {
  border-radius: 5px;
}
.bord-top-rad-10 {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.bord-bot-1-000 {
  border-bottom: solid 1px #000;
}
.bord-bot-2-000 {
  border-bottom: solid 2px #000;
}
.bord-0 {
  border: 0;
}
.pad-1 {
  padding: 1px;
}
.pad-2 {
  padding: 2px;
}
.pad-3 {
  padding: 3px;
}
.pad-4 {
  padding: 4px;
}
.pad-5 {
  padding: 5px;
}
.pad-7 {
  padding: 7px;
}
.pad-8 {
  padding: 8px;
}
.pad-10 {
  padding: 10px;
}
.pad-10-20 {
  padding: 10px 20px;
}
.pad-15 {
  padding: 15px;
}
.pad-20 {
  padding: 20px;
}
.pad-30 {
  padding: 30px;
}
.pad-40 {
  padding: 40px;
}
.pad-45 {
  padding: 45px;
}
.pad-50 {
  padding: 50px;
}
.pad-55 {
  padding: 55px;
}
.pad-r-5 {
  padding-right: 5px;
}
.pad-r-10 {
  padding-right: 10px;
}
.pad-ver-15 {
  padding: 15px 0;
}
.pad-ver-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pad-ver-30 {
  padding: 30px 0;
}
.pad-v30 {
  padding: 30px 0;
}
.line-height-1 {
  line-height: 1;
}
.line-height-1-5 {
  line-height: 1.5;
} 
.line-height-2 {
  line-height: 2;
}
.line-height-2-5 {
  line-height: 2.5;
}
.line-height-3 {
  line-height: 3;
}
.bord-1-ef {
  border: 1px solid #efefef;
}
.white-bord-1 {
  border: 1px solid #fff;
}
.white-bord {
  border: 2px solid #fff;
}
.bord-shad-grey {
  box-shadow: 1px 2px 3px #333;
}
.box-shad-98-thin {
  box-shadow: 2px 2px 5px #989898;
}
.box-shadow-coral-dark {
  box-shadow: 4px 4px 5px #a8a4a1;
}
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.pos-fixed {
  position: fixed;
}
.bg-bisque {
  background-color: bisque;
}
.list-style-none {
  list-style: none;
}
.title {
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
.header {
  text-align: center; 
  width: 100%;
  padding: 50px 0;
}
.prog-outer-box {
}
.prog-select-container {
    margin: 0 auto;
  }
@media only screen and (min-width: 601px) {
  .hide-desk-tab {
    display: none;
  }
  .prog-select-container {
    margin-top: 30px;
  }
  .prog-txt-box {
    text-align: center;    
  }
  .prog-outer-box {
    width: 325px;
  }

}
@media only screen and (min-width: 851px) {

  .hide-above-850 {
    display: none;
  }

}
/* large mobile / small tablet */
@media only screen and (max-width: 850px) {

  .hide-below-850 {
    display: none;
  }

}
@media only screen and (min-width: 751px) {

  .hide-above-750 {
    display: none;
  }

}
/* large mobile / small tablet */
@media only screen and (max-width: 750px) {

  .hide-below-750 {
    display: none;
  }

}
/* mobile */
@media only screen and (max-width: 600px) {
  .hide-mob {
    display: none; 
  }
  .centered-container {
    margin-top: 10px;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .simple-flex-container {
    flex-wrap: wrap;
  }
  .rec-display-box {
    width: 100%;
    height: 250px;
  }
  .select-box-title {
    font-size: 30px;
  }
  .hero-title {
    font-size: 25px;
  }
  .sq {
    width: 160px;
    height: 160px;
  }
  .item-box {
    width: 50vw;
    height: 50vw;
  }
  .xxl-txt {
    font-size: 40px;
  }
  .xl-txt {
    font-size: 35px;
  }
  .large-txt {
    font-size: 30px;
  }
  .med-txt {
    font-size: 25px;
  }
  .sm-med-txt {
    font-size: 22px;
  }
  .small-txt {
    font-size: 18px;
  }
  .x-small-txt {
    font-size: 16px;
  }
}

/* Please-wait overlay and spinner */
.wait-overlay {
  position: fixed;
  inset: 0;
  background: rgba(70, 130, 180, 0.25); /* soft blue tint */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.wait-popup {
  background: #e6f1ff;            /* soft light blue */
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.wait-popup p {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: #1b3c63;
}

/* Spinner: circle of circles */
.wait-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  animation: wait-spin 1.1s linear infinite;
}

/* Base dot styles */
.wait-spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;                    /* center the dot on its position */
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

/* Place dots around a common center (radius ~22px), with progressive transparency */
.wait-spinner span:nth-child(1) {
  transform: rotate(0deg) translate(22px) rotate(0deg);
  opacity: 1;
}
.wait-spinner span:nth-child(2) {
  transform: rotate(45deg) translate(22px) rotate(-45deg);
  opacity: 0.85;
}
.wait-spinner span:nth-child(3) {
  transform: rotate(90deg) translate(22px) rotate(-90deg);
  opacity: 0.7;
}
.wait-spinner span:nth-child(4) {
  transform: rotate(135deg) translate(22px) rotate(-135deg);
  opacity: 0.55;
}
.wait-spinner span:nth-child(5) {
  transform: rotate(180deg) translate(22px) rotate(-180deg);
  opacity: 0.4;
}
.wait-spinner span:nth-child(6) {
  transform: rotate(225deg) translate(22px) rotate(-225deg);
  opacity: 0.28;
}
.wait-spinner span:nth-child(7) {
  transform: rotate(270deg) translate(22px) rotate(-270deg);
  opacity: 0.18;
}
.wait-spinner span:nth-child(8) {
  transform: rotate(315deg) translate(22px) rotate(-315deg);
  opacity: 0.08;                   /* almost fully transparent tail */
}

/* Spinning animation for the whole ring */
@keyframes wait-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}