.MainPage{

    margin:10px;
}

.wrapper
{
    padding:10px;
}

.left-menu {
    flex: 0 0 18%;
    max-width: 18%;
    min-width: 200px; /* prevent too small on wide screens */
    box-sizing: border-box;
    padding-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
}

  .right-panel {
        flex: 1 1 82%;
        max-width: 82%;
        min-width: 0; /* allow children to shrink correctly */
        box-sizing: border-box;
    }

    /* Remove column padding introduced by .col-* classes when not using a .row */
    .container-fluid.two-column .col-md-3,
    .container-fluid.two-column .col-md-9 {
        padding: 0;
    }

/* Mobile: stack vertically */
@media (max-width: 767.98px) {
  
       .left-menu,
       .right-panel {
            flex: 0 0 100%;
            max-width: 100%;
        }
}

/* Fallback: if you can't add the .two-column class, use these looser rules.
   They attempt to position .left-menu left and .right-panel to the right without changing the HTML. */
.left-menu {
    float: left;
    width: 18%;
    box-sizing: border-box;
    min-width: 200px;
}

.right-panel {
    margin-left: 18%;
    box-sizing: border-box;
    min-width: 0;
}

footer {
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    text-align: center;
    padding: 1rem 0;
    min-height: 56px; /* adjust to your design */
    box-sizing: border-box;
}

/* ensure dropdowns/popovers appear above modal backdrop */
.note-editor .dropdown-menu,
.note-editor .popover,
.note-editor .note-popover {
    z-index: 2000 !important;
}