datatracker/ietf/static/css/ietf.scss

@use "sass:map";

@import "bootstrap/scss/functions";

// Enable negative margin classes.
$enable-negative-margins: true;

// Don't add carets to dropdowns by default.
// $enable-caret: false;

$popover-max-width: 100%;

// Override default fonts

$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// Enable color modes
$color-mode-type: data;

// Only import what we need:

@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

$h1-font-size: $font-size-base * 2.2;
$h2-font-size: $font-size-base * 1.8;
$h3-font-size: $font-size-base * 1.6;
$h4-font-size: $font-size-base * 1.4;
$h5-font-size: $font-size-base * 1.2;
$h6-font-size: $font-size-base;

@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";

// Layout & components
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
// @import "bootstrap/scss/offcanvas";
// @import "bootstrap/scss/placeholders";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

// Make the bootstrap icons available.
$bootstrap-icons-font-src: url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
@import "bootstrap-icons/font/bootstrap-icons";

// Leave room for fixed-top navbar...
body {
    padding-top: 60px;
}

// ...and make sure it doesn't overlap when we scroll to anchors.
html {
    scroll-padding-top: 60px;
}

// Make submenus open on hover.
@include media-breakpoint-up(lg) {
    .dropdown-menu>li>ul {
        display: none;
    }

    .dropdown-menu>li:hover>ul {
        display: block;
    }

}

@include media-breakpoint-up(md) {
    .leftmenu .nav>li>ul {
        display: none;
    }

    .leftmenu .nav>li:hover>ul {
        display: block;
    }
}

:is(.dropdown-menu, .leftmenu .nav) .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
}

// Make textareas in forms use a monospace font
textarea.form-control {
    font-family: $font-family-code;
    font-size: $code-font-size;
}

// Wrap long lines in preformatted text.
pre {
    white-space: pre-wrap;
    margin-bottom: 0;
}

// Size the navbar brand image.
.navbar-brand img {
    height: auto;
    width: 60px;
}

// Style preformatted alert messages better.
.preformatted {
    white-space: pre-line;
}

.leftmenu {
    width: 13em;

    li>ul {
        font-size: inherit; // Make the font size choice cascade down into group menu dropdowns.
    }

    .dropdown-item {
        // TODO: In bs-5.2.0, components began to be styled with CSS variables.
        // This broke the (ab)use of dropdown-item to style parts of the leftmenu.
        // This is a quick fix, but we should think about redoing the leftmenu properly.
        --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
        --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
        --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
        --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
        @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
        --#{$prefix}dropdown-color: #{$dropdown-color};
        --#{$prefix}dropdown-bg: #{$dropdown-bg};
        --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
        --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
        --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
        --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
        --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
        --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
        --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
        --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
        --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
        --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
        --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
        --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
        --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
        --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
        --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
        --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
        --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
        --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
    }
}

// Use fixed lengths for the first three columns of "meta" tables.
table tbody.meta {

    th:first-child,
    td:first-child {
        width: 4em;
    }

    th:nth-child(2),
    td:nth-child(2) {
        width: 7em;
    }

    // See https://getbootstrap.com/docs/5.1/layout/breakpoints/#media-queries
    @include media-breakpoint-up(md) {

        th:first-child,
        td:first-child {
            width: 9em;
        }

        th:nth-child(2),
        td:nth-child(2) {
            width: 14em;
        }
    }

    td.edit {
        width: 1px; // Make sure it uses as little space as possible
    }
}

// Try and hyphenate table headings and other things
th,
.hyphenate {
    hyphens: auto;
}

// Helper to make sure very wide tables work on narrow screens.
.wrap-anywhere {
    overflow-wrap: anywhere;
}

// Highlight required form field labels with bi-asterisk
.required>label:after {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-left: .125rem;
    margin-right: .125rem;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    // Recolor black to $red, see https://codepen.io/sosuke/pen/Pjoqqp
    filter: invert(35%) sepia(9%) saturate(5669%) hue-rotate(312deg) brightness(102%) contrast(117%);
    // font-weight: bold;
}

// Make the long dropdowns in the group menu scrollable.
.group-menu .dropdown-menu {
    height: auto;
    width: auto;
    max-height: 35em;
    overflow-x: hidden;
    overflow-y: auto;
}

// Helper to constrain the size of the main logo
.ietflogo {
    width: 75%;
    max-width: 300px;
}

// Make revision numbers pagination items fixed-width
.revision-list {
    .page-item {
        width: 2.2rem;
    }

    .page-item.rfc {
        width: 6.6rem;
    }
}

