@font-face {
    font-family: DaxlinePro;
    src: url(DaxlinePro-Black.ttf);
}

@font-face {
    font-family: LibreFranklin;
    src: url(LibreFranklin-Regular.ttf);
}

@font-face {
    font-family: MyriadPro;
    src: url(MyriadPro.ttf);
}

@font-face {
    font-family: TitanOne;
    src: url(TitanOne-Regular.ttf);
}

.app {
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}
input {
    -webkit-appearance: none;
}

button {
	cursor:pointer;
}

input:active {
outline: none;
border: none;
}

input:focus {outline:0;}

textarea:active {
outline: none;
border: none;
}

textarea:focus {outline:0;}


.checkBox {
    border: solid 1px black;
    width: 14px;
    height: 14px;
	vertical-align:bottom;
	-webkit-appearance: checkbox;
	}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:black;
    font-size:12px;
    /*height:100vh;*/
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    /*padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);*/
    width:100%;
	color:white;
	font-family: DaxlinePro;
}

/* Portrait layout (default) */
.app {
    position:absolute;             /* position in the center of the screen */
    left:0px;
    top:0px;
    /*height:100%;*/                   /* text area height */
    width:100%;                   /* text area width */
    text-align:center;
}

.page {
	color:black;
	box-sizing: border-box;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
	margin:0 auto;
}

.pageContainer {
	position:absolute;
	width:100%;
}

.inputField {
	font-family: DaxlinePro;
	height:50px;
	width:80%;
	margin: 0 auto;
	display:block;
	border-radius:25px;
	border:none;
	padding:0 10px;
	font-size:16px;
}

.neutralLink {
	text-decoration:none;
	color:inherit;
	font-weight:bold;
}

.disabled {
	opacity:0.5;
}

.radioButton {
	width:20px;
	height:20px;
	appearance:auto;
	vertical-align:bottom;
	-webkit-appearance: none;
	-webkit-border-radius: none;
	border:solid 1px black;
}

input[type=radio] {
    background-color: white;
	border:solid 1px black;
	border-radius: 10px;
}

input[type=radio]:checked {
    background-color: #e85858;
}

input[type=checkbox] {
    background-color: white;
	border:solid 1px black;
	border-radius: 10px;
	vertical-align:top;
}

input[type=checkbox]:checked {
    background-color: #211e60;
}

button {
	-webkit-appearance: none;
	-webkit-border-radius: none;
	background-color:#e85858;
	width:220px;
	height:35px;
	border-radius:20px;
	color:white;
	border:none;
	font-weight:bold;
	outline:none;
	font-family: DaxlinePro;
	font-size:16px;
}

textarea {
	border-radius: 10px;
	width:90%;
	font-family: DaxlinePro;
	font-size:16px;
	height:100px;
	margin:0 auto;
	border:none;
	resize:none;
}

.fullWidth {
	width:100%;
}

/*** MENU ***/ 

#menu {
	position:absolute;
	background-color:rgba(0,0,0,0.8);
	top:0px;
	right:0px;
	width:100%;
	height:100%;
	z-index:20;
}

.menuInner {
	position:absolute;
	background-color:#eba600;
	top:0px;
	right:0px;
	width:80%;
	max-width:400px;
	height:100%;	
}

.menuClose {
	box-sizing:border-box;
	padding-top:20px;
	padding-left:20px;
}

.menuNonRegistered {
	height:120px;
	box-sizing:border-box;
	padding-top:40px;
	padding-left:40px;
	font-weight:bold;
	color:black; 
	font-size:16px;
	font-family:MyriadPro;
}

.menuLogged {
	display:none;
	height:120px;
	box-sizing:border-box;
	padding-top:40px;
	padding-left:40px;
	font-weight:bold;
	color:white; 
	font-size:18px;
	line-height:22px;
	font-family:MyriadPro;
	background-color:#7a8ab8;
}

.menuLogged span{
	font-size:14px;
	color:black;
}

.menuItem {
	background-color:#ffc000;
	height:40px;
	box-sizing:border-box;
	padding-top:10px;
	padding-left:40px;
	border-bottom:solid 1px #fedb71;
	font-size:16px;
	font-family:MyriadPro;
}

#menuLogout {
	display:none;
}

