:root {
    --fontDefault: "Inter var", ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/*----------------------- JANELAS - WINDOWS -------------------------------*/
/*----------------------- JANELAS - WINDOWS -------------------------------*/

/*Borda do Form/Janela */
.x-window-default{
    border-color: rgb(0,96,96);
}

/* Fundo do titulo/Caption dos Form/Janelas */
.x-window-header-default{   
    background-color: rgb(0,96,96); 
    border-color: rgb(0,96,96);
}

/* Cor das laterais do Form/Janela */
.x-window-body-default{
    border-color: rgb(0,96,96);
}

/* Cor do Titulo/Caption do Form/Janela */
.x-window-header-text{  
    color: rgb(255,255,255);
}

/*Ponteiro do mouse em itens desabilitados*/
.x-item-disabled, 
.x-item-disabled * {
    cursor: not-allowed !important;
    pointer-events: painted !important;
}


/*Intensidade da mascara branca*/
.x-mask{
    background-color: rgba(255,255,255,0.4);
}

/*Cor de fundo quando um panel é desabilitado*/
.x-panel-default.x-item-disabled.x-masked .x-mask{
    background-color: transparent;
}

/*Cor de fundo dos icones (Fechar, Maximizar, Minimizar) */
.x-window-header-default .x-tool-img {
    background-color: transparent;
    opacity: 0.7;
}

/*----------------------- JANELAS - WINDOWS -------------------------------*/
/*----------------------- JANELAS - WINDOWS -------------------------------*/

/*-------------------- MESSAGEBOX - MESSAGEDLG ----------------------------*/
/*-------------------- MESSAGEBOX - MESSAGEDLG ----------------------------*/

/* Cor de fundo do corpo das mensagens MessageDlg*/
.x-message-box,
.x-message-box .x-window-body{
    background-color: rgb(255,255,255);
}

/*Barra que separa o cor da mensagem do rodape*/
.x-message-box .x-window-body{
    border-bottom: 1px solid rgb(200,200,200);
}

/*Cor do rodapé das mensagens - Local onde fica os botões Ok, Cancelar e etc...*/
.x-toolbar-footer {
    background-color: rgb(235,235,235);
    border-top-width: 1px;
}

/*-------------------- MESSAGEBOX - MESSAGEDLG ----------------------------*/
/*-------------------- MESSAGEBOX - MESSAGEDLG ----------------------------*/

/*------------------------ PANEIS - PANELS --------------------------------*/
/*------------------------ PANEIS - PANELS --------------------------------*/

/*Cor de fundo dos paneis/panels*/
.x-panel-body-default{
    background-color: rgb(246,246,246); 
    border-color: rgb(0,96,96);    
    border-style: solid;
    font-size: 11px;
}

/* Cor da  borda dos paneis/panels */
.x-panel-default-outer-border-trbl {
    border-color: rgb(0,96,96) !important;
    border-width: 1px !important;
}

/*Cor de fundo dos paineis com titulos*/
.x-panel-header-default {
    background-image: none;
    background-color: rgb(0,96,96);
    background: -webkit-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -o-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -moz-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: linear-gradient(rgb(36,136,136), rgb(0,96,96));
}

/*Cor da borda dos paineis com titulos (Borda dos titulos) */
.x-panel-default-outer-border-trl {
    border-top-color: #006060 !important;
    border-top-width: 1px !important;
    border-right-color: #006060 !important;
    border-right-width: 1px !important;
    border-left-color: #006060 !important;
    border-left-width: 1px !important;
}

/*Cor da borda dos paineis com titulos (Borda do painel) */
.x-panel-default-outer-border-rbl {
    border-right-color: #006060 !important;
    border-right-width: 1px !important;
    border-bottom-color: #006060 !important;
    border-bottom-width: 1px !important;
    border-left-color: #006060 !important;
    border-left-width: 1px !important;
}
    
/*Cor de fundo dos icones (Fechar, Maximizar, Minimizar) nos paneis com titulos - Menu de Acesso/lateral */
.x-panel-header-default .x-tool-img{
    background-color: transparent;
}


/*------------------------ PANEIS - PANELS --------------------------------*/
/*------------------------ PANEIS - PANELS --------------------------------*/


/*------------------- STATUSBAR - BARRA STATUS ----------------------------*/
/*------------------- STATUSBAR - BARRA STATUS ----------------------------*/

/*Cor de fundo da barra de Status e centralização do Texto*/
.x-toolbar-default,
.x-statusbar-resizable {
    padding: 5px !important;    
    border-style: solid;
    border-color: rgb(150,150,150);
    border-width: 1px 0 0 0;
    background-image: none;
    background: rgb(225,225,225);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(225,225,225));
    background: -o-gradient(rgb(255,255,255), rgb(225,225,225));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(225,225,225));
    background: linear-gradient(rgb(255,255,255), rgb(225,225,225));
}

/*Texto da Barra de Status*/
.x-toolbar-default .x-toolbar-item,
.x-statusbar-item-text {
    font-weight: bold;
    border-right: 1px solid rgb(175,175,175);
    
}

/*------------------- STATUSBAR - BARRA STATUS ----------------------------*/
/*------------------- STATUSBAR - BARRA STATUS ----------------------------*/



/*------------------ MENU SUPERIOR - MENU SUPERIOR ------------------------*/
/*------------------ MENU SUPERIOR - MENU SUPERIOR ------------------------*/

/*Fundo do menu superior*/
.x-toolbar-docked-top{
    height: 100% !important;    
    padding: 6px 0 0 5px;
    border-style: solid;
    border-color: rgb(200,200,200);    
    background-image: none;
    background: rgb(225,225,225);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(225,225,225));
    background: -o-gradient(rgb(255,255,255), rgb(225,225,225));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(225,225,225));
    background: linear-gradient(rgb(255,255,255), rgb(225,225,225));
}

/*Ajuste para o conteudo do menu ocupar 100% do Height e não ultrapassar o limite do panel de fundo*/
.x-toolbar-docked-top .x-box-inner {
    height: 100% !important;
}

/*Itens do menu*/
.x-toolbar-docked-top .x-toolbar-item{
    top: 0px !important;
    padding: 0px;
    display: inline-block;        
    background-color: transparent;
    background-image: none;
    border-radius: 0px;
    border-width: 0px;        
    border-right: 1px solid rgb(200,200,200);
}

/* Cor do item do menu quando clicado com o mouse */
.x-toolbar-docked-top .x-btn.x-btn-menu-active.x-btn-default-toolbar-small, 
.x-toolbar-docked-top .x-btn.x-btn-pressed.x-btn-default-toolbar-small {
    
    background-image: none !important;
    background-color: transparent;
    
}


/*Texto dos itens do menu*/
.x-toolbar-docked-top .x-btn-default-toolbar-small .x-btn-inner{
    font-size: 13px;
    font-weight: normal;
}

/*Texto dos itens do menu quando o mouse está sobre eles*/
.x-toolbar-docked-top .x-toolbar-item.x-btn-over .x-btn-inner{
    text-decoration: underline;
}

.x-toolbar-docked-top .x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
	display: none;
}
/*Cor da borda do menu quando aberto*/
.x-menu{
    border-color: rgb(0,96,96);
    background-color: rgb(246,246,246); 
}

/*Cor de fundo do menu quando aberto*/
.x-menu .x-menu-body-default { 
    background-color: rgb(246,246,246); 
}

/*Cor de fundo do item do menu aberto quando o mouse está sobre ele*/
.x-menu .x-menu-item-active{
    background-color: rgb(230, 230, 230);
}


/*Tamanho dos itens do menu */
.x-menu .x-menu-item-link{
    padding: 4px 0px;
}

/*Posição dos icones dos itens do menu */
.x-menu .x-menu-item-icon{
    top: 8px;
    left: 5px;
}

/*------------------ MENU SUPERIOR - MENU SUPERIOR ------------------------*/
/*------------------ MENU SUPERIOR - MENU SUPERIOR ------------------------*/


/*------------ LOAD - LOADING - CARREGAR - CARREGAMENTO -------------------*/
/*------------ LOAD - LOADING - CARREGAR - CARREGAMENTO -------------------*/

/*Mensagem de carregamento com o logo da Fiorilli*/
.x-mask-msg-text{
    background-image: url("../imgs/loadmask/fiorilli_loading.gif") !important;
    padding: 35px 0 0 !important;
}

/*------------ LOAD - LOADING - CARREGAR - CARREGAMENTO -------------------*/
/*------------ LOAD - LOADING - CARREGAR - CARREGAMENTO -------------------*/


