/* 
Universal theme styles
*/
.grid-container {
	display: grid;
	grid-gap: 15px;
	margin-bottom: 15px;
}

.grid-four-cols {
	grid-template-columns: auto auto auto auto;
}

.grid-three-cols {
	grid-template-columns: auto auto auto;
}

.grid-two-cols {
	grid-template-columns: auto auto;
}

#comic-list {

	list-style: none;
	padding-left: 0;

}

#comic-list>li {
	position: relative;
	border-bottom: 1px solid #111111;
	border-left: 1px solid #111111;
	border-right: 1px solid #111111;
	height: 70px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#comic-list>li:first-child {
	border-top: 1px solid #111111;
}

#comic-list>li:hover {
	background: #eee;
}

#comic-list>li>a {
	display: block;
	height: 70px;
	white-space: nowrap;
	cursor: pointer;
	color: #000;
	text-decoration: none;
	overflow: hidden;
}

#comic-list>li>a:focus,
#comic-list>li>a:focus .comic-list-item-details {
	color: #ff0000 !important;
}

#comic-list>li>a:focus img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

#comic-list>li:hover a,
#comic-list>li:hover p {
	color: #ff0000;
}

#comic-list>li:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

#comic-list>li>a:hover {
	color: #ff0000;
}

.comic-item {
	vertical-align: center;
	height: 70px;
	padding: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
	text-align: left;
}

.comic-item .thmb {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	height: 70px;
	width: 70px;
	overflow: hidden;
	max-height: 70px;
}

.comic-item .rank {
	position: absolute;
	top: 11px;
	left: 9px;
	z-index: 10;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#comic-list .thmb img {
	max-height: 70px;
	max-width: none !important;
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
}

.comic-item .comic-info {
	height: 70px;
	padding-left: 10px;
	vertical-align: middle;
	display: table-cell;
}

.comic-title-wrapper {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.comic-item .comic-title {
	height: 26px;
	font-size: 17px;
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

.comic-item .comic-list-item-details {
	color: #848484;
	margin-top: 3px;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

.pagination {
	display: -ms-flexbox;
	display: flex;
	padding-left: 0;
	list-style: none;
	border-radius: .25rem;
}

.page-numbers {
	display: inline-block;
	text-align: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: .5rem;
	margin-right: .5rem;
	color: #000;
	text-decoration: none;
	background-color: #ccc;
	border: 1px solid #000000;
}

.page-numbers:hover,
.page-numbers:focus,
.page-numbers:active {
	color: #fff;
	text-decoration: none;
	background-color: #666;
	border-color: #000000;
}

.page-numbers.current {

	z-index: 1;
	color: #000;
	background-color: #fff;
	border-color: #000000;

}


#comic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 15px;
	align-items: stretch;
	margin-bottom: 15px;
}

#comic-grid img {
	border: 1px solid #ccc;
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
	max-width: 100% !important;
	height: auto !important;
}

#comic-grid img:hover {
	opacity: 0.7;
}

.comic-thumbnail-wrapper {
	text-align: center;
}

.more-chapters-wrapper {
	margin-bottom: 15px;
}

.single-comic-navigation {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
}

.single-comic-navigation a {
	margin: 0 10px;
	text-decoration: none;
	font-size: 30px;
}

.single-comic-navigation a:hover,
.single-comic-navigation a:focus,
.single-comic-navigation a:active {
	color: #ff0000;
}

.single-comic-navigation img {
	max-height: 35px;
	width: auto;
}

#comic-analytics {
	margin-top: 15px;
}

#comic-analytics i {
	margin-right: 5px;
}

#comic-analytics a {
	margin-right: 0px;
}

#comic-analytics .toocheke-likes-button {
	padding: 0.375em 0px;
}

.analytics-wrapper {
	font-weight: 500;
	margin-right: 15px;
}

.likes-wrapper {
	margin-right: 5px;
}

/*--------------------------------------------------------------
# Series Styles
--------------------------------------------------------------*/
.series-thumbnail-wrapper a {
	display: none;
}

.series-thumbnail-wrapper a.series-link,
.series-thumbnail-wrapper a.series-thumbnail {
	display: inline-block;
}

#series-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	grid-gap: 15px;
	align-items: stretch;
	margin-bottom: 30px;
}

.series-thumbnail-wrapper {
	display: inline-block;
	position: relative;
}

.series-thumbnail-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

.series-rollover {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #111111;
	color: #fff;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}

.series-thumbnail-wrapper:hover .series-rollover {
	height: 100%;
}

.series-link,
.series-link:hover {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	color: #fff;
	font-size: 14px;
	line-height: 15px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: left;
	text-decoration: none;
}

.series-link:focus {
	outline: none !important;
}

.series-link h3 {
	font-size: 18px;
	line-height: 18px;
	padding-top: 5px;
}

.series-link .description {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 16px;
}

/* Sidebar calendar widget */

#toocheke-calendar {
	width: 100% !important;
	font-size: 11px !important;
	background-color: transparent;
}

