/*=============================================================================================	

	Author : Muhammad Febriansyah

	Date       : Mei 2017

==============================================================================================*/

@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");

body {
  color: #2a2728;

  font-size: 14px;

  font-family: "Source Sans Pro", sans-serif;

  font-weight: 400;
}

.wow {
  visibility: hidden;
}

.overflowHidden {
  overflow: hidden;
}

.animated {
  -webkit-animation-duration: 1s;

  -moz-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  -moz-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-animation-timing-function: ease;

  -moz-animation-timing-function: ease;

  animation-timing-function: ease;
}

img {
  border: 0;

  max-width: 100%;

  height: auto;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.regular {
  font-weight: lighter;
}

.left {
  float: left;

  display: inline;
}

.right {
  float: right;

  display: inline;
}

.relative {
  position: relative;
}

.clear {
  clear: both;
}

a {
  text-decoration: none;

  color: #cc9e3a;

  transition: all 0.2s ease-in-out 0s;

  -o-transition: all 0.2s ease-in-out 0s;

  -ms-transition: all 0.2s ease-in-out 0s;

  -moz-transition: all 0.2s ease-in-out 0s;

  -webkit-transition: all 0.2s ease-in-out 0s;
}

strong {
  font-weight: 700;
}

p {
  margin: 1px 0 15px;

  line-height: 25px;
}

input,
textarea,
select {
  font-size: 14px;

  font-family: "Open Sans", sans-serif;

  border: none;

  border: 1px solid #c9c9c9;

  padding: 5px;

  margin: 0;

  color: #666;
}

img {
  margin-bottom: -3px;
}

input[type="checkbox"],
input[type="radio"] {
  border-top-style: none;

  border-right-style: none;

  border-bottom-style: none;

  border-left-style: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  outline: none;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

section {
  position: relative;
}

.rows {
  padding: 10px 0;
}

.rows p {
  color: #666;
}

.text-center {
  text-align: center;
}

.hide {
  display: none !important;
}

.desktop-look {
  display: block;
}

.mobile-look,
.mobile-trigger {
  display: none;
}

/* structure

----------------------------------------------------------------------------------------------*/

.wrapper {
  width: 1100px;

  margin: 0 auto;
}

.mid-wrapper {
  width: 960px;

  margin: 0 auto;
}

.inner_wrap {
  width: 800px;

  margin: 0 auto;
}

.afterclear:after {
  clear: both;

  content: "";

  display: block;
}

.wrap-content {
  width: 100%;

  padding-left: 20px;

  padding-right: 20px;
}

select {
  margin: 0 0px 0 0;

  border: 1px solid #111;

  background: transparent;

  max-width: 100%;

  height: auto !important;

  padding: 5px 35px 5px 5px;

  font-size: 12px;

  border: 1px solid #ccc;

  border-radius: 5px;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  background: url(../images/material/select.png) 96% no-repeat #fff;
}

/* CAUTION: IE hackery ahead */

select::-ms-expand {
  display: none; /* remove default arrow in IE 10 and 11 */
}

/* style button

----------------------------------------------------------------------------------------------*/

/* style header

----------------------------------------------------------------------------------------------*/

#mainheader {
  padding: 0;

  position: fixed;

  top: 0;

  width: 100%;

  left: 0;

  z-index: 999;
}

.top-header {
  padding: 9px 0;

  width: 100%;

  display: block;

  background: #1e1e1e;

  /*background: #272264;*/

  position: relative;

  height: 55px;
}

.top-header:after {
  width: 100%;

  height: 5px;

  background: #f6ec32;

  background: -moz-linear-gradient(left, #f6ec32 0%, #ffb241 100%);

  background: -webkit-linear-gradient(left, #f6ec32 0%, #ffb241 100%);

  background: linear-gradient(to right, #f6ec32 0%, #ffb241 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6ec32', endColorstr='#ffb241',GradientType=1 );

  position: absolute;

  bottom: 0;

  left: 0;
}

.user-menu {
  padding: 10px 0 0 0;
}

.user-menu,
.user-menu a {
  color: #fff;
}

.user-menu .left {
  /*margin: 0 0px;*/

  margin: 0 5px;
}

.user-menu .welcome-text {
  font-size: 12px;

  margin-right: 10px;
}

.user-menu .user-icon i {
  font-size: 16px;
}

.notif-icon {
  position: absolute;

  top: -9px;

  right: 10px;

  width: 14px;

  height: 14px;
}

.user-thumb-small {
  width: 30px;

  height: 30px;

  border-radius: 50%;

  overflow: hidden;

  position: relative;

  margin-top: -5px;
}

.user-thumb-small img {
  width: 100%;

  height: 100%;

  top: 0;

  object-fit: cover;
}

.user-thumb .fa-caret-down {
  font-size: 23px;

  position: absolute;

  right: -20px;

  top: 0px;
}

.bottom-header {
  width: 100%;

  display: block;

  background: #f3f4f4;

  padding: 0px 0;
}

.bottom-header:after,
.bottom-header:before {
  content: "";

  display: table;
}

.bottom-header:after {
  content: "";

  clear: both;
}

.main-menu {
  padding: 0;

  margin: 0;

  list-style: none;
}

.main-menu li {
  float: left;
}

.main-menu li a {
  /*font-size: 13px;*/

  font-size: 15px;

  display: block;

  padding: 9px 20px 6px;

  font-weight: 600;

  border-bottom: 5px solid transparent;
}

.main-menu li a.active,
.main-menu li a:hover {
  border-bottom: 5px solid;
}

/*---------------------login----------------------*/

/* style Content

----------------------------------------------------------------------------------------------*/

#middle-content {
  margin: 95px 0 90px 0;
}

.hari-tgl {
  color: #0e3f68;

  font-size: 15px;

  text-transform: uppercase;

  padding: 20px 0;

  /* padding: 20px 0px; */
}

.add-news {
  border-bottom: 2px solid #0e3f68;

  margin-bottom: 10px;

  padding-bottom: 10px;
}

.filter {
  color: #999;

  font-size: 15px;
}

.left-absensi {
  display: inline-block;

  vertical-align: top;

  width: 80%;
}

.right-absensi {
  display: inline-block;

  vertical-align: top;

  width: 19%;

  padding-left: 50px;
}

#orangecircle > span {
  color: #ccc;

  font-weight: 600;
}

.table-absensi table {
  width: 100%;

  margin-bottom: 20px;
}

.table-absensi table tr {
  border-bottom: 1px solid #ccc;
}

.table-absensi table tr:last-child {
  border-bottom: none;
}

.table-absensi table tr td {
  padding: 10px 20px;

  position: relative;
}

.table-absensi table tr .list-Jam i {
  font-size: 28px;

  color: #fcb040;

  margin-right: 5px;
}

.table-absensi table tr .list-Jam .jamnya {
  color: #0e3f68;

  font-size: 28px;

  font-weight: 600;
}

.table-absensi table tr .list-tugasnya i {
  font-size: 18px;

  color: #fcb040;

  margin-right: 5px;

  display: inline-block;

  width: 16px;

  height: 18px;

  vertical-align: top;

  position: absolute;

  left: 0;

  top: 13px;
}

.table-absensi table tr .list-tugasnya .tugasnya {
  color: #0e3f68;

  font-size: 16px;

  display: inline-block;

  width: 255px;

  vertical-align: top;
}

.box-berita {
  background: #f7f8f8;

  padding: 10px;
}

.big-berita {
  display: inline-block;

  width: 70%;

  vertical-align: top;

  padding: 5px 10px;
}

.small-berita {
  display: inline-block;

  width: 29%;

  vertical-align: top;

  /*padding-left: 30px;*/
}

/* .mdi-newspaper{

	display: none;

} */

.mdi-orange {
  display: block;

  float: left;

  margin-right: 5px;

  margin-top: -10px;
}

.images-berita {
  display: inline-block;

  vertical-align: top;

  padding-bottom: 10px;
}

.big-berita .images-berita {
  width: 450px;

  margin-right: 10px;

  margin-left: 10px;
}

.berita-active {
  background: #ffffff;
}

.caption-berita {
  display: inline-block;

  vertical-align: top;
}

.caption-berita-active {
  display: inline-block;

  vertical-align: top;

  /*margin-left: 28px;*/
}

.caption-berita-active h3 {
  font-size: 18px;

  /*color: #0e3f68;*/

  color: #f2810d;

  margin: 0 0 5px 0;
}

.big-berita .caption-berita {
  width: 34%;
}

.caption-berita h3 {
  font-size: 28px;

  color: #0e3f68;

  margin: 0 0 5px 0;
}

.caption-berita h3:hover {
  color: #fcb040;
}

.rows-berita {
  border-bottom: 1px solid #ececec;

  padding: 15px 0;
}

.rows-berita:last-child {
  border-bottom: none;
}

.rows-berita .caption-berita h3 {
  font-size: 16px;
}

.caption-berita p {
  color: #0e3f68;

  font-size: 14px;
}

.caption-berita span.menit {
  font-size: 13px;

  color: #fcb040;
}

.list-beststaff {
  margin-left: -2px;

  margin-right: -2px;

  margin-top: 30px;
}

.list-beststaff:after,
.list-beststaff:before {
  content: "";

  display: table;
}

.list-beststaff:after {
  content: "";

  clear: both;
}

.beststaff {
  position: relative;

  width: 16.66%;

  min-height: 1px;

  float: left;

  padding-right: 2px;

  padding-left: 2px;

  margin-bottom: 15px;

  text-align: center;
}

.beststaff .orangebg {
  background: #f89a25;

  padding: 20px;

  text-align: center;

  height: 100%;
}

.beststaff .bluebg {
  background: #0e3f68;

  padding: 20px;

  text-align: center;

  height: 100%;
}

.beststaff .orangebg h3 {
  font-size: 28px;

  text-transform: uppercase;

  color: #fff;

  margin: 15px 0;
}

.beststaff .bluebg p {
  color: #fff;

  font-size: 16px;

  margin: 0;
}

.staff-circle {
  display: inline-block;

  width: 90px;

  height: 90px;

  border-radius: 50%;

  overflow: hidden;

  position: relative;

  z-index: 2;
}

/* .staff-circle img {
  max-width: 110px;

  width: 110px;

  position: absolute;

  top: 0;

  margin-left: -55px;

  z-index: 1;

  left: 50%;
} */

.number-staff {
  font-size: 30px;

  color: #fcb040;

  position: absolute;

  left: 10px;

  top: 10px;
}

.row-list {
  margin-left: -15px;

  margin-right: -15px;
}

.row-list:after,
.row-list:before,
.hour-row-list:after,
.hour-row-list:before {
  content: "";

  display: block;
}

.row-list:after,
.hour-row-list:after {
  content: "";

  clear: both;
}

.cols3,
.cols-5,
.cols-2 {
  width: 33.33%;

  float: left;

  position: relative;

  min-height: 1px;

  padding-left: 15px;

  padding-right: 15px;

  margin-bottom: 15px;
}

.cols4 {
  width: 25%;

  float: left;

  position: relative;

  min-height: 1px;

  padding-left: 15px;

  padding-right: 15px;

  margin-bottom: 15px;
}

.cols2 {
  width: 50%;

  float: left;

  position: relative;

  min-height: 1px;

  padding-left: 15px;

  padding-right: 15px;

  margin-bottom: 15px;
}

.box-location {
  background: #f7f8f8;

  display: block;

  width: 100%;
}

.date-rows {
  background: #fafafa;
}

.date-info:before,
.date-info:after {
  content: "";

  display: table;
}

.date-info:after {
  content: "";

  clear: both;
}

.wrap-content {
  width: 100%;

  padding-left: 20px;

  padding-right: 20px;
}

.date-rows .date-info i {
  color: #fcb040;

  margin-right: 5px;

  font-size: 18px;
}

.date-rows .date-text span {
  color: #0c4266;

  /*font-size: 14px;*/

  font-size: 16px;

  font-weight: 600;

  line-height: 32px;
}

.timeline {
  width: 100%;

  max-width: 800px;

  position: relative;
}

.timeline:before {
  content: "";

  position: absolute;

  top: 0px;

  left: calc(15% + 12px);

  bottom: 0px;

  border-left: 2px dotted #000;
}

.timeline:after {
  content: "";

  display: table;

  clear: both;
}

.entry {
  clear: both;

  text-align: left;

  position: relative;
}

.entry .title {
  margin-bottom: 0.5em;

  float: left;

  width: 15%;

  padding-right: 30px;

  text-align: right;

  position: relative;
}

.entry .title:before {
  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  border: 5px solid #0b4471;

  background-color: #fff;

  border-radius: 100%;

  top: 15%;

  right: -18px;

  z-index: 2;
}

.entry .title h3 {
  margin: 0;

  font-size: 20px;

  font-weight: 600;

  color: #0c4266;
}

.entry .title p {
  margin: 0;

  font-size: 18px;

  font-weight: 400;

  color: #0c4266;

  text-transform: uppercase;
}

.entry .body {
  margin: 0 0 3em;

  float: right;

  width: 85%;

  padding-left: 30px;
}

.entry .body p {
  line-height: 1.4em;

  font-size: 18px;

  color: #0c4266;

  font-weight: 600;

  display: flex;
}

.entry .body p:first-child {
  margin-top: 0;

  font-weight: 600;
}

.entry .body ul {
  color: #aaa;

  padding-left: 0;

  list-style-type: none;
}

.entry .body ul li:before {
}

.loc-time {
  display: inline-block;

  width: 15%;

  vertical-align: top;

  text-align: right;

  font-size: 16px;

  color: #0c4266;

  font-weight: 600;
}

.loc-place {
  display: inline-block;

  width: 74%;

  vertical-align: top;

  text-align: left;

  padding-left: 20px;
}

.entry .body .loc-place p:first-child,
.entry .body .loc-times p:first-child {
  font-size: 16px;

  color: #0c4266;

  font-weight: 600;
}

.entry .body .loc-place p {
  font-size: 14px;

  color: #0c4266;

  margin: 0;

  font-weight: 400;
}

.entry .body ul li {
  margin-bottom: 10px;
}

.box-loc-content {
  padding-left: 20px;

  /*padding-top: 10px;*/

  padding-top: 20px;

  padding-bottom: 10px;

  padding-right: 20px;
}

.scroll-pane {
  width: 100% !important;

  height: 389px;

  overflow: auto;
}

.table-pane {
  width: 100%;

  height: 389px;

  overflow: auto;
}

.horizontal-only {
  height: auto;

  max-height: 400px;
}

.jspDrag {
  background: #ccc;
}

.jspTrack {
  background: #ddd;
}

.date-list {
  display: inline-block;

  /*width: 15%;*/

  width: 100%;

  vertical-align: top;

  text-align: left;

  margin-bottom: 10px;

  /*text-align: center;*/
}

.caption-list {
  display: inline-block;

  /*width: 94%;*/

  width: 100%;

  vertical-align: top;

  text-align: left;

  background: #293c51;

  /*padding-left: 5px;*/
}

.mdi-calendar-edit:before {
  font-size: 14px;

  display: block;

  float: right;
}

.block-list p strong {
  color: #fdc503;
}

.date-list span.number {
  font-size: 24px;

  font-weight: 600;

  color: #0c4266;
}

.date-list span.day {
  /*font-size: 20px;*/

  font-size: 11px;

  font-weight: 400;

  color: #0c4266;

  text-transform: uppercase;
}

.block-list {
  width: 100%;

  display: block;

  padding: 10px;

  margin-bottom: 5px;
}

.block-list p {
  color: #fff;

  font-size: 14px;

  margin-bottom: 0px;

  line-height: 20px;

  /*line-height: 16px;*/
}

.block-list.red {
  background: #bd2323;
}

.block-list.blue {
  background: #0f75bd;
}

.block-list.yellow {
  background: #fd6103;
}

.block-list.pink {
  background: #ed008d;
}

.block-list.green {
  background: #257e4a;
}

.block-list.white {
  background: #d0d0d0;
}

.block-list.grey {
  background: #666;
}

.left-tugas-content {
  display: inline-block;

  vertical-align: top;

  width: 75%;

  padding-right: 30px;
}

.right-tugas-content {
  display: inline-block;

  vertical-align: top;

  width: 24%;
}

.breadcumb a {
  color: #999;

  font-weight: 400;

  font-size: 13px;
}

.breadcumb a:after {
  content: ">";

  margin-left: 3px;

  margin-right: 3px;
}

.breadcumb a:last-child:after {
  content: "";
}

.row-list-tugas {
  margin: 20px 0;

  background: #f7f6f6;

  padding: 10px 10px 0 10px;
}

.row-list-tugas .row {
  margin-left: 0;
}

.insert-row {
  padding: 5px 0;

  border-bottom: 1px solid #cdcdcd;

  overflow: hidden;
}

.insert-row:last-child {
  border-bottom: none;
}

.insert-row .icon-first {
  /*font-size: 28px;*/

  font-size: inherit;

  color: #666;

  margin-right: 5px;

  margin-bottom: 10px;

  margin-top: 5px;

  display: inline-block;

  vertical-align: top;
}

.insert-row .jamnya {
  color: #474747;

  font-size: 28px;

  font-weight: 600;

  vertical-align: top;

  width: 90%;

  padding-left: 15px;
}

.insert-row .tugasnya {
  color: #474747;

  font-weight: normal;

  display: inline-block;

  vertical-align: top;

  width: 80%;

  padding-left: 15px;

  font-size: 13px;
}

.insert-row .tugasnya a {
  font-size: 18px;

  font-weight: bold;
}

.insert-row .tugasnya div {
  color: #f17132;

  font-size: 14px;
}

.btn-selesai {
  text-align: left;
}

.insert-row .left {
  width: 70%;
}

.insert-row .right {
  width: 30%;
}

.insert-row .right {
  text-align: right;
}

.orange-button {
  display: inline-block;

  background: #f79d34; /* Old browsers */

  margin-top: 10px;

  /*padding: 10px 20px;*/

  padding: 8px 13px;

  border-radius: 5px;

  color: #fff;

  text-align: center;

  font-size: 11px;

  text-transform: uppercase;

  font-weight: 800;
}

.grey-button {
  display: inline-block;

  /*background: #ccc;*/ /* Old browsers */

  /*padding: 10px 20px;*/

  /*color: #fff;*/

  color: #4dc1be;

  text-align: center;

  /*font-size: 16px;*/

  font-size: 14px;

  text-transform: uppercase;

  font-weight: 800;
}

.box-c-content {
  background: #f3efd2;

  border-radius: 10px;

  padding: 10px;

  /*padding: 15px;*/

  color: #474747;
}

.box-c-content p {
  font-size: 16px;

  font-weight: 600;

  margin: 0 0 15px;

  /*margin: 0;*/
}

.box-c-content .percircle {
  float: none;

  display: inline-block;
}

.circle-plus {
  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #efdd4a;

  color: #fff;

  font-size: 34px;

  text-align: center;

  position: fixed;

  bottom: 70px;

  right: 20px;
}

.grey-c-button {
  display: inline-block;

  background: #f1f1f1; /* Old browsers */

  padding: 10px 15px;

  color: #9d9ea2 !important;

  text-align: center;

  font-size: 14px !important;

  /* text-transform: uppercase !important; */

  /* font-weight: 800; */

  border-radius: 5px;

  margin-right: 5px;

  border: 1px solid #e9e9e9;

  margin-bottom: 10px;
}

.header-box-c,
.header-box-c2 {
  border-radius: 10px 10px 0 0;

  margin-top: -10px;

  padding: 10px;

  text-align: center;

  color: #fff;

  /*background: #c4942c;*/

  background: #c4622c;

  margin-right: -10px;

  margin-left: -10px;

  font-size: 18px;

  text-transform: uppercase;

  margin-bottom: 10px;
}

.header-box-c2 {
  background: #c4622c;
}

.box-c-content a {
  font-size: 18px;

  color: #c4622c;

  text-transform: uppercase;
}

.timenya {
  font-size: 24px;
}

.box-salem {
  width: 100%;

  background: #ffe1e1;

  color: #3f3f3f;

  padding: 10px;

  border-radius: 5px;
}

.box-salem .icon-sign {
  width: 32px;

  height: 32px;
}

.box-salem p {
  color: #3f3f3f;

  margin: 0;

  width: 63%;

  font-size: 18px;
}

.box-salem p,
.box-salem .icon-sign {
  display: inline-block;

  margin-right: 15px;

  vertical-align: middle;
}

.tugas-detail .left {
  width: 75%;

  padding-right: 30px;
}

.tugas-detail .right {
  width: 25%;
}

.tugas-detail h3,
.tugas-detail h1 {
  margin: 0;
}

.list-checkbox {
  margin: 10px 0;
}

/* Base for label styling */

.list-checkbox [type="checkbox"]:not(:checked),
.list-checkbox [type="checkbox"]:checked {
  position: absolute;

  left: -9999px;
}

.list-checkbox [type="checkbox"]:not(:checked) + label,
.list-checkbox [type="checkbox"]:checked + label {
  position: relative;

  padding-left: 1.95em;

  cursor: pointer;
}

/* checkbox aspect */

.list-checkbox [type="checkbox"]:not(:checked) + label:before,
.list-checkbox [type="checkbox"]:checked + label:before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 1.25em;

  height: 1.25em;

  border: 2px solid #ccc;

  background: #fff;

  border-radius: 4px;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* checked mark aspect */

.list-checkbox [type="checkbox"]:not(:checked) + label:after,
.list-checkbox [type="checkbox"]:checked + label:after {
  /*  content: '✔';*/

  /*	content: '\2714';*/

  /*content: '\f00c';*/

  /*font-family: FontAwesome;*/

  content: "\f12c";

  font: normal normal normal 24px/1 "Material Design Icons";

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  font-size: 1.3em;

  line-height: 0.8;

  color: #09ad7e;

  transition: all 0.2s;
}

/* checked mark aspect changes */

.list-checkbox [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;

  transform: scale(0);
}

.list-checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;

  transform: scale(1);
}

/* disabled checkbox */

.list-checkbox [type="checkbox"]:disabled:not(:checked) + label:before,
.list-checkbox [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;

  border-color: #bbb;

  background-color: #ddd;
}

.list-checkbox [type="checkbox"]:disabled:checked + label:after {
  color: #999;
}

.list-checkbox [type="checkbox"]:disabled + label {
  color: #aaa;
}

/* accessibility */

.list-checkbox [type="checkbox"]:checked:focus + label:before,
.list-checkbox [type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* hover style just for information */

label:hover:before {
  border: 2px solid #4778d9 !important;
}

.time-pekerjaan {
  color: #3f3f3f;

  font-size: 28px;

  margin: 0;

  margin-left: 15px;

  font-weight: 700;
}

.time-pekerjaan span.smallest {
  font-size: 22px;
}

.input-tugasnya {
  border-top: 3px solid #ffcd03;
}

#file-input,
#file-input2 {
  display: none;
}

.inputFile,
.inputFile2 {
  background: url(../images/material/browse.jpg) right center no-repeat;

  padding: 10px 10px;
}

#buatPesan .inputFile {
  background: url(../images/material/browse2.jpg) right center no-repeat;

  padding-right: 110px;
}

