/* Manage Alerts Styles */

/* Modal display styles */
.modal-display-block {
  display: block;
  padding-left: 17px;
}

/* Table header styles */
.managealerts-table-header {
  --bs-table-bg: #f9f9f9;
  --bs-table-color: #666666;
}

/* Table column widths */
.managealerts-col-1 {
  width: 1%;
}

.managealerts-col-30 {
  width: 30%;
}

.managealerts-col-35 {
  width: 35%;
  word-break: break-all;
}

.managealerts-col-15 {
  width: 15%;
}

/* Number Allocations Styles */

/* Number status badge min-width */
.numalloc-status-badge {
  min-width: 21%;
}

/* Number status badge styling for tooltip */
.numalloc-status-badge .badge {
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 120px !important;
  display: inline-block !important;
}

/* Number status listing table */
.numalloc-table-mb-0 {
  margin-bottom: 0px !important;
}

/* Tag name max-width */
.numalloc-tag-name-max-width {
  max-width: calc(100% - 24px);
}

/* Edit tag input */

/* Compliance Permission Styles */
.compliance-table-mb-0 {
  margin-bottom: 0px !important;
}

.compliance-padding-initial {
  padding: initial;
}

.compliance-action-spacing {
  margin-top: 6px;
  margin-left: initial;
}

.compliance-row-word-break {
  word-break: break-all;
}

.compliance-row-spacing {
  margin-top: 8px;
  margin-bottom: 8px;
}

.compliance-col-max-width {
  max-width: 15%;
  margin: auto;
}

.compliance-trsh-margin {
  margin-left: 40px;
}

.compliance-error-text {
  color: red;
}

.compliance-download-link {
  text-decoration: underline;
  color: blue;
}

.compliance-header-col {
  max-width: 15%;
  margin-left: -28px;
}

/* Apple Data Analytics / Movius Agent Styles */
.apple-analytics-more-link {
  height: 26px;
}

.apple-analytics-search-btn{
  margin-left: -200px;
}

.apple-analytics-search-input{
  width: 431px;
}

.android-analytics-search-btn{
  margin-left: -200px;
}

.android-analytics-search-input{
  width: 431px;
}

/* MS Teams Styles */
.ms-teams-hidden {
  display: none;
}

.ms-teams-clipboard-icon {
  cursor: pointer;
}

.compliance-table-header-width {
  margin-left: -3px !important;
  width:100.5%;
}

.numalloc-edit-tag-input {
  height: 28px;
  font-size: 13px;
}

/* Icon sizes */
.numalloc-icon-14 {
  font-size: 14px;
}

.numalloc-icon-16 {
  font-size: 16px;
}

/* Save button pointer events */
.numalloc-save-btn {
  pointer-events: auto !important;
  z-index: 999;
}

.numalloc-save-btn * {
  pointer-events: auto !important;
}

/* Save button hover effect - matches cancel button */
.numalloc-save-btn:hover .fa-check-circle {
  opacity: 0.7;
}

/* Hierarchy modal max-height */
.numalloc-hierarchy-scroll {
  max-height: 316px;
  overflow: auto;
}

/* Tooltip margin */
.numalloc-tooltip-ml {
  margin-left: 5px;
}

/* Search button position */
.numalloc-search-btn-top {
  top: 3px;
}

/* Tooltip position */
.numalloc-tooltip-position {
  left: 204px;
  top: 11px;
}

/* Call forward image padding */
.numalloc-call-forward-pt {
  padding-top: 5px;
}

/* Loader button padding */
.numalloc-loader-padding {
  padding: 0 50px !important;
}

/* Vieworg breadcrumb margin */
.numalloc-breadcrumb-ml {
  margin-left: -24px;
}

/* Reset breadcrumb margin inside move modal */
.move-organization-list .numalloc-breadcrumb-ml {
  margin-left: 0;
}

/* Organization list container padding */
.move-organization-list .organizations.view {
  padding: 1rem;
}

