#programFrame {
    font-size: 0.8em;
    line-height: 1.5em;
}
#programFlat,
#programFrame > div {
    padding: 0.5em;
}

@color-white: #f3f3f2;
@color-black: #180614;
@color-link: #1e50a2;
@blocks: Workshop, Block1, Block2, Block3, Block4;
@bg-colors: #4c5f84, #e9531a, #f5b616, #2696d4, #78b32b;

//-- Color Palette for Program Button
@linkcolors: conference, chat, inquiry, video, video2, paper, workshop, cal, abstract, party;
@linkcolors-color: #028760, #006a6c, #6f7769, #d02525, #b94047, #007bbb, #4c5f84, #203744,#203744, #0075c2;

.Block() {
    text-shadow: 1px 0 5px black;
    font-family: museo, serif;
    font-weight: 900;
    font-style: normal;
}
each(@blocks,{
    #programFlat .@{value} ,
    #programFrame .@{value} {
        background-color: extract(@bg-colors, @index);
        color: @color-white;
        size:1.5em;
        .Block;
    }
});
@color-oral: #a1d7f0;
@color-demo: #ee90b3;
@color-tutrial: #3cd4b4;
@color-vldbj: #716246;
@color-prenary: #4365db;
@color-japan: #e60033;
@color-sponsor: #a7d28d;
@color-round-table: #cab8d9;
@color-party: #9a0d7c;
@color-workshop: #f8f4e6;
@color-free: #4e454a;
@color-time: #bcbace;
@color-search: #bee0ce;

.font-museo(@weight:100,@style:normal,@color:@color-white) {
    color: @color;
    font-family: museo, serif;
    font-weight: @weight; //300,500,700,900
    font-style: @style; //italic
}
.font-univia(@weight:400,@style:normal,@color:@color-white) {
    color: @color;
    font-family: univia-pro, sans-serif;
    font-weight: @weight; //200,400,700,900
    font-style: @style;
}

.font-industry(@weight:400,@style:normal,@color:@color-white) {
    color: @color;
    font-family: industry, sans-serif;
    font-weight: @weight; //700
    font-style: @style; //italic
}
.font-adso(@weight:500,@style:normal,@color:@color-white) {
    color: @color;
    font-family: adso, sans-serif;
    font-weight: @weight;
    font-style: @style;
}

#programFlat{
    .buttonbar{
        background-color: fadeout(@color-white,50%);
        padding:5px;
        display:flex;
        a {
            display :block;
            flex-grow: 1;
            margin: auto 0.5em;
            height:3.5em;
        }
    }
    .hit{
        border:5px solid #ecfb00;
    }
    .marker{
        background:	#ecfb00ee;
    }
    .time{
        font-size:0.8em;
    }
    .duration{
        margin-left:1em;
    }
    .block{
        .font-industry(700);
        margin-right:1em;
        margin-left:1em;
    }
    .title{
        .font-museo(700,normal,inherit);
        font-size:1.2em;
        line-height:1.3em;
        margin-top:0.5em;
        margin-left:2.5rem;
        margin-right:1rem;
        text-indent: -2em;
    }
    .author{
        .font-museo(300,normal,inherit);
        font-size:1em;
        line-height:1.1em;
        margin-bottom: 0.5em;
        margin-left:4rem;
        margin-right:1rem;
    }
    .abstract{
        .font-museo(300,normal,inherit);
        font-size:1em;
        line-height:1.1em;
        margin-bottom: 0.5em;
        margin-left:3rem;
        margin-right:1rem;
    }
    .paperbox{
        border-top: @color-black 1px dotted;
    }
}