.row-input-tugas .input-form {
  width: 100%;
}

.big-circle img {
  width: 40%;
}

.profile-caption div {
  float: left;

  width: 70%;

  margin-left: 10px;
}

.profile-caption h3 {
  margin-bottom: 20px;
}

.orange-btn {
  display: inline-block;

  /*background: #f6de35;*/

  /*background: -moz-linear-gradient(top, #f6de35 0%, #fad03b 100%);*/

  background: -webkit-linear-gradient(top, #f6de35 0%, #fad03b 100%);

  /*background: linear-gradient(to bottom, #f6de35 0%,#fad03b 100%);*/

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6de35', endColorstr='#fad03b',GradientType=0 );

  padding: 10px 20px;

  /*color: #333;*/

  color: #666;

  text-align: center;

  font-size: 16px;

  font-weight: 800;

  border: none;

  margin-bottom: 15px;
}

.big-btn {
  border-radius: 0;

  margin: 0;

  padding: 10px 50px;

  font-size: 22px;
}

.notif-msg {
  font-size: 18px;

  font-weight: 600;

  color: #0e3f68;
}

.orange {
  color: #fcb040;
}

.notif-user .fa {
  color: #ddd;
}

.notif-user span {
  float: left;

  display: block;

  margin-right: 10px;
}

.berita-page .box-berita {
  background: #fff;
}

.judul-detail {
  font-size: 26px;

  color: #0e3f68;

  margin: 0 0 5px 0;
}

span.menit {
  font-size: 13px;

  color: #fcb040;
}

.isi-berita {
  color: #646464;
}

.row-form-tugas {
  padding: 10px 0;
}

.row-form-tugas .label-form {
  font-size: 16px;

  color: #6b6b6b;

  margin-bottom: 5px;

  display: block;

  width: 100%;
}

.row-form-tugas select,
.row-form-tugas .input-tugasnya,
.row-form-tugas textarea {
  width: 100%;

  padding: 5px 10px;
}

.table-absensinya table {
  width: 100%;
}

.table-absensinya table tr th {
  border-top: 3px solid #ffcd03;

  border-bottom: 1px solid #ffcd03;

  padding: 10px;

  font-size: 14px;

  font-weight: 700;

  text-align: left;
}

.table-absensinya table tr td {
  font-size: 14px;

  padding: 10px;

  text-align: left;

  border: none;
}

.tabs-konten-menu {
  overflow: hidden;

  margin-bottom: 15px;
}

.tabs-konten-menu span {
  font-size: 16px;

  color: #1f3065;
}

.filter-rangking {
  display: inline-block;

  margin-left: 10px;

  font-size: 18px;

  color: #1f3065;

  font-weight: 700;

  opacity: 0.5;
}

.filter-rangking:hover,
.filter-rangking.active {
  opacity: 1;
}

.content-karyawan .beststaff {
  width: 20%;
}

.content-karyawan .bluebg {
  background: #f7f7f7;

  height: auto;
}

.content-karyawan .number-staff {
  color: #1f3065;

  font-size: 16px;
}

.content-karyawan .beststaff .bluebg p {
  margin: 0;

  color: #1f3065;
}

.content-karyawan .beststaff .bluebg p.nama-kar {
  font-weight: 700;

  line-height: 14px;

  margin-top: 10px;
}

.point {
  display: block;

  width: 100%;

  font-size: 24px;

  color: #1f3065;

  text-align: center;

  padding: 5px 10px;

  font-weight: 700;

  background: #ffcd03;
}

.calendar-block table {
  width: 100%;
}

.muted {
  color: #999999;
}

.row-calendar .cols4.text-bulannya {
  width: 15% !important;
}

.row-calendar .cols4 {
  width: 27.33% !important;
}

.list-event {
  margin-top: 40px;
}

.list-event table {
  width: 100%;
}

.list-event table tr td {
  padding: 10px;

  border-bottom: 1px solid #ccc;

  font-weight: 600;
}

.list-event table tr td .blue-text {
  color: #0000d1;
}

.form-wrapper {
  padding-right: 140px;
}

.row-form-tugas {
  padding: 10px 0;

  /* display:  flex; */

  display: -moz-flex;

  /* display: -webkit-flex; */

  align-items: center;

  -webkit-align-items: center;

  -moz-align-items: center;
}

.row-form-tugas .label-form {
  font-size: 16px;

  color: #6b6b6b;

  margin-bottom: 5px;

  display: block;

  width: 100%;
}

.row-form-tugas select,
.row-form-tugas .input-tugasnya2,
.row-form-tugas textarea {
  width: 100%;

  padding: 5px 10px;
}

.date {
  background: url(../images/material/date-icon.png) no-repeat 98% center;

  padding-right: 0px;
}

.row-form-tugas .label-form.left {
  width: 50%;
}

.detailnya {
  display: none;
}

.detailnya span {
  font-size: 12px;

  color: #333;
}

.tabs-menu-pesan {
  overflow: hidden;

  width: 100%;
}

.tabs-menu-pesan ul {
  padding: 0;

  margin: 0;

  list-style: none;
}

.tabs-menu-pesan ul li {
  float: left;

  width: 25%;

  border: 1px solid #ccc;

  border-bottom: 3px solid #ffd703;
}

.tabs-menu-pesan ul li:hover {
  border: 1px solid #ffd703;

  border-bottom: 3px solid #ffd703;
}

.tabs-menu-pesan ul li a {
  width: 100%;

  text-align: center;

  display: block;

  background: #f4f4f4;

  padding: 10px;

  color: #979797;
}

.tabs-menu-pesan ul li a.active,
.tabs-menu-pesan ul li a:hover {
  background: #ffd703;

  color: #000;
}

.tabs-menu-pesan ul li a i {
  display: inline-block;

  vertical-align: middle;

  margin-right: 5px;

  font-size: 20px;
}

.tabs-menu-pesan ul li a .textnya {
  display: inline-block;

  vertical-align: middle;

  font-size: 14px;
}

.tabs-menu-pesan ul li a span {
  display: block;
}

.row-list-day {
  /* padding: 20px 0; */

  /* height: calc(100vh - 344px); */

  height: calc(100vh - 400px);

  overflow-y: auto;

  border-top: 1px solid var(--theme-l-blu);
}

.row-list-day .status-day {
  font-size: 18px;

  color: #505050;

  margin: 0;

  border-top: 1px solid #ffd703;

  border-bottom: 3px solid #ffd703;

  padding: 5px 0;
}

.row-list-day:first-child .status-day {
  border: none;
}

.row-msg {
  border-bottom: 1px solid #ccc;

  padding: 10px 20px;
}

.row-msg:last-child {
  border-bottom: none;
}

.thumb-msg {
  width: 60px;

  display: inline-block;

  vertical-align: top;

  text-align: center;
}

.thumb-msg .circle-msg {
  width: 50px;

  height: 50px;

  position: relative;

  border-radius: 50%;

  overflow: hidden;
}

.thumb-msg .circle-msg img {
  max-width: 60px;

  position: absolute;

  left: 50%;

  margin-left: -30px;

  top: 0;
}

.caption-msg {
  width: 80%;

  display: inline-block;

  vertical-align: top;

  padding-left: 10px;
}

.judul-msg {
  font-size: 16px;

  color: #1bb5dc;

  font-weight: 600;

  margin: 0;
}

.judul-msg.judul-orange {
  color: #f1592a;
}

.judul-msg.judul-green {
  color: #1bdc20;
}

.nama-msg,
.divisi-msg {
  color: #000;

  font-size: 14px;

  font-weight: 600;

  margin: 0;
}

.divisi-msg {
  font-weight: 400;
}

.time-msg,
.time-msg2 {
  color: #b2b2b2;

  font-size: 14px;

  font-weight: 600;

  margin: 0;
}

.time-msg2 {
  font-weight: 400;
}

.trucate-msg {
  font-size: 12px;

  margin-bottom: 0;

  color: #8f8f8f;
}

.delete-msg {
  font-size: 18px;

  color: #8f8f8f;
}

.search-trigger {
  font-size: 18px;

  color: #8f8f8f;
}

#searchnya {
  display: inline-block;

  border-radius: 10px;

  font-size: 14px;

  margin-right: 15px;

  display: none;
}

