/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 29.02.2016, 15:00:48
    Author     : danielkuenkel
*/
* {-webkit-font-smoothing: antialiased;}

/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese  */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext  */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin  */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
    padding-bottom: 70px;
}

.danger {
    color:#d9534f;
}
.info{
    color: #5bc0de;
}
.primary {
    color:#337ab7;
}
.warning {
    color: #f0ad4e;
}

.success {
    color:#5cb85c;
}

.modal {
    padding-top: 30px;
    padding-bottom: 100px;
    z-index: 10000;
}


.btn {
    border-radius: 8px;
}

.form-control {
    border-radius: 8px;
    height: auto;
}

.nav-tabs>li>a {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.nav-pills>li>a {
    border-radius: 8px;
}
.progress {
    border-radius: 8px;
}

.alert {
    border-radius: 8px;
}

.btn-group-vertical>.btn:first-child:not(:last-child) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.btn-group-vertical>.btn:last-child:not(:first-child) {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.overlay-title-editable {
    cursor: pointer;
    margin: 0;
    height: 34px;
}

.overlay-title-editable :hover{
    color: #696969
}

.btns-control-overlay-top {
    position: fixed;
    right: 20px;
    z-index: 1;
    box-shadow: 0px 0px 13px 9px rgba(255,255,255,1);
    background-color: white;
}



.popover {
    z-index: 10003; /* A value higher than 1010 that solves the problem */
    position: fixed;
    pointer-events: none;
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus
button:focus,
button:active,
button:visited,
button:hover
{
    outline:0px !important;
    -webkit-appearance:none;
}

textarea {
    max-height: 300px;
    min-height: 34px;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

.btn-group-addon {
    cursor: default;
    background-color: #eeeeee;
    color: #696969;
}

.btn-group-addon:hover {
    background-color: #eeeeee;
    border-color: #cccccc;
    color: #303030 !important;
}

.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.custom-pagination {
    margin-top: 30px;
}

.pagination-custom {
    margin: 0;
}

.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    margin-left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}



h2 {
    color: #303030;
}

h4 {
    line-height: 1.375em;
    color: #303030;
}  

.text-green {
    color: #5bb85c;
}

.font-bold {
    font-weight: bold;
}

.font-italic {
    font-style: italic;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.progress-bar {
    -webkit-transition: initial !important;
    -o-transition: initial !important;
    transition: initial !important;
}

.progress-bar.active, .progress.active .progress-bar {
    -webkit-animation: initial !important;
    -o-animation: initial !important;
    animation: initial !important;
}

.navbar-brand {
    cursor: pointer;
    padding: 15px 0px;
}

.jumbotron {
    background: url('../img/footer_lodyas.jpg') repeat center;
    background-color: #303030;
    color: #fff;
    padding: 80px 25px 80px 25px;
    margin-bottom: 0;
    font-family: Montserrat, sans-serif;
    text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
}

.line {
    position: relative;
    height: 3px; 
    z-index: 2;
    top: -50px;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .2);

    background: #5cb85c;
    background: -moz-linear-gradient(left, #5cb85c 0%, #75ea75 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #5cb85c 0%,#75ea75 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #5cb85c 0%,#75ea75 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb85c', endColorstr='#75ea75',GradientType=1 ); /* IE6-9 */
}

.navbar-fixed-index-container.affix {
    top:-266px !important;
    width: 100%;
    z-index: 10000;
}

.affix + #affix-logo {
    opacity: 1;
}

.container-fluid {
    padding-top: 40px;
    padding-bottom: 80px;
}
.bg-grey {
    background-color: #f6f6f6;
}
.logo-small {
    color: #5bb85c;
    font-size: 50px;
}
.icon-lg {
    color: #5bb85c;
    font-size: 60px;
}
.icon-xl {
    color: #5bb85c;
    font-size: 80px;
}
.icon-xxl {
    color: #5bb85c;
    font-size: 100px;
}

.panel-heading h2 {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 65%;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: bold;
}

.panel-default {
    border-radius: 8px;
}
.panel-default>.panel-heading {
    border-color: rgba(0,0,0,0);
}


.btn-panel {
    cursor: pointer;
    border: none;
    box-shadow: 0px 0px 10px rgba(0,0,0, .2);
    transition: box-shadow 0.15s;
    border-radius: 8px;
}
.btn-panel:hover {
    -webkit-box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    -moz-box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    box-shadow: 0px 5px 10px rgba(0,0,0, .3);
}
.btn-panel .panel-heading {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.btn-panel .panel-body {
    padding: 0;
}
.btn-panel .panel-content {
    padding: 10px 15px 10px 15px;
}
.panel-shadow {
    border: none;
    box-shadow: 0px 0px 10px rgba(0,0,0, .2);
    transition: box-shadow 0.15s;
    border-radius: 8px;
}
.panel-shadow>.panel-heading{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.panel-heading-warning {
    background-color: #FBEAD1 !important;
}
.panel-heading-success {
    background-color: #D3ECD3 !important;
}
.panel-heading-primary {
    background-color: #B1CFE9 !important;
}

.sub-page-header {
    margin-bottom: 0;
    background-color: #303030;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}

.navbar-fixed-index {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    background-color: transparent;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
    top:-50px;
}

.navbar-fixed-top .dropdown-menu, .navbar-fixed-index .dropdown-menu, .sub-page-header .dropdown-menu {
    background-color: #696969;
}
.navbar-fixed-top .dropdown-menu li a, .navbar-fixed-index .dropdown-menu li a, .sub-page-header .dropdown-menu li a  {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0pt;
    font-weight: bold;
    color: #f6f6f6 !important;
}
.navbar-fixed-top .dropdown-menu li a:hover, .navbar-fixed-index .dropdown-menu li a:hover, .sub-page-header .dropdown-menu li a:hover {
    color: white !important;
    background-color: #444;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: #5bb85c;
}
.navbar-default .navbar-nav>.open>a .burger-line, .navbar-default .navbar-nav>.open>a>:focus .burger-line, .navbar-default .navbar-nav>.open>a>:hover .burger-line {
    background-color: #DEF1DF !important;
    box-shadow: 0px 1px 1px 0px rgba(56,130,57,1);
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: #303030;
}
.navbar-fixed-top li a, .navbar-fixed-top .navbar-brand,
.navbar-fixed-bottom li a, .navbar-fixed-bottom .navbar-brand {
    color: #fff !important;
}
.navbar-fixed-index li a {
    color: #fff !important;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-weight: bold;

}

.navbar-fixed-top  .navbar-toggle,
.navbar-fixed-bottom  .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}
.navbar-fixed-bottom {
    min-height: 20px;
}
footer .fa {
    font-size: 25px;
    color: #696969;
}

.main-burger-menu .fa {
    min-width: 16px;
}

.breadcrumb li {
    opacity: 0;
}
.flag-small {
    width: 16px;
    margin-top: -2px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,.4);
    margin-right: 3px;
}

.burger-line {
    border-radius: 2px;
}

.gn {
    color: #B85B90;
}

.label {
    padding: 3px 7px 3px;
    margin-right: 2px;
    border-radius: 7px;
}

.btn-gn {
    color: white;
    border-color: #B85B90;
    background: #B85B90;
}
.btn-gn:hover{
    background: #99366E;
    border-color: #99366E;
    color: white;
}
.btn-gn-green {
    border-radius: 24px;
}

.btn-shadow
{
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.btn-shadow:hover {
    -webkit-box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    -moz-box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    box-shadow: 0px 5px 10px rgba(0,0,0, .3);
}

.btn-lg {
    font-weight: bold;
}

.btn-xl {
    font-size: 22pt;
    padding: 15px 25px 15px 25px;
    font-weight: bold;
    border-radius: 10px;
}

.btn-xxl {
    font-size: 27pt;
    padding: 20px 30px 20px 30px;
    font-weight: bold;
    border-radius: 13px;
}

.btn-show-info {
    cursor: pointer;
}

.navbar-fixed-bottom .nav-pills {
    letter-spacing: 1px;
    margin-top: 9px;
    font-size: 10px;
    color: white;
    text-transform: uppercase;
}
.navbar-fixed-bottom .nav-pills :hover, .nav-pills .btn-primary {
    background-color: transparent !important;
    border-color: white;
    border: 2px white;
    text-decoration: underline;
}

.breadcrumb {
    background-color: transparent;
    margin-bottom: 0px;
}
.breadcrumb a {
    color: #777777 !important;
}
.breadcrumb a:hover {
    color: #303030 !important;
}
.breadcrumb>.active {
    font-weight: bold;
    color: #303030;
}
.breadcrumb>li+li:before {color: #777777; content: "\276F\00a0";}


li.selected {
    background-color: #e7e7e7;
}

.has-error label {
    color: #a94442;
}
.has-error .btn-radio {
    color: #a94442;
}

.btn-radio.active.focus, .btn-radio.active:focus, .btn-radio.focus, .btn-radio:active.focus, .btn-radio:active:focus, .btn-radio:focus,
.btn-checkbox.active.focus, .btn-checkbox.active:focus, .btn-checkbox.focus, .btn-checkbox:active.focus, .btn-checkbox:active:focus, .btn-checkbox:focus{
    background-color: #337ab7;
}

.checkbox .option-text, .radio .option-text {
    position: relative;
    top: -4px;
}

.checkbox .form-control, .radio .form-control {
    position: relative;
    top: -6px;
}

.stepper-text {
    z-index: 10;
}

label {
    color: #333333;
}

.text-select-disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.readonly {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events:none;
}
.readonly-without-mouse {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.uppercase {
    text-transform: uppercase;
}

.shadow {
    -webkit-box-shadow: 0px 4px 7px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 4px 7px rgba(0,0,0, .2);
    box-shadow: 0px 4px 7px rgba(0,0,0, .2);
}

#resize-sign {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.rtc-shadow {
    -webkit-box-shadow: 0px 0px 7px rgba(0,0,0, .4);
    -moz-box-shadow: 0px 0px 7px rgba(0,0,0, .4);
    box-shadow: 0px 0px 7px rgba(0,0,0, .4);
}

#checkbox, #radio, #radio-optionalanswer, #checkbox-optionalanswer {
    margin-top: 5px;
}

.btn-checkbox, .btn-radio {
    height:34px;
    border: none;
    background-color: rgba(255,255,255,0);
}

.btn-checkbox #icons, .btn-radio #icons {
    font-size: 14pt;
    position: relative;
    top: -3px;
}

.btn-checkbox .option-text, .btn-radio .option-text {
    position: relative;
    top: -5px;
}

.btn-checkbox:hover, 
.btn-radio:hover {
    background-color: #337ab7;
    color: #fff !important;
}

.btn-checkbox.disabled:hover,
.btn-checkbox[disabled]:hover,
.btn-radio.disabled:hover,
.btn-radio[disabled]:hover {
    background-color: #337ab7;
    color: #fff !important;
}

.btn-checkbox:hover > .option-text, .btn-radio:hover > .option-text {
    color: #fff !important;
}

.btn-option-checked {
    background-color: #337ab7;
    color: #fff !important;
}

.btn-option-checked .option-text {
    color: #fff !important;
}

#ageSlider .slider-selection {
    background: #C4C4C4;
}

#ageSlider .slider-handle {
    background: #337ab7 !important;
}

.switchButtonAddon {
    background-color: #eeeeee;
    color: #696969;
}
.switchButtonAddon:hover {
    background-color: #eeeeee;
    border-color: #cccccc;
    color: #303030 !important;
}

.btn-addon {
    background: #eeeeee !important;
    border-color: #cccccc !important;
    color: #696969 !important;
}

.btn-addon:hover {
    color: #303030 !important;
    box-shadow: none;
}

.text-1px-border
{
    text-shadow: 
        -1px -1px 0px #000,
        0px -1px 0px #000,
        1px -1px 0px #000,
        -1px  0px 0px #000,
        1px  0px 0px #000,
        -1px  1px 0px #000,
        0px  1px 0px #000,
        1px  1px 0px #000;
}

.text-2px-border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
        0px -1px 0px #000,
        1px -1px 0px #000,
        -1px  0px 0px #000,
        1px  0px 0px #000,
        -1px  1px 0px #000,
        0px  1px 0px #000,
        1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
        0px -2px 0px #000,
        1px -2px 0px #000,
        2px -2px 0px #000,
        2px -1px 0px #000,
        2px  0px 0px #000,
        2px  1px 0px #000,
        2px  2px 0px #000,
        1px  2px 0px #000,
        0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}


.recorder {
    border-radius: 8px;
    overflow: hidden; 
    width: 100%; 
}

.recorder #recorder-video, .rtc-stream {
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

.recorder #seek-bar, .recorder #trim-seek-bar, .recorder #trim-bar {
    cursor: pointer;
}

