@import url("https://fonts.googleapis.com/css?family=Open+Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CMontserrat%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto&ver=6.4.3");

/*	***********************************
	Browser- and system-level overrides
	*********************************** */
::selection {
    color: black;
    background-color: #ccc;
}

::-moz-selection {
    color: black;
    background-color: #ccc;
}

.eventdetailpanel {
    opacity: 0.00;
}
/* compact viewing */
.eventdetailpanel.compact {
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.weekday.compact, .date.compact, .time.compact {
	height: 33%;
	color: #1f1f1f;
	font-weight: 700;
	text-align: center;
	padding: 0;
}


.time.compact, .weekday.compact {
	padding-top: 5px;
}

.date.compact {
	padding-top: 3px;
	font-size: 20px;
}

.cat-tag {
	border-radius: 50px;
	background: #58b6c7;
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	padding: 2px 6px;
	
}
.left-event-wrapper.compact {
    background: #eaeaea;
}
.right-event-wrapper.compact {
	border: solid 1px;
	background: #f8f8f8;
	padding-right: 0;
}

.site-standard-button.compact, .site-accent-button.compact {
	margin-top: 5px;
    padding: 0px;
}
.button-wrap.compact, .location-wrap.compact, .location-wrap.compact i {
	height: 29px;
	line-height: 25px;
	margin-top: 0;
	box-shadow: none;
	border: 0;
}
.button-wrap.compact {
	margin-top: 10px;
}
.button-wrap.compact a {
	webkit-box-shadow: none;
	box-shadow: none;
}
.event-title-wrap.compact {
	padding-top: 5px;
	padding-right: 0;
	font-weight: 700;
	font-size: 20px;
}
.event-text-and-other-info {
    overflow: hidden;
}
.lower-event-blocks {
	height: 69px;
}
.lower-event-blocks.buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.lower-event-blocks.buttons div + div {
    margin-left: 8px;
}

.category-wrap.compact {
	height: 27px;
	padding-top: 3px;
}


/* event filter elements */
.select-css {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	background-color: #fff;

}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

.filter-section {
	padding-top: 0px;
}
.filter-section label {
	font-weight: 400;
	width: 100%;
	padding-top: 10px;
}

.date-picker-wrapper {
    margin-bottom: 4px;
    @media (min-width: 992px) {
        display: flex;
        justify-content: flex-end;
    }
    @media (max-width: 991px) {
        width: 100%;
    }
}

.padding-left-0 {
	padding-left: 0!important;;
}
.padding-right-0 {
	padding-right: 0;
}

.filter-selects {
	width: 100%;
}
.start-date,
.end-date {
    color: #000000 !important;
	max-width: calc(100% - 40px);
}

.start-date-trigger, .end-date-trigger {
	border: solid 1px #ccc;
    border-radius: 0 5px 5px 0;
    background: #fff;
    border-left: none;
    color: #000000;
}
.date-range-wrapper {
	text-align: right;
}
.no-filtered-events {
	display: none;
}
#sortByAvailability, #sortByCategory {
	padding: 5px 10px;
}

.clear-filters-wrapper {
    padding: 10px 0 8px 24px;
}
.clear-filters-button {
	color: #000000;
	text-transform: uppercase;
}

/* Category color palettes */

