@font-face {
  font-family: "Satoshi";
  src:
       url("fonts/Satoshi-Medium.ttf") format("opentype");
}

*{
  font-family: "Satoshi", Arial, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #141718;
  height: 100vh;
  height: 100dvh; /* iPhone dynamic viewport height */
  overflow: hidden;
}

.app-container {
  flex-direction: column;
  height: -moz-available;
  display: flex;
  background: #090909;
  height: 100vh;
  height: 100dvh; /* iPhone dynamic viewport height */
  min-height: -webkit-fill-available;
  align-items: start;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.headerbutton{
  font-family: "Satoshi", Arial, sans-serif;
  display: flex;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.449);
  width: fit-content;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  height: 26px;
  padding: 0px 10px;
  border-radius: 4px;
  text-wrap: nowrap;
  cursor: pointer;
  transition: 0.3s ease;

}

.headerbutton:hover{
  border: 1px solid #ffffff17;
  color: rgb(255, 255, 255);

}

.headerbutton_selected{
  font-family: "Satoshi", Arial, sans-serif;
  display: flex;
  background: transparent;

  font-size: 12px;
  color: #ffffff;
  width: fit-content;
  padding: 0px 10px;
  border: 1px solid #adadad17;
  align-items: center;
  justify-content: space-between;
  background-color: #bbbbbb1a;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;

}
.dportal::after {
  content: "";
  display: none;
}

.dportal:hover::after {
  content: " Coming Soon!";
  display: flex;
  font-size: 8px;
}

/* Add this to your CSS file */
.flash-yellow {
  color: rgb(0, 89, 255);
    transition: color 0.1s ease-in-out;
  }
  
  
  
.topbar {
  display: flex;
  align-items: center;
  height: 46px;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  max-width: -webkit-fill-available;

  min-width: -webkit-fill-available;
  background-color: #3737372b;
}
.topbar_mobile{
  display: none;
  align-items: center;
  height: 46px;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  max-width: -webkit-fill-available;

  min-width: -webkit-fill-available;
  background-color: #3737372b;
  padding-right: 7px;
}
.centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 10px;
}


.modelplan:hover{
  color: white;
}
.userarea {
  flex-direction: row;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px;
  border-radius: 2px;
  color: rgb(144, 144, 144);
  font-weight: 300;
  font-size: 11px;
  gap: 10px;

}

.user{
  flex-direction: row;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 300;
  font-size: 11px;
  gap: 10px;
  color: white;

}



.signout{
  flex-direction: row;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  justify-content: space-between;
  cursor: pointer;

  padding: 5px;
  color: rgb(255, 255, 255);
  font-weight: 300;
  font-size: 12px;
  gap: 10px;
  line-height: 8px;

}

.signout:hover{
  color: rgb(255, 255, 255);
}



.mainapp{
display: flex;
  flex-direction: row;
  width: -webkit-fill-available;
  width: -moz-available;
  height: -webkit-fill-available;
  height: -moz-available;
  align-items: center;
  overflow: hidden;
}



.centralpanel_chat {
display: flex;
  flex-direction: column;
  align-items: center;

  width: -webkit-fill-available;
  width: -moz-available;
  height: -webkit-fill-available;
  height: -moz-available;
  order: 0;
  min-width: 100px;

}

.centralpanel_workbench {
  display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
    order: 0;
    min-width: 100px;
    margin-bottom: 14px;
  }
  


.button {
  width: 27px;
  height: 27px;
  background-color: #070707;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color  ;
  justify-content: center;
}
.button2 {
  width: fit-content;
  height: fit-content;
  background-color: #070707;
  border: none;
  outline: none;
  cursor: pointer;
}





.start{
  background-color: rgb(134 134 134);
  color: white;
  height: 40px;
  width: -webkit-fill-available;
  width: -moz-available;
  border: none;
  padding: 10px;
  border-radius: 9px;
  height: 50px;
  cursor: pointer;
  opacity: 20%;
  transition: 0.3s ease;
}

.start:hover{
 opacity: 100;
 background-color: #3C38FF;
}

.back{
  background-color: transparent;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px
}

.switch{
  
    background-color: transparent;
    color: rgb(129, 129, 129);
    height: 40px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.switch:hover{
   color: #ffffff;
   }
   
.button:hover {
  background-color: #000000;
}



.g1{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}




.button4{
  width: -webkit-fill-available;
  width: -moz-available;
  height: 50px;
  color: #545454;
  color: #252c2f;
  background-color: transparent;
  outline: solid 1px #23282d;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color;
}

.button4:hover {
  color: white;
background-color:#23282d ;
}




.hidebutton{
background-color: rgba(0, 0, 0, 0);
width: 14px;
height: 14px;
border: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.4;
}

.blur-text {
  filter: blur(3px);
}




.slot_walletbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 540px;
  width: -moz-available;
  height: fit-content;
  padding: 9px;
  align-items: center;
  gap: 20px;
  border-radius: 14px 14px 0px 0px;
  font-size: 10px;
  background-color: #16191e;
}

