@font-face{
    font-family: "gotham bold";
    src: url('font/Gotham-Bold.otf'),
    url('font/Gotham-Bold.otf'); /* IE */
}

@font-face{
    font-family: "gotham light";
    src: url('font/Gotham-Light.otf'),
    url('font/Gotham-Light.otf'); /* IE */
}

@font-face{
    font-family: "gotham book";
    src: url('font/Gotham-Book.otf'),
    url('font/Gotham-Book.otf'); /* IE */
}

html, body{
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 0px;
  line-height: 1;
}

.renderSpace{
  position: absolute;
  top: 0px;
}

.function-container{
  /* position: relative; */
  width: 100%;
  height: 85vh;
}

.titleIcon{
  /* margin-top: 10px; */
  position: absolute;
  top: 10px;
  left: 5vw;
}

/* .titleGroup{
  position: absolute;
} */

.menuGroups{
  /* float: right;
  margin-right: 5vw; */
  position: absolute;
  top: 15px;
  right: 5vw;
}

.menuGroup{
  /* display: inline; */
  /* position: absolute;
  right: 5vw; */
  position: relative;
  transition: all 1s ease-in;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.2);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.menuGroup img{
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
}

.menuGroup img:nth-child(1){
  margin-left: 0px;
}

.menuGroup img:hover{
  transform: scale(1.2);
}

.menuGroup-hide{
  /* display: inline; */
  opacity: 0;
  transform: translateX(0) translateY(-160px);
  transition: all .25s ease-in;
}

.menuGroup-abs{
  position: absolute;
}

.voxel-import-icon{
  margin: 15px 15px 15px 0;
  cursor: pointer;
}

.voxel-import-icon:hover{
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}

.modeBtn{
  background: none;
  padding: 3px 10px;
  margin: 0px !important;
  color: #888;
  font-family: gotham book;
  font-size: 12pt;
  border-radius: 50px;
  border-style: solid;
  border-color: #888;
  border-width: 1px;
  cursor: pointer;
}

.modeBtn:hover{
  background: #666;
  color: white;
  border-color: #666;
  transition: all .15s ease-in;
}

.modeMenu-block{
  /* 10+60+10+60+10+60+10 = 220px */
  width: 220px;
  height: auto;
  /* rgb 153,153,153 = #999 */
  background-color: rgba(153, 153, 153, 0.5) !important;
  border-radius: 5px !important;
  border-style: solid;
  border-color: #999;
  border-width: 1px;
}

.modeMenu-icon-up{
  cursor: pointer;
  margin: 0 0 0 10px;
  opacity: 1;
}

.modeMenu-icon-down{
  cursor: pointer;
  margin: 0 0 0 10px;
  opacity: .5;
}

.modeMenu-icon-down:hover{
  opacity: 1;
  transition: all .15s ease-in;
}

/* for FAV */
.modeMenu-block-format{
  width: 150px;
  height: auto;
  /* rgb 153,153,153 = #999 */
  background-color: rgba(153, 153, 153, 0.5) !important;
  border-radius: 5px !important;
  border-style: solid;
  border-color: #999;
  border-width: 1px;
  text-align: center !important;
}

.modeMenu-format-all{
  display: inline-block;
  font-family: gotham book;
  font-size: 12pt;
  cursor: pointer;
  margin-bottom: 0px !important;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
}

.modeMenu-format-all:hover{
  transform: scale(1.2);
}

.modeMenu-format-left{
  margin-right: 17px;
}

.modeMenu-format-right{
  margin-left: 17px;
}

.modeMenu-dash{
  display: inline-block;
}

.voxel-import-icon{
  margin: 15px 15px 15px 0;
  cursor: pointer;
}

.voxel-import-icon:hover{
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}

.voxel-import-icon-down{
  margin: 15px 15px 15px 0;
  cursor: pointer;
  opacity: 0.5;
}

.voxel-import-icon-down:hover{
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}
/* for FAV finished */

.mode-dropLeft1, .mode-dropLeft2, .mode-dropLeft3{
  position: absolute !important;
  right: 5vw;
}

.mode-dropLeft1{
  /* (最上距離)+(上面icon高)+(與icon距離設定) */
  top: calc(15px + 60px + 15px);
}