.menu-detail-pesan {
  /* padding: 0px 0; */
  padding: 10px 0;
  overflow: hidden;
}

.menu-detail-pesan.top-menu,
.border-bottom {
  border-bottom: 1px solid #ccc !important;
}

.menu-detail-pesan.bottom-menu {
  border-top: 1px solid #ccc !important;
}

.menu-detail-pesan ul {
  padding: 0;

  margin: 0;

  list-style: none;
}

.menu-detail-pesan ul li {
  float: left;

  width: 20%;
}

.menu-detail-pesan ul li a {
  width: 100%;

  text-align: left;

  display: block;

  padding: 10px;

  color: #979797;
}

.menu-detail-pesan ul li a:hover {
  color: #ffcd03;
}

.judul-detail-msg {
  font-size: 24px;

  color: #1bb5dc;

  margin: 0;
}

.isi-msg-detail {
  padding-left: 40px;

  padding-right: 20px;
}

.isi-msg-detail table tr td {
  border: 1px solid #ccc;

  padding: 10px;
}

.blue-circle {
  background: #1bb5dc !important;
}

#buatPesan {
  width: 850px;
}

.fancybox-wrap {
  /*border-top: 5px solid #ffd703;*/
}

.fancybox-skin {
  border-radius: 0;
}

.block-alert {
  background: #f7f1e5;

  text-align: left;
}