.slot_contain{
  display: flex;
  flex-direction: column;
  min-width: 490px;
  background-color: #3d48571f;
  gap: 10px;
  padding: 10px;
  border-radius: 0px 0px 9px 9px;
}


/* Style the buttons to look like tabs */
.tablink {
  color: rgb(71, 71, 71);
  background-color: #070707;
  cursor: pointer;
  padding: 2px 3px;
  font-size: 17px;
  width: fit-content;
  border: none;
  outline: none;
  text-align: center;
 
  font-size: 10px;
  letter-spacing: 1px;
}

.tablink:hover {
  color: white;
}

.tablink.active {
  color: white;
}


.tablink:focus {
  color: white;
}

/* Style the tab content */
.tabcontent {
  width: inherit;
  display: flex;
  border-top: none;
  color: white;
  font-weight: 500;
  font-size: 12px;
}



.custom-delete-button {
  background-color: transparent;
  color: #545454;
  cursor: pointer;
  border: none;
  transition: color ;
  font-size: 10px;
  /* Add other desired styles */
}

.custom-delete-button:hover {
  background-color: red;
  color: white;
  /* Add other desired styles */
}

.select {
  position: absolute;
  right: 0;
  background-color: black; /* Set the background color to black */
  color: white; /* Set the text color to white */
  border: none; /* Remove the border */
  outline: none; /* Remove the outline */
  padding: 5px; /* Adjust the padding as needed */
  font-size: 10px; /* Adjust the font size as needed */
 -webkit-appearance: none; /* Remove default arrow icon */
}

.select1::-ms-expand {
  display: none; /* Remove default arrow icon in IE */
}


.modal {
  display: none;
  position: absolute;
  z-index: 99999999999999999999999999999999999999999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #211e75;
  align-items: center;
}
.form{
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  height: -webkit-fill-available;
  height: -moz-available;;

  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.forminput{
  padding: 10px;
  width: -webkit-fill-available;
  width: -moz-available;
  height: 19px;
  background-color: #3b3b3b29;
  border: none;
  outline: 1px solid #2b2b2b;
  padding: 15px;
  color: white;
  font-weight: 300;
  align-items: center;
  border-radius: 9px;
}





#customInput:disabled {
  background-color: #0b0b0b;
  color: #808080;
}

.modal-content {
  display: flex;
  justify-content: center;
  background-color: #101010;
  flex-direction: column;
  padding: 12px;
  width: 500px !important;
  min-width: 500px;
  align-items: center;
  height: -webkit-fill-available;
  height: -moz-available;
  gap: 20px;
  font-size: 12px;
  color: white;
}


.login_image{
  display: flex;
  align-items: center;
  justify-content: center;
  width: -webkit-fill-available ;
  width: -moz-available;
  height: -webkit-fill-available;
  height: -moz-available;
}


.close {
  color: #0099ff;
  float: right;
  font-size: 28px;
  font-weight: 200;
  transition: color;
  width: fit-content;
  height: fit-content;
}

.close:hover,
.close:focus {
  color: rgb(255, 255, 255);
  text-decoration: none;
  cursor: pointer;
}

.settingscoloumn{
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  gap: 20px;
}

.settings-tabcontent {
  display: flex;
  width: inherit;
  padding: 0px;
  border-top: none;
  gap: 20px;
  flex-direction: column;
}

.settings-tablinks {
  background-color: transparent;
  border: none;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 0px;
  height: fit-content;
}






.walletstate{
  justify-content: center;
  align-items: center;
  display: flex;
  color: white;
  outline: solid 1px #141414;
  width: fit-content;

  font-weight: 300;
  transition: color ;
  transition: background-color;
  cursor: pointer;
  color: #545454;
  background-color: transparent;
  border: none;
  height: 30px;
}

.walletstate:hover{
  background-color: #141414;
  color: white;
}

.managegroup{
  display: inline-flex;
  flex-direction: row;
  gap: 5px
}













.selected {
  color: white;
}





.main{
display: flex;
  background-color: transparent;
  flex-direction: column;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  height: -moz-available;
  width: -moz-available;
  gap: 20px;
  justify-content: center;
  align-items: center;

}


.leaderboard_panel{
  display: flex;
  background-color: transparent;

  height: -webkit-fill-available;
  height: -moz-available;

  width: -webkit-fill-available;
  width: -moz-available;
  z-index: 50;
  align-items: end;
  flex-direction: column;
  gap: 10px;

}

.datapanelskinny{
  display: flex;

  width: -webkit-fill-available;
  width: -moz-available;
  height: 100%;
  padding: 2px;
  gap: 8px;
  background-color: #37373726;
  border: solid 1px #2222229e;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  flex-direction: column;
  color: white;

}