.btn-joint-human-body {
    position: absolute; 
    font-size: 18pt; 
    cursor: pointer;

}
.btn-joint-human-body-answer {
    position: absolute; 
    font-size: 18pt; 
    color: #C4C4C4;
}

.joint-text-score {
    position: absolute;
    color: #ffffff;
    font-size: 8pt;
    line-height: 19pt;
    width: 20px;
}

.btn-joint-human-body #toggle-icon {
    color: #C4C4C4;
}

.btn-joint-human-body #toggle-icon:hover {
    color: #337ab7;
}
.btn-joint-human-body.active > #toggle-icon {
    color: #337ab7;
}
.btn-joint-human-body.active > #toggle-icon-back {
    color: white;
}

.joint-human-body {
    position: absolute; 
    font-size: 18pt; 
    color: #C4C4C4;
}

.joint-human-body.active > #toggle-icon, .joint-human-body.active > #toggle-icon:hover {
    color: #337ab7;
}
.joint-human-body.active > #toggle-icon-back, .joint-human-body.active > #toggle-icon-back:hover {
    color: white;
}


.text {
    color: #303030;
}

.panel-sm .panel-heading, .panel-sm .panel-body {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.panel-sm .panel-footer {
    padding-top: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.rating-container {
    margin-bottom: 15px;
}

.rating-stars-container {
    font-size: 16pt;
    color: orange;
    margin-top: -8px;
}

.rating-headling {
    font-size: 10pt;
    line-height: 1.2em;
}

.btn-gesture-rating {
    overflow: hidden;
    display: inline;
}

.btn-gesture-rating-clickable {
    cursor: pointer;
}

.wall {
    padding-bottom: 20px;
    background: url(../img/shattered.jpg) repeat center;
    -webkit-box-shadow: inset 0px -3px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px -3px 5px 0px rgba(0,0,0,0.1);
    box-shadow: inset 0px -3px 5px 0px rgba(0,0,0,0.04);
}

.wall .greenGrey {
    margin: 0;
}

.dropShadowText {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
}

.text-shadow-black {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

.tooltip-inner {
    min-width: 200px;
}

.item-factors-separator {
    margin-left: -6px; 
    margin-right: -4px;
}

.rtc-local-container video {
    border-radius: 8px;
}

.rtc-remote-container video {
    border-radius: 8px;
    background-color: #eee;
}

#remote-stream {
    opacity: 0;
}

#local-stream {
    opacity: 0;
}

.btn-stream-control-text {
    font-size: 8pt;
}

#stream-controls {
    display: flex !important;
}

