/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Form Control */
.form-control,
.form-select,
.flatpickr-input {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  outline: 0 !important;
  margin: 0;
  font: inherit;
  text-transform: none;
  font-family: inherit;
  display: block;
  /* width: 100%; */
  font-size: 1rem;
  line-height: 1.42857143;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  border-radius: 4px;
  box-shadow: none;
  height: 43px;
  max-width: 100%;
  padding: 7px 12px;
  color: #000000;
  background: #FFF;
  border: 1px solid rgba(201, 204, 208, 0.2);
  -webkit-tap-highlight-color: rgba(205, 205, 205, 0);
}

.select-multiple {
  min-height: 150px;
}

.select2-dropdown {
  z-index: 2000;
}

.select2-selection {
  padding: 3px;
}

.select2-container .select2-selection--multiple {
  min-height: 43px;
}

textarea.form-control {
  height: 200px;
}

/* Dark Mode */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme p,
body.dark-theme small,
body.dark-theme i,
body.dark-theme table tr,
body.dark-theme * td,
body.dark-theme * th,
body.dark-theme * pre,
body.dark-theme * label,
body.dark-theme .nav-link,
body.dark-theme .pagination-info,
body.dark-theme .page-list,
body.dark-theme .saveBtn,
body.dark-theme .dropdown-menu a,
.panel-heading {
  /* color: #96a2b4; */
  color: #cfcfcf;
}
body.dark-theme * tr[class^="table-"] td,
body.dark-theme * tr[class^="table-"] td i {
  color: #000;
}
body.dark-theme .page-item .page-link,
body.dark-theme .page-item.page-last-separator .page-link {
  color: #FFF;
  background-color: #6c757d;
  border-color: #4a5056;
}
body.dark-theme .page-item.active .page-link {
  color: #FFF;
  background-color: #bbb;
  border-color: #4a5056;
}
body.dark-theme .progress small {
  color: #000;
}
body.dark-theme .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table.table-bordered.table-hover.open {
  background: #232323;
  color: #FFF;
}
/* Tables */
body.dark-theme .table {
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #cfcfcf;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #cfcfcf;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #cfcfcf;
  color: #cfcfcf;
  border-color: #373b3e;
}
body.dark-theme .text-muted {
  color: #8d99a4!important;
}
/* body.dark-theme a {
  color: #74acff;
} */
body.dark-theme label.dropdown-item,
body.dark-theme .modal-body .fstlist,
body.dark-theme .btn i {
  color: #FFF;
}
body.dark-theme,
body.dark-theme .page-wrapper,
body.dark-theme .page-content {
  background-color: #1b1a1a;
}
body.dark-theme .card {
  background-color: #252729;
  color: #FFF;
  border: none;
}
body.dark-theme .help-info-card {
  background-color: #35404a;
}
body.dark-theme .list-group-item {
  background-color: #36393e;
  color: #FFF;
}
body.dark-theme hr {
  color: #969696;
}
/* Form */
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .flatpickr-input,
body.dark-theme .dynamic-select .dynamic-select-header,
body.dark-theme .select2 {
  color: #FFF;
  background-color: #1b1a1a;
  border: 1px solid rgba(120,130,140,0.2);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body.dark-theme .select2-selection {
  background-color: #1b1a1a;
  border: none;
}
body.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice,
body.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice button {
  background-color: #2b2e34;
  border: 1px solid #1b1a1a;
  color: #FFF;
}
body.dark-theme .select2-results__option--selectable {
  background-color: #2b2e34;
}
body.dark-theme .select2-container--default .select2-results__option--selected {
  background-color: #1b1a1a;
}
body.dark-theme .select2-dropdown {
  border: 1px solid #1b1a1a;
}
body.dark-theme input:disabled,
body.dark-theme input:read-only,
body.dark-theme select:disabled,
body.dark-theme .dynamic-select-disabled .dynamic-select-header {
  background-color: #434343;
  color: #FFF;
}
body.dark-theme .modal-content,
body.dark-theme .modal-body {
  background-color:#2b2e34;
  color:#FFF;
}

body.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  background-color: #eceef4;
}
body.dark-theme .home-section {
  background: #232323;
}
body.dark-theme .accordion-button,
body.dark-theme .accordion-item {
  background: #36393e;
  color: #FFF;
  border: none;
  text-decoration: none;
}
body.dark-theme .accordion-body {
  background: #474a50;
  color: #FFF;
}
body.dark-theme .popover {
background-color: #2b2e34;
}
body.dark-theme .dropdown-menu {
  background-color: #2b2e34;
  border: solid 1px #110f1e
}
body.dark-theme .dropdown-menu a:hover {
  background-color: #110f1e;
}
/* Dark Mode - Apex Charts */
body.dark-theme .apexcharts-legend-text {
  color: #FFF!important;
}
body.dark-theme .apexcharts-xaxis tspan,
body.dark-theme .apexcharts-yaxis tspan,
body.dark-theme .apexcharts-yaxis text,
body.dark-theme .apexcharts-title-text {
  fill: #FFF;
  color: #FFF;
}
/* Metric Box */
body.dark-theme .metric-box a,
body.dark-theme .metric-box i,
body.dark-theme .metric-box h1,
body.dark-theme .metric-box h2,
body.dark-theme .metric-box h3,
body.dark-theme .metric-box h4,
body.dark-theme .metric-box h5 {
  color: #FFF;
}
/* Nav Tabs */
.nav.nav-tabs {
  background-color: inherit;
  color: #FFF;
}