/*------------------------ GRIDS - TABELAS --------------------------------*/
/*------------------------ GRIDS - TABELAS --------------------------------*/

/* Cor de fundo dos grids */
.x-grid{
    background-color: rgb(246,246,246) !important;  
}

/*Cor de fundo das colunas dos grids*/
.x-grid .x-column-header{   
    background-image: none;
    background: rgb(220,220,220);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -o-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: linear-gradient(rgb(255,255,255), rgb(220,220,220));
}

/*Cor de fundo das colunas dos grids - Quando o mouse está sobre elas*/
.x-grid .x-column-header-over,
.x-grid .x-column-header-sort-asc, 
.x-grid .x-column-header-sort-desc{
    background-image: none;
    background: rgb(220,220,220);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -o-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: linear-gradient(rgb(255,255,255), rgb(220,220,220));
}

/*Corpo do Grid (Onde contém as linhas que compõe o grid)*/
.x-grid .x-grid-body{
    border-style: solid;
    border-color: rgb(150,150,150);
    border-width: 1px;  
}

/* Fonte das celulas do grid */
.x-grid .x-grid-item {
  font-size: 11px;
  font-family: var(--fontDefault) !important;
}

/*Rodapé do Grid - menu com as opções de paginação*/
.x-grid .x-toolbar-default{
    border-style: solid;
    border-top: 1px solid rgb(200,200,200) !important;  
    background-image: none;
    background: rgb(220,220,220);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -o-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: linear-gradient(rgb(255,255,255), rgb(220,220,220));
    padding: 0px 0px 0px 8px !important; /* Important por causa do StatusBar */
    bottom: 0 !important;
    top: initial !important;
    height: 25px !important;
}

/* Por causa do StatusBar */
.x-grid .x-toolbar-default .x-toolbar-item, .x-statusbar-item-text {
    font-weight: none; 
    border: none;
}

/*Tamanho do Rodapé do grid - menu de paginação*/
.x-grid .x-toolbar-default .x-box-inner{
    height: 20px !important;
    margin-top: 2px;
    margin-bottom: 2px;
}

/*Fundo dos icones do rodapé*/
.x-grid .x-btn-default-toolbar-small,
.x-grid .x-btn-default-toolbar-small-disabled{
    background-color: transparent;
    background-image: none;
    padding: 0;
    border-width: 0;
    top: 3px !important;
}

/*Separador dos icones do rodapé*/
.x-grid .x-toolbar-separator-horizontal{
    top: 3px !important;
    border-left-color: rgb(200,200,200);
}

/*Texto do rodapé (Página de X)*/
.x-grid .x-toolbar-text{
    top: 3px !important;
}

/*Tamanho do Input/Edit dentro do Rodapé para informar o numero da página*/
.x-grid .x-form-trigger-wrap .x-form-text{
    height: 17px;
    padding: 2px 6px 3px 6px;
}

/*Tamanho das colunas dos grids e centralização do titulo da coluna*/
.x-grid .x-column-header-inner{
    padding: 4px 10px 4px 4px;
}

/*Tamanho das colunas dos grids e centralização do titulo da coluna - Quando a coluna é do tipo CheckBox*/
.x-grid .x-column-header-checkbox .x-column-header-inner{
    padding: 4px 10px 4px 4px;
}

/*Tamanho da fonte das colunas */
.x-grid .x-column-header-text{
    font-size: 11px;
}


/* Cor das linhas alternadas/listradas do grid */
.x-grid .x-grid-item-alt{
    background-color: rgba(0,96,96, 0.1);
}


/* Linha selecionada da grid */
.x-grid .x-grid-with-row-lines .x-grid-item.x-grid-item-selected,
.x-grid .x-grid-no-row-lines .x-grid-item.x-grid-item-selected {    
    background-color: rgba(0, 96, 96, 0.45);
    font-weight: bold;
    border-color: rgb(150,150,150);
    border-top: 1px solid #006060;
    border-bottom: 1px solid #006060; 
}

/* Cor da borda da celula quando linha selecionada da grid */
.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
    border-color: white;
    border-style: solid;
}

/* Cor da linha quando o mouse está sobre ela */
.x-grid .x-grid-with-row-lines .x-grid-item.x-grid-item-over, 
.x-grid .x-grid-no-row-lines .x-grid-item.x-grid-item-over {
    background-color: rgb(230,230,230);
    border-color: rgba(0,96,96);
    cursor: pointer;
}

/* Cor da linha zebrada quando o mouse está sobre ela */
.x-grid .x-grid-with-row-lines .x-grid-item-alt.x-grid-item-over, 
.x-grid .x-grid-no-row-lines .x-grid-item-alt.x-grid-item-over {
    background-color: rgba(0, 96, 96, 0.1);
    border-color: rgba(0,96,96);
    cursor: pointer;
}

/* Cor da linha SELECIONADA quando o mouse está sobre ela */
.x-grid .x-grid-with-row-lines .x-grid-item.x-grid-item-selected.x-grid-item-over, 
.x-grid .x-grid-no-row-lines .x-grid-item.x-grid-item-selected.x-grid-item-over {
    background-color: rgba(0, 96, 96, 0.45);
    border-color: rgba(0,96,96);
    cursor: pointer;
}

/* Cor da linha quando o mouse está sobre ela - Celulas */
.x-grid .x-grid-with-col-lines .x-grid-item-over .x-grid-cell {
    cursor: pointer;   
}

/*Cor da linha anterior da linha - Quando o mouse está sobre ela */
.x-grid .x-grid-with-row-lines .x-grid-item-over + .x-grid-item,
.x-grid .x-grid-no-row-lines .x-grid-item-over + .x-grid-item {
    border-top-color: rgba(0,96,96);    
}

/*Cor da linha anterior da linha selecionada ou com focus - Quando o mouse está sobre ela */
.x-grid .x-grid-with-row-lines .x-grid-item-selected.x-grid-item-over + .x-grid-item,
.x-grid .x-grid-no-row-lines .x-grid-item-selected.x-grid-item-over + .x-grid-item {
    border-top-color: transparent;    
}

/* Cor da celula selecionada quando o grid NÃO é RowLine */
.x-grid .x-grid-row .x-grid-cell-selected {
    background-color: rgba(0, 96, 96, 0.45) !important;
    font-weight: bold;
}

/*Cor de fundo dos agrupamentos da tabela*/
.x-grid .x-grid-group-hd{
    background-image: none;
    background: rgb(220,220,220);
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -o-gradient(rgb(255,255,255), rgb(220,220,220));
    background: -moz-linear-gradient(rgb(255,255,255), rgb(220,220,220));
    background: linear-gradient(rgb(255,255,255), rgb(220,220,220));
    border-width: 1px;
}

/*Titulo dos agrupamentos da tabela*/
.x-grid .x-grid-group-title {
    color: #333;
}

/*Intensidade da mascara branca em Campos e Grid desabilitados*/
/* favor deixar sempre por ultimo */
.x-item-disabled.x-grid .x-mask{
    opacity: 0 !important;
}


/*------------------------ GRIDS - TABELAS --------------------------------*/
/*------------------------ GRIDS - TABELAS --------------------------------*/

/*-------------------------- ABAS - TABS ----------------------------------*/
/*-------------------------- ABAS - TABS ----------------------------------*/

/* Remove fundo das abas */
.x-tab-bar-default {
    background-color: transparent;
}

/*Aba/Tab do Top Desabilitada*/
.x-tab-bar .x-tab-default-top{   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(210,210,210); 
    background: -webkit-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -o-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -moz-linear-gradient(rgb(210,210,210), rgb(255,255,255));
    background: linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    padding: 2px 12px 5px 12px;
    max-height: 32px;
}


/*Aba/Tab do Top Ativada*/
.x-tab-bar .x-tab.x-tab-active.x-tab-default-top {   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(255,255,255); 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210));
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    padding: 2px 12px 5px 12px;
    max-height: 32px;

    box-shadow: inset 0px -4px 0px -1px #0fbf90;          
    -moz-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -o-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -webkit-box-shadow: inset 0px -4px 0px -1px #0fbf90;    
}


/*Aba/Tab do Bottom Desabilitada*/
.x-tab-bar .x-tab-default-bottom{   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(210,210,210); 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210));
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    /*padding: 8px 12px 7px 12px;*/  /*Default*/   
}


