awo-hamburg-intranet/layout/admin/css/responsive.css

/* ==========================================================================
Media queries
========================================================================== */
.config.sitemap #content_3 ul.toolbar_menu {
    margin-bottom: 0px !important;
    margin-top: 70px;
}
.config.sitemap #content_3 #mainContent{
    width: 80%;
}
.config.sitemap #content_3 ul.toolbar_menu {
    width: 20% !important;
}

@media (max-width: 1750px) {
    ul.toolbar_menu {
        width: 260px!important;
    }
    /* ! Daschboard */
    .dashboard_left {
        width: 66%;
    }
    .dashboard_right {
        width: 33%;
    }
    .news-content-wrapper {
        flex-wrap: wrap;
    }
    .news-content {
        width: 100%;
    }
    .dashboard img.xml-img {
        height: auto;
    }
    .dashboard img.hintergrund.teaser {
        width: 100%;
        object-fit: cover;
    }
    /* ! Daschboard Ende*/
    .faq ul.toolbar_menu  {
        width: 25% !important;
    }
}
@media (max-width: 1650px) {
    .collections div#content #content_3.menu_opened #mainContent {
        width: 70%!important;
    }
}
@media (max-width: 1550px) {
    #header {
        width: 250px;
    }
    
    div#header_menu {
        width: 250px;
    }
    
    nav {
        width: 250px;
    }
    
    #content_3 {
        padding: 0;
    }
    
    div#content {
        padding: 60px 30px 30px 50px;
    }
    
    .main_menu ul.site_dropdown {
        left: 250px;
    }
    
    a.dashoard_box {
        width: 168px;
    }
    
    .collections div#content #content_3.menu_opened #mainContent {
        width: 70%;
    }
    
    ul.toolbar_menu {
        width: 260px!important;
    }
    
    .structure.sites form#form_field_list {
        width: 100%!important;
        float: left;
    }
    .module-card-list {
        width: 45%;
    }
}

@media (max-width: 1500px) {
    #nestable .changed_on,
    #nestable .changed_by,
    #nestable .dd-gaendert-am,
    #nestable .dd-gaendert-von {
        display: none;
    }

    .dd-gaendert-am {
        display: none;
    }

    .structure.navigation .dd-code {
        right: 254px;
    }

    .structure.navigation .dd-status {
        right: 0;
    }

    .dd-gaendert-von {
        display: none;
    }

    td.changed_by {
        display: none;
    }

    td.changed_on {
        display: none;
    }

    div#overlaycrumb + ul.toolbar_menu {
        width: 100%!Important;
        padding: 0!important;
        height: auto!important;
        position: relative;
        top: unset;
    }
    
    .dd-status {
        right: 0px;
    }
    
    .dd-code {
        right: 250px;
    }
    
    #mainContent .dd-handle .dd-icon {
        right: 505px;
    }
}
@media (max-width: 1250px) {

    #content_3.menu_opened #mainContent {
        height: auto;
        border: none;
    }

    .structure.sites ul.toolbar_menu {
        margin-top: 5rem!important;
    }
    #content-collection {
        padding: 10px 30px 30px 0px;
    }
    
    div#content {
        padding: 20px 30px 30px 20px;
    }
    
    a.dashoard_box {
        /* width: 40%; */
        height: 137px;
    }
    
    div#header_menu {
        width: 250px;
    }
    
    .main_menu ul.site_dropdown {
        width: 200px;
        left: 250px;
    }
    
    #header {
        width: 250px;
    }
    
    div#header-wrapper {
        width: 250px;
    }
    
    .collection-wrapper {
        padding: 15px;
    }
    
    .collection-wrapper {
        margin-left: 1rem;
    }
    ul.toolbar_menu {
        width: 80%!important;
        z-index: 9;
        height: auto!important;
        position: unset;
        margin: 0 0 1rem!important;
        float: left!important;
    }
    
    .structure div#content #content_3.menu_opened #mainContent {
        width: 100%;
    }
    
    .toolbar_menu li.promoted {
        width: auto;
    }
    
    .collections div#content #content_3.menu_opened #mainContent {
        width: 96%;
    }
    
    .menu-wrapper {
        right: 80px;
    }
    
    .main_menu:nth-child(2) {
        bottom: 100px;
    }
    /* ! Daschboard */
    .dashboard_left {
        width: 100%;
    }
    .dashboard_right {
        width: 100%;
    }
    .news-content {
        width: 50%;
    }
    .dashboard img.xml-img {
        height: 200px;
    }
    .news-content-wrapper {
        flex-wrap: nowrap;
    }
    /* ! Daschboard Ende*/

    #content_3.menu_opened {
        flex-direction: column;
    }
    #content_3.menu_opened #mainContent {
        width: 100%;
    }
    ul.toolbar_menu {
        width: 100% !Important;
        padding: 20px 30px !Important;
        /* margin: 0 !important; */
    }
    #content_3.menu_opened .toolbar_menu li.promoted {
        padding-bottom: unset;
    }
    .collections div#content #content_3.menu_opened #mainContent {
        width: 100% !important;
    }
    .collections #content_3 .toolbar_menu  {
        width: 100% !important;
        display: flex;
        align-items: center;
    }
    .collections #content_3 .toolbar_menu ul{
        margin-top: unset;
    }
    .collections #content_3 li.not_promoted {
        margin-bottom: unset;
        margin-top: unset;
    }
    .faq ul.toolbar_menu  {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .faq form#form_faq_cardform {
        width: 100%;
    }
    .faq .toolbar_menu li.promoted {
        padding-bottom: 0px;
    }
    #overlayContent form {
        width: 100%;
    }
    .config.sitemap #content_3 {
        flex-direction: column;
    }
    .config.sitemap #content_3 ul.toolbar_menu {
        margin-bottom: 0px !important;
        margin-top: 0px;
    }
    .config.sitemap #content_3 .toolbar_menu li.promoted{
        padding-bottom: 0px;
    }
    .config.sitemap #content_3 #mainContent{
        width: 100%;
    }
    .config.sitemap #content_3 ul.toolbar_menu {
        width: 100% !important;
    }
    .faq.faq_main div#mainContent  {
        width: 100% !important;
        max-width: unset !important;
    }
    
}

