/* 
    Created on : 29/09/2017, 16:30:41
    Author     : SHL
*/

.estrutura_elemento_flutuante {
    position: relative;
    display: inline-block;
    /*height: 100%;*/
}

.estrutura_elemento_flutuante >.display {
    padding: 0.2Em !important;
}

.estrutura_elemento_flutuante .flutuante > div .display.small svg{
    width: 18px;
    height: 18px;
}

.estrutura_elemento_flutuante.link {
    background-color: #f7f7f7;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 5px 3px 5px 3px;
}

.estrutura_elemento_flutuante .link {
    padding: 3px !important;
    cursor: pointer;
}

.estrutura_elemento_flutuante.large {
    width: 56px;
    height: 56px;
}

.estrutura_elemento_flutuante.small > i {
    font-size: 40px;
}

.estrutura_elemento_flutuante > i,
.estrutura_elemento_flutuante.medium > i {
    font-size: 48px;
}

.estrutura_elemento_flutuante.large > i {
    font-size: 56px;
}

.estrutura_elemento_flutuante > img {
    width: 100%;
    height: 100%;
}

.estrutura_elemento_flutuante .flutuante {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 20%;
    height: 20%;
}

.estrutura_elemento_flutuante i.atalho_ativado {
    color: green;
}

.estrutura_elemento_flutuante i.atalho_desativado {
    color: #ccc;
}

.superior {
    top: 0;
}

.esquerdo {
    left: 0;
}

.inferior {
    bottom: 0;
}

.direito {
    right: 36px;
}

.estrutura_elemento_flutuante .flutuante > i {
    font-size: 100%;
}

.estrutura_elemento_flutuante .flutuante > .field_link i {
    font-size: 100%;
}

.estrutura_elemento_flutuante .flutuante > span.numero {
    font-size: 70%;
    width: 100%;
    height: 100%;
    color: white;
    background-color: red;
    border-radius: 50%;
    text-align: center;
}

.field_show_lista_compacto {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-content: center;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante > i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 24px;
    padding: 4px !important;
    line-height: normal;
    transform: translateX(-50%) translateY(-50%);
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante span,
.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante i {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    font-size: 12px !important;
    text-align: center;
    line-height: 16px;
    color: #fafafa;
    border-radius: 50%;
    padding: 2px !important;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante.superior, .estrutura_elemento_flutuante .superior{
    top: -8px;
}

.cabecalho .nav-wrapper ul > li .field_link_elem.estrutura_elemento_flutuante .flutuante.esquerdo, .estrutura_elemento_flutuante .esquerdo {
    left: 0px;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante.inferior, .estrutura_elemento_flutuante .inferior {
    bottom: -8px;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante.direito, .estrutura_elemento_flutuante .direito {
    right: 0px;
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante span,
.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante i {
    background-color: rgba(0, 0, 0, .75);
}

.cabecalho .nav-wrapper ul > li:hover .field_link_elem .estrutura_elemento_flutuante .flutuante span,
.cabecalho .nav-wrapper ul > li:hover .field_link_elem .estrutura_elemento_flutuante .flutuante i {
    background-color: rgba(0, 0, 0, .6);
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante i.atalho_ativado {
    background-color: rgba(0, 220, 57, .8);
}

.cabecalho .nav-wrapper ul > li .field_link_elem .estrutura_elemento_flutuante .flutuante i.atalho_desativado {
    background-color: rgba(220, 0, 57, .8);
}

.cabecalho .nav-wrapper ul > li:hover .field_link_elem .estrutura_elemento_flutuante .flutuante i.atalho_ativado {
    background-color: rgba(0, 220, 57, .65);
}

.cabecalho .nav-wrapper ul > li:hover .field_link_elem .estrutura_elemento_flutuante .flutuante i.atalho_desativado {
    background-color: rgba(220, 0, 57, .65);
}