.App {
    width: 100%;
    margin-left: 5%;
}

body {
    margin: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;   
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* error page */
.regErrorCard {
    height: 100vh;
    padding: 8px;
}

.regErrCardText {
    margin-bottom: 0;
}

/*  welcome page  */
.welcome-page-title {
    color: #000;
    font-weight: normal;
}

.welcome-page-message {
    color: #000;
    font-size: small;
    font-weight: normal;
}

.welcome-page-content {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}

.welcome-page-buttons {
    display: flex;
    width: 100%;
    margin-top: 25%;
    margin-left: auto;
    margin-right: auto;
}

.welcome-page-button {
    width: 100%;
    margin-bottom: 15px;
}


/*  guided mode  */
.guided-flow {
    margin-top: 12%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10vw;
    padding-right: 10vw;
    max-width: 450px;
}

.guided-flow .flow-entry {
    display: flex;
    align-items: center;
    background-color: #EFF1F6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: .15s ease;
    padding: 10px;
    margin-top: 1em;
    max-width: 350px;
    min-height: 60px;
    cursor: pointer;
}

.guided-flow .flow-entry .form-check {
    margin-bottom: 0;
}

.flow-entry.flow-entry-checked {
    border-color: #0070F4;
    background-color: #F4F9FF;
}

#guided-mode-opt-in-count {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.guided-flow .header-localityname {
    display: inline;
    font-weight: bold;
    font-size: small;
}

.guided-flow .header-residency {
    display: inline;
    font-size: small;
    padding-left: 1%;
}

.guided-flow .flow-entry .form-check > label {
    width: 100%;
    font-size: x-small;
}

.guided-flow .flow-entry .question-label {
    font-size: small;
}

.guided-mode-warning {
    color: #ce0000;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: small;
}

.guided-flow-summary {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.guided-flow-summary > h6 {
    font-size: small;
}


.guided-flow-summary-div {
    width: 100%;
    margin-top: 2%;
}

.guided-flow-summary-progress {
    padding-top: 20px;  
    justify-content: center;
    display: flex;
}

.guided-flow-summary-message {
    color: #000;
    font-weight: normal;
}

.guided-flow-form-completed-message {
    color: #000;
    font-weight: normal;
}

.check-my-progress-button {
    margin-left: 4%;
}

.guided-mode-title {
    color: #000;
    font-weight: normal;
}

.guided-mode-table-status-column-not-complete {
    color: red;
    font-weight: bold;
}

.guided-mode-table-status-column-complete {
    color: green;
    font-weight: bold;
}

.guided-mode-table-status-column-in-progress {
    color: black;
    font-weight: bold;
}

#checkMyProgressIcon {
    margin-right: 5px;
}

.checkMyProgress {
    text-align: center;
    margin-bottom: 20px;
}

.check-my-progress-button {
    margin-left: 0%;
}


/*  choose mode  */
.choose-mode {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.choose-mode-table {
    margin-top: 10%;
    margin-bottom: 1%;
}

.choose-mode-table tbody tr:hover {
    border-color: #0070F4 !important;
    border-style: solid;
    border-width: 2px !important;
    background-color: #F4F9FF !important;
}

.choose-mode-table tbody td:hover {
    cursor: pointer;
}

.choose-mode-table-footer {
    margin-left: auto;
    margin-right: auto;
    font-size: small;
}

.choose-mode-recommended-form {
    color: #ce0000;
    font-size: 105%;
    font-weight: 900;
}

.choose-mode-disabled-form {
    color: #cfd0d1;
}

/* checkbox/radio */
.form-check-input.is-invalid {
    border-color: rgba(0,0,0,.25) !important;
}
.form-check-input.is-valid {
    border-color: rgba(0,0,0,.25) !important;
}
.form-check-label{
    color:#000 !important;
} 

/* notes */
#noteParagraph {
    margin-bottom: .5rem;
}

/*  breadcrumbs  */
.breadcrumbs {
    width: 95%;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.breadcrumb {
    border: 1px solid #000;
    border-radius: .25rem;
    margin-bottom: 4px;
    padding: 0px;
    width: 100%;
}

.breadcrumb > button {
    width: 100%;
    font-size: 1rem;
    white-space: normal;
    text-align: left;
}

.active-breadcrumb {
    border-style: none;
    background-color: #0070f4 !important;
}

.active-breadcrumb:hover {
    border-style: none;
    background-color: #3e93f7 !important;
}

.inactive-breadcrumb {
    background-color: #FFFFFF !important;
    border-style: none;
    color: #0070f4;
}

.inactive-breadcrumb:hover {
    border-style: none;
    background-color: #e2e6ea !important;
    color: #0070f4;
}

#breadcrumb-icon {
    vertical-align: middle;
    right: 0px;
    display: inline-block;
}

