/* MISC */
.clickable {
    cursor: pointer;
    cursor: hand;
    background: none;
    border: none;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

.unselectable {
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    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-right {
    text-align: right;
}

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

.float-right {
    float: right;
    max-width: 100%;
}

.float-left {
    float: left;
}

.auto-width {
    width: auto !important;
}

.white-space-nowrap {
    white-space: nowrap;
}

/* margin */
/* xxlarge */
.m-xxl {
    margin: 3em !important;
}

.mt-xxl {
    margin-top: 2.5em !important;
}

.mb-xxl {
    margin-bottom: 2.5em !important;
}

.mr-xxl {
    margin-right: 2.5em !important;
}

.ml-xxl {
    margin-left: 2.5em !important;
}
/* 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;
}

/* none */
.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;
}

/* quick color */

.red-color {
    color: rgb(210, 1, 1);
}

.green-color {
    color: rgb(11, 105, 11);
}

.orange-color {
    color: rgb(230, 149, 0);
}

.purple-color {
    color: purple;
}