/* SE RECOMIENDA NO MODIFICAR ESTE ARCHIVO. PARA PERSONALIZACIONES CREAR UN wrapz-custom.css */

/*#region --- BASE --- */
:root {
  --body-wpz-header-color: #438EB9;
  --table-header-bg-color: #62A8D1;
  --table-body-border-color: #DDD;
}

body.wpz {
  font-family: 'Open Sans';
  font-size: 12px;
  color: #444;
}

body.bg {
  background: url(/img/bg-sys.jpg);
}

.wpzCnt {
  border: 1px solid #CCCED0;
  background: #FFF;
  border-top: 0;
}

/*#endregion */

/*#region --- HEADER AND FOOTER --- */

body.wpz header,
body.wpz footer {
  background: var(--body-wpz-header-color);
  color: #FFF;
}

/*#endregion */

/*#region --- HEADING COLORS --- */

h1.clr, h2.clr, h3.clr, h4.clr, h5.clr, h6.clr {
  color: #2679B5;
}

/*#endregion */

/*#region --- LINK BUTTONS --- */

.ancBtn {
  display: inline-block;
  border-radius: 2px;
}

  /*#region --- LIGHT ---  */

  .ancBtn.lig {
    border: 1px solid #D4DFE3;
    background: #FAFAFA;
    padding: 4px 8px;
    color: #2283C5;
  }

    .ancBtn.lig:hover {
      background: #EAEFF2;
    }

    .ancBtn.lig.act {
      border-color: #6FAED9;
      background: #6FAED9;
      color: #FFF;
    }

  /*#endregion */

  /*#region --- GREEN --- */

  .ancBtn.grn {
    background: #81AE6F;
    padding: 4px 8px;
    color: #FFF;
  }

    .ancBtn.grn:hover {
      background: #609A59;
    }

    .ancBtn.grn.act {
      background: #2C8865;
      color: #FFF;
    }

/*#endregion */

/*#endregion */

/*#region --- MESSAGES --- */

.spnMsg {
  display: inline-block;
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 11px;
  color: #FFF;
}

  /* --- */

  .spnMsg.lit {
    font-size: 10.5px;
  }

  .spnMsg.med {
    font-size: 12px;
  }

  .spnMsg.big {
    font-size: 13px;
  }

  /* --- */

  .spnMsg.pad {
    padding: 10px 20px;
  }

  .spnMsg.blc {
    display: block;
  }

  /* --- */

  .spnMsg.inf {
    background: #6FB2DF;
  }

  .spnMsg.suc {
    background: #86B77F;
  }

  .spnMsg.war {
    background: #FEB654;
  }

  .spnMsg.err {
    background: #D05A47;
  }

  .spnMsg.cus {
    background: #438BC9;
  }

  /* --- */

  .spnMsg.btm {
    text-align: center;
    position: relative;
    border-radius: 0;
    display: block;
    z-index: 1;
  }

    .spnMsg.btm.hid {
      display: none;
    }

/* --- */

.msgGen {
  transform: translateX(-50%);
  text-align: center;
  position: fixed;
  bottom: 10px;
  left: 50%;
}

/*#endregion */

/*#region --- BUTTONS --- */

