/**************************************************
    General
**************************************************/
body {
    margin:0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Roboto';
    height: 100%;
}
hr {
      border-top: 1px solid #1D1D1A;
}
hr.main-menu-divisor {
    border-top: 1px solid #898989;
    margin: 6px 10px;
}
#dashboard{
    min-width: 300px;
}
md-content {
    overflow: visible;
}



md-tooltip.limit400{
    max-width: 550px;
    word-wrap: break-word;
    display: block !important;
}

 

md-tooltip.limit400 .md-content{
    white-space: normal !important;
    line-height: normal;
    height:auto;
    color: white;
    background-color: black;
    font-size: 12px;
}
 

.morocco{
    fill : transparent !important;
    stroke : #DDDDDD;
}

/***************************************************
    Arreglos por navegadores
***************************************************/
/*SAFARI9*/
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
    .main-menu-calendario {
        margin-right: 3px !important;
    } 
}
/*FIREFOX*/
@-moz-document url-prefix() { 
    .buttons-group .md-button {
        display: block !important;
        margin-bottom: 0 !important;
    }
    .buttons-group .md-button .type_button_graph_left {
        width:60% !important;
        display: inline-block !important;
    }
    .buttons-group .md-button .type_button_graph_right {
        display: inline-block !important;
        width: 40% !important;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 14px !important;
        margin-right: 10px !important;
    }
}
/*IE10*/
@media all and (min-width:0) {
    #curvas_total .wrapper_main_menu {
        width: 60% \0/ !important; 
    }
}

/**************************************************
    Header
**************************************************/
md-toolbar {
    min-height: 36px;
}
header .md-button.md-icon-button {
    height: 36px;
    width: 36px;
    line-height: 36px;
}
header .md-toolbar-tools {
    height: auto;
}
 header h1, .md-toolbar-tools h1 {
        margin: 0 10px 0 0;
    }
md-toolbar:not(.md-menu-toolbar).md-warn {
    background: #000;
}
[md-header-picture] {
    position: relative;
    width:100%;
    height:0; /* Simple trick to keep a 16:9 ratio on your background image (height=0;padding-bottom=56.25%) */
    padding-bottom: 56.25%;
    overflow:hidden;
    background-size:160%; /* You can override this value if your picture has a weird ratio */
    background-position:50% 50%;
    background: #000;
}
.md-warn .md-toolbar-tools {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.md-toolbar-tools .layout-row {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

[scroll] {
    position:fixed;
    top:0;
}
header .md-menu {
    display: block;
}
.box.wrapper_generacion_emision > .header ul li button span{   
    font-size: 1em;
    font-weight: bold;
    text-align: left;
}
.material-icons {
    font-size: 36px !important;
    line-height: 0.5 !important;
}

/**************************************************
    Menu
**************************************************/
md-menu-content {
    max-height: inherit;
    background: #000;
}
.md-open-menu-container.md-active > md-menu-content>* {
    color: #fff;
}
.md-open-menu-container.md-active > md-menu-content > md-menu-item > .md-button{
    text-align: left;
}
md-menu-item {
    min-height: 35px;
    height: 35px;
}
md-menu-item.divisor {
    min-height: 15px;
    height: 15px; 
}
md-menu-item button md-icon{
    color: #fff;
}
md-menu-item button md-icon{
    color: #fff;
}
md-menu-item .main-menu.active:before {
    border-top: none;
}
md-menu-item button, md-menu-item span {
    width: auto;
}
md-menu-item md-switch {
    width: auto;
    padding: 0;
    margin: 0;
}
#md-menu-item-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;   
}
#md-menu-item-header .md-button.main-menu-calendar {
    width: 56px;
    min-width: 56px;
}
md-icon.main-menu-anterior , md-icon.main-menu-siguiente {
    width: 14px;
}
md-icon.main-menu-anterior {
    margin-left: 35px !important;/*Por ahora es necesario, estudiar eliminarlo!*/
}
md-switch .md-bar {
    left: 1px;
    width: 44px;
    top: 0.5px;
    height: 24px;
    border-radius: 11px;
    position: absolute;
    background: #fff;
}
md-switch .md-thumb {
    background: #000;
    left: 5px;
}

md-switch.md-default-theme.md-checked, md-switch.md-checked .md-ink-ripple {
    background-color: #000;
}
md-switch.md-default-theme.md-checked, md-switch.md-checked .md-bar {
    background-color: #fff;
}
md-menu-content {
    padding: 0;
}
md-open-menu-container {
    top: 7px !important;/*Important necesarios para eliminar el comportamiento por defecto que mete bootstrap*/
    left: 993px !important;
}

/**************************************************
    Home
**************************************************/
section#home {
    background: url('images/red-electrica-background.jpg') no-repeat center center;
    background-size:100% 100%;
    margin: 0 auto;
    width: 100%;
    height: -webkit-calc(94vh - 0px - 0px - 0px);
    height: -moz-calc(94vh - 0px - 0px - 0px);
    height: calc(94vh - 0px - 0px - 0px);
}
.home-content {
    width: 100%;
    margin: 0 auto;
}
.home-title {
    width: 100%;
    margin: 3% 0 0 0;
}
.home-title h1 {
    text-transform: uppercase;
    font-size: 2em;
    text-align: center;
    margin: 3% 0 0 0;
    color: #fff;
}
.home-content img {
    min-width: 370px;
    width: 25%;
    display: block;
    margin: 0 auto;
    padding: 7% 0 0 0;
}
footer {
    padding: 3px 5px;
}
footer p#ree_info {
    font-size: .9em;
}
.home-footer {
    width: 100%;
    margin: 6% auto 0 auto;
}
.home-footer a {
    width: 16%;
    display: block;
    margin: 0 auto;
    padding: 10px 15px;
    border-radius: 5px;
    background: #090909;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

/**************************************************
    Button
**************************************************/
button.disabled {
    opacity: 0.2;
}
.md-button {
    text-transform: none;
}
.md-button.share {
    margin: 0;
    border-radius: 0;  
}
.border-bottom {
    border-bottom: 4px solid rgba(0,0,0,0.26);
}
.border-bottom.real {
    border-color:#ffea00;
}
.border-bottom.prevista {
    border-color:#41d641;
}
.border-bottom.programada {
    border-color:#e90b0b;
}
.border-bottom.totalCo2 {
    border-color:#000000;
}
.border-bottom.renovables {
    border-color:#49EA06;
}
.border-bottom.norenovables {
    border-color:#635B5B;
}
.border-bottom.co2asociado {
     border-color:#999;
}
.buttons-group {
    width: 100%;
}
.buttons-group button{
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
}
.buttons-group .md-button {
    min-height: 25px;
    line-height: 25px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.buttons-group .md-button .type_button_graph_left {
    width:50%;
    text-align: left;
}
.buttons-group .md-button .type_button_graph_left .d_name_company {
    font-size: 11px;
}
.buttons-group .md-button .type_button_graph_right {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: right;
    width: 40%;
}
.buttons-group .md-button .type_button_graph_right .d_name_percentage {
    font-size: 12px;
    width: 50px;
}
.buttons-group .md-button .type_button_graph_right .d_name_power {
    font-size: 14px;
    margin-right: 12%;
}
.wrapper_toolbar_menu .md-menu {
    padding: 0;
}
#curvas_acumulada .wrapper_main_menu, #tablas_chart .wrapper_main_menu,
#sistemas .wrapper_main_menu , #date .wrapper_main_menu, #ayuda .wrapper_main_menu{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#curvas_total .wrapper_main_menu {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.wrapper_main_menu button {
    background: #000;
    color:#fff;
    border-radius: 0%;
}
.wrapper_main_menu button.md-button.md-icon-button {  
    border-radius: 0%;
    margin: 0 0px;
}
.wrapper_main_menu .date {
    margin-right: 4px;
    padding: 11px 5px;
    background: #DBDFE5;
    max-height: 48px;
    min-height: 48px;
}
.wrapper_main_menu .date button.md-button.md-icon-button {  
    border-radius: 50%;
    margin: 0 0px;
    background: #B4BBC6;
    height: 25px;
    width: 25px;
    line-height: 25px;
    min-height: 25px;

}
.wrapper_main_menu button.md-button.md-icon-button:hover {  
    color: #000;
    opacity: 0.8;
    background: #AEB4BC !important;
}
.wrapper_main_menu span:first-child button.md-button.md-icon-button:hover {
    background: none;
}
.wrapper_main_menu button md-icon{
    color:#fff;
}
.wrapper_main_menu .date button md-icon {  
    height: 14px;
    width: 14px;
    color:#000;
}
.main-menu.active {
    background-color: #069;
    overflow: visible;
}
.main-menu.active:hover {
    background-color: #069!important;
}
.main-menu.active:before {
    content: ' ';
    width: 0px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #069;
    display: inline-block;
    position: absolute;
    color: #069;
    top: 48px;
    left: -webkit-calc(50% - 5px);
    left: -moz-calc(50% - 5px);
    left: calc(50% - 5px);
}
.main-menu.active:before:hover {
    background-color: #069!important;
    color: #069!important;
}
#evolucion .main-menu.active:before {
    content: ' ';
    width: 0px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #069;
    border-top: none;
    display: inline-block;
    position: absolute;
    color: #069;
    top: -9px;
    left: -webkit-calc(50% - 5px);
    left: -moz-calc(50% - 5px);
    left: calc(50% - 5px);
}

