/* NOTIFICATIE TOP  */

.top_notificatie_wrapper { z-index: 99999999; width: 100%; top: 0; display: none; opacity: 0; visibility: hidden; }

.top_notificatie_wrapper.relative { position: relative; }



/* Notificatie top option fixed */

.top_notificatie_wrapper.fixed { position: relative;  }

.top_notificatie_wrapper.fixed.scroll { position: sticky; animation: fadeIn 0.5s ease-in-out forwards; }



.top_notificatie_wrapper.display { display: block; opacity: 1; visibility: visible; }



@keyframes fadeIn { 0% { opacity: 0; transform: translateY(-100%);} 100% { opacity: 1; transform: translateY(0%);}}



/* Close X */

.top_notificatie_wrapper span { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; cursor: pointer; transform: rotate(45deg); transition: 0.3s; }

.top_notificatie_wrapper span::after { content: ""; width: 100%; height: 2px; background-color: black; ; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.3s; }

.top_notificatie_wrapper span::before { content: ""; width: 100%; height: 2px; background-color: black; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(90deg); transition: 0.3s; }



.top_notificatie_wrapper span:hover { transform: scale(1.2) rotate(90deg); transition: 0.3s; }

.top_notificatie_wrapper span:hover::after { transform: translate(-50%,-50%) rotate(90deg); }



.top_notificatie_wrapper p { padding-bottom: 10px; }



/* Alignment */

.top_notificatie_wrapper.left .inner { position: fixed; left: 10px; top: 10px; }

.top_notificatie_wrapper.right .inner { position: fixed; right: 10px; top: 10px; }

.top_notificatie_wrapper.middle .inner { position: fixed; left: 50%; top: 10px; transform: translate(-50%,0%); }

.top_notificatie_wrapper.full_width .inner { width: 100%; }



.top_notificatie_wrapper.left.scroll { position: fixed; animation: none; }

.top_notificatie_wrapper.right.scroll { position: fixed; animation: none; }

.top_notificatie_wrapper.middle.scroll { position: fixed; animation: none; }