@media(max-width: 1219px) {
    .p10 {
        padding: 8px 10px
    }
    #ablakguru-app {
        max-width: 950px;
    }

    #ablakguru-app-editor {
        width: 950px
    }
    .progress-bar-item {
        width: 90px;
        height: 70px
    }

   

    .ablakguru-slider-item img {
        width: 160px;
        max-height: 160px;
    }

    .pseudo_arrow {
        width: 50px;
        height: 50px;
    }

    .editor-tab.active {
        padding: 0 60px;
    }

    #kiegeszitok_tab {
        width: 700px;
    }
}

@media(max-width: 991px) {
    .p10 {
        padding: 6px 10px
    }
    #ablakguru-app {
        max-width: 750px;
    }

    #ablakguru-app-editor {
        width: 750px
    }

    #progress-bar{
        flex-wrap: wrap;
    }


    .progress-bar-item {
        margin: 5px 0;
        height: 70px;
    }

    .ablakguru-slider-item img {
        width: 130px;
        max-height: 130px;
    }

    .pseudo_arrow {
        width: 40px;
        height: 40px;
    }

    .editor-tab.active {
        padding: 0 20px;
    }

    #kiegeszitok_tab {
        width: 600px;
    }

    #progress-bar-wrapper {
        margin-top: 15px;
    }

    #active_tab_title {
        font-size: 23px;
    }

    .slider-item-badge {
        font-size: 13px;
    }

    .ablakguru-slider-item img {
        width: 120px;
        max-height: 120px;
    }

    .editor-tab.active {
        font-size: 14px;
    }

    #tab-title-buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f7f7f7;
        margin: 0 -10px
    }

    .szin_oldalszam_radio_selection {
        margin: 8px 10px
    }

    .pseudo_arrow_left {
        left: 8px;
    }

    .pseudo_arrow_right {
        right: 8px;
    }

    #progress-bar {
        font-size: 12px;
    }

    .msg-info {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999999999999;
    }

    .slider-popup-info .msg-info{
        position: absolute;
        top: 0;
        left: unset;
        right: -30px;
        transform: none;
        width: 70vw;
    }
}

.mobile-only {
    display: none
}

