@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";

body {
margin:0;
padding:0;
background-color:#000;
font-family:Arial,Helvetica,sans-serif;
font-weight:700;
color:#444;
text-align:center;
text-decoration: none;
background:#020024;
background:linear-gradient(90deg,#020024ff 0%,#26263cff 35%,#05282fff 100%);
}

/* northernlights.css - CSS File for Ubooquity Theme "NorthernLights"  */
/* CSS Elements common to two or more html files in theme */

a {
color:#444;
text-decoration:none;
outline:none
}

a img {
border:0 solid #AAA;
box-shadow:8px 8px 8px #000
}

.hidden {
visibility:hidden
}

#madeby {

border: 1px solid black;
    text-align: center;
    background-color: #333;
    color: #fff;
    opacity: 0.3;
    width: 600px;
    margin: auto;
    padding: 15px;
    margin-top: 25px;
}

#poweredby {
	display: inline-block;
	width: 100%;
	padding-top: 20px;
	margin-top: 80px;
	color: #456;
	font-size: 20px;
	text-align: center;
	box-shadow:0 0 10px #0006;
	padding-bottom: 15px;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
}

a#poweredby:hover {
color:#fff
}


#toppagebar {
position:fixed;
z-index:5;
top:0;
left:0;
height:70px;
width:100%;
font-size:48px;
box-shadow:0 0 10px #0006;
color: #ccc;
padding-top:10px;
opacity: 0.95;
background:linear-gradient(90deg,#020024ff 0%,#26263cff 35%,#05282fff 100%);
}



#topbarcenter {
margin-left:auto;
margin-right:auto;
width:600px;
}

	.topbutton {
float:left;
width:52px;
height:52px;
font-size:48px;
margin:10px 18px;
color: #ccc;
}

.topbutton:hover{
text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff2d95,0 0 30px #ff2d95,0 0 40px #ff2d95,0 0 50px #ff2d95,0 0 75px #ff2d95;
}


/* CSS Elements unique for page-login.html */

input {
	width: 120px;
}

input[type=text],  input[type=password] {
   display: inline-block;    
   }

#loginform {
	color: #ddd;
	position: relative;
	font-size: 16px;
	width: 400px;
	border-radius: 15px;
	border: 1px solid #000;
	padding:15px;
	margin: auto;
	background-color: #d7d7d7;
background-image: linear-gradient(147deg, #d7d7d7 0%, #353535 74%);
text-shadow: 0px 1px 1px #4d4d4d;
}
#loginfield, #passwordfield {
	margin-left: 15px;
	height: 30px;
	width: 300px;
	padding-left: 15px;
	border: 1px solid #B9BDC1;
	color: #797979;
	text-align:center;
	box-shadow: 0 2px 4px #BBB inset;
	border-radius: 15px;
}

   .login_icons {
       float:left; 
	   margin-left: 85%;
        margin-top: -6%;
        position: relative;
	        z-index: 1;
        color: black;
    }


    .input-wrapper {
        position: relative;
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }

#loginfield:focus, #passwordfield:focus {
	border: 1px solid #777777;
}

#loginbutton {
	font-size: 16px;
	background: #CCCCCC;
	color: #000;
	border-radius: 15px;
	height: 26px;
	padding: 1px 0px 1px 0px;
	margin-left: 10px;
	border: solid 1px #CCCCCC;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

#loginbutton:hover{
		background: radial-gradient(circle at 10% 20%, rgb(69, 86, 102) 0%, rgb(34, 34, 34) 90%);
		color: #CCC;
}


#title {
    color: #888;
    position: relative;
    font-size: 28px;
    padding-top: 100px;
}

#logo{
float: left;
margin-left: 29%;
margin-top: 2%;
width: 144px;
height: 144px;
background-image:url('/theme/common/mstile-144x144.png');
	background-repeat:no-repeat;	
}


/* CSS Elements for page-home.html */

#madeby {
    text-align: center;
    color: #666;
    font-size: 14px;
    }

