body
{
      font-family: 'Roboto', sans-serif;

      background-image: url('../images/map.jpg');
      background-repeat: repeat;
      background-position: 1000px 0px;
      background-color: #FFF;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e4e4e4;
    margin: 1em 0;
    padding: 0;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}


label.space
{
    margin-top: -10px;
}


.label {
    display: inline;
    padding: 5px 10px;
    color: #fff;
    text-align: center;
    color: rgba(0,0,0,.4);
}

.label-success {
    background-color: #f0f6ff;
    font-size: 12px !important;
    color: #6896e2;
    letter-spacing: 2px;
}


input:-webkit-autofill
{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

*:focus { outline: none !important; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}


p:focus, span:focus, .slick-list
{
    outline: none !important;
}

.text-center
{
    text-align: center !important;
}

.text-space-1
{
    letter-spacing: 1px !important;
}

.text-space-2
{
    letter-spacing: 2px !important;
}


p.error
{
    color: #ec4949;
    font-size: 11px;
}

.absolute-center
{
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.mdl-textfield__label {

    color: rgba(0,0,0,.4);
    font-size: 12px;
    letter-spacing: 1px;

}

.mdl-textfield__label.hl
{
    font-size:10px !important;
}


.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
   
    color: rgba(0,0,0,.2);
    font-size: 12px;
    top: -4px;
}



.mdl-button-alt.mdl-spinner {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-top: 10px;
}


.mdl-switch
{
    width: auto;
}

.mdl-switch__label
{
    font-size: 11px;
    line-height: 26px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.4);
    margin-bottom: 20px;
}

.mdl-switch-xs .mdl-switch__track {

    left: 0;
    top: 7px;
    height: 8px;
    width: 30px;
    border-radius: 14px;
}

.mdl-switch-xs .mdl-switch__thumb {
    left: 0;
    top: 2px;
    height: 16px;
    width: 16px;
}


.tooltip-inner {
    background-color: #448AFF;
    letter-spacing: 1px;
    font-size:11px;
}


.tooltip.top .tooltip-arrow{
    border-top-color: #448AFF;
}
.tooltip.bottom .tooltip-arrow{
    border-bottom-color: #448AFF;
}
.tooltip.left .tooltip-arrow{
    border-left-color: #448AFF;
}
.tooltip.right .tooltip-arrow{
    border-right-color: #448AFF;
}

div.row div.column {

    width: 390px !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.clear
{
    display: block;
    clear: both;
}

.pointer
{
    text-align: center;
    font-size: 20px;
    color: #448aff;
    margin-top: 40px;
}

div.title-bar
{
    width: 100%;
    height: 60px;
    background-color: #448aff;
    padding:10px;
    padding-top: 15px;
}

div.title-bar a
{
    color: #fff;
    font-size: 16px;
    right: 10px;
    position: relative;
    top: 6px;
}

div.title-bar:hover
{
    background-color: #00103F;
}

div.title-bar a:hover
{
    text-decoration: none;
}

div.title-bar a i.glyphicon
{
    font-size: 12px;
    color: #fff !important;
}


.mild-text
{
    font-size: 12px;
    color: #cacaca;
    line-height: 20px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.45);
    margin-bottom: 20px;
}



div.canvas {

    margin-top: 20px;
    
    background-color: #fff;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-top: 20%;
    padding: 0px;
}



div.canvas:hover
{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

div.canvas .header div.icon
{
    width: 80px;
    height: 80px;
    margin: 0 auto 10px auto;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    background-color: inherit;
}

div.canvas .header div.icon .fa
{
    font-size: 44px;
}

div.canvas .header div.icon i {
    height: 80px;
    width: 80px;
    display:table-cell;
    vertical-align:middle;
    color: #448AFF;
}​

div.canvas .header div.icon i:hover {
    color: #448AFF;
}​

a:hover, a:focus {
    color: #00103F;
    text-decoration: underline;
}


div.canvas .glyphicon:hover, div.canvas .fa:hover
{
    color: #00103F;
}


div.section
{
    padding: 30px;
    min-height: 400px;
    padding-top: 40px;
}

div.section div.method
{
    min-height: 180px;
}

#page-OTP
{
    padding-top: 20px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 80px;
}

#page-OTP i.icon.fa
{
    color: #448AFF;
    margin-bottom: 20px;
}

#page-OTP i.icon.fa:hover
{
    color: #00103F;
}

#page-OTP i.icon.fa
{
    font-size: 60px !important;
    margin-bottom:30px;
    margin-top: 10px;
}

#page-OTP i.icon.fa:hover
{
    color: #00103F;
}


button.pay
{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    letter-spacing: 2px;
    font-size: 11px;
}

div.section div.merchant
{
    border-bottom: solid 6px #fdeacd; /* fdeacd, d5e5ff, f3f3f3 */
    margin-bottom: 40px;
    padding: 10px;
    text-align: center;
}



div.section div.merchant .name 
{
    font-size: 13px;
    color: #cacaca;
    line-height: 20px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.4);
    margin-bottom: 30px;
    margin-top: 0px;
}


