@media only screen and (max-width: 1220px) {
    body {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 1000px) {
    .col-6 {
        width: 100%;
    }

    .row > * > .wrap {
        min-height: 0;
        height: auto !important;
    }
}

@media only screen and (max-width: 800px) {
    #navigation .cell {
        position: relative;
    }

    footer .table .cell {
        display: block;
        text-align: center;
        padding: 0 !important;
        margin: 0 !important;
    }

    footer .table .cell:first-child {
        padding: 0 0 10px 0 !important;
    }

    footer .table .cell .title {
        padding: 0 10px;
    }

    #menu-toggle,
    #menu-toggle span {
        display: block;
        cursor: pointer;
        font-size: 22px;
        vertical-align: middle;
    }

    #menu-toggle span {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: white;
    }

    #menu-toggle.toggled span:before {
        content: "\ea0f";
        font-size: 16px;
    }

    #menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
    }

    #menu.toggled,
    #menu.visible {
        display: block;
    }

    #menu ul,
    #menu ul li,
    #menu ul li a,
    #menu ul li ul {
        display: block;
        position: relative;
    }

    #menu ul li {
        height: auto;
    }

    #menu a {
        background: #e20074;
        height: 45px;
        line-height: 45px;
        text-align: left;
        padding: 0 20px;
        white-space: nowrap;
    }

    #menu ul li ul {
        left: 0;
        top: 0;
    }

    #menu ul li ul li a {
        background: #d60b73;
    }

    #menu ul li ul li a.active,
    #menu ul li ul li a:hover {
        background: #bd0061;
    }

    #navigation {
        position: relative;
        z-index: 2;
    }

    #navigation > .table {
        position: relative;
    }

    #number-cell {
        position: absolute !important;
        top: 0;
        right: 0;
        z-index: 1;
        height: 60px;
        line-height: 60px;
        pointer-events: none;
    }

    #menu,
    #menu ul li ul,
    #navigation li ul li a {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #main {
        position: relative;
        z-index: 1;
    }
}

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

    .login-form .screen {
        position: absolute;
        top: 50px;
        left: 50%;
        margin: 0 0 0 -160px;
        background: white;
        border-radius: 3px;
        height: auto;
        width: 320px;
    }

    body.login,
    .login-form,
    .login-form .screen .phone input.phone-wrap,
    .login-form .screen .pass input.pass-wrap {
        background: none;
        width: auto;
        height: auto;
        top: 0;
        left: 0;
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .login h1,
    .login h2,
    .login-form h3 {
        color: #565656;
    }

    .login-form .screen .keypad,
    .login-form .screen .phone input,
    .login-form .screen .pass input {
        display: none;
    }

    .login-form .screen .phone input,
    .login-form .screen .pass input.pass-wrap,
    .login-form .screen .pass input,
    .login-form .screen .email {
        border: none;
    }

    .login-form .screen {
        padding: 20px;
    }
    .login-form .screen .phone,
    .login-form .screen .pass,
    .login-form .screen .phone input.phone-wrap,
    .login-form .screen .pass input.pass-wrap,
    .login-form input[type="submit"],
    .login-form .screen .email,
    .login-form input[type="tel"]:focus,
    .login-form input[type="text"]:focus,
    .login-form input[type="password"]:focus {
        display: block;
        width: 287px;
        text-align: center;
        background: #f9f9f9;
        border-radius: 3px;
        color: black;
        margin: 0 auto;
    }

    .login-form .screen .phone input.phone-wrap,
    .login-form .screen .pass input.pass-wrap,
    .login-form .screen .email {
        padding: 10px 20px;
    }

    .login-form input[type="submit"],
    .login-form input[type="submit"]:hover {
        margin: 15px auto 0 auto;
        background: #e20074;
        border: none;
        border-bottom: 2px solid #ca0068;
        color: white;
        height: 40px;
        line-height: 40px;
        padding: 0;
        -webkit-appearance: none;
    }
}

@media only screen and (max-width: 600px) {
    form.full-form,
    form.full-form tr,
    form.full-form tr td,
    form.full-form tr th,
    form.full-form .button,
    form.full-form input[type=text],
    form.full-form input[type=password],
    form.full-form input[type=number],
    form.full-form select,
    form.full-form textarea {
        display: block;
        margin: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    form.full-form tr > *:nth-child(2n - 1) label {
        padding: 0 0 5px 0;
        display: block;
    }

    form.full-form tr > *:nth-child(2n) input {
        margin: 0 0 5px 0;
    }

    .padding-10 {
        padding: 10px 0;
    }

    .pristroj-cena {
        white-space: nowrap;
        padding: 0 0 0 20px;
    }

    .block table select {
        width: 100%;
    }

    .list tr > *:first-child,
    #historyOfChanges tr > *:nth-child(2) {
        padding-left: 0;
    }

    .list tr > *:last-child {
        padding-right: 0;
    }
}

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

    #historyOfChanges .date,
    #searchResultList .phone {
        display: none;
    }

    #historyOfChanges .sub-date {
        display: inline-block;
        opacity: 0.8;
    }

    #searchResultList .sub-phone {
        display: block;
        margin: 4px 0 0 0;
    }
}