/* NOTIFICATIE MIDDLE  */

.middle_notificatie_wrapper { z-index: 9999; width: 100%; max-width: 1300px; display: none; opacity: 0; visibility: hidden; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.middle_notificatie_wrapper.middle_notificatie_wrapper.fixed { position: fixed; }





.middle_notificatie_wrapper .inner { position: relative; display: block; }



/* Notificatie top option fixed */

.middle_notificatie_wrapper.fixed { position: relative;  }

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



.middle_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 */

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

.middle_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; }

.middle_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; }



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

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



/* Alignment */

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

.middle_notificatie_wrapper.right .inner { position: fixed; right: 10px; top: 50%; transform: translate(-0%,-50%); width: 90%; }

.middle_notificatie_wrapper.middle .inner { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }

.middle_notificatie_wrapper.full_width .inner { width: 80%; max-width: 1300px; left: 50%; top: 50%; transform: translate(-50%,-50%); }



.middle_notificatie_wrapper.middle .inner.middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }