Engine_Rebuild/src/assets/pages/styles/theme-base.scss

@use "sass:map";

$enable-rounded: true !default;


@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

.web-card {
  cursor: pointer;
}

.web-card-background {
  background-color: map-get($theme-colors, inactivecard);
}

.web-card-background:hover {
  background-color: map-get($theme-colors, activecard);
}

.web-card-background:hover .text-header {
  color: map-get($theme-colors, headertextcolorhover);
}

.web-card-background:hover .text-paragraph {
  color: map-get($theme-colors, paragraphtextcolorhover);
}

.web-card-background:hover .web-card-image-background {
  background-color: map-get($theme-colors, webcardimagebackgroundhover);
}

.web-card-image-background {
  background-color: map-get($theme-colors, webcardimagebackground);
  border-radius: 50%;
}

.text-header {
  color: map-get($theme-colors, headertextcolor);
}

.text-paragraph {
  color: map-get($theme-colors, paragraphtextcolor);
}

.no-overflow {
  overflow: hidden;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

.category-header {
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 4px;
  background-color: map-get($theme-colors, inactiveaccordion);
  color: map-get($theme-colors, inactivetextaccordion);
  border-color: map-get($theme-colors, inactiveborderaccordion);
}

.category-header.active {
  margin-bottom: 25px;
  background-color: map-get($theme-colors, activeaccordion);
  color: map-get($theme-colors, activetextaccordion);
  border-color: map-get($theme-colors, activeborderaccordion);
}

#theme-toggle {
  btn-outline: map-get($theme-colors, themebuttonoutline);
}

#theme-toggle:hover {
  btn: map-get($theme-colors, themebuttonfill) !important;
  color: map-get($theme-colors, themebuttontext) !important;
}

#theme-toggle:focus {
  btn: map-get($theme-colors, themebuttonfill) !important;
  color: map-get($theme-colors, themebuttontext) !important;
}

#theme-toggle:active {
  btn: map-get($theme-colors, themebuttonfill) !important;
  color: map-get($theme-colors, themebuttontext) !important;
}

.searchTerm::-webkit-input-placeholder {
  color: map-get($theme-colors, searchhint) !important;
}

.sb-example-1 .search {
  width: 95%;
  position: relative;
  display: flex;
  margin: auto;
  max-width: 1100px
}

.sb-example-1 .searchTerm {
  width: 100%;
  border: 1px solid;
  border-color: map-get($theme-colors, boxborder2);
  border-right: none;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 25px 0 0 25px;
  stroke: map-get($theme-colors, searchicon);
  color: map-get($theme-colors, searchhint);
  background-color: map-get($theme-colors, info);
  box-shadow: none;
  outline: none;
}

.sb-example-1 .searchTerm:focus {
  stroke: map-get($theme-colors, searchicon);
  background-color: map-get($theme-colors, info);
  box-shadow: none;
  color: map-get($theme-colors, searchfont) !important;
  outline: none;
}

.sb-example-1 .searchbutton {
  width: 40px;
  height: 50px;
  border: 1px solid;
  border-color: map-get($theme-colors, boxborder2);
  background-color: map-get($theme-colors, searchbuttonfill);
  text-align: center;
  fill: map-get($theme-colors, searchicon);
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  font-weight: normal;
  box-shadow: none;
  outline: none;
}

.sb-example-1 .searchbutton:focus {
  width: 40px;
  height: 50px;
  border: 1px solid;
  border-color: map-get($theme-colors, boxborder2);
  background-color: map-get($theme-colors, searchbuttonfillfocus);
  text-align: center;
  fill: map-get($theme-colors, searchiconfocus);
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  font-weight: normal;
  box-shadow: none;
  outline: none;
}

.navigationitem {
  outline: none;
  color: map-get($theme-colors, navbartext);
}

.navigationitem:hover {
  color: map-get($theme-colors, activetextaccordion);
}

.navbar-brand {
  outline: none;
  color: map-get($theme-colors, navbarbrandtext);
}

.navbar-brand:hover {
  outline: none;
  color: map-get($theme-colors, navbarbrandtext);
}


.helpdropdown .dropdown-menu {
  background-color: map-get($theme-colors, menudropdownfill);
  font-size: 15px;
  margin-bottom: 9px;
  color: map-get($theme-colors, activetextaccordion) !important;
  box-shadow: -1 1 3 1 #cccccc;
}

.feedbackentry .btn {
  color: map-get($theme-colors, feedbacksubmitbuttontext);
}

.feedbackdropdown .dropdown-menu {
  background-color: map-get($theme-colors, menudropdownfill);
  font-size: 15px;
  margin-bottom: 9 px;
  color: map-get($theme-colors, activetextaccordion);
  box-shadow: -1 1 3 1 #cccccc;
}

#DropdownFeedbackEmail {
   background-color: map-get($theme-colors, feedbackmessagefill);
   border: 1px solid;
   border-color: map-get($theme-colors, feedbackmessageborder);
   color: map-get($theme-colors, searchfont);
}

.form-control::-webkit-input-placeholder {
  color: map-get($theme-colors, feedbackmessagehint) !important;
}

.help-menu-item {
  color: map-get($theme-colors, helpmenudropdowntext) !important;
}

.help-menu-item:hover {
  color: map-get($theme-colors, helpmenudropdowntexthover) !important;
  background-color: map-get($theme-colors, helpmenudropdownbghover) !important;
}

.footer-text {
  color: map-get($theme-colors, footerback);
}

.footer-text:hover {
  color: map-get($theme-colors, footerbackhover);
}

.footer-text:focus {
  color: map-get($theme-colors, footerbackfocus);
}

.sidebar {
  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color inactive */
}

.sidebar:hover {
  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color on hover */
}

.sidebar .nav-link.active {
  color: map-get($theme-colors, sidebartext); /* This is the color of the Top item in menu when inactive */
}

.sidebar .nav-link.active:hover {
  color: map-get($theme-colors, activetextaccordion); /* This is the color of the Top item in menu when hovered */
  background-color: map-get($theme-colors, sidebarbg);
}

.sidebar .nav-link {
  font-weight: 500;
  color: map-get($theme-colors, sidebartext); /* This is the color of the category names when inactive */
}

.sidebar .nav-link:hover {
  font-weight: 500;
  color: map-get($theme-colors, activetextaccordion); /* This is the color of the category names when hovered */
  background-color: map-get($theme-colors, sidebarbg);
}

.overlay-custom {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.overlay-content {
  position: fixed; /* Sit on top of the page content */
  width: 50%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0%;
  right: 0%;
  background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */
  cursor: pointer; /* Add a pointer on hover */
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}