$white: white;
$read: #FAFAFA;
/* Bootstrap styles */

h1, h2, h3 {
  margin-top: 0px;
}

.not-displayed {
  display: none;
}

/* in bootstrap_theme.css, the .modal-backdrop value is equal to the .modal
   value, resulting in a backdrop on top of the modal */
.modal-backdrop {
  z-index: 1039;
}

/* buttons */

.btn-toolbar, .btn-group {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn-link {
  &:focus, &:active {
    outline: none;
  }
}

/* end buttons */

.input-group.static .form-control-static{
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
   border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  height:29px;
}

.input-group{
  margin-top:10px;
  margin-bottom:10px;
}

abbr.timeago {
  cursor: auto;
}

.list-group-item-unread {
  font-weight:bold;
  background: $white;
}

.list-group-item-read {
  background: $read;
  font-weight: normal;
}

.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}

.label.full-size {
  font-size: 100%;
}

/* main nav */

#main .navbar-header .nav.pull-right {
  margin-right: 10px;
}

/* end main nav */

/* hamburger / snap menu */

#hamburger_button{
  margin-left:15px;
  position: relative;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

#hamburger_button:hover, #hamburger_button:active, .snap-drawers{
  background-color: #DDD;
}

.snap-drawers{
  height: 0;
  overflow: visible;
}

body.snapjs-left .snap-drawers{
  height:auto;
}

.navbar-snap{
  padding-left: 15px;
}

.navbar-snap li{
  border-top:1px solid #D0D0D0;
  border-bottom:1px solid #A0A0A0;

  &.active {
    background-color: white;
  }
}

/* end hamburger / snap menu */

#header-navbar li:hover{
  background-color: #DDD;
}

#alerts{
  max-height:70px;
  overflow-y:hidden;
}

.snap-nav-item span
{
  position: relative;
}

.intensity_btn {
  padding-left: 8px;
  padding-right: 8px;
  width: 9%;
  border: none;
}

tr.inactive {
  background-color: rgb(226, 226, 226);
}

/* footer */

#main {
  overflow:auto;
  padding-bottom: 60px;  /* must be same height as the footer */
  min-height: 350px;     /* ensure drop-down nav menu is visible */
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.footer {
  z-index: auto;
}

.footer .container .text-muted {
  margin: 20px 0;
}

/**************************[Global Styles]************************************/
p.lead                                 { margin-bottom: 10px; }
#wrap                                  { background-color:white; }
/************************[General Tool Styles]********************************/

#tool-layout {
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 24px;
  }
}

#tool-layout h3.panel-title, .tool-content h3.panel-title {
  color: #333;
}

#new_lessons_list p:last-child
{
  margin:0 0 14px 0;
}

#new_lessons_list p.lesson_details
{
  display:block;
  margin:0px;
  font-weight:bold;
  font-style:italic;
  color:#5a5198;  
}

#new_lessons_list p:last-child::after
{
  margin:14px 0 5px 5px;
  font-weight:bold;
  position:absolute;
  right:15px;
  color:#5a5198;
  content:"unread";
  font-style: italic;
}

table caption
{
  font-size: 1.5em;
  font-weight: bold;
}

section#chart p
{
  font-size: 1.2em;
}

div.tooltip {   
  position: absolute;           
  text-align: center;                                            
  padding: 10px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 2px solid gray;      
  border-radius: 8px;           
  pointer-events: none;         
}

ul#nav_main li
{
  cursor:pointer;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}

#chart > div > svg > g > g.grid.y_grid > g:last-of-type * {
  stroke: none;
  opacity: 0;
}
.grid path {
      stroke-width: 0;
}

ul#nav_main li.active a
{
  color: white;
}

/********************[Mobile Friendly Modifications]**************************/

/*[Message Pages]*/
li .btn{
  white-space: normal;
  text-align:left;
}

/*******************************[Media]***************************************/

