@media print{
    @page{
        size: landscape;
    }
    .print-show{
      display: unset !important;
    }
    .print-hide, .dt-button, .dataTables_paginate, .dataTables_filter, .dataTables_info{
      display: none !important;
    }
    body{
        min-width: 1250px !important;
    }
}

.al-maklumat p+p {
  display: none;
}

.print-show{
  display: none;
}

.tag.label {
  font-weight: bold;
}

.bootstrap-tagsinput>input {
  display: none;
}

.vertical-middle {
  vertical-align: middle !important;
}

*{
  letter-spacing: 0.3px !important;
}

/*sidenav*/
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.3s;
        padding-top: 60px;
    }
    .sidenav a {
        padding: 5px 8px 8px 32px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        transition: 0.3s;
        height: 50px;
        overflow: hidden;
        display: -webkit-box; 
        line-height: 40px;
    }

    .sidenav a:hover {
        color: #80bd01;
        background: rgba(0,0,0,0.2);
    }
    .sidenav a.active{
        color: #80bd01;
        background: rgba(255,255,255,0.1) !important;
        border-left: 4px solid #80bd00;
        font-weight: 600;
        padding-left: 28px;
    }
/*sidenav*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #555555; 
  border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #95A5A6; 
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #525E64; 
}

.line-bangunan{
  line-height: 2.5ex;
  height: 5ex;
}

.portlet>.portlet-title>.tools>a.fullscreen:before {
    font-family: Simple-Line-Icons;
    content: "\e057";
}

.portlet>.portlet-title>.tools>a.fullscreen.on:before {
    font-family: Simple-Line-Icons;
    content: "\e058";
}

.bg-brown-dark{
    background-color: #26211e !important;
}
.bg-brown{
    background-color: #352b29 !important;
}

.line-right{
    border-right: 1px solid #95A5A6 !important;
    border-radius: 0px;
}
.line-left{
    border-left: 1px solid #95A5A6 !important;
    border-radius: 0px;
}

.font-brown{
  color: #352b29 !important;
}


.img-zoom-center{
    height: 100%;
    width: 100%;
    object-fit: cover;
}



/*page-header*/
.page-header {
    opacity: 1;
    filter: alpha(opacity=100);
    width: 100%;
    height: 75px !important;
    margin: 0;
    border: 0;
    padding: 0;
    height: 126px;
    background-image: none;
}
.page-header .page-header-top .page-logo .logo-default {
    margin: 20px 0 0;
    width: 270px;
}
.container {
    width: 98%;
}


/*hightchart*/
.highcharts-background {
  fill : transparent !important;
}

ul, menu, dir {
    display: block;
    list-style-type: none;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.pushy a {
    display: block;
    color: #b3b3b1;
    padding: 15px 15px !important;
    text-decoration: none;
}

.pushy-submenu button {
    width: 100%;
    color: #b3b3b1;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px !important;
    padding-right: 30px !important;
    text-align: left;
    background: transparent;
    border: 0;
}

.pushy-submenu button:hover {
    color: #2AB4C0 !important;
}

.pushy a:hover {
    color: #2AB4C0 !important;
}



/*divider*/
#divider {
      text-align: center;
      border-radius: 4px;
      border: 2px solid #ffffff;
      padding : 0px; 
      width: 100%;
      height: 28px; 
      margin-bottom: 10px;
      margin-top: 3px;
      font-size: 15px;
      color: #ffffff;
      align-items: center;
      background-color: #5e738b ;
}


/*col*/
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-left: 2.5px;
    padding-right: 2.5px;
}


