/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

*,
*::before,
*::after {
  box-sizing: border-box;
} */
/* body {
  font-size: 0.75em !important;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif !important;
} */

.sticky {
  position: -webkit-sticky !important;
  position: sticky;
  top: 0;
  left: 0;
  /* width: auto; */
  /* margin-left: 100px; */
  /* right: auto; */
  /* padding: 5px; */
  /* background-color: #cae8ca; */
  /* border: 2px solid #4caf50; */
}
/* Side Navbar */

.sidebar {
  margin-left: 0px;
  padding: 40px 0px;
  width: 250px;
  position: fixed;
  height: 100%;
  overflow: auto;
  left: auto;
}
/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
  border-color: black;
}

/* Active/current link */
.sidebar a.active {
  background-color: #04aa6d;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 184px;
  padding: 20px 50px;
  /* height: auto; */
  margin-right: 0;
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 600px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
/* End of Side Navbar */
.gambar {
  width: 40px;
}
.gambarfolder {
  width: 40px;
  transition: transform .3s;
}
.gambarfolder:hover {
  -ms-transform: scale(8); /* IE 9 */
  -webkit-transform: scale(8); /* Safari 3-8 */
  transform: scale(8); 
}
.gambarside {
  width: 42px;
  float: left;
  height: 42px;
}
.jempol {
  width: 110px;
}

.table > tbody > tr > * {
  vertical-align: middle;
}

.bg-chan {
  background-color: #585307e0;
}

/* Login Form */
#LoginPage {
  background-color: #d2c889;
  text-align: center;
  padding: 10px;
  width: 530px;
  height: 330px;
}

/* CSS UPLOAD DRAG DROP */
/**
 *
 * Style.css
 *
 */
.containerdd {
  padding: 50px 200px;
}
.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}
.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;
}
.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}
.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 50px;
  font-size: 16px;
}
.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  height: 150px;
  cursor: pointer;
  opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}
.preview-zone {
  text-align: center;
}
.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
.btn-cedar {
  background-color: #3c5e8f !important;
}

/* unvisited link */
a:link {
  /* color: #fafbfc !important; */
  text-decoration: white !important;
}

/* visited link */
/* a:visited {
  color: green !important;
} */

/* mouse over link */
/* a:hover {
  color: rgb(158, 126, 142) !important;
} */

/* selected link */
/* a:active {
  color: blue !important;
} */

.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

/* tasks */

/* .tasks1 {
  list-style: none;
  margin: 0;
  padding: 0;
} 

.task1 {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dfdfdf;
}

.task1:last-child {
  border-bottom: none;
}
*/
/* context menu */

/* .context-menu1 {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 12px 0;
  width: 240px;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  box-shadow: 1px 1px 2px #cfcfcf;
}

.context-menu1--active {
  display: block;
}

.context-menu__items1 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu__item1 {
  display: block;
  margin-bottom: 4px;
}

.context-menu__item1:last-child {
  margin-bottom: 0;
}

.context-menu__link1 {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}

.context-menu__link1:hover {
  color: #fff;
  background-color: #0066aa;
} */

/* #context-menu {
  position: fixed;
  z-index: 10000;
  width: 150px;
  background: #1b1a1a;
  transform: scale(0);
  transform-origin: top left;
}
#context-menu.active {
  transform: scale(1);
  transition: transform 200ms ease-in-out;
}
#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
}
#context-menu .item:hover {
  background: #555;
}
#context-menu .item i {
  display: inline-block;
  margin-right: 5px;
} */

#menu {
  display: none;
}