/*
 * /WEB-INF/template/resources/style/globalsign_sso.css
 */

/* ----- Accent color: change #005eae to whatever you want to change the accent color. Works best with darker/saturated colors */

/* ---------- Common ---------- */

html, body {

    width:100%

}

body {
    margin: 0em;
    padding: 0;
    border: none;
    background-color: #fff;
    font-size: medium;
    -webkit-font-smoothing: antialiased;
    moz-osx-font-smoothing: grayscale;
}

img {
    margin: 0em;
    padding: 0em;
    border: none;
}

label {
    float: left;
    width: 45%;
    margin-right: 0em;
}

input {
    margin-left: 0em;
    margin-right: 0em;
    width: 45%;
}

input[type="checkbox"] {
    margin-left: 0.5em;
    width: auto;
}

div.left-align {
    text-align: left;
}


select {
    margin: 0.5em 0em;
    width: 45%;
}

ul {
    list-style: none;
    padding-bottom: 0.31em;
    padding-left: 0.0em;
    margin: 0em;
} 

a:link {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

form {
    margin: 0em;
    padding: 0em;
    display: inline;
}

p {
    margin: 0em;
    padding: 0em;
}

/* ------ View & Wrapper ------ */

#view {
    width: 98%;
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;
}

#viewtd {
    text-align: left;
    vertical-align: initial;
}

#wrapper {
    max-width: 57em;
    margin-top: 0.2em;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ---------- Header ---------- */

#header {
    max-width: 57em;
    padding-top:2em;
    padding-bottom:0.01em;
    margin-left:1%;
    margin-right:1%;
}

#logoarea {
    padding: 0em;
    margin-bottom: 0.938em;
    display: block;
}

#logoarea span {
    padding: 0em;
    margin: 0em;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#logoarea a:link, a:active, a:visited, a:hover {
    color: #666;
    text-decoration: none;
    font-size: 1em;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*--- logo area text link ---*/

#logoarea span.headertext {
    padding-left: 6.25em;
}

.headertext2 {
    font-weight: 100;
}


/*---logo formatting */

#logoarea img {
    text-indent: -624.938em;
    width: auto;
    height: 100px;
    background-size: auto 35px;
}

#headertools {
    max-width: 57em;
}

#locales {
    float: left;
    background: transparent;
}

#languageselector {
    text-align: right;
}

#languageselector li {
    display: inline;
    list-style-type: none;
    text-align: right;
}

#languageselector a {
    color: #111;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    font-size: 0.6em;
}

.selectedlocale a {
    text-decoration: none;
}

/*--- exit link --- */

#exit {
    float: right;
    background: transparent;
}

#exit a {
    color: #005eae;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    font-size: 0.6em;
}

#exit a:hover{
    color: #666;
}

#exit ul {
}

#exit li {
    display: inline;
    list-style-type: none;
}

/*--- ??? --- */

#headertoolsend {
    clear: both;
}

/* ---------- Body Content ---------- */

#bodycontent {
    max-width: 57em;
    display: inline;
}

#general,
#signin {
     display:inline;
     float: left;
     width: 45%;
     position: relative;
}

#general {
     padding-left: 1%;
     padding-right: 4%;      
}

#signin {
     padding-left: 4%;
     padding-right: 1%;      
}


#login {
    margin-bottom: 0.625em;
    padding-bottom: 0.313em;
    background: #fff;
    color: #333;
    text-align: left;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    border-style: none;
    border-width: 0px;
    border-color: ;
}

#logintitle {
    padding-top: 0.313em;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.313em;
    background: #FFF;
    color: #111;
    border-bottom: 1px solid #747474;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.5em;
}

.logintext {
    padding-top: 0.313em;
    padding-bottom: 0.313em;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
}

.loginnote {
    margin: 0;
    padding-top: 0.313em;
    padding-left: 1.563em;
    padding-right: 1.563em;
    padding-bottom: 0.313em;
    font-size: 0.7em;
    line-height: 1.5em;
    font-weight: normal;
}

