/******************************************************************************
	Verify Registration for mobile devices
    Created:    02/05/2017
    Updated:    02/05/2017
******************************************************************************/

/******************************************************************************
	General mobile device reset
******************************************************************************/
.mobileReady #header_content,
.mobileReady #content_header_contents,
.mobileReady #content_body_contents,
.mobileReady #footer_content,
.mobileReady .pagemessage,
.mobileReady .centred {
    max-width: 960px;
    width: 100%;
}

.mobileReady #header,
.mobileReady #header_navigation,
.mobileReady #content_header,
.mobileReady #content_body,
.mobileReady #footer {
    min-width: initial;
    width: 100%;
}

#mobileBreadcrumbs,
#mobileReady_SubFooter,
#mobileReady_Footer,
#mobileReadyHome{
    display: none;
}

/******************************************************************************
	General styles
******************************************************************************/

.mobileReady .lineSeparator{
    border-top: 1px solid #E3E7Eb;
    margin-top: 20px;
    padding-top: 20px;
}

.mobileReady .external_link{
    margin: 0px;
    height: auto;
    width: auto;
    background: none;
}

.qrCodeResults h4.borderTop{
    margin-top: 20px;
    padding-top: 20px;
}

.mobileButton{
    padding: 0px 16px;
    line-height: 40px;
    text-align: center;
}

.mobileReady a{
    color: #005ea5
}

.mobileReady a:hover, .mobileReady a:active, .mobileReady a:focus{
    color:#2b8cc4;
}

.mobileReady .btn-primary{
    background: #085394;
}

.mobileReady .btn-primary:hover{
    background: #063e6e;
}

.mobileReady a.mobileButton {
    display: inline-block;
    text-decoration: none !important;
    color: #ffffff !important;
}

/******************************************************************************
	Verification Reason
******************************************************************************/

.verificationReason {
    padding-left: 70px;
    position: relative;
    height: 72px;
}

.verificationReason:before{
    content: "";
    display: block;
    border-radius: 100px;
    height: 58px;
    width: 58px;
    border: 2px solid green;
    position: absolute;
    top: 0px;
    left: 0px;
}

#VerificationReason_Invalid:before{
    border-color: #fd3e3e;  
}

#VerificationReason_Success:after{
    color: green;
    display: block;
    font-family: "FontAwesome";
    font-size: 34px;
    border: none;
    font-weight: 400 !important;
    content:"\f00c";  
    position: absolute;
    top: 6px;
    left: 12px;
}

#VerificationReason_Invalid:after{
    color: #fd3e3e;
    display: block;
    font-family: "FontAwesome";
    font-size: 33px;
    border: none;
    font-weight: 400 !important;
    content:"\f12a";  
    position: absolute;
    top: 7px;
    left: 24px;
}

#VerificationReason_Invalid + .verificationIntro {
    border-top: 3px solid #fd3e3e;
    border-bottom: 3px solid #fd3e3e;
}

#VerificationReason_Invalid +.verificationIntro + p.verificationLabel {
    margin-bottom: 10px;
}

#VerificationReason_Invalid + .verificationIntro h4{
    color: #fd3e3e;
    margin: 0px;
    font-weight: bold;
    padding-top: 0px;
    padding-bottom: 6px;
}

.mobileReady #content_container .altBoxContent h1{
    color: #333;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
    margin-top: 0px;
    padding-top: 8px;
}

.verificationIntro{
    border-top: 1px solid #E3E7EB;
    border-bottom: 1px solid #E3E7EB;
    padding: 20px 10px;
    margin-bottom: 20px;
}

/******************************************************************************
	Verification body
******************************************************************************/

.verificationIntro + p.verificationLabel,
.qrCodeResultsBody{
    padding-left: 10px;
    padding-right: 10px;
}

.qrCodeResults p{
    margin: 0px;    
}

.qrCodeResults p + p {
    margin-top: 16px;
}

.qrCodeResults p{
    font-size: 14px;
}

.qrCodeResults p.verificationLabel{
    font-size: 13px;
    color: #606060;
}

.qrCodeResults h4{
    margin: 0px;
    font-size: 16px;
    padding-bottom: 28px;
    padding-top: 4px;
    line-height: 1.25;
}

#LocationArea{
    margin-bottom: 20px;
}

#LocationArea > a {
    padding-left: 30px;
    position: relative;
}

