html body{
	background-color: rgb(31 ,34, 39);
	background-size: 100%;
	overflow: hidden;
}
/******************************
* Navbar
******************************/
nav{
	background-color: rgb(26, 29, 33);
}
nav button{
	font-weight: bold !important;
	font-size: 28px !important;
	background: none !important;
	border: none !important;
}
/*****************************/
.btn-primary{
	background: none !important;
	border: none !important;
}
.card{
	background: none !important;
}
table{
	background-color: none;
	box-shadow: none !important;
}
table td{
	padding:0.5rem 0!important;
	vertical-align: middle;
}
table td img{
	vertical-align: auto !important;
}
thead th {
	position: sticky;
	z-index: 1;
	top: 0;
	color: #fff;
	background-color: #1f2227 !important;
}
thead th:after{
	content:'';
	position:absolute;
	left: 0;
	bottom: 0;
	width:100%;
}
tbody td{
	min-width: 4rem;
	color: #fff;
}
tbody th{
	color:#fff;
	vertical-align: middle;
}
tbody th:nth-child(3), tbody td:nth-child(5){
	border-left: 2px solid rgb(39, 42, 47);
	border-right: 2px solid rgb(39, 42, 47);
}
.table > :not(caption) > * > * {
	border-bottom-width: 0px !important;
}
#main-container{
	display:flex;
	flex-direction: column;
	border-radius: 10px;
	padding-top: 0.4rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.4rem;
}
@media (min-width: 576px) { 
	#main-container{
		flex-direction:row;
	}
	#dropdown-crafting-tables{
		min-width: 27rem;
	}
}
#dropdown-crafting-tables{
	width: 30rem;
	padding: .5rem .5rem;
	background-color: #1a1d21;
	max-height: 600px;
	overflow: auto;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
#dropdown-crafting-tables::-webkit-scrollbar {display: none;} /* Hide scrollbar for Chrome, Safari and Opera */
#dropdown-crafting-tables.show{display: flex;}
#dropdown-crafting-tables>label:active,
#dropdown-crafting-tables>label:focus,
#dropdown-crafting-tables>label:hover{
	background: radial-gradient(#69caca 40%,#324a6a);
}
#dropdown-crafting-tables label{
	border-color: #ffffff;
	background: radial-gradient(#547cb3 40%,#324a6a);
}
#dropdown-skills{
	padding:0 !important;
	background-color: #1a1d21;
}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
	color: #fff !important;
	background-color: rgba(144,190,71,1) !important;
	border-color: rgb(29, 37, 15) !important;
  }
.btn-outline-primary {
	color: #979797 !important;
	border: 1px solid transparent !important;
}
#dropdown-plugin-modules{
	min-width: 19rem;
	padding: .5rem .5rem;
	background-color: #1a1d21;
}
#dropdown-plugin-modules label{
	color: #ffffff;
	width: 100%;
	text-align: left;
	border: none;
}
.btn-outline-primary:hover {
	background-color: rgb(144, 190, 71) !important;
	color: white !important;
}
.module span{
	font-weight: bold;
}
.reset{
	color:#ffffff;
	background-color: rgb(217, 83, 79);
}
.card{
	border-radius: 7px;
	background: rgb(52,89,230);
	background: linear-gradient(90deg, rgba(52,89,230,1) 0%, rgba(65,95,209,1) 24%, rgba(46,70,162,1) 75%, rgba(36,57,139,1) 100%);
}

