| |
|
| |
|
| | #LegendHist { |
| | margin-left: 2px; |
| | } |
| |
|
| | |
| | |
| |
|
| | .tab { |
| | display: flex; |
| | align-items: center; |
| | height: 47px; |
| | justify-content: flex-start; |
| | gap: 0px; |
| | overflow: hidden; |
| | |
| | background-color:black; |
| | |
| | } |
| |
|
| | .tablinks { |
| | |
| | min-width: 135px; |
| | color:white; |
| | font-size: 16px; |
| | text-decoration: none; |
| | padding: 0px; |
| | |
| | |
| | |
| | border: none; |
| | cursor: pointer; |
| | font-family: Arial, sans-serif; |
| | } |
| | .tablinks:hover{ |
| | color:#51c5eb; |
| |
|
| | } |
| | |
| | .tab button { |
| | background-color: inherit; |
| | |
| | border: none; |
| | outline: none; |
| | cursor: pointer; |
| | padding: 14px 8px; |
| | transition: 0.3s; |
| | } |
| |
|
| | |
| |
|
| | |
| | .tab button.active { |
| | background-color: rgb(0, 60, 255); |
| | } |
| |
|
| | |
| | .tabcontent { |
| | display: none; |
| | |
| | |
| | border-top: none; |
| |
|
| | } |
| | |
| |
|
| | .tab .dropbtn{ |
| | |
| | margin-left: auto; |
| | background-color: inherit; |
| | border: none; |
| | outline: none; |
| | cursor: pointer; |
| | padding: 14px 16px; |
| | transition: 0.3s; |
| | } |
| |
|
| | .container { |
| | |
| | cursor: pointer; |
| | margin-top: 5px; |
| | display: block; |
| | float: left; |
| | margin-right: 5px; |
| |
|
| | } |
| |
|
| | .bar1, .bar2, .bar3 { |
| | width: 30px; |
| | height: 5px; |
| | background-color: #fcfcfc; |
| | margin: 5px 0; |
| | transition: 0.4s; |
| | margin-left: 5px; |
| | |
| | } |
| |
|
| | .change .bar1 { |
| | transform: translate(0, 10px) rotate(-45deg); |
| | } |
| |
|
| | .change .bar2 {opacity: 0;} |
| |
|
| | .change .bar3 { |
| | transform: translate(0, -10px) rotate(45deg); |
| | } |
| | |
| | #mySidebar { |
| |
|
| | position: fixed; |
| | width:450px; |
| | height:900px; |
| | background:rgb(179, 179, 179); |
| | transform: translateX(-100%); |
| | -webkit-transform: translateX(-100%); |
| | z-index: 2; |
| | } |
| |
|
| | .slide-in { |
| | animation: slide-in 0.9s forwards; |
| | -webkit-animation: slide-in 0.9s forwards; |
| | } |
| |
|
| | .slide-out { |
| | animation: slide-out 0.9s forwards; |
| | -webkit-animation: slide-out 0.9s forwards; |
| | } |
| | |
| | @keyframes slide-in { |
| | 100% { transform: translateX(0%); } |
| | } |
| |
|
| | @-webkit-keyframes slide-in { |
| | 100% { -webkit-transform: translateX(0%); } |
| | } |
| | |
| | @keyframes slide-out { |
| | 0% { transform: translateX(0%); } |
| | 100% { transform: translateX(-100%); } |
| | } |
| |
|
| | @-webkit-keyframes slide-out { |
| | 0% { -webkit-transform: translateX(0%); } |
| | 100% { -webkit-transform: translateX(-100%); } |
| | } |
| | |
| | #menuOptions , #menuOptions li a{ |
| | margin-left: 5px; |
| | font-size: 25px; |
| | margin-top: 8px; |
| | color: white; |
| | font-family: "acumin-pro", sans-serif; |
| | font-weight: 400; |
| | |
| | font-style: normal; |
| | text-decoration: none; |
| | } |
| | #menuOptions li{ |
| | margin-bottom: 6px; |
| | |
| | } |
| | #menuOptions li:hover, #menuOptions li a:hover{ |
| | color: black; |
| | cursor: pointer; |
| |
|
| | } |
| | |
| | #infoImg{ |
| | width:20px; |
| | margin-top: -5px; |
| | margin-bottom: -8px; |
| | |
| | |
| | } |
| |
|
| |
|
| |
|
| | #dynamicTabs { |
| | display: flex; |
| | overflow-x: auto; |
| | white-space: nowrap; |
| | gap: 1px; |
| | width: 1100px; |
| | margin-left:8px; |
| | } |
| |
|
| | #dynamicTabs .tablinks { |
| | background-color: #333; |
| | min-width:500px; |
| | color: white; |
| | border: none; |
| | padding: 10px 2px; |
| | margin:3px; |
| | cursor: pointer; |
| | transition: background-color 0.3s ease; |
| | } |
| |
|
| |
|
| |
|
| | #dynamicTabs .tablinks .fa-times { |
| | cursor: pointer; |
| | margin-left: 10px; |
| | } |
| |
|
| | #dynamicTabs .tablinks .fa-times:hover { |
| | color: red; |
| | } |
| |
|
| |
|
| | |
| | #dynamicTabs::-webkit-scrollbar { |
| | height: 3px; |
| | } |
| |
|
| | #dynamicTabs::-webkit-scrollbar-track { |
| | background: #f1f1f1; |
| | border-radius: 0px; |
| | } |
| |
|
| | #dynamicTabs::-webkit-scrollbar-thumb { |
| | background: #888; |
| | border-radius: 2px; |
| | transition: background-color 0.3s ease; |
| | } |
| |
|
| | #dynamicTabs::-webkit-scrollbar-thumb:hover { |
| | background: #555; |
| | } |
| |
|
| | #dynamicTabs::-webkit-scrollbar-button { |
| | display: none; |
| | } |
| | |
| | .dynamicdropdownclass { |
| | position: relative; |
| | display: inline-block; |
| | cursor: pointer; |
| | } |
| |
|
| | |
| | #FramestabsDropdown { |
| | display: none; |
| | position:fixed; |
| | background-color: #f1f1f1; |
| | min-width: 160px; |
| | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); |
| | z-index: 1; |
| | padding: 10px 0; |
| | background-color:gray; |
| | margin-left:65%; |
| | |
| | } |
| |
|
| | |
| | #FramestabsDropdown .tabslabel { |
| | color: black; |
| | padding: 12px 16px; |
| | text-decoration: none; |
| | display: block; |
| | background-color: #fff; |
| | border: none; |
| | text-align: left; |
| | background-color:gray; |
| | |
| | } |
| |
|
| | |
| | #FramestabsDropdown .tabslabel:hover { |
| | background-color: #ddd; |
| | } |
| |
|
| |
|