html {
  word-spacing: pre-line;
  word-break: normal;
  -ms-word-break: normal;
  word-wrap: break-word;
}

/*  Back to top offset */
.regular_main {
  margin-bottom: 30px;
}
/*  Dashboard smartgreeting container padding */
.smartgreeting {
  padding: 10px 25px;
  margin-top: 35px;
}
@media screen and (max-width: 600px) {
    .smartgreeting {
        padding: 0;
        margin-top: 0;
    }
}

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

.alert.alert-dismissable {
  margin-bottom: 0px;
}

.card-container {
    padding: 15px 15px !important;
}

.table-experiments {
  margin-top: 30px;
  font-size: 0.9em;
}

.table-experiments td {
  padding: 15px 30px !important;
}

.table-experiments th {
  padding: 15px 30px !important;
}

.table-experiments > thead {
  color: #fff;
  background-color: #585d76;
  font-weight: normal;
}

.table-experiments > thead > tr > th {
  font-weight: normal;
  margin-left: 15px;
}

.table-experiments > thead > tr > th > a {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

.table-experiments > tbody {
  border-top: 1px solid #333333 !important;
}

body.admin_dashboard #ajax_messages {
  margin-top:0px;
}

.responsive-table-item.show-heading .column-heading {
  display: block !important;
}

.list-item-padding {
  margin-bottom: 10px;
}

.list-item-gray-bg, .row-odd {
  background-color: #f5f5f5;
}

input[name="token-otp_token"]::-webkit-outer-spin-button,
input[name="token-otp_token"]::-webkit-inner-spin-button,
input[name="validation-token"]::-webkit-outer-spin-button,
input[name="validation-token"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[name="token-otp_token"],
input[name="validation-token"] {
    -moz-appearance:textfield;
}

.sparkline {
  height: 55px;
  max-height: 55px;
  border: 1px solid #999999;
}

.item-list li.active {
  z-index: 2;
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  border-bottom: 1px solid #d5d5d5;
}

#assessment-round {
  margin-bottom: 10px;
}
#assessment-round > .text-lead {
  text-decoration: underline;
}

table.behaviour_table {
    margin-top:10px;
    width: 100%;
}
table.behaviour_table thead th {
    background:#DBE8F6;
    text-align:left;
    /*width:110px;*/
    margin:0px;
    padding:6px 10px;
    font-weight:bold;
    color:#225378;
}
table.behaviour_table thead th.status_column {
    width:160px;
}
table.behaviour_table tbody td{
    background:#E9F1FA;
    text-align:left;
    margin:0px;
    padding:3px;
    vertical-align:top;
}
table.behaviour_table td.status_row {
    padding-right:0px;
}
table.behaviour_table td.status_row div {
    margin-bottom:10px;
}

div.video-actionbar {
  position: absolute;
  height: 120px;
  top: 6px;
  right: 38px;
  z-index: 101;
}
div.actionbar a, div.actionbar span  {
  background-color: #111;
}

table.table_input {
    width: 100%;
    table-layout:fixed;
}
table.table_input textarea, table.table_input input {
    width: 100%;
    padding: 0px;
    border: 1px solid black;
}

div.block {
    margin:1.4em 0;
    max-width:800px;
}
div.block p {
    margin:1em 1em 1em 0;
}

div.block li p {
    margin:0;
}

div.block ul {
    margin:5px 0 15px 25px;
}
div.block ul li {
    margin:0 0 3px;
}

div.block img {
    margin-right: 1em;
    margin-left: 1em;
}

.key_points {
    background:#F5F7CC;
    padding:20px 25px 1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin:30px 0px;
}

.key_points > h3 {
  margin-top: 0px;
}

.errorlist {
  list-style-type: none;
  color: #C1752A;
}

/* Slider styles */
input[type=range] {
  -webkit-appearance: none;
  margin: 4.65px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 5px;
  border: 0.1px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 5px;
  border: 0.1px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.1px solid #010101;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.1px solid #010101;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  height: 6.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

input.user-modified::-webkit-slider-thumb {
  background: #C1752A;
}

input.user-modified::-moz-range-thumb {
  background: #C1752A;
}

input.user-modified::-ms-thumb {
  background: #C1752A;
}
/* End slider styles */

/* Start Search bar animation styles */
.search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 22px;
  height: 22px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form-always-on .form-group  {
    width: 100% !important;
    border-radius: 4px 25px 25px 4px !important;
}
.search-form .form-group input.form-control {
  padding-right: 20px;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
  /* Firefox 18- */
  display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
  /* Firefox 19+ */
  display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
  width: 100%;
  border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 2;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #333333;
  left: initial;
  font-size: 14px;
}

.sidebar .mejs-container, .fsMenu-content .mejs-container {
    display: none;
}

.remember img {
    margin: 5px;
}

/* Start recorder styles */
.recorder {
    margin-bottom: 10px;
}

.level {
    min-width: 30px;
    min-height: 30px;
    position: relative;
    padding: 0;
}

.progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, #8bb300 0%, #3b9d00 100%);
}