.stream-control {
    background-color: rgba(0,0,0,.7);
    border:0px;
    color: white;
    border-radius: 25px;
}
.stream-control:focus,
.stream-control.focus,
.stream-control:active,
.stream-control.active{
    outline: none;
    color: white;
    cursor: pointer;
}
.stream-control:hover {
    background-color: rgba(0,0,0,.7);
    border-color: rgba(0,0,0,.7);
    color: white;
}
.stream-control.disabled:hover,
.stream-control[disabled]:hover,
fieldset[disabled] .stream-control:hover {
    background-color: rgba(0,0,0,.7);
    border-color: rgba(0,0,0,.7);
    color: white;
}

#stream-control-indicator {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.add-button-group .btn-group {
    margin-bottom: 10px;
}

.add-button-group .btn-group:nth-child(n+1) {
    margin-right: 10px;
}

.btn-show-info {
    cursor: help;
}


.disabledTab {
    cursor: not-allowed;
}
/* Clicks are not permitted and change the opacity. */
li.disabledTab > a[data-toggle="tab"] {
    pointer-events: none;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}


.btn-popover-gesture-preview {
    height: 34px;
}

.carousel-caption {
    width: 100%;
    left:0px;
    bottom:0;
    background-color: rgba(0,0,0,.6);
}

