/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Modal
	------------------------------------------------------------------------------------------------------------------------------------------------
*/

	.components_modal {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 200;
	}

	.components_modal--overlay {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .8);
		animation: components_modal__overlay 1s;
	}

	@keyframes components_modal__overlay {
		0% {
			background-color: rgba(0, 0, 0, .7);
		}
		100% {
			background-color: rgba(0, 0, 0, .8);
		}
	}

	.components_modal--display {
		background-color: transparent;
		position: absolute;
		overflow: auto;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}







	.components_modal--content {
		margin-bottom: var(--top);
		background-color: white;
		margin-top: var(--top);
		flex-direction: column;
		position: relative;
		overflow: hidden;
		display: flex;
		--top: 40px;
		border-radius: 4px;
		box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 90%);
		animation: components_modal__content__animation 2s;
	}

	@keyframes components_modal__content__animation {
		0% {
			margin-top: 0px;
		}
		100% {
			margin-top: var(--top);
		}
	}


	.components_modal--content__all_height {
		height: calc(100% - (var(--top) * 2));
	}




	.components_modal--content__left{
		margin-right: auto;
		margin-left: 0px;
	}

	.components_modal--content__center{
		margin-left: auto;
		margin-right: auto;
	}

	.components_modal--content__right{
		margin-left: auto;
		margin-right: 0px;
	}


	.components_modal--content__small{
		width: min(100%, 400px);
	}

	.components_modal--content__small_600{
		width: min(100%, 600px);
	}

	.components_modal--content__medium{
		width: min(100%, 1000px);
	}

	.components_modal--content__medium_1200{
		width: min(100%, 1200px);
	}

	.components_modal--content__medium_1300{
		width: min(100%, 1500px);
	}

	.components_modal--content__large{
		width: 95%;
	}

	.components_modal--content__complete{
		width: 100%;
	}



	.components_modal--header {
		align-items: center;
		display: flex;
		min-height: 60px;
		padding: 10px 20px;
		margin-bottom: 10px;
		box-shadow: 2px 0px 10px 0px rgb(0 0 0 / 20%);
	}

	@media (max-width: 500px) {
		.components_modal--header {
			flex-direction: column;
		}
	}

	.components_modal--header--title {
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.components_modal--header--buttons {
		justify-content: flex-end;
		display: flex;
		width: 100%;
	}

	.components_modal--body {
		overflow-y: auto;
		flex: auto;
		padding: 15px;
	}

	.components_modal--footer {
		min-height: 60px;
		padding: 10px 20px;
		background-color: #eceff1;
		border-top: 1px solid #cfd8dc;
	}

/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Modal
	------------------------------------------------------------------------------------------------------------------------------------------------
*/









/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Alert
	------------------------------------------------------------------------------------------------------------------------------------------------
*/

	.components_alert{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 200;

		justify-content: center;
		align-items: flex-start;
		display: flex;
	}

	.components_alert--overlay{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
	}

	.components_alert--content {
		background-color: white;
		/*position: fixed;*/
		height: auto;
		top: 0px;
		z-index: 20;
		/*width: 500px;*/
		padding: 25px;
		border-radius: 4px;
		/*left: calc(50% - 250px);*/
		animation: components_alert__content__animation 2s;
		-webkit-box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 50%);

		position: relative;
		left: 0px;
		width: min(500px, 100%);
	}

	@keyframes components_alert__content__animation {
		0%{
			top: -20px;
		}
		100%{
			top: 0px;
		}
	}

	.components_alert--content--text {
		margin-bottom: 15px;
	}

	.components_alert--content--controllers {
		justify-content: flex-end;
		display: flex;
		padding: 5px 10px;
	}

	.components_alert--content--controllers--btn{
		display: inline-block;
		cursor: pointer;
		padding: 10px;
		padding-top: 7px;
		margin-right: 10px;
		border-radius: 4px;
		padding-bottom: 7px;
		-webkit-box-shadow: 2px 2px 5px 1px rgb(0 0 0 / 30%);
	}

	.components_alert--content--controllers--btn__accept{
		color: #4560CC;
		margin-right: 0px;
	}



	.components_prompt--title {
		font-weight: bold;
	}

	.components_prompt--item {
		margin-top: 10px;
	}

	.components_prompt--input{
		display: block;
		outline: none;
		border: none;
		width: 100%;
		height: 30px;
		margin-top: 10px;
		padding: 0px 5px;
		border-radius: 4px;
		box-shadow: 2px 2px 5px 1px rgb(0 0 0 / 20%);
	}

