.logo img{
    max-width: 85%;
    max-height: 25vh;
} 

strong {
    font-weight: bold;
}

.card {
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #DADCE0;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #fff;
    text-align: left;
    box-shadow: 0px 0px 11px 0px #b4b3b3;
    -webkit-box-shadow: 0px 0px 11px 0px #b4b3b3;
    -moz-box-shadow: 0px 0px 11px 0px #b4b3b3;
}

/* Form Items */
form {
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: auto;
    max-width: 530px;
    border: 1px solid #DADCE0;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #fff;
}

.form-bottom .button {
    vertical-align: middle;
    background: #D9762B;
    position: relative;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    padding: 16px 60px;
    font-size: 91%;
    border-radius: 3px;
    transition: .08s ease-in;
    cursor: pointer;
    -webkit-box-shadow: 4px 2px 15px 3px #B9ADAD;
    -moz-box-shadow: 4px 2px 15px 3px #B9ADAD;
    box-shadow: 4px 2px 15px 3px #B9ADAD;
    width: 100%;
}

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

.form-slogan {
    text-align: left;
    font-size: 25px;
    margin-bottom: 25px;
    padding-left: 9px;
}

.form-slogan .heading {
    color: #333;
}

.form-slogan .message {
    color: #80868b;
    font-size: 14px;
}

.field-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.field-wrapper input{
    border: 1px solid #DADCE0;
    padding: 15px;
    border-radius: 4px;
    width: 91%;
}

.field-wrapper select {
    border: 1px solid #DADCE0;
    padding: 15px;
    border-radius: 4px;
    width: 100%;
}

    .field-wrapper textarea {
        border: 1px solid #DADCE0;
        padding: 15px;
        border-radius: 4px;
        width: 91%;
    }

.field-wrapper .field-placeholder {
    font-size: 16px;
    position: absolute;
    bottom: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #80868b;
    left: 8px;
    padding: 0 8px;
    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
    text-align: left;
    width: 100%;
}

    .field-wrapper .textArea {
        font-size: 16px;
        position: absolute;
        bottom: 105px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #80868b;
        left: 8px;
        padding: 0 8px;
        -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        z-index: 1;
        text-align: left;
        width: 100%;
    }   

.field-wrapper .field-placeholder span{
    background: #ffffff;
    padding: 0px 8px;
}

fieldset .field-placeholder {
    font-size: 16px;
    position: absolute;
    bottom: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #80868b;
    left: 8px;
    padding: 0 8px;
    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
    text-align: left;
    width: 100%;
}

fieldset .field-placeholder span {
    background: #ffffff;
    padding: 0px 8px;
}

.field-wrapper input:focus {
    border-color : #D9762B;
}

.field-wrapper select:focus {
    border-color: #D9762B;
}

.field-wrapper .message {
    color: #ff0000;
    text-align: left;
}


.field-wrapper input:not([disabled]):focus ~ .field-placeholder,
.field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder,
.field-wrapper select:not([disabled]):focus ~ .field-placeholder,
.field-wrapper.hasValue select:not([disabled]) ~ .field-placeholder,
.field-wrapper.hasValue .field-placeholder, .field-wrapper.hasFocus .field-placeholder {
    -webkit-transform: scale(.75) translateY(-32px) translateX(-50px);
    transform: scale(.75) translateY(-32px) translateX(-16%);
    color: #D9762B;
}

.field-wrapper textarea:not([disabled]):focus ~ .field-placeholder,
.field-wrapper.hasValue textarea:not([disabled]) ~ .field-placeholder {
    -webkit-transform: scale(.75) translateY(-32px) translateX(-50px);
    transform: scale(.75) translateY(-164%) translateX(-18%);
    color: #D9762B;
}


.tooltip {
    position: relative;
    display: inline-block;
    color: #80868b;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 172%;
        background-color: #555;
        color: white;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 55;
        bottom: 125%;
        left: -82%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.password-toggle {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    right: 10px;
    top: 13px;
    z-index: 2;
}

.outer-form {
    padding: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: auto;
    max-width: 530px;
    border: 1px solid #DADCE0;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #fff;
}

.passGuideline {
    color: #80868b;
    font-size: 15px;
    padding-left: 40px;
}

.splash-bottom {
    padding: 20px;
}

.mobileLoginPrompt {
    display: block;
    text-align: right;
    padding-bottom: 1px;
    padding-right: 5px;
}

    .mobileLoginPrompt a {
        color: #80868b;
        text-decoration: none;
        cursor: pointer;
    }

.svgFilter-color {
    filter: invert(50%) sepia(28%) saturate(5506%) hue-rotate(350deg) brightness(97%) contrast(97%);
}

@media only screen and (min-width: 600px) {
    /* For PC */

    .field-wrapper input:not([disabled]):focus ~ .field-placeholder,
    .field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder,
    .field-wrapper select:not([disabled]):focus ~ .field-placeholder,
    .field-wrapper.hasValue select:not([disabled]) ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-32px) translateX(-84px);
        transform: scale(.75) translateY(-32px) translateX(-18%);
    }

    .splash input:not([disabled]):focus ~ .field-placeholder,
    .splash.hasValue input:not([disabled]) ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-32px) translateX(-84px);
        transform: scale(.75) translateY(-32px) translateX(-16%);
    }

    .mNumber input:not([disabled]):focus ~ .field-placeholder,
    .mNumber.hasValue input:not([disabled]) ~ .field-placeholder,
    .cNumber select:not([disabled]):focus ~ .field-placeholder,
    .cNumber.hasValue select:not([disabled]) ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-32px) translateX(-84px);
        transform: scale(.75) translateY(-32px) translateX(-35%);
    }



    .form-bottom .button {
        width: auto;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        color: #80868b;
        padding-right: 4px;
        cursor: help;
    }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 202%;
            background-color: #555;
            color: white;
            text-align: left;
            border-radius: 6px;
            padding: 14px;
            position: absolute;
            z-index: 55;
            bottom: 125%;
            left: -50%;
            opacity: 0;
            transition: opacity 0.3s;
        }

            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
            cursor:help;
        }

    .passGuideline {
        color: #fff;
        font-size: 15px;
        padding-left: 16px;
    }

    .form-slogan .message {
        font-size: 15px;
    }

    .field-wrapper select {
        width: 98%;
    }

    .password-toggle {
        right: 25px;
    }
}