/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */

/*
*{
	border-radius:0 !important;
}
*/

body {
   padding-top: 50px;
}

.whoami {
   height: 15px;
   padding: 0 10px;
   font-size: 10px;
   text-transform: uppercase;
   border-radius: 4px 4px 0 0;
   border-bottom: 0.9px dashed rgba(0, 96, 100, 0.8);
   box-shadow: 0 2px 0 0 rgba(255, 255, 0, .8);
   /*
   color: #004044;
   background: rgba(5,90,113,.9);
   background: rgba(255,255,255,.4);
   */
   color: #004044;
   background: rgba(255, 255, 0, .8);
   z-index: 1001;
   position: fixed;
   bottom: 20px;
   left: 50px;
   transform-origin: bottom left;
   transform: translateY(100%) rotate(-90deg);
   -webkit-backface-visibility: hidden;
   /* fixed position for mobile browser*/
   transition: all .1s linear;
}

red {
   color: #FF0000 !important;
}

th>div.th-inner {
   text-align: center !important;
}

.liqChart {
   height: 150px;
}

.liqChartInfo {
   color: #999;
   font-size: 12px;
   text-align: center;
   padding-top: 7px;
}

/* MATERIAL COLOR
 * https://material.io/guidelines/style/color.html#color-color-palette
 * gak jasi --> udah ada yang jadi di pallete.css
 * ********************************************************************************/

.col-dark-border {
   border: 0.9px solid #FFFFFF;
   padding: 10px 20px 20px;
}

.col-light-border {
   border: 0.9px solid #999999;
   padding: 10px 20px 20px;
}

.col-border.round {
   border-radius: 9px;
}

.col-light-frame {
   border: 0.9px solid #0000;
   box-shadow: inset 0 0 0 1px #99EEFF99;
}

.col-dark-frame {
   border: 0.9px solid #0000;
   box-shadow: inset 0 0 0 1px #00334455;
}

.col-light-frame.round, .col-dark-frame.round {
   border-radius: 6px;
}

.palette-White.col-border {
   box-shadow: inset 0 0 0 0.9px #999;
}

.palette-Deep-Transparent {
   background: #00000066;
   color: #FFF
}

.palette-Light-Transparent {
   background: rgba(255, 255, 255, .7);
   color: #000
}

.palette-Dark-Transparent {
   background: rgba(0, 0, 0, .65);
   color: #FFF
}

/*
.border-dark-out	{border: 3px solid #000}
.border-dark-in		{box-shadow:inset 0 0 0 1px #00000033;}
.border-light-out	{border: 3px solid #000}
.border-light-in	{box-shadow:inset 0 0 0 1px #FFFFFF66;}
*/

/*
.bg-red			{background-color:#F44336;color:#FFF}
.bg-pink		{background-color:#E91E63;color:#FFF}
.bg-purple		{background-color:#9C27B0;color:#FFF}
.bg-deep-purple	{background-color:#673AB7;color:#FFF}
.bg-inddigo		{background-color:#3F51B5;color:#FFF}
.bg-blue		{background-color:#2196F3;color:#000}
.bg-light-blue	{background-color:#03A9F4;color:#000}
.bg-cyan		{background-color:#00BCD4;color:#000}
.bg-teal		{background-color:#009688;color:#FFF}
.bg-deep-teal	{background-color:#005055;color:#FFF}
.bg-green		{background-color:#4CAF50;color:#000}
.bg-light-green	{background-color:#8BC34A;color:#000}
.bg-lime		{background-color:#CDDC39;color:#000}
.bg-yellow		{background-color:#FFEB3B;color:#000}
.bg-amber		{background-color:#FFC107;color:#000}
.bg-orange		{background-color:#FF9800;color:#000}
.bg-deep-orange	{background-color:#FF5722;color:#000}
.bg-brown		{background-color:#795548;color:#FFF}
.bg-grey		{background-color:#9E9E9E;color:#FFF}
.bg-blue-grey	{background-color:#607D8B;color:#FFF}
.bg-black		{background-color:#000000;color:#FFF}
.bg-white		{background-color:#FFFFFF;color:#000;box-shadow:inset 0 0 0 1px #999;}
*/

