@font-face {
    font-family: 'Mark Pro';
    src: url(/assets/fonts/Mark-Pro.ttf);
    font-weight: normal;
}
@font-face {
    font-family: 'Mark Pro';
    src: url(/assets/fonts/Mark-Pro-Bold.ttf);
    font-weight: bold;
}

:root {
    /*--gray: rgb(245, 245, 245);*/
    /*--gray: rgb(167, 169, 172);*/
    /*--gray-light: rgba(252, 252, 252);*/
    /*--gray-dark: rgb(131, 131, 131);*/
    /*--green: rgb(40, 191, 158);*/
    /*--green-shadow: rgba(40, 191, 158, 0.25);*/
    /*--red: rgb(244, 132, 128);*/

    --black: rgb(0, 0, 0);
    --gray: rgb(167, 169, 172);
    --gray-light: rgba(252, 252, 252);
    --gray-dark: rgb(131, 131, 131);
    --green: rgb(102, 115, 124);
    --green-shadow: rgba(102, 115, 124, 0.25);
    --red: rgb(244, 132, 128);
}

body {
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'Mark Pro', sans-serif;
}

/** Helpers */
.icon-sm {
    font-size: 14px;
}

/** Shine links */
a.link-shine-green,
a.link-shine-red
{
    text-decoration: none;
}
a.link-shine-green::after,
a.link-shine-red::after
{
    opacity: 1;
    transform: scale(0);
    transform-origin: center;
}

a.link-shine-green,
a.link-shine-red
{
    display: inline-block;
    position: relative;
    padding: 0.2em 0;
}
a.link-shine-green::after,
a.link-shine-red::after
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}
a.link-shine-green:hover::after,
a.link-shine-green:focus::after,
a.link-shine-red:hover::after,
a.link-shine-red:focus::after
{
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);
}
a.link-shine-green:hover::after,
a.link-shine-green:focus::after,
a.link-shine-red:hover::after,
a.link-shine-red:focus::after
{
    transform: scale(1);
}


/** Shine colors */
.bg-shine-gray-light {
    background-color: var(--gray-light);
}
.bg-shine-gray {
    background-color: var(--gray);
}
.bg-shine-gray-dark {
    background-color: var(--gray-dark);
}
.bg-shine-green {
    background-color: var(--green)!important;
}
.bg-shine-red,
td.bg-shine-red
{
    background-color: var(--red);
}


.text-shine-gray-light {
    color: var(--gray-light);
}

.text-shine-gray
{
    color: var(--gray);
}
.text-shine-gray-dark {
    color: var(--gray-dark);
}


.text-shine-green,
a.link-shine-green
{
    color: var(--black);
    font-weight: bold;
}
a.link-shine-green:hover,
a.link-shine-green:active
{
    color: var(--black);
}
a.link-shine-green::after {
    background-color: var(--black);
}

.text-shine-red,
a.link-shine-red {
    color: var(--red);
}
a.link-shine-red:hover,
a.link-shine-red:active
{
    color: var(--red);
}
a.link-shine-red::after {
    background-color: var(--red);
}


/** Shine background status colors */
.bg-shine.first_check {
    background-color: #E8384F;
}
.bg-shine.diagnostic_completed {
    background-color: #E362E3;
}
.bg-shine.planning {
    background-color: #AA62E3;
}
.bg-shine.diagnostic {
    background-color: #fddb00;
}
.bg-shine.confirmed_for_offer {
    background-color: #FD9A00;
}
.bg-shine.send_to_therapist {
    background-color: #FD9A00;
}
.bg-shine.production_confirmed {
    background-color: #37C5AB;
}
.bg-shine.processing {
    background-color: #20AAEA;
}
.bg-shine.completed {
    background-color: transparent;
}
.bg-shine.archived {
    background-color: #424242;
}

tr.archived {
    text-decoration: line-through;
}


/** Shine button */
.btn-shine-primary {
    background-color: var(--black);
    color: var(--bs-white);
    border-color: var(--bs-white);
    font-weight: bold;
    transition-duration: 0.3s;
}
.btn-shine-primary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--green-shadow);
}
.btn:hover {
    color: var(--green);
    background-color: var(--bs-white);
    border-color: var(--green);
}
.btn.btn-outline-danger:hover {
    color: var(--bs-white);
    background-color: var(--bs-danger);
}
.btn.btn-outline-secondary:hover {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
}


.border-shine-green {
    border: 1px solid var(--green);
}


/** notifications */
ul.notifications li a {
    color: var(--gray);
    text-decoration: none;
}
ul.notifications li a:hover,
ul.notifications li a:active,
ul.notifications li a:focus
{
    color: #212529;
}
ul.notifications li > div.notification  {
    border-top: solid 1px var(--gray);
    margin: 0 5px;
}
ul.notifications li.active {
    opacity: 0.8;
}
ul.notifications li.active > div.notification  {
    border-top: solid 1px white;
}
ul.notifications li.active:hover {
    opacity: 1;
}
ul.notifications li.active a {
    color: white;
}
ul.notifications li.active {
    background-color: var(--green);
}


