@nyris/nyris-webapp 0.3.6 → 0.3.9

package/src/App.tsx

@@ -1,41 +1,42 @@
-import './App.css';
-import React, {useEffect, useState} from 'react';
-import Result from './components/Result';
-import ExampleImages from './components/ExampleImages';
-import Feedback from './components/Feedback';
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Animate, NodeGroup } from "react-move";
+import { useDropzone} from "react-dropzone";
+import {
+  Box,
+  Snackbar
+} from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import classNames from "classnames";
+import { loadFilters } from "./actions/searchActions";
+import Result from "./components/Result";
+import Sidebar from "./components/Sidebar";
+import Header from "./components/Header";
+import Feedback from "./components/Feedback";
 import CategoryFilter from "./components/CategoryFilter";
-import PredictedCategories from "./components/PredictedCategories";
 import Codes from "./components/Codes";
-import {Code, CategoryPrediction, RectCoords, Region, cadExtensions, Filter} from "@nyris/nyris-api";
-import { useDropzone} from "react-dropzone";
-import classNames from 'classnames';
-import {Animate, NodeGroup} from "react-move";
-import {AppSettings, MDSettings, CanvasWithId} from "./types";
-import {NyrisAppPart, NyrisFeedbackState} from "./actions/nyrisAppActions";
+import PredictedCategories from "./components/PredictedCategories";
+import ExampleImages from "./components/ExampleImages";
 import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
-import {Drawer, Snackbar, Toolbar} from "@material-ui/core";
-import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
-import { dispatch } from 'rxjs/internal/observable/pairs';
-import { useDispatch } from 'react-redux';
-import { loadFilters } from './actions/searchActions';
-import Sidebar from './components/Sidebar';
+import { RectCoords, cadExtensions, CategoryPrediction, Code, Region, Filter} from "@nyris/nyris-api";
+import { AppSettings, CanvasWithId, MDSettings } from "./types";
+import { NyrisAppPart, NyrisFeedbackState } from "./actions/nyrisAppActions";
 
 export interface AppHandlers {
-    onExampleImageClick: (url: string) => void,
-    onImageClick: (position: number, url: string) => void,
-    onLinkClick: (position: number, url: string) => void,
-    onFileDropped: (file: File) => void,
-    onCaptureComplete: (image: HTMLCanvasElement) => void,
-    onCaptureCanceled: () => void,
-    onSelectFile: (f: File) => void,
-    onCameraClick: () => void,
-    onShowStart: () => void,
-    onSelectionChange: (r: RectCoords) => void,
-    onPositiveFeedback: () => void,
-    onNegativeFeedback: () => void,
-    onCloseFeedback: () => void
+  onExampleImageClick: (url: string) => void,
+  onImageClick: (position: number, url: string) => void,
+  onLinkClick: (position: number, url: string) => void,
+  onFileDropped: (file: File) => void,
+  onCaptureComplete: (image: HTMLCanvasElement) => void,
+  onCaptureCanceled: () => void,
+  onSelectFile: (f: File) => void,
+  onCameraClick: () => void,
+  onShowStart: () => void,
+  onSelectionChange: (r: RectCoords) => void,
+  onPositiveFeedback: () => void,
+  onNegativeFeedback: () => void,
+  onCloseFeedback: () => void
 }
