/* New CSS Start */
@import '../css/fonts.css';
*{
    box-sizing: border-box;
}
html{
    body{
        .announcement {
            &__header{
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 10px 20px;
                background: salmon;
                &--sticky{
                    position: sticky;
                    top: 0;
                    z-index: 99999 !important;
                }
                &--left{
                    justify-content: left;
                }
                &--center{
                    justify-content: center;
                }
                &--right{
                    justify-content: right;
                }
                &__icon{
                    color: currentColor !important;
                }
                &__text {
                    color: currentColor !important;
                    margin: 0;
                }
                &__link{
                    text-decoration: none;
                    border-radius: 4px;
                    // background: rgba(0,0,0,0.2) !important;
                    padding: 2px 20px;
                    height: 30px !important;
                    display: flex;
                    align-items: center;
                }
            }
            &__footer{
                position: fixed;
                bottom: 0px;
                left: 0;
                right: 0;
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 10px 20px;
                background: salmon;
                z-index: 99999 !important;
                width: 100%;
                transition: opacity 0.5s ease-in-out;
                &--hidden {
                    opacity: 0;
                }
                &--left{
                    justify-content: flex-start;
                }
                &--center{
                    justify-content: center;
                }
                &--right{
                    justify-content: flex-end;
                }
                &__icon{
                    color: currentColor !important;
                }
                &__text {
                    color: currentColor !important;
                    margin: 0;
                }
                &__link{
                    text-decoration: none;
                    border-radius: 4px;
                    // background: rgba(0,0,0,0.2) !important;
                    padding: 2px 20px;
                    height: 30px !important;
                    display: flex;
                    align-items: center;
                }
            }
            &__floating{
                position: fixed;
                bottom: 20px;
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 10px 20px;
                background: salmon;
                z-index: 99999 !important;
                border-radius: 6px;
                transition: opacity 0.5s ease-in-out;
                &--hidden {
                    opacity: 0;
                }
                &--left{
                    left: 20px;
                    max-width: 500px;
                }
                &--center{
                    max-width: 900px;
                    left: 50%;
                    transform: translateX(-50%);
                }
                &--right{
                    right: 20px;
                    max-width: 500px;
                }
                &__icon{
                    color: currentColor !important;
                }
                &__text {
                    color: currentColor !important;
                    margin: 0;
                }
                &__link{
                    text-decoration: none;
                    border-radius: 4px;
                    // background: rgba(0,0,0,0.2) !important;
                    padding: 2px 20px;
                    height: 30px !important;
                    display: flex;
                    align-items: center;
                }
            }
        }
        @media screen and (max-width:767px) {
            .font-sm-10{
                font-size: 10px;
            }
            .font-sm-12{
                font-size: 12px;
            }
            .font-sm-14{
                font-size: 14px;
            }
            .font-sm-16{
                font-size: 16px;
            }
            .font-sm-18{
                font-size: 18px;
            }
            .font-sm-20{
                font-size: 20px;
            }
            .font-sm-22{
                font-size: 22px;
            }
            .font-sm-24{
                font-size: 24px;
            }
            .font-sm-26{
                font-size: 26px;
            }
            .font-sm-28{
                font-size: 28px;
            }
            .font-sm-30{
                font-size: 30px;
            }
        }
        @media screen and (min-width:768px) {
            .font-lg-10{
                font-size: 10px;
            }
            .font-lg-12{
                font-size: 12px;
            }
            .font-lg-14{
                font-size: 14px;
            }
            .font-lg-16{
                font-size: 16px;
            }
            .font-lg-18{
                font-size: 18px;
            }
            .font-lg-20{
                font-size: 20px;
            }
            .font-lg-22{
                font-size: 22px;
            }
            .font-lg-24{
                font-size: 24px;
            }
            .font-lg-26{
                font-size: 26px;
            }
            .font-lg-28{
                font-size: 28px;
            }
            .font-lg-30{
                font-size: 30px;
            }
        }
    }
}

[class*="Alata"], [class*="Alata"] * {
    font-family: 'Alata';
  }

  [class*="Carter One"], [class*="Carter One"] * {
    font-family: 'Carter One';
  }

  [class*="Charm"], [class*="Charm"] * {
    font-family: 'Charm';
  }

  [class*="Dancing"], [class*="Dancing"] * {
    font-family: 'Dancing Script';
  }

  [class*="Lato"], [class*="Lato"] * {
    font-family: 'Lato';
  }

  [class*="Montserrat"], [class*="Montserrat"] * {
    font-family: 'Montserrat';
  }

  [class*="Noto"], [class*="Noto"] * {
    font-family: 'Noto Sans';
  }

  [class*="Open Sans"], [class*="Open Sans"] * {
    font-family: 'Open Sans';
  }

  [class*="Playfair"], [class*="Playfair"] * {
    font-family: 'Playfair 5pt SemiExpanded';
  }

  [class*="Poppins"], [class*="Poppins"] * {
    font-family: 'Poppins';
  }

  [class*="Prompt"], [class*="Prompt"] * {
    font-family: 'Prompt';
  }

  [class*="Roboto"], [class*="Roboto"] * {
    font-family: 'Roboto';
  }

  [class*="Roboto Condensed"], [class*="Roboto Condensed"] * {
    font-family: 'Roboto Condensed';
  }

  [class*="Satisfy"], [class*="Satisfy"] * {
    font-family: 'Satisfy';
  }

  [class*="Smooch Sans"], [class*="Smooch Sans"] * {
    font-family: 'Smooch Sans';
  }

  /* New CSS End */



.announcement {
    &__header,
    &__footer,
    &__floating {
        .fa,
        .fas {
            font-family: 'FontAwesome';
        }
    }
}