/**
 * style.css
 *
 * Theme Name: Vitalink
 * Theme URI:   http://www.machine-agency.com
 * Author:      Machine
 * Author URI:  http://www.machine-agency.com
 * Description: Custom Theme for Vitalink
 * Version:     1.0
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: machine
 */


 /* ==========================================================================
    Global
    ========================================================================== */

:root{
    --v-green: #75BFAD;
    --v-light-blue: #E3F3FB;
    --v-blue: #79B6D8;
    --v-dark-blue: #2E5368;
    --v-red: #D97175;
    --v-link-blue: #60A1C6;
    --table-odd: #FAFCFE;
    --table-even: #F2F7FC;
    --v-red-blue-green: linear-gradient(90deg, #D97175 0%, #79B6D8 50%, #75BFAD 100%);
    --v-blue-green: linear-gradient(90deg, #79B6D8 0%, #75BFAD 100%);
}


body {
  color: #000;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Onest', sans-serif;
}

section{
  padding: 4rem 0;
  width: 100%;
}

.grid-container{
  max-width: 80rem;
}

main > h1,
main > h2,
main > h3,
main > h4,
main > h5,
main > h6,
main > p,
main > ul,
main > ol,
main > blockquote,
main > .wp-block-columns,
main > .wp-block-buttons{
	max-width: 60rem;
	margin: 1rem auto;
	padding: 0 1rem;
}

main > ul,
main > ol{
	padding-left: 2rem;
}

main > h1:last-child,
main > h2:last-child,
main > h3:last-child,
main > h4:last-child,
main > h5:last-child,
main > h6:last-child,
main > p:last-child,
main > ul:last-child,
main > ol:last-child,
main > .wp-block-image:last-child{
	margin-bottom: 4rem;
}

.wp-block-image.alignwide {
    max-width: 80rem;
	margin: 1rem auto;
}

.wp-block-image.alignright,
.wp-block-image.alignleft{
	max-width: 60rem;
}

.wp-block-image .aligncenter {
    max-width: 60rem;
    padding: 0 1rem;
}

section h1:last-child,
section h2:last-child,
section h3:last-child,
section h4:last-child,
section h5:last-child,
section h6:last-child,
section p:last-child,
section ul:last-child,
section ol:last-child{
    margin-bottom: 0;
}


h1{
    font-family: 'Onest', sans-serif;   
    color: var(--v-dark-blue);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 1rem;
}

h2{
    font-family: 'Onest', sans-serif;   
    color: var(--v-dark-blue);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 1rem;
}

h3{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 1rem;
}

h4{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 1rem;
}

h5{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h6{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

p, li{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

a{
    font-family: 'Onest', sans-serif;
    color:(--v-link-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

th{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: left;
}

td{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

thead {
    background: transparent;
    color: var(--v-dark-blue);
    border: none;
}

thead, tbody, tfoot{
    border: none;
}

tbody tr{
    background-color: var(--table-odd);
}

tbody tr:nth-child(even) {
    background-color: var(--table-even);
}

main .wp-block-button__link,
.button{
    text-decoration: none;
    background: var(--v-blue);
    border-radius: 4px;
    color: #FFF;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    height: auto;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

main .wp-block-button__link:hover,
main .wp-block-button__link:focus,
.button:hover,
.button:focus{
    background: var(--v-dark-blue);
}

[type='text'], 
[type='password'], 
[type='date'], 
[type='datetime'], 
[type='datetime-local'], 
[type='month'], 
[type='week'], 
[type='email'], 
[type='number'], 
[type='search'], 
[type='tel'], 
[type='time'], 
[type='url'], 
[type='color'], 
textarea{
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 4px;
    border: 1px solid var(--v-blue);
    box-shadow: none;
    margin: 0;
    height: auto;
}


[type='text']:focus, 
[type='password']:focus, 
[type='date']:focus, 
[type='datetime']:focus, 
[type='datetime-local']:focus, 
[type='month']:focus, 
[type='week']:focus, 
[type='email']:focus, 
[type='number']:focus, 
[type='search']:focus, 
[type='tel']:focus, 
[type='time']:focus, 
[type='url']:focus, 
[type='color']:focus, 
textarea:focus{
    box-shadow: none;
    border: 1px solid var(--v-blue);
}


select{
    appearance: none;
    box-shadow: none;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--v-dark-blue);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%2846, 82, 104%29'></polygon></svg>");
    color: var(--v-dark-blue);
}

select:hover,
select:focus,
select:active{
    box-shadow: none;
    border: 1px solid var(--v-dark-blue);
}




.form-grey [type='text'], 
.form-grey [type='password'], 
.form-grey [type='date'], 
.form-grey [type='datetime'], 
.form-grey [type='datetime-local'], 
.form-grey [type='month'], 
.form-grey [type='week'], 
.form-grey [type='email'], 
.form-grey [type='number'], 
.form-grey [type='search'], 
.form-grey [type='tel'], 
.form-grey [type='time'], 
.form-grey [type='url'], 
.form-grey [type='color'], 
.form-grey textarea{
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 4px;
    border: 1px solid #D0D8DF;
    background-color: #FAFCFE;
    box-shadow: none;
    margin: 0;
    height: auto;
}


.form-grey [type='text']:focus, 
.form-grey [type='password']:focus, 
.form-grey [type='date']:focus, 
.form-grey [type='datetime']:focus, 
.form-grey [type='datetime-local']:focus, 
.form-grey [type='month']:focus, 
.form-grey [type='week']:focus, 
.form-grey [type='email']:focus, 
.form-grey [type='number']:focus, 
.form-grey [type='search']:focus, 
.form-grey [type='tel']:focus, 
.form-grey [type='time']:focus, 
.form-grey [type='url']:focus, 
.form-grey [type='color']:focus, 
.form-grey textarea:focus{
    box-shadow: none;
    border: 1px solid #D0D8DF;
    background-color: #FAFCFE;
}


.form-grey select{
    appearance: none;
    box-shadow: none;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #D0D8DF;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%2846, 82, 104%29'></polygon></svg>");
    color: var(--v-dark-blue);
    background-color: #FAFCFE;
}

.form-grey select:hover,
.form-grey select:focus,
.form-grey select:active{
    box-shadow: none;
    border: 1px solid #D0D8DF;
    background-color: #FAFCFE;
}


/* ==========================================================================
  Header
  ========================================================================== */


.site-header{
	padding: 1rem 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 99;
	transition: all 0.3s ease;
	background: var(--v-blue-green);
}


.site-header .grid-container{
    max-width: 100rem;
}

.site-header .menu li a{
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.menu-wrapper-header > .menu > li:last-child a{
    padding-right: 0;
}

.menu-wrapper-header > .menu > li:last-child a:has(img){
    padding-left: 0;
}

body.loading * {
    cursor: wait;
    pointer-events: none;
}
body.loading > main {
    opacity: 0.5 !important;
}

#message-bar {
    border-left: 5px solid black;
    padding-left: 1rem;
}
#message-bar.success {
    border-left-color: green;
}
#message-bar.fail {
    border-left-color: red;
}

/*main {*/
/*    width: 60rem;*/
/*    margin: 0 auto;*/
/*}*/




/* ==========================================================================
    Dashboard
  ========================================================================== */

.hcp-list tbody tr:hover,
.patient-list tbody tr:hover {
    cursor: pointer;
    background-color: var(--v-light-blue);
}

[contenteditable="true"]:hover {
    background-color: #eee;
}


[contenteditable="true"] {
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px;
}
[contenteditable="true"]:empty {
    border-color: black;
    width: 1rem;
}

[contenteditable="false"]{
    display: inline-block;
    padding: 2px;
    border: 1px solid transparent;
}

.grid-container.patient-filter-container{
    max-width: 100rem;
    padding-bottom: 4rem;
}

.patient-filter{
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.title-with-button{
    display: flex;
    justify-content: space-between;
}

.section--patient-details .grid-container{
    max-width: 100rem;
}

.hcp-details-header,
.patient-details-header{
    padding-bottom: 4rem;
}

.hcp-details,
.patient-details{
    position: relative;
    border: 1px solid var(--v-blue);
    padding: 2rem;
}

.hcp-details > div,
.patient-details > div{
    color: #738090;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hcp-details > div span,
.patient-details > div span{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--v-dark-blue);
}

.hcp-details > div:has(select),
.hcp-details > div:has(span),
.patient-details > div:has(select),
.patient-details > div:has(span){
    padding-bottom: 1rem;
}

.hcp-details > div > select,
.patient-details > div > select{
    margin-top: 5px;
}

.hcp-details > div:has(span):last-child,
.patient-details > div:has(span):last-child{
    padding-bottom: 0;
}

.button-radio,
.button-checkbox{
    position: relative;
    cursor: pointer;
    display: block;
    margin-bottom: 1rem;
}

.button-radio:last-child,
.button-checkbox:last-child{
    margin-bottom: 0;
}

.button-radio input,
.button-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: 0;
  
}

.button-radio input ~ span.radio-label,
.button-checkbox input ~ span.checkbox-label{
    position: relative;
    z-index: 3;
    font-family: 'Onest', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    height: auto;
    padding: 1rem;
    display: block;
    border-radius: 4px;
    border: 2px solid var(--v-blue, #79B6D8);
    text-align: center;
    color: var(--v-dark-blue);
}

.button-radio .radio-bg,
.button-checkbox .checkbox-bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.button-radio input:hover ~ span.radio-label,
.button-radio input:checked ~ span.radio-label,
.button-checkbox input:hover ~ span.checkbox-label,
.button-checkbox input:checked ~ span.checkbox-label{
    color: #fff;
}

.button-radio input:hover ~ span.radio-label > span.radio-bg,
.button-radio input:checked ~ span.radio-label > span.radio-bg,
.button-checkbox input:hover ~ span.checkbox-label > span.checkbox-bg,
.button-checkbox input:checked ~ span.checkbox-label > span.checkbox-bg{
    background: var(--v-blue-green);
    
}

.button-checkbox-list{
    display: flex;
    gap: 1rem;
    margin: 1rem 0 2rem 0;
}

.button-checkbox-list li{
    position: relative;
    z-index: 3;
    font-family: 'Onest', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    height: auto;
    padding: 1rem;
    display: block;
    border-radius: 4px;
    border: 2px solid var(--v-blue, #79B6D8);
    text-align: center;
    color: var(--v-dark-blue);
    cursor: pointer;
}

.button-checkbox-list li:hover,
.button-checkbox-list li.checked{
    background: var(--v-blue-green);
    color: #fff;
}

.h1-label{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--v-dark-blue);
}

.h1-label > select{
    margin-top: 0.5rem;
}

.reveal{
    padding: 2rem;
    border-radius: 20px;
}

.pagination {
    padding-top: 4rem;
}

.pagination li.ellipsis:after,
.pagination li a{
    color: #738090;
    font-family: 'Onest', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    padding: 0;
     border-bottom: 2px solid transparent;
}

.pagination li:hover a,
.pagination li.current{
    background-color: transparent;
    color: var(--v-dark-blue);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-bottom: 2px solid var(--v-blue);
    padding: 0;
}

.pagination li{
    padding: 0 0 0.5rem 0;
    margin: 0 0.5rem;
}

.new-visit-step:not(.is-active),
.registration-step:not(.is-active){
    display: none;
}

.registration-step label{
    padding-bottom: 2rem
}

.registration-step .grid-container{
    padding: 0;
}

.section--register h1,
.section--register h2{
    margin-bottom: 2rem!important;
}

.section--register .button{
    padding: 0.5rem 1rem;
    padding-right: 2rem;
    font-size: 18px;
    font-weight: 500;
    background-image: url(img/button-arrow.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 15px;
}

.reveal {
    width: 70rem;
    max-width: 70rem;
}

.req-embed embed,
.pdf-embed embed{
    width: 100%;
    height: 35rem;
}

.registration-back{
    padding-left: 1.25rem;
    background-image: url(img/icon-chevron-left.svg);
    background-position: 4px center;
    background-repeat: no-repeat;
    background-size: 7px;
    color: #738090;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.section--register{
    padding-top: 6rem;
}

.new-visit-step-back{
    padding-left: 1.25rem;
    background-image: url(img/icon-chevron-left.svg);
    background-position: 4px center;
    background-repeat: no-repeat;
    background-size: 7px;
    color: #738090;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.new-visit-step-next{
    padding-right: 1.25rem;
    background-image: url(img/icon-chevron-right.svg);
    background-position: right 4px;
    background-repeat: no-repeat;
    background-size: 7px;
    color: #738090;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.new-visit-step-next.disabled:hover,
.new-visit-step-next.disabled:active{
   color: #738090;
}

.new-visit-step-next.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.button.has-plus{
    background-image: url(img/icon-plus.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 15px;
    padding-right: 2rem;
}

.new-visit-step{
    padding: 2rem;
}

.new-visit-step .grid-container{
    padding: 0;
}

.new-visit-step h1,
.new-visit-step h2{
    margin-bottom: 1rem;
}

.new-patient-form label {
    padding-bottom: 2rem;
}

.new-patient-form{
    padding: 2rem;
}

.new-patient-form .grid-container{
    padding: 0;
}

.new-patient-form h1,
.new-patient-form h2{
    margin-bottom: 1rem;
}

.new-visit-step .h1-label > select {
    margin-top: 1rem;
    display: block;
}

.disabled .button-radio,
.disabled .button-checkbox{
    pointer-events: none;
    opacity: 0.25;
}

.disabled{
    cursor: not-allowed;
}

.button.disabled{
    pointer-events: none;
    opacity: 0.25;
    position: relative;
}

.button.disabled:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: not-allowed;
    z-index: 10;
    pointer-events: all;
}

.title-with-button--start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
}


.title-with-button--start h1,
.title-with-button--start .button{
    margin: 0;
}

.form-error{
    background-image: url(img/icon-warning.svg);
    background-size: 25px;
    background-position: 4px center;
    background-repeat: no-repeat;
    border-radius: 4px;
    border: 1px solid var(--v-red);
    padding: 0.5rem;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    display: none!important;
    margin: 0;
    padding-left: 3rem;
    color: var(--v-dark-blue);
}

label.has-error .form-error{
    display: block!important;
}

.registration-steps-list{
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    position: relative;
}

.registration-steps-list:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: linear-gradient(90deg, #79B6D8 0%, #75BFAD 100%);
}

.registration-steps-list li{
    display: flex;
    align-items: center;
    color: #D0D8DF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 1rem;
    cursor: pointer;
}

.registration-steps-list li svg{
    margin-right: 1rem;
}

.registration-steps-list li.is-active{
    color: var(--v-blue);
}

.registration-steps-list li.is-active svg path{
    stroke: var(--v-blue)
}

.login-bg{
    min-height: 100vh;
}

.section--login .grid-container,
.section--login{
    padding: 0;
}

.login-form-container{
    padding: 8rem;
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-container > form{
    max-width: 50%;
}

.header-logo-right{
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.site-header.logged-out{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 0;
}

.terms-conditions-text{
    margin-bottom: 2rem;
}

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  color: #2E5368;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  pointer-events: none;
  /*cursor: pointer;*/
  /*height: 0;*/
  /*margin: 0;*/
  /*width: 0;*/
}

.custom-checkbox .checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #F1F1F1;
  border: 2px solid #D0D8DF;
}

.custom-checkbox input:focus-visible ~ .checkbox{
    outline: 1px solid #000;
}

select:focus-visible{
    outline: 1px solid #000;
}

.custom-checkbox input:checked ~ .checkbox {
  background-color: #79B6D8;
  border: 2px solid #79B6D8;
}

.custom-checkbox .checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkbox:after {
  display: block;
}

.custom-checkbox .checkbox:after {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.title-with-button h2{
    margin: 0;
}

.custom-checkbox-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.section--hcp-details .grid-container {
    max-width: 100rem;
}

.hcp-patient-stats{
    padding-bottom: 2rem;
    display: flex;
    justify-content: flex-start;
}

.hcp-patient-stats > div{
    border-right: 2px solid #D0D8DF;
    padding: 1rem 3rem 1rem 3rem;
}

.hcp-patient-stats > div:first-child{
    padding-left: 0;
}

.hcp-patient-stats > div:last-child{
    border-right: 0;
}

.hcp-patient-stats p{
    color: #2E5368;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 1rem;
}

.hcp-patient-stat{
    color: #60A1C6;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.activity-log{
    max-height: 20rem;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid #D0D8DF;
    background-color: var(--table-odd);
}

.activity-log table tr{
    background-color: transparent;
}

.no-activity{
    text-align: center;
    padding: 9rem 0;
    color: #738090;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.dashboard-alert{
    border-radius: 4px;
    border: 1px solid var(--v-red, #D97175);
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.dashboard-alert p{
    margin: 0 1rem;
}

.dashboard-alert .button-group{
    margin: 0;
}

.dashboard-alert .button-group .button{
    margin: 0 0.5rem;
}

.button.button-approve{
    border-radius: 4px;
    border: 1px solid var(--v-green);
    color: var(--v-dark-blue);
    background-color: transparent;
}

.button.button-deny{
    border-radius: 4px;
    border: 1px solid var(--v-red);
    color: var(--v-dark-blue);
    background-color: transparent;
}

.hcp-details-header:has(.dashboard-alert),
.patient-details-header:has(.dashboard-alert){
    padding-bottom: 2rem;
}

.section--admin-dashboard .hcp-patient-stats{
    justify-content: center;
}

.admin-dashboard-header{
    padding-bottom: 4rem;
}

.section--admin-dashboard{
    position: relative;
    overflow: hidden;
}

.heart-watermark{
    position: absolute;
    bottom: -4rem;
    right: -4rem;
}

.mail-link{
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--v-dark-blue);
    text-decoration: none;
}

.mail-link:hover,
.mail-link:focus{
    color: var(--v-dark-blue);
}

.mail-link img{
    margin-right: 1rem;
}

.get-help-popup-inner{
    text-align: center;
    padding: 2rem;
}

.get-help-popup-inner p{
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 2rem;
}

.get-help-popup-inner h2{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 2rem;
}

.form-progress-dots{
    display: flex;
    justify-content: flex-start;
    padding: 4rem 0 0 0;
    gap: 1rem;
    list-style: none;
    margin: 0;
}

.form-progress-dots li{
    background-color: #D0D8DF;
    width: 16px;
    height: 16px;
    border-radius: 100%;
}

.form-progress-dots li.is-active{
    background-color: #79B6D8;
}

.edit-details-button{
    display: flex;
    align-items: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    background-color: var(--v-blue);
    z-index: 10;
    cursor: pointer;
    border: 1px solid transparent;
}

.edit-details-button svg{
    max-width: 100%;
}

.edit-details-button.is-editing{
    background-color: #fff;
    border: 1px solid var(--v-blue);
}

.edit-details-button.is-editing svg path{
    stroke: var(--v-blue);
}

.svg-loader{
    display: none;
    width: 200px;
    margin: 0 auto;
}

.req-embed,
.pdf-embed{
    background: url('img/spinner.svg') center center no-repeat;
    background-size: 150px;
}

.req-embed embed,
.pdf-embed embed {
  width: 100%;
  background: transparent;
}

span.view-requisitions-wrapper{
    display: flex;
    justify-content: space-between;
}

.hcp-details select:disabled,
.patient-details select:disabled{
    background-color: transparent;
    background-image: none;
    border: none;
    padding: 0;
    opacity: 1;
    cursor: default;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.activity-log table{
    margin: 0;
}

.checkbox-list {
    list-style: none;
    margin: 1rem 0 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}


.checkbox-list > li{
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 16px;
}

.checkbox-list > li:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--v-dark-blue);
}

.checkbox-list > li.checked:after {
    background-image: url(img/checkmark.svg);
    background-size: 15px;
    background-position: center center;
    background-repeat: no-repeat;
}

.checkbox-list > li.required.checked{
    cursor: not-allowed;
}

.checkbox-list > li.required.checked:after{
  background-color: #ccc;  
}

ul.checkbox-list.list-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

ul.checkbox-list.list-columns li {
    width: 50%;
    padding: 0.25rem 2rem 1rem 2rem;
    font-size: 14px;
    word-wrap: break-word;
}

.dashboard-alert.is-valid img.icon-warning{
    display: none;
}

.dashboard-alert.is-valid{
    border: 1px solid var(--v-green);
}

.dashboard-alert.is-valid .button-group{
    display: none;
}

.dashboard-alert-denied,
.dashboard-alert-success{
    display: none;
}

.dashboard-alert.is-denied .dashboard-alert-text,
.dashboard-alert.is-valid .dashboard-alert-text{
    display: none;
}

.dashboard-alert.is-valid .dashboard-alert-success{
    display: block;
}

.dashboard-alert.is-denied .dashboard-alert-denied{
    display: block;
}


.checkbox-list > li:has(input[type="text"]) > span{
    display: flex;
    align-items: flex-start;
    padding-bottom: 0.5rem;
}

.checkbox-list > li input[type="text"] {
    width: 80px;
    padding: 0.25rem;
    margin: 0 0.25rem 0 0.5rem;
    /*transform: translateY(-5px);*/
}

.checkbox-list > li:has(input[type="text"]) > span:last-child{
    padding-bottom: 0;
}
.checkbox-list > li:has(input[type="text"]) > span:first-child:last-child input[type="text"]{
    /*transform: translateY(0px);*/
    width: 120px;
}

.checkbox-list > li:has(input[type="text"]){
    padding-top: 0.75rem;
}

.checkbox-list > li:has(input[type="text"]):after{
    top: 0.75rem;
}

td a{
    font-family: 'Onest', sans-serif;
    color: var(--v-dark-blue);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    text-decoration: none;
}


td a:hover,
td a:focus{
    color: var(--v-dark-blue);
    text-decoration: underline;
}

.reveal-overlay[style="display: block;"]:has(.view-requisition-popup){
    display: flex!important;
    align-items: center!important;
}

.reveal-overlay[style="display: block;"]:has(.view-requisition-popup) .reveal{
    top: 0!important;
}

.button.email-requisition{
    position: relative;
}

body.loading .email-requisition:after{
    content: "";
    background: url(img/spinner.svg) center center no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    right: -28px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.title-with-button--start + .dashboard-alert.email-success{
    margin-top: 0;
    margin-bottom: 2rem;
}

.login-form-container #message-bar{
    margin-top: 2rem;
}

.login.form-grey a + br + a{
    display: inline-block;
    margin-top: 0.5rem;
}

/* Dropdown menu */


.site-header .menu ul{
    display: none;
}

.site-header .menu ul {
    align-items: normal;
    background-color: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 0;
    left: -1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    transition: opacity .1slinear;
    visibility: hidden;
    width: 0;
    z-index: 2;
        left: 0;
    right: 0;
    background-color: var(--v-blue);
}

.site-header ul.menu li:has(ul){
    position: relative;
}

.site-header ul.menu li:has(ul):hover > ul{
    height: auto;
    min-width: 300px;
        height: auto;
    min-width: 200px;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    width: auto;
}

.site-header ul.menu li:has(ul) > ul li a{
    display: block;
    width: 100%;
    font-size: 15px;
}

.site-header ul.menu li:has(ul) > ul li a:hover{
    background-color: var(--v-dark-blue);
}

.site-header ul.menu li:has(ul) > a:after {
    position: absolute;
    top: 50%;
    right: 5px;
    left: auto;
    margin-top: -6px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-bottom-width: 0;
    border-color: var(--v-light-blue) transparent transparent;
    right: -1px;
    left: auto;
    margin-top: -3px;
    border-color: #fff transparent transparent;
}


.new-patient-form fieldset .has-tip{
    border-bottom: none;
    display: inline-block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.8;
    color: #0a0a0a;
}

.new-patient-form fieldset label{
    padding: 0;
}

span.sex{
    text-transform: uppercase;
}

#message-bar a{
    font-size: 16px;
}

.page-template-template-content main{
    padding-top: 4rem;
}

main .wp-block-separator{
    max-width: 56rem;
    margin: 3rem auto;
    padding: 0 1rem;
    border-top: 1px solid var(--v-blue);
}