/**
 * FoodCoopShop - The open source software for your foodcoop
 *
 * Licensed under the GNU Affero General Public License version 3
 * For full copyright and license information, please see LICENSE
 * Redistributions of files must retain the above copyright notice.
 *
 * @since         FoodCoopShop 2.5.0
 * @license       https://opensource.org/licenses/AGPL-3.0
 * @author        Mario Rothauer <office@foodcoopshop.com>
 * @copyright     Copyright (c) Mario Rothauer, https://www.rothauer-it.com
 * @link          https://www.foodcoopshop.com
 */
@media only screen and (max-device-width: 850px) {
    .self-service,
    .self-service .header,
    .self-service #products {
       width: 100%;
    }
    .self-service .pw .quantity-in-units-input-field-wrapper input {
      width: 75% ! important;
    }
    body.customers.login #content.self-service {
       min-height: 100vh;
    }
    body.customers.login #responsive-header .responsive-cart {
        display: none;
    }
    .self-service #login-form form {
       padding: 0 2%;
    }
    body.self_services #content {
       border-right: none;
       display: none;
    }
    .self-service .pw {
       padding-left: 10px;
       width: 100%;
    }
    .self-service #login-form {
       padding-top: 0;
       text-align: center;
    }
    .self-service #login-form .input label {
       width: 95px;
    }
    .self-service .header h2,
    .self-service p.info {
       margin-bottom: 0;
       margin-left: 10px;
       width: 95%;
    }
    .self-service .header hr {
       display: none;
    }
    .self-service #SelfServiceForm {
       padding-left: 13px;
       padding-right: 13px;
       border-left: none;
    }
    .self-service form div.error-message {
       width: 100% ! important;
    }
    .self-service {
       padding-right: 0;
       padding-bottom: 10px;
    }
    .self-service .footer {
       display: none;
    }
    .self-service .right-box {
       float: left;
       position: static;
       display: none;
       width: 100%;
       padding-bottom: 20px;
    }
    .self-service .right-box .input.checkbox,
    .self-service #cart {
       width: 94%;
       margin-left: 3%;
       margin-right: 3%;
    }
    .self-service #cart {
       border: 1px solid #ccc;
       display: block ! important;
    }
    .self-service .continue-shopping {
        float: right;
        margin-top: 10px;
        margin-right: 5%;
    }
    .self-service #products {
       display: none;
       margin-left: 0;
       margin-top: 0;
       margin-bottom: 0;
       padding-top: 0px;
       min-height: calc(100vh - 55px - 50px - 1px);
    }
    body.self_services #responsive-header .shopping-limit-reached-info {
       width: 95%;
       margin-top: -7px;
    }
    .self-service .header {
       position: static;
       height: 50px;
    }
    body.self_services #responsive-header .left-wrapper {
       margin-top: 10px;
       margin-left: 2px;
       float: left;
    }
    body.customers.login #responsive-header .left-wrapper {
        display: none;
    }
    body.customers.login #camera,
    body.self_services #camera {
        width: 90%;
        height: auto;
        overflow: hidden;
        padding-left: 10%;
        display: none;
        margin-bottom: 5px;
        clear: both;
    }
    body.customers.login video,
    body.customers.login canvas,
    body.self_services video,
    body.self_services canvas {
        max-width: 100%;
        width: 100%;
    }
    body.customers.login canvas.drawing,
    body.customers.login canvas.drawingBuffer,
    body.self_services canvas.drawing,
    body.self_services canvas.drawingBuffer {
        position: absolute;
        top: 0;
        left: 0;
    }
    body.customers.login #responsive-header i.fa-circle-notch,
    body.self_services #responsive-header i.fa-circle-notch {
        margin-top: 12px;
        margin-left: 5px;
    }
    body.customers.login #responsive-header .btn-camera {
        margin-top: 5px;
        margin-left: 5px;
        float: left;
    }
    body.self_services #responsive-header .responsive-cart span.sum {
        margin-right: 5px;
    }
    body.self_services #responsive-header .logo-wrapper {
       float: left;
    }
    body.self_services .btn-add-deposit {
        float: right;
        margin-top: 11px;
    }
    .self-service .pw div.c2 {
       width: 40% ! important;
    }
    .self-service .pw div.c3 {
       width: 33% ! important;
    }
    .self-service .pw .quantity-in-units-input-field-wrapper {
        padding: 0;
        margin-left: 0;
        margin-bottom: 5px;
    }
}