/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15 Sep 2021, 15:57:53
    Author     : robert
*/
.top-panel-right{    
    position: fixed;
    height: 100%;
    width: 100%;
    right: -100%;
    left: 100%;
    top: 0;
    bottom: 0;    
    background-color: whitesmoke; 
    box-shadow: rgba(0,0,0,0.3) 0px 1px 4px -1px;
    z-index: 10000;    
    transition: 0.5s;  
}
.side-panel-right-show{
    left: 0;
    right: 0;
}
.side-panel-right-hide{
    left: 100%;
    right: -100%;
}

.top-panel-left{    
    position: fixed;
    height: 100%;
    width: 100%;
    right: 100%;
    left: -100%;
    top: 0;
    bottom: 0;    
    background-color: whitesmoke; 
    box-shadow: rgba(0,0,0,0.3) 0px 1px 4px -1px;
    z-index: 10000;    
    transition: 0.5s;  
}
.side-panel-left-show{
    left: 0;
    right: 0;
}
.side-panel-left-hide{
    left: -100%;
    right: 100%;
}

/*mobile with CSS pixel width 576px and up*/
@media only screen and (min-width:576px){

}

/*tablets with CSS pixel width 768px and up*/
@media only screen and (min-width:768px){

}

/*laptops with CSS pixel width 992px and up*/
@media only screen and (min-width:992px){
    .top-panel-right, .top-panel-left{
        width: 30%;        
    }
    .side-panel-right-show{
        left: 70%;
        right: 0;
    } 
    .side-panel-left-show{
        left: 0;
        right: 70%;
    }    
}

/*large screens with CSS pixel width 1200px and up*/
@media only screen and (min-width:1200px){
    .top-panel-right, .top-panel-left{
        width: 40%;        
    }    
    .side-panel-right-show{
        left: 60%;
        right: 0;
    } 
    .side-panel-left-show{
        left: 0;
        right: 60%;
    }
}