:root{
  --width-header-left:85px;
  --height-header-top:60px;
  --color-header-top:#fff;
  --color-header-left:#2b2b2b;
  --color-header-left-dark:#0b467f;
  --color-header-left-dark-dark:#0a3e71;
  --fundo:#FAF8FB;
  --box_shadow: 0px 0px 14px 0px #e1e1e1;
  --color_main: #EC6C0F;
  --color-main-dark:#d3610d;
  --color-main-light:#f17c27;
  --margin_default: 20px;
  --width-half-input: calc(50% - 30px);
  --width-full-input: calc(100% - 40px);
  --height-input: 43px;
}
body{
  font-family: "Rubik", sans-serif;
  background-color: #f1f1f1;
}
/* Aqui começa os Defaults das páginas */
.bk-ft-kr{
  position: relative;
  background-color: #fff;
  margin-bottom: 40px;
  padding: 0px;
}

.tl-lg-ex{
  position: relative;
  padding: calc(var(--margin_default) / 2) var(--margin_default);
  padding-bottom:0px;
  top:var(--height-header-top);
  left:var(--width-header-left);
  width:calc(100% - var(--width-header-left) - (var(--margin_default) * 6));
  margin: 15px 0px 0px calc(var(--margin_default) * 3);
  display: flex;
  font-size:21px;
  font-weight: bold;
  color:#303030;
}
/* Aqui é o container pai */
.bk-ft-kr-v{
  position: relative;
  top:var(--height-header-top);
  left:var(--width-header-left);
  width:calc(100% - var(--width-header-left) - (var(--margin_default) * 6));
  margin: 10px 0px 0px calc(var(--margin_default) * 3);
  background-color: #fff;
  box-shadow: var(--box_shadow);
  border-radius:5px;
}
/* Aqui é o título da categoria */
.tl-lg{
  position: relative;
  width:100%;
  padding: calc(var(--margin_default) / 2) var(--margin_default);
  display: flex;
  justify-content: space-between;
  border-top:1px solid #e1e1e1;
}
/* Aqui são os estilos de produto por produto */
.ft-et-ps{
  width:300px;
  display: flex;
  justify-content:space-between;
}
.ft-ct-it{
  position: relative;
  width:100%;
  padding-left:var(--margin_default);
  padding-right:var(--margin_default);
  background-color:#f1f1f1;
  border-top:1px solid #d9d9d9;
  overflow: hidden;
  transition:all 0.3s ease;
}
.father_complement_order{
  width:100%;
  padding: 4px 0px;
  font-weight: bold;
  padding-top:10px;
}
.father_options_order{
  width: 100%;
  padding: 4px var(--margin_default);
  padding-bottom:6px;
  display: flex;
  justify-content: space-between;
  border-top:1px solid #c9c9c9;
}
.div_father_additional{
  width:90px;
}
.ft-in-kr{
  width: 100%;
  position: relative;
  display:flex;
  flex-wrap: wrap;
}
/* inputs padroes */
.ft-in-pd-kr{
  position: relative;
  display: inline-flex;
  margin: 8px;
  width: var(--width-full-input);
  height: var(--height-input);
}
.ft-hf-in{
  width: var(--width-half-input);
}
.in-pd-kr{
  border: 1px solid #ccc;
	width: 100%;
	padding: 13px 14px 6px 14px;
	transition: 0.4s;
	background: transparent;
  border-radius: 4px;
}
.in-pd-kr:focus{
  border: 1px solid var(--color_main);
  outline: none;
}
.lb-in-pd-kr{
  position: absolute;
	left: 14px;
	width: max-content;
	max-width: calc(100% - 30px);
	top: 12px;
	color: #aaa;
	background-color: #fff;
	padding: 0px 5px;
	border-radius: 300px;
	transition: 0.3s;
	cursor: text;
}
.in-pd-kr:focus ~ .lb-in-pd-kr,
.in-pd-kr:not(:placeholder-shown) ~ .lb-in-pd-kr{
	position: absolute;
	top: -9px;
	left: 14px;
	font-size: 12px;
	color: var(--color_main);
	transition: 0.3s;
}
/* select */
#categoria{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 50px;
}
#father_categoria::after{
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color_main);
  border-left: 2px solid var(--color_main);
  right: 8%;
  top: 38%;
  pointer-events: none;
  transform: rotate(-135deg);
}
/* input file */
.ft-in-fl-pd{
  width: 170px;
  height: calc(var(--height-input)*3);
}
.ft-txta-pd{
  width: calc(100% - 210px);
  height: calc(var(--height-input)*3);
}
.in-tp-fl{display: none;}
.lb-in-fl{
  padding: 0px;
  width: 100%;
  height: 100%;
  color: #aaa;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lb-in-fl:focus{
  border: 1px solid var(--color_main);
  outline: none;
}
#label_img_product{
  border: 1px solid #ccc;
	width: 100%;
	transition: 0.4s;
	background: transparent;
  border-radius: 4px;
  cursor: copy;
  pointer-events: all;
}
img[id^='preview_img_product']{
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
/* INPUT checkbox  */
.input-checkbox{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	position: relative;
	top: 9px;
	height: 30px;
	width: 30px;
	transition: all 0.15s ease-out 0s;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 0.5rem;
  border-radius: 10px;
	border: 1px solid var(--color_main);
}
.input-checkbox:checked {
	background: #40e0d0;
	background: var(--color_main);
}
.input-checkbox:checked::before {
	height: 40px;
	width: 40px;
	position: absolute;
	left: -6px;
	content: '✔';
	display: inline-block;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
}
.input-checkbox:checked::after {
	background: var(--color_main);
	content: '';
	display: block;
	position: relative;
}
.input-checkbox ~ span {color:var(--color_main);user-select: none}

/* Fim da input padrão */
h2{
  position: relative;
  padding: 8px 0px 4px 0px;
  font-size:32px;
  color:var(--color-header-left);
  font-weight: bold;
  top:var(--height-header-top);
  left:var(--width-header-left);
  margin-left:calc(var(--margin_default) * 3);
  margin-top:11px;
  width:max-content;
}
h3{
  font-size:24px;
  color:var(--color-header-left);
  font-weight: bold;
}
/* Botão padrão */
.bt-pd-kr{
  padding: 10px 40px;
  border:none;
  background-color:var(--color_main);
  color:#fff;
  border-radius:4px;
  box-shadow: 1px 3px 8px 0px #d1d1d1;
  transition:all 0.2s ease;
}
.bt-pd-kr:hover{
  background-color:var(--color-main-dark);
}
.bt-pd-kr:active{
  transform: scale(0.95);
}
.bt-pd-kr:focus{
  outline: none;
}
/* botao circular */
.bt-pd-kr-cr{
  width:34px;
  height:34px;
  border:1px solid var(--color_main);
  color:var(--color_main);
  border-radius:100%;
  transition:all 0.2s ease;
  stroke-width:1.2;
}
.bt-pd-kr-cr:hover{
  color:#fff;
  background-color:var(--color_main);
}
.bt-pd-kr-cr:active{
  transform: scale(0.95);
}
.bt-pd-kr-cr:focus{
  outline: none;
}
/* Botão padrão tabela */
.bt-apr-modal{
  position: relative;
  top:1px;
  background-color:#28a745;
  color:#fff;
  font-size:14px;
  padding:4px 5px;
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
  transition:all 0.3s ease;
}
.bt-apr-modal:hover{
  background-color:#228c3a;
}
.id_insert_provider{
  background-color: #6c757d;
  color:#fff;
  padding:4px 7px;
  border-radius: 4px;
  font-size:16px;
}
.button_modal_status_restaurante{
  width:240px;
  padding:4px 6px;
  border-radius: 4px;
  color:#fff;
  cursor:pointer;
}
.button_modal_status_restaurante:hover{
  filter: brightness(90%);
}
label{ pointer-events: none; }