@charset "ISO-8859-1";

/* some custom-props to make it easier to adjust the styles */
:root
{
    --theme-font: Verdana, Arial, Helvetica, sans-serif;

    --theme-size-h1: 14px;
    --theme-size-h2: 13px;
    --theme-size-h3: 11px;
    --theme-size-h4: 10px;
    --theme-size-std: 11px;
    --theme-size-legend: 12px;
    --theme-size-info: 10px;
    --theme-size-hint: 10px;

    --theme-border-light: #ffffff;
    --theme-border-readonly: #cdcdcd;
    --theme-border-medium: #aaaaaa;
    --theme-border-dark: #333333;
    --theme-border-disabled: #999999;
    --theme-border-error: red;

    --radius-small: 0px;
    --radius-medium: 0px;
    --radius-big: 0px;

    --theme-bkg-light: #FFFFFF;
    --theme-bkg-medium: #CCCCCC;
    --theme-bkg-dark: #333333;
    --theme-bkg-selected: #444444;
    --theme-bkg-hover: #444444;
    --theme-bkg-disabled: #EEEEEE;
    --theme-bkg-mandatory: #FFFFFF;
    --theme-bkg-error: lightyellow;
    --theme-bkg-info: #FFFFD2;

    --theme-txt-light: #FFFFFF;
    --theme-txt-medium: #222222;
    --theme-txt-dark: #000000;
    --theme-txt-selected: #EEEEEE;
    --theme-txt-hover: #EEEEEE;
    --theme-txt-disabled: #777777;
    --theme-txt-error: darkred;
    --theme-txt-info: #333333;
    --theme-txt-hint: #999999;

    --gradient-start-h1: #AAAAAA;
    --gradient-stop-h1: #AAAAAA;
    --gradient-start-btn: #EEEEEE;
    --gradient-stop-btn: #EEEEEE;
    --gradient-start-btn-disabled: #999999;
    --gradient-stop-btn-disabled: #999999;
    --gradient-start-btn-hover: #BBBBBB;
    --gradient-stop-btn-hover: #BBBBBB;

    --theme-txt-tip: darkblue;
}

form
{
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: var(--theme-font);
    font-size: var(--theme-size-std);
    border-radius: var(--radius-big);
    padding: 0px;
    background-color: var(--theme-bkg-light);
    display: inline-block;
    border-bottom-right-radius: 8px;
}

form h1
{
    font-size: var(--theme-size-h1);
    font-weight: bold;
    color: var(--theme-txt-dark);
    padding: 10px 5px;
    border-radius: inherit;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    background-image: linear-gradient(var(--gradient-start-h1), var(--gradient-stop-h1));
    margin: 0;
}

form h2
{
    font-size: var(--theme-size-h2);
    font-weight: bold;
}

form h3
{
    font-size: var(--theme-size-h3);
    font-weight: bold;
}

form h4
{
    font-size: var(--theme-size-h4);
    font-weight: bold;
}

form fieldset
{
    color: var(--theme-txt-dark);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--radius-medium);
    line-height: 190%;
    margin: 8px 5px 5px 5px;
    padding: 4px 0px 4px 10px;
}

form legend
{
    font-size: var(--theme-size-legend);
    font-weight: bold;
    color: var(--theme-txt-medium);
    padding: 0px 5px;
    margin: 0px 0px 0px -10px;
    background-color: var(--theme-bkg-medium);
    width: 100%;
}

form fieldset div
{
	width: calc(100% - 10px);
}

form legend img
{
    height: 12px;
}

form hr
{
    border: none;
    border-top: 1px solid var(--theme-border-medium);
	width: calc(100% - 5px);
	margin-left: -3px;
}

form hr.doubleHR
{
    border: none;
    border-top: 3px double var(--theme-border-medium);
    width: calc(100% - 5px);
    margin-left: -3px;
}

form label
{
    color: var(--theme-txt-dark);
    display: block;
    float: left;
}

form label.radio
{
    padding-right: 8px;
}

form input, form textarea, form select
{
    font-size: var(--theme-size-std);
    font-weight: normal;
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-medium);
    margin: 2px 0;
}

form input[disabled],
form select[disabled],
form textarea[disabled]
{
    color: var(--theme-txt-disabled);
    background-color: var(--theme-bkg-disabled);
}

form input[readonly],
form select[readonly]
{
    color: var(--theme-txt-disabled);
    background-color:transparent;
    border: 1px solid var(--theme-border-readonly);
}

option:checked 
{ 
    background-color: #cde6f7;
    color: black;
}

form ::placeholder
{
    color: var(--theme-txt-hint);
    font-size: var(--theme-size-hint);
    opacity: 1;
}

