﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<link rel="stylesheet" href="./css/kendo.common.min.css" type="text/css" />
    <link rel="stylesheet" href="./css/kendo.default.min.css" type="text/css" />-->

   <link href="./css/kendo.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="./css/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script> 
    <script src="./js/jquery.js" type="text/javascript"></script>
    <script src="./js/XrmServiceToolkit.js" type="text/javascript"></script>
    <script src="./js/kendo.js" type="text/javascript"></script>
    <script src="./js/ViewEditorColumnsConfig.js" type="text/javascript"></script>
    <script src="./js/tribridge.crmsdk.js" type="text/javascript"></script>
    <script src="./js/tribridge.crmsdk.metadata.js" type="text/javascript"></script>
    <script src="./js/tribridge.helper.js" type="text/javascript"></script>
    <script src="./js/tribridge.functions.js" type="text/javascript"></script>
    <script src="./js/tribridge.CRUD.js" type="text/javascript"></script>
    <script src="./js/SDK.MetaData.js" type="text/javascript"></script>

    <meta charset="utf-8" />

    <style type="text/css">
        body, html {
            font-family: Segoe UI,Tahoma,Arial;
            margin: 0px;
            margin-left: 3px;
            max-height: 98% !important;
            max-width: 99% !important;
        }

        .k-group-cell k-header {
            width: 20% !important;
        }

        .gridDiv {
            font-weight: normal !important;
            font-family: 'Segoe UI';
            font-size: 11px;
            border-color: #c5c5c5 !important;
            border-collapse: separate;
            empty-cells: show;
        }

            .gridDiv th {
                font-weight: normal !important;
                font-family: 'Segoe UI';
                font-size: 11px;
                border-style: solid !important;
                border-bottom-style: solid !important;
                border-width: 0px 0px 1px 1px !important;
                border-color: #c5c5c5 !important;
                min-height: 1px;
                min-height: 1px;
            }

        .k-grid-pager {
            font-weight: normal !important;
            font-family: 'Segoe UI';
            font-size: 11px;
        }

        #status {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-image: url('../Images/preloader.gif'); /* path to your loading animation */
            background-repeat: no-repeat;
            background-position: center;
            z-index: 99999999;
        }

        .k-button-icontext .k-icon {
            margin: 0 0 0 0 !important;
        }

        .k-grid-header .k-header {
            font-weight: normal !important;
            font-family: 'Segoe UI';
            font-size: 11px;
        }

        .k-state-selected {
            background-image: none !important;
            background-color: #B1D6F0;
            color: Black;
        }

        .k-grid .k-alt td {
            /*background: none !important;*/
            font-weight: normal;
            font-family: 'Segoe UI';
            font-size: 11px;
            border-style: solid !important;
            border-bottom-style: solid !important;
            border-width: 0px 0px 1px 1px !important;
            border-color: #c5c5c5 !important; /*   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));             background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);             background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);             background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);             background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);             */
            border-bottom-style: solid;
            height: 25px;
            padding-left: 5px;
        }

        .k-grid td {
            /*background: none !important;*/
            font-weight: normal;
            font-family: 'Segoe UI';
            font-size: 11px;
            border-style: solid !important;
            border-bottom-style: solid !important;
            border-width: 0px 0px 1px 1px !important;
            border-color: #c5c5c5 !important; /* background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));             background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);             background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);             background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);             background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);             */
            padding: 1px;
            height: 25px;
            padding-left: 5px;
            white-space: nowrap !important;
        }

        .k-grouping-row {
            background-color: #ABACAF;
        }

        .k-datepicker {
            width: 10px;
        }

        .required {
            color: Red;
        }

        .addButton, .saveButton, .cancelButton, .refreshButton, .deleteButton {
            border-radius: 0px;
            background-color: #ffffff;
            border: 0px;
        }

            .addButton:hover, .saveButton:hover, .cancelButton:hover, .refreshButton:hover, .deleteButton:hover {
                border-radius: 0px;
                background-color: rgba(177, 214, 240, 0.5);
            }

        .addButtonDeactivate, .saveButtonDeactivate, .cancelButtonDeactivate, .refreshButtonDeactivate, .deleteButtonDeactivate {
            background-color: #ffffff;
            border: 0px;
        }

        .k-toolbar, .k-header, .k-grid-header {
            background-color: #ffffff;
        }

        .k-pager-wrap {
            background-color: #ffffff;
        }

        #poDetailsGrid tbody tr:hover {
            background: rgba(177, 214, 240, 0.5);
        }

        .k-alt {
            background-color: #ffffff;
        }

        .k-state-selected {
            background-color: #B1D6F0 !important;
        }

        .nonEditable {
            background-color: #EDEDED !important;
            white-space: nowrap;
        }

        .k-list-container {
            min-width: 95px !important;
            width: auto !important;
            background-color: #ffffff;
            max-height: 100px;
        }

            .k-list-container.k-state-border-up {
                border-radius: 0px 0px 0px 0px;
            }

        .k-list .k-state-hover {
            border-radius: 0px !important;
            background-color: #dbecf8 !important;
        }

        .k-list .k-state-focused {
            box-shadow: inset 0px 0px 0px 0px !important;
            background-color: #B1D6F0 !important;
        }

        .k-list {
            max-height: 100px;
        }

        div.k-grid-header th.k-header, tr.k-filter-row > th {
            border-bottom-width: 0px;
            background-color: #e0dbdb;
        }

        .k-grid-content {
            height: 270px;
        }

        .k-grid k-widget {
            height: 300px;
        }
    </style>   
</head>
<body>
    <div id="ViewEditorColumnGrid" style="padding-left: 2px; padding-right: 2px;">
    </div>
    <div id="preloader">
        <div id="status">
            &nbsp;
        </div>
    </div>
    <script id="ViewEditorColumnButtons" type="text/x-kendo-template">                
        <div class="toolbar">      
        <div style="float:left;border-bottom: 0px;">        
         <!--<a id="addButton" class="addButton k-button k-button-icontext" style="padding: 0px 7px 0px;"><img id="addImage" class="buttonImage" alt="" src="Images/add.png" style="vertical-align:middle;height:10pt;"><span style="padding-left:3px;font-size:10pt;">Add</span></a>-->   
         <a id="saveButton" class="saveButton k-button k-button-icontext" style="padding: 0px 7px 0px;"><img id="saveImage" class="buttonImage" alt="" src="../Images/save.png" style="vertical-align:middle;height:12pt;"><span style="padding-left:3px;font-size:10pt;">Save</span></a>   
         <a id="refreshButton" class="refreshButton k-button k-button-icontext" style="padding: 0px 7px 0px;"><img id="refreshImage" class="buttonImage" alt="" src="../Images/Refresh_16.png" style="vertical-align:middle;height:10pt;"><span style="padding-left:3px;font-size:10pt;">Refresh</span></a>
         <!--<a id="deleteButton" class="deleteButton k-button k-button-icontext" style="padding: 0px 7px 0px;"><img id="deleteImage" class="buttonImage" alt="" src="Images/Delete_16.png" style="vertical-align:middle;height:10pt;"><span style="padding-left:3px;font-size:10pt;">Delete</span></a>-->
        </div>               
        </div>
    </script>    
</body>
</html>
