body {
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    background-color: hsl(0, 0%, 3%);
    color: white;
}



.center_text {
    text-align: center;
}

::-webkit-scrollbar {
    display: none;
}

.center {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 25rem;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: #b3f2ff;
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    margin-top: -4px;
    /* Centers thumb on the track */
    background-color: var(--maincolor);
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid var(--maincolor);
    outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: #b3f2ff;
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    background-color: var(--maincolor);
    border: none;
    /*Removes extra border that FF applies*/
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
    outline: 3px solid var(--maincolor);
    outline-offset: 0.125rem;
}


/* Login */

#login_logo {
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
}

#login_title {
    text-align: center;
    margin-bottom: 10%;
}

.login_input {
    margin-bottom: 5%;
    font-size: medium;
}

#login_btn {
    font-size: medium;
}

#login_hints {
    font-size: smaller;
    margin-top: -7.5%;
}


#login_bottom {
    position: fixed;
    bottom: 2%;
    left: 0;
    height: 10%;
    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


#login_newcode_title {
    text-align: center;
}

/* Main */

#main_lower_buttons,
#aiu_bottom {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 6%;
    width: 100%;

    border-top: .25vh solid white;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

#main_lower_buttons div {
    height: 100%;
    width: 80%;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main_lower_buttons img {
    height: 70%;
    opacity: 0.5;
    transition: 0.3s;
}

#main_lower_buttons img.active {
    filter: brightness(0) saturate(100%) invert(66%) sepia(100%) saturate(280%) hue-rotate(120deg);
    transform: scale(1.1, 1.1);
    opacity: 1.0;
}

#main_settings.active:not([src="pictures/setting.png"]) {
    filter: unset;
}


#main_content {
    position: fixed;
    top: 0;
    left: 0;
    height: 92.5%;
    width: 100%;

    overflow: hidden;
    overflow-y: scroll;
}

/* Loadingscreen */

#loadingscreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--maincolor) 94%, #0000) top/9px 9px no-repeat,
        conic-gradient(#0000 30%, var(--maincolor));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
    animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}

.menu_background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.menu {
    border: 2.5px solid var(--maincolor);
    border-radius: 25px;
    background-color: hsl(0, 0%, 10%);

    width: 75%;
    padding: 1%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.menu_settings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.menu_settings_label_row,
.menu_settings_input_row,
.menu_settings_value_row {
    height: 100%;
    text-align: center;
}

.menu_settings_label_row {
    width: 25%;
}

.menu_settings_value_row {
    width: 15%;
}

.menu_settings_input_row {
    width: 50%;
}

.menu_settings_input_row input {
    width: 90%;
    height: 5%;
    margin-top: 13%;
}

.menu_settings p {
    width: 100%;
}


.menu_save_btn {
    margin-top: 10%;
    margin-bottom: 2%;
}

#image_viewer {
    background-color: rgba(0, 0, 0, 0.75);

    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    opacity: 0;
}

#image_viewer div {
    width: 90vw;

    background-color: black;
    border: 2.5px solid var(--maincolor);
    border-radius: 25px;
    box-shadow: 0 0 8px 2px var(--maincolor);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    transition: 0.3s;
    transform: rotate(90deg) scale(1.8);
}

#image_viewer div img {
    max-height: 90%;
    max-width: 90%;
    padding: 5%;

}

#search_bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
}

#search_main {
    margin-top: 20%;
    top: 20%;
    left: 0;
    height: 7.5%;
    width: 90%;

    background-color: black;
    border: 2.5px solid var(--maincolor);
    border-radius: 25px;
    box-shadow: 0 0 8px 2px var(--maincolor);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#search_main img {
    height: 50%;
    margin-left: 5%;
}

#search_main input {
    height: 40%;
    width: 75%;
}

#search_result {
    margin-top: 5%;
    top: 20%;
    left: 0;
    height: 70%;
    width: 90%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;

    overflow-y: scroll;
}

#search_result a {
    font-size: small;
}

.search_result {
    width: 90%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 0;
    margin-bottom: 3%;

    background-color: black;
    border: 1px solid var(--maincolor);
    border-radius: 25px;
    box-shadow: 0 0 8px 2px var(--maincolor);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    transition: 0.3s;
}


.tag {
    border: 1px solid white;
    border-radius: 25px;
    font-size: small;

    background-color: rgba(0, 0, 0, 0.25);

    padding: 2%;
    padding-left: 3%;
    padding-right: 3%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;

    white-space: nowrap;
}

.tag_nude {
    border-color: magenta;
    color: pink;
}



#anime_info_user {
    position: fixed;
    top: 0;
    left: 0;
    height: 94%;
    width: 100%;

    background-color: black;
    text-align: center;

    overflow-y: scroll;

    display: none;
}

#anime_info_user fieldset {
    border: 2.5px solid white;
}

#aiu_cancle {
    color: red;
    border-color: red;
}

#aiu_save {
    color: green;
    border-color: green;
}

#aiu_cover {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    margin-top: 5%;
    padding-top: 2%;
}

#aiu_cover h2,
#aiu_cover h5 {
    border-radius: 25px;
    padding: 1%;
    padding-left: 2%;
    padding-right: 2%;

    text-shadow: 2px 2px black;
}

#aiu_cover h5 {
    margin-top: 0;
}

#aiu_lang {
    height: 1rem;
    width: 100%;
    margin-bottom: 1%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#aiu_lang img {
    height: 75%;
    margin-left: 5%;
}

#aiu_lang div {
    height: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: center;
    align-items: center;
}

#aiu_lang a {
    height: 1.5rem;
    text-shadow: 2px 2px black;
}

#aiu_tags {
    margin-top: 2%;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
}

#aiu_tags a {
    font-size: x-small;
    padding: 1%;
}

#aiu_desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
}

#aiu_desc.short {
    max-height: 3rem;
}

#aiu_desc:not(.short) {
    max-height: 100rem;
}

#aiu_bottom {
    background-color: black;
}



#aiu_watchhistory,
#aiu_shared {
    width: 90%;
    border: 2.5px solid white;
    border-radius: 25px;
    margin-top: 5%;

    max-height: 15rem;
    overflow-y: scroll;
}

#aiu_shared {
    margin-bottom: 5%;
}

#aiu_watch,
#aiu_shared_list {
    width: 96%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    padding-left: 2%;
    padding-right: 2%;

    margin-top: 2%;
}

#aiu_shared_list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    width: 100%;
}


.aiu_watch_chapter table {
    margin-top: 1%;
    margin-bottom: 1%;
    font-size: small;
}





.aiu_watch_chapter {
    margin-top: 5%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.chapter_title {
    background-color: hsl(0, 0%, 10%);
}

.chapter_watched {
    background-color: green;
}

.chapter_notwatched {
    background-color: red;
}

.aiu_shared {
    height: 3rem;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    background-color: hsl(0, 0%, 10%);
    border: 1px solid white;
    border-radius: 25px;
    padding: 1%;
    padding-right: 5%;

    margin: 1%;
}

.aiu_shared img {
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
}

.aiu_shared div {
    height: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.aiu_shared a {
    width: 100%;
    text-align: center;
    text-shadow: 1px 1px black;
}

.aiu_shared_empf {
    font-size: 0.5rem;
    color: lightgreen;
}

.aiu_shared_notwatched {
    font-size: 0.5rem;
    color: lightcoral;
}

.aiu_shared_has_empf {
    background-image: url("/pictures/shared.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#aiu_share_all {
    margin-top: 5%;
}


th img {
    height: 1rem;
}

#update {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;


    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    pointer-events: auto;

    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
}

#update * {
    pointer-events: auto;
}

#update_main {
    padding: 2%;
    width: 80%;

    background-color: black;
    border: 2.5px solid rgb(0, 255, 0);
    border-radius: 25px;
    box-shadow: 0 0 8px 2px rgb(0, 255, 0);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#update h1 {
    color: rgb(0, 255, 0);
}

#update button {
    margin-top: 5%;
    border-color: rgb(0, 255, 0);
    color: rgb(0, 255, 0);

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    height: 3rem;
    line-height: 1;
    font-weight: bolder;
    font-size: larger;
    text-shadow: 1px 1px black;
}

#update img {
    height: 75%;

    float: left;
}

#update_main div:first-of-type {
    width: 90%;
    height: 3rem;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#update_main div:first-of-type div {
    width: 50%;
    height: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


#update_main p {
    margin-top: 0;
    margin-bottom: 0;
}

#update_main a {
    margin-top: 5%;
    font-size: xx-small;
    text-align: center;
}

.disabled {
    pointer-events: none;
    opacity: 0.25;
}