html,
body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
}

input {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

*[niceTitle]:hover::after {
    content: attr(niceTitle);
    position: absolute;
    background-color: #000;
    color: #fff;
    margin-left: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
}

.downloadedPage {
    background-color: #f2f2f2;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    transition: box-shadow 0.3s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#home {
    padding-bottom: 50px;
}

/*
@media (max-width: 600px) {
    .downloadedPage {
        flex-direction: column;
    }
}*/

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

.downloadedPage:hover {
    box-shadow: 0 0 10px #aaa;
}

.downloadedPage .title {
    font-size: 20px;
    font-weight: bold;
}

.downloadedPage .hasImage .title {
    font-size: 15px;
}

.downloadedPage .hasImage .bookPages {
    font-size: 12px;
}

.downloadedPage .bookImage {
    max-height: 2000px;
    max-width: 200px;
    width: 60%;
    height: auto;
    border-radius: 5px;
    margin-right: 20px;
}

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

.downloadedPage.bookTreeWrapperOpen .bookImage {
    width: 40%;
    max-width: 100%;
    margin-right: 0px;
}

.downloadedPage .chapterTitle {
    font-size: 15px;
    font-weight: bold;
}

.pageTreeUl {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.pageTreeUl .downloadedPage {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.pageTreeCloseBtn {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin-right: 0px;
}

.pageTreeWrapper {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.pageTreeWrapperClosed {
    display: none;
}

/*Minimal view*/
.minimalDownloadedPage .pageTreeCloseBtn {
    border: 1px solid #aaa;
    box-shadow: 0 0 5px #d8d8d8;
    border-radius: 0;
    height: unset;
    width: fit-content;
    padding: 5px;
    display: inline-flex;
}

.minimalDelete {
    /*button*/
    background-color: #f00;
    color: #fff;
    border: 1px solid rgb(198 0 0);
    transition: all 0.2s ease-in-out;
}

.minimalDelete:hover {
    background-color: #f00;
    color: #fff;
    border: 1px solid rgb(119, 0, 0);
    box-shadow: 0 0 5px 3px #d28c8c;
}

.minimalDownloadedPage {
    padding-bottom: 10px;
    display: flex;
    align-items: flex-start;
}


.minimalDownloadedPage .minimalDownloadedPageImage {
    max-height: 2000px;
    max-width: 200px;
    width: 10%;
    height: auto;
    border-radius: 5px;
    margin-right: 20px;
}

.minimalDownloadedPage .pageTreeUl {
    border-left: 1px solid #ccc;
}

.minimalDownloadedPage .pageTreeWrapper {
    border-bottom: 1px solid #ccc;
}

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

.minimalDownloadedPageUrl {
    font-size: 12px !important;
    color: #666;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.minimalDownloadedPageName {
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.minimalDownloadedPageName:hover {
    text-decoration-style: dotted;
}

/*End Minimal view*/

button {
    cursor: pointer;
    color: #000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background-color: #f0f0f0;
    border: 1px solid #aaa;
    box-shadow: 0 0 5px #d8d8d8;
}

button.delete {
    background-color: #f00;
    color: #fff;
    border: 1px solid rgb(198 0 0);
    transition: all 0.2s ease-in-out;
}

button.delete:hover {
    background-color: #f00;
    color: #fff;
    border: 1px solid rgb(119, 0, 0);
    box-shadow: 0 0 5px 3px #d28c8c;
}

#loading {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loadingMessages {
    max-height: calc(100% - 170px);
    min-width: 70%;
    max-width: 100%;

    display: flex;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #000;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.currentChapter {
    font-weight: bold;
    background-color: #00ff00 !important;
    color: #000 !important;
}

#editPanel {
    position: fixed;
    z-index: 999;

    width: 70%;
    height: 70%;
    min-width: 300px;
    min-height: 500px;
    max-width: 100%;
    max-height: 100%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid #ccc;
    box-shadow: 0 0 20px 0px #3d3d3d80;

    overflow-y: auto;
    overflow-x: hidden;
}

#editPanel hr {
    width: 100%;
}

.editPanelList {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;

    max-height: 300px;
    overflow: auto;
}

.editPanelList p {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 15px;
}

.editPanelList p:hover {
    text-decoration: underline;
}

#pageOptions .selected {
    background-color: #f0f0f0;
    border: 1px solid #aaa;
    box-shadow: 0 0 5px #d8d8d8;
}

.displayTypeSelectContainer {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    align-items: flex-start;
}

.displayTypeSelectContainer>p {
    min-width: 57px !important;
}

.displayTypeSelectRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


#page {
    transition: all 0.3s ease-in-out;
    min-height: 100vh;
    padding-bottom: 0.1px;
}

