body {
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
}
.container {
    padding: 10px;
}
.custom-card1 {
    background-color: #2f2f2f;
    color: #fff;
    border: 0px solid transparent;
    border-radius: 1rem;
    box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.15),
                3px 7px 5px rgba(0, 0, 0, 0.1),
                5px 10px 8px rgba(0, 0, 0, 0.05);
    padding: 5px 0 0 0;
    margin: 0 0 20px 0;
}
.custom-card2 {
    background-color: var(--background_dark3);
    color: #fff;
    border: 0px solid transparent;
    border-radius: 1rem;
    margin: 0 0 10px 0;
}


.custom-card-transparent {
    background-color: transparent;
    color: #fff;
    border: 0px solid #242424;
    border-radius: 0 1rem 0 0;
    padding: 10px 0 0 0;
    
}


.custom-card-main-element {
    position: relative;
    background-color: transparent;
    color: #fff;
    border: none; /* Remove previous border-image if present */
    border-right: 0.25rem solid var(--background_dark1-light);
    border-left: 0.3rem solid var(--background_dark3);
    border-radius: 1rem;
    /* Box-shadow angled at 45deg with a fade-out effect */
    box-shadow: 3px 2px rgba(0, 0, 0, 0.1),
                7px 4px rgba(0, 0, 0, 0.07),
                10px 5px rgba(0, 0, 0, 0.05);
    padding: 10px 0 0 0;
    z-index: 1;
}

/*
.custom-card-main-element::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(var(--gradient-angle, 70deg), var(--background_dark3) 0%, var(--background_dark2) 12%, var(--background_dark1) 55%, var(--background_dark1-light) 85%);
}*/

.card-header{
    border: 0px solid transparent;
}
.slider-container {
    display: flex;
    justify-content: stretch;
    align-items: center;
}
.slider-container input[type="range"] {
    flex: 1;
}

.icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.icon-sm {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.icon-lg {
    width: 28px;
    height: 28px;
    margin-right: 7px;
}
.icon-xlg {
    width: 32px;
    height: 32px;
    margin-right: 0px;
}
.icon-steel {
    width: 24px;
    height: 22px;
    margin-right: 10px;
}
.pv-icon {
    padding-right: 7px;
    width: 30px;
    height: 30px;
}
.wind-on-icon {
    width: 25px;
    height: 28px;
    margin-right: 10px;
}
.wind-off-icon {
    width: 25px;
    height: 30px;
    margin-right: 10px;
}
.input-unit-text {
    padding-right:7px;
}
.input-fields {
    text-align: center;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-large);
    width: 65px;
    height: 32px;
    border-color: var(--background_dark3);
    box-shadow: none;
    text-shadow: none;
    border: none;
    box-sizing: border-box;
    border-radius: var(--radius_medium);
    background-color: var(--background_dark3);
    color: var(--text_color);
}
.input-fields-lg {
    text-align: center;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-large);
    width: 85px;
    height: 32px;
    border-color: var(--background_dark3);
    box-shadow: none;
    text-shadow: none;
    border: none;
    box-sizing: border-box;
    border-radius: var(--radius_medium);
    background-color: var(--background_dark3);
    color: var(--text_color);
}


.input-fields-price {
    text-align: center;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-large);
    max-width: 100px;
    height: 32px;
    border-radius: var(--radius_medium);
    box-shadow: none;
    text-shadow: none;
    border: none;
    box-sizing: border-box;
    background-color: var(--background_dark3);
    color: var(--text_color);
}
.input-fields-eprice {
    text-align: center;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-large);
    max-width: 60px;
    height: 32px;
    border-radius: var(--radius_medium);
    box-shadow: none;
    text-shadow: none;
    border: none;
    box-sizing: border-box;
    background-color: var(--background_dark3);
    color: var(--text_color);
}
.outputfields {
    text-align: left;
    padding-right: 20px;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-large);
    max-width: 11rem;
    height: 2.5rem;
    box-shadow: none;
    text-shadow: none;
    border: transparent;
    border-top: 2px solid var(--background_dark1);
    border-bottom: 2px solid var(--background_dark3);
    box-sizing: border-box;
    border-radius: var(--radius_medium);
    background-color: var(--background_dark2);
    color: var(--text-color); /* (--th_orange);*/
}


.outputfields-barplot {
    text-align: right;
    font-family: "myriad-pro-semi-condensed","Adobe Blank",Arial,Helvetica,sans-serif;
    font-size: var(--font-size-value-small);
    width: 6.5rem;
    height: 32px;
    border-radius: var(--radius_medium);
    box-shadow: none;
    text-shadow: none;
    border: none;
    z-index: 20;
    padding-right: 5px;
    background-color: var(--background_dark3);
    color: var(--text_color);
}
.form-check-input {
    background-color: var(--text-lightgray);
    border-color: var(--secondary-text-color);
}
.form-check-input:checked {
    background-color: var(--th-red-dark);
    border-color: var(--th-red-dark);
    box-shadow: 0 0 5px var(--th-red-dark);
}

