body {
    font-family: Arial;
    background-color: #e2e2e2;
    color: #4b4b4b;
}

#box {
    width: 25em;
    margin: auto;
    margin-top: 10%;
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.2);
    -moz-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.2);
    box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.2);
}

#box .text { padding-bottom: 30px; }
#box .text h3 { margin-top: 0px; }

#logo {
    width: 64px;
    height: 64px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    background-image: url('/tenants/fo/futureordering-symbol.svg');
}

.info {
    padding: 15px;
    font-size: 11pt;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 5px;
    font-size: 10pt;
    border: 1px solid #cacaca;
    border-radius: 3px;
    box-sizing: border-box;
}

button, .provider {
    margin: auto;
    width: 100%;
    padding: 5px;
    background-color: #4CAF50;
    border: none;
    color: white;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    font-size: 10pt;
    box-sizing: border-box;
    display: inline-block;
}

button[value=cancel] {
    background-color: #cd0a00;
}

input {
    margin-top: 5px;
}

label {
    font-size: 10pt;
}

.provider {
    margin-top: 10px;
}

.provider:first-of-type {
    margin-top: 0px;
}

#local, #external, #header {
    width: 60%;
    margin: auto;
    padding: 15px;
}

.rememberbox {
    width: 100%;
    text-align: right;
}

.buttonbox {
    margin-top: 15px;
}

.divider {
    width: 85%;
    margin: auto;
    border-bottom: 1px solid #cacaca;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul, .validation-summary-errors li {
    color: #cd0a00;
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
}