@import url(/asset/dist/scsss/icons/font-awesome/css/fontawesome-all.css);
@import url('https://fonts.googleapis.com/css2?family=Metrophobic&display=swap');

.main-wrapper {
  width: 100%;
}

.topbar {
  position: relative;
  z-index: 50;
  background-color: #fff;
}

.topbar .top-navbar {
  min-height: 70px;
  margin: 0 auto;
  /* max-width: 1280px; */
  padding: 0px;
}

.topbar .top-navbar .navbar-header {
  line-height: 65px;
}

.topbar .top-navbar .navbar-header .navbar-brand {
  margin-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.fix-sidebar .left-sidebar {
  position: fixed;
}

.left-sidebar {
  position: fixed;
  /* width: 100%; */
  top: 0px;
  z-index: 20;
  margin-top: 6rem;
  background-color: #fff;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}

.scroll-sidebar {
  /* margin: 0 auto;
  max-width: 1280px; */
}

.sidebar-nav ul {
  margin: 0px;
  padding: 0px;
}


.navbar-static {
  flex: auto !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

.btn-menu {
  background-image: url('/asset/dist/img//header-content/header2.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 0.5rem !important;
  text-align: center;
  border-radius: 0.5rem;
  font-weight: bold;
  min-width: max-content !important;
  width: 100%;
}

.btn-admin {
  background-image: url('/asset/dist/img//header-content/header2.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 0.5rem !important;
  text-align: center;
  border-radius: 0.5rem;
  font-weight: bold;
  min-width: max-content !important;
  width: 100%;
}

.page-wrapper {
  /* background: #f2f7f8; */
  padding-bottom: 60px;
  padding-top: 10rem;
}

.carousel-img {
  object-fit: fill;
  min-height: 15rem;
  max-height: 15rem;
}

.login-register {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
  padding: 10% 0;
  position: fixed;
}

.login-box {
  width: 400px;
  margin: 0 auto;
}

.footer {
  background-color: black;
  font-size: xx-small;
  text-align: center;
}

.header-content {
  background-image: url('/asset/dist/img//header-content/header2.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.logo-text {
  text-decoration: none;
  color: black;
  text-shadow: rgb(255, 255, 255) 2px 2px;
  font-size: xxx-large !important;
  font-weight: bold;
}

@media only screen and (min-width: 1370px) {

  .container-fluid,
  .topbar .top-navbar,
  .scroll-sidebar {
    max-width: 1170px;
  }
}

@media only screen and (min-width: 768px) {
  .navbar-header {
    width: 240px;
    flex-shrink: 0;
  }

  .dark-logo {
    min-height: 7vw;
    max-height: 7vw;
    vertical-align: middle;
  }

  .topbar .top-navbar {
    padding-right: 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-align-items: center;
  }

  .btn-text {
    font-weight: bold;
    font-family: 'Metrophobic';
    text-decoration: none;
  }
}

@media only screen and (max-device-width: 480px) {
  .dark-logo {
    min-height: 10vw;
    max-height: 10vw;
  }

  .topbar .top-navbar {
    padding-right: 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-align-items: center;
  }

  .navbar-collapse {
    /* flex-basis: 0 !important;
    flex-grow: 0 !important; */
  }

  .left-sidebar {
    margin-top: 4rem;
  }

  .btn-menu {
    padding: 0rem 0rem !important;
    font-size: xx-small !important;
    margin-right: 0.1rem !important;
  }

  .btn-admin {
    padding: 0rem 0rem !important;
    font-size: xx-small !important;
    margin-right: 0.1rem !important;
  }

  .txt-menu {
    font-size: 2vw !important;
  }

  .btn-text {
    font-size: small !important;
    font-weight: bold;
    font-family: 'Metrophobic';
    text-decoration: none;
  }

  .page-wrapper {
    padding-top: 7rem;
  }

  .carousel-img {
    object-fit: fill;
    min-height: 10rem;
    max-height: 10rem;
  }

  .nav-link {
    /* padding: 0.5rem 0.5rem !important; */
  }

  .nav-item {
    width: 100% !important;
  }

  .pills-text {
    font-size: xx-small !important;
    font-weight: bold;
  }

  h4 {
    font-size: xx-small !important;
  }

  h2 {
    font-size: x-small !important;
  }

  h1 {
    font-size: small !important;
  }

  p {
    font-size: 10px !important;
  }
}