/*** POPUP ***/

#popup {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:rgba(0,0,0,0.8);
	display:none;
	z-index:100;
}

#popupOuter {
	display:table;
	width:100%;
	height:100%;
}

#popupInner {
	display:table-cell;
	vertical-align:middle;
	background-image:url(../img/popup.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

#popupText {
	text-align:center;
	font-family:MyriadPro;
	font-size:25px;
	line-height:35px;
	max-width:90%;
	margin:0 auto;
}

/*** POPUP ***/

#winanim {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:none;
	z-index:100;
	text-align:center;
}

#winanimInner {
	position:absolute;
	display:inline-block;
}

#winanimCoins {
	position:absolute;
	top:0px;
}

#winanimCoins img {
	width:100%;
}

#winanimText {
	position:absolute;
	top:0px;
}

#winanimText img {
	width:100%;
}

#winanimBottom {
	position:absolute;
	top:0px;
	background-image:url(../img/win_anim_popup.png);
	background-size:contain;
	width:100%;
	display:table;
}

#winanimPopup {
	display:table-cell;
	color:white;
	text-align:center;
	vertical-align:middle;
	font-family:TitanOne;
	font-size:25px;
	line-height:30px;
}

/*** CREDIT ***/ 

.bar_credit {
	width:100%;
	height:54px;
	background-color:#db4219;
	color:white;
	display:table;
	font-family:MyriadPro;
	font-size:20px;
}

.bar_credit_left {
	display:table-cell;
	text-align:right;
	vertical-align:middle;
	width:30%;
}

.bar_credit_left img {
	width:20px;
}

.bar_credit_center {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	font-weight:bold;
	width:40%;
}

.bar_credit_right {
	display:table-cell;
	text-align:left;	
	vertical-align:middle;
	width:30%;
}

.bar_credit_right img {
	width:20px;
}

/*** HOME ***/

#page_home {
	display:none;
	background-color:#0e0c3a;
}

.home_top {
	background-color:#0e0c3a;
	width:100%;
	height:118px;
	display:table;
}

.home_top_left {
	display:table-cell;
	width:25%;
	text-align:left;
	vertical-align:top;
	padding-top:55px;
	padding-left:20px;
	box-sizing:border-box;
}

.home_top_left img {
	width:20px;
}

.home_top_center {
	display:table-cell;
	width:50%;
	text-align:center;
	vertical-align:middle;
	padding-top:5px;
}

.home_top_center img {
	width:100%;
	max-width:400px;
}

.home_top_right {
	display:table-cell;
	width:25%;
	text-align:right;
	vertical-align:top;
	padding-right:10px;
	padding-top:35px;
	box-sizing:border-box;
}

.home_top_right img {
	width:50px;
}

.home_mid_top {
	background-color:#211e60;
	width:100%;
	height:140px;
	text-align:center;
	display:table;
}

.home_mid_top_inner {
	display:table-cell;
	height:140px;
	vertical-align:middle;
}

.home_mid_top button {
	width:290px;
	height:53px;
	background-color:white;
	color:#0e0c3a;
	border-radius:30px;
	font-size:24px;
	padding-top:5px;
}

.home_mid_top_info {
	margin-top:20px;
	color:white;
	font-size:20px;
	line-height:24px;
}

.home_mid_top_info span {
	color:#26a0d6;
}

#home_balance {
	color:#26a0d6;
}

.home_center {
	background-color:#0e0c3a;
	width:100%;
	text-align:center;
	padding:20px 0;
}

.home_center_cell {
	display:inline-block;
	text-align:center;
	vertical-align:middle;
}	

.home_center_cell img {
	width:50%;
	cursor:pointer;
}

.home_bottom {
	background-color:#211e60;
	color:white;
	width:100%;
	height:100px;
	font-size:23px;
	line-height:25px;
	text-align:center;
	box-sizing:border-box;
	display:table;
}

.home_bottom_inner {
	display:table-cell;
	vertical-align:middle;
}

.home_bottom span {
	color:#26a0d6;
}

#home_account {
	font-size:25px;
	color:white;
}

/*** REGISTER ***/

#page_register {
	display:none;
	background-color:white;
}

.register_top {
	display:table;
	width:100%;
}

.register_top_inner {
	height:75px;
	background-color:#211e60;
	font-size:20px;
	font-family: DaxlinePro;
	font-weight:bold;
	color:white;
	text-align:center;
	line-height:22px;
	vertical-align:middle;
	display:table-cell;
	width:100%;
}

.register_top span {
	color:#27aae1;
}

.register_center {
	background-color:#e6e6e6;
	height:100px;
	line-height:25px;
	font-size:20px;
	color:#0e0c3a;
	overflow-y:scroll;
}

.register_password_lost {
	font-size:18px;
	color:#3d3d3d;
	font-family:MyriadPro;
	padding:5px 0px;
	text-decoration:underline;
}

.register_bottom {
	background-color:#211e60;
	height:100px;
}

.register_center {
	text-align:center;
}

.play_button {
	background-color:#0e0c3a;
	color:white;
	font-size:20px;
	height:45px;
	font-family: DaxlinePro;
	font-weight:bold;
	text-transform:uppercase;
	border-radius:30px;
	width:300px;
	padding-top:2px;
}


.register_google_button {
	background-color:#27aae1;
	color:white;
	font-size:25px;
	font-family: DaxlinePro;
	font-weight:bold;
	text-transform:uppercase;
	border-radius:30px;
	width:310px;
	padding-top:2px;
	border:solid 6px white;
	height:50px;
}

.register_button {
	background-color:#0e0c3a;
	color:white;
	font-size:22px;
	font-family: DaxlinePro;
	font-weight:bold;
	text-transform:uppercase;
	height:40px;
	border-radius:30px;
	width:170px;
	padding-top:2px;
}

.register_field input {
	max-width:300px;
	width:326px;
	height:35px;
	border:solid 1px #bababa;
	text-align:center;
	font-family:MyriadPro;
	font-size:18px;
}

.register_field {
	margin-bottom:5px;
}

#register_error {
	color:red;
	padding-top:5px;
}

.register_data {
	color:#27aae1;
}

.register_checkbox {
	width:280px;
	margin:0 auto;
	background-color:#c7c6c6;
	height:19px;
	display:table;
}

.checkbox_item {
	display:table-cell;
	vertical-align:middle;
	width:10%;
	padding-top:3px;
}

.checkbox_label {
	display:table-cell;
	vertical-align:middle;
	font-family:MyriadPro;
	font-size:12px;
	color:black;
	width:90%;
}

/*
.privacy_field input {
	max-width:300px;
	width:20px;
	height:20px;
	border:solid 1px #bababa;
	text-align:center;
	font-family:MyriadPro;
	font-size:14px;
}

.privacy_field {
	margin-bottom:5px;
	font-size:14px;
}
*/

/*** LOGIN ***/

#page_login {
	display:none;
	background-color:white;
}

.login_center {
	background-color:#e6e6e6;
	height:100px;
	line-height:25px;
	font-size:20px;
	color:#0e0c3a;
	overflow-y:scroll;
	text-align:center;
}

#login_error {
	color:red;
	padding-top:5px;
}

#passwordRecovery_block {
	display:none;
}

#passwordRecovery_block2 {
	display:none;
}

#passwordRecovery_error {
	color:red;
	padding-top:5px;
}

#passwordRecovery_error2 {
	color:red;
	padding-top:5px;
}

/*** RULES ***/
#page_rules {
	display:none;
	background-color:white;
}

/*** ABOUT US ***/

#page_aboutus {
	display:none;
	background-color:white;
}

.generic_center {
	font-family:MyriadPro;
	font-size:16px;
	line-height:20px;
	padding:10px 20px;
	box-sizing:border-box;
	text-align:justify;
}

/*** PRIVACY ***/

#page_privacy {
	display:none;
	background-color:white;
}


/*** 11 E LOTTO ***/

#page_11_e_lotto {
	display:none;
	background-image:linear-gradient(to right, #f25b29, #fd8100);
}

.game_top {
	width:100%;
	height:118px;
	display:table;
}

.game_top_left {
	display:table-cell;
	width:25%;
	text-align:left;
	vertical-align:middle;
	padding-left:20px;
	box-sizing:border-box;
}

.game_top_left img {
	width:20px;
}


