:root {
  --table-wrapper-border: linear-gradient(-45deg, rgba(108, 40, 172, 0.6), rgba(139, 43, 168, 0.7));
  --gray-background: rgb(44, 44, 44);
  --shadow-size: 10px;
  --translate-px: 3px
}
main {
  flex:  1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(34, 32, 34, 0.7);
}



.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #525252;
  border: 2px var(--border-basic-color) solid;
  border-radius: 999px;
  transition: 0.3s;
  box-shadow: 2px 2px 5px rgb(24, 24, 24);
}

.slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 1px;
  bottom: 1px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  transition: 0.3s;

}
.steam-fee-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

input:checked + .slider {
  background-color: #c116e4;
}

input:checked + .slider::before {
  transform: translateX(22px);
}

.page-info {
  height: fit-content;
  min-height: 154px;
  width: 100%;
  background-color: rgb(44, 44, 44, 0.6);

  border-bottom: 2px var(--border-basic-color) solid;
  align-content: center;
}

.text-container {
  width: 86%;
  justify-self: center;
  padding-bottom: 8px;
}
.text-container h1 {
  margin-bottom: 8px;
}

.border-wrapper {
  height: 760px;
  max-width: 1480px;
  width: 90%;
  margin-top: 12px;
  margin-bottom: 54px;

  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: var(--table-wrapper-border);
}

