/**
   * Main CSS pour EWO
   *
   * Ce fichier contient les styles CSS pour le thème EWO.
   * @package EWO Theme
   * @version 1.1
   *
   */


:root {
   --ange: #fdd803; 
   --demon: #d02424; 
   --humain: #739931;
}

/** General **/
.page {
   min-height: 100vh;
}

.click,
.pointer {
   cursor: pointer;
}

.text-right {
   text-align: right !important;
}

.text-center {
   text-align: center !important;
}

.text-left {
   text-align: left !important;
}

.page-home #logo {
   width: 250px;
}

.order-1 {
   order: 1;
}

.order-2 {
   order: 2;
}

.order-3 {
   order: 3;
}

.order-4 {
   order: 4;
}

.badge-messagerie {
   position: absolute;
   top: 0px;
   right: 0px;
   padding: 2px 6px;
   border-radius: 50%;
   font-size: 0.55rem;
   font-weight: bold;
}

.avatar {
   border: 3px solid #fff;
   background-color: black;
}

.center-v,
.v-center {
   display: flex;
   align-items: center;
}

.icon-bottom-left {
   position: fixed;
   bottom: 10px; /* Distance du bas */
   left: 10px;   /* Distance de la gauche */
   z-index: 1000; /* Assure que l'icône est au-dessus du contenu */
}

@media screen and (max-width: 1024px) {
   .section {
      padding: 1.5rem 1.5rem
   }

   .section-logo #logo {
      width: 140px;
   }
}

.color-ange,
.is-ange,
.has-text-ange {
   color: var(--ange) !important;
}

.is-bg-ange {
   background-color: var(--ange) !important;
}

.color-demon,
.is-demon,
.has-text-demon {
   color: var(--demon) !important;
}

.is-bg-demon {
   background-color: var(--demon) !important;
}

.color-humain,
.is-humain,
.has-text-humain {
   color: var(--humain) !important;
}

.is-bg-humain {
   background-color: var(--humain) !important;
}

.breadcrumb li + li::before {
   color:  var(--demon) !important;
}

.template-generique #logo {
   width: 140px;
}

.text-outline-default {
   color: white; /* La couleur du texte lui-même */
   text-shadow: 
       -1px -1px 0 black, /* Ombre en haut à gauche */
       1px -1px 0 black, /* Ombre en haut à droite */
       -1px 1px 0 black, /* Ombre en bas à gauche */
       1px 1px 0 black; /* Ombre en bas à droite */
}

.text-outline-ange {
   color: white; /* La couleur du texte lui-même */
   text-shadow: 
       -1px -1px 0 var(--ange), /* Ombre en haut à gauche */
       1px -1px 0 var(--ange), /* Ombre en haut à droite */
       -1px 1px 0 var(--ange), /* Ombre en bas à gauche */
       1px 1px 0 var(--ange); /* Ombre en bas à droite */
}

.text-outline-demon {
   color: white; /* La couleur du texte lui-même */
   text-shadow: 
       -1px -1px 0 var(--demon), /* Ombre en haut à gauche */
       1px -1px 0 var(--demon), /* Ombre en haut à droite */
       -1px 1px 0 var(--demon), /* Ombre en bas à gauche */
       1px 1px 0 var(--demon); /* Ombre en bas à droite */
}

.text-outline-humain {
   color: white; /* La couleur du texte lui-même */
   text-shadow: 
       -1px -1px 0 var(--humain), /* Ombre en haut à gauche */
       1px -1px 0 var(--humain), /* Ombre en haut à droite */
       -1px 1px 0 var(--humain), /* Ombre en bas à gauche */
       1px 1px 0 var(--humain); /* Ombre en bas à droite */
}

