/* Branding Stylesheet Override */

:root {
    /* colors */
    --cnd-blue: #009ed4;
    --cnd-green: #339966;
    --cnd-yellow: #ffd900;
    --cnd-orange: #f18700;
    --cnd-red: #ea5153;
    --cnd-purple: #9d75b1;
    --cnd-black: #0b1213;
    --cnd-white: #ffffff;
    /* grays */
    --cnd-gray-dark: color-mix(in srgb, var(--cnd-black) 75%, white);
    --cnd-gray-medium: color-mix(in srgb, var(--cnd-black) 45%, white);
    --cnd-gray-light: color-mix(in srgb, var(--cnd-black) 25%, white);
    --cnd-gray-accent: color-mix(in srgb, var(--cnd-black) 7%, white);
    /* gradient */
    --cnd-gradient-size: 5px;
    /* whitespace */
    --cnd-space-sm: 0.25rem;
    --cnd-space-md: 0.50rem;
    --cnd-space-lg: 1.00rem;
    /* for buttons, inputs, tabs, etc. */
    --cnd-radius-sm: 0.1rem;
    --cnd-radius-md: 0.4rem;
    --cnd-radius-lg: 1.0rem;
    /* font-family */
    --cnd-font-sans1: 'Noto Sans', sans-serif;
    --cnd-font-sans2: 'museo-sans', sans-serif;
    --cnd-font-slab: 'museo-slab', sans-serif;
    /* font-size */
    --cnd-text-xl: 1.95rem;
    --cnd-text-lg: 1.35rem;
    --cnd-text-md: 1.05rem;
    --cnd-text-sm: 0.72rem;
    --cnd-text2-sm: 0.78rem;
    /* font-weight */
    --cnd-weight-light: 400;
    --cnd-weight-bold: 600;
    --cnd-weight-black: 700;
    /* popup windows */
    --cnd-popup-border: 1px solid #0002;
    --cnd-popup-shadow: 0 0.10rem 0.75rem 0 #0004;
    /* hover styles */
    --cnd-hover-light: color-mix(in srgb, white 30%, transparent);
    --cnd-hover-dark: color-mix(in srgb, black 30%, transparent);
}

