﻿[id$="_WINDOW_CONTAINER"] > [id$="_WINDOW"]{
    /*fix layout with lazy loading like customviews, jquery.layout shows message if height is zero*/
    min-height:10px;
}

body
{
    height: 100%;
}

div#main 
{
    position: relative;
    height: 100%;
}

/*
*main menu styling
*/
#menuDiv {
    /*width: 99%;*/
    /*margin: 0.5%;*/
    width:100%;
    padding-top: 0px;
    font-family: Verdana;
    font-size: 0.8em;
    visibility:hidden;                
}
#menu h2 {
    font-size: 1.0em;
    text-transform: uppercase;
    padding: 5px 10px;
}
#template img {
    margin: 5px 20px 0 0;
    float: left;
}
#template {
    width: 380px;
}
#template ol {
    float: left;
    margin: 0;
    padding: 10px 10px 0 10px;
}
#template:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#template .k-button {
    float: left;
    clear: left;
    margin: 5px 0 5px 12px;
}
/*
*login window styling
*/
.k-textbox {
    width: 11.8em;
}
.dialog-wrapper {
    width: 480px;
    margin: 20px auto;
    padding: 10px 20px 20px 10px;                    
}

.dialog-wrapper{
    width: 540px;
    margin: 20px auto;
    padding: 10px 20px 20px 10px;      
}

.dialog-wrapper.view-wide {
    width: 540px;                  
}

.dialog-wrapper ul, form.masterForm ul, .dialog-wrapper ul, div.param-dialog{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.dialog-wrapper li, form.masterForm li, .dialog-wrapper.li, div.param-dialog div.col-ready{
    margin: 3px 0 0 0;
}

.dialog-wrapper ul.forms li {
    padding: 5px;
}

div.param-dialog-holder {
    overflow: auto;
    position: relative;
}

.dialog-wrapper li.bbar, div.bbar, .dialog-wrapper li.bbar {
    text-align: center;
}

div.bbar.b-panel {
    text-align: left;
    margin: 0px;
    padding: 0px;
}

div.bbar.b-panel a{
    margin: 3px;
}


label.dialog-member {
    display: inline-block;
    width: 150px;
    text-align: right;
    margin-right: 6px;
    float: left;
    line-height: 32px;
}

label.autoWidth
{
    width: auto;
}

div.col-ready div.dialog-member
{
    display: table;
    text-align: right;
    margin-right: 6px;
    float: left;   
    height: 34px;
}

div.col-ready div.dialog-label-member 
{
    display: table;
    float: left; 
    margin-left: 20px;
    height: 100%;  
}

div.col-ready div.dialog-member p,
div.col-ready div.dialog-label-member p {
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    display: table-cell;
    vertical-align:middle;
}

div.dialog-column {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

div.dialog-column div.col-ready {
    position: relative;
}

span.k-picker-wrap, span.k-numeric-wrap, span.k-dropdown-wrap {
    height: 100%;
}

span.k-tooltip {
    margin-left: 5px;
}
/*
* close button styling for tabstrip
*/
.close{
	position: absolute;
	right: 2px;
	top:2px;
	cursor: pointer;
}

.k-button-custom-padding 
{
    padding-left: 25px;
    padding-right: 25px;
}

li.bbar, div.bbar
{
    padding: 3px;
}

li.bbar
{
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;    
}

li.bbar input, li.bbar button, div.bbar input, div.bbar button
{
    margin: 3px;    
}

input.k-button.k-button-padding
{
    padding: 2px 7px;    
}

/*layout plugin style override*/
	div.ui-layout-inner-pane { /* inner 'panes' */
	border:		0px solid #BBB;
	padding:	0px; 
	/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
	   otherwise you may get double-scrollbars - on the pane AND on the content-div
	   - use ui-layout-wrapper class if pane has a content-div
	   - use ui-layout-container if pane has an inner-layout
	*/
	}
	
span.k-picker-wrap.k-state-default.disable-before-pseudo-selector:before
{
    content: none;
}

/*old bootstrap 2.3.2 styles, yet needed for the wizzard bootstrap plugin*/
.progress.active .bar {
    animation: 2s linear 0s normal none infinite running progress-bar-stripes;
}

.progress.progress-striped {
    margin: 20px;
}

.progress.progress-striped .bar {
    background-color: #149bdf;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress .bar {
    background-color: #0e90d2;
    background-image: linear-gradient(to bottom, #149bdf, #0480be);
    background-repeat: repeat-x;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    box-sizing: border-box;
    color: #fff;
    float: left;
    font-size: 12px;
    height: 100%;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    transition: width 0.6s ease 0s;
    width: 0;
}

form.masterForm fieldset.k-block {
    padding: 0px;
}

form.masterForm fieldset.k-block div.navbar ul li a{
    margin: 5px;
}

span.j-listbox-wrapper, span.j-checklistbox-wrapper{
    position: relative;
    width: 260px;
    height: 70px;
    display:inline-block;
}

div.j-select-wrapper, div.j-buttons
{
    display: inline-block;
    height: 100%;
    margin: 0px;
}

div.j-buttons
{
    top: 0;
    position: absolute;
    height: 69px;
}

div.j-selectbox
{
    display: inline-block;
    width: 220px;
    height: 100%;
    border: solid 1px #cccccc;
    border-radius: 4px 0px 0px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
}

span.j-button
{
    display: block;
    width: 35px;
    border: 1px solid #CCCCCC;
    height: 50%;
    border-left: none;
    position: relative;    
}

span.j-button span
{
    position: absolute;
    top: 50%;
    margin: 0px;
    padding: 0px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    cursor: pointer;  
}

span.j-top-button
{
    border-radius: 0px 4px 0px 0px;
    border-bottom: none;
    background-color: white;
}

span.j-bottom-button
{
    border-radius: 0px 0px 4px 0px;   
    background-color: white;
}

div.window-footer{
    position: absolute;
    bottom: 0;
    display: block; 
    width: 95%;
    padding: 10px 0px 12px 0px;
    text-align: right;
    /*border-top: 1px solid #e5e5e5;*/
    background: white;
    box-sizing:border-box;
}

[id$="_WINDOW_CONTAINER"].k-window-content{
    overflow:hidden;
}

button.j-ok-btn, button.j-ok-btn, button.j-ok-btn{
    margin-right: 10px;
}

.olap-filter-template td {
    padding-right: 4px
}

.COMPOSITE.olap-filter-template td:nth-child(2), .COMPOSITE.olap-filter-template td:nth-child(3) {
    padding-right: 0
}

.k-filterable .k-state-active {
    background-color: #BCCAD8 !important;
}

[id$="olap-block"] {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: #BCCAD8;
    cursor: pointer;
}

input.editable-view-column{
    font-size: 16px;
    padding: 3px;    
}

ul li ul[class^="form-column-"] {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 10px;
}

div.k-content.k-state-active {
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 0px;
}

div.param-dialog div.k-content.k-state-active {
    border-left: none;
    border-right: none;
    padding-top: 2px;
    padding-bottom: 5px;
}

div.ui-layout-pane {
    padding: 3px;
    padding-bottom: 0px;
}

div.j-view-column-wrapper {
    display: inline-block;
}

span.k-icon.j-filter-field-btn, span.k-icon.j-filter-field-btn + span.k-icon {
    margin: 5px;
}

ul.k-menu li.k-item > span.k-link {
    line-height: 2.34em;
    padding: 7px 12px;
}
/*quick menu*/
#menuSideBar{
    background-color: rgb(244, 244, 244);
    /*width:2%;
    width:20px;*/
    height:100%;
    display:none;
    border: 1px solid grey;
    border-radius:5px;
    vertical-align:top;
    z-index:3;
    position:relative;
    overflow:hidden;
}

.vertical {
   background-color: rgb(234, 234, 234);
   -ms-writing-mode: tb-lr !important;
   -webkit-writing-mode: vertical-lr !important;
   -moz-writing-mode: vertical-lr !important;
       writing-mode: vertical-lr !important;       
       width:100%;
}

a.vertical {
    padding-top:10px;
    padding-bottom:10px;
    display: inline-block;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    cursor:pointer;
    color: rgb(51,51,51);
}

a.vertical:hover{
    background-color: rgb(214, 214, 214);
    text-decoration:none;
    color: rgb(51,51,51);
}

a.vertical:first-child{
    border-top: 0px solid grey;
}

#menuContainer{
    /*padding:0.5%;*/
}
#menuSideBar + div{
    display:inline-block;
    /*width:94.5%;*/
    width:100%;
    vertical-align:top;
    height:100%;
}
#tabstrip{
    height:100%;
}
#workArea{
    /*padding:0.5%;*/
    padding-top:0.15%;
    position:relative;
    padding-left:0%;
    /*margin-left:0.5%;*/
    overflow:hidden;
}
#quickMenuContainer
{
    position: absolute;
    z-index: 2;
    width: 200px;
    background-color: white;
    border: 1px solid grey;
    overflow:hidden;
}