.loginitemlist {
    margin: 0em;
    padding: 0em;
}

.loginitem {
    margin: 0em;
    padding-top: 0.313em;
    padding-left: 1.563em;
    padding-right: 1.563em;
    font-size: 1em;
    font-weight: normal;
}

.loginitemheading {
    font-size: 1em;
    font-weight: normal;
    padding-top: 0.313em;
    padding-left: 1.563em;
    padding-right: 1.563em;
    border-top: 1px solid #747474;
}

.loginitem label {
    margin-top: 0.5em;
    margin-bottom: 0em;
    font-size: 1em;
    font-weight: normal;
}

.loginitem input {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.readonly {
    margin: 0em;
    padding: 0em;
    border-style: solid;
    border-color: lightgrey;
    background: #ddd;
}

#loginerror {
    margin-top: 0em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0.188em;
    padding-top: 0.375em;
    padding-left: 0.938em;
    padding-right: 0.938em;
    padding-bottom: 0.375em;
    background: transparent;
    color: red;
    font-size: 0.8em;
    font-weight: bold;
}



.loginbuttons {
    background: #fff;
    text-align: left;
    margin-left: -0.938em;
}

#external .loginbuttons {
    text-align: left;
}

.loginbuttons img {

    padding: 1em;
    vertical-align: middle;
}

.loginbuttons a {

    color: transparent;
}

.loginbutton {
    margin-top: 0em;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    border: none;
    padding-top: 0em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 0.625em;
    clear: both;
    width:100%;
    text-align:right;
}

loginbutton > input{

    float: right;
}


/*---- login button style---*/

input.button{
    width: auto;
    border: none;
    cursor:pointer;
    background-color: #005eae;
    color: #fff;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.1em; 
    font-weight: normal; 
    padding-top:0.5em;
    padding-bottom:0.5em;
    padding-left: 1.563em;
    padding-right: 1.563em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:0.938em;
    margin-left:0.938em;
    margin-right:0;
    -webkit-user-select: none;
    -moz-user-select: none;     
    -ms-user-select: none;      
    -o-user-select: none;
    user-select: none; 
    outline: none;
}


input.button:hover{
    background-color: #666;
    color: #FFF;
    outline: none;
}

input.button:active{
    background-color: #999; 
    color: #FFF; 
    outline: none;
        
}

/**** OTP and SMS buttons ***/

.loginbuttons input.button{
    background-color: #005eae;
    color: #fff;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.1em; 
    font-weight: normal;
}

.loginbuttons  input.button:hover{
    color: #FFF;
    outline: none;
}

.loginbuttons  input.button:active{
    background-color: #999; 
    color: #FFF; 
    outline: none;
}

/*---- cancel button is styled differently. CSS is dependant on the value so any other value needs to be added here ---*/

input.button[value="Cancel"] { 
    background-color: transparent;
    color: #005eae;
    outline: none;
}

input.button:hover[value="Cancel"] { 
    background-color: transparent;
    color: #666;
    outline: none;
}

input.button:active[value="Cancel"]{
    background-color: transparent;
    color: #999;
    outline: none;
}

input.button[value="Peruuta"] { 
    background-color: transparent;
    color: #005eae;
    outline: none;
}

input.button:hover[value="Peruuta"] { 
    background-color: transparent;
    color: #666;
    outline: none;
}

input.button:active[value="Peruuta"]{
    background-color: transparent;
    color: #999;
    outline: none;
}

/*---- login fields ---*/

input#username, input#password {
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    color: #999;
    font-size: 0.9em;
    line-height: ;
    border: 1px solid #999;
    padding: 0.5em 0.5em 0.5em 1.875em;
    margin-bottom: 0.313em;
    width: 100%;
    -webkit-border-radius: 0em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

input#username:focus, input#password:focus{
   border: 1px solid #005eae;
   outline: none;
}

