html, body {
    width: 100%;
    height: 100%;
}

body{
    display: flex;
    align-items: center;
}

form {
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

input[type="number"], select {
    text-align: center;
    width: 70px;
    font-size: 20px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    margin: 0px;
}
label {
    display: flex;
    align-items: center;
    margin: 0;
}

select {
    width: auto;
}

.inline-form b,
.inline-form .img-icon-btn {
    width: 20px;
    align-self: center;
}

.inline-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 15px;
}

button {
    width: 22px;
    font-size: 20px;
    margin: 5px 10px;
    padding: 0px;
    display: inline-flex;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

button:hover {
    transform: scale(1.5, 1.5);
}

button:active {
    transform: scale(1.7, 1.7);
}

button:disabled {
    display: none;
}

button:disabled:hover, button:disabled:active {
    transform: scale(1.3, 1.3);
}

.progress {
    margin-bottom: 15px;
    width: 100%;
    border-radius: 6px;
}

.progress-bar {
    height: 16px;
    border-radius: 4px;  
}
form.loading > div.box_content {
    background-image: linear-gradient(
		110deg,
		#ececec 8%,
		#f5f5f5 18%,
		#ececec 33%
	);
	background-size: 300%;
	background-position: 100% 0;
    border-radius: inherit;
	animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* form.loading > div.box_content {
    visibility: hidden;
} */