.DefaultInput {
    font-size: 12.0px;
    /*border: 1px solid darkgray;*/
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.2);            /*telerik: 0.08*/
    border-radius: 3px;
    outline: none;
}

/* todo: at the moment no control has this class anymore */
/*.DefaultInputSoftFocus {
    font-size: 12.0px;
    border-radius: 3px;
    outline: none;
}
*/
/*todo: disabled and read-only is not available for div ( = softfocus) */
/*.DefaultInputSoftFocus:disabled, .DefaultInputSoftFocus.read-only*/
    .DefaultInput:disabled, .DefaultInput:read-only, .DefaultInputSoftFocusDisabled {
        background: #efefef;                     /* no !important; because then it is also gray if autocomplete is enabled  */
        color: black; /*gray;*/
    }

/* Telerik disabled */
.k-state-disabled, .k-widget[disabled] {
    background: #efefef !important;
    opacity: 0.8 !important;                        /*todo: check: different for numericinput, datetime and autocompletecontrols ! */
    color: black; /*gray;*/
}


/* #9ecaed;*/
.DefaultInput:focus:enabled {
    border-color: rgba(0, 0, 0, 0.4); /*telerik: 0.15*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 4px 5px 0 rgba(0, 0, 0, 0.08); /*telerik: 0.03  0.04*/
    /*box-shadow: 0px 0px 4px 0px steelblue;
        border: 1px solid steelblue;*/
    /*outline: none;*/
}
    .DefaultInput:focus:disabled, .DefaultInput:focus:read-only {
        box-shadow: 0px 0px 0px 0px;
        border-color: rgba(0, 0, 0, 0.2); /*telerik: 0.08*/
        /*border: 1px solid darkgray;*/
        /*outline: none;*/
    }
    .DefaultInput:hover:enabled {
        border-color: rgba(0, 0, 0, 0.3); /*telerik: 0.15*/
        /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.06);*/ /*telerik: 0.03  0.04*/
        box-shadow: 0px 0px 2px 0px steelblue;
        /*    border: 1px solid steelblue;*/
        /*outline: none;*/
    }

    .DefaultInput:hover:disabled, .DefaultInput:hover:read-only {
        box-shadow: 0px 0px 0px 0px;
        border-color: rgba(0, 0, 0, 0.2); /*telerik: 0.08*/
        /*border: 1px solid darkgray;*/
        /*outline: none;*/
    }

/* no border for telerik - otherwise the height changes on focus or hover! */

/*no :fucos possible here because it is the div/span and not the inputfield*/
    /*.DefaultInputSoftFocus:focus {
        box-shadow: 0px 0px 6px 0px steelblue;*/
        /*outline: none;*/
        /* border: 0;               check */
/*}*/

/*no :hover:enabled here here because it is the div/span and not the inputfield*/
    .DefaultInputSoftFocus:hover {
        box-shadow: 0px 0px 2px 0px steelblue;
        /*outline: none;*/
    }


/*todo: does not work with telerik variante with the current logic - use class= direct for telerik! */
    /*.DefaultInputSoftFocus:hover:read-only, .DefaultInputSoftFocus:hover:disabled {
        box-shadow: 0px 0px 0px 0px;*/
        /*border: 1px solid steelblue;*/
        /*outline: none;
    }*/


/*todo: not good for checkboxlabel - could be form radioset ...*/
/*.DefaultInputNoFocus {
    font-size: 12.0px;
    border: none;
}
    .DefaultInputNoFocus:focus {
        box-shadow: 0px 0px 6px 0px steelblue;
    }
    .DefaultInputNoFocus:hover {
        box-shadow: 0px 0px 2px 0px steelblue;
    }
*/


/*Telerik AutocompleteControls*/
.noClearButton.k-autocomplete.k-header, .k-autocomplete {
    height: 24px;
    margin-top: 1px;
    padding: 1px;
    font-size: 12.0px;
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.2); /*telerik: 0.08*/
    border-radius: 3px;
    /*outline: none;*/
}

/*Telerik AutocompleteControls hover*/
/* todo: check do with k-input? but read-only? and if focus and hover!*/
.k-autocomplete.k-header:hover, .k-autocomplete.k-header.k-state-hover, .k-autocomplete:hover, .k-autocomplete.k-state-hover {
        border-color: rgba(0, 0, 0, 0.3); /*telerik: 0.15*/
        box-shadow: 0px 0px 2px 0px steelblue;
}

/* Telerik input (e.g. autocomplete) */
/* todo: check - ist not the same like others, because here is in telerik an input with no border */
.k-input:focus:enabled {
    border-color: rgba(0, 0, 0, 0.4); /*telerik: 0.15*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 4px 5px 0 rgba(0, 0, 0, 0.08); /*telerik: 0.03  0.04*/
}