/**************************************************
    Box
**************************************************/
.box {
    margin: 5px;
}
.box > .header {
    background: rgba(0,0,0,0.26);
    padding: 0 10px;
    height: 35px;
    background: #069;
    color: #fff;
    font-weight: bold;
}
.box > .header md-icon {
    color: #fff;
}
.box > .content {
    overflow-x:hidden;
    overflow-y: auto;
    height: 89%;
}

.box.wrapper_estructura_generacion {
    height: -webkit-calc(60vh - 64px - 30px - 20px);
    height: -moz-calc(60vh - 64px - 30px - 20px);
    height: calc(60vh - 64px - 30px - 20px);
}
.box.wrapper_estructura_generacion > .header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

}
.box.wrapper_estructura_generacion > .header:before {
    content: ' ';
    width: 0px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: inline-block;
    position: absolute;
    color: #069;
    top: 40px;
    left: -webkit-calc(25% - 10px);
    left: -moz-calc(25% - 10px);
    left: calc(25% - 10px);
}
.box.wrapper_estructura_generacion > .header p {
    margin: 0; 
}
.box.wrapper_estructura_generacion > .header button {
    margin: 0;
    height: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
    border-radius: none;
    line-height: 100%;
    border-radius: 0;
}
.md-title {
    font-size: 16px;
}
.md-button.md-icon-button {
    border-radius: none;
}
.box.wrapper_generacion_emision {
    height: -webkit-calc(60vh - 64px - 30px - 50px);
    height: -moz-calc(60vh - 64px - 30px - 50px);
    height: calc(60vh - 64px - 30px - 50px);
}
.box.wrapper_generacion_emision > .header {
    padding: 0;
}
.box.wrapper_generacion_emision > .header ul {
    width: 100%;
    height: 100%;
}
.box.wrapper_generacion_emision > .header li {
    padding: 0px;
    height: 35px;
    display: inline-block;
    width: 50%;
    float: left;
    margin-right: 0;
    position: relative;
}
.box.wrapper_generacion_emision > .header li button {
    padding: 0 0 6px 0;
    height: 40px;
    line-height: 0;
    margin: 0px;
    width: -webkit-calc(100%);
    width: -moz-calc(100%);
    width: calc(100%);
}
.box.wrapper_generacion_emision li.tabselected:before {
    content: ' ';
    width: 0px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #069;
    display: inline-block;
    position: absolute;
    color: #069;
    top: 35px;
    left: -webkit-calc(50% - 10px);
    left: -moz-calc(50% - 10px);
    left: calc(50% - 10px);
}

/**************************************************
    List
**************************************************/
.list-inline {
     margin-left: 0px;
}
.list-inline li{
    display: inline;
    margin-right: 5px;
    padding: 0;
}

.separator li {
    border-right:2px solid rgba(255,255,255,0.6);
}
.separator li:last-child {
    border-right:none;
}

/**************************************************
    Chart
**************************************************/
#evolucion {
    padding: 5px 5px 0px 5px;
}
#evolucion .wrapper_chart {
    padding: 0px 0px 0px 5px;
}
#evolucion .footer{
    padding: 5px 0px 5px 35px;
}
#evolucion h3 {
    color: #fff;
    margin: 0;
    padding-bottom: 5px;
    background: #069;
    font-weight: bold;
    padding: 9px;
}
#evolucion .wrapper_values{
    float: right;    
    margin-top: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#evolucion .wrapper_values .md-button{
    line-height: 22px;
}
#evolucion .wrapper_values .value{
    font-size: 1.4em;
}
#evolucion .wrapper_values .renovables,#evolucion .wrapper_values .norenovables{
    display: none!important;
}
#evolucion .chart{
    height: -webkit-calc(81vh - 62px - 30px);
    height: -moz-calc(81vh - 62px - 30px);
    height: calc(81vh - 62px - 30px);
    min-height: 250px;
    /*background-image: url('../img/logo_ree_grafica.svg');  */
    background-repeat:  no-repeat;
    background-position:  50% 50%;
    background-size: 40%;
}
#evolucion .wrapper_values button{
    width: -webkit-calc(20% - 20px);
    width: -moz-calc(20% - 20px);
    width: calc(20% - 20px);
}
#evolucion .chart svg{
    fill:#999;
}
#evolucion .wrapper_chart {
    position: relative;
}
#evolucion #max_day, #evolucion #min_day {
    font-size: 0.85em;
}
#evolucion button.action.renovables {
    position: absolute;
    top:50px;
    right: 80px;
}
#evolucion button.action.norenovables {
    position: absolute;
    top:50px;
    right: 30px;
}
#evolucion .wrapper_renovables_norenovables {
    position: absolute;
    top: 8px;
    left: 224px;
    background: #fff;
    -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
    -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
    box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
    padding: 4px;
}
#evolucion .wrapper_renovables_norenovables .md-button {
    line-height: 20px;
}
#evolucion .menu md-fab-trigger button{
    background-color: #000;
}
#evolucion md-icon {
    color: #000;
}
#evolucion .wrapper_main_menu md-icon {
    color: #fff;
}
.wrapper_main_menu md-icon.spainandisland {
    width:40px;
    height:40px;
}
.md-open-menu-container md-icon.spainandisland {
    width:32px;
    height:32px;
}
#evolucion .wrapper_main_menu .date md-icon {
    color: #000;
}
#estructura_generacion .chart{
    height: -webkit-calc(49vh - 64px - 30px);
    height: -moz-calc(49vh - 64px - 30px);
    height: calc(49vh - 64px - 30px);
    min-height: 245px;
}
#estructura_generacion .slider{
    display: none;
}
#estructura_generacion md-slider .md-thumb:after {
    border-color: #069;
    background-color: #069;
}
#estructura_generacion md-slider .md-track.md-track-fill {
    background-color: #069;
}
#estructura_generacion md-slider .md-focus-ring {
    background-color: #069;
}
#generacion .chart{
    height: -webkit-calc(40vh - 64px - 20px);
    height: -moz-calc(40vh - 64px - 20px);
    height: calc(40vh - 64px - 20px);
}
#emision {
    position: relative;
}
#emision .chart{
    height: -webkit-calc(41vh - 64px - 30px);
    height: -moz-calc(41vh - 64px - 30px);
    height: calc(41vh - 64px - 30px);
}
#emision .cero_emisiones {
    position: absolute;
    bottom: 20px;
    right: 30px;
}
#acumulada .wrapper_chart{
    position: relative;
}
#acumulada button.action.renovables {
    position: absolute;
    top:50px;
    right: 80px;
}
#acumulada button.action.norenovables {
    position: absolute;
    top:50px;
    right: 30px;
}
#acumulada button.action{
    background-color: #fff;
}
#acumulada button.action md-icon {
    color: #000;
}
#acumulada .chart{
    height: -webkit-calc(84vh - 64px - 30px);
    height: -moz-calc(84vh - 64px - 30px);
    height: calc(84vh - 64px - 30px);
    min-height: 300px;
}
/**************************************************
    Bypage
**************************************************/
.wrapper_curvas_total footer .wrapper_main_menu{  
    display: none;
}

/**************************************************
    Share
**************************************************/
.wrapper_share {
    float: right;
}

/**************************************************
    Footer
**************************************************/
footer {
    position: fixed;
    bottom: 0;
    padding: 5px;
    background: #000;
    width: 100%;
    color: #fff;
}
footer p {
    margin: 0;
}
footer .max-min-day {
    width: 40%;
    max-width: 40%;
}

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

#container2 span{
    top:27%!important;
    white-space: normal!important;
    width: 36%;
}
.highcharts-title h3 {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 1.3em;
}
.highcharts-title p {
    font-size: 1em;
    font-weight: normal;
    margin: 5px 0px;
}
.md-toolbar-tools { 
    padding: 0 3px 0 10px;
}
.md-button.md-icon-button { 
    margin: 0;
}

