.container{display:flex;align-items:stretch;margin:40px}
.input-section{display:flex;flex-direction:column;gap:20px;padding-right:20px}
.input-group{display:flex;gap:10px}
.button-group{display:flex;justify-content:center;align-items:center}
.separator{width:2px;background-color:#333;margin:0 20px;align-self:stretch}
.response-section{min-width:250px}
.response-box{margin-bottom:20px;padding:10px;border:1px solid #ccc;background-color:#f4f4f4}
.line{border:0;height:10px;background-color:#000}
.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}
.loader{position:relative;z-index:1000;display:flex;align-items:center;justify-content:center;width:130px;height:130px;aspect-ratio:1;perspective:400px}
.loader:before{display:block;content:"";width:60%;height:50%;background:center/contain url(../../../en-us/assets/logos/Trellix-Slash-C.svg) no-repeat;z-index:1002;animation:spinY 2s linear infinite}
@keyframes fadeEffect{from{opacity:0}
to{opacity:1}
}
@keyframes loaderHueRotateBorder{0{border-top-color:var(--bs-primary)}
50%{border-top-color:var(--bs-light-blue)}
100%{border-top-color:var(--bs-green)}
}
@keyframes spinY{0{transform:rotateY(0)}
100%{transform:rotateY(-360deg)}
}
@keyframes spinX{0{transform:rotate(45deg)}
100%{transform:rotate(405deg)}
}
.modal-lg{max-width:640px}
.modal-header{align-items:flex-start}
.modal-content{border-radius:0;border:0}
.modal-content-bar:after{content:"";display:block;width:100%;height:7px;background:var(--lg-brand-west)}
.modal-footer{border:0;justify-content:flex-start}
.modal.full-cover{background:var(--bs-white)}
.xf-web-container .modal.fade{display:block !important;opacity:1 !important}
.loader:after{display:block;content:"";position:absolute;inset:0;aspect-ratio:1;border:6px solid rgba(var(--bs-gray-rgb),0.1);border-top:6px solid var(--bs-primary);border-radius:50%;z-index:1001;animation:spinX 2s linear infinite,loaderHueRotateBorder 2s alternate infinite}
#loaderModal .modal-dialog{margin:0 auto}