#LocationArea > a:before {
    font-family: "FontAwesome";
    font-size: 16px;
    border: none;
    font-weight: 400 !important;
    content:"\f041";  
    position: absolute;
    top: -1px;
    left: 14px;
    color: #FFFFFF;
}

.mobileReady #regDetailsArea{
    border-top: 1px solid #E3E7EB;
    border-bottom: 1px solid #E3E7EB;
    padding: 20px 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mobileReady #regDetailsArea > div,
#invalidInfo{
    padding-left: 10px;
    padding-right: 10px;
}

.mobileReady #regDetailsArea h4{
    padding-bottom: 0px;
}

#mobilePanelOptionsArea .panel-group{
    margin-bottom: 0px;
}

#mobilePanelOptionsArea .panel{
    box-shadow: none;
}

#mobilePanelOptionsArea .panel-title{
    padding: 0px;
    font-size: 12px;
    font-weight: 400;
}

#mobilePanelOptionsArea .panel-title > a{
    font-weight: normal;
    display: block;
    padding: 14px 40px 14px 14px;
    color: #333333 !important;
}

#mobilePanelOptionsArea .panel-title > a.collapsed{
    text-decoration: none;
}

#mobilePanelOptionsArea .panel-title > a:after,
#mobilePanelOptionsArea .panel-title > a.collapsed:after{
    display: inline-block;
    font-family: "FontAwesome";
    font-size: 22px;
    border: none;
    font-weight: 400 !important;
    content:"\f055";  
    position: absolute;
    top: 8px;
    right: 14px;
    color: #333;
}

#mobilePanelOptionsArea .panel-title > a.collapsed:after{
    transition: transform 0.2s;
    transform: rotate(0deg);
}

#mobilePanelOptionsArea .panel-title > a:after {
    transform: rotate(45deg);
    transition: transform 0.2s;
}

#mobilePanelOptionsArea .panel-group .panel {
    border-radius: 0px;
}

#mobilePanelOptionsArea .panel-default>.panel-heading{
    padding: 0px;
    background: #FFFFFF;
}

#mobilePanelOptionsArea .panel-body p,
#mobilePanelOptionsArea .panel-body span,
#invalidInfo p,
#invalidInfo span{
    font-size: 13px;
    display: block;
    margin-bottom: 20px;
}

#mobilePanelOptionsArea .panel-body p + h4,
#mobilePanelOptionsArea .panel-body span + h4{
    border-top: 1px solid #e3e7eb;
}

#mobilePanelOptionsArea .panel-body p + h4,
#mobilePanelOptionsArea .panel-body span + h4{
    padding-top: 20px;
}

#invalidInfo p + h4,
#invalidInfo span + h4,
#invalidInfo h4 {
    padding-bottom: 8px;
}

#mobilePanelOptionsArea .panel-body h4 {
    font-size: 14px;
    padding-top: 28px;
    padding-bottom: 8px;
}

#mobilePanelOptionsArea .panel-body{
    padding: 14px;
}

#mobilePanelOptionsArea .panel-body h4,
#invalidInfo h4{
    font-size: 14px;
}

/******************************************************************************
	Difference in Location
******************************************************************************/

#differenceFromLocation {
    background: #e7f1fe;
    padding: 20px 16px 20px 60px;
    margin-bottom: 20px;
    position: relative;
}

#differenceFromLocation:before{
    color: #085394;
    display: block;
    font-family: "FontAwesome";
    font-size: 36px;
    border: none;
    font-weight: 400 !important;
    content:"\f21d";  
    position: absolute;
    top: 7px;
    left: 16px;
}

#differenceFromLocation h4{
    margin: 0px 0px 10px;
    padding: 0px;
    font-size: 14px;
}

#differenceFromLocation p{
    font-size: 13px;
}

@media only screen  
  and (max-device-width: 768px){

    .mobileReady #header,
    .mobileReady #header_navigation,
    .mobileReady #content_header,
    .mobileReady #content_body,
    .mobileReady #footer {
        min-width: 1000px;
    }
}

