/* Common Tool Styles */

/* Reset unstyled list */
.unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Bootstrap-like grid */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }

@media (max-width: 768px) {
  .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-7, .col-sm-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Text utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: #999; }

.pull-left { float: left; }
.pull-right { float: right; }

/* Form controls */
.form-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: #4f46e5;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(79,70,229,.4);
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
}

.btn:hover {
  background-color: #e0e0e0;
}

.btn-primary {
  color: #fff;
  background-color: #4f46e5; /* indigo-600 */
  border-color: #4338ca; /* indigo-700 */
}

.btn-primary:hover {
  background-color: #4338ca; /* indigo-700 */
  border-color: #3730a3; /* indigo-800 */
}

button.unstyled {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  border-top: 1px solid #ddd;
  vertical-align: top;
}

.table thead th {
  border-bottom: 2px solid #ddd;
  vertical-align: bottom;
}

/* Dropdowns */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  list-style: none;
}

.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 5px 20px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

.dropdown-menu-scrollable {
  max-height: 300px;
  overflow-y: auto;
}

/* FontAwesome basic icons */
.fa {
  display: inline-block;
  font-style: normal;
}

.fa-spinner::before { content: "..."; }
.fa-spin { animation: fa-spin 1s infinite linear; }
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fa-undo::before { content: "↺"; }
.fa-caret-down::before { content: "▼"; font-size: 0.8em; }
.fa-play::before { content: "▶"; }
.fa-stop::before { content: "■"; }
.fa-twitter::before { content: "𝕏"; color: #1DA1F2; }
.fa-info-circle::before { content: "ⓘ"; }
.fa-times::before { content: "✕"; }
.fa-warning::before { content: "⚠"; }
.fa-smile-o::before { content: "😊"; }
.fa-meh-o::before { content: "😐"; }
.fa-frown-o::before { content: "😞"; }
.fa-balance-scale::before { content: "⚖"; }

/* D3-tip tooltip */
.d3-tip {
  line-height: 1;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
  pointer-events: none;
  font-size: 12px;
  z-index: 1000;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

.d3-tip.n:after {
  content: "▼";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Loading spinner */
#loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

/* Form horizontal layout */
.form-horizontal .form-group {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-horizontal .control-label {
  padding-top: 7px;
  text-align: right;
}

.col-sm-offset-2 {
  margin-left: 16.666%;
}