/* https://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html */
.nctd-splitter {
  width: 100%;
  height: 100px;
  display: flex;
}

/* .nctd-separator { */
.gutter {
  cursor: e-resize;
  background-color: #aaa;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  width: 10px;
  display: flex;
  /* prevent browser's built-in drag from interfering */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nctd-dataGrid {
  width: 15%;
  /* height: 100%; */
  min-width: 125px;
}

.nctd-drawing {
  width: 80%;
  height: 100%;
  min-width: 100px;
}

.nctd-flex-container {
  display: flex;
  flex-wrap: nowrap;
  /* width: 100%; */
}

.nctd-form-group {
  margin-bottom: 5px;
}

.nctd-form-control-sm {
  height: calc(1em + 0.6rem + 2px);
  padding: 2px;
  margin: 2px;
}

.nctd-btn-sm {
  padding: 0.1rem 0.25rem;
  line-height: 1.2;
}
.nctd-btn-md {
  padding: 0.1rem 0.5rem;
  line-height: 1.5;
}

.nctd-table-sm td {
  padding: 0.2rem;
}

.nctd-drawing {
  display: flex;
  flex-grow: 1;
  /* height: calc(100vh - 20px);
  float: right;
  width: 80%; */
}
/* 
body {
    background: whitesmoke;
    position: relative;
} */

.nctd-svg-container {
  /* background-color: rgb(151, 151, 151); */
  /* background-color: gray; */
  /* background-color:whitesmoke; */
  /* width: 100%;
  height: 100%; */
}

.circle-color {
  fill: #123456;
}

.circle:hover {
  fill: red;
}

/* .wrapper,
button {
  display: block;
  margin: 0 auto;
} */

/* .wrapper {
  padding: 10px;
  margin: 0;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 2;
}

button {
  margin-bottom: 10px;
} */

/* .container {
  width: 100%;
  background-color: #ffcc33;
  display: inline;
  margin: auto;
} */

.nctd-dataGrid {
  /* float: left;
  height: 100%; */
  background-color: whitesmoke;
}

.nctdThumbnail {
  height: 60px;
  max-width: 150px;
}

.static {
  cursor: not-allowed;
}

.draggable {
  cursor: move;
  fill: red;
}

.panning {
  cursor: grabbing;
}

.inline {
  display: inline-block;
  *display: inline;
}

.nctd-highlightInput {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.undoSVG {
  /* background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D .st1%7Bfill:url(%23SVGID_2_);%7D .st2%7Bfill:url(%23SVGID_3_);%7D .st3%7Bfill:url(%23SVGID_4_);%7D .st4%7Bfill:url(%23SVGID_5_);%7D .st5%7Bfill:url(%23SVGID_6_);%7D .st6%7Bfill:url(%23SVGID_7_);%7D .st7%7Bfill:url(%23SVGID_8_);%7D .st8%7Bfill:url(%23SVGID_9_);%7D .st9%7Bfill:url(%23SVGID_10_);%7D .st10%7Bfill:url(%23SVGID_11_);%7D .st11%7Bfill:url(%23SVGID_12_);%7D .st12%7Bfill:url(%23SVGID_13_);%7D .st13%7Bfill:url(%23SVGID_14_);%7D .st14%7Bfill:url(%23SVGID_15_);%7D .st15%7Bfill:url(%23SVGID_16_);%7D .st16%7Bfill:url(%23SVGID_17_);%7D .st17%7Bfill:url(%23SVGID_18_);%7D .st18%7Bfill:url(%23SVGID_19_);%7D .st19%7Bfill:url(%23SVGID_20_);%7D%0A%3C/style%3E%3Cg%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='2.6954' y1='11.9641' x2='22.7497' y2='11.9641'%3E%3Cstop offset='0' style='stop-color:%231245C6'/%3E%3Cstop offset='1' style='stop-color:%239909B7'/%3E%3C/linearGradient%3E%3Cpath class='st0' d='M22,8.1c-0.5-1.2-1.2-2.3-2.1-3.2c-0.9-0.9-2-1.6-3.2-2.1c-1.2-0.5-2.5-0.8-3.9-0.8c-1.3,0-2.5,0.2-3.7,0.7 c-1.2,0.5-2.3,1.2-3.2,2L4.1,3C3.9,2.8,3.6,2.7,3.2,2.8C2.9,3,2.7,3.2,2.7,3.6v5.8c0,0.2,0.1,0.4,0.2,0.6c0.2,0.2,0.4,0.2,0.6,0.2 h5.8c0.4,0,0.6-0.2,0.8-0.5c0.1-0.3,0.1-0.6-0.2-0.9L8.2,7.1c0.6-0.6,1.3-1,2.1-1.3c0.8-0.3,1.6-0.5,2.5-0.5 c0.9,0,1.8,0.2,2.6,0.5c0.8,0.4,1.5,0.8,2.1,1.4c0.6,0.6,1.1,1.3,1.4,2.1c0.4,0.8,0.5,1.7,0.5,2.6c0,0.9-0.2,1.8-0.5,2.6 c-0.4,0.8-0.8,1.5-1.4,2.1c-0.6,0.6-1.3,1.1-2.1,1.4c-0.8,0.4-1.7,0.5-2.6,0.5c-1,0-2-0.2-2.9-0.7c-0.9-0.5-1.7-1.1-2.3-1.9 c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1,0-0.2,0-0.3,0.1L5,17.8C5,17.9,4.9,18,4.9,18.1c0,0.1,0,0.2,0.1,0.3c0.9,1.1,2.1,2,3.4,2.7 c1.3,0.6,2.8,0.9,4.3,0.9c1.4,0,2.7-0.3,3.9-0.8c1.2-0.5,2.3-1.2,3.2-2.1c0.9-0.9,1.6-2,2.1-3.2c0.5-1.2,0.8-2.5,0.8-3.9 C22.7,10.6,22.5,9.3,22,8.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M256,1C179.8,1,111.7,34.4,64.9,87.2L0,22.3V193h170.7l-60.2-60.2C145.6,91.5,197.5,65,256,65c106.1,0,192,85.9,192,192 c0,106.1-85.9,192-192,192c-53,0-101-21.5-135.8-56.2L75,438c46.4,46.3,110.4,75,181,75c141.4,0,256-114.6,256-256S397.4,1,256,1z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  height: 2rem;
  margin: 5px;
}

.redoSVG {
  /* background-image: url("data:image/svg+xml,svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M512,192V21.3l-64.9,64.9C400.3,33.4,332.2,0,256,0C114.6,0,0,114.6,0,256s114.6,256,256,256c70.7,0,134.7-28.6,181-75 l-45.3-45.2C357,426.5,309,448,256,448c-106,0-192-85.9-192-192c0-106.1,86-192,192-192c58.5,0,110.4,26.5,145.5,67.8L341.3,192H512 z'/%3E%3C/svg%3E"); */
  /* background-repeat: no-repeat;
  background-position: center;
  height: 2rem; */
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M512,192V21.3l-64.9,64.9C400.3,33.4,332.2,0,256,0C114.6,0,0,114.6,0,256s114.6,256,256,256c70.7,0,134.7-28.6,181-75 l-45.3-45.2C357,426.5,309,448,256,448c-106,0-192-85.9-192-192c0-106.1,86-192,192-192c58.5,0,110.4,26.5,145.5,67.8L341.3,192H512 z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  height: 2rem;
  width: 2rem;
  margin: 5px;
}

.zoomToFitSVG {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Icons' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Outlined' transform='translate(-137.000000, -3213.000000)'%3E%3Cg id='Maps' transform='translate(100.000000, 3068.000000)'%3E%3Cg id='Outlined-/-Maps-/-zoom_out_map' transform='translate(34.000000, 142.000000)'%3E%3Cg%3E%3Cpolygon id='Path' points='0 0 24 0 24 24 0 24'%3E%3C/polygon%3E%3Cpath d='M15,3 L17.3,5.3 L14.41,8.17 L15.83,9.59 L18.7,6.7 L21,9 L21,3 L15,3 Z M3,9 L5.3,6.7 L8.17,9.59 L9.59,8.17 L6.7,5.3 L9,3 L3,3 L3,9 Z M9,21 L6.7,18.7 L9.59,15.83 L8.17,14.41 L5.3,17.3 L3,15 L3,21 L9,21 Z M21,15 L18.7,17.3 L15.83,14.41 L14.41,15.83 L17.3,18.7 L15,21 L21,21 L21,15 Z' id='🔹-Icon-Color' fill='%231D1D1D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  height: 2rem;
  margin: 2px;
}