.row.debug, div.debug { border: solid 4px red; }

.col-md-1.debug, .col-md-2.debug, .col-md-3.debug, .col-md-4.debug, .col-md-5.debug, .col-md-6.debug, .col-md-7.debug, .col-md-8.debug, .col-md-9.debug, .col-md-10.debug, .col-md-11.debug, .col-md-12.debug {
    border: solid 4px blue;
}

/********** Formato del texto ***************/
label { font-weight: 400; }

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/***************** LAYOUT ***********************/
.footer.fixed {
    z-index: 101 !important;
    margin-left: 0 !important;
    background-color: #f3f3f3;
    display:none;
}

#wrapper { overflow-y: hidden; }

#page-wrapper {
    padding-right: 0;
    padding-left: 0;
}

.wrapper-content { padding-left: 0; }

#bodySeccionPrincipal {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
}

body.fixed-nav #wrapper .navbar-static-side, body.fixed-nav #wrapper #page-wrapper, body.mini-navbar #wrapper .navbar-static-side, body.mini-navbar #wrapper #page-wrapper {
    margin-top: 110px;
}

.navbar-static-side { overflow-x:hidden; }

#msgNavegadorNoSoportado {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    text-align: center;
}

#loginForm #msgNavegadorNoSoportado * {
    font-size: 12px;
    color: white !important;
}

#msgNavegadorNoSoportado * {
    font-size: 12px;
    color: #333566 !important;
}
/******************************** LOGIN ************************************/
.login h4, .login small, .login a {
    font-weight: 400;
}
body.login{
    height:inherit;
}
body.login .logo {  margin-left: 0; }

body.login video {
    width: auto !important; /* Utilizo important, por que el style del inspinia establece el ancho y alto de los videos con important */
    height: auto !important;
}
#errorEnLogin {
    margin-top: 17px;
}

.btn-login, .btn-login:hover, .btn-login:active, .btn-login:focus {
    color: white;
}

.body.login footer {
    margin-top: 15px;
    text-align: center;
}

.footerLogin a {
    color: #005D9F;
    text-decoration: none;
    margin-right: 15px;
    font-weight: bold;
}

#certificados {
    content: url("../img/certificados.png");
    display: none;
}

/***************************** REGISTRO *************************************/
body.registro {
    background-color: white;
}

body.registro .logo {
    margin-left: 0;
}

body.registro #seccionImagenes img {
    width: 100%;
    height: 713px;
}

body.registro .aclaracionCampoFormulario {
    padding-left: 3px;
}

body.registro #aceptacionPoliticas-error {
    display: initial;
}
/****************************** LOADING *************************************/
.loader-container {
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 50px;
    background: rgba(0,0,0,.55);
}

.loader-container.loading-inactive {
    display: none;
}

.loader-container.loading-inactive .loading-progress {
    display: none;
}

.loader-container .loading-progress {
    z-index: 2000;
    position: fixed;
    height: 10px;
    width: 10px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loader-container i {
    color: #f8ac59;
    opacity: 0.8;
}

.loader-container .well {
    width: 250px;
    margin-left: -125px;
    text-align: center;
    box-shadow: 0 0 30px #5a5858;
    border: none;
}

.loader-container i {
    color: inherit;
}

panel-body > .loading-progress {
    font-size: 40px;
}

.loading-progress img {
    width: 64px;
    height: 64px
}

/***************************** GENERALES ********************************/
.logo {
    width: 191px;
    height: 110px;
}

input + .input-right-icon {
    float: right;
    position: relative;
    margin-right: 7px;
    margin-top: -23px;
    z-index: 2;
    opacity: 0.7;
}

input + span.input-right-icon:hover {
    opacity: 1;
    cursor: pointer;
}
/*
 Nota: Este pseudoelemento se utiliza en internet explorer para aplicar estilos al botón de toogle password que pone IE por defecto.
 Ver: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-reveal
*/
.password::-ms-reveal {
    display: none !important;
}
/*
 Nota: Este pseudoelemento se utiliza en internet explorer para aplicar estilos al botón "limpiar campo" que pone IE por defecto.
 Ver: https://developer.mozilla.org/es/docs/Web/CSS/::-ms-clear
*/
.password::-ms-clear {
    display: none !important;
}

input:-webkit-autofill, input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

input[type='text'], input[type='tel'], input[type='email'], input[type='password'], input[type='number'], div.fake-input {
    border: solid 1px #0094b8;
    color: #0094b8;
    padding-left: 15px;
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #0094b8 !important;
}

input::-moz-placeholder { /* Firefox 19+ */
    color: #0094b8 !important;
}

input:-ms-input-placeholder { /* IE 10+ */
    color: #0094b8 !important;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #0094b8 !important;
}

.gest-panel {
    height: 100%;
}

.input-group-addon {
    color: #0094b8;
}

div.fake-input {
    height: 34px;
    line-height: 2;
}

.strong.divider {
    height: 3px;
    background-color: #0094b8;
}

#txaNuevaSugerencia {
    height: 250px;
}

textarea {
    padding: 15px 15px 15px 15px;
}

a:hover {
    color: #333366;
}

.v-scrollable {
    overflow-x: hidden;
    overflow-y: auto;
}
label.idioma
{
    margin-bottom:0;
}
#tituloSeccion
{
    font-size:1em;
}

.popup-politicas
{
    max-height: 50vh;
    overflow-y: auto;
    font-size: 10px;
    margin-top: -15px;
    margin-left: -10px;
    margin-right: -19px;
    padding-right: 9px;
}
.popup-politicas p
{
    font-size:12px;
}
.scroll-down-botton
{
    color:#399ACA;
    zoom:1;
}
.scroll-down-botton:hover
{
    color:#377AAA;
    -webkit-transition: color 1000ms linear, zoom:1.3 1000ms linear;
    -moz-transition: color 1000ms linear, zoom:1.3 1000ms linear;
    -ms-transition: color 1000ms linear, zoom:1.3 1000ms linear;
    transition: color 1000ms linear, zoom:1.3 1000ms linear;

}




