.dev {
    .sidebar{
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        z-index: 100;
        border-radius: 12px;
        height: 80px !important;
        margin: 15px;
        width: 259px;
        overflow: hidden;

        header{
            padding-left: 12px;
            padding-left: 0.75rem;
            padding-right: 12px;
            padding-right: 0.75rem;

            .dynamic-button {
                border: 1px solid rgba(30, 30, 30, 0) !important; 
                margin-bottom: 0px;

            }
            .dynamic-button:hover{
                -webkit-box-shadow: none !important;
                        box-shadow: none !important;
                border: 1px solid rgba(30, 30, 30, 0) !important; 
            }
            img{
                position: absolute;    width: 51px;    height: 51px;    border-radius: 13px;    margin-left: 1%;    bottom: 14px;
            }
        }

        .dynamic-button>span{
            margin-bottom: 10px !important;
            margin-left: 68px !important;
            bottom: 14px;
            position: absolute;
        }

        .action-btn{
            display:none;
            width: 51px;
            height: 56px;
            overflow:hidden;
            padding-left: 13px;
        }

        .action-btn>span.text-sm{
            display: none;
        }

        
    }

    #file-manager-dev-x{
        display: block;
    }

    .main-editor{
        margin-left: 238px;
        display:block;
    
        .CodeMirror{
            padding-top: 10px;
            height: 93.5vh;
            max-height: 88%;
            border-radius: 10px;
        }
        *, *:after, *:before {
            margin: 0;
                padding: 0;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
            }
            
            /* ----------
            WRAPPERS & CONTAINERS
            ---------- */
            section {
            position: relative;
            padding: 17.6px 0;
            padding: 1.1rem 0;
            }
            .container {
                position: relative;
                margin: auto;
                padding: 0 14px;
                max-width: none;
                width: 100%;
                height: 90%;
            }
            section:after, .container:after, .row:after {
                display: table;
                content: '';
                clear: both;
            }
            /* ----------
            CODE BLOCK
            ---------- */
            .code-container {
                position: relative;
                overflow: hidden;
                border-radius: 10px;
            }

            .code-container:last-child {
                margin-bottom: 0;
            }
            
            .btn {
                background-color: #ed9d0a;
                color: #fff;
                padding: 4px 10px;
                text-decoration: none;
                border-radius: 3px;
                -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .15);
                        box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .15);
                -webkit-backface-visibility: hidden;
                -webkit-transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
                transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
            }
            .btn:hover {
                -webkit-box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .2);
                        box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .2);
                -webkit-transform: translateY(-2px);
                transform: translateY(-2px);
            }
            .btn.btn-left {
                float: left;
            }
            .btn.btn-right {
                float: right;
            }
            .row {
                margin-bottom: 24px;
                margin-bottom: 1.5rem;
                width: 100%;
            }
            .row:last-child {
                margin-bottom: 0;
            }
    }

    #fmx-file-list{
        max-height: 50vh;
    }

    #project-report{
        .p-4{
            padding: 4.8px !important;
            padding: 0.3rem !important;
        }
        .mr-2{
            margin-right: 8px !important;
            margin-right: 0.5rem !important;
        }
    }

    #fmx-wrapper{
        z-index: 99;
    }

    #storage-display-side-x{
        display: none;
    }

    .account-button{
        display: none;
    }

    #report-dev-x{
        display: block;
    }

    #main-container{
        width: 100%;
    }

    .main-content{
        display:none;
    }
}

.main-editor{
    display:none;
}

#file-manager-dev-x{
    display: none;
}

.error-upload{
    background-color: #ce0606 !important;;
}

#report-dev-x{
    display: none;
}