:root {
     /* Layout */
     --calc-header-height: calc(var(--calc-font-lg) + 2 * var(--calc-spacing-sm) + var(--calc-spacing-md));
     --calc-viewport-min-width: 350px;
     --calc-bg-min-height: 400px;
     --calc-tile-expand-min-height: 10rem;
     --calc-popup-min-width: 300px;
     --calc-logo-width: 10%;

     /* Fonts */
     --calc-font-sm: 0.7em;
     --calc-font-md: 1em;
     --calc-font-lg: 1.5em;

     /* Spacing */
     --calc-spacing-xs: 3px;
     --calc-spacing-sm: 5px;
     --calc-spacing-md: 7px;
     --calc-spacing-lg: 10px;
     --calc-spacing-xl: 25px;

     /* Borders */
     --calc-border-radius: 10px;
     --calc-border-radius-pill: 100px;

     /* Shadows */
     --calc-shadow-len-sm: 1px;
     --calc-shadow-len-md: 2px;
     --calc-shadow-len-lg: 8px;
     --calc-shadow-blur: 4px;
     --calc-shadow-blur-hover: 8px;

     /* Colors */
     --calc-primary-color: #3151A3;
     --calc-secondary-color: #3c47ba;
     --calc-tertiary-color: #2a348a;
     --calc-background-color: #10477f;
     --calc-shadow-color: rgba(0, 0, 0, 0.4);

     --calc-warning: #ff0000;
     --calc-caution: #eed202;
     --calc-notice: #5ecf95ad;

     --calc-white: #fff;
     --calc-black: #000;
     --calc-light-grey: #e9ecef;
     --calc-medium-grey: #d0d6e1;
     --calc-dark-grey: #555;

     /* Z-index scale */
     --calc-z-copyright: 97;
     --calc-z-logo: 98;
     --calc-z-header: 99;
	 /* Website footer z-index is 100 */
     --calc-z-fullscreen: 101;
     --calc-z-popup-bg: 9997;
     --calc-z-popup: 9998;
     --calc-z-no-script: 9999;

     --calc-transition-standard: all 0.2s ease-in-out;
     --calc-shadow-standard: 0 var(--calc-shadow-len-md) var(--calc-shadow-blur) var(--calc-shadow-color);
     --calc-shadow-hover: 0 0 var(--calc-shadow-len-lg) var(--calc-secondary-color);
     --calc-shadow-focus: 0 0 var(--calc-shadow-len-sm) var(--calc-shadow-color);
}

@keyframes calc-flash-red {
     0% {
          background-color: inherit;
     }

     50% {
          background-color: var(--calc-warning);
     }

     100% {
          background-color: inherit;
     }
}

@keyframes calc-flash-red-text {
     0% {
          color: inherit;
     }

     50% {
          color: var(--calc-warning);
     }

     100% {
          color: inherit;
     }
}

/* =========================
    General Styles
    ========================= */
*,
*::before,
*::after {
     box-sizing: border-box;
}

html,
body {
     height: 100%;
     margin: 0;
     padding: 0;
     min-width: var(--calc-viewport-min-width);
     font-size: var(--calc-font-md);
}

body {
     font-family: 'Inter', sans-serif;
     color: var(--calc-black);
     background-color: var(--calc-white);
}

.warning {
     animation: calc-flash-red 3s linear infinite !important;
}

.warning-text {
     font-weight: 1000;
     animation: calc-flash-red-text 3s linear infinite !important;
}

.warning-solid {
     background-color: var(--calc-warning) !important;
     opacity: 0.7;
     transition: background-color 0.5s ease;
}

.caution {
     background-color: var(--calc-caution) !important;
}

.notice {
     background-color: var(--calc-notice) !important;
}

.not-allowed {
     cursor: not-allowed !important;
}

.scrollable {
     overflow: auto !important;
}

.dim {
     pointer-events: none;
     filter: blur(4px) brightness(75%);
     transition: filter 1.5s, background 0.2s;
}

/* =========================
    Typography
    ========================= */
.calc-h1 {
     font-weight: 500;
     margin-left: var(--calc-spacing-md);
}

.calc-h2 {
     color: var(--calc-secondary-color);
     margin: var(--calc-spacing-md);
}

.calc-h3 {
     color: var(--calc-black);
     margin: var(--calc-spacing-md);
}

