:root {
  --color-dark: #3d5a80;
  --color-light: #72c3c9;
  --color-accent: #f2a744;
  --color-grey: #87898b;
  --background-color-readonly: #e9ecef;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.vcd-container {
  max-width: 1300px;
}

.login-image {
  max-width: 350px;
  height: 365px;
  background-image: url('/images/VCD-Elderly-Woman-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.logo{
  width: 200px;
}

.copyright {
  font-size: 12px;
  color: var(--color-dark);
}

.copyright > strong::before { content: " Vision Care Direct. All Rights Reserved. "; font-weight: normal; }
.copyright > strong::after { content: " VCD Customer Service"; white-space: nowrap; }

.login-title {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  font-size: 32px;
  color: var(--color-light);
  position: relative;
  margin-bottom: 20px;
  line-height: 44px;
  font-weight: 700;
}

.login-title::before { content: "THERE\2019S MORE TO YOU THAN WHAT MEETS THE EYE"; }

@media (max-width: 992px) {
  .login-title {
    font-size: 24px;
    line-height: 30px;
  }
}

.panel-container:has(.small-panel) {
  max-width: 510px;
}

.panel-container {
  min-width: 300px;
  position: relative;
}

.panel-container.internal {
  /*min-width: 450px;*/
  max-width: 650px;
}

.panel-heading {
  font-size: 1.2rem;
  color: var(--color-dark);
  font-weight: normal;
  margin-bottom: 20px;
  width: 100%;
  float: left;
}

.panel-sub-heading {
  font-size: 16px;
  color: var(--color-dark);
  font-weight: normal;
  margin-bottom: 1rem;
  width: 100%;
}

.panel-heading > .panel-sub-heading, .panel-heading > .heading-info { margin-bottom: 0; }

.panel-heading + .panel-sub-heading, .panel-heading + .heading-info {
    margin-top: -20px;
    margin-bottom: 20px;
    color: var(--color-dark);
}

.panel-body {
  width: 100%;
  float: left;
  position: relative;
}

.visioncaredirect-address {
  position: absolute;
  bottom: 0px;
  left: 0px;
  text-align: center;
  margin: 0px;
  padding: 15px;
  font-size: 13px;
  line-height: 20px;
  background: #f8fafb;
  color: var(--color-dark);
  width: 100%;
}

.btn {
  padding: 12px;
  box-shadow: none;
  font-size: 15px;
  border-radius: 10px !important;
  width: 100%;
  float: left;
  text-align: center;
  background: var(--color-light);
  color: #fff;
  border: none;
  text-transform: uppercase;
}

.btn:hover, .btn:focus, .btn:active, .btn:active:focus {
  background: var(--color-dark);
  color: #fff;
}

.btn:active:hover {
  background: #2d4a70;
  color: #fff;
}

.btn:disabled {
  background: var(--color-light);
  opacity: .4;
}

.other-options-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.other-options-link a, a.action {
  color: var(--color-light);
  text-decoration: none;
}

.other-options-link a:hover, a.action:hover {
  color: var(--color-dark);
}

.text-orange {
  color: #f2a744;
}

.social-media-label {
  float: left;
  width: 100%;
  border-top: 2px solid #ccc;
  text-align: center;
  margin: 10px 0 0;
}

  .social-media-label span {
    width: 55px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    display: inline-block;
    position: relative;
    top: -22px;
    z-index: 1;
    font-size: 16px;
    color: var(--color-dark);
    font-weight: normal;
  }

.social-icon {
  display: flex;
  flex-direction: column;
  float: left;
  width: 100%;
  gap: 10px;
}

.social-icon form {
  display: grid;
}

.social-icon button {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgb(0 0 0 / 27%);
  align-items: center;
  justify-content: center;
  display: flex;
  height: 50px;
  position: relative;
  font-weight: normal;
}

.social-icon button:active { box-shadow: none; margin-top: 1px; margin-bottom: -1px; }

.social-icon button img {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  position: absolute;
  z-index: 1;
  left: 10px;
}

.btn-facebook-login {
  color: #1877f2;
  border-color: #1877f2;
  border-width: 2px;
  background-color: #fff;
}

.btn-google-login {
  color: #000;
  border-color: #747775;
  background-color: #fff;
}

.btn-apple-login {
  color: #000;
  border-color: #000;
  background-color: #fff;
}


.fa.input-icon {
    float: right;
    position: relative;
    margin-top: -2em;
    margin-right: .6em;
    padding: 1px 4px;
    background: none !important;
    border: none !important;
    border-radius: 5px;
    cursor: pointer;
    color: #000;
}

.fa.input-icon-pwd { display: none; }

.has-input-icon
{
    padding-right: 1.8em !important;
    position: relative;
}

.w-40{
    width:40%;
}
.w-60{
    width:60%
}
.divider-left{
    border-left:2px solid #000; 
}

.padding-vertical{
    padding: 50px 0px;
}
.padding-horizontal{
    padding:0 30px;
}
.padding {
    padding: 50px 30px;
}
.text-primary-light {
    color: var(--color-light);
}
.text-left{
    text-align:left;    
}
.info-text {
    display: block;
    font-size: 13px;
}

.input-label {
    display: inline-block;
    width: 100%;
    min-height: calc(1.5em + 1rem + 2px);
    font-size: 1.25rem;
    padding: .5rem 1rem;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    white-space: nowrap;
    overflow-x: clip;
}

input[readonly], select[readonly], .input-label { background-color: var(--background-color-readonly) !important; }

.password-rules ul { list-style: none; padding-left: 0.5em; }
.password-rules i.fa { width: 1em; }
.password-rules i.fa-times { color: rgba(var(--bs-danger-rgb)); }
.password-rules i.fa-check { color: var(--color-light); }
.password-rules li span:not(:empty)::before { content: ': '; font-weight: normal; }
.password-rules li span { font-weight: 600; }

.hidden { visibility: hidden; }
.hidden-field { visibility: hidden; height: 1px; display: block; }

label { margin-bottom: .3em; color: var(--color-dark); }
.form-group > label:first-child { font-size: .9em; }
.vis-b { display: block; }
.hid { display: none; }

/*.client-name { font-weight: 550; }*/

.div-user
{
	/* border: solid 1px #ddd; */
	background-color: #fafafa;
	border-radius: 5px;
	padding: 3px 7px 5px;
	position: relative;
    overflow-x: clip;
}

.actions
{
    text-align: right;
    font-size: .9rem;
}

.div-user .actions
{
	position: absolute;
	right: 7px;
	top: 3px;
    margin: 0;
    padding: 0;
	list-style: none;
}

.div-user .actions li
{
	margin-bottom: .2em;
}

.div-user .big-icon
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 2.7em;
    border-radius: 50%;
    padding: 0.25em 0.35em;
    color: #0005;
}