body.dark-theme .nav.nav-tabs .nav-link.active {
  background-color: #495057;
  border-left: none;
  border-right: none;
  border-top: none;
  color: #FFF;
}

/* Light Mode */
body.light-theme .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table.table-bordered.table-hover.open {
  background: #f8f8f6;
  color: #000;
}
body.light-theme,
body.light-theme .page-wrapper,
body.light-theme .page-content {
  background-color: #f8f8f6;
}
body.light-theme .card {
  background-color: #faf9f6;
}
body.light-theme .help-info-card {
  background-color: #e5e3dd;
}
body.light-theme {
  background: #f8f8f6!important;
}
body.light-theme .home-section {
  background: #f8f8f6;
}
/* Light Mode Inputs */
body.light-theme .form-control,
body.light-theme .form-select,
body.light-theme .flatpickr-input,
body.light-theme .dynamic-select .dynamic-select-header {
  color: #000000;
  background: #FFF;
  border: 1px solid rgb(206 206 206);
  -webkit-tap-highlight-color: rgba(205, 205, 205, 0);
}
body.light-theme input:disabled,
body.light-theme input:read-only,
body.light-theme select:disabled,
body.light-theme .dynamic-select-disabled .dynamic-select-header {
  background-color: #d7d7d7;
}
body.light-theme .saveBtn,
body.light-theme .panel-heading {
  color: #000;
}
/* Metric Box */
body.light-theme .metric-box a,
body.light-theme .metric-box i,
body.light-theme .metric-box h1,
body.light-theme .metric-box h2,
body.light-theme .metric-box h3,
body.light-theme .metric-box h4,
body.light-theme .metric-box h5,
body.light-theme .metric-box .metric-circle {
  color: #353232;
}

/* Custom Padding / Margin */
.mt--20 {
  margin-top: -20px;
}
.mt--15 {
  margin-top: -15px;
}
.mt--10 {
  margin-top: -10px;
}
.mt--5 {
  margin-top: -5px;
}

/* Nav Tabs */
.nav.nav-tabs {
  background-color: inherit;
  color: #495057;
}

body.light-theme .nav.nav-tabs .nav-link.active {
  background-color: #FFF;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* Body */
body {
  font-size: 0.9rem;
}

/* Tables */
.phpef-table {
  line-height: 1.42857143;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #f1f2f7;
  box-sizing: content-box;
  border-color: rgba(120,130,140,0.13);
  border-radius: 10px;
  width: 99.8% !important;
}

/* Metric Box */
.metric-box {
  border-radius: 5px;
}

/* Anchor */
a {
  text-decoration: none!important;
}

/* Font Sizes */
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.625rem;
}
h3 {
  font-size: 1.375rem;
}
h4 {
 font-size: 1.125rem;
}
h5 {
 font-size: 1rem;
}
h6 {
 font-size: 0.875rem;
}

/* Input */
input, select {
  border: 1px solid #aaaeb2;
}
input.changed, select.changed, textarea.changed {
  border: 4px solid #ffbd43!important;
}

/* Row Labels */
.rowLabel {
  margin-top:10px;
}

/* Form Select / Control */
.form-select {
  display: inline-block!important;
  padding: .575rem 2.5rem .575rem .75rem!important;
}
.form-control,
.input-group-append > button {
  padding: 0.575rem;
}

