/* Copyright @Brymond Tech  2023*/
/* Partnership with skillnize  2023*/


#mpesaModal .modal-header{
    background: #de0000 !important;
    border: none;
    border-radius: 0px;
    color: #fff;
}

#mpesaModal .close-dialog{
    color: #fff;
    background: none;
    border: none;
}

.btn-mpesa {
    background: #21ae5a !important;
    color:#fff;
    font-size:1rem;
}

.btn-mpesa:hover, .btn-mpesa:focus {
    color:#fff !important;
}

#mpesa-number-input{
    border:none;
    border-bottom:2px solid #de0000;
    font-size: 1.5rem;
    text-align: center;
}

#mpesa-number-input:focus, #mpesa-number-input:active {
    border:none;
    border-bottom:2px solid #de0000;
    box-shadow:none;

}


span.textbox {
    background-color: transparent;
    color: #888;
    line-height:20px;
    height:20px;
    padding:3px;
    text-align:center;
    font-size:1rem;
}

span.textbox input {
      border: 0px;
	    background-color: #FFF;
  }


.loader {
  position: relative;
  margin: 0px auto;
  width: 100px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.circular {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}


@-webkit-keyframes
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@keyframes
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@-webkit-keyframes
color {  100%, 0% {
 stroke: #de0000;
}
 40% {
 stroke: #de0000;
}
 66% {
 stroke: #de0000;
}
 80%, 90% {
 stroke: #de0000;
}
}
@keyframes
color {  100%, 0% {
 stroke: #de0000;
}
 40% {
 stroke: #de0000;
}
 66% {
 stroke: #de0000;
}
 80%, 90% {
 stroke: #de0000;
}
}