html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: "Poppins";
  font-weight: 300;
}

#unviewedBadge {
  margin-top: -100px;
}

.webp body {
  background-image: url('../html_images/new_background.webp');
}

.no-webp body {
  background-image: url('../html_images/new_background.jpg');
}

.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 */
}

@media only screen and (max-width: 768px) {
  .margin-top-10 {
    margin-top: 0.2vh !important;
  }

  .margin-top-20 {
    margin-top: 0.4vh !important;
  }

  .margin-top-30 {
    margin-top: 0.6vh !important;
  }

  .margin-bottom-20 {
    margin-bottom: 0.4vh !important;
  }

  .margin-bottom-40 {
    margin-bottom: 0.8vh !important;
  }

  .boddle-sticky-bottom {
    display: none !important;
  }

  #qrLiveopsContainer {
    display: none !important;
  }

  #miniQrBtnMain {
    display: block !important;
  }

  #liveOpsCampaignBtnSide {
    display: none !important;
  }

  #confirmAdultModalBody {
    width: 100% !important;
  }

  .redXIcon {
    top: -45px !important;
    right: -48px !important;
  }

  .confirmAdultBtn {
    width: 18vh !important;
    padding: 1rem !important;
  }
}

@media only screen and (max-height: 500px) {
  .margin-top-10 {
    margin-top: 0.5vh !important;
  }

  .margin-top-20 {
    margin-top: 1vh !important;
  }

  .margin-top-30 {
    margin-top: 3vh !important;
  }

  .margin-bottom-20 {
    margin-bottom: 1.5vh !important;
  }

  .margin-bottom-40 {
    margin-bottom: 3vh !important;
  }

  .boddle-sticky-bottom {
    display: none !important;
  }

  .bb-banner {
    display: none !important;
  }

  .init-login-div {
    width: 60vw !important;
  }

  .qrCodeBtn {
    height: 65vh !important;
    width: 10vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #qrCodeBtn {
    display: none !important;
  }

  #liveOpsCampaignBtnSide {
    display: none !important;
  }

  #liveOpsCampaignBtnMain {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
  }

  #liveOpsBannerImageLinkMain {
    margin-top: auto !important;
  }

  #liveOpsBannerImageMain {
    height: 65vh !important;
    margin: auto !important;
    border-radius: 2vh !important;
  }

  #confirmAdultModalBody {
    height: 100% !important;
  }

  .confirmAdultBtn {
    padding: .5rem !important;
    width: 30% !important;
  }
}

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

  .init-login-div,.login-div,.banner-div {
    width: 100% !important;
    margin-left: 0vw !important;
    border-top-right-radius: 2vh !important;
    border-bottom-right-radius: 2vh !important;
  }

  .banner-div-heading {
    text-align: center !important;
  }

  #qrLiveopsContainer {
    display: none !important;
  }

  #liveOpsCampaignBtnSide {
    display: none !important;
  }

  .qr-login-button-div {
    display: flex !important;
    justify-content: start;
  }

  .qr-login-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .qr-button-img-div {
    width: 4% !important;
  }

  .qr-button-img {
    width: 60% !important;
  }

  .boddle-sticky-bottom {
    display: none !important;
  }

  .bb-banner {
    display: none !important;
  }

}

