@media (min-width:1200px) { 
#LeftBlock { 
position: absolute; 
top: 0px; 
z-index: 999999; 
display: none; 
width: 0% !important; 
height: 100%; 
background: #d6d6d6; 
transition: all 0.3s; 
} 
#LeftBlock.active { 
width: 0% !important; 
display: block; 
} 
#LeftBlock #LeftModules { 
position: relative; 
float: left; 
display: none; 
width: 0% !important; 
min-width: 0% !important; 
max-width: 0% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules { 
position: relative; 
float: left; 
display: inline-block; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock.active .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #ffffff; 
color: #ba9797; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#LeftBlock .Button .btn i { 
font-size: 18px; 
} 
#LeftBlock #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#RightBlock { 
position: absolute; 
top: 0px; 
right: 0px; 
z-index: 9999999; 
display: none; 
width: 0%; 
height: 100%; 
background: #bd8484; 
transition: all 0.3s; 
} 
#RightBlock.active { 
width: 0%; 
display: block; 
} 
#RightBlock #RightModules { 
position: relative; 
float: left; 
display: none; 
width: 0%; 
min-width: 0%; 
max-width: 0%; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules { 
position: relative; 
float: left; 
display: block; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock.active .Button { 
position: relative; 
float: left; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #f2f2f2; 
color: #bebebe; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#RightBlock .Button .btn i { 
font-size: 18px; 
} 
#RightBlock #RightModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#RightBlock #RightModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#MiddleBlock { 
position: absolute; 
clear: both; 
top: 0px; 
z-index:1; 
min-height: 100px; 
display: block; 
background: #ffffff; 
padding: 0px 0px; 
left: 0%; 
right: 0%; 
transition: all 0.3s; 
} 
#MiddleBlock .container { 
clear: both; 
max-width: 90% !important; 
} 
#MiddleBlock .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active ~ #MiddleBlock{ 
left: 0%; 
} 
#RightBlock.active ~ #MiddleBlock{ 
right: 0%; 
} 
} 
@media screen and (min-width:992px) and (max-width:1199px) { 
#LeftBlock { 
position: absolute; 
top: 0px; 
z-index: 999999; 
display: none; 
width: 0% !important; 
height: 100%; 
background: #d6d6d6; 
transition: all 0.3s; 
} 
#LeftBlock.active { 
width: 0% !important; 
display: block; 
} 
#LeftBlock #LeftModules { 
position: relative; 
float: left; 
display: none; 
width: 0% !important; 
min-width: 0% !important; 
max-width: 0% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules { 
position: relative; 
float: left; 
display: inline-block; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock.active .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #ffffff; 
color: #ba9797; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#LeftBlock .Button .btn i { 
font-size: 18px; 
} 
#LeftBlock #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#RightBlock { 
position: absolute; 
top: 0px; 
right: 0px; 
z-index: 9999999; 
display: none; 
width: 0%; 
height: 100%; 
background: #bd8484; 
transition: all 0.3s; 
} 
#RightBlock.active { 
width: 0%; 
display: block; 
} 
#RightBlock #RightModules { 
position: relative; 
float: left; 
display: none; 
width: 0%; 
min-width: 0%; 
max-width: 0%; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules { 
position: relative; 
float: left; 
display: block; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock.active .Button { 
position: relative; 
float: left; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #f2f2f2; 
color: #bebebe; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#RightBlock .Button .btn i { 
font-size: 18px; 
} 
#RightBlock #RightModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#RightBlock #RightModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#MiddleBlock { 
position: absolute; 
top: 0px; 
z-index:1; 
display: inline-block; 
background: #ffffff; 
padding: 0px 0px; 
left: 0%; 
right: 0%; 
transition: all 0.3s; 
} 
#MiddleBlock .container { 
clear: both; 
max-width: 90% !important; 
} 
#MiddleBlock .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active ~ #MiddleBlock{ 
left: 0%; 
} 
#RightBlock.active ~ #MiddleBlock{ 
right: 0%; 
} 
} 
@media screen and (min-width:768px) and (max-width:991px) { 
#LeftBlock { 
position: fixed; 
top: 0px; 
z-index: 999999; 
display: none; 
width: 0% !important; 
height: 100%; 
background: #d6d6d6; 
transition: all 0.3s; 
} 
#LeftBlock.active { 
width: 0% !important; 
display: block; 
} 
#LeftBlock #LeftModules { 
position: relative; 
float: left; 
display: none; 
width: 0% !important; 
min-width: 0% !important; 
max-width: 0% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules { 
position: relative; 
float: left; 
display: inline-block; 
overflow-x: hidden; 
overflow-y: scroll; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules::-webkit-scrollbar { 
width:0px; 
} 
#LeftBlock.active #LeftModules::-scrollbar { 
width:0px; 
} 
#LeftBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock.active .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #ffffff; 
color: #ba9797; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#LeftBlock .Button .btn i { 
font-size: 18px; 
} 
#LeftBlock.active #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#RightBlock { 
position: fixed; 
top: 0px; 
right: 0px; 
z-index: 9999999; 
display: none; 
width: 0%; 
height: 100%; 
background: #bd8484; 
transition: all 0.3s; 
} 
#RightBlock.active { 
width: 0%; 
display: block; 
} 
#RightBlock #RightModules { 
position: relative; 
float: left; 
display: none; 
width: 0%; 
min-width: 0%; 
max-width: 0%; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules { 
position: relative; 
float: left; 
display: block; 
overflow-x: hidden; 
overflow-y: scroll; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules::-webkit-scrollbar { 
width:0px; 
} 
#RightBlock.active #RightModules::-scrollbar { 
width:0px; 
} 
#RightBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock.active .Button { 
position: relative; 
float: left; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #f2f2f2; 
color: #bebebe; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#RightBlock .Button .btn i { 
font-size: 18px; 
} 
#RightBlock #RightModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#RightBlock #RightModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#MiddleBlock { 
position: absolute; 
top: 0px; 
z-index:1; 
display: inline-block; 
background: #ffffff; 
padding: 0px 0px; 
left: 0%; 
right: 0%; 
transition: all 0.3s; 
} 
#MiddleBlock .container { 
clear: both; 
max-width: 90% !important; 
} 
#MiddleBlock .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
} 
@media screen and (max-width:767px) { 
#LeftBlock { 
position: fixed; 
top: 0px; 
z-index: 999999; 
display: none; 
width: 0% !important; 
height: 100%; 
background: #d6d6d6; 
transition: all 0.3s; 
} 
#LeftBlock.active { 
width: 0% !important; 
display: block; 
} 
#LeftBlock #LeftModules { 
position: relative; 
float: left; 
display: none; 
width: 0% !important; 
min-width: 0% !important; 
max-width: 0% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules { 
position: relative; 
float: left; 
display: inline-block; 
overflow-x: hidden; 
overflow-y: scroll; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 10px 0px; 
margin: 0px 0px; 
} 
#LeftBlock.active #LeftModules::-webkit-scrollbar { 
width:0px; 
} 
#LeftBlock.active #LeftModules::-scrollbar { 
width:0px; 
} 
#LeftBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock.active .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 10px; 
margin: 0px 0px; 
} 
#LeftBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #ffffff; 
color: #ba9797; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#LeftBlock .Button .btn i { 
font-size: 18px; 
} 
#LeftBlock #LeftModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#LeftBlock #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container { 
clear: both; 
min-width: 100% !important; 
max-width: 100% !important; 
} 
#LeftBlock.active #LeftModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#RightBlock { 
position: fixed; 
top: 0px; 
right: 0px; 
z-index: 9999999; 
display: none; 
width: 0%; 
height: 100%; 
background: #bd8484; 
transition: all 0.3s; 
} 
#RightBlock.active { 
width: 0%; 
display: block; 
} 
#RightBlock #RightModules { 
position: relative; 
float: left; 
display: none; 
width: 0%; 
min-width: 0%; 
max-width: 0%; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules { 
position: relative; 
float: left; 
display: block; 
overflow-x: hidden; 
overflow-y: scroll; 
width: 85% !important; 
min-width: 85% !important; 
max-width: 85% !important; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
background: transparent; 
padding: 15px 15px; 
margin: 0px 0px; 
} 
#RightBlock.active #RightModules::-webkit-scrollbar { 
width:0px; 
} 
#RightBlock.active #RightModules::-scrollbar { 
width:0px; 
} 
#RightBlock .Button { 
position: relative; 
float: right; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 100% !important; 
min-width: 100% !important; 
max-width: 100% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock.active .Button { 
position: relative; 
float: left; 
display: flex; 
justify-content: center; 
vertical-align: flex-start; 
width: 15% !important; 
min-width: 15% !important; 
max-width: 15% !important; 
height: 100% !important; 
min-height: 100% !important; 
background: transparent; 
padding-top: 15px; 
margin: 0px 0px; 
} 
#RightBlock .Button .btn { 
position: relative; 
display: flex; 
align-items: center; 
justify-content: center; 
vertical-align: middle; 
background: #f2f2f2; 
color: #bebebe; 
font-size: 18px; 
width: 40px; 
max-height: 40px; 
border: none; 
outline: none; 
} 
#RightBlock .Button .btn i { 
font-size: 18px; 
} 
#RightBlock #RightModules .container { 
clear: both; 
max-width: 100% !important; 
} 
#RightBlock #RightModules .container-fluid { 
clear: both; 
width: 100% !important; 
max-width: 100% !important; 
} 
#MiddleBlock { 
position: relative; 
top: 0px; 
z-index:1; 
display: inline-block; 
min-width: 100%; 
max-width: 100%; 
background: #ffffff; 
padding: 0px 0px; 
padding-left: 0%; 
padding-right: 0%; 
transition: all 0.3s; 
} 
#MiddleBlock .container { 
max-width: 100% !important; 
} 
#MiddleBlock .container-fluid { 
width: 100% !important; 
max-width: 100% !important; 
} 
}