/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: May 22 2025 | 06:45:34 */
.notification-bar {
  position: relative; /* Keeps it in the document flow */
  width: 100vw; /* Full width of the viewport */
  background-color: #6BABC3; /* Το αρχικό σας χρώμα */
  color: white;
  text-align: left; /* Align text to the left */
  padding: 9px 20px;
  z-index: 1000; /* Stacking order for clarity */
  margin: 0 auto; /* Center it on the page */
}


.notification-content {
  display: flex;
  justify-content: left; /* Align the content to the left */
  align-items: center; /* Vertically center content */
  height: 100%; /* Ensure consistent height alignment */
  overflow: hidden; /* Prevent any text overflow */
}

.notification-message {
  color: #000 !important; /* Επιβολή λευκού χρώματος */
  opacity: 0; /* Hidden by default */
  font-size: 19px; /* Font size for readability */
  word-wrap: break-word; /* Ensure long words wrap */
  transform: translateY(20px); /* Start slightly below the view */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth animation */
  position: absolute; /* Position for animation stacking */
  display: flex; /* Make text and button align horizontally */
  align-items: center; /* Vertically align text and button */
  gap: 20px; /* Add spacing between text and button */
}

.notification-message.active {
  opacity: 1; /* Fully visible when active */
  transform: translateY(0); /* Slide into place */
}

.notification-message a {
  font-size: 16px;
  font-weight: 500;
  color: #1C7BB6;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  text-decoration: none; /* Remove underline */
  padding: 5px 15px; /* Smaller padding for a compact button */
  border-radius: 25px; /* Rounded button */
  display: inline-block; /* Make it behave like a button */
  text-align: center; /* Center text inside the button */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
  max-width:250px; /* Limit button width */
  white-space: nowrap; /* Prevent text from wrapping inside button */
  overflow: hidden; /* Prevent overflowing text */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
  z-index: 1;
}

.notification-message a:hover {
  background-color: #1C7BB6; /* Change background on hover */
  color: #FFFFFF; /* Change text color on hover */
}

@media (max-width: 768px) {
    .notification-bar {
      display: flex
;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        /* height: 16vh !important; */
        /* margin-bottom: 20px; */
        /* margin-top: 20px; */
        z-index: 1;
        padding: 8px;
        box-sizing: border-box;
    }


  .notification-message {
               display: flex
;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        gap: 20px;
        width: 100%;
        flex-wrap: wrap;
    }

    .notification-message.active {
               display: flex
;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        gap: 20px;
        width: 100%;
        flex-wrap: wrap;
    }

  .notification-content {
    display: flex
;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    align-content: center;
}

  .notification-message a {
    font-size: 15px; /* Ensure consistent button font size */
    padding: 10px 20px; /* Adjust button padding for better look */
    max-width: 250px; /* Limit button width */
    text-align: center; /* Center button text */
    border-radius: 25px; /* Rounded button corners */
    display: inline-block; /* Proper button display */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .notification-bar {
    display: flex;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center all text */
    flex-direction: column; /* Stack items vertically */
    height: 12vh; /* Adjust height for tablets */
    padding: 20px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in the width/height calculations */
  }

  .notification-message {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
  }

  .notification-message.active {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    gap: 20px;
    width: 100%;
    z-index: 1 !important;
    flex-wrap: wrap;
  }

.button{
    z-index: 1 !important;
}

  .notification-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    align-content: center;
  }

  .notification-message a {
    font-size: 15px; /* Ensure consistent button font size */
    padding: 10px 20px; /* Adjust button padding for better look */
    max-width: 250px; /* Limit button width */
    text-align: center; /* Center button text */
    border-radius: 25px; /* Rounded button corners */
    display: inline-block; /* Proper button display */
  }
}