@media screen
    and (min-device-width: 1200px) {
        .header > .header-icon {
            display: none;
        }
    }

@media screen 
    and (max-device-width: 1200px) {
        .menuNavegacao, .header > .profileContainer {
            display: none;
        }

        .header > .logo-alura {
            width: 145px;
            min-width: 145px;
            margin-right: 40px;
        }

        .header > .header-icon {
            display: none;
        }        

        .header > #header-menuIcon {
            display: flex;
        }

        .section-codeEditor {
            display: block;
        }

        .code-inputSidebar {
            margin: 40px 0px;
            width: 100%;
        }

        .code-inputSidebar>.code-personalization {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-between;
        }

        .code-personalization > .text-sidebarTitle {
            width: 100%;
        }
    
        .code-personalization > .customSelectWrapper,
        .code-personalization > .main-input.code-selectColor {
            width: calc(50% - 16px); 
        }

        .community-card {
            width: 100% !important;
        }
}

@media screen 
    and (max-device-width: 767px) {
        .section-main, .header {
            padding-left: 16px;
            padding-right: 16px;
        }

        .header {
            padding-top: 16px;
        }
        
        .menuNavegacao, .header > .profileContainer {
            display: none;
        }

        .header > .logo-alura {
            width: 145px;
            min-width: 145px;
            margin-right: 40px;
        }

        .header > .main-input.header-searchBar {
            visibility: hidden;
        }

        .header > .header-icon {
            display: none;
        }

        .header > #header-menuIcon,
        .header > #header-searchIcon {
            display: flex;
            margin-left: 8px;
        }

        .section-codeEditor {
            display: block;
        }
        
        .code-inputSidebar {
            margin: 40px 0px;
            width: 100%;
        }
        
        .code-personalization > .customSelectWrapper,
        .code-personalization > .main-input.code-selectColor {
            display: block;
            width: 100%;
        }

        .community-card {
            width: 100% !important;
        }
}