@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans.ttf") format("truetype");
}

* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: rgb(82, 82, 82) transparent; /* Thumb color, track color */
}

:root {
  --red: #ce2424;
  --light-red: #fbd5d5;
  --light-green: #d5fbd5;
  --light-blue: #a1abce;
  --standard-blue: #0a85ed;
  --highlight-blue: #09a6f3;
  --active-blue: #0d41e1;
  --standard-grey: #9999a1;
  --highlight-grey: #e6e6e9;
  --active-grey: #66666e;
  --standard-orange: #e76d16;
  --highlight-orange: #e78c16;
  --active-orange: #ff6a00;
  --standard-purple: #9446d5;  
	--highlight-purple: #c77dff;  
	--active-purple: #702eb0;
  --standard-green: #119822;
  --highlight-green: #31cb00;
  --active-green: #2a7221;
  --standard-red: #d71c1c;
  --highlight-red: #ff0000;
  --active-red: #b90000;
  --sodilec-blue: #4e749d;
  --sodilec-green: #77c0af;
}

body {
  min-width: 100dvw;
  font-family: "Open Sans", sans-serif;
}

.w-principale {
  max-width: 96vw;
  overflow-x: auto;
}


/* Style for base buttons and its variations */
.activity-button {
  background-color: var(--standard-blue);
  color: white;
  border-radius: .5em;
  padding: 0.5em 1em;
  font-size: 1.4vh;
  box-shadow: rgba(0, 0, 0, .4) 0 10px 20px -10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: 250ms;
}

.activity-button.active {
  background-color: var(--active-blue) !important;
  box-shadow: none;
  transform: scale(.95);

}

.activity-button:hover {
  background-color: var(--highlight-blue);
  transform: scale(1.05);
}

.activity-button select {
  border: 1px solid #000;
}

.activity-button.vari1 {
  background-color: var(--standard-green);
}

.activity-button.vari1.active {
  background-color: var(--active-green) !important;
  box-shadow: none;
}

.activity-button.vari1:hover {
  background-color: var(--highlight-green);
}

.activity-button.vari2 {
  background-color: var(--standard-red);
}

.activity-button.vari2:hover {
  background-color: var(--highlight-red);
}

.activity-button.vari2.active {
  background-color: var(--active-red) !important;
  box-shadow: none;
}

.activity-button.vari3 {
  background-color: var(--standard-orange);
  color: white;
}

.activity-button.vari3:hover {
  background-color: var(--highlight-orange);
}

.activity-button.vari3.active {
  background-color: var(--active-orange) !important;
  box-shadow: none;
}

.activity-button.vari4 {
  background-color: var(--standard-grey);
  color: black;
}

.activity-button.vari4:hover {
  background-color: var(--highlight-grey);
}

.activity-button.vari4.active {
  background-color: var(--active-grey) !important;
  color: #9baaaf;
  box-shadow: none;
}

.activity-button.vari5 {
  background-color: var(--standard-purple);
  color: white;
}

.activity-button.vari5:hover {
  background-color: var(--highlight-purple);
}

.activity-button.vari5.active {
  background-color: var(--active-purple) !important;
  box-shadow: none;
}

.activity-button:active {
  box-shadow: none;
}

/* Style for standard menu based on cards */
.menu-card {
  display: grid;
  align-content: center;
  grid-template-columns: repeat( 1, minmax(0, 1fr));
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  background-color: var(--banner-bg);
  color: var(--banner-text-color);
  user-select: none;
}

.menu-card .menu-button {
  width: 90%;
  display: flex;
  border-radius: 1rem;
  padding: 0.5rem;
  --panel-hover-bg: transparent;
}

.menu-card .menu-button:hover {
  background-color: var(--panel-bg);
  color: var(--panel-text-color);
}

.right-panel {
  background-color: var(--banner-bg);
  color: var(--banner-text-color);
  box-shadow: rgba(0, 0, 0, 0.15) -5px 10px 15px;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

/* Scrollbar */
::-webkit-scrollbar {
  z-index: 0;
  width: 5px;
  height: 5px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  z-index: 0;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(82, 82, 82);
  border-radius: 10px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  display: none;
}
::-webkit-resizer {
  display: none;
}

.one-word-per-line {
  word-spacing: 2vw;
}

.invert-black-filter {
  filter: invert(0%) sepia(30%) saturate(1585%) hue-rotate(90deg)
    brightness(90%) contrast(105%);
}

.invert-white-filter {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(32deg)
    brightness(105%) contrast(103%);
}