/* MISC */
.clickable {
	cursor: pointer;
	background: none;
	border: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.noselect,
.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input:focus~.floating-label,
input:not(:focus):valid~.floating-label {
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
}

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 18px;
    transition: 0.2s ease all;
}

.unborder {
    border: transparent !important;
}

.text-align-center {
    text-align: center;
}

/* margin */
/* xlarge */
.m-xl {
    margin: 1em !important;
}

.mt-xl {
    margin-top: 1em !important;
}

.mb-xl {
    margin-bottom: 1em !important;
}

.mr-xl {
    margin-right: 1em !important;
}

.ml-xl {
    margin-left: 1em !important;
}
/* large */
.m-lg {
    margin: .8em !important;
}

.mt-lg {
    margin-top: .8em !important;
}

.mb-lg {
    margin-bottom: .8em !important;
}

.mr-lg {
    margin-right: .8em !important;
}

.ml-lg {
    margin-left: .8em !important;
}
/* normal */
.m-nl {
    margin: .6em !important;
}

.mt-nl {
    margin-top: .6em !important;
}

.mb-nl {
    margin-bottom: .6em !important;
}

.mr-nl {
    margin-right: .6em !important;
}

.ml-nl {
    margin-left: .6em !important;
}
/* small */
.m-sl {
    margin: .4em !important;
}

.mt-sl {
    margin-top: .4em !important;
}

.mb-sl {
    margin-bottom: .4em !important;
}

.mr-sl {
    margin-right: .4em !important;
}

.ml-sl {
    margin-left: .4em !important;
}
/* xsmall */
.m-xs {
    margin: .1em !important;
}

.mt-xs {
    margin-top: .1em !important;
}

.mb-xs {
    margin-bottom: .1em !important;
}

.mr-xs {
    margin-right: .1em !important;
}

.ml-xs {
    margin-left: .1em !important;
}
/* non */
.m-none {
    margin: 0 !important;
}

.mt-none {
    margin-top: 0 !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.mr-none {
    margin-right: 0 !important;
}

.ml-none {
    margin-left: 0 !important;
}

/* padding */
/* xlarge */
.p-xl {
    padding: 1em !important;
}

.pt-xl {
    padding-top: 1em !important;
}

.pb-xl {
    padding-bottom: 1em !important;
}

.pr-xl {
    padding-right: 1em !important;
}

.pl-xl {
    padding-left: 1em !important;
}
/* large */
.p-lg {
    padding: .8em !important;
}

.pt-lg {
    padding-top: .8em !important;
}

.pb-lg {
    padding-bottom: .8em !important;
}

.pr-lg {
    padding-right: .8em !important;
}

.pl-lg {
    padding-left: .8em !important;
}
/* normal */
.p-nl {
    padding: .6em !important;
}

.pt-nl {
    padding-top: .6em !important;
}

.pb-nl {
    padding-bottom: .6em !important;
}

.pr-nl {
    padding-right: .6em !important;
}

.pl-nl {
    padding-left: .6em !important;
}
/* small */
.p-sl {
    padding: .4em !important;
}

.pt-sl {
    padding-top: .4em !important;
}

.pb-sl {
    padding-bottom: .4em !important;
}

.pr-sl {
    padding-right: .4em !important;
}

.pl-sl {
    padding-left: .4em !important;
}
/* xsmall */
.p-xs {
    padding: .1em !important;
}

.pt-xs {
    padding-top: .1em !important;
}

.pb-xs {
    padding-bottom: .1em !important;
}

.pr-xs {
    padding-right: .1em !important;
}

.pl-xs {
    padding-left: .1em !important;
}

/* none */
.p-none {
    padding: 0 !important;
}

.pt-none {
    padding-top: 0 !important;
}

.pb-none {
    padding-bottom: 0 !important;
}

.pr-none {
    padding-right: 0 !important;
}

.pl-none {
    padding-left: 0 !important;
}

.size-digit-1 {
    width: calc(1ch + 2px);
}

.size-digit-2 {
    width: calc(2ch + 2px);
}

.size-digit-3 {
    width: calc(3ch + 2px);
}

.size-digit-4 {
    width: calc(4ch + 2px);
}

.size-digit-5 {
    width: calc(5ch + 2px);
}

.size-digit-6 {
    width: calc(6ch + 2px);
}