body {
    overflow: hidden;
    background: #FFF;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    height: 100%;
    color: #333;
    position: relative;
}

.app-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #434444;
    background-image: url(https://cdn.flexaligner.com/flexi/img/viewer-2/dark_back_pattern.png);
}

.app-wrapper.logo-none #window3d,
.app-wrapper.logo-none #window3d.light-style{
    background-image: none;
}

#window3d {
    background-color: #434444;
    background-image: url(https://cdn.flexaligner.com/flexi/img/viewer-2/dark_back_pattern.png);
    margin: 0;
    height: 100%;
    position: relative;
}

#window3d.editor {
    margin-left: 651px;
}

#window3d.light-style {
    background-color: #eaeaea;
    background-image: url(https://cdn.flexaligner.com/flexi/img/viewer-2/light_back_pattern.png);
}

#leftColumn {
    float: left;
    width: 660px;
    height: 100%;
    overflow: auto;
    z-index: 10;
    position: relative;
    background: #FFF;
    box-shadow: 15px 0 20px -5px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow-x: hidden;
}

#caseInfoPanel {
    box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.5);
}

#uploadPanel {
    box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.5);
    display: none;
}

#editorPanel {
    display: none;
    padding-left: 8px;
    font-size: 0;
}

#actionPanel {
    padding-top: 25px;
    display: none;
}
#editorPanelTwo{
    padding: 8px;
    margin-top: 15px;
    background: antiquewhite;
    border-top: 2px dashed grey;
}
#editorPanelThree{
    background-color: #dde4f8;
    padding: 8px;
    margin-top: 15px;
    border-top: 2px dashed grey;
}
#editorPanelFour{
    background-color: #ffe7df;
    padding: 8px;
    margin-top: 15px;
    border-top: 2px dashed grey;
}

.patient-info-block {
    padding: 20px 20px 25px 20px;
    margin: 0 0 10px 0;
    /*box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5);*/
}

.patient-info {
    line-height: 25px;
}

.upload-block {
    padding: 20px 20px 25px 20px;
    margin: 0 0 10px 0;

}

.ThreatmentPlanBlock {
    padding: 20px 20px 25px 20px;
}

.Header1 {
    font-size: 24px;
    margin: 0 0 10px 0
}

.Header2 {
    font-size: 14px;
    flex-grow: 1;
    border-radius: 4px;
    font-weight: bold;
}
.Header2.universal-header {
    padding: 8px 8px;
}
.set-list-title{
    width: 120px;
}

/*---------UPLOAD PANEL-----------------------*/
.upload-panel-upload-models-form {
    position: relative;
}

.upload-panel-error-model-form {
    position: relative;
}

.upload-panel-stop-preparing-btn, .upload-panel-stop-waiting-btn {
    padding: 10px;
    margin-top: 6px;
    font-size: 16px;
    display: none;
}

.upload-panel-status {
    margin: 10px 0;
}

/*.upload-panel-clock-value{*/
/*    color: #8e0013;*/
/*}*/
.upload-panel-prepare-progressbar,
.upload-panel-upload-progressbar {
    position: relative;
}

.progress-container {
    width: 500px;
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 3px;
    margin-top: 10px;
    position: relative;
}

.prepare-bar {
    background-color: #e24e34;
    width: 0%;
    height: 20px;
    border-radius: 3px;
    position: relative;
}

.upload-bar {
    background-color: #83e273;
    width: 0%;
    height: 20px;
    border-radius: 3px;
    position: relative;
}

.prepare-percent, .upload-percent {
    position: absolute;
    /*display:inline-block;*/
    top: 3px;
    left: 48%;
}

/*------------------Attachments----------------*/
.upper-attachments-teeth-container, .lower-attachments-teeth-container {
    font-size: 0;
}

.lower-attachments-teeth-container {
    margin-top: 16px;
}

.upper-attachments-teeth-container .tooth,
.lower-attachments-teeth-container .tooth {
    display: inline-block;
    margin: 0 2px;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: 1px solid #607D8B;
    line-height: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-family: Verdana;
}

.upper-attachments-teeth-container .tooth:hover,
.lower-attachments-teeth-container .tooth:hover {
    border-color: #000;
}

.upper-attachments-teeth-container .tooth.selected,
.lower-attachments-teeth-container .tooth.selected {
    background-color: #e18b00;
}

.upper-attachments-teeth-container .tooth.removed,
.lower-attachments-teeth-container .tooth.removed {
    background-color: #2e87ca;
    color: #ffffff;
}

.upper-attachments-teeth-container .tooth {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.lower-attachments-teeth-container .tooth {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.attachments-container {
    width: 540px;
    font-size: 0;
    position: relative;
    display: flex;

}

.attachments-container.c1 {
    margin-left: 15px;
}

.attachments-container.c2 {
    margin-left: -12px;
}

.attachments-item-container {
    width: 58px;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}

.attachments-container.c1 .attachments-item-container {
    padding-bottom: 4px;
}

.attachment-item {
    font-size: 11px;
    background-color: #ffcf98;
    color: #77450b;
    width: 46px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    margin: 0 auto;
    font-family: Verdana;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}

.attachment-item:hover {
    background-color: #f5c691;
}

.attachments-container.c2 .attachment-item {
    background-color: #ffc5a4;
    color: #77320a;
    margin-bottom: 0;
    margin-top: 4px;
}

.attachments-container.c2 .attachment-item:hover {
    background-color: #f5bc9c;
}

.attachment-item.pontik{
    background-color: #b095e9 !important;
    color: #ffffff !important;
}
.attachment-item.beam{
    background-color: #66cdc4 !important;
    color: #ffffff !important;
}


.attachment-item.active {
    box-shadow: 0 0 5px #9C27B0;
    font-weight: bold;
    background-color: #f27aa3 !important;
}


.attachments-container.c2 .attachments-palochka,
.attachments-container.c2 .attachments-palochka.show-palochka {
    background-color: #fff;
}

.attachments-item-container .attachment-item:first-child {
    margin-top: 10px;
}

.attachments-container.c1 .attachment-item {
    margin-bottom: 4px;
}

.attachments-palochka {
    width: 1px;
    margin-right: 1px;
    background-color: #fff;
    display: inline-block;
}

.attachments-palochka.show-palochka {
    background-color: #ffc5a4;
}

.lowers .attachments-item-container {
    justify-content: flex-start;
}

.lowers .attachments-item-container .attachment-item:first-child {
    margin-top: 0;
}

.lowers .attachments-container.c1 .attachments-item-container {
    padding-top: 8px;
}

#attachments-period {
    position: absolute;
    top: 20%;
    left: 10%;
    padding: 3px;
    background-color: #2f5256;
    font-size: 0;
    width: 480px;
    z-index: 100;
    border: 2px solid #9E9E9E;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    display: none;
}

#teeth-option-period {
    position: absolute;
    top: 20%;
    left: 10%;
    padding: 3px;
    background-color: #2f5256;
    font-size: 0;
    width: 480px;
    z-index: 100;
    border: 2px solid #9E9E9E;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    display: none;
}


.element-period-container{
    margin-bottom: 4px;
}
.period-cell {
    font-size: 14px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: inline-block;
    margin: 2px;
    text-align: center;
    line-height: 26px;
    background-color: #fff;
    border: 1px solid #333;
}

.period-cell.cell-over {
    background-color: #cde5c0;
}

.period-cell.cell-selected {
    background-color: #8ecd66;
}

.period-btn-cancel, .period-btn-append {
    padding: 5px;
    width: 237px;
    margin-bottom: 4px;
}

.period-btn-cancel {
    margin-right: 6px;
    background-color: #ffc5a4;
    border-color: #ec7c74;
}

.period-btn-append {
    background-color: #8ecd66;
    border-color: #8BC34A;
}

.period-btn-beam{
    background-color: #66cdc4;
    border-color: #5ab0a8;
}

.period-btn-pontik{
    background-color: #b095e9;
    border-color: #8c69c1;
}

#teeth-option-period .period-btn-cancel,
#teeth-option-period .period-btn-beam,
#teeth-option-period .period-btn-pontik{
    padding: 5px;
    width: 144px;
    display: inline-block;
    margin: 0 0 0 5px;
}

#teeth-option-period .current-tooth{
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 2px;
    background-color: #5c9ea6;
    color: #000;
    vertical-align: top;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
}


.set-block {
    background-color: #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
}
.set-block:last-of-type{
    margin-bottom: 0;
}

.set-block.grinding {
    background-color: #d2b1cc;
}

.set-block.pressure {
    background-color: #91b3d2;
}

.set-block.separation {
    background-color: #9cd69c;
}

.set-block.pontik {
    background-color: #a8e4ff;
}

.set-block.powerarm {
    background-color: #f6ddc3;
}

.set-block.dovetail {
    background-color: #f6b6cd;
}

.set-block.button-hook {
    background-color: #ecbf92;
}


.teeth-set {
    /*width: 473px;*/
    padding: 4px;
}

.editor-set {
    /*margin-bottom: 15px;*/
    max-width: 630px;
    padding: 2px;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.editor-set:hover{
    background-color: #eeeeee;
}
.editor-set-wrapper.opened .editor-set{
    width: 630px;
}

.set-options {
    height: 30px;
    width: 100px;
    position: absolute;
    left: -100px;
    top: 50px;
    /*padding: 0 0 0 10px;*/
    font-size: 14px;
}

.set-options-remove {
    cursor: pointer;
    position: absolute;
    left: 610px;
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 1000;
    font-size: 14px;
}

.editor-btn {
    font-size: 20px;
    padding: 1px 6px 1px 6px;
    margin: 2px 0 0 4px;
    cursor: pointer;
}

.attachmenttable {
    font-size: 15px;
    color: #666;
    text-align: center;
}

.attachmenttabletop {
    border-bottom: 1px solid #999
}

.attachmenttablebottom {
}

.attachmenttabletopmid {
    border-bottom: 1px solid #999;
    border-left: 1px solid #999
}

.attachmenttablebottommid {
    border-left: 1px solid #999
}

.attachmenttablenumber {
    background: #999;
    padding: 10px;
}

/*---------------------All Elastics------------------------*/
#elastics-block{
    padding: 0;
}
#elastics-block .upper-teeth-container,
#elastics-block .lower-teeth-container {
    font-size: 0;
    padding: 0;
}

#elastics-block .lower-teeth-container {
    margin-top: 0;
}