@media screen and (max-width: 640px) {
    .mobileReady html, 
    .mobileReady body, 
    .mobileReady #content {
        background-color: #FFFFFF;        
    }

    .mobileReady #header_navigation,
    .mobileReady #header_login,
    .mobileReady #content_header,
    .mobileReady #footer{
        display: none;
    }

    #mobileBreadcrumbs,
    #mobileReady_SubFooter,
    #mobileReady_Footer,
    #mobileReadyHome{
        display: block;
    }
    
    .mobileReady {
        margin: 0px;
    }   
    
    .mobileReady #leftbox .altBoxContent {
        margin: 0px;
        background: none;
    }

    .mobileReady .boxtype1 {
        border: none;
        box-shadow: none;
        border-radius: 0px;
    }

    .mobileReady #content_body {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    } 

    .mobileReady .boxcontent{
        padding: 16px;
    }    

    .mobileReady #header_branding{
        margin-left: 10px;
        top: 10px;
    }
         
    .mobileReady #header_logo a img, .mobileReady #header_systemname {
        display: none;
    }
    
    .mobileReady #header_content,
    .mobileReady #header_branding{
        height: auto;
    }

    .mobileReady #header_content, 
    .mobileReady #content_header_contents, 
    .mobileReady #content_body_contents, 
    .mobileReady .centred {
        width: 100%;
    }    

    /******************************************************************************
	    Header
    ******************************************************************************/

    .mobileReady{
        padding-top: 64px;
    }

    .mobileReady #header{
        height: 64px;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 100;
    }

    .mobileReady #header_logo a{
        display: block;
        height: 45px;
        background: transparent url(../images/Demo/DataTorque_Logo.svg) no-repeat scroll 0 0;
    }

    .mobileReady #mobileReadyHome{
        display: block;
        width: auto;
        height: auto;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 2px;
        position: absolute;
        right: 0px;
        top: 12px;
        margin-right: 16px;
    }

    .mobileReady #mobileReadyHome .fa{
        color: #FFFFFF;
        font-size: 20px;
        font-weight: normal;
        padding: 8px;
    }

    /******************************************************************************
	    Breadcrumb
    ******************************************************************************/
    #mobileBreadcrumbs{
        background-color: #f2f3f5;
        padding: 10px 16px;
    }

    #mobileBreadcrumbs > span:before {
        color: #505050;
        display: inline-block;
        font-family: "FontAwesome";
        font-size: 14px;
        border: none;
        font-weight: 400 !important;
        content:"\f105";  
        position: relative;
        top: 0px;
        left: 0px;
        padding: 0px 7px 0px 5px;
    }

    #mobileBreadcrumbs > span:first-child:before{
        display: none;
    }

    /******************************************************************************
	    Sub-footer
    ******************************************************************************/
    #mobileReady_SubFooter{
        background: #f2f3f5;
        padding: 20px;
        clear: both;  
    }

    #mobileReady_SubFooter h5{
        margin-top: 0px;
        margin-bottom: 10px;
    }

    #mobileReady_SubFooter a {
        color: #404040;
    }

    #mobileFooterLinks{
        border-top: 1px solid #e3e7eb;
        padding-top: 6px;
        margin-top: 16px;
    }

    #mobileFooterLinks > a{
        display: block;
        padding: 8px 0px;
    }

    .mobileContactFooter span {
        display: inline-block;
        padding: 0px;
    }

    .mobileContactFooter span:first-child {
        width: 40px;
    }

    .mobileContactFooter span:last-child:after,
    .mobileReady .external_link:after,
    #mobileFooterLinks > a:after {
        display: inline-block;
        font-family: "FontAwesome";
        font-size: 16px;
        border: none;
        font-weight: 400 !important;
        content:"\f105";  
        position: relative;
        top: 1px;
        left: 4px;
    }

    #mobileContactFooterMore {
        margin-top: 16px
    }

    /******************************************************************************
	    Footer
    ******************************************************************************/
    #mobileReady_Footer{
        background: #303e48;
        padding: 20px;
        color: #FFFFFF;
    }

    #mobileReady_Footer span {
        opacity: 0.4;
        font-size: 12px;
    }

    .mobileReady #backToTop{
        display: inline-block;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 0px;
        color: #FFFFFF;
        padding: 0px 14px 0px 30px;
        line-height: 34px;
        position: relative;
        float: right;
        top: -16px;
        text-decoration: none !important;
    }

    .mobileReady #backToTop:before{
        color: #FFFFFF;
        display: block;
        font-family: "FontAwesome";
        font-size: 20px;
        border: none;
        font-weight: 400 !important;
        content:"\f106";  
        position: absolute;
        top: -1px;
        left: 14px;
    }
}