#quickMenuContainer .header{
    background-color:rgb(0,180,255);
    color:white;
    padding:5px;
    height:5%;
    min-height:30px;
}

     #quickMenuContainer .quickMenuItemsContainer li {
       width:100%;
       border-bottom: 1px solid grey;
    }

#quickMenuContainer .quickMenuItemsContainer{
    overflow-y: auto;
    overflow-x: hidden;
    border: 0px !important;
}

/*.zoom-icon{
    position: relative;
    left: -10px;
    top: -5px;
    opacity: 0.4;
    filter: alpha(opacity=40); 
}

.zoom-icon:hover{
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.zoom-icon.active{
    opacity: 1;
    filter: alpha(opacity=100);
}

.zoom-icon.pressed{
    opacity: 8;
    filter: alpha(opacity=80);
    border:1px solid red;
}*/

.viewblock-container.cursor-excel:hover, .viewblock-container label.cursor-excel:hover
, .viewblock-container .k-grouping-header.cursor-excel:hover
, .viewblock-container.cursor-excel .toolbar:hover
, .viewblock-container .k-grid-toolbar.cursor-excel:hover{
    cursor: url(../../Images/excel-icon.png), default !important;
}

.viewblock-container.cursor-zoom-in:hover, .viewblock-container label.cursor-zoom-in:hover
, .viewblock-container .k-grouping-header.cursor-zoom-in:hover
, .viewblock-container.cursor-zoom-in .toolbar:hover
, .viewblock-container .k-grid-toolbar.cursor-zoom-in:hover{
    cursor: url(../../Images/zoom_icon.gif), zoom-in !important;
}