/******************************************
    Tables
******************************************/
.pagination-content {
    width: 90%;
    padding: 15px;
    box-shadow: 0px 0px 200px #C3C4CE;
    margin: 30px auto 70px auto;
}
.pagination {
    width:100%;
    margin:0 auto;
}
.pagination .pagination-menu {
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 0 50px;
    padding: 10px 0px;
    background: #00659c;
}
.pagination .pagination-menu .pagination-menu-item {
    list-style: none;
    padding: 0px 20px;
    border-right: 1px solid #ffffff;
}
.pagination .pagination-menu .pagination-menu-item:last-child {
    border-right: none;
}
.pagination .pagination-menu .pagination-menu-item a {
    color: #ffffff;
    font-weight: 600;
    }
.pagination .pagination-menu .pagination-menu-item a.active:before {
    content: ' ';
    width: 0px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #069;
    display: inline-block;
    position: relative;
    color: #069;
    top: 25px;
    left: calc(50% - 5px);
}
.pagination-content table thead tr th .export-csv {
    float: right;
}
.pagination-content table tbody tr:first-child {
    background:#1f1f1e;
    color:#fff;
}
.pagination-content table tbody tr:first-child .down {
    background:rgb(0, 86, 136);
    color:#fff;
}

.pagination-content table>tbody>tr>th:first-child {
    border-top:none;
}
.pagination-content table tbody tr {
    background: #f4f4f4;
}
.pagination-content .table>tbody>tr>td,.pagination-content .table>tbody>tr>th,.pagination-content .table>tfoot>tr>td,
.pagination-content .table>tfoot>tr>th,.pagination-content .table>thead>tr>td,.pagination-content .table>thead>tr>th {
    border-top: 2px solid #FFF;
}
section#tablas_chart {
    margin: 30px 0;
}
.tabla-evolucion-content {
    overflow-x: scroll;
}
#tabla_evolucion, #tabla_emision, #tabla_generacion {
    white-space: nowrap;
}
#tabla_evolucion tbody, #tabla_emision tbody, #tabla_generacion tbody {
    font-size: 11px;
}

/******************************************
    Calendar
******************************************/
.date-content {
    width: 70%;
    padding: 15px 30px;
    box-shadow: 0px 0px 200px #C3C4CE;
    margin: 30px auto 70px auto;
}
.date-content tbody tr td button {
    line-height: 4.5em;
    border-radius: 0;
    font-size: 18px;
    font-weight: 700;
}
section#date {
    margin: 30px 0;
}
section#date table {
    width: 100%;
}
section#date table td {
    width: 177px;
}
section#date table thead tr:first-child , section#date table thead tr:first-child th, section#date table thead tr:first-child th button {
    background: #333;
    color: #fff;
    border: none;
    font-size: 16px;
}
section#date table thead tr:first-child th {
    text-transform: uppercase;
}
section#date table thead tr {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
section#date table thead tr th {
    padding: 10px 0;
    background: #eaeaea;
}
section#date table thead tr th strong {
    text-transform: uppercase;
}
section#date table thead tr th small {
    font-size: 14px;
    text-transform: uppercase;
}
section#date table thead tr:first-child th button .glyphicon {
    background: #069;
    padding: 5px;
    border-radius: 15px;
}
section#date .btn-info.active, .btn-info:active, .open>.dropdown-toggle.btn-info {
    background: #d4e1ec;
    border-color: #CBCCCD;
    box-shadow: none;
    color: #333;
}
section#date .btn-default {
    border-color: #eaeaea;
}
section#date .text-muted {
    color: #949494;
}

/******************************************
  Acumulada
******************************************/
section#curvas_acumulada {
    margin:30px 0 0 0;
}
#wrapper_acumulada {
    width: 90%;
    padding: 10px 15px 0 15px;
    box-shadow: 0px 0px 200px #C3C4CE;
    margin: 30px auto 30px auto;
}
#acumulada .buttons-group .md-button {
    margin-bottom: 10px;
}
#acumulada .buttons-group .md-button .type_button_graph_left .d_name_company {
    font-size: 12px;
}
#acumulada .buttons-group .md-button .type_button_graph_left {
    width:70%;
    text-align: left;
}
#acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
    font-size: 16px;
    padding-right: 5%;
}

/******************************************
  Sistemas
******************************************/
.sistemas-content-right {
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2% 0 0 0;

}
.sistemas-content-right .list-group-item {
    padding: 8px 15px;
}
.sistemas-content-right .panel-default>.panel-heading {
    color: #ffffff;
    background-color: #00659c;
    border-color: #00659c;
    font-weight: 600;
}
.sistemas-content-right .badge {
    background: #1f1f1e;
}
.sistemas-content-right .panel-heading a {
    color: #ffffff;
}
.sistemas-content {
    width: 90%;
    /*height: calc(90vh - 10px);*/
    padding: 7px 30px;
    box-shadow: 0px 0px 200px #C3C4CE;
    margin: 10px auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
section#sistemas {
    margin:20px 0 0 0;
}
section#sistemas .wrapper_main_menu {
    text-align: right;
}
#sistemas .sistemas-content .sistemas-content-right .panel-default .panel-body {
    padding: 5px;
}
.sistema {
    fill: #00659C;
    stroke: #4B7D98;
} 
.sistemas-content-right {
    width: 30%;
}
.sistemas-content-right .panel {
    width: 100%;
}
.sistemas-content-right .panel-default>.panel-heading {
    min-width: 240px;
    width: 100%;
}
.map-text-sistemas {
    margin: 4% 0;
}
.panel-heading a {
    float: left;
    margin-right: 10px;
    color: #333;
}
.panel-heading a:hover {
    float: left;
    margin-right: 10px;
    color: #069;
}

.bounce {
    animation: bounce 1.5s;
    -webkit-animation: bounce 1.5s;
    -moz-animation: bounce 1.5s;
    -o-animation: bounce 1.5s;
}
 
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0);} 
    40% {-webkit-transform: translateX(-30px);}
    60% {-webkit-transform: translateX(-15px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateX(0);}
    40% {-moz-transform: translateX(-30px);}
    60% {-moz-transform: translateX(-15px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateX(0);}
    40% {-o-transform: translateX(-30px);}
    60% {-o-transform: translateX(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
    40% {transform: translateX(-30px);}
    60% {transform: translateX(-15px);}
}

/******************************************
    Ayuda
******************************************/
section#ayuda {
    margin: 30px 0;
}
.ayuda-content {
    width: 90%;
    padding: 25px;
    box-shadow: 0px 0px 200px #C3C4CE;
    margin: 30px auto 70px auto;
}

/******************************************
    Media Queries
******************************************/

@media (min-width: 1441px) {
   .wrapper_chart .highcharts-title h3 {
        font-size: 1.4em;
    }
    .wrapper_chart .highcharts-title p {
        font-size: 1.1em;
    }
    .wrapper_chart #evolucion #max_day, #evolucion #min_day {
        font-size: 1.1em;
    }
    .wrapper_chart #container2 span {
        top: 27% !important;
        width: 30%;
        left: 191px;
    }
    .wrapper_chart-redimensionar .highcharts-title h3 {
        font-size: 1em;
    }
    .wrapper_chart-redimensionar .highcharts-title p {
        font-size: .8em;
        margin: 3px 0;
    }
    .wrapper_chart-redimensionar #container2 span {
        top: 26% !important;
        width: 24%;
        left: 207px;
    }
    
}
@media (min-width: 1075px) {
    #evolucion #max_day, #evolucion #min_day {
        font-size: 1em;
    }
}
@media (min-width: 960px) {
    .content-left-principal {
        width: 70%;
    } 
    .content-right-principal {
        width: 30%;
    }
    .sistemas-content-right {
        width:30%;
    }
    .sistemas-content-right .panel {
        max-width: 300px;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        max-width: 300px;
    }
}


@media (max-width: 1441px) and (min-width: 960px){
  /******************************************
    Acumulada
  ******************************************/
    #wrapper_acumulada {
        width: 95%;
    }
    #acumulada .chart{
        height: -webkit-calc(80vh - 64px - 30px);
        height: -moz-calc(80vh - 64px - 30px);
        height: calc(80vh - 64px - 30px);
    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 50%;
        text-align: left;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right {
        width: 50%;
        text-align: right;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 15px;
        padding-right: 0%;
    }
    .home-content img {
        min-width: 340px;
        width: 25%;
        display: block;
        margin: 0 auto;
        padding: 11% 0 0 0;
    }
    .home-title {
        width: 100%;
        margin: 3% 0 0 0;
    }
    .home-title h1 {
        font-size: 1.8em;
    }
    .home-footer {
        width: 100%;
        margin: 6% auto 0 auto;
    }
    .home-footer a {
        width: 22%;
    }
    .wrapper_main_menu .date {
        padding: 11px 5px;
    }
    .wrapper_main_menu .date span {
        font-size: 13px;
    }
    #evolucion .footer{
        padding: 5px 0px 5px 22px;
    }
    #evolucion .chart{
        height: -webkit-calc(78vh - 62px - 30px);
        height: -moz-calc(78vh - 62px - 30px);
        height: calc(78vh - 62px - 30px);
    }
    #evolucion .wrapper_values button {
        width: -webkit-calc(22% - 20px);
        width: -moz-calc(22% - 20px);
        width: calc(22% - 20px);
    }
    #evolucion .wrapper_renovables_norenovables {
        position: absolute;
        top: 8px;
        left: 124px;
        background: #fff;
        -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        padding: 4px;
    }
    .wrapper_values .md-button {
        font-size: 13px;
    }
    #container2 span{
        top:25%!important;
        white-space: normal!important;
        width: 30%;
    }
    .highcharts-title h3 {
        margin-bottom: 0;
        font-weight: normal;
        font-size: 1em;
    }
    .highcharts-title p {
        font-size: .9em;
        font-weight: normal;
        margin: 5px 0px;
    }
    #tabla_evolucion tbody, #tabla_emision tbody, #tabla_generacion tbody {
        font-size: 11px;
    }
    .box.wrapper_generacion_emision #generacion .header .md-button, .box.wrapper_generacion_emision #emision .header .md-button {
        margin: 0 8px;
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 7px;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #evolucion .chart{
        height: -webkit-calc(73vh - 62px - 30px);
        height: -moz-calc(73vh - 62px - 30px);
        height: calc(73vh - 62px - 30px);
        min-height: 250px;
    }
    .box.wrapper_estructura_generacion {
        height: -webkit-calc(60vh - 0px - 110px - 0px);
        height: -moz-calc(60vh - 0px - 110px - 0px);
        height: calc(60vh - 0px - 110px - 0px);
    }
    #estructura_generacion .chart{
        height: -webkit-calc(52vh - 0px - 90px - 0px);
        height: -moz-calc(52vh - 0px - 90px - 0px);
        height: calc(52vh - 0px - 90px - 0px);
        min-height: 230px;
    }
    .box.wrapper_generacion_emision {
        height: -webkit-calc(48vh - 0px - 80px - 0px);
        height: -moz-calc(48vh - 0px - 80px - 0px);
        height: calc(48vh - 0px - 80px - 0px);
        margin-bottom: 0px;
    }
    .box.wrapper_generacion_emision #emision .header .md-button {
        padding: 0 2px;
    }
    #emision .chart{
        height: -webkit-calc(36vh - 64px - 30px);
        height: -moz-calc(36vh - 64px - 30px);
        height: calc(36vh - 64px - 30px);
    }
    #generacion .chart {
        height: -webkit-calc(36vh - 64px - 20px);
        height: -moz-calc(36vh - 64px - 20px);
        height: calc(36vh - 64px - 20px);
    }
    section#curvas_acumulada, section#tablas_chart, section#date, section#ayuda {
        margin: 15px 0 0 0;
    }
    #wrapper_acumulada, .pagination-content, .date-content, .ayuda-content {
        margin: 15px auto 30px auto;
    }
    #evolucion .wrapper_renovables_norenovables {
        position: absolute;
        top: 8px;
        left: 124px;
        background: #fff;
        -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        padding: 4px;
    }
    #evolucion #max_day, #evolucion #min_day {
        font-size: .8em;
    }
    section#date table {
        margin-bottom: 40px;
    }
    .home-content img {
        padding: 12% 0 0 0;
        min-width: 320px;
    }
    .home-title h1 {
        font-size: 1.7em;
    }
    .home-footer {
        margin: 6% auto 0 auto;
    }
    .home-footer a {
        width: 23%;
    }
    .map-text-sistemas {
        margin: 0;
    }
}
@media (max-width: 959px) and (min-width: 850px) {

  /********************header*******************/
    header .md-menu {
        display: block;
    }
    header h1, .md-toolbar-tools h1 {
        font-size: 1em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.75em;
        margin: 0 20px 0 0;
    }
    .home-content img {
        min-width: 300px;
        padding: 17% 0 0 0;
    }
    .home-title {
        width: 100%;
        margin: 3% 0 0 0;
    }
    .home-title h1 {
        font-size: 1.8em;
    }
    .home-footer {
        width: 100%;
        margin: 6% auto 0 auto;
    }
    .home-footer a {
        width: 28%;
    }

  /********************box*********************/
   .box.wrapper_estructura_generacion {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
   }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
    }

    /********************chart*********************/
    #evolucion .wrapper_values button {
        width: -webkit-calc(23% - 20px);
        width: -moz-calc(23% - 20px);
        width: calc(23% - 20px);
    }
    #evolucion .chart{
        height: -webkit-calc(50vh - 64px - 30px);  
        height: -moz-calc(50vh - 64px - 30px);  
        height: calc(50vh - 64px - 30px);    
        background-size: 25%;
    }
    #evolucion .wrapper_values .value {
        font-size: 1.2em;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion #max_day, #evolucion #min_day {
        font-size: 0.8em;
    }
    #evolucion .footer {
        padding: 5px 25px 5px 35px;
    }
    #evolucion .wrapper_renovables_norenovables {
        position: absolute;
        top: 8px;
        left: 124px;
        background: #fff;
        -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        padding: 4px;
    }
    #estructura_generacion .chart{
        height: -webkit-calc(33vh - 0px - 30px);
        height: -moz-calc(33vh - 0px - 30px);
        height: calc(33vh - 0px - 30px);
        min-height: 200px;
    }
    #generacion .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
    }
    #emision .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
    }
    #acumulada .chart{
        height: -webkit-calc(64vh - 64px - 30px);
        height: -moz-calc(64vh - 64px - 30px);
        height: calc(64vh - 64px - 30px);
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
        /*max-height: 300px;*/
        overflow-y: auto;
    }
    #acumulada .buttons-group button{
        width: -webkit-calc(99% - 2px);
        width: -moz-calc(99% - 2px);
        width: calc(99% - 2px);
        float: left;
        padding: 0;
        margin: 2px;
    }
    .wrapper_main_menu {
        padding-right: 0;
    }
    /******************************************
        Calendar
    ******************************************/
    .date-content {
        width: 80%;
    }
    .date-content tbody tr td button {
        line-height: 3.5em;
    }

    /******************************************
        Acumulada
    ******************************************/
    #acumulada {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 8px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 65%;
        text-align: left;
    }

    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 14px;
        padding-right: 10%;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_percentage {
        display: none;
    }
    #acumulada .buttons-group {
        margin-bottom: 20px;
    }

    /******************************************
        Estructura Generación
    ******************************************/
    #estructura_generacion  #container2 span {
        width:25% !important;
    }
    #estructura_generacion  #container2 span {
        top:27% !important;
    }
    #estructura_generacion #container2 span h3 {
        font-size: .8em;
    }
    #estructura_generacion #container2 span p {
        font-size: .7em;
    }
    .wrapper_main_menu .date {
        margin-right: 3px;
        padding: 8px 2px;
        background: #DBDFE5;
        max-height: 40px;
        min-height: 40px;
    }
    .wrapper_main_menu .date button.md-button.md-icon-button {
        border-radius: 50%;
        margin: 0 0px;
        background: #B4BBC6;  
        height: 20px;
        width: 20px;  
        line-height: 20px;
        min-height: 20px;
    }
    .wrapper_main_menu .date span {
        font-size: 12px;
    }
    .md-button.md-icon-button {
        width: 40px;
        height:40px;
        line-height: 40px;
    }
    .main-menu.active:before {
        top: 40px;
    }
    #generacion .header .md-button {
        margin:0 8px;
    }
    .box.wrapper_generacion_emision > .content {
        overflow-y: visible;
    }
    /******Sistemas******/
    .sistemas-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .sistemas-content-right {
        width: 100%;
        padding: 0;
    }
    .sistemas-content-right .panel {
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .map-text-sistemas {
        margin: 2% 0;
    }

}
@media (max-width: 849px) and (min-width: 601px) {
    /******************************************
        Header
    ******************************************/
    header .md-menu {
        display: block;
    }
    header md-toolbar {
        min-height: 36px;
    }
    header .md-toolbar-tools {
        height: auto;
    }
    header h1, .md-toolbar-tools h1 {
        font-size: .9em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.75em;
        margin: 0 20px 0 0;
    }
    section#home {
        background: url('images/red-electrica-background.jpg') no-repeat center center;
        background-size:100% 100%;
        margin: 0 auto;
        width: 100%;
        height: -webkit-calc(94vh - 0px - 0px - 0px);
        height: -moz-calc(94vh - 0px - 0px - 0px);
        height: calc(94vh - 0px - 0px - 0px);
    }
    .home-content img {
        min-width: 250px;
        padding: 25% 0 0 0;
    }
    .home-title {
        width: 100%;
        margin: 3% 0 0 0;
    }
    .home-title h1 {
        font-size: 1.2em;
    }
    .home-footer {
        width: 100%;
        margin: 6% auto 0 auto;
    }
    .home-footer a {
        width: 32%;
    }

    /********************box*********************/
    .box.wrapper_estructura_generacion {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(55vh - 64px - 30px - 50px);
        height: -moz-calc(55vh - 64px - 30px - 50px);
        height: calc(55vh - 64px - 30px - 50px);
    }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
    }
    /********************chart*********************/
    #evolucion .chart {
        height: -webkit-calc(45vh - 64px - 30px); 
        height: -moz-calc(45vh - 64px - 30px); 
        height: calc(45vh - 64px - 30px);    
        background-size: 25%;
    }
    #evolucion .wrapper_values .value {
        font-size: 1.2em;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion #max_day, #evolucion #min_day {
        font-size: 0.7em;
    }
    #evolucion .footer {
        padding: 5px 25px 5px 25px;
    }
    #evolucion .wrapper_values button {
        width: -webkit-calc(23% - 20px);
        width: -moz-calc(23% - 20px);
        width: calc(23% - 20px);
    }
    #evolucion .wrapper_renovables_norenovables {
        position: absolute;
        top: 8px;
        left: 124px;
        background: #fff;
        -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.41);
        padding: 4px;
    }
    .wrapper_values .md-button {
        font-size: 12px;
    }
    #estructura_generacion .chart {
        height: -webkit-calc(42vh - 64px - 30px);
        height: -moz-calc(42vh - 64px - 30px);
        height: calc(42vh - 64px - 30px);
    }
    #generacion .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
    }
    #emision .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
    }
    #acumulada .chart{
        height: -webkit-calc(58vh - 64px - 30px);
        height: -moz-calc(58vh - 64px - 30px);
        height: calc(58vh - 64px - 30px);
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #acumulada .buttons-group button{
        width: -webkit-calc(100% - 0px);
        width: -moz-calc(100% - 0px);
        width: calc(100% - 0px);
        float: left;
        padding: 0;
        margin: 2px;
    }
    .wrapper_main_menu {
        padding-right: 0;
    }

    /******************************************
        Calendar
    ******************************************/
    .date-content {
        width: 80%;
    }
    .date-content tbody tr td button {
        line-height: 3.5em;
    }

    /******************************************
        Acumulada
    ******************************************/
    section#curvas_acumulada {
        margin: 20px 0;
    }
    #content_buttons {
        margin-bottom: 10px;
    }
    .wrapper_acumulada {
        margin: 10px auto;
    }
    #acumulada {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 6px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 70%;
        text-align: left;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right {
        width: 30%;
        text-align: right;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left .d_name_company {
        font-size: 11px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_percentage {
        display: none;
    }

    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 12px;
        padding-right: 10%;
    }
    .wrapper_main_menu .date {
        margin-right: 3px;
        padding: 8px 0px;
        background: #DBDFE5;
        max-height: 40px;
        min-height: 40px;

    }
    .wrapper_main_menu .date button.md-button.md-icon-button {
        border-radius: 50%;
        margin: 0 0px;
        background: #B4BBC6;  
        height: 20px;
        width: 20px;  
        line-height: 20px;
        min-height: 20px;
    }
    .wrapper_main_menu .date span {
        font-size: 12px;
    }
    .md-button.md-icon-button {
        width: 40px;
        height:40px;
        line-height: 40px;
    }
    .main-menu.active:before {
        top: 40px;
    }
    .wrapper_values .md-button {
        margin: 0 8px;
    }
    #evolucion h3 {
        padding: 5px;
    }
    .wrapper_title .md-title {
        font-size: 15px;
    }
    #estructura_generacion .chart {
        min-height: 235px;
    }
    .box > .content {
        height: 91%;
    }
    .highcharts-title h3 {
        font-size: 1em;
    }
    .highcharts-title p {
        font-size: .8em;
    }
    /**********Sistemas********/
    .sistemas-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .sistemas-content-right {
        width: 100%;
        padding: 0;
    }
    .sistemas-content-right .panel {
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .map-text-sistemas {
        margin: 0 0 4% 0;
    }

}
@media (max-width: 849px) and (min-width: 601px) and (orientation:landscape) {
    
    /******************************************
        Header
    ******************************************/
     /*SAFARI9*/
    @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
        .highcharts-title p {
            margin: 3px 0 !important;
        }
    }
    /*FIN SAFFARI9*/
    header .md-menu {
        display: block;
    }
    header md-toolbar {
        min-height: 36px;
    }
    header .md-toolbar-tools {
        height: auto;
    }
    header h1, .md-toolbar-tools h1 {
        font-size: .9em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.75em;
        margin: 0 20px 0 0;
    }
    section#home {
        background: url('images/red-electrica-background.jpg') no-repeat center center;
        background-size:100% 100%;
        margin: 0 auto;
        width: 100%;
        height: -webkit-calc(92vh - 0px - 0px - 0px);
        height: -moz-calc(92vh - 0px - 0px - 0px);
        height: calc(92vh - 0px - 0px - 0px);
    }
    .home-content img {
        min-width: 165px;
        padding: 5% 0 0 0;
        width: 30%;
    }
    .home-title {
        width: 100%;
        margin: 3% 0 0 0;
    }
    .home-title h1 {
        font-size: 1.2em;
    }
    .home-footer {
        width: 100%;
        margin: 6% auto 0 auto;
    }
    .home-footer a {
        width: 32%;
    }
    /********************box*********************/
    .box.wrapper_estructura_generacion {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(55vh - 64px - 30px - 50px);
        height: -moz-calc(55vh - 64px - 30px - 50px);
        height: calc(55vh - 64px - 30px - 50px);
        min-height: 300px;
    }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
        min-height: 300px;
    }
    .box.wrapper_generacion_emision #generacion .header .md-button, .box.wrapper_generacion_emision #emision .header .md-button {
        margin: 0 8px;
    }
    /********************chart*********************/
    #evolucion .chart {
        height: -webkit-calc(45vh - 64px - 30px); 
        height: -moz-calc(45vh - 64px - 30px); 
        height: calc(45vh - 64px - 30px);    
        background-size: 25%;
    }
    #evolucion .wrapper_values .value {
        font-size: 1.2em;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion #max_day, #evolucion #min_day {
        font-size: 0.7em;
    }
    #evolucion .footer {
        padding: 5px 25px 5px 25px;
    }
    #evolucion .wrapper_values button {
        width: -webkit-calc(23% - 20px);
        width: -moz-calc(23% - 20px);
        width: calc(23% - 20px);
    }
    .wrapper_values .md-button {
        font-size: 12px;
    }
    #estructura_generacion .chart {
        height: -webkit-calc(42vh - 64px - 30px);
        height: -moz-calc(42vh - 64px - 30px);
        height: calc(42vh - 64px - 30px);
    }
    #generacion .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
        min-height: 200px;
    }
    #emision .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
        min-height: 200px;
    }
    #acumulada .chart{
        height: -webkit-calc(58vh - 64px - 30px);
        height: -moz-calc(58vh - 64px - 30px);
        height: calc(58vh - 64px - 30px);
    }
    #wrapper_acumulada {
        padding-bottom: 20px;
        margin-bottom: 60px;
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
        max-height: 250px;
        overflow-y: auto;
    }
    #acumulada .buttons-group button {
        width: -webkit-calc(100% - 0px);
        width: -moz-calc(100% - 0px);
        width: calc(100% - 0px);
        float: left;
        padding: 0;
        margin: 2px;
    }
    .wrapper_main_menu {
        padding-right: 0;
    }

    /******************************************
        Calendar
    ******************************************/
    .date-content {
        width: 80%;
    }
    .date-content tbody tr td button {
        line-height: 3.5em;
    }

    /******************************************
        Acumulada
    ******************************************/
    #acumulada {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 6px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 65%;
        text-align: left;
    }

    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 12px;
        padding-right: 10%;
    }
    .wrapper_main_menu .date {
        margin-right: 3px;
        padding: 8px 0px;
        background: #DBDFE5;
        max-height: 40px;
        min-height: 40px;
    }
    .wrapper_main_menu .date button.md-button.md-icon-button {
        border-radius: 50%;
        margin: 0 0px;
        background: #B4BBC6;  
        height: 20px;
        width: 20px;  
        line-height: 20px;
        min-height: 20px;
    }
    .wrapper_main_menu .date span {
        font-size: 12px;
    }
    .md-button.md-icon-button {
        width: 40px;
        height:40px;
        line-height: 40px;
    }
    .main-menu.active:before {
        top: 40px;
    }
    .wrapper_values .md-button {
        margin: 0 8px;
    }
    #evolucion h3 {
        padding: 5px;
    }
    .wrapper_title .md-title {
        font-size: 15px;
    }
    #estructura_generacion .chart {
        min-height: 235px;
    }
    .box > .content {
        height: 91%;
    }
    .highcharts-title h3 {
        font-size: 1em;
    }
    .highcharts-title p {
        font-size: .8em;
    }
    .sistemas-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .sistemas-content-right {
        width: 100%;
        padding: 0;
    }
    .sistemas-content-right .panel {
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .map-text-sistemas {
        margin: 0 0 4% 0;
    } 
    #curvas_total #evolucion .footer.layout-row {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
    }
    #curvas_total .content-left-principal #evolucion .footer.layout-row div:first-child div {
        margin: 0;
    }
    #curvas_total .content-left-principal #evolucion .footer.layout-row div:first-child div:last-child {
        text-align: left;
    }
    footer {
        height:32px;
        display: none;
    }
    footer #ree_info {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    /*****************header*********************/
    /*SAFARI9*/
    @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
        header h1, .md-toolbar-tools h1 {
            margin: 0 30px 0 0 !important;
        }
        header .md-button.md-icon-button {
            width: 100% !important;
            padding-right: 10px !important;
            margin-right: 0px !important;
        }
        header h1, .md-toolbar-tools span {
            margin: 0 10px !important;;
        }
        #evolucion .wrapper_values {
            padding: 10px 25px 0 25px !important;
        }
        #evolucion .wrapper_values .md-button {
            font-size: 13px !important;
        }
        .date-content {
            width: 98% !important;
            padding:5px !important;
        }
        section#home {
            height: -webkit-calc(90vh - 0px - 0px - 0px);
            height: -moz-calc(90vh - 0px - 0px - 0px);
            height: calc(90vh - 0px - 0px - 0px);
        }

    }
    /*FIN SAFFARI9*/
    header .md-menu {
        display: block;
    }
    header md-toolbar {
        min-height: 36px;
    }
    header .md-toolbar-tools {
        height: auto;
    }
    header .md-menu {
        padding: 0;
    }
    header .md-button.md-icon-button {
        height: 33px;
        line-height: 32px; 
    }
    header h1, .md-toolbar-tools h1 {
        font-size: 0.8em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.65em;
        margin: 0 20px 0 0;
    }
    section#home {
        background: url('images/red-electrica-background.jpg') no-repeat center center;
        background-size:100% 100%;
        margin: 0 auto;
        width: 100%;
        height: -webkit-calc(94vh - 0px - 0px - 0px);
        height: -moz-calc(94vh - 0px - 0px - 0px);
        height: calc(94vh - 0px - 0px - 0px);
    }
    .home-content img {padding:5% 0 0 0;
        padding: 22% 0 0 0;
        min-width: 250px;
    }
    .home-footer a {
        width: 42%;
    }
    .home-title h1 {
        font-size: 1.2em;
        padding: 0 33px;
        margin: 6% 0 0 0;
    }

    /*****************menu**********************/
    section#curvas_acumulada {
        margin: 30px 0 60px 0;
    }
    #acumulada {
        display: inline-block;
        width: 100%
    }
    #acumulada #content_buttons {
        display: inline-block;
    }
    #acumulada .wrapper_chart {
        display: inline-block;
    }
    #curvas_acumulada .wrapper_main_menu, #tablas_chart .wrapper_main_menu,
    #sistemas .wrapper_main_menu , #date .wrapper_main_menu {
        display: none;
    }
    #curvas_total .wrapper_main_menu { margin: 10px 0;}
    #curvas_total .wrapper_main_menu .navigation .md-button.md-icon-button.main-menu-ocultar {display: none !important;}
    #curvas_total .wrapper_main_menu .navigation .md-button.md-icon-button.main-menu-calendario {margin-right: 25px;}

    #evolucion .footer {
        display: list-item;
    }
    
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_percentage {
        margin-right: 3%;
    }
    md-menu-content {
        max-height: 450px;
    }
    md-menu-item {
        min-height: 35px;
        height: 35px;
    }  
    md-menu-item>* {
        width: 74%;
    }
    md-menu-item.creditos p{
        width: 100%;
        font-size:0.9em;
    }
    md-menu-content .md-button.md-icon-button {
        width: 47px;
    }
    md-menu-item>.md-button md-icon {
        margin: 0 10px 0 0;
    }
    .idioma .md-icon-button {
        position: relative;
        right: 13px;
    }
    md-icon.main-menu-anterior {
        margin-left: 25px !important;
    }
    .material-icons {
        font-size: 36px !important;
        line-height: 0.6 !important;
    }

    /********************box*********************/
    .box {
        margin: 0px;
    }
    .box > .header {
        height: 30px;
    }
    .box.wrapper_estructura_generacion {
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
        width: calc(100%);
        height: auto;
    }
    .box.wrapper_estructura_generacion > .header:before {
        top: 40px;
    }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
        width: calc(100%);
        height: auto;
        margin-bottom: 60px;
    }
    .box.wrapper_estructura_generacion > .header {
        height: 30px;
    }
    .box.wrapper_generacion_emision > .header li {  
        height: 30px;
    }
    .box.wrapper_generacion_emision > .header li button {
        height: 36px;
        padding: 0 0 6px 0;
    }
    .box.wrapper_generacion_emision li.tabselected:before {
        top: 30px;
    }
    .box.wrapper_estructura_generacion > .header p {
        font-size: 1em;
    }
    .box.wrapper_estructura_generacion  > .header md-icon{
        width: 22px;
        height: 22px;
    }

    /********************chart*********************/
    #evolucion .wrapper_values .value {
        font-size: 1.2em;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion {
        padding: 0px;
    }
    #evolucion h3 {
        font-size: 1em;
        padding: 6px;
    }
    #evolucion h3 span.md-title {
        font-size: 1em;
    }
    #evolucion md-fab-speed-dial{
        display: none;
    }
    #evolucion .wrapper_values{
        width: 100%;
        padding: 10px 25px 0 25px;
        margin: 0;
        float: right;
        display: block;
    }
    #evolucion .wrapper_values button {
        width: -Wwebkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        float: left;
        margin: 5px;
        font-size: 12px;
    }
    #evolucion .wrapper_values .renovables,#evolucion .wrapper_values .norenovables{
        display: block!important;
    }
    #evolucion .wrapper_renovables_norenovables {
        position: absolute;
        top: 8px;
        left: 80px;
        padding: 0;
    }
    #tabla_evolucion, #tabla_emision, #tabla_generacion {
        font-size: 12px;
    }
    #container2 span {
        top: 29%!important;
        font-size: 0.9em!important;
    }
    #evolucion .chart{
        height: 350px;
        background-size: 55%;
    }
    #estructura_generacion .slider {
        display: block;
        padding: 0 20px 20px 20px;
    }
    #estructura_generacion .chart{
        height: 300px;
    }
    #generacion .chart{
        height: 350px;
    }
    #emision .chart{
        height: 350px;
    }
    #acumulada .chart{
        height: -webkit-calc(74vh - 64px - 30px);
        height: -moz-calc(74vh - 64px - 30px);
        height: calc(74vh - 64px - 30px);
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
    }
    #acumulada .buttons-group button{
        width: -webkit-calc(33% - 3px);
        width: -moz-calc(33% - 3px);
        width: calc(33% - 3px);
        float: left;
        padding: 0;
        margin: 2px;
    }
    #container2 span{
        top:26%!important;
    }

    .highcharts-title h3 {
        font-size: 24px;
    }
    .highcharts-title p {
        font-size: 16px;
    }

    /******************button************************/
    .md-button {
        line-height: 1em;
    }
    .buttons-group {
        width: 100%;
    }
    .buttons-group button{
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        width: calc(100% - 20px);
    }

    /******************************************
        Calendar
    ******************************************/
    .date-content {
        width: 90%;
    }
    .date-content tbody tr td button {
        line-height: 1.5em;
    }

    /******************************************
        Acumulada
    ******************************************/
    #acumulada .buttons-group button {
        width: -webkit-calc(100% - 0px);
        width: -moz-calc(100% - 0px);
        width: calc(100% - 0px);
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 5px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 16px;
    }
    /*****  Pagination  ******/

    .pagination .pagination-menu .pagination-menu-item a.active::before {
        position: relative;
        top: 24px;
    }
    .pagination .pagination-menu .pagination-menu-item {
        list-style: outside none none;
        border-right: 1px solid #FFF;
        padding: 0px 5px;
        font-size: 12px;
    }

    /*Sistemas*/
    .sistemas-content-right {
        padding: 0;
        display: none;
        width: 100%;
    }
    .showMobile {
        display:block;
    }
    .sistemas-content {
        min-width: 320px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    /**********Sistemas********/
    .sistemas-content-right .panel {
        max-width: 100%;
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .map-text-sistemas {
        margin: 0 0 4% 0;
    }
    #curvas_total  .content-right-principal  {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    footer {
        height:32px;
        display: none;
    }
    footer #ree_info {
        display: none;
    }
}

