#the-modal{top:0;right:0;bottom:0;left:0;position:fixed;z-index:var(--z-index,500);--modal-bg-clr:var(--color-dark-button)}#the-modal .background{background-color:var(--modal-bg-clr,rgba(0,0,0,.2));display:grid;height:100%;position:relative}#the-modal.hide{display:none}#the-modal{display:block!important;opacity:1;transition:all .3s ease-in-out;visibility:visible}#the-modal .content{display:grid;grid-template-rows:auto 1fr}#the-modal.right .content{height:100dvh;margin-right:0!important;top:0}#the-modal:not(.right):not(.hide) .content{height:100dvh;top:0}@media (min-width:768px){#the-modal:not(.right):not(.hide) .content{height:auto}}#the-modal.hide,#the-modal[style="display: none;"],#the-modal[style="display:none;"]{opacity:0;visibility:hidden}#the-modal.hide .content,#the-modal[style="display: none;"] .content,#the-modal[style="display:none;"] .content{height:100dvh;margin-right:-100%!important}#the-modal .header{gap:var(--spacing--16);margin-bottom:var(--spacing--24)}#the-modal .header .title{color:var(--color-light-grey)}#the-modal .header .button-close{cursor:pointer;height:2.4rem;position:absolute;right:clamp(2.4rem,2.0116504854rem + 1.0355987055vw,4rem);top:var(--spacing--24);width:2.4rem}#the-modal .header+div{overflow-y:auto;padding-right:var(--spacing--8);scrollbar-color:var(--color-light-grey) var(--color-dark-background);scrollbar-width:thin}#the-modal .header+div::-webkit-scrollbar{width:6px}#the-modal .header+div::-webkit-scrollbar-track{background:var(--color-dark-background)}#the-modal .header+div::-webkit-scrollbar-thumb{background-color:var(--color-light-grey);border-radius:8px}#the-modal .header+div::-webkit-scrollbar-thumb:hover{background-color:#000}#the-modal .content{background-color:var(--modal-content-bg-clr,#fff);background-color:var(--color-dark-background);color:var(--color-white);margin:var(--modal-content-margin,auto);max-height:100dvh;overflow:auto;overflow:hidden;padding:var(--spacing--24) clamp(2.4rem,1.040776699rem + 3.6245954693vw,8rem) var(--spacing--64);position:relative;transition:all .4s ease-in-out;width:min(100%,45rem);width:100%}@media (min-width:768px){#the-modal .content{max-height:100dvh;width:min(90%,103rem)}}