html {
	background: #505050;
}
* {
	box-sizing:border-box;
	font-family:verdana;
	font-size:1em;
	color: ivory;
}
form, .make_list {
	margin: 0px auto;
	display:block;
	width: fit-content;
	background:#e1e1e1;
	padding:1rem;
	border-radius:5px;
	-webkit-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.34);
	box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.34);
	margin-top: 20vh;
}
form *, ul, li, div, code {
	color:#505050;
}
code {
	color:black;
}
.formRow:not(:first-child), .formRowSubmit:not(:first-child) {
	margin-top:.5rem;
}
.formRow span {
	display:block;
	font-size:.8rem;
}
.formRowSubmit input, .formRow input,.formRow select {
	width:100%;
	padding:.5rem;
}
.loading {
	position: fixed;
	top: 0;
	left: 0;
	backdrop-filter: blur(1px);
	background-color: rgba(0,0,0,.2);
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.success, .fail {
	display:inline-block;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	position:absolute;
	right:8px;
	top: 50%;
	transform: translateY(-9px);
}
.fail {
	background: pink;
}
.success {
	background: lime;
}

.formStatus {
	position: relative;
}
#createButton {
	width: 100%;
	background: linear-gradient(178deg, #fd9949 0%, #ff7d11 100%);
	border: 0px;
	color: white;
	cursor: pointer;
}
#createButton[disabled] {
	background: #ccc;
	cursor:not-allowed;
}
.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid white;
	border-color: white transparent white transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.ui-menu {
	width: 232px!important;
	font-size:.8rem;
}

.make_list li {
	margin-left: 20px;
	padding: 30px;
	position: relative;
	font-weight:bold;
}

.make_list li.status-success {
	color:green;
}
.make_list li.status-error, .error {
	color:red;
}

.make_list li.pending::after {
	content: " ";
	position: absolute;
	/* display: inline-block; */
	width: 20px;
	/* height: 10px; */
	height: 20px;
	border-radius: 50%;
	border: 2px solid white;
	border-color: #505050 transparent #505050 transparent;
	animation: lds-dual-ring 1.2s linear infinite;
	/* margin: 20px; */
	right: 0px;
	top: 30px;
}

.client_loading {
	background: url(/loading1.gif) no-repeat;
	background-size: contain;
	background-position: right;
}

#msg_box {
	color: orangered;
	text-align: center;
	display: none;
}