body { font: 14px/2 "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif; }

h1 { font-size: 2.5em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }

header { border-bottom: 1px solid #eee; background: #fff; }
#header { z-index: 102; }

#nav { width: calc(100% - 200px); padding-top: 6px !important; }

a.user { max-width: 155px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user span { color: #4c4e53; display: inline-block; margin-right: 0.5em; }
.nav-drop { padding-right: 0px !important; }
.has-drop-down i { float: right; margin-top: 7px; margin-left: 0.6em; color: #d8dce6; }
.has-drop-down:hover i { color: #4c4e53; }
.nav-wrap > ul > li > a.has-drop-down-a:after { content:none; }
.nav-wrap > ul > li > ul { width:250px; padding:15px 10px; }
    .nav-wrap > ul > li > ul > li:nth-child(odd) { padding-right: 0px; }
#nav .divider { *width: 100%; height: 2px; margin: 5px 0px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; }

#main { min-height: calc(100vh - 200px); background-color: rgba(29, 47, 83, .25); padding-top: 20px; padding-bottom: 20px; }

.card { border-radius: 0rem; }
.card-header { background-color: #fff; border-bottom: none; }
.card-body { background-color:#fff; }
.card-footer { padding-top: 2rem; background-color: #fff; border-top: none; text-align: right; }

.card.bg-danger .card-body { background-color: transparent; }

.card h2 { margin: 0; }

.logininfo { padding: 10px 0; display: none; }

.nav-tabs .nav-item { background-color: #eee; margin-right: 0.2em; }
    .nav-tabs .nav-item.active { border-bottom-width: 2px; margin-bottom: -1px; background-color: #fff; }
        .nav-tabs .nav-item.active .nav-link { color: #212529; }

.btn { min-width: initial; text-transform: uppercase; font-weight: 700; border-radius: 0; border-bottom-width: 0; text-align: center; }
.btn-default { color: #fff; background: #e8343c; }
    .btn-default:hover { background: #a31319; }
    .btn-default:active { background: #a31319; }
    .btn.btn-white { background: #eee; color: #e8343c; }
        .btn.btn-white:hover  { background: #ccc; }
        .btn.btn-white:active { background: #ccc; }

.form-label-group { margin-bottom: 0.8rem; }
label { margin-bottom: .1rem; }
::placeholder, ::-ms-input-placeholder, :-ms-input-placeholder { color: #9d9d9d !important; font-size: 0.8rem; }

a.has-drop-down-a:before { content: ""; font: 15px / 1 'Font Awesome 5 Brands'; font-family: 'Font Awesome 5 Brands' !important; }
a.has-drop-down-a:after  { content: "\f077"; font: 15px / 1 'Font Awesome 5 Brands'; font-family: 'Font Awesome 5 Brands' !important; }

td, th { border: none; white-space: nowrap; border-bottom: 1px solid #dee2e6 }

.viewusers table tr td:nth-child(6) { text-align: center; }
.viewusers table tr td:nth-child(7),
.viewusers table tr td:nth-child(8),
.viewusers table tr td:nth-child(9) { padding: 0.75rem 0; text-align: center; }

td .btn { padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; text-transform: capitalize; border-bottom-width: 1px; }
td .alert-link { display: inline-block; text-align: center; padding: 0 0.8em; border: 1px solid #bbb; min-width:70px; }
    td .alert-link:hover { background-color: #bbb; color: #fff !important; }

.datacontainer { height: calc(100vh - 410px); overflow: auto; }

.grid table, table.grid { position: relative; padding-right:0.1rem; }
    .grid table th, table.grid th { background-color: #eee; position: sticky; top: -1px; }
        .grid table th:nth-child(1) { background-color: #eeeeee; position: sticky; left: 0px;   width: 40px;  min-width: 40px;  z-index: 101; }
        .grid table th:nth-child(2) { background-color: #eeeeee; position: sticky; left: 40px;  width: 110px; min-width: 110px; z-index: 101; }
        .grid table th:nth-child(3) { background-color: #eeeeee; position: sticky; left: 150px; width: 310px; min-width: 310px; z-index: 101; text-align: left; }
        .grid table th:nth-child(4) { background-color: #eeeeee; position: sticky; left: 460px; width: 150px; min-width: 150px; z-index: 101; }
        .grid table td:nth-child(1) { background-color: #eeeeee; position: sticky; left:   0px; width: 40px;  min-width:  40px; z-index: 100; }
        .grid table td:nth-child(2) { background-color: #eeeeee; position: sticky; left: 40px; width: 110px; min-width: 110px; z-index: 100; text-align: center; }
        .grid table td:nth-child(3) { background-color: #eeeeee; position: sticky; left: 150px; width: 310px; min-width: 310px; z-index: 100; max-width: 460px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
        .grid table td:nth-child(4) { background-color: #eeeeee; position: sticky; left: 460px; width: 150px; min-width: 150px; z-index: 100; }
        .grid table tr td:nth-child(4), 
        .grid table tr th:nth-child(4) { text-align: center; }
        .grid table tr.seleccionada td, 
         table.grid tr.seleccionada td { background-color: #e5e5e5; color: #000; }

#aprov .grid table th:nth-child(3), #aprov .grid table td:nth-child(3) { width: 130px; min-width: 130px; max-width: 260px; }
    #aprov .grid table td:nth-child(3) { text-align: right; }
#aprov .grid table th:nth-child(4), #aprov .grid table td:nth-child(4) { left: 280px; }

ul#leyenda { padding: 0.5em 0 0.3rem; margin: 0; display: flex; list-style:none; }
ul#leyenda li { display: inline-block; padding: 0.1em; flex: auto; margin-right:1rem; }
    ul#leyenda span { display: inline-block; padding: 0.2em 0.4em 0.1em; margin-right:0.5rem; }

/*
#provisioning .grid table th:nth-child(5) { background-color: #eeeeee; position: sticky; left: 510px; }
#provisioning .grid table th:nth-child(6) { background-color: #eeeeee; position: sticky; left: 660px; }
#provisioning .grid table th:nth-child(7) { background-color: #eeeeee; position: sticky; left: 810px; }
#provisioning .grid table th:nth-child(8) { background-color: #eeeeee; position: sticky; left: 960px; }
#provisioning .grid table td:nth-child(5) { background-color: #f6f6f6; position: sticky; left: 510px; }
#provisioning .grid table td:nth-child(6) { background-color: #f6f6f6; position: sticky; left: 660px; }
#provisioning .grid table td:nth-child(7) { background-color: #f6f6f6; position: sticky; left: 810px; }
#provisioning .grid table td:nth-child(8) { background-color: #f6f6f6; position: sticky; left: 960px; }
*/
#data.table thead th:nth-child(n+4) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; transition: width 0.5s; -webkit-transition: width .5s; -moz-transition: width 0.5s; }
    #data.table thead th:nth-child(n+4):active { max-width: initial; }

table.grid tr td:nth-child(n+5) { text-align: right; padding: 0.1rem; border-left: 1px solid #dee2e6; vertical-align:middle; }
    table.grid tr td input { min-width: 90px; text-align: right; padding: .3em .6em; background-color: rgba(255,255,255,0.9); }
    table.grid tr td span { display:block; padding: .2em; position:relative; z-index:1; }
table.grid tr td i { font-size: 0.65rem; position: absolute; top: 11px; left: 4px; }
    table.grid tr td i.fa-arrow-up { }
    table.grid tr td i.fa-arrow-down { }
    table.grid tr td i:nth-child(2) { float:right; padding:0; }
    table.grid tr td.error input { background-color: rgba(210,20,20,0.1); border-color: rgba(210,20,20,0.8); }
    table.grid tr td.error input:focus { background-color: rgba(210,20,20,1); color:#fff; }

td.error { background-color: #D21414; color: White; }
.editable td.error { background-color: #fff; }

#divPaginacion { min-height:70px; }

.pagination { float: right; }
    td.pagination { display: table-cell; float:none; }
        .pagination .pagination:first-child { margin-left: 0; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
        .pagination .pagination:last-child { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
        .pagination a, .pagination span { position: relative; display: inline-block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6; }
            .pagination a:hover { z-index: 2; color: #0056b3; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; }
.pagination .current { z-index: 1; color: #fff; background-color: #ce181e; border-color: #ce181e; }
        .pagination .disabled { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6; }

table.usertable th, table.usertable td { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.login { z-index: 10; position: relative; }
    .login .card { margin-top: 1.5rem; padding: 1rem; }


#terms_of_agreement { padding: 10px; width: 100%; height: calc(100vh - 475px); overflow: auto; margin-top: 5px; }
.start:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; background: rgba(29, 47, 83, .69); }




/*#header { padding: 10px 0; position: relative; z-index: 99; }

.logo { float: left; width: 190px; }
    .logo img { max-width: none; width: 100%; }

.nav-opener { display: none; position: absolute; right: 40px; top: 13px; width: 38px; height: 40px; }
    .nav-opener:before,
    .nav-opener:after,
    .nav-opener span { background: #616266; position: absolute; top: 50%; left: 20%; right: 20%; height: 3px; margin-top: -2px; -webkit-transition: all .2s linear; transition: all .2s linear; }
    .nav-opener:before,
    .nav-opener:after { content: ""; top: 30%; }
    .nav-opener:after { top: 70%; }
    .nav-opener:hover { opacity: .9; }

.nav-active { overflow: hidden; }
    .nav-active .nav-opener span { opacity: 0; }
    .nav-active .nav-opener:before,
    .nav-active .nav-opener:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 50%; left: 15%; right: 15%; }
    .nav-active .nav-opener:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.nav-drop { max-height: 0; overflow: hidden; -webkit-transition: max-height .3s ease-in-out; transition: max-height .3s ease-in-out; position: absolute; right: 0; top: 100%; width: 100%; left: 0; text-align: left; }
.nav-active .nav-drop { max-height: 9999px; }

.nav-wrap { background: #fff; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; max-height: calc(100vh - 70px); overflow: hidden; overflow: auto; }
.nav-active .nav-wrap { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

.nav-wrap > ul > li.hover > a { background: #e8343c; color: #fff; }
    .nav-wrap > ul > li.hover > a.has-drop-down-a:after { -webkit-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); }
.nav-wrap > ul > li.active > a { background: #e8343c; color: #fff; }
.nav-wrap > ul > li > a { display: block; padding: 6px 30px 6px 15px; text-align: left; position: relative; color: #757982; border-bottom: 1px solid #d2d2d2; }
    .nav-wrap > ul > li > a.has-drop-down-a:after { content: ""; font: 15px/1 icomoon; position: absolute; right: 15px; top: 50%; -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); }
.nav-wrap > ul > li > ul { width: 200px; max-height: 0; overflow: hidden; -webkit-transition: opacity .3s ease-in-out, visibility .3s ease-in-out, max-height .3s ease-in-out; transition: opacity .3s ease-in-out, visibility .3s ease-in-out, max-height .3s ease-in-out; }
    .nav-wrap > ul > li > ul > li > a { display: block; padding: 6px 25px 6px; text-align: left; position: relative; color: #757982; }
        .nav-wrap > ul > li > ul > li > a .icon { display: inline-block; vertical-align: top; position: relative; margin-right: 7px; margin-top: 7px; margin-bottom: -7px; }
            .nav-wrap > ul > li > ul > li > a .icon .normal { display: block; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }
            .nav-wrap > ul > li > ul > li > a .icon img { height: 13px; width: auto; }
            .nav-wrap > ul > li > ul > li > a .icon .hover { opacity: 0; position: absolute; left: 0; top: 0; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }
    .nav-wrap > ul > li > ul > li:hover > a { background: #e8343c; color: #fff; }
        .nav-wrap > ul > li > ul > li:hover > a .icon .normal { opacity: 0; }
        .nav-wrap > ul > li > ul > li:hover > a .icon .hover { opacity: 1; }
    .nav-wrap > ul > li > ul.active > a { background: #e8343c; color: #fff; }
        .nav-wrap > ul > li > ul.active > a span { color: #fff; }
    .nav-wrap > ul > li > ul ul { text-align: left; }
        .nav-wrap > ul > li > ul ul li.active { color: #fff; background: #d11820; }
        .nav-wrap > ul > li > ul ul a { display: block; padding: 6px 40px; color: #808080; }
            .nav-wrap > ul > li > ul ul a:hover { color: #fff; background: #d11820; }*/



div.license h2 { padding-top: 30px; }
    div.license div.body p { margin-top: 20px; }

div.about h2 { padding-top: 30px; }
    div.about div.body p { margin-top: 20px; }

div.vertical_space { height: 30px; }


div.helplinks { margin: 10px; text-align: left; }
    div.helplinks a, a.back_to_top { text-decoration: none; color: #773853; font-weight: bold; }
        div.helplinks a:hover, a.back_to_top:hover { text-decoration: none; color: blue; font-weight: bold; }
div.helpcontainer { margin: 10px; /*background-color:#ddd;*/ text-align: left; overflow: auto; padding: 5px; }
    div.helpcontainer table { border: 1px solid black; border-collapse: collapse; }
        div.helpcontainer table td { border: 1px solid gray; padding: 5px; }
    div.helpcontainer h3 { margin-top: 20px; }
    div.helpcontainer div.vertical_space { margin-bottom: 50px; }
    div.helpcontainer p { margin: 10px 0; }
    div.helpcontainer ul { padding-left: 15px }




@media (min-width: 1200px) {
    .nav-wrap > ul > li > a { padding: 10px; }
    #footer { padding: 40px 0; }
}

@media (min-width: 1024px) {
    .logo { width: 200px; }
    main { margin-top: 114px; }
    #footer { padding: 25px 0; }
}

@media (min-width: 768px) {
    #footer { text-align: left; padding: 20px 0; }
    #nav { width: calc(100% - 200px); }
    .nav-drop:after { background: none; width: 0px; }
}

@media (max-width: 500px) {
    .nav-tabs .nav-link { display: block; width:100%; }
}




.nav-wrap > ul > li.hover > a { background: #f0f1f3; }
.nav-wrap > ul > li > ul { background: #f0f1f3; }