/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
    height: 64px;
    margin-top: 12px;
}

.app-brand-logo.demo svg {
    width: 22px;
    height: 38px;
}

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
    #dropdown-variation-demo .btn-group .text-truncate {
        width: 231px;
        position: relative;
    }

        #dropdown-variation-demo .btn-group .text-truncate::after {
            position: absolute;
            top: 45%;
            right: 0.65rem;
        }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

/*Extra style*/

.gpsbg {
    background: rgba(221, 218, 207, 1);
}

.first_style {
    border-radius: 7px;
}

.form-select,
.form-control {
    padding: .8rem 0.875rem !important;
    color: rgba(50, 71, 92, 0.38) !important;
    border: 1px solid rgba(50, 71, 92, 0.22) !important;
}

.gps-btn {
    background: rgba(212, 190, 110, 1) !important;
    border: none !important;
    padding: .5vw 3vw !important;
    /*font-size: 1.1vw !important;*/
}

.top_btns {
    margin-top: 2vw;
    margin-bottom: 4vw;
}

    .top_btns li > a,
    .top_btns > a {
        margin-right: .4vw;
        color: rgba(50, 71, 92, 0.87);
        font-size: 14px;
        border-radius: 8px;
        transition: all .5s ease;
        padding: 15px 15px;
    }

        .top_btns li > a:hover,
        .top_btns li > a.active,
        .top_btns > a:hover,
        .top_btns > a.active {
            color: #fff;
            background: #D4BE6E;
        }

:focus-visible {
    outline: none !important;
}

.bg-trasparent {
    background: transparent !important;
}

    .bg-trasparent::placeholder {
        color: rgba(90, 90, 90, 0.38);
    }

.transparent-select.custom-select2 .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: 1px solid rgba(50, 71, 92, 0.22) !important;
}

.custom-select2 .select2-container--default .select2-selection--single,
.custom-select2 .select2-container--default .select2-selection--single {
    height: 50px !important;
    border: 1px solid rgba(50, 71, 92, 0.38) !important;
}

    .custom-select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 3rem !important;
    }

    .custom-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 4px !important
    }

.custom-check-box.form-check {
    padding-left: 0;
}

.custom-check-box {
    position: relative;
}

    .custom-check-box label {
        width: 100%;
    }

    .custom-check-box input {
        display: none;
    }

    .custom-check-box label:before {
        content: '';
        -webkit-appearance: none;
        background-color: transparent;
        border: 2px solid #32475C;
        border-radius: 3px;
        width: 22px;
        height: 22px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 5px;
        position: absolute;
        bottom: 26px;
        right: 20px;
        z-index: 1;
        transition: all .5s ease;
    }

    .custom-check-box input:checked + label:before {
        background: #D4BE6E;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-color: #D4BE6E;
    }

    .custom-check-box input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 31px;
        right: 33px;
        width: 6px;
        height: 14px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        z-index: 2;
    }

    .custom-check-box small {
        color: rgba(212, 190, 110, 1);
    }

.custom-select2-full {
    height: 100%;
}

.transparent-select.custom-select2-full .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: 0;
}

.custom-select2-full .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    font-size: 1.625rem;
    color: #2e313a !important;
    padding-left: 0 !important;
}

.custom-select2-full .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 1.25rem;
}

.btn.tech-btn {
    width: 100%;
    justify-content: flex-start !important;
    background: transparent !important;
    border-color: #8592A3 !important;
    color: #32475C !important;
}

    .btn.tech-btn.active,
    .btn.tech-btn:focus,
    .btn.tech-btn:hover {
        background-color: rgba(212, 190, 110, .20) !important;
        border-color: #D4BE6E !important;
    }

.card.gpsbg {
    background: rgba(221, 218, 207, 1);
}

    .card.gpsbg h5,
    .card.gpsbg h4 {
        color: #32475C;
    }

.card-datatable2 .table th {
    background: #000;
    color: #fff !important;
}

.table > :not(caption) > * > * {
    border-color: rgba(90, 90, 90, .12);
}

.full {
    width: 100%;
}

.system-banner {
    position: relative;
}

    .system-banner .infos {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 2
    }

.plus-confirm-div.card {
    background: rgba(255, 255, 255, .6);
    grid-gap: 10px;
}

    .plus-confirm-div.card a.btn-link {
        color: #32475C;
        transition: all .5s ease;
    }

    .plus-confirm-div.card input {
        box-shadow: none;
        border: 0;
        border-radius: 50px;
    }

.custom-check-box2.form-check {
    position: relative;
    padding-left: 2.5rem;
}

.custom-check-box2 label {
    width: 100%;
}

.custom-check-box2 input {
    display: none;
}

.custom-check-box2 label:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #32475C;
    border-radius: 3px;
    width: 22px;
    height: 22px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all .5s ease;
}

.custom-check-box2 input:checked + label:before {
    background: #D4BE6E;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-color: #D4BE6E;
}

.custom-check-box2 input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: 8px;
    width: 6px;
    height: 14px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 2;
}

.form-select.bg-transparent {
    border: 1px solid rgba(50, 71, 92, .38) !important;
    font-size: 1.1rem;
    color: #000;
}

.file {
    position: relative;
}

    .file > input[type='file'] {
        display: none
    }

    .file > label {
        height: 90px;
        border: 1px solid rgba(50, 71, 92, .38) !important;
        border-radius: 5px;
        display: flex;
        width: 100%;
        justify-content: center;
        cursor: pointer;
        align-items: center;
    }

    .file span {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(50, 71, 92, .20);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .file span i {
            color: rgba(50, 71, 92, .8);
        }

.text-error {
    color: #F90D3E;
}

.custom-check-box-full.form-check {
    padding-left: 0;
}

.custom-check-box-full {
    position: relative;
}

    .custom-check-box-full label {
        width: 100%;
        border: 1px solid rgba(50, 71, 92, .38) !important;
        background: transparent;
        min-height: 166px;
    }

    .custom-check-box-full .custom-option-body {
        text-align: center;
    }

        .custom-check-box-full .custom-option-body img {
            display: block;
            margin: 0 auto;
        }

    .custom-check-box-full input {
        display: none;
    }

    .custom-check-box-full label:before {
        content: '';
        -webkit-appearance: none;
        background-color: transparent;
        border: 2px solid #32475C;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 5px;
        position: absolute;
        bottom: 26px;
        left: 50%;
        z-index: 1;
        transition: all .5s ease;
        transform: translateX(-50%);
    }

    .custom-check-box-full input:checked + label:before {
        background: #D4BE6E;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-color: #D4BE6E;
    }

    .custom-check-box-full input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 32px;
        left: 50%;
        width: 10px;
        height: 10px;
        z-index: 2;
        background: #fff;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    .custom-check-box-full small {
        color: rgba(212, 190, 110, 1);
    }

    .custom-check-box-full.not-checkbox label {
        min-height: auto;
        transition: all .7s ease;
    }

        .custom-check-box-full.not-checkbox label:before,
        .custom-check-box-full.not-checkbox label:after {
            display: none !important;
        }

    .custom-check-box-full.not-checkbox input:checked + label {
        border: 1px solid #FF325C !important;
    }

    .custom-check-box-full.not-checkbox.white input:checked + label {
        border: 1px solid #FF325C !important;
        background: #fff;
    }

.teeth-diagram-ginShade-main,
.teeth-diagram-ndShade-main,
.teeth-diagram-shade,
.teeth-diagram {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .6);
}

    .teeth-diagram .inner {
        position: relative;
    }

.tooth-row {
    display: flex;
    justify-content: center;
    align-items: end;
    grid-gap: 16px;
}

    .tooth-row .items {
        grid-gap: 16px;
    }

    .tooth-row.lower {
        align-items: start;
    }

.tooth {
    display: flex;
    flex-direction: column;
}

    .tooth .num {
        display: block;
        width: 100%;
        text-align: center;
    }

    .tooth .box {
        height: 110px;
    }

    .tooth.last,
    .tooth.first {
        width: 12%;
        text-align: center;
        padding: 0 0;
    }

        .tooth.last .box,
        .tooth.first .box {
            width: 70%;
            margin: 0 18% 0;
        }

.tooth-row.upper .box {
    display: flex;
    align-items: end;
}

.tooth-row.lower .box {
    display: flex;
    align-items: start;
}

.tooth .num {
    color: #1F1F1F;
}

.tooth .img {
    position: relative;
}

.shade img,
.tooth img {
    width: 100%;
}

.shade input,
.tooth input {
    display: none;
}

.shade .img-select,
.tooth .img-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all .3s ease;
    opacity: 0;
}

.tooth .checkbox:checked + label .img .img-select {
    opacity: 1;
}

.shade .checkbox:checked + label .img .img-unselect {
    opacity: 0;
}

.shade .checkbox:checked + label .img .img-select {
    opacity: 1;
}

.teeth-diagram .divider-vertical {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: #484848;
}

.teeth-diagram .divider {
    width: 100%;
    height: 1px;
    background-color: #484848;
    margin: 5px !important;
}

.bg-white-60 {
    background: rgba(255, 255, 255, .6);
}

.card.gpsbg .sorting_asc,
.card.gpsbg .control.sorting_1 {
    display: none !important;
}

.select-teeth-diagram .inner {
    /*	margin: 0 10%;*/
    position: relative;
}

.select-teeth-diagram .tooth.last,
.select-teeth-diagram .tooth.first {
    width: 11.5%;
}

.connected-checkbox.form-check {
    padding-left: 0;
}

.connected-checkbox label {
    position: relative;
    padding-left: 30px;
    color: #000;
}

.connected-checkbox .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
}

    .connected-checkbox .img img {
        width: 100%;
    }

.connected-checkbox input {
    display: none;
}

.connected-checkbox .img-select {
    position: absolute;
    top: 0;
    left: 0;
    transition: all .7s ease;
    opacity: 0;
}

.connected-checkbox .checkbox:checked + label .img .img-select {
    opacity: 1;
}

.connected-checkbox .checkbox:checked + label .img .img-unselect {
    opacity: 0;
}

.connect-div h5 {
    color: #000 !important;
}

.connected-shade {
    position: absolute;
    top: 0;
}

    .connected-shade img {
        width: 100%;
    }
/*.select-teeth-diagram .inner .tooth-row {
	grid-gap: 0;
}*/
.tooth-row {
    position: relative;
    grid-gap: 8px;
}

.tooth {
    position: relative;
    z-index: 2;
}

.tooth-row.upper {
    top: auto;
}

.tooth-row.lower {
    bottom: auto;
}


.shade {
    position: absolute;
    width: 5%;
    left: 0;
    z-index: 1;
}

.shade-1 {
    left: 5.4%;
    bottom: 9%;
}

    .shade-1 .img-unselect {
        width: 61%;
    }

.shade-2 {
    left: 12.6%;
    bottom: 11%;
}

    .shade-2 .img-unselect {
        width: 58%;
    }

.shade-3 {
    left: 20.7%;
    bottom: 12%;
}

    .shade-3 .img-unselect {
        width: 53%;
    }

.shade-4 {
    left: 25.7%;
    bottom: 15%;
}

    .shade-4 .img-unselect {
        width: 55%;
    }

.shade-5 {
    left: 31.2%;
    bottom: 12%;
}

    .shade-5 .img-unselect {
        width: 66%;
    }

.shade-6 {
    left: 37%;
    bottom: 12%;
}

    .shade-6 .img-unselect {
        width: 78%;
    }

.shade-7 {
    left: 42%;
    bottom: 12%;
}

    .shade-7 .img-unselect {
        width: 82%;
    }

.shade-8 {
    left: 48.5%;
    bottom: 11%;
}

    .shade-8 .img-unselect {
        width: 86%;
    }

.shade-9 {
    left: 54%;
    bottom: 12%;
}

    .shade-9 .img-unselect {
        width: 82%;
    }

.shade-10 {
    left: auto;
    bottom: 12%;
    right: 36%;
}

    .shade-10 .img-unselect {
        width: 82%;
    }

.shade-11 {
    left: auto;
    bottom: 15%;
    right: 30%;
}

    .shade-11 .img-unselect {
        width: 82%;
    }

.shade-12 {
    left: auto;
    bottom: 15%;
    right: 24%;
}

    .shade-12 .img-unselect {
        width: 79%;
    }

.shade-13 {
    left: auto;
    bottom: 13%;
    right: 18.6%;
}

    .shade-13 .img-unselect {
        width: 66%;
    }

.shade-14 {
    left: auto;
    bottom: 8%;
    right: 10.7%;
}

    .shade-14 .img-unselect {
        width: 61%;
    }

.shade-15 {
    left: auto;
    bottom: 9%;
    right: 3%;
}

    .shade-15 .img-unselect {
        width: 58%;
    }


.shade-16 {
    left: 5.2%;
    top: 6%;
}

    .shade-16 .img-unselect {
        width: 59%;
    }

.shade-17 {
    left: 14%;
    top: 10%;
}

    .shade-17 .img-unselect {
        width: 55%;
    }

.shade-18 {
    left: 22%;
    top: 9%;
}

    .shade-18 .img-unselect {
        width: 62%;
    }

.shade-19 {
    left: 27.8%;
    top: 11%;
}

    .shade-19 .img-unselect {
        width: 61%;
    }

.shade-20 {
    left: 33.7%;
    top: 13%;
}

    .shade-20 .img-unselect {
        width: 61%;
    }

.shade-21 {
    left: 39%;
    top: 12%;
}

    .shade-21 .img-unselect {
        width: 73%;
    }

.shade-22 {
    left: 42.7%;
    top: 9%;
}

    .shade-22 .img-unselect {
        width: 89%;
    }

.shade-23 {
    left: 46.6%;
    top: 10%;
}

    .shade-23 .img-unselect {
        width: 100%;
    }

.shade-24 {
    left: 52%;
    top: 13%;
}

    .shade-24 .img-unselect {
        width: 95%;
    }

.shade-25 {
    left: auto;
    top: 12%;
    right: 38%;
}

    .shade-25 .img-unselect {
        width: 100%;
    }

.shade-26 {
    left: auto;
    top: 17%;
    right: 32%;
}

    .shade-26 .img-unselect {
        width: 85%;
    }

.shade-27 {
    left: auto;
    top: 15%;
    right: 26%;
}

    .shade-27 .img-unselect {
        width: 80%;
    }

.shade-28 {
    left: auto;
    top: 13%;
    right: 20.2%;
}

    .shade-28 .img-unselect {
        width: 76%;
    }

.shade-29 {
    left: auto;
    top: 10%;
    right: 12%;
}

    .shade-29 .img-unselect {
        width: 66%;
    }

.shade-30 {
    left: auto;
    top: 11%;
    right: 3.7%;
}

    .shade-30 .img-unselect {
        width: 64%;
    }

