.animation-hide-overview-panel {
    animation: hide-op 0.2s;
    -webkit-animation: hide-op 0.2s;
    -moz-animation: hide-op 0.2s;
    -o-animation: hide-op 0.2s;
}

@keyframes              hide-op { from { transform: translate3d(0%,0,0) } to { transform: translate3d(-100%,0,0) } }
@-webkit-keyframes      hide-op {from {-webkit-transform: translate3d(0%,0,0);}  to {-webkit-transform: translate3d(-100%,0,0);}}
@-moz-keyframes         hide-op {from {-moz-transform: translate3d(0%,0,0);}     to {-moz-transform: translate3d(-100%,0,0);}}
@-o-keyframes           hide-op {from {-o-transform: translate3d(0%,0,0);}       to {-o-transform: translate3d(-100%,0,0);}}

.animation-show-overview-panel {
    animation: show-op 0.2s;
    -webkit-animation: show-op 0.2s;
    -moz-animation: show-op 0.2s;
    -o-animation: show-op 0.2s;
}

@keyframes              show-op { from { transform: translate3d(-100%,0,0) } to { transform: translate3d(0%,0,0) } }
@-webkit-keyframes      show-op {from {-webkit-transform: translate3d(-100%,0,0);}  to {-webkit-transform: translate3d(0%,0,0);}}
@-moz-keyframes         show-op {from {-moz-transform: translate3d(-100%,0,0);}     to {-moz-transform: translate3d(0%,0,0);}}
@-o-keyframes           show-op {from {-o-transform: translate3d(-100%,0,0);}       to {-o-transform: translate3d(0%,0,0);}}

/*Webpart Animations*/
@keyframes          slideOutLeft {from {transform: translate3d(0%,0,0); }         to {transform: translate3d(-105%,0,0);}}
@-webkit-keyframes  slideOutLeft {from {-webkit-transform: translate3d(0%,0,0);}  to {-webkit-transform: translate3d(-105%,0,0);}}
@-moz-keyframes     slideOutLeft {from {-moz-transform: translate3d(0%,0,0);}     to {-moz-transform: translate3d(-105%,0,0);}}
@-o-keyframes       slideOutLeft {from {-o-transform: translate3d(0%,0,0);}       to {-o-transform: translate3d(-105%,0,0);}}

@keyframes          slideOutRight {from {transform: translate3d(0%,0,0); }         to {transform: translate3d(105%,0,0);}}
@-webkit-keyframes  slideOutRight {from {-webkit-transform: translate3d(0,0%,0);}  to {-webkit-transform: translate3d(105%,0,0);}}
@-moz-keyframes     slideOutRight {from {-moz-transform: translate3d(0%,0,0);}     to {-moz-transform: translate3d(105%,0,0);}}
@-o-keyframes       slideOutRight {from {-o-transform: translate3d(0%,0,0);}       to {-o-transform: translate3d(105%,0,0);}}

@keyframes          slideInLeft {from {transform: translate3d(100%,0,0);}           to {transform: translate3d(0%,0,0);}}
@-webkit-keyframes  slideInLeft {from {-webkit-transform: translate3d(100%,0,0);}   to {-webkit-transform: translate3d(0%,0,0);}}
@-moz-keyframes     slideInLeft {from {-moz-transform: translate3d(100%,0,0);}      to {-moz-transform: translate3d(0%,0,0);}}
@-o-keyframes       slideInLeft {from {-o-transform: translate3d(100%,0,0);}        to {-o-transform: translate3d(0%,0,0);}}

@keyframes          slideInRight {from {transform: translate3d(-100%,0,0);}           to {transform: translate3d(0%,0,0);}}
@-webkit-keyframes  slideInRight {from {-webkit-transform: translate3d(-100%,0,0);}   to {-webkit-transform: translate3d(0%,0,0);}}
@-moz-keyframes     slideInRight {from {-moz-transform: translate3d(-100%,0,0);}      to {-moz-transform: translate3d(0%,0,0);}}
@-o-keyframes       slideInRight {from {-o-transform: translate3d(-100%,0,0);}        to {-o-transform: translate3d(0%,0,0);}}

@keyframes          slideInUp {from {transform: translate3d(0,-100%,0);}           to {transform: translate3d(0,0px,0);}}
@-webkit-keyframes  slideInUp {from {-webkit-transform: translate3d(0,-100%,0);}   to {-webkit-transform: translate3d(0,0px,0);}}
@-moz-keyframes     slideInUp {from {-moz-transform: translate3d(0,-100%,0);}      to {-moz-transform: translate3d(0,30px,0);}}
@-o-keyframes       slideInUp {from {-o-transform: translate3d(0,-100%,0);}        to {-o-transform: translate3d(0,0px,0);}}

