/* TODO: esta classe devia aparecer no css de template*/


/*sw_app fullscreen*/
/*.sw_app_fit_parent{
    height: 100% !important;
    width: 100% !important;
}*/
.sw_app{
    margin-top: 0px !important;
}

/*Estilos adicionais do menu principal*/
#language_dropdown{
    /*
    float: left;
    left:20px;
    */
    position:absolute;

}

#language_dropdown > button{
    border: none !important;
    padding: 0;
}

#logout_span{
    /*float:right*/
    position:absolute;
    right: 0;
}

/*Dashboard content especifico do 4oobs 
(inicialmente era para ser fixo mas depois passou a poder ter scroll...)*/
/*.oobs_dashboard_content{
    position: relative;
    min-height: calc(100% - 61px);
    width: 100%;
    padding-top: 50px;
     top: 50px; 
    max-width: 1260px;
    background-color: #FAFAFA;
        padding: 0px 40px 0px 40px;
     margin-top: 60px; 
        top: 50px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    overflow-y: auto;
    text-align: center;
}*/

.sw_global_dashboard_content{
    width: 100%;
    padding-top: 50px;
    /* padding-left: 55px; */
}

.oobs_dashboard_content_centered_scrollable{
    position: relative;
    width: 100%;
    /* min-height: calc(100% - 160px); */
    max-width: 1260px;
    padding: 0px 40px 0px 40px;
    /* top: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    margin: auto;
}

.oobs_dashboard_content_footer{
    /*    height: 50px;
        line-height: 50px;
        background-color: #EAEAEA;*/
    position: relative;
    border-top: 1px solid #CBCBCB;
    /*text-align: right;*/
    height: 60px;
    /* padding: 0px 20px; */
}

#footer_sw_logo{
    position:absolute;
    left: 25px;
    top: 13px;
}

#footer_associates_logo{
    position:absolute;
    right: 25px;
    top: 5px;
}

/******************************/
/*  SUBSCRICOES AO BOOTSTRAP  */
/******************************/
/* cor e cor de fundo dos menus quando selecionados */
.sw_navbar .navbar-nav>.active>a{
    background-color: #67737a !important;
    color:white !important;
}

/* cor e cor de fundo dos menus on hover */
.sw_navbar ul.nav a:hover { 
    background-color: #67737a !important;
    color:white !important; 
}

/**************************++++++++****/
/*   ESTILOS DAS DROPDOWNS E BOTOES   */
/************************++++++++******/

.sw-dropdown-btn{
    color: #fff;
    background-color: #67737a;
    border-color: #67737a;
    font-family: GothamLight;
}

.sw-dropdown-btn:hover{
    color: #fff;
    background-color: #7E8C94;
    border-color: #7E8C94; 
}

.sw-dropdown-btn:focus{
    color: #fff;
    background-color: #7E8C94;
    border-color: #7E8C94; 
}

.reload_btn{
    outline: none !important;
    margin-left: 15px;
}

.download_btn{
    outline: none !important;
    margin-left: 50px;
}

.reload_btn:focus, .download-btn:focus{
    background-color: #67737a !important;
    border-color: #67737a !important; 
}

/******************************/
/*    ESTILOS DA PAGINA 3D    */
/******************************/

.full_width_height{
    height:100%;
    width:100%;
}

#webgl_viewer{
    position: relative;
    height: calc(100% - 15px);
    overflow: hidden;
    top: 15px;
}

#webgl_viewer canvas{    
    width: 100% !important;
    height: 100% !important;
}

#gui_container{
    position: absolute;
    right: 0;
    top: 0;
    /* margin: 0px 40px; */
    width: 300px;
    height: 200px;
    background-color: white;
    opacity: 0.9;
    padding: 10px;
}

#gui_container > div{
    margin-bottom: 10px;
}

#bottom_gui_container{
    position: absolute;
    width: 100%;
    bottom: 0px;
    /* padding-bottom: 20px; */
    /* margin: 0px 22px; */
    background-color: white;
    opacity: 0.9;
    /* padding: 0px 25px; */
}

#bottom_gui_container > .ngrs-range-slider{
    margin-bottom: 0;
}

.selected-date-container{
    font-size: 18px;
    margin-top: 3px;
    text-align: center;
}

/*container das labels do slider*/
.range-slider-label-container{
    height:30px;
    padding: 0px 5px;
    margin: 0px 9px;
    font-size: 12px;
}

/*label do slider*/
.range-slider-label{
    position: relative;
    display: inline-block;
    width: calc(14% - 0.5px);
}

/*primeira div filho da label "|", aparece sempre no inicio e nao afeta o tamanho da label (position absolute)*/
.range-slider-label > div:nth-child(1){
    position:absolute; 
    left:0;
}

/*segunda div filho da label contem os dias da semana*/
.range-slider-label > div:nth-child(2){
    text-align: center;
}

/*.range-slider-label:nth-child(1){
    left: 0;
}

.range-slider-label:nth-child(2){
    left: 14.28%;
}

.range-slider-label:nth-child(3){
    left: 28.56%;
}

.range-slider-label:nth-child(4){
    left: 42.84%;
}

.range-slider-label:nth-child(5){
    left: 57.12%;
}

.range-slider-label:nth-child(6){
    left: 71.4%
}

.range-slider-label:nth-child(7){
    left: 85.68%;
}*/



#zone_name_gui_container{
    position: absolute;
    font-size: 16px;
    background-color: white;
    /*overflow: hidden;*/
    padding: 5px;
    opacity: 0.9;
    top: 0;
    left: 548px;
}

#zone_info_right_gui_container{
    position: absolute;
    font-size: 16px;
    background-color: white;
    /*overflow: hidden;*/
    padding: 10px;
    opacity: 0.9;
    top: 200px;
    /* bottom: 150px; */
    /*right: -300px;*/
    height: calc(100% - 296px);
    width: 300px;

}

.zone_details_container{
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 34px);
}

/*animacao de slide*/
.animate-slide-left {
    right: 0px;
}

.animate-slide-left.ng-hide-remove.ng-hide-remove-active {
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    right: 0px;
}

.animate-slide-left.ng-hide-add.ng-hide-add-active,
.animate-slide-left.ng-hide {
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    right: -300px;
}

.zone_chart_container{
    position: relative;
    width: 100%;
    height:150px;
}

/*Garantir que o grafico nao faz overflow horizontal por aparecer o scroll*/
.highcharts-container{
    width:100% !important; 
    height:100% !important;
}

/* The starting CSS styles for the enter animation */
/*.ng-enter {

}

 The finishing CSS styles for the enter animation 
.ng-enter.ng-enter-active {
    right:0;
}*/

/******************************/
/*  ESTILOS DA PAGINA CONFIG  */
/******************************/
#zones_list_container{
    position: relative;
    width: 300px;
    height: calc(100% - 10px);
    float: left;
    border-right: 1px dashed lightgray;
    overflow: auto;
}

#config_form_list_container{
    position: relative;
    width: calc(100% - 300px);
    height: 100%;
    float: right;
    padding-left: 20px;
}

#config_form_header{
    margin: 10px 20px;
    height: 60px;
    line-height: 60px;

}

#config_form_header_title{
    font-family: GothamBold;
    font-size: 22px;
}

#zones_list_container_title{
    font-family: GothamBold;
    margin: 10px 0 20px 20px;
}

#search_tree_input_container{


    margin-left: 11px;
    font-size: 18px;
}

#search_tree_input{


}

#tree_list_container{
    font-size: 16px;
}

/*.simulation_period{
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: GothamBold;
}

.simulation_day{
    margin-bottom: 20px;
    font-size: 16px;
}

.simulation_value{
    margin-bottom: 10px;
    font-size: 14px;
}*/

.save_config_btn{
    position: absolute;
    bottom: 20px;
    right: 20px;
    outline: 0 !important;
}

#simulation_config_table_container{
    height: calc(100% - 80px);
    overflow: auto;
}

.simulation_config_table{
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}

.simulation_config_table_header{
    font-family: GothamBold;
    font-size: 16px;
}

.simulation_config_table_header th{
    text-align: center;   
}

