/*
 * 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}/* Hotel Am Kaisersaal – Guacamole 1.6.0 login branding v1.6
   IMPORTANT: This styles Guacamole's EXISTING login form. No second form/card is painted. */

.login-ui {
    min-height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    color: #3b302b !important;
    background-color: #f5eadc !important;
    background-image: url('app/ext/hotel-am-kaisersaal-branding-v172/resources/images/login-background-v16.jpg') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Hide Guacamole's stock logo/version only on the login page. */
.login-ui .login-dialog .logo,
.login-ui .login-dialog .version {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* One single real login card: the original Guacamole dialog. */
.login-ui .login-dialog {
    position: absolute !important;
    left: 50% !important;
    top: 62% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    width: 36rem !important;
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 9.1rem 2.5rem 2.4rem !important;
    background: rgba(255,250,244,.985) !important;
    border: 1px solid rgba(173,142,114,.20) !important;
    border-radius: 1.15rem !important;
    box-shadow: 0 1rem 2.5rem rgba(94,62,42,.18) !important;
}

/* Real hotel header above the real dialog. */
.login-ui .login-dialog::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 2.0rem) !important;
    transform: translateX(-50%) !important;
    width: 44rem !important;
    height: 13.5rem !important;
    max-width: 86vw !important;
    background: url('app/ext/hotel-am-kaisersaal-branding-v172/resources/images/brand-header-v16.png') center bottom / contain no-repeat !important;
    pointer-events: none !important;
}

/* Remote heading inside the card, including a monitor/phone pictogram. */
.login-ui .login-dialog::after {
    content: "Remote" !important;
    position: absolute !important;
    left: 50% !important;
    top: 2.35rem !important;
    transform: translateX(-50%) !important;
    min-height: 4.8rem !important;
    padding-left: 5.6rem !important;
    display: flex !important;
    align-items: center !important;
    color: #8f0d12 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 3.05rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='58' viewBox='0 0 78 58'%3E%3Cg fill='none' stroke='%238f0d12' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='48' height='37' rx='3'/%3E%3Cpath d='M17 50h20M27 40v10'/%3E%3Crect x='48' y='18' width='27' height='37' rx='4' fill='%23fffaf4'/%3E%3Cpath d='M58 48h7'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 4.7rem auto !important;
}

/* Form layout. */
.login-ui .login-dialog table,
.login-ui .login-dialog tbody,
.login-ui .login-dialog tr,
.login-ui .login-dialog td {
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-ui .login-dialog table {
    border-collapse: separate !important;
    border-spacing: 0 1.15rem !important;
}

.login-ui .login-dialog td {
    display: block !important;
    padding: 0 !important;
}

/* Keep the inputs, hide only Guacamole's visible labels. */
.login-ui .login-dialog td:first-child:not(:only-child),
.login-ui .login-dialog label {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input[type="email"],
.login-ui .login-dialog input:not([type]) {
    width: 100% !important;
    height: 5rem !important;
    min-height: 5rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 1.35rem 0 5rem !important;
    color: #3e3936 !important;
    background-color: #fff !important;
    border: 1px solid #d7d2cb !important;
    border-radius: .58rem !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.025) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.68rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* Username icon. */
.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="email"],
.login-ui .login-dialog input:not([type]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23999da0' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='22' cy='13' r='7'/%3E%3Cpath d='M9 36c0-8 5.8-12 13-12s13 4 13 12'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 1.35rem center !important;
    background-size: 2.55rem 2.55rem !important;
}

/* Password icon. */
.login-ui .login-dialog input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23999da0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='19' width='22' height='18' rx='2'/%3E%3Cpath d='M16 19v-5a6 6 0 0 1 12 0v5'/%3E%3Cpath d='M22 26v5'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 1.35rem center !important;
    background-size: 2.55rem 2.55rem !important;
}

.login-ui .login-dialog input::placeholder {
    color: #929598 !important;
    opacity: 1 !important;
}

.login-ui .login-dialog input:focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.login-ui .login-dialog input:focus {
    outline: none !important;
    border-color: #9b1b1f !important;
    box-shadow: 0 0 0 2px rgba(143,13,18,.12) !important;
}

/* Style only the real Guacamole login button. */
.login-ui .login-dialog button,
.login-ui .login-dialog input[type="submit"],
.login-ui .login-dialog .button {
    width: 100% !important;
    height: 5rem !important;
    min-height: 5rem !important;
    box-sizing: border-box !important;
    margin: .1rem 0 0 !important;
    padding: 0 1rem !important;
    color: #fff !important;
    background: #970b10 !important;
    border: 1px solid #970b10 !important;
    border-radius: .52rem !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.login-ui .login-dialog button:hover,
.login-ui .login-dialog input[type="submit"]:hover,
.login-ui .login-dialog .button:hover {
    background: #7f090d !important;
    border-color: #7f090d !important;
}

/* Errors: hidden if empty, visible when Guacamole supplies text. */
html body .login-ui > .login-error:empty,
html body .login-ui .login-dialog .login-error:empty,
html body .login-ui .login-dialog .error-message:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}

html body .login-ui > .login-error:not(:empty),
html body .login-ui .login-dialog .login-error:not(:empty),
html body .login-ui .login-dialog .error-message:not(:empty),
html body .login-ui .login-dialog .notification {
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    margin: 0 0 1rem !important;
    padding: .8rem 1rem !important;
    color: #781326 !important;
    background: #fbe6eb !important;
    border: 1px solid #d88a9b !important;
    border-radius: .45rem !important;
    font-weight: 600 !important;
}

/* Keep the authenticated Guacamole interface untouched. */
html body:not(:has(.login-ui)) {
    background: initial;
}

@media (max-width: 900px), (max-height: 760px) {
    .login-ui .login-dialog {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 31rem !important;
        margin: 16.5rem auto 2rem !important;
        padding: 7.5rem 1.5rem 1.6rem !important;
    }

    .login-ui .login-dialog::before {
        width: 35rem !important;
        height: 12.5rem !important;
        bottom: calc(100% + 1.2rem) !important;
    }

    .login-ui .login-dialog::after {
        top: 2rem !important;
        font-size: 2.55rem !important;
        min-height: 4rem !important;
        padding-left: 4.8rem !important;
        background-size: 4rem auto !important;
    }

    .login-ui .login-dialog input[type="text"],
    .login-ui .login-dialog input[type="password"],
    .login-ui .login-dialog input[type="email"],
    .login-ui .login-dialog input:not([type]),
    .login-ui .login-dialog button,
    .login-ui .login-dialog input[type="submit"],
    .login-ui .login-dialog .button {
        height: 4.2rem !important;
        min-height: 4.2rem !important;
        font-size: 1.4rem !important;
    }
}