/* slider______________________________*/

input[type=range] {
   -webkit-appearance: none;
   width: 100%;
   height: 20px;
   outline: none;
   border-radius: 3px;
   opacity: 0.7;
   background: #999999;
   -webkit-transition: .2s;
   transition: opacity .2s;
}

input[type=range]:hover {
   opacity: 1;
}

input[type=range][disabled], input[type=range][disabled]:hover {
   opacity: 0.5;
   cursor: not-allowed;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 3px;
   background: #00f0ff;
}

input[type=range]::-moz-range-track {
   width: 100%;
   height: 20px;
   background: #999999;
   border-radius: 3px;
   border: none;
}

input[type=range]::-moz-range-thumb {
   width: 25px;
   height: 25px;
   border: none;
   border-radius: 3px;
   background: #00f0ff;
}

input[type=range]::-ms-track {
   width: 100%;
   height: 20px;
   background: transparent;
   border: none;
}

input[type=range]::-ms-fill-lower {
   background: #424242;
   height: 20px;
   border-radius: 3px;
}

input[type=range]::-ms-fill-upper {
   background: #999999;
   height: 20px;
   border-radius: 3px;
}

input[type=range]::-ms-thumb {
   height: 25px;
   width: 25px;
   border-radius: 3px;
   background: #00f0ff;
   height: 25px;
}

/*
*{
  border-radius: 0 !important;
}
/*
button,input,textarea,select,span,div,a{
  border-radius: 0 !important;
}
*/

/*
.modal-dialog{
  border: 10px solid rgba(0,35,50,0.5) !important;
  border-radius: 15px;
}
.modal-content{
  background-color: rgba(255,255,255,0.8)!important;
  box-shadow: none !important;
}
*/

.bootstrap-datetimepicker-widget .weekend {
   color: #C00;
}

.bootstrap-table {
   /* datepicker diatas tabel ke hidden jika height tabel pendek */
   min-height: 500px;
}

.stsHadir {
   color: #000
}

.stsTidakHadir {
   color: #F00
}

.stsTerlambat {
   color: #970
}

.alert-info {
   color: #006064;
   background-color: #b2ebf2;
   /* border-color: #80deea; */
   /* border-color: #006677; */
   border-color: transparent;
   border-radius: 0 !important;
}

.btn-secondary, .btn-secondary .badge {
   color: #fff;
   background-color: #343a40;
   border-color: #343a40;
}

.btn-secondary:hover {
   color: #fff;
   background-color: #242a30;
   border-color: #242a30;
}

.btn-primary, .btn-primary .badge {
   color: #fff;
   background-color: #0097a7;
   border-color: #00838f;
}

.btn-primary:hover {
   color: #fff;
   background-color: #00838f;
   border-color: #006064;
}

.btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, .btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus {
   color: #fff;
   background-color: #006064;
   border-color: #004044;
}

.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
   background-color: #60aeba;
   border-color: #4dd0e1;
}

.pagination>li>a, .pagination>li>span {
   color: #006064;
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
   color: #00838f;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
   background-color: #00838f;
   border-color: #007074;
}

a {
   color: #0097a7;
}

a:focus, a:hover {
   color: #00838f;
}

/*
 * Global add-ons
 */

.sub-header {
   padding-bottom: 10px;
   border-bottom: 1px solid #eee;
}

.chartPrevNext {
   margin: 5px auto;
   position: relative;
}

.center {
   text-align: center
}

.chartPrevNext>button {
   border-radius: 15px;
   line-height: 1.42;
}

