body {
background-color: #0f121a;
color: #c9d1d9;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
}
.status-summary-down {
color: #cf0018;
}
.scroll-button {
  position: fixed;
  bottom: 20px; 
  right: 20px;   
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1); 
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);  
  cursor: pointer;
  font-size: 24px;
  backdrop-filter: blur(10px); 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);  
}
.scroll-button.rotate {
    transform: rotate(180deg); 
}

.status-summary-operational {
color: #00cfa2;
}
h1 {
text-align: center;
font-size: 2.5em;
}
h2 {
text-align: center;
color: #f85149;
font-size: 1.5em;
margin-top: 10px;
}
.container {
display: block;
justify-content: center;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #265e59;
border-radius: 10px;
border: 2px solid #141924;
}
::-webkit-scrollbar-track {
background-color: #141924;
border-radius: 10px;
}
.status-summary-down ::-webkit-scrollbar-thumb {
background-color: #e74c3c;
}
.status-summary-down ::-webkit-scrollbar-track {
background-color: #f5b7b1;
}
.scrollable-content {
scrollbar-width: thin;
scrollbar-color: #2ecc71 #bdc3c7;
}
.status-summary-down .scrollable-content {
scrollbar-color: #e74c3c #f5b7b1;
}
.card {
    background-color: #232933;
    border-radius: 20px;
    padding: 15px;
    margin: 11px auto;
    max-width: 900px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: height 1s cubic-bezier(0.68, -0.35, 0.27, 1.2);  
    height: 55px; /* حالت اولیه حداقل 60 پیکسل */
}

.card h2 {
font-size: 1.5em;
color: #ffffff;
}
.status {
font-size: 1.1em;
padding: 5px;
border-radius: 10px;
color: #ffffff;
}
.status-up {
background-color: #2ecc71;
}
.status-down {
background-color: #e74c3c;
}
.response-time {
color: #3498db;
}
.last-checked {
font-size: 1em;
color: #bdc3c7;
}
.uptime-history {
display: flex;
align-items: flex-end;
height: 20px;
gap: 2px;
margin: 0 10px;
}
.uptime-bar {
flex-grow: 1;
height: 100%;
transition: width 0.3s ease;
}
.uptime-bar.down {
background-color: #e74c3c;
}
.uptime-history span {
flex-grow: 1;
height: 8px;
margin-right: 2px;
border-radius: 10px;
width: 20px;
}
.graph {
margin-top: 10px;
background-color: #333;
height: 100px;
border-radius: 10px;
}
.status-summary {
text-align: center;
font-size: 1.3em;
padding: 10px;
margin-bottom: 20px;
color: #ffffff;
}
.chart-container {
width: 100%;
max-width: 700px;
height: 220px;
margin: 10px auto;
}
.arrow {
margin: 0 10px 0 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.chart-container {
display: none;
margin-top: 10px;
}
@media (max-width: 600px) {
h2 {
font-size: 0.7em;
}
.status-summary-operational{
 font-size: 0.8em;  
}
.container{
font-size: 0.7em;
}
.card {
height: 55px;
padding: 12px;
}
.card h2 {
font-size: 1.18em;
}
.status {
font-size: 1em;
}
.last-checked {
font-size: 0.9em;
}
.status-summary {
font-size: 1.1em;
}
.chart-container {
height: 190px;
}
.graph {
height: 80px;
}
.uptime-history {
height: 15px;
gap: 0px;
}
.uptime-history span {
height: 6px;
}
}