@font-face {
  font-family: hamishe ;
  src: url("/static/font/Digi_Hamishe_Bold.ttf");
}
.color-white{
color: white;
}
.color-prim{
   color: rgb(56, 163, 239);
  }
.oval-prim:hover{
  background-color:  rgb(23, 115, 180);
}
.oval_red{
  background-color:  rgb(208, 40, 40);
  color: white;
}
.oval_red:hover{
  background-color:  rgb(167, 42, 42);
  color: white;
}
.color-gray{
   color:#c4dddc;
  }
.color-gray :hover{
   color:#9eb1b0 !important;
   cursor: pointer;
}
.color-dark-gray{
   color:#9eb1b0
}
h3 :hover{
  color:#9eb1b0
}
h5{
  color:#c4dddc;
}
body, p, span, h1, h2, h3, h4, h5, h6 ,div{
font-family: hamishe;
}
#report-radio-btn :hover{
background-color:  rgb(23, 115, 180);
}

.continer_box{


        display: flex;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 20px;
        padding: 100px;
        
        width: 90%;
        color: #333;
        text-align: center;
}
.flex{

display: flex;
justify-content: center;
align-items: center;
}
.flex-column{
flex-direction: column;
}
.margin-bottom-20{
margin-bottom: 20px;
}
.oval-green{
background-color: rgb(160, 229, 160);
border-radius: 25px;
padding: 2px;
}
.oval-yellow{
background-color: rgb(245, 208, 90);
border-radius: 25px;
padding: 2px;
}
.oval-prim{
background-color: rgb(68, 170, 247);
border-radius: 25px;
padding: 2px;
}
.pad-10{
padding: 10px;
}
.pad-20{
padding: 20px;
}
.pad-30{
padding: 30px;
}
.pad-40{
padding: 40px;
}

.pad-50{
padding: 50px;
}
.pad-top-20{
padding-top: 20px;
}
.pad-top-40{
padding-top: 40px;
}
.font-size-10{
font-size: 10px
}
.border-rad-20{
border-radius: 20px;
}
.font-size-30{
font-size: 30px
}
.font-size-25{
font-size: 25px
}
.font-size-20{
font-size: 20px
}

.box1{
  display: flexbox;
          
          
         
  padding: 100px;  
  
  
  width:100%;
  text-align: center;
} 
.input-box{
  height: 100px;
}

/* برای کروم، اج، سافاری */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ececec;
}

/* برای فایرفاکس */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffefef #f0f0f0;
  
  
  
}
#searchBox {
  background-color: #a1bace;
  color: #ffffff;
  border: 1px solid #ffffff;
}
#searchBox::placeholder {
  color: #ffffff;
}

/* برای کروم و مرورگرهای وب‌کیت */
.user-scores::-webkit-scrollbar {
width: 6px;
}

.user-scores::-webkit-scrollbar-track {
background: transparent;
}

.user-scores::-webkit-scrollbar-thumb {
background-color: #d8dfe7;
border-radius: 20px;
}.user-scores {
  max-height: 150px;
  overflow-y: auto;
  direction: ltr; /* مهم برای اسکرول‌بار سمت راست */
  scrollbar-width: thin;
  scrollbar-color: #d5eaff transparent;
}

/* برای کروم و مرورگرهای وب‌کیت */
.user-scores::-webkit-scrollbar {
  width: 6px;
}

.user-scores::-webkit-scrollbar-track {
  background: transparent;
}

.user-scores::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 20px;
  direction: ltr;
}
.user-scores-container {
 
  overflow-y: auto;
  max-height: 780px;
  border-radius: 10px;
  color: #f5f6fa;
  scrollbar-width: thin;
  scrollbar-color: #ffffff transparent;
}

.user-scores-container::-webkit-scrollbar {
  width: 6px;
}

.user-scores-container::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 4px;
}

.user-scores-list {
  list-style: none;
  padding: 0;
  margin: 0;
}