.btn {
  font-family: inherit;
  background: #AAB9C2;
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
  color: #FFF;
  border: 0;
}

  .btn.pv3 {
    padding: 3px 14px;
  }

  .btn.pd2_6 {
    padding: 2px 6px;
  }

  .btn.act,
  .btn:hover,
  .btn:focus,
  .btn:active {
    background: #8A99A2;
    color: #FFF;
  }

  /* --- */

  .btn.lnk {
    background: none;
    color: #5090C1;
    padding: 0;
    border: 0;
  }

    .btn.lnk.act,
    .btn.lnk:hover,
    .btn.lnk:focus,
    .btn.lnk:active {
      background: none;
      color: #23527C;
    }

  /* --- */

  .btn.pri {
    background: #438BC9;
  }

    .btn.pri.act,
    .btn.pri:focus,
    .btn.pri:hover,
    .btn.pri:active {
      background: #1D6AA9;
    }

  /* --- */

  .btn.sec {
    background: #0F66C4;
  }

    .btn.sec.act,
    .btn.sec:focus,
    .btn.sec:hover,
    .btn.sec:active {
      background: #0C53A0;
    }

  /* --- */

  .btn.alt {
    background: #545454;
  }

    .btn.alt.act,
    .btn.alt:focus,
    .btn.alt:hover,
    .btn.alt:active {
      background: #2F2F2F;
    }

  /* --- */

  .btn.upd {
    background: #1AAE9A;
  }

    .btn.upd.act,
    .btn.upd:focus,
    .btn.upd:hover,
    .btn.upd:active {
      background: #158D7D;
    }

  /* --- */

  .btn.add {
    background: #17A1B7;
  }

    .btn.add.act,
    .btn.add:focus,
    .btn.add:hover,
    .btn.add:active {
      background: #138395;
    }

  /* --- */

  .btn.del {
    background: #DB3544;
  }

    .btn.del.act,
    .btn.del:focus,
    .btn.del:hover,
    .btn.del:active {
      background: #C72332;
    }

  /* --- */

  .btn:disabled,
  .btn:focus:disabled,
  .btn:hover:disabled,
  .btn:active:disabled {
    background: #E3E3E3 !important;
  }

  .btn.lnk:disabled {
    background: none !important;
    color: #B3B3B3;
  }

  /* --- */

  .btn.icn {
    text-align: center;
    padding: 2px;
  }

    .btn.icn.lit {
      padding: 0 2px 1px;
    }

    .btn.icn .fa {
      padding-left: 1px;
      font-size: 12px;
      width: 16px;
    }

    .btn.icn.lit .fa {
      font-size: 10px;
    }

/*#endregion */

/*#region --- SPANS --- */

.spnSel {
  color: #17A1B7;
}

  .spnSel.act,
  .spnSel:focus,
  .spnSel:hover,
  .spnSel:active {
    color: #138395;
  }

.spnUpd {
  color: #1AAE9A;
}

  .spnUpd.act,
  .spnUpd:focus,
  .spnUpd:hover,
  .spnUpd:active {
    color: #158D7D;
  }

  .spnUpd.dis {
    color: #E3E3E3;
  }

.spnDel {
  color: #DB3544;
}

  .spnDel.act,
  .spnDel:focus,
  .spnDel:hover,
  .spnDel:active {
    color: #C72332;
  }

  .spnDel.dis {
    color: #E3E3E3;
  }

.spnCus {
  color: #5F97BE;
}

  .spnCus.act,
  .spnCus:focus,
  .spnCus:hover,
  .spnCus:active {
    color: #5180A1;
  }

  .spnCus.dis {
    color: #E3E3E3;
  }

/*#endregion */

/*#region --- BOXES --- */

.divBox {
  border: 1px solid #DDD;
  border-radius: 1px;
}

  .divBox.tog > .divTit {
    cursor: pointer;
  }

    .divBox.tog > .divTit:hover {
      background: #EEF4F9;
    }

  .divBox > .divTit {
    background: #F7F7F7;
    padding: 5px 10px;
    color: #7B9FC7;
  }

  .divBox > .divCon {
    border-top: 1px solid #DDD;
    background: #FFF;
    overflow: hidden;
    padding: 10px;
  }

    .divBox > .divCon.clr {
      background: #FFF;
    }

/*#endregion */

/*#region --- TABS --- */

.divTabsExt .divTabs {
  white-space: nowrap;
  position: relative;
  overflow-x: auto;
  top: 1px;
}

  .divTabsExt .divTabs > div {
    border: 1px solid #C5D0DC;
    display: inline-block;
    background: #F9F9F9;
    padding: 6px 12px;
    cursor: pointer;
    color: #999;
  }

    .divTabsExt .divTabs > div:hover {
      background: #FEFEFE;
      color: #4C8EBC;
    }

    .divTabsExt .divTabs > div.act {
      border-bottom-color: #FFF;
      border-top-color: #4C8FBD;
      border-top-width: 2px;
      background: #FFF;
      color: #576373;
    }

      .divTabsExt .divTabs > div.act .fa {
        color: #4C8FBD;
      }

    .divTabsExt .divTabs > div:last-child {
      border-right-width: 1px;
    }