.chartPrevNext>input {
   border-radius: 15px;
   line-height: 1.42;
   margin-left: 7px;
   margin-right: 7px;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */

.navbar-fixed-top {
   border: 0;
}

#navbar>ul>li.active>a {
   background: #FFF;
   color: #000;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */

.sidebar {
   display: none;
}

/*@media (min-width: 768px) {*/

.sidebar {
   width: 50px;
   position: fixed;
   top: 51px;
   bottom: 0;
   left: 0;
   z-index: 1000;
   display: block;
   padding: 20px;
   overflow-x: hidden;
   overflow-y: auto;
   /* Scrollable contents if viewport is shorter than content. */
   background-color: #006064;
   box-shadow: 2px 0 0 0 #006064;
   border-right: 0.9px dashed rgba(255, 255, 255, 0.5);
   /*background-color: rgba(245,245,245,0.8);
    /*border-right: 1px solid rgba(51,153,204,.1);*/
   transition: all .1s linear;
}

.sidebar:hover {
   width: 200px;
   transition: all .1s linear;
}

.sidebar:hover .nav-sidebar>li>a>span {
   position: relative;
   transition-delay: .1s;
   visibility: visible;
}

.sidebar:hover~div.whoami {
   left: 200px;
   transition: all .15s linear;
   transform-origin: bottom left;
   transform: translateY(100%) rotate(90deg);
   background-color: #004044;
   color: #ff0;
   border-color: #ff0;
   box-shadow: 0 3px 0 0 #004044;
   bottom: 25%;
}

/*}*/

/* Sidebar navigation */

.nav-sidebar {
   margin-right: -21px;
   /* 20px padding + 1px border */
   margin-bottom: 20px;
   margin-left: -30px;
}

.nav-sidebar>li {
   height: 50px;
   overflow: hidden;
}

.nav-sidebar>li>a {
   float: left;
   display: table;
   padding: 0 20px;
   vertical-align: top;
   height: 75px;
   overflow: hidden;
   color: #BEF;
}

.nav-sidebar>.active>a, .nav-sidebar>.active>a:hover, .nav-sidebar>.active>a:focus {
   color: #fff;
   /*background-color: #428bca;*/
   background-color: #004044;
}

.nav-sidebar>li>a>span {
   visibility: hidden;
   display: table-cell;
   width: 180px;
   padding-left: 10px;
   padding-top: 15px;
   vertical-align: top;
}

.nav-sidebar>li>a>i {
   display: table-cell;
   font-size: 30px;
   vertical-align: top;
   padding: 10px 0;
   width: 30px;
}

.nav-sidebar>li>a>div {
   vertical-align: top;
   padding: 10px 0;
   width: 30px;
}

.nav-sidebar>li>a>div>i {
   font-size: 30px;
}

.nav-sidebar>li>a>div>i.small-green {
   color: #0f0;
   text-shadow: -1px 0 #006064, 0 1px #006064, 1px 0 #006064, 0 -1px #006064;
   font-size: 20px;
   padding: 0 0 10px 10px;
}

.nav-sidebar>li>a:hover {
   /*background: #FFF;*/
   background-color: #007074;
   color: #fff;
}

.nav-sidebar>li>a:hover:before, .nav-sidebar>.active>a:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 13px;
   height: 50px;
   background-color: #FF0;
}

/*
 * Main content
 */

.main {
   padding: 20px 0 0 50px;
}

/*
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
*/

.main .page-header {
   margin-top: 0;
}

.main h3.content-location {
   color: #006677;
   margin: 0 0 15px 0;
   padding-bottom: 5px;
   border-bottom: 1px solid #dee;
}

.main h3.content-center {
   color: #006677;
   margin: 0 0 15px 0;
   padding-bottom: 5px;
   text-align: center;
}

.filter-active {
   background: #d9534f !important;
   color: #fff !important;
   margin: 0 0 0 5px;
}

