.text-welcome {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2em;
}

.input-box {
    width: 40%;
    min-width: 180px;
    max-width: 350px;
    height: 36px;
    margin-left: auto;
    margin-right: auto;
}

.btn-all {
    width: 40%;
    min-width: 120px;
    max-width: 350px;
    height: auto;
    margin-top: 30px;
    background-color: #f0027f !important;
    border: 0;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2em;
    font-weight: 300 !important;
    color: white !important;
}

    .btn-all:hover, .btn-all:active, .btn-all:focus {
        background-color: #0f9d58 !important;
        color: white !important;
    }

.input-field input[type='text'] {
    color: #000;
    font-size: 1.1em;
    height: 28px;
    border-bottom: 1px solid #000 !important;
    box-shadow: 0 1px 0 0 #000 !important;
}

.input-field input[type='password'] {
    color: #000;
    font-size: 1.1em;
    height: 28px;
    border-bottom: 1px solid #000 !important;
    box-shadow: 0 1px 0 0 #000 !important;
}

.material-icons {
    color: #f0027f;
}

.input-field label {
    font-family: 'Sarabun', sans-serif;
    font-size: 1em;
    color: #000;
}

    .input-field label.active {
        font-size: 1em !important;
        color: #000 !important;
    }

.input-field input[type='text']:focus + label, .input-field input[type='password']:focus + label {
    color: #000 !important;
}

.input-field input[type='text']:focus, .input-field input[type='password']:focus {
    border-bottom: 1px solid #f0027f !important;
    box-shadow: 0 1px 0 0 #f0027f !important;
}

.input-field input[type='text'].valid, .input-field input[type='password'].valid {
    color: #000 !important;
    border-bottom: 1px solid #f0027f !important;
    box-shadow: 0 1px 0 0 #f0027f !important;
}

.input-field input[type='text'].invalid, .input-field input[type='password'].invalid {
    color: crimson !important;
    border-bottom: 1px solid crimson !important;
    box-shadow: 0 1px 0 0 crimson !important;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mt-10 {
    margin-top: 10px !important;
}

* {
    box-sizing: border-box;
}

Create two equal columns that floats next to each other
.column {
    float: left;
    width: 50%;
    padding: 0px 0px 0px 20px;
}

Clear floats after the columns
.row:after {
    content: "";
    display: table;
    clear: both;
}

.loading {
    content ="Uploading";
    background-color: black;
    color: white;
    opacity: 0.5;
    font-family: PT Sans Narrow;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loading:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        -webkit-animation: ellipsis steps(5,end) 1000ms infinite;
        animation: ellipsis steps(5,end) 1000ms infinite;
        content: "\2026\2026";
        ascii code for the ellipsis character width: 0px;
    }


.message-error {
    color: #d80000;
}

.font-bold {
    font-weight: bolder;
}