/* =============================================================================
   GLOBAL
   ============================================================================= */

.tools_icon p span{
display:block;
width:100%;
margin:0 0 0 10em;
padding:0;
}

.tools_icon .info,
.tools_icon .info.hide{
display:block;
min-width:1.5rem;
height:1.5rem;
background:var(--bgr-primary-600);
border:var(--clr-primary-400) 1px solid;
position:absolute;
top:-.35rem;
right:-.35rem;
border-radius:50%;
z-index:1;
opacity:1;
}

.tools_icon .info p,
.tools_icon .info.hide p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:var(--fs-xs);
font-weight:bold;
text-align:center;
color:var(--clr-primary-400);
}

.tools_icon.hide{
display:none;
}

.tools_icon .info.hide{
display:none;
}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width: 79.5rem){

#tools{
float:right;
display:flex;
justify-content:flex-end;
align-items:center;
}

.tools_icon{
float:left;
display:block;
width:3rem;
height:3rem;
position:relative;
cursor:pointer;
margin:.25rem .75rem 0 0;
padding:0;
}

.tools_icon p,
.tools_icon p a{
float:left;
width:3.25rem;
height:3.25rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
overflow:hidden;
z-index:2;
}

}

/* Non-standard breakpoints */

/* Mobile View */
@media screen and (max-width: 79.5rem){

#tools{
float:right;
display:flex;
justify-content:flex-end;
align-items:center;
}

.tools_icon{
float:left;
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
cursor:pointer;
margin:0 .5rem 0 0;
padding:.5rem;
}

.tools_icon p,
.tools_icon p a{
float:left;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
overflow:hidden;
z-index:2;
}

}