/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.navigation-header {
  padding-top: 20px
}

#main-menu-navigation .nav-item {
  background-color: #003366;
}

#main-menu-navigation {
  background-color: #003366;
}

html body .content .content-wrapper {
  padding: 2.1rem 2rem 0;
}

.card-header .heading-elements,
.card-header .heading-elements-toggle {
  background-color: inherit;
  position: absolute;
  top: 20px;
  right: 20px;
}

.dropdown-toggle::after {
  font-size: .8rem;
  font-family: LineAwesome;
  content: "\f110" !important;
  border: none !important;
  position: relative;
  top: 0;
  right: 0;
  padding: 0 2px 0 6px;
  margin: 0 .3em 0 0;
  vertical-align: 0;
}


.dropdown .dropdown-menu {
  border: 1px solid #e4e5ec;
  border-radius: .35rem;
  transform-origin: top;
  transition: all .2s linear;
  margin: -.1rem 0 0;
  box-shadow: 0 5px 75px 2px rgba(64, 70, 74, .2);
  min-width: 11rem;
  animation: .25s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
}

.icheckbox_square-blue {
  background-position: 0 0;
}

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url('../../app-assets/vendors/css/forms/icheck/square/blue.png') no-repeat;
  border: none;
  cursor: pointer;
}

tr.group,
tr.group:hover {
  background-color: #ededed !important;
}

.btn-group {
  box-shadow: none !important;
}

@media only screen and (max-width: 767px) {

  .nav-link>.ft-menu,
  .nav-link>.material-icons {
    color: #2C343B !important;
  }
}

.nav.nav-tabs.nav-top-border .nav-item a {
  color: #663DAC !important;
  font-weight: 600;
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
  border-top: 3px solid #663DAC !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #555;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-fixed .main-menu-content {
  height: auto !important;
}

table {
  width: 100% !important;
}

div.dataTables_processing {

  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  text-align: center;
  background-color: white !important;
  opacity: 0.75;
}

div.dataTables_processing img {
  display: inline-block;
  vertical-align: middle;
}

div.dataTables_processing {
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.spinner-img {
  position: absolute;
  top: 20%;
}

@media only screen and (max-width: 500px) {
  .spinner-img {
    left: 10%;
  }
}

.custom-file-upload {
  border: 2px dashed #aaa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.custom-file-upload:hover {
  border-color: #555;
}

.file-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}

.file-input {
  display: none;
}

#file-list {
  padding: 0;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.thumbnail {
  width: 50px;
  height: auto;
}

.file-item {
  border: none;
}

.delete-icon {
  cursor: pointer;
}

.drag-drop-container {
  min-height: 150px;
  border: 3px dashed #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  /* For positioning hidden input */
}

.drag-drop-container p {
  margin: 10px 0;
  color: #666;
}

.drag-drop-container.drag-over {
  border-color: #007bff;
  background-color: #e6f7ff;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Style for the clickable text */
.drag-drop-container .click-to-select {
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}

.drag-drop-container .click-to-select:hover {
  color: #0056b3;
}

/* Hidden file input */
.hidden-file-input {
  display: none;
}

.file-list {
  list-style-type: none;
  padding: 0;
  margin-top: 15px;
  width: 100%;
  max-height: 200px;
  /* Limit height for long lists */
  overflow-y: auto;
  /* Enable scrolling if list is too long */
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.file-list li {
  background-color: #f9f9f9;
  margin-bottom: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #555;
}

.file-list li span {
  word-break: break-all;
  /* Ensure long file names wrap */
  flex-grow: 1;
  /* Allow name to take available space */
}

.file-list li .file-size {
  font-size: 0.8em;
  color: #888;
  margin-left: 10px;
  white-space: nowrap;
}

.file-list li .remove-file {
  margin-left: 15px;
  color: #ff4d4f;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
  transition: color 0.2s ease;
}

.file-list li .remove-file:hover {
  color: #e00;
}

/* Scrollbar styling for file list (optional) */
.file-list::-webkit-scrollbar {
  width: 8px;
}

.file-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.file-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.file-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dp-file-name {
  width: 70%;
  text-align: left;
}

.file-list li {
  /* ... (existing rules) ... */
  display: flex;
  align-items: center;
  /* Align items vertically in the middle */
}

.file-list li .file-info {
  display: flex;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  /* Prevent text overflow from pushing controls */
  width: 90%;
}

.file-list li .file-name {
  word-break: break-all;
  /* Ensure long file names wrap */
  flex-grow: 1;
  /* Allow name to take available space */
  margin-right: 10px;
  /* Space between name and size/preview */
  text-align: left;
  width: 60%;
  ;
}

.file-list li .file-preview {
  width: 40px;
  /* Fixed width for preview container */
  height: 40px;
  /* Fixed height for preview container */
  margin-right: 10px;
  /* Space between preview and file name */
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  /* Prevent preview from shrinking */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.file-list li .file-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Ensure image fits within bounds */
  display: block;
}

.file-list li .file-preview .placeholder-icon {
  font-size: 1.5em;
  color: #999;
}

/* Ensure the file-size and remove-file are still aligned */
.file-list li .file-size,
.file-list li .remove-file {
  flex-shrink: 0;
  /* Prevent these from shrinking */
}