:root {
  --red: #eb586f;
  --orange: #ffb53f;
  --yellow: #f2ca02;
  --yellowlight: #f2e8ba;
  --green: #18978f;
  --greenlight: #e5fffc;
  --lightgrey: #edf9ff;
  --grey: #d8e9f0;
  --darkgrey: #d0e1e8;
  --blue: #4aa0d5;
  --bluelight: #9dd1f2;
  --bluegrey: #548ca8;
  --bluedarkgrey: #476072;
  --brown: #454553;
  --navy: #334257;
}

.text-grey {
  color: var(--bluedarkgrey);
}

.bg-lightgrey {
  background-color: var(--lightgrey);
}

.bg-lightyellow {
  background-color: var(--yellowlight);
}

.bg-red {
  background-color: var(--red);
  color: #fff;
}

.bg-green {
  background-color: var(--green);
  color: #fff;
}

.bg-greenlight {
  background-color: var(--greenlight);
  color: #333;
}

.bg-blue {
  background-color: var(--blue);
  color: #fff;
}

.bg-yellow {
  background-color: var(--yellow);
  color: #fff;
}

.bg-orange {
  background-color: var(--orange);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-thumb {
  color: var(--bluegrey);
  width: 6px;
  box-shadow: inset 0 0 0 10px;
  border-radius: 4px;
}

.spinner::after {
  content: "";
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  border-radius: 50%;
}

.spinner.smooth::after {
  border-top: 4px solid rgba(255, 255, 255, 1);
  border-left: 4px solid rgba(255, 255, 255, 1);
  border-right: 4px solid rgba(255, 255, 255, 0);
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.app body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.53846154;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--bluedarkgrey);
}

tbody tr.read td {
  background-color: var(--lightgrey);
}

tbody tr.allow td {
  cursor: pointer;
}

.btn {
  margin: 0px 2px;
}

.btn {
  margin: 0px 2px;
}

.btn i {
  /*   font-size: 10px;*/
  margin-right: 2px;
}

.btn i:only-child {
  margin-right: 0px;
}

.btn-circle {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease 0s;
}

.btn-circle:hover {
  cursor: pointer;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-circle.btn-xs {
  width: 20px;
  height: 20px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-xl {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.btn-xs {
  font-size: 0.825rem;
  padding: 2px 8px;
}

.btn-rounded {
  border: solid 1px transparent;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.btn:active,
.btn:focus {
  box-shadow: none;
}

.btn-green {
  background-color: var(--green);
  color: #fff;
}

.btn-green:hover,
.btn-green:active,
.btn-green:focus {
  background-color: #fff;
  border: solid 1px var(--green);
  color: var(--green);
}

.btn-orange {
  background-color: var(--orange);
  color: #fff;
}

.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus {
  background-color: #fff;
  border: solid 1px var(--orange);
  color: var(--orange);
}

.btn-blue {
  background-color: var(--blue);
  color: #fff;
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus {
  background-color: #fff;
  border: solid 1px var(--blue);
  color: var(--blue);
}

.btn-bluelight {
  background-color: var(--bluelight);
  color: #fff;
}

.btn-bluelight:hover,
.btn-bluelight:active,
.btn-bluelight:focus {
  background-color: #fff;
  border: solid 1px var(--bluelight);
  color: var(--bluelight);
}

.btn-blue-outline {
  border: 1px solid var(--blue);
  color: var(--blue);
}

.btn-blue-outline:hover,
.btn-blue-outline:active,
.btn-blue-outline:focus {
  background-color: var(--blue);
  color: #fff;
}

.btn-bluedarkgrey {
  background-color: var(--bluedarkgrey);
  color: #fff;
}

.btn-bluedarkgrey:hover,
.btn-bluedarkgrey:active,
.btn-bluedarkgrey:focus {
  background-color: #fff;
  border: solid 1px var(--bluedarkgrey);
  color: var(--bluedarkgrey);
}

.btn-navy-outline {
  background-color: #fff;
  color: var(--navy);
  border: solid 1px var(--navy);
}

.btn-navy-outline:hover,
.btn-navy-outline:active,
.btn-navy-outline:focus {
  background-color: var(--navy);
  border: solid 1px var(--bluedarkgrey);
  color: #fff;
}

.btn-bluegrey {
  background-color: var(--bluegrey);
  color: #fff;
}

.btn-bluegrey:hover,
.btn-bluegrey:active,
.btn-bluegrey:focus {
  background-color: #fff;
  border: solid 1px var(--bluegrey);
  color: var(--bluegrey);
}

.btn-red {
  background-color: var(--red);
  color: #fff;
}

.btn-red:hover,
.btn-red:active,
.btn-red:focus {
  background-color: #fff;
  border: solid 1px var(--red);
  color: var(--red);
}

.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--bluedarkgrey);
}

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

.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--bluedarkgrey);
}

.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bluedarkgrey);
}

