/* input(85,26): run-time error CSS1036: Expected expression, found '%' */
/*  Turk Telekom=
    Turkcell=#2855ac
    Penti=#fa5373
    Koçtaş=#ec6e00
    Penti=#fa5373
    File=#f79400
    Opet=#134fae
    Eve=#f44470
    MediaMarkt=#df0000
    Hakmar=#4db848

*/
/*Tema Renkleri */
:root {
    /*---primary-color: #0872AE;//blue*/
    /*--primary-color: #ec6e00; //orange*/
    /*--primary-color: #df0000; //red*/
    --primary-color: #ee7624; 
    /*--primary-color: 3a78c2 ;*/ /* flormarpink*/
    /*--primary-color: #fa5373; */ /* penti 2025-04*/
    /*--primary-color: #144734;* /* boldy 2025-04*/
}
.w2ui-btn-customcolor {
    background-color: var(--primary-color);
}

button.w2ui-btn.w2ui-btn-customcolor {
    color: white !important;
    background-color: var(--primary-color) !important;
    background-image: unset !important;
}

.w2ui-btn-customcolor {
    color: white !important;
    background-color: var(--primary-color) !important;
    background-image: unset !important;
}

.w2ui-tab.w2ui-tab-custom {
    opacity: 1; 
    cursor: pointer;
    background: rgba(0, 0, 0, 0.035);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    margin: 0 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
    .w2ui-tab.w2ui-tab-custom:not(.active) {
        opacity: 1;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.035);
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 8px;
        margin: 0 6px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }
    /*.w2ui-tab.w2ui-tab-custom:not(.active)::after {
        content: "▾";
        /*margin-left: 6px;
        font-size: 11px;
        opacity: 0.6;
    }*/
    .w2ui-tab.w2ui-tab-custom:not(.active):hover {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.28);
    }

    .w2ui-tab.w2ui-tab-custom.active {
        opacity: 1;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.035) !important;
        border: 1px solid #3b82f6 !important;
        border-radius: 8px !important;
        margin: 0 6px !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
        color:#3b82f6 !important;
    }

/*end Tema Renkleri */
    body {
    /*  background: url(/images/planogram_index_bg_turkuaz_hd_flu.jpg?v=IoqKrKFRYnjipRx1VHrMu4bdT38);*/
    background: url(/images/planogram_index_bg_turuncu_hd_flu.jpg?v=R464RiOfisvbiH_pDaNEtbaX-eQ);
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: %50 %10 !important;
    background-blend-mode: screen
}


.w2ui-overlay .w2ui-overlay-body.w2ui-white {
    color: #3c3c3c;
    text-shadow: none;
    background-color: #fafafa;
    border: 1px solid #cccace;
    box-shadow: 0px 0px 1px 1px #ffffff;
    width: auto !important;
    min-width: 150px !important;
}


/*planogramvariantversion popupgrid*/
.gird-container.popup-grid {
    top: 20% !important;
    left: calc(50% - 340px) !important;
    z-index: 1000;
    position: absolute;
}

#grid2 {
    width: 100%;
    height: 100%;
}
.grid-overlay {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    background: rgba(0,0,0,.5);
    z-index: 999;
}
.version-detail-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    background: rgba(0,0,0,.5);
    z-index: 9999;
}
.storeLayout-svg-container {
    background-color: #f4f4f9;
    padding:24px;
    /*display: contents;*/
}
.storeLayout_svg-group {
    background-color: #f4f4f9 !important;
    border: 2px solid #c3c3c9;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    padding-top: 4px;
}


/* Sifremi unuttum*/
.password-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.password-header {
    margin-bottom: 20px;
}

.password-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.password-email-input {
    padding: 10px;
    width: 300px;
    margin-bottom: 10px;
}

.password-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

    .password-button:hover {
        background-color: #45a049;
    }

.w2ui-grid-box {
    top: 0px !important;
}

@media screen and (max-width: 1200px) {
    body {
        font-size: 0.9rem;
    }
}


/*ICONS*/
[class^="custom-icon-"] {
    content: ''; /* gerçek ikon yerine 'boş' kutu    */
    width: 22px;
    height: 22px;
}

