.getcid-wrapper {
width: 100%;
display: block;
padding: 0;
} .getcid-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
} .getcid-container h1 {
color: #0078D7;
margin-bottom: 30px;
font-weight: 500;
font-size: 28px;
letter-spacing: -0.5px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 15px;
} .step-indicator {
display: flex;
margin-bottom: 30px;
}
.step {
flex: 1;
text-align: center;
padding: 15px;
background-color: #f0f0f0;
color: #555;
position: relative;
}
.step.active {
background-color: #0073aa;
color: white;
}
.step:not(:last-child):after {
content: "";
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: inherit;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
z-index: 2;
} .step-content {
display: none;
margin-bottom: 30px;
}
.step-content.active {
display: block;
}
.step-content p {
margin-bottom: 25px;
color: #444;
font-size: 16px;
line-height: 1.5;
} .form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.form-control {
width: 100%;
padding: 8px 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
.email-field-container {
position: relative;
}
.email-check-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #ccc;
display: none;
}
.email-check-icon.valid {
display: block;
color: green;
} .form-actions {
margin-top: 30px;
} .button {
background-color: #0073aa;
color: white;
border: none;
padding: 10px 15px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #005d87;
}
.button:disabled {
background-color: #cccccc;
cursor: not-allowed;
} #cid-result {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
border-left: 4px solid #0078D7;
}
#cid-result h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
font-weight: 500;
font-size: 18px;
}
#cid-value {
width: 100%;
font-family: monospace;
font-size: 14px;
letter-spacing: 1px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fff;
height: 40px;
margin-bottom: 10px;
color: #333;
}
.cid-label {
display: block;
font-weight: 600;
margin-bottom: 10px;
font-size: 13px;
color: #555;
}
.cid-result-container {
margin-top: 20px;
border: 1px solid #ddd;
padding: 15px;
border-radius: 4px;
background-color: #f9f9f9;
}
.cid-error {
color: #dc3232;
margin-top: 10px;
font-size: 14px;
} .error-message {
color: #dc3545;
margin-top: 15px;
padding: 10px 15px;
background-color: #fff;
border-radius: 6px;
border-left: 3px solid #dc3545;
font-size: 14px;
line-height: 1.5;
} .copyright {
margin-top: 35px;
font-size: 13px;
color: #999;
border-top: 1px solid #f0f0f0;
padding-top: 15px;
} .hidden {
display: none;
} @media (max-width: 768px) {
.getcid-container {
padding: 15px;
}
.getcid-container h1 {
font-size: 24px;
}
.button {
width: 100%;
}
} #iid {
letter-spacing: 1px;
font-family: monospace;
font-size: 14px;
} .loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
margin-right: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}