@media only screen and (min-width: 501px) and (max-width: 768px) {
  .init-login-div {
    width: 60% !important;
    border-top-right-radius: 2vh !important;
    border-bottom-right-radius: 2vh !important;
  }

  .login-div,.banner-div {
    width: 60% !important;
    margin-left: 20% !important;
    border-top-right-radius: 2vh !important;
    border-bottom-right-radius: 2vh !important;
  }

  .signup-text {
    font-size: 16px !important;
  }

  #qrLiveopsContainer {
   display: none !important;
  }

  .qr-scanner-div {
    width: 80vw !important;
  }

  .qr-login-button-div {
    display: flex !important;
    justify-content: start;
    /*margin-top: 1vh !important;
    margin-left: 3vw !important;*/
  }

  .qr-login-button {

  }

  .qr-button-img-div {
    width: 20% !important;
  }

  .qr-button-img {
    width: 100% !important;
  }

  .boddle-sticky-bottom {
    display: none !important;
  }

  .bb-banner {
    display: none !important;
  }

  #confirmAdultModalBody {
    height: 100% !important;
  }

  #confirmAdultModalElementContainer {
    background-position: right -48px bottom -20px !important;
    background-size: 55% !important;
  }

  .confirmAdultBtn {
    padding: .5rem !important;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .init-login-div {
    width: 45vw !important;
    /*border-top-right-radius: 2vh !important;
    border-bottom-right-radius: 2vh !important;*/
  }

  #qrLiveopsContainer {
   width: 37vw !important;
   padding-left: none !important;
   padding-right: none !important;
  }

  .qrCodeBtn {
    min-width: fit-content !important;
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #qrCodeBtn {
    display: none !important;
  }

  #liveOpsCampaignBtnSide {
    display: none !important;
  }

  #liveOpsCampaignBtnMain {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
  }

  #liveOpsBannerImageMain {
    width: 70% !important;
    margin: auto !important;
    border-radius: 2vh !important;
  }

  .qr-login-button-div {
    display: flex !important;
    justify-content: start;
  }

  .qr-login-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;
  }

  .qr-button-img-div {
    width: 4% !important;
  }

  .qr-button-img {
    width: 60% !important;
  }

  .qr-scanner-div {
    width: 80vw !important;
  }

  .resp-signup-icon {
    height: 9vh !important;
  }

  .no-account-div {
    font-size: 16px !important;
  }

  .boddle-sticky-bottom {
    display: none !important;
  }

  .bb-banner {
    width: 100%;
  }

  .bb-banner .info-text {
    font-size: small !important;
  }

  .bb-banner .link-container {
    font-size: small !important;
  }

  #confirmAdultModalBody {
    width: 100% !important;
    height: 100% !important;
  }


  #confirmAdultModalElementContainer {
    background-position: right -50px bottom -20px !important;
    background-size: 55% !important;
  }

  .redXIcon {
    top: -40px !important;
    right: -43px !important;
  }

  .confirmAdultBtn {
    width: 18vh !important;
    padding: .75rem !important;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  .init-login-div {
    width: 33.33vw !important;
  }

  #qrLiveopsContainer {
    width: 37vw !important;
    padding-left: none !important;
    padding-right: none !important;
   }

   #qrCodeBtn {
     display: none !important;
   }

   #liveOpsCampaignBtnSide {
     display: none !important;
   }

   #liveOpsCampaignBtnMain {
     display: flex !important;
     flex-direction: column !important;
     justify-content: center !important;
     align-items: center !important;
     height: 100% !important;
   }

   #liveOpsBannerImageMain {
     width: 90% !important;
     margin: auto !important;
     border-radius: 2vh !important;
   }

  .login-div {
    width: 50vw !important;
    margin-left: 25% !important;
    border-top-right-radius: 2vh !important;
    border-bottom-right-radius: 2vh !important;
  }

  .boddle-sticky-bottom {
/*    display: none !important;*/
  }

  #qrLiveopsContainer {
    width: 26.67vw !important;
  }

  #qrCodeBtn {
    width: 21.67vw;
    margin-left: auto;
    margin-right: auto;
  }


  #liveOpsCampaignBtnMain #liveOpsBlogLink {
    height: 62vh;
  }

  #liveOpsCampaignBtnMain #liveOpsBlogLink a #liveOpsImage {
    height: 60vh !important;
    min-width: 1rem !important;
    width: 100%;
    max-width: 100% !important;
  }

  .qr-scanner-div {
    width: 80vw !important;
  }

  .qr-button-img-div {
    width: 4% !important;
  }

  .qr-button-img {
    width: 60% !important;
  }

  .resp-signup-icon {
    height: 9vh !important;
  }

  .bb-banner {
    width: 100%;
  }

  #confirmAdultModalBody {
    width: 100% !important;
    height: 100% !important;
  }



  .bb-banner .link-container {
    font-size: small !important;
  }
}

.margin-top-10 {
  margin-top: 1vh;
}

.margin-top-20 {
  margin-top: 2vh;
}

.margin-top-30 {
  margin-top: 3vh;
}

.margin-top-60 {
  margin-top: 6vh;
}

