/**********************************************************************************************************************/
.select_enabled {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
.select_disabled {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
/**********************************************************************************************************************/
.black_shadow {
    text-shadow: -1px -1px 0 rgb(0, 0, 0),
    1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0),
    1px 1px 0 rgb(0, 0, 0) !important;
}
.black_shadow_deep {
    text-shadow: 0 0 5px black;
}
/**********************************************************************************************************************/
html:lang(ar) {
    font-size: 20px !important;
}
/**********************************************************************************************************************/
html, body {
    font-family: Kanit, Verdana;
    color: rgb(99, 168, 214);
    padding: 0px;
    margin: 0px;
    height: auto !important;
    min-height: 100vh;
    overscroll-behavior: auto /*contain*/;
    -webkit-overflow-scrolling: touch;
    /*overflow-y: auto;*/
}
/**********************************************************************************************************************/
table.rounded_table {
    font-size: 11px;
    border-collapse: separate !important;
    -webkit-border-collapse: separate; /* WebKit (Chrome, Safari) */
    -moz-border-collapse: separate; /* Mozilla Firefox */
    border-collapse: separate; /* Standard */
    border-spacing: 0px;
}
table.rounded_table th,
table.rounded_table td {
    padding: 3px;
}
table.rounded_table th {
    border: 1px solid rgb(75, 85, 104);
    border-right: 0px;
    border-bottom: 0px;
}
table.rounded_table th:first-child {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 6px 0 0 0 !important;
    border-right: 0px;
    border-bottom: 0px;
}
table.rounded_table th:last-child {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 0px 6px 0px 0px !important;
    border-right: 1px solid rgb(75, 85, 104) !important;
    border-bottom: 0px;
}
table.rounded_table td {
    border: 1px solid rgb(75, 85, 104);
    border-right: 0px;
    border-bottom: 0px;
}
table.rounded_table td:first-child {
    border: 1px solid rgb(75, 85, 104);
    border-right: 0px;
    border-bottom: 0px;
}
table.rounded_table tr:last-child td {
    border-top: 0px;
    border-bottom: 1px solid rgb(75, 85, 104);
    border-top: 1px solid rgb(75, 85, 104);
}
table.rounded_table tr td:last-child {
    border-right: 1px solid rgb(75, 85, 104) !important;
}
table.rounded_table tr:last-child td:first-child {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 0px 0px 0px 6px !important;
    border-right: 0px solid rgb(75, 85, 104) !important;
    border-top: 1px solid rgb(75, 85, 104);
}
table.rounded_table tr:last-child td:last-child {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 0px 0px 6px 0px !important;
    border-right: 1px solid rgb(75, 85, 104) !important;
    border-top: 1px solid rgb(75, 85, 104);
}
table.rounded_table_single {
    font-size: 11px;
    border-collapse: separate !important;
    -webkit-border-collapse: separate; /* WebKit (Chrome, Safari) */
    -moz-border-collapse: separate; /* Mozilla Firefox */
    border-collapse: separate; /* Standard */
    border-spacing: 0px;
}
table.rounded_table_single th,
table.rounded_table_single td {
    padding: 3px;
}
table.rounded_table_single td {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 6px 6px 6px 6px !important;
}
table.rounded_table_double {
    font-size: 11px;
    border-collapse: separate !important;
    -webkit-border-collapse: separate; /* WebKit (Chrome, Safari) */
    -moz-border-collapse: separate; /* Mozilla Firefox */
    border-collapse: separate; /* Standard */
    border-spacing: 0px;
}
table.rounded_table_double th,
table.rounded_table_double td {
    padding: 3px;
}
table.rounded_table_double th {
    border: 1px solid rgb(75, 85, 104);
}
table.rounded_table_double th:first-child {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 0px;
}
table.rounded_table_double td {
    border: 1px solid rgb(75, 85, 104);
    border-radius: 0 0 6px 6px !important;
}
/**********************************************************************************************************************/
::-webkit-scrollbar {
    width: 15px;
    border-radius: 6px 6px 6px 6px;
    border: 0px solid rgb(108, 193, 230);
}
::-webkit-scrollbar-track {
    background: #151E2D;
    border-radius: 6px 6px 6px 6px;
    border: 0px solid rgb(108, 193, 230);
}
/**********************************************************************************************************************/
.text_yellow_fade {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 0, 0) 0%,
        rgb(255, 255, 255) 50%,
        rgb(255, 255, 0) 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text_orange_fade {
    background: linear-gradient(
        to bottom,
        rgba(255, 165, 0, 0) 0%,
        rgb(255, 255, 255) 50%,
        rgb(255, 165, 0) 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.text_green_fade {
    background: linear-gradient(to bottom, rgba(28, 173, 60, 0) 0%, rgb(255, 255, 255) 50%, rgb(0, 255, 0) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text_red_fade {
    background: linear-gradient(to bottom, rgba(28, 173, 60, 0) 0%, rgb(255, 255, 255) 50%, rgb(255, 0, 0) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text_blue_fade {
    position: relative;
    display: inline-block;
    background: linear-gradient(to bottom, rgb(255, 255, 255) 20%, rgb(108, 193, 230) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; /* Set text color to transparent */
}
/**********************************************************************************************************************/
.underline_blue::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to bottom, rgb(255, 255, 255) 20%, rgb(108, 193, 230) 100%);
    z-index: -1; /* Move the underline below the text */
}
/**********************************************************************************************************************/
.logged_in_box {
    z-index: 10;
    position: fixed;
    top: -1px;
    right: 6px;
    background-color: #151E2D;
    padding-bottom: 6px;
    border-radius: 0px 0px 6px 6px;
    border: 1px solid rgb(108, 193, 230);
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
/**********************************************************************************************************************/
.button-red {
    background-color: transparent;
    border: 1px solid white; /* Changed to red equivalent */
    color:white;
    border-radius: 4px;
    cursor: pointer;
}
.button-red:disabled {
    cursor: not-allowed !important;
}
.button {
    background-color: transparent;
    border: 1px solid rgb(75, 85, 104);
    border-radius: 4px;
    cursor: pointer;
}
/**********************************************************************************************************************/
.dropdown {
    background-color: transparent;
    border: 1px solid rgb(75, 85, 104);
    border-radius: 4px;
    cursor: pointer;
    color:white;
}
.dropdown option {
    background-color: #f0f0f0;
    color: #333;
}
/**********************************************************************************************************************/
.button:disabled {
    cursor: not-allowed !important;
}
/**********************************************************************************************************************/
textarea {
    font: inherit;
    border-radius: 6px;
    color: rgb(108, 193, 230);
    background: linear-gradient(#151E2D, #232D36);
    border: 1px solid rgb(108, 193, 230);
    padding: 3px;
}
/**********************************************************************************************************************/
@keyframes glow-textbox-grow {
    0% {
        box-shadow: 0 0 15px currentColor;
    }
    50% {
        box-shadow: 0 0 20px currentColor;
    }
    100% {
        box-shadow: 0 0 15px currentColor;
    }
}
.glowable-textbox {
    position: relative;
    border-radius: 3px; /* Matches the original border-radius */
    animation: glow-textbox-grow 2s ease-out infinite; /* Reuse original animation */
    box-shadow: 0 0 15px white;
    pointer-events: auto; /* Ensure interaction remains intact */
}
.glowable {
    position: relative;
}
.glowable::before,
.glowable::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    box-shadow: 0 0 15px white;
    animation: glow-grow 2s ease-out infinite;
    border-radius:3px 3px 3px 3px;
    pointer-events: none;
}
.glowable_lime:after {
    box-shadow: 0 0 15px lime !important;
}
.glowable_green:after {
    box-shadow: 0 0 15px limegreen !important;
}
.glowable_yellow:after {
    box-shadow: 0 0 15px yellow !important;
}
.glowable::after {
    animation-delay: .66s;
}
.glowable::before {
    animation-delay: 1.33s;
}
/* iphone with webkit prefix? */
@-webkit-keyframes glow-grow {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale(1.0); transform: scale(1.0); }
}
@keyframes glow-grow {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: scale(1.0);
        opacity: 0;
    }
}
/**********************************************************************************************************************/
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/**********************************************************************************************************************/

.hacker-header {
    position: relative;
    overflow: hidden;
}

/* the moving white gloss */
.hacker-header::after {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 50%;   /* width of the white band */
    height: 100%;
    background: rgba(108, 193, 230, 0.05);
    transform: skewX(-50deg);
    animation: header-sweep 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* move it from left to right */
@keyframes header-sweep {
    0%   { left: -150%; }
    50%  { left: 150%; }
    100% { left: -150%; }
}

/* ensure your text sits above the sweep */
.hacker-header > span {
    position: relative;
    z-index: 2;
}

/***********************************************/

@keyframes cables-flicker {
    0%   { opacity: 1; }
    10%  { opacity: 0.95; }
    20%  { opacity: 0.85; }
    30%  { opacity: 0.9; }
    40%  { opacity: 0.75; }
    50%  { opacity: 0.8; }
    60%  { opacity: 0.95; }
    70%  { opacity: 0.9; }
    80%  { opacity: 0.65; }
    90%  { opacity: 0.7; }
    100% { opacity: 1; }
}


/**********************************************************************************************************************/
.div-with-bg {
    position: relative;
    z-index: 0;
    /*pointer-events: none !important; / * <== THIS */
}

.div-with-bg::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("/resources/img/backgrounds/matrix_greyscale_3-h.gif");
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.25;
    z-index: -2;

}

.div-with-bg::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: -1;
    background: linear-gradient(
        to right,
        black 0%,
        transparent 25%,
        transparent 75%,
        black 100%
    );
}
/**/
/**********************************************************************************************************************/
.flickering-cables {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%),
        url("/resources/img/backgrounds/cables6.png");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    z-index: -4;
    /*pointer-events: none !important;
    touch-action: none !important;*/
    animation: cables-flicker 3s infinite;
    will-change: opacity;
}
/**********************************************************************************************************************/
#background-visuals {
    position: fixed;
    inset: 0;
    z-index: -3;
    /*pointer-events: none !important;
    touch-action: none !important;*/
}

.bg-matrix {
    position: absolute;
    inset: 0;
    background-image: url("/resources/img/backgrounds/matrix_greyscale_3-h.gif");
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.25;
    z-index: -2;
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, black 0%, transparent 25%, transparent 75%, black 100%);
    z-index: -1;
}

.content-layer {
    position: relative;
    z-index: 0;
}

#cursor_particles_canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none;
}

