/*email: lynpawzengine@gmail.com*/
/*---------custom------------*/
body {
    margin: 0px;
    font: 9pt Monospace, "Courier New";
    background: #000000;
    overflow-x: hidden;
}

.home-shell {
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 0 24px 40px;
}


input, textarea, select {
    margin: 0;
    color: #00ff00;
    background-color: #000;
    border: 1px solid #145814;
    font: 9pt Monospace, "Courier New";
}
button {
    color: #0fff0f;
    background: #2b4b16;
    border: 1px solid #127012;
}
::placeholder {
  color: #29df29;
  opacity: 1; /* Firefox */
}   

input[type="text"]:focus {
  background: black;
  border: 1px solid #00ff00;
  outline: none;
}

.search-container {
    text-align: center;
    margin: 30px auto;
    margin-bottom: 30px;
}

#logo {
    font-size: 10pt;
    line-height: 1.2;
    margin-bottom: 20px;
}

.component-search {
    margin: 20px 0;
}

.component-search input {
    width: 55%;
    padding: 12px 16px;
    border: 1px solid #00ff00;
    background-color: #000;
    color: #00ff00;
    font-size: 14px;
    outline: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.component-search input:focus {
    border-color: #90ff6c;
    box-shadow: 0 0 0 3px rgba(144, 255, 108, 0.2);
}

#searchInput{
    width: 40%;
}

#searchButton{
    margin-left: -17px;
}
/*#resultsContainer{*/
/*    width: 100%;*/
/*}*/

a{
 text-decoration: none;
}

