/* Typekit flash fix */

.wf-loading {
    visibility: hidden;
}

.wf-active, .wf-inactive {
    visibility: visible;
}


html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'open sans', sans-serif;
    font-size: 13px;
    color: #30353b;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    padding-bottom: 22px;
    color: #30353b;
    font-family: 'ff-tisa-web-pro';
    font-size: 22px;
    font-weight: bold;
}

p {
    line-height: 1.5em;
    margin: 0 0 10px;
}

button {
    cursor: pointer;
    appearance: none;
    padding: 5px 0;
    border: 0;
    background-color: transparent;
    font-family: 'open sans', sans-serif;
    font-size: 1rem;
}

a,
button {
    transition: color 0.2s ease-in-out 0s;
    color: #00b550;
    text-decoration: none;
}

a:hover,
button:hover {
    color: #00c754;
}

/*a:hover
{
    text-decoration: underline;
}*/


input:focus,
select:focus,
option:focus,
button:focus,
button:active,
button:hover {
    outline: none;
}

input[type=text],
input[type=password],
input[type=email],
select {
    transition: border-color 0.2s ease-in-out 0s;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #d9dfe6;
    color: #31363b;
    border-radius: 0;
    line-height: 40px;
    font-family: 'open sans', sans-serif;
    font-size: 1rem;
}

select {
    border: 0;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus {
    /*border-color: #eceff4;*/
    color: #a8b3bb;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #30353b !important;
}

input:-webkit-autofill:focus {
    -webkit-text-fill-color: #31363b !important;
}


select,
option {
    background-color: #f6f8fb;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

select::-ms-expand {
    display: none;
}

select {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAHCAYAAAD9NeaIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMDBhZGY3OC1lN2I0LWM3NDAtYjc1ZC03YzJiMGRlMTc1NzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTY3MEMyREM0MDBBMTFFNUE0MUFDNUQ4MkQxNkY1RUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTY3MEMyREI0MDBBMTFFNUE0MUFDNUQ4MkQxNkY1RUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTU4NjhhN2QtZTU3My03NDRiLTk4MDMtZjgyYWQ2YjY1MGQzIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NjE4YmUyNWMtMjQ3Yi0xMWU1LWEwNjItZWMyYjc4M2E0NGE0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6sHIpAAAAMRJREFUeNpivHn38XUGBoYXQBykpiTzngEHuHXviSCQWgfEEkB1mgwkACYg5gBiByA+CjRIHocFIPGjUHUcDCQCkCWOQHwDiEGuOw400BDNAhD/OFT+BlQ9aZYAvf4ASFsD8REglgTig0CD3aAWgOiDUHGQvDVUPUmA8f///zAXg4JhMRCHAPFvIF4ExHFAzArEa4A4FmjBDwYyANwSqEWg4OsF4gIkNROAuBhowT8GcgHIEnQMTHGTgPg/iMYmTyoGCDAAdGKG5ySpggoAAAAASUVORK5CYII=');
    background-position: right;
    background-repeat: no-repeat;
}

option {
    padding: 5px 15px;
    border: 0;
}

/******************************************************************************/

.alert {
    display: block;
    margin-bottom: 10px;
    padding: 10px 15px 0;
    vertical-align: top;
    border: 1px solid;
}

.alert .fa {
    cursor: default;
    pointer-events: none;
    position: absolute;
    width: 38px;
    margin-left: -9px;
    font-size: 18px;
    text-align: center;
}

.alert .fa.fa-warning {
    font-size: 16px;
}

.alert .fa + p {
    padding-left: 30px;
}

.alert-warning {
    border-color: #00b550;
    color: #00b550;
}

.alert-info {
    border-color: #bce8f1;
    background-color: #d9edf7;
    color: #31708f;
}

.alert-success {
    border-color: #d6e9c6;
    background-color: #dff0d8;
    color: #3c763d;
}

/******************************************************************************/

.login-visual {
    width: 100vw;
    height: 100%;
    border-right: 28vw solid #fff;
    background-color: #f6f8fb;
    background-position: center;
    background-size: cover;
}

.login-visual pre {
    padding: 10px;
    background-color: #666;
    color: #fff;
}

.login-wrapper,
.login-footer {
    position: absolute;
    padding: 30px;
}

.login-wrapper {
    top: 0;
    right: 0;
    width: 28vw;
    min-width: 300px;
    height: 100%;
    background-color: #fff;
}

.login-top {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 240px;
    padding-top: 70px;
    height: auto;
    background-image: url('/images/logo.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}

a.prev-version {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 11px;
    color: #a8b3bb;
}


.login-attempts {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: normal;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #d9dfe6;
    color: #a8b3bb;
}

.login-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.login-footer-buttons {
    float: left;
    padding-top: 15px;
}

.login-footer-buttons a {
    text-transform: lowercase;
}

.login-footer-flags {
    float: right;
    padding-top: 15px;
}

.login-footer-flags img {
    transition: opacity 0.2s ease-in-out 0s;
    opacity: 0.5;
    width: 26px;
    height: 19px;
    margin-left: 10px;
    border-radius: 3px;
}

.login-footer-flags a:hover img,
.login-footer-flags a.selected img {
    opacity: 1;
}

.login-body {
    width: 100%;
    height: 100%;
    font-size: 0;
}

.login-body-valign {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.login-main {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 100px 0;
    font-size: 1rem;
}

.login-main > p {
    padding-bottom: 10px;
}

.login-main select,
.login-main .form-field {
    margin-bottom: 10px;
}

/******************************************************************************/

.form-field {
    position: relative;
}

.form-field input {
    padding-left: 41px;
}

.form-field > i {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    color: #1b1b1b;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
}

.form-field input:focus + i {
    color: #1b1b1b;
}

.form-field.error input {
    border-color: red;
}

.form-captcha {

}

.form-captcha img {
    position: absolute;
    padding-top: 5px;
}

.form-captcha input {
    width: calc(100% - 110px);
    margin-left: 110px;
}

.form-checkbox {
    cursor: pointer;
    float: left;
    padding-top: 1px;
    color: #31363b;
    font-size: 0;
}

.form-checkbox-box {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid #dde1e6;
}

.form-checkbox-box input {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.form-checkbox-box .fa {
    transition: color 0.2s ease-in-out 0s;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 25px;
}

.form-checkbox-box input.checked + .fa,
.form-checkbox-box input[checked] + .fa {
    color: #00b550;
}

.form-checkbox-label {
    display: inline;
    padding-left: 10px;
    font-size: 1rem;
    line-height: 28px;
    vertical-align: bottom;
}

.form-buttons {
    text-transform: lowercase;
    padding: 8px 0;
}


.form-buttons .login-btn,
.form-buttons button[type=submit] {
    float: right;
}

.form-buttons .back-btn {
    float: left;
}

.form-error {
    font-weight: bold;
    color: #00b550;
    margin: 0 0 15px;
}

div#errors {
    padding: 0 0 20px 0;
    color: #c83324;
    font-weight: 700;
}

@media (max-width: 767px) {
    .login-wrapper {
        width: 100%;
    }

    .login-top {
        top: 30px;
    }
}

@media (max-width: 480px) {

    .login-top {
        width: 260px;
        background-position: center top;
        background-size: 85%;
        left: 50%;
        transform: translateX(-50%);
    }

    a.prev-version {
        width: 100%;
        top: 90px;
        right: 0;
        text-align: center;
    }


}