.calc-h4 {
     color: var(--calc-tertiary-color);
     margin: var(--calc-spacing-md);
}

.calc-p {
     margin-bottom: 0;
     font-size: var(--calc-font-md);
}

.calc-nowrap-label-icon {
     white-space: nowrap;
}

/* =========================
    Header
    ========================= */
.calc-header {
     width: 100%;
     height: fit-content;
     display: flex;
     justify-content: space-between;
     align-items: bottom;
     padding: var(--calc-spacing-sm) var(--calc-spacing-xl);
     background: var(--calc-black);
     color: var(--calc-white);
     font-size: var(--calc-font-lg);
     box-shadow: var(--calc-shadow-standard);
     overflow: hidden;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
}

.calc-header:hover {
     overflow-x: auto;
}

.calc-header select {
     color: var(--calc-black);
     background: var(--calc-white);
     padding: var(--calc-spacing-xs);
     font-size: var(--calc-font-sm);
     font-weight: bold;
     border: 1px solid var(--calc-light-grey);
     border-radius: var(--calc-border-radius-pill);
     transition: var(--calc-transition-standard);
     width: auto;
     min-width: fit-content;
     height: calc(var(--calc-font-lg) * 1.2);
     display: inline-block;
     margin-right: var(--calc-spacing-lg);
}

.calc-header select:hover,
.calc-header select:focus {
     filter: brightness(80%);
     cursor: pointer;
     outline: none;
     border-color: var(--calc-white);
     box-shadow: none;
}

.calc-header-items {
     display: flex;
     align-items: center;
}

.calc-header-items button {
     color: var(--calc-white);
	 background-color: transparent;
}

.calc-title {
     display: none;
}

/* =========================
    Layout
    ========================= */
.calc-container,
.calc-container-no-header {
     display: flex;
     flex-direction: column;
     position: relative;
     height: 90vh;
     width: 100%;
     min-height: 30rem;
     padding-top: var(--calc-header-height);
     overflow: hidden;
}

.calc-container> :first-child {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
}

.calc-container h2 {
     font-family: 'Inter', sans-serif;
}

.calc-container hr {
     margin-top: var(--calc-spacing-lg);
     margin-bottom: var(--calc-spacing-lg);
}

.calc-split {
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow: auto;
}

.calc-split>div {
     flex: 1 1 0;
     min-width: 0;
}

.calc-content {
     background: var(--calc-light-grey);
     margin-left: var(--calc-spacing-md);
}

.calc-column-left {
     flex: 1;
     display: flex;
     flex-direction: column;
	 padding-top: var(--calc-spacing-lg);
}

.calc-column-right {
     display: flex;
     flex-direction: column;
	 padding-top: var(--calc-spacing-lg);
}

.calc-clear {
     clear: both;
}

.calc-form-container-hr {
     display: block;
}

.calc-fullscreen {
     position: fixed !important;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: var(--calc-z-fullscreen);
     background: var(--calc-white);
     box-sizing: border-box;
}

.calc-fullscreen:root {
     overflow: hidden !important;
}

/* =========================
    Tiles
    ========================= */
.calc-tile-shrink,
.calc-tile-expand {
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     margin: var(--calc-spacing-md);
     transition: var(--calc-transition-standard);
     padding: var(--calc-spacing-md);
}

.calc-tile-shrink {
     flex: 0 0 auto;
     flex-direction: row;
}

.calc-tile-expand {
     flex: 1 1 auto;
     overflow: auto;
     min-height: var(--calc-tile-expand-min-height);
}

.calc-tile-shrink:hover,
.calc-tile-expand:hover {
     box-shadow: var(--calc-shadow-hover);
}

.calc-row {
     display: flex;
}

.calc-column {
     flex: 50%;
}

/* =========================
    Canvas
    ========================= */
canvas {
     width: 100%;
     height: 100%;
     display: block;
     background-color: var(--calc-background-color);
}

.calc-background {
     flex: 1 1 0;
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     margin: var(--calc-spacing-md);
     margin-bottom: var(--calc-spacing-md);
     transition: var(--calc-transition-standard);
     position: relative;
     overflow: hidden;
     min-height: var(--calc-bg-min-height);
}

.calc-background:hover {
     box-shadow: var(--calc-shadow-hover);
}

