/* ==========================================================================
   vCloud Director 10.6 Theme
   Custom Theme Variables
   ========================================================================== */

   :root [cds-theme~=custom] {
    /* Typography */
    --clr-font: Metropolis;

    /* Primary Navigation */
    --clr-datagrid-row-hover: var(--clr-global-hover-color);
    --clr-global-content-header-font-color: var(--clr-telus-purple-medium);
    --clr-global-hover-color: var(--clr-telus-purple-lighter);
    --clr-header-bg-color: var(--clr-telus-purple-telus);
    --clr-header-font-color: #FFFFFF;
    --clr-link-color: var(--clr-telus-green-accessible);
    --clr-link-hover-color: var(--clr-telus-purple-medium);
    --clr-nav-active-box-shadow-color: var(--clr-telus-purple-telus);
    --clr-nav-background-color: var(--clr-telus-grey-background);
    --clr-nav-box-shadow-color: var(--clr-telus-green-light);
    --clr-subnav-bg-color: var(--clr-telus-purple-light);
    --clr-nav-link-active-color: #000000;
    --clr-subnav-font-color: #FFFFFF;
    --clr-subnav-bg-color: var(--clr-telus-green-telus);
    --clr-nav-link-color: #000000;

    /* Vertical Navigation */
    --clr-vertical-nav-active-bg-color: var(--clr-telus-green-telus);
    --clr-vertical-nav-bg-color: var(--clr-telus-grey-background);
    --clr-vertical-nav-divider-color: var(--clr-telus-purple-dark);
    --clr-vertical-nav-hover-bg-color: var(--clr-global-hover-color);
    --clr-vertical-nav-icon-active-color: #FFFFFF;
    --clr-vertical-nav-item-active-color: var(--clr-telus-grey-thunder);
    --clr-vertical-nav-item-active-color: var(--clr-telus-purple-dark);
    --clr-vertical-nav-item-color: var(--clr-telus-purple-telus);
    --clr-vertical-nav-trigger-divider-border-color: var(--clr-telus-purple-telus);

    /* Buttons */
    --clr-btn-link-color: var(--clr-telus-green-telus);
    --clr-btn-default-color: var(--clr-telus-green-telus);
    --clr-btn-default-outline-color: var(--clr-telus-green-telus);
    --clr-btn-default-outline-hover-color: var(--clr-telus-purple-telus);
    --clr-btn-primary-bg-color: var(--clr-telus-green-telus);
    --clr-btn-primary-hover-bg-color: var(--clr-telus-purple-telus);
    --clr-btn-primary-border-color: var(--clr-telus-green-telus);
    --clr-btn-link-hover-color: var(--clr-telus-purple-telus);

    /* Telus Specific Colors */
    --clr-telus-green-accessible: #2B8000;
    --clr-telus-green-dark: #1F5C09;
    --clr-telus-green-darkest: #163E06;
    --clr-telus-green-light: #BFE797;
    --clr-telus-green-lighter: #E3F6D1;
    --clr-telus-green-lightest: #F4F9F2;
    --clr-telus-green-telus: #66CC00;
    --clr-telus-grey-alabaster: #FAFAFA;
    --clr-telus-grey-background: #F4F4F7;
    --clr-telus-grey-charcoal: #414547;
    --clr-telus-grey-cloud: #B2B9BF;
    --clr-telus-grey-mystic: #E3E6E8;
    --clr-telus-grey-shuttle: #676E73;
    --clr-telus-grey-thunder: #2C2E30;
    --clr-telus-purple-dark: #371E4F;
    --clr-telus-purple-light: #7C53A5;
    --clr-telus-purple-lighter: #D8CBE5;
    --clr-telus-purple-lightest: #F2EFF4;
    --clr-telus-purple-medium: #613889;
    --clr-telus-purple-telus: #4B286D;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.header {
    display: flex;
    height: 3rem;
    white-space: nowrap;
    color: var(--clr-header-font-color, #fafafa);
    background-color: var(--clr-header-bg-color, #333333) !important;
}

/* ==========================================================================
   Login Page Styles
   ========================================================================== */

.login-wrapper {
    /* display: flex;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden; */
    display: flex;
        /* position: relative; */
    height: 100%;
    background-size: 55%;
    background-position: 27rem -2rem !important;
    background-repeat: no-repeat;
}

.login-wrapper .login {
    position: relative;
    left: 0;
    width: 450px;
    height: 100vh;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--clr-login-background-color);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1;

    /* Login Theme Variables */
    --clr-login-background-color: var(--clr-telus-green-telus);
    --clr-btn-primary-disabled-bg-color: var(--clr-telus-purple-lighter);
    --clr-btn-primary-bg-color: var(--clr-telus-green-accessible);
    --clr-btn-primary-hover-bg-color: var(--clr-telus-purple-telus);
    --clr-forms-border-color: var(--clr-telus-purple-dark);
    --clr-btn-primary-border-color: var(--clr-telus-green-dark);
}

/* Welcome and Title Styles */
.login-wrapper .welcome {
    color: var(--clr-telus-purple-medium);
    text-align: left;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 1rem;
}

.login-wrapper .welcome .logo {
    align-self: flex-start;
    margin-bottom: 0.5rem;
}

/* Tenant Info Styles */
.login-wrapper .tenant-info {
    text-align: left;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 1.5rem;
}

.login-wrapper .tenant-info h6 {
    color: var(--clr-telus-purple-medium);
    margin-bottom: 0.5rem;
    text-align: left;
}

.login-wrapper .tenant-info .tenant-name {
    color: var(--clr-telus-purple-medium);
    margin-bottom: 0.5rem;
    text-align: left;
}

.login-wrapper .tenant-info .change-tenant-btn {
    align-self: flex-start;
    padding-left: 0;
}

/* Enter Tenant Name View Styles */
#enterTenantNameView .title {
    color: var(--clr-telus-purple-medium);
    text-align: left;
}

