body {
background: #d7d7d7;
}
.wrapper {
display: flex;
}
#content {
padding: 20px;
width: calc(100% - 200px);
margin-left: 200px;
min-height: 100vh;
margin-top: 50px;
transition: all 0.3s;
}
#sidebar {
position: fixed;
height: 100%;
min-width: 200px;
max-width: 200px;
background: #1c1c1c;
color: #fff;
transform-origin: bottom left;
margin-top: 50px;
padding: 0;
padding-top: 20px;
-webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
-o-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
overflow: scroll;
overscroll-behavior: none;
-ms-overflow-style: none;
scrollbar-width: none;
}
#sidebar::-webkit-scrollbar {
display: none;
}
#sidebar ul {
position: relative;
float: left;
width: 100%;
}
#sidebar ul li{
position: relative;
float: left;
width: 100%;
margin: 5px 0;
}
#sidebar ul li .line{
position: relative;
float: left;
width: 5px;
height: calc(1.5em + 10px);
background: none;
border-radius: 0 2px 2px 0;
}
#sidebar ul li.active .line{
background: white;
}
#sidebar ul li a {
position: relative;
float: left;
width: calc(92% - 5px);
margin: 0 4%;
padding: 5px;
font-size: 1em;
line-height: 1.5em;
display: block;
color: white;
text-decoration: none;
border-radius: 4px;
transition: .5s;
}
#sidebar ul li a i{
position: relative;
float: left;
font-size: 1em;
margin: 0 5px;
}
#sidebar ul li a:hover {
background: rgba(255,255,255,0.075);
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
background: rgba(255,255,255,0.2);
}
#sidebar ul li ul{
margin-top: 2%;
}
#sidebar ul li ul li a {
width: 86%;
padding: 0;
margin: 1% 4% 0 10%;
line-height: 1em;
background: none;
color: rgba(255,255,255,.5);
}
#sidebar ul li ul li a:hover {
background: none;
color: rgba(255,255,255,.7);
}
#sidebar ul li.active ul li.active > a, a[aria-expanded="true"] {
background: none;
color: rgba(255,255,255,1);
}
a[data-toggle="collapse"] {
position: relative;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: rgba(255,255,255,0.1);
}
#topbar{
position: fixed;
float: left;
width: calc(100%);
height: 50px;
padding: 10px 20px;
background: white;
-webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
-o-box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
box-shadow: 0px 3px 5px 1px rgba(0,0,0,.2);
z-index: 9;
}
#topbar .logo{
position: absolute;
float: left;
height: 30px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#topbar .logo img{
height: 100%;
}
#progress-bar{
position: fixed;
float: left;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
/* MENÙ MOBILE */
#topbar #menu{position: absolute;float: right;right: 0;top:0;width: 30px;margin-top: 16.5px;margin-right: 20px;display: none;}
#topbar #menu .bar{position: relative;float: left;width: 100%;height: 3px;background: #343231;transition: .3s;border-radius: 2px;}
#topbar #menu .bar-2{margin: 4px 0;}
#topbar #menu.click .bar-1{margin-top: 8px;transform: rotate(45deg);}
#topbar #menu.click .bar-3{margin-top: -4px;transform: rotate(-45deg);}
#topbar #menu.click .bar-2{display: none;}

@media (max-width: 1000px){
#website-name{
display: none;
}
#content{
position: relative;
width: 100%;
min-height: auto;
margin-left: 0px;
}
.col-1, .col-2, .col-3, .col-4 {
width: 50%;
}
.col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
width: 100%;
}
#sidebar{
position: fixed;
width: 100%;
max-width: 100%;
min-width: 100%;
padding: 2% 0;
margin-top: -200%;
z-index: 8;
transition: 1s;
}
#sidebar ul li ul{
margin-top: 0%;
}
#topbar #menu{
display: block;
}
#sidebar .components {
position: relative;
float: left;
}
#sidebar.show {
margin-top: 50px;
}
#file{
width: 100%;
}
.titolo-img, #vecchia-img, .drop-zone{
width: 46%;
padding: 0;
margin: 2%;
height: 200px;
font-size: 15px;
}
#vecchia-img .testo{
line-height: 200px;
font-size: 15px;
}
#topbar .btn-danger{
display: none;
}
}

@media (max-width: 768px){
.col-1, .col-2 {
width: 50%;
}
.col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
width: 100%;
}
}