.margin-bottom-20 {
  margin-bottom: 2vh;
}

.margin-bottom-40 {
  margin-bottom: 4vh;
}

.margin-bottom-60 {
  margin-bottom: 6vh;
}

.margin-top-bottom-150 {
  margin-bottom: 18vh !important;
  margin-top: 18vh !important;
}

.class-code-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: #92d2f9;
}


.padding-right-1 {
  margin-right: 0.5vh;
}

.banner-div {
  margin-top: 3vh;
  width: 33.33vw;
  margin-left: 33.33vw;
  background-color: rgb(228,91,100);
  border-radius: 1vh;
}

.banner-div-heading {
  text-align: left;
  padding: 2vh;
  font-size: 1rem;
  color: white;
}

.banner-link {
  color: yellow !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

.banner-link:hover {
  color: #2d7ff9 !important;
}

.banner-icon {
  height: 100%;
  width: 100%;
  max-height: 20vh;
  max-width: 20vh;
  padding: 1vh;
}

.login-div {
  margin-top: 1vh;
  height: 84vh;
  width: 50vw;
  margin-left: 25vw;
  background-color: white;
  border-radius: 2vh;
  padding-left: 4vh;
  padding-right: 4vh;
}

.init-login-div {
  height: 84vh;
  width: 33.33vw;
  background-color: white;
  border-top-left-radius: 2vh;
  border-bottom-left-radius: 2vh;
  padding-left: 4vh;
  padding-right: 4vh;
}

.qr-button-img-div {
  width: 5% !important;
}

#qrLiveopsContainer {
  width: 21.67vw;
  height: 84vh;
  background-color: white !important;
  border-top-right-radius: 2vh;
  border-bottom-right-radius: 2vh;
  border-left: 1px solid lightgrey;
  padding-left: 3vh;
  padding-right: 3vh;
}

.miniQrBtn {
  width: 100%;
  border-radius: 1vh !important;
  padding: 1.5vh 0vh;
  border: 1px solid #0d6efd !important;
  background-color: white;
  color:  #0d6efd !important;
  font-weight: 600;
  font-size: 2vh;
}

#miniQrBtnMain {
  display: none;
}

#liveOpsCampaignBtnMain {
  display: none;
}

#liveOpsCampaignBtnSide {
  width: 25vw;
  height: 84vh !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  margin-left: 2vh;
  border-radius: 2vh;
}

#liveOpsBannerImageLinkSide {
  height: 84vh;
}

#liveOpsBannerImageSide {
  cursor: pointer;
  height: 84vh;
  max-width: 100%;
  border-radius: 2vh;
}

#miniQrBtnSide {
  display: none;
}


#liveOpsBtn {
  width: 21.67vw;
}

#liveOpsImage {
  max-width: 100%;
  height: 60vh;
}

.watermark-logo {
  opacity: 0.5;
  position: relative;
  bottom: 30vh; /* Adjust as needed to position the watermark */
  border: 1px solid black;
}

.qrCodeBtn {
  margin-top: 7.5vh;
  border-radius: 2vh;
  height: 50vh;
  min-height: 177.5px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly !important;
  cursor: pointer;
}

.qrCodeBtnImg{
  width: 24vh;
  margin-left: auto;
  margin-right: auto;
}

.qr-button-text-div {
  border-bottom-left-radius: 2vh;
  border-bottom-right-radius: 2vh;
  font-size: 3vh !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.qr-scanner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60vw !important;
}

.no-qr-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.qr-page-image {
  width: 70%;
}

.h-auto {
  height: auto !important;
}

.login-div-heading {
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 1vh;
  font-size: 4vh;
  font-weight: 600;
}

.signup-div-heading {
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 1vh;
  font-size: 2.5vh;
  font-weight: 600;
}

.boddle-color {
  color: #2d7ff9 !important;
}

label {
  color: #2d7ff9;
  font-size: 2.5vh;
  margin-bottom: 1vh;
  margin-left: 2vh;
}

.black-label {
  color: #000000;
  font-size: 2.5vh;
  margin-left: 1vh;
  font-weight: 400;
  vertical-align: middle;
}

