.better-messages-position-wrapper {
    position: absolute;
    left: 50%;
    top: 120px;
    width: 40%;
}

.better-messages {
    background: white;
    border: 1px solid #d5d9de;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    padding: 17px 40px 17px 17px;
    position: relative;
    left: -50%;
    width: 100%;
    /* We want messages to be under Admin navigation which has z-index of 502 */
    z-index: 500;
}

.better-messages .message {
    margin-top: 1em;
    clear: both;
}

.better-messages .message:first-child {
    margin-top: 0;
}

.better-messages .type {
    width: 26px;
    height: 26px;
    float: left;
    margin-right: -26px;
}

.better-messages .message-inner {
    float: left;
    margin-left: 36px;
    margin-right: 20px;
    width: 90%;
    font-family: RobotoLight, sans-serif;
    font-size: 16px;
    color: #4a4a4a;
}

/* Element used to create right margin for left floating element preceding it */
.better-messages .spacer {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: -20px;
}

.better-messages .label {
    margin-right: 0.3em;
    display: inline-block;
    float: left;
    font-family: RobotoRegular, sans-serif;
}

.better-messages ul {
    margin: 0;
    padding: 0;
    list-style: none outside none;
}

.better-messages .close {
    background: transparent url(../images/close.png) no-repeat center center;
    position: absolute;
    right: 10px;
    top: 8px;
    height: 20px;
    width: 20px;
    line-height: 1;
    cursor: pointer;
}

.better-messages div.success {
    background: transparent url(../images/success.png) no-repeat;
}

.better-messages div.error {
    background: transparent url(../images/error.png) no-repeat;
}

.better-messages div.warning {
    background: transparent url(../images/warning.png) no-repeat;
}