.shade-1 .img-select {
    width: 55%;
}

.shade-2 .img-select {
    width: 58%;
}

.shade-3 .img-select {
    width: 54%;
}

.shade-4 .img-select {
    width: 45%;
}

.shade-5 .img-select {
    width: 59%;
}

.shade-6 .img-select {
    width: 67%;
}


.shade-7 .img-select {
    width: 77%;
}

.shade-8 .img-select {
    width: 80%;
}

.shade-9 .img-select {
    width: 74%;
}


.shade-10 .img-select {
    width: 70%;
}

.shade-11 .img-select {
    width: 74%;
}

.shade-12 .img-select {
    width: 75%;
}


.shade-13 .img-select {
    width: 66%;
}

.shade-14 .img-select {
    width: 60%;
}


.shade-15 .img-select {
    width: 58%;
}


.shade-16 .img-select {
    width: 65%;
}

.shade-17 .img-select {
    width: 60%;
}

.shade-18 .img-select {
    width: 64%;
}


.shade-19 .img-select {
    width: 66%;
}

.shade-20 .img-select {
    width: 85%;
}


.shade-21 .img-select {
    width: 90%;
}

.shade-22 .img-select {
    width: 100%;
}

.shade-23 .img-select {
    width: 100%;
}


.shade-24 .img-select {
    width: 95%;
}

.shade-25 .img-select {
    width: 92%;
}

.shade-26 .img-select {
    width: 70%;
}

.shade-27 .img-select {
    width: 63%;
}

.shade-28 .img-select {
    width: 72%;
}


.shade-29 .img-select {
    width: 66%;
}

.shade-30 .img-select {
    width: 57%;
}

.empty-space {
    width: 3%;
}

.small {
    width: 9%;
}

.small2 {
    width: 13%;
}

.select-teeth-diagram .shade {
    opacity: 0;
    transition: all .5s ease;
}

.connected-section .shade {
    opacity: 1;
}

.specific-shade-diagram {
}

.tooth .box {
    position: relative;
}

    .tooth .box .text {
        position: absolute;
        bottom: 20%;
        left: 0;
        color: #000;
        display: block;
        text-align: center;
        width: 100%;
        font-weight: bold;
        font-size: 24px;
    }

.specific-shade-diagram .shade .img-unselect {
    opacity: 0;
}

.tooth-row.upper .text {
    top: auto;
}

.tooth-row.lower .text {
    top: 20%;
    bottom: auto;
}

.tooth-row .text.small {
    font-size: 16px;
}

.teeth-diagram-shade {
    position: relative;
}

    .teeth-diagram-shade .inner {
        position: relative;
        z-index: 2;
    }

        .teeth-diagram-shade .inner:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: #C0C0BD;
            z-index: -1;
        }

    .teeth-diagram-shade .shades-row {
        display: flex;
    }

.tooth-shade input {
    display: none;
}

.tooth-shade .img {
    position: relative;
}

.tooth-shade img {
    width: 100%;
    transition: all .3s ease;
}

.tooth-shade .img-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 100%;
}

.tooth-shade .checkbox:checked + label .img .img-unselect {
    opacity: 0;
}

.tooth-shade .checkbox:checked + label .img .img-select {
    opacity: 1;
}

.shades-row .space {
    width: 5%;
}

.shades-row .space2 {
    width: 8%;
}

.pink-box {
    width: 45px;
    height: 45px;
    background: #977470;
    border-radius: 4px;
}

    .pink-box.tow {
        background: #9D8478;
    }

    .pink-box.three {
        background: #6C322E;
    }

.summary-infos p {
    margin: 0;
}

.create-new-case {
    cursor: pointer;
}

    .create-new-case svg {
        transform: rotate(180deg);
        transition: all .5s ease;
    }

    .create-new-case.active svg {
        transform: rotate(0deg);
    }

.new-case-details .custom-select2-full .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 1.25rem;
    font-weight: 500;
}

.before-after-main {
    display: flex;
}

    .before-after-main .item {
        width: 50%;
    }

        .before-after-main .item p {
            margin-bottom: 10px !important;
        }

.cl {
    color: #32475C;
}

.teeth-diagram-ndShade .inner {
    position: relative;
    z-index: 2;
}

.teeth-diagram-ndShade .shades-row {
    display: flex;
}

    .teeth-diagram-ndShade .shades-row .items {
        display: flex;
        z-index: 1;
        position: relative;
    }

.tooth-ndShade {
    position: relative;
    width: 100px;
}

    .tooth-ndShade .img {
        position: relative;
    }

    .tooth-ndShade img {
        width: 100%;
        transition: all .3s ease;
    }

    .tooth-ndShade input {
        display: none;
    }

.teeth-diagram-ndShade .shades-row .space {
    width: 25%;
}

.tooth-ndShade .img-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 100%;
}

.tooth-ndShade .checkbox:checked + label .img .img-unselect {
    opacity: 0;
}

.tooth-ndShade .checkbox:checked + label .img .img-select {
    opacity: 1;
}

.shades-img2 {
    margin: -44px 0 0;
    position: relative;
    z-index: 2;
}

.tooth-ndShade.ndShade1 {
    left: -25px;
    top: 0;
}

.tooth-ndShade.ndShade2 {
    left: -50px;
    top: -23px;
}

.tooth-ndShade.ndShade3 {
    left: -60px;
    width: 84px;
    top: -27px;
}

.tooth-ndShade.ndShade4 {
    left: -56px;
    width: 69px;
    top: -28px;
}

.tooth-ndShade.ndShade5 {
    width: 74px;
    left: -50px;
    top: -11px;
}

.tooth-ndShade.ndShade7 {
    width: 80px;
    left: -11px;
    top: -14px;
}

.tooth-ndShade.ndShade8 {
    width: 67px;
    left: -11px;
    top: -13px;
}

.tooth-ndShade.ndShade9 {
    width: 68px;
    left: -5px;
    top: -12px;
}

.tooth-ndShade.ndShade10 {
    width: 80px;
    top: -4px;
}

.tooth-ndShade.ndShade6 {
    left: 0;
    top: -11px;
}


.teeth-diagram-ndShade .inner {
    position: relative;
    z-index: 2;
}

.teeth-diagram-ginShade-main {
    padding: 0;
}

    .teeth-diagram-ginShade-main .shades-img2 {
        margin-top: -24px;
    }

    /*  .teeth-diagram-ginShade-main .shades-row .space {
        width: 40.5%;
    }*/

    .teeth-diagram-ginShade-main .teeth-diagram-ndShade {
        position: relative;
        z-index: 1;
    }

.ivoclar-shade-zlg {
    top: 6px;
    left: 1%;
}

.ivoclar-shade-g1 {
    left: -2%;
    top: -8px;
}

.ivoclar-shade-g2 {
    top: -14px;
    left: -27px;
}

.ivoclar-shade-g3 {
    top: -16px;
    left: -9%;
}

.ivoclar-shade-g4 {
    top: -8px;
    left: -14.2%;
}

.ivoclar-shade-g5 {
    left: -20%;
    top: 3px;
}

.ivoclar-shade-ig1 {
    left: -7%;
    top: 6px;
}

.ivoclar-shade-ig2 {
    left: -15%;
    top: -4px;
}

.ivoclar-shade-ig3 {
    left: -20%;
    top: -10px;
}

.ivoclar-shade-ig4 {
    left: -27%;
    top: -10px;
}

.ivoclar-shade-e20 {
    top: -26px;
    left: 10%;
}