/* Base checkbox style to match text fields */
input[type="checkbox"] {
    appearance: none; /* Remove default browser checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 20px;
    height: 20px;
    border: 2px solid #3a506b; /* Match textbox border color */
    border-radius: 4px; /* Same rounded corners as textboxes */
    background-color: #0a1a2f; /* Match textbox background */
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-in-out;
}

/* Checked state */
input[type="checkbox"]:checked {
    background-color: #3a506b; /* Fill with accent color */
    border-color: #66fcf1; /* Highlight border */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2212%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%205l3%203l7-7%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
}

/* Hover state */
input[type="checkbox"]:hover {
    border-color: #66fcf1;
}

/* Label alignment */
label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Style the hyperlink */
#terminalcursor {
    text-decoration: none;
    color: white;
    animation: flash 1s infinite; /* Flashing effect with 1s interval */
}

/* When hovering over the hyperlink, make it stay visible */
#terminalcursor:hover {
    opacity: 1;
    animation: none !important;
}

/* Style for the flashing box symbol */
.box-symbol {
    font-family: monospace;
}

/**********************************************************************************************************************/
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.conic-border {
    --c1: rgb(108,193,230);
    --c2: #FFFFFF;
    --bg: #FF0000;

    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,   /* inner fill */
        conic-gradient(
            from var(--angle),
            var(--c1) 100deg,
            var(--c2) 350deg,
            var(--c1) 360deg
        ) border-box !important;

    border: 1px solid transparent !important;  /* true border thickness */
    border-radius: 3px !important;
    background-clip: padding-box, border-box !important;

    animation: spin-angle 5s linear infinite !important;
}

