/* loading in fonts - DO NOT REMOVE. we are ok with this behaviour on the mobile app */
@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

:root {
    /* Adding some default Tiktok variables for use */

    --tt-font-size-h1: 3.5rem;       /* 56px @ 16px root */
    --tt-font-size-h2: 2.5rem;       /* 40px */
    --tt-font-size-h3: 2.25rem;      /* 36px */
    --tt-font-size-h4: 1.5rem;       /* 24px */
    --tt-font-size-h5: 1.125rem;     /* 18px */
    --tt-font-size-h6: 1rem;         /* 16px */
  
    --tt-font-size-body: 1rem;       /* 16px */
    --tt-font-size-body-sm: 0.9375rem; /* 15px */
    --tt-font-size-body-xs: 0.875rem;  /* 14px */
    --tt-font-size-body-mini: 0.6875rem; /* 11px */
  
    --tt-color-white: #FFFFFF;
    --tt-color-black: #000000;
    --tt-color-blaze: #FE2C55;
    --tt-color-glint: #2DCCD3;
    --tt-color-glow: #FBEB35;
    --tt-color-thrive: #033624;
  
    --tt-color-error: var(--tt-color-blaze);
    --tt-color-success: var(--tt-color-thrive);
    --tt-color-warning: var(--tt-color-glow);
    --tt-color-blue: var(--tt-color-glint);
  
    --tt-color-error-light: color-mix(in srgb, var(--tt-color-error) 20%, var(--tt-color-white));
    --tt-color-success-light: color-mix(in srgb, var(--tt-color-success) 20%, var(--tt-color-white));
    --tt-color-warning-light: color-mix(in srgb, var(--tt-color-warning) 30%, var(--tt-color-white));
    --tt-color-blue-light: color-mix(in srgb, var(--tt-color-blue) 20%, var(--tt-color-white));
  
    --tt-color-neutral-2: #EDEDED;
    --tt-color-text-secondary: #7C7C7C;

    --tt-line-height-text: 1.1;
    --tt-line-height-heading: 1;
    --tt-letter-spacing-base: -0.01em;
    --tt-letter-spacing-heading: -0.03em;
  }
  
  
  /* Overwriting base zoho theme vars with new tiktok ones  */
  .bs-website:not(.them-view) {
    --h1-font: var(--tt-font-size-h1) !important;
    --h2-font: var(--tt-font-size-h2) !important;
    --h3-font: var(--tt-font-size-h3) !important;
    --h4-font: var(--tt-font-size-h4) !important;
    --h5-font: var(--tt-font-size-h5) !important;
    --h6-font: var(--tt-font-size-h6) !important;
  
    --default-font: var(--tt-font-size-body) !important;
    --small-font: var(--tt-font-size-body-sm) !important;
    --tiny-font: calc(var(--tt-font-size-body-sm) * 0.9) !important;
    --mini-font: calc(var(--tt-font-size-body-sm) * 0.75) !important;
  
    --font-name: 'TikTok Sans' !important;
    --regular-font: 'TikTok Sans' !important;
    --medium-font: 'TikTok Sans' !important;
    --light-font: 'TikTok Sans' !important;
    --bold-font: 'TikTok Sans' !important;

    --menu-item-color: #ffffff;
    --menu-item-active-color: var(--tt-color-blaze)!important;

    /* removing the annoying gradient from some buttons */
    --primary-button-bg-color: var(--tt-color-blaze)!important;
  } 

/* Header Menu ------------------------------------------------------------ */
/* Remove the border around nav items in the main menu bar */
.active-bdr{
    visibility: hidden!important;
}
.bs-main-menu .main-menu.nav-active-st6 .page-links>.item:after, .bs-main-menu .main-menu.nav-active-st6 .page-links>.item:before, .bs-main-menu .main-menu.nav-active-st6 .page-links>.item>.active-bdr:after, .bs-main-menu .main-menu.nav-active-st6 .page-links>.item>.active-bdr:before {
    visibility: hidden!important;
}
/* Main menu text style */
.page-links a {
    text-transform: capitalize!important;
    font-size: var(--tt-font-size-body-sm)!important;
    font-weight: 500!important;
}
.bs-main-menu {
    box-shadow: none!important;
}