input {
  padding: 2.5vh !important;
  background-color: rgba(237,237,237, 0.7) !important;
  border-radius: 1.5vh !important;
  border-width: 0 !important;
  font-size: 2vh !important;
}

.kt-checkbox {
  font-size: 2vh;
  margin-top: 2vh;
}

input[type=checkbox]
{
  width: 3vh;
  height: 3vh;
  padding: 2vh;
  margin-right: 2vh;
  float: left;
}

.btn-custom {
  width: 48%;
  border-radius: 1vh !important;
  padding: 1.5vh 0vh;
  font-size: 2vh;
}

.btn-custom:hover {
  background-color: transparent !important;
  color: black !important;
  border: 0.4vh solid #2d7ff9 !important;
}

.btn-outline-custom-boddle {
  border: 0.4vh solid #2d7ff9;
}

.btn-custom-success {
  width: 48%;
  border-radius: 1vh !important;
  padding: 1.8vh 0vh;
  border: 0.3vh solid #28a745;
  background-color: #28a745;
  color: white;
  font-weight: 600;
  font-size: 2vh;
}

.btn-custom-success:hover {
  color: white !important;
}

.btn-custom-boddle {
  width: 48%;
  border-radius: 1vh !important;
  padding: 1.8vh 0vh;
  border: 0.3vh solid #2d7ff9;
  background-color: #2d7ff9;
  color: white;
  font-weight: 600;
  font-size: 2vh;
}

.btn-custom-boddle:hover {
  color: white !important;
}

.btn-custom-info {
  width: 100%;
  border-radius: 1vh !important;
  padding: 1.5vh 0vh;
  border: 0.3vh solid #17a2b8;
  background-color: #17a2b8;
  color: white;
  font-weight: 600;
  font-size: 2vh;
}

.btn-custom-info:hover {
  color: white !important;
}

.btn-transparent {
  padding: 2.5vh !important;
  background-color: rgba(237,237,237, 0.7) !important;
  border-radius: 1.5vh !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-width: 0 !important;
  font-size: 2vh !important;
  position: relative;
  right: 100%;
  z-index: 100 !important;
}

.btn-sso {
  width: 48%;
  border-radius: 1vh !important;
  padding: 1vh;
  border: none;
  background-color: #b8e2fa;
  color: #2d7ff9;
  font-weight: 500;
  font-size: 1.6vh;
}

.btn-sso-light {
  background-color: #ddf1fd !important;
}

.btn-sso:hover {
  color: #2d7ff9 !important;
}

.btn-info-long {
  width: 100%;
  border-radius: 1vh !important;
  padding: 1.7vh;
  border: none;
  background-color: #17a2b8;
  color: white;
  font-weight: 500;
  font-size: 2vh;
  margin-top: 1vh;
}

.btn-boddle {
  width: 80%;
  border-radius: 1vh !important;
  padding: 1.7vh;
  border: none;
  background-color: #2d7ff9;
  color: white;
  font-weight: 500;
  font-size: 2vh;
  margin-top: 1vh;
}

.btn-boddle-bold {
  width: 60%;
  border-radius: 1vh !important;
  padding: 1.8vh;
  border: none;
  background-color: #2d7ff9;
  color: white;
  font-weight: 600;
  font-size: 2.5vh;
  margin-top: 1vh;
}

.btn-boddle,.btn-boddle-bold,.btn-info-long:hover {
  color: white !important;
}

.btn-custom-outline {
  width: 35%;
  border-radius: 1vh !important;
  padding: 1.5vh;
  border: 0.3vh solid grey;
  background-color: white;
  color: grey;
  font-weight: 600;
  font-size: 2.5vh;
  margin-top: 1vh;
}

.btn-custom-outline:hover {
  color: grey !important;
}


.sso-icon {
  width: 4vh;
  height: 4vh;
  margin-right: 1vh;
}

.boddle-signup-icon {
  height: 11vh;
  float: right;
}

.fa-user-plus {
  font-size: 3vh;
}

.signup-btn-div {
  text-align: left;
  font-size: 2vh;
}

