/* Fonts */

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800,700,300);

  @font-face {
    font-family: 'Poppins-Regular';
    src: url('fonts/Poppins-Regular.eot'); /* ie */
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
  } 

  @font-face {
    font-family: 'Poppins-Light';
    src: url('fonts/Poppins-Light.eot'); /* ie */
    src: url('fonts/Poppins-Light.ttf') format('truetype');
  } 

  @font-face {
    font-family: 'Poppins-Bold';
    src: url('fonts/Poppins-Bold.eot'); /* ie */
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
  } 

  @font-face {
    font-family: 'Poppins-SemiBold';
    src: url('fonts/Poppins-SemiBold.eot'); /* ie */
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  } 

  /* Show search clear button */
  input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: searchfield-cancel-button;
  }

  
  /* Master Styles */


  html{
    height:100%;
    overflow-y:hidden !important;
  }

  body {
    font-family: 'Open Sans', sans-serif;
    font-size:14pt;
    color:#808080;
    background-color:#5b81dc;
    height:100%;
    zoom: 90%;
  }
 
  a:link{
    color:#808080;
  }

  a:active{
    color:#808080;
  }

  a:hover{
    
  }

  a:visited{
    color:#808080;
  }

  .noSelect{
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  .right{
    float:right;
  }

  .center{
    text-align:center;
  }


  h1{
    font-size:21pt;
    font-weight:bold;
    border-bottom:1px solid #aaa;
    margin-top:15px;
    margin-bottom:20px;
  }

  h2{
    font-size:16pt;
    font-weight:bold;
  }


  .clear{
    clear:both;
  }

  .submitButton{
    background-color:#0f45b7;
    color:#fff;
    text-align:center;
    width:25%;
    margin: 0 auto;
    margin-top:25px;
    padding-top:10px;
    padding-bottom:10px;  
    cursor:pointer;
  }

  /* jQuery UI*/
  .ui-resizable-handle{
    z-index:0 !important;
  }

  /* Fullscreen Box + Overlay */
  .fullScreenInfoBoxWrap{
    display:none;
    position:fixed;
    left:10%;
    top:10%;
    width:80%;
    height:80%;
    background-color:#fff;
    border:1px solid #000;
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    z-index:9999999999;
  }

  .fullScreenShadowOverlay{
    display:none;   
    position:fixed;
    width:100%;
    height:100%;
    opacity:.7;
    filter:alpha(opacity=70);
    background-color:#000;
    top:0px;
    left:0px;
    z-index:9999999998;
  }

  .fullScreenInfoBoxClose{
    float:right;
    margin-top:18px;
    margin-right:25px;
    cursor:pointer;
  }

  .fullScreenInfoBoxHeading{
    color:#072159;
    font-size:18pt;
    border-bottom:1px solid #808080;
    padding-top:15px;
    padding-left:15px;
  } 

  .fullScreenInfoBoxMain{
    padding:25px;
  }


  /* dropdown menus */
  .jq-dropdown-menu{
    font-size:12pt !important;
    color:#000 !important;
    text-align:left !important;
  }

  .menuButton{
    color:#fff !important;
  }


  /* Top Bar */


  .topBar{
    border-bottom:1px solid #000;
    height:50px;
    line-height:43px;
    background-color:#fff;
    /* margin-bottom:25px; */
  }



  .topMenuIcon{
    float:right;
    width:35px;
    padding-top:5px;
    margin-right:10px;
    cursor:pointer;
  }



  .topSideMenu{
    display:none;
    position:fixed;
    right:0px;
    top:50px;
    height:100%;
    width:350px;
    border-left:1px solid #eee;
    background-color:#fff;
    z-index:999;
  }

  .topSideMenu ul{
    list-style-type: none;
    padding:0px;
    margin:0px;
  }

  .topSideMenu li{
    padding:0 0;
    margin:0 0;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:15px;
    border-bottom:1px solid #eee;
    cursor:pointer;
  }

  .topSideMenu li:hover{
    background-color:#eee;
  }






  /* Login/Register */

  .loginMain{

  }

  .loginBoxWrap{
    margin: 0 auto;
    margin-top:250px;
    width:425px;
    padding-top:15px;
    padding-bottom:25px;
    text-align:center;
    background-color:#fff;
    border:1px solid #eee;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    -o-border-radius:7px;
    border-radius:7px;
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    box-shadow: 5px 5px 5px rgba(0,0,0,.2);
  }

  .loginBoxLogo{
    text-align:center;
  }


  .loginBoxLogo img{
    width:150px
  }




  .loginBoxWrap input{
    display:inline;
    width:70%;
    /* text-align:center; */
    margin-right:10%;
    margin-bottom:5px;
    margin-top:5px;
    font-size:14pt;
    border:none;
    /* background-color:#eee; */
    /* border:1px solid #aaa; */
  }

  .loginBoxDivider{
    border-bottom:1px solid #eee;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:5px;
  }

  .loginBoxIcons{
    width:20%;
    color:#538fcc;
    font-size:18pt;
  }

  .loginBoxSubmit{
    margin: 0 auto;
    margin-top:15px;
    padding:5px;
    padding-top:10px;
    padding-bottom:10px;
    width:90%;
    color:#fff;
    font-size:14pt;
    font-weight:bold;
    background-color:#72bc83;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    cursor:pointer;
  }

  .loginBoxSubmit:hover{
    background-color:#54ad68;
  }

  .loginBoxMsg{
    margin-top:15px;
    color:red;
  }



  /************ Main UI *************/
    
  #app{
    position:relative;
    /* height:97.5%; */
    height:100%;
    overflow-y:hidden; 
  }

  .mainWrap{
    height:100%;
  }

  .viewBottomBar{
    position:absolute;
    width:100%;
    bottom:0px;
    height:15px;
    line-height:25px;
    /* background-color:#16378F; */
    font-size:10pt;
    color:#fff;
    padding-left:5px;
    padding-right:5px;
    border-radius:0 0 0 25px;
  }


  /* userBar */
  .userBarWrap{
    display:none;
    position:relative;
    top:0px;
    height:30px;
    background-color:#16378F;
    border-bottom:1px solid #000;
  }

  .userBarTitleWrap{
    height:30px;
    margin-bottom:1px;
    float:left;
    width:650px;
  }

  .userBarTitle{
    position:relative;
    top:3px;
    color:#fff;
    margin-top:5px;
    font-size:18pt;
    text-transform:uppercase;
    padding-left:22px;
    letter-spacing:.2em;
  }


  .userBarTitleWrap img{
    margin-left:5px;
    margin-top:0px;
    height:39px;
    width:auto;
  }

  .userBarWorkspaceWrap{
    float:right;
    text-align:right;
    width:300px;
    color:#f3f6fb;
   }

  .userBarWorkspaceWrap .menuButton{
    position:relative;
    top:7px;
    color:#fff !important;
  }

  .userBarWorkspaceDropDown{
    position:relative;
    padding:0px;
    margin:0px;
    margin-left:25px;
    margin-right:5px;
    top:6px;
    height:30px;
    padding-left:5px;
    width:150px;
  }

  .userBarWorkspaceDropDown option{
    line-height:12pt;
    font-size:12pt;
    padding-bottom:5px;
  }


  .userBarUserWrap{
    float:right;
    background-color:#4666BB;
    border-bottom:1px solid #000;
    line-height:44px;
    font-size:15pt;
    width:270px;
    text-align:right;
    padding-right:20px;
    padding-left:10px;
    margin-left:10px;
    color:#f3f6fb;
    cursor:pointer;
   }

  .userBarUserArrow{
    padding-left:15px;
    color:#f3f6fb !important;
  }
  

  /* tabBar */
  .tabsBarWrap{
    height:30px;
    background-color:#2f4f8c;
    border-bottom:1px solid #d7dfea;
    overflow-y:hidden;
  }

  .tabsBarTab{
    display:inline-block;
    margin-left:15px;
    padding-left:10px;
    width:150px;
    border-left:1px solid #98a7c6;
    border-right:1px solid #98a7c6;
    border-top:1px solid #98a7c6;
    border-bottom:1px solid #fff;
    background-color:#263d71;
    color:#fff;
    cursor:pointer;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  .tabsBarTab .tabClose{
    float:right;
    font-size:10pt;
    line-height:30px;
    padding-right:5px;
  }

  .tabsBarWrap .active{
    background-color:rgba(255,255,255,.5);
  }

  .tabName{
    display:inline-block;
    line-height:30px;
    font-size:11pt;
    width:115px;
    height:22px;
    overflow:hidden;
  }

  .tabNameEdit{
    display:inline-block;
    line-height:30px;
    font-size:11pt;
    width:115px;
    height:30px;
    line-height:33px;
    overflow:hidden;
    background-color:#263d71;
    color:#fff;
  }

  .tabsBarAddTab{
    display:inline-block; 
    width:25px;
    height:30px;
    line-height:30px;
    text-align:center;
    color:#98a7c6;
    cursor:pointer;
  } 

  .tabsBarAddTab:hover{
    background-color:#98a7c6;
    color:#000;
  } 

  /* desktop */
  .desktopWrap{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  .loadingTabOverlay{
    display:none;
    position:absolute;  
    padding-top:5%;
    width:100%;
    height:100%;
    text-align:center;
    background-color:rgba(47,79,140,.85); 
    z-index:99999999999;
  }

  /* All Sidebar Modules */

  .moduleTopBar{
    width:100%;
    height:30px;
    text-align:left;
    line-height:25px;
    color:#fff;
    background-color:#3a5894;
    border:1px solid #aaa;
    cursor:pointer;
  }

  .moduleToggle{
    width:25px;
    text-align:center;
  }

  .moduleOptionsWrap{
    text-align:right;
    font-size:10pt;
    padding-right:10px;
  }


  .moduleOption{
    cursor:pointer;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  /* leftSidebar */
  .leftSidebarWrap{
    position:absolute;
    top:0px;
    left:0px; 
    /* width:350px; */
    width:25px;
    height:100%;
    background-color:transparent;
    z-index:40; 
    overflow:hidden !important;
  }
 
  .leftMenuWrap{  
    position:relative;
    float:left;
    width:25px;
    background-color:transparent;
    color:#fff;
    text-align:center;
    height:100%;
    line-height:100%; 
    z-index:11;
    border-radius:30px;
    cursor:pointer; 
  }

  .leftMenuWrap:hover{
    background-color:#4f77dc;
    /* border-right:1px solid #3161df; */
  }

  #leftSidebarTop{
    position:relative;
    height:100%;
  }
  

  #leftSidebarMiddle,#leftSidebarBottom{
    position:relative;
    overflow:auto !important;
    height:100%;
  }


  .leftMenuButton{
    position:absolute;
    top:45%;
    left:7px;
    /* width:95%;
    padding-top:12px;
    padding-bottom:10px; */
  }

/*   .leftMenuButton:hover,.leftMenuBoxedItem:hover{
    background-color:rgba(255,255,255,.2);
    cursor:pointer;
  }
 */
  .leftMenuBoxedItem{
    width:80%;
    text-align:center;
    font-size:10pt;
    border:1px solid #fff;
    background-color:transparent; 
    color:#fff;
    margin: 0 auto;
    margin-bottom:10px; 
  }

  .leftMenuBoxedItem.active{
    border:1px solid #000;
    color:#000;
    background-color:#fff;
  }

  
  .leftSidebarMain{
    display:none;
    margin-left:25px;
    width:auto;
    height:100%;
    background-color:transparent;
    overflow:hidden !important;
  } 



  .leftSidebarImportWrap{
    padding-top:5px;
    padding-left:15px;
    padding-right:15px;
    border-top:1px solid #ccc;
  }

  .leftSidebarImportButton{
    cursor:pointer;
  }


  /* Right Sidebar */
  .rightSidebarWrap{
    position:absolute;
    top:0px;
    right:0px;
    /* width:350px; */
    width:25px;
    height:100%;
    background-color:#5b81dc;
    z-index:20;
  }

  .rightMenuWrap{  
    position:relative;
    float:left;
    width:25px;
    background-color:transparent;
    color:#fff;
    text-align:center;
    height:100%;
    z-index:11;
    border-radius:30px;
    cursor:pointer;
  }

  .rightMenuWrap:hover{
    background-color:#4f77dc;
    border-left:1px solid #3161df;
  }


  .rightMenuWrap .active{
    background-color:#16378F;
    color:#263d71;
  }

  .rightMenuButton{
    position:absolute;
    top:45%;
    right:7px;
    /* width:95%;
    padding-top:12px;
    padding-bottom:10px; */
  }

  .rightMenuButton:hover{
    /* background-color:rgba(255,255,255,.2);
    cursor:pointer; */
  }
  
  .rightSidebarMain{
    display:none;
    float:left;
    width:312px;
    height:100%;
    background-color:#d6dff5;
    border-left:1px solid #000;
    overflow-x:auto;
    overflow-y:auto; 
  } 

  #rightSidebarTop{
    overflow-y:auto;
  }

  #rightSidebarMiddle{

  }
  

  #rightSidebarBottom{
    position:relative;
    z-index:10;
    background-color:#d6dff5;
  }



  /* Right Sidebar Views */
  .toggleSwitchWrap{
    margin: 0 auto;
    margin-top:15px;
    width:80%;
    border:1px solid #757575;
  }

  .toggleSwitchItem{
    float:left;
    text-align:center;
    width:50%;
    cursor:pointer;
  }

  .toggleSwitchWrap .active{
    background-color:#757575;
    color:#fff;
  }

  .dropdownWrap{
    text-align:center;
    padding-top:15px;
  }
  
  .dropdownWrap select{
    width:80%;
    color:rgba(58,88,148,1);
  }

  .itemRow{
    border-top:1px solid #bac1d1;
  }

  .itemRow:last-child{
    border-bottom:1px solid #bac1d1;
  }

  .itemCol{
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    padding-top:3px;
    padding-bottom:3px;
    cursor:pointer;
    color:rgba(58,88,148,1);
  }

  .itemCol:first-child{
    border-right:1px solid #bac1d1;
  }

  .itemCol:last-child{
    
  }

  .rightSidebarViewsVisibleWrap{
    position:relative;
  }

  .rightSidebarViewsVisibleEye{
    color:rgba(58,88,148,.25);
  }

  .rightSidebarViewsVisibleItem .active{
    color:rgba(58,88,148,1);
  }

  .rightSidebarViewsClose{
    position:absolute;
    right:5px;
    line-height:28px;
  }



  /* Search */

  .searchModuleWrap{
    position:relative;
    
  } 

  .mainSearchBox{
    text-align:center;
    width:97%;
    margin: 0 auto;
    margin-top:3px;
    margin-bottom:3px;
  }


  .searchDropDown{
    display:none;
    position:absolute;
    z-index:1000;
    top:39px;
    width:100%;
    background-color:#fff;
    color:#505050;
  }

  .searchDropDownHeader{
    background-color:#606060;
    font-size:12pt;
    text-align:center;
    height:25px;
    color:#fff;
  }

  .searchDropDownCol1{
    display:inline-block;
    width:15%;
    border-bottom:1px solid #ccc;
  }

  .searchDropDownCol2{
    display:inline-block;
    width:60%;
    border-bottom:1px solid #ccc;
  }

  .searchDropDownCol3{
    display:inline-block;
    width:25%;
    border-bottom:1px solid #ccc;
  }

  .searchDropDownItem{
    width:100%;
    height:25px;
    font-size:12pt;
    text-align:center;
    cursor:pointer;
  }

  .searchDropDownItem:hover{
    background-color:#0f45b7 !important;
    color:#fff;
  }


  /* Desktop */

  .desktopMain{
    position:relative;
    background-color:#5b81dc;
    width:auto;
    margin-left:25px;
    margin-right:25px;
    height:100%;
  }

  .statusBarWrap{

    width:100%;
    height:4%;  
    padding-top:2px;
    padding-bottom:2px;
    padding-left:10px;
    border-top:1px solid #000;
    background-color:#16378F;
    color:#fff;
  }

 
  .statusBar5RABoxSpacer{

  }



  /* views */
  /* all */

  /* Resize (jquery-ui */
  
  .ui-icon, .ui-widget-content .ui-icon {
    background-image: url(libs/jquery-ui/ui-icons_444444_256x240.png) !important; 
  }  

  /* brings active view to front */
  .viewActive{
    z-index:20 !important; 
    -moz-box-shadow: 0px 0px 25px rgba(255,255,255,.5) !important;
    -webkit-box-shadow: 0px 0px 25px rgba(255,255,255,.5) !important;
    box-shadow: 0px 0px 25px rgba(255,255,255,.5) !important;
  }

  .viewsWrap{
    position:absolute;
    border:1px solid rgba(0,0,0,.2);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    background-color:#4d70cc;
    /* border-radius:25px 25px 0 25px; */
    min-width:325px;
    min-height:325px;
    overflow:hidden;
    z-index:12;  
  }

  .viewIcon{
    width:15px;
    height:auto;
    margin-right:5px;
    cursor:pointer;
  }

  .viewMainWrap{
    width:100%;
    height:100%;
    overflow:hidden;
    color:#fff;
  }

  .viewTopBar{
    position:relative;
    padding-right:12px;
    width:100%;
    height:20px;
    text-align:left;
    line-height:25px;
    color:#fff;
    background-color:#16378F;
    border-bottom:1px solid #000;
    border-radius:26px 26px 0 0;
  }

  .viewTopBarMiddle{
    position:absolute;
    width:100%;
    text-align:center;
    top:0px;
  }

  .viewTitle{
    position:relative;
    padding-left:15px;
    display:inline-block;
    color:#fff;
    font-weight:bold;
    z-index:25;

  }

  .fullscreenButton{
    position:relative;
    top:4px;
    float:right;
    cursor:pointer;
    font-size:14px;
    color:rgba(255,255,255,.4);
  }

  .fullscreenButton:hover{
    color:rgba(255,255,255,1);
  }

  .closeButton{
    margin-left:8px;
  }

  .saveButton{
    margin-right:20px;
  }

  /* dataTables */
  .dataTableViewWrap{
    position:absolute;
    top:0px;
    left:550px;
    width:900px;
    height:600px;
    z-index:10;
    overflow:hidden;
    background-color:#f8f8f8;
  }



  /* Tree Component */

  .treeRegisterWrap{
    margin-left:3%;
    margin-right:3%;
    border:1px solid #ddd;
    height:30px;
    background-color:#eee;
  }
  

  .treeRegisterTable td{

    width:14%;
    padding:.5%;
    font-size:10pt;
    text-align:center;

    height:30px;
  }

  .treeRegisterTableBack{
    cursor:pointer;
  }

  .no_checkbox > i.jstree-checkbox {
    display:none;
  }

 
  /* Web View */
  .webViewWrap{
    position:absolute;
    background-color:#000;
    min-width:636px;
    min-height:485px;
    z-index:11;
    overflow:hidden;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;  
  }  

  .webViewMainWrap,.sensorViewMainWrapYoutube{
    position:relative;
    width:100%;
    height:100%;
  }

  .webView{
    width:100%;
    height:100%;
    background-color:#000;
  }

  .webViewURL{
    display:inline;
    position:relative;
    top:-2px;
    width:180px;
    height:24px;
    margin-left:25px;
    margin-top:2px;
    font-size:10pt;
    padding:0px;
    line-height:10pt;
  } 

  .webViewIframe{
    width:100%;
    height:430px;

  }

  .webViewFavoritesOverlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#fff;
    color:#808080;
  }

  .webViewFavoritesOverlay .itemCol{
    border:none;
  }

  .webViewFavoritesOverlay .itemRow{
    border-bottom:1px solid #bac1d1;
  }

  .webViewButtonBar .active,.sensorViewButtonBarYoutube .active{
    color:#ffa500; 
  }


  .favoriteButtons{
    font-size:11pt;
    cursor:pointer;
    margin-left:5px;
  }



  /* Sensor View (Youtube) Component */
  .sensorViewMainWrapYoutube{
    width:100%;
    height:100%; 
  }

  .sensorViewYoutubeWrap{
    position:absolute;
    background-color:#000;
    min-width:636px;
    min-height:490px;
    z-index:11;
    overflow:hidden;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;  
  }  

  .sensorViewYoutube{
    width:100%;
    height:100%;
    background-color:#000;
    text-align:center;
  }

  #sensorViewYoutubePlayer{
    display:none;
    width:100%;
    height:328px;
    background-color:#000;
    text-align:center;
  }

  .sensorViewYoutubeURL{
    display:inline;
    position:relative;
    top:-2px;
    width:180px;
    height:24px;
    margin-left:25px;
    margin-top:2px;
    font-size:10pt;
    padding:0px;
    line-height:10pt;
  } 


  .sensorViewYoutubeIframe{
    width:100%;
    height:480px;

  }


  video::-webkit-media-controls-fullscreen-button {
      display: none;
  }

  video::-internal-media-controls-download-button {
      display:none;
  }

  video::-webkit-media-controls-enclosure {
      overflow:hidden;
  }

  video::-webkit-media-controls-panel {
      width: calc(100% + 30px); /* Adjust as needed */
  }


  /* Mindmap View */
  .mindmapViewTopBar .viewTopBarMiddle{
    top:-2px;
    font-size:14px;
  }

  #mindMap{
    width:100%;
    height:100%;
  }

  .mindmapViewTopBar .buttons{
    opacity:.5;
    cursor:pointer;
  }

  .mindmapViewTopBar .viewTopBarMiddle .active{
    top:-2px;
    font-size:14px;
    font-weight:bold;
    opacity:1;
  }

  .viewsMindMapWrap{
    min-width:420px;
    min-height:420px;
  }

  .viewsMindMapWrap .fileData{
    position:relative;
    bottom:4px;
    color:rgba(255,255,255,.4);
    font-size:13px;
    display:inline-block;
    /* opacity:.4; */
    min-width:100px;
    background-color:#3D5FBA;
    border-radius:0 25px 0 0;
    padding-left:10px;
    padding-right:16px;
  }

  .viewsMindMapWrap .textWrap{
    height:100%;
    background-color:#fff;
    color:#000;
    display:none;
  }

  .viewsMindMapWrap #menu{
    color:#404040;
  }

  .context-menu-list{
    font-size:14px;
    max-width:26em;
  }


  /* Mindmap Menu */

  .mindmapSidebarMenu{

  }

  .mindmapSidebarMenu hr{
    margin-top:22px;
    margin-bottom:0px;
  }

  .mindmapMenuTitle{
    padding-top:3px;
    background-color:#16378F;
    color:#fff;
    text-align:center;
  }

  .mindmapMenuSubTitle{
    margin-top:15px;
    margin-bottom:20px;
    color:#ebeffa;
    text-align:center;
    background-color:#5668bc;
    border-bottom:1px solid #aaa;
    border-top:1px solid #aaa;
  }

  .mindMapMenuStyles{
    margin: 0 auto;
    text-align:center;
    width:30%;
    font-weight:normal;
    color:#808080;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
  }

  .mindMapMenuStyles .fa{
    cursor:pointer;
    padding-left:5px;
    padding-right:5px;
  }

  .mindMapMenuStyles .fa:hover{
    color:#404040;
  }

  .borderR{
    border-right:1px solid #aaa;
  }

  .borderL{
    border-left:1px solid #aaa;
  }

  .borderLR{
    border-left:1px solid #aaa;
    border-right:1px solid #aaa;
  }


  .mindMapMenuButtonBar{
    text-align:center;
    padding-top:23px;
    padding-left:23px;
    padding-right:23px;
  }

  .mindMapMenuButton{
    cursor:pointer;
    display:inline-block;
    font-size:40px;
    color:#1f4ed3a6;
  }

  .mindmapMenuColorsWrap{
    text-align:center;
    padding-top:15px;
  }

  .mindmapMenuColors{
    margin-top:5px;
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:10px;
    border:1px solid #aaa;
    cursor:pointer;
  }

  .mindmapMenuNodeControls,.mindmapMenuOtherControls{
    position:relative;
    margin-top:15px;
    padding-left:20px;
    padding-right:10px;
    font-size:12pt;
  }

  .mindmapMenuNodeControls select{
    margin-bottom:5px;
  }

  .mindmapMenuOtherControls {
    text-align:center;
  }

  .mindmapMenuOtherControls select{
    width:90% !important;
    margin: 0 auto !important;
  }
 
  .mindmapMenuNodeShape{
    position:relative;
    padding-top:4px;
    padding-bottom:0px;
    padding-left:15px;
    width:210px;
    font-size:10pt;
    margin-left:5px;
    height:30px;
    border-radius:15px;
  }

  .mindmapMenuOtherControls .mindmapMenuNodeShape{
    width:180px;
  }

  .mindmapMenuButton{
    width:90%;
    margin: 0 auto;
    margin-top:10px;
    height:30px;
    line-height:30px;
    cursor:pointer;
    color:#404040;
    text-align:center;
    background-color:#ebeffa;
    border-radius:15px;
    border:1px solid #aaa;
  }

  .mindmapMenuButton:hover{
    background-color:#dde2f7;
  }

  .mindmapMenuButton .fa{
    color:#aaa;
    padding-right:10px;
  }

  .mindMapKeyboardButton{
    cursor:pointer;
    position:absolute;
    bottom:25px;
    right:50px;
    font-size:50px;
    opacity:.3;
    z-index:100;
  }

  .mindMapKeyboardButton:hover{
    opacity:.9;
  }
 
  .mindMapKeyboardOverlay{
    display:none;
    position:absolute;
    color:#2651b3;
    top:20%;
    left:28.5%;
    width:40%;
    height:50%;
    background-color:rgba(255,255,255,.95);
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -o-border-radius:15px;
    border-radius:15px;
    -moz-box-shadow: 15px 15px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: 15px 15px 10px rgba(0,0,0,.2);
    box-shadow: 15px 15px 10px rgba(0,0,0,.2);
    overflow:hidden;
    z-index:100;
  }

  .mindMapKeyboardOverlay h1{
    margin-top:0px;
    margin-bottom:0px;
    height:10%;
    padding-left:25px;
    background-color:#2651b3;
    color:rgba(255,255,255,.9);
  }


  .mindMapKeyboardOverlay h2{
    margin:0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    color:#2651b3;
  }

  .mindMapKeyboardOverlayClose{
    cursor:pointer;
    position:absolute;
    font-size:25px;
    background-color:#2651b3;
    color:rgba(255,255,255,.9);
    right:20px;
    top:10px;
  }

  .mindMapKeyboardOverlayMain{
    height:85%;
    overflow-y:auto;
  }
  
  .mindMapKeyboardOverlayTable{
    border-collapse:collapse;
  }

  .mindMapKeyboardOverlayTable tr { 
    border-bottom: 1px solid rgba(148,156,146,.2); 
  }

  .mindMapKeyboardOverlayKey{
    background-color:#5b81dc;
    color:#fff;
    padding-left:5px;
    padding-right:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
  }

  .mindMapKeyboardOverlayCol1{
    width:50%;
    padding-left:10px;
  }

  .mindMapKeyboardOverlayCol2{
    width:50%;
  }



  /* Connections View */
  .connectionsWrap, .timelineWrap{
    min-width: 455px;
  }

  #connectionsSidebar{
    position:relative !important;
    width:100%;
    min-width:0px !important;
    border-radius:0px !important;
    height:100% !important;
    min-height:100%;
    background-color:#4f77dc !important;
    opacity:.97; 
  }

  .connectionsMainWrap{
    height:100%;
    overflow-y:auto;
    
  }

  .connectionsMainWrap .searchBox, .timelineMainWrap .searchBox{
    width:90%;
    font-size:14pt;
    border-radius:25px;
    background-color:rgba(255,255,255,.9);  
    border:none;
    padding-left:15px;
    padding-right:15px;
  }

  .connectionsMainWrap h1, .timelineMainWrap h1{
    border-bottom:1px solid #6888dc;
    margin-bottom:30px;
  }

  .connectionsMain{ 
    padding-bottom:50px;
    margin:25px;
    margin-right:25px;
  }

  .connectionsMenu{
    cursor:pointer;
    font-size: 26px;
    position: relative;
    right: -13px;
    top: 3px;
  }


  /* Timeline View */

  .timelineMainWrap{
    height:100%;
    overflow-y:auto;
  }

  .timelineDate{
    position:relative;
    top:-16px;
    margin-bottom:0;
    margin-left:15px;
    color:#d6dff5;
    font-weight:bold;
    font-size:14pt;
    text-shadow: 2px 2px 0px rgba(0,0,0,.2);
  }

  .timelineDateDay{
    margin-left:5px;
    color:#a9bff7;
    font-weight:normal;
    text-shadow: none;
  }

  .timelineCard{
    position:relative;
    margin-bottom:10px;
    color:#d6dff5;
    padding:25px;
    background-color:#3f57bd;
    border-radius:25px;
    box-shadow: 3px 3px 1px rgba(0,0,0,.1);
    overflow-wrap:anywhere;
  }

  .timelineCard:hover{
    background-color:#374ea8;
    box-shadow: 0px 0px 16px rgba(255,255,255,.8);
    cursor:pointer;
  }

  .timelineCardIcon{
    position:absolute;
    width:40px;
    height:auto;
    margin-bottom:0px;
    margin-right:10px;
  }
  
  .timelineCardFilename{
    display:inline-block;
    width:230px;
    height:25px;
    overflow:hidden;
    margin-left:55px;
    font-size:17px;
    font-weight:bold;
  }

  .timelineCardFilePath{
    opacity:.5;
    font-size:12px;
    margin-left:54px;
    margin-right:54px;
  }

  .timelineCardTime{
    margin-left:55px;
    font-size:14px;
    margin-top:-10px;
    color:#d6dff5;
  }

  .timelineCardTrash{
    position: absolute;
    opacity: .5;
    right: 30px;
    top: 35px;
    font-size: 24px;
    z-index:10;
  }

  .timelineCardTrash:hover{
    opacity: 1;
  }

  .el-timeline-item__tail{
    border-left:2px solid #6888dc;
    box-shadow: 3px 3px 1px rgba(0,0,0,.1);
  }

  .el-timeline-item__node{
    background-color:#809de2;
    box-shadow: 3px 3px 1px rgba(0,0,0,.1);
  }
 
  .el-timeline-item__timestamp{
    color:#fff;
  }

  .el-card{
    background-color:rgba(255,255,255,.9);
  }


  /* Custom Scrollbars */

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
    cursor:auto;
  }

  /* button */
  ::-webkit-scrollbar-button {
    background: transparent;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #6888dc;
    border-radius:5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #3f57bd;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background:transparent;
  }

  /* The track NOT covered by the handle.
  ::-webkit-scrollbar-track-piece {
      background: #000;
  }

  /* Corner */
  ::-webkit-scrollbar-corner {
      background: #999;
  }

  /* Resizer */
  ::-webkit-resizer {
      background: #111;
  }
    

  /* Notes View */

  .notesViewsWrap{
    min-width:500px;
    min-height:528px;
  }

  .notesViewsWrap .viewBottomBar{
    /* background-color:#16378F; */
  } 

  .notesTitle{
    position:relative;
    height:40px;
    z-index:10;

  }

  .notesTitle input{
    background-color:#ecf0fb; 
    box-shadow: 0px 0px 20px rgba(0,0,0,.2);
    cursor:default !important;
  }
 
  .notesMainWrap{
    height:100%;
    background-color:#d6dff5;
  }

  .notesMain{ 
    width:100%;
    color:#000; 
    padding-bottom:45px;
  }

  .ql-editor{
    position:relative;
    overflow-x:hidden;
    top:-16px;
    width:100%;
    font-size:14pt;
    padding-top:25px;
    padding-left:25px;
    padding-right:25px;
    cursor:default;
  }