html, body {
    height  : 100%;
    margin  : 0;
    padding : 0;
}

body.account {

    /** @decorator */
    background-color    : #F8F8F8;

    /** @font */
    font-size   : 20px;
    font-weight : 700;
}

#askia-viewport-wrapper {

    /** @element */
    position   : relative;
    height     : 100%;
    min-height : 400px;
}

#askia-header {

    /** @element */
    height : 46px;
    margin : 0 0 2px 0;

    /** @decorator */
    background-color   : #222 !important;
    -webkit-box-shadow : 0 1px 0 #363636;
    -moz-box-shadow    : 0 1px 0 #363636;
    box-shadow         : 0 1px 0 #363636;
    border-bottom      : 1px solid #000000;
}

#askia-header #askia-logo {

    /** @element */
    float       : left;
    width       : 50px;
    height      : 47px;
    margin-left : 5px;

    /** @decorator */
    background-image : url('img/Logo.png');

    /** @ui */
    cursor : pointer;
}

#askia-header #askia-logo:hover {

    /** @decorator */
    background-image : url('img/Logo-hover.png');

    /** @animation */
    -webkit-transition-property        : background-image;
    -moz-transition-property           : background-image;
    -o-transition-property             : background-image;
    transition-property                : background-image;
    -webkit-transition-duration        : 0.3s;
    -moz-transition-duration           : 0.3s;
    -o-transition-duration             : 0.3s;
    transition-duration                : 0.3s;
    -webkit-transition-timing-function : ease-in-out;
    -moz-transition-timing-function    : ease-in-out;
    -o-transition-timing-function      : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-delay           : 0.2s;
    -moz-transition-delay              : 0.2s;
    -o-transition-delay                : 0.2s;
    transition-delay                   : 0.2s;
}

#flex-container {
    height : 90%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
}

#askia-main {

    /** @element */
    width              : auto;
}

#askia-account-form {

    /** @text */
    text-align: center;
}

#login-icon {

    /** @element */
    display      : block;
    width        : 175px;
    height       : 175px;
    margin       : 0 auto;
    padding-bottom: 30px;

    /** @decorator */
    background-position : center center;
    background-image    : url('img/login-icon.png');
    background-repeat   : no-repeat;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #666;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #666;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #666;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #666;
}

.askia-required-input {

    /** @element */
    position : relative;
}

.field-validation-error {

    /** @element */
    position : absolute;
    top      : 0;
    left     : 910px;
    width    : 110px;
    padding  : 7px 0;

    /** @font */
    font-weight : 500;
    font-size   : 12px;
    color       : #FF0084;
}
.validation-errors-container {
    height: 30px;
    padding-top : 20px;
}

.validation-summary-errors {

    /** @element */
    margin  : 0;

    /** @font */
    font-weight : 500;
    font-size   : 14px;
    color       : #FF0084;
}

#askia-input-wrapper input {

    /** @element */
    width   : 330px;
    padding : 15px;
    margin  : 0 0 10px 0;

    /** @decorator */
    background-color   : #FFF;
    border-width       : 1px;
    border-style       : solid;
    border-color       : #AAA;

    /** @font */
    font-size : 16px;
    color     : #444;
}

#askia-input-wrapper input:focus {

    /** @decorator */
    border: 1px solid #007dc5;

    /** @ui */
    outline : none;
}

.askia-account-cta {

    /** @element */
    display         : -moz-inline-stack;
    display         : inline-block;
    vertical-align  : middle;
    *vertical-align : auto;
    zoom            : 1;
    *display        : inline;
    width           : 360px;
    margin          : 0;
    padding         : 15px;

    /** @decorator */
    -webkit-background-clip : padding;
    -moz-background-clip    : padding;
    background-clip         : padding-box;
    border                  : 1px solid #026FAE;

    /** @ui */
    cursor : pointer;

    /** @font */
    font-size   : 16px;
    color       : #EEE;
    font-weight : 600;

    /** @text */
    text-align      : center;
    text-decoration : none;
    line-height     : 20px;
}

.askia-account-cta:hover {

    /* @font */
    color : white;
    transition          : all ease-in-out .3s;
}

#askia-account-submit {

    /** @decorator */
    background-color   : #007DC5;
    -ms-box-shadow     : inset 0 1px 0 0 rgba(255, 255, 255, .2);  /* Internet Explorer 9 */
    -webkit-box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, .2);  /* Safari and Chrome */
    -moz-box-shadow    : inset 0 1px 0 0 rgba(255, 255, 255, .2);  /* Firefox */
    -o-box-shadow      : inset 0 1px 0 0 rgba(255, 255, 255, .2);  /* Opera */
    box-shadow         : inset 0 1px 0 0 rgba(255, 255, 255, .2);  /* CSS3 */
}

#askia-account-submit:hover {

    /** @decorator */
    background-color   : #0075B8;
    border              : 1px solid #00629b;
    transition          : all ease-in-out .3s;
}