.co_panel{
  display: flex;

  width: -webkit-fill-available;
  width: -moz-available;
  height: 100%;
  padding: 2px;
  gap: 8px;
  background-color: #37373726;
  border: solid 1px #2222229e;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  flex-direction: column;
  color: white;

}


.tt_panel{
  display: flex;

  width: -webkit-fill-available;
  width: -moz-available;
  height: 100%;
  padding: 2px;
  gap: 8px;
  background-color: #37373726;
  border: solid 1px #2222229e;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  flex-direction: column;
  color: white;

}

.chat_panel{
  display: flex;

  width: -webkit-fill-available;
  width: -moz-available;
  height: 100%;
  padding: 2px;
  gap: 8px;
  background-color: #37373726;

  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  color: white;

}

.panel_header{
  display: flex;
  flex-direction: row;
  width: -webkit-fill-available;
  width: -moz-available;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding-bottom: 4px;
  max-height: 26px;
}



.chat_header_buttons{
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;

}

.chat_button_wrapper{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

}
.model_view{
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  color: rgba(255, 255, 255, 0.546);
   font-size: 11px;
}

.interaction{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  border-radius: 4px;
  height: 30px;
  border: 1px solid #4a4a4a6e;
  background-color: transparent;
transition: 0.3s ease;
cursor: pointer;
}

.interaction:hover{
background-color: rgb(35, 35, 35);
}
.chat_size{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  border-radius: 4px;
  height: 30px;
  border: 1px solid #4a4a4a6e;
  background-color: transparent;
transition: 0.3s ease;
cursor: pointer;
}

.chat_size:hover{
background-color: rgb(35, 35, 35);
}


.chatbox{
  display: flex;
  justify-content: end;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  max-width: 777px;
  border-radius: 11px;
  height: -webkit-fill-available;
  height: -moz-available;
  flex-direction: column-reverse;
  overflow: auto;
  gap: 10px;
  padding: 7px;
  background-color: #1b1b1b;
}
.co_system_message {
  color: #828282 !important;
}



.user_message_row{
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  height: fit-content;
  width: -webkit-fill-available;
  width: -moz-available;
}


.bot_message_row{
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: fit-content;
  width: -webkit-fill-available;
  width: -moz-available;
}

.message_small_image{
  display: flex;
  width: 10px;
  height: 5px;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 3px;
  scale: 80%;
}




.user_message_container{
  display: flex;
  flex-direction: column;
  height: fit-content;
  gap: 10px;
  width: -webkit-fill-available;
  width: -moz-available;
  padding: 10px;
  border-radius: 7px;
  background-color: #171717;
  border: 1px solid #a2a2a21a;
}

.bot_message_container{
  display: flex;
  flex-direction: column;
  height: fit-content;
  gap: 10px;
  padding: 10px;
  width: -webkit-fill-available;
  width: -moz-available;
  border-radius: 7px;
  border: 1px solid #a2a2a21a;
  background-color: #72727221;
}


.user_title{
display: flex;
flex-direction: row;
gap: 10px;
font-size: 10px;
color: rgba(255, 255, 255, 0.391);
}

.bot_title{
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-size: 10px;
  line-height: 1px;
  align-items: center;
  color: rgb(164 162 255);
}

.user_message{
font-size: 12px;
display: flex;
width: -webkit-fill-available;
width: -moz-available;
height: fit-content;
flex-direction: column;
overflow: auto;

}

.bot_message{
  font-size: 12px;
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  height: fit-content;
  flex-direction: column;
  white-space: pre-line;

}
.code-block {
  background-color: #161616;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  display: flex;
  font-size: 10px;
  gap: 4px;
  margin: -23px 0px;

  flex-direction: column;
  border-radius: 7px;
}

.code_copy{
  display: flex;
  flex-direction: row;
  gap: 1px;
  width: 80px;
  height: 20px;
  justify-content: space-between;
  border-radius: 4px;
  align-items: center;
  background-color: transparent;
  border: none;
  white-space: nowrap;
  font-size: 10px;
  cursor: pointer;
  font-family: monospace;
  opacity: 70%;
  color: white;
}

.code_copy:hover{
opacity: 100%;
}

.code-block-header{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background-color: transparent;
  font-size: 10px;
  font-family: monospace;
  color: #ffffff87;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  border-radius: 4px;
}

.chatbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  border-radius: 11px;
  height: 48px;
  border: 1px solid #4a4a4a6e;
  background-color: #1b1b1b00;
  padding: 5px 6px 5px 15px;
  transition: 0.3s ease;
  font-size: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.506);

}
.chatbar:hover{
  background-color: rgb(35, 35, 35);
}

.chatbar_type{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  border-radius: 11px;
  height: 48px;
  border: 1px solid #4a4a4a6e;
  background-color: #1b1b1b00;
  padding: 5px 6px 5px 15px;
  transition: 0.3s ease;
  font-size: 12px;
  cursor: pointer;
  color: rgb(255, 255, 255);

}
.chatbar:hover{
  background-color: rgb(35, 35, 35);
}

