/* Variable Part */
@import "../../../../OEW_UI/css/ui_oew.css";
/* */

/* General layout
   ***************************************************** */
body { padding: 0; }
.page-title { font-size: 24px; margin-top: 20px; margin-bottom: 20px; margin-left: 20px; }
a { cursor: pointer; color: #aaaaaa; outline: none; text-decoration: none; }
a.active { color: #888888; }
a:hover, a:focus { color: #888888 } 

/* Logo
   ***************************************************** */
.login-header { position: absolute; top: 20px; right: 53px }
.login-header .logo { 
	width: 168px; height: 22px; background-image: url(../Images/logo.png); 
	-webkit-filter: invert(1) hue-rotate(190deg);
    filter: invert(1) hue-rotate(190deg);
}


/* Login form
   ***************************************************** */
.login-form, .reset-password-form { color: #000000; text-align: left; position: relative; font-size: 14px; display: inline-block; margin: 0 0 0 100px; background-color: #f6fafb; opacity: .9; border-style:solid; border-color: #a7a7a7; border-width:0.5px; top: 100px; left: 100px; box-shadow: 2px 2px 2px #888888; border-radius: 5px;}
.label { color: #000000; }
.row { width: 390px; margin-bottom: 20px;position: relative; }
.row.instructions { width: 360px; margin-bottom: 30px; font-size: 15px; line-height: 20px }
.row.error { color: #333333; width: 320px; min-height: 50px; padding: 10px 0 10px 40px; display: block; background-image: url(../Images/Icons/validation-exclamation-red.png); background-repeat: no-repeat; background-position: 9px center }
.row.error ul { margin: 0; padding: 0; }
.row.error ul li { list-style-type: none; margin: 10px 0 }

/* Language selector
   ***************************************************** */
.login-languages { float: left; width: 150px }
.login-languages a { padding-bottom: 10px; display: block; font-size: 15px } 



/* Controls
   ***************************************************** */
.login-controls { padding-left: 160px; }

.textbox { color: #000; font-size: 15px; width: 340px; margin: 0; padding: 7px 5px; border: 0px none; background-color: #fff; outline: none }
.validator { position: relative; left: -15px; top: 3px }
.label { display: block; margin-bottom: 5px  }

.buttons { text-align: right; }
.buttons a { color: #aaaaaa; padding-left: 50px; display: inline-block; padding: 2px 55px 5px 0; outline: none; box-sizing: border-box }
.buttons a.active:hover, .buttons a.active:focus { color: #888888; background-image: url(../Images/go.png); background-repeat: no-repeat;}
a.login-button { font-size: 32px; background-position: right center; }
a.remember-me {  font-size: 21px; visibility: hidden; display: inline-block; background-position: right center; }
a.remember-me.active { visibility: visible; }
.remember-me-checkbox { visibility: hidden; display: block; height: 1px; overflow: hidden; }

.forgot-password {position: absolute;right: 50px;top: 3px; font-size: 14px;}

.checkbox-option { margin-left: 10px; padding: 5px 10px; display: inline-block; }
.checkbox-option:hover, .checkbox-option:focus { color: #fff; }


/* Reset password
   ***************************************************** */
.buttons.done { text-align: left; }
.buttons.done a { font-size: 21px; }
.radio-buttons { width: 340px; margin-top: 30px; }
.radio-buttons div input { display: none; }
.radio-buttons div label { cursor: pointer; margin-bottom: 10px; padding-left: 10px; display: block; background-color: #1a9dc3 }
.radio-buttons div label span { margin: 10px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 270px; vertical-align: bottom;}
.radio-buttons div label:before { content: '.'; display: inline-block; overflow: hidden; color: transparent; width: 20px; height: 26px; background-repeat: no-repeat; background-position: -260px 1px; background-image: url(../Images/blue.png); }
.radio-buttons div input:checked + label { background-color: #3fadcc; }
.radio-buttons div input:checked + label:before  { background-position: -320px 1px; }
.radio-buttons div label:hover { background-color: #66bed7; }

/* Claims
   ***************************************************** */
.claims { margin-left: 60px; width: 550px; border-top: 1px solid #4AAFC9; padding: 30px 0 30px 40px; }
.claims .label { float: left; display: inline-block; width: 140px; vertical-align: top; margin-top: 8px; margin-bottom: 0 }
.claims .providers { margin-left: 150px; display: block; }
.claims .providers .claim { display: inline-block; margin-bottom: 10px; }
.claims .providers .claim a { display: inline-block; height: 35px; padding-left: 0; line-height: 35px; white-space: nowrap; width: 197px; text-overflow: ellipsis; overflow: hidden; }
.claims .providers .claim a i { opacity: 0.6; width: 35px; height: 35px; display: inline-block; width: 60px; text-align: center; }
.claims .providers .claim a:hover i { opacity: 1; }
.claims .providers .claim a img { max-width: 40px; vertical-align: middle; border: 0 none; }

/* build-in claims UI */
.claim.facebook i, .claim.twitter i, .claim.microsoft i, .claim.adfs i, .claim.google i, .claim.linkedin i { background-image: url(../Claims/claims.png); background-repeat: no-repeat;  }
.claim.facebook img, .claim.twitter img, .claim.microsoft img, .claim.adfs img, .claim.google img, .claim.linkedin img { visibility: hidden; width: 1px; height: 1px; overflow: hidden; }
.claim.facebook i {  background-position: center 0;  }
.claim.twitter i { background-position: center -35px; }
.claim.microsoft i { background-position: center -70px; }
.claim.adfs i { background-position: center -105px; }
.claim.google i { background-position: center -140px; }
.claim.linkedin i { background-position: center -175px; }