:root {
    --bg: #ECEFF8;
    --bg-header: #FFFFFF;
    --bg-panel: #FFFFFF;
    --bg-disabled: #F1F5F9;

    --border-color: #D1D5DB;
    --big-border-color: #F0F0F0;
    --border: var(--border-color) 1px solid;
    --big-border: var(--big-border-color) 2px solid;

    --text-first-color: #111827;
    --text-second-color: #64748b;
    --text-disabled-color: var(--text-first-color);
    
    --bg-button: #FFFFFF;
    --bg-button-text: #111827;
    --bg-first-button: #2698ED;
    --bg-first-button-text: #FFFFFF;
    --bg-second-button: #ECEFF8;
    --bg-second-button-text: #64748b;
    --bg-three-button: #f03232;
    --bg-three-button-text: #FFFFFF;

    --bg-button-active: #ECEFF8;
    --bg-button-active-text: #111827;

    --ui-color: #2698ED;
    --bg-ui-color: #edeff8;

    --gap: 15px;
    --radius: 6px;
    --medium-radius: 12px;
    --big-radius: 18px;
    --padding-input: 10px 12px;
    --padding-button: 8px 13px;
    --padding-card: 26px 32px;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
    font-family: RobotoBold;
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
}

@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf');
}

@font-face {
    font-family: PoppinsRegular;
    src: url('../fonts/Poppins/Poppins-Regular.ttf');
}

:root {
    --font-first: Roboto;
    --font-first-bold: RobotoBold;
    --font-second: PoppinsRegular;
    --font-second-bold: Poppins;
}

html, body {
    background: var(--bg);
    background-color: var(--bg);
    font-family: var(--font-first), Helvetica, Arial, sans-serif;
    color: var(--text-first-color);
}

/*ScrollBar Inicio*/
::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #d9d9d9;
    border-radius: 100px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: var(--ui-color);
  }
  /*ScrollBar Fin*/

[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-mo {
      display: none !important;
    }
  }
  
  @media (min-width: 767px) {
    .hidden-pc {
      display: none !important;
    }
  }

@media (max-width: 767px) {
    html:has(.menu-mobile-menu-backdrop) {
        overflow: hidden;
    }
}

.container {
    max-width: 1440px;
    margin:auto;
}

.card {
    background: var(--bg-panel);
    border-radius: var(--big-radius);
    padding: var(--padding-card);
}

.card + .card {
    margin-top: 20px;
}

.red {
    color: #CE352C;
    font-size:12px;
}

.p-dialog {
    border-radius:  var(--big-radius) !important;
    background: white;
}

.p-dialog .p-dialog-header {
    border-top-right-radius:  var(--big-radius) !important;
    border-top-left-radius:  var(--big-radius) !important;
}

.p-dialog .p-dialog-content {
    overflow: auto;
}

.p-dialog .p-dialog-footer {
    border-bottom-right-radius:  var(--big-radius) !important;
    border-bottom-left-radius:  var(--big-radius) !important;
}

.p-datatable .p-datatable-thead>tr>th {
    font-family: var(--font-first-bold);
    font-size: 15px;
}

.p-datatable .p-datatable-tbody>tr>td {
    font-family: var(--font-first);
    font-size: 14px;   
}

.p-datatable-wrapper {
    overflow: auto;
}
.p-datatable .p-paginator-bottom.p-paginator-bottom {
    border-width: 0;
}

.p-tabview-title {
    font-family: var(--font-first-bold);
    font-size: 15px;
}
.p-tabview .p-tabview-nav li a:focus {
    box-shadow: none !important;
}

input, select, textarea {
    color: var(--text-second-color);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--padding-input);
    font-size: 14px;
}

label {
    color: var(--text-first-color);
    font-family: var(--font-second-bold);
    font-size: 15px;
}

button {
    background: var(--bg-button);
    color:var(--bg-button-text);
    font-family: var(--font-first-bold);
    font-size: 14px;
    border-radius: var(--radius) !important;
    padding: var(--padding-button);
    border: 0px;
    cursor: pointer;
    text-wrap: nowrap;
    height: 37px;
}