div.section div.merchant .amount
{
    font-size: 14px;
    color: #448aff;
    font-weight: 200;
    letter-spacing: 1px;
    margin-bottom: 6px;
}


div.section div.merchant .amount .currency
{
   position: relative;
   top:-8px;
   padding-right:6px;
   margin-left: -20px;
}

div.section div.merchant .amount .fee
{
   position: relative;
   top:-10px;
   padding-right:6px;
}

div.section div.merchant .amount .value
{
    font-size: 26px;
    color:#00103F;
}

.mdl-menu .fa
{
    font-size: 10px;
    padding-right: 10px;
    color: #448AFF;
}

.mdl-textfield__input {

    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    color:#666;
}

.mdl-button
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    height: auto;
    min-width: auto;
    line-height: 100%;
}

.mdl-button--raised {

    background-color:#448aff;
    color: #eee;
    font-size:12px;
}

.mdl-button.final:focus {
    background-color:#448aff !important; /* #00103F; */
}

.mdl-button.final:hover {
    background-color:#00103F !important; /* #00103F; */
}

.mdl-button--raised:focus:not(:active) {
    box-shadow: 0 0 8px rgba(0,0,0,.18), 0 4px 4px rgba(0,0,0,.18) !important;
}


.mdl-button .material-icons {
    color: #fefefe;
}

.mdl-button .material-icons:hover {
    color: #eee;
}

.mdl-button.mdl-button--icon:hover
{
    background-color:#2F7DFF;
}

.mdl-tooltip
{
    font-size:12px;
    background-color: #2F7DFF;
}

.mdl-tooltip.dark
{
    background-color: #00103F;
    font-size:12px;
}

.mdl-menu__item
{
    font-size:11px;
}


.error.mdl-textfield__label:after {
    background-color: #ef665f;
}


.fl { width: 100% !important; }



#methods
{
    position: relative;
}

#methods .nav
{
    position: absolute;
    right: 0px;
    top: 26px;
    width: 32px;
    height: 32px;
    text-align: center;
}

#methods .nav.left
{
    left: 0px;
}

#methods .nav.right
{
    right: 0px;
}

#methods .nav .fa, #methods .nav .glyphicon
{
    font-size: 12px;
    padding-top: 10px;
    font-weight: bold;
}


div.status div.result
{
    padding-top: 10px;
    padding-bottom: 40px;
    text-align: center;
}

div.status div.result i.icon.fa
{
    font-size: 90px !important;
    margin-bottom:10px;
}


div.status p.cool
{
    letter-spacing: 1px  !important;
    color:rgba(0,0,0,.5) !important;
    font-size: 12px;
}

div.status div.result .mdl-spinner
{
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: #ccc;
}

div.status div.result p.title
{
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 40px;

}

div.status div.result p.message
{
    text-align: left;
    font-size: 11px;
    margin-bottom: 40px;
}

div.status div.result p.home /* redirecting...*/
{
    font-size:11px;
    text-align: left;
}


div.status div.progress p.message
{
    margin-top: 80px;
    margin-bottom: 50px;
    font-size:11px;
}


/* Success */

div.status > div.status-1 p.title, div.status > div.status-1 i.icon.fa
{
    color: #2FB969 !important;
}

div.title-bar.status-1 {

    background-color: #2FB969;
}

div.status > div.status-1 .mdl-spinner__layer-1, div.status > div.status-1 .mdl-spinner__layer-3 {

    border-color: #2FB969 !important;
}

div.status > div.status-1 .mdl-spinner__layer-2, div.status > div.status-1 .mdl-spinner__layer-4 {

    border-color: #448AFF !important;
}

/* Cancelled Transactions */

div.status > div.status--2 p.title, div.status > div.status--2 i.icon.fa
{
    color: #36688a !important;
}

div.title-bar.status--2 {

    background-color: #36688a;
}

div.status > div.status--2 .mdl-spinner__layer-1, div.status > div.status--2 .mdl-spinner__layer-3 {

    border-color: #36688a !important;
}

div.status > div.status--2 .mdl-spinner__layer-2, div.status > div.status--2 .mdl-spinner__layer-4 {

    border-color: #448AFF !important;
}


/* Failed Transactions */

div.status > div.status--1 p.title, div.status > div.status--1 i.icon.fa
{
    color: #FF3232 !important;
}

