@media (min-width: 576px) {
    .navbar-expand-sm .navbar-toggler {
        display: inline-block;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
    .navbar-expand-sm .navbar-toggler {
        display: none;
    }

    #actionButtonsContainer {
        left: 300px;
    }


    #rightSideContainer,
    .mainTreeViewContainer,
    #actionButtonsContainer,
    #MainContainerWithoutTree,
    .formDesignerTreeViewContainer,
    .toolboxContainer{
        top: 106px;
    }

    #rightSideContainer {
        left: 300px;
    }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

@media (max-width: 768px) {

    [data-pptype="CheckBox"] p,
    [data-pptype="Label"] p {
        margin-bottom: 0;
    }

    .controlsContainer.user-forms {
        padding: 25px;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    /* Form scale is off on phones, for the form surface and for the FormGrid that sits beside it. The
       rules in this block already abandon the designer's pixel coordinate space and reflow everything
       into a single full-width column, so there is no fixed-size surface left to zoom - and the grid in
       particular is scaled about the coordinate space's origin, a point that does not exist once it is
       position:static, so a transform there would fling it off the screen. Specificity matches the
       site.css rules, which are otherwise more specific than this media query. */
    html.pp-form-scaled .controlsContainer.user-forms {
        transform: none;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    html.pp-form-scaled #ppFormGridContainer,
    html.pp-form-scaled .ppFormGridContainer {
        transform: none;
    }

    [data-pptype="FormGrid"] {
        margin: 25px;
    }

    .controlsContainer.user-forms [data-ppid] {
        margin-bottom: 5px;
    }

    .controlsContainer.user-forms input,
    .controlsContainer.user-forms select,
    .controlsContainer.user-forms textarea {
        min-height: 30px;
    }

    .controlsContainer.user-forms .pp-group-child,
    .controlsContainer.user-forms .pp-control-container,
    [data-pptype="FormGrid"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    /* The rule above makes the FormGrid container static and auto-height, so the "Simple grid" strip has
       nothing to be positioned against and no padding to sit in: let it flow above the grid instead. */
    .simpleGridHost {
        padding-top: 0;
    }

    .simpleGridToggle {
        position: static;
        margin-bottom: 4px;
    }
}