.icon-alert {
  padding: 5px 10px;

  display: inline-block;

  background: #e7ac2c;

  font-size: 28px;

  color: #fff;

  margin-right: 5px;

  /* margin-right: 20px; */
}

.block-alert p {
  display: inline-block;

  color: #000;

  font-weight: 600;

  margin: 0;

  padding: 10px 0;
}

#login-content {
  /*background: #272264;

    background: -moz-linear-gradient(top, #272264 0%, #113c67 100%);

    background: -webkit-linear-gradient(top, #272264 0%,#113c67 100%);

    background: linear-gradient(to bottom, #272264 0%,#113c67 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272264', endColorstr='#113c67',GradientType=0 );*/

  background-image: url("../../assets/images/content/background_login.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;
}

.wrap-login {
  /*padding-left: 40px;

    padding-right: 40px;*/

  /*padding-top: 170px;*/

  max-width: 600px;

  margin: 0 auto;

  background: rgba(256, 256, 256, 0.9);

  top: 50%;

  position: absolute;

  left: 50%;

  padding: 30px;

  transform: translate(-50%, -50%);
}

.logo img {
  height: 100%;

  width: 37px;
}

.logo-login {
  width: 134px;

  height: 172px;

  display: inline-block;

  vertical-align: top;
}

.form-login {
  /*width: 70%;*/

  width: 65%;

  padding-left: 30px;

  display: inline-block;

  vertical-align: top;
}