.game_top_center {
	display:table-cell;
	width:50%;
	text-align:center;
	vertical-align:middle;
}

.game_top_center img {
}

.game_top_right {
	display:table-cell;
	width:25%;
	text-align:right;
	vertical-align:middle;
	padding-right:10px;
	box-sizing:border-box;
}

.game_top_right img {
	width:50px;
}

.game_11_e_lotto_top {
	background-color:#db4219;
	width:100%;
	height:136px;
	color:white;
	font-size:20px;
	font-family:MyriadPro;
	text-align:center;
	box-sizing:border-box;
}

.game_11_e_lotto_top_button {
	text-align:center;
}

.game_11_e_lotto_top_button img {
	padding:10px 0;
	width:210px;
}

.game_11_e_lotto_center {
	padding:10px 0px;
	text-align:center;
	height:100px;
}

.game_11_e_lotto_number {
	width:32px;
	height:32px;
	display:inline-block;
	text-align:center;
	border-radius:25px;
	font-size:20px;
	line-height:20px;
	background-color:#db4219;
	font-family:MyriadPro;
	font-weight:bold;
	padding-top:4px;
	box-sizing:border-box;
	color:white;
	margin:0px 0px 4px 0px;
	border:solid 4px transparent;
}

.game_11_e_lotto_number_selected {
	background-color:#0e0c3a;
	color:white;
}

.game_11_e_lotto_number_extracted {
	background-color:#ffff00;
	color:#0e0c3a;
}

.game_11_e_lotto_number_matched {
	background-color:#66ff00;
	color:#0e0c3a;
	border:solid 4px #66ff00;
}

.game_11_e_lotto_credit {
	background-color:#db4219;
	color:white;
}

.gameBottomHeight {
	height:100px;
	background-color:#0e0c3a;
	display:table;
	width:100%;
}

.gameBottomCell {
	display:table-cell;
	width:33%;
	color:white;
	vertical-align:middle;
	text-align:center;
}

.gameBottomCell img {
	width:95%;
	max-width:200px;
}


#game_11_e_lotto_top_info {
	padding-top:5px;
}


#game_11_e_lotto_top_step2 {
	width:100%;
	height:100%;
	display:none;
}

#game_11_e_lotto_top_step2_inner {
	background-color:#fbd0bd;
	background-image:url("../img/11elotto_step2.png");
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100%;
	display:table;
}

#game_11_e_lotto_top_step2_num {
	display:table-cell;
	vertical-align:middle;
	font-size:10px;
	font-family:MyriadPro;
	color:black;
	text-align:center;
	padding-top:15px;
	font-weight:bold;
}

#game_11_e_lotto_top_step3 {
	width:100%;
	height:100%;
	display:none;
}

#game_11_e_lotto_top_step3_inner {
	background-color:#db4219;
	width:100%;
	height:100%;
	display:table;
}

.game_11_e_lotto_top_step3_cell {
	display:table-cell;
	vertical-align:middle;
	color:white;
}

.game_11_e_lotto_top_step3_cell button {
	margin:10px 0;
	width:258px;
	height:40px;
	background-color:white;
	color:black;
	border-radius:20px;
	font-size:24px;
	padding-top:5px;
}

.game_11_e_lotto_top_step3_info {
	color:white;
	font-weight:bold;
}

/*** Il forziere ***/

#page_forziere {
	display:none;
	background-image:linear-gradient(to right, #5f1096, #7d17c6);
}

.forziere_top {
	height:79px;
	background-color:#4d0c7a;
	color:white;
	box-sizing:border-box;
	padding-top:25px;
	font-size:22px;
	font-weight:bold;
	font-family:MyriadPro;
	text-align:center;
}

.forziere_box {
	text-align:center;
	padding:20px 0px;
	height:100px;
	overflow-y:hidden;
	box-sizing:border-box;
	position:relative;
}

.forziere_box img {
	width:100%;
	max-width:340px;
}

.forziere_button {
	width:100%;
	height:90px;
	color:white;
	font-size:22px;
	font-weight:bold;
	font-family:MyriadPro;
	text-align:center;
}

.forziere_button img {
	width:220px;
}

.forziere_credit {
	background-color:#4d0c7a;
	color:white;
}

