/* Shared CSS */

body{font-family: 'Open Sans', sans-serif; font-size:14px;}
:focus {outline:none;}
.cb{clear:both;}

md-content{margin-bottom:30px;}

.md-button.md-default-theme[disabled],
.md-button[disabled],
.md-button:hover.md-default-theme[disabled],
.md-button:hover[disabled] {
    background-color: #e0e0e0 !important;
}

.topBar .banner{max-height:100px; max-width:200px; height:auto; width:auto; margin:0 auto; padding: 10px;}
.bottomBar .poweredby{max-height:20px; max-width:200px; height:auto; width:auto; margin:0 auto; padding: 10px;}

.loginContainer .loginBox, .verifyInfo{width:100%; max-width:290px; margin:0 auto; text-align:left;}
.loginContainer .loginBox.twoButton .md-button{margin-bottom: 15px; width: 48%; display: block; float: left; margin-right: 10px;}
.loginContainer .loginBox.twoButton .md-button:last-of-type{margin:0;}
.loginContainer .loginBox.new .md-button{margin-bottom: 15px;}
.loginContainer .loginBox input, .titleContainer input{width:100%; padding: 6px; margin-bottom:12px; box-sizing: border-box;}

.linkText{text-align: center; margin-top:10px;}

.titleContainer .smallTitle{font-size:16px;}
.titleContainer .largeTitle{font-size:32px; font-weight: 600;}
.titleContainer .md-button{margin-top:10px;}

.mainContent{padding:20px; margin:0 auto; max-width:1000px; }
.mainContent .centered{text-align:center;}
.mainContent .verifyInfo{margin-top: 20px;}
.mainContent .md-button{max-width:160px;}
.mainContent .md-button.verify{max-width: 220px;}
.mainContent .privacy { overflow-y: scroll; height: 300px }

.mainContent .oneColumn{margin:10px auto;  width:100%; max-width:300px; padding:0 10px; box-sizing: border-box;}
.mainContent .twoColumn{margin:10px 0; float:left; width:50%; padding:0 10px; box-sizing: border-box;}
.mainContent .threeColumn{margin-top:10px; float:left; width:33%; padding:0 10px; box-sizing: border-box;}

.mainContent .userInfo md-input-container{margin-bottom:0}
.mainContent .userInfo .passwordActions{margin-bottom:20px;}
.mainContent .userInfo .passwordActions .md-button{max-width: 154px;}

.infoContainer{padding:45px 30px 50px 30px;}
.infoContainer .info{width:100%; max-width:800px; margin:0 auto;}
.infoContainer .info .image{width:100%; text-align: center; margin-bottom:10px;}
.infoContainer .info .image img{max-width: 200px;}

.contactMethods .addedDevice .md-button.md-primary.orange{ color:#fff; background-color: #00677F;}

.contactMethods .addedDevice{border: 1px dashed #ccc; padding:10px; margin-bottom: 5px; position: relative;}
.contactMethods .addedDevice .label{font-weight: 600;}
.contactMethods .addedDevice .value{max-width: 325px;overflow: hidden;text-overflow: ellipsis;}
.contactMethods .addedDevice .editArea .checkbox{position: relative; width: 100%;}
.contactMethods .addedDevice .editArea .checkbox md-checkbox{float:left}
.contactMethods .addedDevice .editArea .checkbox .checkboxValue{float:left;}
.contactMethods .addedDevice .checkbox{position: absolute; top: 5px; right: -4px; width: 84px; height: 35px; margin: 0;}
.contactMethods .addedDevice .checkbox md-checkbox{float:right;}
.contactMethods .addedDevice md-input-container.sms{margin: -25px 0 0 0;}

.contactMethods .addedDevice.notVerified{background-color:#ffebeb;}
.contactMethods .addedDevice.notVerified.noSave{background-color:#fff;}
.contactMethods .addedDevice.notVerified .checkbox .checkboxValue.verification{color: #ce1b1b; font-weight: 600; white-space: nowrap; position: absolute; left: -76px; float: none;}
.contactMethods .addedDevice.notVerified md-checkbox.md-checked.verification .md-icon, .contactMethods .addedDevice.notVerified md-checkbox.md-checked .md-ink-ripple{background-color:#ccc;}
.contactMethods .addedDevice.notVerified md-checkboxverification.verification{pointer-events:none;}

.contactMethods .addedDevice .mainContent .md-button{color:#fff;}
.contactMethods .addedDevice .links.verify{margin-left:0; margin-top: 6px;}
.contactMethods .addedDevice .links.verify .md-button.md-primary{margin-top:5px; color:#fff; background-color: #00677F;}
.contactMethods .addedDevice input.verifyCode{padding: 8px 5px; border: 1px solid #ccc}
.contactMethods .addedDevice .md-button.md-primary.verifyFinal {margin-top: -2px; color: #fff; min-width: 0; width: 95px;}


.contactMethods .addedDevice .links {margin-left: 28px;}
.contactMethods .addedDevice .links.mobile {margin-left: 0;}
.contactMethods .addedDevice .editArea.mobile {margin-left: 0;}
.contactMethods .addDevice {margin-bottom: 20px;display: block;}

@media screen and (max-width: 550px) {
	.mainContent{padding: 20px 5px;}
    .mainContent .threeColumn{width:100%;}
    .mainContent .twoColumn{width:100%;}
    .mainContent .md-button{margin: 3px 11px;}
    .mainContent .userInfo{padding:0; margin: 0 10px;}
    .mainContent .userInfo .passwordActions .md-button{margin: 3px 11px;}
    md-input-container{margin-bottom: 0;}
    .titleContainer .largeTitle{font-size:25px;}
    .mainContent .userInfo .md-button.resetPassword{margin:-20px 0 20px 0; max-width:200px;width:100%;}
    .mainContent .userInfo .md-button.deleteContact{margin:-20px 0 20px 0; max-width:200px;width:100%;}
    .contactMethods .addedDevice md-input-container.sms{margin: -13px 0 0 0;}
}