/* Funktionen außerhalb vom Gerüst, für alle Druckkosten-Versionen */


:root {
    --dk-contrast-full-color: rgba(247,101,3,1);
    --dk-contrast-low-color: rgba(247,101,3,0.66);
    --dk-contrast-half-color: rgba(247,101,3,0.5);
    --dk-contrast-light-color: rgba(247,101,3,0.2);
    --dk-printer-highlight-color: rgba(247,101,3,0.5);
    --dk-printer-highlight-txt-color: #000;

    --dk-big-font: 'Segoe UI',Arial
}
/*
body[data-client='kyo'] {

    --dk-contrast-full-color: rgb(10,155,205);
    --dk-contrast-low-color: rgba(10,155,205,0.67);
    --dk-contrast-half-color: rgba(10,155,205,0.5);

    --dk-printer-highlight-color: rgb(10,155,205);
    --dk-printer-highlight-txt-color: #fff;
 Farbänderungen 4.8.2020
    --dk-contrast-full-color: rgba(223,5,35,1);
    --dk-contrast-low-color: rgba(223,5,35,0.66);
    --dk-contrast-half-color: rgba(223,5,35,0.5);
    --dk-contrast-light-color: rgba(223,5,35,0.2);

    --dk-printer-highlight-color: rgba(223,5,35,1.0);
    --dk-printer-highlight-txt-color: #fff;
}
*/





/* Einstellungsfelder */

.set_option_item { /*background-color:rgba(247,101,3,0.2); */ margin:6px 0; padding:12px 0 6px 0; color:#333; border-top:#bbb 1px solid; font-size:12px; }


#set_option_wrapper > .set_option_item:first-child,
#dk_phase_set + .set_option_item { border-top:none; padding-top:0; }

.set_option_item > h3 {  font-family:var(--dk-big-font); font-size:18px; line-height:18px; font-weight:normal; margin:0; margin-bottom:3px; }
.set_option_item > span { margin-bottom:3px; }
.set_option_item > p { margin:0; margin-top:6px; line-height:120%; }
.set_option_item > p + p { margin-top:3px; }



/* DRUCKERAUFLISTUNG / KYO */

#set_option_wrapper[data-short='1'] { display:flex; }
#set_option_wrapper[data-short='1'] > .set_option_item:not(:first-child) { margin-left:14px; }

#set_option_wrapper[data-short='1'] > .set_option_item { border-top:none; padding-top:0; white-space: nowrap; }
#set_option_wrapper[data-short='1'] > .set_option_item > h3,
#set_option_wrapper[data-short='1'] > .set_option_item > p { display:none; }

#set_option_wrapper[data-short='1'] > .set_option_item:last-child  { /*flex:1;*/ }

.set_option_item > span[data-typ='set'] { display:block; margin:0; line-height:22px;  }
.set_option_item > span[data-typ='set'] > label { display:inline-block; transform: skew(-7deg); margin:2px 0; }
.set_option_item > span[data-typ='set'] > label > span { display:inline-block; transform: skew(7deg);  /* skew drehen */}
.set_option_item > span[data-typ='set'] > input[type='radio'] { display:none; }
.set_option_item > span[data-typ='set'] > label { padding:0 4px; border:1px solid var(--dk-contrast-full-color); color:var(--dk-contrast-full-color); background-color:#fff; /*margin-right:3px;*/ white-space: nowrap; }
.set_option_item > span[data-typ='set'] > input:checked + label { background-color:var(--dk-contrast-full-color); color:#fff; }
.set_option_item > span[data-typ='set'] > input:not(:checked) + label:hover { background-color:var(--dk-contrast-half-color); color:#fff; border:1px solid transparent; }
.set_option_item > span[data-typ='set'] > label:last-child { margin-right:0; }


.set_option_item > span[data-typ='range'] > input[type='checkbox'] { display:none; }
.set_option_item > span[data-typ='range'] > input[type='checkbox'] + label:before { content:url('/bilder/symbol/checkbox_disabled.svg'); margin-right:6px; }
.set_option_item > span[data-typ='range'] > input[type='checkbox']:checked + label:before { content:url('/bilder/symbol/checkbox_enabled.svg'); }
.set_option_item > span[data-typ='range'] > input[type='checkbox'] + label { vertical-align:middle; font-family:var(--dk-big-font); font-size:16px; display:block; margin-bottom:2px; }

/* zusätzliches Disabled per JS */
.set_option_item > span[data-typ='range'] > input[type='checkbox']:checked + label { margin-bottom:0; }
.set_option_item > span[data-typ='range'] > input[type='checkbox']:checked + label ~ * { display:none; }

.set_option_item > span[data-typ='range'] > input[type='range'] { font-size:11px; color:#555; position:relative; margin-bottom:20px; }
.set_option_item > span[data-typ='range'] > input[type='range'] { width:100%; max-width: calc(100% - 170px); }

.set_option_item > span[data-typ='range'] > input[type='range']::before { content:attr(min); position:absolute;  left:0; bottom:-16px; }
.set_option_item > span[data-typ='range'] > input[type='range']::after { content:attr(max); position:absolute; right:0; bottom:-16px; }
.set_option_item > span[data-typ='range'] > input[type='number'] { margin-left:10px; font-family:var(--dk-big-font); font-size:16px; text-align:right; border:#888 1px solid; border-radius:2px; top:1px; width:65px; text-align:right; }
.set_option_item > span[data-typ='range'] > input[type='number'] + label { margin-left:6px; font-family:var(--dk-big-font); font-size:16px; }


.set_option_item > span[data-typ='query'] { border:1px solid var(--dk-contrast-full-color); transform: skew(-7deg); flex:1; padding:3px; padding-top:4px; margin-top:2px; line-height:22px; display:flex; width:100%; max-width:200px; text-align:right; }
.set_option_item > span[data-typ='query'] > input:active,
.set_option_item > span[data-typ='query'] > input { width:100%; transform: skew(7deg); border:none; background:transparent; border:none; outline:none; padding:0 3px; color:var(--dk-contrast-full-color); }
.set_option_item > span[data-typ='query'] > input::placeholder { color:var(--dk-contrast-full-color); font-style:italic; }

.set_option_item > span[data-typ='query'][data-active] { background-color:var(--dk-contrast-full-color); }
.set_option_item > span[data-typ='query'][data-active] > input { color:#fff; }