#redcap_notifs_blocker{
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; left: 0; right: 0; bottom: 0;
    border:1px transparent #fff;
    z-index:1032;
}
#redcap_notifs_blocker:before{
    content:"";
    border:1px transparent #fff;
    background-color: #000;
    position: absolute; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat:no-repeat;
    background-position:50% 40%;
    background-size:10%;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 20; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

/*I hope #container is specific enough for surveys */
#container #redcap_banner_notifs {
    margin:5px auto;
    width:96%;
}

#redcap_modal_notifs.on_survey_page .dismiss_all,
#redcap_banner_notifs.on_survey_page .dismiss_all,
#redcap_modal_notifs.on_survey_page .dismissable button ,
#redcap_banner_notifs.on_survey_page .dismissable button {
    display:none !important;
}

#container .dismiss_all,
#redcap_modal_notifs .dismiss_all,
#redcap_banner_notifs .dismiss_all {
    display:none;
}

#redcap_banner_notifs .dismiss_all.has_dismiss,
#redcap_modal_notifs .dismiss_all.has_dismiss{
    display:inline-block;
}



#redcap_banner_notifs{
    width:100%;
    max-width:800px;
    margin-bottom: 30px;
    padding-bottom:5px;
    border-bottom:1px solid #ccc;
}
#redcap_banner_notifs button{
    border-radius:3px;
}

#redcap_banner_notifs .banner-header{
    margin-bottom:8px;
    text-align:right;
}
#redcap_banner_notifs .banner-header h4{
    font-size: 140%;
    float:left;
}
#redcap_modal_notifs {
    top:50%;
    transform: translateY(-25%);
}

#redcap_modal_notifs .hide_notifs{
    position: absolute;
    top: 20px;
    right: 20px;
}

.redcap_notifs .alert{
    position:relative !important;
    padding:10px;
    border:none;
    box-shadow: 0 0 2px 0px #333;
}

.redcap_notifs .alert .notif_bdy {
    text-align: left;
    font-size:100%;
    padding: initial;
    margin: 0;
}
.redcap_notifs .alert .notif_bdy .headline{
    font-size:108%;
    margin:0 0 5px;
}

.redcap_notifs .alert .notif_bdy i.fas{
    position: absolute;
    left: 10px;
    width: 40px;
    height: 40px;
    font-size: 38px;
    text-align:center;
}

.redcap_notifs .alert .notif_bdy .lead{
    font-size:92%;
}
.redcap_notifs .alert .notif_ftr{
    text-align:right;
    font-size:85%;
    width:auto;
}

.redcap_notifs .alert .notif_hdr{
    display:none;
    position:absolute;
    top:5px; right:5px;
    font-size:100%;
    width:auto;
}
.redcap_notifs .alert.dismissable .notif_hdr{
    display:block;
}
.redcap_notifs .alert .notif_hdr button{
    display: block;
    width: 100%;
    border: none;
    border-radius: 3px;
    padding: 3px 5px;
    cursor: pointer;
    background: #D75757;
    color: #fff;
    font-size:77%;
    box-shadow: 1px 1px 1px 0px #666;
}

.redcap_notifs .alert .has_icon{
    padding-left:50px;
    background-size:40px;
    background-repeat: no-repeat;
    background-position: 0 0;
}






.modal-dialog {
    max-width: 950px; /* Your existing max-width */
    margin: 20px auto; /* Adjust margin for vertical spacing from the viewport's top */
    display: flex;
    flex-direction: column;
}

.modal-content {
    display: flex;
    flex-direction: column;
    height: auto; /* Allows the modal content to grow based on content, up to the viewport's size */
}

.modal-body {
    overflow-y: auto; /* Enable scrolling when content overflows */
    max-height: 50vh; /* Maximum height before scrolling kicks in */
    flex-grow: 1; /* Allows the body to expand within the constraints of the modal-content */
}




#redcap_banner_notifs .notif_cont_system,
#redcap_banner_notifs .notif_cont_project {
    max-height: 50vh; /* Example: Adjust this value based on your needs */
    overflow-y: auto; /* Enable vertical scroll on overflow */
    margin-bottom: 10px; /* Optional: Adds space between notification containers */
    padding:1px;
}




/*
growler style

#redcap_growler_notifs {
    position:fixed;
    top:10%; right:0;
    width:20vw;
    min-width:240px; max-width:320px;
    max-height:80vh;
    padding-right:10px;
}
#redcap_growler_notifs .notif_cont {
    position: absolute;
    padding-right: 10px;
    left : 0;
    transition: left .5s ease-in-out;
    -webkit-transition: left .5s ease-in-out;
}
#redcap_growler_notifs .notif_cont.hide{
    left : 50px;
}

#redcap_growler_notifs .hide_notifs:after{
    content: "hide";
    position: absolute;
    right: 0;
    padding: 3px 10px;
    text-align: center;
    background: orange;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 77%;
}
#redcap_growler_notifs .hide_notifs.show:after{
    content: "show";
    background: lightskyblue;
}
#redcap_growler_notifs .alert {
    position:initial; height:initial;
    display:block;
}

*/