/* * {
  outline: 2px solid red;
} */

@font-face {
  font-family: 'UI-Light';
  src: url('./fonts/EncodeSansSemiExpanded-Light.ttf');
}
@font-face {
  font-family: 'UI-Regular';
  src: url('./fonts/EncodeSansSemiExpanded-Regular.ttf');
}
@font-face {
  font-family: 'UI-Bold';
  src: url('./fonts/EncodeSansSemiExpanded-Bold.ttf');
}
@font-face {
  font-family: 'UI-Black';
  src: url('./fonts/EncodeSansSemiExpanded-Black.ttf');
}

h1 {
  color: black;
}

:root {
  /* --accentGreen: #00b300; */
  --accentGreen: #08c208;
  --accentGreen: #0061FE; /* dropbox accent */
  --XXbackground: #262626; /* defined in App.svelte */

  /* Toggle switches ======================= */
  --accent-color: rgb(22, 144, 38);
  --gray: rgba(0, 0, 0, 0.3);
  --border: 1px solid rgba(0, 0, 0, 0.527);
  --sliderWidth: 3.6em; /* 3em */
  --knobSize: 1.1em; /* 1.5em */
  /* ====================================== */
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: unset;
}

html,
body {
  margin: 0 !important;
  width: 100%;
  height: 100%;
  padding: 0em;
  user-select: none;
  position: relative;
  overflow: hidden;
  /* background-color: rgba(0,64,128,0.1); */
}

body {
  box-sizing: border-box;
  color: white;
  font-family: 'UI-Regular';
}

b {
  font-family: 'UI-Bold';
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: orange !important;
  text-decoration: none;
  cursor: pointer;
}

a:visited {
  color: orange;
  color: inherit;
}

label {
  display: block;
}

input,
button,
select,
textarea {
  margin: 0;
  border-radius: 2px;
  font-size: inherit;
  font-family: inherit;
  padding: 0.4em 0.6em;
  /* color: rgb(0, 0, 0); */
  box-sizing: border-box;
  accent-color: var(--accentGreen);
  background-color: rgb(200, 200, 200);
  border: 1px solid rgba(0, 0, 0, 0.5);
  /* cursor: pointer; */
}

input:disabled {
  color: #ccc;
}

.zone {
  gap: 0.1em;
  display: flex;
  padding: 0.1em;
  flex-direction: column;
  border-radius: 0 0 1.2em 1.2em;
  background-color: rgba(255, 255, 255, 0.05);
}

.collapsible {
  border: 0;
  width: 100%;
  opacity: 0.5;
  outline: none;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  padding: 0.5em 1em;
  font-family: 'UI-Regular';
  /* text-transform: uppercase; */
  background-color: rgba(0, 0, 0, 0.6);
}

.collapsible:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

.collapsible.active {
  opacity: 0.7;
}

/* .collapsible.active:hover {
  color: rgb(87, 217, 87);
} */

.collapsible::before {
  content: '\25B6';
  display: inline-block;
  margin-right: 12px;
  transform: rotate(0deg) scale(1.0);
  transition: transform 0.3s ease-in-out;
}

.collapsible.active::before {
  color: rgb(87, 217, 87);
}

.active::before {
  content: '\25B6';
  transform: rotate(90deg) scale(1) !important;
  transition: transform 0.2s ease-in-out !important;
  color: rgb(185, 185, 185);
}

.comment {
  display: block;
  font-family: monospace;
  color: rgb(0, 213, 255);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5em;
}

.w100 {
  width: 100%;
}
.w90 {
  width: 90%;
}
.w80 {
  width: 80%;
}
.w70 {
  width: 70%;
}
.w60 {
  width: 60%;
}
.w50 {
  width: 50%;
}
.w40 {
  width: 40%;
}
.w30 {
  width: 30%;
}
.w20 {
  width: 20%;
}
.w10 {
  width: 10%;
}

.bg_body {
  background-color: #414c5a;
}

.darkBg {
   background-color: rgba(0, 0, 0, 0.2);
}

.bg_green {
  background-color: #54af3c;
}

.green {
  color: #5f9750;
}

.bg_yellow {
  background-color: #e5c310;
}

.bg_orange {
  background-color: #e57010;
}
.bg_blue {
  background-color: #1752b8;
}
.bg_red {
  background-color: #9c1a29;
}
.bg_black {
  background-color: #000000;
}
.bg_white {
  background-color: #ffffff;
}
.bg_grey80 {
  background-color: #272833;
}
.bg_grey {
  background-color: #485a6b;
}
.bg_grey60 {
  background-color: #2f303e;
}
.bg_grey40 {
  background-color: #343d48;
}
.bg_grey15 {
  background-color: #656e7a;
}
.bg_grey10 {
  background-color: #9aa4b1;
}
.black {
  color: black;
}
.bg_darken {
  background-color: rgba(0, 0, 0, 0.07);
}
.bg_lighten {
  background-color: rgba(255, 255, 255, 0.05);
}

.btn {
  height: 2.4em;
  font-size: 0.8em;
  color: white;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-family: 'UI-Bold', Arial, Helvetica, sans-serif;
  text-shadow: rgb(0, 0, 0, 0.4) 0 0px 8px;
  box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
  user-select: none;
  cursor: pointer;
  padding: 0.4em 0;
  margin-bottom: 0.1em;
}

.btn:hover {
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.btn:active {
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 100ms ease-in-out;
}

.btn:focus {
  outline: none;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.heading {
  font-size: 0.7em;
  opacity: 0.7;
  vertical-align: middle;
  text-transform: uppercase;
}

.free,
.subs {
  border: 0;
  margin: 0 0.2em;
  line-height: 1em;
  font-size: 0.8em;
  border-radius: 0.5em;
  padding: 0.05em 0.6em 0.2em 0.5em;
  color: #4fef6d87;
  background-color: rgba(0, 255, 21, 0.2);
}

.free {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 128, 0, 0.5);
}

.pointer:hover {
  cursor: pointer;
  color: white;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.roundedBottomInLast:last-of-type {
  border: 0px solid green;
  border-radius: 0 0 1.2em 1.2em;
}

.accordion-item-header {
  /* background-color: red !important; */
  padding: 0.1em;
}