@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$gray-100: #f5f5f5;
$gray-300: #bebebe;
$gray-500: #67707a;
$gray-700: #232f3e;
$gray-900: #161e2d;

$red: #dc2a2a !default;
$yellow: #8d6708 !default;
$green: #1d5240 !default;

$primary: #161e2d;
$success: $green;
$info: $gray-500;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-700;

$warning-light: #fff2e0;
$success-light: #e6f5f1;
$danger-light: #ffe0e0;

$primary-dark: #161e2d;

$secondary: #fcc62c;
$secondary-dark: #fa992c;

$custom-file-text: (
	en: "Browse",
	pt: "Importar arquivo",
);

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
$font-family-sans-serif: "Inter", "Verdana", -apple-system, BlinkMacSystemFont,
	"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
	sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
	"Noto Color Emoji" !default;

$grid-gutter-width: 16px;

$body-color: $gray-900;

$border-radius: 0.25rem;
$border-radius-lg: 0.25rem;

$btn-box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
	rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
	rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

$box-shadow-lg: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
	rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
	rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

$input-btn-padding-y: 0.5rem;
$input-btn-padding-x: 1rem;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

.btn {
	font-weight: bold;
}
.caption {
	font-size: 0.8rem;
}
.gradient {
	background: linear-gradient(90deg, #dcdee1 49.13%, #dcdee1 100%);
	box-shadow: 0px 8px 16px 2px rgba(51, 51, 51, 0.24);
}
.light-background {
	background-color: $gray-100;
	min-height: 100vh;
}
.logo {
	background: url("../public/logo.svg") no-repeat;
	width: 154px;
	height: 33px;
	text-indent: -9999px;
}

.column-title {
	display: flex;
	justify-content: space-between;
	margin: 2rem 0 0.5rem;
}
.card-actions {
	display: flex;
	justify-content: flex-end;
}
.cta {
	border-radius: 0.5rem;
	border: 0;
	color: $primary-dark;
	font-weight: bold;
	padding: 0.5rem 1rem;
	background: linear-gradient(180deg, #ffcc83 0%, #ff9900 100%);
}
.card {
	box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}
.btn-link {
	text-decoration: none;
}
.result-animation {
	display: flex;
	justify-content: center;
	margin: 3rem 0 2rem 0;
}

.mainContainer {
	@extend .d-flex, .justify-content-center, .align-items-center;
	min-height: 90vh;
}

.contentContainer {
	@extend .d-flex, .justify-content-start, .align-items-center;
	border: 1pz solid $gray-300;
	max-width: 60vw;
}

.container-canvas {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

.inference-result {
	margin-left: auto;
	margin-right: auto;
}