/* sso8_style.jsp */
/* ----- 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;
    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: 0 !important;
}

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

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

/* ---------- 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;
}

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


#logoarea span {
    padding: 0em;
    margin: 0em;
    font-family: "TeliaSans", Arial, sans-serif;
}

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


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

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




#agentlogoarea span {
    padding: 0em;
    margin: 0em;
    font-family: "TeliaSans", Arial, sans-serif;
}

#agentlogoarea a:link, a:active, a:visited, a:hover {
    color: #666;
    text-decoration: none;
    font-size: 1em;
    font-family: "TeliaSans", Arial, sans-serif;
}


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

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




.headertext2 {
    font-weight: 100;
}


/*---logo formatting */

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


#agentlogoarea img {
    text-indent: -624.938em;
    width: auto;
    height: 35px;
    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: "TeliaSans", "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: "TeliaSans", "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: "TeliaSans", "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: center;
}

.loginbuttons img {
    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: "TeliaSans", "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;
    padding: 0.5em 1em !important;
    line-height: 1.5em !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: 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: "TeliaSans", "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[type="text"], input[type="password"], input[type="tel"], input[type="email"] {
    font-family: "TeliaSans", "Arial", sans-serif;
    color: #000;
    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;
}

/* --- password app --- */

button.button{
    width: auto;
    border: none;
    cursor:pointer;
    background-color: #005eae;
    color: #fff;
    font-family: "TeliaSans", "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;
}

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

button.button:active{
    background-color: #999;
    color: #FFF;
    outline: none;
}
button.button{
    width: auto;
    border: none;
    cursor:pointer;
    background-color: #005eae;
    color: #fff;
    font-family: "TeliaSans", "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;
}

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

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

button.button[type="reset"] {
    background-color: transparent;
    color: #005eae;
    outline: none;
}

button.button:hover[type="reset"] {
    background-color: transparent;
    color: #666;
    outline: none;
}

button.button:active[type="reset"]{
    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;
}

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

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

.loginitem #mail {
    background: url("resource/icon-envelope.png") no-repeat scroll 0.563em 0.563em rgba(0, 0, 0, 0);
}

.loginitem #token {
    background: url("resource/icon-token.png") no-repeat scroll 0.563em 0.563em rgba(0, 0, 0, 0);
}
/* --- end password app --- */
/* --- 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.9em;
    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: 1.939em;
    font-size: 0.563em;
    float: left;
    height: 10.500em;
    position: relative;
}

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

.loginlogoimage img {
    vertical-align: middle;
}

.loginlogotext {
    bottom: 0;
    font-size: 1.1em;
    text-align: center;
}

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

.authlogo {
    float: left;
    line-height: 70px;
    height: 70px;
    width: 135px;
    display: inline-block;
    border-width: 1px;
    border-color: transparent;
    border-radius: 2px;
    border-style: solid;
    margin-top: 0em;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    padding-top: 0em;
    padding-left: 1.563em;
    padding-right: 1.563em;
    padding-bottom: 0em;
    text-align: center;
    text-decoration: none;
}

.authlogo:hover {
    border-width: 1px;
    border-color: #ddd;
    border-radius: 2px;
    border-style: solid;
}

.authlogo a {
    text-decoration: none;
    display:block;
    height:100%;
    width:100%;
}

.authlogo img {
    vertical-align: middle;
    color: black;
    font-size: 0.7em;
}


.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: "TeliaSans", "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: "TeliaSans", "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: "TeliaSans", "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:-371px;
    font-size:9pt;
    font-family:monospace;
    z-index:2;
    background-color:white;
    position: fixed;
    top: 48px;
    left: 50%;
    border: #aaa 1px solid;
    padding: 18px 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
}

#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;
}

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

#footer {
    float: left;
    font-family: "TeliaSans", "Arial", sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    max-width: 57em;
    /* padding-top:2em; */
    padding-bottom:2em;
    margin-left: 108px;
    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)
{

#otp {
    margin-left:0px;
    left:3px;
    top:3px;
    bottom:0px;
    right:0px;
    width:auto;
    overflow:scroll;
}

