.base-colors { 
  display: flex;
  justify-content: center;
}
.color-scheme {
  padding-top: 6em;
  display: flex;
  flex-wrap: wrap;
	justify-content: center;
}
  .color-scheme>span {
    width: 200px;
    height: 100px;
	text-align: center;
    display: grid;
	place-items: center;
    cursor: pointer;
  }
  .base-color  {
    width: 100px;
    height: 100px;
	  cursor: pointer;
    text-align: center;
  }
  .base-color:hover  {
   	transform: scale(1.3)
  }
  .color-name {
    text-shadow: 1px 1px 2px #0c0c0c;
    color: white;
    font-size: medium;
  }
  .color-box {
    animation: fadeIn 2s ease-out;
    margin: 3px;
    filter: drop-shadow(0 0 0.15rem #ccc);
  }
  #ledger-row {
    width: 100%;
    display: none;
    animation: fadeIn 1.5s ease-out;
  }
  .products-col {
    display: block;
    width: 33.33%;
  }
  .products-col img {
    width: 300px;
    height: 300px;
  }
.selected-block {
	transform: scale(1.5);
}
.selected-block::after {
	    content: "L";
    color: white;
    font-size: xxx-large;
    font-weight: 900;
    text-align: center;
    font-family: arial;
    font-weight: bold;
    -ms-transform: scaleX(-1) rotate(-35deg);
    -webkit-transform: scaleX(-1) rotate(-35deg);
    transform: scaleX(-1) rotate(-35deg);
    display: inline-block;
    margin-top: 0.5em;
}
.paints-container {
	display: grid;
	place-content: center;
}
#loader-spinner{
  background-color: #ffffffde;
  display: none;
  place-content: center;
  left: 0!important;
  height: 300vh;
  z-index: 99;
  position: fixed;
  width: 100vw;
  margin-top: -150vh;
}
.loader{
  width:100px;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 20px;
}
@keyframes load10{
  50%{
    transform:rotatez(180deg);
    border-style:dashed;
    border-color:red maroon indianred orangered;
  }
  100%{
    transform:rotatez(360deg);
  }
}
.loader10::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:20px solid red;
  animation:load10 1s infinite;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #937036;
  color: white;
  margin: 1em;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
@keyframes crescendo {
  0%   {transform: scale(.8);}
  50% {transform: scale(1);}
}

  @keyframes fadeIn {
    from {
      opacity: 0;
      left: 0;
    }
    to {
      opacity: 100%;
      left: 500px;

    }
  }