/*
TO USE THIS CSS => with 
ref https://medium-zoom.francoischalifour.com/storybook/?selectedKind=options&selectedStory=template%20%28Dropbox%20Paper%29&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel
*/
.zoom-wrapper {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.zoom-container {
    width: 100%;
    height: calc(100% - 96px);
    margin: 0 auto;
}

.zoom-header {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 48px;
    width: 100%;
    padding: 5px 16px;
}

.zoom-footer {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 48px;
    padding: 1px 16px 0 16px;
}

.zoom-main {
    flex: 1;
    height: 100%;
}

.zoom-close {
    width: 20px;
    cursor: pointer;
    fill: white;
}