.monaco-editor-container {
    height: 300px;
    border: 1px solid #CFD4DA !important;
}

/*.monaco-editor .overflow-guard {*/
/*    border: #CFD4DA !important;*/
/*    border-width: 1px !important;*/

/*}*/

.decorationGlyphMarginClass {
    background: red;
}

.decorationContentClass {
    background: lightblue;
}

/* toast to make the message on top of the slide out */
.blazored-toast-container {
    z-index: 9999 !important; /* Higher than the slide-out panel's z-index */
}

/*!* Overlay styles *!*/
/*.overlay {*/
/*    display: none; !* Hidden by default *!*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background-color: red; !* Semi-transparent black *!*/
/*    !*z-index: 1050; !* Below the slide-out panel *!*!*/
/*    z-index: 1040; !* Ensure this is below the slide-out panel's z-index *!*/

/*}*/

/*!* Show the overlay when a slide-out panel is open *!*/
/*.overlay.open {*/
/*    display: block;*/
/*}*/

/* Slide-out panel styles */
.slide-panel {
    /* Adjust for a 50px header */
    width: 0; /* Panel will be hidden initially */
    position: fixed;
    z-index: 1050; /* Make sure it's above the header and other elements */
    top: 59px !important; /* Push it down below the header */
    right: 0;
    border-radius: 15px;
    background-color: #fdfdfd;
    overflow-x: hidden;
    transition: width 0.3s ease-in-out;
    padding: 0;
    margin: 0;
    border: #f0f0f0 2px solid;
}

/*For the sub sidebar*/
/*.sub-sidebar {*/
/*    height: 100%;*/
/*    width: 0; !* Panel will be hidden initially *!*/
/*    position: fixed;*/
/*    z-index: 1; !* Make sure it's above the header and other elements *!*/
/*    top: 100px;*/
/*    left: 200px; !* Start to the right of the sidebar *!*/
/*    background-color: #f1f1f1;*/
/*    overflow-x: hidden;*/
/*    transition: width 0.3s ease-in-out;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*}*/

.slide-panel-content {
    /*height: 100%; !* Full height *!*/
    /*padding: 1rem;*/

    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
}

   /* Slide-out panel header */
   .slide-panel-header {
       background-color: #fdfdfd;
       padding: 0.5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 20px;
       font-weight: 500;
       color: #44546F;
       border-bottom: #dbdbdb 1px solid;
   }

/* Slide-out panel close button */
.slide-panel-close {
    background: none;
    border: none;
    color: #44546F;
    font-size: 1.5rem;
    cursor: pointer;
}


.slide-panel.small {
    width: 30%; /* Panel takes up 67% of the screen width */
}

.slide-panel.medium {
    width: 50%; /* Panel takes up 67% of the screen width */
}

.slide-panel.open {
    width: 89%; /* Panel takes up 67% of the screen width */
}

.slide-panel.fullscreen {
    width: 100%; /* Panel takes up 67% of the screen width */
}

/* Full-width on tablet and mobile screens */
@media screen and (max-width: 768px) {
    .slide-panel.small,
    .slide-panel.medium,
    .slide-panel.large,
    .slide-panel.fullscreen {
        width: 100%; /* Panel takes up 100% of the screen width */
    }
}