.dataTables_wrapper{ overflow-x: auto; }
.dataTables_wrapper > *{ min-width: 979px; }
.textcentered{ text-align: center !important; }

.input-in-k{ position: relative; display: inline-block; }
.input-in-k:after{ content: 'k'; display: inline-block; width: 10px; height: 30px; position: absolute; left: 50px; top: 2px;}
.input-in-k > input{ width: 50px !important; text-align: right; }
.input-in-p{ position: relative; display: inline-block; }
.input-in-p:after{ content: '%'; display: inline-block; width: 10px; height: 30px; position: absolute; left: 52px; top: 2px;}
.input-in-p > input{ width: 50px !important; text-align: right; }
.selectCode{
    -webkit-touch-callout: all !important;
    -webkit-user-select: all !important;
    -khtml-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    user-select: all !important;
}

/* header menus */
@media (min-width: 701px){ .boxHeadMenu{ margin-top: -5px; } .boxHeadMenu > div:first-child{ display: none; } }
@media (max-width: 700px){
    .boxHeadMenu:NOT(:hover) > div:last-child{ display: none; }
    .boxHeadMenu > div:first-child{ position: relative; z-index: 1; padding: 0 15px; }
    .boxHeadMenu > div:last-child{ position: absolute; z-index: 2; top: 37px; left: 5px; right: 5px; text-align: center; padding: 7px 0; background: #ffffff; border-bottom: 1px solid #f1f1f1; }
    html.dark .boxHeadMenu > div:last-child{ background: #181818; }
}
@media (max-width: 400px){ .boxHeadMenu > div > div{ width: 100%; float: none; margin-bottom: 5px; } }
.boxHeadMenu, .boxHeadMenu > div{ display: inline-block; float: right; }
.boxHeadMenu > div > div{ display: inline-block; }
.boxHeadMenu .css-selectmenu{ margin: 0 4px; }
.boxHeadMenu a{ display: inline-block; margin-left: 2px; margin-top: 1px; padding: 5px 4px 4px 8px !important; height: 27px; }

/* tables */
.dataTable tbody th, table.dataTable tbody td { padding: 2px 8px !important; }
tbody > tr > td:nth-child(2){ text-align: center; }
tbody tr:hover > td:NOT(:hover),
table.dataTable tbody tr > .dtfc-fixed-start:hover,
tbody tr:hover > td{ background: #e9e9e9; border-color: #ccc; }

html.dark tbody tr:hover > td:NOT(:hover):NOT([data-month]),
html.dark tbody .dtfc-fixed-start:hover,
/*html.dark tbody tr:hover > td > a:NOT(.ui-state-hover), macht beim Date picker die Reihen dunkel bei :hover, soll nicht dunkel sein im Date picker */
html.dark tbody tr:hover > td:NOT([data-month]){ background: rgb(33, 37, 41) !important; }
html.dark .dataTable td:NOT(.ui-state-success):NOT(.ui-state-error),
html.dark tbody tr:hover > td > a{ color: #fff; }

/* OCR software/sites & our text Parser */
.OCRblock{ padding: 0 10px; }
.OCRblock > .ocrsoftware{ position: relative; float: left; width: 35%; margin-top: 11px; }
.OCRblock > .ocrsoftware > .title{ color: #fff !important; line-height: 44px; -webkit-box-shadow: 1px 1px 1px 1px #cccccc; box-shadow: 1px 1px 1px 1px #cccccc; }
.OCRblock > .ocrsoftware > .content{ position: absolute; z-index: 100; top: 59px; width: 600px; height: 500px; overflow-y: scroll; padding: 0 10px; background: #f1f1f1; border-radius: 10px; border: 1px solid #ada6a6; -webkit-box-shadow: 1px 1px 4px 1px #ada6a6; box-shadow: 1px 1px 4px 1px #ada6a6; }
.OCRblock > .ocrsoftware:NOT(:hover):NOT(:active) > .content{ display: none; }
.OCRblock p{ font-size: 14px; }
.OCRblock .ocrparser{ float: right; width: 400px; }
.OCRblock label{ display: inline-block; margin: -5px 0 3px 0; }
.OCRblock label:hover{ cursor: pointer; }
.OCRblock .ocrparser textarea{ width: 400px; max-width: 400px; height: 58px; resize: none; border-radius: 6px; }
@media (max-width: 700px){
    .OCRblock > .ocrsoftware{ width: 100%; }
    .OCRblock .content{ width: 100% !important; }
    .OCRblock .ocrparser{ width: 100%; text-align: center; }
}
@media (max-width: 400px){
    .OCRblock .content{ width: 110% !important; left: -15px; }
    /*.OCRblock .ocrparser{ width: 100%; text-align: left; }*/
    .OCRblock .ocrparser, .OCRblock .ocrparser textarea{ width: 100%; }
    .saveEval .dataTables_wrapper .dataTables_filter{ text-align: left; }
}
@media (max-height: 630px){ .OCRblock .content{ height: 300px !important; } }
@media (max-height: 425px){ .OCRblock .content{ height: 200px !important; } }

/* OCR parse mode selector */
#newEvaText .mmBox{ border: none; }
#ocrMenu.no-view{ display: none; }
#ocrMenu.no-view + textarea{ height: 95px; }
#parseMode{ width: 250px; height: 30px; display: inline-block; border: 1px solid #ccc; text-align: center; padding: 0 !important; border-radius: 4px; }
#parseMode label{ height: 28px; line-height: 28px; width: 33.3%; display: inline-block; float: left; margin: 0 !important; vertical-align: unset !important; cursor: pointer; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
#parseMode input:checked + label{ font-weight: bold; background: #2a3f23; color: #fff; cursor: default; }
#parseMode input.first:checked + label{ border-radius: 4px 0 0 4px; }
#parseMode input.last:checked + label{ border-radius: 0 4px 4px 0; }


/* commander */
#commiMenu{ margin: 0; list-style: none; }
#commiMenu > li{ display: inline-block; position: relative; padding: 0; margin: 30px 0; text-align: center; }
#commiMenu .name{ margin-top: -24px; font-weight: bold; color: #000; }
#commiMenu .colSel{ margin-top: -45px; }
#commiMenu .comimg.big .name{ margin-top: -30px; white-space: nowrap; font-size: 18px; }
#commiMenu .comimg.big .colSel{ margin-top: -45px; }

.comimg .starMenu{ position: absolute; bottom: 0px; font-size: 16px; left: 4px; direction: rtl; }
.comimg.big{ font-size: 22px; left: 12px; }
#commiMenu > li:NOT(:hover) > .colSel{ display: none; }
#commiMenu i{ cursor: pointer; }
.comimg{ height: 109px; width: 92px; margin: 0 15px; float: left; background-position: center; background-repeat: no-repeat; background-size: cover; }
.comimg.big{ height: 163px; width: 138px; }

.commanderFilter > div { width: 53px !important; }
.commanderFilter > div:first-child { line-height: 39px !important; margin: 0; }
.commanderFilter img{ margin: 0.5em 0 !important; }

/* the color selector (menu) */
.comimg .fa-times{ font-size: 16px; top: 1px; position: relative; }
.comimg.big .fa-times{ font-size: 21px; top: 1px; position: relative; }
.colSel > i[data-val="no"]{ color: #ff494959; }
.colSel > i[data-val="1"]{ color: #b1b1b159; }
.colSel > i[data-val="2"]{ color: #46e84b59; }
.colSel > i[data-val="3"]{ color: #1d8cc159; }
.colSel > i[data-val="4"]{ color: #821dc159; }
.colSel > i[data-val="5"]{ color: #d4c51559; }
.colSel .fa-times:hover{ color: red !important; }
.colSel > i[data-val="1"]:hover{ color: #b1b1b1; }
.colSel > i[data-val="2"]:hover{ color: #46e84b; }
.colSel > i[data-val="3"]:hover{ color: #1d8cc1; }
.colSel > i[data-val="4"]:hover{ color: #821dc1; }
.colSel > i[data-val="5"]:hover{ color: #d4c515; }


/* color the name row  */
li[data-color="1"] .name{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
li[data-color="2"] .name{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,b4e391+100;Green+3D */
background: #b4e391; /* Old browsers */
background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */

}
li[data-color="3"] .name{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b2e1ff+0,66b6fc+100;Blue+3D+%236 */
background: #b2e1ff; /* Old browsers */
background: -moz-linear-gradient(top,  #b2e1ff 0%, #66b6fc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b2e1ff 0%,#66b6fc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */

}
li[data-color="4"] .name{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */

}
li[data-color="5"] .name{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

}

/* star menu hover */
.starMenu:NOT(.disabled) span{ transition: all 0.5s; cursor: pointer; }
.starMenu:NOT(.disabled) span:hover{ color: gold; transform: scale(1.3); }
.starMenu:NOT(.disabled) > .comStar1:hover ~ span, .comStar1.active, .comStar1.active ~ span{ color: gold; }
.starMenu:NOT(.disabled) > .comStar2:hover ~ span, .comStar2.active, .comStar2.active ~ span{ color: gold; }
.starMenu:NOT(.disabled) > .comStar3:hover ~ span, .comStar3.active, .comStar3.active ~ span{ color: gold; }
.starMenu:NOT(.disabled) > .comStar4:hover ~ span, .comStar4.active, .comStar4.active ~ span{ color: gold; }