Base Code: Web Office Documents & Media Page

The following is the base code for the Web Office Documents & Media page. We provide this code so you can customize it to fulfill your needs better.

Web Office URL: [CLIENTID].office.directscale.com/app.html#/DocumentsAndMedia

Web Office Documents & Media pageWeb Office Documents & Media page

  1. Copy this code into a Custom Page in Web Office Admin and customize it to your liking.
  2. Once published, add the custom page URL to the Web Office navigation.
<headerpage id="header" ng-class="SessionData.IsSearchTrue ? 'bgm-color1' : 'bgm-color1'" show-search></headerpage>
<!-- Mobile -->
<div ng-controller="customDocumentsCtrl">
<div class="empty_state common_placeholder position-static" ng-if="Resources.length===0" translate>placeholder_document_media</div>
<div id="maindocdiv" loader ng-if="Resources.length!=0">
    <div ng-if="!SessionData.ViewFilesIn" id="DocumentsPage" class="p-page m-secondary-sidebar">
        <div class="sidebar-secondary" ng-if="SessionData.ShowLeftPanel">
            <ul class="main-menu p-l-0">
                <li class="sub-menu" ng-class="{'toggled bgm-offwhite':((HaveQueryString && ShowCategoryName==item.Name) || (!HaveQueryString && $first)) && !SessionData.MobileScreen}" Ak="{{item.Name}}" ShowCategoryName="{{ShowCategoryName}}" ng-repeat="item in Resources | filter:SessionData.HeaderSearch" ng-init="FirstRepeat=$index+5" id="pro{{item.ID}}">
                    <i class="zmdi f-s-17 zmdi-folder c-color4 p-t-15" ng-click="CurrentCategory(item.ID);"></i>
                    <i class="zmdi f-s-17 zmdi-folder-outline c-color4 p-t-15" ng-click="CurrentCategory(item.ID);"></i>
                    <a class="p-l-10 category-title" ng-bind="item.Name" ng-click="CurrentCategory(item.ID);"></a>
                    <span class="icon-right-down cursor-pointer p-t-15" toggle-submenu ng-click="CurrentCategory(item.ID);"><i class="zmdi zmdi-chevron-down f-s-17"></i></span>
                    <span class="icon-right-up cursor-pointer p-t-15" toggle-submenu ng-click="CurrentCategory(item.ID);"><i class="zmdi zmdi-chevron-up f-s-17"></i></span>
                    <ul class="p-l-0 inner-sub-menu ">
                        <li id="suball{{FirstRepeat}}" ng-click="CurrentState(item.Name,'All',FirstRepeat,'all');" ng-class="{'b-blue':(!HaveQueryString && $first) && !SessionData.MobileScreen}"><a data-ui-sref-active="" translate>all_</a></li>
                        <li id="sub{{$index}}{{FirstRepeat}}" ng-click="CurrentState(item.Name,data.Name,FirstRepeat,$index);" Ak="{{data.Name}}" ShowTabSubCategoryName="{{ShowTabSubCategoryName}}" ng-class="{'b-blue':(data.Name==ShowTabSubCategoryName) && !SessionData.MobileScreen}" ng-repeat="data in item.SubCategories">
                            <a data-ui-sref-active="" ng-bind="data.Name"></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div ng-if="SessionData.ShowProductDetail" id="documentdiv" loader>
            <div ng-if="AllDocuments.length > 0" ng-repeat="Value in Documents | filter:SessionData.HeaderSearch" ng-init="res=$index">
                <h3 class="f-s-16" ng-bind="Value.Name"></h3>
                <div class="card m-t-10 o-hidden">
                    <div class="card-body p-0">
                        <div data-ng-repeat="item in Value.Resources | filter:SessionData.HeaderSearch track by $index" class="card-list-item card-list-item--button" id="{{item.id}}" ng-class="{'card-list-item--active bgm-color4 c-white': sidebar.circle && activeDocumentId === item.id}" ng-click="SelectedItem(Key,item.id,res,$index,item.FileExtension)">
                            <div class="w-32 m-r-15" ng-if="item.IsIcon">
                                <svg ng-if="item.FileExtension =='PDF'" id="svg_{{res}}{{$index}}" class="svgicon svg--pdf" width="28px" height="34px" viewBox="0 0 28 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <defs />
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup" transform="translate(-23.000000, -179.000000)" fill="hsl(4, 90%, 58%)">
                                            <path d="M38.3,190.9 L47.65,190.9 L38.3,181.55 L38.3,190.9 L38.3,190.9 Z M26.4,179 L40,179 L50.2,189.2 L50.2,209.6 C50.2,211.477768 48.6777681,213 46.8,213 L26.4,213 C24.513,213 23,211.47 23,209.6 L23,182.4 C23,180.522232 24.5222319,179 26.4,179 L26.4,179 Z M34.781,196.748 C35.478,198.278 36.362,199.536 37.382,200.403 L38.079,200.947 C36.6,201.219 34.56,201.695 32.401,202.528 L32.401,202.528 L32.214,202.596 L33.064,200.828 C33.829,199.349 34.39,198.006 34.781,196.748 L34.781,196.748 Z M45.797,203.225 C46.103,202.919 46.256,202.528 46.273,202.103 C46.324,201.763 46.239,201.44 46.069,201.168 C45.576,200.369 44.301,199.995 42.193,199.995 L40,200.114 L38.521,199.128 C37.45,198.244 36.481,196.697 35.801,194.776 L35.869,194.538 C36.43,192.277 36.957,189.54 35.835,188.418 C35.563,188.146 35.189,188.01 34.798,188.01 L34.39,188.01 C33.761,188.01 33.2,188.673 33.047,189.319 C32.418,191.58 32.792,192.821 33.421,194.878 L33.421,194.895 C32.996,196.391 32.452,198.125 31.585,199.876 L29.953,202.936 L28.44,203.769 C26.4,205.044 25.431,206.472 25.244,207.373 C25.176,207.696 25.21,207.985 25.329,208.291 L25.38,208.376 L26.196,208.903 L26.944,209.09 C28.321,209.09 29.885,207.475 31.993,203.871 L32.299,203.752 C34.05,203.191 36.226,202.8 39.15,202.477 C40.901,203.344 42.958,203.735 44.25,203.735 C44.998,203.735 45.508,203.548 45.797,203.225 L45.797,203.225 Z M45.1,202.018 L45.253,202.205 C45.236,202.375 45.185,202.392 45.1,202.426 L45.032,202.426 L44.709,202.46 C43.927,202.46 42.72,202.137 41.479,201.593 C41.632,201.423 41.7,201.423 41.87,201.423 C44.25,201.423 44.93,201.848 45.1,202.018 L45.1,202.018 Z M29.511,204.5 C28.406,206.523 27.403,207.645 26.638,207.9 C26.723,207.254 27.488,206.132 28.695,205.027 L29.511,204.5 L29.511,204.5 Z M34.645,192.753 C34.254,191.223 34.237,189.982 34.526,189.268 L34.645,189.064 L34.9,189.149 C35.189,189.557 35.223,190.101 35.053,191.019 L35.002,191.291 L34.73,192.685 L34.645,192.753 L34.645,192.753 Z" sketch:type="MSShapeGroup" />
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='JPG' || item.FileExtension =='JPEG' ||item.FileExtension=='PNG'" id="svg_{{res}}{{$index}}" class="svgicon svg--jpg" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup" transform="translate(-115.000000, -25.000000)">
                                            <g sketch:type="MSLayerGroup" transform="translate(115.000000, 25.000000)">
                                                <path d="M2.99074074,0 C1.33087963,0 0,1.31565217 0,2.95652174 L0,31.0434783 C0,32.6763201 1.33900024,34 2.99074074,34 L23.9259259,34 C25.5776664,34 26.9166667,32.6763201 26.9166667,31.0434783 L26.9166667,2.95652174 C26.9166667,1.31565217 25.5708333,0 23.9259259,0 L2.99074074,0 Z" fill="hsl(231, 48%, 48%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M2.83333333,30.6 L18.1333333,30.6 L23.2333333,30.6 L23.2333333,17 L16.4333333,23.8 L13.0333333,20.4 L2.83333333,30.6 L2.83333333,30.6 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M9.06666667,7.08333333 C7.18889852,7.08333333 5.66666667,8.60556518 5.66666667,10.4833333 C5.66666667,12.3611015 7.18889852,13.8833333 9.06666667,13.8833333 C10.9444348,13.8833333 12.4666667,12.3611015 12.4666667,10.4833333 C12.4666667,8.60556518 10.9444348,7.08333333 9.06666667,7.08333333 L9.06666667,7.08333333 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='AUDIO' || item.FileExtension =='MP3'" id="svg_{{res}}{{$index}}" class="svgicon svg--mp3" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <defs />
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup">
                                            <g sketch:type="MSLayerGroup">
                                                <path d="M2.98366966,0 C1.327733,0 0,1.31565217 0,2.95652174 L0,31.0434783 C0,32.6763201 1.33583441,34 2.98366966,34 L23.8693573,34 C25.5171925,34 26.8530269,32.6763201 26.8530269,31.0434783 L26.8530269,2.95652174 C26.8530269,1.31565217 25.5103756,0 23.8693573,0 L2.98366966,0 Z" fill="hsl(38, 96%, 54%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M7.65912526,19.1110683 L2.91523705,19.1110683 C2.71655151,19.1110683 2.55399061,18.9220752 2.55399061,18.6910836 L2.55399061,16.8074525 C2.55399061,16.576461 2.71655151,16.3874679 2.91523705,16.3874679 L7.65912526,16.3874679 C7.8578108,16.3874679 8.0203717,16.576461 8.0203717,16.8074525 L8.0203717,18.6910836 C8.0203717,18.9220752 7.8578108,19.1110683 7.65912526,19.1110683 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M8.0203717,22.7764842 C8.0203717,23.0074758 7.8578108,23.1964689 7.65912526,23.1964689 L2.91523705,23.1964689 C2.71655151,23.1964689 2.55399061,23.0074758 2.55399061,22.7764842 L2.55399061,20.8928531 C2.55399061,20.6618616 2.71655151,20.4728685 2.91523705,20.4728685 L7.65912526,20.4728685 C7.8578108,20.4728685 8.0203717,20.6618616 8.0203717,20.8928531 L8.0203717,22.7764842 L8.0203717,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M8.0203717,26.8618848 C8.0203717,27.0928764 7.8578108,27.2818695 7.65912526,27.2818695 L2.91523705,27.2818695 C2.71655151,27.2818695 2.55399061,27.0928764 2.55399061,26.8618848 L2.55399061,24.9782537 C2.55399061,24.7472622 2.71655151,24.5582691 2.91523705,24.5582691 L7.65912526,24.5582691 C7.8578108,24.5582691 8.0203717,24.7472622 8.0203717,24.9782537 L8.0203717,26.8618848 L8.0203717,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M8.0203717,30.9472855 C8.0203717,31.178277 7.8578108,31.3672701 7.65912526,31.3672701 L2.91523705,31.3672701 C2.71655151,31.3672701 2.55399061,31.178277 2.55399061,30.9472855 L2.55399061,29.0636543 C2.55399061,28.8326628 2.71655151,28.6436697 2.91523705,28.6436697 L7.65912526,28.6436697 C7.8578108,28.6436697 8.0203717,28.8326628 8.0203717,29.0636543 L8.0203717,30.9472855 L8.0203717,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,14.605683 C16.2199433,14.8366746 16.0573824,15.0256677 15.8586969,15.0256677 L11.1148087,15.0256677 C10.9161231,15.0256677 10.7535622,14.8366746 10.7535622,14.605683 L10.7535622,12.7220519 C10.7535622,12.4910604 10.9161231,12.3020673 11.1148087,12.3020673 L15.8586969,12.3020673 C16.0573824,12.3020673 16.2199433,12.4910604 16.2199433,12.7220519 L16.2199433,14.605683 L16.2199433,14.605683 Z" opacity="0.949999988" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,10.5202824 C16.2199433,10.751274 16.0573824,10.9402671 15.8586969,10.9402671 L11.1148087,10.9402671 C10.9161231,10.9402671 10.7535622,10.751274 10.7535622,10.5202824 L10.7535622,8.63665131 C10.7535622,8.40565976 10.9161231,8.21666667 11.1148087,8.21666667 L15.8586969,8.21666667 C16.0573824,8.21666667 16.2199433,8.40565976 16.2199433,8.63665131 L16.2199433,10.5202824 L16.2199433,10.5202824 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,18.6910836 C16.2199433,18.9220752 16.0573824,19.1110683 15.8586969,19.1110683 L11.1148087,19.1110683 C10.9161231,19.1110683 10.7535622,18.9220752 10.7535622,18.6910836 L10.7535622,16.8074525 C10.7535622,16.576461 10.9161231,16.3874679 11.1148087,16.3874679 L15.8586969,16.3874679 C16.0573824,16.3874679 16.2199433,16.576461 16.2199433,16.8074525 L16.2199433,18.6910836 L16.2199433,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,22.7764842 C16.2199433,23.0074758 16.0573824,23.1964689 15.8586969,23.1964689 L11.1148087,23.1964689 C10.9161231,23.1964689 10.7535622,23.0074758 10.7535622,22.7764842 L10.7535622,20.8928531 C10.7535622,20.6618616 10.9161231,20.4728685 11.1148087,20.4728685 L15.8586969,20.4728685 C16.0573824,20.4728685 16.2199433,20.6618616 16.2199433,20.8928531 L16.2199433,22.7764842 L16.2199433,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,26.8618848 C16.2199433,27.0928764 16.0573824,27.2818695 15.8586969,27.2818695 L11.1148087,27.2818695 C10.9161231,27.2818695 10.7535622,27.0928764 10.7535622,26.8618848 L10.7535622,24.9782537 C10.7535622,24.7472622 10.9161231,24.5582691 11.1148087,24.5582691 L15.8586969,24.5582691 C16.0573824,24.5582691 16.2199433,24.7472622 16.2199433,24.9782537 L16.2199433,26.8618848 L16.2199433,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M16.2199433,30.9472855 C16.2199433,31.178277 16.0573824,31.3672701 15.8586969,31.3672701 L11.1148087,31.3672701 C10.9161231,31.3672701 10.7535622,31.178277 10.7535622,30.9472855 L10.7535622,29.0636543 C10.7535622,28.8326628 10.9161231,28.6436697 11.1148087,28.6436697 L15.8586969,28.6436697 C16.0573824,28.6436697 16.2199433,28.8326628 16.2199433,29.0636543 L16.2199433,30.9472855 L16.2199433,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M24.419515,14.605683 C24.419515,14.8366746 24.2569541,15.0256677 24.0582685,15.0256677 L19.3143803,15.0256677 C19.1156948,15.0256677 18.9531339,14.8366746 18.9531339,14.605683 L18.9531339,12.7220519 C18.9531339,12.4910604 19.1156948,12.3020673 19.3143803,12.3020673 L24.0582685,12.3020673 C24.2569541,12.3020673 24.419515,12.4910604 24.419515,12.7220519 L24.419515,14.605683 L24.419515,14.605683 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M24.419515,18.6910836 C24.419515,18.9220752 24.2569541,19.1110683 24.0582685,19.1110683 L19.3143803,19.1110683 C19.1156948,19.1110683 18.9531339,18.9220752 18.9531339,18.6910836 L18.9531339,16.8074525 C18.9531339,16.576461 19.1156948,16.3874679 19.3143803,16.3874679 L24.0582685,16.3874679 C24.2569541,16.3874679 24.419515,16.576461 24.419515,16.8074525 L24.419515,18.6910836 L24.419515,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M24.419515,22.7764842 C24.419515,23.0074758 24.2569541,23.1964689 24.0582685,23.1964689 L19.3143803,23.1964689 C19.1156948,23.1964689 18.9531339,23.0074758 18.9531339,22.7764842 L18.9531339,20.8928531 C18.9531339,20.6618616 19.1156948,20.4728685 19.3143803,20.4728685 L24.0582685,20.4728685 C24.2569541,20.4728685 24.419515,20.6618616 24.419515,20.8928531 L24.419515,22.7764842 L24.419515,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M24.419515,26.8618848 C24.419515,27.0928764 24.2569541,27.2818695 24.0582685,27.2818695 L19.3143803,27.2818695 C19.1156948,27.2818695 18.9531339,27.0928764 18.9531339,26.8618848 L18.9531339,24.9782537 C18.9531339,24.7472622 19.1156948,24.5582691 19.3143803,24.5582691 L24.0582685,24.5582691 C24.2569541,24.5582691 24.419515,24.7472622 24.419515,24.9782537 L24.419515,26.8618848 L24.419515,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                                <path class="svg-fg" d="M24.419515,30.9472855 C24.419515,31.178277 24.2569541,31.3672701 24.0582685,31.3672701 L19.3143803,31.3672701 C19.1156948,31.3672701 18.9531339,31.178277 18.9531339,30.9472855 L18.9531339,29.0636543 C18.9531339,28.8326628 19.1156948,28.6436697 19.3143803,28.6436697 L24.0582685,28.6436697 C24.2569541,28.6436697 24.419515,28.8326628 24.419515,29.0636543 L24.419515,30.9472855 L24.419515,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='DOC' || item.FileExtension =='DOCX'" width="27px" height="34px" id="svg_{{res}}{{$index}}" class="svgicon svg--doc" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <defs />
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup" transform="translate(-476.000000, -152.000000)" fill="hsl(207, 90%, 54%)">
                                            <g sketch:type="MSLayerGroup" transform="translate(455.000000, 130.000000)">
                                                <g sketch:type="MSShapeGroup">
                                                    <g>
                                                        <g>
                                                            <g>
                                                                <path d="M36.1681034,33.9 L45.4375,33.9 L36.1681034,24.55 L36.1681034,33.9 L36.1681034,33.9 Z M24.3706897,22 L37.8534483,22 L47.9655172,32.2 L47.9655172,52.6 C47.9655172,54.4777681 46.4564081,56 44.5948276,56 L24.3706897,56 C22.4999569,56 21,54.47 21,52.6 L21,25.4 C21,23.513 22.4999569,22 24.3706897,22 L24.3706897,22 Z M39.5387931,49.2 L39.5387931,45.8 L24.3706897,45.8 L24.3706897,49.2 L39.5387931,49.2 L39.5387931,49.2 Z M44.5948276,42.4 L44.5948276,39 L24.3706897,39 L24.3706897,42.4 L44.5948276,42.4 L44.5948276,42.4 Z" class="shareable" />
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='PPT' || item.FileExtension =='PPTX' || item.FileExtension =='PPSX'" width="27px" height="34px" id="svg_{{res}}{{$index}}" class="svgicon svg--ppt" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup">
                                            <path d="M3.375,0 L16.875,0 L27,10.2 L27,30.6 C27,32.4777681 25.488961,34 23.625,34 L3.375,34 C1.51103897,34 0,32.4777681 0,30.6 L0,3.4 C0,1.52223185 1.51103897,0 3.375,0 L3.375,0 Z" fill="hsl(14, 100%, 57%)" sketch:type="MSShapeGroup" />
                                            <g class="svg-fg" sketch:type="MSLayerGroup" transform="translate(6.000000, 2.000000)" fill="hsl(0, 0%, 100%)">
                                                <path d="M0.75,13.3 L0.75,16.7 L2.4375,16.7 L2.4375,26.9 L0.75,26.9 L0.75,28.6 L7.5,28.6 L7.5,26.9 L5.8125,26.9 L5.8125,23.5 L9.1875,23.5 C11.9834415,23.5 14.25,21.2166522 14.25,18.4 C14.25,15.5833478 11.9834415,13.3 9.1875,13.3 L0.75,13.3 L0.75,13.3 Z M9.1875,16.7 C10.1194805,16.7 10.875,17.4611159 10.875,18.4 C10.875,19.3388841 10.1194805,20.1 9.1875,20.1 L5.8125,20.1 L5.8125,16.7 L9.1875,16.7 Z" sketch:type="MSShapeGroup" />
                                                <path d="M9.1875,0.55 L9.1875,9.9 L18.46875,9.9 L9.1875,0.55 L9.1875,0.55 Z" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='XLS'" width="27px" height="34px" id="svg_{{res}}{{$index}}" class="svgicon svg--xls" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup">
                                            <path d="M3.375,0 L16.875,0 L27,10.2 L27,30.6 C27,32.4777681 25.488961,34 23.625,34 L3.375,34 C1.51103897,34 0,32.4777681 0,30.6 L0,3.4 C0,1.52223185 1.51103897,0 3.375,0 L3.375,0 Z" fill="hsl(122, 39%, 49%)" sketch:type="MSShapeGroup" />
                                            <g class="svg-fg" sketch:type="MSLayerGroup" transform="translate(5.000000, 2.000000)" fill="hsl(0, 0%, 100%)">
                                                <path d="M16.9375,13.3 L10.1875,13.3 L10.1875,16.7 L11.875,16.7 L8.5,19.539 L5.125,16.7 L6.8125,16.7 L6.8125,13.3 L0.0625,13.3 L0.0625,16.7 L1.75,16.7 L6.8125,20.95 L1.75,25.2 L0.0625,25.2 L0.0625,28.6 L6.8125,28.6 L6.8125,25.2 L5.125,25.2 L8.5,22.361 L11.875,25.2 L10.1875,25.2 L10.1875,28.6 L16.9375,28.6 L16.9375,25.2 L15.25,25.2 L10.1875,20.95 L15.25,16.7 L16.9375,16.7 L16.9375,13.3 L16.9375,13.3 Z" class="xlscol" sketch:type="MSShapeGroup" />
                                                <path d="M10.1875,0.55 L10.1875,9.9 L19.46875,9.9 L10.1875,0.55 L10.1875,0.55 Z" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='ZIP'" width="27px" height="34px" id="svg_{{res}}{{$index}}" class="svgicon svg--zip" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup">
                                            <path d="M3,0 C1.335,0 0,1.31565221 0,2.95652182 L0,31.0434791 C0,32.676321 1.34314575,34.000001 3,34.000001 L24,34.000001 C25.6568542,34.000001 27,32.676321 27,31.0434791 L27,2.95652182 C27,1.31565221 25.65,0 24,0 L3,0 Z" fill="#FFC400" sketch:type="MSShapeGroup" />
                                            <g class="svg-fg" sketch:type="MSLayerGroup" transform="translate(10.000000, 4.000000)" fill="hsl(0, 0%, 100%)">
                                                <path d="M6.5,6.34782638 L3.5,6.34782638 L3.5,9.3043482 L6.5,9.3043482 L6.5,12.26087 L3.5,12.26087 L3.5,9.3043482 L0.5,9.3043482 L0.5,6.34782638 L3.5,6.34782638 L3.5,3.39130456 L0.5,3.39130456 L0.5,0.434782733 L3.5,0.434782733 L3.5,3.39130456 L6.5,3.39130456 L6.5,6.34782638 Z" sketch:type="MSShapeGroup" />
                                                <path d="M6.64423077,23.974113 L3.64423077,23.974113 L3.64423077,21.0175911 L0.644230769,21.0175911 L0.644230769,18.0610693 L3.64423077,18.0610693 L3.64423077,21.0175911 L6.64423077,21.0175911 L6.64423077,23.974113 Z" sketch:type="MSShapeGroup" />
                                                <path d="M6.5,18.1739137 L3.5,18.1739137 L3.5,15.2173918 L0.5,15.2173918 L0.5,12.26087 L3.5,12.26087 L3.5,15.2173918 L6.5,15.2173918 L6.5,18.1739137 Z" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <svg ng-if="item.FileExtension =='INDD'" width="27px" height="34px" id="svg_{{res}}{{$index}}" class="svgicon svg--ind" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g sketch:type="MSArtboardGroup">
                                            <path d="M3.375,0 C1.501875,0 0,1.513 0,3.4 L0,30.6 C0,32.4777681 1.51103897,34 3.375,34 L23.625,34 C25.488961,34 27,32.4777681 27,30.6 L27,10.2 L16.875,0 L3.375,0 L3.375,0 Z" fill="#CBCBCB" sketch:type="MSShapeGroup" />
                                            <path class="svg-fg" d="M15.1875,11.9 L15.1875,2.55 L24.46875,11.9 L15.1875,11.9 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                        </g>
                                    </g>
                                </svg>

                                <svg ng-if="item.FileExtension ==''" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

                                    <g id="DOCUMENTS-AND-MEDIA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g id="Unknown-Icon" sketch:type="MSArtboardGroup">
                                            <path d="M3.375,0 C1.501875,0 0,1.513 0,3.4 L0,30.6 C0,32.4777681 1.51103897,34 3.375,34 L23.625,34 C25.488961,34 27,32.4777681 27,30.6 L27,10.2 L16.875,0 L3.375,0 L3.375,0 Z" id="Background" fill="#CBCBCB" sketch:type="MSShapeGroup"></path>
                                            <path d="M15.1875,11.9 L15.1875,2.55 L24.46875,11.9 L15.1875,11.9 Z" id="Content" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup"></path>
                                        </g>
                                    </g>
                                </svg>
                                <svg width="27px" ng-if="item.FileExtension =='VIDEO' ||  item.FileExtension=='WEBM' || item.FileExtension=='MKV' ||item.FileExtension=='FLV' || item.FileExtension=='VOB' || item.FileExtension=='OGV' || item.FileExtension=='OGG' || item.FileExtension=='DRC' || item.FileExtension=='GIFV' || item.FileExtension=='AVI' || item.FileExtension=='MOV' || item.FileExtension=='QT' || item.FileExtension=='WMV' || item.FileExtension=='YUV' || item.FileExtension=='RM' || item.FileExtension=='ASF' ||item.FileExtension=='AMV' || item.FileExtension=='MP4' || item.FileExtension=='M4P' || item.FileExtension=='M4V' || item.FileExtension=='MPG' || item.FileExtension=='MPEG' || item.FileExtension=='M2V' || item.FileExtension=='SVI' || item.FileExtension=='3GP'" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
                                    <title>Video Icon</title>
                                    <desc>created_with_sketch</desc>
                                    <defs />
                                    <g id="DOCUMENTS-AND-MEDIA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g id="Video-Icon" sketch:type="MSArtboardGroup">
                                            <path d="M23.2697368,3.77777778 L19.5394737,3.77777778 L19.5394737,0 L7.46052632,0 L7.46052632,3.77777778 L3.73026316,3.77777778 L3.73026316,0 L0,0 L0,34 L3.73026316,34 L3.73026316,30.2222222 L7.46052632,30.2222222 L7.46052632,34 L19.5394737,34 L19.5394737,30.2222222 L23.2697368,30.2222222 L23.2697368,34 L27,34 L27,0 L23.2697368,0 L23.2697368,3.77777778 Z" id="Background" fill="hsl(0, 0%, 37%)" sketch:type="MSShapeGroup" />
                                            <g id="Content" sketch:type="MSLayerGroup" transform="translate(3.000000, 7.000000)" fill="hsl(0, 0%, 100%)">
                                                <path d="M4.46052632,19.4444444 L0.730263158,19.4444444 L0.730263158,15.6666667 L4.46052632,15.6666667 L4.46052632,19.4444444 Z" id="Path" sketch:type="MSShapeGroup" />
                                                <path d="M4.46052632,11.8888889 L0.730263158,11.8888889 L0.730263158,8.11111111 L4.46052632,8.11111111 L4.46052632,11.8888889 Z" id="Path" sketch:type="MSShapeGroup" />
                                                <path d="M4.46052632,4.33333333 L0.730263158,4.33333333 L0.730263158,0.555555556 L4.46052632,0.555555556 L4.46052632,4.33333333 Z" id="Path" sketch:type="MSShapeGroup" />
                                                <path d="M20.3554302,19.4444444 L16.625167,19.4444444 L16.625167,15.6666667 L20.3554302,15.6666667 L20.3554302,19.4444444 Z" id="Path" sketch:type="MSShapeGroup" />
                                                <path d="M20.3554302,11.8888889 L16.625167,11.8888889 L16.625167,8.11111111 L20.3554302,8.11111111 L20.3554302,11.8888889 Z" id="Path" sketch:type="MSShapeGroup" />
                                                <path d="M20.3554302,4.33333333 L16.625167,4.33333333 L16.625167,0.555555556 L20.3554302,0.555555556 L20.3554302,4.33333333 Z" id="Path" sketch:type="MSShapeGroup" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div class="w-32 m-r-15" ng-if="!item.IsIcon">
                                <svg width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                                    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
                                    <title>Unknown Icon</title>
                                    <desc>Created with Sketch.</desc>
                                    <defs />
                                    <g id="DOCUMENTS-AND-MEDIA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                        <g id="Unknown-Icon" sketch:type="MSArtboardGroup">
                                            <path d="M3.375,0 C1.501875,0 0,1.513 0,3.4 L0,30.6 C0,32.4777681 1.51103897,34 3.375,34 L23.625,34 C25.488961,34 27,32.4777681 27,30.6 L27,10.2 L16.875,0 L3.375,0 L3.375,0 Z" id="Background" fill="#CBCBCB" sketch:type="MSShapeGroup" />
                                            <path d="M15.1875,11.9 L15.1875,2.55 L24.46875,11.9 L15.1875,11.9 Z" id="Content" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div data-target="chat" data-toggle-sidebar data-model-right="sidebar.circle">
                                <p class="m-0 c-black87" ng-bind="item.title"></p>
                                <p class="f-s-13 m-0" ng-bind-html="item.description |unsafe"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <aside id="chat" data-ng-class="{'toggled': sidebar.circle === true }" class="card card--square m-0">
            <div class="bgm-color4 documents__bar-header documents-right-side-bar">
                <div class="actions">
                    <a data-target="chat" data-toggle-sidebar data-model-right="sidebar.circle" data-ng-class="{ 'open': sidebar.circle === true }">
                        <i class="zmdi zmdi-close c-white f-s-20 cursor-pointer"></i>
                    </a>
                </div>
                <div class="m-r-10" ng-if="RansaItemDetail.IsIcon">
                    <svg ng-if="RansaItemDetail.FileExtension=='PDF'" width="28px" height="34px" viewBox="0 0 28 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <defs />
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup" transform="translate(-23.000000, -179.000000)">
                                <path d="M38.3,190.9 L47.65,190.9 L38.3,181.55 L38.3,190.9 L38.3,190.9 Z M26.4,179 L40,179 L50.2,189.2 L50.2,209.6 C50.2,211.477768 48.6777681,213 46.8,213 L26.4,213 C24.513,213 23,211.47 23,209.6 L23,182.4 C23,180.522232 24.5222319,179 26.4,179 L26.4,179 Z M34.781,196.748 C35.478,198.278 36.362,199.536 37.382,200.403 L38.079,200.947 C36.6,201.219 34.56,201.695 32.401,202.528 L32.401,202.528 L32.214,202.596 L33.064,200.828 C33.829,199.349 34.39,198.006 34.781,196.748 L34.781,196.748 Z M45.797,203.225 C46.103,202.919 46.256,202.528 46.273,202.103 C46.324,201.763 46.239,201.44 46.069,201.168 C45.576,200.369 44.301,199.995 42.193,199.995 L40,200.114 L38.521,199.128 C37.45,198.244 36.481,196.697 35.801,194.776 L35.869,194.538 C36.43,192.277 36.957,189.54 35.835,188.418 C35.563,188.146 35.189,188.01 34.798,188.01 L34.39,188.01 C33.761,188.01 33.2,188.673 33.047,189.319 C32.418,191.58 32.792,192.821 33.421,194.878 L33.421,194.895 C32.996,196.391 32.452,198.125 31.585,199.876 L29.953,202.936 L28.44,203.769 C26.4,205.044 25.431,206.472 25.244,207.373 C25.176,207.696 25.21,207.985 25.329,208.291 L25.38,208.376 L26.196,208.903 L26.944,209.09 C28.321,209.09 29.885,207.475 31.993,203.871 L32.299,203.752 C34.05,203.191 36.226,202.8 39.15,202.477 C40.901,203.344 42.958,203.735 44.25,203.735 C44.998,203.735 45.508,203.548 45.797,203.225 L45.797,203.225 Z M45.1,202.018 L45.253,202.205 C45.236,202.375 45.185,202.392 45.1,202.426 L45.032,202.426 L44.709,202.46 C43.927,202.46 42.72,202.137 41.479,201.593 C41.632,201.423 41.7,201.423 41.87,201.423 C44.25,201.423 44.93,201.848 45.1,202.018 L45.1,202.018 Z M29.511,204.5 C28.406,206.523 27.403,207.645 26.638,207.9 C26.723,207.254 27.488,206.132 28.695,205.027 L29.511,204.5 L29.511,204.5 Z M34.645,192.753 C34.254,191.223 34.237,189.982 34.526,189.268 L34.645,189.064 L34.9,189.149 C35.189,189.557 35.223,190.101 35.053,191.019 L35.002,191.291 L34.73,192.685 L34.645,192.753 L34.645,192.753 Z" sketch:type="MSShapeGroup" fill="hsl(0, 0%, 100%)" />
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='DOC' || RansaItemDetail.FileExtension=='DOCX'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <defs />
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup" transform="translate(-476.000000, -152.000000)" fill="hsl(207, 90%, 54%)">
                                <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-Copy" sketch:type="MSLayerGroup" transform="translate(455.000000, 130.000000)">
                                    <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10" sketch:type="MSShapeGroup">
                                        <g id="Group-Copy-8">
                                            <g id="Group">
                                                <g id="list1">
                                                    <path d="M36.1681034,33.9 L45.4375,33.9 L36.1681034,24.55 L36.1681034,33.9 L36.1681034,33.9 Z M24.3706897,22 L37.8534483,22 L47.9655172,32.2 L47.9655172,52.6 C47.9655172,54.4777681 46.4564081,56 44.5948276,56 L24.3706897,56 C22.4999569,56 21,54.47 21,52.6 L21,25.4 C21,23.513 22.4999569,22 24.3706897,22 L24.3706897,22 Z M39.5387931,49.2 L39.5387931,45.8 L24.3706897,45.8 L24.3706897,49.2 L39.5387931,49.2 L39.5387931,49.2 Z M44.5948276,42.4 L44.5948276,39 L24.3706897,39 L24.3706897,42.4 L44.5948276,42.4 L44.5948276,42.4 Z" fill="hsl(0, 0%, 100%)" />
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='Audio' || RansaItemDetail.FileExtension=='MP3'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <defs />
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Artboard-1" sketch:type="MSArtboardGroup">
                                <g id="Group-Copy-2" sketch:type="MSLayerGroup">
                                    <path d="M2.98366966,0 C1.327733,0 0,1.31565217 0,2.95652174 L0,31.0434783 C0,32.6763201 1.33583441,34 2.98366966,34 L23.8693573,34 C25.5171925,34 26.8530269,32.6763201 26.8530269,31.0434783 L26.8530269,2.95652174 C26.8530269,1.31565217 25.5103756,0 23.8693573,0 L2.98366966,0 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                    <path d="M7.65912526,19.1110683 L2.91523705,19.1110683 C2.71655151,19.1110683 2.55399061,18.9220752 2.55399061,18.6910836 L2.55399061,16.8074525 C2.55399061,16.576461 2.71655151,16.3874679 2.91523705,16.3874679 L7.65912526,16.3874679 C7.8578108,16.3874679 8.0203717,16.576461 8.0203717,16.8074525 L8.0203717,18.6910836 C8.0203717,18.9220752 7.8578108,19.1110683 7.65912526,19.1110683 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M8.0203717,22.7764842 C8.0203717,23.0074758 7.8578108,23.1964689 7.65912526,23.1964689 L2.91523705,23.1964689 C2.71655151,23.1964689 2.55399061,23.0074758 2.55399061,22.7764842 L2.55399061,20.8928531 C2.55399061,20.6618616 2.71655151,20.4728685 2.91523705,20.4728685 L7.65912526,20.4728685 C7.8578108,20.4728685 8.0203717,20.6618616 8.0203717,20.8928531 L8.0203717,22.7764842 L8.0203717,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M8.0203717,26.8618848 C8.0203717,27.0928764 7.8578108,27.2818695 7.65912526,27.2818695 L2.91523705,27.2818695 C2.71655151,27.2818695 2.55399061,27.0928764 2.55399061,26.8618848 L2.55399061,24.9782537 C2.55399061,24.7472622 2.71655151,24.5582691 2.91523705,24.5582691 L7.65912526,24.5582691 C7.8578108,24.5582691 8.0203717,24.7472622 8.0203717,24.9782537 L8.0203717,26.8618848 L8.0203717,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M8.0203717,30.9472855 C8.0203717,31.178277 7.8578108,31.3672701 7.65912526,31.3672701 L2.91523705,31.3672701 C2.71655151,31.3672701 2.55399061,31.178277 2.55399061,30.9472855 L2.55399061,29.0636543 C2.55399061,28.8326628 2.71655151,28.6436697 2.91523705,28.6436697 L7.65912526,28.6436697 C7.8578108,28.6436697 8.0203717,28.8326628 8.0203717,29.0636543 L8.0203717,30.9472855 L8.0203717,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,14.605683 C16.2199433,14.8366746 16.0573824,15.0256677 15.8586969,15.0256677 L11.1148087,15.0256677 C10.9161231,15.0256677 10.7535622,14.8366746 10.7535622,14.605683 L10.7535622,12.7220519 C10.7535622,12.4910604 10.9161231,12.3020673 11.1148087,12.3020673 L15.8586969,12.3020673 C16.0573824,12.3020673 16.2199433,12.4910604 16.2199433,12.7220519 L16.2199433,14.605683 L16.2199433,14.605683 Z" opacity="0.949999988" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,10.5202824 C16.2199433,10.751274 16.0573824,10.9402671 15.8586969,10.9402671 L11.1148087,10.9402671 C10.9161231,10.9402671 10.7535622,10.751274 10.7535622,10.5202824 L10.7535622,8.63665131 C10.7535622,8.40565976 10.9161231,8.21666667 11.1148087,8.21666667 L15.8586969,8.21666667 C16.0573824,8.21666667 16.2199433,8.40565976 16.2199433,8.63665131 L16.2199433,10.5202824 L16.2199433,10.5202824 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,18.6910836 C16.2199433,18.9220752 16.0573824,19.1110683 15.8586969,19.1110683 L11.1148087,19.1110683 C10.9161231,19.1110683 10.7535622,18.9220752 10.7535622,18.6910836 L10.7535622,16.8074525 C10.7535622,16.576461 10.9161231,16.3874679 11.1148087,16.3874679 L15.8586969,16.3874679 C16.0573824,16.3874679 16.2199433,16.576461 16.2199433,16.8074525 L16.2199433,18.6910836 L16.2199433,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,22.7764842 C16.2199433,23.0074758 16.0573824,23.1964689 15.8586969,23.1964689 L11.1148087,23.1964689 C10.9161231,23.1964689 10.7535622,23.0074758 10.7535622,22.7764842 L10.7535622,20.8928531 C10.7535622,20.6618616 10.9161231,20.4728685 11.1148087,20.4728685 L15.8586969,20.4728685 C16.0573824,20.4728685 16.2199433,20.6618616 16.2199433,20.8928531 L16.2199433,22.7764842 L16.2199433,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,26.8618848 C16.2199433,27.0928764 16.0573824,27.2818695 15.8586969,27.2818695 L11.1148087,27.2818695 C10.9161231,27.2818695 10.7535622,27.0928764 10.7535622,26.8618848 L10.7535622,24.9782537 C10.7535622,24.7472622 10.9161231,24.5582691 11.1148087,24.5582691 L15.8586969,24.5582691 C16.0573824,24.5582691 16.2199433,24.7472622 16.2199433,24.9782537 L16.2199433,26.8618848 L16.2199433,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M16.2199433,30.9472855 C16.2199433,31.178277 16.0573824,31.3672701 15.8586969,31.3672701 L11.1148087,31.3672701 C10.9161231,31.3672701 10.7535622,31.178277 10.7535622,30.9472855 L10.7535622,29.0636543 C10.7535622,28.8326628 10.9161231,28.6436697 11.1148087,28.6436697 L15.8586969,28.6436697 C16.0573824,28.6436697 16.2199433,28.8326628 16.2199433,29.0636543 L16.2199433,30.9472855 L16.2199433,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M24.419515,14.605683 C24.419515,14.8366746 24.2569541,15.0256677 24.0582685,15.0256677 L19.3143803,15.0256677 C19.1156948,15.0256677 18.9531339,14.8366746 18.9531339,14.605683 L18.9531339,12.7220519 C18.9531339,12.4910604 19.1156948,12.3020673 19.3143803,12.3020673 L24.0582685,12.3020673 C24.2569541,12.3020673 24.419515,12.4910604 24.419515,12.7220519 L24.419515,14.605683 L24.419515,14.605683 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M24.419515,18.6910836 C24.419515,18.9220752 24.2569541,19.1110683 24.0582685,19.1110683 L19.3143803,19.1110683 C19.1156948,19.1110683 18.9531339,18.9220752 18.9531339,18.6910836 L18.9531339,16.8074525 C18.9531339,16.576461 19.1156948,16.3874679 19.3143803,16.3874679 L24.0582685,16.3874679 C24.2569541,16.3874679 24.419515,16.576461 24.419515,16.8074525 L24.419515,18.6910836 L24.419515,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M24.419515,22.7764842 C24.419515,23.0074758 24.2569541,23.1964689 24.0582685,23.1964689 L19.3143803,23.1964689 C19.1156948,23.1964689 18.9531339,23.0074758 18.9531339,22.7764842 L18.9531339,20.8928531 C18.9531339,20.6618616 19.1156948,20.4728685 19.3143803,20.4728685 L24.0582685,20.4728685 C24.2569541,20.4728685 24.419515,20.6618616 24.419515,20.8928531 L24.419515,22.7764842 L24.419515,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M24.419515,26.8618848 C24.419515,27.0928764 24.2569541,27.2818695 24.0582685,27.2818695 L19.3143803,27.2818695 C19.1156948,27.2818695 18.9531339,27.0928764 18.9531339,26.8618848 L18.9531339,24.9782537 C18.9531339,24.7472622 19.1156948,24.5582691 19.3143803,24.5582691 L24.0582685,24.5582691 C24.2569541,24.5582691 24.419515,24.7472622 24.419515,24.9782537 L24.419515,26.8618848 L24.419515,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M24.419515,30.9472855 C24.419515,31.178277 24.2569541,31.3672701 24.0582685,31.3672701 L19.3143803,31.3672701 C19.1156948,31.3672701 18.9531339,31.178277 18.9531339,30.9472855 L18.9531339,29.0636543 C18.9531339,28.8326628 19.1156948,28.6436697 19.3143803,28.6436697 L24.0582685,28.6436697 C24.2569541,28.6436697 24.419515,28.8326628 24.419515,29.0636543 L24.419515,30.9472855 L24.419515,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension==''" width="27px" height="35px" viewBox="0 0 27 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <defs />
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup" transform="translate(-476.000000, -295.000000)">
                                <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-Copy" sketch:type="MSLayerGroup" transform="translate(455.000000, 130.000000)">
                                    <g transform="translate(21.000000, 165.000000)" sketch:type="MSShapeGroup">
                                        <path d="M3,0 C1.335,0 0,1.3197254 0,2.96567506 L0,31.1395881 C0,32.7774852 1.34314575,34.1052632 3,34.1052632 L24,34.1052632 C25.6568542,34.1052632 27,32.7774852 27,31.1395881 L27,2.96567506 C27,1.3197254 25.65,0 24,0 L3,0 Z" fill="hsl(0, 0%, 100%)" />
                                        <path d="M11.1693265,19.8306735 C11.70165,20.33703 11.70165,21.167974 11.1693265,21.6743305 C10.66297,22.180687 9.83202597,22.180687 9.32566946,21.6743305 C6.79388694,19.142548 6.79388694,15.0267785 9.32566946,12.4949959 L9.32566946,12.4949959 L13.9218285,7.89883689 C16.453611,5.36705437 20.5693806,5.36705437 23.1011631,7.89883689 C25.6329456,10.4306194 25.6329456,14.546389 23.1011631,17.0781715 L21.1666216,19.012713 C21.1796051,17.948066 21.0108196,16.883419 20.6472816,15.870706 L21.2575061,15.247498 C22.7895591,13.7284285 22.7895591,11.2615634 21.2575061,9.74249391 C19.7384366,8.2104409 17.2715715,8.2104409 15.752502,9.74249391 L11.1693265,14.3256695 C9.63727346,15.844739 9.63727346,18.311604 11.1693265,19.8306735 L11.1693265,19.8306735 Z M14.8306735,14.3256695 C15.33703,13.819313 16.167974,13.819313 16.6743305,14.3256695 C19.2061131,16.857452 19.2061131,20.9732215 16.6743305,23.5050041 L16.6743305,23.5050041 L12.0781715,28.1011631 C9.54638896,30.6329456 5.43061942,30.6329456 2.89883689,28.1011631 C0.367054368,25.5693806 0.367054368,21.453611 2.89883689,18.9218285 L4.83337841,16.987287 C4.82039491,18.051934 4.98918042,19.116581 5.35271842,20.1422775 L4.74249391,20.752502 C3.2104409,22.2715715 3.2104409,24.7384366 4.74249391,26.2575061 C6.26156343,27.7895591 8.72842846,27.7895591 10.247498,26.2575061 L14.8306735,21.6743305 C16.3627265,20.155261 16.3627265,17.688396 14.8306735,16.1693265 C14.29835,15.66297 14.29835,14.832026 14.8306735,14.3256695 L14.8306735,14.3256695 Z" fill="hsl(201, 86%, 53%)" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='JPG' || RansaItemDetail.FileExtension=='JPEG' || RansaItemDetail.FileExtension=='Exif' || RansaItemDetail.FileExtension=='TIFF' || RansaItemDetail.FileExtension=='GIF' || RansaItemDetail.FileExtension=='BMP' || RansaItemDetail.FileExtension=='PNG' || RansaItemDetail.FileExtension=='PM' || RansaItemDetail.FileExtension=='PGM' || RansaItemDetail.FileExtension=='PBM' || RansaItemDetail.FileExtension=='PNM'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup" transform="translate(-115.000000, -25.000000)">
                                <g sketch:type="MSLayerGroup" transform="translate(115.000000, 25.000000)">
                                    <path d="M2.99074074,0 C1.33087963,0 0,1.31565217 0,2.95652174 L0,31.0434783 C0,32.6763201 1.33900024,34 2.99074074,34 L23.9259259,34 C25.5776664,34 26.9166667,32.6763201 26.9166667,31.0434783 L26.9166667,2.95652174 C26.9166667,1.31565217 25.5708333,0 23.9259259,0 L2.99074074,0 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                    <path d="M2.83333333,30.6 L18.1333333,30.6 L23.2333333,30.6 L23.2333333,17 L16.4333333,23.8 L13.0333333,20.4 L2.83333333,30.6 L2.83333333,30.6 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M9.06666667,7.08333333 C7.18889852,7.08333333 5.66666667,8.60556518 5.66666667,10.4833333 C5.66666667,12.3611015 7.18889852,13.8833333 9.06666667,13.8833333 C10.9444348,13.8833333 12.4666667,12.3611015 12.4666667,10.4833333 C12.4666667,8.60556518 10.9444348,7.08333333 9.06666667,7.08333333 L9.06666667,7.08333333 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='PPT' || RansaItemDetail.FileExtension =='PPTX' || RansaItemDetail.FileExtension =='PPSX'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup">
                                <path d="M3.375,0 L16.875,0 L27,10.2 L27,30.6 C27,32.4777681 25.488961,34 23.625,34 L3.375,34 C1.51103897,34 0,32.4777681 0,30.6 L0,3.4 C0,1.52223185 1.51103897,0 3.375,0 L3.375,0 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                <g class="svg-fg" sketch:type="MSLayerGroup" transform="translate(6.000000, 2.000000)" fill="hsl(201, 86%, 53%)">
                                    <path d="M0.75,13.3 L0.75,16.7 L2.4375,16.7 L2.4375,26.9 L0.75,26.9 L0.75,28.6 L7.5,28.6 L7.5,26.9 L5.8125,26.9 L5.8125,23.5 L9.1875,23.5 C11.9834415,23.5 14.25,21.2166522 14.25,18.4 C14.25,15.5833478 11.9834415,13.3 9.1875,13.3 L0.75,13.3 L0.75,13.3 Z M9.1875,16.7 C10.1194805,16.7 10.875,17.4611159 10.875,18.4 C10.875,19.3388841 10.1194805,20.1 9.1875,20.1 L5.8125,20.1 L5.8125,16.7 L9.1875,16.7 Z" sketch:type="MSShapeGroup" />
                                    <path d="M9.1875,0.55 L9.1875,9.9 L18.46875,9.9 L9.1875,0.55 L9.1875,0.55 Z" sketch:type="MSShapeGroup" />
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='XLS'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g sketch:type="MSArtboardGroup">
                                <path d="M3.375,0 L16.875,0 L27,10.2 L27,30.6 C27,32.4777681 25.488961,34 23.625,34 L3.375,34 C1.51103897,34 0,32.4777681 0,30.6 L0,3.4 C0,1.52223185 1.51103897,0 3.375,0 L3.375,0 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                <g class="svg-fg" sketch:type="MSLayerGroup" transform="translate(5.000000, 2.000000)" fill="hsl(201, 86%, 53%)">
                                    <path d="M16.9375,13.3 L10.1875,13.3 L10.1875,16.7 L11.875,16.7 L8.5,19.539 L5.125,16.7 L6.8125,16.7 L6.8125,13.3 L0.0625,13.3 L0.0625,16.7 L1.75,16.7 L6.8125,20.95 L1.75,25.2 L0.0625,25.2 L0.0625,28.6 L6.8125,28.6 L6.8125,25.2 L5.125,25.2 L8.5,22.361 L11.875,25.2 L10.1875,25.2 L10.1875,28.6 L16.9375,28.6 L16.9375,25.2 L15.25,25.2 L10.1875,20.95 L15.25,16.7 L16.9375,16.7 L16.9375,13.3 L16.9375,13.3 Z" class="xlscol" sketch:type="MSShapeGroup" />
                                    <path d="M10.1875,0.55 L10.1875,9.9 L19.46875,9.9 L10.1875,0.55 L10.1875,0.55 Z" sketch:type="MSShapeGroup" />
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='ZIP'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Zip-Icon" sketch:type="MSArtboardGroup">
                                <path d="M3,0 C1.335,0 0,1.31565221 0,2.95652182 L0,31.0434791 C0,32.676321 1.34314575,34.000001 3,34.000001 L24,34.000001 C25.6568542,34.000001 27,32.676321 27,31.0434791 L27,2.95652182 C27,1.31565221 25.65,0 24,0 L3,0 Z" id="Background" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                <g id="Content" sketch:type="MSLayerGroup" transform="translate(10.000000, 4.000000)" fill="hsl(0, 0%, 100%)">
                                    <path d="M6.5,6.34782638 L3.5,6.34782638 L3.5,9.3043482 L6.5,9.3043482 L6.5,12.26087 L3.5,12.26087 L3.5,9.3043482 L0.5,9.3043482 L0.5,6.34782638 L3.5,6.34782638 L3.5,3.39130456 L0.5,3.39130456 L0.5,0.434782733 L3.5,0.434782733 L3.5,3.39130456 L6.5,3.39130456 L6.5,6.34782638 Z" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                                    <path d="M6.64423077,23.974113 L3.64423077,23.974113 L3.64423077,21.0175911 L0.644230769,21.0175911 L0.644230769,18.0610693 L3.64423077,18.0610693 L3.64423077,21.0175911 L6.64423077,21.0175911 L6.64423077,23.974113 Z" id="Path-Copy-3" sketch:type="MSShapeGroup" fill="hsl(201, 86%, 53%)" />
                                    <path d="M6.5,18.1739137 L3.5,18.1739137 L3.5,15.2173918 L0.5,15.2173918 L0.5,12.26087 L3.5,12.26087 L3.5,15.2173918 L6.5,15.2173918 L6.5,18.1739137 Z" sketch:type="MSShapeGroup" fill="hsl(201, 86%, 53%)" />
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg ng-if="RansaItemDetail.FileExtension=='INDD'" width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Unknown-Icon" sketch:type="MSArtboardGroup">
                                <path d="M3.375,0 C1.501875,0 0,1.513 0,3.4 L0,30.6 C0,32.4777681 1.51103897,34 3.375,34 L23.625,34 C25.488961,34 27,32.4777681 27,30.6 L27,10.2 L16.875,0 L3.375,0 L3.375,0 Z" id="Background" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                <path d="M15.1875,11.9 L15.1875,2.55 L24.46875,11.9 L15.1875,11.9 Z" id="Content" fill="hsl(201, 86%, 53%)" sketch:type="MSShapeGroup" />
                            </g>
                        </g>
                    </svg>
                    <svg width="27px" ng-if="RansaItemDetail.FileExtension =='VIDEO' || RansaItemDetail.FileExtension=='WEBM' || RansaItemDetail.FileExtension=='MKV' ||RansaItemDetail.FileExtension=='FLV' || RansaItemDetail.FileExtension=='VOB' || RansaItemDetail.FileExtension=='OGV' || RansaItemDetail.FileExtension=='OGG' || RansaItemDetail.FileExtension=='DRC' || RansaItemDetail.FileExtension=='GIFV' || RansaItemDetail.FileExtension=='AVI' || RansaItemDetail.FileExtension=='MOV' || RansaItemDetail.FileExtension=='QT' || RansaItemDetail.FileExtension=='WMV' || RansaItemDetail.FileExtension=='YUV' || RansaItemDetail.FileExtension=='RM' || RansaItemDetail.FileExtension=='ASF' ||RansaItemDetail.FileExtension=='AMV' || RansaItemDetail.FileExtension=='MP4' || RansaItemDetail.FileExtension=='M4P' || RansaItemDetail.FileExtension=='M4V' || RansaItemDetail.FileExtension=='MPG' || RansaItemDetail.FileExtension=='MPEG' || RansaItemDetail.FileExtension=='M2V' || RansaItemDetail.FileExtension=='SVI' || RansaItemDetail.FileExtension=='3GP'" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
                        <title>Video Icon</title>
                        <desc>Created with Sketch.</desc>
                        <defs />
                        <g id="DOCUMENTS-AND-MEDIA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Video-Icon" sketch:type="MSArtboardGroup">
                                <path d="M23.2697368,3.77777778 L19.5394737,3.77777778 L19.5394737,0 L7.46052632,0 L7.46052632,3.77777778 L3.73026316,3.77777778 L3.73026316,0 L0,0 L0,34 L3.73026316,34 L3.73026316,30.2222222 L7.46052632,30.2222222 L7.46052632,34 L19.5394737,34 L19.5394737,30.2222222 L23.2697368,30.2222222 L23.2697368,34 L27,34 L27,0 L23.2697368,0 L23.2697368,3.77777778 Z" id="Background" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                <g id="Content" sketch:type="MSLayerGroup" transform="translate(3.000000, 7.000000)" fill="#D5841F">
                                    <path d="M4.46052632,19.4444444 L0.730263158,19.4444444 L0.730263158,15.6666667 L4.46052632,15.6666667 L4.46052632,19.4444444 Z" id="Path" sketch:type="MSShapeGroup" />
                                    <path d="M4.46052632,11.8888889 L0.730263158,11.8888889 L0.730263158,8.11111111 L4.46052632,8.11111111 L4.46052632,11.8888889 Z" id="Path" sketch:type="MSShapeGroup" />
                                    <path d="M4.46052632,4.33333333 L0.730263158,4.33333333 L0.730263158,0.555555556 L4.46052632,0.555555556 L4.46052632,4.33333333 Z" id="Path" sketch:type="MSShapeGroup" />
                                    <path d="M20.3554302,19.4444444 L16.625167,19.4444444 L16.625167,15.6666667 L20.3554302,15.6666667 L20.3554302,19.4444444 Z" id="Path" sketch:type="MSShapeGroup" />
                                    <path d="M20.3554302,11.8888889 L16.625167,11.8888889 L16.625167,8.11111111 L20.3554302,8.11111111 L20.3554302,11.8888889 Z" id="Path" sketch:type="MSShapeGroup" />
                                    <path d="M20.3554302,4.33333333 L16.625167,4.33333333 L16.625167,0.555555556 L20.3554302,0.555555556 L20.3554302,4.33333333 Z" id="Path" sketch:type="MSShapeGroup" />
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="m-r-10" ng-if="!RansaItemDetail.IsIcon">
                    <svg width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
                        <title>Unknown Icon</title>
                        <desc>Created with Sketch.</desc>
                        <defs />
                        <g id="DOCUMENTS-AND-MEDIA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Unknown-Icon" sketch:type="MSArtboardGroup">
                                <path d="M3.375,0 C1.501875,0 0,1.513 0,3.4 L0,30.6 C0,32.4777681 1.51103897,34 3.375,34 L23.625,34 C25.488961,34 27,32.4777681 27,30.6 L27,10.2 L16.875,0 L3.375,0 L3.375,0 Z" id="Background" fill="#CBCBCB" sketch:type="MSShapeGroup" />
                                <path d="M15.1875,11.9 L15.1875,2.55 L24.46875,11.9 L15.1875,11.9 Z" id="Content" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                            </g>
                        </g>
                    </svg>
                </div>
                <h2 class="f-s-20" ng-bind="RansaItemDetail.title" style="max-width: 70%;min-width: 70%;"></h2>
                
            </div>
            <div class="card-body flex-shrink" style="box-sizing:content-box;min-height: 185px;overflow-y: auto;">
                <p class="f-s-13 m-0" translate>type</p>
                <p class="c-black87" ng-bind="RansaItemDetail.FileExtension"></p>
                <p class="f-s-13 m-0" translate>global_description</p>
                <p class="c-black87" ng-if="RansaItemDetail.description && SessionData.MoreButton">
                    <span ng-bind-html="RansaItemDetail.description | limitTo:100 | unsafe"></span><span ng-if="RansaItemDetail.description.length>100">...</span>
                    <button type="button" class="btn btn-link c-color1" uib-btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" ng-if="RansaItemDetail.description.length>100" ng-model="SessionData.MoreButton" ng-bind="'more '+MoreButton"></button>
                </p>
                <p class="c-black87" ng-if="RansaItemDetail.description && !SessionData.MoreButton">
                    <span ng-bind-html="RansaItemDetail.description |unsafe"></span>
                    <button type="button" class="btn btn-link c-color1" uib-btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" ng-model="SessionData.MoreButton" ng-bind="'less '+MoreButton"></button>
                </p>
                <p>
                    <span ng-if="RansaItemDetail.IsIcon">
                    <a href="{{RansaItemDetail.url}}" ng-if="RansaItemDetail.FileExtension == 'PDF' || RansaItemDetail.FileExtension == 'JPG' || RansaItemDetail.FileExtension == 'JPEG' || RansaItemDetail.FileExtension == 'DOC' || RansaItemDetail.FileExtension == 'DOCX' || RansaItemDetail.FileExtension == 'PPT'  || RansaItemDetail.FileExtension == 'PPTX' || RansaItemDetail.FileExtension == 'PPSX' || RansaItemDetail.FileExtension == 'XLS' || RansaItemDetail.FileExtension == 'INDD' || (RansaItemDetail.FileExtension == '' && !RansaItemDetail.EmbedCode) || RansaItemDetail.FileExtension=='Exif' || RansaItemDetail.FileExtension=='TIFF' || RansaItemDetail.FileExtension=='GIF' || RansaItemDetail.FileExtension=='BMP' || RansaItemDetail.FileExtension=='PNG'  || RansaItemDetail.FileExtension=='PM' || RansaItemDetail.FileExtension=='PGM' || RansaItemDetail.FileExtension=='PBM' || RansaItemDetail.FileExtension=='PNM'" target="_blank" class="col-lg-4 col-sm-4 col-xs-6 btn bgm-color2 waves-effect" translate>global_View</a>
                    <a href="{{RansaItemDetail.url}}" ng-if="(RansaItemDetail.FileExtension == 'AUDIO' || RansaItemDetail.FileExtension == 'VIDEO' || RansaItemDetail.FileExtension == 'MP3' || RansaItemDetail.FileExtension == 'ZIP' ||  RansaItemDetail.FileExtension=='WEBM' || RansaItemDetail.FileExtension=='MKV' ||RansaItemDetail.FileExtension=='FLV' || RansaItemDetail.FileExtension=='VOB' || RansaItemDetail.FileExtension=='OGV' || RansaItemDetail.FileExtension=='OGG' || RansaItemDetail.FileExtension=='DRC' || RansaItemDetail.FileExtension=='GIFV' || RansaItemDetail.FileExtension=='AVI' || RansaItemDetail.FileExtension=='MOV' || RansaItemDetail.FileExtension=='QT' || RansaItemDetail.FileExtension=='WMV' || RansaItemDetail.FileExtension=='YUV' || RansaItemDetail.FileExtension=='RM' || RansaItemDetail.FileExtension=='ASF' ||RansaItemDetail.FileExtension=='AMV' || RansaItemDetail.FileExtension=='MP4' || RansaItemDetail.FileExtension=='M4P' || RansaItemDetail.FileExtension=='M4V' || RansaItemDetail.FileExtension=='MPG' || RansaItemDetail.FileExtension=='MPEG' || RansaItemDetail.FileExtension=='M2V' || RansaItemDetail.FileExtension=='SVI' || RansaItemDetail.FileExtension=='3GP') && !RansaItemDetail.EmbedCode" target="_blank" class="col-lg-6 col-sm-6 col-xs-6 btn bgm-color2 waves-effect" translate>download_</a>
                </span>
                    <span ng-if="!RansaItemDetail.IsIcon && !RansaItemDetail.EmbedCode">
                    <a href="{{RansaItemDetail.url}}" target="_blank" class="col-lg-4 col-sm-4 col-xs-6 btn bgm-color2 waves-effect" translate>global_View</a>
                </span>
                    <span ng-if="RansaItemDetail.EmbedCode">
                    <a href="{{RansaItemDetail.url}}" target="_blank" class="col-lg-4 col-sm-4 col-xs-6 btn bgm-color2 waves-effect" translate>global_View</a>
                </span>
                </p>
            </div>
            <div class="card-footer">
                <p class="flex-middle share-row" translate>share</p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.copyLink"><i class="c-gray zmdi zmdi-link"></i>
                    <button type="button" ng-click="FunGetCopyText(RansaItemDetail.RealUrl)" class="btn btn-link c-color1" id="btncopy-{{RansaItemDetail.id}}" translate="copy_link"></button>
                </p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.teamMessenger" data-target="chat" data-toggle-sidebar data-model-right="sidebar.circle">
                    <svg version="1.1" id="imgView" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 370 370" style="enable-background:new 0 0 370 370;" xml:space="preserve" class="detail convertSvgInline replaced-svg" width="19px" height="17px" data-id="70854" data-kw="message34">
                        <path style="fill:#949494;" d="M314.834,50.23C280.024,20.045,233.915,3.423,185,3.423c-48.915,0-95.024,16.622-129.834,46.807  C19.593,81.077,0,122.317,0,166.351c0,43.132,19.228,84.073,53.263,114.441c-15.777,27.354-42.246,53.008-42.551,53.302  c-5.764,5.544-7.408,14.117-4.108,21.4c3.079,6.789,9.832,11.083,17.188,11.083c0.539,0,1.083-0.023,1.628-0.07  c3.169-0.273,76.435-6.887,140.011-38.139c6.518,0.605,13.079,0.912,19.57,0.912c48.915,0,95.024-16.623,129.834-46.807  C350.407,251.624,370,210.385,370,166.351C370,122.317,350.407,81.077,314.834,50.23z M90.611,185  c-15.741,0-28.551-12.808-28.551-28.551c0-15.742,12.81-28.55,28.551-28.55c15.744,0,28.551,12.808,28.551,28.55  C119.162,172.192,106.355,185,90.611,185z M185,185c-15.742,0-28.551-12.808-28.551-28.551c0-15.742,12.809-28.55,28.551-28.55  s28.551,12.808,28.551,28.55C213.551,172.192,200.742,185,185,185z M279.389,185c-15.744,0-28.551-12.808-28.551-28.551  c0-15.742,12.807-28.55,28.551-28.55c15.741,0,28.551,12.808,28.551,28.55C307.94,172.192,295.13,185,279.389,185z" />
                    </svg>
                    <button type="button" class="btn btn-link c-color1" ng-click="FOpenMessangerWindow(); SendToTeamMessage();" translate>send_to_team</button>
                </p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.email"><i class="c-gray zmdi zmdi-email"></i> <a class="c-color1" ng-href="mailto:?body=I'd like to share with you!%20%3A%0D%0A{{SelectedItemUrlEncoded}}" translate>send_to_email</a></p>                
                <p class="flex-middle share-row" ng-if="shareOptionsService.facebook"><i class="c-gray zmdi zmdi-facebook"></i> <a class="c-color1" href="http://www.facebook.com/share.php?u={{RansaItemDetail.RealUrl | httpPrefix}}&title={{RansaItemDetail.title}}" target="_blank" translate>share_Facebook</a></p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.twitter"><i class="c-gray zmdi zmdi-twitter"></i> <a class="c-color1" href="http://twitter.com/intent/tweet?text={{RansaItemDetail.title | encodeURIComponent}}&url={{RansaItemDetail.RealUrl | encodeURIComponent}}" target="_blank" translate>share_twitter</a></p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.google"><i class="c-gray zmdi zmdi-google-plus"></i> <a class="c-color1" href="https://plus.google.com/share?url={{RansaItemDetail.RealUrl}}" target="_blank" translate>share_google+</a></p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.pinterest && (RansaItemDetail.FileExtension =='JPG'|| RansaItemDetail.FileExtension =='jpg'|| RansaItemDetail.FileExtension=='JPEG' || RansaItemDetail.FileExtension=='jpeg' || RansaItemDetail.FileExtension=='png' || RansaItemDetail.FileExtension=='PNG' ||  RansaItemDetail.FileExtension=='gif' ||  RansaItemDetail.FileExtension=='GIF' ||  RansaItemDetail.FileExtension=='bmp' ||  RansaItemDetail.FileExtension=='BMP')"><i class="c-gray zmdi zmdi-pinterest-box"></i> <a class="c-color1" href="https://pinterest.com/pin/create/button/?url={{RansaItemDetail.url}}&media={{RansaItemDetail.url}}&description={{RansaItemDetail.RealUrl}}" target="_blank" translate>share_pinterest</a></p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.sms">
                    <svg style="width: 24px;height: 24px" viewBox="0 0 24 24">
                        <path fill="hsl(0, 0%, 62%)" d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" />
                    </svg>
                    <a ng-if="shareOptionsService.isIos" class="c-color1" ng-href="sms:&body={{RansaItemDetail.RealUrl}}" translate>share_via_sms</a>
                    <a ng-if="!shareOptionsService.isIos" class="c-color1" ng-href="sms:?body={{RansaItemDetail.RealUrl}}" translate>share_via_sms</a>
                </p>
                <p class="flex-middle share-row" ng-if="shareOptionsService.whatsApp">
                    <i class="c-gray zmdi zmdi-whatsapp"></i>
                    <a class="c-color1" ng-href="whatsapp://send?text={{RansaItemDetail.RealUrl}}" translate>share_via_whatapp</a>
                </p>
            </div>
        </aside>
    </div>
    <div class="col-sm-9 col-md-9 col-xs-12" ng-class="sidebar.circle?'col-lg-7':'col-lg-9'" ng-if="SessionData.MobileScreen && SessionData.SearchDocument && SessionData.HeaderSearch">
        <span class="" translate>search_results</span>
        <div class="card m-t-10">
            <div class="card-body">
                <div class="lv-item b-b" id="RensaItem{{$index}}" ng-click="SelectedItem('RensaItem',$index);">
                    <div class="media" ng-repeat="item in AllDocuments | filter:SessionData.HeaderSearch">
                        <div class="pull-left m-r-20 m-t-5" style="height: 25px;width: 20px">
                            <svgicon Extension="{{item.FileExtension}}" id="svgsearch_{{$index}}" class="svgicon"></svgicon>
                            <svg width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" ng-if="item.id==1">
                                <defs />
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                    <g sketch:type="MSArtboardGroup" transform="translate(-476.000000, -152.000000)" fill="hsl(207, 90%, 54%)">
                                        <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-Copy" sketch:type="MSLayerGroup" transform="translate(455.000000, 130.000000)">
                                            <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10" sketch:type="MSShapeGroup">
                                                <g id="Group-Copy-8">
                                                    <g id="Group">
                                                        <g id="list1">
                                                            <path d="M36.1681034,33.9 L45.4375,33.9 L36.1681034,24.55 L36.1681034,33.9 L36.1681034,33.9 Z M24.3706897,22 L37.8534483,22 L47.9655172,32.2 L47.9655172,52.6 C47.9655172,54.4777681 46.4564081,56 44.5948276,56 L24.3706897,56 C22.4999569,56 21,54.47 21,52.6 L21,25.4 C21,23.513 22.4999569,22 24.3706897,22 L24.3706897,22 Z M39.5387931,49.2 L39.5387931,45.8 L24.3706897,45.8 L24.3706897,49.2 L39.5387931,49.2 L39.5387931,49.2 Z M44.5948276,42.4 L44.5948276,39 L24.3706897,39 L24.3706897,42.4 L44.5948276,42.4 L44.5948276,42.4 Z" />
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <svg width="27px" height="34px" viewBox="0 0 27 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" ng-if="item.id==2">
                                <defs />
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                    <g id="Artboard-1" sketch:type="MSArtboardGroup">
                                        <g id="Group-Copy-2" sketch:type="MSLayerGroup">
                                            <path d="M2.98366966,0 C1.327733,0 0,1.31565217 0,2.95652174 L0,31.0434783 C0,32.6763201 1.33583441,34 2.98366966,34 L23.8693573,34 C25.5171925,34 26.8530269,32.6763201 26.8530269,31.0434783 L26.8530269,2.95652174 C26.8530269,1.31565217 25.5103756,0 23.8693573,0 L2.98366966,0 Z" fill="hsl(36, 100%, 50%)" sketch:type="MSShapeGroup" />
                                            <path d="M7.65912526,19.1110683 L2.91523705,19.1110683 C2.71655151,19.1110683 2.55399061,18.9220752 2.55399061,18.6910836 L2.55399061,16.8074525 C2.55399061,16.576461 2.71655151,16.3874679 2.91523705,16.3874679 L7.65912526,16.3874679 C7.8578108,16.3874679 8.0203717,16.576461 8.0203717,16.8074525 L8.0203717,18.6910836 C8.0203717,18.9220752 7.8578108,19.1110683 7.65912526,19.1110683 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M8.0203717,22.7764842 C8.0203717,23.0074758 7.8578108,23.1964689 7.65912526,23.1964689 L2.91523705,23.1964689 C2.71655151,23.1964689 2.55399061,23.0074758 2.55399061,22.7764842 L2.55399061,20.8928531 C2.55399061,20.6618616 2.71655151,20.4728685 2.91523705,20.4728685 L7.65912526,20.4728685 C7.8578108,20.4728685 8.0203717,20.6618616 8.0203717,20.8928531 L8.0203717,22.7764842 L8.0203717,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M8.0203717,26.8618848 C8.0203717,27.0928764 7.8578108,27.2818695 7.65912526,27.2818695 L2.91523705,27.2818695 C2.71655151,27.2818695 2.55399061,27.0928764 2.55399061,26.8618848 L2.55399061,24.9782537 C2.55399061,24.7472622 2.71655151,24.5582691 2.91523705,24.5582691 L7.65912526,24.5582691 C7.8578108,24.5582691 8.0203717,24.7472622 8.0203717,24.9782537 L8.0203717,26.8618848 L8.0203717,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M8.0203717,30.9472855 C8.0203717,31.178277 7.8578108,31.3672701 7.65912526,31.3672701 L2.91523705,31.3672701 C2.71655151,31.3672701 2.55399061,31.178277 2.55399061,30.9472855 L2.55399061,29.0636543 C2.55399061,28.8326628 2.71655151,28.6436697 2.91523705,28.6436697 L7.65912526,28.6436697 C7.8578108,28.6436697 8.0203717,28.8326628 8.0203717,29.0636543 L8.0203717,30.9472855 L8.0203717,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,14.605683 C16.2199433,14.8366746 16.0573824,15.0256677 15.8586969,15.0256677 L11.1148087,15.0256677 C10.9161231,15.0256677 10.7535622,14.8366746 10.7535622,14.605683 L10.7535622,12.7220519 C10.7535622,12.4910604 10.9161231,12.3020673 11.1148087,12.3020673 L15.8586969,12.3020673 C16.0573824,12.3020673 16.2199433,12.4910604 16.2199433,12.7220519 L16.2199433,14.605683 L16.2199433,14.605683 Z" opacity="0.949999988" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,10.5202824 C16.2199433,10.751274 16.0573824,10.9402671 15.8586969,10.9402671 L11.1148087,10.9402671 C10.9161231,10.9402671 10.7535622,10.751274 10.7535622,10.5202824 L10.7535622,8.63665131 C10.7535622,8.40565976 10.9161231,8.21666667 11.1148087,8.21666667 L15.8586969,8.21666667 C16.0573824,8.21666667 16.2199433,8.40565976 16.2199433,8.63665131 L16.2199433,10.5202824 L16.2199433,10.5202824 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,18.6910836 C16.2199433,18.9220752 16.0573824,19.1110683 15.8586969,19.1110683 L11.1148087,19.1110683 C10.9161231,19.1110683 10.7535622,18.9220752 10.7535622,18.6910836 L10.7535622,16.8074525 C10.7535622,16.576461 10.9161231,16.3874679 11.1148087,16.3874679 L15.8586969,16.3874679 C16.0573824,16.3874679 16.2199433,16.576461 16.2199433,16.8074525 L16.2199433,18.6910836 L16.2199433,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,22.7764842 C16.2199433,23.0074758 16.0573824,23.1964689 15.8586969,23.1964689 L11.1148087,23.1964689 C10.9161231,23.1964689 10.7535622,23.0074758 10.7535622,22.7764842 L10.7535622,20.8928531 C10.7535622,20.6618616 10.9161231,20.4728685 11.1148087,20.4728685 L15.8586969,20.4728685 C16.0573824,20.4728685 16.2199433,20.6618616 16.2199433,20.8928531 L16.2199433,22.7764842 L16.2199433,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,26.8618848 C16.2199433,27.0928764 16.0573824,27.2818695 15.8586969,27.2818695 L11.1148087,27.2818695 C10.9161231,27.2818695 10.7535622,27.0928764 10.7535622,26.8618848 L10.7535622,24.9782537 C10.7535622,24.7472622 10.9161231,24.5582691 11.1148087,24.5582691 L15.8586969,24.5582691 C16.0573824,24.5582691 16.2199433,24.7472622 16.2199433,24.9782537 L16.2199433,26.8618848 L16.2199433,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M16.2199433,30.9472855 C16.2199433,31.178277 16.0573824,31.3672701 15.8586969,31.3672701 L11.1148087,31.3672701 C10.9161231,31.3672701 10.7535622,31.178277 10.7535622,30.9472855 L10.7535622,29.0636543 C10.7535622,28.8326628 10.9161231,28.6436697 11.1148087,28.6436697 L15.8586969,28.6436697 C16.0573824,28.6436697 16.2199433,28.8326628 16.2199433,29.0636543 L16.2199433,30.9472855 L16.2199433,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M24.419515,14.605683 C24.419515,14.8366746 24.2569541,15.0256677 24.0582685,15.0256677 L19.3143803,15.0256677 C19.1156948,15.0256677 18.9531339,14.8366746 18.9531339,14.605683 L18.9531339,12.7220519 C18.9531339,12.4910604 19.1156948,12.3020673 19.3143803,12.3020673 L24.0582685,12.3020673 C24.2569541,12.3020673 24.419515,12.4910604 24.419515,12.7220519 L24.419515,14.605683 L24.419515,14.605683 Z" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M24.419515,18.6910836 C24.419515,18.9220752 24.2569541,19.1110683 24.0582685,19.1110683 L19.3143803,19.1110683 C19.1156948,19.1110683 18.9531339,18.9220752 18.9531339,18.6910836 L18.9531339,16.8074525 C18.9531339,16.576461 19.1156948,16.3874679 19.3143803,16.3874679 L24.0582685,16.3874679 C24.2569541,16.3874679 24.419515,16.576461 24.419515,16.8074525 L24.419515,18.6910836 L24.419515,18.6910836 Z" opacity="0.9" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M24.419515,22.7764842 C24.419515,23.0074758 24.2569541,23.1964689 24.0582685,23.1964689 L19.3143803,23.1964689 C19.1156948,23.1964689 18.9531339,23.0074758 18.9531339,22.7764842 L18.9531339,20.8928531 C18.9531339,20.6618616 19.1156948,20.4728685 19.3143803,20.4728685 L24.0582685,20.4728685 C24.2569541,20.4728685 24.419515,20.6618616 24.419515,20.8928531 L24.419515,22.7764842 L24.419515,22.7764842 Z" opacity="0.85" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M24.419515,26.8618848 C24.419515,27.0928764 24.2569541,27.2818695 24.0582685,27.2818695 L19.3143803,27.2818695 C19.1156948,27.2818695 18.9531339,27.0928764 18.9531339,26.8618848 L18.9531339,24.9782537 C18.9531339,24.7472622 19.1156948,24.5582691 19.3143803,24.5582691 L24.0582685,24.5582691 C24.2569541,24.5582691 24.419515,24.7472622 24.419515,24.9782537 L24.419515,26.8618848 L24.419515,26.8618848 Z" opacity="0.8" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                            <path d="M24.419515,30.9472855 C24.419515,31.178277 24.2569541,31.3672701 24.0582685,31.3672701 L19.3143803,31.3672701 C19.1156948,31.3672701 18.9531339,31.178277 18.9531339,30.9472855 L18.9531339,29.0636543 C18.9531339,28.8326628 19.1156948,28.6436697 19.3143803,28.6436697 L24.0582685,28.6436697 C24.2569541,28.6436697 24.419515,28.8326628 24.419515,29.0636543 L24.419515,30.9472855 L24.419515,30.9472855 Z" opacity="0.75" fill-opacity="0.6" fill="hsl(0, 0%, 100%)" sketch:type="MSShapeGroup" />
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <svg width="27px" height="35px" viewBox="0 0 27 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" ng-if="item.id==3">
                                <defs />
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                    <g sketch:type="MSArtboardGroup" transform="translate(-476.000000, -295.000000)">
                                        <g id="Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-+-Group-Copy-8-+-Group-Copy-9-+-Group-Copy-10-Copy-Copy" sketch:type="MSLayerGroup" transform="translate(455.000000, 130.000000)">
                                            <g transform="translate(21.000000, 165.000000)" sketch:type="MSShapeGroup">
                                                <path d="M3,0 C1.335,0 0,1.3197254 0,2.96567506 L0,31.1395881 C0,32.7774852 1.34314575,34.1052632 3,34.1052632 L24,34.1052632 C25.6568542,34.1052632 27,32.7774852 27,31.1395881 L27,2.96567506 C27,1.3197254 25.65,0 24,0 L3,0 Z" fill="hsl(187, 100%, 42%)" />
                                                <path d="M11.1693265,19.8306735 C11.70165,20.33703 11.70165,21.167974 11.1693265,21.6743305 C10.66297,22.180687 9.83202597,22.180687 9.32566946,21.6743305 C6.79388694,19.142548 6.79388694,15.0267785 9.32566946,12.4949959 L9.32566946,12.4949959 L13.9218285,7.89883689 C16.453611,5.36705437 20.5693806,5.36705437 23.1011631,7.89883689 C25.6329456,10.4306194 25.6329456,14.546389 23.1011631,17.0781715 L21.1666216,19.012713 C21.1796051,17.948066 21.0108196,16.883419 20.6472816,15.870706 L21.2575061,15.247498 C22.7895591,13.7284285 22.7895591,11.2615634 21.2575061,9.74249391 C19.7384366,8.2104409 17.2715715,8.2104409 15.752502,9.74249391 L11.1693265,14.3256695 C9.63727346,15.844739 9.63727346,18.311604 11.1693265,19.8306735 L11.1693265,19.8306735 Z M14.8306735,14.3256695 C15.33703,13.819313 16.167974,13.819313 16.6743305,14.3256695 C19.2061131,16.857452 19.2061131,20.9732215 16.6743305,23.5050041 L16.6743305,23.5050041 L12.0781715,28.1011631 C9.54638896,30.6329456 5.43061942,30.6329456 2.89883689,28.1011631 C0.367054368,25.5693806 0.367054368,21.453611 2.89883689,18.9218285 L4.83337841,16.987287 C4.82039491,18.051934 4.98918042,19.116581 5.35271842,20.1422775 L4.74249391,20.752502 C3.2104409,22.2715715 3.2104409,24.7384366 4.74249391,26.2575061 C6.26156343,27.7895591 8.72842846,27.7895591 10.247498,26.2575061 L14.8306735,21.6743305 C16.3627265,20.155261 16.3627265,17.688396 14.8306735,16.1693265 C14.29835,15.66297 14.29835,14.832026 14.8306735,14.3256695 L14.8306735,14.3256695 Z" fill="hsl(0, 0%, 100%)" />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="media-body cursor-pointer" data-target="chat" data-toggle-sidebar data-model-right="sidebar.circle" data-ng-class="{ 'open': sidebar.circle === true }">
                            <div class="lv-title c-black" ng-bind="item.title"></div>
                            <small class="lv-small ng-binding" ng-bind="item.FileExtension +' - '+ item.description"></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
  </div>