.charter.revision-list {
    .page-item {
        width: auto;
    }
}

// Style the photo cards
.photo {
    width: 12em;

    .card-img-top {
        object-fit: cover;
        height: 15em;
    }

    .photo-placeholder {
        height: 15em;

        .bi {
            font-size: 10em;
            color: $gray-300;
        }
    }
}

// Style the righthand navigation panel
#righthand-panel {
    max-height: 80vh;
}

#righthand-nav {
    height: 70vh;
    width: inherit;
    overscroll-behavior-y: none; // Prevent overscrolling from scrolling the main content
}

// Add some padding when there are multiple buttons in a line than can wrap
.buttonlist .btn {
    margin-bottom: map.get($spacers, 1);
}

// Styles for d3.js graphical SVG timelines
#doc-timeline {
    font-size: small;

    .axis path,
    .axis line {
        fill: none;
        stroke: black;
    }

    .axis.y path,
    .axis.y line {
        stroke: none;
    }

    .axis text {
        font-size: small;
    }

    .axis.x text {
        dominant-baseline: central;
    }

    .bar text {
        fill: black;
        dominant-baseline: central;
        pointer-events: none;
    }

    $timeline-odd-color: $info;
    $timeline-odd-hover-color: shift-color($timeline-odd-color, $link-shade-percentage) !default;

    .bar:nth-child(odd) rect {
        fill: $timeline-odd-color;
    }

    .bar:nth-child(odd) rect:hover,
    .bar:nth-child(odd) rect:focus {
        fill: $timeline-odd-hover-color;
    }

    $timeline-even-color: $warning;
    $timeline-even-hover-color: shift-color($timeline-even-color, $link-shade-percentage) !default;

    .bar:nth-child(even) rect {
        fill: $timeline-even-color;
    }

    .bar:nth-child(even) rect:hover,
    .bar:nth-child(even) rect:focus {
        fill: $timeline-even-hover-color;
    }
}

// Styles needed for the ballot table

.ballot-icon table td {
    border: $table-border-width solid $gray-500;
    height: 1em;
    width: .8em;
}

.ballot-icon table .my {
    border: calc(2 * $table-border-width) solid #000;
}

// See https://getbootstrap.com/docs/5.1/customize/color/#all-colors
$color-discuss: $red-500;
$color-yes: $green-500;
$color-noobj: $green-100;
$color-abstain: $orange-400;
$color-recuse: $purple-400;
$color-norecord: $gray-300;

.is-blocking {
    box-shadow: 0 0 map.get($spacers, 2) map.get($spacers, 2) $color-discuss;
    margin: map.get($spacers, 2);
}

.color-discuss {
    color: $color-discuss;
}

.color-yes {
    color: $color-yes;
}

.color-noobj {
    color: $color-noobj;
}

.color-abstain {
    color: $color-abstain;
}

.color-recuse {
    color: $color-recuse;
}

.color-norecord {
    color: $color-norecord;
}

.bg-discuss {
    background-color: $color-discuss;
}

.bg-yes {
    background-color: $color-yes;
}

.bg-noobj {
    background-color: $color-noobj;
}

.bg-abstain {
    background-color: $color-abstain;
}

.bg-recuse {
    background-color: $color-recuse;
}

.bg-norecord {
    background-color: $color-norecord;
}

.border-discuss {
    border-color: $color-discuss;
}

.border-yes {
    border-color: $color-yes;
}

.border-noobj {
    border-color: $color-noobj;
}

.border-abstain {
    border-color: $color-abstain;
}

.border-recuse {
    border-color: $color-recuse;
}

.border-norecord {
    border-color: $color-norecord;
}

td.position-moretime,
td.position-notready,
td.position-discuss,
td.position-block {
    background-color: $color-discuss;
}

td.position-yes {
    background-color: $color-yes;
}

td.position-noobj {
    background-color: $color-noobj;
}

td.position-abstain {
    background-color: $color-abstain;
}

td.position-recuse {
    background-color: $color-recuse;
}

td.position-norecord {
    background-color: transparent;
}

td.position-empty {
    border: none !important;
}

tr.position-moretime-row,
tr.position-notready-row,
tr.position-discuss-row,
tr.position-block-row {
    background-color: tint-color($color-discuss, 85%);
}

tr.position-yes-row {
    background-color: tint-color($color-yes, 75%);
}

tr.position-noobj-row {
    background-color: tint-color($color-noobj, 50%);
}