.user-scores-list li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  margin-bottom: 6px;
  background-color: #ecf5ffde;
  border-radius: 6px;
  color: #628e8e;
  font-size: 0.95rem;
  position: relative;

}
.user-item.online {

  background-color: #eaf5ea; 
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.user-info {
  display: flex;
  gap: 5px;
  font-size: 10px;
}

.last_seen {
  display: none;
 
  font-size: 8px;
  padding: 2px 4px;
  margin-top: 4px;
  border-radius: 4px;
  width: fit-content;
}

.user-scores-list li:hover {
  background-color: #ffffff;
  color: #0579bb;
}

.user-scores-list li:hover .last_seen {
  display: block;
}

@media (max-width: 700px) {
  .chat-container {
    display: flex;
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  .user-list {
    width: 100% !important;
    margin-bottom: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
  }

  .chat-box {
    width: 100% !important;
    padding: 10px;
    box-sizing: border-box;
  }

  #chatMessages {
    max-height: 250px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }

  textarea#messageInput {
    font-size: 0.9rem;
    min-height: 60px;
    width: 100%;
    box-sizing: border-box;
  }

  .chatmessage {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .message-meta {
    font-size: 10px;
    margin-top: 4px;
  }

  .bubble {
    font-size: 0.85rem;
    padding: 8px;
  }
}

 
  @media( min-width:700px) {
    .dashboard{
      margin-top: 20px;
      margin-right: 270px;
      height: 668;
      width: 150px;
    }
    .card-form{
      min-width: 700px;
      min-height: 400px;
      

    }
    .marg-right{
      margin-right: 270px;
    }
  }
@media( max-width:700px) {
    
    .card-form{
     overflow: auto;
      min-height: 400px;
      

    }
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width:  250px;
    height: 100vh;
    background: #f3f3f3;
    color: rgb(0, 0, 0);
    padding: 25px;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    display: flex;
    z-index: 1000;
    flex-direction: column;
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    direction: ltr; /* برای اسکرول‌بار در سمت راست */
  }

  .sidebar-content-inner {
    direction: rtl; /* محتوای فارسی داخل سایدبار */
    text-align: right;
  }
  .none{
    text-decoration: none;
    border: none;
  }

  .main-content {
    margin-right: 250px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

 .card-form {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    padding: 35px;
    width:800px ;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
   
  }
  .card-form-dashboard{

    background: rgb(255, 255, 255);
    border-radius: 16px;
    padding: 15px;
    
    width: 250px;
   
   margin-bottom: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    overflow: auto;
  }
.card-form-square-dashboard{

background: rgb(255, 255, 255);
border-radius: 16px;
padding: 35px;
height:265px;
max-width:265px;
width: 100%;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
margin-top:20px ;
margin-right: 10px;
margin-left: 25px;
overflow: auto;


}
.card-form-square-dashboard2{

  background: rgb(255, 255, 255);
  border-radius: 16px;
  padding: 35px;
  max-height: 415px;
  max-width: 265px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  margin-top:10px ;
  margin-right: 10px;
  margin-left: 25px;
  overflow: auto;
  
  }@media (max-width: 700px) {
    .main-content, .tab-section, .tab-pasokh {
        padding: 10px !important;
        display: flex;
        align-items: center;
        margin: 0px !important;
        justify-content: center;
    }
}


.card-form-vertical-dashboard{

background: rgb(255, 255, 255);
border-radius: 16px;
padding: 35px;

min-width: 250px;
width: 100%;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
margin-top:20px ;
margin-right: 10px;
margin-left: 10px;
overflow: auto;

}
.card-form-horizontal-dashboard{

background: rgb(255, 255, 255);
border-radius: 16px;
padding: 35px;
max-height: 250px;
min-width: 100%;
width: 100%;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
margin-top:20px ;
margin-right: 10px;




}
.card-form-horizontal-dashboard3{

  background: rgb(255, 255, 255);
  border-radius: 16px;
  padding: 35px;
  height: 198px;
  min-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  margin-top:10px ;
  margin-right: 10px;
  overflow-y: auto;
  
  
  
  }
.circle{

  width: 10px;
  height: 10px;
  border-radius: 25px;
}

.card-form-horizontal-dashboard3 
.circle{

  width: 10px;
  height: 10px;
  border-radius: 25px;
}


  .question-item {
    background: #ffffff;
    
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: background 0.2s ease;
  }

  .question-item:hover {
    background: #d2d2d2;
  }

  .question-item small {
    display: block;
    color: #141616;
    font-size: 0.85rem;
    margin-top: 4px;
  }

  .sidebar h5 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #f5f6fa;
  }

  .form-label {
    font-weight: 500;
    color: #2c3e50;
  }

  .btn-primary {
    background-color: #60a5d9;
    border: none;
  }

  .btn-primary:hover {
    color: #ffffff;
  }

  .botten:hover {
    color: #ffffff !important;
  }

  .alert {
    font-size: 0.95rem;
    font-family: hamishe;
  }
  .bubble {
max-width: 70%;
margin-bottom: 10px;
padding: 10px;
border-radius: 15px;
clear: both;
word-wrap: break-word;
font-size: 14px;
}

.bubble.sent {
background-color: #5c8abe;  
align-self: flex-end;
text-align: right;
border-top-right-radius: 0;
margin-left: auto;
}

.bubble.received {
background-color: #95bfcf;
align-self: flex-start;
text-align: right;
border-top-left-radius: 0;
margin-right: auto;
}

.message-meta {
font-size: 10px;
color: #555;
margin-top: 5px;

}

  @media (max-width: 700px) {

    
    .sidebar {
      position: fixed;
      top: 0;
      right: -100%;
      width: 300px;
      height: 95vh;
      z-index: 1000;
      background-color: #ffffff;
      color: white;
      padding: 20px;
      transition: right 0.3s ease;
      z-index: 1001 !important;
      
     
    }
    #top-tab-bar {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: rgb(209, 207, 207); /* رنگ دلخواه */
      display: flex;
      color: #70747a;
      justify-content: center;
      font-size:12px !important;
      z-index: 1000 !important;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
      
      direction: rtl;
    }

   
    .sidebar.active {
      right: 0;
    }
    
    .main-content {
      margin-right: 0;
     
      padding: 10px;
      flex-direction: column;
      align-items: stretch;
      height: auto;
    }

    .card-form {
      margin-top: 10px;
      padding: 20px;
      margin-right: 0px !important;
    }

    .sidebar-content,
    .user-scores-container {
      overflow-y: auto;
    }

    .question-item {
      font-size: 0.9rem;
    }

    .form-control {
      font-size: 1rem;
    }
    .comtiner{
      height: 40vh;
    }
.gozareshat{

padding-right: 0px !important;

}

.add_memory{

width: 340px;

}
.add_memory_in{

width: 100% !important;
overflow: auto;


}
    #toggle-btn {
      display: block;
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1100;
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 8px;
      font-size: 1.2rem;
    }
    .big-box{

      margin-right: 0px !important;
      display: flex;
      flex-direction: column;


    }
  .chatmessage{

    width: 100% !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
  }
  .my-tab{

    width: 340px;
    display: flex;
    margin-top: 120px !important;
    
   
  }
  .my-tab-in{

    
    display: flex;
    flex-direction: column;
  }
  .massages{
    margin-top: 180px !important;
  }
  .chat-container{

    margin-top: 100px !important;
  }
  .note-box{
    width: 242.734px;
  }
  .saloon-sidebar{

    margin-top: 80px;
  }
  .card-form-dashboard{
    min-width: 200px;
  }
  .dashboard-in{
    display: flex;
    margin-top: 33px;
    margin-right: 33px;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-x: hidden;
  }
  .card-form-horizontal-dashboard{

   
    max-width: 250px !important;
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
    
    overflow: auto;
    
    }
    .card-form-horizontal-dashboard3{
    
     
      max-width: 250px !important;
      width: 100%;
      margin-right: 0px !important;
      margin-left: 0px !important;
      
      overflow: auto;
      
      }
 .saloon-sidebar{
  padding: 2px !important;
 }
