/* [SLIDER] */
#slider,  #slider .slide{
  width: 450px;
  height: 300px;
}
#slider {
  overflow: hidden;
  margin-top:10px;
  margin-right: -50px;
  margin-left: -50px;
  font-size: 1.2em;
}
#slider .container {
  position: relative;
  bottom: 0;
  right: 0;
  animation: slide-animation 35s infinite;
}
#slider .slide {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
}

/* [ANIMATION] */
@keyframes slide-animation {
  0% { 
    opacity: 0;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0; 
  }
  20% { bottom: 100%; }
  30% { bottom: 100%; }
  40% { bottom: 200%; }
  50% { bottom: 200%; }
  60% { bottom: 300%; }
  70% { bottom: 300%; }
  80% {
    opacity: 1;
    bottom: 400%; 
  }
  100% {
    opacity: 0;
    bottom: 400%;
  }
}
body{
	background-color: rgb(38, 34, 34);
}
h3{
	display: inline-block;
	margin: 10px;
	color: #fff;
font-family: "Gill Sans", sans-serif;
}
p{
	display: inline-block;
	margin: 10px;
	color: #ffff;
	font-family: "Gill Sans", sans-serif;
}

.link { font-family: Arial, tahoma, Helvetica, sans-serif; font-size: 11px; color: #3D5C85; text-decoration: none }
a:hover { font-family: Arial, tahoma, Helvetica, sans-serif; font-size: 11px; color: navy; text-decoration: underline}

.topmenu       {  font-family: Arial, Tahoma, Verdana; font-size: 13px; color: #2C5C94; text-decoration: none; font-weight: bold}
.topmenu:hover {  font-family: Arial, Tahoma, Verdana; font-size: 13px; color: #f0ad4e; text-decoration: none; font-weight: bold}

.topmenusmall      {  font-family: Arial, Tahoma, Verdana; font-size: 11px; color: #2C5C94; text-decoration: none; font-weight: normal}
.topmenusmall:hover {  font-family: Arial, Tahoma, Verdana; font-size: 11px; color: #f0ad4e; text-decoration: none; font-weight: normal}

.topmenubig       {  font-family: Arial, Tahoma, Verdana; font-size: 20px; color: #2C5C94; text-decoration: none; font-weight: bold}
.topmenubig:hover {  font-family: Arial, Tahoma, Verdana; font-size: 20px; color: #f0ad4e; text-decoration: none; font-weight: bold}

.txtHead {
	font-family: Arial,Verdana; font-size: 16px; font-weight: bold; text-decoration: normal;
	color:#202030;
	}

.txtTitle {
	font-family: Arial,Verdana; font-size: 14px; font-weight: bold; text-decoration: normal;
	color:#202030;
	}
	
.txtContent {
	font-family: Verdana,Arial; font-size: 12px; font-weight: normal; text-decoration: normal;
	color:#2E3249;
	}
	
.card{
	border-radius: 30px;
	box-shadow: 0 0 20px 0px  rgba(0, 0, 0, 0.20);
	margin:20px;
}
.card-header{
	background-color: rgb(247, 148, 72);
}
.card-body{
	margin-top: -20px;
}
.jam-digital-malasngoding {
	
		width: 180px;
    height: 30px;
		margin: 1px; 
	
	}
.kotak{
		float: left;
		width: 26px;
		height: 30px;
    margin-top:-3px;

	}
.jam-digital-malasngoding p {
		font-size: 15px;
    font-family: "Gill Sans", sans-serif;
		text-align: center;
		margin-top: 5px;
	}

#pegawai {
  display: inline-block;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  border: none;
  border-radius: 70px;
  box-shadow: 0 5px #ceeddf;
}
#pegawai:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#agenda{
  background-color: #f9d9ff;
  box-shadow: 0 5px #c752de;

}
#agenda2{
  background-color: #e9e9ff;
  box-shadow: 0 3px #7c9dac;
}
#agenda_jobok{
  background-color: #ffffff;
  box-shadow: 0 0px #ffffff;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  }

.table-responsive{
  overflow-y: hidden;
}
.table-responsive:hover{border-color:red;}
 
table{width:100%;}

.my-custom-scrollbar {
position: relative;
height: 520px;
overflow: auto;
}

.my-custom-scrollbar2 {
position: relative;
height: 240px;
overflow: auto;
}

.table-wrapper-scroll-y {
display: block;
}