os-animated-logo {
    display: block;
    min-height:197px;
    margin: 10% auto 0 auto;
}

.svgSpinnerContainer {
    text-align: center;
}
    .svgSpinnerContainer > svg {
        max-height: 256px;
    }

.svgSpinnerContainer > svg .tickPath {
    stroke:transparent;
    fill:transparent;
}


.svgSpinnerContainer.animateTick > svg .tickPath {
    stroke-dasharray: 1000;
}    

.svgSpinnerContainer.ticked > svg .tickPath {
    stroke:#fff;
}


.svgSpinnerContainer > svg .st0{fill:#ABAFB4;}
.svgSpinnerContainer > svg .st1{fill:#27588D;}
.svgSpinnerContainer > svg .st2{fill:transparent; stroke: #ABAFB4}



.svgSpinnerContainer.animateViaCss.spin > svg #grey_cog {
    -webkit-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
            
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
        



.svgSpinnerContainer.animateViaCss.animateTick > svg .tickPath {
    stroke-dashoffset: 1000;
    
}    

.svgSpinnerContainer.animateViaCss.ticked > svg .tickPath {
    stroke:#fff;
    animation: dash 5s linear forwards;
}


@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}




*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.paBlue {
    color: #0069aa;
}
.paWhite {
    color: white;
}
.paRegoBackgroundBlue {
    background-color: #4E9DCF;
}

.text-bold {
    font-weight:bold;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.smallPadding {
    padding: 4px;
}

.biggerPadding {
    padding: 16px;
}

div {
   font-family: Arial;
}

.biggerTitle {
    font-size: 2.4em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-weight: bold;
}

.smallPadding {
    padding: 32px;
}

.bigTitle {
     font-size : 24px;
     margin-top: 5px;
     margin-bottom: 5px;
}

.mediumTitle {
     font-size : 20px;
     padding-top: 0;
     padding-bottom: 0;
}

.smallTitle {
     font-size : 16px;
     padding-top: 0;
     padding-bottom: 0;
}

.smallerTitle {
     font-size : 14px;
     padding-top: 0;
     padding-bottom: 0;
}

 .paLinkButton{
    background-color: #009444;
    color: white;
    width: 200px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    border: 0;
}

 .paLinkButton:hover,  .paLinkButton:active{
    background-color: #007A39;;
    color: white;
}

.pointCursor {
    cursor: pointer;
}


.doubleRowTopPadding {
    padding-top: 30px;
}

.doubleRowBottomPadding {
    padding-bottom: 30px;
}

.doubleRowTopMargin {
    margin-top: 30px;
}

/* svg size definition*/

.smallSvgSize {
    height: 16px;
    width: 28px;
}

/*z-decorator */
.z-decorator {
    overflow: hidden;
    float: right;
}

.errorText {
    margin-left: 12px;
    margin-right: 26px;
    transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    text-align: left;
    color: white;
    display: inline-block;
    word-wrap: break-word;
}

.errorContainer {
    margin: 0 -20px 0 20px;
    transform: skew(45deg);
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
    background: red;
    overflow: hidden;
    position: relative;
    padding-left: 8px;
    transition: height ease-in-out .45s, height ease-in-out .45s;
}

/* error message shaking*/

@keyframes shake {
  0% {transform: translateX(0);}
  12.5% {transform: translateX(-6px) rotateY(-5deg)}
  37.5% {transform: translateX(5px) rotateY(4deg)}
  62.5% {transform: translateX(-3px) rotateY(-2deg)}
  87.5% {transform: translateX(2px) rotateY(1deg)}
  100% {transform: translateX(0)}
}

@-webkit-keyframes shake {
  0% {-webkit-transform: translateX(0);}
  12.5% {-webkit-transform: translateX(-6px) rotateY(-5deg)}
  37.5% {-webkit-transform: translateX(5px) rotateY(4deg)}
  62.5% {-webkit-transform: translateX(-3px) rotateY(-2deg)}
  87.5% {-webkit-transform: translateX(2px) rotateY(1deg)}
  100% {-webkit-transform: translateX(0)}
}

.shakeFlash {
  -webkit-animation: shake 400ms ease-in-out;
  animation: shake 400ms ease-in-out;
}




#modalWrap {
    display: flex;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#modalWrap > ng-include {
    margin: auto;
}

.modal {
    width: 600px;
    max-width: 100%;
    height: 520px;
    max-height: 100%;
    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.close-modal .close-button {
    width: 30px;
    font-weight: bold;
    float: right;
    font-family: Arial;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    padding-top: 12px;
    padding-right: 6px;
}

@media (max-width: 600px) {

    div.modal {
        width: 400px;
    }
}


/* The progress bar */
.progress-bar  {
    display: flex;
    align-items: center;
    margin: 80px 50px 16px 50px;
}

  .bar {
    background-color: #ddd;
    flex-grow: 1;
    height: 12px;
  }
  
  /* Color */
  .green {
    background-color: forestgreen;
  }




html {
    overflow-y: scroll;
    font-size: 14px;
    padding-bottom: 1em;
}

.contentContainer>main {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}

#profileContainer,
#paymentContainer,
#submitContainer {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    border-bottom: 1px solid #ccc;
    padding: 0.6em 0;
    max-width: 94vw;
}

@media (min-width: 1025px) {
    #submitContainer {
        width: 50vw;
        margin: auto;
        max-width: 640px;
    }
}

#paymentContainer {
    padding: 0.6em 0;
}