.forziere_closed {
	position:absolute;
	width:225px;
	top:0px;
}

.forziere_result {
	position:absolute;
	width:100%;
	text-align:center;
	top:50px;
	color:white;
	font-size:40px;
	font-weight:bold;
	font-family:MyriadPro;
	display:none;
	text-shadow: 2px 2px 4px #000000;
}

/*** Gioca e vinci ***/

#page_giocaevinci {
	display:none;
	background-image:linear-gradient(to right, #76a937, #b7d333);
}

.giocaevinci_top {
	width:100%;
	height:79px;
	background-color:#5d9939;
	display:table;
}

.giocaevinci_top_inner {
	display:table-cell;
	width:100%;
	vertical-align:middle;
	color:white;
	font-size:22px;
	font-weight:bold;
	font-family:MyriadPro;
	text-align:center;
}

.giocaevinci_box {
	text-align:center;
	padding:20px 0px;
	height:auto;
	box-sizing:border-box;
	position:relative;
}

.giocaevinci_box img {
	width:100%;
	max-width:340px;
}

.giocaevinci_button {
	width:100%;
	height:90px;
	color:white;
	font-size:22px;
	font-weight:bold;
	font-family:MyriadPro;
	text-align:center;
}

#giocaevinci_button_verify {
	width:280px;
	display:none;
}

#giocaevinci_button_newticket {
	width:280px;
}

.giocaevinci_credit {
	background-color:#5d9939;
	color:white;
}

.giocaevinci_ticket {
	background-color:white;
	position:relative;
	margin:0 auto;
}

.giocaevinci_ticket img {
	width:100%;
}

.giocaevinci_gnd {
	width:200px!important;
	padding-top:40px;
}

/*** Superlotto ***/

#page_superlotto {
	display:none;
	background-image:linear-gradient(to right, #108cdd, #09a3d8);
}

.superlotto_top {
	background-color:#046ba5;
	width:100%;
	height:50px;
	color:white;
	font-size:20px;
	font-family:MyriadPro;
	text-align:center;
	box-sizing:border-box;
	display:table;
}

#superlotto_top_info {
	display:table-cell;
	vertical-align:middle;
}

.superlotto_center {
	padding:10px 0px;
	text-align:center;
	height:100px;
}

.superlotto_number {
	width:32px;
	height:32px;
	display:inline-block;
	text-align:center;
	border-radius:25px;
	font-size:20px;
	line-height:20px;
	background-color:#046ba5;
	font-family:MyriadPro;
	font-weight:bold;
	padding-top:4px;
	box-sizing:border-box;
	color:white;
	border:solid 4px transparent;
}

.superlotto_number_selected {
	color:white;
	background-color:#0e0c3a;
}

.superlotto_number_extracted {
	color:#0e0c3a;
	background-color:#ffff00;
}

.superlotto_number_matched {
	color:#0e0c3a;
	background-color:#66ff00;
	border:solid 4px #66ff00;
}

.superlotto_credit {
	background-color:#046ba5;
	color:white;
}

.superlotto_button {
	width:100%;
	height:90px;
	color:white;
	font-size:22px;
	font-weight:bold;
	font-family:MyriadPro;
	text-align:center;
}

.superlotto_button img {
	width:220px;
}

.superlotto_timer {
	width:100%;
	height:90px;	
}

.superlotto_timer_inner {
	height:50px;
	background-color:#046ba5;
	color:white;
	font-size:24px;
	font-family:MyriadPro;
	text-align:center;
	display:table;
	width:100%;
	padding-top:25px;
	box-sizing:bolder-box;
}


/*
#giocaevinci_cover {
	position:absolute;
	top:-10px;
	left:-10px;
	width:320px;
	height:242px;
	background-image:url(../img/ticket_cover.png);
	background-size:cover;
}*/

#bridge {
  display: block;
  margin: 0 auto;
  background-size: cover;
  height: auto;
}

/*** BOTTOM ***/

#loadingDiv {
	display:none;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(0,0,0,0.0);
	z-index: 1000;
}

@media screen and (max-height: 560px) {

}


/** ANIMATIONS **/
.fade-in{
    opacity: 1;
    transition: opacity .5s;
}

/** COLOR ELEMENT **/
pink {
  color:#FF1E64;
}