/******* FLEXICAL (flexibel kalendervisning) *******/

#info-flexical {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "title" "items";
    /* padding-top: calc(var(--HD75px) * var(--infoArtWin)); */

    padding: var(--HD75px);
    grid-gap: var(--HD24px);
    /* grid-gap: calc(var(--HD24px) * var(--infoArtWin)); */
}

/* 
.portraitmode #info-flexical {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr;
} */

/* title */

#info-flexical .themetitle {
    grid-area: title;
    font-size: var(--HD75px);
    margin-bottom: 0.2em;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* padding: 0 calc(var(--HD75px) * var(--infoArtWin)); */
}

.logo-on-left #info-flexical .themetitle {
    margin-top: 0.7em;
}

/* calender items - opdeling */

#info-flexical .calitems {
    grid-area: items;
    display: grid;
    height: 100%;
    width: 100%;
    grid-auto-flow: column;
    /* padding: calc(var(--HD75px) * var(--infoArtWin)); */
    /* padding-top:calc(var(--HD36px) * var(--infoArtWin));; */
}

#info-flexical .calitems.rows1 {
    grid-template-rows: 1fr;
}

#info-flexical .calitems.rows2 {
    grid-template-rows: 1fr 1fr;
}

#info-flexical .calitems.rows3 {
    grid-template-rows: 1fr 1fr 1fr;
}

#info-flexical .calitems.rows4 {
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows5 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows6 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows7 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows8 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows9 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows10 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows11 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .calitems.rows12 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#info-flexical .eventbox.big {
    grid-row: auto / span 2;
}

#info-flexical .eventbox {
    background: #000;
    background-size: cover;
    background-position: 50% 33%;
    position: relative;
    color: var(--image-overlay-text-color);
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: calc(var(--HD120px) * var(--infoArtWin)) auto;
    grid-template-areas: "time info";
}

#info-flexical .singleday .eventbox {
    /* breder tidscelle til klokkeslet */
    grid-template-columns: calc(var(--HD150px) * var(--infoArtWin)) auto;
}

#info-flexical .eventbox .image-overlay, #info-flexical .eventbox .image {
 
    grid-area: info;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    /* mix-blend-mode: hard-light; */
}



#info-flexical .eventbox .image {
    background-size: cover;
    background-position: 50% 20%;
}

#info-flexical .eventbox .lb-content {
    grid-area: info;
    position: relative;
    /* border-bottom: 1px solid #000; */
}

#info-flexical .eventbox .title {
    position: absolute;
    padding: calc(var(--HD15px) * var(--infoArtWin));
    width: 100%;
    max-height: 60%;
    bottom: calc(var(--HD30px) - 0.1em);
    font-size: var(--HD45px);
    font-weight: bold;
    line-height: 1.2em;

}

#info-flexical .eventbox .timespace {
    grid-area: time;
    padding: 1em;
    padding-top: calc(var(--HD15px) * var(--infoArtWin));
    text-align: center;
    position: relative;
    text-shadow: none;
}

#info-flexical .eventbox .timespace.even {
    /* background: #000; */
}

#info-flexical .eventbox .timespace.odd {
    /* background: #333; */
}

#info-flexical .eventbox.sametime .timespace .top {
    display: none;
}

#info-flexical .eventbox .dateortime {
    /* dato */
    font-size: calc(var(--HD45px) * var(--infoArtWin));
    font-weight: bold;
}

#info-flexical .singleday .eventbox .dateortime {
    /* når klokkeslet ved singleday */
    font-size: calc(var(--HD36px) * var(--infoArtWin));
    font-weight: normal;
}

#info-flexical .eventbox .month {
    font-size: calc(var(--HD24px) * var(--infoArtWin));
    opacity: 1;
}

#info-flexical .singleday .eventbox .month {
    /* når singleday - vis ikke måned */
    display: none;
}

#info-flexical .eventbox .location, #info-flexical .eventbox .clock {
    position: absolute;
    font-size: calc(var(--HD18px) * var(--infoArtWin));
    line-height: 1em;
}

#info-flexical .eventbox .location {
    text-transform: uppercase;
    top: calc(var(--HD15px) * var(--infoArtWin));
    right: calc(var(--HD15px) * var(--infoArtWin));
    text-align: right;
   
}

#info-flexical .eventbox .clock {
    bottom: calc(var(--HD15px) * var(--infoArtWin));
    left: calc(var(--HD15px) * var(--infoArtWin));
    text-align: left;
    max-width: initial;
}

#info-flexical .provider-logo {
    height: 1em;
    margin-left: 0.3em;
    width: var(--HD180px);
    min-width: var(--HD180px);
}

#info-flexical .provider-logo img {
    width: 100%;
}


/* small cell hack */
#info-flexical .smallcells .eventbox .location {
    top:initial;
    bottom: calc(var(--HD15px) * var(--infoArtWin));
    max-width: 70%;
    height: 1em;
}

#info-flexical .smallcells .eventbox .title {
    
    /* max-height: 70%; */
    max-height: calc(100% - var(--HD45px));
    
}



/*   font ved kun 1,2 og 3 items */

#info-flexical .items1, #info-flexical .items2, #info-flexical .items3 {
    /* padding: var(--HD75px); */
    padding-top: 0;
}

#info-flexical .items1.singleday .eventbox, #info-flexical .items2.singleday .eventbox {
    grid-template-columns: calc(var(--HD180px) * var(--infoArtWin)) auto;
}

#info-flexical .items1.singleday .eventbox .dateortime, #info-flexical .items2.singleday .eventbox .dateortime {
    font-size: calc(var(--HD45px) * var(--infoArtWin));
}

#info-flexical .items1 .title, #info-flexical .items2 .title {
    padding: calc(var(--HD24px) * var(--infoArtWin));
}

#info-flexical .items1 .timespace, #info-flexical .items2 .timespace {
    padding-top: calc(var(--HD24px) * var(--infoArtWin));
}

#info-flexical .rows1 .location, #info-flexical .rows2 .location, #info-flexical .rows3 .location {
    font-size: calc(var(--HD24px) * var(--infoArtWin));
}

#info-flexical .rows1 .clock, #info-flexical .rows2 .clock, #info-flexical .rows3 .clock {
    font-size: calc(var(--HD24px) * var(--infoArtWin));
}

#info-flexical .items4.singleday .location, #info-flexical .items5.singleday .location, #info-flexical .items6.singleday .location {
    font-size: calc(var(--HD24px) * var(--infoArtWin));
}

#info-flexical .items4.singleday .clock, #info-flexical .items5.singleday .clock, #info-flexical .items6.singleday .clock {
    font-size: calc(var(--HD24px) * var(--infoArtWin));
}


/* byt lige text farven på secondary inverted */
#info-flexical .inverted-secondary-el{
    color:var(--element-text-color)
}

#info-flexical .inverted-secondary-el .secondary-color{
    color:var(--element-background-color)!important;
}