@charset "utf-8";

@font-face {
    font-family: "Ubuntu";
    src: local("Ubuntu"), 
		url("/sites/portalp/Webpub/NovoPortal/assets/css/components/fonts/Ubuntu-Regular.ttf") format("opentype"),       	
}

@font-face {
    font-family: "Icofont";
    src: local("fonts/icofont.ttf"), 
		url("/sites/portalp/Webpub/NovoPortal/assets/css/components/fonts/Icofont.ttf") format("opentype"),       	
}

:root {
 
  --font-family-stj: Ubuntu, sans-serif;
  
  /* Azuis */
  --cor-principal: rgba(7, 182, 211, 1);
  --azul-fundo-900: rgba(0, 65, 100, 0.85);
  --azul-fundo-800: #004164;
  --azul-fundo-700: #004d7e;
  --azul-texto-600: #1179b0;
  --azul-fundo-400: #83CBF1;
  --azul-fundo-300: #e1f1f4;
  --azul-fundo-200: #e7f6fd;
  --azul-acento-500: #9cb5c5;
  --azul-medio:#1A8DA4;
  --azul-link: #1d8dc9;
  --azul-link-hover: #57b3e5;
  --azul-link-ativo: #0a608f;
  --azul-categoria:#AAE0FD;

  /* Cinzas */
  --cinza-fundo-900: #575756;
  --cinza-fundo-800: #595656;
  --cinza-fundo-700: #656564;
  --cinza-fundo-600: #9aa5b1;
  --cinza-texto-500: #707070;
  --cinza-fundo-400: #e4e7eb;
  --cinza-fundo-opacity: rgba(191, 195, 198, 0.2);
  --cinza-acento-300: #cbd2d9;
  --cinza-texto-50: #d3d3d8;
  --cinza-fundo-200: #f4f4f4;
  --cinza-fundo-100: #f1f2f3;
  --cinza-claro:rgba(246,246,246,1);
  --cinza-rodape: #f2f3f4;
  --cinza-rodape-texto: #7b8794;
  --cinza-glossario: #616e7c;
  --cinza-menu: #F5F7FA;
  --cinza-sombra-1: rgba(0, 0, 0, 0.16);
  --cinza-sombra-2: rgba(0, 0, 0, 0.2);
  --cinza-sombra-3: rgba(0, 0, 0, 0.3);
  --cinza-icone-externo: rgba(194, 196, 198, 0.8);
  
  /* Cores Complementares */
  --branco: #fff;
  --preto-menu: #333333;
  --preto-texto: #383838;
  --amarelo-acento: #f5af00;
  
  /* Cores Neutras */
  --neutro: #1F2933;
  --neutro-900: #323F4B;
  --neutro-800: #3E4C59;
  --neutro-700: #52606D;


  /* Cores Auxiliares */
  --cinza-aux-1: #e0e0e0;
  --cinza-aux-2: #f8f8f9;
  --cinza-aux-3: #eceef1;
  --azul-aux-1: rgba(246, 246, 246, 1);
  --azul-piscina: var(--cor-principal);
  --azul-claro: var(--azul-texto-600);
  --azul-claro2: var(--azul-fundo-300);
  --azul-claro3: var(--azul-link);
  
  /* Other Variables */
  --azul-tiffany: rgba(23, 154, 180, 1);
  --azul-tiffany-claro: rgba(23, 154, 180, 0.5);
  --verde-escuro: #1f5836;
  --vermelho: #b21f24;

  /* Cores especiais - Vermelho */
  --vermelho-100: #61050D;
  --vermelho-90: #8E0B16;
  --vermelho-80: #9C1621;
  --vermelho-70: #B2101D;
  --vermelho-60: #CB1A29;
  --vermelho-50: #DD3C49;
  --vermelho-40: #ED5E6A;
  --vermelho-30: #F35865;
  --vermelho-20: #FCB6BB;
  --vermelho-10: #FFE5E8;
  

  /* Cores especiais - Verde */
  --verde-100: #1F5836;
  --verde-90: #2E6B44;
  --verde-80: #428A5A;
  --verde-70: #59A678;
  --verde-60: #7AB88B;
  --verde-50: #9FC6B4;
  --verde-40: #BDDBCD;
  --verde-30: #D1E0D6;
  --verde-20: #D9F2E6;
  --verde-10: #EBFAF2;

}
.fundo-before::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-size: cover;
}

