.nias-modal-box button,
.nias-modal-box input {
margin: 0;
min-height: 0;
height: auto;
padding: 0;
box-shadow: none;
} .nias-modal-box * {
box-sizing: border-box;
} .nias-main-modal .nsinput-field label.ns-radio-label {
position: absolute !important;
color: var(--nias-label-color, #8d8d8d);
pointer-events: none;
background-color: transparent;
right: 9px; top: var(--nias-label-anchor, 50%);
transform: translateY(var(--nias-label-center, -50%))
translateY(var(--nias-label-ty, 0px))
translateX(var(--nias-label-tx, 0px)) scale(var(--nias-label-sc, 1));
transition: all 0.3s ease;
max-width: fit-content;
margin: 0;
line-height: 1.2;
font-size: 15px;
}
.nias-main-modal .nsinput-field input[type="text"],
.nias-main-modal .nsinput-field input[type="password"],
.nias-main-modal .nsinput-field input[type="tel"],
.nias-main-modal .nsinput-field input[type="email"] {
box-sizing: border-box;
font-size: var(--nias-font-size, 1rem);
line-height: var(--nias-input-line-height, 0);
border-radius: 8px;
width: 100%;
max-width: 100%;
padding: var(--nias-input-padding, 12px 16px);
min-height: var(--nias-input-min-height,43px);
height: var(--nias-input-height, auto);
border: 1px solid #cdcdcd;
outline: none !important;
}
.nias-main-modal .nsinput-field input[type="text"]:focus,
.nias-main-modal .nsinput-field input[type="password"]:focus,
.nias-main-modal .nsinput-field input[type="tel"]:focus,
.nias-main-modal .nsinput-field input[type="email"]:focus,
.nias-main-modal .nsinput-field input[type="text"]:valid,
.nias-main-modal .nsinput-field input[type="password"]:valid,
.nias-main-modal .nsinput-field input[type="tel"]:valid,
.nias-main-modal .nsinput-field input[type="email"]:not(:placeholder-shown) {
outline: none;
border: solid 1px #0034de;
} .nias-main-modal .nsinput-field input[type="text"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="password"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="tel"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="email"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="text"]:valid ~ label,
.nias-main-modal .nsinput-field input[type="password"]:valid ~ label,
.nias-main-modal .nsinput-field input[type="tel"]:valid ~ label,
.nias-main-modal
.nsinput-field
input[type="email"]:not(:placeholder-shown)
~ label { top: var(--nias-label-anchor-f, 0);
transform: translateY(var(--nias-label-center-f, -50%))
translateY(var(--nias-label-ty-f, 0px))
translateX(var(--nias-label-tx-f, -5px)) scale(var(--nias-label-sc-f, 0.7)) !important;
background-color: var(--nias-modal-bg, #fff);
padding: 0px 5px;
color: var(--nias-label-color-focus, #0034de);
font-weight: bold;
letter-spacing: 1px;
border: none;
border-radius: 100px;
} .nias-main-modal.nias-elementor .nsinput-field label.ns-radio-label {
--nias-label-anchor: 0px;
--nias-label-center: 0px;
--nias-label-anchor-f: 0px;
--nias-label-center-f: 0px;
line-height: 30px;
} .nias-tabs {
overflow: hidden;
}
.nias-tabs__header {
display: flex;
gap: 6px;
padding: 8px;
} .nias-main-modal .nias-tabs input[type="radio"] {
position: absolute;
opacity: 0;
inset-inline-start: -9999px;
}
.nias-main-modal label#nias-label-2 {
float: right;
}
.nias-main-modal label#nias-label-1 {
float: left;
} .nias-tabs label:not(.nsinput-field label) {
cursor: pointer;
user-select: none;
padding: 8px 15px;
border-radius: 12px;
color: #cbd5e1;
font-weight: 600;
transition: all 0.25s ease;
outline-offset: 4px;
display: flex;
align-items: center;
gap: 8px;
z-index: 999;
position: relative;
background-color: #000000;
}
.nias-tabs label[aria-selected="false"] {
background-color: #00000017!important;
color: #000000bd!important;
}
.nias-tabs label:not(.nsinput-field label):hover,
.nias-tabs [id^="nias-tab-"]:checked + label {
color: #ffffff;
} .nias-tabs__panels {
position: relative;
}
.nias-panel {
display: none;
border-radius: 14px;
animation: nias-fade 0.25s ease both;
}
@keyframes nias-fade {
from {
opacity: 0;
translate: 0 6px;
}
to {
opacity: 1;
translate: 0 0;
}
}  .nias-tabs__header {
overflow: auto;
scrollbar-width: thin;
}
.nias-tabs__header::-webkit-scrollbar {
height: 6px;
}
.nias-tabs__header::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 999px;
} .nias-panel p {
margin: 0.25rem 0;
} .nias-tabs label:focus-visible {
outline: 3px solid #38bdf8;
} @media (prefers-reduced-motion: reduce) {
}
.nias-modal-box {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 999999999;
background-color: #00000082;
visibility: hidden;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
opacity: 0;
transition: all 0.3s linear;
display: flex;
}
.nias-modal-box.open,
.nias-locked .nias-modal-box {
visibility: visible;
opacity: 1;
} .nias-locked > *:not(.nias-modal-box):not(.nias-success):not(#nias-toast-wrap) {
display: none !important;
}
.nias-locked button.nias-close-modal {
display: none;
}
.nias-panel .nias-modal-title {
display: flex;
justify-content: center;
}
.nias-main-modal {
background-color: var(--nias-modal-bg, #fff);
padding: 15px;
border-radius: var(--nias-radius, 15px);
position: relative;
width: 400px;
display: block;
margin: 10px;
max-width: 750px;
transform: scale(0);
transition: 0.3s;
}
.nias-modal-box.open .nias-main-modal,
.nias-locked .nias-main-modal {
transform: scale(1);
}
@media screen and (max-width: 500px) {
.nias-main-modal {
width: 350px;
}
}
.nias-phone-box {
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #f3f3f3;
padding: 10px;
border-radius: 10px;
gap: 10px;
}
.nias-phone-box input[type="text"],
.nias-phone-box input[type="password"],
.nias-phone-box input[type="tel"],
.nias-phone-box input[type="email"] {
border: none;
outline: none;
background-color: transparent;
direction: ltr;
border-bottom: 1px solid #043dcc00;
}
.nias-phone-box input[type="text"]:focus,
.nias-phone-box input[type="password"]:focus,
.nias-phone-box input[type="tel"]:focus,
.nias-phone-box input[type="email"]:focus {
border-bottom: 1px solid #043ccc;
border-radius: 0;
}
.nias-login-field button,
.nias-login-code button {
background: var(--nias-primary, #043ccc);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
color: white;
fill: white;
border: none;
outline: none;
border-radius: 10px;
margin-top: 20px;
gap: 10px;
padding: 12px 24px;
font-family: unset;
margin-bottom: 0;
}
button.nias-close-modal {
padding: 0;
outline: none !important;
display: flex;
gap: 10px;
font-size: var(--nias-close-btn-font, 12px);
border: none !important;
position: absolute;
top: var(--nias-close-btn-top, -22px);
right: var(--nias-close-btn-right, 0px);
color: var(--nias-close-btn-color, #ffffff);
fill: currentColor;
stroke: currentColor;
background-color: var(--nias-close-btn-bg, red) !important;
align-items: center; width: auto;
min-width: var(--nias-close-btn-width, 100px);
text-align: center;
justify-content: center;
border-radius: var(--nias-close-btn-radius, 20px 20px 0 20px);
padding: 5px;
font-family: unset;
box-shadow: var(--nias-close-btn-shadow, -14px 5px 20px 0 #0000004a);
} button.nias-close-modal svg {
width: var(--nias-close-btn-icon, 24px);
height: var(--nias-close-btn-icon, 24px);
min-width: var(--nias-close-btn-icon, 24px);
min-height: var(--nias-close-btn-icon, 24px);
flex-shrink: 0;
}
.nias-modal-title {
width: 100%;
text-align: center;
display: block;
font-size: var(--nias-title-font-size, 20px);
font-weight: bold;
margin-bottom: 30px;
color: var(--nias-title-color, #205fff);
} .nias-subtitle,
.nias-login-form label:not(.nsinput-field label) {
width: 100%;
text-align: center;
margin-bottom: 20px;
font-size: var(--nias-subtitle-font-size, 13px);
display: block;
}
.nias-login-message {
margin-top: 20px;
background-color: #ff000029;
padding: 5px 12px;
color: #fa0000;
border-radius: 10px;
display: none;
}
.nias-login-message.active {
display: flex;
}
.nias-code-box {
display: flex;
justify-content: space-around;
gap: 10px;
direction: ltr;
flex-wrap: nowrap;
flex-direction: row;
}
.nias-main-modal .nias-code-box input[type="text"],
.nias-main-modal .nias-code-box input[type="password"],
.nias-main-modal .nias-code-box input[type="tel"],
.nias-main-modal .nias-code-box input[type="email"] {
background: #efefef;
width: 100%;
height: 50px;
border-radius: 10px;
border: 1px solid #cdcdcd00;
text-align: center;
direction: ltr;
font-size: 30px;
color: var(--nias-primary, #043ccc);
transition: all 0.3s ease;
}
.nias-main-modal .nias-code-box input[type="text"]:focus,
.nias-main-modal .nias-code-box input[type="password"]:focus,
.nias-main-modal .nias-code-box input[type="tel"]:focus,
.nias-main-modal .nias-code-box input[type="email"]:focus {
background-color: #eaecff;
border: 1px solid #2666cf;
outline: none;
}
.nias-under-code {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
} .nias-login-result,
.nias-login-message {
white-space: pre-line;
}
.nias-login-result {
margin: 0;
}
.nias-confirm-box {
display: flex;
gap: 20px;
}
.nias-resend {
opacity: 0;
cursor: not-allowed;
text-decoration: none;
visibility: hidden;
transition: all 0.3s ease;
}
.nias-success {
background-color: #ffffffe6;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2147483646;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p.niaslogin-success-title {
font-size: 20px;
color: #00cf30;
background-color: #00cf301c;
padding: 10px 24px;
border-radius: 10px;
font-weight: bold;
}
p.niaslogin-success-subtitle {
display: flex;
flex-direction: column-reverse;
align-items: center;
color: #00a827;
fill: #00a827;
}
.nias-success svg {
width: 50px;
height: 50px;
}
.nias-login-field button[disabled],
.nias-login-code button[disabled] {
filter: grayscale(1);
cursor: not-allowed;
}
.nias-checkicon {
width: 70px;
height: 30px;
display: none;
}
.nias-resendbox {
display: flex;
gap: 10px;
color: var(--nias-primary, #043ccc);
border-radius: 10px;
width: 100%;
justify-content: center;
max-width: 200px;
padding: 10px;
margin: auto;
font-size: 13px;
}
.nias-resendbox.active .nias-resend {
cursor: pointer;
opacity: 1;
text-align: center;
border-radius: 10px;
color: white;
visibility: visible;
opacity: 1;
}
.nias-resendbox.active circle.fill-neutral-light {
fill: var(--nias-primary, #043ccc) !important;
}
span.nias-countdown {
display: flex;
justify-content: center;
}
input#niasphoneinput[type="text"],
input#niasphoneinput[type="password"],
input#niasphoneinput[type="tel"],
input#niasphoneinput[type="email"] {
width: 100%;
}
#nias-change-number,
.nias-main-modal button.nias-forgot-password {
background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 28%, transparent);
color: var(--nias-primary, #043ccc);
}
.nias-spinner-timer {
fill: var(--nias-primary, #043ccc);
}
.stroke-neutral-dark {
stroke: var(--nias-primary, #043ccc) !important;
} .nias-login-form-logo img,
.nias-login-form-logo-code img {
display: flex;
align-self: center;
}
.nias-login-form-logo,
.nias-login-form-logo-code {
display: flex;
flex-direction: column;
} .nias-main-modal input#nias_email_input[type="text"],
.nias-main-modal input#nias_email_input[type="password"],
.nias-main-modal input#nias_email_input[type="tel"],
.nias-main-modal input#nias_email_input[type="email"] {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: var(--nias-input-padding, 12px 16px);
border: 1px solid #cdcdcd;
outline: none !important;
line-height: 0;
} .ns-text-small {
font-size: 12px;
display: block;
}
.nias-modal-box form {
margin: 0;
} .nias-spinner-timer,
.nias-resendbox.loading span.nias-countdown,
.nias-resendbox.active span.nias-countdown,
.nias-modal-box:has(#nias-tab-1:checked) .nias-resendbox,
.logged-in .nias-main-modal,
.nias-main-modal.verify .nias-login-form,
.nias-main-modal .nias-login-code,
.nias-login-field button svg,
.nias-confirm-code svg {
display: none;
}
.nias-resendbox.loading .nias-spinner-timer,
.nias-checkicon.correct,
.nias-main-modal.verify .nias-login-code,
.nias-main-modal form.loading button svg,
#nias-tab-2:checked ~ .nias-tabs__panels #nias-panel-2,
#nias-tab-1:checked ~ .nias-tabs__panels #nias-panel-1 {
display: block;
} .nias-resendbox,
.nias-main-modal .nsinput-field {
position: relative;
} .nias-main-modal .nsinput-field {
display: flex;
flex-direction: column;
} #nias-code-form {
position: relative;
}
#nias-code-form.nias-otp-sending::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(3px);
border-radius: 14px;
z-index: 10;
}
#nias-code-form.nias-otp-sending::before {
content: "در حال ارسال کد تایید...";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
color: #043ccc;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
background: #fff;
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(4, 60, 204, 0.15);
}
.nias-resendbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.nias-resend,
span.nias-countdown,
.nias-spinner-timer {
position: absolute;
}
.spinner_d9Sa {
transform-origin: center;
}
.spinner_qQQY {
animation: spinner_ZpfF 9s linear infinite;
}
.spinner_pote {
animation: spinner_ZpfF 0.75s linear infinite;
}
@keyframes spinner_ZpfF {
100% {
transform: rotate(360deg);
}
} .nias-manual-password {
display: flex;
flex-direction: column;
}
.nias-pass-strength {
margin: -2px 0 10px;
}
.nias-pass-strength__track {
height: 6px;
border-radius: 6px;
background: #e5e7eb;
overflow: hidden;
}
.nias-pass-strength__bar {
display: block;
height: 100%;
width: 0;
border-radius: 6px;
background: #e53935;
transition: width 0.25s ease, background 0.25s ease;
}
.nias-pass-strength__text {
display: block;
margin-top: 4px;
font-size: 11px;
color: #8d8d8d;
} .nias-main-modal .nsinput-field.nias-has-toggle input[type="password"],
.nias-main-modal .nsinput-field.nias-has-toggle input[type="text"] {
padding-left: 42px;
}
.nias-main-modal .nsinput-field .nias-pass-toggle {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 30px !important;
height: 30px !important;
min-height: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 4px !important;
margin: 0 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
color: #8d8d8d !important;
fill: currentColor !important;
line-height: 0;
z-index: 2;
}
.nias-main-modal .nsinput-field .nias-pass-toggle:hover {
color: #0034de !important;
}
.nias-main-modal .nsinput-field .nias-pass-toggle svg {
width: 20px !important;
height: 20px !important;
display: block !important;
} .nias-main-modal .nias-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
margin-top: 12px;
padding: 11px 16px;
background: #fff;
color: #3c4043;
border: 1px solid #dadce0;
border-radius: 10px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.nias-main-modal .nias-google-btn:hover {
background: #f7f8fa;
border-color: #c6c9ce;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.nias-main-modal .nias-google-btn svg {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.nias-main-modal .nias-google-btn span {
line-height: 1;
} @supports (-webkit-touch-callout: none) {
.nias-modal-box .nsinput-field input,
.nias-modal-box .nias-phone-box input,
.nias-modal-box select,
.nias-modal-box textarea,
.nias-main-modal .nsinput-field input,
.nias-main-modal .nias-phone-box input,
.nias-main-modal select,
.nias-main-modal textarea { font-size: 16px !important;
font-size: max(16px, var(--nias-font-size, 1rem)) !important;
}
} .nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button {
background: var(--nias-primary, #043ccc);
color: #fff;
fill: #fff;
border: none;
box-shadow: none;
text-decoration: none;
}
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button:focus { background: var(--nias-primary, #043ccc);
background: color-mix(in srgb, var(--nias-primary, #043ccc) 84%, #000);
color: #fff;
fill: #fff;
box-shadow: none;
} .nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password {
background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 28%, transparent);
color: var(--nias-primary, #043ccc);
border: none;
box-shadow: none;
}
.nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password:focus {
background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 44%, transparent);
color: var(--nias-primary, #043ccc);
} .nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:focus {
color: var(--nias-close-btn-color, #ffffff);
fill: currentColor;
stroke: currentColor;
border: none;
box-shadow: var(--nias-close-btn-shadow, -14px 5px 20px 0 #0000004a);
}
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:focus {
background-color: color-mix(in srgb, var(--nias-close-btn-bg, red) 84%, #000) !important;
} .nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal svg {
stroke: currentColor;
} .nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-code-box input:focus {
box-shadow: none;
} .nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend,
.nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend:focus {
color: var(--nias-primary, #043ccc);
text-decoration: none;
}
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-resendbox.active .nias-resend,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-resendbox.active .nias-resend:hover {
color: #fff;
} .nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field label.ns-radio-label {
color: var(--nias-label-color, #8d8d8d);
}
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input:focus ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="text"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="password"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="tel"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="email"]:not(:placeholder-shown) ~ label.ns-radio-label {
color: var(--nias-label-color-focus, #0034de);
}
p.nias-subtitle {
margin-bottom: 10px;
} :root {
--gooey-width: 350px;
--gooey-height: 44px;
--gooey-duration: 260ms;
--gooey-ease: cubic-bezier(0.22, 1, 0.36, 1);
--gooey-state-success: oklch(0.723 0.219 142.136);
--gooey-state-loading: oklch(0.556 0 0);
--gooey-state-error: oklch(0.637 0.237 25.331);
--gooey-state-warning: oklch(0.795 0.184 86.047);
--gooey-state-info: oklch(0.685 0.169 237.323);
--gooey-state-action: oklch(0.623 0.214 259.815);
--gooey-shadow:
drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12))
drop-shadow(0 16px 28px rgba(15, 23, 42, 0.2));
}
[data-gooey-viewport] {
position: fixed;
z-index: 9999;
display: flex;
gap: 0.75rem;
padding: 0.75rem;
pointer-events: none;
max-width: calc(100vw - 1.5rem);
box-sizing: border-box;
}
[data-gooey-viewport][data-position^="top"] {
top: 0;
flex-direction: column-reverse;
}
[data-gooey-viewport][data-position^="bottom"] {
bottom: 0;
flex-direction: column;
}
[data-gooey-viewport][data-position$="left"] {
left: 0;
align-items: flex-start;
}
[data-gooey-viewport][data-position$="right"] {
right: 0;
align-items: flex-end;
}
[data-gooey-viewport][data-position$="center"] {
left: 50%;
transform: translateX(-50%);
align-items: center;
}
[data-gooey-toast] {
--_entry-y: -8px;
appearance: none;
border: 0;
margin: 0;
padding: 0;
background: transparent;
position: relative;
width: min(var(--gooey-width), calc(100vw - 1.5rem));
height: var(--_h, var(--gooey-height));
cursor: pointer;
pointer-events: auto;
text-align: left;
color: inherit;
opacity: 0;
overflow: visible;
touch-action: none;
transform: translate3d(0, calc(var(--_entry-y) + var(--gooey-drag-y, 0px)), 0)
scale(0.98);
transition:
opacity calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
transform calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
height var(--gooey-duration) var(--gooey-ease);
will-change: opacity, transform, height;
-webkit-tap-highlight-color: transparent;
}
[data-gooey-viewport][data-position^="bottom"] [data-gooey-toast] {
--_entry-y: 8px;
}
[data-gooey-toast][data-ready="true"] {
opacity: 1;
transform: translate3d(0, var(--gooey-drag-y, 0px), 0) scale(1);
}
[data-gooey-toast][data-exiting="true"] {
overflow: hidden;
pointer-events: none;
animation: gooey-exit calc(var(--gooey-duration) * 0.8) var(--gooey-ease) forwards;
}
[data-gooey-toast][data-state="loading"] {
cursor: default;
}
[data-gooey-canvas] {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
}
[data-gooey-svg] {
display: block;
overflow: visible;
filter: var(--gooey-shadow);
}
[data-gooey-toast][data-ready="true"] :is([data-gooey-pill], [data-gooey-body]) {
transition:
x var(--gooey-duration) var(--gooey-ease),
y var(--gooey-duration) var(--gooey-ease),
width var(--gooey-duration) var(--gooey-ease),
height var(--gooey-duration) var(--gooey-ease);
}
[data-gooey-header] {
position: absolute;
left: var(--_hx, 0px);
width: var(--_hw, var(--gooey-height));
height: var(--gooey-height);
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 0.65rem;
box-sizing: border-box;
pointer-events: none;
transition:
left var(--gooey-duration) var(--gooey-ease),
width var(--gooey-duration) var(--gooey-ease);
}
[data-gooey-toast][data-edge="top"] [data-gooey-header] {
top: 0;
}
[data-gooey-toast][data-edge="bottom"] [data-gooey-header] {
bottom: 0;
}
[data-gooey-badge] {
--_tone: var(--gooey-state-success);
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 9999px;
background: color-mix(in oklch, var(--_tone) 18%, transparent);
color: var(--_tone);
flex-shrink: 0;
}
[data-gooey-title] {
--_tone: var(--gooey-state-success);
display: block;
min-width: 0;
font-size: 0.875rem;
line-height: 1.1rem;
font-weight: 600;
color: var(--_tone);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
[data-gooey-time-track] {
--_tone: var(--gooey-state-success);
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 0.38rem;
display: block;
height: 2px;
border-radius: 9999px;
overflow: hidden;
background: color-mix(in oklch, var(--_tone) 18%, transparent);
opacity: 0;
transform: translateY(2px);
transition:
opacity 140ms ease,
transform 140ms ease;
pointer-events: none;
}
[data-gooey-time-fill] {
--_tone: var(--gooey-state-success);
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: color-mix(in oklch, var(--_tone) 72%, white 8%);
transform: scaleX(1);
transform-origin: left center;
}
[data-gooey-toast][data-timeout-indicator="true"] [data-gooey-time-track] {
opacity: 1;
transform: translateY(0);
}
[data-gooey-toast][data-timeout-paused="true"] [data-gooey-time-track] {
opacity: 0.72;
}
[data-gooey-toast][data-position="right"] [data-gooey-time-fill] {
transform-origin: right center;
}
[data-gooey-title-measure] {
position: absolute;
left: -9999px;
top: 0;
display: inline-block;
width: max-content;
max-width: none;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
visibility: hidden;
pointer-events: none;
}
:is(
[data-gooey-badge],
[data-gooey-title],
[data-gooey-time-track],
[data-gooey-time-fill]
)[data-state="loading"] {
--_tone: var(--gooey-state-loading);
}
:is(
[data-gooey-badge],
[data-gooey-title],
[data-gooey-time-track],
[data-gooey-time-fill]
)[data-state="error"] {
--_tone: var(--gooey-state-error);
}
:is(
[data-gooey-badge],
[data-gooey-title],
[data-gooey-time-track],
[data-gooey-time-fill]
)[data-state="warning"] {
--_tone: var(--gooey-state-warning);
}
:is(
[data-gooey-badge],
[data-gooey-title],
[data-gooey-time-track],
[data-gooey-time-fill]
)[data-state="info"] {
--_tone: var(--gooey-state-info);
}
:is(
[data-gooey-badge],
[data-gooey-title],
[data-gooey-time-track],
[data-gooey-time-fill]
)[data-state="action"] {
--_tone: var(--gooey-state-action);
}
[data-gooey-content] {
position: absolute;
left: var(--_bx, 0px);
width: var(--_bw, var(--gooey-width));
opacity: 0;
pointer-events: none;
transition:
opacity calc(var(--gooey-duration) * 0.7) var(--gooey-ease),
transform calc(var(--gooey-duration) * 0.7) var(--gooey-ease),
left var(--gooey-duration) var(--gooey-ease),
width var(--gooey-duration) var(--gooey-ease);
will-change: opacity, transform;
}
[data-gooey-toast][data-edge="top"] [data-gooey-content] {
top: var(--gooey-height);
transform: translateY(-3px);
}
[data-gooey-toast][data-edge="bottom"] [data-gooey-content] {
bottom: var(--gooey-height);
transform: translateY(3px);
}
[data-gooey-content][data-visible="true"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
[data-gooey-description] {
padding: 0.875rem 0.875rem 0.95rem;
font-size: 0.875rem;
line-height: 1.35rem;
color: #334155;
word-break: break-word;
}
[data-gooey-button] {
--_tone: var(--gooey-state-success);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.75rem;
padding: 0 0.65rem;
height: 1.8rem;
border: 0;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
background: color-mix(in oklch, var(--_tone) 15%, transparent);
color: var(--_tone);
cursor: pointer;
transition: background-color 140ms ease;
}
[data-gooey-button]:hover {
background: color-mix(in oklch, var(--_tone) 25%, transparent);
}
[data-gooey-button][data-state="loading"] {
--_tone: var(--gooey-state-loading);
}
[data-gooey-button][data-state="error"] {
--_tone: var(--gooey-state-error);
}
[data-gooey-button][data-state="warning"] {
--_tone: var(--gooey-state-warning);
}
[data-gooey-button][data-state="info"] {
--_tone: var(--gooey-state-info);
}
[data-gooey-button][data-state="action"] {
--_tone: var(--gooey-state-action);
}
[data-gooey-icon="spin"] {
animation: gooey-spin 1s linear infinite;
}
@keyframes gooey-spin {
to {
rotate: 360deg;
}
}
@keyframes gooey-exit {
from {
opacity: 1;
transform: translate3d(0, var(--gooey-drag-y, 0px), 0) scale(1);
}
to {
opacity: 0;
transform: translate3d(0, calc(var(--_entry-y) + var(--gooey-drag-y, 0px)), 0)
scale(0.98);
}
}
@media (max-width: 640px) {
[data-gooey-viewport] {
padding: 0.5rem;
gap: 0.5rem;
max-width: calc(100vw - 1rem);
}
[data-gooey-toast] {
width: min(var(--gooey-width), calc(100vw - 1rem));
}
}
@media (prefers-reduced-motion: reduce) {
[data-gooey-toast],
[data-gooey-header],
[data-gooey-content],
[data-gooey-icon="spin"] {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}    #nias-toast-wrap {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 0;
z-index: 2147483647;
transform: none;
display: block;
max-width: none;
padding: 0;
margin: 0;
border: 0;
background: none !important; pointer-events: none;
} #nias-toast-wrap [data-gooey-viewport] {
z-index: 2147483647;
} #nias-toast-wrap [data-gooey-viewport] {
transform: translateY(var(--nias-toast-offset, 0px));
}
#nias-toast-wrap [data-gooey-viewport][data-position$="center"] {
transform: translateX(-50%) translateY(var(--nias-toast-offset, 0px));
}
#nias-toast-wrap [data-gooey-toast] {
direction: rtl;
text-align: right;
font-family: inherit;
} #nias-toast-wrap [data-gooey-title] {
font-family: inherit;
text-transform: none;
line-height: 1.6;
}
#nias-toast-wrap [data-gooey-description] {
font-family: inherit;
direction: rtl;
text-align: right;
line-height: 1.9;
color: #1f2937;
} #nias-toast-wrap [data-gooey-toast],
#nias-toast-wrap [data-gooey-toast]:hover,
#nias-toast-wrap [data-gooey-toast]:focus,
#nias-toast-wrap [data-gooey-toast]:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
color: inherit !important;
}
#nias-toast-wrap [data-gooey-toast] {
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
display: block !important;
float: none !important;
position: relative !important; width: min(var(--gooey-width), calc(100vw - 1.5rem)) !important;
height: var(--_h, var(--gooey-height)) !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
overflow: visible !important;
pointer-events: auto !important;
touch-action: none !important;
vertical-align: baseline !important; transition:
opacity calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
transform calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
height var(--gooey-duration) var(--gooey-ease) !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: normal !important;
letter-spacing: normal !important;
text-transform: none !important;
text-decoration: none !important;
text-align: right !important; white-space: normal !important;
} #nias-toast-wrap [data-gooey-toast][data-exiting="true"] {
overflow: hidden !important;
pointer-events: none !important;
} #nias-toast-wrap [data-gooey-description] {
white-space: normal !important;
word-break: break-word !important;
} #nias-toast-wrap [data-gooey-button] {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 1.8rem !important;
min-height: 0 !important;
margin: 0.75rem 0 0 !important;
padding: 0 0.65rem !important;
border: 0 !important;
border-radius: 9999px !important;
outline: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: inherit !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: background-color 140ms ease !important;
color: var(--_tone) !important;
background: color-mix(in oklch, var(--_tone) 15%, transparent) !important;
}
#nias-toast-wrap [data-gooey-button]:hover,
#nias-toast-wrap [data-gooey-button]:focus,
#nias-toast-wrap [data-gooey-button]:active {
color: var(--_tone) !important;
background: color-mix(in oklch, var(--_tone) 25%, transparent) !important;
}.wdpu-date-modified {
background: #ebfaff;
padding: 10px;
border: 1px dashed #00c4ff;
border-radius: 5px;
text-align: center;
color: #00c4ff;
width: 100%;
font-size: 16px;
font-weight: bold;
float: none;
margin: 10px 0;
}