:root {
	--color-primary: #3d6df1;
	--color-primary-hover: #26387d;
	--color-primary-soft: #dee9ff;
	--color-primary-soft-hover: #c1d6ff;

	--color-success: #17C653;
	--color-success-hover: #04B440;
	--color-success-soft: #eef8f3;
	--color-success-soft-hover: #def0e7;

	--color-purple: #681ec1;
	--color-purple-hover: #481586;
	--color-purple-soft: #eddfff;
	--color-purple-soft-hover: #dec8fa;

	--color-secondary: #db37b4;
	--color-secondary-hover: #ac298c;
	--color-secondary-soft: #fbebf7;
	--color-secondary-soft-hover: #f8d6f0;

	--color-info: #31d2f2;
	--color-info-hover: #0cb3d5;
	--color-info-soft: #d6f8ff;
	--color-info-soft-hover: #b1eaf6;

	--color-warning: #f19c39;
	--color-warning-hover: #d98631;
	--color-warning-soft: #fef5eb;
	--color-warning-soft-hover: #fcebd7;

	--color-error: #ff0000;
	--color-error-hover: #ba0000;
	--color-error-soft: #fdefeb;
	--color-error-soft-hover: #fbe0d7;

	--color-dark: #1c1c1e;
	--color-dark-hover: #161617;

	--color-gray-100: #f9f9f9;
	--color-gray-200: #f1f1f4;
	--color-gray-300: #dbdfe9;
	--color-gray-400: #c4cada;
	--color-gray-500: #99a1b7;
	--color-gray-600: #78829d;
	--color-gray-700: #4b5675;
	--color-gray-800: #252f4a;
	--color-gray-900: #071437;
}




* {
	margin: 0;
	padding: 0;
}

p {
	margin: 0 !important;
	padding: 0 !important;
}

li {
	list-style: none;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Montserrat', sans-serif;
	background: #f1f1f1;
	color: #000;
}

#body {
	width: 100%;
	height: 100%;
}

html {
	height: 100%;
}

a {
	text-decoration: none !important;
	color: var(--color-primary);
}

a:hover {
	text-decoration: none !important;
}

/* .pg-dark{
	background: #010101;
} */


/* 
	INPUT 
*/
label {
	color: var(--color-gray-700) !important;
	font-size: 14px;
	font-weight: 400;
}

::placeholder {
	color: rgb(127, 127, 129, .5);
	font-weight: 300 !important;
}

input,
select,
textarea,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	border: 1px solid var(--color-gray-400);
	background: var(--color-gray-200);
	color: var(--color-gray-700);

	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 5px !important;
	margin-bottom: 10px !important;

	font-size: 14px;
	font-weight: 450;
	font-family: 'Montserrat', FontAwesome;
}

input[type=date] {
	padding: 9px 12px !important;
}


input[type=color] {
	width: 100% !important;
}


input,
textarea,
input:-webkit-autofill,
textarea:-webkit-autofill {
	width: calc(100% - 24px) !important;
}


select,
select:-webkit-autofill {
	width: 100% !important;
	padding: 9px 12px !important;
}

input:focus,
select:focus,
textarea:focus,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
	outline: none;
	border-color: var(--color-gray-400);
	box-shadow: 0 0 6px var(--color-gray-400);
}

input:hover,
select:hover,
textarea:hover,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover {
	outline: none;
	border-color: var(--color-gray-400);
	box-shadow: 0 0 6px var(--color-gray-400);
}


.inputDisabled {
	outline: none !important;
	pointer-events: none !important;
	border-color: var(--color-gray-400);
}

small,
.small {
	color: var(--color-gray-700);
	font-weight: 500;
	font-size: 11px;
	margin: 0;
}


/* 
	CHECKBOX 
*/
.lblcheckbox {
	position: relative;
	top: 2px !important;
	font-weight: 500;
	font-size: 12px;
}


input[type=checkbox] {
	position: relative;
	cursor: pointer;
	width: 0px !important;
	border: 0px !important;
	padding: 0.70em 0px;
	margin-right: 25px !important;
}

input[type=checkbox]:focus,
input[type=checkbox]:hover {
	outline: none;
	border-color: transparent;
	box-shadow: 0 0 0 0.2rem transparent;
}

input[type=checkbox]:before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	background-color: var(--color-gray-200);
	border: 1px solid var(--color-gray-400);
	border-radius: 5px;
}

input[type=checkbox]:checked:before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	background-color: var(--color-gray-200);
}

input[type=checkbox]:checked:after {
	content: "";
	display: block;
	width: 5px;
	height: 10px;
	border: solid var(--color-gray-700);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 3px;
	left: 8px;
}



/* .dropdown-multipe {
	border: 1px solid #2a2a2c !important;
	background: #2a2a2c !important;
	color: #7f7f81 !important;

	border-radius: 10px !important;
	padding: 5px 6px !important;
	margin-top: 5px !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;

	font-size: 12px !important;
	font-weight: 450 !important;
	letter-spacing: 0.01em !important;
	-webkit-appearance: none !important;
	-webkit-text-fill-color: #7f7f81 !important;
	-webkit-box-shadow: 0 0 0 50px #2a2a2c inset !important;
	font-family: 'Montserrat', FontAwesome !important;
}


.dropdown-multipe .menu {
	border: 0 !important;
	background: #2a2a2c !important;
}

.dropdown-multipe .item {
	border: 0 !important;
	font-size: 12px !important;
}

.dropdown-multipe .label {
	font-size: 12px !important;
} */


/* 
	BUTTONS 
*/
.btn-app {
	border-radius: 10px;
	border: 1px solid var(--color-gray-100);
	background: var(--color-gray-100);
	color: var(--color-gray-900);
	padding: 10px 10px 10px 10px;
	outline: none;
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-app:focus,
.btn-app:hover {
	outline: none;
	border: 1px solid #dfe1e2;
	background: #dfe1e2;
}

.btn-app i {
	margin-right: 5px;
}

.btn-app p {
	font-size: 8px;
	margin-top: 3px !important;
	font-weight: 300;
}

.btn-app-primary {
	background: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
	color: #fff !important;
}

.btn-app-primary:hover,
.btn-app-primary:focus {
	background: var(--color-primary-hover) !important;
	border: 1px solid var(--color-primary-hover) !important;
}

.btn-app-primary-link,
.btn-app-primary-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-primary) !important;
}

.btn-app-primary-link:hover,
.btn-app-primary-link:focus {
	color: var(--color-primary-hover) !important;
}

.btn-app-primary-outline {
	background: transparent !important;
	border: 1px solid var(--color-primary) !important;
	color: var(--color-primary) !important;
}

.btn-app-primary-outline:hover,
.btn-app-primary-outline:focus {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.btn-app-primary-soft {
	background: var(--color-primary-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-primary) !important;
}

.btn-app-primary-soft:hover,
.btn-app-primary-soft:focus,
.btn-app-primary-flat:hover,
.btn-app-primary-flat:focus {
	background: var(--color-primary-soft-hover) !important;
	border: 1px solid var(--color-primary-soft-hover) !important;
}


.btn-app-purple {
	background: var(--color-purple) !important;
	border: 1px solid var(--color-purple) !important;
	color: #fff !important;
}

.btn-app-purple:hover,
.btn-app-purple:focus {
	background: var(--color-purple-hover) !important;
	border: 1px solid var(--color-purple-hover) !important;
}

.btn-app-purple-link,
.btn-app-purple-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-purple) !important;
}

.btn-app-purple-link:hover,
.btn-app-purple-link:focus {
	color: var(--color-purple-hover) !important;
}

.btn-app-purple-outline {
	background: transparent !important;
	border: 1px solid var(--color-purple) !important;
	color: var(--color-purple) !important;
}

.btn-app-purple-outline:hover,
.btn-app-purple-outline:focus {
	background: var(--color-purple) !important;
	color: #fff !important;
}

.btn-app-purple-soft {
	background: var(--color-purple-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-purple) !important;
}

.btn-app-purple-soft:hover,
.btn-app-purple-soft:focus,
.btn-app-purple-flat:hover,
.btn-app-purple-flat:focus {
	background: var(--color-purple-soft-hover) !important;
	border: 1px solid var(--color-purple-soft-hover) !important;
}


.btn-app-secondary {
	background: var(--color-secondary) !important;
	border: 1px solid var(--color-secondary) !important;
	color: #fff !important;
}

.btn-app-secondary:hover,
.btn-app-secondary:focus {
	background: var(--color-secondary-hover) !important;
	border: 1px solid var(--color-secondary-hover) !important;
}

.btn-app-secondary-link,
.btn-app-secondary-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-secondary) !important;
}

.btn-app-secondary-link:hover,
.btn-app-secondary-link:focus {
	color: var(--color-secondary-hover) !important;
}

.btn-app-secondary-outline {
	background: transparent !important;
	border: 1px solid var(--color-secondary) !important;
	color: var(--color-secondary) !important;
}

.btn-app-secondary-outline:hover,
.btn-app-secondary-outline:focus {
	background: var(--color-secondary) !important;
	color: #fff !important;
}

.btn-app-secondary-soft {
	background: var(--color-secondary-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-secondary) !important;
}

.btn-app-secondary-soft:hover,
.btn-app-secondary-soft:focus,
.btn-app-secondary-flat:hover,
.btn-app-secondary-flat:focus {
	background: var(--color-secondary-soft-hover) !important;
	border: 1px solid var(--color-secondary-soft-hover) !important;
}


.btn-app-info {
	background: var(--color-info) !important;
	border: 1px solid var(--color-info) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-info:hover,
.btn-app-info:focus {
	background: var(--color-info-hover) !important;
	border: 1px solid var(--color-info-hover) !important;
}

.btn-app-info-link,
.btn-app-info-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-info) !important;
}

.btn-app-info-link:hover,
.btn-app-info-link:focus {
	color: var(--color-info-hover) !important;
}

.btn-app-info-outline {
	background: transparent !important;
	border: 1px solid var(--color-info) !important;
	color: var(--color-info) !important;
}

.btn-app-info-outline:hover,
.btn-app-info-outline:focus {
	background: var(--color-info) !important;
	color: #fff !important;
}

.btn-app-info-soft {
	background: var(--color-info-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-info) !important;
}

.btn-app-info-soft:hover,
.btn-app-info-soft:focus,
.btn-app-info-flat:hover,
.btn-app-info-flat:focus {
	background: var(--color-info-soft-hover) !important;
	border: 1px solid var(--color-info-soft-hover) !important;
}


.btn-app-success {
	background: var(--color-success) !important;
	border: 1px solid var(--color-success) !important;
	color: #fff !important;
}

.btn-app-success:hover,
.btn-app-success:focus {
	background: var(--color-success-hover) !important;
	border: 1px solid var(--color-success-hover) !important;
}

.btn-app-success-link,
.btn-app-success-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-success) !important;
}

.btn-app-success-link:hover,
.btn-app-success-link:focus {
	color: var(--color-success-hover) !important;
}

.btn-app-success-outline {
	background: transparent !important;
	border: 1px solid var(--color-success) !important;
	color: var(--color-success) !important;
}

.btn-app-success-outline:hover,
.btn-app-success-outline:focus {
	background: var(--color-success) !important;
	color: #fff !important;
}

.btn-app-success-soft {
	background: var(--color-success-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-success) !important;
}

.btn-app-success-soft:hover,
.btn-app-success-soft:focus,
.btn-app-success-flat:hover,
.btn-app-success-flat:focus {
	background: var(--color-success-soft-hover) !important;
	border: 1px solid var(--color-success-soft-hover) !important;
}


.btn-app-warning {
	background: var(--color-warning) !important;
	border: 1px solid var(--color-warning) !important;
	color: #fff !important;
}

.btn-app-warning:hover,
.btn-app-warning:focus {
	background: var(--color-warning-hover) !important;
	border: 1px solid var(--color-warning-hover) !important;
}

.btn-app-warning-link,
.btn-app-warning-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-warning) !important;
}

.btn-app-warning-link:hover,
.btn-app-warning-link:focus {
	color: var(--color-warning-hover) !important;
}

.btn-app-warning-outline {
	background: transparent !important;
	border: 1px solid var(--color-warning) !important;
	color: var(--color-warning) !important;
}

.btn-app-warning-outline:hover,
.btn-app-warning-outline:focus {
	background: var(--color-warning) !important;
	color: #fff !important;
}

.btn-app-warning-soft {
	background: var(--color-warning-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-warning) !important;
}

.btn-app-warning-soft:hover,
.btn-app-warning-soft:focus,
.btn-app-warning-flat:hover,
.btn-app-warning-flat:focus {
	background: var(--color-warning-soft-hover) !important;
	border: 1px solid var(--color-warning-soft-hover) !important;
}


.btn-app-error {
	background: var(--color-error) !important;
	border: 1px solid var(--color-error) !important;
	color: #fff !important;
}

.btn-app-error:hover,
.btn-app-error:focus {
	background: var(--color-error-hover) !important;
	border: 1px solid var(--color-error-hover) !important;
}

.btn-app-error-link,
.btn-app-error-flat {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--color-error) !important;
}

.btn-app-error-link:hover,
.btn-app-error-link:focus {
	color: var(--color-error-hover) !important;
}

.btn-app-error-outline {
	background: transparent !important;
	border: 1px solid var(--color-error) !important;
	color: var(--color-error) !important;
}

.btn-app-error-outline:hover,
.btn-app-error-outline:focus {
	background: var(--color-error) !important;
	color: #fff !important;
}

.btn-app-error-soft {
	background: var(--color-error-soft) !important;
	border: 1px solid #dee9ff !important;
	color: var(--color-error) !important;
}

