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.png);
}
.flash_warning {
  background: url(../img/style/80pct_orange.png);
}
.flash_error {
  background: url(../img/style/80pct_red.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.png);
}
.flash_warning .message_icon {
  background: url(../img/style/small-white-exclamation-mark.png);
}
.flash_error .message_icon {
  background: url(../img/style/small-white-exclamation-mark.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: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background: rgba(0, 0, 0, 0.03) !important;
  color: #0d0d0d;
}

.experiment .card {
  margin: 0px;
}

experiment-actions {
  text-align: center;
}
experiment-actions .btn {
  margin-bottom: 0.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: 0.5em;
  padding-left: 1em;
  padding-right: 0.5em;
  padding-bottom: 0.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: 0.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;
  }
}

/* Disabled button styling for consistent appearance across the app */
button:disabled {
  background-color: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
  cursor: not-allowed;
}

.card-koa {
  border-radius: 4px;
  border: none;
  outline: none;
  padding: 0px;
}

.card-koa .btn {
  padding: 8px 32px 8px 32px;
  background-color: #e5e5e5;
  border: none;
}

.card-koa .btn:hover {
  color: #fff;
}

.card-koa .btn:disabled {
  color: #fff;
}

.card-koa .alert-warning {
  color: #fff;
  background-color: #f16637;
}

.card-koa .card-footer {
  border-top: none;
}

/* Style for questionnaire connectors */
.box_style {
  border: 1px solid #919191;
  line-height: 1.8rem;
  font-size: 1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.questionnaire_connector p {
  margin: 1em 0em 0.25em 0;
}

.questionnaire_connector {
  padding-left: 0.5em;
  padding-bottom: 1em;
}

.slider > input {
  width: 300px;
  margin: 20px;
}

.take_action {
  background: url(../img/green-tick.png) no-repeat 5px 5px #e3ebd2;
  display: inline-block;
  padding: 5px 15px 5px 30px;
  border-radius: 10px;
  margin: 6px 0;
}

.cadat_quicktip {
  background: url(../img/quicktip.png) no-repeat 15px 25px #fac896;
  display: inline-block;
  padding: 10px 20px 10px 130px;
  border-radius: 10px;
  border: 2px solid #e08040;
  margin: 30px 0px;
}

.cadat_info {
  background: #fac896;
  display: inline-block;
  padding: 10px 20px 1px;
  border-radius: 10px;
  border: 2px solid #e08040;
  margin: 30px 0px;
}

.cadat_prompt {
  background: #e9e5ed;
  padding: 20px 20px 1px;
  font-color: #6a5088;
}

.cadat_write {
  background-image: url(../img/grief/write_icon.png);
  background-repeat: no-repeat;
  background-color: #e3ebd2;
  background-position: 5px 5px;
  background-size: 32px 32px;
  display: inline-block;
  padding: 12px 35px 12px 45px;
  border-radius: 10px;
  margin: 6px 0px;
}

.cadat_example {
  background: #cee9ef;
  padding: 20px 20px 1px;
  border-radius: 10px;
  border: 2px solid #6095c9;
  margin: 20px 0px;
}

.cadat_webcam {
  background-image: url(../img/video-512.png);
  background-repeat: no-repeat;
  background-color: #e3ebd2;
  background-position: 5px 5px;
  background-size: 32px 32px;
  display: inline-block;
  padding: 12px 35px 12px 45px;
  border-radius: 10px;
  margin: 5px 0px;
}

table.mceLayout {
  width: 100% !important;
}

.cadat_highlight {
  background: lightgreen;
  font-color: red;
  padding: 30px;
}

.cadat_quicktip div {
  /* ptsd-test */
  padding: 10px 10px 10px 110px;
}