:root {
    /* Paleta colores TAP+ */
    --spanish-orange: #EC671C;
    --carrot-orange: #F49716;
    --st-patricks-blue: #1E3581;
    --silver-chalice: #B0B0B0;
    /* Colores complementarios */
    --scarlet: #FD2606;
    --gold-crayola: #FAC987;
    --deep-champagne: #FAD6A5;
    --papaya-whip: #FAEBCC;
    --st-patricks-blue-dark: #1B3075;
    --dark-blue-gray: #556493;
    --y-in-mn-blue: #43548D;
    --french-blue: #0073b7;
    --alice-blue: #F1F3F8;
    --shadow-blue: #7A839F;
    --light-gray: #D2D6DE;
}

html,
body {
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

@media(min-width:768px) {
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        width: 225px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}


.break-word {
    white-space: normal;
    word-wrap: break-word;
}

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

.skin-tap .main-header .navbar {
    background: white;
    color:var(--spanish-orange);
    border-bottom: 1px solid var(--light-gray);
}

.skin-tap .main-header .navbar .nav > li > a {
    color: var(--st-patricks-blue);
}

.skin-tap .main-header .navbar .nav > li > a:hover,
.skin-tap .main-header .navbar .nav > li > a:active,
.skin-tap .main-header .navbar .nav > li > a:focus,
.skin-tap .main-header .navbar .nav .open > a,
.skin-tap .main-header .navbar .nav .open > a:hover,
.skin-tap .main-header .navbar .nav .open > a:focus,
.skin-tap .main-header .navbar .nav > .active > a{
    background-color: var(--alice-blue);
    color: var(--st-patricks-blue);
}

.skin-tap .main-header .navbar .sidebar-toggle {
    color: var(--spanish-orange);
}

.skin-tap .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--alice-blue);
    color: var(--spanish-orange);
}

.skin-tap .main-header .logo,
.skin-tap .main-sidebar {
    background-color: var(--st-patricks-blue);
}

.skin-tap .main-header .logo:hover {
    background-color: rgba(255,255,255,0.1);
}

.skin-tap .main-header li.user-header {
    background: var(--spanish-orange) !important;
    height: 75px !important;
    border: solid 1px var(--spanish-orange);
}

/**
Mejoras responsive a barra de navegación para evitar que se divida en
varias filas cuando hay multiples notificaciones y dificulte el uso del
menú, se forzo a que se muestre en una fila y se hizo dinámico tamaño de
casilla de búsqueda.
*/
.navbar {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.navbar-nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

/* MEJORAS RESPONSIVE FOOTER */
@media screen and (max-width: 600px) {
    .main-footer {
        font-size: 12px;
    }
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    z-index: 5;
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.skin-tap .sidebar-menu > li.header {
    color: white;
    background: var(--st-patricks-blue);
}

.skin-tap .sidebar-menu > li:hover > a,
.skin-tap .sidebar-menu > li.active > a,
.skin-tap .sidebar-menu > li.menu-open > a {
    background: var(--spanish-orange);
}

.skin-tap .sidebar-menu > li.active > a {
    border-left-color: var(--spanish-orange);
}

.skin-tap .sidebar-menu > li > .treeview-menu {
    background: var(--spanish-orange);
}

.skin-tap .sidebar-menu .treeview-menu > li {
    background: var(--spanish-orange);
}

.skin-tap .sidebar-menu .treeview-menu > li > a:hover {
    background: var(--carrot-orange);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.1) inset, 0 -1px 0 0 rgba(255,255,255,0.1) inset;
    color: white;
}

.skin-tap .sidebar-menu .treeview-menu > li.active > a {
    background: var(--carrot-orange);
    color: white;
    font-weight: bold;
}

.skin-tap .main-header li.user-header {
    background: var(--carrot-orange);
}

.skin-tap .sidebar-menu .treeview-menu > li > a {
    color: white;
}

.login-page, .register-page {
    background-color: var(--st-patricks-blue) !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh !important;
    justify-content: center;
    color: white;
}

.login-box-body,
.register-box-body {
    background-color: transparent !important;
    color: white !important;
}

.login-box-body > a,
.register-box-body > a,
.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
    color: var(--silver-chalice);
}

.login-box-body > a:hover, a:active, a:focus,
.register-box-body >  a:hover, a:active, a:focus {
    color: white;
}