/***************************** CABECERA ************************************/
.navbar.navbar-fixed-top {
    height: 110px;
    border: 0 !important;
    z-index: 1;
}
.navbar.navbar-fixed-top a {
    text-decoration: none;
}
#bienvenidaMundoAzul {
    margin-top: 52px;
}
#seccionUsuario {
    margin-top: 45px;
    display: block;
}
#seccionUsuario .social{
    padding-top:7px;
}

/**************************** MENÚ LATERAL *********************************/
.navbar-static-side {
    z-index: 1;
}

.navbar-default.fixed {
    position: fixed;
}

.punto-de-menu {
    padding-left: 0;
    padding-right: 0;
}

.punto-de-menu .degradado-l-d {
    width: 100%;
    height: 75px;
    text-transform: uppercase;
    text-align: center;
    font-size: 19px;
    padding-top: 24px;
    margin-top: -74px;
    opacity: 0.9;
}

.punto-de-menu img {
    width: 100%;
}

.punto-de-menu label:hover {
    cursor:pointer;
}

#side-menu li.active {
    border-left-width: 0;
}

#side-menu img {
    display: none
}

#side-menu a {
    padding: 0;
}

#side-menu li.active {
    margin-top: 0;
    font-weight: bold;
}

#side-menu li.active div {
    font-weight: 500;
}

#side-menu li {
    margin-top: 74px;
}

#side-menu li.active img {
    display: block;
}
.navbar-default.navbar-static-side
{
    overflow-y:auto;
}
/*
    Si ponemos la clase side-menu-collapsed al body, se colapsa el menú lateral.
*/
body.side-menu-collapsed #page-wrapper {
    margin-left: 0;
}

.side-menu-collapsed .navbar-default {
    display: none;
}

/*************************** MENÚ HORIZONTAL *******************************/
#menu-horizontal {
    display: none;
    width: 100%;
    background-color: white;
    height: auto;
    overflow: hidden;
}

.side-menu-collapsed #menu-horizontal {
    display: block;
}

/********************************* TABLAS **********************************/
.dataTables_wrapper {
    margin-right: -15px;
}

table {
    border-bottom-width: 0 !important;
}

table.hover:hover {
    cursor: pointer;
}

table.dataTable thead {
    background-color: #484848;
    width: 100%;
}

table.dataTable thead th {
    border-bottom-width: 0;
    color: white;
    background-color: #484848;
    font-weight: 300;
    padding-left: 10px;
    text-transform: uppercase;
}

table.dataTable tbody td {
    border-top: solid 0px #f3f3f3;
    padding-top: 1px;
    padding-bottom: 1px;
    border-bottom: solid 1px #f3f3f3;
}

table.transparente tbody tr {
    background-color: transparent;
}

table i.fa {
    color: #0066cc;
    margin-right: 7px;
}

table td button {
    margin-right: 7px;
}

table.dataTable thead th:first-child, td:not(.tdCheckboxes):first-child, .invisibleHead div:first-child {
    padding-left: 15px;
}

.invisibleHead div:last-child {
    margin-left: -15px;
    padding-left: 25px;
}
/*#principalSugerencias .invisibleHead div:last-child {
    margin-left: -31px;
    padding-left: 41px;
}*/
.row.DTTTFooter {
    margin-right: 0;
    margin-left: 0;
}

.dataTables_length {
    display: none;
}

.gestagua_dataTable_toolbar {
    position: absolute;
    right: 0px;
    top: -7px;
}

table.dataTable tbody h1, table.dataTable tbody h2, table.dataTable tbody h3 {
    margin-top: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #111 !important;
    background: white;
    border: none;
}

.invisibleHead {
    position: fixed;
    top: 125px;
    z-index: 1;
}

.invisibleHead div {
    float: left;
    background-color: #494949;
    color: white;
    text-transform: uppercase;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 18px;
}

/***************************** GRAFICOS ***********************************/
.grafico {
    margin-left: auto;
    margin-right: auto;
}

.grafico .highcharts-plot-band {
    fill: white;
    fill-opacity: 1;
    stroke: white;
    stroke-width: 10;
}

.grafico[data-html-id='graficoConsumosPorContrato'] .highcharts-plot-band {
    fill: white;
    fill: #f3f3f3;
}

.grafico .highcharts-color-0 {
    fill: #3399cc;
}

.grafico .highcharts-color-1 {
    stroke: #333366;
}

.grafico .highcharts-color-1 path {
    stroke: #333366;
    stroke-width: 1px;
}

.grafico.pie .highcharts-color-0, .grafico.pie .highcharts-color-0 .highcharts-point {
    fill: #0f487f;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-1, .grafico.pie .highcharts-color-1 .highcharts-point {
    fill: #346da4;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-2, .grafico.pie .highcharts-color-2 .highcharts-point {
    fill: #5891c8;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-3, .grafico.pie .highcharts-color-3 .highcharts-point {
    fill: #7cb5ec;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-4, .grafico.pie .highcharts-color-4 .highcharts-point {
    fill: #a0d9ff;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-5, .grafico.pie .highcharts-color-5 .highcharts-point {
    fill: #c4fdff;
    stroke: #ffffff;
}

.grafico.pie .highcharts-color-6, .grafico.pie .highcharts-color-6 .highcharts-point {
    fill: #e9ffff;
    stroke: #ffffff;
}

.grafico .color-grafico-danger {
    fill: #96191B;
}

.grafico .color-grafico-dgray {
    fill: #999999;
}


.grafico.facturas .highcharts-yaxis-labels > text:last-child {
    display: none;
}

.grafico.facturas .highcharts-yaxis-grid > .highcharts-grid-line:last-child {
    display: none;
}

.highcharts-plot-band-label {
    fill: #0094b8;
}

.highcharts-plot-band-label .plotBandInner {
    text-align: right;
    padding-top: 10px;
    color: #0066cc;
    font-size: 0.9em;
}

.highcharts-grid-line {
    stroke-dasharray: 5;
}