.filter-detail {
   background: rgba(250, 255, 255, 0.5);
   margin: 3px !important;
   border-radius: 7px;
   padding: 15px;
   border: 1px solid #a6e1ec;
   /*border: 1px solid #BDE;*/
}

.filter-detail li {
   text-align: justify;
   margin-bottom: 10px;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders {
   margin-bottom: 30px;
   text-align: center;
}

.placeholders h4 {
   margin-bottom: 0;
}

.placeholder {
   margin-bottom: 20px;
}

.placeholder img {
   display: inline-block;
   border-radius: 50%;
}

.modal-template1 .form-group {
   margin-bottom: 2px;
}

.modal-template1 .form-horizontal .control-label {
   padding-top: 0;
}

.fixed-table-footer, .fixed-table-header, .fixed-table-body {
   border-left: 0.9px solid #008891 !important;
   border-right: 0.9px solid #008891 !important;
}

.fixed-table-body {
   border-bottom: 1px solid #008891 !important;
}

.table-template1 {
   /*border:1px solid #008891 !important;*/
   border-bottom: none !important;
}

.table-template1>thead>tr {
   background-color: #008891;
   /*#E7E7DE; #CDCBA6; #008891; #00587A; #0F3057*/
   color: #FFF;
}

.table-template1>tbody>tr>td {
   padding: 2px;
   border-top: 0.9px dotted #bed2d1;
}

.table-template1>thead>tr>th {
   border-bottom: 0;
   padding-left: 3px !important;
}

.fixed-table-container {
   border: none !important;
}

.fixed-table-container thead th:last-child, .fixed-table-container thead th:first-child {
   border-radius: 0 !important;
}

.fixed-table-body {
   border-left: 1px solid #dddddd;
   border-right: 1px solid #dddddd;
}

.fixed-table-footer {
   border-bottom: 1px solid #dddddd;
}

.fixed-table-footer .th-inner {
   color: #FFF;
   font-weight: bold;
   background-color: #008891;
}

/*
.table-template1 > tbody > tr:nth-child(odd){
  background-color: #BBDDCC;
}
CYAN COLOR
 50 #e0f7fa
100 #b2ebf2
200 #80deea
300 #4dd0e1
400 #26c6da
500 #00bcd4
600 #00acc1
700 #0097a7
800 #00838f
900 #006064
A100 #84ffff
A200 #18ffff
A400 #00e5ff
A700 #00b8d4 
*/

.table-template1.table-hover>tbody>tr:hover {
   background-color: #d0e9ff !important;
   /*#DDEEDD;*/
   cursor: pointer;
}

.table-template1>tbody>tr:nth-child(even) {
   background-color: #f0f9ff;
   /*#DDEEDD;*/
}

.table-template1>thead>tr>th {
   text-transform: uppercase;
}

.table-template1>thead th .th-inner, .table-template1>tbody td .th-inner {
   padding: 2px 8px 2px;
   line-height: 15px;
}

.table-template1>tbody>tr.detail-view {
   background-image: linear-gradient(to right bottom, #dfe5f6, #dfe5f6, #b1cfec, #75bbdc, #00a9c2);
}

.table-template1>tbody>tr.detail-view>td {
   padding: 7px;
   padding-left: 30px;
   margin-left: 20px;
   height: 100%;
   /*box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.5);
  border-style: solid;
  border-width: thin;
  /*background-color: #455a64;*/
   /*background:#78909c url(../img/pjb-bg.png) right bottom  / contain no-repeat*/
   border-top: 1px solid #acd;
   border-bottom: 1px solid #acd;
   background: url(../img/pjb-bg.png) right bottom / cover no-repeat;
   background-size: 40%;
}

.table-template1>tbody>tr.detail-view>td>.detail-container {
   /*background-color: #e0f7fa;*/
   background-color: rgba(255, 255, 255, 0.8);
   /* border-radius: 5px; */
   /*border: 5px solid #005861;*/
   /* border: 0.9px solid #6ab; */
   padding: 15px 5px;
   /*box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);*/
}

.table-template1 tr.detail-view>td>.detail-table {
   background-color: rgba(255, 255, 255, 0.6);
   padding: 15px 20px;
}

.modal-body-content .detail-table .form-group, .table-template1 .detail-table .form-group {
   margin-bottom: 2px;
   border-bottom: 0.9px dotted #607d8b;
   margin-left: 0;
   margin-right: 0;
   text-align: justify;
}

.modal-body-content .detail-table .control-label, .table-template1 .detail-table .control-label {
   padding-top: 0;
}

.data-show .form-group {
   margin-bottom: 2px;
   border-bottom: 0.9px dotted #607d8b;
   margin-left: 0;
   margin-right: 0;
   text-align: justify;
   font-size: 9pt;
}

.data-show .control-label {
   padding-top: 0;
}

.table-template1 .detail-container hr {
   margin: 2px 0;
   border-bottom: 1px dotted #607d8b;
}

.table-template1 .detail-container .detail-text {
   white-space: pre;
   margin: 2px 0 5px 0;
   border-bottom: 1px dotted #607d8b;
   text-align: justify;
   min-height: 20px;
}

.modal-body-content .detail-container h5, .table-template1 .detail-container h5 {
   margin: 2px 0;
   font-weight: bold;
   padding: 4px 8px;
   background-color: #263238;
   color: #FFF;
}

.table-template1 .detail-container h6.dt {
   background-color: #b0bec5;
   margin: 2px 0;
   font-weight: bold;
   padding: 2px 5px;
}

.table-template1 .detail-container h6.wg {
   margin: 2px 0;
   color: #01579b;
   padding: 2px 5px;
   text-align: right;
   font-size: 11px;
}

#modal-detail .modal-content {
   background-color: rgba(255, 255, 255, 0.93) !important;
}

#modal-detail-table {
   top: 20px;
   left: 20px;
   bottom: 20px;
   right: 20px;
   background-color: rgba(255, 255, 255, 0.93);
   position: fixed;
   z-index: 1040;
   overflow: auto;
}

