/* === Main components === */
/*** Headers ***/
/*** Footer ***/
/*** Headings and titles ***/
/*** Links ***/
/* === Fonts === */
/* === Navbar === */
/*** Navbar Dropdown ***/
/*** Mega Menu ***/
/* Options (First Level) */
/* Collapse (Second Level) */
/* List (Third Level) */
/*** Dropdown Item list (Fourth Level) ***/
/*** User dropdown ***/
/*** Menu help ***/
/*** Navbar Toggler ***/
/* === Sidebar === */
/*** Sidebar Dropdown ***/
/* === Forms components === */
/*** Helpers ***/
/*** Labels ***/
/*** Placeholders ***/
/*** Form controls ***/
/*** Input groups***/
/*** Custom controls (Checkboxes and Radios ) ***/
/*** Datetimepicker Bootstrap ***/
/*** Bootstrap select ***/
/*** Inputs and Buttons ***/
/* === Report components === */
/*** Filters ***/
/***  Group Filters ***/
/*** Tables ***/
/*** Pagination ***/
/* === Dashboard === */
/* === Other components === */
/*** Cards ***/
/*** Tabs***/
/*** Wizards ***/
/*** User register ***/
/*** Loaders / Spinners***/
/*** Dfw file ***/
/* Calendar (Full calendar) */
/* Image actions */
/* Dfw Cropper */
/* ID Card */
/* Push modal */
/* Layouts */
/* Dfw Scrollbar */
/*** Buttons variants ***/
/*Grid*/
.grid-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  padding: 15px; }

/* Columns gap */
.column-gap-5 {
  grid-column-gap: 5px !important;
  padding: 5px !important; }

.column-gap-10 {
  grid-column-gap: 10px !important;
  padding: 10px !important; }

.column-gap-15 {
  grid-column-gap: 15px !important;
  padding: 15px !important; }

.column-gap-20 {
  grid-column-gap: 20px !important;
  padding: 20px !important; }

.column-gap-25 {
  grid-column-gap: 25px !important;
  padding: 25px !important; }

/* Dynamic dynamic */
.grid-dynamic {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; }
  .grid-dynamic:has(> :nth-child(1)):not(:has(> :nth-child(2))) {
    grid-template-columns: repeat(1, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(4, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(5, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(6, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
    grid-template-columns: repeat(7, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(8)):not(:has(> :nth-child(9))) {
    grid-template-columns: repeat(8, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
    grid-template-columns: repeat(9, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
    grid-template-columns: repeat(10, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(11)):not(:has(> :nth-child(12))) {
    grid-template-columns: repeat(11, minmax(10px, 1fr));
    max-width: 100vw; }
  .grid-dynamic:has(> :nth-child(12)):not(:has(> :nth-child(13))) {
    grid-template-columns: repeat(12, minmax(10px, 1fr));
    max-width: 100vw; }

.grid-dynamic > * {
  min-width: 0;
  overflow: hidden; }

/* Align items */
.align-items-normal {
  align-items: normal; }

.align-items-stretch {
  align-items: stretch; }

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

.align-items-flex-start {
  align-items: flex-start; }

.align-items-flex-end start {
  align-items: flex-end start; }

.align-items-end {
  align-items: end; }

.align-items-baseline {
  align-items: baseline; }

.align-items-initial {
  align-items: initial; }

.align-items-inherit {
  align-items: inherit; }

@media (min-width: 992px) {
  /* Grid lg */
  .grid-lg-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; }
  .grid-lg-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 15px; } }

/* Scrollbar */
.dfw-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #adadad whitesmoke; }
  .dfw-scrollbar::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: whitesmoke; }
  .dfw-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #adadad; }

.dfw-scrollbar-vertical {
  overflow-y: auto;
  height: calc(100vh - 80px); }

.dfw-scrollbar-horizontal {
  overflow-x: auto;
  white-space: nowrap;
  /* si es texto o elementos inline */ }