.carousel-caption h4 {
    margin-top: 0px;
    color: white;
}
.carousel-caption h4, .carousel-caption p {
    padding-left: 20px;
    padding-right: 20px;
}

.carousel-indicators {
    bottom: 0px;
}

/*#help-description img, #news-list img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}*/

.img-image {
    margin-top: 20px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.svg-image {
    margin-top: 20px;
}

#help-description {
    color: #000;
}

#help-description p {
    margin-bottom: 10px;
}

#help-description h4 {
    margin-top: 30px;
}

.image-with-caption {
    position: relative;
}

.image-caption {
    width: 100%;
    color: #888;
    margin-bottom: 25px;
    font-size: 10pt;
    line-height: 11pt;
}

.table-caption {
    font-size:10pt; 
    color:#888; 
    margin-bottom:25px
}

#help-description .image-border-rounded {
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 20px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0 0px 20px;
    box-shadow: 0px 0px 20px rgba(0,0,0, .5);
}

@media (max-width: 991px) {
    .toggle-affix {
        position: static;
    }
    .overlay-header-container {
        padding-right: 110px;
    }
}

@media (min-width: 992px) {
    .toggle-affix {
        position: fixed;
        top: 150px;
        margin-right: 15px;
    }
}

.toggle-dynamic-affix-hidden {
    opacity: 0;
    -webkit-transition:opacity 100ms ease-out;
    -moz-transition:opacity 100ms ease-out;
    -o-transition:opacity 100ms ease-out;
    transition:opacity 100ms ease-out;
}

.toggle-dynamic-affix-unhidden {
    opacity: 1;
    -webkit-transition:opacity 300ms ease-out;
    -moz-transition:opacity 300ms ease-out;
    -o-transition:opacity 300ms ease-out;
    transition:opacity 300ms ease-out;
}


.hover-cell {
    cursor: pointer;
}

.hover-cell:hover {
    background-color: #f5f5f5 !important;
}


.btn-color-selector {
    display: inline-block;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 4px solid white;
}

.btn-color-selector.selected {
    border: 4px solid #cccccc !important;
}

