:root {
    --color-border: #f2f2f2;
    --border-size: 4px;
    --widget-border-radius: 8px;
    --progress-padding: 0px;
    --outer-padding: 15px;
    --color-widget-text: #f2f2f2;
    --color-progress: #ff1f8ffe;
    --color-progress-two: #ff1f8ff8;
    --color-widget-bg: #161414FF;
    --goal-height: 2.25rem;
    --font-size: 20px;
    --font-family: "Poppins", sans-serif;
}

.widget-container {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: 700;
}

.goal-outer {
    width: 100%;
    padding: var(--progress-padding);
    border: var(--border-size) solid var(--color-border);
    border-radius: var( --widget-border-radius);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    height: var(--goal-height);
    background-color: var(--color-widget-bg);
}

.goal-inner {
    height: 100%;
    background-image: linear-gradient(to right, var(--color-progress), var(--color-progress-two));
    width: 65%;
    transition: width 0.5s ease;
    border-radius: calc(var(--widget-border-radius) / 2);
}

.goal-text-container, .noti-container {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .5em;
    font-size: 1.2em;
    line-height: 1;
    color: var(--color-widget-text);
    pointer-events: none;
}

.goal-text-container {
    font-family: var(--font-family);
}
.goal-text-container .goal-numbers {
    margin-left: auto;
}

.goal-numbers {
    display: flex;
    gap: .20em;
}

.goal-text-container svg {
    height: .85em;
    margin-right: 1rem;
    margin-bottom: -2px;
    fill: var(--color-widget-text);
}

.noti-container {
    justify-content: center;
    background-color: #f3f3f3;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .noti-container.show {
    opacity: 1;
  }
  
  .noti-container.hide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .no-border {
    border: none;
  }
  
  .hide {
    display: none;
  }