.vhtml,
body {
  height: 100% important;
  min-height: 100% !important;
  overflow-x: hidden !important;
}


#compose_new_message{
    position: fixed;
    bottom: 0;
    right: 10%;
    box-shadow: 5px 5px 5px grey;
    z-index: 999999999;
    display: none;
    margin-bottom: 0;
}

#compose_new_message .card-header{
    overflow: hidden;
    background: #01b5b8;
    color: #fff;
}
.new_message_close:hover{
  cursor: pointer;
}
button#send_message{
     border-color: #FF6275 !important;
    background-color: #FF7588 !important;
    color: #FFFFFF;
}
#topBar{
    z-index: 1;
}
.video-container {
    position: relative;
}

.play-button-overlay {
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3); /* semi-transparent overlay */
    cursor: pointer;
    z-index: 10;
}
.collapse-arrow {
    transition: transform 0.3s ease;
}
.visible{
  z-index: 1;
}

.play-button-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
}

.play-button-overlay i {
    font-size: 3em;
}
.play-button-overlay .pause-icon {
    display: none; /* Default state: hidden */
}

.play-button-overlay:hover .play-icon {
    display: none; /* Hide play icon on hover */
}

.play-button-overlay:hover .pause-icon {
    display: inline; /* Show pause icon on hover */
}
 .form-select {
    padding: .375rem .75rem;
    border-radius: .35rem 0 0 .35rem; /* Top-left, top-right, bottom-right, bottom-left */
    height: calc(1.5em + .75rem + 2px);
}

.love-btn {
    background: none; /* No background */
    color: inherit; /* Inherit text color */
    border: none; /* No border */
    padding: 0; /* Remove padding */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 24px; /* Adjust size as needed */
    transition: transform 0.2s; /* Animation for scaling effect */
}

.love-btn:hover {
    transform: scale(1.1); /* Scale effect on hover */
}
.love-btn .fa-heart {
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.love-btn.clicked .fa-heart {
    transform: scale(1.5); /* Scale the heart larger */
    color: #ED1E79;
}

#momentCarousel .carousel-inner img { width: 100%; max-height: 80vh; object-fit: contain; margin: 0 auto; /* center horizontally */ } 
.carousel-item { display: flex; justify-content: center; align-items: center; overflow-y: auto; }

/* Animation for button transformation */
.icon-transform {
    animation: transformButton 0.5s ease forwards; /* Animation for transforming the button */
    padding: 0 !important;
    font-size: 25px !important; 
}


/* Keyframes for button transformation animation */
@keyframes transformButton {
    0% {
        transform: scale(1); /* Start at normal size */
        opacity: 1; /* Fully visible */
        border-radius: 0; /* No border radius */
        background: none; /* No background */
    }
    50% {
        transform: scale(1.2); /* Scale up a bit */
        opacity: 0.5; /* Fade slightly */
    }
    100% {
        transform: scale(1); /* End at normal size */
        opacity: 1; /* Fully visible */
        border-radius: 50%; /* Make it round */
        background: none; /* No background */
    }
}
 @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        /* Apply pulse on hover */
.pulse:hover {
    animation: pulse 0.6s infinite;
}
/* Hide thumbs-up icon after transformation */
.icon-hidden {
    display: none; /* Hide the thumbs-up icon */
}

/* Particles effect */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevent particles from interfering with other elements */
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FF5733; /* Bright color for visibility */
    border-radius: 50%;
    animation: explode 0.8s ease-out forwards;
}

@keyframes explode {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(0);
    }
}








#claimOwnershipBtn{
	position: absolute;
	right: 2%;
}

 .btn-primary.pop-button {
        font-weight: bold;
        color: white;
        background: linear-gradient(45deg, #007bff, #0056b3);
        border: none;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
        transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
        animation: pop-in 0.5s ease-out;
    }
    .btn-primary.pop-button:hover {
        background: linear-gradient(45deg, #0056b3, #007bff);
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0, 123, 255, 0.6);
    }
    .btn-primary.pop-button .badge.pop-badge {
        font-size: 1rem;
        font-weight: bold;
        color: white;
        animation: pulse 1s infinite;
    }

    @keyframes pop-in {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.7;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }



    
.text_shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
    9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  //color: transparent;
  //background-color: white;
  //background-clip: text;
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}