.style2 {color: #00FF00}
.style3 {color: #009900}
.style4 {color: #006600}
.style5 {color: #00CC00}
.style6 {color: #003300}
.style8 {color: #33CC00} 
.style9 {
    font-weight: bold;
    color: #33CC00
} 

#content-result{
    display: none;
}
.container {
    display: flex;
    /*height: 100vh;*/ /* Full screen height */
}
.left {
    width: 20%;
    padding: 20px;
    overflow-y: auto;
    /*border-right: 1px solid #ccc;*/
}
.right {
    width: 80%;
    padding: 20px;
    position: relative;
}


.live-activity-card{
    margin-top: 30px;
    padding: 16px;
    border: 1px solid #009900;
    background: rgba(0, 153, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 255, 0, 0.1);
}

.live-activity-card > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
}

.live-activity-card > div:first-child span {
    font-size: 14px !important;
}

/*---------custom------------*/
.home-stats-row{
    box-shadow: 0 -4px 18px rgba(0, 255, 0, 0.15);
    gap: 12px;
    margin-top: 30px;
}
.home-stats-content{
   flex: 1; 
   border: 1px solid #009900; 
   padding: 14px 12px; 
   background: rgba(0, 153, 0, 0.08);
   text-align: center;
   border-radius: 8px;
   transition: all 0.3s ease;
}

.home-stats-content:hover {
   border-color: #00ff00;
   background: rgba(0, 153, 0, 0.12);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
}

.home-stats-content > div:first-child {
   font-size: 11px !important;
   margin-bottom: 6px;
}

.home-stats-content > div:last-child {
   font-size: 16px !important;
   font-weight: bold;
}

input[type="text"] {
    width: 300px;
    padding: 10px;
    margin-right: 10px;
}
button {
    padding: 10px;
}
.results {
    display: none; /* remove this*/
    margin-top: 5px;
}

.result-content {
    padding-right: 10px;
}

.result-tabs {
    color: #009900;
    width: 68%;
    margin-bottom: 20px;
}
.tabs {
    display: flex;
    width: 100%;
    border: 1px solid #377706;
    justify-content: space-around;
    border-radius: 6px;
    overflow: hidden;
}

.tab {
    cursor: pointer;
    padding: 12px 20px;
    flex: 1;
    text-align: center;
    border-right: 1px solid #377706;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background: rgba(0, 153, 0, 0.1);
}

.tab.active {
    font-weight: bold;
    background: #163002;
    color: #00ff00;
    border-bottom: 3px solid #00ff00;
}

.tab-content {
    display: none;
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #377706;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
}

/* Custom scrollbar styling for tab-content */
.tab-content::-webkit-scrollbar {
    width: 6px;
}

.tab-content::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb {
    background: #54aa24;
    border-radius: 3px;
}

/* Firefox scrollbar */
.tab-content {
    scrollbar-width: thin;
    scrollbar-color: #54aa24 #1a1a1a;
}

.tab-content.active {
    display: block;
}

/* Ensure banner-response content is properly formatted within scrollable area */
.banner-response {
    width: 100%;
    box-sizing: border-box;
}

.banner-response pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.copy-popup {
    position: fixed;
    background-color: #1a2c13;
    color: #00FF00;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #2a970e;
    z-index: 1000;
    animation: fadeInOut 2s ease-in-out;
    pointer-events: none;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    15% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 600px) {
    .tab-content {
        max-height: 300px; /* Smaller height for mobile */
    }
}
.active {
    display: block;
}
.deactive {
    display: none;
}
.component-search button {
  padding: 12px 24px;
  margin-left: 10px;
  border: 1px solid #00ff00;
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.1) 0%, rgba(144, 255, 108, 0.1) 100%);
  color: #00ff00;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.component-search button:hover {
  background: linear-gradient(135deg, #00ff00 0%, #90ff6c 100%);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 255, 0, 0.3);
}
.result-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #377706;
    background-color: #100e0e;
    display: flex;
    
}
.result-item .ip {
    font-weight: bold;
    font-size: 1.1em;
}
.result-item .details {
    font-size: 0.9em;
    color: #666;
    width: 345px;
}
.pagination {
    /*display: none;*/
    margin-top: 20px;
}
.pagination button {
    margin-right: 5px;
    padding: 5px 10px;
}
.hidden {
    display: none;
}
/* top country*/
.top-countries h3{
    color: #60b619;
}
.top-countries {
    margin-bottom: 20px;
}
.top-countries h3 {
    margin-bottom: 10px;
}
.top-countries ul {
    list-style-type: none;
    padding: 0;
}
.top-countries li {
    padding: 5px 0;
    font-weight: bold;
    font: 9pt Monospace, "Courier New";
    color: #009900;
}
.scrollable-div {
    width: 100%;
    height: 200px;
    border: 1px solid #2a970e;
    border-radius: 6px;
    padding: 10px;
    overflow: auto;
    white-space: pre;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
}
.banner-content{
    margin-top: -15px;
    color: #00FF00;
}

/* Skeleton loading for search results */
.results-skeleton {
    margin-top: 10px;
}

.results-skeleton-layout {
    display: flex;
    border: 1px solid #377706;
    background-color: #100e0e;
}

.results-skeleton-left {
    width: 345px;
    padding: 10px;
}

.results-skeleton-right {
    flex: 1;
    padding: 10px;
}

.results-skeleton .skeleton-line {
    height: 10px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #003300 0%, #026602 50%, #003300 100%);
    animation: skeleton-pulse 1.3s ease-in-out infinite;
}

.results-skeleton .skeleton-line.short { width: 40%; }
.results-skeleton .skeleton-line.medium { width: 70%; }
.results-skeleton .skeleton-line.long { width: 90%; }

.results-skeleton .skeleton-header {
    height: 28px;
    border: 1px solid #377706;
    background: #163002;
    animation: skeleton-pulse 1.3s ease-in-out infinite;
}

.results-skeleton .skeleton-body {
    margin-top: 8px;
    border: 1px solid #377706;
    background: #050505;
    padding: 8px;
}

.results-skeleton .skeleton-text-line {
    height: 10px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #003300 0%, #026602 50%, #003300 100%);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.results-skeleton .skeleton-text-line.wide {
    width: 90%;
}

@keyframes skeleton-pulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.85; }
    100% { opacity: 0.3; }
}

.tab span:hover {
    color: #00FF00;
}  

/*map style*/
.map-container {
    width: 100%;
}

/* custom map*/
.svgMap-country{
    stroke: #0b7211 !important; 
    fill:  #07ff15 !important; 
}
.svgMap-map-controls-wrapper{
    display: none !important;
}
.svgMap-map-wrapper {
    position: relative !important; 
    width: 100% !important;
    padding-top: 50% !important;
    overflow: hidden !important;
    background: #121314 !important;
    color: #111 !important;
}
.svgMap-tooltip {
    background-color: #100e0e !important;
    color: #009900 !important;
    border-radius: 6px !important;
}

.svgMap-tooltip .svgMap-tooltip-pointer:after {
    background: #100e0e !important
}

.svgMap-tooltip .svgMap-tooltip-flag { display: none !important; }

/* styling typing*/
.typing-effect-search {
    /*white-space: pre;*/
    color: #009900;
    margin-top: 4px;
    margin-right: 0;
    text-align: left;
}

.typing-effect {
    /*white-space: pre;*/
    color: #009900;
    margin-top: 4px;
    margin-right: 0;
    text-align: left;
    display: flex;
}
.typing-effect-left{
    width: 26%;
}
.typing-effect-center{
    width: 50%;
    flex:1; 
    text-align:left;
}
.typing-effect-right{
    width: 26%;
}

#activity-live .live-row {
    line-height: 1.4;
}

#pause-live:hover {
    background: #009900 !important;
    color: #000000 !important;
}

.content-body {
    border-top: 1px solid #377706;
}

#typing{
    /* position: fixed; */
    position: absolute;
    z-index: -1;    
    margin-left: 5px;
}

/*...*/
.deleteBtn{
    padding: 5px !important;
}
.btn-active{
    color: #11d911;
}
.btn-deactive{
    color: #499d16;
}
.pagination{
    display:flex;
}

/* Spinner Styles */
.spinner {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
}
.spinner svg {
    width: 100%;
    height: 100%;
    stroke: #333;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    animation: spin 1s linear infinite;
}
.spinner circle {
    stroke: rgb(144 211 69);
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes dash {
    0% {
        stroke-dasharray: 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 150;
        stroke-dashoffset: -75;
    }
    100% {
        stroke-dasharray: 150;
        stroke-dashoffset: -150;
    }
}

/* Popup Container (Initially hidden) */
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-content {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: fadeInCenter 0.3s ease-in-out;
    position: relative;
}

/* Success state */
.popup-content:not(.error) {
    background-color: rgba(26, 44, 19, 0.95);
    border: 1px solid #2a970e;
    box-shadow: 0 2px 10px rgba(0, 255, 0, 0.2);
}

/* Error state */
.popup-content.error {
    background-color: rgba(44, 19, 19, 0.95);
    border: 1px solid #970e0e;
    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.2);
}

#infoMsg {
    font-size: 16px;
    line-height: 1.4;
    display: block;
}

/* Success message color */
#infoMsg:not(.error) {
    color: #00FF00;
}

/* Error message color */
#infoMsg.error {
    color: #FF3333;
}

@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#infoMsg {
    color: var(--message-color, #00FF00);
    font-size: 16px;
    line-height: 1.4;
    display: block;
}

#infoMsg.error {
    color: #ff0000;
}

.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: #1ccf3e;
}

.input-group{
    text-align: center;
    display: flex;
    border: 1px solid #38a31d;
    width: 59%;
    height: 30px;
    margin-bottom: 10px;
    margin-left: 105px;
}
.inputbox{
    margin-right: 0px !important;
}

.input-password {
    width: 300px;
    padding: 10px;
}

.input-timer {
    width: 190px !important;
    padding: 10px !important;
}

.modal-footer{
    text-align: center;
}