.chatbar_input{
  max-width: 100%;
  width: 100%;
  color: white;
  background-color: transparent;
  border: none;
}

.chatbar_input:focus{
  outline: none;
        border:none;
        box-shadow: none;
}

.chat_title{
  color: rgba(255, 255, 255, 0.546);
  font-size: 11px;
  display: flex;
  gap: 4px;
  margin: 10px 0px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s ease;
  border-radius: 4px;
}
.chat_title:hover{
background-color: #00000082;
}


.sendmessage_inactive{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  border-radius: 8px;
  height: 30px;
  border: 1px solid #4a4a4a6e;
  background-color: #343434;
  opacity: 50%;
}

.sendmessage_inactive:hover{
background-color: rgb(35, 35, 35);
}


.sendmessage_active{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  border-radius: 8px;
  height: 30px;
  border: 1px solid #4a4a4a6e;
  background-color: #ffffff;
  transition: 0.3s ease;
  cursor: pointer;
}

.sendmessage_active:hover{
background-color: rgb(35, 35, 35);
}

.chatbar_footer_container{

  display: flex;
  flex-direction: row;
  gap: 3px;
  padding: 8px 9px;
  max-width: 777px;
  justify-content: space-between;
  width: -webkit-fill-available;
  width: -moz-available;
  align-items: center;

}

.model_status_container{

  display: flex;
  flex-direction: row;
  gap: 3px;
  height: fit-content;
width: fit-content;
  align-items: center;

}

.model_status{
  font-size: 9px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  padding: 3px 6px;

  color: rgb(255 255 255 / 77%);
  width: fit-content;
  align-items: center;
  border-radius: 4px;

}


.workbench_main_container{

  display: flex;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  width: -moz-available;
  height: -moz-available;
  gap: 10px;
  margin-bottom: 34px;
}  


.workbench_menu_wrapper{
  display: flex; 
  justify-content:  space-between;
  width: -webkit-fill-available;
  width: -moz-available;
  align-items: center;

}
.workbench_menu_container{
  display: none;
  flex-direction: row;
  gap: 2px;
  height: fit-content;

  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid #ffffff1c;
  border-radius: 7px;
  padding: 3px;

}

.workbench_menu_active{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 4px;
  height: 20px;
  border: none;
  background-color: #282828;
  transition: 0.3s ease;
  cursor: pointer;
  color: white;
  font-size: 9px;
  padding: 0px 12px;
  text-wrap: nowrap;
}

.workbench_menu_active:hover{
  background-color: rgb(35, 35, 35);
  }
  

  .workbench_menu_inactive{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border-radius: 4px;
    height: 20px;
    border: none;
    background-color: transparent;
    transition: 0.3s ease;
    cursor: pointer;
    font-size: 9px;
    padding: 0px 12px;
    color: rgba(255, 255, 255, 0.254);

  }
  
  .workbench_menu_inactive:hover{
    background-color: rgb(35, 35, 35);
    color: white;
    }


    .latency{
      color: #ffffff;
      font-size: 9px;
      justify-content: center;
      gap: 4px;
      display: flex;
      width: fit-content;
      height: 22px;
      padding: 0px 10px;
      align-items: center;
      border-radius: 4px;
      background-color: #2828286e;
    }
    

.co_container{
  width: -webkit-fill-available;
  width: -moz-available;
  height: -webkit-fill-available;;
  height: -moz-available;
  overflow: auto;
  
  padding: 10px;
}

.co_data{
  display: flex;
  background-color: transparent;
  width: -WEBKIT-FILL-AVAILABLE;
  width: -moz-available;
  height: fit-content;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  color: #ffffffd1;
  font-family: monospace;
font-size: 11px;
}


.tt_container{
  width: -WEBKIT-FILL-AVAILABLE;
  width: -moz-available;
  height: -webkit-fill-available;
  height: -moz-available;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 8px;
  margin: 0px 4px;
}



.tt_data_container{
  display: flex;
  background-color: transparent;
  width: -WEBKIT-FILL-AVAILABLE;
  width: -moz-available;
  height: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 7px;
  background-color: #00000054;
  flex-direction: row;

  color: white;
  transition: 0.3s ease;
  cursor: pointer;
}

.tt_data:hover{
  background-color: rgb(35, 35, 35);
}




.tt_sub_info{
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.487);
  gap: 4px;
  font-size: 10px;
}

.tt_title{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  gap: 4px;
  font-size: 10px;
  background-color: #ffffff1a;
  padding: 0px 7px;
  border-radius: 3px;
}

.tt_sub_data{
  display: flex;
  justify-content: start;
  align-items: center;
  color: white;
  gap: 4px;
  font-size: 10px;
  background-color: #ffffff1a;
  padding: 0px 7px;
  border-radius: 3px;
  text-wrap: nowrap;
  overflow: hidden;
  max-width: 150px;
  text-overflow: ellipsis;
}