.scroll-to-top{
    bottom: 2.5rem !important;
}
.multiselect-native-select .btn-group{
    width: 100%;
}
.private-post{
    border:  2px solid #ff758873 !important;
}

.fa-upload{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fa-upload:hover{
    cursor: pointer;
}
#uploadfile{
    display: none;
}
.topbar .dropdown-list .dropdown-header {

    background-color: #4e73df !important;
    border: 1px solid #4e73df !important;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    color: #fff !important;
    margin-top: 0 !important;
}
.profile-img-container{
    height: 100%;
    width: 104%;
    background: rgb(255,255,255,.7);
    display: none;
}

.avatar {
    width: 100px;
    height: auto;
}

/*header*/
.navbar-custom .nav li a,
.navbar-custom .navbar-brand,
.navbar-default .navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.caption,
.intro-header .page-heading,
.intro-header .site-heading,
footer .copyright {
    text-align: center
}



.intro-header .page-heading .subheading,
.intro-header .post-heading .subheading,
.intro-header .site-heading .subheading,
.navbar-custom,
.page-header,
label,
btn,
.btn,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

}

h1{
    font-weight: 700 !important;
}

p, ul li, 
.nav>li>a,
.sidebar .nav-second-level li a,
small {
    font-family: 'Muli', sans-serif !important;
}
nav li.timers a {
    padding: 0 !important;
    margin: 0 !important;
}

li.profileToggle {
    float: right;
    margin-right: 0 !important;
}

.huge {
    line-height: 40px;
}

.fc-list-item,
.fc-list-item-title,
.fc-widget-content {
    position: relative;
}

.navbar-top-links .dropdown-alerts {
    margin-left: auto !important;
}

.closeon:hover,
.editEvent:hover {
    cursor: pointer;
}

.editEvent {
    position: absolute;
    right: 40px;
    top: 5px;
}

#sleepTimerHeader,
#breastFeedTimerHeader {
    padding: 0 !important;
}


#sleepTimerHeader:hover {
    box-shadow: 1px 1px 5px #555 inset;
    background-color: #337ab7;
}

#breastFeedTimerHeader:hover {
    box-shadow: 1px 1px 5px #555 inset;
    background-color: #CB5CFF;
}

.timerButton {
    background: transparent;
    border: 0;
    padding: 15px;
}

.headerIcon {
    margin-right: 5px;
}

button#AddBreastFeed,
button#AddSleep,
button#addBottleFeed,
button#addSolidFeed,
button#addNappy {
    margin-bottom: 10px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 600;
}


.closeon,
.deleteResource {
    position: absolute;
    right: 20px;
    top: 5px;
}

.sleepTimer {
    background: #337ab7;
    display: inline-block;
    color: #fff !important;
    padding: 15px 11px !important;
}

.feedTimer {
    background: #CB5CFF;
    display: inline-block;
    color: #fff !important;
    padding: 15px 11px !important;
}

.sleepTimer>i,
.feedTimer>i {
    margin-right: 5px;
}

.nappiesOrange {
    color: #f0ad4e;
}

.sleepsBlue {
    color: #337ab7;
}

.feedGreen {
    color: #5cb85c
}

.feedRed {
    color: #d9534f
}

.feedPink {
    color: #CB5CFF;
}

.btn-green {
    background: #5cb85c !important;
     background-color: #5cb85c;
    color: #fff !important;
}

.panel-yellow>a,
.panel-yellow>a:hover {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #fff !important;
    font-weight: 500px;

}

.card, .card-heading{
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
     color: #333;
}


.card p{
    margin: 10px;
    color: #333;
    font-weight: normal;
}

a:hover {
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn-yellow,
.orangebg {
    background-color: #f0ad4e !important;
    color: #fff !important;  
}

.quickAddInfo {
    display: none;
}

.quickAddInfo button.orangebg,
#nappiesHome .panel-heading {
    background-color: #f0ad4e !important;
    border-color: #f0ad4e !important;
}