.custom-icon-align-horizontally {
    content: url('../Icons/Align_Horizontally.png?v=inQDsOM5Ryv1UhZ2TbQ1QFJ90sI');
}
.custom-icon-align-vertically {
    content: url('../Icons/Align_Vertically.png?v=x_9JpSIFgrooqPhkUkFLufqTP_g');
}
.custom-icon-align-left {
    content: url('../Icons/Align_Left.png?v=gPDyAhWglPYJ8wvuNPNFL6mP7Gs');
}
.custom-icon-align-right {
    content: url('../Icons/Align_Right.png?v=Mupfyn3GVAklze-eUb5czgPPtB0');
}
.custom-icon-align-bottom {
    content: url('../Icons/Align_Bottom.png?v=cRHfraFyfxUkkaTI-a6PLDHuJeg');
}
.custom-icon-align-top {
    content: url('../Icons/Align_Top.png?v=lyetHLZSiGWNoIhwOJUpox5gmEQ');
}
.custom-icon-copy {
    content: url('../Icons/Duplicate.png?v=80Mummz7ECX4k0SEdAHftWyKobM');
}
.custom-icon-undo {
    content: url('../Icons/Undo.png?v=cb-DBGNIxjWy6hYrLEK5S_bUjJ8');
}
.custom-icon-redo {
    content: url('../Icons/Redo.png?v=vn0tuZkhHbUcF6Zr17CKd_z8xuk');
}
.custom-icon-trash {
    content: url('../Icons/Trash.png?v=fvPKWqjSBLyxsUl4bjUZxHj2mc0');
}
.custom-icon-trash {
    content: url('../Icons/Trash.png?v=fvPKWqjSBLyxsUl4bjUZxHj2mc0');
}
.custom-icon-merge-vertical {
    content: url('../Icons/Merge_Vertical.png?v=eqwbCzYdm0zIzCmXto6R28BeE6Q');
}
.custom-icon-merge-horizontal {
    content: url('../Icons/Merge_Horizontal.png?v=LrokKnNqggtpLgSFvLvbIFwVhmY');
}
.custom-icon-double-up {
    content: url('../Icons/Double_Up.png?v=GfNybSXOC6i2KF4aydSXc3Pcklc');
}
.custom-icon-double-down {
    content: url('../Icons/Double_Down.png?v=CiI-Slw40obkggUMOriIu9bLkAM');
}
.custom-icon-double-right {
    content: url('../Icons/Double_Right.png?v=oQERbCB4zF6UEV2r7w7CvYKBwEc');
}
.custom-icon-double-left {
    content: url('../Icons/Double_Left.png?v=o1BihcKDMQD2q2dDmpE0aBUlASU');
} 
    /*Burdan sonra tasarım değişiyor.*/