.form-control:focus,
.form-select:focus
{
    color: #212529;
    background-color: #fff;
    border-color: var(--green);
    box-shadow: 0 0 0 0.25rem var(--green-shadow);
    outline: 0;
}

.shine-logo-def {
    width: 100%;
    max-height:140px;
}
.shine-logo-def g path.letter-n {
    fill: var(--green);
}


svg {
    width: 100%;
    height: 100%;
}
.max-w-100 {
    max-width: 100px;
    height: auto;
}
.mt--10 {
    margin-top: -10px;
}

.table {
    color: var(--gray);
}
.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--gray);
}
.table-hover>tbody>tr:hover,
.table-hover>tbody>tr.active
{
    --bs-table-accent-bg: var(--gray-light);
    color: var(--bs-table-hover-color);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    cursor: pointer;
    text-decoration: none;
}
.table>:not(:last-child)>:last-child>* {
    border-bottom-color: var(--green);
}
.page-link {
    color: var(--green);
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--green);
    border-color: var(--green);
}
.page-link:hover {
    color: var(--green);
    background-color: var(--gray);
    border-color: #dee2e6;
}
.page-link:focus {
    color: var(--green);
    background-color: #e9ecef;
    box-shadow: 0 0 0 0.25rem var(--green-shadow);
}


#alert-wrap {
    position: fixed;
    top: 1%;
    right: 1%;
    min-width: 300px;
    z-index: 9;
}


/**
 * Checkbox
 */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 2.0em;
    font-size: 1em;
    line-height: 1.2;
    cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid var(--green);
    background: #FFF;
    border-radius: .2em;
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 var(--green-shadow);
    -webkit-transition: all .275s;
    transition: all .275s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: '✕';
    position: absolute;
    top: 0.48em;
    left: 0.1em;
    font-size: 1.375em;
    color: var(--green);
    line-height: 0;
    -webkit-transition: all .2s;
    transition: all .2s;
}
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
}
[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
[type="checkbox"]:not(:checked) + label::after,
[type="checkbox"]:checked + label::after
{
    content: "✕";
    position: absolute;
    top: 0.78em;
    left: 0.15em;
    font-size: 1em;
    color: var(--green);
    line-height: 0;
    transition: all 0.2s ease 0s;
}
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #e9e9e9;
}
[type="checkbox"]:disabled:checked + label:after {
    color: #777;
}
[type="checkbox"]:disabled + label {
    color: #aaa;
}
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 3px var(--green-shadow);
}



/**
 * Tooth view
 */
.tooth-wrap {
    display: flex;
    flex-direction: row;
}
.tooth-wrap table {
    display: inline-block;
}
.tooth-wrap table,
.tooth-wrap table tr td {
    background: radial-gradient(black, transparent);
}
.tooth-wrap table.top-right td .tooth {
    padding-top: 37px;
}
.tooth {
    position: relative;
    cursor: pointer;
    /*background: darkgrey;*/
}
.tooth-wrap table.bottom-left {
    margin-top: -35px;
}