/* --- 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 {
    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;
}


}

@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: left;
}

#logoarea span.headertext {
    display:none;
}
#bodybottom {
    clear: both;
}
}

/* ---- Nixu changes ---- */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td,th {
	padding:0;
}
@font-face {
    font-family: 'TeliaSans';
    src: url('resource/TeliaSans-Regular.woff') format('woff'),
         url('resource/TeliaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
body,
#external,
#externaltext,
#ui-datepicker-div,
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
#logoarea span,
#logoarea a:link,
#logoarea a:active,
#logoarea a:visited,
#logoarea a:hover,
#languageselector a,
#exit a,
#login,
input.button,
.loginbuttons input.button,
input[type="text"],
input[type="password"],
button.button {
    font-family: "TeliaSans",Arial,sans-serif;
    font-size: 1em !important;
    border: 1px solid transparent;
}
input[type="text"], input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    height: 3.125rem;
    padding: 0 2.1875em;
    font-size: .875em;
    background-color: #fff;
    border: 1px solid #000;
    color: #222;
    -webkit-transition: border-color .3s ease,background-color .3s ease,color .3s ease;
    transition: border-color .3s ease,background-color .3s ease,color .3s ease;
}
input[type="text"][readonly], input[type="password"][readonly] {
    border: 0 !important;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 #e0e0e0;
    border-radius: 4px;
}
input[type="text"]:focus, input[type="password"]:focus, input#username:focus, input#password:focus {
    border: 1px solid #990ae3;
    outline: none;
}
input.button {
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    padding: 0 1.875rem;
    line-height: 42px;
    background-color: #990ae3;
    border-radius: 50px;
    border: 0;
    width: auto;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input.button[type=reset] {
    background-color: #fff;
    color: #990ae3;
    border: 1px solid #990ae3;
    display: inline-block;
}
body {
    background: #f2f2f2;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #222;
}
#logintitle, #externaltitle {
    font-family: "TeliaSans",Arial,sans-serif;
    text-transform: uppercase;
    border: 0;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 1.61732rem;
    line-height: 1.3em;
}

/*
 Styles related to the development for showing display name in UI and additional location for session id for smaller screens
 */
 #logintitle.nocaps, #externaltitle.nocaps {
    text-transform: initial !important;
    font-size: medium;
    font-weight: normal;
}

#logintitle span, #externaltitle span {
    display: block;
}

#logintitle span.spname, #externaltitle span.spname {
    font-size: x-large;
    font-weight: bold;
    line-height: 1.5em;
}

@media screen and (min-width: 600px) {
    #additionalsessionid {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    #view #bodycontent {
        padding: 20px 0 !important;
    }
}
/*
 End: Styles related to the development for showing display name in UI and additional location for session id for smaller screens
 */

#view {
    width: 100%;
}
#view #wrapper {
	max-width: 100%;
	margin: 0;
}
#view #header,
#view #bodycontent,
#view #footer {
	max-width: 100%;
	/* margin: 0; */
}
#view #header {
    height: 58px;
    position: relative;
    background: #990ae3;
    margin: 0;
    margin-top: 32px;
    padding: 0;
}
#view #header #logoarea span a {
    float: left;
}
#view #header #logoarea img {
	height: 58px;
}
#view #header #logoarea span.headertext {
    padding: 0 0 0 20px;
    float: left;
    display: none;
}
#view #header #logoarea span.headertext a {
    line-height: 58px;
    color: #FFF;
    display: inline-block;
}
#view #header #headertools {
	position: absolute;
	left: 0;
	top: -32px;
	max-width: 100%;
	width: 100%;
	background-color: #f2f2f2;
    color: #505050;
    height: 32px;
    font-size: 12px;
}
#view #header #headertools #locales, #view #header #logoarea > span {
	max-width: 1920px;
	margin: 0 auto;
	float: none;
	padding: 0 108px;
    display: block;
}
#view #header #headertools #locales #languageselector {
	text-align: left;
}
#view #header #headertools #locales #languageselector a {
	font-size: inherit;
	color: #505050;
	text-decoration: none;
	line-height: 32px;
	border-right: 1px solid #a0a0a0;
	padding: 0 5px;
}
#view #header #headertools #locales #languageselector a:hover {
	color: #505050;
}
#view #header #headertools #locales #languageselector li:last-child a {
	border: 0;
}

#view #bodycontent {
	display: block;
	padding: 60px 0;
}
#view #bodycontent #general,
#view #bodycontent #signin {
	max-width: 830px;
	width: 100%;
	padding: 0 108px;
	/* margin: 0 auto; */
	display: block;
	float: none;
}
#view #bodycontent #signin #external, #view #bodycontent #signin #login {
	padding: 45px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
#view #bodycontent #signin .loginitem {
	padding: 0;
}
.loginitem #newpassword,
.loginitem #newpasswordconfirm,
.loginitem #mail,
.loginitem #token,
.loginitem #username,
.loginitem #password {
    background-position: 15px 50% !important;
    padding-left: 40px;
}

