﻿@media (max-width: 767px) {

    .key-value-pair {
        display: block;
        width: 100%;
    }

    .key-value-pair .key,
    .key-value-pair .value {
        display: block;
        padding: 10px 10px;
        text-align: left;
    }

    .label-key-value > span {
        display: block;
        padding: 5px 0;
    }

    .form-button-div {
        margin-top: 16px;
        width: 300px;
    }

    .button-big {
        margin: 6px;
        padding: 4px 12px;
        font-size: 14px;
    }

    div.wrapper {
        width: auto;
    }

    #mobile-menu {
        display: block;
        font-size: 20px;
    }

    header div.table,
    header div.table div.row,
    header div.table div.cell,
    header div.table div.cell.left,
    header div.table div.cell.right,
    header div.menu-table,
    header div.menu-table div.menu-row,
    header div.menu-table div.menu-row span.menu-cell,
    header div.menu-table div.menu-row span.menu-cell span.userdata-wrapper,
    header div.menu-table div.menu-row span.menu-cell span.userdata-wrapper span.userdata-name,
    header div.menu-table div.menu-row span.menu-cell span.userdata-wrapper span.userdata-name span.userdata-loginname,
    header div.menu-table div.menu-row span.menu-cell span.userdata-wrapper span.userdata-name span.userdata-companyname {
        display: block;
        float: none;
    }

    header div.menu-table div.menu-row span.menu-cell.menu-item,
    a.header-menu-logout {
        display: none;
    }

    .filter {
        width: calc(100% - 16px) !important;
    }

    span.szuro-gombok-csomagolo {
        width: 100%;
    }

    input[type="button"].szuro-gomb {
        width: calc(100% - 16px);
    }

    main div.error-content {
        padding: 20px;
    }

    footer div.table,
    footer div.table .row,
    footer div.table .row .cell {
        display: block;
    }

    footer .table .row {
        padding: 0px 20px;
    }

    footer div.table .row .cell {
        display: block;
    }

    .k-menu .k-item, .k-widget.k-menu-horizontal > .k-item {
        display: block !important;
        float: none !important;
    }

    #MainMenu {
        display: none;
    }

    /* GLOBÁLIS */
    div.k-widget.k-window {
        max-width: 500px !important;
    }

    /* HEADER*/
    header > div > div > div > div.cell.left {
        text-align: center;
        padding: 20px 0px 10px 0px !important;
    }

    header > div > div > div > div.cell.right {
        text-align: right;
        padding-bottom: 20px !important;
        font-size: 20px !important;
    }

    div.teendokSubDiv {
        padding: 0px 0px 0px 0px !important;
        font-size: 22px !important;
        text-align: right;
    }

    .gridmobile-key-value-pair {
        display: block;
        width: 100%;
    }

    .gridmobile-key-value-pair .key,
    .gridmobile-key-value-pair .value {
        display: inline;
        text-align: left;
    }

    .gridmobile-key-value-pair.block .key,
    .gridmobile-key-value-pair.block .value {
        display: block;
        text-align: left;
    }

    .gridmobile-key-value-pair .key {
        font-weight: bold;
    }

    .gridmobile-key-value-pair .value {
        font-weight: normal;
        padding-bottom: 10px;
    }

    .gridmobile-key-value-pair .value input.megjegyzesKOSAR {
        width: 100%;
        display: block;
    }

    .gridmobile-key-value-pair.csomagvalaszto {
        margin-bottom: 10px;
    }

    .gridmobile-key-value-pair.csomagvalaszto .value .k-widget,
    .gridmobile-key-value-pair.csomagvalaszto .value .k-button {
        width: 100%;
    }

    /* 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(90% - 2px) !important;
    }

    div.ugyfeladatok > div.key-value-pair > span.value {
        width: calc(90% - 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(100% - 22px) !important;
        text-align: left;
        font-weight: bold;
    }

    div.termek div.key-value-pair span.value,
    div.termek div.tableRow div.key-value-pair span.value {
        width: calc(100% - 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: 300px;
        max-height: 300px;
    }

    div.termek div.leiras {
        padding: 20px;
    }

    div.termek div.leiras span {
        vertical-align: top;
        text-align: justify;
        line-height: 150%;
    }
    div div.leiras span span {
        font-weight: bold;
    }

    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;
        font-weight: bold;
    }

    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: 30%;
    }

    span.termekegysegar-comagolo {
        padding: 10px !important;
        text-align: left;
        vertical-align: middle !important;
        width: 100%;
    }

    span.termeknev-comagolo {
        text-align: left;
        vertical-align: middle !important;
        width: calc(70% - 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;
    }
}

@media (max-width: 767px) and (min-width: 480px) {

    /* HEADER */
    header > div > div > div > div.cell.right {
        text-align: center;
    }

    /* AKCIÓS ÚJSÁGOK*/
    div.module div.ujsagcsomagolo {
        margin: 0px 20px 20px 0px !important;
    }

    div.module div.ujsagcsomagolo:nth-of-type(2n+1) {
        margin: 0px 20px 20px calc(50% - 240px) !important;
    }

    div.module div.ujsagcsomagolo:nth-of-type(2n) {
        margin: 0px calc(50% - 240px) 20px 0px !important;
    }
}

@media (max-width: 479px) {

    /* HEADER */
    header > div > div > div > div.cell.right {
        text-align: center;
    }

    /* AKCIÓS ÚJSÁGOK*/
    div.module div.ujsagcsomagolo {
        margin: 0px 20px 20px 0px !important;
    }

    div.module div.ujsagcsomagolo:nth-of-type(n) {
        margin: 0px calc(50% - 115px) 20px calc(50% - 115px) !important;
    }

    .rendeles-mentes-lezaratlan-rendeleskent,
    .rendeles-torles,
    .rendeles-zaraseskuldes {
        display: block;
    }

    .rendeles-mentes-lezaratlan-rendeleskent input[type="submit"],
    .rendeles-torles input[type="submit"],
    .rendeles-zaraseskuldes input[type="button"] {
        width: 100%;
        margin: 5px 0px;
    }
}

@media (max-width: 479px) {
    .connected-carousels .stage {
        width: 320px;
    }

    .connected-carousels .stage li {
        width: 300px;
        height: 300px;
        line-height: 298px;
    }

    .connected-carousels .carousel-stage {
        height: 300px;
    }

    .connected-carousels .prev-stage,
    .connected-carousels .next-stage {
        height: 300px;
    }
}
