@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ***Mensagem de erro**** */
.message-error {
   background-color: #f8d7da;
   color: #721c24; 
   border: 1px solid #721c24;
   border-radius: 16px;
   padding: 16px;
   font-family: 'Inter', serif;
   text-align: center;
   font-weight: 400;
   font-size: 0.9rem;

   position: relative;
   margin-bottom: 40px;
}

#margin-message-error {
   margin-top: 20px;
   margin-bottom: 10px;
}

.message-error p {
   margin: 16px 0 14px 0;
}

.message-error .close-btn {
   color: #721c24;
   background-color: transparent;
   border: 1px solid #721c24;
   font-size: 20px;
   cursor: pointer;
   border-radius: 50%;
   transition: all 0.2s ease-in;

   position: absolute;
   right: 2px;
   top: 1px;

   width: 28px;
   height: 28px;
}

.message-error .close-btn:hover {
   background-color: #721c24;
   color: white;
}


/* ***Mensagem de sucesso**** */

.message-success {
   background-color: #eafaf1;
   color: #2e7d32; 
   border: 1px solid #2e7d32;
   /* border-radius: 0.8rem; */
   border-radius: 16px;
   padding: 16px;
   font-family: 'Inter', serif;
   text-align: center;
   font-weight: 400;
   font-size: 0.9rem;

   position: relative;
   margin-bottom: 40px;
}

.message-success p {
   margin: 16px 0 14px 0;
}

.message-success .close-btn {
   color: #2e7d32;
   background-color: transparent;
   border: 1px solid #2e7d32;
   font-size: 20px;
   cursor: pointer;
   border-radius: 50%;
   transition: all 0.2s ease-in;

   position: absolute;
   right: 2px;
   top: 1px;

   width: 28px;
   height: 28px;
}

.message-success .close-btn:hover {
   background-color: #4caf50;
   color: #fff;
}


/* ***Mensagem de Atenção**** */

.message-attention {
 background-color: #FFE5D0;
 color: #f25c05; 
 border: 1px solid #f25c05;
 border-radius: 16px;
 padding: 16px;
 font-family: 'Inter', serif;
 text-align: center;
 font-weight: 400;
 font-size: 0.9rem;
 position: relative;
 margin-bottom: 40px;
}

.message-attention p {
   margin: 16px 0 14px 0;
}

.message-attention .close-btn {
   color: #d96d00;
   background-color: transparent;
   border: 1px solid #d96d00;
   font-size: 20px;
   cursor: pointer;
   border-radius: 50%;
   transition: all 0.2s ease-in;

   position: absolute;
   right: 2px;
   top: 1px;

   width: 28px;
   height: 28px;
}

.message-attention .close-btn:hover {
   background-color: #f25c05;
   color: white;
}

span {
   font-weight: 500;
}