.user-pannel, .history-window {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: rgba(34, 32, 34, 0.85);
  border-radius: 10px;
  overflow: hidden;
}
.history-window {
  background-color: rgba(34, 32, 34, 1);
}
.history-window {
  border-radius: 8px;
}
.history-content {
  position: relative;
  box-sizing: border-box;
  height: calc(100% - 54px);
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.history-chart {
  width: 100%;
  height: 100%;
}

.table-content {
  box-sizing: border-box;
  height: 94%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding-left: 14px;
  padding-right: 6px;
  padding-bottom: 18px;
}

.user-tradeup {
  width: 94%;
  min-width: 880px;
  height: 170px;
  min-height: 170px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 14px;
  overflow: hidden;
  box-shadow: 2px 2px 5px rgb(24, 24, 24);
}


.table-header {
  height: 6%;
  border-bottom: 2px solid;
  border-image: linear-gradient(to left, rgba(137, 42, 214, 0.548), rgba(160, 36, 190, 0.589)) 1;
  font-size: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(107, 5, 107, 0.85)
}
.tradeup-header {
  box-sizing: border-box;
  height: 15%;
  width: 100%;
  border-bottom: 2px var(--border-basic-color) solid;
  background: linear-gradient(to right, rgb(187, 42, 206, 0.2), rgb(106, 18, 206, 0.2));
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tradeup-content {
  height: 85%;
  width: 100%;
  display: flex;
  flex-direction: row;
}


.tradeup-user-data {
  box-sizing: border-box;
  height: 100%;
  min-width: 23%;
  border-right: 2px var(--border-basic-color) solid;
  font-size: 18px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 6px;
  row-gap: 10px;
  padding: 0px 8px;
}
.tradeup-profit {
  box-sizing: border-box;
  height: 100%;
  min-width: 17%;
  border-right: 2px var(--border-basic-color) solid;
  font-size: 18px;
  row-gap: 10px;
  padding: 0px 8px;
}
.tradeup-inputs {
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  border-right: 2px var(--border-basic-color) solid;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.tradeup-actions {
  box-sizing: border-box;
  height: 100%;
  width: 15%;
  font-size: 17px;
  line-height: 1;
}
.tradeup-actions > div {
  box-sizing: border-box;
  height: 25%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s;
  width: 100%;
}
.add-outcome, .outcome-history, .delete-last {
  border-bottom: 2px var(--border-basic-color) solid;
}

.tradeup-actions > div:hover {
  background: var(--hover-color);
  box-shadow: 0px 0px 6px rgb(184, 184, 184);
}
.scroll-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: max-content;
  margin: 0 auto;  
  height: 100%;

  column-gap: 6px;

  align-self: center;
  justify-self: center;
  padding: 0px 10px;
}
/* WebKit browsers: Chrome, Edge, Safari */
.tradeup-inputs::-webkit-scrollbar {
  width: 10px;   /* vertical scrollbar width */
  height: 10px;  /* horizontal scrollbar height */
}

.tradeup-inputs::-webkit-scrollbar-track {
  background: #313131ab; /* dark track */
  border-radius: 5px;
}

.tradeup-inputs-purple::-webkit-scrollbar-thumb {
  background-color: #6d19ced5; /* main purple */
  border-radius: 5px;
  border: 2px solid rgb(125, 48, 226, 0.5) 100%; /* adds padding effect */
}
.tradeup-inputs-purple::-webkit-scrollbar-thumb:hover {
  background-color: #6d19ced5; /* lighter purple on hover */
}
/* Firefox */
.tradeup-inputs-purple {
  scrollbar-width: thin;
  scrollbar-color: #6d19ced5 #313131ab; /* thumb color, track color */
}

.tradeup-inputs-pink::-webkit-scrollbar-thumb {
  background-color: #6d086dd5;
  border-radius: 5px;
  border: 2px solid rgba(170, 25, 175, 0.5) 100%;
}
.tradeup-inputs-pink::-webkit-scrollbar-thumb:hover {
  background-color: #6d086dd5;
}
.tradeup-inputs-pink {
  scrollbar-width: thin;
  scrollbar-color: #6d086dd5 #313131ab;
}


.tradeup-inputs-red::-webkit-scrollbar-thumb {
  background-color: #991c1cd5;
  border-radius: 5px;
  border: 2px solid rgba(189, 47, 47, 0.5) 100%;
}
.tradeup-inputs-red::-webkit-scrollbar-thumb:hover {
  background-color: #991c1cd5;
}
.tradeup-inputs-red {
  scrollbar-width: thin;
  scrollbar-color: #991c1cd5 #313131ab;
}

.tradeup-inputs-light-blue::-webkit-scrollbar-thumb {
  background-color: #1d739bd5;
  border-radius: 5px;
  border: 2px solid rgba(42, 160, 196, 0.5) 100%;
}
.tradeup-inputs-light-blue::-webkit-scrollbar-thumb:hover {
  background-color: #1d739bd5;
}
.tradeup-inputs-light-blue {
  scrollbar-width: thin;
  scrollbar-color: #1d739bd5 #313131ab;
}

.tradeup-inputs-blue::-webkit-scrollbar-thumb {
  background-color: #3e40acd5;
  border-radius: 5px;
  border: 2px solid rgba(29, 63, 173, 0.5) 100%;
}
.tradeup-inputs-blue::-webkit-scrollbar-thumb:hover {
  background-color: #3e40acd5;
}
.tradeup-inputs-blue {
  scrollbar-width: thin;
  scrollbar-color: #3e40acd5 #313131ab;
}


.dashed-border {
  height: 106%;
  width: 102%;
  transform: translateX(-4%);
  border: 3px var(--border-basic-color) dashed;
  border-radius: 8px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s;
}
.inputs-disp {
  height: 90px;
  position: relative;
  transition: transform 0.08s, filter 0.08s;
}
.input-img {
  height: 100%;
  filter: contrast(1.05) brightness(1.05) drop-shadow(3px 3px 4px rgb(17, 17, 17));
}
.input-count {
  background-color: rgb(51, 51, 51);
  border: 1px var(--border-basic-color) solid;
  border-radius: 4px;
  height: 26px;
  width: fit-content;
  padding: 0px 8px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 4px rgb(34, 34, 34);
  position: absolute;
  bottom: 0px;
  right: 6px;
}
.input-float {
  position: absolute;
  bottom: 0;
  left: 20px;
}

.inputs-disp:hover {
  transform: scale(0.94);
}
.inputs-disp:hover .dashed-border {
  opacity: 1;
}


.t-value {
  font-size: 24px;
  font-weight: 500;
}
.t-value-small {
  font-size: 16px;
}
.desc {
  margin-top: 12px;
  margin-left: 3px;
  font-size: 14px;
  text-wrap: none;
}
.c-desc {
  margin-top: -3px;
  word-break: keep-all;
}
.p-desc {
  font-size: 22px;
  margin-right: 6px;
}


.t-blue {
  color: rgb(66, 127, 184);
}
.t-blue2, .plh-blue::placeholder, .plh-blue {
  color: rgb(66, 127, 184);
  font-weight: 500;
}
.t-yellow, .plh-yellow::placeholder, .plh-yellow {
  color: rgb(218, 174, 56);
  font-weight: 500;
}
.t-green {
  color: rgb(32, 212, 107);
}
.t-red {
  color: rgb(223, 67, 93);
}
.t-additional {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 3px;
  margin-top: -4px;
}

.arrow-icon {
  height: 20px;
  width: 20px;
  margin-left: 12px;
  margin-right: 10px;
}

.tradeup-sumup {
  height: 130px;
  width: 500px;
  background-color: rgb(44, 44, 44, 0.6);

  margin-top: 10px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 10px;
  overflow: hidden;
}

.sumup-header {
  position: relative;
  border-bottom: 2px var(--border-basic-color) solid;
  height: 25%;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to left, rgb(112, 38, 250), rgb(131, 0, 131));

}

.sumup-content {
  display: flex;
  height: 75%;
  line-height: 1;
  text-align: center;
}
.sumup-spacing {
  box-sizing: border-box;
  border-left: 1px var(--border-basic-color) solid;
  border-right: 1px var(--border-basic-color) solid;
  height: 100%;
  width: 2px;
}
.sumup-left-panel, .sumup-right-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 4px;
}





.tradeup-shade-red {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,  /* dark color takes more space */
    rgb(202, 36, 36, 0.80) 100%
  );
}
.tradeup-shade-pink {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,
    rgb(146, 0, 146, 0.80) 100%
  );
}
.tradeup-shade-purple {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,
    rgb(125, 48, 226, 0.80) 100%
  );
}
.tradeup-shade-blue {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,
    rgb(34, 80, 206, 0.80) 100%
  );
}
.tradeup-shade-light-blue {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,
    rgb(59, 144, 201, 0.80) 100%
  );
}
.tradeup-shade-gray {
  background: linear-gradient(
    179deg,
    rgb(0, 0, 0, 0.05) 0%,
    rgb(44,44,44, 0.5) 40%,
    rgb(173, 173, 173, 0.80) 100%
  );
}