#elastics-block .tooth{
    display: inline-block;
    margin: 0 2px;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: 1px solid #607D8B;
    line-height: 24px;
    width: 24px;
    height: 25px;
    cursor: pointer;
    font-family: Verdana;
    transition-duration: 100ms;
}
#elastics-block .between{
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    border: 1px dashed #bebebe;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    cursor: pointer;
    transition-duration: 100ms;
}

#elastics-block .lower-teeth-container .between{
    vertical-align: top;
}

#elastics-block .tooth:hover{
    border-color: #000;
    background-color: #eaeaea;
}

#elastics-block .between:hover{
    border: 1px solid #4f4f51;
    background-color: #eaeaea;
}

#elastics-block .upper-teeth-container .tooth {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

#elastics-block .lower-teeth-container .tooth {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}


.elastics-block-teeth-item-container{
    width: 620px;
    font-size: 0;
    position: relative;
    display: flex;
    /*background-color: #0d94f2;*/
    left: -4px;
}
.elastics-block-teeth-item-container.upper{
    margin-bottom: 1px;
}
.elastics-block-teeth-item-container.lower{
    margin-top: 2px;
}

.elastics-block-between-item-container{
    width: 600px;
    font-size: 0;
    position: relative;
    display: flex;
    /*background-color: #e3f20d;*/
    left: 15px;
}
.elastics-block-between-item-container.upper{
    margin-top: 2px;
}
.elastics-block-between-item-container.lower{
    margin-top: 12px;
    margin-bottom: 2px;
}

.elastics-block-teeth-item-container .item-container{
    width: 36px;
    margin: 0 1px;
    min-height: 15px;
    /*background-color: #00c853;*/
    display: flex;
    flex-direction: column;
}

.elastics-block-between-item-container .item-container{
    width: 36px;
    margin: 0 1px;
    min-height: 15px;
    /*background-color: #ff64bd;*/
    display: flex;
    flex-direction: column;
}


.elastics-block-teeth-item-container .spacer{
    width: 8px;
}

.elastics-block-between-item-container .spacer{
    width: 4px;
}

.elastics-block-teeth-item-container .item-container .item,
.elastics-block-between-item-container .item-container .item
{
    padding: 2px 0;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 2px;
    background-color: #bab9b9;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: 100ms;
    display: flex;
    flex-direction: column;
}
.elastics-block-teeth-item-container.upper .item-container .item{
    flex-direction: column-reverse;
}

.elastics-block-teeth-item-container .item-container .item.selected,
.elastics-block-between-item-container .item-container .item.selected{
    -webkit-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
    box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
}

.elastics-block-teeth-item-container .item-container .item.current-stage,
.elastics-block-between-item-container .item-container .item.current-stage{
    -webkit-box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    -moz-box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9) ;
}

.elastics-block-teeth-item-container .item-container .item.selected.current-stage,
.elastics-block-between-item-container .item-container .item.selected.current-stage{
    -webkit-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset, 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    -moz-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset, 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset, 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
}


.elastics-block-teeth-item-container .item-container .item:hover,
.elastics-block-between-item-container .item-container .item:hover{
    top: -0.5px;
    left: -0.5px;
}

.elastics-block-teeth-item-container .item-container .item .title,
.elastics-block-teeth-item-container .item-container .item .period{
    text-align: center;
}

.elastics-block-teeth-item-container .item-container .item .title{
    font-size: 12px;
    /*font-width: bold;*/
}

.elastics-block-teeth-item-container .item-container .item.button-outer,
.elastics-block-teeth-item-container .item-container .item.pa-mesial,
.elastics-block-teeth-item-container .item-container .item.pa-distal,
.elastics-block-teeth-item-container .item-container .item.hook-mo,
.elastics-block-teeth-item-container .item-container .item.hook-do,
.elastics-block-teeth-item-container .item-container .item.hook-mvo,
.elastics-block-teeth-item-container .item-container .item.hook-dvo,
.elastics-block-between-item-container .item-container .outer .item{
    background-color: #ffc5a4;
    color: #3c3c3c
}

.elastics-block-teeth-item-container .item-container .item.button-inner,
.elastics-block-teeth-item-container .item-container .item.hook-mi,
.elastics-block-teeth-item-container .item-container .item.hook-di,
.elastics-block-teeth-item-container .item-container .item.hook-mvi,
.elastics-block-teeth-item-container .item-container .item.hook-dvi,
.elastics-block-between-item-container .item-container .inner .item{
    background-color: #b095e9;
}
/*--1--*/
.elastics-block-teeth-item-container .item-container .item.hook-mo.quarter-1 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mi.quarter-1 .title{
    text-align: right;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-do.quarter-1 .title,
.elastics-block-teeth-item-container .item-container .item.hook-di.quarter-1 .title{
    text-align: right;
    transform: scale(-1, 1);
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-mvo.quarter-1 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mvi.quarter-1 .title{
    text-align: right;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-dvo.quarter-1 .title,
.elastics-block-teeth-item-container .item-container .item.hook-dvi.quarter-1 .title{
    text-align: left;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
/*--2--*/
.elastics-block-teeth-item-container .item-container .item.hook-mo.quarter-2 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mi.quarter-2 .title{
    text-align: right;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
    transform: scale(-1, 1);
}
.elastics-block-teeth-item-container .item-container .item.hook-do.quarter-2 .title,
.elastics-block-teeth-item-container .item-container .item.hook-di.quarter-2 .title{
    text-align: right;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;

}
.elastics-block-teeth-item-container .item-container .item.hook-mvo.quarter-2 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mvi.quarter-2 .title{
    text-align: left;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-dvo.quarter-2 .title,
.elastics-block-teeth-item-container .item-container .item.hook-dvi.quarter-2 .title{
    text-align: right;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
/*--3--*/
.elastics-block-teeth-item-container .item-container .item.hook-mo.quarter-3 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mi.quarter-3 .title{
    text-align: left;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-do.quarter-3 .title,
.elastics-block-teeth-item-container .item-container .item.hook-di.quarter-3 .title{
    text-align: left;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
    transform: scale(-1, 1);
}
.elastics-block-teeth-item-container .item-container .item.hook-mvo.quarter-3 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mvi.quarter-3 .title{
    text-align: left;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-dvo.quarter-3 .title,
.elastics-block-teeth-item-container .item-container .item.hook-dvi.quarter-3 .title{
    text-align: right;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
/*--4--*/
.elastics-block-teeth-item-container .item-container .item.hook-mo.quarter-4 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mi.quarter-4 .title{
    text-align: left;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;
    transform: scale(-1, 1);
}
.elastics-block-teeth-item-container .item-container .item.hook-do.quarter-4 .title,
.elastics-block-teeth-item-container .item-container .item.hook-di.quarter-4 .title{
    text-align: left;
    padding: 0 7px;
    font-size: 20px;
    line-height: 16px;

}
.elastics-block-teeth-item-container .item-container .item.hook-mvo.quarter-4 .title,
.elastics-block-teeth-item-container .item-container .item.hook-mvi.quarter-4 .title{
    text-align: right;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.hook-dvo.quarter-4 .title,
.elastics-block-teeth-item-container .item-container .item.hook-dvi.quarter-4 .title{
    text-align: left;
    padding: 0 2px;
    font-size: 16px;
    line-height: 16px;
}

/*--1--*/
.elastics-block-teeth-item-container .item-container .item.pa-mesial.quarter-1 .title{
    font-size: 18px;
    line-height: 16px;
}
.elastics-block-teeth-item-container .item-container .item.pa-distal.quarter-1 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(-1, 1);
}
/*--2--*/
.elastics-block-teeth-item-container .item-container .item.pa-mesial.quarter-2 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(-1, 1);
}
.elastics-block-teeth-item-container .item-container .item.pa-distal.quarter-2 .title{
    font-size: 18px;
    line-height: 16px;
}
/*--3--*/
.elastics-block-teeth-item-container .item-container .item.pa-mesial.quarter-3 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(-1, -1);
}
.elastics-block-teeth-item-container .item-container .item.pa-distal.quarter-3 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(1, -1);
}
/*--4--*/
.elastics-block-teeth-item-container .item-container .item.pa-mesial.quarter-4 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(1, -1);
}
.elastics-block-teeth-item-container .item-container .item.pa-distal.quarter-4 .title{
    font-size: 18px;
    line-height: 16px;
    transform: scale(-1, -1);
}





.miniscrew-izc,
.miniscrew-bs
{
    width: 100%;
    height: 24px;
    /*position: relative;*/
    margin: 6px 0;
}

.miniscrew-izc .segment-1,
.miniscrew-izc .segment-2,
.miniscrew-bs .segment-3,
.miniscrew-bs .segment-4
{
    width: 140px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #b8b8b8;
    border-radius: 4px;
    border: 1px dashed #b8b8b8;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: bottom;
}

.miniscrew-izc .segment-2,
.miniscrew-bs .segment-3{
    margin-left: 325px;
}

.miniscrew-izc .segment-1.active,
.miniscrew-izc .segment-2.active,
.miniscrew-bs .segment-3.active,
.miniscrew-bs .segment-4.active{
    color: #3c3c3c;
    font-weight: bold;
    border: 1px solid #3c3c3c;
    background-color: #ffc5a4;
}

.miniscrew-izc .content,
.miniscrew-bs .content{
    display: inline-block;
    width: 110px;
    height: 24px;
    vertical-align: top;
}
.miniscrew-izc .segment-1:hover,
.miniscrew-izc .segment-2:hover,
.miniscrew-bs .segment-3:hover,
.miniscrew-bs .segment-4:hover {
    color: #6d6d6d;
    border: 1px dashed #6d6d6d;
}
.miniscrew-izc .segment-1.active:hover,
.miniscrew-izc .segment-2.active:hover,
.miniscrew-bs .segment-3.active:hover,
.miniscrew-bs .segment-4.active:hover {
    color: #3c3c3c;
    font-weight: bold;
    border: 1px solid #3c3c3c;
    background-color: #ffc5a4;
}

.miniscrew-izc .segment-1 .point,
.miniscrew-izc .segment-2 .point,
.miniscrew-bs .segment-3 .point,
.miniscrew-bs .segment-4 .point{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #3c3c3c;
    background-color: #c7c7c7;
    margin: 3px;
    display: none;
    transition: 50ms;
    cursor: pointer;
}
.miniscrew-izc .segment-1 .point:hover,
.miniscrew-izc .segment-2 .point:hover,
.miniscrew-bs .segment-3 .point:hover,
.miniscrew-bs .segment-4 .point:hover{
    background-color: #a0a0a0;
}
.miniscrew-izc .point.selected,
.miniscrew-bs .point.selected{
    -webkit-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
    box-shadow: 0px 0px 2px 2px rgba(150, 0, 0, 0.5) inset;
}

.miniscrew-izc .segment-1.active.current-stage,
.miniscrew-izc .segment-2.active.current-stage,
.miniscrew-bs .segment-3.active.current-stage,
.miniscrew-bs .segment-4.active.current-stage{
    -webkit-box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    -moz-box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
    box-shadow: 0px 0px 4px 0px rgba(1, 0, 255, 0.9);
}

.miniscrew-izc .segment-1.active .point,
.miniscrew-izc .segment-2.active .point,
.miniscrew-bs .segment-3.active .point,
.miniscrew-bs .segment-4.active .point
{
    display: inline-block;
}

#elastics-block .elastic-line{
    background-color: rgba(167, 0, 58, 0.4);
    position: absolute; height: 2px;
    transform-origin: 0 0;
    transition: 50ms;
}

#elastics-block .elastic-line.hover{
    background-color: rgba(255, 0, 89, 0.6);
    position: absolute;
    height: 3px;
    transform-origin: 0 0;
}
#elastics-block .elastic-line.current-stage{
    background-color: rgba(255, 0, 89, 0.7);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    -moz-box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    height: 3px;
}

#elastics-block .elastic-line.hover.current-stage{
    background-color: rgba(255, 0, 89, 0.6);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    -moz-box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    box-shadow: 0px 0px 4px 0px rgba(206, 0, 255, 0.6);
    height: 4px;
}


#elastic-period {
    position: absolute;
    top: 20%;
    left: 10%;
    padding: 3px;
    background-color: #2f5256;
    font-size: 0;
    width: 480px;
    z-index: 100;
    border: 2px solid #9E9E9E;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    display: none;
}