.session(@color:@color-white,@color-inverse:@color-white,@bgcolor:@color-free,@weight:500,@style:normal) {
    background-color: @bgcolor;
    border: 3px solid #00000000;
    .font-museo(@weight,@style,@color);
    div.sessionId {
        background-color: darken(@bgcolor, 20%);
        text-align: center;
    }

    &:hover {
        background-color: saturate(@bgcolor, 30%);
        cursor: pointer;
    }
    &.repeat {
        background-color: lighten(@bgcolor, 10%);
        .font-museo(300,italic,@color);
    }
    &.selected {
        border: 3px solid#ff007f;
    }
    &.mask {
        &:hover {
            cursor: unset;
        }
        .time {
            padding: 1em;
            margin-bottom: 1em;
        }
        .title {
            color:@color;
            font-size:1.5em;
            font-weight:900;
            padding: 1em 2em;
            border-top: 2px @color solid;
            border-left: 2px @color solid;
            border-right: 2px @color solid;
            background-color: darken(@bgcolor, 20%);
            border-radius: 1em 1em 0 0;
            text-shadow    : 
                        1px  1px 2px fadeout(@color-inverse,80%),
                    -1px  1px 2px fadeout(@color-inverse,80%),
                        1px -1px 2px fadeout(@color-inverse,80%),
                    -1px -1px 2px fadeout(@color-inverse,80%),
                        1px  0px 2px fadeout(@color-inverse,80%),
                        0px  1px 2px fadeout(@color-inverse,80%),
                    -1px  0px 2px fadeout(@color-inverse,80%),
                        0px -1px 2px fadeout(@color-inverse,80%);
        }
        .description {
            padding: 0.5em;
            text-align:right;
            font-size:1.2em;
            border-left: 2px @color solid;
            border-right: 2px @color solid;
            background-color: desaturate(@bgcolor, 30%);
            a{
                color:@color;
            }
        }
        .buttons {
            padding: 2em;
            border-bottom: 2px @color solid;
            border-left: 2px @color solid;
            border-right: 2px @color solid;
            display: flex;
            justify-content: space-between;
            border-radius: 0 0 1em 1em;
            background-color: screen(@bgcolor, #aaa);
            a {
                display :block;
                flex-grow: 1;
                margin: auto 0.5em;
                height:3.5em;
            }
        }
        .paperbox {
            margin: 1em 0;
            //display: flex;
            //flex-wrap: wrap;
            //align-items: stretch;
            //gap: 1em;
            div.paper {
                //flex: 1;
                margin-top:1em;
                div.button {
                    border-top: 2px @color solid;
                    border-left: 2px @color solid;
                    border-right: 2px @color solid;
                    border-bottom: unset;
                    background-color: screen(@bgcolor, #aaa);
                    border-radius: 1em 1em 0 0;
                    padding: 0.5em;
                    display: flex;
                    a.btn {
                        display :block;
                        flex-grow: 1;
                        margin: auto 0.5em;
                        height:3.5em;
                    }
                }
                div.title {
                    font-size:1.4em;
                    .font-museo(900,nomal,@color);
                    text-align:left;
                    border-top: unset;
                    border-left: 2px @color solid;
                    border-right: 2px @color solid;
                    border-bottom: unset;
                    border-radius: unset;
                    background-color: darken(@bgcolor, 20%);
                    padding: 1em 0.5em 0.5em 1em;
                    text-shadow    : 
                        1px  1px 2px fadeout(@color-inverse,80%),
                    -1px  1px 2px fadeout(@color-inverse,80%),
                        1px -1px 2px fadeout(@color-inverse,80%),
                    -1px -1px 2px fadeout(@color-inverse,80%),
                        1px  0px 2px fadeout(@color-inverse,80%),
                        0px  1px 2px fadeout(@color-inverse,80%),
                    -1px  0px 2px fadeout(@color-inverse,80%),
                        0px -1px 2px fadeout(@color-inverse,80%);
                }
                div.more{
                    border-left: 2px @color solid;
                    border-right: 2px @color solid;
                    background-color: darken(@bgcolor, 20%);
                    padding:5px;
                    text-align:right;
                    a {
                        color:@color;
                    }
                }
                div.abstract {
                    font-size:1.2em;
                    font-weight: 300;
                    border-top: unset;
                    border-left: 2px @color solid;
                    border-right: 2px @color solid;
                    background-color: desaturate(@bgcolor, 30%);
                    padding: 0em 5em;
                    height: auto;
                }
                div.author{
                    font-size:1.2em;
                    font-weight: 300;
                    border-top: unset;
                    border-bottom: 2px @color solid;
                    border-left: 2px @color solid;
                    border-right: 2px @color solid;
                    background-color: desaturate(@bgcolor, 30%);
                    border-radius: 0 0 1em 1em;
                    padding: 1em 0.5em;
                    height: auto;
                }
            }
        }
    }
}

#CurrentSessions,
#programFlat,
#programFrame {
    .NONE {
        display: none;
    }
    ._1,
    ._2,
    ._3,
    ._4,
    ._5,
    ._6,
    ._7 {
        .session(@color-black,@color-white,@color-workshop);
        .chair a{
            color:@color-black;
        }
    }
    .A,
    .B,
    .C,
    .D,
    .E,
    .F {
        .session(@color-black,@color-white,@color-oral);
        .chair a{
            color:@color-black;
        }
    }
    .a,
    .b,
    .c,
    .d,
    .e {
        .session(@color-black,@color-white,@color-demo);
        .chair a{
            color:@color-black;
        }
    }
    .T {
        .session(@color-white,@color-black,@color-tutrial);
        .chair a{
            color:@color-white;
        }
    }
    .P {
        .session(@color-white,@color-black,@color-prenary,700);
        .chair a{
            color:@color-white;
        }
    }
    .V {
        .session(@color-white,@color-black,@color-vldbj);
        .chair a{
            color:@color-white;
        }
    }
    .J {
        .session(@color-white,@color-black,@color-japan,900);
        .chair a{
            color:@color-white;
        }
    }
    .r,
    .R {
        .session(@color-black,@color-white,@color-round-table);
        .chair a{
            color:@color-black;
        }
    }
    .t,
    .Q {
        .session(@color-white,@color-black,@color-party);
        .chair a{
            color:@color-white;
        }
    }
    .s {
        .session(@color-white,@color-black,darken(@color-sponsor,20%));
        .chair a{
            color:@color-white;
        }
    }
    .S {
        .session(@color-black,@color-white,@color-sponsor);
        .chair a{
            color:@color-black;
        }
    }
    .Z {
        .session(@color-white,@color-black,@color-free);
        .chair a{
            color:@color-white;
        }
    }
    #timeZone {
        background-color: lighten(@color-free, 50%);
        .nowTime {
            background-color: @color-free;
            padding: 1px;
            .font-industry();
        }
    }
    .time {
        padding:0.5em;
        background-color: @color-free;
        .font-industry();
        display: flex;
        font-size: 1.2em;
        div:first-child {
            margin-right: auto;
            cursor: pointer;
        }
    }
    .time.timeRepeat{
        background-color: lighten(@color-free,10%);
    }
    .mask {
        display: none;
        opacity: 0;
        z-index: 60;
    }
    .blockFolder {
        display: flex;
        font-size: 1.2em;
        div:first-child {
            margin-right: auto;
        }
        div:nth-child(2) {
            margin: 0 1em;
            .font-industry();
        }
    }
    .cell {
        z-index: 50;
        text-align: start;
        .sessionDuration {
            .font-industry();
            color: unset;
            opacity: 70%;
        }
    }
    .search {
        background-color: @color-search;
        font-size: 1.5em;
        & > div,
        & > input,
        & > a {
            margin-left: 1em;
        }
        & > div:last-child {
            background-color: darken(@color-search, 50%);
            color: @color-white;
            margin: 2px;
            padding: 5px;
            font-size: 0.75em;
            overflow-y: hidden;
            overflow-x: hidden;
            white-space: nowrap;
            & > .markedSession {
                background-color: @color-search;
                text-decoration: underline @color-link;
                cursor: pointer;
                padding: 2px 10px;
                margin: 0px 5px;
                border-radius: 5px;
                .font-museo(900, normal,@color-link);
            }
        }
    }
}

each(@linkcolors,{
    .btn-@{value} {
        border-color: extract(@linkcolors-color, @index);
        color: @color-white;
        box-shadow: 0 0 40px 40px extract(@linkcolors-color, @index) inset, 0 0 0 0 extract(@linkcolors-color, @index);
        transition: all 150ms ease-in-out;
        
        &:hover {
            color: extract(@linkcolors-color, @index);
            box-shadow: 0 0 10px 0 extract(@linkcolors-color, @index) inset, 0 0 10px 4px extract(@linkcolors-color, @index);
        }
    }    
    .btn-@{value}.btn-disabled {
        //border-color: Greyscalee(extract(@linkcolors-color, @index));
        //box-shadow: 0 0 40px 40px Greyscale(extract(@linkcolors-color, @index)) inset, 0 0 0 0 Greyscale(extract(@linkcolors-color, @index));
        display:none!important;
        cursor: no-drop;
        &:hover {
            color: unset;
            box-shadow: unset;
        }
    } 
});