.calc-logo {
     position: absolute;
     left: var(--calc-spacing-md);
     bottom: var(--calc-spacing-md);
     width: var(--calc-logo-width);
     z-index: var(--calc-z-logo);
     pointer-events: none;
}

.calc-instruction-text {
     color: var(--calc-white);
     font-style: italic;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     justify-content: center;
     align-items: center;
     width: 80%;
     height: 100%;
     text-align: center;
     text-shadow: 0 0 2px var(--calc-black);
}

.calc-copyright {
     width: 40%;
     color: var(--calc-white);
     font-size: var(--calc-font-sm);
     text-align: right;
     position: absolute;
     right: var(--calc-spacing-md);
     bottom: var(--calc-spacing-md);
     z-index: var(--calc-z-copyright);
     text-shadow: 0 0 2px var(--calc-black);
}

/* =========================
    No Script
    ========================= */

.calc-no-script {
     position: fixed;
     top: 0;
     left: 0;
     z-index: var(--calc-z-no-script);
     height: 100%;
     width: 100%;
     background-color: var(--calc-white);
}

/* =========================
    Lists
    ========================= */
.calc-list hr {
     margin: 0 var(--calc-spacing-xl);
}

/* =========================
    Tables
   ========================= */

.calc-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     background: var(--calc-white);
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     margin: var(--calc-spacing-md) 0;
     font-size: var(--calc-font-md);
     overflow: hidden;
     transition: var(--calc-transition-standard);
}

.calc-table th,
.calc-table td {
     padding: var(--calc-spacing-sm) var(--calc-spacing-md);
     text-align: left;
     border-bottom: 1px solid var(--calc-medium-grey);
}

.calc-table th {
     background: var(--calc-light-grey);
     color: var(--calc-tertiary-color);
     font-weight: bold;
     font-size: var(--calc-font-md);
}

.calc-table tr:last-child td {
     border-bottom: none;
}

.calc-table tbody tr:nth-child(odd) {
     background: var(--calc-light-grey);
}

.calc-table tbody tr:hover {
     background: var(--calc-medium-grey);
     transition: background 0.2s;
}

.calc-table:hover {
     outline: var(--calc-primary-color);
     border-color: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-hover);
     transition: 0.2s;
}

.calc-table thead {
     border-bottom: 2px solid var(--calc-primary-color);
}

/* =========================
    Results
    ========================= */
.calc-results {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0 var(--calc-spacing-md) var(--calc-spacing-sm);
}

.calc-results span,
.calc-results p {
     font-weight: bold;
}

.calc-results h2 {
     margin-left: 0;
}

.calc-results label {
     margin-bottom: 0;
}

.calc-results span:last-child,
.calc-results p:last-child {
     font-weight: normal;
     text-align: left;
}

.calc-results-value {
     display: flex;
     align-items: center;
     background-color: var(--calc-white);
     border-radius: var(--calc-border-radius-pill);
     box-shadow: var(--calc-shadow-standard);
     padding: var(--calc-spacing-sm);
     margin-left: var(--calc-spacing-sm);
     transition: var(--calc-transition-standard);
}

.calc-results-value:hover {
     box-shadow: var(--calc-shadow-hover);
}

.calc-result-value label:first-child,
.calc-result-value h5 {
     font-weight: bold;
     margin-right: var(--calc-spacing-sm);
}

.calc-span-spacing {
     padding-left: var(--calc-spacing-xs);
}

/* =========================
    Comments
    ========================= */
.calc-comment {
     font-size: var(--calc-font-sm);
     color: var(--calc-dark-grey);
     font-style: italic;
     text-align: right;
     margin-right: var(--calc-spacing-xl);
}

/* =========================
    Checkboxes
    ========================= */

/* Style for the checkbox group container */
.calc-checkbox-group {
     display: flex;
     flex-direction: column;
     margin-left: var(--calc-spacing-lg);
     background: none;
}

/* Style for each label and checkbox */
.calc-checkbox-group label {
     display: flex;
     align-items: center;
     font-size: 1em;
     cursor: pointer;
     transition: background 0.2s;
     border-radius: var(--calc-border-radius);
     width: 95%;
}

.calc-checkbox-group label:hover {
     background: var(--calc-light-grey);
}