.loginitem #password[class="readonly"] {
    font-size: 22px;
    line-height: 0;
    font-family: "TeliaSans",Arial,sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

#view #bodycontent #signin #external .loginbuttons {
	margin: 0;
}
#view #bodycontent #signin .loginbutton {
	overflow: hidden;
	padding: 0;
}
#view #bodycontent #signin .loginbutton span {
	width: 50%;
	float: left;
	text-align: left;
}
#view #bodycontent #signin .loginbutton span:last-child {
	text-align: right;
}
#view #bodycontent #signin .loginbutton span .button {
	margin: 0.938em 0 0 0;
}
#view #bodycontent #signin #external .logingroupheading {
	margin: 0;
	padding: 15px 0;
	border: 0;
	font-weight: bold;
}
#view #bodycontent #signin #external .authlogo {
	/* width: 33.3333%; */
	background: #FFF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	height: 70px;
	padding: 0;
	position: relative;
	transition: all 0.1s;
    display: flex;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
}
#view #bodycontent #signin #external .authlogo:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	z-index: 2;
}
#view #bodycontent #signin #external .authlogo a {
    display: block;
	width: 100%;
	float: left;
    height: auto;
    position: relative;
}

#view #bodycontent #signin #external .authlogo a img {
    width: auto;
    height: auto;
    max-height: 34px;
    max-width: calc(100% - 30px);
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
}
#view #bodybottom {
	width: 100%;
	padding: 0 95px;
	margin: 0;
	display: block;
	/* float: none;
	visibility: hidden; */
}

/* RESPONSIVE */
@media only screen and (max-width : 990px) {
	#view #bodycontent #general, #view #bodycontent #signin, #view #header #headertools #locales, #view #header #logoarea > span {
		padding: 0 60px;
	}
	#view #bodybottom {
		padding: 0 45px;
	}
    #footer {
        margin-left: 60px;
    }
}
@media only screen and (max-width : 855px) {
	#view #bodycontent #general, #view #bodycontent #signin, #view #header #headertools #locales, #view #header #logoarea > span {
		padding: 0 60px;
	}
	#view #bodybottom {
		padding: 0 45px;
	}
    #footer {
        margin-left: 60px;
    }
}
@media only screen and (max-width : 768px) {
	#view #bodycontent #general, #view #bodycontent #signin, #view #header #headertools #locales, #view #header #logoarea > span {
		padding: 0 60px;
	}
	#view #bodybottom {
		padding: 0 65px;
	}
    #footer {
        margin-left: 60px;
    }
}
@media only screen and (max-width : 480px) {
	#view #bodycontent #general, #view #bodycontent #signin, #view #header #headertools #locales, #view #header #logoarea > span {
		padding: 0 15px;
	}
	#view #bodycontent #signin #external, #view #bodycontent #signin #login {
		padding: 15px;
	}
	#logintitle, #externaltitle {
		font-size: 1.41732rem;
	}
	#view #bodybottom {
		padding: 0 15px;
	}
    #footer {
        margin-left: 20px;
    }
}
@media only screen and (max-width : 410px) {
	/* #view #bodycontent #signin #external .authlogo {
		width: 50%;
	}*/
	#view #bodybottom {
		padding: 0 15px;
	}
	#footer {
               margin-left:20px;
        }
}
@media only screen and (max-width : 210px) {
	#view #bodycontent #signin #external .authlogo {
	       width: 70%;
	}
	#view #bodybottom {
	       padding: 0 15px;
	}
	#footer {
               margin-left:20px;
        }
}

.flex-center-container {
    display: flex;
    justify-content: center;
}

/* Spinner styles */

.spinner, .spinner > .path {
    --spinner-offset: 70;
    --spinner-duration: 1.6s;
}

.spinner {
    animation: spinner-rotator var(--spinner-duration) linear infinite;
}

@keyframes spinner-rotator {
    0% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(240deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.spinner > .path {
    stroke-dasharray: var(--spinner-offset);
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: spinner-dash var(--spinner-duration) ease-in-out infinite;
}

@keyframes spinner-dash {
    0% {
        stroke-dashoffset: var(--spinner-offset);
    }
    50% {
        stroke-dashoffset: var(--spinner-offset)/4;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: var(--spinner-offset);
        transform: rotate(450deg);
    }
}
/* End of Spinner styles */

#exit {
    display: none;
}

#wrapper {
    text-align: unset;
}