@import "main.css";

.centerMargin {
    margin: 0 auto;
}

.xx-small {
    font-size: xx-small;
}

.x-small {
    font-size: 11px;
}

.small {
    font-size: small;
}

.italic {
    font-style: italic;
}

.muted {
    color: #6c757d;
    font-weight: 400;
}

.no-bold {
    font-weight: normal;
}

.grey {
    color: #898989;
}

a.blue-button {
    background: url("images/ui-bg_highlight-soft_100_1779c4_1x100.png") repeat-x scroll 50% 50% #1779C4;
    border: 1px solid #1779C4;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 1.0em;
    font-weight: bold;
    font-style: normal;
    margin-right: 0.1em;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none !important;
}

.fondoLogin {
    background: url("../images/YPFB.jpg") no-repeat center !important;
}

a.blue-button span {
    padding: 0.4em 1em;
    display: block;
}

a.blue-button:hover {
    border: 1px solid #2493eb;
    background: #1584cb url(images/ui-bg_highlight-soft_100_1584cb_1x100.png) 50% 50% repeat-x;
}

a.blue-button:active {
    border: 1px solid #16539c;
    background: #16539c url(images/ui-bg_inset-soft_65_16539c_1x100.png) 50% 50% repeat-x;
}

a.blue {
    color: #0D3386;
    text-decoration: underline;
}

a.blue:hover, a.blue:focus {
    color: #0D3386;
    text-decoration: none;
}

table.vertical-tabs {
    border: 0px;
}

table.vertical-tabs td {
    padding: 2px 0 2px 2px;
    border-right: 0px;
}

table.vertical-tabs td.tabs {
    background: #88B6D9;
    width: 170px;
}

table.grid {
    border-width: 1px 0 0 1px;
    border-color: #333 #ccc;
    border-style: solid;
    color: #000;
    font-size: 13px;
}

table.grid th, table.grid td {
    border-right: 1px solid #ccc;
    color: inherit;
    font-size: inherit;
    padding: 2px 6px;
}

table.grid th.no-border-right, table.grid td.no-border-right {
    border-right: none;
}

table.grid th {
    border-bottom: 1px solid #333;
    background: #f3f3f3;
}

table.grid th a span.sign {
    text-decoration: none;
}

table.grid td {
    border-bottom: 1px solid #ccc;
}

table.grid tr.total th {
    border-bottom: 1px solid #333;
    text-transform: uppercase;
}

table.grid a, table.grid th a {
    color: #00c;
    text-decoration: underline;
    font-weight: normal;
    font-size: inherit;
    display: inline;
}

table.grid a.hoverEdit, table.grid th a.hoverEdit {
    border: none;
    cursor: pointer;
    display: block;
    padding: 0px 18px 0px 0px;
}

table.grid a:hover, table.grid a:focus {
    text-decoration: none;
}

table.input {
    border: 0;
}

table.input th {
    border: 0;
    border-bottom: 1px solid #000;
    background: none;
    color: #000;
    font-size: inherit;
    padding: 2px 3px;
}

table.input th.label {
    width: 126px;
}

table.input td {
    padding: 2px 3px;
}

table.input tr.noBorderTop td, table.input tr.noBorderBottom td {
    border-bottom: 0px;
    vertical-align: top;
}

table.x-small {
    font-size: 11px;
}

table.simple {
    border-width: 0 0 1px;
    border-color: #333;
    border-style: solid none;
    color: #000;
    font-size: 13px;
}

table.simple th, table.simple td {
    color: inherit;
    font-size: inherit;
    padding: 2px 6px;
}

table.simple th {
    border-top: 1px solid #333;
    background: #f3f3f3;
}

table.simple td {
    border-top: 1px solid #ccc;
}

table.simple td.no-border-top {
    border-top: 0px none;
}

table.simple td.no-horizontal-padding {
    padding-left: 0px;
    padding-right: 0px;
}

table.simple td.border-top {
    border-top: 1px solid #ccc;
}

table.simple tr.total th {
    border-top: 1px solid #333;
    text-transform: uppercase;
}

table.simple tr.clickable td {
    padding: 0px;
}