.btn-app-error-soft:hover,
.btn-app-error-soft:focus,
.btn-app-error-flat:hover,
.btn-app-error-flat:focus {
	background: var(--color-error-soft-hover) !important;
	border: 1px solid var(--color-error-soft-hover) !important;
}


.btn-app-gray-100 {
	background: var(--color-gray-100) !important;
	border: 1px solid var(--color-gray-100) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-100:hover,
.btn-app-gray-100:focus {
	background: var(--color-gray-200) !important;
	border: 1px solid var(--color-gray-200) !important;
}


.btn-app-gray-200 {
	background: var(--color-gray-200) !important;
	border: 1px solid var(--color-gray-200) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-200:hover,
.btn-app-gray-200:focus {
	background: var(--color-gray-300) !important;
	border: 1px solid var(--color-gray-300) !important;
}

.btn-app-gray-300 {
	background: var(--color-gray-300) !important;
	border: 1px solid var(--color-gray-300) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-300:hover,
.btn-app-gray-300:focus {
	background: var(--color-gray-400) !important;
	border: 1px solid var(--color-gray-400) !important;
}

.btn-app-gray-400 {
	background: var(--color-gray-400) !important;
	border: 1px solid var(--color-gray-400) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-400:hover,
.btn-app-gray-400:focus {
	background: var(--color-gray-500) !important;
	border: 1px solid var(--color-gray-500) !important;
}

.btn-app-gray-500 {
	background: var(--color-gray-500) !important;
	border: 1px solid var(--color-gray-500) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-500:hover,
.btn-app-gray-500:focus {
	background: var(--color-gray-600) !important;
	border: 1px solid var(--color-gray-600) !important;
}

.btn-app-gray-600 {
	background: var(--color-gray-600) !important;
	border: 1px solid var(--color-gray-600) !important;
	color: var(--color-gray-900) !important;
}

.btn-app-gray-600:hover,
.btn-app-gray-600:focus {
	background: var(--color-gray-700) !important;
	border: 1px solid var(--color-gray-700) !important;
}

.btn-app-gray-600-link {
	background: #fff !important;
	border: 1px solid #fff !important;
	color: var(--color-gray-600) !important;
}

.btn-app-gray-600-link:hover,
.btn-app-gray-600-link:focus {
	color: var(--color-gray-700) !important;
}

.btn-app-gray-600-outline {
	background: transparent !important;
	border: 1px solid var(--color-gray-600) !important;
	color: var(--color-gray-600) !important;
}

.btn-app-gray-600-outline:hover,
.btn-app-gray-600-outline:focus {
	background: var(--color-gray-600) !important;
	color: var(--color-gray-600) !important;
}


.btn-app-gray-700 {
	background: var(--color-gray-700) !important;
	border: 1px solid var(--color-gray-700) !important;
	color: var(--color-gray-100) !important;
}

.btn-app-gray-700:hover,
.btn-app-gray-700:focus {
	background: var(--color-gray-800) !important;
	border: 1px solid var(--color-gray-800) !important;
}

.btn-app-gray-700-link {
	background: #fff !important;
	border: 1px solid #fff !important;
	color: var(--color-gray-700) !important;
}

.btn-app-gray-700-link:hover,
.btn-app-gray-700-link:focus {
	color: var(--color-gray-800) !important;
}

.btn-app-gray-700-outline {
	background: transparent !important;
	border: 1px solid var(--color-gray-700) !important;
	color: var(--color-gray-700) !important;
}

.btn-app-gray-700-outline:hover,
.btn-app-gray-700-outline:focus {
	background: var(--color-gray-700) !important;
	color: var(--color-gray-700) !important;
}


.btn-app-gray-800 {
	background: var(--color-gray-800) !important;
	border: 1px solid var(--color-gray-800) !important;
	color: var(--color-gray-200) !important;
}

.btn-app-gray-800:hover,
.btn-app-gray-800:focus {
	background: var(--color-gray-900) !important;
	border: 1px solid var(--color-gray-900) !important;
}

.btn-app-gray-800-link {
	background: #fff !important;
	border: 1px solid #fff !important;
	color: var(--color-gray-800) !important;
}

.btn-app-gray-800-link:hover,
.btn-app-gray-800-link:focus {
	color: var(--color-gray-900) !important;
}

.btn-app-gray-800-outline {
	background: transparent !important;
	border: 1px solid var(--color-gray-800) !important;
	color: var(--color-gray-800) !important;
}

.btn-app-gray-800-outline:hover,
.btn-app-gray-800-outline:focus {
	background: var(--color-gray-800) !important;
	color: var(--color-gray-800) !important;
}


.btn-app-primary-link:hover,
.btn-app-primary-flat:focus,
.btn-app-secondary-link:hover,
.btn-app-secondary-flat:focus,
.btn-app-info-link:hover,
.btn-app-info-flat:focus,
.btn-app-success-link:hover,
.btn-app-success-flat:focus,
.btn-app-warning-link:hover,
.btn-app-warning-flat:focus,
.btn-app-error-link:hover,
.btn-app-error-flat:focus {
	background: transparent !important;
	border: 1px solid transparent !important;
}


.btn-app-small {
	font-size: 10px;
	padding: 10.5px 15px;
	font-weight: 600;
}


.btn-app-table {
	font-size: 10px;
	padding: 2px 5px;
	font-weight: 400;
	border-radius: 5px;
}

.btn-app-group {
	display: flex;
}

.btn-app-group .btn-app:first-child {
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}

.btn-app-group .btn-app {
	border-radius: 0px !important;
	margin: 0 !important;
}

.btn-app-group .btn-app:last-child {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	margin-right: 10px !important;
}

.btn-app-small-line {
	font-size: 10px;
	padding: 5px 10px;
}


.btn-reset-margin {
	margin: 0 !important;
	padding: 0 !important;
}

.switch--shadow {
	visibility: hidden;
	position: absolute;
	margin-left: -9999px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0.67em !important;
}

.switch--shadow+label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	user-select: none;
}

.switch--shadow+label {
	padding: 2px;
	width: 40px;
	height: 22px;
	border-radius: 5px;
	margin-top: -15px;
}

.switch--shadow+label:before,
.switch--shadow+label:after {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	content: "";
	background-color: var(--color-gray-300);
}

.switch--shadow+label:before {
	right: 1px;
	border-radius: 5px;
	transition: background 0.s;
}

.switch--shadow+label:after {
	width: 16px;
	height: 16px;
	margin-left: 4px;
	margin-top: 4px;
	background-color: var(--color-error-hover);
	border-radius: 5px;
	transition: all 0.4s;
}

.switch--shadow:checked+label:before {
	background-color: var(--color-gray-300);
}

.switch--shadow:checked+label:after {
	transform: translateX(18px);
	background-color: var(--color-primary);
}

.switch__container p {
	display: inline;
}

.switch {
	display: flex;
	margin-bottom: 10px;
}

.switch-btn {
	flex: 50px;
}

.switch-text {
	flex: calc(100% - 50px);
	padding-top: 10px;
	font-weight: 500;
	font-size: 12px;
	color: var(--color-gray-600) !important;
}

input[type="color"] {
	height: 35px !important;
	padding: 3px 5px;
}


.link {
	color: var(--color-primary);
	cursor: pointer;
}

.link:hover {
	color: var(--color-primary-hover);
}

.link-secondary {
	color: var(--color-secondary);
}

.link-secondary:hover {
	color: var(--color-secondary-hover);
}

.link-info {
	color: var(--color-info);
}

.link-info:hover {
	color: var(--color-info-hover);
}

.link-success {
	color: var(--color-success);
}

.link-success:hover {
	color: var(--color-success-hover);
}

.link-warning {
	color: var(--color-warning);
}

.link-warning:hover {
	color: var(--color-warning-hover);
}

.link-error {
	color: var(--color-error);
}

.link-error:hover {
	color: var(--color-error-hover);
}

.link-purple {
	color: var(--color-purple);
}

.link-purple:hover {
	color: var(--color-purple-hover);
}


.link-white {
	color: #fff;
}

.link-white:hover {
	color: #f2f2f2;
}


/* 
	ALERT 
*/
.alert {
	padding: 15px 15px !important;
	border-radius: 10px;
	background: var(--color-gray-100);
	color: var(--color-gray-900);
	font-size: 14px;
}

.alert-primary {
	background: var(--color-primary);
	color: #fff;
}

.alert-purple {
	background: var(--color-purple);
	color: #fff;
}

.alert-secondary {
	background: var(--color-secondary);
	color: #fff;
}

.alert-info {
	background: var(--color-info);
	color: var(--color-gray-900);
}

.alert-success {
	background: var(--color-success);
	color: #fff;
}

.alert-warning {
	background: var(--color-warning);
	color: #fff;
}

.alert-error {
	background: var(--color-error);
	color: #fff;
}

.alert-gray-100 {
	background: var(--color-gray-100);
	color: var(--color-gray-900);
}

.alert-gray-200 {
	background: var(--color-gray-200);
	color: var(--color-gray-900);
}

.alert-gray-300 {
	background: var(--color-gray-300);
	color: var(--color-gray-900);
}

.alert-gray-400 {
	background: var(--color-gray-400);
	color: var(--color-gray-900);
}

.alert-gray-500 {
	background: var(--color-gray-500);
	color: var(--color-gray-900);
}

.alert-gray-600 {
	background: var(--color-gray-600);
	color: var(--color-gray-900);
}

.alert-gray-700 {
	background: var(--color-gray-700);
	color: var(--color-gray-900);
}

.alert-gray-800 {
	background: var(--color-gray-800);
	color: var(--color-gray-200);
}

.alert-gray-900 {
	background: var(--color-gray-900);
	color: var(--color-gray-200);
}


.alert-primary-soft {
	background: var(--color-primary-soft);
	color: var(--color-primary);

}

.alert-secondary-soft {
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.alert-info-soft {
	background: var(--color-info-soft);
	color: var(--color-info);
}

.alert-success-soft {
	background: var(--color-success-soft);
	color: var(--color-success);
}

.alert-warning-soft {
	background: var(--color-warning-soft);
	color: var(--color-warning);
}

.alert-error-soft {
	background: var(--color-error-soft);
	color: var(--color-error);
}

.alert-purple-soft {
	background: var(--color-purple-soft);
	color: var(--color-purple);
}





/* 
	BACKGROUND 
*/
.bg-primary {
	background: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

.bg-white {
	background: #fff !important;
}

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

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

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

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

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

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

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

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

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


/* 
	TEXT 
*/
.text-primary {
	color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

.text-white {
	color: #FFFFFF !important;
}

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

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

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

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

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

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

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

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

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

/* 
	BADGE 
*/
.badge {
	padding: 4px 7px 4px 7px !important;
	border-radius: 10px;
	background: var(--color-gray-100);
	color: var(--color-gray-900);
	font-size: 10px;
	font-weight: 500;
	margin-right: 5px;
}

.badge-primary {
	background: var(--color-primary) !important;
	color: var(--color-primary-soft) !important;
}

.badge-secondary {
	background: var(--color-secondary) !important;
	color: var(--color-secondary-soft) !important;
}

.badge-info {
	background: var(--color-info) !important;
	color: var(--color-info-soft) !important;
}

.badge-success {
	background: var(--color-success) !important;
	color: var(--color-prisuccessmary-soft) !important;
}

.badge-warning {
	background: var(--color-warning) !important;
	color: var(--color-warning-soft) !important;
}

.badge-error {
	background: var(--color-error) !important;
	color: var(--color-error-soft) !important;
}

.badge-purple {
	background: var(--color-purple) !important;
	color: var(--color-purple-soft) !important;
}

.badge-gray-100 {
	background: var(--color-gray-100) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-200 {
	background: var(--color-gray-200) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-300 {
	background: var(--color-gray-300) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-400 {
	background: var(--color-gray-400) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-500 {
	background: var(--color-gray-500) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-600 {
	background: var(--color-gray-600) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-700 {
	background: var(--color-gray-700) !important;
	color: var(--color-gray-900) !important;
}

.badge-gray-800 {
	background: var(--color-gray-800) !important;
	color: var(--color-gray-200) !important;
}

.badge-gray-900 {
	background: var(--color-gray-900) !important;
	color: var(--color-gray-200) !important;
}

.badge-primary-soft {
	background: var(--color-primary-soft) !important;
	color: var(--color-primary) !important;
}

.badge-secondary-soft {
	background: var(--color-secondary-soft) !important;
	color: var(--color-secondary) !important;
}

.badge-info-soft {
	background: var(--color-info-soft) !important;
	color: var(--color-info) !important;
}

.badge-success-soft {
	background: var(--color-success-soft) !important;
	color: var(--color-success) !important;
}

.badge-warning-soft {
	background: var(--color-warning-soft) !important;
	color: var(--color-warning) !important;
}

.badge-error-soft {
	background: var(--color-error-soft) !important;
	color: var(--color-error) !important;
}

.badge-purple-soft {
	background: var(--color-purple-soft) !important;
	color: var(--color-purple) !important;
}


/* 
	TABLE 
*/
.table-link:hover {
	color: var(--color-primary-hover) !important;
	cursor: pointer;
}

.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 1rem;
	background-color: transparent;

	border-collapse: collapse;
	margin: 0;
	padding: 0;
	table-layout: fixed;
}

.table th {
	padding: 10px 5px;
	vertical-align: top;
	font-size: 14px;
	text-align: left;
	color: #fff;
}

.table td {
	padding: 10px 5px;
	vertical-align: top;
	border-top: 1px solid var(--color-gray-300);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-gray-600);

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.table td:first-child {
	/* border-top: 1px solid transparent; */
}

.table thead th {
	color: var(--color-gray-600);
	vertical-align: bottom;
	border-bottom: 2px solid var(--color-gray-300);
}

.table tbody+tbody {
	border-top: 2px solid var(--color-gray-300);
}

.table .table {
	background-color: #fff;
}

.table img {
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

.table-bordered {
	border: 1px solid var(--color-gray-300);
}

.table-bordered th,
.table-bordered td {
	border: 1px solid var(--color-gray-300);
}

.table-bordered thead th,
.table-bordered thead td {
	border-bottom-width: 2px;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--color-gray-300);
}

.table-hover tbody tr:hover {
	background-color: var(--color-gray-200);
}

.table-active,
.table-active>th,
.table-active>td {
	background-color: var(--color-gray-200);
}

.table-hover .table-active:hover {
	background-color: var(--color-gray-200);
}

.table-hover .table-active:hover>td,
.table-hover .table-active:hover>th {
	background-color: var(--color-gray-200);
}

.table caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
}

.table-child,
.table-child-tr {
	background-color: var(--color-gray-300);
}

.table-child-tr {
	display: none;
}

.table-child table {
	margin-left: 16px;
}


.table-child {
	width: 100%;
	max-width: 100%;
	margin-bottom: 1rem;
	background-color: transparent;

	border-collapse: collapse;
	margin: 0;
	padding: 0;
	table-layout: fixed;
}

.table-child th {
	padding: 10px 5px;
	vertical-align: top;
	font-size: 14px;
	text-align: left;
	color: #fff;
}

.table-child td {
	padding: 10px 5px;
	vertical-align: top;
	border-top: 1px solid var(--color-gray-400);
	font-size: 13px;
	font-weight: 400;
	color: #8d939b;

	white-space: nowrap;
	text-overflow: ellipsis;
}

.table-child thead th {
	vertical-align: bottom;
	border-bottom: 2px solid var(--color-gray-400);
}

.table-child tbody+tbody {
	border-top: 2px solid var(--color-gray-400);
}

.table-child .table {
	background-color: #fff;
}



@media screen and (max-width: 800px) {
	.table {
		border: 0;
	}

	.table caption {
		font-size: 1.3em;
	}

	.table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.table tr {
		background: var(--color-gray-100);
		border: 1px solid var(--color-gray-300);
		display: block;
		margin-bottom: 20px;
		padding: .35em;
		border-radius: 15px;
	}

	.table tr :first-child {
		border-top: 1px solid transparent;
	}

	.table td {
		border-bottom: 1px solid var(--color-gray-200);
		display: block;
		font-size: .8em;
		text-align: right;
		padding: 10px !important;
	}

	.table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.table td:last-child {
		border-bottom: 0;
	}
}















/* 
	GRID 
*/
.show {
	display: block;
}

.hide {
	display: none;
}

.flt-right {
	float: right;
}

.flt-left {
	float: left;
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10 {
	-webkit-box-flex: 0;
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	max-width: auto;
}

.col-1 {
	-ms-flex: 0 0 calc(8.333333% - 10px);
	flex: 0 0 calc(8.333333% - 10px);
	max-width: calc(8.333333% - 10px);
}

.col-2 {
	-ms-flex: 0 0 calc(16.666667% - 10px);
	flex: 0 0 calc(16.666667% - 10px);
	max-width: calc(16.666667% - 10px);
}

.col-3 {
	-ms-flex: 0 0 calc(25% - 10px);
	flex: 0 0 calc(25% - 10px);
	max-width: calc(25% - 10px);
}

.col-4 {
	-ms-flex: 0 0 calc(33.333333% - 10px);
	flex: 0 0 calc(33.333333% - 10px);
	max-width: calc(33.333333% - 10px);
}

.col-5 {
	-ms-flex: 0 0 calc(41.666667% - 10px);
	flex: 0 0 calc(41.666667% - 10px);
	max-width: calc(41.666667% - 10px);
}

.col-6 {
	-ms-flex: 0 0 calc(50% - 10px);
	flex: 0 0 calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.col-7 {
	-ms-flex: 0 0 calc(58.333333% - 10px);
	flex: 0 0 calc(58.333333% - 10px);
	max-width: calc(58.333333% - 10px);
}

.col-8 {
	-ms-flex: 0 0 calc(66.666667% - 10px);
	flex: 0 0 calc(66.666667% - 10px);
	max-width: calc(66.666667% - 10px);
}

.col-9 {
	-ms-flex: 0 0 calc(75% - 10px);
	flex: 0 0 calc(75% - 10px);
	max-width: calc(75% - 10px);
}

.col-10 {
	-ms-flex: 0 0 calc(83.333333% - 10px);
	flex: 0 0 calc(83.333333% - 10px);
	max-width: calc(83.333333% - 10px);
}

.col-11 {
	-ms-flex: 0 0 calc(91.666667% - 10px);
	flex: 0 0 calc(91.666667% - 10px);
	max-width: calc(91.666667% - 10px);
}

.col-12 {
	-ms-flex: 0 0 calc(100% - 10px);
	flex: 0 0 calc(100% - 10px);
	max-width: calc(100% - 10px);
	/* -ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: calc(100% - 10px); */
	padding-left: 5px;
	/* margin-left: 1px; */
}

@media (min-width: 1024px) {
	.col-lg-1 {
		-ms-flex: 0 0 calc(8.333333% - 10px);
		flex: 0 0 calc(8.333333% - 10px);
		max-width: calc(8.333333% - 10px);
	}

	.col-lg-2 {
		-ms-flex: 0 0 calc(16.666667% - 10px);
		flex: 0 0 calc(16.666667% - 10px);
		max-width: calc(16.666667% - 10px);
	}

	.col-lg-3 {
		-ms-flex: 0 0 calc(25% - 10px);
		flex: 0 0 calc(25% - 10px);
		max-width: calc(25% - 10px);
	}

	.col-lg-4 {
		-ms-flex: 0 0 calc(33.333333% - 10px);
		flex: 0 0 calc(33.333333% - 10px);
		max-width: calc(33.333333% - 10px);
	}

	.col-lg-5 {
		-ms-flex: 0 0 calc(41.666667% - 10px);
		flex: 0 0 calc(41.666667% - 10px);
		max-width: calc(41.666667% - 10px);
	}

	.col-lg-6 {
		-ms-flex: 0 0 calc(50% - 10px);
		flex: 0 0 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}

	.col-lg-7 {
		-ms-flex: 0 0 calc(58.333333% - 10px);
		flex: 0 0 calc(58.333333% - 10px);
		max-width: calc(58.333333% - 10px);
	}

	.col-lg-8 {
		-ms-flex: 0 0 calc(66.666667% - 10px);
		flex: 0 0 calc(66.666667% - 10px);
		max-width: calc(66.666667% - 10px);
	}

	.col-lg-9 {
		-ms-flex: 0 0 calc(75% - 10px);
		flex: 0 0 calc(75% - 10px);
		max-width: calc(75% - 10px);
	}

	.col-lg-10 {
		-ms-flex: 0 0 calc(83.333333% - 10px);
		flex: 0 0 calc(83.333333% - 10px);
		max-width: calc(83.333333% - 10px);
	}

	.col-lg-11 {
		-ms-flex: 0 0 calc(91.666667% - 10px);
		flex: 0 0 calc(91.666667% - 10px);
		max-width: calc(91.666667% - 10px);
	}

	.col-lg-12 {
		-ms-flex: 0 0 calc(100% - 10px);
		flex: 0 0 calc(100% - 10px);
		max-width: calc(100% - 10px);
	}
}

[class*="col-"]:last-child {
	padding-right: 0px !important;
}


/**
 * Formatação de texto
 */

.txtUpper {
	text-transform: uppercase !important;
}

.txtLower {
	text-transform: lowercase !important;
}

.txt-center {
	text-align: center !important;
}

.txt-right {
	text-align: right !important;
}

.txt-left {
	text-align: left !important;
}

.txt-bold {
	font-weight: bold !important;
}

.txt-bolder {
	font-weight: bolder !important;
}

.txt-100 {
	font-weight: 100 !important;
}

.txt-200 {
	font-weight: 200 !important;
}

.txt-300 {
	font-weight: 300 !important;
}

.txt-400 {
	font-weight: 400 !important;
}

.txt-500 {
	font-weight: 500 !important;
}

.txt-600 {
	font-weight: 600 !important;
}

.txt-700 {
	font-weight: 700 !important;
}

.txt-800 {
	font-weight: 800 !important;
}

.txt-900 {
	font-weight: 900 !important;
}

.fnt-6 {
	font-size: 6px !important;
}

.fnt-7 {
	font-size: 7px !important;
}

.fnt-8 {
	font-size: 8px !important;
}

.fnt-9 {
	font-size: 9px !important;
}

.fnt-10 {
	font-size: 10px !important;
}

.fnt-11 {
	font-size: 11px !important;
}

.fnt-12 {
	font-size: 12px !important;
}

.fnt-13 {
	font-size: 13px !important;
}

.fnt-14 {
	font-size: 14px;
}

.fnt-15 {
	font-size: 15px;
}

.fnt-16 {
	font-size: 16px;
}

.fnt-17 {
	font-size: 17px;
}

.fnt-18 {
	font-size: 18px;
}

.fnt-19 {
	font-size: 19px;
}

.fnt-20 {
	font-size: 20px;
}

.fnt-21 {
	font-size: 21px;
}

.fnt-22 {
	font-size: 22px;
}

.fnt-23 {
	font-size: 23px;
}

.fnt-24 {
	font-size: 24px;
}

.fnt-25 {
	font-size: 25px;
}

.fnt-26 {
	font-size: 26px;
}

.fnt-27 {
	font-size: 27px;
}

.fnt-28 {
	font-size: 28px;
}

.fnt-29 {
	font-size: 29px;
}

.fnt-30 {
	font-size: 30px;
}

.fnt-31 {
	font-size: 31px;
}

.fnt-32 {
	font-size: 32px;
}

.fnt-33 {
	font-size: 33px;
}

.fnt-34 {
	font-size: 34px;
}

.fnt-35 {
	font-size: 35px;
}

.fnt-40 {
	font-size: 40px;
}

.fnt-45 {
	font-size: 45px;
}

.fnt-50 {
	font-size: 50px;
}

.fnt-60 {
	font-size: 60px;
}

.fnt-70 {
	font-size: 70px;
}

.fnt-80 {
	font-size: 80px;
}

.fnt-90 {
	font-size: 90px;
}

.fnt-100 {
	font-size: 100px;
}

/**
 * Margens
 */
.mg-center {
	margin: 0 auto;
}

.mg-top--25 {
	margin-top: -25px !important;
}

.mg-top--20 {
	margin-top: -20px !important;
}

.mg-top--19 {
	margin-top: -19px !important;
}

.mg-top--18 {
	margin-top: -18px !important;
}

.mg-top--17 {
	margin-top: -17px !important;
}

.mg-top--16 {
	margin-top: -16px !important;
}

.mg-top--15 {
	margin-top: -15px !important;
}

.mg-top--14 {
	margin-top: -14px !important;
}

.mg-top--13 {
	margin-top: -13px !important;
}

.mg-top--12 {
	margin-top: -12px !important;
}

.mg-top--11 {
	margin-top: -11px !important;
}

.mg-top--10 {
	margin-top: -10px !important;
}

.mg-top--9 {
	margin-top: -9px !important;
}

.mg-top--8 {
	margin-top: -8px !important;
}

.mg-top--7 {
	margin-top: -7px !important;
}

.mg-top--6 {
	margin-top: -6px;
}

.mg-top--5 {
	margin-top: -5px !important;
}

.mg-top--4 {
	margin-top: -4px !important;
}

.mg-top--3 {
	margin-top: -3px !important;
}

.mg-top--2 {
	margin-top: -2px !important;
}

.mg-top--1 {
	margin-top: -1px !important;
}

.mg-top-0 {
	margin-top: 0px !important;
}

.mg-top-1 {
	margin-top: 1px !important;
}

.mg-top-2 {
	margin-top: 2px !important;
}

.mg-top-3 {
	margin-top: 3px !important;
}

.mg-top-4 {
	margin-top: 4px !important;
}

.mg-top-5 {
	margin-top: 5px !important;
}

.mg-top-6 {
	margin-top: 6px !important;
}

.mg-top-7 {
	margin-top: 7px !important;
}

.mg-top-8 {
	margin-top: 8px !important;
}

.mg-top-9 {
	margin-top: 9px !important;
}

.mg-top-10 {
	margin-top: 10px !important;
}

.mg-top-11 {
	margin-top: 11px !important;
}

.mg-top-12 {
	margin-top: 12px !important;
}

.mg-top-13 {
	margin-top: 13px !important;
}

.mg-top-14 {
	margin-top: 14px !important;
}

.mg-top-15 {
	margin-top: 15px !important;
}

.mg-top-16 {
	margin-top: 16px !important;
}

.mg-top-17 {
	margin-top: 17px !important;
}

.mg-top-18 {
	margin-top: 18px !important;
}

.mg-top-19 {
	margin-top: 19px !important;
}

.mg-top-20 {
	margin-top: 20px !important;
}

.mg-top-21 {
	margin-top: 21px !important;
}

.mg-top-22 {
	margin-top: 22px !important;
}

.mg-top-23 {
	margin-top: 23px !important;
}

.mg-top-24 {
	margin-top: 24px !important;
}

.mg-top-25 {
	margin-top: 25px !important;
}

.mg-top-26 {
	margin-top: 26px !important;
}

.mg-top-27 {
	margin-top: 27px !important;
}

.mg-top-28 {
	margin-top: 28px !important;
}

.mg-top-29 {
	margin-top: 29px !important;
}

.mg-top-30 {
	margin-top: 30px !important;
}

.mg-top-35 {
	margin-top: 35px !important;
}

.mg-top-40 {
	margin-top: 40px !important;
}

.mg-top-50 {
	margin-top: 50px !important;
}

.mg-top-60 {
	margin-top: 60px !important;
}

.mg-top-70 {
	margin-top: 70px !important;
}

.mg-top-75 {
	margin-top: 75px !important;
}

.mg-top-80 {
	margin-top: 80px !important;
}

.mg-top-85 {
	margin-top: 85px !important;
}

.mg-top-90 {
	margin-top: 90px !important;
}

.mg-top-95 {
	margin-top: 95px !important;
}

.mg-top-100 {
	margin-top: 100px !important;
}

.mg-right-0 {
	margin-right: 0px !important;
}

.mg-right-1 {
	margin-right: 1px !important;
}

.mg-right-2 {
	margin-right: 2px !important;
}

.mg-right-3 {
	margin-right: 3px !important;
}

.mg-right-4 {
	margin-right: 4px !important;
}

.mg-right-5 {
	margin-right: 5px !important;
}

.mg-right-6 {
	margin-right: 6px !important;
}

.mg-right-7 {
	margin-right: 7px !important;
}

.mg-right-8 {
	margin-right: 8px !important;
}

.mg-right-9 {
	margin-right: 9px !important;
}

.mg-right-10 {
	margin-right: 10px !important;
}

.mg-right-15 {
	margin-right: 15px !important;
}

.mg-right-20 {
	margin-right: 20px !important;
}

.mg-right-25 {
	margin-right: 25px !important;
}

.mg-right-30 {
	margin-right: 30px !important;
}

.mg-right-35 {
	margin-right: 35px !important;
}

.mg-right-40 {
	margin-right: 40px !important;
}

.mg-right-45 {
	margin-right: 45px !important;
}

.mg-right-50 {
	margin-right: 50px !important;
}

.mg-bottom-5 {
	margin-bottom: 5px !important;
}

.mg-bottom-10 {
	margin-bottom: 10px !important;
}

.mg-bottom-15 {
	margin-bottom: 15px !important;
}

.mg-bottom-20 {
	margin-bottom: 20px !important;
}

.mg-bottom-30 {
	margin-bottom: 30px !important;
}

.mg-bottom-40 {
	margin-bottom: 40px !important;
}

.mg-bottom-50 {
	margin-bottom: 50px !important;
}

.mg-left-1 {
	margin-left: 1px !important;
}

.mg-left-2 {
	margin-left: 2px !important;
}

.mg-left-3 {
	margin-left: 3px !important;
}

.mg-left-4 {
	margin-left: 4px !important;
}

.mg-left-5 {
	margin-left: 5px !important;
}

.mg-left-6 {
	margin-left: 6px !important;
}

.mg-left-7 {
	margin-left: 7px !important;
}

.mg-left-8 {
	margin-left: 8px !important;
}

.mg-left-9 {
	margin-left: 9px !important;
}

.mg-left-10 {
	margin-left: 10px !important;
}

.mg-left-15 {
	margin-left: 15px !important;
}

.mg-left-20 {
	margin-left: 20px !important;
}

.mg-left-25 {
	margin-left: 25px !important;
}

.mg-left-30 {
	margin-left: 30px !important;
}

.mg-left-35 {
	margin-left: 35px !important;
}

.mg-left-40 {
	margin-left: 40px !important;
}

.mg-left-45 {
	margin-left: 45px !important;
}

.mg-left-50 {
	margin-left: 50px !important;
}

.mg-left-55 {
	margin-left: 55px !important;
}

.mg-left-60 {
	margin-left: 60px !important;
}



/**
 * PADING
 */

.pd-left-1 {
	padding-left: 1px !important;
}

.pd-left-2 {
	padding-left: 2px !important;
}

.pd-left-3 {
	padding-left: 3px !important;
}

.pd-left-4 {
	padding-left: 4px !important;
}

.pd-left-5 {
	padding-left: 5px !important;
}

.pd-left-6 {
	padding-left: 6px !important;
}

.pd-left-7 {
	padding-left: 7px !important;
}

.pd-left-8 {
	padding-left: 8px !important;
}

.pd-left-9 {
	padding-left: 9px !important;
}

.pd-left-10 {
	padding-left: 10px !important;
}

.pd-all-5 {
	padding: 5px !important;
}

.pd-all-10 {
	padding: 10px !important;
}

.pd-all-15 {
	padding: 15px !important;
}

.pd-all-20 {
	padding: 20px !important;
}


.bd-radius-5 {
	border-radius: 5px !important;
}

.bd-radius-10 {
	border-radius: 10px !important;
}

/*
	COTEUDO DE DIV'S OCULTAS NO SISTEMA
*/
#returnData {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
	width: 100% !important;
	cursor: pointer !important;
	z-index: 99999 !important;
}

#returnData p {
	margin: 0;
	padding: 0;
}

#returnAll {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9998 !important;
	background: #fff;
	backdrop-filter: blur(30px);
}

#returnAllBody {
	z-index: 9999 !important;
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
}

#returnAllBody .loader-text {
	text-shadow: 0 0 20px var(--color-gray-400);
	color: var(--color-gray-600) !important;
	font-weight: bolder;
	font-size: 16px;
}


.blur {
	-webkit-filter: blur(3px) !important;
	-moz-filter: blur(3px) !important;
	filter: blur(3px) !important;
	pointer-events: none !important;
}

.blur-modal {
	-webkit-filter: blur(3px) !important;
	-moz-filter: blur(3px) !important;
	filter: blur(3px) !important;
	pointer-events: none !important;
}


.loader {
	position: relative;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--color-primary-hover) 50px, transparent 0),
		linear-gradient(var(--color-gray-700) 50px, transparent 0),
		linear-gradient(var(--color-primary-hover) 50px, transparent 0),
		linear-gradient(var(--color-gray-700) 50px, transparent 0),
		linear-gradient(var(--color-primary-hover) 50px, transparent 0),
		linear-gradient(var(--color-gray-700) 50px, transparent 0);
	background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
	animation: rikSpikeRoll 0.65s linear infinite alternate;
	margin-left: 55px;
}


.loader-modal {
	position: relative;
	width: 100px;
	height: 50px;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--color-primary-hover) 25px, transparent 0),
		linear-gradient(var(--color-gray-700) 25px, transparent 0),
		linear-gradient(var(--color-primary-hover) 25px, transparent 0),
		linear-gradient(var(--color-gray-700) 25px, transparent 0),
		linear-gradient(var(--color-primary-hover) 25px, transparent 0),
		linear-gradient(var(--color-gray-700) 25px, transparent 0);
	background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
	animation: rikSpikeRoll 0.65s linear infinite alternate;
	/* margin-left: 0px; */
}


.cursor-pointer {
	cursor: pointer;
}

@keyframes rikSpikeRoll {
	0% {
		background-size: 10px 3px;
	}

	16% {
		background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px
	}

	33% {
		background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px
	}

	50% {
		background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px
	}

	66% {
		background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px
	}

	83% {
		background-size: 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px
	}

	100% {
		background-size: 10px 3px, 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px
	}
}


/* 
.app-modal {
	background: #FFF;
	position: fixed;
	z-index: 9990;
	display: none;
	box-shadow: 0 0 10px 0px var(--color-gray-400);
	overflow: auto;
}

.app-modal .app-modal-body {
	padding: 15px 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);


}

.app-modal .app-modal-body .app-modal-title {
	border-bottom: 1px solid var(--color-gray-500);
	color: var(--color-primary-hover);
	font-weight: bold;
	padding: 10px;
}

.app-modal .app-modal-body .app-modal-data {
	padding-top: 15px;
	width: 100% !important;
	height: calc(100% - 50px) !important;
	overflow-y: scroll;

}

.app-modal .app-modal-body .app-modal-title-closed {
	position: absolute;
	right: 20px;
	top: 18px;
	color: var(--color-error);
	font-weight: 500;
	padding: 3px 10px 6px 10px;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.app-modal .app-modal-body .app-modal-title-closed:hover {
	color: var(--color-error-hover);
} */


/* 
	MODAL 
*/
.app-modal {
	position: fixed;
	z-index: 9990;
	border-radius: 20px;
	box-shadow: 0 0 10px 0px var(--color-gray-600);
	background: #fff;
	/* max-height: 100%; */
	/* overflow: auto; */
}

.app-modal .app-modal-body {
	padding: 15px 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
}

.app-modal .app-modal-body .app-modal-title {
	padding: 10px 0 15px 0;
	border-bottom: 1px solid var(--color-gray-500);
	color: var(--color-primary-hover);
	font-weight: bold;
	/* width: 100%; */
}

.app-modal .app-modal-body .app-modal-data {
	padding-top: 15px;
	height: calc(100% - 60px);
	width: 100% !important;

	/* overflow-y: scroll; */
}

.app-modal .app-modal-body .app-modal-data-body {
	overflow-y: scroll;
	/* background: orange; */
	width: 100%;
	height: calc(100% - 55px);
}

.app-modal .app-modal-body .app-modal-data-button {
	/* overflow-y: scroll; */
	height: 40px;
	/* background: blue; */
	padding-top: 15px;
}

.app-modal .app-modal-body .app-modal-title-closed {
	position: absolute;
	right: 20px;
	top: 18px;
	color: var(--color-error-hover);
	font-weight: 500;
	padding: 3px 10px 6px 10px;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.app-modal .app-modal-body .app-modal-title-closed:hover {
	/* background: #e3e8ef; */
}

.modal-bg-color {
	/* background: rgba(15, 23, 42, .4) !important;
	pointer-events: none; */
}

@media (max-width: 1023px) {
	.app-modal {
		margin-left: 10px;
		margin-top: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}

	.app-modal-xs {
		height: auto !important;
		top: 10% !important;
		max-height: 80% !important;
		/* overflow: auto; */
	}

	.app-modal-small {
		height: auto !important;
		top: 10% !important;
		max-height: 80% !important;
		/* overflow: auto; */
	}

	.app-modal-md {
		height: auto !important;
		top: 20% !important;
		max-height: 70% !important;
		/* overflow: auto; */
	}

	.app-modal-lg {
		margin-left: 0px;
		margin-top: 0px;
		border-radius: 0px;
		width: 100% !important;
		height: 100% !important;
		/* overflow: auto; */
	}
}

@media (min-width: 1024px) {
	.app-modal {
		margin-left: 20px;
		margin-top: 20px;
		width: calc(100% - 40px);
		height: calc(100% - 40px);
	}

	.app-modal-xs {
		width: 40% !important;
		/* height: auto !important; */
		margin-left: 30% !important;
		top: 20% !important;
		/* height: 100% !important; */
		max-height: 50% !important;
		/* overflow: auto; */
	}

	.app-modal-small {
		width: 50% !important;
		/* height: auto !important; */
		margin-left: 25% !important;
		top: 10% !important;
		/* height: 100% !important; */
		max-height: 70% !important;
		/* overflow: auto; */
	}

	.app-modal-md {
		width: 90% !important;
		height: auto !important;
		margin-left: 5% !important;
		top: 3% !important;
		max-height: 90% !important;
		/* overflow: auto; */
	}

	.app-modal-lg {
		margin-left: 0px;
		margin-top: 0px;
		border-radius: 0px;
		width: 100% !important;
		height: 100% !important;
		/* overflow: auto; */
	}
}



#tabs ul {
	width: 100%;
	border-bottom: 1px solid var(--color-gray-500);
}


#tabs ul li {
	display: inline-block;
	padding: 10px 15px 10px 15px;
	cursor: pointer;
	color: var(--color-gray-800);
}

#tabs ul li:hover,
#tabs ul .active {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#tabs ul li:hover:not(.active){
	background: var(--color-gray-200);
}

#tabs ul .active {
	background: var(--color-gray-300);
}

#tabs .tab-body {
	display: none;
	padding-top: 10px;
	width: 100%;
}

