html {
	display: flex;
	flex-direction: column;
	--input-height: 28px;
	--color-primary: #1D2E58;
	--color-primary-shadow: #9EA8B7;
	--color-light: white;
	--color-dark: black;
	--color-light-gray: #F4F4F4;
	--color-gray: #9FA2A3;
	--color-btn-border: #9fa2a38c;
	font-family: "Inter";
	min-height: 100%;
}
*,
*:before,
*:after {
	box-sizing: border-box;
}
body {
	display: flex;
	flex-direction: column;
	font-size: inherit;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	flex: 1 0 auto;
}
input,
button,
textarea {
	font-size: inherit;
}
button {
	cursor: pointer;
	color: inherit;
	font-family: inherit;
	background-color: inherit;
}
img {
	vertical-align: top;
}

#main_wrapper input[type="button"] {
  border: solid 0px #000;
  cursor: pointer;
  padding-top: 0px !important;
}

#main_wrapper input[type="submit"] {
  border: solid 0px #000;
  cursor: pointer;
}

#main_wrapper input[type="radio"] {
  background-color: #fff;
  border: solid 0px #000;
  margin: 0px;
  padding: 0px;
}

#main_wrapper input[type="checkbox"] {
  background-color: #fff;
  border: solid 0px #000;
  margin: 0px;
  padding: 0px;
	
}

#main_wrapper textarea {
  resize: none;
}

#main_wrapper span {
  vertical-align: baseline;
}

#main_wrapper button,
#main_wrapper button:hover,
#main_wrapper button:active {
  text-align: center;
}

#main_wrapper div,
#main_wrapper input[type="text"],
#main_wrapper input[type="email"],
#main_wrapper input[type="password"],
#main_wrapper textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.croppie-container {
  width: 100%;
  height: 100%;
}

.croppie-container .cr-image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-height: none;
  max-width: none;
}

.croppie-container .cr-boundary {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
  position: absolute;
  border: 2px solid #fff;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid black;
  background: #fff;
  width: 10px;
  height: 10px;
  content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
  left: 50%;
  margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
  top: 50%;
  margin-top: -5px;
}

.croppie-container .cr-original-image {
  display: none;
}

.croppie-container .cr-vp-circle {
  border-radius: 50%;
}

.croppie-container .cr-overlay {
  z-index: 1;
  position: absolute;
  cursor: move;
  touch-action: none;
}

.croppie-container .cr-slider-wrap {
  width: 75%;
  margin: 15px auto;
  text-align: center;
}

.croppie-result {
  position: relative;
  overflow: hidden;
}

.croppie-result img {
  position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
  -webkit-appearance: none;
  /*removes default webkit styles*/
  /*border: 1px solid white; */
  /*fix for FF unable to apply focus style bug */
  width: 300px;
  /*required for proper track sizing in FF*/
  max-width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px;
}

.cr-slider:focus {
  outline: none;
}

/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

.cr-slider::-ms-track {
  width: 100%;
  height: 5px;
  background: transparent;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  border-color: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-width: 6px 0;
  color: transparent;
  /*remove default tick marks*/
}

.cr-slider::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.cr-slider::-ms-fill-upper {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.cr-slider::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: 1px;
}

.cr-slider:focus::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.5);
}

.cr-slider:focus::-ms-fill-upper {
  background: rgba(0, 0, 0, 0.5);
}

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

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1;
}

.cr-rotate-controls button {
  border: 0;
  background: none;
}

.cr-rotate-controls i:before {
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
}

.cr-rotate-l i:before {
  content: '↺';
}

.cr-rotate-r i:before {
  content: '↻';
}

body {
  text-align: center;
  position: relative;
  background: linear-gradient(144.59deg, #F0F0F0 -2.97%, #FFFFFF 15.36%, #F3F3F3 36.02%, #FEFEFE 56.78%, #F4F4F4 79.87%, #FDFDFD 102.97%);
  background:
	/*#F0F0F0*/
	#fff;
}

select {
  width: 100%;
  height: 30px;
  border: solid 1px #758FAD;
  color: #000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  display: block;
  display: block;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 10px;
  border-radius: 3px;
  filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
}
/* 
input[type="text"] {
  height: 30px;
  border: solid 1px var(--color-primary);
  color: #000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  display: block;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 10px;
  border-radius: 3px;
  filter: drop-shadow(1px 1px 1px var(--color-gray));
}

input[type="date"] {
  width: 100%;
  height: 30px;
  border: solid 1px #758FAD;
  color: #000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  display: block;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 10px;
  border-radius: 3px;
  filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
} */

input[type="range"] {
  height: 26px;
  border: solid 1px var(--color-primary);
  display: block;
  background: var(--color-light);
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  overflow: hidden;
}

/*input[type=range]::-webkit-slider-runnable-track{ width:4px; height: 36px; background-color:#12181B; }*/
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
  cursor: pointer;
  width: 6px;
	height: 24px;
	border: 1px solid var(--color-light);
	background-color: var(--color-dark);
}

/*input[type=range]::-moz-range-track{ width:4px; height:36px; background-color:#12181B; }*/
input[type=range]::-moz-range-thumb {
  cursor: pointer;
  width: 6px;
	height: 22px;
	border: 1px solid var(--color-light);
	border-radius: 0;
	background-color: var(--color-dark);
}

.range {
  display: inline-flex;
  position: relative;
	left: 0;
	top: 0;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 0px var(--color-gray);
}
.range::before, .range::after {
	position: absolute;
	top: calc(100% + 3px);
	font-size: 12px;
	font-weight: 500;
}
.range::before {
	content: "0°";
	left: 16px;
}
.range::after {
	content: attr(data-to) "°";
	right: 12px;
}
.range input {
	flex: 1 1 auto;
}
.range-set .range-set__slider {
	height: auto;
	width: 100%;
}

/*.range:before{ content:""; position:absolute; top:0px; left:0px; bottom:0px; width:15px; height:100%; background:#758FAD url('res/img/larrow.svg') center center no-repeat; border-radius:3px 0px 0px 3px; cursor:pointer; }
.range:after{ content:""; position:absolute; top:0px; right:0px; bottom:0px; width:15px; height:100%; background:#758FAD url('res/img/rarrow.svg') center center no-repeat; border-radius:0px 3px 3px 0px; cursor:pointer; }*/
.range .btn_left, .range .btn_right {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 14px;
	cursor: pointer;
	background-color: var(--color-primary);
	transition: opacity 0.4s;
	border: transparent;
	padding: 0;
}
.range .btn_left:hover, .range .btn_right:hover {
	opacity: 0.75;
}
.range .btn_left {
  border-radius: 5px 0px 0px 5px;
}
.range .btn_right {
  border-radius: 0px 5px 5px 0px;
}