div.title-bar.status--1 {

    background-color: #FF3232;
}

div.status > div.status--1 .mdl-spinner__layer-1, div.status > div.status--1 .mdl-spinner__layer-3 {

    border-color: #FF3232 !important;
}

div.status > div.status--1 .mdl-spinner__layer-2, div.status > div.status--1 .mdl-spinner__layer-4 {

    border-color: #448AFF !important;
}


div.status > div.result p.reason
{
    font-size:11px;
}

div.status > div.result p.reason i.fa
{
    margin-right:10px; color: #448aff;
}


div.title-bar p.invoice
{
    font-size: 13px;
    color: #fff;
    padding-left: 20px;
    line-height: 32px;
    color: rgba(255,255,255,.8);
    font-family: arial;
}

div.title-bar p.invoice .fa, .invoice .glyphicon
{
    color: rgba(255,255,255,0.8);
    padding-right: 14px;
    line-height: 30px;
}


.caption
{
    font-size:11px;
    color: #73a4f5; /* #73a4f5 */
    line-height:20px;
    padding: 20px 0px;
    padding-bottom: 0px;
    color: rgba(0,0,0,.5); /* rgb(125, 173, 255); */
    letter-spacing: 1px;
    text-align: left;
}

.caption.lt
{
    color: rgba(0,0,0,.45);
}


.caption.md
{
    font-size:12px;
    color: #73a4f5;
}

.caption .glyphicon, .caption .fa
{
    color: #448aff;
    padding-right: 8px;
}


input.cc
{
    background-image: url(../images/cards-sprite.png) !important;
    background-repeat: no-repeat !important;
    background-size: 45px 136px;
    background-position: 100% 2px;
}

input.master
{
    background-position: 100% -38px;
}

input.visa
{
    background-position: 100% -74px;
}

input.verve
{
    background-position: 100% -110px;
}



i.naira
{
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 11px;
}


.mdl-textfield .mdl-icon-toggle__label {
    float: right;
    margin-top: -30px;
    color: rgba(0,0,0,0.4);
}

.mdl-icon-toggle__label.material-icons {
    line-height: 32px;
    font-size: 20px;
}

.material-icons .fa-eye, .material-icons .fa-eye-slash
{
    font-size: 12px;
    line-height: 28px;
    width: 100%;
    height: 100%;
    color: #ccc !important;
}

.material-icons .fa-eye:hover, .material-icons .fa-eye-slash:hover
{
    color: #448AFF !important;
}


#page-PIN
{
    padding-top: 20px;
}


#auth-3DS
{
    text-align:center;
}

#auth-3DS img
{
    margin-bottom: 60px;
    margin-top: 40px;
}

#keypad
{
    margin-bottom: 30px;
}

#keypad button.mdl-button--fab
{
    border-radius: 0%;
    font-size: 12px;
    height: 38px;
    margin: auto;
    min-width: 32px;
    width: 46px;
    padding: 0;
    overflow: hidden;
    background: rgba(158,158,158,.2);
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
    position: relative;
    line-height: normal;
    margin-right: 14px;
    margin-bottom: 14px;
    color: #1e2833;

    font-size: 12px;
    height: 36px;
    width: 36px;
    margin-right: 13px;
    margin-bottom: 13px;
}

#keypad button.mdl-button--fab.x
{
    margin-right: 0px;
    margin-left: 0px;
    font-size: 11px;
}

#keypad button.mdl-button--fab.x .glyphicon
{
    font-size:9px;
}


.footer p
{
    font-size: 10.5px;
    text-align: center;
    padding-top: 40px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.5);
    line-height: 50px;
}

.footer a, .footer a:hover
{
    text-decoration: none;
    color:#6792D8;
}




/* Bouncing arrow code */

.bounce-x-p {
  -moz-animation: bounce-x-p 4s infinite;
  -webkit-animation: bounce-x-p 4s infinite;
  animation: bounce-x-p 4s infinite;
}

@-moz-keyframes bounce-x-p {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  60% {
    -moz-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@-webkit-keyframes bounce-x-p {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  60% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@keyframes bounce-x-p {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  60% {
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}

/* End bouncing arrow code */


/* Bouncing arrow code */

.bounce-x-n {
  -moz-animation: bounce-x-n 4s infinite;
  -webkit-animation: bounce-x-n 4s infinite;
  animation: bounce-x-n 4s infinite;
}

@-moz-keyframes bounce-x-n {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(10px);
    transform: translateX(10px);
  }
  60% {
    -moz-transform: translateX(5px);
    transform: translateX(5px);
  }
}
@-webkit-keyframes bounce-x-n {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  60% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
}
@keyframes bounce-x-n {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  60% {
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
}

/* End bouncing arrow code */