.highcharts-navigator {
    fill: white;
}
/***************************** MODAL *************************************/
.modal {
    overflow-y: auto;
}

.modal-header h4{
  font-weight: bolder;
  color:white;
}
.modal-header{
  background-color:#3999C9;
  color:white;
}
.modal-message .modal-dialog {
    /*width: 370px !important;*/
    width: 370px;
}

.modal-dialog.ui-draggable {
    margin-top: 3px;
}

.modal-message .modal-dialog .modal-content > .modal-body {
    padding: 0;
}

.modal-primary .modal-header {
    border-color: #07549c;
}

.modal-width-50 .modal-dialog {
    width: 50%;
}

.modal-width-40 .modal-dialog {
    width: 40%;
}

.modal-width-45 .modal-dialog {
    width: 45%;
}

.modal-width-60 .modal-dialog {
    width: 60%;
}

.modal-width-70 .modal-dialog {
    width: 70%;
}

.modal-width-80 .modal-dialog {
    width: 80%;
}

.modal-width-85 .modal-dialog {
    width: 85%;
}

.modal-width-95 .modal-dialog {
    width: 95%;
}

.modal-width-20 .modal-dialog {
    width: 20%;
}

.modal-width-15 .modal-dialog {
    width: 15%;
}

.modal-width-10 .modal-dialog {
    width: 10%;
}

.modal-width-30 .modal-dialog {
    width: 30%;
}


