* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

:root {
  --body-color: #f5f5f5;
  --sidebar-color: #fff;
  --primary-color: #006fed;
  --primary-color-light: #f6f5ff;
  --toggle-color: #ddd;
  --text-color: #707070;
  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--toggle-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

body {
  min-height: 100vh;
  background-color: var(--body-color);
  transition: var(--tran-05);
  overflow-x: hidden;
  background: #ecf0f3;
}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --text-color: #ccc;
}

/* .container {
  display: flex;
} */

/* 
! start here
! start here
! start here
! start here
*/

main {
  padding: 70px;
}

@media screen and (width <= 480px) {
  main {
    padding: 70px 10px 20px;
  }
}

.columna-1 {
  width: 15%;
}

.columna-2,
.columna-3 {
  width: 35%;
}

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-height: calc(100vh) !important;
}

.parent > div {
  display: grid;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  background: #f1f1f1;
  box-shadow: 20px 20px 40px #e3e3e3, -20px -20px 40px #ffffff;
  /* margin: 10px; */
  transition: all 0.2s ease;
}

.parent > div:hover {
  box-shadow: 20px 20px 60px #c6c6c6, -20px -20px 60px #ffffff;
  transform: translateY(-4px);
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.div3 {
  grid-area: 1 / 2 / 3 / 4;
}

.div4 {
  grid-area: 1 / 4 / 3 / 6;
}

.div5 {
  grid-area: 3 / 1 / 5 / 6;
}

.header {
  height: 60px;
  width: calc(100% - 260px);
  display: flex;
  align-items: center;
  background-color: #5858585a;
  backdrop-filter: blur(4px);
  position: fixed;
}

.parent div h3 {
  font-size: 40px;
  color: #008ffb;
  text-align: center;
}

.parent .div1,
.parent .div2 {
  align-items: baseline;
}

.parent h2 {
  font-size: 24px;
  font-weight: 500;
}

.parent div h3 > span {
  font-size: 18px;
  display: block;
  color: #6e6e6e;
}
.parent div h3 > span > span {
  color: #009528;
}

.tablaventas,
.dataTables_length,
#example_filter,
.dataTables_length select,
#example_filter input,
.dataTables_info,
.dataTables_paginate a,
.paginate_button {
  color: #202020 !important;
}

.dataTables_length select option {
  color: #000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: #242424 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: rgb(65, 182, 255) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #242424 !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 12px !important;
}

.odd {
  background: rgba(203, 203, 203, 0.1) !important;
}

.even {
  background: rgba(128, 128, 128, 0.1) !important;
}

.contenedor__tablaventas label {
  box-shadow: none !important;
  color: #2b2b2b;
}

.contenedor__tablaventas label:hover {
  box-shadow: none !important;
  color: #2b2b2b;
}

@media screen and (width <= 800px) {
  main {
    padding: 12px 20px;
    padding-top: 80px !important;
  }

  .parent {
    display: block;
  }

  .parent > div {
    margin: 40px 0;
  }
}