﻿/*
Folha de estilo que estende as funcionalidades de componentes do Bootstrap e determina novos comportamentos aos elementos

Criada por: Rodrigo Quiñones Pichioli
Em: 26/11/2014
*/

/* Recúo do menu superior */
body { padding-top: 120px; background-color: #EEECEA }

/* Configura o Nome do usuário e servidor atribuindo tambérm suas respectivas posições e estilos */
.detalhes-usuario-servidor { padding:0 15px 0 15px; height:50px; background-color:RGBA(230,230,230,0.7) }
.detalhes-usuario-servidor .servidor { margin:3px 0 0 0; font-size:9px; }
.detalhes-usuario-servidor .nome-usuario { text-overflow:ellipsis; white-space: nowrap; overflow:hidden; width:120px; text-align:right; }

/* Mudança para tamanho de fonte padrão do copo de página */
.font-size-padrao { font-size: 14px !important; }

/* Limpa sujeira de alert na master - Correção porque o desenvolvedor não some com o bloco e sim com o conteúdo no JS */
#alerta { display: none; }

/* Comportamento para iframes numa modal - A pedido do pessoal de sistemas*/
.iframeModal { max-height: 480px; height: 480px; border: 0px; width: 100%; }

/* Toolbar dentro de um tag heading */
.panel-heading-com-toolbar{}
.panel-heading-com-toolbar h3.panel-title{ height: 35px; line-height: 35px; }

/* ---------------------------------------- */
/* COMPONENTES E ANIMAÇÕES COM BOOTSTRAP    */
/* ---------------------------------------- */

/* JUMBOTRON - Alteração da cor de fundo, necessário para o SIIM no novo template */
.jumbotron {background-color: #E4E4E4;}

/* MENSAGEM GENÉRICA - Deixa fixa no topo, transparente e e corrige uma série de problemas de posicionamento e tamanho */
#mensagemGenericaCIJUN { top: 120px; left: auto; z-index: 5; position: static; width: inherit; margin-left: -15px; box-sizing: border-box; -webkitbox-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; opacity:0.93; -webkit-opacity:0.93; -o-opacity:0.93; -moz-opacity:0.93; -ms-opacity:0.93; filter: alpha(opacity=93); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=93)"; }
@media only screen and (max-width: 750px){ #mensagemGenericaCIJUN { top: 112px; width: 100%; margin: -15px; }}
#stackTraceGenericaCIJUN { max-height: 250px; overflow: auto; }

/* MODAL */
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 { margin: 0 }
/* GRID PARA MODAL - Comportamentos padrão e variações */
.modal-body .table tbody { display: table-row-group; width: 100%; height: auto; overflow-y: hidden; overflow-x: hidden; }
.table-h-fixo-100 tbody { display: table-row-group; width: 100%; height: 100px !important; overflow-y: scroll !important; overflow-x: hidden !important; }
.table-h-fixo-200 tbody { display: table-row-group; width: 100%; height: 200px !important; overflow-y: scroll !important; overflow-x: hidden !important; }
.table-h-fixo-300 tbody { display: table-row-group; width: 100%; height: 300px !important; overflow-y: scroll !important; overflow-x: hidden !important; }
.table-h-fixo-400 tbody { display: table-row-group; width: 100%; height: 400px !important; overflow-y: scroll !important; overflow-x: hidden !important; }
.table-h-fixo-500 tbody { display: table-row-group; width: 100%; height: 500px !important; overflow-y: scroll !important; overflow-x: hidden !important; }

/* TOOLBAR DE BOTÕES criada com "well" do bootstrap - Menu fixo com botões e título fixo no topo da página, abaixo do menu principal */
.toolbar-botoes-fixa{ padding: 5px !important; position: fixed; top: 50px; width: 100%; z-index: 10; }
/* TOOLBAR DE BOTÕES - Título */
.toolbar-botoes-fixa .titulo-toolbar{ float: left; font-size: 16px; height: 35px; line-height: 5px; padding: 15px 10px; }
/* TOOLBAR DE BOTÕES - Botões */
.toolbar-botoes-fixa input, .toolbar-botoes-fixa button { margin: 0 !important; }

/* LOADER -> Invocado pelo SI a cada submit */
.progress-carregando-fundo {transition: width 2s linear 1s; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.5; background-color: #ffffff; filter: alpha(opacity = 50); z-index: 9999998; }
.progress-carregando {position: fixed; left: 45%; top: 40%; vertical-align: middle; text-align: center; z-index: 9999999; padding: 10px; font-size: 24px; }
.progress-carregando-gly-spin {-webkit-animation: progress-carregando-spin 2s infinite linear; -moz-animation: progress-carregando-spin 2s infinite linear; -o-animation: progress-carregando-spin 2s infinite linear; animation: progress-carregando-spin 2s infinite linear; }
@-moz-keyframes progress-carregando-spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } }
@-webkit-keyframes progress-carregando-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); }}
@-o-keyframes progress-carregando-spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); }}
@keyframes progress-carregando-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }}

