body, html {
    margin: 0;
    min-height: 100%;
    height: 100%;
    font-family: Roboto, sans-serif;
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1501;
}

.dx-toolbar .dx-toolbar-item.menu-button {
    width: 60px;
    text-align: center;
    padding: 0;
}

    .dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
        color: #ff5722;
    }

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

    .dx-card.wide-card {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        border-right: 0;
        border-left: 0;
    }

.with-footer > div > div > .dx-scrollable-content {
    height: 100%;
}

    .with-footer > div > div > .dx-scrollable-content > .dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

.layout-body {
    background-color: #fff;
    flex: 1;
    height: 100%;
    min-height: 0;
}

    .layout-body .menu-container {
        height: 100%;
        width: 250px;
    }

    .layout-body .content {
        flex-grow: 1;
        height: 100%;
        line-height: 1.5;
    }

        .layout-body .content h2 {
            font-size: 30px;
            font-weight: 300;
            letter-spacing: -.5px;
        }

    .layout-body .content-block {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }

    .layout-body .content-footer {
        display: block;
        color: rgba(0,0,0,.609);
        border-top: 1px solid rgba(0,0,0,.1);
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .layout-body .responsive-paddings {
        padding: 20px;
    }

.layout-body-hidden {
    visibility: hidden;
}

@media screen and (min-width: 600px) {
    .layout-body .content-block {
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media screen and (min-width: 1280px) {
    .layout-body .responsive-paddings {
        padding: 40px;
    }
}

.menu-container .dx-widget {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif;
    line-height: 24px;
}

.menu-container .dx-treeview {
    white-space: nowrap;
}

    .menu-container .dx-treeview .dx-treeview-item {
        padding-left: 0;
        padding-right: 0;
    }

        .menu-container .dx-treeview .dx-treeview-item .dx-icon {
            width: 60px !important;
            margin: 0 !important;
        }

    .menu-container .dx-treeview .dx-treeview-node {
        padding: 0 0 !important;
    }

    .menu-container .dx-treeview .dx-treeview-toggle-item-visibility {
        right: 10px;
        left: auto;
    }

    .menu-container .dx-treeview .dx-rtl .dx-treeview-toggle-item-visibility {
        left: 10px;
        right: auto;
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
        font-weight: bold;
        border-bottom: 1px solid #515159;
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
        font-weight: normal;
        padding: 0 60px;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
        background: transparent;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * {
        color: #FF5722;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
        background-color: #3F3F4B;
    }

.row {
    display: flex;
}

.column {
    flex: 50%;
}

.form-group-caption {
    text-align: left;
}

.column-align-left {
    text-align: left !important;
}

.model-image {
    background-color: white;
    text-align: center;
    height: 200px;
}

    .model-image img {
        margin: auto;
        height: auto;
        /*width: 100%;*/
        max-height: 200px;
    }

@media (max-width: 600px) {
    .model-image img {
        width: 100%;
    }
}

.model-image div {
    text-align: right;
    height: 100%;
    position: relative;
}

    .model-image div span {
        position: absolute;
        bottom: 0;
        right: 0;
        padding-right: 10px;
        padding-bottom: 10px;
        color: #f44336;
    }

.complaint-confirmation {
    margin-top: 40px;
    margin-bottom: 50px;
    line-height: 40px;
}

.dx-form-group-caption-product {
    font-family: 'Montserrat', sans-serif !important;
    border-bottom: 2px solid #ffffff;
    text-align: left;
    padding-bottom: 10px;
}

.dx-form-group-caption-login {
    font-family: 'Montserrat', sans-serif !important;
    padding-top: 50px;
    color: #00000099;
}

.info-koncowe-label span {
    font-size: large;
    color: #000000;
}

.dx-button-mode-outlined.dx-button-default {
    color: #000000;
    border-color: #000000;
}

.custom-item-rodzaj-czesci > div {
    width: 200px;
}

    .custom-item-rodzaj-czesci > div.custom-rodzaj-czesci span {
        font-weight: bold;
        float: right;
    }

.nav-buttons {
    width: 100%;
}

.order-add-button {
    /*float: right;*/
    margin: auto;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.nav-buttons ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.topnav {
    background-color: #f2f2f2;
    overflow: hidden;
}

    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #fff;
            color: #000;
        }

.login-error > p {
    font-family: 'Montserrat', sans-serif !important;
    color: #f44336;
    background-color: #f2f2f2;
    font-size: 14px;
    display: inline-block;
}

.header-bergman {
    font-family: 'Montserrat', sans-serif !important;
    text-align: center;
    margin-top: 80px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
}

    .header-bergman > div > span {
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 0.5px;
        line-height: 21px;
        color: #00000099;
    }

    .header-bergman > div > img {
        margin-top: 5px;
    }

@media screen and (min-width: 500px) {
    .header-bergman-menu {
        background-color: black;
        padding: 10px;
        display: inline-block;
        width: 100%;
        height: 56px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 500px) {
    .header-bergman-menu {
        background-color: black;
        padding: 10px;
        display: inline-block;
        width: 100%;
        height: 56px;
        padding-right: 20px;
    }
}


.logout-button {
    float: right;
}

.header-bergman-text {
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}

div#login {
    margin: auto;
    background-color: #f2f2f2;
    text-align: center;
}

    div#login > form {
        padding-left: 10px;
        padding-right: 10px;
    }

#content-login {
    margin: auto;
    display: inline-block;
}

div#loginform, div#resetpasswordform {
    margin: auto;
    text-align: center;
    padding-bottom: 40px;
}

div#content {
    text-align: center;
    margin: auto;
}