@keyframes          slideInDown {from {transform: translate3d(0,100%,0);}           to {transform: translate3d(0,0px,0);}}
@-webkit-keyframes  slideInDown {from {-webkit-transform: translate3d(0,100%,0);}   to {-webkit-transform: translate3d(0,0px,0);}}
@-moz-keyframes     slideInDown {from {-moz-transform: translate3d(0,100%,0);}      to {-moz-transform: translate3d(0,0px,0);}}
@-o-keyframes       slideInDown {from {-o-transform: translate3d(0,100%,0);}        to {-o-transform: translate3d(0,0px,0);}}

@keyframes          slideOutUp {from {transform: translate3d(0,0%,0); }         to {transform: translate3d(0,105%,0);}}
@-webkit-keyframes  slideOutUp {from {-webkit-transform: translate3d(0,0%,0);}  to {-webkit-transform: translate3d(0,105%,0);}}
@-moz-keyframes     slideOutUp {from {-moz-transform: translate3d(0,0%,0);}     to {-moz-transform: translate3d(0,105%,0);}}
@-o-keyframes       slideOutUp {from {-o-transform: translate3d(0,0%,0);}       to {-o-transform: translate3d(0,105%,0);}}

@keyframes          slideOutDown {from {transform: translate3d(0,0%,0); }         to {transform: translate3d(0,-105%,0);}}
@-webkit-keyframes  slideOutDown {from {-webkit-transform: translate3d(0,0%,0);}  to {-webkit-transform: translate3d(0,-105%,0);}}
@-moz-keyframes     slideOutDown {from {-moz-transform: translate3d(0,0%,0);}     to {-moz-transform: translate3d(0,-105%,0);}}
@-o-keyframes       slideOutDown {from {-o-transform: translate3d(0,0%,0);}       to {-o-transform: translate3d(0,-105%,0);}}

.animation-maximise-dashboard-toolbar {
    animation: maximise-dt 0.2s;
    -webkit-animation: maximise-dt 0.2s;
    -moz-animation: maximise-dt 0.2s;
    -o-animation: maximise-dt 0.2s;
}

@keyframes                  maximise-dt { from { left:17%; } to { left:0%; } }
@-webkit-keyframes          maximise-dt { from { left:17%; } to { left:0%; } }
@-moz-keyframes             maximise-dt { from { left:17%; } to { left:0%; } }
@-o-keyframes               maximise-dt { from { left:17%; } to { left:0%; } }
    
.animation-minimise-dashboard-toolbar {
    animation: minimise-dt 0.2s;
    -webkit-animation: minimise-dt 0.2s;
    -moz-animation: minimise-dt 0.2s;
    -o-animation: minimise-dt 0.2s;
}

@keyframes                  minimise-dt { from { left:0%; } to { left:17%; } }
@-webkit-keyframes          minimise-dt { from { left:0%; } to { left:17%; } }
@-moz-keyframes             minimise-dt { from { left:0%; } to { left:17%; } }
@-o-keyframes               minimise-dt { from { left:0%; } to { left:17%; } }

.showSettingsDropDown {
    animation: settingsShow 0.3s;
    -webkit-animation: settingsShow 0.3s;
    -moz-animation: settingsShow 0.3s;
    -o-animation: settingsShow 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    -ms-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    visibility: visible !important;
}

@keyframes          settingsShow {from {transform: translate3d(0,-100%,0); }           to {transform: translate3d(0,0%,0); }}
@-webkit-keyframes  settingsShow {from {-webkit-transform: translate3d(0,-100%,0); }   to {-webkit-transform: translate3d(0,0%,0); }}
@-moz-keyframes     settingsShow {from {-moz-transform: translate3d(0,-100%,0); }      to {-moz-transform: translate3d(0,0%,0); }}
@-o-keyframes       settingsShow {from {-o-transform: translate3d(0,-100%,0); }        to {-o-transform: translate3d(0,0%,0); }}