.card-shade-gold:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(238, 182, 79);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-red:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(238, 62, 62);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-pink:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(211, 23, 248);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-purple:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(138, 75, 255);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-blue:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(66, 84, 245);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-light-blue:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(92, 143, 177);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-gray:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(126 126 126);
  transform: translateY(var(--translate-px));
  z-index: 3;
}
.card-shade-green:hover {
  box-shadow: 0px -3px var(--shadow-size) rgb(7, 126, 13);
  transform: translateY(var(--translate-px));
  z-index: 3;
}


.input-red {
  background-color: rgb(148, 36, 36);
}
.input-pink {
  background-color: rgb(109, 40, 109);
}
.input-purple {
  background-color: rgb(71, 33, 119);
}
.input-blue {
  background-color: rgb(31, 59, 150);
}
.input-light-blue {
  background-color: rgb(38 85 116);
}
.input-gray {
  background-color: rgb(69 69 69);
}
.input-green {
  background-color: rgb(8, 99, 23);
}

.login-disp, .no-records-disp {
  color: rgba(127, 61, 202, 0.295);
  width: 100%;
  height: 100%;
  margin: auto auto;
}
.login-disp div, .no-records-disp div {
  color: rgba(127, 61, 202, 0.295);
  font-size: 50px;
  width: 400px;  
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: text-shadow 0.08s;
}
.login-icon {
  width: 170px;
  height: 170px;
  transition: filter 0.08s;
}

.table-login {
  cursor: pointer;
  transition: background-color 0.2s, filter 0.2s !important;
}
.table-login:hover {
  filter: brightness(1.4);
  background-color: rgba(47, 27, 85, 0.11);
}

/*
.table-login:hover .login-disp div {
  text-shadow: 0px 0px 1px rgba(238, 53, 207, 0.39);
}
.table-login:hover .login-icon {
  filter: drop-shadow(0px 0px 1px rgba(223, 34, 192, 0.904));
}
.table-login:hover {
  background-color: rgba(59, 22, 128, 0.11);
}
.table-login:hover .border-wrapper {
  transform: translateY(-2px);
  box-shadow: 2px 2px 5px white;
}
*/

.tradeup-utility {
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  justify-self: flex-end;
  flex: 1;
  margin-right: 8px;
}
.tradeup-utility > a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}
.tradeup-util-btn-del {
  margin-left: 5px;
}
.tradeup-utility svg {
  height: 18px;
  width: 18px;
  transition: color, 0.08s;
  color: rgb(219, 219, 219);
}

.search-icon:hover {
  color: rgb(40, 179, 40)
}
.edit-icon:hover {
  color: rgb(211, 162, 29)
}
.trashcan-icon:hover {
  color: rgb(216, 51, 51);
}
.edit-summary {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 6px;
  top: 7px;
}
.sumup-input {
  box-sizing: border-box;
  height: 34px;
  width: 156px;
  padding-top: 3px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  background: rgb(94, 30, 94, 0.5);
  text-align: center;
  font-size: 24px;
}
.sumup-input::placeholder {
  font-size: 24px;
}
.tradeup-name {
  border: none;
  background-color: transparent;
  color: rgb(194, 194, 194);
  margin-left: 4px;
  height: 18px;
  text-transform: uppercase;
  width: 200px;
  overflow: visible;
  transition: width 1.2s, opacity 0.1s;
}
.tradeup-name::placeholder {
  color: rgb(194, 194, 194);
  font-size: 16px;
}
.tradeup-name:hover {
  width: 40%;
  opacity: 0.7;
}

.background {
  background-color: rgb(19, 19, 19);
  opacity: 0.85;

  min-height: var(--scroll-height);
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 2;
}

.background2 {
  background-color: rgb(19, 19, 19);
  opacity: 0.85;

  min-height: var(--scroll-height);
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 4;
}
.outcome-confirmation, .del-confirmation {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  background: linear-gradient(rgb(39, 39, 39), rgb(54, 54, 54));
  border-radius: 8px;
  display: flex;
  position: relative;
}

.skin-card-placeholder {
  height: 100%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 14px;
}
.confirmation-info {
  box-sizing: border-box;
  height: 100%;
  flex: 1 0 60%;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  padding-right: 56px;
  padding-top: 6px;
}
.conf-3 {
  margin-top: 16px;
  margin-bottom: 26px;
}
.confirm-btn, .delete-btn, .reset-inputs, .inspect-inputs, .adj-bottom button {
  height: 48px;
  width: 96px;
  background-color: rgb(6, 141, 6);
  border: 2px rgb(194, 194, 194) solid;
  border-radius: 6px;
  color: rgb(216, 216, 216);
  font-size: 16px;
  font-weight: 500;
  box-shadow: 2px 2px 5px rgb(24, 24, 24);
  transition: background-color 0.08s, box-shadow 0.08s, opacity 0.05s;
}
.confirm-btn:active, .delete-btn:active, .reset-inputs:active, .inspect-inputs:active, .adj-bottom button:active {
  opacity: 0.6;
}
.reset-inputs {
  background-color: rgb(125, 36, 160);
  line-height: 1.05;
}
.inspect-inputs {
  line-height: 1.05;
}
.inspect-inputs:hover {
  background-color: rgb(0, 83, 0);
}
.reset-inputs:hover {
  background-color: rgb(87, 23, 112);
}
.confirm-btn:hover, .delete-btn:hover, .adj-bottom button:hover {
  background-color: rgb(9, 97, 9);
}
.adj-undo-btn {
  background-color: rgb(223, 47, 47) !important;
}
.adj-undo-btn:hover {
  background-color: rgb(153, 25, 25) !important;
}