.dashboard-statC {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  padding: 5px 5px 0px 5px;
  margin-bottom: 5px;}
  .dashboard-statC.bordered {
    border: 1px solid #e7ecf1; }
  .dashboard-statC .display {
    margin-bottom: 5px;
    text-align: center; 
    font-family: roboto,sans-serif !important;}
    .dashboard-statC.display:before, .dashboard-stat2 .display:after {
      content: " ";
      display: table; }
    .dashboard-statC .display:after {
      clear: both; }
    .dashboard-statC .display .number {
      float: middle;
      display: block;
      text-align: center; 
      font-family: roboto,sans-serif; }
      .dashboard-statC .display .number h3 {
        margin: 0 0 0px 0;
        padding: 0;
        font-size: 20px;
        font-weight: 100;
        font-family: roboto;}
        .dashboard-statC .display .number h3 > small {
          font-size: 23px; }
      .dashboard-statC .display .number small {
        font-size: 12px;
        color: #AAB5BC;
        font-weight: 400;
        text-transform: uppercase; }
      .dashboard-statC .display .number i {
        color: #44b6ae;
      }
    .dashboard-statC .display .icon {
      display: inline-block;
      float: right;
      padding: 7px 0 0 0; }
      .dashboard-statC .display .icon > i {
        color: #000;
        font-size: 26px; }
  .dashboard-statC .progress-info {
    clear: both; }
    .dashboard-statC .progress-info .progress {
      margin: 0;
      height: 20px;
      clear: both;
      display: block; }
    .dashboard-statC .progress-info .status {
      margin-top: 5px;
      font-size: 11px;
      color: #AAB5BC;
      font-weight: 600;
      text-transform: uppercase; }
      .dashboard-statC .progress-info .status .status-title {
        float: left;
        display: inline-block; }
      .dashboard-statC .progress-info .status .status-number {
        float: right;
        display: inline-block; }



.dashboard-statS {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  padding: 5px 5px 0px 5px;
  margin: 0px 0px 0px 0px;
  text-transform: capitalize;}
  .dashboard-statS.bordered {
    border: 1px solid #e7ecf1; }
  .dashboard-statS .display {
    margin-bottom: 5px;
    text-align: center; }
    .dashboard-statS.display:before, .dashboard-stat2 .display:after {
      content: " ";
      display: table; }
    .dashboard-statS .display:after {
      clear: both; }
    .dashboard-statS .display .number {
      float: middle;
      display: block;
      text-align: center; }
      .dashboard-statS .display .number h3 {
        margin: 0 0 0px 0;
        padding: 0;
        font-size: 20px;
        font-weight: 100;
        font-family: roboto;}
        .dashboard-statS .display .number h3 > small {
          font-size: 23px; }
        .dashboard-statS .display .number h3 > i {
          color: #bfbfbf !important; }
      .dashboard-statS .display .number small {
        font-size: 15px;
        color: #AAB5BC;
        font-weight: 600;
        text-transform: capitalize; 
        font-family: roboto;}
      .dashboard-statS .display .number i {
      }
    .dashboard-statS .display .icon {
      display: inline-block;
      float: right;
      padding: 7px 0 0 0; }
      .dashboard-statS .display .icon > i {
        color: #000;
        font-size: 26px; }
  .dashboard-statS .progress-info {
    clear: both; }
    .dashboard-statS .progress-info .progress {
      margin: 0;
      height: 20px;
      clear: both;
      display: block; }
    .dashboard-statS .progress-info .status {
      margin-top: 5px;
      font-size: 11px;
      color: #AAB5BC;
      font-weight: 600;
      text-transform: uppercase; }
      .dashboard-statS .progress-info .status .status-title {
        float: left;
        display: inline-block; }
      .dashboard-statS .progress-info .status .status-number {
        float: right;
        display: inline-block; }





.progress {
    height: 20px;
    margin-bottom: 20px;
    background-color: #e1e5ec;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}


/*masa*/
.label-clock{
    margin-bottom:0px;
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 3px;
    display: -webkit-inline-box;
    color: #32C5D2 !important;
    font-size: 15px !important;
    vertical-align: bottom;
}
.clock{
    margin-bottom:0px;
    margin-top: 4px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: -webkit-inline-box;
    color: #fff !important;
    font-size: 14px !important;
    text-align: left;
}
.suhu {
    margin-bottom: -5px;
    margin-top: -15px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: -webkit-inline-box;
    color: #fff !important;
    font-size: 15px !important;
}
.palang{
    margin-bottom:3px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: -webkit-inline-box;
    color: #fff !important;
    font-size: 20px !important;
}
h2 {
    font-size: 15px;
    font-family: 'roboto' !important;
}


/*laporan kecemasan*/
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu {
    background: #2e343b;
    border: 0;
    min-width: -moz-max-content;
}

.page-header .container, .page-header .container-fluid {
    position: relative;
    height: 110px;
}


.img-responsive, .img-thumbnail, label {
    max-width: 30%;
}


.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active, .page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus, .page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
    background-color: transparent;
}


/*carousel*/
.carousel, .carousel-inner {
    position: relative;
    border-radius: 4px;
}
.carousel-indicators {
    bottom: -5px;
}
dl, ol, ul {
    margin-top: 0;
}
.carousel-control{
    border-radius: 0px;
    bottom: 5px;
}
.carousel-inner > .item{
    height: 100% !important;
}


.row {
    margin-left: 0px;
    margin-right: 0px;
}

/*header top*/
.page-header .page-header-top {
    height: 60px;
}
.page-header .container, .page-header .container-fluid {
    position: relative;
    height: 60px;
}
.page-header .page-header-top .page-logo {
    float: left;
    display: block;
    width: 255px;
    height: 60px;
    margin-top: -15px;
}
.page-header .page-header-top .top-menu {
    margin: 5px 0 0;
    padding: 0;
    float: right;
}
.page-header .page-header-menu {
    display: block;
    clear: both;
    padding-top: 0px;
    font-family: 'roboto', sans-serif;
}.page-header {
    opacity: 1;
    filter: alpha(opacity=100);
    width: 100%;
    height: 85px !important;
    margin: 0;
    border: 0;
    padding: 0;
    height: 126px;
    background-image: none;
}

.timeline-maktab{
    color: #fff;
    font-size: 15px;
    font-family: 'roboto', sans-serif;
    text-transform: uppercase;
}



.transport{
    width: 100%;
    height: 100% !important;
    margin-top: 0px;
    transform: translateY(0%);
}
.fly{
  font-family: roboto;
  font-size: 14px;
  color: #000000;
}



.portlet {
    margin: 0px 3px 10px 3px;
    padding-bottom: 0;
    border-radius: 4px;
}
.portlet.box > .portlet-body {

    background-color: #fff;
    padding: 5px 5px 5px 5px;
}
.portlet > .portlet-title > .tools {

    float: right;
    display: inline-block;
    padding: 5px 0px 0px 5px;
    margin-bottom: 0px;
}
.portlet.box > .portlet-title > .caption {
    padding: 5px 0 10px;
    margin-top: 0px;
    font-size: 14px;
    text-transform: capitalize;
}
.portlet>.portlet-title>.caption>i {
    margin-top: 2px;
}
.portlet > .portlet-title {
    border-bottom: 1px solid #eee;
    padding: 0;
    margin-bottom: 10px;
    min-height: 5px;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    font-family: sans-serif;
}
.portlet .dashboard-stat:last-child {
    margin-bottom: 5px;
}


.page-title{
    font-family: roboto;
    text-transform: uppercase;
    font-size: 20px;
    float: left;
    padding-left: 100px;
    padding-top: 3px;
    text-align: center;
}

.font-green-theta{
    color: #80bd01 !important;
}
.font-greenC{
  color: #328303 !important;
}
.font-redC{
  color: #b7444e !important;
}
.font-TL{
  color: transparent !important;
}
.font-transparent{
  color: transparent !important;
}
.bold{
  font-weight: 600;
}

.bg-redC{
  background-color: #b7444e;
}








/*timeline*/
.portlet.light.portlet-fit > .portlet-body {
    padding: 10px 5px 5px;
}
.cd-horizontal-timeline .events a {
    color: #fff;
}
.cd-horizontal-timeline .timeline {
    position: relative;
    height: 80px;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
}
.cd-timeline-navigation a {
    transform: translateY(-20%);
}
.cd-horizontal-timeline .events-wrapper {
    margin: -10px 15px -10px 20px;
}
.cd-horizontal-timeline .events-content {
    margin-top: -20px;
}



/*tabbale-custom*/
.tabbable-custom > .nav-tabs > li.active > a {
    padding: 3px;
    font-family: roboto;
    color: black;
}
.tabbable-custom > .nav-tabs > li > a {
    padding: 3px 0px 0px 0px;
    font-family: roboto;
    color: white;
}
.tabbable-custom {
    margin-bottom: 0px;
}
.tabbable-custom > .tab-content {
    padding: 0px
}

.img-circle2 {
  border-radius: 60%; 
  height: 33px;}


hr{
    border: 0;
    border-top: 0.5px solid grey;
    border-bottom: 0;
}
hr, p {
    margin: 0px 0px 0px 0px;
}
.vl1 {
    border-left: 0.5px solid #95A5A6;
    height: 80px;
}
.vl2 {
    border-left: 0.5px solid #95A5A6;
    height: 180px !important;
}
.vl3 {
    border-left: 0.5px solid #95A5A6;
    height: 290px !important;
}
.vl4 {
    border-left: 0.5px solid #95A5A6;
    height: 385px !important;
}


.font-blueC{
  color: #5E738B !important;
}

.tiny{
  font-size: 13px;
  font-family: roboto;
  font-weight: 600;
}


.pie{
  max-height: 130px !important;
  max-width: 100% !important;
  padding-bottom: 10px;
  margin-bottom: 0px !important;
  transform: translateY(0px);
}

.mark{
  max-height: 5px;
  max-width: 3px !important;
}

.fa-building{
  color: #3976d2;
}

.knob{
    max-height: 80px !important;
    max-width: 80px !important;
    margin-top: -5px !important;
    margin-left: -65px !important;
    font-size: 20px !important;
}

canvas{
  max-height: 50px !important;
  max-width: 50px !important;
}

body{
  font-family: roboto !important;
}

.C{
  font-size: 10px;
  width: 100%;
}

.highcharts-legend{
  transform: translateX(-10px);
  font-size: 50px !important;
}

ul#horizontal-list {
  list-style: none;
}
ul#horizontal-list li{
  display: inline;
}
.tanda{
  display: inline-block;
  padding-bottom: -8px;
}


.font-greenC{
  color: green !important;
}

.basl{
  font-size: 14px !important;
  font-weight: 600;
  float: left;
}
.basr{
  font-size: 14px !important;
  font-weight: 600;
  float: right !important;
}

.marquee{
  width: 300px;
}

.pengurus{
  font-weight: 400;
}


/*amchartCustom*/
#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
} 

.table{
  width: 100% !important;
  padding: 0px 0px 0px 0px !important;
  font-size: 10px !important;
  margin-top: -10px;
}
th{
  font-size: 13px !important;
  text-align: center;
  padding-left: 4px !important;
  padding-right: 4px !important;
  font-weight: 600 !important;
}
td{
  font-size: 13px !important;
  padding-bottom: 4px !important;
  padding-top: 4px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
  letter-spacing: 0.5px !important;
  color: #000000;
}


.label.label-sm {
    font-size: 10px;
    padding: 0px 3px 2px 3px;
}

.photo{
  max-height: 30px !important;
  max-width: 30px !important;
}


.page-header .page-header-top .top-menu .navbar-nav>li.dropdown>.dropdown-toggle:last-child {
    padding-right: 7px;
}


.font-12{
  font-size: 11px !important;
}

.donut{
  width: 100% !important;
  height: 180px !important;
  font-weight: 600 !important;
}


div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
  }


[class*=" fa-"]:not(.fa-stack), [class*=" glyphicon-"], [class*=" icon-"], [class^=fa-]:not(.fa-stack), [class^=glyphicon-], [class^=icon-] {
    display: inline-block;
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
}

.table-scrollable {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0px !important; 
    margin-bottom: -10px !important;
    margin-top: -10px !important;
}

