/****UI COMMON STYLES****/
.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(175, 175, 175, 0.3); }
.centreElement { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }

.hidden { display: none; visibility: hidden; }

header { margin: 0 auto; text-align: center; }
.header-padder { padding: 10% 10px 24px; }
.header-logo { display: inline-block; width: 300px; height: 77px; background-image: url(../images/rewardle-logo-dark.png); background-position: center center; background-size: contain; text-indent: -9999px; }

.input-container { margin: 0 auto 12px; display: block; position: relative; overflow: auto; max-width: 320px; }
.input-container-border { border: 1px solid #9DA5AF; }
.input-container label.enlarge { font-size: 14px; font-weight: bold; top: 17px; left: 16px; }
.input-container label { font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 12px; color: #9DA5AF; top: 8px; left: 16px; display: block; position: absolute; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.input-container input { border: 1px solid #9DA5AF; display: block; width: 100%; padding: 24px 0 12px; margin: 0; height: auto; text-indent: 16px; font-size: 14px; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; box-sizing: border-box; }
.input-container input:focus { border: 1px solid #569AF5; }
.input-container input:focus + label { color: #569AF5; }
.input-container input:disabled { color: #9DA5AF; }
.input-container input:disabled + label { color: #D2D6DA; }
.input-container .errormsg { background: #FD3B51; border: 1px solid #FD1933; color: #FFFFFF; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 14px; padding: 8px 0; text-align: center; }
.input-container .btn-blue { background: #569AF5; border: 1px solid #3687F3; font-size: 14px; font-weight: bold; color: #FFF; box-shadow: 0 -4px 0 0 #3687F3 inset; width: 100%; padding: 13px 0 15px; text-indent: 0; cursor: pointer; }
.input-container .btn-blue:disabled, .input-container .loading { background: #D2D6DA; border: 1px solid #BCC1C8 !important; color: #BCC1C8; pointer-events: none; box-shadow: none; }
.input-container .loading { text-indent: -99999px; }
.input-container .btn-clear { color: #569AF5; display: block; font-size: 14px; font-weight: normal; width: 100%; padding: 13px 0 15px; text-align: center; }

.loader-container { position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; }
.loader, .loader:before, .loader:after { border-radius: 50%; }
.loader:before, .loader:after { position: absolute; content: ''; }
.loader:before { width: 8px; height: 16px; background: #D2D6DA; border-radius: 16px 0 0 16px; top: 0px; left: 0px; -webkit-transform-origin: 8px 8px; transform-origin: 8px 8px; -webkit-animation: loading 1s infinite ease; animation: loading 1s infinite ease; }
.loader { color: #FFFFFF; font-size: 11px; text-indent: -99999px; margin: 1px auto; position: relative; width: 16px; height: 16px; box-shadow: inset 0 0 0 2px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
.loader:after { width: 8px; height: 16px; background: #D2D6DA; border-radius: 0 16px 16px 0; top: 0px; left: 8px; -webkit-transform-origin: 0px 8px; transform-origin: 0px 8px; -webkit-animation: loading 1s infinite ease 0.8s; animation: loading 1s infinite ease 0.8s; }
@-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }