html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body {
  font-size: 12.8px;
  font-family: "Nunito", arial, sans-serif;
  font-weight: 400;
  line-height: 1.28rem;
  background: #e9e9e9;
  color: #222222;
  min-height:100%;
}
a {text-decoration: none;color: #509abe;}
#ModelWrap {
  color: #fff;
  width:100%;
  height:100%;
  background:#509ABE url('../images/background.jpg') 50% 50% no-repeat fixed;
  background-size: cover;
}
#ModalThin { margin: 0 auto; padding: 100px 0 200px 0; text-align: center; max-width: 380px }
#ModalMid { margin: 0 auto; padding: 100px 0 200px 0; text-align: center; max-width: 500px; }
#ModalThin h1 { text-indent: -1000em; background: url('../images/logo.png') no-repeat 50% 50%; width: 100%; height:200px; background-size:200px; margin-bottom:30px;}
#ModalIntro {text-align:middle; padding: 30px 0;}

h2 {font-size: 16px; padding-bottom: 30px; font-weight: bold}
#ModalIntro img {width: 60%; display:block; margin: 0 auto;}
#ModalIntro img.smaller {width:45%}
#ModalIntro h2 {font-size:36px; font-weight: 700; line-height: 33px; padding:10px 0 20px 0; text-align:center;}
#ModalIntro h3 {font-size:1.8rem; font-weight: 700; line-height: 33px; padding:10px 0 50px 0}
#ModalIntro p {font-size:18px; text-align:center; padding-bottom:30px;}
#ModalThin .rrui__select__button {border:none}
#ModalThin .rrui__input button {box-shadow:none}
#ConfirmBox {border:solid 10px #fff; border-radius:100px; width:160px; height:160px; margin: 0 auto 20px auto;}

