/* START debug.css */
#debug {
    padding: 1.25rem;
	background: var(--accent-background);
	width: 100%;
	box-sizing: border-box;
}

#debug .right {
    text-align: right;
}

#debug .bottom {
    padding: 0.625rem 0rem;
    margin-top: 0.625rem;
    border-top: 0.0625rem solid #d9d9d9;
	border-top: 0.0625rem solid var(--main-border);
}

.spin-debug .cache-name {
	margin-top: 0.03125rem;
	border: 0;
	display: block;
}
/* END debug.css */

/* START dropdown.css */
.dropdown-wrapper {
    text-align: center;
    position: relative;
    display: inline-block;
	font-size: 0;
}

.dropdown {
    position: absolute;
    display: none;
    z-index: 1000;
    /*margin-top: 10px;
    margin-top: 0.625rem;*/
    white-space: nowrap;
	margin-bottom: 1.25rem;
}

.dropdown.dropdown-top {
	bottom: 100%;
	margin-top: 1.25rem;
	margin-bottom: 0;
}

/*.dropdown::before {
    content: '';
    background: #d9d9d9;
    width: 10px;
    width: 0.625rem;
    height: 10px;
    height: 0.625rem;
    display: block;
    transform: rotate(45deg);
    margin: auto auto;
    margin-bottom: -5px;
    margin-bottom: -0.3125rem;
}*/

.dropdown.dropdown-right {
    right: 0;
}

.dropdown.dropdown-right .dropdown-inner {
    margin-right: 0;
}

.dropdown.dropdown-left {
    left: 0;
}

.dropdown.dropdown-left .dropdown-inner {
    margin-left: 0;
}

.dropdown.active {
    display: block;
}

.dropdown .dropdown-inner {
    font-size: 14px;
    font-size: 0.875rem;
    text-align: center;
    list-style: none;
    background: var(--input-background);
    border: 1px solid var(--main-border);
    border: 0.0625rem solid var(--main-border);
    position: relative;
    display: inline-block;
    padding: 5px;
    padding: 0.3125rem;
	overflow-y: auto;
}

.dropdown-inner .dropdown-header {
	padding: 0.625rem;
	border-radius: 0.3125rem;
	background: var(--faded-background);
	color: var(--accent-font);
	font-size: 1rem;
}

.dropdown-inner > li {
    height: auto;
    line-height: normal;
    display: block;
    padding: 0px 5px;
    padding: 0rem 0.3125rem;
}

.dropdown-inner > li:not(:last-child) {
	margin-bottom: 0.3125rem;
}

.dropdown-inner > li a{
    display: block;
    padding: 5px;
    padding: 0.3125rem;
}

.dropdown-inner > li:not(:last-child) a{
    border-bottom: 1px solid var(--main-border);
    border-bottom: 0.0625rem solid var(--main-border);
}

.dropdown-inner input[type="checkbox"] + label {
	border: 0;
}

.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"]:checked + label.chk {
	background: var(--other-background);
	border-radius: 0.3125rem;
}

@media (pointer: fine) {
	.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"] + label.chk:hover {
		background: var(--other-background);
		border-radius: 0.3125rem;
	}
}

.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"] + label.chk:active {
		background: var(--other-background);
		border-radius: 0.3125rem;
	}

.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"]:checked + label.chk .text {
	color: var(--button-font);
}

@media (pointer: fine) {
	.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"] + label.chk:hover .text {
		color: var(--button-font);
		opacity: 1;
	}
}

.dropdown[data-dropdown-type="select"] .dropdown-inner input[type="checkbox"] + label.chk:active .text {
	color: var(--button-font);
	opacity: 1;
}

@media only screen and (max-width: 46.875rem) {
	body.dropdown-open {
		overflow-y: hidden;
	}
	
	.dropdown.active {
		position: fixed;
		padding: 10vw;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		align-content: center;
		justify-content: center;
		background: rgba(0,0,0,0.75);
	}
	
	.dropdown,
	.dropdown.dropdown-top {
		margin-top: 0;
		margin-bottom: 0;
	}
		
	.dropdown.active .dropdown-inner {
		border-radius: 1.25rem !important;
		padding: 1.25rem 0.625rem;
	}
}

/* END dropdown.css */

/* START effects.css */
.move-up {  
    overflow: hidden;
}

.move-up .animate, .move-up.animate {
    -webkit-transform: translateY(100px);
    -webkit-transform: translateY(6.25rem);
    transform: translateY(100px);
    transform: translateY(6.25rem);
    -webkit-animation: moveUp 0.65s ease forwards;
    animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
    0% { opacity: 0; }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    0% { opacity: 0; }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

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

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

/* FADE */

.fade .animate, .fade.animate {
	opacity: 0;
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

.pulse .animate, .pulse.animate {
	-webkit-animation: pulse 1s infinite ease-out alternate;
	animation: pulse 1s infinite ease-out alternate;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@-webkit-keyframes pulse {
	0% { opacity: 0.5;}
	100% { opacity: 1; }
}

@keyframes pulse {
	0% { opacity: 0.5;}
	100% { opacity: 1; }
}

/* END effects.css */

/* START errors.css */
.inline-errors {    
    text-align: left;
    list-style: none;
    display: none;
    position: relative;
}

.inline-errors.success {
    background: #00d400;
}

.inline-errors.error {
  background: #b80000;
}

.inline-errors.notice {
    background: #ef9023;
}

.inline-errors.success,
.inline-errors.error,
.inline-errors.notice {
  border: 0;
  display: block;
  border-radius: 0.625rem;
}

.inline-errors.inactive {
	display: none;
}

.inline-errors li {
	color: #FFF;
}

.inline-errors li.success {
    color: #FFF;
}

.inline-errors li.error {
    color: #FFF;
}

.inline-errors li.notice {
    color: #FFF;
}

.page-errors {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.25rem;
}

.page-errors > div {
    display: inline-block;
    margin: auto auto;
    text-align: left;
    font-size: 1.5625rem;
}

.page-errors > div  h1{
    color: #2E51A2;
	color: var(--highlight);
}

.page-errors ul {
    list-style: none;
}

.page-errors li {
    padding: 0.3125rem 0;
    color: #777;
	color: var(--main-font);
}

.site-notice,
#noscript_error {
	padding: 0.625rem;
	border-bottom: 0.625rem solid #f48f02;
	color: #FFF;
	color: var(--form-font);
	background: #2E51A2;
	background: var(--form-background);
	font-weight: bold;
	font-size: 1.25rem;
	text-align: center;
}

.error_info {
	text-align: center;
}

.error_info .error_code {
	font-weight: bold;
	font-size: 6.25rem;
}

.error_info .error {
	font-size: 1.25rem;
}
/* END errors.css */

/* START footer.css */
#footer-outer {
	text-align: center;
    color: #777;
	color: var(--main-font);
    padding: 0.625rem;
    font-size: 0.875rem;
    width: 100%;
    max-width: 93.75rem;
    margin: 0 auto;
    box-sizing: border-box;
	flex-grow: 0;
}

#footer {
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#footer > * {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-top: 10px;
    margin-top: 0.625rem;
    box-sizing: border-box;
}

#footer-nav {
	text-align: left;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	list-style: none;
}

#footer-nav > * {
}

#footer-buttons > *,
#footer-links > * {
    display: inline-block;
	vertical-align: middle;
}

#footer-links > *:not(:last-child):not(#dark-wrapper):not(#score-wrapper):not(#footer-logo-wrapper) {
    border-right: 0.0625rem solid #d9d9d9;
	border-right: 0.0625rem solid var(--main-border);
}

#copyright {
    float: right;
    text-align: right;
	font-size: 0.8rem;
}

#copyright a {
	opacity: 0.75;
}

#version-wrapper {
	display: block;
}

#version {
	color: var(--main-font);
	opacity: 0.5;
}

#version:hover,
#version:active {
	color: var(--highlight-hover);
	opacity: 1;
}

#footer-logo-wrapper {
	padding: 0;
}

#footer-logo {
	display: inline-block;
	width: 3rem;
	max-width: 3rem;
	height: 3rem;
	max-height: 3rem;
	opacity: 0.5;
	transition: opacity 0.25s ease-in-out;
}

@media (pointer: fine) {
	#footer-logo:hover {
		opacity: 1;
		animation: spin 1s ease-in-out forwards;
	}
}

#footer-logo:active {
	opacity: 1;
}

#footer-logo #spin-svg-logo .domain {
	display: none;
}

.dark-toggle,
.score-toggle {
	cursor: pointer;
	border: none;
	background: var(--form-background);
	padding: 0.3125rem;
	border-radius: 0.3125rem;
	opacity: 0.5;
	vertical-align: middle;
	display: inline-block;
	font-size: 0;
	transition: opacity 0.25s ease-in-out;
	height: 1.75rem;
	align-content: center;
}

@media (pointer: fine) {
	.dark-toggle:hover,
	.score-toggle:hover	{
		opacity: 1;
	}
}

.dark-toggle:active,
.score-toggle:active {
	opacity: 1;
}

.dark-toggle > span,
.score-toggle > span {
	color: var(--button-font);
	padding: 0.3125rem;
	vertical-align: middle;
	display: inline-block;
	vertical-align: middle;
	font-size: 0.8rem;
}

.dark-toggle .dark-text,
.score-toggle .score-icon {
	display: none;
}

.dark-toggle .dark-icon:before,
.score-toggle .score-icon:before {
	vertical-align: middle;
}

body[data-dark-mode="light"] .dark-toggle .dark-text.light-mode,
body[data-dark-mode="dark"] .dark-toggle .dark-text.dark-mode,
body[data-dark-mode="auto"] .dark-toggle .dark-text.auto-mode,
body[data-dark-mode="system"] .dark-toggle .dark-text.system-mode {
	display: inline;
}

body.dark.dark-cookie .dark-toggle[data-no-cookie="true"] {
	display: none !important;
}

body[data-dark-mode="light"] #footer .dark-toggle .dark-icon:before,
body.light #footer .dark-toggle .dark-icon:before {
	content:"\f0eb";
	color: #fcf67b;
}

body[data-dark-mode="dark"] #footer .dark-toggle .dark-icon:before,
body.dark #footer .dark-toggle .dark-icon:before {
	content:"\f186";
	color: #016789;
}

body[data-dark-mode="system"] #footer .dark-toggle .dark-icon:before {
	content:"\f108";
	color: #016789;
}

body[data-dark-mode="system"].dark #footer .dark-toggle .dark-icon:before {
	color: #fcf67b;
}

body[data-dark-mode="auto"] #footer .dark-toggle .dark-icon:before {
	content:"\f017";
	color: #8e6edd;
}

body[data-score-mode="default"] .score-toggle .score-icon.default,
body[data-score-mode="stars"] .score-toggle .score-icon.stars,
body[data-score-mode="fraction"] .score-toggle .score-icon.fraction,
body[data-score-mode="percent"] .score-toggle .score-icon.percent {
	display: inline;
}

#score-wrapper {
	padding-left: 0;
}

.score-toggle .score-icon {
	color: #FFF;
	font-size: 1rem;
}

.score-toggle .score-icon.stars {
	color: var(--star-color);
}

.score-toggle .score-icon.default {
}

.score-toggle .score-icon.fraction {
}

.score-toggle .score-icon.percent {
}

.add-link {
    color: #2E51A2;
    color: var(--highlight);
    margin-top: 0.3125rem;
    margin-left: 0.625rem;
    font-size: 0.75rem;
	flex-grow: 0 !important;
    flex-basis: fit-content !important;
}

#footer > .clearfix {
	width: 100%;
	flex-basis: 100%;
	margin: 0;
	font-size: 0;
	padding: 0;
}

@media only screen and (max-width: 46.875rem) {
	#footer-nav {
		flex-direction: column-reverse;
		justify-content: center;
	}
	
	/*body:not([data-controller="index.index"]) #footer-nav {
		position: fixed;
		left: 0;
		bottom: 0;
		flex-direction: row;
		flex-wrap: wrap;
		background: var(--button-background);
		opacity: 1;
		z-index: 999;
		right: 0;
		height: var(--mobile-button-height);
		max-height: var(--mobile-button-height);
		box-shadow: 0 0 0.6125rem rgba(0, 0, 0, 0.5);
	}*/
	
	#footer-logo-wrapper {
		order: 2;
		margin-bottom: 0.3125rem;
	}
	
	/*body:not([data-controller="index.index"]) #footer-logo-wrapper {
		order: -1;
		margin-bottom: 0;
	}*/
}
/* END footer.css */

