.card-message {
   margin: 0 auto;
   background-color: var(--background-message-color);
   border-radius: 5px;
   width: 270px;
   min-height: 60px;
   height: auto;
   overflow: hidden;
   border-left: 5px solid;
   position: relative;
   padding-bottom: 8px;
 }

 .message-title {
     font-family: 'Lexend-SemiBold', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 14px;
     padding: 10px 0px 5px 20px;
 }

 .message-text {
     font-family: 'Lexend-Light', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 12px;
     color: var(--text-message-color);
     padding: 0px 0px 5px 20px;
 }

 .message-close {
     position: absolute;
     top: 6px;
     right: 6px;
     border: none;
     background: transparent;
     color: var(--text-message-color);
     font-size: 16px;
     line-height: 1;
     padding: 2px 6px;
     cursor: pointer;
 }

 .message-close:hover {
     color: var(--text-color);
 }

 .message-actions {
     display: none;
     gap: 8px;
     padding: 4px 12px 6px 20px;
 }

 .message-actions[data-visible="true"] {
     display: flex;
 }

 .message-actions .message-action-affirmative,
 .message-actions .message-action-negative {
     font-size: 12px;
     padding: 6px 10px;
 }

 .card-message[data-type="warning"] {
   border-color: var(--warning-color);
 }

 .card-message[data-type="warning"] .message-title{
   color: var(--warning-color);
 }

 .card-message[data-type="warning"] .message-title::before {
   content: "Warning";
 }

 .card-message[data-type="error"] {
   border-color: var(--error-color);
 }

 .card-message[data-type="error"] .message-title{
   color: var(--error-color);
 }

 .card-message[data-type="error"] .message-title::before {
   content: "Error";
 }

 .card-message[data-type="success"] {
   border-color: var(--success-color);
 }

 .card-message[data-type="success"] .message-title{
   color: var(--success-color);
 }

 .card-message[data-type="success"] .message-title::before {
   content: "Success";
 }

 .card-message[data-type="info"] {
   border-color: var(--loading-color);
 }

 .card-message[data-type="info"] .message-title{
   color: var(--loading-color);
 }

 .card-message[data-type="info"] .message-title::before {
   content: "Info";
 }