﻿/************************************
MISC
************************************/
html, body {
  height: 100%;
}

img.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

main {
  min-height: 100%;
}

body.boligbyggelag .site-wrapper,
body.login .site-wrapper {
  display: flex;
  width: 100%;
  min-height: 100%;
  position: relative;
}

/* page-container */
.page-container {
  position: relative;
  z-index: 0;
  background-color: #fff;
  border-radius: var(--bs-border-radius);
  --bs-gutter-x: 1.5rem;
  padding: var(--bs-gutter-x);
}

/************************************
LOGIN
************************************/

body.login .dropdown .dropdown-menu {
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

body.login .dropdown .dropdown-menu .dropdown-item{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


/************************************
SIDEBAR
************************************/
.page-sidebar {
  background-color: #fff;
  border-radius: var(--bs-border-radius);
}

.sidebar {
  min-height: 100%;
}

/************************************
CONTAINERS AND ROWS
************************************/
@media (min-width:992px) {
  .container-sm {
    max-width: 768px;
  }
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}

.row {
  --bs-gutter-x: var(--ps-column-gutter-x);
  --bs-gutter-y: var(--ps-column-gutter-y);
}


/************************************
PAGINATION
************************************/
.pagination {
  --bs-pagination-bg: none;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-active-color: rgba(var(--ps-primary-text-rgb),1);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-hover-color: var(--bs-link-color);
  --bs-pagination-hover-bg: var(--bs-light);
}

/************************************
FORMS
************************************/
.form-label {
  font-weight: var(--ps-body-bold-font-weight);
}

.form-check-input {
  --bs-form-check-bg: #fff;
}

/************************************
ANIMATION - KEYFRAMES
************************************/
@-webkit-keyframes slide-up {
  from {
    transform: translateY(0.5rem);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-up {
  from {
    transform: translateY(0.5rem);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@-webkit-keyframes slide-left {
  from {
    transform: translateX(100%);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes slide-left {
  from {
    transform: translateX(100%);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}