#pageOptions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 998;

    display: flex;
    flex-direction: column;

    border: 1px solid #ccc;
    font-family: sans-serif;
    font-size: 15px;
    box-shadow: 0 0 20px 0px #3d3d3d80;

    padding: 20px;
    margin: 5px;
    /*border-radius: 14px;*/
    border-radius: 0px;
}

/*if ios, make the border radius at the bottom of pageOptions 50px*/
@media (max-width: 600px) {
    #pageOptions {
        border-radius: 0px 0px 50px 50px;
    }
}




#pageContentTitle {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}

#pageContent img {
    max-width: 100%;
    height: auto;
}

#pageUrl {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    word-break: break-all;
    cursor: pointer;
    text-decoration: underline;
    margin: 0;
    padding: 10px;
}

.page a {
    color: #000;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1.5px;
}

.page .downloaded {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 3px;
}

#select {
    position: fixed;
    z-index: 1002;
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    background-color: #00000025;
    justify-content: center;
    align-items: center;
}

#selectWraper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 70%;
    height: 70%;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    justify-content: space-evenly;
    flex-direction: column;
    overflow: auto;
}

#selectTitle {
    font-size: min(5vw, 30px);
    font-weight: bold;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}

#selectOptions button {
    margin: 5px;
    padding: 20px;
}

#selectOptions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    border: 1px solid #ccc;
    border-radius: 5px;
    padding-top: 20px;
    padding-bottom: 20px;


}

#chaptersBookHeader {
    padding: 5px;
    position: sticky;
    top: 0;
}

#chaptersBookHeader button {
    margin: 0;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    padding: 15px;
    background-color: #ffffff00;
}

.bookPageHelper {
    background-color: #8181817d;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px;
}

#bookFooter {
    margin-bottom: 50px;
}

.bookPageHelper button {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
}

/*
==========================================
||            custom options            ||
==========================================
*/


:root {
    /*values to overwrite*/
    --mainColor: #000;
    --mainBgColor: #fff;
    --buttonSelectedColor: #fff;
    --buttonSelectedBgColor: #2e2e2e;
    --styleColorUpdateBgColor: #fff;
    --styleColorUpdateColor: #131313;
    --downloadedPageColor: #000;
    --downloadedPageBgColor: #f2f2f2;
    --downloadedPageBoxShadow: #ccc;
    --editPanelMassDownloadLinksListSelectedBgColor: #00ff00;
    --editPanelMassDownloadLinksListNotSelectedBgColor: #ff5900;
    --editPanelMassDownloadLinksListClickedBgColor: #00abff;
    --selectWraperBgColor: #fff;
    --selectWraperBorderColor: #ccc;
    --loadingBgColor: #fff;
    --ldsEllipsisDivBgColor: #000;
    --minimalDownloadedPageNameColor: blue;
    --minimalDownloadedPageUrlColor: #666;
}

.type1color {
    --mainColor: #1e1d25;
    --mainBgColor: #fff;
    --buttonSelectedColor: #1e1d25;
    --buttonSelectedBgColor: #d6d6d6;
    --styleColorUpdateBgColor: #fff;
    --styleColorUpdateColor: #1e1d25;
    --downloadedPageColor: black;
    --downloadedPageBgColor: #f2f2f2;
    --downloadedPageBoxShadow: #ccc;
    --editPanelMassDownloadLinksListSelectedBgColor: #00ff00;
    --editPanelMassDownloadLinksListNotSelectedBgColor: #ff5900;
    --editPanelMassDownloadLinksListClickedBgColor: #00abff;
    --selectWraperBgColor: #fff;
    --selectWraperBorderColor: #ccc;
    --loadingBgColor: #fff;
    --ldsEllipsisDivBgColor: #000000;
    --minimalDownloadedPageNameColor: blue;
    --minimalDownloadedPageUrlColor: #ccc;
}

.type2color {
    --mainColor: #fff;
    --mainBgColor: #000000;
    --buttonSelectedColor: #fff;
    --buttonSelectedBgColor: #1f1f1f;
    --styleColorUpdateBgColor: #000000;
    --styleColorUpdateColor: #fff;
    --downloadedPageColor: white;
    --downloadedPageBgColor: #1f1f1f;
    --downloadedPageBoxShadow: #5f5f5f;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(0, 136, 0);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(163, 0, 0);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(0, 0, 163);
    --selectWraperBgColor: #000;
    --selectWraperBorderColor: #5f5f5f;
    --loadingBgColor: #000;
    --ldsEllipsisDivBgColor: #fff;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #ccc;
}

