.flex-one {
    flex: 1;
  }
  
  .list-wrap {
    flex-wrap: wrap;
  }
  
  .hvic {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hic {
    display: flex;
    justify-content: center;
  }
  
  .vic {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .rac {
    display: flex;
    align-items: center;
  }
  
  .rsb {
    display: flex;
    justify-content: space-between;
  }
  
  .rat {
    display: flex;
    align-items: flex-start;
  }
  
  .rab {
    display: flex;
    align-items: flex-end;
  }
  
  .ral {
    display: flex;
    justify-content: flex-start;
  }
  
  .rar {
    display: flex;
    justify-content: flex-end;
  }
  
  .cac {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .csb {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .cab {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  .car {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .cal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .row-rvs {
    flex-direction: row-reverse;
  }
  
  .switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 24px;
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
  
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--hc-ts-bg);
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
  
    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: var(--hc-ts-round);
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
  
    input:checked + .slider {
      background-color: var(--hc-ts-checked-bg);
    }
  
    input:focus + .slider {
      box-shadow: 0 0 1px #2196f3;
    }
  
    input:checked + .slider:before {
      -webkit-transform: translateX(17px);
      -ms-transform: translateX(17px);
      transform: translateX(17px);
    }
    .slider.round {
      border-radius: 34px;
    }
  
    .slider.round:before {
      border-radius: 50%;
    }
  }
  
  .hc-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hc-overlay-bg);
    z-index: 11;
    .hc-modal {
      width: 50%;
      height: 80vh;
      background-color: var(--hc-modal-bg);
      border-radius: 8px;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      padding: 30px;
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .hcm-header {
      padding-bottom: 30px;
      position: relative;
      .hcm-header-str {
        color: var(--hc-mdl-heading);
        font-size: 20px;
        font-family: "Holcim-Regular";
      }
      .select-all-str {
        display: none;
      }
    }
    .hcm-body {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      margin: 10px 0;
      padding-right: 5px;
      &:active::-webkit-scrollbar-thumb,
      &:focus::-webkit-scrollbar-thumb,
      &:hover::-webkit-scrollbar-thumb {
        visibility: visible;
      }
      &::-webkit-scrollbar-thumb {
        background: #8F8F93;
        border-radius: 5px;
        visibility: hidden;
      }
      &::-webkit-scrollbar {
        width: 5px;
      }
    }
    .hcm-btn-grp {
      display: flex;
      justify-content: flex-end;
      padding-top: 30px;
      .hcm-cancel-btn {
        min-width: 137px;
        min-height: 44px;
        background-color: var(--hc-mdl-btn-light-bg);
        border: 1px solid #444445;
        border-radius: 2px;
        color: var(--hc-mdl-btn-light-txt);
        font-size: 14px;
        font-family: "Holcim-Regular";
        cursor: pointer;
      }
  
      .hcm-save-btn {
        min-width: 137px;
        min-height: 44px;
        background-color: var(--hc-mdl-btn-dark-bg);
        border-radius: 2px;
        color: var(--hc-mdl-btn-dark-txt);
        font-size: 14px;
        font-family: "Holcim-Regular";
        margin-left: 11px;
        cursor: pointer;
      }
    }
  }
  
  .hc-select-container {
    position: relative;
    .hc-select {
      width: 248px;
      height: 50px;
      border-radius: 4px;
      border: 0.5px solid #1d4370;
      background-color: var(--hc-select-bg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 14px;
      .hc-select-placeholder {
        color: var(--hc-select-placeholder);
        font-size: 16px;
        font-family: "Holcim-Regular";
      }
    }
    .hc-option-list {
      width: 248px;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 0.5px solid #1d4370;
      border-radius: 4px;
      margin-top: 6px;
      .hc-option-value {
        height: 47px;
        padding: 0 14px;
        color: var(--hc-option-value);
        font-size: 16px;
        font-family: "Holcim-Regular";
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(68, 68, 69, 0.2);
        cursor: pointer;
      }
      .hc-option-value-selected {
        background-color: var(--hc-option-value-selected-bg);
        color: var(--hc-option-value-selected-txt);
        font-weight: bold;
      }
    }
  }
  
  .hc-textarea-container {
    width: 100%;
    height: 161px;
    background-color: var(--hc-textarea-bg);
    border-radius: 4px;
    border: 2px solid #f4f6f8;
    padding: 18px;
    .hc-textarea {
      width: 100%;
      height: 103px;
      color: var(--hc-textarea-txt);
      font-size: 14px;
      font-family: "Holcim-Regular";
      resize: none;
      border: none;
      background: none;
      &::placeholder {
        color: var(--hc-textarea-txt);
        font-size: 14px;
        font-family: "Holcim-Regular";
      }
    }
    .textarea-limit-count p {
      color: var(--hc-textarea-txt);
      font-size: 14px;
      font-family: "Holcim-Regular";
    }
  }
  
  .disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  
  .holcim-mode-str {
    background: var(--hc-gradient-txt);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 16px;
      font-family: "Holcim-Regular";
      text-align: center;
  }
  
  .pointer-cursor {
    cursor: pointer;
  }
  
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #8F8F93;
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #8F8F93;
  }
  
  .hc-tooltip {
    position: relative;
    display: inline-block;
  }
  
  .hc-tooltip .hc-tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: var(--hc-clr-one);
    color: var(--hc-clr-white);
    font-size: 12px;
    font-family: "Holcim-Regular";
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 25px;
  }
  
  .hc-tooltip:hover .hc-tooltip-text {
    visibility: visible;
  }
  
  @media only screen and (max-width: 1400px) {
    .hc-overlay {
      .hc-modal {
        width: 60%;
      }
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .hc-overlay {
      .hc-modal {
        width: 70%;
      }
    }
  }
  
  @media only screen and (max-width: 992px) {
    .hc-overlay {
      .hc-modal {
        width: 80%;
      }
    }
  }
  
  @media only screen and (max-width: 768px) {
    .dp-block {
      display: block;
    }
    .hc-overlay {
      .hc-modal {
        width: 90%;
        height: 80vh;
        border-radius: 0;
      }
      .hcm-header {
        .select-all-str {
          display: block;
          color: #04BBF1;
          font-size: 18px;
          font-family: "Holcim-Regular";
        }
      }
      .hcm-btn-grp {
        display: flex;
        justify-content: center;
        .hcm-cancel-btn {
          min-width: 125px;
        }
        .hcm-save-btn {
          min-width: 125px;
        }
      }
    }
  }
  
  
  .hc-theme-holcim {
    --li-rc-bg: var(--hc-clr-white);
    --li-rc-gs-liratp: var(--hc-clr-three);
    --li-rc-link: var(--hc-clr-one);
    --main-page-bg: var(--hc-clr-white);
    --sidebar-bg: var(--hc-clr-two);
    --sb-data-from: var(--hc-clr-five);
    --header-profile-name: var(--hc-clr-four);
    --hc-modal-bg: var(--hc-clr-white);
    --hc-mdl-heading: var(--hc-clr-three);
    --hc-mdl-btn-light-bg: var(--hc-clr-white);
    --hc-mdl-btn-dark-bg: var(--hc-clr-one);
    --hc-mdl-btn-light-txt: var(--hc-clr-five);
    --hc-mdl-btn-dark-txt: var(--hc-clr-white);
    --hc-upload-btn-bg: var(--hc-clr-eight);
    --ml-doc-card-bg: var(--hc-clr-white);
    --ml-doc-name: var(--hc-clr-five);
    --hc-drag-drop-input-bg: var(--hc-clr-white);
    --header-dropdown-bg: var(--hc-clr-white);
    --hd-item-name: var(--hc-clr-five);
    --hd-app-name: var(--hc-clr-three)
    --chc-cacs: var(--hc-clr-three);
    --chc-ci: var(--hc-clr-three);
    --chc-efnc: var(--hc-clr-three);
    --hc-textarea-bg: var(--hc-clr-white);
    --hc-textarea-txt: var(--hc-clr-five);
    --chc-conv-style-bg: var(--hc-clr-white);
    --chc-conv-style-selected-bg: var(--hc-clr-one);
    --chc-conv-name: var(--hc-clr-three);
    --chc-conv-name-selected: var(--hc-clr-white);
    --set-cam: var(--hc-clr-three);
    --set-adp: var(--hc-clr-three);
    --set-adp-for: var(--hc-clr-five);
    --chat-sug-card-bg: var(--hc-clr-two);
    --chat-sug-card-txt: var(--hc-clr-three);
    --chat-input-bg: var(--hc-clr-two);
    --chat-input-txt: var(--hc-clr-three);
    --mistake-note: var(--hc-clr-one);
    --set-theme-mode-bg: var(--hc-clr-white);
    --set-theme-mode-selected-bg: var(--hc-clr-white);
    --set-theme-name: var(--hc-clr-three);
    --set-theme-name-selected: var(--hc-clr-three);
    --hc-select-bg: var(--hc-clr-white);
    --hc-select-placeholder: var(--hc-clr-five);
    --hc-option-value: var(--hc-clr-one);
    --chat-msg-card-bg: var(--hc-clr-white);
    --chat-msg-txt: var(--hc-clr-five);
    --hd-txt: var(--hc-clr-five);
    --chat-question-input-bg: var(--hc-clr-nine);
    --chat-question-input-txt: var(--hc-clr-five);
    --hc-option-value-selected-bg: var(--hc-clr-ten);
    --hc-option-value-selected-txt: var(--hc-clr-one);
    --header-cp: var(--hc-clr-one);
    --hc-overlay-bg: var(--hc-clr-twelve);
    --header-hc: var(--hc-clr-three);
    --hc-ts-bg: var(--hc-clr-five);
    --hc-ts-round: var(--hc-clr-white);
    --upload-from-card-bg: var(--hc-clr-two);
    --ftc-txt: var(--hc-clr-three);
    --upload-file-card-bg: var(--hc-clr-white);
    --upload-file-name-txt: var(--hc-clr-three);
    --ml-dd-bg: var(--hc-clr-white);
    --ml-dd-txt: var(--hc-clr-fourteen);
    --hc-hzline-bg: var(--hc-clr-fifteen);
    --hc-ts-checked-bg: var(--hc-clr-eight);
    --set-theme-mode-selected-border: var(--hc-clr-eight);
    --apps-txt: var(--hc-clr-black);
    --ml-doc-card-selected-border: var( --hc-clr-eight);
    --ml-doc-upload-todo-bg: var(--hc-clr-two);
    --ml-doc-upload-done-bg: var(--hc-gradient-txt);
    --chat-dd-bg: var(--hc-clr-white);
    --chat-dd-msg: var(--hc-clr-black)
  }
  * {
    box-sizing: border-box;
  }
  

  
  body,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    padding: 0;
    margin: 0;
  }
  
  button {
    background: none;
    border: none;
    outline: none;
  }
  
  input,
  textarea,
  select {
    appearance: none;
  }
  
  input:focus-visible,
  textarea:focus-visible {
    outline: none;
  }
  .hc-theme-dark {
    --li-rc-bg: var(--hc-clr-black);
    --li-rc-gs-liratp: var(--hc-clr-two);
    --li-rc-link: var(--hc-clr-two);
    --main-page-bg: var(--hc-clr-black);
    --sidebar-bg: var(--hc-clr-four);
    --sb-data-from: var(--hc-clr-two);
    --header-profile-name: var(--hc-clr-two);
    --hc-modal-bg: var(--hc-clr-black);
    --hc-mdl-heading: var(--hc-clr-two);
    --hc-mdl-btn-light-bg: var(--hc-clr-black);
    --hc-mdl-btn-dark-bg: var(--hc-clr-five);
    --hc-mdl-btn-light-txt: var(--hc-clr-white);
    --hc-mdl-btn-dark-txt: var(--hc-clr-white);
    --hc-upload-btn-bg: var(--hc-clr-four);
    --ml-doc-card-bg: var(--hc-clr-four);
    --ml-doc-name: var(--hc-clr-two);
    --hc-drag-drop-input-bg: var(--hc-clr-four);
    --header-dropdown-bg: var(--hc-clr-black);
    --hd-item-name: var(--hc-clr-two);
    --hd-app-name: var(--hc-clr-two);
    --chc-cacs: var(--hc-clr-two);
    --chc-ci: var(--hc-clr-two);
    --chc-efnc: var(--hc-clr-two);
    --hc-textarea-bg: var(--hc-clr-black);
    --hc-textarea-txt: var(--hc-clr-seven);
    --chc-conv-style-bg: var(--hc-clr-black);
    --chc-conv-style-selected-bg: var(--hc-clr-four);
    --chc-conv-name: var(--hc-clr-seven);
    --chc-conv-name-selected: var(--hc-clr-seven);
    --set-cam: var(--hc-clr-two);
    --set-adp: var(--hc-clr-two);
    --set-adp-for: var(--hc-clr-two);
    --chat-sug-card-bg: var(--hc-clr-four);
    --chat-sug-card-txt: var(--hc-clr-two);
    --chat-input-bg: var(--hc-clr-four);
    --chat-input-txt: var(--hc-clr-two);
    --mistake-note: var(--hc-clr-two);
    --set-theme-mode-bg: var(--hc-clr-black);
    --set-theme-mode-selected-bg: var(--hc-clr-four);
    --set-theme-name: var(--hc-clr-white);
    --set-theme-name-selected: var(--hc-clr-white);
    --hc-select-bg: var(--hc-clr-four);
    --hc-select-placeholder: var(--hc-clr-two);
    --hc-option-value: var(--hc-clr-two);
    --chat-msg-card-bg: var(--hc-clr-black);
    --chat-msg-txt: var(--hc-clr-two);
    --hd-txt: var(--hc-clr-two);
    --chat-question-input-bg: var(--hc-clr-four);
    --chat-question-input-txt: var(--hc-clr-two);
    --hc-option-value-selected-bg: var(--hc-clr-eleven);
    --hc-option-value-selected-txt: var(--hc-clr-two);
    --header-cp: var(--hc-clr-two);
    --hc-overlay-bg: var(--hc-clr-thirteen);
    --header-hc: var(--hc-clr-two);
    --hc-ts-bg: var(--hc-clr-five);
    --hc-ts-round: var(--hc-clr-white);
    --upload-from-card-bg: var(--hc-clr-four);
    --ftc-txt: var(--hc-clr-two);
    --upload-file-card-bg: var(--hc-clr-black);
    --upload-file-name-txt: var(--hc-clr-two);
    --ml-dd-bg: var(--hc-clr-four);
    --ml-dd-txt: var(--hc-clr-two);
    --hc-hzline-bg: var(--hc-clr-seven);
    --hc-ts-checked-bg: var(--hc-clr-eight);
    --set-theme-mode-selected-border: var(--hc-clr-two);
    --apps-txt: var(--hc-clr-white);
    --ml-doc-card-selected-border: var(--hc-clr-five);
    --ml-doc-upload-todo-bg: var(--hc-clr-five);
    --ml-doc-upload-done-bg: var(--hc-clr-two);
    --chat-dd-bg: var(--hc-clr-black);
    --chat-dd-msg: var(--hc-clr-white)
  }
  .chat-header {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.chat-header .hc-logo img {
    padding: 10px;
}


/* Para manejar el error*/
.hc-error-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh; 
      background-color: #f5f5f5; 
      color: #e30613; 
      font-family: "Holcim-Regular", sans-serif;
      text-align: center;
      padding: 20px;
    }

    .hc-error-title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .hc-error-msg {
      font-size: 16px;
      color: #444; 
    }