#paymentContainer>div {
    line-height: 24px;
}

#divRego>main {
    flex-direction: column;
    align-items: center;
}

@media(max-width: 1023px) {
    #divRego>main {
        align-items: stretch;
    }
}

@media(min-width: 1025px) {
    #divRego>main>div {
        width: 50vw;
        max-width: 640px;
    }
}

@media(max-width: 1023px) {
    #divRego>main>div {
        margin: 0;
    }
}

#regoChoice {
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

@media (max-width: 1023px) {
    #regoChoice {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #regoChoiceOptions {
        margin-top: 1em;
    }
}

#regoChoice>label {
    font-weight: bold;
}

@media (min-width: 1024px) {
    #regoChoiceOptions {
        flex: 60;
    }
    #regoChoice>* {
        flex: 30;
    }
}

#regoChoiceOptions {
    display: flex;
    flex-direction: column;
}


/* Customize the label (the container) */

#regoChoiceOptions .container {
    display: block;
    position: relative;
    padding-left: 32px;
    line-height: 26px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0.9em;
}


/* Hide the browser's default radio button */

#regoChoiceOptions .container input {
    position: absolute;
    opacity: 0;
}


/* Create a custom radio button */

#regoChoiceOptions .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

#regoChoiceOptions .container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

#regoChoiceOptions .container input:checked~.checkmark {
    background-color: #0069AA;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

#regoChoiceOptions .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

#regoChoiceOptions .container input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

#regoChoiceOptions .container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

div>main {
    margin: 0 0.4em;
}

div>.field {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0.2em;
    line-height: 19px;
}

@media (max-width: 1023px) {
    div>.field {
        margin-top: 8px;
    }
}

reg-credit-card {
    margin-top: 0.6em;
}

reg-credit-card>.field {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 0.2em;
    line-height: 19px;
}

@media (max-width: 1023px) {
    reg-credit-card>.field {
        margin-top: 8px;
        flex-direction: column;
    }
}

reg-credit-card>.field>.card {
    margin-left: auto;
}

button[type="submit"] {
    background: #009444;
    min-height: 36px;
    border: none;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    width: 100%;
    padding: 4px 8px;
    line-height: 1.42857143;
    font-size: 16px;
    text-transform: uppercase;
}

button[type="submit"]:disabled {
    cursor: not-allowed;
}

button[type="submit"]:hover,
button[type="submit"]:active {
    background: #007A39;
    color: #fff;
}

input[type="checkbox"] {
    min-height: unset;
}

#submitContainer {
    margin: 8px auto;
}