/** tooth top,bottom left */
.tooth-wrap table.top-left td:nth-child(1) .tooth,
.tooth-wrap table.bottom-left td:nth-child(1) .tooth
{
    margin-top: 0;
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(2) .tooth,
.tooth-wrap table.bottom-left td:nth-child(2) .tooth
{
    margin-top: calc(5px + 4px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(3) .tooth,
.tooth-wrap table.bottom-left td:nth-child(3) .tooth
{
    margin-top: calc(5px + 8px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(3) .tooth,
.tooth-wrap table.bottom-left td:nth-child(3) .tooth
{
    margin-top: calc(5px + 12px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(4) .tooth,
.tooth-wrap table.bottom-left td:nth-child(4) .tooth
{
    margin-top: calc(5px + 16px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(5) .tooth,
.tooth-wrap table.bottom-left td:nth-child(5) .tooth
{
    margin-top: calc(5px + 20px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(6) .tooth,
.tooth-wrap table.bottom-left td:nth-child(6) .tooth
{
    margin-top: calc(5px + 24px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(7) .tooth,
.tooth-wrap table.bottom-left td:nth-child(7) .tooth
{
    margin-top: calc(5px + 28px);
    transform: rotate(5deg);
}
.tooth-wrap table.top-left td:nth-child(8) .tooth,
.tooth-wrap table.bottom-left td:nth-child(8) .tooth
{
    margin-top: calc(5px + 32px);
    transform: rotate(1deg);
}
/** tooth top,bottom right */
.tooth-wrap table.top-right td:nth-child(8) .tooth,
.tooth-wrap table.bottom-right td:nth-child(8) .tooth
{
    margin-top: calc(-37px + 8px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(7) .tooth,
.tooth-wrap table.bottom-right td:nth-child(7) .tooth
{
    margin-top: calc(-37px + 12px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(6) .tooth,
.tooth-wrap table.bottom-right td:nth-child(6) .tooth
{
    margin-top: calc(-37px + 16px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(5) .tooth,
.tooth-wrap table.bottom-right td:nth-child(5) .tooth
{
    margin-top: calc(-37px + 20px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(4) .tooth,
.tooth-wrap table.bottom-right td:nth-child(4) .tooth
{
    margin-top: calc(-37px + 24px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(3) .tooth,
.tooth-wrap table.bottom-right td:nth-child(3) .tooth
{
    margin-top: calc(-37px + 28px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(2) .tooth,
.tooth-wrap table.bottom-right td:nth-child(2) .tooth
{
    margin-top: calc(-37px + 32px);
    transform: rotate(-5deg);
}
.tooth-wrap table.top-right td:nth-child(1) .tooth,
.tooth-wrap table.bottom-right td:nth-child(1) .tooth
{
    margin-top: 0;
    transform: rotate(-1deg);
}

.tooth-wrap .tooth i.fas {
    /*font-size: 50px;*/
    font-size: 3.5vw;
    color: #efefef;
}
.tooth-wrap .tooth.top i.fas {
    transform: rotate(180deg);
}
.tooth-wrap .tooth .tooth-number {
    position: absolute;
    left: 40%;
    top: 25%;
    font-size: 2vh;
}
.tooth-wrap table.top-left .tooth.top .tooth-number {
    top: 30%;
    transform: translateY(10%);
}
.tooth-wrap table.top-right .tooth.top .tooth-number {
    top: 56%;
    transform: translateY(10%);
}
.tooth-wrap .tooth.bottom .tooth-number {
    top: 10%;
    transform: translateX(10%);
}
.tooth-mobile .tooth.tooth-missing,
.tooth-mobile .tooth_rx.exclude
{
    background-color: var(--red);
    color: var(--bs-white);
}
.tooth-mobile .tooth.tooth-ok,
.tooth-mobile .tooth_rx.place-attachment
{
    background-color: var(--green);
    color: var(--bs-white);
}
.tooth-mobile .tooth_rx.not-exist
{
    background-color: var(--gray);
    color: var(--bs-white);
}
.tooth-wrap .tooth.tooth-missing i
{
    color: var(--red);
}
.tooth-wrap .tooth.tooth-ok i {
    color: var(--green);
}


.nav-link.link-shine-green {
    color: var(--green);
}

.eql-height-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.eql-height-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.patient_img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 382px;
    height: auto;
    min-height: 150px;
}
.patient_img-wrap img,
.plan_files img
{
    cursor: pointer;
}
.patient_img-wrap img[data-img-id="0"],
.plan_files img[data-img-id="0"]
{
    cursor: default;
}
.plan_files svg path {
    fill: var(--green);
}
.rtg-height{
    min-height: 360px;
}
.no-img {
    background-image: url("/assets/img/no_img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 200px;
}


.upload-wrap .thumb-container .thumb-img {
    background-repeat: no-repeat;
    /*background-size: cover;*/
    background-size: contain;
    background-position: center;
    width: 150px;
    height: 150px;
}
.upload-wrap .upload-container {
    cursor: pointer;
    border: dashed 3px var(--green);
    padding: 5px;
}
.upload-wrap .upload-container:hover,
.upload-wrap .upload-container:active {
    background-color: var(--green-shadow)!important;
    opacity: 0.6!important;
}

.patient_plan_file-wrap {}
.patient_plan_file-wrap .patient_plan_file-container,
.patient_intra_file-wrap .patient_intra_file-container
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    border: dashed 3px var(--green);
}
.patient_plan_file-wrap .patient_plan_file-container:hover,
.patient_plan_file-wrap .patient_plan_file-container:active,
.patient_intra_file-wrap .patient_intra_file-container:hover,
.patient_intra_file-wrap .patient_intra_file-container:active
{
    background-color: var(--green-shadow)!important;
    opacity: 0.6!important;
}


.border-hover,
.border-hover,
.nav-pills .nav-link.border-hover,
.nav-pills .nav-link.border-hover
{
    border: 1px solid transparent;
}
.border-hover:hover,
.border-hover:active
{
    border: 1px solid;
}
.border-hover-white:hover,
.border-hover-white:active,
.nav-pills .nav-link.border-hover-white:hover,
.nav-pills .nav-link.border-hover-white:active
{
    border-color: var(--bs-white);
}


.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/**
 * Chat
 */
.chat-box-wrap {
    /*min-height: 150px;*/
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.chat-replay-wrap textarea {
    resize: none;
}


/**
* Patient details XL fons
*/
#patient_details .nav-link {
    /*font-size: 18px;*/
}