@import url("twingle.css");

@media all {

}

/* legacy styles (can maybe be removed) */

@media all {

  .amount-wrapper .slider-wrapper .slider input[type=range]::-webkit-slider-thumb {
    background-size: 100%;
    background-image: url(slider.png) !important; 
    background-color:#FFFFFF;
    border:none;}

  .amount-wrapper .slider-wrapper .slider input[type=range]:focus::-webkit-slider-thumb {
    cursor: pointer;
    background-color:#FFFFFF;
    border:none;  }

  .amount-wrapper .slider-wrapper .slider input[type=range]::-moz-range-thumb {
    background-size: 100%;
    background-image: url(slider.png) !important;
    background-color:#FFFFFF;
    border:none;  }

  .amount-wrapper .slider-wrapper .slider input[type=range]:focus::-moz-range-thumb {
    cursor: pointer; }

  .amount-wrapper .slider-wrapper .slider input[type=range]::-ms-thumb {
    background-size: 100%;
    background-image: url(slider.png) !important;
    background-color:#FFFFFF;
    border:none;  }

  .amount-wrapper .slider-wrapper .slider input[type=range]:focus::-ms-thumb {
    cursor: pointer; }

  .widget-header.widget {background:#FFFFFF;}

  /* input#form_youtubeUrl, input#form_youtubeUrl+label {display:none;} */
  
  .project-donators .message {
    background-color: transparent;
    color: inherit;
  }

  .progress {
    padding-inline: 1.5em;
  }

  .progress ,
  .progress .progress-meter .show-for-large {
    background-color: transparent;
    color: var(--color-darkpurple);
  }
  
  .progress.stand {
    background-color: transparent;
    color: var(--color-darkpurple);
  }

  .progress::before {
    z-index: -1;
    content: "";
    position: absolute;
    inset: -.5em -.5em;
    background-image: url("../Images/Twingle/meter-background-extended.png");
    background-size: 100% 100%;
  }

  .progress .progress-meter {
    color: var(--color-darkpurple);
    background-color: transparent;
    padding: 0;
    border: none !important;
    border-radius: 0;
    border-bottom: .125rem solid var(--color-darkpurple) !important;
  }
  
  .progress .progress-meter .percentage {
    right: 0;
  }

  .progress * {    
    font-weight: var(--font-weight-bold) !important;
  }

}

@media (min-width: 49.75rem) {
  
  .progress {
    padding-inline: 1.25em;
  }

  .progress::before {
    inset: -.5em -1.5em;
  }
  
}