/* ============================================================
   GEMCOLORSELECT v2.0
   Autor: OpenAI + Renato Costa
   ============================================================ */

/*=============================================================
=            CONFIGURAÇÃO DO COMPONENTE                       =
=============================================================*/
:root {
  --gcs-bg: #ffffff;
  --gcs-color: #000000;
  --gcs-border: #ced4da;
  --gcs-radius: 5px;
  --gcs-height: 38px;
  --gcs-hover: #f5f5f5;
  --gcs-shadow: 0 5px 15px rgba(0, 0, 0, .18);
  --gcs-icon: #000000;
}

/*=============================================================
=            SELECT ORIGINAL                                 =
=============================================================*/

select.gemcolorselect-original {
  display: none;
}

/*=============================================================
=            COMPONENTE                                      =
=============================================================*/

.gemcolorselect {
  position: relative;
  max-width: 300px;;
  font-family: inherit;
  font-size: 16px;
}

/*=============================================================
=            BOTÃO                                           =
=============================================================*/

.gcs-button {

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--gcs-height);
  padding: 0 12px;
  border: 1px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  background: var(--gcs-bg);
  color: var(--gcs-color);
  cursor: pointer;
  user-select: none;
  transition: .18s;
}

.gcs-button:hover {
  border-color: #a0abaf;
}



/*=============================================================
=            LADO ESQUERDO                                   =
=============================================================*/

.gcs-left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  width: 100%;
}

.gcs-icon {
  width: 22px;
  text-align: center;
  color: var(--gcs-icon);
  flex: none;
}

.gcs-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/*=============================================================
=            SETA                                            =
=============================================================*/

.gcs-arrow {
  transition: .25s;
  font-size: 30px;
  color: #363636;
}

.gemcolorselect.aberto .gcs-arrow {
  transform: rotate(180deg);
}



/*=============================================================
=            LISTA                                           =
=============================================================*/

.gcs-list {
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  width: 100%;
  display: none;
  overflow-y: auto;
  max-height: 300px;
  border: 1px solid #000000;
  border-radius: var(--gcs-radius);
  background: #FFF;
  box-shadow: var(--gcs-shadow);
  z-index: 99999;
}

.gemcolorselect.aberto .gcs-list {
  display: block;
}



/*=============================================================
=            ITEM                                            =
=============================================================*/

.gcs-item {
  padding: 10px 12px;
  cursor: pointer;
  transition: .15s;
  background: #ffffff;
  color: #000;
  border: 2px solid #ffffff;
}

.gcs-item:hover {
  filter: brightness(.60);
}

.gcs-item.selected {
  outline: 5px solid rgba(0, 0, 0, .15);
  font-weight: bold;
}

/*=============================================================
=            CORES DAS GEMAS - CLASSES GLOBAIS               =
=============================================================*/


/*
   As classes .cor_* abaixo são GLOBAIS.
   Podem ser aplicadas diretamente em div, span, td, button,
   itens do gemcolorselect ou qualquer outro elemento HTML.
*/

/* Branco */

.cor_branco {

  background: #ffffff;
  color: #000000;

}


/* Incolor */

.cor_incolor {

  background: #f8f8f8;
  color: #000000;

}


/* Transparente */

.cor_transparente {

  background: #eef8ff;
  color: #000000;

}


/* Preto */

.cor_preto {

  background: #222222;
  color: #ffffff;

}


/* Cinza */

.cor_cinza {

  background: #8d8d8d;
  color: #ffffff;

}


/* Marrom */

.cor_marrom {

  background: #7b4d2a;
  color: #ffffff;

}


/* Vermelho */

.cor_vermelho {

  background: #c62828;
  color: #ffffff;

}


/* Rubi */

.cor_vermelho_rubi {

  background: #a40028;
  color: #ffffff;

}


/* Framboesa */

.cor_framboesa {

  background: #b11f4e;
  color: #ffffff;

}


/* Rosa */

.cor_rosa {

  background: #ff8db8;
  color: #000000;

}


/* Violeta */

.cor_violeta {

  background: #7c3fb6;
  color: #ffffff;

}


/* Azul */