/*Telerik numeric input*/
.k-numerictextbox .k-numeric-wrap {
    border-color: rgba(0, 0, 0, 0.2) !important; /*telerik: 0.08*/
    border-radius: 3px !important;
}

/*Telerik combobox input*/
.k-combobox .k-dropdown-wrap {
    border-color: rgba(0, 0, 0, 0.2) !important; /*telerik: 0.08*/
    border-radius: 3px !important;
}

/*Telerik date input*/
.k-datepicker .k-picker-wrap, .k-timepicker .k-picker-wrap, .k-datetimepicker .k-picker-wrap {
    border-color: rgba(0, 0, 0, 0.2) !important; /*telerik: 0.08*/
    border-radius: 3px !important;
}


/*todo: could be also border (but not really for telerik), but then all other classes have to be changed !! or use DefaultInputInvalid classes */
.validInput {
    outline: none !important;
    /*border: 1px solid darkgray;*/
}

.invalidInput {
    outline: 1px solid red !important;
    /*border: 1px solid red;*/
}


.btn-default:focus:enabled, .btn-primary:focus:enabled, .btn-secondary:focus:enabled {
    box-shadow: 0px 0px 4px 0px steelblue;
    border: 1px solid steelblue;
    outline: none;
}

.btn-default:focus:disabled, .btn-primary:focus:disabled, .btn-secondary:focus:disabled {
    box-shadow: 0px 0px 0px 0px;
    border: 1px solid darkgray;
    outline: none;
}


.DetailRow {
    font-size: 12.0px;
    border: none;
    background: transparent;
    /*color: rgba(0, 0, 0, 0.9);*/
    color: black;
    /*padding-top: 0px;*/
    /*padding-bottom: 0px;*/
}

.DetailRow:focus {
    border: none;
    outline: none;
}

/*Label*/
.DefaultLabel, .LabelLeft, .LabelRight, .LabelTop, .LabelBottom, .LabelRowDetail, .TextAsLabel {
    font-size: 11.0px;
    user-select: none;
}

.LabelBottom, .LabelRight, .LabelLeft, .LabelTop, .LabelRightCheckbox, .LabelRowDetail {
    position: absolute;
    background: transparent;
    color: rgba(0, 0, 0, 0.7);
}

.TextAsLabel {
	color: rgba(0, 0, 0, 0.7);
}

.LabelLeft {
    left: 0;
    /* height: 100%; - with height:100%, the label is on top, not centered*/
    margin-left: -2px;
    margin-top: 3px;
    transform: translate(-100%);
    white-space: nowrap;
    align-self: center;
    margin-bottom: 0px !important;
}

.LabelRight {
    /* height: height: 100%; - with height:100%, the label is on top, not centered*/
    margin-right: -2px;
    right: 0;
    margin-top: 3px;
    transform: translate(100%);
    white-space: nowrap;
    align-self: center;
    margin-bottom: 0px !important;
}

.LabelRightCheckbox {
    padding-left: 4px;
    white-space: nowrap;
    align-self: center;
    margin-bottom: 0px !important;
}

.LabelTop {
    left: 2px;
    margin: 0px;
    top: -15px;
    text-align: left;
}

.LabelBottom {
    left: 2px;
    margin: 0;
    bottom: -15px;
    text-align: left;
}


.LabelRowDetail {
    left: 0;
    /* height: 100%; - with height:100%, the label is on top, not centered*/
    margin-left: -2px;
    margin-top: 3px;
    transform: translate(-100%);
    white-space: nowrap;
    align-self: center;
    margin-bottom: 0px !important;
}


/* to set label bold and an asterik for special fields*/
label[target="unique"] {
    font-weight: bold;
}

label[target="unique"]::before {
    content: "*";
}


.HorizontalListBox-arrow-left {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid CornflowerBlue;
}

.HorizontalListBox-arrow-right {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid CornflowerBlue;
}

/*overwrite telerik to get only horizontal scrolling*/
.TelerikListViewHorizontal {
     overflow-x: auto;
     overflow-y: hidden;
 }
.TelerikListViewHorizontal .k-listview-content {
        display: flex;
}

.TelerikListViewVertical {
    overflow-x: hidden;
    overflow-y: auto;
}

.mcExpander-main {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mcExpander-header {
	cursor: pointer
}

/*blink element animation*/
.blinkingElement {
    animation: blinkingBorder 3s infinite;
}
@keyframes blinkingBorder {
    50% { opacity: 0; }
}

.lineThroughElement {
     text-decoration: line-through;
}

.boldElement {
    font-weight: bold;
}