// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
// @import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Pages Layout */

.bd-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .bd-layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: min-content 1fr;
    gap: 0;
  }
}

.bd-main {
  grid-area: main;
  display: grid;
  grid-template-areas: "intro" "content" "footer";
  grid-template-rows: auto 1fr;
}

.bd-main-content {
  display: grid;
  grid-area: content;
  grid-template-areas: "content toc";
  grid-template-columns: 1fr min-content;
}

.bd-content {
  min-width: 1px;
  grid-area: content;
  position: relative;
}

.bd-bg-light {
  background-color: var(--ds-background-neutral);
}

.lozenge {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--bs-border-radius);
  font-size: 14px;
}

.lozenge.new {
  background-color: var(--ds-background-discovery);
  color: var(--ds-text-discovery);
}

.lozenge.information {
  background-color: var(--ds-background-information);
  color: var(--ds-text-information);
}

.lozenge.success {
  background-color: var(--ds-background-success);
  color: var(--ds-text-success);
}

.lozenge.error {
  background-color: var(--ds-background-danger);
  color: var(--ds-text-danger);
}

.lozenge.warning {
  background-color: #fff7d6;
  color: #974f0c;
}

.lozenge.information {
  background-color: var(--ds-background-information);
  color: var(--ds-text-information);
}

.lozenge.neutral {
  background-color: var(--ds-background-neutral);
  color: var(--ds-text-neutral);
}

/* CyberBuddy */

#botmanWidgetRoot .desktop-closed-message-avatar {
  background: unset !important;
}

/* Utilities */

.ml-1 {
  margin-left: .25rem !important;
}

.mr-1 {
  margin-right: .25rem !important;
}

.ml-2 {
  margin-left: .5rem !important;
}

.mr-2 {
  margin-right: .5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.cursor-pointer {
  cursor: pointer;
}

.no-bottom-margin {
  margin-bottom: 0;
}

.tw-dot-red {
  height: 10px;
  width: 10px;
  background-color: #ff4d4d;
  border-radius: 50%;
  display: inline-block;
}

.tw-dot-green {
  height: 10px;
  width: 10px;
  background-color: #4bd28f;
  border-radius: 50%;
  display: inline-block;
}

.tw-dot-blue {
  height: 10px;
  width: 10px;
  background-color: #0194ff;
  border-radius: 50%;
  display: inline-block;
}

.tw-dot-orange {
  height: 10px;
  width: 10px;
  background-color: #ffaa00;
  border-radius: 50%;
  display: inline-block;
}

.tw-loader-25 {
  width: 25px;
  height: 25px;
  border: 5px solid #0194ff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}