/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Alert
	------------------------------------------------------------------------------------------------------------------------------------------------
*/







/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Toast
	------------------------------------------------------------------------------------------------------------------------------------------------
*/


	.components_toast--container {
		position: fixed;
		height: auto;
		z-index: 5000;
	}

	.components_toast--container__top_left {
		top: 0px;
		left: 0px;
		height: 0px;
	}

	.components_toast--container__top_right {
		top: 0px;
		right: 0px;
		height: 0px;
	}

	.components_toast--container__bottom_left {
		left: 0px;
		width: 0px;
		bottom: 0px;
	}

	.components_toast--container__bottom_right {
		right: 0px;
		bottom: 0px;
	}

	.components_toast--item {
		text-overflow: ellipsis;
		margin: var(--margin);
		align-items: center;
		position: relative;
		overflow: hidden;
		display: flex;
		min-height: 55px;
		padding: 10px 20px;
		border-radius: 4px;
		width: min(300px, 100vw - 20px);
		transition: margin 1000ms ease-in-out;
		box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 45%);
		animation: components_toast__transition_item 1s;
	}

	.components_toast--container__top_left .components_toast--item {
		--margin: 20px 0px 0px 20px;
	}

	.components_toast--container__top_right .components_toast--item {
		--margin: 20px 20px 0px 0px;
	}

	.components_toast--container__bottom_left .components_toast--item {
		--margin: 0px 0px 20px 20px;
	}

	.components_toast--container__bottom_right .components_toast--item {
		--margin: 0px 20px 20px 0px;
	}

	.components_toast--item__info {
		color: white; 
		background-color: #1374e2;
	}

	.components_toast--item__error {
		color: white;
		background-color: #f33535;
	}

	.components_toast--item__warning {
		background-color: #ffd600;
	}

	.components_toast--item__success {
		background-color: #8fca00;
	}

	@keyframes components_toast__transition_item {
		0% {
			margin: 0px;
		}
		100% {
			margin: var(--margin);
		}
	}

	.components_toast--item__clossing {
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}

/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Toast
	------------------------------------------------------------------------------------------------------------------------------------------------
*/






/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	ContextMenu
	------------------------------------------------------------------------------------------------------------------------------------------------
*/

	.components_contextmenu {
		background-color: white;
		position: fixed;
		overflow: auto;
		z-index: 5000;
		max-width: 100%;
		min-height: 10px;
		max-height: 100%;
		padding: 10px 0px;
		border-radius: 1px;
		width: min(100%, 245px);
		box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .2);
	}

	.components_contextmenu__dark-mode{
		color: #e2e1e1;
		background-color: #2e2e2e;
	}

	.components_contextmenu:focus {
		outline: none;
	}

	.components_contextmenu--item {
		cursor: pointer;
		display: block;
		font-size: .8rem;
		padding: 10px 15px;
	}

	.components_contextmenu--item:hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.components_contextmenu__dark-mode .components_contextmenu--item:hover{
		background-color: rgba(0, 0, 0, .5);
	}


/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	ContextMenu
	------------------------------------------------------------------------------------------------------------------------------------------------
*/






/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Button
	------------------------------------------------------------------------------------------------------------------------------------------------
*/

	.components_button {
		position: relative;
		overflow: hidden;
	}

	.components_button--text {
	}

	.components_button--state {
		justify-content: center;
		align-items: center;
		position: absolute;
		display: flex;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

	.components_button--state__loading {
		animation: components_button__state__loading 1.2s infinite linear;
	}

	@keyframes components_button__state__loading {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Button
	------------------------------------------------------------------------------------------------------------------------------------------------
*/




/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Button
	------------------------------------------------------------------------------------------------------------------------------------------------
*/

	.components_autocomplete {
		position: absolute;
		background: white;
		padding: 0px;
		z-index: 20000;
		margin: 5px 0px;
		border-radius: 4px;
		box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 30%);
	}

	.components_autocomplete li{
		list-style: none;
		cursor: pointer;
		padding: 5px 10px;
	}

/*
	------------------------------------------------------------------------------------------------------------------------------------------------
	Button
	------------------------------------------------------------------------------------------------------------------------------------------------
*/