button.first {
    background: var(--bg-first-button);
    color: var(--bg-first-button-text);
}

  button.first-important {
    background: var(--bg-first-button) !important;
    color: var(--bg-first-button-text) !important;
  }

    button.first-important:hover, button.first-important:active {
      background: var(--bg-button-active) !important;
      color: var(--bg-button-active-text) !important;
    }

button:hover,button:active  {
    background: var(--bg-button-active);
    color: var(--bg-button-active-text);
}

button.second {
    background: var(--bg-second-button);
    color: var(--bg-second-button-text);
}

  button.second-important {
    background: var(--bg-second-button) !important;
    color: var(--bg-second-button-text) !important;
  }
button.second:hover {
    background: var(--bg-button-active);
    color: var(--bg-button-active-text);
}
  button.second-important:hover {
    background: var(--bg-button-active) !important;
    color: var(--bg-button-active-text) !important;
  }

button.three {
    background: var(--bg-three-button);
    color: var(--bg-three-button-text);
}
  button.three-important {
    background: var(--bg-three-button) !important;
    color: var(--bg-three-button-text) !important;
  }
button.three:hover {
    background: var(--bg-three-button);
    color: var(--bg-button-active-text);
}
  button.three-important:hover {
    background: var(--bg-three-button) !important;
    color: var(--bg-button-active-text) !important;
  }

button[disabled] {
    background: var(--bg-disabled);
    color: var(--text-disabled-color) !important;
    cursor: not-allowed;
}

button:has(i) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
button:has(i)  i {
    font-size: 17px;
}

h4 {
    color: var(--text-first-color);
    font-family: var(--font-second-bold);
    font-size: 28px;
    margin: 0px;
    margin-bottom: 20px;
}

h5 {
    color: var(--text-first-color);
    font-family: var(--font-second-bold);
    font-size: 20px;
    margin: 0px;
    margin-bottom: 10px;
}

table tr, table th {
    border-bottom:  var(--border);
}

div.p-dialog-content {
    overflow: visible;
    overflow-y: visible;
}

.text-center {
    text-align: center;
}

.only-print {
    display: none !important;
}

.p-colorpicker-preview, .p-fluid input.p-colorpicker-preview.p-inputtext {
    width: 37px;
    height: 37px;
}

input.p-inputtext, span.p-inputtext {
    height: 37px;
    padding: 10px;
    font-size: 14px;
    font-family: var(--font-first);
    color: var(--text-first-color);
}

input.p-inputtext[disabled], span.p-inputtext[disabled], textarea.p-inputtext[disabled] {
    color: var(--text-disabled-color);
    background: var(--bg-disabled);
}
.p-disabled, .p-component:disabled {
    opacity: 1 !important;
}

textarea.p-inputtext {
    padding: 10px;
    font-size: 14px;
    font-family: var(--font-first);
    color: var(--text-first-color);
}

div.p-dropdown, div.p-multiselect {
    height: 37px;
}
div.p-paginator .p-dropdown {
    height: 37px;
}

div.p-dropdown.p-disabled,  div.p-multiselect.p-disabled {
    background: var(--bg-disabled);
}

div.p-dropdown.p-disabled span.p-inputtext, div.p-multiselect.p-disabled span.p-inputtext {
    color: var(--text-disabled-color);
}

.p-multiselect .p-multiselect-label {
    padding: 10px !important;
    font-size: 14px;
    font-family: var(--font-first);
    color: var(--text-first-color);
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item,
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message,
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
    padding: 10px !important;
    font-size: 14px;
    font-weight: normal;
}

.p-radiobutton .p-radiobutton-box.p-disabled, .p-radiobutton .p-radiobutton-box.p-disabled.p-highlight,
.p-checkbox .p-checkbox-box.p-disabled, .p-checkbox .p-checkbox-box.p-disabled.p-highlight {
    border-color: #d3dbe3;
    background: #d3dbe3;
}
/*
.p-datatable .p-datatable-tbody>tr>td button i {
    color:var(--ui-color);
}

.p-datatable .p-datatable-tbody>tr>td button:hover i  {
    color:var(--text-first-color); 
}
*/