#elastic-period .elastic-head{
    display: flex;

}
#elastic-period .elastic-head .elastic-title{
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    width: 130px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    background-color: #4b7d83;
    margin-right: 4px;
    border-radius: 2px;
}
#elastic-period .period-btn-cancel{
    flex-grow: 1;
    margin-right: 0;
}

#elastic-period .element-row{
    display: flex;
    margin-bottom: 2px;
}
#elastic-period .element-row .element-row-title{
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    width: 130px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    background-color: #4b7d83;
    margin-right: 4px;
    border-radius: 2px;
}
#elastic-period .element-row .elements-row-button{
    flex-grow: 1;
    display: flex;
}
#elastic-period .element-row .elements-row-button button{
    font-size: 13px;
    flex-grow: 1;
}

#elastic-period .element-row .elements-row-button.inner-hooks button{
    background-color: #e7beec;
}

button.color-orange{
    background-color: #ffc5a4;
    cursor: pointer;
}
button.color-purple{
    background-color: #b095e9;
    cursor: pointer;
}

.all-elastics-list{
    padding: 6px 6px 0 6px;
    font-size: 14px;
    border: 1px dashed #98a9da;
    border-radius: 3px;
    margin-top: 10px;
}
.all-elastics-list .item-container{
    margin-bottom: 5px;
    transition: 50ms;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
}
.all-elastics-list .item-container:hover{
    background-color: #b3bcd7;
}
.all-elastics-list .item-container .row{
    display: flex;
    padding: 1px;
}
.all-elastics-list .item-container .row .title{
    background-color: #c7c7c7;
    flex-grow: 1;
    border-radius: 2px;
    margin: 0 4px;
    line-height: 22px;
    padding: 0 5px;
    border: 1px solid #999;
}
.all-elastics-list .item-container .row .period{
    background-color: #c7c7c7;
    padding: 0 5px;
    border-radius: 2px;
    line-height: 22px;
    font-weight: bold;
    width: 80px;
    border: 1px solid #999;
}
.all-elastics-list .item-container .row .period.current-stage{
    background-color: #bcbcff;
}
.all-elastics-list .item-container .row .period .value{
    display: inline-block;
    cursor: pointer;
    transition: 0.1s;
    padding: 1px 5px;
    border-radius: 2px;
}
.all-elastics-list .item-container .row .period .value:hover{
    background-color: rgba(0,0,0,0.1);
}

.all-elastics-list .item-container .row .remove{
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: 100ms;
}
.all-elastics-list .item-container .row .remove:hover{
    background-color: #c7c7c7;
}
/*---------------------------------------------------------*/




.TopItem {
    font-size: 15px;
    background: #FFF;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 4px;
    margin: 2px;
    cursor: default;
}

.TopItemUnsel {
    font-size: 15px;
    background: #FFF;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 4px;
    margin: 2px;
    cursor: pointer;
}

.TopItemSel {
    font-size: 15px;
    background: #F80;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #FFF;
    padding: 4px;
    margin: 2px;
    cursor: pointer;
}

.BottomItem {
    font-size: 15px;
    background: #FFF;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 4px;
    margin: 2px;
    cursor: default;
}

.BottomItemUnsel {
    font-size: 15px;
    background: #FFF;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 4px;
    margin: 2px;
    cursor: pointer;
}

.BottomItemSel {
    font-size: 15px;
    background: #F80;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #FFF;
    padding: 4px;
    margin: 2px;
    cursor: pointer;
}

.inputrangein {
    width: 36px;
    font-size: 17px;
    padding: 0;
    /*padding: 2px;*/
}

.inputrangeout {
    width: 36px;
    font-size: 17px;
    padding: 0;
    /*padding: 2px;*/
}

.inputcomment {
    width: 250px;
    padding: 2px;
}

.set-list{
    margin-left: 4px;
}