.tooltip-inner {
  background-color: var(--bluedarkgrey);
  font-size: 12px;
}

.mainwrapper {
  background-color: #edf3f7;
  display: table;
  border-spacing: 0;
  position: relative;
  height: 100vh;
  width: 100%;
}

.header {
  height: 52px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%);
}

body.darkmode .header {
  background-color: var(--navy);
}

.navbar-left {
  display: flex;
  align-items: center;
  /*width: 220px;*/
}

body.darkmode .navbar-left button,
body.darkmode .navbar-left .navbar-company,
body.darkmode .navbar-right .welcome,
body.darkmode .navbar-right .nav-link {
  color: var(--grey);
}

.navbar-left button {
  margin: 0px 8px;
  color: var(--bluedarkgrey);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navbar-left button:hover {
  color: var(--blue);
  transform: scale(1.2);
}

.navbar-left .navbar-company {
  /* padding: 8px 0px; */
  font-weight: 600;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-family: "Encode Sans", sans-serif;
  color: var(--navy);
}

.navbar-left .navbar-company img {
  height: 40px;
  margin-right: 8px;
}

.navbar-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar-right .welcome {
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  margin-right: 16px;
}

.navbar-right .navbar-nav {
  align-items: center;
}

.navbar-right .nav-link {
  color: var(--navy);
  font-weight: 600;
  font-size: 16px;
  font-family: Lato;
  margin: 0px 8px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navbar-right .nav-link:hover {
  color: var(--blue);
  transform: scale(1.2);
}

.wrapper {
  display: flex;
  height: 100%;
  margin-top: 52px;
}

.sidenav {
  width: 220px;
  background-color: #fff;
  color: var(--navy);
  position: relative;
  /*box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);*/
}

.sidenav.compact {
  width: 64px;
}

.sidenav .scrollable {
  /*position: absolute;*/
  /*top: 80px;*/
  /*bottom: 50px;*/
  /*bottom: 0px;*/
  margin-bottom: 50px;
  width: 400px;
  overflow: hidden;
  position: relative;
}

/*.sidenav.compact .scrollable {
   overflow-x: hidden;
   overflow-y: hidden;
}*/

.sidenav .sidenav-header {
  height: 80px;
  padding: 16px;
  width: 100%;
  color: var(--grey);
}

.sidenav .sidenav-header i {
  font-size: 36px;
  margin-right: 8px;
}

.sidenav.compact .sidenav-header i {
  font-size: 36px;
  margin: 0px;
}

.sidenav .sidenav-header span {
  font-size: 18px;
  font-weight: 600;
}

.sidenav .sidenav-footer {
  height: 50px;
  padding: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidenav .sidenav-footer a {
  padding: 6px;
  width: 32px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  background-color: var(--bluegrey);
  color: var(--grey);
}

.sidenav .sidenav-header {
  /*   background-color: var(--bluedarkgrey);*/
  background-image: linear-gradient(to bottom, #13b6f7, #1288b7 36%, #0a4156);
}

.sidenav .sidenav-footer {
  bottom: 50px;
  position: absolute;
  z-index: 1001;
  background-color: var(--grey);
}

.nav {
  width: 100%;
}

.scrollable .nav li {
  width: 100%;
}

.scrollable .nav li a {
  width: 220px;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  position: relative;
  height: 48px;
  padding: 16px 16px 16px 56px;
  font-weight: 600;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  border-bottom: solid 1px rgba(200, 200, 200, 0.2);
}

.sidenav.compact .scrollable .nav li {
  position: relative;
}

.sidenav.compact .scrollable .nav li a {
  height: 64px;
}

.sidenav.compact .scrollable .nav li a div.before {
  width: 64px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.sidenav.compact .scrollable .nav li a div i {
  font-size: 16px;
  color: var(--lightgrey);
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.3s ease-in;
}

.sidenav.compact .scrollable .nav li a span {
  position: absolute;
  top: -32px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 11px;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  color: var(--grey);
  z-index: -1;
  padding: 0px 4px;
  text-align: center;
  font-weight: bold;
}

.sidenav.compact .scrollable .nav li a div {
  width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollable .nav li a div {
  position: absolute;
  font-size: 14px;
  padding: 16px;
  top: 0;
  left: 0;
  bottom: 0;
  border-right: solid 1px rgba(200, 200, 200, 0.5);
  display: flex;
  width: 48px;
}

.scrollable .nav li a span {
  flex: 1;
}

.scrollable .nav li a div .before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 3px;
  padding: 0px;
  /*z-index: -1;*/
}

.scrollable .nav li a div i,
.scrollable .nav li a div img {
  position: relative;
  z-index: 5;
}

.scrollable .nav li.active a div .before,
.scrollable .nav li:hover a div .before {
  width: 100%;
}

.scrollable .nav li:hover .icondef,
.scrollable .nav li.active .icondef {
  display: none;
}
.scrollable .nav li .iconalt {
  display: none;
}

.scrollable .nav li:hover .iconalt,
.scrollable .nav li.active .iconalt {
  display: table;
}

.scrollable .nav li.active a,
.scrollable .nav li:hover a {
  background-color: var(--lightgrey);
  color: var(--brown);
}

.scrollable .nav li.active a div i,
.scrollable .nav li:hover a div i {
  color: var(--lightgrey);
}

.sidenav.compact .scrollable .nav li .icondef {
  display: none;
}

.sidenav.compact .scrollable .nav li .iconalt {
  display: block;
}

.sidenav.compact .scrollable .nav li:hover a div i,
.sidenav.compact .scrollable .nav li.active a div i {
  /*top : -64px;*/
  z-index: -10;
}

.sidenav.compact .scrollable .nav li:hover .iconalt,
.sidenav.compact .scrollable .nav li.active .iconalt {
  z-index: -10;
}

.sidenav.compact .scrollable .nav li a .fas.fa-chevron-down {
  display: none;
}

.sidenav.compact .scrollable .nav li:hover a div .before {
  transform: rotateY(180deg);
}

.sidenav.compact .scrollable .nav li.active:hover a div .before {
  transform: none;
}

.sidenav.compact .scrollable .nav li:hover a span,
.sidenav.compact .scrollable .nav li.active a span {
  top: 0px;
  z-index: 1;
}

.scrollable .nav li.sub a {
  padding: 6px 8px 6px 56px;
  font-size: 12px;
  height: auto;
  background-color: #fafafa;
  border-bottom: solid 1px rgba(200, 200, 200, 0.4);
  font-weight: 500;
}

.scrollable .nav li.sub a div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.scrollable .nav li.sub a i {
  font-size: 10px;
}

.scrollable .nav li.sub.active a div i,
.scrollable .nav li.sub:hover a div i {
  color: var(--brown);
}

.scrollable .nav li.active a,
.scrollable .nav li:hover a {
  background-color: var(--lightgrey);
  color: var(--brown);
}

.scrollable li .fa-chevron-down {
  /*float: right;*/
  font-size: 12px;
  transition: transform 0.4s;
}

.scrollable li.active .fa-chevron-down {
  transform: rotateX(180deg);
}

.content {
  padding: 8px 16px 0px;
  flex: 1;
  position: relative;
  background-color: #edf3f7;
}

.dropdown-menu {
  padding: 0px;
  min-width: 120px;
}

.dropdown-item {
  font-size: 14px;
  padding: 4px 8px;
}

.dropdown-item a {
  text-decoration: none;
  color: var(--brown);
}

.dropdown-toggle::after {
  border: none;
}

.dropdown-menu li a.dropdown-item {
  font-size: 13px;
  padding: 10px 15px;
}

.dropdown-menu.submenu {
  transition: all 0.3s ease 0s;
}

.sidenav.compact .scrollable .nav li:hover .dropdown-menu {
  display: block;
  position: absolute;
  top: 0px;
  left: 64px;
}

.sidenav.compact .scrollable .nav li .submenu .dropdown-item {
  min-height: 32px;
  display: flex;
  width: 200px;
  padding: 8px 4px 8px 48px;
  font-size: 12px;
  font-weight: 500;
  word-wrap: break-word;
  height: auto;
  color: var(--lightgrey);
  background-color: var(--bluegrey);
}

.sidenav.compact .scrollable .nav li .submenu .dropdown-item:hover,
.sidenav.compact .scrollable .nav li .submenu .dropdown-item.active {
  background-color: var(--blue);
}

.sidenav.compact .scrollable .nav li .submenu .dropdown-item i {
  z-index: inherit;
  color: var(--lightgrey);
  font-size: 10px;
}

.sidenav.compact .scrollable .nav li .submenu .dropdown-item div {
  width: 32px;
}

.maincontent {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
  border-top: 4px solid var(--bluegrey);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100dvh - 88px);
}

.maincontentleft {
  padding: 0px;
}

.maincontentright {
  padding: 64px 16px 16px;
  max-width: 1080px;
}

.search {
  max-width: 800px;
  margin: 0px auto 4px;
  min-width: auto;
  /*  margin-top: 40px;*/
  padding: 0px 8px;
}

.search input :not(.form-check-input) {
  font-size: 14px;
  padding: 4px 8px;
}

a.searchAdv {
  text-decoration: none;
  /*Disabled by Delvo*/
  /*font-family: Lato, Roboto, Lato, open-sans;*/
  font-size: 12px;
  color: #393880;
  font-weight: bold;
}

#collapseSearch .card {
  background-color: #def1f7;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  /*Disabled by Delvo*/
  /*font-family: 'Lato';*/
  border: none;
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

.filtertable {
  padding: 8px;
  background-color: var(--bluedarkgrey);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.filtertable .nav-link {
  font-size: 14px;
  display: flex;
  justify-content: center;
  color: #fff;
  padding: 4px 16px;
  margin: 0px 2px;
  border-radius: 8px;
}

.filtertable .nav-link.button {
  border-radius: 32px;
  border: solid 1px #fff;
}

.filtertable .nav-link:hover {
  background-color: var(--grey);
  color: var(--brown);
}

.filtertable .nav-item .nav-link.active {
  background-color: var(--darkgrey);
  color: var(--navy);
  box-shadow: 0px 2px 25px 0px rgb(255 255 255 / 30%);
}

.filtertable .nav-item .nav-link.active:hover {
  background-color: var(--grey);
  color: var(--brown);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0px;
}

td h6 {
  font-size: 14px;
  margin-bottom: 0px;
}

.outline {
  background-color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.d-flex .outline {
  margin: 1px 1px;
}

.outline.dark {
  border: solid 1px #333;
  color: #333;
}

.outline.info {
  border: solid 1px var(--blue);
  color: var(--blue);
}

.outline.danger {
  border: solid 1px var(--red);
  color: var(--red);
}

.outline.warning {
  border: solid 1px var(--orange);
  color: var(--orange);
}

.outline.success {
  border: solid 1px var(--green);
  color: var(--green);
}

.labelpag {
  font-size: 12px;
  color: #555;
}

.page-link {
  border-radius: 50% !important;
  margin: 0px 4px;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  color: var(--bluedarkgrey);
  border: solid 1px var(--bluedarkgrey);
  z-index: 0;
}

.page-item.active .page-link {
  border: solid 1px var(--bluedarkgrey);
  background-color: var(--bluedarkgrey);
  color: #fff;
  box-shadow: 0px 5px 35px 0px rgb(0 0 0 / 30%);
  z-index: 0;
}

.page-link:hover {
  background-color: var(--grey);
  color: var(--brown);
  /*border: solid 1px var(--navy);*/
}

#sevimalov_div {
  padding: 16px;
  background-color: white;
  box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  border-radius: 8px;
  max-width: 800px;
  min-width: 400px;
}

#sevimalov_div table tbody tr td {
  padding: 2px 8px;
  font-size: 12px;
}

#sevimalov_div .btn {
  font-size: 12px;
  padding: 4px 8px;
  line-height: 1;
}

.pop_window {
  background-color: #f4fbfd;
  border: 10px solid #fff;
  border-radius: 8px;
  margin: 0;
  padding: 8px;
  min-width: 600px;
  /* border-right:2px solid #777; */
  /* border-bottom:2px solid #777; */
  display: none;
  position: absolute;
  /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); */
  /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); */
  -webkit-box-shadow: 2px 2px 6px #ccc;
  box-shadow: 2px 2px 6px #ccc;
}

.pop_window h3 {
  padding: 3px;
}

.pop_windowtr {
  background-color: #959595;
}

.slimScrollBar {
  left: 213px;
  background: var(--navy) !important;
  opacity: 0.5 !important;
}

.slimScrollRail {
  left: 213px;
  background: var(--blue) !important;
}

.sidenav.compact .slimScrollBar {
  left: 57px;
}

.sidenav.compact .slimScrollRail {
  left: 57px;
}

form .slimScrollBar {
  right: 1px !important;
  left: auto;
}

form .slimScrollRail {
  right: 1px !important;
  left: auto;
}

.forminput .row,
.forminputdisposisi .row,
.modal-body.form .row {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  padding-right: 16px;
  padding-bottom: 5px;
}

h5.akses {
  width: 640px;
  margin: 80px auto 32px;
  padding-top: 32px;
  text-align: center;
}

.card.akses {
  width: 640px;
  margin: 0px auto;
  /*box-shadow: 0 0 16px 0 rgb(41 58 126 / 16%);*/
  border: none;
  border-radius: 8px;
  background-color: var(--darkgrey);
}

.list-group-item.akses {
  display: flex;
  padding: 16px;
  /*box-shadow: 0 0 12px 0 rgb(41 58 126 / 16%);*/
  border-radius: 4px;
  margin-bottom: 16px;
  background-color: #ffffff;
}

.list-group-item.akses:hover {
  background-color: #6da7ff;
}

.iconakses {
  display: flex;
  padding: 8px;
  align-items: center;
  margin-right: 16px;
  justify-content: center;
  background-color: #dfe1e6;
  font-size: 48px;
  color: rgb(115, 121, 138);
}

.rolename {
  color: #3a3f50;
  font-size: 18px;
  text-align: left;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}

.rolenamesub {
  color: #73798a;
  font-size: 16px;
  text-align: left;
  font-family: Roboto;
  line-height: 1.31;
}

.toolbar-content {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 16px;
  border-bottom: 2px #2574a9 solid;
  height: 48px;
  width: 100%;
}

.toolbar-content .badge {
  margin-right: 2px;
  font-size: 12px;
}

.listdatacompact,
.formcontentmaster,
.formcontentdisposisi {
  padding-top: 48px;
}

.formcontentmaster {
  height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
}

.lampiranthumbnail {
  width: 112px;
  display: flex;
  flex-direction: column;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px;
}

.pdf-btn-group button:first-child {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.pdf-btn-group button:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.ui-menu-item {
  border-bottom: solid 1px rgba(50, 50, 50, 0.4);
}

.ui-menu-item-wrapper {
  display: flex;
  flex-direction: column;
  padding: 4px 8px !important;
}

.ui-state-active {
  color: var(--brown) !important;
  background-color: var(--grey) !important;
  border: solid 1px rgba(50, 50, 50, 0.4) !important;
}

#sevimalov_div2 {
  width: 600px;
  margin-top: 8px;
}

.breadcrumb {
  margin: -8px -16px 8px;
  padding: 8px;
  background-color: var(--darkgrey);
}

.breadcrumb li {
  display: inline-block;
  font-size: 12px;
}

.breadcrumb li + li:before {
  padding: 0 5px;
  color: var(--bluedarkgrey);
  content: "/\00a0";
}

.breadcrumb li a {
  color: var(--bluedarkgrey);
}

.breadcrumb li.active {
  color: var(--navy);
  font-weight: bold;
}

.panel-laporan {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.panel-laporan .profile-picture {
  margin-right: 8px;
}

.panel-laporan .detail {
  flex: 1;
}

.panel-laporan .panel-body {
  border-radius: 8px;
  padding: 4px 16px;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}

.panel-laporan .panel-body .user {
  font-weight: 600;
  color: #333;
}

.panel-laporan .panel-body .isi {
  margin: 8px 0px 0px;
  font-size: 14px;
}

.panel-laporan .panel-body .isi a {
  text-decoration: none;
  color: inherit;
}

.panel-laporan .panel-meta {
  font-size: 12px;
  display: flex;
  margin-left: 8px;
}

.panel-laporan .panel-meta a {
  color: #2574a9;
  text-decoration: none;
  font-weight: 600;
}

.imagelay:hover {
  cursor: pointer;
}

.formdraftsurat {
  /*padding-top: 10px;
   padding-right: 25px;
   padding-bottom: 30px;
   height: calc(100vh - 140px);
   overflow-y: auto;
   overflow-x: hidden;*/
}

.forminputdraft .row {
  padding-right: 16px;
  padding-bottom: 5px;
}

.forminputdraft .row:not(:last-child) {
  border-bottom: solid 1px rgba(200, 200, 200, 0.5);
}

.penerima-disposisi:first-child {
  /* margin-top: 0px !important; */
}

tr.activerow td {
  background-color: var(--bluelight) !important;
}

.table-hover > tbody > tr.read:hover > * {
  background-color: var(--grey) !important;
}

.suratinfo {
  background-color: #e2f8ff;
  padding: 8px;
  border-radius: 8px;
}

@media only screen and (max-width: 960px) {
  .dashboard div:nth-child(1) ul {
    margin-top: 48px;
  }
}

@media only screen and (max-width: 576px) {
  .maincontent {
    padding: 16px 0px 20px 0px;
  }

  h5.akses {
    width: auto;
  }

  .card.akses {
    width: auto;
  }

  .navbar-left button i {
    font-size: 16px;
  }

  .sidenav {
    width: auto;
    overflow-x: hidden;
    padding: 0;
  }

  .scrollable .nav li a {
    width: auto;
  }

  .slimScrollBar {
    left: auto;
    right: 2px !important;
  }

  .slimScrollRail {
    left: auto;
    right: 2px !important;
  }

  .content {
    padding: 0;
  }

  .breadcrumb {
    margin: 0;
  }

  .dashboard div:nth-child(1) {
    flex-direction: column;
  }

  .summary {
    padding: 0px 12px 8px !important;
  }

  .dashboard div:nth-child(1) ul {
    margin-top: 48px;
  }

  .listdatacompact {
    padding-top: 8px;
    background-color: #f7fcff;
  }

  /*.listdatacompact {
    margin: 0px -16px -16px;
  }*/

  .forminput {
    padding: 8px;
  }

  .forminputdisposisi {
    padding: 8px;
    padding-top: 40px;
  }

  #sevimalov_div2,
  .pop_window {
    width: auto;
    max-width: 600px;
    min-width: auto;
  }

  #div_sifat {
    flex-direction: column;
  }

  #loginasdiv {
    top: 40px !important;
  }

  .toolbar-content {
    height: auto;
    min-height: 48px;
    max-height: 64px;
  }

  .container {
    overflow-y: auto;
    height: calc(100vh - 160px);
  }
}

.pagination > a,
.pagination > strong {
  padding: 4px 8px;
  margin: 0px 2px;
  background-color: var(--bluelight);
  color: var(--navy);
  border-radius: 4px;
}

.pagination > strong {
  background-color: var(--blue);
}

#filtertable_block {
  display: none;
  position: absolute;
  background-color: var(--bluedarkgrey);
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 8px;
}

#filtertable_block td {
  color: #fff;
}

#filtertable_block td:hover {
  cursor: pointer;
  color: var(--bluelight);
  font-weight: 600;
}

#filtertext_block {
  display: none;
  background-color: var(--bluedarkgrey);
  color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 8px;
}

[readonly="readonly"] {
  background-color: #e9ecef;
  opacity: 1;
}

.shadowbottom {
  box-shadow: 0 0.3rem 0.5rem -0.2rem rgba(0, 0, 0, 0.15) !important;
}

.iconalt,
.icondef {
  width: 15px !important;
  max-width: 15px !important;
}