.spacing-min
{
    margin-top: 30px;
}

.spacing-min-left
{
    margin-top: 50px;
}

html, body {
  height: 100%;
  margin: 0;
}

h4{
    color:#262262;
}

p{
    color:#262262;
}

label{
    color:#262262;
}

.footer-colortest{
    color:#c2c2c2;
}

#page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content-wrap {
  flex: 1;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #7e31a2;
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: #c2c2c2;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link:focus, .nav-link:hover {
    color: #00bf63;
}

 input[type="range"]::-webkit-slider-thumb {
    background: #7e31a2;
  }

  input[type="range"]::-moz-range-thumb {
    background: #7e31a2;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    background: #00bf63;
  }

  input[type="range"]::-moz-range-track {
    background: #7e31a2;
  }
  
 #pizarraReal {
      border: 2px solid white;
      background-color: white;
      cursor: crosshair;
      width: 100%;
      height: 500px;
      display: block;
    }
    
    canvas {
      width: 100%;
      height: 500px;
      border: 2px solid white;
      display: block;
      background-color: black;
      cursor: crosshair;
    }