.btn-color-selector.darkblue {
    background-color: #337ab7
}
.btn-color-selector.green {
    background-color: #5cb85c
}
.btn-color-selector.blue {
    background-color: #5bc0de
}
.btn-color-selector.yellow {
    background-color: #f0ad4e
}
.btn-color-selector.red {
    background-color: #d9534f
}
.btn-color-selector.grey {
    background-color: #5a5a5a;
}
.btn-color-selector.none {
    background-color: #eceae7;
}

.btn-observer-color-selector {
    display: inline-block;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid white;
    margin-right: 3px;
}

.btn-observer-color-selector.darkblue {
    background-color: #337ab7
}
.btn-observer-color-selector.green {
    background-color: #5cb85c
}
.btn-observer-color-selector.blue {
    background-color: #5bc0de
}
.btn-observer-color-selector.yellow {
    background-color: #f0ad4e
}
.btn-observer-color-selector.red {
    background-color: #d9534f
}
.btn-observer-color-selector.grey {
    background-color: #5a5a5a;
}

.bs-example {
    margin-right: 0;
    margin-left: 0;
    background-color: #fff;
    border-color: #ddd;
    border-width: 1px;
    border-radius: 8px;
    border-style: solid;
}

.bs-example-headline {
    position: relative;
    background-color: #ddd;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #999;
    padding: 0px 15px 0px 15px;
    display: inline-block;
    font-weight: bold;
}

.bs-example-body {
    padding: 15px 15px 15px 15px;
}


/*
* rigged hand canvas
*/
canvas {
    pointer-events: none;
}

.slider-handle {
    cursor: pointer;
}


/*
* control for sensor playback
*/
.controls-container {
    position: absolute;
}
.controls-container .hidden-controls-container-btn {
    opacity: 0;
}

.controls-container-btn, .hidden-controls-container-btn {
    cursor: pointer;
}

.controls-container-btn, .hidden-controls-container-btn:hover {
    opacity: .9 !important;
}

.controls-container .btn-toggle-playback {
    position: absolute;
    width: 56px;
    height: 56px;
    background-color: #333333;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

.controls-container .btn-toggle-playback i{
    color: white;
    position: relative;
    top: 12px;
}

.controls-container .application-btn {
    color: white;
    position: relative;
    background-color: rgba(0,0,0,.6);
    padding: 0px 10px 0px 10px;
    display: inline-block;
    margin-right: -4px;
}
.application-btn-top-right {
    left:100%;
    transform: translateX(-100%);
}
.application-btn-bottom-left {
    position: absolute !important;
    left: 0px;
    bottom: 0px;
}
.application-btn-bottom-right {
    left:100%;
    transform: translateX(-100%);
    top: 100%;
    transform: translateY(-100%);
}

.controls-container .application-btn:hover {
    background-color: rgba(0,0,0,.8);
}


.controls-container .application-btn-top-left-single {
    border-radius: 8px 0px 10px 0px;
}
.controls-container .application-btn-top-left-first {
    border-radius: 8px 0px 0px 0px;
}
.controls-container .application-btn-top-left-last {
    border-radius: 0px 0px 10px 0px;
}


.controls-container .application-btn-bottom-left-single {
    border-radius: 0px 10px 0px 0px;
}
.controls-container .application-btn-bottom-left-first {
    border-radius: 0px 0px 0px 0px;
}
.controls-container .application-btn-bottom-left-last {
    border-radius: 0px 10px 0px 0px;
}


.controls-container .application-btn-top-right-single {
    border-radius: 0px 10px 0px 8px;
}
.controls-container .application-btn-top-right-first {
    border-radius: 0px 0px 0px 8px;
}
.controls-container .application-btn-top-right-last {
    border-radius: 0px 10px 0px 0px;
}


.controls-container .application-btn-bottom-right-single {
    border-radius: 0px 8px 0px 10px;
}
.controls-container .application-btn-bottom-right-first {
    border-radius: 0px 0px 0px 10px;
}
.controls-container .application-btn-bottom-right-last {
    border-radius: 0px 8px 0px 0px;
}

.read-aloud {
    line-height: 14pt; 
    font-weight: bold;
    display: inline-block;
}
.read-aloud-icon {
    position: relative;
    top: 3px;
    float: left;
    cursor: pointer;
    font-size: 16pt;
    padding-right: 10px; 
}
.read-aloud-text {
    overflow:hidden; 
    display:block;
    color: black;
    padding-top: 3px;
    margin-bottom: 10px;
}

/*
* carousel control styles
*/
.carousel-control {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    background-image: none !important;
}

.carousel-control .fa-chevron-left {
    position: relative;
    right: 40px;
}

.carousel-control .fa-chevron-right {
    position: relative;
    left: 40px;
}

.carousel-caption p {
    line-height: 12pt;
    padding-bottom: 20px;
}

.custom-panel-headline {
    position: relative;
    background-color: #ddd;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 10px;
    color: #999;
    padding: 0px 15px 0px 15px;
    display: inline-block;
    font-weight: bold;
}

.panel-footer-gesture-set {
    background-color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


.shared-study-item-email {
    margin-right: 5px;
}
.shared-gesture-set-item-email {
    margin-right: 5px;
}

.btn-uninvite-user {
    cursor: pointer;
}
.btn-uninvite-user:hover {
    color: #d9534f
}

.window-sized-loading {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    bottom: 0px;
    left:0px;
    right:0px;
    background-color: rgba(0,0,0,0.6); 
    z-index: 1000;
}

.window-sized-loading .fa {
    position: relative; 
    top: 50%; 
    transform: translate(-50%,-50%); 
    color:white;
}


.btn-block+.btn-block {
    margin-top: 0px
}

.record-stream-indicator {
    color: red;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translate(-50%, 0px);
    opacity: 0; 
    display: flex;
    cursor: pointer;
}

.rtc-results-controls-container {
    position: absolute;
    opacity:0;
    top:0px;
    left: 15px;
    bottom: 0;
    right: 15px;
    transition: opacity 0.3s;
}

.rtc-results-controls-container:hover {
    opacity:1;
}

#popover-scene, #popover-image-elem {
    z-index: 1000;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,0.8) 0px 5px 10px;
    -moz-box-shadow: rgba(0,0,0,0.8) 0 5px 10px;
    box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    background-color: #eee;
}

#popover-image-elem img {
    border-radius: 8px;
}

#popover-leap {
    z-index: 1000;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,0.8) 0px 5px 10px;
    -moz-box-shadow: rgba(0,0,0,0.8) 0 5px 10px;
    box-shadow: 0px 5px 10px rgba(0,0,0, .3);
    background-color: #eee;
}

#btn-leave-room:hover {
    color: #d9534f !important;
}

.input-group-addon {
    border-radius: 8px;
    height: 34px;
}

.btn-group-sm .btn {
    border-radius: 8px;
}

.cognitive-relationships-list-container > :first-child { 
    margin-top: 0 !important; 
}

.cognitive-relationships-list-container > :nth-child(even) { 
    background-color: #fbfbfb;
}

.help-overlay {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
    width: 400px;
    position: fixed;
    height: 100vh;
    right: 0px;
    z-index: 100;
    padding-left: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    background-color: white;
}

.btn-help-popover-resize {
    width: 4px;
    height: 30px;
    background-color: #d2d2d2;
    border-radius: 50px;
    position: fixed;
    top: 50%;
    transform: translate(-25px,-50%);
    cursor: col-resize;
}

.btn-help-popover-resize:hover {
    background-color: #777777;
}

body.not-scrollable {
    overflow-x: hidden;
    overflow-y: hidden;
}




/*
 * dark mode classes
 */

.dark {
    background-color: #696969;
    color: rgba(255,255,255,.7);
}


.dark .panel {
    background-color: #545454;
    color: #cccccc;
}
.dark .panel-heading {
    background-color: #4c4b4b;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-color: rgba(0,0,0,0) !important;
}

.dark .panel-default {
    border-color: #777;
}

.dark .panel-heading-success {
    background-color: #5cb85c !important;
}

.dark .panel-heading-primary {
    background-color: #337ab7 !important;
}

.dark .panel-heading-warning {
    background-color: #f0ad4e !important;
}

.dark .panel-footer {
    background-color: #545454 !important;
    border-top: 1px solid #656464;
}

.dark .text {
    color: white !important;
}

.dark .btn-default {
    background-color: #3e3d3d;
    border-color: #464646;
    color: rgba(255,255,255,.8);
}
.dark .btn-default:hover, .dark .btn-default:focus {
    background-color: #3e3d3d;
    border-color: #464646;
    color: white
}
.dark .btn-default.disabled:hover {
    background-color: #3e3d3d;
    border-color: #464646;
}
.dark .btn-default.active {
    background-color: #2d2d2d;
    color: white;
    border-color: #464646;
}

.dark .btn-default.active:hover, .dark .btn-default.active:focus {
    background-color: #2d2d2d;
    color: white;
    border-color: #464646;
}


.dark .btn-radio.active.focus, .dark .btn-radio.active:focus, .dark .btn-radio.focus, .dark .btn-radio:active.focus, .dark .btn-radio:active:focus, .dark .btn-radio:focus, .dark .btn-radio:hover, 
.dark .btn-checkbox.active.focus, .dark .btn-checkbox.active:focus, .dark .btn-checkbox.focus, .dark .btn-checkbox:active.focus, .dark .btn-checkbox:active:focus, .dark .btn-checkbox:focus, .dark .btn-checkbox:hover{
    background-color: #3e3d3d !important;
    color: white;
    border-color: #464646;
}

