|
|
|
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200;300;400;500;600;700;800;900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); |
|
|
|
:root { |
|
--primary-color: #0EA5A5; |
|
--primary-light: rgba(14, 165, 165, 0.1); |
|
--primary-dark: #088585; |
|
--primary-gradient: linear-gradient(135deg, #0EA5A5, #088585); |
|
--secondary-color: #FF9A3C; |
|
--secondary-light: rgba(255, 154, 60, 0.1); |
|
--text-dark: #1d2b36; |
|
--text-medium: #3a4f5f; |
|
--text-light: #607d94; |
|
--background-light: #f8f9fa; |
|
--border-color: #e1e5ea; |
|
--danger-color: #e3342f; |
|
--success-color: #38c172; |
|
--warning-color: #f7b731; |
|
--info-color: #3490dc; |
|
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
|
--header-gradient: linear-gradient(120deg, #0EA5A5, #088585); |
|
--sidebar-gradient: linear-gradient(180deg, #1d2b36, #2d3a45); |
|
--border-radius: 10px; |
|
--transition-speed: 0.3s; |
|
} |
|
|
|
|
|
body { |
|
direction: rtl; |
|
text-align: right; |
|
font-family: 'Almarai', 'Tajawal', 'Cairo', sans-serif; |
|
color: var(--text-dark); |
|
background-color: #fafafa; |
|
|
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
text-rendering: optimizeLegibility; |
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-family: 'Almarai', 'Tajawal', 'Cairo', sans-serif; |
|
color: var(--text-dark); |
|
font-weight: 700; |
|
line-height: 1.4; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
|
|
.main-title { |
|
background: var(--primary-gradient); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
font-size: 2.25rem; |
|
font-weight: 800; |
|
text-align: center; |
|
margin: 1.5rem 0; |
|
padding: 0.5rem; |
|
position: relative; |
|
} |
|
|
|
.main-title::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -5px; |
|
left: 30%; |
|
right: 30%; |
|
height: 3px; |
|
background: var(--primary-gradient); |
|
border-radius: 3px; |
|
} |
|
|
|
|
|
.header-container { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 1rem 1.5rem; |
|
background: var(--header-gradient); |
|
border-radius: var(--border-radius); |
|
margin-bottom: 1.5rem; |
|
box-shadow: var(--card-shadow); |
|
color: white; |
|
} |
|
|
|
.header-title { |
|
margin-right: 1.25rem; |
|
} |
|
|
|
.header-title h1 { |
|
margin: 0; |
|
font-size: 1.75rem; |
|
color: white; |
|
font-weight: 800; |
|
} |
|
|
|
.header-title p { |
|
margin: 0.25rem 0 0 0; |
|
font-size: 0.9rem; |
|
color: rgba(255, 255, 255, 0.8); |
|
font-weight: 400; |
|
} |
|
|
|
.header-info { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.date-box { |
|
display: flex; |
|
background-color: rgba(255, 255, 255, 0.2); |
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
color: white; |
|
border-radius: 8px; |
|
padding: 0.5rem 0.75rem; |
|
margin-left: 1rem; |
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
|
backdrop-filter: blur(5px); |
|
} |
|
|
|
.date-day { |
|
font-size: 1.75rem; |
|
font-weight: bold; |
|
margin-left: 0.5rem; |
|
line-height: 1; |
|
} |
|
|
|
.date-info { |
|
display: flex; |
|
flex-direction: column; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.date-month { |
|
font-weight: bold; |
|
line-height: 1.2; |
|
} |
|
|
|
.date-year { |
|
line-height: 1; |
|
} |
|
|
|
|
|
.nav-menu { |
|
background-color: white; |
|
border-radius: var(--border-radius); |
|
padding: 0.5rem; |
|
box-shadow: var(--card-shadow); |
|
margin: 1rem 0; |
|
} |
|
|
|
.nav-menu ul { |
|
display: flex; |
|
list-style: none; |
|
padding: 0; |
|
margin: 0; |
|
justify-content: flex-end; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.nav-menu li { |
|
margin: 0.25rem; |
|
} |
|
|
|
.nav-menu a { |
|
display: flex; |
|
align-items: center; |
|
color: var(--text-medium); |
|
text-decoration: none; |
|
padding: 0.5rem 0.75rem; |
|
border-radius: 6px; |
|
transition: all var(--transition-speed); |
|
font-weight: 500; |
|
border: 1px solid transparent; |
|
} |
|
|
|
.nav-menu a:hover { |
|
background-color: var(--primary-light); |
|
color: var(--primary-color); |
|
border-color: var(--primary-color); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.nav-icon { |
|
margin-left: 0.5rem; |
|
font-size: 1.25rem; |
|
} |
|
|
|
|
|
.module-title { |
|
color: var(--text-dark); |
|
font-size: 1.75rem; |
|
margin-bottom: 1.25rem; |
|
border-right: 4px solid var(--primary-color); |
|
padding-right: 0.75rem; |
|
position: relative; |
|
} |
|
|
|
|
|
.info-card { |
|
background-color: white; |
|
border-radius: var(--border-radius); |
|
padding: 1.5rem; |
|
margin-bottom: 1.25rem; |
|
box-shadow: var(--card-shadow); |
|
border-top: 4px solid var(--primary-color); |
|
transition: transform var(--transition-speed); |
|
} |
|
|
|
.info-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.info-card h3 { |
|
color: var(--text-dark); |
|
margin-top: 0; |
|
margin-bottom: 0.75rem; |
|
font-weight: 700; |
|
} |
|
|
|
.info-card p { |
|
color: var(--text-medium); |
|
margin: 0; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
.dataframe { |
|
width: 100%; |
|
border-collapse: separate; |
|
border-spacing: 0; |
|
margin-bottom: 1.5rem; |
|
border-radius: var(--border-radius); |
|
overflow: hidden; |
|
box-shadow: var(--card-shadow); |
|
} |
|
|
|
.dataframe th { |
|
background-color: var(--primary-color); |
|
color: white; |
|
text-align: right; |
|
padding: 0.75rem 1rem; |
|
font-weight: 600; |
|
border: none; |
|
} |
|
|
|
.dataframe td { |
|
padding: 0.75rem 1rem; |
|
border-bottom: 1px solid var(--border-color); |
|
text-align: right; |
|
background-color: white; |
|
} |
|
|
|
.dataframe tr:last-child td { |
|
border-bottom: none; |
|
} |
|
|
|
.dataframe tr:nth-child(even) td { |
|
background-color: rgba(248, 249, 250, 0.7); |
|
} |
|
|
|
.dataframe tr:hover td { |
|
background-color: var(--primary-light); |
|
} |
|
|
|
|
|
button, .stButton>button { |
|
background: var(--primary-gradient); |
|
color: white; |
|
border: none; |
|
border-radius: 6px; |
|
padding: 0.6rem 1.25rem; |
|
cursor: pointer; |
|
transition: all var(--transition-speed); |
|
font-weight: 600; |
|
font-size: 0.95rem; |
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
button:hover, .stButton>button:hover { |
|
background: var(--primary-dark); |
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); |
|
transform: translateY(-2px); |
|
} |
|
|
|
button:active, .stButton>button:active { |
|
transform: translateY(0); |
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
|
|
.btn-secondary, .stButton.secondary>button { |
|
background: white; |
|
color: var(--primary-color); |
|
border: 1px solid var(--primary-color); |
|
} |
|
|
|
.btn-secondary:hover, .stButton.secondary>button:hover { |
|
background: var(--primary-light); |
|
} |
|
|
|
|
|
.plot-container { |
|
background-color: white; |
|
border-radius: var(--border-radius); |
|
padding: 1rem; |
|
margin: 1.25rem 0; |
|
box-shadow: var(--card-shadow); |
|
} |
|
|
|
|
|
.innovation-card { |
|
background-color: white; |
|
border-radius: var(--border-radius); |
|
padding: 1.5rem; |
|
margin-bottom: 1.25rem; |
|
border-right: 4px solid var(--primary-color); |
|
box-shadow: var(--card-shadow); |
|
transition: transform var(--transition-speed); |
|
} |
|
|
|
.innovation-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.innovation-icon { |
|
font-size: 2rem; |
|
margin-bottom: 0.75rem; |
|
background: var(--primary-gradient); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.innovation-card h3 { |
|
color: var(--text-dark); |
|
margin-bottom: 0.75rem; |
|
font-weight: 700; |
|
} |
|
|
|
.innovation-card p { |
|
color: var(--text-medium); |
|
font-size: 0.95rem; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
.team-section { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: 1.5rem; |
|
margin: 2rem 0; |
|
} |
|
|
|
.team-member { |
|
text-align: center; |
|
margin-bottom: 1.25rem; |
|
background-color: white; |
|
border-radius: var(--border-radius); |
|
padding: 1.5rem; |
|
box-shadow: var(--card-shadow); |
|
transition: transform var(--transition-speed); |
|
width: 230px; |
|
} |
|
|
|
.team-member:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.team-member h3 { |
|
color: var(--text-dark); |
|
margin-bottom: 0.3rem; |
|
font-size: 1.1rem; |
|
font-weight: 700; |
|
} |
|
|
|
.team-member h4 { |
|
color: var(--primary-color); |
|
margin-top: 0; |
|
margin-bottom: 0.75rem; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.team-member p { |
|
color: var(--text-medium); |
|
font-size: 0.85rem; |
|
line-height: 1.5; |
|
} |
|
|
|
.avatar { |
|
background: var(--primary-gradient); |
|
color: white; |
|
width: 90px; |
|
height: 90px; |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 0 auto 1rem auto; |
|
font-size: 2rem; |
|
font-weight: 700; |
|
box-shadow: 0 5px 15px rgba(14, 165, 165, 0.3); |
|
} |
|
|
|
|
|
.footer { |
|
text-align: center; |
|
color: var(--text-light); |
|
font-size: 0.85rem; |
|
margin-top: 2rem; |
|
margin-bottom: 1rem; |
|
padding: 1rem; |
|
border-top: 1px solid var(--border-color); |
|
} |
|
|
|
|
|
.alert { |
|
padding: 1rem 1.25rem; |
|
border-radius: var(--border-radius); |
|
margin-bottom: 1rem; |
|
position: relative; |
|
border-right: 4px solid; |
|
} |
|
|
|
.alert-icon { |
|
margin-left: 0.5rem; |
|
font-size: 1.25rem; |
|
} |
|
|
|
.alert-info { |
|
background-color: rgba(52, 144, 220, 0.1); |
|
color: var(--info-color); |
|
border-right-color: var(--info-color); |
|
} |
|
|
|
.alert-success { |
|
background-color: rgba(56, 193, 114, 0.1); |
|
color: var(--success-color); |
|
border-right-color: var(--success-color); |
|
} |
|
|
|
.alert-warning { |
|
background-color: rgba(247, 183, 49, 0.1); |
|
color: var(--warning-color); |
|
border-right-color: var(--warning-color); |
|
} |
|
|
|
.alert-danger { |
|
background-color: rgba(227, 52, 47, 0.1); |
|
color: var(--danger-color); |
|
border-right-color: var(--danger-color); |
|
} |
|
|
|
|
|
.stTabs [data-baseweb="tab-list"] { |
|
gap: 1px; |
|
background-color: var(--background-light); |
|
border-radius: var(--border-radius); |
|
padding: 0.3rem; |
|
} |
|
|
|
.stTabs [data-baseweb="tab"] { |
|
height: 50px; |
|
white-space: pre-wrap; |
|
background-color: white; |
|
border-radius: 6px; |
|
gap: 1px; |
|
padding: 0.6rem 1rem; |
|
font-family: 'Almarai', 'Tajawal', sans-serif; |
|
font-weight: 500; |
|
transition: all var(--transition-speed); |
|
} |
|
|
|
.stTabs [aria-selected="true"] { |
|
background: var(--primary-gradient) !important; |
|
color: white !important; |
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
|
|
input, textarea, .stTextInput>div>div>input, .stNumberInput>div>div>input { |
|
direction: rtl; |
|
text-align: right; |
|
font-family: 'Almarai', 'Tajawal', sans-serif; |
|
font-size: 0.95rem; |
|
padding: 0.6rem 0.75rem; |
|
border-radius: 6px; |
|
border: 1px solid var(--border-color); |
|
transition: border-color var(--transition-speed); |
|
} |
|
|
|
input:focus, textarea:focus, .stTextInput>div>div>input:focus, .stNumberInput>div>div>input:focus { |
|
outline: none; |
|
border-color: var(--primary-color); |
|
box-shadow: 0 0 0 1px var(--primary-light); |
|
} |
|
|
|
|
|
.stSelectbox [data-baseweb="select"] { |
|
direction: rtl; |
|
text-align: right; |
|
font-family: 'Almarai', 'Tajawal', sans-serif; |
|
} |
|
|
|
|
|
@media (max-width: 992px) { |
|
.main-title { |
|
font-size: 1.75rem; |
|
} |
|
|
|
.header-container { |
|
padding: 1rem; |
|
} |
|
|
|
.header-title h1 { |
|
font-size: 1.5rem; |
|
} |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.header-container { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
} |
|
|
|
.header-info { |
|
margin-top: 1rem; |
|
width: 100%; |
|
justify-content: flex-start; |
|
} |
|
|
|
.nav-menu ul { |
|
flex-wrap: wrap; |
|
justify-content: flex-start; |
|
} |
|
|
|
.nav-menu li { |
|
margin-bottom: 0.5rem; |
|
margin-left: 0.5rem; |
|
width: calc(50% - 1rem); |
|
} |
|
|
|
.module-title { |
|
font-size: 1.5rem; |
|
} |
|
|
|
.main-title { |
|
font-size: 1.4rem; |
|
} |
|
|
|
.innovation-card, .info-card { |
|
margin-bottom: 1rem; |
|
padding: 1rem; |
|
} |
|
|
|
.dataframe { |
|
display: block; |
|
overflow-x: auto; |
|
} |
|
|
|
.team-member { |
|
width: 100%; |
|
} |
|
} |
|
|
|
@media (max-width: 480px) { |
|
.main-title { |
|
font-size: 1.25rem; |
|
} |
|
|
|
.header-title h1 { |
|
font-size: 1.25rem; |
|
} |
|
|
|
.nav-menu li { |
|
width: 100%; |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
|
|
@media only screen and (max-width: 375px) { |
|
.nav-menu { |
|
margin: 0.5rem 0; |
|
} |
|
|
|
button, .stButton>button { |
|
padding: 0.5rem 0.75rem; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.module-title, .info-card h3, .innovation-card h3 { |
|
font-size: 1.1rem; |
|
} |
|
} |
|
|
|
|
|
.icon { |
|
font-size: 1.1rem; |
|
margin-left: 0.5rem; |
|
} |
|
|
|
|
|
.bg-light { |
|
background-color: var(--background-light); |
|
} |
|
|
|
.card { |
|
background: white; |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--card-shadow); |
|
padding: 1.25rem; |
|
margin-bottom: 1.25rem; |
|
} |
|
|
|
|
|
.about-system { |
|
margin: 2rem 0; |
|
background: white; |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--card-shadow); |
|
padding: 1.5rem; |
|
} |
|
|
|
.about-system h2 { |
|
color: var(--primary-color); |
|
margin-bottom: 1rem; |
|
padding-bottom: 0.5rem; |
|
border-bottom: 2px solid var(--primary-light); |
|
} |
|
|
|
.about-system p { |
|
line-height: 1.6; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.about-system ul { |
|
padding-right: 1.5rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.about-system li { |
|
margin-bottom: 0.5rem; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
.progress { |
|
height: 0.5rem; |
|
overflow: hidden; |
|
background-color: var(--background-light); |
|
border-radius: 0.25rem; |
|
margin: 0.5rem 0 1rem 0; |
|
} |
|
|
|
.progress-bar { |
|
height: 100%; |
|
border-radius: 0.25rem; |
|
background: var(--primary-gradient); |
|
} |
|
|
|
|
|
.countdown-timer { |
|
display: flex; |
|
justify-content: center; |
|
gap: 1rem; |
|
margin: 1.5rem 0; |
|
} |
|
|
|
.time-block { |
|
background: white; |
|
border-radius: var(--border-radius); |
|
padding: 0.75rem 1rem; |
|
text-align: center; |
|
min-width: 80px; |
|
box-shadow: var(--card-shadow); |
|
} |
|
|
|
.time-value { |
|
font-size: 1.75rem; |
|
font-weight: 700; |
|
color: var(--primary-color); |
|
line-height: 1; |
|
} |
|
|
|
.time-label { |
|
font-size: 0.8rem; |
|
color: var(--text-medium); |
|
margin-top: 0.25rem; |
|
} |
|
|
|
|
|
.settings-form { |
|
background: white; |
|
border-radius: var(--border-radius); |
|
padding: 1.5rem; |
|
box-shadow: var(--card-shadow); |
|
} |
|
|
|
.settings-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.settings-group h3 { |
|
font-size: 1.2rem; |
|
margin-bottom: 1rem; |
|
padding-bottom: 0.5rem; |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.settings-item { |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.settings-item label { |
|
display: block; |
|
margin-bottom: 0.5rem; |
|
font-weight: 500; |
|
} |
|
|
|
|
|
.pricing-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
gap: 1.25rem; |
|
margin: 1.5rem 0; |
|
} |
|
|
|
.price-card { |
|
background: white; |
|
border-radius: var(--border-radius); |
|
padding: 1.25rem; |
|
box-shadow: var(--card-shadow); |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.price-header { |
|
margin-bottom: 1rem; |
|
padding-bottom: 0.5rem; |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.price-value { |
|
font-size: 1.5rem; |
|
font-weight: 700; |
|
color: var(--primary-color); |
|
margin: 0.5rem 0; |
|
} |
|
|
|
.price-details { |
|
flex-grow: 1; |
|
} |
|
|
|
.price-details ul { |
|
padding-right: 1.25rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.price-details li { |
|
margin-bottom: 0.5rem; |
|
line-height: 1.5; |
|
} |
|
|
|
.price-footer { |
|
margin-top: auto; |
|
padding-top: 1rem; |
|
} |
|
|
|
|
|
.colored-icon { |
|
background: var(--primary-gradient); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
|
|
.logo { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.logo-text { |
|
font-weight: 800; |
|
font-size: 1.25rem; |
|
margin-right: 0.5rem; |
|
background: var(--primary-gradient); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
|
|
.bold { |
|
font-weight: 700; |
|
} |
|
|
|
|
|
.mermaid { |
|
margin: 1.5rem 0; |
|
} |
|
|
|
|
|
.stSidebar { |
|
background-color: white; |
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
[data-testid="stSidebarContent"] { |
|
background: var(--sidebar-gradient); |
|
} |
|
|
|
|
|
.dashboard-card { |
|
background: white; |
|
border-radius: var(--border-radius); |
|
padding: 1rem; |
|
box-shadow: var(--card-shadow); |
|
height: 100%; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.dashboard-card::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 4px; |
|
background: var(--primary-gradient); |
|
} |
|
|
|
.dashboard-value { |
|
font-size: 2rem; |
|
font-weight: 800; |
|
color: var(--primary-color); |
|
margin: 0.5rem 0; |
|
} |
|
|
|
.dashboard-title { |
|
color: var(--text-medium); |
|
font-size: 0.9rem; |
|
margin-bottom: 0.5rem; |
|
font-weight: 600; |
|
} |
|
|
|
.dashboard-change { |
|
font-size: 0.8rem; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.change-up { |
|
color: var(--success-color); |
|
} |
|
|
|
.change-down { |
|
color: var(--danger-color); |
|
} |
|
|
|
|
|
.company-info { |
|
text-align: center; |
|
background: white; |
|
padding: 1rem; |
|
border-radius: var(--border-radius); |
|
margin: 1.5rem 0; |
|
box-shadow: var(--card-shadow); |
|
} |
|
|
|
.company-logo { |
|
max-width: 150px; |
|
margin: 0 auto 1rem auto; |
|
} |
|
|
|
.company-name { |
|
font-size: 1.2rem; |
|
font-weight: 700; |
|
color: var(--text-dark); |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.company-slogan { |
|
font-size: 0.9rem; |
|
color: var(--text-medium); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.company-contact { |
|
display: flex; |
|
justify-content: center; |
|
gap: 1rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.contact-item { |
|
display: flex; |
|
align-items: center; |
|
font-size: 0.85rem; |
|
color: var(--text-medium); |
|
} |
|
|
|
.contact-icon { |
|
margin-left: 0.3rem; |
|
} |