@media (max-width: 992px) {

    #login {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        width: auto;
        background-color: var(--toggle-bg-color);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #login_1 {
        padding-right: 0;
    }

    form#form_admin_login {
        width: 100%;

    }

    .login-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 100%;
        padding-block-start: 5rem;
    }

    .login-animation {
        display: none;
    }

    nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active {
        color: var(--fc-color-white-always);
    }

    .structure.navigation form#form_edit_main_navigation_card td {
        width: 100%!Important;
        float: left;
        padding-right: 0!important;
    }
    div#header-wrapper {
        width: 100%;
        height: 70px;
    }

    li#user_menu ul,
    li#settings_menu ul {
        position: relative;
        right: 0;
        bottom: unset!Important;
        top: unset;
        width: 100%;
        border: none;
        box-shadow: none;
    }

    .group-wrapper {
        margin-bottom: 5px;
    }

    li#help_menu:hover:after, li#settings_menu:hover:after, li#user_menu:hover:after {
display: none;
    }

    .menu-wrapper li:hover a {
        background-color: transparent!important;
    }

    ul.site_dropdown li {
        background: transparent!important;
    }

    li#site_language_menu {
        color: var(--fc-color-white-always);
    }

    .dd-code {
        display: none;
    }

    .dd-status {
        display: none;
    }

    .dd-layout {
        display: none;
    }

    .structure.sites form#form_field_list {
        padding: 0!Important;
    }

    .structure input#input_description {
        font-size: 17px;
    }

    .structure table.cardform td {
        width: 100%!important;
        padding-left: 0px;
        padding-right: 0;
        float: left;
    }

    .structure table.cardform td {
        width: 100%!important;
        padding-right: 0;
    }

    .structure table.cardform td:first-child {
        width: 100%!important;
        padding-left: 0px;
        padding-right: 0;
        float: left;
    }

    .structure.navigation form#form_edit_main_navigation_card {
        border: none!important;
    }

    .logo {
        width: 100%;
        top: 0;
    }

    #header {
        width: 100%;
        height: 70px;
        border-bottom: 1px solid var(--rahmen);
        border-right: none;
    }

    div#header_menu {
        width: 100%;
        height: 70px;
    }

    nav {
        width: 100%;
        height: auto;
        position: relative;
        top: unset;
        padding-block-start: 70px;
    }

    .main_menu:nth-child(2) {
        width: 100%;
        margin: 5px 0;
    }

    .main_menu:nth-child(2) {
        position: relative;
        bottom: unset;
    }

    .menu-wrapper {
        right: unset;
        position: relative;
        right: unset;
        display: block;
        height: auto;
        padding: 0;
        width: 100%;
        margin: 0;
    }

    nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active {
        padding: 5px 23px;
    }

    li#site_language_menu {
        width: 100%;
        padding: 5px 23px;
        margin-bottom: 5px;
    }
    nav {
        display: none;
    }

    div#content {
        padding: 20px!important;
        margin-block-start: 60px!important;
    }

    div#mainContent {
        padding: 0rem!important;
    }

    .dashboard-padding {
        padding: 15px 0;
        float: left;
    }

    #content_3 {
        padding: 0;
        flex-direction: column;
        align-items: center;
    }

    .dashboard #mainContent {
        width: 100%!important;
    }

    .menu-toggle {
        display: block;
    }

    .logo a {
        width: auto;
    }

    nav.show {
        background: var(--mysyde);
    }

    #content_3.menu_opened #mainContent {
        padding: 10px!important;
    }

    div#form_contactform_list_table_length {
        display: none;
    }

    div#form_contactform_list_table_filter label {
        float: left;
        width: 100%;
        text-align: left;
    }

    #overlaycrumb {
        font-size: 23px;
        border: none!important;
    }

    .eight.wide.column {
        padding: 0!important;
    }

    .toolbar_menu li.promoted {
        width: 100%;
        padding: 0;
    }

    table.cardform td {
        width: 100%;
    }

    .config.config_collections form#form_collection_cardform {
        padding-block: 2rem;
        border-right: 0;
    }

    .config.config_collections form#form_line_list, .config.config_collections form#form_group_line_list, .config.config_collections form#form_collection_choose_cardform {
        float: left;
        border-right: 0;
        height: auto;
        padding-block-end: 1rem;
    }

    .config.config_collections div.input {
        width: 100%;
    }

    body.config.config_users form#form_admin_user_card td {
        width: 100%!important;
        padding-right: 0;
    }

    .structure.components table.cardform td:first-child {
        width: 100%!important;
        padding-right: 0!important;
    }

    form#form_layout_area_card td {
        width: 100%;
    }

    .config.config_websites form#form_site_card, .config_users form#form_admin_user_card, #bewerber_forms {
        width: 100%;
        border-right: 0;
    }

    form#form_layout_card td {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .collections div#content #content_3.menu_opened #mainContent {
        width: 100% !important;
        padding: 0!important;
    }

    .structure.sites ul.toolbar_menu {
        margin-top: 1rem!important;
    }

    .config.config_collections form#form_collection_cardform td {
        width: 100%;
    }

    td.code {
        display: none;
    }

    td.status {
        width: 0;
    }

    .dd-code {
        display: none;
    }



    .collections div#content_3 {
        height: auto;
    }

    div#form_collection_list_table_length {
        display: none;
    }

    #content h3 {
        font-size: 14px!important;
    }

    ul.toolbar_menu {
        width: 100% !Important;
        padding: 0!important;
        gap: .5rem;
        display: flex;
        flex-wrap: wrap;
    }

    .collections #content_3 .toolbar_menu {
        flex-wrap: wrap;
        padding: 0!important;
        margin-top: 1rem!important;
    }

    #content_3.menu_opened .toolbar_menu li.promoted {
        width: 100%;
        float: left;
    }

    .news-content {
        width: 100%;
        float: left;
    }

    .card-title {
        font-size: 18px;
    }

    .teaser {
        height: 290px;
    }

    .news-content-wrapper {
        flex-wrap: wrap;
    }

    .eight.wide.column {
        display: none!important;
    }

    .dashboard-50 {
        width: 100%;
    }

    

    div.dataTables_wrapper div.dataTables_filter span.input {
        width: 100%;
        margin: 0!important;
    }

    div#form_collection_list_table_filter label {
        text-align: left;
        float: left;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_filter span.input,
    span.ui.input {
        margin-left: 0!important;
    }

    .collection_field {
       width: 100%;

    }

    input#input_description {
        font-size: 22px;
    }

    .collections #overlaycrumb .input {
        width: 100%;
    }

    #overlayContent form {
        border: none;
        padding: 0!important;
    }

    .collection-main-wrapper {
        width: 100%;
        margin-top: 0;
        border: none;
    }

    form#form_line_card td {
        padding-right: 0;
    }

    .tab ul.toolbar_menu, form#form_field_list .toolbar_menu {
        padding: 0!important;
        margin: 0!important;
        gap: 0;
    }

    .structure .toolbar_menu li.promoted {
        padding-bottom: 0px;
    }

    div#content {
        padding: 10px!important;
        margin-block-start: 70px!important;
    }

    thead tr {
        font-size: 14px;
    }

    td.text.sorting {
    font-size: 14px;
    }

    table.linklist tr td div {
        font-size: 13px;
    }

    .ui.stackable.pagination.menu {
        width: 100%;
    }

    div#form_collection_list_table_previous {
        justify-content: center;
    }

    div#form_collection_list_table_next {
        justify-content: center;
    }

    div#content-collection {
        padding: 10px!Important;
    }

    .collection-main-wrapper {
        width: 100%;
        margin-top: 50px;
    }

    .right.aligned.eight.wide.column {
        padding: 0!important;
    }

    div#overlayWrapper {
        padding: 10px;
        float: left;
        margin: 0!important;
    }

    .collection-wrapper {
        margin: 0;
        width: 100%;
        padding: 10px 0;
    }

    #content_3.menu_opened #mainContent {
        border-right: none;
    }

    .sixteen.wide.column {
        padding: 0!important;
        border: none!Important;
    }

    #content h1 {
        font-size: 20px!important;
    }

    table.cardform td {
        padding-right: 0;
    }

    .dashboard .dashboard-left-content {
        padding: 20px;
    }
}