.modal-register-connection {
    border-radius: 20px !important;
}

    .modal-register-connection > .close-icon {
        position: absolute !important;
        right: 22px !important;
        top: 0px !important;
        cursor: pointer;
    }

        .modal-register-connection > .close-icon:hover {
            opacity: 0.8;
        }

    .modal-register-connection .content {
        display: flex !important;
        flex-direction: row;
        padding: 0 !important;
        background: unset !important;
    }

        .modal-register-connection .content .img {
            width: 30%;
        }

            .modal-register-connection .content .img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
            }

        .modal-register-connection .content .text {
            padding: 3rem;
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .modal-register-connection .content .text > * {
                text-align: center;
                width: 100%;
            }

            .modal-register-connection .content .text div {
                width: 80%;
            }

                .modal-register-connection .content .text div > * {
                    width: 100%;
                }

            .modal-register-connection .content .text h2 {
                margin-bottom: 2rem;
                font-weight: 500;
            }

            .modal-register-connection .content .text button {
                text-align: center;
                margin: 8px 0 !important;
            }

#container-register-requirement {
    display: flex;
    position: fixed;
    top: 45%;
    right: 20px;
    z-index: 9;
    cursor: pointer;
}

    #container-register-requirement .btn-span {
        font-size: x-large;
        color: var(--text-highlight);
    }

    #container-register-requirement .btn-close {
        font-size: x-large;
        color: var(--primary-color);
    }

    #container-register-requirement a img {
        width: 138px;
        height: auto;
    }


    #container-register-requirement .btn-close {
        margin-right: 8px;
    }

    #container-register-requirement .btn-close,
    #container-register-requirement.active .tag-name {
        display: none;
    }

    #container-register-requirement.active .btn-close,
    #container-register-requirement .tag-name {
        display: inline-flex;
    }

    #container-register-requirement:not(.active) {
        right: -138px;
    }

    #container-register-requirement .tag-name {
        display: flex;
        flex-direction: column;
        color: #000;
        background: #fff;
        gap: 10px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, .2);
        padding: 8px;
        animation: a 2s linear infinite
    }

        #container-register-requirement .tag-name span {
            writing-mode: vertical-lr;
            display: block;
            font-weight: 600;
            transform: rotate(180deg);
        }

.gradient-border {
    --borderWidth: 2px;
    background: #1D1F20;
    position: relative;
    border-radius: var(--borderWidth);
}

    .gradient-border:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
    }
@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media only screen and (max-width: 768px) {
    .modal-register-connection .content {
        flex-direction: column;
        padding: 0 !important;
    }

        .modal-register-connection .content .img {
            width: 100%;
        }

            .modal-register-connection .content .img img {
                border-radius: 20px;
                max-height: 346px;
                object-position: top;
            }

        .modal-register-connection .content .text {
            width: 100%;
            padding: 1rem 0;
        }

            .modal-register-connection .content .text > * {
                width: 100%;
            }
            .modal-register-connection .content .text div {
                width: 100%;
            }

    .modal-register-connection #close-modal-icon {
        right: 22px !important;
        top: 0 !important;
    }

    #container-register-requirement {
        top: 58%;
    }

        #container-register-requirement a img {
            width: 106px;
        }

        #container-register-requirement:not(.active) {
            right: -106px;
        }

        #container-register-requirement .fa {
            font-size: large;
        }
}