/* Big tablet to 1200px*/
@media only screen and (max-width: 1200px) {
}

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {

    .layout {
        display: block !important;
    }

    .responsive-layout {
        flex-direction: column !important;
    }

    .events-stack,
    .issue-card-stack {
        flex-wrap: wrap;
    }

        .events-stack.issues {
            width: 100% !important;
        }

        .events-stack.releases {
            width: 100% !important;
        }

    .issue-card-child-stack {
        justify-content: start !important;
    }

    .extension-user-datagrid-stack.responsive {
        width: 350px !important;
    }

    .fluent-dialog-main.prevent-scroll {
        --dialog-width: 98vw !important;
    }

    .issue-card-component {
        height: 180px !important;
    }

    .chevron-button {
        height: 180px !important;
    }

    #asset-layout-stack,
    #assets-splitter{
        display: block !important;
    }

    #asset-stack,
    #asset-log-stack {
        margin-top: 50px !important;
    }

    #release-stack {
        flex-wrap: wrap-reverse;
    }
}

/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {

    .asset-properties-stack {
        display: block !important;
    }

    .search-component-parent-stack {
        display: block !important;
    }

    .extension-user-datagrid-stack.responsive {
        width: 250px !important;
    }

    .fluent-dialog-main.prevent-scroll {
        --dialog-width: 98vw !important;
    }

    #release-stack {
        flex-wrap: wrap-reverse;
    }

    #search-component {
        margin-top: 10px;
    }

    .tools-main-stack {
        display: block !important;
    }

    .tools-datagrid {
        flex-direction: column !important;
    }
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

    .stack-horizontal.layout {
        margin-left: 2px;
    }

    .dialog-header-stack.responsive {
        justify-content: left !important;
    }

    .dialog-footer-stack.responsive {
        justify-content: left !important;
    }

    .extension-user-datagrid-stack.responsive {
        width: 150px !important;
    }

    .fluent-dialog-main.prevent-scroll {
        --dialog-width: 98vw !important;
    }

    .assets-datagrid {
        margin-top: 20px;
    }

    .issue-card-component {
        height: 200px !important;
    }

    .chevron-button {
        height: 200px !important;
    }

    #release-stack {
        flex-wrap: wrap-reverse;
    }

    #assets-tabs-stack {
        width: 100% !important;
    }
}