.container {
    width: 1400px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 1400px) {
    .container {
        width: 1170px;
    }
}


@media (max-width: 1200px) {
    .container {
        width: 970px;
    }
}

@media (max-width: 992px) {
    .container {
        width: 750px;
    }
    .sidebar{
        position: fixed;
        width: 25rem;
        z-index: 60;
        left: -30rem;
    }
    .main{
        width: 100%;
    }
    .header__container{
        display: none;
    }
    .header__mobile{
        display: flex;
    }
    .tooltip-box{
        z-index: 50;
    }
    .btn-hide-sidebar{
        display: flex;
    }
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
    #activeFileLabel{
        max-width: 9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .editor{
        height: 91vh;
    }
    .editor__top{
        margin: .7rem 1rem .3rem .8rem;
    }
    .editor__top-info{
        padding: 0 1rem 1rem 1rem;
    }

    .editor-previewFrame{
        flex-direction: column;
    }
    #monacoEditor{
        width: 100%;
        height: 50%;
        border-bottom: 1px solid var(--border-color);
    }
    .editor__resizer{
        display: none;
    }
    #previewFrame{
        width: 100%;
        height: 50%;
    }
    .terminal{
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0;
        z-index: 40;
        height: 42%;
    }
    .footer__developer{
        margin: 0;
    }
}
@media (max-width: 560px) {
    .container {
        width: 100%;
    }
    .editor__top-btn-box{
        min-width: 5rem;
        justify-content: end;
        align-items: center;
    }
    .editor__top-btn-run{
        width: 4rem;
        height: 4rem;
        padding: 0;
    }
    .editor__top-btn-run span{
        display: none;
    }
    .editor__top-btn{
        gap: 0;
    }
    .editor__line{
        margin-right: 0;
    }
    .tooltip-box{
        display: none;
    }
    .massage__container{
        bottom: 5rem;
        right: .5rem;
    }
    .header__mobile-logo{
        width: 10rem;
    }
    .footer__developer{
        width: 100%;
    }
    .footer__developer-text{
        font-size: 1.1rem;
        padding: 0 1rem;
    }

}
@media (max-width: 360px) {
    .container {
        width: 100%;
    }

}

.container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}