/* Folha de estilo principal
 *
 * Marcelo Barbosa,
 * marco, 2021.
 */

/* importacoes de arquivos externos: fontes */
@import url('https://fonts.googleapis.com/css?family=Roboto');


/* seletor: elemento */
body
{
    background-color: #fafafa;    
    color: #383838;
    font-family: Roboto;
    font-size: 0.875em;
}


/* seletor: classe */
/* fontes */
.font-roboto { font-family: Roboto; }



/* layout do painel */
.system-dropdown-menu
{
    width: 100%;
    max-width: 150px;
    min-height: 60px;
    padding: 16px;
    position:absolute;
    z-index: 2;
    border-radius: 5px;
    top: 53px;
    right: 5px;
    background-color: white;
    text-align: left;
    box-shadow: 0 0 3px slategray;
    display: none;
}

.system-dropdown-menu ul.menu-list
{
    list-style: none;    
    margin: 0;
    padding: 0;
}

.system-dropdown-menu ul.menu-list li
{
    margin: 0;
    padding: 0;
    padding-top:8px;
    padding-bottom:8px;    
}

.system-menu
{
    position: fixed;
    font-size:0.9em;
    width: 100%;
    max-width: 150px; 
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    left: 0;
    box-shadow: 1px 0 3px #898989;
    padding: 0;
    z-index: 2;
}

.btn-open { margin-left: 20px; }
.system-menu .btn-close, .btn-open { display: none; }

.system-menu ul.menu
{
    list-style: none;    
    margin: 0;
    padding: 0;
}

.system-menu ul.menu li
{
    margin: 0;
    padding: 0;
    padding-top:12px;
    padding-bottom:12px;
    border-bottom: 1px solid whitesmoke;
}

.system-menu ul.menu li, .system-menu ul.menu li a, .system-menu ul.menu li p,
.system-dropdown-menu ul.menu-list li, .system-dropdown-menu ul.menu-list li a, .system-dropdown-menu ul.menu-list li p
{
    color: #383838;
}

.system-menu ul.menu li:last-child
{
    border-bottom: 0;
}

.system-content
{
    /*margin-left: 150px;*/
}

.system-content .shortcut-scope
{
    position: relative;
}

.system-content .shortcut-scope .shortcut
{
    margin: 5px;
    border-radius: 5px;
    min-width: 109px;
    min-height: 109px;    
    overflow: hidden;
    float:left;
    display: block;
    position: relative;
    text-align: center;
    background-color: #381a1a;
    color: white;
}

.system-content .shortcut-scope .shortcut:hover, 
.system-content .shortcut-scope .shortcut:active 
{
    background-color: #a25e4b;
    color: white;
}


/* logo e imagens */
.logo
{
    max-width: 100%;
    height: 120px;
}

.system-menu .photo img { border-radius: 20% 10%; }



/* bordas radiais */
.custom-small-rounding { border-radius: 6px; }