.ivoclar-shade-e21 {
    top: -15px;
}

.ivoclar-shade-e22 {
    top: -6px;
    left: -10%;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow: inherit !important;
    max-height: initial !important;
}


.body-dark {
    background: #333534;
}

    .body-dark .bg-footer-theme {
        background-color: #333534 !important;
        color: #5A5A5A;
    }

    .body-dark .bg-menu-theme.menu-vertical {
        box-shadow: none;
    }

    .body-dark .layout-page:before {
        display: none !important;
        background: none !important;
    }

    .body-dark .layout-navbar {
        background-color: #000 !important;
        box-shadow: none;
    }

    .body-dark .gpsbg {
        background: #000 !important;
        border: 0;
    }

    .body-dark .card,
    .body-dark .shadow-sm {
        box-shadow: none !important;
    }

    .body-dark .border-top {
        border-top: transparent !important;
    }

    .body-dark .card-header {
        border-bottom: transparent !important;
    }

    .body-dark .top_btns li > a,
    .body-dark .top_btns > a {
        color: #fff;
    }

.top_btns li {
    list-style: none;
}

ul.top_btns {
    display: flex;
    padding: 0;
}

.body-dark .text-muted,
.body-dark .text-body,
.body-dark table td,
.body-dark table th,
.body-dark table.dataTable td,
.body-dark table.dataTable th {
    color: #fff !important;
}

.body-dark table thead > tr > th,
.body-dark table.dataTable thead > tr > th {
    background: rgba(255, 255, 255, .12);
}

.body-darkt .form-check-input {
    background: transparent;
    border-color: rgba(255, 255, 255, .38);
}

.body-dark table td a,
.body-dark table.dataTable td a {
    color: #fff !important;
}

.presets-table .form-select {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .38) !important;
}

.presets-table .form-control {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38) !important;
}

.presets-table div.dt-buttons .buttons-collection {
    overflow: hidden;
    text-overflow: ellipsis;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .38) !important;
}

.presets-table div.dataTables_wrapper .dt-button-collection {
    background-color: #000 !important;
    color: #fff !important;
}

.presets-table .page-link {
    box-shadow: none !important;
    background-color: #000 !important;
}

.presets-table li.paginate_button.page-item.active .page-link {
    background-color: #D4BE6E !important;
}

.body-dark .dropdown-menu {
    box-shadow: none !important;
    background: #333534 !important;
}

.body-dark .dropdown-item.active,
.body-dark .dropdown-item:hover,
.body-dark .dropdown-item:active {
    background: rgba(255, 255, 255, .38) !important;
    color: #fff !important;
}

.body-dark .text-body[href]:hover {
    color: #fff !important;
}

.head-card {
    background-color: transparent !important;
    border: 0 !important;
}

.body-dark .bg-menu-theme {
    background-color: #000 !important;
}

.body-dark .card {
    background-color: #0f0f0f !important;
    color: #fff;
    border-color: #0f0f0f;
}

    .body-dark .card .form-control {
        background: #161615;
        color: #fff !important;
    }

.body-dark h2,
.body-dark h3,
.body-dark h4,
.body-dark h5,
.body-dark h6 {
    color: #fff;
}

.body-dark .teeth-style-main p {
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
}

.top_btns-item a {
    padding: 8px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-transform: uppercase;
    margin-right: 0 !important;
}

.top_btns-item li {
    margin-right: 1vw;
}

.body-dark .menu-inner-shadow {
    display: none !important;
}

.teeth-sliders {
    background-color: #000;
}

.arrows-pagination {
    position: relative;
    display: flex;
    justify-content: space-between;
    grid-gap: 4vw;
    align-items: center;
}

    .arrows-pagination .swiper-button-prev,
    .arrows-pagination .swiper-button-next,
    .arrows-pagination .swiper-pagination-progressbar {
        position: relative;
        .swiper-button-next
    }

    .arrows-pagination .swiper-pagination-progressbar {
        flex: 1;
    }

    .arrows-pagination .arrows {
        display: flex;
        grid-gap: 4vw;
    }

    .arrows-pagination .swiper-button-prev:after,
    .arrows-pagination .swiper-button-next:after {
        content: "";
    }

    .arrows-pagination .swiper-button-prev,
    .arrows-pagination .swiper-button-next {
        left: 0;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        top: 0 !important;
    }

        .arrows-pagination .swiper-button-prev:hover svg
        .arrows-pagination .swiper-button-next:hover svg {
            fill: #D4BE6E;
        }

    .arrows-pagination svg {
        fill: #fff;
        width: 14px;
        height: 16px;
        transition: all .5s ease;
    }

    .arrows-pagination .swiper-button-next {
        right: 0 !important;
        left: auto !important;
    }

    .arrows-pagination .swiper-button-prev {
        left: 0 !important;
        right: auto !important;
    }

.text-body .teeth-swiper-main {
    background: #000;
    border-radius: 10px;
}

.arrows-pagination .swiper-pagination-progressbar {
    background: rgba(255, 255, 255, .30);
    border-radius: 3px;
    overflow: hidden;
}

.arrows-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.arrows-pagination .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #D4BE6E !important;
    border-radius: 3px;
}

.teeth-swiper .infos {
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 30px;
}

    .teeth-swiper .infos .img {
        text-align: center;
        padding: 0 5% 20px;
    }

        .teeth-swiper .infos .img img {
            width: 100%;
        }

.body-dark .teeth-swiper .infos h4 {
    color: #D4BE6E !important;
}

.body-dark .teeth-swiper .infos p:first-of-type {
    color: #fff;
}

.body-dark .teeth-swiper .infos p {
    color: rgba(255, 255, 255, .60);
}

.swiper.teeth-swiper .swiper-slide {
    position: relative;
}

.teeth-swiper .custom-check-box {
    position: absolute;
    top: 20px;
}

.teeth-swiper .custom-check-box {
    box-shadow: none !important;
}

    .teeth-swiper .custom-check-box p {
        margin-bottom: 0;
    }

    .teeth-swiper .custom-check-box label {
        padding-left: 36px;
    }

        .teeth-swiper .custom-check-box label:before {
            bottom: 0;
            right: auto;
            left: 0;
            border-radius: 50%;
            border-color: #fff;
        }

    .teeth-swiper .custom-check-box input + label:after {
        transition: all .7s ease;
    }

    .teeth-swiper .custom-check-box input:checked + label:after {
        bottom: auto;
        left: 5px;
        right: auto;
        width: 12px;
        height: 12px;
        border: 0;
        border-width: 0;
        transform: inherit;
        z-index: 2;
        background: #fff;
        border-radius: 50%;
        top: 6px;
    }

.teeth-swiper .infos .img.img-auto {
    padding-top: 20px;
}

    .teeth-swiper .infos .img.img-auto img {
        width: auto;
    }

.teeth-swiper .shade-gradient {
    position: absolute;
    top: 48px;
    right: 40px;
}

.price-holder {
}

    .price-holder .price-box {
        border: 1px solid #fff;
        border-radius: 6px;
        font-size: 20px;
        color: #fff;
    }

.gps-btn.outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    padding: 12px 40px !important;
    /*font-size: 1.1vw !important;*/
}

.body-dark .border-bottom {
    border-bottom: 1px solid #434341 !important;
}

.body-dark .list-group {
    --bs-list-group-border-color: #434341;
}

.body-dark .dropdown-divider {
    border-top: 1px solid #434341;
}