.range .btn_left:after {
  content: "";
  border: solid 8px transparent;
  border-right: solid 8px var(--color-light);
	border-left-width: 0px;
}
.range .btn_right:after {
  content: "";
  border: solid 8px transparent;
  border-left: solid 8px var(--color-light);
	border-right-width: 0px;
}

input[type="color"] {
  width: 100%;
  height: 25px;
  display: block;
}

/* textarea {
  width: 100%;
  height: 95px;
  border: solid 1px #758FAD;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  display: block;
  resize: none;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  background: #fff;
  border-radius: 3px;
  filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
} */

input[type="file"] {
  width: 0px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top: -1000px;
}

.axis_holder {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: stretch;
}

/*#show_settings{ width:20px; height:20px; padding:0px; margin:0px; border:0; background:transparent; cursor:pointer; position:absolute; top:0px; left:0px; z-index:99; color:#777; text-align:center; }
#show_settings svg{ width:100%; height:100%; }*/
#settings {
  display: none;
  background: #fff;
  color: #333;
  text-align: left;
  z-index: 100;
  padding: 25px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
/* #canvas_bg {
  width: 620px;
  height: 620px;
  position: relative;
  background: transparent;
  border: 0;
} */

.canvas {
  width: 620px;
  height: 620px;
  background: transparent;
  position: relative;
  z-index: 5;
}

/* .nose_wrapper {
  width: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  background: transparent;
}

.nose_wrapper .info {
  width: 700px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;
  transform-origin: 0% 100%;
  transform: rotateZ(90deg);
}

.nose_wrapper .line {
  padding: 0;
  margin: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.nose_wrapper .word {
  padding: 0px 10px;
  color: #000;
  font-size: 30px;
  letter-spacing: 1px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: 'Inter';
  font-weight: bold;
} */

#nose_left {
  display: block;
}

#nose_right {
  display: none;
}

hr {
  border: none;
  border-top: 1px solid #000;
}



#spiner1 .wrap {
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 0px;
  padding: 0px;
  margin: 0px;
}

#spiner1 .item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;
  padding: 0px;
  margin: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  flex: 1 1 0px;
  gap: 10px;
}

#spiner1 .inner {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  padding: 0px;
  margin: 0px;
  flex-grow: 1;
  flex-shrink: 1;
}


#spiner1 input[type="text"] {
  text-align: center;
  border-radius: 3px;
}

/* #patient_data {
  min-height: 600px;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0px;
  margin: 0px;
  background: transparent;
}

#patient_data h2 {
  display: block;
  text-align: left;
  padding: 10px 0px;
  margin: 0px;
  text-transform: uppercase;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  color: #000;
} */

/* #patient_data .line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;
  gap: 20px;
  padding: 10px 0px;
  margin: 0px 0px 10px;
}

#patient_data .line .item {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  flex: 1 1 0px;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;
  padding: 0px;
  margin: 0px;
  text-align: left;
}

#patient_data .line .item div {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: right;
  padding-right: 5px;
}

#patient_data .line .item div:first-child {
  min-width: 70px;
  flex-grow: 0;
  flex-shrink: 0;
}

#patient_data .line span {
  color: #000;
  font-family: 'Inter';
  font-style: normal;
  font-weight: bold;
  font-size: 9px;
  line-height: 10px;
  white-space: normal;
} */

.photo {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 620px;
  max-height: 620px;
  padding: 0px;
  margin: 0;
  /*background: transparent url('../../images/eye.png') center center no-repeat;*/
  background-size: cover;
  touch-action: none;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.7;
  z-index: 4;
}

.photo .marker {
  display: none;
  background: #000;
  width: 10px;
  height: 10px;
  position: absolute;
  padding: 0;
  margin: 0;
  opacity: 1;
}

.photo .a {
  top: 0;
  left: 0;
}

.photo .b {
  top: 0;
  right: 0;
}

.photo .c {
  bottom: 0;
  right: 0;
}

.photo .d {
  bottom: 0;
  left: 0;
}

.photo .e {
  bottom: 50%;
  left: 0;
  margin-bottom: -5px;
}

.photo .f {
  top: 0;
  left: 50%;
  margin-left: -5px;
}

.photo .g {
  top: 50%;
  right: 0;
  margin-top: -5px;
}

.photo .h {
  bottom: 0;
  right: 50%;
  margin-right: -5px;
}

.tool-layout__output .canvas_render:hover .photo {
  opacity: 0.3;
  z-index: 6;
  border: 1px dashed #000;
}

.tool-layout__output .canvas_render:hover .photo .marker {
  display: block;
}

#buttons_down {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;
  gap: 30px;
  padding: 0px;
  margin: 0px;
}

#buttons_down .item {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0;
  margin: 0;
  flex: 1 1 0px;
}

*.downloader, *.btn {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 50px;
	color: var(--color-light);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	background-color: var(--color-primary);
	background-clip: padding-box;
	border: 2px solid var(--color-btn-border);
	outline: none;
	border-radius: 6px;
  padding: 10px 22px;
	cursor: pointer;
	transition: opacity 0.4s;
}
.btn_active, .uc-params-tab-btn input:checked ~ .btn  {
	color: var(--color-primary);
	background-color: var(--color-light-gray);
	border-color: var(--color-primary);
}
*.downloader:hover, button.btn:hover, a.btn:hover,
*.downloader:focus, button.btn:focus, a.btn:focus {
	color: var(--color-light);
	background-color: var(--color-primary);
	outline: none;
}
button.btn.btn_inverted, a.btn.btn_inverted {
	color: var(--color-primary);
	background-color: var(--color-light);
}
button.btn.btn_inverted:hover, a.btn.btn_inverted:hover {
	color: var(--color-primary);
	background-color: var(--color-light);
}
.downloader b {
	font-size: 1.4em;
}
.downloader:hover, .btn:hover {
	opacity: 0.75;
}
#settings {
  padding-bottom: 60px;
  filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
  background: #F0F0F0;
  border-radius: 5px;
}

#settings h2 {
  display: block;
  text-align: left;
  padding: 10px 0px;
  margin: 0px;
  text-transform: uppercase;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  color: #000;
}

#settings .field {
  display: block;
  position: absolute;
  bottom: 70px;
  left: 25px;
  right: 25px;
  top: 70px;
  overflow-y: auto;
}

#settings .line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  gap: 15px;
  padding: 0px;
  margin: 15px 0px;
}

#settings .line .item {
  flex-grow: 0;
  flex-shrink: 0;
  flex: 1 1 0px;
  padding: 0px;
  margin: 0px;
  text-align: left;
}

