@media only screen and (max-width: 992px) {
    
}

/* TRICSS adjustements */
@media only screen and (max-width: 950px) {
    .navbar-menu {
        justify-content: flex-start;
    }
    
    .navbar-menu-start {
        width: 100%;
        display: block;
        flex: 1;
    }
}

@media screen and (max-width: 768px) {
    .purchase-rights-ui label + label {
        display: initial;
    }

    .purchase-rights-ui br {
        content: "";
    }

    .purchase-rights-ui br:after {
        content: " ";
    }
}

@media only screen and (max-width: 640px) {
    .sidebar {
        display: block;
    }

    .navbar-menu-start ul {
        display: none;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .navbar-menu-end {
        width: 100%;
    }

    .navbar-menu-end div.profile-d {
        display: none;
    }

    .navbar-menu-end div.profile-m {
        display: block;
        position: relative;
    }

    .navbar-menu-end div.profile-m > span {
        display: block;
        text-align: center;
    }
    
    .navbar-menu-end div.profile-m > div {
        width: 60%;
        margin: 0 auto;
    }

    .navbar > span.icon {
        margin: 1em 0px;
        display: block;
    }

    .navbar > span.icon > a {
        font-family: 'PIC';
        font-size: 36px;
        text-decoration: none;
        margin-top: 9px;
        display: block;
    }

    div.profile-dfc.displayed {
        display: none;
    }

    body.profile-df {
        overflow: initial;
        width: initial;
        height: initial;
    }
}

@media screen and (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    button.btn {
        width: 100%;
    }

    div.input-range-container {
        margin-left: 0px;
        margin-right: 0px;
    }

    div.input-range-container input[type=range] + div > div:nth-child(2) {
        margin-left: calc(-9.7px + (-7px * var(--range-percentage)) / 100);
    }

    .sidebar {
        display: block;
    }

    table th, table td {
        font-size: 0.75rem;
    }

    section.transactions td.transaction > button,
    section.subscriptions td.subscription > button {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    div.filters {
        margin-top: 0;
    }

    section.transactions td.transaction div.contact-form > div > button {
        display: inline-block;
        width: 50%;
        margin: var(--space-base);
        margin-bottom: 0;
    }

    section.transactions td.transaction div.contact-form > div > button:first-of-type {
        margin-left: 0;
    }

    section.transactions td.transaction div.contact-form > div > button:last-of-type {
        margin-right: 0;
    }

    .loader {
        width: 24px;
        padding: 4px;
    }
}

@media screen and (max-width: 480px) {
    h1, dialog h3 {
        font-size: 1.25rem;
        line-height: 2rem;
    }
    
    form > div > div {
        font-size: 0.75rem;
    }

    .sidebar ul {
        width: 32px;
    }

    .sidebar ul > li {
        height: 32px;
        padding: 4px;
    }

    section.transactions td.transaction > div > div > span:nth-of-type(1) {
        border-radius: 4px;
    }

    select, button.btn {
        font-size: 0.75rem;
        height: initial;
        padding: var(--space-l);
        line-height: 1rem;
    }

    .loader {
        width: 18px;
        padding: 2px;
    }

    section.transactions td.transaction > div:nth-of-type(2) > button::before {
        font-size: 1rem;
    }

    dialog .modal-content p,
    dialog .modal-content div.duo {
        font-size: 0.75rem;
    }

    .radio-options input[type=radio] + label {
        font-size: 0.75rem;
        line-height: 1rem;
        padding: var(--space-l);
    }

    .navbar-menu-end div.profile-m > div {
        width: 75%;
    }

    .navbar-menu-end div.profile-m {
        padding: 0 24px;
    }

    .purchase-rights-ui > div {
        margin: 0;
    }
}

@media screen and (max-width: 380px) {
    section.transactions td.transaction > button,
    section.subscriptions td.subscription > button {
        display: block;
        width: 100%;
    }

    section.transactions td.transaction > div,
    section.subscriptions td.subscription > div {
        width: initial;
    }

    .navbar-menu-end div.profile-m > div {
        width: 90%;
    }

    .navbar-menu-end div.profile-m {
        padding-left: 12px;
        padding-right: 48px;
    }
}