.filepond-custom {
}

    .filepond-custom a.filepond--credits {
        display: none;
    }

    .filepond-custom .filepond--root .filepond--drop-label {
        min-height: 4.75em;
        background: rgba(221, 218, 207, 1);
        border: 1px solid rgba(50, 71, 92, .38) !important;
        border-radius: 6px;
    }

.file.filepond-custom span {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    text-align: center;
    display: inline;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 6px;
}

.price-holder label {
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
    margin-bottom: 1rem
}

.price-holder .form-control.price-box {
    background: transparent;
    border: 1px solid #fff !important;
    border-radius: 6px;
    font-size: 20px;
    color: #fff !important;
}

.priceRdaio-holder {
}

    .priceRdaio-holder .custom-check-box label:before {
        top: 0;
        right: auto;
        left: 0;
        border-radius: 50%;
        border-color: #fff;
    }

    .priceRdaio-holder .custom-check-box label {
        padding-left: 36px;
    }

    .priceRdaio-holder .custom-check-box input:checked + label:after {
        bottom: auto;
        left: 5px;
        right: auto;
        width: 12px;
        height: 12px;
        border: 0;
        border-width: 0;
        transform: inherit;
        z-index: 2;
        background: #fff;
        border-radius: 50%;
        top: 5px;
    }

.dataTables_wrapper .dataTables_scrollBody th,
.dataTables_wrapper .dataTables_scrollBody td {
    white-space: normal;
    padding: 1rem
}

.first_style h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plus-confirm-div .item {
    display: flex;
}

.plus-confirm-div.card {
    background: rgba(255, 255, 255, .6);
    grid-gap: 10px;
}

.dataTables_scroll {
    overflow-x: auto;
}

    .dataTables_scroll .dataTables_scrollHead {
    }

div.dataTables_scrollHead table.table-bordered {
    width: 100% !important;
}

div.dataTables_scrollHead .dataTables_scrollHeadInner {
    width: 100% !important
}

.table th,
.table td {
    white-space: normal;
    padding: 1rem;
}

.card .card-header {
    margin: 0 0 20px;
}

.price-holder {
    background: transparent !important;
}

body:not(.body-dark) .swiper .swiper-slide {
    color: #32475C !important
}

body:not(.body-dark) .teeth-swiper .custom-check-box label:before {
    border-color: #32475C !important
}

body:not(.body-dark) .price-holder .price-box {
    border: 1px solid #32475C;
    color: #32475C;
}

body:not(.body-dark) .arrows-pagination svg {
    fill: #32475C;
}

.user-profile-header-banner img {
    width: 100%;
    /*width: auto;
    left: -50%;*/
    position: relative;
    z-index: 1;
}

.user-profile-header-banner.system-banner img {
    width: 100%;
    left: 0
}

.app-brand.brand-logo {
    padding-left: 1rem !important;
}

    .app-brand.brand-logo .circle {
        position: absolute;
        top: 0;
        width: 50px;
        left: 0;
        opacity: 0;
    }

        .app-brand.brand-logo .circle img {
            width: 100%;
        }

a.app-brand-link {
    position: relative;
}

.layout-menu-collapsed .circle {
    opacity: 1 !important
}

.layout-menu-collapsed .logo {
    opacity: 0
}

.layout-menu-hover .logo {
    opacity: 1
}

.layout-menu-hover .circle {
    opacity: 0 !important
}

.teeth-swiper-main {
    background: #000;
    border-radius: 10px;
}

.gps-btn {
    box-shadow: none !important
}

.teeth-diagram-ndShade .shades-row {
    display: flex;
    padding: 0 0 0 20px;
}

.case-boxes .custom-check-box.form-check {
    padding-left: 0;
    height: 100%;
}

.case-boxes .custom-check-box label {
    width: 100%;
    height: 100%;
}

.custom-select2-full .select2-container--default.select2-container--focus .select2-selection,
.custom-select2-full .select2-container--default.select2-container--open .select2-selection {
    border-color: #c4c4c4 !important;
    background: transparent;
}

.body-dark .card.gpsbg h5,
.body-dark .card.gpsbg h4 {
    color: #fff;
}

.modal .card-datatable2 .table th {
    background: transparent;
    color: #000 !important;
}

.app-chat .app-chat-history .chat-history-body .chat-history .chat-message.chat-message-right .chat-message-text a {
    color: #fff !important
}

.form-send-message {
    width: 100%;
}

.drag-target {
    display: none !important;
}

.desktopDes {
    display: block
}

.mobileDes {
    display: none
}

.show-more:hover,
.show-more {
    color: #D4BE6E;
}

.custom-select-dropdwon button {
    border: 0 !important;
    padding: 0;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    font-size: 1.125rem;
    color: #2e313a !important;
    font-weight: 500;
}

.custom-select-dropdwon .dropdown-toggle::after {
    right: 0;
    position: absolute;
}

.custom-select-dropdwon .dropdown-menu {
    width: 100%;
}

.app-chat .app-chat-history .chat-history-body .chat-history .chat-message .chat-message-text {
    color: rgb(105, 122, 141);
}

.user-profile-header {
    position: relative;
    z-index: 2;
}

.newChatDesign .overflow-hidden {
    display: flex;
    flex-direction: column;
}

.chat-message.chat-message-right.newChatDesign .overflow-hidden {
    flex-direction: column-reverse;
}

.newChatDesign .user-avatar .avatar {
    width: auto;
    height: auto;
    display: flex;
    align-items: center
}

.chat-message.chat-message-right.newChatDesign .user-avatar .avatar {
    flex-direction: row-reverse;
}

.newChatDesign .user-avatar .avatar .img {
    width: 48px;
    margin-right: 1rem;
    margin-bottom: 15px;
}

.chat-message.chat-message-right.newChatDesign .user-avatar .avatar .img {
    margin-left: 1rem;
    margin-right: 0;
}

.newChatDesign .user-avatar .avatar .img img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.tooth .checkbox label img {
    transition: all .5s ease-in-out;
    transform: translateY(0);
}

.tooth-row.upper .tooth .checkbox:checked + label img {
    transform: translateY(-8px);
}

/*.tooth-row.upper .tooth .img:hover img {
    transform: translateY(-8px);
    opacity: 1;
}

.tooth-row.lower .tooth .img:hover img {
    transform: translateY(8px);
    opacity: 1;
}*/

.tooth-row.lower .tooth .checkbox:checked + label img {
    transform: translateY(8px);
}

.shade img,
.tooth img {
    transition: all .3s ease-in-out;
    width: 100%;
}

.e-max-ceram .shades-row .items {
    display: flex;
    z-index: 1;
    position: relative;
    width: 50%;
    grid-gap: 6%;
}

.e-max-ceram .tooth-ndShade {
    width: auto;
}

    .e-max-ceram .tooth-ndShade .img-select {
        width: auto;
        height: auto;
    }

    .e-max-ceram .tooth-ndShade label img {
        transition: all .5s ease-in-out;
        transform: translateY(0);
    }

    /* .e-max-ceram .tooth-ndShade .img:hover img.img-unselect {
        opacity: 0;
    }

    .e-max-ceram .tooth-ndShade .img:hover img.img-select {
        transform: translateY(-8px);
        opacity: 1
    }*/

    .e-max-ceram .tooth-ndShade .checkbox:checked + label img {
        transform: translateY(-8px);
    }
/*.e-max-ceram .tooth-ndShade .checkbox:checked + label img {
    transform: translateY(-8px);
}*/

.ivoclar-shade-zlg {
    top: 6px;
    left: 1%;
}

