@charset "utf-8";
/**
 *------------------------------------------------------------------------------
 * TEMPLATE.CSS
 *------------------------------------------------------------------------------
 * @Template		SKY - J5
 * @authors     SKYTRAILS
 *------------------------------------------------------------------------------
 */


/*/////////////////////////////////////////////////////////////////////////////

/ ESTRUTURA DO TEMPLATE
/////////////////////////////////////////////////////////////////////////////*/

#stage{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .system-debug {
    display:block
   }
  .module {
    position: relative;
  }
  
  /* 
    HEADER  
   =========================================================================== */
  header { 
    position: relative;
    z-index: 10;
  }
  .container-top-bar .row{
    justify-content: left;
  }
  .container-head-top .row{
    justify-content: center;
  }
  .container-nav-top .row{
    display: flex;
    justify-content: center;
  }
  
  /*
    NAVBAR
  ------------------------------------------*/
  #main-navbar .container-navbar{
    display: flex;
    flex-wrap: nowrap;
    }
        .navbar-item{
        display: flex;
        min-height: 90px;
        /* align-items: center; */
        flex-grow: 1;
        flex-shrink: 1;
        }
        #nav-left{
        /* background-color: cornflowerblue; */
        justify-content: start;
        /* align-items: center; */
        }
            .container-nav-left{
                /* background-color: #FF0000;  */
                display: flex;
                justify-content: start;  
                align-items: end;
            }
        #nav-center{
        /* background-color: rgb(192, 255, 195); */
        justify-content: center;
        /* align-items: center; */
        }
            .container-nav-center{
                /* background-color: #FF0000;  */
                display: flex;
                justify-content: center;
                align-items: center;
            }
        #nav-right{
        /* background-color: pink; */
        justify-content: flex-end;
        /* align-items: center; */
        }
            .container-nav-right{
                /* background-color:aqua; */
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
  
  #nav-bottom{
    display: flex;
  }
  .container-nav-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  /*
    MAIN CONTENT AREA
   =========================================================================== */
  #main-content-area{
    /*background-color: rgb(255, 248, 183); */
    /* display: flex; */
    flex-flow: column wrap; 
    width:100%;
    /* border: 5px solid #e93fbe; */
  }
  #sidebar-left{
    /* background-color: cornflowerblue; */
    /* flex-grow: 1; */
    width:100%;
    order: 3;
  }
  #component-area{
    /* background-color: rgb(192, 255, 195); */
    /* flex-grow: 1; */
    width:100%;
    padding: 0;
  }
  #sidebar-right{
    /* background-color: pink; */
    /* flex-grow: 1; */ 
    width:100%;
  }
  @media (min-width: 992px) {
      #main-content-area{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      #sidebar-left{
        width: 21%;
        min-width: 220px;
        order: 0;
        flex-grow: 1; 
      }
      #component-area{
        width: 58%;
        flex-grow: 1; 
      }
      #sidebar-right{
        width: 21%;
        min-width: 220px;
        flex-grow: 1; 
      }
  }
  
  /* .container-banner .row {
    justify-content: center;
  } */
  .container-top-a > .row > div{
    width: 100%;
  }
  .container-top-b > .row > div{
    width: 100%;
  }
  .container-bottom-a > .row > div{
    width: 100%;
  }
  .container-bottom-b > .row > div{
    width: 100%;
  }
  .container-footer > .row > div{
    width: 100%;
  }
  
  
  /*
    FOOTER
   =========================================================================== */
   footer{
    margin-top: auto;
    background-color: gray;
  }