.teeth-set .teeth-set-item{
    font-size: 15px;
    background: #FFF;
    padding: 4px;
    margin: 2px;
    cursor: pointer;
    color: #666;
}
.teeth-set .teeth-set-item.selected{
    background: #2e87ca;
    color: #FFF;
}
.teeth-set .upper .teeth-set-item{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.teeth-set .lower .teeth-set-item{
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}


.teeth-container {
    font-size: 0;
}

.teeth-container.lower {
    margin-top: 10px;
}

.teeth-container .tooth {
    display: inline-block;
    margin: 0 2px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-family: Verdana;
}

.teeth-container.upper .tooth {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.teeth-container.lower .tooth {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.separationset {
    padding: 5px;
    width: 492px;
}

.aims-container {
    font-size: 0;

}

.aims-container .aim-item {
    display: inline-block;
    height: 40px;
    width: 28px;
    margin-right: 1px;
    margin-left: 1px;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: top;
    font-family: Verdana;
    cursor: pointer;
}

.aims-container .aim-item:hover {
    background-color: rgba(50, 50, 50, 0.1);
}

.aims-container.upper .aim-item {
    background-image: url('https://cdn.flexaligner.com/flexi/img/i/aim24w2.png')
}

.aims-container.lower .aim-item {
    background-image: url('https://cdn.flexaligner.com/flexi/img/i/aim24w.png')
}

.aims-container.upper .aim-item.process {
    background-image: url('https://cdn.flexaligner.com/flexi/img/i/aim24a2.png')
}

.aims-container.lower .aim-item.process {
    background-image: url('https://cdn.flexaligner.com/flexi/img/i/aim24a.png')
}

.aims-container .aim-item.filled {
    background-image: none;
    font-size: 11px;
}

.set-block.pontik .aims-container .aim-item.filled {
    background-image: none;
    font-size: 9px;
}

.aims-container .aim-item .aim-value {
    display: none;
    vertical-align: bottom;
    text-align: center;
    border-radius: 2px;
    background-color: #d0f7c3;
    padding: 2px;
    margin-top: 10px;
}

.aims-container .aim-item.filled .aim-value {
    display: block;
}

.aims-container .aim-item.filled .aim-value.selected {
    background-color: #ffdca6;
}

.teeth-container {
    font-size: 0;
}

.teeth-container.lower {
    margin-top: 10px;
}

.teeth-container .tooth {
    display: inline-block;
    margin: 0 2px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 24px;
    width: 26px;
    height: 24px;
    background-color: #fff;
    cursor: pointer;
    font-family: Verdana;
}

.teeth-container.upper .tooth {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.teeth-container.lower .tooth {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.set-block .spacer1 {
    display: inline-block;
    width: 14px;
}

.set-block .spacer2 {
    display: inline-block;
    width: 6px;
}

.set-block .spacer3 {
    display: inline-block;
    width: 12px;
}

.separation-value-selector {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 200;
    width: 50px;
    font-size: 16px;
    padding: 3px;
    background-color: #f80;
    border-radius: 3px;
    font-family: Verdana;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.separation-value-selector .value {
    width: 100%;
    text-align: center;
    background-color: #95d295;
    color: #134800;
    height: 25px;
    line-height: 25px;
    margin-bottom: 1px;
    transition: 100ms;
    font-weight: bold;
    cursor: pointer;
}

.separation-value-selector .value.remove {
    background-color: #f6ddc3;
    color: #9e4f0c;
}

.separation-value-selector .value.remove:hover {
    background-color: #dac1a8;
}

.separation-value-selector .value:hover {
    background-color: #74ad74;
}

.editor-x-angle-panel {
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
}

.editor-x-angle-panel input[type=number] {
    margin-bottom: 10px;
    margin-left: 340px;
    width: 60px;
    margin-right: 5px;
}

.editor-x-angle-panel button {
    margin-left: 40px;
}

.editor-x-slider-input {
    width: 600px;
}

.comment-tips {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 570px;
    width: 750px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    padding: 4px;
    height: 95%;
    overflow: auto;
    box-shadow: 0 0 10px #fff;
    display: none;
    transition: 100ms;
}

.comment-tips.active {
    display: block;
}

.comment-tips .items .comment-tip-item:nth-child(odd) {
    background: #e0fbdd;
}

.comment-tips .items .comment-tip-item:nth-child(even) {
    background: #dce8e1;
}

.comment-tips .comment-tip-item {
    padding: 5px;
    border: 2px solid #fff;
    cursor: pointer;
    border-radius: 2px;
    font-size: 14px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    display: flex;
}

.comment-tips .comment-tip-item:hover {
    border-color: #666;
}

.comment-tips .comment-tip-name {
    font-weight: bold;
    font-size: 16px;
}

.comment-tip-item-lang {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    text-align: left;
    border: 1px solid #bebebe;
    padding: 2px 4px;
    margin-right: 1px;
    display: none;
}

.comment-tips.ru .comment-tip-item-lang.ru {
    display: block;
}

.comment-tips.en .comment-tip-item-lang.en {
    display: block;
}

.comment-tips.it .comment-tip-item-lang.it {
    display: block;
}

.comment-tips.de .comment-tip-item-lang.de {
    display: block;
}

.comment-tips.es .comment-tip-item-lang.es {
    display: block;
}

.comment-tips-list-header {
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 2px;
    font-size: 14px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    display: none;
    background-color: #f5f5f5;
}

.comment-tips.ru.en .comment-tips-list-header,
.comment-tips.ru.it .comment-tips-list-header,
.comment-tips.ru.de .comment-tips-list-header,
.comment-tips.ru.es .comment-tips-list-header,
.comment-tips.en.it .comment-tips-list-header,
.comment-tips.en.de .comment-tips-list-header,
.comment-tips.en.es .comment-tips-list-header,
.comment-tips.it.de .comment-tips-list-header,
.comment-tips.it.es .comment-tips-list-header,
.comment-tips.de.es .comment-tips-list-header {
    display: flex;
}

.comment-tips-list-header-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    text-align: left;
    border: 1px solid #bebebe;
    padding: 2px 4px;
    margin-right: 1px;
    display: none;
}

.comment-tips.ru .comment-tips-list-header-item.ru {
    display: block;
}

.comment-tips.en .comment-tips-list-header-item.en {
    display: block;
}

.comment-tips.it .comment-tips-list-header-item.it {
    display: block;
}

.comment-tips.de .comment-tips-list-header-item.de {
    display: block;
}

.comment-tips.es .comment-tips-list-header-item.es {
    display: block;
}

.comment-tips-toolbar {
    display: flex;
}

.comment-tips-toolbar-item {
    width: 50px;
    padding: 2px 5px;
    margin-right: 46px;
}

.comment-tips-toolbar-item.case {
    border: 1px solid #000;
}


.editor-specials-panel {
    padding: 15px;
    font-size: 16px;
}

.editor-hypercorrection-title {
    font-size: 18px;
    margin: 0 0 5px 0;
}

.editor-hypercorrection-btn {
    margin-left: 100px;
}

.editor-hypercorrection-no {
    font-style: italic;
    display: none;
}

.editor-hypercorrection-yes {
    margin-top: 5px;
    display: none;
}

.editor-hypercorrection-title-yes {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
}

.editor-hypercorrection-value {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
}

.editor-bite-jump-informer {
    text-decoration: underline;
    color: #E91E63;
    display: none;
    margin: 25px 0 0 0;
}
.editor-method-selector{
    width: 200px;
}

.editor-method-selector-lamp{
    border-radius: 3px;
    height: 20px;
    width: 20px;
    border: 0;
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
}
.editor-method-selector-lamp.one-one{
    background-color: #0a90db;
}
.editor-method-selector-lamp.one-three{
    background-color: #e37998;
}

.editor-set-wrapper{
    display: inline-block;
}
.editor-set-wrapper.opened{
    margin: 12px 0 12px 0;
}




#super-update-panel{
    position: absolute;
    right: 10px;
    top: 10px;
}

.editor-super-update{
    font-size: 12px;
    background-color: #00c853;
    padding: 8px;
    border-radius: 4px;
}

.editor-super-update-button{
    padding:7px;
    font-size:12px;
    margin: 4px;
    width: 150px;
    cursor: pointer;
}
.editor-super-update-description-no{
    font-weight: bold;
    color: #000000;
}
.editor-super-update-description-yes{
    font-weight: bold;
    color: #000000;
}

.editor-super-update.updated{

}


.editor-super-update.not-updated{
    width: 160px;
    background-color: #ef89a5;
}
.editor-super-update.already-new{

}

.editor-super-update.updated .editor-super-update-description-no,
.editor-super-update.updated .editor-super-update-button.check
{
    display: none;
}

.editor-super-update.not-updated .editor-super-update-description-yes,
.editor-super-update.not-updated .editor-super-update-button.uncheck
{
    display: none;
}

.editor-super-update.already-new .editor-super-update-description-no,
.editor-super-update.already-new .editor-super-update-button.check,
.editor-super-update.already-new .editor-super-update-description-yes,
.editor-super-update.already-new .editor-super-update-button.uncheck
{
    display: none;
}



.elastic-set{
    padding: 2px;
    margin-bottom: 15px;
}
.elastic-set .functions-title{
    display: flex;
    margin-top: 2px;
}
.elastic-set .points-title{
    display: flex;
    margin-top: 6px;
}

.elastic-set .append-function-button{

}
.elastic-set .function-row {
    display: flex;
}

.elastic-set .element-row {
    display: flex;
}

.elastic-set .element-icon {
    background-color: #fff;
    position: relative;
    top: -2px;
    margin-left: 2px;
    border: 1px solid #111;
    border-radius: 3px;
}
.elastic-set .element-position-input{
    width: 120px;
}

.elastic-set .block{
    padding: 10px;
    background-color: #99cadf;
    border-radius: 10px;
    margin-top: 8px;
    position: relative;
    margin-left: 120px;
}
.elastic-set .block .remove-btn{
    position: absolute;
    right: 15px;
    top: 30px;
    z-index: 100;
    background-color: #ffa8a8;
    border-radius: 4px;
    padding: 0 5px;
}
.elastic-set .block .functions-append-button,
.elastic-set .block .points-append-button{
    margin-left: 6px;
    background-color: #e0fad3;
    border-radius: 4px;
    font-size: 15px;
    text-align: center;
    height: 20px;
    width: 20px;
    padding: 0;
}

.elastic-set .block .element-row-delete-btn,
.elastic-set .block .function-row-delete-btn{
    background-color: #ffd2d2;
    border-radius: 4px;
    margin-left: 6px;
    font-size: 14px;
    text-align: center;
    height: 20px;
    width: 20px;
    padding: 0;
}
.elastic-set .block .loop-panel{
    position: absolute;
    top: 30px;
    right: 70px;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 3px;
    background-color: #77adc3;
}

.elastic-set .block .element-row,
.elastic-set .block .function-row{
    margin-top: 2px;
}

.elastic-set .block select{
    padding: 1px;
    font-size: 13px;
}

/******************* VIEWER GUI **************************/
/******************* VIEWER GUI **************************/
/******************* VIEWER GUI **************************/


.viewer-tool-button {
    display: block;
    height: 44px;
    width: 44px;
    position: relative;
    margin: 5px;
    cursor: pointer;
    overflow: visible;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/*.viewer-tool-button:hover{*/
/*border-color: rgba(0, 172, 236, 1)*/
/*}*/
.viewer-tool-button .lower-layer {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    /*background-size: cover;*/
    background-repeat: no-repeat;
    background-position: -2px -2px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
}

.viewer-tool-button .upper-layer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    /*background-size: cover;*/
    background-repeat: no-repeat;
    transition: 200ms;
    opacity: 0;
    background-color: #3399FF;
    background-position: -2px -2px;
    border-radius: 50%;
}

.viewer-tool-button .upper-layer:hover {
    opacity: 0.1;
}

.viewer-tool-button.pressed .upper-layer {
    opacity: 1;
}

.viewer-tool-button.pressed .upper-layer:hover {
    opacity: 0.9;
}

.viewer-tool-button.pressed .lower-layer {
    opacity: 0;
}

.viewer-tool-button .title {
    position: absolute;
    bottom: -16px;
    color: #3399FF;
    text-align: center;
    width: 100px;
    left: -26px;
    font-family: cursive;
    font-size: 12px;
    transition: 200ms;
    opacity: 0;
}

.viewer-tool-button:hover .title {
    opacity: 1;
}


.viewer-tool-button.small,
.viewer-tool-button.small .upper-layer,
.viewer-tool-button.small .lower-layer {
    height: 34px;
    width: 34px;
    background-position: -2px -2px;
}


/*************************************/
.viewer-tool-button.upper-arch-hide .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/upper.png");
}

.viewer-tool-button.upper-arch-hide .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/upper_active.png");
}

.viewer-tool-button.lower-arch-hide .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/lower.png");
}

.viewer-tool-button.lower-arch-hide .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/lower_active.png");
}

.viewer-tool-button.separations .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/separations.png");
}

.viewer-tool-button.separations .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/separations_active.png");
}

.viewer-tool-button.viewpoint-front .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/front.png");
}

.viewer-tool-button.viewpoint-front .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/front_active.png");
}

.viewer-tool-button.viewpoint-left .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/left.png");
}

.viewer-tool-button.viewpoint-left .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/left_active.png");
}

.viewer-tool-button.viewpoint-back .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/back.png");
}

.viewer-tool-button.viewpoint-back .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/back_active.png");
}

.viewer-tool-button.viewpoint-right .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/right.png");
}

.viewer-tool-button.viewpoint-right .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/right_active.png");
}

.viewer-tool-button.viewpoint-ocl-upper .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/ocl_upper.png");
}

.viewer-tool-button.viewpoint-ocl-upper .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/ocl_upper_active.png");
}

.viewer-tool-button.viewpoint-ocl-lower .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/ocl_lower.png");
}

.viewer-tool-button.viewpoint-ocl-lower .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/ocl_lower_active.png");
}

.viewer-tool-button.viewpoint-say-a .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/oclussion.png");
}

.viewer-tool-button.viewpoint-say-a .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/oclussion_active.png");
}

.viewer-tool-button.attachments .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/attachments.png");
}

.viewer-tool-button.attachments .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/attachments_active.png");
}

.viewer-tool-button.pontiks .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/pontic.png");
}

.viewer-tool-button.pontiks .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/pontic_active.png");
}

.viewer-tool-button.occlusion .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/diagram.png");
}

.viewer-tool-button.occlusion .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/diagram_active.png");
}

.viewer-tool-button.compare .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/compare.png");
}

.viewer-tool-button.compare .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/compare_active.png");
}

.viewer-tool-button.grid .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/grid.png");
}

.viewer-tool-button.grid .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/grid_active.png");
}

.viewer-tool-button.measure .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/linear.png");
}

.viewer-tool-button.measure .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/linear_active.png");
}

.viewer-tool-button.dark-light .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/light.png");
}

.viewer-tool-button.dark-light .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/light_active.png");
}

.viewer-tool-button.share .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/share.png");
}

.viewer-tool-button.share .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/share_active.png");
}

.viewer-tool-button.chat .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/chat.png");
}

.viewer-tool-button.chat .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/chat_active.png");
}

.viewer-tool-button.coordinates .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/coordinates.png");
}
.viewer-tool-button.coordinates .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/coordinates_active.png");
}

.viewer-tool-button.trackball-controll .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/view.png");
}
.viewer-tool-button.trackball-controll .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/view_active.png");
}