.form-row {
  margin-bottom: 10px;

  padding-left: 10px;

  padding-right: 10px;

  position: relative;
}

.form-row i {
  /*font-size: 24px;*/

  /*color: #f9e00a;*/

  font-size: 18px;

  color: #ccc;

  left: 10px;

  top: 5px;

  position: absolute;
}

.login-input {
  border: none;

  border-bottom: 2px solid #ccc;

  color: #666;

  font-size: 16px;

  /*color: #fff;*/

  /*font-size: 20px;*/

  background: none;

  padding: 5px 5px 5px 40px;

  /*border-bottom: 2px solid #fff;*/

  /*padding: 5px 5px 5px 30px;*/

  width: 100%;
}

.forgot {
  /*color: #f9e00a;*/

  color: #f2810d;

  font-size: 14px;

  font-weight: 0;

  /*font-size: 18px;*/

  /*font-weight: 800;*/
}

/* style Footer

----------------------------------------------------------------------------------------------*/

footer {
  display: block;

  width: 100%;

  padding: 20px 0;

  border-top: 3px solid #f9df30;

  color: #808080;
}

footer .logo-footer {
  display: inline-block;

  width: 15%;

  vertical-align: top;

  /*baru ditambahin*/

  padding-right: 10px;
}

footer .contact-footer {
  display: inline-block;

  /*width: 18%;*/

  width: 35%;

  vertical-align: top;

  margin-left: 50px;

  padding-top: 20px;
}

footer .address-footer {
  display: inline-block;

  width: 30%;

  vertical-align: top;

  padding-right: 20px;
}

footer .help-footer {
  display: inline-block;

  /*width: 35%;*/

  width: 40%;

  padding-left: 20px;

  padding-top: 20px;
}

.form-help select {
  display: inline-block;

  font-size: 14px;

  margin: 0 10px 0 0;

  padding-left: 10px;
}

