/* You can add global styles to this file, and also import other style files */
body {
    font-size: 12px !important;
  }
  
  /* .layout-wrapper .layout-main {
    padding: 70px 15px 15px 15px !important;
  } */
  
  body .p-widget-content,
  .p-widget,
  body .p-widget .p-widget {
    font-size: 12px !important;
  }
  
  .grid {
    margin-top: 0em !important;
    margin-right: 0em !important;
    margin-left: 0em !important;
  }
  
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    /* padding: .2em !important; */
    padding: 0.15em 0 0.15em 0.5em !important;
    /* height: 100% !important; */
  }
  
  .grid {
    margin-top: 0em !important;
    display: flex !important;
    flex-wrap: wrap;
  }
  
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    /* padding: .2em !important; */
    padding: 0.15em 0 0.15em 0.5em !important;
  }

  @media screen and (max-width: 40em) {
    .sm\:col-1,.sm\:col-10,.sm\:col-11,.sm\:col-12,.sm\:col-2,.sm\:col-3,.sm\:col-4,.sm\:col-5,.sm\:col-6,.sm\:col-7,.sm\:col-8,.sm\:col-9 {
        padding:.5em;
        width: auto;        
    }

    .sm\:col-1 {
        min-width: 8.3333%
    }

    .sm\:col-2 {
      min-width: 16.6667%
    }

    .sm\:col-3 {
      min-width: 25%
    }

    .sm\:col-4 {
      min-width: 33.3333%
    }

    .sm\:col-5 {
      min-width: 41.6667%
    }

    .sm\:col-6 {
      min-width: 50%
    }

    .sm\:col-7 {
      min-width: 58.3333%
    }

    .sm\:col-8 {
      min-width: 66.6667%
    }

    .sm\:col-9 {
      min-width: 75%
    }

    .sm\:col-10 {
      min-width: 83.3333%
    }

    .sm\:col-11 {
      min-width: 91.6667%
    }

    .sm\:col-12 {
      min-width: 100%
    }

    .sm\:col-offset-12 {
        margin-left: 100%
    }

    .sm\:col-offset-11 {
        margin-left: 91.66666667%
    }

    .sm\:col-offset-10 {
        margin-left: 83.33333333%
    }

    .sm\:col-offset-9 {
        margin-left: 75%
    }

    .sm\:col-offset-8 {
        margin-left: 66.66666667%
    }

    .sm\:col-offset-7 {
        margin-left: 58.33333333%
    }

    .sm\:col-offset-6 {
        margin-left: 50%
    }

    .sm\:col-offset-5 {
        margin-left: 41.66666667%
    }

    .sm\:col-offset-4 {
        margin-left: 33.33333333%
    }

    .sm\:col-offset-3 {
        margin-left: 25%
    }

    .sm\:col-offset-2 {
        margin-left: 16.66666667%
    }

    .sm\:col-offset-1 {
        margin-left: 8.33333333%
    }

    .sm\:col-offset-0 {
        margin-left: 0
    }
  }

  @media screen and (min-width: 40.063em) {
    .md:col-1,.md:col-10,.md:col-11,.md:col-12,.md:col-2,.md:col-3,.md:col-4,.md:col-5,.md:col-6,.md:col-7,.md:col-8,.md:col-9 {
        padding:.5em;
        width: auto;
    }

    .md:col-1 {
      min-width: 8.3333%
    }

    .md:col-2 {
      min-width: 16.6667%
    }

    .md:col-3 {
      min-width: 25%
    }

    .md:col-4 {
      min-width: 33.3333%
    }

    .md:col-5 {
      min-width: 41.6667%
    }

    .md:col-6 {
      min-width: 50%
    }

    .md:col-7 {
      min-width: 58.3333%
    }

    .md:col-8 {
      min-width: 66.6667%
    }

    .md:col-9 {
      min-width: 75%
    }

    .md:col-10 {
      min-width: 83.3333%
    }

    .md:col-11 {
      min-width: 91.6667%
    }

    .md:col-12 {
      min-width: 100%
    }

    .md:col-offset-12 {
        margin-left: 100%
    }

    .md:col-offset-11 {
        margin-left: 91.66666667%
    }

    .md:col-offset-10 {
        margin-left: 83.33333333%
    }

    .md:col-offset-9 {
        margin-left: 75%
    }

    .md:col-offset-8 {
        margin-left: 66.66666667%
    }

    .md:col-offset-7 {
        margin-left: 58.33333333%
    }

    .md:col-offset-6 {
        margin-left: 50%
    }

    .md:col-offset-5 {
        margin-left: 41.66666667%
    }

    .md:col-offset-4 {
        margin-left: 33.33333333%
    }

    .md:col-offset-3 {
        margin-left: 25%
    }

    .md:col-offset-2 {
        margin-left: 16.66666667%
    }

    .md:col-offset-1 {
        margin-left: 8.33333333%
    }

    .md:col-offset-0 {
        margin-left: 0
    }
}