.viewer-tool-button.save .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/save.png");
}
.viewer-tool-button.save .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/save_active.png");
}
.viewer-tool-button.save{
    margin-top: 50px;
}

.viewer-tool-button.edit .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/edit.png");
}
.viewer-tool-button.edit .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/edit_active.png");
}
/*.viewer-tool-button.chat::before{*/
/*    content: "";*/
/*    width: 32px;*/
/*    height: 32px;*/
/*    position: absolute;*/
/*    top: -4px;*/
/*    z-index: 1000;*/
/*    left: -14px;*/
/*    background-image: url(https://cdn.flexaligner.com/flexi/img/icons32/new.png);*/
/*}*/

.viewer-tool-button.download .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/download.png");
}

.viewer-tool-button.download .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/download_active.png");
}

.viewer-tool-button.player-first .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/to_first.png");
}

.viewer-tool-button.player-first .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/to_first_active.png");
}

.viewer-tool-button.player-prev .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/prev.png");
}

.viewer-tool-button.player-prev .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/prev_active.png");
}

.viewer-tool-button.player-play .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/play.png");
}

.viewer-tool-button.player-play .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/play_active.png");
}

.viewer-tool-button.player-pause .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/pause.png");
}

.viewer-tool-button.player-pause .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/pause_active.png");
}

.viewer-tool-button.player-next .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/next.png");
}

.viewer-tool-button.player-next .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/next_active.png");
}

.viewer-tool-button.player-last .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/to_last.png");
}

.viewer-tool-button.player-last .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/to_last_active.png");
}

.viewer-tool-button.mobile-views .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/view.png");
}

.viewer-tool-button.mobile-views .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/view_active.png");
}

.viewer-tool-button.mobile-tools .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/menu.png");
}

.viewer-tool-button.mobile-tools .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/menu_active.png");
}

.viewer-tool-button.mobile-plan .lower-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/text.png");
}

.viewer-tool-button.mobile-plan .upper-layer {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/text_active.png");
}
/*************************************/

.viewer-tool-moving-button{
    display: block;
    height: 54px;
    width: 54px;
    position: relative;
    margin: 5px;
    cursor: pointer;
    overflow: visible;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    transition: 200ms;
    background-repeat: no-repeat;
    background-position: center;
}
.viewer-tool-moving-button:hover{
    background-color: #E2ECF6;
}

.viewer-tool-moving-button.move-left{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_left.png");
}
.viewer-tool-moving-button.move-right{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_right.png");
}
.viewer-tool-moving-button.move-up{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_up.png");
}
.viewer-tool-moving-button.move-down{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_down.png");
}
.viewer-tool-moving-button.move-back{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_back.png");
}
.viewer-tool-moving-button.move-forward{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/arrow_front.png");
}

.viewer-tool-moving-button.rotate-x{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_hor_left.png");
}
.viewer-tool-moving-button.rotate-x.negate{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_hor_right.png");
}

.viewer-tool-moving-button.rotate-z{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_left.png");
}
.viewer-tool-moving-button.rotate-z.negate{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_right.png");
}

.viewer-tool-moving-button.rotate-y{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_vert_left.png");
}
.viewer-tool-moving-button.rotate-y.negate{
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/rotate_vert_right.png");
}

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


#upper-toolbar {
    width: 100%;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 15px;
    display: flex;
    justify-content: space-evenly;
}

.toolbar-hor-container {
    display: flex;
    justify-content: flex-start;
}

.toolbar-vert-container {
    flex: 1;
    width: 100%
}

#right-toolbar {
    position: absolute;
    right: 15px;
    top: 100px;
    height: 40%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    align-content: stretch;
}

.stage-slider {
    /*display: flex;*/
    /*justify-content: center;*/
    width: 460px;
    overflow: visible;
    position: relative;
}

.stage-slider .timeline {
    width: 100%;
    height: 8px;
    position: relative;
}

.stage-slider .timeline.lower {
    margin-top: 3px;
}

.stage-slider .substrate {
    background-color: rgba(80, 80, 80, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.stage-slider .progress-bar {
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 20;
    height: 6px;;
    width: 1px;
    /*background: url(https://cdn.flexaligner.com/flexi/img/i/gradient3.png) 0 0 no-repeat;*/
    background-color: #3399FF;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.stage-slider .timeline-items-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    z-index: 30;
    display: flex;
    justify-content: start;
}

.stage-slider .timeline-item {
    width: 20px;
    height: 100%;
    position: relative;
    /*display: inline-block;*/
    /*border-right: 1px solid #ccc;*/
}
.stage-slider .timeline-item:before{
    content : "";
    position: absolute;
    right    : -1px;
    top: 0;
    height  : 100%;
    width: 1px;
    background-color: #ccc;
}

.stage-slider .timeline-item:nth-child(1) {
    /*border-left: 1px solid #ccc;*/
}

.stage-slider .timeline-item.simulation {
    background-color: rgba(0, 142, 255, 0.32);
}

.stage-slider .timeline-item.bitejump {
    background-color: #ff880052;
}

.stage-slider .timeline-item.hyper {
    background-color: rgba(241, 0, 255, 0.32);
}

.stage-slider .timeline-item.hyper.first {
    background: linear-gradient(90deg, rgba(241, 0, 255, 0.05) 0%, rgba(241, 0, 255, 0.32) 100%);
}

.input-timeline {
    height: 50px;
    width: 500px;
    position: relative;
    left: -20px;
    top: 2px;
}

input[type="range"].input-timeline {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    /*width: 100%;*/
    height: 22px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none; /* no focus outline */
}

input[type="range"].input-timeline::-moz-range-track {
    border: inherit;
    background: transparent;
}

input[type="range"].input-timeline::-ms-track {
    border: inherit;
    color: transparent; /* don't drawn vertical reference line */
    background: transparent;
}

input[type="range"].input-timeline::-ms-fill-lower,
input[type="range"].input-timeline::-ms-fill-upper {
    background: transparent;
}

input[type="range"].input-timeline::-ms-tooltip {
    display: none;
}

/* thumb */

input[type="range"].input-timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type="range"].input-timeline::-moz-range-thumb {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type="range"].input-timeline::-ms-thumb {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type=range].input-timeline:hover::-webkit-slider-thumb {
    border-bottom: 20px solid #dfe4f4;
}

/* thumb */

input[type="range"].input-timeline.compare::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    border-bottom: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ec7c0c;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type="range"].input-timeline.compare::-moz-range-thumb {
    width: 0;
    height: 0;
    border-bottom: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ec7c0c;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type="range"].input-timeline.compare::-ms-thumb {
    width: 0;
    height: 0;
    border-bottom: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ec7c0c;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
}

input[type=range].input-timeline.compare:hover::-webkit-slider-thumb {
    border-top: 20px solid #d96d0c;
}

.input-timeline.compare {
    position: absolute;
    top: -23px;
    left: -20px;
}

.upper-stage-count, .lower-stage-count {
    display: block;
    position: absolute;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.71);
    left: 0;
}

.light-style .upper-stage-count,
.light-style .lower-stage-count {
    color: rgba(0, 0, 0, 0.71);
}

.upper-stage-count {
    top: -14px;
}

.lower-stage-count {
    top: 26px;
}

#bottom-toolbar {
    position: absolute;
    z-index: 1000;
    width: 100%;
    bottom: 10px;
    display: flex;
    justify-content: center;
}

.stage-indicator {
    position: relative;
    top: -8px;
    left: 4px;
    width: 30px;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    text-align: center;
    height: 36px;
    overflow: visible;
}

.stage-indicator .common-stage-indicator {
    line-height: 40px;
    font-size: 26px;
}

.light-style .stage-indicator {
    color: rgba(0, 0, 0, 0.71);
}

.viewer-player {
    display: flex;
    justify-content: start;
    position: relative;
    left: -24px;
    height: 30px;
    top: -16px;
}

.ShareLinkPanel {
    padding: 13px 10px 10px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(119, 125, 132, 1);
    border: 1px solid #333333;
    color: #ffffff;
    position: absolute;
    z-index: 100;
    right: 100px;
    top: 180px;
    width: 320px;
    height: 120px;
    transition: 0.3s;
    display: none;
}

.share-link {
    margin-top: 15px;
}

.share-link a {
    color: #fbcea1;
    word-break: break-all;
}

.close-share-panel {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: -4px;
    width: 20px;
    height: 20px;
    color: #fbcea1;
    font-size: 20px;
    padding: 3px;
    z-index: 1000;
}

.close-share-panel:hover {
    font-weight: bold;
}

.OcclusionGradient {
    position: absolute;
    right: 90px;
    top: 90px;
    width: 15px;
    height: 300px;
    background: linear-gradient(to bottom, #0000ff 0%, #00ff00 50%, #ff0000 100%);
    z-index: 20000;
    border-radius: 10px;
    display: none;
}

.OcclusionGradient.show {
    display: block;
}

.okl050 {
    position: absolute;
    top: 0;
    right: 25px;
    text-align: right;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 2px;
    color: #333;
    white-space: nowrap;
    font-size: 12px;
}

.okl025 {
    position: absolute;
    top: 50%;
    margin: -25px 0 0 0;
    right: 25px;
    text-align: right;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 2px;
    color: #333;
    white-space: nowrap;
    font-size: 12px;
}

.okl000 {
    position: absolute;
    bottom: 0;
    margin: -25px 0 0 0;
    right: 25px;
    text-align: right;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 2px;
    color: #333;
    white-space: nowrap;
    font-size: 12px;
}

.remove-measures-btn {
    display: none;
    position: absolute;
    height: 26px;
    width: 26px;
    left: -30px;
    top: 13px;
    z-index: 10;
    border-radius: 13px;
    background-color: #ffffff;
    background-image: url("https://cdn.flexaligner.com/flexi/img/icons16/Delete.png");
    background-position: 5px 5px;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.remove-measures-btn:hover {
    opacity: 1;
}

.remove-measures-btn.show {
    display: block;
}


.description-panel {
    position: absolute;
    left: 30px;
    top: 100px;
    bottom: 150px;
    width: 300px;
    padding: 5px;
    background: rgba(119, 125, 132, 0.5);
    border: 1px solid #333333;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-weight: normal;
    transition: 0.3s;
}

.description-panel.hidden {
    width: 0;
}

.light-style .description-panel {
    background-color: rgba(119, 125, 132, 0.93);
}

.description-container {
    overflow: auto;
    height: 97%;
    padding: 5px;
}

.description-panel.hidden .description-container {
    display: none;
}

.description-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(226, 226, 226, 0.62);
    background-color: #F5F5F5;
}

.description-container::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.description-container::-webkit-scrollbar-thumb {
    background-color: #aac7e2;
    border: 1px solid #3399FF;
    /*border: 1px solid #2e87ca;*/
}

.description-panel-trigger {
    position: absolute;
    top: 50%;
    right: -27px;
    margin: -26px 0 0 0;
    cursor: pointer;
    width: 27px;
    height: 52px;
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/side4.png");
}

.description-panel.hidden .description-panel-trigger {
    background-image: url("https://cdn.flexaligner.com/flexi/img/viewer-2/side3.png");
}

.plan-obj-title {
    font-size: 16px;
    font-weight: 500;
}

.plan-obj-empty {
    font-size: 15px;
    color: #fbcea1;
}

.plan-title-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 6px;
}

