.modal-wrapper {
    position: absolute;
    right: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(16.8816px);
    backdrop-filter: blur(16.8816px);
    animation: modalfadein 0.7s forwards;
    width: calc(100% - 40px);
    height: unset;
    z-index: 999;
    overflow: auto;
    background-color: var(--tertiary-light-grey);
    opacity: 1;
    padding: 5.5rem 2rem 3rem;
    clip-path: polygon(0 16px, calc(100% - 124px) 16px, calc(100% - 113px) 0, 100% 0, 100% 100%, 0 100%);
    @media(width >=768px) and (width < 1366px) {
        width: calc(100% - 112px);
    }
    @media(width >=1366px) {
        width: 76%;
        clip-path: polygon(0 24px, calc(100% - 284px) 24px, calc(100% - 267px) 0, 100% 0, 100% 100%, 0 100%);
    }
}

.modal-container, .modal-container-agree {
    z-index: 9999;
    display: none;
}

.modal-container.active, .modal-container-agree.active {
    display: block;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

.modal-wrapper-item {
    background-color: var(--tertiary-white);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tertiary-medium-grey);
}

.modal-wrapper-item-header {
    font-size: .875rem;
    line-height: 1.25rem;
    padding: 12px 8px 16px;
    @media (width >= 1024px) {
      padding: 12px 16px 16px;
    }
}

.modal-wrapper-item-header h3 {
    margin: 0;
    color: var(--primary-main);
    font-family: var(--font-primary-nexa);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    position: relative;
}

.modal-wrapper-item-content {
    color: var(--secondary-main);
    text-align: justify;
    font-family: var(--font-primary-nexa);
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    padding: 0 20px 20px 17px;
    height: 247px;
    overflow: auto;
    display: none;
    @media (width >= 1024px) {
      font-size: 14px;
    }
}

.modal-wrapper-item-content.active {
    display: block;
      ul {
        list-style-type: disc;
        margin-left: 26px;
      }
}
.modal-wrapper-item-header h3:after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    right: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3.33325V12.6666" stroke="%23171C8F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.33325 8H12.6666" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.modal-wrapper-item-header.active {
  h3 {
    &:after {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.33325 8H12.6666" stroke="%23171C8F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }

    &.hide-accordion:after {
      display: none;
    }
  }
}

.modal-container-agree .modal-wrapper-item-header.active h3:after {
    display: none;
}

.modal-wrapper-item-content p:first-child {
    margin-top: 0;
}

.modal-wrapper .modal-close {
    width: 24px;
    height: 24px;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 24px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 40 40" fill="none"><path d="M10.6665 31.0894L8.91028 29.3332L18.2436 19.9999L8.91028 10.6665L10.6665 8.91028L19.9999 18.2436L29.3332 8.91028L31.0894 10.6665L21.7561 19.9999L31.0894 29.3332L29.3332 31.0894L19.9999 21.7561L10.6665 31.0894Z" fill="black"/></svg>');
}