/*-----------------------------------------------------------------------
  BODY
-----------------------------------------------------------------------*/

body {
  font-family: "Roboto", sans-serif;
  margin: 0px;
  overscroll-behavior-y: contain;
  width: 100%;
  height: 100%;
}

#error_view{ visibility: hidden; z-index: 30; }
#message_view{ visibility: hidden; z-index: 30; }
#confirm_view{ visibility: hidden; z-index: 30; }
#network_view{ visibility: hidden; z-index: 40; }

#alternatives_view{ visibility: hidden; }
#game_view{ visibility: hidden; }
#home_view{ visibility: hidden; }
#menu_view{ visibility: hidden; }
#login_view{ visibility: hidden; }
#register_view{ visibility: hidden;}
#profile_view{ visibility: hidden;}
#password_view{ visibility: hidden;}
#forgot_view{ visibility: hidden;}
#secret_view{ visibility: hidden;}
#cupom_view{ visibility: hidden;}
#wallet_view{ visibility: hidden;}
#cash_in_view{ visibility: hidden;}
#cash_out_view{ visibility: hidden;}
#terms_view{ visibility: hidden;}

/*-----------------------------------------------------------------------
  UI-FLEX
-----------------------------------------------------------------------*/

.ui-flex-col{
  display: flex;
  flex-direction: column;
}

.ui-flex-row{
  display: flex;
  flex-direction: row;
}

.ui-flex-wrap{
  flex-wrap: wrap;
}

.ui-flex-sb{
  justify-content: space-between;
}

.ui-flex-jc{
  justify-content: center;
}

.ui-flex-al-center{
  align-items: center;
}

/*-----------------------------------------------------------------------
  UI-ANIMATIONS
-----------------------------------------------------------------------*/

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ui-animation-spin{
  animation: spin 1s linear infinite;  
}

/*-----------------------------------------------------------------------
  UI-TOP
-----------------------------------------------------------------------*/

.ui-top{
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: black;
  text-align: center;
  z-index: 10;
}

/*-----------------------------------------------------------------------
  UI-BOTTOM
-----------------------------------------------------------------------*/

.ui-bottom{
  position: fixed;
  width: 100%;
  height: 40px;
  background-color: black;
  bottom: 0px ;
  z-index: 10;
}

/*-----------------------------------------------------------------------
  UI-FRAME
-----------------------------------------------------------------------*/

.ui-frame-view{
  position: fixed;
  width: 100%;
  height: 100%;
  border: 0px;
  z-index: 15;
}

/*-----------------------------------------------------------------------
  UI-VIEW
-----------------------------------------------------------------------*/

.ui-view {
  position: fixed;
  overflow: auto;
  width: 100%;
  top: 50px;
  bottom: 40px;
  z-index: 5;
  margin: auto;
}

.ui-view-full {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 15;
}

/*-----------------------------------------------------------------------
  UI-BUTTONs
-----------------------------------------------------------------------*/

.ui-button{
  display: block;
  text-align: center;
}

/*-----------------------------------------------------------------------
  UI-BOX
-----------------------------------------------------------------------*/

.ui-box {
  position: absolute;
}

.ui-box-left-top{
  position: absolute;
  left: 0px;
  top: 0px;
}

