/* NOTIFICATIE BOTTOM */

.bottom_notificatie_wrapper { z-index: 9999; width: 100%; bottom: 0; display: none; opacity: 0; visibility: hidden; }

.bottom_notificatie_wrapper.relative { position: relative; }



/* notificatie bottom option fixed */

.bottom_notificatie_wrapper.fixed { position: fixed; }



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



/* Close X */

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

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

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



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

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





/* Alignment */

.bottom_notificatie_wrapper.left { position: fixed; left: 10px; bottom: 10px; }

.bottom_notificatie_wrapper.right { position: fixed; right: 10px; bottom: 10px; }

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

.bottom_notificatie_wrapper.full_width { width: 100%; }