#map { width: 100%; height: 640px; } #popup { position: relative; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #555; font-size: 16px; background: #FFF; border: solid 3px #555; box-sizing: border-box; } #popup:before { content: ""; position: absolute; bottom: -24px; left: 50%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #FFF; z-index: 2; } #popup:after { content: ""; position: absolute; bottom: -30px; left: 50%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #555; z-index: 1; } .popup p { margin: 0; padding: 0; } /* Color */ .bg-image { background: linear-gradient(to bottom, rgba(34, 74, 190, 1), rgba(34, 74, 190, 0.7) ), url('/task-bldg/img/photo.jpg'); background-size: cover; } .text-navy { color: #224abe; } .btn-navy { color: white; background-color: #224abe; } .btn-navy:hover { color: white; background-color: #0d47a1; } /* Off-Canvas (SideBar) */ .offcanvas { width: 200px; } @media (min-width: 992px) { .offcanvas { transform: none; visibility: visible !important; } .offcanvas-outside { transition: margin-left 0.3s ease-in-out; margin-left: 200px; } } .btn-circle { width: 40px; height: 40px; border-radius: 50%; opacity: 0.5; border: 0; } /* Link */ a { text-decoration: none; } /* Size */ .mh-100 { height: calc(100vh - 56px) } /* Table */ .table > :not(:first-child) { border-top: 0; }