/* -------------------------------------------------------------------------- */
/*                              Background Colors                             */
/* -------------------------------------------------------------------------- */

.bg-blue {
    background-color: #0066ff;
}

.bg-blue-translucent {
    /* Same color as .bg-blue but translucent */
    background-color: rgba(0, 102, 255, 0.2);
}

.bg-pink {
    background-color: #CC0166;
}

.bg-pink-translucent {
    /* Same color as .bg-pink but translucent */
    background-color: rgba(204, 1, 102, 0.2);
}

.bg-green {
    background-color: #1AAE46;
}

.bg-green-translucent {
    /* Same color as .bg-green but translucent */
    background-color: rgba(26, 174, 70, 0.2);
}

.bg-yellow {
    background-color: #FFAE00;
}

.bg-red {
    background-color: #FF3737;
}

.bg-red-translucent {
    /* Same color as .bg-red but translucent */
    background-color: rgba(255, 55, 55, 0.2);
}

.bg-purple {
    background-color: #300D62;
}

/* -------------------------------------------------------------------------- */
/*                                 Text Colors                                */
/* -------------------------------------------------------------------------- */

.text-blue {
    color: #0066FF;
}

.text-pink {
    color: #CC0166;
}

.text-green {
    color: #1AAE46;
}

.text-red {
    color: #FF3737;
}

.text-purple {
    color: #300D62
}

.text-white {
    color: #FFFFFF;
}

/* -------------------------------------------------------------------------- */
/*                                Border Styles                               */
/* -------------------------------------------------------------------------- */

.border-green {
    border: 1px solid #1AAE46;
}

.border-red {
    border: 1px solid #FF3737;
}

.roundedBorders {
    border-radius: 15px;
}

/* -------------------------------------------------------------------------- */
/*                            Custom Splide Classes                           */
/* -------------------------------------------------------------------------- */

.splide p {
    font-size: 1rem;
}

/* ------------------------------ Arrow Sizing ------------------------------ */
/*         Note that sizing classes apply their own positioning rules         */

.splide.arrow-large .splide__arrow {
    width: 2.5rem;
    height: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.splide.arrow-large .splide__arrow--prev {
    left: 0;
}

.splide.arrow-large .splide__arrow--next {
    right: 0;
}

.splide.arrow-large .splide__arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.splide.arrow-large .splide__track {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Medium Devices */
@media (min-width: 768px) {
    
    .splide.arrow-large .splide__arrow {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    /* Increase spacing between the arrows */
    .splide.arrow-large .splide__arrow--prev {
        left: -2.25rem;
    }

    .splide.arrow-large .splide__arrow--next {
        right: -2.25rem;
    }
}

/* --------------------------- Arrow Color Themes --------------------------- */

.splide.arrow-gold .splide__arrow,
.splide.arrow-lilac .splide__arrow {
    transition: background-color 0.3s ease-in-out;
    opacity: 1;
    outline: none;
}

.splide.arrow-gold .splide__arrow {
    background: #cc9733 !important;
}

.splide.arrow-gold .splide__arrow:hover {
    background: #a87b29 !important;
}

.splide.arrow-lilac .splide__arrow {
    background: #b7a5cf !important;
}

.splide.arrow-lilac .splide__arrow:hover {
    background: #9681b1 !important;
}

.splide.arrow-gold .splide__arrow svg,
.splide.arrow-lilac .splide__arrow svg {
    fill: #fff;
}

/* -------------------------------------------------------------------------- */
/*                                    Misc                                    */
/* -------------------------------------------------------------------------- */

.yellowStarColor {
    color: #ffcd3c;
}