/* SPECIFIC STYLES FOR KENDO CONTROLS */
/* Essentially we are customising (overriding) base kendo styles to match FP requirements  */

/* NOTE: Only the specific changes are in this file. Any missing lines of css here is intentional in order to preserve original kendo values */

/* ===============================================
# SPECIFIC KENDO DEFINED CLASS OVERRIDES
==================================================  */

/* ===============================================
# TOOLBAR
==================================================  */

.k-grid-toolbar {
    padding-right: 15px;
    background-color: #f5f5f5;
}

.k-toolbar {
    display: block;
}

.k-grid .toolbar {
    display: block;
}

/* ===============================================
# CHART
==================================================  */

/* Set chart  */
.chart-wrapper-section {
    padding: 15px;
    height: 230px;
}

.chart-wrapper-2 {
    width: 40%;
    float: left;
}

/* This class is responsible for positioning the legend correctly */
.chart-legend {
    position: relative;
    float: left;
    width: 60%;
    padding: 35px 10px 15px 10px;
}
    /* This class configures the content area for the legend to reside */
    .chart-legend .legend-wrapper {
        border: 1px solid lightgray;
        padding: 15px;
    }

        .chart-legend .legend-wrapper .legend-content {
            width: 100%;
        }

            .chart-legend .legend-wrapper .legend-content td {
                padding-bottom: 5px;
            }

                .chart-legend .legend-wrapper .legend-content td:not(:first-child) {
                    padding-top: 2px;
                }

/* ===============================================
# TOOLTIP
==================================================  */
.k-callout-s {
    border-top-color: #faebcc;
}

.k-callout-w {
    border-right-color: #faebcc;
}

.k-widget.k-tooltip,
.k-tooltip.k-popup {
    color: #fff;
    border-color: #faebcc;
    background-color: #3071a9;
    white-space: nowrap;
}

.k-callout-w {
    border-right-color: #3071a9;
}

/* ===============================================
# GRID
==================================================  */

.k-grid {
    border-radius: 0px;
}

.k-no-data {
    min-height: 25px;
}

.k-i-more-vertical {
    color: #666;
}

.k-icon.column-picker {
    font-size: 20px;
}

.f-grid-select .k-state-selected {
    background-color: #d7e6f4;
    color: #000;
}

.f-grid-select tr.k-state-selected:hover td {
    background-color: #73a7d9;
    color: #000;
}

.f-grid-select .k-dirty {
    display: none;
}

.k-grid .k-header.text-right span.k-cell-inner{
    float: right !important;
}

.k-grid .k-header.text-center span.k-cell-inner span.k-link {
    justify-content: center;
}

.k-grid tr.warning,
.k-grid.f-grid-no-hover tr.warning:hover,
.k-grid.f-grid-no-hover tr.warning:hover td {
    background-color: #f2dede;
}

.k-grid tr.success,
.k-grid.f-grid-no-hover tr.success:hover,
.k-grid.f-grid-no-hover tr.success:hover td {
    background-color: #dff0d8;
}

.k-grid.f-grid-no-hover tr.k-state-selected:hover,
.f-grid-no-hover tr.k-state-selected:hover td {
    background-color: #d7e6f4;
}

/*.k-grid.f-grid-no-hover tr:hover,
.k-grid tr.k-state-selected:hover,
.f-grid-select tr.k-state-selected:hover td {*/
    /*pointer-events: none;*/
    /*background-color: unset;
    text-decoration: none;
}*/

/* ===============================================
# GRID - Column Menu
==================================================  */

.k-menu-link {
    padding: 10px;
    font-size: 12px;
}

.k-column-menu .k-column-menu-group-header-text {
    font-size: 12px;
}

.k-column-menu .k-menu-link {
    font-size: 12px;
}

.k-menu-item .k-checkbox {
    top: -3px;
}

/* ===============================================
# GRID - HTML ELEMENTS
==================================================  */
/* Set grid headers to bold*/
/*.k-grid-content {
    height: 400px;
}*/
/****** SET CUSTOM BACKGROUND COLOR ALT AND HEADER ROWS ******/
/*.k-grid tbody > tr.k-alt > td {
  background-color: rgb(234, 245, 251);
}*/
.k-header {
    background-color: #E5E5E5;
    /*background-color: rgb(234, 245, 251);*/
}

