/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}:root {
  --tf-bg-1: #05070d;
  --tf-bg-2: #0a1020;
  --tf-panel: rgba(10, 15, 26, 0.88);
  --tf-panel-strong: rgba(13, 21, 38, 0.95);
  --tf-cyan: #00eaff;
  --tf-cyan-soft: #8eefff;
  --tf-violet: #7c3aed;
  --tf-text: #e6f0ff;
  --tf-text-soft: #9fb3d9;
  --tf-border: rgba(0, 234, 255, 0.24);
}

html,
body {
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 234, 255, 0.12), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(124, 58, 237, 0.16), transparent 30%),
    linear-gradient(180deg, var(--tf-bg-2), var(--tf-bg-1)) !important;
  color: var(--tf-text) !important;
  font-family: "Segoe UI", "Inter", "Roboto", sans-serif !important;
}

.login-ui {
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 234, 255, 0.12), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(124, 58, 237, 0.16), transparent 30%),
    linear-gradient(180deg, var(--tf-bg-2), var(--tf-bg-1)) !important;
  color: var(--tf-text) !important;
}

.login-ui .login-dialog {
  background: var(--tf-panel) !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 28px rgba(0, 234, 255, 0.10),
    0 20px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px);
}

.login-ui .logo {
  background: none !important;
  width: 100% !important;
  min-height: 140px !important;
  margin-bottom: 1rem !important;
  position: relative !important;
}

.login-ui .logo img,
.login-ui .logo svg {
  display: none !important;
}

.login-ui .logo::before {
  content: "";
  display: block;
  width: 82px;
  height: 82px;
  margin: 0 auto 14px auto;
  border: 2px solid rgba(0, 234, 255, 0.75);
  border-radius: 22px;
  transform: rotate(45deg);
  box-shadow:
    0 0 18px rgba(0, 234, 255, 0.28),
    inset 0 0 18px rgba(124, 58, 237, 0.18);
  background:
    linear-gradient(135deg, rgba(0, 234, 255, 0.12), rgba(124, 58, 237, 0.16));
}

.login-ui .logo::after {
  content: "THE FORCE PORTAL\A PHOENIX CLOUD SECURE ACCESS";
  white-space: pre;
  display: block;
  text-align: center;
  color: var(--tf-text);
  font-weight: 700;
  letter-spacing: 0.22rem;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.22);
}

.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui input[type="email"],
.login-ui .labeled-field input {
  background: rgba(5, 9, 17, 0.86) !important;
  color: var(--tf-text) !important;
  border: 1px solid rgba(0, 234, 255, 0.22) !important;
  border-radius: 10px !important;
}

.login-ui input:focus {
  outline: none !important;
  border-color: var(--tf-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.14) !important;
}

.login-ui button,
.login-ui input[type="submit"] {
  background:
    linear-gradient(135deg, rgba(0, 234, 255, 0.22), rgba(124, 58, 237, 0.28)),
    rgba(8, 13, 24, 0.96) !important;
  color: var(--tf-text) !important;
  border: 1px solid rgba(0, 234, 255, 0.36) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.10) !important;
}

.login-ui button:hover,
.login-ui input[type="submit"]:hover {
  border-color: rgba(0, 234, 255, 0.62) !important;
  box-shadow: 0 0 22px rgba(0, 234, 255, 0.16) !important;
}

.menu,
.header,
#menu,
.connection-list,
.settings,
.preferences,
.dialog,
.modal,
.panel {
  background-color: var(--tf-panel-strong) !important;
  color: var(--tf-text) !important;
  border-color: rgba(0, 234, 255, 0.14) !important;
}

a {
  color: var(--tf-cyan-soft) !important;
}

.display,
.displayOuter,
.client-view {
  background: #000 !important;
}