/**
 * Bootstrap 3 to Bootstrap 5 Compatibility Layer
 * ================================================
 * This file maps deprecated Bootstrap 3 CSS classes to their Bootstrap 5 equivalents.
 * Created during Bootstrap upgrade from v3.3.7 to v5.3.3 for VAPT compliance.
 *
 * Classes covered:
 * - Grid: col-xs-* (removed in BS4+)
 * - Visibility: visible-xs/sm/md/lg, hidden-xs/sm/md/lg
 * - Panels: panel, panel-default, panel-heading, panel-body, panel-title, panel-group, panel-collapse, panel-footer
 * - Images: img-responsive
 * - Floats: pull-left, pull-right
 * - Buttons: btn-default
 * - Wells: well, well-lg, well-sm
 * - Collapse transition: .collapse.in → .collapse.show
 * - Modal transition: .modal.in, .modal-backdrop.in, .fade.in
 * - Navbar: navbar-toggle, navbar-default, navbar-inverse
 * - Typography/helpers: center-block, hide, show
 * - Glyphicons: basic glyphicon support
 * - Carousel: .item → (compatibility)
 * - Nav tabs: li.active pattern
 */

/* ==========================================================================
   1. BS5 Grid fix - restore float-based layout
   BS5 uses flexbox by default. We need float-based columns to match BS3 layout.
   MUST come before col-xs-* definitions so column widths override .row > * width.
   ========================================================================== */

.row {
    display: block !important;
    flex-wrap: unset !important;
    margin-right: -15px;
    margin-left: -15px;
}

/* Override BS5's .row > * which sets width:100% and max-width:100% on ALL children */
.row > * {
    flex-shrink: unset !important;
    flex-grow: unset !important;
    flex-basis: unset !important;
    width: auto;
    max-width: none;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 0;
}

.row::before,
.row::after {
    display: table;
    content: " ";
}
.row::after {
    clear: both;
}

/* ==========================================================================
   2. GRID SYSTEM - col-xs-* mapping
   In Bootstrap 3, col-xs-* was the smallest breakpoint (no media query).
   In Bootstrap 5, col-* (without breakpoint) serves the same purpose.
   These MUST come after .row > * so column widths take precedence.
   ========================================================================== */

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
}

.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }

.col-xs-pull-12 { right: 100%; }
.col-xs-pull-11 { right: 91.66666667%; }
.col-xs-pull-10 { right: 83.33333333%; }
.col-xs-pull-9 { right: 75%; }
.col-xs-pull-8 { right: 66.66666667%; }
.col-xs-pull-7 { right: 58.33333333%; }
.col-xs-pull-6 { right: 50%; }
.col-xs-pull-5 { right: 41.66666667%; }
.col-xs-pull-4 { right: 33.33333333%; }
.col-xs-pull-3 { right: 25%; }
.col-xs-pull-2 { right: 16.66666667%; }
.col-xs-pull-1 { right: 8.33333333%; }
.col-xs-pull-0 { right: auto; }

.col-xs-push-12 { left: 100%; }
.col-xs-push-11 { left: 91.66666667%; }
.col-xs-push-10 { left: 83.33333333%; }
.col-xs-push-9 { left: 75%; }
.col-xs-push-8 { left: 66.66666667%; }
.col-xs-push-7 { left: 58.33333333%; }
.col-xs-push-6 { left: 50%; }
.col-xs-push-5 { left: 41.66666667%; }
.col-xs-push-4 { left: 33.33333333%; }
.col-xs-push-3 { left: 25%; }
.col-xs-push-2 { left: 16.66666667%; }
.col-xs-push-1 { left: 8.33333333%; }
.col-xs-push-0 { left: auto; }

.col-xs-offset-12 { margin-left: 100%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-0 { margin-left: 0; }

/* ==========================================================================
   3. BS5 column overrides for col-sm/md/lg (float-based layout)
   ========================================================================== */

/* Override BS5's .dropdown which adds position:relative - conflicts with custom nav */
#ddmenu .dropdown {
    position: absolute;
}
@media only screen and (max-width: 991px) {
    #ddmenu .dropdown {
        position: relative;
    }
}

/* Prevent BS5 from styling #ddmenu ul.dropdown as a dropdown-menu */
#ddmenu ul.dropdown {
    border: none !important;
    box-shadow: 0 0px 45px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    min-width: unset;
    padding: 10px;
    font-size: inherit;
}

[class*="col-lg-"],
[class*="col-md-"],
[class*="col-sm-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-3 { width: 25%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-1 { width: 8.33333333%; }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
    .col-md-12 { width: 100%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9 { width: 75%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-6 { width: 50%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-3 { width: 25%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-1 { width: 8.33333333%; }
    .col-md-offset-3 {
        margin-left: 25%;
    }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }
    .col-lg-12 { width: 100%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-9 { width: 75%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-3 { width: 25%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-1 { width: 8.33333333%; }
}

/* Container widths matching BS3 - must also override BS5's max-width */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: none;
}
@media (min-width: 768px) {
    .container { width: 750px; max-width: 750px; }
}
@media (min-width: 992px) {
    .container { width: 970px; max-width: 970px; }
}
@media (min-width: 1200px) {
    .container { width: 1170px; max-width: 1170px; }
}

/* ==========================================================================
   3. VISIBILITY CLASSES
   Bootstrap 3 visibility utilities → Bootstrap 5 display utilities
   ========================================================================== */

/* visible-xs: show only on xs (<768px) */
.visible-xs,
.visible-xs-block {
    display: none !important;
}
@media (max-width: 767px) {
    .visible-xs,
    .visible-xs-block {
        display: block !important;
    }
    table.visible-xs { display: table !important; }
    tr.visible-xs { display: table-row !important; }
    td.visible-xs, th.visible-xs { display: table-cell !important; }
}

.visible-xs-inline {
    display: none !important;
}
@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

.visible-xs-inline-block {
    display: none !important;
}
@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

/* visible-sm: show only on sm (768px - 991px) */
.visible-sm,
.visible-sm-block {
    display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm,
    .visible-sm-block {
        display: block !important;
    }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    td.visible-sm, th.visible-sm { display: table-cell !important; }
}

/* visible-md: show only on md (992px - 1199px) */
.visible-md,
.visible-md-block {
    display: none !important;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md,
    .visible-md-block {
        display: block !important;
    }
    table.visible-md { display: table !important; }
    tr.visible-md { display: table-row !important; }
    td.visible-md, th.visible-md { display: table-cell !important; }
}

/* visible-lg: show only on lg (>=1200px) */
.visible-lg,
.visible-lg-block {
    display: none !important;
}
@media (min-width: 1200px) {
    .visible-lg,
    .visible-lg-block {
        display: block !important;
    }
    table.visible-lg { display: table !important; }
    tr.visible-lg { display: table-row !important; }
    td.visible-lg, th.visible-lg { display: table-cell !important; }
}

/* hidden-xs: hide on xs (<768px) */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

/* hidden-sm: hide on sm (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

/* hidden-md: hide on md (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

/* hidden-lg: hide on lg (>=1200px) */
@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* ==========================================================================
   4. PANEL COMPONENT (BS3 → BS5 Card compatibility)
   Panels were removed in BS4. This restores panel classes.
   ========================================================================== */

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
    padding: 15px;
}

.panel-body::before,
.panel-body::after {
    display: table;
    content: " ";
}
.panel-body::after {
    clear: both;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
    color: inherit;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel-group {
    margin-bottom: 20px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}

.panel-group .panel + .panel {
    margin-top: 5px;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}

.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}

.panel-primary {
    border-color: #337ab7;
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.panel-collapse {
    /* Handled by BS5 collapse */
}

/* ==========================================================================
   5. IMAGE CLASSES
   ========================================================================== */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 6px;
}

.img-circle {
    border-radius: 50%;
}

.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .2s ease-in-out;
}

/* ==========================================================================
   6. FLOAT / POSITIONING HELPERS
   ========================================================================== */

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.hide {
    display: none !important;
}

.hidden {
    display: none !important;
}

/* SN-Section: show the hidden icon arrow only on hover */
.SideNav .SN-Section a:hover h3 span.icon.hidden {
    display: inline-block !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:focus,
.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default.disabled,
.btn-default[disabled] {
    background-color: #fff;
    border-color: #ccc;
}

/* btn-group-xs removed in BS4+ */
.btn-group-xs > .btn,
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* ==========================================================================
   8. WELL COMPONENT (removed in BS4+)
   ========================================================================== */

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well blockquote {
    border-color: #ddd;
    border-color: rgba(0, 0, 0, .15);
}

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

/* ==========================================================================
   9. COLLAPSE / MODAL / FADE TRANSITIONS
   BS3 uses .in, BS5 uses .show
   ========================================================================== */

/* .collapse.in compatibility - BS5 uses .collapse.show */
.collapse.in {
    display: block;
}

tr.collapse.in {
    display: table-row;
}

tbody.collapse.in {
    display: table-row-group;
}

/* .fade transition - BS3 fade animation */
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

/* .fade.in compatibility - BS5 uses .fade.show */
.fade.in,
.fade.show {
    opacity: 1;
}

/* .modal.in — handled in section 21 (MODAL COMPATIBILITY) */

/* .modal-backdrop.in */
.modal-backdrop.in {
    opacity: .5;
}

/* ==========================================================================
   10. NAVBAR COMPATIBILITY
   ========================================================================== */

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggle:focus {
    outline: 0;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar-default .navbar-brand {
    color: #777;
}

.navbar-default .navbar-nav > li > a {
    color: #777;
}

.navbar-default .navbar-toggle {
    border-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    border-top: 1px solid transparent;
}

@media (min-width: 768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}

/* ==========================================================================
   11. NAV TABS (BS3 active pattern)
   BS3 uses li.active, BS5 uses .nav-link.active
   ========================================================================== */

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
    text-decoration: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav > li {
    position: relative;
    display: block;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.nav > li > a:focus,
.nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.nav::before,
.nav::after {
    display: table;
    content: " ";
}
.nav::after {
    clear: both;
}

/* ==========================================================================
   12. DROPDOWN (BS3 pattern)
   BS3 uses .open class on parent, BS5 uses .show
   ========================================================================== */

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

/* ==========================================================================
   13. CLOSE BUTTON
   BS5 changed close button markup. This keeps BS3 styling working.
   ========================================================================== */

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

button.close:focus,
button.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
}

/* ==========================================================================
   14. LABEL COMPONENT (BS3)
   BS5 renamed .label to .badge. Restore BS3 .label classes.
   ========================================================================== */

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label:empty {
    display: none;
}

.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

/* ==========================================================================
   15. GLYPHICONS
   BS5 removed Glyphicons. Keep the font-face and common icons if needed.
   The font files should still exist in assets/fonts/
   ========================================================================== */

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-chevron-left:before { content: "\e079"; }
.glyphicon-chevron-right:before { content: "\e080"; }
.glyphicon-chevron-up:before { content: "\e113"; }
.glyphicon-chevron-down:before { content: "\e114"; }
.glyphicon-remove:before { content: "\e014"; }
.glyphicon-ok:before { content: "\e013"; }
.glyphicon-plus:before { content: "\002b"; }
.glyphicon-minus:before { content: "\2212"; }
.glyphicon-search:before { content: "\e003"; }
.glyphicon-envelope:before { content: "\2709"; }
.glyphicon-user:before { content: "\e008"; }
.glyphicon-star:before { content: "\e006"; }
.glyphicon-star-empty:before { content: "\e007"; }
.glyphicon-home:before { content: "\e021"; }
.glyphicon-pencil:before { content: "\270f"; }
.glyphicon-trash:before { content: "\e020"; }
.glyphicon-download:before { content: "\e026"; }
.glyphicon-upload:before { content: "\e027"; }
.glyphicon-cog:before { content: "\e019"; }
.glyphicon-calendar:before { content: "\e109"; }
.glyphicon-menu-hamburger:before { content: "\e236"; }
.glyphicon-triangle-bottom:before { content: "\e252"; }
.glyphicon-triangle-top:before { content: "\e253"; }
.glyphicon-refresh:before { content: "\e031"; }
.glyphicon-eye-open:before { content: "\e105"; }
.glyphicon-eye-close:before { content: "\e106"; }
.glyphicon-play:before { content: "\e072"; }
.glyphicon-share:before { content: "\e066"; }
.glyphicon-file:before { content: "\e022"; }

/* ==========================================================================
   16. CAROUSEL (BS3 → BS5)
   BS3 carousel uses .item, BS5 uses .carousel-item
   ========================================================================== */

.carousel-inner > .item {
    position: relative;
    display: none;
    transition: .6s ease-in-out left;
}

.carousel-inner > .item.active,
.carousel-inner > .item.next,
.carousel-inner > .item.prev {
    display: block;
}

.carousel-inner > .active {
    left: 0;
}

/* ==========================================================================
   17. FORM CONTROL SIZING (BS3 compat)
   ========================================================================== */

.input-sm,
.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.input-lg,
.form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.form-group {
    margin-bottom: 15px;
}

.control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* ==========================================================================
   18. ALERT COMPATIBILITY
   BS3 uses .alert-dismissable, BS5 uses .alert-dismissible
   ========================================================================== */

.alert-dismissable {
    padding-right: 35px;
}

.alert-dismissable .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

/* ==========================================================================
   19. PAGER (removed in BS5)
   ========================================================================== */

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

.pager li {
    display: inline;
}

.pager li > a,
.pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}

.pager li > a:focus,
.pager li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

.pager .next > a,
.pager .next > span {
    float: right;
}

.pager .previous > a,
.pager .previous > span {
    float: left;
}

/* ==========================================================================
   20. TYPOGRAPHY / MISC BS3 COMPAT
   ========================================================================== */

/* Restore BS3 link defaults - BS5 adds text-decoration:underline by default */
a {
    color: #337ab7;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #23527c;
    text-decoration: underline;
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* Restore BS3 list padding - BS5 changes to padding-left:2rem */
ol, ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Restore BS3 body defaults that BS5 changed */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

/* BS3 headings */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* BS3 paragraph margin */
p {
    margin: 0 0 10px;
}

/* Clearfix helper */
.clearfix::before,
.clearfix::after {
    display: table;
    content: " ";
}
.clearfix::after {
    clear: both;
}

/* BS3 form-control */
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/* ==========================================================================
   21. MODAL COMPATIBILITY
   Ensures BS3 modal markup works with BS5
   ========================================================================== */

.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}

/* When modal is open, allow scrolling for long content */
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}

.modal.show .modal-dialog,
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* Allow scrolling when modal is shown */
.modal.show,
.modal.in {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    max-width: none;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
        max-width: none;
    }
}

.modal-content {
    position: relative;
    display: block;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
    margin-top: -2px;
}

/* BS3 close button styling - BS5 renamed .close to .btn-close */
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Modal backdrop - BS3 style */
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-backdrop.in,
.modal-backdrop.show {
    filter: alpha(opacity=50);
    opacity: .5;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/* ==========================================================================
   22. TABLE COMPATIBILITY
   ========================================================================== */

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

/* ==========================================================================
   23. PRINT VISIBILITY (BS3)
   ========================================================================== */

.visible-print {
    display: none !important;
}

@media print {
    .visible-print {
        display: block !important;
    }
    .hidden-print {
        display: none !important;
    }
}

/* ==========================================================================
   24. BADGE COMPATIBILITY
   ========================================================================== */

.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

/* ==========================================================================
   25. CUSTOM NAVIGATION (#ddmenu) - BS5 CONFLICT FIXES
   BS5's .dropdown, list resets, and link styles interfere with the custom nav.
   ========================================================================== */

/* Ensure #ddmenu is not affected by BS5 nav styles */
#ddmenu {
    display: block;
}

/* BS5 sets display:none on .dropdown by default in some contexts - restore for #ddmenu */
#ddmenu ul {
    list-style: none;
}

/* BS5's .dropdown class adds position:relative - already overridden in section 2 */

/* Ensure #ddmenu links don't get BS5 default text-decoration */
#ddmenu a,
#ddmenu a:link,
#ddmenu a:visited {
    text-decoration: none;
}

#ddmenu a:hover,
#ddmenu a:focus {
    text-decoration: none;
}

/* Override BS5 dropdown-menu styles that might leak into #ddmenu .dropdown */
#ddmenu .dropdown {
    background-color: #fff;
    background-clip: unset;
    list-style: none;
    color: #000;
    margin: 0;
    display: none;
    top: 100%;
    z-index: 1000;
    float: none;
    text-align: left;
}

#ddmenu .over .dropdown {
    display: block;
}

/* Ensure dropdown li items display correctly */
#ddmenu .dropdown li {
    display: block;
    width: 100%;
    list-style: none;
}

/* Ensure the twocolmenu col1 divs float correctly */
#ddmenu .dropdown.twocolmenu .col1 {
    display: block;
}

/* Fix: BS5 adds padding-left: 2rem to ul - reset for #ddmenu */
#ddmenu ul,
#ddmenu ul ul {
    padding-left: 0;
}

@media only screen and (max-width: 991px) {
    /* Mobile dropdown overrides */
    #ddmenu .dropdown {
        position: relative;
        top: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        left: 0;
    }
    
    #ddmenu ul.dropdown {
        box-shadow: none;
    }
}