/* --- pikkulogot ---*/

.loginitem #username {
    background: url("resource/icon-login-user.png") no-repeat scroll 0.563em 0.563em rgba(0, 0, 0, 0);
    
}
.loginitem #password {
    background: url("resource/icon-login-lock.png") no-repeat scroll 0.563em 0.563em rgba(0, 0, 0, 0);
    
}

.loginbutton span {
    margin: 0em;
}

/*----------- ???? -----------*/

.button {
    margin: 0em;
    font-size: 0.813em;
    width: auto;
}

.loginlink {
    font-size: 0.8em;
}

.loginlink a {
    color: #005eae;
    font-weight: normal;
}

.logingroupheading {
    margin-top: 0.625em;
    margin-left: 0.313em;
    margin-right: 0.313em;
    margin-bottom: 0.625em;
    padding-top: 0.313em;
    text-align: left;
    font-size: 0.625em;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 0.063em;
    border-color: lightgrey;
    clear: both;
}

.logingroupend {
    clear: both;
}

.loginlogo {
    margin-top: 0em;
    margin-left: 0.313em;
    margin-right: 0.313em;
    margin-bottom: 0.313em;
    font-size: 0.563em;
    float: left;
    height: 5.500em;
    position: relative;
}

.loginlogoimage {
    height: 4.688em;
    line-height: 4.688em;
    top: 0;
}

.loginlogoimage img {
    vertical-align: middle;
}

.loginlogotext {
    bottom: 0;
    font-size: 0.8em;
}

.loginlogotext a {
    color: #005eae;
    font-weight: normal;
}

.authlogo {
    margin-top: 0em;
    margin-left: 0.313em;
    margin-right: 0.313em;
    margin-bottom: 0em;
    padding-top: 0em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 0em;
    width: auto;
    text-decoration: none;
}

.authlogo a {
    text-decoration: none;
}

.consentitem {
    text-align: left;
    margin-left: 0.838em;
    margin-right: 0.625em;
}

.consentitem table {
    margin: auto;
}

.consentitem label {
    width: auto;
    text-align: left;
}

.consentitem input {
    margin-top: 0.688em;
    width: auto;
}

/*---- external widget ---*/

#external {
    margin-bottom: 0.625em;
    padding-bottom: 0.625em;
    background: #fff;
    color: #333;
    text-align: left;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    border-style: none;
    border-width: 1px;
    border-color: #FFA529;
}

#externaltitle {
    padding-top: 0.313em;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.313em; 
    background: #FFF;
    border-bottom: 1px solid #747474;
    color: #111;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.5em;
}

#externaltext {
    padding-top: 0.313em;
    padding-bottom: 0.313em;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
}

#externalend {
    clear: both;
}

/*---- intro widget ---*/

#intro {

    margin-bottom: 0.625em;
    padding-bottom: 0.625em;
    background: #fff;
    text-align: left;
    color: #333;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    border-style: none;
    border-width: 1px;
    border-color: #FFA529;
}

#introtitle {
    padding-top: 0.313em;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.313em;
    background: #FFF;
    border-bottom: 1px solid #747474;
    color: #111;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.5em;
}

#introtext {
    padding-top: 0.313em;
    padding-bottom: 0.313em;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
}

#help {
    margin-bottom: 0.625em;
    padding-bottom: 0.625em;
    background: #fff;
    text-align: left;
    color: #333;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    border-style: none;
    border-width: 1px;
    border-color: #FFA529;
}

#helptitle {
    padding-top: 0.313em;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.313em;
    background: #FFF;
    border-bottom: 1px solid #747474;
    color: #111;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.5em;
}

#helptext {
    padding-bottom: 0.313em;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
}

.print { display: none; }

#otplist {
    margin:auto;
}