#toocheke-calendar thead th {
	background: transparent !important;
	border: 1px solid #ffffff;
	font-size: 11px !important;
}

#toocheke-calendar tbody td {
	color: #ffffff;
	text-align: center !important;
	border: 1px solid #ffffff;
	line-height: 2.5em !important;
	transition: background 0.15s ease !important;
	-webkit-transition: background 0.15s ease !important;
	-o-transition: background 0.15s ease !important;
	-moz-transition: background 0.15s ease !important;
}

#toocheke-calendar tbody td:hover {
	background: rgba(0, 0, 0, .15) !important;
	color: #ffffff;
}

#toocheke-calendar tbody td a {
	display: block !important;
	text-decoration: none !important;
	background: #ffffff !important;
	color: #000000 !important;
}

#toocheke-calendar tbody td:hover a {
	background: #444 !important;
	color: #fff !important;
}

#toocheke-calendar tfoot td {
	padding-top: 1px !important;
	padding: 4px !important;
}

#toocheke-calendar caption {
	cursor: pointer !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 12px !important;
	outline: 0 none !important;
	background: #444 !important;
	color: #fff !important;
}

#toocheke-calendar caption:hover {
	opacity: 0.8;
}

#toocheke-calendar tbody a {
	display: block !important;
	text-decoration: underline !important;
}

#toocheke-calendar th {
	text-align: center !important;
	padding: 7px 0 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

#toocheke-calendar tfoot a {
	color: #f8d94a;
}

/* Body Calendar */

#archive-page-calendar-wrapper #toocheke-calendar thead th {
	border: 1px solid #000;
}

#archive-page-calendar-wrapper #toocheke-calendar tbody td {
	color: #000;
	border: 1px solid #000;
}

#archive-page-calendar-wrapper #toocheke-calendar tbody td:hover {
	background: rgba(0, 0, 0, .15) !important;
	color: #000;
}

#archive-page-calendar-wrapper #toocheke-calendar tbody td a {
	background-color: #ff0000 !important;
	color: #fff !important;
}

#archive-page-calendar-wrapper #toocheke-calendar tbody td:hover a {
	opacity: 0.8;
}

#archive-page-calendar-wrapper #toocheke-calendar th {
	color: #000 !important;
}

#archive-page-calendar-wrapper #toocheke-calendar tfoot a {
	color: #ff0000;
}

.post-type-archive-comic #archive-page-calendar-wrapper {
	padding: 30px;
	max-width: 600px;
	margin: 0 auto;
}

.post-type-archive-comic #archive-page-calendar-wrapper .page-title {
	margin-bottom: 15px;
}

/* Comic Layout Options for Desktop and Mobile Users */

#unspliced-comic {
	display: none;
}

@media only screen and (min-width: 991px) {
	#two-comic-options #spliced-comic {
		display: none;
	}

	#two-comic-options #unspliced-comic {
		display: block;
	}
}

@media only screen and (max-width: 990px) {
	#two-comic-options #spliced-comic {
		display: block;
	}

	#two-comic-options #unspliced-comic {
		display: none;
	}
}

@media only screen and (max-width: 1023px) {
	.grid-container {
		grid-template-columns: auto auto;
	}

}

@media only screen and (max-width: 500px) {
	.grid-container {
		grid-template-columns: auto;
	}
}

/*--------------------------------------------------------------
## Chapters navigation
--------------------------------------------------------------*/
#chapters-drodpown {
	padding: 0px 5px;
	font-size: 14px;
	line-height: 14px;
}

#chapter-navigation {
	padding-top: 15px;
	text-align: center;
}

.chapters-nav-label {

	font-weight: bold;
	display: inline-block;
	padding: 0px;
	margin: 0;
}

.single-comic-navigation .chapters-nav-label {
	font-size: 1.33333em;
	line-height: 35px;
}

.chapter-inline-nav,
.chapter-footer-dropdown {
	display: inline-block;
}

.chapter-inline-nav {
	line-height: 30px;
}

.chapter-inline-dropdown {
	margin-bottom: 25px;
}

.chapter-footer-nav {
	line-height: 35px;
	overflow: hidden;
	position: absolute;
	max-height: 35px;
	margin-top: 5px;
	display: inline-block;
}

.chapter-footer-nav i {
	margin: 0px 5px;
}

.d-none {
	display: none;
}
#comic-support svg, #comic-social svg {	
	height: 1.5em;
	width: 1.5em;
}
#comic-support svg, #comic-support path, #comic-social svg, #comic-social path{
	fill: currentColor;
}
@media only screen and (max-width: 575px) {

	.chapter-footer-nav,
	.chapter-footer-dropdown {
		display: none;
	}

	.chapter-inline-nav {
		line-height: 35px;
	}
}