/*==================== GOOGLE FONTS ====================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*==================== VARIABLES CSS ====================*/

:root {
	--header-height: 3rem;
	/*========== Colors ==========*/
	/* Change favorite color */
	--hue-color: 212;
	/*Purple 250 - Green 142 - Blue 230 - Pink 340*/
	/* HSL color mode */
	--first-color: hsl(var(--hue-color), 100%, 50%);
	--white: #fff;
	--black: #000;
	--grey: #f5f1f1ec;
	--light: #f8f9fa;
	--maron: #a80;
	--red: #e40613;
	--orange: #ffa446;
	--green: #1ecf44;
	--light-hight: #d9e9ff;
	--light-hight-1: rgb(165, 190, 224);
	--first-color-second: hsl(218, 38%, 14%);
	--first-color-alt: hsl(213, 100%, 40%);
	--first-color-lighter: hsl(218, 97%, 28%);
	--title-color: hsl(var(--hue-color), 8%, 15%);
	--text-color: hsl(var(--hue-color), 8%, 45%);
	--text-color-light: hsl(var(--hue-color), 8%, 65%);
	--input-color: hsl(var(--hue-color), 70%, 96%);
	--body-color: #eaf3ff;
	--container-color: var(--white);
	--scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
	--scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
	/*========== Font and typography ==========*/
	--body-font: 'Poppins', sans-serif;
	/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
	--big-font-size: 2rem;
	--h1-font-size: 1.5rem;
	--h2-font-size: 1.25rem;
	--h3-font-size: 1.25rem;
	--normal-font-size: 0.938rem;
	--small-font-size: 0.813rem;
	--smaller-font-size: 0.75rem;
	/*========== Font weight ==========*/
	--font-medium: 500;
	--font-semi-bold: 600;
	--font-bold: 800;
	/*========== Margenes Bottom ==========*/
	/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
	--mb-0-25: 0.25rem;
	--mb-0-5: 0.5rem;
	--mb-0-75: 0.75rem;
	--mb-1: 1rem;
	--mb-1-5: 1.5rem;
	--mb-2: 2rem;
	--mb-2-5: 2.5rem;
	--mb-3: 3rem;
	/*========== z index ==========*/
	--z-tooltip: 10;
	--z-fixed: 100;
	--z-modal: 1000;
}

/* Font size for large devices */

@media screen and (min-width: 968px) {
	:root {
		--big-font-size: 2.5rem;
		--h1-font-size: 2.25rem;
		--h2-font-size: 1.5rem;
		--h3-font-size: 1.25rem;
		--normal-font-size: 1rem;
		--small-font-size: 0.875rem;
		--smaller-font-size: 0.813rem;
	}
}

/*========== Variables Dark theme ==========*/