.uni-btn .no-mobile {
    vertical-align: top;
}
@media(max-width: 767px) {
    .konfigurator_head {
        flex-direction: column;
        font-size: 13px;
    }
    .konfigurator_head > * {
        width: 100%;
    }

    .konfigurator_head img[src*="ag_logo.png"],
    .logo-wrapper {
        margin: 0 auto;
        max-width: 130px !important;
    }

    .close-txt {
        text-align: center;
        padding: 0;
    }

    .mobile-center{
        text-align: center;
    }

    .no-mobile {
        display: none;
    }

    .mobile-flex-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .uni-btn {
        font-size: 13px;
        padding: 5px 11px;
    }

    #ablakguru-app {
        padding: 0;
        padding-bottom: 50px;
    }

    .mobile-only {
        display: block
    } 

   

    #konfigurator_bezaras.uni-closer::before {
        width: 10px;
        height: 10px;
        background-color: transparent;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
    }

    #konfigurator_bezaras.uni-closer::after {
        top: 43%;
        left: 12px;
        width: 50%;
        height: 2px;
        background-color: transparent;
        border-bottom: 2px solid #222;
        transform: none;

    }

    .listed-project-name-options{
        flex-direction: column;
        font-size: 13px;
    }

    .listed-project-name-options > div {
        width: 100% !important;
    }

    .extra_info.active {
        width: calc(100% + 30px) !important;
        left: -15px
    }

    .mobile-list-img {
        margin: 5px auto
    }

    .project_status_toggler {
        bottom: 5px;
        font-size: 11px;
    }

    .listed-project-options {
        position: absolute;
        top: -22px;
        right: -10px;
        justify-content: flex-end;
    }

    .listed-projects-dropdown-toggler {
        width: 30px;
        height: 25px;
    }

    .listed-project-item {
        padding-bottom: 30px;
    }

    .drag_icon {
        display: none !important;
    }

    #ablakguru_projects_after{
        padding-right: 10px;
    }

    #hibabejelentes {
        bottom: 26px;
        width: 100%
    }

    #ablakguru-app-editor {
        width: 100%;
    }

    .progress-bar-item {
        height: 75px;
        width: 70px;
    }

    .progress-item-status {
        width: 15px;
        height: 15px;
    }

    .progress-item-status::before,
    .progress-item-status::after {
        width: 15px;
        height: 1px;
    }

    .progress-item-status.selected::before {
        width: 5px;
        height: 10px;
    }

    #alert-msg {
        width: calc(100% - 10px);
    }

    #active_tab_title {
        font-size: 12px;
    }

    .msg-btn {
        font-size: 12px;
    }

    .editor-tab.active {
        padding: 0;
        font-size: 13px;
    }

    .pseudo_arrow_left {
        left: 0;
    }

    .pseudo_arrow_right {
        right: 0;
    }

    .pseudo_arrow {
        background-color: #b00000c9;
    }

    .progress-bar-item span {
        font-size: 8px;
    }

    .progress-bar-item {
        background-size: cover;
        display: inline-block;
        vertical-align: middle;
    }

    #progress-bar > img {
        display: inline-block;
        vertical-align: middle;
    }

    #progress-bar {
        display: block;
        white-space: nowrap;
        overflow: auto;
        padding: 0 10px;
    }

    #active_tab_title{
        white-space: nowrap;
        padding: 0;
    }

    .navigation-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uni-btn {
        white-space: nowrap;
        font-size: 12px;
    }

    #tab-title-buttons {
        flex-direction: column;
        padding: 5px 0;
    }

    #meretbekeres_tab {
        padding: 10px 0;
    }

    .meretbekero_form_row {
        font-size: 12px;
    }

    .meretbekero_form_row i,
    .meretbekero_form_row small {
        font-size: 9px;
    }

    .arrow-vizszintes {
        width: 60px;
    }

    .arrow-fuggoleges {
        height: 60px;
    }

    .ablak_toldok .toldo_pozicio {
        width: 100%;
    }

    .meret_megadas_ablak_bal_jobb_toldok {
        flex-direction: column;
    }

    #meretberekes_main_image {
        display: none;
    }

    .toldo_arrow_bal,
    .toldo_arrow_jobb,
    .toldo_arrow_felso,
    .toldo_arrow_also {
        display: none;
    }

    .ablak_toldok {
        padding-top: 40px;
    }

    .msg-info {
        width: calc(100vw - 20px)
    }

    #confirm_inner {
        width: calc(100% - 20px);
        padding:10px;
        font-size: 14px;
    }

    #confirm_options > div {
        padding: 4px 10px;
        border-radius: 5px;
        font-size: 14px;
    }

    #kiegeszitok_tab {
        width: 100%;
        padding: 10px 0;
    }

    .kiegeszito_row {
        padding: 5px 0;
    }

    .kieg-img {
        width: 100px !important
    }

   /*  .kiegeszito_toggler {
        width: 30px;
        height: 30px;
        margin: 0 4px;
    } */

    .kieg-neve {
        display: block;
    }

    .kieg-col-1 {
        width: 150px;
    }

    #qty {
        width: 70px;
    }

    #ossz-db {
        margin-right: 5px;
    }

    #osszesito_tab {
        padding: 10px 0;
    }

    .osszesito_item_wrapper {
        width: calc(53.33% - 19px);
        margin: 2px;
        cursor: pointer;
    }

    .extra_info.active {
        padding: 5px;
    }

    .arrow-fuggoleges {
        right: -8px;
    }

    .meretbekero_form, .toldok_megadasa_wrapper {
        padding: 10px 0;
    }

    .width_parts_wrapper {
        flex-direction: column;
    }

    .width_parts_wrapper > div {
        width: 100%;
    } 

    .qty-set-row {
        margin-top: 7px;
    }

    .ablakguru-slider-item {
        width: 70vw
    }

    .order_form_block_adat_item {
        flex-direction: column;
        align-items: flex-start;
    }

    .order_form_block_adat_item > div {
        margin-bottom: 3px;
        width: 100% !important;
    }

    .order_form_block_adat_item input, #fizetesi_mod, #szallitasi_mod, #megjegyzes {
        width: 100% !important;
    }

    .order_form_block_adat_item select,
    .order_form_block_adat_item input {
        width: 100%;
    }

    .gotocart-btn {
        font-size: 18px;
    }
}

@media(min-width: 768px) {
    .column-on-wide {
        display: flex;
        flex-direction: column;
    }

    .column-on-wide > * {
        order: 2;
    }

    .column-on-wide strong{
        margin-left: 0 !important;
        order: 1 !important;
    }
}