#settings .line .item span {
  display: block;
  color: #666;
  font-size: 14px;
}

#settings .line .item input[type="text"] {
  display: block;
  width: 100%;
  height: 30px;
  border: solid 1px #666;
}

#settings .line .item input[type="range"] {
  width: 100%;
  height: 30px;
  display: block;
}

#settings .line .item input[type="color"] {
  width: 100%;
  height: 30px;
  display: block;
}

#settings .line .item input[type="checkbox"] {
  margin: 5px;
  display: block;
}

#settings .buttons {
  position: absolute;
  bottom: 10px;
  left: 15px;
  right: 15px;
  width: auto;
}

#image_loader {
  display: none;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

#image_loader .closer {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#image_crop_container {
  width: 640px;
  height: 640px;
  background: #fff;
  position: relative;
}

#save_crop {
  width: 70px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  border: solid 2px #fff;
  border-radius: 5px;
  padding: 0px;
  margin: 210px 0px 0px 180px;
  background: #758FAD;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: duration 0.7s;
  font-family: 'Inter';
  font-style: normal;
  font-weight: bold;
}

#save_crop:hover {
  border-radius: 0;
}

#image_loader .cr-slider-wrap {
  display: none;
}

#output {
  display: none;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

#output canvas {
  margin: auto;
}

#overlay {
  display: none;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  text-align: initial;
}

.spinner {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  animation: spinner-wiggle 1.2s infinite;
}

.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: .05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.spinner:before {
  border-top-color: #66e6ff;
}

.spinner:after {
  border-top-color: #f0db75;
  animation-delay: 0.3s;
}

.col {
	display: grid;
	gap: 24px;
}

.range-set {
	align-self: start;
	justify-self: start;
	display: inline-flex;
	flex-direction: column;
	padding-bottom: 1em;
}
.range-set__header {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	gap: 24px;
	margin-bottom: 4px;
}
.range-set__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-primary);
}
.range-set__set {
	display: grid;
	grid-auto-flow: column;
	gap: 8px;
}
.range-set .range-set__value {
	width: 42px;
	line-height: 1.2;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	padding: 2px 4px;
	filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
  z-index:2;
}
.tool-layout {
  position: relative;
}
.container {
	width: 100%;
	max-width: 1830px;
	margin: 0px auto;
	padding: 10px 16px;
}
.tool-layout__tool {
	display: grid;
	grid-template-columns: minmax(min-content, 9.6fr) minmax(600px, 8.6fr);
	align-items: start;
	gap: 40px;
	z-index: 2;
}
.tool-layout__plan {
	z-index: 1;
}
.tool-layout__wrapper {
	font-family: Inter;
	line-height: 1.2;
	display: grid;
}
.tool-layout__wrapper > * {
	position: relative;
	left: 0;
	top: 0;
	grid-row: 1/span 1;
	grid-column: 1/span 1;
	background-color: var(--color-light);
}
.tool-layout__settings {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vh - 100px);
}
@media (max-width: 1700px) {
	.tool-layout__wrapper {
		gap: 20px;
	}
}
.tool-layout__output {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.axis-controls {
	padding-bottom: 36px;
}
.axis-controls__inner {
	position: relative;
	left: 0;
	top: 0;
	display: inline-grid;
	grid-template-columns: 100%;
	gap: 16px;
	z-index: 0; 
  margin-bottom:20px;
}
.axis-controls__row {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 25px;
}
.tool-layout__left {
	display: flex;
	flex-direction: column;
}
.tool-layout__left-body {
	display: flex;
}
.tool-layout__left-header {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	text-align: left;
	margin-bottom: 20px;
	padding-left: 45px;
}
/* .tool-layout__left-header[data-eye="right"] {
	padding-left: 45px;
} */
.tool-layout-ruler {
	display: flex;
	justify-content: space-between;
	border-top: 3px solid var(--color-primary);
	padding-bottom: 16px;
	width: 100%;
	max-width: 543px;
	margin-top: 10px;
}
.tool-layout-ruler > * {
	width: 3px;
	background-color: var(--color-primary);
}
.tool-layout-ruler > *:nth-child(3n + 1) {
	position: relative;
	left: 0;
	top: 0;
	height: 14px;
}
.tool-layout-ruler > *:nth-child(3n + 1)::after {
	content: attr(data-value);
	position: absolute;
	left: 50%;
	top: calc(100% + 2px);
	font-size: 15px;
	transform: translateX(-50%);
	font-weight: 700;
}
.tool-layout-ruler > *:nth-child(3n + 2) {
	height: 14px;
}
.tool-layout__axis-2-toggle-wrap {
	position: absolute;
	display: flex;
	align-items: flex-end;
	width: 100%;
	top: calc(100% - 16px);
	left: 10%;
	z-index: 1;
}
.tool-layout__axis-2-toggle-wrap > * {
	flex: 0 0 auto;
}
.tool-layout__axis-2-toggle-wrap::before, .tool-layout__axis-2-toggle-wrap::after {
	content: "";
	display: inline-block;
	flex: 0 0 16%;
	top: -8px;
	height: 34px;
	border: 3px solid var(--color-primary);
	border-top: none;
	z-index: -1;
	margin-bottom: 10px;
}
.tool-layout__axis-2-toggle-wrap::before {
	border-right: none;
}
.tool-layout__axis-2-toggle-wrap::after {
	border-left: none;
}

.axis-controls__inner{ position:relative; z-index:2; }
.checkers_row{ display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:0; padding:0px; margin:0px; } 
.checkers_cell{ display:flex; flex:0 0 33%; justify-content:end; }
.tool-layout__axis-2-toggle {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 30px;
  z-index: 1; 
  margin-right:10px; 
} 
.tool-layout__axis-2-toggle:before{
  content: "";
  position:absolute; 
  top: -35px; 
  left: 9px; 
  height: 35px;
  border: 1px solid var(--color-primary);
  border-top: none;
  z-index: -1;
} 
.tool-layout__axis-2-toggle:after{
  content: "";
  position:absolute; 
  bottom: -30px; 
  left: 9px; 
  height: 30px;
  border: 1px solid var(--color-primary);
  border-top: none;
  z-index: -1;
}

.tool-layout__satellites-toggle-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 30px;
  z-index: 1;
} 
.tool-layout__satellites-toggle-wrap:before{
  content: "";
  position:absolute; 
  top: -35px; 
  left: 9px; 
  height: 35px;
  border: 1px solid var(--color-primary);
  border-top: none;
  z-index: -1;
} 
.tool-layout__satellites-toggle-wrap:after{
  content: "";
  position:absolute; 
  bottom: -30px; 
  left: 9px; 
  height: 30px;
  border: 1px solid var(--color-primary);
  border-top: none;
  z-index: -1;
}