.breadcrumb-dropdown {
    margin-bottom: 2vh;
    color: white;
    background-color: #0d6efd;
    padding: 2px 6px;
    border-radius: .4rem;
    width: 100%;
    text-align: left;
    padding-right: 10px;
    display: flex;
    align-items: center;

}

.breadcrumb-number {
    font-weight: bold;
    margin-right: .8rem;
    margin-left: .3rem;
}
/* Breadcrumb Dropdown */
.dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    margin-top: 2px;
    width: 100%;
  }

.dropdown-item {
    padding: 12px 10px;
    white-space: initial;
    display: flex;
}
 
.dropdown-divider {
    margin: 0;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex-grow: 1
}

/*  buttons  */
.button-group-centered {
    justify-content: center;
    text-align: center !important;
    margin-bottom: 1.5vh;
}

.button-group {
    justify-content: center;
}

.button {
    display: inline-block;
    vertical-align: middle;
    cursor: hand;
}

.button-disabled {
    pointer-events: none;
    opacity: 0.65;
}

.button-left-margin {
    margin-left: 1%;
    display: inline-block;
    vertical-align: middle;
    cursor: hand;
}

.button-right-margin {
    margin-right: 1%;
    display: inline-block;
    vertical-align: middle;
    cursor: hand;
}

.button-margin {
    margin-left: 1%;
    margin-right: 1%;
    display: inline-block;
    vertical-align: middle;
    cursor: hand;
}

.button-no-margin {
    cursor: hand;
}

.next-button-left-margin {
    margin-left: 1%;
    display: inline-block;
    vertical-align: middle;
    cursor: hand;
}

.primary-button {
    color: #fff;
    background-color: #0070f4;
    border-color: #007bff;
}

.primary-outline-button {
    color: #0070f4;
    background-color: transparent;
    background-image: none;
    border-color: #0070f4;
}

.primary-button:hover,
.primary-outline-button:hover {
    color: #fff;
    background-color: #3e93f7;
    border-color: #0062cc;
}

.secondary-button {
    color: #212529;
    background-color: #cfd0d1;
    border-color: #f8f9fa;
}

.inverse-primary-button {
    color: #0070f4;
    background-color: #fff;
    border-color: #007bff;
}

.inverse-primary-button:hover {
    color: #fff;
    background-color: #3e93f7;
    border-color: #0062cc;
}

.secondary-button:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.secondary-button-inverse {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #cfd0d1;
}

.secondary-button-inverse:hover {
    color: #212529;
    background-color: #cfd0d1;
    border-color: #f8f9fa;
}

.warning-button {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

.warning-button:hover {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.danger-button {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.danger-button:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.success-button {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.success-button:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

#addButtonIcon,
#removeButtonIcon,
#saveButtonIcon,
#cancelButtonIcon,
#signoutButtonIcon,
#closeButtonIcon,
#nextButtonIcon,
#wizardTabIcon,
#formAndInstructionsTabIcon, 
#verifyButtonIcon {
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
}

#finishedButtonIcon,
#submitButtonIcon {
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

#printButtonIcon,
#downloadButtonIcon {
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

#mainMenuButtonIcon,
#backButtonIcon {
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

#backButton {
    background-color: #eaeaea;
    color: #535353;
    border-radius: 7px;
    height: 45px;
}

#nextButton {
    display: inline-block;
    border-radius: 7px;
    height: 45px;
    min-width: 250px;
}
#nextFlowContinueButton {
    border-radius: 7px;
    height: 45px;
}

#guidedModeButton {
    color: #212529;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #E9E9E9;
    font-size: 1.1rem;
    min-width: 11rem;
    max-width: 300px;
    min-height: 125px;
}

#guidedModeButton.guided-only {
    margin-right: 0px;
}

#guidedModeButton:hover {
    border: 2px solid #0070F4;
    background: #F4F9FF;
}

#chooseModeButton {
    color: #212529;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #E9E9E9;
    font-size: 1.1rem;
    min-width: 11rem;
    max-width: 300px;
    min-height: 125px;
    margin-left: 15px;
}

#chooseModeButton:hover {
    border: 2px solid #0070F4;
    background: #F4F9FF;
}

#spfCss {
    margin: 5px;
}

.welcome-page-icons {
    color: #0070F4;
    min-height: 4.5rem;
    min-width: 4.5rem;
    margin-bottom: 10px;
}

.welcome-page-sign-out {
    cursor: pointer;
    text-decoration: underline;
    margin-top: 15rem;
}

 /*  finish/form submitted page  */
