html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  background: #1a1a1a;
}

.form-signin {
    width: 100%;
    margin: auto;
}

.background-image {
    border-radius: 15px;
    height: 600px;
    width: 650px;
}

.signup-form {
    padding: 25px;
    color: white;
    background: #2a2a2a;
    border-radius: 15px;
    height: 600px;
    width: 650px;
    overflow: auto;
}

.signup-form .form-control,
.signup-form .form-select {
    background: #333;
    border: 1px solid #444;
    color: white;
}

.option {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}

.option input {
    float: left;
    margin-left: -1.5em;
    border-radius: 50%;
}

.option input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
}

select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.54975 7.92279C3.25685 8.21569 3.25685 8.69056 3.54975 8.98346L10.0697 15.5035C11.1326 16.5663 12.8675 16.5663 13.9304 15.5035L20.4504 8.98346C20.7433 8.69056 20.7433 8.21569 20.4504 7.92279C20.1575 7.6299 19.6826 7.6299 19.3897 7.92279L12.8697 14.4428C12.3926 14.9199 11.6075 14.9199 11.1304 14.4428L4.61041 7.92279C4.31752 7.6299 3.84264 7.6299 3.54975 7.92279Z' fill='%236F6F6F'/%3E%3C/svg%3E") !important;
    background-position: right 6px center !important;
    background-repeat: no-repeat !important;
    background-size: 25px !important;
}

.birth-select {
    margin: 0 12px;
}

.btn-red {
    background-color: #ff3366;
    border-color: #ff3366ac;
}

.btn-red:hover, .btn-red:active, .btn-red:focus {
    background-color: #fe1650;
    border-color: #ff245bac;
}

.btn-red span {
    display: none;
}

.btn-red .btn-text {
    display: inline;
}

.btn-red.loading {
    pointer-events: none;
}

.btn-red.loading span {
    display: inline-block;
}

.btn-red.loading .btn-text {
    display: none;
}

.error {
    width: 100%;
    margin-top: .5rem;
    color: #dc3545;
    text-align: center;
    display: none;
}

.hidden {
    display: none !important;
}

.show-error {
    display: inline-block !important;
}