.calc-checkbox-group input[type="checkbox"] {
     accent-color: var(--calc-secondary-color);
     background-color: black;
     width: 1.1em;
     margin-right: 0.7rem;
     cursor: pointer;
     box-shadow: none;
}

/* =========================
    Floating Input
    ========================= */
.calc-floating-input {
     background: none;
     border: none;
     border-radius: 0;
     outline: none;
     margin-left: 1em;
     margin-right: 1em;
     padding: 0;
     font-size: 0.75em;
     font-style: italic;
     text-align: center;
     min-width: 16em;
     height: auto;
     color: var(--calc-white);
     transition: border-color 0.2s;
     box-sizing: content-box;
     display: inline-block;
     vertical-align: top;
     box-shadow: none;
     opacity: 1;
}

.calc-floating-input:not(:placeholder-shown) {
     box-shadow: none;
}

.calc-floating-input:focus,
.calc-floating-input:hover {
     box-shadow: 0 var(--calc-shadow-len-sm) 0 0 var(--calc-white);
}

/* Placeholder styling */
.calc-floating-input::placeholder {
     color: var(--calc-white);
     opacity: 0.4;
     font-size: 1em;
}

/* =========================
    Switch
    ========================= */
.calc-switch {
     position: relative;
     display: inline-block;
     width: 15em;
     height: calc(var(--calc-font-lg) * 1.2);
     font-size: var(--calc-font-sm);
     margin-right: var(--calc-spacing-lg);
}

.calc-switch input {
     opacity: 0;
}

.calc-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: var(--calc-border-radius-pill);
     border: 1px solid var(--calc-white);
     transition: var(--calc-transition-standard);
     box-shadow: var(--calc-shadow-standard);
}

.calc-switch label {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: fit-content;
     height: fit-content;
     padding-left: calc(var(--calc-spacing-lg) * 2 + var(--calc-spacing-sm));
     padding-right: calc(var(--calc-spacing-lg) * 2 + var(--calc-spacing-sm));
     overflow: hidden;
}

.calc-slider:before {
     position: absolute;
     content: "\f104";
     font-family: "Font Awesome 6 Free";
     font-weight: 1000;
     font-size: var(--calc-font-lg);
     width: 100%;
     height: 100%;
     background-color: transparent;
     -webkit-transition: .7s;
     transition: .7s;
     left: 0;
     top: 0;
     display: flex;
     justify-content: left;
     padding-right: var(--calc-spacing-lg);
     padding-left: var(--calc-spacing-lg);
}

input:checked+.calc-slider:before {
     -webkit-transform: scaleX(-1);
     -ms-transform: scaleX(-1);
     transform: scaleX(-1);
}

.calc-slider:hover {
     filter: brightness(80%);
     cursor: pointer;
}

/* =========================
    Buttons
    ========================= */
.calc-button-group {
     display: flex;
     align-items: stretch;
}

#pdf_button {
     display: none;
}

.calc-button-last {
     display: flex;
     margin-bottom: var(--calc-spacing-sm);
}

.calc-button {
     width: 100%;
     margin: var(--calc-spacing-sm);
     display: block;
     font-weight: 500;
     background-color: var(--calc-primary-color) !important;
     color: var(--calc-white);
     border: none;
     border-radius: var(--calc-border-radius);
     cursor: pointer;
     box-shadow: var(--calc-shadow-standard);
     transition: var(--calc-transition-standard);
     padding: var(--calc-spacing-sm);
}

.calc-button:hover {
     outline: var(--calc-primary-color);
     border-color: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-hover);
}

.calc-button:active {
     background-color: var(--calc-tertiary-color);
     box-shadow: var(--calc-shadow-standard);
     transform: scale(0.98);
     transition: var(--calc-transition-standard);
}

.calc-button-icon {
     background: none;
     border: none;
     cursor: pointer;
     touch-action: none;
     transition: var(--calc-transition-standard);
     margin-right: var(--calc-spacing-md);
}

.calc-button-icon:hover {
     filter: brightness(80%);
}

/* =========================
    Fullscreen Checkbox
    ========================= */
.calc-fs-checkbox {
     display: none;
}

.calc-fa-toggle {
     cursor: pointer;
     display: inline-block;
     transition: color 0.2s, transform 0.3s;
     padding-right: var(--calc-spacing-md);
}

