: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-inputs {
    border-right: 2px solid var(--ev-dark-blue);
}

.calc-input-table {
    --ev-input-border-radius: 0.25rem;
}

.calc-input-table tr {
    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%;
}

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

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

.ev-input:hover, .calc-inputs input:hover, .calc-inputs select:hover {
    border: var(--ev-input-border-hover);
    box-shadow: var(--ev-input-boxShadow-hover);
}

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

select.ev-input, .calc-inputs 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;
}

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

.calc-inputs .customized-input-number input {
    width: 80%;
    border: var(--ev-input-border);
    border-radius: 0.15rem;
    text-align: center;
}

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

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

/*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.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-image: var(--ev-btn-bg-image), linear-gradient(var(--ev-blue), var(--ev-blue))
}

.ev-btn.ev-blue-reveal-btn:hover {
    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);
    border-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;
    padding: 0.8rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 7px 2px #0000004d;
}

.blurred-background {
    animation: modalFadeIn 0.1s linear;
    animation-fill-mode: forwards;
}

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

    100% {
        opacity: 1;
    }
}

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

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

.ev-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ev-modal-body {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

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

.ev-modal-close {
    color: #999;
    cursor: pointer;
}

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

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

/*Table styles*/
.ev-table-header {
    cursor: pointer;
    text-align: center;
}

.ev-table-header:hover {
    background: #00000022;
    transition: all 0.1s linear;
}

.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;
}