.ButtonModal { display: block; background:#fff; width: 100%; margin: 0 auto 15px auto; color: #509abe; padding: 12px 0; border-radius: 5px; font-weight: bold; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
.ButtonModalAlt {background: #509abe; color:#fff;}
.ButtonModal:hover {background: #a4e0fd;}
a.BackButton {float:left; color:#fff; font-size:18px; font-family: 'arial'; font-weight: bold; display: block;}
button, .Button { display: block; border:none; background:#509abe; width: 100%; text-align:center; margin: 0 auto 0 auto; color: #fff; padding: 12px 0; border-radius: 5px; font-weight: bold; box-shadow: 0 5px 5px rgba(0,0,0,0.1);}

#WelcomeHint { border-top: solid 3px #ffffff33;padding-top:20px; color: #fff; width:100%; margin: 80px auto 0 auto;}
#WelcomeHint a { color: #fff; font-weight: bold; display: block; margin-bottom: 20px;}
#WelcomeHint a:hover {color: #ffe2ae;}

#Header {width:100%;  background: #509abe;}
#HeaderWrap {max-width:970px; padding: 10px 2.5%; margin: 0 auto}
#HeaderLogo h1 {color:#fff; font-size: 28px; padding:10px 0 10px 0; font-weight: 700; letter-spacing: 0.05em; background:url('../images/logo-long.png') no-repeat 0 50%; background-size:180px; text-indent: -2000em}
#Auth {float:right; color:#fff;}
.languageTab {display:block; margin-right: 12px; color:#fff; float:left; padding-top: 9px; font-size:1.1rem; cursor:pointer}
.languageTab img {width:38px;}
.AuthProfile {color:#fff; font-size:16px; padding-top:5px;}
.AuthProfileImg {width:38px; height:38px; border-radius:19px; }
#Nav {background:#fff; box-shadow: 0 5px 5px rgba(0,0,0,0.05);}
#NavWrap {padding: 7px 2.5%; margin: 0 auto; text-align: left; max-width: 970px; width:95%}
#NavWrap li {display: inline-block; margin-right:30px; font-size: 15px; color:#509abe}
#NavWrap a {color:#777; display: block; padding: 3px 0;}
#NavWrap a:hover {color:#509abe;}
#NavWrap a.selected {color:#509abe;}
#NavWrap li.LogoutHeader {float:right; display:block; margin-right:0; padding-right:5px}
#NavWrap a.LogoutHeaderText {color: #ccc; cursor: pointer;}

#LangSwitch {width:100%;}
#LangSwitchWrap {max-width:970px; padding: 0 2.5%; margin: 0 auto}
#LangSwitch .languageTab {float:right}

#BodyWrap {max-width:970px; padding: 20px 10px; margin: 0 auto}

#BalanceBox {padding: 32px 2%; border-radius:5px; background:#fff; box-shadow: 0 5px 5px rgba(0,0,0,0.1); width:59.333%; float:left; margin-bottom: 30px;}
#BalanceBox strong {color:#222; font-size:20px; display:block; padding-bottom:30px}
#BalanceBox em {color:#222; font-size:68px; display:block; padding-bottom:18px}
#BalanceBox span {font-size: 20px; padding-right:20px; padding-top:10px;color:#509abe; display: inline-block;}
#ActionBox {width:32.333%; float:right;}
#ActionBox a {margin-bottom: 30px; padding: 20px 0}

#CampaignBox {width:32.333%; float:right; box-sizing: border-box; padding: 28px 2% 10px 2%; border-radius:5px; background:#fff; box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
#CampaignBox li {display: block; margin-bottom: 20px;}
#CampaignBox strong {display: block; font-size: 20px; margin-bottom: 7px; color:#222}
#CampaignBox span {font-size:16px; color:#509abe;}
#CampaignBox em {float:right; display: block; font-size:16px; color:#2dcb7f}

#CampaignBoxFull {padding: 15px 50px }
#CampaignBoxFull li {display: block; margin-bottom: 20px; border-bottom: solid 1px #999}
#CampaignBoxFull strong {display: block; font-size: 20px; margin-bottom: 7px; color:#222}
#CampaignBoxFull span {font-size:16px; color:#509abe;}
#CampaignBoxFull em {float:right; display: block; font-size:16px; color:#2dcb7f}

.CampaignStatusLabel {text-align: center; padding: 10px; background: #ccc; font-size:18px; margin: 10px 0}
.CampaignStatusLabelACTIVE, .CampaignStatusLabelOPEN {background: #2dcb7f;}
.CampaignItem {clear:both; padding: 20px 0 0 0; font-size: 18px;}
.CampaignItem label {width: 150px; text-align: right; padding-right:20px; display: inline-block; font-weight: bold;}
.CampaignAccount {text-align: center; padding: 20px;font-size: 18px;}
.CampaignAccount label {font-weight: bold; margin-bottom: 10px;}
.CampaignAccount svg#MyQRCode {margin:10px auto}
.CampaignAccount .accountkey {padding: 0 10px; max-width: 600px; word-wrap: break-word; color:#509abe;}
.CampaignItem input {border:none; background: #f0f0f0; padding: 10px 5px; width: 200px; border-radius:5px; font-size: 18px; text-align:right; border:solid 1px #999; text-align: left}
.CampaignItem button.buttonNorm {margin-left:170px !important; margin-top:20px;}

#BodyWrap h2 {color:#222; font-size:20px; display:block; padding:30px 0 10px 0; font-weight:700}

#Accounts li {float:left; display:block; width: 30%; background:#fff; border-radius:5px; margin-bottom:20px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); margin-right: 3.333%;}
#Accounts a {display:block; padding: 50px 20px;}
#Accounts em {font-weight:700; font-size:38px; display: block; padding-bottom:10px; color:#222}
#Accounts strong {color:#999; font-weight:700; }

#Transactions {padding-top:50px; max-width: 610px; min-height: 500px;}
#Transactions li {padding: 20px 0 10px 0; border-bottom: solid 2px #ccc;  }
#Transactions strong {font-weight:700; font-size:18px; display:block; }
#Transactions em {float:right; font-weight:700; font-size:25px; display: block; padding-top:8px; color:#2dcb7f;}
#Transactions span {color:#999; font-weight:400; text-transform: uppercase; display:block;}

#Events {clear:both; }
#Events li {padding: 20px 20px 10px 20px; border-bottom: solid 2px #ccc;  }
#Events strong {font-weight:700; font-size:18px; display:block; }
#Events em {float:right; font-weight:700; font-size:18px; display: block; padding-top:8px; color:#2dcb7f;}
#Events span {color:#999; font-weight:400; text-transform: uppercase; display:block;}

#MassBox {max-width: 500px; margin: 30px auto 0 auto;}
#FormBox {padding: 5px 0 20px 0; border-radius:5px; background:#fff; box-shadow: 0 5px 5px rgba(0,0,0,0.1); width:100%}
#FormBoxTabs {margin-bottom: 15px}
#FormBoxTabs a {width:33.333%; text-align:center; letter-spacing:0.05rem; color:#999; padding: 10px 0; display: inline-block; font-weight:700; border-bottom: solid 1px #ccc; cursor:pointer}
#FormBoxTabs a.selected {color:#2dcb7f; border-bottom: solid 1px #2dcb7f;}
.FormBoxLine {clear:both; padding:10px 10px}
.FormBoxLine strong {font-size:18px; color:#999; font-weight:700; padding-left:5%;display:inline-block; width:40%}
.FormBoxLine span {display:inline-block; width:50%; text-align:right; color:#222;font-size:18px; font-weight:700;}
.FormBoxLine input {border:none; background: #ccc; padding: 10px 5px; width: 50%; border-radius:5px; font-size: 18px; text-align:right;}
.FormBoxLineRight {display:inline-block; width:50%; text-align:right; padding-bottom: 5px;}

.DetailItem {padding: 20px 0; border-bottom: solid 2px #ccc}
.DetailItem label {font-weight:bold; display: block; color:#aaa}
.DetailItem span {font-size: 18px;}
.DetailItem span.detail {font-size: 12.8px;}
.DetailMid p {margin-bottom:15px; color:#777; font-size:15px;}

.rego-space {padding-top:8px; display: block}
.rego-space a {color:#fff; text-decoration: underline}

hr.Rule {clear:both; border:none; border-bottom: solid 1px #999; height:1px; margin-top:20px;}

#ButtonBox {clear:both; padding-top:20px; }
#ButtonBox button {width:50%; background:#509abe; color:#fff;margin-left: 50%; padding: 15px 0}
#ButtonBox button {width:50%; background:#509abe; color:#fff;margin-left: 50%; padding: 15px 0}
#ButtonBox button.buttonlite {float:left; margin-left:0; width: 45%; background:#fff; color:#509abe; margin-right:5%}
#ButtonWrap button.buttonlite {float:left; margin-left:0; width: 45%; padding-top:15px; padding-bottom:15px; background:#fff; color:#509abe; margin-right:5%}

#BonusBox {text-align:right; padding-top:18px; font-size:0.9rem; color:#999}

#SettingsNav {width:30%; float:left;}
#SettingsNav h2 {color:#509abe; padding-bottom: 15px}
#SettingsNav li {border-bottom: solid 2px #aaa; padding: 15px 0; display: block}
#SettingsNav li a {width:100%; display:block; color: #222; font-size: 16px; font-weight: 700;}

#SettingsWrap {padding: 0 50px 50px 50px; font-size: 1rem;}

#MyQRCode {width: 280px;height: 280px; margin: 0 0 30px 0;display: block;}
.AddressCode {color:#509abe; padding-top: 15px; font-size: 1rem; display: block;}
.AddressCode em {color: #222; display: block;}
.AddressCode strong { /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;}

#SettingsBox {width:65%; float:right; padding: 5px 0 20px 0; margin-top:25px; border-radius:5px; background:#fff; box-shadow: 0 5px 5px rgba(0,0,0,0.1);}
#SettingsBox h2 {padding: 20px 50px }
#SettingsBox .form-group {padding: 0 50px; border-bottom: none;}
#SettingsBox .form-group input[type=text], #SettingsBox .form-group input[type=password], #SettingsBox .form-group input[type=email]
  {color:#222; border-bottom:solid 2px #ccc; padding: 5px 0 8px 0}
#SettingsBox .form-group input[type=text]::placeholder, #SettingsBox .form-group input[type=email]::placeholder
  {color: #ccc; opacity: 1;}
#SettingsBox button.buttonNorm {width:45%; background:#509abe; color:#fff;margin-left: 50px; padding: 15px 0; margin-bottom: 50px;}
#SettingsBox p {padding: 15px 50px; font-size: 1rem;}

#DetailPane .form-group input[type=text], #DetailPane .form-group input[type=email] {color:#222; border-bottom:solid 2px #ccc; padding: 5px 0 8px 0}
#DetailPane .form-group input[type=text]::placeholder, #DetailPane .form-group input[type=email]::placeholder {color: #ccc; opacity: 1;}
#DetailPane button.buttonNorm {width:45%; background:#509abe; color:#fff; padding: 15px 0; margin-left: 0;}

#Waiting {text-align: center; padding:100px 50px; font-size:18px; background:#fff; }
.Instructions {padding-left:50px; padding-bottom:15px;}

#phoneBox button {border-radius:0; box-shadow:none; border:none;}
#phoneBox input {border-bottom:solid 2px #ccc; font-size:18px;}

#LogoutBox {margin-top:20px;}

#ContentBox .form-group {padding: 0 0; border-bottom: none;}
#ContentBox .form-group input[type=text], #SettingsBox .form-group input[type=password], #SettingsBox .form-group input[type=email]
  {color:#222; border-bottom:solid 2px #ccc; padding: 5px 0 8px 0}
#ContentBox .form-group input[type=text]::placeholder, #SettingsBox .form-group input[type=email]::placeholder
  {color: #ccc; opacity: 1;}
#ContentBox button {width:45%; background:#509abe; color:#fff;margin-left: 50px; padding: 15px 0; margin-bottom: 50px;}

.form-group label {font-size:13px; text-transform: uppercase; display: block; letter-spacing: 0.1em;}
.form-group input[type=text], .form-group input[type=password], .form-group input[type=email], .form-group input[type=tel] {background:none; border:none; color:#fff; font-size:18px; padding: 10px 0; outline:none; width:100%}
.form-group input[type=text]::placeholder, .form-group input[type=email]::placeholder { color: #ffffff55; opacity: 1;}
.form-group input.centerBig {font-size:1.8rem; text-align: center;}
.form-group .Dropdown-control {background:transparent; border:none; color:#fff; font-size:18px; padding: 10px 0;}
.form-group {border-bottom: solid 2px #fff; margin-bottom: 20px; text-align:left;}
.form-group-clean {border:none;}
.form {padding-bottom:20px;}
.form-group .react-phone-number-input input {color:#fff; font-size:18px;}
#UpdateForm .form-group .react-phone-number-input input {color:#111; font-size:18px;}

#ContentBox {background:#fff; border-radius:5px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); padding: 10px 5%}

#DetailPane {background:#fff; border-radius:5px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); padding: 10px 5% 50px 5%; margin: 30px auto 0 auto; max-width: 500px;}
#DetailPane h2 {padding: 20px 0 10px 0; font-size:18px;}

#AvatarOriginal {padding-left:50px; width:80%}

.form .react-phone-number-input__icon {width:2.24em; height:1.9em; border:none}
.form .rrui__select__options {color:#222}
.form .rrui__input-field, .form .rrui__select__button {border:none; background:none}
.form .rrui__input-field::placeholder {color:#ccc; opacity:1}
#Footer {padding: 50px 0; margin:50px 0 0 0; background:#509abe}
#Footer.FooterModal {margin-top:0 !important; background:#e9e9e9 !important; color:#333 !important}
.FooterModal #FooterBottomLinks a {color:#509abe}
.FooterModal #FooterWrap h3 {color:#333; background:none;padding-right:0; text-align:right}
.FooterModal #FooterBottom {color:#333}
#FooterWrap {margin:0 auto; max-width:970px; padding: 0 10px 100px 0; color:#fff;}
#FooterWrap h3 {font-size:18px; font-weight: 400; background:url('../images/logo-foot.png') no-repeat 100% 0; background-size:60px; padding: 5px 75px 50px 100px; text-indent: -2000em;}
#FooterWrap h3 em {padding-top:17px; padding-left:10px; float:right}
#FooterExternal {float:right;}
#FooterExternal a {display: block; float:left; margin-left:15px;}
#FooterExternal a img {display:block; height: 45px; }
#FooterBottom {color:#ccc}
#FooterBottomLinks {display: block; margin-bottom:10px; color:#fff; padding-top:50px;}
#FooterBottomLinks a {margin-right:15px; color:#fff;}
.FooterModal {background: #e9e9e9}
.FooterNormal {background: #fff}
.pagination {float:left; padding-top: 10px;}
.pagination li {float:left; display:inline-block; padding-right:7px;}
.pagination li a {display: block; background: #ccc; color:#fff; text-align:center; width: 25px; }
hr {clear:both; width:100%; border:none;}
#FooterLogout {clear:both; padding-top:30px; display: none;}
.Paneliner {clear:both; padding-bottom: 18px; font-size:1rem; width:100%}
.Paneliner strong {display: block; padding-bottom: 5px; font-weight:bold; color:#999}
.Paneliner em {color:#509abe}
.Paneliner input { border:none; font-size:18px; outline:none; width:100%; color: #222;border-bottom: solid 2px #ccc; padding: 5px 0 8px 0}

@media screen and (max-width:800px) {
  #Accounts li {margin-right:5%; width: 47.5%;}
  #Accounts li:nth-child(2) {margin-right:0}
  #Accounts li:last-child {margin-right:0}
}

@media screen and (max-width:600px) {
  #SettingsNav {width: 100%; float:none; margin-bottom: 15px;}
  #SettingsNav li {display:inline-block; padding-right: 20px;}
  #SettingsBox {width:100%}
  .form-group input.centerBig {font-size:1.5rem;}
  button, .Button {font-size:15px;}
  #BalanceBox {width:90%; float:none; padding-left:5%; padding-right:5%}
  #ActionBox {width:100%; float:none; margin-bottom: 0}
  #ActionBox .Button {width:47.5%; display:inline-block; margin-right:5%; margin-top:15px;}
  #ActionBox .Button:last-child {margin-right:0}
  #ActionBox .ButtonLong {width:100%; margin:0; margin-bottom:10px;}
  #BalanceBox em {font-size:50px}
  #LogoutBox {display:none}
  #FooterLogout {display:block}
  #FooterExternal {float:none}
  #FooterExternal h3 { background-position: 160px 0; padding-left: 20px; padding-bottom:20px;}
  #FooterBottom {padding-left:20px;}
  #FooterLogout {margin-left:15px}
}

@media screen and (max-width:500px) {
  #FooterWrap h3 {float:none; padding-bottom:30px}
  #Accounts li {float:none; width: 100%; margin-right:0}
  #DetailPane {margin-left: 3%; margin-right:3%; overflow:hidden}
  #ModalThin {padding: 30px 10px 100px 10px}
  #ButtonBox button {width:100%; margin-left:0}
  #ButtonBox button.buttonlite {width:100%; margin-left:0; margin-bottom:12px}
  #BonusBox {text-align:center}
  #MassBox {margin-top:0}
  #SettingsNav h2 {display:none;}
  #SettingsNav li {padding: 8px 15px 8px 0}
  #SettingsNav li a {font-size:12px;}
  #SettingsWrap {padding: 0 20px; overflow: hidden}
  #SettingsBox h2 {padding: 10px 20px;}
  #AvatarOriginal {padding-left:20px;}
  #SettingsBox .form-group {padding-left:20px;}
  #SettingsBox button.buttonNorm {width:90%; margin: 0 5%}
  .Instructions {padding-left:20px;}
}

#modal {position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2); z-index: 99;}
#modal-message {background:#FFFBF8; border-radius: 25px; margin: 5% auto; width:80%; max-width: 600px; padding: 3%; padding-top:80px; box-sizing: border-box; text-align: center;}
#modal-message h1 {font-size: 25px; font-weight: bold; padding-bottom: 10px}
#modal-message input[type=text] {text-align: center; font-size: 2rem;}
#modal-message input[type=text]::placeholder {color:#ccc; font-weight: 300}
#modal-message strong {font-size: 1.2rem; line-height: 1.7rem;}
#modal-message strong b {font-weight: 700}
#modal-message .icon {font-size:5rem; color: #C33; display: block; padding:10px 0 30px 0;}
.ReactModal__Overlay {z-index: 99;}
.modal {top:40%; left:50%; right:'auto';bottom:'auto'; width:100%; height:100%; background: rgba(0,0,0,0.2);margin-left:'50%';text-align: center; vertical-align: middle; padding-top:10% }
.modal .form button {clear:both; display:block; margin: 20px auto 0 auto; padding-top:15px;padding-bottom:15px; width:60%; border-radius: 20px;}