.hideSettingsDropDown {
    animation: settingsHide 0.3s;
    -webkit-animation: settingsHide 0.3s;
    -moz-animation: settingsHide 0.3s;
    -o-animation: settingsHide 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          settingsHide {from {transform: translate3d(0,0%,0); }           to {transform: translate3d(0,-200%,0); }}
@-webkit-keyframes  settingsHide {from {-webkit-transform: translate3d(0,0%,0); }   to {-webkit-transform: translate3d(0,-200%,0); }}
@-moz-keyframes     settingsHide {from {-moz-transform: translate3d(0,0%,0); }      to {-moz-transform: translate3d(0,-200%,0); }}
@-o-keyframes       settingsHide {from {-o-transform: translate3d(0,0%,0); }        to {-o-transform: translate3d(0,-200%,0); }}

.showWebpartOptions {
    animation: webpartSettingsShow 0.3s;
    -webkit-animation: webpartSettingsShow 0.3s;
    -moz-animation: webpartSettingsShow 0.3s;
    -o-animation: webpartSettingsShow 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          webpartSettingsShow {from {transform: translate3d(0,-100%,0); }           to {transform: translate3d(0,0%,0); }}
@-webkit-keyframes  webpartSettingsShow {from {-webkit-transform: translate3d(0,-100%,0); }   to {-webkit-transform: translate3d(0,0%,0); }}
@-moz-keyframes     webpartSettingsShow {from {-moz-transform: translate3d(0,-100%,0); }      to {-moz-transform: translate3d(0,0%,0); }}
@-o-keyframes       webpartSettingsShow {from {-o-transform: translate3d(0,-100%,0); }        to {-o-transform: translate3d(0,0%,0); }}

.shrinkCanvas {
    animation: shrinkCanvas 0.3s;
    -webkit-animation: shrinkCanvas 0.3s;
    -moz-animation: shrinkCanvas 0.3s;
    -o-animation: shrinkCanvas 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          shrinkCanvas {from {top: 50px; }           to {top: 100px; }}
@-webkit-keyframes  shrinkCanvas {from {top: 50px; }           to {top: 100px; }}
@-moz-keyframes     shrinkCanvas {from {top: 50px; }           to {top: 100px; }}
@-o-keyframes       shrinkCanvas {from {top: 50px; }           to {top: 100px; }}

.expandCanvas {
    animation: expandCanvas 0.3s;
    -webkit-animation: expandCanvas 0.3s;
    -moz-animation: expandCanvas 0.3s;
    -o-animation: expandCanvas 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          expandCanvas {from {top: 100px; }           to {top: 50px; }}
@-webkit-keyframes  expandCanvas {from {top: 100px; }           to {top: 50px; }}
@-moz-keyframes     expandCanvas {from {top: 100px; }           to {top: 50px; }}
@-o-keyframes       expandCanvas {from {top: 100px; }           to {top: 50px; }}

.hideWebpartOptions {
    animation: webpartSettingsHide 0.3s;
    -webkit-animation: webpartSettingsHide 0.3s;
    -moz-animation: webpartSettingsHide 0.3s;
    -o-animation: webpartSettingsHide 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          webpartSettingsHide {from {transform: translate3d(0,0%,0); visibility: visible; }           to {transform: translate3d(0,-100%,0);visibility: hidden; }}
@-webkit-keyframes  webpartSettingsHide {from {-webkit-transform: translate3d(0,0%,0); visibility: visible; }   to {-webkit-transform: translate3d(0,-100%,0); visibility: hidden; }}
@-moz-keyframes     webpartSettingsHide {from {-moz-transform: translate3d(0,0%,0); visibility: visible; }      to {-moz-transform: translate3d(0,-100%,0); visibility: hidden; }}
@-o-keyframes       webpartSettingsHide {from {-o-transform: translate3d(0,0%,0);visibility: visible; }        to {-o-transform: translate3d(0,-100%,0); visibility: hidden; }}

/* Date Range Scrolling */
.scrollDateRangeBack {
    animation: scrollDateRangeBack 0.3s;
    -webkit-animation: scrollDateRangeBack 0.3s;
    -moz-animation: scrollDateRangeBack 0.3s;
    -o-animation: scrollDateRangeBack 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          scrollDateRangeBack {from {transform: translate3d(0,0,0); }           to {transform: translate3d(300px,0,0); }}
@-webkit-keyframes  scrollDateRangeBack {from {-webkit-transform: translate3d(0,0,0); }   to {-webkit-transform:  translate3d(300px,0,0); }}
@-moz-keyframes     scrollDateRangeBack {from {-moz-transform: translate3d(0,0,0); }      to {-moz-transform:  translate3d(300px,0,0); }}
@-o-keyframes       scrollDateRangeBack {from {-o-transform: translate3d(0,0,0); }        to {-o-transform:  translate3d(300px,0,0); }}

.scrollDateRangeForward {
    animation: scrollDateRangeForward 0.3s;
    -webkit-animation: scrollDateRangeForward 0.3s;
    -moz-animation: scrollDateRangeForward 0.3s;
    -o-animation: scrollDateRangeForward 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          scrollDateRangeForward {from {transform: translate3d(0,0,0); }           to {transform: translate3d(-300px,0,0); }}
@-webkit-keyframes  scrollDateRangeForward {from {-webkit-transform: translate3d(0,0,0); }   to {-webkit-transform:  translate3d(-300px,0,0); }}
@-moz-keyframes     scrollDateRangeForward {from {-moz-transform: translate3d(0,0,0); }      to {-moz-transform:  translate3d(-300px,0,0); }}
@-o-keyframes       scrollDateRangeForward {from {-o-transform: translate3d(0,0,0); }        to {-o-transform:  translate3d(-300px,0,0); }}

/* Sub-Chart */
.sub-chart-body.showSubChart {
    animation: showSubChart 0.3s;
    -webkit-animation: showSubChart 0.3s;
    -moz-animation: showSubChart 0.3s;
    -o-animation: showSubChart 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          showSubChart {from {width: 0; }           to {width: 80%; }}
@-webkit-keyframes  showSubChart {from {width: 0; }           to {width: 80%; }}
@-moz-keyframes     showSubChart {from {width: 0; }           to {width: 80%; }}
@-o-keyframes       showSubChart {from {width: 0; }           to {width: 80%; }}

.sub-chart-body.showSubChartWithFilters {
    animation: showSubChartWithFilters 0.3s;
    -webkit-animation: showSubChartWithFilters 0.3s;
    -moz-animation: showSubChartWithFilters 0.3s;
    -o-animation: showSubChartWithFilters 0.3s;
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes          showSubChartWithFilters {from {width: 0; }           to { width: 50%; }}
@-webkit-keyframes  showSubChartWithFilters {from {width: 0; }           to { width: 50%; }}
@-moz-keyframes     showSubChartWithFilters {from {width: 0; }           to { width: 50%; }}
@-o-keyframes       showSubChartWithFilters {from {width: 0; }           to { width: 50%; }}

.sub-chart-body.hideSubChart {
    animation: hideSubChart 0.3s;
    -webkit-animation: hideSubChart 0.3s;
    -moz-animation: hideSubChart 0.3s;
    -o-animation: hideSubChart 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          hideSubChart {from {width: 70%; }           to {width: 0; }}
@-webkit-keyframes  hideSubChart {from {width: 70%; }           to {width: 0; }}
@-moz-keyframes     hideSubChart {from {width: 70%; }           to {width: 0; }}
@-o-keyframes       hideSubChart {from {width: 70%; }           to {width: 0; }}

.sub-chart-body.hideSubChartWithFilters {
    animation: hideSubChartWithFilters 0.3s;
    -webkit-animation: hideSubChartWithFilters 0.3s;
    -moz-animation: hideSubChartWithFilters 0.3s;
    -o-animation: hideSubChartWithFilters 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          hideSubChartWithFilters {from {width: 50%;}           to {width: 0;  }}
@-webkit-keyframes  hideSubChartWithFilters {from {width: 50%;}           to {width: 0;  }}
@-moz-keyframes     hideSubChartWithFilters {from {width: 50%;}           to {width: 0;  }}
@-o-keyframes       hideSubChartWithFilters {from {width: 50%;}           to {width: 0;  }}

.hideMainChart {
    animation: hideMainChart 0.3s;
    -webkit-animation: hideMainChart 0.3s;
    -moz-animation: hideMainChart 0.3s;
    -o-animation: hideMainChart 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          hideMainChart {from {width: 100%; }           to {width: 20%; }}
@-webkit-keyframes  hideMainChart {from {width: 100%; }           to {width: 20%; }}
@-moz-keyframes     hideMainChart {from {width: 100%; }           to {width: 20%; }}
@-o-keyframes       hideMainChart {from {width: 100%; }           to {width: 20%; }}

.chart-body.show-filter-options.bottom.hideMainChartWithFilters,
.chart-body.show-filter-options.top.hideMainChartWithFilters {
    animation: hideMainChartWithFiltersTop 0.3s;
    -webkit-animation: hideMainChartWithFiltersTop 0.3s;
    -moz-animation: hideMainChartWithFiltersTop 0.3s;
    -o-animation: hideMainChartWithFiltersTop 0.3s;
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
} 

@keyframes              hideMainChartWithFiltersTop {from { width: 100% }           to {width: 50%; }} 
@-webkit-keyframes      hideMainChartWithFiltersTop {from { width: 100% }           to {width: 50%; }} 
@-moz-keyframes         hideMainChartWithFiltersTop {from { width: 100% }           to {width: 50%; }}
@-o-keyframes           hideMainChartWithFiltersTop {from { width: 100% }           to {width: 50%; }}

.chart-body.show-filter-options.right.hideMainChartWithFilters,
.chart-body.show-filter-options.left.hideMainChartWithFilters {
    animation: hideMainChartWithFiltersSide 0.3s;
    -webkit-animation: hideMainChartWithFiltersSide 0.3s;
    -moz-animation: hideMainChartWithFiltersSide 0.3s;
    -o-animation: hideMainChartWithFiltersSide 0.3s;
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
} 

@keyframes              hideMainChartWithFiltersSide {from { width: 80% }           to {width: 30%; }} 
@-webkit-keyframes      hideMainChartWithFiltersSide {from { width: 80% }           to {width: 30%; }} 
@-moz-keyframes         hideMainChartWithFiltersSide {from { width: 80% }           to {width: 30%; }}
@-o-keyframes           hideMainChartWithFiltersSide {from { width: 80% }           to {width: 30%; }} 

  
  .chart-body.showMainChart {
    animation: showMainChart 0.3s;
    -webkit-animation: showMainChart 0.3s;
    -moz-animation: showMainChart 0.3s;
    -o-animation: showMainChart 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
} 
  
  @keyframes showMainChart {from {width: 20%; }           to {width: 100%; }} 
  @-webkit-keyframes showMainChart {from {width: 20%; }           to {width: 100%; }} 
  @-moz-keyframes showMainChart {from {width: 20%; }           to {width: 100%; }} 
  @-o-keyframes showMainChart {from {width: 20%; }           to {width: 100%; }}


.chart-body.show-filter-options.left.showMainChartWithFilters,
.chart-body.show-filter-options.right.showMainChartWithFilters {
    z-index:100;
    animation: showMainChartWithFilterSide 0.3s;
    -webkit-animation: showMainChartWithFilterSide 0.3s;
    -moz-animation: showMainChartWithFilterSide 0.3s;
    -o-animation: showMainChartWithFilterSide 0.3s;
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
} 

@keyframes showMainChartWithFilterSide {from {width: 30%; }           to { width: 80%; }} 
@-webkit-keyframes showMainChartWithFilterSide {from {width: 30%; }           to { width: 80%; }} 
@-moz-keyframes showMainChartWithFilterSide {from {width: 30%; }           to { width: 80%; }} 
@-o-keyframes showMainChartWithFilterSide {from {width: 30%; }           to { width: 80%; }}

.chart-body.show-filter-options.top.showMainChartWithFilters,
.chart-body.show-filter-options.bottom.showMainChartWithFilters {
    z-index: 100;
    animation: showMainChartWithFilterTop 0.3s;
    -webkit-animation: showMainChartWithFilterTop 0.3s;
    -moz-animation: showMainChartWithFilterTop 0.3s;
    -o-animation: showMainChartWithFilterTop 0.3s;
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
} 

@keyframes showMainChartWithFilterTop {from {width: 50%; }           to { width: 100%; }} 
@-webkit-keyframes showMainChartWithFilterTop {from {width: 50%; }           to { width: 100%; }} 
@-moz-keyframes showMainChartWithFilterTop {from {width: 50%; }           to { width: 100%; }} 
@-o-keyframes showMainChartWithFilterTop {from {width: 50%; }           to { width: 100%; }} 


.show-designer-summary {
    animation: showDesignerSummary 0.3s;
    -webkit-animation: showDesignerSummary 0.3s;
    -moz-animation: showDesignerSummary 0.3s;
    -o-animation: showDesignerSummary 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
} 

@keyframes showDesignerSummary {from {left: -300px; }           to { left: 0; }} 
@-webkit-keyframes showDesignerSummary {from {left: -300px; }           to { left: 0; }}
@-moz-keyframes showDesignerSummary {from {left: -300px; }           to { left: 0; }} 
@-o-keyframes showDesignerSummary {from {left: -300px; }           to { left: 0; }} 

.show-designer-editor {
    animation: showDesignerEditor 0.3s;
    -webkit-animation: showDesignerEditor 0.3s;
    -moz-animation: showDesignerEditor 0.3s;
    -o-animation: showDesignerEditor 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
} 

@keyframes showDesignerEditor {from {left: 0; }           to { left: -300px; }} 
@-webkit-keyframes showDesignerEditor {from {left: 0; }           to { left: -300px; }} 
@-moz-keyframes showDesignerEditor {from {left: 0; }           to { left: -300px; }} 
@-o-keyframes showDesignerEditor {from {left: 0; }           to { left: -300px; }}