.my-tab-in{
  gap:0px !important
}
}
.saloon-sidebar{
  padding: 35px;
}
.dashboard-in{
  display: flex;flex-direction: row;
 }
  .gozaresh-in{

    margin-right: 0px !important;
    margin-left: 80px !important;
  }
  .gozaresh-in-table{
    margin-left: 50px !important;

  }
  .tab-pasokh{

    padding-right: 0px !important;
  }
.footer{

  margin-right: 0px !important;
}
.my-tab-in{
  gap:10px
}

  

  
  
  

  /* اسکرول‌بار تیره فقط برای داخل سایدبار */
  .sidebar-content::-webkit-scrollbar{
    width: 8px;
  }

  .sidebar-content::-webkit-scrollbar-track{
    /* زمینه تیره */
    border-radius: 10px;
  }

  .sidebar-content::-webkit-scrollbar-thumb{
    background-color: #57606f; /* رنگ دسته اسکرول‌بار */
    border-radius: 10px;
    
  }

  

  .sidebar-content{
    scrollbar-width: thin;
    /*scrollbar-color: #57606f #2c3e50;*/
  }#top-tab-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color:  #f3f3f3;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0px 0;
    color: #3d4757;
    z-index: 2000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    margin-right: 250px;
    
    direction: rtl;
}
.user-item:hover {
background-color: rgba(91, 161, 171, 0.3);
color: darkblue;
}
@media (max-width: 700px) {
#top-tab-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 !important;
  padding: 8px 5px;
  width: 100%;
  box-sizing: border-box;
}
.my-tab-continer{
    margin:120px !important;
    
    
}



.gozaresh-in {
  margin: 0 auto !important;
  padding: 0 10px;
}

.gozaresh-in-table {
  margin: 0 auto !important;
  padding: 0 10px;
}
.gozaresh-in-item{

  flex-wrap: wrap
}

.main-content {
  margin-top: 60px !important; 
  padding: 10px 10px !important;
}

.big-box {
  margin: 0 !important;
}

