.flex {
  justify-content: right;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.vertical-center {
  align-items: center;
}

.row {
  flex-direction: row;
}

.space-between {
  justify-content: space-between;
}

.success,
.warning,
.errors {
  border-radius: var(--radius-sm);
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
  font-weight: bold;
  animation: fadeout 15s forwards;
  padding: 3px;
}

.success {
  background-color: #00FF66;
  color: #001327;                  
  border-color: #c3e6cb;           
  padding: 10px;                   
  margin-bottom: 10px;             
  border-radius: 7px;              
  font-family: var(--x0ne-font-display); 
  z-index: 100000;                   
  width: auto;
  margin: auto;                    
  text-align: center;              
  box-shadow: 3px 3px 10px #888;   
}

.warning {
  background-color: #FF3366;
  color: white;
}

.errors {
  background-color: orange;
  color: black;
}

@keyframes fadeout {
  0% {opacity: 1;}
  80% {opacity: 1;}
  100% {opacity: 0;}
}

.hover-text {
  position: relative;
  cursor: pointer;
}

.popup {
  display: none;
  position: absolute;
  background-color: #001327;
  color: #ffffff;
  padding: 15px;
  border-radius: var(--btn-border-radius);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  white-space: pre;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 10;
  border: 1px solid #666;
  font-weight: bold;
}

.hover-text:hover .popup {
  display: block;
}

.hidden {
  display: none;
}