body, html {
    padding: 0;
    margin: 0;
    background: #f2f2f2;
    font-family: Roboto,Cordia New,"Microsoft Sans Serif",Utsaah,Devanagari MT,Nirmala UI,Latha,InaiMathi,Gautami,Telugu Sangam MN,Tunga,Kannada Sangam MN,Kartika,Malayalam Sangam MN,Shruti,Gujarati MT,Gujarati Sangam MN,Vrinda,Bangla Sangam MN,Meiryo UI Reg,メイリオ Reg,MS UI Gothic Reg,Hiragino Kaku Gothic Reg,ヒラギノ角ゴ Pro W3 Reg,Microsoft YaHei,微软雅黑,Hiragino Sans GB,Microsoft JhengHei,微軟正黑體,Malgun Gothic,맑은 고딕,Gulim,AppleGothic,Apple LiGothic,LiHei Pro,Osaka,STHeiti,华文黑体,STXihei,华文细黑,SimHei,黑体,Arial Unicode MS,Arial,sans-serif !important;
}

html {
    scroll-behavior: smooth;
}

.grid-cell-middle {
    vertical-align: middle !important;
}

/*--------------------------------------------------------------------- */
/*------------------------------ Ribbon ------------------------------- */
/*--------------------------------------------------------------------- */

.self-ribbon {
    height: 80px;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px 2px;
    text-align: center !important;
}

