/* ==========================================================
   CIBM Studio Pro
   Studio Shell
   Version 9.1
========================================================== */

:root {

    --title-height: 40px;
    --qat-height: 36px;
    --ribbon-height: 130px;
    --status-height: 28px;

    --left-dock-width: 280px;
    --right-dock-width: 320px;
    --bottom-dock-height: 220px;

    --background: #ffffff;
    --surface: #f5f5f5;
    --text: #202020;
    --border: #d0d0d0;
    --accent: #0066cc;

    --font: "Segoe UI", Arial, sans-serif;

}

/* ==========================================================
   Global
========================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family: var(--font);

    background: var(--background);

    color: var(--text);

}

/* ==========================================================
   Main Studio Shell
========================================================== */

#studio {

    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-rows:

        var(--qat-height)
        var(--ribbon-height)
        1fr
        var(--bottom-dock-height)
        var(--status-height);

}

/* ==========================================================
   Quick Access Toolbar
========================================================== */

#quickAccessToolbar {

    border-bottom: 1px solid var(--border);

    background: var(--surface);

    display: flex;

    align-items: center;

    padding: 0 8px;

}

/* ==========================================================
   Ribbon
========================================================== */

#ribbon {

    border-bottom: 1px solid var(--border);

    background: var(--surface);

    display: flex;

    flex-direction: column;

}

/* ==========================================================
   Workspace
========================================================== */

#workspace {

    display: grid;

    grid-template-columns:

        var(--left-dock-width)
        1fr
        var(--right-dock-width);

    overflow: hidden;

}

/* ==========================================================
   Dock Areas
========================================================== */

#dockLeft,
#dockRight,
#dockBottom {

    background: var(--surface);

    border: 1px solid var(--border);

    overflow: auto;

}

#dockBottom {

    border-top: 1px solid var(--border);

}

/* ==========================================================
   Viewport
========================================================== */

#viewportContainer {

    background: #888;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: auto;

}

#documentViewport {

    background: white;

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

    padding: 20px;

    min-width: 800px;

    min-height: 900px;

}

#pageCanvas {

    display: block;

}

/* ==========================================================
   Status Bar
========================================================== */

#statusBar {

    border-top: 1px solid var(--border);

    background: var(--surface);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 10px;

    font-size: 12px;

}

/* ==========================================================
   Floating Windows
========================================================== */

.overlay {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.35);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

}

.hidden {

    display: none;

}

/* ==========================================================
   Notifications
========================================================== */

#notificationArea {

    position: fixed;

    right: 20px;

    bottom: 40px;

    z-index: 99999;

}

/* ==========================================================
   Modal Container
========================================================== */

#modalContainer {

    position: fixed;

    inset: 0;

    pointer-events: none;

}