* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #525659;
}


body {
    user-select: none;
}


/* =========================
   APP
========================= */

#app {

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;

}


/* =========================
   TOOLBAR
========================= */

.toolbar {

    height: 56px;

    flex-shrink: 0;

    background: #252525;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 10px;

    box-shadow:
        0 1px 5px rgba(0,0,0,.35);

    z-index: 1000;

}


.toolbar-left,
.toolbar-center,
.toolbar-right {

    display: flex;

    align-items: center;

    gap: 5px;

}


.tool-btn {

    width: 38px;
    height: 36px;

    border: none;

    border-radius: 4px;

    background: transparent;

    color: #fff;

    font-size: 21px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.tool-btn:hover {

    background: #444;

}


.fit-btn {

    font-size: 17px;

    margin-left: 5px;

}


.page-control {

    height: 36px;

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 14px;

}


#pageInput {

    width: 45px;

    height: 30px;

    border: none;

    border-radius: 3px;

    background: #fff;

    color: #222;

    text-align: center;

    font-size: 14px;

}


#zoomLevel {

    min-width: 48px;

    text-align: center;

    font-size: 13px;

}


/* =========================
   MAIN AREA
========================= */

.main-area {

    flex: 1;

    min-height: 0;

    display: flex;

}


/* =========================
   SIDEBAR
========================= */

.sidebar {

    width: 220px;

    flex-shrink: 0;

    background: #303030;

    border-right: 1px solid #444;

    display: flex;

    flex-direction: column;

    transition: .25s;

}


.sidebar.hidden {

    width: 0;

    overflow: hidden;

}


.sidebar-title {

    height: 45px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #fff;

    background: #252525;

    font-size: 14px;

}


.sidebar-title button {

    border: 0;

    background: none;

    color: white;

    font-size: 22px;

    cursor: pointer;

}


.thumbnails {

    flex: 1;

    overflow-y: auto;

    padding: 12px;

}


.thumbnail {

    margin-bottom: 15px;

    cursor: pointer;

    text-align: center;

}


.thumbnail canvas {

    display: block;

    width: 170px;

    max-width: 100%;

    height: auto;

    margin: auto;

    background: white;

    border: 2px solid transparent;

    box-shadow:
        0 2px 8px rgba(0,0,0,.35);

}


.thumbnail.active canvas {

    border-color: #2196f3;

}


.thumbnail-number {

    color: #ddd;

    font-size: 11px;

    padding-top: 5px;

}


/* =========================
   VIEWER
========================= */

.viewer {

    flex: 1;

    min-width: 0;

    min-height: 0;

    overflow: auto;

    background: #525659;

    position: relative;

}


.pages-container {

    width: 100%;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;

}


.pdf-page {

    display: block;

    background: #fff;

    box-shadow:
        0 3px 15px rgba(0,0,0,.45);

}


/* =========================
   LOADING
========================= */

.loading {

    position: absolute;

    inset: 0;

    z-index: 50;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #525659;

    color: white;

}


.spinner {

    width: 45px;
    height: 45px;

    border: 4px solid rgba(255,255,255,.25);

    border-top-color: #fff;

    border-radius: 50%;

    animation:
        spin .8s linear infinite;

}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .sidebar {

        position: absolute;

        top: 56px;
        bottom: 0;
        left: 0;

        z-index: 900;

        box-shadow:
            4px 0 15px rgba(0,0,0,.35);

    }


    .toolbar {

        padding: 0 4px;

    }


    .toolbar-center {

        display: none;

    }


    .toolbar-right {

        margin-left: auto;

    }


    .pages-container {

        padding: 10px;

        gap: 15px;

    }

}


/* =========================
   SCROLLBAR
========================= */

.viewer::-webkit-scrollbar,
.thumbnails::-webkit-scrollbar {

    width: 10px;

}


.viewer::-webkit-scrollbar-track,
.thumbnails::-webkit-scrollbar-track {

    background: #3b3b3b;

}


.viewer::-webkit-scrollbar-thumb,
.thumbnails::-webkit-scrollbar-thumb {

    background: #777;

    border-radius: 10px;

}


.viewer::-webkit-scrollbar-thumb:hover,
.thumbnails::-webkit-scrollbar-thumb:hover {

    background: #999;

}