/* sombras */
.custom-card-1 { box-shadow: 0 0 3px #595959; }


/* botoes */
.btn, a.btn
{
    margin: 2px;
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 5px;
    border: 1px solid;
    font-size: 1em;
}

.btn-block, a.btn-block
{    
    display: block;
    width: 100%;
}

.btn-theme, a.btn-theme
{
    background-color: #381a1a;
    border-color: #381a1a;
    color: white;
}

.btn-rounded { border-radius: 100px; }

.btn-theme-alternative, a.btn-theme-alternative
{
    background-color: #381a1a;
    border-color: #381a1a;
    color: white;
}

.btn-theme:hover, .btn-theme:active, a.btn-theme:hover, a.btn-theme:active
{
    background-color: #c49e94;
    border-color: #c49e94;
}

.btn-theme-alternative:hover, .btn-theme-alternative:active,
a.btn-theme-alternative:hover, a.btn-theme-alternative:active
{
    background-color: #e8524a;
    border-color: #e8524a;
}

.btn-shadow { box-shadow: 0 0 3px #2A2A2A; }

.btn-theme-danger { background-color: crimson; color: white; border-color: crimson; }
.btn-theme-danger:hover, btn-theme-danger:active { border-color: red; background-color: red; color: white }

.btn-theme-green { background-color: #1f6e42; color: white; border-color: #1f6e42; }
.btn-theme-green:hover, btn-theme-danger:active { border-color: #1fa063; background-color: #1fa063; color: white }

.btn-theme-red { background-color: #ad0b00; color: white; border-color: #ad0b00; }
.btn-theme-red:hover, btn-theme-danger:active { border-color: red; background-color: red; color: white }

.btn-theme-silver { background-color: slategrey; color: white; border-color: slategrey; }
.btn-theme-silver:hover, btn-theme-silver:active { background-color: #1A1A1A; color: white; border-color: #1A1A1A; }

.btn-theme-white { background-color: white; color: black; box-shadow: 0 0 3px black; border: 0; }
.btn-theme-white:hover, btn-theme-silver:active { background-color: whitesmoke; color: black; box-shadow: 0 0 10px black; }

/* painel login/mensagens/similares */
.system-panel
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 560px;
    min-height: 300px;
    padding: 16px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0 15px silver;
}


/* listas */
.list-option
{
    position:absolute;
    top: 40px;
    left: 10px;
    padding: 6px;    
    min-width: 370px;
    background-color:white;
    box-shadow: 0 0 3px #595959;
    border-radius: 5px;
    z-index: 2;
    display:none;
    text-align:center;
}



/* modal */
.custom-modal { display: none; }
.modal-close-button:hover { background-color: transparent; }


/* campos */
 input[type='time']
 {
     width: 100%;
     -webkit-box-shadow: 0 0 0 100px white inset;
 }

input[type='text'], input[type='email'], input[type='password'], 
input[type='number'], input[type='date'], input[type='time'], select
{
    padding: 8px !important;
    border-radius: 5px !important;
    border: 1px solid gainsboro !important;
}

input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, 
input[type='number']:focus, input[type='date']:focus, input[type='time']:focus, select:focus
{
    border-bottom: 1px solid transparent !important;
    box-shadow: 0 0 5px slategray !important;
}


/* menu dropdown: sobreescreve cor e background */
.drop-down-menu 
{	
    background-color: #281818;
    color: #FFFFFF;
    z-index: 3;
}

.drop-down-menu .menu
{
    background: none;
}

.drop-down-menu .menu .logo { height: 40px; }

.menu-items ul { box-shadow: 0 0 5px #000000; background-color:white;  border-radius: 0px 0px 5px 5px; }

.menu-items ul li 
{
    background-color: transparent;
    background: none;
    color: white;
    
}

.menu-items ul li p { color: #505050; font-family: Roboto; }

.menu-items ul li:last-child { border-color: white; }

.menu-items li:hover{ background:none; background-color: #664242; color: white; }

.menu-items ul li:hover { background:none; background-color: transparent; box-shadow: none; border-radius: 0px; } 
.menu-items ul li p:hover { color: goldenrod; }
.menu-items ul li:last-child:hover { border-radius: 0px 0px 5px 5px; border-color: white; }

.menu-items li p { font-size: 1em; font-family: Roboto;  }
.menu-items li a, .menu-items ul li a { color: white; }
.menu-items ul li a:hover{ color: #0066ff; }
.menu-items li p:hover { color: white; }

.menu-items li.destaque-1
{
    background-color: #623737;
    
}

.menu-items li.destaque-1:hover,
.menu-items li.destaque-1:active
{
    background-color: #745858;
}

.drop-down-menu #menu-icon 
{	
   background-color: rgb(255, 255, 255);
   color: slategray;	
   margin: 10px;  
   padding: 8px;  
   border-radius: 5px;
   width: 40px;
   height: 40px;
   font-size: 1.25em;
   box-shadow: 0 0 3px slategray;
}




/* slider */
.slider-group { min-height: 400px; }




/* cores */
.bg-color-theme { background-color: #a25e4b; }
.text-color-theme { color: #a25e4b; }
.border-color-theme { border-color: #a25e4b; }

.bg-color-theme-alternative { background-color: #381a1a; }
.text-color-theme-alternative { color: #381a1a; }
.border-color-theme-alternative { border-color: #381a1a; }

/* bloco de conteudo com abas */
.tab ul.indexes li.tab-displayed { background-color: #381a1a; color:white; }
.tab ul.indexes { padding: 0; border-bottom: 5px solid #381a1a; }
.tab ul.indexes li { border-right: 2px solid white; background-color: #e2e6e9; font-weight: bold; }
.tab ul.indexes li a { color: #231010; }
.tab ul.indexes li:hover { background-color: #231010; }
.tab ul.indexes li:hover a { color: white; }


/* tabelas */
table.system-table th, table.system-table td, table.system-table tr { border: 0; }
table.system-table th, table.system-table td { font-size: 0.875em; padding:14px !important; }
table.system-table th { background-color: #281818; color: white; border-bottom: 1px solid transparent; }
table.system-table th a { color: white; }
table.system-table tr { background-color: #FFFFFF; }
table.system-table tr.selectable:hover { background-color: whitesmoke; }

table.system-table tr:nth-child(odd){ background-color: #f8f8f8; }
table.system-table tr:last-child {  border-bottom: 1px solid transparent; }
table.system-table td table tr:last-child {  border: 0px; }
table.system-table td { position: relative; }



@media only screen and (max-width: 900px) /* 900px de largura */
{    
    .system-menu .btn-close { display: block; }
    .btn-open { display: inline-block; }
    .system-menu { display: none; }
    .system-content { margin-left: 0; }
}



/* media query para resolucao de telas: sobreescreve classes */
@media only screen and (max-width: 768px) /* tablets de alta resolucao */
{
    
}



@media only screen and (max-width: 480px) /* smartphones */
{   
    
    .menu-items li.destaque-1
    {
        background-color: transparent;

    }

    .menu-items li.destaque-1:hover,
    .menu-items li.destaque-1:active
    {
        background-color: transparent;
    }
    
    .drop-down-menu, .drop-down-menu .menu, .menu-items ul { background-color: transparent; background: none; }
    .menu-items ul { box-shadow: none; background-color:transparent;  border-radius: 0; }
    .menu-items li, .menu-items li a, .menu-items ul li a, .menu-items ul li:hover, 
    .menu-items ul li, .menu-items li:hover { background-color: transparent; background: none; color: #000000; }
    .drop-down-menu .menu-icon { right: 0; position: fixed; }
    .menu-items li a, .menu-items li p { color: #FFFFFF; background-color: transparent; }

    .menu-items li p:hover, .menu-items li p:active, .menu-items li a:active, .menu-items li a:hover, .menu-items ul li a:active, .menu-items ul li a:hover, 
    .menu-items ul li p:hover, .menu-items ul li p:active, .menu-items .caption-link:hover, .menu-items .caption-link:active
    {
        background-color: #FFFFFF; 
        color: #000000;
        border-radius: 0;
    }

    .menu-items .sub-items { display: block; }

    .menu-items ul li p { border: 0; color: white; }
    .menu-items .caption-link { background-color: #FFFFFF; color: #000000; }

    .menu-items ul li:last-child
    {
        border: 0;
        border-radius: 0;
    }

    .menu-items ul li:last-child:hover { border: 0px; }	    

    /* imagens de fundo */    
}