/*head datatable*/
div.dataTables_wrapper div.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    padding-left: .85em;
}
div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    padding-right: .85em;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: .5em;
    display: inline-block;
    width: auto;
}

/*footer datatable*/
div.dataTables_wrapper div.dataTables_info {
    padding-top: .85em;
    padding-left: .85em;
    font-size: 0.75rem !important;
}
div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
    font-size: 0.75rem !important;
    padding-right: .85em;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
}
body.example div.dataTables_wrapper ul li, body.example div.dataTables_wrapper ol li {
    padding: 0;
    border: none !important;
}
div.dataTables_wrapper li {
    text-indent: 0;
}
div.dataTables_wrapper li::before {
    content: "";
}

.bg-gradient-light {
    background-image: linear-gradient(144deg, #a5a5a5 0%, #a5a5a5 100%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon {
    background-image: linear-gradient(310deg, #f53939  0%, #fbcf33  100%);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #00b8ff;
    border-color: #00b8ff;
}

.page-link {
    color: #000000;
}

.icon-shape {
    padding-top: .5em;
}

.icon-shape .ni {
    top: 7px;
}

.wrap-button-filter{
    float: right;
}

.row {
    /*--bs-gutter-x: 0;*/
    margin-right: calc(var(--bs-gutter-x) / 0);
}

.label-required{
    color: red;
}

.text-title-login{
    font-size: 75%;
}

.text-subtitle-login{
    font-size: 75%;
}

.wrap-profile-photo{
    width: 6%;
    text-align: right;
}

.circle-manual{
    border-radius: 50%;
    width: 100%;
    height: 6vh;
}

.dd-profile{
    box-shadow: 0 8px 26px -4px rgb(20 20 20 / 15%), 0 8px 9px -5px rgb(20 20 20 / 6%);
    margin-left: 75.8%;
    top: 0.625rem;
    min-width: 17rem;
}

.dd-profile.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: perspective(999px) rotateX(0deg) 
    translateZ(0) translate3d(0, 37px, 5px) !important;
}

.f-left{
    float:left;
}

.main-content{
    height: 99vh;
}

.selected{
    background-color: #1410100f;
}

#navbarBlur{
    background-color: white;
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
    border-radius: 10px;
}

/*Start Timeline*/
.timeline {
  position: relative;
  padding:4px 0 0 0;
  margin-top:22px;
  list-style: none;
}

.timeline>li:nth-child(even) {
  position: relative;
  margin-bottom: 50px;
  height: 180px;
  right:-100px;
}

.timeline>li:nth-child(odd) {
  position: relative;
  margin-bottom: 50px;
  height: 180px;
  left:-100px;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
  min-height: 170px;
}

.timeline > li .timeline-panel {
  position: relative;
  float: left;
  width: 41%;
  padding: 0 20px 20px 120px;
  text-align: right;
}

.timeline>li .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline>li .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline-image{
  background-color: #cccccc;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.timeline>li .timeline-image {
  z-index: 100;
  position: absolute;
  left: 50%;
  border: 7px solid #3b5998;
  border-radius: 100%;
  background-color: #3b5998;
  box-shadow: 0 0 5px #4582ec;
  width: 200px;
  height: 200px;
  margin-left: -100px;
}

.timeline>li .timeline-image h4 {
  margin-top: 12px;
  font-size: 10px;
  line-height: 14px;
}

.timeline>li.timeline-inverted>.timeline-panel {
  float: right;
  padding: 0 120px 20px 20px;
  text-align: left;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline>li:last-child {
  margin-bottom: 0;
}

.timeline .timeline-heading h4 {
  margin-top:22px;
  margin-bottom: 4px;
  padding:0;
  color: #b3b3b3;
}

.timeline .timeline-heading h4.subheading {
  margin:0;
  padding:0;
  text-transform: none;
  font-size:18px;
  color:#333333;
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
  margin-bottom: 0;
  color:#808080;
}
/*Style for even div.line*/
.timeline>li:nth-child(odd) .line:before {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 53%;
  width: 4px;
  height:340px;
  background-color: #3b5998;
  -ms-transform: rotate(-44deg); /* IE 9 */
  -webkit-transform: rotate(-44deg); /* Safari */
  transform: rotate(-44deg);
  box-shadow: 0 0 5px #4582ec;
}
/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before  {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 47%;
  width: 4px;
  height:340px;
  background-color: #3b5998;
  -ms-transform: rotate(44deg); /* IE 9 */
  -webkit-transform: rotate(44deg); /* Safari */
  transform: rotate(44deg);
  box-shadow: 0 0 5px #4582ec;
}

.bg-btn-close{
  background-image: none;
}

#spn-count-notif, #spn-count-notif-maintenance{
  background: red;
  border-radius: 50%;
  color: white;
  position: absolute;
  left: -6px;
  width: 65%;
  text-align: center;
  top: 29%;
  animation: blink-animation 3s steps(5, start) infinite;
  -webkit-animation: blink-animation 3s steps(5, start) infinite;
}

#spn-count-notif-maintenance{
  width: 47% !important;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

/*************/
/*Media Query*/
/* Medium Devices, .visible-md-* */
@media (min-width: 2025px){
  .circle-manual {
    width: 18%;
    height: 2vh;
  }
}

@media (min-width: 1900px) and (max-width: 2024px){
  .circle-manual {
      width: 60%;
      height: 5vh;
  }
}

@media (min-width: 1256px) and (max-width: 1499px){
  .circle-manual {
    width: 80%;
    height: 6vh;
  }
}

@media (min-width: 1250px) and (max-width: 1255px) {
  .circle-manual{
      height: 9vh;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0px;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    left: 690px;
    margin-left: 0px;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 76%;
    padding: 0 0 20px 0px;
    text-align: left;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: right;
  }
  .timeline > li .line {
    display: none;
  }
}
/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0px;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    left: 520px;
    margin-left: 0px;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: left;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: right;
  }
  .timeline > li .line {
    display: none;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 767px) {
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li .timeline-image {
    position: static;
    width: 150px;
    height: 150px;
    margin-bottom:0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    float:right;
    left: 0px;
    margin-left:0;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 100%;
    padding: 0 0 20px 14px;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 100%;
    padding: 0 14px 20px 0px;
  }
  .timeline > li .line {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 700px){    
    /*
    .ms-sm-n4 {
        margin-left: -7.5rem !important;
    }
    */

    .dd-profile.show{
        margin-left: 57%;
        top: 0.100rem;
    }

    #spn-count-notif, #spn-count-notif-maintenance{
      width: 10%;
      left: 168px;
    }
}

@media (min-width: 326px) and (max-width: 575px){    
    .wrap-profile-photo{
        width: 15%;
    }
    
    #spn-count-notif, #spn-count-notif-maintenance{
      left: 77px;
      width: 7%;
    }
    
}

@media (max-width: 325px){
    #spn-count-notif, #spn-count-notif-maintenance{
      left: 77px;
      width: 13%;
    }
}