#userinfo {
	position: absolute;
	right: 5px;
	top: 20px;
	font-weight: normal;
	font-size: 16px;
	color: #FFFFFF;	
}

#message {
	color: #444444;
	font-size: 16px;
}

#group {
	display: inline-block;
	margin-top: 30px;
}

.cell {
	float: left;
	width: 200px;
	height: 220px;
}

.category-title {
	position:relative;
	display: block;
	color: grey;
	font-size: 24px;
	font-weight:bold;
	text-align: center;
	margin-bottom: 30px;
	text-transform:capitalize;
color:#ccc;
text-shadow:0 1px 1px #333;
}

.category-title .tooltip {
  visibility: hidden;
  width: 140px;
  background-color: grey;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}

.category {
	display: inline-block;
	background-color: #EEEEEE;
	width: 140px;
	height: 140px;
	border-radius: 15%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90px 90px;
	opacity: 50%;
}

.category:hover{
opacity: 100%;
}
.category-latest {
	position:relative;
	display: inline-block;
	width: 84px;
	height: 84px;
	top: -50px;
	left: 110px;
	border-radius: 15%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px 60px;
   filter: grayscale(1);
}

.category-latest:hover {
    filter: none;
}

.category-latest-gap{
height: 20px;
width: 20px;}

#comics {
	background-image: url('/theme/icons/comics.png');
}

#latest-comics {
	background-image: url('/theme/icons/new.png');
}

#books {
	background-image: url('/theme/icons/books.png');
}

#latest-books {
	background-image: url('/theme/icons/new.png');
}

#magazines {
	background-image: url('/theme/icons/magazines.png');
}

#latest-magazines {
	background-image: url('/theme/icons/new.png');
}

#documents {
	background-image: url('/theme/icons/documents.png');
}

#latest-documents {
	background-image: url('/theme/icons/new.png');
}

#others {
	background-image: url('/theme/icons/others.png');
}

#latest-others {
	background-image: url('/theme/icons/new.png');
}

#files {
	background-image: url('/theme/icons/floppy.png');
}

#title {
    color: #888;
    position: relative;
    font-size: 28px;
    padding-top: 100px;
}


/* CSS Elements for page-library.html */

.rootlink {
font-size:30px;
display:inline-block;
padding:5px;
background-color:#EEE;
width:500px;
border-radius:10px;
}

#toppagebar {
position:fixed;
z-index:5;
top:0;
left:0;
padding-top:10px;
height:140px;
font-size:48px;
width:100%;
background:linear-gradient(90deg,#020024ff 0%,#26263cff 35%,#05282fff 100%);
}


#topbarleft {
position:absolute;
top:10px;
left:20px;
}

#topbarright {
position:absolute;
top:10px;
right:20px;
}

#toppagebar {
position:fixed;
z-index:5;
top:0;
left:0;
height:70px;
width:100%;
box-shadow:0 0 10px #0006;
color: #ccc;
opacity: 0.95;
}

#group {
margin-top:10px;
margin-left:10px;
margin-right:10px;
}

#topbarcenter {
margin-left:auto;
margin-right:auto;
width:600px;
}
.topbutton:hover{
text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff2d95,0 0 30px #ff2d95,0 0 40px #ff2d95,0 0 50px #ff2d95,0 0 75px #ff2d95;

}

#toppagebar a {
color: #ccc;}

#pagelabel {
float:left;
width:80px;
margin-top:10px;
font-size:22px;
color:#CCC;
}

#pagelabeltotal {
font-size:16px;
color:#888;
}

.topbutton {
float:left;
width:52px;
height:52px;
font-size:48px;
margin:10px 18px;
}

.topbutton:hover {
filter:invert(30%);
}

.cell {
float:left;
width:var(--cover-width);
height:calc(var(--cover-height) + 44px);
margin:0 15px 15px 0;
padding:5px
}

.cellcontainer {
display:inline-block
}

.thumb {
width:var(--cover-width);
height:var(--cover-height);
text-align:center;
opacity:50%
}

