:root {
    --pallete-1-dark: #0b1320;
    --pallete-1-middle: #1c3f60;
    --pallete-1-warm: #b1d4e0;
    --pallete-1-light: #afc1d0;
    --pallete-1-lighter: #1e90ff;
    --pallete-1-contrast-top: #00bfff;
    --pallete-1-contrast-btn: #228B22;
    --pallete-1-contrast-btn-hover: #32CD32;
    --pallete-2-dark: #344e41;
    --pallete-2-middle: #ff0000;
    --pallete-2-warm: #588157;
    --pallete-2-light: #a3b18a;
    --pallete-2-lighter: #1e90ff;
    --pallete-2-contrast-top: #dad7cd;
    --pallete-2-contrast-btn: #228B22;
    --pallete-2-contrast-btn-hover: #32CD32;
    --pallete-3-dark: #160f29;
    --pallete-3-middle: #246a73;
    --pallete-3-warm: #f3dfc1;
    --pallete-3-light: #368f8b;
    --pallete-3-lighter: #1e90ff;
    --pallete-3-contrast-top: #ddbea8;
    --pallete-3-contrast-btn: #228B22;
    --pallete-3-contrast-btn-hover: #32CD32;
    --pallete-4-dark: #0b3954;
    --pallete-4-middle: #087e8b;
    --pallete-4-warm: #ea9ab2;
    --pallete-4-light: #ff5a5f;
    --pallete-4-lighter: #1e90ff;
    --pallete-4-contrast-top: #c81d25;
    --pallete-4-contrast-btn: #228B22;
    --pallete-4-contrast-btn-hover: #32CD32;
    --pallete-color-dark: var(--pallete-1-dark);
    --pallete-color-light: var(--pallete-1-light);
    --pallete-color-lighter: var(--pallete-1-lighter);
    --pallete-color-contrast-top: var(--pallete-1-contrast-top);
    --pallete-color-contrast-btn: var(--pallete-1-contrast-btn);
    --pallete-color-contrast-btn-hover: var(--pallete-1-contrast-btn-hover);
    --pallete-color-middle: var(--pallete-1-middle);
    --pallete-color-warm: var(--pallete-1-warm);
    --commands-background: var(--pallete-color-dark);
    --commands-text-color: var(--pallete-color-light);
    --commands-text-color-body: var(--pallete-color-light);
    --commands-text-color-title: var(--pallete-color-contrast-top);
    --commands-text-disabled: var(--pallete-color-light);
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'), url('/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono Bold';
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono Italic';
    src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Mono Light';
    src: url('/fonts/JetBrainsMono-Light.woff2') format('woff2');
}


.cs-font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.cs-font-mono-bold {
    font-family: 'JetBrains Mono Bold', monospace;
}

.cs-font-mono-light {
    font-family: 'JetBrains Mono Light', monospace;
}

.cs-font-mono-italic {
    font-family: 'JetBrains Mono Italic', monospace;
}

.cs-bg-contrast-top {
    background-color: var(--pallete-color-contrast-top);
}

.cs-bg-contrast-btn {
    background-color: var(--pallete-color-contrast-btn);
}

.cs-bg-contrast-btn:hover {
    background-color: var(--pallete-color-contrast-btn-hover);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 40px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.footer-link {
    font-size: 0.85em;
}

.bg-warm {
     background-color:var(--pallete-color-warm);
}

.session-ids {
    height: 1px;
    visibility: hidden;
}

input.session-cmd-input {
    border: 1px solid var(--commands-text-disabled);
    outline: none;
}

    input.session-cmd-input:focus {
        border: 2px solid var(--commands-text-color);
    }

.session-cmd-item-title {
    padding-left: 1px;
}

.info-subtle {
    display: block;
    font-size: 0.75rem; /* smaller than normal text */
    color: #6c757d; /* Bootstrap's secondary text color */
}

.info-badge {
    display: inline-block;
    font-size: 0.7rem;
    background-color: #e0f3ff;
    color: #007bff;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 500;
}

.info-muted {
    display: block;
    font-size: 0.8rem;
    font-style: italic;
    color: #999;
}


/* Style the dropdown box */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    z-index: 1050; /* higher than Bootstrap modals if needed */
}

/* Each item */
.ui-menu-item {
    list-style: none;
    padding: 2px 2px;
    cursor: pointer;
}

.ui-menu-item-wrapper {
    padding: 2px 2px;
    cursor: pointer;
}

/* Hover effect */
.ui-menu-item-wrapper.ui-state-active {
    background-color: #0d6efd; /* Bootstrap primary */
    color: white;
}

.content-main {
    min-height: 100px; /* or whatever your minimum is */
    max-height: calc(600px);
    overflow-y: auto; /* allow scrolling if content exceeds max-height */
}

.content-history-item {
    color: var(--commands-text-color);
    padding-left: 1px;
}

.content-tip-placeholder {
    width: 70px;
}

.cs-code-box {
    background-color: var(--commands-background);
    border-radius: 0.6rem;
    padding: 8px;
}

.cs-code-box-demo {
    height: 300px;
    width: 100%;
    overflow-y: auto;
}
.cs-code-box-working {
    min-height: 100px; /* or whatever your minimum is */
    max-height: calc(600px);
    overflow-y: auto; /* allow scrolling if content exceeds max-height */
}

.cs-code-item-box {
    padding: 0 0 2px 4px;
    margin-bottom: 2px;
}

.cs-code-item-title {
    font-family: 'JetBrains Mono Italic', monospace;
    font-size: 0.85em;
    color: var(--commands-text-color-title);
}

.cs-code-item-body {
    font-family: 'JetBrains Mono Bold', monospace;
    font-size: 1rem;
    color: var(--commands-text-color-body);
}

.cont-sep-vs {
    height:3vh;
}
.cont-sep-vm {
    height: 6vh;
}
.cont-sep-vl {
    height: 10vh;
}

.wave-top {
    height: 15vh;
}
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    background: url(../img/wave.png);
    background-size: 100vw 8vh;
}

.wave1 {
    animation: animate 20s linear infinite;
    z-index: 15;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
}

.wave2 {
    animation: animate2 15s linear infinite;
    z-index: 10;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 10px;
}

.wave3 {
    animation: animate 10s linear infinite;
    z-index: 5;
    opacity: 0.4;
    animation-delay: -2s;
    bottom: 15px;
}

.wave4 {
    animation: animate2 5s linear infinite;
    z-index: 1;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 20px;
}

@keyframes animate {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 100vw;
    }
}

@keyframes animate2 {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -100vw;
    }
}

@keyframes btn-pulse {
    0%, 100%
    {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.btn-custom {
    background-color: var(--pallete-color-contrast-btn);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease;
    font-family: system-ui, sans-serif;
    /* Animation */
    animation: btn-pulse 2s infinite;
}

.btn-custom:hover {
    background-color: var(--pallete-color-contrast-btn-hover);
    color: #e8f5e9;
}



.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: 250px;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

    .gsi-material-button:disabled .gsi-material-button-contents {
        opacity: 38%;
    }

    .gsi-material-button:disabled .gsi-material-button-icon {
        opacity: 38%;
    }

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

    .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
        background-color: #303030;
        opacity: 8%;
    }


.germany-flag::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
    background: linear-gradient(to bottom, black 33.33%, red 33.33%, red 66.66%, gold 66.66%);
    border: 1px solid #ccc;
}