h1.page-header {
    font-size: 17px;
    margin-top: 10px;
}
/*.fc-unthemed .fc-list-heading td,
.breastfeed .fc-list-heading,
.panel-pink, .btn-pink {
    border: 1px solid #DC6482 !important;
    background: #DC6482 !important;
}*/
.panel-body{
    background: #fff;
}
.panel-pink>.panel-heading,
.btn-pink,
.fc-list-heading,
.fc-widget-header,
 {
    border-color: #DC6482;
    color: #fff !important;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    background: #DC6482 !important;
}
.fc-widget-header a {
    color: #fff;
    background: transparent;
}
.panel-pink{
    border-color: #DC6482 !important;
}

.panel-pink .panel-heading, .btn-pink{
    background: #DC6482 !important;
    color: #fff !important;

}
.panel-pink .panel-heading a{
    color: #fff !important;
}
.breastfeed .fc-list-heading, 
.breastfeed .fc-widget-header
{
    background: #DC6482 !important
}

.bottlefeedcal .fc-list-heading, 
.bottlefeedcal .fc-widget-header
{
    background: #FF0040 !important
}

.solidFeedCal .fc-list-heading, 
.solidFeedCal .fc-widget-header
{
    background: #5cb85c !important
}
.nappyCal .fc-list-heading, 
.nappyCal .fc-widget-header
{
    background: #f0ad4e !important
}


.solid .fc-list-heading, 
.bottlefeedcal .fc-widget-header
{
    background: #FF0040 !important
}

.panel-pink .panel-footer {
    color: #CB5CFF;
}

.panel-red {
    border-color: #FF0040 !important;
}

.panel-red>.panel-heading,
.btn-red {
    border-color: #FF0040 !important;
    color: #fff;
    background-color: #FF0040 !important;
}

#calendar.breastfeed .fc-view {
    border: 1px solid #DC6482;
}
.sleepsCalendar, .breastfeed, .solidFeedCal, .nappyCal{
        width: 100%;
}
.sleepsCalendar .fc-widget-header{
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
    color: #fff;
}

#navButtons {
    margin-top: 5px;
}

.hpicon {
    font-size: 3em !important;
}

.sideIntro {
    padding: 10px;
    width: 100%;
    text-align: justify;
}

footer.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    z-index: 9999;
}

footer.footer p {
    padding: 5px 0;
    margin: 0;
}

.milk_bottle {
    margin: 20px 0 0 60px;
    position: absolute;
    top: 0%;
    left: 10%;
    transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
    animation: bottlemove 1.7s ease-in-out infinite;
    -webkit-animation: bottlemove 1.7s ease-in-out infinite;
}

.milk_bottle .bottle {
    margin-left: 3px;
    width: 30px;
    height: 40px;
    background: #e8dcd8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 5px 5px 0 #65a9c1;
    position: relative;
    z-index: 4;
}

.milk_bottle .bottle:before {
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: #cdd3d7;
    position: absolute;
    top: 10px;
    left: 5px;
    animation: bottledetailmove 1.7s ease-in-out infinite;
    -webkit-animation: bottledetailmove 1.7s ease-in-out infinite;
}

.milk_bottle .bottle:after {
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: #cdd3d7;
    position: absolute;
    top: 20px;
    left: 5px;
    animation: bottledetailmove 1.7s ease-in-out infinite;
    -webkit-animation: bottledetailmove 1.7s ease-in-out infinite;
}

.milk_bottle .tube_bottom {
    width: 36px;
    height: 7px;
    background: #f3cf9f;
    border-radius: 5px;
    box-shadow: 5px 5px 0 #65a9c1;
    position: relative;
    z-index: 3;
}

.milk_bottle .tube_middle {
    margin: 0 auto;
    width: 30px;
    height: 7px;
    background: #f1b980;
    border-top-left-radius: 400%;
    border-top-right-radius: 400%;
    box-shadow: 5px 5px 0 #65a9c1;
}

.milk_bottle .tube_top {
    margin: 0 auto;
    width: 10px;
    height: 7px;
    background: #f1b980;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: 5px 5px 0 #65a9c1;
}

.fa-arrow-circle-right {
    margin-left: 10px;
}


#page-wrapper {
    background: #65a9c1;
    overflow: auto;
    height: auto;
    padding-bottom: 40px;

}

#babyDetails {
    margin-bottom: 20px;
}

.babypic {
    width: 100px;
    height: 100px;
    border-radius: 5px;
}

#success {
    display: none;
}

