body {
      font-family: var(--font-family), sans-serif;
  }

  .app-nav a.nav-link {
      margin-left: 1rem;
  }

  .app-nav a.nav-link.active {
      background: var(--light-blue);
      color: var(--primary) !important;
      border-left: none;
      font-weight: 500;
      border-radius: 1rem;
      width: 85%;
  }

  .app-nav .nav-link:hover {
      color: #155BD5 !important;
  }

  .brand-name {
      font-size: 25px;
      vertical-align: middle;
  }

  .brand-name span {
      color: var(--my-green);
  }

  .brand-name b {
      color: var(--my-blue);
  }

  .primary-btn {
      background: var(--primary);
      color: var(--white);
      box-shadow: var(--shadow-2);
      display: block;
      /* margin: .25em 1em 1.5em; */
  }

  .active.primary-btn,
  .primary-btn:hover,
  .primary-btn:focus {
      background: var(--primary-dark);
      color: var(--white);
      box-shadow: var(--shadow-4);
  }

  .form-group {
      margin-bottom: 0;
  }

  .form-input .help-block {
      margin-top: 2px;
  }

  .form-input .help-block .list-unstyled li {
      font-size: 12px;
      line-height: 16px;
      color: var(--error);
  }

  .form-input label {
      font-size: 12px;
      line-height: 18px;
      color: var(--dark-3);
      margin-bottom: 8px;
      display: inline-block;
  }

  .form-input .input-items {
      position: relative;
  }

  .form-input .input-items input,
  .form-input .input-items textarea {
      width: 100%;
      height: 44px;
      border: 2px solid #155BD5;
      border-radius: 8px;
      padding: 0 24px 0 12px;
      position: relative;
      font-size: 16px;
  }

  .form-input .input-items input:focus,
  .form-input .input-items textarea:focus {
      box-shadow: var(--shadow-4);
  }

  .form-input .input-items textarea {
      padding-top: 8px;
      height: 130px;
      resize: none;
  }

  .form-input .input-items i {
      position: absolute;
      top: 11px;
      left: 13px;
      font-size: 20px;
      z-index: 9;
  }

  .form-input .input-items.default input,
  .form-input .input-items.default textarea {
      border-color: var(--gray-3);
      color: var(--dark-3);
  }

  .form-input .input-items.default input:focus,
  .form-input .input-items.default textarea:focus {
      border-color: var(--primary);
  }

  .form-input .input-items.default input::placeholder,
  .form-input .input-items.default textarea::placeholder {
      color: var(--dark-3);
      opacity: 1;
  }

  .form-input .input-items.default i {
      color: var(--dark-3);
  }

  .form-input .input-items.active input,
  .form-input .input-items.active textarea {
      border-color: var(--primary);
      color: var(--black);
  }

  .form-input .input-items.active input::placeholder,
  .form-input .input-items.active textarea::placeholder {
      color: var(--black);
      opacity: 1;
  }

  .form-input .input-items.active i {
      color: var(--primary);
  }

  .form-input .input-items.error input,
  .form-input .input-items.error textarea {
      border-color: var(--error);
      color: var(--error);
  }

  .form-input .input-items.error input::placeholder,
  .form-input .input-items.error textarea::placeholder {
      color: var(--error);
      opacity: 1;
  }

  .form-input .input-items.error i {
      color: var(--error);
  }

  .form-input .input-items.success input,
  .form-input .input-items.success textarea {
      border-color: var(--success);
      color: var(--success);
  }

  .form-input .input-items.success input::placeholder,
  .form-input .input-items.success textarea::placeholder {
      color: var(--success);
      opacity: 1;
  }

  .form-input .input-items.success i {
      color: var(--success);
  }

  .form-input .input-items.disabled input,
  .form-input .input-items.disabled textarea {
      border-color: var(--gray-3);
      color: var(--dark-3);
      background: none;
  }

  .form-input .input-items.disabled input::placeholder,
  .form-input .input-items.disabled textarea::placeholder {
      color: var(--dark-3);
      opacity: 1;
  }

  .form-input .input-items.disabled i {
      color: var(--dark-3);
  }

  #rename-modal .modal-header,
  #share-modal .modal-header {
      padding: .75em;
      margin-left: .5em;
      border: none;
  }

  #rename-modal .modal-title,
  #share-modal .modal-title {
      font-size: 1.1em;
  }

  #rename-modal .modal-body,
  #share-modal .modal-body {
      padding-bottom: 0;
      padding-top: .5em;
  }

  #rename-modal .modal-footer,
  #share-modal .modal-footer {
      padding: 0 .5em .25em;
      border: none;
  }

  .app-header {
      background-color: white;
      height: auto;
  }

  .empty-box {
      height: 70vh;
      align-items: center;
  }

  #no-search-result {
      display: none;
  }

  @media (max-width: 768px) {
      select#sort-surat {
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
          padding-left: 0.5rem;
          font-size: 0.875rem;
      }

      input#search-surat {
          min-height: calc(1.5em + 0.5rem + 2px);
          padding: 0.25rem 0.5rem;
          font-size: 0.875rem;
          border-radius: 0.2rem;
      }

      .bi-sort-alpha-down {
          display: none;
      }
  }

  @media (max-width: 992px) {
      .btn-plus {
          display: unset !important;
      }
  }

  .loading {
      align-items: center;
      display: flex;
      z-index: 100;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(255 255 255 / 75%);
      justify-content: center;
      visibility: hidden;
  }

  .loading img {
      position: absolute;
      width: 3em;
      height: 3em;
  }

  .btn-plus {
      display: none;
      position: fixed;
      width: 3.5em;
      height: 3.5em;
      background-image: linear-gradient(35deg, var(--my-green), var(--my-blue));
      color: white;
      z-index: 100;
      right: 5%;
      bottom: 3%;
      text-align: center;
      line-height: 3.5em;
      border-radius: 50%;
      font-weight: bold;
  }

  .dropdown-item {
      cursor: pointer;
  }

  .link-sharing-indicator {
      background: white;
      color: var(--my-green);
      z-index: 100;
      position: absolute;
      bottom: 5%;
      right: 4%;
      border-radius: 50%;
  }

  /* Basic Rules */
  .switch input {
      display: none;
  }

  .switch {
      display: inline-block;
      width: 60px;
      height: 30px;
      position: relative;
      vertical-align: bottom;
  }

  span.share-status {
      margin-left: 5px;
      vertical-align: text-bottom;
  }

  .slider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 30px;
      box-shadow: 0 0 0 2px #777, 0 0 4px #777;
      cursor: pointer;
      border: 4px solid transparent;
      overflow: hidden;
      transition: .4s;
  }

  .slider:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: #777;
      border-radius: 30px;
      transform: translateX(-30px);
      transition: .4s;
  }

  input:checked+.slider:before {
      transform: translateX(30px);
      background: var(--my-green);
  }

  input:checked+.slider {
      box-shadow: 0 0 0 2px var(--my-green), 0 0 2px var(--my-green);
  }

  .input-group input,
  .input-group-text {
      /* width: 100%; */
      height: 44px;
      font-size: 16px;
      border-radius: 5px;
      box-shadow: var(--shadow-4);
  }

  .link-label {
      font-size: 12px;
      line-height: 18px;
      color: var(--dark-3);
      margin-bottom: 8px;
      display: inline-block;
      display: block;
      margin-top: 1.5em;
  }

  /* ===== Buttons Css ===== */
  .primary-btn {
      background: var(--primary);
      color: var(--white);
      box-shadow: var(--shadow-2);
  }

  .active.primary-btn,
  .primary-btn:hover,
  .primary-btn:focus {
      background: var(--primary-dark);
      color: var(--white);
      box-shadow: var(--shadow-4);
  }

  .deactive.primary-btn {
      background: var(--gray-4);
      color: var(--dark-3);
      pointer-events: none;
  }

  .primary-btn-outline {
      border-color: var(--primary);
      color: var(--primary);
  }

  .active.primary-btn-outline,
  .primary-btn-outline:hover,
  .primary-btn-outline:focus {
      background: var(--primary-dark);
      color: var(--white);
  }

  .deactive.primary-btn-outline {
      color: var(--dark-3);
      border-color: var(--gray-4);
      pointer-events: none;
  }

  .primary-btn-link {
      color: var(--primary);
  }

  .active.primary-btn-link,
  .primary-btn-link:hover,
  .primary-btn-link:focus {
      color: var(--primary-dark);
  }

  .deactive.primary-btn-link {
      color: var(--dark-3);
      pointer-events: none;
  }

  .share-status-badge {
      position: absolute;
      right: 6%;
      top: 7%;
      color: white;
      background-color: var(--my-green);
      z-index: 1;
  }

  .tooltip.bs-tooltip-top .tooltip-arrow::before {
      border-top-color: var(--my-green);
  }

  .tooltip.show {
      opacity: 1;
  }

  .tooltip-inner {
      background-color: var(--my-green);
      box-shadow: 0px 0px 4px black;
      opacity: 1 !important;
  }

  .tooltip.bs-tooltip-right .arrow:before {
      border-right-color: var(--my-green) !important;
  }

  .tooltip.bs-tooltip-left .arrow:before {
      border-left-color: var(--my-green) !important;
  }

  .tooltip.bs-tooltip-bottom .arrow:before {
      border-bottom-color: var(--my-green) !important;
  }

  .tooltip.bs-tooltip-top .arrow:before {
      border-top-color: var(--my-green) !important;
  }

  .app-header {
      border-bottom: none !important;
  }

  span.editable:hover {
      background: unset !important;
  }

  span.editable {
      background: unset !important;
  }

  .btn-new-doc {
      padding-left: 1rem;
      padding-right: 1rem;
  }


  /* New Dashboard Style */


  /* Notifikasi */
  #btn-nav-notifikasi {
      position: relative;
      background-color: var(--primary-subtle);
      border: none;
      font-size: 1.35rem;
  }

  #btn-nav-notifikasi:hover {
      position: relative;
      background-color: var(--primary-lighter);
      border: none;
      font-size: 1.35rem;
  }

  #btn-nav-notifikasi .badge {
      position: absolute !important;
      font-size: 0.5rem !important;
      right: 8px;
      top: 4px;
  }

  #btn-nav-notifikasi::after {
      display: none;
  }

  #btn-nav-notifikasi::after {
      display: none;
  }

  .notification-header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #F0F0F0;
  }

  .notification-header .close i {
      font-size: 1rem !important;
      font-weight: bold !important;
  }

  .notification-dropdown-menu {
      padding: 0rem;
      width: 40vw;
      border-radius: 1rem;
      box-shadow: 0px 4px 8px 0px rgba(142, 141, 208, 0.16);
      max-height: 80vh;
      min-height: 100px;
      overflow-y: auto;
      overflow-x: hidden;
  }

  .notification-dropdown-item {
      position: relative;
      white-space: unset !important;

  }

  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
      background-color: var(--primary-lighter) !important;
  }

  .notification-icon {
      position: absolute;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
  }

  .notification-icon.warning {
      background-color: var(--warning-light);
      color: var(--warning);
  }

  .notification-icon.danger {
      background-color: var(--danger-light);
      color: var(--danger);
  }

  .notification-icon.primary {
      background-color: var(--primary-subtle);
      color: var(--primary);
  }

  .notification-icon.success {
      background-color: var(--success-light);
      color: var(--success);
  }

  .notification-content {
      position: relative;
      margin-left: 44px;
      padding-right: 24px;
  }

  .notification-title {
      font-weight: bold;
      font-size: 1rem;
      color: #3A3A3A;
      margin-bottom: 6px;
  }

  .notification-desc {
      color: #6C6C6C;
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 6px;
  }

  .notification-date {
      font-size: 0.75rem;
      color: #6C6C6C;
  }

  .notification-status {
      position: absolute;
      right: 20px;
      top: 4px;
  }


  .notification-footer {
      bottom: 0;
      display: flex;
      justify-content: center;
      padding: 0.5rem 1rem;
      min-height: 2rem;
      text-align: center;
  }

  @media (max-width: 768px) {
      #btn-nav-notifikasi {
          position: relative;
          background-color: var(--primary-subtle);
          border: none;
          font-size: 1.35rem;
          vertical-align: middle;
      }

      #btn-nav-notifikasi:hover {
          position: relative;
          background-color: var(--primary-lighter);
          border: none;
          font-size: 1.35rem;
      }

      #btn-nav-notifikasi .badge {
          position: absolute !important;
          font-size: 0.5rem !important;
          right: 8px;
          top: 4px;
      }

      #btn-nav-notifikasi::after {
          display: none;
      }

      #btn-nav-notifikasi::after {
          display: none;
      }

      .notification-header {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #F0F0F0;
      }

      .notification-header .close i {
          font-size: 1rem !important;
          font-weight: bold !important;
      }

      .notification-dropdown-menu {
          padding: 0rem;
          width: 92vw;
          margin: 0 auto;
          border-radius: 1rem;
          box-shadow: 0px 4px 8px 0px rgba(142, 141, 208, 0.16);
          max-height: 75vh;
          min-height: 100px;
          overflow-y: auto;
          overflow-x: hidden;
      }

      .notification-dropdown-item {
          position: relative;
          white-space: unset !important;

      }

      .dropdown-menu .dropdown-item:hover,
      .dropdown-menu .dropdown-item:focus {
          background-color: var(--primary-lighter) !important;
      }

      .notification-icon {
          position: absolute;
          width: 34px;
          height: 34px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
      }

      .notification-content {
          position: relative;
          margin-left: 44px;
          padding-right: 24px;
      }

      .notification-title {
          font-weight: bold;
          font-size: 1rem;
          color: #3A3A3A;
          margin-bottom: 6px;
      }

      .notification-desc {
          color: #6C6C6C;
          font-size: 0.875rem;
          line-height: 1.25;
          margin-bottom: 6px;
      }

      .notification-date {
          font-size: 0.75rem;
          color: #6C6C6C;
      }

      .notification-status {
          position: absolute;
          right: 20px;
          top: 4px;
      }

    #navbar-user-name {
        vertical-align: middle;
        display: inline-block;
        white-space: nowrap;
        max-width: 135px;
        margin-right: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  }

  .notification-item-wrapper .show-scene,
  .notification-item-wrapper .empty-scene,
  .notification-item-wrapper .loading-scene {
      display: none;
  }

  .notification-item-wrapper[data-scene="show"] .show-scene {
      display: block;
  }

  .notification-item-wrapper[data-scene="empty"] .empty-scene {
      display: block;
  }

  .notification-item-wrapper[data-scene="loading"] .loading-scene {
      display: block;
  }

  .notification-title,
  .notification-desc {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }