/* 1. Global Styles */
html, body {
    height: 100%;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    border: 0;
    outline: 0;
    background: 0 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: none;
}

#content {
    position: relative;
}

/* 2. Centering Elements */
.center-block {
    display: block;
    margin-left: auto; /* Alternatively, use margin-inline: auto; for logical properties */
    margin-right: auto;
}

.centered {
    text-align: center;
}

/* 3. Canvas Styles */
canvas {
    padding: 0px;
    margin: 0px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 4. UI Slider Range */
.ui-slider-range {
    background: rgba(38,201,255,0.7);
}

/* 5. Headings */
h3 {
    padding-inline-start: 10px; /* Replaces padding-left: 10px; */
}

/* 6. Scrollable Div */
.scrollDiv {
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 10px;
}

/* 7. Agent Table */
.agentTable tr td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* 8. Render Engine */
.renderEngine {
    border: solid 1px #ccc;
}

/* 9. Modal Open Body */
body.modal-open {
    overflow: hidden;
}

/* 10. ScrollDiv Buttons */
.scrollDiv div button {
    margin: 1px;
    padding: 4px;
}

/* 11. Alert Container */
#alertcontainer {
    visibility: hidden;
    margin: auto;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    z-index: 2;
    top: calc(50% - 50px);
    inset-inline-start: 0; /* Replaces left: 0; */
    inset-inline-end: 0; /* Replaces right: 0; */
    width: 300px;
    content-visibility: auto;
}

    #alertcontainer.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

/* 12. Active Dropdown Items */
.active .dropdown-item {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

/* 13. Word Break */
.wordbreak {
    word-break: break-word;
}

/* 14. Font Awesome Size Adjustments */
.fa-xs {
    font-size: .75em !important;
}

.fa-sm {
    font-size: .875em !important;
}

/* 15. Wrapper Flexbox */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* 16. Sidebar Positioning */
#sidebar {
    position: absolute;
    z-index: 200;
    visibility: hidden;
    display: none;
    opacity: 0;
    inset-inline-end: 10px; /* Replaces right: 10px; */
    transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}

#sidebar-content {
    overflow: hidden;
}

#sidebar.active {
    margin-inline-start: 0px; /* Replaces margin-left: 0px; */
    opacity: 1;
    visibility: visible;
    display: block;
    transition: visibility 0s linear 0s, opacity 0.2s linear;
}

/* 17. Font Awesome Stack with Badge */
.fa-stack[data-count]:after {
    position: absolute;
    inset-inline-end: 0%; /* Replaces right: 0%; */
    top: 1%;
    content: attr(data-count);
    font-size: 60%;
    padding: .5em;
    border-radius: 999px;
    line-height: .6em;
    color: #fff;
    background: #3394FF;
    text-align: center;
    min-width: 1.5em;
    font-weight: bold;
}

.fa-stack.has-badge.hidden::after {
    content: none;
}

.fa-stack {
    vertical-align: top !important;
    height: auto !important;
    line-height: 1.5em !important;
}

/* 18. Cursor Styles */
.nav-link, .dropdown-item {
    cursor: pointer;
}

.viewoption {
    cursor: pointer;
    padding: 5px;
}

/* 19. Editor Padding */
#editor {
    padding-inline-start: 0 !important; /* Replaces padding-left: 0 !important; */
    content-visibility: auto;
}

/* 20. Fix Width */
.fixwidth {
    width: 1em !important;
}

/* 21. Dropdown Menu */
.dropdown-menu {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    font-size: 1rem !important; /* Moved up from bottom */
}

/* 22. Alert Image */
.alertimage {
    margin-inline-end: 10px; /* Replaces margin-right: 10px; */
    float: left; /* Consider changing to logical float */
}

[dir="rtl"] .alertimage {
    float: right; /* Adjust float for RTL */
}

/* 23. RTL Alignment */
.rtl-align {
    text-align: right !important;
}

/* 24. Connected Sortable */
.connectedSortable {
    background-color: #666666;
    cursor: pointer;
}

/* 25. View Preview */
.view-preview {
    display: flex !important;
    align-items: center;
    overflow: hidden;
}

    .view-preview img {
        display: inline-block;
        vertical-align: middle;
        margin-inline-end: 10px; /* Replaces margin-right: 10px; */
    }

    .view-preview span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* 26. Menu Border Right */
.menu-border-right {
    border-inline-end: 2px solid; /* Replaces border-right */
    color: #666666;
    padding-inline-end: 10px; /* Replaces padding-right: 10px; */
    margin-inline-end: 10px; /* Replaces margin-right: 10px; */
}

/* 27. Nav Playback */
#navPlayback {
    position: absolute;
    opacity: 0.6;
}

/* 28. Unselectable Elements */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 29. Toast Positioning */
#toast {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    z-index: 900;
}

/* 30. Navbar Item Margins */
.nav-item {
    margin-inline-start: 0px !important; /* Replaces margin-left: 0px !important; */
    margin-inline-end: 0px !important; /* Replaces margin-right: 0px !important; */
}

/* 31. Live Control Icon */
.live-control::before {
    content: '\e0b7';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-inline-end: 5px; /* Replaces margin-right: 5px; */
    color: #ffc107;
}

/* 32. Dropdown Menu Font Size (Already moved above) */

/* 33. Additional RTL Adjustments */

/* Ensure text and elements align correctly in RTL */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .center-block {
    margin-inline-start: auto;
    margin-inline-end: auto;
}

[dir="rtl"] .menu-border-right {
    border-inline-end: 2px solid;
    padding-inline-end: 10px;
    margin-inline-end: 10px;
}

[dir="rtl"] .view-preview img {
    margin-inline-end: 10px; /* Maintains spacing in RTL */
}

[dir="rtl"] .alertimage {
    float: right; /* Adjust float for RTL */
}