.plan-title-row-key {
    font-size: 15px;
    padding-right: 3px;
}

.plan-title-row-space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f8;
}

.plan-title-row-value {
    /*flex-basis: 100px;*/
    font-size: 14px;
    font-weight: bold;
    color: #fbcea1;
}

.plan-line-separator {
    border-bottom: 1px solid rgba(119, 125, 132, 0.5);
    /*padding: 7px 0;*/
    margin: 8px 0;
}

.plan-stage-block {
    margin-top: 10px;
}

.plan-comment-block {
    font-size: 14px;
    font-style: italic;
    margin-top: 14px;
    color: #fbcea1;
}

.plan-subtitle {
    font-size: 14px;
    font-style: italic;
    margin-top: 4px;
    margin-bottom: 6px;
    color: #fbcea1;
}

.plan-stage-block-title {
    font-size: 14px;
    font-style: italic;
    text-decoration: underline;
    margin-bottom: 4px;
}

.plan-stage-block-setup, .plan-stage-block-change, .plan-stage-block-remove {
    display: inline-block;
    font-size: 14px;
}

.plan-stage-block-teeths {
    display: inline;
    font-size: 14px;
    color: #fbcea1;
}

.plan-att-kid-note {
    display: inline;
    font-size: 13px;
    color: #fbcea1;
}

.plan-separation-item {
    display: flex;
    align-items: flex-end;
    width: 160px;
}

.plan-separation-key {
    font-size: 14px;
}

.plan-separation-space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f8;
}

.plan-separation-value {
    font-size: 14px;
    color: #fbcea1;
}

/*--------------LEFT PANEL-----------------*/
/*--------------LEFT PANEL-----------------*/
/*--------------LEFT PANEL-----------------*/
.viewer-left-panel {
    position: absolute;
    letter-spacing: 0.03em;
    left: 6px;
    top: 66px;
    bottom: 66px;
    width: 310px;
    padding: 5px;
    transition: 0.2s;
    z-index: 100;
}

.viewer-left-panel.collapsed {
    width: 0;
}

.viewer-left-panel .trigger-container {
    position: absolute;
    top: 0;
    right: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.viewer-left-panel.scans .trigger-container{
    display: block;
}

.viewer-left-panel .trigger {
    position: absolute;
    width: 18px;
    height: 48px;
    border-radius: 3px;
    background-color: rgba(84, 84, 84, 0.9);
    background-image: url(https://cdn.flexaligner.com/flexi/img/icons16/expand4.png);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    transition: 100ms;
    cursor: pointer;
}
.viewer-left-panel.scans .trigger{
    display: block;
    margin-top: 15px;
    height: 90px;
}

.viewer-left-panel .trigger:hover {
    opacity: 1;
}

.viewer-left-panel.collapsed .trigger {
    /*background-position: 1px 16px;*/
    background-position: center;
    background-image: url(https://cdn.flexaligner.com/flexi/img/icons16/expand3.png);
    height: 200px;
    opacity: 0.9;
}

.viewer-left-panel.collapsed .trigger:hover {
    opacity: 1;
}

.viewer-left-panel .wrapper {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.viewer-left-panel.collapsed .wrapper {
    display: none;
}

.viewer-left-panel .wrapper .info-block {
    position: relative;
    padding: 10px;
    background: rgba(84, 84, 84, 0.6);
    border: 1px solid #595959;
    color: #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: 3px;
}

.viewer-left-panel .wrapper > div:first-child {
    margin-top: 0;
}

/*--------------CASE TITLE-----------------*/
/*--------------CASE TITLE-----------------*/
/*--------------CASE TITLE-----------------*/

.viewer-case-title {
}

.viewer-case-title .row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 7px;
}

.viewer-case-title .row:last-child {
    margin-bottom: 2px;
}

.viewer-case-title .key {
    font-size: 12px;
    padding-right: 3px;
}

.viewer-case-title .space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f838;
}

.viewer-case-title .value {
    font-size: 12px;
    color: #fbcea1;
}

/*--------------DESCRIPTION-----------------*/
/*--------------DESCRIPTION-----------------*/
/*--------------DESCRIPTION-----------------*/

.viewer-orthocheck-description {
    flex: 1;
    overflow: auto;
}

.viewer-orthocheck-description::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(226, 226, 226, 0.62);
    background-color: #F5F5F5;
}

.viewer-orthocheck-description::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.viewer-orthocheck-description::-webkit-scrollbar-thumb {
    background-color: #aac7e2;
    border: 1px solid #3399FF;
}

.viewer-orthocheck-description .row {
    display: flex;
    /*align-items: flex-end;*/
    /*margin-bottom: 7px;*/
    margin-top: 6px;
}

.viewer-orthocheck-description .row:last-child {
    /*margin-bottom: 2px;*/
}

.viewer-orthocheck-description .key {
    font-size: 12px;
    padding-right: 3px;
    min-width: 84px;

}

.sub-key-1 {
    color: #fbcea1;
    font-style: italic;
    font-size: 11px;
}

.sub-key-2 {
    color: #ffffff;
    font-style: italic;
    font-size: 12px;
}

.viewer-orthocheck-description .space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f854;
    margin-top: 12px;
    margin-right: 5px;
    min-width: 10px;

}

.viewer-orthocheck-description .value {
    font-size: 12px;
    color: #fbcea1;
    position: relative;
    text-align: right;
}

.viewer-orthocheck-description .obj-title-row {
    display: flex;
    align-items: flex-end;
}
.viewer-orthocheck-description .elastic-loop{
    position: absolute;
    z-index: 10;
    width: 8px;
    height: 94%;
    top: 3%;
    left: -15px;
    border-radius: 3px;
    border: 1px solid #fbcea1;
}

.viewer-orthocheck-description .obj-title {
    font-size: 12px;
    font-weight: bold;
}

.viewer-orthocheck-description .obj-title-space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f838;
}

.viewer-orthocheck-description .obj-empty {
    font-size: 10px;
    color: #fbcea1;
    font-style: italic;
    font-weight: normal;
    /*min-width: 100px;*/
}

.viewer-orthocheck-description .comment-block {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 10px;
    color: #fbcea1;
}

.viewer-orthocheck-description .line-separator {
    /*border-bottom: 1px solid rgba(152, 152, 152, 0.5);*/
    /*margin: 8px 0 8px 0;*/
    height: 15px;
}

.viewer-orthocheck-description .stage-block {
    margin-top: 6px;
}

.viewer-orthocheck-description .subtitle {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 6px;
    color: #fbcea1;
}

.viewer-orthocheck-description .stage-block-title {
    font-size: 11px;
    font-style: italic;
    margin-bottom: 6px;
    margin-top: 2px;
    color: #fbcea1;
}

.viewer-orthocheck-description .stage-block-setup,
.viewer-orthocheck-description .stage-block-change,
.viewer-orthocheck-description .stage-block-remove {
    display: inline-block;
    font-size: 12px;
}

.viewer-orthocheck-description .padding-block {
    padding-left: 16px
}

.viewer-orthocheck-description .stage-block-teeths {
    display: inline;
    font-size: 12px;
    color: #fbcea1;
}

.viewer-orthocheck-description .att-kid-note {
    display: inline;
    font-size: 12px;
    color: #fbcea1;
}

.viewer-orthocheck-description .separation-item {
    display: flex;
    align-items: flex-end;
    margin-top: 6px;
    padding-left: 20px;
}

.viewer-orthocheck-description .separation-key {
    font-size: 12px;
}

.viewer-orthocheck-description .separation-space {
    flex-grow: 1;
    height: 1px;
    border-bottom: 1px dotted #f8f8f838;
}

.viewer-orthocheck-description .separation-value {
    font-size: 12px;
    color: #fbcea1;
}

/*---------------- ORTHOCHECK BROWSER ---------------------*/
/*---------------- ORTHOCHECK BROWSER ---------------------*/
/*---------------- ORTHOCHECK BROWSER ---------------------*/

.viewer-orthocheck-browser {
    font-size: 12px;
}

.viewer-left-panel .wrapper .info-block.actual-flow {
}

.viewer-left-panel .wrapper .info-block.no-actual-flow {
}