.btn.fasa1, .btn.fasa1:not(.btn-outline).active, .btn.fasa1:not(.btn-outline):active, .btn.fasa1:not(.btn-outline):hover, .open>.btn.fasa1:not(.btn-outline).dropdown-toggle {
    color: #009ABF;
    background-color: transparent;
    border-color: transparent;
    font-size: 25px;
    font-weight: bold;
}

.btn.fasa2, .btn.fasa2:not(.btn-outline).active, .btn.fasa2:not(.btn-outline):active, .btn.fasa2:not(.btn-outline):hover, .open>.btn.fasa2:not(.btn-outline).dropdown-toggle {
    color: #00c360;
    background-color: transparent;
    border-color: transparent;
    font-size: 25px;
    font-weight: bold;
}

.btn.terkinifasa1 {
    color: #ffffff;
    background-color: #80bd01;
    border-color: #80bd01;
}
.btn.terkinifasa1:hover{
  background-color: #008000;
}

.btn.terkinifasa2 {
    color: #ffffff;
    background-color: #80bd01;
    border-color: #80bd01;
}
.btn.terkinifasa2:hover{
  background-color: #008000;
}

.btn.transparent{
  color: #ffffff;
  background-color: transparent;
  border-color: #80bd01;
}
.btn.transparent:hover{
  background-color: #38302e;
}