@keyframes spin-angle {
    to { --angle: 360deg; }
}
/**********************************************************************************************************************/
select {

    font:inherit;
    border-radius: 6px 6px 6px 6px;
    color:rgb(108, 193, 230);
    background: linear-gradient(#151E2D, #232D36);
    border: 1px solid  rgb(108, 193, 230);
    border-radius: 5px;
    outline: none;

}

/* Optional: Adjust dropdown option colors */
select option {
    color:rgb(108, 193, 230);
    background-color: #232D36;
}

/* Optional: Styling for hover and active states on options */
select option:hover,
select option:active {
    background-color: #232D36;
}

/* For dropdown arrow customization, use a pseudo-element */
select::after {
    content: "▼"; /* Unicode for down arrow */
    position: absolute;
    right: 10px;
    pointer-events: none; /* Arrow will not block clicks */
}
select:focus {
    border-color:rgb(108, 193, 230);
}

/********************************/

.tooltip-container {
    position: relative;
    z-index:2147483646 !important;
}

.tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: pre;
    z-index:2147483646 !important;

}

.target-div:hover + .tooltip {
    visibility: visible;
    z-index:2147483646 !important;
}

/***/

/* wrapper is both the flex item and the clickable block */
.tooltip-container2 {
    position: relative;
    flex: 1 1 0;
    min-width: 0;               /* prevents long tooltips from forcing width */
    z-index: 20;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* hidden by default */
.tooltip2 {

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 3px;
    transition: opacity .12s ease, visibility .12s;
    z-index: 2147483646;
}

/* show when wrapper is hovered or focused */
.tooltip-container2:hover .tooltip2,
.tooltip-container2:focus-within .tooltip2 {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}



/********************************/

/**********************************************************************************************************************/

.share-buttons {
    display: flex;
    gap: 3px;
    justify-content: center;
    width: 100%;
    margin-top:5px;
}

.share-btn {
    width: 24px !important;
    height: 24px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;                /* ← IMPORTANT */
    margin: 0;
    line-height: 1;            /* ← IMPORTANT */
    box-sizing: border-box;

    background: rgb(23,29,40);
    border: 1px solid rgb(108,193,230);
    border-radius: 6px;
    color: rgb(108,193,230);
    text-decoration: none;

    appearance: none;          /* ← IMPORTANT */
    -webkit-appearance: none;
    font: inherit;
}


.share-btn:hover {
    background: rgb(23,29,40);
    color: white;
    border-color: white;
}

/**********************************************************************************************************************/