.modal-dialog.terms-and-conditions {
    margin: 20px;
    --maxwidth: 500px;
    max-width: var(--maxwidth);
    .clear {
        clear: both;
    }
    .checkBox {
        display: block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 255, 255, 0);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 0px 0px 2px #fff;
    }

    .checkBox div {
        width: 40px;
        height: 40px;
        background-color: #fff;
        top: -52px;
        left: -52px;
        position: absolute;
        transform: rotateZ(45deg);
        z-index: 100;
    }

    .checkBox input[type="checkbox"]:checked + div {
        left: -10px;
        top: -10px;
    }

    .checkBox input[type="checkbox"] {
        position: absolute;
        left: 50px;
        visibility: hidden;
    }

    .transition {
        transition: 300ms ease;
    }
    & .modal-header .title {
        padding: 0;
        padding-top: 1rem;
        font-size: 24px;
        font-weight: 500;
        color: rgb(var(--primary-color));
        text-align: center;
    }

    & .modal-content {
        padding: 0;
        & .content {
            display: flex;
            gap: .5rem;
            align-items: center;
        }
        & .terms-box {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid rgba(204, 204, 204, 0.413);
            padding: 10px 16px;
            margin: 15px 0;
        }

        & .details {
            padding: 1.5rem 2rem;
            & #continueBtn {
                all: unset;
                margin-inline: auto;
                cursor: pointer;
                padding: 0.5rem 1rem;
                border-radius: 10px;
                background: var(--primary-gradient-right);
                &:disabled {
                    background: gray;
                    opacity: 0.6;
                }
            }
        }

    }
}