.type23color {
    --mainColor: #9e9e9e;
    --mainBgColor: #000000;
    --buttonSelectedColor: #9e9e9e;
    --buttonSelectedBgColor: #131313;
    --styleColorUpdateBgColor: #000000;
    --styleColorUpdateColor: #9e9e9e;
    --downloadedPageColor: #9e9e9e;
    --downloadedPageBgColor: #000000;
    --downloadedPageBoxShadow: #2e2e2e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(0, 94, 0);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(119, 0, 0);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(0, 0, 119);
    --selectWraperBgColor: #000;
    --selectWraperBorderColor: #2e2e2e;
    --loadingBgColor: #000;
    --ldsEllipsisDivBgColor: #9e9e9e;
    --minimalDownloadedPageNameColor: #4774ce;
    --minimalDownloadedPageUrlColor: #9e9e9e;
}

.type3color {
    --mainColor: #fff;
    --mainBgColor: #5a5151;
    --buttonSelectedColor: #fff;
    --buttonSelectedBgColor: #3d3d3d;
    --styleColorUpdateBgColor: #5a5151;
    --styleColorUpdateColor: #fff;
    --downloadedPageColor: white;
    --downloadedPageBgColor: #6d6464;
    --downloadedPageBoxShadow: #3d3d3d80;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(0, 191, 0);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(231, 0, 0);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(0, 0, 231);
    --selectWraperBgColor: #5a5151;
    --selectWraperBorderColor: #3d3d3d80;
    --loadingBgColor: #5a5151;
    --ldsEllipsisDivBgColor: #fff;
    --minimalDownloadedPageNameColor: #5794dd;
    --minimalDownloadedPageUrlColor: #adadad;
}

.solarizedDarkColor {
    --mainColor: #839496;
    --mainBgColor: #002b36;
    --buttonSelectedColor: #e5e5e5;
    --buttonSelectedBgColor: #07495a;
    --styleColorUpdateBgColor: #002b36;
    --styleColorUpdateColor: #839496;
    --downloadedPageColor: #839496;
    --downloadedPageBgColor: #144d5b;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #002b36;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #002b36;
    --ldsEllipsisDivBgColor: #839496;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

.atomicDarkColor {
    --mainColor: #c5c8c6;
    --mainBgColor: #1d1f21;
    --buttonSelectedColor: #e5e5e5;
    --buttonSelectedBgColor: #2b2b2b;
    --styleColorUpdateBgColor: #1d1f21;
    --styleColorUpdateColor: #c5c8c6;
    --downloadedPageColor: #c5c8c6;
    --downloadedPageBgColor: #2b2b2b;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #1d1f21;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #1d1f21;
    --ldsEllipsisDivBgColor: #c5c8c6;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #999d9a;
}

.solarizedLightColor {
    --mainColor: #839496;
    --mainBgColor: #fdf6e3;
    --buttonSelectedColor: #535353;
    --buttonSelectedBgColor: #f0f0f0;
    --styleColorUpdateBgColor: #fdf6e3;
    --styleColorUpdateColor: #839496;
    --downloadedPageColor: #839496;
    --downloadedPageBgColor: #e7e2d5;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #fdf6e3;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #fdf6e3;
    --ldsEllipsisDivBgColor: #839496;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

.monokaiColor {
    --mainColor: #f8f8f2;
    --mainBgColor: #272822;
    --buttonSelectedColor: #f8f8f2;
    --buttonSelectedBgColor: #3e3d32;
    --styleColorUpdateBgColor: #272822;
    --styleColorUpdateColor: #f8f8f2;
    --downloadedPageColor: #f8f8f2;
    --downloadedPageBgColor: #3e3d32;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #272822;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #272822;
    --ldsEllipsisDivBgColor: #f8f8f2;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

.draculaColor {
    --mainColor: #f8f8f2;
    --mainBgColor: #282a36;
    --buttonSelectedColor: #f8f8f2;
    --buttonSelectedBgColor: #3e3d32;
    --styleColorUpdateBgColor: #282a36;
    --styleColorUpdateColor: #f8f8f2;
    --downloadedPageColor: #f8f8f2;
    --downloadedPageBgColor: #3e3d32;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #282a36;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #282a36;
    --ldsEllipsisDivBgColor: #f8f8f2;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

.kimbieDarkColor {
    --mainColor: #f8f8f2;
    --mainBgColor: #221a0f;
    --buttonSelectedColor: #f8f8f2;
    --buttonSelectedBgColor: #3e3d32;
    --styleColorUpdateBgColor: #221a0f;
    --styleColorUpdateColor: #f8f8f2;
    --downloadedPageColor: #f8f8f2;
    --downloadedPageBgColor: #3e3d32;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #221a0f;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #221a0f;
    --ldsEllipsisDivBgColor: #f8f8f2;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

.iplasticColor {
    --mainColor: #f8f8f2;
    --mainBgColor: #1e1e1e;
    --buttonSelectedColor: #f8f8f2;
    --buttonSelectedBgColor: #3e3d32;
    --styleColorUpdateBgColor: #1e1e1e;
    --styleColorUpdateColor: #f8f8f2;
    --downloadedPageColor: #f8f8f2;
    --downloadedPageBgColor: #3e3d32;
    --downloadedPageBoxShadow: #606b6e;
    --editPanelMassDownloadLinksListSelectedBgColor: rgb(27, 67, 100);
    --editPanelMassDownloadLinksListNotSelectedBgColor: rgb(100, 27, 27);
    --editPanelMassDownloadLinksListClickedBgColor: rgb(27, 27, 100);
    --selectWraperBgColor: #1e1e1e;
    --selectWraperBorderColor: #606b6e;
    --loadingBgColor: #1e1e1e;
    --ldsEllipsisDivBgColor: #f8f8f2;
    --minimalDownloadedPageNameColor: #578eff;
    --minimalDownloadedPageUrlColor: #839496;
}

body {
    color: var(--mainColor);
    background-color: var(--mainBgColor);
}

button.selected {
    color: var(--buttonSelectedColor) !important;
    background-color: var(--buttonSelectedBgColor) !important;
}

.styleColorUpdate,
button,
button:hover,
a {
    background-color: var(--styleColorUpdateBgColor);
    color: var(--styleColorUpdateColor) !important;
}

.downloadedPage {
    color: var(--downloadedPageColor);
    background-color: var(--downloadedPageBgColor);
    box-shadow: 0 0 10px var(--downloadedPageBoxShadow);
}

#editPanelMassDownloadLinksList .selected {
    background-color: var(--editPanelMassDownloadLinksListSelectedBgColor);
}

#editPanelMassDownloadLinksList .notselected {
    background-color: var(--editPanelMassDownloadLinksListNotSelectedBgColor);
}

#editPanelMassDownloadLinksList .clicked {
    background-color: var(--editPanelMassDownloadLinksListClickedBgColor);
}

#selectWraper {
    background-color: var(--selectWraperBgColor);
    border-color: var(--selectWraperBorderColor);
}

#loading {
    background-color: var(--loadingBgColor);
}