.border-wrapper-conf, .border-wrapper-del, .border-wrapper-history {
  height: 320px;
  min-width: 540px;
  
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 6;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 8px;
  
  background: var(--container-gradient);
  
}

.border-wrapper-del {
  width: 540px;
}
.border-wrapper-history {
  width: 70%;
  height: 680px;
}

.outcomes-window, .outcomes-window-small, .inputs-window, .inputs-window-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 570px;
  background: linear-gradient(rgb(39, 39, 39), rgb(54, 54, 54));
  border: 2px var(--border-basic-color) solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  z-index: 3;
  box-shadow: 2px 2px 5px rgb(48, 48, 48);
}

.inputs-window, .inputs-window-loader {
  height: 470px;
  width: 800px;
}

.outcomes-window-small {
  height: 520px;
  width: 90%;
  max-width: 870px;
}
.outcomes-window {
  height: 640px;
  width: 90%;
  max-width: 1020px;
}

.outcomes-header, .inputs-header, .inputs-header-loader, .history-header {
  position: relative;
  box-sizing: border-box;
  height: 54px;
  width: 100%;
  background: linear-gradient(to left, rgb(112, 38, 250), rgb(131, 0, 131));
  border-bottom: 2px var(--border-basic-color) solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
}


.outcomes-options {
  box-sizing: border-box;
  height: 15%;
  width: 100%;
  border-bottom: 2px var(--border-basic-color) solid;
  padding-bottom: 6px;
}

.outcomes-content, .outcomes-content-small {
  box-sizing: border-box;
  height: calc(85% - 54px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto;
  row-gap: 14px;
  column-gap: 16px;
  padding: 10px;
  padding-bottom: 26px;
}
.outcomes-content-small {
  height: calc(100% - 48px);
}
.inputs-tab, .inputs-tab-loader {
  box-sizing: border-box;
  height: calc(100% - 48px);
  width: 100%;
  display: flex;
}
.inputs-tab-loader {
  align-items: center;
  justify-content: center;
}

.inputs-display-container {
  height: 100%;
  width: 62%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 2px var(--border-basic-color) solid;
}

.inputs-content {
  box-sizing: border-box;
  height: fit-content;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto;
  row-gap: 12px;
  column-gap: 12px;
  padding: 12px 8px;
}
.inputs-info {
  height: 100%;
  width: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 18px;
}

.single-saved-input {
  position: relative;
  height: 120px;
  width: 100px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgb(0, 0, 0);
  transition: 0.08s;
}

.single-saved-input img {
  height: 64px;
  filter: contrast(1.05) brightness(1.05) drop-shadow(2px 2px 3px rgb(17, 17, 17));
  margin-bottom: 6px;
}
.skin-info-main .single-saved-input img {
  height: 87px;
}
.single-saved-input input {
  width: 80%;
  color: rgb(207, 207, 207);
  border: 2px var(--border-basic-color) solid;
  border-radius: 4px;
  text-align: center;
}
.single-saved-input input::placeholder {
  color: rgb(160, 160, 160);
  text-align: center;
}
.shadow-modifier {
  --shadow-size: 5px;
  --translate-px: 2px
}
.add-input-float {
  position: absolute;
  top: 42%;
  left: 20%;
  font-size: 12px;
  font-weight: 500;
  color: rgb(192, 192, 192);
}
.small-card-ranges {
  font-size: 12px;
  color: rgb(180, 180, 180);
  margin-top: 2px;
  margin-bottom: -6px;
}

.green-border {
  border-color: rgb(6, 145, 6);
}

.t-completion {
  font-size: 22px;
  font-weight: 500;
  margin-top: 34px;
  margin-bottom: 30px;
}
.adj-target, .adj-curr, .adj-diff {
  width: 84%;
  height: 50px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  line-height: 0.96;
  display: flex;
}

.adj-target .head, .adj-curr .head,  .adj-target .disp, .adj-curr .disp, .adj-diff .head, .adj-diff .disp{
  width: 120px;
  height: 100%;
  padding: 0px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adj-target .head, .adj-curr .head, .adj-diff .head {
  border-right: 2px var(--border-basic-color) solid;
}
.adj-curr {
  margin: 10px 0px;
}
.adj-diff {
  margin-bottom: 40px;
}


.skin-card {
  height: 250px;
  width: 176px;
  border: 1px var(--border-basic-color) solid;
  border-radius: 6px;
  position: relative;
  overflow: visible;

  box-shadow: 1px 1px 5px rgb(19, 19, 19);
  transition: box-shadow 0.15s, transform 0.15s ease;
}
.outcome-card .skin-float  {
  pointer-events: none;
}
.outcome-card {
  margin-top: 38px;
}
.skin-float {
  height: 40%;
}
.skin-float input {
  height: 25px;
  text-align: center;
  color: white;
  margin-bottom: 2px;
}
.skin-float input::placeholder, .skin-placeholder input::placeholder {
  color: rgb(187, 187, 187);
}
.skin-card input:focus::placeholder{
  opacity: 0.5;
}

.card-shade-gold {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(253, 200, 26) 100%
  );
}
.card-shade-red {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(202, 36, 36) 100%
  );
}
.card-shade-pink {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(146, 0, 146) 100%
  );
}
.card-shade-purple {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(125, 48, 226) 100%
  );
}
.card-shade-blue {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(34, 80, 206) 100%
  );
}
.card-shade-light-blue {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(62 137 187) 100%
  );
}
.card-shade-gray {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(131 131 131) 100%
  );
}
.card-shade-green {
  background: linear-gradient(
    to bottom,
    rgb(44,44,44) 0%,
    rgb(44,44,44) 40%,  /* dark color takes more space */
    rgb(9, 143, 31) 100%
  );
}