h5 {
  display: flex;
  flex-direction: row;
  color: lightgrey !important;
  font-size: 2vh;
  font-weight: 600;
}
h5:before, h5:after{
  content: "";
  flex: 1 1;
  border-bottom: 0.2vh solid lightgrey;
  margin: auto;
}
h5:before {
  margin-right: 3vh
}
h5:after {
  margin-left: 3vh
}

h6 {
  display: flex;
  flex-direction: row;
  color: lightgrey !important;
  font-size: 2vh;
  font-weight: 600;
}
h6:before, h6:after{
  content: "";
  flex: 1 1;
  border-bottom: 0.2vh solid lightgrey;
  margin: auto;
}
h6:before {
  margin-right: 0vh;
}
h6:after {
  margin-left: 0vh;
}

.btn-lg-thin-font {
  font-size: 3vh;
  font-weight: 400;
}

.ts-line {
  font-size: 2.5vh;
  font-weight: 600;
  color: white;
  margin-top: 2vh;
}

.username-password-line {
  font-size: 2vh;
}

.align-center {
  text-align: center !important;
}

.class-code-btn {
  cursor: pointer;
  text-align: center;
  width: 100%;
  border-radius: 1vh !important;
  padding: 3vh;
  border: 0.3vh solid grey;
  background-color: white;
  font-weight: 500;
  font-size: 3vh;
  color: black;
}

.grade-btn {
  cursor: pointer;
  text-align: center;
  width: 100%;
  border-radius: 1vh !important;
  padding: 3vh;
  border: 0.3vh solid grey;
  background-color: white;
  color: grey;
  font-weight: 600;
  font-size: 3vh;
  color: black;
  margin-top: 4.5vh;
}

.error-message {
  color: red;
  font-size: 2vh;
  font-weight: 600;
}

.error-message:empty:before {
  content: "\00a0";
}

.account-type-box {
  font-weight: 600;
  font-size: 1rem;
  color: #343a40;
  padding: 1rem;
  border: 2px solid #343a4020;
  border-radius: 20px;
  cursor: pointer;
}

.account-type-box-selected {
  border: 2px solid #2d7ff9 !important;
}

.account-type-box:hover {
  border: 2px solid #2d7ff9 !important;
}

.account-type-img-sm {
  width: 65%;
  max-width: 12vw;
}

.account-type-img-md {
  width: 100%;
  max-width: 12vw;
}

.btn-speaker {
  border-radius: 1vh !important;
  padding: 0.7vh 1.5vh;
  border: none;
  background-color: #ddf1fd;
  color: #92d2f9;
  font-weight: 500;
  font-size: 1.5vh;
  text-align: center;
  margin-right: 1vh;
}

.btn-speaker:hover {
  color: #92d2f9 !important;
}

:root {
  --move: 0;
}

#loading-body {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#html-progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: none;
  border: 0;
  pointer-events: none;
  height: 50px;
}

#loading-progress {
  position: absolute;
  bottom: 0;
  display: block;
  height: 10px;
  width: 100%;
  background-color: transparent;
  background-image: linear-gradient(132deg, #ffffff 0%, #2d7ff9 100%);
  border: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transition: width 1s ease-in;
}

.animal {
  position: absolute;
  display: block;
  top: -1.8rem;
  left: calc(var(--move) - 2rem);
  transform: scaleX(-1);
  font-size: 4rem;
  z-index: 1;
}

.row-container {
  margin: 0;
  width: 100%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
}

#payment-modal-body {
  background-size: contain;
  background-repeat: no-repeat;
}

#payment-modal-body {
  background-image: url('../html_images/Payment_Boddle_Premium.webp');
}

.no-webp .premium #payment-modal-body {
  background-image: url('../html_images/Payment_Boddle_Premium.gif');
}

.webp .bucks #payment-modal-body {
  background-image: url('../html_images/Payment_Boddle_Bucks.webp');
}

.no-webp .bucks #payment-modal-body {
  background-image: url('../html_images/Payment_Boddle_Bucks.gif');
}

