#id_arcade ,#arcadeLabel {
	
	background: linear-gradient(
        to right,
        #F26522 20%,
        #2196F3 30%,
        #2196F3 70%,
        #F26522 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
	
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

#id_arcade.tab-link.tab-link-active  {
	background-color:transparent;
}

#arcadeIcon {
  color:#fff;
}
span#arcadeLabel.tabbar-label {
  color:#fff;
}

 .tab-link-active #arcadeIcon {
  color:#F26522;
}

 .tab-link-active span#arcadeLabel {
  color:#F26522;
}
 
 
/** Custom SkillRush CSS Values for Desktop Mode **/




[class*=" smart-select-list-"], [class^="smart-select-list-"] {
	margin-top: 0 !important;
}
  

#step-0,#step-1,#step-2,#step-3,#step-4,#step-5,#step-6,#step-7,#step-8,#step-9,#step-10,#step-11,#step-12,#step-13,#step-14,#step-15,#step-16,#step-17,#step-18,#step-19,#step-20 {
  z-index: 99999;
}

.tour-backdrop {
	z-index: 99999;
}

/* When the lef-panel (Navigation) is expanded in desktop view, there should be no link for opening Left Navigation, because it is always open. */
.theme-left-panel #panel_left_link{
  display: none;
}

/* When the right-panel (Shoutbox) is expanded in desktop view, there should be no link for opening the Shoutbox, because it is always open. */
.theme-right-panel .panel_right_link {
  display: none;
}

/* When the right-panel (Shoutbox) is expanded in desktop view, it should not have a close button, because it is always open. */
.theme-right-panel #panel_right_link_close {
  display: none;
}


:root {
  /** SR Orange **/
  --f7-color-orange: #F26522;
  --f7-color-orange-rgb: 242, 101, 34;

  /** Right Panel Only **/
  
/*  --f7-panel-right-width: 100vw;*/
  

  /** All Panels **/
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, .8);
  --f7-panel-transition-duration: 500ms;
}





html {
  height  : 100%;
  overflow: hidden;
  position: relative;
}

body {
  height  : 100%;
  overflow: auto;
  position: relative;
}

#id_bar_tab {
	display:none;
}

.promoFont {

}
@media only screen and (max-width: 768px) {
	
	.promoFont {
	font-size:12px;
}
	
	.hideSmall {
		display:none;
	}
	
	#id_bar_tab {
	display:flex;
}
	
	p {
		font-size:12px;
	}
	
	h1 {
		font-size:26px;
		font-weight: 900;
	}
	h2 {
		font-size:20px;
		font-weight: 700;
  }	
  #mySaloonAlertBadge {
		margin-left:20px; 
		margin-top:-8px;
	}
  .profile_tab_link {
	font-size:10px;
  }

	:root {
	  /** Right Panel Only **/
	  --f7-panel-right-width: 100vw;
	}
	
}


@media only screen and (min-width: 768px) {	
	.hideLarge {
	display:none;
	}
	
	.lead {
		font-weight: 300;
	}
	
	p {
		font-size:16px;
	}
	
	h1 {
		font-size:34px;
		font-weight: 900;
	}
	h2 {
		font-size:24px;
		font-weight: 700;
  }
  #mySaloonAlertBadge {
		margin-left:-52px; 
		margin-top:-18px;
	}

	#app {
		max-width:1366px;
		margin:0 auto;
	}
	
	.button {
		max-width:400px;
		margin:0 auto;
	}
	
	.panel-right {
		min-width: 420px;
		max-width: 100vw;
	}
	
	#shoutbox_messagebar {
		height:50px;
/*
		border-right:none;
		border-top-color:#b9b9ba;
		border-bottom:none;
		border-top:1px;
		border-left:none;
		border-top-style: solid;
*/
	}
	
	/* When the right-panel (Shoutbox) is expanded in desktop view, adjust the shoutbox styles: */
	.theme-right-panel #shoutbox_panel {

	/*border on right side of shoutbox for desktop	*/
		border-right:1px;
		border-style: solid;
		border-right-color:#C0C0C0;
		border-bottom:none;
		border-top:none;
		border-left:none;

	}
	.theme-dark #shoutbox_panel {
		border-right-color:#303030;
	}

	/*Right border between main content and shoutbox for desktop*/
	#view-home {
		border-right:1px;
		border-style: solid;
		border-right-color:#C0C0C0;
		border-bottom:none;
		border-top:none;
		border-left-width:1px;
		border-left-color:#C0C0C0;		
	}

	.theme-dark #view-home{
		border-right-color:#303030;
		border-left-color:#303030;
	}

	/* When the left-panel (Navigation) is expanded in desktop view, adjust the navigation styles: */
	 #navigation_panel {
	/* left border on left panel for desktop	*/
		border-left:1px;
		border-style: solid;
		border-left-color:#C0C0C0;
		border-bottom:none;
		border-top:none;
		border-right:none;
	}

	.theme-dark #navigation_panel{
		border-left-color:#303030;
	}

	
}

