.tio-badge-tiotips { background-color: #D9BBE6; color: #FFFFFF; }
.tio-badge-mnews { background-color: #95BEE5; color: #FFFFFF; }
.tio-badge-agm { background-color: #FFE3B5; color: #FFFFFF; }

.columnBlockLayout { margin-top: unset !important; margin-bottom: unset !important; }
.form-control::placeholder { color: #999 !important; opacity: 1; }
.control-hide { display: none !important; }

@media (max-width: 576px) {
    .offcanvas-start {
        width: 100vw !important; /* Forces full width on mobile screens like 390px */
    }
}

/* ==========================================================================
   TIO Member Portal - Global Styles
   ========================================================================== */

:root {
    /* --- Typography --- */
    --bs-font-sans-serif: Arial;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 16px; /* */
    --bs-body-line-height: 1.5; /* */
    
    /* --- Global Colors --- */
    --tio-primary-dark: #013544; /* */
    --tio-primary-active: #8DCAB8; /* */
    --tio-primary-light: #C9E9DC; /* */
    
    /* Text Colors */
    --bs-body-color: #171619; /* */
    --bs-heading-color: #033544; /* */
    --tio-breadcrumb-color: #005B9D; /* */

    /* Feedback Colors */
    --tio-success-stroke: #00745A; /* */
    --tio-error-text: #C22025; /* */
    --tio-error-bg: #FEE4E2; /* */
    
    /* Gradients */
    --tio-nav-gradient: linear-gradient(180deg, #013544 30%, #41A68A 96%);

    --text-tio-primary { color: var(--tio-primary-dark) !important; }
    --bg-tio-primary { background-color: var(--tio-primary-dark) !important; color: #ffffff !important; }
    --border-tio-primary { border-color: var(--tio-primary-dark) !important; }
}

/* ==========================================================================
   Typography Overrides
   ========================================================================== */

h1, .h1 { font-size: 32px; font-weight: 700; line-height: 1.2; } /* */
h2, .h2 { font-size: 28px; font-weight: 700; line-height: 1.3; } /* */
h3, .h3 { font-size: 24px; font-weight: 600; line-height: 1.3; } /* */
h4, .h4 { font-size: 20px; font-weight: 600; line-height: 1.4; } /* */

.text-title { font-size: 36px; font-weight: 700; line-height: 1.2; } /* */
.text-small { font-size: 14px; font-weight: 400; line-height: 1.4; } /* */
.text-caption { font-size: 12px; font-weight: 400; line-height: 1.4; } /* */

.breadcrumb a { 
    color: var(--tio-breadcrumb-color); 
    font-size: 14px; 
    letter-spacing: 0.5px; /* */
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base Button Characteristics */
.btn-tio {
    font-family: Arial, sans-serif;
    font-size: 16px; 
    font-weight: 700; 
    line-height: 1.2; 
    text-transform: uppercase; 
    border-radius: 4px; /* Assuming standard subtle rounding */
    padding: 10px 20px;
    transition: all 0.2s ease-in-out;
}

.btn-tio-submit {
    background-color: #C1ECD6; /* Mint Green */
    color: #0f5132; /* Darker green text */
    border: none;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    width: auto;
    cursor: pointer;
}

.btn-tio-submit:hover {
    background-color: #a3d9b8;
}

/* Primary Button */
.btn-tio-primary {
    background-color: #FFFFFF; 
    color: #171619; 
    border: 2px solid #00745A;
}
.btn-tio-primary:hover, 
.btn-tio-primary:focus {
    background-color: #C9E9DC; 
    color: #171619;
}

/* Primary 2 Button */
.btn-tio-primary2 {
    background-color: #FEA002; 
    color: #171619; 
    border: 2px solid #FEA002;
}
.btn-tio-primary2:hover, 
.btn-tio-primary2:focus {
    background-color: #fcc361; 
    color: #171619;
}

/* Secondary Button */
.btn-tio-secondary {
    background-color: #C9E9DC; 
    color: #171619; 
    border: 1px solid transparent; /* Prevents layout shift vs primary */
}
.btn-tio-secondary:hover, 
.btn-tio-secondary:focus {
    background-color: #8DCAB8; 
    color: #171619;
}

/* Delete/Destructive Button */
.btn-tio-delete {
    background-color: var(--tio-error-bg);
    color: var(--tio-error-text);
    border: 1px solid transparent;
}
.btn-tio-delete:hover,
.btn-tio-delete:focus {
    background-color: #fad2d0; /* Slightly darker red for hover */
    color: var(--tio-error-text);
}

/* ==========================================================================
   Badges (Categories)
   ========================================================================== */
   
.badge-tio { font-weight: 600; text-transform: uppercase; padding: 0.5em 0.75em; }

/* Event Categories  */
.bg-cat-webinars { background-color: #69387F !important; color: #FFFFFF; }
.bg-cat-member-forum { background-color: #00396E !important; color: #FFFFFF; }
.bg-cat-lets-talk { background-color: #00745A !important; color: #FFFFFF; }
.bg-cat-agm { background-color: #E07F1B !important; color: #FFFFFF; } 
.bg-cat-other { background-color: #4e4d4c !important; color: #FFFFFF; }

/* News Categories  */
.bg-cat-mnews { background-color: #95BEE5 !important; color: #FFFFFF; }
.bg-cat-tiotips { background-color: #D9BBE6 !important; color: #FFFFFF; }
.bg-cat-agm-news { background-color: #FFE3B5 !important; color: #171619; } /* Dark text for contrast on light yellow */

/* ==========================================================================
   Form UI & Overrides
   ========================================================================== */

/* Error State Overrides */
.form-control.is-invalid, 
.was-validated .form-control:invalid {
    border-color: var(--tio-error-text);
    background-color: var(--tio-error-bg);
}

/* Modal Overlay */
.modal-backdrop {
    background-color: #171718;
}
.modal-backdrop.show {
    opacity: 0.6; /* 60% opacity */
}

/* ==========================================================================
   Utility Overrides for Error/Status Pages
   ========================================================================== */
.tio-primary-icon {
    font-size: 5rem; /* Scales the Bootstrap 5 icon appropriately */
    color: var(--tio-primary-dark);
}

/* 1. Navbar Color */
.navbar.static-top {
    background-color: var(--tio-primary-dark, #013544) !important;
}

/* 2. Side Panel Gradient (Desktop) */
.sidebar-container {
    background: var(--tio-nav-gradient) !important;
    background-color: transparent !important; /* Fallback clearing */
}

/* 2. Side Panel Gradient (Mobile Offcanvas) */
/* Targets both the header and body of the mobile menu to create one seamless gradient */
.offcanvas-header.bg-dark-teal,
.offcanvas-body.bg-dark-teal {
    background: var(--tio-nav-gradient) !important;
    background-color: transparent !important;
}

/* 3. Announcement Bar Color */
/* Overrides the #005A9E hardcoded in the Announcement Bar Web Template */
/* .announcement-bar {
    background-color: #170F49 !important; 
} */

/* Custom Gradient Spinner */
.spinner-tio-gradient {
  display: inline-block;
  width: 2rem;  /* Matches standard Bootstrap spinner size */
  height: 2rem;
  border-radius: 50%;
  background: var(--tio-nav-gradient);
  
  /* CSS Masking hollows out the center to create the "ring" effect */
  /* 0.25em matches the standard Bootstrap spinner border thickness */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.25em), black 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.25em), black 0);
  
  /* Reuses Bootstrap's native spinning keyframe animation */
  animation: spinner-border .75s linear infinite; 
}


  .list-item-row { cursor: pointer; transition: transform 0.15s ease-in-out; }
  .list-item-row:hover { transform: translateX(5px); background-color: #f8f9fa !important; }
  
  /* Seamless Search Input Styles */
  .input-group-text { background: white; border-right: none; }
  #notificationSearch { border-left: none; }
  #notificationSearch:focus { box-shadow: none; border-color: #ced4da; }


  .sectionBlockLayout.py-5 {
    padding-top: 0 !important;
}
.container.my-5 {
    margin-top: 0 !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: var(--tio-primary-dark, #013544) !important;
}

.navbar-dark .navbar-nav > .dropdown > a.show .navbar-dark .navbar-nav > .dropdown > a.show:hover,
.navbar-dark .navbar-nav > .dropdown > a.show:focus {
  background-color: #FEA002 !important;
}


.table td {
    font-size: 14px;
}

ul li {
    font-size: 14px;
}