@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/OpenSans-Light.woff") format('woff'),
       url('../fonts/OpenSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/OpenSans-Regular.woff") format('woff'),
       url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/OpenSans-Semibold.woff") format('woff'),
       url("../fonts/OpenSans-Semibold.ttf") format('truetype');

}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/OpenSans-Bold.woff") format('woff'),
       url("../fonts/OpenSans-bold.ttf") format('truetype');
}
input[type="submit"],input[type="button"], textarea {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    
}

::-webkit-input-placeholder {
    color: #080807;
    font-weight: 100;
}

:-moz-placeholder { /* Firefox 18- */
    color: #080807;
    font-weight: 100;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #080807;
    font-weight: 100;
}

:-ms-input-placeholder {
    color: #080807;
    font-weight: 100;
}

.inputBox {
    background-color: #efefef;
}

body {
    /*  --background:#182033 url("../../../WizletResources/Shared/media/img/bg_blueLines.png") top center fixed no-repeat;*/
    color: #fff;
    font-size: 11px;
    font: 400 10px/1.5em 'Open Sans', Arial, sans-serif;
    background-image: url(../../../WizletResources/Shared/media/img/cloud_bkg.jpg);
    background-position: center center;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
}

a {
    color: #fff;
}

.cancelLink {
    background-color: #FF4F35;
    height: 20px;
    text-decoration: none;
    padding: 0 10px;
    line-height: 22px;
    float: left;
    font-family: arial;
    font-size: 13px;
}

.selfregister {
    float: right;
    text-decoration: underline;
    cursor: pointer;
}

h2 {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin-top: 0;
}

ul, li {
    margin: 0;
    padding: 0;
}

ul {
    padding-left: 20px;
}

#loginBox {
    overflow: hidden;
    float: none;
    padding:20px 0;
    margin: 0 auto;
}
@media (min-width: 768px) {
    #loginBox {
        padding: 0;
        margin: 0;
        position: absolute;
        top:50%;
        left:50%;
        float: left;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #loginBox {
        width: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #loginBox {
        margin: 0 auto;
        width: 41.66666667%;
        position: relative;
        padding: 30px 0;
        float: none;
        transform: none;
        left: auto;
        top: auto;
    }
}

@media (min-width: 1200px) {
    #loginBox {
        width: 33.33333333%;
    }
}

.login_header, .exp_header {
    background: #000;
    font-size: 14px;
    padding: 15px;
    color: #FFFFFF;
}

#loginBox p.notice {
    padding: 0 0 15px 0;
    font-size: 14px;
    color: #28324b;
    margin: 0;
}

#loginBox #registration {
    font-family: Verdana,Tahoma,Arial;
}

#registration #userloginDiv {
    padding: 15px 0;
    font-size: 14px;
}

    #registration #userloginDiv p {
        margin-top: 0;
        margin-bottom: 0;
        color: #28324b;
    }

#RegistrationDiv #password {
    margin: 10px 0;
}

#RegistrationDiv span {
    font-size: 14px;
}

#RegistrationDiv #save {
    float: right;
}

.userNameIcon, .passwordIcon {
    float: left;
    height: 42px;
    width: 42px;
    background-color: #28324b;
}

[dir="rtl"] .userNameIcon, [dir="rtl"] .passwordIcon {
    float: right;
}

.appIcon, .eventIcon {
    margin-bottom: 5px
}

.appIconLabel, .eventIconLabel {
    color:#28324b;
}
.userNameIcon svg, .passwordIcon svg {
    fill: white;
    
}

.userNamePasswordWrapper {
    float:left;
    margin-bottom:20px;
    width: 100%;
}
.labelPrivacy {
    margin-top: 45px;
    text-align: center;
}
.labelPrivacy a {
    color: #333333;
    text-decoration: none;
}
.labelPrivacy a:hover {
    color: #F41E63;
}

.lblftrPrivacy {
    float: left;
    margin-top: 3px;
}

[dir="rtl"] .lblftrPrivacy {
    float: right;
}
.lblftrPrivacy a{
    color: #808080;
}
.lblftrPrivacy a:hover {
    color: #F41E63;
}

@media (min-width: 768px) {
    .userNamePasswordWrapper {
        margin-bottom: 50px;
    }
}
.userNameWrapper, .passwordWrapper {
    display: inline-block;
    padding-bottom: 10px;
    width: 100%;
    position: relative;
}