#notFound{
    display: none;
}
.service-contents{
    border: 1px solid #10e014;
    border-radius: 18px;
    cursor: pointer;
    height: 19px;
    line-height: 17px;
    padding: 0px 12px;
    text-align: center;
    display: flex;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.collapse-button .ip-port{
    position: absolute;
    left: -137px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

/* Style for collapsible content */
.collapse-content,
.collapse-content-cve {
    display: none; /* Hidden by default */
    padding: 10px;
    border: 1px solid #023c03;
    border-top: none;
    background-color: #060505;
    white-space: pre-line; /* Treat Enter as <br> */
    color: #00FF00;
    margin-top: -45px;
}

.collapse-icon {
    font-weight: bold;
    margin-left: 10px;
}

/* Optional: Style for the button */
.collapse-button {
    padding: 0 12px;
    background: #004000;
    color: #00ff00;
    border-top: 1px solid #002c00;
    border-left: 1px solid #002c00;
    border-right: 1px solid #008000;
    border-bottom: 1px solid #008000;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    margin-top: -70px;
    height: 32px;
    line-height: 1;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* anchor inner elements */
}

.collapse-button:hover {
    background-color: #048104;
}

.full-content{
    color: #00FF00;
    display: block;
    width: 100%;
    word-wrap: break-word; /* Wrap long words */
    overflow: hidden; /* Hide overflow if needed */
}

.full-content-cve{
    color: #00FF00;
    display: block;
    width: 100%;
    word-wrap: break-word; /* Wrap long words */
    overflow: hidden; /* Hide overflow if needed */

/* 
    --tw-text-opacity: 1;
    color: rgb(98 102 96); */
}


/*footer*/
.content-footer{
	border-top: 1px solid #145814;
	width: 100%;
	background: radial-gradient(circle at top, rgba(0,255,0,0.12), #000 55%);
	position: relative;
	margin-top: 60px;
	box-shadow: 0 -4px 18px rgba(0, 255, 0, 0.15);
}

.footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0;
	position: relative;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	align-items: center;
	position: relative;
}

.footer-left {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* left side hugs the left */
    margin-left: -120px;
}

.footer-left a {
	    color: #fff;
	    margin-right: 15px;
	    text-decoration: none;
}

.footer-left a svg {
	    width: 24px;
	    height: 24px;
	    fill: #00FF00;
	    transition: transform 0.2s ease-out, filter 0.2s ease-out, fill 0.2s ease-out;
}

.footer-right p {
	margin: 0;
}

.footer-icon {
	position: relative;
}

.footer-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(0, 255, 0, 0.35);
	transform: translate(-50%, -50%);
	opacity: 0.25;
	box-shadow: 0 0 6px rgba(0, 255, 0, 0.25);
}

.footer-icon:hover svg {
	transform: translateY(-1px) scale(1.05);
	filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.6));
}

.footer-right .style2 {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 9px;
}

.footer-right {
	text-align: right; /* align text to the right within right side */
    margin-right: -120px;
}

#tabHome{
    display: none;
}

ul.scn-content-tabs{
    display: flex;
    padding: 2px;
    margin-right: 5px;
    cursor: pointer;
}

.lbl-tabs{
    padding: 2px;
    margin-right: 5px;
    cursor: pointer;
    border-bottom: 0.1rem solid rgb(20 85 8);
}

.level-medium {
    background: linear-gradient(to left, rgba(237, 183, 12, 0.3), rgba(237, 183, 12, 0)) !important;
}

.span-level-medium {
    background: linear-gradient(to right, rgba(237, 183, 12, 0.3), rgba(237, 183, 12, 0)) !important;
}

.lbl-level-medium {
    border: 0px !important;
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity));
    text-transform: uppercase;
    background: rgb(131 107 30);
    padding-right: 12px;
    padding-top: 3px;
}

.level-critical {
    background: linear-gradient(to left, rgba(225, 29, 72, 0.3), rgba(237, 183, 12, 0)) !important;
}

.span-level-critical {
    background: linear-gradient(to right, rgba(225, 29, 72, 0.3), rgba(237, 183, 12, 0)) !important;
}

.lbl-level-critical {
    border: 0px !important;
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity));
    text-transform: uppercase;
    background: rgb(225, 29, 72, 0.3);
    padding-right: 12px;
    padding-top: 3px;
}

.level-high {
    background: linear-gradient(to left, rgba(251, 146, 60, 0.3), rgba(237, 183, 12, 0)) !important;
}
.span-level-high {
    background: linear-gradient(to right, rgba(251, 146, 60, 0.3), rgba(237, 183, 12, 0)) !important;
}