/* START global.css */
:root {
  interpolate-size: allow-keywords;
}

* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 100%;
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 100%;
    color: #000;
	color: var(--body-font);
    /*display: table;*/
	background: var(--main-background);
}

#background,
#background-old {
    width: 100%;
    height: 100%;
    background-color: #fff;
	background-color: var(--main-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: -moz-element(#result-image);
    position: fixed;
    filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+DQogIDxkZWZzPg0KICAgIDxmaWx0ZXIgaWQ9ImJsdXIiIHg9IjAiIHk9IjAiPg0KICAgICAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjYiIC8+DQogICAgPC9maWx0ZXI+DQogIDwvZGVmcz4NCjwvc3ZnPg==#blur);
    filter: blur(0.5rem);
    -webkit-filter: blur(0.5rem);
    -moz-filter: blur(0.5rem);
    -o-filter: blur(0.5rem);
    -ms-filter: blur(0.5rem);
	padding: 0.5rem;
	left: -0.5rem;
}

#background-old {
	z-index: -1;
}

#background {
	z-index: -2;
}

h1,
a {
	color: #2E51A2;
	color: var(--highlight);
}

a {
    text-decoration: none;
}

@media (pointer: fine) {
	a:hover {
		color: #111f3f;
		color: var(--highlight-hover);
	}
}

a:active {
    color: #111f3f;
	color: var(--highlight-hover);
}

a:active, 
a:focus, 
input, 
textarea, 
button{ 
    outline-style:none;
    outline-width:0;
    outline: none; 
}

a, 
textarea, 
input, 
select, 
.inline-form-inner button, 
input[type="checkbox"]+label, 
input[type="radio"]+label { 
    border: none;
    text-decoration: none;
    border-radius: 0;
    outline-style:none;
    outline-width:0;
    outline: none; 
}

.clearfix::after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.left {
    float: left;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.right {
    float: right;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.valign:before {
    content: '';
    display: inline-block;
    height: 100%;
    max-height: 100%;
    vertical-align: middle;
    font-size: 0;
}

.valign {
    display: inline-block;
    vertical-align: middle;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}

.valign > * {
    display: inline-block;
    vertical-align: middle;
}

.halign {
    margin: auto auto;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inline-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

.inline-flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.inline-flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#page {
    width: 100%;
    min-height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
    background: rgba(255,255,255, 0.85);
	background: var(--page-overlay);
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
}

#page-inner,
#page-loading {
	width: 100%;
	flex: 1;
	align-content: center;
}

#page-inner,
#background,
#footer {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

body.loaded #page-inner,
body.loaded #background,
body.loaded #footer {
	opacity: 1;
}

#page-loading {
	display: none;
	text-align: center;
}

#page-loading > svg,
#page-loading > img {
	width: 15vh;
	height: 15vh;
	-webkit-animation: spin 1s ease infinite;
    animation: spin 1s ease infinite;
	box-sizing: content-box;
}

.page-subtext {
    text-align: center;
    color: #777;
	color: var(--main-font);
    font-size: 0.75rem;
    padding: 0.625rem;
}

.bold {
	font-weight: bold;
}

optgroup {
	padding: 0;
}

optgroup[label] {
	font-style: normal;
	font-weight: bold;
	color: #2E51A2;
	background: #f5f5f5;
}

body.dark optgroup[label] {
	color: #FFF;
	background: #333;
}

optgroup > * {
	color: var(--highlight);
	padding-left: 0.625rem;
}

.page-title {
    color: #2E51A2;
    color: var(--highlight);
    padding: 0.625rem;
    margin-bottom: 1.25rem;
    border-bottom: 0.0625rem solid #d9d9d9;
    border-bottom: 0.0625rem solid var(--main-border);
}

.page-box {
	margin: 1.25rem 0;
	background: #f5f5f5;
	background: var(--faded-background);
	border-radius: 0.625rem;
}

/*START MAL-FORM*/

.inline-form {
    background: #2E51A2;
	background: var(--form-background);
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    border: 0.0625rem solid #1e3872;
	border: 0.0625rem solid var(--form-border);
    border-left: 0;
    border-right: 0;
}

.inline-form-inner,
.inline-form-wrapper,
.inline-form-group {
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    width: 100%;
    max-width: 93.75rem;
    margin: auto auto;
}

.inline-form-inner > * ,
.inline-form-wrapper > *,
.inline-form-group > * {
    -webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
}

.inline-form-inner > *:not(:first-child),
.inline-form-inner > *:not(:first-child),
.inline-form-inner > .inline-form-group:not(:first-child) > *,
.inline-form-inner > .inline-form-group:first-child > *:not(:first-child) {
    /*border-left: 0.0625rem solid #d9d9d9;
	border-left: 0.0625rem solid var(--main-border);*/
}

.inline-form-inner > .inline-form-inner,
.inline-form-inner > .inline-form-inner-wrapper {
	border-left: none;
}

.inline-form-inner > *:not(:last-child),
.inline-form-group > *:not(:last-child) {
    border-right: 0;
}

.inline-form-inner {
    border: solid 0.3125rem transparent;
	border-top: 0;
	border-bottom: 0;
	box-sizing: border-box;
}

#spin-form-options .options-title {
    font-size: 2rem;
    color: #FFF;
	color: var(--form-font);
    padding: 0.625rem;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

#spin-form-options-dates {
    list-style: none; 
    font-size: 0;
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
}

#spin-form-options-dates > .inline-form-inner > *:not(.season-dropdown) {
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#spin-form-options-dates > .inline-form-inner > .inline-form-group  > * {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#spin-form-options-dates > .inline-form-inner > .inline-form-group > select {
    min-width: 8.75rem;
}

/*#spin-form-options-episodes > *:not(:first-child),
#spin-form-options-dates > .inline-form-inner > .inline-form-group  > *:not(:first-child) {
    border-left: 0.0625rem solid #d9d9d9;
	border-left: 0.0625rem solid var(--main-border);
}*/

#spin-form-options-episodes > *:not(:first-child),
#spin-form-options-dates > .inline-form-inner > .inline-form-group > *:not(:first-child) {
    border-right: 0;
}

.inline-form-inner > input.chk-box:first-child + *,
.inline-form-group > input.chk-box:first-child + * {
    /*border-left: 0.0625rem solid #1e3872 !important;
	border-left: 0.0625rem solid var(--accent-border) !important;*/
}

/*.inline-form-inner > input.chk-box:first-child + *,
.inline-form-group > input.chk-box:first-child + * {
	border-radius: 1vh 0 0 1vh;
}

.inline-form-inner > input.chk-box:last-of-type + *,
.inline-form-group > input.chk-box:last-of-type + * {
	border-radius: 0 1vh 1vh 0;
}*/

#spin-form-options-dates > .inline-form-inner > .inline-form-group .from-input+label,
#spin-form-options-dates >.inline-form-inner > .inline-form-group .to-input+label {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    white-space: nowrap;
}

#spin-form-options-episodes {

}

#spin-form-options-genres {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    list-style: none; 
    font-size: 0;
	flex-wrap: wrap;
}

#spin-form-options-genres > li {
    font-size: 1rem;
	border: 0;
	width: 20%;
	display: inline-block;
	-webkit-flex: 0 0 20%;
	flex: 0 0 20%;
	overflow: hidden;
	align-content: center;
}

#spin-form-options-genres > li > label {
	border: 0;
}

#spin-form-options-genres label .text {
	text-overflow: ellipsis;
	overflow: hidden;
}

#spin-form-options-genres .chk-box.exclude:checked + .chk .text {
	color: #A12F31;
	color: var(--checkbox);
}

#spin-form-options-genres .chk-box.exclude:checked + .chk .box {
	background: #A12F31;
	background: var(--checkbox);
	height: 0.3125rem;
	margin: 0.46875rem 0;
	border-radius: 0.3125rem;
}

#spin-button-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-width: 25%;
    border-left: 0 !important;
}

#spin-form-submit-loading,
#spin-form-submit-button {
	display: none;
	border-radius: 0 1.75rem 1.75rem 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#spin-form-submit-loading.active,
#spin-form-submit-button.active {
	display: flex;
}

#spin-form-submit-loading .leek {
	padding: 0.8rem;
	max-height: 100%;
	box-sizing: border-box;
	-webkit-animation: spin 1s ease infinite;
	animation: spin 1s ease infinite;
}

#spin-form select.type-select.inactive {
	display: none;
}

.datepicker-wrapper {
	position: relative;
	display: -webkit-box;
    display: -ms-flexbox;  
	display: flex;
	min-width: 300px;
}

.datepicker-wrapper > input {
	width: 100%;
	border-left: 0;
}

.datepicker-wrapper > input::placeholder {
	color: var(--button-font);
	opacity: 0.5;
}

.datepicker-wrapper > label.chk {
	/*border-right: 0.0625rem solid var(--main-border);*/
}

.ui-datepicker {
	padding: 0.625rem;
	padding-top: 0;
	display: none;
	/*border: 0.0625rem solid #1E3872;
	border: 0.0625rem solid var(--accent-border);*/
	border: none;
	/*border-top: 0.0625rem solid var(--main-border);*/
	background: #FFF;
	background: var(--input-background);
	/*margin-top: 0.3125rem;*/
	font-size: 1rem;
	min-width: 100%;
	box-sizing: border-box;
	border-radius: 0 0 0.6125rem 0.6125rem;
	/*margin-top: 0.3125rem;*/
	box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.25);
}

.ui-datepicker-header {
	background: #2E51A2;
	background: var(--accent-background);
	margin-left: -0.625rem;
	margin-right: -0.625rem;
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	border-bottom: 0.0625rem solid #1E3872;
	border-bottom: 0.0625rem solid var(--accent-border);
	/*border-radius: 0.6125rem 0.6125rem 0 0;*/
}

.ui-datepicker-header > *,
.ui-datepicker-title > *,
#spin-form-options .ui-datepicker-title > select {
	display: inline-block;
	font-size: 0.875rem;
	padding: 0.3125rem;
	height: auto;
	min-height: 0;
	margin-left: 0.625rem;
	border-radius: 0.3125rem;
}

#spin-form-options .ui-datepicker-title > select option{
	color: var(--input-font);
}

.ui-datepicker-title {
	margin: 0;
}

.ui-datepicker-prev,
.ui-datepicker-next  {
	cursor: pointer;
	color: #FFF;
	color: var(--button-font);
	user-select: none;
}

.ui-datepicker-prev {
	order: 0;
}

.ui-datepicker-next {
	order: 4;
}

.ui-datepicker-calendar {
	margin-left: -0.3125rem;
	min-width: 100%;
	text-align: center;
}

.ui-datepicker-calendar thead {
}

.ui-datepicker-calendar th {
	color: #777;
	color: var(--main-font);
	padding: 0.3125rem;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
	padding: 0.3125rem;
	margin-left: 0.3125rem;
	margin-top: 0.3125rem;
	width: 1.25rem;
	height: 1.25rem;
	text-align: center;
	display: inline-block;
}

.ui-datepicker-other-month a {
	color: #777;
	color: var(--main-font);
}

.ui-datepicker-unselectable span,
.ui-datepicker-disabled span {
	color: #FF6365;
	color: var(--disabled-font);
	opacity: 0.5;
}

@media (pointer: fine) {
	.ui-datepicker-calendar td a:hover {
		border-radius: 0.3125rem;
		font-weight: bold;
		color: #FFF;
		color: var(--date-font);
	}
}

.ui-datepicker-calendar td a:active,
.ui-datepicker-current-day a{
	border-radius: 0.3125rem;
	font-weight: bold;
	color: #FFF;
	color: var(--date-font);
}

@media (pointer: fine) {
	.ui-datepicker-calendar td a:hover {
		background: #2E51A2;
		background: var(--date-background);
	}
}

.ui-datepicker-calendar td a:active,
.ui-datepicker-current-day a {
	background: #2E51A2;
	background: var(--date-background);
}

#spin-form-options-user {
	background: var(--input-background);
	border-radius: 1.75rem 0 0 1.75rem;
	position: relative;
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-flex: 1 1 5%;
	flex: 1 1 5%;
}

#spin-form-options-user * {
	border-color: var(--accent-border);
}

#spin-form-options-user.error * {
	border-color: #f48f02;
}

#spin-form-options-user > * {
	/*border-right: 0;*/
}

#spin-form-options-user > input {
	border-radius: 1.75rem 0 0 1.75rem;
	-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#spin-form-options-user .kitsu-name-help {
	display: none;
}

#spin-form-options-user .kitsu-name-help-info {
	position: absolute;
	bottom: 100%;
	right: 0;
	background: #2E51A2;
	background: var(--accent-background);
	border: 0.0625rem solid #1e3872;
	border: 0.0625rem solid var(--accent-border);
	padding: 0.625rem;
	color: #FFF;
	font-size: 0.875rem;
	display: none;
	z-index: 9999;
	margin-bottom: 0.625rem;
	border-radius: 0.625rem;
	box-shadow: 0 0 0.625rem rgba(0,0,0,0.25)
}

#spin-form-options-user button.kitsu-name-help-button,
#spin-form-options-user button.kitsu-name-help-button:hover,
#spin-form-options-user button.kitsu-name-help-button:active,
#spin-form-options-user .name-warning  {
    color: #2E51A2;
	color: var(--highlight);
    background: #FFF;
	background: var(--input-background);
    border-left: 0;
    border-right: 0;
    padding: 0.3125rem;
    padding-right: 0.625rem;
}

@media (pointer: fine) {
	#spin-form-options-user button.kitsu-name-help-button:hover {
		color: #1e3872;
		color: var(--accent-font);
	}
}

#spin-form-options-user button.kitsu-name-help-button:active {
	color: #1e3872;
	color: var(--accent-font);
}

#spin-form-options-user .kitsu-name-help-example {
	margin: 0.625rem -0.625rem;
    padding: 0.3125rem 0.625rem;
    display: block;
	background: #1e3872;
	background: var(--other-background);
	text-align: center;
	font-size: 0;
	color: #FFF;
}

#spin-form-options-user .kitsu-name-help-example > span {
	font-size: 0.875rem;
	display: inline-block;
	padding: 0.3125rem;
}

#spin-form-options-user .kitsu-name-help-example > span:first-child {
	padding-right: 0;
}

#spin-form-options-user .kitsu-name-help-example .kitsu-name-help-slug:not(:empty) {
	background: #2E51A2;
	background: var(--accent-background);
}

#spin-form-options-user .name-warning {
	display: none;
}

#spin-form-options-user.error .name-warning {
	color: #f48f02;
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	padding-right: 0;
	padding-left: 0.625rem;
	border-radius: 1.75rem 0 0 1.75rem;
}

#spin-form-options-user.error input[name="user"] {
	border-left: 0;
}

#spin-form:not([data-current-site="kitsu"]) #spin-form-options-user.error input[name="user"],
#spin-form[data-current-site="kitsu"] #spin-form-options-user.error button.kitsu-name-help-button {
	padding-left: 0.625rem;
}

#spin-form[data-current-status="random"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
#spin-form[data-current-status="trending"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
#spin-form[data-current-status="popular"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
#spin-form[data-current-status="new"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn {
	border-left: 0;
	border-radius: 1.75rem 0 0 1.75rem;
}

#spin-form[data-current-status="random"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn.active,
#spin-form[data-current-status="trending"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn.active,
#spin-form[data-current-status="popular"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn.active,
#spin-form[data-current-status="new"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn.active {
	border-left: 0;
	border-radius: 1.75rem 0 0 0;
}

/*START RESULTS*/

#result {
    width: 100%;
    /*z-index: 9;*/
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
	overflow: hidden;
}

#result > * {
    width: 100%;
    max-width: 62.5rem;
    margin: auto auto;
}

#result-anime-wrapper-outer {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	vertical-align: middle;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	margin: 0 0.625rem;
}

#result-anime-wrapper-outer.swiping {
	transition: transform 0.1s;
}

#result-anime-wrapper-outer.inactive {
	display: none;
}

#result-anime-wrapper {
	-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.result-title-wrapper {
	flex: 1;
}

button.result-anime-button.active,
button.result-anime-button.spin {
	visibility: visible;
}

.result-anime button.result-anime-button {
	display: none;
}

button.result-anime-button {
	font-size: 5rem;
	color: #c3cde5;
	color: var(--tertiary-font);
	vertical-align: middle;
	border: 0;
	background: 0;
	cursor: pointer;
	visibility: hidden;
	user-select: none;
	flex-shrink: 0;
	transition: color 0.25s ease-in-out;
}

button.result-anime-button.prev {
	margin-right: 1.25rem;
}

button.result-anime-button.next {
	margin-left: 1.25rem;
}

@media (pointer: fine) {
	button.result-anime-button:hover {
		color: #2E51A2;
		color: var(--highlight);
	}
}

button.result-anime-button:active {
	color: #2E51A2;
	color: var(--highlight);
}

.result-type {
    padding: 0.3125rem 0.625rem;
	padding-bottom: 0.125rem;
	margin: 0.3125rem 0.625rem;
	margin-left: 0;
	background: #2E51A2;
	color: #FFF;
	border-radius: 0.3125rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

.result-type > * {
	color: #FFF;
}

.result-type[data-result-type="tv"] {
	background: var(--color-tv);
}

.result-type[data-result-type="doujin"] {
	background: var(--color-doujin);
}

.result-type[data-result-type="ova"] {
	background: var(--color-ova);
}

.result-type[data-result-type="manga"] {
	background: var(--color-manga);
}

.result-type[data-result-type="movie"] {
	background: var(--color-movie);
}

.result-type[data-result-type="manhua"] {
	background: var(--color-manhua);
}

.result-type[data-result-type="special"] {
	background: var(--color-special);
}

.result-type[data-result-type="manhwa"] {
	background: var(--color-manhwa);
}

.result-type[data-result-type="novel"] {
	background: var(--color-novel);
}

.result-type[data-result-type="ona"] {
	background: var(--color-ona);
}

.result-type[data-result-type="music"] {
	background: var(--color-music);
	color: #656565;
}

.result-type[data-result-type="oel"] {
	background: var(--color-oel);
}

.result-type[data-result-type="oneshot"] {
	background: var(--color-oneshot);
}

.result-type[data-result-type="unknown"] {
	background: var(--color-unknown);
}

.result-type.full-size {
	padding: 0.625rem;
}

.result-type .result-status {
	margin-left: -0.625rem;
	margin-right: -0.625rem;
	margin-bottom: -0.3125rem;
	margin-top: 0.125rem;
	border-radius: 0.3125rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding: 0.125rem;
	font-size: 0.75rem;
}

.result-type .result-status.plan-to-watch {
	background: var(--color-plan-to-watch);
}

.result-type .result-status.dropped {
	background: var(--color-dropped);
}

.result-type .result-status.completed {
	background: var(--color-completed);
}

.result-type .result-status.on-hold {
	background: var(--color-on-hold);
}

.result-type .result-status.watching {
	background: var(--color-watching);
}

.result-type .result-status.repeating {
	background: var(--color-repeating);
}

.result-anime .result-content > * {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-overflow: ellipsis;
    width: auto;
    box-sizing: border-box;
    list-style: none;
}

.result-image-wrapper-outer {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	vertical-align: middle;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	-webkit-flex: 0 1 auto; 
	flex: 0 1 auto;
    margin: 1.25rem 0;
	margin-right: 1.25rem;
    position: relative;
	max-width: 300px;
}

.result-image-wrapper {
    position: relative;
    min-width: 150px;
    max-width: 300px;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}


.result-image-wrapper-inner  {
    font-size: 0;
}

.result-image-wrapper img {
    height: auto;
    max-height: 100%;
    width: 300px;
    max-width: 100%;
    border: 0.0625rem solid #2E51A2;
	border: 0.0625rem solid var(--other-border);
    background: #ECECEC none repeat scroll 0% 0%;
    box-sizing: border-box;
	border-radius: 0.625rem;
}

.result-info {
	margin: 1.25rem 0;
    list-style: none;
}

.result-info > li{
    padding: 5px 0px;
    padding: 0.3125rem 0rem;
	color: var(--main-font);
	font-size: 0.9rem;
}

.result-info > li > span:first-child {
	font-weight: bold;
	color: #2E51A2;
	color: var(--highlight);
	display: block;
	margin-bottom: 0.3125rem;
}

.result-img-rating {
	font-size: 1rem;
	position: absolute;
	margin: 0.625rem;
	margin-top: 0.625rem;
	padding: 0.625rem;
	background: rgba(0,0,0,0.75);
	color: #fff;
	border-radius: 0.3125rem;
	opacity: ;
	margin-top: -50px;
	left: 0;
	font-weight: bold;
}

.result-img-rating.rx,
.result-img-rating.nsfw {
	background: rgba(255,0,0,0.75);
}

.result-img-rating .result-img-rating-guide {
	display: none;
	margin-left: 0.625rem;
	font-weight: normal;
	font-size: 0.9rem;
	color: #fff;
}

.result-img-rating:hover .result-img-rating-guide,
.result-img-rating:hover .result-img-rating-guide {
	display: inline-block;
}

.result-synopsis,
.result-trailer {
    display: none;
}

.result-trailer.active {
	display: block;
}

.result-trailer .result-trailer-video {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	text-align: center;
	width: 100%;
	position: relative;
	aspect-ratio: 16 / 9;
}

.result-trailer.active .result-trailer-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.result-synopsis-button,
.result-trailer-button {
	color: #2E51A2;
	color: var(--highlight);
	font-weight: bold;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

.result-synopsis-button {
	padding: 0.3125rem !important;
}

.result-trailer-button {
	padding: 0.625rem;
	font-size: 1.25rem;
}

.result-title {
	padding-bottom: 0.625rem;
    border-bottom: 0.0625rem solid #ced5e5;
	border-bottom: 0.0625rem solid var(--tertiary-border);
    margin-bottom: 0.625rem;
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	flex: 0 0 100%;
	order: -1;
	margin-top: 0.625rem;
	margin-bottom: 0;
}

.result-title > * {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	flex: 1;
}

.result-title > * > * {
	display: inline-block;
}

.result-title .result-title-right {
  flex-grow: 0;
  /*align-self: flex-end;*/
}

.result-title .spun-rank {
	background: var(--trans-faded-background);
	color: var(--highlight-faded);
	padding: 0.6125rem;
	font-weight: bold;
	border-radius: 0.3125rem;
	font-size: 1rem;
	white-space: nowrap;
}

.result-title .spun-rank:hover,
.result-title .spun-rank:active {
	color: var(--highlight);
}

.result-title .spun-rank[data-rank="3"],
.result-title .spun-rank[data-rank="2"],
.result-title .spun-rank[data-rank="1"] {
	background: none;
}

.result-title .spun-rank[data-rank="3"] {
	border: 2px solid var(--color-bronze);
	color: var(--color-bronze);
}

.result-title .spun-rank[data-rank="2"] {
	border: 2px solid var(--color-silver);
	color: var(--color-silver);
}

.result-title .spun-rank[data-rank="1"] {
	border: 2px solid var(--color-gold);
	color: var(--color-gold);
}

.result-title .title-top a{
    font-size: 2rem;
    color: #2E51A2;
	color: var(--highlight);
    text-decoration: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
}

.result-title .title-jp{
    display: block;
	color: #777;
	color: var(--main-font);
	font-size: 0.875rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
}

.result-title-info .result-title-count .result-title-count-percent {
	display: none;
	position: absolute;
	background: var(--button-background);
	padding: 0.3125rem 0.625rem;
	border-radius: 0.3125rem;
	bottom: 100%;
	right: 0;
	text-wrap: nowrap;
	color: var(--button-font);
	font-size: 0.8rem;
}

.result-title-info li:hover .result-title-count .result-title-count-progress:not(:last-child), 
.result-title-info li:active .result-title-count .result-title-count-progress:not(:last-child) {
}

.result-title-info li:hover .result-title-count .result-title-count-percent, 
.result-title-info li:active .result-title-count .result-title-count-percent {
	display: block;
}

.result-title-info {
	margin-top: 0.3125rem;
	color: var(--main-font);
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	justify-content: space-between;
	font-size: 1rem;
}

.result-title-info > ul {
	list-style: none;
	flex-wrap: wrap;
}

.result-title-info > ul > li:not(:first-child) {
	margin-left: 0.625rem;
}

.result-title-info .result-title-count {
	color: var(--highlight);
	font-weight: bold;
	position: relative;
}

.result-studios > ul > li {
  display: inline;
}

.result-stream-wrapper {
	list-style: none;
	/*display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	flex-wrap: wrap;*/
	margin-left: -0.3125rem;
}

.result-stream-wrapper > li {
	margin: 0.3125rem 0;
	margin-left: 0.3125rem;
	display: inline-block;
	margin-bottom: 0.625rem;
	/*-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;*/
}

.result-stream {
	font-weight: bold;
	font-size: 0.875rem;
	color: #FFF;
	background: #2E51A2;
	padding: 0.3125rem;
	border-radius: 0.3125rem;
	cursor: pointer;
	/*width: 100%;*/
	white-space: nowrap;
}

.result-stream:hover,
.result-stream:active {
	color: #FFF;
	box-shadow:inset 0 0 0 1.25rem rgba(0,0,0,0.25);
}

.result-stream.adult-swim,
#spin-form-options-streamer .adult-swim .box {
	background: #000000;
}

#spin-form-options-streamer .adult-swim .text {
	color: #000000;
}

.result-stream.bilibili-tv,
#spin-form-options-streamer .bilibili-tv .box {
	background: #06B6F2;
}

#spin-form-options-streamer .bilibili-tv .text {
	color: #06B6F2;
}

.result-stream.crunchyroll,
#spin-form-options-streamer .crunchyroll .box {
	background: #df6300;
}

#spin-form-options-streamer .crunchyroll .text {
	color: #df6300;
}

.result-stream.hulu,
#spin-form-options-streamer .hulu .box {
	background: #72DE93;
}

#spin-form-options-streamer .hulu .text {
	color: #72DE93;
}

.result-stream.hoopla,
#spin-form-options-streamer .hoopla .box {
	background: #0D69C0;
}

#spin-form-options-streamer .hoopla .text {
	color: #0D69C0;
}

.result-stream.iq,
#spin-form-options-streamer .iq .box {
	background: #00DC5A;
}

#spin-form-options-streamer .iq .text {
	color: #00DC5A;
}

.result-stream.twitter {
	background: #4AB3F4;
}

.result-stream.amazon-prime-video,
#spin-form-options-streamer .amazon-prime-video .box {
	background: #FF6200;
}

#spin-form-options-streamer .amazon-prime-video .text {
	color: #FF6200;
}

.result-stream.hidive,
#spin-form-options-streamer .hidive .box {
	background: #00AEF0;
}

#spin-form-options-streamer .hidive .text {
	color: #00AEF0;
}

.result-stream.facebook {
	background: #29487D;
}

.result-stream.youtube,
#spin-form-options-streamer .youtube .box,
.result-stream.viz {
	background: #F00;
}

#spin-form-options-streamer .youtube .text {
	color: #F00;
}

.result-stream.tubi-tv,
#spin-form-options-streamer .tubi-tv .box {
	background: #ffff13;
	color: #656565;
}

#spin-form-options-streamer .tubi-tv .text {
	color: #ffff13;
}

.result-stream.netflix,
#spin-form-options-streamer .netflix .box {
	background: #E50914;
}

#spin-form-options-streamer .netflix .text {
	color: #E50914;
}

.result-stream.retrocrush,
#spin-form-options-streamer .retrocrush .box {
	background: #FFFF01;
	color: #656565;
}

#spin-form-options-streamer .retrocrush .text {
	color: #FFFF01;
}

.result-synopsis-title {
	margin-bottom: 0.625rem;
	font-size: 1.5rem;
}

.result-studios > ul {
  list-style: none;
}

.result-studios > ul > li:not(:last-child)::after {
  content: ", ";
}

.result-anime.active-result:not(:empty),
.result-anime.active-result:not(:empty) .result-content {
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.625rem;
	flex-wrap: wrap;
}

#result-content .result-list-image-wrapper {
	display: none;
}

#result-loading {
    display: none;
    margin: 1.25rem 0;
    box-sizing: border-box;
}

#result-loading-message {
	display: none;
	text-align: center;
	font-size: 1.25rem;
	color: #2E51A2;
	color: var(--highlight);
	margin: 1.25rem;
}

#result-loading-message .result-loading-message-inner {
	display: block;
}

#result-loading-message .result-loading-message-inner:not(.active) {
	display: none;
}

#result-error {
    padding: 0.625rem;
    margin: 0.625rem;
    text-align: center;
    box-sizing: border-box;
	transform: translateY(100px);
	animation: moveUp 0.65s ease forwards;
}

#result-greeting {
}

.spin-greeting {
    padding: 10px 0;
    padding: 0.625rem 0;
    color: #2E51A2;
	color: var(--highlight);
    text-align: center;
    box-sizing: border-box;
	margin-top: 1.25rem;
	line-height: 3rem;
}

.spin-greeting.inactive {
	display: none;
}

.spin-greeting > * {
	font-size: 2rem;
	display: inline-block;
	vertical-align: middle;
}

.spin-greeting > img,
.spin-greeting > svg {
	height: 4rem;
	width: auto;
	margin-right: 0.6125rem;
	cursor: pointer;
}

.spin-greeting > svg .domain {
	display: none;
}

body.dark #spin-svg-logo .background {
	fill: #26314c;
	stroke: #26314c;
}

body.dark #spin-svg-logo .domain > * {
	fill: #1f232d;
}

#result-greeting #spin-svg-logo {
	animation: spin 1s ease-out forwards;
}

.spin-debug {
	color: #777;
	color: var(--main-font);
	font-size: 0.75rem;
	list-style: none;
}

.spin-debug > * {
	display: inline-block;
	padding: 0.3125rem;
	margin-left: -0.3125rem;
	border-left: 0.0625rem solid #d9d9d9;
	border-left: 0.0625rem solid var(--main-border);
}

.spin-debug > *:first-child {
	border-left: 0;
}

.result-copy-link {
	cursor: pointer;
    background: none;
    border: none;
	color: #a0b5e5;
    color: var(--highlight-faded);
    padding: 0.3125rem;
	padding-left: 0.3125rem;
	-webkit-align-self: flex-start;
    align-self: flex-start;
	font-size: 0.875rem !important;
}

.result-authors > ul {
  list-style: none;
  display: flex;
  /*padding: 0.3125rem;
  background: var(--trans-faded-background);
  border-radius: 1vh;*/
  flex-wrap: wrap;
}

.result-authors > ul > li:not(:last-child) {
  margin-right: 0.6125rem;
}

.result-author-block {
  display: flex;
  align-items: center;
  padding: 0.3125rem 0;
}

.result-author-img {
  overflow: hidden;
  border-radius: 50%;
  width: 1.75rem;
  min-width: 1.75rem;
  max-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  max-height: 1.75rem;
  display: block;
  border: 2px solid var(--highlight);
  margin-right: 0.6215rem;
  align-items: flex-start;
  display: flex;
  justify-content: center;
}

.result-author-img img {
  width: 100%;
  max-width: 100%;
}

.result-author-name {
  font-weight: bold;
  font-size: 0.9rem;
}

.result-author-role {
  font-size: 0.75rem;
}

.result-author-info > * {
  display: block;
}

/*START RESPONSIVE*/
@media only screen and (max-width: 93.75rem) {
}

@media only screen and (max-width: 62.5rem) {
	#spin-form-options-genres > li {
		flex: 0 0 25%;
	}
	
	#spin-form-options-ranges {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
	
	.inline-form-inner.range-form {
		display: flex;
		flex-direction: row;
	}
	
	.inline-form-inner.range-form > .range-title {
		max-width: 10%;
	}
}

@media only screen and (max-width: 47.8125rem) {
    #spin-form-options-dates > .inline-form-group .from-input+label, 
	#spin-form-options-dates > .inline-form-group .to-input+label {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }
    
    #spin-form-options .options-title {
        width: 100%;
        flex: none;
        border-bottom: 0.0625rem solid #1e3872;
		border-bottom: 0.0625rem solid var(--accent-border);
    }
	
	#spin-form-options-genres > li {
		width: 25%;
	}
}

@media only screen and (max-width: 46.875rem) {
	#spin-form-options-user .kitsu-name-help-button {
		border-radius: 0 1rem 1rem 0;
	}
	
	#spin-form[data-current-status="random"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
	#spin-form[data-current-status="trending"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
	#spin-form[data-current-status="popular"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn,
	#spin-form[data-current-status="new"] #spin-form-options-user + .dropdown-wrapper .dropdown-btn 	{
		border-radius: 1rem;
	}
	
	#spin-form-options > * {
		padding-top: 0;
	}
	
	.inline-form-wrapper {
		display: block;
	}
	
    .inline-form-inner:not(.range-form) {
        display: block;
		border: 0.3125rem solid transparent;
		border-left: 0;
		border-right: 0;
    }

    .inline-form-inner > input, 
    .inline-form-inner > select, 
    .inline-form-inner > button,
	#spin-form > .inline-form-inner > .dropdown-wrapper > .dropdown-btn {
		/*border: 0.0625rem solid #1e3872 !important;
		border: 0.0625rem solid var(--accent-border) !important;*/
		border-radius: 1rem;
    }
    
    #spin-form > .inline-form-inner > *:not(:last-child), 
    #spin-form > .inline-form-inner > *:not(:first-child):not(:last-child) {
        margin-bottom: 0.625rem;
		border-radius: 1rem;
    }
    
    #spin-form-options-ranges, 
	#spin-form-options-dates {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    #spin-form-options-episodes > * {
        width: 100%;
    }
    
	#spin-form-options-genres > li {
		width: 50%;
		-webkit-flex: 0 0 50%;
		flex: 0 0 50%;
	}
	
	#spin-form-options-episodes .inline-group-title:not(:last-child),
	#spin-form-options-episode-length .inline-group-title:not(:last-child),
	#spin-form-options-other .inline-group-title:not(:last-child) {
		display: none;
	}
	
	input, 
	select, 
	.inline-form-inner button, 
	.inline-group-title,
	input[type="checkbox"]+label, 
	input[type="radio"]+label {
		padding: 0.625rem;
	}
	
	#spin-form-options-user {
		/*border-right: 0.0625rem solid #1e3872;
		border-right: 0.0625rem solid var(--accent-border);*/
	}
	
	#spin-form .inline-form-inner button.type-select {
		border-radius: 1rem;
	}
	
	#spin-form-options-button {
		border-radius: 1rem 0 0 1rem;
	}
	
	#spin-form-submit-button,
	#spin-form-submit-loading {
		border-radius: 0 1rem 1rem 0;
	}
	
	#spin-form-options-user > input {
		border-radius: 1rem;
	}
	
	#spin-form-options-user.error .name-warning {
		border-radius: 1rem 0 0 1rem;
	}
	
	.result-title {
		justify-content: center;
	}
	
	.result-anime .result-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
		-webkit-box-align: center !important;
		-ms-flex-align: center !important;
		align-items: center !important;
    }
    
    .result-image-wrapper {
        margin-right: 0;
		margin-left: 0;
        text-align: center;
    }
	
	.result-image-wrapper-outer {
		/*border-bottom: 0.0625rem solid #ced5e5;
		border-bottom: 0.0625rem solid var(--tertiary-border);*/
		max-width: 100%;
		width: 100% !important;
		margin: 0;
		margin-top: 1.25rem;
		-webkit-box-pack: space-between;
		-ms-flex-pack: space-between;
		justify-content: space-between;
	}
    
    .result-image-wrapper-inner {
        max-width: 100%;
    }
	
	.result-image-wrapper-inner img{
        max-height: 40vh;
    }
	
	.result-anime button.result-anime-button {
		display: block;
		margin: 0 1.25rem;
	}
	
	.result-anime button.result-anime-button.active,
	.result-anime button.result-anime-button.spin	{
		visibility: visible;
	}
	
	#result-anime-wrapper-outer > button.result-anime-button {
		display: none;
	}
	
	#spins-total h1 {
		font-size: 7.5rem;
		font-size: 15vw;
	}
	
    #footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    #copyright {
        text-align: center;
    }
	
	.add-link {
		margin: 0.6125rem;
		float: none;
		display: block;
	}
	
	.result-info {
		width: 100%;
	}
	
	#spin-form-submit-loading,
	#spin-form-submit-button,
	#spin-form-options-button	{
		border-radius: 0;
	}
	
	.result-info > li > span:first-child {
		display: inline;
		margin-bottom: 0;
		margin-right: 0.3125rem;
	}
	
	.result-title-info {
		font-size: 0.9rem;
	}
	
	#page-loading {
		min-height: 100vh;
		min-height: 100dvh;
	}
	
	#page-loading > svg,
	#page-loading > img {
		width: 25vh;
		height: 25vh;
	}
}

@media only screen and (max-width: 31.25rem) {
}

/* ADs, don't worry... I hate them too. */

#footer-ad {
    z-index: 9999;
    margin: auto auto;
    margin-top: 20px;
    margin-top: 1.25rem;
    display: block;
    text-align: center;
}
/* END global.css */

/* START input.css */
input, 
select, 
.inline-form-inner button, 
.inline-group-title,
input[type="checkbox"]+label, 
input[type="radio"]+label {
    padding: 20px;
    padding: 1.25rem;
    /*background: #FFF;
	background: var(--input-background);*/
	background: none;
    color: #FFF;
	color: var(--button-font);
    /*border: 0.0625rem solid #1e3872;
	border: 0.0625rem solid var(--accent-border);*/
    font-size: 1rem;
    /*height: 4.0625rem;
    min-height: 4.0625rem;*/
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
	box-sizing: border-box;
}

input::placeholder {
	color: var(--button-font);
}

input,
label,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

body.dark option {
  background: #111;
}

#spin-form-options input, 
#spin-form-options select, 
#spin-form-options .inline-form-inner button, 
#spin-form-options .inline-group-title,
#spin-form-options div > input[type="checkbox"]+label, 
#spin-form-options div > input[type="radio"]+label {
    padding: 0.6125rem;
    font-size: 0.875rem;
    /*height: 3.4375rem;
    min-height: 3.4375rem;*/
}

input[type="checkbox"]+label, 
input[type="radio"]+label,
#spin-form-options .dropwdown li >input[type="checkbox"]+label, 
#spin-form-options .dropwdown li > input[type="radio"]+label {
	padding: 0.625rem;
	font-size: 0.875rem;
	height: auto;
    min-height: auto;
}

input[type="submit"], 
.inline-form-inner button, 
select, 
input[type="checkbox"]+label, 
input[type="radio"]+label {
    cursor: pointer;
}

#spin-form-submit-loading,
input[type="submit"], 
.inline-form-inner button {
    background: #1e3872;
	background: var(--button-background);
    color: #FFF;
	color: var(--button-font);
    /*border: 0.0625rem solid #111f3f;
	border: 0.0625rem solid var(--button-border);*/
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	text-align: center;
}


@media (pointer: fine) {
	input[type="submit"]:hover,
	.inline-form-inner button:hover {
		background: #111f3f;
		background: var(--button-hover);
	}
}

input[type="submit"]:active,
.inline-form-inner button:active {
	background: #111f3f;
	background: var(--button-hover);
}

input[type="number"] {
	min-width: 0;
	max-width: none;
}

input:out-of-range,
input:invalid {
	color: var(--input-error) !important;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder ,
:-ms-input-placeholder {  
    color: #2E51A2; 
	color: var(--placeholder-font);
    opacity: 0.5;
}

.chk-box {
    display:none;
}

input[type="checkbox"] + label.chk, 
input[type="radio"] + label.chk{
    font-size: 1rem;
}

input[type="checkbox"] + label.chk.chk1, 
input[type="radio"] + label.chk{
    background: #FFF;
    color: #CCC;
    padding: 0rem 0.5rem;
}

input[type="checkbox"]:disabled + label.chk.chk1, 
input[type="radio"]:disabled + label.chk {
    background: #F5F5f5;
	background: var(--checkbox-disabled);
}

input[type="checkbox"] + label.chk .box, 
input[type="radio"] + label.chk .box {
    display: inline-block;
    vertical-align: middle;
    width: 1.25rem;
	min-width: 1.25rem;
    height: 1.25rem;
    background: #2E51A2;
	background: var(--highlight);
    opacity: 0.3;
	border-radius: 50%;
	transition: all 0.1s ease-in-out;
}

input[type="radio"] + label.chk .box{
    border-radius: 50%;
}

input[type="checkbox"] + label.chk, input[type="radio"] + label.chk{
}

input[type="checkbox"]:disabled + label.chk .box, 
input[type="radio"]:disabled + label.chk .box {
}

input[type="checkbox"] + label.chk .text, 
input[type="radio"] + label.chk .text {
    display: inline-block;
    vertical-align: middle;
    color: #2E51A2; 
	color: var(--highlight);
    opacity: 0.5;
    min-width: 3.125rem;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

input[type="checkbox"] + label.chk .box ~ .text, 
input[type="radio"] + label.chk .box ~ .text {
	padding-left: 0.625rem;
}

input[type="checkbox"]:checked + label.chk .box, 
input[type="radio"]:checked + label.chk .box {
    opacity: 1;
}

input[type="checkbox"]:checked + label.chk .text, 
input[type="radio"]:checked + label.chk .text {
    opacity: 1;
}

input[type="checkbox"]:disabled + label.chk .text, 
input[type="radio"]:disabled + label.chk .text {
    color: #CCC;
}

.range-wrapper {
	display: flex;
	align-items: center;
}

.range-wrapper > * {
	text-align: center;
}

.range-wrapper > input[type=number]::-webkit-outer-spin-button,
.range-wrapper > input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-wrapper > input[type=number]:focus::-webkit-outer-spin-button,
.range-wrapper > input[type=number]:focus::-webkit-inner-spin-button  {
	-webkit-appearance: initial;
}

@media (pointer: fine) {
	.range-wrapper > input[type=number]:focus::-webkit-outer-spin-button,
	.range-wrapper > input[type=number]:focus::-webkit-inner-spin-button  {
		-webkit-appearance: initial;
	}
}

.range-wrapper > input[type=number] {
	width: 5rem;
	opacity: 0.5;
	color: var(--button-font);
    -moz-appearance:textfield;
	border-bottom: 0.0625rem solid transparent;
}

#spin-form-options .range-wrapper > input[type=number] {
	font-size: 0.8rem;
}

.range-wrapper > input[type=number]:focus {
	opacity: 1;
    -moz-appearance:initial;
	border-bottom: 0.0625rem solid #FFF;
}

@media (pointer: fine) {
	.range-wrapper > input[type=number]:hover {
		opacity: 1;
		-moz-appearance:initial;
		border-bottom: 0.0625rem solid #FFF;
	}
}


div.range-slider {
	width: 100%;
	height: 0.4rem;
	position: relative;
	margin: 0.3125rem 0.625rem;
	border-radius: 0.3125rem;
	z-index: 1;
	cursor: pointer;
	background: var(--range-background);
	-webkit-tap-highlight-color: transparent;
}

div.range-slider * {
	-webkit-tap-highlight-color: transparent;
}

div.range-slider .handle {
	position: absolute;
	width: 1rem;
	height: 1rem;
	background: var(--range-handle);
	border-radius: 50%;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: border 0.25s linear;
	box-sizing: border-box;
	z-index: 3;
	transition: left 0.05s linear, 
		right 0.05s linear, 
		height 0.1s ease-in-out, 
		width 0.1s ease-in-out, 
		border 0.1s ease-in-out, 
		margin 0.1s ease-in-out;
	border: 0.0625rem solid var(--range-handle-border);
}

div.range-slider .handle:active,
div .range-slider .handle.active-handle {
	width: 1.5rem;
	height: 1.5rem;
	border: 0.125rem solid #FFF;
	background: var(--range-handle-hover);
}

@media (pointer: fine) {
	div.range-slider .handle:hover {
		width: 1.5rem;
		height: 1.5rem;
		border: 0.125rem solid #FFF;
		background: var(--range-handle-hover);
	}
}

div.range-slider .handle:first-of-type:not(:last-of-type):active,
div .range-slider .handle:first-of-type:not(:last-of-type).active-handle {
	margin-left: -0.75rem;
}

@media (pointer: fine) {
	div.range-slider .handle:first-of-type:not(:last-of-type):hover {
		margin-left: -0.75rem;
	}
}

div.range-slider .handle:first-of-type:not(:last-of-type) {
	left: 0;
	margin-left: -0.5rem;
}

div.range-slider .handle:last-of-type {
	right: 0;
	margin-right: -0.5rem;
	z-index: 4;
}

div.range-slider .handle:last-of-type:active,
div .range-slider .handle:last-of-type.active-handle {
	margin-right: -0.75rem;
}

@media (pointer: fine) {
	div.range-slider .handle:last-of-type:hover {
		margin-right: -0.75rem;
	}
}

div.range-slider .range {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--range-range);
	z-index: 2;
	border-radius: 0.3125rem;
	transition: left 0.05s linear, right 0.05s linear;
}

div .range-slider .tooltip {
	position: absolute;
	bottom: 100%;
	padding: 0.3125rem;
	background: var(--button-background);
	border-radius: 0.3125rem;
	margin-bottom: 0.625rem;
	color: var(--button-font);
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	min-width: 3rem;
	margin-left: -1.5rem;
	text-align: center;
	box-sizing: border-box;
}

#spin-form-options-episode-length .range-slider .tooltip {
	white-space: nowrap;
}

div .range-slider.sliding .tooltip {
	opacity: 1;
	transition: opacity 0.25s ease-in-out, left 0.05s linear, color 0.25s linear;
}

@media (pointer: fine) {
	div .range-slider:hover .tooltip {
		opacity: 1;
		transition: opacity 0.25s ease-in-out, left 0.05s linear, color 0.25s linear;
	}
}

div.range-slider + input {
	text-align: left;
}

input:has(+div.range-slider) {
	text-align: right;
}

.inline-form-inner.range-form {
	flex-direction: column;
	align-items: center;
}

.inline-form-inner.range-form > .range-title {
	text-align: center;
	opacity: 0.5;
	padding: 0.3125rem;
	display: block;
	margin-top: -0.625rem;
	font-size: 0.9rem;
}

@media only screen and (max-width: 62.5rem) {
	#spin-form-options-ranges {
		margin: 0.625rem 0 !important;
	}
	
	.inline-form-inner.range-form > .range-title {
		font-size: 0.8rem;
	}
	
	/*.inline-form-inner.range-form {
		flex-direction: row-reverse;
	}
	
	.inline-form-inner.range-form > .range-title {
		text-align: left;
		margin-top: 0;
	}*/
}
/* END input.css */

/* START nav.css */
.nav {
    color: #777;
	color: var(--main-font);
    list-style: none;
    font-size: 0;
}

.nav > * {
    font-size: 1rem;
    padding: 0.625rem;
}

.nav a {
    text-decoration: none;
    color: #777;
	color: var(--main-font);
}

.nav a:hover, 
.nav a:active {
    color: #1e3872;
	color: var(--main-font-hover);
}
/* END nav.css */

/* START throbber.css */
.throbber::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.throbber {
    margin: auto auto;
    height: 100%;
    width: 100%;
    text-align: center;
}

.throbber::after {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    -webkit-animation: rotate 0.6s linear infinite;
    animation: rotate 0.6s linear infinite;
    border-radius: 100%;
    border-style: solid;
    content: '';
}

.throbber-dark::after {
    border-top-color:  #6a6a6a !important;
    border-right-color:  #6a6a6a !important;
    border-bottom-color:  #D4D4DB !important;
    border-left-color:  #D4D4DB !important;
}

.throbber-red::after {
    border-top-color:  #9E0B0F !important;
    border-right-color:  #9E0B0F !important;
    border-bottom-color:  #D4D4DB !important;
    border-left-color:  #D4D4DB !important;
}


.throbber-light::after {
    border-top-color:  #FFFFFF !important;
    border-right-color:  #FFFFFF !important;
    border-bottom-color:  #aeaeae !important;
    border-left-color:  #aeaeae !important;
}

.throbber-large::after {
    border-width: 0.125rem;
    width: 3.75rem;
    height: 3.75rem;
}

.throbber-medium::after {
    border-width: 0.125rem;
    width: 2.5rem;
    height: 2.5rem;
}

.throbber-small::after {
    border-width: 0.0625rem;
    border-width: 0.075rem;
    width: 1.25rem;
    height: 1.25rem;
}

@keyframes rotate {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
}
/* END throbber.css */

