:root {
  font-family: 'Montserrat' !important;
  --bs-emphasis-color: #004054;
  --bs-emphasis-color-rgb: rgb(0, 64, 84);
}

body {
  font-family: 'Montserrat' !important;
}

a {
  text-decoration: none;
}

.preloader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s ease;
}

.fade-out-animation {
  opacity: 0;
  visibility: hidden;
}

.fit-cover {
  object-fit: cover;
}

.carousel-indicators [data-bs-target] {
  width: 25px;
  height: 5px;
  margin-right: 10px;
  margin-left: 10px;
}

.fp-j1 {
  position: absolute;
  z-index: 100;
  bottom: 20%;
  right: 10%;
}

.fp-img-j1 {
  width: 175px;
}

@media (min-width: 768px) {
  .fp-img-j1 {
    width: 300px;
  }
}

.projects-div-img-j1 {
  position: relative;
  aspect-ratio: 5/3;
  overflow: hidden;
}

.div-img-j1 > a > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
  filter: grayscale(100%);
  opacity: 0;
}

.div-img-j1.loaded > a > img {
  opacity: 1 !important;
}

.div-img-j1 > img {
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.div-img-j1.loaded > img {
  opacity: 1 !important;
}

.div-img-j1:hover > a > img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.button-group > .btn {
  margin: 5px;
  font-size: 0.75rem;
  border-radius: 5%;
}

.div-atas-j1 {
  margin-top: 100px;
}

.para-project-j1 {
  margin: 10px 0px 0px 0px;
  font-weight: 500;
  color: rgba(0,64,84, 1);
}

.para-project-j2 {
  margin: 0px 0px 5px 0px;
  font-size: 0.85rem;
  color: rgba(0,64,84, 0.7);
}

td {
  font-size: 0.85rem;
  padding-right: 10px;
  vertical-align: baseline;
  padding-bottom: 5px;
}

.project-row-j1 > .col > img {
  width: 100%;
  aspect-ratio: 5/3;
  overflow: hidden;
  object-fit: cover;
  margin-top: 5px;
  margin-bottom: 5px;
}

.back-btn-j1 {
  font-size: 0.75rem;
  border-radius: 5%;
}

.btn-primary {
  --bs-btn-hover-border-color: #5BC2E7;
  --bs-btn-hover-bg: #5BC2E7;
}

.footer-j1 {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255,255,255,0.85);
}

.navbar-j1 {
  background-color: rgba(255,255,255,0.85) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.overwrite-ar-j1 {
  aspect-ratio: 3/1!important;
}

.fit-img-j1 {
  object-fit: contain!important;
}

.overwrite-ar-j2 {
  aspect-ratio: 1/1.2!important;
  object-fit: contain!important;
}

.formtable-j1 {
  width: 500px;
}

.field-label-j1 {
  width: 125px; /* or any specific width you want */
  vertical-align: top;
}

.field-value-j1 {
  width: calc(80%-175px); /* subtract the width of the label from the width of the cell */
}

.field-value-j1 input, .field-value-j1 textarea, .field-value-j1 select {
  width: 100%;
  box-sizing: border-box;
}

/* styles.css */

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 1px;
}

.sidebar a {
  text-decoration: none;
  padding-left: 20px!important;
  color: #337ab7;
}

.sidebar a:hover {
  color: #23527c;
}

.sidebar a.active {
  color: #23527c;
  font-weight: bold;
}

.main-content {
  padding: 20px;
}

.bd-links .btn[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-j1::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
  background-size: 16px 16px;
  margin-right: 8px;
}

.bd-links a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
}

.btn {
  font-size: 0.75rem;
}

.btn-j1 {
  font-size: 1rem!important;
}

.login-j1 {
  width: 100%;
  padding-bottom: 15px;
}

.sidebar-scroll {
  overflow-y: auto;
  position: sticky;
  top: 0;
}

.offcanvas-body .nav-link {
  font-size: 0.85rem;
}

.offcanvas-body ul {
  list-style: none!important;
  padding-left: 0.25rem;
}

.offcanvas-body .nav-link {
  padding-top: 2px;
  padding-bottom: 2px;
}

.nav-pills>li {
  padding-top: 15px;
}

.small-help-text {
  font-size: 0.75rem!important;
}