/*
 bootstrap bar import
 */
.bs-progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bs-progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.bs-progress.active .bs-progress-bar,
.bs-progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
/*
 end of progress bar import
*/

.start-recording, .start-recording:hover {
    color: #BF2B26;
}

.file-picker {
    display: none;
}

.hide-submit {
    position: absolute;
    visibility: hidden;
}

.item .text-lead:hover {
    text-decoration: underline;
}

.behaviour_table .deleted {
    color:#999;
}

.behaviour_table tr {
    border-bottom: 3px solid #ffffff
}

a:hover {
  position: relative;
}

a[aria-label]:hover:after {
  content: attr(aria-label);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  width: 220px;
}


.highlight {
  padding: 2px 4px;
  color: #fff;
  background-color: #C1752A;
  border-radius: 4px;
}


.flash_message {
    color: #FFFFFF;
    padding: 7px 10px 7px 14px;
    cursor:pointer;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    float:left;
    margin-right:6px;
}

.flash_success { background:url("../img/style/80pct_green.6a487796ae35.png"); }
.flash_warning { background:url("../img/style/80pct_orange.b001b802d853.png"); }
.flash_error { background:url("../img/style/80pct_red.d6dbd724926e.png"); }

.message_text {
    float:left;
}

.message_text a{
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
}

.message_icon {
    float:left;
    width:13px;
    height:13px;
    margin-left: 8px;
    margin-top: 2px;
}

.flash_success .message_icon { background:url("../img/style/small-white-tick.a3d38a0b2d45.png"); }
.flash_warning .message_icon { background:url("../img/style/small-white-exclamation-mark.9295f02df67e.png"); }
.flash_error .message_icon { background:url("../img/style/small-white-exclamation-mark.9295f02df67e.png"); }

.message_body {
    word-break: break-word;
}


/* for notes and experiments tinymce */
.inline-text[contentEditable="true"]:focus,
.inline-text[contentEditable="true"]:hover {
    outline: 2px solid #1976D2;
}

.inline-text[contentEditable="true"]:focus,
.inline-text[contentEditable="true"]:hover {
    outline: 2px solid #1976D2;
}

.inline-title[contentEditable="true"]:focus,
.inline-title[contentEditable="true"]:hover {
    outline: 2px solid white;
}

.experiment .inline-text {
  outline: 1px dotted #1976D2;
  border-radius: 3px;
  min-height: 80px;
}

.experiment {
    margin: 0px;
    padding: 1em 0 0;
}

.experiment .card-header {
    padding-top: .25em;
    padding-bottom: .25em;
    padding-left: .5em;
    padding-right: .5em;
    background: rgba(0,0,0,.03) !important;
    color: #0d0d0d;
}

.experiment .card {
    margin: 0px;
}

experiment-actions  {
    text-align: center;
}
experiment-actions .btn {
    margin-bottom: .5em;
}

card-header, card-content, card-footer {
    display: block !important;
}

card-section {
    display: block !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

card-footer {
    border-top: none !important;
}

cardfield {
    padding-top: .5em;
    padding-left: 1em;
    padding-right: .5em;
    padding-bottom: .5em;
    display:block;
}

cardfield.highlight2 .inline-text {
    background: #fcf8e3
}


.experiment-dialog-link {
    color: black;
}

.experiment-dialog-link:hover {
    cursor: pointer;
    background-color: #fdfdfd;
}

.experiments-tab a {
    margin-bottom: .15em;
}

.responsive-card .add-padding {
  padding: 20px 15px;
}

@media screen and (max-width: 1024px) {
 .responsive-card {
    box-shadow: 0px 1px 13px 4px rgba(0, 0, 0, 0.23);
    margin: 20px 0;
    background-color: #fff;
    border-radius: 4px;
 }
}
@media screen and (min-width: 1024px) {
 .summary-table {
    background-color: #fff;
    border-radius: 4px;
 }
}

/* bootstrap datetime picker have days outside the current month view greyed
 * out which is confusing, making all days #777 makes them consistent */
.bootstrap-datetimepicker-widget table td.day {
    color:#777
}

@media screen and (max-width: 1024px) {
    #experiment-dialog {
        max-width: 85%;
        margin-left: 5px;
        margin-right: 5px;
    }
}