/*Styling input text*/
.inputtext{
 width:100%;
 font-size:1em;
 padding:3px;
 border:1px solid #6e8199;
 border-top:none;
 border-left:none;
 border-right:none;
 text-align:right;
 
}
input:read-only { 
  
  border-color:red;
 
}
.dashvalue{
  width:100%;
  text-align: center;
  font-size: 1em;
  color:yellow;
  background-color: inherit;
  border: none;
}

/*Styling for Pinbar*/
.pinbar {
  position: relative;
  
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.pinbar:hover .image {
  opacity: 0.3;
}

.pinbar:hover .middle {
  opacity: 1;
}

.text {
  background-color: #003366;
  color: white;
  font-size: 10px;
  padding: 1px 1px;
}

/*Styling for background animation*/
input {
  width: 100%;
  color: white;
  width:100%;
  font-size:1em;
  padding:3px;
  border:1px solid #6e8199;
  border-top:none;
  border-left:none;
  border-right:none;
  text-align:right;
  color:black;
  }
  h4{
    color:yellow;
  }
  .bg {
 animation:slide 3s ease-in-out infinite alternate;
 background-image: linear-gradient(-60deg, #09f 50%, #6c3 50%);
 bottom:0;
 left:-50%;
 opacity:.5;
 position:fixed;
 right:-50%;
 top:0;
 z-index:-1;
}

.bg2 {
 animation-direction:alternate-reverse;
 animation-duration:4s;
}

.bg3 {
 animation-duration:5s;
}
@keyframes  slide {
 0% {
   transform:translateX(-25%);
 }
 100% {
   transform:translateX(25%);
 }
}