/* Title ------------------------------------------------------------ */
/* Main title heading style */
.bs-section h1 p>* {
    line-height: var(--tt-line-height-heading)!important;
    letter-spacing: var(--tt-letter-spacing-heading)!important;
}
/* LHS gap overwrite for more spacing */
.banner-widget .banner-content {
    grid-gap: 24px!important;
}
/* event started/ ended banner */
.bs-countdown.event-end, .bs-countdown.event-start {
    padding: 13px 23px!important;
    border: none!important;
    border-radius: 4px!important;
    font-weight: 500!important;
}
/* spacing on last item */
.banner-content > :last-child {
    margin-top: 32px!important;
  }


  /* [class*=uls-default-mode] {

  /* } */


  /* ------------------------------------------------------------ */

  /* Misc */

  /* remove border from video */
    .media-video iframe {
        border: none!important;
    }

/* Logo tweaks */
.bs-main-menu .item.logo .logo.bs-image, .bs-main-menu .item.logo .logo.file-upload {
    left: -12px!important;  
    top: 3px!important;
    height: 62px!important;
    max-height: 62px!important;
}


/* general  */

a.bs-button, button.bs-button {
    border-radius: 4px!important;
    letter-spacing: var(--tt-letter-spacing-base)!important;
    text-transform: none!important;
    font-weight: 500!important;
}


a.bs-button.large, button.bs-button.large {
    font-size: var(--h5-font)!important;
    padding: 10px 20px!important;
}

#ember61 .media-element.img-square{
    justify-content: flex-start!important;
    /* max-width: 240px!important; */
}


/* Counter */
.bs-countdown-wgt * {
    background-color: transparent!important;
    border: none!important;
    text-transform: none!important;
    transform: scale(1.05)!important;
}

.bs-countdown-wgt .value {
    font-weight: 600!important;
    
}
/* Base color */
:root { --countdown-rgb: 241 32 74; }
/* 1) Each digit cell fades from 30% -> 5% down the list */
.bs-countdown .values .value{
  background: rgb(var(--countdown-rgb) / var(--value-alpha, .30))!important;
  border-radius: 10px!important;
  padding-left: 0!important;
  padding-right: 0!important;
}

/* 6 digits total in your markup (2 per item × 4 items = 8 actually)
   So this covers up to 8. Adjust if needed. */
.bs-countdown .values .value:nth-child(1){ --value-alpha: .30; }
.bs-countdown .values .value:nth-child(2){ --value-alpha: .26; }

/* second item digits (because nth-child resets inside each .values)
   If you want the opacity to decrease across ALL digits globally,
   target by item index as well: */
.bs-countdown .item:nth-of-type(2) .values .value:nth-child(1){ --value-alpha: .22; }
.bs-countdown .item:nth-of-type(2) .values .value:nth-child(2){ --value-alpha: .18; }

.bs-countdown .item:nth-of-type(3) .values .value:nth-child(1){ --value-alpha: .14; }
.bs-countdown .item:nth-of-type(3) .values .value:nth-child(2){ --value-alpha: .10; }

.bs-countdown .item:nth-of-type(4) .values .value:nth-child(1){ --value-alpha: .07; }
.bs-countdown .item:nth-of-type(4) .values .value:nth-child(2){ --value-alpha: .05; }

/* 2) “Breathe” / throb the whole countdown every second */
.bs-countdown{
  animation: countdown-breathe 2s ease-in-out infinite;
  /* if the component already uses opacity for other reasons, use filter instead:
     animation: countdown-breathe-filter 1s ease-in-out infinite; */
}

@keyframes countdown-breathe{
  0%, 100% { opacity: 1; }
  50%      { opacity: .80; }
}

/* Alternative if you don't want to affect text opacity:
@keyframes countdown-breathe-filter{
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.05) brightness(1.03); }
}
*/