/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Body & typography */
body {
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    /*font-weight: 300;*/
    font-size: 16px;
    line-height: 130%
}

select, option, input[type="radio"], button {
    cursor: pointer
}

div .left {
    float: left
}

div .right {
    float: right
}

h1,
h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 130%
}

h2 {
    margin: 43px 0 0 0
}

h3 {
    font-weight: 300
}

p {
    font-size: 16px;
    margin: 7px 0 9px;
    font-weight: 300
}

a {
    color: #157bc9
}

a:hover {
    color: #18649e
}

.smalltext {
    font-size: 14px
}

.graytext {
    color: #6c6c6c
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none
}

input[type="number"] {
    -moz-appearance: textfield
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Wrap */
#wrap {
    width: 100%;
    max-width: 560px;
    min-width: 320px;
    height: auto;
    display: inline-block
}

div#head {
    padding: 0
}

div#head a {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div#content {
    width: 100%;
    height: auto;
    display: inline-block;
    text-align: center
}

div#content > div.cycle-slideshow {
}

div#content div {
    width: 100%;
    height: auto;
    text-align: left
}

div#content > div.cycle-slideshow > div.cycle-slide form#create {
    min-height: 600px
}


.unhappyMessage {
    display: block;
}

/* !?= */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Unauth */
#content div.unauth {
    width: 100%;
    height: auto;
    display: inline-block
}

#content div.unauth div.center {
    width: 100%;
    display: inline-block;
    text-align: center
}

.error {
    background: #ed1c24;
    padding: 8px 8px 7px 8px;
    color: #fff
}

/* Create new user - Step 2 */
#content div.unauth form#create div.slide-container div label.profile.smalltext {
    padding: 6px 0 0 0
}

/* Create new user - Step 3 */
.password1 {
    position: relative;
    height: 44px !important
}

.password1 > input {
    position: absolute;
    z-index: 3;
    background-color: transparent;
}

.password1 > div {
    position: absolute;
    width: 90%;
    left: 46px;
    top: 0;
    z-index: 2;
    height: 44px;
}

.password1 > div > div {
    width: 100%;
    height: 44px;
    padding-right: 6px;
    display: inline-block;
    line-height: 44px;
    font-size: 12px;
    text-align: right
}

.password1 a.button_strength {
    display: none
}

/*
	.strength_meter div {width:0%; height:43px; text-align:right; color:#000; line-height:43px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-right:12px; border-radius:5px}
	.strength_meter div p {position:absolute; top:22px; right:0px; color:#FFF; font-size:13px}
	.veryweak {background-color:#FFA0A0; border-color:#F04040!important; width:25%!important}
	.weak 		{background-color:#FFB78C; border-color:#FF853C!important; width:50%!important}
	.medium 	{background-color:#FFEC8B; border-color:#FC0!important; width:75%!important}
	.strong 	{background-color:#C3FF88; border-color:#8DFF1C!important; width:100%!important}
*/

div.password {
    position: relative
}

div.password input {
    background-color: transparent;
    position: relative;
    z-index: 2
}

div.password div.strength_meter {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

div.password div.strength_meter > div {
    width: 100% !important;
    height: 44px !important;
    display: inline-block;
    font-size: 0
}

div.password div.strength_meter > div.veryweak {
    background-color: #FFA0A0;
    border-color: #F04040 !important;
    width: 25% !important
}

div.password div.strength_meter > div.weak {
    background-color: #FFB78C;
    border-color: #FF853C !important;
    width: 50% !important
}

div.password div.strength_meter > div.medium {
    background-color: #FFEC8B;
    border-color: #FC0 !important;
    width: 75% !important
}

div.password div.strength_meter > div.strong {
    background-color: #C3FF88;
    border-color: #8DFF1C !important;
    width: 100% !important
}

/* Forgot password */
#content div.unauth div form div.slide-container label.forgot {
    font-size: 14px
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Forms */
div.slide-container {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 20px 0
}

div.slide-container > div {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 7px 0;
    display: inline-block
}

div.slide-container > div * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

/* Select */
div.slide-container div.customselectwrap {
    width: 100%
}

div.slide-container div.customselectwrap select,
div.slide-container div.customselectwrap span span {
    width: 100% !important
}

div.slide-container div > span.customSelect {
    height: 44px;
    line-height: 44px;
    width: 100%
}

div.slide-container div > select option {
    padding: 7px 0 7px 57px
}

/* Input & Select height */
div.slide-container input, div.slide-container select {
    height: 44px
}

/* Inputs & Select style */
div.slide-container > div input,
div.slide-container > div select,
div.slide-container > div textarea,
div.slide-container > div span.customSelect {
    width: 100%;
    display: inline-block;
    padding-left: 58px;
}

input,
select,
textarea,
span.customSelect {
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    font-size: 18px;
    color: #333;
    box-shadow: 0px 3px 3px -3px #CCC inset
}

/* Checkbox */
div.terms {
    position: relative;
    display: inline-block;
    float: none
}

div.checkbox {
    float: left;
    margin-right: 10px
}

div.checkbox,
div.checkbox input,
div.checkbox label {
    height: 20px !important;
    width: 20px !important;
    margin: 0;
    padding: 0
}

div.checkbox input,
div.checkbox label {
    position: relative;
    top: 0;
    left: 0
}

div.checkbox input {
    z-index: 1
}

div.checkbox label {
    display: inline-block;
    z-index: 2;
    border-radius: 2px;
    border: 1px solid #d5d505;
    background: #fff;
    box-shadow: 0 3px 3px -3px #CCC inset
}

div.checkbox input[type=checkbox]:checked + label {
    background-color: #FFF
}

html.ie7 div.checkbox input, html.ie8 div.checkbox input {
    z-index: 9
}

/* Internet Explorer 8 + 7 override */
div.terms > label {
    padding-left: 7px;
    line-height: 22px
}

/* Labels */
label {
    display: inline-block;
    color: #333;
}

label.before {
    float: left
}

label.after {
    float: right
}

label.profile {
    margin-top: -1px;
    line-height: 18.3px
}

/* Textarea */
textarea {
    height: 180px;
    width: 100%;
    padding: 6px 7px !important;
    font-family: 'Source Sans Pro';
    font-size: 14px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Footer */
* {
    margin: 0
}

html, body {
    height: 100%
}

#wrap {
    min-height: 100%;
    margin-bottom: -220px
}

#wrap:after {
    content: "";
    display: block
}

