.nav-link {
    color: inherit;
  }

  #growl-notice {
    display: none;
    font-family: Raleway, Arial, helvetica, sans-serif;
    width:  350px;
    height: 65px;
    padding: 5px 10px;
    border-left: 6px solid black;
    border-radius: 4px;
    opacity: 0.97;
    font-size: 14px;
    color: #fff;
    /* line-height: 50px; */
    background-color: #333;
    position: fixed;
    right: 10px;
    top: 48px;
    margin:auto;
    z-index: 9999999;
  }

/*   .tool-group {
    position: absolute;
    top: 75px;
    right: 0px; 
  } */

  .colorcards {
    display: flex;
    margin-right: 20px;
  }

  .colorcard {
    /* flex: 140px 1 1; */
    margin-bottom: 12px;
    height: 140px;
    box-shadow: 0 0 0 rgb(0 0 0 / 0%);
    transition: box-shadow 0.1s ease;
  }
  
  button.colorcard {
    box-shadow: 0px 10px 14px -7px #276873;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
  }
  button.colorcard:hover {
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    background-color:#408c99;
  }
  /* button.colorcard:hover::before { */
  button.colorcard::before {
   content: "Select a Color";
   word-wrap: break-word;
   font-size: 20px;
   color: #333;
  }
  button.colorcard:active {
    position:relative;
    top:1px;
  }

  .colorcard.jscolor {
    position: relative;
  }

  .cardrow input {
    height: 44px;
    border: 1px solid #6a6a6a;
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%);
  }

  .cardrow input,
  .cardrow p {
    /* flex: 140px 1 1; */
    min-width: 0;
    max-width: 140px;
    text-align: center;
    font-size: 18px;
    line-height: 44px;
    font-family: "Input Mono", "Input Mono Reg", "Courier", monospace;
  }

  .additional {
    width: 175px;
    font-size: 18px;
  }

  @media (min-width: 1024px) {
    .cardrow input,
    .cardrow p {
      font-size: 22px;
    }
  }

  @media (min-width: 769px) {
    .cardrow input,
    .cardrow p {
      font-size: 18px;
    }
  }


body {
	background-color:inherit;
}

#page-container {
	position: relative;
	padding-bottom: 60px;
	min-height: 100vh;
}

.page-header {
	padding-top:60px;
}

canvas.color-palette,
canvas.canvas-overlay {
	position:absolute;
	top:20px;
}

canvas.canvas-overlay {
	cursor:crosshair;
}

.canvas-container,
.pallette-container {
    position: relative;
	width: 700px
}
.canvas-container {
	touch-action: none;
	background-color: white;
    z-index: 999;
}

.pallette-container {
	padding-top: 290px 
}

.pickerRow {
	height:300px;
	width: 100%;
}

.title {
	left:20px;
}

.pallette {
	text-align: center;
	width:175px;
	height:55px;
}
.pallette-wrapper {
	position: relative;
}

.label { 
	width: 28px;
	height: 28px;
	color:white;
	background: #333399; 
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px; 
	border-radius: 12px;
}

.label-pallette { 
	position: absolute;
    top: -14px;
	left: 10px;
	width: 28px;
    height: 28px;
	color:white;
	background: #333399; 
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px; 
	border-radius: 12px;
}  

.textblock {
	margin-top: 10px;
}

.palletteButton {
    /* background-image: -webkit-linear-gradient(top, rgba(95, 149, 220, 0.24), rgba(95, 149, 220, 0.9));
    border-radius: 5px;
    border: 1px solid #333; */
    padding: 3.7%;
    text-align: center;
    font-family: monospace;
    font-size: larger;
    color: white;
    /* text-shadow: 0 0 #000; */
    mix-blend-mode: difference;
}

#paletteStartcolorcard, #paletteEndcolorcard {
  max-width: 140px;
  text-align: center;
  font-size: 18px;
  font-family: Raleway, "Input Mono", "Input Mono Reg", "Courier", monospace;
}  

#infotext {
	background-color: "#fff";
	padding: 25px;
	font-weight:bold;
}

.info {
	z-index: 9999;
	position: absolute;
    top: 3px;
    left: 10px;
}


#color-mode {
    width: 100px;
}