/*================================================================================
	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;
}




.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;
}

.body-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  /* Add this */
  background-color: white;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-overlay {
  width: 98%;
  height: 60px;
  z-index: 1000;
  position: absolute;
  left: 0;
  background: white;
  opacity: 0.8;
}

.overlay img {
  width: 155px !important;
  top: 50%;
}

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

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

.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 */
}

:root {
  --loader-size: 150px; /* change this to resize */
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* Fills the parent container */
.loader-overlay {
  position: absolute; /* container must be position: relative */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Spinner container */
.loader-wrapper {
  width: var(--loader-size);
  height: var(--loader-size);
  background: #fff;
  display: inline-block;
  overflow: hidden;
}

/* Inner spinner */
.double-ring-spinner {
  width: 100%;
  height: 100%;
  position: relative;
}

.loader-wrapper .ring {
  position: absolute;
  border-radius: 50%;
  border: calc(var(--loader-size) * 0.08) solid transparent; /* thickness scales with size */
  animation: spin 1s linear infinite;
}

/* Primary ring */
.loader-wrapper .ring-primary {
  width: calc(var(--loader-size) * 0.72);
  height: calc(var(--loader-size) * 0.72);
  top: calc(var(--loader-size) * 0.14);
  left: calc(var(--loader-size) * 0.14);
  border-color: #e15b64 transparent #e15b64 transparent;
}

/* Secondary ring */
.loader-wrapper .ring-secondary {
  width: calc(var(--loader-size) * 0.54);
  height: calc(var(--loader-size) * 0.54);
  top: calc(var(--loader-size) * 0.23);
  left: calc(var(--loader-size) * 0.23);
  border-color: transparent #f8b26a transparent #f8b26a;
  animation-direction: reverse;
}



/* blank div */

.empty-state {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-state img {
  width: 120px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-state h2 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #555;
}

.empty-state p {
  color: #888;
  font-size: 14px;
}

.empty-state button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.empty-state button:hover {
  background-color: #0056b3;
}