#sleepStop {
    display: none;
}



/*Measurements*/

.formToggleSlide{
    display: none;
}

/*sidebar*/

.activeBabyDrop {
    padding: 0 15px;
}

.sidebarSelect {
    padding: 15px;
}

/*Feedback*/
.feedback{
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    text-align: center;
}

.logged_in #map {
    height: 300px;
}


.logged_in #map img {
    width: 150px;
    height: auto;
}

.logged_in .card-img-top{
    height: 50px;
}

/** Activity Listing **/

.recurringNotice{
    background-color: #17a2b8;    
    display: inline-block;
    padding: 1em;
    font-size: 1em;
}

.ageFilter{
    clear: both;
}

.clear{
    clear: both;
}

.dayFilter label, .ageFilter label{
    margin-left: 0 !important;
}
.table-responsive{
    clear: both;
}

#mapActivity{
    position: relative;
    height: 300px;
}
/** Global **/

.w-100{
    width: 100%;
}

.ml-0 {margin-left: 0!important;}
#content {
    margin-left: 0px;
}

p.leading{
    font-size: 16px;
    font-weight: bold;
}

.hide-sidebar,
.show-sidebar {
    cursor: pointer;
}

.padd-bottom {
    margin-bottom: 5px;
}

.breadcrumb {
    margin: 0 0 0px;
    padding: 10px 0px;
    background-color: transparent;
}

.block {
    border: 1px solid #ccc;
    background: white;
    margin: 1em 0em;
    border-top: none;
}



.block-content {
    margin: 1em;
    min-height: .25em;
}

.block-header {
    margin-bottom: 0px;
    border-right: none;
    border-left: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.block-header div {
    padding-top: 10px;
}


.chart-bottom-heading {
    margin-top: 5px;
    text-align: center;
}



.mapSearch{
    background: #F5F7FA !important
}
.mapSearch #map{
    display: none;
}
.bannerImg{
    width: 150px;
    height: auto;
}

.card-img-top{

    text-align: center;

    left: 0;
}
ul.resultsListing{
    list-style: none;
    padding: 0;


}

.resultsListing .panel{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}
#mapSearch{
    margin-top: 50px;
}

/** Side Bar **/

.bs-docs-sidenav {
    max-width: 228px;
    margin: 30px 0 0;
    padding: 0;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .065);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .065);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .065);
}

.bs-docs-sidenav>li>a {
    display: block;
    width: 190px \9;
    margin: 0 0 -1px;
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
}

.bs-docs-sidenav>li:first-child>a {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bs-docs-sidenav>li:last-child>a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.bs-docs-sidenav>.active>a {
    position: relative;
    z-index: 2;
    padding: 9px 15px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .1);
}


.text-green{
    color: #28a745!important;
}
.mb-20{
    margin-bottom: 20px;
}

.m-auto{
    margin: auto;
}
.shareIcon{
    margin:3px 5px;
    width: 10%;
    vertical-align: top;
}

img.full-stretch{
    width: 100% !important; 
    height: auto !important;
}

.text-red{
    color: #dc3545;
}
.text-blue{
    color: #007bff;
}
.text-providers{
   color: #17a2b8 !important;
}
.text-yellow{
    color: #ffc107;
}
.text-info{
    color:#17a2b8!important;
}
.text-green{   
    color: #28a745!important;
}

.text-dark {
    color: #343a40!important;
}
.text-body {
    color: #212529!important;
}

.hover:hover{
    cursor: pointer;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
}

img.userprofile-comment{
    width: 50px;
    height: auto;
}


/* Mobile first (default) */
#timeline.timeline-center .timeline-item > .timeline-badge > span {
    width: 60px !important;
    height: 60px !important;
}

/* Smaller on desktop */
@media (min-width: 768px) {
    #timeline.timeline-center .timeline-item > .timeline-badge > span {
        width: 50px !important;
        height: 50px !important;
    }
}

.user-nav-counter{
    -webkit-transform: none !important;
    transform: none !important;
    right: 1.25rem !important;
    top: .1;
}

a.collapse-header{
    color: #4e73df !important;
}

.bg-register-image {
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

}

.bg-pink {
    background: rgb(237, 30, 121) !important;
}


