/* تنظیمات کلی صفحه */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Yekan Bakh;
  
}
:root {
--default-font-family: YekanBakh-Black;
font-family: Yekan Bakh;
}
body {
  font-family: Yekan Bakh;
  background-color: #ffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* کانتینر کلی */
.container {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}
.main-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 20px;
      
    }
    .breadcrumb {
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .top-section {
        display: flex;
        align-self: flex-start;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }

    .top-section > div {
        padding: 24px;
        border-radius: 8px;
    }


    .text-section {
      display: flex;
      flex-direction: row;
        justify-content: space-between;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .main-section {
        
        padding: 20px;
        border-radius: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .card {
        flex: 1 1 calc(25% - 20px);
        background-color: #2a2a2a;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
    }


.frame-27 {display: flex;align-items: center;flex-direction: row-reverse;justify-content: flex-end;flex-wrap: nowrap;gap: 18px;}
.list-item {flex-shrink: 0;flex-basis: auto;position: relative;height: 22px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 400;line-height: 22px;text-align: left;white-space: nowrap;letter-spacing: -0.28px;}
.list-item-t {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;flex-basis: auto;position: relative;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 400;line-height: 22px;text-align: right;white-space: nowrap;letter-spacing: -0.28px;}
.list-item-to {position: relative;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 400;line-height: 21.7px;text-align: right;letter-spacing: -0.28px;}
.right-sec{width: 750px;height: 222px;display: flex;align-items: flex-start;justify-content: flex-end; flex-wrap: nowrap;padding: 24px 160px 24px 24px;background: #f9f9f9;}
.left-sec{background: #f9f9f9;border-radius: 13px;}
.right-content{
display: flex;flex-direction: column;align-items: flex-start;flex-wrap: nowrap;flex-grow: 1;flex-shrink: 0;flex-basis: 0;gap: 24px;position: relative;
min-width: 0;
}
.right-top{display: flex;align-items: center;justify-content: space-between;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;position: relative;}
.right-top1{display: flex;align-items: center;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 168px;}
.right-top2{display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;flex-shrink: 0;gap: 3px;position: relative;width: 73px;padding: 3px 15px 3px 15px;cursor: pointer;background: rgba(26, 55, 95, 0.2);border: none;border-radius: 40px;}
.done {display: flex;align-items: center;justify-content: center;flex-shrink: 0;flex-basis: auto;position: relative;color: #1a375f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: center;white-space: nowrap;letter-spacing: -0.24px;}  
.right-top1-t{color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 600;line-height: 22px;text-align: right;}
.right-top1-b{color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: right;}


.right-main{display: flex;align-items: flex-start;justify-content: space-between;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;position: relative;}
.right-sec1{display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;position: relative;z-index: 85;}
.right-sec2{display: flex;flex-direction: column;align-items: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 13px;position: relative;width: 175px;z-index: 93;}
.right-sec3{display: flex;flex-direction: column;align-items: flex-start;flex-wrap: nowrap;flex-shrink: 0;gap: 13px;position: relative;width: 152.404px;z-index: 105;}
.sec1-content{display: flex;align-items: flex-start;justify-content: flex-start;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;gap: 8px;position: relative;z-index: 106;}
.sec1-content_top{display: flex;flex-direction: column;align-items: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 8px;position: relative;width: 102px;z-index: 107;}
.sec1-content_top--num{align-self: stretch;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 73px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 52px;font-weight: 700;line-height: 72.8px;text-align: right;white-space: nowrap;z-index: 109;}
.sec1-content_top--t{align-self: stretch;flex-shrink: 0;position: relative;min-width: 0;height: 9px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 400;line-height: 9px;text-align: right;white-space: nowrap;z-index: 108;}
.eye-open{flex-shrink: 0;position: relative;width: 14px;height: 14px;z-index: 110;}
.icon-63{position: relative;width: 12.462px;height: 9.2px;margin: 2.4px 0 0 0.77px;background: url(./assets/images/1cdaea9b-7b21-4c08-9808-d8ceb3ea195f.png) no-repeat center;background-size: 100% 100%;}
.frame-64{display: flex;flex-direction: row-reverse;align-items: center;justify-content: flex-end;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;gap: 5px;position: relative;padding: 0 22px 0 0;z-index: 112;}
.frame-65{display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;flex-shrink: 0;gap: 3px;position: relative;width: 51.404px;padding: 6px 12px 6px 12px;cursor: pointer;background: rgba(255, 136, 54, 0.2);border: none;z-index: 113;border-radius: 40px;}
.pointing-66{flex-shrink: 0;position: relative;width: 9.404px;height: 10px;background: url(./assets/images/50dff749-6ac4-4136-9b67-9847dcf90111.png) no-repeat center;background-size: cover;z-index: 114;}
.number-67{display: flex;align-items: center;justify-content: center;flex-shrink: 0;position: relative;width: 15px;height: 7px;color: #ff8836;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 7px;text-align: center;white-space: nowrap;letter-spacing: -0.24px;z-index: 115;}
.frame-68  {flex-shrink: 0;flex-basis: auto;position: relative;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: left;white-space: nowrap;letter-spacing: -0.24px;z-index: 116;}
.right-sec2{display: flex;flex-direction: column;align-items: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 13px;position: relative;width: 175px;} 
.frame-4f {display: flex;flex-direction: row-reverse;align-items: flex-start;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;gap: 8px;position: relative;min-width: 0;z-index: 87;}  
.frame-50 {display: flex;flex-direction: column;align-items: flex-end;justify-content: center;flex-wrap: nowrap;flex-shrink: 0;gap: 8px;position: relative;width: 153px;z-index: 88;}
.number-51 {
align-self: stretch;
flex-shrink: 0;
position: relative;
min-width: 0;
height: 9px;
color: #1b1b1b;
font-family: Yekan Bakh, var(--default-font-family);
font-size: 14px;
font-weight: 400;
line-height: 9px;
text-align: right;
white-space: nowrap;
z-index: 89;
}
.number-52 {
align-self: stretch;
flex-shrink: 0;
flex-basis: auto;
position: relative;
min-width: 0;
height: 73px;
color: #1b1b1b;
font-family: Yekan Bakh, var(--default-font-family);
font-size: 52px;
font-weight: 700;
line-height: 72.8px;
text-align: right;
white-space: nowrap;
z-index: 90;
}
.icon-53 {
flex-shrink: 0;
position: relative;
width: 8.733px;
height: 11.501px;
background: url(./assets/images/7a1c41d5-60cc-4940-9b01-b034eff9fd8d.png) no-repeat center;
background-size: cover;
z-index: 91;
}   
.pic-right{flex-shrink: 0;
width: 207px;
height: 208px;
background: url(./assets/images/d6132b90-416b-4798-8f90-79a96ae38ccd.png) no-repeat center;
background-size: cover;
margin-right: -50px;
}

#chart-container {

        margin: auto;
        text-align: center;
    }
    #myChart {
        width: 328px;
        height: 222px;
    }
    select {
        margin-bottom: 10px;
        padding: 5px;
        font-size: 14px;
    }


.frame-6e {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;flex-wrap: nowrap;gap: 11px;width: 262px;padding: 8px 8px 8px 8px;background: #f9f9f9;z-index: 243;border-radius: 13px;}
.source-music-6f {display: flex;align-items: center;justify-content: center;flex-shrink: 0;flex-basis: auto;position: relative;width: 214px;height: 28px;color: #37619d;font-family: Yekan Bakh, var(--default-font-family);font-size: 18px;font-weight: 700;line-height: 27.9px;text-align: center;text-overflow: ellipsis;white-space: nowrap;z-index: 244;overflow: hidden;}
.frame-70 {display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 150px;z-index: 245;}
.date {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;flex-basis: auto;position: relative;width: 69px;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 246;}
.date-separator {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;flex-basis: auto;position: relative;width: 8px;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 247;}
.time {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;flex-basis: auto;position: relative;width: 49px;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 248;}
.calendar {flex-shrink: 0;position: relative;width: 13.4px;height: 14.9px;background: url(./assets/images/07c9933e-e358-452c-8441-a397e3f4db70.png)no-repeat center;background-size: cover;z-index: 249;}
.frame-71 {display: flex;flex-direction: column;align-items: flex-start;flex-wrap: nowrap;flex-shrink: 0;gap: 8px;position: relative;width: 246px;padding: 12px 8px 12px 8px;background: #ffffff;border: 1px solid rgba(226, 226, 228, 0.5);z-index: 250;border-radius: 13px;}
.frame-72 {display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 230px;padding: 2px 4px 2px 4px;z-index: 251;border-radius: 3px;}
.members-count {flex-shrink: 0;flex-basis: auto;position: relative;height: 19px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: left;white-space: nowrap;z-index: 252;}
.users-profiles-73 {flex-shrink: 0;position: relative;width: 18px;height: 18px;z-index: 253;}
.icon-74 {position: relative;width: 15.8px;height: 12.371px;margin: 2.814px 0 0 1.1px;background: url(./assets/images/6b8cd3eb-c242-411a-80b1-be1047586355.png)no-repeat center;background-size: 100% 100%;z-index: 254;}
.members-count-75 {flex-grow: 1;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 255;}
.frame-76 {display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 230px;padding: 2px 4px 2px 4px;background: rgba(143, 143, 143, 0.1);z-index: 256;border-radius: 3px;}
.views-count {flex-shrink: 0;flex-basis: auto;position: relative;height: 19px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: left;white-space: nowrap;z-index: 257;}
.views-count-77 {flex-grow: 1;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 258;}
.eye-open-78 {flex-shrink: 0;position: relative;width: 18px;height: 18px;z-index: 259;}
.icon-79 {position: relative;width: 15.872px;height: 11.686px;margin: 3.157px 0 0 1.063px;background: url(./assets/images/016c2973-e1c5-4450-9405-212432eb6894.png)no-repeat center;background-size: 100% 100%;z-index: 260;}
.frame-7a {display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 230px;padding: 2px 4px 2px 4px;z-index: 261;border-radius: 3px;}
.impressions {flex-shrink: 0;flex-basis: auto;position: relative;height: 19px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: left;white-space: nowrap;z-index: 262;}
.impressions-7b {flex-grow: 1;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 263;}
.lightning-filled-7c {flex-shrink: 0;position: relative;width: 18px;height: 18px;z-index: 264;}
.icon-7d {position: relative;width: 11.333px;height: 15.301px;margin: 1.415px 0 0 3.309px;background: url(./assets/images/976a901e-e8a1-4304-86ca-12733c4a7ed1.png)no-repeat center;background-size: 100% 100%;z-index: 265;}
.frame-7e {display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;flex-shrink: 0;gap: 4px;position: relative;width: 230px;padding: 2px 4px 2px 4px;background: rgba(143, 143, 143, 0.1);z-index: 266;border-radius: 3px;}
.reach {flex-shrink: 0;flex-basis: auto;position: relative;height: 19px;color: #1b1b1b;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 600;line-height: 19px;text-align: left;white-space: nowrap;z-index: 267;}
.reach-7f {flex-grow: 1;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 268;}
.target {
flex-shrink: 0;
position: relative;
width: 18px;
height: 18px;
z-index: 269;
}
.icon-80 {
position: relative;
width: 14.9px;
height: 14.9px;
margin: 1.55px 0 0 1.55px;
background: url(./assets/images/7294b424-cde6-4442-a7f5-b63dbeb3ff60.png)
no-repeat center;
background-size: 100% 100%;
z-index: 270;
}
.frame-81 {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 4px;
position: relative;
width: 230px;
padding: 2px 4px 2px 4px;
z-index: 271;
border-radius: 3px;
}
.clicks {
flex-shrink: 0;
flex-basis: auto;
position: relative;
height: 19px;
color: #1b1b1b;
font-family: Yekan Bakh, var(--default-font-family);
font-size: 12px;
font-weight: 600;
line-height: 19px;
text-align: left;
white-space: nowrap;
z-index: 272;
}
.clicks-82 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
position: relative;
min-width: 0;
height: 19px;
color: #8f8f8f;
font-family: Yekan Bakh, var(--default-font-family);
font-size: 12px;
font-weight: 400;
line-height: 19px;
text-align: right;
white-space: nowrap;
z-index: 273;
}
.frame-83 {
flex-shrink: 0;
position: relative;
width: 18px;
height: 18px;
z-index: 274;
}
.pointing-84 {
position: relative;
width: 12.957px;
height: 13.778px;
margin: 2px 0 0 3px;
z-index: 275;
}
.shape {
position: absolute;
width: 110.8%;
height: 110.16%;
top: -5.08%;
left: -5.4%;
background: url(./assets/images/f8e1bf58-19ba-4fd2-b61f-7d85d40c865b.png)
no-repeat center;
background-size: 100% 100%;
z-index: 276;
}
.frame-85 {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 4px;
position: relative;
width: 230px;
padding: 2px 4px 2px 4px;
background: rgba(143, 143, 143, 0.1);
z-index: 277;
border-radius: 3px;
}
.stickers-tap {
flex-shrink: 0;
flex-basis: auto;
position: relative;
height: 19px;
color: #1b1b1b;
font-family: Yekan Bakh, var(--default-font-family);
font-size: 12px;
font-weight: 600;
line-height: 19px;
text-align: left;
white-space: nowrap;
z-index: 278;
}
.stickers-tap-86 {flex-grow: 1;flex-shrink: 0;flex-basis: auto;position: relative;min-width: 0;height: 19px;color: #8f8f8f;font-family: Yekan Bakh, var(--default-font-family);font-size: 12px;font-weight: 400;line-height: 19px;text-align: right;white-space: nowrap;z-index: 279;}
.tag {flex-shrink: 0;position: relative;width: 18px;height: 18px;z-index: 280;}
.icon-87 {position: relative;width: 15.8px;height: 15.8px;margin: 1.1px 0 0 1.1px;background: url(./assets/images/8ab09e50-61a3-42b7-a5dc-3f3a097415e3.png)no-repeat center;background-size: 100% 100%;z-index: 281;}
.frame-88 {display: flex;align-items: center;justify-content: center;align-self: stretch;flex-wrap: nowrap;flex-shrink: 0;gap: 10px;position: relative;min-width: 0;height: 32px;padding: 6px 13px 6px 13px;cursor: pointer;background: #37619d;border: none;z-index: 282;overflow: hidden;border-radius: 6px;}
.view-final-shot {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;flex-basis: auto;position: relative;width: 120px;height: 22px;color: #ffffff;font-family: Yekan Bakh, var(--default-font-family);font-size: 14px;font-weight: 600;line-height: 22px;text-align: right;white-space: nowrap;z-index: 283;}
.image {flex-shrink: 0;position: relative;width: 16px;height: 16px;z-index: 284;}
.icon-89 {position: relative;width: 13.4px;height: 13.4px;margin: 1.3px 0 0 1.3px;background: url(./assets/images/fdab0be9-3899-4190-af5c-9a20a066bbc1.png)no-repeat center;background-size: 100% 100%;z-index: 285;}
.group-8a {flex-shrink: 0;top: -8%;width: 100px;height: 112px;position: relative;background: url(./assets/images/6d04a617-f67f-4c02-b220-5df2ea950644.png)no-repeat center;background-size: cover;z-index: 286;border-radius: 24px;}






.table-container {display: flex;flex-direction: column;width: 100%;margin: 20px auto;padding: 10px;border: 1px solid #ccc;border-radius: 8px;overflow-x: auto; /* قابلیت اسکرول افقی */}

.table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    min-width: 900px; 
}

.table-row:last-child {
    border-bottom: none;
}

.table-cell {
    flex: 1;
    text-align: center;
    padding: 5px;
}

.table-cell img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.table-cell .profile-link {
    color: #007BFF;
    text-decoration: none;
}

#toggleButton {position: relative;width: 60px;padding: 3px;height: 32px;display: flex;align-items: center;justify-content: center;cursor: pointer;background: transparent;border: 1px solid #1a375f;z-index: 507;overflow: hidden;border-radius: 100px;transition: background 0.3s, color 0.3s; /* انیمیشن تغییر استایل */background: white;border-radius: 100px;z-index: 511;}
#toggleButton.active {
    background: #1a375f; 
}
.icon3 {
    margin: 1.3px 0 0 1.3px;
    background: url(./assets/images/2144033a-3e5d-4c7a-a42f-e43f36a107d3.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 510;
    transition: all 0.3s;
}
#toggleButton.active .icon3 {
    width: 18px;
    height: 18px;
    margin: 0;
    
    background: url(./assets/images/e84f8a7c-051f-467b-9dce-d4fc71ae9361.png) no-repeat center;
    background-size: 100% 100%;
}
#toggleButton .icon3 {
    width: 18px;
    height: 18px;
    margin: 0;
    
    background: url(./assets/images/2144033a-3e5d-4c7a-a42f-e43f36a107d3.png) no-repeat center;
    background-size: 100% 100%;
}
@media (max-width: 768px) {
    .card {
        flex: 1 1 calc(50% - 20px);
    }
    .top-section > div {
      margin-left: auto;
      margin-right: auto;
    }
.main-section {
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.frame-6e{
  
  margin-bottom: 26px !important;
}
.text-section{flex-direction: column;align-items: center;gap: 20px;}
.right-sec{height: auto !important;flex-direction: column;width: 100% !important;    align-items: center !important;
}
.right-main{flex-direction: column;gap: 40px;align-items: center !important;}
.right-sec1{    align-self: center !important;}
}
@media (max-width: 480px) {
    .card {
        flex: 1 1 100%;
    }
}