.lbl-level-high {
    border: 0px !important;
    --tw-text-opacity: 1;
    color: rgb(255 147 91 / var(--tw-text-opacity));
    text-transform: uppercase;
    background: rgb(251, 146, 60, 0.3);
    padding-right: 12px;
    padding-top: 3px;
}


.level-low {
    background: linear-gradient(to left, rgba(129, 140, 248, 0.3), rgba(237, 183, 12, 0)) !important;
}
.span-level-low {
    background: linear-gradient(to right, rgba(129, 140, 248, 0.3), rgba(237, 183, 12, 0)) !important;
}

.lbl-level-low {
    border: 0px !important;
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity));
    text-transform: uppercase;
    background: rgb(129, 140, 248, 0.3);
    padding-right: 12px;
    padding-top: 3px;
}



/*----suggestions-search----*/

.suggestions {
    color: #00ff00;
    background: #121111;
    overflow-y: auto;
    width: 507px;
    z-index: 1000;
    margin-top: -1px;
    text-align: left;
    position: absolute;
    left: 688px;
    transform: translateX(-50%);
    margin-left: 32px;
}

.suggestions-home {
    color: #00ff00;
    background: #121111;
    border: 1px solid #00ff00;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 300px;
    width: 497px;
    z-index: 1000;
    margin-top: -2px;
    margin-left: -296px;
    text-align: left;
    position: absolute;
    left: 50%;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
}

#clearHistoryButton{
    color: #00ff00;
}

.suggestions-style{
    left: 299px !important;
    width: 656px;
}

