* {
box-sizing: border-box;
}

html, body {
overflow-x: hidden;
}

body {
position: relative;
background-color: #fff;
font-family: "Calibri", "Roboto", sans-serif;
}

#pulse {
position: fixed;
z-index: 300000;
left:10px;
top:10px;
color:#fff;
font-family: Arial;
font-size:12px;
}

#console {
font-family: Arial;
font-weight: normal;
width:250px;
background: rgba(255,255,255,0.075);
position: fixed;
right:0px;
top:0px;
height: 100%;
z-index: 300000;
}

#console #mylog {
font-size: 12px;
color:#fff;
padding:10px;
overflow-y: scroll;
height: 100%;
}

.chat_window {
}

.top_menu {
background-color: #fff;
width: 100%;
padding: 20px 0 15px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
margin: 3px 0 0 20px;
position: absolute;
}
.top_menu .buttons .button {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.top_menu .buttons .button.close {
background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
background-color: #a3d063;
}
.top_menu .title {
text-align: center;
color: #bcbdc0;
font-size: 20px;
}

.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages {
    overflow: scroll;
    overflow-x: hidden;
}
.messages::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
.messages::-webkit-scrollbar-thumb {
    background: #FF0000;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
font-family: Arial;
}
.messages .message.left .avatar {
background-color: #f5886e;
float: left;
}
.messages .message.left .text_wrapper {
background-color: #ffe6cb;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ffe6cb;
}
.messages .message.left .text {
color: #c48843;
}
.messages .message.right .avatar {
background-color: #fdbf68;
float: right;
}
.messages .message.right .text_wrapper {
background-color: #c7eafc;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #c7eafc;
}
.messages .message.right .text {
color: #45829b;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
border-radius: 6px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
word-break: break-word;
}
.bottom_wrapper {
width: 100%;
background-color: #fff;
padding: 20px 20px;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
width: 100%;
box-sizing: border-box;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
border-radius: 50px;
background-color: #a3d063;
border: 2px solid #a3d063;
color: #fff;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #a3d063;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}

.message_template {
display: none;
}

#botMenu {
position: absolute;
right:15px;
top:15px;
}

:focus {
outline: none;
}
.row {
margin-right: 0;
margin-left: 0;
}
/*
Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
A quick fix is to change .side-menu to

-> position:absolute

and uncomment the code below.
You also need to uncomment

-> <div class="absolute-wrapper"> </div> in the html file

you also need to tweek the animation. Just uncomment the code in that section
--------------------------------------------------------------------------------------------------------------------
If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}

.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
z-index: 20000;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
background-color: transparent;
margin-right: -1px;
border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
font-family: 'NTR', sans-serif;
text-transform: uppercase;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;padding: 15px 18px;
}
/* Main body section */
.side-body {
margin-left: 310px;
}
/* small screen */
@media (max-width: 768px) {
#console {
display: none;
}
.side-menu {
position: relative;
width: 100%;
height: 0;
border-right: 0;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: inline-block;
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
/* Slide side menu*/
/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
.side-menu-container > .navbar-nav.slide-in {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side-menu-container > .navbar-nav {
/* Add position:absolute for scrollable menu -> see top comment */
position: fixed;
left: -300px;
width: 300px;
top: 43px;
height: 100%;
border-right: 1px solid #e7e7e7;
background-color: #f8f8f8;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Uncomment for scrollable menu -> see top comment */
/*.absolute-wrapper{
width:285px;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}*/
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-moz-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
/* Slide side body*/
.side-body {
margin-left: 5px;
margin-top: 70px;
position: relative;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.body-slide-in {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Hamburger */
.navbar-toggle {
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #f3f3f3;
}
/* Search */
#search .panel-body .navbar-form {
border-bottom: 0;
}
#search .panel-body .navbar-form .form-group {
margin: 0;
}
.navbar-header {
/* this is probably redundant */
position: fixed;
z-index: 3;
background-color: #f8f8f8;
}
/* Dropdown tweek */
#dropdown .panel-body .navbar-nav {
margin: 0;
}
}

#logo img {
width:100%;
height: auto;
}

#logo {
width:120px;
margin:0 auto;
z-index: 2;
position: relative;
}