.self-ribbon-icon {
    font: 50px/1 DXIcons;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.self-ribbon-text {
    font-size: large;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/*--------------------------------------------------------------------- */
/*----------------------------- Buttons ------------------------------- */
/*--------------------------------------------------------------------- */

.self-button {
    height: 110px;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center !important;
    cursor: pointer;
    color: #fff !important;
    border-radius: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-bottom: 15px !important;
    padding: 5px !important;
    opacity: 0.9;
}

    .self-button:hover {
        box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.15) !important;
        opacity: 1;
    }

.self-button-icon {
    font: 70px/1 DXIcons;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.self-button-text {
    font-size: large;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/*--------------------------------------------------------------------- */
/*---------------------------- Shadow Box ----------------------------- */
/*--------------------------------------------------------------------- */
.kv-boxen {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin: 10px !important;
    padding: 5px !important;
}

    .kv-boxen:hover {
        box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    }


/*--------------------------------------------------------------------- */
/*----------------------------- Splitter ------------------------------ */
/*--------------------------------------------------------------------- */

/*.wrap {
    width: 100%;
    float: left;
    overflow: hidden;
    height: 100%;
}

.resizable {
    
    height: 100%;
    padding: 0;
    display: block;
    float: left;
    color: #000;
    position: relative;
}

.resizable1 {
    width: 70%;
    float: left;
}

.resizable2 {
    width: 30%;
    float: right;
}

.resizable .inner {
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 90vh;
}

.resizable1 .inner {
    margin-right: 14px;
}

.resizable2 .inner {*/
/*    margin-left: 7px;*/
/*}

.ui-resizable-e {
    cursor: e-resize;
    display: block !important;
    width: 14px;
    right: -7px;
    top: 0;
    bottom: 0;
    background: #333;
}

.dx-resizable-handle {
    background-color: #7AB8EB;
    width: 10px;
    right: 2px;
    opacity: .5;
}

.dx-resizable-handle:hover,
.dx-resizable-resizing {
    opacity: 1;
}*/


/*--------------------------------------------------------------------- */
/*------------------------------ Scrollbar ---------------------------- */
/*--------------------------------------------------------------------- */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #f2f2f2;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #7ab8eb;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #3794e1;
    }


/*--------------------------------------------------------------------- */
/*------------------------------- Blöcke ------------------------------ */
/*--------------------------------------------------------------------- */

.linkerBlock {
    position: fixed;
    z-index: 1;
    height: 100%;
    float: left;
    left: 20px;
    min-width: 400px;
    max-width: 526px;
}

.rechterBlock {
    position: fixed;
    z-index: 1;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    left: calc(100% - (305px + 5px));
    right: 5px;
}

.mittlereBlock {
    position: absolute;
    z-index: 1;
    width: auto;
    float: left;
    left: 550px;
    right: 15px;
    top: 130px;
}

.text-standard {
    font-size: 14px;
    color: darkgrey;
    font-style: italic;
    font-weight: 100;
}

.text-standard-2 {
    font-size: 14px;
    color: darkgrey;
    font-style: italic;
    font-weight: 100;
}

/*--------------------------------------------------------------------- */
/*-------------------------- Liste fixieren --------------------------- */
/*--------------------------------------------------------------------- */
.liste-fixed {
    top: -5px;
    height: calc(88vh + 55px);
}

.liste-static {
    top: 50px;
    height: calc(88vh);
}

/*--------------------------------------------------------------------- */
/*------------------------- Anzeige fixieren -------------------------- */
/*--------------------------------------------------------------------- */

.anzeige-fixed {
    top: -5px;
    height: calc(88vh + 55px);
}

.anzeige-static {
    top: 50px;
    height: calc(88vh);
}

/*--------------------------------------------------------------------- */
/*------------------------- Buttons fixieren -------------------------- */
/*--------------------------------------------------------------------- */
.dx-tabs-wrapper {
    text-align: left;
}

.buttons-fixed {
    position: fixed;
    top: -15px;
    z-index: 2;
    width: auto;
    left: 550px;
    right: 22px;
    margin: 10px 0px 8px 8px !important;
    padding: 25px 5px 15px 5px;
    border-radius: 5px;
}

.buttons-static {
    position: fixed;
    top: 50px;
    z-index: 2;
    width: auto;
    left: 550px;
    right: 22px;
    margin: 0px 0px 8px 8px !important;
    padding: 9px 5px 15px 5px;
    border-radius: 5px;
}

/*--------------------------------------------------------------------- */
/*-------------------------- L_01Artikelliste ------------------------- */
/*--------------------------------------------------------------------- */

.liste_thumbnail {
    width: auto;
    max-width: 65px;
    height: 62px;
}

.liste_Artikelnummer {
    font-size: 14px;
    font-weight: 500;
    color: #777777;
}

.liste_kurztext {
    font-size: 16px;
    color: #7ab8eb !important;
}

.liste_Preis {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.dx-row-focused .liste_kurztext {
    color: #fff !important;
}

/*.dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-focused:focus .liste_kurztext {
    color: #fff !important;
}
*/

.dx-treeview-node.dx-treeview-item-without-checkbox.dx-treeview-node-is-leaf.dx-state-focused .liste_kurztext {
    color: #fff !important;
}

.grid-cell-middle {
    vertical-align: middle !important;
}

/*--------------------------------------------------------------------- */
/*-------------------------- M_01_Allgemein --------------------------- */
/*--------------------------------------------------------------------- */

/*#All_Kurztext {
    font-size: x-large;
    margin-bottom: 10px;
}

#All_Artikelnummer {
    font-size: smaller;
    color: #777777;
}

#All_EAN {
    font-size: smaller;
    color: #777777;
    margin-bottom: 10px;
}

#All_Preis {
    font-size: xx-large;
    font-weight: 500;
    text-align: right;
    border-top: 2px solid #7ab8eb;
    border-bottom: 2px solid #7ab8eb;
}

#All_Beschreibung {
    font-size: medium;
    margin-top: 10px;
}

#All_Alternative_Bild{
    height: 300px;
    position: fixed;
    width: 280px;
    background-color: #fff;
    z-index: 1;
    margin-top: -7px;
}

#All_Langtext {
    position: absolute;
    font-family: monospace, monospace;
    top: 300px;
    width: 280px;
}

#AllgemeinForm .dx-scrollable-content {
    background-color: #f2f2f2;
}

#AllgemeinForm .dx-form-group-with-caption > .dx-form-group-content{
    margin-top: 0px;
}*/

.GD_Langtext {
    font-size: 16px;
    resize: vertical;
    overflow-y: scroll;
    min-height: 120px;
    height: 120px;
    width: 375px;
    right: 0px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border: 1px solid #e8eaeb;
    border-radius: 2px;
    padding: 5px;
}

    .GD_Langtext:hover {
        border: 1px solid #7ab8eb;
        border-radius: 2px;
    }

.GD_Bildergalerie {
    height: 356px !important;
    width: 400px !important;
    background-color: #fff;
    border: 1px solid #7ab8eb;
    border-radius: 2px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    z-index: 1;
}

.GD_Bild {
    height: auto;
    margin: auto;
    max-height: 356px;
    max-width: 400px;
}

/*--------------------------------------------------------------------- */
/*---------------------- Accordion Anpassungen ------------------------ */
/*--------------------------------------------------------------------- */
.dx-accordion-item-opened > .dx-accordion-item-title:before {
    display: none !important;
}

.dx-accordion-item-title {
    cursor: default !important;
}

/*--------------------------------------------------------------------- */
/*---------------------------- Shadow Box ----------------------------- */
/*--------------------------------------------------------------------- */
.boxen {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-top: 1rem !important;
}

    .boxen:hover {
        box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    }

/*--------------------------------------------------------------------- */
/*------------------------ Anker verschieben -------------------------- */
/*--------------------------------------------------------------------- */
.sprung {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin: -65px;
}


/*--------------------------------------------------------------------- */
/*- DevExtreme Forms (Hier ändern, da beim Upgrade .css geändert wird) -*/
/*--------------------------------------------------------------------- */
/*Form: Hintergrund*/
.dx-form-group-with-caption > .dx-form-group-content {
    border-top: 4px solid #7ab8eb;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #F2F2F2;
}

.mittlereBlock .dx-form-group-with-caption > .dx-form-group-content {
    border-top: 2px solid #7ab8eb;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 20px;
    background-color: transparent;
}

.mittlereBlock .dx-box-item-content{
    font-size: 16px;
}

/*Form: Überschrift*/
.dx-form-group-caption {
    font-size: 25px;
    font-weight: 600;
}

/*Form: Untertext*/
.dx-field-item-label-text {
    font-weight: 500;
    color: #333;
}

/*Tab: Komplette Leiste*/
.dx-tabpanel .dx-tabs {
    color: #faf9f8 !important;
    background-color: #faf9f8 !important;
    border-bottom: 1px solid #E9E9E9 !important;
    border-top: 1px solid #E9E9E9 !important;
}

/*Tab: Ausgewählte Item*/ 
.dx-tab.dx-tab-selected {
    background-color: #7ab8eb;
    border: 1px solid #7ab8eb;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs {
    box-shadow: none !important;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tab {
    box-shadow: none !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs {
    box-shadow: none !important;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab {
    box-shadow: none !important;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content {
    color: #fff !important;
    border: 1px solid #7ab8eb;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-tab-selected):first-of-type {
    box-shadow: none !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-tab-selected):first-of-type {
    box-shadow: none !important;
}

.dx-tab-selected .dx-icon {
    color: #fff !important;
    border-bottom: 0px;
}

/*Tab: Standard Item*/
.dx-tab {
    background-color: #F2F2F2;
    border: 1px solid #e8eaeb;
    border-bottom: 0px;
}

/*--------------------------------------------------------------------- */
/*-------------------------- Liste anpassen --------------------------- */
/*--------------------------------------------------------------------- */
#gridDateiListe .dx-datagrid {
    border-radius: 15px;
    padding: 10px;
    margin: -10px;
}

@media (max-width: 991px) {
    #gridKatalogliste {
        height: 540px;
    }
}

@media (min-width: 992px) {
    #gridKatalogliste {
        height: 816px;
    }
}

@media (min-width: 2015px) {
    #gridKatalogliste {
        height: 778px;
    }
}