@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url(./utility.css);

:root {
  --primary: rgb(83, 144, 217);
  --primary-rgb: 83, 144, 217;
  --accent: rgb(247, 37, 133);
  --accent-rgb: 247, 37, 133;
  --text-white: #fbfbfb;
  --text-white-rgb: 243, 243, 243;
  --dark: #2c2c2c;
  --dark-rgb: 44, 44, 44
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.login-form {
  width: 100%;
}

#page-topbar {
  background-color: var(--primary);
  box-shadow: none;
  border-bottom: 1px solid #e5e5e5;
  box-shadow:
  0px 0.3px 2.7px rgba(0, 0, 0, 0.009),
  0px 0.8px 6.9px rgba(0, 0, 0, 0.013),
  0px 1.6px 14.2px rgba(0, 0, 0, 0.017),
  0px 3.3px 29.2px rgba(0, 0, 0, 0.021),
  0px 9px 80px rgba(0, 0, 0, 0.03);
}
 
#page-topbar > .navbar-header .header-item {
  color: white;
}
#page-topbar > .navbar-header .header-item > i {
  color: white;
}
#page-topbar > .navbar-header .dropdown.show > .header-item {
  color: var(--primary);
  background-color: white !important;
  font-weight: 600;
}
#page-topbar > .navbar-header .dropdown.show > .header-item > i{
  color: var(--primary);
}
#page-topbar > .navbar-header .dropdown.show > .dropdown-menu {
  margin-top: 10px;
  border-radius: 8px;
  box-shadow:
  0px 0.3px 2.7px rgba(0, 0, 0, 0.009),
  0px 0.8px 6.9px rgba(0, 0, 0, 0.013),
  0px 1.6px 14.2px rgba(0, 0, 0, 0.017),
  0px 3.3px 29.2px rgba(0, 0, 0, 0.021),
  0px 9px 80px rgba(0, 0, 0, 0.03);
}
#page-topbar .navbar-brand-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sidebar-menu ul li a {
  transition: none;
}
#sidebar-menu ul li a i {
  transition: none;
}
#page-topbar .cs-collapse-btn {
  position: absolute;
  left: 230px;
  background: #fbfbfb;
  width: fit-content;
  height: fit-content;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 8px !important;
  border-radius: 100%;
  box-shadow:
  0px 0px 2.7px rgba(0, 0, 0, 0.019),
  0px 0px 6.9px rgba(0, 0, 0, 0.027),
  0px 0px 14.2px rgba(0, 0, 0, 0.033),
  0px 0px 29.2px rgba(0, 0, 0, 0.041),
  0px 0px 80px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e5e5;
}
.vertical-collpsed .cs-collapse-btn {
  left: 85px !important;
}
.vertical-collpsed .cs-collapse-btn i {
  rotate: 180deg;
}
#page-topbar .cs-page-title {
  padding-left: 2rem !important;
  font-weight: 600;
}
.vertical-collpsed #page-topbar .cs-page-title {
  padding-left: 4.5rem !important;
}

body:not(.vertical-collpsed) .cs-metismenu {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vertical-collpsed .cs-metismenu {
  padding: 0 8px;
}

body:not(.vertical-collpsed) .cs-sidebar-menu {
  padding: 24px 0 24px 0 !important;
}

.cs-metismenu > li:not(.mm-active):hover {
  border-radius: 0.5rem;
  background-color: rgba(var(--dark-rgb), 0.06);
}
.cs-metismenu > li > a {
  color: white;
  display: flex !important;
  align-items: center;
  font-weight: 500;
}
.cs-metismenu > li  > a >i  {
  color: var(--dark-rgb, 0.8) !important;
}

.cs-metismenu > .mm-active {
  background-color: var(--primary);
  box-shadow:
    0px 0.3px 2.7px rgba(0, 0, 0, 0.009),
    0px 0.8px 6.9px rgba(0, 0, 0, 0.013),
    0px 1.6px 14.2px rgba(0, 0, 0, 0.017),
    0px 3.3px 29.2px rgba(0, 0, 0, 0.021),
    0px 9px 80px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.5rem;
}
.cs-metismenu > .mm-active > a {
  color: var(--text-white) !important;
}
.cs-metismenu > .mm-active > a > i {
  color: var(--text-white) !important;
}
.vertical-collpsed .cs-metismenu > .mm-active:hover > a {
  color: var(--dark) !important;
}
.vertical-collpsed .cs-metismenu > .mm-active:hover > a > i {
  color: var(--dark) !important;
}
.cs-metismenu > .mm-active > .sub-menu {
  background-color: rgba(255,255,255, 0.1);
  padding: 1px !important;
}
.cs-metismenu > .mm-active > .sub-menu > .mm-active > a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
body:not(.vertical-collpsed) .cs-metismenu > .mm-active > .sub-menu > li > a {
  color: white !important;
  padding: .0rem 1.5rem .0rem 3.5rem !important;
  margin: 1rem 0;
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a {
  padding: 8px 0px 8px 12px;
}

.vertical-menu {
  border-right: 1px solid #e5e5e5;
  box-shadow:
  0px 0.3px 2.7px rgba(0, 0, 0, 0.009),
  0px 0.8px 6.9px rgba(0, 0, 0, 0.013),
  0px 1.6px 14.2px rgba(0, 0, 0, 0.017),
  0px 3.3px 29.2px rgba(0, 0, 0, 0.021),
  0px 9px 80px rgba(0, 0, 0, 0.03);
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a:not(.has-arrow) {
  border-radius: 8px;
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a ~ .sub-menu {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.auth-full-bg {
  background-color: rgba(var(--primary-rgb),0.6);
}

.card {
  border-radius: 12px;
  box-shadow:
    0px 0px 10px rgba(0, 0, 0, 0.02),
    0px 0px 80px rgba(0, 0, 0, 0.04);
}
.card .card-body {
  padding: 2rem;
}

.btn-primary {
  background-color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.8);
}
.dataTables_wrapper  .row:nth-child(2) .col-sm-12 {
  margin:  16px 0;
}
.table {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.meta__time-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.time-upload, .time-duration {
  font-size: 1rem;
}
.meta__info-wrapper {
  background-color: #fafafa;
  padding: 1.5rem;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.info__label {
  font-size: 0.85rem;
  display: block;
  color: var(--gray);
}
.info__value {
  font-weight: 600;
  font-size: 1rem;
}
.info__description {
  font-size: 1rem;
}


.dataTables_wrapper .dataTables_processing {
  background-color: var(--primary) !important;
  color: white !important;
}

@media screen and (max-width: 1024px) {
  #page-topbar .cs-collapse-btn {
    left: 24px !important;
  }
}

@media screen and (min-width: 768px) {
  .login-form {
    width: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .login-form {
    width: 45%;
  }
}