.mode-dropLeft2{
  /* (最上距離)+(上面icon高)+(與icon距離設定)+(12pt*1.5行高)+(上下各3px的padding)+(與dropLeft1的距離設定) */
  top: calc(15px + 60px + 15px + 18pt + 6px + 15px);
}

.mode-dropLeft3{
  /* (總高)-(下面icon高)-(最底距離)-(12pt*1.5行高)-(上下各3px的padding)-(與下面icon距離設定) */
  top: calc(80vh - 60px - 15px - 18pt - 6px - 15px);
}

.sampleMenu-block{
  width: 360px;
  height: auto;
  background-color: rgba(153, 153, 153, 0.5) !important;
  border-radius: 5px !important;
  border-style: solid;
  border-color: #999;
  border-width: 1px;
}

.sampleMenu-icon{
  cursor: pointer;
  margin: 0 0 0 10px;
}

.lowerButton{
  clear: both;
  width: 90vw;
  height: 15vh;
  overflow: visible;

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 5vw;
}

.centerBtn{
  display: inline;

}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.importBtn{
  float: left;
  color: #1c51a8;
  border-color: #1c51a8;
}

.fileBtn{
  background: white;
  margin: 0 5px;
  padding: 3px 10px;
  font-family: gotham book;
  font-size: 12pt;
  border-radius: 50px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

.fileBtn:hover{
  /* margin: 0;
  padding: 5px 15px;
  font-family: gotham book;
  border-radius: 50px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer; */
  transform: scale(1.1);
  box-shadow: 0px 0px 10px #999;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
}

.mergeBtn{
  float: right;
  color: green;
  border-color: green;
}

.clearBtn{
  color: red;
  border-color: red;
}

.closeBtn{
  color: black;
  border-color: black;
}

/*only for modal*/
.modal-font{
  text-align: left;
  font-family: gotham book;
}
.modalBody-size{
  font-size: 12pt;
}
/*only for modal OVER*/

.counter{
  bottom: 0;
}

.countZone{
  clear: both;
  /* 設margin-top的話 clear both就可有可無 */

  position: absolute;
  /* (整體高) - (兩行字高) - (中間的margin) - (最底的間隔設定) */
  top: calc(80vh - 40pt - 15px - 15px);
  left: 5vw;
}

.countZone section{
  line-height: 1;
}

.countZone section:nth-child(2){
  margin-top: 15px;
}

.countSpace{
  background: none;
  /* 延長width 以免數字的位數多的時候被擠到下一排影響到整個layout */
  font-size: 20pt;
  font-family: gotham book;
  cursor: default;
  /* margin-top: 15px; */
}

.lowerFunction-group{
  margin-top: -125px;
}

.type-mold{
  position: absolute;
  right: 5vw;
  top: calc(80vh - 60px - 15px);
}

.type-mold img{
  display: inline-block;
  margin: 0 20px 0 0;
  cursor: pointer;
  /* bootstrap 原本設定的 vertical-align: middle; 在canvas出現之後 會讓img跑位*/
  vertical-align: auto;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
}

.type-mold img:nth-child(4){
  margin-right: 0px;
}

.type-mold img:hover{
  transform: scale(1.2);
}

.imgCanvas{
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #888;
  margin-left: 20px;
}

.btn-unavailable{
  opacity: 0.5;
}

.topMenuIcon.imgCanvas{
  transform: none;
  cursor: auto;
}

.modal-body-margin{
  margin-bottom: 10px;
}

.accuracy-btn-set{
  width: 100%;
  text-align: center;
}

.accuracy-degree{
  background: white;
  margin: 0 5px;
  padding: 3px 10px;
  font-family: gotham book;
  font-size: 12pt;
  border-radius: 99em;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

.accuracy-degree:hover{
  background:#1c51a8;
  color: white;
  transition-duration: 200ms;
}

.accuracy-degree:focus {
  background:#1c51a8;
  color: white;
  transition-duration: 200ms;
}

.accuracy-degree-pressed{
  background:#1c51a8;
  color: white;
  margin: 0 5px;
  padding: 3px 10px;
  font-family: gotham book;
  font-size: 12pt;
  border-radius: 99em;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  transition-duration: 200ms;
}

.accuracy-position1{
  float: left;
  margin-left: 0px;
}

.accuracy-position2{
  float: none;
}

.accuracy-position3{
  float: right;
  margin-right: 0px;
}

.sub-selection{
  clear: both;
  font-family: gotham book;
  font-size: 12pt;
}

.sub-selection-hide{
  display: none;
}

.sub-selection-circle-pressed{
  cursor: pointer;
  width: 15px;
  height: 15px;
  border-radius: 99em;
  border-style: solid;
  border-width: 1px;
  border-color: #1c51a8;
  background-color: #1c51a8;
  margin-right: 5px;
}

.sub-selection-circle-released{
  cursor: pointer;
  width: 15px;
  height: 15px;
  border-radius: 99em;
  border-style: solid;
  border-width: 1px;
  border-color: #1c51a8;
  background-color: #fff;
  margin-right: 5px;
}

.sub-selection-item{
  display: inline-block;
  margin-top: 10px;
}

.modal-continue{
  margin-right: 0px;
}

.modal-sub-title{
  clear: both;
  font-family: gotham book;
  font-size: 12pt;
  text-align: left !important;
}

.photo-import-progress-position{
  font-size: 9pt;
  font-family: gotham bold;
  position: absolute;
  left: 0;
  margin-left: 16px;
}

.photo-import-progress{
  font-family: gotham book;
  opacity: 0.5;
}

.inputBox{
  display: inline-block !important;
  width: 47.5% !important;
  /* margin-right: 4% !important; */
  text-align: left !important;
}

.input-margin{
  margin-right: 4%;
}

.font-dropDown-position{
  clear: both;
  display: inline-block !important;
  margin-top: 5px;
}

.fontDropDownBtn-css{
  border-radius: 50px !important;
  background: none !important;
  padding: 3px 10px !important;
  color: #888 !important;
  font-family: gotham book !important;
  font-size: 12pt !important;
  border-radius: 50px !important;
  border-style: solid !important;
  border-color: #888 !important;
  border-width: 1px !important;
}

.fontDropDownBtn-css:hover{
  background: #666 !important;
  color: white !important;
  border-color: #666 !important;
  transition: all .15s ease-in !important;
}

.font-display{
  margin-top: 5px;
  display: inline-block;
  /* 字體與大小已經在上層的modal-font裡面定義過了 於須再定義 (gotham-book 12pt) */
  margin-left: 4%;
  color: #888;
  font-style: italic;
  font-family: gotham bold;
}

/* 改bootstrap裡面的同名class */
.modal-dialog {
  max-width: 550px !important;
}

.input-group-text{
  border-bottom-left-radius: 50px !important;
  border-top-left-radius: 50px !important;
}

.form-control{
  border-bottom-right-radius: 50px !important;
  border-top-right-radius: 50px !important;
}


/* definition for loader */
.loader-hide{
  display: none;
}

.loader-background{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0.3);
}

.loader-itself{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -39px;
  margin-top: -78px;
}

.loader-text{
  display: inline-block;
  color: #fff;
  font-family: gotham bold;
  font-size: 12pt;
  margin-top: 15px;
  margin-left: -17px;
}

@-webkit-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.3; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-grid-pulse {
  width: 78px;
}
.ball-grid-pulse > div:nth-child(1) {
  -webkit-animation-delay: 0.22s;
          animation-delay: 0.22s;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s; }
.ball-grid-pulse > div:nth-child(2) {
  -webkit-animation-delay: 0.64s;
          animation-delay: 0.64s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }
.ball-grid-pulse > div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
  -webkit-animation-duration: 0.63s;
          animation-duration: 0.63s; }
.ball-grid-pulse > div:nth-child(4) {
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
  -webkit-animation-duration: 1.24s;
          animation-duration: 1.24s; }
.ball-grid-pulse > div:nth-child(5) {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
  -webkit-animation-duration: 1.37s;
          animation-duration: 1.37s; }
.ball-grid-pulse > div:nth-child(6) {
  -webkit-animation-delay: 0.43s;
          animation-delay: 0.43s;
  -webkit-animation-duration: 1.55s;
          animation-duration: 1.55s; }
.ball-grid-pulse > div:nth-child(7) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s; }
.ball-grid-pulse > div:nth-child(8) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
  -webkit-animation-duration: 0.97s;
          animation-duration: 0.97s; }
.ball-grid-pulse > div:nth-child(9) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.63s;
          animation-duration: 0.63s;}
.ball-grid-pulse > div {
  background-color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin: 3px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  float: left;
  -webkit-animation-name: ball-grid-pulse;
          animation-name: ball-grid-pulse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}