.userNameInputBox, .passwordInputBox {
    float: left;
    width: calc( 100% - 42px );
    position: relative;

}
.rememberWrap {
    float: left;
    margin: 15px 0;
    padding: 0;
    overflow: hidden;
    width: 58.33333333%;
}

[dir="rtl"] .rememberWrap {
    float: right;
}

@media (max-width: 767px) {
    .rememberWrap {
        width: 100%;
    }
}
.require {
    color:#FF4F35;
    font-size: 16px;
    font-weight:600;
    position: absolute;
    padding:10px;
    top:5px;
    right: 0;
}
[dir="rtl"] .require {
    color: #FF4F35;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    padding: 10px;
    top: 5px;
    left: 0 !important;
    right: unset !important;
}
.resetPasswordError {
    font-size:12px;
    color:#FF4F35;
    margin: 10px 0 0 0
}
label.remember {
    margin: 5px 0 0 0;
    clear: none;
    padding: 0 10px;
    text-transform: none;
    line-height: 20px;
    font-size: 16px;
    color: #28324b
}

#remember {
    margin: 0px 5px 0 0;
    padding: 0;
    clear: none;
}

.signInButtonWrapper {
    float: left;
}

.loginButton {
    width: 41.66666667%;
    float: right;
    margin: 10px 0;
}

@media (max-width: 767px) {
    .signInButtonWrapper {
        width: 100%;
    }
}

.problemLoginLostPasswordWrapper {
    margin-top: 120px;
}

.lostPasswordText, .problemLoginText {
    float: left;
    text-decoration: underline;
}


.lostPasswordWrapper {
    /*margin: 15px 0 2px 0;*/
    float: right;
 /*font-size: 8px;
    display: none;*/
}

.problemLoginWrapper {
    float: right;
    font-size: 8px;
    display: block;
    clear: both;
    display: none;
    width: 100%;
}
.loginProblemWrap {
    width: 100%;
    overflow: hidden;
}

.register, .newPassword {
    width: 50%;
    float: left;
    padding: 0 8px 0 0;
}

[dir="rtl"] .register {
    float: right;
    padding: 0;
    padding-left: 8px !important;
}

.newPassword {
    float: right;
    padding: 0 0 0 8px;
}

[dir="rtl"] .newPassword {
    float: right;
    padding: 0;
    padding-right: 8px !important;
}

.lostPasswordText, .selfregister {
    box-sizing:border-box;
    text-decoration: none;
    padding: 10px 5px;
    text-align: center;
    font-size:12px;
    background: #28324b;
    width: 100%;
}
@media (min-width: 768px) {
    .lostPasswordText, .problemLoginText, .selfregister {
        font-size: 16px;
    }
}
/*.lostPasswordText {
    margin: 0 15px 0 0;
}*/
.lostPasswordCheckbox, .problemLoginCheckbox {
    float: right;
}

.greenButton, .redButton, .grayButton {
    border: none;
    cursor: pointer;
    color: white;
    height: 20px;
    vertical-align: middle;
    padding: 0 10px;
}

.greenButton {
    background-color: #3EAD4F;
}

.redButton {
    background-color: #FF4F35;
}
.submitButton {
    padding: 10px;
    height: auto;
    float: right;
    text-align:center;
    width: 100%;
    font-size: 16px;
}

.enterButton  {
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    font: inherit;
    font-size: 16px;
    margin: 0;
}

.logoutButtonWrapper, .cancelButtonWrapper {
    width: 50%;
    padding: 0 8px 0 0;
}

.enterButtonWrapper, .continueButtonWrapper {
    width: 50%;
    padding: 0 0 0 8px;
}

[dir="rtl"] .logoutButtonWrapper {
	float: right;
	padding: 0;
	padding-left: 8px !important;
}

[dir="rtl"] .enterButtonWrapper {
	float: left;
	padding: 0;
	padding-right: 8px !important;
} 

.continueButton {
    line-height: 22px;
}
.grayButton {
    background-color: #cccccc;
}

#login:active {
    background: #333;
}

.experienceBtns {
    float: right;
    width: 100%;
}


#loginBox div.wrapper {
    overflow: hidden;
    background-color: #e1e1e1;
    padding: 30px;
}

#loginBox footer {
    clear: both;
    float: left;
    padding: 30px;
    background-color: #fff;
    width: 100%;
}



#logo {
    background: url("../../../WizletResources/Shared/media/img/btsBrand.png") center;
    background-size: 100%;
    height:22px;
    width:63px;
    background-repeat: no-repeat;
    float: right;
}

[dir="rtl"] #logo {
    float: left;
}