.skill label{background-color: #3c3c3c;}

.dropdown-menu{border: 1px solid #3c3c3c !important;}

th:first-child{
	min-width: 5rem;
}
.lavish img{filter: grayscale(1);}
.lavish.checked img{filter: grayscale(0);}
.mybtns{
	min-height: auto;
	overflow: visible;
}
.btn-group{
	margin-top: .5rem;
}
.ingredient.badge{
	transform: translate(-2px, 26px);
	position: absolute;
	background-color: #3f3f3fa6 !important;
	border: 1px solid #ababab;
	width: 42px;
	border-radius: 6px !important;
}
.buy-pill{
	transform: translate(-4px, 31px);
	position: absolute;
	padding: .15em .15em !important;
}
.sheet{
	overflow-y: auto;
	height: 85vh;
}
.container{
	max-width: 1600px !important;
}
input.buy{
	width: 83%;
	padding: 0.05rem;
	transform: translate(20px, 0px);
	position: absolute;
	background: #404040 !important;
	font: normal normal bold 20px/24px "Comic Sans MS", cursive, sans-serif;
	color: rgba(144,190,71,1) !important;
	display: inline;
}
.nav-input{
	position: absolute;
	transform: translate(-17px, -51px);
}
#profit, #calorie-price, .nav-input, #searchBar{
	color: rgb(144, 190, 71) !important;
	font-weight: bold !important;
	font-size: 29px !important;
	background: rgb(26, 29, 33) !important;
}
#searchBar{
	border: none;
	width: 99%;
}
#profit span, #calorie-price span{
	color: #fff;
}
small{color:#353535}
.form-range::-moz-range-thumb{background-color: #2ab89c !important;}
.form-range::-webkit-slider-thumb{background-color: #2ab89c !important;}
.form-range::-ms-thumb{background-color: #2ab89c !important;}

/* Scroll bar */
/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #2ab89c #DFE9EB;
  }
  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
	width: 23px;
	width: 23px;
  }
  *::-webkit-scrollbar-track {
	border-radius: 13px;
	background-color: #DFE9EB;
  }
  *::-webkit-scrollbar-track:hover {background-color: #1CC2BC;}
  *::-webkit-scrollbar-track:active {background-color: #B8C0C2;}
  *::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: #006575;
  }
  *::-webkit-scrollbar-thumb:hover {background-color: #62A34B;}
  *::-webkit-scrollbar-thumb:active {background-color: #62A34B;}

  .pricetag {
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 22px;
	content: "";
	cursor: pointer;
	margin: -4px 0px 0 22px;
	padding: 10px 10px 10px 12px;
	border: none;
	-webkit-border-radius: 4px 1px 1px 4px;
	border-radius: 4px 1px 1px 4px;
	font: normal normal bold 20px/24px "Comic Sans MS", cursive, sans-serif;
	color: rgba(144,190,71,1);
	text-align: center;
	text-transform: uppercase;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	background: #404040;
	-webkit-box-shadow: 0 5px 0 0 #262626 , 5px 5px 0 0 rgba(38,38,38,1);
	box-shadow: 0 5px 0 0 #262626 , 5px 5px 0 0 rgba(38,38,38,1);
	-webkit-transform: rotateX(1deg) rotateY(180deg) rotateZ(6deg);
	transform: rotateX(1deg) rotateY(180deg) rotateZ(6deg);
  }
  
  .pricetag::before {
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 0;
	width: 30px;
	height: 30px;
	position: absolute;
	content: "";
	cursor: pointer;
	top: 6px;
	right: -16px;
	border: none;
	-webkit-border-radius: 1px 1px 4px;
	border-radius: 1px 1px 4px;
	font: normal medium/normal Arial, Helvetica, sans-serif;
	color: rgba(255,255,255,0.9);
	-o-text-overflow: clip;
	text-overflow: clip;
	background: rgba(64,64,64,1);
	-webkit-box-shadow: 0 6px 0 0 rgba(38,38,38,1);
	box-shadow: 0 6px 0 0 rgba(38,38,38,1);
	text-shadow: none;
	-webkit-transform: rotateY(1deg) rotateZ(-45deg);
	transform: rotateY(1deg) rotateZ(-45deg);
  }
  
  .pricetag::after {
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 2;
	width: 10px;
	height: 10px;
	content: "";
	cursor: pointer;
	top: 18px;
	right: -5px;
	border: none;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font: normal medium/normal Arial, Helvetica, sans-serif;
	color: rgba(255,255,255,0.9);
	-o-text-overflow: clip;
	text-overflow: clip;
	background: rgba(31,34,39,1);
	-webkit-box-shadow: 3px 3px 0 0 rgba(38,38,38,1) inset;
	box-shadow: 3px 3px 0 0 rgba(38,38,38,1) inset;
	text-shadow: none;
	position: absolute;
  }
  .pricetag div{
	transform: rotateY(160deg);
	display: flex;
    flex-direction: row;
	align-items: center;
  }
  .item-container{
	display: flex;
	margin-left: 20px;
  }
  .ingredients-container:first-child{
	padding: 1rem 1rem 1rem 0rem !important;
  }
  .ingredients-container{
	display: flex;
	padding: 1.1rem 1rem !important;
  }
  .market-cost{
	width: 5%;
	text-align: center;
	color: rgb(144, 190, 71);
	font-weight: bold;
 	font-size: 20px;
  }  
  .market-cost::after{
	content: " $";
}
  .recipe-name{
    width: 1px;
    white-space: nowrap;
  }
  .products{
    width: 1px;
    white-space: nowrap;
  }
  .labor{
	width: 6%;
	text-align: center;
  }
  .ingredient_quantity{
	position: absolute;
	transform: translate(-13px, 21px);
	text-shadow: 1px 1px 2px black;
  }
.modal-content{
	border: 1px solid #1c1c1c !important;
}
.modal-footer, .modal-content, .modal-header, .modal-title{
	background-color: rgb(26, 29, 33) !important;
	color: white !important;
}
.modal-footer button{
	color: white !important;
}
#reset{
	background-color: rgb(217, 83, 79) !important;
}

nav > .row::after{
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 2;
	width: 210px;
	height: 10px;
	content: "";
	background: rgba(144,190,71,1);
	position: relative;
	bottom: 0;
}
/*.row {
	width: 100% !important
}*/
#crafting-table div, .module div{
	display: inline;
}

.pricetag.disabled{
	filter: grayscale(1);
}

/* Unifier les styles des inputs de navigation */
.nav-button {
    color: rgb(144, 190, 71) !important;
    font-weight: bold !important;
    font-size: 29px !important;
    background: rgb(26, 29, 33) !important;
}

.nav-button input {
    position: absolute;
    transform: translate(-17px, -51px);
}

.nav-button span {
    color: #fff;
}

/* Appliquer à tous les boutons nav */
#profit, #calorie-price, #searchBar {
    @extend .nav-button;
}

/* Make the About ("?") icon white */
nav .btn-outline-secondary .fa-circle-question { color: #fff !important; }
nav .btn-outline-secondary:hover .fa-circle-question,
nav .btn-outline-secondary:focus .fa-circle-question,
nav .btn-outline-secondary:active .fa-circle-question { color: #fff !important; }