* .ubuntu-light, .ubuntu-light * {
	font-weight: 300;
}

* .ubuntu-medium, .ubuntu-medium * {
	font-weight: 400;
}

* .ubuntu-bold, .ubuntu-bold *, strong.ubuntu {
	font-weight: 600;
}


/* texto */
.t-azul-claro,
.t-azul-claro *,
.th-azul-claro:hover,
.th-azul-claro:hover * {
  color: var(--azul-claro);
}

.t-azul-escuro,
.t-azul-escuro *,
.th-azul-escuro:hover,
.th-azul-escuro:hover * {
   color: var(--azul-fundo-800)!important; /*Important para não sharepoint não colocar a font padrão.*/
}

.t-branco,
* .t-branco,
.th-branco:hover,
* .th-branco:hover {
  color: #fff;
}

.t-cinza-escuro,
* .t-cinza-escuro,
.th-cinza-escuro:hover,
* .th-cinza-escuro:hover {
  color: var(--cinza-fundo-900);
}

.t-cinza-escuro-30,
* .t-cinza-escuro-30,
.th-cinza-escuro-30:hover,
* .th-cinza-escuro-30:hover {
  color: var(--cinza-fundo-700);
}

.t-preto,
* .t-preto,
.th-preto:hover,
* .th-preto:hover {
  color: var(--preto-corpo);
}

/* fundo */
.highlight {
  background-color: #ffff33;
}

.b-azul-claro,
.ba-azul-claro.active {
  background-color: var(--azul-claro);
}

.b-azul-medio,
.ba-azul-medio.active {
  background-color: var(--azul-medio);
}

.b-branco,
.ba-branco.active {
  background-color: #fff;
}

.b-cinza-10,
.ba-cinza-10.active {
  background-color: var(--cinza-claro);
}

.b-cinza-medio-20,
.ba-cinza-medio-20.active {
  background-color: var(--cinza-claro);
}

.b-cinza-claro,
.ba-cinza-claro.active {
  background-color: var(--cinza-claro3);
}

.b-rodape,
.ba-rodape.active {
  background-color: var(--cinza-rodape);
}

.b-transparente,
.ba-transparente.active {
  background-color: transparent;
}

.b-unset,
.ba-unset.active {
  background-color: unset;
}

/* fundo dos before */
.bf-azul-medio::before {
  background-color: var(--azul-medio);
}

/* sombras */
.b-sombra {
  box-shadow: var(--cinza-sombra);
  border-radius: 5px;
}

/*bootstrap: xl*/
@media only screen and (min-width: 1201px) {
}

/*bootstrap: lg*/
@media only screen and (min-width: 993px) {
  /* cor de fundo */
  .b-lg-azul-claro,
  .ba-lg-azul-claro.active {
    background-color: var(--azul-claro);
  }

  .b-lg-azul-medio,
  .ba-lg-azul-medio.active {
    background-color: var(--azul-medio);
  }

  .b-lg-branco,
  .ba-lg-branco.active {
    background-color: #fff;
  }

  .b-lg-cinza-10,
  .ba-lg-cinza-10.active {
    background-color: var(--cinza-claro);
  }

  .b-lg-cinza-claro,
  .ba-lg-cinza-claro.active {
    background-color: var(--cinza-claro3);
  }

  .b-lg-rodape,
  .ba-lg-rodape.active {
    background-color: var(--cinza-rodape);
  }

  .b-lg-transparente,
  .ba-lg-transparente.active {
    background-color: transparent;
  }

  .b-lg-unset,
  .ba-lg-unset.active {
    background-color: unset;
  }

  /* fundo dos before */
  .bf-lg-azul-medio::before {
    background-color: var(--azul-medio);
  }
}

/*bootstrap: md*/
@media only screen and (min-width: 769px) {
}

/*bootstrap: sm*/
@media only screen and (max-width: 768px) {
}