/* ==========================================================================
   WorldMeetings Shared Utility Classes
   One-to-one replacements for common inline-style patterns.
   Load after Bootstrap and before project-specific CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button reset (icon-only / invisible button pattern)
   -------------------------------------------------------------------------- */
.btn-icon {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   color: inherit;
}

/* --------------------------------------------------------------------------
   Font-size utilities (rem-based, accessible)
   -------------------------------------------------------------------------- */
.fs-xs {
   font-size: 0.75rem !important;
}

.fs-small-2x {
   font-size: 0.765rem !important;
}

/* 12px */
.fs-sm {
   font-size: 0.875rem !important;
}

/* 14px */
.fs-xxs {
   font-size: 0.6875rem !important;
}

/* 11px */
.fw-medium {
   font-weight: 550 !important;
}

/* --------------------------------------------------------------------------
   Form & input utilities
   -------------------------------------------------------------------------- */
.wm-input-lg {
   height: 4rem;
}

/* --------------------------------------------------------------------------
   Divider / separator utilities
   -------------------------------------------------------------------------- */
.wm-hr-dashed {
   border-top: 2px dashed #ffffff;
}

.wm-hr-faded {
   background-color: #21252930 !important;
}

/* --------------------------------------------------------------------------
   Card & table utilities
   -------------------------------------------------------------------------- */
.wm-summary-card {
   background-color: #e9f1e929;
}

.wm-table-header {
   color: var(--wm-primary);
}

.wm-table-header-color {
   color: var(--wm-color-header);
}

/* --------------------------------------------------------------------------
   Button & action utilities
   -------------------------------------------------------------------------- */
.wm-btn-clean {
   text-decoration: none;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
}

/* --------------------------------------------------------------------------
   Empty-state utilities
   -------------------------------------------------------------------------- */
.wm-empty-icon {
   width: 50px;
   height: 50px;
}

.wm-empty-text {
   max-width: 400px;
}

/* --------------------------------------------------------------------------
   Scroll & overflow utilities
   -------------------------------------------------------------------------- */
