:root {
  --tone-color: #00838e;
  --tone-light: #DEF2F0;
  --tone-dark: #094454;
  --white: #FFF;
  --dark: #282828;
  --darker: #1E1E1E;
  --dark-grey: #9B9B9B;
  --success: #3DECB5;
  --error: #FF3E83;
   --null-color: #8792f0;
   
   --tone-gradient: linear-gradient(90deg, #007293 0%, #009B86 103.42%);
}


body,html{
    background-color: white;
    font-family: 'Satoshi', sans-serif;
    margin: 0;
    color: #09333F;
      scroll-behavior: smooth;

}
.container{max-width: 1200px !important;}
.container.larger{max-width: 1300px !important;}

.container-fluid{max-width: 1450px;}
hr{border: solid 1px #323232;}
.page-section{
	padding: 80px 0;
}
.page-section.sm{
	padding: 40px 0;
}
/*********************************************/
/****************FONT UTILITIES***************/
/*********************************************/
.tone{color: var(--tone-color);}
.white{color: white;}
.dark{color: var(--dark);}
.dark-grey{color: var(--dark-grey);}
.work-sans{
	font-family: 'Satoshi', sans-serif;
}
.success{color: var(--success);}
.error{color: var(--error);}
.null{color: var(--null-color);}

.section-title{
	font-family: 'Satoshi', sans-serif;
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
}
.italic{font-style: italic}
.uppercase{text-transform: uppercase}
.bold{font-weight: bold;}
.extra-bold{font-weight: 900;}
.medium{font-weight: 600;}
.light{font-weight: 300;}

.fs10{font-size:10px;}
.fs14{font-size:14px;}
.fs12{font-size:12px;}
.fs20{font-size:20px;}
.fs24{font-size:24px;}
.fs26{font-size:26px;}
@media (max-width: 992px) {
	.center-tablet{
		text-align: center;
	}
	footer .socials{
		justify-content: center;
		margin-bottom: 8px;
	}
}
@media (max-width: 575.98px) {
	.center-mobile{
		text-align:center;
	}
}

a{color: var(--tone-color); text-decoration: none;}
a:hover{color: var(--dark-grey);}

span.link{color: var(--tone-color); cursor: pointer}
span.link:hover{color: var(--dark-grey);}

/*********************************************/
/****************NAVIGATION*******************/
/*********************************************/
.main-nav{
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    background-color: transparent;
    z-index: 99;
    transition: all 0.5s;
    border-bottom: solid 2px transparent;
}
.main-nav.visible{
	padding: 5px 0;
	background-color: white;
	border-bottom: solid 1px #ECECEC;
}

.main-nav .logo{
    width: 140px;
    padding-left: 40px;
    margin-right: 20px;
}
.main-nav .nav-items{
    color: #09333F;
    display: flex;
    align-items: center;   
}
.main-nav .nav-link{
    margin: 0 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 8px;
    border-radius: 40px;
    padding: 4px 8px;
    transition: all 0.3s;
}

.main-nav a{
    color: #09333F;
    text-decoration: none;
}

 .wallet{
	margin-right: 10px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 11px;
}

.main-nav .nav-link.active{
	background-color: var(--tone-color) !important;
	color: white !important;
}

.main-nav .nav-link:hover{
	background-color: var(--tone-color) !important;
	color: white !important;
}

@media (max-width: 1050px) {
	.main-nav{
		display: none !important;
	}
	.mobile-bottom-nav{
		display: block !important;
	}
	.mobile-top-nav{
		display: block !important;
	}
}

.user-avatar{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}


.mobile-bottom-nav{
    border-top: solid 1px #333333;
	width: 100%;
	left: 0;
	display: none;
	position: fixed;
	bottom: 0;
	z-index: 99;
	background-color: var(--dark);
	padding: 8px;
	border-radius: 8px 8px 0 0;
}
.mobile-bottom-nav .nav-item{
	color: white !important;
	text-align: center;
}
.mobile-bottom-nav .nav-item.active{
	color: var(--tone-color) !important;
}
.mobile-bottom-nav i{
	font-size: 24px;
}
.mobile-bottom-nav .text{
	font-size: 12px;
}
@media (max-width: 575.98px) {
	.mobile-bottom-nav .text{
		font-size: 10px;
	}
}

.mobile-top-nav{
	display: none;
	background-color: white;
	border-bottom: solid 1px #ECECEC;
	width: 100%;
	left: 0;
	display: none;
	position: fixed;
	top: 0;
	z-index: 999;
	padding: 8px 10px 8px 10px;
}
.mobile-top-nav .logo{
	margin-top: 2px;
    width: 100px;
}


.dropdown-item li{
	display: flex;
	align-items: center;
	padding: 6px 0;
}
a.dropdown-item{
	text-decoration: none;
}
a.dropdown-item:hover{
	color: var(--tone-color)
}
.dropdown-item i{
	margin-right: 8px;
	font-size: 22px;
}

.mobile-nav{
	padding: 28px 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: fixed;
	z-index: 998;
	width: 100%;
	left: 0;
	gap: 10px;
	top: -100%;
	background-color: white;
	transition: all 0.3s;
}
.mobile-nav.active{
	top: 60px;
}
.mobile-nav .nav-item{
	text-decoration: none;
	font-size: 20px;
}

/*********************************************/
/*******************HOME**********************/
/*********************************************/

.hero{
	padding: 100px 0 80px 0;
	width: 100%;
	background-size: cover;
	background-position: center;
}
.hero h1, .hero h2{
	font-family: 'Satoshi', sans-serif !important;
}
.hero h1{
	font-size: 40px;
	color: var(--tone-dark) !important;
	font-weight: 900;
	margin-bottom: 0 !important;
}
.hero h2{
	margin-top: 15px !important;
	padding-top: 0 !important;
	font-size: 24px;
	color: var(--tone-dark) !important;
	font-weight: 400;
}



.hero button{
	font-weight: bold;
	font-family: 'Satoshi', sans-serif !important;
}

.header-text{
	font-size: 50px;
}

.bookie-image{
	border-radius: 8px; height:70px
}
@media (max-width: 575.98px) {
	.hero h1{
		font-size: 30px;
		color: var(--tone-dark) !important;
		font-weight: 900;
		margin-bottom: 0 !important;
	}
	.header-text{
		font-size: 35px;
	}
	.bookie-image{
		border-radius: 4px; height:40px
	}
}

/*********************************************/
/*******************EVENT**********************/
/*********************************************/
.event-header{
	margin-top: 70px; 
	background-color: #131316; 
	padding: 60px 0; 
	position: relative; 
	overflow: hidden;
}
.event-header .shape-1{
	position: absolute; bottom: -150px; left: -150px; width: 400px;
}
.event-header .shape-2{
	position: absolute; top: -150px; right: -150px; width: 400px; transform: rotate(180deg);
}
.events-tabs-1{
	background-color: var(--darker); width: 100%; top: 70px; position: fixed; z-index: 1; border-bottom: solid 1px #323232;
}
.events-tabs-2{
	padding: 8px 0;
	background-color: var(--darker); width: 100%; top: 125px; position: fixed; z-index: 1;
}
@media (max-width: 575.98px) {
	.event-header .shape-1{
		position: absolute; bottom: -85px; left: -85px; width: 200px;
	}
	.event-header .shape-2{
		position: absolute; top: -85px; right: -85px; width: 200px; transform: rotate(180deg);
	}
	.events-tabs-1{
		top: 62px;
	}
	.events.tabs-1 a{
		font-size: 14px !important;
	}
	.events-tabs-2{
		top: 117px;
	}
}
@media (max-width: 992px) {
	.events-tabs-1{
		top: 60px !important;
	}
	.events.tabs-1 a{
		font-size: 14px !important;
	}
	.events-tabs-2{
		top: 115px;
	}
	.condition-selector-wrapper{
	background: rgba(61, 236, 181, 0.11);
    border-radius: 8px;
}
}

.product .image-container{
	text-align: center;
	padding: 35px 5px;
	background-color: #F1F1F1;
	border-radius: 25px;
}
.product .image-container img{
	height: 150px;
	max-width: 100%;
	object-fit: cover;
	margin: auto;
}
.product .price{
	display: inline-block;
	font-weight: bold;
	background-color: #D9F0ED;
	border-radius: 40px;
	padding: 4px 8px;
}
.product .price .content{
	display: flex;
	align-items: center;
	gap: 4px;
}
/*********************************************/
/****************COMPONENTS*******************/
/*********************************************/

.wa-card{
	background: white;
	border: solid 1px #D7D7D7;
	border-radius: 8px;
}
.wa-card .card-button{
	transition: all 0.5s;
	border-radius: 0 0 8px 8px;
}
.wa-card .card-button:hover{
	background-color: rgba(247, 214, 61, 0.09);
}
/*pick*/
.wa-pick{
	background-color: #323232;
	border-radius: 8px;
}
.wa-pick .avatar{
	margin-left: 8px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	object-fit: cover;
}
/*tipster*/
.wa-tipster{
	background-color: #323232;
	border-radius: 8px;
}
.wa-tipster .avatar{
	margin-left: 8px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	object-fit: cover;
}
.state-ball{
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.state-ball.success{
	background-color: var(--success);
}
.state-ball.error{
	background-color: var(--error);
}
.state-ball.null{
	background-color: var(--null-color);
}
.wa-odds{
	cursor: pointer;
	display: inline-block;
	border-radius: 8px;
	background-color: #373737;
	border: 1.035px solid #424242;
}
.wa-odds.no-pointer{
	cursor: unset !important;
}
.wa-odds.best{
	/*background: #7425ff1f;
    color: #a471ff;*/
    background: #45ffee1c;
    color: #00eed8;
    border: solid 1px;
}
.wa-odds .number{
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 4px 15px;
}
.wa-odds img{
	border-radius: 0 0 8px 8px;
	width: 80px;
	height: 30px;
	object-fit: cover;
	margin-bottom: -5px;
}

.wa-pick .wa-odds .number{
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 4px 8px !important;
}
.wa-pick .wa-odds img{
	border-radius: 0 0 8px 8px;
	width: 70px !important;
	height: 30px;
	object-fit: cover;
	margin-bottom: -5px;
}

.wa-odds.sm{
	font-size: 14px;
}
.wa-odds.no-image{
	padding: 10px;
}
.wa-odds.selectable:hover{
	background-color: #fdb73d14;
	border: 1.035px solid #fdb73d;
}
.wa-odds.selectable.selected{
	background-color: #fdb73d14;
	border: 1.035px solid #fdb73d;
}
.wa-state.wa-state-2{
	border: solid 1px var(--success);
	color: var(--success);
}
.wa-state.wa-state-3{
	border: solid 1px var(--error);
	color: var(--error);
}
.wa-state.wa-state-4{
	border: solid 1px var(--null-color);
	color: var(--null-color);
}



.odds-legend-best{
	display: inline-block;
	border-radius: 3px;
	/*background: #7425ff1f;
    color: #a471ff;*/
    border: solid 1px;
    
    background: #45ffee1c;
    color: #00eed8;
}

.reward-image.locked{
	opacity: 0.3;
}

/*tabs*/
.wa-tabs{
	padding: 8px;
	background-color: #eaf4f3;
	border-radius: 8px;
	display: flex;
	align-items: center;
	line-height: 45px;
	gap: 8px;
}
.wa-tabs .nav-item{
    font-size: 14px;
    cursor: pointer;
    padding: 0 5px;
    font-weight: 600;
    border-radius: 8px;
    height: 45px;
    line-height: 45px;
}
.wa-tabs .nav-item.active{
	background-color: #c8c8c880;
	color: var(--tone-color) !important;
}
.wa-tabs .nav-item:hover{
	background-color: #c8c8c880;
	color: var(--tone-color) !important;
}
.wa-tabs.vertical{
	padding: 8px;
	background-color: #eaf4f3;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: start;
	line-height: 45px;
	gap: 8px;
}
.wa-tabs.vertical .nav-item{
	display: flex;
	align-items: center;
	gap: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    padding: 0 15px;
    font-weight: 600;
    border-radius: 8px;
    height: 45px;
    line-height: 45px;
}
a.nav-item{
	color: var(--dark);
	text-decoration: none !important;
}
.nav-item i{
	font-size: 18px;
}

/*trophy*/
.wa-trophy{
	text-align:center;
	background-color: #484848;
	border-radius: 8px;
	padding: 10px 15px;
}
.wa-trophy .name{
	font-weight: 600;
	font-size: 18px;
}
.wa-trophy .quantity{
	font-weight: 700;
	font-size: 24px;
}

.wa-reward{
	background-color: #484848;
	border-radius: 8px;
	padding: 0px 15px;
	gap: 20px;
}
.wa-reward-content{
		display: flex;
	align-items: center;
}
.wa-reward .name{
	font-weight: 700;
	font-size: 18px;
}
.wa-reward .quantity{
	font-weight: 700;
	font-size: 24px;
}

/*ranking*/
.wa-ranking .ranking-pos{
	padding: 4px 8px;
	font-size: 20px;
	font-weight: bold;
	width: 30px;
	text-align: center;
	border-radius: 4px;
}
.wa-ranking .ranking-pos.first{
	background-color: #F4D33A;
	color: #1E1E1E;
}
.wa-ranking .ranking-pos.second{
	background-color: #CFCECB;
	color: #1E1E1E;
}
.wa-ranking .ranking-pos.third{
	background-color: #FFC876;
	color: #1E1E1E;
}

/*tournament*/
.wa-tournament{
	position: relative;
	height: 150px;
	background-size: cover;
	border-radius: 8px;
	background-position: center;
}
.wa-tournament .layer{
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(7 9 18 / 89%) 100%);
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 25px;
	border-radius: 8px;
}
.wa-tournament .layer .name{
	font-size: 24px;
	font-family: 'Satoshi', sans-serif;
	font-style: Italic;
	text-transform: uppercase;
}
/*********************************************/
/**************PRIME VUE COMPS****************/

/*Bonus*/
.wa-bonus{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: no-wrap;
}
.wa-bonus .bookie-left{
	display: flex;
	align-items: center;
}
.wa-bonus .bookie-info{
	margin-left: 15px;
}
.wa-bonus .bookie-rating{
	text-align: right;
}
@media (max-width: 992px) {
	.wa-bonus{
		display: block;
	}
	.wa-bonus .bookie-left{
		display: block;
		align-items: center;
	}
	.wa-bonus .bookie-info{
		margin-left: 0px;
		margin-top: 10px;
	}
	.wa-bonus .bookie-rating{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;
	}
}


/*chip*/
.tab-chip.active, .tab-chip:hover{
	background-color: var(--tone-color); 
	color: var(--dark)
}
.tab-chip{
 	margin: 0 4px; 
 	cursor: pointer; 
 	font-size: 14px;
 	background-color: #3C3C3C; 
	color: white;
 }
/*********************************************/
.p-component, .p-link{
	font-family: 'Satoshi', sans-serif !important;
}

/**Button**/
.p-selectbutton .p-button{
	border-radius: unset !important;
}
.p-buttonset .p-button:first-of-type{
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}
.p-buttonset .p-button:last-of-type{
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}
.p-selectbutton.select-button-large .p-button{
	height: 37px;
	font-weight: normal !important;
}

.p-button{
	font-family: 'Satoshi', sans-serif !important;
	font-weight: bold !important;
	border-radius: 12px !important;
}


.p-button.expanded{
	width: 100%;
	justify-content: center;
}
.p-button.btn-tone{
	background: var(--tone-gradient) !important;
	color: white !important;
	border: solid 1px var(--tone-color) !important;
}
.p-button.p-button-outlined-wa{
	background: transparent !important;
	color: var(--tone-color) !important;
	border: solid 1px var(--tone-color) !important;
}
.p-button.p-button-lg{
	padding: 15px 30px !important;
}

/**Avatar**/
.p-avatar.p-avatar-xl {
	font-family: 'Satoshi', sans-serif !important;
    width: 2.8rem !important;
    height: 2.8rem !important;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--dark);
}
/**Tabs**/
.p-tabview.no-panels .p-tabview-panels{
	display: none;
}
.p-tabview .p-tabview-nav{
	font-family: 'Satoshi', sans-serif !important;
	background-color: #1E1E1E !important;
	border: none !important;
}
.p-tabview .p-tabview-nav .p-tabview-nav-link{
	background: #1E1E1E !important;
	border: none;
    color: rgba(255, 255, 255, 0.7);
}
.p-tabview .p-tabview-nav .p-tabview-nav-link:hover{
    color: white !important;
     border: none;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link{
	border: none !important;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{
	background: #1E1E1E !important;
	border: none !important;
    color: var(--tone-color) !important;
}
.p-tabview .p-tabview-nav-btn.p-link{
	background: #1E1E1E !important;
    color: var(--tone-color) !important;
}

/*P-TABMENU*/

.p-tabmenu .p-tabmenu-nav{
	overflow-x: auto;
	
	padding: 2px 0;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem{
	white-space: nowrap;
}


/**table**/
.p-datatable{
	font-family: 'Satoshi', sans-serif !important;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even){
	background-color: rgba(66, 66, 66, 0.39) !important;
}
.p-datatable .p-datatable-thead > tr > th{
	color: var(--tone-color) !important;
}
.p-datatable .p-datatable-tbody > tr > td{
	/*border: none !important;*/
}
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td{
	    padding: 0.5rem 0.5em !important;
}
@media (max-width: 575.98px) {
	.p-datatable{
		font-size: 14px !important;
	}
}
.p-datatable .centered .p-column-header-content{
	justify-content: center !important;
	text-align: center !important;
}
.p-datatable tbody .event-cell:hover{
	background-color: #baad3f1f;
}

/**Carousel**/
.p-carousel-container{
	font-family: 'Satoshi', sans-serif !important;
    position: relative !important;
    display: block !important;
}
.p-carousel-prev{
    position: absolute !important;
    z-index: 1;
    left: -6px;
    top: calc(50% - 23px);
    background-color: #323232a3 !important;
}
.p-carousel-next{
    position: absolute !important;
    z-index: 1;
    right: -6px;
    top: calc(50% - 23px);
    background-color: #323232a3 !important;
}
.p-carousel .p-carousel-indicators{
	display: none;
}
header .p-carousel .p-carousel-indicators{
	    display: flex;
    z-index: 999;
    margin-top: -48px;
}
header .p-carousel .p-carousel-indicators .p-carousel-indicator button{
	background-color: white;
	opacity: 0.8;
}
header .p-carousel-prev, header .p-carousel-next{
	display: none !important;
}
   

/**TAG**/
.p-tag{
	font-family: 'Satoshi', sans-serif !important;
	font-size: 11px;
}
.p-tag.selectable-tag{
	cursor: pointer;
	background-color: black !important; 
	color: white !important; 
	font-size: 14px;
}
.p-tag.selectable-tag.active{
	background-color: var(--tone-color) !important; 
	color: black !important; 
	font-size: 14px;
}


/*inputs*/
.p-inputtext.p-invalid.p-component {
    border-color: #ef9a9a !important;
}
.p-input-icon-left, .p-input-icon-right{
	display: unset !important;
}


.p-field-checkbox label{margin-left: 8px;}
.p-dropdown.expanded{width: 100%;}
.p-inputtext, .p-multiselect, .p-select, .p-dropdown{
	border-radius:8px !important;
}
.p-inputtext.expanded, .p-dropdown.expanded,  .p-inputnumber.expanded, .p-multiselect.expanded, .p-calendar.expanded, .p-textarea.expanded, .p-password.expanded, .p-password.expanded input{
	width: 100%;
}
.p-field label{
	font-size: 14px;
	line-height: 40px;
}
.p-checkbox .p-checkbox-box.p-highlight{
	border-color: var(--tone-color) !important;
    background:  var(--tone-color) !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{
	border-color: var(--tone-color) !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus{
	border-color: var(--tone-color) !important;
}

/*overlay panel*/
.p-overlaypanel{
	display: block !important;
	position: fixed !important;
	border-radius: 8px !important;
}
.p-overlaypanel-content{
	background-color: white !important;
	border-radius: 8px !important;
	padding: 0 !important;
}
.p-overlaypanel:before{
	display: none;
}
.p-overlaypanel:after{
	display: none;
}

.p-timeline-event-opposite{
	display: none !important;
}
.p-timeline .p-timeline-event-marker{
	border: 2px solid var(--tone-color) !important;
}

/**TOAST**/
.p-toast-message{
	background: var(--darker) !important;
	border-radius: 8px !important;
	color: white !important;
}
.p-toast .p-toast-message .p-toast-icon-close{
	background-color: #ffffff36 !important;
	color: white !important;
}
.p-toast .p-toast-message.p-toast-message-info{
	border-color: var(--info) !important;
}
.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon{
	color: var(--info) !important;
	font-size: 1.5rem !important;
}
.p-toast .p-toast-message.p-toast-message-error{
	border-color: var(--error) !important;
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon{
	color: var(--error) !important;
	font-size: 1.5rem !important;
}
.p-toast .p-toast-message .p-toast-icon-close {
    width: 2rem !important;
    padding: 3px !important;
    height: 1.5rem !important;
}
.p-toast .p-toast-icon-close-icon{
	font-size: 12px !important;
}

.p-tooltip-text{
	font-size: 14px !important;
	text-align: center !important;
}
.badge{
	background-color: var(--tone-color);
	border: solid 2px var(--tone-color);
	position: absolute;
	top: -5px;
	border-radius: 50px;
	font-weight: bold;
	width: 20px;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	height: 20px;
	font-size: 13px;
	color: white;
	right: -10px;
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: #ffffff;
    border-color: var(--tone-color) !important;
    color: var(--tone-color) !important;
    box-shadow: none !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link{
	background: #ffffff;
    border-color: var(--tone-color) !important;
    color: var(--tone-color) !important;
    box-shadow: none !important;
    font-weight: 800;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight:focus{
    box-shadow: none !important;
}
.badge-rewards{
	background-color: var(--tone-color);
	border: solid 2px #282828;
	position: absolute;
	top: -4px;
	border-radius: 50px;
	font-weight: bold;
	width: 20px;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	height: 20px;
	font-size: 13px;
	color: var(--dark);
	right: -10px;
}
.item-badge{
	background-color: var(--tone-color);
	border-radius: 50px;
	font-weight: bold;
	width: 20px;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	height: 20px;
	font-size: 13px;
	margin-top: 0px;
	color: var(--dark);
}

/*********************************************/
/****************FOOTER*******************/
/*********************************************/
footer{
	background-color: #0B0D17;
}
footer a{
	text-decoration: none;
}
footer .footer-logo{
	width: 200px; max-width: 100%
}
@media (max-width: 575.98px) {
	footer .footer-logo{
		width: 80px; max-width: 100%
	}
}


/*********************************************/
/****************RANDOM ELEMENTS*******************/
/*********************************************/
.text-editor-content p{
	margin: 0 !important;
	font-size: 14px !important;
}
.text-editor-content undefined{
	margin: 0 !important;
	font-size: 14px !important;
}
.text-editor-content ul, .text-editor-content li{
	margin: 0 !important;
	font-size: 14px !important;
}
.text-editor-content.bonus ul, .text-editor-content.bonus li{
	margin-left: -10px !important;
}



.newPickDialog .p-dialog-content{
	padding: 0px 12px !important;
}

.permanent-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
}

.permanent-scroll::-webkit-scrollbar:vertical {
    width: 3px;
}

.permanent-scroll::-webkit-scrollbar:horizontal {
    height: 3px;
}

.permanent-scroll::-webkit-scrollbar-thumb {
    background-color: var(--dark-grey);
    border-radius: 10px;
}

.permanent-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}


.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}



/*PICK SELECTOR*/

.selectable-state-box{
	font-size: 24px;
	padding: 15px 20px;
	border-radius: 4px;
	border: solid 1px var(--darker);
	cursor: pointer;
}
.selectable-state-box.win.selected, .selectable-state-box.win:hover{
	border: solid 2px var(--success);
	color: var(--success);
}
.selectable-state-box.lost.selected, .selectable-state-box.lost:hover{
	border: solid 2px var(--error);
	color: var(--error);
}
.selectable-state-box.null.selected, .selectable-state-box.null:hover{
	border: solid 2px var(--info);
	color: var(--info);
}

.sidebar-filters .p-sidebar-content{
	height: 100%;
	overflow-y: auto;
}



/**CART OVERLAY**/
.cart-overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.43);
	z-index: 998;
	backdrop-filter: blur(2px);
}
.cart-overlay.active{
	display: block;
}
.cart-panel{
	padding: 25px;
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	max-width:80%;
	background-color: white;
	transition: all 0.3s;
	height: 100vh;
	z-index: 999;
}
.cart-panel.active{
	right: 0;
}
.cart-table .p-datatable-thead{
	display: none;
}


@media (max-width: 575.98px) {

}

/*TEXT EDITOR CONTENT*/
.text-editor-content img{
	max-width: 100%;
}

.block-content h1, .block-content h2{
	font-family: 'Satoshi', sans-serif;
	font-style: italic;
	margin: 0;
	text-transform: uppercase;
}
.block-content p{
	margin: 0;
}


.pi-spin {
    -webkit-animation: fa-spin 2s infinite linear !important;
    animation: fa-spin 0.8s infinite linear !important;
}

.score-selector{
	height: 48px;
    border-radius: 6px;
    font-size: 28px;
    background-color: transparent;
    color: white;
}





/**COOKIES AND AGE BANNERS**/
.cookies-banner{
	    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    background-color: #e3e3e3;
    color: black;
    max-width: 100%;
    z-index: 9999;
}

@media (min-width: 575.98px) {
	.cookies-banner{
		width: 400px;
		left: unset;
		right: 25px;
		bottom: 25px;
	}
	
}