body {
  background-color: rgb(244, 245, 249);
  font-family: 'Poppins' !important;
}

html, body, #root {
  height: 100%;
  overflow: auto;
}

.siteLayoutContent {
  min-height: 280px;
  /* background: linear-gradient(30deg, #762889, #eea8ff); */
  /* background-image: url("../../../../assets/images/banner-bg.png"); */
  /* background-color: rgb(244, 245, 249); */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  height: 100vh;
}

.sider-logo {
  margin-left: 10px;
  padding: 10px;
}

/* Default flex container styles */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Align items to the end by default */
}

.primary-color {
  color: #6904a5 !important;
}

.rounded-30 {
  border-radius: 30px;
}

.color-gray {
  color: #A4A4A4;
}

.text-input {
  padding: 4px 11px !important;
  background-color: #f4f5f9;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 5px;
}

.min-w-100 {
  min-width: 100px;
}

.shadow-primary {
  box-shadow: 0 4px 8px 0 rgba(105, 4, 165, 0.4);
  transition: 0.3s;
}

/* TABLE */
.bg-table {
  background-color: #efefef;
  border-bottom: 1px solid #d9d9d9 !important;
}

.bg-table-white {
  background-color: #ffffff;
  border-bottom: 1px solid #D9D9D9 !important;
}

/* WIZARD */
.dot {
  width: 7px;
  height: 7px;
  background-color: #d9d9d9;
  border-radius: 20px;
  margin-left: 5px;
  margin-right: 5px;
}

.dot-active {
  background-color: #6904a5 !important;
}

/* MODAL */
.ant-modal-content {
  border-radius: 24px !important;
}

/* SETTING */
.setting-container {
  display: flex;
  flex-wrap: wrap;
}

.setting-column {
  /* flex-basis: 33.33%; */
  /* Each column occupies one-third of the container */
  padding: 10px;
}

.min-height-90 {
  min-height: 80%;
}

.max-height-90 {
  max-height: 80%;
}

.min-height-350 {
  min-height: 350px;
}

.max-height-350 {
  max-height: 350px;
}

.cursor-pointer {
  cursor: pointer;
}

/* COLLAPSE */
.ant-collapse-header {
  padding: 4px 11px !important;
  background-color: #f4f5f9;
  background-image: none;
  border-width: 1px;
  border-color: #d9d9d9;
  border-radius: 5px !important;
}

/* SELECT */
.custom-select-input .ant-select-selector {
  height: 70px !important;
  border-radius: 20px;
}

.btn-custom-select {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0 11px;
  width: 100%;
  display: flex;
  height: 70px;
  border-radius: 20px;
}

/* HEADER */
.content-wrapper-start-to-center {
  display: flex;
  justify-content: flex-start;
}

.content-wrapper-end-to-center {
  display: flex;
  justify-content: flex-end;
}

/* SEARCH */
.search-input {
  border-radius: 20px;
  padding-left: 24px;
  padding-right: 24px;
  height: 35px;
}

/* ERROR */
.ant-form-item-explain {
  height: auto;
  opacity: 1;
  text-align: start;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .flex-container {
    justify-content: flex-start;
    /* Align items to the start on mobile */
  }

  .setting-column {
    flex-basis: 100%;
    /* Each column occupies the full width of the container */
  }

  .content-wrapper-start-to-center, .content-wrapper-end-to-center {
    justify-content: center;
  }

  .ant-picker-panel-container {
    overflow-y: auto !important;
    max-height: 300px !important;
  }

  .ant-picker-panels {
    display: grid !important;
  }

  .card-movil-100 {
    width: 100%;
  }

  .arrow-icon{
    rotate: 90deg;
  }
}
.matrix-container{
  height: 25rem;
  overflow: auto;
  position: relative;
  border: 1px solid #dedede;
  background-color: #fafafa;
  overflow-x: auto;
  margin-top: 20px;
  border-radius: 4px;
}

.matrix-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.matrix-overlay .ant-spin {
  color: #1890ff;
}

.matrix-overlay .ant-spin-text {
  margin-top: 10px;
  font-size: 16px;
  color: #1890ff;
}

.matrix{
  background-color: #fefefe;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.matrix thead{
  background-color: #efefef;
  position: sticky;
  top: 0;
  z-index: 10;
}

.matrix th{
  padding: .5rem;
  text-align: center;
  border-bottom: 1px solid #dedede;
  width: auto;
  min-width: 150px;
  background-color: #f2f2f2;
  font-weight: bold;
}

.matrix .intersection{
  background-color: #efefef;
}

.matrix .intersection:hover{
  cursor: not-allowed;
}

.matrix th:first-child{
  position: sticky;
  left: 0;
  z-index: 20;
  background-color: #efefef;
}

.matrix td:first-child {
  position: sticky;
  left: 0;
  background-color: #efefef;
  z-index: 5;
}

.matrix td{
  padding: .5rem;
  border: 1px solid #dedede;
  height: 3rem;
  user-select: none;
}

.matrix thead tr th:first-child {
  z-index: 30; 
}

.matrix .column-highlight, .matrix tr:hover td{
  background-color: #dec9eb;
  border: none;
}

.matrix td:not(:first-child){
  text-align: center;
}

.matrix td:hover{
  background-color: #ede1f3 ;
  cursor: pointer;
}

.matrix td input{
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  background: none;
  text-align: center;
}

.matrix td:has(input) {
  padding: 0;
}


.matrix td .edit-icon{
  display: none;
  pointer-events: none;
}

.matrix td:not(.intersection):hover .edit-icon{
  display: inline;
}

.intersection {
  background-color: #f2f2f2;
}

.edit-icon {
  visibility: hidden;
  margin-left: 5px;
  color: #1890ff;
  cursor: pointer;
}

.matrix td:hover .edit-icon {
  visibility: visible;
}

.column-highlight {
  background-color: rgba(24, 144, 255, 0.05);
}

.matrix th:first-child.column-highlight,
.matrix td:first-child.column-highlight {
  background-color: #e6e6e6;
}

.intersection.column-highlight {
  background-color: #e6e6e6;
}

.temp-value {
  background-color: rgba(0, 255, 30, 0.1) !important;
}

.saving-cell {
  background-color: rgba(24, 144, 255, 0.1);
}

.cooldown-cell {
  cursor: not-allowed;
}

.cooldown-cell .edit-icon {
  visibility: hidden !important;
}

.disabled-cell {
  cursor: not-allowed;
}

.disabled-cell .edit-icon {
  visibility: hidden;
}

.loading-icon {
  margin-left: 5px;
  color: #1890ff;
}

.matrix-container .matrix-saving{
  width: 100%;
  height: 100%;
  background-color: rgba(241, 96, 96, 0.523);
  position: absolute;
  overflow: hidden;
  z-index: 100;
}