/* --- */

.divTabsExt .divCont {
  border: 1px solid #C5D0DC;
  padding: 10px;
}

  .divTabsExt .divCont > div {
    display: none;
  }

    .divTabsExt .divCont > div.act {
      display: initial;
    }

/*#endregion */

/*#region --- FORMS --- */

/*#region --- COMMON --- */

.inp, label.ddl select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

  label.ddl select:-moz-focusring,
  label.ddl select:focus:-moz-focusring {
    text-shadow: 0 0 0 #000;
    color: transparent;
    transition: none;
  }

/* --- */

label.inp {
  background: #FFF;
}

label.ddl,
label.chk,
label.rdb {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

  label.ddl.blc,
  label.chk.blc,
  label.rdb.blc {
    display: block;
  }

  /* --- */

  label.chk input,
  label.rdb input {
    opacity: 0;
  }

/*#endregion */

/*#region --- INPUTS TEXT ---  */

.inp {
  border: 1px solid #D5D5D5;
  font-family: inherit;
  text-align: inherit;
  border-radius: 2px;
  font-size: 13px;
  padding: 0 6px;
  color: #757575;
  height: 30px;
}

  .inp::placeholder {
    text-transform: none !important;
  }

  .inp.fs10 {
    font-size: 10px;
  }

  .inp.fs11 {
    font-size: 11px;
  }

  .inp.fs12 {
    font-size: 12px;
  }

  .inp.fs13 {
    font-size: 13px;
  }

  .inp.fs14 {
    font-size: 14px;
  }

  .inp.fs15 {
    font-size: 15px;
  }

  .inp.fs16 {
    font-size: 16px;
  }

  .inp.fs17 {
    font-size: 17px;
  }

  .inp.fs18 {
    font-size: 18px;
  }

  .inp.fs19 {
    font-size: 19px;
  }

  .inp.fs20 {
    font-size: 20px;
  }

  /* --- */

  .inp.min {
    font-size: 11px;
    height: 20px;
  }

  .inp.lit {
    font-size: 12px;
    height: 24px;
  }

  .inp.med {
    font-size: 13px;
    height: 28px;
  }

  .inp.big {
    font-size: 14px;
    height: 32px;
  }

  /* --- */

  .inp:hover {
    border-color: #B5B5B5;
  }

  .inp.act,
  .inp:focus {
    border-color: #17A2B8;
  }

  /* --- */

  .inp.err {
    border-color: #F00;
  }

  /* --- */

  .inp:disabled,
  .inp.dis {
    border-color: #D5D5D5;
    background: #E3E3E3;
  }

    .inp:disabled.err,
    .inp.dis.err {
      border-color: #F00;
    }

  /* --- */

  .inp.upf,
  .inp.upm {
    padding-top: 3px;
  }

  /* --- */

  .inp.txtFlt {
    border: 0;
  }

/* --- */

.divCloUpm {
  background: #D3D3D3;
  color: #F00;
}

/*#endregion */

/*#region --- TEXTAREAS --- */
textarea.inp {
  padding: 6px 6px;
  resize: vertical;
  height: 50px;
  tab-size: 2;
}

  /* --- */

  textarea.inp.rsn {
    resize: none;
  }

  /* --- */

  textarea.inp.h100 {
    min-height: 100px;
    height: 100px;
  }

  textarea.inp.h150 {
    min-height: 150px;
    height: 150px;
  }

  textarea.inp.h200 {
    min-height: 200px;
    height: 200px;
  }

/*#endregion */

/*#region --- CHECKBOXES --- */

label.chk span:first-of-type {
  border: 1px solid #D5D5D5;
  border-radius: 2px;
  position: absolute;
  background: #FFF;
  height: 16px;
  width: 16px;
  left: 0;
  top: 0;
}

label.chk input:checked ~ span:first-of-type:after {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-width: 0 3px 3px 0;
  border-color: #32A3CE;
  border-style: solid;
  border-radius: 1px;
  position: absolute;
  display: block;
  content: '';
  height: 7px;
  width: 3px;
  left: 4px;
  top: 2px;
}

/* --- */

label.chk:hover span:first-of-type {
  border-color: #B5B5B5;
}

label.chk input:focus ~ span:first-of-type {
  border-color: #17A2B8;
}

  label.chk input:focus ~ span:first-of-type.err {
    border-color: #F00;
  }

/* --- */

label.chk.dis {
  cursor: not-allowed;
  color: #999;
}

  label.chk.dis input:disabled ~ span:first-of-type {
    border-color: #D5D5D5;
    background: #E3E3E3;
  }

    label.chk.dis input:disabled ~ span:first-of-type:after {
      border-color: #999;
    }

/*#endregion */

/*#region --- RADIO BUTTON --- */

label.rdb span:first-of-type {
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  position: absolute;
  height: 16px;
  width: 16px;
  left: 0;
  top: 0;
}

label.rdb input:checked ~ span:first-of-type:after {
  background: #32A3CE;
  position: absolute;
  border-radius: 50%;
  display: block;
  content: '';
  height: 8px;
  width: 8px;
  left: 3px;
  top: 3px;
}

/* --- */

label.rdb:hover span:first-of-type {
  border-color: #B5B5B5;
}

label.rdb input:focus ~ span:first-of-type {
  border-color: #17A2B8;
}

/* --- */

label.rdb.dis {
  cursor: not-allowed;
  color: #999;
}

  label.rdb.dis input:disabled ~ span:first-of-type {
    border-color: #D5D5D5;
    background: #E3E3E3;
  }

    label.rdb.dis input:disabled ~ span:first-of-type:after {
      background: #999;
    }

/*#endregion */

/*#region --- AUCS (AUTOCOMPLETES) ---  */

.divAucWrp {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

  .divAucWrp .divAuc {
    border-color: #17A2B8;
    position: absolute;
    border-radius: 2px;
    background: #FFF;
    overflow-y: auto;
    text-align: left;
    width: 100%;
    z-index: 2;
  }

    .divAucWrp .divAuc div {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: 4px 5px;
    }

      .divAucWrp .divAuc div.sel {
        background: #F0F0F0;
      }

/*#endregion */

/*#region --- CALS (CALENDARS) ---  */

.divCalWrp {
  display: inline-block;
  position: relative;
  font-size: 10px;
}

  .divCalWrp .divCal {
    position: absolute;
    z-index: 1;
  }

/*#endregion */

/*#region --- SELECT (DDL - DROP DOWN LIST) --- */
.ddl.min {
  font-size: 11px;
  height: 18px;
}

.ddl.lit {
  font-size: 12px;
  height: 22px;
}

.ddl.med {
  font-size: 13px;
  height: 26px;
}

.ddl.big {
  font-size: 14px;
  height: 30px;
}

/* --- */

label.ddl {
  padding: 1px;
}

  /* --- */

  label.ddl select {
    font-family: 'Open Sans', Calibri;
    text-overflow: ellipsis;
    padding-right: 20px;
    position: relative;
    padding-left: 4px;
    background: #FFF;
    font-size: 13px;
    cursor: pointer;
    height: 28px;
    color: #666;
    width: 100%;
    z-index: 1;
    border: 0;
  }

  label.ddl.lit select {
    font-size: 12px;
    height: 22px;
  }

  /* --- */

  label.ddl span {
    border: 1px solid #D5D5D5;
    border-radius: 2px;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

    label.ddl span:after {
      border: 5px solid transparent;
      border-top-color: #32A3CE;
      pointer-events: none;
      position: absolute;
      content: '';
      z-index: 1;
      right: 5px;
      top: 45%;
    }

  /* --- */

  label.ddl.ddlFlt span {
    border: 0;
  }

  /* --- */

  label.ddl select:hover ~ span {
    border-color: #B5B5B5;
  }

  label.ddl select:focus ~ span {
    border-color: #17A2B8;
  }

  /* --- */

  label.ddl select.err ~ span {
    border: 1px solid #F00;
  }

  /* --- */

  label.ddl select:disabled {
    background: #E3E3E3;
    color: #999;
  }

    label.ddl select:disabled ~ span {
      border-color: #D5D5D5;
    }

      label.ddl select:disabled ~ span:after {
        border-top-color: #999;
      }

/*#endregion */

/*#endregion */

/*#region --- TABLES --- */

/*--- Este estilo es agregado automaticamente en wrapz.js para hacer las tablas Responsivas --- */

.divTblRsp {
  overflow-x: auto;
}

/* --- */

.tbl {
  border-collapse: collapse;
}

  /* --- */

  .tbl thead th {
    border: 1px solid #DDD;
    background: #F4F4F4;
    padding: 6px 10px;
    color: #6A6E81;
  }

  .tbl thead td {
    border: 1px solid #DDD;
  }

  .tbl tbody td {
    border: 1px solid #DDD;
  }

  /* --- */

  .tbl.clr thead th {
    border: 1px solid var(--table-header-bg-color);
    background: var(--table-header-bg-color);
    color: #FFF;
  }

    .tbl.clr thead th:not(:last-child) {
      border-right: 1px solid var(--table-body-border-color);
    }

  .tbl.clr thead td,
  .tbl.clr tbody td {
    border: 1px solid var(--table-body-border-color);
  }

  /* --- */

  .tbl tbody {
    text-align: left;
  }

    .tbl tbody.cen {
      text-align: center;
    }

    .tbl tbody tr:nth-child(2n) td {
      background: #F8F8F8;
    }

    .tbl tbody tr td {
      background: #FFFFFA;
      padding: 6px 10px;
      color: #555;
    }

      /* --- */

      .tbl tbody tr td.pv3 {
        padding: 3px 10px;
      }

  /* --- */

  .tbl.inv tbody tr td {
    background: #F8F8F8;
  }

  .tbl.inv tbody tr:nth-child(2n) td {
    background: #FFFFFA;
  }

  .tbl tbody tr:hover td,
  .tbl.inv tbody tr:hover td {
    background-color: #F0F0F0;
  }

  .tbl .lnk {
    color: #008080;
  }

  .tbl tfoot td {
    border: 1px solid var(--table-body-border-color);
  }

/*#endregion */

/*#region --- TINYMCE --- */

.divHte {
  border: 1px solid #D5D5D5 !important;
  border-radius: 2px !important;
}

  .divHte.err {
    border-color: #F00 !important;
  }

.tox-editor-header {
  padding: 0 !important;
}

.tox-toolbar__group {
  padding: 0 4px !important;
}

.tox-tinymce--disabled {
  border: 1px solid #D5D5D5 !important;
  border-radius: 2px !important;
}

.mce-content-readonly {
  background: #E3E3E3;
  cursor: not-allowed;
  color: #757575;
}

.mce-content-body.cen[data-mce-placeholder]:not(.mce-visualblocks)::before {
  transform: translate(-50%, 0);
  left: 50% !important;
}

/*#endregion */

/*#region --- TOOLTIPZ --- */
.tooltipzWrap {
  display: inline-block;
  position: relative;
}

  .tooltipzWrap .tooltipz {
    transform: translate(-50%);
    background-color: #555;
    border-radius: 6px;
    visibility: hidden;
    text-align: center;
    position: absolute;
    width: max-content;
    max-width: 400px;
    min-width: 120px;
    padding: 2px 6px;
    transition: .3s;
    bottom: 125%;
    color: #FFF;
    opacity: 0;
    left: 50%;
  }

  .tooltipzWrap:hover .tooltipz {
    visibility: visible;
    opacity: .8;
    z-index: 1;
  }

/* --- */

.tooltipzVal {
  background-color: #666;
  border-radius: 2px;
  position: absolute;
  padding: 2px 4px;
  font-size: 10px;
  color: #FFF;
  right: 10px;
  z-index: 2;
  top: -7px;
}

/*#endregion */