iframe{border-width: 0px;}

.popup-users-search {
	z-index:999999;
}

.orange {
	color:#F26522;
}
.color-theme-orange {
  --f7-theme-color: #F26522;
  --f7-theme-color-rgb: 242, 101, 34;
}
.color-orange {
  --f7-theme-color: #F26522;
  --f7-theme-color-rgb: 242, 101, 34;
}
.text-color-orange {
  --f7-theme-color-text-color: #F26522;
}
.bg-color-orange {
  --f7-theme-color-bg-color: #F26522;
}
.border-color-orange {
  --f7-theme-color-border-color: #F26522;
}

.message {
  display: block;
}

.tenPixels {
	font-size:10px;
}

.segmented .button {
  line-height: 32px;
  height: 32px;
}

.segmented .button {
	font-size:16px;;
}

.txt_small{
	font-size:75%;
}

.ios .tabbar-labels .tab-link:not(.tab-link-active) .icon-ios-fill {
  display: none;
}
/*
.ios .tabbar-labels .tab-link.tab-link-active .icon:not(.icon-ios-fill) {
  display: none;
}
*/
.ios .theme-dark .item-inner:after {
/*    background-color: #74706a;*/
	 background-color: #848484;
}

.ios .theme-dark .page, .page.ios .theme-dark {
    background: #333;
}


.theme-dark select,input{
	color:#bbb;
}
.theme-dark select option {
	background-color:#333;
}

.dark-bd{
	background-color:#1c1c1d;
}
.light-bd{
	background-color:#f7f7f8;

}



.input_green_check{
  pointer-events: none;
  opacity:0;
  -webkit-transition: opacity 0.5s linear; /* Safari */
  transition: opacity 1s linear;
  position: absolute;
  top: 45%;
  border: none;
  padding: 0;
  margin: 0;
  outline: 0;
  z-index: 1;
  cursor: pointer;
  background: none;
  width: var(--f7-input-clear-button-size);
  height: var(--f7-input-clear-button-size);
  margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
  color: var(--f7-input-clear-button-color);
  right: 15px;	
}

.input_green_check.on{
	opacity:1;
}

.input_green_check:before {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
}

.input_green_check:after {
  content: 'check_round';
  line-height: 1;
  font-family: 'Framework7 Icons';
  font-weight: bold;
  font-style: normal;
  color: #4cd964;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 20px;
}


.hide {
  display:none;
}

.show {
  display:block;
}

.smart-select .item-after{
	max-width: none;
}

.rounded .item-media > img,img.rounded{
	border-radius: 50%;
	margin:5px;
	width:50px;
	height:50px;
}

.rounded_img{
	border-radius: 50%;
}

.margin_side{margin: 0px 10px;}