.cor_azul {

    background: linear-gradient(90deg,
      #2ae1d8,
      #2aa7e1);
  color: #ffffff;

}


/* Azul Neon */

.cor_azul_neon {

  background: #00b8ff;
  color: #000000;

}


/* Verde */

.cor_verde {

  background: #1f8d4c;
  color: #ffffff;

}


/* Verde Maçã */

.cor_verde_maca {

  background: #42d17b;
  color: #000000;

}


/* Amarelo */

.cor_amarelo {

  background: #ffe44d;
  color: #000000;

}


/* Amarelo Esverdeado */

.cor_amarelo_esverdeado {

  background: #cde64d;
  color: #000000;

}


/* Mel */

.cor_mel {

  background: #dca52d;
  color: #000000;

}


/* Dourado */

.cor_dourado {

  background: #d4af37;
  color: #000000;

}


/* Laranja */

.cor_laranja {

  background: #ff8a00;
  color: #000000;

}

/*=============================================================
=            GEMAS MULTICOLORIDAS                             =
=============================================================*/


/* Roxo / Amarelo */

.cor_roxo_amarelo {

  background: linear-gradient(90deg, #7c3fb6, #ffe44d);
  color: #000000;

}


/* Rosa / Verde */

.cor_rosa_verde {

  background: linear-gradient(90deg, #ff8db8, #29a85f);
  color: #000000;

}


/* Rosa / Violeta */

.cor_rosa_violeta {

  background: linear-gradient(90deg, #ff8db8, #7c3fb6);
  color: #000000;

}


/* Verde / Laranja */

.cor_verde_laranja {

  background: linear-gradient(90deg, #1f8d4c, #ff8a00);
  color: #000000;

}


/* Verde / Marrom */

.cor_verde_marrom {

  background: linear-gradient(90deg, #1f8d4c, #7b4d2a);
  color: #ffffff;

}


/* Verde / Vermelho */

.cor_verde_vermelho {

  background: linear-gradient(90deg, #1f8d4c, #c62828);
  color: #ffffff;

}


/* Amarelo / Verde */

.cor_amarelo_verde {

  background: linear-gradient(90deg, #ffe44d, #1f8d4c);
  color: #000000;

}


/* Mel / Verde */

.cor_mel_verde {

  background: linear-gradient(90deg, #dca52d, #1f8d4c);
  color: #000000;

}


/* Amarelo / Dourado */

.cor_amarelo_dourado {

  background: linear-gradient(90deg, #ffe44d, #d4af37);
  color: #000000;

}


/* Laranja / Dourado */

.cor_laranja_dourado {

  background: linear-gradient(90deg, #ff8a00, #d4af37);
  color: #000000;

}


/* Laranja / Vermelho */

.cor_laranja_vermelho {

  background: linear-gradient(90deg, #ff8a00, #c62828);
  color: #ffffff;

}


/* Azul / Verde */

.cor_azul_verde {

  background: linear-gradient(90deg, #19bdd2, #80ff00);
  color: #ffffff;

}

/* Azul / Verde / Multicolorido*/

.cor_marron_azul {

    background: linear-gradient(90deg,
      #222222,
      #421f00,
      #408f15,
      #1976d2,
      #694097);
  color: #ffffff;

}


/* Branco / Azul */

.cor_branco_azul {

  background: linear-gradient(90deg, #ffffff, #4da3ff);
  color: #000000;

}


/* Branco / Reflexo Azul */

.cor_branco_reflexo_azul {

  background: linear-gradient(90deg, #ffffff, #8fd0ff);
  color: #000000;

}


/* Incolor / Branco */

.cor_incolor_branco {

  background: linear-gradient(90deg, #f8f8f8, #ffffff);
  color: #000000;

}


/* Azul / Cinza / Branco */

.cor_azul_cinza_branco {

  background: linear-gradient(90deg, #1976d2, #9d9d9d, #ffffff);
  color: #000000;

}


/* Cinza / Reflexo Azul */

.cor_cinza_reflexo_azul {

  background: linear-gradient(90deg, #8d8d8d, #4da3ff);
  color: #ffffff;

}


/* Preto Multicolorido */

.cor_preto_multicolorido {

  background: linear-gradient(90deg,
      #222222,
      #7c3fb6,
      #ff6464,
      #1976d2,
      #068139);

  color: #ffffff;

}


/* Multicolorido */

.cor_multicolorido {

  background: linear-gradient(90deg,
      #c62828,
      #ff8a00,
      #ffe44d,
      #1f8d4c,
      #1976d2,
      #7c3fb6);

  color: #000000;

}


/* Heliotrópio */

.cor_heliotropio {

  background: linear-gradient(90deg, #1f6d39, #b71c1c);
  color: #ffffff;

}


/* Zircão */

.cor_zircao {

  background: linear-gradient(90deg,
      #1976d2,
      #d4af37,
      #c62828,
      #7b4d2a,
      #1f8d4c,
      #ffffff);

  color: #000000;

}

/*=============================================================
=            HOVER                                            =
=============================================================*/

/* Itens sem cor */

.gcs-item:not([class*="cor_"]):hover {
  background: var(--gcs-hover);
}


/* Itens coloridos */
.gcs-item[class*="cor_"]:hover {
  filter: brightness(1.04) saturate(1.08);
}


/*=============================================================
=            ITEM SELECIONADO                                 =
=============================================================*/

.gcs-item.selected {
  outline: 2px solid rgba(0, 0, 0, .22);
  outline-offset: -2px;
  font-weight: bold;
}


/*=============================================================
=            SCROLLBAR                                        =
=============================================================*/

.gcs-list::-webkit-scrollbar {
  width: 10px;
}

.gcs-list::-webkit-scrollbar-track {
  background: #eeeeee;
}

.gcs-list::-webkit-scrollbar-thumb {
  background: #bbbbbb;
  border-radius: 20px;
}

.gcs-list::-webkit-scrollbar-thumb:hover {
  background: #999999;
}


/*=============================================================
=            RESPONSIVO                                       =
=============================================================*/

@media(max-width:768px) {

  .gcs-list {
    max-height: 220px;
  }

}


/*=============================================================
=            CLASSES AUXILIARES                               =
=============================================================*/

/* Estas classes poderão ser usadas em qualquer OPTION */

.negrito {
  font-weight: bold;
}

.italico {
  font-style: italic;
}

.sublinhado {
  text-decoration: underline;
}

.maiusculas {
  text-transform: uppercase;
}

.minusculas {
  text-transform: lowercase;
}

.capitalizar {
  text-transform: capitalize;
}

.pequena {
  font-size: 12px;
}

.grande {
  font-size: 17px;
}

.centralizado {
  text-align: center;
}


/*=============================================================
=            FIM DO ARQUIVO
=============================================================*/