.ivoclar-shade-g1 {
    left: 0;
    top: -8px;
}

.ivoclar-shade-g2 {
    top: -12px;
    left: 0;
}

.ivoclar-shade-g3 {
    top: -13px;
    left: 0
}

.ivoclar-shade-g4 {
    top: -6px;
    left: 0;
}

.ivoclar-shade-g5 {
    left: 0;
    top: 5px;
}

.ivoclar-shade-ig1 {
    left: 3%;
    top: 6px;
}

.ivoclar-shade-ig2 {
    left: 0;
    top: -4px;
}

.ivoclar-shade-ig3 {
    left: 0;
    top: -10px;
}

.ivoclar-shade-ig4 {
    left: 0;
    top: -10px;
}

.ivoclar-shade-e20 {
    top: -26px;
    left: 5%;
}

.ivoclar-shade-e21 {
    top: -15px;
    left: 4%;
}

.ivoclar-shade-e22 {
    top: -6px;
    left: 4%;
}

.e-max-ceram .tooth-ndShade.ivoclar-shade-e20 .checkbox + label img,
.e-max-ceram .tooth-ndShade.ivoclar-shade-e21 .checkbox + label img
.e-max-ceram .tooth-ndShade.ivoclar-shade-e22 .checkbox + label img {
    transform: translateY(0);
}

.e-max-ceram .tooth-ndShade.ivoclar-shade-e20 .checkbox:checked + label img,
.e-max-ceram .tooth-ndShade.ivoclar-shade-e21 .checkbox:checked + label img
.e-max-ceram .tooth-ndShade.ivoclar-shade-e22 .checkbox:checked + label img {
    transform: translateY(-4px) !important;
}

.pink-box.Pink1 {
    background: #d6bdc3;
}

.pink-box.Pink2 {
    background: #d5b8bc;
}

.pink-box.Pink3 {
    background: #d09ba5;
}

.pink-box.Pink4 {
    background: #c97373;
}

.pink-box.Pink5 {
    background: #be362e;
}

.pink-box.PinkR {
    background: #cd6571;
}

.body-dark input#messageInput {
    background: transparent;
}

.ad-shade-main .inner {
    overflow: hidden;
}

.ad-shade-main .tooth-shade .checkbox + label img {
    width: auto;
    transition: all .5s ease-in-out;
    transform: translateY(0);
}

.ad-shade-main .tooth-shade .img-select {
    width: 100%;
    height: auto;
}

/*.ad-shade-main .tooth-shade .img:hover img.img-unselect {
    opacity: 0;
}

.ad-shade-main .tooth-shade .img:hover img.img-select {
    transform: translateY(-8px);
    opacity: 1;
}*/

.ad-shade-main .tooth-shade .checkbox:checked + label img {
    transform: translateY(-8px);
}

.nd-shade-main .tooth-ndShade .checkbox + label img {
    transition: all .5s ease-in-out;
    transform: translateY(0);
}

.nd-shade-main .tooth-ndShade .img-select {
    width: 100%;
    height: auto;
}

/*.nd-shade-main .tooth-ndShade .img:hover img.img-unselect {
    opacity: 0;
}

.nd-shade-main .tooth-ndShade .img:hover img.img-select {
    transform: translateY(-8px);
    opacity: 1;
}*/

.nd-shade-main .tooth-ndShade .checkbox:checked + label img {
    transform: translateY(-8px);
}

.nd-shade-main.teeth-diagram-ndShade .shades-row .space {
    width: 14.5%;
}

.nd-shade-main .tooth-ndShade.ndShade5 .checkbox:checked + label img {
    width: 80PX;
}

.nd-shade-main .tooth-ndShade.ndShade10 .checkbox:checked + label img {
    width: 84PX;
}


.nd-shade-main .tooth-ndShade.ndShade9 .checkbox:checked + label img {
    width: 74PX;
}

.nd-shade-main .tooth-ndShade.ndShade1 {
    left: -6%;
    top: 0;
}

.nd-shade-main .tooth-ndShade.ndShade2 {
    left: -9%;
    top: -23px;
}

.nd-shade-main .tooth-ndShade.ndShade3 {
    left: -10%;
    width: 84px;
    top: -27px;
}

.nd-shade-main .tooth-ndShade.ndShade4 {
    left: -7%;
    width: 69px;
    top: -28px;
}

.nd-shade-main .tooth-ndShade.ndShade5 {
    width: 74px;
    left: -3%;
    top: -11px;
}

.nd-shade-main .tooth-ndShade.ndShade7 {
    width: 80px;
    left: -8%;
    top: -14px;
}

.nd-shade-main .tooth-ndShade.ndShade8 {
    width: 67px;
    left: -5%;
    top: -13px;
}

.nd-shade-main .tooth-ndShade.ndShade9 {
    width: 68px;
    left: -2%;
    top: -12px;
}

.nd-shade-main .tooth-ndShade.ndShade10 {
    width: 80px;
    top: -4px;
    left: 0%;
}

.nd-shade-main .tooth-ndShade.ndShade6 {
    left: -7%;
    top: -11px;
}

.body-dark .app-chat .app-chat-history {
    background-color: #333;
}

.body-dark .app-chat .app-chat-history {
    background-color: #333534 !important;
}

    .body-dark .app-chat.app-chat-history .chat-history-footer {
        background-color: #000 !important;
        box-shadow: none !important;
    }


    .body-dark .app-chat .app-chat-history .chat-history-body .chat-history .chat-message .chat-message-text {
        background-color: #202020 !important;
        box-shadow: none !important;
        color: #fff !important
    }

        .body-dark .app-chat .app-chat-history .chat-history li.chat-message.chat-message-right.newChatDesign .chat-message-text a,
        .body-dark .app-chat .app-chat-history .chat-history-body .chat-history .chat-message .chat-message-text a {
            color: #fff !important
        }

    .body-dark .app-chat .app-chat-history .chat-history li.chat-message.chat-message-right.newChatDesign .chat-message-text {
        background-color: #000 !important;
        box-shadow: none !important
    }

    .body-dark .app-chat .app-chat-history .chat-history-footer {
        background-color: #000 !important;
        box-shadow: none !important
    }

        .body-dark .app-chat .app-chat-history .chat-history-footer .bx-microphone:before,
        .body-dark .app-chat .app-chat-history .chat-history-footer .bx-camera:before,
        .body-dark .app-chat .app-chat-history .chat-history-footer .bx-paper-plane:before,
        .body-dark .app-chat .app-chat-history .chat-history-footer .bx-paperclip:before {
            color: #fff;
        }

.app-chat .app-chat-history .chat-history-body .chat-history .chat-message .info span {
    font-weight: 600;
    color: #000;
}

.body-dark .app-chat .app-chat-history .chat-history-body .chat-history .chat-message .info span {
    font-weight: 600;
    color: #fff;
}

.app-chat .app-chat-history .chat-history li.chat-message.chat-message-right.newChatDesign .info {
    text-align: end;
}

.doctor-dashboard * {
    color: #fff;
}

/*#addEventSidebar .flatpickr-calendar{
	width: 100% !important;
}
#addEventSidebar .flatpickr-rContainer,
#addEventSidebar .flatpickr-days,
#addEventSidebar .flatpickr-innerContainer {
    width: 100% !important;
}*/
.calendar-timeline.timeline .timeline-item {
    border-left: 0 !important;
    padding-left: 1.5rem !important;
}

    .calendar-timeline.timeline .timeline-item .timeline-point-wrapper {
        background: transparent !important;
    }

