:root {
    --ev-blue: #0b5ed7;
    --ev-blue-hover: #084bac;
    --ev-light-blue: #2177f4;
    --ev-light-blue-hover: #084bacdd;
    --ev-highlight: #ffab00;
    --ev-highlight-hover: #d99200;
    --ev-light-highlight: #fff8e6;
    --ev-dark-blue: #181C32;
    --ev-additional-blue: #deeeff;
    --ev-input-border-radius: 0.375rem;
    --ev-input-border: 1px solid lightgrey;
    --ev-input-border-hover: 1px solid grey;
    --ev-input-boxShadow-hover: 0px 0px 0px 0.1rem #6c9ee7;
    --ev-input-transition: all 0.1s linear;
    --ev-btn-padding: 0.375rem 0.75rem;
    --ev-btn-bg-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.1), transparent);
    --ev-draggable-header-bg: linear-gradient(135deg, #0071BC, #29ABE2);
}

/*Styles for calculator input side tables*/
.calc-input-table {
    --ev-input-border-radius: 0.25rem;
}

    .calc-input-table tr td:only-child:not(.wide-input), 
    .calc-input-table tr th:only-child {
        text-align: center;
        font-weight: 700 !important;
        border-bottom: 1px solid #444;
    }

/*
.calc-input-table label {
    font-weight: 400;
}
*/

.calc-input-table label:only-child {
    width: 100%;
}

    .calc-input-table tr:not(:first-child) td:only-child:not(.wide-input),
    .calc-input-table tr:not(:first-child) th:only-child {
        padding-top: 1rem;
    }

.calc-input-table:not(.borderless) tr:not(:last-child) {
    border-bottom: 1px solid darkgrey;
}

.calc-input-table tr td {
    width: 50%;
    padding: 0.2rem;
}

.calc-input-table tr td:last-child > * {
    width: 100%;
    height: 100%;
}

    .calc-input-table [data-tooltip]:before,
    .calc-input-table [data-tooltip]:after {
        position: absolute;
        transition: opacity 0.15s;
        opacity: 0;
        z-index: 999999;
        pointer-events: none;
    }

    .calc-input-table [data-tooltip] label {
        cursor: help;
    }

        .calc-input-table [data-tooltip]:hover:before,
        .calc-input-table [data-tooltip]:hover:after {
            opacity: 1;
        }

    .calc-input-table [data-tooltip]:before {
        content: attr(data-tooltip);
        bottom: calc(100% + 0.2rem);
        left: 0.2rem;
        background-color: #eee;
        color: black;
        font-size: unset;
        padding: 5px 10px;
        border-radius: var(--ev-input-border-radius);
        border: 1px solid #444;
        pointer-events: none;
        overflow: visible !important;
        white-space: normal !important;
        width: calc(200% - 0.4rem);
        /* v Override [data-tooltip] defaults v */
        min-width: unset;
        transform: none;
    }

    .calc-input-table [data-tooltip]:after {
        content: '\F229';
        font-family: bootstrap-icons !important;
        font-size: 1.25rem;
        line-height: 1;
        left: calc(150% + 0.1rem - 0.625rem);
        bottom: calc(100% - 0.5rem);
        text-shadow: -1.5px 0 0 #fff, 1.5px 0 0 #fff;
        color: var(--ev-blue-hover);
    }

    .calc-input-table .reference-table {
        outline: 1px solid #707070;
        background-color: #f5f5f5;
        border-radius: var(--ev-input-border-radius);
    }

/*Styles for calculator input side tables & large inputs*/
.ev-input,
.calc-input-table input,
.calc-input-table select,
.calc-input-table textarea {
    border-radius: var(--ev-input-border-radius);
    border: var(--ev-input-border);
    transition: var(--ev-input-transition);
    padding: 0.1rem 0.2rem;
}

:not(.calc-input-table) .ev-input {
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.ev-input:disabled,
.calc-input-table input:disabled,
.calc-input-table select:disabled,
.calc-input-table textarea:disabled {
    cursor: not-allowed;
    background-color: #eee;
    border-color: #ddd;
}

.ev-input:not(:disabled):hover,
.calc-input-table input:not(:disabled):hover,
.calc-input-table select:not(:disabled):hover,
.calc-input-table textarea:not(:disabled):hover {
    border: var(--ev-input-border-hover);
    box-shadow: var(--ev-input-boxShadow-hover);
}

.ev-input:focus-visible, 
.calc-input-table input:focus-visible, 
.calc-input-table select:focus-visible, 
.calc-input-table textarea:focus-visible {
    outline: 1px solid grey;
}

select.ev-input, .calc-input-table select {
    appearance: none;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), none, none;
}

    select.ev-input:disabled, .calc-input-table select:disabled { /*Same as not disabled but lighter stroke*/
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999C9F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), none, none;
    }

.calc-input-table .customized-input-number {
    display: flex;
    justify-content: space-between;
    gap: 0.1rem;
}

.calc-input-table .customized-input-number input {
    width: 80%;
    border-radius: 0.15rem;
    text-align: center;
}

    .calc-input-table .customized-input-number input:not(:disabled) {
        border: var(--ev-input-border);
    }

.calc-input-table .customized-input-number .spinner {
    border: var(--ev-input-border);
    padding: 0.1rem 0.6rem;
}

.calc-input-table .customized-input-number .spinner.decrement {
    border-radius: var(--ev-input-border-radius) 0.15rem 0.15rem var(--ev-input-border-radius);
}