.viewblock-container.cursor-refresh:hover, .viewblock-container label.cursor-refresh:hover
, .viewblock-container .k-grouping-header.cursor-refresh:hover
, .viewblock-container.cursor-refresh .toolbar:hover
, .viewblock-container .k-grid-toolbar.cursor-refresh:hover{
    cursor: url(../../Images/refresh_blue.png), wait !important;
}

#toolbar-buttons{
    float:right;
    margin-right:20px;
    margin-top: 4px;
}

#toolbar-buttons a{
    padding:1px;
    padding-top:4px;
    padding-bottom:4px;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    cursor:default;
    border:2px solid transparent;
}

#toolbar-buttons a.hidden{
    display:none;
}

#toolbar-buttons a.enabled{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    cursor:pointer;
}

#toolbar-buttons a.pressed{
    border:2px solid red;
}

#toolbar-buttons a.active{
    border:2px solid green;
}

.k-i-zoom{
  background-position: -48px -240px;
}

.k-i-prev{
  background-position: -12px -48px;
}

.k-i-next{
  background-position: -12px -16px;
}

.k-i-refresh{
  background-position: -48px -120px;
}

.k-window-action.active{
    border:1px solid green;
}

.k-window-action.pressed{
    border:1px solid red;
}

a.k-window-action[data-action]{
   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
}

a.k-window-action.enabled[data-action]{
   opacity: 1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}

[data-action="showRelations"]{
    color:green;
    font-style:italic;
    font-weight:bold;
    cursor:pointer;
}

#excel-dialog .container{
    width:auto;
    height:100%;
}
#excel-dialog .container > div, #excel-dialog .container .excel-columns-container > div{
    width:auto;
    padding: 5px 20px;
    border:1px solid #aaa;
    background-color:#eee;
}

#excel-dialog .container .excel-columns-container{
    overflow-y:auto;
    height:90%;
    box-sizing: border-box;
}

#excel-dialog .container .excel-buttons-container{
    height:10%;
    box-sizing: border-box;
}

#excel-dialog .container .excel-columns-container > div.column{
    cursor:pointer;
}

#excel-dialog .container .excel-columns-container > div.checked{
    background-color:#bbb;
    border:1px solid #999;
}

#excel-dialog .container > div button{
    margin:2px 5px;
}

.k-callout-s.k-callout {
    border-width:0px;
}

div.k-tabstrip > div.k-content{
    padding: 0px;
}

/*virtual scrolling requires row with equal height*/
.k-virtual-scrollable-wrap td
{
    white-space: nowrap;
}

[role="tabpanel"].k-state-active{
    width:100%;
}

.form-container .row label + input[type=checkbox]
{
    width:22px;
    height:22px;
}

.j-edit-in-form.disabled, .j-create-in-form.disabled{
    opacity:0.5;
    filter: alpha(opacity=50);
}

div.checkbox-container {
    max-height: 160px;
    width: 270px;
    overflow: auto;
}

.non-editable-column input[type=checkbox][readonly]
{
    opacity:0.5;
    filter: alpha(opacity=50);
}

.jgen-mobile .k-resize-handle-inner {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    left: -12px;
    width: 26px;
    height: 26px;
    border-style: solid;
    border-width: 2px;
    border-radius: 15px;
}

    .jgen-mobile .k-resize-handle-inner::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -3px;
        left: 4px;
        width: 6px;
        height: 6px;
        background-position: -5px -53px;
        background-image: url('sprite.png');
        border-color: transparent;
    }
    .jgen-mobile .k-resize-handle-inner::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -3px;
        right: 4px;
        width: 6px;
        height: 6px;
        background-position: -5px -21px;
        background-image: url('sprite.png');
        border-color: transparent;
    }

div#toast-container
{
    z-index:100000000;
}

/*.j-form-help-field + .k-tooltip.k-tooltip-validation.k-invalid-msg{
    left:375px;
}*/

.k-input.k-invalid, input.k-textbox.k-invalid, 
textarea.k-textbox.k-invalid, 
input.k-textbox.k-invalid:hover,
 textarea.k-textbox.k-invalid:hover, 
.k-textbox > input.k-invalid, 
.k-multiselect-wrap.k-invalid,
.k-invalid
{
    border-color:red;
}

/*======================WIZARD=======================*/
[id$=rootwizard] .pager li>a
{
    padding:0px;
}

[id$=rootwizard] .pager li.next{
    float:left;
}

[id$=rootwizard] .pager li, [id$=rootwizard] .pager li:hover
{
    display:inline-block;
    vertical-align:top;
    float:left;
    background-color:transparent;
    cursor:pointer;
}

[id$=rootwizard] .pager li>a, [id$=rootwizard] .pager li>a:hover{
    background-color:transparent;
    padding: 0px 5px;
    cursor:pointer;
    color:rgb(51, 122, 183);
}

[id$=rootwizard] .pager li>a:focus,[id$=rootwizard] .pager li>a:hover{
    background-color:transparent;
}

[id$=rootwizard] .navbar-inner .container{
    width:100%;
    box-sizing:border-box;
}

[id$=rootwizard] .navbar-inner .container div{
    box-sizing:border-box;
}

[id$=rootwizard] .row{
    margin-left:0px;
    margin-right:0px;
}

[id$=rootwizard] .navbar{
    box-sizing:border-box;
    margin-bottom:0px;
}

/*======================END_WIZARD=======================*/