#divTermCondition {
    padding-top: 15px;
    margin: auto;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.field>label {
    margin-right: .5em;
    text-align: left;
    font-family: Arial;
}

.mandatory {
    color: red;
}

@media (min-width: 1024px) {
    .field>label {
        display: inline-block;
        line-height: 32px;
        width: 200px;
    }
}

.field>input,
.field>div>input {
    padding-left: 4px;
    min-height: 32px;
    margin: 0;
}

.field>div>input {
    width: 100%;
}

.field>input,
.field>div {
    display: inline-block;
    -ms-flex: 1 0 50%;
    -webkit-flex: 1 0 50%;
    flex: 1 0 50%;
}

.field>select,
.field>div>select {
    display: inline-block;
    -ms-flex: 1 0 50%;
    -webkit-flex: 1 0 50%;
    flex: 1 0 50%;
    height: 32px;
    margin: 0;
    padding-left: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 0;
    /* Firefox 1-3.6 */
    border-radius: 0;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

select.ng-empty {
    color: #999;
}

select>option[disabled] {
    color: #999;
}

select>option,
select>optgroup,
select>optgroup>option {
    color: black;
}

#divTermCondition>div {
    padding-bottom: 10px;
    width: 100%;
}

img {
    max-width: 100%;
}

#regoBannerImage {
    width: 100%;
}

.regoTitleInfo {
    margin-top: 1em;
    margin-bottom: 1em;
}

.headerTitle {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    color: white;
}

@media (max-width: 1024px) {
    .headerContainer {
        display: none;
    }
}

.headerImage {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: top;
}

.fadingContainer {
    position: relative;
    height: 320px;
    width: 1000px;
    display: inline-block;
    vertical-align: top;
}

.fadingContainer>img {
    position: absolute;
    left: 0px;
}

.lightGrey {
    background: #f7f7f7;
}

.register-panels {
    display: flex;
    justify-content: center;
    background-image: url('/PlantAssessor/content/register/register/images/brick-wall.jpg');
    background-color: #eee;
    background-size: cover;
    align-items: center;
    color: #009444;
    font-size: 1.6em;
    font-weight: bold;
    height: 32vmin;
    min-height: 320px;
}

.register-panels>* {
    margin: 0 1vmin;
    max-height: 32vmin;
}

.register-panels .register-panel:not(.arrow) {
    transform: translate(0, -2vmin);
    min-height: 320px;
}

.register-panels .register-panel.arrow {
    max-height: 32px;
}

.register-panels>.spacer {
    flex-grow: 1;
}

.grayColor {
    color: gray;
}

.halfOpacity {
    opacity: .5;
}

div .headerTitle {
    display: flex;
    max-height: 34px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #4f9ed7;
}

#logoImage {
    height: 22px;
    margin-top: 4px;
}

.regoHrefLink {
    text-decoration: none;
}

#agreementContainer {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-shrink: 0;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    padding-top: 0.5em;
    justify-content: space-around;
}

#divSubmit {
    padding-top: 10px;
    width: 290px;
    margin: auto;
}

.paymentHalfWidth {
    padding-left: 2.1vw;
    text-align: left;
}

.profileHalfWidth {
    padding-right: 1.9vw;
    text-align: right;
}

@media (min-width: 1024px) {
    .profileFullWidth {
        width: 30%;
    }
    .profileHalfWidth {
        width: 30%;
    }
    .paymentHalfWidth {
        width: 30%;
    }
    .leftTerm {
        width: 30%;
        text-align: right;
        padding-right: 16px;
    }
    .centerTerm {
        padding-left: 18px;
        width: 30%;
        text-align: center;
        margin: auto;
    }
    .rightTerm {
        width: 30%;
        text-align: left;
        padding-left: 16px;
    }
    .agreementItem {
        flex: auto;
    }
    #divSubmit {
        padding-left: 18px;
    }
}