table>tbody>tr.trHover:hover {
   background: rgba(0, 195, 204, .3);
   cursor: pointer;
}

.modalFull {
   background: transparent;
   padding-right: 0 !important;
}

.modalFull>.modal-dialog {
   width: 98%;
   margin: 20px auto;
   padding: 0;
}

.modalFull>.modal-dialog>.modal-content {
   min-height: 500px;
   border-radius: 0;
   border: 0;
}

.wr-filter .form-group {
   margin: 0;
}

.wr-filter input, .wr-filter select, .wr-filter textarea {
   margin-bottom: 1px;
}

.form-template1 .form-group {
   margin-bottom: 2px;
}

button.btn-primary.form-control[disabled] {
   background-color: #60aeba;
   border-color: #4dd0e1;
   /*
  border-color: #4dd0e1;
  background-color: #337ab7;
	*/
   opacity: 0.65;
}

button.btn-danger.form-control[disabled] {
   background-color: #d9534f;
   opacity: 0.65;
}

button.btn-success.form-control[disabled] {
   background-color: #5cb85c;
   opacity: 0.65;
}

#formUnit .col-md-6 {
   margin-bottom: 50px;
}

#formUnit h4 {
   font-weight: bold;
   color: #337ab7;
   border-bottom: 2px solid #337ab7;
   margin: 20px 0 4px 0;
   padding: 0 0 2px 0;
}

.tab-ronn.nav-tabs {
   border-bottom: 1px solid #006677;
   margin-bottom: 5px;
}

.tab-ronn.nav-tabs>li {
   margin-bottom: 0;
}

.tab-ronn.nav-tabs>li>a {
   background-color: #f0f6ff;
   color: #a0a6af;
   cursor: pointer;
   border: none;
}