.badge.user-role
{
    background-color: var(--color-dark);
    margin-left: .6em;
    padding: .37em 1em .45em;
    border-radius: 1em;
}

.user-fullname
{
    font-weight: bold;
    white-space: nowrap;
    overflow-x: clip;
}
.div-user .user-fullname { width: calc(100% - 4.5em); }

.user-name { overflow-x: clip; }
.div-user .user-name { width: calc(100% - 4.5em); }

.user-email { color: #888; font-size: .86rem; white-space: nowrap; }

.div-ssi
{
	background-color: #fafafa;
	border-radius: 5px;
	padding: .8em;
	display: flex;
    overflow: clip;
}

.div-ssi > div:nth-child(1) { width: 2em; margin-right: 1.2em; text-align: center; align-content: start; }
.div-ssi > div:nth-child(1) img { height: 36px; margin-top: 5px; }

.div-ssi > div > div:nth-child(1) { font-weight: bold; }
.div-ssi > div > div:nth-child(3) { width: 12em; }

.div-ssi.unlink > div > div:nth-child(3) { margin-top: 5px; }

.logo-link
{
    position: absolute;
    width: 200px;
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
}



.modal-dialog { display: flex; align-items: center; min-height: calc(100vh - 1rem); margin: auto; max-width: 94%; }
.modal-dialog .modal-header { padding-top: .6rem; padding-bottom: .6rem; }
.modal-dialog .modal-body { padding-top: .6rem; }
.modal-dialog .modal-footer { border-top: none; }
.modal.dialog-back,
.modal.blocker { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #0004; transition: opacity .5s linear; }
.modal.blocker.transparent { opacity: 0; }
.modal.blocker .spinner-border { color: var(--color-dark) !important; }


/*  Settings page */
.page-settings .row { overflow-x: clip; }

.page-settings .row > div.col-12 {
    border-bottom: 1px solid #ebebeb;
    margin: 0 calc(var(--bs-gutter-x) * .5);
    padding: .4rem 0;
    width: calc(100% - var(--bs-gutter-x));
}

.page-settings .row > div:nth-child(2) {
    border-top: 1px solid #ebebeb;
}

.page-settings .row > div.col-12 a {
    display: grid;
    grid-template-columns: minmax(3.4em, .4fr) 1.5fr auto;
    padding: .4rem 0;
}

.page-settings .row > div.col-12.phone a {
    grid-template-columns: minmax(7.5em, .4fr) 1.5fr auto;
}

.page-settings .row > div.col-12.no-value > a > div:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
}

.page-settings .row > div.col-12:not(.no-value) > a > div:not(:last-child) { color: var(--bs-body-color); }
.page-settings .row > div.col-12:not(.no-value) > a > div:nth-child(2) { overflow-x: hidden; white-space: nowrap; }

.page-settings .fa-exclamation-circle { margin-right: .2em; color: rgba(var(--bs-danger-rgb)); }
.page-settings div.no-value .fa-exclamation-circle { margin-left: .4em; }




/*  UI V2 */
.ui-v2 .logo { display: none !important; }
.ui-v2 .logo-link
{
    position: initial;
    transform: none;
    width: 180px;
    height: 72px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    background-image: url("/images/VCD-HorLogo-Web.svg");
    background-size: contain;
}

.ui-v2 .vcd-container > .d-flex { column-gap: 12px; }

.ui-v2 .panel-heading {
    text-transform: uppercase;
    font-weight: 600;
    margin: 3em 0 0;
}

.ui-v2 .panel-heading span:not(.client-name) {
    text-transform: initial;
    font-weight: initial;
}

/*.ui-v2 .panel-heading .client-name {
    text-transform: initial;
    font-weight: initial;
}*/

.ui-v2 .panel-heading.other-options-link {
    display: initial;
}

.ui-v2 .heading-info {
    font-size: .8em;
    margin: 0;
    color: inherit;
}

.ui-v2 .panel-body {
    margin-top: 2.2em;
}


.ui-v2 .form-control::placeholder {
    color: var(--color-grey);
    font-size: .8em;
}

.ui-v2 .form-group, .ui-v2 .server-error {
    margin-bottom: 1.8em !important;
}

.ui-v2 .form-group:not(form *) {
  margin-bottom: 1.2em !important;
}

.ui-v2 .server-error:empty {
    display: none;
}


.ui-v2 input:not([type]), .ui-v2 input[type=text], .ui-v2 input[type=password], .ui-v2 input[type=date], .ui-v2 select,
.ui-v2 input[readonly], .ui-v2 select[readonly], .ui-v2 .input-label {
    font-size: 1.2em;
    padding: 0;
    min-height: unset;
    border-style: none;
    border-bottom: solid 1px #d0d0d0;
    border-radius: 0;
}

.ui-v2 input[readonly], .ui-v2 input[disabled], .ui-v2 select[readonly], .ui-v2 select[disabled], .ui-v2 .input-label {
    background-color: initial !important;
    cursor: default;
}

.ui-v2 input[readonly]:hover, .ui-v2 select[readonly]:hover, .ui-v2 .input-label:hover {
    color: var(--color-grey);
}


.ui-v2 :focus, .ui-v2 :focus-visible {
  outline: none;
  box-shadow: none;
}

.ui-v2 form :focus, .ui-v2 form :focus-visible {
  border-bottom-color: var(--color-dark);
}

.ui-v2 form input[type=checkbox]:focus-visible, .ui-v2 form input[type=radio]:focus-visible {
  border-color: var(--color-dark);
}


.ui-v2 a {
  color: var(--color-light);
  text-decoration: none;
}

.ui-v2 a:hover, .ui-v2 a:focus {
  color: var(--color-dark);
}

.ui-v2 a:not(.btn):focus-visible {
  --text-decoration: underline;
  outline: auto;
}

.ui-v2 a.disabled {
    cursor: not-allowed;
    color: var(--color-grey);
}


.ui-v2 div.d-grid {
    padding-top: 1.5em;
    margin-bottom: 1.2em !important;
    justify-content: center;
}

.ui-v2 .other-options-link {
    justify-content: center;
    column-gap: 2.5em;
}

.ui-v2 .panel-sub-heading {
    font-size: .8em;
    margin: -2.2rem 0 2.2rem;
    color: inherit;
}

.ui-v2 .panel-heading + .panel-sub-heading { margin: 0; }


.ui-v2 .btn {
    width: fit-content;
    padding: 12px 60px;
    font-weight: 600;
    color: #fff !important;
    background-color: var(--color-accent) !important;
    border-radius: 3px !important;
}

.ui-v2 .btn:hover, .ui-v2 .btn:focus {
    background: var(--color-dark) !important;
}

.ui-v2 .password-rules.hidden {
    visibility: visible;
    opacity: .1;
}

.ui-v2 .password-rules {
    font-size: 0.94em;
    line-height: 1.4;
}


.ui-v2 .social-media-label {
    margin: 25px 0 -10px;
}

.ui-v2 .modal-footer {
    justify-content: center;
}

.ui-v2 .fa.input-icon {
    margin-top: -1.5em;
    margin-right: .3em;
}

.ui-v2 div.mt-3:has(>.div-user) {
    margin-top: 1.5em !important;
}

.ui-v2 div.mt-3:first-of-type:has(>.div-user) {
    margin-top: 0 !important;
}

.ui-v2 .div-user .actions {
    font-size: 1em;
}


.ssi-button {
    all: unset;
    display: inline-flex;
    align-items: stretch;
    font-family: var(--bs-body-font-family);
    width: 11.4em;
    border: solid 1px #0000;
    background-color: #000;
    cursor: pointer;
}

.ssi-button:focus-visible { outline: auto; }

.ssi-button > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.2em;
    height: 2.2em;
    background-color: #fff;
}