tr.position-abstain-row {
    background-color: tint-color($color-abstain, 85%);
}

tr.position-recuse-row {
    background-color: tint-color($color-recuse, 85%);
}


/* === Edit Meeting Schedule ====================================== */

.edit-meeting-schedule .edit-grid {
    position: relative;
    display: flex;
}

.edit-meeting-schedule .edit-grid .room-label-column {
    /* make sure we cut this column off - the timeslots will determine
   how much of it is shown */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 8em;
}

.edit-meeting-schedule .edit-grid .day {
    margin-left: 1em;
    margin-bottom: 2em;
}

.edit-meeting-schedule .edit-grid .room-label-column .day {
    margin-left: 0;
}

.edit-meeting-schedule .edit-grid .day-label {
    height: 3em;
}

.edit-meeting-schedule .edit-grid .day-label .swap-days {
    cursor: pointer;
}

.edit-meeting-schedule .edit-grid .day-label .swap-days:hover {
    color: #666;
}

.edit-meeting-schedule #swap-days-modal .modal-body label {
    display: block;
}

.edit-meeting-schedule .edit-grid .day-flow {
    margin-left: 8em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.edit-meeting-schedule .edit-grid .room-group:not(:last-child) {
    margin-bottom: 1em;
}

.edit-meeting-schedule .edit-grid .time-header {
    position: relative;
    height: 1.5em;
    padding-bottom: 0.15em;
}

.edit-meeting-schedule .edit-grid .time-header .time-label {
    display: inline-block;
    position: relative;
    width: 100%;
    align-items: center;
}

.edit-meeting-schedule .edit-grid .time-header .time-label.would-violate-hint {
    background-color: #ffe0e0;
    outline: #ffe0e0 solid 0.4em;
}

.edit-meeting-schedule .edit-grid .time-header .time-label span {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #444444;
}

.edit-meeting-schedule .edit-grid .timeslots {
    position: relative;
    height: 4.5em;
    padding-bottom: 0.15em;
}

.edit-meeting-schedule .edit-grid .timeslot {
    position: relative;
    display: inline-block;
    background-color: #f4f4f4;
    height: 100%;
    overflow: hidden;
}

.edit-meeting-schedule .edit-grid .timeslot .time-label {
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: #999;
}

.edit-meeting-schedule .edit-grid .timeslot .drop-target {
    position: relative;
    /* this is merely to make sure we are positioned above the time labels */
    display: flex;
    flex-direction: row;
    height: 100%;
}

.edit-meeting-schedule .edit-grid .timeslot.dropping {
    background-color: #ccc;
    transition: background-color 0.2s;
}

.edit-meeting-schedule .edit-grid .timeslot.overfull {
    border-right: 0.3em dashed #f55000;
    /* cut-off illusion */
}

.edit-meeting-schedule .edit-grid .timeslot.would-violate-hint {
    background-color: #ffe0e0;
    outline: #ffe0e0 solid 0.4em;
}

.edit-meeting-schedule .edit-grid .timeslot.would-violate-hint.dropping {
    background-color: #ccb3b3;
}

.edit-meeting-schedule .constraints .encircled,
.edit-meeting-schedule .formatted-constraints .encircled {
    border: 1px solid #000;
    border-radius: 1em;
    padding: 0 0.3em;
    text-align: center;
    display: inline-block;
}

.edit-meeting-schedule .formatted-constraints .encircled {
    font-size: smaller;
}

/* sessions */
.edit-meeting-schedule .session {
    background-color: #fff;
    margin: 0.2em;
    padding-right: 0.2em;
    padding-left: 0.5em;
    line-height: 1.3em;
    border-radius: 0.4em;
    overflow: hidden;
    cursor: pointer;
}

.edit-meeting-schedule .session.selected {
    cursor: grabbing;
    outline: #0000ff solid 0.2em;
    /* blue, width matches margin on .session */
    z-index: 2;
    /* render above timeslot outlines */
}

.edit-meeting-schedule .session.other-session-selected {
    outline: #00008b solid 0.2em;
    /* darkblue, width matches margin on .session */
    z-index: 2;
    /* render above timeslot outlines */
}

.edit-meeting-schedule .read-only .session.selected {
    cursor: default;
}

.edit-meeting-schedule .session.readonly {
    cursor: default;
    background-color: #ddd;
}

.edit-meeting-schedule .session.hidden-parent * {
    /* This makes .session.hidden-parent's children transparent but keeps the
   * .session itself opaque so the timeslot label does not show through. */
    opacity: 0.7;
}

.edit-meeting-schedule .session.selected .session-label {
    font-weight: bold;
}

.edit-meeting-schedule .session.highlight {
    outline-color: #ff8c00;
    /* darkorange */
    background-color: #f3f3f3;
}

.edit-meeting-schedule .session.would-violate-hint {
    outline: 0.3em solid #F55000;
    z-index: 1;
    /* raise up so the outline is not overdrawn */
}

.edit-meeting-schedule .session.highlight .session-label {
    font-weight: bold;
}

.edit-meeting-schedule .session.dragging {
    opacity: 0.1;
    transition: opacity 0.4s;
}

.edit-meeting-schedule .timeslot.overfull .session {
    border-radius: 0.4em 0 0 0.4em;
    /* remove right-side rounding to allude to being cut off */
    margin-right: 0;
}

.edit-meeting-schedule .edit-grid,
.edit-meeting-schedule .session {
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
}

.edit-meeting-schedule .session .session-label {
    flex-grow: 1;
    margin-left: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-meeting-schedule .session .session-label .bof-tag {
    font-style: normal;
    font-size: smaller;
    color: #8b0000;
    font-weight: bold;
    float: right;
    margin-right: 0.2em;
}

.edit-meeting-schedule .session.too-many-attendees .attendees {
    font-weight: bold;
    color: #8432d4;
}

.edit-meeting-schedule .session .constraints {
    margin-right: 0.2em;
    text-align: right;
    flex-shrink: 1;
}

.edit-meeting-schedule .session .constraints>span {
    display: none;
    font-size: smaller;
}

.edit-meeting-schedule .session .constraints>span .encircled {
    border: 1px solid #b35eff;
}

.edit-meeting-schedule .session .constraints>span.violated-hint {
    display: inline-block;
    color: #8432d4;
}

.edit-meeting-schedule .session .constraints>span.would-violate-hint {
    display: inline-block;
    font-weight: bold;
    color: #f55;
}

.edit-meeting-schedule .session .constraints>span.would-violate-hint .encircled {
    border: 1px solid #f99;
}

.edit-meeting-schedule .unassigned-sessions .session .constraints>span {
    display: none;
}

.edit-meeting-schedule .session .session-info {
    display: none;
}

/* scheduling panel */
.edit-meeting-schedule .scheduling-panel {
    position: sticky;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 0.2em solid #ccc;
    margin-bottom: 2em;
    background-color: #fff;
    opacity: 0.95;
    z-index: 5;
    /* raise above edit-grid items */
}

.edit-meeting-schedule .scheduling-panel .unassigned-container {
    flex-grow: 1;
}

.edit-meeting-schedule .unassigned-sessions {
    margin-top: 0.5em;
    min-height: 4em;
    max-height: 13em;
    overflow-y: auto;
    background-color: #f4f4f4;
}

.edit-meeting-schedule .unassigned-sessions.dropping {
    background-color: #e5e5e5;
    transition: background-color 0.2s;
}

.edit-meeting-schedule .unassigned-sessions .drop-target {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 5em;
    /* do not disappear when empty */
}

.edit-meeting-schedule .scheduling-panel .preferences {
    margin: 0.5em 0;
}

.edit-meeting-schedule .scheduling-panel .preferences>span {
    margin-top: 0;
    margin-right: 1em;
}

.edit-meeting-schedule .sort-unassigned select {
    width: auto;
    display: inline-block;
}

.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body>div {
    margin-bottom: 1.5em;
}

.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots {
    /*column-count: 3;*/
    display: flex;
    flex-flow: row wrap;
}

.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots>* {
    margin-right: 1.5em;
}

.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots label {
    display: block;
    font-weight: normal;
}

.edit-meeting-schedule .session-parent-toggles {
    margin-top: 1em;
}

.edit-meeting-schedule .toggle-inputs label {
    font-weight: normal;
    margin-right: 1em;
    padding: 0 1em;
    border: 0.1em solid #eee;
    cursor: pointer;
}

.edit-meeting-schedule .modal .day-options {
    display: flex;
    flex-flow: row wrap;
}

.edit-meeting-schedule .modal .timeslot-options {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.edit-meeting-schedule .modal .room-group {
    margin: 2em;
}

.edit-meeting-schedule .scheduling-panel .session-info-container {
    padding-left: 0.5em;
    flex: 0 0 25em;
    height: 20em;
    font-size: 14px;
    overflow-y: auto;
}

.edit-meeting-schedule .scheduling-panel .session-info-container .comments {
    font-style: italic;
}

.edit-meeting-schedule .scheduling-panel .session-info-container .other-session:hover {
    cursor: default;
    background-color: #eee;
}

/* A modified .container-fluid without padding on very narrow devices*/
.container-fluid-narrow {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 480px) {
    .container-fluid-narrow {
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }
}

/* === Edit Meeting Timeslots and Misc Sessions =================== */

.edit-meeting-timeslots-and-misc-sessions .day {
    margin-bottom: 1em;
}

.edit-meeting-timeslots-and-misc-sessions .day-label {
    text-align: center;
    font-size: 20px;
    margin-bottom: 0.4em;
}

.edit-meeting-timeslots-and-misc-sessions .room-row {
    border-bottom: 1px solid #ccc;
    // height: 20px;
    display: flex;
    cursor: pointer;
}

.edit-meeting-timeslots-and-misc-sessions .room-label {
    width: 12em;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-meeting-timeslots-and-misc-sessions .timeline {
    position: relative;
    flex-grow: 1;
}

.edit-meeting-timeslots-and-misc-sessions .timeline.hover {
    background: radial-gradient(#999 1px, transparent 1px);
    background-size: 20px 20px;
}

.edit-meeting-timeslots-and-misc-sessions .timeline.selected.hover,
.edit-meeting-timeslots-and-misc-sessions .timeline.selected {
    background: radial-gradient(#999 2px, transparent 2px);
    background-size: 20px 20px;
}

.edit-meeting-timeslots-and-misc-sessions .timeslot {
    position: absolute;
    overflow: hidden;
    background-color: #f0f0f0;
    opacity: 0.8;
    // height: 19px;
    top: 0px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 0.2em;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}

.edit-meeting-timeslots-and-misc-sessions .timeslot:hover {
    background-color: #ccc;
}

.edit-meeting-timeslots-and-misc-sessions .timeslot.selected {
    background-color: #bbb;
}

.edit-meeting-timeslots-and-misc-sessions .timeslot .session.cancelled {
    color: #a00;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 0.2em solid #ccc;
    padding-top: 0.2em;
    margin-bottom: 2em;
    background-color: #fff;
    opacity: 0.95;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel form {
    display: flex;
    align-items: flex-start;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel form button {
    margin: 0 0.5em;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form .mb-3 {
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form label {
    display: inline-block;
    margin-right: 0.5em;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form .form-control {
    display: inline-block;
    width: auto;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=time],
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=duration] {
    width: 6em;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=name] {
    width: 25em;
}

.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=short] {
    width: 10em;
}

.timeslot-edit .tstable div.timeslot {
    border: #000000 solid 1px;
    border-radius: 0.5em;
    padding: 0.5em;
}

.timeslot-edit .tstable .timeslot .ts-name {
    overflow: hidden;
}

.timeslot-edit .tstable .timeslot .ts-type {
    font-size: smaller;
}

.timeslot-edit .tstable .timeslot .timeslot-buttons {
    float: right;
}

.timeslot-edit .tstable .timeslot.in-official-use {
    background-color: #d9edf7;
}

.timeslot-edit .tstable .timeslot.in-unofficial-use {
    background-color: #f8f8e0;
}

.timeslot-edit .tstable td.timeslot-collision {
    background-color: #ffa0a0;
}

.timeslot-edit .tstable .tstype_unavail {
    background-color: #666;
}

.timeslot-edit .official-use-warning {
    color: #ff0000;
}

.rightmarker,
.leftmarker {
    width: 3px;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

#agenda-table tbody tr.current-session {
    border-top: map.get($border-widths, 2) solid map.get($theme-colors, "info");
}

.timetooltip {
    position: relative;
}

.timetooltip .timetooltiptext {
    visibility: hidden;
    background-color: #eee;
    color: #000;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 110;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    width: 60em;
}

.reschedtimetooltip .timetooltiptext {
    margin-left: -300px;
}

.timetooltiptext table tr td {
    padding: 1px 5px;
}

.timetooltiptext table tr th {
    text-align: center;
}

.timehead {
    text-align: right;
    font-weight: bold;
}

.timetooltip:hover .timetooltiptext {
    visibility: visible;
    opacity: 1;
}

#current-time {
    display: inline-block;
}

.meeting-switch {
    background-color: lighten($gray-600, 15%);
    padding: 5px 10px;
    text-align: center;
    color: #FFF;
    font-size: .9rem;
    font-weight: 500;

    a {
        color: #FFF;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}