:root {
	--white: #FFF;
	--black: #000;
	--light-gray: #E0E4EB;
	--gray: #DADADA;
	--dark-gray: #8D8F94;
	--light-green: #D0F0D8;
	--green: #2FA84D;
	--darker-green: #25963C;
	--light-yellow: #FFF7D9;
	--zircon: #F3F8FF;
	--yellow: #F8C523;
	--border-radius: 8px;
	--spacing--8: 8px;
	--spacing--12: 12px;
	--spacing--16: 16px;
	--spacing--24: 24px;
	--spacing--32: 32px;
}

/* Bookmaker rating */

.bookmakerRating {
	background-color: var(--bgColor, #FFF);
}

.bookmakerRating__circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--bgColor) 79%, transparent 80% 100%, var(--bgColor) 0), conic-gradient(var(--borderColor) calc(var(--progress-value) * 1%), var(--circleBgColor) 0);
	animation: css-progress 2s 1 forwards;
	font-weight: bold;
	font-size: 15px;
	line-height: 1;
}

.bookmakerRating.--user {
	--bgColor: var(--light-yellow, #ffe783);
	--borderColor: var(--yellow, #f8c523);
	--circleBgColor: #FFE6AA;
}

.bookmakerRating.--editor {
	--bgColor: var(--light-green, #65ce7e);
	--borderColor: var(--green, #2fa84d);
	--circleBgColor: #A8E5B5;
}

@keyframes css-progress {
	to {
		--progress-value: var(--percentage);
	}
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px;
	line-height: 1.15;
	border-radius: 10px;
}

body .btn {
	font-weight: bold;
	box-shadow: unset;
	background-image: unset;
}

body .btn,
body .btn:hover {
	transform: unset;
	transition: background-color .3s, color .3s, border-color .3s;
}

.btn-wider {
	max-width: unset;
	width: auto;
	padding: 7px 19px;
}

.btn.btn-primary {
	background-color: var(--darker-green);
	border-color: var(--darker-green);
	background-image: unset;
	color: var(--white);
	box-shadow: unset;
}

.btn.btn-secondary {
	background-color: var(--yellow);
	border-color: var(--yellow);
	color: var(--black);
}

.btn.btn-gray {
	background-color: var(--gray);
	border-color: var(--gray);
	color: var(--black);
}

.btn.btn-primary:hover,
.btn.btn-gray:hover,
.btn.btn-secondary:hover {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--white)!important;
	box-shadow: unset;
}

#right-sidebar .widget .btn.btn-primary {
	color: var(--white)!important;
}

#right-sidebar .widget .btn.btn-gray,
#right-sidebar .widget .btn.btn-secondary {
	color: var(--black)!important;
}

#right-sidebar .widget .btn:hover {
	color: var(--white)!important;
}


.btn-gray {
	background-image: linear-gradient(to bottom, #e9e9e9, #d7d7d7 100%);
}

.btn-gray:focus {
	box-shadow: 0 0 0 0.2rem rgba(157, 157, 157, .25)
}

.btn.btn-outline {
	border: 2px solid var(--black);
}

.btn.btn-outline:hover {
	background-color: var(--black);
	color: var(--white);
}

#main-article .customList {
	list-style: none;
}

#main-article .customList li:not(:last-child) {
	margin-bottom: 16px;
}

#main-article .customList.--checklist {
	padding-left: 34px;
}

#main-article .customList.--checklist .customList__item {
	padding-left: 0
}

#main-article .customList.--checklist .customList__item::before {
	top: 3px;
	left: -34px;
	width: 18px;
	height: 18px;
	aspect-ratio: 1/1;
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.75 4.75 4 7l5.25-5.25' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 50% 45%;
	background-size: 11px;
}

#main-article .steps__heading {
	margin-top: 0;
	margin-bottom: 16px;
}

#main-article .steps__toggleLink {
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: 0;
	cursor: pointer;
}
#main-article .steps__toggleLink:hover {
	text-decoration: none;
}

#main-article .steps__toggleState:checked ~ .steps__toggle .steps__toggleLinkText.--nonactive,
#main-article .steps__toggleState:not(:checked) ~ .steps__toggle .steps__toggleLinkText.--active,
#main-article .steps {
	display: none;
}

#main-article .steps {
	background-color: var(--zircon);
	padding: var(--spacing--32);
	border-radius: var(--border-radius);
}
#main-article .steps .customList .customList__item::before {
	top: -6px;
	left: -40px;
	width: 40px;
	height: 40px;
	background-color: var(--light-gray);
	color: var(--black);
	border-radius: var(--border-radius);
	content: counter(steps) "."
}

#main-article .steps .customList {
	padding-left: 40px;
}

#main-article .steps .customList .customList__item:not(:last-child) {
	margin-bottom: var(--spacing--24);
}

.legalBookmakerLeaderboardListItem,
.bookmakerBonusListItem,
.bookmakerFreespinsListItem,
.bookmakerLeaderboardListItem,
.bookmakerPromoCodeList__row,
.bookmakerReviewListItem {
	box-shadow: 0 5px 10px 0 rgba(53, 29, 3, 0.05);
	transition: box-shadow 0.3s ease-in-out;
	border-radius: 8px;
}
.legalBookmakerLeaderboardListItem:hover,
.bookmakerBonusListItem:hover,
.bookmakerFreespinsListItem:hover,
.bookmakerLeaderboardListItem:hover,
.bookmakerPromoCodeList__row:hover,
.bookmakerReviewListItem:hover {
	box-shadow: 0 5px 10px 0 rgba(53, 29, 3, 0.15);
	background-color: transparent;
}