/* [medium screen] - iPad Landscape */
@media screen and (max-width: 1024px) {
  .ptsi-header {
    padding-left: 15px;
    padding-right: 15px;
  }

  .ptsi-widget {
    min-height: 300px;
  }

  .ptsi-tabs-inner-container {
    padding: 30px;
  }
}
/* [medium screen] */
@media screen and (max-width: 768px) {
  .nav-btn-menu {
    display: none;
  }

  main.container {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .ptsi-data-indicator li {
    flex-basis: 100%;
    text-align: left;
  }
  .ptsi-data-indicator li:before, .ptsi-data-indicator li:after {
    left: 17px;
    width: 2px;
    height: 50%;
  }
  .ptsi-data-indicator li:before {
    left: 15px;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .ptsi-data-indicator li.active + li:not(.active):before {
    width: 2px;
    left: 15px;
  }
  .ptsi-data-indicator li:last-child .icon-indicator {
    margin-bottom: 0;
  }
  .ptsi-data-indicator li:last-child:before {
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }
  .ptsi-data-indicator .text-indicator {
    display: inline-block;
    padding-left: 5px;
  }
  .ptsi-data-indicator .icon-indicator {
    margin-bottom: 24px;
  }

  .ptsi-widget {
    min-height: auto;
  }
  .ptsi-widget.widget-information {
    margin-bottom: 0;
  }

  .ptsi-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ptsi-header .dropdown-menu {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #f5f5f5;
  }
  .ptsi-header .ptsi-header-menu-right .nav-link,
  .ptsi-header .ptsi-header-menu .nav-link {
    padding-left: 15px;
    padding-right: 20px;
    line-height: 52px;
  }
  .ptsi-header .ptsi-header-menu-right .nav-link.dropdown-toggle {
    position: relative;
  }
  .ptsi-header .ptsi-header-menu-right .nav-link.dropdown-toggle:after {
    position: absolute;
    top: 50%;
  }
  .ptsi-header .ptsi-header-menu-right .nav-link.dropdown-toggle .badge {
    display: none;
  }
  .ptsi-header .ptsi-header-menu .nav-item.active .nav-link:before {
    display: none;
  }

  .ptsi-header.navbar-light .navbar-toggler {
    border: none;
    padding-right: 0;
  }
  .ptsi-header.navbar-light .navbar-toggler:focus {
    outline: none;
  }
}
/* [mobile landscape] */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  body {
    padding-top: 0;
    margin-bottom: 0;
  }

  .ptsi-header {
    position: relative;
  }

  main.container {
    padding-top: 0;
  }

  .ptsi-widget {
    padding: 20px;
  }
  .ptsi-widget.widget-information .widget-title {
    margin-bottom: 30px !important;
  }
  .ptsi-widget.widget-information .ptsi-btn {
    display: block;
  }

  .ptsi-chart-info {
    display: none;
  }

  .text-right {
    text-align: left !important;
  }

  .ptsi-page-header .page-title {
    margin-bottom: 15px;
  }

  .ptsi-box-background {
    padding: 20px;
  }

  .ptsi-tabs-header h4 {
    margin-bottom: 15px !important;
  }
  .ptsi-tabs-header .ptsi-btn {
    margin-top: 10px;
  }

  .ptsi-modal .modal-header {
    padding: 30px 25px 20px 30px;
  }
  .ptsi-modal .modal-body {
    padding-left: 30px;
  }
  .ptsi-modal .modal-footer {
    padding: 20px 33px 30px 33px;
  }

  .ptsi-footer {
    position: relative;
  }
  .ptsi-footer.ptsi-footer-button {
    text-align: center;
  }
  .ptsi-footer.ptsi-footer-button .ptsi-btn {
    padding: 10px 0;
    width: 100%;
    display: block;
    margin-top: 15px;
  }
  .ptsi-footer.ptsi-footer-button .ptsi-btn:first-child {
    margin-top: 0;
  }

  .ptsi-header-action {
    text-align: center;
  }

  .ptsi-header-menu .nav-link.dropdown-toggle,
  .ptsi-header-menu-right .nav-link.dropdown-toggle {
    position: relative;
  }
  .ptsi-header-menu .nav-link.dropdown-toggle:after,
  .ptsi-header-menu-right .nav-link.dropdown-toggle:after {
    position: absolute;
    right: 0;
    top: 50%;
  }
}
/* [small screen] */
@media screen and (max-width: 576px) {
  body {
    padding-top: 0;
    margin-bottom: 0;
  }

  .ptsi-header {
    position: relative;
  }

  .ptsi-header-menu .nav-link.dropdown-toggle,
  .ptsi-header-menu-right .nav-link.dropdown-toggle {
    position: relative;
  }
  .ptsi-header-menu .nav-link.dropdown-toggle:after,
  .ptsi-header-menu-right .nav-link.dropdown-toggle:after {
    position: absolute;
    right: 0;
    top: 50%;
  }

  .widget-information .widget-title {
    text-align: center;
    margin-bottom: 15px !important;
  }
  .widget-information .widget-title .ptsi-badge {
    display: block;
    margin: 0 auto 10px;
  }
  .widget-information .ptsi-btn {
    display: block;
  }

  .ptsi-chart-info {
    display: none;
  }

  .ptsi-footer {
    text-align: center;
  }
  .ptsi-footer:before {
    display: none;
  }

  .page-title {
    margin-bottom: 15px;
  }
  .page-title h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .page-title .ptsi-btn {
    display: block;
  }

  .dokumen-expired-item {
    flex-direction: column;
  }
  .dokumen-expired-item .dokumen-expired-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .owl-theme .owl-dots, .owl-theme .owl-nav {
    text-align: left;
    margin-left: -5px;
  }

  .text-right {
    text-align: left !important;
  }

  .ptsi-tabs {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .ptsi-tabs-header h4 {
    margin-bottom: 15px !important;
  }
  .ptsi-tabs-header .ptsi-btn {
    margin-top: 10px;
  }

  .ptsi-modal .modal-header {
    padding: 30px 15px 20px 15px;
  }
  .ptsi-modal .modal-body {
    padding-left: 15px;
    padding-right: 15px;
  }
  .ptsi-modal .modal-footer {
    padding: 25px 15px 30px 15px;
  }

  .ptsi-box-background {
    padding: 20px;
  }

  .apexcharts-legend-series {
    width: 100% !important;
  }

  .ptsi-chart-container {
    padding: 5px;
  }

  .ptsi-footer {
    position: relative;
  }
  .ptsi-footer.ptsi-footer-button {
    text-align: center;
  }
  .ptsi-footer.ptsi-footer-button .ptsi-btn {
    padding: 10px 0;
    width: 100%;
    display: block;
  }
  .ptsi-footer.ptsi-footer-button .ptsi-btn + .ptsi-btn {
    margin-top: 15px;
  }

  .ptsi-header-action {
    text-align: center;
  }

  .ptsi-input-file .custom-file-label {
    padding-left: 65px;
  }
  .ptsi-input-file .custom-file-label:after {
    font-size: 24px;
    width: 48px;
  }

  .ptsi-input-file .custom-file-input:lang(en) ~ .custom-file-label::after {
    font-family: "FontAwesome";
    content: "\f0ee";
  }
}
/* [tablet portrait] */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .ptsi-header {
    padding-top: 0;
    padding-bottom: 0;
  }
  .ptsi-header .dropdown-menu {
    -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
    background: #fff;
  }
  .ptsi-header .ptsi-header-menu-right .nav-link,
  .ptsi-header .ptsi-header-menu .nav-link {
    line-height: 82px;
  }

  .ptsi-footer-button {
    text-align: center;
  }
}