input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.button-green {
  background: #d2ed2c;
  color: #12203d;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 13px 18px 11px 18px;
  font-size: 14px !important;
  border-radius: 0;
}
.button-white {
  background: #fff;
  color: #12203d;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 13px 18px 11px 18px;
  font-size: 14px !important;
  border-radius: 0;
}
.button-green:hover {
  background: #73006d;
  color: #ffffff;
}

.button-purple {
  background: #AD1A07;
  color: #fff;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 13px 18px 11px 18px;
  font-size: 14px !important;
  border-radius: 0;
}
.button-purple:hover {
  background: #d2ed2c;
  color: #12203d;
}
.disableClick{
    pointer-events: none;
    opacity: .3;
}
.notification {
  font-weight: bold;
  font-size: 18px;
  color: #73006d;
  display: none;
}
.notification.error {
  color: #ff0030;
}
.notification.visible {
  display: block;
}

.xs-row:before,.xs-row:after{
    display:table;
    content:" ";
}
.xs-row:after{clear:both;}
.m-10{margin:10px 0;}

body {
  background-color: #eaecee;
  color: #12203d;
  font-family: 'quattrocento_sansregular', sans-serif;
}
.header{
    background: #6f0b6f; 
    background: -moz-linear-gradient(left, #6f0b6f 0, #12213d 100%); 
    background: -webkit-linear-gradient(left, #6f0b6f 0,#12213d 100%); 
    background: linear-gradient(to right, #6f0b6f 0,#12213d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f0b6f', endColorstr='#12213d',GradientType=1 );
}
.header h1{margin:18px 0;}

a:hover {
  text-decoration: none;
}


.banner h2 {
  font-size:1.5em;

  border-bottom: 3px solid #d2ed2c;
  padding-bottom: 8px;
  text-transform: uppercase;
  margin-bottom: 1em;
  display:inline-block;
}
.banner{background:#fefefe;border-bottom:2px solid #e6e6e6;margin-bottom:1.5em;}
.banner form:before,.banner form:after{display:table;content:" ";}
.banner form:after {clear:both;}
.banner form {margin:0 -15px 0.5em;}
.banner form label{display:block;width:100%;padding:0 15px;text-transform:uppercase;font-size:1.25em;line-height: 2;}
.banner form .btn-group.bootstrap-select{width:50% !important;padding:0 15px;float:left;margin-bottom:0.85em;}
.banner form #login{width:100%;}
.users .col-xs-12{margin-bottom:1.25em;}


.user-info{margin:1.5em 0;text-align:center;}
.user-info .user-img{text-align:center;}
.user-info h2{font-size:1.1em;font-weight:bold;}
.user-info span{font-weight:bold;display:block;margin-right:0;}
.user-info span.value{font-weight:normal;display:inline-block;margin-bottom:0.85em;}
.user-info button {width:46.25%;margin-top:0;float:left;}
.user-info .button-white{margin-right:10px;}
.user-info .button-green{margin-left:10px;}
@media(min-width:620px){
    .users .col-xs-12{width:50%;}
    .user-info {text-align:left;}
    .user-info span{display:inline;margin-right:10px;}
    .user-info span.value{margin-right:15px;}
    .banner form .col-sm-4{float:left;}
    .user-info button {
        width: 46.5%;
    }
    .user-info .button-white{margin-right:15px;}
    .user-info .button-green{margin-left:15px;}
}
@media(min-width:728px){
    .banner form{float:none;}
    .banner form .col-sm-4{float:right;width:25%;}
    .user-info button {
        width: 30%;
    }
}
@media(min-width:960px){
    .banner h2 {font-size:2em;margin-bottom:0;}
    .users .col-xs-12{width:33.3333%;}
    .banner .title-wrapper{width:45%;margin-bottom:0;}
    .banner .m-10{width:55%;margin-top:2.5em;margin-bottom:0;}
    .banner form {margin:0 -15px;float:right;width:100%;}
    .banner form .btn-group.bootstrap-select {width:26.5% !important;padding:0 10px;}
    .banner form .col-sm-4{width:26%;}
    .banner form .col-sm-4 #login{padding:8px 10px 6px;}
    .banner form label { float: left;width:80px;padding-left:0;}
    .user-info button {margin-top:2em; width: 42%;position:static;}
}
@media(min-width:1024px){
    .banner h2 {font-size:2.5em;padding-bottom:0.65em;margin-top:0.85em;}
    .banner form .btn-group.bootstrap-select {width:28% !important}
    .user-info button{position:absolute;right:15px;}

    .user-info .button-white{right:48%;}
    .banner form.custome-form .btn-group.bootstrap-select{
      width: 100px !important; 
  }
}
@media(min-width:1280px){
    .banner form .btn-group.bootstrap-select {width:30% !important}
}

.banner form.custome-form{
  width: auto;
}

.contentbox {margin-top: 1em;margin-bottom: 1em;}

.menu {padding:0;background: #fafbfb;margin-bottom:0;}
.menu ul {display:table;width: 100%;table-layout: fixed;border-collapse: separate;}
.menu li {display: table-cell;float: none;width: 1%;border:1px solid transparent;}
.menu li:first-child {border-left: 1px solid transparent;}

.menu li.selected, .menu li:hover {border-bottom: 5px solid #000;background-color: #d2ed2c; color: #12203d;}
.menu li.selected span, .menu li:hover span {color: #12203d;}
.menu li a {display: block;position: relative;}
.menu li a:before{display:block;content:'';position:absolute;top:15%;right:-2px;height:60%;border-left:1px solid #e3e3e3;}
.menu li:last-child a:before,.menu li.selected a:before {border-left:1px solid transparent;}
.menu li a span {
  display: block;
  font-size: 0.85em;
  margin-top:1em;
  padding:2.8em 0 1em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color: #494949;
  background-position: center top;
  background-repeat: no-repeat;
  background-size:25px;
  
}

.menu .infos {background-image: url(../images/icon_user.svg);}
.menu .lobbies {background-image: url(../images/icon_lobbies.svg);}
.menu .cashier {background-image: url(../images/icon_cashier.svg);}
@media(min-width:960px) {
  .contentbox {margin-top: 30px;margin-bottom: 30px;}
    .menu li a span {font-size: 1.25em;background-size:30px;padding-top:2.2em;}
}

.content{background:#fff;padding:2em 15px;}
.table  thead {background: #12203d;text-transform: uppercase;color: #fff;font-size:0.9em;font-weight:bold;}
.table  tbody td {background: #f1f3f6;}
.table  td {border: 1px solid #fff; text-align: center;padding: 15px 0;}


@media(min-width:620px) {
    .content{background:#fff;padding:3em 4em;}
}
@media(min-width:960px) {
    .content{background:#fff;padding:4em 6.5em;}
}
.playerinfos table{width:100%;}
.playerinfos table td{border:1px solid #fff;text-align:center;background:#f1f3f6;padding:15px 0;}
.playerinfos table .label{color: #73006d;text-transform: uppercase;font-weight: bold;font-size:0.85em;}
.playerinfos table .value{font-size:1.2em;color: #7c8692; margin-bottom: 0;}
  

.icon img{width:30px;}
.icon h3{display:inline-block;vertical-align:middle;margin:0.65em;font-weight:bold;}

.wallet label {font-size: 1.25em;margin-right: 15px;text-align:left;}
.wallet input {border: none;padding: 10px;width:100%;}
.wallet input[type="text"] {margin-bottom:1em;background: #eaecee;text-align: right;}
.wallet input[type="submit"] {margin-bottom:2em;}
.wallet form{padding-bottom:1em;border-bottom:1px solid #e3e3e3;}
.wallet form:last-child{border-bottom:1px solid transparent;margin-top:2em;}
.wallet .input-wrapper{text-align:left;}
@media(min-width:620px){
    .wallet label{margin-right:10px;width:10%;}
    .wallet  input[type="text"] {width: 70%;max-width:400px;margin-right:15px;}
    .wallet input[type="submit"] {width: 90px;}
    .wallet .input-wrapper{text-align:center;}
    
    .icon img {width: 20px;}
    .icon h3{margin-left:0.25em;}
    .playerinfos table .label{font-size:1.25em;}
    .playerinfos table .value{font-size:1.5em;}
}
@media(min-width:960px) {
    .icon{margin-left:10%;}
    .icon img {width: 50px;}
    .icon h3{margin-left:0.8em;}
}


.bootbox .bootbox-close-button{display:none;}
.modal {text-align: center;padding: 0!important;}
.modal:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -4px; }
.modal-dialog {display: inline-block;text-align: left;vertical-align: middle;}
.modal-body{text-align:center;padding: 15px 15px 8px;}
.modal-content{border-radius:0;padding:1em;}
.modal-footer{border-top:1px solid transparent;text-align:center;}
.modal .button-green{padding: 0.5em 3.5em;font-size:1em;}
.modal-img{margin-bottom: 1.25em;}
.modal-img img {width:80px;}

@media(min-width:620px) {
    .modal-body {font-size:1.5em;}
    .modal-img img {width: 130px;}
    .modal-content {padding:2em;}
    .modal .button-green{font-size:1.5em;}
}
.wallet .container form .notification {
  margin-top: 40px;
}

.wallet .container form .notification.visible.success {
  display: block;
}

.wallet .container form .success {
  padding-left: 130px;
}
.errorpage .content {
  display: table;
  height: 290px;
  width: 100%;
}

.errorpage .content .notification {
  display: table-cell;
  vertical-align: middle;
  height: 25px;
  text-align: center;
  color: #464646;
  line-height: 80px;
  padding: 50px 0;
}

.errorpage .content .notification img {
  width: 75px;
  margin-bottom: -25px;
}

.errorpage .content .notification a {
  margin-top: 35px;
}

.form select {
  background: #fff;
  border: none;
  padding: 20px 0;
  width: 185px;
  margin-right: 24px;
  padding-left: 15px;
}
.form .bootstrap-select {
  margin-right: 24px;
  margin-top: -6px;
}

.form .bootstrap-select:first-child {
  margin-left: 15px !important;
}
.form .bootstrap-select .btn {
  width: 205px;
  background: #fff;
  border: none;
  border-radius: 0;
  background-color: #12203d;
  padding: 0;
}

.form .bootstrap-select .btn .filter-option.pull-left {
  background-color: #fff;
  width: 85%;
  padding: 6px 25px 6px 12px;
}
.form .bootstrap-select .btn .caret {
  color: #fff;
}
.form input[type="submit"] {
  border: none;
  width: 114px;
  padding: 6px 18px;
}



.users .grid {
  padding-bottom: 20px;
}
.users .grid-item {
  width: 33%;
  float: left;
  padding: 0 30px 10px 0;
  margin-bottom: 15px;
}


.users .row {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}

.users .col-xs-6.col-sm-3 {
  margin-bottom: 24px;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.users a {
  background-color: #fff;
  display: table;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
  color: #12203d;
  box-shadow: 0 0 1px #b7b8ba;
}


.users a:hover {
  background-color: #12203d;
  color: white;
}
.users a img, .users a p {
  display: table-cell;
  vertical-align: middle;
}
.users a img {
  height: 50px;
  width: 50px;
  border-radius: 30px;
  margin: 18px 20px;
}
.users a p {
  margin: 20px 0;
  width: 90%;
  padding-right: 0;
  padding-left: 70px;
  overflow: hidden;
}

.users a p span {
  font-weight: bold;
  word-break: break-all;
}

.playerinfos .container .deauthorize {
  position: absolute;
  right: 40px;
  top: 45px;
}

.playerinfos .table table .label {
  color: #73006d;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
}


.playerinfos .table table .value {
  font-size: 36px;
  color: #7c8692;
  margin-bottom: 0;
}


.playerinfos .table table td {
  background: #f1f3f6;
  border: 1px solid #fff;
  text-align: center;
  padding: 30px 0;
}


footer {
  background-color: #B7B7B7;
}
.lobbies .link_icon {
  width: 20px;
}
.lobbies .link_icon:hover g path {
  fill: #73006d;
}
body, html {
    height: 100%;
}
body #loginpage {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  background:#fff;
}

body #loginpage .content {
  width: 300px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
}


body #loginpage .content h1 {
  margin: 60px 0;
  text-align: center;
}

body #loginpage .content form {
  display: block;
  margin-bottom: 50px;
  padding: 0 10px;
}

body #loginpage .content form label, body #loginpage .content form input {
  display: block;
  margin-bottom: 20px;
  width: 100%;
}

body #loginpage .content form input[type="password"] {
  background: #eaecee;
  border: none;
  height: 40px;
  padding: 0 20px;
}
body #loginpage .content form label {
  font-size: 16px;
  color: #12203d;
}
@media only screen and (min-width: 480px) {
    body #loginpage {
        background:transparent;
      
    }
    body #loginpage .content {
        width: 360px;
        box-shadow: 0 0 1px #b7b8ba;
        top: 0;
        padding:0;
        height: 520px;
    }
    body #loginpage .content form {
        padding: 0 56px;
    }
}
@media only screen and (min-width: 767px) {
  body #loginpage .content form {
    margin-bottom: 0;
  }
  body #loginpage .content form .notification {
    width: 250px;
  }
}
.table>tbody>tr>td {
    vertical-align: middle
}

// -------------------------------------
// mock site game list page
// -------------------------------------
.gameFilter{
  text-align: right;
}
.gameFilter .col-sm-11, .gameFilter .col-sm-1{
  padding: 0;
  text-align: right;
}
.gameFilter .col-sm-1{
  margin-top: 10px;
}
.gameFilter .title{
  margin-right: 10px;
}
.gameListInfo img{
  width: 100%;
  border-radius: 5px;
}
.gameListInfo .list-title{
  margin-top: 5px;
  margin-bottom: 20px;
  color: #73006d;
}
.gameListInfo .list-title:hover{
  color: #12203d;
}
@media only screen and (min-width: 768px) {
  .selectRow{
    margin: 0;
  }
  .gameFilter{
    padding: 0 23px;
  }
  .gameFilter .btn-group{
    margin-right: 5px;
  }
  .gameFilter .col-sm-1{
    margin-top: 0;
  }
  .gameListInfo{
    float: none;
    display: inline-block;
    margin: 0 -2px;
  }
  .gameListInfo .list-title{
    font-size: 20px;
  }  
}
@media only screen and (min-width: 992px) {
  .selectRow{
    margin: 0 -15px;
  }
  .gameFilter{
    padding: 0 15px;
  }
  .gameListInfo .list-title{
    font-size: 24px;
  }    
}