@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz\,wght.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --mr-bg: #eaeef2;
  --code-snipped: #f0f4f9;
  --mr-primary: #198754;
  --mr-secondary: #1aad69;
  --mr-border: #dee2e6;
  --mr-delete: #1a7287;
  --mr-secondary-btn: #1a7287;
  --mr-bg-nav: #2196f3;
  --mr-input-placeholder: #6e7781;
  --mr-hot-sale: #e34935;
  --mr-hot-sale-secondary: #ba3c2b;
  --mr-text-sale: #57606a;
  --mr-hover-text: #287cbe;
  --mr-color-btn: #56a1dc;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: 400; */
  /* font-style: normal; */
}

body {
  position: relative;
}

body::-webkit-scrollbar {
  display: none;
}

.background-layout-user {
  background-color: #eaeef2 !important;
}

.card-widget-blue a,
.card-widget-blue a i {
  color: #5089de;
}

.bg-none {
  background: none !important;
}

.background-layout-admin {
  background-color: #323a46;
}

.no-event {
  cursor: not-allowed;
}

.color-layout-admin {
  color: #adb5bd !important;
}

.wrap-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Responsive container */
@media (max-width: 1200px) {
  .wrap-content {
    max-width: 100%;
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .wrap-content {
    padding: 0 0.75rem;
  }
}

@media (max-width: 576px) {
  .wrap-content {
    padding: 0 0.5rem;
  }
}

#viewResearch pre {
  border-top: 3px solid var(--mr-primary);
  background-color: var(--code-snipped);
  border-radius: 10px;
  padding: 30px;
}

.flex-jc-as {
  display: flex;
  justify-content: center;
  align-items: start;
}
.flex-js-ac {
  display: flex;
  justify-content: start;
  align-items: center;
}
.flex-jb-ac {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pointer {
  cursor: pointer;
}
.flex-jc-ac {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ts-3 {
  transition: all 0.3s ease;
}
.flex-jc-ac-fc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flex-je-ac {
  display: flex;
  justify-content: end;
  align-items: center;
}
.flex-je-ae {
  display: flex;
  justify-content: end;
  align-items: end;
}
.justify-self-end {
  justify-self: end !important;
}
.flex-jc-ae-fc {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
}
.page-link {
  color: #000 !important;
}
.flex-jb-ac {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fit-content {
  width: fit-content;
}
.object-fit-cover {
  object-fit: cover;
}
.line-clamp-3 {
  @supports (-webkit-line-clamp: 3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.line-clamp-2 {
  @supports (-webkit-line-clamp: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.line-clamp-1 {
  @supports (-webkit-line-clamp: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.shake-element {
  animation: vibrate-buzz 1s linear infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes vibrate-buzz {
  0% {
    transform: translate3d(1px, 1px, 0);
  }
  10% {
    transform: translate3d(-1px, -2px, 0);
  }
  20% {
    transform: translate3d(-3px, 0px, 0);
  }
  30% {
    transform: translate3d(3px, 2px, 0);
  }
  40% {
    transform: translate3d(1px, -1px, 0);
  }
  50% {
    transform: translate3d(-1px, 2px, 0);
  }
  60% {
    transform: translate3d(-3px, 1px, 0);
  }
  70% {
    transform: translate3d(2px, -1px, 0);
  }
  80% {
    transform: translate3d(-1px, -2px, 0);
  }
  90% {
    transform: translate3d(1px, 2px, 0);
  }
  100% {
    transform: translate3d(1px, -2px, 0);
  }
}

.mr-fs-14 {
  font-size: 14px;
}
.mr-fs-13 {
  font-size: 13px;
}
.mr-fs-12 {
  font-size: 12px;
}
.t-u {
  text-transform: uppercase;
}
.mr-btn-secondary {
  background: var(--mr-secondary-btn) !important;
}
.mr-border-secondary {
  border-color: var(--mr-secondary-btn) !important;
}
.input-placeholder {
  color: var(--mr-input-placeholder);
}
.mr-hot-sale {
  color: var(--mr-hot-sale);
}
.mr-hot-sale-bg {
  background-color: var(--mr-hot-sale) !important;
}
.mr-text-sale {
  color: var(--mr-text-sale);
}
.mr-text-blue {
  color: var(--mr-hover-text);
}
.mr-hover-text,
.mr-hot-sale-hover {
  transition: all 0.3s ease;
}
.mr-hover-text:hover {
  color: var(--mr-hover-text);
}
.mr-hot-sale-hover:hover {
  color: var(--mr-hot-sale) !important;
}
.list-style-inside {
  list-style: inside !important;
}
.mr-color-btn {
  color: var(--mr-color-btn);
}
.justify-self-center {
  justify-self: center;
}

/* Global responsive utilities */
@media (max-width: 767.98px) {
  .d-mobile-none {
    display: none !important;
  }

  .d-mobile-block {
    display: block !important;
  }

  .d-mobile-flex {
    display: flex !important;
  }

  .text-mobile-center {
    text-align: center !important;
  }

  .flex-mobile-column {
    flex-direction: column !important;
  }

  .flex-mobile-center {
    justify-content: center !important;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .row {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
  }

  .col,
  [class*="col-"] {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

.fa-shake {
  -webkit-animation-name: fa-shake;
  animation-name: fa-shake;
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
  animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(
    --fa-animation-iteration-count,
    infinite
  );
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-shake,
.fa-spin {
  -webkit-animation-delay: var(--fa-animation-delay, 0);
  animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
  animation-direction: var(--fa-animation-direction, normal);
}

@-webkit-keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  4% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  8%,
  24% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  12%,
  28% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  20% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  32% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  36% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  40%,
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  4% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  8%,
  24% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  12%,
  28% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  20% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  32% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  36% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  40%,
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/*
  images
*/

.images-hover img {
  transition: all 0.3s ease;
}

.images-hover:hover img {
  scale: 1.1;
}

.pers {
  perspective: 1000px;
}
.animate-rotate-3d {
  animation: rotateAnimation 3s linear infinite;
}
@keyframes rotateAnimation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}