.color-palette {
  display: inline-block;
  margin-right: 12px;
  margin-top: 24px;
}
.color-palette .palette {
  width: 144px;
  height: 144px;
  display: inline-block;
  border-radius: 4px;
  position: relative;
}
.color-palette.tints {
  display: block;
  margin-top: 12px;
}
.color-palette.accessible {
	min-width:30%;
}
.color-palette.tints .palette {
  width: 60px;
  height: 60px;
  display: inline-block;
  position: relative;
}
.palette {
	cursor:pointer;
}
/* START HOPE STANDARD COLORS AND TINTS */
.color-palette .palette.hopeblue {
  background: #002244;
}
.color-palette .palette.hopeblue.tint90 {
  background: #1a3857;
}
.color-palette .palette.hopeblue.tint80 {
  background: #334e69;
}
.color-palette .palette.hopeblue.tint70 {
  background: #4d647c;
}
.color-palette .palette.hopeblue.tint60 {
  background: #667a8f;
}
.color-palette .palette.hopeorange {
  background: #F46A1F;
}
.color-palette .palette.hope_brblack {
  background: #000000;
}
.color-palette .palette.hope_ghgray {
  background: #4D4F53;
}
.color-palette .palette.hope_vbrick {
  background: #91420E;
}
.color-palette .palette.hope_vbrick.tint90 {
  background: #9c5526;
}
.color-palette .palette.hope_vbrick.tint80 {
  background: #a7683e;
}
.color-palette .palette.hope_vbrick.tint70 {
  background: #b27b56;
}
.color-palette .palette.hope_torange {
  background: #F0AB00;
}
.color-palette .palette.hope_torange.tint90 {
  background: #f2b31a;
}
.color-palette .palette.hope_torange.tint80 {
  background: #f3bc33;
}
.color-palette .palette.hope_torange.tint70 {
  background: #f5c44d;
}
.color-palette .palette.hope_cyellow {
  background: #F7E654;
}
.color-palette .palette.hope_cyellow.tint90 {
  background: #f8e965;
}
.color-palette .palette.hope_cyellow.tint80 {
  background: #f9eb76;
}
.color-palette .palette.hope_cyellow.tint70 {
  background: #f9ee87;
}
.color-palette .palette.hope_cyellow.tint60 {
  background: #faf098;
}
.color-palette .palette.hope_cyellow.tint50 {
  background: #fbf3aa;
}
.color-palette .palette.hope_cyellow.tint40 {
  background: #fcf5bb;
}
.color-palette .palette.hope_cyellow.tint30 {
  background: #fdf8cc;
}
.color-palette .palette.hope_sfgreen {
  background: #BED600;
}
.color-palette .palette.hope_sfgreen.tint90 {
  background: #c5da1a;
}
.color-palette .palette.hope_sfgreen.tint80 {
  background: #cbde33;
}
.color-palette .palette.hope_sfgreen.tint70 {
  background: #d2e24d;
}
.color-palette .palette.hope_sfgreen.tint60 {
  background: #d8e666;
}
.color-palette .palette.hope_sfgreen.tint50 {
  background: #dfeb80;
}
.color-palette .palette.hope_sfgreen.tint40 {
  background: #e5ef99;
}
.color-palette .palette.hope_sfgreen.tint30 {
  background: #ecf3b3;
}
.color-palette .palette.hope_pggreen {
  background: #00685B;
}
.color-palette .palette.hope_pggreen.tint90 {
  background: #1a776b;
}
.color-palette .palette.hope_pggreen.tint80 {
  background: #33867c;
}
.color-palette .palette.hope_pggreen.tint70 {
  background: #4d958c;
}
.color-palette .palette.hope_pggreen.tint30 {
  background: #b3d2ce;
}
.color-palette .palette.hope_pggreen.tint20 {
  background: #cce1de;
}
.color-palette .palette.hope_pggreen.tint10 {
  background: #e6f0ef;
}
.color-palette .palette.hope_lmblue {
  background: #5482AB;
}
.color-palette .palette.hope_lmblue.tint90 {
  background: #658fb3;
}
.color-palette .palette.hope_lmblue.tint80 {
  background: #769bbc;
}
.color-palette .palette.hope_lmblue.tint70 {
  background: #87a8c4;
}
.color-palette .palette.hope_lmblue.tint60 {
  background: #98b4cd;
}
.color-palette .palette.hope_lmblue.tint50 {
  background: #aac1d5;
}
.color-palette .palette.hope_lmblue.tint40 {
  background: #bbcddd;
}
.color-palette .palette.hope_lmblue.tint30 {
  background: #ccdae6;
}
.color-palette .palette.hope_lmblue.tint20 {
  background: #dde6ee;
}
.color-palette .palette.hope_lmblue.tint10 {
  background: #eef3f7;
}
.color-palette .palette.hope_sgblue {
  background: #00B0CA;
}
.color-palette .palette.hope_sgblue.tint90 {
  background: #1ab8cf;
}
.color-palette .palette.hope_sgblue.tint80 {
  background: #33c0d5;
}
.color-palette .palette.hope_sgblue.tint70 {
  background: #4dc8da;
}
.color-palette .palette.hope_sgblue.tint60 {
  background: #66d0df;
}
.color-palette .palette.hope_sgblue.tint50 {
  background: #80d8e5;
}
.color-palette .palette.hope_sgblue.tint40 {
  background: #99dfea;
}
.color-palette .palette.hope_sgblue.tint30 {
  background: #b3e7ef;
}
.color-palette .palette.hope_sgblue.tint20 {
  background: #cceff4;
}
.color-palette .palette.hope_sgblue.tint10 {
  background: #e6f7fa;
}
.color-palette .palette.hope_mmblue {
  background: #BBE7F6;
}
.color-palette .palette.hope_ghgray.tint90 {
  background: #5f6164;
}
.color-palette .palette.hope_ghgray.tint80 {
  background: #717275;
}
.color-palette .palette.hope_ghgray.tint70 {
  background: #828487;
}
.color-palette .palette.hope_ghgray.tint60 {
  background: #949598;
}
.color-palette .palette.hope_ghgray.tint50 {
  background: #a6a7a9;
}
.color-palette .palette.hope_ghgray.tint40 {
  background: #b8b9ba;
}
.color-palette .palette.hope_ghgray.tint30 {
  background: #cacacb;
}
.color-palette .palette.hope_ghgray.tint20 {
  background: #dbdcdd;
}
.color-palette .palette.hope_ghgray.tint10 {
  background: #ededee;
}
.color-palette .palette.hope_brblack.tint90 {
  background: #1a1a1a;
}
.color-palette .palette.hope_brblack.tint80 {
  background: #333333;
}
.color-palette .palette.hope_brblack.tint70 {
  background: #4d4d4d;
}
.color-palette .palette.hope_brblack.tint60 {
  background: #666666;
}
.color-palette .palette.hope_brblack.tint50 {
  background: #808080;
}
.color-palette .palette.hope_brblack.tint40 {
  background: #999999;
}
.color-palette .palette.hope_brblack.tint30 {
  background: #b3b3b3;
}
.color-palette .palette.hope_brblack.tint20 {
  background: #cccccc;
}
.color-palette .palette.hope_brblack.tint10 {
  background: #e6e6e6;
}
/* END HOPE STANDARD COLORS AND TINTS */

