/* 
    Created on : 17/10/2017, 11:53:15
    Author     : SHL
*/

.dbmenu
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 95%;
    margin: 2rem auto 0;
    font-size: 10pt;
    font-family: StdCn;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.dbmenu-elem, .dbmenu-shortcut
{
    width: 100%;
    /*height: 240px;*/
    overflow: hidden;
    margin: 1em;
    -webkit-box-shadow:
        0 2px 2px 0 rgba(0, 0, 0, 0.14), 
        0 1px 5px 0 rgba(0, 0, 0, 0.12), 
        0 3px 1px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 2px 2px 0 rgba(0, 0, 0, 0.14), 
        0 1px 5px 0 rgba(0, 0, 0, 0.12), 
        0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 993px)
{
    .dbmenu-elem
    {
        width: 30%;
    }

    .dbmenu-shortcut
    {
        width: 30%;  /* 30% of 1300px */
    }
}

@media only screen and (min-width: 1299px)
{
    .dbmenu-elem
    {
        width: 280px; /* 30% of 1300px */
    }

    .dbmenu-shortcut
    {
        width: 150px; /* 30% of 1300px */
    }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.dbmenu-banner
{
    position: relative;
    width: 100%;
    height: 160px;
    padding: 20px;
}

.dbmenu-banner-title
{
    position: absolute;
    top: 0;
    right: 0.5em;
    z-index: 1;
    font-size: 0.8em;
    font-weight: 800;
    color: #000;
}

.dbmenu-banner-img
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.dbmenu-banner-img img
{
    max-width: 100%;
    max-height: 100%;
}

.dbmenu-banner-img svg
{
    width: 80px;
    height: 80px;
}

.dbmenu-banner-img svg path
{
    fill: white;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.dbmenu-banner.type-WMS
{
    background-color: #22a837;
    background: linear-gradient(to right, #ffc100, #ffcd31);
}

.dbmenu-banner.type-CRM
{
    background-color: #004360;
    background: linear-gradient(to right, #004360, #005980);
}

.dbmenu-banner.type-PTL
{
    background-color: #BB5E42;
    background: linear-gradient(to right, #027363, #7fab8e);
}

.dbmenu-banner.type-GEN
{
    background-color: #1bc2b4;
    background: linear-gradient(to right, #1bc2b4, #2ca89e);
}

.dbmenu-banner.type-TAR
{
    background-color: #22a837;
    background: linear-gradient(to right, #22a837, #25b33c);
}

.dbmenu-banner.type-KANBOARD
{
    background-color: #147ca7;
    background: linear-gradient(to right, #147ca7, #1b91c2);
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.dbmenu-content
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 80px;
    background-color: #9EA49F;
}

.dbmenu-content.active
{
    background-color: #FACF22;
    background: linear-gradient(to right, #FACF22, #FACF22);
}

.dbmenu-content-btn
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    width: 80px;
    height: 80px;
    float: right;
    text-align: center;
    color: #000000;
}

.dbmenu-content-btn::after
{
    content: '';
    position: absolute;
    width: 1px;
    height: 60px;
    top: 10px;
    left: -1px;
    background-color: #87b226;
}

.dbmenu-content.active .dbmenu-content-btn
{
    cursor: default;
    color: #000000;
}

.dbmenu-content-btn span
{
    font-size: 1em;
}

.dbmenu-content-btn svg
{
    width: 1.8em;
    height: 1.8em;
}

.dbmenu-content-btn svg path
{
    fill: #4b4b4b;
}

.dbmenu-content.active .dbmenu-content-btn svg path
{
    fill: #b4b4b4;
}

.dbmenu-content-txt
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 80px);
    padding: 1em;
    height: 80px;

}

.dbmenu-content-bg
{
    background-color: #5B5A56;
}

.dbmenu-content-btn-bg
{
    background-color: #5B5A56;
}

.dbmenu-sigla-desc-txt
{
    color: #A6A6A6;
}

.dbmenu-svg
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    width: 80px;
    height: 80px;
    float: right;
    text-align: center;
    fill: #e8e8e8;
}

.dbmenu-svg svg
{
    width: 1.8em;
    height: 1.8em;
}

.dbmenu-svg-active
{
    fill: #717171;
}

.dbmenu-content.active .dbmenu-content-txt
{
    color: #000000;
}

.dbmenu-content-txt h3
{
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
}

.dbmenu-content-txt h4
{
    font-size: 0.8em;
    font-weight: 400;
    margin: 0;
}

#DisplayGrupoSistemas, 
#Grupo, 
#GrupoSistemas{
    width: 100%;
    z-index: 4;
}
#Sistemas{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 10px 10px 10px 20px;
}

@media only screen and (max-width: 600px)
{
    #Sistemas
    {
        height: 100% !important;
    }
}