/* Fjerne dumme brower indstillinger + at div's bliver større hvis man tilføjer borders og lignende */
* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

/* Farve nøgler, globale farver. Dette er smart fordi at vi ville kunne ændre hele hjemmesiden fra f.eks orange til blå bare ved at ændre disse værdier. */
/* Bruges sådan her: background-color: var(--main-background-color); */
:root {
    --main-background-color: #ffffff;
    --secoundary-background-color: var(--primary-color);
    --tertiary-background-color: var(--secoundary-color);

    --primary-color: #05454E;
    --secoundary-color: #E5F1F0;
    --tertiary-color: #000000;

    --primary-text-color: #000000;
    --secoundary-text-color: #ffffff;
    --tertiary-text-color: #ABD5DA;
    --header-title-text-color: var(--primary-color);
}

/* Døde browsers kompatibilitet *host.. internet explore.. host..*  */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

/* Definere en standard bredde, ændres når vi kender designet */

html, body {
    width: 100%;
    height: calc(100% - 38px);
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

#wrapper {
    width: 100%;
    height: 100%;
    padding: 28px;
    position: relative;
}

#no-100-height {
    height: auto;
}

#no-100-height #wrapper {
    height: auto;
    padding-top: 0px;
    padding-bottom: 76px;
}

/*==========================================================*/
/************************GENERAL*****************************/
/*==========================================================*/

button,
.button {
    width: auto;
    height: 90px;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: var(--secoundary-text-color);
    background-color: var(--primary-color);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    cursor: pointer;
}

button {
    width: 100%;
    outline: none;
    border: none;
}

button:hover,
.button:hover {
    background-color: #042D33;
}

.button--small {
    width: auto;
    height: 44px;
    font-size: 18px;
    margin: 0px;
    padding: 0 18px;
}

.back-button {
    width: 40px;
    height: 40px;
    background-image: url(../img/icons/back-button.svg);
    background-repeat: no-repeat;
    background-position: center;
    border: 3px solid var(--primary-color);
    border-radius: 100px;
}

.back-button:hover {
    background-color: var(--primary-color);
    background-image: url(../img/icons/back-button-white.svg);
}

.button--small--white {
    color: var(--primary-color);
    background-color: var(--secoundary-text-color);
}

.button--small--white:hover {
    color: #05454e;
    background-color: #ABD5DA;
}

.round-button {
    width: 40px;
    height: 40px;
    text-decoration: none;
    border: 3px solid var(--primary-color);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.round-button:hover {
    background-color: var(--primary-color);
}

.round-button--back-button {
    background-image: url(../img/icons/back-button.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.round-button--back-button:hover {
    background-image: url(../img/icons/back-button-white.svg);
    background-color: var(--primary-color);
}

.round-button--search-button {
    background-image: url(../img/icons/search-button.svg);
    background-repeat: no-repeat;
    background-position: 8px 8px;
}

.round-button--search-button:hover {
    background-image: url(../img/icons/search-button-white.svg);
    background-color: var(--primary-color);
}

.round-button--search-button input {
    display: none;
}

.round-button--search-button-open {
    width: calc(100% - 55px);
    overflow: hidden;
}

.round-button--search-button-open input {
    display: flex;
    border: none;
}

.round-button--full-big {
    width: 60px;
    height: 60px;
    font-size: 24px;
    font-weight: 600;
    color: var(--secoundary-text-color);
    background-color: var(--primary-color);
}

.trash-icon {
    width: 15px;
    height: 15px;
    background-color: var(--primary-color);
    cursor: pointer;
}

input {
    width: 100%;
    height: 65px;
    background-color: var(--tertiary-background-color);
    border: var(--primary-color) 3px solid;
    border-radius: 5px;
    color: var(--primary-text-color);
    padding: 15px;
}

::placeholder {
    color: var(--primary-color);
}

h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 32px;
    color: var(--header-title-text-color);
}

h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 16px;
    color: var(--header-title-text-color);
}

h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 22px;
    color: var(--primary-text-color);
}

header,
.header {
    width: 100%;
    position: relative;
    z-index: 2;
}

.header--center {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header--secound-setup {
    height: 100px;
    display: flex;
}

.header--minustop28 {
    margin-top: -28px;
}

.container {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.container:last-child {
    margin-bottom: 0px;
}

.container .card {
    width: 100%;
    height: auto;
    display: flex;
    background-color: var(-main-background-color);
    border: 3px solid #ECECEC;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 20px;
}

.container .card:last-child {
    margin-bottom: 0px;
}

.card__text__title {
    margin-bottom: 5px;
}

.card__text__title {
    line-height: 26px;
}

.card__buttons {
    display: flex;
    align-items: center;
}

#map { 
    width: 1100px; 
    height: 933px;
    /* background-image: url(../img/forside.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: 270%; */
    position: relative;
}

#map img {
    height: 100%;
}

#map .building-a {
    position: absolute;
    top: 377px;
    left: 528px;
    z-index: 5;
}

#map .building-b {
    position: absolute;
    top: 390px;
    left: 333px;
    z-index: 5;
}

#map .building-c {
    position: absolute;
    top: 480px;
    left: 522px;
    z-index: 5;
}

#map-page {
    position: relative;
}

#map-page main {
    width: 100%;
    height: 100%;
    background-color: #C6CDD3;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

/*==========================================================*/
/************************DROPDOWN****************************/
/*==========================================================*/

