/* Notification Bar Styles */
.jo-notification-bar {
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 9999;
    padding: 10px;
    box-sizing: border-box;
}

.jo-notification-bar.top {
    top: 0;
}

.jo-notification-bar.bottom {
    bottom: 0;
}

.jo-notification-bar .btn-close {
  cursor: pointer;
  position: absolute;
  z-index: 1050;
  background-color: #ffffffad;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 0.25rem;
  top: 0.2rem;
  right: 0.2rem;
}

/* Floating Box Styles */
.jo-floating-box {
    position: fixed;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    box-sizing: border-box;
}

.jo-floating-box.top-left {
    top: 20px;
    left: 20px;
}

.jo-floating-box.top-right {
    top: 20px;
    right: 20px;
}

.jo-floating-box.bottom-left {
    bottom: 20px;
    left: 20px;
}

.jo-floating-box.bottom-right {
    bottom: 20px;
    right: 20px;
}

.jo-floating-box .jo-floating-box-close {
	cursor: pointer;
    position: absolute;
    z-index: 1050;
    background-color: #ffffffad;
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 0.25rem;
}

.jo-floating-box .jo-floating-box-close.top-left {
    top: -1rem;
    right: -1rem;
}

.jo-floating-box .jo-floating-box-close.top-right {
    top: -1rem;
    left: -1rem;
}

.jo-floating-box .jo-floating-box-close.bottom-left {
    top: -1rem;
    right: -1rem;
}

.jo-floating-box .jo-floating-box-close.bottom-right {
    top: -1rem;
    left: -1rem;
}

/* Fade Animation */
.animate-fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.animate-fade.show {
    opacity: 1;
}

/* Slide Animation (Top) */
.animate-slide.top {
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}

.animate-slide.top.show {
    transform: translateY(0);
}

/* Slide Animation (Bottom) */
.animate-slide.bottom {
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}

.animate-slide.bottom.show {
    transform: translateY(0);
}
/* Slide Animation (Right) */
.animate-slide.top-right, .animate-slide.bottom-right {
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}

.animate-slide.top-right.show, .animate-slide.bottom-right.show {
    transform: translateX(0);
}

/* Slide Animation (Left) */
.animate-slide.top-left, .animate-slide.bottom-left {
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
}

.animate-slide.top-left.show, .animate-slide.bottom-left.show {
    transform: translateX(0);
}