.border-radius-bottom {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}
.border-radius-top {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.fond-ewo {
   background: rgb(157,31,49);
   background: linear-gradient(45deg, rgba(157,31,49,1) 0%, rgba(103,35,51,1) 11%, rgba(58,39,55,1) 45%, rgba(37,37,51,1) 100%);
   min-height: 80vh;
}

/** Breadcrum **/

.breadcrumb a {
   color: var(--ange);
}

.breadcrumb a:hover {
   color: var(--demon);
}

.breadcrumb li.is-active a {
   color: #fff;
}

/** Navbar **/

.navbar {
   background: rgba(0,0,0,0.5);
}

.navbar-minwidth {
   min-width: 175px;
}

/** Notification **/
.notification-unread {
   border-left: 5px solid var(--ange);
}

.notification-read {
   border-left: 5px solid #fff;
}

/** page classement **/
.page-classement-perso .avatar {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 5px solid #fff;
   background-color: black;
}

.page-fiche-faction-admin-membres .avatar {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 5px solid #fff;
   background-color: black;
}

/** IA **/
.label-ia {
   display: inline-flex;
   align-items: center; /* Align vertically */
   justify-content: flex-start;
   width: 100%;
}

.label-ia > i {
   margin-left: auto; /* Optional: Adds spacing if needed between text and icon */
}

/** messagerie **/

.messagerie-last-message {
   font-size: 0.8em;
   border: 1px solid #9e9e9e;
   border-radius: 5px;
   padding: 5px;
}

.messagerie-date,
.messagerie-non-lu,
.messagerie-total {
   font-size: 0.8em;
}

/* position a droite du bloc de message et de la div entiere */
.messages {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.messages .mess {
   margin: 5px;
   padding: 10px;
   border-radius: 5px;
   color: black;
}

.messages .message-right {
   align-self: flex-end;
   background-color: #14161a; /* Couleur différente pour les messages à droite si nécessaire */
   text-align: right;
   color: #fff;
   width: 60%;
}

.messages .message-left {
   align-self: flex-start;
   background-color: #202227; /* Couleur différente pour les messages à gauche si nécessaire */
   color: #fff;
   text-align: left;
   width: 60%;
}

/** Responsive **/
@media screen and (max-width: 1024px) {
   .messages .message-right {
      width: 100%;
   }
   .messages .message-left {
      width: 100%;
   }

}

/**  des **/
.operator {
   color:  var(--demon);
}

.parentheses {
   color: var(--ange)
}

.random-des {
   font-size: small;
}

/** menu interne **/

.tabs li.is-active a {
   color: var(--ange) !important;
   border-bottom-color: var(--demon);
}

.tabs li.is-active .fal {
   color: #fff;
}


/** Ewop popup **/
.ewop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   z-index: 9999;
}

/* Lorsque le popup est actif */
.ewop.active {
   opacity: 1;
   visibility: visible;
}

/* Style de la fenêtre du popup */
.ewop-popup {
   background-color: #000000;
   color: #fff;
   padding: 20px;
   border-radius: 10px;
   max-width: 500px;
   width: 100%;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   position: relative;
   animation: popIn 0.3s ease; /* Animation d'ouverture */
}

/* Contenu du popup */
#ewop-content {
   font-size: 16px;
   line-height: 1.5;
   color: #ffffff;
}

/* Style du bouton de fermeture */
.close-ewop {
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: var(--ange);
   transition: color 0.3s ease;
}

.close-ewop:hover {
   color: #ffffff;
}

/* Animation d'apparition de la fenêtre */
@keyframes popIn {
   from {
   transform: scale(0.8);
   opacity: 0;
   }
   to {
   transform: scale(1);
   opacity: 1;
   }
}


/** Notification **/

.notif-notification {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: var(--ange);
   color: rgb(0, 0, 0);
   padding: 15px;
   border-radius: 5px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   display: none;
   z-index: 11111;
}

.notif-notification p {
   margin: 0;
   padding-right: 10px;
}

.notif-notification button {
   background-color: transparent;
   border: none;
   color: white;
   font-size: 16px;
   cursor: pointer;
}

#notif-show-notification {
   margin: 20px;
   padding: 10px 20px;
   background-color: #008CBA;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}


/** page profil **/

/** Responsive **/
@media screen and (max-width: 1024px) {

}