body {
    background-color: #fcf6e0;
    padding-top: 5px;
}

.container {
    width: 900px;
    margin: 0px auto;
    margin-top: 50px;
}

.head {
    text-align: right;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.textshadow {
    color: white;
    text-shadow: black 0.1em 0.1em 0.2em;
}

.subtitle {
    font-weight: 800;
    color: #432f97;
    /*font-size: 18px;*/
    font-size: large;
    margin-top: 5px;
    text-shadow: rgb(166, 163, 163) 0.1em 0.1em 0.2em
}

.subtitle2 {
    font-weight: 800;
    color: #432f97;
    /* font-size: 18px;*/
    font-size: large;
    position: relative;
    left: -8px;
    text-shadow: rgb(166, 163, 163) 0.1em 0.1em 0.2em
}

.warningmessage {
    font-size: medium;
    /*font-size: 14px;*/
    color: #9f1b2e;
    padding-top: 10px;
}

.visionword {
    margin-left: 6px;
    font-weight: bolder;
    color: black;
    /*font-size: 12px;*/
    font-size: small;
}

.relax {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 0px;
    margin-right: 0px;
}

.relax2 {
    margin-top: 10px;
    margin-bottom: 10px;
}


.relax3 {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 10px;
}

.loginArea {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 2px #ccc solid;
    border-radius: 10px;
    background-color: #eee;
    text-shadow: 3px 3px 3px #cccccc;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    z-index: 500;
    /* width: 100%;*/
}

.titleword {
    margin-top: 5px;
    margin-left: 0px;
    text-align: center;
    font-weight: bolder;
    /*font-size: 30px;*/
    font-size: xx-large;
    color: darkblue;
    font-family: 'Microsoft Tai Le';
    text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.15) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.1) 0px 20px 20px;
}

.btn {
    margin-bottom: 5px;
}

.loginImg {
    width: 80%;
    padding: 10px;
}

.loginbox {
    margin-left: 1px;
    background-color: #f8f5d7;
    border: 1px solid #b8f8e1;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    box-shadow: 3px 3px 5px 6px #cccccc;
}

.mbox {
    padding: 15px;
}

.must:after {
    content: "*";
   /* font-size: 14px;*/
    font-size: medium;
    font-weight: 800;
    color: red;
    vertical-align: top;
}

.copyright {
    /*font-size: 11px;*/
    font-size: x-small;
    color: #432f97;
}

.vertical {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
}

.row > * {
    padding-right: 3px !important;
    padding-left: 3px !important;
}

.ErrInput{
    background-color: #fce4e3;
}

.inputBox {
    height: 25px;
    border: 1px solid #a7a6a6;
    margin-bottom: 5px;
}

    .inputBox:focus {
        border: 1px solid #757477;
    }

@media screen and (max-width: 1023px) {
    .titleword {
        margin-top: 10px;
        /*margin-left:10px;*/
        /*font-size: 19px;*/
        font-size: larger;
        text-align: center;
    }

    .head {
        text-align: left;
    }

    .buttonword {
        /*font-size: 16px;*/
        font-size: large;
    }

    .container {
        max-width: 95%;
    }
}