.form-control-color {
  padding: 2px;
  width: 100%;
  height: 38px;
}

/* Horizontal Rule */
.hrNoSpace {
  margin-top: 0.3rem!important;
  margin-bottom: 0.3rem!important;
}
hr.solid {
  border-top: 3px solid #b8bfce;
}

/* Paragraph - No Margin */
p.pNoMargin {
  margin: 0px!important;
}

/* Save Buttons */
.saveBtn {
  position: relative;
  left: 0;
  transition: left 0.3s;
  visibility: hidden;
}

/* Metric Circle */
.metric-circle {
  border: solid 2px;
  border-radius: 100px;
  padding: 10px 20px;
}

/* Popover */
body .popover {
  display: none;
  position: absolute;
  background-color: #f8f9fa;
  border: 1px solid #007bff;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
  width: 300px; /* Adjust as needed */
  top: 35%;
}

/* Change Log */
.changeLogFrame {
  width: 100%;
  height: 320px;
}
.changelog-modal {
  height:40%;
  border-radius: 1.3rem!important;
}
.changelog-btn {
  margin: 0%!important;
}

/* Save Button Show */
.saveBtnShow {
  left: -25px;
  visibility: visible;
}

/* Form Actions */
.toolsMenu select {
  margin-top:10px;
}
.btn-group > button {
  margin-top: 12px;
}

/* License Usage Page */
.license-card-group {
  margin: 1% 10%;
}

/* Cards */
.card-rounded {
  border-radius: 15px;
}
.card-body p {
  margin-bottom: 0px;
}

/* Accordion */
.accordion-button {
  padding: 0.75rem 1rem;
}

.accordion-header .alt-text {
  position:absolute;
  right: 50px;
  font-size: small;
  color: gray;
}

/* Tabs */
.nav.nav-tabs {
  min-width: 160px;
}
.d-flex .nav.nav-tabs {
  border-right: 1px solid #dee2e6;
  border-bottom: 0px;
}
.tab-content {
  width: 100%;
  padding: 0 25px;
  overflow-x: hidden;
}
.tab-content hr {
  margin-left:20px;
  width: 95%;
}
.nav.nav-tabs .nav-link.active {
  border-bottom: 2px solid #53e69d;
}
.nav.nav-tabs .nav-link {
  border-bottom: none;
}
.d-flex .nav li.nav-item,
.nav.nav-tabs .nav-link {
  width: 100%;
}

/* Panel */
.panel-heading {
  -webkit-text-size-adjust: 100%;
  line-height: 1.42857143;
  font-family: Rubik,sans-serif;
  text-align: left;
  cursor: auto;
  box-sizing: border-box;
  outline: 0 !important;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-weight: 500;
  font-size: 16px;
  padding: 20px 25px;
  border-color: #838383;
}

.panel-wrapper {
  -webkit-text-size-adjust: 100%;
  font-size: 1rem;
  line-height: 1.42857143;
  font-family: Rubik,sans-serif;
  font-weight: 300;
  text-align: left;
  cursor: auto;
  box-sizing: border-box;
  outline: 0 !important;
  padding-top: 20px;
}

/*--------------------------------------------------------------
# Pages Configuration Page
--------------------------------------------------------------*/
.table td i.navIcon {
  font-size: 32px;
  text-align: center;
  width: 100%;
  padding: 5px;
}

.table td img.navIcon {
  font-size: 32px;
  height: 32px;
  width: 32px;
  display: inline-block;
}

/* Center Icons in Pages table */
#combinedTable.table td:nth-child(3) {
  text-align: center;
}

/*--------------------------------------------------------------
# Configuration Page
--------------------------------------------------------------*/
.urlList > .list-group-item,
.inputEntries > .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.urlList > .list-group-item.newUrl
.inputEntries > .list-group-item.inputEntry {
  background-color: #fffaf0;
}

/*--------------------------------------------------------------
# Reports
--------------------------------------------------------------*/
/* Filter dropdown */
.reporting-section .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.reporting-section .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.reporting-section .filter .icon:hover,
.reporting-section .filter .icon:focus {
  color: #4154f1;
}

.reporting-section .filter .dropdown-header {
  padding: 8px 15px;
}

.reporting-section .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.reporting-section .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.reporting-section .info-card {
  padding-bottom: 10px;
  height: calc(100% - 5px);
}