.payment-plan-icon {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 40%;
  height: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.webp .payment-plan-icon {
  background-image: url('../html_images/Boddle_Buck_Icon.webp');
}

.no-webp .payment-plan-icon {
  background-image: url('../html_images/Boddle_Buck_Icon.gif');
}

.webp .payment-plan-icon.handful {
  background-image: url('../html_images/Boddle_Buck_Bundle_Handful.webp');
}

.no-webp .payment-plan-icon.handful {
  background-image: url('../html_images/Boddle_Buck_Bundle_Handful.gif');
}

.webp .payment-plan-icon.stack {
  background-image: url('../html_images/Boddle_Buck_Bundle_Stack.webp');
}

.no-webp .payment-plan-icon.stack {
  background-image: url('../html_images/Boddle_Buck_Bundle_Stack.gif');
}

.webp .payment-plan-icon.bag {
  background-image: url('../html_images/Boddle_Buck_Bundle_Bag.webp');
}

.no-webp .payment-plan-icon.bag {
  background-image: url('../html_images/Boddle_Buck_Bundle_Bag.gif');
}

.webp .payment-plan-icon.chest {
  background-image: url('../html_images/Boddle_Buck_Bundle_Chest.webp');
}

.no-webp .payment-plan-icon.chest {
  background-image: url('../html_images/Boddle_Buck_Bundle_Chest.gif');
}

.payment-close-icon {
  position: absolute;
  inset: 7% 0.3% 83% 94.2%;
}

.payment-close-icon > a {
  width: 100%;
  height: 100%;
}

.payment-back-icon {
  position: absolute;
  inset: 50% 93.7% 32% -0.8%;
}

.payment-back-icon > a {
  width: 100%;
  height: 100%;
}

.payment-modal {
  position: fixed;
  max-width: 1000px !important;
  width: 1000px;
  height: 567px;
  left: 50%;
  top: 50%;
  margin-left: -500px;
  margin-top: -325.5px;
}

.payment-modal-blocker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.payment-modal-content {
  position: relative;
  width: 87%;
  height: 87%;
  margin: 6%;
}

.payment-modal-body {
  position: relative;
  width: 100%;
  height: 100%;
}

.payment-plan-div {
  position: absolute;
  left: 8.6%;
  right: 54.5%;
  top: 37.4%;
  bottom: 27.3%;
}

.payment-email-input {
  position: absolute;
  inset: 26% 6% 68% 53%;
  padding: 0% 1% 0% 1% !important;
  font-size: 15px !important;
  background-color: white !important;
  border-radius: 0 !important;
}

.payment-name-input {
  position: absolute;
  inset: 40% 6% 54% 53%;
  padding: 0% 1% 0% 1% !important;
  font-size: 15px !important;
  background-color: white !important;
  border-radius: 0 !important;
}

.payment-card-input {
  position: absolute;
  inset: 58% 6% 34% 53%;
  padding: 0% 1% 0% 1% !important;
  display: flex;
  align-items: center;
}

.payment-card-input #cardNumberInput {
  min-width: 100% !important;
}

.payment-expiry-input {
  position: absolute;
  inset: 66% 27% 27% 53%;
  padding: 0% 1% 0% 1% !important;
  display: flex;
  align-items: center;
}

.payment-expiry-input #expiryInput {
  min-width: 100% !important;
}

.payment-cvc-input {
  position: absolute;
  inset: 66% 5% 27% 74%;
  padding: 0% 1% 0% 1% !important;
  display: flex;
  align-items: center;
}

.payment-cvc-input #cvcInput {
  min-width: 100% !important;
}

.payment-plan-div-title {
  position: absolute;
  inset: 8.3% 4.3% 67.3% 3.6%;
  padding: 6% 1% 0% 1%;
  font-size: 25px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: pre;
}

