/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.tooltip-container {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* Optional: adds a dotted underline to indicate hoverable text */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}

.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */
    left: 50%;
    margin-left: -60px; /* Use half of the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

 a::before {
    content: "[";
  }
  
  a::after {
    content: "]";
}

 :root {
    --darkblue: #000b19;
    --darkviolet: #120019;
    --darkgreen: #000805;
    --orange: #fe8405;
    --yellow: #cccc00;
    --blue: #00aaff;
    --fadingyellow: #999900;
    --fadingorange: #de7304;
    --fadingblue: #0055ff;
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    font-family: Consolas, "Courier New", monospace;
    display: flex;
    flex-direction: column;
}


html {   
    background-position: right;
    /*Positioning*/
    background-repeat: no-repeat;
    /*Prevent showing multiple background images*/
    background-size: contain;
}

.main-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column; /* Ensure the content is laid out in a column */
    justify-content: center;
    align-items: center;
}

.content {
    width: 100%;
    max-width: 60vw;
    padding-top: 2.5em;
}

footer {
     flex-shrink: 0;
     width: 100%;
     text-align: center;
     padding: 10px 0;
}

.centered {
     text-align: center;
}

.bgimage {
    background-image: image-url("/assets/turm-b6310985.png");
    background-position: right;
    /*Positioning*/
    background-repeat: no-repeat;
    /*Prevent showing multiple background images*/
    background-size: contain;
}

.flicker {
    animation: flicker 3s infinite alternate;
}

.green {
    color: green; /* Change text color to green */
}

.red {
    color: red; /* Change text color to red */
}

.glow {
    text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 5px var(--yellow), 0 0 10px var(--orange), 0 0 40px var(--yellow), 0 0 80px var(--orange);
}

.green-glow {
    color: lime;
    text-shadow: 0 0 2px lime, 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 40px #00ff00, 0 0 80px #00ff00;
}

.h1 {
    text-align: center;
    font-size: 5vw;
    color: var(--orange);
    width: 100%;
}

.n-notice {
    color: green;
}

.n-alert {
    color: #ff0000
}

.n-notice,
.n-alert {
    width: 100%;
    max-width: 800px; /* Match the max-width of the content */
    text-align: center; /* Center the text inside the notices */
    margin-bottom: 10px; /* Add some space below the notices */
}


.problem {
    padding-left: 20vw;
    padding-right: 20vw;
}

.w100 {
    width: 100%;
}

.sample-input {
    white-space: pre; /* Preserve whitespace and line breaks */
    font-family: monospace; /* Use a monospace font to align characters properly */
    /*background-color: #f5f5f5;  Optional: Add a background color for better visibility */
    padding: 10px; /* Optional: Add some padding for better readability */
    /*border: 1px solid #ccc;  Optional: Add a border for better visibility */
    margin: 10px 0; /* Optional: Add some margin for spacing */
    display: inline-block;

}

.grid {
    letter-spacing: .4em;
}

@keyframes flicker {
    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    82%,
    100% {
        color: var(--orange);
        text-shadow: 0 0 5px rgb(255, 255, 255), 0 0 10px var(--yellow), 0 0 60px var(--orange), 0 0 140px var(--yellow), 0 0 180px var(--orange);
    }
    24%,
    55%,
    99% {
        color: #333;
        text-shadow: 0 0 5px #333;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    border-top: 1px solid #fa0;
}

.data-table th,
.data-table td {
    padding: 0.5em 1.4em 0.5em 0.6em;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #1e1e1e;
    white-space: nowrap;
}

.data-table th {
    color: var(--orange);
    font-size: 0.8em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 2px solid #fa0;
    padding-bottom: 0.6em;
}

.data-table th a {
    color: var(--orange);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.data-table th a::before,
.data-table th a::after {
    content: none;
}

.data-table th.sort-active {
    color: #ffcc44;
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
}

.data-table th.sort-active a {
    color: #ffcc44;
}

.data-table tbody tr {
    transition: background-color 0.1s, box-shadow 0.1s;
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

.data-table tbody tr:hover {
    background-color: rgba(255, 170, 0, 0.06);
    box-shadow: inset 3px 0 0 #fa0;
}

input, textarea {
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.7);
    font-family: inherit;
    color: inherit;
    border: 1px solid #fa0;
    font-size: 1em;
    padding: 5px;
    min-width: 11vw;
}

a {
    color: #ffaa00;
    text-decoration: none;
}

#logout {
    position: fixed;
    right: 20px;
    top: 20px;
}

#back {
    position: fixed;
    left: 20px;
    top: 20px;
}

#status {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#admin {
    background-color: coral;
    color: black;
    padding: 10px;
}

#logo {
    position: fixed;
    bottom: 5px;
    left: 5px;
}

#maindiv {
    max-height: 90vh;
}