.tab-ronn.nav-tabs>li>a:hover {
   background-color: #e0e6ef;
   color: #666;
   border: none;
}

.tab-ronn.nav-tabs>li.active>a, .tab-ronn.nav-tabs>li.active>a:focus, .tab-ronn.nav-tabs>li.active>a:hover {
   background-color: #006677;
   color: #FFF;
   font-weight: bold;
   /* border: 1px solid #006677; */
   border-color: #006677;
   border-bottom: none;
}

.tab-info-tambahan.nav-tabs {
   border-bottom: none;
}

.tab-info-tambahan.nav-tabs>li>a {
   background-color: #f0f6ff;
   border: 1px solid transparent;
   border-bottom-color: #bce8f1;
   color: #a0a6af;
}

.tab-info-tambahan.nav-tabs>li>a:hover {
   background-color: #e0e6ef;
   color: #666;
}

.tab-info-tambahan.nav-tabs>li.active>a, .tab-info-tambahan.nav-tabs>li.active>a:focus, .tab-info-tambahan.nav-tabs>li.active>a:hover {
   background-color: #008891;
   color: #FFF;
   border-color: transparent;
}

.tab-info-tambahan.tab-pane {
   padding: 20px;
   background-color: #b2ebf2;
   color: #006064;
   border: 1px solid #80deea;
   border-radius: 0 4px 4px 4px;
}

.tab-info-tambahan button {
   margin-left: 2px;
}

.dropdown-menu {
   min-width: 200px
}

.btn {
   padding: 6px 25px;
}

#modal-select .btn {
   white-space: normal;
   min-height: 55px;
}

.form-info-default button {
   display: none;
}

.form-info-default, .form-info-clone {
   padding: 5px 0 5px 0;
   border-bottom: 1px solid #6ac;
}

.app-label {
   font-weight: bold;
   text-align: right;
}

.filterControl>.form-control {
   padding: 0;
   height: 20px;
   border-radius: 0px;
   border: none;
   border-bottom: 0.9px dotted rgba(255, 255, 255, 0.5);
   background-color: rgba(255, 255, 255, 0);
   box-shadow: none;
   font-weight: normal;
}

.filterControl>input.form-control {
   color: #FF0;
}

.filterControl>select.form-control {
   background-color: #008891;
   color: #FF0;
}

.filter-show-clear {
   height: 34px;
}

.accordion>.panel>.panel-heading {
   cursor: pointer;
}

.fixed-table-toolbar button {
   height: 34px;
}

.fixed-table-toolbar>.pull-left {
   margin: 0;
   vertical-align: bottom;
}

.icon-color>i.fa-ban, .icon-color>i.fa-exclamation-triangle {
   color: red;
}

.icon-color>i.fa-check {
   color: green;
}

.icon-color>i.fa-spinner {
   color: black;
}

.subStrText {
   white-space: nowrap;
   /* white-space: pre; */
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
}

#v_mo_targetTable .subStrText{
   max-width: 500px !important;
}


.row.no-pad {
   margin-left: 0;
   margin-right: 0;
}

.row.no-pad>[class*='col-'] {
   padding-right: 0;
   padding-left: 0;
}

.verticalTableHeader th {
   text-align: center;
   white-space: nowrap;
   transform-origin: 50% 50%;
   transform: rotate(-90deg);
}

.verticalTableHeader th:before {
   content: '';
   padding-top: 100%;
   /* takes width as reference, + 10% for faking some extra padding */
   display: inline-block;
   vertical-align: left;
}

.modal {
   overflow: auto !important;
}

.detail-table .form-group {
   font-size: 10pt;
}


.notulen label{   
   display: none;
}
.notulen .col-md-12,
.notulen .col-md-10{
   width:100% !important;
   margin: 0 !important;
   padding: 0 !important;
}
.notulen .form-group:nth-child(3){
   display: none;
}