#schedule { display: flex; flex-direction: column; justify-content: start; align-items: flex-start; align-content: flex-start; margin-bottom: 5em; } .slot { display: flex; flex-direction: row; align-items: flex-start; align-content: flex-start; margin: 1em; font-size: 2em; width: 22em; } .metadata, .data { display: flex; flex-direction: column; justify-content: start; align-items: flex-start; align-content: flex-start; padding: 0.5em; border-style: solid; height: 13em; } .metadata { width: 7.333em; border-radius: 10px 0 0 10px; background-color: var(--alt-bg-color); color: var(--main-color); border-color: var(--main-color); font-family: pfdintextcompprothin; border-width: 1px 0 0px 1px; } .data { width: 14.666em; background-color: var(--main-color); color: var(--alt-main-color); border-color: var(--main-color); border-width: 1px 1px 1px 0; font-family: pfdintextcompprothin; overflow-y: auto; } .metadata > .button { font-size: 1em; margin-bottom: 1em; } .title { font-family: pfdintextcomppromedium; font-weight: 250; margin-bottom: 0.5em; } .speakers { font-family: pfdintextcompprothin; font-weight: 250; margin-bottom: 0.5em; } .speaker_details { position: relative; display: inline-block; } .speaker_details .details { visibility: hidden; background-color: var(--main-color); color: var(--alt-main-color); text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 0; left: 0; opacity: 0; transform: translateX(2em) translateY(50%); transition: opacity 1s; } .speaker_details .details::after { content: ""; position: relative; margin-left: -5px; border-width: 5px; } .speaker_details:hover .details { visibility: visible; opacity: 1; font-size: 0.7em; padding: 0.2em; } .speaker_details > .details > img, .data > .abstract > img { max-width: 200px; max-height: 200px; float: left; margin: 0 0.5em 0.5em 0; } .speaker_details > .details > p { text-align: justify; font-size: 0.5em; } .data > .abstract > p { text-align: justify; font-size: 1em; } .data > .details { font-family: pfdintextcomppromedium; font-weight: 250; margin-bottom: 0.5em; } .data > .resources > .resource > a { color: var(--main-bg-color); }