/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

#intro a,
footer a {
    color: #28a745;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #333;
  font-size: 1.1rem;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  width: 100%;
  overflow: hidden;
}


/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  border: none;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  color: #fff;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1.5rem;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}




/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
}


#main {
    flex: 1;
    overflow: hidden;
}

#tool {
    display: flex;
    flex: 1;
}

#tool > .flex-row,
#tool > .flex-column {
    display: flex;
}

#intro > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 45rem;
}

textarea {
  border: none;
  border-radius: 0.25rem;
}

#results {
  overflow-y: auto;
  width: 100%;
}

#results-placeholder {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0.1;
  border: 2px solid white;
  border-radius: 5px;
  user-select: none;
}

table.table {
  color: #fff;
}

.table th, .table td {
  padding: 0.25rem;
  border-top: none;
}

.table thead th {
  border: none;
}

.table hr {
  border-color: #fff;
  width: 90%;
}

.table td:last-child {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.btn:focus {
  box-shadow: none !important;
}

#back-link {
  color: #dc3545;
}

.colorchange-warning {
  color: #333;
}

canvas { 
  margin: 0px; /* not inherited */
  border: 0px none gray; /* not inherited */
  padding: 0px; /* not inherited */

  width: 100%;
  height: 100%;

  cursor: move; 
}

#statusdiv {
  display: none !important;
}

div.dropdown.bootstrap-select {
  width: 100% !important;
}

#debug {
  max-width: 50px;
}

#svg-viewer svg, #svg-viewer svg g {
  stroke: white !important;
}