.qweri-panel {
    
    position: fixed;
    top: 0;
    height: 100vh;
    
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    
    
    background-color: #fff;
    
    width: 80vw;
    max-width: 20em;

    -webkit-overflow-scrolling: touch;
    
    -webkit-transform: translate3d(0px, 0px, 0px);
       -moz-transform: translate3d(0px, 0px, 0px);
        -ms-transform: translate3d(0px, 0px, 0px);
         -o-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
            
    -webkit-transition: -webkit-transform .2s linear 0s,
                             margin-right .2s linear 0s;
                             
       -moz-transition:    -moz-transform .2s linear 0s,
                             margin-right .2s linear 0s;
                             
        -ms-transition:     -ms-transform .2s linear 0s,
                             margin-right .2s linear 0s;
                             
         -o-transition:      -o-transform .2s linear 0s,
                             margin-right .2s linear 0s;
                             
            transition:         transform .2s linear 0s,
                             margin-right .2s linear 0s;

    z-index: 1;
}

html.no-touch .qweri-panel {
    margin-right: 12px; /* The width of the splitter */
}

@media (min-width: 72em) {
    
    .qweri-panel {
    
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    
        position: relative;
        height: auto;
        
        max-width: 34em;
        z-index: auto;
     
    }
    
}

/*        */
/* NAVBAR */
/*        */

.qweri-panel > .navbar {
    
    margin-bottom: 0;
    
}

.qweri-panel > .navbar .navbar-inner {
    
    border-radius: 0;
    padding: 0;
    
}

.qweri-panel > .navbar .divider-vertical {

    border-left: 1px solid #d0d0d0;
    margin: 0;
    
}

.qweri-panel > .navbar li.disabled i[class^='icon-'],
.qweri-panel > .navbar li.disabled i[class*=' icon-'] {
    
    opacity: .4;
    
}

.qweri-panel .nav-panels li {
    
    position: relative;
    
    font-size: .8em;
    text-align: center;
    
}

.qweri-panel .nav-panels i[class^='icon-'],
.qweri-panel .nav-panels i[class*=' icon-'] {
    
    font-size: 1.6em;
    
}

.qweri-panel .nav-panels .navbar-label {
    
    /* Not yet, but soon in a future redesign of the side-panel */
    /*display: block;*/
    
}


.qweri-panel .nav-search .badge,
.qweri-panel .nav-notes .badge {
    
    display: none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
    right: -5%;
    position: absolute;
    top: -13%;
    z-index: 1;
}

.zoupio-bootstrap .label-info,
.zoupio-bootstrap .badge-info {
    background-color: #367DA0;
}

.qweri-panel .dropdown-toggle {
    
    font-size: .8em;
    
}

/*
 By default the annotation button IS NOT SHOWN.
*/
.qweri-panel #nav-notes-link {
	
	display: none;
	
}


/*            */
/* TAB PANELS */
/*            */

.qweri-panel > .tab-content {
	
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
    
    background-color: #fff;
    box-shadow: -10px 0px 15px -10px rgba(128, 128, 128, .4) inset;
    
    overflow-y: hidden;
    width: auto !important;

    -webkit-overflow-scrolling: touch;
    
    position: relative;
    
}

html.touch .qweri-panel > .tab-content {
    overflow-y: auto;
}

.qweri-panel .tab-pane {
	
    position: relative;
    
    height: 100%;
    width: auto !important;
    padding: 20px 20px 20px 12px;
    
    overflow-y: auto;
    
    -webkit-overflow-scrolling: touch;
}

.qweri-panel .tab-pane.tab-static {
    padding: 0;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
}

.qweri-panel .tab-pane.tab-static.active {
    display: flex;
    flex-direction: column;
}

/*          */
/* SPLITTER */
/*          */

.zoupio-splitter {
    display: inline-block;
    left: 100%;
    position: absolute;
    background-color: #050C25;
    border-radius: 0 6px 6px 0;
    box-shadow: -1px 0 1px rgba(0, 0, 0, 0.15);
    color: #fff;
    text-align: center;
}

html.no-touch .zoupio-splitter {
    padding: 20px 3px;
}

html.touch .zoupio-splitter {
    margin: 4px 13px;
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid #333;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
}

html.touch    .zoupio-splitter .splitter-desktop,
html.no-touch .zoupio-splitter .splitter-mobile,
html.touch    .zoupio-splitter.docked .icon-double-angle-left,
html.touch    .zoupio-splitter:not(.docked) .icon-double-angle-right {
    display: none;
}

html.no-touch .zoupio-splitter .splitter-desktop,
html.touch    .zoupio-splitter .splitter-mobile {
    display: inline-block;
}

html.no-touch .zoupio-splitter:hover {
    cursor: col-resize;
}

html.no-touch .zoupio-splitter.docked:hover {
    cursor: pointer;
}

#toggle-print-multi-selected .print-multi-selected-enable {
    padding: 0 1px;
}

#qweri-panel.print-active #toggle-print-multi-selected .print-multi-selected-enable,
#qweri-panel:not(.print-active) #toggle-print-multi-selected .print-multi-selected-disable {
    display: none;
}

html.touch #print-all,
html.touch #print-selected,
html.touch #toggle-print-multi-selected {
    display: none;
}