.underline_text {
    text-decoration: underline;
}

.sub-header .hide-error-message {
  display: none;
}
/*given poor structure the following has been repeated with slight different selector combo as the one above it*/
.sub-header-modal .hide-error-message {
  display: none;
}
.sub-header .hide-new-password-message {
  display: none;
}
.hide-question, .hide-task {
  display: none;
}
.hide-banner-message {
  display: none !important;
}

/*navigation*/
.here-I-Am, .here-I-Am-mobile {
  font-weight: bolder;
}

/* START: consent form
 maintenance note: some styles are applied to html delivered from API*/
.grey-background {
  background: #dddddd;
}
.consent-table {
  border: none;
}
.consent-indent-50 {
  text-indent: 50px;
  margin: 0;
}
.consent-disabled-button {
    text-align:center;
    font-size: 1.3rem;
    padding:5px 22px;
    display:block;
}
.scroll-box .consent-list-item {
  margin-left: 15px;
  font-size: 12px;
}
.scroll-box table .consent-list-item {
  color: gray;
}
.scroll-box .authorization-use-section p {
	font-size: 14px;
}
.scroll-box .authorization-use-section li {
  font-size: 14px;
}
.scroll-box p {
  line-height: 1.6;
}
.consent-copy-capitalization {
  text-transform: uppercase;
}
.scroll-box .consent-copy {
  padding: 0;
}
.scroll-box li {
  font-size: 12pt;
  margin: 8px;
}
.scroll-box h1 {
  font-size: 14px;
  color: gray;
}
.scroll-box li.size-14 {
  font-size: 14px;
  color: gray;
}
.scroll-box p.size-14 {
  font-size: 14px;
  color: gray;
}
/* END: consent form*/

/*pedigree*/
path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}


.loader {
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
  5%, 95% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
  10%, 59% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.087em -0.825em 0 -0.42em #F9A408, -0.173em -0.812em 0 -0.44em #F9A408, -0.256em -0.789em 0 -0.46em #F9A408, -0.297em -0.775em 0 -0.477em #F9A408;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.338em -0.758em 0 -0.42em #F9A408, -0.555em -0.617em 0 -0.44em #F9A408, -0.671em -0.488em 0 -0.46em #F9A408, -0.749em -0.34em 0 -0.477em #F9A408;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.377em -0.74em 0 -0.42em #F9A408, -0.645em -0.522em 0 -0.44em #F9A408, -0.775em -0.297em 0 -0.46em #F9A408, -0.82em -0.09em 0 -0.477em #F9A408;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
  5%, 95% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
  10%, 59% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.087em -0.825em 0 -0.42em #F9A408, -0.173em -0.812em 0 -0.44em #F9A408, -0.256em -0.789em 0 -0.46em #F9A408, -0.297em -0.775em 0 -0.477em #F9A408;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.338em -0.758em 0 -0.42em #F9A408, -0.555em -0.617em 0 -0.44em #F9A408, -0.671em -0.488em 0 -0.46em #F9A408, -0.749em -0.34em 0 -0.477em #F9A408;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, -0.377em -0.74em 0 -0.42em #F9A408, -0.645em -0.522em 0 -0.44em #F9A408, -0.775em -0.297em 0 -0.46em #F9A408, -0.82em -0.09em 0 -0.477em #F9A408;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #F9A408, 0 -0.83em 0 -0.42em #F9A408, 0 -0.83em 0 -0.44em #F9A408, 0 -0.83em 0 -0.46em #F9A408, 0 -0.83em 0 -0.477em #F9A408;
  }
}
#loadingNextPage, [id$='-loader'] {
  position: fixed;
  z-index: 9999;
  top: 15%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.disableClick{
  pointer-events: none !important;
}
.blur-in {
  -webkit-animation: blur 2s forwards;
  -moz-animation: blur 2s forwards;
  -o-animation: blur 2s forwards;
  animation: blur 2s forwards;
}
.blur-out {
  -webkit-animation: blur-out 2s forwards;
  -moz-animation: blur-out 2s forwards;
  -o-animation: blur-out 2s forwards;
  animation: blur-out 2s forwards;
}
@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
}
@-moz-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
}
@-o-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
}
@-webkit-keyframes blur-out {
  0% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}
@-moz-keyframes blur-out {
  0% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}