.animacao-delay{
    animation: correcao-de-funcionamento 0.1s linear 0.5s; 
    -o-animation: correcao-de-funcionamento 0.1s linear 0.5s;
    -moz-animation: correcao-de-funcionamento 0.1s linear 0.5s;
    -webkit-animation: correcao-de-funcionamento 0.1s linear 0.5s;
}
.animacao-delay-off {
    animation-name: none;
    -o-animation-name: none;
    -moz-animation-name: none;
    -webkit-animation-name: none;
}
@keyframes correcao-de-funcionamento {
    0%   {display: none}
    100% {display: inline}
}

/* AGUARDE PADRÃO */
.barra-aguarde-com-spinner-overlay{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.5; background-color: #F5F5F5; filter: alpha(opacity = 50); z-index: 1000; display: none;}
.barra-aguarde-com-spinner {display: none; top: 97px; position: fixed; width: 100%; z-index: 1001; padding: 10px 10px 12px 10px; box-sizing: border-box; -o-box-sizing: border-box; -mozbox-sizing: border-box; -webkit-box-sizing: border-box;}
    .barra-aguarde-com-spinner span {margin: -25px 0 0 0; display: block; left: 48%; position: relative;}
    .barra-aguarde-com-spinner .spinner {height:30px; width:30px; margin:-2px 0 0 0; left: 44%; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left:6px solid rgba(0,174,239,.15); border-right:6px solid rgba(0,174,239,.15); border-bottom:6px solid rgba(0,174,239,.15); border-top:6px solid rgba(0,174,239,.8); border-radius:100%;}
.barra-aguarde-com-spinner-overlay-modal{z-index: 1000;}
.barra-aguarde-com-spinner-modal {top: 57px; margin-left: -16px;}
@-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} }
@-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} }
@-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);} }
@keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(359deg);} }

/* LOADER -> Componente de Endereço */
.loader, .loader:before, .loader:after { border-radius: 50%; }
.loader:before, .loader:after { position: absolute; content: ''; }
.loader:before { width: 5.2em; height: 10.2em; background: #FFF/*#0dcecb*/; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 5.2em 5.1em; transform-origin: 5.2em 5.1em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s; }
.loader { font-size: 11px; text-indent: -99999em; margin: 5em auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em #000/*#FFF*/; }
.loader:after { width: 5.2em; height: 10.2em; background: #FFF/*#0dcecb*/; border-radius: 0 10.2em 10.2em 0; top: -0.1em; left: 5.1em; -webkit-transform-origin: 0px 5.1em; transform-origin: 0px 5.1em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease; }
@-webkit-keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
@keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}

/* SPINNER -> Componentes AngularJS */
.spinner-componentes-angularJS { margin: 0 auto; width: 32px; height: 32px; position: relative; text-align: center; -webkit-animation: spinner-componentes-rotate 2.0s infinite linear; animation: spinner-componentes-rotate 2.0s infinite linear; }
.spinner-componentes-angularJS .dot1, .spinner-componentes-angularJS .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #337AB7;border-radius: 100%; -webkit-animation: spinner-componentes-bounce 2.0s infinite ease-in-out; animation: spinner-componentes-bounce 2.0s infinite ease-in-out; }
.spinner-componentes-angularJS .dot2 {top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
@-webkit-keyframes spinner-componentes-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes spinner-componentes-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes spinner-componentes-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }}
@keyframes spinner-componentes-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }}

/* ---------------------------------------- */
/* COMPONENTES ANGULAR COM BOOTSTRAP        */
/* ---------------------------------------- */

/* MODAL CONSULTA ENDERECO - Angular UI / UI Bootstrap */
.modal-dimensao-consulta-endereco .modal-dialog{ width: 840px; }
.modal-backdrop-overlay{ width: 100% !important; height: 100% !important; background-color: #000 !important; position: fixed; }