.clear-item{
    background-color: transparent !important;
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    padding: 10px 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.clear-item:hover {
    background: rgba(255, 0, 0, 0.1) !important;
}

.suggestion-item {
    color: #33CC00;
    text-align: left;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    padding-left: 20px;
    cursor: pointer;
    background: #1b1a1a;
}
/*--------------------------*/


/*---------------SETTING--------------*/
.setting-container {
    display: flex;
    margin: 20px;
}

.setting-grouping-info{
    display: inline-grid;
}
.setting-custom-username-label{
    font-size: 25px;
    padding: 7px;
}
.setting-info-username{
    color: #29bc29;
    background: linear-gradient(to right, rgb(67 215 29 / 30%), rgba(237, 183, 12, 0));
}

.setting-info-container {
    height: 30px;
    width: 30%;
}

.setting-header-title{
    border-bottom: 1px solid #328e0a;
    padding: 5px 25px;
}

.setting-info-label{
    color: #29bc29;
    margin-top: 25px;
}
.setting-input-group {
    text-align: center;
    display: flex;
    border: 1px solid #38a31d;
    width: 30%;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.setting-group-content{
    padding: 20px 25px;
}
.setting-tabs {
    width: 200px;
    border-right: 1px solid #ccc;
    padding: 20px;
}
.setting-content {
    width: 72%;
    border-radius: 1.5rem;
    border: 1px solid #328e0a;    
    background: linear-gradient(to left, rgb(44 217 0 / 30%), rgba(237, 183, 12, 0));
}

.setting-sidebar{
    width: 15%;
    padding: 0px 45px;
}

.setting-tab-button {
    display: block;
    width: 100%;
    padding: 10px;
    /* margin-bottom: 5px; */
    background: linear-gradient(to right, rgb(44 217 0 / 30%), rgba(237, 183, 12, 0));
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    color: #0f9311;
    border: 1px solid #328e0a;
}

.setting-tab-button.active {
    color: #00FF00;    
    background-color: #345223;
}

.setting-tab-content {
    flex-grow: 1;
    padding: 20px;
}

.setting-tab-panel {
    display: none;
}

.setting-tab-panel.active {
    display: block;
}
/*------------------*/




.stat-status-content{
    margin-top: 16px; 
    display: flex; 
    justify-content: space-between; 
    gap: 12px;    
}



/* Responsive styles */
@media (max-width: 600px) {

    .typing-effect-left{
        width: 0%;
    }

    #tabHome{
        display: block;
    }
    .stat-status-content{
        width: 300px;   
    }
    #searchInput {
        width: 90%;
        display: block;
        margin: 0 auto 8px;
    }
    #searchButton {
        display: inline-block;
        margin-left: 0;
        padding: 0px 18px;
        height: 22px;
    }
    .typing-effect{
        margin-right: 0;
        margin-left: 0;
        margin-top: 8px;
        text-align: left;
    }
    .left{
        display: none; /* hide temporary */
    }
    .result-item{
        display: inherit;
    }
    .result-tabs{
        width: 100%;
        padding: 25px 1px;
    }
    #resultSearch{
        margin-left: 20px;
    }
    .result-content{
        padding-bottom: 20px;
    }
    .scrollable-div{
        width: 100%;
        height: 200px;
    }
    .collapse-button{
        width: 100%;
        box-sizing: border-box;
    }
    .collapse-content{
        width: 100%;
        box-sizing: border-box;
    }
    .collapse-content-cve{
        width: 100%;
        box-sizing: border-box;
    }
    .right{
        width: 100%;
        padding: 0;
    }
    .pagination{
        justify-content: center;
    }
    .pagination button{
        margin-right: 5px;
        padding: 1px 0px;
    }
    #paginationContainer-top{
        display: flex;
    }
    #nextPage{
        padding: 1px 5px;
    }
    .btn-deactive {
        width: 20px;
    }
    .btn-active{
        width: 20px;
    }

    .modal-content{
        width: unset;
    }
    .input-group{
        margin-left: 45px;
        width: 260px;
    }
    .timeSpan span {
        margin-right: 7px;
    }
    .popup-content{
        width: 320px;
    }


    .footer-content{
        display: unset;
    }
    .footer-left{
        display: flex;
        justify-content: center;
        padding-bottom: 8px;
    }
    .footer-right{
        text-align: center;
    }



    .content-navbar{
        padding: 0px 0px;
    }
    

    /* Home layout tweaks for mobile */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .home-shell {
        margin: 20px auto 0;
        padding: 0 16px 40px;
        max-width: 100%;
        overflow-x: hidden;
    }

    #logo {
        max-width: 100%;
        overflow-x: hidden;
    }

    #logo pre {
        font-size: 8px;
        overflow-x: auto;
        white-space: pre;
    }

    .stat-status-content {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .home-stats-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .home-stats-content {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .home-stats-content > div:first-child {
        font-size: 10px !important;
        word-wrap: break-word;
    }

    .home-stats-content > div:last-child {
        font-size: 18px !important;
        word-wrap: break-word;
    }

    .live-activity-card {
        margin-top: 20px;
        padding: 14px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .component-search {
        margin: 16px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .component-search input {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        padding: 12px 14px;
        box-sizing: border-box;
    }

    .component-search button {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 10px;
        padding: 12px 20px;
        box-sizing: border-box;
    }

    .typing-effect {
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: 13px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .suggestions-home {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }

    /*---------------SETTING--------------*/
    .setting-tab-button{
        padding: 12px 10px;
    }
    .setting-sidebar{
        width: 108px;
        padding: 1px 8px;
    } 
    .setting-content{
        width: 65%;
    }
    .setting-info-container{
        height: unset;
        width: unset;
    }
    .setting-input-group{
        width: 100%;
    }
    .setting-group-content{
        padding: 17px 7px;
    }
    .setting-info-label{
        text-align: center;
    }

    .suggestions {
        left: 163px;
        width: 313px;
        margin-left: 33px;
        margin-top: -41px;
    }

    .suggestions-home {
        left: 50%;
        width: calc(100% - 40px);
        max-width: 497px;
        transform: translateX(-50%);
        margin-left: 0;
        margin-top: -2px;
    }

    .suggestions-style{
        left: 163px !important;
        width: 349px !important;
        margin-top: 22px;
    }

    .component-search{
        display: flex;
        height: 28px;
    }

    #notFoundContent{
        display: none;
    }
}