@media screen and (max-width: 300px) {
    :root {
        --nav-height: 50px!important;
    }

    .message-container {
        top: -25px!important;
    }

    #navbar-block_list svg {
        width: 36px!important;
        height: 36px!important;
    }

    #navbar-block_menu > svg {
        width: 32px;
        height: 32px;
    }

    #navbar-block_logo img {
        width: 36px;
        height: 36px;
    }

    .counter {
        font-size: 12px;
        padding: 0
    }

    #navbar > .navbar-block > div {
        margin: 0 5px 0 5px!important;
    }
}

/* Mobile extra small */
@media screen and (max-width: 350px) {
    .products_block,
    #search-results {
        grid-template-columns: repeat(1, 1fr)!important;
    }

    .form-field-group {
        flex-direction: column;
        row-gap: 0
    }

    .form-field-group .form-field {
        padding-top: 0
    }

    .form-field-group .form-field:last-child {
        padding-bottom: 0
    }
}

@media screen and (max-width: 425px) {
    :root {
        --nav-height: 69px;
    }

    .responsive-small-mobile {
        display: block!important
    }

    .no-responsive-small-mobile {
        display: none!important
    }
}


/* Mobile small */
@media screen and (max-width: 425px) {


    ul.navmenu.mobile li {
        font-size: 102%
    }

    .dialog {
        transform: none;
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 0;
        left: 0;
        top: var(--nav-height) !important;
        min-height: 100vh
    }

    .dialog-content {
        padding: 15px 15px 225px 15px!important;
    }
}


/* Mobile greater */
@media screen and (max-width: 867px) {
    .responsive-mobile-smaller {
        display: block!important
    }

    .dialog {
        position: fixed;
        top: calc(var(--nav-height) + 10px);
        width: calc(100% - 20px);
        margin: 0;
        min-width: auto;
        max-width: 100%;
    }

    .dialog-header_content {
        padding: 25px 5px 0 15px;
    }

    table.aui-table th {
        white-space: normal;
    }

    table.aui-table td.main-data {
        word-wrap: break-word;
        max-width: 100px
    }

    .table-container {
        overflow-x: scroll;
    }

    .table-container::-webkit-scrollbar {
        height: 4px
    }

    .cookie-consent_content form {
        flex-direction: column;
    }

    .cookie-consent_content {
        font-size: 15px;
    }

    #content-page_main-content {
        background: var(--elem-dark-border)
    }

    .products-header_block {
        left: 50%!important;
        margin-right: -50%;
        transform: translate(-50%);
        width: calc(100% - 30px);
        -moz-transform: none;
    }

    .dialog-content {
        padding: 15px 15px 165px 15px;
    }
}

/* Mobile */

@media screen and (max-width: 767px) {
    .change-list .content {
        padding-right: 5px
    }

    .justify-mobile {
        text-align: justify;
    }

    .responsive-desktop {
        display: none!important
    }

    .responsive-mobile {
        display: block!important;
    }

    #changelist-filter,
    .content-page_block {
        padding: 20px 15px 20px 15px;
    }

    #content-page_header {
        flex-wrap: nowrap;
    }

   /* Footer, Foobar */

   #foobar {
       flex-direction: column;
       align-items: stretch;
       width: auto;
       padding-top: 0;
       padding-bottom: 0;
   }

   #foobar-logo {
       padding-bottom: 15px;
   }

   .foobar-block {
       padding: 15px;
       align-items: stretch;
   }

   .foobar-block:not(:nth-child(2)) {
       border-bottom: 2px solid var(--elem-dark-border);
   }

   #foobar > .foobar-block:nth-child(2) {
       width: auto;
       align-self: auto;
       order: 3;
       padding-top: 50px;
   }

   #foobar_form {
       width: 100%;
       max-width: 100%;
   }

    /* content page homepage */

    .theme-bg div {
        flex-direction: column;
    }

    #pagination-block {
        justify-content: center;
    }

    #content-page_center-header {
        padding: 25px 40px 5px 40px;
    }

    input[type=button],
    input.primary,
    input[type=submit],
    button.primary,
    button[type=submit] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .border-link {
        min-width: 100px;
        padding: 5px 10px 5px 10px;
        text-align: center;
        min-height: 47px;
    }

    .short-field input,
    .short-field select,
    .short-field textarea,
    .short-short .django-quill-widget-container,
    .medium-short-field input,
    .medium-short-field select,
    .medium-short-field textarea,
    .medium-short .django-quill-widget-container,
    .medium-field input,
    .medium-field select,
    .medium-field textarea,
    .medium-field .django-quill-widget-container,
    .long-field input,
    .long-field select,
    .long-field textarea,
    .long-field .django-quill-widget-container,
    .full-width-field-mobile input,
    .full-width-field-mobile select,
    .full-width-field-mobile textarea,
    .full-width-field-mobile .django-quill-widget-container,
    .very-long-field input,
    .very-long-field select,
    .very-long-field textarea,
    .very-long-field .django-quill-widget-container {
        width: 100%;
    }

    .modal-block {
        width: 100%;
        padding: 50px 15px 100px 15px;
    }

    .dialog-header h3 {
        font-size: 22px;
        margin: 0 0 15px 0
    }
}

/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .responsive-desktop {
        display: none!important
    }
}

/* Desktop */

@media screen and (min-width: 1024px) {
    .responsive-mobile {
        display: none!important
    }
}

/* Mobile and Tablet */

@media screen and (max-width: 1023px) {
    #navbar > .navbar-block > div {
        margin: 0 10px 0 10px;
    }

    ul.navmenu.ul.mobile {
       display: block
    }

    ul.navmenu.ul.desktop {
       display: none
    }

    .sidebar-container {
        grid-template-columns: 100%!important;
    }

    div.content-page_main-block:last-of-type {
       border-radius: 0;
       margin-bottom: 0
    }

    .content-page_main-block:nth-child(2) {
        border-top: none
    }
}

/* Tablet - Custom for footer */

@media screen and (min-width: 768px) and (max-width: 1124px) {
    #foobar {
        flex-wrap: wrap;
    }

    .foobar-block {
        flex: 40%;
        align-items: stretch;
    }

    #foobar_form {
        max-width: 100%;
    }

    #foobar > .foobar-block:nth-child(2) {
        order: 3;
        flex: 100%;
        border-top: 1px solid var(--elem-dark-primary);
        margin-top: 25px;
        padding-top: 25px;
    }

    #foobar-logo {
        padding-bottom: 25px;
    }
}

@media screen and (max-width: 510px) {
    .message-container {
        width: calc(100% - 30px);
        margin-left: 0;
        top: -5px;
        left: 50%;
        transform: translate(-50%);
    }
}