.ui-box-left-middle{
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.ui-box-left-bottom{
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.ui-box-center-top{
  position: absolute;
  top : 0px;
  left: 50%;
  transform: translateX(-50%);
}

.ui-box-center-middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.ui-box-center-bottom{
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.ui-box-right-top{
  position: absolute;
  right: 0px;
  top: 0px;
}

.ui-box-right-middle{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.ui-box-right-bottom{
  position: absolute;
  right: 0px;
  bottom: 0px;
}

/*-----------------------------------------------------------------------
  UI-TEXT-ALIGN
-----------------------------------------------------------------------*/

.ui-ta-left{
  text-align: left;
}

.ui-ta-right{
  text-align: right;
}

.ui-ta-center{
  text-align: center;
}

.ui-va-top{
  vertical-align: top;
}

.ui-va-bottom{
  vertical-align: bottom;
}

.ui-va-middle{
  vertical-align: middle;
}

/*-----------------------------------------------------------------------
  UI PADDING
-----------------------------------------------------------------------*/

.ui-pad-sm{
  padding: 5px;
}

.ui-pad-md{
  padding: 10px;
}

.ui-pad-lg{
  padding: 15px;
}

.ui-pad-xg{
  padding: 30px;
}

.ui-pad-left-sm{
  padding-left: 5px;
}

.ui-pad-left-md{
  padding-left: 10px;
}

.ui-pad-left-lg{
  padding-left: 15px;
}

.ui-pad-left-xg{
  padding-left: 30px;
}

.ui-pad-right-sm{
  padding-right: 5px;
}

.ui-pad-right-md{
  padding-right: 10px;
}

.ui-pad-right-lg{
  padding-right: 15px;
}

.ui-pad-right-xg{
  padding-right: 30px;
}

.ui-pad-top-sm{
  padding-top: 5px;
}

.ui-pad-top-md{
  padding-top: 10px;
}

.ui-pad-top-lg{
  padding-top: 15px;
}

.ui-pad-top-xg{
  padding-top: 30px;
}

.ui-pad-bottom-sm{
  padding-bottom: 5px;
}

.ui-pad-bottom-md{
  padding-bottom: 10px;
}

.ui-pad-bottom-lg{
  padding-bottom: 15px;
}

.ui-pad-bottom-xg{
  padding-bottom: 30px;
}

/*-----------------------------------------------------------------------
  UI MARGIN
-----------------------------------------------------------------------*/

.ui-margin-sm{
  margin: 5px;
}

.ui-margin-md{
  margin: 10px;
}

.ui-margin-lg{
  margin: 15px;
}

.ui-margin-xg{
  margin: 30px;
}

.ui-margin-left-sm{
  margin-left: 5px;
}

.ui-margin-left-md{
  margin-left: 10px;
}

.ui-margin-left-lg{
  margin-left: 15px;
}

.ui-margin-left-xg{
  margin-left: 30px;
}

.ui-margin-right-sm{
  margin-right: 5px;
}

.ui-margin-right-md{
  margin-right: 10px;
}

.ui-margin-right-lg{
  margin-right: 15px;
}

.ui-margin-right-xg{
  margin-right: 30px;
}

.ui-margin-top-sm{
  margin-top: 5px;
}

.ui-margin-top-md{
  margin-top: 10px;
}

.ui-margin-top-lg{
  margin-top: 15px;
}

.ui-margin-top-xg{
  margin-top: 30px;
}

.ui-margin-bottom-sm{
  margin-bottom: 5px;
}

.ui-margin-bottom-md{
  margin-bottom: 10px;
}

.ui-margin-bottom-lg{
  margin-bottom: 15px;
}

.ui-margin-bottom-xg{
  margin-bottom: 30px;
}

/*-----------------------------------------------------------------------
  UI ROUNDING
-----------------------------------------------------------------------*/

.ui-round-sm{
  border-radius: 5px;
}

.ui-round-md{
  border-radius: 10px;
}

.ui-round-lg{
  border-radius: 15px;
}

.ui-round-xg{
  border-radius: 30px;
}

.ui-round-top-sm{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.ui-round-top-md{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.ui-round-top-lg{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.ui-round-top-xg{
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/*-----------------------------------------------------------------------
  UI COLORS
-----------------------------------------------------------------------*/

.ui-bg-black{
  background-color: black;
}
.ui-fg-black{
  color: black;
}

.ui-bg-white{
  background-color: white;
}
.ui-fg-white{
  color: white;
}

.ui-bg-dark{
  background-color: #151515;
}

.ui-fg-dark{
  color: #151515;
}

.ui-bg-gray{
  background-color: #303030;
}

.ui-fg-gray{
  color: #303030;
}

.ui-bg-soft{
  background-color: #505050;
}

.ui-fg-soft{
  color: #505050;
}

.ui-fg-theme{
  color: #FF7F2A;  
}

.ui-bg-theme{
  background-color: #FF7F2A;  
}

.ui-bg-red{
  background-color: red;
}

.ui-fg-red{
  color: red;
}

.ui-op-25{
  opacity: 0.25;
}

.ui-op-50{
  opacity: 0.5;
}

.ui-op-100{
  opacity: 1.0;
}

/*-----------------------------------------------------------------------
  UI FONTS
-----------------------------------------------------------------------*/

.ui-fs-sm{
  font-size: small;
}

.ui-fs-md{
  font-size: medium;
}

.ui-fs-lg{
  font-size: large;
}

.ui-fs-xg{
  font-size: x-large;
}

.ui-fw-bold{
  font-weight: bold;
}

/*-----------------------------------------------------------------------
  UI-WIDTHS
-----------------------------------------------------------------------*/

.ui-w-100p{
  width: 100%;
}

.ui-w-75p{
  width: 75%;
}

.ui-w-50p{
  width: 50%;
}

.ui-w-25p{
  width: 25%;
}

/*-----------------------------------------------------------------------
  UI-HEIGHT
-----------------------------------------------------------------------*/

.ui-h-100p{
  height: 100%;
}

/*-----------------------------------------------------------------------
  UI-MISC
-----------------------------------------------------------------------*/

#cash_in_img_qrcode{
  width: 256px;
}

.ui-img-home{
  width: 300px;
}

.ui-eye{
  position: absolute;
  right: 20px;
  color: #303030;
  vertical-align: middle;
}

.ui-logo{
  height: 40px;
  top: 0px;
}

.ui-line{
  color: white;
}

.ui-text-dn{
  text-decoration: none;
}

.ui-nowrap{
  text-wrap: nowrap;
}

/*-----------------------------------------------------------------------
  QUERYS
-----------------------------------------------------------------------*/

@media ( orientation :landscape ){


}