html {
    box-sizing: border-box;
    --fontSans: "Roboto", sans-serif;
    --fontCondensed: "Roboto Condensed", sans-serif;
    --fontMono: monospace;
    --bodyColor: #333;
    --titleColor: #111;
    --green1: #25b7bc;
    --green2: #8dccbc;
    --blue1: #439ad5;
    --blue2: #5db1e4;
    --blue3: #6eb1cc;
    --darkBlue: #3b5471;
    --orange1: #f28a2c;
    --orange2: #cc9f75;
    --gold: #caab63;
    --boxShadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);

    font-size: 14px;
    line-height: normal;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/************************************************************/

body {
    font-family: var(--fontSans);
    color: var(--bodyColor);
    background-color: #eee;
    padding: 0;
    margin: 0;

}

a {
    text-decoration: none;
    color: inherit;
}


.whiteBox {
    background-color: #fff;
    box-shadow: var(--boxShadow);
    padding: 1em;
    position: relative;
}

.vh100 {
    min-height: 100vh;
}

.centeredForm {
    display: grid;
    align-items: center;
}

.centeredForm .whiteBox {
    margin: 0 auto;
}

.wrap {
    padding: 1em;
}

.wrapRows {
    display: grid;
    gap: 1em;
}

.flexRows {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.wrapCols {
    display: grid;
    grid-auto-flow: column;
    gap: 1em;
}

.scrollVertical {
    overflow-y: auto;
}

/* HEADER */

.header {
    padding: 1em;
    display: grid;
    grid-template-columns: min-content 1fr 1fr max-content;
    gap: 2em;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.headerLogo {
    display: block;
    font-size: 2em;
    line-height: 0;
    font-family: var(--fontCondensed);
    color: var(--green1);
    text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.05);
    font-weight: 900;
}

.headerNav {
    display: flex;
    gap: 1em;
}

.headerNavContainer {
    display: flex;
    align-items: center;
    gap: 1em;
}

.headerInfo {
    white-space: nowrap;
}

.headerNavItem.selected {
    font-weight: bold;
}

.headerPatientNav {
    position: relative;
}

.headerPatientNav .headerNav {
    border-top: 2px solid #25b7bc44;
}

.headerPatientNavTitle {
    position: absolute;
    bottom: 1.3em;
    font-size: 0.9em;
    width: 100%;
    /* border-top: 3px solid var(--green1); */
}

.headerSearch {
    max-width: 24em;
    justify-self: end;
    width: 100%;
}

/* SEARCH */

.searchContainer {
    /* padding: 1em;
    padding-bottom: 0; */
    position: relative;
}

/* .searchContainer:not(:focus-within) .searchResults {
    display: none;
} */

.searchResults:empty {
    display: none;
}

.searchResults {
    position: absolute;
    z-index: 10;
    background: #fff;
    padding: 1em;
    left: 0;
    right: 0;
    max-height: 80vh;
    overflow-y: scroll;
    margin: 0 auto;
    box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.1);
}

/* FORMS */

.formRows {
    display: grid;
    gap: 1em;
}

.formCols {
    display: grid;
    grid-auto-flow: column;
    gap: 2em;
}

.formLineLabel {
    font-family: var(--fontSans);
    text-transform: uppercase;
    font-size: 0.8em;
    line-height: 1em;
    margin-bottom: 0.1em;
    text-align: left;
}

.formPrivacy {
    font-size: 0.9em;
    line-height: normal;
    font-weight: 300;
    margin: 2em 0;
}

.defaultInput {
    border: 1px solid #ddd;
    font-family: inherit;
    display: block;
    width: 100%;
    font-size: 1rem;
    padding: 0.2em 0.5em;
}

textarea.defaultInput {
    resize: vertical;
}

.defaultInput[type='color'] {
    height: 2em;
    padding: 0.1em;
}

.defaultButton,
.outlineButton {
    appearance: none;
    border: 0;
    display: inline-block;
    font-family: var(--fontCondensed);
    font-size: 0.9rem;
    line-height: 1em;
    font-weight: 500;
    color: #fff;
    background: var(--color);
    padding: 0.75em 3em;
    border-radius: 20em;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1em 2em;
    text-align: center;
}