.p-datatable .p-datatable-tbody>tr td {
    min-height: 50px;
}
@media (max-width: 767px) {
    .p-datatable-table thead.p-datatable-thead > tr  {
        border-bottom: 0px;
    }

    .p-paginator button.p-paginator-first, .p-paginator button.p-paginator-prev, .p-paginator button.p-paginator-next, .p-paginator button.p-paginator-last, .p-paginator .p-paginator-pages button.p-paginator-page {
        min-width:  2rem;
        padding: 0;
    }

    .card {
        border-radius: 0px; 
        padding: 26px 20px;

        .p-paginator-left-content {
            width: 100%;
        }
        p-paginator p-dropdown {
            width: 100%;
            text-align: center;
            margin-top: 8px;
        }
        .p-paginator {
            padding: 0.5rem 0rem;
        }
    }
}
@media (min-width: 767px) {
    
    .p-datatable .p-datatable-tbody>tr>td:has(button) {
        padding: 0px !important;
    }
}
.p-datatable .p-datatable-tbody>tr>td:has(.p-datepicker) {
    padding: 1rem !important;
}


.p-fluid .p-inputtextarea {
    min-height: 200px;
}

.p-dialog .p-dialog-content {
    overflow: visible;
}

div.p-dialog .p-dialog-footer {
    padding-top: 10px;
}

div.p-colorpicker-panel .p-colorpicker-hue {
    background: transparent url('/assets/images/hue.png') no-repeat left top;
}

.p-colorpicker-panel .p-colorpicker-color {
    background: transparent url('/assets/images/colorPicker.png') no-repeat left top !important;   
}

.p-input-icon-left>.p-inputtext {
    padding-right: 2.5rem;
}

.p-dialog .p-dialog-content {
    overflow-y: auto;
}
.p-dialog {
    max-width: 96%;
    width: 960px !important;
    left: auto !important;
    top: auto !important;
}

.p-calendar .p-datepicker, .p-datepicker {
    /*min-width: auto !important;*/
    min-width: 360px !important;
    max-width: 360px !important;
}

.p-datepicker table {
    table-layout: fixed;
}

.fa-6x {
    font-size: 6em !important;
}

.p-toast-icon-close {
    position: absolute;
    right: 14px;
}

html:has(.modalPreview) {
    overflow: hidden;
}

.dialogZIndex .p-dialog-mask,
.dialogZIndex .p-dialog-mask .p-dialog {
  z-index: 1000 !important;
}

.p-paginator button.p-disabled span {
    opacity: 0.4;
}

.p-sidebar-right.p-sidebar-active {
    transform: none !important;
}

.p-dialog {
    transform: none !important;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
    white-space: break-spaces;
    word-break: break-word;
}

.p-editor-container .p-editor-content .ql-editor {
    color: initial !important;
}

.innerHTML {
    font-family: var(--font-second);
    font-size: 15px;
    font-weight: normal;
}

.p-tooltip.p-component.editorTooltip {
    max-width: none;
    pointer-events: none;
}

.multilang + .multilang {
    margin-top: 10px;
}

p-editor.multilang + p-editor.multilang {
    display: block;
}

.multilang.lang_es {
    background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)), url(/assets/images/flags/ES4x3.png) !important;
    background-size: 20px 15px !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) !important;
}

.multilang.lang_en {
    background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)), url(/assets/images/flags/EN4x3.png) !important;
    background-size: 20px 15px !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) !important;
}

div[role=tooltip] {
    left: 0px; 
    top: 0px;
    position:absolute;
}
  
div.swal2-container {
    z-index: 9100060;
}

.TableComponent .process-link {
  margin: 1rem;
}

.align-items-vertical {
  gap: 5px;
  display: grid;
}

@media (max-width: 767px) {
    .p-tabview div.p-tabview-panels {
        padding: 1.25rem 0px;
    }
}

/* Cards tables responsives */
p-table td .button-options {
    display: flex; 
    gap:  5px;
}
.card-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /*background: var(--bg);*/
  border-radius: var(--medium-radius);
  border: var(--border);
  padding: 15px 20px 10px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: var(--font-second);
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  > div {
    i, img {
      margin-right: 6px;
    }
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .big {
    font-size: 1.25rem;
  }
  .code {
    font-size: 1.25rem;
    font-family: var(--font-second-bold);
  }
  .linebreak {
    height: 1px;
    border-bottom: var(--border);
  }
  .img-middle {
    line-height: 1;
    img {
      vertical-align: middle;
    }
  }
  button.button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    padding: 0px;
    /*background: var(--bg);*/
  }
}