.simulation_config_table_values{
    font-size: 14px;
    text-align: center;
}

.simulation_config_table_values input{
    width: 100px;
    text-align: center;
}

.hour_span{
    font-family: GothamBold;
    width:50px !important;
}

.simulation_button{
    border: 1px solid #637378;
    border-radius: 10px;
    right: 0;
    float: right;
    padding-top: 0px;
    padding-bottom: 0px;
}

/***********************************/
/*  ESTILOS DA PAGINA DE CENARIOS  */
/***********************************/
#scenarios_list_container{
    position: relative;
    width: 300px;
    height: calc(100% - 10px);
    float: left;
    border-right: 1px dashed lightgray;
    overflow: auto;
}

#scenarios_list_container_title{
    font-family: GothamBold;
    margin: 10px 0 20px 20px;
}

#scenarios_configuration_container{
    /*    position: fixed;
        top: 57px;
            width: 100%;
        padding:0px 20px;*/
    margin-bottom: 20px;
    margin-top: 15px;
    /* top: 65px; */
    /* left: 0; */
    /* right: 0; */
    /* margin: auto; */
    /* z-index: 100; */
    /* background-color: white; */
}

#scenarios_data_container{

    /* margin-top: 284px; */}

/*.scenarios_configuration_app{
    position: fixed;
    z-index: 100;
     margin-top: 0px !important; 
    padding-top: 10px;
    background-color: white;
}*/


#scenarios_configuration_container .sw_app{
    margin-top:0px !important;
}

#scenarios_data_container .sw_app{
    margin-top:0px !important;
}

#scenarios_result_container{
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 250px); 
    /*height: 100%;*/
    padding:0px 20px;
    overflow-y: scroll;
}

.scenario-option{
    position: relative;
    margin: 10px 0 10px 20px;
    vertical-align: middle;
}

.scenario-option input{
    position: absolute;
    left: 65px;
    margin-top: 8px;
}

.simulate-btn-container{
    text-align: center;
}

.simulate-btn-container > button{
    float:none !important;
    height: 40px;
    line-height: 40px;
}

.scenario-dropdown-container{
    width: 75px;
}

.scenario-dropdown-container > button{
    width: 75px;
}

.config-dropdown-btn{
    color: #555;
    background-color: transparent;
    /* border-color: #67737A; */
    border: 1px solid #67737A;
}

.config-dropdown-btn:hover{
    color: #fff;
    background-color: #67737A;
    border-color: #67737A;
}

.config-dropdown-btn:focus{
    color: #fff;
    background-color: #67737A;
    border-color: #67737A;
}

.fixed-dropdown-height{
    z-index: 100;
    height: 180px;
    overflow-y: auto;
}

/*
subscrever heading dos paineis do accordeon para ficar como o sw_app
 */
.panel-heading{
    /*height: 40px !important;*/
    /*line-height: 40px !important;*/
    font-family: GothamBold !important;
    margin-left: 10px !important;
    font-size: 14px !important;
    background-color: rgb(250,250,250) !important;
}

.panel-heading>.panel-title{
    /*height: 40px;*/
    /*line-height: 40px;*/
    font-family: GothamBold;
    margin-left: 10px;
    font-size: 14px;
    background-color: rgb(250,250,250);
}

.panel-title a{
    text-decoration: none !important;
}

#scenarios-totals-table{
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}

#scenarios-totals-table th{
    font-family: GothamBold;
    font-size: 15px;
}

#scenarios-totals-table th,
#scenarios-totals-table td{
    text-align: center;
    border: 1px solid gray !important;
    border-radius: 3px;
}

#scenarios-totals-table th:nth-child(1){
    border:none !important;
}

td.green{
    color: green;
}

td.red{
    color: red;
}

.chart-placeholder{
    position: relative;
    height: 400px;
    font-size: 60px;
/*    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;*/
    line-height: 400px;
    text-align: center;
}

.chart-container{
    position: relative;
    /*height: 400px;*/
    /*max-height: 400px !important;*/
}

#chartConfig{
    position:absolute;
    height: 100%;
    width: 100%;
}

.sw_app-dropdown-container{
    position: absolute;
    top: -1px;
    right: 25px;
}

