.disabled { background-color: silver; } .red_border { box-shadow: 0px 0px 2px 1px red; } .red_text { color: red; } .tabbed { padding-left: 15pt; } #disclaimer { font-size: 9pt; } .center_radio { align-self: center; } .start_time, .finish_time { margin-bottom: 10px; } .sub_title { margin-bottom: 5px; } /* -------Tool tip ------- */ .tooltip_text { position: relative; background: rgba(59, 72, 80, 0.9); padding: 0px 8px; margin: 5px; font-size: 13px; border-radius: 100%; color: #FFF; } [data-tooltip] { position: relative; display: inline-block; z-index: 10; } /* Positioning and visibility settings */ [data-tooltip]:before, [data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + 5px); pointer-events: none; transition: 0.2s; will-change: transform; } /* The actual tooltip with a dynamic width */ [data-tooltip]:before { content: attr(data-tooltip); padding: 10px 18px; min-width: 50px; max-width: 200px; width: max-content; width: -moz-max-content; border-radius: 6px; font-size: 14px; background-color: rgba(59, 72, 80, 0.9); background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44)); box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2); color: #fff; text-align: center; white-space: pre-wrap; transform: translate(-50%, -5px) scale(0.5); } /* Tooltip arrow */ [data-tooltip]:after { content: ''; border-style: solid; border-width: 5px 5px 0px 5px; border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent; transition-duration: 0s; /* If the mouse leaves the element, the transition effects for the tooltip arrow are "turned off" */ transform-origin: top; /* Orientation setting for the slide-down effect */ transform: translateX(-50%) scaleY(0); } /* Tooltip becomes visible at hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; opacity: 1; } /* Scales from 0.5 to 1 -> grow effect */ [data-tooltip]:hover:before { transition-delay: 0.3s; transform: translate(-50%, -5px) scale(1); } /* Slide down effect only on mouseenter (NOT on mouseleave) */ [data-tooltip]:hover:after { transition-delay: 0.5s; /* Starting after the grow effect */ transition-duration: 0.2s; transform: translateX(-50%) scaleY(1); }