@media (min-width: 1100px) and (max-width: 1199px) {
    #divTermCondition {
        width: 25%;
    }
    #profileContainer.profileFullWidth {
        width: 46%;
        text-align: center;
        margin: auto;
    }
    #profileContainer.profileHalfWidth {
        width: 46%;
    }
    #paymentContainer.paymentHalfWidth {
        width: 46%;
    }
    .leftTerm {
        padding-right: 20px;
    }
    .centerTerm {
        width: 46%;
        text-align: center;
        margin: auto;
    }
    .rightTerm {
        width: 46%;
        text-align: left;
        padding-left: 20px;
    }
    #divSubmit {
        padding-left: 18px;
    }
}

@media (min-width: 601px) and (max-width: 1023px) {
    #divTermCondition {
        width: 38%;
    }
    #profileContainer,
    #paymentContainer,
    #submitContainer {
        width: 98%;
        margin: auto;
    }
    .paymentHalfWidth {
        padding-left: 0 !important;
    }
    .profileHalfWidth {
        padding-right: 0 !important;
    }
}

@media(max-width: 1023px) {
    #agreementContainer {
        width: 100%;
    }
    #agreementContainer>div {
        text-align: left;
        -ms-flex: 1 0 100%;
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
        line-height: 2em;
    }
    #profileContainer,
    #paymentContainer,
    #submitContainer {
        margin: auto;
    }
    .paymentHalfWidth {
        padding-left: 0 !important;
    }
    .profileHalfWidth {
        padding-right: 0 !important;
    }
    .field>label {
        text-align: left;
    }
    .field>input,
    .field>div>input {
        -ms-flex: 1 0 100%;
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
        min-height: 32px;
    }
    .field>select,
    .field>div>select {
        -ms-flex: 1 0 100%;
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
        min-height: 32px;
    }
    #regoSuccessImage {
        height: 200px;
    }
    #regoBannerImage {
        display: none;
    }
    #regoHeaderImage {
        display: none;
    }
    #divSubmit {
        width: 100% !important;
    }
}


/* rego processing*/

#divRegoProcessing {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

#divRegoProcessing>reg-animated-logo {
    margin-top: auto;
    margin-bottom: auto;
}

.setupAccountMessage {
    min-height: 303px;
}

.setupAccountMessage>div {
    margin-top: 48px;
}

.processingContainer {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.processingItem {
    -ms-flex: 2 1 auto;
    -webkit-flex: 2 1 auto;
    flex: 2 1 auto;
}


/* validation css*/

#termConditionErrorMessage {
    padding-top: 15px;
    font-size: 20px;
    text-align: center;
    color: red;
    font-weight: bold;
}


/* Register Unavailable */

#divRegoUnavailable {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

.unavailableMessage {
    min-height: 100px;
    padding: 0 20px;
}

.unavailableMessage>div {
    margin-top: 48px;
}


/*.regoErrorMessage label {display: inline-block;}*/

.invalidRegoField {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}

@media(max-width: 1023px) {
    #divRegoProcessing {
        width: 98%;
    }
    #divRegoUnavailable {
        width: 98%;
    }
}

.rotate-in {
    transition: 0.5s ease-out all;
    transform-origin: top;
}


/* The starting CSS styles for the enter animation */

.rotate-in.ng-enter {
    transform: rotateX(90deg);
    max-height: 0;
}


/* The finishing CSS styles for the enter animation */

.rotate-in.ng-enter.ng-enter-active {
    transform: rotateX(0);
    max-height: 500px;
}

.rotate-in.ng-leave {
    transform: rotateX(0);
    max-height: 500px;
}

.rotate-in.ng-leave.ng-leave-active {
    transform: rotateX(90deg);
    max-height: 0;
}


/* The starting CSS styles for the enter animation */

.fade.ng-enter {
    transition: 1s linear 0.5s;
    opacity: 0;
}


/* The finishing CSS styles for the enter animation */

.fade.ng-enter.ng-enter-active {
    opacity: 1;
}


/* now the element will fade out before it is removed from the DOM */

.fade.ng-leave {
    transition: 1s linear 0s;
    opacity: 1;
}

.fade.ng-leave.ng-leave-active {
    opacity: 0;
}