/* START HOPE WEB-SAFE COLORS */
.color-palette .palette.hopeblue.contrast {
  background: #002244;
}
.color-palette .palette.hopeorange.contrast {
  background: #C45114;
}
.color-palette .palette.hope_brblack.contrast {
  background: #000000;
}
.color-palette .palette.hope_ghgray.contrast {
  background: #4D4F53;
}
.color-palette .palette.hope_vbrick.contrast {
  background: #91420E;
}
.color-palette .palette.hope_torange.contrast {
  background: #9A6E00;
}
.color-palette .palette.hope_cyellow.contrast {
  background: #847600;
}
.color-palette .palette.hope_sfgreen.contrast {
  background: #707D07;
}
.color-palette .palette.hope_pggreen.contrast {
  background: #00685B;
}
.color-palette .palette.hope_lmblue.contrast {
  background: #4F7AA1;
}
.color-palette .palette.hope_sgblue.contrast {
  background: #008296;
}

/* END HOPE WEB-SAFE COLORS */

/* START HOPE GENERAL STYLE EDITS */
.colortext {
	padding: 4px;
	font-size: 80%;
	line-height: 1.5;
}
/* END HOPE GENERAL STYLE EDITS */



.copied {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  position: absolute;
  background: #fff;
  border-radius: 100px;
  padding: 10px;
  top: 50%;
  left: 50%;
  text-align: center;
  margin-left: -40px;
  margin-top: -20px;
  color: #333;
  width: 80px;
  transform: scale(0);
  opacity: 1;
}
.copiedEffect {
  animation: rippleDrop 0.5s linear;
}
.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #ffffff;
  transform: scale(0.8);
  position: absolute;
  opacity: 0;
}
.rippleEffect {
  animation: rippleDrop 0.5s linear;
}
.copiedEffect {
  animation: copiedDrop 1s ease;
}
@keyframes rippleDrop {
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes copiedDrop {
  50% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}