.calc-fa-toggle::before {
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     content: "\f065";
     display: inline-block;
     transition: opacity 0.3s, transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55), filter 0.3s;
     transform: scale(1);
}

.calc-fs-checkbox:checked+.calc-fa-toggle::before {
     content: "\f066";
}

.calc-fa-toggle:active::before,
.calc-fs-checkbox:active+.calc-fa-toggle::before {
     transform: scale(1.2);
}

.calc-fa-toggle:hover {
     filter: brightness(80%);
}

/* =========================
    Inputs and Selects
    ========================= */

.calc-input,
select {
     padding: var(--calc-spacing-sm) !important;
     border: 1px solid var(--calc-medium-grey) !important;
     border-radius: var(--calc-border-radius-pill) !important;
     box-shadow: var(--calc-shadow-standard);
     width: 35% !important;
     transition: var(--calc-transition-standard);
     text-align: right;
}

.calc-input:hover,
select:hover {
     outline: var(--calc-primary-color);
     border-color: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-focus);
}

.calc-input:focus,
select:focus {
     outline: var(--calc-primary-color);
     border-color: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-hover);
}

.calc-select-list {
     display: flex;
     justify-content: flex-end;
     align-items: center;
}

.calc-select-list select {
     width: auto;
     min-width: 0;
     margin-right: var(--calc-spacing-md);
     font-family: 'Inter', sans-serif;
     font-weight: 1000;
}

.calc-select-list h3 {
     margin-right: auto;
     padding-right: var(--calc-spacing-md);
     margin-left: var(--calc-spacing-md);
     align-items: center;
     margin-top: auto;
     margin-bottom: auto;
}

.calc-gray-select {
     background-color: var(--calc-light-grey);
     color: var(--calc-dark-grey);
}

/* =========================
    Form Groups
    ========================= */

.calc-form-container {
     width: 100%;
     float: left;
}

.calc-form-group {
     display: flex;
     align-items: center;
     margin: 0 var(--calc-spacing-md) var(--calc-spacing-md);
}

.calc-form-group button {
     margin-left: auto;
}

.calc-form-group label {
     flex: 1;
     font-weight: bold;
}

.calc-form-group span,
.calc-form-group p {
     margin-left: var(--calc-spacing-sm);
     text-align: left;
     color: var(--calc-dark-grey);
     font-weight: bold;
     width: 10%;
}

.calc-form-group button {
     text-decoration: underline;
     color: var(--calc-primary-color);
	 background-color: transparent;
     padding: 0 8px;
     font-weight: bold;
     transition: var(--calc-transition-standard);
     margin-right: 10%;
}

.calc-form-group button:hover {
     color: var(--calc-secondary-color);
     text-decoration: underline dotted;
}

/* Remove number input spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

/* Remove input spinner arrows for Firefox */
input[type="number"] {
     appearance: textfield;
     -moz-appearance: textfield;
}

/* =========================
     Scrollbar
     ========================= */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
     width: var(--calc-spacing-md);
     background: transparent;
     border-radius: var(--calc-border-radius);
}

::-webkit-scrollbar-thumb {
     background: var(--calc-primary-color);
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     border: 2px solid var(--calc-light-grey);
     transition: var(--calc-transition-standard);
}

::-webkit-scrollbar-thumb:hover {
     background: var(--calc-secondary-color);
}

::-webkit-scrollbar-corner {
     background: transparent;
}

/* Firefox */
html {
     scrollbar-width: thin;
     scrollbar-color: var(--calc-primary-color) transparent;
}

/* =========================
     Range Input
     ========================= */

.calc-range-div {
     margin: var(--calc-spacing-lg);
     touch-action: none;
}

input[type="range"] {
     appearance: none;
     width: 100%;
     height: 8px;
     padding: 0px;
     background: var(--calc-light-grey);
     border-radius: var(--calc-border-radius);
     outline: none;
     margin: var(--calc-spacing-md);
     transition: var(--calc-transition-standard);
     box-shadow: none;
}

input[type="range"]:hover {
     background: var(--calc-medium-grey);
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: var(--calc-border-radius-pill);
     background: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-standard);
     cursor: ew-resize;
     transition: var(--calc-transition-standard);
     border: 2px solid var(--calc-white);
}

input[type="range"]:hover::-webkit-slider-thumb {
     background: var(--calc-secondary-color);
}