#askia-account-submit:active {

    /** @decorator */
    border              : 1px solid #00629b;
    -ms-box-shadow     : inset 0 0 6px 3px rgba(0, 0, 0, .4);  /* Internet Explorer 9 */
    -webkit-box-shadow : inset 0 0 6px 3px rgba(0, 0, 0, .4);  /* Safari and Chrome */
    -moz-box-shadow    : inset 0 0 6px 3px rgba(0, 0, 0, .4);  /* Firefox */
    -o-box-shadow      : inset 0 0 6px 3px rgba(0, 0, 0, .4);  /* Opera */
    box-shadow         : inset 0 0 6px 3px rgba(0, 0, 0, .4);  /* CSS3 */
}

#askia-account-footer {

    /** @element */
    position   : absolute;
    bottom     : 0;
    width      : 100%;
    height     : 40px;
    left: 0;

    /** @decorator */
    background-color : #EEEEEE;
    zoom             : 1;
    border-top-width : 1px;
    border-top-style : solid;
    border-top-color : #DDDDDD;

    /** @font */
    font-size : 12px;
    color     : #BBBBBB;

    /** @text */
    vertical-align : middle;
}

#askia-account-footer p {

    /** @element */
    display         : -moz-inline-stack;
    display         : inline-block;
    vertical-align  : middle;
    *vertical-align : auto;
    zoom            : 1;
    *display        : inline;
    margin-top      : 12px;

    /** @text */
    vertical-align  : top;
    font-weight: normal;
}

#askia-browser-experience {

    /** @element */
    float       : left;
    margin-left : 5px;
}

#askia-powered-by {

    /** @element */
    float        : right;
    margin-right : 5px;
}

.askia-link-highlighter {

    /** @font */
    color : #BBBBBB;

    /** @text */
    text-decoration : underline;
}

.askia-link-highlighter:hover {

    /** @font */
    color : #A2A2A2;

    /** @text */
    text-decoration : underline;

    /** @animation */
    -webkit-transition-property        : all;
    -moz-transition-property           : all;
    -o-transition-property             : all;
    transition-property                : all;
    -webkit-transition-duration        : 0.3s;
    -moz-transition-duration           : 0.3s;
    -o-transition-duration             : 0.3s;
    transition-duration                : 0.3s;
    -webkit-transition-timing-function : ease-in-out;
    -moz-transition-timing-function    : ease-in-out;
    -o-transition-timing-function      : ease-in-out;
    transition-timing-function         : ease-in-out;
}

#askia-browser-mask {

    /** @element */
    width           : 490px;
    height          : 100%;
    max-height      : 188px;
    margin-top      : -94px;
    margin-right    : 0;
    margin-bottom   : 0;
    margin-left     : -245px;
    position        : absolute;
    z-index         : 1001;
    top             : 50%;
    left            : 50%;

    /** @decorator */
    background      : #171717;
    border          : 1px solid #000000;
    border-radius   : 5px;
    opacity         : .9;
    box-shadow      : 0px 1px 0px 0px #252525 inset, 0px 0px 8px 0px #000000;
}

#askia-browser-mask.obsolete-mask {
    height: 240px;
    max-height: 240px;
}

#askia-browser-modal {

    /** @element */
    width               : 490px;
    max-height          : 188px;
    margin-top          : -94px;
    margin-right        : 0;
    margin-bottom       : 0;
    margin-left         : -245px;
    z-index  : 1002;
    position : absolute;
    top      : 50%;
    left     : 50%;

    /** @decorator */
    -ms-box-shadow      : none;  /* Internet Explorer 9 */
    -webkit-box-shadow  : none;  /* Safari and Chrome */
    -moz-box-shadow     : none;  /* Firefox */
    -o-box-shadow       : none;  /* Opera */
    box-shadow          : none;  /* CSS3 */
    background          : transparent;
    border-radius       : 5px;
    opacity             : 1;
}

#askia-browser-main {
    position : relative;
}

#askia-browser-items .askia-obsolete-message {
    color: white;
    text-align: center;
    padding: 15px 0 4px 0;
    line-height: 1.3;
}

#askia-browser-items ul {

    /** @element */
    width       : 490px;
    list-style  : none;

    /** @text */
    text-align  : center;

    /** @decorator */
    opacity     : 1;
}

.askia-browser-item {
    display : inline-block;
    width   : 128px;
    padding : 15px;
}

.askia-browser-item img {

    /** @element */
    width           : 128px;
    height          : 128px;

    /** @decorator */
    filter          : url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter          : gray; /* IE6-9 */
    -webkit-filter  : grayscale(100%);

}

.askia-browser-item img:hover {

    /** @decorator */
    filter              : url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter              : none;
    -webkit-filter      : none;
}

.askia-browser-item a {

    /** @element */
    background          : none;

    /** @text */
    text-decoration     : none;
    font-size           : 16px;
    font-weight         : normal;
}

.askia-browser-item a span {

    /** @element */
    display     : block;
    padding     : 10px 0;

    /** @font */
    color       : #BBBBBB;
}

.askia-browser-item a:hover span {

    /** @element */
    background      : none;

    /** @fpmt */
    color           : #FFFFFF;

    /** @animation */
    -ms-transition     : color .4s ease-in-out;  /* Internet Explorer 9 */
    -webkit-transition : color .4s ease-in-out;  /* Safari and Chrome */
    -moz-transition    : color .4s ease-in-out;  /* Firefox */
    -o-transition      : color .4s ease-in-out;  /* Opera */
    transition         : color .4s ease-in-out;  /* CSS3 */
}