.tool-layout__right {
	position: relative;
	left: 0;
	top: 0;
}
.tool-layout__left-content {
	position: relative;
	left: 0;
	top: 0;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10px;
}
.tool-layout__nose-decor {
	flex: 1 1 auto;
	min-width: 160px;
	max-width: 160px; /*200px;*/
	transition: flex-basis 0.4s;
}
[data-eye="left"] .tool-layout__nose-decor_right {
	flex: 0 0 0%;
}
[data-eye="right"] .tool-layout__nose-decor_left {
	flex: 0 0 0%;
}
.nose-decor {
	position: relative;
	left: 0;
	top: 0;
}
.nose-decor__inner {
	position: relative;
	left: 0;
	top: 50%;
	padding-top: 410%;
	transform: translateY(-50%);
}
.nose-decor__inner > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.nose-decor_left {
	border-left: 7px solid var(--color-dark);
}
.nose-decor_right {
	border-right: 7px solid var(--color-dark);
}
.nose-decor_left .nose-decor__inner {
	margin-right: 25px;
}
.nose-decor_right .nose-decor__inner {
	margin-left: 25px;
}
.nose-decor_right img {
	transform: scaleX(-1);
}
.nose-decor_left.nose-decor_flip img {
	transform: scaleY(-1);
}
.nose-decor_right.nose-decor_flip img {
	transform: scale(-1, -1);
}

.nose-decor_left::after, .nose-decor_right::after {
	content: "Nose";
	position: absolute;
	top: 32px;
	color: var(--color-primary);
	font-size: 42px;
	font-weight: 600;
	line-height: 120%;
	text-transform: uppercase;
	transform: rotate(-90deg);
}
.nose-decor_left::before, .nose-decor_right::before {
	position: absolute;
	top: 32px;
	color: var(--color-primary);
	font-size: 30px;
	font-weight: 600;
	line-height: 120%;
	text-transform: uppercase;
	white-space: nowrap;
}
.nose-decor_left::after {
	left: -10px;
}
.nose-decor_right::after {
	right: -10px;
}
.nose-decor_flip::after {
	top: auto;
	bottom: 32px;
}
.cm-checkbox {
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--size, 22px);
	width: var(--size, 22px);
	background: var(--color-light);
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	cursor: pointer;
	transition: opacity 0.4s;
}

.cm-checkbox__thumb {
	flex: 0 1 60%;
	display: inline-block;
	position: relative;
	left: 0;
	top: -8%;
	height: 35%;
	border: 3px solid var(--color-primary);
	border-top-width: 0px;
	border-right-width: 0px;
	transform: rotate(-45deg) skewX(-5deg);
	opacity: 0;
	transition: opacity 0.4s;
}
.cm-checkbox input:checked ~ .cm-checkbox__thumb {
	opacity: 1;
}
.cm-checkbox:hover {
	opacity: 0.75;
}
.cm-checkbox input {
	display: none;
} 

.cm-checkbox2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--size, 22px);
  width: var(--size, 22px);
  background: var(--color-light);
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.4s;
}

.cm-checkbox2__thumb {
  flex: 0 1 60%;
  display: inline-block;
  position: relative;
  left: 0;
  top: -8%;
  height: 35%;
  border: 3px solid var(--color-primary);
  border-top-width: 0px;
  border-right-width: 0px;
  transform: rotate(-45deg) skewX(-5deg);
  opacity: 0;
  transition: opacity 0.4s;
}
.cm-checkbox2 input:checked ~ .cm-checkbox2__thumb {
  opacity: 1;
}
.cm-checkbox2:hover {
  opacity: 0.75;
}
.cm-checkbox2 input {
  display: none;
}

.form {
}
.form__title {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	text-align: left;
	margin-bottom: 12px;
	padding-left: 74px;
}
.form__body {
	display: grid;
	gap: 16px 36px;
	margin-bottom: 24px;
}
.form__actions {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-top: -24px;
	padding-left: 74px;
}
.form__actions > * {
	margin-left: 10px;
	margin-top: 24px;
}
.form-section_spaced {
	padding-top: 4px;
}
.form-section__title {
	color: var(--color-primary);
	font-size: 18px;
	font-weight: 700;
	text-align-last: left;
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-left: 74px;
}

  .span-1 {
	grid-column: auto/span 1;
  }

  .span-2 {
	grid-column: auto/span 2;
  }
  
  .span-4 {
	grid-column: auto/span 4;
  }
  
  /* Adjust tool-form-selected to match new layout */
  .tool-form-selected__inner {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
  }
  
  /* Style for readonly inputs */
  input[readonly].form-field__input {
	background-color: #f5f5f5;
	cursor: default;
  }

/* Update grid template for 4 columns */
.form-section__body {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: start;
	gap: 14px 20px;
}
  
.section-parameters .form-section__body {
	grid-template-columns: 120px repeat(7, 1fr);
}

.section-parameters .form-section__separator {
	grid-column: auto / span 8;
}

  /* Adjust tool-form-selected to match new layout */
  .tool-form-selected__inner {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
  }
  
  /* Style for readonly inputs */
  input[readonly].form-field__input {
	background-color: #f5f5f5;
	cursor: default;
  }

.form-section__body_big-gap {
	gap: 20px 50px;
}
@media (max-width: 1640px) {
	.form-section__body_big-gap {
		gap: 20px 25px;
	}
}
.form-section__separator {
	grid-column: auto/span 6;
	display: flex;
	margin: 4px 0 0px;
}
.form-section__separator::after {
	content: "";
	flex: 1 0 auto;
	display: inline-block;
	height: 4px;
	background-color: var(--color-primary);
}

/* Стили для контролов Customizations start */
.color-picker {
	width: 42px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	background-color: var(--color-light);
	cursor: pointer;
  }
  
  /* Стили для легенды */
  .plan-legend {
	position: relative;
	margin-top: 20px;
	text-align: left;
  }
  
  .plan-legend__content {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 9px; /* Выравнивание по левой шкале */
  }
  
  .plan-legend__text {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 500;
  }
  
  .plan-legend__arrow {
	display: inline-block;
	vertical-align: middle;
  }
  
  .plan-legend__arrow line,
  .plan-legend__arrow marker polygon {
	stroke: currentColor;
	fill: currentColor;
  }

.segment-fields.tool-form-selected {
	grid-column: auto/span 8;
}
.tool-form-selected__underlay {
	background-color: #E2E2E2;
	margin: -10px -20px -10px 0;
	padding: 10px 20px 10px 0;
}
.segment-fields .tool-form-selected__inner {
	display: grid;
	grid-template-columns: 170px repeat(3, 1fr);	
}

