.acsl-container {width: 450px; margin: 0 auto; padding: 60px 0 20px 0;}

.acsl-container > .head {margin-bottom: 35px; text-align: center;}

.acsl-container > .head > .holder {margin-bottom: 20px; text-align: center;}
.acsl-container > .head > .holder > .logo {display: inline-block; vertical-align: middle; position: relative;}
.acsl-container > .head > .holder > .logo > img {width: 170px;}
.acsl-container > .head > .holder > .logo > span {display: block; position: absolute; right: 0; top: -12px; font-size: 11px; font-weight: 600; color: #222; text-transform: uppercase; cursor: default;}

.acsl-container > .head > .languages {display: flex; flex-flow: row nowrap; align-items: center;}
.acsl-container > .head > .languages > .option {display: block; flex: 1 1 0; margin: 0 3px; padding: 6px 0; font-size: 14px; line-height: 18px; color: #888; font-weight: bold; text-align: center; border: 2px solid #ccc; border-radius: 2px; cursor: pointer; transition: all 0.15s ease-out;}
.acsl-container > .head > .languages > .option:first-child {margin-left: 0;}
.acsl-container > .head > .languages > .option:last-child {margin-right: 0;}
.acsl-container > .head > .languages > .option:hover {border-color: #bbb; color: #555;}
.acsl-container > .head > .languages > .option.selected {border-color: #2e9061; color: #444;}

.acsl-container > .sign-in {display: block; margin: 0 0 40px 0;}
.acsl-container > .sign-in > form { transition: all 0s, opacity 0.5s linear;}
.acsl-container > .sign-in > form > .row {position: relative; margin: 0 0 7px 0;}
.acsl-container > .sign-in > form > .row:last-child {margin: 0 0 25px 0;}

.acsl-container > .sign-in > form > .row > .field {display: block; width: 100%; height: 44px; line-height: 42px; padding: 0 10px; font-size: 16px; color: #222; border: 1px solid #ccc; background: #fff; border-radius: 4px; transition: all 0.25s ease-out; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.acsl-container > .sign-in > form > .row > .field::placeholder {color: #999;}
.acsl-container > .sign-in > form > .row > .field:hover {border-color: #bbb; background: #fdfdfd;}
.acsl-container > .sign-in > form > .row > .field:focus {border-color: #267e54; box-shadow: 0 0 1px #2c9362;}
.acsl-container > .sign-in > form > .row > .field.error {color: #e32229; border-color: #ec4148; box-shadow: 0 0 1px #ff8085;}
.acsl-container > .sign-in > form > .row > .field.error::placeholder {color: #e32229;}

/* create account */
.acsl-container > .reset-password {text-align: center;}
.acsl-container > .reset-password > .text {display: block; margin: 0 0 1px 0; font-size: 13px; line-height: 18px;}
.acsl-container > .reset-password > .link {font-size: 13px; line-height: 18px; color: #267E54; font-weight: 600; transition: all 0.1s ease-out;}
.acsl-container > .reset-password > .link:hover {color: #1e6f49; text-decoration: underline;}

@media all and  (max-width: 800px) {
    .acsl-container {padding-top: 60px;}
}

@media all and  (max-width: 600px) {
    .acsl-container {width: 100%; padding: 45px 20px 0 20px;}
}

@media all and (max-width: 250px) {
    .acsl-container > .logo {padding-left: 20px; padding-right: 20px;}
    .acsl-container > .logo > img {width: 100%;}
}