.ms-fx-form-fade-out {
transition: opacity 0.35s ease;
opacity: 0;
}
.ms-fx-default-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 8px 4px;
text-align: center;
opacity: 0;
animation: ms-fx-fade-rise 0.45s ease forwards;
}
.ms-fx-default-success .ms-fx-message {
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: #334155;
} .ms-fx-card {
position: relative;
overflow: hidden;
text-align: center;
border-radius: 8px;
}
.ms-fx-accent-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0d9488, #34d399);
} .ms-fx-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 32px 12px 20px;
opacity: 0;
animation: ms-fx-fade-rise 0.5s ease forwards;
}
.ms-fx-tpl-festa .ms-fx-content {
animation: ms-fx-bounce-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ms-fx-icon-wrap {
width: 76px;
height: 76px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13, 148, 136, 0.1);
}
.ms-fx-icon-wrap-sm {
width: 56px;
height: 56px;
}
.ms-fx-icon-wrap svg {
width: 60%;
height: 60%;
overflow: visible;
}
.ms-fx-checkmark-circle {
fill: none;
stroke-width: 2;
}
.ms-fx-checkmark-path {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: ms-fx-draw 0.6s ease forwards 0.2s;
}
.ms-fx-checkmark--teal .ms-fx-checkmark-circle,
.ms-fx-checkmark--teal .ms-fx-checkmark-path {
stroke: #0d9488;
}
.ms-fx-checkmark--green .ms-fx-checkmark-circle,
.ms-fx-checkmark--green .ms-fx-checkmark-path {
stroke: #16a34a;
}
.ms-fx-checkmark--white .ms-fx-checkmark-circle,
.ms-fx-checkmark--white .ms-fx-checkmark-path {
stroke: #ffffff;
}
.ms-fx-title {
margin: 0;
font-size: 1.375rem;
font-weight: 700;
color: #0f172a;
}
.ms-fx-message {
margin: 0;
max-width: 480px;
font-size: 1rem;
line-height: 1.55;
color: #475569;
} .ms-fx-tpl-onda {
background: linear-gradient(135deg, #0d9488 0%, #10b981 100%) !important;
border: none !important;
}
.ms-fx-tpl-onda .ms-fx-icon-wrap {
background: rgba(255, 255, 255, 0.16);
}
.ms-fx-tpl-onda .ms-fx-title,
.ms-fx-tpl-onda .ms-fx-message {
color: #ffffff;
}
.ms-fx-blob {
position: absolute;
border-radius: 50%;
filter: blur(36px);
opacity: 0.5;
background: rgba(255, 255, 255, 0.35);
animation: ms-fx-float 9s ease-in-out infinite;
pointer-events: none;
}
.ms-fx-blob-1 {
width: 180px;
height: 180px;
top: -50px;
left: -40px;
}
.ms-fx-blob-2 {
width: 150px;
height: 150px;
bottom: -40px;
right: -30px;
background: rgba(4, 120, 87, 0.35);
animation-delay: -4s;
} .ms-fx-confetti-canvas {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999;
} @keyframes ms-fx-fade-rise {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ms-fx-bounce-in {
0% {
opacity: 0;
transform: scale(0.3);
}
60% {
opacity: 1;
transform: scale(1.08);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes ms-fx-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes ms-fx-float {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(16px, -18px) scale(1.08);
}
} @media (max-width: 480px) {
.ms-fx-icon-wrap {
width: 60px;
height: 60px;
}
.ms-fx-title {
font-size: 1.2rem;
}
.ms-fx-message {
font-size: 0.9375rem;
}
.ms-fx-content {
padding: 24px 8px 16px;
}
} .ms-fx-no-motion .ms-fx-content,
.ms-fx-no-motion .ms-fx-default-success {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.ms-fx-no-motion .ms-fx-checkmark-path {
animation: none !important;
stroke-dashoffset: 0 !important;
}
.ms-fx-no-motion .ms-fx-blob {
animation: none !important;
}
.ms-fx-no-motion.ms-fx-form-fade-out {
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.ms-fx-content,
.ms-fx-default-success {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.ms-fx-checkmark-path {
animation: none !important;
stroke-dashoffset: 0 !important;
}
.ms-fx-blob {
animation: none !important;
}
.ms-fx-form-fade-out {
transition: none !important;
}
} .ms-formio-scope ul.pagination,
.ms-formio-scope .formio-wizard-nav-container,
.ms-formio-scope .list-inline {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.ms-formio-scope ul.pagination > li,
.ms-formio-scope .formio-wizard-nav-container > li,
.ms-formio-scope .list-inline > li {
list-style: none !important;
} :is(.ms-formio-scope, .formio-dialog) .ms-visual-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
}
:is(.ms-formio-scope, .formio-dialog) .form-check.ms-visual-card {
margin: 0;
padding-left: 0;
}
:is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border: 2px solid #cbd5e1;
border-radius: 12px;
padding: 14px 18px 12px;
cursor: pointer;
min-width: 132px;
background: #fff;
text-align: center;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
:is(.ms-formio-scope, .formio-dialog) .ms-visual-card .ms-choice-img {
width: 96px;
height: 96px;
object-fit: contain;
display: block;
max-width: 100%;
}
:is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label:hover {
border-color: #14b8a6;
} :is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label:has(input:checked) {
border-color: #0d9488;
background: #f0fdfa;
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
} :is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label input[type="checkbox"],
:is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label input[type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
margin: 0 !important;
pointer-events: none;
}
:is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label {
position: relative;
} :is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label:has(input:focus-visible) {
outline: 2px solid #0d9488;
outline-offset: 2px;
} :is(.ms-formio-scope, .formio-dialog) .ms-visual-card .form-check-label:has(input:checked)::after {
content: "✓";
position: absolute;
top: 6px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 9999px;
background: #0d9488;
color: #fff;
font-size: 14px;
line-height: 22px;
text-align: center;
font-weight: 700;
}