.site-footer, #wrap:after {
    height: 220px
}

/* Footer - Language selection */
#footer {
    display: inline-block;
    opacity: 0.75
}

#footer form.lang {
    width: 230px;
    height: 34px;
    display: block;
    clear: both;
    margin: 20px auto;
    line-height: 34px
}

#footer form.lang * {
    display: inline-block !important;
    height: auto !important
}

#footer form.lang > div.slide-container > div > *, form.lang > div.slide-container > div > select option {
    padding-left: 5px
}

#footer form.lang > div.slide-container > label {
    width: auto;
    display: inline-block;
    padding-right: 8px;
    cursor: default
}

#footer form.lang > div.slide-container > div {
    width: 140px;
    margin: 0
}

#footer form.lang > div.slide-container > div > span > span {
    float: left;
    line-height: 34px;
    text-align: left
}

#footer form.lang > div.slide-container > div > select > option {
    display: block !important
}

/* Footer - small text & card */
#footer p {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 3px 0 0 0;
    font-size: 13px;
    color: #515151;
    text-shadow: 0 1px 0 #fff
}

#footer p > span {
    display: inline;
    padding: 0 6px
}

#footer p.small {
    margin: 16px 0 0 0;
    font-size: 12px
}

#footer p.small span.cards {
    height: 22px;
    width: 100%;
    margin: 5px 0 4px 0
}

#footer p.small span span {
    display: inline;
    padding: 0 2px
}

#footer p.small span.cards img {
    display: block;
    margin: 0 auto;
    height: 22px;
    width: auto
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * Tablets & Desktop * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (min-width: 569px) {

    /* Forms */
    div.slide-container input, div.slide-container select {
        margin: 6px 0px
    }

    /* Header */
    div#head, div#head a {
        height: 120px;
        margin: 0 0 30px 0
    }

    div#head a {
        background-position: center;
        background-repeat: no-repeat;
        background-color: #eaeaea;
        background-size: auto 80px;
    }


    /* Content */
    #content div.unauth {
        max-width: 460px
    }

    /* Sign in */
    form.signin {
        max-width: 460px;
        position: relative;
        height: 180px;
    }

    form.signin div.slide-container > div {
        width: 75% !important;
        float: left
    }

    form.signin div.slide-container > input.submit {
        width: 22% !important;
        height: 102px;
        line-height: 102px;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 7px
    }

}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * Smartphones * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 568px) {

    /* Forms */
    div.slide-container input, div.slide-container select {
        margin: 0
    }

    /* Wrap */
    #wrap {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 10px
    }

    /* Header */
    div#head, div#head a {
        height: 78px;
        margin: 0 0 8px 0
    }

    div#head a {
        background-position: center 16px;
        background-repeat: no-repeat;
        background-color: #eaeaea;
        background-size: auto 50px
    }


    /* Content */
    /* Create user */
    #content div.unauth a.create {
        width: 100%
    }

    /* Font-sizes */
    label, div.slide-container > div span.customSelect, a.help, .button {
        font-size: 16px
    }

    table, .note {
        font-size: 12px
    }


    /* Footer */
    #footer {
        padding: 0 10px
    }
}


@media (max-width: 319px) {
    #wrap {
        width: 320px
    }
}

div.inputwithhelpwrap, #content div.inputwithhelpwrap {
    position: relative;
}

div.helpiconwrap, #content div.helpiconwrap {
    position: absolute;
    top: 0px;
    left: 100%;
}

div.helpicon, #content div.helpicon {
    background-image: url(sprite.png);
    background-repeat: no-repeat;
    background-size: 45px 670px;
    background-position: 0 -540px;
    width: 26px;
    height: 30px;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -28px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    div.helpicon {
        background-image: url(sprite@2.png);
    }
}

div.helpbox {
    z-index: 1000;
    background-color: #ffd;
    padding: 10px;
    position: absolute;
    left: -100%;
    top: 44px;
    display: inline-block;
    border: 1px solid #000;
    width: 100%;
}


/* Receipt display */
body {
    position: relative !important;
}

#receiptDisplay {
    display: none
}

#receiptDisplay.visible {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    z-index: 999;
}

#receiptDisplay:after {
    content: "X";
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    font-family: 'arial';
    font-weight: 600;
    position: absolute;
    top: 150px;
    right: 50%;
    margin-right: -136px;
    z-index: 9999;
    background: #ff2f39;
    color: #FFF;
    border-radius: 15px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

#receiptDisplay:after:hover {
    background: #f0f !important
}

#receiptDisplay > div {
    width: 290px;
    height: auto;
    padding: 15px;
    max-height: 500px;
    overflow-y: scroll;
    display: inline-block;
    margin-top: 140px;
    background: #FFF;
    position: relative;
}

#transactionhistorydivWt a#viewReceipt {
    height: 18px;
    width: 18px;
    display: inline-block;
    background: url("../img/inspect.png");
    position: relative;
    top: 2px;
}

#transactionhistorydivWt a#viewReceipt:hover {
    opacity: 0.75
}