.lds-ellipsis div {
    background-color: var(--ldsEllipsisDivBgColor);
}

.minimalDownloadedPageName {
    color: var(--minimalDownloadedPageNameColor);
}

.minimalDownloadedPageUrl {
    color: var(--minimalDownloadedPageUrlColor);
}


/*---deledet---*/

.type1container #pageContent {
    border: 5px;
    padding: 20px;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0 0 10px #ccc;
    margin: 10px;
}

.type1container.type1color #pageContent {
    box-shadow: 0 0 10px #ccc;
}

.type1container.type2color #pageContent {
    box-shadow: 0 0 10px #5f5f5f;
}

.type1container.type23color #pageContent {
    box-shadow: 0 0 10px #2e2e2e;
}

.type2container #pageContent {
    overflow: auto;
}

.middleSpacingContainer #pageContent {
    overflow: auto;
    padding: 20px;
    margin: 10px;
}

.smallSpacingContainer #pageContent {
    overflow: auto;
    padding: 10px;
    margin: 10px;
}

.largeSpacingContainer #pageContent {
    overflow: auto;
    padding: 30px;
    margin: 10px;
}


.type1font {
    font-family: serif;
}

.type2font {
    font-family: sans-serif;
}

.type3font {
    font-family: monospace;
}

.type0size {
    font-size: 10px;
}

.type1size {
    font-size: 15px;
}

.type12size {
    font-size: 17px;
}

.type2size {
    font-size: 20px;
}

.type23size {
    font-size: 22px;
}

.type3size {
    font-size: 25px;
}

.type4size {
    font-size: 30px;
}

#addUrlDiv {
    position: fixed;
    z-index: 999;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: #00000025;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
}

#addUrlDivInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px;
    box-shadow: 0 0 10px #ccc;

    background-color: var(--mainBgColor);
}

#addUrlUrl {
    margin-bottom: 20px;
    width: calc(80vw - 80px);
}