#tabs .active:not(#tabs ul .active) {
	display: block;
}

/* .box-line {
	background: #161617;
	padding: 10px;
	border-radius: 10px;
}


#tabs-chat ul li {
	float: left;
	padding: 0px 25px 10px 25px;
	border-bottom: 4px transparent;
	cursor: pointer;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
}

#tabs-chat ul li:hover,
#tabs-chat ul .active {
	border-bottom: 4px solid #2d78ff;
	color: #2d78ff;
}

#tabs-chat .tab-body {
	clear: both;
	display: none;
	padding-top: 20px;
}

#tabs-chat .active:not(#tabs ul .active) {
	display: block;
}

code {
	background-color: rgb(0, 0, 0, .1);
	padding: 2px;
	border-radius: 5px;
} */


/* #list-data .line {
	background: #1c1c1e;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 1px 1px 2px #000;
	margin-bottom: 15px;
}



#browsers {
	margin-top: -9px;
	overflow-y: auto;
	box-sizing: border-box;
	position: absolute;
	background: #2a2a2c;
	border: 1px solid #2a2a2c;
	border-radius: 0px 0px 10px 10px;
	font-family: sans-serif;
	padding: 10px;
	max-height: 10rem;
	z-index: 99999;
	min-width: calc(100% - 34px);

}

#browsers option {
	padding: 7px 10px !important;
	color: #7f7f81 !important;
	margin-bottom: 1px;
	font-size: 13px;
	cursor: pointer;
	display: block;
	padding: 5px 0;
	border-bottom: 1px solid #1b1b1d;
}

#browsers option:hover {
	color: #fff;
} */