.wrapper {    
	margin-top: 80px;
	margin-bottom: 20px;
}

.form-signin {
  max-width: 420px;
  padding: 30px 38px 66px;
  margin: 0 auto;
  background-color: #eee;
  border: 3px dotted rgba(0,0,0,0.1);  
  }

.form-capture {
  padding: 30px 38px 66px;
  margin: 0 auto;
  background-color: #eee;
  border: 3px dotted rgba(0,0,0,0.1);  
  }
  
.form-signin-heading {
  text-align:center;
  margin-bottom: 30px;
}

.form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
}

input[type="text"] {
  margin-bottom: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ss-searchfields {
    margin: 0px 5px 0px 5px;
}

.colorgraph {
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
.messages {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-content: center !important;
  -ms-flex-line-pack: center !important;
  align-content: center !important;
  -webkit-box-align: center !important;
  -moz-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  margin-bottom: 20px !important;
max-width: 500px;
box-shadow: 0 4px 2px -2px gray;
  }

  .messages .message {
    -webkit-box-flex: 1 !important;
    -moz-box-flex: 1 !important;
    -webkit-flex: 1 1 auto !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    padding: 10px !important;
    -webkit-transition: all 250ms ease-in-out !important;
    transition: all 250ms ease-in-out !important;
    overflow: hidden !important;
    text-align: left !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;

}

 .messages .message span {
  background: #007AFF !important;
  display: inline-block !important;
  color: white !important;
  padding: 10px !important;
  border-radius: 10px !important;
  text-align: left !important;
  max-width: 240px !important;
} 

.time {
  -webkit-box-flex: 0 !important;
  -moz-box-flex: 0 !important;
  -webkit-flex: 0 1 auto !important;
  -ms-flex: 0 1 auto !important;
  flex: 0 1 auto !important;
  -webkit-align-self: auto !important;
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
  width: 120px !important;
  text-align: center !important;
  padding: 0 0 0 0 !important;
  -webkit-transition: all 250ms ease-in-out !important;
  transition: all 250ms ease-in-out !important;
  -webkit-transform: translate3d(10px, 0, 0) !important;
  -moz-transform: translate3d(10px, 0, 0) !important;
  transform: translate3d(10px, 0, 0) !important;

}

.time .slide-right {
    -webkit-transform: translate3d(130px, 0, 0) !important;
    -moz-transform: translate3d(130px, 0, 0) !important;
    transform: translate3d(130px, 0, 0) !important;
  }
.messages .other   {
    -webkit-box-flex: 1 !important;
    -moz-box-flex: 1 !important;
    -webkit-flex: 1 1 auto !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    padding: 10px !important;
    -webkit-transition: all 250ms ease-in-out !important;
    transition: all 250ms ease-in-out !important;
    overflow: hidden !important;
    text-align: right !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
.messages .other .slide-right {
    -webkit-transform: translate3d(120px, 0, 0) !important;
    -moz-transform: translate3d(120px, 0, 0) !important;
    transform: translate3d(120px, 0, 0) !important;
  }
.messages .other span {
    
      background: #C7C7CC !important;
  display: inline-block !important;
  color: white !important;
  padding: 10px !important;
  border-radius: 10px !important;
    
  text-align: right !important;
  max-width: 240px !important;
  }
  
  .loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #000;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}