.tool-form-selected__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 50px;
}
@media (max-width: 1640px) {
	.tool-form-selected__inner {
		gap: 25px;
	}
}
.span-2 {
	grid-column: auto/span 2;
}
.span-3 {
	grid-column: auto/span 3;
}
.span-4 {
	grid-column: auto/span 4;
}
.span-6 {
	grid-column: auto/span 6;
}
.row-span-3 {
	grid-row: auto/span 3;
}
.self-stretch {
	align-self: stretch;
}
.input-with-units {
	position: relative;
	left: 0;
	top: 0;
}

.input-with-units::after {
	content: attr(data-unit);
	display: inline-block;
	position: absolute;
	right: 6px;
	top: 50%;
	color: var(--color-primary);
	font-size: 0.8em;
	transform: translateY(-50%);
}
.input-with-units input {

}
.input-with-units[data-unit="mm"] input {
	padding-right: 2em;
}
.input-with-units[data-unit="microns"] input {
	padding-right: 3.5em;
}
.form-group {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	/* gap: 4px 8px; */
}
.form-group_title-slim {
	grid-template-columns: 60px 1fr;
}
.form-group .form-group__title {
	width: 75px;
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	margin: 0;
}
.form-group__spacer {
	width: 66px;
}
.form-group__spacer_slim {
	width: 60px;
}
.form-group__title_small {
	font-size: 12px;
}

.tool-layout-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter;
	color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    margin-top: 10px;
}
.tool-layout-legend span {
    text-transform: uppercase;
}

.tool-layout-legend__arrow {
    margin-left: 5px;
}

.tool-layout-legend__arrow .arrow-group {
    color: #4cb846; /* Цвет по умолчанию */
}

.tool-layout-legend__arrow:after,
.tool-layout-legend__arrow:before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    transform-origin: right center;
    background-color: inherit; /* Наследует цвет от родителя */
}

.tool-layout-legend__arrow:after {
    transform: rotate(30deg);
}

.tool-layout-legend__arrow:before {
    transform: rotate(-30deg);
}