.payment-plan-div-subtitle {
  position: absolute;
  inset: 29.3% 4.3% 45.3% 3.6%;
  padding: 2% 2.2% 0% 1%;
  font-size: 25px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-plan-div-total {
  position: absolute;
  inset: 56.3% 4.3% 7.3% 3.6%;
  padding: 2% 2.5% 0% 3%;
  font-size: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-learn-more-button {
  position: absolute;
  left: 7.7%;
  right: 54.7%;
  top: 78.5%;
  bottom: 6.5%;
  display: flex;
  justify-content: center;
}

.payment-learn-more-button a img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.payment-submit-button {
  position: absolute;
  left: 51.7%;
  right: 4.7%;
  top: 80.0%;
  bottom: 9.5%;
  cursor: default;
}

.payment-submit-button a {
  width: 100%;
  height: 100%;
  cursor: default;
}

.payment-submit-button-enabled {
  background-image: url('/html_images/enabled-btn.png');
  background-size: 100%;
  background-position-y: center;
  cursor: pointer !important;
}

.payment-submit-button-enabled a {
  cursor: pointer !important;
}

.agree-tos-line {
  position: absolute;
  left: 53%;
  right: 4.7%;
  top: 92.0%;
  bottom: 9.5%;
  font-size: small;
}

.agree-tos-line span {
  width: 100%;
  height: 100%;
  display: none;
}

.agree-tos-line span a {
  font-weight: 500;
}

.premium .agree-tos-line-premium {
  display: block;
}

.bucks .agree-tos-line-bucks {
  display: block;
}

@media only screen and (max-width: 1000px) {
  .payment-modal {
    width: 100vw;
    height: 56.7vw;
    margin-left: -50vw;
    margin-top: -33.35vw;
  }

  .payment-plan-div-title {
    font-size: 2.5vw;
  }

  .payment-plan-div-subtitle {
    font-size: 2.5vw;
  }

  .payment-plan-div-total {
    font-size: 2.5vw;
    padding: 1% 2.5% 0% 3%;
  }

  .payment-email-input {
    font-size: 2vw !important;
  }
}

.boddle-sticky-bottom {
  position: absolute !important;
  bottom: 0;
  width: 62vw;
  left: 19vw;
  font-size: 13px !important;
  background: #FFFFFF !important;
}

.boddle-profile-card {
  background: #FFFFFF !important;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  /*border: 3px solid rgba(239, 155, 64, 0.70) !important;*/
}

.bdl-primary-10 {
  background-color: #F1F8FF !important;
}

#google-banner {
  border: none !important;
}

#google-banner:hover {
  background-color: #C8E4FF !important;
  cursor: pointer;
}

#googleBannerLinks a:hover {
  color: #2395FF !important;
}

.onboarding-card {
  border-radius: 10px !important;
}

.onboarding-card .card-body {
  padding: .25rem .375rem !important;
}

*:focus{
    outline: none !important;
}

.webp #black-friday-discount-tag {
    background: url('../html_images/discount_tag.webp') no-repeat 88.5% 52.5%;
    background-size: 50%;
}

.no-webp #black-friday-discount-tag {
    background: url('../html_images/discount_tag.png') no-repeat 88.5% 52.5%;
    background-size: 50%;
}

#black-friday-discount-tag {
    pointer-events: none;
    overflow: visible;;
    position: absolute;
    right: -13.5%;
    bottom: -17%;
    width: 40%;
    height: 65%;
    transform: rotate(15deg);
    animation: wobble 2.5s ease-in-out infinite;
}

@keyframes wobble {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

.bb-banner {
  background-color: #F06294;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5vh;
  cursor: pointer;
}

.bb-banner .info-text {
  color: white;
  font-family: "Grandstander";
  font-weight: 400;
  font-size: large;
  margin-left: .5rem;
}

.bb-banner .link-container {
  font-family: "Grandstander";
  font-weight: 700;
  color: #FFEE00;
  font-size: large;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  max-width: 10%;
}

.bb-banner .banner-text-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#confirmAdultModalBody {
  height: 50%;
  width: 60vw;
  border-radius: 3vh;
}

#confirmAdultModalElementContainer {
  background-image: url('../html_images/pre_payment_boddles.jpg');
  background-position: right -75px bottom -20px;
  background-size: 60%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.redXIcon {
  width: 15%;
  position: relative;
  top: -55px;
  right: -58px;
}

#confirmAdultText {
  font-weight: 600;
  width: 60%;
  font-size: 18px;
  text-align: center;
}

#confirmAdultBtnContainer {
  width: 60%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.confirmAdultBtn {
  border: none !important; width: 24vh;
  padding: 1.5rem;
  border-radius: 2vh;
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.greenGrad {
  background-image: linear-gradient(#33F51E, #259D12);
}

.redGrad {
  background-image: linear-gradient(#FF4E22, #A42D15);
}