body.dark {
	--hue-color: 212;
	/* HSL color mode */
	--title-color: hsl(var(--hue-color), 8%, 95%);
	--white: #283046;
	--black: #fff;
	--light: #161d31;
	--light-hight: #555;
	--light-hight-1: rgb(165, 190, 224);
	--first-color-second: hsl(218, 38%, 14%);
	--first-color-alt: hsl(213, 100%, 40%);
	--first-color-lighter: hsl(218, 97%, 28%);
	--text-color: hsl(var(--hue-color), 8%, 75%);
	--input-color: hsl(var(--hue-color), 29%, 16%);
	--body-color: hsl(var(--hue-color), 29%, 12%);
	--container-color: hsl(var(--hue-color), 29%, 16%);
	--scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
	--scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/*==================== BASE ====================*/

* {
	box-sizing: border-box;
	padding: 0px;
	font-family: var(--body-font);
	margin: 0px;
	color: var(--text-color);
}

html {
	scroll-behavior: smooth;
	font-family: var(--body-font);
	color: var(--text-color);
}

body {
	margin: 0;
	font-family: var(--body-font);
	font-size: var(--normal-font-size);
	background-color: var(--body-color);
	color: var(--text-color);
	padding: 0px;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-weight: var(--font-semi-bold);
}

ul {
	list-style: none;
}

a,
a:focus,
a:hover {
	text-decoration: none !important;
	color: inherit !important;
}

img {
	max-width: 100%;
	height: auto;
}

label {
	color: var(--text-color);
}

[v-cloak] {
	display: none !important;
}

.text-italic- {
	font-style: italic !important;
}

.bg-light- {
	background-color: var(--light);
}

.bg-light-1 {
	background-color: #c1dcff;
}

.bg-light-hight- {
	background-color: var(--light-hight);
}

.bg-light-hight-1 {
	background-color: var(--light-hight-1);
}

.bg-tcolor- {
	background-color: var(--text-color);
}

.bg-primary- {
	background-color: var(--first-color) !important;
}

.bg-primary-light- {
	background-color: #d1e8fa !important;
}

.bg-second- {
	background-color: var(--first-color-second) !important;
}

.bg-alt- {
	background-color: var(--first-color-alt) !important;
}

.bg-lighther- {
	background-color: var(--first-color-lighter);
}

.bg-four- {
	background-color: var(--first-color-four) !important;
}

.bg-orange- {
	background-color: var(--orange) !important;
}

.bg-red- {
	background-color: var(--red) !important;
}

.bg-green- {
	background-color: var(--green) !important;
}

.bg-white- {
	background-color: var(--white) !important;
}

.bg-black- {
	background-color: var(--black) !important;
}

.bg-grey- {
    background-color: var(--grey) !important;
}

.border-default- {
	border: 1px solid var(--light-hight-1) !important;
}

.border-black- {
	border: 1px solid var(--black);
}

.bordert-black- {
	border-top: 1px solid var(--black);
}

.borderl-black- {
	border-left: 1px solid var(--black);
}

.borderr-black- {
	border-right: 1px solid var(--black);
}

.borderb-black- {
	border-bottom: 1px solid var(--black);
}

.text-primary- {
	color: var(--first-color) !important;
}

.text-second- {
	color: var(--first-color-second) !important;
}

.text-three- {
	color: var(--first-color-three) !important;
}

.text-black- {
	color: var(--black);
}

.text-justify {
	text-align: justify !important;
}

.text-white- {
	color: var(--white);
}

.text-red- {
	color: var(--red) !important;
}

.text-green- {
	color: var(--green) !important;
}

.text-orange- {
	color: var(--orange);
}

.text-yellow- {
	color: #f1c40f;
}

.text-color- {
	color: var(--text-color) !important;
}

.text-alt- {
	color: var(--first-color-alt) !important;
}

.text-1 {
	font-size: 24px;
}

.text-2 {
	font-size: 22px;
}

.text-3 {
	font-size: 20px;
}

.text-4 {
	font-size: 17px;
}

.text-5 {
	font-size: 14px;
}

.text-6 {
	font-size: 12px;
}

.text-7 {
	font-size: 11px;
}

.text-lighter {
	font-weight: 300;
}

.transition {
	transition: all 0.2s;
}

.set-opacity:hover {
	opacity: 0.8 !important;
}

[x-cloak] {
	display: none !important;
}

.link {
	color: var(--first-color-second);
	font-weight: 500;
}

.fit-content- {
	width: fit-content !important;
}

.w-40 {
	width: 40%  !important;
}

.link:focus,
.link:hover {
	color: var(--first-color);
}

.border-dashed- {
	border-width: 1px;
	border-style: dashed;
}

/*==================== BUTTONS ====================*/

.button {
	display: inline-block;
	background-color: var(--first-color);
	color: var(--white);
	padding: 8px 15px;
	border-radius: 5px;
	border: none;
	color: #fff;
	font-weight: var(--font-medium);
}

.button:hover {
	background-color: var(--first-color-alt);
}

.button-default {
	display: inline-block;
	color: var(--white);
	padding: 8px 15px;
	border-radius: 5px;
	border: none;
	color: #fff;
	font-weight: var(--font-medium);
}

.button-default:hover {
	opacity: 0.8;
}

.button-second- {
	display: inline-block;
	background-color: var(--first-color-second);
	padding: 8px 15px;
	border-radius: 3px;
	border: none;
	color: #fff;
	font-weight: var(--font-medium);
}

.button-second-:hover {
	opacity: 0.9;
}

.btn- {
	display: inline-block;
	border-radius: 5px;
	border: none;
	color: #fff;
	transition: all 0.3s;
	font-weight: var(--font-medium);
}

.btn-:hover {
	opacity: 0.8 !important;
}

.button-outline-danger {
	display: inline-block;
	background-color: var(--white);
	color: var(--red);
	padding: 4px 15px;
	border-radius: 5px;
	border: 1px solid var(--red);
	color: var(--red);
	font-weight: var(--font-medium);
}

.button-outline-danger:hover,
.button-outline-danger:focus {
	background-color: var(--red);
	color: var(--white);
	font-weight: var(--font-medium);
}

.button-outline-primary {
	display: inline-block;
	background-color: var(--white);
	color: var(--first-color);
	padding: 4px 15px;
	border-radius: 5px;
	border: 1px solid var(--first-color);
	font-weight: var(--font-medium);
}

.button-outline-primary:hover,
.button-outline-primary:focus {
	background-color: var(--first-color);
	color: var(--white);
	font-weight: var(--font-medium);
}

/****************** INPUT ******************/

input.form-control-,
select.form-control- {
	border: 0.05px solid #2b0650;
	width: 100%;
	padding: 5px 8px;
	height: 45px;
	font-size: 15px;
	box-shadow: 0px 1px 1px var(--text-color);
	color: var(--text-color);
	border-radius: 5px;
	background-color: #f8f6fa;
	font-family: sans-serif;
	outline-color: var(--black);
}

.form-control-- {
	border: 0.05px solid #2b0650;
	padding: 5px 8px !important;
	height: 45px !important;
	font-size: 15px;
	box-shadow: 0px 1px 1px var(--text-color);
	color: var(--text-color);
	border-radius: 5px;
	background-color: #f8f6fa;
	font-family: sans-serif;
	outline-color: var(--black);
}

textarea.form-control- {
	border: 0.05px solid #f8f6fa;
	padding: 8px 10px;
	width: 100%;
	font-size: 15px;
	background-color: #f8f6fa !important;
	color: var(--text-color);
	border-radius: 1px;
	outline-color: var(--black);
}

input.form-control-:focus,
select.form-control-:focus,
textarea.form-control-:focus {
	border: 1px solid #ccc;
	padding: 8px;
	width: 100%;
	outline-color: var(--first-color-second);
}

.form-control {
	font-size: 14px !important;
	padding: 7px 15px;
}

.error {
	color: red;
	font-size: 14px;
}

.red {
	color: red !important;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.fw-900 {
	font-weight: 900;
}

th,
td {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

td * {
	color: white !important;
}

.text-1 {
	font-size: 24px;
}
.text-2 {
	font-size: 22px;
}
.text-3 {
	font-size: 20px;
}
.text-4 {
	font-size: 14px;
}
.text-5 {
	font-size: 14px;
}
.text-6 {
	font-size: 12px;
}
.text-7 {
	font-size: 10px;
}
.text-8 {
	font-size: 9px;
}
.text-9 {
	font-size: 7px !important;
}

/************* MY OWN CONTAINER ************/

.containe {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.containe {
		width: 100%;
	}
}

@media (min-width: 992px) {
	.containe {
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.containe {
		width: 1200px;
	}
}

@media (min-width: 1400px) {
	.containe {
		width: 1170px;
	}
}

.notyf__message {
	color: white !important;
	font-size: 14px !important;
}

/**************** RESPONSIVE ***************/

@media screen and (max-width: 1200px) {
	.text-1 {
		font-size: 22px;
	}
	.text-2 {
		font-size: 20px;
	}
	.text-3 {
		font-size: 18px;
	}
	.text-4 {
		font-size: 13px;
	}
	.text-5 {
		font-size: 12px;
	}
	.text-6 {
		font-size: 11px;
	}
	.text-7 {
		font-size: 9px;
	}
	.text-8 {
		font-size: 8px;
	}
	.text-9-- {
		font-size: 4px !important;
	}
}

@media screen and (max-width: 992px) {
	.text-1 {
		font-size: 20px;
	}
	.text-2 {
		font-size: 18px;
	}
	.text-3 {
		font-size: 16px;
	}
	.text-4 {
		font-size: 12px;
	}
	.text-5 {
		font-size: 11px;
	}
	.text-6 {
		font-size: 10px;
	}
	.text-7 {
		font-size: 8px;
	}
	.text-8 {
		font-size: 7px;
	}
	.text-9-- {
		font-size: 3px !important;
	}
}

@media screen and (max-width: 768px) {
	.text-1 {
		font-size: 18px;
	}
	.text-2 {
		font-size: 16px;
	}
	.text-3 {
		font-size: 14px;
	}
	.text-4 {
		font-size: 11px;
	}
	.text-5 {
		font-size: 10px;
	}
	.text-6 {
		font-size: 9px;
	}
	.text-7 {
		font-size: 7px;
	}
	.text-8 {
		font-size: 6px;
	}
	.text-9-- {
		font-size: 2px !important;
	}
}

@media screen and (max-width: 576px) {
	.text-1 {
		font-size: 16px;
	}
	.text-2 {
		font-size: 14px;
	}
	.text-3 {
		font-size: 12px;
	}
	.text-4 {
		font-size: 10px;
	}
	.text-5 {
		font-size: 9px;
	}
	.text-6 {
		font-size: 8px;
	}
	.text-7 {
		font-size: 6px;
	}
	.text-8 {
		font-size: 5px;
	}
	.text-9-- {
		font-size: 1px !important;
	}
}