.wm-scrollable {
   max-height: 70vh;
   overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Textarea utilities
   -------------------------------------------------------------------------- */
.wm-textarea {
   min-height: 123px;
}

/* --------------------------------------------------------------------------
   Background utilities
   -------------------------------------------------------------------------- */
.bg-white {
   background-color: #fff !important;
}
.border-bottom-custom-1 {
    border-bottom: 1px solid #dee2e638 !important;
}
.wm-bg-danger {
    background-color: #fcebeb;
    color: #902C36;
}
.wm-bg-success {
    background-color: #e2f4ed;
    color: #0D380A;
}

/* --------------------------------------------------------------------------
   Search utilities
   -------------------------------------------------------------------------- */
.wm-search-filter {
    width: 32%;
    min-width: 260px;
}

.wm-date-filter {
    width: 20%;
    min-width: 220px;
}
.wm-category-filter {
    width: 14%;
    min-width: 150px;
}
.wm-status-filter {
    width: 14%;
    min-width: 150px;
}
/* --------------------------------------------------------------------------
   Semantic badge utilities (token-driven)
   -------------------------------------------------------------------------- */
.badge-open {
   background-color: var(--wm-success-bg);
   color: var(--wm-success-text);
}

.badge-closed {
   background-color: var(--wm-surface);
   color: #4A4F54;
}

.badge-warning {
   background-color: var(--wm-warning-bg);
   color: var(--wm-warning-text);
}

.badge-danger {
   background-color: var(--wm-danger-bg);
   color: var(--wm-danger-text);
}

.badge-info {
   background-color: var(--wm-info-bg);
   color: var(--wm-info-text);
}

/* --------------------------------------------------------------------------
   Dropdown utilities
   -------------------------------------------------------------------------- */
.dropdown-min-w-8 {
   --cui-dropdown-min-width: 8rem;
}

/* --------------------------------------------------------------------------
   Height & z-index utilities
   -------------------------------------------------------------------------- */
.max-h-25rem {
   max-height: 25rem;
}

.max-h-400 {
   max-height: 400px;
}

.h-365px {
   min-height: 365px;
   max-height: 365px;
}

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

.min-h-60rem {
   min-height: 60rem;
}

.min-vh-75{
    min-height: 75.5rem;
}

.min-vh-38{
    min-height: 38vh;
}

.min-vh-40{
    min-height: 40vh;
}

.max-h-68rem {
   max-height: 68rem;
}

.max-h-main-chat {
    height: calc(100vh - 15.5rem);
}

.w-36 {
    width: 36%;
}

.w-65rem {
    width: 65rem;
}

.h-34px{
    height: 34px;
}

.ps-2-4 {
    padding-left: 2.4rem;
}

.rounded-16px {
    border-radius: 16px;
}

.w-320px {
    width: 320px;
}

.top-minus-4 {
    top: -4px !important;
}

.map-height-86 {
    height: 86.6vh;
}

.offcanvas.offcanvas-bottom.map-view-offcanvas {
    height: 93vh;
}

.h-35 {
    height: 35px;
}
.h-31 {
    height: 31px;
}

.w-min-292{
    min-width: 292px;
}

.min-h-120 {
    min-height: 120px;
}
/* --------------------------------------------------------------------------
   Animation utilities
   -------------------------------------------------------------------------- */
.shake {
    animation: shake 0.2s;
}

@keyframes shake {
   0% {
      transform: translateX(0);
   }

   25% {
      transform: translateX(-2px);
   }

   50% {
      transform: translateX(2px);
   }

   75% {
      transform: translateX(-2px);
   }

   100% {
      transform: translateX(0);
   }
}

/* --------------------------------------------------------------------------
   NexSys / LocationManagement inline-style replacements
   -------------------------------------------------------------------------- */

/* Dashboard icon positioning */
.dash-icon-pos {
   position: absolute;
   top: -.5rem;
   right: 1rem;
}

.dash-icon-pos-sm {
   position: absolute;
   top: -.3rem;
   right: .5rem;
}

.dash-icon-pos-xs {
   position: absolute;
   top: -.5rem;
   right: .2rem;
}

/* Tree-view indent */
.tree-indent {
   padding-left: 2rem;
}

/* Chat bubble */
.chat-bubble {
   width: 45%;
}

/* Chat messages container */
.chat-messages {
   height: 300px;
   max-height: 350px;
}

/* Photo list actions overlay */
.photo-actions {
   position: absolute;
   top: 10px;
   right: 10px;
}

/* Min-height utilities */
.min-h-300 {
   min-height: 300px;
}

.min-h-screen-2 {
   min-height: calc(100vh - 2rem);
}

.min-h-50vh {
   min-height: 50vh;
}

/* Progress bar thin variant */
.progress-thin {
   height: 6px;
}

/* Width utilities */
.w-5rem {
   width: 5rem;
}

.w-60px {
   width: 60px;
}

.w-92 {
   width: 92%;
}

.w-86 {
   width: 86%;
}

.w-80 {
   width: 80%;
}

.w-45 {
   width: 45%;
}

.width-fit-content{
    width: fit-content;
}
/* Max-height & overflow */
.max-h-300 {
   max-height: 300px;
}

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

/* --------------------------------------------------------------------------
   Modal utilities
   -------------------------------------------------------------------------- */
.modal-height-90vh {
   height: 90vh;
   margin: 5vh auto;
}

/* --------------------------------------------------------------------------
   Inline-style replacement utilities (audit-driven additions)
   -------------------------------------------------------------------------- */

/* Font size 0.85em — used for price multiplier annotations */
.fs-085 {
   font-size: 0.85em !important;
}

.fs-10 {
    font-size: 10px !important;
}
/* Height: fit-content — used for city name badges */
.h-fit {
   height: fit-content !important;
}

/* Rounded bottom corners (tabs/nav) */
.wm-rounded-bottom-11 {
   border-bottom-left-radius: 11px !important;
   border-bottom-right-radius: 11px !important;
}

/* Tab nav padding */
.wm-nav-padded {
   padding: 0.5rem 1rem;
}

/* Large decorative icon (FAQ section) */
.wm-deco-icon-lg {
   font-size: 9rem;
   right: 5px;
   bottom: -23px;
   z-index: 0;
   color: #d3d3d336;
}

/* Z-index level 1 */
.z-1 {
   z-index: 1;
}

/* List item header padding override */
.wm-list-item-padded {
   padding: 1rem !important;
}

/* Dropdown scrollable */
.wm-dropdown-scroll {
   max-height: 300px;
   overflow: auto;
}

/* Spinner alignment */
.wm-spinner-align {
   margin-top: 2px;
}

/* Font weight semi-medium (410) */
.fw-semi-medium {
   font-weight: 410 !important;
}

/* --------------------------------------------------------------------------
   Margin utilities
   -------------------------------------------------------------------------- */
.mb-2px{
    margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Padding utilities
   -------------------------------------------------------------------------- */

.p-2rem {
    padding: 2rem;
}

.px-2rem {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-2rem {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

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

/* --------------------------------------------------------------------------
   Postion utilities
   -------------------------------------------------------------------------- */
.opacity-10{
    opacity: 10%;
}

/* --------------------------------------------------------------------------
   Razor inline-style audit replacements
   -------------------------------------------------------------------------- */
.wm-js-hidden {
   display: none;
}

.wm-search-results-200 {
   z-index: 1000;
   max-height: 200px;
   overflow-y: auto;
   display: none;
}

.wm-search-results-16rem {
   max-height: 16rem;
   display: none;
}

.wm-lookup-results {
   z-index: var(--bs-dropdown-zindex, 1000);
   max-height: min(25rem, 40vh);
}

.wm-lookup-results:empty,
.wm-lookup:not(:focus-within) > .wm-lookup-results {
   display: none;
}

.wm-thumbnail-192x128 {
   width: 192px;
   height: 128px;
   object-fit: cover;
}

.wm-icon-tile-42 {
   width: 42px;
   height: 42px;
}

.fs-micro {
   font-size: 0.65rem !important;
}

.fs-tiny {
   font-size: 0.70rem !important;
}

.fs-nano {
   font-size: 0.60rem !important;
}

.fs-badge {
   font-size: 0.85rem !important;
}

.fs-icon-lg {
   font-size: 1.2rem !important;
}

.lh-tight {
   line-height: 1.2 !important;
}

.wm-col-w-4-5 { width: 4.5%; }
.wm-col-w-6 { width: 6%; }
.wm-col-w-7 { width: 7%; }
.wm-col-w-7-5 { width: 7.5%; }
.wm-col-w-8 { width: 8%; }
.wm-col-w-9 { width: 9%; }
.wm-col-w-10 { width: 10%; }
.wm-col-w-17 { width: 17%; }
.wm-col-w-18 { width: 18%; }
.wm-col-w-20 { width: 20%; }
.wm-col-w-22 { width: 22%; }

/* Bar widths in whole percent, for values known only when the page renders (progress bars). */
.wm-bar-w-0 { width: 0%; }
.wm-bar-w-1 { width: 1%; }
.wm-bar-w-2 { width: 2%; }
.wm-bar-w-3 { width: 3%; }
.wm-bar-w-4 { width: 4%; }
.wm-bar-w-5 { width: 5%; }
.wm-bar-w-6 { width: 6%; }
.wm-bar-w-7 { width: 7%; }
.wm-bar-w-8 { width: 8%; }
.wm-bar-w-9 { width: 9%; }
.wm-bar-w-10 { width: 10%; }
.wm-bar-w-11 { width: 11%; }
.wm-bar-w-12 { width: 12%; }
.wm-bar-w-13 { width: 13%; }
.wm-bar-w-14 { width: 14%; }
.wm-bar-w-15 { width: 15%; }
.wm-bar-w-16 { width: 16%; }
.wm-bar-w-17 { width: 17%; }
.wm-bar-w-18 { width: 18%; }
.wm-bar-w-19 { width: 19%; }
.wm-bar-w-20 { width: 20%; }
.wm-bar-w-21 { width: 21%; }
.wm-bar-w-22 { width: 22%; }
.wm-bar-w-23 { width: 23%; }
.wm-bar-w-24 { width: 24%; }
.wm-bar-w-25 { width: 25%; }
.wm-bar-w-26 { width: 26%; }
.wm-bar-w-27 { width: 27%; }
.wm-bar-w-28 { width: 28%; }
.wm-bar-w-29 { width: 29%; }
.wm-bar-w-30 { width: 30%; }
.wm-bar-w-31 { width: 31%; }
.wm-bar-w-32 { width: 32%; }
.wm-bar-w-33 { width: 33%; }
.wm-bar-w-34 { width: 34%; }
.wm-bar-w-35 { width: 35%; }
.wm-bar-w-36 { width: 36%; }
.wm-bar-w-37 { width: 37%; }
.wm-bar-w-38 { width: 38%; }
.wm-bar-w-39 { width: 39%; }
.wm-bar-w-40 { width: 40%; }
.wm-bar-w-41 { width: 41%; }
.wm-bar-w-42 { width: 42%; }
.wm-bar-w-43 { width: 43%; }
.wm-bar-w-44 { width: 44%; }
.wm-bar-w-45 { width: 45%; }
.wm-bar-w-46 { width: 46%; }
.wm-bar-w-47 { width: 47%; }
.wm-bar-w-48 { width: 48%; }
.wm-bar-w-49 { width: 49%; }
.wm-bar-w-50 { width: 50%; }
.wm-bar-w-51 { width: 51%; }
.wm-bar-w-52 { width: 52%; }
.wm-bar-w-53 { width: 53%; }
.wm-bar-w-54 { width: 54%; }
.wm-bar-w-55 { width: 55%; }
.wm-bar-w-56 { width: 56%; }
.wm-bar-w-57 { width: 57%; }
.wm-bar-w-58 { width: 58%; }
.wm-bar-w-59 { width: 59%; }
.wm-bar-w-60 { width: 60%; }
.wm-bar-w-61 { width: 61%; }
.wm-bar-w-62 { width: 62%; }
.wm-bar-w-63 { width: 63%; }
.wm-bar-w-64 { width: 64%; }
.wm-bar-w-65 { width: 65%; }
.wm-bar-w-66 { width: 66%; }
.wm-bar-w-67 { width: 67%; }
.wm-bar-w-68 { width: 68%; }
.wm-bar-w-69 { width: 69%; }
.wm-bar-w-70 { width: 70%; }
.wm-bar-w-71 { width: 71%; }
.wm-bar-w-72 { width: 72%; }
.wm-bar-w-73 { width: 73%; }
.wm-bar-w-74 { width: 74%; }
.wm-bar-w-75 { width: 75%; }
.wm-bar-w-76 { width: 76%; }
.wm-bar-w-77 { width: 77%; }
.wm-bar-w-78 { width: 78%; }
.wm-bar-w-79 { width: 79%; }
.wm-bar-w-80 { width: 80%; }
.wm-bar-w-81 { width: 81%; }
.wm-bar-w-82 { width: 82%; }
.wm-bar-w-83 { width: 83%; }
.wm-bar-w-84 { width: 84%; }
.wm-bar-w-85 { width: 85%; }
.wm-bar-w-86 { width: 86%; }
.wm-bar-w-87 { width: 87%; }
.wm-bar-w-88 { width: 88%; }
.wm-bar-w-89 { width: 89%; }
.wm-bar-w-90 { width: 90%; }
.wm-bar-w-91 { width: 91%; }
.wm-bar-w-92 { width: 92%; }
.wm-bar-w-93 { width: 93%; }
.wm-bar-w-94 { width: 94%; }
.wm-bar-w-95 { width: 95%; }
.wm-bar-w-96 { width: 96%; }
.wm-bar-w-97 { width: 97%; }
.wm-bar-w-98 { width: 98%; }
.wm-bar-w-99 { width: 99%; }
.wm-bar-w-100 { width: 100%; }

/* Searchable select: a dropdown panel with a search box, layered over a native <select> that keeps form posting and validation. */
.wm-select-search { position: relative; }
.wm-select-search-native { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; pointer-events: none; }
.wm-select-search-toggle { text-align: left; }
.wm-select-search-panel { position: absolute; z-index: 1050; top: 100%; left: 0; right: 0; margin-top: .25rem; padding: .5rem; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow); }
.wm-select-search-panel[hidden] { display: none; }
.wm-select-search-list { max-height: 15rem; overflow-y: auto; margin-top: .5rem; }

.wm-mh-38em { min-height: 3.8em; }
.wm-mh-2p2em { min-height: 2.2em; }