.captcha-container {
 border: 1px solid #e7eaee;
 border-radius: 5px;
 text-align: center;
 max-width: 320px;
 background-color: white;
 background-clip: border-box;
 display: none;
 }
    
[data-pc-theme=dark] .captcha-container {
 border: 1px solid #444c56;
 background-color: #2d333b;
}

.captcha-show {
 position: relative;
 display: inline-block;
 width: 100%;
 max-width: 320px;
 height: 250px;
 margin-bottom: 10;
 background-color: white;
 border-radius: 2px;
 border-top: 2px solid #e7eaee;
 border-bottom: 2px solid #e7eaee;
 overflow: hidden;
 background-clip: border-box;
 cursor: pointer;
}

.captcha-show img {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

.dot {
 width: 12px;
 height: 12px;
 background-color: #2D75FF;
 position: absolute;
 border-radius: 50%;
 z-index: 2;
}

.captcha-box {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 border: 1px solid #e7eaee;
 border-radius: 5px;
 background: white;
 max-width: 320px;
 margin-bottom: 15px;
 background-clip: border-box;
}
    
[data-pc-theme=dark] .captcha-box {
 background-color: #2d333b;
 border: 1px solid #444c56;
}

.captcha-box input[type="checkbox"] {
    display: none;
}


.captcha-label {
 display: flex;
 align-items: center;
 cursor: pointer;
 position: relative;
 padding-left: 50px;
 font-size: 17px;
 font-weight: bold;
 color: #333333;
}

[data-pc-theme=dark] .captcha-label {
 color: #ccc;
}

.captcha-label::before {
 content: '';
 width: 30px;
 height: 30px;
 border: 2px solid #2D75FF;
 border-radius: 4px;
 background: transparent;
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 align-items: center;
 justify-content: center;
}

.loading-spinner {
 width: 20px;
 height: 20px;
 border: 3px solid #444c56;
 border-top: 3px solid blue;
 border-radius: 50%;
 animation: spin 1s linear infinite;
 display: none;
}

input[type="checkbox"]:checked + .captcha-label::before {
 background: transparent;
}

input[type="checkbox"]:checked + .captcha-label .loading-spinner {
 display: block;
 position: absolute;
 left: 5px;
}

@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

.captcha-title {
 color: #5B5B5B;
 font-size: 12px;
 font-weight: bold;
 margin-top: 2px;
 margin-bottom: 2px;
}

[data-pc-theme=dark] .captcha-title {
 color: #ccc;
}

.captcha-footer {
 border-top: 2px solid #e7eaee;
 font-size: 12px;
 font-weight: bold;
 color: #2D75FF;
}

.captcha-wave {
 position: relative;
 overflow: hidden;
 --captcha-wave-color: #ffffff80;
}

[data-pc-theme="dark"] .captcha-wave {;
 --captcha-wave-color: #5c6b8a;
}

.captcha-wave::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, transparent, var(--captcha-wave-color), transparent);
 animation: captcha-wave 1.5s ease-in-out 0.5s infinite;
}

@keyframes captcha-wave {
 0% {
 transform: translateX(-100%);
 }
 50%, 100% {
 transform: translateX(100%);
 }
}