[data-role=grid] td.number-field, [data-role=treelist] td.number-field:not(:first-child){
    text-align:right;
}

div.ui-layout-pane, div.ui-layout-container
{
    box-sizing:border-box;
}

.jgen-invisible-pager .k-pager-wrap.k-grid-pager
{
    height: 0px;
    padding: 0px;
    overflow: hidden;
}

div[class^=row-] {
    padding-top: 2px;
}

div.row-0{
    padding-top: 0px;
}

div[class^=row-]:empty {
    padding-bottom: 0px;
}

html{
    overflow:hidden;
}

div.k-list-scroller{
    overflow: auto;
}

div.k-widget.k-upload{
    position:fixed;
    width:30%;
    left:35%;
    top:10%;
    z-index:10000000000;
    min-width:200px;
}

[foralias].shield{
    position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.col-ready span.k-state-disabled{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.col-ready .k-tooltip.k-tooltip-validation.k-invalid-msg
{
    position:fixed;
}

.col-ready [data-combo-id] + .k-tooltip.k-tooltip-validation.k-invalid-msg
{
    margin-left:3em;
}

span.k-icon.k-i-arrow-60-up {
    margin-top: 5px !important;
}

.col-ready .k-picker-wrap{
    width:100%;
    box-sizing:border-box;
}

input.j-disabled,
.k-widget.j-disabled span.k-picker-wrap,
.k-widget.j-disabled span.k-dropdown-wrap,
.k-widget.j-disabled span.k-numeric-wrap{
    background:#dddddd!important;
    color:#000!important;
}

.k-widget.j-disabled input.k-input{
    background:#dddddd;
    color:#000;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

/*.j-form-help-field.jgen-field.k-input
{
    margin-left: -3px;
}*/

.k-select.j-help-search-icon {
    background: white;
}

.jgen-aggregate{
    text-align:right;
}

tr.jgen-red-row{
    background-color:red;
    color:white;
}

.bbar span.jgen-info-bbar-span{
    border-radius:5px;
    padding:5px 5px;
    margin:0px 5px;
    display:inline-block;
    vertical-align:middle;
    border:1px solid black;
}

.jgen-state-selected, .k-alt.jgen-state-selected{
   background-color:#428bca;
   color:black;
}

.k-state-selected.jgen-state-selected{
   background-color: #64adec;
   color:black;
}

.k-widget .k-picker-wrap.jgen-red-border, 
.k-widget .k-picker-wrap.jgen-red-border:hover{
    border:1px solid red;
}

[data-role="datepicker"].k-input.jgen-invalid-background-color{
    background-color:#ffafaf
}

.j-select-wrapper .help-option{
    cursor:pointer;
}

.j-select-wrapper .help-option[data-marked]{
    background-color:#dedec1;
}

div.j-selectbox .help-option {
    padding: 2px;
    width: 100%;
    box-sizing:border-box;
    border:1px solid #bbb;
    margin: 2px 0px;
}

div.j-selectbox .check-help-option {
    padding: 2px;
    display: inline;
    box-sizing:border-box;
    margin: 2px 0px;
}

/*OLAP TEMPLATES*/
.rights-row .rights-block-container{
     display: inline-block;
    width: 40%;
    box-sizing: border-box;
    min-height: 300px;
    border: 1px solid grey;
    border-radius: 25px;
    vertical-align: top;
}

.rights-row .rights-block-container .search {
    background-color: #bbb;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
}

.rights-block-container .right{
    padding: 5px 0px;
    cursor:pointer;
    border-bottom:1px solid transparent;
}

.right.right-selected{
    background-color:#dedec1;
    border-bottom:1px solid #aaa;
}

.rights-row .rights-block-info{
    width: 40%;
    text-align:left;
    font-style:italic;
    display:inline-block;
    padding-left:25px;
    box-sizing:border-box;
}
/*END OLAP TEMPLATES*/
.draggable-row{
    background-color:#bbb;
}

.jgen-used-value, .jgen-free-value{
    display:inline-block;
    position: relative;
    width:0px;
    height:0px;
    right: -10px;    
}

.jgen-free-value{
    color:green;
}

.jgen-used-value{
    color:red;
}

/*Image Slider*/
[data-jgen-slider="basic"].swiper-container{
    width:600px;
    height:300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -150px;
    z-index: 10000;
    background-color: #eee;
}

[data-jgen-slider="thumbs"]{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;   
    z-index: 10000;
    background-color: rgba(155,155,155,0.4);
    padding: 10% 20%;
}

[data-jgen-slider="thumbs"] .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #DDD;     
    border-left:1px solid #999;
    border-right:1px solid #999;
}

[data-jgen-slider="thumbs"] .swiper-slide {
    background-size: cover;
    background-position: center;
    text-align:center;
}

[data-jgen-slider="thumbs"] .gallery-top {
    height: 80%;
    width: 100%;
    border-top:1px solid #999;
}

[data-jgen-slider="thumbs"] .gallery-top .swiper-slide img {
    height:100%;
}

[data-jgen-slider="thumbs"] .gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
    border-bottom:1px solid #999;
}

[data-jgen-slider="thumbs"] .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    cursor:pointer;
}

[data-jgen-slider="thumbs"] .gallery-thumbs .swiper-slide-active {
    opacity: 1;
}

[data-jgen-slider="thumbs"] img.jgen-slider-close{
    position:absolute;
    top:0px;
    right:0px;
    width:24px;
    height:24px;
    cursor:pointer;
    z-index:10000000;
}

div.customView {
    height: 100%;
}

/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/
/*SHOP*/
.j-shop .shop-grid-button{
    opacity:0.5;
}

.j-shop .shop-grid-button.j-btn-active{
    opacity:1;
}

.j-shop .shop-grid-button.k-icon{
    font-size:30px;
    margin:5px;
    cursor:pointer;
    box-shadow: 2px 2px 5px #888888;
}

.j-shop .add-to-cart.k-icon{
    font-size: 40px;
    cursor:pointer;
}

.shop-main header{
    width:100%;
}

.j-shop{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
}

.j-shop .shop-main *{
    box-sizing:border-box;
}

.j-shop .shop-main{
    -webkit-flex:1;
    -ms-flex: 1;
    flex:1;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    flex-wrap:wrap;
    overflow:auto;
    overflow-x:hidden;
    
    background-color:beige;
    /*justify-content:space-between;*/
}

.j-article-col{
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
}

.j-article .flex-item {
	border:2px solid #bbb;
    margin:4px;
    border-radius:15px;
    padding:5px;
    overflow:hidden;
    box-shadow: 3px 3px 3px #bbb;
}

.j-article .flex-item.p-section-0{
    padding:0px;
}

.j-article .j-price{
    display:block;
    padding-left: 10px;
    color: red;
}

.j-price-int{
    font-size:xx-large;
    display:inline-block;
}

.j-price-decimal{
    vertical-align:text-top;
    font-size:large;
}