/*centrar loading*/
.spinner-loader{
    margin-top: 180px;
}
/*********************+++++++*********/
/*  ESTILOS DA PAGINA de DASHBOARD  */
/**********************++++++********/
#simulation_results_indicators{
    margin: 0px 0px 35px 0px;
}

/*.simulation_indicator_app{
    background-color: white;
}*/


/*Estilos dos indicadores*/

.sw-custom-margin{
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.indicator-container{
    padding-right: 7.5px !important;
    padding-left: 7.5px !important;
}

.small_indicator{
    height: 90px;
    line-height: 81px;
    padding: 10px;
}

.indicator_icon{
    font-size: 45px !important;
    padding-right: 5px;
}

.indicator_value{
    font-size: 36px;
}

.indicator_unit{

    /* font-family: 'sans-serif'; */}

[class^="flaticon-"]:before, 
[class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, 
[class*=" flaticon-"]:after{
    font-size: 45px !important;
    margin-left: 0px !important;
}

.not-available-app-content{
    height: 330px;
}

.not-available-app-content > div{
    position:absolute;
    height: 100px;
    font-size: 60px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 300px;
}

.smaller-charts{
    height: 300px !important;
    width: 100%;
}

/*********************+++++++*****++++****/
/*  SUBSCRICAO DE ESTILOS DO DATEPICKER  */
/**********************++++++*+++++*******/
[date-picker] .active:hover, 
[date-picker] .now:hover, 
[date-picker] .active:active, 
[date-picker] .now:active, 
[date-picker] .active.active, 
[date-picker] .now.active, 
[date-picker] .active.disabled, 
[date-picker] .now.disabled, 
[date-picker] .active[disabled], 
[date-picker] .now[disabled]{
    color: #fff !important;
    background-color: #67737a !important;
}


[date-picker] .active:hover, [date-picker] .now:hover, [date-picker] .active:active, [date-picker] .now:active, [date-picker] .active.active, [date-picker] .now.active, [date-picker] .active.disabled, [date-picker] .now.disabled, [date-picker] .active[disabled], [date-picker] .now[disabled] {
    color: #fff;
    background-color: #04c;
}
[date-picker] [ng-switch-when=date] span {
    width: 100%;
    height: 26px;
    line-height: 26px;
}

/*dia escolhido*/
[date-picker] .active{
    color: #fff !important;
    background-color: #67737a !important;
    background-image: -moz-linear-gradient(top,#7E8C94,#67737a) !important;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#7E8C94),to(#67737a)) !important;
    background-image: -webkit-linear-gradient(top,#7E8C94,#67737a) !important;
    background-image: -o-linear-gradient(top,#7E8C94,#67737a) !important;
    background-image: linear-gradient(to bottom,#7E8C94,#67737a) !important;
    background-repeat: repeat-x !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0) !important;
    border-color: #67737a #67737a #7E8C94 !important;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}

/*********************+++++++*****++++****/
/*      ESTILOS DA PAGINA DE TRAFEGO     */
/**********************++++++*+++++*******/
#ns-table{
    width: 100%;
    font-size: 12px;
    margin-top: 20px;
}

#ns-table th{
    font-family: GothamBold;
    background-color: #EAEAEA;
}

#ns-table th, #ns-table td{
    text-align: center;
    border: 1px solid gray !important;
}

#map-container{
    width: 100%;
    height: 400px;
}

.marker-labels {
    color: #67737A;
    font-family: GothamLight;
    font-size:16px;
    text-align: center;
    width: 40px;  
    white-space: nowrap;
}

#center-map-btn{
    position: absolute;
    z-index: 100;
    top: 35px;
    right: 35px;
    outline: none;
}

#current-traffic-date{
    margin-top: 10px;
    font-size: 16px;
}

#play-traffic-button{
    width: 50px;
    float: left;
    margin-top: 10px;
}

#play-traffic-button > span{
    cursor: pointer;
}

#play-traffic-slider{
    width: calc(100% - 50px);
    float: right;
}

/*esconder "x" para fechar a info window*/
.gm-style-iw + div {
    display: none;
}