.award-carousel .bxs-chevron-left:before,
.award-carousel .bxs-chevron-right:before {
    font-size: 30px;
}

.award-carousel .carousel-indicators [data-bs-target] {
    background-color: #222;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    border-radius: 50%;
}

    .icon-box.md {
        width: 3rem;
        height: 3rem;
    }

.app-boxes-main h2 {
    color: RGBA(105, 108, 255, var(--bs-bg-opacity, 1)) !important
}

.charts-bar-main .card {
    height: 100%;
}

#expensesChart .apexcharts-canvas:first-child {
    display: none !important;
}

#profitChart .apexcharts-canvas:first-child,
#expensesChart .apexcharts-canvas:first-child {
    display: none !important;
}

.case-summary {
    position: relative;
}

.bar-code-img {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1;
    width: 190px;
}

.pdf-btns {
    margin: 0 0 10px;
    white-space: nowrap;
}

.bar-code-img .img > img {
    width: 100%;
}

.pdf-btns a {
    color: #5A5A5A;
    transition: all .5s ease;
}

    .pdf-btns a:hover {
        color: #000;
    }

.loader-div {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

    .loader-div.show {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }

th.sorting {
    width: 70px !important;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
    border-right-width: 1px !important;
}

table.table-bordered.dataTable tr:first-child th:first-child,
table.table-bordered.dataTable td:first-child {
    border-left-width: 1px !important;
}

.arrows-pagination {
    justify-content: end;
}

span.text-danger.field-validation-error,
span.text-danger.field-validation-valid {
    position: absolute;
    right: 0;
    bottom: -25px;
}

.appointment-table .table > thead {
    background: #272727
}

    .appointment-table .table > thead th {
        color: #D4BE6E
    }

    .appointment-table .table > thead th,
    .appointment-table .table > tbody td {
        padding: 1rem 1.25rem;
    }

.appointment-table .table > tbody td {
    color: #000;
}

.appointment-table div.dataTables_wrapper div.dataTables_paginate {
    padding: 0 20px 20px 0;
}

.dotsMenu.dropdown-toggle::after {
    display: none;
}

.dotsMenu.dropdown-toggle {
    background: transparent;
    border: 0;
}

    .dotsMenu.dropdown-toggle i {
        font-size: 1.5rem;
    }

.appointment-table select {
    color: #000 !important;
}

.appointment-table h6 {
    color: #000
}

.doctor-img {
    width: 160px;
}

    .doctor-img img {
        width: 100%;
    }

.about-doctor li {
    width: 100%;
}

    .about-doctor li .flex-fill {
        width: 50%;
    }

.dark-line {
    color: #bdbdbd !important
}

.ranks-holder {
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, #2B2B2B 100%);
}

    .ranks-holder .rank-box {
        min-height: 450px;
    }

        .ranks-holder .rank-box .img {
        }

            .ranks-holder .rank-box .img img {
                width: 100%;
                transform: rotate(90deg);
            }

        .ranks-holder .rank-box h2 {
            font-size: 7vw;
            color: #CDB184;
            font-weight: 900;
        }

.case-nav {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-bottom: 0;
}

    .case-nav ul {
        display: flex;
        padding: 0;
        grid-gap: 0vw 2vw;
        margin-bottom: 0;
    }

    .case-nav li {
        text-align: center;
        padding: 0;
        list-style-type: none;
        position: relative
    }

        .case-nav li a {
            text-align: center;
            padding: 0 0 10px;
            color: rgba(5, 5, 5, 1);
            transition: all .7s ease;
            font-size: 14px;
            display: block;
        }

        .case-nav li a::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: rgba(212, 190, 110, 1);
            transition: all .7s ease;
        }

        .case-nav li a.active:before,
        .case-nav li a:hover:before {
            width: 100%;
        }

        .case-nav li a.active,
        .case-nav li a:hover {
            color:rgba(212, 190, 110, 1)
        }

.card.gpsbg1 {
    background: #f5f5f5;
}

.card.gpsbg2 {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(207, 207, 206, 1)
}

.summary-infos .right {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-evenly;
}

.summary-infos .action-buttons {
    flex: 1;
    grid-gap: 30px 10%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 5%;
    justify-content: space-evenly;
    height: 100%;
}

    .summary-infos .action-buttons .btn-custom {
        background: rgba(212, 190, 110, 0.3);
        width: 100%;
        padding: 10px 0;
        justify-content: flex-start;
        padding-left: 15%;
        padding-right: 15%;
        transition: all .5s ease;
    }

        .summary-infos .action-buttons .btn-custom img {
            padding-right: 15px;
        }

        .summary-infos .action-buttons .btn-custom:hover {
            background: rgba(212, 190, 110, 0.6);
        }

.highlight {
    color: rgba(220, 187, 103, 1);
    font-weight: 500;
}

.section-title {
    font-weight: 600;
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 3% 4% 0;
}

.info-item {
    width: 25%;
    margin-bottom: 3%;
    position: relative;
    padding-left: 32px;
}

.info-item img {
    position: absolute;
    top: 5px;
    left: 0;
   
}

.info-item h6 {
    margin: 0 0 5px;
    font-weight: 500;
}

.info-item p {
    margin: 0;
    color: #6c757d;
}

.highlight-section {
    padding: 3% 5% 0 4%;
}

    .highlight-section .info-row {
        padding: 0;
    }

        .highlight-section .info-row .info-item {
            padding-left: 0;
            padding-right: 2%;
        }

    .highlight-section .head {
        display: flex;
    }

    .highlight-section .head {
        display: flex;
    }

        .highlight-section .head h5 {
            padding-bottom: 5px;
            border-bottom: 2px solid rgba(233, 200, 106, 1);
        }

    .highlight-section .info-item {
        margin-bottom: 3%;
        position: relative;
    }

.item-icons {
    display: flex;
    justify-content: space-between;
    grid-gap: 5px;
}

.highlight-section2 .info-row .info-item {
    padding-left: 0;
    padding-right: 0;
}

.info-row .info-item .inner {
    display: flex;
    justify-content: space-between;
}

.highlight-section2 hr {
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin: 0;
}

.highlight-section2 .info-row .info-item {
    padding-left: 0;
    padding-right: 3%;
}

