﻿body {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, sans-serif;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

#divLogoContainerLg {
    display: block;
}

#divLogoContainerMed {
    display: none;
}

.EnableCalculate {
    background-color: #f97316;
    color: #ffffff;
}

.DisableCalculate {
    background-color: #fcb98a;
    color: #ffffff;
}

#calcConent {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#calcFldBox {
    width: 800px;
    height: 100%;
    overflow: auto;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.calcBoxRounded {
    width: 800px;
    height: 100%;
    overflow: auto;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.fldRow {
    float: left;
    width: 50%;
}

.fldAlert {
    border-color: red;
}

.toggleDiv {
    display: none;
    float: left;
    width: 25px;
}

.shim10 {
    clear: both;
    width: 100%;
    height: 10px;
}

.shim20 {
    clear: both;
    width: 100%;
    height: 20px;
}

.shim30 {
    clear: both;
    width: 100%;
    height: 30px;
}

.shim40 {
    clear: both;
    width: 100%;
    height: 40px;
}

.desktopshim30 {
    clear: both;
    width: 100%;
    height: 30px;
}

.mobileShim {
    display: none;
}

.calcInputTxt {
    border: solid 1px #d4cdcd;
    border-radius: 5px;
    width: 95%;
    height: 40px;
    padding: 5px;
    color: #a49b9b;
    font-size: 14px;
}

.calcButtonRow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
}

.calcButton {
    border: solid 1px #d4cdcd;
    border-radius: 5px;
    width: 150px;
    height: 40px;
    padding: 5px;
    font-size: 16px;
    font-weight: 600;
    margin: 10px;
}

.btSpacer {
    float: left;
    height: 20px;
    width: 60px;
}

#resetBT:hover {
    color: red;
}
/* -------------------------------------------------------------- */
*, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

.inline-flex {
    display: inline-flex
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.w-16 {
    width: 4rem
}

.h-16 {
    height: 4rem
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}

.bg-sidebar-border {
    background-color: var(--sidebar-border)
}

.bg-transparent {
    background-color: transparent
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1))
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right,var(--tw-gradient-stops))
}

.from-orange-500 {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-teal-600 {
    --tw-gradient-to: #0d9488 var(--tw-gradient-to-position)
}

.rounded-2xl {
    border-radius: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.rounded-full {
    border-radius: 9999px
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.border-2 {
    border-width: 2px
}

.border-orange-500 {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity, 1))
}

.h-24 {
    height: 6rem
}

.w-24 {
    width: 6rem
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1))
}

.text-muted-foreground {
    color: var(--muted-foreground)
}


.font-medium {
    font-weight: 500;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1
}

.text-\[0\.8rem\] {
    font-size: .8rem
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1))
}

.text-conduit-orange {
    color: var(--conduit-orange)
}

:root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(20, 14.3%, 4.1%);
    --muted: hsl(60, 4.8%, 95.9%);
    --muted-foreground: hsl(25, 5.3%, 44.7%);
    --popover: hsl(0, 0%, 100%);
    --popover-foreground: hsl(20, 14.3%, 4.1%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(20, 14.3%, 4.1%);
    --border: hsl(20, 5.9%, 90%);
    --input: hsl(20, 5.9%, 90%);
    --primary: hsl(18, 100%, 50%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(60, 4.8%, 95.9%);
    --secondary-foreground: hsl(24, 9.8%, 10%);
    --accent: hsl(60, 4.8%, 95.9%);
    --accent-foreground: hsl(24, 9.8%, 10%);
    --destructive: hsl(0, 84.2%, 60.2%);
    --destructive-foreground: hsl(60, 9.1%, 97.8%);
    --ring: hsl(18, 100%, 50%);
    --radius: .5rem;
    --conduit-orange: hsl(18, 100%, 50%);
    --conduit-teal: hsl(180, 65%, 35%);
    --conduit-gray: hsl(215, 16%, 47%)
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-\[2px\] {
    border-radius: 2px
}

.rounded-\[inherit\] {
    border-radius: inherit
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: var(--radius)
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px)
}

.rounded-sm {
    border-radius: calc(var(--radius) - 4px)
}

.rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
    --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.text-card-foreground {
    color: var(--card-foreground);
}

.bg-card {
    background-color: var(--card);
}

.border {
    border-width: 1px;
}

*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.flex {
    display: flex
}

.AssumptionsBox {
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    width: 95%;
    border-bottom: solid 1px #f5ecec;
    height: auto;
    overflow: auto;
}

.AssumptionsLabel {
    float: left;
    width: 45%;
}

.AssumptionsLabelValue {
    float: right;
    margin-right: 10px;
    width: 49%;
    text-align: right;
}

.DisclaimerBox {
    clear: both;
    width: 95%;
}

.CalculationRow {
    float: left;
    width: 98%;
    padding: 10px;
}

.CalculationsBox {
    text-align: left;
    margin-left: 0px;
    margin-right: 7px;
    margin-top: 5px;
    width: 99%;
    height: auto;
    overflow: auto;
}

.CalculationRowTitle {
    clear: both;
    width: 100%;
}

.CalculationLabel {
    float: left;
    width: 49%;
}

.CalculationLabelValue {
    float: right;
    margin-right: 7px;
    width: 48%;
    text-align: right;
}

.aboutInfo {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
/* ---------------------------------------------- Media Settings */
@media screen and (max-width: 992px) {
    #divLogoContainerLg {
        display: none;
    }

    #divLogoContainerMed {
        display: block;
    }

    #calcConent {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    #calcFldBox {
        width: 90%;
        height: 100%;
        overflow: auto;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .calcBoxRounded {
        width: 90%;
        height: 100%;
        overflow: auto;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .DisclaimerBox {
        clear: both;
        width: 95%;
    }

    .fldRow {
        clear: both;
        width: 95%;
    }

    .toggleDiv {
        display: none;
    }

    .mobileShim35 {
        display: block;
        clear: both;
        width: 100%;
        height: 35px;
    }

    .calcInputTxt {
        border: solid 1px #d4cdcd;
        border-radius: 5px;
        width: 97%;
        height: 40px;
        padding: 5px;
        color: #000000;
        font-size: 14px;
    }

    .calcButton {
        border: solid 1px #d4cdcd;
        border-radius: 5px;
        width: 100px;
        height: 40px;
        padding: 5px;
        font-size: 16px;
        font-weight: 600;
        margin: 10px;
    }

    .desktopshim30 {
        display: none;
    }

    .AssumptionsBox {
        text-align: left;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
        width: 100%;
        border-bottom: solid 1px #f5ecec;
        height: auto;
        overflow: auto;
    }

    .AssumptionsLabel {
        float: left;
        width: 49%;
    }

    .AssumptionsLabelValue {
        float: right;
        margin-right: 7px;
        width: 48%;
        text-align: right;
    }
}
