/* ========== Dialog ========== */

.dialog-root,
.dialog-root .dialog-component,
.dialog-root .dialog-component>* {
	transition: 0.175s ease-in-out;
	-webkit-transition: 0.175s ease-in-out;
}

.dialog-root {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* height: calc(var(--vh) * 100); */
	height: 100vh;
	pointer-events: none;
	z-index: 99;
}

.dialog-root.active {
	pointer-events: all;
}

.dialog-root .dialog-component {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.75);
	pointer-events: none;
	z-index: 99;
}

.dialog-root .dialog-component.active {
	opacity: 1;
	pointer-events: auto;
}

.dialog-root .dialog-component.transparent {
	background-color: transparent;
	pointer-events: none !important;
}

.dialog-root .dialog-component>* {
	position: absolute;
	width: 400px;
	opacity: 0;
	border-radius: 15px;
	background-color: #222130;
	overflow: hidden;
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transition: 0.125s ease-in-out;
	-webkit-transition: 0.125s ease-in-out;
}

.dialog-root .dialog-component.active>* {
	max-height: 90vh;
	opacity: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
}

/* General */

.dialog-root button {
	color: var(--text-color);
	font-family: "Poppins", sans-serif;
	cursor: pointer;
}

.dialog-root button.primary {
	padding: 15px 8px;
	font-size: 16px;
	font-weight: 500;
	/* background-color: #7a62db; */
	background: linear-gradient(45deg, #a27de1, #7f73e3);
	transition: 0.075s ease-in-out;
	-webkit-transition: 0.075s ease-in-out;
}

.dialog-root button.primary:hover {
	/* background-color: #6752bd; */
	background: linear-gradient(45deg, #9a77d5, #7166cd);
}

.dialog-root button.primary:active {
	/* background-color: #b0a1ee; */
	background: linear-gradient(45deg, #c5a2ff, #b0a6ff);
	transition: 0.02s;
}

.dialog-root .message {
	font-weight: 300;
	font-size: 15px;
	opacity: 0.8;
	word-break: break-word;
	/* overflow: auto; */
}

.dialog-root .wrapper {
	padding: 25px 20px;
	text-align: center;
	overflow: auto;
}

/* Select Dialog */

.dialog-root .select {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

.dialog-root .select .list {
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.dialog-root .select .input {
	padding: 0 10px;
	border-bottom: 1px solid #413c58;
}

.dialog-root .select .list .empty {
	padding: 20px 30px;
	text-align: center;
}

/*.dialog-root .select button {
    padding: 15px 8px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 300;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    background-color: #222130;
    transition: 0.075s ease-in-out;
    -webkit-transition: 0.075s ease-in-out;
}*/

.dialog-root .select button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px 8px;
	font-size: 15px;
	font-weight: 300;
	background-color: #222130;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.dialog-root .select button:hover {
	background-color: #272638;
}

.dialog-root .select button:active {
	background-color: #545177;
	transition: 0.02s;
}

.dialog-root .select button:not(:last-child) {
	border-bottom: 1px solid #413c58;
}

.dialog-root .select button .icon:not(:empty) {
	margin-right: 10px;
}

.dialog-root .select button .icon svg {
	width: 20px;
	max-height: 16px;
}

/* User Select Dialog */

.dialog-root .select .user {
	text-align: initial;
}

/* Media Select Dialog */

.dialog-root .select button.media-item {
	justify-content: flex-start;
}

.dialog-root .select button.media-item .media {
	height: 35px;
	width: 35px;
	margin-right: 15px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #725bd0;
	background-color: gray;
}

.dialog-root .select button.media-item .media .thumbnail {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-image: var(--url);
}

/* Temp trainer */
.dialog-root .select button.trainer-media-item {
	gap: 10px;
}

.dialog-root .select button.trainer-media-item .thumbnail {
	width: 100px;
	height: 165px;
	background-image: var(--url);
	background-size: cover;
	background-position: center;
	border-radius: 5px;
}

.dialog-root .select button.trainer-media-item .score {}

/* Prompt Dialog */

.dialog-root .prompt {
	display: flex;
	flex-direction: column;
}

/* .dialog-root .prompt .wrapper .input { */
.dialog-root .dialog-text-input {
	position: relative;
	display: flex;
	justify-content: end;
	align-items: center;
}

/* .dialog-root .prompt .wrapper .input input { */
.dialog-root .dialog-text-input input {
	width: 100%;
	height: 40px;
	margin: 15px 0;
	padding: 0 8px;
	font-family: "Poppins", sans-serif;
	color: #e2e2e2;
	border-radius: 5px;
	background-color: #131318;
}

/* .dialog-root .prompt.allow-paste .wrapper .input input { */
.dialog-root .dialog-text-input.allow-paste input {
	padding-right: 40px;
}

/* .dialog-root .prompt .wrapper .input button.paste { */
.dialog-root .dialog-text-input button.paste {
	position: absolute;
	display: none;
	width: 18px;
	height: 18px;
	padding: 10px;
	opacity: 0.5;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	transition: 0.125s;
	-webkit-transition: 0.125s;
}

.dialog-root .dialog-text-input button.paste:hover {
	opacity: 0.75;
}

.dialog-root .dialog-text-input button.paste:active {
	opacity: 1;
}

.dialog-root .dialog-text-input.allow-paste button.paste {
	display: block;
}

.dialog-root .dialog-text-input button.paste svg {
	margin-top: -2px;
}

.dialog-root .prompt .wrapper {
	text-align: initial;
}

/* Alert Dialog */

.dialog-root .alert {
	display: flex;
	flex-direction: column;
}

/*.dialog-root .alert .wrapper input {
    width: 100%;
    height: 30px;
    margin: 15px 0;
    padding: 0 8px;
    font-family: "Poppins", sans-serif;
    color: #e2e2e2;
    border-radius: 5px;
    background-color: #131318;
}*/

.dialog-root .alert .dialog-checkbox {
	display: flex;
	align-items: center;
	margin: 1.5px 0;
}

.dialog-root .alert .dialog-checkbox:first-of-type {
	margin-top: 10px;
}

.dialog-root .alert .dialog-checkbox input {
	margin-right: 5px;
}

.dialog-root .alert .dialog-checkbox input,
.dialog-root .alert .dialog-checkbox label {
	cursor: pointer;
}

.dialog-root .alert .buttons {
	display: flex;
	flex-direction: row;
}

/*.dialog-root .alert button {
    flex: 1;
    padding: 15px 8px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    background-color: #715ace;
    transition: 0.075s ease-in-out;
    -webkit-transition: 0.075s ease-in-out;
}*/

.dialog-root .alert button {
	flex: 1;
	transition: background-color 0.2s;
}

.dialog-root .alert button.secondary {
	color: var(--text-color);
	background-color: transparent;
	/* background-color: #715ace; */
}

.dialog-root .alert button.secondary.hidden {
	display: none;
}

.dialog-root .alert button.secondary:hover {
	background-color: #312c47;
}

.dialog-root .alert button.secondary:active {
	background-color: #747096;
	transition: background-color 0.02s;
}

.dialog-root .alert button.primary:disabled {
	position: relative;
	cursor: not-allowed;
	background: transparent !important;
}

.dialog-root .alert button.primary:disabled:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 8px;
	background: linear-gradient(45deg, #a27de1, #7f73e3);
	animation: confirmation-loading var(--confirmation-delay) linear;
}

.dialog-root .alert button.primary:hover {
	background-color: #6752bd;
}

.dialog-root .alert button.primary:active {
	background-color: #8985c0;
	transition: background-color 0.02s;
}

@keyframes confirmation-loading {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

/* DatePicker */

.dialog-root .datepicker {
	display: flex;
	flex-direction: column;
}

.dialog-root .datepicker .message {
	text-align: left;
}

.dialog-root .datepicker .picker {
	margin: 20px 0 10px;
}

.dialog-root .datepicker .picker input {
	color: white;
}

/* Toast Dialog */
.dialog-root .toast {
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: auto !important;
	max-width: min(80vw, 400px);
	text-align: center;
	padding: 10px 15px;
	box-shadow: 0px 10px 45px 3px rgb(0, 0, 0, 0.4);
	background-color: #383540;
	pointer-events: none;
	z-index: 1999;
}

/* Loader Dialog */
.dialog-root .toast.loading {
	background-color: #222130;
	box-shadow: 0px 0px 40px 0px #1c1c23;
}

.dialog-root .toast.loading.active {
	pointer-events: all;
}

.dialog-root .toast.loading .loader {
	margin-right: 15px;
}


@media (max-width: 700px) {

	/* Dialog */
	.dialog-root .dialog-component>* {
		width: 260px;
	}
}