.form-check-input[name="battery-choice"] {
    background-color: var(--text-lightgray);
    border-color: var(--secondary-text-color);
}
.form-check-input[name="battery-choice"]:checked {
    background-color: var(--th-red-light);
    border-color: var(--th-red-light);
    box-shadow: 0 0 5px var(--th-red-light);
}

.base-rectangle {
    align-items: center;
    height: 40px;
    background-color: var(--background_dark3);
    border-radius: 0px var(--radius_medium) var(--radius_medium) 0px;
}
.bar-plot{
    height: 50px;
    width: 60%;
    min-width: 100px;
}
.cost-line-plot{
    min-height: 200px;
}
.line-plot{
    min-height: 300px;
}
.pie-plot{
    min-width: 160px;
    max-width: 160px;
    min-height: 160px;
    max-height: 160px;
}
.form-select:focus {
    background-color: #ec6525; /* Background color when focused */
    color: #fff; /* Text color when focused */
    border-color: #ec6525;  /* Border color when focused */
    outline: none; /* Remove default outline */
}


[name="settings-group-title"] {    
    border-left: 0.2rem solid var(--th-red-dark);
}

[name="settings-group-content"] {
    border-left: 0.2rem solid var(--th-red-dark);
    border-radius: 0 20px;
}

[name="input-group-title"] {
    border-left: 0.2rem solid var(--secondary-text-color);
}

[name="input-group-content"] {
    border-left: 0.2rem solid var(--secondary-text-color);
    border-radius: 0 20px;
}

[name="input-group-title-p-pv"] {
    border-left: 0.2rem solid #ae1b83 !important;
}

[name="input-group-content-p-pv"] {
    border-left: 0.2rem solid #ae1b83 !important;
    border-radius: 0 20px;
}

[name="input-group-title-p-apv"] {
    border-left: 0.2rem solid #c4a4c8 !important;
}

[name="input-group-content-p-apv"] {
    border-left: 0.2rem solid #c4a4c8 !important;
    border-radius: 0 20px;
}

[name="input-group-title-p-apv"].disabled,
[name="input-group-title-p-apv"]:has(+ * input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-content-p-apv"].disabled,
[name="input-group-content-p-apv"]:has(input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-title-p-windOn"] {
    border-left: 0.2rem solid #af368c !important;
}

[name="input-group-content-p-windOn"] {
    border-left: 0.2rem solid #af368c !important;
    border-radius: 0 20px;
}

[name="input-group-title-p-windOn"].disabled,
[name="input-group-title-p-windOn"]:has(+ * input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-content-p-windOn"].disabled,
[name="input-group-content-p-windOn"]:has(input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-title-p-windOff"] {
    border-left: 0.2rem solid #ac6999 !important;
}

[name="input-group-content-p-windOff"] {
    border-left: 0.2rem solid #ac6999 !important;
    border-radius: 0 20px;
}

[name="input-group-title-p-windOff"].disabled,
[name="input-group-title-p-windOff"]:has(+ * input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-content-p-windOff"].disabled,
[name="input-group-content-p-windOff"]:has(input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-title-p-hydro"] {
    border-left: 0.2rem solid #bc87ad !important;
}

[name="input-group-content-p-hydro"] {
    border-left: 0.2rem solid #bc87ad !important;
    border-radius: 0 20px;
}

[name="input-group-title-p-hydro"].disabled,
[name="input-group-title-p-hydro"]:has(+ * input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-content-p-hydro"].disabled,
[name="input-group-content-p-hydro"]:has(input:disabled) {
    border-left-color: var(--text-lightgray) !important;
}

[name="input-group-title-ely"] {
    border-left: 0.2rem solid var(--th_orange) !important;
}

[name="input-group-content-ely"] {
    border-left: 0.2rem solid var(--th_orange) !important;
    border-radius: 0 20px;
}

[name="input-group-title-battery"] {
    border-left: 0.2rem solid var(--th-red-light) !important;
}

[name="input-group-content-battery"] {
    border-left: 0.2rem solid var(--th-red-light) !important;
    border-radius: 0 20px;
}

[name="lang-btn"] {
    background-color : var(--secondary-text-color);
    color: var(--text-color);
    border-color: transparent;
}
[name="lang-btn"]:hover {
    background-color : transparent;
    color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
}