/* General styling for the bubble form */
.fm-bubble-form .frm-fluent-form .ff-t-container {
     display: flex !important;
     flex-direction: column !important;
     gap: 0;
}

.fm-bubble-form .fluentform .ff-el-group .ff-el-input--content {
     width: 100% !important;
}

/* Set full width for form inputs, selects, and textareas */
.fm-bubble-form .fluentform .ff-el-group .ff-el-input--content input,
.fm-bubble-form .fluentform .ff-el-group .ff-el-input--content select,
.fm-bubble-form .fluentform .ff-el-group .ff-el-input--content textarea {
     width: 100% !important;
}

/* Set specific width for checkboxes */
.fm-bubble-form .fluentform .ff-el-group .ff-el-input--content input[type=checkbox],
 .fm-bubble-form .fluentform .ff-el-group .ff-el-input--content input[type=radio] {
     width: 20px !important;
}

/* Popup content section styling */
.bubble-popup-content-section {
     margin: 0;
     position: absolute !important;
     overflow-y: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     height: 100%;
     border-radius: 30px;
     z-index: 2;
}

.flows-content-section {
     padding-left: 15px;
     padding-right: 15px;
}

/* Hide form labels 
.bubble-popup-content-section .fluentform .ff-el-input--label {
     display: none;
}*/

/* Logo section styling */
.fm-popup-logo-section {
     padding-top: 75px;
     padding-bottom: 35px;
}

/* Action button container styling */
.bubble-popup-action-btn-container {
     padding: 0 25px;
     z-index: 0;
}

/* Popup container styling */
.bubble-popup-container {
     width: 360px;
     max-width: 85vw;
     margin-right: auto;
     padding: 0px;
     border-radius: 30px;
     position: relative;
     height: 75vh;
     overflow-y: auto;
}

/* Action button styling */
.bubble-popup-action-btn-container .bubble-popup-action-btn,
.bubble-popup-section .bubble-popup-action-btn {
     padding-top: 16px;
     padding-bottom: 16px;
     display: block;
}

.bubble-popup-action-btn-container .bubble-popup-action-btn:hover,
.bubble-popup-section .bubble-popup-action-btn:hover {
     cursor: pointer;
}

/* Close button styling */
.fm-toggle-close {
     padding: 15px !important;
     border-radius: 50px !important;
     display: inline-block !important;
     z-index: 99;
     top: 10px;
     left: 10px;
     position: absolute;
}

/* Close button backdrop filter */
.fm-action-toggle-close::before {
     content: '';
     position: absolute;
     top: 0px;
     left: 0px;
     height: 70px;
     width: 100%;
     -webkit-backdrop-filter: blur(25px);
     backdrop-filter: blur(25px);
     overflow: hidden;
     display: block;
     z-index: 10;
     border-radius: 30px 30px 0 0;
}

/* Default button and submit button styling */
.bubble-popup-content-section .ff-default .ff_btn_style,
.bubble-popup-content-section .ff-btn-submit {
     padding: 0;
     width: 100%;
     border: none;
}

.bubble-popup-content-section .ff-btn-submit:hover {
     color: var(--fm-light-color) !important;
     cursor: pointer;
}

/* Title section styling */
.bubble-popup-title-section {
     overflow-y: auto;
}

.flow-action-and-description-with-img {
     padding-top: 25px;
     padding-left: 25px;
     padding-right: 25px
}

.flow-action-and-description {
     padding-top: 74px;
}

/* Announcement cards list styling */
.announcement-cards-list li {
     padding-bottom: 15px;
}

/* Announcement image styling */
.announcement-left-img img {
     object-fit: cover;
     aspect-ratio: 4 / 3;
     position: relative;
}

/* Announcement title styling */
.announcement-right-title {
     font-size: 18px;
     opacity: 0.75;
}

/* Hover effect on announcement links */
.announcement-cards-list-link:hover .announcement-right-title {
     opacity: 1;
     cursor: pointer;
}

/* Popup container styling for full screen */
.full-popup-container {
     position: absolute;
     bottom: 20px;
     right: 20px;
}

/* Toggle switch styling */
.fm-bubble-toggle-switch {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     position: absolute;
     z-index: 99;
     bottom: 0px;
     right: 0px;
}

.fm-bubble-toggle-switch:hover {
     cursor: pointer;
}

/* Toggle icon styling */
.bubble-toggle-text .fas {
     font-size: 28px;
}

/* Full bubble container styling */
.full-bubble-container {
     position: fixed;
     z-index: 99;
     bottom: 20px;
     right: 20px;
}

.steps-trigger {
     transform: rotate(-90deg);
     padding-top: 5px;
}

/* Fluent Forms in Connect Flows */
.fm-bubble-form .fluentform .ff-step-titles li.ff_active {
     color: #ffffff;
}


.fm-bubble-form .fluentform .ff-step-titles li.ff_completed,
.fm-bubble-form .fluentform .ff-step-titles li.ff_active:before {
     color: var(--fm-dark-color);
}

.fm-bubble-form .fluentform .ff-step-titles li.ff_active:before {
     background: var(--fm-accent-color);
}
.fm-bubble-form .fluentform .ff-step-titles li:after {
     background: var(--fm-light-color);
}
 
.fm-bubble-form .fluentform .ff-step-titles li.ff_completed:before,
.fm-bubble-form .fluentform .ff-step-titles li.ff_active:after,
.fm-bubble-form .fluentform .ff-step-titles li.ff_completed:after {
     background: var(--fm-accent-color);
}

.fm-bubble-form .ff-btn-prev,
.fm-bubble-form .ff-btn-next {
     padding: 10px 12px !important;
     font-size: 14px ;
     background-color: var(--fm-dark-color) !important;
     filter: brightness(1.2);
     border: none;
}

.fm-bubble-form .ff-btn-prev:hover,
.fm-bubble-form .ff-btn-next:hover {
     filter: brightness(1.4);
     cursor: pointer;
}

.bubble-popup-content {
     padding: 15px 0;
}