.j-shop .j-article {
   /* Enable hardware acceleration to fix laggy transitions */
    /*will-change: opacity, transform;*/
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.j-shop .j-article .article-img {
    max-width:100%;
    max-height:100%;
}

.j-shop .j-article .article-properties{
    width:95%;
    border-collapse: separate;
    border-spacing: 15px 0px;
    margin-top:5px;
}

.j-shop .j-article .article-properties td{
    padding: 3px 0px 3px 10px;
    text-align:left;
    border-bottom:1px dotted #555;
    width:50%;
}

/*===============Shop WIDE=============*/
[data-viewmode="wide"] .j-article{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /*min-width:100vh;*/
    width: 100%;
    height: 300px;
    /*background-color: #eeefee;*/
	margin: 10px auto;
	flex-wrap:wrap;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    transform: translate3d(0, 30px, 0);
    opacity: 0.3;
}

[data-viewmode="wide"] .j-article.shown{
   transform: translate3d(0, 0, 0);
   opacity: 1;
}

[data-viewmode="wide"].transition-off .j-article {
    -webkit-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}


/*PRESENTATION*/
[data-viewmode="wide"] .j-article .presentation{
    -webkit-flex:1;
    -ms-flex: 1;
    flex:1;
	flex-direction:column;
}

[data-viewmode="wide"] .j-article .presentation .flex-item:nth-child(1){
    -webkit-flex:10;
    -ms-flex: 10;
    flex:10;
	background-color: white;
}

[data-viewmode="wide"] .j-article .presentation .flex-item:nth-child(2){
    -webkit-flex:1;
    -ms-flex: 1;
    flex:1;
	background-color: green;
}

[data-viewmode="wide"] .j-article .presentation .flex-item:nth-child(3){
    -webkit-flex:1;
    -ms-flex: 1;
    flex:1;
	background-color: grey;
}

/*DESCRIPTION*/
[data-viewmode="wide"] .j-article .description{
    -webkit-flex:4;
    -ms-flex: 4;
	flex:4;
	flex-direction:column;
}

[data-viewmode="wide"] .j-article .description .flex-item:nth-child(1){
    -webkit-flex:2;
    -ms-flex: 2;
    flex:2;
}

[data-viewmode="wide"] .j-article .description .flex-item:nth-child(2){
    -webkit-flex:7;
    -ms-flex: 7;
    flex:7;
	background-color: #EEE;
}

/*SHOP-INFO*/
[data-viewmode="wide"] .j-article .shop-info{
    -webkit-flex:1.5;
    -ms-flex: 1.5;
	flex:1.5;
	flex-direction:column;
}

[data-viewmode="wide"] .j-article .shop-info .flex-item:nth-child(1){
    -webkit-flex:3;
    -ms-flex: 3;
	flex:3;
	background-color: white;
}
[data-viewmode="wide"] .j-article .shop-info .flex-item:nth-child(2){
    -webkit-flex:2;
    -ms-flex: 2;
	flex:2;
	background-color: #EEE;
}

[data-viewmode="wide"] .j-article .shop-info .flex-item:nth-child(3){
	-webkit-flex:1;
    -ms-flex: 1;
    flex:1;
	background-color: white;
}


/*================Shop NARROW==================*/
[data-viewmode="narrow"] .j-article{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 650px;
    width:300px;
    /*background-color: #eeefee;*/
	flex-wrap:wrap;
	flex-direction:column;
    margin: 15px;
    position:relative;   
    opacity:0; 
}

/* The animation code */
@keyframes example {
    from {
        transform: translate(2000px, 0);
    }

    to{
        transform: translate(0px, 0);
        opacity:1;
    }
}

/* The element to apply the animation to */
[data-viewmode="narrow"] .j-article.shown {
    animation-name: example;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-duration: 0.3s;
}

[data-viewmode="narrow"] .j-article.shown-1 {
    animation-delay: 0s;
}

[data-viewmode="narrow"] .j-article.shown-2 {
    animation-delay: 0.4s;
}

[data-viewmode="narrow"] .j-article.shown-3 {
    animation-delay: 0.8s;
}

[data-viewmode="narrow"] .j-article.shown-4 {
    animation-delay: 1.1s;
}

[data-viewmode="narrow"] .j-article.shown-5 {
    animation-delay: 1.4s;
}

/*PRESENTATION*/
[data-viewmode="narrow"] .j-article .presentation{
    -webkit-flex:4;
    -ms-flex: 4;
    flex:4;
	flex-direction:column;
}

[data-viewmode="narrow"] .j-article .presentation .flex-item:nth-child(1){
    -webkit-flex:4;
    -ms-flex: 4;
    flex:4;
	background-color: white;
}

[data-viewmode="narrow"] .j-article .presentation .flex-item:nth-child(2){
    -webkit-flex:0.5;
    -ms-flex: 0.5;
    flex:0.5;
	background-color: green;
    display:none;
}

[data-viewmode="narrow"] .j-article .presentation .flex-item:nth-child(3){
    -webkit-flex:0.5;
    -ms-flex: 0.5;
    flex:0.5;
	background-color: grey;
    display:none;
}

/*DESCRIPTION*/
[data-viewmode="narrow"] .j-article .description{
    -webkit-flex:1;
    -ms-flex: 1;
	flex:1;
	flex-direction:column;
}

[data-viewmode="narrow"] .j-article .description .flex-item:nth-child(1){
    -webkit-flex:1;
    -ms-flex: 1;
    flex:1;
	background-color: aliceblue;
}

[data-viewmode="narrow"] .j-article .description .flex-item:nth-child(2){
    display:none;
}

/*SHOP-INFO*/
[data-viewmode="narrow"] .j-article .shop-info{
    -webkit-flex:6;
    -ms-flex: 6;
	flex:6;
	flex-direction:column;
}

[data-viewmode="narrow"] .j-article .shop-info .flex-item:nth-child(1){
    -webkit-flex:3;
    -ms-flex: 3;
	flex:3;
	background-color: white;
}

[data-viewmode="narrow"] .j-article .shop-info .flex-item:nth-child(2){
    -webkit-flex:2;
    -ms-flex: 2;
	flex:2;
	background-color: #EEE;
}

[data-viewmode="narrow"] .j-article .shop-info .flex-item:nth-child(3){
    -webkit-flex:1;
    -ms-flex: 1;
	flex:1;
	background-color: white;
}

/*================Shop NOPRESENTATION==================*/

[data-viewmode="nopresentation"] .j-article{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    min-height: 250px;
    max-height: 300px;
    /*background-color: #eeefee;*/
	margin: 10px auto;
	flex-wrap:wrap;
    -webkit-transition:all .5s ease-out;
    transition: all .5s ease-out;
    transform: translate3d(0, 30px, 0);
    opacity: 0.3;
}

[data-viewmode="nopresentation"] .j-article.shown{
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   opacity: 1;
}

[data-viewmode="nopresentation"].transition-off .j-article {
    -webkit-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}


/*PRESENTATION*/
[data-viewmode="nopresentation"] .j-article .presentation{
    display:none;
}

/*DESCRIPTION*/
[data-viewmode="nopresentation"] .j-article .description{
    -webkit-flex:3;
    -ms-flex: 3;
	flex:3;
	flex-direction:column;
}

[data-viewmode="nopresentation"] .j-article .description .flex-item:nth-child(1){
    -webkit-flex:2;
    -ms-flex: 2;
    flex:2;
	background-color: white;
}

[data-viewmode="nopresentation"] .j-article .description .flex-item:nth-child(2){
    -webkit-flex:8;
    -ms-flex: 8;
    flex:8;
	background-color: #EEE;
}

/*SHOP-INFO*/
[data-viewmode="nopresentation"] .j-article .shop-info{
    -webkit-flex:2;
    -ms-flex: 2;
	flex:2;
	flex-direction:row;
}

[data-viewmode="nopresentation"] .j-article .shop-info .flex-item:nth-child(1){
    -webkit-flex:3;
    -ms-flex: 3;
	flex:3;
	background-color: white;
}

[data-viewmode="nopresentation"] .j-article .shop-info .flex-item:nth-child(2){
    -webkit-flex:2;
    -ms-flex: 2;
	flex:2;
	background-color: #EEE;
}

[data-viewmode="nopresentation"] .j-article .shop-info .flex-item:nth-child(3){
    -webkit-flex:1;
    -ms-flex: 1;  
	flex:1;
	background-color: white;
    flex-direction: column;
}



.j-article .p-section-0 {
    justify-content: center;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
}

ul.shop-filters-brand{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:0px;
    padding:0px;
}

ul.shop-filters-brand li{
    list-style-type:none;
    box-sizing:border-box;
    padding: 2px 10px;
    margin: 2px 5px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    background-color: aliceblue;
    border: 1px solid #bbb;
    border-radius: 4px;
    align-items:center;
}

    ul.shop-filters-brand li.brand-selected {
        background-color: mediumaquamarine;
        color:white;
}

ul.shop-filters-brand li input{
    list-style-type:none;
    margin:0px;
    padding:0px;
}

ul.shop-filters-brand li span{
    width:200px;
    cursor:pointer;
    margin-left:6px;
}

.shop-filters-brand.in-progress{
    opacity:0.5;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
    [data-viewmode="nopresentation"] .j-article {
        height:300px;
    }

    .j-shop .j-article .article-img {        
        min-width:100%;
        min-height: 100% !important;
    }
}

@-moz-document url-prefix() {
    .j-article .p-section-0{
        /*display: block;*/
        overflow: auto;
        vertical-align: middle;
        text-align:center;
        flex-basis:1px;
    }

    [data-viewmode="narrow"] .j-article .presentation .flex-item:nth-child(1){
        flex-basis:1px;
    }
}

@supports (-ms-ime-align:auto) {
    .j-shop .j-article .article-img {
       height:200px;
    }
}

/*END SHOP*/

.k-grouping-header,
.k-grid-toolbar {
    padding: 0.2em !important;    
}

.k-grouping-header a,
.k-grid-toolbar a {    
    cursor: pointer !important;
}

a#olap-transform-tlbbtn img
{
    vertical-align: middle;
}

.action-button .button-text{
    display:none;
}

.action-button[data-state="create"] .state-create{
    display:inline-block;
}

.action-button[data-state="edit"] .state-edit{
    display:inline-block;
}

[jgen-view-type="olap"] > [role="group"], [jgen-view-type="olap"]  [id$="_rfields"][role="group"]{
    box-sizing:border-box;
    overflow:hidden;
}

pre.empty-tab-content 
{
    margin: 0px;
    padding: 0px;
    border: none;
}

div.dialog-line > div.col-init, div.dialog-line > div.col-ready 
{
    display: inline-block;
    position: absolute;
}

div.dialog-line 
{
    position: static;
    display: block;
    height: 40px;
}

div.param-dialog button.general-form-button {
    height: 30px;
}

[class*="ui-layout"].j-active-view-container{
    background: #bbb; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(white, #bbb 40%); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(white, #bbb 40%); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(white, #bbb 40%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(white, #bbb 99%); /* Standard syntax */
}

[class*="ui-layout"].j-active-view-container.white-background {
    background: #fff;
}

img.close{
    opacity:1;
    filter: alpha(opacity=100);
}

form a.action-column{
    display: inline-block;
    text-align: center;
}

a.action-column{
    display: block;
    text-align: center;
}

a.action-column.action-column-wrapp-container{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

span.k-invalid-msg span.k-i-warning.k-icon {
    position: relative;
    display: inline-block;
}

span.k-widget.jgen-field {
    padding: 0px;
}

.dialog-tabstrip div.k-content {
    position: relative;
}

#contextMenu li.k-item{
    min-width:210px;
}

#contextMenu li.k-item span.k-link{
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
}