#enterTenantNameView .title .hint {
    color: var(--clr-telus-purple-medium);
    text-align: left;
}

/* Button Styles */
.btn.btn-outline {
    border-color: var(--clr-btn-default-outline-border-color, #0072a3);
    background-color: var(--clr-btn-primary-color, white);
    color: var(--clr-btn-default-outline-hover-color, #00567a);
}

.btn.btn-outline:hover {
    background-color: var(--clr-btn-default-outline-hover-color, #00567a);
    color: var(--clr-btn-primary-color, white);
}

.btn.btn-outline:visited {
    color: var(--clr-btn-default-outline-hover-color, #00567a);
}

.login-wrapper .login .btn {
    align-self: flex-start;
}

/* Organization Branding Wrapper */
.org-branding-wrapper {
    color: var(--clr-login-title-color, black);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .login-wrapper .login {
        width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
    }

    .login-wrapper::before {
        height: 30vh;
    }

    .login-wrapper .login {
        width: 100%;
        height: auto;
        min-height: 70vh;
    }
}

@media screen and (max-width: 480px) {
    .login-wrapper .login {
        padding: 1rem;
    }
}

/* ==========================================================================
   Theme Generator Section - DO NOT MODIFY
   ========================================================================== */

:root [cds-theme~=custom] {
    --clr-forms-subtext-color: #ffffff;
    --clr-header-bg-color: #2b8000;
}
/******* BEGIN THEME GENERATOR SECTION *******/
/* DO NOT REMOVE! Manual modifications in this section might lead to malfunctioning CSS.*/
:root [cds-theme~=custom] {
  --clr-forms-subtext-color: #ffffff;
  --clr-header-bg-color: #2b8000;
  --clr-login-welcome-color: #613889;
}
/******* END THEME GENERATOR SECTION *******/