@import "../../hlpr.css";
@import "../../movement_table.css";
@import "../../vs_menu.css";
@import "vs_menu.css";
@import "../../modal.css";
@import "../../gallery.css";
@import "../../tooth_move_panel.css";
@import "../../attachment_list.css";
@import "csr.css";
@import "fonts.css";
@import "svg.css";

/*==========================================================================
   Base styles: opinionated defaults
   ==========================================================================*/
html, button, input, select, textarea { color: #FFF; }
html {height: 100%; min-height: 100%; min-width: 360px; overflow: hidden;} /*--выключение скроллбаров--*/
body {height: 100%; min-height: 100%; width: 100%; margin: 0; background: #b1c7d3; box-shadow: inset 0 0 50px 0 rgba(0,0,0,.15);}
::-moz-selection { background: #fff; color: #484848; text-shadow: none; }
::selection { background: #fff; color: #484848; text-shadow: none; }
a {outline: 0 !important;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
select, option, input[type=checkbox] {color: black;}
select, option {color: black; pointer-events: auto;}
input, option {pointer-events: auto; color: #000;}
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*
BLUE SCHEME STYLES
*/
body                  {color: #000000; font: normal 1em "PFDinTextProRegular", "Trebuchet MS", Arial, Helvetica, sans-serif;}
/*Approve panel*/
.approve_panel_path   {fill: #7dc0e7;}
.approve_panel_body   {filter: drop-shadow(0 2px 0 #6dadd7) drop-shadow(0 2px 0px rgba(0,0,0,.07));}
.ap_name              {color: #ffffff; font: 1.25em 'PFDinTextProMedium';}
.ap_state             {color: #ffffff; font: 1em 'PFDinTextProMedium';}
.btn                  {color: #ffffff; font: 0.875em 'PFDinTextProMedium'; border: 1px solid #fff; }
.btn:hover            {color: #ffffff; background-color: #5886a0; border-color: #5886a0;}
.ap_approve           {color: #5886a0; background: #fff;}
.ap_approve:hover     {color: #ffffff; background-color: #5886a0; border-color: #5886a0;}
.ap_chat              {color: #ffffff; font: 1.125em 'PFDinTextProMedium';}
.ap_chat:hover        {color: #5886a0;}
.chat_messages        {position: absolute; right: -5px; top: 1px; background: rgba(255, 0, 0, 0.6); border-radius: 20px; height: 18px; width: 18px; text-align: center; border: 2px solid #fff; font-size: 0.75em; font-weight: bold; display: none; justify-content: center; flex-direction: column;}
.ap_chat:hover .chat_messages {background-color: rgba(255,255,255,.6);}
/*Left Panel*/
.select_vs_item {color: #5886a0; font: 1em 'PFDinTextProMedium'; background: #fff; border-bottom: 1px solid #f6f5f5;}
.select_vs_item:hover {color: #ffffff; background: #5886a0; border-bottom-color: #5886a0;}
.select_vs_item.selected {color: #000; background: #ddd; border-bottom-color: #ddd;}
.select_vs_item .svg_eye {background-color: #cbcbcb;}
.select_vs_item .svg_eye:hover {background-color: #344f5e;}
.select_vs_item .svg_eye.active {background-color: #7dc964;}
/*Alert*/
.select_vs_alert      {background: #fff; box-shadow: inset 2px 0 3px 0 rgba(0,0,0,.08);}
.select_vs_alert:hover{background: #5886a0;}
/*Movement Panel*/
.pp_panel             {background: #ddd; border-top: 1px solid #f8f8f8; box-shadow: 0 -3px 50px 0 rgba(0,0,0,.15);}
.pp_view_item         {color: #232729; font: 1.375em 'PFDinTextProRegular'; text-shadow: 0 0 7px #fff;}
.pp_view_item:hover   {color: #5886a0;}
/*Action panel*/
.action_panel         {background: transparent; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4);}
.ap_item              {color: #6e6e6e; font: 0.875em 'PFDinTextProRegular'; background: #dddddd; border-top: 1px solid #ebebeb; border-bottom: 1px solid #a3a3a3; }
.ap_item:hover        {color: #444444;}
.ap_item.active       {color: #000000; background: #cbcbcb; border-top: 1px solid #c1c1c1;}
.ap_icon {background: #aaaaaa;}
.ap_item.active .ap_icon {background: #1F1F1F;}
.ap_item:not(.active):hover .ap_icon {background: #818181;}
/*Tabs*/
.viewer_tabs          {font: 0.875em 'PFDinTextProMedium'; color: #000000;}
.vt_movement_tab:hover .text,
.vt_imposition_tab:hover .text {color: #4a4a4a;}
.vt_imposition_tab.active,
.vt_imposition_tab.active:hover .text {color: #5d6abd;}
.vt_imposition_tab.active svg .impose-1 {fill: #5d6abd;}
.vt_imposition_tab.disabled .text {color: #a7a7a7;}
.vt_imposition_tab.disabled:hover .text {color: #a7a7a7;}
.vt_imposition_tab.disabled {cursor: default}
/*Player*/
.viewer_player {}
.vp_btn {border: 1px solid #939393; background: linear-gradient(to bottom, #f7f7f7 0%, #e6e7e8 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.9);}
.vp_btn:hover {background: #fafafa;}
.vp_btn:active {background: #cecece;}
.vp_rewind svg, .vp_play svg, .vp_forward svg {filter: drop-shadow(0 -1px 0 #4a4c51);}


/*==========================================================================
   Author's custom styles
   ==========================================================================*/
#canvas, #text {border: none;}
/*#text {z-index: 3;}*/
.viewer_container {margin: 0; position: relative;}
.viewer_container canvas {position: absolute; left: 0; top: 0;}
.header {position: fixed; top: 250px; left: 20px; pointer-events: none; background: rgba(255,255,255,.5); padding: 15px; border-radius: 5px; opacity: .8;}
/*Temp UI*/
.colors {position: fixed; left: 10px; top: 10px;}
.colors_item {width: 20px; height: 20px; border-radius: 3px; display: inline-block; vertical-align: top; cursor: pointer; transition: all .2s ease;}
.colors_item:hover {opacity: .7;}
.colors_item.active {width: 25px; height: 25px; margin: -3px 0 0 0;}
._red {background: #b1342f;}
.blue {background: #5886a0;}

/* Templates */
[data-templates] {display: none; visibility: hidden;}

/*
Approve panel
*/
.approve_panel {position: fixed; z-index: 20; width: 350px; height: 37px; top: 0; left: 50%; margin-left: -170px; padding: 6px 0; text-align: center;}
.approve_panel_body {position: fixed; top: -4px; left: 50%; width: 415px; margin-left: -200px; z-index: 10; clip-path: url('#top_panel_path'); /*pointer-events: none;*/}
.approve_panel.hidden_panel,
.approve_panel_body.hidden_panel {top: -65px;}
.ap_name {width: 78px; display: inline-block; vertical-align: middle; margin-right: 7px; text-align: center; white-space: nowrap;}
.ap_state {display: inline-block; vertical-align: middle; min-width: 197px; text-align: center; letter-spacing: -0.01em;}
.ap_state.visible {display: none;}
.ap_state.approve {display: none;}
.ap_approve_btns {display: none; vertical-align: middle; min-width: 197px; text-align: center;}
.btn {display: inline-block; vertical-align: top; border-radius: 30px; padding: 3px 11px; cursor: pointer;}
.btn:hover {}
.btn:active {opacity: .7;}
.btn.disabled {opacity: .4;}
.ap_revise {min-width: 94px; max-width: 94px;}
.ap_approve {padding-left: 15px; padding-right: 35px; position: relative; max-width: 100px;}
.ap_approve:after {content: ''; width: 20px; height: 20px; position: absolute; right: 1px; top: 1px; background: url("./imgs/approve.svg") no-repeat; z-index: 10;}
.ap_approve:hover {}
.ap_chat {display: inline-block; width: 52px; text-align: center; vertical-align: middle; padding: 2px 10px 2px 10px; cursor: pointer;}
.ap_chat:hover {}
.ap_chat:active {opacity: .7;}

/*
Left Panel
*/
.viewer_models_scroll_container {width: 210px;}
.viewer_models {position: fixed; left: 0; top: 0; width: 263px; z-index: 10; max-height: calc(100% - 42px); overflow-y: scroll; overflow-x: hidden;}
.viewer_models.fullscreen {max-height: 100%;}
.viewer_models.hidden_panel {left: -240px;}
.viewer_models .select_vs {width: 100%; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4); background: #fff;}
.mobile_toggler {position: fixed; background: #6ba3c8; right: 0; top: 0; width: 40px; height: 40px; text-align: center; padding: 12px 7px; cursor: pointer;}
.mobile_toggler svg {pointer-events: none;}
.mobile_toggler.opened svg {transform: rotate(-180deg); top: 2px;}
.mobile_menu {position: absolute; top: 12px; left: 6px; width: 40px; height: 40px; text-align: center; cursor: pointer; display: none; padding: 12px 7px;}
.mobile_menu div {pointer-events: none;}
.mobile_menu:after,
.mobile_menu:before,
.mobile_menu div {content: ''; display: block; width: 26px; height: 3px; background-color: #fff; border-radius: 3px; margin: 0 0 3px; transition: all .2s ease-in-out;}
.mobile_menu.opened:before {transform: translateY(6px) rotate(135deg);}
.mobile_menu.opened:after {transform: translateY(-6px) rotate(-135deg);}
.mobile_menu.opened div {transform: scale(0);}

.select_vs_item {display: flex; height: 40px; padding: 0 0 0 42px; position: relative; cursor: pointer;}
.select_vs_item i {display: inline-flex; align-items: center; font-style: normal; pointer-events: none;}
.select_vs_item:hover {}
.select_vs_item:active {filter: grayscale(0.6);}
.select_vs_item .svg_eye {position: absolute; left: 10px; top: 50%; margin-top: -9px; z-index: 20; -webkit-mask: url('./svgpack/eye.svg') no-repeat center; -webkit-mask-size: contain; width: 22px; height: 19px;}
/*Alert*/
.select_vs_alert {position: absolute; width: 35px; height: 35px; right: -35px; top: 50%; margin-top: -17px; padding: 8px 0 0; border-radius: 0 3px 3px 0; z-index: 5; text-align: center; cursor: pointer;}
.select_vs_alert:hover {}

/*
Movement Panel
*/
.pp_panel {position: fixed; bottom: -140px; left: 0; width: 100%; height: 100px; user-select: none; transition: all .2s ease;}
.pp_panel.opened {bottom: 0 !important;}
.pp_view {pointer-events: none;position: absolute; top: -80px; left: 50%; margin-left: -300px; width: 600px; text-align: center;}
.pp_view_item {pointer-events: auto;display: inline-block; vertical-align: top; margin: 0 20px; cursor: pointer;}
.pp_view_item:hover {}

/*
Action panel
*/
.action_panel {position: fixed; right: 0; top: 40px; width: 180px; min-height: 200px; z-index: 10; user-select: none; overflow-y: auto; overflow-x: hidden; max-height: calc(100% - 40px);}
.action_panel.opened {right: -140px;}
.action_panel::-webkit-scrollbar {width: 5px;}
.action_panel::-webkit-scrollbar-track {box-shadow: inset 0 0 3px rgba(0,0,0, .2); border-radius: 5px;}
.action_panel::-webkit-scrollbar-thumb {box-shadow: inset 0 0 3px rgba(255,255,255, .5); border-radius: 5px; background: #878787; min-height: 40px;}
.ap_group {margin-bottom: 3px; background: #dddddd;}
.ap_group:last-of-type {margin-bottom: 0;}
.ap_item {height: 40px; padding: 0 0 0 50px; cursor: pointer; position: relative; display: flex; align-items: center;}
.ap_item:hover  {}
.ap_item.active {}
.ap_item.active:hover {opacity: .7;}
/*Icons*/
.ap_icon {width: 22px; height: 22px; position: absolute; top: 8px; left: 10px; pointer-events: none;}
.ap_icon.both_svg {width: 22px; height: 15px; top: 12px; left: 11px; -webkit-mask: url('./svgpack/both.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.upper_svg {width: 22px; top: 7px; left: 11px; -webkit-mask: url('./svgpack/upper.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.lower_svg {width: 22px; top: 11px; left: 11px; -webkit-mask: url('./svgpack/lower.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.attach_svg {height: 22px; top: 9px; -webkit-mask: url('./svgpack/attachments.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.pontics_svg {height: 18px; top: 10px; -webkit-mask: url('./svgpack/pontics.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.appliances_svg {height: 16px; top: 12px; -webkit-mask: url('./svgpack/appliances.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.wires_svg {height: 13px; top: 12px; -webkit-mask: url('./svgpack/wires.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.occl_svg {width: 22px; top: 8px; left: 11px; -webkit-mask: url('./svgpack/occlusogram.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.ipr_svg {width: 24px; height: 24px; top: 7px; left: 9px; -webkit-mask: url('./svgpack/ipr.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.grid_svg {width: 19px; height: 19px; top: 10px; left: 13px; -webkit-mask: url('./svgpack/grid.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.ruler_svg {width: 22px; height: 18px; top: 10px; left: 12px; -webkit-mask: url('./svgpack/ruler.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.bolton_svg {width: 24px; height: 24px; top: 7px; left: 10px; -webkit-mask: url('./svgpack/bolton.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.arch_length_svg {width: 21px; height: 21px; top: 8px; left: 11px; -webkit-mask: url('./svgpack/arch_length.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.cross_svg {width: 22px; height: 22px; top: 8px; left: 11px; -webkit-mask: url('./svgpack/cross_section.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.arch_width_svg {width: 21px; height: 21px; top: 8px; left: 11px; -webkit-mask: url('./svgpack/arch_width.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.mt_svg {width: 20px; height: 20px; top: 9px; left: 12px; -webkit-mask: url('./svgpack/movement_table.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.summary_svg {width: 21px; height: 21px; top: 8px; left: 11px; -webkit-mask: url('./svgpack/summary_report.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.gallery_svg {width: 21px; height: 18px; top: 10px; left: 11px; -webkit-mask: url('./svgpack/gallery.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_icon.gingiva_svg {width: 23px; top: 9px; left: 10px; -webkit-mask: url('./svgpack/gingivas.svg') no-repeat center; -webkit-mask-size: contain;}
/*Preload active icons*/
.ap_icon.both_svg:before {content: url('./svgpack/both.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.upper_svg:before {content: url('./svgpack/upper_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.lower_svg:before {content: url('./svgpack/lower_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.attach_svg:before {content: url('./svgpack/attachments_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.pontics_svg:before {content: url('./svgpack/pontics_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.appliances_svg:before {content: url('./svgpack/appliances.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.wires_svg:before {content: url('./svgpack/wires.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.occl_svg:before {content: url('./svgpack/occlusogram_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.ipr_svg:before {content: url('./svgpack/ipr_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.grid_svg:before {content: url('./svgpack/grid_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.ruler_svg:before {content: url('./svgpack/ruler_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.bolton_svg:before {content: url('./svgpack/bolton_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.arch_length_svg:before {content: url('./svgpack/arch_length_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.cross_svg:before {content: url('./svgpack/cross_section_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.arch_width_svg:before {content: url('./svgpack/arch_width_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.mt_svg:before {content: url('./svgpack/movement_table_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.summary_svg:before {content: url('./svgpack/summary_report_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.gallery_svg:before {content: url('./svgpack/gallery_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
.ap_icon.gingiva_svg:before {content: url('./svgpack/gingivas_active.svg'); position: fixed; overflow: hidden; left: -50000px;}
/*Active icons*/
.ap_item.active .both_svg {-webkit-mask: url('./svgpack/both_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .upper_svg {-webkit-mask: url('./svgpack/upper_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .lower_svg {-webkit-mask: url('./svgpack/lower_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .attach_svg {-webkit-mask: url('./svgpack/attachments_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .pontics_svg {-webkit-mask: url('./svgpack/pontics_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .appliances_svg {-webkit-mask: url('./svgpack/appliances.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .wires_svg {-webkit-mask: url('./svgpack/wires.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .occl_svg {-webkit-mask: url('./svgpack/occlusogram_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .ipr_svg {-webkit-mask: url('./svgpack/ipr_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .grid_svg {-webkit-mask: url('./svgpack/grid_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .ruler_svg {-webkit-mask: url('./svgpack/ruler_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .bolton_svg {-webkit-mask: url('./svgpack/bolton_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .arch_length_svg {-webkit-mask: url('./svgpack/arch_length_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .cross_svg {-webkit-mask: url('./svgpack/cross_section_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .arch_width_svg {-webkit-mask: url('./svgpack/arch_width_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .mt_svg {-webkit-mask: url('./svgpack/movement_table_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .summary_svg {-webkit-mask: url('./svgpack/summary_report_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .gallery_svg {-webkit-mask: url('./svgpack/gallery_active.svg') no-repeat center; -webkit-mask-size: contain;}
.ap_item.active .gingiva_svg {-webkit-mask: url('./svgpack/gingivas_active.svg') no-repeat center; -webkit-mask-size: contain;}

.ap_item.active svg {}
.ap_item:not(.active):hover svg {}

[data-vs-action="toggle_attachments"] {display: none;}
[data-vs-action="toggle_pontics"] {display: none;}
[data-vs-action="toggle_appliances"] {display: none;}
[data-vs-action="toggle_wires"] {display: none;}
[data-vs-action="toggle_jtdst"] {display: none;}
[data-vs-action="open_movement_table"] {display: none;}
[data-vs-action="toggle_bolton"] {display: none;}
[data-vs-action="toggle_archLen"] {display: none;}
[data-vs-action="toggle_crossSection"] {display: none;}
[data-vs-action="toggle_archWidth"] {display: none;}

/*
Ruler panel
*/
.ruler_block {background: #fff; overflow: auto; padding: 10px 9px; margin-top: 4px; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4); display: none;}

/*Button*/
button {width: 100%; padding: 13px 10px; min-height: 40px; font: 0.875em/12px 'PFDinTextProRegular', sans-serif; color: #3f3f3f; border: 1px solid #929292; border-radius: 3px; outline: 0; background: linear-gradient(to bottom, #f7f7f7 0%, #e6e7e8 100%); transition: all .15s ease;}
button:hover {background: linear-gradient(to bottom, #f2f2f2 0%, #dedfe0 100%);}
button:active {background: #e6e7e8; transition: none;}
button.ruler_btn {margin-bottom: 4px;}
button.active {color: #ffffff; background: #a3a3a3; border-color: #a3a3a3;}

/*Checkbox*/
.chbxs input[type=checkbox] {opacity: 0; display: none;}
.chbxs label {position: relative; color: #747985; display: inline-block; vertical-align: top; font: 0.875em/12px 'PFDinTextProRegular', sans-serif; margin: 12px 5px 0 0; user-select: none; cursor: pointer; padding-left: 0; transition: all .15s ease;}
.chbxs label:before {display: none;} /*временный стиль, лишний - убрать!!*/
.chbxs input[type=checkbox] + span {padding: 2px 5px 2px 0; margin: 0; display: inline-flex; align-items: center; min-height: 28px;}
.chbxs input[type=checkbox] + span:before {content: ''; display: inline-flex; width: 24px; height: 24px; min-width: 24px; border: 1px solid #767676; background: linear-gradient(to bottom, #fff 0%, #e6e7e8 100%); z-index: 1; transition: all .15s ease; margin: -2px 6px 0 0;}
.chbxs input[type=checkbox] + span:after {content: ''; position: absolute; left: 4px; top: 50%; margin-top: -9px; background: #cacaca; width: 16px; height: 16px; z-index: 2; transition: all .15s ease;}
.chbxs input[type=checkbox]:checked + span:before {background: #fff;}
.chbxs input[type=checkbox]:checked + span:after {background: #6aa3c7;}
.chbxs label:hover {color: #333333;}
.chbxs label:hover span:before {box-shadow: 0 0 10px 0 rgba(0,0,0,.25);}
.chbxs label:hover span:after {background: #b1b1b1;}

/*Measurement points*/
ul.ruler_list_block {margin-top: 2px; padding: 0; display: none;}
ul.ruler_list_block li {background: #fff; cursor: pointer; position: relative; min-height: 39px; margin-top: 1px; display: flex; align-items: center; padding: 0 10px; transition: all .15s ease;}
ul.ruler_list_block li:hover {background: #eee;}
ul.ruler_list_block li.active i {background: #7dc0e7;}
ul.ruler_list_block li i {font: normal 0.875em 'PFDinTextProRegular', sans-serif; color: #000000; padding: 3px 10px; background: #cbcbcb; display: flex; min-width: 100px;}
ul.ruler_list_block li.active em {position: absolute; right: 11px; top: 50%; margin-top: -13px; width: 26px; height: 26px;}
ul.ruler_list_block li.active em:after,
ul.ruler_list_block li.active em:before {content: ''; display: block; width: 26px; height: 2px; background: #7dc0e7; border-radius: 3px; transition: all .15s ease; position: absolute; top: 50%; margin-top: -1px;}
ul.ruler_list_block li.active em:before {transform: rotate(135deg);}
ul.ruler_list_block li.active em:after {transform: rotate(-135deg);}
ul.ruler_list_block li.active em:hover:after,
ul.ruler_list_block li.active em:hover:before {background: #4b728b;}

ul.ruler_list_block li.ruler_item_del_all {cursor: default}
ul.ruler_list_block li.ruler_item_del_all i {background: #fff;}
ul.ruler_list_block li.ruler_item_del_all:hover  {background: #fff;}
ul.ruler_list_block li.ruler_item_del_all em {cursor: pointer; position: absolute; right: 11px; top: 50%; margin-top: -13px; width: 26px; height: 26px;}
ul.ruler_list_block li.ruler_item_del_all em:after,
ul.ruler_list_block li.ruler_item_del_all em:before {content: ''; display: block; width: 26px; height: 2px; background: #7dc0e7; border-radius: 3px; transition: all .15s ease; position: absolute; top: 50%; margin-top: -1px;}
ul.ruler_list_block li.ruler_item_del_all em:before {transform: rotate(135deg);}
ul.ruler_list_block li.ruler_item_del_all em:after {transform: rotate(-135deg);}
ul.ruler_list_block li.ruler_item_del_all em:hover:after,
ul.ruler_list_block li.ruler_item_del_all em:hover:before {background: #4b728b;}
/*
[END] Ruler panel
*/

/*
Tabs
*/
.tabs_body {position: absolute; top: -45px; left: 50%; width: 400px; margin-left: -200px; z-index: 10; clip-path: url('#tab_panel_path'); transform: rotate(180deg);}
#svg_tab_path {transform: translateX(175px);}
.viewer_tabs {position: absolute; top: 0; left: 50%; width: 400px; margin-left: -200px; height: 40px; z-index: 10; transform: rotate(180deg);}
.viewer_tabs .text {min-height: 18px;}
.viewer_tabs .text, .viewer_tabs svg {display: inline-block; vertical-align: middle;}
.vt_movement_tab, .vt_imposition_tab {height: 40px; display: inline-block; vertical-align: middle; cursor: pointer;}
.vt_movement_tab {width: 220px; clip-path: url('#tab_panel_tab_path'); transform: rotate(180deg); text-align: center;}
.vt_imposition_tab {width: 165px; transform: rotate(180deg); text-align: left;}
.vt_movement_tab:hover .text,
.vt_imposition_tab:hover .text {}
.vt_movement_tab .text {padding-left: 5px;}
.vt_imposition_tab .text {padding-right: 4px;}
.vt_tab_body {transform: rotate(180deg); min-height: 22px; margin-top: 5px;}
.vt_movement_tab svg {transform: rotate(180deg); margin-top: -1px; transition: all .2s ease; width: 17px;}
.vt_movement_tab.opened svg {transform: rotate(0deg); margin-top: 0;}
.vt_imposition_tab.active,
.vt_imposition_tab.active:hover .text {}
.vt_imposition_tab.active svg .impose-1 {}

/*
Player
*/
.viewer_player {}
.vp_controls {display: inline-block; vertical-align: top; width: 260px; text-align: center; padding-top: 21px;}
.vp_btn {display: inline-block; vertical-align: middle; border-radius: 50%; margin: 0 2px 0 2px; text-align: center; cursor: pointer; }
.vp_btn:hover {}
.vp_btn:active {box-shadow: none;}
.vp_rewind svg, .vp_play svg, .vp_forward svg {}
.vp_rewind {width: 40px; height: 40px; padding-top: 12px; padding-right: 3px;}
.vp_play {width: 60px; height: 60px; padding-top: 18px; padding-left: 5px;}
.vp_play #play svg {width: 17px; height: 24px;}
.vp_play #pause svg {width: 14px; height: 20px; margin: 3px 0 0 -4px;}
.vp_play #play.active,
.vp_play #pause.active {display: inline-block;}
.vp_play .play-2,
.vp_play .pause-2,
.vp_play #play,
.vp_play #pause {display: none;}
.vp_forward {width: 40px; height: 40px; padding-top: 12px; padding-left: 3px;}
/*Slider*/
.vp_slider {display: inline-block; vertical-align: top; width: calc(100% - 300px); height: 75px; border-radius: 5px; margin-top: 27px; position: relative;}
.vp_line {width: 100%; height: 7px; background: #717171; border-radius: 5px; display: block; border-top: 1px solid #626262; border-bottom: 1px solid #626262; margin: 3px 0 3px 9px; box-shadow: 0 1px 0 0 rgba(255,255,255,.9); overflow: hidden; position: relative;}
.vp_line i {width: 50%; height: 6px; position: absolute; left: 0; top: 0; background: #86bcdb; border-radius: 3px;}
.vp_upper_line {}
.vp_steps {display: table; width: 100%;}
.vp_steps i {display: inline-block; vertical-align: middle; width: 25px; height: 25px; padding: 5px 0; text-align: center; color: #727272; font: normal 0.875em 'PFDinTextProMedium'; cursor: pointer; border-radius: 50%;}
.vp_steps p {display: table-cell;}
.vp_steps i:hover {background: #ffffff; }
.vp_lower_line {}
/*Marker*/
.marker {position: absolute; height: 80px; left: 0; margin-left: -2px; top: -15px; cursor: move;}
.marker .top {width: 18px; height: 40px; border-radius: 8px 8px 0 0; background: url('./imgs/movement_panel/3lines.png') center 11px no-repeat, linear-gradient(to bottom, #f7f7f7 0%, #efefef 100%); box-shadow: inset 0 -1px 1px 1px rgba(255,255,255,.7); border: 1px solid #8c8c8c; position: absolute; top: 0; left: 0;}
.marker .num {background: linear-gradient(to bottom, #9cc8e2 0%, #73b1d5 100%); width: 25px; height: 25px; border: 1px solid #6b9fdd; border-radius: 50%; position: absolute; margin-left: -3px; top: 50%; margin-top: -12px;  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.2); z-index: 10; font: 0.875em 'PFDinTextProMedium'; color: #fff; text-align: center; padding: 4px 0;}
.marker .btm {width: 18px; height: 40px; border-radius: 0 0 8px 8px ; background: url('./imgs/movement_panel/3lines.png') center 20px no-repeat, linear-gradient(to bottom, #f7f7f7 0%, #efefef 100%); box-shadow: inset 0 -1px 1px 1px rgba(255,255,255,.7); border: 1px solid #8c8c8c; position: absolute; top: 40px; left: 0;}
.marker:hover .top {background: url('./imgs/movement_panel/3lines.png') center 11px no-repeat, rgba(255,255,255,.6);}
.marker:hover .btm {background: url('./imgs/movement_panel/3lines.png') center 20px no-repeat, rgba(255,255,255,.6);}
.marker:hover .num {background: #8fc1de;}
.marker:active .top {background: url('./imgs/movement_panel/3lines.png') center 11px no-repeat, rgba(255,255,255,.85);}
.marker:active .btm {background: url('./imgs/movement_panel/3lines.png') center 20px no-repeat, rgba(255,255,255,.85);}
.marker:active .num {background: #8abad6;}

/*Marker animation*/
.marker * {transition: width, left .2s ease-out;}
.vp_line i {transition: all .2s ease-out;}

/*Superimpose marker*/
.si_marker {position: absolute; left: 0; top: 16px; text-align: center; font: normal 0.875em 'PFDinTextProMedium'; color: #fff; cursor: move; display: none;}
.si_marker.opened {display: block;}
.si_marker:hover {opacity: .8;}
.si_marker svg {margin-left: -12px;}
.si_num {position: absolute; left: -2px; top: 0; width: 30px; height: 20px; padding: 2px 0;}

/*
Animations
*/
.btn,
.select_vs_item,
.ap_item
{
	transition: all .15s ease;
}
.vp_line,
.viewer_models,
.action_panel,
.approve_panel,
.approve_panel_body,
.mobile_toggler svg
{
	transition: all .25s ease;
}




/**
MOBILE ADAPTATION
 */
/*For old iPhones & less than 4.2 inch screens */
@media screen and (max-width: 380px) {
	/*Approve panel*/
	.approve_panel {width: 100%; height: 60px; left: 0; margin-left: 0;}
	.approve_panel_body {width: 100%; height: 60px; left: 0; margin-left: 0; background: #7dc0e7; clip-path: none; top: 0;}
	.ap_name {display: block; width: 100%; font-size: 0.9375em; margin-top: 8px; text-align: left; margin-left: 55px;}
	.ap_state {font-size: 0.9375em; width: 100%; margin-top: -5px; text-align: left; margin-left: 55px;}
	.ap_state.visible {display: inline-block;}
	.ap_chat {border: 2px solid #fff; position: absolute; border-radius: 4px; right: 50px; top: 20px; font-size: 0.9375em; padding: 1px 15px; width: auto;}
	.chat_messages {right: -8px; top: -9px; background: rgba(255, 0, 0, 0.9);}
	.ap_approve_btns {display: block; width: 100%; margin-top: 3px;}
	.mobile_menu {display: block;}
	.mobile_toggler {position: absolute; height: 100%; padding-top: 24px; padding-bottom: 0; background: none;}
	.mobile_toggler svg {transform: rotate(-180deg);}
	.mobile_toggler.opened svg {transform: rotate(0); top: 2px;}
	.ap_approve_btns {display: none !important;}

	/*Action panel*/
	.action_panel {right: -140px; top: 63px; max-height: calc(100% - 63px);}
	.action_panel.opened {right: 0;}

	/*Left Panel*/
	.viewer_models {left: -250px; top: 63px;}
	.viewer_models.opened {left: 0;}
	.select_vs_item {height: 60px;}

	/*Tabs*/
	.pp_view_item {font-size: 1.0625em; margin: 0 0.5%;}
	.viewer_tabs {font-size: 0.75em;}
	.vt_movement_tab .text {padding-left: 3px;}
	.vt_imposition_tab .text {padding-right: 3px;}
	.viewer_tabs .text {padding-top: 1px;}
}

@media screen and (min-width: 381px) and (max-width: 480px) {
	/*Approve panel*/
	.approve_panel {width: 100%; height: 60px; left: 0; margin-left: 0;}
	.approve_panel_body {width: 100%; height: 60px; left: 0; margin-left: 0; background: #7dc0e7; clip-path: none; top: 0;}
	.ap_name {display: block; width: 100%; font-size: 0.9375em; margin-top: 8px; text-align: left; margin-left: 55px;}
	.ap_state {font-size: 0.9375em; width: 100%; margin-top: -5px; text-align: left; margin-left: 55px;}
	.ap_state.visible {display: inline-block;}
	.ap_chat {border: 2px solid #fff; position: absolute; border-radius: 4px; right: 50px; top: 20px; font-size: 0.9375em; padding: 1px 15px; width: auto;}
	.chat_messages {right: -8px; top: -9px; background: rgba(255, 0, 0, 0.9);}
	.ap_approve_btns {display: block; width: 100%; margin-top: 3px;}
	.mobile_menu {display: block;}
	.mobile_toggler {position: absolute; height: 100%; padding-top: 24px; padding-bottom: 0; background: none;}
	.mobile_toggler svg {transform: rotate(-180deg);}
	.mobile_toggler.opened svg {transform: rotate(0); top: 2px;}
	.ap_approve_btns {display: none !important;}

	/*Action panel*/
	.action_panel {right: -140px; top: 63px; max-height: calc(100% - 63px);}
	.action_panel.opened {right: 0;}

	/*Left Panel*/
	.viewer_models {left: -250px; top: 63px;}
	.viewer_models.opened {left: 0;}
	.select_vs_item {height: 60px;}

	/*Tabs*/
	.pp_view_item {font-size: 1.125em; padding: 0 1%; margin: 0;}
	.viewer_tabs {font-size: 0.75em;}
	.vt_movement_tab .text {padding-left: 3px;}
	.vt_imposition_tab .text {padding-right: 3px;}
	.viewer_tabs .text {padding-top: 1px;}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
	/*Approve panel*/
	.approve_panel {width: 100%; height: 40px; left: 0; margin-left: 0; padding-top: 9px;}
	.approve_panel_body {width: 100%; height: 40px; left: 0; margin-left: 0; background: #7dc0e7; clip-path: none; top: 0;}
	.ap_name {font-size: 0.9375em; width: auto; margin-right: 0;}
	.ap_state {font-size: 0.9375em; min-width: inherit; padding: 0 0 0 40px;}
	.ap_state.visible {display: inline-block;}
	.ap_chat {border: 2px solid #fff; position: absolute; border-radius: 4px; right: 50px; top: 10px; font-size: 0.9375em; padding: 1px 15px; width: auto;}
	.chat_messages {right: -8px; top: -9px; background: rgba(255, 0, 0, 0.9);}
	.ap_approve_btns {display: block; width: 100%; margin-top: 3px;}
	.mobile_menu {display: block; top: 2px;}
	.mobile_toggler {background: none;}
	.mobile_toggler svg {transform: rotate(-180deg);}
	.mobile_toggler.opened svg {transform: rotate(0);}
	.ap_approve_btns {display: none !important;}

	/*Action panel*/
	.action_panel {right: -140px; top: 43px; max-height: calc(100% - 43px);}
	.action_panel.opened {right: 0;}

	/*Left Panel*/
	.viewer_models {left: -250px; top: 43px;}
	.viewer_models.opened {left: 0;}
	.select_vs_item {height: 60px;}

	/*Tabs*/
	.pp_view_item {font-size: 1.125em; padding: 0 1%; margin: 0;}
	.viewer_tabs {font-size: 0.75em;}
	.vt_movement_tab .text {padding-left: 3px;}
	.vt_imposition_tab .text {padding-right: 3px;}
	.viewer_tabs .text {padding-top: 1px;}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
	/*Approve panel*/
	.approve_panel {width: 100%; height: 40px; left: 0; margin-left: 0; padding-top: 9px;}
	.approve_panel_body {width: 100%; height: 40px; left: 0; margin-left: 0; background: #7dc0e7; clip-path: none; top: 0;}
	.ap_name {font-size: 0.9375em; width: auto; margin-right: 0;}
	.ap_state {font-size: 0.9375em; min-width: inherit; padding: 0 0 0 40px;}
	.ap_state.visible {display: inline-block;}
	.ap_chat {border: 2px solid #fff; position: absolute; border-radius: 4px; right: 50px; top: 10px; font-size: 0.9375em; padding: 1px 15px; width: auto;}
	.chat_messages {right: -8px; top: -9px; background: rgba(255, 0, 0, 0.9);}
	.ap_approve_btns {display: block; width: 100%; margin-top: 3px;}
	.mobile_menu {display: block; top: 2px;}
	.mobile_toggler {background: none;}
	.mobile_toggler svg {transform: rotate(-180deg);}
	.mobile_toggler.opened svg {transform: rotate(0);}
	.ap_approve_btns {display: none !important;}

	/*Action panel*/
	.action_panel {right: -140px; top: 43px; max-height: calc(100% - 43px);}
	.action_panel.opened {right: 0;}

	/*Left Panel*/
	.viewer_models {left: -250px; top: 43px;}
	.viewer_models.opened {left: 0;}
	.select_vs_item {height: 60px;}

	/*Tabs*/
	.pp_view_item {font-size: 1.125em; padding: 0 1%; margin: 0;}
	.viewer_tabs {font-size: 0.75em;}
	.vt_movement_tab .text {padding-left: 3px;}
	.vt_imposition_tab .text {padding-right: 3px;}
	.viewer_tabs .text {padding-top: 1px;}
}

#canvas { outline: none; }

/*Add attachment context menu (tmp)*/
ul.menu-addattach {position: absolute; width: 150px; margin-top: 1px; padding: 0; display: none;    transition: transform 0.1s ease-out, opacity 0.1s ease-out;}
ul.menu-addattach li {background: #fff; cursor: pointer; position: relative; min-height: 12px; margin-top: 1px; display: flex; align-items: center; padding: 0 10px; transition: all .15s ease;}
ul.menu-addattach li:hover {background: #000; color: #fff}
ul.menu-addattach li i {font: normal 0.75em 'PFDinTextProRegular', sans-serif; color: #000; padding: 3px 10px; background: #fff; display: flex; min-width: 100px;; transition: all .15s ease;}
ul.menu-addattach li:hover i {background: #000; color: #fff}

/*show occlusion plane (tmp)*/
.occlusion_plane_block {background: #fff; overflow: auto; padding: 10px 9px; margin-top: 4px; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4); display: none;}
/*group movement*/
.group_move_block {background: #fff; overflow: auto; padding: 10px 9px; margin-top: 4px; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4); display: none;}

/*Checkbox*/
.chbxs1 input[type=checkbox] {opacity: 0; display: none; position: absolute; left: -9999px;}
.chbxs1 label {position: relative; color: #747985; display: inline-block; vertical-align: top; font: 0.875em/12px 'PFDinTextProRegular', sans-serif; margin: 2px 2px 0 0; user-select: none; cursor: pointer; padding-left: 0; transition: all .15s ease;}
.chbxs1 label:before {display: none;} /*временный стиль, лишний - убрать!!*/
.chbxs1 input[type=checkbox] + span {padding: 2px 5px 2px 0; margin: 0; display: inline-flex; align-items: center; min-height: 20px;}
.chbxs1 input[type=checkbox] + span:before {content: ''; display: inline-flex; width: 24px; height: 24px; min-width: 24px; border: 1px solid #767676; background: linear-gradient(to bottom, #fff 0%, #e6e7e8 100%); z-index: 1; transition: all .15s ease; margin: -2px 6px 0 0;}
.chbxs1 input[type=checkbox] + span:after {content: ''; position: absolute; left: 4px; top: 50%; margin-top: -9px; background: #cacaca; width: 16px; height: 16px; z-index: 2; transition: all .15s ease;}
.chbxs1 input[type=checkbox]:checked + span:before {background: #fff;}
.chbxs1 input[type=checkbox]:checked + span:after {background: #6aa3c7;}
.chbxs1 label:hover {color: #333333;}
.chbxs1 label:hover span:before {box-shadow: 0 0 10px 0 rgba(0,0,0,.25);}
.chbxs1 label:hover span:after {background: #b1b1b1;}

/*edit separations*/
.edit_separations_block {display: none; width: 100%; background: #fff; color: #727272; overflow: auto; padding: 10px 9px 10px 12px; margin-top: 4px; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4);}
.edit_separations_block label {display: table-row; cursor: pointer;}
.edit_separations_block label:hover {color: #000;}
.edit_separations_block label i {display: table-cell; padding-right: 20px; padding-bottom: 10px; font-style: normal; font-size: 0.875em; width: 111px;}
.edit_separations_block input {display: table-cell; width: 63px; height: 21px; border: 0; text-align: right; padding: 2px 4px 0; border-radius: 0 !important; background: none; font-size: 0.875em;}
.edit_separations_block input:read-only {border: 0; border-radius: 0;}
.edit_separations_block.editable input {background: #8c8c8c; color: #fafafa; border-bottom: 1px solid #fff;}
.edit_separations_block.editable input:focus {background: #5f5f5f;}

/*reset vs to default block*/
.resetVS_block {background: #fff; overflow: auto; padding: 4px 5px 0; margin-top: 4px; box-shadow: 1px 1px 4px 0 rgba(109, 109, 109, 0.4); display: none;}