.highlight-section2 .item-icons a {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: rgba(212, 212, 212, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-auto .info-item {
    width: auto;
}

.highlight-section2 .info-row.info-auto .info-item {
    padding-left: 0;
    padding-right: 5%;
}

.highlight-section .teeth-diagram,
.highlight-section2 .teeth-diagram {
    background: transparent;
}

.highlight-section .teeth-diagram, span.num.display-6,
.highlight-section2 .teeth-diagram, span.num.display-6 {
    font-weight: 400;
    font-size: 20px;
}

.note-container {
    position: relative;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.note-content {
    position: relative;
}

    .note-content p {
        padding-bottom: 0;
        border-bottom: 2px dotted rgba(153, 153, 153, 1);
    }

.edit-btn {
    background-color: rgba(212, 212, 212, 1);
    border: none;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .7s ease;
}

    .edit-btn:hover {
        background-color: #ccc;
    }

.note-content {
    padding: 0;
}

.note-container.highlight-section {
    padding: 0 4% 0 4%;
}

.print-container {
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
}

    .print-container .header {
        display: flex;
        justify-content: space-between;
        margin: 0 0 10px;
    }

        .print-container .header .left {
            flex: 1;
        }

    .print-container .head {
        display: flex;
        text-align: center;
    }

        .print-container .head h2,
        .print-container .head h3,
        .print-container .head h4,
        .print-container .head h5 {
            padding-bottom: 5px;
            border-bottom: 2px solid rgba(233, 200, 106, 1);
        }

    .print-container .header .details {
        display: flex;
        justify-content: space-between;
        width: 50%;
    }

    .print-container .gpsbg2 {
        background: rgba(245, 246, 246, 1);
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .print-container .info-row {
        padding: 0;
    }

.print-detail-qr {
    display: flex !important;
    flex-direction: row !important;
}

.print-container .gpsbg2 .info-item {
    width: 23%;
    margin-bottom: 3%;
    position: relative;
    padding-left: 32px;
}

    .print-container .gpsbg2 .info-item h6 {
        margin: 0 0 5px;
        font-weight: 500;
        white-space: nowrap;
    }

.print-select-teeth .info-row {
}

.print-select-teeth .info-item {
    padding-left: 0;
    width: auto;
    margin-bottom: 15px;
}

    .print-select-teeth .info-item:nth-child(1) {
        width: 40%;
    }

    .print-select-teeth .info-item:nth-child(2) {
        width: 40%;
    }

    .print-select-teeth .info-item:nth-child(3) {
        width: 20%;
    }

.print-div .note-header {
    display: flex;
    grid-gap: 20px
}

    .print-div .note-header p {
        flex: 1;
        border-bottom: 2px dotted rgba(153, 153, 153, 1);
        margin-bottom: 0;
    }

.print-div .note-container {
    padding: 30px 0 0;
    border-top: 3px solid rgba(245, 245, 245, 1);
}

.print-container .repair-notes-box .head {
    justify-content: start;
}

.previous-job {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

    .previous-job .bd-line {
        flex: 1;
        height: 2px;
        background: rgba(227, 176, 35, 1);
    }

.qr-code {
    width:135px;
}

.notification-wrapper {
    position: relative;
}


.notification-panel {
    overflow: hidden;
    padding: 0;
}

.notification-item {
    display: flex;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

.notification-item:last-child {
    border-bottom: none;
}

.user-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
}

.notification-content {
    flex-grow: 1;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
}

.notification-content p {
    color: #2e313a;
    width: 100%;
    margin-bottom: 5px;
}

.time {
    color: #a2a1b4;
}

.actions {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.browse-search {
    position: relative;
}

.browse-search .search-icon {
    position: absolute;
    width: auto;
    height: auto;
    top: 12px;
    right: 15px;
}

.customeCalendar-main .flatpickr-calendar {
    width: 100% !important;
    box-sizing: border-box;
}
.light-style .customeCalendar-main .flatpickr-calendar,
.light-style .customeCalendar-main .flatpickr-days {
    width: 100% !important;
}
.customeCalendar-main .flatpickr-rContainer {
    width: 100%;
}
.customeCalendar-main .dayContainer {
    max-width: 100%;
    width: 100%;
}
.customeCalendar-main .flatpickr-days {
    justify-content: space-between;
}
.customeCalendar-main .flatpickr-calendar.inline {
    left: 4px;
}

.event {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: #3d8eb9;
}

.event.busy {
    background: #f64747;
}

.p-album {
    position:relative;
    overflow:hidden;
    display:block;
}
.p-album .title{
    position: absolute;
    left:0;
    bottom:-100%;
    width:100%;
    background:rgba(0,0,0,.5);
    transition:all .5s ease;
    color:#fff;
    padding:15px;
}
.p-album:hover .title {
    bottom: 0;
}

.modalSwiper .img img {
    width:100%;
}
.modalSwiper .btn {
    z-index: 10;
    background: #fff !important;
}


.bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(#000 41%, rgba(0, 0, 0, 0.11) 95%, rgba(0, 0, 0, 0)) !important;
}

.ranks-holder .rank-box {
    min-height: 200px;
}
.ranks-holder .rank-box h2 {
    font-size: 4vw;
}

.case-summary {
    height: auto !important;
    overflow: visible !important;
}


@media print {
    body {
            background: none !important;
        }

        .container-p-y,
        .layout-page:before,
        .layout-page {
            padding-top: 0 !important;
        }

        .app-chat-mains,
        .content-header.first_style,
        .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before,
        .btn-prev,
        .btn-next,
        .btn-finish,
        .new-case-main,
        .pdf-btns a,
        #layout-menu,
        .top_btns,
        .navbar {
            display: none !important
        }

        .card {
            background-color: #dddacf !important;
            box-shadow: 0 !important;
        }

        @page {
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
            /*        font-size: 10px !important;*/
        }

        .print-container {
            padding: 0;
            width: 100%;
        }

        .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
            padding-top: 0 !important;
        }

        .print-container .gpsbg2 .info-item {
            width: 25%;
        }

        .print-container .gpsbg2 {
            background-color: #F5F6F6 !important;
            background: #F5F6F6 !important;
            border-color: #CFCFCE
        }

            .print-container .gpsbg2 .info-item h6 {
                white-space: normal;
            }

        .layout-navbar,
        .content-footer {
            display: none;
        }

        .print-container .gpsbg2 .info-item,
        .print-select-teeth .info-item {
            margin-bottom: 5px !important;
        }

        .mb-3,
        .mb-4 {
            margin-bottom: 5px !important;
        }

        .print-select-teeth {
            padding-top: 0 !important;
        }

        .highlight-section .teeth-diagram, span.num.display-6, .highlight-section2 .teeth-diagram, span.num.display-6 {
            font-size: 14px;
        }

        .container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
            padding-top: 5px !important;
        }

        h3, .h3 {
            font-size: 15px !important;
        }

        .tooth .box {
            height: 80px;
        }
        /*    h4, .h4,
    h5, .h5 {
        font-size: 12px !important;
    }*/
        p {
            font-size: 13px;
        }

        .repair-notes-box p,
        .detail-item p {
            margin: 0 !important;
        }

        .head h5 {
            font-size: 14px !important;
        }

        .previous-job h5,
        .note-header h4 {
            font-size: 12px !important;
        }

        .tooth .num {
            height: auto;
            line-height: 1;
        }
    }

    @media (min-width: 768px) {
        .tooth-row.upper .tooth .img:hover img {
            transform: translateY(-8px);
            opacity: 1;
        }

        .tooth-row.lower .tooth .img:hover img {
            transform: translateY(8px);
            opacity: 1;
        }

        .nd-shade-main .tooth-ndShade .img:hover img.img-unselect {
            opacity: 0;
        }

        .nd-shade-main .tooth-ndShade .img:hover img.img-select {
            transform: translateY(-8px);
            opacity: 1;
        }

        .nd-shade-main .tooth-ndShade.ndShade5 .img:hover img.img-select {
            width: 80PX;
        }

        .nd-shade-main .tooth-ndShade.ndShade10 .img:hover img.img-select {
            width: 84PX;
        }

        .nd-shade-main .tooth-ndShade.ndShade9 .img:hover img.img-select {
            width: 74PX;
        }


        .e-max-ceram .tooth-ndShade .img:hover img.img-unselect {
            opacity: 0;
        }

        .e-max-ceram .tooth-ndShade .img:hover img.img-select {
            transform: translateY(-8px);
            opacity: 1
        }

        .ad-shade-main .tooth-shade .img:hover img.img-unselect {
            opacity: 0;
        }

        .ad-shade-main .tooth-shade .img:hover img.img-select {
            transform: translateY(-8px);
            opacity: 1;
        }
    }