/* Search results section padding */
#searched_org_list_section {
  padding: 1rem;
}

/* Search icon positioning inside input field */
.numalloc-search-icon-position {
  position: relative;
  width: 30px;
  height: 30px;
  left: 89%;
  top: -33px;
}

/* Vieworg list item spacing */
.numalloc-vieworg-li {
  padding: 6px 1%;
  margin: 0 0 1% 0;
}

/* Min-width 0 for flex items */
.numalloc-min-width-0 {
  min-width: 0;
}

/* Loading text for search and pagination */
.numalloc-loading-large {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}

/* Loading text for sorting */
.numalloc-loading-sort {
  text-align: center;
  padding-top: 32px;
  padding-bottom: 32px;
  font-size: 18px;
}

/* Number allocation move modal label alignment */
.numalloc-move-label-min-width {
  min-width: 80px;
}

/* Multimedia Message Styles */

/* Custom checkbox margin adjustment */
.multimedia-checkbox-mt-2px {
  margin-top: 2px;
}

/* Container padding and negative margin */
.multimedia-container-padding {
  padding: 15px;
  margin-left: -15px;
}

/* SMS Sync Styles */

/* Container padding and negative margin */
.smssync-container-padding {
  padding: 15px;
  margin-left: -15px;
}

/* Input field sizing */
.smssync-input-field {
  width: 60px;
  height: 28px;
  padding: 4px 8px;
}

/* Border states for validation */
.smssync-border-error {
  border: 1px solid #E22F2F !important;
}

.smssync-border-default {
  border: 1px solid #bbbbbb !important;
}

/* Organizations Styles */

/* Error message styling */
.orgs-error-message {
  font-size: 14px;
  color: red;
}

/* Suborgs body margin */
.orgs-suborgs-ml {
  margin-left: -10px;
}

/* Badge container padding */
.orgs-badge-container-pl {
  padding-left: 10px;
}

/* Badge custom padding */
.orgs-badge-padding {
  padding: 0.5em 0.4em !important;
}

/* Border top gray */
.orgs-border-top-gray {
  border-top: 2px solid #C0C0C0;
}