.overlay-dropdown {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.overlay-dropdown .button {
    margin: 0 50px;
    margin-top: 50px;
}

.overlay-dropdown__header {
    width: 100%;
    height: 117px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-dropdown__header h1 {
    margin-left: 20px;
}

.overlay-dropdown__module {
    padding: 0px 50px;
}

/* .dropdown__module--dropped {

} */

.dropdown__module--dropped input {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.overlay-dropdown__module ul,
.dropdown__module--dropped ul {
    width: 100%;
    height: auto;
    list-style-type: none;
    background-color: var(--main-background-color);
    border: 3px solid var(--primary-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    flex-direction: column;
    margin-top: -3px;
}

.dropdown__module--dropped li {
    width: 100%;
    height: 65px;
}

.dropdown__module--dropped li a {
    width: 100%;
    height: 65px;
    color: var(--primary-text-color);
    border-bottom: 3px solid var(--secoundary-color);
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15px;
}

.dropdown__module--dropped li a:hover {
    background-color: #f4f8f8;
}

/*==========================================================*/
/**************************MENU******************************/
/*==========================================================*/

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
}

nav {
    width: 100%;
    height: 76px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px -5px 50px 5px rgba(5,69,78,0.23);
    box-shadow: 0px -5px 50px 5px rgba(5,69,78,0.23);
}

footer nav ul {
    height: 76px;
    list-style-type: none;
    display: flex;
}

footer nav li {
    width: 50%;
    height: 76px;
}

footer nav a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home__icon,
.profile__icon {
    width: 35px;
    height: 35px;
    background-image: url(../img/icons/home-unselected.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
}

.profile__icon {
    background-image: url(../img/icons/profile-unselected.svg);
    background-size: 28px
}

.home.home--selected .home__icon,
.home__icon:hover {
    background-image: url(../img/icons/home-selected.svg);
    background-size: 35px
}
.profile.profile--selected .profile__icon,
.profile__icon:hover {
    background-image: url(../img/icons/profile-selected.svg);
}

/*==========================================================*/
/***********************FIND-MIG*****************************/
/*==========================================================*/

.find-mig {
    width: 46px;
    height: 62px;
    color: var(--secoundary-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 28px;
    bottom: 28px;

}

.find-mig__icon {
    width: 30px;
    height: 41px;
    background-image: url(../img/icons/find-me.svg);
    background-repeat: no-repeat;
;}


.find-mig__text {
    width: 47px;
    height: auto;
    font-size: 12px;
    color: var(--primary-color);
    margin-top: 5px;
}

/*==========================================================*/
/**********************LOADING-PAGE**************************/
/*==========================================================*/

.background {
    width: auto;
    height: 100vh;
    background-image: url("../style_guide/images/loading-screen-background.png");
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .logo {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  
  /* .logo__icon {
  
  }
  
  .logo__text {
   
  } */
  
  .circle-logo {
    width: 800px;
    height: auto;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: auto;
  }

/*==========================================================*/
/**************************ETAGER****************************/
/*==========================================================*/

.etager {
    background-color: #C6CDD3;
}

.etager main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.etager .round-button--back-button {
    margin-right: 15px;
}

.etager #etager-list {
    width: 220px;
    height: 260px;
    display: flex;
    flex-direction: column-reverse;
}

.etager #etager-list a {
    margin-top: -40px;
}

/* .etager.etage-1 main {

} */

.etager.etage-1 header {
    background: linear-gradient(
180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    padding: 28px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.etager.etage-1 img {
    margin-top: 720px;
    margin-left: 170px;
}

.clickable-area {
    width: 182px;
    height: 94px;
    position: absolute;
    margin-top: 506px;
    margin-left: -252px;
    cursor: pointer;
}

.overlay-lokale-info {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.overlay-lokale-info #close {
    width: 60px;
    height: 60px;
    background-image: url(../img/icons/exit.svg);
    cursor: pointer;
    position: absolute;
    right: -8px;
    top: -8px;
}

.overlay-lokale-info .box {
    width: 258px;
    height: 368px;
    background-color: #05454E;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    position: relative;
}

.overlay-lokale-info .box h1 {
    color: var(--secoundary-text-color);
    margin-bottom: 10px;
}

.overlay-lokale-info .box .box__text p {
    color: var(--tertiary-text-color);
    margin-bottom: 10px;
}

.overlay-lokale-info .box .box__control {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.overlay-lokale-info .box .control__tider {
    display: flex;
    flex-direction: column;
}

.overlay-lokale-info .box .control__tider p {
    color: var(--tertiary-text-color);
}

.overlay-lokale-info .box .control__tider h2 {
    color: var(--secoundary-text-color);
    margin-bottom: 5px;
}

.overlay-lokale-info .box .spids {
    width: 125px;
    height: 65px;
    background-image: url(../img/spids.svg);
    position: absolute;
    top: 368px;
    left: 0px;
}

.bookmark-icon {
    width: 15px;
    height: 21px;
    display: inline-block;
    background-image: url(../img/icons/icon-bookmark.svg);
    background-repeat: no-repeat;
    margin-left: 10px;
}

.bookmark-icon--selected {
    background-image: url(../img/icons/icon-bookmark-white.svg);
}

/*==========================================================*/
/*************************PROFILE****************************/
/*==========================================================*/

.profile-page main {
    padding: 28px 0px;
}

.profile-page h2 {
    margin-bottom: 10px;
}

.profile-page .trash-icon {
    margin-left: 20px;
}

/*==========================================================*/
/***************************LOGIN****************************/
/*==========================================================*/

.login-page main {
    width: 100%;
    height: calc(100% - 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-page .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.login-page .wayf-logo {
    width: 115px;
    height: 30px;
    margin-bottom: 25px;
}

.login-page #username {
    margin-bottom: 15px;
}

#error-message {
    visibility: hidden;
    color: red;
    margin-top: 10px;
    /*display: flex;
    justify-content: flex-start;*/
}