.tb_container{
  display: flex;
  flex-direction: row;
  gap: 2px;
  height: fit-content;
  width: fit-content;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid #ffffff1c;
  border-radius: 7px;
  padding: 3px;
}

.tb_button_active{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 4px;
  height: 20px;
  border: none;
  background-color: #282828;
  transition: 0.3s ease;
  cursor: pointer;
  color: white;
  font-size: 9px;
  padding: 0px 12px;
  text-wrap: nowrap;
}

.tb_button_active:hover{
  background-color: rgb(35, 35, 35);
  }
  

  .tb_button_inactive{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border-radius: 4px;
    height: 20px;
    border: none;
    background-color: transparent;
  transition: 0.3s ease;
  cursor: pointer;  
  font-size: 9px;
  padding: 0px 12px;
  color: rgba(255, 255, 255, 0.254);
  }
  
  .tb_button_inactive:hover{
    background-color: rgb(35, 35, 35);
    color: white;
    }
    





.data_header{
  display: flex; flex-direction: row; width: -webkit-fill-available; width: -moz-available;  padding: 10px; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.546); font-size: 11px;
}

.header{
    display: flex; 
    flex-direction: row;
 justify-content: space-between;
width: -WEBKIT-FILL-AVAILABLE; 
width: -moz-available;
align-items: center;
font-size: 14px;

}

.copytrade_perfomance{
  display: flex;
  background-color: #1b1b1b;
  min-width: 700px;
  height: -webkit-fill-available;
  height: -moz-available;
  border:2px solid #ffffff14;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 10px;
}
.copytrade_panel{
  display: flex;
  background-color: #1b1b1b;
  min-width: 292px;
  max-width: 312px;
  height: fit-content;
  border: 2px solid #ffffff14;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0px 0px 70px 0px #181818;

}

.bluetext{
color: #ffffff;
font-size: 18px;
}


.bluebotton{
  color: rgb(156, 255, 34);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #232931;
  height: 32px;
  width: fit-content;
  border: 4px solid #00000052;
  font-size: 11px;
  border-radius: 12px;
  padding: 14px;
}

.addwallet{
    color: white;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
height: 32px;
width: 144px;
border: 1px solid #1F2427;
}

.network{
    font-size: 12px;
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 7px;
    color: greenyellow;
    text-shadow: 0 0 10px #00ff00; /* Green glow effect with one color */
}

.header_items{
  display: flex; 
  align-items: center;
  height: fit-content;
  width: -webkit-fill-available;
  width: -moz-available;
  justify-content: space-between;
}


.ranking_wallet{
  display: flex;
  background-color: #1b1e23;
  width: -webkit-fill-available;
  width: -moz-available;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  cursor: pointer;
  border-radius: 7px;
  border: 2px solid #2b2f39;
  color: white;
}

.ranking_wallet:hover{

  color: rgb(0, 119, 255);
}


.rank_status{
  display: flex;
  background-color: transparent;
  width: 40px;
  height: 25px;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}    


.tabs{
  display: flex; flex-direction: row; gap: 8px;
}

.tabs2{
  display: flex; flex-direction: row; gap: 14px;
}

.ranking_wallet_address{
  display: flex;
  background-color: transparent;
  width: fit-content;
  height: 35px;
  align-items: center;
  font-size: 14px;
  justify-content: center;
}    

.etherscan{
    display: flex;
    background-color: transparent; 
     width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border: none;
}    

.close {
  color: #46525e;
  float: right;
  font-size: 16px;
}

.close:hover,
.close:focus {
    color: rgb(255, 255, 255);
    text-decoration: none;
    cursor: pointer;
}


.docker {
  display: none;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000000;
  z-index: 100;
  font-size: 10px;
}

.docker-icon {
  padding: 10px;
  background-color: transparent;
  border: none;
  opacity: 20%;
  cursor: pointer;
}


.docker-icon:hover {
opacity: 100%;
}


.nrow{
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-end;
}



.dropdown_button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  border-radius: 4px;
  height: 20px;
  border: none;
  background-color: transparent;
transition: 0.3s ease;
cursor: pointer;
}



.dropdown_button:hover{
background-color: rgb(35, 35, 35);
}