/* START vars.css */
body {
	--highlight: #2E51A2;
	--highlight-faded: #a0b5e5;
	--highlight-hover: #111f3f;
	
	--main-border: #e9e9e9;
	--accent-border: #1e3872;
	--form-border: #1e3872;
	--button-border: #111f3f;
	--tertiary-border: #ced5e5;
	--other-border: #2E51A2;
	--faded-border: #d9d9d9;
	
	--main-background: #fff;
	--accent-background: #2E51A2;
	--input-background: #fff;
	--button-background: #1e3872;
	--tertiary-background: #d9d9d9;
	--form-background: #2E51A2;
	--box-background: #2E51A2;
	--faded-background: #f5f5f5;
	--other-background: #1e3872;
	--date-background: #2E51A2;
	--trans-faded-background: rgba(0,0,0,0.05);
	
	--range-background: rgba(255,255,255,0.1);
	--range-range: #1e3872b5;
	--range-handle: #1e3872;
	--range-handle-hover: #111f3f;
	--range-handle-border: rgba(0,0,0,0.1);
	
	--dropdown-button-background: rgba(255,255,255,0.1);
	--dropdown-button-border: rgba(255,255,255,0.2);
	
	--button-hover: #111f3f;
	
	--checkbox: #FF6365;
	--checkbox-disabled: #f5f5f5;
	
	--input-error: #FF6365;
	
	--body-font: #000;
	--main-font: #777;
	--main-font-hover: #1e3872;
	--accent-font: #1e3872;
	--tertiary-font: #c3cde5;
	--faded-font: #d9d9d9;
	--button-font: #FFF;
	--form-font: #FFF;
	--placeholder-font: #2E51A2;
	--input-font: #1e3872;
	--disabled-font: #FF6365;
	--date-font: #FFF;
	
	--page-overlay: rgba(255,255,255, 0.85);
	
	--color-tv: #74c493;
	--color-doujin: #74c493;
	--color-ova: #5698c4;
	--color-manga: #5698c4;
	--color-movie: #c94a53;
	--color-manhua: #c94a53;
	--color-special: #65387d;
	--color-manhwa: #65387d;
	--color-novel: #f19670;
	--color-ona: #f19670;
	--color-music: #e9d78e;
	--color-oel: #e9d78e;
	--color-oneshot: #e279a3;
	--color-unknown: #acacac;
	
	--color-gold: #ddbd39;
	--gradient-gold: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(221,189,57,1) 30%, rgba(221,189,57,1) 60%, rgba(255,255,255,1) 100%);
	--color-silver: #a3a2a1;
	--color-bronze: #965e45;
	
	--color-plan-to-watch: #2980B9;
	--color-watching: #8E44AD;
	--color-completed: #16A085;
	--color-on-hold: #f39C12;
	--color-dropped: #A12F31;
	--color-repeating: #B545A2;
	
	--mobile-button-height: 4.0625rem;
	
	--star-color: #F0CC0C;
	--star-background: rgba(0,0,0,0.2);
}

body.dark {
	--highlight: #FFF;
	--highlight-faded: #555;
	--highlight-hover: #777;
	
	--main-border: #000;
	--accent-border: #444;
	--tertiary-border: #222;
	--form-border: #000;
	--button-border: #000;
	--other-border: #222;
	--faded-border: #222;
	
	--main-background: #080808;
	--accent-background: #111;
	--input-background: #111;
	--button-background: #141414;
	--form-background: rgba(50,50,50,0.5);
	--box-background: #000;
	--faded-background: #222;
	--other-background: #333;
	--date-background: #444;
	--trans-faded-background: rgba(255,255,255,0.05);
	
	--range-background: rgba(255,255,255,0.1);
	--range-range: rgba(255,255,255,0.2);
	--range-handle: #141414;
	--range-handle-hover: #000;
	--range-handle-border: rgba(255,255,255,0.1);
	
	--dropdown-button-background: rgba(0,0,0,0.2);
	--dropdown-button-border: rgba(0,0,0,0.3);
	
	--button-hover: #000;
	
	--body-font: #777;
	--tertiary-font: #444;
	--main-font-hover: #FFF;
	--input-font: #FFF;
	--faded-font: #333;
	--accent-font: #777;
	--date-font: #111;
	
	--page-overlay: rgba(0,0,0,0.9);
	
	--star-background: rgba(255,255,255,0.2);
}
/* END vars.css */

/* START index.css */
.result-title-wrapper {
	width: 100%;
	align-self: flex-start;
}

.result-title-info .result-score {
	font-weight: bold;
	line-height: 1rem;
	position: relative;
	display: none;
}

.result-score-wrapper {
	cursor: pointer;
	white-space: nowrap;
}

.result-score.percent,
.result-score.fraction {
	color: var(--highlight);
}

.result-score.percent.good,
.result-score.fraction.good {
	color: #1abc9c;
}

.result-score.percent.ok,
.result-score.fraction.ok {
	color: #f39c12;
}

.result-score.percent.bad,
.result-score.fraction.bad {
	color: #A12F31;
}

.result-score.stars > span {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	user-select: none;
}

.result-score.none,
body[data-score-mode="default"] .result-score.default,
body[data-score-mode="fraction"] .result-score.fraction,
body[data-score-mode="percent"] .result-score.percent,
body[data-score-mode="stars"] .result-score.stars {
	display: inline-block;
}

.result-score.stars .tooltip {
	display: none;
	position: absolute;
	bottom: 100%;
	padding: 0.3125rem;
	background: var(--button-background);
	border-radius: 0.3125rem;
	color: var(--button-font);
	-webkit-text-fill-color: var(--button-font);
	transition: opacity 0.25s ease-in-out;
	min-width: 3rem;
	margin-left: -1.5rem;
	text-align: center;
	box-sizing: border-box;
	text-align: center;
	margin-left: calc(50% - 1.5rem);
}

@media (pointer: fine) {
	.result-score.stars:hover .tooltip {
		display: block;
		opacity: 1;
	}
}

/* START LIST DISPLAY */

#result-content:not(.list-display) .result-title-image-wrapper,
/*#result-content.list-display button.result-anime-button,*/
#result-content.list-display .result-content {
	display: none;
}

#result-content.list-display #result-anime-wrapper {
	margin-bottom: 0.6125rem;
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
}

#result-content.list-display .result-list-image-wrapper {
	display: block;
	overflow: hidden;
	margin: 0.3125rem;
	margin-right: 0.625rem;
	border-radius: 0.3125rem;
	position: relative;
}

#result-content.list-display .result-list-image-wrapper img {
	display: block;
	width: auto;
	height: 4rem;
	transition: height 0.5s;
	aspect-ratio: 53/75;
	object-fit: contain;
}

#result-content.list-display .result-list-image-wrapper .blurred-background {
	background-size: cover;
	background-position: center;
	filter: blur(0.2rem);
	position: absolute;
	top: 0;
	left: -0.2rem;
	bottom: 0;
	right: 0;
	z-index: -1;
	opacity: 0.75;
	padding: 0.2rem;
}

@media (pointer: fine) {
	#result-content.list-display .result-list-image-wrapper img:hover {
		height: 10rem;
	}
}

#result-content.list-display .result-title-info {
	font-size: 0.8rem;
}

#result-content.list-display .result-type {
	font-size: 0.8rem;
}

#result-content.list-display .result-type .result-status{
	font-size: 0.65rem;
}

#result-content.list-display .result-title-wrapper {
	align-self: center;
}

#result-content.list-display .result-title {
	padding-bottom: 0.3125rem;
	margin-top: 0;
	border-bottom: 0;
}

#result-content.list-display .result-title .title-top a {
	font-size: 1.5rem;
}

#result-content.list-display .result-title .title-jp {
	font-size: 0.75rem;
}

#result-content.list-display .result-title .spun-rank {
	padding: 0.3125rem;
}

#result-content.list-display .result-anime {
	cursor: zoom-in;
}

#result-content.list-display .result-anime {
	padding: 0.3125rem;
	margin-bottom: 0.3125rem;
	background: var(--trans-faded-background);
	border-radius: 0.6125rem;
	flex-wrap: nowrap;
}

/* END LIST DISPLAY */

.result-airing {
	font-size: 0.75rem;
	margin-left: 0.625rem;
	padding: 0.3125rem;
	border: 1px solid;
	border-radius: 0.3125rem;
	font-weight: bold;
	white-space: nowrap;
	opacity: 0.75;
}

body.dark .result-airing {
	opacity: 0.5;
}

.result-airing.airing {
	color: #4ebf7a;
}

.result-airing.aired {
	color: #4e8abf;
}

.result-airing.not-yet-aired {
	color: #f24b4b;
}

@media only screen and (max-width: 46.875rem) {
	.result-image-wrapper {
		max-width: unset;
		margin-left: auto;
		margin-right: auto;
	}
	
	.result-image-wrapper img {
		width: auto;
	}
	
	.result-trailer.active {
		width: 90vw;
		margin-left: auto;
		margin-right: auto;
	}
	
	body[data-score-mode="stars"] #result-content.list-display .result-score.stars {
		display: block;
	}
	
	#result-content.list-display #result-anime-wrapper-outer {
		align-items: center;
	}
	
	#result-content.list-display .result-list-image-wrapper img {
		max-height: 6rem;
	}
}
/* END index.css */

/* START index.index.css */
.inline-form-inner button.dropdown-btn {
	text-align: left;
	-moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-between;
	overflow-y: hidden;
	width: 100%;
	border-top-color: var(--accent-border);
	border-bottom-color: var(--accent-border);
	border-left: 0;
	border-right: 0;
	background: var(--input-background);
	color: var(--input-font);
	text-align: left;
}

#spin-form-options .inline-form-inner button.dropdown-btn {
	/*border-left: 0.0625rem solid var(--accent-border);
	border-right: 0.0625rem solid var(--accent-border);*/
}

.inline-form-inner button.dropdown-btn span.fa::after {
	content:"\f107";
	padding: 0.625rem;
	padding-right: 0;
	font-size: 1.25rem;
}

.inline-form-inner button.dropdown-btn.active span.fa::after {
	content:"\f106";
}

#spin-form #spin-form-options-user + .dropdown-wrapper {
	border: 0;
}

#spin-form-options-user input[name="user"]::placeholder {
  color: var(--highlight);
  opacity: 0.5;
}

#spin-form > .inline-form-inner select {
	background: #FFF;
	background: var(--input-background);
	color: var(--accent-font);
}

#spin-form .dropdown,
#spin-form .dropdown-inner {
	min-width: 100%;
	text-align: left;
}

#spin-form .dropdown-inner {
	box-sizing: border-box;
	border-color: var(--accent-border);
	border-radius: 0 0 0.6125rem 0.6125rem;
	border-color: var(--main-border);
	box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.25);
}

#spin-form .dropdown.dropdown-top .dropdown-inner {
	border-radius: 0.6125rem 0.6125rem 0 0;
	box-shadow: 0 -0.3125rem 0.3125rem rgba(0,0,0,0.25);
}

#spin-form .type-select {
	/*border-left: 0.0625rem solid var(--main-border);*/
}

#spin-form[data-current-status="random"] .type-select,
#spin-form[data-current-status="trending"] .type-select,
#spin-form[data-current-status="popular"] .type-select,
#spin-form[data-current-status="new"] .type-select {
}

#spin-form[data-current-status="new"] #airing-2-input + label {
}

/*#spin-form > .inline-form-inner > select {
	border-left: 0.0625rem solid var(--main-border)
}*/

#spin-form-options-user > input {
	color: var(--accent-font);
}

#result-loading  {
	text-align: center;
}

#result-loading .leek {
	width: 3.125rem;
	height: 3.125rem;
	-webkit-animation: spin 1s ease infinite;
    animation: spin 1s ease infinite;
	background: var(--form-background);
	border-radius: 100%;
	padding: 0.625rem;
	box-sizing: content-box;
}

#spin-form .filter-count {
	position: absolute;
	top: 0;
	right: 0;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	background: #ff3e3e;
	font-weight: bold;
	width: 1.25rem;
	height: 1.25rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 50%;
	font-size: 0.8rem;
}

#spin-form .filter-count.active {
	display: flex;
}

#spin-form .filter-count:not(.active),
#spin-form .filter-count[data-count="0"] {
	display: none;
}

#spin-form-options {
    color: #fff;
    /*border-top: 0.0625rem solid #1e3872;
	border-top: 0.0625rem solid var(--accent-border);*/
    width: 100%;
    max-width: 93.75rem;
    margin: auto auto;
	margin-top: 0.6125rem;
	display: none;
}

#spin-form-options.active {
	display: block;
}

#spin-form-options > * {
	padding: 0 1.25rem;
	box-sizing: border-box;
}

#spin-form-options > *:not(:last-child) {
	margin-bottom: 0.6125rem;
}

#spin-form-top {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	padding: 0 1.25rem;
	flex-wrap: wrap;
	justify-content: space-between;
}

