@font-face {
  font-family: avenir-next-regular;
  src: url(AvenirNextLTPro-Regular.otf);
}

:root {

/* --width: 70%; */
--width: 98%;

  --background-color: #111111;
  --panel-background-color: #242631;
  --subpanel-background-color: #353843;
  --text-color: #A6AAAB;
  --link-text-color: #337ab7;
  --bright-text-color: #FF7900;
  
  --main-bg-color: #a9bcbd;
  --table-bg-color: #d6d6d6;
  --stopped-color: #FF0000;
  --progress-color: #0000FF;
  --completed-color: #00CC00;
  
  --main-bg-color: #343843;
  --table-bg-color: #d6d6d6;
  --stopped-color: #FF0000;
  --progress-color: #0000FF;
  --completed-color: #00CC00;
  
  --page-width: calc(100%);
  --two-percent-width-in-pixels: calc(100% / 50);
  --four-percent-width-in-pixels: calc(100% / 25);
  
  --primary-light: #2e2;
  --primary: #2a2;
  --primary-dark: #272;
  --white: #999;
  --greyLight-1: #556;
  --greyLight-2: #124;
  --greyLight-3: #000;
  --greyDark: #000;
  
  --trans-shadow: box-shadow: 3px 3px 10px 1px green, -3px -3px 10px 1px #9000c7;
  
  /*  BUTTONS  */
	.btn {
	/* width: 15rem; width: 5rem;
	height: 4rem; height: 1rem; */
	border-radius: 1rem;
	box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.3s ease;
	margin: auto;
	}
	.btn__primary {
	grid-column: 1/2;
	grid-row: 4/5;
	background: var(--primary);
	box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
	color: var(--greyLight-1);
	}
	.btn__primary:hover {
	color: var(--white);
	}
	.btn__primary:active {
	box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
	}
	.btn__secondary {
	grid-column: 1/2;
	grid-row: 5/6;
	color: var(--greyDark);
	}
	.btn__secondary:hover {
	color: var(--primary);
	}
	.btn__secondary:active {
	box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
	}
	.btn p {
	font-size: 1.6rem;
	}
  
}

