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

NOTE:
------
A FILE FOR RTL SUPPORT RELATED ONLY
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.  */
@media (min-width: 1199.98px) {
    .hideonhd {
        display: none;
    }
}
@media (max-width: 767.98px) {
    #magicword {
        display: block !important; position: relative !important; rotate: 0deg !important; top:0% !important; font-size: 3em !important; width: 100% !important; text-align: center !important;
    }
}
@font-face {
    font-family:"DOS";
	src:url(./DOS.ttf) format('truetype');
}
.password-icon {
  display: flex;
  align-items: center;
  position: absolute;
  top: 35%;
  right: 30px;
  transform: translateY(-50%);
  width: 20px;
  color: #000;
  transition: all 0.2s;
}

.password-icon:hover {
  cursor: pointer;
  color: #ff4754;
}

.password-icon .feather-eye-off {
  display: none;
}
#exampleModalLabel {
    color:white;
}
.modal label {
    color:white;
}
.modal-header .close {
    color: white;
}
.modal-title {
    color:white;
}
.modal-body input {
    color: greenyellow;
}
.modal-body input::placeholder {
    color: greenyellow;
}
.modal-content {
    background:#2C343C;
    color:white;
}
.modal-content button {
    color:black;
}
.footer span a {
    color:hotpink;
}
#gazcard {
    box-shadow : 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
} 
#addModal input::placeholder {
    color: greenyellow;
}
#addModalpoids input::placeholder {
    color: greenyellow;
}
#uploadModal input::placeholder {
    color: greenyellow;
}
#delModal input::placeholder {
    color: greenyellow;
}
#delModalpoids input::placeholder {
    color: greenyellow;
}
#addsupervisionModal input::placeholder {
    color: greenyellow;
}
#editModal input::placeholder {
    color: greenyellow;
}
.tab-pane .btn-success, .tab-pane .btn-warning a {
    color:black !important; 
}
.tab-pane .btn-success:hover, .tab-pane .btn-warning:hover a {
    color:white !important;
}

/* CustomBar */

.custom-progress {
  background-color: #444;
    padding: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 14px;
  width: 100%;
  margin-top: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}



/*.custom-bar {
  height: 100%;
  width: 0%;
  background-image: linear-gradient(
    45deg,
    rgba(173, 255, 47, 0.8) 25%,
    rgba(173, 255, 47, 0.4) 25%,
    rgba(173, 255, 47, 0.4) 50%,
    rgba(173, 255, 47, 0.8) 50%,
    rgba(173, 255, 47, 0.8) 75%,
    rgba(173, 255, 47, 0.4) 75%,
    rgba(173, 255, 47, 0.4) 100%
  );
  background-size: 40px 40px;
  animation: progress-stripes 1s linear infinite;
  transition: width 0.4s ease;
  border-radius: 10px 0 0 10px;
}


@keyframes progress-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}*/

.custom-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, #ADFF2F 25%, #9ACD32 50%, #ADFF2F 75%);
  background-size: 200% 100%;
  animation: move-stripes 2s linear infinite;
  transition: width 0.4s ease;
  border-radius: 10px 0 0 10px;
}

@keyframes move-stripes {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}


/* Spinner circulaire */
.spinner-border {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  100% {
    transform: rotate(360deg);
  }
}

/* Style général du conteneur du spinner */
#spinner {
    display: none;
    text-align: center;
    margin-top: 15px;
    color: white;
}

/* Spinner Bootstrap personnalisé */
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    color: greenyellow !important; /* Couleur info Bootstrap */
}

/* Texte sous le spinner */
#spinner div:last-child {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
}
/* Popup de téléchargement */
#downloadPopup {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: fadeInOut 4s ease-in-out;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.popup-arrow {
    font-size: 24px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.upload-section {
  /*display: flex;*/
  /*gap: 20px;*/
  margin-top: 20px;
}

.upload-card {
   /*border: 2px solid #444;*/
  padding: 10px;
  /*width: 200px;
  background-color: #111;
  color: #fff;*/
  border-radius: 10px;
  text-align: center;
}

.preview {
  margin-top: 10px;
  height: 150px;
  /*background-color: #222;*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
}
.preview img {
  max-width: 100%;
  max-height: 100%;
}