#logoDashboard img {
width:100%;
height: auto;
}

#logoDashboard {
width:120px;
margin:0 auto;
margin-top:30px;
}

#loginFB {
width: 200px;
margin:0 auto;
margin-top:15px;
}

#copyright {
text-align: center;
padding:15px;
color:#fff;
position: relative;
z-index: 2;
}

#copyright a {
color:#fff;
text-decoration: underline;
}

#copyright a:hover {
text-decoration: none;
}

.pageContent {
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
line-height: 1.5em;
word-break: break-word;
font-size: 16px;
text-align: center;
}

.pageContent a {
color:#333;
text-decoration: underline;
}

.pageContent a:hover {
text-decoration: none;
}

#associationsGrid {
font-size:16px;
}

.alert {
border:1px solid;
}

.highlight {
background-image: -webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
background-image: -o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));
background-image: linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
display: inline;
padding: .2em .6em .3em;
font-weight: 700;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
border:1px solid;
cursor: pointer;
color:#3c763d;
}

.missing {
background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
background-image: -o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));
background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
background-repeat: repeat-x;
border-color: #dca7a7;
border:1px solid;
color:#a94442;
}

.default {
background-image: -webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);
background-image: -o-linear-gradient(top,#d9edf7 0,#b9def0 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));
background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
background-repeat: repeat-x;
border-color: #9acfea;
border:1px solid;
color: #31708f;
}

.associationLine {
margin-bottom:10px;
border-bottom:1px solid #ccc;
padding-bottom:10px;
line-height: 1.5em;
}

.variables {
padding-top:5px;
padding-bottom:5px;
}

textarea {
resize: none;
}

.contentTree {
margin-top:15px;
}

#slogan {
text-align: center;
z-index: 2;
position: relative;
color:#fff;
}

#logoTitle {
text-align: center;
margin-top:15px;
z-index: 2;
position: relative;
color:#fff;
}

#logoTitle h1 {
padding:0px;
margin:0px;
font-family: 'NTR', sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size:42px;
}

.pageContent h3 {
font-family: 'NTR', sans-serif;
text-transform: uppercase;
}

canvas {
position: fixed;
}

#logoFrame {
width:300px;
height:300px;
z-index: 2;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}

#kioskFrame {
width:300px;
height:200px;
z-index: 2;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}


#kioskFrame p {
color:#fff;
text-align: center;
}

.userInputDistinct {
padding-bottom:5px;
}

.nav-tabs li {
font-weight: bold;
}

#clock {
text-align: center;
color:#fff;
margin-top:10px;
}

#kioskInput {
position: fixed;
background: rgba(0,0,0,0.1);
bottom:0px;
width:100%;
z-index: 20000;
}

#kioskInput input {
width: 100%;
border:0px;
padding:15px;
background: none;
color:#fff;
font-size:22px;
}

#kioskInput ::-webkit-input-placeholder {
color:#fff;
}

#kioskInput :-moz-placeholder { /* Firefox 18- */
color:#fff;
}

#kioskInput ::-moz-placeholder {  /* Firefox 19+ */
color:#fff;
}

#kioskInput :-ms-input-placeholder {
color:#fff;
}

#particles-js {
background: #ff5b37; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#ff5b37, #fb2b69); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ff5b37, #fb2b69); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ff5b37, #fb2b69); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ff5b37, #fb2b69); /* Standard syntax */
position: fixed;
width:100%;
height:100%;
}

#blackout {
position: fixed;
background: #000;
height:100%;
width:100%;
z-index: 2;
display: none;
}

#backgroundplayer {
position: fixed;
padding-bottom: 56.25%; /* 16:9 */
height: 100%;
display: none;
z-index: 3;
}

#backgroundplayer iframe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}