input[type="range"]:active::-webkit-slider-thumb {
     background: var(--calc-tertiary-color);
     box-shadow: var(--calc-shadow-hover);
}

input[type="range"]::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius: var(--calc-border-radius-pill);
     background: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-standard);
     cursor: ew-resize;
     border: 2px solid var(--calc-white);
     transition: var(--calc-transition-standard);
}

input[type="range"]:hover::-moz-range-thumb {
     background: var(--calc-secondary-color);
}

input[type="range"]:active::-moz-range-thumb {
     background: var(--calc-tertiary-color);
}

input[type="range"]:focus {
     outline: none;
     box-shadow: var(--calc-shadow-hover);
}

input[type="range"]:focus::-webkit-slider-thumb {
     box-shadow: var(--calc-shadow-hover);
}

input[type="range"]:focus::-moz-range-thumb {
     box-shadow: var(--calc-shadow-hover);
}

/* Remove outline for Firefox */
input[type="range"]::-moz-focus-outer {
     border: 0;
}

/* Hide the track border in IE */
input[type="range"]::-ms-tooltip {
     display: none;
}

/* =========================
     Loading
     ========================= */
.calc-loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--calc-white);
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     padding: var(--calc-spacing-md) var(--calc-spacing-md);
     z-index: var(--calc-z-popup);
     min-width: var(--calc-popup-min-width);
     max-height: 75%;
     height: auto;
     overflow-y: auto;
     text-align: center;
     cursor: progress;
     opacity: 1;
     transition: opacity 0.75s ease;
}

.calc-loading-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--calc-shadow-color);
     z-index: var(--calc-z-popup-bg);
     backdrop-filter: blur(16px) brightness(80%);
     -webkit-backdrop-filter: blur(16px) brightness(80%);
     transition: backdrop-filter 1s ease, -webkit-backdrop-filter 1s ease;
     cursor: progress;
     overflow: visible;
}

/* =========================
     Loading Spinner 
     ========================= */
@keyframes calc-spinner-rotate {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

.calc-loading-spinner {
     display: inline-block;
     width: 3em;
     height: 3em;
     border: 0.5em solid var(--calc-medium-grey);
     border-top: 0.5em solid var(--calc-primary-color);
     border-radius: 50%;
     background-color: var(--calc-light-grey);
     box-shadow: var(--calc-shadow-standard) inset;
     animation: calc-spinner-rotate 0.8s linear infinite;
     margin-top: var(--calc-spacing-lg);
     position: relative;
}

.calc-loading-spinner::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 1em;
     height: 1em;
     background-color: var(--calc-medium-grey);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
}

/* =========================
     Popups
     ========================= */
.calc-popup,
.calc-widget-popup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--calc-white);
     border-radius: var(--calc-border-radius);
     box-shadow: var(--calc-shadow-standard);
     padding: var(--calc-spacing-md) var(--calc-spacing-md);
     z-index: var(--calc-z-popup);
     min-width: var(--calc-popup-min-width);
     max-height: 75%;
     height: auto;
     overflow-y: auto;
}

.calc-popup {
     text-align: center;
}

.calc-popup textarea {
     width: 90%;
     margin: var(--calc-spacing-md) auto;
     display: block;
     border-radius: var(--calc-border-radius);
     border: 1px solid var(--calc-medium-grey);
     box-shadow: var(--calc-shadow-standard);
     padding: var(--calc-spacing-md);
     font-family: inherit;
     background: var(--calc-light-grey);
     color: var(--calc-black);
     resize: both;
}

.calc-popup textarea:hover {
     box-shadow: var(--calc-shadow-hover);
}

.calc-popup textarea:focus {
     outline: var(--calc-primary-color);
     border-color: var(--calc-primary-color);
     box-shadow: var(--calc-shadow-focus);
}

.calc-popup p {
     margin-top: 0px;
}

/* =========================
   Popup Background
   ========================= */
.calc-popup-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--calc-shadow-color);
     z-index: var(--calc-z-popup-bg);
}

.calc-popup-fade-in {
     opacity: 1;
     transition: opacity 1s linear;
}

.calc-popup-fade-out {
     opacity: 0;
     transition: opacity 1s linear;
     pointer-events: none;
}

.calc-popup button {
     margin: 0;
}