/* Chart Cards */
.reporting-section .chart-card {
  padding-bottom: 10px;
  height: calc(100% - 15px);
}

/* Chart Cards */
.reporting-section .bar-chart-card {
  margin-bottom: 10px;
}

.reporting-section .info-card h6 {
  font-size: 28px;
  /* color: #012970; */
  font-weight: 700;
  margin: 0;
}

.reporting-section .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.reporting-section .metric-circle {
  border: solid 2px #00bd4d;
  border-radius: 100px;
  padding: 10px 20px;
}

.reporting-section .reports-today-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.reporting-section .reports-month-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.reporting-section .reports-year-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

/* Activity */
.reporting-section .activity {
  font-size: 14px;
}

.reporting-section .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.reporting-section .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.reporting-section .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.reporting-section .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.reporting-section .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.reporting-section .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.reporting-section .news .post-item+.post-item {
  margin-top: 15px;
}

.reporting-section .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.reporting-section .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.reporting-section .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.reporting-section .news h4 a:hover {
  color: #4154f1;
}

.reporting-section .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

.reporting-section .row {
  margin-bottom: 10px;
}

/* Granularity */
.granularity-card .btn-group {
  display: inline-flex;
  vertical-align: middle;
  flex-direction: row;
  flex-wrap: wrap;
}
.granularity-card .btn-group>.btn {
  flex: none;
}
.granularity-card button {
  width: 150px;
  margin-right: 10px!important;
}
.granularity-card .clearFilters {
  display: none;
}

/* ApexCharts */
.pie .apexcharts-legend {
  margin-bottom: 20px;
}

/* Reports End */


/*--------------------------------------------------------------
# Dashboards / Homepage
--------------------------------------------------------------*/
.homepage-item-collapse {
  display:flex;
}

.homepage-item-title {
  direction: inherit;
  visibility: visible;
  box-sizing: border-box;
  outline: 0;
  font-family: Rubik,sans-serif;
  margin: 10px 0;
  font-weight: 300;
  line-height: 22px;
  font-size: 18px;
  width: auto;
  text-wrap: nowrap;
}

.hr-alt {
  font-size: 14px;
  line-height: 1.42857143;
  font-family: Rubik,sans-serif;
  font-weight: 300;
  direction: inherit;
  visibility: visible;
  outline: 0 !important;
  height: 0;
  box-sizing: content-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  border-color: rgba(120,130,140,0.13);
  margin-left: .5rem !important;
}

.widgetTitleImage {
  height: 40px;
}

.customtab {
  background: #3e4147;
}

.customtab>li>a {
  font-size: 14px;
  list-style: none;
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-right: 2px;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #2cabe3;
  margin-bottom: -1px;
  background: 0;
}

.customtab>li>a.active {
  border-color: #53e69d;
}


/* Page Content */
.page-content{
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: inline-block;
  width: 100%;
  overflow-x: hidden;
}

/* Page Content - Container Fluid */
.page-content .container-fluid {
  height:calc(100% - 60px);
}

/* Main Window / Frame */
.mainWindow {
  padding-top: 20px;
}
.mainFrame {
  width: 100%;
  height: 100%;
}

/* Ace Editor */
.ace_editor, .ace_editor *{
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Custom Image Gallery */
body.light-theme .image-gallery {
  background-color: #faf9f6;
}
body.dark-theme .image-gallery {
  background-color: #3e4147;
}
.image-gallery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px;
  gap: 10px; /* Adjust the gap between images as needed */
}

.image-gallery .dz-message {
  display: none; /* Show when dragging files */
}

.image-gallery:not(.dz-started):hover::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.5); /* Grey out background */
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 1;
}

.image-gallery:not(.dz-started):hover .dz-message {
  display: block;
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Ensure message is above the greyed-out background */
  text-align: center;
  color: rgb(255, 255, 255); /* Optional: Change text color for better visibility */
}

.custom-image {
  width: 128px;
  height: 128px;
  object-fit: cover; /* Ensures the image fits within the specified dimensions */
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
}

.image-container .fa-trash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font-size: 24px;
  color: red;
}

.image-container:hover .fa-trash {
  display: block;
}

.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Darken effect */
  filter: blur(5px); /* Blur effect */
  opacity: 0;
  transition: opacity 0.3s;
}

.image-container:hover::before {
  opacity: 1;
}