.modal-dialog .modal-body:not(.no-max-height) {
    /*max-height: 80vh;*/
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-dialog .modal-body .e-pane:not(.tabbable) {
    max-height: 100vh;
    /*
    overflow-y: hidden;
    */
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-dialog .modal-body .tab-content:not(.no-max-height) {
    max-height: 67vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.col-md-5ths {
    width: 20%;
    float: left;
}

.col-md-3ths {
    width: 50%;
    float: left;
}


.tab-content.no-max-height {
    overflow-x: hidden;
}

.modal-no-padding-top .modal-dialog .modal-content .modal-body {
    padding-top: 0;
}

.ui-draggable .modal-header:hover {
    cursor: move;
}
.modal-dialog.backdrop-modal
{
  top:0;
}
/**************************** SELECT2 ************************************/
/*
    Nota:
    La versión 4 de los select2 no funciona correctamente si el select está dentro de un modal de bootstrap 3.
    Sobrescribimos los z-index de ambas clases para corregir el funcionamiento.
    Ver:http://www.unknownerror.org/opensource/select2/select2/q/stackoverflow/18487056/select2-doesn39t-work-when-embedded-in-a-bootstrap-modal
*/
.select2-close-mask {
    z-index: 2099;
}

.select2-dropdown {
    z-index: 3051;
}

.select2-results__option {
    padding-left: 8px;
}

.select2-container--default, .select2-container--default .select2-selection--single, li.select2-results__option, li.select2-results__option.select2-results__option__highlighted, .select2-dropdown.select2-dropdown--below {
    border-radius: 0px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: white;
    color: inherit;
    font-weight: 600;
    border-left: solid 4px #3399cc;
    padding-left: 4px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: white;
}

.select-inner-element {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.select2.hidden + .select2.select2-container{
    display:none;
}
/****************************** PANELES **********************************/
.well {
    border-radius: 0;
}

.panelCabeceraSeccion {
    background-color: #cccccc;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 75px;
    padding-top: 22px;
}

.panelCabeceraSeccion.h2x {
    height: 125px;
    padding-top: 15px;
}

.panelCabeceraSeccion h1 {
    margin: 0;
    text-transform: uppercase;
}

.panelSelectorContrato {
    width: 100%;
    margin-top: 30px;
}
/*************************** DATE TIME PICKER *********************************/
#heading.paper-date-picker, .day-item.selected.paper-calendar {
    background: #0094b8 !important;
}

.style-scope.paper-date-picker {
    color: white;
}

input.datepicker[readonly] {
    background-color: white;
}

input.datepicker[readonly]:hover {
    cursor: pointer;
}
/*************************** DIALOGOS *********************************/
.paper-dialog-0 .buttons {
    color: #0094b8 !important;
}
/**************************** CAROUSEL **********************************/
.slick-slide {
    background-color: #f3f3f3;
    padding: 0;
}

.slick-slide .subbox {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.slick-slide .subbox.no-margin {
    margin-left: 0;
    margin-right: 0;
    padding-left: 30px;
    padding-right: 30px;
}

.slick-slide hr {
    border-color: black;
}

.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #cccccc !important;
}
.slick-prev {
    left: -45px;
}
/*************************** STACKED BOXES *********************************/
.stacked-box {
    height: 65px;
}

.stackedbox-icon {
    width: 20%;
    max-width: 65px;
    height: 100%;
    color: white;
    background-color: #bbbbbb;
    padding-top: 18px;
    float: left;
}

.stackedbox-message {
    width: 80%;
    height: 100%;
    float: left;
    padding: 8px;
}

.stackedbox-icon.warning {
    background-color: #9b0416;
}
/*********** ICONOS **********/
.fa-2x {
    font-size: 1.7em;
}
/*************** POLYMER **************/
#toggleBar {
    opacity: 1;
}

.toggle-label {
    margin-left: 15px;
}
iron-overlay-backdrop {
    border: solid 1px #101010;
}
/****** ESTILOS DEL BOOTSTRAP VALIDATOR ********/
/*to hide select2 arrow on error or success*/
/*.has-success span.select2-arrow,.has-error span.select2-arrow {
    opacity: 0;
}*/
.has-error, .has-error > a, input.has-error {
    background-color: rgba(228, 111, 97, 0.1) !important;
}

.has-error::-webkit-input-placeholder {
    color: rgb(228, 111, 97) !important;
}

.has-error::-moz-placeholder {
    color: rgb(228, 111, 97) !important;
}
/* firefox 19+ */
.has-error:-ms-input-placeholder {
    color: rgb(228, 111, 97) !important;
}

.has-warning .input-group-addon {
    border-color: #fecf49 !important;
}

.has-error .input-group-addon {
    border-color: #e7bebe !important;
}

b.has-error, td.has-error {
    background-color: transparent !important;
    color: rgb(228, 111, 97) !important;
}

input.has-error {
    color: rgb(228, 111, 97) !important;
}

.has-warning {
    color: #f4b400;
}
/* ie */
.has-errorinput:-moz-placeholder {
    color: rgb(228, 111, 97) !important;
}

.select2-container .select2-choice .select2-arrow {
    background-color: transparent;
}

.form-group.has-success input, .input-group.has-success input, .form-group.has-success select, .input-group.has-success select, .form-group.has-success textarea, .input-group.has-success textarea {
    color: rgb(133, 133, 133);
}

.form-group.has-success a.select2-choice, .input-group.has-success a.select2-choice, .form-group.has-error .select2-arrow, .input-group.has-error .select2-arrow {
    border-color: #b0dd9c;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
}

.form-group.has-error a.select2-choice, .input-group.has-error a.select2-choice, .form-group.has-error .select2-arrow, .input-group.has-error .select2-arrow {
    border-color: #e7bebe;
    color: #e46f61;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #fffafa;
}
/************************ HELPERS PROPIOS *******************************/

/************** Paddings y Márgenes********************/
.no-padding { padding: 0 !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-right { padding-right: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-margin { margin: 0 !important; }
.no-margin-left { margin-left: 0 !important; }
.no-margin-right { margin-right: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.p-t-xs { padding-top: 10px; }
.p-r-xs { padding-right: 10px; }
.p-l-xs { padding-left: 10px; }
.p-b-xs { padding-bottom: 10px; }
.p-t-sm { padding-top: 15px; }
.p-r-sm { padding-right: 15px; }
.p-l-sm { padding-left: 15px; }
.p-b-sm { padding-bottom: 15px; }
.p-t-md { padding-top: 25px; }
.p-r-md { padding-right: 25px; }
.p-l-md { padding-left: 25px; }
.p-b-md { padding-bottom: 25px; }
.p-t-lg { padding-top: 30px; }
.p-r-lg { padding-right: 30px; }
.p-l-lg { padding-left: 30px; }
.p-b-lg { padding-bottom: 30px; }

/***********  Bordes *******************/
.border-right-01 {
    border-right-style: solid;
    border-right-width: 1px;
}

.border-left-01 {
    border-left-style: solid;
    border-left-width: 1px;
}

.border-top-01 {
    border-top-style: solid;
    border-top-width: 1px;
}

.border-bottom-01 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

/***********  Centrados ******************************/
.valign-middle {
    vertical-align: middle;
}

.valign-table-display {
    display: table;
}

.valign-table-display > * {
    display: table-cell;
    vertical-align: middle;
}

.centered {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.inline {
    display: inline !important;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

/************* Imágenes   **********/
img.responsive {
    height: auto;
    width: 100%;
}
/************** Posicionamiento *************/
.absolute {
    position: absolute;
}
/******** Labels **********/
.lbl-gest {
    color: white;
    background-color: #339933;
    text-transform: uppercase;
    border-radius: 0;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
}

td .lbl-gest {
    width: 105px;
    text-align: left;
}
/******* Botones ********/
.btn-gest {
    color: white;
    background-color: #339933;
    text-transform: uppercase;
    border-radius: 0;
}

.btn-gest:hover {
    color: white;
}

.btn-gest:focus {
    color: white;
}

.btn-rangeselector {
    background-color: #f7f7f7;
    color: black;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none !important;
}

.btn-rangeselector.active {
    background-color: #e6ebf5;
    font-weight: bold;
}
.btn-scroll-down
{
    background-color: #0066cc;
    color:white;
}
.scroll-down-botton-container
{
  text-align: center;
  border:solid 2px red;
}
.btn-scroll-down:hover, .btn-scroll-down:active,  .btn-scroll-down:focus
{
    color:white;
}
/********************* Colores ***********************/
.bg-white {
    background: #ffffff;
}

.bg-transparent {
    background: transparent;
}

.bg-gest-lblue {
    background-color: #3399cc;
}

.bg-gest-mblue {
    background-color: #0066cc;
}

.bg-gest-dblue {
    background-color: #333366;
}

.bg-gest-lgray {
    background-color: #f3f3f3;
}

.bg-gest-mgray {
    background-color: #cccccc;
}

.bg-gest-dgray {
    background-color: #999999;
}

.bg-gest-mgreen {
    background-color: #339933;
}

.bg-gest-mred {
    background-color: #9b0416;
}

.text-white {
    color: #ffffff;
}

.text-gest-lblue {
    color: #3399cc;
}

.text-gest-mblue {
    color: #0066cc;
}

.text-gest-dblue {
    color: #333366;
}

.text-gest-lgray {
    color: #f3f3f3;
}

.text-gest-mgray {
    color: #cccccc;
}

.text-gest-dgray {
    color: #999999;
}

.text-gest-mgreen {
    color: #339933;
}

.text-gest-mred {
    color: #9b0416;
}
.text-gest-mbrown {
    color:#af4c04;
}
.border-gest-lblue {
    border: 1px solid #3399cc;
}

.border-gest-mblue {
    border: 1px solid #0066cc;
}

.border-gest-dblue {
    color: #333366
}

.border-gest-lgray {
    color: #f3f3f3;
}

.border-gest-mgray {
    color: #cccccc;
}

.border-gest-dgray {
    color: #999999;
}

.degradado-l-d {
    background-image: -moz-linear-gradient(right, rgba(51, 51, 102, 1), rgba(51, 153, 204, 1));
    background-image: -ms-linear-gradient(right, rgba(51, 51, 102, 1), rgba(51, 153, 204, 1));
    background-image: -webkit-linear-gradient(right, rgba(51, 51, 102, 1), rgba(51, 153, 204, 1));
    background-image: -o-linear-gradient(right, rgba(51, 51, 102, 1), rgba(51, 153, 204, 1));
    background-image: linear-gradient(right, rgba(51, 51, 102, 1), rgba(51, 153, 204, 1));
    background-repeat: repeat-y;
}

.degradado-d-l {
    background-image: -moz-linear-gradient(right, rgba(51, 153, 204, 1), rgba(51, 51, 102, 1));
    background-image: -ms-linear-gradient(right, rgba(51, 153, 204, 1), rgba(51, 51, 102, 1));
    background-image: -webkit-linear-gradient(right, rgba(51, 153, 204, 1), rgba(51, 51, 102, 1));
    background-image: -o-linear-gradient(right, rgba(51, 153, 204, 1), rgba(51, 51, 102, 1));
    background-image: linear-gradient(right, rgba(51, 153, 204, 1), rgba(51, 51, 102, 1));
    background-repeat: repeat-y;
}

/******************* Opacidad ***********************/
.opactity-05 {
    opacity: 0.5;
}
/***************** Alturas ****************/
.full-height {
    height: 100%;
}

.mh-25 {
    min-height: 25px;
}
/***************** Anchos *******************/
.full-width {
    width: 100%;
}

.auto-width {
    width: auto;
}
/**************** hovers *******************/
.clickable:hover {
    cursor: pointer;
}
/*************** anchors ******************/
.no-text-decoration {
    text-decoration: none;
}

.hover-text-underline:hover {
    text-decoration: underline;
}

.hover-white:hover {
    color: white;
}


/********************************* MEDIA QUERIES ********************************************
    Nota: Vamos a utilizar la distribución por anchura que utiliza Bootstrap.
    Ver: http://getbootstrap.com/css/#grid-options

    - Extra small devices: (<768px) --> .col-xs-
    - Small devices: (≥768px) --> -col-sm-
    - Medium devices: (≥992px) --> .col-md-
    - Lage devices:  (≥1200px) --> .col-lg-

    Para nosotros los dispositivos los identificaremos según:
    - Móviles (<4") --> (<480px de ancho de pantalla)
    - Móviles (≤7") --> (<768px de ancho de pantalla)
    - Tablets (≤8.9") --> (<992px de ancho de pantalla)
    - Tablets (≥8.9") --> (<1200px de ancho de pantalla)
    - Pequeños portátiles --> (<1440px de ancho de pantalla)
    - Pantallas grandes --> (>1440px de ancho de pantalla)

    Importante:
    Vamos a configurar las media queries para que los estilos se apliquen en tamaño de dispositivo descendentemente, eso es que a menos
    que un estilo se sobrescriba en un móvil, se aplicará el que esté aplicado en los estilos de la tablet.



/*********************************************************************************************************************
    Pequeños portátiles
**********************************************************************************************************************/
@media (max-height: 1440px) and (orientation:portrait), (max-width: 1440px) and (orientation:landscape) {
    #debug1 {
        background: white;
        border: solid 3px black;
    }
    #seccionUsuario .seccionIdiomas, #seccionUsuario .social {
        width: 100%;
        text-align: center;
    }
    #seccionUsuario .seccionIdiomas{
        margin-top:-5px;
    }
    #seccionUsuario .social
    {
        padding-top:0;
    }
    .highcharts-plot-band-label .plotBandInner {
        display: none;
    }
    .navbar-static-side
    {
        width:300px;
    }
    #page-wrapper{
        margin-left:300px;
    }
    .m-xs-laptop { margin: 5px; }
    .m-t-xs-laptop { margin-top: 5px; }
    .m-r-xs-laptop { margin-right: 5px; }
    .m-b-xs-laptop { margin-bottom: 5px; }
    .m-l-xs-laptop { margin-left: 5px; }
    .p-xs-laptop { 	padding: 10px; }
    .p-t-xs-laptop { padding-top: 5px; }
    .p-r-xs-laptop { padding-right: 5px; }
    .p-b-xs-laptop { padding-bottom: 5px; }
    .p-l-xs-laptop { padding-left: 5px; }
    .m-sm-laptop { margin: 10px; }
    .m-t-sm-laptop { margin-top: 10px; }
    .m-r-sm-laptop { margin-right: 10px; }
    .m-b-sm-laptop { margin-bottom: 10px; }
    .m-l-sm-laptop { margin-left: 10px; }
    .p-sm-laptop { padding: 15px; }
    .p-t-sm-laptop { padding-top: 15px; }
    .p-r-sm-laptop { padding-right: 15px; }
    .p-b-sm-laptop { padding-bottom: 15px; }
    .p-l-sm-laptop { padding-left: 15px; }
    .m-md-laptop { margin: 20px; }
    .m-t-md-laptop { margin-top: 20px; }
    .m-r-md-laptop { margin-right: 20px; }
    .m-b-md-laptop { margin-bottom: 20px; }
    .m-l-md-laptop { margin-left: 20px; }
    .p-md-laptop { padding: 25px; }
    .p-t-md-laptop { padding-top: 25px; }
    .p-r-md-laptop { padding-right: 25px; }
    .p-b-md-laptop { padding-bottom: 25px; }
    .p-l-md-laptop { padding-left: 25px; }
    .m-lg-laptop { margin: 30px; }
    .m-t-lg-laptop { margin-top: 30px; }
    .m-r-lg-laptop { margin-right: 30px; }
    .m-b-lg-laptop { margin-bottom: 30px; }
    .m-l-lg-laptop { margin-left: 30px; }
    .p-lg-laptop { padding: 30px; }
    .p-t-lg-laptop { padding-top: 30px; }
    .p-r-lg-laptop { padding-right: 30px; }
    .p-b-lg-laptop { padding-bottom: 30px; }
    .p-l-lg-laptop { padding-left: 30px; }
    .no-padding-laptop { padding: 0 }
    .no-padding-left-laptop { padding-left: 0 }
    .no-padding-right-laptop { padding-right: 0 }
    .no-padding-bottom-laptop { padding-bottom: 0 }
    .no-padding-top-laptop { padding-top: 0 }
    .no-margin-laptop { margin: 0 }
    .no-margin-left-laptop { margin-left: 0 }
    .no-margin-right-laptop { margin-right: 0 }
    .no-margin-bottom-laptop { margin-bottom: 0 }
    .no-margin-top-laptop { margin-top: 0 }
}

/*********************************************************************************************************************
    Si el dispositivo es tipo Tablet Grande, de 8.9"
    Dispositivos probados: Nexus 9, Ipad Air 2
**********************************************************************************************************************/
@media (max-height: 1200px) and (orientation:portrait), (max-width: 1200px) and (orientation:landscape) {
    #debug1 {
        background: #610B0B
    }

    img.logo {
        width: 94px;
        height: 50px
    }
    body.login img.logo, body.registro img.logo {
        width: 191px;
        height: 110px;
    }
    /* Altura de la cabecera principal */
    .navbar.navbar-fixed-top {
        height: 25px;
    }

    /* Cuando el menú de la izquierda esté en pequeño no queremos que se muestren los textos */
    body.mini-navbar .punto-de-menu label {
        display: none;
    }

    /* Color y anchos del menu de la izquierda. */
    body .navbar-static-side, body.body-small .navbar-static-side {
        display: block;
        width: 280px;
        background-image: -moz-linear-gradient(right, rgba(57,77,125, 1), rgba(54, 52, 100, 1));
        background-image: -ms-linear-gradient(right, rgba(57,77,125, 1), rgba(54, 52, 100, 1));
        background-image: -webkit-linear-gradient(right, rgba(57,77,125, 1), rgba(54, 52, 100, 1));
        background-image: -o-linear-gradient(right, rgba(57,77,125, 1), rgba(54, 52, 100, 1));
        background-image: linear-gradient(right, rgba(57,77,125, 1), rgba(54, 52, 100, 1));
        background-repeat: repeat-y;
    }

    body.mini-navbar .navbar-static-side {
        width: 51px;
        background-image: -moz-linear-gradient(right, rgba(55,57,105, 1), rgba(54, 52, 100, 1));
        background-image: -ms-linear-gradient(right, rgba(55,57,105, 1), rgba(54, 52, 100, 1));
        background-image: -webkit-linear-gradient(right, rgba(55,57,105, 1), rgba(54, 52, 100, 1));
        background-image: -o-linear-gradient(right, rgba(55,57,105, 1), rgba(54, 52, 100, 1));
        background-image: linear-gradient(right, rgba(55,57,105, 1), rgba(54, 52, 100, 1));
    }

    li.punto-de-menu.active {
        background: #469AC9;
    }

    /* Margenes del contenedor principal en función de si el menú de la izquierda está o no colapsado */
    body:not(.mini-navbar) #wrapper #page-wrapper {
        margin-left: 51px;
    }

    body.mini-navbar #wrapper #page-wrapper {
        margin-left: 51px;
    }

    /*.panelCabeceraSeccion, .panelCabeceraSeccion.h2x{
        background: white;
        min-height: 0px;
        height: 50px;
    }*/
    .panelCabeceraSeccion, .panelCabeceraSeccion.h2x {
        background: white;
        min-height: 0px;
        height: 50px;
    }
    .panelSelectorContrato
    {
        margin-top:0;
    }
    /* Aunque estemos en el Dashboard, queremos que se muestre el menú de la izquierda */
    .side-menu-collapsed .navbar-default {
        display: block;
    }

    /* Elementos del menú de la izquierda */
    #side-menu li {
        margin-top: 0;
    }

    table.dataTable thead th, .invisibleHead div {
        color: black;
        background-color: #CCCCCC;
    }


    .v-scrollable, #bodySeccionPrincipal {
        height: auto !important;
    }

    #side-menu i.fa {
        margin-right: 15px;
    }

    body.mini-navbar #side-menu i.fa {
        margin-right: 0;
    }

    body.mini-navbar #side-menu div {
        text-align: center;
    }

    #side-menu i, #side-menu label {
        color: white;
        font-weight: 300;
    }

    /* No queremos que se muestre el selector del idioma si el menú de la izquierda está colapsado. */
    body.mini-navbar .selectorIdioma {
        display: none;
    }

    body .selectorIdioma div {
        padding: 6px 4px 4px 11px;
    }

    /* tooglable que colapsa el ménú */
    .colapsador {
        margin-top: 10px;
    }

    .colapsador:hover, #colapsador:active, #colapsador:visited {
        color: white;
    }

    /* Margen del contenedor principal en función de la altura de la cabecera */
    body.fixed-nav #wrapper .navbar-static-side, body.fixed-nav #wrapper #page-wrapper {
        margin-top: 50px;
    }

    .footer {
        display: none;
    }

    .m-xs-tablet { margin: 5px; }
    .m-t-xs-tablet { margin-top: 5px; }
    .m-r-xs-tablet { margin-right: 5px; }
    .m-b-xs-tablet { margin-bottom: 5px; }
    .m-l-xs-tablet { margin-left: 5px; }
    .p-xs-tablet { 	padding: 10px; }
    .p-t-xs-tablet { padding-top: 5px; }
    .p-r-xs-tablet { padding-right: 5px; }
    .p-b-xs-tablet { padding-bottom: 5px; }
    .p-l-xs-tablet { padding-left: 5px; }
    .m-sm-tablet { margin: 10px; }
    .m-t-sm-tablet { margin-top: 10px; }
    .m-r-sm-tablet { margin-right: 10px; }
    .m-b-sm-tablet { margin-bottom: 10px; }
    .m-l-sm-tablet { margin-left: 10px; }
    .p-sm-tablet { padding: 15px; }
    .p-t-sm-tablet { padding-top: 15px; }
    .p-r-sm-tablet { padding-right: 15px; }
    .p-b-sm-tablet { padding-bottom: 15px; }
    .p-l-sm-tablet { padding-left: 15px; }
    .m-md-tablet { margin: 20px; }
    .m-t-md-tablet { margin-top: 20px; }
    .m-r-md-tablet { margin-right: 20px; }
    .m-b-md-tablet { margin-bottom: 20px; }
    .m-l-md-tablet { margin-left: 20px; }
    .p-md-tablet { padding: 25px; }
    .p-t-md-tablet { padding-top: 25px; }
    .p-r-md-tablet { padding-right: 25px; }
    .p-b-md-tablet { padding-bottom: 25px; }
    .p-l-md-tablet { padding-left: 25px; }
    .m-lg-tablet { margin: 30px; }
    .m-t-lg-tablet { margin-top: 30px; }
    .m-r-lg-tablet { margin-right: 30px; }
    .m-b-lg-tablet { margin-bottom: 30px; }
    .m-l-lg-tablet { margin-left: 30px; }
    .p-lg-tablet { padding: 30px; }
    .p-t-lg-tablet { padding-top: 30px; }
    .p-r-lg-tablet { padding-right: 30px; }
    .p-b-lg-tablet { padding-bottom: 30px; }
    .p-l-lg-tablet { padding-left: 30px; }
    .no-padding-tablet { padding: 0 }
    .no-padding-left-tablet { padding-left: 0 }
    .no-padding-right-tablet { padding-right: 0 }
    .no-padding-bottom-tablet { padding-bottom: 0 }
    .no-padding-top-tablet { padding-top: 0 }
    .no-margin-tablet { margin: 0 }
    .no-margin-left-tablet { margin-left: 0 }
    .no-margin-right-tablet { margin-right: 0 }
    .no-margin-bottom-tablet { margin-bottom: 0 }
    .no-margin-top-tablet { margin-top: 0 }
    .slick-slider {
        width: 100%;
    }

    button.slick-arrow {
        display: none;
    }

    .highcharts-xaxis-labels {
        display: none;
    }

    .highcharts-xaxis {
        display: none;
    }

    div.fakeInput {
        height: 36px !important;
        border: solid 1px #e5e6e7 !important;
    }


}
/*
    Tablet en vertical
*/
@media (max-height: 1200px) and (orientation:portrait) {
    #debug {
        background: #FF0000;
    }
}
/*
    Tablet en horizontal
*/
@media (max-width: 1200px) and (orientation:landscape) {
    #debug {
        background: #F78181;
    }
}


