/**
 * Overlap UI Styles
 *
 * Description: Styles for creating an overlapping effect with a backdrop.
 * The overlap element can be shown or hidden with transitions, covering
 * the entire viewport when active.
 *
 * Created by: @gabinosarmiento
 * Last Updated: March 07, 2026
 * Version: 3.1
 */
.overlap-subtitle{color:#6c757d;font-size:14px;display:block}.backdrop,.overlap{top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;position:fixed;transition:.5s;background-color:#fffFFF99}.overlap{left:100%;background-color:transparent}.overlap-wrap,.overlap-wrap-lg,.overlap-wrap-md,.overlap-wrap-sm,.overlap-wrap-xs{height:100%;display:flex;overflow:auto;position:relative;flex-direction:column;background-color:#fff}.overlap-wrap-lg,.overlap-wrap-md,.overlap-wrap-sm,.overlap-wrap-xs{margin-left:auto;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:0 0 50px #00000033}.overlap-wrap{width:100%}.overlap-wrap-lg{width:80%}.overlap-wrap-md{width:60%}.overlap-wrap-sm{width:50%}.overlap-wrap-xs{width:40%}.overlap-header{color:#066ac4;font-size:20px;font-weight:400;text-align:center;padding-top:30px;padding-inline:40px}.overlap-body{flex:1;padding:30px 40px}.overlap-payment{padding:30px}.overlap-footer{padding-bottom:30px;padding-inline:40px}.overlap-close{width:50px;height:50px;cursor:pointer;margin:0 auto;transition:.2s;background:url(assets/close.svg) center no-repeat}.overlap-close:hover{transform:rotate(90deg)}.overlap-open{overflow:hidden}.backdrop-showing,.overlap-showing{opacity:1}.backdrop-hiding,.overlap-hiding{opacity:0}.overlap-showing{left:0}@media (max-width:768px){[class^=overlap-wrap]{width:100%;box-shadow:none;border-top-left-radius:0;border-bottom-left-radius:0}}