.finish-page-content {
    padding: 10px;
    margin-top: 25%;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.finish-exit-button-container {
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    display: flex;
    justify-content: center;
}

.form-submitted-page-content {
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
}

.form-submitted-buttons {
    margin-top: 5%;
    margin-bottom: 10px;
}

.testing-view-buttons {
    margin-bottom: 10px;
}

.postback-xml {
    font-weight: bold;
    border: solid 1px #ddd;
    background-color: #fcfca9;
    font: normal 10px verdana;
    line-height: 15px;
}


/*  ineligible page  */
.ineligible-page {
    width: 100%;
    margin-top: 3%;
    display: flex;
    justify-content: center;
}

.ineligible-page-content {
    width: 60%;
}

.ineligible-page-message {
    font-weight: normal;
    word-wrap: normal;
}


/*  wizard  */
.wizard {
    width: 100%;
    margin-bottom: 40px;
}

.wizard-content {
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
}

.wizard-pa-address-selection {
    display: grid;
    width: 95%;
    padding-top: 20px;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.wizard-header {
    background-color: rgba(255, 255, 255, 0.072);
}

.wizard-header-content {
    text-align: center;
    padding-top: 1%;
}

.guided-flow .question {
    width: 95%;
    padding: 10px;
    box-sizing: border-box;
}

.question-container {
    min-height: inherit;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.question {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
    padding: 2px;
    width: 100%;
}

.question-warning {
    color: #ce0000;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: small;
}

.question-label {
    word-wrap: normal;
    font-weight: bold;
    display: block;
    font-size: small;
    margin-bottom: 5px;
}

.calculated-field-caption {
    font-weight: bold;
    color: #ce0000;
}

.notes {
    font-size: small;
    margin-left: auto;
    margin-right: auto;
}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #d5d7db;
}

.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #d5d7db;
   opacity:  1;
}

.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #d5d7db;
   opacity:  1;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #d5d7db;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
   color:    #d5d7db;
}

.form-control::placeholder { /* Most modern browsers support this now. */
   color:    #d5d7db;
}

.wizard-blank-form-images {
    width: auto;
    height: auto;
    max-width: 80%;
    margin-left: 10%;
}

.wizard-tabs-content {
    border-bottom: 2px solid black;
    margin-bottom: 5px;
    padding-left: 1%;
}

.wizard-tabs {
    background-color: #fff;
}

.wizard-tabs:hover {
    background-color: #e2e6ea;
}

.inactive-wizard-tab {
    color: rgb(0, 112, 244) !important;
    background-color: #fff !important;
}

.active-wizard-tab {
    color: #495057 !important;
    background-color: #fff !important;
}


/* Valid Feedback Message */
.valid-feedback {
    color : #0a8927 !important;
}

/* Remove extra border generated on Select Boxes */
.css-yk16xz-control, .css-1pahdxg-control:hover, .css-1pahdxg-control {
    border : none !important;
    box-shadow: none !important;
}

/* Select Box Placeholder text */
.css-1wa3eu0-placeholder {
    color: #767676 !important;
}

/* Select Box Z-Index for drop down menu only */
.css-26l3qy-menu {
    z-index: 9999 !important;
}


/*  jurat page  */
.jurat {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    font-size: small;
}

.jurat-content-section {
    border-top: 1px solid lightgray;
    padding-bottom: 15px;
    padding-top: 15px;
}

.jurat-json-log {
    background-color: #e9ecef;
    border: 1px solid black;
    border-radius: 15px;
    padding-left: 15px;
    padding-top: 15px;
}

.jurat-previous-page-link {
    color: #337ab7;
    text-decoration: none;
    font-weight: bold;
}

.jurat-buttons-content {
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.jurat-submission-failed-message {
    color: red;
    font-weight: bold;
}

.jurat-pin {
    width: 20%;
    margin-bottom: 20px;
    margin-top: 20px
}

.jurat-pin-input {
    height:25px; 
    font-size:11px; 
    width: 125px
}

.jurat-pin-label {
    font-size:13px;
}

#pdfPreviewHeaderContent {
    margin-top: 2%;
    margin-bottom: 3%;
}

#pdfPreviewHeaderText {
    width: 50%;
    text-align: left;
    display: inline-block;
}

#pdfPreviewHeaderButtons {
    width: 50%;
    text-align: right;
    display: inline-block;
}


/*  helper pages  */
.helper-welcome-page-content {
    margin: auto;
    width: 75%;
}

.helper-welcome-page-content-margin {
    margin-top: 5%;
}

.helper-welcome-header-content {
    text-align: center;
    display: flex;
    width: 100%;
}

.helper-welcome-header {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    width: 75%;
}

.helper-welcome-company-logo {
    max-width: 350px;
    max-height: 350px;
    display: block;
    margin: 1% auto 1% auto;
}