#otp {
    text-align:left;
    width:700px;
    height:auto;
    margin-left:350px;
    font-size:9pt;
    font-family:monospace;
    z-index:2;
    background-color:white;
    position: fixed;
    top: 48px;
    left: 50%;
    border: 1px solid;
    padding-bottom: 1em;
}

#otp input[type="button"] {
    width:auto;
}

#otplist td.index {
    text-align:right;
}

#otplist td.value {
    padding-right: 1em;
}

#helplinks {
    margin: 0;
}

#helpselector li
{
    display: block;
    list-style-type: none;
    padding-right: 1.563em;
    padding-top: 0.625em;
    color: #005eae;
    font-size: 1em;
    font-weight: normal;
}

#helpselector a
{
    color: #005eae;
}

#helpselector a:hover
{
    color: #666;
}

#bodybottom {
    clear: both;
}

/* ---------- Footer ---------- */

#footer {
    float: right;
    font-family: "HelveticaNeue\00002DLight", "Helvetica\000020Neue\000020Light", "Helvetica\000020Neue", "Helvetica", "Arial", sans-serif;
    font-size: 0.7em;
    font-weight: normal;
    max-width: 57em;
    padding-top:2em;
    padding-bottom:2em;
    margin-left:1%;
    margin-right:1%;
}

#legal {
    margin: 0em;
    display: block;

}

#legal a {
    color: #959595;
    padding-left: 0.938em;
    padding-right: 0.938em;
}


/* ----- Responsive code ----- */


/* ----- Really small screen devices ----- */

@media only screen and (max-width : 320px)
{


/* ----- Mobile phones ---- */

}

@media only screen and (max-width : 640px)

{

#general, #signin, .loginitem {
        margin-left: 1%;
        margin-right: 1%;
        max-width: 98%;
        width: 98%;
        padding-left: 0;
        padding-right: 0;
}

.loginbuttons img{
        padding-left: 0em;
}

#general *, #header, #signin div, #logoarea img, #helpselector a{
        margin-left: 0em;
        margin-right: 0em;
        padding-left: 0em;
        padding-right:0em;
}


#languageselector, #languageselector li{
        padding-left: 0em;
        padding-right: 0em;
        margin-left: 0em;
        margin-right: 0em;
}

#helpselector a {

        padding-left: 0;
}



}




/* ---- iPads---- */

@media only screen and (max-width : 768px)
{

/* --- Div rearrange code --- */

#bodycontent  { display: table; }
#general  { display: table-footer-group; }
#signin { display: table-header-group; }

#general, #signin{
        float: none;

}

div#externalend {
        display: none;
        
#external {
        margin-bottom: 0;
        padding-bottom: 0;

}
}

/* --- Div rearrange code end --- */


#general, #signin, .loginitem {
        margin-left: 1%;
        margin-right: 1%;
        max-width: 98%;
        width: 98%;
        padding-left: 0;
        padding-right: 0;
}

#header {
        margin-left: 1%;
        margin-right: 1%;

}

#intro, #help, #login, #external {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

}

#introtitle, #helptitle, #logintitle, #externaltitle {
        border-bottom: none;

}

input#username, input#password, input.button, .loginbuttons input.button {
        width: 100%;
        margin-left: 0;
}

.loginitemheading {

        padding-top: 1em;
        padding-left: 1.563em;
        padding-right: 1.563em;
        border-top: none;
}

.loginbuttons {
        margin-left: 0;
}

.loginbutton{
        text-align: left;

}


}

@media only screen and (min-width: 641px) and (max-width : 768px){


.loginitem {
        margin-left: 1%;
        margin-right: 1%;
        max-width: 90%;
        width: 90%;
        padding-left: 0;
        padding-right: 0;
}

}



/* ---- iPad landscape, old computers---- */

@media only screen and (max-width : 1024px)
{

 body {
        
        
 }



#view {
width: 98%;
height: 100%;
margin-left: 1%;
margin-right: 1%;
}
 
#footer {
text-align: center;
}
 
#logoarea span.headertext {
    display:none;
}
                
}