.bt-kirim {
  display: inline-block;

  background: #f6de35;

  background: -moz-linear-gradient(top, #f6de35 0%, #fad03b 100%);

  background: -webkit-linear-gradient(top, #f6de35 0%, #fad03b 100%);

  background: linear-gradient(to bottom, #f6de35 0%, #fad03b 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6de35', endColorstr='#fad03b',GradientType=0 );

  padding: 10px;

  color: #333;

  text-align: center;

  font-size: 14px;

  font-weight: 800;
}

.menu-bantuan li {
  display: inline-block;

  margin: 10px;
}

.menu-bantuan li a {
  font-size: 14px;

  color: #808080;
}

.images-berita-detail img {
  width: 100%;
}

.dopdown-menu {
  position: absolute;

  top: calc(100% + 11px);

  right: -22px;

  background: #1e1e1e;

  /*background: #161a40;*/

  z-index: 99;

  display: none;
}

.dopdown-menu ul {
  padding: 0;

  margin: 0;

  list-style: none;

  min-width: 200px;
}

.dopdown-menu ul li {
  display: block;

  padding: 10px 80px 10px 15px;

  border-bottom: 2px solid #666666;

  /*border-bottom: 2px solid #272264;*/
}

.dopdown-menu ul li a {
  display: block;

  font-size: 13px;

  color: #fff;
}

.row-detail-pesan .scroll-pane {
  height: 442px;
}

.jspVerticalBar {
  width: 10px;
}

.table-pane .jspDrag {
  border-radius: 10px;
}

.table-pane .jspHorizontalBar {
  height: 10px;
}

.table-pane .jspTrack {
  background: #fff;
}

.table-pane {
  width: 100% !important;

  overflow: auto;
}

.table-pane .jspContainer {
  overflow: hidden;

  position: relative;

  width: 100% !important;
}

.table-pane .jspPane {
  position: absolute;

  width: 100% !important;
}

.hour-item {
  /*width: 100%;*/

  float: left;

  padding: 0;
}

.hour-item .top-item {
  border-bottom: 1px solid #ccc;

  padding: 10px 20px;

  position: relative;
}

.hour-item .bottom-item {
  padding: 10px 20px;

  position: relative;
}

.hour-item .top-item i {
  font-size: 28px;

  color: #fcb040;

  margin-right: 5px;
}

.hour-item .top-item .jamnya {
  color: #0e3f68;

  font-size: 20px;

  font-weight: 600;
}

.hour-item .bottom-item i {
  font-size: 18px;

  color: #fcb040;

  margin-right: 5px;

  display: inline-block;

  width: 16px;

  height: 18px;

  vertical-align: top;

  position: absolute;

  left: 25px;

  top: 13px;
}

.hour-item .bottom-item .tugasnya {
  color: #0e3f68;

  font-size: 16px;

  display: inline;

  /*display: block;*/

  /*display: inline-block;*/

  /*padding-left: 5px;*/

  /*padding-left: 27px;*/
}

.mobile-isi-pesan {
  border-top: 1px solid #ccc;

  padding-top: 10px;

  margin-top: 10px;

  display: none;
}

/* target Internet Explorer 9 to undo the custom arrow */

@media screen and (min-width: 0\0) {
  select {
    background: none\9;

    padding: 5px\9;
  }
}

/* ==========================================================================

   Media Queries

   ========================================================================== */

@media only screen and (max-width: 480px) {
  /* Mobile styles */
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
  /* Tablet styles */
}

@media only screen and (min-width: 1140px) {
  /* Desktop styles */
}

.alert-danger {
  color: #a94442;

  background-color: #f2dede;

  border-color: #ebccd1;
}

.alert {
  padding: 15px;

  margin-bottom: 20px;

  border: 1px solid transparent;

  border-radius: 4px;
}

/*********/

/*  dar  */

/*********/

.flex {
  display: flex;

  display: -ms-flex;

  display: -moz-flex;

  display: -webkit-flex;
}

.justify {
  justify-content: space-between;

  -ms-justify-content: space-between;

  -moz-justify-content: space-between;

  -webkit-justify-content: space-between;
}

.fl-wrap {
  flex-wrap: wrap;

  -moz-flex-wrap: wrap;

  -webkit-flex-wrap: wrap;
}

.profile > .wrap-content:first-child {
  width: 33.33%;
}

.profile > .wrap-content:last-child {
  width: calc(66.66% - 20px);
}

.rows.profile {
  display: flex;

  display: -ms-flex;

  display: -moz-flex;

  display: -webkit-flex;

  justify-content: space-between;

  -ms-justify-content: space-between;

  -moz-justify-content: space-between;

  -webkit-justify-content: space-between;
}

.rows.profile {
  width: 70%;
}

.info-profile div {
  position: relative;
}

.info-profile div p {
  margin: 0 !important;

  font-size: 16px;

  color: #6b6b6b;

  margin-bottom: 5px;

  display: block;

  width: 100%;
}

.info-profile div input {
  margin-bottom: 20px;

  width: 100%;
}

.profile-thumb {
  width: 180px;

  height: 180px;

  border-radius: 50%;

  overflow: hidden;

  position: relative;
}

.profile-thumb img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  margin: 0;
}

.profile-thumb .overlay {
  /*	display: none;*/

  position: absolute;

  width: 100%;

  height: 100%;

  z-index: 7;

  top: 0;

  left: 0;

  color: #fff;

  background: transparent;

  transition: 0.2s;

  -o-transition: 0.2s;

  -ms-transition: 0.2s;

  -moz-transition: 0.2s;

  -webkit-transition: 0.2s;
}

.profile-thumb:hover .overlay {
  background: rgba(0, 0, 0, 0.3);
}

.profile-thumb .overlay i {
  position: absolute;

  color: transparent;

  top: 50%;

  left: 50%;

  font-size: 50px;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  transition: 0.2s;

  -o-transition: 0.2s;

  -ms-transition: 0.2s;

  -moz-transition: 0.2s;

  -webkit-transition: 0.2s;
}

.profile-thumb:hover .overlay i {
  color: #fff;
}

.rows.banner {
  width: calc(30% - 20px);
}

.banner-div {
  width: 100%;
}

.banner-div img {
  width: 100%;

  height: auto;

  object-fit: contain;
}

.profile-caption p {
  margin: 0;
}

.profile-caption {
  margin-top: 30px;

  margin-bottom: 10px;
}

.circ25.percircle.orange .bar,
.circ25.percircle.orange .fill {
  /*    border-color: orange;*/

  animation: circOrg 1s;

  animation-fill-mode: forwards;
}

@keyframes circOrg {
  from {
    border-color: red;
  }

  to {
    border-color: orange;
  }
}

.circ50.percircle.orange .bar,
.circ50.percircle.orange .fill {
  animation: circYlw 1s;

  animation-fill-mode: forwards;
}

@keyframes circYlw {
  0% {
    border-color: orange;
  }

  100% {
    border-color: yellow;
  }
}

.circ75.percircle.orange .bar,
.circ75.percircle.orange .fill {
  animation: circGrn 1s;

  animation-fill-mode: forwards;
}

@keyframes circGrn {
  0% {
    border-color: yellow;
  }

  100% {
    border-color: lawngreen;
  }
}

.circ100.percircle.orange .bar,
.circ100.percircle.orange .fill {
  animation: circFGrn 1s;

  animation-fill-mode: forwards;
}

@keyframes circFGrn {
  0% {
    border-color: lawngreen;
  }

  100% {
    border-color: green;
  }
}

.compose-btn {
  font-size: 12px;

  font-weight: bold;

  margin-left: 15px;

  background: #1bb5dc;

  color: #fff;

  padding: 1px 7px;

  height: 25px;

  display: block;

  border-radius: 3px;
}

.compose-btn:hover {
  color: #fff;

  text-decoration: none;

  background: #337ab7;

  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.tab-btn-div {
  border-bottom: 3px solid #ffcd03;
}

.tab-btn {
  padding: 6px 20px;

  display: inline-block;

  background: #eee;

  color: #888;

  font-size: 16px;

  border-radius: 8px 8px 0 0;

  outline: none;
}

.tab-btn:focus {
  outline: none;
}

.tab-btn:hover {
  background: #ddd;

  color: #444;
}

.tab-btn.active {
  background: #ffcd03;

  color: #000;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tab-cont {
  display: none;

  padding: 20px 0;

  animation: fadeEffect 1s;

  -webkit-animation: fadeEffect 1s;
}

.comment-main-level:after,
.comments-list li:after {
  display: block;

  content: "";
}

.input-comment textarea {
  font-family: Lato, sans-serif;
}

.comment {
  width: 100%;

  background-color: #f9f9f9;

  overflow-y: auto;

  overflow-x: hidden;
}

.comment textarea {
  resize: vertical;
}

.comments-container {
  margin: 0 auto 15px;

  width: 100%;

  padding: 10px;
}

.comments-container h1 {
  font-size: 36px;

  color: #283035;

  font-weight: 400;
}

.comments-container h1 a {
  font-size: 18px;

  font-weight: 700;
}

.comments-list {
  padding: 0;

  margin: 0;

  position: relative;
}

.comments-list:after,
.comments-list:before,
.reply-list li:before {
  content: "";

  background: #eee;

  position: absolute;
}

.comments-list:before {
  width: 2px;

  height: 100%;

  left: 32px;

  top: 0;
}

.comments-list:after {
  bottom: 0;

  left: 27px;

  width: 11px;

  height: 11px;

  border: 3px solid #dee1e3;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;
}

.reply-list:after,
.reply-list:before {
  display: none;
}

.reply-list li:before {
  width: 60px;

  height: 2px;

  top: 25px;

  left: -38px;
}

.comments-list li:after {
  clear: both;

  height: 0;

  width: 0;
}

.reply-list {
  padding-left: 70px !important;
  margin-top: 10px;
  clear: both;
}

.comments-list .comment-avatar {
  width: 65px;

  height: 65px;

  position: relative;

  z-index: 99;

  float: left;

  border: 3px solid #fff;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  overflow: hidden;
}

.comments-list .comment-avatar img {
  width: 100%;

  height: 100%;
}

.reply-list .comment-avatar {
  width: 50px;

  height: 50px;
}

.comment-main-level {
  animation-name: fade;

  animation-duration: 0.5s;

  -webkit-animation-name: fade;

  -webkit-animation-duration: 0.5s;
}

.comment-main-level:after {
  width: 0;

  height: 0;

  clear: both;
}

.comments-list .comment-box {
  width: 100%;

  padding-left: 70px;

  position: relative;
}

.comments-list li {
  margin-bottom: 10px;

  display: block;

  position: relative;

  -webkit-animation-name: fade;

  -webkit-animation-duration: 0.5s;
}

.comments-list li,
.input-reply {
  animation-name: fade;

  animation-duration: 0.5s;
}

.input-reply {
  display: none;

  -webkit-animation-name: fade;

  -webkit-animation-duration: 0.5s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.comments-list .comment-box:after,
.comments-list .comment-box:before {
  height: 0;

  width: 0;

  position: absolute;

  display: block;

  border-width: 10px 12px 10px 0;

  border-style: solid;

  top: 8px;

  left: -11px;
}

.comments-list .comment-box:before {
  border-width: 11px 13px 11px 0;

  border-color: transparent rgba(0, 0, 0, 0.05);

  left: -12px;
}

.reply-list .comment-box {
  width: 100%;

  padding-left: 55px;
}

.comment-box .comment-head {
  background: #fff;

  padding: 10px 12px;

  border-bottom: 1px solid #e5e5e5;

  overflow: hidden;

  -webkit-border-radius: 4px 4px 0 0;

  -moz-border-radius: 4px 4px 0 0;

  border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
  float: right;

  margin-left: 14px;

  position: relative;

  top: 2px;

  color: #a6a6a6;

  cursor: pointer;

  -webkit-transition: color 0.3s ease;

  -o-transition: color 0.3s ease;

  transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
  color: #03658c;
}

.comment-box .comment-name {
  color: #283035;

  font-size: 14px;

  font-weight: 700;

  float: left;

  margin: 0;

  margin-right: 10px;
}

.comment-box .comment-name a {
  color: #283035;
}

.comment-box .comment-head span {
  float: left;

  color: #999;

  font-size: 13px;

  position: relative;

  top: 1px;
}

.comment-box .comment-content {
  background: #fff;

  padding: 12px;

  font-size: 15px;

  color: #595959;

  -webkit-border-radius: 0 0 4px 4px;

  -moz-border-radius: 0 0 4px 4px;

  border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author,
.comment-box .comment-name.by-author a {
  color: #03658c;
}

.comment-box .comment-name.by-author:after {
  content: "autor";

  background: #03658c;

  color: #fff;

  font-size: 12px;

  padding: 3px 5px;

  font-weight: 700;

  margin-left: 10px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;
}

.input-comment .comment-avatar {
  width: 65px;

  height: 65px;

  position: relative;

  z-index: 99;

  border: 3px solid #fff;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  overflow: hidden;
}

.input-comment {
  padding: 5px 10px;

  display: block;
}

.input-comment textarea {
  top: -64px;

  border: none;

  margin-bottom: -55px;
}

.input-comment textarea,
.input-reply textarea {
  position: relative;

  width: 100%;

  height: 70px;

  padding: 8px 10px;

  border-radius: 4px;

  font-size: 16px;
}

.input-reply textarea {
  border: none;
}

.input-comment a,
.input-reply a {
  background-color: #e92429;

  color: #fff;

  padding: 5px 15px;

  border: none;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 4px;

  font-size: 14px;

  cursor: pointer;
}

.input-comment-container {
  width: 100%;

  padding-left: 70px;
}

.comment-avatar img {
  width: 100%;

  height: 100%;

  object-fit: contain;
}

.request-div a {
  display: block;

  width: 100%;

  font-size: 16px;

  font-weight: bold;

  margin: 7px 0;

  background: #eee;

  padding: 10px 20px;

  color: #333;

  border: 1px solid transparent;

  border-radius: 5px;
}

.request-div a.ylw {
  background: #fd6;
}

.request-div a.edit {
  background: #fd6;
}

.request-div a.red {
  background: #f77;

  color: #fff;
}

.request-div a.red:hover {
  background: #fff;

  border: 1px solid #f77;

  color: #f77;
}

.request-div a.grn {
  background: #1b3;

  color: #fff;
}

.request-div a.grn:hover {
  background: #fff;

  border: 1px solid #1b3;

  color: #1b3;
}

.request-div a i {
  width: 24px;
}

.modal {
  position: fixed;

  top: 0;

  left: 0;

  z-index: 5;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  display: none;
}

.req-modal {
  max-width: 650px;

  width: calc(100% - 30px);

  background: #fff;

  padding: 20px;

  padding: 20px;

  border-radius: 5px;

  z-index: 3;

  top: 50%;

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.3);
}

.req-modal h4 {
  margin: 0 0 20px;
}

.req-modal textarea {
  width: 100%;

  resize: vertical;

  /* border: none; */

  /* background:  #eee; */

  padding: 10px;

  margin-bottom: 15px !important;
}

.req-modal .orange-btn {
  font-family: "Source Sans Pro", sans-serif;
}

.modal-cancel-btn {
  position: absolute;

  top: -5px;

  right: -5px;

  font-size: 20px;

  width: 34px;

  height: 33px;

  text-align: center;

  background: red;

  color: #fff;

  border: 3px solid;

  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

/* Reset Select */

select {
  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  appearance: none;

  outline: 0;

  box-shadow: none;

  border: 0 !important;

  background: #f1f1f1;

  background-image: none;
}

/* Custom Select */

.select {
  position: relative;

  display: inline-block;

  width: calc(100% - 112px);

  height: 3em;

  line-height: 3;

  background: #f1f1f1;

  /*overflow: hidden;*/

  border-radius: 0.25em;
}

select {
  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0 0 0 0.5em;

  color: #fff;

  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* Arrow */

.select::after {
  content: "\25BC";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  padding: 0 1em;

  background: #34495e;

  pointer-events: none;
}

/* Transition */

.select:hover::after {
  color: #f39c12;
}

.select::after {
  -webkit-transition: 0.25s all ease;

  -o-transition: 0.25s all ease;

  transition: 0.25s all ease;
}

form#view_task_by_date .row-form-tugas .label-form {
  width: auto;

  display: inline-block;
}

form#view_task_by_date .row-form-tugas input {
  width: calc(100% - 70px);

  display: inline-block;

  margin-left: 10px;
}

.cols-5 {
  width: calc(100% / 12 * 5);
}

.cols-2 {
  width: calc(100% / 12 * 2);
}

form#view_task_by_date .row-form-tugas input[type="submit"] {
  width: 100%;

  margin-left: 0px;
}

.filter select,
.filter input {
  padding: 5px 10px;
}

.btn {
  padding: 3px 6px !important;

  font-size: 12px !important;
}

table#example td select {
  padding: 6px 10px;

  width: auto;

  border: 1px solid #ccc !important;
}

.dopdown-menu ul li a i {
  margin-right: 5px;
}

.pagination > li > a,
.pagination > li > span {
  padding: 3px 9px !important;

  font-size: 14px !important;

  /*font-size: 12px !important;*/
}

div.dataTables_wrapper div.dataTables_info {
  color: #888;

  font-size: 13px;

  font-style: italic;
}

.popup-body#buatPesan input.grey-button {
  padding: 10px 20px;

  border: none;
}

.no-border {
  border: none;
}

.frame-edit {
  padding: 15px;

  margin: 0px auto;
}

.btn-lg {
  /*margin-top: 5px;*/

  padding: 7px 20px !important;

  /*width: 45%;*/
}

.description {
  color: #a2a1a1;

  font-size: 13px;

  font-weight: normal;

  margin-top: 5px;

  display: block;
}

.description p {
  line-height: 18px;
}

.deadline .icon-first {
  color: #fc0202;
}

.deadline .task_date {
  color: #fc0202;

  margin-top: 5px;

  padding-left: 10px;
}

.border-box-reason {
  border: 1px solid #dad9d9;

  padding: 10px;

  border-radius: 5px;

  -webkit-box-shadow: 0 7px 6px -7px #777;

  -moz-box-shadow: 0 7px 6px -7px #777;

  box-shadow: 0 7px 6px -7px #777;
}

label.label-tag-tugas {
  font-size: 12px;

  margin-right: 5px;
}

.judul-pekerjaan {
  font-weight: 550;
}

.muted {
  color: #999;
}

.swal2-popup .swal2-content {
  font-size: 15px !important;
}

.pad-5 {
  padding: 5px;
}

.pad-1020 {
  padding: 10px 20px;
}

.mobile-footer {
  display: none;
}

@media (max-width: 1200px) {
  .form-help select {
    margin: 0 !important;
  }

  .insert-row .right {
    text-align: right;

    width: 132px !important;
  }
}

@media (max-width: 1026px) {
  .insert-row .right {
    text-align: right;

    width: 132px !important;
  }
}

@media (max-width: 885px) {
  .logo-login img {
    position: relative;

    left: 94%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 28%;
  }

  .insert-row .right {
    text-align: right;

    width: 177px;
  }
}

@media (max-width: 854px) {
  .logo-login img {
    position: relative;

    left: 85%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 20%;
  }

  .insert-row .right {
    text-align: right;

    width: 177px;
  }
}

@media (max-width: 840px) {
  .logo-login img {
    position: relative;

    left: 85%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 8%;

    width: 136%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 14%;
  }
}

@media (max-width: 768px) {
  .content {
    width: 100%;
  }

  .bottom-header {
    display: block;
  }

  .logo-login img {
    position: relative;

    left: 72%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 8%;

    width: 136%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 7%;
  }

  footer .help-footer {
    width: 47% !important ;

    margin-bottom: 80px;
  }

  .form-help select {
    font-size: 10px !important;
  }
}

@media (max-width: 767px) {
  .logo-footer img {
    margin-left: 45px;
  }

  footer .help-footer {
    width: 93% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }

  #login-content {
    background-color: #fff;
    background-image: none !important;
  }

  .breadcumb {
    display: none !important;
  }

  footer {
    display: none !important;
  }

  li.mobile-device {
    display: block !important;
  }
}

