:root{
    font-family:Arial,sans-serif;
    color:#263238;
    background:#f4f6f8}*{box-sizing:border-box

}
body{
    margin:0

}

.container{
    width:min(100% - 2rem,1050px);
    margin:auto

}

.topbar{
    background:#184f83;
    color:#fff;
    padding:1rem 0

}

.topbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center

}

.topbar a{
    color:#fff

}
.instructions,.account-bar,.panel{
    background:#fff;
    border:1px solid #d4dce3;
    border-radius:8px;
    box-shadow:0 2px 8px #00000010;
    margin:1.25rem 0;padding:1.25rem

}

.instructions h1{
    font-size:1.25rem;
    margin-top:0

}
.account-bar{
    display:flex;
    gap:.75rem;
    align-items:center;
    flex-wrap:wrap

}

input{
    border:1px solid #aab7c2;
    border-radius:5px;
    padding:.65rem;
    max-width:100%;
    font-size:inherit;
    font-family:inherit;

}

button,.button{
    background:#1769aa;
    border:0;
    border-radius:5px;
    color:#fff;
    cursor:pointer;
    padding:.7rem 1rem;
    text-decoration:none

}

.secondary{
    background:#667780

}

.danger{background:#a52727}

.remember{
    display:flex;
    align-items:center;
    gap:.35rem

}

.validation{
    color:#a52727;
    display:block;
    width:100%

}

.status{
    border-radius:6px;
    margin:1rem 0;
    padding:1rem

}

.success{
    background:#e6f4ea;
    color:#155724

}

.error{
    background:#fde8e8;
    color:#842029

}

.panel{
    padding:0;
    overflow:hidden

}

.panel summary{
    background:#e8eef4;
    cursor:pointer;
    font-weight:700;
    padding:1rem

}

.panel-body{
    padding:1.25rem

}

.settings-fields {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.settings-fields > .field {
    flex: 1;
    min-width: 0;
}


.field{
    margin-bottom:1.25rem

}

.field>label{
    display:block;
    font-weight:700;
    margin-bottom:.4rem

}

.field button{margin:.5rem}

.money{
    display:inline-flex;
    align-items:center;
    gap:.3rem

}

.money input{
    width:8rem;
    text-align:right;
}

.actions{
    border-top:1px solid #d4dce3;
    padding-top:1rem

}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem

}

button:disabled {
    background-color: #d6d6d6;
    color: #777;
    border-color: #bcbcbc;
    cursor: not-allowed;
    opacity: 0.7;
}

button:disabled:hover {
    background-color: #d6d6d6;
    color: #777;
}

.center{text-align:center}

.gauge{--pct:0;width:220px;height:110px;overflow:hidden;margin:1rem auto;position:relative}
.gauge:before{content:"";
              position:absolute;
              inset:0;
              border-radius:220px 220px 0 0;
              background:conic-gradient(from 270deg at 50% 100%,#71b44c 0 40%,#f2c94c 40% 60%,#f2994a 60% 72%,#d64545 72% 80%,#7b3f98 80% 100%);
              mask:radial-gradient(at 50% 100%,transparent 0 52%,#000 53%)}

.gauge:after{content:"";
             position:absolute;
             width:3px;
             height:82px;
             background:#263238;
             bottom:0;
             left:50%;
             transform-origin:50% 100%;
              transform:rotate(calc(-90deg + (min(var(--pct),125) / 125) * 180deg))}

.gauge div{position:absolute;z-index:2;left:0;right:0;bottom:0}
.gauge strong,.gauge span{display:block}
.history{list-style:none;padding:0}
.history li{display:flex;justify-content:space-between;border-bottom:1px solid #dde3e8;padding:.65rem 0}

@media(max-width:700px)
{
    .grid{grid-template-columns:1fr}
 .field button{display:block;margin-left:0}
 .account-bar{align-items:flex-start;flex-direction:column}

}

@media (max-width: 650px) {
    .settings-fields {
        flex-direction: column;
    }

        .settings-fields .field {
            width: 100%;
        }
}

 .meter-wrap

{
    width: 320px;
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
}

.meter {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: conic-gradient( from 225deg,
    /* 0 - 50% */
    #70c447 0deg 108deg,
    /* 50 - 75% */
    #ffd23f 108deg 162deg,
    /* 75 - 90% */
    #ff9635 162deg 194.4deg,
    /* 90 - 100% */
    #ed3538 194.4deg 216deg,
    /* 100 - 125% */
    #74298e 216deg 270deg, transparent 270deg 360deg );
    box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 5px #eee, 0 0 0 7px #ccc;
}

    /* White center creates the colored outer ring */
    .meter::before {
        content: "";
        position: absolute;
        inset: 25px;
        border-radius: 50%;
        background: white;
        z-index: 1;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, .12);
    }


/* =========================
   SCALE LABELS
   ========================= */

.meter-scale {
    position: absolute;
    inset: 0;
    z-index: 3;
    color: #666;
    font-size: 13px;
}

.tick {
    position: absolute;
    z-index: 4;
    white-space: nowrap;
    font-size: 13px;
    color: #666;
    transform: translate(-50%, -50%);
}

/* 0% = $0 */
.tick-0 {
    left: 25.3%;
    top: 74.7%;
}

/* 25% = $75 */
.tick-25 {
    left: 17.6%;
    top: 44.9%;
}

/* 50% = $150 */
.tick-50 {
    left: 39.2%;
    top: 19.3%;
}

/* 75% = $225 */
.tick-75 {
    left: 69.1%;
    top: 21.9%;
}

/* 100% = $300 */
.tick-100 {
    left: 83%;
    top: 50%;
}

/* 125% = $375 */
.tick-125 {
    left: 74.7%;
    top: 74.7%;
}


/* =========================
   NEEDLE
   ========================= */

.needle {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: calc(50% - 3px);
    width: 42%;
    height: 6px;
    background: #f77b70;
    transform-origin: 0% 50%;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

    /* Needle point */
    .needle::after {
        content: "";
        position: absolute;
        right: -10px;
        top: -4px;
        width: 14px;
        height: 14px;
        background: #f77b70;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }


/* =========================
   CENTER HUB
   ========================= */

.needle-hub {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(#fafafa, #d7d7d7);
    border: 4px solid #eeeeee;
    box-shadow: 0 2px 5px rgba(0,0,0,.25), inset 0 1px 2px white;
}


/* =========================
   GRAY INFORMATION AREA
   ========================= */

.gauge-details {
    background-color: #f2f2f2;
    padding: 10px 16px 14px;
    border-radius: 6px;
    text-align: center;
}

.threshold-text {
    margin-bottom: 12px;
}

    .threshold-text strong {
        display: inline;
        font-size: 18px;
    }

    .threshold-text span {
        display: inline;
    }

.gauge-details p {
    margin: 8px 0;
}