/*
	Tablet pequeña (7")
    Dispositivos probados: Nexus 7
*/
@media (max-height: 992px) and (orientation:portrait), (max-width: 992px) and (orientation:landscape) {
    #debug1 {
        background: #0101DF;
    }
    .m-xs-smalltablet { margin: 5px; }
    .m-t-xs-smalltablet { margin-top: 5px; }
    .m-r-xs-smalltablet { margin-right: 5px; }
    .m-b-xs-smalltablet { margin-bottom: 5px; }
    .m-l-xs-smalltablet { margin-left: 5px; }
    .p-xs-smalltablet { 	padding: 10px; }
    .p-t-xs-smalltablet { padding-top: 5px; }
    .p-r-xs-smalltablet { padding-right: 5px; }
    .p-b-xs-smalltablet { padding-bottom: 5px; }
    .p-l-xs-smalltablet { padding-left: 5px; }
    .m-sm-smalltablet { margin: 10px; }
    .m-t-sm-smalltablet { margin-top: 10px; }
    .m-r-sm-smalltablet { margin-right: 10px; }
    .m-b-sm-smalltablet { margin-bottom: 10px; }
    .m-l-sm-smalltablet { margin-left: 10px; }
    .p-sm-smalltablet { padding: 15px; }
    .p-t-sm-smalltablet { padding-top: 15px; }
    .p-r-sm-smalltablet { padding-right: 15px; }
    .p-b-sm-smalltablet { padding-bottom: 15px; }
    .p-l-sm-smalltablet { padding-left: 15px; }
    .m-md-smalltablet { margin: 20px; }
    .m-t-md-smalltablet { margin-top: 20px; }
    .m-r-md-smalltablet { margin-right: 20px; }
    .m-b-md-smalltablet { margin-bottom: 20px; }
    .m-l-md-smalltablet { margin-left: 20px; }
    .p-md-smalltablet { padding: 25px; }
    .p-t-md-smalltablet { padding-top: 25px; }
    .p-r-md-smalltablet { padding-right: 25px; }
    .p-b-md-smalltablet { padding-bottom: 25px; }
    .p-l-md-smalltablet { padding-left: 25px; }
    .m-lg-smalltablet { margin: 30px; }
    .m-t-lg-smalltablet { margin-top: 30px; }
    .m-r-lg-smalltablet { margin-right: 30px; }
    .m-b-lg-smalltablet { margin-bottom: 30px; }
    .m-l-lg-smalltablet { margin-left: 30px; }
    .p-lg-smalltablet { padding: 30px; }
    .p-t-lg-smalltablet { padding-top: 30px; }
    .p-r-lg-smalltablet { padding-right: 30px; }
    .p-b-lg-smalltablet { padding-bottom: 30px; }
    .p-l-lg-smalltablet { padding-left: 30px; }
    .no-padding-smalltablet { padding: 0 }
    .no-padding-left-smalltablet { padding-left: 0 }
    .no-padding-right-smalltablet { padding-right: 0 }
    .no-padding-bottom-smalltablet { padding-bottom: 0 }
    .no-padding-top-smalltablet { padding-top: 0 }
    .no-margin-smalltablet { margin: 0 }
    .no-margin-left-smalltablet { margin-left: 0 }
    .no-margin-right-smalltablet { margin-right: 0 }
    .no-margin-bottom-smalltablet { margin-bottom: 0 }
    .no-margin-top-smalltablet { margin-top: 0 }

    body .navbar-static-side, body.body-small .navbar-static-side {
        background-image: -moz-linear-gradient(right, rgba(58,85,133, 1), rgba(54, 52, 100, 1));
        background-image: -ms-linear-gradient(right, rgba(58,85,133, 1), rgba(54, 52, 100, 1));
        background-image: -webkit-linear-gradient(right, rgba(58,85,133, 1), rgba(54, 52, 100, 1));
        background-image: -o-linear-gradient(right, rgba(58,85,133, 1), rgba(54, 52, 100, 1));
        background-image: linear-gradient(right, rgba(58,85,133, 1), rgba(54, 52, 100, 1));
        background-repeat: repeat-y;
    }

}
/*
    Tablet pequeña (7") en vertical
*/
@media (max-height: 992px) and (orientation:portrait) {
    #debug {
        background: #2E64FE;
    }
}
/*
    Tablet pequeña (7") en horizontal
*/
@media (max-width: 992px) and (orientation:landscape) {
    #debug {
        background: #A9D0F5;
    }

}