form ::-ms-input-placeholder
{
    color: var(--theme-border-readonly);
    font-size: var(--theme-size-hint);
}

form textarea
{
    font-size: var(--theme-size-std);
    font-weight: normal;
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-medium);
}

form .error
{
    color: var(--theme-border-error);
}

form .numeric
{
    font-family: 'Inconsolata', sans-serif !important;
    font-size: 13px !important; /* Inconsolata appears smaller than 'normal' sans-serif */
}

form .inputOK, form .inputOK_R
{
    border: 1px solid var(--theme-border-medium);
}

form .inputMand, form .inputMand_R
{
    border: 1px solid var(--theme-border-dark);
    background-color: var(--theme-bkg-mandatory);
}

form .inputError, form .inputMError, form .inputError_R, form .inputMError_R
{
    color: var(--theme-txt-error);
    background-color: var(--theme-bkg-error);
    border: 2px solid var(--theme-border-error);
}

form .inputError:focus, form .inputMError:focus,
form .inputError_R:focus, form .inputMError_R:focus
{
    border: 2px solid var(--theme-border-error) !important;
    outline: none;
 }

form .inputOK_R, form .inputMand_R, form .inputError_R, form .inputMError_R
{
    text-align:right;
}

form input[type=checkbox]
{
    vertical-align: bottom;
    margin: 2px 4px 4px 0px;
}

form input[type=radio]
{
    margin-right: 8px;
    margin-top: 4px;
}

form input[type=submit],
form input[type=button],
form input[type=file],
form button
{
    border: 1px solid var(--theme-border-dark);
    border-radius: var(--radius-small);
    padding: 2px 10px;
    background: linear-gradient(var(--gradient-start-btn), var(--gradient-stop-btn));
    margin: 2px 0 1px 0;
    font-family: inherit;
    font-size: inherit;
}

form input[type=submit]:disabled,
form input[type=button]:disabled,
form input[type=file]:disabled,
form button:disabled
{
    border: 1px solid var(--theme-border-disabled);
    color: var(--theme-txt-disabled);
    background: linear-gradient(var(--gradient-start-btn-disabled), var(--gradient-stop-btn-disabled));
}

form input[type=submit]:hover:enabled,
form input[type=button]:hover:enabled,
form input[type=file]:hover:enabled,
form button:hover:enabled
{
    background: linear-gradient(var(--gradient-start-btn-hover), var(--gradient-stop-btn-hover));
}

form .forminfo
{
    box-sizing: border-box;
    color: var(--theme-txt-info);
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--radius-medium);
    padding: 0 5px;
    margin: 4px 0px;
    background-color: var(--theme-bkg-info);
    font-size: var(--theme-size-info);
}

form .forminfo.attention, 
form .forminfo.stop, 
form .forminfo.information 
{
    padding-left: 60px;
	position: relative;
    z-index: 0;
}

form .forminfo.attention::before,
form .forminfo.stop::before, 
form .forminfo.information::before 
{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	width: 60px;
	height: 100%;
	max-height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 0px;
}

form .forminfo.attention::before
{
    background-image: url(../images/attention.svg);
}

form .forminfo.stop::before 
{
    background-image: url(../images/stop.svg);
}

form .forminfo.information::before 
{
    background-image: url(../images/information.svg);
}

form .forminfo ul
{
    padding-left: 16px;
    margin: 5px 0;
}

form .forminfo li
{
    color: var(--theme-txt-info);
	background-color: var(--theme-bkg-info);
    font-size: var(--theme-size-info);
}

form .forminfo table td
{
    color: var(--theme-txt-info);
    background-color: var(--theme-bkg-info);
    font-size: var(--theme-size-info);
    line-height: 150%;
}

form .sbSelect
{
    opacity: 0;
    width: 100%;
    position: relative;
}

form .sbBtn
{
    position: absolute;
    width: 100%;
    right: 0px;
    top: 0px;
    padding-top: 0px;
    height: 20px;
    margin: 0;
}

#buttonbox
{
    clear: both;
    margin: 10px 10px 0 10px;
    padding:  10px 0px 10px 0px;    /* t, r, b, l */
    border-top: 1px solid var(--theme-border-medium);
}

#buttonbox input[type=submit], #buttonbox input[type=button], #buttonbox input[type=file]
{
    margin-left:  3px;
    margin-right: 3px;
}

form img.picker
{
    margin-left: 5px;
    vertical-align: text-bottom;
    max-height: 18px;
}

form img.picker_top
{
    margin-left: 5px;
    vertical-align: top;
    padding-top: 5px;
}