/* neutral */
.cat-color-acc-0 { border-left: 7px solid #bbbbbb; border-bottom: 7px solid #bbbbbb; }
.cat-color-bg-0 { background: #eaeaea; }
.cat-color-span-0 { background: #bbbbbb; }
.border-acc-0 { border-color: #eaeaea!important; }

/* Teal */
.cat-color-acc-1 { border-left: 7px solid #126666; border-bottom: 7px solid #126666; }
.cat-color-bg-1 { background: #e0eaea; }
.cat-color-span-1 { background: #126666; }
.border-acc-1 { border-color: #e0eaea!important; }

/* Blue */
.cat-color-acc-2 { border-left: 7px solid #26526C; border-bottom: 7px solid #26526C; }
.cat-color-bg-2 { background: #dfe6ea;  }
.cat-color-span-2 { background: #26526C; }
.border-acc-2 { border-color: #dfe6ea!important; }

/* Lime */
.cat-color-acc-3 { border-left: 7px solid #649B1C; border-bottom: 7px solid #649B1C; }
.cat-color-bg-3 { background: #e4e8dd; }
.cat-color-span-3 { background: #649B1C; }
.border-acc-3 { border-color: #e4e8dd!important; }

/* Aubergine */
.cat-color-acc-4 { border-left: 7px solid #4a176d; border-bottom: 7px solid #4a176d;}
.cat-color-bg-4 { background: #e6e0ea; }
.cat-color-span-4 { background: #4a176d; }
.border-acc-4 { border-color: #e6e0ea!important; }

/* Purple */
.cat-color-acc-5 { border-left: 7px solid #700a7b; border-bottom: 7px solid #700a7b; }
.cat-color-bg-5 { background: #eee6ef; }
.cat-color-span-5 { background: #700a7b; }
.border-acc-5 { border-color: #eee6ef!important; }

/* Red */
.cat-color-acc-6 { border-left: 7px solid #AA1F1F; border-bottom: 7px solid #AA1F1F; }
.cat-color-bg-6 { background: #ece3e3; }
.cat-color-span-6 { background: #AA1F1F; }
.border-acc-6 { border-color: #ece3e3!important; }

/* Gold/yellow */
.cat-color-acc-7 { border-left: 7px solid #AAAA1F; border-bottom: 7px solid #AAAA1F; }
.cat-color-bg-7 { background: #eaeadf; }
.cat-color-span-7 { background: #AAAA1F; }
.border-acc-7 { border-color: #eaeadf!important; }

/* Pink */
.cat-color-acc-8 { border-left: 7px solid #8A2B5F; border-bottom: 7px solid #8A2B5F; }
.cat-color-bg-8 { background: #eae0e6; }
.cat-color-span-8 { background: #8A2B5F; }
.border-acc-8 { border-color: #eae0e6!important; }

/* Green */
.cat-color-acc-9 { border-left: 7px solid #418F2D; border-bottom: 7px solid #418F2D; }
.cat-color-bg-9 { background: #e5ece3; }
.cat-color-span-9 { background: #418F2D; }
.border-acc-9 { border-color: #e5ece3!important; }

/* Brownish */
.cat-color-acc-10 { border-left: 7px solid #67411c; border-bottom: 7px solid #67411c; }
.cat-color-bg-10 { background: #e8e2dc; }
.cat-color-span-10 { background: #67411c; }
.border-acc-10 { border-color: #e8e2dc!important; }

span.cat-tag {
	border: none!important;
}

/* mobile adjustments for category colors */
@media (max-width: 991px) {
	.clear-filters-wrapper {
		padding-left: 0px;
	}	
	.weekday.compact, .date.compact, .time.compact {
		min-height: 50px;
		line-height: 30px;
		border-left: none!important;
	}
	.date.compact {
	    line-height: 35px;
	}
	.site-standard-button.compact, .site-accent-button.compact {
		//margin-right: 20%;
	}
	.event-title-wrap.compact p {
		margin-bottom: 0px;		
	}
	.event-title-wrap.compact {

	}	
}

@media (min-width: 992px) { 
	.date-wrapper.compact{
		height: 110px;
	}
	.weekday.compact, .date.compact, .time.compact {
		border-bottom: none!important;
	}	
}
@media (min-width: 992px) AND (max-width: 1199px)  { 
	.clear-filters-wrapper {
		padding-left: 15px;
	}	
	
	.site-accent-button.compact {
		//margin-right: -20px!important;
	}
}

#header.collapsed {
    display: none;
}

.site-content-header {
    height: 100%;
}

.site-vertical-spacer {
    height: 16px;
}

.panel-vertical-padding {
    padding-top: 16px;
    padding-bottom: 16px;
}

#cookie-alert {
    position: absolute;
    bottom: 42px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.ucasetext {
    text-transform: uppercase;
}

.flag-container {
    display: flex;
    align-content: center;
}
.langselectflag {
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-x: 21px;
    background-position-y: center;
}
.langflag-current {
}
.flag-da {
    background-image: url("/site/images/flags/dk.jpg") !important;
}

.flag-en {
    background-image: url("/site/images/flags/gb.jpg") !important;
}

.flag-no {
    background-image: url("/site/images/flags/no.jpg") !important;
}


/*
	Bootstrap panels
*/
.alert-danger {
    display: flex;
    flex-direction: row;
    color: black;
    background-color: white;
    border-color: #ba2727;
}
.alert-danger .fa {
    color: #ba2727;
    margin-right: 16px;
}

.alert-danger a {
    margin-left: 0px;
}



.small-print-bold {
    font-size: 11px;
    color: #aaaaaa;
}

.flexbox-container {
    display: flex;
}

@media (min-width: 768px) {
    .site-content-header {
        height: 100%;
    }

    .site-fullwidth-header {
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 992px) {
    .eventextras {
        padding-left: 0px;
    }
	.event-title-wrap.compact {
		height: 38px;
		overflow: hidden;
	}

    /* Event-siderne: containeren skal følge vinduet indtil den når sin faste
       maksbredde, i stedet for at springe i Bootstraps trin på 970 og 1170.
       Uden det står indholdet låst på 970px i hele intervallet 992-1199, hvor
       al ekstra vinduesbredde ryger ud i tomme sidemarginer, for så at springe
       117px på en enkelt pixel ved 1200. Fra 1170 og op er resultatet identisk
       med de faste 1170px, så store skærme er uændrede.
       Selektoren bruger to klasser, så den vinder over Bootstraps .container
       uanset indlæsningsrækkefølge.
       Bredden skal sættes til 100% og ikke auto: .background-container er en
       flex-column, og et flex-item med auto bredde og auto sidemarginer bliver
       ikke strakt af align-items: stretch - det ville i stedet shrink-to-fitte
       om sit indhold. */
    .container.container-event {
        width: 100%;
        max-width: 1170px;
    }
}

.site-menu {
    background-color: #808080;
}

.site-menuitem:after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    display: block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* border-top: 8px solid #ff9c00; */
    left: 16px;
    margin-left: -8px;
    height: 50px;
}

.site-organizer-frontpage-text {
    margin-top: 16px;
    margin-bottom: 16px;
}

.content-panel,
.content-panel-spacing-top {
    margin-top: 16px;
}
.content-panel {
    margin-bottom: 16px;
}

.row .content-panel-details {
    border-bottom: 1px solid #dfdfdf;
}
.row:last-of-type .content-panel-details {
    border-bottom: none;
}

#shopping-cart:not(:has(:first-child)) {
    display: none;
}
.shopping-cart-panel {
    margin-top: 16px;
}

.ticket-list-panel {
    margin-bottom: 16px;
}

.content-panel-no-border {
    margin-top: 16px;
    margin-bottom: 16px;
}

#eventdetaillist {
    height: auto;
}

.site-event-image-new {
    width: 100%;
}

@media (min-width: 992px) {
    .site-event-image-old {
        /*width: 130%;*/
        min-height: 251px;
        margin-left: -30%;
    }
}

@media (max-width: 991px) {
    .site-event-image-old {
        width: 100%;
        /*margin-left: -30%;*/
    }
}

@media (min-width:992px) {
    .portal-columns {
        border-left: 0px;
        border-top: 0px;
        border-bottom: 0px;
    }
}

@media (max-width:991px) {
    .portal-columns {
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-bottom: 0px;
    }
}

.portal-columns-last {
    border-right: 0px;
}


.site-event-image-large {
    width: 100%;
}

.site-event-description,
.site-event-details-row {
    /* Word wrap */
    overflow-wrap: break-word; /* Moderne standard */
    hyphens: auto;             /* Den hemmelige ingrediens for dansk */
}

.site-event-details-row-divider {
    width: 100%;
    height: 8px;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 8px;
}

.site-event-details-row-divider-noborder {
    margin-bottom: 0px;
}

.panel-padding {
    padding: 16px 16px 16px 16px;
}

.site-event-details-icon {
    float: left;
    margin-right: 8px;
    margin-top: 2px;
}

.site-eventtab-header-panel {
    margin-top: 16px;
}

.site-eventtab-header-font {
    font-size: 22px !important;
    font-weight: 300 !important;
}

.site-eventtab-content-panel {
    margin-top: 12px;
}

/* Johannes Flexbox */
@media (min-width: 992px) {
    .content-panel {
        flex: 1 1 auto;
        /*display: flex;
        flex-direction: column;*/
    }
    .site-event-description {
        display: flex;
        /*flex-flow: row wrap;*/
    }
    .site-event-description-info {
        flex: 1 100%;
    }
    .site-event-description-buttons {
        /*
        flex: 1 100%;
        align-self: flex-end;*/
    }
}

.site-standard-button {
    float: right;
    margin-top: 16px;
    margin-bottom: 16px;
}

.site-accent-button {
    float: right;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.site-accent-button-login {
    margin-top: 16px;
    margin-bottom: 16px;
}

.site-register-button {
    width: 100%;
    margin-top: 8px;
}


.site-ticketlist-logo {
    margin-bottom: 8px;
    max-height: 30px;
}

.site-ticketlist-item {
    padding-top: 8px;
    padding-right: 16px;
}

.site-queue-position {
    font-size: 36px;
    font-weight: 500;
}


/* columns of same height styles */
.row-full-height {
    height: 100%;
}
.col-full-height {
    height: 100%;
    vertical-align: middle;
}
.row-same-height {
    display: table;
    width: 100%;
    /* fix overflow */
    table-layout: fixed;
}
.col-xs-height {
    display: table-cell;
    float: none !important;
}

@media (min-width: 768px) {
    .col-sm-height {
        display: table-cell;
        float: none !important;
    }
}
@media (min-width: 992px) {
    .col-md-height {
        /*
            display: table-cell;
            float: none !important;
        */
    }
}
@media (min-width: 1200px) {
    .col-lg-height {
        /*
            display: table-cell;
            float: none !important;
        */
    }
}

.col-top {
    vertical-align: top;
}
.col-middle {
    vertical-align: middle;
}
.col-bottom {
    vertical-align: bottom;
}

/* no-gutters Class Rules */
.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row.no-gutters > [class*="-5"] {
    padding-right: 0;
    padding-left: 0;
}

.row.no-gutters > [class*="-6"] {
    padding-right: 0;
    padding-left: 0;
}

/* Overwriting Bootstrap default styles */
.navbar-default {
    background-color: initial;
    border-color: transparent;
    border: none;
}

.navbar-text {
    line-height: 20px;
    font-weight: 500;
}

.navbar-default .navbar-nav>p {
    color: #ffffff;
}

.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
    margin-left: -15px !important;
}
.pagetype-admin .container-fluid>.navbar-collapse,
.pagetype-admin .container-fluid>.navbar-header,
.pagetype-admin .container>.navbar-collapse,
.pagetype-admin .container>.navbar-header {
    margin-left: -22px !important;
}

.site-menu .navbar {
    margin-bottom: 0px !important;
    border-radius: 0px;
}

/* Hamburger til managerclientens menu. Skjult som udgangspunkt: paa brede skaerme staar
   menuen inline, og der er intet at folde ud. Se manager-menu-responsive-plan.md, Pakke C. */
/* Hoejden skal MATCHE navbarens 50px og stregerne centreres i den. Uden hoejde flyder den
   floatede knap op i toppen af linjeboksen, saa dens midte lander ~20px nede, mens
   nav-elementerne centreres om 25px - hamburgeren sad derfor synligt hoejere end flag,
   sprogvaelger og initial-cirkel. */
.manager-menu-toggle {
    display: none;
    float: right;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: none;
    border: none;
    padding: 0 14px;
    margin: 0;
}

.manager-menu-toggle:disabled {
    opacity: 0.4;
}

/* Hvid som naboen .site-menu a.dropdown-toggle: topbarens baggrund er tema-styret
   ($SiteMenuBackgroundColor) og designet til hvid forgrund, saa en moerk hamburger
   forsvinder i baggrunden hos de fleste arrangoerer. */
.manager-menu-toggle .manager-menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #ffffff;
}

.manager-menu-toggle .manager-menu-toggle-bar + .manager-menu-toggle-bar {
    margin-top: 5px;
}

/* AFGOERENDE: hamburgeren vises naar KLIENTEN siger at menuen er en drawer, ikke naar en
   media query siger det. Window.getClientWidth() taeller ikke rullebjaelken med, det goer
   media queries - i baandet imellem (ca. 768-782 px med klassiske rullebjaelker) ville
   brugeren ellers hverken have inline-menu eller hamburger. Klassen saettes af
   ManagerPanel.applyMenuMode(). Se manager-menu-responsive-plan.md, Pakke C. */
body.manager-menu-floating .manager-menu-toggle {
    display: flex;
    float: none;
}

/* ÉN faelles lodret centrering for hele hoejresiden: sprogvaelger, profil-cirkel og
   hamburger. De tre laa foer i hver sin kasse med hver sit tal - Bootstraps lodrette margin
   paa <ul>, .dropdown-toggle's margin-top:-8px fra mobil-media-queryen, og hamburgerens
   egen margin 0 som floated soeskende. At afstemme dem parvis braekker igen, saa snart ét af
   tallene aendrer sig; med baren som flex-raekke centreres alle tre af samme regel og kan
   ikke drive fra hinanden. */
body.manager-menu-floating .site-menu .navbar-collapse.collapse {
    display: flex !important;
    align-items: center;
}

/* Venstre-fanerne (Administration + arrangoernavn) skjules saa snart menuen er en drawer,
   ikke foerst naar media queryen slaar til ved 767px. Uden denne regel er der et ~15px baandt
   (vindue 768-782 med klassisk rullebjaelke) hvor klienten allerede siger floating, men
   fanerne stadig staar - saa hamburgeren ligger EFTER dem, for straks under 768px at hoppe
   yderst til venstre. Nu er drawer-tilstanden visuelt ens hele vejen ned. */
body.manager-menu-floating .site-menu .nav.navbar-nav:not(.navbar-right) {
    display: none;
}

/* margin-left:auto paa BRUGERMENUEN skubber den helt ud til hoejre; hamburgeren og de
   eventuelle venstre-faner beholder deres flow-raekkefoelge til venstre for den.
   Bemaerk at hamburgeren IKKE staar foerst i DOM'en - site-menuens faner ligger foran den
   i header.php. Under 768px er de faner skjult, saa hamburgeren staar yderst; i baandet
   768-782px, hvor klienten siger floating men media-queryen ikke er slaaet til, staar den
   efter fanerne. */
body.manager-menu-floating .site-menu .nav.navbar-nav.navbar-right {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}

body.manager-menu-floating .site-menu .nav.navbar-nav.navbar-right > li {
    display: flex;
    align-items: center;
    float: none;
}

/* Kompakt topbar (Pakke D): naar menuen er en drawer, skal topbaren vaere ÉN smal bar.
   Brugermenuen bliver i hoejre side som paa desktop, men reduceres til initial-cirklen -
   brugernavnet fylder for meget ved siden af hamburgeren. Selve dropdown-INDHOLDET
   (log ud, sprogvalg, AccountProfile) er uroert.
   Logo-baandet #header kollapses som standard af init-scriptet i header.php, saa det er
   brugerens eget valg der styrer det - ikke en CSS-regel de ikke kan komme udenom. */
body.manager-menu-floating .site-menu .dropdown-menu-text {
    display: none;
}

/* Cirklen skal tilbage i FLOW her. Den er normalt position:absolute og haenger paa
   brugernavnets flex-container via en negativ margin. Naar navnet skjules, mister den
   container sit eneste in-flow barn og kollapser til 0 i hoejden - saa stod cirklen
   klistret op i topbarens overkant. Som almindeligt flex-barn giver den containeren
   hoejde igen og centreres af align-items paa foraelderen. */
body.manager-menu-floating .site-menu .dropdown-menu-initials-and-name {
    padding-left: 0;
}

body.manager-menu-floating .site-menu .dropdown-menu-initials-circle {
    position: static;
    margin-left: 0;
}

/* Selve toggle-knappen centreres ogsaa lodret: de nedarvede margin-top:-8px og
   padding-top:14px var afstemt efter en tekstlinje, ikke efter en 26px cirkel. */
body.manager-menu-floating .site-menu .nav.navbar-nav.navbar-right .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    height: 50px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 14px;
}

.site-menu .navbar-default {
}

.site-menu.affix {
    width: 100%;
}

.site-menu .nav.navbar-nav .navbar-brand {
    color: white;
    padding-left: 30px;
    display: none;
}

.site-menu.affix .nav.navbar-nav .navbar-brand {
    display: block;
}

.noscriptexecution {
    margin-top: 32px;
    margin-bottom: 32px;
}

.old-browser {
    display: block;
}

.old-browser .old-browser-message {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* If the browser supports display flex we remove the old-browser message. */
@supports (display: flex) {
    .old-browser {
        display: none;
    }

    .old-browser .old-browser-message {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

#map {
    height: 100%;
}

/* Zendesk saetter selv en meget hoej z-index og ville ellers svaeve oven paa dialoger.
   Vaerdien holder den UNDER side-dialoger (fra 2000) og side-notify (900), men OVER
   managerclientens fastholdte UI (680-720, se z-index-budgettet i gwtcomponents.css).
   Var 1: det laa tilfaeldigvis over menusoejlen fordi den ogsaa var 1 og launcheren
   indsaettes sidst i DOM'en - men da menuen fik sit lag, forsvandt launcheren bagved. */
iframe#launcher {
    z-index: 750 !important;
}


.flex-grow{
    flex-grow: 1;
}


/* fix for equal column height
	https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643
*/
.display-flex-column {
    display: flex;
    flex-direction: column;
}

.row.display-flex {
    display: block;
}
@media(min-width:992px) {
    .row.display-flex {
        display: flex;
        flex-wrap: wrap;
    }
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*Use the height */
.fill-the-height {
    height: 100%;
}

/* Fill the remaining height */
.flex-height {
    /* parent */
    display: flex;
    flex-direction: column;
}
.flex-height > .flex-height {
    /* child - fill the parent height */
    flex: 1;
}
.flex-height.container-fluid {
    width: 100%;
}


@media (min-width: 992px) {
    .row .no-float {
        float: none;
    }
}

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

html {
    height: 100%;
}

.background-container,
.login-background-container,
#gwt-root {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Kvitteringen efter et login-beskyttet download (se #file-download-ready i login.php) genbruger
   login-kortets klasser fra flexlogins login.css, som GWT injicerer paa siden. Den roede
   primaerknap er dér lavet til en <button>, saa et anker mangler blokvisning, centrering og
   fjernelse af understregningen. Selektoren er bevidst mere specifik end flexlogins egen
   (.login-card .hd-btn-business-primary), saa den vinder uanset i hvilken raekkefoelge de to
   stylesheets ender i <head>. */
.login-card a.hd-btn-business-primary,
.login-card a.hd-btn-business-primary:hover,
.login-card a.hd-btn-business-primary:focus {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #f1f1f1;
}

/* Luk-fanen er en handling og ikke en adresse, saa den er en <button>. login-footer-link er
   lavet til et anker, og en knap skal derfor have browserens knap-udseende ryddet af. */
.login-footer button.login-footer-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Indlejret tilstand: siden skal folde sig om sit indhold i stedet for at fylde vinduet.
   Reglerne ovenfor straekker html, body og containeren til fuld hoejde, hvilket er rigtigt for en
   selvstaendig side - men i en iframe betyder det at documentElement.scrollHeight aldrig kan blive
   mindre end iframens egen hoejde. Hoejden ville derfor kun kunne vokse: folder man en accordion
   sammen, ville iframen beholde sin gamle hoejde og efterlade et tomt felt.
   Klassen saettes paa <html> i index.php naar SiteStyle er embed. Se WP3 i iframe-planen. */
html.eventit-embed {
    height: auto;
}

html.eventit-embed body {
    min-height: 0;
    flex-grow: 0;
}

html.eventit-embed .background-container,
html.eventit-embed .login-background-container,
html.eventit-embed #gwt-root {
    flex-grow: 0;
}

@media ( max-width: 767px ) {
    /* Fallback foer GWT-modulet er indlaest og har sat body-klassen: knappen er alligevel
       disabled indtil da, saa den viser blot at menuen findes. */
    .manager-menu-toggle {
        display: flex;
    }

    .site-menu .nav.navbar-nav {
        display: none;
    }

    .site-menu .nav.navbar-nav.navbar-right {
        display: block;
    }

    .site-menu .nav.navbar-nav.navbar-right .navbar-text {
        display: none;
    }

    .site-menu .nav.navbar-nav.navbar-right .dropdown .dropdown-toggle {
        height: 50px;
        margin-top: -8px;
        padding-top: 14px;
        padding-left: 20px;
    }

    .site-menu .navbar-collapse.collapse {
        display: block !important;
        height: 50px;
    }

    /* right/left hoerer sammen med position:absolute herunder. Bootstrap laegger sin egen
       .navbar-right .dropdown-menu { right: 0; left: auto } bag @media (min-width: 768px),
       saa naar vi her paa mobil giver dropdownen sin flydende placering tilbage, arver den
       samtidig standardens left: 0 og folder sig ud mod HOEJRE fra knappen. Brugermenuen
       sidder yderst til hoejre i baren, saa menuen loeb ud over skaermkanten og halvdelen af
       punkterne var uden for billedet. Med right: 0 folder den sig ind over siden i stedet -
       samme adfaerd som paa desktop. */
    .site-menu .navbar-nav .open .dropdown-menu {
        background-color: white;
        position: absolute;
        right: 0;
        left: auto;
        border: 1px solid rgba(0, 0, 0, .15);
    }

    .site-menu .nav > li {
        float: left;
    }
}

.portal-business-button {
    font-family: "Montserrat", Sans-serif, serif;
    font-weight: 800;
    letter-spacing: 0px;
    padding: 1rem 2rem;
    font-size: 1rem;

    background-image: none;
    transform: none;
    border-radius: 12px !important;
}
.portal-business-button-normal {
    background-color: rgba(255, 255, 255, .7);
    color: #484848;
}
.portal-business-button-primary {
    background-color: #C2315B;
    color: #FFFFFF;
}

.portal-business-button-normal:active,
.portal-business-button-normal:focus,
.portal-business-button-normal:hover {
    background-color: rgba(255, 255, 255, .7);
    color: #484848;
}
.portal-business-button-primary:active,
.portal-business-button-primary:focus,
.portal-business-button-primary:hover {
    background-color: #C2315B;
    color: #FFFFFF;
}

.portal-buttons-block {
    margin-top: 100px;
    display: flex;
    flex-grow: 1;
    align-items: end;
    flex-basis: fit-content;

    .portal-business-button {
        margin-right: 20px;
    }
}

@media ( min-width: 992px ) {
    html.pagetype-portal { font-size: 17px; }
}

@media ( max-width: 991px ) {
    html.pagetype-portal { font-size: 14px!important; }
}


.portal-business-background {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-image: url("/site/images/eventIT_hero_image-scaled.jpg");
    background-repeat: no-repeat;
    background-clip: content-box;
    background-size: cover;
}

.portal-business-overlay-outer {
    position: relative;
}
.portal-business-overlay {
    background-color: transparent;
    background-image: linear-gradient(180deg, #437C8BED 26%, #FFFFFF00 85%);
    opacity: 0.78;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;

    height: 244px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.portal-business-header {
    z-index: 10;
    padding: 24px 0px 128px 0px;
}

.portal-business-logo {
    background-image: url("/site/images/event-it-logo-white.png");
    background-repeat: no-repeat;
    background-clip: content-box;
    background-size: contain;
    height: 40px;
}
@media (max-width: 991px) {
    .portal-business-logo {
        height: 32px;
    }
}
@media (max-width: 600px) {
    .portal-business-logo {
        height: 25px;
    }
}

.portal-frontpage-large-text {
    color: #FFFFFF;
    font-family: "Montserrat", Sans-serif, serif;
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: 0px;
    word-spacing: 0.1em;
    text-shadow: 2px 0px 26px rgba(0, 0, 0, 0.99);
}

.portal-frontpage-large-sub-text {
    color: #FFFFFF;
    font-family: "Open Sans", Sans-serif, serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4em;
    word-spacing: 0.1em;
    text-shadow: 2px 0px 26px rgba(0, 0, 0, 0.99);

    max-width: 800px;
}
.portal-unknown-organizer-panel {
    margin-bottom: 150px;
}

.site-menu .dropdown-menu-initials-and-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 34px;
}
.site-menu .dropdown-menu-initials-circle {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    margin-right: 8px;
    justify-content: center;
    align-items: center;
    margin-left: -34px;
}
.site-menu .dropdown-menu-initials-circle-text {
    font-size: 15px;
    color: #3c3c3c;
    text-transform: uppercase;
}

.site-menu a.dropdown-toggle,
.site-menu a.dropdown-menu-text {
    color: #ffffff !important;
}

/* Kun paa enheder der rent faktisk kan hovere. Paa en touch-skaerm bliver :hover staaende
   efter et tryk, indtil man rammer noget andet - saa et klik paa fx sprogvaelgeren efterlod
   et graat felt i topbaren, der lignede en fejl. */
@media (hover: hover) {
    .site-menu .dropdown:hover {
        background-color: #e7e7e7 !important;
    }
    .site-menu .dropdown:hover .dropdown-menu-initials-circle {
        background-color: #333;
    }
    .site-menu .dropdown:hover .dropdown-menu-initials-circle-text {
        color: #ffffff;
    }

    .site-menu .dropdown:hover a,
    .site-menu .dropdown:hover .caret,
    .site-menu .dropdown:hover .dropdown-menu-text {
        color: #333 !important;
    }
}

.site-menu .dropdown.open a,
.site-menu .dropdown.open .caret,
.site-menu .dropdown.open .dropdown-menu-text {
    color: #333 !important;
}