[id$="_buttons_vertical_bar"]{
  position: absolute;
  height: 0px;
}

[id$="_buttons_vertical_bar"]:not(:empty){
    width:80px;
}

[id$="_buttons_vertical_bar"]:not(:empty) > *{
    max-width:75px;
}

[id$="_buttons_vertical_bar"]:not(:empty) + .viewblock-container{
    margin-left:80px;
}

.boxes-message-icon{
  vertical-align: text-top;
  padding-right: 5px;
}

div.k-widget.k-window > div.k-window-titlebar.k-header {
    height: 1.475em;
}

div.k-window-actions a.k-window-action.k-link {
    width:  20px;
    height: 20px;
    margin-right: 5px;
}

div.k-window-actions a.k-window-action.k-link span.k-icon{
    zoom: 1.25;
}

div.param-dialog span.k-widget.k-combobox input.k-input {
    height: 100%;
}

div.param-dialog span.k-widget.k-combobox {
    height: calc(100% - 0.334em);
}

div.param-dialog span.k-widget.k-numerictextbox,
div.param-dialog span.k-widget.k-datepicker,
div.param-dialog span.k-widget.k-datetimepicker{
    height: calc(100% - 0.334em);
}

div.param-dialog span.k-widget.k-numerictextbox input.k-input,
div.param-dialog span.k-widget.k-datepicker input.k-input,
div.param-dialog span.k-widget.k-datetimepicker input.k-input,
div.param-dialog span.k-widget.k-timepicker input.k-input{
    height: calc(100% - 0.334em);
}

div.param-dialog input.JGenTextField,
div.param-dialog span.k-widget.k-timepicker  {
    height: 100%;
}

span.jgen-checkbox-col-title{
    white-space:normal;
}

[class*=col-] [type=checkbox].jgen-field{
    vertical-align:middle;
    margin:0px;
}

span.remove-k-i-expand{
    display:none;
}

.viewblock-container[jgen-can-edit="false"] tr:not(.k-state-selected) td.non-editable-column,
.viewblock-container[jgen-can-edit="false"] tr:not(.k-state-selected) td.editable-column,
.viewblock-container tr:not(.k-state-selected) td.non-editable-column{
    background-color:rgba(230,230,230,0.4);
    opacity:0.9;
    -ms-filter:'alpha(opacity=90)';
}

div.filter-field-superwrapper, span.jgen-filter-field-wrapper{
  display: inline-block;
  margin: 5px;
  margin-left: 0px;
  margin-right: 10px
}

#contextMenu .k-link .k-image{
    margin-left:0px;
}

.param-dialog .col-ready[data-visible="false"]{
    display:none;
}