input[type="text"],
input[type="password"] {
    font-size: 16px;
    line-height: 1.4em;
    border: 0px;
    width: 100%;
    padding: 10px;
    color: #28324b;
    margin: 0;
    outline: 0;
}

#passReset {
    float: left;
    margin-top: 17px;
}

.errorMessage {
    color: red;
}

.textColor{
    color:#000;
}

.hint {
    color: #28324b;
}

#reset input[type="text"] {
    margin-bottom: 0px;
}

#appSelect input[type="button"] {
    float: left;
    clear: none;
}

#logout input {
    margin-left: 70px;
}

#revisionInfo {
    color: #808080;
    padding: 0;
    width: calc(100% - 63px);
    float: left;
}

[dir="rtl"] #revisionInfo {
    float: right;
}

.loginEventsTable .contentTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom:10px
}

    .loginEventsTable .contentTable select {
        width: 100%;
        padding: 5px 3px;
        font-size: 16px;
        font-weight:400;
    }


#appSelect .loginEventsTable .contentTable .logoutButton {
    line-height: normal;
    font: inherit;
    margin: 0;
    font-size: 16px;
}

#appSelect .loginEventsTable .contentTable .loginButton {
    line-height: normal;
    font: inherit;
    margin: 0;
    font-size: 16px;
}

#appSelect .loginEventsTable input[type="button"]:active {
    background: #333;
}


.resetPassBtn {
    float: right;
    font-size: 16px;
    padding: 10px;
    height: auto;
    float: right;
    text-align: center;
    width: 100%;
}

.resetPasswordText {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5em;
    color: #808080;
    margin-bottom:30px
}

.resetPasswordDisable {
    opacity: 0.5;
    pointer-events: none;
}

.sel_exp_title {
    font-family: OpenSans-Regular;
}

.roundedOne {
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 4px;
    border: 0;
    background-color: #fff;
}

    .roundedOne input[type=checkbox] {
        visibility: hidden;
    }

    .roundedOne label:after {
        content: '';
        width: 26px;
        height: 26px;
        position: absolute;
        top: 2px;
        left: 2px;
        background: #00ADEF;
        opacity: 0;
        border-radius: 3px;
    }

    .roundedOne label:hover::after {
        opacity: 0.3;
    }

    .roundedOne input[type=checkbox]:checked + label:after {
        opacity: 1;
    }

.greySelectbox select {
    background-color: #4C4C4C;
    color: white;
    border: none;
    text-transform: none;
    font: inherit;
    margin: 0;
}

.greySelectbox .arrow {
    background: url("../../../WizletResources/Shared/media/img/selectboxArrow.png") top center no-repeat;
}

.rememberWrap .roundedOne {
    float: left;
}

[dir="rtl"] .rememberWrap .roundedOne {
    float: right;
}

.remember {
    padding: 5px 0;
}

/* login new classes */

/* this is temporary*/
.login__title {
    text-align: left;
    margin: 0 0 5px 0;
    font-weight: 600;
    color: #808080;
}
.login__text {
    text-align: left;
    margin: 0 0 1em 0;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #808080;
}

[dir="rtl"] .login__text {
	text-align: right;
}

[dir="rtl"] .login__title {
	text-align: right;
}

.login__text a {
    color: #00adef;
}
.login__message {
    font-size: 16px;
    color:#ecba01;
    padding: 10px 0;
}
.login__weak--hide {
    display: none;
}
.col-no--left {
  padding-left: 0 !important;
}

@media only screen and (max-width: 768px) {
	.cancelButtonWrapper.col-no--left {
		padding-right: 0 !important;
        width: 100%;
        margin: 0 0 10px 0;
	}
}
  
@media only screen and (max-width: 768px) {
	.resetButtonWrapper.col-no--right, .continueButtonWrapper.col-no--right {
		padding-left: 0 !important;
        width: 100%;
	}
}

.col-no--right {
  padding-right: 0 !important;
}

.col-no--padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.col-no--margin {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.cancelButtonWrapper, .resetButtonWrapper {
    width: 50%;
    float: left;
    padding: 0 8px;
}

[dir="rtl"] .cancelButtonWrapper {
    float: right;
    padding: 0;
    padding-left: 8px !important;
}

[dir="rtl"] .continueButtonWrapper {
    float: left;
    padding: 0;
    padding-right: 8px !important;
} 

.resetButtonWrapper {
    float: right;
}

[dir="rtl"] .resetButtonWrapper {
    float: left;
    padding: 0;
    padding-right: 8px !important;
} 

*, *:after, *:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}