@import url("https://fonts.googleapis.com/css?family=Red+Hat+Mono");
@import url("https://fonts.googleapis.com/css?family=Kalam");
@import url("https://fonts.googleapis.com/css?family=JetBrains+Mono");

body {
    font-family: "JetBrains Mono";
    background: rgb(83 89 95) !important;
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(169, 169, 169, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(192, 192, 192, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

body.dark-mode {
    background: #ffffff !important;
    color: var(--text-dark) !important;
}

body.dark-mode::before {
    background: radial-gradient(circle at 20% 50%, rgba(105, 105, 105, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(128, 128, 128, 0.1) 0%, transparent 50%);
}

p {
    text-align: left !important;
    margin: 0 !important;
}

h3{
    font-family: "Kalam" !important;
}

button {
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

button:active {
    transform: scale(0.98);
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.scrollable-div {
    flex: 1;
    overflow-y: auto; /* Enables vertical scrolling */
  }
  

#json-input-text {
    width: 100%;
    height: 430px;
    box-sizing: border-box;
    /* This includes padding and border in the element's total width and height */
}

.hidden { display: none !important; }

.importJSONBtn {
    border-radius: 6px !important;
}

.importJSONFa {
    margin-right: 6px !important;
}

.json-card-body {
    width: 100%;
    height: 450px;
    box-sizing: border-box;
    padding: 10px;
    /* Optional padding for spacing */
}

.fa-paste-corner-dark {
    color: #212529;
    border: none !important;
    margin-top: 4px !important;
    float: left !important;
    font-size: 22px;
    background-color: #ffffff00 !important;
}

.fa-paste-corner-dark:hover {
    color: #bf0000;
}

.fa-paste-corner-light {
    color: #ffffff;
    border: none !important;
    margin-top: 4px !important;
    float: left !important;
    font-size: 22px;
    background-color: #ffffff00 !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.fa-paste-corner-light:hover {
    color: #4fc3f7;
    transform: scale(1.2) rotate(-10deg);
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

/* Copy Icon CSS */
.fa-clone-corner-light {
    color: white;
    background-color: #ffffff00 !important;
    border: none !important;
    margin-top: 4px !important;
    float: right !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.fa-clone-corner-light:hover {
    color: #81c784;
    transform: scale(1.2) rotate(10deg);
    text-shadow: 0 0 10px rgba(129, 199, 132, 0.5);
}

.fa-clone-corner-dark {
    color: #212529;
    background-color: #ffffff00 !important;
    border: none !important;
    margin-top: 4px !important;
    float: right !important;
}

.fa-clone-corner-dark:hover {
    color: #bf0000;
}

/* themes list css */
#themesSearchInput {
    border: 1px solid black !important;
}

#themesSearchInput:focus {
    box-shadow: 0 0 10px gold;
}

.themes-list-element {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid black !important;
}

.themes-list-element:hover {
    background-color: gold;
}

.themes-list-element.active,
.themes-list-element.active:hover {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 700;
}

body.dark-mode .themes-list-element.active,
body.dark-mode .themes-list-element.active:hover {
    background-color: #0b2d5c !important;
    color: #ffffff !important;
}

/* Scrollbar CSS */

/* width */
::-webkit-scrollbar {
    width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #808080, #696969);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(128, 128, 128, 0.3);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #696969, #a9a9a9);
    box-shadow: 0 0 15px rgba(128, 128, 128, 0.5);
}

.ace_marker-layer .highlight-chars {
    background-color: yellow; /* red transparent highlight */
    position: absolute;
    z-index: 5; /* higher than default selection */
  }

/* Heartbeat Animation */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.3);
    }
}