.dark .btn-radio, .dark .btn-checkbox {
    background-color: rgba(0,0,0,0) !important;
}

.dark .btn-checkbox.disabled:hover,
.dark .btn-checkbox[disabled]:hover,
.dark .btn-radio.disabled:hover,
.dark .btn-radio[disabled]:hover {
    background-color: #3e3d3d !important;
    color: #fff !important;
}

.dark .btn-option-checked {
    background-color: #3e3d3d !important;
}

.dark h2, .dark h3, .dark h4 {
    color: #ffffff !important;
}

.dark label {
    color:white;
}

.dark .breadcrump-btn {
    color: rgba(255,255,255,.5) !important;
}

.dark .breadcrump-btn:hover, .dark .breadcrump-btn:focus {
    color: white !important;
}

.dark .breadcrumb>li+li:before {
    color: rgba(255,255,255,.5);
}

.dark .breadcrumb>.active {
    color: white;
}

/*.dark .show-dropdown {
    background-color: #3e3d3d;
    border-color: #3e3d3d;
    color: white;
}
*/

.dark .input-group-addon {
    background-color: #3e3d3d;
    border-color: #464646;
    color: white;
}

.dark .form-control {
    background-color: #585858;
    border-color: #464646;
    color: white;
}

.dark .nav-pills>li>a {
    color: white;
    border: none;
}
.dark .nav-pills>li>a:focus, .dark .nav-pills>li>a:hover {
    background-color: #484848 !important;
}
.dark .nav-pills>li.active>a, .dark .nav-pills>li.active>a:focus, .dark .nav-pills>li.active>a:hover {
    background-color: #3e3d3d !important;
}
.dark .nav-pills>li.active>.badge, .dark .nav-pills>li.active>.badge:focus, .dark .nav-pills>li.active>.badge:hover {
    color: black;
}

.dark .nav-tabs>li>a {
    color: white;
}
.dark .nav-tabs>li>a:focus, .dark .nav-tabs>li>a:hover {
    background-color: #484848 !important;
    border: 1px solid #3e3d3d !important;
} 
.dark .nav-tabs>li>a:focus, 
.dark .nav-tabs>li.active>a, .dark .nav-tabs>li.active>a:focus, .dark .nav-tabs>li.active>a:hover {
    color: white;
    background-color: #3e3d3d !important;
    border: 1px solid #3e3d3d !important;
}

.dark .nav-tabs {
    border-bottom: 1px solid #3e3d3d;
}

.dark .date {
    background-color: #585858 !important;
}

.dark .datepicker .day.disabled {
    color: #818181;
}

.dark .datepicker .day, .dark .datepicker {
    color: white;
}

.dark .datepicker .today:before {
    border-bottom-color: #ffffff;
}

.dark .pagination>.disabled>a, .dark .pagination>.disabled>a:focus, .dark .pagination>.disabled>a:hover, .dark .pagination>.disabled>span, .dark .pagination>.disabled>span:focus, .dark .pagination>.disabled>span:hover {
    box-shadow: none;
    opacity: .65;
    border-color: #3e3d3d;
    background-color: #3e3d3d;
}

.dark .pagination>li>a, .dark .pagination>li>span {
    color: white;
    border-color: #3e3d3d;
    background-color: #3e3d3d;
}

.dark .pagination a:hover:not(.active) {
    box-shadow: 0px 2px 10px rgba(0,0,0,.4);
}
/*.dark .pagination>a:focus, .dark .pagination>a:hover, .dark .pagination>span:focus, .dark .pagination>span:hover {
    box-shadow: 0px 2px 10px rgba(0,0,0,.4);
}*/

.dark .pagination>.active>a, .dark .pagination>.active>a:focus, .dark .pagination>.active>a:hover, .dark .pagination>.active>span, .dark .pagination>.active>span:focus, .dark .pagination>.active>span:hover {
    box-shadow: 0px 2px 10px rgba(0,0,0,.4);
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
}
.dark .popover {
    /*background-color: #2f2e2e;*/
    color: #696969 !important;
}
.dark .popover-title {
    color: #696969 !important;
}
/*

.dark .popover[class*=tour-].top .arrow:after {
    border-top-color: #2f2e2e;
}

.dark .popover[class*=tour-].right .arrow:after {
    border-right-color: #2f2e2e;
}

.dark .popover[class*=tour-].bottom .arrow:after {
    border-bottom-color: #2f2e2e;
}

.dark .popover[class*=tour-].right .arrow:after {
    border-left-color: #2f2e2e;
}*/

