/* Generated from style.css by build-scoped-css.py. Keep changes in the source stylesheet. */
:where(.myasar-internal-content){
font-feature-settings: "locl" 0;
}
:where(.myasar-internal-content) *{
font-feature-settings: "locl" 0;
}
:where(.myasar-internal-content),
:where(.myasar-internal-content) input,
:where(.myasar-internal-content) select,
:where(.myasar-internal-content) button,
:where(.myasar-internal-content) span,
:where(.myasar-internal-content) p,
:where(.myasar-internal-content) h1,
:where(.myasar-internal-content) h2,
:where(.myasar-internal-content) h3,
:where(.myasar-internal-content) h4,
:where(.myasar-internal-content) h5,
:where(.myasar-internal-content) h6{
font-variant-numeric: normal;
font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0;
}
:where(.myasar-internal-content) input[type=number],
:where(.myasar-internal-content) input[type=tel],
:where(.myasar-internal-content) .english-digits{
font-family: Arial, sans-serif !important;
direction: ltr;
}
:where(.myasar-internal-content) .navbar{
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
position: sticky;
/* top: 0; */
z-index: 1000;
}
:where(.myasar-internal-content) .navbar.scrolled{
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
}
:where(.myasar-internal-content) .tagline{
top: 50px;
margin-right: 10px;
position: absolute;
}
@media (max-width: 991.98px){:where(.myasar-internal-content) .navbar .container{
display: flex !important;
justify-content: space-between !important;
}
:where(.myasar-internal-content) .navbar .navbar-toggler{
margin-right: auto !important;
/* يدفع الزر لليسار في RTL */
margin-left: 0 !important;
order: 1 !important;
}
:where(.myasar-internal-content) .navbar .navbar-brand{
margin-left: 0 !important;
order: 0 !important;
}
:where(.myasar-internal-content) .navbar .navbar-collapse{
order: 2 !important;
width: 100%;
}}
:where(.myasar-internal-content) .navbar-brand{
font-weight: 700;
font-size: 1.5rem;
color: var(--myasar-theme-primary) !important;
transition: transform var(--transition-fast);
}
@media (max-width: 767.98px){:where(.myasar-internal-content) .navbar-brand{
white-space: normal !important;
min-width: 0 !important;
max-width: 100% !important;
line-height: 1.15 !important;
}
:where(.myasar-internal-content) .navbar-brand-text{
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-height: 1.15 !important;
}}
:where(.myasar-internal-content) .navbar-brand:hover{
transform: scale(1.05);
}
:where(.myasar-internal-content) .navbar-brand i{
color: var(--myasar-theme-secondary);
font-size: 1.8rem;
margin-left: 0.5rem;
}
:where(.myasar-internal-content) .navbar-nav,
:where(.myasar-internal-content) ul.navbar-nav,
:where(.myasar-internal-content) ul.navbar-nav.me-auto,
:where(.myasar-internal-content) ul.navbar-nav.ms-auto{
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25rem !important;
max-width: 100% !important;
overflow: visible !important;
}
:where(.myasar-internal-content) .navbar-nav .nav-link{
color: var(--text-dark) !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
margin: 0 0.25rem;
border-radius: var(--radius-sm);
transition: all var(--transition-normal);
position: relative;
white-space: nowrap;
}
:where(.myasar-internal-content) .navbar-nav .nav-link::before{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
transition: all var(--transition-normal);
transform: translateX(-50%);
}
:where(.myasar-internal-content) .navbar-nav .nav-link:hover,
:where(.myasar-internal-content) .navbar-nav .nav-link.active{
color: var(--myasar-theme-primary) !important;
background: rgba(102, 126, 234, 0.08);
}
:where(.myasar-internal-content) .navbar-nav .nav-link:hover::before,
:where(.myasar-internal-content) .navbar-nav .nav-link.active::before{
width: 80%;
}
:where(.myasar-internal-content) ul.navbar-nav.ms-auto,
:where(.myasar-internal-content) ul.navbar-nav.me-auto{
margin-right: auto;
margin-left: auto;
flex-wrap: wrap !important;
}
:where(.myasar-internal-content) .smart-block .row{
--smart-block-gutter-x: var(--bs-gutter-x, 1.5rem);
--smart-block-gutter-y: var(--bs-gutter-y, 1.5rem);
display: flex;
flex-wrap: wrap;
margin-right: calc(var(--smart-block-gutter-x) * -0.5);
margin-left: calc(var(--smart-block-gutter-x) * -0.5);
row-gap: var(--smart-block-gutter-y);
}
:where(.myasar-internal-content) .smart-block .row>[class*="col-"]{
flex: 0 0 auto;
width: 100%;
padding-right: calc(var(--smart-block-gutter-x) * 0.5);
padding-left: calc(var(--smart-block-gutter-x) * 0.5);
}
@media (min-width: 576px){:where(.myasar-internal-content) .smart-block .col-sm-6{
width: 50%;
}}
@media (min-width: 768px){:where(.myasar-internal-content) .smart-block .col-md-6{
width: 50%;
}
:where(.myasar-internal-content) .smart-block .col-md-4{
width: 33.3333%;
}}
@media (min-width: 992px){:where(.myasar-internal-content) .smart-block .col-lg-4{
width: 33.3333%;
}
:where(.myasar-internal-content) .smart-block .col-lg-3{
width: 25%;
}}
:where(.myasar-internal-content) .navbar-nav .dropdown{
position: relative;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-toggle::after{
margin-right: 0.5rem;
transition: transform var(--transition-fast);
}
:where(.myasar-internal-content) .navbar-nav .dropdown:hover>.dropdown-toggle::after{
transform: rotate(180deg);
}
:where(.myasar-internal-content) .navbar-nav .dropdown-menu{
background: var(--bg-white);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
margin-top: 0.2rem;
/* إزالة الفجوة بين الزر والقائمة لتجنب اختفاء القائمة عند الانتقال بالماوس */
top: 100%;
margin-top: -1px;
min-width: 220px;
display: none;
}
@media (min-width: 992px){:where(.myasar-internal-content) .navbar-nav .dropdown:hover>.dropdown-menu{
display: block;
}}
@media (max-width: 991.98px){:where(.myasar-internal-content) .navbar-nav .dropdown-menu.show{
display: block;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-menu.show .dropdown-item{
color: #fff !important;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-menu.show .dropdown-item:hover,
:where(.myasar-internal-content) .navbar-nav .dropdown-menu.show .dropdown-item:focus{
color: #fff !important;
background: rgba(255, 255, 255, 0.12);
}}
@media (min-width: 992px){:where(.myasar-internal-content) .navbar-nav .dropdown.show>.dropdown-menu,
:where(.myasar-internal-content) .navbar-nav .dropdown-menu.show{
display: none !important;
}}
@keyframes myasar-internal-dropdownFadeIn{
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.myasar-internal-content) .navbar-nav .dropdown-item{
border-radius: var(--radius-md);
}
:where(.myasar-internal-content) .navbar-nav .dropdown-item:hover,
:where(.myasar-internal-content) .navbar-nav .dropdown-item.active{
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: var(--myasar-theme-primary);
/* padding-right: 2rem; */
}
:where(.myasar-internal-content) .navbar-nav .dropdown-item i{
margin-left: 0.75rem;
opacity: 0.7;
}
:where(.myasar-internal-content) .main-nav .nav-link:hover,
:where(.myasar-internal-content) .main-nav .nav-link:focus,
:where(.myasar-internal-content) .main-nav .nav-link:active{
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-submenu{
position: relative;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-submenu>.dropdown-menu{
top: 0;
right: 100%;
margin-top: 0;
margin-left: -1px;
display: none;
}
@media (min-width: 992px){:where(.myasar-internal-content) .navbar-nav .dropdown-submenu:hover>.dropdown-menu{
display: block;
}}
@media (max-width: 991.98px){:where(.myasar-internal-content) .navbar-nav .dropdown-submenu .dropdown-menu.show{
display: block;
}}
@media (min-width: 992px){:where(.myasar-internal-content) .navbar-nav .dropdown-submenu.show>.dropdown-menu,
:where(.myasar-internal-content) .navbar-nav .dropdown-submenu .dropdown-menu.show{
display: none !important;
}}
:where(.myasar-internal-content) .navbar-nav .dropdown-submenu>.dropdown-item::after{
/* content: '\F284'; */
position: absolute;
left: 1rem;
opacity: 0.5;
transition: all var(--transition-fast);
}
:where(.myasar-internal-content) .navbar-nav .dropdown-submenu:hover>.dropdown-item::after{
left: 0.75rem;
opacity: 1;
}
:where(.myasar-internal-content) .navbar-nav .dropdown-menu .dropdown-toggle::after{
display: none !important;
}
:where(.myasar-internal-content) .nav-custom-btn{
display: inline-block;
padding: 0.625rem 1.5rem;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-decoration: none;
color: #fff !important;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
border: none;
border-radius: var(--radius-md);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
cursor: pointer;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .nav-custom-btn::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
border-radius: var(--radius-md);
}
:where(.myasar-internal-content) .nav-custom-btn:hover::before{
left: 100%;
}
:where(.myasar-internal-content) .nav-custom-btn:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
color: #fff !important;
}
:where(.myasar-internal-content) .nav-custom-btn:active{
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
:where(.myasar-internal-content) .nav-custom-btn i{
margin-left: 0.5rem;
}
:where(.myasar-internal-content) .nav-custom-btn.btn-success{
background: linear-gradient(135deg, var(--myasar-theme-secondary) 0%, var(--success-color) 100%);
}
:where(.myasar-internal-content) .nav-custom-btn.btn-warning{
background: linear-gradient(135deg, var(--warning-color) 0%, #fee140 100%);
}
:where(.myasar-internal-content) .nav-custom-btn.btn-danger{
background: linear-gradient(135deg, #f093fb 0%, var(--danger-color) 100%);
}
:where(.myasar-internal-content) .nav-custom-btn.btn-info{
background: linear-gradient(135deg, var(--info-color) 0%, #00f2fe 100%);
}
:where(.myasar-internal-content) .nav-custom-btn.btn-sm{
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
}
:where(.myasar-internal-content) .nav-custom-btn.btn-lg{
padding: 0.875rem 2rem;
font-size: 1.125rem;
}
:where(.myasar-internal-content) .nav-custom-btn.btn-outline{
background: transparent;
color: var(--myasar-theme-primary) !important;
border: 2px solid var(--myasar-theme-primary);
box-shadow: none;
}
:where(.myasar-internal-content) .nav-custom-btn.btn-outline:hover{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: #fff !important;
border-color: transparent;
}
:where(.myasar-internal-content) section{
padding: 60px 0;
}
:where(.myasar-internal-content) .hero-section{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
padding: 6rem 0;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .hero-section::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
:where(.myasar-internal-content) .hero-section .container{
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .hero-section h1{
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
:where(.myasar-internal-content) .hero-section p{
font-size: 1.25rem;
opacity: 0.95;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .hero-section .btn{
margin: 0.5rem;
}
:where(.myasar-internal-content) .feature-card,
:where(.myasar-internal-content) .stat-card{
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
border: 1px solid var(--border-color);
height: 100%;
}
:where(.myasar-internal-content) .feature-card:hover,
:where(.myasar-internal-content) .stat-card:hover{
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
:where(.myasar-internal-content) .feature-card .icon,
:where(.myasar-internal-content) .stat-card .icon{
width: 70px;
height: 70px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .feature-card .icon::before,
:where(.myasar-internal-content) .stat-card .icon::before{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
animation: myasar-internal-pulse 3s infinite;
}
@keyframes myasar-internal-pulse{
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 0;
}
}
:where(.myasar-internal-content) .feature-card .icon.icon-primary{
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
color: white;
}
:where(.myasar-internal-content) .feature-card .icon.icon-success{
background: linear-gradient(135deg, var(--myasar-theme-secondary), var(--success-color));
color: white;
}
:where(.myasar-internal-content) .feature-card .icon.icon-warning{
background: linear-gradient(135deg, var(--warning-color), #fee140);
color: white;
}
:where(.myasar-internal-content) .feature-card .icon.icon-info{
background: linear-gradient(135deg, var(--info-color), #00f2fe);
color: white;
}
:where(.myasar-internal-content) .feature-card h3,
:where(.myasar-internal-content) .stat-card h3{
color: var(--text-dark);
font-weight: 600;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .feature-card p,
:where(.myasar-internal-content) .stat-card p{
color: var(--text-muted);
margin-bottom: 0;
}
:where(.myasar-internal-content) .stat-card h3{
font-size: 2.5rem;
margin: 1rem 0;
}
:where(.myasar-internal-content) .cta-section{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
padding: 5rem 0;
position: relative;
overflow: hidden;
margin: 4rem 0;
border-radius: var(--radius-xl);
}
:where(.myasar-internal-content) .cta-section::before{
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
:where(.myasar-internal-content) .cta-section h2{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .cta-section p{
font-size: 1.125rem;
opacity: 0.95;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .login-container{
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
:where(.myasar-internal-content) .login-card{
background: var(--bg-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: 0.5rem;
width: 100%;
max-width: 450px;
}
:where(.myasar-internal-content) .login-card .logo{
text-align: center;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .login-card .logo i{
font-size: 4rem;
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
:where(.myasar-internal-content) .login-card h2{
color: var(--text-dark);
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
}
:where(.myasar-internal-content) .login-card .form-control{
padding: 0.875rem 1rem;
border-radius: var(--radius-md);
border: 2px solid var(--border-color);
transition: all var(--transition-fast);
}
:where(.myasar-internal-content) .login-card .form-control:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}
:where(.myasar-internal-content) .login-card .btn-login{
width: 100%;
padding: 0.875rem;
font-weight: 600;
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
border: none;
border-radius: var(--radius-md);
color: white;
transition: all var(--transition-normal);
}
:where(.myasar-internal-content) .login-card .btn-login:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
:where(.myasar-internal-content) .footer{
color: white;
padding: 50px 0 20px;
}
:where(.myasar-internal-content) .footer h5{
color: white;
font-weight: 700;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .footer a{
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
display: block;
margin-bottom: 0.75rem;
transition: all var(--transition-fast);
}
:where(.myasar-internal-content) .footer a:hover{
color: white;
padding-right: 0.5rem;
}
:where(.myasar-internal-content) .footer .social-links a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.5rem;
transition: all var(--transition-normal);
}
:where(.myasar-internal-content) .footer .social-links a:hover{
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
transform: translateY(-5px);
padding: 0;
}
:where(.myasar-internal-content) .footer .footer-bottom{
border-top: 1px solid rgba(255, 255, 255, 0.1);
/* margin-top: 2rem; */
padding-top: 1.5rem;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 991px){:where(.myasar-internal-content) .navbar-nav .dropdown-menu{
border-radius: 0;
/* box-shadow: none; */
background: rgba(102, 126, 234, 0.05);
}
:where(.myasar-internal-content) .navbar-nav{
justify-content: flex-start !important;
width: 100%;
}
:where(.myasar-internal-content) .navbar-nav .nav-item{
flex-shrink: 0;
}
:where(.myasar-internal-content) .hero-section h1{
font-size: 2.5rem;
}
:where(.myasar-internal-content) .hero-section{
padding: 4rem 0;
}
:where(.myasar-internal-content) .cta-section h2{
font-size: 2rem;
}}
@media (max-width: 767px){:where(.myasar-internal-content) .hero-section h1{
font-size: 2rem;
}
:where(.myasar-internal-content) .hero-section p{
font-size: 1rem;
}
:where(.myasar-internal-content) .login-card{
padding: 2rem;
}}
:where(.myasar-internal-content) span.position-absolute.top-50.end-0.translate-middle-y.me-3.eye-icon{
margin-top: 15px;
}
:where(.myasar-internal-content) .transition{
transition: all 0.3s ease-in-out;
}
:where(.myasar-internal-content) .hover-shadow{
transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
}
:where(.myasar-internal-content) .hover-shadow:hover{
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
transform: translateY(-3px);
}
:where(.myasar-internal-content) .card{
border-radius: 12px;
overflow: hidden;
}
:where(.myasar-internal-content) .card-header{
border-radius: 12px 12px 0 0 !important;
}
:where(.myasar-internal-content) .list-group-item-action{
transition: all 0.2s ease-in-out;
}
:where(.myasar-internal-content) .list-group-item-action:hover{
background-color: #f8f9fa;
padding-right: 1.5rem;
}
:where(.myasar-internal-content) .badge{
font-weight: 500;
letter-spacing: 0.3px;
}
:where(.myasar-internal-content) .badge.rounded-pill{
padding: 0.5em 1em;
}
:where(.myasar-internal-content) .bi{
vertical-align: middle;
}
:where(.myasar-internal-content) .btn{
border-radius: 8px;
font-weight: 500;
transition: all 0.2s ease-in-out;
}
:where(.myasar-internal-content) .btn:hover{
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .btn-primary{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
border: none;
}
:where(.myasar-internal-content) .btn-success{
background: linear-gradient(135deg, var(--accent-color, #198754) 0%, var(--success-color, #146c43) 100%);
border: none;
}
:where(.myasar-internal-content) .btn-warning{
background: linear-gradient(135deg, var(--warning-color, #ffc107) 0%, #ffb000 100%);
border: none;
}
:where(.myasar-internal-content) .display-5,
:where(.myasar-internal-content) .display-6{
font-weight: 700;
color: #212529;
}
:where(.myasar-internal-content) .lead{
font-size: 1.15rem;
line-height: 1.7;
}
:where(.myasar-internal-content) .text-center .bi-inbox{
opacity: 0.3;
font-size: 4rem !important;
}
:where(.myasar-internal-content) .bi-file-earmark-pdf{
color: #dc3545 !important;
}
:where(.myasar-internal-content) .bi-file-earmark-word{
color: #0d6efd !important;
}
:where(.myasar-internal-content) .bi-file-earmark-excel{
color: #198754 !important;
}
:where(.myasar-internal-content) .bi-file-earmark-image{
color: #0dcaf0 !important;
}
:where(.myasar-internal-content) .list-group-item{
border-color: #e9ecef;
}
:where(.myasar-internal-content) .list-group-flush .list-group-item:hover{
background-color: #f8f9fa;
}
:where(.myasar-internal-content) .text-muted{
color: #6c757d !important;
}
:where(.myasar-internal-content) .fw-bold{
font-weight: 700 !important;
}
:where(.myasar-internal-content) a{
text-decoration: none;
transition: color 0.2s ease-in-out;
}
:where(.myasar-internal-content) a:hover{
color: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .card-header{
background-color: #fff;
border-bottom: 2px solid #e9ecef;
}
@media (max-width: 768px){:where(.myasar-internal-content) .display-5{
font-size: 2rem;
}
:where(.myasar-internal-content) .display-6{
font-size: 1.75rem;
}
:where(.myasar-internal-content) .lead{
font-size: 1rem;
}
:where(.myasar-internal-content) .btn{
width: 100%;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .hover-shadow:hover{
transform: none;
}}
:where(.myasar-internal-content) .form-control,
:where(.myasar-internal-content) .form-select{
border-radius: 8px;
border: 1px solid #ced4da;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}
:where(.myasar-internal-content) .form-label{
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .alert{
border-radius: 8px;
border: none;
font-weight: 500;
}
:where(.myasar-internal-content) .alert-success{
background-color: #d1e7dd;
color: #0f5132;
}
:where(.myasar-internal-content) .alert-info{
background-color: #cfe2ff;
color: #084298;
}
:where(.myasar-internal-content) .alert-warning{
background-color: #fff3cd;
color: #664d03;
}
:where(.myasar-internal-content) .alert-danger{
background-color: #f8d7da;
color: #842029;
}
:where(.myasar-internal-content) .bg-light{
background-color: #f8f9fa !important;
}
:where(.myasar-internal-content) ::-webkit-scrollbar{
width: 8px;
height: 8px;
}
:where(.myasar-internal-content) ::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 10px;
}
:where(.myasar-internal-content) ::-webkit-scrollbar-thumb{
background: #888;
border-radius: 10px;
}
:where(.myasar-internal-content) ::-webkit-scrollbar-thumb:hover{
background: #555;
}
:where(.myasar-internal-content) .p-4{
padding: 1.5rem !important;
}
:where(.myasar-internal-content) .py-5{
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
:where(.myasar-internal-content) .mb-5{
margin-bottom: 3rem !important;
}
:where(.myasar-internal-content) .row.g-3 .card{
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .row.g-3 .card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .breadcrumb{
background-color: transparent;
padding: 0;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .breadcrumb-item a{
color: #ffffff;
text-decoration: none;
opacity: 0.8;
}
:where(.myasar-internal-content) .breadcrumb-item a:hover{
color: #ffffff;
opacity: 1;
text-decoration: underline;
}
:where(.myasar-internal-content) .breadcrumb-item.active{
color: #ffffff;
font-weight: 600;
}
:where(.myasar-internal-content) .breadcrumb-item+.breadcrumb-item::before{
content: "‹";
font-size: 1.2em;
color: #ffffff;
opacity: 0.6;
}
:where(.myasar-internal-content) .alert i.bi{
font-size: 1.5rem;
}
:where(.myasar-internal-content) input[readonly].form-control{
background-color: #f8f9fa;
cursor: pointer;
}
:where(.myasar-internal-content) input[readonly].form-control:focus{
background-color: #e9ecef;
}
:where(.myasar-internal-content) .card-body .border.rounded{
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
:where(.myasar-internal-content) .bg-primary.rounded-circle{
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}
:where(.myasar-internal-content) .bi.fs-2{
transition: transform 0.2s ease;
}
:where(.myasar-internal-content) .list-group-item:hover .bi.fs-2{
transform: scale(1.1);
}
:where(.myasar-internal-content) .btn-primary,
:where(.myasar-internal-content) .btn-success{
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content){
line-height: 1.8;
color: var(--text-dark);
background: var(--bg-light);
overflow-x: hidden;
}
:where(.myasar-internal-content) .text-center .opacity-50{
opacity: 0.25 !important;
}
:where(.myasar-internal-content) .status-dot{
font-size: 0.6em;
}
:where(.myasar-internal-content) .ticket-link-input{
font-size: 0.75rem;
width: 100%;
max-width: 300px;
}
:where(.myasar-internal-content) .ticket-chat-box{
max-height: 450px;
overflow-y: auto;
background-color: #f8f9fa;
}
:where(.myasar-internal-content) .version-icon-circle{
width: 50px;
height: 50px;
}
:where(.myasar-internal-content) .donor-dashboard-page{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
min-height: 100vh;
}
:where(.myasar-internal-content) .dashboard-wrapper{
background: rgba(255, 255, 255, 0.95);
min-height: 100vh;
padding-bottom: 40px;
}
:where(.myasar-internal-content) .welcome-banner{
background: var(--primary-gradient);
border-radius: 20px;
padding: 2rem;
color: white;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .welcome-banner::before{
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: myasar-internal-pulse 4s ease-in-out infinite;
}
:where(.myasar-internal-content) .stat-card{
border: none;
border-radius: 20px;
padding: 1.8rem;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
height: 100%;
}
:where(.myasar-internal-content) .stat-card::before{
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
:where(.myasar-internal-content) .stat-card:hover::before{
opacity: 1;
}
:where(.myasar-internal-content) .stat-card:hover{
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
:where(.myasar-internal-content) .stat-card.primary{
background: var(--primary-gradient);
}
:where(.myasar-internal-content) .stat-card.success{
background: var(--success-gradient);
}
:where(.myasar-internal-content) .stat-card.warning{
background: var(--warning-gradient);
}
:where(.myasar-internal-content) .stat-card.info{
background: var(--info-gradient);
}
:where(.myasar-internal-content) .stat-card.secondary{
background: var(--secondary-gradient);
}
@keyframes myasar-internal-bounce{
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
:where(.myasar-internal-content) .stat-value{
font-size: 2.5rem;
font-weight: 700;
margin: 0.5rem 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
:where(.myasar-internal-content) .stat-label{
font-size: 1rem;
opacity: 0.9;
font-weight: 500;
}
:where(.myasar-internal-content) .content-card{
border: none;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
background: white;
overflow: hidden;
}
:where(.myasar-internal-content) .content-card:hover{
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
transform: translateY(-5px);
}
:where(.myasar-internal-content) .content-card .card-header{
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: none;
padding: 1.5rem;
font-weight: 700;
font-size: 1.25rem;
color: #495057;
}
:where(.myasar-internal-content) .content-card .card-body{
padding: 1.5rem;
}
:where(.myasar-internal-content) .chart-container{
position: relative;
height: 300px;
margin-top: 1rem;
}
:where(.myasar-internal-content) .modern-table{
border-radius: 12px;
overflow: hidden;
}
:where(.myasar-internal-content) .modern-table thead{
background: var(--primary-gradient);
color: white;
}
:where(.myasar-internal-content) .modern-table thead th{
border: none;
padding: 1rem;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
:where(.myasar-internal-content) .modern-table tbody tr{
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .modern-table tbody tr:hover{
background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
transform: scale(1.01);
}
:where(.myasar-internal-content) .modern-table tbody td{
padding: 1rem;
border-bottom: 1px solid #e9ecef;
vertical-align: middle;
}
:where(.myasar-internal-content) .status-badge{
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
:where(.myasar-internal-content) .status-badge.active{
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
:where(.myasar-internal-content) .status-badge.completed{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .status-badge.pending{
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
:where(.myasar-internal-content) .empty-state{
text-align: center;
padding: 3rem 1rem;
}
:where(.myasar-internal-content) .empty-state-icon{
font-size: 4rem;
color: #cbd5e0;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .empty-state h4{
color: #718096;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .empty-state p{
color: #a0aec0;
}
:where(.myasar-internal-content) button{
white-space: nowrap;
}
:where(.myasar-internal-content) .btn-gradient{
background: var(--primary-gradient);
border: none;
color: white;
padding: 0.6rem 1.5rem;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
:where(.myasar-internal-content) .btn-gradient:hover{
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
color: white;
}
:where(.myasar-internal-content) .sponsorship-item{
border: 2px solid #e9ecef;
border-radius: 15px;
padding: 1.5rem;
transition: all 0.3s ease;
background: white;
}
:where(.myasar-internal-content) .sponsorship-item:hover{
border-color: #667eea;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
transform: translateY(-3px);
}
:where(.myasar-internal-content) .gift-item{
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .gift-item:hover{
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(252, 182, 159, 0.4);
}
@media (max-width: 768px){:where(.myasar-internal-content) .welcome-banner h2{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .stat-value{
font-size: 2rem;
}
:where(.myasar-internal-content) .chart-container{
height: 250px;
}}
:where(.myasar-internal-content) .donor-navbar{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
position: sticky;
top: 0;
z-index: 1000;
padding: 0;
overflow: visible;
}
:where(.myasar-internal-content) .dashboard-wrapper{
overflow-x: hidden;
}
:where(.myasar-internal-content) .donor-navbar-content{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
gap: 2rem;
min-width: 0;
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-link{
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: white;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-icon{
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-link:hover .brand-icon{
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05) rotate(5deg);
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-text{
font-weight: 700;
font-size: 1.1rem;
white-space: nowrap;
}
:where(.myasar-internal-content) .donor-navbar-menu{
flex: 1 1 auto;
min-width: 0;
display: flex;
justify-content: center;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
:where(.myasar-internal-content) .donor-navbar-menu::-webkit-scrollbar{
display: none;
}
:where(.myasar-internal-content) .donor-navbar-nav{
display: flex;
gap: 0.5rem;
width: max-content;
min-width: 100%;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item{
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
border-radius: 12px;
font-weight: 500;
transition: all 0.3s ease;
white-space: nowrap;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item i{
font-size: 1.1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item:hover{
background: rgba(255, 255, 255, 0.15);
color: white;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item:hover i{
transform: scale(1.15);
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item.active{
background: rgba(255, 255, 255, 0.25);
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item .nav-indicator{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 70%;
height: 3px;
background: white;
border-radius: 3px 3px 0 0;
transition: transform 0.3s ease;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item.active .nav-indicator{
transform: translateX(-50%) scaleX(1);
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item-user{
display: none;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item .badge-count{
position: absolute;
top: 8px;
right: 8px;
background: #ff4757;
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.4rem;
border-radius: 10px;
min-width: 18px;
text-align: center;
box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
animation: myasar-internal-pulse 2s infinite;
}
:where(.myasar-internal-content) .donor-navbar-actions{
display: flex;
align-items: center;
gap: 0.75rem;
flex: 0 0 auto;
}
:where(.myasar-internal-content) .donor-navbar-brand{
flex: 0 0 auto;
}
:where(.myasar-internal-content) .action-item .action-btn{
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(255, 255, 255, 0.15);
border: none;
border-radius: 10px;
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .action-item .action-btn:hover{
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
:where(.myasar-internal-content) .action-item .action-btn i{
font-size: 1.2rem;
}
:where(.myasar-internal-content) .action-item .badge-count{
position: absolute;
top: -4px;
right: -4px;
background: #ff4757;
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.4rem;
border-radius: 10px;
min-width: 18px;
text-align: center;
box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}
:where(.myasar-internal-content) .user-btn{
padding: 0.5rem 1rem 0.5rem 0.5rem !important;
}
:where(.myasar-internal-content) .user-avatar,
:where(.myasar-internal-content) .user-avatar-placeholder{
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.3);
}
:where(.myasar-internal-content) .user-avatar-placeholder{
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.3);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
}
:where(.myasar-internal-content) .user-name{
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:where(.myasar-internal-content) .dropdown-menu{
border: none;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: 0;
margin-top: 0.5rem;
min-width: 280px;
opacity: 1;
transform: none;
}
:where(.myasar-internal-content) .dropdown-menu.show{
opacity: 1;
transform: none;
}
:where(.myasar-internal-content) .dropdown-header{
padding: 1rem 1.25rem;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 16px 16px 0 0;
}
:where(.myasar-internal-content) .dropdown-header h6{
margin: 0;
font-weight: 700;
color: #2d3748;
font-size: 1rem;
}
:where(.myasar-internal-content) .dropdown-header .mark-all-read{
font-size: 0.8rem;
color: #667eea;
text-decoration: none;
font-weight: 500;
}
:where(.myasar-internal-content) .dropdown-header .mark-all-read:hover{
text-decoration: underline;
}
:where(.myasar-internal-content) .dropdown-item{
padding: 0.55rem 1.0rem;
display: flex;
align-items: center;
color: #2d3748;
transition: all 0.2s ease;
}
:where(.myasar-internal-content) .dropdown-item i{
font-size: 1.1rem;
width: 20px;
}
:where(.myasar-internal-content) .dropdown-item:hover{
background: #f7fafc;
color: #667eea;
/* border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px; */
}
:where(.myasar-internal-content) .dropdown-footer{
padding: 0.55rem 1.0rem;
background: #f7fafc;
border-radius: 0 0 16px 16px;
text-align: center;
}
:where(.myasar-internal-content) .dropdown-footer a{
color: #667eea;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .dropdown-footer a:hover{
text-decoration: underline;
}
:where(.myasar-internal-content) .notifications-menu{
max-width: 380px;
}
:where(.myasar-internal-content) .notifications-list{
max-height: 400px;
overflow-y: auto;
padding: 5px;
text-align: right;
}
:where(.myasar-internal-content) .notification-item{
display: flex;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
text-decoration: none;
color: inherit;
transition: background 0.2s ease;
}
:where(.myasar-internal-content) .notification-item:hover{
background: #f7fafc;
}
:where(.myasar-internal-content) .notification-item.unread{
background: #edf2f7;
}
:where(.myasar-internal-content) .notification-icon{
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
flex-shrink: 0;
}
:where(.myasar-internal-content) .notification-icon.primary{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
:where(.myasar-internal-content) .notification-icon.info{
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}
:where(.myasar-internal-content) .notification-icon.success{
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
:where(.myasar-internal-content) .notification-icon.warning{
background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
}
:where(.myasar-internal-content) .notification-icon.danger{
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}
:where(.myasar-internal-content) .notification-icon.secondary{
background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}
:where(.myasar-internal-content) .notification-content{
flex: 1;
}
:where(.myasar-internal-content) .notification-text{
margin: 0 0 0.25rem 0;
font-size: 0.9rem;
color: #2d3748;
font-weight: 500;
}
:where(.myasar-internal-content) .notification-time{
font-size: 0.75rem;
color: #718096;
}
:where(.myasar-internal-content) .no-notifications{
text-align: center;
padding: 3rem 2rem;
color: #a0aec0;
}
:where(.myasar-internal-content) .no-notifications i{
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
:where(.myasar-internal-content) .no-notifications p{
margin: 0;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .user-menu{
min-width: 260px;
}
:where(.myasar-internal-content) .user-menu .user-info{
display: flex;
align-items: center;
gap: 0.75rem;
}
:where(.myasar-internal-content) .user-menu .user-info img,
:where(.myasar-internal-content) .user-menu .user-info .user-avatar-placeholder{
width: 48px;
height: 48px;
}
:where(.myasar-internal-content) .user-menu .user-info h6{
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #2d3748;
}
:where(.myasar-internal-content) .user-menu .user-info p{
margin: 0;
font-size: 0.8rem;
color: #718096;
}
:where(.myasar-internal-content) .mobile-menu-toggle{
display: none;
flex-direction: column;
gap: 4px;
background: rgba(255, 255, 255, 0.15);
border: none;
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
}
:where(.myasar-internal-content) .mobile-menu-toggle span{
width: 24px;
height: 3px;
background: white;
border-radius: 2px;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .mobile-menu-toggle.active span:nth-child(1){
transform: rotate(45deg) translate(6px, 6px);
}
:where(.myasar-internal-content) .mobile-menu-toggle.active span:nth-child(2){
opacity: 0;
}
:where(.myasar-internal-content) .mobile-menu-toggle.active span:nth-child(3){
transform: rotate(-45deg) translate(6px, -6px);
}
:where(.myasar-internal-content) .mobile-overlay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
@media (max-width: 992px){:where(.myasar-internal-content) .donor-navbar-content{
gap: 1rem;
}
:where(.myasar-internal-content) .donor-navbar-menu{
position: fixed;
top: 0;
right: 0;
width: min(280px, 85vw);
max-width: 85vw;
height: 100vh;
background: white;
z-index: 1001;
transition: transform 0.3s ease;
transform: translateX(110%);
padding: 2rem 0;
overflow-y: auto;
overflow-x: hidden;
}
:where(.myasar-internal-content) .donor-navbar-menu.active{
transform: translateX(0);
}
:where(.myasar-internal-content) .donor-navbar-nav{
flex-direction: column;
gap: 0.25rem;
width: 100%;
min-width: 0;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item{
color: #2d3748;
justify-content: flex-start;
padding: 1rem 1.5rem;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item:hover,
:where(.myasar-internal-content) .donor-navbar-nav .nav-item.active{
background: #f7fafc;
color: #667eea;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item .nav-indicator{
display: none;
}
:where(.myasar-internal-content) .donor-navbar-nav .nav-item-user{
display: flex !important;
}
:where(.myasar-internal-content) .mobile-menu-toggle{
display: flex;
}
:where(.myasar-internal-content) .mobile-overlay.active{
display: block;
}
:where(.myasar-internal-content) .user-name{
display: none;
}
:where(.myasar-internal-content) .user-dropdown .dropdown-menu{
display: none !important;
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-text{
font-size: 1rem;
}}
@media (max-width: 576px){:where(.myasar-internal-content) .donor-navbar-content{
padding: 0.75rem 1rem;
}
:where(.myasar-internal-content) .donor-navbar-brand .brand-text{
display: none;
}
:where(.myasar-internal-content) .dropdown-menu{
min-width: 260px;
}}
:where(.myasar-internal-content) .donor-donations-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-donations-container{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-page-header{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donor-donations-donor-donations-page-header h1{
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-page-header p{
margin: 0.5rem 0 0 0;
color: #718096;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card .icon{
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card h3{
font-size: 2rem;
font-weight: 700;
margin: 0;
color: #2d3748;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card p{
color: #718096;
margin: 0.5rem 0 0 0;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card.purple .icon{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card.blue .icon{
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card.green .icon{
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
color: white;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-stats-card.orange .icon{
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
}
:where(.myasar-internal-content) .filters-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .filters-card .filter-group{
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
:where(.myasar-internal-content) .filter-btn{
padding: 0.5rem 1.25rem;
border-radius: 10px;
border: 2px solid #e2e8f0;
background: white;
color: #4a5568;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .filter-btn:hover{
border-color: #667eea;
color: #667eea;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .filter-btn.active{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: white;
}
:where(.myasar-internal-content) .export-btn{
padding: 0.75rem 1.5rem;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .export-btn:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .donor-donations-donor-donations-donation-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-donation-card:hover{
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .donation-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f7fafc;
}
:where(.myasar-internal-content) .order-info h4{
margin: 0 0 0.5rem 0;
color: #2d3748;
font-weight: 600;
}
:where(.myasar-internal-content) .order-meta{
display: flex;
gap: 1rem;
color: #718096;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .order-meta span{
display: flex;
align-items: center;
gap: 0.25rem;
}
:where(.myasar-internal-content) .status-badge{
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .status-badge.completed{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .status-badge.pending{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .status-badge.processing{
background: #fef3c7;
color: #92400e;
}
:where(.myasar-internal-content) .items-list{
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .item-row{
display: flex;
gap: 1rem;
padding: 1rem;
background: #f7fafc;
border-radius: 12px;
margin-bottom: 0.75rem;
align-items: center;
}
:where(.myasar-internal-content) .item-image{
width: 80px;
height: 80px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
:where(.myasar-internal-content) .item-image-placeholder{
width: 80px;
height: 80px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .item-details{
flex: 1;
}
:where(.myasar-internal-content) .item-title{
font-weight: 600;
color: #2d3748;
margin: 0 0 0.5rem 0;
}
:where(.myasar-internal-content) .item-type{
display: inline-flex;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
}
:where(.myasar-internal-content) .item-type.sponsorship{
background: #e0e7ff;
color: #4338ca;
}
:where(.myasar-internal-content) .item-type.donation{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .item-amount{
text-align: left;
font-weight: 700;
color: #667eea;
font-size: 1.25rem;
}
:where(.myasar-internal-content) .donation-footer{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 2px solid #f7fafc;
}
:where(.myasar-internal-content) .total-amount{
font-size: 1.5rem;
font-weight: 700;
color: #2d3748;
}
:where(.myasar-internal-content) .action-buttons{
display: flex;
gap: 0.75rem;
}
:where(.myasar-internal-content) .btn-action{
padding: 0.5rem 1rem;
border-radius: 10px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .btn-primary{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .btn-secondary{
background: #f7fafc;
color: #4a5568;
}
:where(.myasar-internal-content) .btn-secondary:hover{
background: #e2e8f0;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .no-donations{
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .no-donations i{
font-size: 5rem;
color: #cbd5e0;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .no-donations h3{
color: #2d3748;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .no-donations p{
color: #718096;
margin-bottom: 2rem;
}
@media print{:where(.myasar-internal-content) .donor-donations-page{
background: white !important;
}
:where(.myasar-internal-content) *{
visibility: hidden;
}
:where(.myasar-internal-content) .print-area,
:where(.myasar-internal-content) .print-area *{
visibility: visible;
}
:where(.myasar-internal-content) .print-area{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
:where(.myasar-internal-content) .no-print,
:where(.myasar-internal-content) .donor-navbar,
:where(.myasar-internal-content) .filters-card,
:where(.myasar-internal-content) nav,
:where(.myasar-internal-content) .donor-donations-donor-donations-page-header{
display: none !important;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-donation-card{
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
background: white !important;
}
:where(.myasar-internal-content) .item-row{
background: white !important;
}
:where(.myasar-internal-content) .donor-donations-donor-donations-donations-container{
background: white !important;
}}
@media (max-width: 768px){:where(.myasar-internal-content) .donor-donations-donor-donations-page-header h1{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .item-row{
flex-direction: column;
text-align: center;
}
:where(.myasar-internal-content) .item-amount{
text-align: center;
}
:where(.myasar-internal-content) .donation-footer{
flex-direction: column;
gap: 1rem;
}}
:where(.myasar-internal-content) *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where(.myasar-internal-content) .donor-sponsorships-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-main-content{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-page-header{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-page-header h1{
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-page-header p{
color: #6c757d;
font-size: 1.1rem;
margin: 0;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stats-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--card-color, #667eea) 0%, transparent 100%);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card:hover{
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card .stat-icon{
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--card-color, #667eea) 0%, var(--card-color-dark, #764ba2) 100%);
color: white;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card .stat-label{
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stat-card .stat-value{
font-size: 2rem;
font-weight: 700;
color: #2d3436;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-filter-bar{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-filter-bar .btn-group{
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
:where(.myasar-internal-content) .filter-btn{
padding: 0.6rem 1.5rem;
border: 2px solid #e9ecef;
border-radius: 12px;
background: white;
color: #6c757d;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
}
:where(.myasar-internal-content) .filter-btn:hover{
border-color: #667eea;
color: #667eea;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .filter-btn.active{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: white;
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorships-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card:hover{
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-image{
width: 100%;
height: 200px;
object-fit: cover;
position: relative;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-image .status-badge{
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
color: var(--status-color, #667eea);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-.donor-sponsorships-page{
padding: 1.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-title{
font-size: 1.3rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-title i{
color: #667eea;
font-size: 1.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-description{
color: #6c757d;
font-size: 0.95rem;
margin-bottom: 1rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .card-meta{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .meta-item{
display: flex;
flex-direction: column;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .meta-label{
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .meta-value{
font-size: 1rem;
font-weight: 600;
color: #2d3436;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorship-card .meta-value.amount{
color: #26de81;
font-size: 1.2rem;
}
:where(.myasar-internal-content) .progress-section{
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .progress-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .progress-label{
font-size: 0.9rem;
color: #6c757d;
font-weight: 600;
}
:where(.myasar-internal-content) .progress-percentage{
font-size: 1rem;
font-weight: 700;
color: var(--progress-color, #667eea);
}
:where(.myasar-internal-content) .progress-bar-custom{
height: 8px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
position: relative;
}
:where(.myasar-internal-content) .progress-bar-fill{
height: 100%;
background: linear-gradient(90deg, var(--progress-color, #667eea) 0%, var(--progress-color-dark, #764ba2) 100%);
border-radius: 10px;
transition: width 0.6s ease;
position: relative;
}
:where(.myasar-internal-content) .progress-bar-fill::after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
animation: myasar-internal-shimmer 2s infinite;
}
@keyframes myasar-internal-shimmer{
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
:where(.myasar-internal-content) .card-actions{
display: flex;
gap: 0.5rem;
}
:where(.myasar-internal-content) .action-btn{
flex: 1;
padding: 0.8rem;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .action-btn.primary{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .action-btn.primary:hover{
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
:where(.myasar-internal-content) .action-btn.secondary{
background: white;
color: #667eea;
border: 2px solid #667eea;
}
:where(.myasar-internal-content) .action-btn.secondary:hover{
background: #667eea;
color: white;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 4rem 2rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state i{
font-size: 5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state h3{
font-size: 1.8rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state p{
color: #6c757d;
font-size: 1.1rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state .btn-explore{
padding: 1rem 2.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 15px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-empty-state .btn-explore:hover{
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
}
@media (max-width: 768px){:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-main-content{
margin-top: 70px;
padding: 1rem 0;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-stats-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-sponsorships-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-page-header h1{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-filter-bar .btn-group{
flex-direction: column;
}
:where(.myasar-internal-content) .filter-btn{
width: 100%;
}}
:where(.myasar-internal-content) .donor-sponsorships-donor-sponsorships-donations-container{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-gifts-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .gifts-container{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-page-header{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-page-header h1{
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card .icon{
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card h3{
font-size: 2rem;
font-weight: 700;
margin: 0;
color: #2d3748;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card p{
color: #718096;
margin: 0.5rem 0 0 0;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card.pink .icon{
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card.purple .icon{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card.green .icon{
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
color: white;
}
:where(.myasar-internal-content) .donor-gifts-donor-gifts-stats-card.orange .icon{
background: linear-gradient(135deg, #f83600 0%, #fe8c00 100%);
color: white;
}
:where(.myasar-internal-content) .gift-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .gift-card:hover{
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .gift-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f7fafc;
}
:where(.myasar-internal-content) .recipient-info h5{
margin: 0 0 0.5rem 0;
color: #2d3748;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .recipient-info small{
color: #718096;
}
:where(.myasar-internal-content) .gift-amount{
font-size: 1.5rem;
font-weight: 700;
color: #e65100;
}
:where(.myasar-internal-content) .gift-message{
background: #fff3e0;
border-left: 4px solid #f57c00;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .gift-message p{
margin: 0;
color: #5d4037;
font-style: italic;
}
:where(.myasar-internal-content) .gift-campaign{
display: flex;
gap: 1rem;
background: #f7fafc;
padding: 1rem;
border-radius: 12px;
margin-bottom: 1rem;
align-items: center;
}
:where(.myasar-internal-content) .campaign-image{
width: 80px;
height: 80px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
:where(.myasar-internal-content) .campaign-placeholder{
width: 80px;
height: 80px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .campaign-title{
font-weight: 600;
color: #2d3748;
margin: 0;
}
:where(.myasar-internal-content) .gift-footer{
display: flex;
justify-content: space-between;
align-items: center;
}
:where(.myasar-internal-content) .gift-date{
color: #718096;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .gift-status{
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .gift-status.sent{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .gift-status.pending{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .no-gifts{
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .no-gifts i{
font-size: 5rem;
color: #cbd5e0;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .no-gifts h3{
color: #2d3748;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .no-gifts p{
color: #718096;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .btn-gradient{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
:where(.myasar-internal-content) .btn-gradient:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
color: white;
}
@media (max-width: 768px){:where(.myasar-internal-content) .donor-gifts-donor-gifts-page-header h1{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .gift-header{
flex-direction: column;
gap: 1rem;
}
:where(.myasar-internal-content) .gift-amount{
align-self: flex-start;
}}
:where(.myasar-internal-content) .donor-reports-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .reports-container{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-page-header{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donor-reports-donor-reports-page-header h1{
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-page-header p{
margin: 0.5rem 0 0 0;
color: #718096;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: none;
height: 100%;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card .icon{
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card h3{
font-size: 2rem;
font-weight: 700;
margin: 0;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card p{
color: #718096;
margin: 0.5rem 0 0 0;
font-size: 0.95rem;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card.purple .icon{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card.blue .icon{
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card.green .icon{
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
color: white;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-stats-card.orange .icon{
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
}
:where(.myasar-internal-content) .reports-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
:where(.myasar-internal-content) .report-card{
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
:where(.myasar-internal-content) .report-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .report-card-header{
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
}
:where(.myasar-internal-content) .report-month{
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
:where(.myasar-internal-content) .report-date{
font-size: 0.9rem;
opacity: 0.9;
margin-top: 0.25rem;
}
:where(.myasar-internal-content) .report-card-.donor-reports-page{
padding: 1.5rem;
}
:where(.myasar-internal-content) .campaign-info{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .campaign-image{
width: 60px;
height: 60px;
border-radius: 12px;
object-fit: cover;
}
:where(.myasar-internal-content) .campaign-title{
font-weight: 600;
color: #2d3748;
font-size: 1rem;
margin: 0;
}
:where(.myasar-internal-content) .report-stats{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
:where(.myasar-internal-content) .stat-item{
text-align: center;
padding: 0.75rem;
background: #f7fafc;
border-radius: 10px;
}
:where(.myasar-internal-content) .stat-value{
font-size: 1.5rem;
font-weight: 700;
color: #2d3748;
display: block;
}
:where(.myasar-internal-content) .stat-label{
font-size: 0.85rem;
color: #718096;
margin-top: 0.25rem;
}
:where(.myasar-internal-content) .rating-stars{
color: #fbbf24;
}
:where(.myasar-internal-content) .no-reports{
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .no-reports i{
font-size: 5rem;
color: #cbd5e0;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .no-reports h3{
color: #2d3748;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .no-reports p{
color: #718096;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .btn-view-report{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-view-report:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
color: white;
}
@media (max-width: 768px){:where(.myasar-internal-content) .reports-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .donor-reports-donor-reports-page-header h1{
font-size: 1.5rem;
}}
:where(.myasar-internal-content) .donor-notifications-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .notifications-container{
padding: 2rem 0;
}
:where(.myasar-internal-content) .donor-notifications-donor-notifications-page-header{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donor-notifications-donor-notifications-page-header h1{
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .tabs-container{
background: white;
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .nav-tabs{
border: none;
gap: 0.5rem;
}
:where(.myasar-internal-content) .nav-tabs .nav-link{
border: none;
background: #f7fafc;
color: #4a5568;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
}
:where(.myasar-internal-content) .nav-tabs .nav-link:hover{
background: #edf2f7;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .nav-tabs .nav-link.active{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .nav-link .badge{
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 20px;
border-radius: 10px;
font-size: 0.7rem;
}
:where(.myasar-internal-content) .tab-content{
padding: 2rem 0;
}
:where(.myasar-internal-content) .notification-item{
background: white;
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-right: 4px solid #667eea;
transition: all 0.3s ease;
display: flex;
gap: 1rem;
}
:where(.myasar-internal-content) .notification-item:hover{
transform: translateX(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .notification-item.unread{
background: #f7faff;
border-right-color: #ff6b6b;
}
:where(.myasar-internal-content) .notification-icon{
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .notification-icon.primary{
background: #e0e7ff;
color: #4338ca;
}
:where(.myasar-internal-content) .notification-icon.success{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .notification-icon.warning{
background: #fed7aa;
color: #92400e;
}
:where(.myasar-internal-content) .notification-icon.info{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .notification-icon.danger{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .notification-icon.secondary{
background: #e2e8f0;
color: #4a5568;
}
:where(.myasar-internal-content) .notification-content{
flex: 1;
}
:where(.myasar-internal-content) .notification-title{
font-weight: 600;
color: #2d3748;
margin: 0 0 0.5rem 0;
}
:where(.myasar-internal-content) .notification-message{
color: #718096;
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .notification-time{
color: #a0aec0;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
:where(.myasar-internal-content) .message-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
}
:where(.myasar-internal-content) .message-card:hover{
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .message-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .message-title{
font-weight: 600;
color: #2d3748;
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
}
:where(.myasar-internal-content) .message-meta{
display: flex;
gap: 1rem;
color: #718096;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .priority-badge{
padding: 0.35rem 0.75rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
}
:where(.myasar-internal-content) .priority-badge.low{
background: #e0e7ff;
color: #4338ca;
}
:where(.myasar-internal-content) .priority-badge.normal{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .priority-badge.high{
background: #fed7aa;
color: #92400e;
}
:where(.myasar-internal-content) .priority-badge.urgent{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .status-badge{
padding: 0.35rem 0.75rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
}
:where(.myasar-internal-content) .status-badge.open{
background: #fed7aa;
color: #92400e;
}
:where(.myasar-internal-content) .status-badge.in_progress{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .status-badge.resolved{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .status-badge.closed{
background: #e2e8f0;
color: #4a5568;
}
:where(.myasar-internal-content) .message-preview{
color: #718096;
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
}
:where(.myasar-internal-content) .message-footer{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
:where(.myasar-internal-content) .replies-count{
color: #667eea;
font-weight: 600;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .btn-new-message{
position: fixed;
bottom: 2rem;
left: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
}
:where(.myasar-internal-content) .btn-new-message:hover{
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}
:where(.myasar-internal-content) .modal-content{
border: none;
border-radius: 20px;
}
:where(.myasar-internal-content) .modal-header{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px 20px 0 0;
border: none;
}
:where(.myasar-internal-content) .btn-close{
filter: brightness(0) invert(1);
}
:where(.myasar-internal-content) .form-label{
font-weight: 600;
color: #2d3748;
}
:where(.myasar-internal-content) .form-control,
:where(.myasar-internal-content) .form-select{
border-radius: 10px;
border: 2px solid #e2e8f0;
padding: 0.75rem;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .btn-send{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-send:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
@media (max-width: 768px){:where(.myasar-internal-content) .donor-notifications-donor-notifications-page-header h1{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .message-header{
flex-direction: column;
gap: 0.75rem;
}
:where(.myasar-internal-content) .btn-new-message{
width: 50px;
height: 50px;
font-size: 1.2rem;
}}
:where(.myasar-internal-content) .donor-profile-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .profile-container{
max-width: 1400px;
margin: 2rem auto;
padding: 0 1rem;
}
:where(.myasar-internal-content) .profile-header-card{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 2rem;
color: white;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .profile-header-card::before{
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: myasar-internal-pulse 15s ease-in-out infinite;
}
@keyframes myasar-internal-pulse{
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
:where(.myasar-internal-content) .profile-avatar-container{
position: relative;
width: 150px;
height: 150px;
margin: 0 auto 1.5rem;
}
:where(.myasar-internal-content) .profile-avatar{
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
object-fit: cover;
background: white;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #667eea;
}
:where(.myasar-internal-content) .avatar-upload-btn{
position: absolute;
bottom: 5px;
right: 5px;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: #667eea;
}
:where(.myasar-internal-content) .avatar-upload-btn:hover{
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
:where(.myasar-internal-content) .donor-profile-donor-profile-stats-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .donor-profile-donor-profile-stat-card{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .donor-profile-donor-profile-stat-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--stat-color, #667eea);
}
:where(.myasar-internal-content) .donor-profile-donor-profile-stat-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .stat-value{
font-size: 2rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .stat-label{
font-size: 0.9rem;
color: #718096;
font-weight: 500;
}
:where(.myasar-internal-content) .magic-card{
background: white;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .magic-card:hover{
transform: translateY(-4px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .magic-card-header{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1.5rem;
color: white;
}
:where(.myasar-internal-content) .magic-card-header h5{
margin: 0;
font-weight: 700;
}
:where(.myasar-internal-content) .magic-card-.donor-profile-page{
padding: 2rem;
}
:where(.myasar-internal-content) .badges-container{
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}
:where(.myasar-internal-content) .badge-item{
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 0.75rem 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .badge-item:hover{
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
:where(.myasar-internal-content) .badge-item i{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .timeline{
position: relative;
padding: 1rem 0;
}
:where(.myasar-internal-content) .timeline::before{
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
:where(.myasar-internal-content) .timeline-item{
position: relative;
padding-left: 70px;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .timeline-icon{
position: absolute;
left: 0;
width: 60px;
height: 60px;
border-radius: 12px;
background: white;
border: 3px solid #667eea;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #667eea;
z-index: 1;
}
:where(.myasar-internal-content) .timeline-content{
background: white;
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .timeline-title{
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .timeline-amount{
font-size: 1.25rem;
font-weight: 700;
color: #667eea;
}
:where(.myasar-internal-content) .timeline-date{
font-size: 0.85rem;
color: #a0aec0;
}
:where(.myasar-internal-content) .form-label{
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .form-label i{
color: #667eea;
}
:where(.myasar-internal-content) .form-control{
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .form-control:focus{
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .btn-magic{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-magic:hover{
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .alert-magic{
border-radius: 12px;
border: none;
padding: 1rem 1.5rem;
}
@media (max-width: 768px){:where(.myasar-internal-content) .timeline::before{
left: 20px;
}
:where(.myasar-internal-content) .timeline-item{
padding-left: 60px;
}
:where(.myasar-internal-content) .timeline-icon{
width: 40px;
height: 40px;
font-size: 1.2rem;
}}
:where(.myasar-internal-content) .donor-settings-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .settings-container{
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
:where(.myasar-internal-content) .magic-card{
background: white;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .magic-card:hover{
transform: translateY(-4px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .magic-card-header{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1.5rem;
color: white;
display: flex;
align-items: center;
gap: 1rem;
}
:where(.myasar-internal-content) .magic-card-header i{
font-size: 1.5rem;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .magic-card-.donor-settings-page{
padding: 2rem;
}
:where(.myasar-internal-content) .form-group{
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .form-label{
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .form-label i{
color: #667eea;
}
:where(.myasar-internal-content) .form-control,
:where(.myasar-internal-content) .form-select{
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .password-strength{
height: 6px;
background: #e2e8f0;
border-radius: 3px;
margin-top: 0.5rem;
overflow: hidden;
}
:where(.myasar-internal-content) .password-strength-bar{
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 3px;
}
:where(.myasar-internal-content) .password-strength-bar.weak{
width: 33%;
background: #ff4757;
}
:where(.myasar-internal-content) .password-strength-bar.medium{
width: 66%;
background: #ffa502;
}
:where(.myasar-internal-content) .password-strength-bar.strong{
width: 100%;
background: #26de81;
}
:where(.myasar-internal-content) .password-hint{
font-size: 0.85rem;
color: #718096;
margin-top: 0.5rem;
}
:where(.myasar-internal-content) .btn-magic{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .btn-magic::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
:where(.myasar-internal-content) .btn-magic:hover::before{
left: 100%;
}
:where(.myasar-internal-content) .btn-magic:hover{
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .btn-danger-magic{
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}
:where(.myasar-internal-content) .btn-danger-magic:hover{
box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
}
:where(.myasar-internal-content) .avatar-upload-card .avatar-preview-circle{
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
border: 4px solid rgba(102, 126, 234, 0.2);
margin: 0 auto 1rem;
background: #fff;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
}
:where(.myasar-internal-content) .avatar-upload-card .avatar-preview-circle img{
width: 100%;
height: 100%;
object-fit: cover;
}
:where(.myasar-internal-content) .toggle-switch{
position: relative;
display: inline-block;
width: 60px;
height: 32px;
}
:where(.myasar-internal-content) .toggle-switch input{
opacity: 0;
width: 0;
height: 0;
}
:where(.myasar-internal-content) .toggle-slider{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e0;
transition: 0.3s;
border-radius: 32px;
}
:where(.myasar-internal-content) .toggle-slider:before{
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
:where(.myasar-internal-content) .toggle-switch input:checked+.toggle-slider{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
:where(.myasar-internal-content) .toggle-switch input:checked+.toggle-slider:before{
transform: translateX(28px);
}
:where(.myasar-internal-content) .alert-magic{
border-radius: 12px;
border: none;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .alert-success{
background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
color: white;
}
:where(.myasar-internal-content) .alert-danger{
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
}
@media (max-width: 768px){:where(.myasar-internal-content) .settings-container{
padding: 0 0.75rem;
}
:where(.myasar-internal-content) .magic-card-.donor-settings-page{
padding: 1.5rem;
}}
:where(.myasar-internal-content) .donor-help-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .help-container{
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
:where(.myasar-internal-content) .help-header{
text-align: center;
background: white;
border-radius: 20px;
padding: 3rem 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .help-header h1{
font-size: 2.5rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .help-header h1 i{
color: #667eea;
}
:where(.myasar-internal-content) .help-header p{
color: #718096;
font-size: 1.1rem;
}
:where(.myasar-internal-content) .search-box{
max-width: 600px;
margin: 2rem auto 0;
position: relative;
}
:where(.myasar-internal-content) .search-box input{
width: 100%;
padding: 1rem 3rem 1rem 1.5rem;
border-radius: 50px;
border: 2px solid #e2e8f0;
font-size: 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .search-box input:focus{
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .search-box i{
position: absolute;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
font-size: 1.2rem;
}
:where(.myasar-internal-content) .category-tabs{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .category-tab{
background: white;
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
:where(.myasar-internal-content) .category-tab:hover{
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
color: inherit;
}
:where(.myasar-internal-content) .category-tab.active{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .category-icon{
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.8rem;
color: white;
}
:where(.myasar-internal-content) .category-tab.active .category-icon{
background: rgba(255, 255, 255, 0.2);
}
:where(.myasar-internal-content) .category-name{
font-weight: 600;
font-size: 1.1rem;
}
:where(.myasar-internal-content) .content-section{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .faq-item{
border-bottom: 1px solid #e2e8f0;
padding: 1.5rem 0;
}
:where(.myasar-internal-content) .faq-item:last-child{
border-bottom: none;
}
:where(.myasar-internal-content) .faq-question{
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
color: #2d3748;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .faq-question:hover{
background: #f7fafc;
color: #667eea;
}
:where(.myasar-internal-content) .faq-question i{
font-size: 1.5rem;
transition: transform 0.3s ease;
}
:where(.myasar-internal-content) .faq-question.active i{
transform: rotate(180deg);
}
:where(.myasar-internal-content) .faq-answer{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
color: #4a5568;
line-height: 1.8;
}
:where(.myasar-internal-content) .faq-answer.show{
max-height: 500px;
padding: 1rem 0.5rem;
}
:where(.myasar-internal-content) .quick-links{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
:where(.myasar-internal-content) .quick-link{
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border-radius: 12px;
text-decoration: none;
color: #2d3748;
transition: all 0.3s ease;
border: 2px solid transparent;
}
:where(.myasar-internal-content) .quick-link:hover{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateX(-5px);
border-color: #667eea;
}
:where(.myasar-internal-content) .quick-link-icon{
width: 50px;
height: 50px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #667eea;
flex-shrink: 0;
}
:where(.myasar-internal-content) .quick-link:hover .quick-link-icon{
background: rgba(255, 255, 255, 0.2);
color: white;
}
:where(.myasar-internal-content) .contact-card{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 16px;
padding: 2rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .contact-item{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
:where(.myasar-internal-content) .contact-item:last-child{
margin-bottom: 0;
}
:where(.myasar-internal-content) .contact-item i{
font-size: 1.5rem;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .contact-item a{
color: white;
text-decoration: none;
font-weight: 500;
}
:where(.myasar-internal-content) .contact-item a:hover{
text-decoration: underline;
}
:where(.myasar-internal-content) .support-form{
background: #f7fafc;
border-radius: 16px;
padding: 2rem;
}
:where(.myasar-internal-content) .form-label{
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .form-control,
:where(.myasar-internal-content) .form-select{
border-radius: 12px;
border: 2px solid #e2e8f0;
padding: 0.75rem;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .btn-send{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-send:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .resource-item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem;
background: #f7fafc;
border-radius: 12px;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .resource-info{
display: flex;
align-items: center;
gap: 1rem;
}
:where(.myasar-internal-content) .resource-icon{
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
:where(.myasar-internal-content) .btn-download{
background: white;
color: #667eea;
border: 2px solid #667eea;
padding: 0.5rem 1.5rem;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-download:hover{
background: #667eea;
color: white;
}
:where(.myasar-internal-content) .helpful-section{
background: #f7fafc;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
text-align: center;
}
:where(.myasar-internal-content) .helpful-btns{
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}
:where(.myasar-internal-content) .btn-helpful{
padding: 0.5rem 1.5rem;
border-radius: 10px;
border: 2px solid #e2e8f0;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-helpful:hover{
border-color: #667eea;
color: #667eea;
transform: translateY(-2px);
}
:where(.myasar-internal-content) .btn-helpful.yes:hover{
background: #48bb78;
border-color: #48bb78;
color: white;
}
:where(.myasar-internal-content) .btn-helpful.no:hover{
background: #f56565;
border-color: #f56565;
color: white;
}
@media (max-width: 768px){:where(.myasar-internal-content) .help-header h1{
font-size: 1.75rem;
}
:where(.myasar-internal-content) .category-tabs{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .quick-links{
grid-template-columns: 1fr;
}}
:where(.myasar-internal-content) .donor-order-details-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 2rem 0;
}
:where(.myasar-internal-content) .details-container{
max-width: 900px;
margin-top: 30px;
}
:where(.myasar-internal-content) .details-card{
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .order-header{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 2px solid #f0f0f0;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .order-title{
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
:where(.myasar-internal-content) .status-badge{
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .status-badge.completed{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .status-badge.pending{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .status-badge.processing{
background: #fef3c7;
color: #92400e;
}
:where(.myasar-internal-content) .info-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .info-item{
padding: 1rem;
background: #f7fafc;
border-radius: 12px;
}
:where(.myasar-internal-content) .info-label{
font-size: 0.85rem;
color: #718096;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .info-value{
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
}
:where(.myasar-internal-content) .items-section{
margin-top: 2rem;
}
:where(.myasar-internal-content) .item-card{
background: #f7fafc;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
display: flex;
gap: 1.5rem;
align-items: center;
}
:where(.myasar-internal-content) .item-image{
width: 100px;
height: 100px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
}
:where(.myasar-internal-content) .item-placeholder{
width: 100px;
height: 100px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .item-details{
flex: 1;
}
:where(.myasar-internal-content) .item-title{
font-size: 1.2rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .item-description{
color: #718096;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .item-type{
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
}
:where(.myasar-internal-content) .item-type.sponsorship{
background: #e0e7ff;
color: #4338ca;
}
:where(.myasar-internal-content) .item-type.donation{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .item-price{
text-align: left;
font-size: 1.5rem;
font-weight: 700;
color: #667eea;
}
:where(.myasar-internal-content) .total-section{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
margin-top: 2rem;
}
:where(.myasar-internal-content) .total-label{
font-size: 1.1rem;
margin-bottom: 0.5rem;
opacity: 0.9;
}
:where(.myasar-internal-content) .total-amount{
font-size: 3rem;
font-weight: 700;
}
:where(.myasar-internal-content) .action-buttons{
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: center;
}
:where(.myasar-internal-content) .btn-custom{
padding: 1rem 2rem;
border-radius: 12px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-size: 1rem;
}
:where(.myasar-internal-content) .btn-primary{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
:where(.myasar-internal-content) .btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
color: white;
}
:where(.myasar-internal-content) .btn-secondary{
background: white;
color: #667eea;
border: 2px solid #667eea;
}
:where(.myasar-internal-content) .btn-secondary:hover{
background: #f7fafc;
transform: translateY(-2px);
}
@media print{:where(.myasar-internal-content) .donor-order-details-page{
background: white;
padding: 0.5rem 0;
}
:where(.myasar-internal-content) .action-buttons,
:where(.myasar-internal-content) .donor-navbar{
display: none !important;
}
:where(.myasar-internal-content) .details-card{
box-shadow: none;
padding: 1rem;
}
:where(.myasar-internal-content) .order-header{
padding-bottom: 0.75rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .order-title{
font-size: 1.3rem;
}
:where(.myasar-internal-content) .status-badge{
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .info-grid{
gap: 0.75rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .info-item{
padding: 0.5rem;
}
:where(.myasar-internal-content) .info-label{
font-size: 0.75rem;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .info-value{
font-size: 0.9rem;
}
:where(.myasar-internal-content) .item-card{
padding: 0.75rem;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .item-image,
:where(.myasar-internal-content) .item-placeholder{
width: 60px;
height: 60px;
}
:where(.myasar-internal-content) .item-placeholder i{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .item-title{
font-size: 1rem;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .item-description{
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .item-type{
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
}
:where(.myasar-internal-content) .item-price{
font-size: 1.1rem;
}
:where(.myasar-internal-content) .total-section{
padding: 1rem;
margin-top: 1rem;
}
:where(.myasar-internal-content) .total-label{
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
:where(.myasar-internal-content) .total-amount{
font-size: 2rem;
}
:where(.myasar-internal-content) .details-container{
max-width: 100%;
}}
@media (max-width: 768px){:where(.myasar-internal-content) .item-card{
flex-direction: column;
text-align: center;
}
:where(.myasar-internal-content) .item-price{
text-align: center;
}
:where(.myasar-internal-content) .action-buttons{
flex-direction: column;
}}
:where(.myasar-internal-content) *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where(.myasar-internal-content) .donor-view-report-page{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding-bottom: 2rem;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-main-content{
margin-top: 80px;
padding: 2rem 0;
}
:where(.myasar-internal-content) .report-header{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .report-header::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
:where(.myasar-internal-content) .report-header .back-btn{
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #667eea;
text-decoration: none;
font-weight: 600;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .report-header .back-btn:hover{
color: #764ba2;
transform: translateX(-5px);
}
:where(.myasar-internal-content) .report-header h1{
font-size: 2rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .report-header .report-meta{
display: flex;
gap: 2rem;
flex-wrap: wrap;
color: #6c757d;
font-size: 0.95rem;
}
:where(.myasar-internal-content) .report-meta-item{
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .report-meta-item i{
color: #667eea;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stats-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--card-color, #667eea);
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card:hover{
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card .stat-icon{
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--card-color, #667eea) 0%, var(--card-color-dark, #764ba2) 100%);
color: white;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card .stat-label{
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stat-card .stat-value{
font-size: 1.8rem;
font-weight: 700;
color: #2d3436;
}
:where(.myasar-internal-content) .content-section{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .rating-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
:where(.myasar-internal-content) .rating-card{
padding: 1.5rem;
border-radius: 15px;
background: #f8f9fa;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .rating-card:hover{
background: #e9ecef;
transform: translateY(-3px);
}
:where(.myasar-internal-content) .rating-card h4{
font-size: 1rem;
color: #6c757d;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .rating-card .rating-value{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .rating-card .rating-stars{
font-size: 1.2rem;
}
:where(.myasar-internal-content) .chart-container{
position: relative;
height: 300px;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .progress-item{
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .progress-item-header{
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .progress-item-label{
font-weight: 600;
color: #2d3436;
}
:where(.myasar-internal-content) .progress-item-value{
font-weight: 700;
color: var(--progress-color, #667eea);
}
:where(.myasar-internal-content) .custom-progress{
height: 12px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
}
:where(.myasar-internal-content) .custom-progress-bar{
height: 100%;
background: linear-gradient(90deg, var(--progress-color, #667eea) 0%, var(--progress-color-dark, #764ba2) 100%);
border-radius: 10px;
transition: width 0.6s ease;
position: relative;
}
:where(.myasar-internal-content) .custom-progress-bar::after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
animation: myasar-internal-shimmer 2s infinite;
}
@keyframes myasar-internal-shimmer{
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
:where(.myasar-internal-content) .notes-box{
background: #f8f9fa;
border-left: 4px solid #667eea;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .notes-box h4{
font-size: 1.1rem;
color: #2d3436;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.myasar-internal-content) .notes-box p{
color: #6c757d;
line-height: 1.8;
margin: 0;
}
:where(.myasar-internal-content) .achievement-badge{
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
margin: 0.5rem 0.5rem 0.5rem 0;
box-shadow: 0 5px 20px rgba(38, 222, 129, 0.3);
}
:where(.myasar-internal-content) .history-timeline{
position: relative;
padding-left: 2rem;
}
:where(.myasar-internal-content) .history-timeline::before{
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #e9ecef;
}
:where(.myasar-internal-content) .history-item{
position: relative;
margin-bottom: 1.5rem;
padding-left: 2rem;
}
:where(.myasar-internal-content) .history-item::before{
content: '';
position: absolute;
left: -2rem;
top: 0.5rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
border: 3px solid white;
box-shadow: 0 0 0 3px #667eea;
}
:where(.myasar-internal-content) .history-item a{
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .history-item a:hover{
color: #764ba2;
text-decoration: underline;
}
:where(.myasar-internal-content) .history-item .history-meta{
color: #6c757d;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .no-report-state{
text-align: center;
padding: 4rem 2rem;
}
:where(.myasar-internal-content) .no-report-state i{
font-size: 5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .no-report-state h3{
font-size: 1.8rem;
color: #2d3436;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .no-report-state p{
color: #6c757d;
font-size: 1.1rem;
margin-bottom: 2rem;
}
:where(.myasar-internal-content) .print-btn{
position: fixed;
bottom: 2rem;
left: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
z-index: 1000;
}
:where(.myasar-internal-content) .print-btn:hover{
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
@media (max-width: 768px){:where(.myasar-internal-content) .donor-view-report-donor-view-report-main-content{
margin-top: 70px;
padding: 1rem 0;
}
:where(.myasar-internal-content) .report-header h1{
font-size: 1.5rem;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-stats-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .rating-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .chart-container{
height: 250px;
}
:where(.myasar-internal-content) .print-btn{
width: 50px;
height: 50px;
font-size: 1.2rem;
}}
@media print{:where(.myasar-internal-content) .donor-view-report-page{
background: white;
}
:where(.myasar-internal-content) .donor-view-report-donor-view-report-main-content{
margin-top: 0;
}
:where(.myasar-internal-content) .print-btn,
:where(.myasar-internal-content) .back-btn{
display: none !important;
}}
:where(.myasar-internal-content) .donor-message-thread-page{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
:where(.myasar-internal-content) .thread-container{
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
}
:where(.myasar-internal-content) .thread-header{
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .thread-title{
font-size: 1.75rem;
font-weight: 700;
color: #2d3748;
margin: 0 0 1rem 0;
}
:where(.myasar-internal-content) .thread-meta{
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
color: #718096;
font-size: 0.95rem;
}
:where(.myasar-internal-content) .badge-priority{
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .badge-priority.low{
background: #e0e7ff;
color: #4338ca;
}
:where(.myasar-internal-content) .badge-priority.normal{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .badge-priority.high{
background: #fed7aa;
color: #92400e;
}
:where(.myasar-internal-content) .badge-priority.urgent{
background: #fed7d7;
color: #c53030;
}
:where(.myasar-internal-content) .badge-status{
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .badge-status.open{
background: #fed7aa;
color: #92400e;
}
:where(.myasar-internal-content) .badge-status.in_progress{
background: #dbeafe;
color: #1e40af;
}
:where(.myasar-internal-content) .badge-status.resolved{
background: #d1fae5;
color: #065f46;
}
:where(.myasar-internal-content) .badge-status.closed{
background: #e2e8f0;
color: #4a5568;
}
:where(.myasar-internal-content) .reply-item{
background: white;
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
}
:where(.myasar-internal-content) .reply-item.from-donor{
border-right: 4px solid #667eea;
margin-left: 2rem;
}
:where(.myasar-internal-content) .reply-item.from-admin{
border-right: 4px solid #48bb78;
margin-right: 2rem;
background: #f7fcf9;
}
:where(.myasar-internal-content) .reply-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f7fafc;
}
:where(.myasar-internal-content) .sender-info{
display: flex;
align-items: center;
gap: 1rem;
}
:where(.myasar-internal-content) .sender-avatar{
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
color: white;
}
:where(.myasar-internal-content) .sender-avatar.donor{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
:where(.myasar-internal-content) .sender-avatar.admin{
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
:where(.myasar-internal-content) .sender-name{
font-weight: 600;
color: #2d3748;
}
:where(.myasar-internal-content) .sender-role{
color: #718096;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .reply-time{
color: #a0aec0;
font-size: 0.85rem;
}
:where(.myasar-internal-content) .reply-content{
color: #4a5568;
line-height: 1.8;
white-space: pre-line;
}
:where(.myasar-internal-content) .reply-form{
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: sticky;
bottom: 2rem;
}
:where(.myasar-internal-content) .form-control{
border-radius: 12px;
border: 2px solid #e2e8f0;
padding: 0.75rem;
}
:where(.myasar-internal-content) .form-control:focus{
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .btn-send-reply{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-send-reply:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .btn-back{
background: #f7fafc;
color: #4a5568;
border: none;
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-back:hover{
background: #e2e8f0;
color: #2d3748;
transform: translateX(5px);
}
@media (max-width: 768px){:where(.myasar-internal-content) .reply-item.from-donor,
:where(.myasar-internal-content) .reply-item.from-admin{
margin-left: 0;
margin-right: 0;
}}
:where(.myasar-internal-content) .donations-hero-stats{
display: flex;
gap: 16px;
flex-wrap: wrap;
min-width: 280px;
}
:where(.myasar-internal-content) .donations-hero-main{
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: flex-start;
justify-content: space-between;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary:hover{
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
color: white;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary:hover::before{
left: 100%;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-secondary{
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border: none;
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-secondary:hover{
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
color: white;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-success{
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
border: none;
color: white;
font-weight: 700;
padding: 14px 28px;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: myasar-internal-donations-cart-magic-pulse 2s ease-in-out infinite;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-success:hover{
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 25px rgba(17, 153, 142, 0.6);
color: white;
animation: none;
}
@keyframes myasar-internal-donations-cart-magic-pulse{
0%,
100% {
box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}
50% {
box-shadow: 0 6px 25px rgba(17, 153, 142, 0.6);
}
}
:where(.myasar-internal-content) .donations-cart-btn-magic-outline{
background: transparent;
border: 2px solid #667eea;
color: #667eea;
font-weight: 600;
padding: 10px 24px;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-outline:hover{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-danger{
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
border: none;
color: white;
font-weight: 600;
padding: 8px 16px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-danger:hover{
transform: translateY(-2px) scale(1.05);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5);
color: white;
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary:active,
:where(.myasar-internal-content) .donations-cart-btn-magic-secondary:active,
:where(.myasar-internal-content) .donations-cart-btn-magic-success:active,
:where(.myasar-internal-content) .donations-cart-btn-magic-danger:active{
transform: scale(0.98);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary i,
:where(.myasar-internal-content) .donations-cart-btn-magic-secondary i,
:where(.myasar-internal-content) .donations-cart-btn-magic-success i,
:where(.myasar-internal-content) .donations-cart-btn-magic-outline i,
:where(.myasar-internal-content) .donations-cart-btn-magic-danger i{
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-primary:hover i,
:where(.myasar-internal-content) .donations-cart-btn-magic-secondary:hover i,
:where(.myasar-internal-content) .donations-cart-btn-magic-success:hover i,
:where(.myasar-internal-content) .donations-cart-btn-magic-outline:hover i{
transform: scale(1.2);
}
:where(.myasar-internal-content) .donations-cart-btn-magic-danger:hover i{
transform: rotate(15deg) scale(1.2);
}
:where(.myasar-internal-content) [dir="rtl"] .donations-cart-btn-magic-primary::before{
left: auto;
right: -100%;
}
:where(.myasar-internal-content) [dir="rtl"] .donations-cart-btn-magic-primary:hover::before{
right: 100%;
left: auto;
}
:where(.myasar-internal-content) .sidebar-card .donations-cart-btn-magic-primary,
:where(.myasar-internal-content) .sidebar-card .donations-cart-btn-magic-secondary,
:where(.myasar-internal-content) .sidebar-card .donations-cart-btn-magic-success,
:where(.myasar-internal-content) .sidebar-card .donations-cart-btn-magic-danger,
:where(.myasar-internal-content) .sidebar-card .donations-cart-btn-magic-outline{
padding: 12px 24px !important;
border-radius: 12px;
font-weight: 600;
}
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .modal-title{
font-size: 1.5rem;
color: #fff;
}
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .modal-body p,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-label,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-control,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-check-label,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .btn,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal [data-gift-summary],
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .small{
font-size: 1rem;
}
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-label{
font-weight: 600;
}
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-control{
padding: 0.85rem 1rem;
}
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .modal-footer .btn,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .badge,
:where(.myasar-internal-content) #donations-donate-giftMetaModal.gift-meta-modal .form-check-label{
font-size: 1rem;
}
:where(.myasar-internal-content) .text-primary{
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
padding: 10px 18px !important;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewModal .modal-dialog{
max-width: fit-content;
width: auto;
margin: 1rem auto;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewModal .modal-content{
border-radius: 14px;
border: none;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
}
:where(.myasar-internal-content) #donations-donate-giftPreviewModal .modal-body{
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
min-height: 200px;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewCanvas{
position: relative;
width: fit-content;
height: fit-content;
max-width: 90vw;
max-height: 75vh;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
margin: 0;
display: block;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewImage{
display: block;
width: auto;
height: auto;
max-width: 90vw;
max-height: 75vh;
object-fit: contain;
background: #ffffff;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewOverlay{
position: absolute;
inset: 0;
pointer-events: none;
display: none;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewOverlay>div{
position: absolute;
transform: translate(-50%, -50%);
line-height: 1.35;
padding: 6px 12px;
border-radius: 8px;
font-size: clamp(16px, 2vw, 22px);
font-weight: 700;
color: #0f172a;
background: rgba(255, 255, 255, 0.62);
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.22);
}
:where(.myasar-internal-content) h5#donations-donate-giftPreviewModalLabel{
color: #fff;
}
@media (max-width: 768px){:where(.myasar-internal-content) #donations-donate-giftPreviewModal .modal-dialog{
width: fit-content;
max-width: calc(100vw - 1rem);
}
:where(.myasar-internal-content) #donations-donate-giftPreviewCanvas{
max-width: 95vw;
max-height: 70vh;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewImage{
width: auto;
height: auto;
max-width: 95vw;
max-height: 70vh;
}
:where(.myasar-internal-content) #donations-donate-giftPreviewOverlay>div{
font-size: 15px;
padding: 4px 8px;
}}
:where(.myasar-internal-content) .donations-checkout-btn-magic-outline,
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary,
:where(.myasar-internal-content) .donations-checkout-btn-magic-success{
position: relative;
overflow: hidden;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 12px;
padding: 12px 24px;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-outline{
background: white;
border: 2px solid #667eea;
color: #667eea;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-outline:hover{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary{
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border: 2px solid transparent;
color: white;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
:where(.myasar-internal-content) [dir="rtl"] .donations-checkout-btn-magic-secondary::before{
left: auto;
right: -100%;
transition: right 0.5s;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
color: white;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary:hover::before{
left: 100%;
}
:where(.myasar-internal-content) [dir="rtl"] .donations-checkout-btn-magic-secondary:hover::before{
left: auto;
right: 100%;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-success{
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
border: 2px solid transparent;
color: white;
animation: myasar-internal-donations-checkout-magic-pulse 2s ease-in-out infinite;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-success:hover{
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(56, 239, 125, 0.4);
color: white;
animation: none;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-success:active{
transform: translateY(0) scale(0.98);
}
@keyframes myasar-internal-donations-checkout-magic-pulse{
0%,
100% {
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.3);
}
50% {
box-shadow: 0 4px 25px rgba(56, 239, 125, 0.5);
}
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-outline .bi,
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary .bi,
:where(.myasar-internal-content) .donations-checkout-btn-magic-success .bi{
margin-right: 8px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.myasar-internal-content) [dir="rtl"] .donations-checkout-btn-magic-outline .bi,
:where(.myasar-internal-content) [dir="rtl"] .donations-checkout-btn-magic-secondary .bi,
:where(.myasar-internal-content) [dir="rtl"] .donations-checkout-btn-magic-success .bi{
margin-right: 0;
margin-left: 8px;
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-outline:hover .bi{
transform: rotate(15deg) scale(1.1);
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-secondary:hover .bi{
transform: scale(1.2);
}
:where(.myasar-internal-content) .donations-checkout-btn-magic-success:hover .bi{
transform: scale(1.2) rotate(-5deg);
}
:where(.myasar-internal-content) .sidebar-card .donations-checkout-btn-magic-primary,
:where(.myasar-internal-content) .sidebar-card .donations-checkout-btn-magic-secondary,
:where(.myasar-internal-content) .sidebar-card .donations-checkout-btn-magic-success,
:where(.myasar-internal-content) .sidebar-card .donations-checkout-btn-magic-danger,
:where(.myasar-internal-content) .sidebar-card .donations-checkout-btn-magic-outline{
padding: 12px 24px !important;
border-radius: 12px;
font-weight: 600;
}
:where(.myasar-internal-content) .text-center{
text-align: center !important;
}
:where(.myasar-internal-content) span.badge.rounded-pill.bg-primary-subtle.text-primary{
font-size: 1rem;
padding: 16px;
}
:where(.myasar-internal-content) .donations-help-style-1{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 16px;
padding: 2rem;
}
:where(.myasar-internal-content) .donations-help-style-2{
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donations-help-style-3{
border-bottom: 1px solid #e2e8f0;
padding: 1.5rem 0;
}
:where(.myasar-internal-content) .donations-help-style-4{
color: #667eea;
}
:where(.myasar-internal-content) .donations-help-style-5{
color: #718096;
font-size: 1.1rem;
}
:where(.myasar-internal-content) .donations-help-style-6{
display: block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 2rem;
text-align: center;
text-decoration: none;
color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
}
:where(.myasar-internal-content) .donations-help-style-7{
display: block;
background: white;
border-radius: 16px;
padding: 2rem;
text-align: center;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
}
:where(.myasar-internal-content) .donations-help-style-8{
display: flex;
align-items: center;
gap: 1rem;
}
:where(.myasar-internal-content) .donations-help-style-9{
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: #f7fafc;
border-radius: 12px;
text-decoration: none;
color: #2d3748;
}
:where(.myasar-internal-content) .donations-help-style-10{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem;
background: #f7fafc;
border-radius: 12px;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donations-help-style-11{
display: flex;
justify-content: space-between;
cursor: pointer;
font-weight: 600;
padding: 0.5rem;
border-radius: 8px;
}
:where(.myasar-internal-content) .donations-help-style-12{
display: none;
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donations-help-style-13{
font-size: 1.75rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 1.5rem;
}
:where(.myasar-internal-content) .donations-help-style-14{
font-size: 2.5rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .donations-help-style-15{
font-weight: 600;
font-size: 1.1rem;
}
:where(.myasar-internal-content) .donations-help-style-16{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
color: #4a5568;
}
:where(.myasar-internal-content) .donations-help-style-17{
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
:where(.myasar-internal-content) .donations-help-style-18{
text-align: center;
background: white;
border-radius: 20px;
padding: 3rem 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
:where(.myasar-internal-content) .donations-help-style-19{
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
:where(.myasar-internal-content) .donations-help-style-20{
width: 50px;
height: 50px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #667eea;
}
:where(.myasar-internal-content) .donations-help-style-21{
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.8rem;
color: white;
}
:where(.myasar-internal-content) .donations-help-style-22{
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.8rem;
color: white;
}
:where(.myasar-internal-content) .donations-toast{
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1080;
}
:where(.myasar-internal-content) .page-attachments-section{
margin-top: 3rem;
}
:where(.myasar-internal-content) .attachment-card{
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 1.25rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
:where(.myasar-internal-content) .attachment-card:hover{
border-color: #cbd5f5;
box-shadow: 0 6px 18px rgba(76, 110, 245, 0.12);
}
:where(.myasar-internal-content) .attachment-preview{
background: #f8fafc;
border-radius: 0.65rem;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
}
:where(.myasar-internal-content) .attachment-image{
max-width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
:where(.myasar-internal-content) .attachment-icon{
display: inline-flex;
align-items: center;
justify-content: center;
color: #4c6ef5;
background: rgba(76, 110, 245, 0.1);
border-radius: 50%;
width: 4rem;
height: 4rem;
}
:where(.myasar-internal-content) .attachment-icon .bi{
font-size: 2rem;
}
:where(.myasar-internal-content) .attachment-details{
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
:where(.myasar-internal-content) .attachment-name{
font-weight: 600;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where(.myasar-internal-content) .attachment-meta{
display: flex;
align-items: center;
gap: 0.5rem;
color: #6b7280;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .attachment-actions{
margin-top: auto;
}
:where(.myasar-internal-content) .inline-pdf-block{
background: #ffffff;
border: 1px solid #e0e7ff;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
overflow: hidden;
}
:where(.myasar-internal-content) .inline-pdf-collection{
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
:where(.myasar-internal-content) .inline-pdf-header{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .inline-pdf-title{
display: flex;
align-items: center;
font-weight: 600;
font-size: 1.05rem;
color: #0f172a;
}
:where(.myasar-internal-content) .inline-pdf-meta{
display: flex;
align-items: center;
gap: 0.75rem;
color: #64748b;
}
:where(.myasar-internal-content) .inline-pdf-frame{
width: 100%;
min-height: 92vh;
border: 0;
border-radius: 0.9rem;
background: #f8fafc;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
@media (max-width: 768px){:where(.myasar-internal-content) .attachment-card{
padding: 1rem;
}
:where(.myasar-internal-content) .attachment-preview{
min-height: 120px;
}
:where(.myasar-internal-content) .inline-pdf-block{
padding: 1.25rem;
}
:where(.myasar-internal-content) .inline-pdf-frame{
min-height: 75vh;
}}
:where(.myasar-internal-content) .login-page-content{
width: 100%;
padding: 40px 24px 60px;
opacity: 0;
transition: opacity 0.25s ease;
}
body.ready :where(.myasar-internal-content) .login-page-content{
opacity: 1;
}
:where(.myasar-internal-content) .login-container{
width: 100%;
max-width: 480px;
padding: 24px;
position: relative;
z-index: 10;
margin: 0 auto;
}
:where(.myasar-internal-content) .login-logo-img{
max-height: 70px;
filter: brightness(0) invert(1);
}
:where(.myasar-internal-content) .login-logo-icon{
font-size: 70px;
}
:where(.myasar-internal-content) .cursor-pointer{
cursor: pointer;
}
:where(.myasar-internal-content) .fs-14{
font-size: 14px;
}
:where(.myasar-internal-content) .contact-hero{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: #fff;
border-radius: 20px;
padding: 50px 30px;
margin-bottom: 40px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
text-align: center;
}
:where(.myasar-internal-content) .contact-hero h1{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
color: white;
}
:where(.myasar-internal-content) .contact-hero p{
font-size: 1.1rem;
opacity: 0.95;
}
:where(.myasar-internal-content) .info-card{
background: #fff;
border-radius: 16px;
padding: 25px 20px;
height: 100%;
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
transition: all 0.3s ease;
text-align: center;
}
:where(.myasar-internal-content) .info-card:hover{
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(var(--secondary-rgb), 0.2);
}
:where(.myasar-internal-content) .info-card .icon{
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--myasar-theme-secondary), var(--myasar-theme-primary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 26px;
color: #fff;
box-shadow: 0 4px 15px rgba(var(--secondary-rgb), 0.3);
}
:where(.myasar-internal-content) .info-card h3{
color: var(--myasar-theme-primary);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 12px;
}
:where(.myasar-internal-content) .info-card .info-item{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 10px 0;
color: #495057;
font-size: 0.95rem;
}
:where(.myasar-internal-content) .info-card .info-item i{
color: var(--myasar-theme-secondary);
font-size: 1.2rem;
}
:where(.myasar-internal-content) .info-card .info-item a{
color: #495057;
text-decoration: none;
transition: color 0.3s;
}
:where(.myasar-internal-content) .info-card .info-item a:hover{
color: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .info-card .badge{
background: rgba(var(--secondary-rgb), 0.1);
color: var(--myasar-theme-primary);
font-weight: 500;
padding: 6px 12px;
border-radius: 20px;
margin: 4px;
display: inline-block;
font-size: 0.9rem;
}
:where(.myasar-internal-content) .map-container{
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.08);
height: 220px;
border: 3px solid rgba(var(--secondary-rgb), 0.2);
}
:where(.myasar-internal-content) .contact-form-card{
background: #fff;
border-radius: 18px;
padding: 35px;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .contact-form-card h2{
color: var(--myasar-theme-primary);
font-weight: 700;
margin-bottom: 10px;
border-right: 4px solid var(--myasar-theme-secondary);
padding-right: 15px;
}
:where(.myasar-internal-content) .form-label{
color: var(--myasar-theme-primary);
font-weight: 500;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: var(--myasar-theme-secondary);
box-shadow: 0 0 0 0.15rem rgba(var(--secondary-rgb), 0.15);
}
:where(.myasar-internal-content) .btn-primary{
background: var(--myasar-theme-secondary) !important;
border-color: var(--myasar-theme-secondary) !important;
font-weight: 600;
padding: 14px 35px;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-primary:hover,
:where(.myasar-internal-content) .btn-primary:focus{
background: var(--myasar-theme-primary) !important;
border-color: var(--myasar-theme-primary) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(var(--secondary-rgb), 0.3) !important;
}
:where(.myasar-internal-content) .alert-success{
background: rgba(var(--secondary-rgb), 0.1);
border-color: var(--myasar-theme-secondary);
color: var(--myasar-theme-primary);
border-radius: 12px;
}
:where(.myasar-internal-content) .whatsapp-btn{
display: inline-flex;
align-items: center;
gap: 8px;
background: #25D366;
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
transition: all 0.3s;
font-weight: 500;
margin-top: 10px;
}
:where(.myasar-internal-content) .whatsapp-btn:hover{
background: #128C7E;
color: white;
transform: scale(1.05);
}
@media (max-width: 767.98px){:where(.myasar-internal-content) .contact-hero h1{
font-size: 1.8rem;
}
:where(.myasar-internal-content) .contact-form-card{
padding: 25px;
}
:where(.myasar-internal-content) .info-card{
margin-bottom: 20px;
}}
:where(.myasar-internal-content) .opacity-20{
opacity: 0.2;
}
:where(.myasar-internal-content) .badge-holiday{
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
:where(.myasar-internal-content) .social-follow-label{
font-size: 0.9rem;
margin-bottom: 8px;
color: var(--myasar-theme-primary);
font-weight: 600;
}
:where(.myasar-internal-content) .social-icon-fb{
background: #1877f2;
color: white;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .social-icon-x{
background: #000;
color: white;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .social-icon-insta{
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: white;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .social-icon-yt{
background: #ff0000;
color: white;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
:where(.myasar-internal-content) .registration-hero{
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95) 0%, rgba(var(--secondary-rgb), 0.88) 100%);
color: #fff;
border-radius: 18px;
padding: 40px 28px;
margin-bottom: 28px;
box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.2);
}
:where(.myasar-internal-content) .registration-hero .badge{
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.3);
}
:where(.myasar-internal-content) .registration-card{
background: #ffffff;
border-radius: 18px;
padding: 32px;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .role-selector .btn-check:checked+.role-option,
:where(.myasar-internal-content) .role-selector .role-option.active-option{
border-color: var(--myasar-theme-secondary);
background: rgba(var(--secondary-rgb), 0.04);
box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.25);
transform: translateY(-3px);
}
:where(.myasar-internal-content) .role-option{
border: 2px solid rgba(var(--primary-rgb), 0.1);
border-radius: 14px;
padding: 20px 18px;
text-align: center;
transition: all 0.25s ease;
cursor: pointer;
height: 100%;
background: #fff;
}
:where(.myasar-internal-content) .role-option:hover{
border-color: rgba(var(--secondary-rgb), 0.4);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
transform: translateY(-2px);
}
:where(.myasar-internal-content) .role-option i{
font-size: 36px;
color: var(--myasar-theme-secondary);
margin-bottom: 12px;
transition: transform 0.25s ease;
}
:where(.myasar-internal-content) .role-option:hover i,
:where(.myasar-internal-content) .role-option.active-option i{
transform: scale(1.1);
}
:where(.myasar-internal-content) .role-option h5{
font-size: 18px;
margin-bottom: 6px;
color: var(--myasar-theme-primary);
font-weight: 600;
}
:where(.myasar-internal-content) .role-option p{
font-size: 13px;
color: #6c757d;
margin-bottom: 0;
}
:where(.myasar-internal-content) .role-fields{
display: none;
}
:where(.myasar-internal-content) .role-fields.active{
display: block;
animation: myasar-internal-fadeIn 0.3s ease;
}
@keyframes myasar-internal-fadeIn{
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.myasar-internal-content) .role-fields h5{
color: var(--myasar-theme-primary);
border-right: 4px solid var(--myasar-theme-secondary);
padding-right: 12px;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .registration-summary{
background: rgba(var(--secondary-rgb), 0.08);
border-right: 4px solid var(--myasar-theme-secondary);
border-radius: 8px;
padding: 18px;
margin-bottom: 24px;
}
:where(.myasar-internal-content) .registration-summary i{
color: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .form-label{
color: var(--myasar-theme-primary);
font-weight: 500;
margin-bottom: 0.5rem;
}
:where(.myasar-internal-content) .form-control:focus,
:where(.myasar-internal-content) .form-select:focus{
border-color: var(--myasar-theme-secondary);
box-shadow: 0 0 0 0.15rem rgba(var(--secondary-rgb), 0.15);
}
:where(.myasar-internal-content) .btn-success{
background: var(--myasar-theme-secondary) !important;
border-color: var(--myasar-theme-secondary) !important;
font-weight: 600;
padding: 12px 32px;
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .btn-success:hover,
:where(.myasar-internal-content) .btn-success:focus,
:where(.myasar-internal-content) .btn-success:active{
background: var(--myasar-theme-primary) !important;
border-color: var(--myasar-theme-primary) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.3) !important;
}
:where(.myasar-internal-content) .btn-success:disabled{
background: rgba(var(--secondary-rgb), 0.5) !important;
border-color: rgba(var(--secondary-rgb), 0.5) !important;
}
:where(.myasar-internal-content) .btn-outline-secondary{
color: var(--myasar-theme-primary);
border-color: var(--myasar-theme-primary);
font-weight: 600;
padding: 12px 32px;
}
:where(.myasar-internal-content) .btn-outline-secondary:hover{
background: var(--myasar-theme-primary);
border-color: var(--myasar-theme-primary);
color: #fff;
}
:where(.myasar-internal-content) .alert-success{
background: rgba(var(--secondary-rgb), 0.1);
border-color: var(--myasar-theme-secondary);
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .alert-success i{
color: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .alert-light{
border-color: rgba(var(--secondary-rgb), 0.3);
}
:where(.myasar-internal-content) .alert-light i{
color: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .alert-light a{
color: var(--myasar-theme-secondary);
font-weight: 600;
}
:where(.myasar-internal-content) .alert-light a:hover{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .form-check-input:checked{
background-color: var(--myasar-theme-secondary);
border-color: var(--myasar-theme-secondary);
}
@media (max-width: 767.98px){:where(.myasar-internal-content) .registration-card{
padding: 22px;
}
:where(.myasar-internal-content) .role-option{
padding: 16px 12px;
}
:where(.myasar-internal-content) .role-option i{
font-size: 28px;
}}
:where(.myasar-internal-content) .fs-105{
font-size: 1.05rem;
}
:where(.myasar-internal-content) .fs-16{
font-size: 1.6rem;
}
:where(.myasar-internal-content) .reset-key-icon{
font-size: 60px;
color: #ffd700;
}
:where(.myasar-internal-content) .page-card{
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
margin-bottom: 2rem;
padding: 0px 20px 30px 20px;
}
@media (max-width: 768px){:where(.myasar-internal-content) .page-card{
padding: 1.5rem;
}}
:where(.myasar-internal-content) .registration-card{
background: #ffffff;
border-radius: 18px;
padding: 32px;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .registration-hero{
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95) 0%, rgba(var(--secondary-rgb), 0.88) 100%);
color: #fff;
border-radius: 18px;
padding: 40px 28px;
margin-bottom: 28px;
box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.2);
}
:where(.myasar-internal-content) .contact-hero{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: #fff;
border-radius: 20px;
padding: 50px 30px;
margin-bottom: 40px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
text-align: center;
}
:where(.myasar-internal-content) .info-card{
background: #fff;
border-radius: 16px;
padding: 25px 20px;
height: 100%;
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
transition: all 0.3s ease;
text-align: center;
}
:where(.myasar-internal-content) .contact-form-card{
background: #fff;
border-radius: 18px;
padding: 35px;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08);
border-top: 4px solid var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .container.page-content{
margin-top: 50px;
}
:where(.myasar-internal-content) h1.display-5.fw-bold.mb-3.text-white.text-center.w-100{
text-align: center !important;
}
:where(.myasar-internal-content){
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
min-height: 100vh;
align-items: center;
}
:where(.myasar-internal-content) .navbar{
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .navbar-brand{
font-weight: bold;
color: var(--myasar-theme-primary);
font-size: 22px;
}
:where(.myasar-internal-content) .navbar-brand i{
color: var(--myasar-theme-secondary);
font-size: 28px;
}
:where(.myasar-internal-content) .nav-link{
color: #333;
font-weight: 500;
margin: 0 10px;
transition: color 0.3s;
}
:where(.myasar-internal-content) .nav-link:hover{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .btn-login{
background: var(--myasar-theme-primary);
color: white;
padding: 8px 25px;
border-radius: 25px;
border: none;
font-weight: bold;
transition: all 0.3s;
}
:where(.myasar-internal-content) .btn-login:hover{
background: var(--myasar-theme-secondary);
transform: translateY(-2px);
}
:where(.myasar-internal-content) .hero-section{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .hero-section::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
:where(.myasar-internal-content) .hero-content{
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .hero-title{
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
animation: myasar-internal-fadeInUp 1s;
}
:where(.myasar-internal-content) .hero-subtitle{
font-size: 20px;
margin-bottom: 30px;
opacity: 0.95;
animation: myasar-internal-fadeInUp 1s 0.2s backwards;
}
:where(.myasar-internal-content) .btn-hero{
background: white;
color: var(--myasar-theme-primary);
padding: 15px 40px;
border-radius: 30px;
font-weight: bold;
font-size: 18px;
border: none;
margin: 10px;
transition: all 0.3s;
animation: myasar-internal-fadeInUp 1s 0.4s backwards;
}
:where(.myasar-internal-content) .btn-hero:hover{
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
color: var(--myasar-theme-primary);
}
@keyframes myasar-internal-fadeInUp{
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.myasar-internal-content) .stats-section{
background: white;
padding: 60px 0;
margin-top: -50px;
position: relative;
z-index: 2;
}
:where(.myasar-internal-content) .stat-card{
text-align: center;
padding: 30px;
border-radius: 15px;
background: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
:where(.myasar-internal-content) .stat-card:hover{
transform: translateY(-10px);
}
:where(.myasar-internal-content) .stat-card i{
font-size: 48px;
color: var(--myasar-theme-primary);
margin-bottom: 15px;
}
:where(.myasar-internal-content) .stat-card h2{
font-size: 42px;
font-weight: bold;
color: var(--myasar-theme-primary);
margin: 10px 0;
}
:where(.myasar-internal-content) .stat-card p{
color: #666;
margin: 0;
font-size: 18px;
}
:where(.myasar-internal-content) .feature-icon{
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin: 0 auto 20px;
}
:where(.myasar-internal-content) .feature-card h4{
color: var(--myasar-theme-primary);
font-weight: bold;
margin-bottom: 15px;
}
:where(.myasar-internal-content) .feature-card p{
color: #666;
line-height: 1.8;
}
:where(.myasar-internal-content) .features-section{
padding: 80px 0;
background: #f8f9fa;
}
:where(.myasar-internal-content) .feature-card{
text-align: center;
padding: 40px 30px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
height: 100%;
transition: all 0.3s;
}
:where(.myasar-internal-content) .feature-card:hover{
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
:where(.myasar-internal-content) .feature-card i{
font-size: 48px;
color: var(--myasar-theme-secondary);
margin-bottom: 20px;
/*color: #ffffff;*/
margin-top: 20px;
}
:where(.myasar-internal-content) .cta-section h2{
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .cta-section p{
font-size: 20px;
margin-bottom: 30px;
opacity: 0.95;
}
:where(.myasar-internal-content) .social-links a{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
text-align: center;
line-height: 40px;
margin: 0 5px;
transition: all 0.3s;
}
:where(.myasar-internal-content) .social-links a:hover{
background: var(--myasar-theme-secondary);
transform: translateY(-3px);
color: white;
}
:where(.myasar-internal-content) .login-container{
max-width: 450px;
margin: 0 auto;
padding: 50px;
}
:where(.myasar-internal-content) .login-card{
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
margin-bottom: 30px;
}
:where(.myasar-internal-content) .login-header{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
padding: 40px 30px;
text-align: center;
}
:where(.myasar-internal-content) .login-header h1{
font-size: 24px;
margin-bottom: 10px;
font-weight: bold;
}
:where(.myasar-internal-content) .login-header p{
font-size: 14px;
opacity: 0.9;
margin: 0;
}
:where(.myasar-internal-content) .login-body{
padding: 40px 30px;
}
:where(.myasar-internal-content) .login-footer-text{
text-align: center;
color: white;
}
:where(.myasar-internal-content) span.position-absolute.end-0.eye-icon{
left: 0 !important;
margin-top: -35px;
margin-left: 15px;
}
:where(.myasar-internal-content) .form-control{
border-radius: 10px;
padding: 12px 20px;
border: 2px solid #e0e0e0;
transition: all 0.3s;
}
:where(.myasar-internal-content) .form-control:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
:where(.myasar-internal-content) .quran-icon{
font-size: 60px;
margin-bottom: 20px;
color: #ffd700;
}
:where(.myasar-internal-content) .input-group-text{
border-radius: 10px 0 0 10px;
border: 2px solid #e0e0e0;
border-left: none;
background: #f8f9fa;
}
:where(.myasar-internal-content) .form-control.with-icon{
border-radius: 0 10px 10px 0;
border-right: none;
}
:where(.myasar-internal-content) .container.container-main{
background: #fff;
border-radius: 16px;
padding: 24px;
}
:where(.myasar-internal-content) .navbar-nav{
white-space: nowrap;
}
:where(.myasar-internal-content) .navbar-row{
padding: 15px 0px;
}
:where(.myasar-internal-content) .siteurls{
font-size: 40px;
margin-top: -30px;
}
@media (max-width: 767.98px){:where(.myasar-internal-content) .navbar-brand--mobile i.bi,
:where(.myasar-internal-content) .navbar-brand--mobile i{
font-size: 18px !important;
flex-shrink: 0;
}
:where(.myasar-internal-content) .navbar-brand--mobile .navbar-brand-text,
:where(.myasar-internal-content) .navbar-brand-text{
display: block;
white-space: normal !important;
word-wrap: break-word;
width: 100%;
color: var(--myasar-theme-primary);
font-size: 24px !important;
line-height: 1.3 !important;
}}
:where(.myasar-internal-content) .siteNames{
color: #6f6f6f;
position: absolute;
top: 55px;
margin-right: -11px;
}
:where(.myasar-internal-content) *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where(.myasar-internal-content) .container{
margin: 0 auto;
padding: 0 24px;
}
:where(.myasar-internal-content) h1,
:where(.myasar-internal-content) h2,
:where(.myasar-internal-content) h3,
:where(.myasar-internal-content) h4,
:where(.myasar-internal-content) h5,
:where(.myasar-internal-content) h6{
font-weight: 700;
line-height: 1.3;
color: var(--text-dark);
}
:where(.myasar-internal-content) h1{
font-size: 3.5rem;
}
:where(.myasar-internal-content) h2{
font-size: 2.8rem;
}
:where(.myasar-internal-content) h3{
font-size: 2.2rem;
}
:where(.myasar-internal-content) h4{
font-size: 1.8rem;
}
:where(.myasar-internal-content) .modern-navbar{
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition-normal);
}
:where(.myasar-internal-content) .modern-navbar.scrolled{
box-shadow: var(--shadow-md);
}
:where(.myasar-internal-content) .navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
max-width: 1400px;
margin: 0 auto;
}
:where(.myasar-internal-content) .navbar-brand{
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text-dark);
font-size: 1.5rem;
font-weight: 700;
transition: var(--transition-fast);
}
:where(.myasar-internal-content) .navbar-brand i{
font-size: 2rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: -11px;
margin-bottom: 7px;
margin-right: 6px;
}
:where(.myasar-internal-content) .navbar-brand:hover{
transform: translateY(-2px);
}
:where(.myasar-internal-content) .navbar-menu{
display: flex;
gap: 32px;
list-style: none;
align-items: center;
}
:where(.myasar-internal-content) .navbar-menu a{
text-decoration: none;
color: var(--text-dark);
font-weight: 600;
font-size: 1.05rem;
position: relative;
transition: var(--transition-fast);
padding: 8px 0;
}
:where(.myasar-internal-content) .navbar-menu a::after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 3px;
background: var(--primary-gradient);
transition: width 0.3s ease;
}
:where(.myasar-internal-content) .navbar-menu a:hover,
:where(.myasar-internal-content) .navbar-menu a.active{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .navbar-menu a:hover::after,
:where(.myasar-internal-content) .navbar-menu a.active::after{
width: 100%;
}
:where(.myasar-internal-content) .navbar-actions{
display: flex;
gap: 16px;
align-items: center;
}
:where(.myasar-internal-content) .hero-modern{
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
position: relative;
overflow: hidden;
padding: 120px 0;
}
:where(.myasar-internal-content) .hero-modern .text-gradient{
background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes myasar-internal-float{
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(50px, 50px) scale(1.1);
}
}
:where(.myasar-internal-content) .hero-content{
position: relative;
z-index: 2;
color: white;
max-width: 700px;
}
:where(.myasar-internal-content) .hero-badge{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 24px;
animation: myasar-internal-slideDown 0.8s ease;
}
:where(.myasar-internal-content) .hero-title{
font-size: 4rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 24px;
animation: myasar-internal-slideUp 0.8s ease 0.2s both;
}
:where(.myasar-internal-content) .hero-subtitle{
font-size: 1.4rem;
line-height: 1.8;
opacity: 0.95;
margin-bottom: 40px;
animation: myasar-internal-slideUp 0.8s ease 0.4s both;
}
:where(.myasar-internal-content) .hero-buttons{
display: flex;
gap: 20px;
flex-wrap: wrap;
animation: myasar-internal-slideUp 0.8s ease 0.6s both;
}
@keyframes myasar-internal-slideDown{
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes myasar-internal-slideUp{
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.myasar-internal-content) .btn-modern{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
font-size: 1.1rem;
font-weight: 700;
border-radius: var(--border-radius-md);
border: none;
cursor: pointer;
transition: var(--transition-fast);
text-decoration: none;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .btn-modern::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: width 0.4s ease;
}
:where(.myasar-internal-content) .btn-modern:hover::before{
width: 100%;
}
:where(.myasar-internal-content) .btn-modern i,
:where(.myasar-internal-content) .btn-modern span{
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .btn-primary-modern{
background: white;
color: var(--myasar-theme-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
:where(.myasar-internal-content) .btn-primary-modern:hover{
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
:where(.myasar-internal-content) .btn-outline-modern{
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.5);
}
:where(.myasar-internal-content) .btn-outline-modern:hover{
background: rgba(255, 255, 255, 0.15);
border-color: white;
transform: translateY(-3px);
}
:where(.myasar-internal-content) .stats-modern{
position: relative;
z-index: 10;
}
:where(.myasar-internal-content) .stats-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
}
:where(.myasar-internal-content) .stat-card-modern{
background: white;
padding: 36px 28px;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
text-align: center;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .stat-card-modern:hover{
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
:where(.myasar-internal-content) .stat-icon{
font-size: 3rem;
opacity: 0.9;
margin-bottom: 1rem;
display: inline-block;
animation: myasar-internal-bounce 2s ease infinite;
margin-right: auto;
margin-left: auto;
}
:where(.myasar-internal-content) .stat-icon{
width: 80px;
height: 80px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: white;
transition: var(--transition-normal);
}
:where(.myasar-internal-content) .stat-card-modern:hover .stat-icon{
transform: scale(1.1) rotate(5deg);
}
:where(.myasar-internal-content) .stat-number{
font-size: 3rem;
font-weight: 900;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
:where(.myasar-internal-content) .stat-label{
font-size: 1.1rem;
color: var(--text-muted);
font-weight: 600;
}
:where(.myasar-internal-content) .section-header{
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
text-align: center !important;
}
:where(.myasar-internal-content) .section-badge{
display: inline-block;
padding: 10px 24px;
background: var(--primary-gradient);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .section-subtitle{
font-size: 1.25rem;
color: var(--text-muted);
line-height: 1.8;
}
:where(.myasar-internal-content) .services-section{
background: white;
}
:where(.myasar-internal-content) .services-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
:where(.myasar-internal-content) .service-card{
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 42px 32px;
border-radius: var(--border-radius-lg);
border: 2px solid transparent;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .service-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-gradient);
opacity: 0;
transition: var(--transition-normal);
z-index: 0;
}
:where(.myasar-internal-content) .service-card:hover{
transform: translateY(-8px);
border-color: var(--myasar-theme-primary);
box-shadow: var(--shadow-lg);
}
:where(.myasar-internal-content) .service-card:hover::before{
opacity: 0.05;
}
:where(.myasar-internal-content) .service-icon{
width: 90px;
height: 90px;
background: var(--primary-gradient);
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
margin-bottom: 24px;
position: relative;
z-index: 1;
transition: var(--transition-normal);
margin-right: auto;
margin-left: auto;
}
:where(.myasar-internal-content) .service-card:hover .service-icon{
transform: scale(1.05) rotate(-5deg);
}
:where(.myasar-internal-content) .service-title{
font-size: 1.6rem;
margin-bottom: 16px;
color: var(--text-dark);
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .service-description{
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-muted);
position: relative;
z-index: 1;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .service-link{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--myasar-theme-primary);
font-weight: 700;
text-decoration: none;
position: relative;
z-index: 1;
transition: var(--transition-fast);
}
:where(.myasar-internal-content) .service-link:hover{
gap: 12px;
}
:where(.myasar-internal-content) .features-section{
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
:where(.myasar-internal-content) .features-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
:where(.myasar-internal-content) .feature-card{
background: white;
padding: 36px 28px;
border-radius: var(--border-radius-lg);
text-align: center;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
:where(.myasar-internal-content) .feature-card:hover{
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
:where(.myasar-internal-content) .feature-icon{
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #ffffff;
}
:where(.myasar-internal-content) .feature-icon i{
color: #ffffff !important;
}
:where(.myasar-internal-content) .feature-title{
font-size: 1.3rem;
margin-bottom: 12px;
color: var(--text-dark);
}
:where(.myasar-internal-content) .feature-description{
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
}
:where(.myasar-internal-content) .governance-section{
background: white;
}
:where(.myasar-internal-content) .governance-container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 576px){:where(.myasar-internal-content) .governance-content{
text-align: center;
}}
:where(.myasar-internal-content) .governance-content h2{
margin-bottom: 24px;
text-align: center !important;
}
:where(.myasar-internal-content) .governance-content p{
font-size: 1.15rem;
line-height: 1.9;
color: var(--text-muted);
margin-bottom: 32px;
}
:where(.myasar-internal-content) .governance-features{
display: flex;
flex-direction: column;
gap: 20px;
}
:where(.myasar-internal-content) .governance-item{
display: flex;
gap: 16px;
align-items: flex-start;
}
:where(.myasar-internal-content) .governance-item-icon{
width: 50px;
height: 50px;
background: var(--success-gradient);
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .governance-item-content h4{
font-size: 1.2rem;
margin-bottom: 8px;
}
:where(.myasar-internal-content) .governance-item-content p{
font-size: 1rem;
margin: 0;
}
:where(.myasar-internal-content) .governance-visual{
position: relative;
}
:where(.myasar-internal-content) .governance-card-stack{
display: flex;
flex-direction: column;
gap: 20px;
}
:where(.myasar-internal-content) .governance-card-item{
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 24px;
border-radius: var(--border-radius-md);
border-right: 4px solid var(--myasar-theme-primary);
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
}
:where(.myasar-internal-content) .governance-card-item:hover{
transform: translateX(-10px);
box-shadow: var(--shadow-md);
}
:where(.myasar-internal-content) .governance-card-item h5{
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .testimonials-section{
background: var(--primary-gradient);
color: white;
}
:where(.myasar-internal-content) .testimonials-section .section-title,
:where(.myasar-internal-content) .testimonials-section .section-subtitle{
color: white;
}
:where(.myasar-internal-content) .testimonials-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
:where(.myasar-internal-content) .testimonial-card{
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 36px;
border-radius: var(--border-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition-normal);
}
:where(.myasar-internal-content) .testimonial-card:hover{
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
}
:where(.myasar-internal-content) .testimonial-rating{
display: flex;
gap: 4px;
margin-bottom: 16px;
color: #ffd700;
font-size: 1.2rem;
}
:where(.myasar-internal-content) .testimonial-text{
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 24px;
font-style: italic;
}
:where(.myasar-internal-content) .testimonial-author{
display: flex;
align-items: center;
gap: 16px;
}
:where(.myasar-internal-content) .testimonial-avatar{
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--myasar-theme-primary);
font-weight: 700;
}
:where(.myasar-internal-content) .testimonial-author-info h5{
font-size: 1.1rem;
margin-bottom: 4px;
}
:where(.myasar-internal-content) .testimonial-author-info p{
font-size: 0.95rem;
opacity: 0.85;
margin: 0;
}
:where(.myasar-internal-content) .cta-section{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
color: white;
text-align: center;
padding: 100px 24px;
border-radius: var(--border-radius-xl);
margin: 80px auto;
max-width: 1200px;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .cta-section::before{
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
top: -150px;
right: -150px;
}
:where(.myasar-internal-content) .cta-section h2{
font-size: 3rem;
margin-bottom: 20px;
color: white;
}
:where(.myasar-internal-content) .cta-section p{
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.95;
}
:where(.myasar-internal-content) .footer-modern{
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 60px 0 24px;
}
:where(.myasar-internal-content) .footer-content{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
:where(.myasar-internal-content) .footer-about h3{
font-size: 1.8rem;
margin-bottom: 16px;
color: white;
}
:where(.myasar-internal-content) .footer-about p{
line-height: 1.8;
opacity: 0.85;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .footer-social{
display: flex;
gap: 12px;
}
:where(.myasar-internal-content) .social-icon{
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: var(--transition-fast);
text-decoration: none;
color: white;
}
:where(.myasar-internal-content) .social-icon:hover{
background: var(--primary-gradient);
transform: translateY(-3px);
}
:where(.myasar-internal-content) .footer-links h4{
font-size: 1.2rem;
margin-bottom: 20px;
color: white;
}
:where(.myasar-internal-content) .footer-links ul{
list-style: none;
}
:where(.myasar-internal-content) .footer-links ul li{
margin-bottom: 12px;
}
:where(.myasar-internal-content) .footer-links ul li a{
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: var(--transition-fast);
display: flex;
align-items: center;
gap: 8px;
}
:where(.myasar-internal-content) .footer-links ul li a:hover{
color: white;
padding-right: 8px;
}
:where(.myasar-internal-content) .footer-bottom{
text-align: center;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.8;
}
@media (max-width: 1024px){:where(.myasar-internal-content) .hero-title{
font-size: 3rem;
}
:where(.myasar-internal-content) .section-title{
font-size: 2.5rem;
}
:where(.myasar-internal-content) .governance-container{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .footer-content{
grid-template-columns: 1fr 1fr;
}}
@media (max-width: 768px){:where(.myasar-internal-content) section{
padding: 60px 0;
}
:where(.myasar-internal-content) .hero-title{
font-size: 2.5rem;
}
:where(.myasar-internal-content) .hero-subtitle{
font-size: 1.1rem;
}
:where(.myasar-internal-content) .section-title{
font-size: 2rem;
}
:where(.myasar-internal-content) .stats-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .services-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .features-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .testimonials-grid{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .footer-content{
grid-template-columns: 1fr;
}
:where(.myasar-internal-content) .navbar-menu{
display: none;
}
:where(.myasar-internal-content) .hero-buttons{
flex-direction: column;
width: 100%;
}
:where(.myasar-internal-content) .btn-modern{
width: 100%;
justify-content: center;
}}
@keyframes myasar-internal-fadeIn{
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.myasar-internal-content) .fade-in{
animation: myasar-internal-fadeIn 0.8s ease forwards;
}
:where(.myasar-internal-content) .text-gradient{
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: #eaade1;
background-clip: text;
}
:where(.myasar-internal-content) .bg-gradient-primary{
background: var(--primary-gradient);
}
:where(.myasar-internal-content) .bg-gradient-success{
background: var(--success-gradient);
}
:where(.myasar-internal-content) .shadow-sm{
box-shadow: var(--shadow-sm);
}
:where(.myasar-internal-content) .shadow-md{
box-shadow: var(--shadow-md);
}
:where(.myasar-internal-content) .shadow-lg{
box-shadow: var(--shadow-lg);
}
:where(.myasar-internal-content) .shadow-xl{
box-shadow: var(--shadow-xl);
}
:where(.myasar-internal-content) .login-page{
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
/* position: relative; */
}
:where(.myasar-internal-content) .login-page-content{
width: 100%;
padding: 40px 24px 60px;
}
:where(.myasar-internal-content) .login-page::before{
content: '';
position: absolute;
width: 800px;
/* height: 800px; */
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
top: -300px;
/* left: -300px; */
/* animation: myasar-internal-float 25s ease-in-out infinite; */
}
:where(.myasar-internal-content) .login-page::after{
content: '';
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
/* bottom: -200px; */
right: -200px;
}
:where(.myasar-internal-content) .login-container{
width: 100%;
max-width: 480px;
padding: 24px;
position: relative;
z-index: 10;
}
:where(.myasar-internal-content) .login-card{
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: var(--border-radius-xl);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
:where(.myasar-internal-content) .login-header{
background: var(--primary-gradient);
color: white;
padding: 36px 32px 28px;
text-align: center;
border-radius: var(--radius-xl);
}
:where(.myasar-internal-content) .login-header::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: white;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
:where(.myasar-internal-content) .quran-icon{
animation: myasar-internal-fadeIn 0.8s ease 0.3s both;
}
:where(.myasar-internal-content) .login-header h1{
font-size: 2rem;
font-weight: 900;
margin-bottom: 8px;
color: white;
animation: myasar-internal-slideDown 0.6s ease 0.2s both;
}
:where(.myasar-internal-content) .login-header p{
font-size: 1.05rem;
animation: myasar-internal-fadeIn 0.8s ease 0.4s both;
}
:where(.myasar-internal-content) .login-body{
padding: 32px 32px 36px;
}
:where(.myasar-internal-content) .login-body .form-label{
color: var(--text-dark);
font-size: 1rem;
margin-bottom: 10px;
display: block;
}
:where(.myasar-internal-content) .login-body .form-control{
padding: 14px 18px;
font-size: 1.05rem;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-sm);
transition: var(--transition-fast);
}
:where(.myasar-internal-content) .login-body .form-control:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .login-body .btn-primary{
padding: 16px;
font-size: 1.15rem;
font-weight: 700;
border-radius: var(--border-radius-md);
background: var(--primary-gradient);
border: none;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .login-body .btn-primary::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
:where(.myasar-internal-content) .login-body .btn-primary:hover::before{
left: 100%;
}
:where(.myasar-internal-content) .login-body .btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .eye-icon{
z-index: 10;
color: var(--text-muted);
font-size: 1.2rem;
margin-top: 32px;
}
:where(.myasar-internal-content) .eye-icon:hover{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .login-footer-text{
text-align: center;
color: white;
margin-top: 28px;
font-size: 0.95rem;
opacity: 0.9;
}
:where(.myasar-internal-content) .success-toast{
position: fixed;
top: 100px;
right: 30px;
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
padding: 20px 28px;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-xl);
display: flex;
align-items: center;
gap: 16px;
z-index: 9999;
animation: myasar-internal-slideInRight 0.5s ease, myasar-internal-slideOutRight 0.5s ease 4s forwards;
min-width: 320px;
}
:where(.myasar-internal-content) .success-toast .icon{
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .success-toast .content h5{
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 4px;
color: white;
}
:where(.myasar-internal-content) .success-toast .content p{
font-size: 0.95rem;
margin: 0;
opacity: 0.95;
}
:where(.myasar-internal-content) .success-toast .close-btn{
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
margin-right: auto;
opacity: 0.8;
transition: var(--transition-fast);
}
:where(.myasar-internal-content) .success-toast .close-btn:hover{
opacity: 1;
transform: rotate(90deg);
}
@keyframes myasar-internal-slideInRight{
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes myasar-internal-slideOutRight{
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
:where(.myasar-internal-content) .login-body .alert-danger{
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border: none;
border-radius: var(--border-radius-md);
padding: 16px 20px;
font-weight: 600;
animation: myasar-internal-shake 0.5s ease;
}
:where(.myasar-internal-content) .login-body .alert-danger .btn-close{
filter: brightness(0) invert(1);
}
@keyframes myasar-internal-shake{
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
75% {
transform: translateX(10px);
}
}
:where(.myasar-internal-content) .modal-content{
border-radius: var(--border-radius-lg);
border: none;
box-shadow: var(--shadow-xl);
}
:where(.myasar-internal-content) .modal-header{
background: var(--primary-gradient);
color: white;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
padding: 24px 28px;
}
:where(.myasar-internal-content) .modal-header .modal-title{
font-weight: 700;
font-size: 1.3rem;
color: white;
}
:where(.myasar-internal-content) .modal-header .btn-close{
filter: brightness(0) invert(1);
}
:where(.myasar-internal-content) .modal-body{
padding: 32px 28px;
}
:where(.myasar-internal-content) .modal-footer{
padding: 20px 28px;
border-top: 1px solid var(--border-color);
}
@media (max-width: 768px){:where(.myasar-internal-content) .login-page-content{
padding: 60px 0px 80px;
}
:where(.myasar-internal-content) .login-container{
max-width: 100%;
padding: 5px;
}
:where(.myasar-internal-content) .login-header{
padding: 28px 20px 24px;
}
:where(.myasar-internal-content) .login-body{
padding: 24px 20px 28px;
}
:where(.myasar-internal-content) .success-toast{
right: 16px;
left: 16px;
min-width: auto;
}}
body.login-page::before :where(.myasar-internal-content),
body.login-page::after :where(.myasar-internal-content){
pointer-events: none;
z-index: 0;
}
body.login-page :where(.myasar-internal-content) .login-page-content,
body.login-page :where(.myasar-internal-content) .login-card{
position: relative;
z-index: 1;
}
@keyframes myasar-internal-fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes myasar-internal-modalSlideIn{
0% {
opacity: 0;
transform: scale(0.7) translateY(-50px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes myasar-internal-slideDown{
from {
opacity: 0;
transform: translateY(-15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes myasar-internal-popIn{
0% {
opacity: 0;
transform: scale(0.5) translateY(-20px);
}
50% {
transform: scale(1.05) translateY(0);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes myasar-internal-pulse{
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes myasar-internal-shimmer{
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
:where(.myasar-internal-content) .header-actions-container{
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
border-radius: 50px;
padding: 4px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
}
:where(.myasar-internal-content) .header-actions-container::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb, 102, 126, 234), 0.1), transparent);
background-size: 200% 100%;
animation: myasar-internal-shimmer 3s infinite;
opacity: 0;
transition: opacity 0.3s;
}
:where(.myasar-internal-content) .header-actions-container:hover::before{
opacity: 1;
}
:where(.myasar-internal-content) .header-actions-container:hover{
border-color: var(--myasar-theme-primary);
box-shadow: 0 8px 30px rgba(var(--primary-color-rgb, 102, 126, 234), 0.25);
transform: translateY(-2px);
}
:where(.myasar-internal-content) .header-icon-btn{
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
:where(.myasar-internal-content) .header-icon-btn:hover{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
transform: scale(1.1);
}
:where(.myasar-internal-content) .header-icon-btn:hover i{
color: #fff !important;
transform: scale(1.15);
}
:where(.myasar-internal-content) .header-icon-btn i{
font-size: 1.3rem;
color: var(--myasar-theme-primary);
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .header-divider{
width: 1px;
height: 32px;
background: linear-gradient(to bottom, transparent, rgba(var(--primary-color-rgb, 102, 126, 234), 0.3), transparent);
margin: 0 4px;
}
:where(.myasar-internal-content) .header-badge{
position: absolute;
top: 2px;
right: 2px;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
border: 2px solid #fff;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
animation: myasar-internal-pulse 2s infinite;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5);
}
:where(.myasar-internal-content) .modern-dropdown-menu{
display: none;
position: fixed;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 0;
z-index: 20000;
box-sizing: border-box;
min-width: min(320px, calc(100vw - 60px));
max-width: min(450px, calc(100vw - 60px));
max-height: calc(100vh - 60px);
overflow: auto;
opacity: 0;
pointer-events: none;
transform-origin: center center;
transform: scale(0.94) translateY(-8px);
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.26s ease;
will-change: transform, opacity;
}
:where(.myasar-internal-content) .dropdown-backdrop{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 10000;
cursor: pointer;
}
:where(.myasar-internal-content) .dropdown-backdrop.active{
display: block;
animation: myasar-internal-fadeIn 0.25s ease;
}
:where(.myasar-internal-content) .modern-dropdown-inner{
border-radius: 20px;
overflow: hidden;
background: #ffffff;
}
:where(.myasar-internal-content) .modern-dropdown-menu.active{
display: block;
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
animation: none;
}
:where(.myasar-internal-content) .modern-dropdown-menu.show{
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: auto;
}
:where(.myasar-internal-content) .modern-dropdown-menu::before{
display: none !important;
}
:where(.myasar-internal-content) .dropdown-header-modern{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
padding: 24px;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 1.15rem;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .dropdown-header-modern i{
font-size: 1.5rem;
margin-left: 8px;
}
:where(.myasar-internal-content) .dropdown-header-modern::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.3);
}
:where(.myasar-internal-content) .dropdown-body-modern{
padding: 28px;
background: #ffffff;
}
:where(.myasar-internal-content) .cart-summary-box{
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-radius: 16px;
padding: 24px;
text-align: center;
margin-bottom: 24px;
position: relative;
border: 2px solid #a7f3d0;
}
:where(.myasar-internal-content) .cart-summary-box .icon-overlay{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 6rem;
opacity: 0.08;
}
:where(.myasar-internal-content) .cart-total-amount{
font-size: 2.2rem;
font-weight: 900;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 12px 0;
text-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
}
:where(.myasar-internal-content) .modern-input-group{
position: relative;
margin-bottom: 18px;
}
:where(.myasar-internal-content) .modern-input-group input{
border: 2px solid #e5e7eb;
border-radius: 14px;
padding: 14px 18px 14px 48px;
transition: all 0.3s ease;
font-size: 0.95rem;
background: #f9fafb;
}
:where(.myasar-internal-content) .modern-input-group input:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 5px rgba(var(--primary-color-rgb, 102, 126, 234), 0.12);
outline: none;
background: #fff;
}
:where(.myasar-internal-content) .modern-input-group i{
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--myasar-theme-primary);
font-size: 1.15rem;
z-index: 1;
}
:where(.myasar-internal-content) .btn-modern-primary,
:where(.myasar-internal-content) .btn-modern-success{
border: none;
border-radius: 14px;
padding: 15px;
font-weight: 700;
color: #fff;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .btn-modern-primary{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
box-shadow: 0 6px 20px rgba(var(--primary-color-rgb, 102, 126, 234), 0.35);
}
:where(.myasar-internal-content) .btn-modern-success{
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}
:where(.myasar-internal-content) .btn-modern-primary:hover,
:where(.myasar-internal-content) .btn-modern-success:hover{
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(var(--primary-color-rgb, 102, 126, 234), 0.5);
color: #fff;
}
:where(.myasar-internal-content) .dropdown-footer-link{
padding: 20px;
background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
text-align: center;
}
:where(.myasar-internal-content) .dropdown.show .header-icon-btn{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
}
:where(.myasar-internal-content) .dropdown.show .header-icon-btn i{
color: #fff !important;
}
:where(.myasar-internal-content) .jobs-hero-section{
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(233, 67, 197, 0.1) 100%);
border-radius: 24px;
padding: 60px 40px;
margin-bottom: 50px;
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .jobs-hero-section::before{
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
border-radius: 50%;
animation: myasar-internal-pulseGlow 4s ease-in-out infinite;
}
:where(.myasar-internal-content) .jobs-hero-section::after{
content: "";
position: absolute;
bottom: -30%;
left: -5%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(233, 67, 197, 0.08) 0%, transparent 70%);
border-radius: 50%;
animation: myasar-internal-pulseGlow 5s ease-in-out infinite;
}
@keyframes myasar-internal-pulseGlow{
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
:where(.myasar-internal-content) .jobs-hero-content{
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .jobs-hero-title{
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .jobs-hero-description{
font-size: 1.2rem;
color: var(--text-dark);
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}
:where(.myasar-internal-content) .job-card{
background: #ffffff;
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(102, 126, 234, 0.08);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.08);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
:where(.myasar-internal-content) .job-card::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
:where(.myasar-internal-content) .job-card:hover::before{
transform: scaleX(1);
}
:where(.myasar-internal-content) .job-card:hover{
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.2);
}
:where(.myasar-internal-content) .job-card-image{
width: 100%;
height: 220px;
object-fit: contain;
transition: transform 0.3s ease;
position: relative;
z-index: 2;
}
:where(.myasar-internal-content) .job-card:hover .job-card-image{
transform: scale(1.02);
}
:where(.myasar-internal-content) .job-card-image-wrapper{
overflow: hidden;
position: relative;
background: #f5f7fa;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
}
:where(.myasar-internal-content) .job-card-image-bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(12px) brightness(0.95);
opacity: 1.85;
transform: scale(1.1);
z-index: 1;
}
:where(.myasar-internal-content) .job-card-body{
padding: 28px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
:where(.myasar-internal-content) .job-card-title{
font-size: 1.4rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 16px;
line-height: 1.4;
transition: color 0.3s ease;
}
:where(.myasar-internal-content) .job-card:hover .job-card-title{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .job-card-excerpt{
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 20px;
flex-grow: 1;
}
:where(.myasar-internal-content) .job-card-meta{
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%);
border-radius: 12px;
margin-bottom: 20px;
}
:where(.myasar-internal-content) .job-card-meta i{
color: var(--myasar-theme-primary);
font-size: 1rem;
}
:where(.myasar-internal-content) .job-card-date{
font-size: 0.88rem;
color: var(--text-muted);
font-weight: 600;
}
:where(.myasar-internal-content) .job-card-footer{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(102, 126, 234, 0.1);
}
:where(.myasar-internal-content) .job-status-badge{
padding: 8px 18px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
:where(.myasar-internal-content) .job-status-badge.status-open{
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
:where(.myasar-internal-content) .job-status-badge.status-closed{
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
:where(.myasar-internal-content) .job-status-badge i{
font-size: 0.7rem;
}
:where(.myasar-internal-content) .job-details-btn{
padding: 10px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
border: none;
color: #fff;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
position: relative;
overflow: hidden;
}
:where(.myasar-internal-content) .job-details-btn::before{
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
:where(.myasar-internal-content) .job-details-btn:hover::before{
left: 100%;
}
:where(.myasar-internal-content) .job-details-btn:hover{
transform: translateX(-3px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.35);
}
:where(.myasar-internal-content) .job-details-wrapper{
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.12);
border: 2px solid rgba(102, 126, 234, 0.08);
}
:where(.myasar-internal-content) .job-details-header{
position: relative;
padding: 50px 40px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(233, 67, 197, 0.05) 100%);
border-bottom: 3px solid rgba(102, 126, 234, 0.1);
text-align: center;
overflow: hidden;
}
:where(.myasar-internal-content) .job-details-header::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
:where(.myasar-internal-content) .job-details-header::after{
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
border-radius: 50%;
animation: myasar-internal-jobHeaderFloat 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes myasar-internal-jobHeaderFloat{
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-30px, -30px) scale(1.1);
}
}
:where(.myasar-internal-content) .job-details-title{
font-size: 2.5rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 0;
position: relative;
z-index: 1;
}
:where(.myasar-internal-content) .job-details-image{
width: 100%;
height: 350px;
object-fit: contain;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
:where(.myasar-internal-content) .job-details-wrapper .job-details-image{
padding: 0;
}
:where(.myasar-internal-content) .job-details-image-container{
position: relative;
width: 100%;
height: 350px;
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
:where(.myasar-internal-content) .job-details-image-bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(12px) brightness(0.95);
opacity: 1;
transform: scale(1.1);
z-index: 1;
}
:where(.myasar-internal-content) .job-details-image-effects{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
}
:where(.myasar-internal-content) .job-shimmer-overlay{
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
animation: myasar-internal-jobShimmer 4s ease-in-out infinite;
transform: skewX(-25deg);
}
@keyframes myasar-internal-jobShimmer{
0% {
left: -100%;
}
100% {
left: 150%;
}
}
:where(.myasar-internal-content) .job-glow-effect{
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(102, 126, 234, 0.1) 0%,
rgba(102, 126, 234, 0.05) 40%,
transparent 70%);
animation: myasar-internal-jobGlowPulse 3s ease-in-out infinite;
border-radius: 50%;
}
@keyframes myasar-internal-jobGlowPulse{
0%,
100% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1.05);
}
}
:where(.myasar-internal-content) .job-details-content{
padding: 40px;
}
:where(.myasar-internal-content) .job-section-title{
font-size: 1.3rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 3px solid var(--myasar-theme-primary);
display: inline-block;
position: relative;
}
:where(.myasar-internal-content) .job-section-title::after{
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 50%;
height: 3px;
background: var(--myasar-theme-secondary);
}
:where(.myasar-internal-content) .job-section-text{
color: var(--text-dark);
font-size: 1.05rem;
line-height: 2;
margin-bottom: 30px;
white-space: pre-line;
}
:where(.myasar-internal-content) .job-apply-info-card{
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.1);
border: 2px solid rgba(102, 126, 234, 0.08);
margin-bottom: 25px;
}
:where(.myasar-internal-content) .job-apply-info-title{
font-size: 1.4rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
:where(.myasar-internal-content) .job-apply-info-title i{
color: var(--myasar-theme-primary);
font-size: 1.6rem;
}
:where(.myasar-internal-content) .job-info-item{
background: #ffffff;
padding: 18px 22px;
border-radius: 14px;
margin-bottom: 16px;
border: 1px solid rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
}
:where(.myasar-internal-content) .job-info-item:hover{
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.08);
border-color: rgba(102, 126, 234, 0.2);
}
:where(.myasar-internal-content) .job-info-label{
font-weight: 700;
color: var(--text-dark);
font-size: 0.95rem;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
:where(.myasar-internal-content) .job-info-label i{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .job-info-value{
color: var(--text-muted);
font-size: 0.95rem;
}
:where(.myasar-internal-content) .job-status-alert{
padding: 18px 24px;
border-radius: 14px;
font-weight: 600;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1.05rem;
}
:where(.myasar-internal-content) .job-status-alert.alert-success{
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 2px solid #6ee7b7;
}
:where(.myasar-internal-content) .job-status-alert.alert-danger{
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
border: 2px solid #fca5a5;
}
:where(.myasar-internal-content) .job-status-alert i{
font-size: 1.3rem;
}
:where(.myasar-internal-content) .job-apply-form-card{
background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 35px rgba(102, 126, 234, 0.12);
border: 2px solid rgba(102, 126, 234, 0.08);
}
:where(.myasar-internal-content) .job-apply-form-title{
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
:where(.myasar-internal-content) .job-apply-form-title i{
color: var(--myasar-theme-secondary);
font-size: 1.7rem;
}
:where(.myasar-internal-content) .job-requirements-box{
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 16px;
padding: 22px 26px;
margin-bottom: 25px;
border: 2px solid #fbbf24;
}
:where(.myasar-internal-content) .job-requirements-title{
font-weight: 700;
color: #78350f;
font-size: 1.05rem;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
:where(.myasar-internal-content) .job-requirements-title i{
font-size: 1.2rem;
}
:where(.myasar-internal-content) .job-requirements-list{
list-style: none;
padding: 0;
margin: 0;
}
:where(.myasar-internal-content) .job-requirements-list li{
padding: 8px 0;
color: #78350f;
font-size: 0.95rem;
display: flex;
align-items: start;
gap: 10px;
}
:where(.myasar-internal-content) .job-requirements-list li::before{
content: "✓";
color: #f59e0b;
font-weight: 900;
font-size: 1.2rem;
flex-shrink: 0;
}
:where(.myasar-internal-content) .job-form-group{
margin-bottom: 24px;
}
:where(.myasar-internal-content) .job-form-label{
font-weight: 700;
color: var(--text-dark);
font-size: 0.98rem;
margin-bottom: 10px;
display: block;
}
:where(.myasar-internal-content) .job-form-control{
width: 100%;
padding: 14px 18px;
border: 2px solid rgba(102, 126, 234, 0.15);
border-radius: 12px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #ffffff;
}
:where(.myasar-internal-content) .job-form-control:focus{
outline: none;
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
background: #ffffff;
}
:where(.myasar-internal-content) .job-form-control::placeholder{
color: #9ca3af;
}
:where(.myasar-internal-content) .job-form-text{
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
}
:where(.myasar-internal-content) .job-form-text i{
color: var(--info-color);
}
:where(.myasar-internal-content) .job-submit-btn{
width: 100%;
padding: 16px 28px;
border-radius: 14px;
font-weight: 700;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
border: none;
color: #fff;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
cursor: pointer;
}
:where(.myasar-internal-content) .job-submit-btn::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
:where(.myasar-internal-content) .job-submit-btn:hover::before{
width: 300px;
height: 300px;
}
:where(.myasar-internal-content) .job-submit-btn:hover{
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}
:where(.myasar-internal-content) .job-submit-btn:active{
transform: translateY(0);
}
:where(.myasar-internal-content) .job-alert{
padding: 18px 24px;
border-radius: 14px;
margin-bottom: 25px;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
:where(.myasar-internal-content) .job-alert i{
font-size: 1.4rem;
}
:where(.myasar-internal-content) .job-alert-success{
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 2px solid #6ee7b7;
}
:where(.myasar-internal-content) .job-alert-warning{
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #78350f;
border: 2px solid #fbbf24;
}
:where(.myasar-internal-content) .job-alert-info{
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e3a8a;
border: 2px solid #93c5fd;
}
@media (max-width: 768px){:where(.myasar-internal-content) .jobs-hero-title{
font-size: 2rem;
}
:where(.myasar-internal-content) .jobs-hero-description{
font-size: 1rem;
}
:where(.myasar-internal-content) .jobs-hero-section{
padding: 40px 25px;
}
:where(.myasar-internal-content) .job-card-body{
padding: 20px;
}
:where(.myasar-internal-content) .job-details-title{
font-size: 1.8rem;
}
:where(.myasar-internal-content) .job-details-content{
padding: 25px;
}
:where(.myasar-internal-content) .job-apply-form-card,
:where(.myasar-internal-content) .job-apply-info-card{
padding: 25px;
}}
:where(.myasar-internal-content) .page_cover_image{
display: block;
width: 100%;
max-width: 100%;
height: 380px;
margin: 30px auto;
object-fit: contain;
object-position: center;
}
:where(.myasar-internal-content) .smart-block-slider{
direction: ltr;
}
:where(.myasar-internal-content) a[href="policies.php"].btn-outline-secondary,
:where(.myasar-internal-content) a[href="reports.php"].btn-outline-secondary{
background-color: #fff !important;
border-color: #6c757d !important;
color: #333 !important;
}
:where(.myasar-internal-content) a[href="policies.php"].btn-outline-secondary:hover,
:where(.myasar-internal-content) a[href="reports.php"].btn-outline-secondary:hover{
background-color: #e2e6ea !important;
color: #000 !important;
border-color: #adb5bd !important;
}
:where(.myasar-internal-content) .page-tag-link{
color: inherit !important;
text-decoration: none !important;
}
:where(.myasar-internal-content) .page-section-layout{
margin-block: clamp(24px, 4vw, 56px) clamp(56px, 7vw, 96px);
padding-block: clamp(28px, 4vw, 52px) !important;
min-height: 55vh;
}
:where(.myasar-internal-content) .page-section-heading{
margin-bottom: 28px !important;
text-align: start !important;
}
:where(.myasar-internal-content) .page-section-heading h1{
margin: 0 0 10px;
color: #1e293b;
font-size: clamp(2.25rem, 4vw, 3.35rem) !important;
line-height: 1.2;
font-weight: 900;
text-align: start !important;
}
:where(.myasar-internal-content) .page-section-heading p{
max-width: 760px;
margin-inline: 0;
color: #64748b;
text-align: start;
}
:where(.myasar-internal-content) .page-section-filter-bar{
position: relative;
display: flex;
align-items: flex-end;
gap: 14px;
margin: 0 auto 36px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(102, 126, 234, .18);
border-radius: 20px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 14px 38px rgba(15, 23, 42, .09);
}
:where(.myasar-internal-content) .page-section-filter-bar::before{
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
}
:where(.myasar-internal-content) .page-filter-control{
display: grid;
flex: 1;
min-width: 180px;
gap: 7px;
margin: 0;
}
:where(.myasar-internal-content) .page-filter-control > span{
display: flex;
align-items: center;
gap: 7px;
color: #475569;
font-size: .84rem;
font-weight: 800;
}
:where(.myasar-internal-content) .page-filter-control > span i{
color: var(--myasar-theme-primary);
}
:where(.myasar-internal-content) .page-filter-control .form-select{
min-height: 46px;
border: 1px solid rgba(102, 126, 234, .25);
border-radius: 13px;
background-color: #fff;
color: #1e293b;
font-weight: 700;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:where(.myasar-internal-content) .page-filter-control .form-select:hover,
:where(.myasar-internal-content) .page-filter-control .form-select:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, .1);
transform: translateY(-1px);
}
:where(.myasar-internal-content) .page-filter-reset{
min-height: 46px;
padding: .7rem 1.1rem;
border: 0;
border-radius: 13px;
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary)) !important;
color: #fff !important;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
transition: transform .2s ease, box-shadow .2s ease;
}
:where(.myasar-internal-content) .page-filter-reset:hover{
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(15, 23, 42, .18);
}
:where(.myasar-internal-content) .page-filter-results{
padding-bottom: .75rem;
color: #64748b;
font-size: .84rem;
font-weight: 800;
white-space: nowrap;
}
:where(.myasar-internal-content) .page-section-empty-filter{
display: none;
margin-bottom: 28px;
padding: 2rem;
border-radius: 16px;
background: #fff;
color: #64748b;
text-align: center;
}
:where(.myasar-internal-content) .page-section-pages.row{
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch;
margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}
:where(.myasar-internal-content) .page-section-pages > .page-showcase-item{
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
:where(.myasar-internal-content) .page-section-card{
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, .2);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
transition: transform .25s ease, box-shadow .25s ease;
height: auto !important;
min-height: 0 !important;
}
:where(.myasar-internal-content) .page-section-card:hover{
transform: translateY(-5px);
box-shadow: 0 18px 42px rgba(15, 23, 42, .13);
}
:where(.myasar-internal-content) .page-section-card-cover{
display: block;
height: 210px !important;
min-height: 0 !important;
background-color: #eef2ff;
background-position: center;
background-size: cover;
}
:where(.myasar-internal-content) .page-section-card-body{
display: flex;
flex: 1;
flex-direction: column;
padding: 1.35rem;
}
:where(.myasar-internal-content) .page-section-card-meta{
margin-bottom: .55rem;
color: #64748b;
font-size: .8rem;
font-weight: 700;
}
:where(.myasar-internal-content) .page-section-card h2{
font-size: 1.2rem;
line-height: 1.5;
font-weight: 900;
}
:where(.myasar-internal-content) .page-section-card h2 a{
color: #1e293b;
text-decoration: none;
}
:where(.myasar-internal-content) .page-section-card-body > p{
color: #64748b;
line-height: 1.8;
}
:where(.myasar-internal-content) .page-section-card .page-public-tags{
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 1rem;
}
:where(.myasar-internal-content) .page-section-card .page-public-tags span{
display: inline-flex;
padding: .32rem .7rem;
border: 1px solid rgba(102, 126, 234, .25);
border-radius: 999px;
background: #fff;
color: #3730a3;
font-size: .76rem;
font-weight: 700;
}
:where(.myasar-internal-content) .page-section-card-link{
display: inline-flex !important;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: auto;
padding: .65rem 1.1rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary)) !important;
color: #fff !important;
text-decoration: none;
font-weight: 800;
}
:where(.myasar-internal-content) .page-section-card-link:hover{
color: #fff !important;
transform: translateY(-2px);
}
@media (min-width: 768px){:where(.myasar-internal-content) .page-section-pages > .page-showcase-item{
flex-basis: 50% !important;
width: 50% !important;
max-width: 50% !important;
}}
@media (min-width: 1200px){:where(.myasar-internal-content) .page-section-pages > .page-showcase-item{
flex-basis: 33.333333% !important;
width: 33.333333% !important;
max-width: 33.333333% !important;
}}
@media (max-width: 900px){:where(.myasar-internal-content) .page-section-filter-bar{
flex-wrap: wrap;
}
:where(.myasar-internal-content) .page-filter-control{
min-width: calc(50% - 7px);
}
:where(.myasar-internal-content) .page-filter-results{
margin-inline-start: auto;
}}
@media (max-width: 576px){:where(.myasar-internal-content) .page-section-layout{
margin-block: 18px 48px;
padding-block: 24px !important;
}
:where(.myasar-internal-content) .page-filter-control,
:where(.myasar-internal-content) .page-filter-reset,
:where(.myasar-internal-content) .page-filter-results{
width: 100%;
min-width: 100%;
}
:where(.myasar-internal-content) .page-filter-results{
padding: 0;
text-align: center;
}}
body.login-page :where(.myasar-internal-content){
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%) !important;
display: block !important;
min-height: 100vh;
min-height: 100svh;
overflow-x: hidden;
overflow-y: auto;
padding: 0 !important;
position: relative;
}
body.login-page :where(.myasar-internal-content) .login-page-content{
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100svh;
width: 100%;
padding: 24px;
box-sizing: border-box;
background: transparent !important;
}
@supports (min-height: 100dvh){body.login-page :where(.myasar-internal-content),
body.login-page :where(.myasar-internal-content) .login-page-content{
min-height: 100dvh;
}}
body.login-page :where(.myasar-internal-content) > .container:first-child{
display: none;
}
body.login-page :where(.myasar-internal-content) .login-page-content > .container{
width: 100%;
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
body.login-page :where(.myasar-internal-content) .login-footer-text p{
color: rgba(255, 255, 255, 0.9) !important;
}
body.login-page :where(.myasar-internal-content) .login-logo-img{
max-height: 70px;
max-width: 100%;
width: auto;
height: auto;
display: block;
object-fit: contain;
filter: none !important;
}
body.login-page :where(.myasar-internal-content) .login-logo-frame{
max-width: min(280px, 100%);
min-height: 70px;
padding: 10px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background-color: var(--login-logo-background, transparent);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
body.login-page :where(.myasar-internal-content) .login-container{
width: 100%;
max-width: 560px;
min-height: 0;
margin: 0 auto;
padding: 0;
}
body.login-page :where(.myasar-internal-content) .login-card{
margin-inline: auto;
border-radius: 18px;
box-shadow: 0 22px 48px color-mix(in srgb, var(--myasar-theme-primary) 22%, transparent);
overflow: hidden;
}
body.login-page :where(.myasar-internal-content) .login-header{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
padding: 24px 30px 22px;
border-radius: 18px 18px 0 0;
}
body.login-page :where(.myasar-internal-content) .login-header::after{
display: none;
}
body.login-page :where(.myasar-internal-content) .quran-icon{
font-size: 2.1rem;
margin-bottom: 8px !important;
}
body.login-page :where(.myasar-internal-content) .login-logo-img{
max-height: 58px;
}
body.login-page :where(.myasar-internal-content) .login-logo-frame{
min-height: 58px;
padding: 9px 16px;
}
body.login-page :where(.myasar-internal-content) .login-header h1{
font-size: 1.42rem;
line-height: 1.35;
margin-bottom: 4px;
}
body.login-page :where(.myasar-internal-content) .login-header p{
font-size: 0.92rem;
opacity: 0.9;
}
body.login-page :where(.myasar-internal-content) .login-body{
padding: 26px 30px 30px;
}
body.login-page :where(.myasar-internal-content) .login-body .mb-4{
margin-bottom: 1rem !important;
}
body.login-page :where(.myasar-internal-content) .login-body .form-label{
font-size: 0.92rem;
margin-bottom: 6px;
color: var(--myasar-theme-primary);
}
body.login-page :where(.myasar-internal-content) .login-body .form-label .bi{
color: var(--myasar-theme-primary) !important;
font-size: 0.95rem;
}
body.login-page :where(.myasar-internal-content) .login-body .form-control{
min-height: 46px;
padding: 10px 14px;
border-radius: 11px;
font-size: 0.96rem;
border: 1px solid color-mix(in srgb, var(--myasar-theme-primary) 18%, #e7edf1);
}
body.login-page :where(.myasar-internal-content) .login-body .form-control:focus{
border-color: var(--myasar-theme-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--myasar-theme-primary) 16%, transparent);
}
body.login-page :where(.myasar-internal-content) .login-body .btn-primary,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-primary,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-secondary{
min-height: 44px;
padding: 10px 14px;
border-radius: 11px;
font-size: 0.98rem;
font-weight: 700;
}
body.login-page :where(.myasar-internal-content) .login-body .btn-primary{
background: linear-gradient(135deg, var(--myasar-theme-primary) 0%, var(--myasar-theme-secondary) 100%);
box-shadow: 0 10px 22px color-mix(in srgb, var(--myasar-theme-primary) 18%, transparent);
}
body.login-page :where(.myasar-internal-content) .login-body .btn-primary:hover{
transform: translateY(-1px);
box-shadow: 0 12px 26px color-mix(in srgb, var(--myasar-theme-primary) 24%, transparent);
}
body.login-page :where(.myasar-internal-content) .login-body .btn-primary i,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-primary i,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-secondary i{
font-size: 1rem;
}
body.login-page :where(.myasar-internal-content) .login-method-tabs{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 14px;
padding: 5px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.05);
}
body.login-page :where(.myasar-internal-content) .login-method-tab{
border: 0;
min-height: 42px;
padding: 8px 12px;
border-radius: 11px;
background: transparent;
color: #536174;
font-size: 0.9rem;
font-weight: 800;
transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
body.login-page :where(.myasar-internal-content) .login-method-tab.is-active{
background: #ffffff;
color: var(--myasar-theme-primary);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
body.login-page :where(.myasar-internal-content) .login-method-panel{
display: none;
}
body.login-page :where(.myasar-internal-content) .login-method-panel.is-active{
display: block;
}
body.login-page :where(.myasar-internal-content) .phone-login-panel{
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body.login-page :where(.myasar-internal-content) .phone-login-panel__box,
body.login-page :where(.myasar-internal-content) .auth-slider-captcha{
padding: 12px;
border-radius: 13px;
}
body.login-page :where(.myasar-internal-content) .phone-login-panel__box{
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.08);
}
body.login-page :where(.myasar-internal-content) .phone-login-panel__divider{
display: flex;
align-items: center;
gap: 10px;
margin: 22px 0;
color: #6b7280;
font-weight: 700;
font-size: 0.92rem;
}
body.login-page :where(.myasar-internal-content) .phone-login-panel__divider::before,
body.login-page :where(.myasar-internal-content) .phone-login-panel__divider::after{
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(15, 23, 42, 0.1);
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha{
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__frame{
position: relative;
width: 100%;
max-width: 280px;
height: 138px;
margin: 0 auto;
overflow: hidden;
border-radius: 12px;
background: #e5eef6;
user-select: none;
touch-action: none;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__image,
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__piece{
display: block;
user-select: none;
-webkit-user-drag: none;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__image{
width: 100%;
height: 100%;
object-fit: cover;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__piece{
position: absolute;
left: 0;
top: 0;
cursor: grab;
filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.22));
transition: transform 120ms ease;
z-index: 2;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha.is-dragging .auth-slider-captcha__piece{
cursor: grabbing;
transition: none;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__hint{
margin-top: 10px;
font-size: 0.9rem;
color: #5b6473;
text-align: center;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__track{
position: relative;
height: 42px;
margin-top: 12px;
border-radius: 999px;
background: linear-gradient(180deg, #eef4fb, #dde8f4);
border: 1px solid rgba(15, 23, 42, 0.08);
overflow: hidden;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__fill{
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(135deg, rgba(21, 58, 78, 0.2), rgba(27, 88, 101, 0.28));
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha__handle{
position: absolute;
top: 4px;
left: 4px;
width: 48px;
height: 32px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--myasar-theme-primary), var(--myasar-theme-secondary));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
cursor: grab;
touch-action: none;
z-index: 2;
}
body.login-page :where(.myasar-internal-content) .auth-slider-captcha.is-dragging .auth-slider-captcha__handle{
cursor: grabbing;
}
body.login-page :where(.myasar-internal-content) .eye-icon{
font-size: 1rem;
color: var(--myasar-theme-primary);
}
body.login-page :where(.myasar-internal-content) .phone-login-status{
display: none;
margin-top: 12px;
font-size: 0.92rem;
border-radius: 14px;
padding: 10px 12px;
}
body.login-page :where(.myasar-internal-content) .phone-login-status.is-info{
display: block;
background: rgba(37, 99, 235, 0.08);
color: #1d4ed8;
}
body.login-page :where(.myasar-internal-content) .phone-login-status.is-success{
display: block;
background: rgba(22, 163, 74, 0.08);
color: #15803d;
}
body.login-page :where(.myasar-internal-content) .phone-login-status.is-error{
display: block;
background: rgba(220, 38, 38, 0.08);
color: #b91c1c;
}
body.login-page :where(.myasar-internal-content) #adminPhoneLoginRecaptcha{
min-height: 4px;
}
body.login-page::before :where(.myasar-internal-content),
body.login-page::after :where(.myasar-internal-content){
display: none !important;
}
body.login-page :where(.myasar-internal-content) .public-sales-chat-toggle,
body.login-page :where(.myasar-internal-content) .ts-chat-toggle,
body.login-page :where(.myasar-internal-content) .unified-chat-toggle{
bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--qs-protected-copyright-offset, 0px));
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher__stack{
width: auto;
max-width: calc(100vw - 32px);
justify-items: end;
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher__action{
width: auto;
min-width: 150px;
max-width: calc(100vw - 32px);
justify-content: flex-start;
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher__action--icon-only{
width: 54px;
min-width: 54px;
justify-content: center;
}
@media (max-width: 575.98px){body.login-page :where(.myasar-internal-content) .login-page-content{
padding: 14px 12px;
align-items: center;
}
body.login-page :where(.myasar-internal-content) .login-container{
max-width: 100%;
padding: 0;
}
body.login-page :where(.myasar-internal-content) .login-card{
border-radius: 16px;
}
body.login-page :where(.myasar-internal-content) .login-header{
padding: 18px 16px 16px;
border-radius: 16px 16px 0 0;
}
body.login-page :where(.myasar-internal-content) .login-body{
padding: 18px 16px 20px;
}
body.login-page :where(.myasar-internal-content) .login-header h1{
font-size: 1.22rem;
}
body.login-page :where(.myasar-internal-content) .login-logo-frame{
min-height: 50px;
padding: 7px 12px;
max-width: min(230px, 100%);
}
body.login-page :where(.myasar-internal-content) .login-logo-img{
max-height: 50px;
}
body.login-page :where(.myasar-internal-content) .login-header p{
font-size: 0.86rem;
}
body.login-page :where(.myasar-internal-content) .login-body .mb-4{
margin-bottom: 0.78rem !important;
}
body.login-page :where(.myasar-internal-content) .login-body .form-label{
font-size: 0.88rem;
margin-bottom: 5px;
}
body.login-page :where(.myasar-internal-content) .login-body .form-control{
min-height: 42px;
padding: 8px 12px;
font-size: 0.92rem;
}
body.login-page :where(.myasar-internal-content) .login-body .btn-primary,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-primary,
body.login-page :where(.myasar-internal-content) .login-body .btn-outline-secondary{
min-height: 42px;
padding: 8px 12px;
font-size: 0.94rem;
}
body.login-page :where(.myasar-internal-content) .login-body .text-center.mt-4{
margin-top: 0.95rem !important;
}
body.login-page :where(.myasar-internal-content) .login-body .text-center.mt-3{
margin-top: 0.75rem !important;
}
body.login-page :where(.myasar-internal-content) .public-sales-chat-toggle,
body.login-page :where(.myasar-internal-content) .ts-chat-toggle,
body.login-page :where(.myasar-internal-content) .unified-chat-toggle{
right: 14px;
bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--qs-protected-copyright-offset, 0px));
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher__stack{
right: 14px;
bottom: calc(86px + env(safe-area-inset-bottom, 0px) + var(--qs-protected-copyright-offset, 0px));
width: auto;
max-width: calc(100vw - 28px);
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher__action{
width: auto;
min-width: 138px;
max-width: calc(100vw - 28px);
}
body.login-page :where(.myasar-internal-content) .public-sales-launcher--left .public-sales-launcher__stack{
left: 14px;
right: auto;
justify-items: start;
}}
@media (max-height: 720px){body.login-page :where(.myasar-internal-content) .login-page-content{
align-items: start;
padding-top: 12px;
}
body.login-page :where(.myasar-internal-content) .login-header{
padding-top: 14px;
padding-bottom: 14px;
}
body.login-page :where(.myasar-internal-content) .login-body{
padding-top: 16px;
padding-bottom: 18px;
}}