.btn.print{
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
  opacity: 0.9;
}
.btn.print:hover{
  background-color: transparent;
  opacity: 1;
}

.btn.greenC{
    color: #ffffff;
    border-width: 0px;
    background-color: #80bd01 !important;
    border-color: #80bd01 !important;
}
.bglogin:hover{
  background-color: #009688 !important;
}

.bg-greenC{
  background-color: #80bd01 !important;
}


.forget-password{
    padding-left: 10px !important;
    float: none !important;
}

.disable{
  display: none !important;
}


.arrow{
    width: 170%;
  height: 22% !important;
  position: relative;
  z-index: 0;
  transform: translateX(-25%);
    animation-name: glow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.line-active{ /*line*/
  width: 170%;
  height: 22% !important;
  position: relative;
  z-index: 0;
  transform: translateX(-25%);
    animation-name: noglow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.font-activity{
  color : #000000;
  font-weight: 800;
  font-style: italic;
}
.currenttl{
    background-color: #0d62a3 !important;
    animation-name: glow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    border-radius: 50% !important;
}
.CC{
  position: absolute;
  box-sizing: border-box;
}
.CC:before{
  z-index: -20;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 0%;
  height: 0%;
  border: 0px solid red;
  border-radius: 50%;
  box-sizing: border-box;
  animation: WAVE 1.5s linear infinite;
}
.CC:after{
  z-index: -20;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 0%;
  height: 0%;
  border: 0px solid red;
  border-radius: 50%;
  box-sizing: border-box;
  animation: WAVE 1.5s linear infinite;
  animation-delay: 0.7s;
}
.cc{
  position: absolute;
  box-sizing: border-box;
}
.cc:before{
  z-index: -20;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 0%;
  height: 0%;
  border: 0px solid red;
  border-radius: 50%;
  box-sizing: border-box;
  animation: wave 1.5s linear infinite;
}
.cc:after{
  z-index: -20;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 0%;
  height: 0%;
  border: 0px solid red;
  border-radius: 50%;
  box-sizing: border-box;
  animation: wave 1.5s linear infinite;
  animation-delay: 0.7s;
}
@keyframes WAVE {  
    0% { width: 110%;
         height: 110%;
         opacity: 1;
         box-shadow: 0 0 10px red;
       }
    100% { width: 175%;
           height: 175%;
           opacity: 0;
           box-shadow: 0 0 10px red;
       }
}
@keyframes wave {  
    0% { width: 120%;
         height: 120%;
         opacity: 1;
         box-shadow: 0 0 10px red;
       }
    100% { width: 280%;
           height: 280%;
           opacity: 0;
           box-shadow: 0 0 10px red;
       }
}
.currentTL{
    animation-name: glow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.TLlepas{
  background-color: #f8eb5b !important;
}
.tllepas{
  background-color: #0d62a3 !important;
}
.jedlepas{
  background-color: #700876 !important;
  border-color: white !important;
}
.mkhlepas{
  background-color: #954c0b !important;
  border-color: white !important;
}
.medlepas{
  background-color: #3b7106 !important;
  border-color: white !important;
}
.kullepas{
  background-color: #160ec0 !important;
  border-color: white !important;
}
.bigTL{
  bottom: 10px;
  position: relative;
  z-index: 0;
  color: #ffffff;
  font-weight: 800;
  display: table-cell;
  vertical-align: middle;
  background-color: #a6a6a6;
  border: 2px solid white;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  left: 24%;
  -webkit-filter: drop-shadow(0px 0px 3px #6d6d6d);
     filter: drop-shadow(0px 0px 3px #6d6d6d);
}
.smallTL{
  bottom: 10px;
  position: relative;
  z-index: 0;
  color: #000000;
  font-weight: 800;
  display: table-cell;
  vertical-align: middle;
  background-color: #a6a6a6;
  border: 2px solid white;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  left: 130%;
  -webkit-filter: drop-shadow(0px 0px 3px #6d6d6d);
     filter: drop-shadow(0px 0px 3px #6d6d6d);
}
.imgTL{
  height: 25px;
  transform: translateY(-40%);
}
.divTL{
  position: relative;
  z-index: 1;
  transform: translateY(99%);
}
.divTM{
  position: relative;
  z-index: 1;
  transform: translateY(92%);
}
.divtl{
  position: relative;
  z-index: 1;
  transform: translateY(125%);
}
.eventTL{
  transform: translateY(-100%);
}
.lineTL{
  position: relative;
  z-index: 2;
}
.iconTL{
  color: transparent !important;
}

.div-masyair{
  transform: translateY(67%);
  position: relative;
  z-index: 1;
  color: #000;
}
.masyair-default{
  top: 10px;
  bottom: 10px;
  position: relative;
  z-index: 0;
  color: #000000;
  font-weight: 800;
  display: table-cell;
  vertical-align: middle;
  background-color: #a6a6a6;
  border: 2px solid white;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  left: 144%;
  -webkit-filter: drop-shadow(0px 0px 3px #6d6d6d);
     filter: drop-shadow(0px 0px 3px #6d6d6d);
}
.masyair-current{
  background-color: #26C281 !important;
}

.btnC {
    position: relative;
    z-index: 10;
    height:75px !important;
    text-shadow: 0 0 5px #ffffff;
    font-weight: 600 !important;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    /* cursor: pointer; */
    border: 0px solid #000000;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 20px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ffffff !important;
}
.btnC.current{
    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes glow {  
    0% { -webkit-filter: drop-shadow(0px 0px 1px red);
     filter: drop-shadow(0px 0px 1px red); }
    50% { -webkit-filter: drop-shadow(0px 0px 10px red);
     filter: drop-shadow(0px 0px 10px red); }
    100% { -webkit-filter: drop-shadow(0px 0px 0px red);
     filter: drop-shadow(0px 0px 0px red); }
}
@keyframes noglow {  
    0% { -webkit-filter: drop-shadow(0px 0px 1px transparent);
     filter: drop-shadow(0px 0px 1px transparent); }
    50% { -webkit-filter: drop-shadow(0px 0px 2px transparent);
     filter: drop-shadow(0px 0px 2px transparent); }
    100% { -webkit-filter: drop-shadow(0px 0px 0px transparent);
     filter: drop-shadow(0px 0px 0px transparent); }
}

.kul{
  border: 3px solid #36D7B7;
}
.med{
  border: 3px solid #BF55EC;
}
.mkh{
  border: 3px solid #f3898b;
}
.jed{
  border: 3px solid #f1c400;
}
.bagasi, .cci{
  border: 3px solid #000000;
}

.inactive{
  border: 3px solid #c5c7c2 !important;
}

.btn, .label {
  text-transform: none !important;
}

.td-padding-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


.table .btn {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.btn.menu{
  background-color: transparent;
  border: none;
  text-align: left;
  padding-left: 0px;
}
.btn.menu:hover{
  color: cyan;
}

.icon-portlet{
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
    color: black;
    width: 30px;
    transform: translateY(-20%);
}
.icon-dashboard{
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
    color: black;
    width: 30px;
    transform: translateY(-10%);
}

.notlink{
  pointer-events: none;
  cursor: default;
}



.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

div.dataTables_wrapper div.dataTables_paginate {
    float: right !important;
}

.bg-kelabu{
  background-color: #f0f0f0; 
}

.img-responsive, .img-thumbnail, label {
    max-width: 100%;
}

.text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 7.2em;
  text-align: justify;
  padding-right: 1em;
  vertical-align: bottom !important;
}
.text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

.img-berita{
  width: 100%;
  height: auto;
  overflow-y: hidden;
  overflow-x: hidden;
  padding-right: 8px;
}


.btn.refresh {
    color: #ffffff;
    background-color: #67809F;
    border-color: #67809F;
}
.btn.refresh:hover{
  background-color: #5E738B;
}

.berita {
  font-weight: 400 !important;
  text-align: left !important;
}

.bg-berita{
  background-color: transparent;
}

.berita-here .bg-berita{
  background-color: #fff;
}

.btn-mktb{
  margin-bottom: 5px;
  padding: 8px 14px 7px !important;
}

.bg-btnmktb{
  background-color: blue;
}
.bg-btnmktb:hover{
  background-color: green;
}

.btn-icon-only{
  background-color: transparent;
}

.dataTables_wrapper .dt-buttons {
    float: right;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sc {
  padding-top: 110px !important;
}

.setting:hover{
  background-color: transparent !important;
}
.setting{
  background-color: transparent !important; 
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-top: 10px;
}

@media print{
  .btn-print{
    display: none;
  }

  .this{
    display: block;
    width: 100% !important;
    background-color: white !important;
  }

}


.fullheight{
  height: 100% !important;
}


.blink {
    -webkit-animation: 2s linear infinite condemned_blink_effect; // for android
    animation: 2s linear infinite condemned_blink_effect;
}
@-webkit-keyframes condemned_blink_effect { // for android
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
.td-middle{
  font-size: 14px !important;
}


.btn-index{
  transform: translateY(110%);
}

div.dataTables_processing { z-index: 10 !important; }

.print-ic{
  margin-top: 15px !important;
}


.bar-middle{
  width: 120%;
  transform: translateX(-10%);
}

.align-left{
  padding-left: 25px !important;
}

.bg-shortcut{
  background-color: #999 !important;
  opacity: 0.5 !important;
}

.quick-nav .quick-nav-bg .bg-shortcut:hover{
  background-color: #999 !important;
  opacity: 1 !important;
}


.paused {
   -ms-animation-play-state:paused !important;
   -o-animation-play-state:paused !important;
   -moz-animation-play-state:paused !important;
   -webkit-animation-play-state:paused !important;
  animation-play-state: paused !important;
}
.paused2{
  visibility: hidden !important;
}

.dataTables_extended_wrapper {
    margin-top: 0px !important;
}

.fit-content{
  height: fit-content !important;
}

.modal-backdrop{
  z-index: 1 !important;
}

.paging-table{
  color: grey;
}

.btn-circle{
	box-shadow: none !important;
}


.no-shadow{
  box-shadow: none !important;
}

.pagebreak { page-break-before: always; }

div.dataTables_wrapper div.dataTables_filter input, div.dataTables_wrapper div.dataTables_filter input:focus {
    width: auto;
    height: 30px;
    border-radius: 4px !important;
    border-width: 1px !important;
    border: solid;
    border-color: #d6d6d6;
    outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-color: darkgrey !important;
  padding: 0.3em 0.7em;
  background-color: white !important;
  color: #337ab7 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button .disabled{
  border-color: darkgrey !important;
}

.dataTables_wrapper .dataTables_paginate .first{
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}
.dataTables_wrapper .dataTables_paginate .last{
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: #337ab7 !important;
  color: white !important;
}