* { font-family: "avenir-next-regular"; color: var(--text-color); }
body { background-color: var(--background-color); }
.menu_button { width: 50%; text-align: center; /* border: 1px solid red; */ box-shadow: 3px 3px 10px 1px green, -3px -3px 10px 1px #9000c7; margin: 0.5em auto; font-size: 2em; background: var(--panel-background-color); }
.loadable_game, .transformation_button, .tl_button { background: var(--panel-background-color); box-shadow: 3px 3px 10px 1px green, -3px -3px 10px 1px #9000c7; font-size: 1em; border-radius: 10px; overflow: hidden; }
.loadable_game, .transformation_button, .tl_button { margin: 0.5em auto; padding: 0.5em; }
a:has(> .menu_button) { text-decoration: none; }
.menu_button:active, .loadable_game:active, .transformation_button:active, .tl_button:active { background: var(--subpanel-background-color); color: var(--bright-text-color); }
.menu_button:hover, .loadable_game:hover, .transformation_button:hover, .tl_button:hover { background: var(--subpanel-background-color); }
.call_in_button, .transformation_button, .tl_button { /* line-height: 2em; */ line-height: min(20px, 6vw); }


.red { color: #f00; }
.green { color: #0f0; }
.blue { color: #00f; }
.orange { color: #f90; }
.yellow { color: #ff0; }
.indigo { color: #0cf; }
.violet { color: #f0f; }
.pink { color: #fcc; }
.tan { color: #cc0; }

body { width: 100%; padding: 4px; margin: 0; }
/* img { width: 32px; height: 32px; } */

body { background-color: var(--main-bg-color); }
table { background-color: var(--table-bg-color); }

.plan img { width: 48px; height: 48px; }
img.resource { width: 60px; height: 60px; }
.plan { float: left }
.plan { background-color: #b1badf; margin: 4px; padding: 4px; }
.plan input[type="number"] { margin-left: 4px; }

.image img { width: auto; height: auto; max-width: 600px; }
th, td { text-align: left; vertical-align: top; }
table, div, details { border-radius: 5px; }
/*.actions details { margin-bottom: 16px; border: 1px solid green; }*/ /* looks decent with the green */
form { clear: both; }
select, option, input[type="number"], input[type="text"], textarea, .dt-paging-button { color: #000; }
#rename_chamber_button { margin-left: 4px; }

*[disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; mask-image: url(../images/1x1graydisabled.png); }
table *[disabled] { mask-image: none; background-color: #CCC; }

/* body { display: flex;  justify-content: center; align-items: center; min-height: 100vh; } */
.loading { /* max-width: 50%; */ line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center; z-index: 1000000; width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; background-color: var(--background-color); vertical-align: middle; display: inline-block; }
/* .loading:after { position: fixed; top: 50%; } */
.loading_contents { width: 100vw; position: absolute; left: 0; top: 40%; }
.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block; }
.loading__anim { width: 35px; height: 35px; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); border-radius: 50%; display: inline-block; animation: rotate 600ms infinite linear; }
.loading__anim2 { width: 35px; height: 35px; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); border-radius: 50%; display: inline-block; animation: rotate2 600ms infinite linear; animation-delay: 150ms; }
@keyframes rotate { 
  to {
    transform: rotate(1turn)
  }
}
@keyframes rotate2 { 
  to {
    transform: rotate(-1turn)
  }
}

/* .image_overlay { position: relative; top: -2px; left: -6px; font-size: 70%; } */
img.resource+.image_overlay { position: relative; /*top: -72px;*/top: 0; left: -20px; }

/* alignment */
.resource, .resource_change { text-align: center; }
.gold, .diamonds, .fame, .infamy, .prestige { text-align: center; vertical-align: middle; margin: 0 auto; }
.fame_amount, .fame_range, .infamy_amount, .infamy_range { width: 50%; text-align: center; }
.call_in_button, .call_in_withdrawn, .call_in_reward_gold, .call_in_reward_fame, .call_in_reward_infamy, .call_in_difficulty, .call_in_reward_prestige { text-align: center; }

/* position and shape */
.resources, .resources_change { width: 100%; clear: both; font-size: max(1.8vw, 16px); }
.resource, .resource_change { float: left; width: 20%; height: auto; /* max-height: 128px; max-width: 128px */; }
.gold, .diamonds, .fame, .infamy, .prestige { width: 19.5vw; height: 19.5vw; max-width: 128px; max-height: 128px; }
.diamonds { position: absolute; }
/*.gold::before, .diamonds::before, .fame::before, .infamy::before, .prestige::before { position: relative; margin-left: 2px; }*/
.reward_gold, .reward_fame, .reward_infamy, .reward_prestige { width: 15vw; height: 15vw; }
.call_in_reward_gold, .call_in_reward_fame, .call_in_reward_infamy, .call_in_reward_prestige, .reward_gold, .reward_fame, .reward_infamy, .reward_prestige, .reward_amount { color: #fff; text-shadow: 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black, 1px -1px 3px black; }
.plan_purchase_overlay { color: #fff; text-shadow: 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black, 1px -1px 3px black; position: relative; top: -32px; left: -48px; }
.fame_amount, .fame_range, .infamy_amount, .infamy_range { width: 50%; }
.resources { width: 100%; }
.parameters_2 { height: 10vw; max-height: 128px; max-width: 75%; /* because of the auto button */ }
.auto, .ownauto{ font-size: max(1.8vw, 18px); float: right; text-transform: uppercase; position: relative; top: -10vw; margin: 0 4px -9.5vw 4px; vertical-align: middle; }
.auto img, .ownauto img { width: 10vw; height: 10vw; max-width: 112px; max-height: 112px; }
.ownauto .auto_text { color: gold; }
.auto_text { /*position: relative; top: -1em;*/ vertical-align: text-top; }
.parameters_1 { overflow: hidden; }
.disabled_description { color: red; }
h1, h2, h3, h4 { clear: both; }
h2 { font-size: min(1.5em, 18px); }
.small_resource, .small_image { width: 16px !important; height: 16px !important; }
details { clear: both; }
.failure_quality { color: red !important; }
.weak_quality { color: orange !important; }
.robust_quality { color: green !important; }
.excellent_quality { color: gold !important; }
.information { color: green !important; }
.warning { color: orange !important; }
.fatal_error { color: red !important; }
.insufficient { color: red !important; }
.symmetric { clear: both; width: 100%; text-align: center; }
.align-left, .text-left { text-align: left !important; }
.align-center, .text-center { text-align: center !important; }
.align-right, .text-right { text-align: right !important; }
.image_upload_container_instructions, .document_upload_container_instructions { margin-left: 200px; }
input[type="number"] {
/* input[type="number"][~disabled] { */
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  position: relative;
  text-align: center;
  font-size: 20px;
  width: 80px;
  outline: none;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2067%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%221%22%20x2%3D%2250%22%20y1%3D%2233.5%22%20y2%3D%2233.5%22%20stroke%3D%22%23D8D8D8%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2020)%20rotate(45)%20translate(-25%20-20)%22%20points%3D%2219%2026%2019%2014%2032%2014%22%20stroke%3D%22%23000%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2045)%20rotate(225)%20translate(-25%20-45)%22%20points%3D%2219%2052%2019%2039%2032%2039%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  caret-color: transparent;
}

input[type="number"]::-webkit-inner-spin-button {
/* input[type="number"][~disabled]::-webkit-inner-spin-button {	 */
  -webkit-appearance: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border-width: 0px;
  margin: 0;
  border-left: 1px solid #d8d8d8;
  height: 34px;
  width: 23px;
  cursor: pointer;
}

/* larger than mobile */
@media all and (min-width:768px) {
	.resources { margin-left: 0 !important; }
	.resources { width: 100%; }
}

/* background and their sizes */
.resource, .resource_change, .diamonds { /* background-color: var(--subpanel-background-color); */ text-shadow: 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black, 1px -1px 3px black; }
.gold, .diamonds, .fame, .infamy, .prestige { background-size: cover; }
.gold, .diamonds, .fame, .infamy, .prestige, .call_in_reward_gold, .call_in_reward_fame, .call_in_reward_infamy, .call_in_reward_prestige { color: #fff; }
.gold { background: url('../images/gold.jpeg'); background-size: cover; }
.diamonds { background: url('../images/diamonds.jpeg'); background-size: cover; }
.fame { background: url('../images/fame.jpeg'); background-size: cover; }
.infamy { background: url('../images/infamy.jpeg'); background-size: cover; }
.prestige { background: url('../images/prestige.jpeg'); background-size: cover; }
.call_in_reward_gold { font-size: max(1.8vw, 18px) !important; background: url('../images/gold.jpeg'); background-size: cover; }
.call_in_reward_fame { font-size: max(1.8vw, 18px) !important; background: url('../images/fame.jpeg'); background-size: cover; }
.call_in_reward_infamy { font-size: max(1.8vw, 18px) !important; background: url('../images/infamy.jpeg'); background-size: cover; }
.call_in_withdrawn_text { font-size: max(1.6vw, 10px) !important; }
.call_in_withdrawn_time { font-size: max(1.8vw, 12px) !important; }
.call_in_difficulty { font-size: max(1.7vw, 12px) !important; }
.call_in_reward_prestige { font-size: max(1.8vw, 18px) !important; background: url('../images/prestige.jpeg'); background-size: cover; }
.reward_gold, .reward_fame, .reward_infamy, .reward_prestige { font-size: max(1.8vw, 12px) !important; text-align: center; }
.reward_gold { background: url('../images/gold.jpeg'); background-size: cover; float: left; }
.reward_fame { background: url('../images/fame.jpeg'); background-size: cover; float: left; }
.reward_infamy { background: url('../images/infamy.jpeg'); background-size: cover; float: left; }
.reward_prestige { background: url('../images/prestige.jpeg'); background-size: cover; float: left; }
.transparent { background: url('../images/transparent.png'); }
.disabled_description { clear: both; }
#employee_1 { background: url('../images/employees/employee_1.png'); }
#employee_2 { background: url('../images/employees/employee_2.png'); }
#employee_3 { background: url('../images/employees/employee_3.png'); }
#employee_4 { background: url('../images/employees/employee_4.png'); }

/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
body { background-color: var(--background-color); color: var(--text-color); }
#time, #quests, #time_acceleration, .resources, #business, #chambers, #tutorial, #call_ins, #consultation, #transformation_setup, #transformation_result, #end_of_day, #plans { box-shadow: 3px 3px 10px 1px green, -3px -3px 10px 1px #9000c7; margin: 10px; }
#time, #quests, #time_acceleration, #business, #action { background-color: var(--panel-background-color); }
#time_acceleration { overflow: auto; }
/* #acceleration_one, #acceleration_ten, #acceleration_sixty, #acceleration_sixhundred, #acceleration_threethousandsixhundred { background: url('images/time_acceleration.jpeg'); background-size: cover; } */
.acceleration_selected { /* border: 3px solid green !important; */ background-color: rgba(0, 255, 0, 0.5); color: #fff; }
#chambers { background-color: var(--panel-background-color); }
.chamber, #purchase_chamber_with_gold, #purchase_chamber_with_diamonds { /* background-color: #131; */ box-shadow: inset 5px 5px 10px 3px green, inset -5px -5px 10px 3px #9000c7; } /* want this to be neumorphic indented */
.chamber:hover, #purchase_chamber_with_gold:hover, #purchase_chamber_with_diamonds:hover { box-shadow: inset 3px 3px 10px 1px #9000c7, inset -3px -3px 10px 1px green; }
/* #actions { background-color: var(--panel-background-color); } */
#tutorial, #call_ins, #consultation, #transformation_setup, #transformation_result, #end_of_day { background-color: var(--panel-background-color); }
#call_in_close { background-color: #f57c61; }
#plans { background-color: var(--panel-background-color); }
.plan { background-color: var(--background-color); }
table { background-color: var(--background-color); }
.progress_bar_filled { margin: auto; background-color: var(--progress-color); }
.progress_bar_completed { margin: auto; background-color: var(--completed-color); }
.progress_text { color: #fff; }
#transformation_setup_contents { text-align: center; }
#rename_chamber_button { max-width: 25%; }
body { overflow-x: hidden; }

.tutorial li { list-style: none; }
/*.tutoral_gold { list-style-image: url('images/gold.jpeg'); }*/
/*.tutoral_gold:before{ content: ''; display: inline-block; height: 1em; width: 1em; background-image: url(images/gold.jpeg); background-size: contain; background-repeat: no-repeat; }*/
/*.tutoral_gold:before { content: ''; display: inline-block; height: 32px; width: 32px; list-style-image: url('images/gold.jpeg'); }
.tutoral_gold { list-style-image: url('images/gold.jpeg'); }*/
/*.tutoral_diamonds:before { content: ''; display: inline-block; height: 32px; width: 32px; list-style-image: url('images/diamonds.jpeg'); }
.tutoral_fame:before { content: ''; display: inline-block; height: 32px; width: 32px; list-style-image: url('images/fame.jpeg'); }
.tutoral_infamy:before { content: ''; display: inline-block; height: 32px; width: 32px; list-style-image: url('images/infamy.jpeg'); }
.tutoral_prestige:before { content: ''; display: inline-block; height: 32px; width: 32px; list-style-image: url('images/prestige.jpeg'); }*/

/*.tutorial { text-align: center; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 1000000; }*/
.tutorial_previous, .tutorial_current, .tutorial_next, .tutorial_finish { width: 29%; float: left; height: 3em; vertical-align: bottom; margin: 4px; }
#tutorial_actions, #tutorial_auto { position: fixed; top: 30px; left: 0; z-index: 1000000; box-shadow: 3px 3px 10px 1px green, -3px -3px 10px 1px #9000c7; margin: 10px; background-color: var(--panel-background-color); }
.flashing {
  animation: flashing 2s linear infinite;
}

@keyframes flashing {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*#resources { background-color: #509c93; }
#gold, #diamonds, #fame, #infamy { background-color: #85b3ae; }
#chambers { background-color: #bfc9ca; }
#actions { background-color: #d6d6d6; }
#action { background-color: #e2e2e2; }
#call_in_close { background-color: #f57c61; }
.call_in_button { background-color: #60bbb0; }
.plan_needed { background-color: #b1badf; }
#plans { background-color: #98b4b6; }*/