/*Aba/Tab do Bottom Ativada*/
.x-tab-bar .x-tab.x-tab-active.x-tab-default-bottom {   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(255,255,255); 
    background: -webkit-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -o-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -moz-linear-gradient(rgb(210,210,210), rgb(255,255,255));
    background: linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    /*padding: 8px 12px 7px 12px;*/  /*Default*/   

    box-shadow: inset 0px -4px 0px -1px #0fbf90;          
    -moz-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -o-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -webkit-box-shadow: inset 0px -4px 0px -1px #0fbf90;    
}

/*Aba/Tab da Left Desabilitada*/
.x-tab-bar .x-tab-default-left{   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(210,210,210); 
    background: -webkit-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -o-linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    background: -moz-linear-gradient(rgb(210,210,210), rgb(255,255,255));
    background: linear-gradient(rgb(210,210,210), rgb(255,255,255)); 
    /*padding: 8px 12px 7px 12px;*/  /*Default*/       
}


/*Aba/Tab da Left Ativada*/
.x-tab-bar .x-tab.x-tab-active.x-tab-default-left{   
    border-color: rgb(175,175,175);
    border-style: solid;
    border-width: 1px 1px 0 1px;
    background: rgb(255,255,255); 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210));
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    /*padding: 8px 12px 7px 12px;*/  /*Default*/   

    box-shadow: inset 0px -4px 0px -1px #0fbf90;          
    -moz-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -o-box-shadow: inset 0px -4px 0px -1px #0fbf90;
    -webkit-box-shadow: inset 0px -4px 0px -1px #0fbf90;    
}


/*Barra embaixo das Abas/Tab*/
.x-tab-bar .x-tab-bar-strip-default{
    background: rgb(210,210,210);
    border-color: rgb(175,175,175);
    border-width: 1px 1px 0;

}

/*Cor do Texto das Abas/Tabas*/
.x-tab-bar .x-tab-default-top .x-tab-inner,
.x-tab-bar .x-tab-default-left .x-tab-inner{
    color: rgb(0,96,96);
    font-weight: normal;
    font-size: 12px;
}


/*Cor do Texto das Abas/Tabas quando Ativadas*/
.x-tab-bar .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: rgb(0,96,96);
    font-weight: bold;
}


/*Aumenta o icone da aba lateral (LEFT)*/
.x-tab-bar .x-tab-default-left .x-tab-icon-el {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-position: center center;
    top: -6px;
    left: -6px;
}

/*Icone de fechar a aba*/
.x-tab-bar .x-tab-default .x-tab-close-btn{
   background-image: url(../imgs/tab/tab-default-close.png); 
}

/* Cor de fundo das steas */
.x-tab-bar .x-box-scroller-tab-bar-default {
    background-color: transparent;
}

/*Opacidade das setas*/
.x-tab-bar .x-box-scroller {
    opacity: 1;
}

/*Icone do mouse quando a seta está desabilitado*/
.x-tab-bar .x-box-scroller-disabled {
    cursor: not-allowed;
}

/*Icone seta para direita*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-right {    
    background-image: url(../imgs/tab/scroll-right.png); 
    background-position: 0px 0px;
}

/*Icone seta para direita - Desabilitada*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-right.x-box-scroller-disabled {
    background-image: url(../imgs/tab/scroll-right.png); 
    background-position: -24px 0px;
}


/*Icone seta para esquerda*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-left {
    background-image: url(../imgs/tab/scroll-left.png); 
    background-position: 0px 0px;
}

/*Icone seta para esquerda - Desabilitada*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-left.x-box-scroller-disabled  {
    background-image: url(../imgs/tab/scroll-left.png); 
    background-position: -24px 0px;
}


/*Icone seta para cima*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-top {
    background-image: url(../imgs/tab/scroll-top.png); 
    background-position: 0px 0px;
}

/*Icone seta para cima - Desabilitada*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-top.x-box-scroller-disabled {
    background-image: url(../imgs/tab/scroll-top.png); 
    background-position: -31px 0px;
}

/*Icone seta para baixo*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-bottom {
    background-image: url(../imgs/tab/scroll-bottom.png); 
    background-position: 0px 0px;
}

/*Icone seta para baixo - Desabilitada*/
.x-tab-bar .x-box-scroller-tab-bar-default.x-box-scroller-bottom.x-box-scroller-disabled{
    background-image: url(../imgs/tab/scroll-bottom.png); 
    background-position: -31px 0px;
}

/* Corrige o tamanho dos icones dos módulos */
.x-tab-bar .x-tab-button-default {
    height: 100%;
}

/* Corrige o tamanho dos icones dos módulos */
.x-tab-bar .x-tab-icon-left > .x-tab-icon-el-default, .x-tab-icon-right > .x-tab-icon-el-default {
    width: 24px;
    height: 24px;
}

/*-------------------------- ABAS - TABS ----------------------------------*/
/*-------------------------- ABAS - TABS ----------------------------------*/

/*---------------------------- TREEVIEW -----------------------------------*/
/*---------------------------- TREEVIEW -----------------------------------*/

/*Texto dos TreeView*/
.x-tree-panel .x-tree-node-text {
   font-family: var(--fontDefault) !important;
   font-weight: bold;
   font-size: 13px;
   color: rgb(50,50,50);   
}

/*Fundo padrão dos itens do TreeView*/
.x-tree-panel .x-grid-item {
    background-color: transparent;
}

/*Tamanho dos Icones do treeView*/
.x-tree-panel .x-tree-elbow-img,
.x-tree-panel .x-tree-icon{
    height: 30px;
}

/*Cor do itens quando o mouse está sobre eles*/
.x-tree-panel .x-grid-item-over {
    background-color: rgb(230,230,230);
    background-image: none;
    cursor: pointer;
    border-width: 0;
}


/*Cor das celulas do itens quando o mouse está sobre eles*/
.x-tree-panel .x-grid-item-over .x-grid-cell {
    cursor: pointer;    
}

/*Cor do itens quando selecionado ou em focus*/
.x-tree-panel .x-grid-item-selected {
    background-color: rgba(0, 96, 96, 0.4);
    border-color: rgb(0, 96, 96);
    border-width: 1px 0;   
    border-style: solid;
}


/*Imagem da Linha Pai dos Itens => | */
.x-tree-panel .x-tree-elbow-line{
    background-image: url("../imgs/tree/elbow-line.png") !important;
}

/*Imagem da Linha Normal dos Itens => |- */
.x-tree-panel .x-tree-elbow{
    background-image: url("../imgs/tree/elbow.png") !important;
}

/*Imagem da Linha Final - Último item => |_ */
.x-tree-panel .x-tree-elbow-end{
    background-image: url("../imgs/tree/elbow-end.png") !important;
}


/*Imagem da Linha Normal Reduzida - Item Reduzido => |+- */
.x-tree-panel .x-tree-elbow-plus{
    background-image: url("../imgs/tree/elbow-plus.png") !important;
}

/*Imagem da Linha Normal Expandido - Item Expandido => |-- */
.x-tree-panel .x-grid-tree-node-expanded .x-tree-elbow-plus{
    background-image: url("../imgs/tree/elbow-minus.png") !important;
}



/*Imagem da Linha Final Expandida - Último item Expandido => |-_ */
.x-tree-panel .x-grid-tree-node-expanded .x-tree-elbow-end-plus{
    background-image: url("../imgs/tree/elbow-end-minus.png") !important;
}

/*Imagem da Linha Final Reduzida - Último item Reduzido => |+_  */
.x-tree-panel .x-tree-elbow-end-plus{
    background-image: url("../imgs/tree/elbow-end-plus.png") !important;
}

/*---------------------------- TREEVIEW -----------------------------------*/
/*---------------------------- TREEVIEW -----------------------------------*/


/*----------------- NAVIGATOR - NAVEGACAO - NAVEGAÇÃO ---------------------*/
/*----------------- NAVIGATOR - NAVEGACAO - NAVEGAÇÃO ---------------------*/

