/* Banner Notifications Variables */
:root {
  --announcement-text: #346fec;
  --maintenance-text: #f7bd28;
  --outage-text: #dc4e45;
  --security-text: #505050;
  --reminder-text: #dc4e45;
  --announcement-bg: #f2f7ff;
  --maintenance-bg: #fffbf2;
  --outage-bg: #feeceb;
  --security-bg: #ebecee;
  --reminder-bg: #feeceb;
  --text-color:white;
  --bg-color: white;
}

.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #000;
}

.preview-title {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  font-size: 16px;
  font-weight: bolder;
  color:white;
}

.preview-message {
  color: #fff;
}

.current-icon {
  font-size: 25px;
  color: var(--announcement-text) !important;
}

.banner-preview h4 {
  display: flex;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.banner-preview p {
  margin: 0;
  font-size: 14px;
  padding-top: 4px;
}

#preview-url {
  font-size: 0.875rem;
  color: #007bff;
  text-decoration: none;
}

.banner-preview-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.banner-roles .select2-selection__choice,
.banner-roles .select2-selection__clear {
  display: block;
}

.alert-secondary {
  background-color: #e1e3e6; 
}

.alert-padding {
  padding: 8px 0px !important;
}

.table th {
  white-space: nowrap;
}

.table th a {
  text-decoration: none;
  color: inherit;
}

.table th a:hover {
  text-decoration: underline;
}

.message-text {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-white {
  background-color: #FFF !important;
}

.btn-link-custom {
  color: #333;
}

.custom-icon{
  width:45px;
  height:100%;
}

.banner-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -5px;
}