.np{
    padding: 0 !important;
}
.calDate{
    display: block;
    text-align: center;
}
.bg-cal-red{
    background-color: #dc3545!important;
    padding: 5px;
}
.bigDay{
    font-size: 3em;
    padding-bottom: 0;
    line-height: 1em;
}
.text-white{
    color: #fff;
}
.month{
    margin-bottom: 5px;
}

.table-white{
    background-color: #fff;
}

.mt-10{
    margin-top: 10px;
}

article .accent {
    font-family: monospace;
    display: inline-block;
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
}

#myCanvas {
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; /* Instead of absolute */
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.stamp {
  transform: rotate(12deg);
    color: #555;
    font-size: 1.2rem;
    font-weight: 500;
    border: 0.25rem solid #555;
    display: inline-block;
    padding: 0.25rem 1rem;
    text-transform: uppercase;
    border-radius: 1rem;
    font-family: 'Courier';
    -webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
}

.is-nope {
  color: #D23;
  border: 0.5rem double #D23;
  transform: rotate(3deg);
    -webkit-mask-position: 2rem 3rem;
  font-size: 2rem;  
}

.is-approved {
    color: #0A9928;
    border: 0.5rem solid #0A9928;
    -webkit-mask-position: 13rem 6rem;
    transform: rotate(-14deg);
  border-radius: 0;
} 

.is-official {
    color: #ed1e79;
    border: 0.5rem solid #ed1e79;
    -webkit-mask-position: 13rem 6rem;
    transform: rotate(-14deg);

}

.is-draft {
    color: #C4C4C4;
    border: 1rem double #C4C4C4;
    transform: rotate(-5deg);
  font-size: 6rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  border-radius: 0;
  padding: 0.5rem;
} 
.bubble {
    box-sizing: border-box;
    position: relative;
    background: white;
    border-radius: 15px;
    padding: 10px;
    margin: 15px;
}

.bubble-left:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 20px;
    left: -40px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 30px solid white;
}


.bg-primary, .rand-bg-0 {
    background-color: #2AA9E3 !important; /* Primary background color */
}

.btn-primary {
    background-color: #2AA9E3 !important; /* Primary button color */
    border: 3px #000000 solid; /* Button border */
}
/* Secondary Colors */
.bg-secondary, .rand-bg-2 {
    background-color: #6C757D !important; /* Secondary background color (gray) */
}

.btn-secondary {
    background-color: #6C757D !important; /* Secondary button color (gray) */
    border: 3px #000000 solid; /* Button border */
}


/* Warning Colors */
.bg-warning, .rand-bg-5 {
    background-color: #F4C32F !important; /* Warning background color */
}

.btn-warning {
    background-color: #F4C32F !important; /* Warning button color */
    border: 3px #000000 solid; /* Button border */
}

/* Success Colors */
.bg-success, .rand-bg-1 {
    background-color: #2BD7A2 !important; /* Success background color */
}

.btn-success {
    background-color: #2BD7A2 !important; /* Success button color */
    border: 3px #000000 solid; /* Button border */
}

/* Danger Colors */
.bg-danger, .rand-bg-4 {
    background-color: #E74C3C !important; /* Danger background color (red) */
}

.btn-danger {
    background-color: #E74C3C !important; /* Danger button color (red) */
    border: 3px #000000 solid; /* Button border */
}

/* Info Colors */
.bg-info, .rand-bg-2 {
    background-color: #17A2B8 !important; /* Info background color (teal) */
}

.btn-info {
    background-color: #17A2B8 !important; /* Info button color (teal) */
    border: 3px #000000 solid; /* Button border */
}



.btn-outline-success {
    color: #000 !important; /* Softer black text color */
    border: 3px #2BD7A2 solid !important; /* Border color */
    background-color: transparent; /* Transparent background */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.btn-outline-success:hover {
    background-color: #2BD7A2 !important; /* Background color on hover */
    color: #fff !important; /* White text color on hover for contrast */
}
.btn-outline-primary {
    color: #333333 !important; /* Softer black text color */
    border: 3px #2AA9E3 solid !important; /* Border color matching the primary theme */
    background-color: transparent; /* Transparent background */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.btn-outline-primary:hover {
    background-color: #2AA9E3 important;
    color: #fff !important; /* White text color on hover for contrast */
}