.outcome-info {
  display: flex;

  height: 12%;
  width: 100%;

  transform: translateY(calc(-100% - 4px));
  position: absolute;

  background-color: rgb(121, 29, 226);
  border: 1px var(--border-basic-color) solid;
  border-radius: 6px;
}
.outcome-info > div {
  height: 100%;
  border-radius: 6px;
}
.card-info {
  height: 100%;
  width: 100%;
  position: relative;
}
.price-source img {
  height: 100%;
  border-radius: 6px;
}

.outcome-profit {
  box-sizing: border-box;
  flex: 0 1 fit-content;  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 2px;
  border: 1px var(--border-basic-color) solid;
  min-width: 73px;
  max-width: var(--max-width);
  overflow: hidden;
  transition: max-width 0.1s;
}
.outcome-profit:hover {
  transition: max-width 0.3s;
  max-width: 100%;
}



.outcome-chance {
  box-sizing: border-box;
  flex: 1 1 0;  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 2px;
  border: 1px var(--border-basic-color) solid;
  overflow: hidden;
  min-width: 0;
}

.profit-green {
  background-color: rgb(6, 97, 29) !important;
}
.profit-red {
  background-color: rgb(196, 48, 48) !important;
}

.stattrak-display {
  font-size: 0.9rem;
  color: rgb(255, 161, 54);
  position: absolute;
  top: 44%;
  left: 40%;
}

.stattrak-display-small, .souvenir-display-small {
  font-size: 0.9rem;
  color: rgb(255, 161, 54);
  position: absolute;
  top: 48%;
  left: 10%;
  pointer-events: none;
  text-shadow: 1px 1px 2px black;

}
.souvenir-display-small {
  color: rgb(233, 208, 68);
}

.stattrak-option {
  position: relative;
}

.skin-name {
  margin-top: 8px;
  text-align: center;
  line-height: 0.95;
}
.selectable-card p, .skin-name, .placeholder-float-text, .skin-price > div {
  pointer-events: none;
}



.skin-card-image-container {
  position: relative;
  height: 80%;
  width: 95%;
}

.sites-slider {
  display: flex;
  column-gap: 4px;

  margin: 0;
  position: absolute;
  top: 15%;
  left: 148px;
}

.sites-slider-visible, .sites-slider-hidden {
  
  overflow-y: hidden;
  z-index: 2;

  height: calc(20px * 6);
  width: 20px;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;

}
.sites-slider-hidden {
  z-index: 1;
  transform: translateX(-22px);
  transition: transform 0.2s ease, opacity 0.15s;
  opacity: 0;
  pointer-events: none;

}
.sites-slider:hover .sites-slider-hidden {
  pointer-events: all;
  opacity: 1;
  transform: translateX(0px);
}

.skin-image {
  height: 94px;
  position: absolute;
  top: 32px;
  left: 14px;
  pointer-events: none;

  filter: contrast(1.05) brightness(1.05) drop-shadow(2px 2px 3px rgb(17, 17, 17));
}
.collection-image {
  height: 36px;
  position: absolute;
  top: 44%;
  left: 10%;
  filter: contrast(0.95) brightness(0.95) drop-shadow(2px 2px 3px rgb(17, 17, 17));
  pointer-events: none;
}
.case-img {
  height: 48px;
}
.value-container {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 0;
}


.dependable-values input {
  width: 80%;
  height: 20px;
  
  background: none;
  border: none;
}

.dependable-values-gold {
  background-color: rgb(150, 123, 37) ;
}
.dependable-values-red {
  background-color: rgb(124, 34, 34);
}
.dependable-values-pink {
  background-color: rgb(83, 34, 83);
}
.dependable-values-purple {
  background-color: rgb(71, 33, 119);
}
.dependable-values-blue {
  background-color: rgb(29, 57, 134);
}
.dependable-values-light-blue {
  background-color: rgb(41, 93, 128);
}

.dependable-values {
  height: 70px;
  width: 95%;
  
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-bottom: 11px;

  border: 1px var(--border-basic-color) solid;
  border-radius: 5px;
}
.dependable-values-gold {
  border: 1px rgb(97, 97, 97) solid
}

.site-link-btn {
  padding: 0;
  height: 20px;
  border: 1px rgb(177, 177, 177) solid;
  border-radius: 2px;
}
.site-link-btn > img {
  height: 100%;
}
.float-ranges {
  position: absolute;
  top: 130px;
  left: 78px;
  font-size: 0.9rem;
  color: rgb(179, 179, 179);
}