.thumb:hover {
opacity:100%
}

.thumb img {
max-width:var(--cover-width);
max-height:var(--cover-height)
}

.label {
margin:12px 0 0;
font-size:14px;
height:50px;
width:150px;
overflow:hidden;
color:#aaa
}

.author {
color:#888
}

.title {
color:#aaa
}

.numberblock {
position:relative;
float:right;
border:1px solid #ccc;
background:radial-gradient(circle at 50.4% 50.5%,#fb2056 0%,#7d020f 90%);
border-radius:15px;
padding:0 0 2px 2px;
top:-250px;
left:10px;
}

.numberblock_cat {
position:relative;
float:right;
border:1px solid #ccc;
background:radial-gradient(circle at 50.4% 50.5%,#fb2056 0%,#7d020f 90%);
border-radius:15px;
padding:0 0 2px 2px;
top:10px;
left:-30px;
}

.number {
display:block;
float:left;
margin-right:7px;
padding:10px 5px 5px 8px;
    font-size: 18px;
text-decoration:none;
color:#FFF;

}



#dimoverlay {
visibility:hidden;
z-index:6;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
text-align:center;
background-color: #000;
opacity: 0.2;
}

#pageselector {
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:700
}

#searchbox {
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:700
}

#settingsbox {
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:700;
border-radius:15px;
border:2px solid #000
}

.popupmenu {
position:fixed;
top:0;
left:0;
right:0;
z-index:9;
margin-left:auto;
margin-right:auto;
margin-top:3%;
padding:10px;
background-color:#fff;
border:1px solid #AAA;
box-shadow:10px 10px 5px #00000080;
overflow:auto;
max-height:80%;
border-radius:10px;
-webkit-border-radius:10px
}

.popuptitle {
clear:both;
padding-bottom:20px;
margin-top:10px;
margin-bottom:20px;
border-bottom:1px #CCC solid
}

.categorytitle {
text-transform:capitalize;
color:#ccc;
text-shadow:0 1px 1px #333
}

.pagenumber {
border-radius:25px;
float:left;
background-color:#777;
width:50px;
height:38px;
padding-top:10px;
margin:5px;
font-size:24px
}

.currentpagenumber {
color:#000;
background-color:#fff
}

.actionbutton {
font-size:16px;
font-weight:700;
background:#CCC;
color:#FFF;
border-radius:15px;
height:32px;
width:75px;
margin-left:30px;
margin-right:30px;
padding:1px 0;
border:solid 1px #CCC;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.actionbutton:hover{
	background:#000;
}

.textbox {
height:25px;
width:200px;
border:1px solid #B9BDC1;
color:#797979;
box-shadow:0 2px 4px #BBB inset;
border-radius:3px
}



.searcharrowform {
display:inline
}

.sectiontitle {
font-size:24px;
margin-top:20px
}

.radiolabel {
display:inline-block;
font-size:18px;
margin:15px 25px 5px 5px;
padding:5px;
width:150px;
border-radius:10px;
background-color:#EEE
}

#folderinfo {
font-size:16px;
text-align:justify;
padding:10px
}

#bookdetails {
display:none;
width:580px
}

#progressbar {
position:relative;
top:131px;
border:0;
background:url(/theme/icons/progressbar.gif);
background-repeat:no-repeat;
margin:auto;
width:48px;
height:48px
}

#details {
display:flex;
flex-direction:column
}

#details_upper_row {
display:flex;
flex-direction:row
}

#details_cover_progress {
display:flex;
flex-direction:column;
margin:5px
}

#details_info_panel {
display:flex;
flex-direction:column;
margin:5px 10px
}

#details_button_row {
display:flex;
flex-direction:row;
justify-content:space-around;
padding:2px;
width:90%;
margin-left:auto;
margin-right:auto
}

#details_right_col {
display:flex;
flex-direction:column;
justify-content:space-between;
width:100%;
padding-right:2px;
overflow-wrap:anywhere
}

