/* DO NOT REMOVE ANY OF THIS */
:root {
  --active-color: rgb(255, 73, 73);
}

body {
  transition: background-color 0.1s ease-in-out !important;
}

.bg-small {
  background-size: 30% !important;
}
.bg-medium {
  background-size: 50% !important;
}
.bg-large {
  background-size: 80% !important;
}
.bg-full {
  background-size: 100% !important;
}
.bg-cover {
  background-size: cover !important;
}
.bg-contain {
  background-size: contain !important;
}
.bg-red {
  background-color: red;
}

.bg-darkgray {
  background-color: #f3f3f3;
}

.bg-grad-redblue {
  background-image: linear-gradient(to right, rgb(161, 0, 29), rgb(60, 60, 100));
}

.bg-ndr {
  background: url("https://nationald.sharepoint.com/sites/StratOps/Tools/.common/images/NDR_Stripes_Back.png") no-repeat;
  background-size: cover;
  background-position-x: 60%;
}

#devOptions {
  left: 8px;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 8px;
  border-radius: 15px;
  top: 8px;
  box-shadow: black 0px 0px 20px 10px;
}

.notif-panel::-webkit-scrollbar {
  display: none; /* Hide Scrollbar in Chrome */
}

.notif-panel {
  right: 24px;
  min-width: 300px;
  max-width: 300px;
  min-height: 0vh;
  max-height: 98vh;
  padding: 16px;
  top: 0;
  border-radius: 5px;
  overflow-y: scroll;
  scrollbar-width: none; /* Hide Scrollbar in Firefox */
  z-index: 10000;
}

.opsNotif {
  box-shadow: black 0px 0px 16px 2px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px grey;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.6);
  border-radius: 10px;
}

/* Feel free to work from here */