video{
  width:100%;
  height:auto;
}

div.responsive-video{
  position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}

div.responsive-video iframe{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* charts and viz */

/***[Thought Visualization]***/
div#ThoughtVizContainer { width:100%; min-height:100px; height:100%; max-height:768px; overflow: hidden;}

.viz-clickable { cursor: pointer;}

div#ThoughtVizTooltip
{
  z-index: 1;
  position: absolute;
  left:0;
  top:0;
  width:100%;
}

div.thoughtviz_tooltip
{
  opacity:1;
  padding:15px;
  max-height: 440px;
  font-size: 1.2em;
  height:auto;
  width:auto;
  max-width: 80%;
  min-width: 50%;
  left:-90%;
  position: absolute;
  border:3px solid gray;
  background-color:white;
  border-radius: 5px;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

div.thoughtviz_tooltip.tool_tooltip::after,
div#phq_suggestion_explanation_div.show_suggestion::after
{
  content:"Click To Close";
  color:gray;
  position:absolute;
  top:5px;
  right:5px;
}

.thoughtviz_text {
  font-size: 16px;
  fill: black;
  text-align: left;
}

div.thoughtviz_tooltip ul, div.thoughtviz_tooltip li
{
  list-style-type: none;
  padding:0px 7px;
}

div.thoughtviz_tooltip p { padding:0 15px; }

div.thoughtviz_tooltip.active_tooltip, div.thoughtviz_tooltip:hover
{
  opacity:1;
  width:auto;
  height:auto;
  overflow-y:auto;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

/************[Coach Dashboard PHQ Tables]************/

div#patient_dashboard_wrapper
{
  position: relative;
}

div#phq_suggestion_explanation_div
{
  padding:15px;
  position: absolute;
  left:0;
  top:0;
  overflow-y:auto;
  max-width: 50%;
  max-height: 800px;
  background-color: white;
  border:2px solid gray;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  opacity: 0;
  pointer-events:none;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

div#phq_suggestion_explanation_div table,
div#phq_suggestion_explanation_div table span.inline_format,
div#phq_suggestion_explanation_div span.inline_format,
{
  font-size:1.1em;
}

div#phq_suggestion_explanation_div span#phq_weekInStudy_bold
{
  font-size: 1em;
}

div#phq_suggestion_explanation_div table tr td
{
  vertical-align: middle;
}

.old_assessment
{
  position: relative;
  opacity:0.5;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

.old_assessment:hover
{
  opacity:1;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

.no-explanation
{
  display:none;
}

table#phq_suggestion_test_results td span.label-success,
table#phq_suggestion_test_results td span.label-danger.label-adj_danger
{
  padding: 0.2em 0.8em 0.3em;
}

table#phq_suggestion_test_results td span.label-warning
{
  padding: 0.2em 1em 0.3em;
}

table#phq_suggestion_test_results td span.label-success.label-adj_success
{
  padding: 0.2em 0.6em 0.3em;
}

div#phq_suggestion_explanation_div span.phq_suffix_notice
{
  font-size: 1.1em;
  line-height: 2em;
  color:gray;
  display: none;
}

div#phq_suggestion_explanation_div span.phq_suffix_notice.show_suffix_info
{
  display: inline;
}

div#phq_suggestion_explanation_div span.phq_suffix
{
  color:gray;
  opacity:0.8;
  font-size:1em;
}

div#phq_suggestion_explanation_div hr
{
  margin:3px;
}

div#phq_suggestion_explanation_div span
{
  font-size: 1.5em;
}

div#phq_suggestion_explanation_div span#phq_explanation_scores
{
  font-size: 1.2em;
}

div#phq_suggestion_explanation_div.show_suggestion
{
  opacity: 1;
  pointer-events:auto;
  cursor: pointer;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

.label-phq
{
  cursor: pointer;
}

.invis_phq_summary
{
  display: none;
}

#chart, #graphArea {
  max-width:80%;
  left:40px;
}

#y-axis, #axisL {
  position: absolute;
  width: 40px;
  height:250px;
  margin-right:15px;
}

#y-axis::before, #axisL::before{
  position: absolute;
  top:0;
  bottom:0;
  margin:auto;
  right: -100px;
  font-size: 1.5em;
  display: inline-block;
  transform:rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

#axisL::before{
  content:"Intensity/Score";
  right: -140px;
}

#y-axis::before {
  content:"Mood";
}

#legend
{
  position: relative;
  width: 100%;
  opacity:0.5;
  font-size:1.1em;
  margin-top: 20px;
  margin-bottom: 20px;
  transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
  -moz-transition:opacity 0.2s;
}

#legend span
{
  width: 92%;
  display:inline-block;
  line-height: 2.0em;
}

#legend:hover
{
  opacity:1;
}

#legend_hidden
{
  display: none;
}

/* Mood and Emotions viz */
.btn-group-wrap {
    text-align: center;
    margin-top: 10px;
}

div.btn-group {
    margin: 0 auto;
    text-align: center;
    width: inherit;
    display: inline-block;
}

div#mood, div#emotions, div#phq {
  margin-top: 20px;
}
div#date-range {
  color: gray;
}
.chart rect {
  stroke: white;
  fill-opacity: .6;
  fill: steelblue;

}
.bar.positive {
  fill: steelblue;
}

.bar.negative {
  fill: brown;
}

.axis text {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

#viz-container .legend {
  margin-left:50px;
}

/* table */


table#summary{width:99% !important;}
table.responsive tr.form-table td input[type=text]{width:100%;}
table.responsive tr.form-table td select{width:100%;}

@media (max-width: 768px) {
  /* CSS Responsive table */
  table.responsive,
  table.responsive thead,
  table.responsive tbody,
  table.responsive th,
  table.responsive td,
  table.responsive tr { display: block; }
  table.responsive thead tr { position: absolute; top: -9999px; left: -9999px; }
  table.responsive tr { border: 1px solid #ccc; margin-bottom: 10px; }
  table.responsive td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50% !important; }
  table.responsive td:before {  position: absolute; top: 6px; left: 6px; width: 40%; padding-right: 10px; text-align: left; word-wrap: break-word; }
  table.responsive thead tr:first-child { position: absolute; top: -9999px; left: -9999px; }
  table.responsive td:before { content: attr(data-content); height: 50px; word-wrap:normal; }
  table.responsive td.small-padding { padding-top: 5px; padding-bottom: 5px; }
  table.responsive td.medium-padding { padding-top: 15px; padding-bottom: 15px; }
  table.responsive td.large-padding { padding-top: 25px; padding-bottom: 25px; }
  table.responsive td.responsive-header {background-color: #D7D7D7; font-weight: bold;}
  table.responsive td.ignore_cell{height:0;display:none;}/*Cell should be completely hidden on mobile browsers*/
  table.responsive td.formonly{height:0;display:none;border:none;}/*Cell should be hidden until the table becomes editable*/
  table.responsive tr.form-table td.formonly{height:auto;display:initial;}
  #summary_wrapper label input{width:100%;}
}

@media (min-width: 768px){
  table.responsive tr.second-header{display:none;}
}

/* lessons */

div.panel-heading h3.panel-title span.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #FFF;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #777;
  border-radius: 10px;
  float: right;
}

.panel-heading a {
  text-decoration: none;
}

.list-group-item.disabled {
  background-color: #FFF;
}

.list-group-item .action {
  font-size: 18px;
}

div.panel-heading h3.panel-title.panel-unreleased {
  opacity: 0.7;
}

h4.list-group-item-heading p {
  display: inline;
}

h4.list-group-item-heading .unread {
  font-weight: bold;
}

/* Markdown editor */

textarea.md-input {
  width: inherit;
}