table.simple tr.clickable td a {
    padding: 5px;
    display: block;
    color: #000;
    text-decoration: none;
    font-weight: normal;
}

table.simple tr.clickable:hover td {
    background: #ff9;
}

table.simple a, table.simple th a {
    color: #000;
    text-decoration: underline;
    font-weight: normal;
    font-size: inherit;
    display: inline;
}

table.simple a:hover, table.simple a:focus, table.simple th a:hover, table.simple th a:focus {
    text-decoration: none;
}

table.simple input {
    font-size: 11px;
    font-family: inherit;
    font-weight: normal;
}

table.no-border {
    border: 0px none;
}

table.no-border th, table.no-border td {
    border: inherit;
}

table.width100 {
    width: 100%;
}

tr.available td {
    background: #acd;
}

div.title-data {
    font-weight: bold;
    padding: 10px 0 10px;
    font-size: 14px;
}

div.title-data table {
    border: 0px;
}

div.title-data table label {
    padding-right: 20px;
}

div.dialog, div.medium-dialog, div.wide-dialog, div.big-dialog, div.modal-dialog {
    margin: 0 auto;
}

div.dialog table.tForm {
    border-width: 1px 1px 0;
    border-color: #CCCCCC;
    border-style: solid solid none;
    padding: 0;
    width: 100%;
}

div.dialog table.border-row {
    border-width: 1px 1px 0;
    border-style: solid solid none;
}

div.dialog table.border-row td {
    border-bottom: 1px solid #ccc;
}

div.dialog a.create {
    padding-left: 18px;
    text-decoration: underline;
    color: black;
    background: url("../images/icons/16/add.png") no-repeat scroll left center transparent;
}

div.medium-dialog {
    width: 500px;
}

div.wide-dialog {
    width: 650px;
}

div.big-dialog {
    width: 860px;
}

div.big-dialog fieldset {
    padding: 10px 0 10px;
}

div.big-dialog fieldset.border-top {
    border-width: 1px 0 0;
    border-style: solid;
    border-color: #000;
}

div.big-dialog fieldset table td {
    padding: 2px 6px;
}

div.modal-dialog {
    width: 500px;
    max-height: 600px;
    overflow: auto;
}

div.twoColumns div.fLeft {
    border-right: 1px solid #ccc;
}

div.twoColumns div.fLeft, div.twoColumns div.fRight {
    width: 48%;
    padding: 5px;
}

div.twoColumns div.fLeft div, div.twoColumns div.fRight div.left, div.twoColumns div.fRight div.nominacion-anterior {
    padding: 15px;
}

div.more-button {
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    margin-top: 15px;
}

div.more-button a {
    display: block;
    padding: 5px 15px;
}

div.more-button a:hover {
    background: #f0f0f0;
}

div.width15 {
    width: 15%;
}

div.width30 {
    width: 30%;
}

div.width40 {
    width: 40%;
}

div.width50 {
    width: 50%;
}

div.width60 {
    width: 60%;
}

div.width70 {
    width: 70%;
}

div.width85 {
    width: 85%;
}