@media screen and (min-width: 500px) {
    div#content {
        width: 70%;
    }
}

@media screen and (min-width: 400px) {
    #footer {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px;
        background-color: #000;
        color: #f2f2f2;
        padding: 10px;
        letter-spacing: 0.5px;
        height: 56px;
    }
}

@media screen and (max-width: 400px) {
    #footer {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 11px;
        background-color: #000;
        color: #f2f2f2;
        padding: 9px;
        letter-spacing: 0.5px;
        height: 56px;
    }
}

@media screen and (max-width: 300px) {
    #footer {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 8px;
        background-color: #000;
        color: #f2f2f2;
        padding: 10px;
        letter-spacing: 0.5px;
        height: 56px;
    }
}

div#complaint {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
}


@media screen and (min-width: 500px) {
    div#complaint {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 500px) {
    div#complaint {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.dx-datagrid-headers {
    background-color: #000 !important;
    color: #fff;
}

    .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-editor-cell):not(.dx-command-edit):not(.dx-datagrid-group-space) {
        background-color: #000 !important;
    }

        .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-editor-cell):not(.dx-command-edit):not(.dx-datagrid-group-space) > div {
            color: #fff;
        }

.mail {
    color: #ffffff !important;
}

.dx-datagrid-header-panel {
    padding: 0px !important;
}

.dx-form-group-caption {
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
}


.content-login-parent {
    text-align: center;
}

.dx-form-group-with-caption > .dx-form-group-content {
    border-top: 2px solid #ffffff !important;
}

.dx-toolbar .dx-toolbar-items-container {
    /*border-bottom: 2px solid #ffffff;*/
    margin-bottom: 10px;
}

.dx-popup-title.dx-toolbar {
    background-color: #000000;
    color: #ffffff;
}

.dx-popup-title {
    border-bottom: none !important;
}

.dx-datagrid-edit-popup > .dx-popup-normal > .dx-toolbar > .dx-toolbar-items-container {
    border-bottom: none !important;
}

.dx-icon-close:before {
    color: #ffffff !important;
}

.dx-overlay-content {
    background-color: #f2f2f2 !important;
    color: #f44336 !important;
    margin-bottom: 20px;
}

#complaint > .dx-button {
    margin-bottom: 50px;
}

div#fileuploader-container {
    background-color: white;
}

.dx-fileuploader-button.dx-widget {
    font-size: 10px;
    background-color: black;
    color: white;
    float: right;
}

.dx-fileuploader-button > .dx-button-content {
    padding: 6px !important;
}

.dx-fileuploader-button.dx-widget:hover {
    background-color: black;
    color: white;
}

.dx-fileuploader-button.dx-widget:focus {
    background-color: black;
    color: white;
}


.zgody-group {
    border: 1px solid #969696;
    border-radius: 4px;
    padding-left: 10px;
    margin-top: 20px;
    margin-right: 20px;
}

@media screen and (max-width: 767px) {
    .zgody-group {
        margin-right: 0px;
    }
}

.zgody-item {
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 0px;
}

@media screen and (max-width: 767px) {
    .zgody-item {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 10px;
    }
}

#grid-summarize {
    padding-top: 22px;
}

.custom-label .dx-field-item-label {
    padding-left: 0px !important;
}

    .custom-label .dx-field-item-label .dx-field-item-label-content .dx-field-item-label-text {
        color: rgba(0,0,0,.87);
    }

.custom-label-is-attachment .dx-field-item-label-text {
    color: red;
    visibility: visible;
}

.custom-label-is-attachment > label {
    -webkit-padding-start: 0px !important;
    padding-inline-start: 0px !important;
}

.additional-info-label .dx-field-item-label {
    padding-left: 0px !important;
}

.dx-toolbar-center {
    float: right !important;
}

.dx-empty-message {
    color: #f44336 !important;
}

#sessiontimeout {
    color: white;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding-right: 10px;
    font-size: 14px;
}

    #sessiontimeout p {
        margin: 0 auto;
        line-height: 35px;
    }

.changepassword-button {
    display: inline-flex;
}

    .changepassword-button span.dx-button-text {
        text-transform: none !important;
        font-weight: 700 !important;
    }

    .changepassword-button .dx-button-content {
        padding: 0 6px 6px 0 !important;
    }

.passwordchange-popup-class .dx-overlay-content {
    color: black !important;
}

.dx-toast-success {
    background-color: #8bc34a !important;
    text-align: center;
}

.dx-toast-success {
    color: black !important;
}