body
  {
  text-align: center;
  margin: 0;
  background-color: #e0e0e0;
  }

h1, h2, h3
  {
  margin-top: 0;
  margin-bottom: 0;
  }

pre
  {
  overflow: auto;
  border: 1px solid #000;
  }
  
.hidden
  {
  display: none;
  }

.left
  {
  text-align: left;
  }

a
  {
  color: #0030ff;
  }

a:hover
  {
  color: #0080ff;
  }

table.border
  {
  border: 1px solid #000000;
  border-collapse: collapse;
  }

table.border td
  {
  border: 1px solid #000000;
  }

.mp_area
  {
  margin-left: auto;
  margin-right: auto;
  }

.mp_left
  {
  display:inline-block;
  }

.mp_center
  {
  display:inline-block;
  max-width: 1024px;
  width: 100%;
  }

.mp_right
  {
  display:inline-block;
  }

.mp_site
  {
  height: 15vh;
  background-color: #f8f8ff;
  box-shadow: 0 0 15px #c0c0e0 inset;
  border-radius: 10px;
  padding: 10px;
  }

.logo
  {
  min-height: 92px;
  color: #00000000;
  font-size: 0px;
  background-image: url("img/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  }

.mp_site h2
  {
  font-size: 1.5em;
  }

.mp_box
  {
  padding: 10px;
  background-color: #f8f8ff;
  border-radius: 10px;
  box-shadow: 0 0 15px #c0c0e0 inset;
  }

.mp_box:nth-child(even)
  {
  background-color: #e0e0ff;
  box-shadow: 0 0 15px #c0c0d0 inset;
  }

.demo-col
  {
  width: 100%;
  }

.top_menu
  {
  margin-bottom: 15px;
  font-size: 1.3em;
  font-weight: bold;
  }

.bottom_menu
  {
  font-weight: bold;
  }

.top_menu a, .bottom_menu a
  {
  text-decoration: none;
  color: #4000b0;
  padding: 0px 2px;
  border: 1px solid #00000000;
  }

.top_menu a:hover, .bottom_menu a:hover
  {
  border: 1px solid #4000b0;
  border-radius: 5px;
  background-color: #e0e0ff;
  }

.row-container
  {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  }

.row-autoheight
  {
  flex:1;
  }

.column-container
  {
  display: flex;
  flex-direction: row;
  }

form.filedrop
  {
  border: 2px dashed #666;
  border-radius: 10px;
  color: #666;
  padding: 10px;
  }

.filedrop.hover
  {
  border: 2px dashed #0030ff;
  background-color: #e0e0e0;
  }

form.filedrop input[type="file"]
  {
  display: none;
  }

form.filedrop label
  {
  color: #0030ff;
  cursor: pointer;
  }

form.filedrop label:hover
  {
  color: #0080ff;
  cursor: pointer;
  }

.drop-icons
  {
  }

.drop-icons div
  {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 96px;
  background-size: contain;
  overflow: hidden;
  color: #0030ff;
  }

.drop-icons div.ico-upload
  {
  background-image: url("img/ico-upload.png");
  }

.drop-icons div.ico-gbr
  {
  background-image: url("img/ico-gbr.png");
  }

.drop-icons div.ico-rar
  {
  background-image: url("img/ico-rar.png");
  }

.drop-icons div.ico-zip
  {
  background-image: url("img/ico-zip.png");
  }

.popup
  {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  }

.popup > div
  {
  margin: 5vh auto;
  padding: 40px;
  background: #fff;
  border-radius: 5px;
  max-width: 1024px;
  display: inline-block;
  position: relative;
  max-height: 80vh;
  overflow: auto;
  }

.close
  {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #0030ff;
  }

.close:hover
  {
  color: #0080ff;
  }

/* layer */

select.sel-layer, .sel-layer option
  {
  height: 35px;
  padding-left: 64px;
  background-repeat: no-repeat;
  background-position: center left;
  }

select[val="unused"].sel-layer, .sel-layer option[value="unused"]
  {
  background-image: url("img/board-unused.png");
  }

select[val="top_silk"].sel-layer, .sel-layer option[value="top_silk"]
  {
  background-image: url("img/board-top-silk.png");
  }

select[val="top_resist"].sel-layer, .sel-layer option[value="top_resist"]
  {
  background-image: url("img/board-top-resist.png");
  }

select[val="top_copper"].sel-layer, .sel-layer option[value="top_copper"]
  {
  background-image: url("img/board-top-copper.png");
  }

select[val="drill"].sel-layer, .sel-layer option[value="drill"]
  {
  background-image: url("img/board-drill.png");
  }

select[val="mech"].sel-layer, .sel-layer option[value="mech"]
  {
  background-image: url("img/board-outline.png");
  }

select[val="bot_silk"].sel-layer, .sel-layer option[value="bot_silk"]
  {
  background-image: url("img/board-bottom-silk.png");
  }

select[val="bot_resist"].sel-layer, .sel-layer option[value="bot_resist"]
  {
  background-image: url("img/board-bottom-resist.png");
  }

select[val="bot_copper"].sel-layer, .sel-layer option[value="bot_copper"]
  {
  background-image: url("img/board-bottom-copper.png");
  }

.layer-view
  {
  border: 1px solid black;
  border-radius: 5px;
  margin: 2px;
  width: 100%;
  cursor: pointer;
  }

.layer-view:hover
  {
  box-shadow: 0 0 15px #c0c0e0 inset;
  }

.stacked-img
  {
  position: relative;
  display: inline-block;
  width: 85%;
  }

.stacked-img img
  {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  }

.stacked-img img:first-child
  {
  position: relative;
  }


input[type="radio"]
  {
  width   : 20px;
  margin  : 0;
  padding : 0;
  opacity : 0;
  }

input[type=radio] + label > span
  {
  margin-left: -20px;
  padding-left: 20px;
  border: 2px solid #d0d0d0;
  }

input[type=radio]:checked + label > span
  {
  border: 2px solid black;
  }

input[type=radio][value=green] + label > span { background-color: green; }
input[type=radio][value=blue] + label > span { background-color: blue; }
input[type=radio][value=red] + label > span { background-color: red; }
input[type=radio][value=yellow] + label > span { background-color: yellow; }
input[type=radio][value=purple] + label > span { background-color: purple; }
input[type=radio][value=black] + label > span { background-color: black; }
input[type=radio][value=white] + label > span { background-color: white; }
input[type=radio][value=gold] + label > span { background-color: gold; }
input[type=radio][value=silver] + label > span { background-color: silver; }

/*gbr standard*/
.dep
  {
  background-color: #ffff00;
  }

.sup
  {
  color: #008800;
  }

.uns
  {
  color: #ff0000;
  }

.ign
  {
  color: #ff8800;
  }

.dev
  {
  background-color: #00ff00;
  }

/*render*/
.render_img
  {
  max-width: 100%;
  }

.render_img_zoom
  {
  max-width: none;
  cursor: zoom-out !important;
  position: relative;
  left: 0px;
  }

.cvs3d
  {
  width: 100%;
  height: 90vh;
  }

.loading
  {
  min-width: 40px;
  min-height: 40px;
  background-image: url("img/loading.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  }

.render-progress
  {
  position: fixed;
  right: 5px;
  top: 10px;
  background-color: #ffffffa0;
  overflow: auto;
  bottom: 10px;
  border: 2px solid #000000;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  }

.render-progress > p
  {
  margin: 10px 30px 10px 10px;
  }
  
.render-progress > div
  {
  text-align: left;
  flex: 1;
  background-color: #aaaaaa80;
  overflow: auto;
  margin: 10px;
  padding-left: 10px;
  border: 1px solid #000000;
  }

.open-log
  {
  display: inline-block;
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  }

.open-log:hover
  {
  color: #0080ff;
  box-shadow: 0 0 15px #c0c0e0 inset;
  }


.log-toggle
  {
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  padding: 3px;
  color: #000000;
  }

.log-toggle:hover
  {
  color: #808080;
  box-shadow: 0 0 15px #c0c0e0 inset;
  }

.log-toggle.dis
  {
  border: 1px solid #808080;
  color: #808080;
  background-color: #ffffff !important;
  }

/* normal */
.logmsg1
  {
  color: #000000;
  }

#logmsg1
  {
  background-color: #ffffff;
  }

/* deprecated */
.logmsg2
  {
  color: #ff8000;
  display: none;
  }

#logmsg2
  {
  background-color: #ff8000;
  }

/* warning */
.logmsg4
  {
  color: #ff00ff;
  }

#logmsg4
  {
  background-color: #ff00ff;
  }

/* comment */
.logmsg8
  {
  color: #0080ff;
  }

#logmsg8
  {
  background-color: #0080ff;
  }

/* attribute */
.logmsg16
  {
  color: #00aa00;
  }

#logmsg16
  {
  background-color: #00aa00;
  }

/* error */
.logmsg32
  {
  color: #ff0000;
  }

#logmsg32
  {
  background-color: #ff0000;
  }