form .readonly
{
    color: var(--theme-txt-disabled);
}

form .hint
{
    color: var(--theme-txt-hint);
    font-size: var(--theme-size-hint);
    line-height: 150%;
    padding-top: 5px;
}

form .error
{
	font-weight: bold;
    color: red;
}

#content form .error a, form .error a:visited 
{
    font-weight: bold;
    color: red;
    text-decoration: none;
}

#content form .error a:hover 
{
	text-decoration: underline;
}

form .valid
{
    color: #009900;
}

form .slider
{
	display: inline-flex;
	height: calc(var(--theme-size-std) + 8px);
    background-image: linear-gradient(to right, var(--theme-border-medium), var(--theme-border-medium));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: left 55%;
    vertical-align: top;
    padding-top: 2px;
}

form .slider_label
{
    display: block;
    font-weight: bold;
}

form input[type=range]
{
    appearance: none;
    width: 100%;
    background: transparent;
    border: unset;
    cursor: pointer;
    outline: 0;
    user-select: auto;
    margin: 0;
}

form input[type=range]:focus
{
    outline: none;
    border: 1px dotted var(--theme-border-medium);
}

form input[type=range]::-ms-track
{
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

form input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    width: var(--theme-size-legend);
    border-radius: 50%;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

form input[type=range]::-moz-range-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    width: var(--theme-size-legend);
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

form input[type=range]::-ms-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

/**
 * meter element.
 * For more infos see https://css-tricks.com/html5-meter-element
 */
form meter,
form meter[value]
{
    --color-good: #077806;
    --color-optimal: #feb500;
    --color-bad: #d6471e;

    appearance: none;	
    border: 1px solid var(--theme-border-medium);
	border-radius: var(--radius-medium);
    background: none;
    background-color: var(--theme-bkg-light);
    height: 0.7em;
    margin-top: 5px;
}

form meter::-webkit-meter-bar 
{
    background-color: var(--theme-bkg-light);
    height: 0.7em;
    border-radius: var(--radius-medium);
}

form meter::-webkit-meter-optimum-value 
{
	background-color: var(--color-good);
}

form meter::-webkit-meter-suboptimum-value 
{
    background-color: var(--color-optimal);
}

form meter::-webkit-meter-even-less-good-value 
{
    background-color: var(--color-bad);
}

form meter[value]::-moz-meter-bar 
{
    height: 0.7em;
    border-radius: var(--radius-medium);
}

form meter:-moz-meter-optimum::-moz-meter-bar
{
    background: none;
    background-color: var(--color-good);
}

form meter:-moz-meter-sub-optimum::-moz-meter-bar
{
    background: none;
    background-color: var(--color-optimal);
}

form meter:-moz-meter-sub-sub-optimum::-moz-meter-bar
{
    background: none;
    background-color: var(--color-bad);
}

/**
 * star rating element
 */
form .starrate 
{
    display: inline-block;
}

form .starrate input[type=radio] 
{ 
    display: none; 
}

form .starrate label 
{
    float: right;
    padding: 0px 1px;
    font-size: 20px;
}

form .starrate label:before 
{
    color: var(--gradient-start-btn-disabled);
    content: '\2606';
}

form .starrate label:hover:before
{ 
    color: #af1512;
}

form .starrate input:disabled+label:hover:before
{
    color: var(--gradient-start-btn-disabled);
}

form .starrate input:checked~label:before 
{
    content: '\2605';
    color: #af1512;
}

form .starrate input:checked:disabled~label:before 
{
    content: '\2605';
    color: var(--gradient-start-btn-disabled);
}

#formbuttons
{
	text-align: right;
	padding: 8px 20px 5px 0;
	border-top: 1px solid #ccc;
}

form h4 {
    font-size: 11px;
    font-weight: lighter;
    font-style: italic;
    text-align: right;
    color: #777777;
    margin: 5px 0px 0px 0px;
    padding: 5px 10px 0px 5px;
    border-top: 1px solid #ccc;
}

form .lastmodified
{
    color:#444444;
    font-weight:600;
}

/**
 * auxiliary stuff
 */
#errorPopup
{
    display: none;
    position: absolute;
    width: calc(100% - 14px);
    border: 1px solid var(--theme-border-dark);
    color: var(--theme-txt-error);
    background: var(--theme-bkg-error) url(window_close.png) no-repeat right 5px top 5px;
    margin: 10px 7px;
    padding: 5px 25px 5px 5px;
    box-sizing: border-box;
    border-radius: var(--radius-small);
    font-weight: bold;
}

#JSError
{
    width: 80%;
    color: black;
    background-color: orange;
    border: 1px solid black;
    font-size: 1em;
}

#JSError h1
{
    background-color: #f57900;
    padding: 2px 4px;
    margin: 0px;
    border-bottom: 1px solid;
    color: black;
    font-size: 1em;
}

#JSError p
{
    margin: 5;
}

/**
 * styles for the wraper of the 'modal' rich filemanager running in an iframe
 * Note: the styles of the filemanager itself have to be defined in the
 * rich filemanager - theme! 
 */

#fm-container
{
    z-index: 10100; /** Because CKEditor image dialog was at 10010 */
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border: 1px solid black;;
    position: fixed;
    background-color: var(--theme-bkg-light);
}

#fm-container h1
{
    width: calc(100% - 10px);
    background-color: var(--theme-bkg-medium);
    margin: 5px 5px 0px 5px;
    padding: 4px 5px;
    height: 24px;
    font-family: arial;
    font-size: var(--theme-size-h1);
    font-weight: bold;
    box-sizing: border-box;
    background-image: url(window_close.png);
    background-repeat: no-repeat;
    background-position: top 4px right 4px;
}

#fm-container h1 img
{
    float: right;
}

#fm-iframe
{
    width: 100%;
    height: calc(100% - 29px);
    border: none;
}

/**
 * styles for the DTSel date and time picker
 * hint: to 'style' the picker in the devtools, set breakpoint in .../dtsel/ui.js in the method
 *    inputElemHandler(e) {
 *    ...
 *    else if (type === "blur" && visible) {
 * >  ... 
 */

.date-selector-wrapper {
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-dark);
    border-radius: var(--radius-big);
    width: 160px;
    padding: 0px;
    background-color: var(--theme-bkg-dark);
    box-shadow: 1px 1px 10px 1px #5c5c5c;
    position: absolute;
    font-size: var(--theme-size-hint);
    z-index: 50;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.date-selector-wrapper .cal-header
{
    display: flex;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav
{
    cursor: pointer;
    font-weight: bold;
    background-color: var(--theme-bkg-dark);
    color: var(--theme-txt-light);
}

.date-selector-wrapper .cal-header .cal-nav-prev
{
    flex: 0.15;
    border-right: 1px solid var(--theme-txt-light);
    border-radius: unset;
    border-top-left-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav-next
{
    flex: 0.15;
    border-left: 1px solid var(--theme-txt-light);
    border-radius: unset;
    border-top-right-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav-current
{
    flex: 0.70;
}

.date-selector-wrapper .cal-header .cal-nav-prev:hover,
.date-selector-wrapper .cal-header .cal-nav-next:hover,
.date-selector-wrapper .cal-header .cal-nav-current:hover
{
    color: var(--theme-txt-dark);
    background-color: var(--theme-bkg-medium);
}

.date-selector-wrapper .cal-body
{
    padding-bottom: var(--radius-big);
}

.date-selector-wrapper .cal-row
{
    display: flex;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.date-selector-wrapper .cal-cell
{
    cursor: pointer;
    background-color: var(--theme-bkg-light);
    border: 1px solid var(--theme-border-readonly);
}

.date-selector-wrapper .cal-cell:hover
{
    color: var(--theme-txt-dark);
    background-color: var(--theme-bkg-medium);
    border: 1px solid var(--theme-border-error);
}

.date-selector-wrapper .cal-value
{
    color: var(--theme-txt-selected);
    background-color: var(--theme-bkg-selected);
}

.date-selector-wrapper .cal-days .cal-cell
{
    flex: 0.143;
}

.date-selector-wrapper .cal-days .cal-day-names
{
    height: 20px;
    line-height: 20px;
}

.date-selector-wrapper .cal-days .cal-day-names .cal-cell
{
    cursor: default;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    background-color: var(--theme-bkg-medium);
    border: 1px solid var(--theme-border-medium);
}

.date-selector-wrapper .cal-days .cal-day-names .cal-cell:hover
{
    border: 1px solid var(--theme-border-medium);
}

.date-selector-wrapper .cal-days .cal-cell-prev,
.date-selector-wrapper .cal-days .cal-cell-next
{
    color: var(--theme-txt-disabled);
    background-color: var(--theme-bkg-disabled);
}

.date-selector-wrapper .cal-months .cal-row,
.date-selector-wrapper .cal-years .cal-row
{
    height: 45px;
    line-height: 45px;
}

.date-selector-wrapper .cal-months .cal-cell,
.date-selector-wrapper .cal-years .cal-cell
{
    flex: 0.25;
}

.date-selector-wrapper .cal-footer
{
    border-radius: inherit;
    background-color: var(--theme-bkg-light);
}

.date-selector-wrapper .cal-time
{
    display: flex;
    justify-content: flex-start;
    height: 27px;
    line-height: 27px;
    border-radius: inherit;
    background-color: var(--theme-bkg-light);
}

.date-selector-wrapper .cal-time-label
{
    flex: 0.22;
    text-align: left;
    padding-left: 5px
}

.date-selector-wrapper .cal-time-value
{
    flex: 0.18;
    text-align: center;
    font-weight: bold;
}

.date-selector-wrapper .cal-time-slider
{
    flex: 0.6;
    background-image: linear-gradient(to right, var(--theme-border-medium), var(--theme-border-medium));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: left 55%;
    height: 100%;
    margin-right: 5px;
}

.date-selector-wrapper .cal-time-slider input[type=range]
{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

.date-selector-wrapper .cal-time-slider input[type=range]:focus
{
    outline: none;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-ms-track
{
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.date-selector-wrapper .cal-time-slider input[type=range]
{
    width: 100%;
    appearance: none;
    background: 0 0;
    cursor: pointer;
    height: 100%;
    outline: 0;
    user-select: auto;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-webkit-slider-thumb
{
    appearance: none;
    margin-top: -2px;
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-moz-range-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-ms-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

.dropfile 
{
    background-color: var(--theme-bkg-light);
    outline: 1px solid var(--theme-border-medium);
    display: flex;
    flex-direction: column;
    font-size: var(--theme-size-std);
    padding: 4px;
    overflow-y: auto;
}

.dropfile.singleline
{
    display: block;
    margin: 3px 0px 3px 1px;
}

.dropfile.dragover 
{
    background-color: var(--theme-bkg-medium);
}

.dropfile label
{
    padding: 2px 6px;
}

.dropfile.singleline label
{
    padding: 7px 6px;
    float: left;
    width: calc(50% - 12px);
}

.dropfile .fileselect 
{
    color: blue;
    cursor: pointer;
    padding-right: 10px;
}

.dropfile .fileselect:hover 
{
    text-decoration: underline;
}

.dropfile input 
{
    display: none;
}

.dropfile .selectedfiles
{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-top: 5px;
}

.dropfile.singleline .selectedfiles
{
    width: 50%;
    padding-top: 0;
    float: left;
}

.dropfile .selectedfiles .dropfileitem
{
    display: flex;
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 1px 3px;
}

.dropfile .selectedfiles .dropedfile
{
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.dropfile .selectedfiles .itemname
{
    display: block;
    box-sizing: border-box;
    width: calc(100% - 22px);
    float: left;
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--radius-small);
}

.dropfile .selectedfiles .removeitem
{
    display: block;
    box-sizing: border-box;
    width: 22px;
    height: 34px;
    float: right;
    background: transparent url(../images/10x10/admin_delete.png) no-repeat center center;
    cursor: pointer;
}

.dropfile .selectedfiles .filename
{
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.dropfile .selectedfiles .filesize
{
    width: 100%;
    display: block;
    color: var(--theme-txt-hint);
    font-size: 9px;
    font-style: italic;
    line-height: 85%;    
}

.dropfile .selectedfiles .anyfile 
{
    display: block;
    height: 34px;
    width: unset;
    background: var(--theme-bkg-disabled) url(../images/fileicon/File.png) no-repeat 4px center;
    padding-left: 28px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.dropfile .selectedfiles .archive   { background-image: url(../images/fileicon/Archiv.png); }
.dropfile .selectedfiles .csvfile   { background-image: url(../images/fileicon/Excel.png); }
.dropfile .selectedfiles .docfile   { background-image: url(../images/fileicon/Word.png); }
.dropfile .selectedfiles .htmlfile  { background-image: url(../images/fileicon/HTML.png); }
.dropfile .selectedfiles .ical      { background-image: url(../images/fileicon/iCal.png); }
.dropfile .selectedfiles .imgfile 	{ background-image: url(../images/fileicon/Image.png); }
.dropfile .selectedfiles .mailfile  { background-image: url(../images/fileicon/Mail.png); }
.dropfile .selectedfiles .mdfile    { background-image: url(../images/fileicon/Markdown.png); }
.dropfile .selectedfiles .pdffile   { background-image: url(../images/fileicon/PDF.png); }
.dropfile .selectedfiles .txtfile   { background-image: url(../images/fileicon/TXT.png); }
.dropfile .selectedfiles .vcard     { background-image: url(../images/fileicon/vCard.png); }
.dropfile .selectedfiles .xlsfile 	{ background-image: url(../images/fileicon/Excel.png); }