/* Custom fixes and improvements for the UI */


/* This is to colorize the title-bar of the help and dialog boxes */
/* Makes the background grey and the text white */
.k-window-titlebar
{
    background-color: #4D4D4F;
    border-color: #dee2e6;
    color: white;
}

/* Fixes toggle-button selected color to red */
.k-button-solid-base.k-selected {
    border-color: #EA1C24;
    color: #fff;
    background-color: #EA1C24
}

/* Fixes the progress-bar not working  */
/* This was because --kendo-progressbar-progress was used, */
/* but actually --kendo-progressbar-value must have been used. */
.k-progressbar-horizontal > .k-selected {
    width: calc(var(--kendo-progressbar-value, 0)*1%);
}

.k-progressbar-horizontal > .k-selected > .k-progress-status-wrap {
    width: calc(100%*100/var(--kendo-progressbar-value, 1))
}

.k-progressbar-vertical > .k-selected {
    height: calc(var(--kendo-progressbar-value, 0)*1%);
}

.k-progressbar-vertical > .k-selected > .k-progress-status-wrap {
    height: calc(100%*100/var(--kendo-progressbar-value, 1))
}

/* Fixes the notification colors to be in line with Intralox theme */
.k-notification-error {
    border-color: #EA1C24;
    color: #fff;
    background-color: #EA1C24;
}

.k-notification-warning {
    border-color: #FFA400;
    color: #fff;
    background-color: #FFA400;
}

.k-notification-success {
    border-color: #237F35;
    color: #fff;
    background-color: #237F35;
}

.k-notification-info {
    border-color: #479EBC;
    color: #fff;
    background-color: #479EBC;
}

/* Fixes vertical wrap stacking of notification elements */
/* With this it forces it to be in the same row */
.k-notification {
    display: flex;
    flex-flow: row nowrap;
}

/* Background was none, making it transparant */
/* This makes the background white again */
.k-window-content, .k-prompt-container {
    background: white;
}

/* The margin was -.5 negative, causing the */
/* buttons to be misplaced.*/
.k-window-actions {
    margin: 0 0;
}


/* Standard Telerik Size Enums for TelerikIcons are  */
/* too limited for size control (when setting "Size" */
/* property of said component. Actually font-size is */
/* set on the background, so you can influence size  */
/* via the Class property.                           */
.SVGIconSize16px {
    font-size: 16px;
}

.SVGIconSize20px{
    font-size: 20px;
}

.SVGIconSize25px {
    font-size: 25px;
}

.SVGIconSize30px {
    font-size: 30px;
}

.SVGIconSize20pxFlex {
    font-size: 20px;
    display: flex;
}

.SVGIconSize25pxFlex {
    font-size: 25px;
    display: flex;
}

.SVGIconSize30pxFlex {
    font-size: 30px;
    display: flex;
}


/* Counter displays */
.IssuesTableTDCell {
    padding-bottom: 2px;
    padding-left: 20px;
}

.IssuesTableTDCellCounter {
    padding-left: 5px;
    padding-bottom: 5px;
}

.IssuesTableSizeColor {
    color: #4D4D4F;
    font-size: 16px;
}

.WrappingTreeList .defaultHeight {
    height: 50px;
}

.WrappingTreeList .defaultHeight .k-icon.k-i-none {
    float: left;
    height: 100%;
}

.crossHatchRed {
    background-image: linear-gradient( 45deg, rgba(255,0,0,0.5) 25%, transparent 25%, transparent 50%, rgba(255,0,0,0.5) 50%, rgba(255,0,0,0.5) 75%, transparent 75%, transparent );
    background-size: 5px 5px;
}

.productConfigurationTable { table-layout
{
    border-spacing: 0px;
}}


.massflowMessage {
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
}
.massflowMessageOk {
    color: white;
    background-color: green;
}



.massflowMessageError {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    background-color: #EA1C24;
}
.massflowMessageNotification {
    color: white;
    /*    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;*/
    background-color: #469fbc;
}
.massflowMessageWarning {
    color: black;
    /*    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;*/
    background-color: orange;
}

#wrapRowTable_id {
    display: block;
}

#wrapRowTable_id td {
    display: inline-block;
}