@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root,
.app.body {
  --rounded-corners: var(--gap);
  --primary-font: "Ubuntu", sans-serif;
  --body-background: #2f3133;
  --background-color: var(--body-background);
  --text-color: #fff;
  --border-color: rgb(93 96 99);
  --rounded-corners: calc(var(--gap) * 1.5);
  --view-close-color: rgb(221, 8, 8);
  --backdrop-background: rgba(22, 22, 23, 0.8);
  --backdrop-background-light: rgba(250, 250, 252, 0.8);
  --backdrop-filter: saturate(180%) blur(20px);
  --primary-color: #ef6614;
  --secondary-color: #222222;
  --camera-border-color: rgb(93 96 99);
}

html,
body {
  font-family: var(--primary-font);
  min-height: 100%;
  background-color: var(--background-color);
}

.app.body {
  position: relative;
  z-index: 0;
}

.header {
  --link-active-color: #fff;
  --link-active-border-radius: var(--gap);
}

.header {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--gap) * 0.5) calc(var(--gap) * 0.5) calc(var(--gap) * 0.5) calc(var(--gap) * 1);
  background-color: rgb(0, 0, 0, 0.8);
  backdrop-filter: var(--backdrop-filter);
  font-size: 120%;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header,
.ViewHeader {
  line-height: 1.15;
}

app-nav,
app-nav .content {
  display: flex;
  align-items: center;
}

html,
body,
.app.body,
.View.alert .alertBody,
.View.view.toast .toastContent,
.View.view:not(.loader) .ViewContent,
.View.view:not(.loader) .ViewHeader,
.View.view.alert:not(.loader) .ViewHeader,
.View.view.menu:not(.loader) .ViewHeader,
.View.view.menu:not(.loader) .ViewContent,
.View.view.alert:not(.loader) .ViewContent {
  background-color: var(--body-background);
  color: var(--text-color);
}

.View.view.alert .ViewContent,
.View.view.toast .toastContent,
.View.view.confirm .ViewContent,
.View.view.menu.center .ViewContent,
.View.view.userSettings .ViewContent,
.View.view.language .ViewContent {
  border: solid 1px var(--border-color);
  overflow: hidden;
}

.footer {
  margin: auto 0 0 0;
}

go-icon[name="logo"] {
  font-size: 32px;
}

.footer go-icon[name="logo"] {
  font-size: 100px;
}

.header .left,
.header .right {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 1);
}

.header .button {
  display: inline-flex;
  padding: calc(var(--gap) * 1);
  cursor: pointer;
}

.go-list-message {
  padding: calc(var(--gap) * 1);
  font-size: 120%;
}

select.select,
.select select,
go-input .input {
  background-color: rgb(232 240 254 / 3%);
  color: var(--text-color);
  height: calc(var(--gap) * 2.8);
  min-height: calc(var(--gap) * 2.8);
}

select.select:focus,
.select select:focus,
.select:focus-within select,
go-input .input:not([readonly], .disabled):focus {
  background-color: rgb(232 240 254 / 6%);
  color: var(--text-color);
  border: solid 1px var(--primary-color);
}

go-option:hover,
.go-option:hover {
  background-color: rgb(232 240 254 / 6%);
}

.View.view:not(.loader) .ViewHeader [role="close"]:hover {
  background-color: var(--primary-color, red);
}

.View.view:not(.loader) .ViewHeader {
  padding: 0;
}

.appCams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding: calc(var(--gap) * 1);
  gap: calc(var(--gap) * 1);
}

video-camera {
  --border-color: var(--camera-border-color);
  display: inline-flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: var(--camera-background, #000);
  border: solid 2px var(--border-color);
}

video-camera:hover {
  --border-color: #fff;
}

video-camera.camera-active {
  --border-color: var(--primary-color);
}

video-camera,
video-camera video {
  border-radius: calc(var(--gap) * 1);
}

video-camera video {
  transition: all 0.3s ease-in-out;
}

video-camera .name {
  padding: calc(var(--gap) * 0.5);
  text-transform: uppercase;
  font-size: 120%;
  font-style: italic;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 3px #000;
  font-weight: bold;
}

video-camera.error .error {
  position: absolute;
  top: calc(var(--gap));
  right: calc(var(--gap));
  color: red;
}

video-camera.camera-selected {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

body .secondary-circle,
body .secondary-button,
body .third-button-circle,
body .primary-button,
body .secondary-button,
body .third-button {
  border: none;
}

.View.view:not(.loader).border .ViewContent,
.View.view:not(.loader).float-center .ViewContent {
  border: solid 1px var(--border-color);
}

@media (min-width: 768px) {
  .appCams {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(var(--gap) * 1.5);
  }

  go-items[length="1"],
  go-items[length="2"],
  go-items[length="3"],
  go-items[length="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  go-items[length="1"],
  go-items[length="2"],
  go-items[length="3"],
  go-items[length="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}