@import "color.css";

/* Work Sans - Thin */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

/* ExtraLight */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

/* Medium */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

/* SemiBold */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

/* ExtraBold */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

/* Black */
@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../../assets/fonts/work-sans/WorkSans-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}



body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.text-primary-2 {
  color: var(--primary);
}

.bg-primary-2 {
  background-color: var(--primary);
  border-color: var(--primary);
}

.daftar-kos-images {
  position: relative;
  height: 200px;
}

.daftar-kos-images img {
  width: 100%;
  /* Ensure images cover the width */
  height: 100%;
  /* Ensure images cover the height */
  object-fit: cover;
  /* Maintain aspect ratio, crop to fit container */
}

.card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

.avatar-sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  object-fit: cover;
}

.avatar-md {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  object-fit: cover;
}