* { box-sizing:border-box; /*transition: all 1s;*/ color:#444; font-family:'Proxima nova','helvetica neue',sans-serif;  background-size:contain; background-repeat:no-repeat; text-align:center; } 
td { vertical-align:middle; } 
table { height:100%; border-spacing:0; } 
html,
body {  margin:0; padding:0; position:relative; overflow:hidden; width:100%; height:100%;  } 

#messagecontainer { width:350px; height:320px; margin:0 auto; border-radius:6px; padding:30px; background-color:#fff; text-align:center; box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.35); z-index:100; position:relative;}  

#title { font-size:20px; margin-bottom:40px; } 
#message { font-size:18px; line-height:140%; } 
#inner { display:inline-block; }

#top { height:80px; width:100%; }
#appbar       { width:100%; height:40px; background-repeat:repeat-x; background: linear-gradient(to bottom, rgba(0, 146, 207, 1) 0, rgba(0, 121, 178, 1) 100%); }

#whitelogo    { width:22px; height:26px; background-repeat:norepeat; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMiAyNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjIgMjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE4LjkzLDBoLTE2Yy0xLjY1LDAtMywxLjM1LTMsM3YyMGMwLDEuNjUsMS4zNSwzLDMsM2gxNmMxLjY1LDAsMy0xLjM1LDMtM1YzQzIxLjkzLDEuMzUsMjAuNTgsMCwxOC45MywwegoJIE0xNyw3aC00LjV2MTJIMTd2M0g1di0zaDQuNVY3SDVWNGgxMlY3eiIvPgo8L3N2Zz4K'); float:left; }
#dataselector { background-color:#6f7475; width:300px; height:100%; }
#workspacebar { width:100%; height:50px; overflow:hidden; } 
#wb { background-color:#fff; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4); width:100%; height:40px; }
.pill { height:12px; border-radius:14px; display:inline-block; }
.lb1 {  background-color:#e5f5ff; }
.lb2 {  background-color:#88bbde; opacity:0.8; }
.selected { background-color:#0079b2; transition:all 1s; }
.inputbox { width:100%; height:25px; background-color:#eee; border-radius:3px; }

.selected .pill { background-color:#fff; opacity:1; }

.item { position:relative; width:100%; height:32px; border-top:1px solid #888; }
.selected-item { position:absolute; margin-left:-6px; background-color:#515358; height:100%; width:0; border-left:6px solid lightblue; }

.pillcontainer { line-height:26px; margin-left:7px; } 
.w20 { width:20px; }
.w35 { width:35px; }
.w50 { width:50px; }
.w80 { width:80px; } 
.w100 { width:100px; }

#appbar { position:absolute; top:0; left:0; }

#appbar-content  { margin-left:-100px; }
#workspacebar-content { /* margin-left:-600px;*/ opacity:0; } 

#appbar-content td,
#workspacebar-content td { line-height:51px; }
#workspacebar-content td { padding:0 20px; transition:all 1s; }
#whitelogo { display:inline-block; }
#dataselector { position:absolute; left:0; margin-left:-300px; top:80px; height:calc(100% - 60px); z-index:0; animation-delay:3s; }
#workspacebar { position:absolute; top:0px; opacity:1; z-index:0; left:0; }

#top { position:absolute; top:-80px; }

#dataselector-content { margin:20px; height:calc(100% - 60px); width:calc(100% - 40px); }
.right { position:absolute; right:20px; }
.center { margin:0 auto; }

.vspace-20px { height:20px; position:relative; }
.margin-top20px { margin-top:20px; }
.margin-top30px { margin-top:30px; }
.margin-top40px { margin-top:40px; }

#dsitemcontainer  { width:100%; position:absolute; top:130px; }
.dsitems { width:0; }
#dataselector #dsitemcontainer .dsitems td { padding:0; }
#dataselector-content { opacity:0; }

  body.white { background-color:#fff; }
  #lines-vertical,
  #lines-horizontal { border-radius:100%; overflow:hidden; background-size:528px 450px; background-position:center; width:650px; height:600px; opacity:0; }

 #lines-vertical:after,
 #lines-horizontal:after {
    position:absolute; content:''; width:100%; height:100%; 
    box-shadow: inset 0 0 200px 130px #fff; left:0; top:0; border-radius:100%;
}

.rotate-horizontal { transform:rotate(90deg); }
.vert-line { width:1px; height:100%; background-color:#888; margin:0 25px; display:inline-block; float:left;  }

.objects-container {  z-index:100; position:absolute; top:0; left:100%; width:100%; height:100%;  }
.objects-container2 {  z-index:100; position:absolute; top:0; left:0; width:100%; height:100%;  } 

.chartbar-horizontal { height:18px; border-radius:3px; opacity:0.3; }

.cb1 { margin-top:70px; width:350px; position:absolute; right:0; background-color:#066fca; }
.cb2 { margin-top:250px; width:550px; position:absolute; right:0;  background-color:#066fca;}
.cb3 { margin-top:480px; width:300px; position:absolute; right:0; background-color:#066fca; } 

.box { position:absolute; right:150px; border:1px solid rgb(6, 111, 202); overflow:hidden; height:18px; border-radius:3px; opacity:0.7; width:300px; margin-top:350px;  }
.stripe { width:100%; height:calc(100% + 5px); position:relative; -webkit-backface-visibility:hidden; background-image: linear-gradient(45deg, #ffffff 43.75%, #076fca 43.75%, #076fca 50%, #ffffff 50%, #ffffff 93.75%, #076fca 93.75%, #076fca 100%); background-size: 11.31px 11.31px; background-repeat:repeat;  }

.diamond-blue { background-color:#066fca; width:15px; height:15px; border-radius:2px; transform:rotate(45deg); position:absolute; opacity:0; }
.d1 { top:130px; left:50%; }
.d2 { top:200px; left:30%; }
.d3 { top:540px; left:42%; }


#lines-horizontal { opacity:0; }

#line-plot { position:absolute; left:-500px; }

#line-plot-gradient { background-image:url('images/wakeup_line_plot2.png'); width:274px; height:171px; position:absolute; left:200px; top:185px; opacity:0.5; }
.dots { top:200px; left:150px; width:10px; height:10px; border-radius:100%; background-color:#066fca; position:absolute;  }
.c1 { margin-top:4px;   margin-left:90px;  }
.c2 { margin-top:24px;  margin-left:149px; }
.c3 { margin-top:-18px; margin-left:206px; }
.c4 { margin-top:8px;  margin-left:260px; }
.c5 { margin-top:9px;  margin-left:320px; }

.vertical-bars { margin-left:20px; width:40px; background-color:#066fca; height:400px; bottom:-500px; position:absolute; border-radius:3px; opacity:0.45; }

.b1 { left:400px; height:330px; }
.b2 { left:480px; height:515px;  }

.white  { background-color:#fff; }
.grey { background-color:#eee; }

#sciforma-logo { position:absolute; left:40px; top:40px; width:174px; height:32px; background-image:url('images/sciforma_logo.png'); background-size:contain; opacity:0; }

.left-side { position:absolute; left:-200px; bottom:-200px;  }
.right-side { position:absolute; right:-180px; top:-30px; }

#leaf { width:32px; height:32px; background-size:contain; background-image:url('images/64px_green_leaf.png');  margin-top:30px; display:inline-block; }