body{
  background-color: #f2f6f9;
}
.aside-menu-fixed .main, .aside-menu-fixed .app-footer {
    margin-right: 0px;
  }
  /*Edit card page index*/
  #card-page-index{
    margin:2%;margin-top: 0%; padding-bottom: 0%;
  }
  #card-page-index > .card-header,#card-page-index > .card-footer{
    background-color: #fff;
  }
  /* END Edit card page index*/
  #form-filter{
    margin-bottom: 0px;
  }

  .x-table-scroll {
      width: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      margin: 0px;
      margin-bottom: 0px;
      padding: 0px;
  }

  .responsive-table {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    margin: 0px;
    padding: 0px;
  }

  .responsive-table td{
    white-space: nowrap;
  }
  tbody > tr > td > button .td-text{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  #new-data{
    text-decoration: none;
  }
  #expand-filter{
    cursor: pointer;
  }
  .content-filter-page-index{
    padding-top: 0.4rem;padding-bottom: 0px;padding-left:0.7rem;padding-right:0.7rem;margin-bottom: 8px;
  }
  .content-body-page-index{
    padding-bottom: 0.5%; margin-bottom: 0%;padding-top: 0.6rem;padding-left:0.7rem;padding-right:0.7rem;
  }

  .warning{background-color: #fcf8e3;}
  .info{
    background-color: #f5f7fa;color: #2b7dbc;
    -webkit-box-shadow: 0px 0px 18px -8px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 18px -8px rgba(0,0,0,1);
    box-shadow: 0px 0px 18px -8px rgba(0,0,0,1);
  }
  .has-error .form-control {
      border-color: #f86c6b;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
      /*border-color: #f86c6b;*/
  }
  .error-input{
      border-color: #f86c6b; 
  }

  .spinner {
    /*width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;
    top: 10;*/

    /*content: '';*/
    display: block;
    /*font-size: 10px;*/
    width: 40px;
    height: 40px;
    margin: auto;
    /*margin-top: -0.5em;*/
    background-color: #333;

    border-radius: 100%;  
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
  }

  @-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
      -webkit-transform: scale(1.0);
      opacity: 0;
    }
  }

  @keyframes sk-scaleout {
    0% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 100% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
      opacity: 0;
    }
  }

  #loader {
      transition: all .3s ease-in-out;
      opacity: 1;
      visibility: visible;
      position: fixed;
      height: auto;
      width: 100%;
      background: #fff;
      z-index: 90000;
      vertical-align: middle;
      align-items: center;
  }
  #alert-status{
    margin-bottom: 0px;
  }

  .pagination .disabled {
      color: #73818f;
      position: relative;
      display: block;
      /*padding: 0.5rem 0.75rem;*/
      margin-left: -1px;
      line-height: 1.25;
      /*border: 1px solid #ddd;*/
  }
  tbody .btn-sm{
    line-height: 0;
  }
  /*#inlay{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
  }*/


  /*
============== ANIMASI LOADING
*/
        .loading{
          position: fixed;
          z-index: 9999;
          height: 2em;
          width: 2em;
          margin: auto;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          display: block;
        }

        .loading-div{
          position: absolute;
          z-index: 999;
          height: 2em;
          width: 2em;
          margin: auto;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          display: block;
        }

        /* Transparent Overlay */

        #overlay {
          position: fixed;
          display: block;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0,0,0,0.5);
          z-index: 2;
          /*cursor: pointer;*/
        }

        .loading:before{
          content: '';
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
        }

        .loading-div:before{
          content: '';
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
        }

        .loading:not(:required){
          font: 0/0 a;
          color: transparent;
          text-shadow: none;
          background-color: transparent;
          border: 0;
        }

        .loading-div:not(:required){
          font: 0/0 a;
          color: transparent;
          text-shadow: none;
          background-color: transparent;
          border: 0;
        }

        .loading:not(:required):after{
          content: '';
          display: block;
          font-size: 10px;
          width: 1em;
          height: 1em;
          margin-top: -0.5em;
          -webkit-animation: spinner 1500ms infinite linear;
          -moz-animation: spinner 1500ms infinite linear;
          -ms-animation: spinner 1500ms infinite linear;
          -o-animation: spinner 1500ms infinite linear;
          animation: spinner 1500ms infinite linear;
          border-radius: 0.5em;
          -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
          box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }

        .loading-div:not(:required):after{
          content: '';
          display: block;
          font-size: 10px;
          width: 1em;
          height: 1em;
          margin-top: -0.5em;
          -webkit-animation: spinner 1500ms infinite linear;
          -moz-animation: spinner 1500ms infinite linear;
          -ms-animation: spinner 1500ms infinite linear;
          -o-animation: spinner 1500ms infinite linear;
          animation: spinner 1500ms infinite linear;
          border-radius: 0.5em;
          -webkit-box-shadow: 
            rgba(0, 0, 0, 0.75) 1.5em 0 0 0, 
            rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, 
            rgba(0, 0, 0, 0.75) 0 1.5em 0 0, 
            rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, 
            rgba(0, 0, 0, 0.5) -1.5em 0 0 0, 
            rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, 
            rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, 
            rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
          box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }


        @-webkit-keyframes spinner {
          0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @-moz-keyframes spinner {
          0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @-o-keyframes spinner {
          0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes spinner {
          0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
/*============ END ANIMASI LOADING*/

/*============ SWITCHER TABLE STYLE AND CONFIGURATION=============*/

.switch-primary .yes + .switch-slider {
      background-color: #20a8d8;
      border-color: #1985ac;
  }
  .switch-slider::before{
    top: 1px;
  }
  .switch {
      height: 24px;
  }
  .switch-label .yes ~ .switch-slider::before {
      -webkit-transform: translateX(22px);
      transform: translateX(22px);
  }
  .switch-label .yes ~ .switch-slider::after {
      left: 1px;
      color: #fff;
      content: attr(data-checked);
  }
  .switch-primary .yes + .switch-slider::before {
      border-color: #1985ac;
  }
  .table th, .table td, .table td label {
      vertical-align: middle;
  }
  .table td label {
      margin-bottom: 0px;
  }

  /*============ END SWITCHER TABLE STYLE AND CONFIGURATION=============*/


  /*============== EDIT STYLE .HAS-ERROR SELECT2 =================*/
  .has-error .select2-container--default .select2-selection--single {
      border-color: #f86c6b !important; 
  }
  /*edit style select2 highlights*/
  .select2-container--default .select2-selection--single{
    border-radius: 4px;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected] 
  {
    background-color: #27abd9;
    color: white;
  }
  /*============== END EDIT STYLE .HAS-ERROR SELECT2 =================*/