/******************************************************************************************
    Si el dispositivo es un móvil
*******************************************************************************************/
@media (max-height: 768px) and (orientation:portrait), (max-width: 768px) and (orientation:landscape) {
    #debug1 {
        background: #0B6121;
    }
    body.mini-navbar .navbar-static-side {
        width:0;
    }
    body:not(.mini-navbar) #wrapper #page-wrapper {
        margin-left: 0;
    }
    body.mini-navbar #wrapper #page-wrapper {
        margin-left: 0;
    }

    .full-width-mobile
    {
        width:100%;
    }

    .btn {
        font-size: 12px;
    }

    table.dataTable thead th
    {
        font-size:10px;
    }
    table.dataTable tbody td.tdCheckboxes {
        padding-right: 2px;
    }

    .m-xs-mobile { margin: 5px; }
    .m-t-xs-mobile { margin-top: 5px; }
    .m-r-xs-mobile { margin-right: 5px; }
    .m-b-xs-mobile { margin-bottom: 5px; }
    .m-l-xs-mobile { margin-left: 5px; }
    .p-xs-mobile { 	padding: 10px; }
    .p-t-xs-mobile { padding-top: 5px; }
    .p-r-xs-mobile { padding-right: 5px; }
    .p-b-xs-mobile { padding-bottom: 5px; }
    .p-l-xs-mobile { padding-left: 5px; }
    .m-sm-mobile { margin: 10px; }
    .m-t-sm-mobile { margin-top: 10px; }
    .m-r-sm-mobile { margin-right: 10px; }
    .m-b-sm-mobile { margin-bottom: 10px; }
    .m-l-sm-mobile { margin-left: 10px; }
    .p-sm-mobile { padding: 15px; }
    .p-t-sm-mobile { padding-top: 15px; }
    .p-r-sm-mobile { padding-right: 15px; }
    .p-b-sm-mobile { padding-bottom: 15px; }
    .p-l-sm-mobile { padding-left: 15px; }
    .m-md-mobile { margin: 20px; }
    .m-t-md-mobile { margin-top: 20px; }
    .m-r-md-mobile { margin-right: 20px; }
    .m-b-md-mobile { margin-bottom: 20px; }
    .m-l-md-mobile { margin-left: 20px; }
    .p-md-mobile { padding: 25px; }
    .p-t-md-mobile { padding-top: 25px; }
    .p-r-md-mobile { padding-right: 25px; }
    .p-b-md-mobile { padding-bottom: 25px; }
    .p-l-md-mobile { padding-left: 25px; }
    .m-lg-mobile { margin: 30px; }
    .m-t-lg-mobile { margin-top: 30px; }
    .m-r-lg-mobile { margin-right: 30px; }
    .m-b-lg-mobile { margin-bottom: 30px; }
    .m-l-lg-mobile { margin-left: 30px; }
    .p-lg-mobile { padding: 30px; }
    .p-t-lg-mobile { padding-top: 30px; }
    .p-r-lg-mobile { padding-right: 30px; }
    .p-b-lg-mobile { padding-bottom: 30px; }
    .p-l-lg-mobile { padding-left: 30px; }
    .no-padding-mobile { padding: 0 }
    .no-padding-left-mobile { padding-left: 0 }
    .no-padding-right-mobile { padding-right: 0 }
    .no-padding-bottom-mobile { padding-bottom: 0 }
    .no-padding-top-mobile { padding-top: 0 }
    .no-margin-mobile { margin: 0 }
    .no-margin-left-mobile { margin-left: 0 }
    .no-margin-right-mobile { margin-right: 0 }
    .no-margin-bottom-mobile { margin-bottom: 0 }
    .no-margin-top-mobile { margin-top: 0 }
    body .navbar-static-side, body.body-small .navbar-static-side {
        background-image: -moz-linear-gradient(right, rgba(65,126,173, 1), rgba(54, 52, 100, 1));
        background-image: -ms-linear-gradient(right, rgba(65,126,173, 1), rgba(54, 52, 100, 1));
        background-image: -webkit-linear-gradient(right, rgba(65,126,173, 1), rgba(54, 52, 100, 1));
        background-image: -o-linear-gradient(right, rgba(65,126,173, 1), rgba(54, 52, 100, 1));
        background-image: linear-gradient(right, rgba(65,126,173, 1), rgba(54, 52, 100, 1));
        background-repeat: repeat-y;
    }
    .text-center-mobile {
        text-align:center;
    }
    .text-danger-mobile {
        color: #96191B;
    }
    tr.text-danger-mobile td *:not(i){
        color: #96191B;
    }

    .mobile-modal-width-95 .modal-dialog {
        width: 95%;
    }
}
/*
    Móvil grande (>4")en vertical
*/
@media (max-height: 768px) and (orientation:portrait) {
    #debug {
        background: #31B404;
    }
}

/*
    Móvil grande (>4") en horizontal
*/
@media (max-width: 768px) and (orientation:landscape) {
    #debug {
        background: #9FF781;
    }
}

/*
    Móvil pequeño (<4")
*/
@media (max-height: 480px) and (orientation:portrait), (max-width: 480px) and (orientation:landscape) {
    #debug1 {
        background: #100719;
    }
}

/*
    Móvil pequeño (<4")en vertical
*/
@media (max-height: 480px) and (orientation:portrait) {
    #debug {
        background: #6E6E6E;
    }
}
/*
Móvil pequeño (<4") en horizontal
*/
@media (max-width: 480px) and (orientation:landscape) {
    #debug {
        background: #D8D8D8;
    }
}