@media screen and (min-width: 801px){
    .doc_subheading.key {
        background: url(../images/key_x2.png) 1px 0 no-repeat;
        background-size: 28px;
        padding-left: 40px;
        padding-bottom: 0;
        font-weight: 500;
    }
}

.mt-5 {
    margin-top: -5px!important;
}
.doc_subheading {
    color: #333 !important;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 1.3rem;
    opacity: .9;
    margin-bottom: 8px;
}

.ui-widget-header {  
    background: green;  
    border: 1px solid #DDDDDD;  
    color: #333333;  
    font-weight: bold;  
 }

 @import url(https://fonts.googleapis.com/css?family=Expletus+Sans);
/* Styling an indeterminate progress bar */

progress:not(value) {
  /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
  /* Get rid of the default appearance */
  appearance: none;
  
  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  border: none;
  
  /* Add dimensions */
  width: 100%; height: 20px;
  
  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
  
  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  color: royalblue;
  
  position: relative;
  margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
  position: relative;
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:3px;
  
  /* Let's animate this */
  animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
  /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
  content: '';
  position: absolute;
  
  width:5px; height:5px;
  top:7px; right:7px;
  
  background-color: white;
  border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
    -moz-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:3px;
  
  /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

  /* Dimensions should be similar to the parent progress element. */
  width: 100%; height:20px;
}

.progress-bar span {
  background-color: royalblue;
  border-radius: 3px;
  
  display: block;
  text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}





.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
    -webkit-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);
}


.html5::-moz-progress-bar,
.php::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
    -moz-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
}


.StripeElement {
    background-color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}
.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
    border-color: #fa755a;
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}