﻿/* Cross-browser */
input[type=checkbox] {
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
}

::-webkit-input-placeholder {margin: auto;width: 85%;height: 50px;}
:-moz-placeholder {margin: auto;width: 85%;height: 50px;}
::-moz-placeholder {margin: auto;width: 85%;height: 50px;}
:-ms-input-placeholder {margin: auto;width: 85%;height: 50px;}

/* used from dynamically added JS */
.passwordInformation {background-color: #F0FFFF;text-align: left;}



/* Header */
.pageBranding {width: 100%; position: relative;}
#divMainContent{padding: 0 !important}
#btnHamburger {border: 0 !important}
#btnHamburger img {padding: 6px 0 0 0 !important; width: 68% !important}
.titleLeftMobile {border: 0 !important}
.titleLeftMobile img {padding: 6px 0 0 0 !important; width: 80% !important}
.navBar {top:70px;}

/* Steps */
.CustomLi {width: 90% !important;margin: 0 auto;padding-left: 10% !important;}

.StepOne {background-color: white;padding-left: 10px;padding-right: 10px;display: inline-block;text-align: left;width: 270px;font-size: 11pt;vertical-align: top;margin-top: -2px;}
.StepTwo {background-color: lightgrey;padding-left: 10px;padding-right: 10px;text-align: left;font-size: 11pt;vertical-align: top;margin-top: 4px;line-height: 25px;}
.Arrow-Right {width: 0;height: 0;border-top: 12px solid transparent;border-bottom: 12px solid transparent;border-left: 12px solid green;display: inline-block;}


/* Tooltips */
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:-448px; width:375px; line-height:16px; float:left; border-radius:4px; box-shadow: 5px 5px 8px #CCC;}
a.tooltip:hover span{display:inline; position:absolute; color:#111;border:1px solid red; background:#ffffff;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
a.tooltip:active {text-decoration:none;}
a.tooltip:active span {display:inline; position:absolute; color:#111;border:1px solid red; background:#ffffff;}  

/* Wrappers */
.leftWrapper {float: left;width: 42%;text-align: center;display: inline-block;margin: 0 30px 0 30px;}
.rightWrapper {float: left;width: 42%;text-align: center;display: inline-block;margin-left: 30px;}
#signUpWrapper {margin-top:15px;display: block;}

/* CAPTCHA */
.edit A.captchaA {padding: 0 8px;}
.captchaImg {width: 24px;}
.edit SPAN.captchaSpan {float:left;margin-top:3px;padding-left:3px;font-weight:normal;color: #000;}
.edit li DIV.captchaCantRead {margin-bottom: 0;font-weight: bold;font-size: 15px;}
ul li img.captchaCode {border:solid 1px #dedede;height: 60px;}
.edit li.captchaLi {padding-bottom: 0;}
.captchaSpan {color: #000 !important;}
.captchaA {font-size: 12px;}
#divCaptcha {width: 90%;margin: auto; margin-bottom: 20px}
#txtCaptcha {width: 255px;}


/* Text */
.lab {line-height: 26px !important}

/* Titles */
DIV.subTitle {margin: 20px auto 8px !important;}
DIV.subTitle SPAN {padding-left: 0;}


/* Links */
.smallLink {width: 100%;display:inline-block;text-decoration:underline;color:#0060cc;}

/* Buttons */
.NSButton, .NSButtonMini, INPUT[type="SUBMIT"]{padding: 5px 20px !important;}
.divButton {width:80%;margin-left:auto;margin-right:auto;}

/*CSS3 extras*/
.edit li.DoNotAsk {line-height: 18px !important;text-align: left !important;}
.edit li.DoNotAsk .description {color: #333 !important;margin: 0;}
.txtInput {width: 40% !important;}
/*.lab {width: 50% !important;}*/


/* ////////////// SIGNIN PAGE \\\\\\\\\\\\\\\\\\\\\ */

/* Login */
.login {margin: 40px 0px 30px; display: block; height: 100%; width: auto;}
#lblTitle { display: none;}
.loginLabel {display: none;font-family: MuseoSansRounded;}
.loginInput {width: 95%;text-align: center !important; padding-left: 0 !important;}
.signInTitle {font-size: 22px; text-align: left; width: 100%; margin-bottom: 0;}
.loginInputSmall { width: 100%; text-align: left;}
.loginElementLabel {font-family: MuseoSansRounded, Sans-Serif !important; text-align: right !important; line-height: 35px; color: #000 !important;}
.loginElementInput { width: 85% !important;  float: left !important;}
.rememberMe {display: inline; padding-left: 0px; float: left; text-align: left; height: 34px !important;}
.rememberMeToggle {float: left; text-align: left;}
.toggleAdjust {float: left !important;}
.inputField {position: relative; overflow: hidden;}
.edit li div.liSignIn {text-align: center;border-top: none;padding: 10px 0 0;font-size: 13px;float: right; width: 90%;}
.logInButton {background-color: #00599a; }
.loginLeftWrapper { float: left; width: 50%; text-align: center; display: inline-block; position: relative; max-height: 450px;}
.loginLeftWrapper img { float: left; max-width: 100%; position: relative;}
.loginRightWrapper { float: right; width: 37%; text-align: left; display: inline-block; max-height: 450px; margin-left: 20px;}
.loginLeft {width: 100%;}
.loginRight { width: 300px; margin: 10px auto; padding: 10px 0;}
.edit A.lnkPassword {display: inline;color: #0060cc;}
.edit A.lnkCreateAccount {display: inline; color: #0060cc; width: 110px; margin-right: auto; margin-left:auto;}
.signUpS {display: none;}
.signUpL {text-align: center; font-size: 16px;}
.validationSummary ul {width: 660px;margin: 0 auto;}
.newTo {font-weight: normal; text-align: left;}
.imgLoginRight {width: 98%;}
.submitDiv {width: 100%;    display: inline-block; margin-top: 0;}
.LoginMainImg { padding: 0px !important;}

/* Find User Name */
.validationSummary{padding-top: 0 !important;}

/* Footer */
.bottomLinks {clear: both; max-height: 140px; padding-top: 20px; display: block; width: 100%; margin-left: auto; margin-right: auto;}
.bottomLinkLabel { width: 100%; color: white; font-weight: bold; text-align: center; display: inline-block; float: left; position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5);}
.bottomLinkOne { width: 25%; height: 170px; max-height: 170px !important; max-width: 300px; float: left; background: url(../Images/MyReliance-FAQ.jpg) no-repeat; position: relative;background-size: 100% auto}
.bottomLinkTwo { width: 25%; height: 170px; max-height: 170px !important; max-width: 300px; float: left; background: url(../Images/Online-Booking-Service.jpg) no-repeat; position: relative;background-size: 100% auto}
.bottomLinkThree { width: 25%; height: 170px; max-height: 170px !important; max-width: 300px; float: left; background: url(../Images/Contact-Us.jpg) no-repeat; position: relative;background-size: 100% auto}
.bottomLinkFour {width: 25%; height: 170px; max-height: 170px !important; max-width: 300px; float: left; background: url(../Images/myReliance-Great-Offers-SEP-2016.jpg) no-repeat; position: relative; background-size: 100% auto}

/* Check Form */
.smallTextForVal{text-align: left !important;}
.rememberMeCheck{float: left; }

/* Error */
.NSErrorMessage{float: left !important;}

/* EnrollAccount */
.NSContentItem {height: 50px !important;border: none;margin: auto;}

.rememberMeCheck{/*margin-right: 10px !important*/}

/* ********************* MEDIA QUERIES ****************************/

/* //////////////////// 4K \\\\\\\\\\\\\\\\\ */
@media only screen and (min-width: 1441px)
{
   /*form {height: 100%; width: 50%; background: #ffffff; margin: 0 auto;}*/
   .loginLeftWrapper img{max-height: 433px; max-width:800px;}
    }

/* //////////////////// Large Screens \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 1440px)
{
   form {height: 100%; width: 90% !important; background: #ffffff; margin: 0 auto;}
   .navBar {top: 70px; }  
   
    }

/* //////////////////// 1220 - Large Laptop \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 1220px)
{
   form {height: 100%; width: 80%; background: #ffffff; margin: 0 auto;}

}

/* //////////////////// 1024 - Laptop \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 1024px)
{
   form {height: 100%; width: 90% !important; background: #ffffff; margin: 0 auto;}
   .navBar {top: 70px;}  
   /* Footer */
.bottomLinks {padding-top: 20px !important; }
.bottomLinkLabel { width: 100%; color: white; font-weight: bold; text-align: center; display: inline-block; float: left; position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5);}
.bottomLinkOne { height: 140px !important;}
.bottomLinkTwo { height: 140px !important;}
.bottomLinkThree { height: 140px !important}
.bottomLinkFour { height: 140px !important;}
 
    }
    
/* //////////////////// 960 - Laptop S \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 960px)
{
    
    }    

/* //////////////////// 768 - Tablet \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 768px)
{         
.Arrow-Right, .StepOne, .StepTwo, .Steps {display:none;}
form {height: 100%; width: 100% !important; }

/* SignIn */
.rememberMeCheck { /*margin-right:15px !important;*/}
.signInTitle { text-align: center; margin: auto;}
.login {width: 100%; margin: 0;}ch
.bottomLinks { display: none;}
.loginLeftWrapper {  width: 100% !important; padding-left: 0 !important;}
.loginRightWrapper {padding-top: 25px; border-right: none; width: 100%; margin: auto;}
.loginLeft { width: 100%; text-align: center;}
.smallTextForVal { width: 90%; margin: auto; padding: 0px !important;}
.smallTextForVal input {}
.logInButton {width: 100px !important; }
.edit A.lnkPassword {display: inline;color: #0060cc; width: 100%; margin: 0 auto; float:left; padding: 0px;height: 15px;margin-top: 5px;}
ul li img{width: 100% !important}
.edit INPUT[type="password"] {padding: 0 5px !important;}

/* FindUserName */
.navBar {display:inline-block;top:auto;top:50px;}
/*.NSColumnWidth {padding-top: 30px;}*/ /* CHECK */

/* EnrollAccount */
ul, .NSContentItem {border: none;}

/* Title */
DIV.subTitle {margin: 50px auto 8px !important; padding-left: 10px;}

/* Error Messages */
.validationSummary{padding-top: 0 !important}

}

/* //////////////////// 425 - Covers all Smartphones in Portrait Mode \\\\\\\\\\\\\\\\\ */
@media only screen and (max-width: 425px)
{
    
/* Common */
.NSButton{height: 30px !important}    

/* SignIn */
/*loginLeftWrapper img {display: none !important}*/
.loginInput{width: 100% !important}

.rememberMeCheck{ width: 5% !important}

/* FindUserName */
/* .edit .lab {line-height: 16px;float: left;width: 100% !important;} */ /* CHECK */
/* .edit INPUT[type="text"], .edit INPUT[type="password"]{float: left !important;} */ /* CHECK */
a.tooltip span {margin-left: -258px !important;}
/* .NSContentItem{padding-bottom: 20px !important;} */ /* CHECK */

/* Forgot Password */
.lab {font-size: 12px !important;}
.smallLink {font-size: 11px !important;}
.edit li.captchaLi {padding-bottom: 10px !important;}


}

/* //////////////////// COMMON FIXES FOR DESKTOPS   \\\\\\\\\\\\\\\\\ */
@media only screen and (min-width : 769px) 
{
    /* SignIn */
    .loginLeftWrapper{width: 59% !important}
    .loginLeftWrapper img {width: 100% !important;}
    .registerButton{margin-top:100% !important}
}


/* *********************** SMART PHONES LANDSCAPE FIXES - up to iPhone6 Plus **************************/

@media only screen and (min-device-width:320px) and (max-device-width: 736px) and (orientation: landscape)
{
    /* SignIn */
    .loginLeftWrapper img {display: none !important}  
.rememberMeCheck { margin-right:10px !important;}}

@media only screen and (min-width: 769px)
{
    form, .pageBranding {max-width:1140px !important}
    
    }

@media only screen and (max-width: 375px)
{
    .loginLeftWrapper img{width: 98% !important}
}
    
@media only screen and (max-device-width: 320px)
{
    .rememberMeCheck { margin-right:10px !important;}
}

@media only screen and (max-device-width: 680px) and (orientation: landscape)
{
    a.tooltip span {margin-left: -446px !important;margin-top: -200px !important}
}

