.fill-success {
fill: #28A745 !important;
cursor: pointer !important;
transition: transform 0.4s ease-out;
}



.fill-warning {
fill: #FFA500 !important;
cursor: pointer !important;
transition: transform 0.4s ease-out;
}

.fill-error {
fill: var(--error) !important;
cursor: pointer !important;
transition: transform 0.4s ease-out;
}

.success-light{
color: #effdf2 !important;
transition: transform 0.4s ease-out;
}

.success {
color: var(--success) !important;
transition: transform 0.4s ease-out;
}

.warning {
color: #fee8bf !important;
transition: transform 0.4s ease-out;
}

.dark-light{
color:#f0f0f0 !important;
transition: transform 0.4s ease-out;
}

.bg-dark{
background:#333 !important;
}

.grey{
color:#fafafa !important;
transition: transform 0.4s ease-out;
}

.bg-grey{
background:#828181 !important;
}

.bg-black{
background-color: #111 !important;
transform: rotate(-1deg);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
animation: glitch 1.5s infinite;
}

.error {
color: var(--error) !important;
transition: transform 0.4s ease-out;
}

.bg-ritualist {
background-color: #111 !important;
color: #ff6666 !important; /* Light red text for contrast */
text-shadow: 0 0 8px #ff6666, 0 0 16px #f4a0a0 !important; 
font-family: 'Courier New', Courier, monospace;
border-radius: 10px;
transform: rotate(-1deg);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
animation: glitch 1.5s infinite;
}

.ritualist-light {
color: #ff6666 !important; /* Light red text for contrast */
text-shadow: 0 0 8px #ff6666, 0 0 16px #ff6666 !important; /* Subtle light glow for text */
}

@keyframes glitch{
0% {transform: translate(0);}
20% {transform: translate(-2px, -2px);}
40% {transform: translate(2px, 2px);}
60% {transform: translate(-2px, -2px);}
80% {transform: translate(2px, 2px);}
100% {transform: translate(0);}
}


.bg-primary {
background: var(--primary);
color: var(--primary-text);
}

.bg-success {
background: var(--success) !important;
}

.bg-error {
background: var(--error) !important;
}

.bg-warning {
background: #e66423 !important;
}

/** notification-starts*/
.opacify{
opacity: 0.6;
}

.light-opacity{
opacity: 0.85;
}

#index-notif{
width:100% !important;
left:0 !important;
border-radius:.2rem !important;

}


.notification{
position:fixed;
bottom:88% !important;
left:0 !important;
max-width:30%;
width: 100%;
background:var(--bg);
box-shadow:var(--deep-shadow);
border-radius:.2rem !important;
z-index:999999999999 !important;
transition:var(--cubic-transition);
font-family: var(--roboto);
pointer-events: none;
will-change: transformY(0);
transform: scale(1.4) translateX(-10rem);
opacity: 0;
visibility: hidden;
}



.notification.show{
transition:var(--cubic-transition);
opacity: 1;
visibility: visible;
transform: scale(1.0) translateX(0);
cursor: pointer !important;
pointer-events:all;
}


.notification-inner{
width:92% !important;
margin: 0 auto;
padding-bottom: .4rem !important;
padding-left: .4rem;
padding-right: .4rem;
text-align: center;
}

#index-notif  .notification-inner{
margin-top: 1rem !important;
padding: .2px !important;
}

.notification-inner p{
width:100% !important;
max-width:100% !important;
font-size:medium !important;
text-align:center;
margin-bottom: 1rem !important;
}

.notification-inner a{
background:var(--off-light);
border-radius:.8rem;
padding:.3rem;
box-shadow:var(--medium-shadow);
}



#close-form-block{
display:flex;
justify-content:flex-end;
cursor:pointer;
}
#close-form-block .accesibility-icon{
box-shadow:none ;
background:none;
width:55px;
height:55px;
}

/*** notification ends ***/
/** notification-starts*/
.opacify{
opacity: 0.6;
}

.light-opacity{
opacity: 0.45;
}

.lighter-opacity {
opacity: 0.3;
}

.notification{
width:100%;
position:fixed;
bottom:65%;
right:1%;
background:var(--bg);
box-shadow:var(--deep-shadow);
border-radius:.8rem;
margin:0 auto;
z-index:var(--notif-index);
transition:var(--cubic-transition);
opacity: 0;
visibility: hidden;
transform: scale(1.4) translateX(-10rem);
}

.notification.show{
transition:var(--cubic-transition);
opacity: 1;
visibility: visible;
transform: scale(1.0) translateX(0);
}


.notification-inner{
width:100%;
padding-left: .6rem;
padding-right: .6rem;
text-align: center;
}

.notification-inner p{
width:100% !important;
max-width:100% !important;
font-size:medium !important;
text-align:center;
margin-top: .85rem !important;
padding-bottom: .6rem !important;
}

.notification-inner a{
background:var(--off-light);

border-radius:.8rem;
padding:.5rem;
box-shadow:var(--medium-shadow);
}


#close-form-block{
display:flex;
justify-content:flex-end;
cursor:pointer;
}


#close-form-block .accesibility-icon{
box-shadow:none ;
background:none;
width:55px;
height:55px;
}


.fill-error,.fill-success,.fill-warning{
cursor:pointer !important;
}
.success,.fill-success, .fill-warning, .warning, .error, .fill-error{
transition: transform  0.4s ease-out;
}
.error{
color:var(--error) !important;

}
.fill-error{
fill:var(--error) !important;
transition: transform  0.4s ease-out;
}

/*** notification ends ***/

.close-notification{
margin-top:.4rem !important;
position: absolute !important;
right:1.5rem !important;
}

.close-notification svg{
box-shadow:none;
background:none;
width:22px;
height:22px;
}



@media(max-width:1200px){
.notification{
max-width:35% !important;
}
}


@media(max-width:950px){
.notification{
max-width:45% !important;
}
}


@media(max-width:869px){
.notification.mobile-notif{
position: fixed !important;
bottom: 1rem !important;
border-radius:.4rem;
width: 100% !important;
left:0 !important;
right:0 !important;
will-change: transformZ(0);
}
}

@media(max-width:768px){
.notification{
display: flex !important;
justify-content: center !important;
align-items: center !important;
max-width:94% !important;
left:3% !important;
}
}