/* --------------------------------------------------------------------------------------------- */
/* ######################################### DARK THEME ######################################## */
/* --------------------------------------------------------------------------------------------- */
body.dark table.dataTable, body.dark table.dataTable td p { color: #fff; }
/* body.dark .dataTables_length select, body.dark .dataTables_filter input { color: #fff; background-color: #131c21; border-color: #131c21; } */
body.dark .dataTables_length select, body.dark .dataTables_filter input { background-color: #505658; color: #fff; }
body.dark table.dataTable tbody tr.odd, body.dark table.dataTable tbody tr.odd + tr.child { background: #464c4e !important; }
body.dark table.dataTable tbody tr.even, body.dark table.dataTable tbody tr.even + tr.child { background: #505658 !important; }  
body.dark table.dataTable tbody tr:hover { color: #fff; }
/* body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled) { color: #fff !important; } */
/* body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.previous):not(.next) { border-color: #fff !important; } */
/* body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.previous):not(.next):hover { border-color: var(--sauco) !important; } */

/* --------------------------------------------------------------------------------------------- */
/* ####################################### STYLE DATATABLE ##################################### */
/* --------------------------------------------------------------------------------------------- */
table.dataTable *:not(i) { font-family: 'Quicksand', sans-serif; }
.dataTables_wrapper { display: flex; flex-flow: column; height: 100%; }
.content_datatable { overflow: auto; width: 0; min-width: 100% !important; flex: 1; }

.dataTables_wrapper label, 
.dataTables_info,
.dataTables_processing, 
.dataTables_paginate { color: #aaa !important; }

.dataTables_processing { padding: 0; }

table.dataTable.row-border tbody th, 
table.dataTable.row-border tbody td, 
table.dataTable.display tbody th, 
table.dataTable.display tbody td { border: none !important; }

table.dataTable tbody tr.odd + tr.child, table.dataTable tbody > tr.odd.child:hover { background: #f5f5f5 !important; }
table.dataTable tbody tr.even + tr.child, table.dataTable tbody > tr.even.child:hover { background: #fff !important; }
table.dataTable > tbody > tr.child ul.dtr-details { text-align: left; }
table.dataTable > tbody > tr.child span.dtr-title { font-weight: 600 !important; }
table.dataTable > tbody > tr.child span.dtr-data { margin-left: 20px; }
table.dataTable > tbody > tr.child ul.dtr-details>li { display: flex; justify-content: space-between; }

table.dataTable { border: none !important; color: #444; }
table.dataTable thead i { font-size: 20px; margin-right: 5px; }
.dataTables_length select, .dataTables_filter input { outline: none; margin-bottom: 20px; }
table.dataTable thead th {
  z-index: 1;
  position: sticky;
  top: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background: var(--theme); 
  color: #fff;
  border-bottom: none !important;  }
table.dataTable.compact thead th { padding: 8px 17px; }
/* table.dataTable tbody tr { background-color: transparent; } */
table.dataTable tbody tr:hover { color: var(--theme); }
table.dataTable tbody tr td { font-size: 14px; line-height: 1.2; }
table.dataTable tbody tr td .fa-circle { font-size: 12px; }
table.dataTable tbody tr td.action { white-space: nowrap; }

.dataTables_paginate.paging_simple_numbers > span { margin-right: 3px; }

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next),
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  display: inline-flex;
  justify-content: center;
  align-items: center;  
  width: 36px;
  height: 36px;
  outline: none;
  padding: 0;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--theme) !important;
  font-weight: 500; }

.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--theme) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):active {
  background: var(--theme) !important;
  color: #fff !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active {
  box-shadow: 0 0 0 0.1rem var(--rgbatheme) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled):hover {
  border-color: var(--theme) !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: #888 !important; }

.dataTables_wrapper .head_datatable { display: flex; justify-content: space-between; }
.dataTables_wrapper .title_table { display: flex; align-items: center; margin-bottom: 0; font-size: 18px; font-weight: 600; color: #bbb; }
.dataTables_wrapper .title_table > i { font-size: 28px; margin-right: 8px; }

table .image > div, 
table td.child span.dtr-data > div { display: flex; align-items: center; text-align: left; }
table .image div > img, 
table td.child span.dtr-data div > img  { flex: none; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 10px; }

table td.image_multiple > .content { display: flex; align-items: center; text-align: left; }
table td.image_multiple > .content > div {
  flex: none;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px; }
table td.image_multiple > .content > div > img { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  border-radius: 50%;
  object-fit: cover;
}
table td.image_multiple > .content > div.images2 > img:nth-of-type(2) { animation: opacity2 5s ease-in-out infinite alternate; }
table td.image_multiple > .content > div.images3 > img { animation: opacity3 15s ease-in-out infinite; }
table td.image_multiple > .content > div.images3 > img:nth-of-type(1) { animation-delay: -5s; }
table td.image_multiple > .content > div.images3 > img:nth-of-type(2) { animation-delay: -10s; }
@keyframes opacity2 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes opacity3 {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

/* --------------------------------------------------------------------------------------------- */
/* ################################## RESPONSIVE STYLES ######################################## */
/* --------------------------------------------------------------------------------------------- */
/* Bootstrap5 grid | xs < 576px | sm ≥ 576px | md ≥ 768px | lg ≥ 992px | xl ≥ 1200px | xxl ≥ 1400px */
/* #################### xs < 576px ##################### */
@media screen and (max-width: 575px) {
  .head_datatable { flex-flow: column; align-items: center; }
  .dataTables_wrapper .dataTables_filter { margin-top: 20px !important; }
}
/* #################### sm ≥ 576px ##################### */
@media screen and (min-width: 576px) and (max-width: 767px) {
  .head_datatable { flex-flow: column; align-items: center; }
  .dataTables_wrapper .dataTables_filter { margin-top: 20px !important; }
}
/* #################### md ≥ 768px ##################### */
@media screen and (min-width: 768px) and (max-width: 991px) { 
  .head_datatable { flex-flow: column; align-items: center; }
  .dataTables_wrapper .dataTables_filter { margin-top: 20px !important; }
}
/* #################### lg ≥ 992px ##################### */
@media screen and (min-width: 992px) and (max-width: 1199px) { 
}
/* #################### xl ≥ 1200px #################### */
@media screen and (min-width: 1200px) and (max-width: 1399px) { 
}
/* #################### xxl ≥ 1400px ################### */
@media screen and (min-width: 1400px) { 
}