@use "sass:map";

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

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

$popover-max-width: 100%;

// Only import what we need:
// https://getbootstrap.com/docs/5.1/customize/optimize/

// Configuration
@import "~/node_modules/bootstrap/scss/functions";
@import "~/node_modules/bootstrap/scss/variables";
@import "~/node_modules/bootstrap/scss/mixins";
@import "~/node_modules/bootstrap/scss/utilities";

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

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

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

// Make the bootstrap icons available.
$bootstrap-icons-font-src: url("~node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?a97b3594ad416896e15824f6787370e0") format("woff2"),
url("~node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff?a97b3594ad416896e15824f6787370e0") format("woff") !default;
@import "../../../node_modules/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 textareas use a monospace font
textarea {
    font-family: var(--bs-font-monospace);
}

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

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

// 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.0/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
    }
}

// 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;
}

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

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

    .photo-placeholder {
        height: 15em;
        font-size: 12em;
    }
}

// Style the righthand navigation panel
#righthand-nav {
    height: 70vh;
    width: inherit;
}

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

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

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

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

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

#timeline .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;

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

#timeline .bar:nth-child(odd) rect:hover,
#timeline .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;

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

#timeline .bar:nth-child(even) rect:hover,
#timeline .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: 2 * $table-border-width solid #000;
}

// See https://getbootstrap.com/docs/5.0/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: $white; // $color-norecord;
}

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


/* === 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;
}

.ongoing>td:first-child {
    background-color: red !important;
}

.ongoing>td:last-child {
    background-color: red !important;
}

.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;
}