.form-group__body {
	display: grid;
	grid-auto-columns: 1fr;
	align-content: start;
	gap: 16px;
}
.form-group__body_pi-align {
	display: grid;
	grid-auto-flow: column;
	gap: 0px 50px;
}
.form-group__body_horizontal {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-content: stretch;
}
.form-group__body_pi-align > *:nth-child(2) {
	margin-left: 74px;
}
.form-group__body_pi-align > *:nth-child(3) {
	margin-left: 68px;
}
.form-group_horizontal .form-group__body {
	grid-auto-flow: column;
}
.flex-full-width {
	flex: 1 0 calc(100% - 10px);
}
.form-field {
	display: inline-grid;
	grid-template-columns: 66px 1fr;
	align-items: center;
	justify-content: start;
	gap: 3px 8px;
}
.form-field_title-slim {
	grid-template-columns: 60px 1fr;
}
.form-field_secondary {
	grid-template-columns: 1fr;
}
.form-field__title {
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
}
.form-field__tip {
	font-size: 8px;
}
.form-field_secondary .form-field__title {
	font-size: 12px;
	text-transform: none;
	margin-bottom: -6px;
}
input[class~="form-field__input"], select[class~="form-field__input"], textarea[class~="form-field__input"] {
	font-family: Inter;
	width: 100%;
	min-width: 1px;
	min-height: var(--input-height);
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	padding: 4px 8px;
	filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
}
select[class~="form-field__input"] {
	font-size: 14px;
}
select.form-field__input {
	text-transform: uppercase;
}
.form-field__input_slim {
	max-width: 80px;
	min-width: 80px;
}
.form-field__input_mid {
	max-width: 130px;
}
.pi-form-field__textarea {
	min-height: 78px;
}
.btn.pi-form-field-btn {
	min-height: var(--input-height);
	font-size: 12px;
	padding: 2px;
	box-sizing: border-box;
	border: none;
}
/* .logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
} */
.plan__container {
	display: grid;
	grid-template-columns: 11.8fr 6.3fr;
}
.plan__chart {
	display: flex;
}
.plan-chart__inner {
	flex: 1 1 auto;
	display: flex;
	margin-left: -10px;
}
.plan-chart__inner > * {
	margin-left: 10px;
}
.plan-chart__nose-decor {
	flex: 1 1 auto;
	min-width: 180px;
	max-width: 240px;
}
[data-eye="right"] .plan-chart__nose-decor_right,
[data-eye="left"] .plan-chart__nose-decor_left {
	min-width: 0;
	max-width: 0;
	width: 0;
	/* overflow: hidden; */
}
[data-eye="right"] .plan-chart__nose-decor_right::after,
[data-eye="left"] .plan-chart__nose-decor_left::after {
	display: none;
}
.plan-form-section {
	display: flex;
	flex-direction: column;
}
.plan-form-section__title {
	align-self: start;
	font-size: 18px;
	font-weight: 600;
	justify-content: center;
	text-align: center;
	color: var(--color-light);
	background-color: var(--color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.plan-form-section__body {
	display: grid;
	grid-template-columns: repeat(3, min-content);
	gap: 20px 30px;
	justify-content: space-between;
	align-items: end;
}
.plan-chart__chart {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.plan-form {
	display: flex;
	flex-direction: column;
	padding: 10px 40px;
}
.plan-form__logos {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}
.plan-form__inner {
	display: flex;
	flex-direction: column;
}
.plan-form__logo {
	align-self: center;
	width: 220px;
}
.plan-form__title {
	align-self: start;
	color: var(--color-primary);
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 20px;
}
.plan-form__top {
	display: grid;
	gap: 6px;
	margin-bottom: 20px;
}
.plan-form__separator {
	height: 4px;
	background-color: var(--color-primary);
	margin: 20px 0px;
}

.plan-form__mid {
	margin-bottom: 24px;
}
.blank-field {
	display: grid;
	grid-template-columns: 1.4fr 3.4fr;
	gap: 20px;
}
.blank-field_primary {
	grid-template-columns: auto auto;
	gap: 4px;
}
.blank-field__title {
	display: flex;
	align-items: center;
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
}
.blank-field .blank-field__title {
	margin: 0;
}
.blank-field_primary .blank-field__title {
	font-size: 16px;
	font-weight: 700;
}
.blank-field__value {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	padding: 2px 0;
}
.blank-field__value_slim {
	width: 56px;
}
.blank-field__value_mid {
	width: 76px;
}
.blank-field__value:empty {
	border-bottom: 2px solid var(--color-primary);
}
.blank-field_notes {
	grid-template-columns: 1fr;
	gap: 6px;
}
.blank-field_notes .blank-field__value {
	min-height: 120px;
	border: 2px solid var(--color-primary);
	border-radius: 5px;
	padding: 4px 4px;
}
.blank-field_notes .blank-field__title {
	font-size: 18px;

}
/* User cabinet */
.user-cabinet {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.user-cabinet__container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: 1340px;
	padding: 0px 20px;
	margin: auto;
}
.user-cabinet-header {
	
}
.user-cabinet__header {
	border-bottom: 1px solid var(--color-primary);
}
.user-cabinet-header__container {
	display: grid;
	grid-auto-flow: column;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	width: 100%;
	min-height: 94px;
	max-width: 1160px;
	padding: 12px 20px;
	margin: auto;
}
.user-cabinet-link {
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 400;
	transition: opacity 0.4s;
	cursor: pointer;
}
.user-cabinet-link:hover {
	opacity: 0.65;
}
.user-cabinet-link_active {
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
}
.user-cabinet-header__group {
	display: grid;
	grid-auto-flow: column;
	gap: 20px 100px;
}
.plan {
	display: flex;
}
.plans-list {
	display: grid;
	gap: 18px;
}
.plan-record__header {
	display: grid;
	grid-template-columns: auto max-content;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	min-height: 78px;
	border: 2px solid var(--color-primary);
	border-radius: 5px;
	padding: 6px 6px 6px 24px;
}
.plan-record__title {
	color: var(--color-primary);
	font-size: 22px;
	font-weight: 600;
}
.plan-record__actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 5px;
}
.plan-record__btn {
	max-width: 126px;
	font-size: 16px;
	text-transform: none;
	padding: 8px 14px;
}
.plan-record__edit-form {
	padding-top: 40px;
}
.plan-record__header:not(:hover) .plan-record__btn {
	opacity: 0;
}
.disclosure {
	display: grid;
	grid-template-columns: 100%;
}
.disclosure__body {
	height: 0;
	will-change: height;
	transition: height 0.4s;
	overflow: hidden;
}
.disclosure.open .disclosure__body {
	height: var(--inner-height, 100%);
}

.fz-12 {
	font-size: 12px;	
}
.pb-18 {
	padding-bottom: 12px;
}
.select {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}
.select__control {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	left: 0;
	top: 0;
	max-width: 100%;
	min-height: var(--input-height);
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	overflow: hidden;
	transition: opacity 0.4s;
	padding: 4px 50px 4px 4px;
	cursor: pointer;
}
.select__control input {
	flex: 1 1 auto;
	min-width: 0px;
}
.select__control input, .select__control input::placeholder {
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 500;
}
.select__control input::placeholder {
	font-weight: 600;
	text-align: center;
}
.select__control .item {
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}
.select.has-items .select__control input {
	display: none;
}
.select__control::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 9px;
	height: 9px;
	display: inline-block;
	border: 2px solid var(--color-primary);
	border-left: none;
	border-top: none;
	transform: rotate(45deg) translate(-50%, -50%);
	transition: transform 0.4s;
}
.select.dropdown-active .select__control::after {
	transform: rotate(45deg) translate(-25%, -10%) scale(-1);
}
.select__dropdown {
	left: 50%;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	overflow: auto;
	min-width: 320px;
	max-width: 370px;
	max-height: 120px;
	transform: translateX(-50%);
	padding: 4px 7px;
}
.select__dropdown .ts-dropdown-content {
	max-height: none;
}
.select__dropdown::-webkit-scrollbar {
  width: 10px;
	border-radius: 4px;
}
.select__dropdown::-webkit-scrollbar-track {
  background: var(--color-light);
	border-radius: 4px;
}
.select__dropdown::-webkit-scrollbar-thumb {
	width: 8px;
  background: var(--color-primary);
	border: 1px solid var(--color-light);
	border-radius: 4px;
	cursor: pointer;
}
.select__option {
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var(--color-primary);
	padding: 8px 12px;
}
.select__option:last-child {
	border: none;
}
.plugin-clear_button .clear-button {
	--ts-pr-caret: 28px;
	top: calc(50% - 0.05em);
	color: var(--color-primary);
	font-size: 20px;
	z-index: 1;
}
.params-select__control {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	left: 0;
	top: 0;
	background-color: var(--color-primary);
	padding: 0px 20px 0px 4px;
	filter: drop-shadow(2px 2px 2px rgba(145, 145, 145, 0.749));
}
.params-select__control::after {
	border-width: 2px;
	border-color: var(--color-light);
}
.params-select__control:hover {
	opacity: 0.65;
}
.params-select__control > .item {
	flex: 1;
	color: var(--color-light);
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	overflow: hidden;
	word-spacing: 100px;
}
.params-select__control {
	cursor: pointer;
}
.select__dropdown.params-select__dropdown {
	left: auto;
	right: 0px;
	transform: none;
}
.select__dropdown.sp-modal-select__dropdown {
	left: 0px;
	right: auto;
	transform: none;
}
.params-select__option {
}

.sp-modal-field {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
	min-height: 44px;
	align-items: end;
	color: var(--color-primary);
	line-height: 0.9;
	text-transform: uppercase;
	background-color: var(--color-light);
	padding: 8px 10px 4px;
	border-radius: 5px;
}
.sp-modal-field__tip {
	font-weight: 600;
}
.sp-modal-field__input {
	border-bottom: 1px solid var(--color-primary);
	padding: 0px;
}
.sp-modal-field__title {
	grid-column: 2/span 1;
	font-size: 12px;	
}
.sp-modal-select__control {
	color: var(--color-primary);
	font-size: 13px;
	min-height: 44px;
	background-color: var(--color-light);
	padding-top: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
}
.sp-modal-select__control input::placeholder {
	text-transform: uppercase;
}
.sp-modal__form {
	display: grid;
	gap: 20px;
}
/* Dashboard */
.uc-dashboard {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.uc-dashboard__header {
	flex: 0 0 auto;
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	gap: 70px;
	padding: 36px 70px;
}
.uc-dashboard__header-btn {
	flex: 1 0 auto;
	font-size: 28px;
	font-weight: 600;
	min-width: 320px;
	padding: 18px 34px;
}
.uc-dashboard__header-btn.btn_active {
	font-weight: 700;
	box-shadow: 2px 2px 6px 1px var(--color-primary-shadow);
}
.uc-dashboard__body {
	flex: 1 0 auto;
}
.details-body {
	padding: 76px 20px 42px;
}
.details-form {
	display: grid;
	gap: 20px;
	width: 100%;
	max-width: 580px;
	margin: 0px auto;
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	padding: 26px 34px 20px;
	box-shadow: 2px 2px 6px 1px var(--color-primary-shadow);
}
.details-form__field {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 4px 0px;
}
.details-form__field .form-field__input {
	min-height: 34px;
}

.details-form__field .form-field__title {
	font-size: 14px;
	line-height: 1.2;
	text-transform: none;
}
.details-form__uploader {
	font-size: 18px;
	font-weight: 700;
	min-height: 34px;
	padding: 6px 8px;
}
.details-form__save-btn {
	font-size: 22px;
	font-weight: 700;
	min-width: 120px;
	min-height: 30px;
	padding: 4px 24px;
}
.details-form__actions {
	justify-self: center;
	padding-top: 14px;
}
/* Dashboard parameters */
.tabs__body {
	display: grid;
	grid-template-columns: 1fr;
}
.tabs__body > * {
	grid-row: 1/span 1;
	grid-column: 1/span 1;
	visibility: hidden;
}
.tabs__body > *.active {
	visibility: visible;
}
.uc-params__header {
	display: grid;
	grid-auto-flow: column;
	justify-content: space-around;
	gap: 50px;
	padding: 30px 20px 20px;
}
.uc-params-tab-btn {
	min-width: 220px;
}
.uc-params-tab-btn > input {
	display: none;
}
.uc-params__body {
	padding: 0px 40px 40px;
}
.uc-params__tab {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.uc-params-form {
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	padding: 30px 40px;
}
.uc-params-form__body {
	display: grid;
	gap: 28px;
	margin-bottom: 30px;
}
.uc-params-form__actions {
	display: grid;
	grid-auto-flow: column;
	gap: 40px;
}
.uc-params-form__section {
	display: grid;
	gap: 22px;
}
.uc-params-form__selected {
	background-color: #E2E2E2;
	padding: 14px 40px 18px;
	margin: 0px -40px;
}
.uc-params-form-group {
	display: grid;
	gap: 8px;
}
.uc-params-form-group__title {
	font-size: 22px;
	font-weight: 700;
	text-align-last: left;
	text-transform: uppercase;
}
.uc-params-form-group__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.uc-params-form-field {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
.uc-params-form-field__title {
	font-size: 16px;
	font-weight: 500;
}
.uc-params-form-field__input {
	color: var(--color-primary);
	min-height: 42px;
}
.uc-params-form-field__input_primary {
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

.records-list {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap: 14px;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	padding: 30px 40px;
	overflow: auto;
	max-height: 750px;
	list-style: none;
}
.params-list__item .btn {
	width: 100%;
	text-transform: none;
}
.saved-plans__list {
	max-width: 820px;
	margin: auto;
}
.saved-plan-item {
	color: var(--color-light);
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background-color: var(--color-primary);
	border-radius: 8px;
	padding: 6px 6px 6px 34px;
}
.saved-plan-item__name {
	font-size: 26px;
	font-weight: 600;
}
.saved-plan-item__actions {
	display: grid;
	grid-auto-flow: column;
	gap: 18px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s;
}
.saved-plan-item:hover .saved-plan-item__actions {
	visibility: visible;
	opacity: 1;
}
.saved-plan-item__btn {
	font-size: 14px;
	font-weight: 700;
	padding: 4px 20px;
}
.logout-msg {
	font-size: 30px;
	font-weight: 600;
	padding: 40px 50px;
}

.auth-form {
	min-width: 500px;
	padding: 24px 40px 20px;
}
.auth-form__body {
	display: grid;
	gap: 6px;
	color: var(--color-light);
	margin-bottom: 24px;
}
.auth-form__title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 24px;
	text-transform: uppercase;
}
.auth-form-field {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 0px;
	text-align: left;
}
input[class~="auth-form-field__input"] {
	min-height: 38px;
}
.auth-form-field__title {
	font-size: 18px;
	font-weight: 400;
	padding-left: 6px;
	
}
.auth-form-field__tip {
	font-size: 11px;
	line-height: 0.7;
	margin-top: -2px;
	padding-left: 6px;
	padding-bottom: 0.4em;
}
.auth-form__actions {
	display: grid;
	grid-auto-flow: column;
	gap: 10px 30px;
	justify-content: center;
	justify-items: center;
}
.auth-form__actions_col {
	grid-auto-flow: row;
}
.auth-form__btn {
	flex: 0 0 auto;
	min-height: 0;
	font-size: 18px;
	font-weight: 600;
	padding: 6px 26px;
}
.auth-form__text-btn {
	font-size: 22px;
	font-weight: 600;
	background-color: transparent;
	border: none;
	outline: none;
	transition: opacity 0.4s;
}
.auth-form__text-btn:hover {
	opacity: 0.65;
}
.auth-form__text-btn_uppercase {
	text-transform: uppercase;
}
.login-form {
	padding-top: 40px;
	padding-bottom: 32px;
}
.login-form__btn {
	padding: 8px 20px;
	margin-bottom: 20px;
}

@keyframes spinner-spin {
  100% {
	transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
	opacity: .1;
  }

  40% {
	opacity: 1;
  }

  60% {
	opacity: .1;
  }
}

/* Shared */
.section-container {
	width: 100%;
	max-width: 1170px;
	padding: 15px;
	margin: auto;
}
.img-wrap {
	display: inline-block;
	position: relative;
	left: 0;
	top: 0;
}
.img-wrap * {
	display: inline-block;
}
.img-wrap img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}
.img-wrap_contain img {
	object-fit: contain;
}
.img-wrap__inner {
	width: 100%;
	padding-top: var(--height-ratio, 100%);
}
/* Showcase */
.cart-btn {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 500;
	transition: opacity 0.4s;
}
.cart-btn:hover {
	opacity: 0.65;
}
.cart-btn__icon-wrap {
	position: relative;
	left: 0;
	top: 0;
}
.cart-btn__icon {
	width: 1.5em;
	height: 1.5em;
	fill: var(--color-primary);
	stroke: var(--color-primary);
}
.cart-btn__items-number {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20%;
	top: 10%;
	width: 1.4em;
	height: 1.4em;
	color: var(--color-light);
	font-size: 0.8em;
	font-weight: 400;
	background-color: var(--color-primary);
	border-radius: 50%;
	transform: translate(50%, -50%);
}
.cart-btn__caption {
	position: relative;
	top: -0.1em;
	left: 0;
	font-weight: 600;
}

.showcase {
	color: var(--color-primary);
	padding-top: 60px;
	padding-bottom: 60px;
}
.showcase__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
.showcase__cart-btn {
	justify-self: end;
}

.showcase__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px 30px;
}
.showcase-card {
	text-align: left;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	padding: 16px 20px;
}
.showcase-card__inner {
	display: flex;
	flex-direction: column;
}
.showcase-card__img {
	margin-bottom: 18px;
}
.showcase-card__title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
}
.showcase-card__desc {
	font-size: 14px;
	margin-bottom: 14px;
}
.showcase-card__price {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
}
.showcase-card__actions {
	display: grid;
	grid-auto-flow: column;
	gap: 24px;
}
.showcase-card__btn {
	font-size: 10px;
	font-weight: 600;
	padding: 10px 15px;
	min-height: 32px;
	border: none;
	border-radius: 8px;
}
.drawer-close-btn {
	display: grid;
	font-size: 0;
	width: 20px;
	height: 20px;
	align-items: center;
	transition: opacity 0.4s;
}
.drawer-close-btn:hover {
	opacity: 0.65;
}
.drawer-close-btn::before, .drawer-close-btn::after {
	content: "";
	display: block;
	grid-column: 1/span 1;
	grid-row: 1/span 1;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary);
}
.drawer-close-btn::before {
	transform: rotate(-45deg);
}
.drawer-close-btn::after {
	transform: rotate(45deg);
}
.product-details-container {
	flex: 0 0 min-content;
	max-width: 100%;
	color: var(--color-primary);
	background-color: var(--color-light);
}
.product-details {
	text-align: left;
	min-width: 780px;
	padding: 40px 50px;
}
.product-details__inner {
	position: relative;
	left: 0;
	top: 0;
	display: grid;
	grid-template-columns: 3.8fr 2.4fr;
	gap: 50px;
}
.product-details__close-btn {
	position: absolute;
	left: auto;
	top: 0px;
	right: 0px;

	transform: translate(30px, -20px);
}
.product-details__right {
	display: flex;
	flex-direction: column;
}
.product-details__title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}
.product-details__desc {
	flex: 1 1 auto;
	font-size: 14px;
	margin-bottom: 30px;
}
.product-details__desc h5 {
	font-weight: 600;
	margin-bottom: 10px;
}
.product-details__desc p {
		margin-bottom: 16px;
}
.product-details__price {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 14px;
}
.product-details__btn {
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	min-height: 32px;
	border: none;
	border-radius: 8px;
}

