@import url('../../tonic-style.css');

/* Overrides for Bootstrap */
#tonic-style div {
  font-family: mark;
}

#tonic-style .input-group-addon{
  background-color:#50D2C2;
  color:white;
}

#tonic-style legend {
  font-size: 20px;
  font-weight: bold;
}

#tonic-style legend > small {
  font-size: 15px;
  font-weight: normal;
}

#tonic-style .btn-primary{
  background-color:#50D2C2;
  border-color:#ccc;
}

#tonic-style .form-control{
  box-shadow: none;
}

#tonic-style .form-control:focus {
  border-color: #50D2C2;
}

#tonic-style :focus {
  outline:0;
}

/* Apply the tonic text color */
.tonic-text-color{
  color: #4E4E4E;
}

/* Style for presenting the calculator results */
.tonic-calc-result{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
  color:#50D2C2;
}

#result-table{
  vertical-align:middle;
}

/* create a top buffer for elements */
.top-buffer { margin-top:20px; }

/* center text */
.center-text { text-align: center; }

/* Create the tonic colored panel */
.panel-tonic {
  border-color: #50D2C2;
}

.panel-tonic > .panel-heading {
  background-color: #50D2C2;
  color:white;
}

.panel-tonic-info {
  border-color: #c4c4c4;
}

.panel-tonic-info > .panel-heading {
  background-color: #c4c4c4;
  color:#4E4E4E;
}

.panel-tonic-danger {
  border-color: #f3bdbd;
}

.panel-tonic-danger > .panel-heading {
  background-color: #f3bdbd;
  color:#c13a2d;
}

/* Tonic menu color definition */
.btn-tonic-menu, .btn-tonic-menu:hover  {
  white-space: normal;
  color:white;
  margin-top:5px;
  outline:none;
}

.tonic-menu-1 {
  background-color: #17FFE3;
  border-color: #17FFE3;
}

.tonic-menu-2 {
  background-color: #549E95;
  border-color: #549E95;
}

.tonic-menu-3 {
  background-color: #06A793;
  border-color: #06A793;
}

.tonic-menu-4 {
  background-color: #237066;
  border-color: #237066;
}

/* datepicker definitions */

#dp {
  margin:0 auto;
}

#tonic-style .datepicker{
  margin:0 auto;
}

#dp table tr td.active:active,
#dp table tr td.active.highlighted:active,
#dp table tr td.active.active,
#dp table tr td.active.highlighted.active,
#dp span.active {
   background-color: #50D2C2;
}