.calc-input-table .customized-input-number .spinner.increment {
    border-radius: 0.15rem var(--ev-input-border-radius) var(--ev-input-border-radius) 0.15rem;
}

    .calc-input-table .customized-input-number .spinner:disabled {
        background-color: #eee;
        border-color: #ddd;
        cursor: not-allowed;
    }

/*Buttons styles*/
.ev-btn {
    padding: var(--ev-btn-padding);
    border: 1px solid var(--ev-blue);
    border-radius: var(--ev-input-border-radius);
    transition: var(--ev-input-transition);
}

.ev-btn:disabled {
    cursor: not-allowed;
    border-color: var(--ev-blue-disabled);
    opacity: 0.5;
}

.ev-btn.btn-sm {
    border-radius: 0.25rem;
}

/*.ev-btn.ev-btn.ev-btn:not(:disabled):active {
    background-color: transparent;
    background-image: none;
    color: #444;
    border-color: #444;
}*/

.ev-btn.ev-blue-btn {
    background-color: var(--ev-blue);
    color: #fff;
    background-image: var(--ev-btn-bg-image);
}

.ev-btn.ev-blue-reveal-btn {
    color: #fff;
    background-color: var(--ev-blue);
    background-image: var(--ev-btn-bg-image)
}

.ev-btn.ev-blue-reveal-btn:hover {
    background-color: unset;
    border-color: unset;
    background-image: none;
}

.ev-btn.ev-blue-btn:not(:disabled):hover {
    background-color: var(--ev-blue-hover);
    background-image: none;
}

.ev-btn.ev-blue-outline-btn {
    background-color: transparent;
    color: var(--ev-blue);
}

.ev-btn.ev-blue-outline-btn:not(:disabled):hover {
    color: #fff;
    background-color: var(--ev-blue);
}

.ev-btn.ev-white-outline-btn {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.ev-btn.ev-white-outline-btn:not(:disabled):hover {
    color: var(--ev-blue);
    background-color: #fff;
}

.ev-btn.ev-white-btn {
    background-color: #fff;
    color: var(--ev-blue);
}

.ev-btn.ev-white-btn:not(:disabled):hover {
    color: #fff;
    background-color: var(--ev-blue-hover);
    border-color: #fff;
}

.ev-btn.ev-grey-outline-btn {
    background-color: transparent;
    border-color: #444;
    color: black;
}

.ev-btn.ev-grey-outline-btn:not(:disabled):hover {
    background-color: #444;
    color: #fff;
}

    .ev-btn.ev-grey-btn {
        background-color: #707070;
        border-color: #707070;
        background-image: var(--ev-btn-bg-image);
        color: #fff;
    }

.ev-btn.ev-grey-btn:not(:disabled):hover {
    background-color: #444;
    color: #fff;
}

.ev-btn.ev-red-btn {
    background-color: #ff2b00;
    border-color: #ff2b00;
    color: #fff;
}

.ev-btn.ev-red-btn:not(:disabled):hover {
    background-color: #cc2200;
    border-color: #cc2200;
}

.ev-btn.ev-red-outline-btn {
    background-color: transparent;
    border-color: #cc2200;
    color: #cc2200;
}

.ev-btn.ev-red-outline-btn:not(:disabled):hover {
    background-color: #ff2b00;
    border-color: #ff2b00;
    color: #fff;
}

.btn-sm {
    padding: 0.1rem 0.5rem;
}

/*Modal styles*/
.ev-modal {
    background-color: #fff;
    border-radius: 0.5rem;
    border: 3px solid lightgrey;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 7px 2px #0000004d;
}

.blurred-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent */
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center; /* Centers modal vertically */
    justify-content: center; /* Centers modal horizontally */
    z-index: 1500;
    transition: backdrop-filter 0.1s linear;
    animation: modalFadeIn 0.1s linear;
    animation-fill-mode: forwards;
}

.blurred-background:not(:has(*:hover)) {
    cursor: not-allowed;
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ev-modal.small {
    width: 25vw;
    min-width: 250px;
}

.ev-modal.medium {
    width: 33vw;
    min-width: 330px;
}

.ev-modal.large {
    width: 50vw;
    min-width: 500px;
}

.ev-modal.xl {
    width: 75vw;
    min-width: 500px;
}

.ev-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    padding: 0.8rem 3.2rem 0 0.8rem; /*Prevent header content from appearing behind close button.*/
}

.ev-modal.small .ev-modal-header {
    justify-content: start;
}

.ev-modal-body {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 0;
    text-align: start;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.8rem;
}

.ev-modal-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    padding: 0 0.8rem 0.8rem 0.8rem;
}

.ev-modal-close {
    color: #999;
    cursor: pointer;
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
}

.ev-modal-close:hover {
    color: #444;
}

.ev-modal.warning {
    border-color: red;
    border-width: 1px;
    box-shadow: 0 0 7px 2px #ff00008c;
}

/*Table styles*/
.ev-table-header {
    text-align: center;
    position: sticky;
    top: calc(-0.8rem - 1px);
}

.ev-table-interactive {
    cursor: pointer;
    transition: all 0.1s linear;
}

    .ev-table-interactive:hover {
        background: linear-gradient(#00000022, #00000022);
    }

.ev-table-orange.ev-table-orange {
    background-color: #ffab00;
    color: #fff;
}

.ev-table-blue.ev-table-blue {
    background-color: var(--ev-blue);
    color: #fff;
}

.ev-table-pink.ev-table-pink {
    background-color: #d70b5e;
    color: #fff;
}

.ev-table-green.ev-table-green {
    background-color: #5ed70b;
    color: #fff;
}