.captcha-frame.google {
    width: 300px;
    background-color: var(--main-panel-bgcolor);

    display: grid;
    grid:
    "captcha" 78px
    "captcha-info" 20px
    "confirm-input" 40px
    / 1fr;
    padding: 10px;
    row-gap: 2px;
    border-radius: 5px;
    margin: auto;
}

.captcha-frame.yandex {
    width: 300px;
    background-color: var(--main-panel-bgcolor);

    display: grid;
    grid:
    "captcha" 102px
    "captcha-info" 20px
    "confirm-input" 40px
    / 1fr;
    padding: 10px;
    row-gap: 2px;
    border-radius: 5px;
    margin: auto;
}

.captcha-frame.gregwar {
    width: 300px;
    background-color: var(--main-panel-bgcolor);

    display: grid;
    grid:
    "captcha update-captcha" 55px
    "input-captcha input-captcha" 40px
    "captcha-info captcha-info" 20px
    "confirm-input confirm-input" 40px
    "captcha-id captcha-id" 10px
    / auto 55px;
    gap: 1px;
    padding: 5px 10px;
    border-radius: 5px;
    margin: auto;
}

.captcha-self {
    grid-area: captcha;
    margin: 2px 0;
    border-radius: 5px;
}

.captcha-info {
    opacity: 0;
    color: #ee0101;
    min-height: 20px;
    grid-area: captcha-info;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.captcha-info.visible {
    animation: shake-fade-in 0.5s ease forwards;
}

.captcha-info.fade-out {
    transition: opacity 0.5s ease;
    opacity: 0;
}

.captcha-input {
    grid-area: input-captcha;
    border-radius: 5px;
    font-size: large;
    border-width: 7px;
    border-color: white;
    border-style: solid;
}
.captcha-frame.gregwar .captcha-input {
    margin-right: 0;
}


.captcha-confirm-input, .button_registration {
    grid-area: confirm-input;
}

#idcaptcha {
    grid-area: captcha-id;
    font-size: 9px;
    text-align: right;
    color: var(--main-button-bgcolor);
}

.captcha-update {
    grid-area: update-captcha;
}

.captcha-update .icon-wrapper {
    padding-top: 10px;
    display: inline-flex;
}

.captcha-update:hover {
    background-color: var(--hover-button-bgcolor);
}

@keyframes shake-fade-in {
    0% { opacity: 0; transform: translateX(-10px); }
    30% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    100% { opacity: 1; transform: translateX(0); }
}