.cart-products {
	width: 100%;
	overflow: auto;
}
.cart-products__table {
	border-collapse: collapse;
	text-align: left;
}
.cart-products thead {
	background-color: var(--color-light-gray);
}
.cart-products th {
	padding: 14px 44px;
}
.cart-products td {
	vertical-align: top;
	padding: 36px 22px;
}
.cart-products th:first-child,
.cart-products td:first-child,
.cart-products td:last-child,
.cart-products td:last-child {
	padding-left: 100px;
	padding-right: 0px;
	width: 1%;
}
.cart-products th:nth-child(2),
.cart-products td:nth-child(2) {
	padding-left: 0px;
}
.cart-products td:nth-last-child(2),
.cart-products td:nth-last-child(2) {
	padding-right: 0px;
}
.cart-products tbody tr {
	border-bottom: 1px solid var(--color-primary);
}
.cart-products__desc-cell {
	min-width: 220px;
}
.cart-products__img-cell {
	width: 12%;
	min-width: 100px;
}
.cart-products__img-wrap {
	width: 100%;
}
.cart-products__price {
	display: flex;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	padding-top: 0.4em;
	text-align: center;
}
.cart-products__qty-input {
	width: 5em;
	font-size: 16px;
	border: 1px solid var(--color-primary);
	padding: 0.5em 0.8em 0.4em;
}
.cart-products__actions-cell {
	position: relative;
	left: 0;
	top: 0.2em;
	display: flex;
	justify-content: center;
}
.cart-products__name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}
.drop-btn {
	font-size: 0;
	height: 26px;
	width: 26px;
	transition: opacity 0.4s;
}
.drop-btn svg {
	width: 100%;
	height: 100%;
	fill: var(--color-primary);
}
.drop-btn:hover {
	opacity: 0.65;
}
.cart-summary {
	color: var(--color-primary);
	font-weight: 700;
	text-align: left;
}
.cart-summary__container {
	padding-left: 50px;
	padding-right: 100px;
}
.cart-summary__header {
	font-size: 16px;
	background-color: var(--color-light-gray);
	padding: 12px 0px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.cart-summary__product-subtotal, .cart-summary__order-total {
	display: grid;
	grid-auto-flow: column;
	gap: 20px;
	justify-content: space-between;
}
.cart-summary__product-subtotal dt, .cart-summary__product-subtotal dd,
.cart-summary__order-total dt, .cart-summary__order-total dd {
	padding: 12px 0;
}
.cart-summary__product-subtotal {
	border-bottom: 1px solid var(--color-primary);
}
.cart-summary__order-total {
	background-color: var(--color-light-gray);
	margin-top: 18px;
	text-transform: uppercase;
}
.payment-methods {
	display: flex;
	flex-wrap: wrap;
}
.payment-methods__item {
	flex: 1 1 auto;
	min-width: calc(100%/3);
	max-width: 100%;
	min-height: 40px;
	background-color: var(--color-light-gray);
}
.payment-methods__img-wrap {
	--height-ratio: 40%;
	width: 120px;
}

.cart {
	color: var(--color-primary);
}
.cart__container {
	display: flex;
	flex-direction: column;
}
.cart__header {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 14px 100px;
}
.cart__title {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}
.cart__products {
	width: 100%;
	margin-bottom: 20px;
}
.cart__summary {
	margin-bottom: 20px;
}
.cart__payment-methods {
	
}
.cart__narrow-container {
	align-self: flex-end;
	min-width: 500px;
	max-width: 700px;
}
.button-group {
	display: flex;
	flex-direction: column;
}

.render .form__actions,
.render .form-group__body_vertical,
.render .axis-controls,
.render #wrapper_intr {
	display: none;
}

.render input,
.render textarea,
.render button {
	outline: none;
	-webkit-appearance: none;
}

.logo img,
.surgeon-logo img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.user-registration-img-container.surgeon-logo img {
	margin-bottom: 10px;
}

@media (min-width: 992px) and (max-width: 1200px) {
	.tool-layout__wrapper {
		zoom: .7;
	}
}
@media (min-width: 1200px) and (max-width: 1400px) {
	.tool-layout__wrapper {
		zoom: .8;
	}
}
.plan-chart__aye-mark {
	
}
.plan-chart__aye-mark::before {
	content: "Left eye";
	display: inline-block;
	color: var(--color-primary);
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	padding: 15px 0;
}

[data-eye="right"] .plan-chart__aye-mark::before {
	content: "Right eye";
}

.g-recaptcha {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 10px;
}

.user-registration-error,
.user-registration-error ul {
	padding: 0;
	margin: 0;
	list-style: none;
	color: #dc3232;
}

.canvas_render {
	position: relative;
}