@-o-keyframes blur-out {
  0% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes blur-out {
  0% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}


/* START: joyride - SPARK style changes */
.joyride-next-tip {
  background: #F7BE00 !important;
  text-shadow: none !important;
}
.joyride-tip-guide {
  background-color: #888;
}
.joyride-nub {
  border-bottom-color:#888 !important;
}
.joyride-tip-guide span.joyride-nub.left {
  border-color: #888 !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
}
.joyride-tip-guide span.joyride-nub.bottom {
  border-color: #888 !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
/* END: joyride */

/* MARTIN overide a vendor style: this is for slider, adding next and prev text*/
/* currently not in use, yet. clean up to be completed when sliders are re-added*/
.orbit-next, .orbit-prev {
  display: initial !important;
}

/*MARTIN: override some RF styling on radio buttons*/
/* START */
.extend-width {
  width:100% !important;
}
/* END */

/* MARTIN - Styles for FAQ page */
.faq-category{
  font-size: 30px;
  font-weight: 300;
  color: #FAAD00;
  display: block;
  line-height: 1.4;
  margin-bottom: 1.125rem;
  position: relative;
  padding-left: 1.75rem;
}
.faq-question{
  font-size: 18px;
  font-weight: 400;
  color: #FAAD00;
  line-height: 1.4;
  display: block;
  margin-bottom: .75rem;
  position: relative;
  padding-left: 3.50rem;
}
.faq-question:before{
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e600";
  position: absolute;
  top: .250rem;
  left: 1.75rem;
}
.faq-answer{
  font-size: 15px;
  color: #413E3F;
  line-height: 1.3;
  margin: 0 0 .75rem 3.5rem;
}
/* END FAQ Styling */


/* first use: staff-pictures */
.image-left-frame {
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.image-left-frame-no-border {
  float: left;
  margin-right: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

/* ERROR Displays */
.error-red-border{
  border-left: 1px solid #FF0000 !important;
  border-right: 1px solid #FF0000 !important;
  border-bottom: 1px solid #FF0000 !important;
  border-top: 1px solid #FF0000 !important;
}

/* HELPER Visual for raised issues in registration */
.message-visual:before{
  content: url('/static/images/error-icon.png');
  position: relative;
  top: 10px;
  margin-left: -29px;
  display: inline-block;
  left: -10px;
}
.message-visual{
  margin: 0 2rem;
}

.callout {
  /*margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 3px;*/
  position: relative;
  color: #222222;
  background-color: white;
}
.callout > :first-child {
  margin-top: 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout.primary {
  background-color: #def2f8;
}
.callout.secondary {
  background-color: #fcfcfc;
}
.callout.success {
  background-color: #e6f7d9;
}
.callout.alert {
  background-color: #fcd6d6;
}
.callout.warning {
  background-color: #fff3d9;
}
.callout.small {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.callout.large {
  padding-top: 3rem;
  padding-right: 3rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
}

/* START: Dashboard playlist */
.playlist-image {
  height: 40% !important;
  width: 40% !important;
}
.no-right-padding {
  padding-right: 0px !important;
}
.no-left-padding {
  padding-left: 0px !important;
}
.clickable-div{
  cursor: pointer;
}
/* END: Dashboard playlist */

/* START: Spit Kit Status */
[class*="task-box"] {
  font-family: 'icomoon';
  speak: none;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
[class*="task-box-"] span {
  margin-left: .5rem;
  font-size: 12px;
  font-weight: normal;
  color: #413E3F;
  position: relative;
  font-family: 'objektiv-mk1', 'Lato', sans-serif, 'icomoon';
  line-height: 19.2px;
}
[class*="task-box-"] div {
  margin-left: .5rem;
  font-size: 12px;
  font-weight: normal;
  color: #413E3F;
  position: relative;
  font-family: 'objektiv-mk1', 'Lato', sans-serif, 'icomoon';
  line-height: 19.2px;
}
.task-box-checkmark:before{
  content: "\e614";
  color: #1A6CFA;
}
.task-box-right-arrow:before{
  content: "\e600";
  color: #12AADF;
}
.task-box-x:before{
  content: "\e613";
  color: red;
}
.task-box-dash:before{
  content: "\e612";
  color: #BFBEBE;
}
.task-box-warning:before{
  content: "\ea07";
  color: red;
}
.status-sub-text {
  /*font-size: .75rem;*/
  text-transform: uppercase;
  font-family: 'objektiv-mk1', 'Lato', sans-serif, 'icomoon';
  font-size: 12px !important;
  font-weight: 300;
  color: #413E3F;
  /*display: block;*/
  position: relative;
}
/* TODO: Had to overwrite task list style.  Need to refactor RF styling to more generic styling. */
/* TODO: should consider not negating and have explicit implementation*/
.no-pencil a:after {
  background: none;
}
/* TODO: below is to address putting a tooltip icon in place of pencil for task lists (ref: savliva kit status)*/
/* TODO: should consider not negating and have explicit implementation*/
.no-pencil img {
  max-width: 24px;
}
/* END: Spit Kit Status */

.background-spark-gray {
  background-color: #CCCCCC;
}

.youtube-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.youtube-embed-container iframe, .youtube-embed-container object, .youtube-embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* START: Authorization form */
.position-under-checkbox-label-hide {
  margin-left: 2rem;
  display: none !important;
}

.title-bottom-margin {
  border-bottom: 1px solid rgba(66, 62, 63, .2);
}
.title-top-pad {
  margin-top: 20px;
  margin-bottom: 0;
}
.li-content-left-20 {
  margin-left: 20px;
}
.underline{
border-bottom: 1px dotted #c03;
width: 100%;
display: block;
}
.background-color-none {
  background: none !important;
}
.auth-form-title {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: #413E3F;
  margin: 1.95rem 0 1rem;
}
.temp-indent-30 {
  padding-left: 30px;
}

.margin-top-10 {
  margin-top: 10px;
}

.remove-provider {
  /*font-size: .7rem !important;*/
  height: 25px;
}
.question label.radio.remove-provider span {
  font-size: .7rem !important;
}
/* END: Authorization form */

.dashboard-status-width-for-wrapped-text {
  width: 95.45%;
}

#parent2-chart {
  display: block;
  margin: auto;
  width: 500px;
}

/* START: Documented patterns */
.word-wrap-indent-25 {
  display: inline-block;
  padding-left: 25px;
  text-indent: -25px;
}

/* START: animated label for inputs */
/*        requires js currently in main.js */
.input-label-animated > label {
  display: block;
  padding-top: 30px;
  margin-right: 8px;
}
.input-label-animated > label .label-text {
  color: #9B9B9B;
  cursor: text;
  font-size: 20px;
  line-height: 20px;
  transform: translateY(-34px);
  transition: all 0.3s;
}
.input-label-animated > label input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #4A4A4A;
  letter-spacing: -1px;
  outline: 0;
  padding: 5px 20px;
  transition: all 0.3s;
  width: 200px;
}
.input-label-animated > label input:focus {
  width: 400px;
}
.input-label-animated > label input:focus + .label-text {
  color: #413E3F;
  font-size: 15px;
  transform: translateY(-54px);
}
.input-label-animated > label input.value-exists + .label-text {
  font-size: 15px;
  transform: translateY(-54px);
}

.input-label-animated-static > div .label-text {
  color: #9B9B9B;
  cursor: text;
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
.input-label-animated-static > div .label-text.value-exists {
  font-size: 15px;
}
/* END: animated label for inputs */

/* START: sub-header-messaging-section */
.sub-header-messaging-section #messaging-wrapper{
  margin: 2em 3.5rem;
  display: block;
}

.sub-header-messaging-section #messaging-wrapper span{
  margin: 0 4rem;
  padding: 1rem 0;
  font-size: 13px;
  top: -8px;
  display: block;
}

.sub-header-messaging-section a{
  color: #00AADE;
}

.sub-header-messaging-section #messaging-text{
  margin: 2em 3.5rem;
  position: relative;
  display: block;
  font-size: 17px;
}
.sub-header-messaging-section #messaging-wrapper span:before{
  position: relative;
  top: 10px;
  margin-left: -29px;
  display: inline-block;
  left: -10px;
}

.sub-header-messaging-section .messaging-type-error span:before{
  content: url('/static/images/error-icon.png');
}

.sub-header-messaging-section .messaging-type-success span:before{
  content: url('/static/images/checkbox-on.png');
}

.sub-header-messaging-section .messaging-type-error{
  background-color: #fcd6d6;
  border: 1px solid #FF0000;
  color: #000;
}

.sub-header-messaging-section .messaging-type-success{
  background-color: #e6f7d9;
  border: 1px solid #69BA19;
  color: #000;
}
/* END: sub-header-messaging-section */


/* END: Documented patterns */

/* Start: Custom Radio - round circle */

.container-radio-custom-round-checkmark {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-radio-custom-round-checkmark input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark-custom-circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio-custom-round-checkmark:hover input ~ .checkmark-custom-circle {
  background-color: #ccc;
}

/* On mouse-over checked box, add a spark hover over background color */
.container-radio-custom-round-checkmark input:checked:hover ~ .checkmark-custom-circle {
  background-color: #f9a408;
}

/* When the radio button is checked, add a spark question checked background */
.container-radio-custom-round-checkmark input:checked ~ .checkmark-custom-circle {
  background-color: #f7be00;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-custom-circle:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio-custom-round-checkmark input:checked ~ .checkmark-custom-circle:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-radio-custom-round-checkmark .checkmark-custom-circle:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* End: Custom Radio - round circle */

/* Start: Clinical Affiliation Page */
.clinic-affiliation-fieldset {
  border: none;
  padding: 0;
}
.clinic-disclaimer-copy {
  font-size: 80%; 
  padding-top: 10px;
}
/* End: Clinical Affiliation Page */

/* Start: Dashboard Landing Page - youtube embedded video */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border:1px solid #bfbfbf;
  margin: 0 24px 0 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 40rem){
    .videoWrapper {
    margin: 0;
  }
}
/* End: Dashboard Landing Page - youtube embedded video */

.disableClickTurnstile{
  pointer-events: none !important;
  background-color: #e7e7e7 !important;
}