.peruser {
  position: absolute !important;
  top:100px;
  left:100px;
  min-width: 250px;
  width: 600px;
  min-height: 300px;
  height:300px;
  overflow: hidden;
}

.window {
  position: absolute !important;
  top:100px;
  left:100px;
  min-width: 250px;
  width: 600px;
  min-height: 300px;
  height:300px;
}



#toolbar {
  position: absolute;
  top: 0px;
  width: 100%;
  display: block;
  border-bottom: solid 1px #686868;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTRlNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I4YjdiOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e4e4e4), color-stop(100%, #b8b7b8));
  background: -moz-linear-gradient(#e4e4e4, #b8b7b8);
  background: -webkit-linear-gradient(#e4e4e4, #b8b7b8);
  background: linear-gradient(#e4e4e4, #b8b7b8);
  -moz-box-shadow: #f1f1f1 0 1px inset;
  -webkit-box-shadow: #f1f1f1 0 1px inset;
  box-shadow: #f1f1f1 0 1px inset;
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 0 0;
}

#windowname {
  text-align: center;
  font-size: 13px;
  line-height: 23px;
}
#windowname i {
  background: url("https://i.imgur.com/hhy5Y.png") no-repeat;
}

#actions {
  height: 31px;
}
#actions input {
  width: 278px;
  height: 17px;
  margin-right: 8px;
  float: right;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#back,
#next {
  width: 25px;
}

#back {
  margin-left: 8px;
  margin-right: 0;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
  color: #797979;
}
#back::after {
  content: "◄";
  top: 1px;
  left: 9px;
  font-size: 13px;
}

#next {
  left: -4px;
  border-left: 0px solid #767676;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
  color: #a4a4a4;
}
#next::after {
  content: "◄";
  top: 4px;
  left: 8px;
  font-size: 13px;
  text-shadow: 0px -1px -1px #fff;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#view {
  min-width: 117px;
  min-height: 200px;
  width: 100%;
  height: 100%;
  /* width: 650px; */
  /* height: 383px; */
}

#sidebar {
  width: 133px;
  height: 100%;
  background-color: #e7ebf0;
  -moz-box-shadow: -1px 0 #b8b8b8 inset;
  -webkit-box-shadow: -1px 0 #b8b8b8 inset;
  box-shadow: -1px 0 #b8b8b8 inset;
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0;
  border-radius: 0 0 0 6px;
  float: left;
  overflow:scroll;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* padd the underneath due to title bar */
#sidebar:after {
  content: "";
  display: block;
  height: 60px;
  width: 100%;
}



#sidebar ul {
  padding-top: 60px;
}


#sidebar ul, #sidebar li {
  padding: 5px;
}


.group {
  text-transform: uppercase;
  color: #707e8b;
  font-weight: bold;
  letter-spacing: 0px;
  line-height: 25px;
  padding: 5px;
}

#content {
  width: auto;
  height: 100%;
  background-color: #fff;
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0;
  border-radius: 0 0 6px 0;
  /* float: left; */
}

.folder2 {
  position: absolute;
}

.folder {
  position: absolute;
  /* width: 90px; */
  /* height: 90px; */
  /* margin: 0px 20px 21px 25px; */
  text-align: center;
  /* float: left; */
}
.folder span {
  display: inline-block;
  /* width: 82px; */
}

.factive {
  color: #fff;
  text-shadow: 0 0;
}
.factive::before {
  width: 72px;
  height: 72px;
  top: 4px;
  left: 9px;
  background-color: #cccccc;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
.factive span {
  background-color: #3875d7;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}


.icon {
  /* width: 64px;
  height: 56px;
  margin: 18px 13px 4px; */
}


/* sidebar selection */
.current_page {
  color: #f3ffff;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY3YjFkZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0ODljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #67b1df), color-stop(100%, #3489cc));
  background: -moz-linear-gradient(#67b1df, #3489cc);
  background: -webkit-linear-gradient(#67b1df, #3489cc);
  background: linear-gradient(#67b1df, #3489cc);
  -moz-box-shadow: #5aa5da 0 1px inset, #6fbae5 0 2px inset, #307cbc 0 -1px inset;
  -webkit-box-shadow: #5aa5da 0 1px inset, #6fbae5 0 2px inset, #307cbc 0 -1px inset;
  box-shadow: #5aa5da 0 1px inset, #6fbae5 0 2px inset, #307cbc 0 -1px inset;
}
.current_page .afiles {
  background: url("https://i.imgur.com/wBIjH.png") no-repeat;
}

#content{
  overflow: scroll;  
}




/* .icon {width:6em} */
.icon:hover span {display:none}
.icon:hover:before {content:"📂"}