.btn-login {
    color: white;
    border-color: white !important;
    background-color: transparent !important;
    border-radius: .75rem !important;
}

.login-page .btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: rgba(255,255,255,0.5) !important;
}

.login-page .form-control.form-control-border {
    border: 0;
    outline: 0;
    background: transparent !important;
    border-bottom: 1px solid #e5e5e5;
    color: white;
}

/* Change Autocomplete styles in Chrome*/
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus,
.login-page textarea:-webkit-autofill,
.login-page textarea:-webkit-autofill:hover,
.login-page textarea:-webkit-autofill:focus,
.login-page select:-webkit-autofill,
.login-page select:-webkit-autofill:hover,
.login-page select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.login-page .form-control::placeholder,
.register-page .form-control::placeholder {
    color: var(--silver-chalice);
    opacity: 1;
}

.bg-tap-grey {
    background-color: var(--silver-chalice) !important;
}

.bg-yellow {
    background-color: var(--carrot-orange) !important;
}

.bg-orange, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-bod {
    background-color: var(--spanish-orange) !important;
}

.btn-warning {
    background-color: var(--spanish-orange);
    border-color: #C35517;
}

.btn-warning:hover {
    background-color: var(--carrot-orange);
}

.bg-blue, .callout.callout-primary, .alert-primary, .label-primary, .modal-primary .modal-body {
    background-color: var(--st-patricks-blue) !important;
}

.btn-primary, .btn-primary:active {
    background-color: var(--st-patricks-blue);
    border-color: var(--st-patricks-blue-dark);
}

.btn-primary:hover {
    background-color: var(--dark-blue-gray);
}

a {
    color: var(--st-patricks-blue);
}

a:hover, a:active, a:focus {
    color: var(--y-in-mn-blue);
}

.bg-original-blue {
    background-color: var(--french-blue) !important;
}

.bg-shadow-blue {
    background-color: var(--shadow-blue) !important;
}

/**
Se cambio colores de btn-success por azul TAP+ para cambiar
el color verde en librerias que por defecto utilizan esta clase
y no permiten configurarla.
 */
.btn-success, .btn-success:active {
    background-color: var(--st-patricks-blue);
    border-color: var(--st-patricks-blue-dark);
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--dark-blue-gray);
    border-color: var(--st-patricks-blue-dark);
}

.bg-carrot-orange {
    background-color: var(--carrot-orange) !important;
    border-color: var(--spanish-orange) !important;
}

/**
Sustituir el borde superior de todos los box por naranja TAP+
 */
.box,
.box.box-warning,
.box.box-primary,
.box.box-danger,
.box.box-info {
    border-top-color: var(--spanish-orange) !important;
}

/**
Sustituir color de paneles por naranja TAP+
 */
.panel,
.panel-warning,
.panel-success,
.panel-danger,
.panel-info {
    border-color: var(--papaya-whip);
}

.panel > .panel-heading,
.panel-warning > .panel-heading,
.panel-success > .panel-heading,
.panel-danger > .panel-heading,
.panel-info > .panel-heading {
    color: white;
    background-color: var(--carrot-orange);

}

/**
Sustituir color de filas danger y warning por tonos naranjas
derivados de naranja TAP+
 */
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
    background-color: var(--deep-champagne);
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
    background-color: var(--gold-crayola);
}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.danger > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
    background-color: var(--deep-champagne);
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
    background-color: var(--gold-crayola);
}

/**
Colocar color naranja TAP+ a iconos lapiz
 */
.glyphicon-pencil {
    color: var(--carrot-orange);
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

/**
Colocar tono rojo a iconos de eliminar (trash)
 */
.glyphicon-trash {
    color: var(--scarlet);
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

/*
Propiedades para adaptar el cuadro de portada al alto de pantalla
y el contenido centrado.
 */
.site-index > .body-content > .box,
.site-index > .body-content > .box > .box-body {
    padding: 0;
    margin: 0;
    min-height: calc(100vh - 160px);
}

@media screen and (max-width: 767px) {
    .site-index > .body-content > .box,
    .site-index > .body-content > .box > .box-body {
        min-height: calc(100vh - 200px);
    }

    .tap-portada-texto {
        font-size: 20px;
    }
}

.tap-portada {
    display: flex;
    flex-direction: column;
    justify-content: center;
}