@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

body {
    height: 100%;
    margin: 0;
}

html {
    padding-bottom: 50px;
    min-height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.tooltipPopUp {
    position: absolute;
    display: none;
    background-color: #fff;
    padding: 15px 40px 15px 20px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
    z-index:100;
    text-align: left
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 2px;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

.text-titulo-tooltip {
    font-family: "Inter Tight";
    font-weight:400;
    font-size: 16px;
}

.btn-tooltip {
    cursor:pointer;
    z-index: 101;
    cursor: pointer;
}

.tooltip-area {
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    height: 100%; 
    z-index: 2; 
    /*background-color: #f00;*/
}


/*Setinha do tooltip*/
.tooltipPopUp.tooltipPopUpTopLeft:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-right:8px solid #eef;
    left:-8px;
    top:8px;
}

.tooltipPopUp.tooltipPopUpBottomLeft:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-right:8px solid #fff;
    left:-8px;
    bottom:8px;
}

.tooltipPopUp.tooltipPopUpTopRight:after{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-left:8px solid #fff;
    right:-8px;
    top:8px;
}

.tooltipPopUp.tooltipPopUpBottomRight:after{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-left:8px solid #fff;
    right:-8px;
    bottom:8px;
}


/* Temas para o Tippy.js */

.tippy-tooltip {
    font-size: 12px;
    text-align: initial;
}

.tippy-tooltip .tippy-backdrop {
    background-color: transparent;
}

/* Tema Light do corpo da tooltip */
.tippy-tooltip.light-theme {
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
    color: #444;
}
/* Tema light da seta(arrow) da Tooltip */
.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme .tippy-arrow {
  border-top-color: #fff;
}
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme .tippy-arrow {
  border-bottom-color: #fff;
}
.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme .tippy-arrow {
  border-left-color: #fff;
}
.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme .tippy-arrow {
  border-right-color: #fff;
}

/* Tema Cinza do corpo da tooltip */
.tippy-tooltip.gray-theme {
    background-color: #f2f2f2;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
    color: #444;
}
/* Tema Cinza da seta(arrow) da Tooltip */
.tippy-popper[x-placement^='top'] .tippy-tooltip.gray-theme .tippy-arrow {
  border-top-color: #f2f2f2;
}
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.gray-theme .tippy-arrow {
  border-bottom-color: #f2f2f2;
}
.tippy-popper[x-placement^='left'] .tippy-tooltip.gray-theme .tippy-arrow {
  border-left-color: #f2f2f2;
}
.tippy-popper[x-placement^='right'] .tippy-tooltip.gray-theme .tippy-arrow {
  border-right-color: #f2f2f2;
}