/****************************/
/****************************/
/** plato.login             */
/****************************/
/****************************/

#compatModeInfo{
	display: none;
	color: red;
}

form[name="login"] {
	width:      312px;
    height:     240px;
    position:   absolute;
    left:       50%;
    top:        35%; /* 50% == vCenter */
    margin:     -120px 0 0 -156px;
}

form[name="login"] p a,
form[name="login"] p a:link,
form[name="login"] p a:hover,
form[name="login"] p a:active,
form[name="login"] p a:visited{
    text-decoration: none;
    color:#525D63;
    background:url(img/link_arr.png) transparent 0 5px no-repeat;
    padding-left: 10px;
}

form[name="login"] p.loginFeedbackTxt{
    text-align:center;
    color:#D1362E;
    padding: 5px 0;
    margin:3px 0;
    min-height: 20px;
}

#loginWrapper{
    width:      312px;
    height:     240px;
    position:   absolute;
    left:       50%;
    top:        35%; /* 50% == vCenter */
    margin:     -120px 0 0 -156px;
}


div#loginFeedback{
    height: 28px;
    margin-top: 3px;
}

/**
 * User- and Password-Input-Fields
 **/
input.textInput {
   background:url(img/input_blur_bg.png) no-repeat;
    border: 1px solid transparent;
    font-family:Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size: 18px;
    color: #525D63;
    width: 286px; /*280px;      */             
    height: 54px;/*35px;*/                   
    padding: 0 10px 0 16px;/*3px 10px 0 10px;*/
    margin-bottom:  10px;
    display: block;
}

input.textInput:focus {
	border: rgb(40, 200, 220);
	border-width: 1px;
	border-style: solid;
	border-radius: 6px;
}

input.textInput::-ms-clear {
	display: none;
}

/**
 * Shaking the password-field if inputs are wrong
 **/
.shake {
	outline-color: red;
	-webkit-animation: shake .5s linear;
	animation: shake .5s linear;
	-moz-animation: shake .5s linear;
}

 @-webkit-keyframes shake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}

 @keyframes shake {
    8%, 41% {
        transform: translateX(-10px);
    }
    25%, 58% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-5px);
    }
    92% {
        transform: translateX(5px);
    }
    0%, 100% {
        transform: translateX(0);
    }
}

 @-moz-keyframes shake {
    8%, 41% {
        -moz-transform: translateX(-10px);
    }
    25%, 58% {
        -moz-transform: translateX(10px);
    }
    75% {
        -moz-transform: translateX(-5px);
    }
    92% {
        -moz-transform: translateX(5px);
    }
    0%, 100% {
        -moz-transform: translateX(0);
    }
}

.invisible{
    visibility: hidden;
}

/**
 * Login-Button
 **/

button[name=inputButton] {
    cursor: pointer;
    height: 44px;
    width: 310px;
    border: none;
}

button[name=inputButton]:focus {
    border-color: rgb(40, 200, 220);
    border-width: 1px;
    border-style: solid;
    border-radius: 6px; 
}

button[name=inputButton]:active {
	border: none;
}

button[name=inputButton].inactive {
	background: url(img/submit_bg_default_inactive.png) no-repeat;
}

button[name=inputButton].active {
    background: url(img/submit_bg_default.png) no-repeat;
}

button[name=inputButton].success {
    background: url(img/submit_bg_success.png) no-repeat;
}

button[name=inputButton].failed {
    background: url(img/submit_bg_failed.png) no-repeat;
}


/**
 * Profile-Select-Field
 **/
select[name=profileList] {
	width: 330px;/*312px;*/
    height: 54px;
    display: block;
    background: url(img/db_select_bg.png) no-repeat transparent !important;
    border: none;
    padding: 17px 0 17px 20px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    text-indent: 0.01px;
    text-overflow: '';
}

select[name="profileList"] option {
   color: rgb(0, 0, 0);
   padding: 5px 0 5px 20px;
   font-weight: normal;
   background-color: rgb(255, 255, 255); 
   border:none;
}

select[name=profileList] option:hover,
select[name=profileList] option:focus,
select[name=profileList] option:active,
select[name=profileList] option:checked {
   color: rgb(40, 200, 220);
   background: none;
}

select[name=profileList]:focus {
	outline: none;
}

/**
 * Workaround to remove inner focus-ring in Firefox 
 **/
select[name=profileList]:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #FFF;
}

div[name="profilWrapper"] {
	overflow: hidden;
	width: 312px;
}

/**
 * IE10-Workaround for hiding the select-drop-down-arrow
 **/
select[name=profileList]::-ms-expand {
    visibility: hidden;
}

select[name=profileList]::-ms-value {
    background: none;
}


/**
 * Logos
 **/

#logoBottomRight{
    position:absolute;
    bottom:5px;
    right: 10px;
    height:36px;
}

 p.logo{
    float:left;
    color: #414B50;
    font-weight:bold;
    margin: 12px 0 0 5px;
    font-size: 12px;
    padding: 0; 
}

#rememberLogin{
	float: left;
}

#forgottenPassword{
	text-align:right;
	padding: 2px 0 0 0 ;
}

input[name=stayLogged]{
	vertical-align: middle;
}

/**
 * PLATO-Styles for
 * jquery.selectBoxIt-Plugin
 **/
 
.selectboxit {
	background: url(img/db_select_bg.png) no-repeat transparent !important;
	border: none;
}

.selectboxit-container .selectboxit {
	width: 312px;
	height: 54px;
    color: rgb(255, 255, 255);
}

.selectboxit-text {
	font-size: 12px;
    font-weight: bold;
    text-indent: 0.01px;
    text-overflow: '';
    padding: 11px 0 17px 20px;
}

.selectboxit-arrow-container {
	padding: 16px 21px 0 0;
	
}

.selectboxit-btn.selectboxit-enabled {
	border: 1px solid transparent;
	border-radius: 6px;
}
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
    color: rgb(255, 255, 255);
    border-color: rgb(40, 200, 220);
/*    border-width: 1px;
    border-style: solid;
    border-radius: 6px;*/
}

.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
/*	background-color: rgb(40, 200, 220); */ /* Original PLATO-<a>-Tag-Farbe*/
	background-color: rgb(32, 161, 179); /* etwas dunklere angepasste Variante*/
	background-image: none;
}

.dropup {
	background: url(img/db_select_bg_dropup.png) no-repeat transparent !important;
}

#changePasswordBtn {
	display: none;
	height: 45px;
	width: 306px;
	border: 0px;
}

#changePasswordBtn span {
	font-size: 17px;
}

form input[name=passwordRepeat]{
	display: none;
}

input.textInput::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #9FA5A8;
}
input.textInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #9FA5A8;
	opacity: 1;
}
input.textInput::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #9FA5A8;
	opacity: 1;
}
input.textInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #9FA5A8;
}
input.textInput:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
	color: #9FA5A8;
}

div.loginInfoMessage {
	margin-top: 30px;
	text-align: center;
	line-height: 18px;
}