/* =========================
   BOTÃO CORES PINTURA
========================= */

.colors-btn{
  width: 250px;
  height: 40px;

  margin-top:12px;

  border:1px solid #d7c5b8;
  background:transparent;

  color:#6a5448;

  padding:14px;
  border-radius: 12px;

  cursor:pointer;

  font-weight:bold;

  transition:0.3s;
}

/* =========================
   MODAL
========================= */

.colors-modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.65);

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 5px;

  opacity:0;
  visibility:hidden;

  transition:0.3s;

  z-index:9999;
}

.colors-modal.active{
  opacity:1;
  visibility:visible;
}

.modal-content{
  position:relative;

  width:100%;
  max-width:900px;

  max-height:90vh;

  background:white;

  border-radius: 8px;

  overflow-y:auto;
  overflow-x:hidden;

  animation:modalShow 0.3s ease;
}

.modal-content img{
  width:100%;
  height:auto;
  display:block;
}


.modal-content::-webkit-scrollbar{
  width:8px;
}

.modal-content::-webkit-scrollbar-thumb{
  background:#c2b1a5;
  border-radius:20px;
}

.close-modal{
  position:absolute;
  top: 10px;
  right:10px;

  width:40px;
  height:40px;

  border:none;
  border-radius:50%;

  background:rgba(0,0,0,0.9);

  color:white;

  cursor:pointer;

  font-size:18px;
}

@keyframes modalShow{

  from{
    transform:translateY(20px);
    opacity:0;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }

}