.defaultButton.disabled,
.outlineButton.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.outlineButton {
    color: var(--color);
    background: transparent;
    border: 1px solid;
    color: inherit;
}

.outlineButton:hover {
    background-color: var(--color);
    color: #fff;
}

.fillButton {
    background-color: var(--color);
}

.defaultButton {
    --color: var(--green1);
}

.redButton {
    --color: red;
}

.checkboxContainer {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 0.5em;
    align-items: center;
    font-size: 1rem;
    line-height: 1em;
}

.checkboxContainerText {
    font-size: 0.8em;
    line-height: normal;
}

input[type="checkbox"].defaultInput {
    display: inline;
    width: 1.25em;
    height: 1.25em;
    border: 0;
    outline: 0;
}

.positiveColor {
    background-color: limegreen;
}

.negativeColor {
    background-color: crimson;
}

/* SPECIAL FORMS */
.formLineInput.surfacesSelector,
.formLineInput.canalsSelector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
}

.surfaceItem {
    cursor: pointer;
}

.surfaceItem.selected {
    border: 2px solid #ff0;
    background-color: #ff01;
}

.surfaceItemImage {
    aspect-ratio: 2;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.canalsSelector .surfaceItemImage {
    aspect-ratio: 0.5;
}

.surfaceItemInput {
    display: none;
}


.treatmentsSelector tr.selected {
    font-weight: bold;
}

.treatmentsSelector td {
    text-overflow: ellipsis;
    overflow: hidden;
}

.treatmentsSelector {
    /* white-space: nowrap;
    table-layout: fixed; */
    width: 100%;
}

/* OTHER */

.widgetTitle {
    font-family: var(--fontCondensed);
    font-size: 1.5em;
    line-height: 1em;
    font-weight: bold;
}

.widgetContent {
    margin-top: 1em;
}

.flexVertical {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.flexHorizontal {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.normalMargin {
    margin: 1em auto;
}

.boxFloatingButtons {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    justify-items: end;
}

.floatingButtonCircular {
    border-radius: 50%;
    width: 1.5em;
    aspect-ratio: 1;
    background-color: #eee;
    cursor: pointer;
    display: grid;
    align-items: center;
    text-align: center;
    font-weight: bold;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}

.floatingButtonCircular.syncSoftdent_Button {
    background-image: url(../../images/icons/get.php?i=sync&c=000);
}

.floatingButtonCircular.syncZohobooks_Button {
    background-image: url(../../images/icons/get.php?i=sync_zoho&c=408dfb);
}

.syncing {
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* DASHBOARD */


.defaultTable a {
    font-weight: bold;
    text-decoration: underline;
    color: var(--green1);
}

.defaultTable {
    width: 100%;
    border-collapse: collapse;
    margin: 1em auto;
}

.defaultTable th {
    text-align: left;
}

.defaultTable tr {
    border-bottom: 1px solid #0001;
}

.defaultTable tr:hover {
    background-color: #eee;
}

.defaultTable tr:first-child {
    position: sticky;
    top: 0;
    background: #fff;
}

.defaultTable th,
.defaultTable td {
    padding: 0.5em;
}

/* APPOINTMENT ITEM */

.nowRow {
    border-top: 2px dashed magenta !important;
}

.appointmentItem {
    border: 1px solid #ddd;
    background-color: #eee;
    padding: 1em;
    border-radius: 1em;
}

.appointmentItem:hover {
    cursor: pointer;
}

.appointmentId {
    font-family: monospace;
    font-size: 0.9em;
    opacity: 0.66;
}

.appointmentStatus_planned {
    border: 1px solid #ddd;
    background-color: #eee;
}

.appointmentStatus_in_waiting_room {
    border: 1px solid #aaa;
    background-color: #ddd;
}

.appointmentStatus_cancelled_by_patient {
    border: 1px dashed red;
    background-color: #f001;
}

.appointmentStatus_in_treatment_room {
    border: 1px dashed yellow;
    background-color: #ff01;
}

.appointmentStatus_ready_to_checkout {
    border: 1px dashed green;
    background-color: #0f01;
}

.appointmentStatus_completed {
    border: 1px dashed green;
    background-color: #0f01;
}

.appointmentStatus_eliminated {
    opacity: 0.2;
}

.appointmentStatus_cancelled_by_office {
    opacity: 0.2;
    background-color: #f001;
}

.appointmentStatus_missed {
    border: 1px solid red;
    color: red;
    background-color: #f001;
}

.appointmentStatus_cancelled_by_patient {
    border: 1px solid red;
    color: red;
    background-color: #f001;
}


/* PATIENT ITEM */

.patientItem {
    border: 1px solid #439ad5;
    background-color: #6eb1cc30;
    padding: 1em;
    border-radius: 1em;
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
}

.patientItem:hover {
    cursor: pointer;
    background-color: #439ad55c;
}

.patientId {
    font-family: monospace;
    font-size: 0.9em;
    opacity: 0.66;
}

.patientItemName {
    font-weight: bold;
}

.patientActions {
    display: none;
    gap: 0.5em;
    justify-content: end;
}

.patientItem:hover .patientActions {
    display: flex;
}

.personIcon,
.toothIcon,
.billingIcon {
    background-position: center;
    width: 2em;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
}

.personIcon {
    background-image: url(../../images/icons/get.php?i=person&c=439ad5);
}

.toothIcon {
    background-image: url(../../images/icons/get.php?i=tooth&c=439ad5);
}

.billingIcon {
    background-image: url(../../images/icons/get.php?i=billing&c=439ad5);
}

.smallButtons {
    margin-top: 1em;
    display: flex;
    gap: 0.5em;
    justify-content: end;
}

.smallButton {
    border: 1px solid;
    padding: 0.5em 1em;
    font-size: 0.9em;
}

/* ROOM ITEM */

.roomItem {
    border: 1px dashed #ccc;
    background-color: #f8f8f8;
    padding: 1em;
}

.roomName {
    font-weight: 300;
    font-size: 1.2em;
}

/* TASK ITEM */

.taskItem {
    background-color: #0001;
    padding: 1em;
    /* border: 2px dotted #eee; */
}

.taskItem.statusCompleted {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
}

.taskItem:not([data-status='COMPLETED']),
.taskRow:not([data-status='COMPLETED']) {
    cursor: pointer;
}


.taskItem[data-status='COMPLETED'],
.taskRow[data-status='COMPLETED'] {
    background: rgba(0, 128, 0, 0.1);

}

.taskItem[data-status='CANCELED'],
.taskRow[data-status='CANCELED'] {
    background: rgba(255, 0, 0, 0.1);
}

.taskItem[data-status='PENDING'],
.taskRow[data-status='PENDING'] {
    background: rgba(255, 166, 0, 0.1);
}

.taskItem[data-status='POSTPONED'],
.taskRow[data-status='POSTPONED'] {
    background: rgba(0, 0, 255, 0.1);
}

.taskTitle {
    font-weight: bold;
}

.taskDate {
    font-size: 0.8em;
    line-height: normal;
    opacity: 0.8;
    /* font-family: var(--fontMono); */
}

.taskItem a {
    font-weight: bold;
    text-decoration: underline;
}


/* TREATMENT ITEM */

.treatmentItem {
    padding: 1em;
    border: 1px solid var(--green1);
    background-color: #25b7bc11;
    border-style: solid;
    cursor: pointer;
}

.treatmentItem:hover {
    background-color: var(--green1);
}


.patientRecordItem {
    padding: 1em;
    border: 1px solid #ddd;
    background-color: #eee;
    border-style: solid;
    cursor: pointer;
}

.patientRecordItem:hover {
    background-color: #eee;
}

.privateTreatment {
    background-color: #25b7bc11;
    border: 1px solid var(--green1);
}

.insuranceTreatment {
    background-color: #8dccbc88;
    border: 1px solid var(--green2);
}

.patientRecordItem.plan1 {
    outline: 2px solid red;
}

.patientRecordItem.plan2 {
    outline: 2px solid yellow;
}


tr.plan1 td {
    outline: 1px solid red;
}

tr.plan2 td {
    outline: 1px solid yellow;
}

.recordsFiltersTag {
    background-color: #eee;
    display: inline-block;
    border-radius: 3em;
    padding: 0.2em 1em;
    font-size: 0.9em;
    line-height: normal;
    cursor: pointer;
}

.filterTagItem {
    font-family: var(--fontCondensed);
    background: #eee;
    display: inline-block;
    border-radius: 2em;
    padding: 0.2em 0.4em;
    cursor: pointer;
}

.filterTagItem[data-status='COMPLETED'] {
    background: rgba(0, 128, 0, 0.1);
}

.filterTagItem[data-status='CANCELED'] {
    background: rgba(255, 0, 0, 0.1);
}

.filterTagItem[data-status='PENDING'] {
    background: rgba(255, 166, 0, 0.1);
}

.filterTagItem[data-status='POSTPONED'] {
    background: rgba(0, 0, 255, 0.1);
}

/* TEETH MAPPING */


.teethMapping {
    background-color: #ddd;
}

.teethMapping.planMode {
    background-color: #f001;
}


.quadrants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 0.5em; */
}

.filters {
    display: grid;
    grid-auto-flow: column;
    gap: 1em;
    margin: 1em auto;
}

.quadrants div[data-quadrant] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 1px solid #eee;
    padding: 1em;
}

.quadrants div[data-quadrant='3'] {
    grid-column: 2;
    grid-row: 2;
}

.quadrants div[data-quadrant='4'] {
    grid-column: 1;
    grid-row: 2;
}

div[data-tooth] {
    text-align: center;
}


.tooth {
    position: relative;
    max-width: 80px;
    display: grid;
}

.tooth.selected {
    background-color: #00f1;
}


.upperQuadrant .tooth {
    grid-template-rows: 1fr 8em 2em min-content;
}

.lowerQuadrant .tooth {
    grid-template-rows: min-content 2em 8em 1fr;
}

.toothDesign {
    position: relative;
    /* overflow: hidden; */
}

.transformScale,
.transformRotation,
.toothQuadrantMirror {
    height: 100%;
}

.transformRotation {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.toothSurfaces {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.tooth svg {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

svg.surfaceSVG {
    height: 100%;
    width: 100%;
    position: absolute;
}

.toothDesign svg {
    /* max-height: 8em; */
}

.tooth svg path {
    /* fill: #fff; */
}

.tooth svg.surfaceSVG path {
    fill: none;
}

.tooth svg.fillWhite path {
    fill: #fff;
}

.tooth svg.fillBlack path {
    fill: #000;
}

.tooth svg.fillGray path {
    fill: #999;
}

.treatmentLabel {
    font-family: var(--fontCondensed);
    font-size: min(1vw, 1rem);
    position: relative;
    z-index: 1;
}

.treatmentLabel.isOlderThanTwoYears {
    border: 2px dotted #f0f;
}

.treatmentLabel.backgroundGray {
    background-color: #bbb;
}

svg[data-code='IMPLANT'] path {
    fill: #ccc;
}

svg[data-code^='PINANCHORAGE'] path {
    fill: #ccc;
}

.tooth svg.treatmentOlderThan2Years path {
    stroke: #f0f;
    stroke-width: 8px;
    stroke-dasharray: 2px 6px;
}

.toothDesignSymbol {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: grid;
    align-items: center;
    font-size: 2em;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.toothDesignIcon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: grid;
    align-items: center;
    font-size: 2em;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* AFTER THE OTHER COLORS BECAUSE THE PLAN SHOULD OVERRIDE THE COLORS WITH RED */

.tooth svg.fillRed path {
    fill: #f00;
}

.tooth svg.strokeRed path {
    stroke: #f00;
}

.tooth svg.strokeThickGray path {
    stroke: #999;
    stroke-width: 10px;
}

.tooth svg.hide {
    display: none;
}

[data-quadrant='1'] .toothQuadrantMirror,
[data-quadrant='1'] .surfaceItemImage {
    transform: rotateX(180deg) rotateY(180deg);
}

[data-quadrant='2'] .toothQuadrantMirror,
[data-quadrant='2'] .surfaceItemImage {
    transform: rotateX(180deg);
}

[data-quadrant='3'] .toothQuadrantMirror,
[data-quadrant='3'] .surfaceItemImage {
    /* transform: rotateY(180deg); */
}

[data-quadrant='4'] .toothQuadrantMirror,
[data-quadrant='4'] .surfaceItemImage {
    transform: rotateY(180deg);
}

.upperQuadrant svg {
    top: 0;
}

.lowerQuadrant svg {
    bottom: 0;
}

.toothTreatments {
    display: grid;
    gap: 1px;
    padding: 0.1em;
}

.upperQuadrant .toothTreatments {
    align-self: end;
}

.lowerQuadrant .toothTreatments {
    align-self: start;
}

[data-quadrant='3'] .toothTreatments,
[data-quadrant='4'] .toothTreatments {
    grid-row: 4;
}

[data-quadrant='3'] .toothDesign,
[data-quadrant='4'] .toothDesign {
    grid-row: 3;
}

[data-quadrant='3'] .toothSurfaces,
[data-quadrant='4'] .toothSurfaces {
    grid-row: 2;
}

[data-quadrant='3'] .toothContent,
[data-quadrant='4'] .toothContent {
    grid-row: 1;
}


.toothMilk {
    transform: scale(0.75);
}

[data-code*="ROOT"][data-style="SCHEMATIC"] {
    display: none;
}

[data-code*="PINANCHORAGE"][data-style="SCHEMATIC"] {
    display: none;
}

.toothContent {
    position: relative;
}

.toothStatus {
    color: #f0f;
}

.toothRotate {
    transform: rotate(-10deg);
}

.upperJaw,
.lowerJaw,
.treatmentsWithoutTooth {
    display: flex;
    justify-content: start;
    align-content: center;
    gap: 0.5em;
}

.upperJaw.selected,
.lowerJaw.selected {
    background-color: #00f1;
}

.inlineTreatmentsLabels {
    text-align: right;
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    justify-content: end;
}

.inlineTreatmentsLabels:empty {
    display: none;
}

.recordsTable tbody:first-child {
    position: sticky;
    top: 0;
    background-color: #fff;
    text-align: left;
}

.recordsTable td,
.recordsTable th {
    padding: 0.5em;
}

.recordsTableDate {
    vertical-align: top;
    white-space: nowrap;
}

.recordsTableDate div {
    position: sticky;
    top: 4em;
}

/* DOCUMENTS */
.documentItem {
    border-bottom: 1px dashed #ccc;
    padding: 0.5em;
}

/* BILLING */

.pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.invoicesTable {
    width: 100%;
    border-collapse: collapse;
    margin: 1em auto;
}

.invoicesTable th {
    text-align: left;
}

.invoicesTable tr {
    border-bottom: 1px solid #eee;
}

.invoicesTable tr:first-child {
    position: sticky;
    top: 0;
    background: #fff;
}

.invoiceItem {
    padding: 1em;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.invoiceItem.selected {
    background-color: #f2f9ff;
}

.invoiceCustomer a,
.invoicesTable a {
    font-weight: bold;
    text-decoration: underline;
    color: var(--green1);
}

.invoiceRow {
    cursor: pointer;
}

.invoiceRow:hover,
.invoiceItem:hover {
    background-color: #eee;
}

.invoiceLineItem {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 1em;
    border-bottom: 1px solid #eee;
    line-height: 2em;
}

.invoiceStatusPAID .invoiceStatus {
    color: green;
}

.invoiceStatusPARTIALLY_PAID .invoiceStatus {
    color: orange;
}

.invoiceStatusVOID .invoiceStatus {
    color: red;
}

.invoiceStatusDRAFT .invoiceStatus {
    color: blue;
}

.paymentStatusVOID {
    opacity: 0.5;
    background-color: #f001;
}


.bankFeedItem {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 0.5em;
    text-align: left;
    align-items: center;
    border: 1px solid #0001;
    cursor: pointer;
}

.paymentAllocationRow{
    background-color: #f8f8f8;
}
.paymentAllocationRow td:first-child{
    padding-left: 2em;
}

/* PATIENT */

.patientImage img {
    max-width: 12em;
}

/* MISC */

.loading {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    gap: 0.3rem;
}

.dot {
    animation: bounce 1s infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}