﻿@media (max-width: 975px) and (min-width: 768px) {

    #MainMenu {
        font-size: 18px;
    }

    .key-value-pair {
        display: block;
        width: 100%;
    }

        .key-value-pair .key,
        .key-value-pair .value {
            display: table-cell;
            padding: 10px;
        }

    .label-key-value-wrapper {
        display: table;
        margin: 0 auto;
    }

    .label-key-value {
        display: table-row;
    }

        .label-key-value > span {
            display: table-cell;
        }

        .label-key-value span.label {
            padding-right: 11px;
        }

        .label-key-value span.key {
            padding: 5px 10px 5px 0;
        }

        .label-key-value .value {
            padding: 5px 0;
        }

    /*.key-value-pair .key,
    .key-value-pair .value {
        display: block;
        padding: 10px 10px;
        text-align: left;
    }

    .label-key-value {
        display: inline-block !important;
        width: 100% !important;
    }

        .label-key-value > span {
            display: inline-table !important;
            padding: 5px 0px 5px 0px !important;
        }

            .label-key-value > span.label {
                width: calc(30% - 10px) !important;
                text-align: right;
                margin-right: 8px;
            }

            .label-key-value > span.key {
                width: calc(70% - 2px) !important;
            }

            .label-key-value > span.value {
                margin-left: calc(30% - 10px);
                width: calc(70% - 2px) !important;
            }*/

    div.wrapper {
        min-width: 768px;
    }

    #mobile-menu {
        display: block;
    }

    div.menu-row span.menu-cell.menu-item,
    a.header-menu-logout {
        display: none;
    }

    div#page-title {
        min-width: 768px;
    }

    li.header-menu-item-hide {
        display: block;
    }

    .filter {
        width: calc(50% - 16px) !important;
    }

    span.szuro-gombok-csomagolo {
        width: 100%;
    }

    input[type="button"].szuro-gomb {
        width: calc(50% - 16px);
    }

    main div.error-content {
        padding: 20px;
    }
    
    footer div.table,
    footer div.table .row,
    footer div.table .row .cell {
        display: block;
    }

    footer div.table {
        padding: 0px 20px;
        width: auto;
    }

    footer div.table .row .cell {
        display: block;
    }

    footer div.table .row .cell:nth-child(1) {
        width: calc(50% - 30px);
        display: block;
        float: left;
    }

    footer div.table .row .cell:nth-child(2) {
        width: calc(50% - 30px);
        display: block;
        float: right;
    }

    footer div.table .row .cell:nth-child(3) {
        display: block;
        clear: both;
    }

    .k-menu .k-item, .k-widget.k-menu-horizontal > .k-item {
        display: block !important;
        width: calc(50% - 1px);
        float: left;
    }

    #MainMenu {
        display: none;
    }

    .gridmobile-key-value-pair {
        display: table-row;
        width: 100%;
    }

    .gridmobile-key-value-pair .key,
    .gridmobile-key-value-pair .value {
        display: table-cell;
        padding: 10px 0px;
        text-align: left;
    }

    .gridmobile-key-value-pair .key {
        font-weight: bold;
        width: 250px;
    }

    .gridmobile-key-value-pair .value {
        font-weight: normal;
    }

    .gridmobile-key-value-pair .key *,
    .gridmobile-key-value-pair .value * {

    }

    /* GLOBÁLIS */
    div.k-widget.k-window {
        max-width: 700px !important;
    }

    /* HEADER*/

    header > div > div > div > div.cell.left {
        text-align: center; 
        vertical-align: middle;
        padding: 20px 0px 20px 0px !important;
    }
    header > div > div > div > div.cell.right {
        text-align: right;
        vertical-align: middle;
        padding: 20px 20px 20px 0px !important;
        font-size: 20px !important;
    }

    div.teendokSubDiv {
        padding: 0px 20px 0px 20px !important;
        text-align: right;
    }

    /* HEADER - VÉGE*/

    /* PARTNERADATOK */

    div.k-content > div > div.table.partneradatok > div.szerkesztesSpan {
        width: calc(100% - 20px) !important;
        text-align: right;
        display: inline-table !important;
        padding: 10px !important;
    }

    div.k-content > div > div.table.partneradatok > div.key-value-pair {
        display: inline-block !important;
        width: 100% !important;
        border-top: 1px solid #c9c9c9;
    }

    div.k-content > div > div.table.partneradatok > div.key-value-pair > span {
        display: inline-table !important;
    }
    div.k-content > div > div.table.partneradatok > div.key-value-pair > span.key {
        width: calc(40% - 22px) !important;
    }
    div.k-content > div > div.table.partneradatok > div.key-value-pair > span.value {
        width: calc(60% - 22px) !important;
    }
    div.k-content > div > div.table.partneradatok > div.divider {
        width: 100% !important;
        height: 20px !important;
        border-top: 1px solid #c9c9c9;
    }
    div.k-content > div > div.table.partneradatok > div.key-value-pair.blank {
        display: none !important;
    }
    /* PARTNERADATOK - GRIDEK - VÉGE */

    /* PARTNERADATOK - SZERKESZTÉS */

    div.ugyfeladatok > div.key-value-pair {
        display: inline-block !important;
        width: 100% !important;
    }
    div.ugyfeladatok > div.key-value-pair > span {
        display: inline-table !important;
        padding: 5px 0px 5px 0px !important;
    }
        div.ugyfeladatok > div.key-value-pair > span.key {
            width: calc(30% - 10px) !important;
            text-align: right;
            margin-right: 8px;
        }
    div.ugyfeladatok > div.key-value-pair > span.value {
        width: calc(70% - 2px) !important;
    }

    div.ugyfeladatok > div.key-value-pair.blank {
        display: none !important;
    }

    /* PARTNERADATOK - SZERKESZTÉS - VÉGE */

    /* TERMÉKEK - RÉSZLETEK */

    div.termek div.tableRow {
        display: inline-block !important;
        width: calc(100% - 20px) !important;
    }

    div.termek div.key-value-pair,
    div.termek div.tableRow div.key-value-pair {
        display: inline-block !important;
        width: calc(100% - 4px) !important;
        border-bottom: 1px solid #c9c9c9;
    }

    div.termek div.key-value-pair.nettoEgysegar {
        border-top: 1px solid #c9c9c9;
    }

    div.termek div.key-value-pair span,
    div.termek div.tableRow div.key-value-pair span {
        display: inline-table !important;
    }

    div.termek div.key-value-pair span.key,
    div.termek div.tableRow div.key-value-pair span.key {
        width: calc(33% - 22px) !important;
        text-align: right;
    }

    div.termek div.key-value-pair span.value,
    div.termek div.tableRow div.key-value-pair span.value {
        width: calc(67% - 22px) !important;
        text-align: left;
    }

    div.termek div.imageWrapper {
        width: calc(100% - 4px) !important;
        padding: 0 !important;
        vertical-align: middle; 
        text-align: center;
        float: left;
    }

    /* kendo mobile css-ek a .km-widget *-ra border-box-ot raknak, ami nekünk itt rossz */
    div.termek div.imageWrapper * {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-background-clip: content-box;
        background-clip: content-box;
    }

    div.termek div.imageWrapper img {
        max-width: 430px;
        max-height: 430px;
    }

    div.termek div.leiras {
        padding: 20px;
    }

    div.termek div.leiras span {
        vertical-align: top;
        text-align: justify;
        line-height: 150%;
    }

    div.termek div.kapcsolodoTermekekFejlec,
    div.termek div.kapcsolodoTermekekTablazat {
        display: inline-block !important;
        width: calc(100% - 4px) !important;
        border-top: 1px solid #c9c9c9; 
    }

    div.termek div.kapcsolodoTermekekFejlec {
        padding: 16px 0px;
    }

    div.termek div.kapcsolodoTermekekTablazat div span {
        display: inline-table !important;
    }

    div.kapcsolodoTermekekTablazat div span.termekkep-csomagolo {
        padding: 10px !important;
        text-align: center;
        vertical-align: middle !important;
        width: 15%;
    }

    span.termekegysegar-comagolo {
        padding: 10px !important;
        text-align: right;
        vertical-align: middle !important;
        width: 20%;
    }

    span.termeknev-comagolo {
        text-align: left;
        vertical-align: middle !important;
        width: calc(65% - 54px);
    }

    /* TERMÉKEK - RÉSZLETEK - VÉGE */

    /* POPUP INPUT height fix   */
    #msg_template > div.msg_content.msg-box-false > span > span {
        height: 40px !important;
    }
    #msg_template > div.msg_content.msg-box-false > span > span > span.k-input {
        height: 30px !important;
    }

    /* AKCIÓS ÚJSÁGOK*/
    div.module div.ujsagcsomagolo {
        margin: 0px 20px 20px 0px !important;
    }

    div.module div.ujsagcsomagolo:nth-of-type(3n+1) {
        margin: 0px 20px 20px calc(50% - 368px) !important;
    }

    div.module div.ujsagcsomagolo:nth-of-type(3n) {
        margin: 0px calc(50% - 360px) 20px 0px !important;
    }

    .gridmobile-key-value-pair.csomagvalaszto {
        display: block;
        margin-bottom: 10px;
    }

    .gridmobile-key-value-pair.csomagvalaszto .key,
    .gridmobile-key-value-pair.csomagvalaszto .value {
        display: inline-block;
        width: calc(50% - 10px) !important;
        float: left;
    }
    
    .gridmobile-key-value-pair.csomagvalaszto .key {
        margin: 5px 10px 5px 0px !important;
    }

    .gridmobile-key-value-pair.csomagvalaszto .value {
        margin: 5px 0px 5px 10px !important;
    }

    .gridmobile-key-value-pair.csomagvalaszto .value .k-widget,
    .gridmobile-key-value-pair.csomagvalaszto .value .k-button {
        width: 100%;
    }

    .termek-gridtemplate-csomagolo {
        display: block;
    }
}