.viewer-orthocheck-browser .flow-trigger {
    height: 18px;
    width: 18px;
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background-image: url(https://cdn.flexaligner.com/flexi/img/icons16/expand1.png);
    background-position: center;
    background-repeat: no-repeat;
    transition: 200ms;
    cursor: pointer;
}

.viewer-orthocheck-browser .collapsed .flow-trigger {
    background-image: url(https://cdn.flexaligner.com/flexi/img/icons16/expand.png);
}

.viewer-orthocheck-browser .flow-trigger:hover {
    background-color: rgba(84, 84, 84, 0.6);
}

.viewer-orthocheck-browser .flow-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.viewer-orthocheck-browser .flow-title .in-process {
    display: none;
    font-style: italic;
    font-size: 10px;
    margin-left: 8px;
    color: #fbcea1;
    font-weight: normal;
}

.viewer-orthocheck-browser .actual-flow .flow-title .in-process {
    display: inline;
}

.viewer-orthocheck-browser .flow-orthocheck-list {

}

.viewer-orthocheck-browser .info-block .status-flag {
    position: absolute;
    height: 34px;
    width: 3px;
    top: 2px;
    right: -4px;
    border-radius: 0 4px 4px 0;
    background-color: #68bf59;
    display: none;
}

.viewer-orthocheck-browser .info-block .status-flag.approve {
    display: block;
}

.viewer-orthocheck-browser .info-block .status-flag.final {
    background-color: #d83de2;
    display: block;
}

.viewer-orthocheck-browser .info-block {
    max-height: 500px;
    transition: max-height 0.7s ease-in;
}

.viewer-orthocheck-browser .info-block.collapsed {
    max-height: 34px;
}

.viewer-orthocheck-browser .orthocheck-row-title-final-icon {
    background-color: #d83de2;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    display: inline-block;
}

.viewer-orthocheck-browser .orthocheck-row {
    /*margin-top: 6px;*/
    padding: 0 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    border-radius: 3px;
    transition: 100ms;

}

.viewer-orthocheck-browser a {
    text-decoration: none;
}

.viewer-orthocheck-browser .orthocheck-row.link {
    cursor: pointer;
}

.viewer-orthocheck-browser .orthocheck-row.link:hover {
    background-color: rgba(10, 110, 189, 0.2);
}

.viewer-orthocheck-browser .orthocheck-row.current {

}

.viewer-orthocheck-browser .info-block.collapsed .orthocheck-row {
    display: none;
}

.viewer-orthocheck-browser .info-block.collapsed .orthocheck-row.current {
    display: flex;
    cursor: auto;
}

.viewer-orthocheck-browser .orthocheck-row.current .orthocheck-row-title {
    /*background-color: rgba(0, 154, 236, 0.48);*/
    color: #fbcea1;
    font-weight: bold;
    text-decoration: underline;
    text-underline-position: under;
}

/*.viewer-orthocheck-browser .orthocheck-row.current:hover{*/
/*    background-color: #3399ff9c;*/
/*}*/
.viewer-orthocheck-browser .orthocheck-row-title {
    flex-grow: 1;
    /*color: #fbcea1;*/
    color: #bcbcbc;
    text-decoration: none;
    padding: 3px 5px;
    border-radius: 3px;
}

.viewer-orthocheck-browser .orthocheck-row-title-number {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    text-decoration: underline;
}

.viewer-orthocheck-browser .orthocheck-row-count-block {
    /*width: 110px;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    align-content: stretch;
}

.viewer-orthocheck-browser .orthocheck-row-arch {
    /*width: 62px;*/
    text-align: right;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    align-content: stretch;
    border-radius: 3px;
    padding: 2px 4px;
    margin-left: 12px;
}

.viewer-orthocheck-browser .orthocheck-row-arch.approved {
    /*background-color: rgb(162, 103, 102);*/
    background-color: rgb(58, 151, 72);
}

.viewer-orthocheck-browser .orthocheck-row-arch .key {
    text-decoration: none;
    min-width: 18px;
    color: #ffffff;
}

.viewer-orthocheck-browser .orthocheck-row-arch .value {
    width: 20px;
    color: #fbcea1;
    text-decoration: none;
}

.viewer-orthocheck-browser .orthocheck-row-count-block.empty .orthocheck-row-arch {
    background-color: #cccccc26;
}

/*---------------ACTION PANEL----------------------*/
/*---------------ACTION PANEL----------------------*/
/*---------------ACTION PANEL----------------------*/

.viewer-action-panel {
    position: absolute;
    z-index: 100;
    bottom: 100px;
    right: 20px;
    background: rgba(84, 84, 84, 0.6);
    border: 1px solid #595959;
    color: #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 270px;
    letter-spacing: 0.03em;
    display: none;
}

.viewer-action-panel .wrapper {
    padding: 10px;
}

.viewer-action-panel .action-title {
    color: #fbcea1;
    font-size: 12px;
    margin-bottom: 8px;
}

.action-title-category {
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: bold;
}

.viewer-action-panel .buttons-container {
    display: flex;
}

.viewer-action-panel .button {
    border: none;
    color: white;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    width: 120px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    transition: 0.2s;
    cursor: pointer;
}

.viewer-action-panel .button.approve {
    background-color: #4CAF50;
}

.viewer-action-panel .button.approve:hover {
    background-color: #4ca450;
}

.viewer-action-panel .button.decline {
    background-color: #d26241;
}

.viewer-action-panel .button.decline:hover {
    background-color: #c76140;
}

.viewer-action-panel .button.decline-final {
    background-color: #d26241;
}

.viewer-action-panel .button.decline-final:hover {
    background-color: #c76140;
}

.viewer-action-panel .button.approve-final {
    background-color: #bb5fc8;
}

.viewer-action-panel .button.approve-final:hover {
    background-color: #9e56ab;
}

.viewer-action-panel .button-space {
    width: 10px;
    height: 1px;
}

.viewer-action-panel .approve-panel {
    display: none;
}

.viewer-action-panel .final-panel {
    display: none;
}

.viewer-action-panel.approve,
.viewer-action-panel.final {
    display: block;
}

.viewer-action-panel.approve .approve-panel,
.viewer-action-panel.final .final-panel {
    display: block;
}



/*---------------DIALOG----------------------*/
/*---------------DIALOG----------------------*/
/*---------------DIALOG----------------------*/

.viewer-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.03em;
    transition: 200ms;
}

.viewer-dialog.active {
    display: block;
}

.viewer-dialog .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.viewer-dialog .dialog {
    background: #595959;
    border: 1px solid #595959;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    max-width: 350px;
    display: none;
}

.viewer-dialog .dialog.active {
    display: block;
}

.viewer-dialog .title {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 8px;
    max-width: 300px;
}

.viewer-dialog .message {
    color: #fbcea1;
    font-size: 13px;
    max-width: 300px;
}

.viewer-dialog .buttons-container {
    display: flex;
    /*max-width: 300px;*/
}

.viewer-dialog .button {
    border: none;
    color: white;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 15px;
    /*max-width: 150px;*/
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    transition: 0.2s;
    cursor: pointer;
    flex-grow: 1;
}

.viewer-dialog .button.approve {
    background-color: #4CAF50;
    font-size: 11px;
    color: #071e02;
    display: flex;
    width: 110px;
    flex-direction: column;
    justify-content: center;
}

.viewer-dialog .button.approve:hover {
    background-color: #4d9c4e;
}

.viewer-dialog .button.approve2 {
    background-color: #8dccc6;
    font-size: 11px;
    color: #021417;
    display: flex;
    width: 110px;
    flex-direction: column;
    justify-content: center;
}

.viewer-dialog .button.approve2:hover {
    background-color: #699993;
}

.viewer-dialog .button.decline {
    background-color: #d26241;
}

.viewer-dialog .button.decline:hover {
    background-color: #bc5e41;
}

.viewer-dialog .button.cancel {
    background-color: #2e87ca;
}

.viewer-dialog .button.cancel:hover {
    background-color: #2e73b2;
}

.viewer-dialog .button.simple-approve {
    background-color: #4CAF50;
}

.viewer-dialog .button.simple-approve:hover {
    background-color: #4d9c4e;
}

.viewer-dialog .button-space {
    width: 12px;
    height: 1px;
}

.viewer-dialog .message {
    margin-bottom: 8px;
}

.viewer-dialog textarea {
    height: 80px;
    width: 294px;
    background-color: #eaeaea;
    resize: none;
    margin: 8px 0;
}

.viewer-dialog .notice-start{
    color: #eccecc;
    font-size: 12px;
    padding-left: 7px;
    /*text-align: justify;*/
    width: 250px;
}

.viewer-dialog .notice-no-start{
    color: #8dccc6;
    font-size: 12px;
    /*text-align: justify;*/
    width: 250px;
    padding-left: 7px;
}

/*//----------------------------------------*/
/*//-----------------CAUTIONS-----------------------*/
/*//----------------------------------------*/
.final-position-caution {
    width: 100%;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    align-content: stretch;
    position: absolute;
    left: 0;
    bottom: 70px;
}

.final-position-caution div {
    background-color: rgba(187, 95, 200, 0.81);
    border-radius: 2px;
    color: #fff;
    text-align: center;
    display: inline-block;
    padding: 3px 6px 2px 6px;
}

.clinic-attention {
    position: absolute;
    bottom: 5px;
    color: #a2a2a2;
    font-size: 10px;
    width: 200px;
    left: 5px;
}

/*---------------LIGHT STYLE----------------*/
/*---------------LIGHT STYLE----------------*/
/*---------------LIGHT STYLE----------------*/

.light-style .viewer-left-panel .wrapper .info-block {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: #59595973;
    color: #111111;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.25);
}

.light-style .viewer-orthocheck-browser .orthocheck-row-arch .value,
.light-style .viewer-orthocheck-browser .orthocheck-row.current .orthocheck-row-title,
.light-style .viewer-orthocheck-browser .flow-title .in-process,
.light-style .viewer-orthocheck-description .separation-value,
.light-style .viewer-orthocheck-description .att-kid-note,
.light-style .viewer-orthocheck-description .stage-block-teeths,
.light-style .viewer-orthocheck-description .stage-block-title,
.light-style .viewer-orthocheck-description .subtitle,
.light-style .viewer-orthocheck-description .comment-block,
.light-style .viewer-orthocheck-description .obj-empty,
.light-style .viewer-orthocheck-description .value,
.light-style .viewer-orthocheck-description .sub-key-1,
.light-style .viewer-case-title .value {
    color: #2e87ca;
}

.light-style .viewer-orthocheck-description .sub-key-2 {
    color: #111111;
}

.light-style .viewer-left-panel .viewer-orthocheck-browser .orthocheck-row-arch .value,
.light-style .viewer-left-panel .viewer-orthocheck-browser .orthocheck-row-arch .key {
    color: #000000;
}

.light-style .viewer-case-title .space,
.light-style .viewer-orthocheck-description .separation-space,
.light-style .viewer-orthocheck-description .obj-title-space {
    border-color: #11111136;
}

.light-style .viewer-tool-button {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.7);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.7);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.7);
}


.light-style .viewer-orthocheck-browser .flow-trigger {
    background-color: rgba(84, 84, 84, 0.75);
    opacity: 0.8;
}

.light-style .viewer-orthocheck-browser .flow-trigger:hover {
    opacity: 1;
}

.light-style .viewer-left-panel .trigger {
    background-color: rgba(84, 84, 84, 0.75);
}

.light-style .viewer-orthocheck-browser .orthocheck-row-title {
    color: #7d7d7d;
}

.light-style.viewer-orthocheck-browser .orthocheck-row-count-block.empty .orthocheck-row-arch {
    background-color: rgba(110, 110, 110, 0.15);
}

.light-style .viewer-orthocheck-browser .orthocheck-row-arch.approved {
    /*background-color: rgb(216, 138, 135);*/
    background-color: rgb(105, 206, 120);

}

/*----------- MOBILE DESCRIPTION------------------*/
/*----------- MOBILE DESCRIPTION------------------*/
/*----------- MOBILE DESCRIPTION------------------*/
.viewer-orthocheck-description.mobile {
    position: absolute;
    right: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(119, 125, 132, 1);
    color: #ffffff;
    font-weight: normal;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    z-index: 1000;
}