-
 export interface AppProps {
     search: {
         results: any[],
@@ -48,7 +49,8 @@ export interface AppProps {
         regions: Region[],
         previewSelection: RectCoords,
         toastErrorMessage?: string,
-        filters: Filter[]
+        filters: Filter[],
+        selectedFilters: Map<string,string[]>
     },
     previewImage?: CanvasWithId,
     settings: AppSettings,
@@ -59,70 +61,54 @@ export interface AppProps {
     mdSettings: MDSettings
 }
 
-function Alert(props: AlertProps) {
-    return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-const App: React.FC<AppProps> = ({
-                                     search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters},
-                                     showPart, settings, handlers, loading, previewImage, feedbackState
-                                 }) => {
+const Demo2: React.FC<AppProps> = ({
+    search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters, selectedFilters},
+    showPart, settings, handlers, loading, previewImage, feedbackState
+}) => {
+    
     const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
+    
     const minPreviewHeight = 400;
     const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
     const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
-    const acceptTypes =
-        [ 'image/*' ].concat(
-            settings.cadSearch ? cadExtensions : []
-        ).join(',');
     const [toastOpen, setToastOpen] = useState(false);
     const dispatch = useDispatch();
 
+    const acceptTypes =[ 'image/*' ].concat( settings.cadSearch ? cadExtensions : [] ).join(',');
+
+
     useEffect(() => {
         if (toastErrorMessage !== '') {
             setToastOpen(true);
         }
     }, [toastErrorMessage])
-   
+ 
     useEffect(() =>{
     dispatch(loadFilters());
-    }, [])
-
-    return (
-        <div>
-        {showPart === 'camera' &&
+    }, [showPart, dispatch])
+    
+  return (
+    <React.Fragment>
+      <Header/>
+      <div className="wrapperBody">    
+      <Sidebar filters={filters} selectedFilters={selectedFilters}/>
+        
+      <div className="mainContent">
+      {showPart === 'camera' &&
         <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
                   useAppText='Use default camera app'/>}
-        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">
-            <div className="navWrap">
-                <div>
-                    <section id="branding" style={{paddingLeft: '50px',marginLeft: '70px'}}/>
-                    <div id="menu" className="menuWrap" role="navigation">
-                        <ul>
-                            <li><a href="https://nyris.io/imprint/#privacy" target="_blank"
-                                   rel="noopener noreferrer">Privacy Policy</a></li>
-                            <li><a href="https://nyris.io/" target="_blank" rel="noopener noreferrer">Visit our
-                                Website</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+
+              
+        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">           
             <div   {...getRootProps({
                 onClick: e => {
                     e.stopPropagation();
                 }
             })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
-                <section style={{width:'350px', height: '100%' , marginTop: '100px', borderRight:'4px solid rgba(255, 255, 255, .12)'}}>
-                   <Toolbar>
-
-                   <div> Select Filters </div>
-                   </Toolbar>
-                   { filters && filters.length > 0 ? <Sidebar filters={filters}/> : <div></div> }
-                    
-   
-                </section>
-                <div className="contentWrap" style={{marginLeft: '50px', marginTop:'50px'}}>
-                    <section className="uploadImage">
+             
+                <div className={classNames('contentWrap')}>
+                <Box display="flex" flexDirection="column"  justifyContent="center" alignItems="center"  minHeight="100vh">
+                <section className="uploadImage">
                         <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
                                capture="environment" onClick={handlers.onCameraClick}/>
                         <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
@@ -139,18 +125,23 @@ const App: React.FC<AppProps> = ({
                             <img src="./images/ic_cam_large.svg" alt="Camera"/>
                         </div>
                         <label htmlFor="capture" className="btn primary onMobile"
-                               style={{marginBottom: '2em', width: '22em'}}>
+                               style={{marginBottom: '2em', width: '12em'}}>
                             <span className="onMobile">Take a picture</span>
                         </label>
                         <br/>
-                        <label htmlFor="select_file" className="btn primary" style={{width: '22em'}}>
+                        <label htmlFor="select_file" className="btn primary" style={{width: '12em'}}>
                             <span>Select a file</span>
                         </label>
                         <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
-                    </section>
-                    <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
+                </section>
+                <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
+                  
+                </Box>
                 </div>
             </div>
+            
+            <div className="headerSeparatorTop"/>
+            <div className="headerSeparatorBack"/>
             <div className={classNames('tryDifferent', {hidden: showPart !== 'results'})}
                  onClick={handlers.onShowStart}>
                 <div className="icIcon">
@@ -158,16 +149,13 @@ const App: React.FC<AppProps> = ({
                 <div className="textDesc"> Try a different image</div>
                 <br style={{clear: 'both'}}/>
             </div>
-            <div className="headerSeparatorTop"/>
-            <div className="headerSeparatorBack"/>
         </div>
-
-        <section
-            className={classNames('results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
+        
+         <section className={classNames({hideResults: showPart !== 'results'},'results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
             {errorMessage &&
             <div className="errorMsg">
                 {errorMessage}
-                <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
+                <div style={{textAlign: 'center', fontSize: '0ß.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
                 </div>
             </div>
             }
@@ -236,8 +224,10 @@ const App: React.FC<AppProps> = ({
             <Alert onClose={() => setToastOpen(false)} severity="error">
                 {toastErrorMessage}
             </Alert>
-        </Snackbar>
-
+        </Snackbar> 
+       
+      </div>
+        </div> 
         <section className="footnote">
             <div className="wrapper">
                 © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
@@ -246,11 +236,9 @@ const App: React.FC<AppProps> = ({
         </section>
         <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
                   onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
-    </div>
-    );
-
-};
-
-
+    
+    </React.Fragment>
+  );
+}
 
-export default App;
+export default Demo2;

package/src/actions/searchActions.ts

@@ -25,9 +25,7 @@ export type SearchAction =
     | { type: 'LOAD_FILTERS_SUCCESS', filters: Filter[]}
     | { type: 'LOAD_FILTERS_FAIL', reason: string, exception: any}
     | { type: 'ADD_TO_SELECTEDFILTERS', key: string, value : string}
-    | { type: 'ADD_TO_SELECTEDFILTERS_SUCCESS', key: string , value : string}
     | { type: 'REMOVE_FROM_SELECTEDFILTERS', key: string , value: string}
-    | { type: 'REMOVE_FROM_SELECTEDFILTERS_SUCCESS', key: string , value: string}
     | { type: 'CLEAR_SELECTED_FILTERS'}
 
 
@@ -166,12 +164,12 @@ export const reducer = (state : SearchState = initialState, action: SearchAction
                 ...state,
                 errorMessage: action.exception.response.data.detail
             }
-        case "ADD_TO_SELECTEDFILTERS_SUCCESS":
+        case "ADD_TO_SELECTEDFILTERS":
             return {
                 ...state,
                 selectedFilters : ADDtoSelectedfilters(state.selectedFilters, action.key, action.value)
             }
-        case "REMOVE_FROM_SELECTEDFILTERS_SUCCESS":
+        case "REMOVE_FROM_SELECTEDFILTERS":
             return {
                 ...state,
                 selectedFilters : RemoveFromSelectedFilters(state.selectedFilters, action.key, action.value)
@@ -214,5 +212,6 @@ function RemoveFromSelectedFilters(selectedFilters: Map<string, string[]>, key:
                 }
                     
             }  
+            console.log(selectedFilters);
             return selectedFilters;
 }

package/src/components/FiltersList.tsx

@@ -1,34 +1,28 @@
 
-import React, { useState } from 'react';
+import React from 'react';
 import {Filter} from '../../../nyris-api/index';
 import { addToSelectedFilters, removeFromSelectedFilters } from '../actions/searchActions';
 import {  useDispatch } from 'react-redux';
 import { RiLayoutGridLine} from 'react-icons/ri';
 
 interface FilterProps {
-    filter : Filter
+    filter : Filter,
+    selectedValues?: string[]
 }
 
 
 
-const FiltersList : React.FC<FilterProps> = ({filter})=>{
-    const [checked, setChecked] = useState<string[]>([]);
+const FiltersList : React.FC<FilterProps> = ({filter, selectedValues})=>{
     const dispatch = useDispatch();
 
-    const onFilterChanged=(e: React.ChangeEvent<HTMLInputElement>,value:string) =>{
-       var updatedList = [...checked];
-       console.log(e.target.checked);
+    const onFilterChanged=(e: React.ChangeEvent<HTMLInputElement>,value:string) =>{     
        if (e.target.checked) {
         if(filter.key)
          dispatch(addToSelectedFilters(filter.key , value));
-          updatedList = [...checked, value];
         } else {
             if(filter.key)
             dispatch(removeFromSelectedFilters(filter.key, value));
-        updatedList.splice(checked.indexOf(value), 1);
        }
-       setChecked(updatedList);
-       console.log(updatedList);
     }
     
     if(filter && filter.values && filter.key && filter.values.length > 0){   
@@ -43,13 +37,17 @@ const FiltersList : React.FC<FilterProps> = ({filter})=>{
                <div className='item'>
                <div className="list-container">
        
-             {filter.values.slice(0, 6).map((item, index) => (
-            <div key={index}>
-            <input value={item} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />
-            
-            <label className='itemLabel'>{item}</label>
-           </div>
-           ))}
+             {filter.values.slice(0, 6).map((item, index) => { 
+                  const checked = selectedValues && selectedValues.includes(item);        
+            return ( 
+              
+                <div key={index}>
+                 
+                <input value={item} checked={checked ? true: false} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />          
+                <label className='itemLabel'>{item}</label>
+               </div>
+               )
+            })}
        </div>  
                </div>
                                  

package/src/components/Sidebar.tsx

@@ -4,10 +4,11 @@ import { Filter } from '../../../nyris-api/index';
 import  FiltersList from './FiltersList';
 
 interface SidebarProps {
-    filters: Filter[]
+    filters: Filter[],
+    selectedFilters: Map<string, string[]>
 }
 
-const Sidebar: React.FC<SidebarProps> = ({filters}) =>{
+const Sidebar: React.FC<SidebarProps> = ({filters, selectedFilters}) =>{
   const [isExpanded, setIsExpanded] = useState(false);
   const handleToggler =()=>{
       if(isExpanded){
@@ -25,8 +26,9 @@ const Sidebar: React.FC<SidebarProps> = ({filters}) =>{
             <h1 className={isExpanded ? "sidebar-logo" : "sidebar-logo collapsedHide"}> Select Filters </h1>
             </div>
             <div className={isExpanded ? "Sidebar-items" : "Sidebar-items collapsedHide"}>
-            {filters && filters.map((x) => { 
-               return <FiltersList filter={x}/>
+            {filters && filters.map((x) => {
+                let selectedValues =  x.key ? selectedFilters.get(x.key): undefined
+               return <FiltersList filter={x} selectedValues={selectedValues}/>
                })
             }   
             </div>

package/src/epics/search.ts

@@ -145,28 +145,7 @@ const loadFilters: EpicConf = (action$, state$, {api}) => action$.pipe(
             let filters = await api.getFilters();
     
             filters= filters.slice(0, 3);
-            console.log(filters);
-            // let filters : Filter[] = [
-            //     {
-            //         filterType: 'MachineType',
-            //         filterValues : [
-            //              "MachineType1",
-            //              "MachineType2",
-            //              "MachineType3",
-            //              "MachineType4",
-            //              "MachineType5"
-            //        ]
-            //     },
-            //     {
-            //         filterType: 'Color',
-            //         filterValues :[
-            //             "Red",
-            //             "Green",
-            //             "Blue",
-            //             "Yellow",
-            //             "Black"
-            //         ]
-            //     }];                            
+            console.log(filters);                                 
             return {type: 'LOAD_FILTERS_SUCCESS', filters };
 
         } catch (e) {
@@ -176,28 +155,10 @@ const loadFilters: EpicConf = (action$, state$, {api}) => action$.pipe(
     })
 );
 
-const addToSelectedFilters: EpicConf = (action$) => action$.pipe(
-    ofType('ADD_TO_SELECTEDFILTERS'),
-    switchMap(async (action) : Promise<AppAction> => {
-
-        if(action.type !== 'ADD_TO_SELECTEDFILTERS'){
-            throw new Error(`Wrong action type ${action.type}`);
-        }
-         if('key' in action && 'value' in action){
-         
-            let {key, value} = action;
-            console.log(key);
-            console.log(action);
-            return {type : 'ADD_TO_SELECTEDFILTERS_SUCCESS', key , value }
-         }
-         throw new Error(`Change filters action wrong properties ${Object.keys(action).join(',')}`);
-    })
-);
 
 export default combineEpics(
     imageSearch,
     regionSearch,
     loadFile,
     loadImage,
-    loadFilters,
-    addToSelectedFilters);
+    loadFilters);

package/src/index.css

@@ -553,7 +553,7 @@ a img.aligncenter {
 }
 
 .headSection {
-  position: absolute;
+  position: relative;
   width: 100%;
   height: 90vh;
   height: -webkit-calc(100vh - 30px);
@@ -648,7 +648,6 @@ a img.aligncenter {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-left: 35px;
   margin-top: 50px;
 }
 .dragAndDropActionArea:focus {
@@ -1474,8 +1473,9 @@ a img.aligncenter {
 }
 .mainContent{
   width: calc(100vh-230);
-  flex: 0 0 900px;
+  flex: 0 0 80%;
   flex-grow: 1;
+  position: inherit;
 }
 .sidebarContent {
   height: 100%;

package/src/index.tsx

@@ -34,7 +34,7 @@ import 'typeface-roboto';
 import {defaultMdSettings, defaultSettings} from "./defaults";
 import rootEpic from "./epics";
 import { createHashHistory } from 'history';
-import Demo2 from './Demo2';
+import App from './App';
 
 
 declare var settings: AppSettings;
@@ -91,6 +91,7 @@ history.listen((location, action) => {
     switch (location.pathname) {
         case '/results':
             store.dispatch({type: 'SHOW_RESULTS'});
+            store.dispatch({type: 'LOAD_FILTERS'});
             break;
         case '/':           
             store.dispatch({type: 'SHOW_START'});          
@@ -113,7 +114,8 @@ const mapStateToProps = (state: AppState) => ({
         duration: state.search.duration,
         requestId: state.search.requestId,
         toastErrorMessage: state.search.errorMessage,
-        filters: state.search.filters
+        filters: state.search.filters,
+        selectedFilters: state.search.selectedFilters
     },
     settings: state.settings,
     previewImage: state.search.requestImage,
@@ -189,7 +191,7 @@ let theme = createMuiTheme({
         }
     }
 });
-const SelectedApp = useMd ? AppMD : Demo2;
+const SelectedApp = useMd ? AppMD : App;
 const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(SelectedApp);
 
 ReactDOM.render(<Provider store={store}><MuiThemeProvider

package/build/static/css/main.2a76dc8a.chunk.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCAAkC,CAClC,wBACF,CAEA,KACE,yEAEF,CAEA,eACE,uBACF,CAEA,8BACE,eACF,CAEA,2ZACE,YAAa,CACb,SAAU,CACV,QAAS,CACT,QAAS,CACT,uBACF,CAEA,aACE,WACF,CAEA,oDACE,UAAW,CACX,YACF,CAEA,MACE,wBAAyB,CACzB,gBACF,CAEA,8EACE,aACF,CAEA,OACE,UACF,CAEA,oBACE,0BAA8B,CAC9B,2BACF,CAEA,oCACE,iBACF,CAEA,EACE,qBACF,CAEA,SACE,SAAU,CACV,gBAAiB,CACjB,aAAc,CAGd,QACF,CAEA,oBACE,YAAa,CACb,iBACF,CAEA,wCACE,SACF,CAEA,0CACE,oBACE,YACF,CACF,CAEA,gEACE,oBACE,YACF,CACF,CAEA,4BACE,SACF,CAEA,aACE,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CAGnB,YACF,CAEA,sBACE,sBACF,CAEA,cACE,aAAc,CAGd,WAAY,CACZ,UACF,CAEA,UACE,SAAU,CACV,UACF,CAEA,+DACE,UACE,UAAW,CACX,UACF,CACF,CAEA,WACE,SAAU,CACV,UACF,CAEA,QACE,iBACF,CAEA,cACE,SAAU,CACV,oBACF,CAEA,gEACE,iBACE,YACF,CACF,CAEA,+DACE,cACE,UACF,CACF,CAEA,yCACE,WACE,YACF,CACF,CAEA,mCACE,yBACF,CAEA,2BACE,mBACF,CAEA,uCACE,cACF,CAEA,iBACE,UACF,CAEA,WACE,eAAgB,CAChB,kBAAmB,CAEnB,oDAA+D,CAC/D,+GACF,CAEA,2CACE,YACF,CAEA,KACE,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,cAAe,CACf,gBAAiB,CACjB,wBAAyB,CACzB,oBAAqB,CACrB,iBAAkB,CAClB,WAAY,CACZ,eAAgB,CAChB,uBACF,CAEA,sBACE,YACF,CAEA,aACE,kBAAmB,CACnB,UACF,CAEA,mBACE,cAAe,CACf,UACF,CAEA,gBACE,2CACF,CAEA,sBACE,UACF,CAEA,uBAEE,iDAAqD,CAGrD,yBAA0B,CAC1B,2CACF,CAEA,6DACE,iBAAkB,CAClB,cAAe,CACf,cAAe,CACf,YAAa,CACb,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,kBACF,CAEA,WACE,kBAAmB,CACnB,yMAAiK,CACjK,eAAgB,CAChB,iBACF,CAEA,WACE,kBAAmB,CACnB,iMAAyJ,CACzJ,eAAgB,CAChB,iBACF,CAEA,WACE,kBAAmB,CACnB,6MAAqK,CACrK,eAAgB,CAChB,iBACF,CAEA,WACE,8BAA+B,CAC/B,sOAA8L,CAC9L,eAAgB,CAChB,iBACF,CAEA,WACE,8BAA+B,CAC/B,+PAAuN,CACvN,eAAgB,CAChB,iBACF,CAEA,kCACE,uBAA2B,CAC3B,6CAAiD,CACjD,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,iCAAkC,CAClC,kCAAmC,CACnC,0BAA2B,CAC3B,iCACF,CAEA,6BACE,eACF,CAEA,KACE,kBACF,CAEA,kBACE,aACF,CAEA,MACE,iBAAkB,CAClB,aACF,CAEA,GACE,cAAe,CACf,kBACF,CAEA,iBACE,aAAc,CACd,cACF,CAEA,GACE,cAAe,CACf,qBACF,CAEA,iBACE,aAAc,CACd,cACF,CAEA,UACE,eACF,CAEA,+DACE,YACE,YACF,CACF,CAEA,GACE,aAAc,CACd,cAAe,CACf,eAAgB,CAChB,qBACF,CAEA,GACE,cAAe,CACf,qBACF,CAEA,GACE,cAAe,CACf,qBACF,CAEA,GACE,cAAe,CACf,oBACF,CAEA,EACE,kBACF,CAEA,IACE,yBACF,CAEA,GACE,iBACF,CAEA,WACE,cAAe,CACf,WACF,CAEA,EACE,oBAAqB,CACrB,uBACF,CAEA,QACE,cAAe,CACf,sBACF,CAEA,MACE,eAAgB,CAChB,iBACF,CAEA,YACE,eAAgB,CAChB,iBAAkB,CAClB,kBACF,CAEA,WACE,sBACF,CAEA,6BACE,aAAc,CACd,eACF,CAEA,YACE,WAAY,CACZ,sBACF,CAEA,WACE,UAAW,CACX,sBACF,CAEA,iBACE,WAAY,CACZ,sBACF,CAEA,gCACE,sBACF,CAEA,gBACE,UACF,CAEA,kBACE,aAAc,CACd,gBAAiB,CACjB,iBACF,CAEA,YACE,eAAgB,CAChB,wBAAyB,CACzB,aAAc,CACd,oBAAqB,CACrB,iBACF,CAEA,4CACE,sBACF,CAEA,uBACE,sBACF,CAEA,gBACE,QAAS,CACT,WAAY,CACZ,QAAS,CACT,eAAgB,CAChB,SAAU,CACV,UACF,CAEA,8CACE,cAAe,CACf,gBAAiB,CACjB,QAAS,CACT,iBACF,CAEA,aACE,sBACE,uBACF,CAEA,EACE,wBAA0B,CAC1B,oBAAsB,CACtB,yBAA2B,CAC3B,0BACF,CAEA,YACE,yBACF,CAEA,cACE,2BACF,CAEA,kBACE,4BACF,CAEA,4DACE,UACF,CAEA,eACE,qBACF,CAEA,MACE,0BACF,CAEA,IACE,wBACF,CAEA,MACE,WACF,CAEA,QACE,SAAU,CACV,QACF,CAEA,MACE,sBACF,CACF,CAEA,yCACE,iBAAkB,CAClB,OAAQ,CACR,WAAY,CACZ,MAAO,CACP,UAAW,CACX,WAAY,CACZ,YAAa,CACb,kFACF,CAEA,yDACE,gyZACF,CAEA,oBACE,WAAY,CACZ,YAAa,CACb,iFACF,CAEA,4BACE,w6HACF,CAEA,aACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CAEZ,yBAA0B,CAC1B,kBAAmB,CACnB,qBACF,CAEA,oBACE,YAEF,CAEA,yCACE,aACE,gBACF,CACF,CAEA,sBACE,SAAU,CAGV,QACF,CAEA,SACE,UAAW,CACX,YAAa,CACb,iBAAkB,CAClB,YAAa,CACb,2CACF,CAEA,0BACE,iBAAkB,CAClB,SACF,CAEA,UACE,WAAY,CACZ,SACF,CAEA,aACE,QAAS,CACT,gBACF,CAEA,gBACE,UAAW,CACX,eAAgB,CAChB,QAAS,CACT,SACF,CAEA,kBACE,yBAA+B,CAC/B,sBAAuB,CACvB,cAAe,CACf,oBACF,CAEA,wBACE,UACF,CAEA,UACE,UAAW,CACX,UAAW,CACX,WAAY,CACZ,YAAa,CACb,w8FAAwD,CACxD,eAAgB,CAChB,oBAAqB,CACrB,uBACF,CAEA,yBACE,WACF,CAEA,uBACE,WAAY,CACZ,mBAAoB,CAGpB,YAAa,CAGb,kBAAmB,CAGnB,sBAAuB,CACvB,gBAAiB,CACjB,eACF,CACA,6BACE,SACF,CAEA,aAGE,aAAY,CACZ,eACF,CAEA,aACE,gBAAiB,CACjB,kBAAmB,CACnB,qCAA2C,CAC3C,cAAe,CACf,iBAAkB,CAClB,cAAe,CACf,2BAA+B,CAC/B,aAAc,CAEd,uBACF,CAEA,0CACE,aACE,cACF,CACF,CAEA,yCACE,aACE,cAAe,CACf,QAAS,CACT,WACF,CACF,CAEA,wBACE,cAAe,CACf,2BAA+B,CAC/B,oBACF,CAEA,0BACE,qCACF,CAEA,qBACE,iBAAkB,CAClB,UAAW,CACX,aAAc,CACd,QAAS,CACT,OAAQ,CACR,YAAa,CACb,MACF,CAEA,WACE,UAAW,CACX,WAAY,CACZ,SAAU,CACV,eAAgB,CAChB,iBAAkB,CAClB,UACF,CAEA,eACE,yBAA+B,CAC/B,cAAe,CACf,eACF,CAEA,yCACE,0BACE,QACF,CAEA,eACE,iBAAkB,CAClB,YAAa,CACb,UACF,CACF,CAEA,8BACE,eAAgB,CAChB,UAAW,CACX,aAAc,CACd,gCAAiC,CACjC,mBACF,CAEA,4CACE,kBACF,CAEA,kCACE,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CACjB,qBACF,CAEA,wCACE,cAAe,CACf,SACF,CAEA,SACE,kBACF,CAEA,sBACE,UACE,YACF,CACF,CAEA,0CACE,WACE,YACF,CACF,CAEA,8CACE,oBAAqB,CACrB,kBACF,CAEA,cACE,iBAAkB,CAClB,QAAW,CACX,QAAS,CACT,0BAA2B,CAC3B,WAAY,CACZ,WAAY,CACZ,iBAAkB,CAClB,iBAAkB,CAClB,YAAa,CACb,yBAA0B,CAC1B,kBAAmB,CACnB,cAAe,CACf,UAAW,CACX,eAAgB,CAChB,qBACF,CACA,qBACE,YACF,CAEA,gEACE,cACE,WACF,CACF,CAEA,+DACE,cACE,WACF,CACF,CAEA,+DACE,cACE,WACF,CACF,CAEA,yCACE,cACE,SAAU,CACV,mBAAoB,CACpB,gBACF,CACF,CAEA,sBACE,UAAW,CACX,WAAY,CACZ,gEAA4C,CAC5C,iBACF,CAEA,8BACE,wfACF,CAEA,oBACE,cACF,CAEA,cACE,iBAAkB,CAGlB,0BAA2B,CAC3B,aACF,CAEA,SACE,iBACF,CACA,uBACE,WAAY,CACZ,eAAgB,CAChB,gBACF,CACA,aACE,YACF,CAEA,kBAEE,6BAA8B,CAC9B,WACF,CAEA,yCACE,kBACE,SACF,CACF,CAEA,yBACE,YAAa,CACb,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,MAAO,CACP,QAAS,CACT,kBAAmB,CACnB,SAAU,CACV,iBACF,CAEA,wBACE,GAEE,mBACF,CACA,GAEE,uBACF,CACF,CAEA,gBACE,GAEE,mBACF,CACA,GAEE,uBACF,CACF,CAEA,kCACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,iBAAkB,CAClB,gBAAiB,CACjB,iBAAkB,CAClB,UAAW,CACX,WAAY,CAEZ,mCAAqC,CAArC,iCAAqC,CACrC,yCAA0C,CAC1C,iCACF,CAEA,WACE,WAAY,CACZ,gBAAiB,CACjB,UAAW,CACX,kBAAmB,CACnB,iBAAkB,CAClB,eAAgB,CAChB,qCAAyC,CACzC,cAAe,CACf,eACF,CAEA,0CACE,qCACE,UACF,CACF,CAEA,gEACE,WACE,WAAY,CACZ,gBACF,CAEA,qCACE,UACF,CACF,CAEA,+DACE,WACE,WAAY,CACZ,gBACF,CAEA,qCACE,UACF,CACF,CAEA,+DACE,WACE,WAAY,CACZ,gBACF,CAEA,qCACE,UACF,CACF,CAEA,qBACE,iBAAkB,CAClB,eAAgB,CAChB,iBAAkB,CAClB,yCACF,CAEA,yCACE,WACE,UAAW,CACX,aACF,CAEA,uCACE,UAAW,CACX,SAAU,CACV,eACF,CACF,CAEA,2BACE,UAAW,CACX,aAAc,CACd,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,8BACE,iBAAkB,CAClB,MAAO,CACP,QAAS,CACT,SAAU,CACV,OACF,CAEA,yBACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,cAAe,CACf,eAAgB,CAChB,WAAY,CACZ,qBACF,CAEA,6BACE,aACF,CAEA,yCACE,+CACE,UAAW,CACX,SAAU,CACV,UAAW,CACX,uCACF,CAEA,UACE,iBACF,CACF,CAEA,yCACE,aACF,CAEA,wCACE,aACF,CAEA,oDACE,eAAgB,CAChB,aACF,CAEA,4CACE,kBACF,CAEA,4CACE,cAAe,CACf,oBAAqB,CACrB,yBAA0B,CAC1B,wBAAyB,CACzB,cAAe,CACf,iBAAkB,CAClB,0FAAsE,CACtE,kCACF,CAEA,oDACE,6XACF,CAEA,kDACE,qFAAiE,CACjE,wBAAyB,CACzB,aACF,CAEA,0DACE,qWACF,CAEA,yCACE,0BACE,SAAU,CACV,aAAc,CACd,gBAAiB,CACjB,UAAW,CACX,iBACF,CAEA,oCACE,UAAW,CACX,SAAU,CACV,eAAgB,CAChB,wCACF,CAEA,4CACE,UAAW,CACX,SAAU,CACV,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,QAAS,CACT,UAAW,CAGX,YAAa,CAGb,kBAAmB,CAEnB,cACF,CACF,CAEA,sCACE,sCACF,CAEA,mBACE,kBAAmB,CACnB,cAAe,CACf,uBAA2B,CAC3B,iBACF,CAEA,qBACE,uBAA2B,CAC3B,eACF,CAEA,2BACE,uBACF,CAEA,UACE,cAAe,CACf,OAAQ,CACR,QAAS,CACT,MAAO,CACP,0BAA2B,CAC3B,SAAU,CACV,kBAAmB,CACnB,YAAa,CACb,cAAe,CACf,2BACF,CAEA,mBACE,cACF,CAEA,YACE,oBAAqB,CACrB,iBACF,CAEA,yCACE,YACE,aAAc,CACd,kBACF,CACF,CAEA,eACE,eAAgB,CAChB,iBAAkB,CAClB,oBAAqB,CACrB,WAAY,CACZ,YACF,CAEA,uBACE,cAAe,CACf,2BACF,CAEA,6BACE,kBAAmB,CACnB,oCAAwC,CACxC,UACF,CAEA,yBACE,cACF,CAEA,+BACE,kBAAmB,CACnB,gCAAoC,CACpC,UACF,CAEA,uBACE,eAAgB,CAChB,2BACF,CAEA,6BACE,kBAAmB,CACnB,oCAAwC,CACxC,UACF,CAEA,qBACE,cACF,CAEA,kCACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QACF,CAEA,iDACE,iBAAkB,CAClB,UAAW,CACX,OAAQ,CAGR,0BAA2B,CAC3B,UAAW,CACX,WAAY,CACZ,mFAA+D,CAC/D,WAAY,CACZ,WAAY,CAEZ,uBACF,CAEA,uDACE,cAAe,CACf,SACF,CAEA,2BACE,cAAe,CACf,iBAAkB,CAClB,aAAc,CACd,gBACF,CAEA,yCACE,iDACE,UAAW,CACX,QAAS,CAGT,uBACF,CAEA,2BACE,aACF,CACF,CAEA,oEACE,aACF,CAEA,4GACE,aACF,CAEA,0BACE,YAAa,CACb,iBAAkB,CAClB,cAAe,CACf,cAAe,CACf,YAAa,CACb,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,kBACF,CAEA,6DACE,aACF,CAWA,YAGE,YAAa,CACb,iBAGF,CAEA,uBARE,sBAAuB,CACvB,eAAgB,CAGhB,kBAAmB,CACnB,cAUF,CAPA,WAGE,YAAa,CACb,iBAGF,CAEA,2BACE,WAAY,CACZ,kBACF,CAEA,UACE,SAAU,CACV,wBAAyB,CACzB,kBAAmB,CACnB,WAAY,CACZ,YAAc,CACd,iBACF,CAEA,SACE,SACF,CAEA,uBACE,oBACF,CAEA,iBACE,aAAc,CACd,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,8BAAgC,CAChC,qBAAuB,CACvB,wBAAyB,CACzB,iBAAkB,CAClB,YACF,CAEA,sBACE,iBAAkB,CAClB,yBAA8B,CAC9B,UAAc,CACd,qBAAsB,CACtB,cAAe,CACf,kBACF,CAEA,uBACE,oBAAqB,CACrB,YACF,CAEA,4BACE,WACF,CAEA,yCACE,UACE,cACF,CACF,CAEA,WACE,UAAc,CACd,aAAc,CACd,iBAAkB,CAClB,cACF,CAEA,gBACE,+BAAoC,CACpC,iBACF,CAEA,gBACE,iBAAkB,CAClB,oKAG2C,CAC3C,qDAAyD,CACzD,mDAAuD,CACvD,yCAA+D,CAC/D,iDAA0C,CAA1C,yCACF,CACA,gBACE,iBAAkB,CAClB,yBAA2B,CAC3B,UAAW,CACX,WACF,CACA,sBACE,+BAAkC,CAClC,iBAAkB,CAClB,+BACF,CACA,mBACE,yBAA2B,CAC3B,0BACF,CACA,mBACE,yBAA2B,CAC3B,2BACF,CACA,mBACE,4BAA8B,CAC9B,0BACF,CACA,mBACE,4BAA8B,CAC9B,2BACF,CAEA,gCACE,GACE,+CACF,CACA,GACE,+CACF,CACF,CAPA,wBACE,GACE,+CACF,CACA,GACE,+CACF,CACF,CACA,QAEE,WAAY,CAEZ,4BACF,CACA,mBALE,UAAW,CAEX,wBAOF,CAJA,WAEE,WAEF,CACA,aAGE,YAAa,CAIb,oBAAqB,CAErB,SAAU,CACV,kBAAmB,CAEnB,qBAAsB,CACtB,yBACF,CACA,SACE,OAAQ,CAER,aAAc,CACd,SAAU,CACV,QAAS,CACT,eAAgB,CAIhB,cAAe,CACf,2BAA4B,CAC5B,SACF,CACA,aACE,uBAAsB,CACtB,cAAe,CACf,WACF,CACA,gBACE,WAAY,CACZ,kBAAmB,CAGnB,UACF,CACA,eACE,YAAa,CACb,kBAAmB,CACnB,YACA,CACA,cACC,YAAa,CACb,aAAc,CACd,iBAAkB,CAClB,cAAe,CACf,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,WAED,CACA,cACA,cAAe,CACf,UAAW,CACX,UAAY,CACZ,eACA,CACA,eACE,YAAa,CACb,qBAAsB,CACtB,aACF,CAEA,2BACA,qCAEA,CACA,qBACA,YAAa,CACb,kBAAmB,CACnB,gBAAiB,CACjB,iBAAkB,CAClB,+BAAiC,CACjC,cACA,CACA,oBACE,UAEF,CACA,kCACE,cACF,CAEF,eACI,YACF,CACA,cACE,UACF,CAEA,WACE,iBACF,CACF,WAAa,oBAAqB,CAAE,YAAa,CAAG,kBAAsB,CAC1E,iBAAmB,qBAAyB,CAC5C,oBAAsB,qBAAsB,CAAE,UAAa","file":"main.2a76dc8a.chunk.css","sourcesContent":["body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #031F2B;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n#branding, .btn {\n  transition: all .2s ease\n}\n\n.headSection, .mainContentWrap {\n  overflow: hidden\n}\n\na, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {\n  font: inherit;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  vertical-align: baseline\n}\n\nblockquote, q {\n  quotes: none\n}\n\nblockquote:after, blockquote:before, q:after, q:before {\n  content: '';\n  content: none\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0\n}\n\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {\n  display: block\n}\n\n.clear {\n  clear: both\n}\n\n.screen-reader-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  position: absolute !important\n}\n\n.container, .mainContentWrap, article {\n  position: relative\n}\n\n* {\n  box-sizing: border-box\n}\n\n.wrapper {\n  width: 96%;\n  max-width: 1200px;\n  margin: 0 auto;\n  -webkit-box-flex: 1;\n  -ms-flex: 1;\n  flex: 1\n}\n\n.fullWidth, .wrapper {\n  padding: 4% 0;\n  position: relative\n}\n\n.fullWidth.noPadding, .wrapper.noPadding {\n  padding: 0\n}\n\n@media only screen and (min-width: 1300px) {\n  .fullWidth, .wrapper {\n    padding: 2% 0\n  }\n}\n\n@media only screen and (min-width: 900px) and (max-width: 1120px) {\n  .fullWidth, .wrapper {\n    padding: 4% 0\n  }\n}\n\n.fullWidth .wrapper, article {\n  padding: 0\n}\n\n.flexWrapper {\n  align-items: center;\n  flex-flow: row wrap;\n  flex-direction: row;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex\n}\n\n.flexWrapper.alignTop {\n  align-items: flex-start\n}\n\n.tileFlexible {\n  margin: 20px 0;\n  -webkit-box-flex: 1;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  float: left\n}\n\n.tileHalf {\n  width: 50%;\n  float: left\n}\n\n@media only screen and (min-width: 530px) and (max-width: 750px) {\n  .tileHalf {\n    float: none;\n    width: 100%\n  }\n}\n\n.tileThird {\n  width: 33%;\n  float: left\n}\n\n.center {\n  text-align: center\n}\n\n.smallerWidth {\n  width: 70%;\n  display: inline-block\n}\n\n@media only screen and (min-width: 900px) and (max-width: 1120px) {\n  .smallerWidth br {\n    display: none\n  }\n}\n\n@media only screen and (min-width: 750px) and (max-width: 900px) {\n  .smallerWidth {\n    width: 100%\n  }\n}\n\n@media only screen and (max-width: 530px) {\n  .onDesktop {\n    display: none\n  }\n}\n\n.bold, .bold a, .bold div, .bold span {\n  font-weight: 700 !important\n}\n\n.disabled, .notAvailableJet {\n  pointer-events: none\n}\n\n.disabled:hover, .notAvailableJet:hover {\n  cursor: default\n}\n\n.notAvailableJet {\n  opacity: .5\n}\n\n.container {\n  min-height: 60vh;\n  background: #e7eaee;\n  background: -webkit-linear-gradient(top, #e7eaee 0, #f0f2f4 100%);\n  background: linear-gradient(to bottom, #e7eaee 0, #f0f2f4 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7eaee', endColorstr='#f0f2f4', GradientType=0)\n}\n\n.page-template-template-contact .container {\n  min-height: 0\n}\n\n.btn {\n  min-width: 200px;\n  border-radius: 3px;\n  padding: 15px 35px;\n  font-size: 14px;\n  line-height: 14px;\n  text-transform: uppercase;\n  display: inline-block;\n  text-align: center;\n  height: 45px;\n  font-weight: 700;\n  transition: all .2s ease\n}\n\n.hide, .oldBrowserHint {\n  display: none\n}\n\n.btn.primary {\n  background: #4C8F9F;\n  color: #fff\n}\n\n.btn.primary:hover {\n  cursor: pointer;\n  opacity: .8\n}\n\n.btn.withShadow {\n  box-shadow: 0 19px 25px -17px rgba(0, 0, 0, .3)\n}\n\n.btn.withShadow:hover {\n  opacity: .8\n}\n\n.btn.withShadow:active {\n  -webkit-transition: all 50ms cubic-bezier(.54, .03, .42, .99);\n  transition: all 50ms cubic-bezier(.54, .03, .42, .99);\n  -webkit-transform: translateY(1px);\n  -ms-transform: translateY(1px);\n  transform: translateY(1px);\n  box-shadow: 0 17px 22px -15px rgba(0, 0, 0, .2)\n}\n\n.no-borderradius .oldBrowserHint, .no-opacity .oldBrowserHint {\n  text-align: center;\n  padding: 20% 5%;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  color: #fff;\n  background: #031F2B\n}\n\n@font-face {\n  font-family: Roboto;\n  src: local(\"Roboto Italic\"), local(\"Roboto-Italic\"), url(fonts/roboto-italic-webfont.woff2) format(\"woff2\"), url(fonts/roboto-italic-webfont.woff) format(\"woff\");\n  font-weight: 400;\n  font-style: italic\n}\n\n@font-face {\n  font-family: Roboto;\n  src: local(\"Roboto Bold\"), local(\"Roboto-Bold\"), url(fonts/roboto-bold-webfont.woff2) format(\"woff2\"), url(fonts/roboto-bold-webfont.woff) format(\"woff\");\n  font-weight: 700;\n  font-style: normal\n}\n\n@font-face {\n  font-family: Roboto;\n  src: local(\"Roboto Regular\"), local(\"Roboto-Regular\"), url(fonts/roboto-regular-webfont.woff2) format(\"woff2\"), url(fonts/roboto-regular-webfont.woff) format(\"woff\");\n  font-weight: 400;\n  font-style: normal\n}\n\n@font-face {\n  font-family: \"Roboto Condensed\";\n  src: local(\"Roboto Condensed Bold\"), local(\"RobotoCondensed-Bold\"), url(fonts/robotocondensed-bold-webfont.woff2) format(\"woff2\"), url(fonts/robotocondensed-bold-webfont.woff) format(\"woff\");\n  font-weight: 700;\n  font-style: normal\n}\n\n@font-face {\n  font-family: \"Roboto Condensed\";\n  src: local(\"Roboto Condensed Bold Italic\"), local(\"RobotoCondensed-BoldItalic\"), url(fonts/robotocondensed-bolditalic-webfont.woff2) format(\"woff2\"), url(fonts/robotocondensed-bolditalic-webfont.woff) format(\"woff\");\n  font-weight: 700;\n  font-style: italic\n}\n\nbody, button, input, select, textarea {\n  color: rgba(3, 31, 43, .54);\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 17px;\n  line-height: 1.5;\n  font-weight: 400;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale\n}\n\na, b, h1, h2, h3, h4, h5, h6, strong {\n  font-weight: 700\n}\n\nbody {\n  background: #e7eaee\n}\n\nh1, h2, h3, h4, h5, h6 {\n  line-height: 1\n}\n\nh1, h2 {\n  line-height: 1.618;\n  color: #031F2B\n}\n\nh1 {\n  font-size: 25px;\n  margin: 0 auto 25px\n}\n\nh1.entry-title a {\n  color: #031F2B;\n  font-size: 25px\n}\n\nh2 {\n  font-size: 16px;\n  margin: 15px auto 25px\n}\n\nh2.entry-title a {\n  color: #031F2B;\n  font-size: 25px\n}\n\nh1 p, h2 p {\n  margin-bottom: 0\n}\n\n@media only screen and (min-width: 530px) and (max-width: 750px) {\n  h1 br, h2 br {\n    display: none\n  }\n}\n\nh3 {\n  color: #031F2B;\n  font-size: 17px;\n  line-height: 1.5;\n  margin: 22px auto 16px\n}\n\nh4 {\n  font-size: 15px;\n  margin: 22px auto 12px\n}\n\nh5 {\n  font-size: 13px;\n  margin: 22px auto 10px\n}\n\nh6 {\n  font-size: 11px;\n  margin: 22px auto 8px\n}\n\np {\n  margin-bottom: 16px\n}\n\np a {\n  text-decoration: underline\n}\n\nem {\n  font-style: italic\n}\n\niframe, img {\n  max-width: 100%;\n  height: auto\n}\n\na {\n  text-decoration: none;\n  color: rgba(3, 31, 43, .54)\n}\n\na:hover {\n  cursor: pointer;\n  color: rgba(3, 31, 43, .7)\n}\n\nol, ul {\n  list-style: none;\n  padding-left: 20px\n}\n\nol li, ul li {\n  list-style: disc;\n  padding-left: 10px;\n  margin-bottom: 10px\n}\n\n.alignnone {\n  margin: 5px 20px 20px 0\n}\n\n.aligncenter, div.aligncenter {\n  display: block;\n  margin: 5px auto\n}\n\n.alignright {\n  float: right;\n  margin: 5px 0 20px 20px\n}\n\n.alignleft {\n  float: left;\n  margin: 5px 20px 20px 0\n}\n\na img.alignright {\n  float: right;\n  margin: 5px 0 20px 20px\n}\n\na img.alignleft, a img.alignnone {\n  margin: 5px 20px 20px 0\n}\n\na img.alignleft {\n  float: left\n}\n\na img.aligncenter {\n  display: block;\n  margin-left: auto;\n  margin-right: auto\n}\n\n.wp-caption {\n  background: #FFF;\n  border: 1px solid #F0F0F0;\n  max-width: 96%;\n  padding: 5px 3px 10px;\n  text-align: center\n}\n\n.wp-caption.alignleft, .wp-caption.alignnone {\n  margin: 5px 20px 20px 0\n}\n\n.wp-caption.alignright {\n  margin: 5px 0 20px 20px\n}\n\n.wp-caption img {\n  border: 0;\n  height: auto;\n  margin: 0;\n  max-width: 98.5%;\n  padding: 0;\n  width: auto\n}\n\n.gallery-caption, .wp-caption .wp-caption-text {\n  font-size: 11px;\n  line-height: 17px;\n  margin: 0;\n  padding: 0 4px 5px\n}\n\n@media print {\n  blockquote, img, pre, tr {\n    page-break-inside: avoid\n  }\n\n  * {\n    background: 0 0 !important;\n    color: #000 !important;\n    box-shadow: none !important;\n    text-shadow: none !important\n  }\n\n  a, a:visited {\n    text-decoration: underline\n  }\n\n  a[href]:after {\n    content: \" (\" attr(href) \")\"\n  }\n\n  abbr[title]:after {\n    content: \" (\" attr(title) \")\"\n  }\n\n  .ir a:after, a[href^=\"javascript:\"]:after, a[href^=\"#\"]:after {\n    content: \"\"\n  }\n\n  blockquote, pre {\n    border: 1px solid #999\n  }\n\n  thead {\n    display: table-header-group\n  }\n\n  img {\n    max-width: 100% !important\n  }\n\n  @page {\n    margin: .5cm\n  }\n\n  h2, h3, p {\n    orphans: 3;\n    widows: 3\n  }\n\n  h2, h3 {\n    page-break-after: avoid\n  }\n}\n\n.headerSeparatorBack, .headerSeparatorTop {\n  position: absolute;\n  right: 0;\n  bottom: -2px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  z-index: 9996;\n  background: url(images/sectionTransBack.svg) 0 bottom repeat-x\n}\n\n.no-svg .headerSeparatorBack, .no-svg .headerSeparatorTop {\n  background: url(images/sectionTransBack.png) 0 bottom repeat-x\n}\n\n.headerSeparatorTop {\n  height: 30px;\n  z-index: 9999;\n  background: url(images/sectionTransTop.svg) 0 bottom repeat-x\n}\n\n.no-svg .headerSeparatorTop {\n  background: url(images/sectionTransTop.png) 0 bottom repeat-x\n}\n\n.headSection {\n  position: absolute;\n  width: 100%;\n  height: 90vh;\n  height: -webkit-calc(100vh - 30px);\n  height: calc(100vh - 30px);\n  background: #031F2B;\n  transition: height 300ms;\n}\n\n.headSection.hidden {\n  height: 110px;\n\n}\n\n@media only screen and (max-width: 530px) {\n  .headSection {\n    min-height: 146px\n  }\n}\n\n.headSection .wrapper {\n  padding: 0;\n  -webkit-box-flex: 0;\n  -ms-flex: 0;\n  flex: 0;\n}\n\n.navWrap {\n  width: 100%;\n  height: 100px;\n  position: absolute;\n  z-index: 9996;\n  border-bottom: 4px solid rgba(255, 255, 255, .12);\n}\n\n.contentWrap, .uploadImage {\n  position: relative;\n  width: 65%\n}\n\n.menuWrap {\n  float: right;\n  z-index: 1\n}\n\n.menuWrap ul {\n  margin: 0;\n  padding: 17px 0 0\n}\n\n.menuWrap ul li {\n  float: left;\n  list-style: none;\n  margin: 0;\n  padding: 0\n}\n\n.menuWrap ul li a {\n  color: rgba(255, 255, 255, .54);\n  padding: 7px 0 7px 10px;\n  font-size: 11px;\n  display: inline-block\n}\n\n.menuWrap ul li a:hover {\n  color: #fff\n}\n\n#branding {\n  float: left;\n  width: 93px;\n  height: 60px;\n  min-height: 0;\n  background: url(images/nyris_logo.png) 50% 50% no-repeat;\n  overflow: hidden;\n  text-indent: -99999px;\n  transition: all .2s ease\n}\n\n.resultsActive #branding {\n  opacity: .54\n}\n\n.dragAndDropActionArea {\n  height: 90vh;\n  padding-bottom: 80px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  margin-left: 35px;\n  margin-top: 50px;\n}\n.dragAndDropActionArea:focus {\n  outline: 0;\n}\n\n.contentWrap {\n  -webkit-box-flex: 1;\n  -ms-flex: 1 100%;\n  flex: 1 100%;\n  overflow: hidden\n}\n\n.uploadImage {\n  min-height: 120px;\n  border-radius: 12px;\n  border: 4px dashed rgba(255, 255, 255, .12);\n  padding: 12vh 0;\n  text-align: center;\n  font-size: 22px;\n  color: rgba(251, 253, 254, .54);\n  display: block;\n  -webkit-transition: all .2s ease;\n  transition: all .2s ease\n}\n\n@media only screen and (max-height: 610px) {\n  .uploadImage {\n    padding: 30px 0\n  }\n}\n\n@media only screen and (max-width: 530px) {\n  .uploadImage {\n    padding: 10vh 0;\n    border: 0;\n    height: 70vh\n  }\n}\n\n.uploadImage .smallText {\n  font-size: 14px;\n  color: rgba(251, 253, 254, .38);\n  margin: 8px auto 17px\n}\n\n.fileIsHover .uploadImage {\n  border: 4px dashed rgba(255, 255, 255, .38)\n}\n\n.mobileUploadHandler {\n  position: absolute;\n  width: 100%;\n  display: block;\n  top: 70px;\n  right: 0;\n  height: 100px;\n  left: 0\n}\n\n.inputfile {\n  width: .1px;\n  height: .1px;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1\n}\n\n.useExampleImg {\n  color: rgba(255, 255, 255, .38);\n  font-size: 14px;\n  margin-top: 30px\n}\n\n@media only screen and (max-width: 530px) {\n  .fileIsHover .uploadImage {\n    border: 0\n  }\n\n  .useExampleImg {\n    position: absolute;\n    bottom: -20px;\n    width: 102%\n  }\n}\n\n.useExampleImg .exampleImages {\n  margin-top: 10px;\n  width: 100%;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  padding-bottom: 20px\n}\n\n.useExampleImg .exampleImages .exImagesWrap {\n  white-space: nowrap\n}\n\n.useExampleImg .exampleImages img {\n  opacity: .54;\n  width: 86px;\n  height: 86px;\n  border-radius: 3px;\n  margin-right: 4px;\n  vertical-align: bottom\n}\n\n.useExampleImg .exampleImages img:hover {\n  cursor: pointer;\n  opacity: 1\n}\n\n.camIcon {\n  margin-bottom: 15px\n}\n\n@media (pointer:fine) {\n  .onMobile {\n    display: none\n  }\n}\n\n@media (pointer:none) or (pointer:coarse) {\n  .onDesktop {\n    display: none\n  }\n}\n\n.tryDifferent .icIcon, .tryDifferent .textDesc {\n  display: inline-block;\n  vertical-align: top\n}\n\n.tryDifferent {\n  position: absolute;\n  bottom: 0px;\n  left: 45%;\n  transform: translateX(-50%);\n  width: 18.5%;\n  height: 90px;\n  text-align: center;\n  padding: 25px 15px;\n  z-index: 9997;\n  border-radius: 3px 3px 0 0;\n  background: #4C8F9F;\n  font-size: 14px;\n  color: #fff;\n  max-width: 240px;\n  transition: bottom 500ms;\n}\n.tryDifferent.hidden {\n  bottom: -80px;\n}\n\n@media only screen and (min-width: 900px) and (max-width: 1120px) {\n  .tryDifferent {\n    width: 23.5%\n  }\n}\n\n@media only screen and (min-width: 750px) and (max-width: 900px) {\n  .tryDifferent {\n    width: 31.8%\n  }\n}\n\n@media only screen and (min-width: 530px) and (max-width: 750px) {\n  .tryDifferent {\n    width: 48.5%\n  }\n}\n\n@media only screen and (max-width: 530px) {\n  .tryDifferent {\n    width: 80%;\n    margin-bottom: -13px;\n    padding-top: 20px\n  }\n}\n\n.tryDifferent .icIcon {\n  width: 22px;\n  height: 18px;\n  background: url(images/ic_cam.svg) no-repeat;\n  margin-right: 10px\n}\n\n.no-svg .tryDifferent .icIcon {\n  background: url(images/ic_cam.png) no-repeat\n}\n\n.tryDifferent:hover {\n  cursor: pointer\n}\n\n.resultsTitle {\n  text-align: center;\n  -webkit-transform: translateY(20px);\n  -ms-transform: translateY(20px);\n  transform: translateY(20px);\n  margin-top: 3%\n}\n\n.results {\n  position: relative;\n}\n.results.resultsActive {\n  height: auto;\n  min-height: 90vh;\n  margin-top: 100px;\n}\n.hideResults{\n  display: none;\n}\n\n.results .wrapper {\n  max-width: -webkit-calc(1200px + 1.5%);\n  max-width: calc(1200px + 1.5%);\n  width: 97.5%;\n}\n\n@media only screen and (max-width: 530px) {\n  .results .wrapper {\n    width: 96%\n  }\n}\n\n.results .loadingOverlay {\n  padding: 30px;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #e7eaee;\n  z-index: 3;\n  border-radius: 3px\n}\n\n@-webkit-keyframes spin {\n  0% {\n    -webkit-transform: rotate(0);\n    transform: rotate(0)\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n@keyframes spin {\n  0% {\n    -webkit-transform: rotate(0);\n    transform: rotate(0)\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n.results .loadingOverlay .loading {\n  position: absolute;\n  top: 150px;\n  left: 50%;\n  margin-left: -12px;\n  margin-top: -12px;\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  border: .25rem solid rgba(0, 0, 0, .12);\n  border-top-color: rgba(3, 31, 43, .6);\n  -webkit-animation: spin 1s infinite linear;\n  animation: spin 1s infinite linear\n}\n\n.prdctItem {\n  width: 18.5%;\n  margin: 0 .75% 2%;\n  float: left;\n  background: #FBFDFE;\n  border-radius: 3px;\n  overflow: hidden;\n  box-shadow: 0 1px 3px rgba(3, 31, 43, .2);\n  font-size: 14px;\n  line-height: 1.3\n}\n\n@media only screen and (min-width: 1120px) {\n  .prdctItem:visible:nth-of-type(5n+6) {\n    clear: both\n  }\n}\n\n@media only screen and (min-width: 900px) and (max-width: 1120px) {\n  .prdctItem {\n    width: 23.5%;\n    margin: 0 .75% 3%\n  }\n\n  .prdctItem:visible:nth-of-type(4n+5) {\n    clear: both\n  }\n}\n\n@media only screen and (min-width: 750px) and (max-width: 900px) {\n  .prdctItem {\n    width: 31.8%;\n    margin: 0 .75% 3%\n  }\n\n  .prdctItem:visible:nth-of-type(3n+4) {\n    clear: both\n  }\n}\n\n@media only screen and (min-width: 530px) and (max-width: 750px) {\n  .prdctItem {\n    width: 48.5%;\n    margin: 0 .75% 3%\n  }\n\n  .prdctItem:visible:nth-of-type(2n+3) {\n    clear: both\n  }\n}\n\n.prdctItem .prdctImg {\n  position: relative;\n  background: #fff;\n  text-align: center;\n  border-bottom: 1px solid rgba(3, 31, 43, .12)\n}\n\n@media only screen and (max-width: 530px) {\n  .prdctItem {\n    width: 100%;\n    margin: 0 0 4%\n  }\n\n  .multipleProducts .prdctItem .prdctImg {\n    float: left;\n    width: 25%;\n    border-bottom: 0\n  }\n}\n\n.prdctItem .prdctImg:after {\n  content: \"\";\n  display: block;\n  width: 100%;\n  padding-bottom: 100%;\n  position: relative\n}\n\n.prdctItem .prdctImg .imgWrap {\n  position: absolute;\n  top: 9%;\n  right: 9%;\n  bottom: 9%;\n  left: 9%\n}\n\n.prdctItem .prdctImg img {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  vertical-align: middle\n}\n\n.prdctItem .prdctDetailsWrap {\n  padding: 8% 9%\n}\n\n@media only screen and (max-width: 530px) {\n  .multipleProducts .prdctItem .prdctDetailsWrap {\n    float: left;\n    width: 75%;\n    padding: 4%;\n    border-left: 1px solid rgba(3, 31, 43, .12)\n  }\n\n  .feedback {\n    text-align: center\n  }\n}\n\n.prdctItem .prdctDetailsWrap .prdctTitle {\n  color: #031F2B\n}\n\n.prdctItem .prdctDetailsWrap .prdctMeta {\n  margin: 10px 0\n}\n\n.prdctItem .prdctDetailsWrap .prdctMeta .prdctPrice {\n  font-weight: 700;\n  color: #031F2B\n}\n\n.prdctItem .prdctDetailsWrap .prdctShipping {\n  margin-bottom: 10px\n}\n\n.prdctItem .prdctDetailsWrap .prdctShopLink {\n  margin-top: 3px;\n  display: inline-block;\n  padding: 7px 10px 7px 30px;\n  text-transform: uppercase;\n  font-size: 13px;\n  border-radius: 3px;\n  background: url(images/ic_shopNowLight.svg) 10px 50% no-repeat #FBFDFE;\n  border: 1px solid rgba(3, 31, 43, .12)\n}\n\n.no-svg .prdctItem .prdctDetailsWrap .prdctShopLink {\n  background: url(images/ic_shopNowLight.png) 10px 50% no-repeat #FBFDFE\n}\n\n.prdctItem .prdctDetailsWrap .prdctShopLink:hover {\n  background: url(images/ic_shopNow.svg) 10px 50% no-repeat #4C8F9F;\n  border: 1px solid #4c8f9f;\n  color: #FBFDFE\n}\n\n.no-svg .prdctItem .prdctDetailsWrap .prdctShopLink:hover {\n  background: url(images/ic_shopNow.png) 10px 50% no-repeat #4C8F9F\n}\n\n@media only screen and (min-width: 530px) {\n  .singleProduct .prdctItem {\n    width: 50%;\n    display: block;\n    margin: 0 auto 4%;\n    float: none;\n    position: relative\n  }\n\n  .singleProduct .prdctItem .prdctImg {\n    float: left;\n    width: 50%;\n    border-bottom: 0;\n    border-right: 1px solid rgba(3, 31, 43, .12)\n  }\n\n  .singleProduct .prdctItem .prdctDetailsWrap {\n    float: left;\n    width: 50%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 50%;\n    padding: 4%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap\n  }\n}\n\n.feedback .btn, .feedback .btn.primary {\n  border: 1px solid rgba(251, 253, 254, .12)\n}\n\n.footnote .wrapper {\n  padding: 30px 0 6px;\n  font-size: 12px;\n  color: rgba(3, 31, 43, .38);\n  text-align: center\n}\n\n.footnote .wrapper a {\n  color: rgba(3, 31, 43, .38);\n  font-weight: 400\n}\n\n.footnote .wrapper a:hover {\n  color: rgba(3, 31, 43, .54)\n}\n\n.feedback {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateY(100%);\n  opacity: 0;\n  background: #031F2B;\n  z-index: 9999;\n  font-size: 14px;\n  color: rgba(251, 253, 254, .54)\n}\n\n.feedback .wrapper {\n  padding: 15px 0\n}\n\n.feedback p {\n  display: inline-block;\n  margin: 0 10px 0 0\n}\n\n@media only screen and (max-width: 530px) {\n  .feedback p {\n    display: block;\n    margin-bottom: 15px\n  }\n}\n\n.feedback .btn {\n  min-width: 100px;\n  padding: 10px 25px;\n  display: inline-block;\n  height: auto;\n  margin: 0 4px\n}\n\n.feedback .btn.primary {\n  background: 0 0;\n  color: rgba(251, 253, 254, .54)\n}\n\n.feedback .btn.primary:hover {\n  background: #4c8f9f;\n  border: 1px solid rgba(251, 253, 254, 0);\n  color: #fff\n}\n\n.feedback .btn.secondary {\n  background: 0 0\n}\n\n.feedback .btn.secondary:hover {\n  background: #E31B5D;\n  border: 1px solid rgba(3, 31, 43, 0);\n  color: #fff\n}\n\n.feedback .btn.dismiss {\n  margin-top: 15px;\n  color: rgba(251, 253, 254, .54)\n}\n\n.feedback .btn.dismiss:hover {\n  background: #4c8f9f;\n  border: 1px solid rgba(251, 253, 254, 0);\n  color: #fff\n}\n\n.feedback .btn:hover {\n  cursor: pointer\n}\n\n.feedback .closeFeedbackContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0\n}\n\n.feedback .closeFeedbackContainer .closeFeedback {\n  position: absolute;\n  right: 15px;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  width: 30px;\n  height: 30px;\n  background: url(images/ic_close_feedback.svg) 50% 50% no-repeat;\n  float: right;\n  opacity: .38;\n  -webkit-transition: all .2s ease;\n  transition: all .2s ease\n}\n\n.feedback .closeFeedbackContainer .closeFeedback:hover {\n  cursor: pointer;\n  opacity: 1\n}\n\n.feedback .feedbackMessage {\n  font-size: 17px;\n  text-align: center;\n  max-width: 80%;\n  margin: 15px auto;\n}\n\n@media only screen and (max-width: 530px) {\n  .feedback .closeFeedbackContainer .closeFeedback {\n    width: 18px;\n    top: 10px;\n    -webkit-transform: translateY(0);\n    -ms-transform: translateY(0);\n    transform: translateY(0)\n  }\n\n  .feedback .feedbackMessage {\n    max-width: 95%\n  }\n}\n\n.feedback .feedbackMessage span, .feedback .feedbackMessage.positive {\n  color: #4C8F9F\n}\n\n.negativeFeedback .feedback .feedbackMessage.negative, .positiveFeedback .feedback .feedbackMessage.positive {\n  display: block\n}\n\n.noscript, .oldBrowserHint {\n  display: none;\n  text-align: center;\n  padding: 20% 5%;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  color: #fff;\n  background: #031F2B\n}\n\n.no-borderradius .oldBrowserHint, .no-opacity .oldBrowserHint {\n  display: block\n}\n\n.prdctTitle {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 1.3em;\n  line-height: 1.3em;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.prdctTitle {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 1.3em;\n  line-height: 1.3em;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.prdctMeta {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 1.2em;\n  line-height: 1.2em;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.singleProduct .prdctTitle {\n  height: auto;\n  white-space: normal;\n}\n\n.errorMsg {\n  color: red;\n  background-color: #4f4f4f;\n  border-radius: 10px;\n  margin: auto;\n  padding: 0.2em;\n  text-align: center;\n}\n\n.preview {\n  z-index: 4;\n}\n\n.preview .jcrop-holder {\n  display: inline-block;\n}\n\n.preview .circle {\n  display: block;\n  border-radius: 50%;\n  width: 18px;\n  height: 18px;\n  transform: translate(-9px, -9px);\n  background-color: white;\n  border: 6px solid #4C8F9F;\n  position: absolute;\n  z-index: 4000;\n}\n\n.preview .circle span {\n  position: absolute;\n  background: rgba(0, 0, 0, 0.7);\n  color: #FFFFFF;\n  font-family: monospace;\n  font-size: 10px;\n  white-space: nowrap;\n}\n\n.preview .circle:hover {\n  border-color: #5ed6e6;\n  z-index: 4001;\n}\n\n.preview .circle:hover span {\n  color: green;\n}\n\n@media only screen and (max-width: 500px) {\n  .feedback {\n    font-size: 10px;\n  }\n}\n\n.noResults {\n  color: #999999;\n  font-size: 3em;\n  text-align: center;\n  cursor: default;\n}\n\n.selection_mask {\n  background-color: rgba(0, 0, 0, 0.5);\n  position: absolute;\n}\n\n.selection_rect {\n  position: absolute;\n  background: linear-gradient(90deg, black 50%, white 50%),\n  linear-gradient(0deg, black 50%, white 50%),\n  linear-gradient(90deg, black 50%, white 50%),\n  linear-gradient(0deg, black 50%, white 50%);\n  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;\n  background-size: 15px 2px, 2px 15px, 15px 2px, 2px 15px;\n  background-position: left top, right top, left bottom, left top;\n  animation: border-dance 8s infinite linear;\n}\n.selection_grip {\n  position: absolute;\n  background: rgba(0,0,0,0.2);\n  width: 40px;\n  height: 40px;\n}\n.selection_grip:hover {\n  transition: background-color 100ms;\n  position: absolute;\n  background-color: rgba(0,0,0,0.5);\n}\n.selection_grip.tl {\n  border-top: 5px solid black;\n  border-left: 5px solid black;\n}\n.selection_grip.tr {\n  border-top: 5px solid black;\n  border-right: 5px solid black;\n}\n.selection_grip.bl {\n  border-bottom: 5px solid black;\n  border-left: 5px solid black;\n}\n.selection_grip.br {\n  border-bottom: 5px solid black;\n  border-right: 5px solid black;\n}\n\n@keyframes border-dance {\n  0% {\n    background-position: left top, right top, right bottom, left bottom;\n  }\n  100% {\n    background-position: right top, right bottom, left bottom, left top;\n  }\n}\n#header {\n  width: 100%;\n  height: 60px;\n  background-color: #031F2B;\n  border-bottom: 1px solid #eee;;\n}\n.sideBelow {\n  width: 100%;\n  height: 100%;\n  background-color: #031F2B;\n}\n.wrapperBody {\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n\n  -webkit-flex-flow: row nowrap;\n  -ms-flex-flow: row nowrap;\n  flex-flow: row nowrap;\n  \n  padding: 0;\n  background: #031F2B;\n  \n  -ms-flex-pack: justify;\n  height: calc( 100vh - 60px);\n}\n.sidebar {\n  order: 0;\n  \n  display: block;\n  padding: 0;\n  margin: 0;\n  background: #bbb;\n  \n  -webkit-flex: 0 0 329px;\n  -ms-flex: 0 0 329px;\n  flex: 0 0 240px;\n  border-right: 1px solid #eee;\n  width: 25%;\n}\n.mainContent{\n  width: calc(100vh-230);\n  flex: 0 0 900px;\n  flex-grow: 1;\n}\n.sidebarContent {\n  height: 100%;\n  background: #031F2B;\n  /* margin: 10px;\n  border: 1px solid #dfdfdf; */\n  color: white;\n}\n.sidebarHeader{\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  }\n  .sidebar-icon{\n   width: 1.25em;\n   height: 1.25em;\n   margin-right: 16px;\n   cursor: pointer;\n   user-select: none;\n   float: right;\n\n  }\n  .sidebar-logo{\n  font-size: 16px;\n  float: left;\n  color: white;\n  margin-top: 27px;\n  }\n  .Sidebar-items{\n    display: flex;\n    flex-direction: column;\n    padding: 0 8px;\n  }\n  \n  .Sidebar-items .item:hover{\n  background-color: rgba(246, 242, 242, 0.1);\n  \n  }\n  .Sidebar-items .item{\n  display: flex;\n  align-items: center;\n  padding: 16px 8px;\n  border-radius: 5px;\n  transition: background-color 0.2s;\n  cursor: pointer;\n  }\n  .sidebar .collapsed{\n    width: 20px;\n\n  }\n  .sidebar .collapsed .sidebar-icon{\n    margin-right: 0;\n  }\n \n.collapsedHide {\n    display: none;\n  }\n  .sidebar-text{\n    color: white;\n  }\n\n  .itemLabel{\n    padding-left: 10px;\n  }\n#catlist a { display: inline-block; padding: 10px;  border-radius: 10px;  }\n#catlist a:hover { background-color: white; }\n#catlist a.selected { background-color: #444; color: #ddd; }"]}