.outcomes-content::-webkit-scrollbar, .outcomes-content-small::-webkit-scrollbar, .card-alternatives::-webkit-scrollbar {
  display: none;
}
.outcomes-content, .outcomes-content-small, .card-alternatives {
  scrollbar-width: none;
}



.outcomes-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 40px;
  font-size: 18px;
}
.options-select {
  font-size: 16px;
  font-weight: 500;
}
.specific-skin-input {
  font-size: 16px;
  font-weight: 500;
  padding-left: 5px;
}


.outcomes-options p {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.outcomes-options input, .outcomes-options select  {
  background-color: rgb(136, 45, 197);
  color: white;
  width: 170px;
  border: 1px var(--border-basic-color) solid;
  border-radius: 3px;

  height: 28px;
}

.skin-card input:hover {
  border: 1px var(--border-basic-color) solid;
  border-radius: 5px;
}
.card-shade-gold input:hover {
  border: 1px rgb(97, 97, 97) solid;
}

.specific-skin-input::placeholder {
  color: rgb(153, 153, 153);
}
.collection-select, .specific-skin-input {
  font-size: 16px;
  font-weight: 500;
  padding-left: 5px;
}
.skin-price {
  height: 60%;
  display: flex;
  justify-content: start;
  margin-top: 2px !important;
}
.skin-price input {
  height: 24px;
  font-size: 1.2rem;
  text-align: center;
  color: rgb(241, 222, 48);
}
.skin-price input::placeholder {
  color: rgb(241, 222, 48);
}

.no-hover:hover {
  transform: none;
  box-shadow: none;
}


.del-content {
  text-align: center;
}
.del-header {
  font-size: 34px;
  font-weight: 500;
}
.del-note {
  font-size: 18px;
  width: 75%;
  line-break:normal;
  margin-top: 20px;
  margin-bottom: 20px;
}
.del-name-disp {
  font-size: 20px;
  margin-bottom: 8px;
}
.inputs-info .disp {
  font-weight: 500;
  font-size: 20px;
}

.checked-mark-icon {
  height: 20px;
  width: 20px;
  color: rgb(14, 160, 14);
  position: absolute;
  bottom: 42%;
  left: 43%;
}
.small-card-close, .small-card-copy {
  height: 14px;
  width: 14px;
  color: rgb(187, 187, 187);
  position: absolute;
  top: 5%;
  right: 8%;
  transition: color 0.08s;
}
.small-card-copy {
  top: 20%;
}
.small-card-close:hover {
  color: rgb(196, 46, 46);
}
.small-card-copy:hover {
  color: rgb(30, 172, 30)
}

.text-green {
  color: rgb(42, 180, 42);
  border: 1px solid rgb(42, 180, 42);
}

.graph-tooltip {
  box-sizing: border-box;
  height: 200px;
  max-width: 160px;
  background-color: rgb(31, 31, 31);
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgb(0, 0, 0);
  font-family: 'Fredoka';
  white-space: normal;     /* allow wrapping */
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
  padding: 0px 3px;
}
.graph-skin-display {
  height: 60%;
  width: 100%;
  text-align: center;
  margin-top: -4px;
}
.tooltip-skin-name {
  margin-bottom: 3px;
  margin-top: 3px;
}
.tooltip-skin-name > div {
  line-height: 1;
}
.graph-skin-display > img {
  width: 70%;
}
.graph-date {
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 11px;
  color: rgb(177, 177, 177);
}
.graph-profit-info {
  width: 88%;
  min-height: 30%;
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
}

.y-axis-legend {
  position: absolute;
  top: 18px;
  left: 14px;
  font-size: 18px;
  font-weight: 500;
  color: rgb(184, 72, 184);
}
.x-axis-legend {
  position: absolute;
  bottom: 24px;
  right: 14px;
  font-size: 18px;
  font-weight: 500;
  color: rgb(128, 86, 206);
}
.non-clickable {
  pointer-events: none;
}

.skin-info-border-wrapper {
  max-width: 880px;
  width: 64%;
  height: 50%;
  
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 10px;
  
  background: var(--container-gradient);
}
.skin-info-container {
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background-color: rgb(51, 51, 51);

  display: flex;
  flex-direction: column;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  position: absolute;
  z-index: 3;

  background: linear-gradient(rgb(39, 39, 39), rgb(54, 54, 54));
  border-radius: 9px;
}
.skin-info-header {
  position: relative;
  height: 13%;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to left, rgb(112, 38, 250), rgb(131, 0, 131));
  border-bottom: 2px var(--border-basic-color) solid;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;

  display: flex;
  flex-direction: column;

  overflow-y: hidden;
  padding: 4px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.info-big {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: -3px;
}
.info-small {
  font-size: 21px;
  font-weight: 500;
}
.skin-info-main {
  height: 71%;
  width: 100%;
}
.skin-info-main-right {
  height: 100%;
  width: 73%;
  overflow: hidden;
}
.skin-info-main-right .right-header {
  height: 10%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  border-bottom: 2px var(--border-basic-color) solid;
}
.skin-info-main-left {
  height: 100%;
  width: 27%;
  border-right: 2px var(--border-basic-color) solid;
}
.card-alternatives {
  box-sizing: border-box;
  height: 90%;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 8px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.skin-info-footer {
  height: 16%;
  width: 100%;
  column-gap: 10px;
  font-size: 18px;

  border-top: 2px var(--border-basic-color) solid;
}
.skin-info-footer input {
  border: 1px var(--border-basic-color) solid;
  border-radius: 5px;
  background-color: rgb(41, 41, 41);
  width: 140px;
  height: 24px;
  font-size: 1.2rem;
  text-align: center;
  color: rgb(241, 222, 48);
  margin-left: 4px;
}
.skin-info-footer input:hover {
  border-color: rgb(192, 192, 192);
}

.skin-info-container .single-saved-input {
  height: 170px;
  width: 130px;
}
.skin-info-container .single-saved-input .small-card-close, .skin-info-container .single-saved-input .small-card-copy {
  display: none;
}
.skin-info-main .small-card-ranges {
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 0px;
}
.skin-info-main .input-float-save {
  margin-top: 4px;
}
.skin-info-main .checked-mark-icon {
  height: 20px;
  width: 20px;
}
.skin-info-main .add-input-float {
  font-size: 14px;
}

.skin-info-footer input::placeholder {
  color: rgb(241, 222, 48);
}
input:focus::placeholder{
  opacity: 0.5;
}


.loader-align {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-outcomes {
  font-size: 38px;
  font-weight: 500;

  color: rgba(126, 42, 175, 0.658);
  text-shadow: 1px 1px 4px rgb(34, 34, 34);
  
  margin-bottom: 26px;
}

.empty-tradeup {
  border-style: dashed;
  border-color: rgb(124, 124, 124);
  background-color: rgba(0, 0, 0, 0.062);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.08s, box-shadow 0.08s, transform 0.08s;
  cursor: pointer;
}
.empty-tradeup-placeholder {
  font-size: 44px;
  font-weight: 600;
  text-align: center;
  color: rgba(165, 99, 190, 0.212);
  /*text-shadow: 2px 2px 3px rgb(22, 22, 22);*/
  text-shadow: 2px 2px 3px rgb(26, 26, 26);
  pointer-events: none;
}
.empty-tradeup:hover {
  box-shadow: 0px 0px 10px rgba(93, 76, 109, 0.801);
  transform: scale(1.005);
  background-color: rgba(75, 20, 100, 0.151);;
}
.empty-tradeup:active {
  box-shadow: 0px 0px 10px rgba(93, 76, 109, 0.801);
  background-color: rgba(109, 41, 141, 0.151);;
}
.premium-rdr {
  height: 290px;
}



.table-content::-webkit-scrollbar, .inputs-display-container::-webkit-scrollbar {
  width: 12px; /* always reserved → no layout shift */
}

/* track always present but invisible */
.table-content::-webkit-scrollbar-track {
  background: transparent;
}

/* thumb hidden by default (fade effect) */
.table-content::-webkit-scrollbar-thumb, .inputs-display-container::-webkit-scrollbar-thumb  {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;

  transition: background-color 200ms ease;
}

/* fade in on hover */
.table-content:hover::-webkit-scrollbar-thumb, .inputs-display-container:hover::-webkit-scrollbar-thumb  {
  background-color: rgba(255, 255, 255, 0.8);
}

/* stronger hover */
.table-content:hover::-webkit-scrollbar-thumb:hover, .inputs-display-container:hover::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* remove arrows */
.table-content::-webkit-scrollbar-button, .inputs-display-container::-webkit-scrollbar-button {
  display: none;
}

.table-content, .inputs-display-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
  transition: scrollbar-color 200ms ease;
}

.table-content:hover, .inputs-display-container:hover {
  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.sum-adj-tab {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 620px;
  width: 90%;
  height: 400px;
  background: linear-gradient(rgb(39, 39, 39), rgb(54, 54, 54));
  border: 2px var(--border-basic-color) solid;
  border-radius: 10px;
  z-index: 3;
}
.sum-adj-header {
  position: relative;
  height: 48px;
  width: 100%;
  background: linear-gradient(to left, rgb(112, 38, 250), rgb(131, 0, 131));
  border-bottom: 2px var(--border-basic-color) solid;
  font-size: 26px;
  font-weight: 600;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
.sum-adj-content {
  
  height: calc(100% - 48px);
  
}
.adj-top {
  width: 100%;
  height: 75%;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 170px 2px 1fr 2px 1fr;
  padding: 10px;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 22px;
  font-weight: 500;
  align-self: center;
  justify-self: center;
}
.adj-bottom {
  width: 96%;
  height: 25%;
  border-top: 2px var(--border-basic-color) solid;
  column-gap: 6px;
}

.sign {
  font-size: 24px;
}
.grid-col {
  display: grid;
  grid-template-rows: 32px 60px 12px 60px 12px 64px;
}
.grid-col > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.question-mark-container {
  position: relative;
  margin-left: 4px;
}
.question-mark-container:hover .icon-popup {
  opacity: 1;
}

.sum-total {
  width: 100%;
  height: 30%;
}
.sum-locked {
  width: 100%;
  height: 30%;
}
.sum-change {
  width: 100%;
  height: 40%;
}

.no-match-disp {
  font-size: 38px;
  font-weight: 500;

  color: rgba(117, 28, 168, 0.658);
  text-shadow: 1px 1px 4px rgb(34, 34, 34);
  
  margin-bottom: 26px;
}

.question-mark-icon, .question-mark-container {
  height: 24px;
  width: 24px;
}

.icon-popup {
  position: absolute;
  z-index: 10;
  top: 30px;
  right: -70px;

  width: 160px;
  height: fit-content;
  border: 2px var(--border-basic-color) solid;
  border-radius: 7px;
  background-color: rgb(39, 39, 39);
  box-shadow: 2px 2px 5px rgb(27, 27, 27);

  padding: 8px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 5;
  font-size: 18px;
}

.arrow-up, .arrow-down {
  height: 20px;
  width: 20px;
  transition: color, 0.08s;
  border: 2px var(--border-basic-color) solid;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgb(27, 27, 27);
}
.adj-input-profit {
  box-shadow: 2px 2px 5px rgb(27, 27, 27);
}
.arrow-down {
  transform: rotate(180deg);
  box-shadow: -2px -2px 5px rgb(27, 27, 27);
}
.arrow-up:hover {
  background-color: rgb(34, 128, 34);;
}
.arrow-down:hover {
  background-color: rgb(197, 44, 44);;
}
.arrow-down:active, .arrow-up:active {
  opacity: 0.7;
}

.grid-col .t-yellow, .grid-col .t-blue {
  font-size: 24px;
}
.grid-col input {
  height: 32px;
  width: 90px;

  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  background-color: rgba(22, 22, 22, 0.397);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-left: 2px;
}
.grid-col-profit input {
  color: rgb(218, 174, 56);
}
.grid-col-profit input::placeholder {
  color: rgb(218, 174, 56);
}
.grid-col-count input {
  color: rgb(66, 127, 184);
}
.grid-col-count input::placeholder {
  color: rgb(66, 127, 184);
}

.adj-spacing {
  height: 100%;
  width: 2px;
  background-color: var(--border-basic-color);
}
.adj-title {
  font-size: 21px;
}


.highlight-el {
padding: 2px 10px;
width: fit-content;
height: fit-content;
margin: auto auto;
}



.window-close .window-close-icon {
  pointer-events: none;
}

.highlight-green {
  border-radius: 6px;
  animation: greenHighlight 1s forwards;
}
@keyframes greenHighlight{
  0% {
    background-color: rgb(1, 139, 1);
  }
  100% {
    background-color: var(--end-background);
  }
}
.highlight-red {
  border-radius: 6px;
  animation: redHighlight 1s forwards;
}
@keyframes redHighlight{
  0% {
    background-color: rgb(156, 28, 12);
  }
  100% {
    background-color: var(--end-background);
  }
}


@media (max-width: 1450px) {
  .tradeup-actions {
    font-size: 15px;
  }
}


@media (max-width: 900px) {
  .login-disp {
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  .tradeup-sumup {
    width: 70%;
  }
}

@media (max-width: 840px)  {
  .page-info .text-container h1 {
    line-height: 1;
    font-size: 36px;
    margin-top: 10px;
  }
  .sumup-left-panel > :first-child, .sumup-right-panel > :first-child {
    font-size: 20px;
  }
  .login-disp > div {
    width: 84% !important;
    font-size: 40px;
  }
  /* SELECT OUTCOME */
  .outcomes-header {
    font-size: 24px;
  }
  .border-wrapper-del {
    min-width: 0;
    width: 80%;
    height: 350px;
  }
  .border-wrapper-history {
    min-width: 0;
    height: 80%;
    width: 90%;
  }
  .history-header {
    font-size: 24px;
  }
  /* SAVED INPUTS */
  .inputs-window {
    height: 660px;
  }
  .inputs-tab {
    flex-direction: column;
  }
  .inputs-info, .inputs-display-container {
    width: 100%;
  }
  .inputs-info {
    height: 50%;
  }
  .inputs-display-container {
    height: 50%;
    overflow: auto;
    border: none;
    border-top: 2px var(--border-basic-color) solid;
  }
  .t-completion {
    margin: 4px 0px;
  }
  .inputs-window {
    width: 90%;
  }
  .inputs-content {
    margin: auto auto;
  }

  .adj-diff {
    margin-bottom: 8px;
  }
  .t-completion {
    margin: 6px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .adj-diff, .adj-curr, .adj-target {
    height: 48px;
    max-width: 300px;
  }
  /* ALTERNATIVES */
  .skin-info-border-wrapper {
    height: 600px;
    width: 90%;
  }
  .skin-info-main-left {
    display: none;
  }
  .skin-info-main-right {
    width: 100%;
  }
  .skin-info-header {
    padding-right: 40px;
  }
  .skin-info-header .info-small {
    line-height: 1;
  }
  .inputs-info .disp {
    width: 150px;
  }
  
}
@media (max-width: 580px) {
  .adj-top {
    grid-template-columns: 30px 2px 1fr 2px 1fr;
  }
  .adj-title {
    display: none;
  }
  .question-mark-container {
    margin: 0;
    padding-right: 8px;
  }
  .border-wrapper-conf {
    max-width: 400px;
    min-width: 0;
    width: 90%;
    height: 620px;
  }
  .outcome-confirmation {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .confirmation-info {
    flex: 1 0 45%;
    padding: 0;
    text-align: center;
    padding-bottom: 40px;
  }
  .skin-card-placeholder {
    margin: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 500px)  {
  .login-disp > div {
    font-size: 32px;
  }
  .shrink-hide {
    display: none;
  }
}