.card-form {
  width: 100% !important;
  box-sizing: border-box;
  margin-top: 80px !important;
  max-width: 500px !important;
}
.d-flex {
  flex-direction: column !important;
}

.user-list {
 
  max-height: 20px;
}

.chat-box {
  width: 100% !important;
}

.gozaresh {
  width: 100% !important;
  margin-left: 0 !important;
  font-size: 1rem;
}

.gozaresh-in-table {
  width: 100% !important;
}

#tab-gozaresh {
  padding-right: 2vw !important;
  padding-left: 2vw !important;
  margin-top: 100px !important;
  width: 340px !important;
}

.card {
  font-size: 0.85rem !important;
}

#chatMessages {
  max-height: 250px;
}

textarea#messageInput {
  height: 80px;
  font-size: 0.9rem;
}
.main-content,
.tab-section,
.tab-pasokh {
  padding: 10px !important;
  margin: 0 auto !important;
}



.chat-box,
.user-list {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 1rem;
}

#chatMessages {
  max-height: 300px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

textarea#messageInput {
  font-size: 0.9rem;
  min-height: 60px;
}

.card {
  width: 100% !important;
}
.tab-sarnakh{

  width: 340px !important;
}



}

#chatMessages{

width: 700px;
}

#top-tab-bar .tab-btn {
background: transparent;
border: none;
color: rgb(0, 0, 0);
font-weight: 500;
font-size: 12px;
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s ease;
}

#top-tab-bar .tab-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}

#top-tab-bar .tab-btn.active {
background-color: #f3f3f3;
color: #60a5d9;
font-weight: 500;
font-size: 16px;
}
.user-item:hover {
background-color: rgba(91, 161, 171, 0.3); 
cursor: pointer;
transition: background-color 0.3s ease;
}
#ip-indicator {
position: fixed;
bottom: 15px;
left: 15px;

color: #383838;
padding: 8px 12px;
border-radius: 10px;
font-size: 13px;
cursor: pointer;
z-index: 999;
user-select: none;
transition: all 0.3s ease;

}

#ip-value {
display: none;
margin-right: 8px;
font-weight: bold;
font-family: monospace;

}

.tab-btn {
background-color: #ffffff;
color: #89bae8;
font-size: 13px;
padding: 10px 14px;
margin: 5px 0;
border: none;
border-radius: 8px;
text-align: right;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
cursor: pointer;
text-decoration: none;
}
.tab-btn:hover {
background-color: #0066ff;
color: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transform: translateY(-2px);
}

.tab-btn:focus {
outline: none;
background-color: #29549d;
}

.sidebar-content-inner {
display: flex;
flex-direction: column;

}


.btn-glow-blue {
color: #89bae8;
background-color: #d6e2f4;
border: 1px solid #ccdcea;
border-radius: 8px;
padding: 10px 16px;
font-size: 13px;
transition: 0.3s;
box-shadow: 0 0 8px rgba(245, 245, 245, 0.4); /* درخشش اولیه */
}
.btn-glow-blue-thin{

color: #215381;
background-color: #ccdcea;
border: 1px solid #89bae8;
border-radius: 8px;
padding: 5px 8px;
transition: 0.3s;
box-shadow: 0 0 8px rgba(137, 186, 232, 0.4); /* درخشش اولیه */
}

.btn-glow-blue:hover {
background-color: #7b8fb0;
color: #ffffff;
box-shadow: 0 0 15px rgba(137, 186, 232, 0.8); /* درخشش قوی‌تر */
}
.btn-glow-blue-thin:hover {

color: #ffffff;
box-shadow: 0 0 15px rgba(246, 251, 255, 0.8); /* درخشش قوی‌تر */
}
.sidebar-changer:hover{

color: #ffffff;
box-shadow: 0 0 15px rgba(137, 186, 232, 0.8);
transition: 0.3s;
padding: 4px 5px;

}
.question-item .title, 
.question-item small, 
.card-text {
font-size: 12px !important;
}
.select2-container--default .select2-selection--single {
  height: 30px;                /* ارتفاع بیشتر */
  border-radius: 8px;          /* گوشه گرد */
  border: 1px solid #aaa;
 
  font-size: 10px;
}

/* متن placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
  font-size: 10px;

}

/* فیلد سرچ داخل dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 6px;
  font-size: 10px;
}

/* hover روی گزینه‌ها */
.select2-results__option--highlighted {
  background-color: #3cc2f7 !important;
  color: white !important;
  

}
.select2-results__option {
  font-size: 10px;   /* کوچیک‌تر */
 /* فاصله داخلی متعادل */
}
.select2-results__option--highlighted {
  background-color: #eedc6b !important;  /* سبز مثلا */
  color: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #333;         /* رنگ متن */
  font-size: 10px;
  font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #aaa;
  font-style: italic;
}