@media screen and (min-width: 64.063em) {
    .lg\:col-1,.lg\:col-10,.lg\:col-11,.lg\:col-12,.lg\:col-2,.lg\:col-3,.lg\:col-4,.lg\:col-5,.lg\:col-6,.lg\:col-7,.lg\:col-8,.lg\:col-9 {
        padding:.5em;
        width: auto;
    }

    .lg\:col-1 {
      min-width: 8.3333%
    }

    .lg\:col-2 {
      min-width: 16.6667%
    }

    .lg\:col-3 {
      min-width: 25%
    }

    .lg\:col-4 {
      min-width: 33.3333%
    }

    .lg\:col-5 {
      min-width: 41.6667%
    }

    .lg\:col-6 {
      min-width: 50%
    }

    .lg\:col-7 {
      min-width: 58.3333%
    }

    .lg\:col-8 {
      min-width: 66.6667%
    }

    .lg\:col-9 {
      min-width: 75%
    }

    .lg\:col-10 {
      min-width: 83.3333%
    }

    .lg\:col-11 {
      min-width: 91.6667%
    }

    .lg\:col-12 {
      min-width: 100%
    }

    .lg\:col-offset-12 {
        margin-left: 100%
    }

    .lg\:col-offset-11 {
        margin-left: 91.66666667%
    }

    .lg\:col-offset-10 {
        margin-left: 83.33333333%
    }

    .lg\:col-offset-9 {
        margin-left: 75%
    }

    .lg\:col-offset-8 {
        margin-left: 66.66666667%
    }

    .lg\:col-offset-7 {
        margin-left: 58.33333333%
    }

    .lg\:col-offset-6 {
        margin-left: 50%
    }

    .lg\:col-offset-5 {
        margin-left: 41.66666667%
    }

    .lg\:col-offset-4 {
        margin-left: 33.33333333%
    }

    .lg\:col-offset-3 {
        margin-left: 25%
    }

    .lg\:col-offset-2 {
        margin-left: 16.66666667%
    }

    .lg\:col-offset-1 {
        margin-left: 8.33333333%
    }

    .lg\:col-offset-0 {
        margin-left: 0
    }
}

@media screen and (min-width: 90.063em) {
    .xl\:col-1,.xl\:col-10,.xl\:col-11,.xl\:col-12,.xl\:col-2,.xl\:col-3,.xl\:col-4,.xl\:col-5,.xl\:col-6,.xl\:col-7,.xl\:col-8,.xl\:col-9 {
        padding:.5em;
        width: auto;
    }

    .xl\:col-1 {
      min-width: 8.3333%
    }

    .xl\:col-2 {
      min-width: 16.6667%
    }

    .xl\:col-3 {
      min-width: 25%
    }

    .xl\:col-4 {
      min-width: 33.3333%
    }

    .xl\:col-5 {
      min-width: 41.6667%
    }

    .xl\:col-6 {
      min-width: 50%
    }

    .xl\:col-7 {
      min-width: 58.3333%
    }

    .xl\:col-8 {
      min-width: 66.6667%
    }

    .xl\:col-9 {
      min-width: 75%
    }

    .xl\:col-10 {
      min-width: 83.3333%
    }

    .xl\:col-11 {
      min-width: 91.6667%
    }

    .xl\:col-12 {
      min-width: 100%
    }

    .xl\:col-offset-12 {
        margin-left: 100%
    }

    .xl\:col-offset-11 {
        margin-left: 91.66666667%
    }

    .xl\:col-offset-10 {
        margin-left: 83.33333333%
    }

    .xl\:col-offset-9 {
        margin-left: 75%
    }

    .xl\:col-offset-8 {
        margin-left: 66.66666667%
    }

    .xl\:col-offset-7 {
        margin-left: 58.33333333%
    }

    .xl\:col-offset-6 {
        margin-left: 50%
    }

    .xl\:col-offset-5 {
        margin-left: 41.66666667%
    }

    .xl\:col-offset-4 {
        margin-left: 33.33333333%
    }

    .xl\:col-offset-3 {
        margin-left: 25%
    }

    .xl\:col-offset-2 {
        margin-left: 16.66666667%
    }

    .xl\:col-offset-1 {
        margin-left: 8.33333333%
    }

    .xl\:col-offset-0 {
        margin-left: 0
    }
}

  
  /*.layout-main {
     background: url(assets/img/background_sakti2.png) no-repeat center top !important;
    background-size: cover !important;
    height: 650px !important;
  }*/
  .p-card-body {
    box-shadow: none !important;
    /* background: #0b57b2; */
    padding: 18px !important;
  }
  
  .historyLogin {
    float: left !important;
    margin-top: 8px !important;
    margin-left: 24px !important;
    position: relative !important;
    color: #fff !important;
    font-size: 11px !important;
  }
  
  .layout-wrapper .topbar .topbar-right #menu-button {
    width: 24px !important;
    height: 24px !important;
    /* left: 284px !important; */
    margin-top: 5px !important;
  }
  
  .layout-wrapper .topbar .topbar-right #menu-button i {
    font-size: 24px !important;
  }
  
  .layout-wrapper .layout-menu li a {
    display: block !important;
    padding: 7px 10px 3px 3px !important;
  }
  
  .layout-wrapper .layout-menu li a.more-menu {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-bottom: 10px !important;
    padding-right: 70px !important;
    cursor: pointer !important;
    font-size: 14px !important;
  }
  
  .layout-wrapper .layout-menu li a.more-menu.apps {
    padding-top: 10px !important;
    padding-left: 20px !important;
    padding-bottom: 10px !important;
    padding-right: 20px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .layout-wrapper .layout-menu li a.more-menu.setting {
    padding-top: 12px !important;
    padding-left: 20px !important;
    padding-bottom: 10px !important;
    padding-right: 20px !important;
    cursor: pointer !important;
    font-size: 14px !important;
  }
  
  .layout-wrapper .layout-menu li a.more-menu.qna {
    padding-top: 12px !important;
    padding-left: 20px !important;
    padding-bottom: 10px !important;
    padding-right: 20px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    display: flex !important;
  }
  
  .layout-wrapper .layout-menu li a.ask-hai {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
  }
  
  .switch-theme-topbar {
    padding-top: 10px !important;
    padding-left: 5px !important;
    padding-bottom: 10px !important;
    padding-right: 15px !important;
    cursor: pointer !important;
    font-size: 14px !important;
  }
  
  .layout-wrapper .layout-menu li a.more-menu .logo {
    height: 50px !important;
    width: 50px !important;
    display: block !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }
  
  .layout-wrapper .layout-menu li a.ask-hai .logo {
    height: 25px !important;
    width: 50px !important;
    display: block !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }
  
  .layout-wrapper .layout-menu li a i.menuitem-toggle-icon {
    font-size: 12px !important;
  }
  
  .layout-wrapper .layout-menu li a span {
    display: contents !important;
  }
  
  .layout-wrapper .layout-menu li a i:first-child {
    margin-right: 5px !important;
    font-size: 12px !important;
  }
  
  .layout-wrapper .layout-menu li ul li a {
    padding: 3px 15px 3px 20px !important;
  }
  
  .layout-wrapper .layout-menu li ul li a i:first-child {
    margin-right: 5px !important;
    font-size: 12px !important;
  }
  
  .layout-wrapper .layout-menu li ul li ul li a {
    padding-left: 38px !important;
  }
  
  .layout-wrapper .layout-menu {
    font-size: 12px !important;
  }
  
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive
    .layout-menu-container {
    margin-left: -305px !important;
  }
  
  body .p-table .p-table-thead > tr > th,
  body .p-table .p-table-tbody > tr > td,
  body .p-table .p-table-tfoot > tr > td {
    padding: 3px 2px !important;
    font-size: 11px !important;
  }
  
  body .p-table .p-table-thead > tr > th,
  body .p-table .p-table-tfoot > tr > td {
    color: #666 !important;
    background: #ddd !important;
  }
  
  /* body .ui-messages.ui-messages-warn { */
  /* background-color: #fcf8e3 !important; */
  /* background-color: #cc0000 !important; */
  /* color: #8a6d3b !important; */
  /* color: #fff !important; */
  /* } */
  body .p-treetable .p-treetable-tbody > tr > td {
    padding: 3px 8px !important;
  }
  
  body .p-treetable p-treeTableToggler {
    margin-left: -20px !important;
  }
  
  body .p-table .p-paginator {
    margin: 0 !important;
  }
  
  body .p-treetable .p-treetable-tbody > tr > td {
    padding: 3px 8px !important;
  }
  
  .p-tabview.p-tabview-top .p-tabview-nav li a {
    padding: 5px 10px !important;
    font-size: 1em !important;
  }
  
  body .p-unselectable-text {
    margin-left: 0px !important;
  }
  
  .grid.form-group > div {
    padding: 5px !important;
  }
  
  .p-paginator .p-paginator-pages {
    height: auto !important;
  }
  
  .tableJeje .p-paginator {
    text-align: right !important;
  }
  
  .tableJeje p-dropdown {
    position: absolute !important;
    /* //float: left !important; */
    left: 10px !important;
  }
  
  .tableJeje p-dropdown::before {
    content: "Per page :" !important;
  }
  
  .tableJeje p-dropdown::after {
    content: "" !important;
  }
  
  .buttonJeje app-crud-button .p-toolbar {
    background-color: transparent !important;
    border: none !important;
    padding: 10px 0px !important;
  }
  
  body .p-tabview.p-tabview-top .p-tabview-nav li a,
  body .p-tabview.p-tabview-bottom .p-tabview-nav li a,
  body .p-tabview.p-tabview-left .p-tabview-nav li a,
  body .p-tabview.p-tabview-right .p-tabview-nav li a {
    padding: 8px 20px !important;
    color: #0782cf !important;
    font-weight: bold !important;
  }
  
  body .p-tabview.p-tabview-top .p-tabview-nav li.p-state-active,
  body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-state-active,
  body .p-tabview.p-tabview-left .p-tabview-nav li.p-state-active,
  body .p-tabview.p-tabview-right .p-tabview-nav li.p-state-active {
    background-color: #eef2f6 !important;
  }
  
  .p-tabview-nav .p-state-disabled a {
    color: grey !important;
  }
  
  .p-tabview-nav .p-state-disabled {
    outline: none !important;
  }
  
  .card {
    padding: 0 !important;
  }
  
  body .p-fieldset {
    /* padding: 0 0 0.5em 0 !important; */
    margin: 0 !important;
    margin-top: 5px !important;
  }
  
  body .p-fieldset .p-fieldset-content {
    padding: 5px 0px !important;
  }
  
  .p-fieldset-toggleable .p-fieldset-legend a {
    padding: 0.2em 1em 0.3em 0.5px !important;
  }
  
  body .p-fieldset .p-fieldset-legend {
    font-weight: bold !important;
    font-size: 100% !important;
    padding: 0 !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
  
  body .p-button.p-button-text-only .p-button-text {
    padding: 3px 8px !important;
  }
  
  body .p-button.p-button-text-icon-left .p-button-text {
    padding: 3px 25px !important;
  }
  
  body .p-inputtext .p-button.p-button-text-only .p-button-text {
    padding: 0 12px !important;
  }
  
  .flex .p-inputtext {
    font-size: 12px !important;
  }
  
  body .p-inputtext {
    /* padding: 3px 7px !important; */
  }
  
  textarea {
    /* width: 100% !important;  */
    border: thin solid #ccc !important;
    border-radius: 4px !important;
  }
  
  body .p-button.p-button-icon-only .p-button-text {
    padding: 3px 6px !important;
  }
  
  body .p-dialog .p-dialog-titlebar {
    padding: 0.5em 1em !important;
  }
  
  th {
    background: #4d9fff;
  }
  
  .layout-wrapper .topbar .topbar-right #topbar-menu-button i {
    font-size: 30px !important;
  }
  
  .layout-wrapper .layout-footer {
    padding: 5px 20px !important;
  }
  
  .layout-footer {
    bottom: 0px !important;
    position: fixed !important;
    min-width: 100% !important;
    margin: 0 auto !important;
    background: #fff !important;
  }
  
  .flex .p-button {
    width: auto;
  }
  
  .p-toast-message {
    white-space: pre-wrap !important;
  }
  
  label {
    font-weight: bold !important;
  }
  
  #dp_widget_container iframe[name="widget_trigger_iframe"] {
    display: none !important;
  }
  
  .layout-wrapper .layout-footer .footer-text-right img {
    cursor: pointer !important;
    height: 25px !important;
    opacity: 0.7 !important;
    border: 1px solid #0073ff !important;
    border-radius: 20px !important;
    padding: 2px 15px !important;
  }
  
  .layout-wrapper .layout-footer .footer-text-right img:hover,
  .layout-wrapper .layout-footer .footer-text-right img:active,
  .layout-wrapper .layout-footer .footer-text-right img:focus {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    transition: all 0.7s ease !important;
  }
  
  @media (min-width: 1025px) {
    .layout-wrapper.menu-layout-static .layout-footer {
      /* padding-right: 250px !important; */
      transition: all 0.3s !important;
    }
  
    .layout-wrapper.menu-layout-static.layout-menu-static-inactive
      .layout-footer {
      padding-right: 20px !important;
      transition: all 0.3s !important;
    }
  }
  
  ul.search-sidebar {
    position: relative !important;
  }
  
  ul.search-sidebar li {
    position: relative !important;
    list-style: none !important;
    display: table !important;
    margin: 10px 0 !important;
    padding-right: 5px !important;
    cursor: pointer !important;
  }
  
  ul.search-sidebar li::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: -30px !important;
    width: 16px !important;
    height: 16px !important;
    background: transparent !important;
    border-radius: 34px !important;
    transition: background 0.5s, width 0.5s !important;
    border: 2px solid #2e76ee !important;
    box-sizing: border-box !important;
  }
  
  ul.search-sidebar li:hover:before {
    background: #2e76ee !important;
    transition-delay: 0s, 0.5s !important;
  }
  
  ul.search-sidebar li a {
    position: relative !important;
    z-index: 10 !important;
    padding: 5px 10px !important;
  }
  
  .layout-wrapper .layout-menu-container::-webkit-scrollbar {
    display: none !important;
  }
  
  /* .card-login {
    background: rgba(255, 255, 255, 0.5) !important;
    padding: 1.5em !important;
    box-shadow: 0 5px 10px 0 rgba(130, 133, 136, 0.5),
      0 5px 10px 0 rgb(202, 220, 243) !important;
    border-radius: 4px !important;
  } */
  
  .theme-switcher-wrap {
    width: 100% !important;
    text-align: right !important;
  }
  
  .theme-switcher-wrap .theme-switcher {
    display: inline-block !important;
    cursor: pointer !important;
  }
  
  .theme-switcher-wrap .theme-switcher .switch-path {
    width: 60px !important;
    height: 30px !important;
    border-radius: 15px !important;
    background-color: #a3bddd !important;
  }
  
  .theme-switcher-wrap .theme-switcher .switch-path .switch-handle {
    background-color: #eaf0f9 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease-in-out !important;
  }
  
  .theme-switcher-wrap .theme-switcher .theme-switcher {
    display: none !important;
  }
  
  .theme-switcher-wrap .theme-switcher.active .switch-path {
    background-color: #303134 !important;
  }
  
  .theme-switcher-wrap .theme-switcher.active .switch-handle {
    transform: translateX(30px) !important;
    background-color: #161616 !important;
  }
  
  .card-login.theme-dark {
    background: rgba(33, 39, 53, 0.5) !important;
    padding: 1.5em !important;
    box-shadow: 0 5px 10px 0 rgba(47, 59, 89, 0.5), 0 5px 10px 0 rgb(47, 59, 89) !important;
    border-radius: 4px !important;
    color: white !important;
  }
  
  .theme-switcher-wrap-top {
    width: 100% !important;
    text-align: right !important;
  }
  
  .theme-switcher {
    display: inline-block !important;
    cursor: pointer !important;
  }
  
  .theme-switcher .switch-path {
    width: 40px !important;
    height: 24px !important;
    border-radius: 15px !important;
    background-color: #a3bddd !important;
  }
  
  .theme-switcher .switch-path .switch-handle {
    background-color: #eaf0f9 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease-in-out !important;
  }
  
  .theme-switcher .theme-switcher {
    display: none !important;
  }
  
  .theme-switcher.active .switch-path {
    background-color: #303134 !important;
  }
  
  .theme-switcher.active .switch-handle {
    transform: translateX(20px) !important;
    background-color: #161616 !important;
  }
  
  .list-user ul {
    position: relative !important;
    padding-inline-start: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .list-user ul li {
    list-style: none !important;
    padding: 10px !important;
    width: 90% !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
    transition: transform 1250ms !important;
    margin-bottom: 10px !important;
    border-radius: 5px !important;
  }
  
  .list-user ul li:hover {
    transform: scale(1.05) !important;
    z-index: 100 !important;
    background: #00469d !important;
    color: #fff !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
  }
  
  .list-user ul li.selected {
    transform: scale(1.05) !important;
    z-index: 100 !important;
    cursor: not-allowed !important;
  }
  
  .list-user ul li:active {
    transform: scale(1.05) !important;
    z-index: 100 !important;
    background: #00295c !important;
    color: #fff !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2) !important;
  }
  
  li.kelPeng {
    list-style: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.5s !important;
    margin-bottom: 10px !important;
    border-radius: 5px !important;
  }
  
  .load-saktidot {
    display: flex !important;
    background: #fff !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
  }
  
  .dot {
    width: 25px !important;
    height: 25px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    margin: 0 10px 0 10px !important;
  }
  
  .dot1 {
    background-color: #dfdfdf !important;
    animation: jump-up 0.6s 0.1s linear infinite !important;
  }
  
  .dot2 {
    background-color: #bb2eff !important;
    animation: jump-up 0.6s 0.2s linear infinite !important;
  }
  
  .dot3 {
    background-color: #004fff !important;
    animation: jump-up 0.6s 0.3s linear infinite !important;
  }
  .dot4 {
    background-color: #06e6ff !important;
    animation: jump-up 0.6s 0.1s linear infinite !important;
  }
  .dot5 {
    background-color: #3cffb9 !important;
    animation: jump-up 0.6s 0.2s linear infinite !important;
  }
  .dot6 {
    background-color: #a1ff3c !important;
    animation: jump-up 0.6s 0.3s linear infinite !important;
  }
  .dot7 {
    background-color: #fffa3c !important;
    animation: jump-up 0.6s 0.1s linear infinite !important;
  }
  .dot8 {
    background-color: #ffd43d !important;
    animation: jump-up 0.6s 0.2s linear infinite !important;
  }
  .dot9 {
    background-color: #ff8501 !important;
    animation: jump-up 0.6s 0.3s linear infinite !important;
  }
  
  @keyframes jump-up {
    50% {
      transform: translate(0, 15px);
    }
  }
  
  .load-circle {
    position: relative !important;
    display: flex !important;
    height: 100vh !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .load-ring {
    width: 200px !important;
    height: 200px !important;
    border: 0px solid #fff !important;
    border-radius: 50% !important;
    position: absolute !important;
  }
  
  .load-ring:nth-child(1) {
    border-bottom-width: 8px !important;
    border-color: #00469d !important;
    animation: rotate1 2s linear infinite !important;
  }
  
  .load-ring:nth-child(2) {
    border-right-width: 8px !important;
    border-color: #0073ff !important;
    animation: rotate2 2s linear infinite !important;
  }
  
  .load-ring:nth-child(3) {
    border-top-width: 8px !important;
    border-color: #009eff !important;
    animation: rotate3 2s linear infinite !important;
  }
  
  @keyframes rotate1 {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }
  
  @keyframes rotate2 {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }
  
  @keyframes rotate3 {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }
  
  .topbar-hai {
    background-image: url("../img/haiyellow.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 24px !important;
    width: 50px !important;
  }
  
  .bantuan.video {
    background-image: url("../img/bantuan/video_sakti.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 2em !important;
    width: 4em !important;
  }
  
  .bantuan.juknis {
    /* background-image: url("/assets/img/bantuan/juknis_sakti.png") !important; */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 2em !important;
    width: 4em !important;
  }
  
  .bantuan.hai {
    background-image: url("../img/logo-hai.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 2em !important;
    width: 4em !important;
  }
  
  /* .profile-info {
    margin-right: 16px !important;
  } */
  
  .warning-confirmation {
    background-color: #f8b7bd !important;
    font-size: 16px !important;
    padding: 10px !important;
    margin: 1px 8px 10px 1px !important;
  }
  
  sakti-anggaran-root #ang-belanja .p-button-icon-left.ui-clickable.pi {
    font-size: 24px !important;
  }

  .p-inline-message {
    width: 100%;
    justify-content: flex-start !important;
  }
  .custom-p-message2 .p-inline-message {
    width: fit-content !important;
    padding: 0rem 0.5rem !important;
  }
  

  td p-tablecheckbox {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nopad-left {
    padding-left: 0px !important;
  }