.dark .modal {
    background-color: rgba(0,0,0,.5);
}

.dark .modal-content {
    background-color: #696969;
}

.dark .modal-content .modal-header {
    border-bottom: 1px solid #7d7d7d;
}

.dark .modal-content .modal-footer {
    border-top: 1px solid #7d7d7d;
}

.dark .modal-header h4 {
    color: white;
}
.dark .close {
    color: white;
    text-shadow: none;
    opacity: .7;
}

.dark .gesture-thumbnail {
    background-color: #545454;
}

.dark .gesture-thumbnail .caption {
    color: white;
}

.dark .gesture-info-symbols {
    background-color: #545454;
    color: white;
}

.dark hr {
    border-top: 1px solid #8a8a8a;
}

.dark .page-header {
    border-bottom: 1px solid #8a8a8a;
}

.dark .bg-grey {
    background-color: #545454;
}

.dark #googleMap {
    opacity: .85;
}

.dark .custom-nav-pills>li.active>a, .dark .custom-nav-pills>li.active>a:focus, .dark .custom-nav-pills>li.active>a:hover {
    color: white;
}

.dark .bs-example {
    background-color: #545454;
    border-color: #545454;
}
.dark .bs-example-headline {
    background-color: #3e3d3d;
    color: #fff;
}

.dark .btn-color-selector {
    border-color: #303030;
}

.dark .image-caption, .dark .table-caption {
    color: #fff !important;
}

.dark .style-headline {
    background-color: #545454 !important;
}
.dark .factor-total-items {
    color: rgba(255,255,255,.7) !important;
}

.dark a {
    color: white;
}

.dark #help-description {
    color: white;
}
.dark .img-image {
    border-radius: 8px;
    box-shadow: 0 0px 10px rgba(0,0,0,.5);
}

#dynamic-link-list-items .active {
    font-weight: bold;
    color: black;
}
.dark #dynamic-link-list-items .active {
    color: white;
}

.dark .informations-subline {
    font-weight: bold;
    color: white;
}

.dark .participant-snapshot {
    background-color: #545454;
}

.dark .bordered-statics {
    border-color: #8a8a8a !important;
}

.dark .vis-timeline {
    background-color: #585858;
}
.dark .progress {
    background-color: #585858;
}

.dark .badge, .dark .label-default {
    background-color: #8c8c8c;
}


.dark .slider-track {
    background-image: none;
    background-color: #4d4c4c;
}

.dark .btn-joint-human-body #toggle-icon-back {
    color: white;
}
.dark .btn-joint-human-body #toggle-icon {
    color: #C4C4C4;
}
.dark .btn-joint-human-body > #toggle-icon:hover {
    color: white;
}
.dark .btn-joint-human-body.active > #toggle-icon {
    color: #c4c4c4;
}
.dark .btn-joint-human-body.active > #toggle-icon-back {
    color: #545454;
}

.dark .joint-human-body.active > #toggle-icon-back {
    color: #545454;
}
.dark .joint-human-body.active > #toggle-icon {
    color: #c4c4c4;
}

.dark #waiting .participant-name {
    color: white !important;
}

.fixed-help-naviation {
    width: 99.9%; 
    height: 80px; 
    position: absolute; 
    z-index: 1; 
    top: 0;
}
.fixed-help-naviation-background {
    width: 99.9%; 
    height: 80px; 
    position: absolute; 
    z-index: 1; 
    top: 0;
    background-image: linear-gradient(rgba(255,255,255,1) 66%, rgba(255,255,255,0));
}
.dark .fixed-help-naviation-background {
    background-image: linear-gradient(rgba(105,105,105,1) 66%, rgba(105,105,105,0));
}

ul.dropdown-menu-center {
    left: 50%;
    transform: translateX(-50%);
}

.dark .hover-cell:hover {
    background-color: #3e3d3d !important;
}

.dark .table-bordered,
.dark .table-bordered>tbody>tr>td, 
.dark .table-bordered>tbody>tr>th, 
.dark .table-bordered>tfoot>tr>td, 
.dark .table-bordered>tfoot>tr>th, 
.dark .table-bordered>thead>tr>td, 
.dark .table-bordered>thead>tr>th {
    border: 1px solid #999;
}

.left-controls {
    position: absolute;
    right: -50px;
    display: grid;
}


.dark .cognitive-relationships-list-container > :nth-child(even) { 
    background-color: #6f6f6f;
}

.dark .btns-control-overlay-top {
    box-shadow: 0px 0px 13px 9px rgba(105,105,105,1);
    background-color: #696969;
}

.dark .help-overlay {
    background-color: #5f5e5e;
    color: white;
}

.dark .btn-help-popover-resize:hover {
    background-color: white;
}