.ssi-button > div:first-child img {
    width: 1.4em;
    height: 1.4em;
}

.ssi-button > div:last-child {
    flex-grow: 9;
    padding: .5em .7em 0;
    color: #fff;
    font-size: .8em;
    font-weight: 600;
    text-align: left;
}

.ssi-button-Google { background-color: #4285f4; }
.ssi-button-Facebook { background-color: #1b74e4; }


@media (max-width: 750px)
{
  .div-user .big-icon
  {
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
}



/*  UI V2 - Montserrat */
.panel-container.ui-v2.montserrat {
    font-family: Montserrat, var(--bs-body-font-family);
}

.ui-v2.montserrat .panel-heading {
	font-weight: 700;
}

.ui-v2.montserrat .heading-info,
.ui-v2.montserrat .panel-sub-heading {
	font-size: .84em;
}

.ui-v2.montserrat .form-control::placeholder {
	font-size: .76em;
}

.ui-v2.montserrat input:not([type]), .ui-v2.montserrat input[type=text], .ui-v2.montserrat input[type=password], .ui-v2.montserrat input[type=date], .ui-v2.montserrat select,
.ui-v2.montserrat input[readonly], .ui-v2.montserrat select[readonly], .ui-v2.montserrat .input-label {
    font-size: 1.1em;
    line-height: 1.2em;
    padding-top: .37em;
}

.ui-v2.montserrat a {
    font-size: .9em;
}

.ui-v2.montserrat .panel-heading a {
	font-size: 1em;
}

.ui-v2.montserrat .btn {
    font-size: .85em;
}


/* DENOVA */
body.denova .login-title::before { content: "DENTAL CARE, REIMAGINED"; }
body.denova .login-image { background-image: url('/images/SmilingBoy.png'); }
body.denova .ui-v2 .logo-link { background-image: url("/images/logo-denova.png"); }
body.denova .copyright > strong::before { content: " Denova Dental. All Rights Reserved. "; font-weight: normal; }
body.denova .copyright > strong::after { content: " Denova Dental Customer Service"; white-space: nowrap; }