.money_disp{font-size:18px; font-weight:700;color:#4cd964}

.money_disp_small{font-size:12px; font-weight:700;color:#4cd964}

.toolbar.thin{height:35px;border-bottom:solid 1px #ccc;background: #eee;}
.theme-dark .toolbar.thin{border-bottom:solid 1px #333;background: #1f1f1f;}

.toolbar.createachal{border-bottom:solid 1px #ccc;background: #eee;}
.theme-dark .toolbar.createachal{border-bottom:solid 1px #333;background: #1f1f1f;}

.mysaloonspacer{height:1px; background: #ccc;}
.theme-dark .mysaloonspacer{height:1px; background: #333;}

.toolbar.thin a,.toolbar.thin div{color:#888;font-weight:bold;font-size:12px;}
.toolbar.thin.alt{background:#e5e5e5;}

#find_a_match_filters{background:#e5e5e5;}
.theme-dark #find_a_match_filters{background:#363636;}

/*.theme-dark #find_a_match_toolbar{border-bottom:solid 1px #ccc;}*/

.list-group-title{font-size:14px;}

.numberCircle {
	display:inline;
    border-radius: 10%;
    padding: 2px 4px;
    background: #b2b2b2;
    color: #fff !important;
    text-align: center;
    font: 12px Arial, sans-serif;
}

.theme-dark .numberCircle {
    background: #666;
}

#online_now_list.rounded .item-media > img{
    border-radius: 50%;
    margin:0;
    width: 30px;
	height: 30px;
}

#recent_matches_list .item-inner{
	font-size:85%;
}

#recent_matches_list .rounded .item-media > img {
    border-radius: 6px;
    
    width: 50px;
	height: 50px;
}



#p_message_text{
	background: #fff;
    border-radius: 17px;
    padding: 6px 15px;
    height: 34px;
    line-height: 20px;
    font-size: 17px;
    border: 1px solid #c8c8cd;
}

.item-error {
    color:red !important;
}

.item-check-ok {
	color:green !important;
}


/* theme bar backgrounds */

.dark-mode {
/*	background-color:#1c1c1d;*/

/*
	--background-image:url('img/str1.jpg');
	--background-repeat: repeat;
*/
	
}


.light-mode {
/*	background-color:#f7f7f8;*/

/*
	--background-image:url('img/str2.jpg');
	--background-repeat: repeat;
*/

}

#tournaments_page_list .item-after,#tournaments_list .item-after{font-size:60%;color:#F26522 !important;}
#tournaments_page_list .item-header,#tournaments_list .item-header{font-size: 95%;}

/*#shoutbox_body ul li{
	border-bottom:solid 1px #666;
}*/

#shoutbox_body img,#private_chat_body img{
  border-radius: 50%;
  margin:0;
  width: 30px;
  height: 30px;
  margin: 8px 0px 0px 5px;
}

#shoutbox_body .item-after,#private_chat_body .item-after{
	padding-right:5px;
}

.system_message{
	background-color: #eaeaea;
}

.ios .theme-dark .system_message{
	background-color: #3a3a3a;
}

.panel.panel-right{
	background:#eee;
}

.ios .theme-dark .panel-right{
	background:#0C0C0C;
}

.ios .borderright{
	border-right:solid 1px #ccc;
}
.ios .theme-dark .borderright{
	border-right:solid 1px #555;
}
.ios .borderleft{
	border-left:solid 1px #ccc;
}
.ios .theme-dark .borderleft{
	border-left:solid 1px #555;
}
/* SALOON ICONS */


@charset "UTF-8";

@font-face {
  font-family: "saloon-font";
  src:url("../fonts/saloon-font.eot");
  src:url("../fonts/saloon-font.eot?#iefix") format("embedded-opentype"),
  url("../fonts/saloon-font.woff") format("woff"),
  url("../fonts/saloon-font.ttf") format("truetype"),
  url("../fonts/saloon-font.svg#saloon-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "saloon-font" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "saloon-font" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tourney:before {
  content: "\62";

}
.icon-mysaloon:before {
  content: "\65";
}
.icon-shout:before {
  content: "\67";
}

.action_req{
	background:#4cd964;
}

.ios .theme-dark .action_req {
	background:#4cd964;
}

.prizeColor {
	color:#4cd964;
}

.action_req .prizeColor {
	color:#000000;
}

.ios .theme-dark .action_req .prizeColor {
	color:#000000;
}
.ios .theme-dark .action_req .item-header {
	color:#000000;
}
.ios .theme-dark .action_req .item-footer {
	color:#000000;
}

.ios .theme-dark a.popup-close.action_req {
	color:#000000;
}

.action_dot{
	color:#F26522;
	position: absolute;
    top: 0px;
    right: 5px;
}

.online_dot{
	color:#4cd964;
	position: absolute;
    top: 0px;
    left: 5px;
}

.icon-shoutbox-icon,.icon-ham-icon{
	font-size:22px; margin-top:6px;
}

#tournaments_list img{width:55px;max-height:55px;}
#players_list img{width:50px;height: 50px;}
#players_list .item-title,#open_challenges_list .item-title{font-weight: 200;}
#players_list .item-text,#open_challenges_list .item-text{font-size:12px;}


#findamatchtab .list ul ul {
	padding-left:0;
}

.message_box_link{
	color:#888;
}

.message_box_link.link_active{
	color:#555;
}

.main_logo > img{
	width:200px;
}

.avatar_list img{width:52px;height:52px;}


/* used to navigate down findamatch page */
.anchor{
  display: block;
  height: 122px; /*same height as header*/
  margin-top: -122px; /*same height as header*/
  visibility: hidden;
}

.first_deposit_cta{display:none;}

.leaderboard_cta{display:none;}


.shoutbox_fine_print{font-size:8px;}

.small_loader{
	float:left;
	width:30px;
	height:30px;
	background-image: url('img/ajax-loader.gif');
	
}

.ios {
  --f7-page-bg-color: #efeff4;
  --f7-page-transition-duration: 150ms;
}

.terms-popup {
	z-index: 2147483647;
}

.privacy-popup {
	z-index: 2147483647;
}

.cookies-popup {
	z-index: 2147483647;
}

li > .req_error {
	padding: 4px var(--f7-list-item-padding-horizontal, 16px) 8px;
	text-align: right;
}

/* Make the wrap a positioning context whenever a password toggle lives in it,
   so the icon below stays out of flow even outside the .list ancestor F7 relies on. */
.item-input-wrap:has(> .password-toggle) {
	position: relative;
}

.item-input-wrap .password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	z-index: 2;
	user-select: none;
}

/* When a clear button shares the wrap, sit to its left. */
.item-input-wrap .password-toggle:not(.no-clear-button) {
	right: 32px;
}

/* Keep input text from sliding under the eye icon. */
.item-input-wrap:has(> .password-toggle.no-clear-button) > input {
	padding-right: 32px;
}
.item-input-wrap:has(> .password-toggle:not(.no-clear-button)) > input {
	padding-right: 56px;
}