@media (max-width: 708px) {
  .logo-login img {
    position: relative;

    left: 53%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 8%;

    width: 136%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 0%;
  }
}

@media (max-width: 704px) {
  footer .help-footer {
    width: 92% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }
}

@media (max-width: 641px) {
  .logo-login img {
    position: relative;

    left: 45%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: 2%;

    width: 136%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 0%;
  }

  .login-input {
    font-size: 11px;
  }
}

@media (max-width: 704px) {
  footer .help-footer {
    width: 89% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }
}

@media (max-width: 560px) {
  .logo-login img {
    position: relative;

    left: 32%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: -22%;

    width: 183%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 10%;

    font-size: 16px;
  }

  .login-input {
    font-size: 11px;
  }

  footer .help-footer {
    width: 84% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }

  .mobile-footer {
    display: block;

    position: fixed;

    bottom: 0;

    left: 0;

    z-index: 999;

    width: 100%;
  }

  .mobile-footer a {
    float: left;

    background-color: #4a4c4f;

    width: 20%;

    color: white;

    font-size: 11px;

    line-height: 21px;
  }

  .mobile-footer a img {
    padding: 15% 15% 0 15%;

    width: auto;

    min-height: 30px;

    max-width: 70%;
  }

  .mobile-footer a:hover,
  .mobile-footer a.active {
    background-color: #303132;
  }
}

