﻿/*#region Notifications */
.k-widget.k-notification.k-notification-success { /* Success template */
    background: rgba(151, 255, 135, 0.70);
    border-color: #dcdcdc;
    color: #808080;
    width: 300px;
    min-height: 60px;
}

.k-widget.k-notification.k-notification-info { /* Info template */
    background: rgba(161, 209, 255, 0.70);
    color: #808080;
    border-color: #dcdcdc;
    width: 300px;
    min-height: 60px;
}

.k-widget.k-notification.k-notification-error { /* Error template */
    background: rgba(255, 152, 152, 0.70);
    color: #808080;
    border-color: #dcdcdc;
    width: 300px;
    min-height: 60px;
}

.k-widget.k-notification.k-notification-warning { /* Error template */
    background: #fdefba;
    color: #4d4838;
    border-color: #dcdcdc;
    width: 300px;
    min-height: 60px;
}

.k-widget.k-notification > .icon {
    position: absolute;
    margin: 20px 15px;
    font-size: 20px;
}

.k-widget.k-notification > h3 {
    position: absolute;
    left: 50px;
    margin: 20px 0;
    font-size: 18px;
}

/*#endregion */

/*#region Kendo Grid */
.k-grid td.disabled, .k-grid td .disabled {
    color: #aaa !important;
    pointer-events: none;
}

/*#region Treeview */

.k-widget.k-treeview .k-in {
    /*background-color:red;*/
    padding: 2px;
    cursor: pointer;
}

.k-widget.k-treeview .icon {
    /*background-color:red;*/
    position: relative;
    top: 4px;
    left: -4px;
    font-size: 16px;
    /*#endregion */
}

/*#endregion */

/*#region Kendo.Grid.Controllers.Message */
.helpers-component-message.k-grid.k-widget > .k-grid-content {
    max-height: 100px;
}

    .helpers-component-message.k-grid.k-widget > .k-grid-content > table {
        width: auto;
    }

.helpers-component-message.k-grid.k-widget .message-container > ul {
    display: inline-block;
    width: 100px;
    text-align: right;
    list-style-type: none;
    padding: 0;
    margin-bottom: 4px;
}

    .helpers-component-message.k-grid.k-widget .message-container > ul > li:first-child { /*The users name*/
        color: #808080;
        font-weight: bold;
        overflow: hidden;
        word-break: break-word;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .helpers-component-message.k-grid.k-widget .message-container > ul > li:last-child { /*The date*/
        color: #aaa;
    }

.helpers-component-message.k-grid.k-widget .message-container > p { /*The message*/
    margin-left: 5px;
    vertical-align: top;
    display: inline-block;
    width: calc(100% - 120px);
    font-size: 14px;
}
/*#endregion */

/*#region Kendo.Grid.Controllers.Frquency */
.helpers-component-frequency > div {
    padding-left: 5px;
    padding-right: 0;
}

    .helpers-component-frequency > div > label {
        font-style: italic;
        margin-bottom: 0;
    }

    .helpers-component-frequency > div:first-child {
        padding-left: 0;
    }

@media all and (max-width:767px) {
    .helpers-component-frequency > div {
        padding-left: 20px;
        padding-right: 0;
    }

        .helpers-component-frequency > div:first-child {
            padding-left: 20px;
        }
}
/*#endregion */

/*#region Kendo.Grid.Controllers.Amount */
.helpers-component-amount > div {
    padding-left: 5px;
    padding-right: 0;
}

    .helpers-component-amount > div > label {
        font-style: italic;
        margin-bottom: 0;
    }

    .helpers-component-amount > div:first-child {
        padding-left: 0;
    }

@media all and (max-width:767px) {
    .helpers-component-amount > div {
        padding-left: 20px;
        padding-right: 0;
    }

        .helpers-component-amount > div:first-child {
            padding-left: 20px;
        }
}
/*#endregion */

/*#region helpers-tabstrip */

ul.helpers-tabstrip {
    position:relative;
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    list-style-type: none;
    line-height: 1.6;
    padding: 0;
    margin: 5px -15px 0 -15px;
    /*border-bottom: 1px solid #444b4c;*/
}

    ul.helpers-tabstrip > li {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        cursor: pointer;
    }

        ul.helpers-tabstrip > li.selected > div.helpers-tabstrip-header {
            background-color: #008888;
            color: #ffffff;
            font-size: 1.4em;
            /*cursor: default;*/
        }

        ul.helpers-tabstrip > li > div.helpers-tabstrip-header {
            background-color: #277172;
            color:#c4c6c6;
            text-align: center;
            font-size: 1.3em;
            height: 28px;
            border-right: 1px solid #444b4c;
        }

            ul.helpers-tabstrip > li > div.helpers-tabstrip-header:hover {
                color: #ffffff;
            }

        ul.helpers-tabstrip > li > div.helpers-tabstrip-container {
            position: absolute;
            overflow: hidden;
            left: 0;
            /*color: transparent;*/
            font-weight: bold;
            width: 0;
            font-size: 0;
            margin-top: 5px;
            /*-moz-transition: all ease-in-out 0.1s;
            -o-transition: all ease-in-out 0.1s;
            -webkit-transition: all ease-in-out 0.1s;*/
            transition: color ease-in-out 0.3s;
        }

        ul.helpers-tabstrip > li.selected > div.helpers-tabstrip-container {
            width: 100%;
            color: #444b4c;
            font-size: 1em;
            font-weight: normal;
            /*display: normal !important;*/
        }

/*#endregion */

/*#region Helpers-header */

.helpers-header {
    margin: 8px 0 0 0;
    height: 40px;
}

    .helpers-header > div > h4 {
        display: inline;
        font-weight: bold;
        font-size: 20px;
    }

    .helpers-header .description {
        margin-left: 5px;
        display: inline;
        font-size: 18px;
        font-style: italic;
        position: absolute;
        /*height: 28px;*/
        overflow: hidden;
        white-space: nowrap;
    }

/*#endregion */
