/*
 * 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;

}
/* KL-Com Technology Sdn Bhd - Guacamole 1.6.0 final split login layout */
html, body { margin:0 !important; width:100% !important; height:100% !important; background:#fff !important; }

/* Guacamole login root */
div.login-ui { position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; display:block !important; background:#fff !important; overflow:hidden !important; }
.login-ui .login-dialog-middle { display:block !important; width:auto !important; height:auto !important; }

/* Left KL-Com branding panel */
.klcom-brand-panel { position:fixed !important; left:0 !important; top:0 !important; bottom:0 !important; width:54vw !important; height:100vh !important; box-sizing:border-box !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; overflow:hidden !important; background:linear-gradient(145deg,#78d34f 0%,#59c63d 55%,#3da92d 100%) !important; color:#fff !important; z-index:1 !important; }
.klcom-brand-panel::after { content:"" !important; position:absolute !important; width:520px !important; height:520px !important; right:-220px !important; bottom:-250px !important; border:55px solid rgba(255,255,255,.16) !important; border-radius:50% !important; box-sizing:border-box !important; }
.klcom-brand-inner { width:min(600px,82%) !important; position:relative !important; z-index:2 !important; text-align:center !important; padding-top:7vh !important; box-sizing:border-box !important; }
.klcom-brand-logo { display:block !important; width:170px !important; height:170px !important; object-fit:contain !important; background:rgba(255,255,255,.97) !important; border-radius:26px !important; padding:15px !important; box-sizing:border-box !important; margin:0 auto 28px auto !important; }
.klcom-company { font-size:clamp(22px,2.1vw,32px) !important; line-height:1.2 !important; font-weight:700 !important; letter-spacing:-.02em !important; margin-bottom:18px !important; }
.klcom-title { font-size:clamp(34px,4.0vw,58px) !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-.04em !important; margin-bottom:18px !important; text-transform:uppercase !important; }
.klcom-subtitle { max-width:470px !important; margin:0 auto !important; font-size:18px !important; line-height:1.55 !important; color:rgba(255,255,255,.9) !important; }
.klcom-footer { margin-top:54px !important; font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:rgba(255,255,255,.82) !important; }

/* Right login area */
.login-ui .login-dialog { position:fixed !important; left:54vw !important; top:0 !important; right:0 !important; bottom:0 !important; width:46vw !important; max-width:none !important; min-width:0 !important; height:100vh !important; min-height:100vh !important; box-sizing:border-box !important; transform:none !important; margin:0 !important; padding:48px clamp(34px,6vw,92px) !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; background:#fff !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#172019 !important; overflow-y:auto !important; z-index:10 !important; }
.login-ui .login-dialog form.login-form { width:100% !important; max-width:460px !important; margin:0 auto !important; display:flex !important; flex-direction:column !important; }
.login-ui .login-dialog::before { content:"Welcome Back!" !important; display:block !important; width:100% !important; max-width:460px !important; margin:0 auto 8px auto !important; color:#172019 !important; font-size:32px !important; line-height:1.2 !important; font-weight:700 !important; text-align:left !important; order:-3 !important; }
.login-ui .login-dialog::after { content:"Please sign in to continue to your remote desktop." !important; display:block !important; width:100% !important; max-width:460px !important; margin:0 auto 26px auto !important; color:#6b756e !important; font-size:14px !important; line-height:1.5 !important; text-align:left !important; order:-2 !important; }
.login-ui .login-dialog .logo, .login-ui .login-dialog .version { display:none !important; }

/* Real Guacamole dynamic fields */
.login-ui .login-dialog .login-fields { width:100% !important; margin:0 !important; }
.login-ui .login-dialog .login-fields .labeled-field { display:block !important; position:relative !important; z-index:1 !important; margin:0 0 20px 0 !important; padding:0 !important; }
.login-ui .login-dialog .login-fields .labeled-field .field-header { display:block !important; position:static !important; overflow:visible !important; z-index:2 !important; margin:0 0 7px 0 !important; padding:0 !important; color:#202820 !important; opacity:1 !important; font-size:14px !important; line-height:1.3 !important; font-weight:600 !important; text-align:left !important; }
.login-ui .login-dialog .login-fields .labeled-field input { display:block !important; width:100% !important; height:56px !important; box-sizing:border-box !important; border:1px solid #d8e2da !important; border-radius:12px !important; background:#fff !important; color:#172019 !important; box-shadow:0 2px 8px rgba(24,61,35,.05) !important; padding:0 16px !important; font-size:16px !important; }
.login-ui .login-dialog .login-fields .labeled-field input:focus { border-color:#62c944 !important; outline:none !important; box-shadow:0 0 0 3px rgba(98,201,68,.16) !important; }
.login-ui .login-dialog .login-fields .form-field { margin:0 !important; }

/* Login button */
.login-ui .login-dialog .buttons { width:100% !important; max-width:460px !important; margin:2px auto 0 auto !important; padding:0 !important; text-align:left !important; }
.login-ui .login-dialog input[type="submit"].login { display:block !important; width:100% !important; min-height:56px !important; margin:0 !important; padding:0 20px !important; border:0 !important; border-radius:12px !important; background:#5fc83f !important; color:#fff !important; font-size:16px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:0 8px 18px rgba(74,178,52,.20) !important; }
.login-ui .login-dialog input[type="submit"].login:hover { background:#4fb534 !important; }
.login-ui .login-dialog input[type="submit"].continue-login { display:none !important; }

/* Error */
.login-ui .login-error { z-index:50 !important; }

/* Mobile */
@media (max-width:800px) {
  div.login-ui { position:fixed !important; inset:0 !important; height:100% !important; overflow-y:auto !important; }
  .klcom-brand-panel { position:relative !important; left:auto !important; top:auto !important; bottom:auto !important; width:100% !important; height:auto !important; min-height:300px !important; }
  .klcom-brand-inner { width:88% !important; padding-top:36px !important; padding-bottom:34px !important; }
  .klcom-brand-logo { width:110px !important; height:110px !important; border-radius:20px !important; padding:10px !important; margin:0 auto 16px auto !important; }
  .klcom-company { font-size:21px !important; margin-bottom:10px !important; }
  .klcom-title { font-size:31px !important; }
  .klcom-subtitle, .klcom-footer { display:none !important; }
  .login-ui .login-dialog { position:relative !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; width:100% !important; height:auto !important; min-height:0 !important; padding:42px 28px 48px 28px !important; }
  .login-ui .login-dialog::before { font-size:28px !important; }
}