@font-face {
    font-family: 'glypth-kk';
    src: url('/assets/fonts/glypth-kk.eot');
    src: url('/assets/fonts/glypth-kk.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/glypth-kk.woff') format('woff'),
    url('/assets/fonts/glypth-kk.ttf') format('truetype'),
    url('/assets/fonts/glypth-kk.svg#glypth-kk') format('svg');
    font-weight: normal;
    font-style: normal;
}

.navbar-toggle{
    display:block !important;
}

.navbar-toggle .icon-bar{
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.inplace-edit{
    position:relative;
    z-index:200;
    color:#333;
}

.elipsis{
    padding-left:0px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    left:0;
}

.storage-ctrl{
    min-height:45px !important;
    max-height:70px !important;
    height:66px !important;
    overflow: hidden;
}

/*
ul.fancytree-container {
	border: none;
}
*/

/* Define custom width and alignment of table columns */
.tree {
    table-layout: fixed;
    font-size: 0.8vw;
}
table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}
/*
#tree1 tr td:nth-of-type(1) {
  text-align: right;
}
#tree1 tr td:nth-of-type(2) {
  text-align: center;
}*/
#tree1 tr td:nth-of-type(1) {
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reduce bootstrap's default 'panel' padding: */
.panel-body {
    padding: 3px 5px !important;
    /*
    *   Kalle added
    */
    min-width: 595px;
}
/*Kalle*/
.panel-body thead th{
    position: sticky;
    background: #fff;
    top: 0;
    z-index: 1;

}

.panel{
/* Kalle added: */;
    height: 100%;
    overflow: scroll;
    margin-bottom: 0;
/* Kalle end */
}

/* überschreibt style fancytree.css */
span.fancytree-node.kategorie > span.fancytree-title{
    font-weight: bold;
}

/* Highlighting for Fanyctree ext-filter plugin */

.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title, .fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title{
    color: #010101;
    background-color: rgba(255, 232, 141, 0.33);
    font-weight: normal;
    font-style: italic;
}
.mark, mark{
    background-color: #fcf060 !important;
    padding: 0 !important;
}

/* überschreibt style fancytree.css */
/* Workaround für falsch verwendeten icon-attribut im eqm-manager!; TODO: fixen! */
.fancytree-custom-icon{
    display: none !important;
}

.blind-panel span.paste{
    cursor: pointer;
    font-weight: bold;
}
.blind-panel span.non{
    color:lightgray;
    cursor: default !important;
}

/* Node-Op_Panel-Menü + hover etc. */

.icon-a+_v3:before{content:'\0041';}
.icon-k+_v3:before{content:'\004b';}

.create-artikel-icon,
.create-kategorie-icon{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16pt;
    font-size: 1.1vw;
    display:inline-block;
    cursor:pointer;
    font-family: "glypth-kk";
    color: #333;
    margin: -1px 0 0px 0;
    line-height: 1;
}

.fancytree-active .create-artikel-icon,
.fancytree-active .create-kategorie-icon {
    color: #fff;
}

.create-artikel:hover .create-artikel-icon,
.create-kategorie:hover .create-kategorie-icon
{
    color: #000;
}

.fancytree-active .create-artikel:hover .create-artikel-icon,
.fancytree-active .create-kategorie:hover .create-kategorie-icon,
.fancytree-active .node-op-panel .fa-long-arrow-down:hover,
.fancytree-active .node-op-panel .fa-level-down:hover{
    color: #ccc;
}

.node-op-panel .fa-long-arrow-down:hover, .node-op-panel .fa-level-down:hover{
    color: #000;
}

div.node-op-panel,
div.node-del-panel,
div.node-toggle-panel
{
    position: absolute;
    background: inherit;
    color: #333333;
    display: none;
    top: 3px;
    z-index:101;
}

div.node-attr-expand{
    top: 5px;
    right:5px;
}

div.node-op-panel{
    top: 0px;
    padding:0;
    left: 0px;
    /*kalle*/

    min-width: 70px;
}

table.tree tr.fancytree-active:hover > td:first-child div.node-op-panel,
table.tree tr.fancytree-active:hover > td:last-child div.node-toggle-panel{
    color: #fff;
}


table.tree tr.fancytree-active:hover > td:first-child div.node-op-panel .create-submenu{
    background-color: inherit;
    color:white;
}

.create-submenu{
    display:none;
    position:absolute;
    background-color: #f5f5f5;
    padding:0px 9px 2px 9px;
    margin: 1px 0 0 -5px;
    border-radius: 0px 0px 6px 6px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-top: 1px solid #ccc;
    font-size:large;
}

.create-kategorie:hover .create-submenu,
.create-artikel:hover .create-submenu{
    display:block;
    z-index:100;
    color: #333333;
    white-space:nowrap;
}

.create-kategorie:hover,
.create-artikel:hover{
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    padding: 3px 4px 2px 4px;
}

table.tree tr:hover > td:first-child div.node-op-panel,
table.tree tr:hover > td:last-child div.node-toggle-panel .node-toggle,
table.tree tr:hover > td:last-child > div.node-del-panel
{
    display:block !important;
}

/* Formatierung der Tree-Tabellen */

table.tree tr > td:first-child,
table.tree tr > td:last-child{
    overflow:visible !important;
    position:relative;
    background:inherit;
}

table.tree tr:hover > td:first-child
{
    background-color:inherit;
    /* font is invisible */
    color:rgba(255,0,0,0) !important;
}

table.tree tr > td:nth-child(2){
    text-align:right;
}

/* set Table column relation */