.k-header > a.k-link {
    font-weight: bold;
    font-size: 11px;
}

.k-header > .k-cell-inner > .k-link > .k-column-title {
    font-weight: bold;
    font-size: 11px;
}

/****** SET NO WRAP ON TABLE CELLS ******/
.k-grid tbody > tr > td {
    white-space: nowrap;
}

    /****** THE 2 SEGMENTS BELOW FORMAT A TEXTAREA AND LABEL. ******/
    .k-grid tbody > tr > td > label + textarea {
        vertical-align: top;
    }

    .k-grid tbody > tr > td > textarea {
        width: 100%;
        max-width: 350px;
        height: 40px;
        border: 1px solid #999;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /****** SET DROP DOWN STYLE ******/
    .k-grid tbody > tr > td > select.action {
        height: 15px;
        line-height: 15px;
        width: 90px;
        padding: 1px 3px;
        display: inline;
        border-radius: 2px;
        font-size: 11px;
    }


/****** SET ROW COLLAPSIBLE STYLES ******/
.k-grid tbody > tr {
    opacity: 1;
}

    .k-grid tbody > tr.collapsing {
        opacity: 0;
        -webkit-transition: opacity .35s ease;
        -o-transition: opacity .35s ease;
        transition: opacity .35s ease;
    }

    /* ADD CURSOR ON ALL ANCHOR TAGS */
    .k-grid tbody > tr > td > a {
        cursor: pointer;
    }

/* GENERIC STYLE FOR DETAIL CELLS */
.k-detail-row {
    background-color: #eee;
}

/* COMMENT ROW STYLES */
.k-grid tbody > tr.comment > td {
    /*background-color: #dff0d8;*/
    background-color: #f5f5f5;
}

.k-grid tr td {
    border-width: 1px 0px 1px 1px;
}

.k-grid tbody > tr > td.allowwrap,
.k-grid thead > tr > th.allowwrap {
    white-space: normal;
}

.k-grid tr.emphasis td {
    font-style: italic;
}

.k-grid .k-grid-toolbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

.k-animation-container ul.k-widget li.k-item span.k-link input[type=checkbox] {
    margin-right: 5px;
}

/* ===============================================
# GRID HIERARCHY - INNER GRID
==================================================  */

/****** STYLE INNER GRID ******/
.k-inner-grid {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-color: #999;
}

    .k-inner-grid .k-header {
        background-color: #dff0d8;
    }

    .k-inner-grid .k-state-selected {
        color: #333;
        background-color: #dff0d8;
    }

    /****** SET LABEL COLOUR ******/
    .k-inner-grid tbody > tr > td > label {
        color: #428bca;
    }

/* ===============================================
# CHART - HTML ELEMENTS
==================================================  */

.hover-effect path {
    cursor: pointer;
}

    .hover-effect path[fill-opacity='0'] {
        cursor: default;
    }

.k-stockchart .k-selection {
    cursor: e-resize;
}


/* ===============================================
# MEDIA SPECIFIC
==================================================  */

@media screen {
    /* Set initial chart size*/
    .chart-wrapper {
        width: 580px;
        height: 300px;
    }
}

@media (min-width: 0px) and (max-width: 1199px) {
    .chart-wrapper {
        width: 435px;
        height: 220px;
    }

    /* Grid header */
    .k-header > a.k-link {
        font-size: 10px;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .chart-wrapper {
        width: 530px;
        height: 250px;
    }
}

@media screen {
    /* Set initial chart size*/
    .chart-wrapper-2 > .k-chart {
        width: 580px;
        height: 300px;
    }
}

@media (min-width: 0px) and (max-width: 1199px) {
    .chart-wrapper-2 > .k-chart {
        width: 435px;
        height: 220px;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .chart-wrapper-2 > .k-chart {
        width: 530px;
        height: 250px;
    }
}