#spin-form-top > * {
	display: flex;
	margin: initial;
	flex-wrap: wrap;
	width: auto;
}

#spin-form-top .inline-form-inner:not(#spin-form-options-season) label.chk .text,
#spin-form-options-genres label.chk .text {
	color: var(--button-font);
}

#spin-form-top .inline-form-inner label.chk .box,
#spin-form-options-genres label.chk .box {
	background: var(--button-font);
}

#spin-form-options-airing > label {
  flex-grow: 0;
  white-space: nowrap;
}

#spin-form-options-airing > label:not(:last-child) {
	margin-right: 0.6125rem;
}

#spin-form-options-season {
	min-width: 9.1875rem;
}

#spin-form-options-season option:not(:disabled) {
	color: var(--input-font);
}

#spin-form-options .inline-form-inner button.dropdown-btn {
	padding: 0.6125rem;
	border-radius: 0.6125rem;
	min-height: 3rem;
	
}

#spin-form-options .inline-form-inner button.dropdown-btn:not(.active) {
	background: var(--dropdown-button-background);
	border: 0.0625rem solid var(--dropdown-button-border);
	color: var(--button-font);
}

#spin-form-options > *:not(#spin-form-top) .inline-form-group > * {
	padding: 0.6125rem;
	color: var(--input-font);
}

#spin-form-options > *:not(#spin-form-top) .inline-form-group > input::placeholder {
	color: var(--input-font);
	opacity: 0.5;
}

#spin-form-options > *:not(#spin-form-top) .inline-form-group,
#spin-form-options > *:not(#spin-form-top) .inline-form-inner label.chk {
	border-radius: 0.6125rem;
	background: var(--input-background);
	min-height: 3rem;
}

#spin-form-options-dates .datepicker-wrapper {
  z-index: 10;
}

#spin-form-options-dates-start {
	z-index: 11;
}

#spin-form-options-dates .datepicker-wrapper.active {
  background: var(--accent-background);
  border-radius: 0.6125rem 0.6125rem 0 0;
  box-shadow: 0 0 0.3125rem rgba(0,0,0,0.25);
}

#spin-form > .inline-form-inner button.dropdown-btn {
	color: var(--accent-font);
}

#anime-type-tv + label.chk .box {
	background: var(--color-tv);
}

#manga-type-doujin + label.chk .box {
	background: var(--color-doujin);
}

#anime-type-ova + label.chk .box {
	background: var(--color-ova);
}

#manga-type-manga + label.chk .box {
	background: var(--color-manga);
}

#anime-type-movie + label.chk .box {
	background: var(--color-movie);
}

#manga-type-manhua + label.chk .box {
	background: var(--color-manhua);
}

#anime-type-special + label.chk .box {
	background: var(--color-special);
}

#manga-type-manhwa + label.chk .box {
	background: var(--color-manhwa);
}

#manga-type-novel + label.chk .box {
	background: var(--color-novel);
}

#anime-type-ona + label.chk .box {
	background: var(--color-ona);
}

#anime-type-music + label.chk .box {
	background: var(--color-music);
}

#manga-type-oel + label.chk .box {
	background: var(--color-oel);
}

#manga-type-oneshot + label.chk .box {
	background: var(--color-oneshot);
}

#anime-type-tv + label.chk .text {
	color: var(--color-tv);
}

#manga-type-doujin + label.chk .text {
	color: var(--color-doujin);
}

#anime-type-ova + label.chk .text {
	color: var(--color-ova);
}

#manga-type-manga + label.chk .text {
	color: var(--color-manga);
}

#anime-type-movie + label.chk .text {
	color: var(--color-movie);
}

#manga-type-manhua + label.chk .text {
	color: var(--color-manhua);
}

#anime-type-special + label.chk .text {
	color: var(--color-special);
}

#manga-type-manhwa + label.chk .text {
	color: var(--color-manhwa);
}

#manga-type-novel + label.chk .text {
	color: var(--color-novel);
}

#anime-type-ona + label.chk .text {
	color: var(--color-ona);
}

#anime-type-music + label.chk .text {
	color: var(--color-music);
}

#manga-type-oel + label.chk .text {
	color: var(--color-oel);
}

#manga-type-oneshot + label.chk .text {
	color: var(--color-oneshot);
}

#spin-form-submit-loading,
#spin-form > .inline-form-inner input, 
#spin-form > .inline-form-inner select, 
#spin-form > .inline-form-inner button, 
#spin-form > .inline-form-inner .inline-group-title, 
#spin-form > .inline-form-inner input[type="checkbox"] + label, 
#spin-form > .inline-form-inner input[type="radio"] + label {
	height: 4.0625rem;
}

#spin-form > .inline-form-inner .dropdown input[type="checkbox"] + label {
	height: 3rem;
}

#spin-form-submit-loading .throbber::after,
#spin-recent-loading.throbber::after {
	border-top-color: rgba(255,255,255,0.5);
	border-right-color: rgba(255,255,255,0.5);
	border-bottom-color: rgba(255,255,255,0.25);
	border-left-color: rgba(255,255,255,0.25);
}

#spin-recent-loading.throbber::after {
	border-width: 0.3125rem;
    width: 3rem;
    height: 3rem;
}

#spin-form-options .inline-form-inner button.dropdown-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

button.spin-block {
	border: none;
	padding: 0.6125rem;
	background: none;
	font-size: 1.5rem;
	color: #FF6365;
	opacity: 0.5;
	cursor: pointer;
}

@media (pointer: fine) {
	button.spin-block:hover {
		opacity: 1;
	}
}

button.spink-block:active {
	opacity: 1;
}

button.spin-block:before {
    content: '\f05e';
}

#spin-form-submit-button:disabled,
#spin-form-options-button:has(+#spin-form-submit-button:disabled) {
	transition: background 0.5s ease-in;
	background: var(--input-error);
}

@media (pointer: fine) {
	#spin-form-options-button:has(+#spin-form-submit-button:disabled):hover {
		background: #DD5355;
		transition: none;
	}
}

#spin-form-options-button:has(+#spin-form-submit-button:disabled):active {
	background: #DD5355;
	transition: none;
}

#spin-form-submit-button:disabled {
	color: rgba(255,255,255,0.5);
	cursor: not-allowed;
}

#spin-form-options-button {
	position: relative;
}

#spin-form-options-button.changed:not(:disabled)::after {
	content: "";
	background: #D04242;
	border-radius: 50%;
	width: 0.3125rem;
	height: 0.3125rem;
	position: absolute;
	right: 1rem;
	top: 1.25rem;
}

.result-anime {
	display: none;
}

/*FIX ME*/
.result-anime .leek-spin-wrapper {
	text-align: center;
	max-width: 100%;
	width: 100%;
}

.result-anime .leek-spin {
	max-width: 100%;
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	position: relative;
	border-radius: 2vw;
	overflow: hidden;
}

.result-anime .leek-spin iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#multi-input + label.chk {
	background: var(--button-background);
	width: 3.75rem;
	justify-content: center;
}

@media (pointer: fine) {
	#multi-input + label.chk:hover {
		background: var(--button-hover);
		width: 3.75rem;
	}
}

#multi-input + label.chk:active	{
	background: var(--button-hover);
	width: 3.75rem;
}

#multi-input + label.chk .text {
	color: var(--button-font);
	padding: 0.3215rem;
	min-width: auto;
	border: 0.125rem solid rgba(255,255,255,0.25);
	border-radius: 0.3125rem;
}

#multi-input:checked + label.chk .text {
	background: var(--button-font);
	color: var(--button-background);
	font-weight: bold;
}

/*temporary fix*/
.result-anime > i
.result-anime > i > i {
	display: flex;
	flex: 1;
	width: 100%;
}

#spin-form-share-button {
	display: none;
}

#spin-form-share-button.active {
	display: flex;
}

#spin-form-options .inline-form-inner .season-dropdown button.dropdown-btn:not(.active) {
	background: none;
	border: 0;
	opacity: 0.5;
}

.spin-disabled {
	display: none !important;
}

/* START RECENT */

#recent_spins {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0.625rem;
}

#recent_spins .recent,
#recent_placeholder {
    margin: auto auto;
    max-width: 93.75rem;
	padding: 0 0.625rem;
}

#recent_spins .recent {
	display: block;
}

#recent_spins .recent.disabled {
	display: none;
}

#recent_spins .recent-inner {
    display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#recent_spins .recent-block {
	--recent-border: 0.0625rem;
	--recent-margin: 0.625rem;
	--recent-count: 11;
	
	position: relative;
	border: var(--recent-border) solid #d9d9d9;
	border: var(--recent-border) solid var(--main-border);
	background: var(--faded-background);
	color: #2E51A2;
	color: var(--highlight);
	margin: var(--recent-margin);
	max-width: 100px;
	width: clamp(75px, calc(((100vw - 1.25rem) - (((var(--recent-border) * 2) + (var(--recent-margin) * 2)) * var(--recent-count))) / var(--recent-count)), 100px);
	min-width: 75px;
	display: table;
	overflow: hidden;
	border-radius: 0.3125rem;
}

#recent_spins .recent-block:hover,
#recent_spins .recent-block:active {
}

#recent_spins .recent-block .title {
    padding: 0.15625rem;
    height: 1.25rem;
	font-size: 0.875rem;
}

#recent_spins .recent-block .title .inner {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    left: 0.3125rem;
    right: 0.3125rem;
	text-align: center;
}

#recent_spins .recent-block .recent-img-wrapper {
    position: relative;
	border-bottom: 0.3125rem solid #2E51A2;
	border-bottom: 0.3125rem solid var(--highlight);
	max-width: 8.125rem;
	overflow: hidden;
	max-height: 9.375rem;
	background: #ccc;
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	vertical-align: middle;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

body.dark #recent_spins .recent-block .recent-img-wrapper {
	background: #333;
}

#recent_spins .recent-block .recent-img-wrapper .recent-background {
	background-size: cover;
	background-position: center;
	filter: blur(0.2rem);
	position: absolute;
	top: 0;
	left: -0.2rem;
	bottom: 0;
	right: 0;
	z-index: 0;
	opacity: 0.75;
	padding: 0.2rem;
}

#recent_spins .recent-block .recent-img-wrapper > * {
	z-index: 1;
}

#recent_spins .recent-block.tv .recent-img-wrapper {
	border-bottom-color: var(--color-tv);
}

#recent_spins .recent-block.doujin .recent-img-wrapper  {
	border-bottom-color: var(--color-doujin);
}

#recent_spins .recent-block.ova .recent-img-wrapper {
	border-bottom-color: var(--color-ova);
}

#recent_spins .recent-block.manga .recent-img-wrapper  {
	border-bottom-color: var(--color-manga);
}

#recent_spins .recent-block.movie .recent-img-wrapper {
	border-bottom-color: var(--color-movie);
}

#recent_spins .recent-block.manhua .recent-img-wrapper  {
	border-bottom-color: var(--color-manhua);
}

#recent_spins .recent-block.special .recent-img-wrapper {
	border-bottom-color: var(--color-special);
}

#recent_spins .recent-block.manhwa .recent-img-wrapper  {
	border-bottom-color: var(--color-manhwa);
}

#recent_spins .recent-block.ona .recent-img-wrapper {
	border-bottom-color: var(--color-ona);
}

#recent_spins .recent-block.novel .recent-img-wrapper  {
	border-bottom-color: var(--color-novel);
}

#recent_spins .recent-block.music .recent-img-wrapper {
	border-bottom-color: var(--color-music);
}

#recent_spins .recent-block.oel .recent-img-wrapper  {
	border-bottom-color: var(--color-oel);
}

#recent_spins .recent-block.oneshot .recent-img-wrapper  {
	border-bottom-color: var(--color-oneshot);
}

#recent_spins .recent-block.oneshot .recent-type,
#recent_spins .recent-block.oneshot .recent-type {
	background: var(--color-oneshot);
}

#recent_spins .recent-block.tv .recent-type,
#recent_spins .recent-block.tv .recent-count {
	background: var(--color-tv);
}

#recent_spins .recent-block.doujin .recent-type,
#recent_spins .recent-block.doujin .recent-count  {
	background: var(--color-doujin);
}

#recent_spins .recent-block.ova .recent-type,
#recent_spins .recent-block.ova .recent-count{
	background: var(--color-ova);
}

#recent_spins .recent-block.manga .recent-type,
#recent_spins .recent-block.manga .recent-count  {
	background: var(--color-manga);
}