@media screen and (min-width: 426px) and (max-width: 600px) and (orientation:landscape) {
    
    /********************header*******************/
    header .md-menu {
        display: block;
    }
    header h1, .md-toolbar-tools h1 {
        font-size: 1em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.75em;
        margin: 0 20px 0 0;
    }
    section#home {
        background: url('images/red-electrica-background.jpg') no-repeat center center;
        background-size:100% 100%;
        margin: 0 auto;
        width: 100%;
        height: -webkit-calc(87vh - 0px - 0px - 0px);
        height: -moz-calc(87vh - 0px - 0px - 0px);
        height: calc(87vh - 0px - 0px - 0px);
    }
        .home-content img {
            padding: 2% 0 0 0;
            min-width: 130px;
        }
        .home-title {
            margin: 2% 0 0 0;
        }
        .home-title h1 {
            font-size: 1em;
            margin: 2% 0 0 0;
            padding: 0 33px;
        }
        .home-footer {
            margin: 2% auto 0 auto;
        }
        .home-footer a {
            width: 40%;
        }
    
    /*.home-content img {
        padding: 4% 0 0 0;
        min-width: 150px;
    }
    .home-title {
        margin: 3% 0 0 0;
    }
    .home-title h1 {
        font-size: 1.1em;
        margin: 2% 0 0 0;
        padding: 0 33px;
    }
    .home-footer {
        margin: 4$ auto 0 auto;
    }
    .home-footer a {
        width: 37%;
    }*/

  /********************box*********************/
    #curvas_total .content-right-principal {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
    }
   .box.wrapper_estructura_generacion {
        width: -webkit-calc(49% - 0px);
        width: -moz-calc(49% - 0px);
        width: calc(49% - 0px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
        min-height: 330px;
   }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(49% - 0px);
        width: -moz-calc(49% - 0px);
        width: calc(49% - 0px);
        height: -webkit-calc(52vh - 64px - 30px - 50px);
        height: -moz-calc(52vh - 64px - 30px - 50px);
        height: calc(52vh - 64px - 30px - 50px);
        min-height: 300px;
        margin-left: 2%;
    }

    /********************chart*********************/
    #evolucion .wrapper_values{
        float: right;    
        margin-top: 5px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding:10px 10px 0 10px;
    }
    #evolucion .wrapper_values button {
        width: -webkit-calc(28% - 10px);
        width: -moz-calc(28% - 10px);
        width: calc(28% - 10px);
    }
    #evolucion .chart{
        height: -webkit-calc(50vh - 64px - 30px);  
        height: -moz-calc(50vh - 64px - 30px);  
        height: calc(50vh - 64px - 30px);    
        background-size: 25%;
    }
    #evolucion .wrapper_values .value {
        font-size: 1.1em;
    }
    #evolucion .wrapper_values .md-button {
        font-size: 11px;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion #max_day, #evolucion #min_day {
        font-size: 0.8em;
    }
    #evolucion .footer {
        padding: 5px 25px 5px 35px;
    }
    #evolucion .wrapper_values .renovables,#evolucion .wrapper_values .norenovables{
        display: none!important;
    }
    #estructura_generacion .chart{
        height: -webkit-calc(33vh - 0px - 30px);
        height: -moz-calc(33vh - 0px - 30px);
        height: calc(33vh - 0px - 30px);
        min-height: 220px;
    }
    #generacion .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
        min-height: 200px;
    }
    #emision .chart{
        height: -webkit-calc(35vh - 64px - 30px);
        height: -moz-calc(35vh - 64px - 30px);
        height: calc(35vh - 64px - 30px);
        min-height: 200px;
    }
    #acumulada .chart{
        height: -webkit-calc(64vh - 64px - 30px);
        height: -moz-calc(64vh - 64px - 30px);
        height: calc(64vh - 64px - 30px);
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
        max-height: 210px;
        overflow-y: auto;
    }
    #acumulada .buttons-group button{
        width: -webkit-calc(99% - 2px);
        width: -moz-calc(99% - 2px);
        width: calc(99% - 2px);
        float: left;
        padding: 0;
        margin: 2px;
    }
    .wrapper_main_menu {
        padding-right: 0;
    }
    /******************************************
        Calendar
    ******************************************/
    .date-content {
        width: 80%;
    }
    .date-content tbody tr td button {
        line-height: 3.5em;
    }

    /******************************************
        Acumulada
    ******************************************/
    #acumulada {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; 
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    #acumulada #content_buttons > p {
        font-size: 12px;
    } 
    #acumulada .buttons-group .md-button {
        margin-bottom: 0px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;

    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 333%;
        text-align: left;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right {
        width: 105px;
        text-align: left;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 13px;
        padding-right: 0;
        margin-right: 0;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left .d_name_company {
        font-size: 10px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_percentage {
        width: auto;
    }
    /******************************************
        Estructura Generación
    ******************************************/
    #estructura_generacion  #container2 span {
        width:25% !important;
    }
    #estructura_generacion  #container2 span {
        top:27% !important;
    }
    #estructura_generacion #container2 span h3 {
        font-size: .8em;
    }
    #estructura_generacion #container2 span p {
        font-size: .7em;
    }
    .wrapper_main_menu .date {
        margin-right: 3px;
        padding: 8px 2px;
        background: #DBDFE5;
        max-height: 40px;
        min-height: 40px;
    }
    .wrapper_main_menu .date button.md-button.md-icon-button {
        border-radius: 50%;
        margin: 0 0px;
        background: #B4BBC6;  
        height: 20px;
        width: 20px;  
        line-height: 20px;
        min-height: 20px;
    }
    .wrapper_main_menu .date span {
        font-size: 12px;
    }
    .md-button.md-icon-button {
        width: 40px;
        height:40px;
        line-height: 40px;
    }
    .main-menu.active:before {
        top: 40px;
    }
    #generacion .header .md-button {
        margin:0 8px;
    }
    .box.wrapper_generacion_emision > .content {
        overflow-y: visible;
    }
    /******Sistemas******/
    .sistemas-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .sistemas-content-right {
        width: 100%;
        padding: 0;
    }
    .sistemas-content-right .panel {
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .box.wrapper_estructura_generacion > .header p {
        font-size: .9em;
    }
    footer {
        height:5px;
        display: none;
    }
    footer #ree_info {
        display: none;
    }

}
@media (min-width: 426px) and  (max-width: 500px)  {
    #evolucion .wrapper_values button {
        font-size: .6em !important;
    }
}
@media screen and (max-width: 425px) {
    #acumulada {
        display: inline-block;
        width: 100%
    }
    #acumulada #content_buttons {
        display: inline-block;
    }
    #acumulada .wrapper_chart {
        display: inline-block;
    }

    /*****************header*********************/
    /*SAFARI9*/
    @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
        
        header h1, .md-toolbar-tools h1 {
            margin: 0 30px 0 0 !important;
        }
        header .md-button.md-icon-button {
            width: 100% !important;
            padding-right: 10px !important;
            margin-right: 0px !important;
        }
        header h1, .md-toolbar-tools span {
            margin: 0 10px !important;;
        }
        #evolucion .wrapper_values {
            padding: 10px 25px 0 25px !important;
        }
        #evolucion .wrapper_values .md-button {
            font-size: 13px !important;
        }
        #evolucion .footer {
            padding: 5px 9px 5px 7px;
        }
        .date-content {
            width: 98% !important;
            padding:5px !important;
        }
        section#home {
            background: url('images/red-electrica-background.jpg') no-repeat center center;
            background-size:100% 100%;
            margin: 0 auto;
            width: 100%;
            height: -webkit-calc(90vh - 0px - 0px - 0px);
            height: -moz-calc(90vh - 0px - 0px - 0px);
            height: calc(90vh - 0px - 0px - 0px);
        }
        #curvas_total .wrapper_main_menu {
            margin: 20px 0 10px 0 !important;
        }
        /*Necesario para evitar fallo en safari*/
        .flex-sm-100, .layout-column>.flex-sm-100, .layout-row>.flex-sm-100, .layout-sm-column>.flex-sm-100, .layout-sm-row>.flex-sm-100 {
            height:30px;
            padding-bottom: 10px;
        }
    }
    /*FIN SAFARI9*/
    header .md-menu {
        display: block;
    }
    header md-toolbar {
        min-height: 36px;
    }
    header .md-toolbar-tools {
        height: auto;
    }
    header .md-menu {
        padding: 0;
    }
    header .md-button.md-icon-button {
        height: 33px;
        line-height: 32px; 
    }
    header h1, .md-toolbar-tools h1 {
        font-size: 0.8em;
        margin: 0 10px 0 0;
        letter-spacing: 0px;
    }
    header h1, .md-toolbar-tools span {
        font-size: 0.65em;
        margin: 0 20px 0 0;
    }
    section#home {
        background: url('images/red-electrica-background.jpg') no-repeat center center;
        background-size:100% 100%;
        margin: 0 auto;
        width: 100%;
        height: -webkit-calc(93vh - 0px - 0px - 0px);
        height: -moz-calc(93vh - 0px - 0px - 0px);
        height: calc(93vh - 0px - 0px - 0px);
    }
    .home-content img {
        padding: 18% 0 0 0;
        min-width: 220px;
    }
    .home-footer a {
        width: 64%;
    }
    .home-title h1 {
        font-size: 1.1em;
        padding: 0 33px;
        margin: 6% 0 0 0;
    }

    /*****************menu**********************/
    section#curvas_acumulada {
        margin: 30px 0 60px 0;
    }
    #curvas_acumulada .wrapper_main_menu, #tablas_chart .wrapper_main_menu,
    #sistemas .wrapper_main_menu , #date .wrapper_main_menu {
        display: none;
    }
    #curvas_total .wrapper_main_menu {
        margin: 10px 0;
    }
    #evolucion .footer {
        display: list-item;
    }
    #curvas_total .wrapper_main_menu .navigation .md-button.md-icon-button.main-menu-ocultar {display: none !important;}
    #curvas_total .wrapper_main_menu .navigation .md-button.md-icon-button.main-menu-calendario {margin-right: 25px;}

    md-menu-content {
        max-height: 450px;
    }
    md-menu-item {
        min-height: 35px;
        height: 35px;
    }  
    md-menu-item>* {
        width: 74%;
    }
    md-menu-item.creditos p{
        width: 100%;
        font-size:0.9em;
    }
    md-menu-content .md-button.md-icon-button {
        width: 47px;
    }
    md-menu-item>.md-button md-icon {
        margin: 0 10px 0 0;
    }
    .material-icons {
        font-size: 36px !important;
        line-height: 0.6 !important;
    }
    .idioma .md-icon-button {
        position: relative;
        right: 13px;
    }
    /********************box*********************/
    .box {
        margin: 0px;
    }
    .box > .header {
        height: 30px;
    }
    .box.wrapper_estructura_generacion {
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
        width: calc(100%);
        height: auto;
    }
    .box.wrapper_estructura_generacion > .header:before {
        top: 40px;
    }
    .box.wrapper_generacion_emision {
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
        width: calc(100%);
        height: auto;
        margin-bottom: 20px;
    }
    .box.wrapper_estructura_generacion > .header {
        height: 30px;
    }
    .box.wrapper_generacion_emision > .header li {  
        height: 30px;
    }
    .box.wrapper_generacion_emision > .header li button {
        height: 36px;
        padding: 0 0 6px 0;
    }
    .box.wrapper_generacion_emision li.tabselected:before {
        top: 30px;
    }
    .box.wrapper_estructura_generacion > .header p {
        font-size: 1em;
    }
    .box.wrapper_estructura_generacion  > .header md-icon{
        width: 22px;
        height: 22px;
    }

    /********************chart*********************/
    #evolucion .wrapper_values .value {
        font-size: 1.2em;
    }
    #evolucion .wrapper_values .md-button {
        line-height: 20px;
    }
    #evolucion {
        padding: 0px;
    }
    #evolucion h3 {
        font-size: 1em;
        padding: 6px;
    }
    #evolucion h3 span.md-title {
        font-size: 1em;
    }
    #evolucion md-fab-speed-dial {
        display: none;
    }
    #evolucion .wrapper_values {
        width: 100%;
        padding: 10px 25px 0 25px;
        margin: 0;
        float: right;
        display: block;
    }
    #evolucion .wrapper_values button {
        width: -webkit-calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        float: left;
        margin: 5px;
        font-size: 12px;
    }
    #evolucion .wrapper_values .renovables,#evolucion .wrapper_values .norenovables{
        display: block!important;
    }
    #evolucion .wrapper_renovables_norenovables {
        display: none;
    }
    #tabla_evolucion, #tabla_emision, #tabla_generacion {
        font-size: 12px;
    }
    #container2 span {
        top: 29%!important;
        font-size: 0.9em!important;
    }
    #evolucion .chart{
        height: 350px;
        background-size: 55%;
    }
    #estructura_generacion .slider {
        display: block;
        padding: 20px;
    }
    #estructura_generacion .chart{
        height: 300px;
    }
    #generacion .chart{
        height: 350px;
    }
    #emision .chart{
        height: 350px;
    }
    #container2 span{
        top:26%!important;
    }

    .highcharts-title h3 {
        font-size: 21px;
    }
    .highcharts-title p {
        font-size: 16px;
    }

    /******************************************
        Acumulada
    ******************************************/
    #acumulada .buttons-group button {
        width: -webkit-calc(100% - 0px);
        width: -moz-calc(100% - 0px);
        width: calc(100% - 0px);
    }
    #acumulada .buttons-group .md-button {
        margin-bottom: 5px;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right .d_name_power {
        font-size: 14px;
    }
    #acumulada .chart{
        height: -webkit-calc(74vh - 64px - 30px);
        height: -moz-calc(74vh - 64px - 30px);
        height: calc(74vh - 64px - 30px);
    }
    #acumulada .buttons-group {
        width: 100%;
        float: left;
    }
    #acumulada .buttons-group .md-button .type_button_graph_left {
        width: 50%;
        text-align: left;
    }
    #acumulada .buttons-group .md-button .type_button_graph_right {
        width: 50%;
        text-align: right;
    }
    #acumulada .chart {
        height: -webkit-calc(84vh - 64px - 30px);
        height: -moz-calc(84vh - 64px - 30px);
        height: calc(84vh - 64px - 30px);
        min-height: 200px;
    }

    /******************button************************/
    .md-button {
        line-height: 1em;
    }
    .buttons-group {
        width: 100%;
    }
    .buttons-group button{
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        width: calc(100% - 20px);
    }

    /******************Date***********************/
    .date-content {
        width: 95%;
        padding:15px 20px;
    }
    .date-content tbody tr td button {
        line-height: 1em;
    }
    section#date table thead tr th small {
        font-size: 12px;
    }
    .date-content tbody tr td button {
        font-size: 15px;
    }

    /*****************Pagination********************/
    .pagination .pagination-menu .pagination-menu-item a.active::before {
        position: relative;
        top: 24px;
    }
    .pagination .pagination-menu .pagination-menu-item {
        list-style: outside none none;
        border-right: 1px solid #FFF;
        padding: 0px 5px;
        font-size: 12px;
    }
    .pagination-content table thead tr th .export-csv {
        float: left;
        width: 100%;
        margin-top: 10px;
    }
    .sistemas-content {
        min-width: 320px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .sistemas-content-right {
        width: 100%;
    }
    .sistemas-content-right .panel {
        width: 100%;
    }
    .sistemas-content-right .panel-default>.panel-heading {
        min-width: 240px;
        max-width: 100%;
        width: 100%;
    }
    .map-text-sistemas {
        margin: 0 0 4% 0;
    }
    #curvas_total  .content-right-principal  {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
     /*******************footer**********************/
    footer {
        height:32px;
        display: none;
    }
    footer #ree_info{
        display: none;
        padding: 2px;
    }
    footer p{
        font-size: 10px;
    }
    #evolucion .footer {
        padding: 5px 13px 5px 7px;
    }
    .layout-sm-row {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .flex-sm-50, .layout-row>.flex-sm-50, .layout-sm-row>.flex-sm-50 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    #evolucion #max_day, #evolucion #min_day {
        text-align: center;
    }
}