@import url("./variables.css");
@import url("./fonts.css");
/* ========== Widget shell ========== */
.loan-calculator       { margin-top: 20px; }
.field                 { margin-bottom:1rem; }
.top-gap               { margin-top:1.7rem; }
.slider-label          { font: 14px/1 var(--ff-body,sans-serif);
                         color:var(--sl-gray-v2, #B7B7B7); display: block; }
.legend                { display:flex; justify-content:space-between;
                         font: 14px var(--ff-body,sans-serif);
                         color:var(--sl-gray-v2,#B7B7B7); margin-top:.3rem; }

/* ========== Value box (display & edit) ========== */
.value-box             { cursor:pointer; display:inline-flex; align-items:center;
                         gap:.4rem; font:600 1.35rem/1 var(--ff-heading,sans-serif);
                         color:#fff; margin:.35rem 0 .8rem; }
.value-box .edit       { display:none; width:100px; background:transparent;
                         border:0; border-bottom:1px solid var(--sl-light-gray,#C9C9C9);
                         color:#fff; font:inherit; text-align:left; outline:none;
                         -moz-appearance:textfield; }
.value-box.editing .display   { display:none; }
.value-box.editing .edit      { display:inline-block; }
.edit-btn              { width:20px; height:20px;
                         background:url('../img/edit__icon.svg') center/contain no-repeat;
                         border:0; opacity:.6; cursor: pointer; margin-left: 5px;}
.value-box.editing .edit-btn { opacity:0; pointer-events:none; }

/* ========== Slider base ========== */
.slider                { -webkit-appearance:none; width:100%; height:4px;
                         border-radius:2px; background:#0A002C; outline:none; margin:0; }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:16px;height:16px;
                               border-radius:50%; background:var(--sl-primary,#FF6737);
                               border:3px solid var(--sl-secondary,#6737FF); cursor:pointer; }
.slider::-moz-range-thumb     { width:16px;height:16px;border-radius:50%;
                               background:var(--sl-primary,#FF6737);
                               border:3px solid var(--sl-secondary,#6737FF); cursor:pointer; }