(function () {
     'use strict';
      module.controller('customDocumentsCtrl', customDocumentsCtrl);
  customDocumentsCtrl.$inject = ['$scope','$rootScope','$location','$timeout','$RestService','$translate','sidebarService','shareOptionsService','titleService','TinyApiUrl','UserService','Notification'];
        
  function customDocumentsCtrl($scope,$rootScope,$location,$timeout,$RestService,$translate,sidebarService,shareOptionsService,titleService,TinyApiUrl,UserService,Notification) {
            
    $scope.sidebar = sidebarService;

            $scope.SessionData.CurrentDocumentPanel = true;
            $scope.SessionData.DisplayProductHeader = false;
            $scope.SessionData.IsSearchTrue = false;
            $scope.SessionData.showHeaderBackBtn = false;
            $scope.SessionData.MoreButton = true;
            titleService.setTitle('pagetitle_documents_media');
            $scope.Documents = [];
            $scope.AllDocuments = [];
            $scope.ShowLoader = {};
            $scope.getResourseId = $location.search().resourceId;
            $scope.ShowTabSubCategoryName = 'Material';
            $scope.HaveQueryString = $location.search().resourceId > 0 ? true : false;
            $scope.shareOptionsService = shareOptionsService;
            $scope.CustomerProfileInfo = $scope.CustomerProfileInfo || {};
            $scope.LoggedInUser = {};
            $rootScope.hideSearchButton = true;
            UserService.getUser(UserService.LoggedInUser.CustomerId, 1).then(function(result) {
                $scope.LoggedInUser = result;
            });
            $timeout(function() {
                $('#DocumentsPage')
                    .find('#chat')
                    .removeClass('toggled');
            }, true);
            $scope.ToggleLeftPanel = function() {
                $scope.SessionData.CurrentDocumentPanel = !$scope.SessionData.CurrentDocumentPanel;
            };

            $scope.ShareOption = {
                CopyLink: false,
                Email: false,
                Facebook: false,
                Twitter: false,
                Google: false,
                Pinterest: false,
                TeamMessenger: false
            };

            $scope.FunGetCopyText = function(url) {
                if (url) {
                    var $temp = $('<input type="text">');
                    $('body').append($temp);
                    var copyText = $temp.val(url);
                    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
                        var el = copyText.get(0);
                        var editable = el.contentEditable;
                        var readOnly = el.readOnly;
                        el.contentEditable = true;
                        el.readOnly = false;
                        var range = document.createRange();
                        range.selectNodeContents(el);
                        var sel = window.getSelection();
                        sel.removeAllRanges();
                        sel.addRange(range);
                        el.setSelectionRange(0, 999999);
                        el.contentEditable = editable;
                        el.readOnly = readOnly;
                    } else {
                        copyText.trigger('select');
                    }
                    document.execCommand('copy');
                    Notification.success('Success', $translate.instant('link_copied'));
                    $temp.remove();
                } else {
                    Notification.error('Error', $translate.instant('link_not_available'));
                }
            };

            $scope.CurrentState = function(Id, type, sub, index) {
                $scope.ShowCategoryName = Id;
                $scope.ShowTabSubCategoryName = type;
                $scope.Documents = [];
                $scope.AllDocuments = [];

                titleService.setTitle(type, 'documents_media');
                $('.inner-sub-menu > li').removeClass('b-blue');
                $scope.SessionData.ProductType = type;
                $('#sub' + index + sub).addClass('b-blue');
                if ($scope.SessionData.MobileScreen) {
                    $scope.SessionData.ShowProductDetail = true;
                    $scope.SessionData.ShowLeftPanel = false;
                    $scope.SessionData.DisplayProductHeader = true;
                    $scope.SessionData.showHeaderBackBtn = true;
                }

                if (type === 'All') {
                    _.each($scope.Resources, function(item) {
                        if (item.Name === Id) {
                            if (item.SubCategories.length > 0) {
                                _.each(item.SubCategories, function(data) {
                                    if (data.Resources.length > 0) {
                                        _.each(data.Resources, function(resource) {
                                            if (
                                                resource.FileExtension == 'PDF' ||
                                                resource.FileExtension == 'JPG' ||
                                                resource.FileExtension == 'JPEG' ||
                                                resource.FileExtension == 'PNG' ||
                                                resource.FileExtension == 'AUDIO' ||
                                                resource.FileExtension == 'MP3' ||
                                                resource.FileExtension == 'DOC' ||
                                                resource.FileExtension == 'DOCX' ||
                                                resource.FileExtension == 'PPT' ||
                                                resource.FileExtension == 'PPTX' ||
                                                resource.FileExtension == 'PPSX' ||
                                                resource.FileExtension == 'XLS' ||
                                                resource.FileExtension == 'ZIP' ||
                                                resource.FileExtension == 'INDD' ||
                                                resource.FileExtension === '' ||
                                                resource.FileExtension == 'VIDEO' ||
                                                resource.FileExtension == 'MP4'
                                            ) {
                                                resource.IsIcon = true;
                                            } else {
                                                resource.IsIcon = false;
                                            }
                                            $scope.AllDocuments.push({
                                                id: resource.Id,
                                                type: 'Document',
                                                title: resource.Title,
                                                description: resource.Description,
                                                url: resource.Url,
                                                FileExtension: resource.FileExtension,
                                                ParentName: data.Name,
                                                IsIcon: resource.IsIcon,
                                                EmbedCode: resource.EmbedCode,
                                                RealUrl: ''
                                            });
                                        });
                                    }
                                });
                            }
                        }
                    });

                    $scope.Documents = groupByParentName($scope.AllDocuments);
                } else {
                    _.each($scope.Resources, function(item) {
                        if (item.Name === Id) {
                            if (item.SubCategories.length > 0) {
                                _.each(item.SubCategories, function(data) {
                                    if (data.Name === type) {
                                        if (data.Resources.length > 0) {
                                            _.each(data.Resources, function(resource) {
                                                if (
                                                    resource.FileExtension == 'PDF' ||
                                                    resource.FileExtension == 'JPG' ||
                                                    resource.FileExtension == 'JPEG' ||
                                                    resource.FileExtension == 'PNG' ||
                                                    resource.FileExtension == 'AUDIO' ||
                                                    resource.FileExtension == 'MP3' ||
                                                    resource.FileExtension == 'DOC' ||
                                                    resource.FileExtension == 'DOCX' ||
                                                    resource.FileExtension == 'PPT' ||
                                                    resource.FileExtension == 'PPTX' ||
                                                    resource.FileExtension == 'PPSX' ||
                                                    resource.FileExtension == 'XLS' ||
                                                    resource.FileExtension == 'ZIP' ||
                                                    resource.FileExtension == 'INDD' ||
                                                    resource.FileExtension === '' ||
                                                    resource.FileExtension == 'VIDEO' ||
                                                    resource.FileExtension == 'MP4'
                                                ) {
                                                    resource.IsIcon = true;
                                                } else {
                                                    resource.IsIcon = false;
                                                }
                                                $scope.AllDocuments.push({
                                                    id: resource.Id,
                                                    type: 'Document',
                                                    title: resource.Title,
                                                    description: resource.Description,
                                                    url: resource.Url,
                                                    FileExtension: resource.FileExtension,
                                                    ParentName: data.Name,
                                                    IsIcon: resource.IsIcon,
                                                    EmbedCode: resource.EmbedCode,
                                                    RealUrl: ''
                                                });
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                    $scope.Documents = groupByParentName($scope.AllDocuments);

                    setTimeout(function() {
                        if ($scope.getResourseId) {
                            $scope.SelectedItem(
                                undefined,
                                $scope.selectedResourseInfo.id,
                                0,
                                $scope.selectedResourseInfo.index,
                                $scope.selectedResourseInfo.FileExtension
                            );
                            sidebarService.circle = true;
                        }
                    }, 100);
                }
            };

            function groupByParentName(allDocuments) {
                // The following code preserves the original order of items as provided by the API
                var sortIndex = 0;
                return allDocuments.reduce(function(arr, doc) {
                    var currentIndex;
                    var alreadyPresent = arr.some(function(item, index) {
                        if (item.Name === doc.ParentName) {
                            currentIndex = index;
                            return true;
                        }
                        return false;
                    });

                    if (!alreadyPresent) {
                        arr.push({
                            Name: doc.ParentName,
                            SortOrder: sortIndex++,
                            Resources: [doc]
                        });
                    } else {
                        arr[currentIndex].Resources.push(doc);
                    }
                    return arr;
                }, []);
            }

            $scope.CurrentCategory = function(Id) {
                $scope.WhiteAudioIcon = false;
                $scope.WhiteLinkIcon = false;
                $scope.WhitePDFIcon = false;
                if ($('#pro' + Id).hasClass('bgm-offwhite')) {
                    $('.sub-menu').removeClass('bgm-offwhite');
                } else {
                    $('.sub-menu').removeClass('bgm-offwhite');
                    $('#pro' + Id).addClass('bgm-offwhite');
                }
            };
            var currentItemId;
            $scope.SelectedItem = function(type, Id) {
                $scope.SessionData.SendNewMessage = false;
                sidebarService.right = false;
                if (currentItemId != Id) {
                    currentItemId = Id;
                    sidebarService.circle = false;
                    $scope.RansaItemDetail = {};
                    $scope.ShowLoader['documentdiv'] = true;
                    var selectedResource = '';
                    var method = '';
                    var Hosturl = '';
                    var tinyTempUrl = '';
                    var EmbedCodeUrl = '';
                    var request = '';
                    if (
                        angular.isUndefined(UserService.LoggedInUser.Webalias) ||
                        angular.isUndefined(UserService.LoggedInUser.Webalias) ||
                        UserService.LoggedInUser.Webalias === null ||
                        UserService.LoggedInUser.Webalias === ''
                    ) {
                        console.error('UserService.LoggedInUser.Webalias', UserService.LoggedInUser.Webalias);
                        selectedResource = _.filter($scope.AllDocuments, function(item) {
                            return angular.equals(item.id, Id);
                        })[0];
                        method = TinyApiUrl + 'GetTinyUrl';
                        Hosturl =
                            location.hostname !== 'localhost'
                                ? window.location.origin.replace('office2', 'share')
                                : 'https://' + $rootScope.SessionData.CompanyDetail.Name.toLowerCase() + '.share.directscaledev.com';
                        tinyTempUrl = encodeURIComponent(
                            Hosturl +
                                '/social/' +
                                $rootScope.SessionData.CompanyDetail.Name +
                                '/' +
                                selectedResource.id +
                                '?language=' +
                                UserService.LoggedInUser.LanguageCode +
                                '&country=' +
                                UserService.LoggedInUser.MainCountry
                        );
                        EmbedCodeUrl =
                            Hosturl +
                            '/social/' +
                            $rootScope.SessionData.CompanyDetail.Name +
                            '/' +
                            selectedResource.id +
                            '?language=' +
                            UserService.LoggedInUser.LanguageCode +
                            '&country=' +
                            UserService.LoggedInUser.MainCountry;
                        request =
                            '?companyId=1&authKey=dd&&url=' +
                            tinyTempUrl +
                            '&isTracking=false&origin=resource&customerID=' +
                            UserService.LoggedInUser.CustomerId +
                            '&companyName=' +
                            $rootScope.SessionData.CompanyDetail.Name;
                    } else {
                        selectedResource = _.filter($scope.AllDocuments, function(item) {
                            return angular.equals(item.id, Id);
                        })[0];
                        method = TinyApiUrl + 'GetTinyUrl';
                        Hosturl =
                            location.hostname !== 'localhost'
                                ? window.location.origin.replace('office2', 'share')
                                : 'https://' + $rootScope.SessionData.CompanyDetail.Name.toLowerCase() + '.share.directscaledev.com';
                        tinyTempUrl = encodeURIComponent(
                            Hosturl +
                                '/social/' +
                                UserService.LoggedInUser.Webalias +
                                '/' +
                                $rootScope.SessionData.CompanyDetail.Name +
                                '/' +
                                selectedResource.id +
                                '?language=' +
                                UserService.LoggedInUser.LanguageCode +
                                '&country=' +
                                UserService.LoggedInUser.MainCountry
                        );
                        EmbedCodeUrl =
                            Hosturl +
                            '/social/' +
                            UserService.LoggedInUser.Webalias +
                            '/' +
                            $rootScope.SessionData.CompanyDetail.Name +
                            '/' +
                            selectedResource.id +
                            '?language=' +
                            UserService.LoggedInUser.LanguageCode +
                            '&country=' +
                            UserService.LoggedInUser.MainCountry;
                        request =
                            '?companyId=1&authKey=dd&&url=' +
                            tinyTempUrl +
                            '&isTracking=false&origin=resource&customerID=' +
                            UserService.LoggedInUser.CustomerId +
                            '&companyName=' +
                            $rootScope.SessionData.CompanyDetail.Name;
                    }
                    $RestService
                        .GetTinyUrl(method, request)
                        .then(function(result) {
                            result = result.data;
                            $scope.ShowLoader['documentdiv'] = false;
                            $scope.SessionData.MoreButton = true;
                            $scope.RansaItemDetail = _.filter($scope.AllDocuments, function(item) {
                                return angular.equals(item.id, Id);
                            })[0];
                            if ($scope.RansaItemDetail.EmbedCode) {
                                $scope.RansaItemDetail.url = EmbedCodeUrl;
                            }
                            $scope.RansaItemDetail.RealUrl = result;
                            $scope.SelectedItemUrlEncoded = encodeURI(encodeURI($scope.RansaItemDetail.RealUrl));
                            $scope.SelectedItemTitleEncoded = encodeURIComponent($scope.RansaItemDetail.title);
                            $scope.activeDocumentId = Id;
                            sidebarService.circle = true;
                        })
                        .catch(function() {
                            $scope.ShowLoader['documentdiv'] = false;
                            $scope.SessionData.MoreButton = true;
                            $scope.RansaItemDetail = _.filter($scope.AllDocuments, function(item) {
                                return angular.equals(item.id, Id);
                            })[0];
                            $scope.SelectedItemUrlEncoded = encodeURI(encodeURI($scope.RansaItemDetail.url));
                            $scope.SelectedItemTitleEncoded = encodeURIComponent($scope.RansaItemDetail.title);
                            $scope.RansaItemDetail.RealUrl = $scope.RansaItemDetail.url;
                            $scope.activeDocumentId = Id;
                            sidebarService.circle = true;
                        });
                } else {
                    $scope.ShowLoader['documentdiv'] = false;
                    $scope.SessionData.MoreButton = true;
                    $scope.activeDocumentId = Id;
                    sidebarService.circle = true;
                }
            };
            $scope.SendToTeamMessage = function() {
                $scope.SessionData.ResourceArray = [];
                $scope.SessionData.ResourceArray.push({
                    id: $scope.RansaItemDetail.id,
                    name: $scope.RansaItemDetail.title,
                    ext: $scope.RansaItemDetail.FileExtension,
                    path: $scope.RansaItemDetail.url
                });
            };
            $scope.PageRender = function() {
                var size = $(window).width();
                if (size < 768) {
                    $scope.SessionData.ShowLeftPanel = true;
                    $scope.SessionData.ShowProductDetail = false;
                } else {
                    $scope.SessionData.ShowLeftPanel = true;
                    $scope.SessionData.ShowProductDetail = true;
                }
                if (size > 768 && size < 992) {
                    $scope.SessionData.SmallDevice = true;
                } else {
                    $scope.SessionData.SmallDevice = false;
                }
            };
            $scope.PageRender();

            $(window).on(
                'resize',
                _.debounce(function() {
                    var size = $(window).width();
                    if (size < 768) {
                        //$scope.SessionData.ShowLeftPanel = true;
                        //$scope.SessionData.ShowProductDetail = false;
                        //$scope.SessionData.DisplayProductHeader = false;
                    } else {
                        $scope.SessionData.ShowLeftPanel = true;
                        $scope.SessionData.ShowProductDetail = true;
                        $scope.SessionData.DisplayProductHeader = false;
                    }
                    if (size > 768 && size < 992) {
                        $scope.SessionData.SmallDevice = true;
                    } else {
                        $scope.SessionData.SmallDevice = false;
                    }
                }, 300)
            );

            $scope.FResourcesCountries = function() {
                $scope.ShowLoader['maindocdiv'] = true;
                $RestService
                    .ResourcesCountries()
                    .then(function(result) {
                        result = result.data;
                        $scope.ShowLoader['maindocdiv'] = false;
                        try {
                            if (result) {
                                $scope.ResourcesCountries = result.Countries;
                                $scope.GetCountryLanguage(result.CustomerCountry, result.CustomerLanguage);
                            }
                        } catch (ex) {
                            console.error('ex', ex);
                        }
                    })
                    .catch(function() {
                        $scope.ShowLoader['maindocdiv'] = false;
                    });
            };
            $scope.FResourcesCountries();

            $scope.GetCountryLanguage = function(countryCode, languageCode) {
                $scope.CountryCode = countryCode;
                $scope.LanguagesForCountry = _.filter($scope.ResourcesCountries, function(country) {
                    return country.Id === countryCode;
                })[0].Languages;
                if (!languageCode || languageCode === undefined) {
                    languageCode = Object.keys($scope.LanguagesForCountry)[0];
                }
                $scope.ClassOnLanguage(countryCode, languageCode);
            };

            $scope.ClassOnLanguage = function(countryCode, languageCode) {
                if (!languageCode || languageCode === undefined) {
                    languageCode = 'en';
                }
                $scope.ActiveLanguage = languageCode;
                $scope.FResources(true, countryCode, languageCode);
            };

            $scope.FResources = function(type, countryCode, languageCode) {
                var request = '';
                if (type) {
                    request = '?country=' + countryCode + '&language=' + languageCode;
                } else {
                    request = '';
                }
                $scope.ShowLoader['maindocdiv'] = true;
                $RestService
                    .V3Resources(request)
                    .then(function(result) {
                        result = result.data;
                        $scope.ShowLoader['maindocdiv'] = false;
                        try {
                            if (result) {
                                $scope.Resources = result;
                                var currentIndex;
                                _.each($scope.Resources, function(item, index) {
                                    item.ID = index;
                                });
                                if ($scope.Resources.length > 0) {
                                    if ($scope.getResourseId) {
                                        _.each($scope.Resources, function(item) {
                                            _.each(item.SubCategories, function(data) {
                                                if (data.Resources.length > 0) {
                                                    _.each(data.Resources, function(resource) {
                                                        if (parseInt(resource.Id, 10) === parseInt($scope.getResourseId, 10)) {
                                                            currentIndex = item.ID;
                                                        }
                                                    });
                                                }
                                            });
                                        });
                                    } else {
                                        currentIndex = 0;
                                    }
                                    $scope.AllDocuments = [];
                                    $scope.AllDocumentsData = $scope.Resources[currentIndex];
                                    $scope.superParentName = $scope.AllDocumentsData.Name;
                                    if ($scope.AllDocumentsData.SubCategories.length > 0) {
                                        _.each($scope.AllDocumentsData.SubCategories, function(data) {
                                            if (data.Resources.length > 0) {
                                                _.each(data.Resources, function(resource) {
                                                    if (
                                                        resource.FileExtension == 'PDF' ||
                                                        resource.FileExtension == 'JPG' ||
                                                        resource.FileExtension == 'JPEG' ||
                                                        resource.FileExtension == 'PNG' ||
                                                        resource.FileExtension == 'AUDIO' ||
                                                        resource.FileExtension == 'MP3' ||
                                                        resource.FileExtension == 'DOC' ||
                                                        resource.FileExtension == 'DOCX' ||
                                                        resource.FileExtension == 'PPT' ||
                                                        resource.FileExtension == 'PPTX' ||
                                                        resource.FileExtension == 'PPSX' ||
                                                        resource.FileExtension == 'XLS' ||
                                                        resource.FileExtension == 'ZIP' ||
                                                        resource.FileExtension == 'INDD' ||
                                                        resource.FileExtension === '' ||
                                                        resource.FileExtension == 'VIDEO' ||
                                                        resource.FileExtension == 'MP4'
                                                    ) {
                                                        resource.IsIcon = true;
                                                    } else {
                                                        resource.IsIcon = false;
                                                    }
                                                    $scope.AllDocuments.push({
                                                        id: resource.Id,
                                                        type: 'Document',
                                                        title: resource.Title,
                                                        description: resource.Description,
                                                        url: resource.Url,
                                                        FileExtension: resource.FileExtension,
                                                        ParentName: data.Name,
                                                        IsIcon: resource.IsIcon,
                                                        SuperParentName: $scope.superParentName,
                                                        EmbedCode: resource.EmbedCode,
                                                        RealUrl: ''
                                                    });
                                                });
                                            }
                                        });

                                        $scope.Documents = groupByParentName($scope.AllDocuments);

                                        if ($scope.getResourseId) {
                                            _.each($scope.Documents, function(item) {
                                                _.each(item.Resources, function(item, index) {
                                                    if (parseInt(item.id, 10) === parseInt($scope.getResourseId, 10)) {
                                                        $scope.selectedResourseInfo = item;
                                                        $scope.selectedResourseInfo.index = index;
                                                    }
                                                });
                                            });
                                            $scope.CurrentState(
                                                $scope.selectedResourseInfo.SuperParentName,
                                                $scope.selectedResourseInfo.ParentName,
                                                currentIndex + 5,
                                                $scope.selectedResourseInfo.index
                                            );
                                        }
                                    }
                                    //***remove previous selected tab*/
                                    $scope.ShowTabSubCategoryName = '';
                                }
                            }
                        } catch (ex) {
                            console.error('ex', ex);
                        }
                    })
                    .catch(function() {
                        $scope.ShowLoader['maindocdiv'] = false;
                    });
            };
            //$scope.FResources();

            $scope.FOpenMessangerWindow = function() {
                $scope.SessionData.SendNewMessage = true;
                sidebarService.right = true;
            };
        }
})();
/**
 * Documents.less
 */

/** Documents.tpl.html */
.page__documents-media,
.page__documents_media {
    @media (min-width: 768px) and (max-width: 980px) {
        .header__content--has-search .header__left {
            flex-basis: 210px;
        }

        .header__content--has-search .header__right {
            flex-basis: 130px;
        }
    }
    /**
     * SVG colors
    **/
    .card-list-item--active path,
    .card-list-item--active .svg-bg {
        fill: hsl(0, 0%, 100%);
    }

    .card-list-item--active .svg-fg,
    .card-list-item--active .svg-fg path {
        fill: hsl(201, 86%, 53%);
    }

    .card-list-item--active .c-black87 {
        color: hsl(0, 0%, 100%);
    }

    #chat {
        display: block;
        width: 235px;
        right: -240px;
        overflow: auto;
        height: calc(100% - 56px);

        &.toggled {
            right: 0;
        }

        @media (min-width: 768px) {
            height: calc(100% - 64px);
        }
    }

    #DocumentsPage {
        transition: all 0.25s;
    }

    #DocumentsPage.document-details-active {
        margin-right: 235px;
    }

    #DocumentsPage .sub-menu .category-title {
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 80%;
    }

    /**
     * Share rows
    **/
    .share-row {
        min-height: 32px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .share-row .zmdi {
        font-size: 20px;
        margin-right: 20px;
    }

    .share-row svg {
        margin-right: 20px;
        text-align: center;
        margin-left: 13px;
    }

    .dash-widget-item {
        overflow-x: hidden;
    }

    .sidebar-secondary ul li ul li:hover {
        background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    }

    @media (min-width: 768px) {
        .sidebar-secondary {
            left: 95px;
        }
    }

    @media (max-width: 767px) {
        .sidebar-secondary {
            left: 0;
            top: 55px;
            width: 100%;
        }
    }

    .sidebar-secondary > ul > li {
        border-bottom: 1px solid hsl(0, 0%, 91%);
        min-height: 45px;
        padding: 0 0 15px 10px;
    }

    .sidebar-secondary > ul > li > a {
        color: hsl(214, 7%, 38%);
        font-size: 15px;
        min-height: 35px;
        padding: 15px 0;
        position: absolute;
        width: 90%;
    }

    .sidebar-secondary ul li ul li > a {
        color: hsl(214, 7%, 38%);
    }

    .sidebar-secondary ul li ul {
        display: none;
    }

    .sidebar-secondary ul li ul li {
        padding: 10px 10px 10px 50px;
        margin-left: -10px;
    }

    .icon-right-down {
        position: absolute;
        right: 10px;
    }

    .icon-right-up {
        position: absolute;
        right: 10px;
    }

    .sub-menu:not(.bgm-offwhite) > .icon-right-up {
        display: none;
    }

    .sub-menu.bgm-offwhite > .icon-right-down {
        display: none;
    }

    .dash-title {
        position: absolute;
        right: 20px;
        z-index: 999999;
    }

    .bgm-offwhite {
        background-color: hsl(0, 0%, 96%);
    }

    .sub-menu:not(.bgm-offwhite) > .zmdi-folder-outline {
        display: none;
    }

    .sub-menu.bgm-offwhite > .zmdi-folder {
        display: none;
    }

    .sub-menu:not(.bgm-offwhite) > a {
        color: hsl(214, 10%, 30%);
    }

    .sub-menu.bgm-offwhite > a {
        color: hsl(209, 67%, 45%);
    }

    .inner-sub-menu:not(.b-blue) > a {
        color: hsl(214, 10%, 30%);
    }

    #best-selling {
        overflow: hidden;
    }

    @media (min-width: 1200px) and (max-width: 1400px) {
        .margin-leftpanel {
            margin-left: 30px;
        }
    }

    #DocumentsPage .bgm-offwhite > ul {
        display: block;
    }

    #DocumentsPage .sub-menu:not(.bgm-offwhite) > ul {
        display: none !important; /* stylelint-disable-line declaration-no-important */
    }

    #DocumentsPage .lv-small {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }

    .ol,
    ul {
        list-style: none;
    }
}

.documents__bar-header {
    color: hsl(0, 0%, 100%);
    display: flex;
    padding: 16px;
    position: relative;
}

.documents__view-files-in {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 16;

    .card-body {
        display: flex;
    }
}

.documents__view-files-dropdown {
    padding: 0;

    .flex-row {
        padding-bottom: 20px;
        padding-top: 20px;
    }
}

.documents__view-files-col {
    flex-basis: 50%;

    li {
        padding: 5px 20px;
    }
}

.documents__view-files-label {
    font-size: 13px;
    color: hsl(0, 0%, 62%);
    padding: 5px 20px;
}

.documents__view-files--active {
    color: var(--color3);
    cursor: default !important; /* stylelint-disable-line declaration-no-important */

    &:hover,
    &:focus {
        background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
    }
}

.document_header_elipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 56px;
}

.w-70 {
    width: 70px;
}

.documents_lang_border_right-col {
    border-right: 1px solid hsl(0, 0%, 80%);
}

.lang_selecter {
    max-height: 400px;
    overflow: auto;
}

.documents-right-side-bar .actions {
    position: relative;
    top: -8px;
    left: -15px;
}

Did this page help you?