@media (max-width: 528px) {
  footer .help-footer {
    width: 89% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }

  #example_wrapper .col-sm-12 {
    font-size: 9px;
  }
}

@media (max-width: 551px) {
  #view_task_by_date .cols-5 {
    width: 33.33%;

    float: none;

    position: relative;

    min-height: 1px;

    padding-left: 15px;

    padding-right: 15px;

    margin-bottom: -7px;
  }

  form#view_task_by_date .row-form-tugas input {
    width: calc(100% - -117px);

    display: inline-block;

    margin-left: 10px;
  }

  /*	.put{

		margin-left:29px!important;

	}*/
}

@media (max-width: 505px) {
  footer .help-footer {
    width: 89% !important;

    padding: 0 70px;

    margin-bottom: 80px;
  }
}

@media (max-width: 482px) {
  .form-help select {
    font-size: 8px !important;
  }
}

@media (max-width: 425px) {
  .logo-login img {
    position: relative;

    left: 28%;
  }

  .form-login .form-horizontal {
    position: relative;

    left: -22%;

    width: 183%;
  }

  .form-row .orange-btn {
    position: relative;

    left: 5%;

    font-size: 16px;
  }

  .login-input {
    font-size: 11px;
  }

  footer .help-footer {
    width: 86% !important;

    padding: 0 0px;

    margin-bottom: 80px;
  }

  .container {
    padding: 0 !important;
  }

  .wrapper {
    /*padding:5px!important;*/
  }
}

@media (max-width: 375px) {
  .form-help select {
    font-size: 10px;
  }

  footer .help-footer {
    width: 97% !important;

    padding: 0 0px;

    margin-bottom: 80px;
  }

  footer .contact-footer {
    display: inline-block;

    /* width: 18%; */

    width: 35%;

    vertical-align: top;

    margin-left: 10px;

    padding-top: 20px;
  }

  .logo-footer img {
    /*margin-left: 10px;*/

    margin: 0 20% !important;
  }

  #example_wrapper .col-sm-12 {
    font-size: 7px;
  }

  footer .logo-footer {
    width: 100% !important;
  }
}

@media (max-width: 345px) {
  .form-help select {
    font-size: 8px;
  }
}

@media (max-width: 362px) {
  .form-help select {
    font-size: 7px !important;
  }
}

@media (max-width: 320px) {
  footer .help-footer {
    width: 97% !important;

    padding: 0 0px;

    margin-bottom: 80px;
  }

  footer .contact-footer {
    display: inline-block;

    /* width: 18%; */

    width: 35%;

    vertical-align: top;

    margin-left: 10px;

    padding-top: 20px;
  }

  .logo-footer img {
    margin-left: 10px;
  }

  #example_wrapper .col-sm-12 {
    font-size: 5px;
  }
}

@media (max-width: 768px) {
  .option_pesan {
    display: none;
  }

  .checkbox-msg {
    margin-top: 15px;
  }

  .tab-label {
    margin-left: 20px;
  }

  .chosen-select {
    margin-bottom: 10px;
  }
}

#info-null-kpi,
#info-null {
  color: #c4622c;

  font-size: 12px;

  line-height: 10px;
}

.label-primary {
  background-color: #666 !important;
}

.ml-10 {
  margin-left: 10px;
}

button.mdi-12 .mdi:before {
  font-size: inherit;

  margin-right: 0;
}

.mdi-menu-down {
  top: 15px;

  right: 5%;
}

@media (max-width: 1200px) {
  .mdi-menu-down {
    right: 0;
  }
}

@media (max-width: 768px) {
  #middle-content {
    /* margin: 35px 0 90px 0; */
    margin: 70px 0 90px 0;
  }

  footer .contact-footer {
    padding-top: 0;
  }

  .breadcumbs {
    margin-top: 30px;
  }
}

div.breadcumb {
  margin-top: 30px;
}

#frame_unit_ukur {
  width: 100%;

  min-height: 400px;

  border: 0;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-15 {
  margin-left: 15px;
}

.submenu-kpi {
  background: #e8e8e8;

  z-index: 999999;

  position: absolute;

  right: 7%;

  width: 250px;

  top: 28%;

  padding: 15px;

  border-radius: 5px;
}

.submenu {
  margin: 0 0 10px;

  border-bottom: 1px solid #fff;
}

.submenu a.active {
  color: #f37124;
}

#frame_kpi {
  border: 0;

  width: 100%;

  min-height: 500px;
}

.t-0 {
  top: 0 !important;
}

.mt-20 {
  margin-top: 20px !important;
}

span.mdi-15:before {
  font-size: 15px;
}

.textarea-reply {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
}

.alert-success {
  background: #dff0d8 !important;
  color: #3c763d !important;
  border-color: #d6e9c6 !important;
}

.sidebar-kalendar {
  /* border: 1px solid #000; */
  padding: 10px 10px 10px 0;
  width: 300px;
}

.box-kalendarlist {
  padding: 10px;
  border-top: 2px solid #ccc;
}

.btn-addtarget {
  background: #ccc;
  padding: 5px;
  border-radius: 5px;
}

.remove_field {
  background: #ccc;
  padding: 10px;
}

.text-red {
  color: red;
}

.label-upload {
  background-color: #f79d34;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}

#file-chosen {
  margin-left: 0.3rem;
  font-family: sans-serif;
}

.text-alert {
  display: inline-block;
  width: 80%;
}

.mdi-15.mdi:before {
  font-size: 15px !important;
}

.table > thead > tr > th {
  vertical-align: middle !important;
}

.dropdown-profile {
  position: absolute;
  top: 10px;
  right: -15px;
}

.box-captcha {
  text-align: center;
  width: 225px;
  height: 60px;
  line-height: 60px;
  background-image: url(../images/bg_captcha.jpg);
  font-size: 30px;
  font-weight: bold;
  border: 2px solid #6d6e70;
  margin: 10px;
}

.mdi:before,
.mdi-set {
  font-size: 30px;
}

.grey-txt {
  color: var(--gry-btn);
}

.grey-txt:hover {
  color: var(--theme-ylw);
}

.user-icon .mdi:before {
  margin-top: -11px;
}

.mdi.mdi-small:before {
  font-size: 15px !important;
}

li.mobile-device {
  display: none;
}

.unread-msg {
  font-weight: 800;
}