/*
 * Copyright (c) 2016-2025 SoftVanguard, Inc.  All rights reserved.
 *
 * No part of this work may be reproduced or distributed without the
 * permission of SoftVanguard, Inc.
 *
 * If you are not authorized by SoftVanguard to utilize this software
 * and/or documentation, you must immediately discontinue any
 * further use or viewing of this software and documentation.
 * Violaters will be prosecuted to the fullest extent of the law by
 * SoftVanguard, Inc.
 *
 * Developed by SoftVanguard, Inc.
 */

@import url("generic-layout.css");
@import url("site-shell.css");
@import url("flip-card.css");
@import url("login-content.css");
@import url("./lumo/border-radius.css");
@import url("./lumo/icon-size.css");
@import url("./lumo/margin.css");
@import url("./lumo/padding.css");
@import url("./lumo/shadow.css");
@import url("./lumo/spacing.css");
@import url("./lumo/typography.css");
@import url("./webpage/sv-adr-regulator.css");
@import url("./webpage/aboutus.css");
@import url("./webpage/service.css");
@import url("./webpage/contactus.css");
@import url("./webpage/newsevent.css");
@import url("./webpage/resources.css");
@import url("./webpage/partners.css");
@import url("./webpage/softvanguard-shared.css");
@import url("./webpage/softvanguard-pv.css");
@import url("./webpage/softvanguard-rim.css");
@import url("./webpage/softvanguard-qms.css");
@import url("./webpage/softvanguard-mes.css");
@import url("./webpage/softvanguard-cdm.css");
@import url("./webpage/softvanguard-lab.css");
@import url("./webpage/softwareplatform.css");
@import url("./webpage/service-cloud.css");
@import url("./webpage/service-riskproof.css");
@import url("./webpage/sv-lims-biobank.css");
@import url("./webpage/sv-lims-stability.css");
@import url("./webpage/support.css");
@import url("./webpage/home.css");
@import url("./webpage/locale-fonts.css");

@import url("./admin/admin.css");

@import url("./components/vaadin-app-layout.css");
@import url("./components/vaadin-button.css");
@import url("./components/vaadin-checkbox.css");
@import url("./components/vaadin-context-menu-item.css");
@import url("./components/vaadin-context-menu-overlay.css");
@import url("./components/vaadin-dashboard-section.css");
@import url("./components/vaadin-dashboard-widget.css");
@import url("./components/vaadin-dialog-overlay.css");
@import url("./components/vaadin-form-item.css");
@import url("./components/vaadin-input-container.css");
@import url("./components/vaadin-login-form.css");
@import url("./components/vaadin-login-form-wrapper.css");
@import url("./components/vaadin-menu-bar-button.css");
@import url("./components/vaadin-menu-bar-item.css");
@import url("./components/vaadin-menu-bar-overlay.css");
@import url("./components/vaadin-overlay.css");
@import url("./components/vaadin-password-field.css");
@import url("./components/vaadin-select.css");
@import url("./components/vaadin-select-item.css");
@import url("./components/vaadin-tab.css");
@import url("./components/vaadin-tabs.css");
@import url("./components/vaadin-text-field.css");

@import url("./plex-sans.css");
@import url("./plex-mono.css");
@import url("./inter.css");
@import url("./color.css");
@import url("./tokens.css");

/* Light mode only: Vaadin 25 Lumo uses light-dark(), which would otherwise follow the system preference. */
:root {
    color-scheme: light !important;
}

