/* Super Panel: www.menucool.com/ui/super-panel */


/*---- panel ----*/
#panel1 {
    position:fixed;
    z-index:939597;
    top:2em;bottom:0;
    left:auto;right:2em;/*align to the right*/
    width:calc(100% - 4em);
	height:calc(100% - 4em);
    overflow:auto;
    padding:0;
    box-sizing:border-box;
    box-shadow:-4px 0 18px rgba(0,0,0,0.2);
    visibility:hidden;
}
#panel2 {
    position:fixed;
    z-index:939597;
    top:2em;bottom:0;
    left:auto;right:2em;/*align to the right*/
    width:calc(35% - 4em);
	height:calc(100% - 4em);
    overflow:auto;
    padding:0; 
    box-sizing:border-box;
    box-shadow:-4px 0 18px rgba(0,0,0,0.8);
    visibility:hidden;
}

#panel3 {
    position: fixed;
    z-index: 939597;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 5%;
    box-sizing: border-box;
    box-shadow: -4px 0 18px rgb(0 0 0 / 20%);
    visibility: hidden;
}
/*---- transparent layer ---- Available when the option transparentLayer is true in pane-panel.js */
.transparent-layer {
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    background-color:rgba(0,0,0,0.4);
    display:none;
    -webkit-transition:opacity 0.3s;
    transition:opacity 0.3s;
}



/*---- panel button ----*/
.panel-button{
    -ms-user-select:none;
    -mos-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    user-select:none;
	cursor: pointer;
}

#panel2 .panel-button,#panel1 .panel-button{
	font-size:1.2em;
	width:90%;
	padding:0.5em 5%;
	display:inline-block;
	text-transform:uppercase;
	text-align:right;}
#panel1 .panel-button{color:rgb(255,255,255);}