#details_close {
position:absolute;
top:5px;
right:5px;
width:24px;
height:24px;
background-repeat:no-repeat;
opacity:.5
}

#details_cover {
width:var(--cover-width);
height:var(--cover-height) + 34px;
}

#details_progress {
float:left;
width:var(--cover-width);
height:34px
}

#details_cover img {
border:1px solid #AAA
}

#details_title {
font-size:18px;
font-weight:700;
text-align:left
}

#details_authors {
margin-top:.3rem;
font-size:16px;
font-weight:700;
text-align:left;
color:#888
}

#details_series {
margin-top:.3rem;
font-size:16px;
text-align:left
}

#details_series::before {
width:1rem;
height:1rem;
display:inline-block;
margin-right:10px;
vertical-align:text-bottom;
opacity:.5
}

#details_tags {
margin-top:1rem;
font-size:16px;
text-align:left;
font-style:italic
}

#details_tags::before {
width:1rem;
height:1rem;
display:inline-block;
margin-right:10px;
vertical-align:text-bottom;
opacity:.5
}

#details_language {
margin-top:.2rem;
font-size:16px;
text-align:left
}

#details_language::before {
width:1rem;
height:1rem;
display:inline-block;
margin-right:10px;
vertical-align:text-bottom;
opacity:.5
}

#details_file {
margin-top:.2rem;
font-size:16px;
text-align:left
}

#details_file::before {
width:1rem;
height:1rem;
display:inline-block;
margin-right:10px;
vertical-align:text-bottom;
opacity:.5
}

#details_publication {
margin-top:.2rem;
font-size:16px;
text-align:left;
font-style:italic
}

.details_rating {
float:left;
margin-top:.2rem;
text-align:left;
font-size:22px
}

#details_description {
clear:both;
text-align:left;
overflow-y:auto;
color:#444;
padding:15px
}

#details_description a {
text-decoration:underline
}

.details_button {
font-size:38px;
width:80px
}

.details_button:hover {
color:#000;}

#details_download {
width:42px;
height:42px;
background-image:url(/theme/icons/download.svg);
display:inline-block;
vertical-align:middle;
opacity:.7
}

#details_read {
width:42px;
height:42px;
background-image:url(/theme/icons/read.svg);
display:inline-block;
vertical-align:middle;
opacity:.7
}

#details_mark_unread {
width:42px;
height:42px;
background-image:url(/theme/icons/mark-unread.svg);
display:inline-block;
vertical-align:middle;
opacity:.7
}

#details_mark_finished {
width:42px;
height:42px;
background-image:url(/theme/icons/mark-finished.svg);
display:inline-block;
vertical-align:middle;
opacity:.7
}

.cover_progress_bar {
--prog_fg:#e0e0e0;
position:relative;
bottom:1.2rem;
margin-left:auto;
margin-right:auto;
width:80%;
background-color:var(--prog_fg);
padding:1px;
box-shadow:inset 0 1px 3px #0003
}

.cover_progress_bar_fill {
--prog_bg:#A61F22;
display:block;
height:3px;
background-color:var(--prog_bg);
width:var(--value)
}

.details_progress_bar {
--prog_fg:#e0e0e0;
width:80%;
background-color:var(--prog_fg);
padding:3px;
border-radius:3px;
box-shadow:inset 0 1px 3px #0003;
margin-left:auto;
margin-right:auto
}

.details_progress_bar_fill {
--prog_bg:#A61F22;
display:block;
height:6px;
border-radius:3px;
background-color:var(--prog_bg);
width:var(--value)
}

.status_unread {
visibility:hidden
}

.status_finished .cover_progress_bar {
--prog_fg:#555;
border:1px solid #e0e0e0
}

.status_finished .cover_progress_bar_fill {
--prog_bg:#555
}

.status_finished .details_progress_bar {
--prog_fg:#555;
border:1px solid #e0e0e0
}

.status_finished .details_progress_bar_fill {
--prog_bg:#555
}

#pagecounter{
width: 100px;
margin: auto;}