.transparent{
    opacity: 0;
    filter: alpha(opacity=0); 
    visibility: hidden;
}

.jgen-help-wrapper:hover .k-clear-value.help-column-clear, .k-state-selected td:hover .k-clear-value.help-column-clear{
    display:inline-block;
    border-radius: 50%;
    background-color: #dbdbdb;
    color:rgb(120, 120, 120);
}

.jgen-help-wrapper:hover .k-clear-value.help-column-clear{
    position: relative;
    margin-right: -20px;
    left: -25px;
    top: 8px;
}

.k-clear-value.help-column-clear{
    display:none;
    float:right;
    cursor:pointer;
    top: 3px;
    left: -5px;
}

#j-login-form-wrapper .fieldlist {
    padding: 15px;
    background: white;
    max-width: 380px;
    margin: auto;
}

#j-login-form-wrapper .fieldlist li {
	list-style: none;
	padding-bottom: 2em;
	min-height: 30px;
}
          
#j-login-form-wrapper button{
    float: right;
}
          
#j-login-form-wrapper div.k-content{           
    display:table-cell;
    vertical-align: middle;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
          
#j-login-form-wrapper{
    display: table;
    vertical-align:middle;
    width: 100%;
    height: 100%;
}
          
#j-login-form-wrapper label{
    text-transform: uppercase;
}

.article-img[src="/Images/loading.gif"]{
    width:48px  !important;
    height:48px  !important;
}

.viewblock-container td.action-column-container{
    padding:0px;
}

.shop-zoom-button{
    float:right;
}

[delete-template]{
    width: 58px;
    height: 36px;
}

[delete-template] .k-image{
    height:100%;
}

.shop-compare-articles[disabled]{
    opacity:0.4;
}

table.shop-compare {
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

table.shop-compare th {
  padding-top: 11px;
  padding-bottom: 11px;
  background-color: #4CAF50;
  color: white;
}

table.shop-compare td, table.shop-compare th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

table.shop-compare td{
    color:black;
    text-decoration:none;
}

table.shop-compare tr:nth-child(even) {
  background-color: #f2f2f2;
}

table.shop-compare tr:nth-child(odd) {
  background-color: white;
}

.shop-compare td img{
    max-height:200px;
}

html[j-reload-combo-button="false"] .reload-combo{
    display:none;
}

html[data-help-clear-button="false"] [data-help-clear-button]{
    display:none !important;
}

[data-combo-id].reload-combo{
    cursor:pointer;
    height: 100%;
}

.rotate {
    transform: rotate(3600deg);
    transition: transform 10s;
     -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
}

td [data-combo-id].reload-combo{
    float:right;
    position:relative;
    left:-2em;
    vertical-align:middle;    
    color: blue;
    z-index:1000;
}

.j-disabled + .reload-combo{
    display:none;
}

div.col-ready [data-combo-id].reload-combo{
    margin-left: -3.3em;
}


.carousel-indicators{
    width: 50px !important;
    margin-left: -25px !important;
    bottom: -10px;
}

@media screen and (min-width: 768px) {
    .carousel-indicators {
        bottom: -10px !important;
    }
}
/*MOBILEENCHANCEMENT*/
html[data-mobileEnchancement] #menuContainer{
    margin-left:2.3%;
    width:300px;
    z-index: 10000;
    position: relative;
}

html[data-mobileEnchancement] #workArea{
    top:-42px;
}

html[data-mobileEnchancement] #tabstrip > .k-tabstrip-items > li:first-of-type{
    margin-left:300px;
}

html[data-mobileEnchancement] #quickMenuContainer, html[data-mobileEnchancement] #menuSideBar{
    z-index: 10000;
}

html[data-mobileEnchancement] .ui-draggable-handle {
  overflow: visible !important;
}

html[data-mobileEnchancement] .ui-layout-toggler-east {
  transform:scale(2.5,1.3);
  border-radius: 25px;
}

html[data-mobileEnchancement] .ui-layout-toggler-south {
  transform:scale(1.3,2.5);
  border-radius: 25px;
}

html[data-mobileEnchancement], html[data-mobileEnchancement] body, html[data-mobileEnchancement] #main{
    height:100% !important;
}

html[data-mobileEnchancement] #toolbar-buttons [data-action]{
    padding:7px;
    margin:0px 2px
}
/*==========MOBILEENCHANCEMENT*/

.olap-col-header{
    padding-right:25px;
    display:inline-block;
}

.olap-col-header + * {
    margin-left: -25px !important;
}

.viewblock-container{
    box-sizing:border-box !important;
}


textarea.JGenTextField{
    z-index:1 !important;
    line-height:1 !important;
    min-height:44px !important;
}

.olap-btn{
    min-width:60px;
}

.col-ready .k-numeric-wrap{
    padding-right:0px;
}
.col-ready .k-numeric-wrap > *{
    vertical-align:top;
}

.col-ready .k-numeric-wrap > input.jgen-field{
    height:100% !important;
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
    input[type="reset"].k-button{
        display:inline-block;
    }

    input[type="submit"].k-button{
        display:inline-block;
    }
}

/*EDGE*/
@supports (-ms-ime-align:auto) {
    input[type="reset"].k-button{
        display:inline-block;
    }

    input[type="submit"].k-button{
        display:inline-block;
    }
}

#applicationHeader{
    display:none;
    height:0px;
}

.forgot-password-container{
    display:none;
}