@media screen and (min-width: 768px) {




        /*Login*/

        .login-container {
            display: flex;
            height: 100vh;
        }

        .background-image {
            position: relative;
            width: 33%;
        }

            .background-image .logo-background {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .vodafone-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 256px;
            height: 256px;
        }

        .telekom-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 67%;
            background-color: #ffffff;
        }

        .login-text {
            margin-top: 0;
            color: #555555;
            font-weight: bolder;
        }
        /*
.login-icon {
    width: 56px;
    height: 73px;
    margin-bottom: 12px;
}*/

        .login-icon {
            width: 350px;
            margin-bottom: 12px;
        }

        .login-input {
            width: 400px;
            height: 58px;
            margin-bottom: 10px;
            border-radius: 8px;
            background-color: #fbfbfb;
            border: 1px solid #ebebeb;
            padding-left: 12px;
        }

        .login-button {
            width: 200px;
            height: 56px;
            margin-top: 10px;
            background-color: #233342;
            box-shadow: 0px 0px 1px #203141;
            color: #ffffff;
            border-radius: 8px;
            font-weight: bold;
            font-size: 22px;
        }

        .login-checkboxform {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            width: 400px;
        }

        .login-checkbox {
            margin-right: 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ebebeb;
            background-color: #fbfbfb;
        }

            .login-checkbox:checked {
                background-color: #555555;
            }

        .login-label {
            margin: 0;
        }




        .w2ui-select.w2field.w2ui-input {
            border-radius: 8px !important;
            background-color: #ffffff !important;
            width: auto !important;
        }

        .combo-label {
            width: auto !important;
            color: #000000 !important;
            padding-left: 15px !important;
            font-weight: bold;
        }

        .w2ui-field.w2ui-span3.combofield {
            width: 100%;
            background-color: #f1f1f1;
            margin-left: 0px !important;
            display: flex;
            /*flex-wrap: nowrap;*/
            justify-content: center;
            padding: 16px;
            border-radius: 12px;
        }

            .w2ui-field.w2ui-span3.combofield form {
                display: flex;
                gap: 4vh;
                /*        width:100%;
        justify-content:center;*/
            }

        .grid-container {
            display: flex !important;
            width: 100% !important;
            height: 100% !important;
            justify-content: flex-start !important;
            align-items: center !important;
            padding-top: 0px !important;
        }

        /*    .w2ui-grid .w2ui-grid-toolbar {
        padding: 18px 5px;
        height: 60px !important;
    }*/
        /*Tema Renkleri*/
        .w2ui-grid .w2ui-grid-header {
            padding: 16px 12px 12px 12px;
            font-size: 23px;
            height: 60px;
            background-color: white;
            font-weight: bold;
            /*color: #2c6973 !important;*/
            color: var(--primary-color) !important;
            border-bottom: none !important;
            border-radius: 12px;
        }
        /*Tema Renkleri*/
        .w2ui-grid .w2ui-grid-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0px;
            padding: 0px;
            text-align: center;
            font-size: 11px;
            height: 24px;
            overflow: hidden;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            -o-user-select: text;
            user-select: text;
            box-shadow: 0px -1px 4px #f5f5f5;
            color: #444;
            background-color: #ffffff;
            /*border-top: 1px solid #17a2b8;*/ /*Turk Telekom*/
            border-top: 1px solid var(--primary-color);
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
        }

        .w2ui-form .w2ui-page {
            position: absolute;
            left: 0;
            right: 0;
            overflow: auto;
            padding: 10px 5px 0 5px;
            border-left: 1px solid inherit;
            border-right: 1px solid inherit;
            background-color: inherit;
            border-radius: 3px;
            display: flex;
            justify-content: space-evenly;
        }
        /*        .w2ui-form .w2ui-page.page-1 {
            position: absolute;
            left: 0;
            right: 0;
            overflow: auto;
            padding: 10px 5px 0 5px;
            border-left: 1px solid inherit;
            border-right: 1px solid inherit;
            background-color: inherit;
            border-radius: 3px;
            display: flex;
            justify-content: space-evenly;
        }*/

        /*Tema Renkleri */
        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button {
            position: relative;
            z-index: 20;
            height: 30px;
            min-width: 30px;
            padding: 2px;
            /*border: 1px solid #17a2b8;*/ /*Turk Telekom*/
            border: 1px solid var(--primary-color);
            border-radius: 4px;
            background-color: #cfcfcf;
            white-space: nowrap;
            margin: 0 1px;
            cursor: default;
            user-select: none;
            flex-shrink: 0;
            align-content: space-evenly;
            /* text-align: -webkit-right; */
        }

        .w2ui-grid {
            position: relative;
            overflow: hidden !important;
            border: none !important;
        }
            /*Tema Renkleri */
            .w2ui-grid .w2ui-grid-toolbar {
                position: absolute;
                /*border-bottom: 1px solid #17a2b8;*/ /*Turk Telekom*/
                border-bottom: 1px solid var(--primary-color);
                background-color: #f1f1f1;
                padding: 16px 3px 0px 3px;
                margin: 0px;
                box-shadow: 0px 1px 2px #f5f5f5;
                border-radius: 12px;
                height: 60px !important;
            }

        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button .w2ui-tb-text {
            margin-left: 25px;
            color: #000000;
            padding: 5px;
            font-weight: bold;
            margin-top: -4px;
        }
        /*Tema Renkleri */
        .w2ui-grid .w2ui-grid-body div.w2ui-col-header {
            height: auto !important;
            width: 100%;
            color: #f4f9f9;
            font-size: 16px;
            /*background-color: #17a2b8;*/ /*Turk Telekom*/
            background-color: var(--primary-color);
            overflow: hidden;
            padding-right: 10px !important;
            font-weight: 400;
            padding-bottom: 4px;
            padding-top: 4px;
            border-right-style: ridge;
            border-right-width: 2px;
            /*border-radius:12px;*/
        }

        .w2ui-grid .w2ui-grid-body table .w2ui-head {
            margin: 0px;
            padding: 0px;
            border-right: unset !important;
            border-bottom: unset !important;
            color: #656164;
            background-image: linear-gradient(#ffffff, #f9f9f9);
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-columns, .w2ui-grid .w2ui-grid-body .w2ui-grid-fcolumns {
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 8px;
            right: 0px;
            box-shadow: 0px 1px 4px #efefef;
            height: auto;
            border-radius: 12px;
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 48px !important;
            bottom: 0px;
        }

            .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd {
                color: inherit;
                background-color: #f1f1f1;
                border-bottom: unset !important;
                height: 50px !important;
            }

            .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even {
                color: inherit;
                background-color: #fbfbfb;
                border-bottom: unset !important;
                height: 50px !important;
            }

        .w2ui-grid .w2ui-grid-body table td:nth-child(2) {
            border-top-left-radius: 12px !important;
            border-bottom-left-radius: 12px !important;
        }

        .w2ui-grid .w2ui-grid-body table td:last-child {
            border-top-right-radius: 12px !important;
            border-bottom-right-radius: 12px !important;
        }

        .w2ui-grid .w2ui-grid-body table td {
            border-bottom: none !important;
            border-right: none !important;
        }

        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button .w2ui-tb-icon > span {
            font-size: 15px;
            color: #000000;
        }

        .w2ui-grid .w2ui-grid-body table {
            border-spacing: 0px 8px;
            border-collapse: separate;
            table-layout: fixed;
            width: 1px;
        }

        .w2ui-grid-columns table {
            border-spacing: 0px !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            width: 1px !important;
        }

            .w2ui-grid-columns table td {
                border-bottom: none !important;
                border-right: 1px solid #f1f1f1;
            }

        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button.over {
            border: 1px solid transparent !important;
            background-color: #c6c6c6 !important;
        }

            .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button.over .w2ui-tb-text {
                color: unset !important;
            }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd.w2ui-record-hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd.w2ui-record-hover {
            color: inherit;
            background-color: #c6c6c6 !important;
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd.w2ui-empty-record:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd.w2ui-empty-record:hover {
            background-color: #f1f1f1 !important;
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even.w2ui-record-hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even.w2ui-record-hover {
            color: inherit;
            background-color: #c6c6c6;
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even.w2ui-empty-record:hover,
        .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even.w2ui-empty-record:hover {
            background-color: #fbfbfb;
        }

        .w2ui-grid .w2ui-editable input {
            position: relative;
            top: -1px;
            border: 0 !important;
            border-radius: 8px !important;
            border-color: transparent !important;
            padding: 3px !important;
            display: inline-block;
            width: 100% !important;
            height: 100% !important;
            pointer-events: auto !important;
        }

        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button .w2ui-tb-icon {
            float: right !important;
            width: 22px;
            margin: 0px 0 0 1px;
            text-align: center;
        }

        .w2ui-tb-text {
            text-align: left !important;
            font-size: 14px !important;
            float: left !important;
        }
        /* Search Input*/
        .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all {
            outline: none !important;
            border-radius: 6px !important;
            line-height: normal !important;
            height: 30px !important;
            width: 300px !important;
            border: 1px solid #a2a2a2 !important;
            color: #000 !important;
            background-color: #ffffff !important;
            padding: 1px 28px 0px 28px !important;
            margin: 0px !important;
            margin-top: 1px !important;
            font-size: 13px !important;
        }

        /*Form*/
        .w2ui-form .w2ui-column-container .w2ui-column.col-0,
        .w2ui-form .w2ui-column-container .w2ui-column.col-1,
        .w2ui-form .w2ui-column-container .w2ui-column.col-2,
        .w2ui-form .w2ui-column-container .w2ui-column.col-3,
        .w2ui-form .w2ui-column-container .w2ui-column.col-4,
        .w2ui-form .w2ui-column-container .w2ui-column.col-5,
        .w2ui-form .w2ui-column-container .w2ui-column.col-6,
        .w2ui-form .w2ui-column-container .w2ui-column.col-7,
        .w2ui-form .w2ui-column-container .w2ui-column.col-8,
        .w2ui-form .w2ui-column-container .w2ui-column.col-9,
        .w2ui-form .w2ui-column-container .w2ui-column.col-10 {
            padding: 0 !important;
            padding-left: 10px !important;
            flex: unset;
            max-width: unset;
        }

        /*    .w2ui-group {
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
        box-shadow: unset !important;
        text-align: center;
    }*/
        .w2ui-group {
            text-align: center;
            background-color: #f4f4f9 !important;
            border: 2px solid #c3c3c9;
            border-radius: 8px !important;
            margin-bottom: 4px !important;
            padding-top: 4px;
        }
        /*Tema Renkleri*/
    .w2ui-group-title {
        padding: 7px 2px 7px 5px !important;
        /*color: #0f92a5 !important;*/ /*Turk Telekom*/
        color: var(--primary-color) !important;
        text-shadow: unset !important;
        /* font-size: 160% !important;*/
        /*background-color: #fbfbfb;*/
        box-shadow: unset !important;
        border: unset !important;
        text-align: center;
        font-weight: bold;
        background-color: #f4f4f9 !important
    }

        .w2ui-group-fields {
            /*background-color: #fbfbfb !important;*/
            margin: 5px 0px 14px 0px !important;
            padding: 10px 5px !important;
            border-top: unset !important;
            border-bottom: unset !important;
            box-shadow: unset !important;
            /*border-radius: unset !important;*/
            display: inline-block;
            background-color: #f4f4f9 !important;
            border-radius: 8px !important
        }

        .w2ui-popup .w2ui-popup-title {
            display: none;
        }

        .w2ui-form .w2ui-form-tabs {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0;
            padding: 0;
            height: 32px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            padding-top: 4px;
            background-color: #fbfbfb;
        }

        .w2ui-popup {
            position: fixed;
            z-index: 1600;
            overflow: hidden;
            font-family: OpenSans;
            border-radius: 6px;
            padding: 0px;
            margin: 0px;
            border: 1px solid #777;
            background-color: #fbfbfb;
            box-shadow: 0px 0px 25px #555;
        }

        .w2ui-form > .w2ui-form-box {
            position: absolute;
            overflow: hidden;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fbfbfb;
        }

        .w2ui-form .w2ui-buttons {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            border-top: unset !important;
            border-bottom: unset !important;
            background-color: #fbfbfb;
            padding: 15px 0px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .w2ui-field.w2ui-required:not(.w2ui-field-inline) > div::before {
            content: '*' !important;
            position: absolute !important;
            margin-top: 7px !important;
            margin-left: -10px !important;
            color: red !important;
        }

        .w2ui-field > label {
            display: block !important;
            float: left !important;
            margin-top: 11px !important;
            margin-bottom: 0px !important;
            width: 120px !important;
            padding: 0px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            text-align: right !important;
            min-height: 20px !important;
            color: #535353 !important;
            font-weight: 700;
        }

        input:not([type=button]):not([type=submit]).w2ui-input, textarea.w2ui-input {
            padding: 6px;
            border: 1px solid #b6b6b6;
            border-radius: 8px;
            color: black;
            background-color: #ffffff;
            line-height: normal;
        }
        /*Tema Renkleri */
        .w2ui-form .w2ui-buttons input[type="button"], .w2ui-form .w2ui-buttons button {
            min-width: 80px;
            margin-right: 5px;
            background-image: unset !important;
            /*background-color: #0f92a5;*/ /*Turk Telekom*/
            background-color: var(--primary-color);
            color: white;
            border-radius: 8px !important
        }

        .w2ui-field-helper.w2ui-list {
            color: inherit;
            position: absolute;
            padding: 0px;
            margin: 0px;
            min-height: 28px;
            overflow: auto;
            border: 1px solid #b6b6b6;
            border-radius: 8px;
            font-size: 6px;
            line-height: 100%;
            box-sizing: border-box;
            pointer-events: all;
            background-color: #ffffff;
            height: 36px !important;
        }

            .w2ui-field-helper.w2ui-list .w2ui-enum-placeholder {
                display: inline;
                position: unset !important;
                pointer-events: none;
                color: #999;
                box-sizing: border-box;
            }

            .w2ui-field-helper.w2ui-list .w2ui-multi-items {
                position: unset !important;
                display: unset !important;
                margin: 0px;
                padding: 0px;
                pointer-events: none;
            }
    }
    /* MOBILE */

@media screen and (max-width: 768px) {
    /*Login*/

    .login-container {
        display: flex;
        height: 100vh;
    }

    .background-image {
        display: none;
    }

        .background-image .logo-background {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .vodafone-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 256px;
        height: 256px;
    }

    .telekom-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 256px;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 67%;
        background-color: #ffffff;
    }

    .login-text {
        margin-top: 0;
        color: #555555;
        font-weight: bolder;
    }
    /*
.login-icon {
    width: 56px;
    height: 73px;
    margin-bottom: 12px;
}*/

    .login-icon {
        width: 260px;
        margin-bottom: 12px;
    }

    .login-input {
        width: 100%;
        height: 58px;
        margin-bottom: 10px;
        border-radius: 8px;
        background-color: #fbfbfb;
        border: 1px solid #ebebeb;
        padding-left: 12px;
    }

    .login-button {
        width: 200px;
        height: 56px;
        margin-top: 10px;
        background-color: #233342;
        box-shadow: 0px 0px 1px #203141;
        color: #ffffff;
        border-radius: 8px;
        font-weight: bold;
        font-size: 22px;
    }

    .login-checkboxform {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        width: 400px;
    }

    .login-checkbox {
        margin-right: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #ebebeb;
        background-color: #fbfbfb;
    }

        .login-checkbox:checked {
            background-color: #555555;
        }

    .login-label {
        margin: 0;
    }


    .grid-container {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 0px !important;
    }

    .w2ui-field.w2ui-span3.combofield fieldset {
        flex-basis: 100%;
    }

    .combo-label {
        width: auto !important;
        color: #000000 !important;
        padding-left: 10px !important;
    }

    .w2ui-field.w2ui-span3.combofield {
        width: 100%;
        background-color: #f1f1f1 !important;
        margin-left: 0px !important;
        display: flex;
        flex-wrap: wrap;
        border-radius: 8px;
    }



    .grid-container.popup-grid#grid2 {
        width: 100% !important;
    }

    .gird-container.popup-grid {
        /*        top: 0px !important;
        left: 0px !important;
        width:100%;
        z-index:1000;
        position:absolute;*/
        top: 10% !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none;
        width: auto;
        height: auto;
        max-height: 90%;
        /*padding: 20px;*/
    }

    .w2ui-field.w2ui-span3.combofield form {
        display: inline-block;
        text-align: right;
        gap: unset;
    }

    .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

        .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all {
            outline: none !important;
            border-radius: 6px !important;
            line-height: normal !important;
            height: 30px !important;
            width: 100% !important;
            border: 1px solid #a2a2a2 !important;
            color: #000 !important;
            background-color: #ffffff !important;
            padding: 1px 28px 0px 28px !important;
            margin: 0px !important;
            margin-top: 1px !important;
            font-size: 13px !important;
        }

    .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button.over {
        border: 1px solid transparent !important;
        background-color: #c6c6c6 !important;
    }

        .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button.over .w2ui-tb-text {
            color: unset !important;
        }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd.w2ui-record-hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd.w2ui-record-hover {
        color: inherit;
        background-color: #c6c6c6 !important;
    }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd.w2ui-empty-record:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd.w2ui-empty-record:hover {
        background-color: #f1f1f1 !important;
    }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even.w2ui-record-hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even.w2ui-record-hover {
        color: inherit;
        background-color: #c6c6c6;
    }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even.w2ui-empty-record:hover,
    .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even.w2ui-empty-record:hover {
        background-color: #fbfbfb;
    }

    .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-drop {
        display: inline-flex;
    }

    .w2ui-form .w2ui-column-container .w2ui-column.col-0 {
        max-width: 1000% !important;
    }

    .w2ui-form .w2ui-column-container {
        display: flex !important;
        padding: 0 !important;
        flex-direction: column;
    }

    .w2ui-popup-button.w2ui-popup-max {
        display: none;
    }

    .w2ui-popup {
        top: 0px !important;
        left: 0px !important;
        height: 100% !important;
        position: fixed !important;
        z-index: 1600 !important;
        overflow: hidden !important;
        font-family: OpenSans !important;
        border-radius: 6px px !important;
        padding: 0px !important;
        margin: 0px !important;
        border: 1px solid #777 !important;
        background-color: #fafafa !important;
        box-shadow: 0px 0px 25px #555 !important;
        width: 100% !important;
    }

        .w2ui-popup .w2ui-popup-body {
            font-size: 12px !important;
            line-height: 130% !important;
            padding: 0px 7px 7px 7px !important;
            color: #000 !important;
            background-color: #fafafa !important;
            position: absolute !important;
            overflow: auto !important;
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        .w2ui-popup .w2ui-box, .w2ui-popup .w2ui-box-temp {
            position: absolute !important;
            left: 0px !important;
            right: 0px !important;
            bottom: 0px !important;
            top: 42px !important;
            bottom: 58px !important;
            z-index: 100 !important;
        }

        .w2ui-popup .w2ui-form {
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            flex-wrap: wrap !important;
            flex-direction: column !important;
        }

    .w2ui-grid .w2ui-grid-header {
        padding: 16px 12px 12px 12px;
        font-size: 23px;
        height: 60px;
        background-color: white;
        font-weight: bold;
        color: #2c6973 !important;
        border-bottom: none !important;
        border-radius: 12px;
    }
    /*Tema Renkleri*/
    .w2ui-grid .w2ui-grid-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0px;
        padding: 0px;
        text-align: center;
        font-size: 11px;
        height: 24px;
        overflow: hidden;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        -o-user-select: text;
        user-select: text;
        box-shadow: 0px -1px 4px #f5f5f5;
        color: #444;
        background-color: #ffffff;
        /*border-top: 1px solid #17a2b8;*/ /*Turk Telekom*/
        border-top: 1px solid var(--primary-color);
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    /*Tema Renkleri*/
    .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button {
        position: relative;
        z-index: 20;
        height: 30px;
        min-width: 30px;
        padding: 2px;
        /*border: 1px solid #17a2b8;*/ /*Turk Telekom*/
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        background-color: #cfcfcf;
        white-space: nowrap;
        margin: 0 1px;
        cursor: default;
        user-select: none;
        flex-shrink: 0;
        align-content: space-evenly;
        /* text-align: -webkit-right; */
    }

    .w2ui-grid {
        position: relative;
        overflow: hidden !important;
        border: none !important;
    }
        /*Tema Renkleri */
        .w2ui-grid .w2ui-grid-toolbar {
            position: absolute;
            /*border-bottom: 1px solid #17a2b8;*/ /*Turk Telekom*/
            border-bottom: 1px solid var(--primary-color);
            background-color: #f1f1f1;
            padding: 16px 3px 0px 3px;
            margin: 0px;
            box-shadow: 0px 1px 2px #f5f5f5;
            border-radius: 12px;
            height: 60px !important;
        }

    .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button .w2ui-tb-text {
        margin-left: 25px;
        color: #000000;
        padding: 5px;
        font-weight: bold;
    }
    /*Tema Renkleri*/
    .w2ui-grid .w2ui-grid-body div.w2ui-col-header {
        height: auto !important;
        width: 100%;
        color: #f5f9f9;
        font-size: 16px;
        /*background-color: #17a2b8;*/ /*Turk Telekom*/
        background-color: var(--primary-color);
        overflow: hidden;
        padding-right: 10px !important;
        font-weight: 400;
        padding-bottom: 4px;
        padding-top: 4px;
        border-right: solid !important;
        border-right-width: 1px;
        /*border-radius:12px;*/
    }

    .w2ui-grid .w2ui-grid-body table .w2ui-head {
        margin: 0px;
        padding: 0px;
        border-right: unset !important;
        border-bottom: unset !important;
        color: #656164;
        background-image: linear-gradient(#ffffff, #f9f9f9);
    }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-columns, .w2ui-grid .w2ui-grid-body .w2ui-grid-fcolumns {
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 8px;
        right: 0px;
        box-shadow: 0px 1px 4px #efefef;
        height: auto;
        border-radius: 12px;
    }

    .w2ui-grid .w2ui-grid-body .w2ui-grid-records, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 48px !important;
        bottom: 0px;
    }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd {
            color: inherit;
            background-color: #f1f1f1;
            border-bottom: unset !important;
            height: 50px !important;
        }

        .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even, .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even {
            color: inherit;
            background-color: #fbfbfb;
            border-bottom: unset !important;
            height: 50px !important;
        }

    .w2ui-grid .w2ui-grid-body table td:nth-child(2) {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    .w2ui-grid .w2ui-grid-body table td:last-child {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .w2ui-grid .w2ui-grid-body table td {
        border-bottom: none !important;
        border-right: none !important;
    }

    .w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button .w2ui-tb-icon > span {
        font-size: 15px;
        color: #000000;
    }

    .w2ui-grid .w2ui-grid-body table {
        border-spacing: 0px 8px;
        border-collapse: separate;
        table-layout: fixed;
        width: 1px;
    }

    .w2ui-grid-columns table {
        border-spacing: 0px !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        width: 1px !important;
    }

        .w2ui-grid-columns table td {
            border-bottom: none !important;
            border-right: 1px solid #f1f1f1;
        }

    /*Mobile Form*/

    .w2ui-form .w2ui-column-container .w2ui-column.col-0,
    .w2ui-form .w2ui-column-container .w2ui-column.col-1,
    .w2ui-form .w2ui-column-container .w2ui-column.col-2,
    .w2ui-form .w2ui-column-container .w2ui-column.col-3,
    .w2ui-form .w2ui-column-container .w2ui-column.col-4,
    .w2ui-form .w2ui-column-container .w2ui-column.col-5,
    .w2ui-form .w2ui-column-container .w2ui-column.col-6,
    .w2ui-form .w2ui-column-container .w2ui-column.col-7,
    .w2ui-form .w2ui-column-container .w2ui-column.col-8,
    .w2ui-form .w2ui-column-container .w2ui-column.col-9,
    .w2ui-form .w2ui-column-container .w2ui-column.col-10 {
        padding: 0 !important;
        padding-left: 0px !important;
        flex: unset;
        max-width: unset;
    }

    /*    .w2ui-group {
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
        box-shadow: unset !important;
        text-align: left;
    }*/

    .w2ui-group {
        background-color: #f4f4f9 !important;
        border: 2px solid #c3c3c9;
        border-radius: 8px !important;
        margin-bottom: 4px !important;
        padding-top: 4px;
    }

    .w2ui-group-title {
        padding: 7px 2px 7px 5px !important;
        color: #344152 !important;
        text-shadow: unset !important;
        font-size: 160% !important;
        /*background-color: #fbfbfb;*/
        box-shadow: unset !important;
        border: unset !important;
        text-align: center;
        background-color: #f4f4f9 !important
    }

    .w2ui-group-fields {
        /*background-color: #fbfbfb !important;*/
        margin: 5px 0px 14px 0px !important;
        padding: 10px 5px !important;
        border-top: unset !important;
        border-bottom: unset !important;
        box-shadow: unset !important;
        /*border-radius: unset !important;*/
        display: inline-block;
        background-color: #f4f4f9 !important;
        border-radius: 8px !important
    }

    .w2ui-popup .w2ui-popup-title {
        display: none;
    }

    .w2ui-popup {
        position: fixed;
        z-index: 1600;
        overflow: hidden;
        font-family: OpenSans;
        border-radius: 6px;
        padding: 0px;
        margin: 0px;
        border: 1px solid #777;
        background-color: #fbfbfb;
        box-shadow: 0px 0px 25px #555;
    }

    .w2ui-form > .w2ui-form-box {
        position: absolute;
        overflow: hidden;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fbfbfb;
    }

    .w2ui-form .w2ui-buttons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        border-top: unset !important;
        border-bottom: unset !important;
        background-color: #fbfbfb;
        padding: 15px 0px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .w2ui-field.w2ui-required:not(.w2ui-field-inline) > div::before {
        content: '*' !important;
        position: absolute !important;
        margin-top: 7px !important;
        margin-left: -10px !important;
        color: red !important;
    }

    .w2ui-field > label {
        display: block !important;
        float: left !important;
        margin-top: 11px !important;
        margin-bottom: 0px !important;
        width: 120px !important;
        padding: 0px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: right !important;
        min-height: 20px !important;
        color: #000000 !important;
    }

    input:not([type=button]):not([type=submit]).w2ui-input, textarea.w2ui-input {
        padding: 6px;
        border: 1px solid #b6b6b6;
        border-radius: 8px;
        color: black;
        background-color: #ffffff;
        line-height: normal;
    }
    /*Tema Renkleri */
    .w2ui-form .w2ui-buttons input[type="button"], .w2ui-form .w2ui-buttons button {
        min-width: 80px;
        margin-right: 5px;
        background-image: unset !important;
        /*background-color: #0f92a5;*/ /*Turk Telekom*/
        background-color: var(--primary-color);
        color: white;
        border-radius: 8px !important
    }
    /*Tema Renkleri*/


    .w2ui-buttons button[name="Reset"] {
        min-width: 80px;
        margin-right: 5px;
        background-image: unset !important;
        background-color: #a1a4a3;
        color: white;
        border-radius: 8px !important
    }

    .w2ui-field-helper.w2ui-list {
        color: inherit;
        position: absolute;
        padding: 0px;
        margin: 0px;
        min-height: 28px;
        overflow: auto;
        border: 1px solid #b6b6b6;
        border-radius: 8px;
        font-size: 6px;
        line-height: 100%;
        box-sizing: border-box;
        pointer-events: all;
        background-color: #ffffff;
        height: 36px !important;
    }

        .w2ui-field-helper.w2ui-list .w2ui-enum-placeholder {
            display: inline;
            position: unset !important;
            pointer-events: none;
            color: #999;
            box-sizing: border-box;
        }

        .w2ui-field-helper.w2ui-list .w2ui-multi-items {
            position: unset !important;
            display: unset !important;
            margin: 0px;
            padding: 0px;
            pointer-events: none;
        }
}
    /*Svg Product Tooltip*/
    /*.w2ui-overlay-body.w2ui-tooltip-svg.w2ui-arrow-top,
.w2ui-overlay-body.w2ui-tooltip-svg.w2ui-arrow-bottom
{
    display: inline-block;
    background-color: #333;
    color: #fff;
    border-radius: 8px;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    opacity: 80%;
}

.w2ui-overlay-body.w2ui-tooltip-svg .tooltip-list {
    margin: 0;
    padding: 0;
}

.w2ui-overlay-body.w2ui-tooltip-svg .tooltip-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.w2ui-overlay-body.w2ui-tooltip-svg dt {
    font-weight: bold;
    width: 180px;*/ /* Adjust the width as needed */
    /*}

.w2ui-overlay-body.w2ui-tooltip-svg dd {
    margin: 0;
    padding-left: 10px;
}

.w2ui-overlay-body.w2ui-tooltip-svg a {
    color: #ffcc00;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}

    .w2ui-overlay-body.w2ui-tooltip-svg a:hover {
        color: #ff9900;
    }*/
    /* Tooltip Container */
   /*Product Tooltip*/

   /*Product Tooltip*/


/*Furniture Info*/
/*.planogram-furniture-div {
    display: flex;
    justify-content: space-between;*/ /* İçerikleri sağa ve sola hizala */
/*border: 1px solid #3c3c3c;
    border-radius: 16px;
    box-shadow: 2px 2px 4px #6f6f6f;
    margin-bottom: 25px;
    float: left;
    writing-mode: vertical-rl;
    transform: scale(-1);
}*/
.planogram-furniture-div {
    display: flex;
    justify-content: space-between; /* İçerikleri sağa ve sola hizala */
    border: 1px solid #3c3c3c;
    border-radius: 16px;
    box-shadow: 2px 2px 4px #6f6f6f;
    margin-bottom: 25px;
    float: left;
    /*    writing-mode: vertical-rl;
    transform: scale(-1);*/
}

.PlanogramVariantVersion-info-div,
.furniture-info-div {
    flex: 1;
    padding: 15px;
}

.planogram-header,
.furniture-header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.planogram-info,
.furniture-info {
    font-size: 14px;
    text-align: center;
    padding-top: 4px;
}


/*Version Sayfasındaki CheckBox*/
.switch {
    position: relative;
    display: inline-block;
    width: 35px; /* Genişliği biraz daha küçült */
    height: 19px; /* Yüksekliği biraz daha küçült */
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px; /* Yüksekliği biraz daha küçült */
        width: 15px; /* Genişliği biraz daha küçült */
        left: 4px;
        bottom: 2px; /* Yüksekliği biraz daha küçült */
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(15px); /* Transformasyon boyutunu ayarla */
    -ms-transform: translateX(15px); /* Transformasyon boyutunu ayarla */
    transform: translateX(15px); /* Transformasyon boyutunu ayarla */
}

/* Rounded sliders */
.slider.round {
    border-radius: 29px; /* Daha küçük bir yuvarlak yapmak için */
}

    .slider.round:before {
        border-radius: 50%;
    }