/* Modal backdrop for delete confirmation */
/* Bootstrap 5 uses CSS custom properties for backdrop styling */
/* Override the backdrop color and opacity using CSS variables */
.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Alternative: Direct override if CSS variables don't work */
.modal-backdrop.show {
  opacity: 0.5 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure fade animation doesn't override opacity */
.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.fade.show {
  opacity: 0.5 !important;
}

/* List item spacing */
.orgs-list-item-spacing {
  padding: 6px 1%;
  margin: 0 0 1% 0;
}

/* Padding bottom 60px */
.orgs-pb-60 {
  padding-bottom: 60px;
}

/* Input/textarea padding */
.orgs-input-padding {
  padding-left: 8px;
  padding-right: 30px;
}

/* Textarea no resize */
.orgs-textarea-no-resize {
  resize: none;
}

/* Flex justify end with padding */
.orgs-flex-end-pb-80 {
  justify-content: end;
  padding-bottom: 80px;
}

/* Padding left 22px */
.orgs-pl-22 {
  padding-left: 22px;
}

/* ======================================= */
/* Setup/Feature Packs/Webhooks Page Styles */
/* ======================================= */

/* Loader image */
.loaderimg-hidden {
  display: none;
}

/* Common response messages */
.users-common-res-error {
  font-size: 14px;
  color: red;
  background-color: #E22F2F;
  text-align: center;
}

.users-common-res-success {
  font-size: 14px;
  color: green;
  background: green;
  text-align: center;
}

.users-common-res-default {
  background: #ffffff;
}

/* Webhook specific styles */
.webhook-alert-padding {
  padding-right: 15px;
}

.webhook-common-res {
  font-size: 14px;
  text-align: center;
}

.webhook-table-col-25 {
  width: 25%;
}

.webhook-table-col-32 {
  width: 32%;
  word-break: break-all;
}

.webhook-table-col-11 {
  width: 11%;
}

/* Text color states */
.text-color-default {
  color: inherit;
}

.text-color-gray {
  color: gray;
}

.text-color-red {
  color: red;
}

/* Message Popup specific styles */
.popup-message-label {
  margin-left: -10px;
}

.popup-message-save-container {
  display: none;
}

/* Dashboard specific styles */
.dashboard-org-details-top {
  top: -15px;
}

.dashboard-table-full {
  width: 100%;
  padding: 3px;
  padding-top: 0px;
  margin-top: 0px;
}

.dashboard-cursor-pointer {
  cursor: pointer;
}

.dashboard-span-full {
  width: 100%;
}

.dashboard-collapse-icon {
  margin-left: 0px;
}

.dashboard-header-left-auto {
  left: auto;
}

.dashboard-job-container {
  margin-top: -15rem;
  position: relative;
  margin-left: 66% !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.dashboard-modal-padding-bottom {
  padding-bottom: 3px;
}

.dashboard-suborg-scroll {
  max-height: 316px;
  overflow: auto;
  display: grid;
}

.dashboard-loading-text {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}

/* Z-index utilities */
.z-index-9999 {
  z-index: 9999;
}

.z-index-999 {
  z-index: 999;
}

/* Position utilities */
.left-101px {
  left: 101px;
}

/* Breadcrumb specific styles */
.breadcrumb-suborg-width {
  width: 50px;
}

.breadcrumb-goto-link {
  float: right;
  font-size: 13px;
  text-decoration: underline;
}

.breadcrumb-sysmiddle {
  width: 40%;
  margin-right: 10px;
}

.breadcrumb-right-add-edit {
  display: none;
}

/* Footer specific styles */
.footer-logo-max-width {
  max-width: 200px;
}

/* EAP HelpNLogin specific styles */
.eap-logged-as-text {
  font-size: 12px;
}

.eap-no-decoration {
  text-decoration: none;
  cursor: text;
}

.eap-part-index-padding {
  padding-left: 30px;
}

.eap-loader-display {
  display: none;
}

.eap-anchor-underline {
  text-decoration: underline;
}

.eap-icon-enabled {
  color: green;
  font-size: 17px;
}

.eap-icon-disabled {
  color: red;
  font-size: 17px;
}

/* EAP Help and Login specific styles */
.eap-container-height {
  height: 66%;
}

.eap-profile-item {
  width: 90%;
  height: 25px;
  margin: 0px 0px 3px;
}

.eap-profile-span-width {
  width: 100% !important;
}

.eap-logout-item {
  width: 90%;
  height: 25px;
  margin: 0px 0px 3px;
}

.eap-notification-text {
  font-weight: 500;
  color: #333;
  margin-bottom: 0;
}

.eap-notification-subtext {
  font-weight: 400;
  color: #7A7A7A;
}

.eap-search-results {
  display: none;
}

.eap-greeting-display {
  display: none;
}

/* EAP partofindex specific styles */
.eap-topnav-float-right {
  float: right;
}

.eap-sub-login-white {
  color: #fff;
}

.eap-locale-list-no-border {
  border-bottom-style: none;
}

.eap-locale-link-no-float {
  float: none;
}

.eap-menu-arrow {
  font-weight: bold;
  color: #000;
  float: right;
  margin-top: -35px;
  margin-right: 5px;
  font-size: 8px;
}

/* Billing progress bar styles */
.billing-progress-green {
  background: #86B606 !important;
}

.billing-progress-orange {
  background: #F89C15 !important;
}

.billing-progress-red {
  background: #FF0000 !important;
}

/* Billing percentage display positioning */
.billing-peren-overflow {
  margin-left: 80%;
  direction: rtl;
  padding-left: 10px;
}

.billing-peren-overflow-call::before {
  left: 25% !important;
}

.billing-peren-overflow-sms::before {
  left: 25% !important;
}

.billing-peren-overflow-data::before {
  left: 10% !important;
}

.billing-peren-long {
  margin-left: 70%;
  direction: rtl;
}

.billing-peren-medium {
  margin-left: 55%;
}

/* Billing percentage indicator colors */
.billing-peren-green::before {
  color: #86B606 !important;
}

.billing-peren-orange::before {
  color: #F89C15 !important;
}

.billing-peren-red::before {
  color: #FF0000 !important;
}

/* Font weight utilities */
.fw-normal {
  font-weight: normal !important;
}

.fw-bold {
  font-weight: bold !important;
}

/* Background position utilities */
.bg-pos-0-0 {
  background-position: 0px 0px !important;
}

.bg-pos-neg21-0 {
  background-position: -21px 0px !important;
}

/* Border color reset */
.border-color-reset {
  border-color: initial !important;
}

/* Background color reset */
.bg-color-reset {
  background-color: transparent !important;
}

/* Loading message centered */
.loading-message-center {
  text-align: center !important;
  padding-top: 150px !important;
  font-size: 22px !important;
}

/* Hidden list item for disabled features */
.feature-hidden {
  display: none !important;
}


/* Company Profile Page Custom Styles */

/* Required field indicator */
.company-profile__required-indicator {
  color: red;
}

/* Error message styling */
.company-profile__error-message {
  font-size: 14px;
  color: red;
}

/* Mobile App Customization - General Page Custom Styles */

/* Cursor pointer utility */
.cursor-pointer {
  cursor: pointer;
}

/* Default border styling for form inputs */
.border-default {
  border: 1px solid #bbbbbb;
}

/* Warning message box - static (not dismissible like Bootstrap alerts) */
.warning-box {
  border: 1px solid transparent;
  text-align: left;
  padding: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

/* Warning message box with left margin */
.warning-box--with-margin {
  border: 1px solid transparent;
  text-align: left;
  padding: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
  margin-left: 4px;
}

/* Portal Customization - Custom Portal Page Styles */

/* Logo image styling for default logo */
.portal-logo-img {
  border: 0px solid rgb(255, 255, 255);
  width: 124px;
  height: 34px;
}

/* Logo iframe styling for custom logo upload */
.portal-logo-iframe {
  border: 0px solid rgb(255, 255, 255);
  width: 100%;
  height: 34px;
}

/* Loading message styling */
.portal-loading-message {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}

/* Meta WhatsApp Messaging Styles */
.meta-whatsapp-sync-btn {
  border-radius: 20px;
}

.meta-whatsapp-connect-btn {
  white-space: nowrap;
  border-radius: 20px;
}

.meta-whatsapp-disabled-link {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.meta-whatsapp-email-input {
  max-width: 500px;
}
/* ========================================
   Mobile App Customization Module - CSP Compliant Styles
   Namespace: .mobile-app-customization-
   ======================================== */

/* Commented-out inline styles from HTML */
.mobile-app-customization-align-center {
  text-align: center;
}

.mobile-app-customization-error-message {
  font-size: 14px;
  color: red;
  display: none;
}

/* _branding.html.erb styles */
.mobile-app-customization-iframe-height-55 {
  height: 55px;
  border: 0px;
}

.mobile-app-customization-display-none {
  display: none;
}

.mobile-app-customization-display-none-important {
  display: none !important;
}

.mobile-app-customization-display-block {
  display: block;
}

.mobile-app-customization-display-inline {
  display: inline;
}

.mobile-app-customization-bg-green {
  background: #008000;
}

.mobile-app-customization-bg-red {
  background: #E22F2F;
}

.mobile-app-customization-bg-white {
  background: #ffffff;
}

.mobile-app-customization-bg-none {
  background: none;
}

/* _customer_care.html.erb styles */
.mobile-app-customization-iframe-height-100 {
  height: 100px;
  border: 0px;
}

/* _faqs.html.erb styles */
.mobile-app-customization-help-sup-links {
  margin-left: 10px;
}

.mobile-app-customization-help-sup-links li {
  margin-top: 5px;
  padding-right: 10px;
}

.mobile-app-customization-help-ans-header a::before {
  left: 9px;
  margin-right: 10px;
}

.mobile-app-customization-help-ans-close {
  cursor: pointer;
}

.mobile-app-customization-help-ans-delete {
  cursor: pointer;
}

.mobile-app-customization-custom-text {
  margin-left: 5px;
  color: #6e6e6e;
  font-weight: normal;
  font-size: 12px;
}

.mobile-app-customization-operator-icon {
  background: none;
  margin-top: -12px;
  height: 28px;
  border: none;
}

.mobile-app-customization-view-data-usage-users {
  margin: 0 0 10px 0 !important;
}

.mobile-app-customization-edit-social-media {
  cursor: pointer;
}

.mobile-app-customization-edit-onboarding {
  cursor: pointer;
}

.mobile-app-customization-users-common-res-empty {
  padding: 0 !important;
}

.mobile-app-customization-users-common-res-onboarding-empty {
  padding: 0;
}

.mobile-app-customization-users-common-res-onboarding {
  background: #e22f2f none repeat scroll 0 0;
  color: #ffffff !important;
  float: left;
  font-family: Segoe UI;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.mobile-app-customization-users-common-res-branding-empty {
  padding: 0;
}

.mobile-app-customization-users-common-res-branding {
  background: #e22f2f none repeat scroll 0 0;
  color: #ffffff !important;
  float: left;
  font-family: Segoe UI;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.mobile-app-customization-users-common-res-faq-empty {
  padding: 0;
}

.mobile-app-customization-users-common-res-faq {
  background: green none repeat scroll 0 0;
  color: #ffffff !important;
  float: left;
  font-family: Segoe UI;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.mobile-app-customization-users-common-res {
  background: green none repeat scroll 0 0;
  color: #ffffff !important;
  float: left;
  font-family: Segoe UI;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.mobile-app-customization-users-common-res-empty {
  padding: 0;
}

.mobile-app-customization-textarea {
  border: 1px solid #bcbcbc;
  color: #818285;
  float: left;
  font-family: Segoe UI !important;
  font-size: 16px;
  margin-left: 20px;
  margin-top: 5px;
  padding: 10px;
  width: 52%;
}

.mobile-app-customization-contactinfo {
  width: 50% !important;
}

.mobile-app-customization-faq-input {
  border: 1px solid #bcbcbc;
  float: left;
  font-family: Segoe UI !important;
  font-size: 16px;
  margin-left: 20px;
  margin-top: 5px;
  padding: 10px;
  width: 52%;
}

/* org_app_branding.html.erb styles */
.mobile-app-customization-tabmiddle-new {
  background-color: #EEEEEE  !important;
  border: 1px solid #D3D3D3 !important;
}

.mobile-app-customization-social-media-links-hidden {
  display: none;
}

.mobile-app-customization-onboarding-hidden {
  display: none;
}

.mobile-app-customization-faq-hidden {
  display: none;
}

/* Dynamic color styles - for JavaScript manipulation */
.mobile-app-customization-dynamic-bg {
  /* Background color set via JavaScript */
}

.mobile-app-customization-dynamic-color {
  /* Text color set via JavaScript */
}

.mobile-app-customization-dynamic-border {
  /* Border color set via JavaScript */
}

/* _general.html.erb styles */
.mobile-app-customization-alert-danger {
  border: 1px solid transparent;
  text-align: left;
  padding: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.mobile-app-customization-alert-danger-ml {
  border: 1px solid transparent;
  text-align: left;
  padding: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
  margin-left: 4px;
}

.mobile-app-customization-cursor-pointer {
  cursor: pointer;
}

/* _branding.html.erb - color picker button styles */
.mobile-app-customization-color-picker-button {
  width: 100%;
  height: 38px;
  padding: 0;
  border: 1px solid #ced4da;
}

.mobile-app-customization-text-color-input {
  border: 1px solid #e5e5e5;
}

/* _faqs.html.erb - dropdown menu styles */
.mobile-app-customization-dropdown-min-width {
  min-width: 65.4% !important;
}

/* _branding.html.erb - dynamic color theming using CSS custom properties */
:root {
  --dynamic-text-color: #000000;
  --dynamic-border-color: #000000;
  --branding-text-color: #000000;
  --branding-background-color: transparent;
}

#styleInput2 {
  background-color: var(--dynamic-text-color) !important;
}

.text_color {
  color: var(--branding-text-color) !important;
}

.border-color {
  border: 1px solid var(--dynamic-border-color) !important;
}

/* ========================================
   Settings Module - CSP Compliant Styles
   Namespace: .settings-
   ======================================== */

/* Required field indicator */
.settings-required-indicator {
  color: red;
}

/* Error message styling */
.settings-error-message {
  font-size: 14px;
  color: red;
  text-align: center;
}

/* Border error state for validation */
.settings-border-error {
  border-color: #E22F2F !important;
}

/* Loading message for AJAX content */


/* Number allocation loading message (large) */
.numalloc-loading-large {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}
/* ======================================= */
/* Company Profile - CSP Compliant Styles */
/* ======================================= */

/* Border color states for validation */
.company-profile-border-error {
  border-color: #E22F2F !important;
}

.company-profile-border-default {
  border-color: #bcbcbc !important;
}

.company-profile-border-reset {
  border-color: initial !important;
}

/* ======================================= */
/* Manage Alerts - CSP Compliant Styles */
/* ======================================= */

/* Toggle label visibility states */
.managealerts-toggle-label-hidden {
  display: none;
}

.managealerts-toggle-label-visible {
  display: block;
}

/* ======================================= */
/* Settings List - CSP Compliant Styles */
/* ======================================= */

/* Loading spinner/message */

.settings-loading-message {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}

/* Selected/Active navigation link */
.card-body a.current {
  background-color: #D3D3D3 !important;
  padding: 5px 10px;
  display: block;
}



/* Number allocation message background colors */
.numalloc-msg-success {
  background-color: green !important;
}

.numalloc-msg-error {
  background-color: red !important;
}

/* Number allocation selected organization background */
.numalloc-org-selected {
  background-color: #D3D3D3 !important;
}

.numalloc-org-unselected {
  background-color: transparent !important;
}
/* Branding color states using CSS custom properties */
.text_color {
  color: var(--branding-text-color, inherit) !important;
}

.top_content,
.background {
  background-color: var(--branding-background-color, transparent);
}

/* Preview div height states */
.settings-preview-collapsed {
  height: 27px;
}

.settings-preview-expanded {
  height: 509px;
}

/* Invitation Templates Styles */

/* Hidden textarea for clipboard operations (CSP compliant) */
.invitation-templates-hidden-textarea {
  opacity: 0;
  position: absolute;
  left: -9999px;
}

/* ======================================= */
/* WhatsApp Messaging - CSP Compliant Styles */
/* ======================================= */

/* Facebook login button styling */
.whatsapp-facebook-login-btn {
  background-color: #a7b8cf;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  height: 40px;
  padding: 0 24px;
}

/* Flex container with center alignment */
.whatsapp-flex-center {
  display: flex;
  align-items: center;
}

/* Heading with no margin and specific padding */
.whatsapp-heading-spacing {
  margin: 0;
  padding: 8px 8px 0 8px;
}

/* Badge with left margin */
.whatsapp-badge-ml {
  margin-left: 8px;
}

/* Container with top padding only */
.whatsapp-container-pt {
  padding: 10px 0 0 0;
}

/* Label with specific padding */
.whatsapp-label-spacing {
  padding: 8px 8px 0 8px;
}

/* Small text with right padding */
.whatsapp-small-text-pr {
  padding: 8px 4px 0 0;
}

/* Vertical align middle */
.whatsapp-vertical-middle {
  vertical-align: middle;
}

/* Logo image styling */
.whatsapp-logo-img {
  float: right;
  width: 32px;
  height: 32px;
}

/* Border radius for badges/spans */
.whatsapp-badge-rounded {
  border-radius: 0.5rem;
}

/* Display states for attachments container */
.whatsapp-attachments-hidden {
  display: none;
}

.whatsapp-attachments-visible {
  display: block;
}

/* Facebook button state colors */
.whatsapp-facebook-btn-disabled {
  background-color: #a7b8cf !important;
}

.whatsapp-facebook-btn-enabled {
  background-color: #1877f2 !important;
}

/* Attachment item row styling */
.whatsapp-attachment-row {
  margin-left: 0;
  margin-right: 0;
}

.whatsapp-attachment-row-wrap {
  padding-right: 2px;
}

/* Sync section margin */
.whatsapp-sync-section-mt {
  margin-top: 15px;
}

/* Table max-height */
.whatsapp-templates-table-scroll {
  max-height: 275px;
}

/* Table column widths */
.whatsapp-table-col-35 {
  width: 35%;
}

/* ======================================= */
/* Zoom - CSP Compliant Styles */
/* ======================================= */

/* Hidden state for conditional display */
.zoom-section-hidden {
  display: none;
}


/* ========================================
   Portal Customization Module Custom CSS
   CSP Compliance - All inline styles moved here
   Prefix: portal__
   ======================================== */

/* ===== custom_portal.html.erb styles ===== */

/* Hidden file input */
.portal__file-input-hidden {
  display: none;
}

/* Default logo image */
.portal__default-logo-img {
  border: 0px solid rgb(255, 255, 255);
  width: 124px;
  height: 34px;
}

/* Upload iframe */
.portal__upload-iframe {
  border: 0px solid rgb(255, 255, 255);
  width: 100%;
  height: 34px;
}

/* Loading message */
.portal__loading-message {
  text-align: center !important;
  padding-top: 150px !important;
  font-size: 22px !important;
}

/* ===== Future portal customization styles ===== */
/* Add more portal/branding-related styles here as needed */

/* MCM Messaging Styles */

/* Table container with max height for scrolling */
.mcm-table-container {
  max-height: 275px;
}

/* Key column width in message service providers table */
.mcm-table-key-col {
  width: 35%;
}

.roles_iteams_content_body .d-flex.align-items-center.sm-margin-top {
  align-items: flex-start !important;
}
.vieworgs {
  position: relative;
  display: inline-block;
  padding-left: 20px; /* space for arrow */
}

.vieworgs.selected::before {
  position: absolute;
  left: 5px;   /* controls how close it sticks */
  top: 50%;
  transform: translateY(-50%);
}

/* Ensure checkbox label container aligns items to the start */
.roles_iteams_content_body .custom-checkbox-container.d-flex.align-items-center {
  align-items: flex-start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Position the checkbox checkmark correctly */
.roles_iteams_content_body .custom-checkbox-container .custom-checkbox-checkmark {
  position: relative !important;
  top: 0px !important;
  left: 0px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* ========================================
   Invitation Templates - NicEdit Visibility
   ======================================== */

/* NicEdit main editor visibility state */
.nicedit-main-visible {
  visibility: visible !important;
}

/* ========================================
   RTL (Right-to-Left) Language Support
   CSP-compliant approach using dir attribute
   ======================================== */

/* RTL direction support - browser will automatically handle most layout */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* ========================================
   CSP-Compliant Utility Classes
   ======================================== */

/* Center block element horizontally */
.center-block {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.no-scroll-x {
    overflow-x: hidden !important;
}