table.tree thead tr th:nth-child(1){
    width: 10%
}
table.tree thead tr th:nth-child(2){
    width: 5%;
}
table.tree thead tr th:nth-child(3){
    width: 45%
}
table.tree thead tr th:nth-child(4){
    width: 15%
}
table.tree thead tr th:nth-child(5){
    width: 10%
}

/*****************************************/
.create-kategorie,
.create-artikel{
    display:inline-block;
    background-color:inherit;

    padding: 4px 5px 1px 5px;
    margin: 0;
    border-radius: 6px 6px 0 0;
}
/*************************/

/* Node-Operations */

.sibling-create-kategorie, .child-create-kategorie, .child-create-artikel, .sibling-create-artikel, .node-delete{
    cursor:pointer;
    font-size:large;
}

.fancytree-edit-new:hover .node-op-panel {
    display: none !important;
}
/*************/

.grid{
    padding-left: 5px;
    padding-right: 5px;
    display:flex;
    height: 91vh;
}

.portlet-head{
    padding-bottom: 10px;
    /*
    * Kalle added
    */
    min-width: 600px;
}

.portlet-head > div{
    padding: 10px 0 1px 4px;
    min-height:22px;
    line-height: 22px;
}
#resizeable-bar{
    min-width:16px;    
    width:1%;
    display: flex;
    align-items: center;
}
#resizeable-bar span.ui-icon{
    cursor:pointer;
}
.resizeable-left{}
.resizeable-grip{}
.resizeable-right{}

.flexbox-wrapper-portlet{
    width:49%;
    height: 100%;
}
.portlet{
    position:relative;
}

/** improve button-behaviour **/
/*Kalle */
.form-control{
    font-size: 0.8vw;
}

.form-control.add-offer {
    white-space: nowrap;
    overflow: hidden;
}

.tree{
    position:relative;
}

.tree > ul{
    min-height:30px;
}
.indent,.outdent{
    position:absolute;
    border: 1px dashed black;
    width:50px;
    z-index:10;
    top:0;
    bottom:0;
    visibility:hidden;
}

.outdent{
    left:0;
}

.indent{
    right:0;
}
.indent.ui-droppable-hover, .outdent.ui-droppable-hover{
    visibility:visible;
    background-color:yellow;
}

.indent.ui-droppable-active, .outdent.ui-droppable-active{	visibility:visible;}
.fancytree-filter{
    border:1px dotted;
    padding: 4px;
    padding-bottom: 0px;
    border-bottom:0px;
}

/*****************************/

input.text { margin-bottom:12px; width:95%; padding: .4em; }

fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }

div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }

.validateTips { border: 1px solid transparent; padding: 0.3em; }
/***************************/

/* schicker! */

body {
    font-family: Arial, Helvetica, sans-serif;
}
.ui-draggable, .ui-droppable {
    background-position: top;
}

/* überschreibt style fancytree.css */


table.fancytree-ext-table.fancytree-treefocus.fancytree-container > tbody > tr.fancytree-focused span.fancytree-title {
    outline: none !important;
}
/* überschreibt style fancytree.css */
span.fancytree-node{
    /*margin-top: 0px !important;
    margin-bottom: -1px !important;;
    */
    background:inherit;
}
.attr-edit{
    display: none;
    z-index: 155;
    border-top: #ddd 1px solid;
    padding-bottom: 31px;
    padding-top: 5px;
    left: 0;
    right: 0;
    top: 5px;
    position: relative;
    min-height: 55px;
}

.menu-item-actions {
    right: 0;
    position: absolute;
    z-index: 156;
    bottom: 5px;
}

div.node-del-panel{
    top: 5px;
    right:5px;
}

.attr-edit div.node-del-panel{
    top: 1px;
    right: 0;
    display: block;
}

.fancytree-active .node-del-panel,
.fancytree-active > td:last-child div.node-toggle-panel .node-toggle.fa-caret-up
{
    color: #fff !important;
}

.fancytree-active .attr-edit .row > div input,
.fancytree-active .attr-edit .row select,
.fancytree-active .attr-edit .row select option,
.fancytree-active .attr-edit button{
    color: #000;
    font-weight:normal
}

.attr-edit input,
.attr-edit select{
    max-width: 100%;
    font-style: normal;
}

.attr-edit .row > div{
    overflow: hidden;
}

div.node-toggle-panel {
    top: 0px;
    right: 8px;
    font-size: large;
    display: block;
    cursor: pointer;
}

.attr-edit label{
    font-weight: normal;
    font-style: italic;
}

.node-toggle{
    display: none;
}
.node-toggle.fa-caret-up{
    display: block !important;
}

.panel-wrapper{
    background: inherit;
}

/* additive fancytree-styoles */
/* set status */
/* style zieht nicht an! */
.fancytree-loading{
    color: darkgray !important;
}

.fancytree-statusnode-error{
    background-color:red;
}
.fancytree-statusnode-error .fancytree-node .fancytree-expander:before {
    content: "\e107" !important; /* warning-sign! */
}
.fancytree-expander{
    /* Kalle */
    display: inline!important;
}

/*    Loadanimation */
.blockUI{
    position: fixed;
    cursor: wait;
}
.blockUI#blockOverlay{
    z-index: 1000;width: 100%;height: 100%;background-color: rgb(0, 0, 0);opacity: 0.75;
}
.blockUI#blockMessage{
    z-index: 1011;width: 30%;top: 40%;left: 35%;text-align: center;color: white;
}
.blockUI#blockMessage h1{font-size: 1.7em;}
/* /. Loadanimation */


.ui-dialog{
    background: #fbfbfb;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0.5em;
    z-index: 1000;
}