/*Edit: Hassan Alsaadi / 20/06/2017 */
/* ---------- */
/* PANEL DARK */
/* ---------- */

.panel-head-teal-1 {background-color: #4db6ac;}
.panel-head-teal-2 {background-color: #26a69a;}
.panel-head-teal-3 {background-color: #009688;}

/* note to Laura: ADD PANEL COLORS TO PANEL CSS */
.panel-teel-1
{
    border: none;
  border-radius: 2px;
  background-color: rgba(38,166,154,0.8);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);}
.panel-teel-1 span{
  display:inline;
  float: right;
  margin-top: 4px;
  margin-left: 10px;
}

/* panel wrapper */
.panel-dark {
 border: 1px solid #454545;
 border-radius: 1px;
 background-color: #303030;
 -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
 -moz-box-shadow:    0 1px 8px 0 rgba(0, 0, 0, 0.2);
 box-shadow:         0 1px 8px 0 rgba(0, 0, 0, 0.2);
}

/* panel header */
.panel-head-dark {
 background-color:  #212121;
 text-transform: uppercase; /* font capitolized */
    letter-spacing: 2px;
 font-weight: bold;
 border-top-right-radius: 1px;
 border-top-left-radius: 1px;
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
 vertical-align: middle;
}

/* panel header title */
.panel-head-dark h4, 
.panel-head-dark h5 {
  display: inline;
  vertical-align: middle;
}

.panel-head-dark i {vertical-align: middle; margin-right: 10px;}

/* panel body */
.panel-body-dark {
  background-color: #303030;
  border:none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.panel-body-border{
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* removing bootstrap white line divider between table and panel-body */
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {border:none;}


/* panel footer */
.panel-footer-dark {
  background: #212121;
  text-align: center;
  color: #FAFAFA;
  vertical-align: middle;
  padding-bottom: 7px;
  border:none;
}

/* Panel header top right button */
.panel-toolbar-btn {
  color: #26A69A;
  background-color: transparent;
  border: none;
  border-radius: 24px;
  vertical-align: middle;
}

.panel-toolbar-btn:hover,
.panel-toolbar-btn:focus,
.panel-toolbar-btn:active {
  outline: none;
  color: #80cbc4;
}

/* Panel header top right icon */
.panel-toolbar-icon {
  font: 18px;
}

/* Panel Tab Navigation buttons */
.tab-nav-btn {
  margin-top: 5px;
  width: 49%;
}

.tab-nav-btngroup{
  text-align: center;
  margin-bottom: 20px;
  margin-left: none;
  margin-right: none;
  width: 100%;
}

/* Panel Toolbar Dropdown */
ul.toolbar-dropdown {
  background-color: #303030;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
  }
ul.toolbar-dropdown > li > a {
  vertical-align: middle;
  color: #999999;
}
ul.toolbar-dropdown > li > a:hover,
ul.toolbar-dropdown > li > a:active,
ul.toolbar-dropdown > li > a:focus{
  background-color: #424242;
  color: #FAFAFA;
}

/* Panel Collapse */
.panel.noborder {
  border-radius: 0px;
    border: none;
    border-bottom: 1px solid #424242;
    box-shadow: none;
}

.panel-collapse{
    border-bottom: 1px solid #424242;
}
.panel-group .panel-heading + .panel-collapse > .list-group,
.panel-group .panel-heading + .panel-collapse > .panel-body {
  border: none;}

/* description of survey settings panel collapse titles */
.panel-title > span {
  font-size: 12px;
  color: #999999;
  padding-left: 10px;
}

/* ---------- */
/* PANEL TABS */
/* ---------- */
.panel-table-tabs > .nav-tabs{border-bottom: 1px solid #212121;}
.panel-table-tabs > .nav-tabs > li.active > a{background-color: #212121; color:#FAFAFA;border:none;}
.panel-table-tabs > .nav-tabs > li.active > a:hover{background-color: #212121;border:none;}
.panel-table-tabs > .nav-tabs > li > a{border:none;}
.panel-table-tabs > .nav-tabs > li > a:hover{background-color: #212121;border:none;}



/* ---------------- */
/* PANEL HORIZONTAL */
/* ---------------- */

.panel-horizontal{
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}
/* individual message panel body testing */
.panel-head-horizontal{
  display: -webkit-flex;  /* flip panel 90 degrees */
  display: flex; /* flip panel 90 degrees */
  min-height: 59%; /* streth panel down */
  max-height: 59%; /* maximum height panel */
  overflow: hidden; /* add scrollbar for overflowing content */
}
.panel-head-horizontal{
  text-align: center;
}
.panel-body-horizontal{width: 100%;}



/* ---------- */
/* PANEL TEEL */
/* ---------- */

.panel-head-teal-1 {background-color: #4db6ac;}
.panel-head-teal-2 {background-color: #26a69a;}
.panel-head-teal-3 {background-color: #009688;}

/* teel panels */
.panel-teel-1{border: none;
  border-radius: 2px;
  background-color: rgba(38,166,154,0.8);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);}
.panel-teel-1 span{
  display:inline;
  float: right;
  margin-top: 4px;
  margin-left: 10px;
}

@media screen and (min-width: 767px) {
.panel-pills > li {max-width: 25%;}
}
.panel-pills > li > a {
color: #FAFAFA;
}
.panel-pills > li > a:hover,
.panel-pills > li > a:active,
.panel-pills > li > a:focus{
background-color: #424242;
}
.panel-pills > li.active > a, .nav-pills > li.active > a:focus {
background-color: #424242;
color:#FAFAFA;
}
.panel-pills > li.active > a:hover {
background-color: #424242;
color:#FAFAFA;
}