/* Following CSI tradition; make numbers equal width */
* {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Set default font */
body,
.dg,
.gv,
.dgCalc,
.dgFooter,
.standard-text,
.standard-labelWhite,
.standard-labelWhiteBold {
    font-family: var(--cnd-font-sans1);
    font-size: var(--cnd-text-sm);
    font-weight: var(--cnd-weight-light);
}

/* Adjust font exceptions */
.dgCalc {
    font-size: 90%;
}

/* Bulk-style HTML components (to compensate for inconsistent styling classes) */
label,
input,
select,
textarea {
    font-weight: var(--cnd-weight-light) !important;
}

/* Give pages a background photo */
body {
    background-color: transparent;
    min-height: 100vh;
    background-image: url('../images/Branding/cnd-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

    /* Give pages after login a gray background  */
    body.auth-int,
    body.auth-ext {
        background: oklch(56% 0 0);
    }

        body.auth-int:has(.tab-activeIndustrial),
        body.auth-ext:has(.tab-activeIndustrial) {
            background: oklch(from var(--cnd-green) 56% 0.015 h);
        }

        body.auth-int:has(.tab-activeResidential),
        body.auth-ext:has(.tab-activeResidential) {
            background: oklch(from var(--cnd-blue) 56% 0.015 h);
        }

/* Show a gradient on the left of the page */
body {
    margin-left: var(--cnd-gradient-size);
}

.cndVerticalGradient {
    width: var(--cnd-gradient-size);
    background-image: -webkit-linear-gradient(top, #009dd3 0%, #149fb4 16%, #17a38d 26%, #19a56e 39%, #19a659 48%, #1aa753 54%, #fed900 84%, #fed900 100%);
    background-image: linear-gradient(to bottom, #009dd3 0%, #149fb4 16%, #17a38d 26%, #19a56e 39%, #19a659 48%, #1aa753 54%, #fed900 84%, #fed900 100%);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
}

/* Hide the gradient on white-label sites */
body.whitelabel {
    margin-left: 0;
}

    body.whitelabel .cndVerticalGradient {
        display: none;
    }

    /* And grayscale links to manuals */
    body.whitelabel img[src="../images/cnd_icon_i.png"] {
        filter: grayscale(1) contrast(5%) brightness(75%);
    }

/* Place TEST/ACC icon in top-left corner */
#cndTestIcon {
    width: 1.6rem;
    height: 1.6rem;
    background-size: 1.6rem;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    padding: 6px;
    position: fixed;
    top: -4px;
    left: -4px;
    z-index: 1000;
    display: none;
}

body.env-test #cndTestIcon {
    background-image: url('../images/Branding/icons/test-pipe.svg');
    background-color: var(--cnd-orange);
    display: block;
}

body.env-acc #cndTestIcon {
    background-image: url('../images/Branding/icons/eye-check.svg');
    background-color: var(--cnd-purple);
    display: block;
}

/* Make gradients wider and orange/purple for TEST/ACC */
body.env-test .cndVerticalGradient {
    width: calc(var(--cnd-gradient-size) * 2);
    background: var(--cnd-orange);
}

body.env-acc .cndVerticalGradient {
    width: calc(var(--cnd-gradient-size) * 2);
    background: var(--cnd-purple);
}

/* (adjust body maring to match) */
body.env-test,
body.env-acc {
    margin-left: calc(var(--cnd-gradient-size) * 2);
}
/*
    Typography
*/
.cnd-title-lg {
    color: #0b1213;
}

.cnd-label {
    font-size: var(--cnd-text-sm);
    color: #0b1213;
}

.cnd-text-sm {
    font-size: 0.65rem;
    color: #0b1213;
}

/*
    Buttons
*/

.cnd-button {
    font-family: var(--cnd-font-sans2);
    font-weight: var(--cnd-weight-bold) !important;
    font-size: var(--cnd-text-sm) !important;
    background-color: var(--cnd-black);
    transition: background-color 0.1s ease, transform 0.1s ease;
    color: var(--cnd-white) !important;
    padding: var(--cnd-space-md) var(--cnd-space-lg);
    border-radius: 99px;
    border: none;
    cursor: pointer;
}

    .cnd-button:not(:disabled):hover {
        background-color: color-mix(in srgb, var(--cnd-black) 80%, white);
    }

    .cnd-button:not(:disabled):active {
        background-color: var(--cnd-black);
    }

    .cnd-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

/* Make all image buttons round */
input[type="image"][src*="images/Buttons/"][src*=".png"],
a img[src*="images/Buttons/"][src*=".png"] {
    border-radius: 999px;
    margin: calc(0.25rem / 2);
    padding: 2px;
    background-color: #606060;
}

    /* and add a bit of hover effect */
    input[type="image"][src*="images/Buttons/"][src*=".png"]:hover,
    a img[src*="images/Buttons/"][src*=".png"]:hover {
        filter: brightness(1.4) saturate(0.4);
    }

/* Add a bit of border for spacing (in original image colors) */
body:has(.tab-activeIndustrial) {
    input[type="image"][src*="images/Buttons/"][src*=".png"],
    a img[src*="images/Buttons/"][src*=".png"] {
        background: #00794a;
    }
}

body:has(.tab-activeResidential) {
    input[type="image"][src*="images/Buttons/"][src*=".png"],
    a img[src*="images/Buttons/"][src*=".png"] {
        background: #0065a3;
    }
}

/* but correct the background for the red calculation buttons */
input[type="image"][src*="images/Buttons/redCalc.png"] {
    background: #820a30 !important;
}

/* and gray buttons too */
input[type="image"][src*="images/Buttons/gray"][src*=".png"],
a img[src*="images/Buttons/gray"][src*=".png"] {
    background: #606060 !important;
}

/*
    Input
*/
.cnd-input,
.cnd-input-lg {
    font-family: var(--cnd-font-sans2);
    border: 1.5px solid #0008;
    border-radius: 2px;
}

    .cnd-input {
        padding: var(--cnd-space-sm) var(--cnd-space-md);
        font-weight: var(--cnd-weight-light) !important;
    }

    .cnd-input-lg {
        padding: var(--cnd-space-md) !important;
        font-weight: var(--cnd-weight-bold) !important;
    }

/* Override standard-text, which is used in most input fields */
.standard-text {
    color: var(--cnd-black);
}
    
/*
    Progress bar
*/

.cnd-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    z-index: 9999;
    background: linear-gradient(90deg, var(--cnd-orange, #009ed4) 0%, transparent 60%);
    background-size: 200% 100%;
    animation: cnd-progress-slide 2s linear infinite;
}

@keyframes cnd-progress-slide {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/*
    Misc.
*/
.cnd-text-error,
.Message-text {
    color: var(--cnd-red) !important;
}