#recent_spins .recent-block.movie .recent-type,
#recent_spins .recent-block.movie .recent-count {
	background: var(--color-movie);
}

#recent_spins .recent-block.manhua .recent-type,
#recent_spins .recent-block.manhua .recent-count  {
	background: var(--color-manhua);
}

#recent_spins .recent-block.special .recent-type,
#recent_spins .recent-block.special .recent-count {
	background: var(--color-special);
}

#recent_spins .recent-block.manhwa .recent-type,
#recent_spins .recent-block.manhwa .recent-count  {
	background: var(--color-manhwa);
}

#recent_spins .recent-block.ona .recent-type,
#recent_spins .recent-block.ona .recent-count {
	background: var(--color-ona);
}

#recent_spins .recent-block.novel .recent-type,
#recent_spins .recent-block.novel .recent-count  {
	background: var(--color-novel);
}

#recent_spins .recent-block.music .recent-type,
#recent_spins .recent-block.music .recent-count {
	background: var(--color-music);
	color: #656565;
}

#recent_spins .recent-block.oel .recent-type,
#recent_spins .recent-block.oel .recent-count  {
	background: var(--color-oel);
}

#recent_spins .recent-block.oneshot .recent-type,
#recent_spins .recent-block.oneshot .recent-count {
	background: var(--color-oneshot);
}

#recent_spins .recent-block .recent-img-wrapper img,
#recent_spins .recent-block .recent-placeholder-img {
    max-height: 100%;
	max-width: 100%;
	height: auto;
	width: auto;
	-webkit-box-flex: 0 1 100%;
	-ms-flex: 0 1 100%;
	flex: 0 1 100%;
	aspect-ratio: 53/75;
	object-fit: contain;
}

#recent_spins .recent-block .info {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
	-webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

#recent_spins .recent-block .info > *{
	padding: 0.15625rem 0.3125rem;
	margin: 0.15625rem;
	font-size: 0.75rem;
	background: #2E51A2;
	background: var(--box-background);
	color: #FFF;
	color: var(--button-font);
	border-radius: 0.15625rem;
	font-weight: bold;
	text-align: center;
	display: block;
}

#recent_spins .recent-block .info .recent-type {
}

#recent_spins .recent-block .info .recent-count {
}

.recent-header {
	min-height: 1rem;
	line-height: 1rem;
	font-size: 1rem;
	color: #2E51A2;
	color: var(--highlight);
	padding: 0.3125rem;
	margin: 0.3125rem auto;
	text-align: center;
	margin-top: 0;
	opacity: 0.5;
	display: block;
	max-width: fit-content;
}

#kitsu_recent_anime,
#kitsu_recent_manga,
#anilist_recent_anime,
#anilist_recent_manga,
#mal_recent_anime,
#mal_recent_manga,
#recent_placeholder {
	display: none;
}

#recent_placeholder .recent-block {
	opacity: 0.5;
}

#recent_placeholder .recent-block .recent-img-wrapper {
	border-color: transparent;
}

#spin-form .dropdown[data-dropdown-input="site"] .text {
	flex: 1;
}

#spin-form .site-select-icon {
	height: 1.25rem;
}

#spin_avatar_wrapper {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 0;
	margin: 0 0.625rem;
	box-sizing: border-box;
	overflow: hidden;
	display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
	margin-right: -0.3125rem;
	z-index: 1;
	box-shadow: 0 0 0.3125rem rgba(0,0,0,0.25);
}

body.dark #spin_avatar_wrapper {
	box-shadow: 0 0 0.3125rem rgba(255,255,255,0.25)
}

#spin_avatar_wrapper img {
  background: rgba(30,56,114,0.75);
  clip-path: circle(50%);
}

body.dark #spin_avatar_wrapper img{
	background: rgba(80,80,80,0.75);
}

#spin_avatar_wrapper.active {
	display: -webkit-box;
    display: -ms-flexbox;     
    display: flex;
}

#spin_avatar {
    max-height: 100%;
	height: 100%;
    box-sizing: border-box;
	overflow: hidden;
	object-fit: cover;
	aspect-ratio: 1/1;
}

#spin-form {
    /*z-index: 10;
    position: relative;*/
}

#spin-form-options-button {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    border-right: 0;
	width: 3.75rem;
	/*border-left: 0.0625rem solid #1e3872;
	border-left: 0.0625rem solid var(--accent-border);*/
}

@media only screen and (min-width: 46.875rem) {
	#spin-form-options .inline-form-inner button.dropdown-btn.active {
		border-radius: 0.6125rem 0.6125rem 0 0;
	}

	#spin-form-options .inline-form-inner button.dropdown-btn.dropdown-top.active {
		border-radius: 0 0 0.6125rem 0.6125rem;
	}
}

@media only screen and (max-width: 93.75rem) {
	input, 
	select, 
	.inline-form-inner button, 
	.inline-group-title,
	/*input[type="checkbox"]+label, 
	input[type="radio"]+label*/ {
		font-size: 0.875rem;
		height: 3.125rem;
		min-height: 3.125rem;
		padding: 0.625rem;
	}
}

@media only screen and (max-width: 75rem) and (min-width: 46.875rem) {
	#spin-form > .inline-form-inner {
		flex-wrap: wrap;
	}
	
	#spin-form .site-select {
		border-radius: 0 1.75rem 1.75rem 0;
	}
	
	#spin-form .site-select.active {
		border-radius: 0 1.75rem 0 0;
	}
	
	#spin-button-wrapper {
		margin-top: 1.25rem;
		min-width: 100%;
	}
	
	#spin-form-options-button {
		border-radius: 1.75rem 0 0 1.75rem ;
	}
	
	#spin-form-submit-loading,
	#spin-form-submit-button {
		border-radius: 0;
	}
	
	#multi-input + label.chk {
		order: 1;
		border-radius: 0 1.75rem 1.75rem 0;
	}
	
	#recent_spins .recent-block {
		--recent-count: 8;
	}
	
	#recent_spins .recent-block:nth-child(n+8) {
		display: none !important;
	}
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="plan-to-watch"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-plan-to-watch);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="plan-to-watch"].chk-box:checked + label.chk {
	background: var(--color-plan-to-watch);
	color: var(--button-font);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="dropped"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-dropped);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="dropped"].chk-box:checked + label.chk  {
	background: var(--color-dropped);
	color: var(--button-font);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="completed"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-completed);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="completed"].chk-box:checked + label.chk {
	background: var(--color-completed);
	color: var(--button-font);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="on-hold"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-on-hold);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="on-hold"].chk-box:checked + label.chk {
	background: var(--color-on-hold);
	color: var(--button-font);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="watching"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-watching);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="watching"].chk-box:checked + label.chk  {
	background: var(--color-watching);
	color: var(--button-font);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="repeating"].chk-box:not(:checked) + label.chk:not(:hover) .text {
	color: var(--color-repeating);
}

.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="repeating"].chk-box:checked + label.chk  {
	background: var(--color-repeating);
	color: var(--button-font);
}

@media (pointer: fine) {
	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="plan-to-watch"].chk-box + label.chk:hover {
		background: #2980B9;
		color: var(--button-font);
	}

	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="dropped"].chk-box + label.chk:hover {
		background: #A12F31;
		color: var(--button-font);
	}

	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="completed"].chk-box + label.chk:hover {
		background: #16A085;
		color: var(--button-font);
	}

	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="on-hold"].chk-box + label.chk:hover {
		background: #f39c12;
		color: var(--button-font);
	}

	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="watching"].chk-box + label.chk:hover  {
		background: #8E44AD;
		color: var(--button-font);
	}

	.dropdown[data-dropdown-type="select"] input[type="checkbox"][name="status"][value="repeating"].chk-box + label.chk:hover  {
		background: #b545a2;
		color: var(--button-font);
	}
}

.thank-you {
  text-align: center;
  padding: 0.625rem;
  width: min(100%, 1000px);
  margin: auto;
  margin-top: auto;
  margin-top: 0.625rem;
  color: var(--highlight);
  font-weight: bold;
  font-size: clamp(1rem, 5vw, 2rem);
  box-sizing: border-box;
  display: block;
}

.thank-you > span {
  color: var(--color-gold);
  font-weight: bold;
}

@media only screen and (max-width: 47.8125rem) {
	
}

/* Less than 750px */
@media only screen and (max-width: 46.875rem) {
	/*body.spinning #result-loading{
		height: calc(100vh - 4.0625rem);
		align-content: center;
		transition: height 1s;
	}*/
	
	#page-inner {
		min-height: calc(100vh - var(--mobile-button-height));
		min-height: calc(100dvh - var(--mobile-button-height));
		align-content: center;
	}
	
	#result-error {
		margin: 0;
		border-radius: 0;
		position: fixed;
		bottom: var(--mobile-button-height);
		width: 100%;
		z-index: 998;
	}
	
	@keyframes expand-loading {
	  0% {
		min-height: 0;
	  }
	  100% {
		min-height: calc(100vh - var(--mobile-button-height));
		min-height: calc(100dvh - var(--mobile-button-height));
	  }
	}
	
	body.first-spin #result-loading {
		animation: expand-loading 1s ease-out;
	}
	
	#result-loading {
		min-height: calc(100vh - var(--mobile-button-height));
		min-height: calc(100dvh - var(--mobile-button-height));
		align-content: center;
	}
	
	@keyframes expand-leek {
	  0% {
		width: 60px;
		height: 60px;
	  }
	  100% {
		width: 10vh;
		height: 10vh;
	  }
	}
	
	#result-loading .leek {
		width: 10vh;
		height: 10vh;
	}
	
	body.first-spin #result-loading .leek {
		animation: spin 1s ease infinite, expand-leek 0.75s ease-out;
	}
	
	#spin-form .type-select {
		/*border-left: 0.0625rem solid var(--accent-border);
		border-right: 0.0625rem solid var(--accent-border);*/
	}
	
	#spin-form-options {
		margin-top: 0;
		padding-top: 0;
	}
	
	#spin-form-options > * {
		padding: 0;
	}
	
	#spin-form-options > :not(:last-child) {
	  margin-bottom: 0;
	}
	
	#spin-button-wrapper {
		box-shadow: 0 0 0.6125rem rgba(0,0,0,0.5);
	}
	
	#result-anime-wrapper-outer {
		min-height: calc(100vh - var(--mobile-button-height));
		min-height: calc(100dvh - var(--mobile-button-height));
		align-items: flex-start;
	}
	
	#multi-input + label.chk {
	  order: 1;
	}
	
	#spin-button-wrapper {
        z-index: 999;
        max-height: var(--mobile-button-height);
        position: fixed;
        bottom: 0;
        left: 0;
		background: var(--button-background);
    }
    
    #page {
		min-height: calc(100vh - var(--mobile-button-height));
		min-height: calc(100dvh - var(--mobile-button-height));
		align-content: flex-end;
		padding-bottom: var(--mobile-button-height);
    }
	
	#spin-form-options-dates {
		flex-direction: column;
		width: 100%;
	}
	
	#recent_spins .recent-block {
		--recent-border: 0.0625rem;
		--recent-margin: 0.3125rem;
		--recent-count: 6;
	
		width: auto;
		width: clamp(50px, calc(((100vw - 1.25rem) - (((var(--recent-border) * 2) + (var(--recent-margin) * 2)) * var(--recent-count))) / var(--recent-count)), 100px);
		
		min-width: 50px;
		margin: 0.3125rem;
	}
	
	#recent_spins .recent-block:nth-child(n+6) {
		display: none !important;
	}
	
	/*.result-anime {
		height: 100vh;
	}
	
	.result-anime .result-content {
		align-self: baseline;
		padding: 0 !important;
	}
	
	.result-anime {
		padding: 0;
	}
	
	#spin-form-options-user {
		left: 0;
	}
	
	#spin-form select[name="status"] {
		right: 0;
	}
	
	#spin-form-options-user,
	#spin-form select[name="status"] {
		position: fixed;
		bottom: 4.0625rem;
		border-radius: 0 !important;
		width: 50%;
		z-index: 999;
		margin: 0 !important;
		border: 0.06125rem solid var(--accent-border);
		border-left: 0;
		border-right: 0;
	}
	
	#spin-form select[name="status"],
	#spin-form-options-user input[name="user"] {
		padding: 0.6125rem;
		height: 2rem;
		box-sizing: content-box;
	}*/
}
/* END index.index.css */