.helper-welcome-message {
    font-weight: normal;
    font-size: small;
    color: #000;
}

.helper-welcome-button {
    text-align: center;
}

.helper-wizard-header-content {
    text-align: center;
    display: flex;
    width: 100%;
}

.helper-wizard-header {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    width: 75%;
}

.helper-data-review-content {
    margin-top: 10px;
    width: 100%
}

.helper-work-address-table {
    margin-top: 10px;
}

.helper-work-address-table td,
.helper-work-address-table th,
.helper-data-review-content td,
.helper-data-review-content th {
    font-size: x-small;
}

.helper-copy-address-message {
    font-size: x-small;
    margin-top: 5%;
}


/*  toolbar  */
.toolbar {
    background-color: #cfd0d1;
    border-color: #e7e7e7
}

.helper-toolbar {
    display: flex;
    padding: 4px 14px;
    background-color: #cfd0d1;
    border-color: #e7e7e7;
    width: 100%;
}

.toolbar a {
    color: #000;
    padding-left: 1%;
}

.toolbar a > span {
    margin-left: 5px;
}

.toolbar-language-selector {
    margin-left: auto;
    position: relative;
    width: 145px;
}

.navbar-brand {
    border: none;
}

#language-selection-icon {
    top: 10px;
    position: absolute;
    height: 1.25em;
    width: 1.25em;
    left: 6px;
    color: #6c757d;
}

#language-selection{ 
    padding-left: 1.75rem;
}

.mobile-select-view {
    width: 100px;
}

/* Properties related to toolbar employer message */
.container-fluid {
    position: relative;
}
.message-button-icon {
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 180px;
    width: 25px;
    height: 25px;
}

#move-popover {
    inset: 50px 160px auto auto !important;
    transform: none !important;
}

.popover-arrow {
    display: none !important;
}

.toolbar-employer-message {
    border: 1px solid black;
    padding: 20px;
    margin-top: 1%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 10px;
    background-color: rgba(78, 238, 255, 0.05);
}

.toolbar-employer-message:hover {
    background-color: rgba(78, 238, 255, 0.095);
}

.toolbar-employer-message-footer,
.toolbar-employer-message-footer:hover {
    background-color: transparent;
}

.toolbar-employer-message-footer > button {
    float: right;
}

/*  adress/lock-in-letter warning  */
.warning {
    width: 100%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
}

.guided-flow .warning-content {
    width: 99%;
}

.warning-content {
    width: 90%;
}

.warning-content > ul {
    margin-top: 1%;
}

.no-forms-required-warning {
    margin-top: 5%;
    color: red;
}

/*  misc  */
.div-top-border {
    border-top: #000 1px solid;
}

.address-changed-header {
    color: #8a6d3b;
}

.address-changed {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.address-changed-reason {
    color: red;
}

/* blank forms */
.blank-forms-page {
    margin: 0px auto 0px auto;
    width: 100%;
}

.blank-forms-header {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blank-forms-footer {
    text-align: center;
    font-size: small;
    margin-top: 2rem;
}

.blank-forms-instructions {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blank-forms-company-logo {
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    max-height: 350px;
}

.blank-forms-company-logo img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width: 100%;
    max-height: 100%;
}

.blank-forms-locality {
    font-weight: bold;
}

.blank-forms-link {
    padding-left: .1rem;
}

.blank-forms-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.blank-forms-tbody-margin {
    margin-top: 10% !important;
}

.blank-forms-hr {
    height: 1px;
    border: solid 1px black;
    background-color: black !important;
    color: black !important;
}

.blank-forms-date {
    white-space: nowrap;
}

.blank-forms-table-responsive {
    font-size: .8rem;

}

.blank-forms-table-responsive td, .blank-forms-table-responsive th {
    padding: .1rem;
    
}

/* loading wheels */
.tiny-loader {
    display: inline-block;
    width: 40px;
    height: 40px;
}

.tiny-loader-container {
    color: red;
    font-weight: bold;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.tiny-loader:after {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    margin: 3px;
    margin-top: 50%;
    border-radius: 50%;
    border: 3px solid #000;
    border-color: #000 transparent #000 transparent;
    animation: tiny-loader 1.2s linear infinite;
}

@keyframes tiny-loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.loader {
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;
}

.loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 2px;
    border: 2px solid #3e93f7;
    border-radius: 50%;
    animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #3e93f7 transparent transparent transparent;
}

.loader div:nth-child(1) {
    animation-delay: -0.45s;
}

.loader div:nth-child(2) {
    animation-delay: -0.3s;
}

.loader div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*  pdf/print  */
@media print {
    .printElement {
        height: 100%;
        width: 100%;
    }
}