.viewer-orthocheck-description.mobile.active {
    right: 0;
}

.viewer-orthocheck-description.mobile .wrapper {
    overflow: auto;
    height: 85%;
    padding: 15px;
}

.viewer-orthocheck-description.mobile .wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(226, 226, 226, 0.62);
    background-color: #F5F5F5;
}

.viewer-orthocheck-description.mobile .wrapper::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.viewer-orthocheck-description.mobile .wrapper::-webkit-scrollbar-thumb {
    background-color: #aac7e2;
    border: 1px solid #2e87ca;
}

.viewer-orthocheck-description.mobile .trigger-close {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid #fff;
    text-align: center;
    padding-top: 15px;
    background-color: #5e5f61;
}


/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/

#mobile-upper-left-toolbar {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

#mobile-upper-right-toolbar {
    display: none;
    position: absolute;
    z-index: 1000;
    right: 5px;
    top: 10px;
}

.mobile-menu {
    /*display: none;*/
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    z-index: 1000;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
    overflow: hidden;
    z-index: 100000;
    /*background-color: #f1f1f1;*/
}

.mobile-menu.active {
    height: 100%;

}

.mobile-menu-header {
    line-height: 56px;
    background-color: #fff;
    border-bottom: 2px solid #3399FF;
    cursor: pointer;
}

.mobile-menu-trigger {
    width: 48px;
    height: 48px;
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    position: relative;
    top: 5px;
    /*left: 5px;*/
}

.mobile-menu-description {
    display: inline-block;
    vertical-align: top;
    color: #3399FF;
    font-size: 1.4em;
}

.mobile-menu-item {
    line-height: 50px;
    background-color: #fff;
    cursor: pointer;
    padding: 1px 0 1px 10px;
    border-bottom: 1px solid #3399FF;
}

.mobile-menu-item:hover {
    background-color: #fff;
}

.mobile-menu-item.active {
    background-color: #3399FF;
    border-bottom: 1px solid #fff;
}

.mobile-menu-item-icon {
    width: 48px;
    height: 48px;
    /*margin: 5px 5px 5px 15px;*/
    display: inline-block;
    vertical-align: top;
}

.mobile-menu-item-description {
    display: inline-block;
    vertical-align: middle;
    color: #3399FF;
    font-size: 1.1em;
    width: 164px;
    line-height: 18px;
}

.mobile-menu-item.active .mobile-menu-item-description {
    color: #ffffff;
}

.mobile-menu-separator {
    border-top: 3px solid #dae8f3;
    border-bottom: 1px solid #72a0c9;
}

.mobile-menu-item-checkbox {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    margin-left: 4px;
    margin-top: 2px;
    background-image: url('https://cdn.flexaligner.com/flexi/img/icons24/checkbox2.png');
}

.mobile-menu-item-checkbox.checked {
    background-position-x: 24px;
}

.mobile-menu.views .mobile-menu-trigger {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/view.png');
    /*left: 20px;*/
    left: 5px;
}

.mobile-menu.tools .mobile-menu-trigger {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/menu.png');
    position: absolute;
    /*left: none;*/
    right: 5px;
}

.mobile-menu.tools .mobile-menu-description {
    margin-left: 48px;
}

.mobile-menu-item-icon.front-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/front.png');
}

.mobile-menu-item-icon.left-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/left.png');
}

.mobile-menu-item-icon.right-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/right.png');
}

.mobile-menu-item-icon.back-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/back.png');
}

.mobile-menu-item-icon.ocl-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/oclussion.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.ocl-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/oclussion_active.png');
}

.mobile-menu-item-icon.upper-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/upper.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.upper-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/upper_active.png');
}

.mobile-menu-item-icon.lower-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/lower.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.lower-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/lower_active.png');
}

.mobile-menu-item-icon.attachments-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/attachments.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.attachments-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/attachments_active.png');
}

.mobile-menu-item-icon.pontic-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/pontic.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.pontic-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/pontic_active.png');
}

.mobile-menu-item-icon.sep-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/separations.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.sep-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/separations_active.png');
}

.mobile-menu-item-icon.okl-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/diagram.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.okl-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/diagram.png');
}

.mobile-menu-item-icon.grid-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/grid.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.grid-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/grid_active.png');
}

.mobile-menu-item-icon.sun-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/light.png');
}

.mobile-menu-item.active .mobile-menu-item-icon.sun-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/light_active.png');
}

.mobile-menu-item-icon.coordinates-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/coordinates.png');
}
.mobile-menu-item.active .mobile-menu-item-icon.coordinates-icon {
    background-image: url('https://cdn.flexaligner.com/flexi/img/viewer-2/coordinates_active.png');
}

.description-panel-mobile {
    position: absolute;
    right: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(119, 125, 132, 1);
    color: #ffffff;
    font-weight: normal;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    z-index: 1000;
}

.description-panel-mobile.active {
    right: 0;
}

.description-panel-mobile .description-container {
    overflow: auto;
    height: 85%;
    padding: 15px;
}

.description-container-mobile::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(226, 226, 226, 0.62);
    background-color: #F5F5F5;
}

.description-container-mobile::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.description-container-mobile::-webkit-scrollbar-thumb {
    background-color: #aac7e2;
    border: 1px solid #2e87ca;
}

.description-mobile-close {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid #fff;
    text-align: center;
    padding-top: 15px;
    background-color: #5e5f61;
}


/*mobile-men*/
@media (max-width: 767px), (max-height: 400px) {
    .description-panel {
        display: none;
    }

    .viewer-action-panel {
        /* display: none !important; */
        left: 50%;
        margin-left: -135px;
    }
    .viewer-dialog .wrapper { height: 60%;}

    .viewer-left-panel {
        display: none;
    }

    #right-toolbar {
        display: none;
    }

    #upper-toolbar {
        display: none;
    }

    .stage-slider {
        display: none;
    }

    .viewer-player {
        left: 0;
    }

    .stage-indicator {
        left: 0;
    }

    .clinic-attention {
        display: none;
    }

    #mobile-upper-left-toolbar {
        display: flex;
        margin: 10px 0 0 10px;
    }

    #mobile-upper-right-toolbar {
        display: flex;
    }

    .OcclusionGradient {
        top: 110px;
        right: 5px;
        width: 10px;
        height: 100px;
        border-radius: 4px;
    }

    .okl050 {
        top: -24px;
        right: 0;
        font-size: 12px;
        padding: 2px;
    }

    .okl025 {
        display: none;
    }

    .okl000 {
        bottom: -24px;
        right: 0;
        font-size: 12px;
        padding: 2px;
    }

    #right-slide-panel.active {
        width: 100% !important;
        visibility: visible;
    }

    #right-slide-panel .trigger-close {
        display: block !important;
    }

    #upper-trackball-toolbar.active, #left-trackball-toolbar.active,
    #right-trackball-toolbar.active, #bottom-trackball-toolbar.active{
        display: none !important;
    }
}


#right-slide-panel {
    width: 0;
    height: 100%;
    border-left: 3px solid #7C7E7D;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 400ms;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#right-slide-panel.active {
    width: 380px;
    visibility: visible;
}

#window3d {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

#right-slide-panel .trigger-close {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid #fff;
    text-align: center;
    padding-top: 15px;
    background-color: #5e5f61;
    font-size: 16px;
    color: #ffffff;
    display: none;
}

.right-slide-panel-content {
    flex: 1;
    overflow: hidden;
}

.chat-panel {
    /*flex: 1;*/
    height: 100%;
    flex-direction: column;
    display: flex;
}

.chat-panel-selector {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #646565;
}

.chat-panel-selector-item {
    padding: 6px 10px;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    background-color: #2a65a1;
    margin: 2px 0 0 2px;
    border-radius: 4px 4px 0 0;
    transition: 200ms;
}

.chat-panel-selector-item:hover {
    background-color: #2a7bbb;
}

.chat-panel.doctor .chat-panel-selector-item.doctor,
.chat-panel.internal .chat-panel-selector-item.internal,
.chat-panel.tech .chat-panel-selector-item.tech {
    background-color: #3399FF;
}

.chat-panel-wrapper {
    position: relative;
    display: block;
    flex: 1;
    overflow: hidden;
}

.chat-panel-wrapper-item {
    display: block;
    overflow: hidden;
    height: 0;
    visibility: hidden;
    /*display: none;*/
}

.chat-panel.doctor .chat-panel-wrapper-item.doctor {
    visibility: visible;
    /*display: block;*/
    height: 100%;
}

.chat-panel.internal .chat-panel-wrapper-item.internal {
    visibility: visible;
    background-color: rgba(188, 98, 211, 0.06);
    height: 100%;
    /*display: block;*/
}

.chat-panel.tech .chat-panel-wrapper-item.tech {
    visibility: visible;
    background-color: rgba(77, 200, 71, 0.06);
    height: 100%;
    /*display: block;*/
}


.set-block .set-block-single-row{
    width: 450px;
    padding: 6px;
}
.set-block .set-block-single-row select{
    width: 300px;
}

.cut-range-container .set-block .set-block-single-row{
    width: 220px;
}

.cut-range-container .editor-set-wrapper.opened .editor-set{
    width: 234px;
}
.cut-range-container .editor-set-wrapper.opened{
    margin: 0;
}

.cut-range-container .set-block .set-block-single-row select{
    width: 220px;
}

.cut-range-container .set-options-remove{
    display: none;
}
.cut-range-container .set-list{
    margin: 0;
}

.cut-range-container-item{
    width: 240px;
    padding: 5px 4px;
}

.cut-range-container-item.for-1{
    border-right: 3px solid #969696;
    border-bottom: 3px solid #969696;
}
.cut-range-container-item.for-2{
    border-bottom: 3px solid #969696;
}
.cut-range-container-item.for-3{
    border-left: 3px solid #969696;
}

#upper-trackball-toolbar, #left-trackball-toolbar, #right-trackball-toolbar, #bottom-trackball-toolbar{
    position: absolute;
    z-index: 1000;
    display: none;
}
#upper-trackball-toolbar.active, #bottom-trackball-toolbar.active{
    display: flex;
}
#left-trackball-toolbar.active, #right-trackball-toolbar.active{
    display: block;
}

#upper-trackball-toolbar{
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;

}
#bottom-trackball-toolbar{
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;

}

#left-trackball-toolbar{
    left: 100px;
    top: 50%;
    transform: translate(0, -50%);
}
#right-trackball-toolbar{
    right: 100px;
    top: 50%;
    transform: translate(0, -50%);
}