@media (max-width: 800px) {




.chat_header_buttons{
  display: flex;
  justify-content: center;

  gap: 10px;
  align-items: center;

}

.panel_header{
  justify-content: space-between;
  align-items: start;
  max-height: fit-content;
}
.topbar{
  display: none;
}

.main{
  gap: 0px;
  background-color: #101010;
 
}
.chat_size{
  display: none;
}


.chat_panel{
  gap: 0px;
}

.co_panel{
  border-radius: 0px;
  display: none;
  padding: 0px;
}

.tt_panel{
  border-radius: 0px;
  display: flex;
  padding: 0px;
}

.centralpanel{
  padding: 0px;
  margin-bottom: 0px;
}

.topbar_mobile{
  display: flex;
}

.user_image_container{
  margin-right:0px !important ;
}

.chatbox{
  padding: 10px;
}


.headerbutton{
  font-size: 11px;
  padding: 0px 8px;

}
.headerbutton_selected{
  font-size: 11px;
  padding: 0px 8px;

}

.header_items{
  display: flex;
  width: fit-content;
  gap: 10px;
  justify-content: center;
}

.tabs{
  gap: 8px;
}

.model_view{
  gap: 8px;

}

.workbench_menu_wrapper{
  display: flex;
  padding: 3px;
  margin: 8px 10px;
  
  width: -webkit-fill-available;
  width: -moz-available;
}
.workbench_menu_container{
  display: flex;
}

.leaderboard_panel{
  flex-direction: column;
  padding: 0px !important;
  margin-bottom: 0px !important;
  gap: 0px !important;
}

.tt_title{
  font-size: 9px;
}
.tt_sub_info{
  font-size: 9px;
}

.co_data{
  font-size: 12px;
}


.workbench_main_container{
  padding: 0px !important;
  margin-bottom: 0px !important;
  overflow: hidden;
}
.data_header{
  display: none;
}

.login_image{
  display: none;
}


.chatbox_inactive{
  border: 0px !important;
  font-size: 14px !important;
  background-color: transparent !important;
  width: -webkit-fill-available !important;
  padding: 20px;
}

.welcome_action{
  font-size: 14px !important ;
}

.welcome_message{
  width: 100px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

}





@media (max-width: 421px) {



  }









.hidden {
  display: none;
}


.inputbox1{
  width: -webkit-fill-available;
  width: -moz-available;
  background-color: #2a2a2a;
  border: 1px solid #494949;
  color: #b0bac8;
  text-align: right;
  font-size: 12px;
  outline: none;
  font-weight: 100;
  border-radius: 10px;
  padding: 5px;
  height: 28px;
}

.inputbox2{
  width: -webkit-fill-available;
  width: -moz-available;
  background-color: #232931;
  outline: none;
  border: none;
  color: #b0bac8;
  text-align: center;
  font-size: 10px;
  font-weight: 100;
  padding: 7px;
  height: 21px;
  border-radius: 8px;
  width: 100px;
}

.inputbox2::-webkit-inner-spin-button,
.inputbox2::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inputbox1::-webkit-inner-spin-button,
.inputbox1::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.error-message {
  display: none;
  background-color: #ff0000;
  color: #ffffff;
  padding: 5px;
  margin-top: 5px;
}

.slide-down {
  animation: slide-down 0.5s ease-out;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.checkbox{
  background-color: red;
}
/* Hide the default checkbox */
.custom-checkbox input {
  display: none;
}

/* Create a new checkbox */
.custom-checkbox span {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #141718;
  outline: solid 2px #7474743d;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
}

/* Style the checkbox when checked */
.custom-checkbox input:checked + span {
  background: #006fb93d;
}

/* Style the checkbox 'tick' */
.custom-checkbox input:checked + span:after {
  content: '';
  position: absolute;
  left: 20%;
  top: 20%;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  outline: solid 1px #0000003d;
  background: rgb(255 190 0);
}

.import-row {
  display: flex;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
}

.import-row input {
  flex-grow: 1;
  margin-right: 10px; /* Adjust the margin as needed */
}

.invalid-input {
  border: 1px solid red;
}

.amountinput{
  width: -webkit-fill-available;
  width: -moz-available;
  background-color: #040404;
  outline: solid 1px #141414;
  border: none;
  color:white;
  text-align: center;
  font-size: 12px;
  font-weight: 100;
  padding: 7px;
  border-radius: 2px;
}

.disabled {
  background-color: #0b0b0b;
  color: white;
}


.snipemoduleheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  height: fit-content;
  color: #545454;
  font-size: 10px;
}

.snipemodeselection{
  color: white;
}


.srow{
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  color: #868686;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.srow2{
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  color: #545454;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}


.srow_wallet{
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  color: #ffffff;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  flex-direction: row;
}

.sbutton1{
  display: flex;
  align-items: center;
  color: #ffffff;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity;
  height: fit-content;
  padding: 0px;
  font-size: 10px;
  gap: 4px;
  opacity: 35%;
  text-decoration: none;
  font-weight: 300;
}
.sbutton1:hover{
  opacity: 100%;
}

.dropbtn{
  display: flex;
  align-items: center;
  color: #ffffff;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity;
  height: fit-content;
  padding: 0px;
  font-size: 12px;
  gap: 4px;
  opacity: 35%;
  font-weight: 300;
}

.dropbtn:hover{
  opacity: 100%;
}




.dropdown{
  position: relative;
  display: inline-block;
  color: white;
  background-color: #070707;
  border: none;
  flex-direction: row;

}

.dropdown-content {
display: none;
position: absolute;
min-width: 100px;
width: fit-content;
right: 0;  
z-index: 1;
background-color: #040404;
}


.dropdown-content a {
  color: white; /* White text */
  padding: 12px 16px;
  text-decoration: none;
  text-align: right;
  display: block;
}




.user_dropdown{
  display: none;
  position: fixed;
  right: 14px;
  background-color: rgb(16 16 16);
  min-width: 100px;
  padding: 12px 16px;
  color: white;
  margin-top: 9px;
  z-index: 999;
  border-radius: 4px;
  transition: 0.3s ease;;
}



.user_dropdown:hover {
  background-color: #1e1e1e;
}



.user_dropdown2{
  display: none;
  position: fixed;
  right: 14px;
  background-color: rgb(16 16 16);
  min-width: 100px;
  padding: 12px 16px;
  color: white;
  margin-top: 99px;
  z-index: 999;
  border-radius: 4px;
  transition: 0.3s ease;;
}


.user_dropdown2:hover {
  background-color: #1e1e1e;
}



.rowprofits{
  display: flex;
  color: #545454;
  gap: 10px;
  justify-content: space-between;
  width: 114px;
}

.stextdefault{
  color:white;
  font-weight: 300;
}

.modestateactive{
  color:rgb(217, 255, 0);
  font-weight: 300;
}

.modestateinactive{
  color:rgb(255, 76, 45);
  font-weight: 300;
}

.executebutton{
  width: -webkit-fill-available;
  width: -moz-available;
  justify-content: center;
  display: flex;
  font-size: 21px;
  padding: 16px;
  color: white;
  background-color: black;
  outline: solid 1px #202020;
  border: none;
  align-items: center;
  gap: 10px;
  height: 70px;
  opacity: 25%;
  border-radius: 21px;
  cursor: pointer;
  transition: opacity;
}

.executebutton:hover{
  opacity: 100%;
  background-color: #141414;
}

.executebutton2{
  width: max-content;
  height: 20px;
  justify-content: center;
  display: flex;
  font-size: 14px;
  padding: 14px 12px;
  color: white;
  background-color: #232931;
  outline: solid 1px #141414;
  border: none;
  align-items: center;
  opacity: 25%;
  border-radius: 14px;
  cursor: pointer;
  transition: opacity;
  transition: background-color;
  line-height: 10px;
}

.executebutton2:hover{
  opacity: 100%;
  background-color: #141414;
}


.snipeorders{
  z-index: 3;
  width: -webkit-fill-available;
  width: -moz-available;
  display: flex;
  gap: 10px;
  overflow: auto;
  flex-direction: column;
  height: 100vh;
  height: inherit;
  max-height: 1121px;
}



.ordertarget{
  font-size: 10px;
  color: white;
  font-weight: 300;
    text-shadow: 0px 0px 10px rgb(151, 151, 151);
}

.orderstatus_awaiting{
  font-size: 10px;
  color: rgb(255, 196, 0);
  font-weight: 300;
  text-shadow: 0px 0px 10px rgb(219, 192, 100);
}






.orderstatus_active{
  font-size: 10px;
  color:  rgb(156, 255, 34);
  font-weight: 300;
}


.snipeorderbox_amount{
  display: flex;
  flex-direction: row;
  Gap: 10px
}



.snipeorderbox_container{
  background: #1b1e23;
  padding: 16px;
  border: 1px solid #2b2f39;
  border-radius: 10px;
}

.snipeorderbox{
    display: flex;
  align-items: center;
  justify-content: space-between;
  width: -webkit-fill-available;
  width: -moz-available;
  color: #ffffffb5;
  font-size: 10px;
  border-bottom: none;
  padding: 3px 0px;
  background-color: transparent;
  font-weight: 300;
  cursor: pointer;
  transition: color;
   margin-bottom:0;
}


.snipeorderbox:hover{
  color: white;
}






  .snipeorder_button_stop{
    width: fit-content;
    border: solid 1px #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #737373;
    background-color: #232323;
    cursor: pointer;
    transition: 0.3s ease;
    height: 25px;
    padding: 15px;
    font-size: 10px;
    border-radius: 7px;
    gap: 4px;
    text-decoration: none;
    font-weight: 700;
  }

  .snipeorder_button_stop:hover{
    color: white;
    background-color: #141414;
  }
  

.activedot{
  display: block;
  width: 7px;
  height: 7px;
  background-color: rgb(156, 255, 34);
  border-radius: 25px;
}

.inactivedot{
  display: block;
  width: 5px;
  height: 5px;
  background-color: #404040;
}

.snipeorderbox_subdata_container{
display: flex;
flex-direction: column;
background-color: transparent;
width: -webkit-fill-available;
width: -moz-available;
min-height: 50px; 
height: fit-content;
align-items: center;

}

.snipeorderbox_subdata_row{
  display: flex;
  flex-direction: row;
  width: -webkit-fill-available;
  width: -moz-available;;
  justify-content: space-between;
  padding: 2px 0px;
  font-size: 10px;
}
.snipeorderbox_extra{
  display: flex;
  flex-direction: row;
  background-color:#191919;;
  width: -webkit-fill-available;
  width: -moz-available;
  height: 10px; align-items: center;
  padding:10px;
  justify-content: space-between;
  
}



.checkline{
  gap: 10px; justify-content: center; flex-direction: row; text-align: center; display: flex; color: white;font-size: 10px;  background-color: transparent;
}


/* Scrollbar Styles */
/* Webkit (Chrome, Safari, etc.) */
::-webkit-scrollbar {
  width: 9px;
  background-color: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #232931;
  border-radius: 4px;
}


* {
  scrollbar-width: thin;
  scrollbar-color:  #ffffff4a transparent;
}

*::-moz-scrollbar {
  width: 2px;
}

*::-moz-scrollbar-track {
  background: #000000;
}

*::-moz-scrollbar-thumb {
  background:  #ffffff4a;
  border-radius: 5px;
}

.hide-everything > :not(#portalmodal) {
  display: none !important;
}



.view_txn{
  color: #0073ff;
  font-size: 10px;
  border: none;
  font-weight: 700;
  background: none;
  padding: 0px;
  transition: 0.3s ease;
  cursor: pointer;
}


.view_txn:hover{
  color: #ffffff;

}

.user_image_container{
  width: 24px;
  height: 24px;
  display: flex;
  background: rgb(22 22 22);
  border-radius: 4px;
  color: white;
  border: 1px solid rgb(255 255 255 / 12%);
  font-weight: 800;
  align-items: center;
  justify-content: center;
margin-right: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #141414;
  top: 144px;
  flex-direction: column;
  margin-right: 12px;
  color: white;
  width: 271px;
  font-size: 11px;
  max-height: 400px;
  border-radius: 5px;
  overflow: auto;
  overflow-x: hidden;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content div {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: 0.3s;
}

.dropdown-content div:hover {
  background-color: #1e1e1e;
}

.user_initial{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}


.chatbox_inactive{
  width: 770px;
  height: -webkit-fill-available;
  height: -moz-available;
  flex-direction: column;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
}

.welcome_message{
  width: fit-content;
  text-wrap: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome_action{
  display: flex;
  cursor: pointer;
  color: rgb(112, 105, 255);
  border: none;
  background-color: transparent;
  font-size: 16px;
  transition: 0.3s ease;
}

.welcome_action:hover{
  color: white;
}

.welcome_image{
  width: 90px;
  border-radius: 14px;
  border: 1px solid #ffffff0a;

}

/* iOS Specific Height and Viewport Fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  
  .app-container {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
  
  .mainapp {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
  
  .centralpanel_chat {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
  
  .chat_panel {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .chatbox {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
  
  .chatbox_inactive {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
  
  /* Mobile keyboard handling */
  .chatbar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* iPhone Portrait Mode Fixes */
@media screen and (max-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
  
  .app-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .topbar_mobile {
    padding-top: env(safe-area-inset-top);
    flex-shrink: 0;
    height: auto !important;
    min-height: 46px;
  }
  
  .mainapp {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .centralpanel_chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }
  
  .leaderboard_panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  .chat_panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px !important;
  }
  
  .panel_header {
    flex-shrink: 0;
    padding: 8px 10px 4px 10px !important;
    max-height: 50px !important;
  }
  
  .chatbox {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px !important;
  }
  
  .chatbar_footer_container {
    flex-shrink: 0;
    padding: 5px 8px calc(env(safe-area-inset-bottom) + 5px) 8px !important;
  }
}

/* iPhone Landscape (Tilt) Mode Fixes */
@media screen and (max-height: 430px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  
  .app-container {
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .topbar_mobile {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left) !important;
    flex-shrink: 0;
    height: auto !important;
    min-height: 35px !important;
  }
  
  .mainapp {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left) !important;
    overflow: hidden;
  }
  
  .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }
  
  .leaderboard_panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  .chat_panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px !important;
  }
  
  .panel_header {
    flex-shrink: 0;
    padding: 3px 8px 2px 8px !important;
    max-height: 35px !important;
    min-height: 35px !important;
  }
  
  .chat_header_buttons {
    gap: 5px !important;
  }
  
  .model_view {
    font-size: 10px !important;
    gap: 5px !important;
  }
  
  .chatbox {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 3px !important;
    gap: 5px !important;
  }
  
  .chatbar_footer_container {
    flex-shrink: 0;
    padding: 2px 8px calc(env(safe-area-inset-bottom) + 2px) 8px !important;
  }
  
  .model_status {
    font-size: 8px !important;
    padding: 2px 4px !important;
  }
}