@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;
  }
  #nav-top{
    display: flex;
  }
  .container-nav-top {
    display: flex;
    justify-content: center;
    align-items: center;
  }
        .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: center;
            }
        #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%;
  /* margin-top: 2rem;
  margin-bottom: 2rem; */
  /* border: 5px solid #e93fbe; */
}

 #breadcrumbs.position {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#component-area{
  /* background-color: rgb(192, 255, 195); */
  /* flex-grow: 1; */
  width:100%;
  padding: 0;
}
#sidebar-left{
  /* background-color: cornflowerblue; */
  width:100%;
  order: 3;
  padding: 0;
}
#sidebar-right{
  /* background-color: pink; */
  width:100%;
  padding: 0;
}
@media (min-width: 992px) {
    #main-content-area{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      column-gap: 2.5rem;
    }
    #component-area{
      width: 60%;
      flex-grow: 1; 
    }
    #sidebar-left{
      width: 20%;
      min-width: 220px;
      order: 0;
      flex-grow: 1;
    }
    #sidebar-right{
      width: 20%;
      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;
  }