html {
    /* lumo size */
    --lumo-size-xxs: 1.25rem;
    /* lumo space */
    --lumo-space-xss: 0.125rem;

    --lumo-font-family: "IBM Plex Sans", "Noto Sans TC", "Noto Sans JP", "InterVariable", sans-serif, Arial, "JetBrains Mono", "Roboto Serif", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, sans-serif;

    /* SoftVanguard typography tokens — centralized so PV / RIM /
       CDM and any future module page reference these exact values
       instead of literal font names. The Plex Sans faces are
       self-hosted in plex-sans.css, Plex Mono (500) in plex-mono.css.
       TC is placed before JP so zh-TW characters resolve to TC glyphs
       (handoff 2026-05-15 A2.2); JP-only characters / JP-specific
       kanji forms fall through to JP. */
    --sv-display: "IBM Plex Sans", "Noto Sans TC", "Noto Sans JP", "Noto Serif JP", "InterVariable", system-ui, sans-serif;
    --sv-body:    "IBM Plex Sans", "Noto Sans TC", "Noto Sans JP", "InterVariable", system-ui, sans-serif;
    --sv-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* lumo font size */
    --lumo-font-size-xxs: 0.625rem;

    /* lumo line-height */
    --lumo-line-height-xxs: 1.1;

    --softvanguard-background-color-default: #103359;
    --softvanguard-background-default: #DAE4EE;
    --softvanguard-tab-sheet-background-color-default: rgba(30, 93, 163, 0.1);
    --softvanguard-select-page-background-color-default: #ACCCDF;
    --softvanguard-header-background-color-default: linear-gradient(180deg, #4C9EEA -17.16%, #23639E 36.57%, #19456D 90.3%, #1C456A 144.03%);
    --softvanguard-text-color-default: #203E62;
    --softvanguard-background-sidebar-default: #ffffff;
    --softvanguard-background-lightblue-default: #d6e2ea;
    --softvanguard-background-lightgrey-default: #fefefe;
    --softvanguard-background-plaingrey-default: #d3d3d3;

    --softvanguard-head-select-background-color: linear-gradient(1.12deg, #1B5DAA 1.21%, #39C8FF 99.31%);

    --softvanguard-border-background-color-default: #1e5da3;
    --softvanguard-border-color-default: #FFFFFF;

    --softvanguard-field-label-color-default: #1F6CB6;
    --softvanguard-field-background-color-default: rgba(87, 169, 138, 0.2);
    --softvanguard-field-formtextfield-color-default: var(--lumo-contrast-10pct);
    --softvanguard-field-required-background-color-default: rgba(129, 194, 167, 0.4);;
    --softvanguard-mainform-background-color-default: #FFF6DC;

    --softvanguard-layout-background-color-default: #257FC5;
    --softvanguard-tabs-background-default: rgba(130, 194, 167, 0.4);
    --softvanguard-menu-item-background-color: #C7EFFC;
    --softvanguard-menu-bar-button-background-color: #FFFFFF;
    --softvanguard-menus-background-default: #1F6CB6;
    --softvanguard-content-background-default: #F5F5F5;
    --softvanguard-lauout-sidebar-background-color: #FAE28C;
    --softvanguard-menutab-sidebar-background-color: #FAE28C;
    --softvanguard-login-background-color: #203E62;
    --softvanguard-tramline-default: #1B5DAA;

    --softvanguard-drawer-content-background-default: rgba(232, 240, 241, 0.44);
    --softvanguard-quickform-background-default: #fff6dc;
    --softvanguard-scrim-background-default: rgba(0, 0, 0, 0.6);

    --softvanguard-navimenu-panel-background-default: tranparent;
    --softvanguard-navimenu-panel-hover-background-default: #FAE28C;
    --softvanguard-navimenu-panel-active-background-default: #37486c;
    --softvanguard-navimenu-panel-selected-background-default: #FAE28C;
    --softvanguard-navimenu-panel-selected-hover-background-default: #FFF6E8;
    --softvanguard-navimenu-panel-header-background-default: #F5F5F5;
    --softvanguard-navimenu-panel-header-border-default: #E0E0E0;
    --softvanguard-navimenu-panel-header-color-default: #323232;
    --softvanguard-navimenu-panel-header-background-hover-default: #EBEBEB;
    --softvanguard-navimenu-panel-header-border-hover-default: #EBEBEB;
    --softvanguard-navimenu-panel-header-color-hover-default: #333333;
    --softvanguard-navimenu-panel-header-background-active-default: #E0E0E0;
    --softvanguard-navimenu-panel-header-border-active-default: #E0E0E0;
    --softvanguard-navimenu-panel-header-color-active-default: #333333;
    --softvanguard-navimenu-panel-header-background-focus-default: #E2E0E0;
    --softvanguard-navimenu-panel-header-border-focus-default: #E0E0E0;
    --softvanguard-navimenu-panel-header-color-focus-default: #333333;
    --softvanguard-navimenu-panel-content-background-color-default: #F2E8B6;


    --softvanguard-shadow-elevation-24: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-16: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-12: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-8: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 3px rgba(0, 0, 0, .12), 0 4px 15px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-6: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-4: 0 2px 4px 0 rgba(0, 0, 0, .14), 0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --softvanguard-shadow-elevation-1: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
    --softvanguard-shadow-elevation-0: none;;
    --softvanguard-font-family: var(--lumo-font-family);

    --softvanguard-toolbar-background-color-default: #C1D1E0;
    --softvanguard-toolbar-background-color-ribbon: #BFDBFF;

    --softvanguard-content-background-color-default: #C0DECB;

    --softvanguard-sidebar-background-color-default: #def4fd;
    --softvanguard-sidebar-color-default: #125991;
    --softvanguard-sidebar-title-border-default: #E0E0E0;

    --softvanguard-advanced-toolbar-background-color-default: #DCEFFA;
    --softvanguard-advanced-toolbar-color-default: #15428B;

    --softvanguard-button-size-small: 1.375rem;

    --softvanguard-advanced-search-background-color-default: #C9C9C9;

    --softvanguard-layout-header-height: 2.8125rem;

    --softvanguard-layout-drawer-width: 16em;

    --softvanguard-layout-sidbar-offset: 1.5625rem;

    --softvanguard-tooltip-width-default: 20em;

    --softvanguard-title-width-defaul: 20rem;

    --softvanguard-main-color-default: #203E62;
    --softvanguard-bg-gradient-color-default: radial-gradient(73.22% 267.61% at 50% 50%, #0E3450 0%, #147BC6 100%);
    --softvanguard-bg-gradient-color-default-2: radial-gradient(73.22% 267.61% at 50% 50%, #147BC6 0%, #0E3450 100%);
    --softvanguard-secondary-color-default: #147BC6;

    --navi-slider-width: calc(var(--lumo-size-m) * 7);
    --navi-slider-rail-width: calc(var(--lumo-size-m) * 1.2);

    --details-drawer-width: calc(var(--lumo-size-m) * 11);

    --transition-duration-s: 160ms;
    --transition-duration-m: 320ms;
    --transition-duration-l: 480ms;

    /* Responsive sizing and spacing */
    --lumo-space-r-m: var(--lumo-space-m);
    --lumo-space-r-l: var(--lumo-space-l);
    --lumo-space-r-x: var(--lumo-space-l);
}

::-webkit-input-placeholder { /* Edge */
    font-size: var(--lumo-font-size-xxs);
    font-style: italic;
}

vaadin-dialog-overlay::part(backdrop) {
    background-color: var(--lumo-shade-50pct);
    opacity: 1;
}

.text-3xs {
    font-size: var(--lumo-font-size-xxs);
}

.italic {
    font-style: italic;
}

/*VERTICAL ALIGN*/
.vertical-bottom {
    vertical-align: bottom;
}

.vertical-middle {
    vertical-align: middle;
}

.vertical-sub {
    vertical-align: sub;
}

.vertical-textop {
    vertical-align: text-top;
}

.vertical-texbottom {
    vertical-align: text-bottom;
}

[theme~="dense"] {
    --lumo-border-radius-s: 0.1em;
    --lumo-border-radius-m: 0.2em;
    --lumo-border-radius: 0.2em;
    --lumo-border-radius-l: 0.3em;
    --lumo-space-xs: 0.25rem;
    --lumo-space-s: 0.5rem;
    --lumo-space-m: 1.5rem;
    --lumo-space-l: 1.75rem;
    --lumo-space-xl: 2rem;
    --lumo-size-xs: 1rem;
    --lumo-size-s: 1.2rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-l: 2rem;
    --lumo-size-xl: 2.5rem;
    --lumo-icon-size-s: 0.5rem;
    --lumo-icon-size-m: 1rem;
    --lumo-icon-size-l: 1.5rem;
    --lumo-font-size-xxs: 0.4rem;
    --lumo-font-size-xs: 0.5rem;
    --lumo-font-size-s: 0.6rem;
    --lumo-font-size-m: 0.9rem;
    --lumo-font-size-l: 1.2rem;
    --lumo-font-size-xl: 1.4rem;
    --lumo-font-size-xxl: 1.8rem;
    --lumo-font-size-xxxl: 2rem;
    --lumo-line-height-xs: 0.75;
    --lumo-line-height-s: 1.25;
    --lumo-line-height-m: 1;
}

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    /*z-index: 2147483647;*/
}

.liststyle-none {
    list-style-type: none;
}

.cursor-pointer {
    cursor: pointer;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-90 {
    width: 90%;
}

.h-50 {
    height: 50%;
}

.opacity-90 {
    opacity: 90%;
}

.leading-l {
    line-height: 2rem;
}

.lightblue-bgcolor {
    background-color: var(--softvanguard-background-lightblue-default);
}

.lightgrey-bgcolor {
    background-color: var(--softvanguard-background-lightgrey-default);
}

.plaingrey-bgcolor {
    background-color: var(--softvanguard-background-plaingrey-default);
}

.darkblue-bgcolor {
    background-color: var(--softvanguard-background-color-default);
}

.gradient-bgcolor {
    background-image: var(--softvanguard-bg-gradient-color-default);
}

.darkgradient-bgcolor {
    background-image: linear-gradient(180deg, #08122C 50%, #125b8f 100%);

}

.white-bgcolor {
    background-color: #fff;
}

.default-color {
    color: var(--softvanguard-main-color-default);
}

.grey-color {
    color: #787878;
}

.white-color {
    color: #fff;
}

.vertical-middle {
    vertical-align: middle;
}

.icon-xl {
    height: var(--lumo-size-l);
    width: var(--lumo-size-l);
}

.break-all {
    word-break: break-all;
}

.bg-base {
    box-shadow: var(--softvanguard-shadow-elevation-1);
}

.login-bg {
    background-image: url("../images/background/bg_loginpage.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.feature-tag {
    color: #fff;
    white-space: nowrap;
    background: var(--softvanguard-background-color-default);
    border-radius: 1.5rem;
    flex-shrink: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    display: inline-block;
    position: absolute;
    left: 3%;
    top: 3%;
}

.feature-tag-subline {
    color: #fff;
    background: var(--softvanguard-background-color-default);
    border-radius: 1.5rem;
    flex-shrink: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
}

.divider {
    background-image: linear-gradient(90deg, #efeeec00, #efeeec 25% 75%, #efeeec00);
    width: 90%;
    height: 1px;
}

.divider-grey {
    background-image: linear-gradient(90deg, #efeeec00, #939393 25% 75%, #efeeec00);
    width: 90%;
    height: 1px;
}

.divider-blue {
    background-image: linear-gradient(90deg, #efeeec00, #283577 25% 75%, #efeeec00);
    height: 1px;
    margin: 0 auto;
}

.input_subscription {
    background-color: #f5f6f7;
    border: 1px solid #f5f6f7;
    border-radius: 3rem;
    min-height: 1.5rem;
    margin-bottom: .5rem;
    padding: 1.5rem 2rem;
    transition: all .2s;
    width: 100%;
}

.aboutus-herosec {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.37), rgb(23, 58, 98)), url('../images/webimages/aboutus_bg00.jpg');
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.vanguard-title {
    display: inline-block;
    /* Aligned with .sv-hero-title (softvanguard-shared.css) so legacy
       product-page heroes (CDM, Lab, service, service-cloud, etc.)
       share the IBM Plex Sans 600 / tight-tracking register that PV
       and RIM use on their .sv-* heroes. Size clamp kept at 2-4rem
       to avoid disrupting the layouts that legacy pages rely on. */
    font-family: var(--sv-display);
    font-weight: 600;
    color: #fff;
    font-size: clamp(2rem, 2.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    padding-top: var(--lumo-space-m);
    padding-bottom: var(--lumo-space-m);
}

.sv-case-title {
    display: flex;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: clamp(2rem, 2.5vw, 4rem);
    line-height: var(--lumo-line-height-s);
    margin: var(--lumo-space-m);
}

@media (min-width: 375px) and (max-width: 500px) {
    .vanguard-title-container {
        align-items: center;
    }

    .sv-case-title-container {
        align-items: center;
    }

    .vanguard-content {
        display: none;
    }

}

@media (max-width: 375px) {
    .vanguard-title-container {
        align-items: center;
    }

    .sv-case-title-container {
        align-items: center;
    }

    .vanguard-content {
        display: none;
    }
}

@keyframes zoom {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, .5); /* Darkens the UI */
    }
}


.processingcontainer {
    width: 100%;
    height: 100dvh;
    background-image: var(--softvanguard-bg-gradient-color-default);
}

.processingdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: var(--softvanguard-bg-gradient-color-default);
    height: 100dvh;
}

.processingdiv_text {
    animation: typing 3.5s infinite;
    white-space: nowrap;
    margin: 0 auto;
    color: white;
}


/* The typing effect */
@keyframes typing {
    0% {
        opacity: 30%;
    }

    100% {
        opacity: 100%;
    }
}