/*Cor de fundo dos navigators/navegacao branco*/
.navigator .x-btn-default-small {
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(230,230,230); 
    background: -webkit-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -o-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -moz-linear-gradient(#ffffff, rgb(230,230,230));
    background: linear-gradient(#ffffff, rgb(230,230,230)); 
}

/*Cor de fundo dos navigators/navegacao branco - desabilitado */
.navigator .x-btn-default-small.x-btn-disabled {
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(230,230,230); 
    background: -webkit-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -o-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -moz-linear-gradient(#ffffff, rgb(230,230,230));
    background: linear-gradient(#ffffff, rgb(230,230,230)); 
    opacity: 0.3;
} 



/*Cor de fundo dos navigators/navegacao branco - Quando o mouse está sobre eles*/
.navigator .x-btn-default-small:hover {
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(230,230,230);  
    background: -webkit-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -o-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -moz-linear-gradient(#ffffff, rgb(230,230,230));
    background: linear-gradient(#ffffff, rgb(230,230,230)); 
    text-decoration: none;
}

/*----------------- NAVIGATOR - NAVEGACAO - NAVEGAÇÃO ---------------------*/
/*----------------- NAVIGATOR - NAVEGACAO - NAVEGAÇÃO ---------------------*/

/*------------------------ LISTA - LISTBOX --------------------------------*/
/*------------------------ LISTA - LISTBOX --------------------------------*/

/*Borda da lista*/
.x-boundlist{
    border-color: rgb(175, 175, 175);
}

/*Borda do item da lista quando o mouse está sobre ele*/
.x-boundlist-item{
    border-style: solid;
    border-width: 0px;
}

/*Fundo do item selecionado*/
.x-boundlist-selected{
   background: rgba(0, 96, 96, 0.5);
   border-color: rgba(0, 96, 96, 0.5);
}

/*Fundo do item quando o mouse está sobre ele*/
.x-boundlist-item-over{
   background: rgba(0, 96, 96, 0.5);    
}

/*------------------------ LISTA - LISTBOX --------------------------------*/
/*------------------------ LISTA - LISTBOX --------------------------------*/

/*------------------------ BOTOES - BUTTONS -------------------------------*/
/*------------------------ BOTOES - BUTTONS -------------------------------*/

/*Cor de fundo dos botoes*/
.x-btn-default-small,
.x-btn-default-medium,
.x-btn-default-large,
.x-datepicker-month .x-btn,
.x-datepicker-month .x-btn .x-btn-tc,
.x-datepicker-month .x-btn .x-btn-tl,
.x-datepicker-month .x-btn .x-btn-tr,
.x-datepicker-month .x-btn .x-btn-mc,
.x-datepicker-month .x-btn .x-btn-ml,
.x-datepicker-month .x-btn .x-btn-mr,
.x-datepicker-month .x-btn .x-btn-bc,
.x-datepicker-month .x-btn .x-btn-bl,
.x-datepicker-month .x-btn .x-btn-br
{
    border-radius: 3px; 
    border-style: solid;
    border-width: 1px !important;
    border-color: rgb(0,96,96);
    background-image: none;
    background-color: rgb(0,96,96); 
    background-image: -webkit-linear-gradient(rgb(36,136,136), rgb(0,96,96)); 
    background-image: -o-linear-gradient(rgb(36,136,136), rgb(0,96,96)); 
    background-image: -moz-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background-image: linear-gradient(rgb(36,136,136), rgb(0,96,96)); 
    transition: 0.3s;
}

/*Cor do texto dos botoes*/
.x-btn-default-small .x-btn-inner,
.x-btn-default-medium .x-btn-inner,
.x-btn-default-large .x-btn-inner{      
    color: rgb(255,255,255);
    font-size: 11px;
    font-family: var(--fontDefault) !important;
}

/*Cor de fundo dos botoes - Quando o mouse está sobre eles*/
.x-btn-default-small.x-btn-over,
.x-btn-default-medium.x-btn-over,
.x-btn-default-large.x-btn-over{  
    background-image: none;
    background-color: rgb(56,156,156); 
    background-image: -webkit-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background-image: -o-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background-image: -moz-linear-gradient(rgb(56,156,156), rgb(16,116,116));
    background-image: linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    text-decoration: none;
}

/*Cor do texto dos botoes - Quando o mouse está sobre eles*/
.x-btn-default-small.x-btn-over .x-btn-inner,
.x-btn-default-medium.x-btn-over .x-btn-inner,
.x-btn-default-large.x-btn-over .x-btn-inner{ 
    color: rgb(255,255,255);        
    font-size: 11px;
    font-family: var(--fontDefault) !important;
}


/*Cor de fundo dos botoes - Quando o mouse está em focus*/
.x-btn-default-small.x-btn-focus,
.x-btn-default-medium.x-btn-focus,
.x-btn-default-large.x-btn-focus,
.x-btn-default-small.x-btn-pressed,
.x-btn-default-medium.x-btn-pressed,
.x-btn-default-large.x-btn-pressed,
.x-btn-default-small.x-btn.x-btn-menu-active,
.x-btn-default-medium.x-btn.x-btn-menu-active,
.x-btn-default-large.x-btn.x-btn-menu-active { 
    background-image: none;
    border-color: rgb(15,175,130);  
    background-color: rgb(15,175,130) !important; 
    background-image: -webkit-linear-gradient(rgb(96,196,196), rgb(16,116,116)) !important; 
    background-image: -o-linear-gradient(rgb(96,196,196), rgb(16,116,116)) !important; 
    background-image: -moz-linear-gradient(rgb(96,196,196), rgb(16,116,116)) !important;
    background-image: linear-gradient(rgb(96,196,196), rgb(16,116,116)) !important; 
    text-decoration: none;

    box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 10px rgba(15, 175, 130, 0.9) !important;
    -webkit-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 10px rgba(15, 175, 130, 0.9) !important;
    -moz-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 10px rgba(15, 175, 130, 0.9) !important;

}

/*Cor do texto dos botoes - Quando o mouse está em focus*/
.x-btn-default-small.x-btn-focus .x-btn-inner,
.x-btn-default-medium.x-btn-focus .x-btn-inner,
.x-btn-default-large.x-btn-focus .x-btn-inner,
.x-btn-default-small.x-btn-pressed .x-btn-inner,
.x-btn-default-medium.x-btn-pressed .x-btn-inner,
.x-btn-default-large.x-btn-pressed .x-btn-inner{    
    color: rgb(255,255,255);        
    font-weight: bold !important;
    font-size: 11px;
    font-family: var(--fontDefault) !important;
}



/*Cor de fundo dos botoes - Quando está desabilitado*/
.x-btn-default-large.x-btn-disabled,
.x-btn-default-medium.x-btn-disabled,
.x-btn-default-small.x-btn-disabled {
    border-radius: 3px; 
    border-style: solid;
    border-width: 1px !important;
    border-color: rgb(0,96,96);
    background-image: none !important;
    background-color: rgb(0,96,96)  !important; 
    background-image: -webkit-linear-gradient(rgb(36,136,136), rgb(0,96,96)) !important; 
    background-image: -o-linear-gradient(rgb(36,136,136), rgb(0,96,96)) !important; 
    background-image: -moz-linear-gradient(rgb(36,136,136), rgb(0,96,96)) !important;
    background-image: linear-gradient(rgb(36,136,136), rgb(0,96,96)) !important; 
}

/*Cor do texto dos botoes - Quando está desabilitado*/
.x-btn-default-large.x-btn-disabled .x-btn-inner,
.x-btn-default-medium.x-btn-disabled .x-btn-inner,
.x-btn-default-small.x-btn-disabled .x-btn-inner{
    color: rgb(255,255,255);        
    font-weight: normal;
}



/*------------------------ BOTOES - BUTTONS -------------------------------*/
/*------------------------ BOTOES - BUTTONS -------------------------------*/

/*------------------------- EDITS - INPUTS --------------------------------*/
/*------------------------- EDITS - INPUTS --------------------------------*/

/* Borda dos campos Inputs/Edits */
 .x-form-item .x-form-trigger-wrap-default {
    border-radius: 3px; 
    border-color: rgb(150,150,150);
    border-width: 1px;
    border-style: solid;
 }

 /* Borda dos Icones do lado Ex: ComboBox e Date*/
.x-form-item .x-form-trigger{
    border-radius: 3px;   
}

/* Borda e fonte dos campos Inputs/Edits - Input dentro do campo */
 .x-form-item .x-form-text-default {
    border-radius: 3px; 
    padding: 2px;
    font-size: 11px;
    font-family: var(--fontDefault) !important;
 }

/* Fundo e formato dos Edits - Quando está em focus */
 .x-form-item .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
    border-color: rgb(0,96,96);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(0, 96, 96, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(0, 96, 96, 0.6);
 }

/* Intensidade da mascara branca quando estão desabilitados */
.x-form-item.x-form-item-default.x-item-disabled {
    opacity: .6;
}

/* Cor de fundo do edit quando desabilitado */
 .x-form-item.x-item-disabled .x-form-text-default {
    background-color: rgb(235,235,235);
 }

/*------------------------- EDITS - INPUTS --------------------------------*/
/*------------------------- EDITS - INPUTS --------------------------------*/


/*------------------------- TextArea - MEMO --------------------------------*/
/*------------------------- TextArea - MEMO --------------------------------*/

/* Remove a altura minima dos Memos/TextArea */
.x-form-text-default.x-form-textarea {
	min-height: initial;
}

/*------------------------- TextArea - MEMO --------------------------------*/
/*------------------------- TextArea - MEMO --------------------------------*/

/*------------------------- LABELS - LABELS -------------------------------*/
/*------------------------- LABELS - LABELS -------------------------------*/

/*Cor padrão das Labels*/
.x-unilabel{
    color: rgb(35,35,35);
}

/*------------------------- LABELS - LABELS -------------------------------*/
/*------------------------- LABELS - LABELS -------------------------------*/


label {
    font-family: var(--fontDefault) !important;
}

/*-------------------------- RADIO - RADIO --------------------------------*/
/*-------------------------- RADIO - RADIO --------------------------------*/

/* Fonte padrão dos RadioButtons e CheckBox */
.x-form-cb-label-default {
    font-size: 11px;
    font-family: var(--fontDefault) !important;
    padding-top: 2px;
}


/*Formato do radio button quando o mouse está sobre ele*/
.x-form-type-radio:hover .x-form-radio,
.x-form-type-radio:hover .x-form-cb-input,
.x-form-type-radio:hover .x-form-cb-label{
   cursor: pointer;
}

/*-------------------------- RADIO - RADIO --------------------------------*/
/*-------------------------- RADIO - RADIO --------------------------------*/

/*----------------------- CHECKBOX - CHECKBOX -----------------------------*/
/*----------------------- CHECKBOX - CHECKBOX -----------------------------*/

/*ATENCAO O TEXTO/FONTE PADRAO DOS CEHCKBOXS SAO DEFINIDOS NO ITEM A CIMA RADIO*/
/*ATENCAO O TEXTO/FONTE PADRAO DOS CEHCKBOXS SAO DEFINIDOS NO ITEM A CIMA RADIO*/
/*ATENCAO O TEXTO/FONTE PADRAO DOS CEHCKBOXS SAO DEFINIDOS NO ITEM A CIMA RADIO*/

/*Formato do CheckBox quando o mouse está sobre ele*/
.x-form-type-checkbox:hover .x-form-checkbox,
.x-form-type-checkbox:hover .x-form-cb-input,
.x-form-type-checkbox:hover .x-form-cb-label {
    cursor: pointer;
}

/*----------------------- CHECKBOX - CHECKBOX -----------------------------*/

/*---------------------- GROUPBOX - RADIOGROUP ----------------------------*/

.x-fieldset-default {
    border-color: #006060;
}

/*---------------------- GROUPBOX - RADIOGROUP ----------------------------*/



/*------------------------------------------------------- CUSTOMIZACAO - CUSTOM -----------------------------------------------------------*/

/*----------------------- JANELAS - WINDOWS -------------------------------*/

/* Janela Popup */
.popWindow
{
    background-color: white !important;
    background-repeat: no-repeat;
}

.popImage
{
   background-repeat: no-repeat;
   background-size:cover;
}

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.popWindowInfo
{
   background-image:url("../imgs/fiorilli/icones/iinfo.png");
   background-repeat: no-repeat;
   background-size:cover;
   height: 16px;
   width: 16px;
}

.popWindowLogo
{
   background-image:url("../imgs/fiorilli/icones/logo.png");
   background-repeat: no-repeat;
   background-size:cover;
   height: 16px;
   width: 16px;
}

/*Retira a borda dos Forms/Janelas*/
.sem-borda{
    border-width: 0px !important; 
    border-style: none !important;
}

/*Retirar a borda do Form/Janela de Login*/
.login-semborda{
    border-width: 0px;
}

/*----------------------- JANELAS - WINDOWS -------------------------------*/


/*------------------------- PANEL - PANEIS --------------------------------*/

/*Tamanho do titulo dos panels - Panel Fiorilli*/
.panel-top .x-panel-header-default-horizontal {
    padding: 2px 9px 2px !important;
}

/*Tamanho da fonte dos panels - Panel Fiorilli*/

.panel-top .x-panel-header-text-container-default,
.panel-top .x-panel-header-title-default{
    font-size: 11px;
    color: white;
}

/*Expande o panel para altura 100% */
.expand-panel{
    height:100% !important;
}

/*------------------------- PANEL - PANEIS --------------------------------*/

/*--------------------------- ABAS - TABS ---------------------------------*/

/*Aba/Tab com tamanho reduzido desabilitado*/
.tab-menu-top {
    height: 25px !important;
}

/*Aba/Tab com tamanho reduzido desabilitado*/
.tab-menu-top .x-tab-default-top{
    height: 25px !important;
    padding: 2px 12px 1px 12px !important;
}


/*Aba/Tab com tamanho reduzido Ativado*/
.tab-menu-top .x-tab-default-active{
    height: 25px !important;
    padding: 2px 12px 1px 12px !important;
}

/*Aba/Tab com tamanho reduzido Ativado*/
.tab-menu-top .x-tab-bar-plain{
    height: 30px !important;
}

/*Adiciona o icone de "+" (Incluir) nas abas - Rodrigo */
.x-tab-header-inserir {
    background-image: url(../imgs/button/inserir.png) !important;
    background-color: transparent !important;
    background-position-y: 4px;
    background-repeat: no-repeat !important;
    padding: 1px 5px 0px 15px;
    width: 68px !important;
    cursor: pointer;
}

.x-tab-header-cursor {
    cursor: pointer;
}

/*Altera o tamanho do icone da aba para 26px*/
.tab-icon26 .x-tab-icon-el {
    width: 26px;
    height: 26px;
    line-height: 26px;
    background-position: center center;
}

/*--------------------------- ABAS - TABS ---------------------------------*/

/*----------------------- TREEVIEW - TREEVIEW -----------------------------*/

/*Diminui o tamanho da fonte dos itens do TrewView para 11px*/
.x-tree11 .x-tree-node-text {
    font-weight: normal;
    font-size: 11px !important;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-row-selected .x-grid-td {
    background-image:none;
    background-color: transparent !important;
    font-weight: bold;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-row-focused .x-grid-td {
    border-bottom-color: transparent !important;
    border-bottom-width: 0px;
    border-top-color: transparent;
    border-top-width: 0px;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-row-before-focused .x-grid-td {
    border-bottom-color: transparent !important;
    border-bottom-width: 0px !important;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-row-before-over .x-grid-td {
    border-bottom-color: transparent !important;
    border-bottom-style: solid;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-row-over .x-grid-td {
    background-color: #e6e6e6 !important;
    border-bottom-color: transparent !important;
    border-bottom-style: solid;
}

/*Remove a seleção do Grid*/
.treeview-semselecao .x-grid-with-row-lines .x-grid-table-over-first {
    border-top-color: transparent !important;
    border-top-style: solid;
}

/*----------------------- TREEVIEW - TREEVIEW -----------------------------*/

/*-------------------------- EDITS - INPUTS -------------------------------*/

/*Deixa o Edit/DBEdit com aparecencia de Label/DBText - Felipe Godinho (Little) */
.edit-text .x-form-text,
.edit-text .x-form-trigger-wrap-default {
    border-width: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    cursor: default !important;
    color: black;
    padding: 0px;
    opacity: 1 !important;
    min-height: 9px !important;
    height: initial !important;
    font-size: 11px;
    font-family: var(--fontDefault) !important;
}


/*Deixa o Edit/DBEdit com aparecencia de Label/DBText quando desabilitado - Felipe Godinho (Little) */
.edit-text.x-form-item.x-form-item-default.x-item-disabled {
    opacity: 1 !important;
}

/*Deixa o espaçamento interno no TextArea/DBMemo/Memo quando está com aparecencia de Label/DBText - Felipe Godinho (Little) */
.edit-text .x-form-textarea{
    padding: 2px 3px 3px 3px;
}

/*Adiciona a borda no Edit/DBEdit com aparecencia de Label/DBText - Felipe Godinho (Little) */
.edit-text-borda .x-form-text{
    border-width: 1px !important;
    border-style: solid !important;   
}

/*Alinha o conteudo/texto do Edit/DBEdit com aparecencia de Label/DBText para esquerda - Felipe Godinho (Little) */
.edit-text-left .x-form-text{
    text-align: left !important;    
}

/*Alinha o conteudo/texto do Edit/DBEdit com aparecencia de Label/DBText para direita - Felipe Godinho (Little) */
.edit-text-right .x-form-text{
    text-align: right !important;    
}

/*Alinha o conteudo/texto do Edit/DBEdit com aparecencia de Label/DBText ao Centro - Felipe Godinho (Little) */
.edit-text-center .x-form-text{
    text-align: center !important;    
}

/*-------------------------- EDITS - INPUTS -------------------------------*/

/*------------------------- TOOLTIPS - HINTS ------------------------------*/

/*Posiciona o Icone de Erro dentro do Edit/Input - Felipe Godinho (Little) */
.tooltip-icon{
    position: absolute;
    /*margin-left: -22px;
    margin-top: -11px;*/
    right: 0;
    margin-top: -23px;
}

/*Posiciona o Icone de Erro dentro do ComboBox - Felipe Godinho (Little) */
.tooltip-icon-combo{
    position: absolute;
    margin-left: -46px;
    margin-top: -11px;
}

/*Posiciona o Icone de Erro dentro do DatePicker  - Felipe Godinho (Little) */
.tooltip-icon-date{
    position: absolute;
    /*margin-left: -41px;
    margin-top: -11px;*/
    right: 0;
    margin-top: -23px;
    margin-right: 18px;
}

/*Icone de erro do ToolTipo/Hint - Felipe Godinho (Little) */
.tooltip-error{
    background-image: url("../imgs/fiorilli/outros/field-error.png");
    background-repeat: no-repeat;
    background-position: center center !important;
    background-color: transparent !important;
    width: 22px; 
    height: 22px;
}

/*Deixa a borda do Edit/Input vermelha - Felipe Godinho (Little) */
.tooltip-red{
    border: 1px solid red !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226, 46, 35, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226, 46, 35, 0.6);    
}

/*------------------------- TOOLTIPS - HINTS ------------------------------*/

/*------------------------ BOTOES - BUTTONS -------------------------------*/

/*Botao com o cor de fundo Branco/Cinza/Prateada*/
.btn-silver,
.btn-silver.x-btn-disabled  {    
    color: rgb(35,35,35) !important;
    border-color: rgb(150,150,150) !important;
    background: rgb(230,230,230) !important; 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
    background: -o-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important;
    background: linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
}

/*Altara o icone da seta para os botões menu que utilizam btn-silver*/
.btn-silver .x-btn-wrap-default-small.x-btn-split-right:after
{
    background-image: url("../imgs/button/default-small-s-arrow.png");
    /*background-repeat: no-repeat;*/
}


/*Botao com o cor de fundo Branco/Cinza/Prateada - Quando o mouse está sobre ele*/
.btn-silver:hover {
    color: rgb(35,35,35) !important;
    border-color: rgb(150,150,150) !important;
    background: rgb(210,210,210) !important; 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;
    /*text-decoration: none;*/
}

/*Botao com o cor de fundo Branco/Cinza/Prateada - Quando está em focus*/
.btn-silver:focus{   
    background-image: none !important;
    border-color: rgb(15,175,130) !important;
    background: rgb(210,210,210) !important;     
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;     

    box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -webkit-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -moz-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
}


/*Botao com o cor de fundo Branco/Cinza/Prateada - Quando está é pressionado*/
.btn-silver:active{   
    background-image: none !important;
    border-color: rgb(15,175,130) !important;
    background: rgb(210,210,210) !important;     
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;     

    box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -webkit-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -moz-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
}

/*Botao com o cor de fundo Branco/Cinza/Prateada - Quando está é pressionado*/
.btn-silver .x-btn-menu-active,
.btn-silver.x-btn.x-btn-menu-active {   
    background-image: none !important;    
    border-color: rgb(15,175,130) !important;
    background: rgb(210,210,210) !important;     
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important; 
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)) !important;     

    box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -webkit-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
    -moz-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9) !important;
}

/*Botao com o cor de fundo Branco/Cinza/Prateada - Quando o mouse está sobre ele e ele está desabilitado! */
.btn-silver.x-btn-disabled:hover{
    color: rgb(35,35,35) !important;
    border-color: rgb(150,150,150) !important;
    background: rgb(230,230,230) !important; 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
    background: -o-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important;
    background: linear-gradient(rgb(255,255,255), rgb(230,230,230)) !important; 
}

/*Cor do texto do Botao Branco/Cinza/Prateada*/
.btn-silver .x-btn-inner{
    color: rgb(35,35,35) !important;
}

/*Cor do texto do Botao Branco/Cinza/Prateada - Quando está em focus*/
.btn-silver:focus .x-btn-inner{
    color: rgb(0,96,96) !important;
    font-weight: bold !important;
}

/*Remove a seta do button menu*/
.btn-menu-no-image .x-btn-split-right{
    background-image: none;
    background-repeat: no-repeat;
}

/*Botão sem fundo*/
.btn-clear{
    color: rgb(255,255,255);
    background-image: none;
    background-color: transparent;
    background: transparent;
    transition: 0s;
}

/*Botão sem fundo - Quando o mouse está sobre ele*/
.btn-clear:hover {    
    box-sizing: border-box;
    border-radius: 10%;
    border-width: 1px;
    border-color: rgba(0,0,0,0.5);

    background: rgb(56,156,156); 
    background: -webkit-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: -o-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: -moz-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
}

/*Botão sem fundo em formato de circulo*/
.btn-clear-radius-50{
    color: rgb(255,255,255);
    background-image: none;
    background-color: transparent;
    background: transparent;
    transition: 0s;
}

/*Botão sem fundo em formato de circulo - Quando o mouse está sobre ele*/
.btn-clear-radius-50:hover {
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 1px;
    border-color: rgba(0,0,0,0.5);

    background: rgb(56,156,156); 
    background: -webkit-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: -o-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: -moz-linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
    background: linear-gradient(rgb(56,156,156), rgb(16,116,116)); 
}

/*Botao com icone 52*/
.x-btn-52 .x-btn-icon-el{
    width: 52px !important;
    background-position: center center !important;
}

/*Botao com o cor de fundo Branco/Cinza/Vermelho*/
.btn-red{   
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(210,210,210); 
    background: -webkit-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: -o-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: -moz-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
}

/*Altara o icone da seta para os botões menu que utilizam btn-red*/
.btn-red .x-btn-split-right{    
    background-image: url("../imgs/button/btn-silver-arrow.png");
    background-repeat: no-repeat;
}


/*Botao com o cor de fundo Branco/Cinza/Vermelho - Quando o mouse está sobre ele*/
.btn-red:hover {
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(255,125,125);
    background: -webkit-linear-gradient(rgb(255,125,125), rgb(255,76,76)); 
    background: -o-linear-gradient(rgb(255,125,125), rgb(255,76,76)); 
    background: -moz-linear-gradient(rgb(255,125,125), rgb(255,76,76)); 
    background: linear-gradient(rgb(255,125,125), rgb(255,76,76)); 
    /*text-decoration: none;*/
}

/*Botao com o cor de fundo Branco/Cinza/Vermelho - Quando está em focus*/
.btn-red:focus{   
    background-image: none;
    border-color: rgb(15,175,130);
    background: rgb(210,210,210);     
    background: -webkit-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: -o-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: -moz-linear-gradient(rgb(255,109,109), rgb(255,0,0)); 
    background: linear-gradient(rgb(255,109,109), rgb(255,0,0)); 

    box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9);
    -webkit-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9);
    -moz-box-shadow: inset 0px 0px 3px rgba(15,175,130,0.9), 0px 0px 5px rgba(15, 175, 130, 0.9);
}

/*Botao com o cor de fundo Branco/Cinza/Vermelho - Quando o mouse está sobre ele e ele está desabilitado! */
.btn-red.x-btn-disabled:hover{
    color: rgb(35,35,35);
    border-color: rgb(150,150,150);
    background: rgb(255,0,0); 
    background: -webkit-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -o-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: -moz-linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
    background: linear-gradient(rgb(255,255,255), rgb(210,210,210)); 
}

/*Cor do texto do Botao Branco/Cinza/Vermelho*/
.btn-red .x-btn-inner{
    color: rgb(35,35,35);
}

/*Cor do texto do Botao Branco/Cinza/Vermelho - Quando está em focus*/
.btn-red:focus .x-btn-inner{
    color: rgb(0,96,96) !important;
    font-weight: bold !important;
}

/*------------------------ BOTOES - BUTTONS -------------------------------*/

/*----------------------- CHECKBOX - CHECKBOX -----------------------------*/

/*Imagem do check box alterada para Check Verde e Check Vazio em grid - Quando UNchecked fica um check vazio*/
.checkfull .x-grid-checkcolumn{
    background: url("../imgs/fiorilli/checkbox/checkfull.png") 0 0 no-repeat;
}

/*Imagem do check box alterada para Check Verde e Check Vazio em grid - Quando checked fica um check verde*/
.checkfull .x-grid-checkcolumn-checked{
    background-position: 0 -15px;
}

/*Imagem do check box alterada para Check Verde e X Vermelho em grid - Quando UNchecked fica um X Vermelho*/
.checkfull-x .x-grid-checkcolumn{
    background: url("../imgs/fiorilli/checkbox/checkfullx.png") 0 0 no-repeat;
}

/*Imagem do check box alterada para Check Verde e Check Vazio em grid - Quando checked fica um check verde*/
.checkfull-x .x-grid-checkcolumn-checked{
    background-position: 0 -15px;
}

/*Imagem do check box alterada para Check Verde e Check Vazio em panels*/
.checkfull .x-form-checkbox{
    background: url("../imgs/fiorilli/checkbox/checkfull.png") no-repeat;
}

/*Imagem do check box alterada para Check Verde e X Vermelho em panels*/
.checkfull-x .x-form-checkbox{
    background: url("../imgs/fiorilli/checkbox/checkfullx.png") no-repeat;
}

/*Imagem do check box alterada para Check Verde e X Vermelho em panels - Quando UNchecked fica um X Vermelho*/
.checkfull-x .x-form-cb-checked .x-form-checkbox {
  background-position: 0 -15px;   
}

/*----------------------- CHECKBOX - CHECKBOX -----------------------------*/

/*----------------------- GROUPBOX - RADIOGROUP ---------------------------*/

/*Alterar as dimensoes do GroupBox/RadioGroup para 95% */
.x-group-dimensoes-95 {
    padding: 0px 0px 0px 0px;
    top: 2px!important;
    left: 2px!important;
    width: 95%!important;
    height: 95%!important;
}

/*Alterar as dimensoes do GroupBox/RadioGroup para 97% */
.x-group-dimensoes-97 {
    padding: 0px 0px 0px 0px;
    top: 2px!important;
    left: 2px!important;
    width: 97%!important;
    height: 95%!important;
}

/*Alterar as dimensoes do GroupBox/RadioGroup para 98% */
.x-group-dimensoes-98 {
    padding: 0px 0px 0px 0px;
    top: 2px!important;
    left: 2px!important;
    width: 98%!important;
    height: 95%!important;
}

/*----------------------- GROUPBOX - RADIOGROUP ---------------------------*/

/*------------------------- TEMA - THEME -----------------------------------*/

/*Fundo na cor tema padrão*/
.background-theme{
    background-color: rgb(0,96,96) !important;
}

/*Color na cor tema padrão*/
.color-theme {
    color: rgb(0,96,96) !important;
}

/*Borda na cor tema padrão*/
.border-color-theme {
    border-color: rgb(0,96,96) !important;
}

/*Gradient na cor tema padrão*/
.gradient-theme {
    /*border-color: rgb(0,96,96);*/
    background: rgb(0,96,96); 
    background: -webkit-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -o-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -moz-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: linear-gradient(rgb(36,136,136), rgb(0,96,96));
}

/*Gradiente branco/prateado/cinza na cor tema padrão*/
.gradient-theme-silver {       
    background: rgb(230,230,230); 
    background: -webkit-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -o-linear-gradient(#ffffff, rgb(230,230,230)); 
    background: -moz-linear-gradient(#ffffff, rgb(230,230,230));
    background: linear-gradient(#ffffff, rgb(230,230,230));
}

/*Gradient na cor tema padrão - Aplicado para paneis*/
.gradient-theme .x-panel-body-default {
    border-color: rgb(0,96,96);
    background: rgb(0,96,96);
    background: -webkit-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -o-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: -moz-linear-gradient(rgb(36,136,136), rgb(0,96,96));
    background: linear-gradient(rgb(36,136,136), rgb(0,96,96));
}


/*Gradient na cor tema padrão invertido*/
.gradient-theme-inverse {
    /*border-color: rgb(0,96,96);*/
    background: rgb(36,136,136);
    background: -webkit-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: -o-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: -moz-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: linear-gradient(rgb(0,96,96), rgb(36,136,136));
}

/*Gradiente branco/prateado/cinza na cor tema padrão invertido*/
.gradient-theme-silver-inverse {       
    background: #ffffff; 
    background: -webkit-linear-gradient(rgb(230,230,230), #ffffff); 
    background: -o-linear-gradient(rgb(230,230,230), #ffffff); 
    background: -moz-linear-gradient(rgb(230,230,230), #ffffff);
    background: linear-gradient(rgb(230,230,230), #ffffff);
}

/*Gradient na cor tema padrão invertido - Aplicado para paneis*/
.gradient-theme-inverse .x-panel-body-default {
    border-color: rgb(0,96,96);
    background: rgb(36,136,136);
    background: -webkit-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: -o-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: -moz-linear-gradient(rgb(0,96,96), rgb(36,136,136));
    background: linear-gradient(rgb(0,96,96), rgb(36,136,136));
}

/*------------------------- TEMA - THEME -----------------------------------*/

/*------------------------ IMGS - IMAGENS ----------------------------------*/

/*Adiciona borda nas imagens*/
.img-border{
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem do usuário em 10% */
.img-small-user-10{
    border-radius: 10% !important;
    background: white !important;
}

/*Arredonda borda da imagem do usuário em 10% */
.img-small-user-10 > img {
    border-radius: 10% !important;
    background: white !important;
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem em 5% */
.img-radius-5{
    border-radius: 5% !important;
    background: transparent !important;
}

/*Arredonda borda da imagem em 5% */
.img-radius-5 > img {
    border-radius: 5% !important;
    background: transparent !important;
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem em 10% */
.img-radius-10{
    border-radius: 10% !important;
    background: transparent !important;
}

/*Arredonda borda da imagem em 10% */
.img-radius-10 > img {
    border-radius: 10% !important;
    background: transparent !important;
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem em 15% */
.img-radius-15{
    border-radius: 15% !important;
    background: transparent !important;
}

/*Arredonda borda da imagem em 15% */
.img-radius-15 > img {
    border-radius: 15% !important;
    background: transparent !important;
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem em 25% */
.img-radius-25{
    border-radius: 25% !important;
    background: transparent !important;
}

/*Arredonda borda da imagem em 25% */
.img-radius-25 > img {
    border-radius: 25% !important;
    background: transparent !important;
    border: 1px solid #363636;
    padding: 1px;
}

/*Arredonda borda da imagem em 50% - Imagem fica em formato de circulo */
.img-radius-50{
    border-radius: 50% !important;
    background: transparent !important;
}

/*Arredonda borda da imagem em 50% - Imagem fica em formato de circulo */
.img-radius-50 > img {
    border-radius: 50% !important;
    background: transparent !important;
}

/*------------------------ ICONES - TOOLS ----------------------------------*/

/*Icone Windows 16x16*/
.windows-16{
    background-image: url("../imgs/fiorilli/so/Windows-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Windows 24x24*/
.windows-24{
    background-image: url("../imgs/fiorilli/so/Windows-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Windows 32x32*/
.windows-32{
    background-image: url("../imgs/fiorilli/so/Windows-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Linux 16x16*/
.linux-16{
    background-image: url("../imgs/fiorilli/so/Linux-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Linux 24x24*/
.linux-24{
    background-image: url("../imgs/fiorilli/so/Linux-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Linux 32x32*/
.linux-32{
    background-image: url("../imgs/fiorilli/so/Linux-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Mac 16x16*/
.mac-16{
    background-image: url("../imgs/fiorilli/so/Mac-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Mac 24x24*/
.mac-24{
    background-image: url("../imgs/fiorilli/so/Mac-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Mac 32x32*/
.mac-32{
    background-image: url("../imgs/fiorilli/so/Mac-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Mozilla FireFox 16x16*/
.firefox-16{
    background-image: url("../imgs/fiorilli/browser/Firefox-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Mozilla FireFox 24x24*/
.firefox-24{
    background-image: url("../imgs/fiorilli/browser/Firefox-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Mozilla FireFox 32x32*/
.firefox-32{
    background-image: url("../imgs/fiorilli/browser/Firefox-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Google Chrome 16x16*/
.chrome-16{
    background-image: url("../imgs/fiorilli/browser/Chrome-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Google Chrome 24x24*/
.chrome-24{
    background-image: url("../imgs/fiorilli/browser/Chrome-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Opera 32x32*/
.chrome-32{
    background-image: url("../imgs/fiorilli/browser/Chrome-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Microsoft Internet Explorer 16x16*/
.iexplorer-16{
    background-image: url("../imgs/fiorilli/browser/IE-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Microsoft Internet Explorer 24x24*/
.iexplorer-24{
    background-image: url("../imgs/fiorilli/browser/IE-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Microsoft Internet Explorer 32x32*/
.iexplorer-32{
    background-image: url("../imgs/fiorilli/browser/IE-32.png") !important;
    background-repeat: no-repeat !important;
}




/*Icone Safari 16x16*/
.safari-16{
    background-image: url("../imgs/fiorilli/browser/Safari-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Safari 24x24*/
.safari-24{
    background-image: url("../imgs/fiorilli/browser/Safari-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Safari 32x32*/
.safari-32{
    background-image: url("../imgs/fiorilli/browser/Safari-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Opera 16x16*/
.opera-16{
    background-image: url("../imgs/fiorilli/browser/Opera-16.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Opera 24x24*/
.opera-24{
    background-image: url("../imgs/fiorilli/browser/Opera-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Opera 32x32*/
.opera-32{
    background-image: url("../imgs/fiorilli/browser/Opera-32.png") !important;
    background-repeat: no-repeat !important;
}



/*Icone Endereço de IP 24x24*/
.enderecoip-24{
    background-image: url("../imgs/fiorilli/outros/IP-24.png") !important;
    background-repeat: no-repeat !important;   
}


/*Icone hospedagem da base de dados local (Servidor da Entidade) 24x24*/
.serverlocal-24{
    background-image: url("../imgs/fiorilli/bases/Serverlocal-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone hospedagem da base de dados na Nuvem (Data Center Fiorilli) 24x24*/
.servercloud-24{
    background-image: url("../imgs/fiorilli/bases/Servercloud-24.png") !important;
    background-repeat: no-repeat !important;   
}

/*Icone Chave de Validade Ok/Válida 24x24*/
.chave-ok-24{
    background-image: url("../imgs/fiorilli/chave/1.png")  !important;
    background-repeat: no-repeat !important;
}

/*Icone Chave de Validade Alerta/Preste a Vencer 24x24*/
.chave-atencao-24{
    background-image: url("../imgs/fiorilli/chave/2.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Chave de Validade Vencida 24x24*/
.chave-vencida-24{
    background-image: url("../imgs/fiorilli/chave/3.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone Chave de Validade Neutra 24x24*/
.chave-neutra-24{
    background-image: url("../imgs/fiorilli/chave/4.png") !important;
    background-repeat: no-repeat !important;
}


/*Icone utilizando a base de dados do SIA 24x24*/
.sia-24{
    background-image: url("../imgs/fiorilli/bases/Sia-24.png") !important;
    background-repeat: no-repeat !important;
}

/*Icone utilizando a base de dados do Secretaria/Protocolo 24x24*/
.secretaria-24{
    background-image: url("../imgs/fiorilli/bases/Secretaria-24.png") !important;
    background-repeat: no-repeat !important;
}

/*------------------------ ICONES - TOOLS ----------------------------------*/

/*-------------------------- MODAL - DIALOG --------------------------------*/

.modalf {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 19005; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalf-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 15%;
    padding: 0;
    /*border: 1px solid #888;*/
    border-radius: 6px;
    width: 670px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:15%; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:15%; opacity:1}
}

/* The Close Button */
.modalf-close {
    color: black;
    float: right;
    width: 28px;
    height: 28px;
    background: url("../imgs/fiorilli/icones/close.png") no-repeat;
    background-position: center center;
    /*font-size: 28px;*/
    /*font-weight: bold;*/
}

.modalf-close:hover,
.modalf-close:focus {
    /*color: silver;
    text-decoration: none;*/
    cursor: pointer;
    background: url("../imgs/fiorilli/icones/close-red.png") no-repeat;
    background-position: center center;
}

.modalf-header {
    padding: 16px 16px 0px 16px;
    /*background-color: #5cb85c;*/
    color: black;
}

.modalf-body {
    padding: 2px 16px 10px 16px;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: silver;
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;

}

.modalf-footer {
    padding: 10px 16px;    
    /*background-color: #5cb85c;*/
    color: black;
}

.modalf-header-icon{
    position: absolute;
    width: 86px;
    height: 86px;
    top: 0px;
    left: 50%;
    background-color: #fefefe;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-60%);
}

.modalf-btn{
    display: block;
    margin-top: 15px;
    border-style: none;
    border-radius: 4px;
    height: 36px;
    color: white;
    font-weight: bold;
    font-size: 13px;
}

.modalf-btn:hover{
    cursor: pointer;
}

.modalf-btn-large{
    width: 100%;
    height: 40px;
    margin: auto;
    font-size: 18px;
}

.modalf-help{
    background-color: #0097f6;
}

.modalf-icon-help{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/help.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-success{
    background-color: #0ead82;
}

.modalf-icon-success{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/ok.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-locker{
    background-color: #ff8d00;
}

.modalf-icon-locker{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/locker.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-sobre{
    background-color: #e5a654;
}

.modalf-icon-sobre{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-danger{
    background-color: #e22e23;
}

.modalf-icon-danger{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/cancel.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-warning{
    background-color: #f4c520;
}

.modalf-icon-warning{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/warning.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.modalf-info{
    background-color: #35b8ff;
}

.modalf-icon-info{
    background-color: #fefefe;
    background-image: url("../imgs/fiorilli/icones/info.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

/*-------------------------- MODAL - DIALOG --------------------------------*/

/*---------------------- SNACKBAR - POPALERT --------------------------------*/

#snackbar_loader_fiorilli {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid black;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#snackbar_pb_fiorilli {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#snackbar_barra_fiorilli {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#snackbar_porcent_fiorilli {
  text-align: center;
  line-height: 30px;
  color: white;
}

#snackbar_fiorilli {
    visibility: hidden;
    min-width: 250px;
    /*margin-left: -125px;*/        
    color: black;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 19005;
    /*left: 50%;*/
    left: 15px;
    bottom: 50px;    
    font-size: 17px;
}

#snackbar_fiorilli.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}

.snackbar-red{
    background-color:  #ffdddd;
    border-left: 6px solid #f44336;
}

.snackbar-blue{
    background-color:  #5189b4;
    border-left: 6px solid #1f5782;
}

@-webkit-keyframes fadein {
    from {left: -250px; opacity: 0;} 
    to {left: 15px; opacity: 1;} 
}

@keyframes fadein {
    from {left: -250px; opacity: 0;} 
    to {left: 15px; opacity: 1;} 
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*---------------------- SNACKBAR - POPALERT --------------------------------*/

/*------------------------------------------------------- CUSTOMIZACAO - CUSTOM -----------------------------------------------------------*/



/*------------------------- GLOBAL - GLOBAL -------------------------------*/


/*Cor de fundo dos Toolpis/Hints*/
.x-tip-default,
.x-tip-form-invalid{
    background-color: #555;
    border-color: black;
    border-width: 2px;
    color: white !important;
}

/*Cor da letra dos Toolpis/Hints*/
.x-tip-body-default,
.x-tip-body-default div,
.x-tip-body-form-invalid{
    color: white !important;
    background-position: center left;
}

/*Ajusta a posição das letras dos Tooltips/Hints */
.x-tip-default .x-list-plain,
.x-tip-form-invalid .x-list-plain{
    margin-top: 5px;
}

/*------------------------- GLOBAL - GLOBAL -------------------------------*/


.x-panel.x-calendar-panel .x-toolbar-docked-top {
    height: 40px !important;
}


.x-calendar-event-week-span .x-calendar-event-inner {
    text-align: center;
    font-size: 11px;
}


.x-calendar-header-large .x-calendar-header-cell {
    font-size: 11px;
    padding: 0;
}


.x-calendar-event {
    margin-top: -2px !important;
}

.x-panel {
    font-size: 18px;
    font-family: var(--fontDefault) !important;
}

.x-calendar-weeks-today-cell{
  background-color: rgb(220,220,220);
}


/*Ajusta carteira de vacinação */
.CarteiraCSS .x-grid-cell .x-grid-cell-inner{
   position: static;
   padding: 0px;
}

.x-tree-icon-leaf ~ .x-tree-node-text{
  font-weight: normal !important;
}