div.width100 {
    width: 100%;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-5 {
    padding: 5px !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-5 {
    margin: 5px !important;
}


input.transparent {
    background: transparent;
    border: none;
}

div.login div.submit {
    border-top: 1px dashed #ccc;
    margin: 2px;
    padding: 6px 0 4px;
}

div.login input.submit {
    background: url("images/ui-bg_highlight-soft_100_1779c4_1x100.png") repeat-x scroll 50% 50% #012E46;
    border: 1px solid #012E46;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1.0em;
    font-weight: bold;
    margin-right: 0.1em;
    overflow: visible;
    padding: 0.3em 1em;
    position: relative;
    text-align: center;
    text-decoration: none !important;
}

div.login input.submit:hover {
    border: 1px solid #153F59;
    background: #153F59 repeat-x;
}

div.login input.submit:active {
    border: 1px solid #16539c;
    background: #16539c url(images/ui-bg_inset-soft_65_16539c_1x100.png) 50% 50% repeat-x;
}

div.login div.input label.name {
    width: 100px;
}

div.table-title table, div.table-footer table, div.table-body table {
    padding: 0;
    font-family: inherit;
}

div.table-title table th, div.table-footer table th, div.table-body table th {
    font-size: 12px;
    background: #F3F3F3;
}

div.table-title table th.subtitle, div.table-footer table th.subtitle, div.table-body table th.subtitle {
    border-bottom: 1px dashed #666;
}

div.table-title table th input, div.table-footer table th input, div.table-body table th input {
    border: 1px solid #F3F3F3;
    background: #F3F3F3;
    color: #000000;
}

div.table-title, div.table-footer {
    width: 456px;
}

div.table-body {
    height: 250px;
    overflow: auto;
    width: 470px;
}

div.table-body table a {
    color: #000;
    text-decoration: underline;
    font-weight: normal;
    font-size: inherit;
    display: inline;
}

div.table-body table a:hover, div.table-body table a:focus {
    text-decoration: none;
}

div.input-table {
    margin-left: 135px;
}

div.input-table table {
    margin: 0;
}

.ui-vertical-tabs {
    padding: 0.2em;
}

.ui-vertical-tabs .ui-tabs-nav {
    border-right: 0px;
    padding-left: 0.2em;
}

.ui-vertical-tabs .ui-tabs-nav li {
    margin: 0 0 0.2em 0;
}

.ui-vertical-tabs .ui-tabs-nav li.ui-tabs-selected {
    border-right: 0px;
}

.ui-vertical-tabs .ui-tabs-nav li a {
    float: inherit;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
}

.ui-vertical-tabs .content {
    padding-left: 0.5em;
}

div.sgn-tabs {
    padding: 0.2em;
    position: relative;
}

/** Componentes del Login **/
.form-login {
    height: auto;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.25);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 30px 25px;
}

.form-login * {
    font-family: inherit;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}

.form-login h3 {
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
}

.input-login {
    display: block;
    height: 40px !important;
    width: 100%;
    border-radius: 3px;
    color: #000;
    padding: 0 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 300;
}

.label-login {
    display: block;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.login-header {
    margin: 0 23%;
    /*display: flex;*/
    font-family: inherit;
    align-content: center;
}

.login-hr {
    border-bottom: 1px #c5c5c5 solid;
    padding: 3px;
}

.social-login {
    margin-top: 30px;
    display: flex;
    font-family: inherit;
    font-size: 12px;
}

.submit-login {
    margin-top: 30px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: -15px;
}

/** Estilos para formulario en 2 columnas **/
#responsive-form {
    /* max-width:600px; -- cambiar esto para conseguir el ancho de la forma deseada --*/
    margin: 0 auto;
    width: 100%;
}

.form-row {
    width: 100%;
    float: left;
}

.column-half, .column-full {
    float: left;
    position: relative;
    /*padding: 0.65rem;*/
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
    .column-half {
        width: 50%;
    }
}


.ui-button {
    margin-left: -1px;
    border-color: #ccc;
}

.ui-button-icon-only .ui-button-text {
    padding: 0.35em;
    width: 2.2em !important;
    height: 1.2em !important;
    margin: -4px 0 0 0;
}

.ui-autocomplete-input {
    width: 65%;
    text-align: left;
    text-transform: uppercase;
    border-color: #ccc;
    /*height: 15px;*/
}

.size50 {
    width: 50px;
}

.size70 {
    width: 70px;
}

.size80 {
    width: 80px;
}

.size100 {
    width: 100px;
}

.size120 {
    width: 120px;
}

.size150 {
    width: 150px;
}

.size200 {
    width: 200px;
}

.size250 {
    width: 250px;
}

.size300 {
    width: 300px;
}

.size350 {
    width: 350px;
}

.size400 {
    width: 400px;
}

.size450 {
    width: 450px;
}

.size500 {
    width: 500px;
}

.b-100 {
    font-weight: 100; /* Thin */
}

.b-200 {
    font-weight: 200; /* Extra Light */
}

.b-300 {
    font-weight: 300; /* Light */
}

.b-400 {
    font-weight: 400; /* Normal */
}

.b-500 {
    font-weight: 500; /* Medium */
}

.b-600 {
    font-weight: 600; /* Semi Bold */
}

.b-700 {
    font-weight: 700; /* Bold */
}

.b-800 {
    font-weight: 800; /* Extra Bold */
}

.b-900 {
    font-weight: 900; /* Black */
}

.font-s {
    font-size: small;
}

.font-m {
    font-size: medium;
}

.font-l {
    font-size: large;
}

.font-xl {
    font-size: x-large;
}

div.boton {
    background: url("../images/ui-bg_highlight-soft_100_1584cb_1x100.png") repeat-x scroll 50% 50% #16539C;
    border: 1px solid #1779C4;
    width: auto;
    float: left;
    margin: 5px;
}

div.boton .buttonCreate {
    background: url("../images/icons/16/add.png") no-repeat transparent 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

div.boton .buttonPrint {
    background: url("../images/icons/16/acrobat.png") no-repeat transparent 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

div.boton .buttonNext {
    background: url("../images/icons/16/forward.png") no-repeat transparent 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

div.boton .buttonEdit {
    background: url("../images/icons/16/edit.png") no-repeat transparent 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

div.boton .buttonSearch {
    background: url("../images/icons/16/document_preview.png") no-repeat transparent 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

.buttonCancel {
    background: url("../images/icons/16/cancel.png") no-repeat 3px 3px;
    cursor: pointer;
    border: none;
    padding-left: 20px;
    color: #fff;
}

.buttons input.cancel {
    background: transparent url(../images/icons/16/cancel.png) 5px 50% no-repeat;
    padding-left: 20px;
    cursor: pointer;
}

.editButton {
    background: url("../images/icons/16/edit.png") no-repeat center;
    border: none;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.activo {
    background: url("../images/icons/16/good.png") no-repeat center;
    width: 16px;
    height: 16px;
    border: none;
}

.inactivo {
    background: url("../images/icons/16/bad.png") no-repeat center;
    width: 16px;
    height: 16px;
    border: none;
}

.addB {
    background: url("../images/icons/16/add.png") no-repeat center;
    border: none;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.show {
    background: url("../images/icons/16/view_details.png") no-repeat center;
    border: none;
    padding: 3px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.viewPage {
    background: url("../images/icons/16/page_show.png") no-repeat center;
    border: none;
    padding: 3px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.print {
    background: url("../images/icons/16/acrobat.png") no-repeat center;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
}

.docList {
    border: none;
    background: url("../images/icons/16/DocList.png") no-repeat center;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.urlWeb {
    border: none;
    background: url("../images/icons/16/winurl.png") no-repeat center;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.delete {
    border: none;
    background: url("../images/icons/16/script_delete.png") no-repeat center;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.delete2 {
    border: none;
    background: url("../images/icons/16/delete.png") no-repeat center;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.ok {
    background: url("../images/icons/16/ok_apply.png") no-repeat center;
    border: none;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.minus {
    background: url("../images/icons/16/minus.png") no-repeat center;
    border: none;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.labelError {
    font-style: italic;
    color: red;
    text-align: center;
    font-size: 10px;
}

.buttons input.plus {
    background: transparent url(../images/icons/16/create.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.buttons input.minus {
    background: transparent url(../images/icons/16/minus.png) 5px 50% no-repeat;
    padding-left: 28px;
}

.focused {
    background: #D5E6F7;
    border: 1px #abcedf solid;
}

.atras {
    float: right;
    width: auto;
    padding-left: 20px;
    background: transparent url(../images/icons/16/back.png) 5px 50% no-repeat;
    border: 0;
    cursor: pointer;
}

.contenedor {
    overflow-y: auto;
    overflow-x: hidden;
    width: 99%;
    height: auto;
    max-height: 800px;
    border: 1px solid #DEDEDE;
    padding: 3px;
    background: #E1EFF7;
}

@media screen and (min-width: 1000px) {
    .izquierda {
        float: left;
        width: 38%;
        padding: 5px;
        text-align: center;
    }

    .derecha {
        float: right;
        padding: 5px;
        width: 58%;
        text-align: center;
        margin-left: 5px;
    }
}

.capaListaFacturas2 {
    width: 170px;
    height: 52px;
    padding: 8px 0 8px 60px;
    cursor: pointer;
    border: 3px #ccc double;
    color: #000066;
    font-weight: bold;
    border-radius: 6px;
    background: #F2F2F2 url(../images/icons/48/todolist.png) 5px center no-repeat;
}

.capaListaFacturas2:hover {
    background: #FFF url(../images/icons/48/todolist-blur.png) 5px center no-repeat;
    text-decoration: underline;
}

.capaProgramacion {
    width: 170px;
    height: 52px;
    padding: 8px 0 8px 60px;
    cursor: pointer;
    border: 3px #ccc double;
    color: #000066;
    font-weight: bold;
    border-radius: 6px;
    background: #F2F2F2 url(../images/icons/48/table.png) 5px center no-repeat;
}

.capaProgramacion:hover {
    background: #FFF url(../images/icons/48/table-blur.png) 5px center no-repeat;
    text-decoration: underline;
}

/**Estilos para el daterangepicker **/
.date-range-container {
    position: relative;
    display: inline-block;
}

.date-range-input {
    width: 185px;
    padding-right: 20px;
    margin-right: 10px;
    background: url(../images/icons/16/calendario-color.png) no-repeat scroll right center transparent;
}

/**Estilos para el check healt de los servicios externos **/
#dashboardServicios {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: nowrap;
}

.health-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 90px;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.health-service:hover {
    background-color: #F5F5F5;
}

.health-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.health-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.health-ok {
    background: #28A745;
}

.health-warning {
    background: #FFC107;
}

.health-error {
    background: #DC3545;
}

.health-unknown {
    background: #6C757D;
}

.health-tooltip {
    display: none;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 15px;
    background: white;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    text-align: left;
    z-index: 99999;
}

.health-service:hover .health-tooltip {
    display: block;
}

.health-tooltip-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: solid 1px #EEEEEE;
    padding-bottom: 5px;
}

.health-tooltip-item {
    margin-bottom: 5px;
    font-size: 12px;
}

.health-state-ok {
    color: #28A745;
    font-weight: bold;
}

.health-state-warning {
    color: #FFC107;
    font-weight: bold;
}

.health-state-error {
    color: #DC3545;
    font-weight: bold;
}

.health-state-unknown {
    color: #6C757D;
    font-weight: bold;
}

@keyframes blink {
    50% {
        opacity: .3;
    }
}

.health-error {
    background: #DC3545;
    animation: blink 1s infinite;
}

/** Estilos para menú tipo Drop Down**/
.dropdown {
    position: relative;
    display: inline-block;
}


.dropdown-btn {
    /*min-width: 140px;*/
    width: auto;
    /*padding: 8px 15px;*/
    /*border: 1px solid #CCCCCC;*/
    border: none;
    /*border-radius: 4px;*/
    /*background: white;*/
    background: transparent;
    cursor: pointer;
    transition: .2s;
}


.dropdown-btn:hover {
    background: #F5F5F5;
}

.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:120px;
    margin-top:2px;
    background:white;
    border:1px solid #DDDDDD;
    border-radius:5px;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
    z-index:99999;
    font-size: 10px;
}

.dropdown-right{
    left:auto;
    right:0;
}

.dropdown-left{
    top:0;
    left:-120px;
    margin-top:12px;
}

.dropdown-top{
    top:auto;
    bottom:100%;
    margin-bottom:5px;
    margin-top:0;
}

.dropdown-top-right{
    top:auto;
    bottom:100%;
    left:auto;
    right:0;
    margin-bottom:5px;
}

.dropdown-center{
    left:50%;
    transform:translateX(-50%);
}

.dropdown-menu a {
    display: block;
    padding: 7px 15px;
    text-decoration: none;
    color: #333333;
}

.dropdown-menu a:hover {
    background: #F5F5F5;
}

.dropdown-menu hr {
    margin: 0;
    border: none;
    border-top: 1px solid #EEEEEE;
}