.notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    display: block;
}

.notification.show {
    transform: translateY(0);
}

.fade-transition {
    transition: opacity 0.2s ease-in-out;
}

.notification-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.demo-section {
    margin-top: 80px;
    padding: 2rem;
}

.demo-notification {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.notification__fullContainer {
    background-color: #e5e9eb;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 15px 0
}

@media(max-width:767.98px) {
    .notification__fullContainer {
        height: 135px
    }
}

.notification.adhoc-component .alert.alert-warning.alert-dismissible.fade.show.notification__fullContainer {
    height: 60px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100vw;
    z-index: 1
}

    .notification.adhoc-component .alert.alert-warning.alert-dismissible.fade.show.notification__fullContainer .notification-custom {
        position: relative;
        width: 125%;
        z-index: 3
    }

@media(max-width:767.98px) {
    .notification.adhoc-component .alert.alert-warning.alert-dismissible.fade.show.notification__fullContainer .notification-custom {
        margin-left: 18.5% !important
    }
}

.notification .notification-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64.8px
}

.notification__iconWrapper {
    margin-right: 33px
}

@media(max-width:767.98px) {
    .notification__iconWrapper {
        margin-right: 0
    }
}

.notification .notifiIcon {
    text-align: right
}

@media(max-width:767.98px) {
    .notification .notifiIcon {
        display: none !important
    }

    .notification__Layoutcontainer {
        padding-bottom: 20px;
        padding-top: 46px
    }
}

.notification__slideContent {
    max-height: 65px;
    overflow-y: auto;
    width: 888px
}

@media(max-width:767.98px) {
    .notification__slideContent {
        max-height: 110px
    }
}

@media(max-width:1150px) {
    .notification__slideContent {
        width: unset
    }
}

.notification__slideContent::-webkit-scrollbar-track {
    background-color: #e5e9eb;
    border-radius: 10px
}

.notification__slideContent::-webkit-scrollbar {
    background-color: #e5e9eb;
    width: 5px
}

.notification__slideContent::-webkit-scrollbar-thumb {
    background-color: #99aaaf;
    border-radius: 10px
}

    .notification__slideContent::-webkit-scrollbar-thumb:hover {
        background: #677f88
    }

.notification .noticeContent {
    font: normal normal normal .8125rem/1.375rem ;
    margin: 0
}

.notification .noticeLabel {
    color: #db4e5a;
    font: normal normal normal .8125rem/1.375rem ;
    padding-right: 5px
}

.notification__controls-wrapper {
    color: #022b39;
    font: normal normal normal .8125rem/1.375rem ;
    text-align: center;
    width: 140px
}

@media(max-width:767.98px) {
    .notification__controls-wrapper {
        background-color: #e5e9eb;
        border-bottom-left-radius: 19px;
        border-top-left-radius: 19px;
        margin-top: 10px;
        padding-left: 10px;
        position: absolute;
        right: 20px;
        top: 0;
        width: auto
    }
}

.notification__controls-wrapper .notification__controls {
    float: right;
    margin-right: 23px;
    position: relative;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media(max-width:767.98px) {
    .notification__controls-wrapper .notification__controls {
        float: right;
        margin: 2px 10px;
        padding-left: 3px;
        position: relative;
        right: 18px;
        width: 60px
    }
}

/* Fixed navigation button styles */
.notification__controls-wrapper .notification__controls .prevIcon,
.notification__controls-wrapper .notification__controls .nextIcon {
    width: 14.86px;
    height: 14px;
    margin-top: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.notification__controls-wrapper .notification__controls .prevIcon {
    background-image: url("../images/icon/icon-notification-arrowleft.svg");
    /*left: -3px;*/
    left:-20px;
    padding: 3px;
}

.notification__controls-wrapper .notification__controls .nextIcon {
    background-image: url("../images/icon/icon-notification-arrowright.svg");
}

    /* Active/Enabled state - these override the disabled styles */
    .notification__controls-wrapper .notification__controls .prevIcon.enabled,
    .notification__controls-wrapper .notification__controls .nextIcon.enabled {
        opacity: 0.9 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        color: #022b39 !important;
    }

    /* Disabled state */
    .notification__controls-wrapper .notification__controls .prevIcon.disabled,
    .notification__controls-wrapper .notification__controls .nextIcon.disabled {
        color: #ccd4d7 !important;
        opacity: 0.3 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    /* Default states - ensure buttons start enabled */
    .notification__controls-wrapper .notification__controls .prevIcon:not(.disabled),
    .notification__controls-wrapper .notification__controls .nextIcon:not(.disabled) {
        opacity: 0.9;
        pointer-events: auto;
        cursor: pointer;
        color: #022b39;
    }

/*.notification__slidetext {
    font-size: 0.75rem;
    color: #022b39;
    min-width: 30px;
    text-align: center;
}*/

.notification__close-wrapper {
    width: 21px
}

@media(max-width:767.98px) {
    .notification__close-wrapper {
        position: absolute;
        right: 0;
        top: 0
    }
}

.notification__close-wrapper .notification__close {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%23022b39' stroke-width='2' d='M1.5 1.5l18 18m0-18l-18 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    height: 21px;
    width: 21px;
    cursor: pointer;
}

    .notification__close-wrapper .notification__close:focus-visible {
        outline: 0
    }

@media(max-width:767.98px) {
    .notification__close-wrapper .notification__close {
        margin-top: 10px;
        position: absolute;
        right: 15px;
        top: 0
    }
}

.notification__fullContainer .noticeContent {
    color: #000 !important;
}