/* Sidebar */
.sidebar,
.sidebar.close.expandOnHover:hover{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 350px;
  background: #11101d;
  transition: all 0.5s ease;
  z-index: 1000;
}
.sidebar.close,
.sidebar.close.expandOnHover{
  width: 78px;
}
.sidebar .logo-details,
.sidebar.close.expandOnHover:hover .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i
.sidebar.close.expandOnHover:hover .logo-details i{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-sm,
.sidebar.close.expandOnHover:hover .logo-sm {
  height: 50px;
  margin: 10px 0px 0px 15px;
  transition: 0.5s ease;
  transition-delay: 0.1s;
}
/* Default Logo */
.sidebar .logo-lg,
.sidebar.close.expandOnHover:hover .logo-lg {
  height: 50px;
  margin: 10px 0px 0px 5px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
  opacity: 1;
}
.sidebar.close .logo-lg,
.sidebar.close .logo-text {
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .logo-text,
.sidebar.close.expandOnHover:hover .logo-text {
  text-align: center;
  width: 100%;
  margin: 10px 25px 0px 5px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
  color: #38ee87;
  opacity: 1;
}
.sidebar.close .logo-sm {
  transform: rotate(-180deg);
  transition: 0.5s ease;
  transition-delay: 0.1s;
}
.sidebar.close.expandOnHover:hover .logo-sm {
  transform: rotate(180deg);
  transition: 0.5s ease;
  transition-delay: 0.1s;
}
.sidebar .nav-links,
.sidebar.close.expandOnHover:hover .nav-links {
  height: 100%;
  padding: 30px 0px 150px;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar,
.sidebar.close.expandOnHover:hover .nav-links::-webkit-scrollbar {
  display: none;
}
.sidebar .nav-links li,
.sidebar.close.expandOnHover:hover .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #1d1b31;
}
.sidebar .nav-links li .icon-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .icon-link{
  display: block
}
.sidebar.close.expandOnHover:hover .nav-links li .icon-link{
  display: flex;
}
.sidebar .nav-links li i{
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li a.active i {
  color: #30d22a;
}
.sidebar .nav-links li.showMenu > .icon-link i.arrow,
.sidebar .nav-links li ul.sub-menu-item.showMenu i.arrow,
.home-section .nav-bar .profile-name-user .dropdown.showMenu i.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar.close.expandOnHover:hover .nav-links i.arrow {
  display: block;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name{
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
  opacity: 1;
}
.sidebar .nav-links li a.active .link_name{
  color: #30d22a;
}
.sidebar .nav-links li ul.sub-menu a,
.sidebar .nav-links li ul.sub-menu i{
  font-size: 16px;
}
.sidebar .nav-links li img {
  height: 30px;
  width: 30px;
  margin: 10px 24px;
}
.sidebar.close .nav-links li a .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu,
.sidebar .nav-links li .sub-menu .sub-sub-menu {
  display: none;
}
.sidebar .nav-links li .sub-menu .sub-sub-menu li{
  padding: 0px 6px 0px 80px;
  /* margin-top: -10px; */
  background: #1d1b31;
}
.sidebar .nav-links li .sub-menu .sub-menu-item.showMenu .sub-sub-menu {
  display: block;
}
.sidebar.close .nav-links li .sub-menu li sub-sub-menu.showMenu li{
  margin-top: -10px;
}
.sidebar .nav-links li.showMenu .sub-menu li,
.sidebar .nav-links li .sub-menu.showMenu li sub-sub-menu.showMenu li{
  margin-top: -10px;
}
.sidebar .nav-links li .sub-menu li{
  /* padding: 6px 6px 6px 0px; */
  /* margin-top: -10px; */
  background: #1d1b31;
}
.sidebar .nav-links li .sub-menu {
  /* margin-top: -10px; */
  background: #1d1b31;
  display: none;
}
.sidebar .nav-links li .sub-menu ul.sub-sub-menu{
  padding: 0px;
}
.sidebar .nav-links li.showMenu .sub-menu,
.home-section .nav-bar .profile-name-user .dropdown.showMenu .dropdown-content{
  display: block;
}
.sidebar .nav-links li .sub-menu .sub-sub-menu a {
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 1;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 1;
  transition: all 0.3s ease;
}
.sidebar.close .nav-links li .sub-menu,
.sidebar.close .nav-links li .sub-menu .sub-sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding-top: 10px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu,
.sidebar.close .nav-links li:hover .sub-menu li:hover .sub-sub-menu,
.sidebar.close .nav-links li .sub-menu .sub-menu-item .sub-sub-menu:hover{
  top: 0;
  pointer-events: auto;
  transition: all 0.4s ease;
  opacity: 1;
}
.sidebar.close .nav-links li:hover .sub-menu a{
  padding-right: 25px;
}
.sidebar.close .nav-links li:hover .sub-menu li:hover .sub-sub-menu li {
  padding: 10px 10px 10px 25px;
}

.sidebar .nav-links li .sub-menu .link_name,
.sidebar .nav-links li .sub-menu .sub-sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name,
.sidebar.close .nav-links li .sub-menu .sub-sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
  margin-left: -15px;
}
.sidebar .nav-links li .sub-menu.blank,
.sidebar .nav-links li .sub-menu .sub-sub-menu.blank{
  /* opacity: 1; */
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
}
.sidebar .nav-links li:hover .sub-menu.blank,
.sidebar .nav-links li:hover .sub-menu .sub-sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .nav-links li a.active
.sidebar .nav-links li a.active i,
.sidebar .nav-links li .sub-menu a.active,
.sidebar .nav-links li .sub-menu a.active i {
  /* background-color: #04AA6D; */
  color: #30d22a;
}
.sidebar.close .nav-links .sub-menu > li,
.sidebar.close .nav-links .sub-menu-item {
  margin-left: -20px;
}
.sidebar.close .nav-links .sub-menu.blank > li {
  margin-left: 15px;
}  


.sidebar .sidebar-footer{
  position: fixed;
  bottom: 0;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1b31;
  padding: 12px 0;
  transition: all 0.5s ease;
}
.sidebar .nav-links li .sidebar-footer i{
  font-size: 18px;
}
.sidebar.close .sidebar-footer{
  width: 78px;
  transition: all 0.5s ease;
}
.sidebar.close .sidebar-footer a:not(:first-child){
  display: none;
}
.sidebar .nav-links li .sidebar-footer .fontDropdown-content {
  padding: 10px;
}
.sidebar .nav-links li .sidebar-footer .fontDropdown-content i {
  font-size: 1rem;
  line-height: 25px;
}

/* Sidebar Expand On Hover */
.sidebar.close.expandOnHover:hover .nav-links li .sub-menu,
.sidebar.close.expandOnHover:hover .nav-links li .sub-menu .sub-sub-menu {
  font-size: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  background: #1d1b31;
  display: none;
  position: static;
}
.sidebar.close.expandOnHover:hover .nav-links li .sub-menu .sub-menu-item.showMenu .sub-sub-menu,
.sidebar.close.expandOnHover:hover .nav-links li.showMenu .sub-menu {
  display: block;
}
.sidebar.close.expandOnHover:hover .nav-links li .sub-menu li sub-sub-menu.showMenu li {
  margin-top: -10px;
}
.sidebar.close.expandOnHover .nav-links li .sub-menu .link_name,
.sidebar.close.expandOnHover .nav-links li .sub-menu .sub-sub-menu .link_name {
  display: none;
}
.sidebar.close.expandOnHover:hover .nav-links li a .link_name,
.sidebar.close.expandOnHover:hover .nav-links li .sub-menu {
  opacity: 1;
}
.sidebar.close.expandOnHover:hover .sidebar-footer {
  width: 350px;
  transition: all 0.5s ease;
}
.sidebar.close.expandOnHover:hover .sidebar-footer a {
  display: block;
}
.sidebar.close.expandOnHover:hover .sub-menu-item.showMenu .sub-sub-menu {
  opacity: 1;
  padding: 0px;
  display:block;
}
.sidebar.close.expandOnHover:hover .sub-menu-item.showMenu li {
  opacity: 1;
  padding: 10px 10px 10px 25px;
}
.sidebar.close.expandOnHover:hover .sub-menu-item.showMenu li a {
  opacity: 1;
  padding: 5px 0px;
}

/* Sidebar Font Size Dropdown */
.fontDropBtn {
  border: none;
  cursor: pointer;
}
.fontDropdown {
  position: relative;
  display: inline-block;
}
.fontDropdown-content {
  bottom: 100%;
  visibility: hidden;
  position: absolute;
  background-color: #31353d;
  min-width: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.fontDropdown-content.show {
  visibility: visible;
}
.fontDropdown-content i {
  color: #6c7b88;
  font-size: 1rem;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.fontDropdown-content i:hover {background-color: #393f4c;}

/* Sidebar Footer */
.sidebar-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
}
.sidebar-footer > a {
  flex-grow: 1;
  text-align: center;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.sidebar-footer > a .notification {
  position: absolute;
  top: 0;
}
.sidebar-footer .fa,
.sidebar-footer .far,
.sidebar-footer .fas,
.sidebar-footer .fa-regular,
.sidebar-footer .fa-solid {
  line-height: unset;
  color: #FFF;
}

/* Home Section */
.home-section{
  position: relative;
  height: 100%;
  transition: all 0.5s ease;
  z-index: 500;
  overflow-y: hidden;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}
.home-section .nav-bar{
  height: 60px;
  display: flex;
  align-items: center;
}
.home-section .nav-bar .bx-menu,
.home-section .nav-bar .title-text{
  color: #FFF;
  font-size: 35px;
}
.home-section .nav-bar .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}
.home-section .nav-bar .title-text{
  font-size: 20px;
  font-weight: 600;
}

/* Nav Bar */
/* nav-bar */
.nav-bar {
  background-color: #110f1e;
  color: #FFF;
}

/* Style the links inside the navigation bar */
.nav-bar div a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding-right: 14px;
  text-decoration: none;
  font-size: 17px;
}

/* Hide the link that should open and close the nav-bar on small screens */
.nav-bar .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.nav-bar .dropdown {
  float: left;
  /* overflow: hidden; */
}

/* Style the dropdown button to fit inside the nav-bar */
.nav-bar .dropdown button {
  font-size: 17px;
  border: none;
  outline: none;
  color: #FFF;
  background-color: inherit;
  height: 60px;
  padding-right: 14px;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.nav-bar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #110f1e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.nav-bar .dropdown-content a {
  float: none;
  color: #FFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-bar .profile-name-user .dropdown {
  direction: rtl;
}
.nav-bar .profile-name-user .dropdown .dropdown-content ul {
  padding-left: 0px;
  margin-bottom: 0px;
  list-style-type: none;
}

.nav-bar .profile-name-user .dropdown .dropdown-content ul li a i {
  padding-right: 5px;
}

.nav-bar .profile-name-user .dropdown a i {
  padding-left: 7px;
  padding-top: 4px;
}


.nav-bar .profile-name-user .dropdown button {
  padding-left: 5px;
}

.nav-bar .profile-name-user .dropdown-header {
  text-align: center;
}
.nav-bar .profile-name-user .dropdown-header h6 {
  font-size: 1rem;
  color: #FFF;
}
.nav-bar .profile-name-user .dropdown-header small {
  font-size: 1em;
  color: #6c757d;
}

/* Add a dark background on nav-bar links and the dropdown button on hover */
.nav-bar a:hover, .dropdown:hover button {
  background-color: #1d1b31;
}

/* Add a grey background to dropdown links on hover */
.nav-bar .dropdown-content a:hover {
  background-color: #1d1b31;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.nav-bar .dropdown:hover .dropdown-content {
  display: block;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #525965;
}
::-webkit-scrollbar-thumb:active {
  background: #525965;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Code Windows */
pre {
  background-color: #000;
  color:#ff7676;
  overflow: auto;
  font-family: 'Monaco', monospace;
  padding: 1em 1em;
}
pre code {
  border: none;
  background: none;
  font-family: Monaco, monospace;
  line-height: 1.2em;
  padding: 0.1em;
  letter-spacing: normal;
  word-break: break-all;
  color:#ff7676;
  /* white-space: pre-wrap; */
}

/* FlatPickr Calendar */
.flatpickr-month div {
  padding: 0!important;
}
.flatpickr-current-month > .numInputWrapper span.arrowDown, .flatpickr-current-month > .numInputWrapper span.arrowUp {
  display: none;
}

/* Bootstrap Table */
.bootstrap-table {
  padding: 10px;
}
table {
  font-size: 1rem;
}
body .bootstrap-table .fixed-table-container .fixed-table-body {
  height: auto;
}
/* No Expand for DetailFormatter */
.no-expand .detail-icon {
  display: none;
}

/* Bootstrap Table - Form Control */
.fixed-table-toolbar .btn-group .form-control {
  margin-top: 7px;
}

/* Bootstrap Form-Check */
.form-check .form-check-input{
  width: 2.5em;
  height: 1.5em;
}

.form-check .form-check-label{
  font-size: 1em;
  margin-left: 4px;
  margin-top: 4px;
}

.form-check-input {
  background-color: #d75353;
  border-color: #db4040;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}

.form-check-input:checked {
  background-color: #99d683;
  border-color: #71e347;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}

/* Bootstrap Table - Tools Menu */
.toolsMenu > div > input,
.toolsMenu > div > div > input,
.toolsMenu > div > button { /* Table Buttons */
  margin-top: 10px!important;
  margin-bottom: 10px!important;
  padding: 10px;
  border-radius: 5px;
}
.toolsMenu > div > input,
.toolsMenu > div > div > input,
.toolsMenu > div > select { /* Table Select */
  width:90%;
}

/* Additional Modal Sizes */
.modal-xxl {
  max-width: 1480px;
}

/* Additional Container Sizes */
.container-xxxl {
  max-width: 1480px;
}

/* Loading Icon */
.loading-icon {
  display: none;
  margin-top: 10px;
  text-align: center;
}
.spinner-container {
  margin-bottom: 10px;
}
.spinner-bounce {
  margin: auto;
  width: 130px;
  text-align: center;
}
.spinner-bounce .spinner-child {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: spinner-bounce 1.4s ease-in-out 0s infinite both;
          animation: spinner-bounce 1.4s ease-in-out 0s infinite both;
}
.spinner-bounce .spinner-bounce1 {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
  background-color: #FDDD00;
}
.spinner-bounce .spinner-bounce2 {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
  background-color: #34C33D;
}
.spinner-bounce .spinner-bounce3 {
  background-color: #00E1E6;
}
@-webkit-keyframes spinner-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes spinner-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* Loading Div */
.row.loading-div {
  display: none;
}

/* General Info Alert */
.genInfo {
  width: 80%;
  margin: auto;
}

/* Form Generation */
.input-group .input-group-btn {
  right: 10px;
  top: 5px;
  position: absolute;
  z-index: 1000;
}

/* Container max-width settings */
@media (min-width: 400px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 395px;
  }
}
@media (min-width: 576px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 570px;
  }
}
@media (min-width: 768px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 760px;
  }
}
@media (min-width: 992px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
  }
}
@media (min-width: 1800px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1720px;
  }
}
@media (min-width: 2100px) {
  body .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 2020px;
  }
}

/* Sidebar and home-section adjustments (Mobiles) */
@media (max-width: 992px) {
  .sidebar {
    width: 300px;
  }
  .sidebar .sidebar-footer {
    width: 300px;
    transition: all 0.5s ease;
  }
  .sidebar.close .nav-links li .sub-menu,
  .sidebar.close .nav-links li.menu-item,
  .sidebar.close .logo-details {
    display: none;
    transition: all 0.5s ease;
  }
  .sidebar.close,
  .sidebar.close.expandOnHover {
    width: 0;
  }
  .sidebar.close ~ .home-section {
    width: 100%;
    left: 0;
    transition: all 0.5s ease;
  }
  .sidebar.close .sidebar-footer {
    display: none;
    transition: all 0.5s ease;
  }
  .nav-bar i {
    float: right;
    display: block;
  }
  .home-section {
    left: 300px;
    width: calc(100% - 300px);
    overflow-x: hidden;
  }
  #configTabs {
    position: relative;
    width: 100%;
  }
  #configTabContent .nav.nav-tabs {
    min-width: 100px;
    width: 92%;
    position: absolute;
  }
  .tab-content {
    padding: 0 10px;
  }
  .tab-content-sub {
    padding-top: 50px;
  }
  .tab-sub-dropdown {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: block;
  }
  .tab-sub-dropdown .dropdown .dropdown-toggle {
    width: 100%;
    border-radius: 10px;
  }
  /* Make Navbar Smaller */
  .home-section .nav-bar {
    height: 40px;
  }
  .home-section .nav-bar .dropdown button {
    height: 40px;
  }
  .page-content .container-fluid {
    height: calc(100% - 40px);
  }
}

@media (min-width: 992px) {
  .sidebar {
    width: 350px;
    transition: all 0.5s ease;
  }
  .sidebar .sidebar-footer {
    width: 350px;
    transition: all 0.5s ease;
  }
  .home-section {
    left: 350px;
    width: calc(100% - 350px);
  }
}